@hobui/viui-cli 0.0.6 → 0.0.7

package/dist/assets/cursor/rules/design-system-workflow.mdc

@@ -1,48 +0,0 @@
----
-description: Workflow Design system — mục tiêu đầu ra như Cloud Panel: NHÓM + items, thêm mới, tìm kiếm
-globs: src/components/**/*, src/design-system/**/*, src/tokens/**/*, src/docs/**/*, src/storybook/**/*, docs/**/*
-alwaysApply: false
----
-
-# Workflow Design system (Mục tiêu đầu ra như Cloud Panel)
-
-Design system được quản lý theo **mô hình panel**: **iNET Design system** là đơn vị tổ chức; bên trong có **NHÓM** và **items** (components, token files, docs). Workflow phải đạt: **thêm mới**, **tìm kiếm**, **tổng kết** rõ ràng.
-
-## NHÓM chuẩn (Design System)
-
-| NHÓM | Vị trí code | Items |
-|------|--------------|-------|
-| vi-ui | `src/design-system/vi-ui/vi-<tên>/` | ViButton, ViInput, ViCard, ViAlert, ViDialog, … |
-| Brands | `src/components/brands/` | BrandLogo, StyleGuide |
-| Errors | `src/components/errors/` | ErrorPage, OvvErrorPage, ErrorKnowledgeList |
-| Icons | `src/components/icons/` | ArrowLeftRight, … |
-| Tokens | `src/tokens/` | color.json, typography.json, inet-design-tokens.ts |
-| Docs | `src/docs/` | design-system.md, foundations/*, usage/* |
-| Storybook foundations | `src/storybook/Foundations/` | Colors.stories.ts, Typography.stories.ts, SpacingLayout.stories.ts, Configure.mdx |
-
-Mỗi item (component, token file, doc) **chỉ thuộc một NHÓM**. Chi tiết mục tiêu đầu ra và số NHÓM: xem `docs/design-system-plan.md`.
-
-## Workflow: Thêm item mới (Component/Token mới)
-
-1. **Chọn NHÓM** — vi-ui, Brands, Errors, Icons, Tokens, Docs, hoặc Storybook foundations.
-2. **Tạo đúng vị trí** — theo rule `project-structure.mdc` (vd: component Vi* → `src/design-system/vi-ui/vi-<tên>/ViName.vue` + `ViName.stories.ts`). Nếu component có **nhiều slot** (menu activator + content, list + items): thêm `ViNameStory.vue` và dùng trong stories để preview không trống (chi tiết `storybook.mdc` § Vi-ui Story Vue).
-3. **Cập nhật index/re-export** — nếu nhóm có `index.ts` (vd: `src/design-system/vi-ui/index.ts`) hoặc cần export chung.
-4. **Story/docs** — component mới có story; token/docs cập nhật nếu cần.
-
-Không tạo component/token “lạc” ngoài các NHÓM trên.
-
-## Workflow: Tìm component hoặc nhóm
-
-- **Tìm theo tên component** — search trong codebase, Storybook sidebar, hoặc docs.
-- **Tìm theo NHÓM** — mở thư mục tương ứng (vd: `src/design-system/vi-ui/`, `src/tokens/`).
-- Mọi item phải **có thể tìm được** qua tên hoặc qua nhóm.
-
-## Tổng kết (dashboard)
-
-- **Số NHÓM:** 7 (vi-ui, Brands, Errors, Icons, Tokens, Docs, Storybook foundations).
-- **Số items:** đếm được theo nhóm (components, token files, docs).
-- **Trạng thái:** documented, có story, dùng token — dùng cho review (rule `verifier` / QA).
-
-**AI codegen (toàn dự án & consumer @viui/cli):** Khi generate code UI/story/demo, dùng vi-ui (Vi*) và Tabler Icons mặc định; nút action dùng ViButton, không dùng raw `<button>`; xem `icons.mdc`, `storybook.mdc`, AGENTS.md § Codegen / AI Agent.
-
-Khi thêm file hoặc review, đảm bảo item thuộc đúng **NHÓM** và workflow **thêm mới / tìm kiếm** tuân theo mục tiêu đầu ra trong `docs/design-system-plan.md`. **Kế hoạch tập trung:** `.cursor/plans/DESIGN_SYSTEM_PLAN.md` (một file; chỉ mục: `.cursor/plans/PLANS_INDEX.md`).

package/dist/assets/cursor/rules/figma-mapping.mdc

@@ -1,37 +0,0 @@
----
-description: Figma ↔ code — ánh xạ token names, component names, MCP get_design_context. Skill: .cursor/skills/figma-interpretation.md
-globs: "**/*.vue", "**/*.stories.@(ts|tsx)", "src/tokens/**/*", "docs/**/*"
-alwaysApply: false
----
-
-# Figma Mapping
-
-Quy ước ánh xạ design Figma sang code iNET Design System (Vue 3 + Vuetify, tokens, naming). **Skill khi làm từ Figma:** `.cursor/skills/figma-interpretation.md`. **Rules liên quan:** `tokens.mdc`, `component-naming.mdc`, `storybook.mdc`, `accessibility-contrast.mdc`.
-
-## Nguyên tắc
-
-1. **Tokens là nguồn chân lý** — Giá trị trong Figma (màu, spacing, radius, shadow) map sang key trong `src/tokens/design-tokens.ts`. Nếu Figma khác token, ưu tiên token; ghi chú với designer để cập nhật Figma.
-2. **Figma Variables ↔ token names** — Map tên (vd `brand/primary` → `colorTokens.brand.primary`). Tham chiếu `tokens.mdc`.
-3. **Component naming** — Component sinh từ Figma tuân `component-naming.mdc`: Vi* trong `vi-<tên>/`, PascalCase, `*.stories.ts` cùng thư mục. Story title = `{Nhóm}/{Tên}` theo `storybook.mdc`.
-4. **MCP workflow** — Figma MCP: `get_design_context(fileKey, nodeId?)` để lấy code/screenshot/hints. Output thường là reference (React/Tailwind); chuyển sang Vue 3 + Vuetify và component/token của dự án.
-5. **Accessibility** — Màu chữ/nền đạt WCAG 2.1 AA; semantic `.text` trên nền màu. Xem `accessibility-contrast.mdc` và `.cursor/skills/accessibility.md`.
-
-## Map nhanh (Figma → code)
-
-| Figma | Code / token |
-|-------|---------------|
-| Màu (fill/text) | `colorTokens.*`, `inetDesignTokens.colors.*` |
-| Spacing / layout | `spacingTokens`, `space8pt` (8pt grid) |
-| Radius / corner | `shapeTokens` |
-| Shadow / elevation | `elevationTokens` |
-| Typography | `typographyTokens` |
-| Component mới | Vi* trong `vi-<tên>/ViName.vue` + `ViName.stories.ts`; hoặc `src/components/<nhóm>/` |
-
-## Quy trình gợi ý
-
-1. **Lấy design** — MCP `get_design_context` hoặc mô tả/screenshot. Xác định sections, components, giá trị (màu, spacing, typography).
-2. **Map tokens** — Màu → `colorTokens.*` / `inetDesignTokens.colors.*`; spacing → `spacingTokens`; radius → `shapeTokens`; không thêm giá trị mới ngoài token trừ khi đã cập nhật `design-tokens.ts`.
-3. **Chọn component** — Dùng Vi* có sẵn nếu khớp; không thì tạo mới đúng thư mục và naming. Thêm story.
-4. **Kiểm tra** — Storybook chạy đúng; contrast và a11y đạt.
-
-Khi chỉnh file khớp glob (đặc biệt khi implement từ Figma), áp dụng quy ước trên và tham chiếu skill `figma-interpretation.md`.

