npm package: @fkupme/hot-components
Description: Headless UI component library for Vue 3
Author: @fkupme
Latest version: 0.1.0

# FloatingContainer — Standalone Draggable/Resizable Wrapper

Самодостаточная обёртка для создания floating-окон с drag, resize, snap-to-edges.
Извлечена из process-widget, очищена от бизнес-логики.

## Структура файлов

```
floating-container/
├── FloatingContainer.vue              # Главный компонент
├── composables/
│   ├── useFloatingContainer.ts        # Drag, snap, border-radius, collapse, localStorage
│   └── useWidgetResize.ts             # 8-direction resize handles
└── README.md
```

## npm-зависимости

| Пакет | Что используется |
|---|---|
| `vue` (3.x) | ref, computed, reactive, watch, onMounted, onUnmounted, nextTick |
| `@vueuse/core` | `useDraggable()`, `useLocalStorage()` |

**Pinia НЕ нужна** — visibility и state управляются через props снаружи.

## Быстрый старт

```vue
<template>
  <button @click="show = !show">Toggle Container</button>

  <FloatingContainer
    :visible="show"
    title="My Widget"
    storage-key="my-widget"
    :default-width="500"
    :default-height="400"
    @close="show = false"
  >
    <div style="padding: 16px;">
      Любой контент внутри body
    </div>
  </FloatingContainer>
</template>

<script setup>
import { ref } from 'vue';
import FloatingContainer from './FloatingContainer.vue';

const show = ref(true);
</script>
```

## Props

| Prop | Тип | Default | Описание |
|---|---|---|---|
| `visible` | `boolean` | `true` | Показать/скрыть контейнер |
| `title` | `string` | `'Floating Container'` | Текст в header |
| `closable` | `boolean` | `true` | Показывать кнопку закрытия |
| `storageKey` | `string` | `'floating-container'` | Ключ localStorage (позиция + размер) |
| `minWidth` | `number` | `280` | Минимальная ширина (px) |
| `minHeight` | `number` | `200` | Минимальная высота (px) |
| `maxWidth` | `number` | `90% viewport` | Максимальная ширина (px) |
| `maxHeight` | `number` | `80% viewport` | Максимальная высота (px) |
| `defaultWidth` | `number` | `400` | Ширина по умолчанию (px) |
| `defaultHeight` | `number` | `300` | Высота по умолчанию (px) |
| `defaultX` | `number` | авто | Позиция X по умолчанию |
| `defaultY` | `number` | авто | Позиция Y по умолчанию |

## Events

| Event | Payload | Описание |
|---|---|---|
| `close` | — | Клик на кнопку закрытия |

## Slots

| Slot | Props | Описание |
|---|---|---|
| `default` | — | Контент body |
| `header` | `{ isCollapsed, toggle }` | Полностью заменить header |
| `title` | — | Заменить только текст заголовка |

## Возможности

- **Drag** за header, ограничение viewport
- **Snap to edges** с гистерезисом 10px (магнитится при приближении, отлипает при оттаскивании)
- **Resize** 8 направлений (n/s/e/w/ne/nw/se/sw), min/max constraints
- **Collapse/expand** — кнопка chevron в header
- **Border-radius** обнуляется при касании краёв viewport
- **localStorage** — позиция и размер сохраняются автоматически
- **Window resize** — контейнер остаётся в пределах viewport

## Интеграция в другой проект

1. Скопировать папку `floating-container/` целиком
2. Убедиться что установлены `vue 3` и `@vueuse/core`
3. Импортировать `FloatingContainer.vue`
4. SCSS: компонент scoped, проектные SCSS-переменные не нужны
5. Цвета захардкожены (header: `rgba(#000, 0.92)`, body: `#fff`, accent: `#00c853`)
   — поменять под свой дизайн в `<style>` секции FloatingContainer.vue