@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-drawer/examples.md

@@ -0,0 +1,432 @@
+# CdsDrawer — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+The side panel of the application: navigation sections on the left, the context of a record or filters on the right. Inside `CdsLayout` the drawer takes its place in the layout and pushes the content aside, and in temporary mode it slides out over it.
+
+## Permanent drawer
+
+The `permanent` prop keeps the drawer on the screen at all times. Without it the drawer hides on screens narrower than 1056 px — the content gets the whole width, and the navigation is opened by a button.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDrawer, CdsLayout, CdsList, CdsListItem, CdsMain, CdsPage } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[580px]">
+    <CdsLayout container>
+      <CdsDrawer permanent border>
+        <CdsList>
+          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
+          <CdsListItem title="Договоры" href="#" prepend-icon="doc" />
+          <CdsListItem title="Отчёты" href="#" prepend-icon="data-cards" />
+        </CdsList>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+            Панель стоит в потоке макета: контент начинается сразу за ней и никогда не оказывается под панелью.
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Temporary drawer
+
+The `temporary` prop turns the drawer into a sliding one: it takes no place in the layout, opens through `v-model` and closes on a click on the overlay or on Esc. The `@opened` and `@closed` events report the change of state.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsDrawer,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const open = ref(false);
+</script>
+
+<template>
+  <div class="h-[580px]">
+    <CdsLayout container>
+      <CdsDrawer v-model="open" temporary border>
+        <CdsList>
+          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
+          <CdsListItem title="Договоры" href="#" prepend-icon="doc" />
+          <CdsListItem title="Отчёты" href="#" prepend-icon="data-cards" />
+        </CdsList>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <CdsButton prepend-icon="menu" @click="open = true">Открыть навигацию</CdsButton>
+          <div class="mt-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
+            Временная панель выезжает поверх контента и закрывается кликом по затемнению или клавишей Esc.
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Minified drawer
+
+The `minified` prop shrinks the drawer down to icons and gives the width back to the content. On hover the drawer expands over the page without pushing it, so the section labels stay reachable.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsDrawer,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsToggle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const minified = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsToggle v-model="minified" label="Свернуть до иконок" hide-details />
+
+    <div class="h-[480px]">
+      <CdsLayout container>
+        <CdsDrawer permanent border :minified="minified">
+          <CdsList>
+            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
+            <CdsListItem title="Договоры" href="#" prepend-icon="doc" />
+            <CdsListItem title="Отчёты" href="#" prepend-icon="data-cards" />
+          </CdsList>
+        </CdsDrawer>
+
+        <CdsMain>
+          <CdsPage padding>
+            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Наведите курсор на свёрнутую панель — она развернётся поверх контента, не сдвигая его.
+            </div>
+          </CdsPage>
+        </CdsMain>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Position
+
+The `right` prop moves the drawer to the right edge. The application navigation usually lives on the left, and the context of the current record — history, comments, filters — on the right. Both drawers can work in the same layout at once.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDrawer, CdsLayout, CdsList, CdsListItem, CdsMain, CdsPage } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[480px]">
+    <CdsLayout container>
+      <CdsDrawer permanent border>
+        <CdsList>
+          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
+          <CdsListItem title="Договоры" href="#" prepend-icon="doc" />
+        </CdsList>
+      </CdsDrawer>
+
+      <CdsDrawer permanent right border>
+        <CdsList>
+          <CdsListItem title="История изменений" href="#" prepend-icon="clock" />
+          <CdsListItem title="Комментарии" href="#" prepend-icon="comment" />
+        </CdsList>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+            Слева навигация, справа контекст записи — макет резервирует место под обе панели.
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Color
+
+The `bg-color` prop paints the background of the drawer with a palette alias, `color` paints the text and the icons inside. A dark drawer next to light content emphasizes the border of the working area.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsDrawer,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsRadio,
+  CdsRadioGroup
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const bgColor = ref('default');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="bgColor" direction="horizontal" hide-details>
+      <CdsRadio value="default" label="Цвет темы" />
+      <CdsRadio value="neutral" label="neutral" />
+      <CdsRadio value="indigo" label="indigo" />
+      <CdsRadio value="teal" label="teal" />
+    </CdsRadioGroup>
+
+    <div class="h-[480px]">
+      <CdsLayout container>
+        <CdsDrawer permanent :bg-color="bgColor === 'default' ? undefined : bgColor">
+          <CdsList>
+            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
+            <CdsListItem title="Договоры" href="#" prepend-icon="doc" />
+            <CdsListItem title="Отчёты" href="#" prepend-icon="data-cards" />
+          </CdsList>
+        </CdsDrawer>
+
+        <CdsMain>
+          <CdsPage padding>
+            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+          </CdsPage>
+        </CdsMain>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Slots
+
+The `fixed-slots` prop keeps `prepend` and `append` in place and gives the scroll to the list of sections only — long navigation no longer pushes the sign-out button past the edge.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsAvatar,
+  CdsButton,
+  CdsDrawer,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[380px]">
+    <CdsLayout container>
+      <CdsDrawer permanent border fixed-slots>
+        <template #prepend>
+          <div class="flex items-center gap-2">
+            <CdsAvatar icon="company" />
+            <span class="font-bold text-content-primary">Портал закупок</span>
+          </div>
+        </template>
+
+        <CdsList>
+          <CdsListItem v-for="n in 12" :key="n" :title="'Раздел ' + n" href="#" prepend-icon="doc" />
+        </CdsList>
+
+        <template #append>
+          <CdsButton appearance="tertiary" block prepend-icon="logout">Выйти</CdsButton>
+        </template>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+            Список разделов скроллится, а шапка и кнопка выхода остаются на месте.
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Application navigation
+
+A logo in `prepend`, the sections in a `CdsList` with `active` on the current one, a sign-out button in `append`. The `lhh lpr fff` layout scheme gives the top left corner to the drawer, so it starts from the very top and reads as the backbone of the application.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsAvatar,
+  CdsButton,
+  CdsDrawer,
+  CdsHeader,
+  CdsLayout,
+  CdsList,
+  CdsListGroup,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const sections = [
+  { key: 'purchases', title: 'Закупки', icon: 'shopping-cart' },
+  { key: 'contracts', title: 'Договоры', icon: 'doc' },
+  { key: 'reports', title: 'Отчёты', icon: 'data-cards' }
+];
+const active = ref('purchases');
+</script>
+
+<template>
+  <div class="h-[560px]">
+    <CdsLayout container view="lhh lpr fff">
+      <CdsHeader bordered>
+        <CdsToolbar>
+          <CdsToolbarTitle>{{ sections.find((section) => section.key === active)?.title }}</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsDrawer permanent border fixed-slots>
+        <template #prepend>
+          <div class="flex items-center gap-2">
+            <CdsAvatar icon="company" />
+            <span class="font-bold text-content-primary">Портал закупок</span>
+          </div>
+        </template>
+
+        <CdsList>
+          <CdsListItem
+            v-for="section in sections"
+            :key="section.key"
+            :title="section.title"
+            :prepend-icon="section.icon"
+            :active="active === section.key"
+            @click="active = section.key"
+          />
+          <CdsListGroup>
+            <template #activator="{ props }">
+              <CdsListItem title="Контрагенты" prepend-icon="company" v-bind="props" />
+            </template>
+            <CdsListItem title="Поставщики" href="#" prepend-icon="user-group" />
+            <CdsListItem title="Заказчики" href="#" prepend-icon="user-avatar" />
+          </CdsListGroup>
+        </CdsList>
+
+        <template #append>
+          <CdsButton appearance="tertiary" block prepend-icon="logout">Выйти</CdsButton>
+        </template>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+            Раздел «{{ sections.find((section) => section.key === active)?.title }}»
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Notification panel
+
+A right drawer with `temporary` opens from an icon in the header, shows the list and closes on a click on the overlay. It takes no place in the layout, so the main content is not rebuilt when it opens.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsBadge,
+  CdsButton,
+  CdsDrawer,
+  CdsFunctionalButton,
+  CdsHeader,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const open = ref(false);
+const items = ref([
+  { id: 1, title: 'Закупка №2401 опубликована', time: '5 минут назад' },
+  { id: 2, title: 'Новое предложение от ООО «Вектор»', time: '2 часа назад' },
+  { id: 3, title: 'Договор №118 подписан', time: 'вчера' }
+]);
+</script>
+
+<template>
+  <div class="h-[520px]">
+    <CdsLayout container>
+      <CdsHeader bordered>
+        <CdsToolbar>
+          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
+          <CdsBadge :content="items.length" :model-value="items.length > 0">
+            <CdsFunctionalButton icon="notification" aria-label="Уведомления" @click="open = true" />
+          </CdsBadge>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsDrawer v-model="open" right temporary border fixed-slots>
+        <template #prepend>
+          <div class="font-bold text-content-primary">Уведомления</div>
+        </template>
+
+        <CdsList>
+          <CdsListItem v-for="item in items" :key="item.id" :title="item.title" :subtitle="item.time" href="#" />
+        </CdsList>
+
+        <template #append>
+          <CdsButton appearance="tertiary" block @click="items = []">Отметить все прочитанными</CdsButton>
+        </template>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-drawer/guidelines.md

