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

package/skills/cds-builder/references/components/cds-file-upload/examples.md

@@ -0,0 +1,411 @@
+# CdsFileUpload — 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.
+
+A file upload zone: it accepts files by dragging, by pasting from the clipboard and through the system dialog, and shows the selection as a list with image previews. Around the zone the component gathers everything a form needs: a label, a description, messages and validation.
+
+## Choosing files
+
+The basic case is a single file: drag it into the zone, paste it from the clipboard or pick it with the button. A repeated choice replaces the file.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref<File | null>(null);
+</script>
+
+<template>
+  <div class="max-w-lg m-auto">
+    <CdsFileUpload v-model="model" />
+  </div>
+</template>
+```
+
+## Choosing files
+
+The `multiple` prop allows choosing several files — they pile up as a list under the zone. `clearable` gives every one of them a remove button, `show-size` — the size.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref<File[]>([]);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 max-w-lg m-auto">
+    <CdsFileUpload v-model="model" subtitle="Можно выбрать несколько файлов сразу" multiple clearable show-size />
+
+    <p class="text-200 text-content-secondary text-center">Выбрано файлов: {{ model.length }}</p>
+  </div>
+</template>
+```
+
+## Texts and the icon
+
+Every caption of the zone is configurable: `title` — the heading, `subtitle` — the line with the file requirements (visible with `size` `md` and `lg`), `browse-text` — the text of the button, `divider-text` — the divider, `icon` — the icon in the center of the zone.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref<File[]>([]);
+</script>
+
+<template>
+  <div class="max-w-lg m-auto">
+    <CdsFileUpload
+      v-model="model"
+      icon="doc-download"
+      title="Перетащите сканы документов"
+      divider-text="или"
+      browse-text="Выберите на компьютере"
+      subtitle="PDF или JPG до 10 МБ"
+      multiple
+    />
+  </div>
+</template>
+```
+
+## Sizes
+
+The `size` prop controls the density of the zone: `md` is the default, `lg` adds air, and `sm` shrinks the zone to a compact row — the browse button is hidden and the whole area becomes clickable.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const small = ref<File[]>([]);
+const medium = ref<File[]>([]);
+const large = ref<File[]>([]);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 max-w-lg m-auto">
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">size="sm" — компактная строка, кликабельна целиком</span>
+      <CdsFileUpload v-model="small" size="sm" />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">size="md" — по умолчанию</span>
+      <CdsFileUpload v-model="medium" />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">size="lg" — просторная зона</span>
+      <CdsFileUpload v-model="large" size="lg" />
+    </div>
+  </div>
+</template>
+```
+
+## Layout
+
+`inset-file-list` moves the list of the chosen files inside the zone — the component does not grow downwards as files are added. `hide-browse` removes the browse button: the zone is clickable as a whole, but say so in the title.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const inset = ref<File[]>([]);
+const clickable = ref<File[]>([]);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 max-w-lg m-auto">
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">inset-file-list — список файлов внутри зоны</span>
+      <CdsFileUpload v-model="inset" multiple clearable show-size inset-file-list />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">hide-browse — без кнопки, кликабельна вся зона</span>
+      <CdsFileUpload v-model="clickable" hide-browse title="Нажмите или перетащите файлы" />
+    </div>
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks the component, `readonly` keeps the list visible but forbids changes, `loading` shows an indicator — while the files are going to the server, for example. `error-messages` puts the zone into the error state and shows the text under it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { onMounted, ref } from 'vue';
+
+const readonlyFiles = ref<File[]>([]);
+
+// Файлы создаются только в браузере — SSR-сборка сайта обходится без File
+onMounted(() => {
+  readonlyFiles.value = [new File([new Uint8Array(1_200_000)], 'договор-поставки.pdf', { type: 'application/pdf' })];
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 max-w-lg m-auto">
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">disabled</span>
+      <CdsFileUpload disabled />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">readonly — файлы видны, но изменить их нельзя</span>
+      <CdsFileUpload :model-value="readonlyFiles" readonly show-size />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">loading</span>
+      <CdsFileUpload loading />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-200 text-content-secondary">error — обязательное поле</span>
+      <CdsFileUpload :error-messages="['Прикрепите хотя бы один файл']" />
+    </div>
+  </div>
+</template>
+```
+
+## Filtering by type
+
+`filter-by-type` accepts MIME types, wildcard types and extensions separated by commas (`image/*,.pdf`). The files that do not fit never get into the model — the `rejected` event reports them: show the user what exactly was rejected and why.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const files = ref<File[]>([]);
+const rejectedMessages = ref<string[]>([]);
+
+// `rejected` срабатывает до обновления модели — флаг защищает свежие
+// сообщения от сброса в обработчике update:model-value
+let justRejected = false;
+
+function onRejected(rejected: File[]) {
+  rejectedMessages.value = rejected.map((file) => `${file.name} — не подходит по формату`);
+  justRejected = true;
+}
+
+function onUpdate() {
+  if (justRejected) {
+    justRejected = false;
+
+    return;
+  }
+
+  rejectedMessages.value = [];
+}
+</script>
+
+<template>
+  <div class="max-w-lg m-auto">
+    <CdsFileUpload
+      v-model="files"
+      title="Перетащите изображения или PDF"
+      subtitle="Другие форматы будут отклонены"
+      filter-by-type="image/*,.pdf"
+      multiple
+      clearable
+      :error-messages="rejectedMessages"
+      @rejected="onRejected"
+      @update:model-value="onUpdate"
+    />
+  </div>
+</template>
+```
+
+## Slots
+
+The parts of the zone are replaced by the slots of the same name, and `item` redraws every file in the list: `CdsFileUploadItem` is available inside — it receives the props of the file automatically, it is enough to pass the handlers from the slot arguments.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload, CdsFileUploadItem, CdsTag } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref<File[]>([]);
+
+const extension = (file: File) => file.name.split('.').at(-1)?.toUpperCase() ?? 'ФАЙЛ';
+</script>
+
+<template>
+  <div class="max-w-lg m-auto">
+    <CdsFileUpload v-model="model" multiple clearable show-size>
+      <template #item="{ file, props }">
+        <CdsFileUploadItem v-bind="props">
+          <template #append>
+            <CdsTag size="sm" :text="extension(file)" />
+          </template>
+        </CdsFileUploadItem>
+      </template>
+    </CdsFileUpload>
+  </div>
+</template>
+```
+
+## Applying for a job
+
+The component takes part in [CdsForm](../cds-form/api.md) validation on a par with the other fields: `rules` receive the chosen files. Here the résumé is required and is accepted as a PDF only — `filter-by-type` cuts the foreign formats off, and the rules insure against an empty submission and a file that is too heavy.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsFileUpload, CdsForm, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const valid = ref(false);
+const name = ref('');
+const resume = ref<File>();
+const loading = ref(false);
+const sent = ref(false);
+
+const nameRules = [(value: string) => !!value || 'Представьтесь, пожалуйста'];
+
+const resumeRules = [
+  (value?: File) => !!value || 'Приложите резюме в PDF',
+  (value?: File) => !value || value.size <= 10 * 1024 * 1024 || 'Файл больше 10 МБ — сожмите его'
+];
+
+async function submit() {
+  if (!valid.value) return;
+
+  try {
+    loading.value = true;
+    sent.value = false;
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    sent.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <CdsForm v-model="valid" class="flex flex-col gap-2 w-[400px] m-auto" @submit.prevent="submit">
+    <CdsTextInput v-model="name" label="Имя и фамилия" placeholder="Введите ФИО" :rules="nameRules" />
+
+    <CdsFileUpload
+      v-model="resume"
+      label="Резюме"
+      subtitle="PDF до 10 МБ"
+      filter-by-type=".pdf"
+      :rules="resumeRules"
+      clearable
+      show-size
+    />
+
+    <CdsButton type="submit" :loading="loading" text="Откликнуться" />
+
+    <p v-if="sent" class="text-sm text-center">Отклик отправлен</p>
+  </CdsForm>
+</template>
+```
+
+## An image gallery
+
+`filter-by-type="image/*"` lets images through only — every one of them gets a preview in the list automatically. `inset-file-list` gathers what was uploaded inside the zone, and `show-size` helps keep an eye on the volume.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const images = ref<File[]>([]);
+</script>
+
+<template>
+  <div class="max-w-lg m-auto">
+    <CdsFileUpload
+      v-model="images"
+      title="Перетащите фотографии"
+      subtitle="PNG или JPG — превью появится в списке"
+      filter-by-type="image/*"
+      multiple
+      clearable
+      show-size
+      inset-file-list
+    />
+  </div>
+</template>
+```
+
+## Uploading on selection
+
+The files do not have to wait for the form submission — start the upload right away: watch the model, turn `loading` on for the duration of the request and confirm the result through `messages`. The request here is simulated with a timer.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFileUpload } from '@central-design-system/components';
+import { ref, watch } from 'vue';
+
+const files = ref<File[]>([]);
+const loading = ref(false);
+const uploaded = ref(false);
+
+let timer: ReturnType<typeof setTimeout>;
+
+// Имитация запроса: новые файлы «уходят на сервер» полторы секунды
+watch(
+  () => files.value.length,
+  (length, previous) => {
+    clearTimeout(timer);
+    uploaded.value = false;
+    loading.value = false;
+
+    if (length > (previous ?? 0)) {
+      loading.value = true;
+      timer = setTimeout(() => {
+        loading.value = false;
+        uploaded.value = true;
+      }, 1500);
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="max-w-lg m-auto">
+    <CdsFileUpload
+      v-model="files"
+      title="Файлы отправятся сразу после выбора"
+      :loading="loading"
+      :messages="uploaded ? 'Файлы загружены' : undefined"
+      multiple
+      clearable
+      show-size
+    />
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-file-upload/guidelines.md

@@ -0,0 +1,10 @@
+# CdsFileUpload — 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 |
+| --- | --- |
+| The file requirements are visible before the choice: the subtitle names the formats and the size limit. | A filter without an explanation: unsuitable files are rejected and the reason stays invisible to the user. |
+| The error names the reason and suggests what to do. | “Error” explains neither what is wrong nor how to fix it. |
+| Files of the same kind are collected by one zone with multiple — the user adds everything at once. | A separate zone for every file forces picking them one by one and stretches the form. |

package/skills/cds-builder/references/components/cds-file-upload/tokens.md

@@ -0,0 +1,50 @@
+# CdsFileUpload — 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.
+
+## _CdsFileUpload.variables.scss
+
+```scss
+@use '../../../styles/settings';
+
+// Зона загрузки
+$file-upload-padding: var(--cds-spacing-800) var(--cds-spacing-400) !default;
+$file-upload-padding-md: var(--cds-spacing-600) var(--cds-spacing-400) !default;
+$file-upload-padding-sm: var(--cds-spacing-500) var(--cds-spacing-400) !default;
+$file-upload-inset-padding: var(--cds-spacing-400) !default;
+$file-upload-gap-sm: var(--cds-spacing-400) !default;
+$file-upload-border-radius: var(--cds-border-radius-200) !default;
+$file-upload-border-width: var(--cds-border-200) !default;
+$file-upload-border-style: dashed !default;
+$file-upload-border-color: rgb(var(--cds-color-line-primary)) !default;
+$file-upload-border-color-hover: rgb(var(--cds-color-line-primary-hover)) !default;
+$file-upload-border-color-error: rgb(var(--cds-color-status-danger-line)) !default;
+$file-upload-disabled-opacity: 0.5 !default;
+
+// Заголовок и подзаголовок
+$file-upload-title-color: rgb(var(--cds-color-content-primary)) !default;
+$file-upload-subtitle-color: rgb(var(--cds-color-content-secondary)) !default;
+$file-upload-subtitle-margin-top: var(--cds-spacing-200) !default;
+
+// Иконка
+$file-upload-icon-size: var(--cds-spacing-800) !default;
+$file-upload-icon-size-md: var(--cds-spacing-700) !default;
+$file-upload-icon-size-sm: var(--cds-spacing-600) !default;
+$file-upload-icon-color: rgb(var(--cds-color-content-secondary)) !default;
+$file-upload-icon-margin-bottom: var(--cds-spacing-400) !default;
+$file-upload-icon-margin-bottom-md: var(--cds-spacing-200) !default;
+
+// Разделитель
+$file-upload-divider-margin: var(--cds-spacing-600) 0 !default;
+
+// Список файлов
+$file-upload-list-margin: var(--cds-spacing-400) 0 !default;
+$file-upload-item-gap: var(--cds-spacing-200) !default;
+$file-upload-inset-action-padding: var(--cds-spacing-200) 0 !default;
+
+// Загрузка
+$file-upload-loader-z-index: 1 !default;
+$file-upload-native-z-index: -1 !default;
+```

package/skills/cds-builder/references/components/cds-footer/api.md

@@ -0,0 +1,35 @@
+# CdsFooter — 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)
+
+The footer of the application: a copyright notice and utility links on regular pages, an action bar on forms. The layout measures the height of the footer and reserves the space, so it never covers the last line of the content.
+
+## CdsFooter
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `bordered` | `boolean \| undefined` | `false` | no | Shows the border. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `elevated` | `boolean \| undefined` | `false` | no | Shows the shadow. |
+| `height` | `string \| number \| undefined` | `50` | no | Height of the element. |
+| `modelValue` | `boolean \| undefined` | `true` | no | Visibility of the element in the layout. |
+| `reveal` | `boolean \| undefined` | `false` | no | Floating mode: the element appears/hides on scroll. |
+| `revealOffset` | `number \| undefined` | `250` | no | Scroll threshold (px) up to which the floating element stays visible. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `focusin` | `[event: FocusEvent]` | Focus moved inside the footer. |
+| `reveal` | `[value: boolean]` | Visibility of the floating footer has changed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the footer (`CdsToolbar` and others). |