package/dist/assets/cursor/rules/icons.mdc

@@ -1,42 +0,0 @@
----
-description: Bộ icon mặc định Tabler; vi-ui trong demo/story; áp dụng toàn dự án và repo consumer (@viui/cli) khi AI gen code
-globs: "**/*.vue", "**/*.ts", "**/*.tsx", "src/storybook/**/*", "src/design-system/**/*", "src/components/**/*"
-alwaysApply: false
----
-
-# Icons — Mặc định Tabler (áp dụng toàn dự án & AI codegen)
-
-**Rule này áp dụng cho:** i-design-system và mọi repo consumer đã chạy `@viui/cli init` / `sync`. Khi **AI Agent generate code** Vue, Storybook hoặc UI, phải tuân nội dung dưới đây. AGENTS.md § Codegen / AI Agent và § Rules bắt buộc (7).
-
-## Bộ icon mặc định
-
-- **Tabler Icons** (`@tabler/icons-vue`) là bộ icon **mặc định** cho dự án và cho mọi repo đã dùng **@viui/cli** (sync `.cursor`).
-- License: MIT. Hơn 4.000 icon (outline/filled), tree-shakable, Vue 3.
-
-## Cách dùng
-
-1. **Import từng icon** — Chỉ icon được import mới vào bundle.
-   ```ts
-   import { IconArrowRight, IconSettings, IconUser } from '@tabler/icons-vue'
-   ```
-2. **Trong template:** Dùng như component Vue (`<IconArrowRight />`). Có thể truyền `size`, `stroke`, `color` theo [tài liệu Tabler](https://tabler.io/icons).
-3. **Vuetify `v-icon`:** Các component Vuetify dùng prop `icon` dạng chuỗi (vd. `prepend-icon="mdi-account"`) vẫn dùng **MDI** (đã cấu hình sẵn). Khi viết component mới, ưu tiên Tabler; nếu cần tương thích trực tiếp với `v-icon` có thể giữ MDI cho prop đó.
-
-## Nguồn khác (khi cần)
-
-- **MDI:** Đã có trong Vuetify; dùng khi cần `v-icon` với tên chuỗi.
-- **Lucide, Phosphor, Heroicons:** Ghi trong Storybook **Icons/Overview**; dùng khi team chọn phong cách khác.
-
-## Vi-ui trong demo Icons
-
-- Demo Icons (vd. **TablerIconsDemo.vue**) dùng **vi-ui** cho UI: ViInput (search), ViButton (mọi nút action kể cả copy line trong popover: Vue name, Import, SVG), ViCard (popover nội dung), ViMenu (popover), ViButtonToggle (Outline/Filled). Không dùng raw `<button>`; nút copy/link-style dùng ViButton. Nếu thiếu component trong vi-ui thì bổ sung (vd. đã thêm ViButtonToggle) rồi dùng trong demo. Rule: `storybook.mdc` § Vi-ui trong Storybook.
-
-## Tham chiếu
-
-- Storybook: **Icons/Overview**, **Icons/Tabler** — bảng nguồn và demo popover.
-- Package: `@tabler/icons-vue`
-- Vi-ui: `@/design-system/vi-ui` (ViInput, ViButton, ViCard, ViMenu, ViButtonToggle)
-
-Khi được kích hoạt (file khớp glob), ưu tiên **Tabler Icons** cho icon mới; không thêm bộ icon khác làm mặc định nếu chưa thống nhất với design system.
-
-**Plan liên quan:** `.cursor/plans/icons_free_sources.plan.md` (demo Icons, vi-ui, ViButtonToggle, sidebar Storybook).

package/dist/assets/cursor/rules/project-structure.mdc

@@ -1,137 +0,0 @@
----
-description: Cấu trúc dự án và quy ước review cấu trúc — nơi đặt file, naming, phân cấp thư mục
-globs: src/**/*, docs/**/*, .storybook/**/*, public/**/*, vite.config.*, tsconfig*.json, package.json
-alwaysApply: false
----
-
-# Cấu trúc dự án & Review cấu trúc
-
-Rule này định nghĩa **cấu trúc chuẩn** của dự án design system và tiêu chí **review cấu trúc**. Cấu trúc hướng tới **mục tiêu đầu ra như Cloud Panel**: **iNET Design system** chứa **NHÓM** (vi-ui, Brands, Errors, Tokens, Docs, Storybook foundations) và **items** (components, token files, docs). Chi tiết workflow: `design-system-workflow.mdc` và `docs/design-system-plan.md`. Khi thêm file mới hoặc review layout, tuân theo cấu trúc dưới đây.
-
----
-
-## Cấu trúc thư mục chuẩn
-
-### Root
-
-| Thư mục / file | Mục đích |
-|----------------|----------|
-| `src/` | Mã nguồn chính (Vue, tokens, components, docs nội bộ) |
-| `docs/` | Tài liệu dự án (plan, kế hoạch) — không nhầm với `src/docs/` |
-| `public/` | Static assets dùng trực tiếp (favicon, logo, ảnh error page) |
-| `.storybook/` | Cấu hình Storybook (main, preview, manager) |
-| `.agent/rules/` | Agent/subagent rules (design-system, verifier, …) |
-| `.cursor/rules/` | Cursor rules (.mdc) |
-| `AGENTS.md` | Chỉ dẫn chung cho agent; luôn tuân thủ |
-
-### `src/`
-
-| Thư mục | Mục đích | Quy ước |
-|---------|----------|---------|
-| `src/design-system/vi-ui/` | Component Vi* (app-facing) | Mỗi component: `vi-<tên>/ViName.vue` + `ViName.stories.ts`; nếu component có nhiều slot (menu, list, dialog…) thêm `ViNameStory.vue` để preview không trống; export từ `index.ts`. |
-| `src/components/` | Component library (brands, errors, icons) | Phân cấp: brands, errors, icons. Mỗi component trong thư mục riêng. |
-| `src/tokens/` | Design tokens | JSON + TS (inet-design-tokens, index re-export). |
-| `src/types/` | TypeScript types (tokens, Vuetify, global). | `.d.ts` cho ambient, `.ts` cho module. |
-| `src/plugins/` | Vue/Vuetify plugins (theme, vuetify). | Một file per theme/plugin. |
-| `src/storybook/` | Stories dùng chung (Colors, Typography, Spacing, Configure). | Không đặt story của từng component ở đây. |
-| `src/docs/` | Tài liệu design system (VitePress): foundations, philosophy, usage. | `.md`; cấu hình VitePress trong `.vitepress/`. |
-| `src/assets/` | CSS, SCSS, hình ảnh dùng trong app. | **Tổng thể dự án**: `styles/` (main.scss, inet-tokens.scss, foundations/, components/); class BEM và style chung đặt ở đây. Xem `project-structure.mdc` § src/assets/styles và `bem-class-style.mdc`. |
-| `src/utils/` | Hàm tiện ích (theme, color, forward). | Re-export qua `index.ts` nếu cần. |
-| `src/figma/` | File Figma (tokens, components). | Tùy chọn. |
-
-### `src/components/`
-
-| Cấp | Thư mục | Ví dụ | Quy ước |
-|-----|---------|--------|---------|
-| Khác | `brands/`, `errors/`, `icons/` | BrandLogo, ErrorPage, ArrowLeftRight | Cùng cấp; có thể có `.ts` data (ErrorData.ts). |
-
-Component Vi* (ViButton, ViInput, …) nằm trong `src/design-system/vi-ui/` — xem `design-system-workflow.mdc` khi thêm component mới.
-
-- **Stories**: Đặt cùng thư mục với component, tên `*.stories.ts`. Component có slot (activator + content, list + items): thêm `ViNameStory.vue` chứa template + demo, stories dùng component Story; xem `storybook.mdc`.
-- **CSS scope**: Có thể dùng file `.css` riêng trong thư mục component (vd: `button.css`, `header.css`). Class theo BEM: `bem-class-style.mdc`. Style chung (BEM block) có thể đặt trong `src/assets/styles/components/` và import từ tổng thể (xem § src/assets/styles).
-
-### `src/assets/styles/` (SCSS tổng thể dự án)
-
-Toàn bộ SCSS/CSS dùng chung (tokens, foundations, component blocks BEM) thuộc **một cấu trúc** dưới đây; không tách riêng SCSS chỉ cho Storybook Foundations.
-
-| Thành phần | Mục đích |
-|------------|----------|
-| `main.scss` | Entry: import tokens + foundations (+ components nếu cần). Load bởi app/Storybook. |
-| `inet-tokens.scss` | CSS custom properties từ design tokens (đã có). |
-| `foundations/` | Partial theo từng foundation story: `_spacing-layout-stories.scss`, `_colors-stories.scss`, `_typography-stories.scss`; file `_index.scss` forward để `main.scss` import một lần. |
-| `foundations/_index.scss` | `@forward` từng partial; `main.scss` chỉ `@use "foundations"` hoặc tương đương. |
-| `components/` (tùy chọn) | Partial BEM cho component dùng chung nhiều nơi; component Vue có thể dùng `<style scoped>` hoặc import file cùng thư mục. |
-
-- **Foundation stories** (Colors, Typography, Spacing & Layout): class BEM định nghĩa trong `src/assets/styles/foundations/`; story hoặc `main.scss` import từ đây.
-- **Component**: Ưu tiên `<style scoped>` trong `.vue`; nếu tách file thì cùng thư mục component hoặc partial trong `src/assets/styles/components/`.
-
-Chi tiết BEM và quy ước class: `bem-class-style.mdc`.
-
-### `src/tokens/`
-
-- **JSON**: Token gốc — `color.json`, `typography.json`, `motion.json`, `elevation.json`.
-- **TS**: `inet-design-tokens.ts` (nguồn truth), `design-tokens.ts` nếu có, `index.ts` re-export.
-- Types: Định nghĩa trong `src/types/` (vd: `inet-tokens-types.ts`).
-
-### `public/`
-
-- Favicon, logo, SVG/WebP dùng qua `/` (vd: `/favicon.ico`, `/error/client-error-status.svg`).
-- **Không** đặt mã nguồn (Vue/TS) trong `public/`.
-
-### `docs/` (root)
-
-- Tài liệu quản lý dự án (plan, kế hoạch). Khác với `src/docs/` (nội dung design system).
-
----
-
-## Naming
-
-| Loại | Quy ước | Ví dụ |
-|------|---------|--------|
-| Component Vue | PascalCase, một từ hoặc cụm (BaseX nếu base component) | `Button.vue`, `BaseAlert.vue`, `ErrorPage.vue` |
-| Stories | `ComponentName.stories.ts` | `Button.stories.ts`, `BaseTabs.stories.ts` |
-| Token file | lowercase, có dấu gạch nếu cần | `color.json`, `inet-design-tokens.ts` |
-| CSS/SCSS | lowercase, gạch nếu cần | `main.scss`, `_error-page.css`, `button.css` |
-| Thư mục component | lowercase, số ít | `buttons/`, `card/`, `forms/` |
-| Types | PascalCase cho type/interface; file: `*-types.ts` hoặc `*.d.ts` | `inet-tokens-types.ts`, `vuetify.d.ts` |
-
----
-
-## Checklist review cấu trúc
-
-Khi review cấu trúc dự án, kiểm tra:
-
-### Vị trí file
-
-- [ ] Component Vi* mới nằm trong `src/design-system/vi-ui/vi-<tên>/` (xem `design-system-workflow.mdc`).
-- [ ] Component brands/errors/icons nằm trong `src/components/` đúng cấp, mỗi component một thư mục.
-- [ ] Stories đặt cùng thư mục với component, tên `*.stories.ts`.
-- [ ] Token chỉ trong `src/tokens/`; types trong `src/types/`.
-- [ ] Theme/plugin trong `src/plugins/`; không rải cấu hình theme ở root.
-- [ ] Tài liệu design system trong `src/docs/`; tài liệu plan/process trong `docs/`.
-
-### Nhất quán
-
-- [ ] Không có file “lạc chỗ” (vd: component trong `src/utils/`, token trong `src/components/`).
-- [ ] Re-export rõ ràng (vd: `src/components/index.ts`, `src/tokens/index.ts`) khi có nhiều file cần export.
-
-### Naming
-
-- [ ] Component và stories đúng PascalCase / `*.stories.ts`.
-- [ ] Thư mục component lowercase, số ít.
-
-### Cấu hình & Agent
-
-- [ ] Cấu hình build (Vite, TS, Storybook) ở root hoặc `.storybook/`; không duplicate không cần thiết.
-- [ ] Agent rules trong `.agent/rules/`; Cursor rules trong `.cursor/rules/`; không trộn lẫn định dạng.
-
----
-
-## Khi thêm file mới
-
-- **Component Vi* mới**: Tạo `src/design-system/vi-ui/vi-<tên>/` với `ViName.vue` + `ViName.stories.ts`; nếu component dùng nhiều slot (menu, list, dialog…) thì thêm `ViNameStory.vue` và dùng nó trong stories để tránh preview trống (rule `storybook.mdc`); export từ `src/design-system/vi-ui/index.ts`. Quy trình chi tiết: `design-system-workflow.mdc`.
-- **Token mới**: Thêm vào file JSON tương ứng trong `src/tokens/` và cập nhật `inet-design-tokens.ts` / types nếu cần.
-- **Story dùng chung (foundation)**: Thêm vào `src/storybook/Foundations/` (vd: `Colors.stories.ts`, `Configure.mdx`).
-- **Trang/docs design system**: Thêm vào `src/docs/` (foundations, philosophy, usage) và cấu hình trong `src/docs/.vitepress/config.ts` nếu cần.
-
-Khi được kích hoạt (file khớp glob), dùng rule này để **đánh giá cấu trúc** hoặc **hướng dẫn nơi đặt file mới**.

package/dist/assets/cursor/rules/storybook-component-template.mdc

@@ -1,103 +0,0 @@
----
-description: Template chuẩn cho story component mới — cấu trúc meta, Default, Variants/Sizes/Colors/States; file mẫu ViButton.stories.ts
-globs: "**/*.stories.@(ts|tsx)", ".cursor/plans/KPI_COMPONENT_TEMPLATE.md"
-alwaysApply: false
----
-
-# Storybook component template (chuẩn cho component mới)
-
-**File mẫu bắt buộc:** `src/design-system/vi-ui/vi-button/ViButton.stories.ts`
-
-Khi tạo **story mới** cho component (vi-ui, Brands, Errors, Icons), copy cấu trúc dưới đây. Mục đích: Cursor và developer generate story đúng format; kiểm tra theo `.cursor/plans/KPI_COMPONENT_TEMPLATE.md`.
-
----
-
-## 1. Cấu trúc file
-
-- **Vị trí:** `ComponentName.stories.ts` **cùng thư mục** với `ComponentName.vue`.
-- **vi-ui:** `src/design-system/vi-ui/vi-<tên>/ViName.stories.ts`
-- **Brands/Errors/Icons:** `src/components/<nhóm>/ComponentName.stories.ts`
-
----
-
-## 2. Meta (const meta)
-
-| Trường | Bắt buộc | Mô tả |
-|--------|----------|--------|
-| `title` | Có | `ViUi/Button` | `Brands/Logo` | `Errors/ErrorPage` — đúng nhóm sidebar (xem `storybook.mdc`). |
-| `component` | Có | Import component Vue tương ứng. |
-| `tags` | Có | `['autodocs']` để bật Docs tab. |
-| `parameters.docs.description.component` | Nên có | Dùng `docIntro(vi.viUi.xxx.descriptionComponent, en.viUi.xxx.descriptionComponent)` từ `@/locales` nếu có key; nếu chưa có locale thì string mô tả ngắn. |
-| `argTypes` | Có | Mỗi prop quan trọng: `control` (select/boolean/text/…), `options` nếu select, `description` ngắn. |
-| `args` | Có | Giá trị mặc định cho Controls (label, variant, color, …). |
-
-**Ví dụ (rút gọn):**
-
-```ts
-const meta = {
-  title: 'ViUi/Button',
-  component: ViButton,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: docIntro(vi.viUi.button.descriptionComponent, en.viUi.button.descriptionComponent),
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['elevated', 'flat', 'outlined', 'text', 'tonal'], description: '...' },
-    color: { control: 'select', options: ['primary', 'secondary', ...], description: '...' },
-    size: { control: 'select', options: ['x-small', 'small', 'default', 'large', 'x-large'] },
-    loading: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-  },
-  args: { label: 'Vi Button', variant: 'elevated', color: 'primary' },
-} satisfies Meta<typeof ViButton>
-export default meta
-type Story = StoryObj<typeof meta>
-```
-
----
-
-## 3. Stories (export const)
-
-- **Default** — Bắt buộc: một story chỉ dùng `args` (vd. `args: { label: 'Primary Action' }`).
-- **Theo chiều biến thể** (thêm tùy component):
-  - **Variants** — Nếu component có variant (elevated, flat, outlined, text, tonal): story render tất cả variant.
-  - **Sizes** — Nếu có prop size: story render x-small → x-large.
-  - **Colors** — Nếu có prop color semantic: story render primary, secondary, success, warning, error, info.
-  - **States** — Story gộp default + loading + disabled (và các state khác nếu có).
-  - **Loading** / **Disabled** — Có thể tách riêng hoặc chỉ dùng trong States.
-
-Layout story (nhiều nút/card): dùng wrapper với class BEM (vd `vi-button-stories`) hoặc inline style ngắn; ưu tiên class + CSS/SCSS theo `bem-class-style.mdc`.
-
----
-
-## 4. Khi Cursor generate story mới — Checklist kiểm tra
-
-Sau khi generate, kiểm tra:
-
-- [ ] File đặt đúng vị trí: `vi-<tên>/ViName.stories.ts` (vi-ui) hoặc `src/components/<nhóm>/ComponentName.stories.ts`.
-- [ ] `title` đúng nhóm: `ViUi/...` | `Brands/...` | `Errors/...` | `Foundations/...`.
-- [ ] Có **Default** và ít nhất một story theo biến thể (Variants/Sizes/Colors/States) nếu component có prop tương ứng.
-- [ ] `argTypes` và `args` đủ cho props quan trọng; `tags: ['autodocs']`.
-- [ ] `parameters.docs.description.component` có (docIntro từ locale hoặc string).
-- [ ] Layout story: class BEM hoặc style nhất quán; không phá quy ước `bem-class-style.mdc`.
-
-Nếu lệch: chỉnh lại story hoặc cập nhật rule / file mẫu ViButton.
-
----
-
-## 5. File template có placeholder (tùy chọn)
-
-- **Đường dẫn:** `.cursor/templates/ViComponent.stories.template.ts`
-- Copy vào thư mục component, đổi tên file và thay `ViComponent` / `ComponentName` / `componentKey` theo component thật; thêm/bớt argTypes, args, stories theo nhu cầu.
-
----
-
-## Tham chiếu
-
-- Plan & checklist KPI: `.cursor/plans/KPI_COMPONENT_TEMPLATE.md`
-- Story mẫu đầy đủ: `src/design-system/vi-ui/vi-button/ViButton.stories.ts`
-- Rule Storybook: `storybook.mdc` — Rule naming: `component-naming.mdc` — BEM: `bem-class-style.mdc`

package/dist/assets/cursor/rules/storybook.mdc

@@ -1,68 +0,0 @@
----
-description: Storybook — sidebar, title, CSF3, addons; stories/demo dùng vi-ui; áp dụng toàn dự án và consumer (@viui/cli) khi AI gen code
-globs: "**/*.stories.@(ts|tsx)", "**/*.mdx", ".storybook/**/*", "src/storybook/**/*"
-alwaysApply: false
----
-
-# Storybook
-
-**Bạn là Storybook expert cho design system Vue 3 + Vuetify + TypeScript.** Rule áp dụng cho i-design-system và repo consumer đã sync `.cursor` qua **@viui/cli** (AI gen code phải tuân).
-
-## Vai trò
-
-- **Chuẩn hóa** cách viết stories: CSF3, `Meta`/`StoryObj`, argTypes, tags.
-- **Hướng dẫn** cấu hình Storybook (`.storybook/`), addons (a11y, docs, vitest) và tích hợp Vuetify.
-- **Đảm bảo** stories dùng đúng component Vue 3 + Vuetify và design tokens; không hard-code theme/layout.
-
-## Cấu trúc sidebar cố định
-
-Thứ tự và nhóm sidebar trong `.storybook/preview.ts` (`options.storySort.order`):
-
-| Thứ tự | Nhóm | Nguồn | Ghi chú |
-|--------|------|--------|---------|
-| 1 | **Introduction** | `src/storybook/Introduction/*.mdx` | Design Principles |
-| 2 | **Foundations** | `src/storybook/Foundations/*.stories.ts`, `Configure.mdx` | Configure → Colors → Typography → Spacing & Layout |
-| 3 | **VIUI Components** | `src/design-system/vi-ui/**/*.stories.ts` | ViButton, ViInput, ViCard, … (title: `VIUI Components/<Tên>`) |
-| 4 | **Themes** | `src/storybook/Themes/<theme-id>/*.stories.ts` | Neo-Brutalism (trong `neo-brutalism/`), theme khác thêm folder tương ứng |
-| 5 | **Brands** | `src/components/brands/*.stories.ts` | Logo, Style Guide |
-| 6 | **Errors** | `src/components/errors/*.stories.ts` | ErrorPage, … |
-| 7+ | **AI Prompt Rules**, **Icons** | `src/storybook/AIPromptRules/*`, `src/storybook/Icons/IconsOverview.mdx` | Sau nhóm Errors; icon mặc định Tabler (xem `.cursor/rules/icons.mdc`) |
-
-- **Story title** = `{Nhóm}/{Tên}` (vd: `VIUI Components/Button`, `Brands/Logo`, `Errors/ErrorPage`, `Foundations/Colors`).
-- Story đặt **cùng thư mục** với component; **foundation stories** trong `src/storybook/Foundations/`.
-
-## Vi-ui: Component có slot → dùng Story Vue (tránh preview trống)
-
-**Vấn đề:** Component vi-ui dùng **nhiều slot** (vd: `activator` + default) hoặc **nội dung slot phức tạp**. Khi story dùng `render()` với template string, decorator Storybook có thể render component mà **slot không được truyền đúng**, dẫn tới **Canvas/Docs preview trống** (chỉ thấy nút, không thấy nội dung dropdown/menu/list).
-
-**Cách xử lý bắt buộc:** Tạo **component Story Vue** (ví dụ `ViMenuStory.vue`, `ViListStory.vue`) chứa toàn bộ template: component Vi* + nội dung slot (activator, default, …) **ngay trong SFC**. File `*.stories.ts` dùng component Story này làm `component` trong meta và chỉ truyền `args` (không dùng `render()` với template string).
-
-| Bước | Nội dung |
-|------|----------|
-| 1 | Tạo `ViNameStory.vue` trong cùng thư mục với `ViName.vue`. |
-| 2 | Trong SFC: đặt `ViName` với đủ slot (vd: `#activator`, default) và **dữ liệu demo** (v-list, v-list-item, …) trong template. |
-| 3 | Props của Story component: các biến cần đổi giữa các story (vd: `open`, `listVariant`, `location`). Dùng `ref` nội bộ sync với prop khi cần `v-model`. |
-| 4 | Trong `ViName.stories.ts`: `component: ViNameStory`, mỗi story chỉ `args: { ... }`, **không** dùng `render()`. |
-
-**Ví dụ tham chiếu:** `src/design-system/vi-ui/vi-menu/ViMenuStory.vue` + `ViMenu.stories.ts`, `src/design-system/vi-ui/vi-list/ViListStory.vue` + `ViList.stories.ts`.
-
-**Khi nào dùng:** Component có **activator + content** (ViMenu, ViDialog với slot phức tạp), hoặc **list/container cần item mẫu** (ViList). Component đơn giản chỉ props (ViButton, ViChip) có thể chỉ cần `*.stories.ts` với `args` mà không cần file Story Vue.
-
-## Nguyên tắc khi áp dụng rule này
-
-1. **CSF3 + TypeScript** — `satisfies Meta<typeof Component>`, `StoryObj<typeof meta>`, import từ `@storybook/vue3-vite`; đủ `argTypes` và `args` mặc định.
-2. **Cấu trúc title** — Theo hierarchy design system (vd: `vi-ui/Button`); nhất quán với nhóm sidebar trên.
-3. **Controls & docs** — Prop quan trọng có `control` và `description`; `tags: ["autodocs"]` khi cần; `fn()` cho events.
-4. **Vuetify trong stories** — Stories chạy trong app đã wrap Vuetify; dùng theme/tokens từ design system. **Layout (ViAppBar, ViNavigationDrawer, ViMain):** template phải bọc trong `<v-app>` để tránh lỗi `[Vuetify] Could not find injected layout`. Chi tiết: `vuetify-layout.mdc`.
-5. **Addons** — addon-docs, addon-a11y, addon-vitest; không phá cấu hình `.storybook/main.ts`.
-6. **Class BEM & style theo class** — Foundation stories và story wrapper: root có block class BEM (vd `spacing-layout-stories`, `colors-stories`); ưu tiên style qua class/CSS thay vì inline. Chi tiết: `bem-class-style.mdc`.
-7. **Vi-ui trong Storybook** — Stories và demo trong `src/storybook/` (gồm Icons demo) **dùng component vi-ui** (ViInput, ViButton, ViCard, ViMenu, ViButtonToggle, …) từ `@/design-system/vi-ui` khi có sẵn. **Nút action** (copy, link-style, submit) dùng **ViButton**, không dùng raw `<button>`. Nếu thiếu component (vd. ViButtonToggle cho nhóm nút Outline/Filled), bổ sung vào vi-ui trước rồi dùng trong demo. Chi tiết: `icons.mdc` và plan `icons_free_sources.plan.md`.
-
-## Tham chiếu nhanh
-
-- Config: `.storybook/main.ts`, `preview.ts`
-- Stories mẫu (đơn giản): `src/design-system/vi-ui/vi-button/ViButton.stories.ts`
-- Stories mẫu (có slot, dùng Story Vue): `src/design-system/vi-ui/vi-menu/ViMenuStory.vue` + `ViMenu.stories.ts`, `vi-list/ViListStory.vue` + `ViList.stories.ts`
-- Components & tokens: rule `design-system-component-library.mdc` và `src/tokens/`
-
-Khi được kích hoạt (file khớp glob), hành xử như **subagent Storybook expert** và áp dụng các nguyên tắc trên.

package/dist/assets/cursor/rules/tokens.mdc

@@ -1,32 +0,0 @@
----
-description: Design tokens — nguồn chân lý màu, typography, spacing; không hard-code
-globs: src/tokens/**/*, src/types/inet-tokens-types.ts, src/assets/styles/**/*.scss, src/plugins/**/theme*.ts
-alwaysApply: false
----
-
-# Design Tokens
-
-**Bạn là design tokens specialist.**
-
-## Vai trò
-
-- **Chuyên gia tokens**: Hướng dẫn định nghĩa, cấu trúc và sử dụng design tokens trong dự án.
-- **Nguồn chân lý**: Màu sắc, typography, spacing, elevation, motion — mọi giá trị giao diện lấy từ tokens, không hard-code.
-- **Đồng bộ**: Tokens TypeScript/JSON và SCSS/CSS variables phải nhất quán với `src/tokens/` và types trong `src/types/inet-tokens-types.ts`.
-
-## Nguyên tắc
-
-1. **Một nguồn, nhiều kênh** — **Single source of truth:** `src/tokens/design-tokens.ts` (color, typography, spacing, elevation, shape, motion, zIndex, breakpoint). Theme Vuetify và SCSS (`src/assets/styles/inet-tokens.scss`) consume từ đó. File SCSS mirror tokens ra CSS variables — khi thêm/sửa token trong TS cần cập nhật SCSS tương ứng (quy ước copy tay; sau có thể dùng script build hoặc Style Dictionary).
-2. **Legacy** — `inet-design-tokens.ts` và `IinetDesignTokens` giữ cho tương thích; code mới dùng `designTokens` / `colorTokens` / `typographyTokens` / `spacingTokens` từ `design-tokens.ts`. Types cho design tokens: export từ `design-tokens.ts` (`ColorTokens`, `TypographyTokens`, …).
-3. **Đặt tên có cấp bậc** — Ví dụ: `colorTokens.brand.primary`, `typographyTokens.fontSize.base`, `spacingTokens[4]`; tránh tên phẳng không ngữ cảnh.
-4. **Đơn vị và format** — Màu hex/rgb; spacing/typography dùng rem hoặc px theo quy ước dự án; không trộn đơn vị tùy tiện.
-5. **Tuân AGENTS.md** — Không tự chạy lệnh shell khi chưa có đồng ý.
-
-## Tham chiếu nhanh
-
-- **Tokens (ưu tiên):** `src/tokens/design-tokens.ts` — `colorTokens`, `typographyTokens`, `spacingTokens`, `designTokens`
-- **Legacy:** `src/tokens/inet-design-tokens.ts`, types `src/types/inet-tokens-types.ts`
-- Styles: `src/assets/styles/inet-tokens.scss`, `main.scss`
-- Theme: `src/plugins/theme-base.ts`, `v-light.ts`, `v-dark.ts`
-
-Khi được kích hoạt (file khớp glob), hành xử như **subagent design tokens specialist** và áp dụng các nguyên tắc trên.

package/dist/assets/cursor/rules/viui-themes.mdc

@@ -1,53 +0,0 @@
----
-description: Theme SCSS (viui-themes) — chỉ override hình dạng; màu semantic theo props Vi* (color: primary, success, info, error, warning). Cấu trúc tối đa 2 file per theme; không tạo file *-global trùng lặp.
-globs: packages/viui-themes/**/*.scss, src/storybook/Themes/**/*.vue
-alwaysApply: false
----
-
-# viui-themes — Design style themes (SCSS)
-
-**Khi tạo hoặc chỉnh SCSS trong `packages/viui-themes/` (và view theme trong `src/storybook/Themes/`), theme phải tôn trọng props của component Vi\* về màu sắc.**
-
-## Cấu trúc file — tối đa 2 file per theme
-
-Quản lý tập trung, tránh trùng lặp:
-
-- **Một partial:** `_<id>.scss` — chứa cả scoped (`.components-overview-wrapper.design-style-<id>`) và `body.design-style-<id>` (teleport + global). **Không** tạo file `_<id>-global.scss` riêng.
-- **Một entry:** `<id>.scss` — chỉ `@use './_<id>' as *;`. Import này dùng cho cả scoped và global.
-- **Alias tương thích ngược:** Trong `package.json`, `"./<id>-global"` và `"./<id>-global.scss"` trỏ cùng `"./<id>.scss"` (không tạo file vật lý `*-global.scss`).
-
-Khi thêm theme mới: tuân quy ước trên và `packages/viui-themes/_THEME_CONVENTION.md`.
-
-## Nguyên tắc bắt buộc (nội dung theme)
-
-**Theme chỉ override "hình dạng" (shape), không override "màu semantic".**
-
-| Override được (theme) | Không override (để props/quản lý) |
-|------------------------|-----------------------------------|
-| `border-width`, `border-style` | `border-color` — do prop `color` của Vi\* (primary, success, info, error, warning, …) |
-| `border-radius` | `background`, `background-color` khi component có `color` |
-| `box-shadow` (nhẹ hoặc none) | Màu chữ/nền semantic (Vuetify/theme từ tokens) |
-| `font-weight`, typography | |
-| `padding`, `margin`, spacing | |
-
-- **Màu sắc** (border, nền, chữ) phải **đi theo cấu hình props** của component Vi\*: `color="primary"`, `color="success"`, `color="info"`, `color="error"`, `color="warning"`, … Theme (palette) cung cấp token; component nhận `color` và áp dụng qua Vuetify theme. SCSS của theme **không** hardcode một màu duy nhất (vd. `border: 1px solid var(--color-border-default) !important`) cho mọi instance — nếu làm vậy sẽ chặn màu từ props.
-
-## Áp dụng trong SCSS theme
-
-1. **Button, Card, và component có prop `color`**  
-   - Set `border-width`, `border-style`, `border-radius`, `box-shadow`, `font-weight`.  
-   - **Không** set `border-color` (hoặc không dùng `!important` cho border-color) để Vuetify/component có thể áp màu từ prop `color`.
-
-2. **Input, Dialog, Toast, v.v.**  
-   - Có thể dùng `border-color: var(--color-border-default)` làm fallback **không** `!important` để trạng thái focus/error/semantic vẫn ghi đè được.
-
-3. **Focus / error state**  
-   - Được phép set `border-color` (vd. focus ring) với `!important` chỉ cho trạng thái đó, không cho default.
-
-## Tóm tắt
-
-- **Theme = lớp phong cách** (viền mỏng/dày, bóng nhẹ/nặng, typography, spacing).  
-- **Màu = theo props** (primary, success, info, error, warning, …).  
-- Tránh nhắc lại: mọi theme mới hoặc chỉnh theme cũ phải tuân quy tắc trên.
-
-Tham chiếu: `design-system-component-library.mdc`, `tokens.mdc`; plan `.cursor/plans/themes.plan.md`.

package/dist/assets/cursor/rules/vuetify-layout.mdc

@@ -1,52 +0,0 @@
----
-description: Vuetify layout — bắt buộc bọc v-app khi dùng ViAppBar, ViNavigationDrawer, ViMain; tránh lỗi "Could not find injected layout"
-globs: "**/*.vue", "**/*.stories.@(ts|tsx)"
-alwaysApply: false
----
-
-# Vuetify Layout (v-app bắt buộc)
-
-**Khi dùng component layout của Vuetify (hoặc vi-ui tương ứng), template phải nằm trong `<v-app>`.** Nếu không, runtime sẽ báo: **`[Vuetify] Could not find injected layout`**.
-
-## Component cần v-app
-
-Các component sau **phụ thuộc layout inject** từ Vuetify; chúng phải được render **bên trong** một `<v-app>`:
-
-| Vi-ui | Vuetify gốc |
-|-------|-------------|
-| ViAppBar | v-app-bar |
-| ViNavigationDrawer | v-navigation-drawer |
-| ViMain | v-main |
-| (VFooter nếu dùng) | v-footer |
-
-## Quy tắc bắt buộc
-
-1. **Trang / view / story có dùng bất kỳ component trên** → root template phải bọc bằng `<v-app>`.
-2. **Một cấp v-app** — Chỉ cần một `<v-app>` bọc toàn bộ nội dung trang (không cần mỗi section một v-app).
-3. **Storybook** — Story hoặc component Story Vue (vd. theme preview `Minimalist2.vue`, `NeoBrutalism.vue`) nếu có ViAppBar / ViNavigationDrawer / ViMain thì **root element của template** phải là `<v-app>` rồi mới đến nội dung.
-
-## Ví dụ đúng
-
-```vue
-<template>
-  <v-app>
-    <div class="my-page">
-      <ViAppBar title="Demo" />
-      <ViNavigationDrawer v-model="drawerOpen">...</ViNavigationDrawer>
-      <ViMain>...</ViMain>
-    </div>
-  </v-app>
-</template>
-```
-
-## Khi tạo mới hoặc cập nhật
-
-- **Thêm section Layout (AppBar, Drawer, Main)** vào theme preview hoặc bất kỳ trang Vue nào → kiểm tra root có `<v-app>` chưa; nếu chưa thì bọc toàn bộ template trong `<v-app>`.
-- **Lỗi "Could not find injected layout"** → nguyên nhân gần như chắc chắn là thiếu v-app bọc ngoài chỗ dùng ViAppBar / ViNavigationDrawer / ViMain; sửa bằng cách thêm `<v-app>` làm root.
-
-## Tham chiếu
-
-- Theme preview mẫu (đã bọc v-app): `src/storybook/Themes/minimalist-2/Minimalist2.vue`
-- Vi-ui layout: `src/design-system/vi-ui/vi-app-bar/`, `vi-navigation-drawer/`, `vi-main/`
-
-Khi chỉnh file khớp glob và có dùng layout component, **luôn đảm bảo** template được bọc trong `<v-app>` để tránh lỗi lặp lại.