adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

package/CLAUDE.md

@@ -0,0 +1,62 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Что это
+
+adata-ui — UI-кит проектов adata.kz, оформленный как **Nuxt 3 layer** (`main` = `nuxt.config.ts`, публикуется npm-пакетом `adata-ui`). Консьюмеры (pk-frontend) подключают его через `extends` и автоматически получают компоненты, Tailwind и стили. Разработка и просмотр компонентов — в `.playground` (extends `'..'`).
+
+Ветка `tailwind-v4` (2026-07) — миграция на Tailwind v4 + новая палитра + тёмная тема на семантических токенах; `predesign` ещё на v3. pk-frontend мигрирован на v4/семантику (ветка ADTC-8931, extends `'../adata-ui'`); `deepblue` удалён из theme.css после его миграции (2026-07-28). Каталог `docs/` удалён из дерева; реестр миграции — в git-истории: `git show 69039ec:docs/color-migration.md`.
+
+## Команды
+
+- `pnpm dev` — dev-сервер playground; `pnpm build` — сборка playground.
+- Тесты: сейчас тестовых файлов в репо нет (vitest-инфраструктура осталась). Если появятся: `npx vitest run --coverage.enabled=false`. НЕ `pnpm test` (открывает UI). Флаг обязателен: coverage сломан (в devDeps `@vitest/coverage-v8` 1.6.x при vitest 3.x). Один файл: `npx vitest run <путь-к-файлу> --coverage.enabled=false`.
+- `pnpm lint` / `pnpm type-check` — в репо большой предсуществующий долг (тысячи style-ошибок, десятки type-ошибок в нетронутых файлах). Проверяй точечно только изменённые файлы: `npx eslint <files>`.
+- Скомпилированный Tailwind после `pnpm build` искать в `.playground/.output/server/chunks/build/entry-styles.*.mjs` — Nuxt инлайнит глобальный CSS в SSR-бандл; клиентский `entry.css` содержит только библиотечные стили (это норма, не баг).
+
+## Архитектура слоя
+
+- Компоненты авто-регистрируются с префиксами: `components/` → `<a-*>`, `icons/` → `<a-icon-*>`, `illustrations/` → `<a-ill-*>` (имя из имени файла, `pathPrefix: false`; в шаблонах только kebab-case — eslint-правило).
+- Алиас `#adata-ui` → корень репо.
+- Tailwind v4 подключён на уровне слоя: vite-плагин в `vite.plugins` конфига слоя, CSS-вход `assets/styles/main.css` через `css:` слоя. Консьюмерам и playground настраивать нечего. **Никогда не добавляй второй `@import "tailwindcss"`** — второй tailwind-корень = дубли утилит.
+- `utils/twMerge.ts` — расширенный tailwind-merge (знает кастомный `rounded-10` и `text-*`-токены ДС) — использовать его, а не голый `twMerge` из пакета.
+
+## Дизайн-система (Tailwind v4, CSS-first)
+
+Вся конфигурация — в `assets/styles/theme.css` (`tailwind.config` не существует). Реестр миграции, маппингов и осознанных исключений — в git-истории (docs/ удалён): `git show 69039ec:docs/color-migration.md`.
+
+### Палитра
+
+- Стоковая палитра Tailwind v4 + фирменные: `brand` (500 = #068DFF), `secondary` (500 = #2C3E50), `chart-{amber,blue,green,red}`, `surface-dark`/`surface-dark-2`, `base-bg-light`/`base-bg-dark`. Deprecated-группы (`ink-*`, `deepblue-*`) удалены — использовать семантику.
+- Сырые hex запрещены: классы палитры/семантики в разметке, `var(--…-*)` в `<style>`. Никаких `style="color: #…"`. Исключения (логотипы `icons/company/`, `.bg-gradient-blue`, тени `#1B64B3`, error-тултип ATooltip) перечислены в реестре: `git show 69039ec:docs/color-migration.md`.
+
+### Тёмная тема — семантические токены
+
+- **Примитивные шкалы (`gray-*`, `red-*`, `brand-*`, `secondary-*`, `white`/`black`) константны в обеих темах.** Под `.dark` переключаются только семантические токены (блоки `@generated-semantic-colors[-dark]` в theme.css, источник — Figma-артефакт «Семантические цвета»).
+- В новом коде цвета задавать семантикой: `text-primary/secondary/quaternary/disabled/brand/link/success/warning/danger`, `bg-main/subtle/muted/overlay/badge/brand[-subtle]/{success,warning,danger,red…rose}[-subtle]`, `border-default/strong/focus/brand/…`, `bg-action-{primary,secondary,danger}[-hover|-active]` + `text-action-*-fg`, `text/fill/stroke-icon-*`, `fill-main`/`stroke-main` (флип белых заливок иллюстраций). Реестр и маппинг — `git show 69039ec:docs/color-migration.md`.
+- **Роли поверхностей (по Figma-макетам ДС)**: страница — `bg-main`; карточки/секции — `bg-subtle` + `border-default` (subtle полупрозрачен и без бордера не читается); утилитарный непрозрачный серый (thead, скелетоны, зебра, треки, плашки) — `bg-muted`; hover поверхностей — `bg-action-secondary-hover` (не `bg-subtle` — в дарке невидим). **`bg-canvas` не использовать** (dark #1E2939 сине-серый, выведен из употребления).
+- Примитив в разметке легален, когда цвет должен быть одинаков в темах: инвертированные поверхности (`bg-secondary-500` футера/тултипов), белый декор на цветном (`bg-white` точки/бегунки), `chart-*`, `surface-dark*`. Цветовые `dark:`-классы разрешены для краевых случаев без токена (`dark:bg-white/5`-тинты и т.п.).
+- Для ring/outline border-токены доступны var-синтаксисом: `ring-(--border-color-default)`, `outline-(--border-color-danger)/60`.
+- В `<style>`-блоках: `var(--text-color-*)`, `var(--background-color-*)`, `var(--border-color-*)`, `var(--color-action-*|icon-*)`; полупрозрачность — `color-mix(in srgb, var(--…) N%, transparent)`. `theme('colors…')` в v4 не работает. **Не вешать `/N` на полупрозрачные токены** (`bg-subtle`, `bg-overlay`, dark `brand-subtle`/`danger-subtle`) — альфа перемножается.
+- Цветные тени: форма и цвет раздельно — `shadow-[0_-2px_8px_0] shadow-gray-400/25`; разная плотность по темам — `shadow-surface-dark/10 dark:shadow-surface-dark/30`.
+
+### Типографика и радиусы
+
+- Токены `text-h1…text-h5`, `text-display-{hero,lg,sm}`, `text-body-{lg,md,sm}[-medium|-strong]`, `text-overline[-medium]` — размер + межстрочный + вес одним классом.
+- Легаси-классы `.heading-*`, `.body-400`, `.link-*` и пр. живут в theme.css `@layer components` — для старого дизайна; в новом коде использовать `text-*`-токены.
+- Шкала скруглений кастомная (не v4-дефолт): `rounded` = 4px, xs = 4, sm = 6, md = 8, `rounded-10` = 10px, lg = 12, xl = 16, 2xl = 20.
+
+### Динамические классы
+
+Сканер не видит собранные в рантайме классы (`bg-${color}-…`) — такие семьи/оттенки/утилиты должны быть в safelist `@source inline(…)` в theme.css. Расширяй его при добавлении новой динамики.
+
+### Изменение палитры из Figma
+
+Светлый блок примитивов между маркерами `@generated-colors:*` сгенерирован из Figma-экспортов (DTCG). Генератор и токен-JSONы удалены из дерева — восстановить: `git show 8862721:scripts/generate-theme-colors.mjs` (там же `scripts/design-tokens/*.tokens.json`); исходники продублированы в `git show 69039ec:docs/update-plan.md` (docs/ удалён из дерева). Семантические блоки `@generated-semantic-colors[-dark]:*` этим генератором НЕ покрываются — их источник — Figma-артефакт «Семантические цвета»; актуальные значения живут в самих блоках theme.css, регенерация = дамп таблицы артефакта между маркерами.
+
+## Грабли окружения
+
+- `rg` на машине разработчика — shell-функция: в скриптах/подпроцессах использовать `grep`.
+- В репо есть путь с кириллической буквой (`components/features/сhange-version/`) — `git ls-files` только с `-z`.
+- Каталог `docs/` удалён из дерева (доступен через git show, см. выше), поэтому строки `@source not "../../docs";` в main.css больше нет. Если docs/ с именами старых классов вернётся — вернуть и исключение, иначе сканер Tailwind сгенерирует по ним мёртвый CSS.

package/README.md

@@ -1,75 +1,75 @@
-# Adata UI with Nuxt 3 using Layers
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `https://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+# Adata UI with Nuxt 3 using Layers
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `https://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app.config.ts

@@ -1,28 +1,28 @@
-export default defineAppConfig({
-  myLayer: {
-    name: 'Adata UI v2',
-  },
-})
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    myLayer?: {
-      /** Project name */
-      name?: string
-      loginUrl?: string
-      oldVersion?: string
-      landingUrl?: string
-      pkUrl?: string
-      tenderUrl?: string
-      workUrl?: string
-      avtoUrl?: string
-      analyticsUrl?: string
-      tnvedUrl?: string
-      complianceUrl?: string
-      counterParty?: string
-      langIsOn?: boolean
-      authMode?: 'local' | 'separate'
-      cloudPayments?: string
-    }
-  }
-}
+export default defineAppConfig({
+  myLayer: {
+    name: 'Adata UI v2',
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    myLayer?: {
+      /** Project name */
+      name?: string
+      loginUrl?: string
+      oldVersion?: string
+      landingUrl?: string
+      pkUrl?: string
+      tenderUrl?: string
+      workUrl?: string
+      avtoUrl?: string
+      analyticsUrl?: string
+      tnvedUrl?: string
+      complianceUrl?: string
+      counterParty?: string
+      langIsOn?: boolean
+      authMode?: 'local' | 'separate'
+      cloudPayments?: string
+    }
+  }
+}

package/app.vue

@@ -1,8 +1,8 @@
-<template>
-  <nuxt-layout>
-    <a-header />
-    <nuxt-page></nuxt-page>
-  </nuxt-layout>
-</template>
-<script setup lang="ts">
-</script>
+<template>
+  <nuxt-layout>
+    <a-header />
+    <nuxt-page></nuxt-page>
+  </nuxt-layout>
+</template>
+<script setup lang="ts">
+</script>

package/assets/styles/main.css

@@ -0,0 +1,11 @@
+/* CSS-вход adata-ui: подключается конфигом слоя (css: в nuxt.config.ts),
+   консьюмерам ничего настраивать не нужно. Свой @import "tailwindcss"
+   в приложении не заводить — будет второй tailwind-корень и дубли утилит. */
+@import "tailwindcss";
+@import "./theme.css";
+@import "./ui.css";
+
+/* Слой всегда в скане: сам он лежит в node_modules консьюмера и дефолтной
+   базой (корень приложения) не покрывается. Путь от этого файла. */
+@source "../..";
+