@@ -0,0 +1,9 @@
+# CdsDrawer — guidelines
+
+> Extracted from `docs/demos/Guidelines.vue` by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md).
+
+| ✅ Do | ❌ Don't |
+| --- | --- |
+| Icons help recognize the sections and stay readable in a minified drawer. | Without icons a minified drawer turns into an empty strip. |
+| The drawer holds the sections of the application; the current one is marked with the active state. | A drawer stuffed with actions and filters stops being navigation. |

package/skills/cds-builder/references/components/cds-drawer/tokens.md

@@ -0,0 +1,27 @@
+# CdsDrawer — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## _CdsDrawer.variables.scss
+
+```scss
+// Размеры панели — структурные константы макета.
+$drawer-width: 240px !default;
+$drawer-width-minified: 56px !default;
+
+// Отступы секций — на токенах спейсинга.
+$drawer-block-padding: var(--cds-spacing-400) !default;
+$drawer-inline-padding: var(--cds-spacing-100) !default;
+$drawer-prepend-padding: var(--cds-spacing-200)
+  var(--cds-spacing-400) !default;
+$drawer-append-padding: var(--cds-spacing-300) var(--cds-spacing-400) !default;
+
+// Границы и цвета — на CSS-переменных.
+$drawer-border: var(--cds-border-100) solid !default;
+$drawer-background: rgb(var(--cds-color-surface-elevated)) !default;
+$drawer-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+$drawer-overlay-color: rgb(var(--cds-color-surface-overlay)) !default;
+$drawer-shadow-border-color: rgb(var(--cds-color-line-elevated)) !default;
+```

package/skills/cds-builder/references/components/cds-empty-state/api.md

@@ -0,0 +1,55 @@
+# CdsEmptyState — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Guidelines: [guidelines.md](guidelines.md) · Tokens: [tokens.md](tokens.md)
+
+An empty state explains why there is no content on the screen and suggests the next step: no search results, an empty list, a loading error. It is assembled from a media area, headings, a description and an action button.
+
+## CdsEmptyState
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `actionText` | `string \| undefined` | — | no | Text of the action button. When set, a button is rendered below the content. |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `color` | `string \| undefined` | — | no | Component color |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `description` | `string \| undefined` | — | no | Description |
+| `headline` | `string \| undefined` | — | no | Large accent heading above the main heading. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `icon` | `IconValue \| undefined` | — | no | Icon in the media area. |
+| `illustration` | `string \| undefined` | — | no | Legacy illustration from the `@central-design-system/illustrations` package (CDS 3): the kebab-case name of a globally registered component, for example `rocket`. Illustrations are registered through the `illustrations` option of `createCds`. |
+| `image` | `string \| undefined` | — | no | Source of the image in the media area (takes priority over `icon`). |
+| `justify` | `"start" \| "end" \| "center" \| undefined` | `'center'` | no | Horizontal alignment of the content: `start`, `center`, `end`. |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `textWidth` | `string \| number \| undefined` | `500` | no | Maximum width of the description block. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `title` | `string \| undefined` | — | no | Heading. |
+| `to` | `LinkTo \| undefined` | — | no | Target route or route location object for RouterLink. When set, the component behaves as a RouterLink |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click:action` | `[event: MouseEvent]` | Click on the action button. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `actions` | `{ props: { onClick: (event: MouseEvent) => void; }; }` | Actions slot; receives `props` with an `onClick` handler to bind to your own element. |
+| `default` | `any` | Arbitrary content between the description and the actions. |
+| `description` | `any` | Description slot (instead of the `description` prop). |
+| `headline` | `any` | Accent heading slot (instead of the `headline` prop). |
+| `illustration` | `any` | Media area slot for an illustration (instead of the `illustration` prop). |
+| `media` | `any` | Media area slot (instead of the `image` / `icon` props). |
+| `text` | `any` | Description slot (instead of the `text` prop). |
+| `title` | `any` | Heading slot (instead of the `title` prop). |