@hobui/viui-cli 0.0.4 → 0.0.6

package/README.md

@@ -108,6 +108,8 @@ After init/sync, `.cursor/.design-system-version` contains the design system ver
 
 **viui-conf:** Init and sync also copy the design system's **Vuetify config folder** (theme-base, v-light, v-dark, defaults) to **`src/plugins/viui-conf/`** in the consumer repo. The file **`vuetify.ts`** is **not** synced — you keep your own `src/plugins/vuetify.ts` and import from `./viui-conf` (e.g. `import { defaults } from './viui-conf/defaults'`, `import LightTheme from './viui-conf/v-light'`). See [packages/docs/consumer-update.md](../docs/consumer-update.md) (§4).
 
+**viui-themes (SCSS):** Init and sync also copy **design style themes** (neo-brutalism, material, minimalist, etc.) to **`src/assets/styles/viui-themes/`** and create **`src/assets/styles/viui-themes-entry.scss`**. If the consumer has **`src/assets/styles/main.scss`**, the CLI adds an import for `viui-themes-entry` so theme SCSS is loaded automatically. Set `VITE_VIUI_THEME=neo-brutalism` (or another theme id) in `.env` and add `body.classList.add('design-style-neo-brutalism')` (or the matching class) in your app so the theme styles apply globally. See `src/plugins/viui-conf/defaults/README.md` after sync.
+
 ### Excluding files when building the CLI (`.cursorignore`)
 
 In **packages/cli**, the file **`.cursorignore`** is read by the copy script when building the CLI. Paths matching its patterns are not copied from i-design-system `.cursor/` into `dist/assets/cursor/`, so they are not synced to consumers. One pattern per line; lines starting with `#` and empty lines are ignored. Supported patterns:

package/dist/assets/plugins/viui-conf/apply-theme-body.ts

@@ -0,0 +1,26 @@
+/**
+ * Áp dụng body class theo VITE_VIUI_THEME để SCSS viui-themes (design-style-*) có hiệu lực toàn app.
+ * Import file này trong vuetify.ts (hoặc main.ts) để tự động gắn class khi load; export để gọi khi đổi theme tại runtime.
+ */
+import { VIUI_DEFAULT_THEME_ID } from './defaults/index'
+
+const themeId = (import.meta as unknown as { env?: { VITE_VIUI_THEME?: string } }).env?.VITE_VIUI_THEME ?? VIUI_DEFAULT_THEME_ID
+
+const DESIGN_STYLE_PREFIX = 'design-style-'
+
+/**
+ * Gắn class `design-style-<id>` lên body, gỡ mọi class `design-style-*` cũ.
+ * Gọi khi khởi động app hoặc khi user đổi theme (vd. từ settings).
+ */
+export function applyViuiThemeBodyClass(id: string): void {
+  if (typeof document === 'undefined') return
+  const body = document.body
+  if (!body) return
+  const toAdd = DESIGN_STYLE_PREFIX + id
+  Array.from(body.classList).forEach((c) => {
+    if (c.startsWith(DESIGN_STYLE_PREFIX)) body.classList.remove(c)
+  })
+  body.classList.add(toAdd)
+}
+
+applyViuiThemeBodyClass(themeId)

package/dist/assets/plugins/viui-conf/defaults/README.md

@@ -19,6 +19,12 @@ Defaults Vuetify (global + từng component) cho createVuetify. Merge base + **t
 - **vuetify.ts:** Khi không cấu hình `.env`, dùng theme mặc định từ `by-theme/index.ts` (`VIUI_DEFAULT_THEME_ID` = `minimalist-2`). Gọi `getDefaults(import.meta.env.VITE_VIUI_THEME ?? VIUI_DEFAULT_THEME_ID)`.
 - **.env:** `VITE_VIUI_THEME=minimalist-2` (mặc định) | `neo-brutalism` | `material`.
 
+## SCSS theme (viui-themes) — tự động khi dùng viui-cli
+
+Khi chạy `viui-cli init` hoặc `viui-cli sync`, CLI đồng bộ **viui-themes** vào `src/assets/styles/viui-themes/` và tạo `viui-themes-entry.scss`; nếu có `main.scss` thì CLI tự thêm dòng import để SCSS theme được load.
+
+**Body class (tự động):** Trong `vuetify.ts` (hoặc `main.ts`), thêm một dòng: `import './viui-conf/apply-theme-body'` (hoặc `import '@/plugins/viui-conf/apply-theme-body'`). Khi load, module sẽ đọc `VITE_VIUI_THEME` và gắn class `design-style-<themeId>` lên `body`, nhờ đó style SCSS theme áp toàn app. Đổi theme tại runtime: gọi `import { applyViuiThemeBodyClass } from '@/plugins/viui-conf/apply-theme-body'; applyViuiThemeBodyClass('neo-brutalism')`.
+
 ## Cấu trúc
 
 - `index.ts` — merge base + export `getDefaults(themeId?)`, `defaults` (= getDefaults()).

package/dist/assets/viui-themes/README.md

@@ -0,0 +1,114 @@
+# @viui/themes
+
+ViUi design style themes (SCSS) for use with Vuetify. Styles are scoped so they only apply when a wrapper has the matching class.
+
+## Requirements
+
+- Design tokens (CSS custom properties) must be loaded in the app before or with the theme — e.g. iNET design tokens (`inet-tokens.scss` or equivalent). Variables used: `--color-neutral-900`, `--radius-sm`, `--font-weight-bold`, `--duration-fast`, `--easing-default`, `--space-8pt-1`, `--font-weight-medium`, `--color-state-focus`, `--color-border-default`, `--color-border-subtle`, `--color-border-focus`.
+
+## Install
+
+In your consumer app (after adding the design system / viui-cli sync):
+
+```bash
+pnpm add @viui/themes
+```
+
+Or with workspace link (monorepo):
+
+```json
+"dependencies": {
+  "@viui/themes": "workspace:*"
+}
+```
+
+## Usage
+
+### 1. Import themes in `plugins/vuetify.ts`
+
+Load the theme SCSS once so the scoped rules are available. Import **after** your tokens and base styles (e.g. `vuetify/styles`, your `main.scss` or `inet-tokens.scss`).
+
+**Entry chung (khuyến nghị)** — load tất cả themes một lần:
+
+```ts
+// plugins/vuetify.ts
+import 'vuetify/styles'
+import '@/assets/styles/main.scss' // or inet-tokens + base
+import '@viui/themes'  // hoặc import '@viui/themes/index.scss'
+
+import { createVuetify } from 'vuetify'
+// ...
+export const vuetify = createVuetify({ /* ... */ })
+```
+
+**Chỉ một theme (scoped hoặc global)** — mỗi theme có **tối đa 2 file**: `_<id>.scss` (partial) + `<id>.scss` (entry). Entry `*-global` là alias trỏ cùng file `<id>.scss` (không tạo file trùng lặp).
+
+```ts
+import '@viui/themes/neo-brutalism.scss'
+import '@viui/themes/minimalist-2.scss'  // hoặc minimalist-2-global (cùng nội dung)
+```
+
+**Theme global (áp toàn app)** — import cùng file `<id>.scss` (hoặc alias `<id>-global`) và thêm class `design-style-<id>` vào `body`:
+
+```ts
+import '@viui/themes/minimalist-2.scss'  // hoặc @viui/themes/minimalist-2-global
+// main.ts / App.vue:
+import { applyViuiTheme } from './plugins/viui-theme'
+applyViuiTheme() // đọc VITE_VIUI_THEME (mặc định minimalist-2) và thêm body class
+```
+
+Cấu hình env: `VITE_VIUI_THEME=minimalist-2 | neo-brutalism | material | …` — **mặc định: Minimalist 2.0** (`minimalist-2`) khi không set.
+
+### 2. Apply the style with a wrapper class (scoped only)
+
+Neo-Brutalism applies only inside an element that has both:
+
+- `components-overview-wrapper`
+- `design-style-neo-brutalism`
+
+**Option A — Whole app:**
+
+```html
+<template>
+  <div class="components-overview-wrapper design-style-neo-brutalism">
+    <v-app>...</v-app>
+  </div>
+</template>
+```
+
+**Option B — One section (e.g. dashboard):**
+
+```html
+<div class="components-overview-wrapper design-style-neo-brutalism">
+  <!-- ViUi components here use Neo-Brutalism -->
+</div>
+```
+
+## Available themes
+
+Entry chung: `@viui/themes` hoặc `@viui/themes/index.scss` (load tất cả). Import riêng một theme: `@viui/themes/<id>.scss` hoặc `@viui/themes/<id>-global.scss`.
+
+| Theme           | Id               | Wrapper class                  | Trạng thái   |
+|----------------|------------------|--------------------------------|-------------|
+| Neo-Brutalism  | `neo-brutalism`  | `design-style-neo-brutalism`   | Đã có       |
+| Bento Grid     | `bento-grid`     | `design-style-bento-grid`      | Stub (TODO) |
+| Glassmorphism  | `glassmorphism`  | `design-style-glassmorphism`   | Stub (TODO) |
+| Minimalist     | `minimalist`     | `design-style-minimalist`      | Stub (TODO) |
+| Material       | `material`       | `design-style-material`        | Stub (TODO) |
+
+## Thêm theme mới
+
+Quy ước đầy đủ: xem **[_THEME_CONVENTION.md](./_THEME_CONVENTION.md)** trong package.
+
+**Cấu trúc file (tối đa 2 file per theme — quản lý tập trung, tránh trùng lặp):**
+
+1. **Một partial:** `_<id>.scss` — chứa cả scoped (`.components-overview-wrapper.design-style-<id>`) và global (`body.design-style-<id>`). Không tạo `_<id>-global.scss` riêng.
+2. **Một entry:** `<id>.scss` — chỉ `@use './_<id>' as *;`.
+3. **package.json** → `exports`: thêm `<id>.scss`, `<id>`, `<id>-global.scss`, `<id>-global` (hai entry global trỏ cùng `<id>.scss` để tương thích ngược).
+4. **index.scss**: thêm `@use './_<id>' as *;`.
+
+Dùng design tokens (CSS vars), không hard-code màu; đảm bảo WCAG AA contrast (xem `.cursor/rules/accessibility-contrast.mdc`).
+
+## viui-cli sync
+
+`viui-cli sync` updates only `.cursor` (rules, skills, commands, plans). Theme files are delivered via this package; add `@viui/themes` as a dependency and import in `plugins/vuetify.ts` as above.

package/dist/assets/viui-themes/_THEME_CONVENTION.md

@@ -0,0 +1,30 @@
+# Quy ước theme @viui/themes
+
+Mỗi theme có **id** dạng kebab-case (vd: `neo-brutalism`, `bento-grid`, `glassmorphism`, `minimalist`, `material`).
+
+## Cấu trúc file — tối đa 2 file per theme
+
+Quản lý tập trung: **không** tạo file `_<id>-global.scss` hay `<id>-global.scss` riêng; một partial chứa cả scoped + body, một entry; alias `*-global` trỏ cùng entry.
+
+| File | Mục đích |
+|------|----------|
+| `_<id>.scss` | Partial **duy nhất**: style trong `.components-overview-wrapper.design-style-<id>` (scoped) **và** `body.design-style-<id>` (teleport + global). Một nguồn chân lý. |
+| `<id>.scss` | Entry: chỉ `@use './_<id>' as *;`. Import này dùng cho cả scoped và global (consumer thêm class vào body nếu muốn toàn app). |
+
+**Export alias (tương thích ngược):** Trong `package.json`, `"./<id>-global.scss"` và `"./<id>-global"` trỏ cùng `"./<id>.scss"` — không tạo file vật lý `*-global.scss`.
+
+## Wrapper class
+
+- Scoped: `design-style-<id>` (kèm `components-overview-wrapper`).
+- Global: consumer thêm `body` class `design-style-<id>` hoặc inject theo config (cùng file SCSS).
+
+## Thêm theme mới
+
+1. Tạo **2 file**: `_<id>.scss` (partial), `<id>.scss` (entry: `@use './_<id>' as *;`). **Không** tạo `_<id>-global.scss` hoặc `<id>-global.scss` riêng.
+2. Trong `_<id>.scss`: viết cả selector `.components-overview-wrapper.design-style-<id>` và `body.design-style-<id>` (cho overlay/toast và dùng global).
+3. Trong `package.json` → `exports`: thêm  
+   `"./<id>.scss": "./<id>.scss"`, `"./<id>": "./<id>.scss"`,  
+   `"./<id>-global.scss": "./<id>.scss"`, `"./<id>-global": "./<id>.scss"`.
+4. Trong `index.scss`: thêm `@use './_<id>' as *;`.
+
+Dùng design tokens (CSS vars), không hard-code màu; đảm bảo WCAG AA contrast.

package/dist/assets/viui-themes/_bento-grid.scss

@@ -0,0 +1,8 @@
+/**
+ * Bento Grid design style — một file duy nhất: scoped + body. Entry: bento-grid.scss; *-global alias.
+ * TODO: grid layout, card tiles, spacing tokens.
+ */
+.components-overview-wrapper.design-style-bento-grid,
+body.design-style-bento-grid {
+  /* Bento Grid styles — use design tokens */
+}

package/dist/assets/viui-themes/_glassmorphism.scss

@@ -0,0 +1,8 @@
+/**
+ * Glassmorphism design style — một file duy nhất: scoped + body. Entry: glassmorphism.scss; *-global alias.
+ * TODO: backdrop-filter, semi-transparent surfaces, blur.
+ */
+.components-overview-wrapper.design-style-glassmorphism,
+body.design-style-glassmorphism {
+  /* Glassmorphism styles — use design tokens */
+}

package/dist/assets/viui-themes/_material.scss

@@ -0,0 +1,8 @@
+/**
+ * Material design style — một file duy nhất: scoped + body. Entry: material.scss; *-global alias.
+ * TODO: Material 3 / M3-like elevation, shapes, motion.
+ */
+.components-overview-wrapper.design-style-material,
+body.design-style-material {
+  /* Material styles — use design tokens */
+}

package/dist/assets/viui-themes/_minimalist-2.scss

@@ -0,0 +1,192 @@
+/**
+ * Minimalist 2.0 design style — một file duy nhất: scoped (wrapper) + body (teleport + global).
+ * Import: minimalist-2.scss hoặc minimalist-2-global (alias). Không tạo _*-global.scss riêng.
+ * Phong cách UI tối giản: viền mỏng (1px), shadow nhẹ hoặc không, typography 400–500, design tokens; WCAG AA.
+ */
+$min2-border-width: 1px;
+$min2-radius: var(--radius-base);
+$min2-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
+
+.components-overview-wrapper.design-style-minimalist-2 {
+  --min2-border-width: #{$min2-border-width};
+  --min2-radius: #{$min2-radius};
+  --min2-spacing-section: var(--space-8pt-2);
+
+  /* Button — chỉ hình dạng: viền mỏng, radius, shadow; không set border-color để prop color kiểm soát màu */
+  .vi-button.v-btn {
+    border-width: $min2-border-width !important;
+    border-style: solid !important;
+    border-radius: $min2-radius !important;
+    font-weight: var(--font-weight-medium) !important;
+    box-shadow: none !important;
+
+    &.v-btn--variant-elevated {
+      box-shadow: none !important;
+    }
+
+    &:hover:not(:disabled).v-btn--variant-elevated {
+      box-shadow: $min2-shadow-subtle !important;
+    }
+  }
+
+  /* Card — border chỉ khi variant="outlined"; màu theo prop color. Mọi card: no shadow. */
+  .vi-card.outlined {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius;
+    box-shadow: none;
+  }
+
+  .vi-card {
+    box-shadow: none;
+
+    .v-card-title {
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
+  /* Section — typography 400–500, spacing rộng rãi */
+  .vi-section__title {
+    font-weight: var(--font-weight-medium);
+    border-bottom: $min2-border-width solid var(--color-border-default);
+    padding-bottom: var(--min2-spacing-section);
+  }
+
+  /* Demo area background */
+  .themes-minimalist-2__area {
+    background: var(--color-surface-background);
+  }
+
+  /* Input / Field — chỉ hình dạng; border-color không !important để state (focus, error) hoạt động */
+  .vi-input .v-field,
+  .v-field {
+    border-width: $min2-border-width !important;
+    border-style: solid !important;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius !important;
+    box-shadow: none !important;
+
+    &.v-field--focused {
+      border-color: var(--color-border-focus) !important;
+      box-shadow: 0 0 0 1px var(--color-state-focus);
+    }
+  }
+
+  .vi-select .v-field {
+    border-width: $min2-border-width !important;
+    border-style: solid !important;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius !important;
+  }
+
+  /* Checkbox — chỉ hình dạng */
+  .vi-checkbox .v-selection-control .v-checkbox-btn {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: var(--radius-sm);
+  }
+
+  /* Alert */
+  .vi-alert {
+    border: $min2-border-width solid currentColor;
+    border-radius: $min2-radius;
+  }
+
+  /* Dialog — chỉ hình dạng */
+  .vi-dialog-card {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius;
+    box-shadow: $min2-shadow-subtle;
+  }
+
+  /* Toast — chỉ hình dạng + typography */
+  .vi-toast.v-snackbar .v-snackbar__wrapper {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius;
+    box-shadow: $min2-shadow-subtle;
+    font-weight: var(--font-weight-regular);
+  }
+
+  /* Progress linear */
+  .themes-minimalist-2__progress.v-progress-linear {
+    border: none;
+    border-radius: $min2-radius;
+  }
+
+  .vi-dialog-title {
+    font-weight: var(--font-weight-medium);
+    border-bottom-width: $min2-border-width;
+  }
+
+  .vi-dialog-actions {
+    border-top-width: $min2-border-width;
+  }
+
+  /* DataTable — chỉ hình dạng */
+  .vi-data-table .v-table {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+
+    th,
+    td {
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--color-border-subtle);
+    }
+  }
+
+  /* Pagination — chỉ hình dạng */
+  .vi-pagination .v-pagination__item,
+  .vi-pagination .v-pagination__prev,
+  .vi-pagination .v-pagination__next {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius;
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+/* Teleported content (dialog, snackbar) */
+body.design-style-minimalist-2 {
+  .vi-dialog-card {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius;
+    box-shadow: $min2-shadow-subtle;
+  }
+
+  .vi-dialog-title {
+    font-weight: var(--font-weight-medium);
+    border-bottom-width: $min2-border-width;
+  }
+
+  .vi-dialog-actions {
+    border-top-width: $min2-border-width;
+  }
+
+  .vi-dialog .vi-button.v-btn {
+    border-width: $min2-border-width !important;
+    border-style: solid !important;
+    border-radius: $min2-radius !important;
+    font-weight: var(--font-weight-medium) !important;
+    box-shadow: none !important;
+  }
+
+  .vi-toast.v-snackbar .v-snackbar__wrapper {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: $min2-radius;
+    box-shadow: $min2-shadow-subtle;
+    font-weight: var(--font-weight-regular);
+  }
+}

package/dist/assets/viui-themes/_minimalist.scss

@@ -0,0 +1,9 @@
+/**
+ * Minimalist design style — scoped + global (body).
+ * Một file duy nhất: wrapper + body (teleport + toàn app). Entry: minimalist.scss; *-global alias tới đó.
+ * TODO: clean lines, reduced chrome, generous whitespace.
+ */
+.components-overview-wrapper.design-style-minimalist,
+body.design-style-minimalist {
+  /* Minimalist styles — use design tokens */
+}

package/dist/assets/viui-themes/_neo-brutalism.scss

@@ -0,0 +1,281 @@
+/**
+ * Neo-Brutalism design style — một file duy nhất: scoped (wrapper) + body (teleport + global).
+ * Entry: neo-brutalism.scss hoặc neo-brutalism-global (alias). Không tạo _*-global.scss riêng.
+ * Spec: Figma Design Foundations Page. Thick borders, bold type, flat colors, offset shadow. Tokens; WCAG AA.
+ */
+$neo-border-width: 3px;
+$neo-shadow-offset: 4px 4px 0 0 var(--color-neutral-900, #1e1e1e);
+
+.components-overview-wrapper.design-style-neo-brutalism {
+  --neo-border-width: #{$neo-border-width};
+  --neo-radius: var(--radius-sm);
+  --neo-shadow-offset: #{$neo-shadow-offset};
+  --neo-font-weight: var(--font-weight-bold);
+
+  /* Button — .v-btn for specificity over Vuetify defaults */
+  .vi-button.v-btn {
+    border: var(--neo-border-width) solid var(--color-neutral-900) !important;
+    border-radius: var(--neo-radius) !important;
+    font-weight: var(--neo-font-weight) !important;
+    box-shadow: var(--neo-shadow-offset) !important;
+    transition: transform var(--duration-fast) var(--easing-default, ease);
+
+    &:hover:not(:disabled) {
+      transform: translate(1px, 1px);
+      box-shadow: 3px 3px 0 0 var(--color-neutral-900, #1e1e1e) !important;
+    }
+
+    &:active:not(:disabled) {
+      transform: translate(2px, 2px);
+      box-shadow: 2px 2px 0 0 var(--color-neutral-900, #1e1e1e) !important;
+    }
+  }
+
+  /* Card */
+  .vi-card {
+    border: var(--neo-border-width) solid var(--color-neutral-900);
+    border-radius: var(--neo-radius);
+    box-shadow: var(--neo-shadow-offset);
+
+    .v-card-title {
+      font-weight: var(--neo-font-weight);
+    }
+  }
+
+  /* Section — Figma: uppercase, font-black */
+  .vi-section__title {
+    font-weight: var(--neo-font-weight);
+    text-transform: uppercase;
+    border-bottom: var(--neo-border-width) solid var(--color-border-default);
+    padding-bottom: var(--space-8pt-1);
+  }
+
+  /* Demo area background — Figma Design Foundations page bg */
+  .themes-neo-brutalism__area {
+    background: #fef3c7;
+  }
+
+  /* Input / Field (Vuetify v-field inside vi-input) */
+  .vi-input,
+  .v-field {
+    border: var(--neo-border-width) solid var(--color-border-default) !important;
+    border-radius: var(--neo-radius) !important;
+    font-weight: var(--font-weight-medium);
+
+    &.v-field--focused {
+      border-color: var(--color-border-focus) !important;
+      box-shadow: 0 0 0 2px var(--color-state-focus);
+    }
+  }
+
+  /* Select */
+  .vi-select .v-field {
+    border: var(--neo-border-width) solid var(--color-border-default) !important;
+    border-radius: var(--neo-radius) !important;
+  }
+
+  /* Checkbox */
+  .vi-checkbox .v-selection-control .v-checkbox-btn {
+    border: var(--neo-border-width) solid var(--color-neutral-900);
+    border-radius: var(--radius-sm);
+  }
+
+  /* Alert */
+  .vi-alert {
+    border: var(--neo-border-width) solid currentColor;
+    border-radius: var(--neo-radius);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Dialog */
+  .vi-dialog-card {
+    border: var(--neo-border-width) solid var(--color-neutral-900);
+    border-radius: var(--neo-radius);
+    box-shadow: 8px 8px 0 0 var(--color-neutral-900, #1e1e1e);
+  }
+
+  /* Toast (v-snackbar) */
+  .vi-toast.v-snackbar .v-snackbar__wrapper {
+    border: var(--neo-border-width) solid var(--color-neutral-900);
+    border-radius: var(--neo-radius);
+    box-shadow: 4px 4px 0 0 var(--color-neutral-900, #1e1e1e);
+    font-weight: var(--neo-font-weight);
+  }
+
+  /* Progress linear (Loading) */
+  .themes-neo-brutalism__progress.v-progress-linear {
+    border: var(--neo-border-width) solid var(--color-neutral-900);
+    border-radius: var(--neo-radius);
+
+    .v-progress-linear__determinate {
+      border-radius: 2px;
+    }
+  }
+
+  .vi-dialog-title {
+    font-weight: var(--neo-font-weight);
+    border-bottom-width: var(--neo-border-width);
+  }
+
+  .vi-dialog-actions {
+    border-top-width: var(--neo-border-width);
+  }
+
+  /* DataTable */
+  .vi-data-table .v-table {
+    border: var(--neo-border-width) solid var(--color-border-default);
+
+    th,
+    td {
+      border: 1px solid var(--color-border-subtle);
+      font-weight: var(--font-weight-medium);
+    }
+
+    thead th {
+      font-weight: var(--neo-font-weight);
+    }
+  }
+
+  /* Pagination */
+  .vi-pagination .v-pagination__item,
+  .vi-pagination .v-pagination__prev,
+  .vi-pagination .v-pagination__next {
+    border: 2px solid var(--color-border-default);
+    border-radius: var(--neo-radius);
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+/* Body: teleported content (dialog, snackbar) + global use (consumer adds class to body) */
+body.design-style-neo-brutalism {
+  .vi-button.v-btn {
+    border: $neo-border-width solid var(--color-neutral-900) !important;
+    border-radius: var(--radius-lg, var(--radius-sm, 16px)) !important;
+    font-weight: var(--font-weight-bold) !important;
+    box-shadow: $neo-shadow-offset !important;
+    transition: transform var(--duration-fast) var(--easing-default, ease);
+
+    &:hover:not(:disabled) {
+      transform: translate(1px, 1px);
+      box-shadow: 3px 3px 0 0 var(--color-neutral-900, #1e1e1e) !important;
+    }
+
+    &:active:not(:disabled) {
+      transform: translate(2px, 2px);
+      box-shadow: 2px 2px 0 0 var(--color-neutral-900, #1e1e1e) !important;
+    }
+  }
+
+  .vi-card {
+    border: $neo-border-width solid var(--color-neutral-900);
+    border-radius: var(--radius-sm);
+    box-shadow: $neo-shadow-offset;
+
+    .v-card-title {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+
+  .vi-section__title {
+    font-weight: var(--font-weight-bold);
+    text-transform: uppercase;
+    border-bottom: $neo-border-width solid var(--color-border-default);
+    padding-bottom: var(--space-8pt-1);
+  }
+
+  .vi-input,
+  .v-field {
+    border: $neo-border-width solid var(--color-border-default) !important;
+    border-radius: var(--radius-sm) !important;
+    font-weight: var(--font-weight-medium);
+
+    &.v-field--focused {
+      border-color: var(--color-border-focus) !important;
+      box-shadow: 0 0 0 2px var(--color-state-focus);
+    }
+  }
+
+  .vi-select .v-field {
+    border: $neo-border-width solid var(--color-border-default) !important;
+    border-radius: var(--radius-sm) !important;
+  }
+
+  .vi-checkbox .v-selection-control .v-checkbox-btn {
+    border: $neo-border-width solid var(--color-neutral-900);
+    border-radius: var(--radius-sm);
+  }
+
+  .vi-alert {
+    border: $neo-border-width solid currentColor;
+    border-radius: var(--radius-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .vi-dialog-card {
+    border: $neo-border-width solid var(--color-neutral-900);
+    border-radius: var(--radius-sm);
+    box-shadow: 8px 8px 0 0 var(--color-neutral-900, #1e1e1e);
+  }
+
+  .vi-dialog-title {
+    font-weight: var(--font-weight-bold);
+    border-bottom-width: $neo-border-width;
+  }
+
+  .vi-dialog-actions {
+    border-top-width: $neo-border-width;
+  }
+
+  .vi-dialog .vi-button.v-btn {
+    border: $neo-border-width solid var(--color-neutral-900) !important;
+    border-radius: var(--radius-sm) !important;
+    font-weight: var(--font-weight-bold) !important;
+    box-shadow: $neo-shadow-offset !important;
+
+    &:hover:not(:disabled) {
+      box-shadow: 3px 3px 0 0 var(--color-neutral-900, #1e1e1e) !important;
+    }
+    &:active:not(:disabled) {
+      box-shadow: 2px 2px 0 0 var(--color-neutral-900, #1e1e1e) !important;
+    }
+  }
+
+  .vi-toast.v-snackbar .v-snackbar__wrapper {
+    border: $neo-border-width solid var(--color-neutral-900);
+    border-radius: var(--radius-sm);
+    box-shadow: 4px 4px 0 0 var(--color-neutral-900, #1e1e1e);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .themes-neo-brutalism__progress.v-progress-linear,
+  .v-progress-linear {
+    border: $neo-border-width solid var(--color-neutral-900);
+    border-radius: var(--radius-sm);
+
+    .v-progress-linear__determinate {
+      border-radius: 2px;
+    }
+  }
+
+  .vi-data-table .v-table {
+    border: $neo-border-width solid var(--color-border-default);
+
+    th,
+    td {
+      border: 1px solid var(--color-border-subtle);
+      font-weight: var(--font-weight-medium);
+    }
+
+    thead th {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+
+  .vi-pagination .v-pagination__item,
+  .vi-pagination .v-pagination__prev,
+  .vi-pagination .v-pagination__next {
+    border: 2px solid var(--color-border-default);
+    border-radius: var(--radius-sm);
+    font-weight: var(--font-weight-medium);
+  }
+}

package/dist/assets/viui-themes/bento-grid-global.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Bento Grid (global alias).
+ * Same content as bento-grid.scss; physical file so Vite/consumers resolve without package exports.
+ */
+@forward './bento-grid';

package/dist/assets/viui-themes/bento-grid.scss

@@ -0,0 +1,4 @@
+/**
+ * @viui/themes — Bento Grid entry (scoped).
+ */
+@use './_bento-grid' as *;

package/dist/assets/viui-themes/glassmorphism-global.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Glassmorphism (global alias).
+ * Same content as glassmorphism.scss; physical file so Vite/consumers resolve without package exports.
+ */
+@forward './glassmorphism';

package/dist/assets/viui-themes/glassmorphism.scss

@@ -0,0 +1,4 @@
+/**
+ * @viui/themes — Glassmorphism entry (scoped).
+ */
+@use './_glassmorphism' as *;

package/dist/assets/viui-themes/index.scss

@@ -0,0 +1,11 @@
+/**
+ * @viui/themes — Entry chung: load tất cả design style themes (scoped).
+ * Mỗi theme scope theo .components-overview-wrapper.design-style-<id> và body (teleport).
+ * Import một lần trong app/Storybook; thêm theme mới: thêm @use và file theo _THEME_CONVENTION.md.
+ */
+@use './_neo-brutalism' as *;
+@use './_bento-grid' as *;
+@use './_glassmorphism' as *;
+@use './_minimalist' as *;
+@use './_minimalist-2' as *;
+@use './_material' as *;

package/dist/assets/viui-themes/material-global.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Material (global alias).
+ * Same content as material.scss; physical file so Vite/consumers resolve without package exports.
+ */
+@forward './material';

package/dist/assets/viui-themes/material.scss

@@ -0,0 +1,4 @@
+/**
+ * @viui/themes — Material entry (scoped).
+ */
+@use './_material' as *;

package/dist/assets/viui-themes/minimalist-2-global.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Minimalist 2.0 (global alias).
+ * Same content as minimalist-2.scss; physical file so Vite/consumers resolve without package exports.
+ */
+@forward './minimalist-2';

package/dist/assets/viui-themes/minimalist-2.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Minimalist 2.0 entry.
+ * Scoped to .components-overview-wrapper.design-style-minimalist-2 and body.
+ */
+@use './_minimalist-2' as *;

package/dist/assets/viui-themes/minimalist-global.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Minimalist (global alias).
+ * Same content as minimalist.scss; physical file so Vite/consumers resolve without package exports.
+ */
+@forward './minimalist';

package/dist/assets/viui-themes/minimalist.scss

@@ -0,0 +1,4 @@
+/**
+ * @viui/themes — Minimalist entry (scoped).
+ */
+@use './_minimalist' as *;

package/dist/assets/viui-themes/neo-brutalism-global.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Neo-Brutalism (global alias).
+ * Same content as neo-brutalism.scss; physical file so Vite/consumers resolve without package exports.
+ */
+@forward './neo-brutalism';

package/dist/assets/viui-themes/neo-brutalism.scss

@@ -0,0 +1,5 @@
+/**
+ * @viui/themes — Neo-Brutalism entry.
+ * Scoped to .components-overview-wrapper.design-style-neo-brutalism.
+ */
+@use './_neo-brutalism' as *;

package/dist/cli.js

@@ -20,6 +20,10 @@ function getAssetsCursorDir() {
 function getAssetsPluginsDir() {
     return path.join(__dirname, 'assets', 'plugins');
 }
+/** viui-themes SCSS bundle path (synced to consumer src/assets/styles/viui-themes). */
+function getAssetsViuiThemesDir() {
+    return path.join(__dirname, 'assets', 'viui-themes');
+}
 function loadManifest(assetsDir) {
     const p = path.join(assetsDir, 'sync-manifest.json');
     if (!fs.existsSync(p))
@@ -153,6 +157,52 @@ function runInit(cwd, assetsDir, opts) {
         if (!opts.dryRun)
             console.log('Synced viui-conf to src/plugins/viui-conf');
     }
+    syncViuiThemesAndEntry(cwd, opts.dryRun ?? false);
+}
+/**
+ * Sync viui-themes SCSS to consumer and ensure theme SCSS is loaded.
+ * - Copies dist/assets/viui-themes → src/assets/styles/viui-themes
+ * - Writes viui-themes-entry.scss that @use's viui-themes/index.scss
+ * - Injects import into main.scss if present and not already there
+ */
+function syncViuiThemesAndEntry(cwd, dryRun) {
+    const themesSrc = getAssetsViuiThemesDir();
+    const stylesDir = path.join(cwd, 'src', 'assets', 'styles');
+    const themesDest = path.join(stylesDir, 'viui-themes');
+    const entryPath = path.join(stylesDir, 'viui-themes-entry.scss');
+    const mainScssPath = path.join(stylesDir, 'main.scss');
+    const entryImport = "@use './viui-themes-entry' as *;";
+    if (!fs.existsSync(themesSrc))
+        return;
+    if (dryRun) {
+        console.log('Would sync viui-themes to src/assets/styles/viui-themes');
+        console.log('Would write src/assets/styles/viui-themes-entry.scss');
+        console.log('Would ensure main.scss imports viui-themes-entry');
+        return;
+    }
+    if (!fs.existsSync(path.join(cwd, 'src', 'assets')))
+        fs.mkdirSync(path.join(cwd, 'src', 'assets'), { recursive: true });
+    if (!fs.existsSync(stylesDir))
+        fs.mkdirSync(stylesDir, { recursive: true });
+    copyRecursive(themesSrc, themesDest, { dryRun: false });
+    console.log('Synced viui-themes to src/assets/styles/viui-themes');
+    const entryContent = `/**
+ * ViUi design style themes — auto-loaded when using viui-conf (VITE_VIUI_THEME).
+ * Do not edit: generated by viui-cli sync. Styles apply when body has .design-style-<id> or wrapper has .design-style-<id>.
+ */
+@use './viui-themes/index.scss' as *;
+`;
+    fs.writeFileSync(entryPath, entryContent, 'utf8');
+    console.log('Wrote viui-themes-entry.scss');
+    if (fs.existsSync(mainScssPath)) {
+        const mainContent = fs.readFileSync(mainScssPath, 'utf8');
+        const hasEntry = /viui-themes-entry/.test(mainContent);
+        if (!hasEntry) {
+            const appended = mainContent.trimEnd() + '\n' + entryImport + '\n';
+            fs.writeFileSync(mainScssPath, appended, 'utf8');
+            console.log('Added viui-themes-entry import to main.scss');
+        }
+    }
 }
 function runSync(cwd, assetsDir, opts) {
     const manifest = loadManifest(assetsDir);
@@ -208,6 +258,7 @@ function runSync(cwd, assetsDir, opts) {
             console.log('Synced viui-conf to src/plugins/viui-conf');
         }
     }
+    syncViuiThemesAndEntry(cwd, opts.dryRun ?? false);
 }
 function detectPackageManager(cwd) {
     if (fs.existsSync(path.join(cwd, 'pnpm-lock.yaml')))
@@ -230,6 +281,87 @@ function addPostinstallScript(cwd, pm) {
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
     return true;
 }
+const VIUI_THEME_IDS = ['minimalist-2', 'neo-brutalism', 'material'];
+function setEnvTheme(cwd, themeId) {
+    const envPath = path.join(cwd, '.env');
+    const examplePath = path.join(cwd, '.env.example');
+    const line = `VITE_VIUI_THEME=${themeId}`;
+    const targets = [envPath, examplePath].filter((p) => fs.existsSync(p));
+    if (targets.length === 0) {
+        fs.writeFileSync(envPath, line + '\n', 'utf8');
+        console.log('Created .env with', line);
+        return;
+    }
+    for (const p of targets) {
+        let content = fs.readFileSync(p, 'utf8');
+        const re = /^\s*VITE_VIUI_THEME=.*/m;
+        if (re.test(content)) {
+            content = content.replace(re, line);
+        }
+        else {
+            content = content.trimEnd() + '\n' + line + '\n';
+        }
+        fs.writeFileSync(p, content, 'utf8');
+        console.log('Set', line, 'in', path.basename(p));
+    }
+}
+function ensureApplyThemeBodyInVuetify(cwd) {
+    const vuetifyPath = path.join(cwd, 'src', 'plugins', 'vuetify.ts');
+    if (!fs.existsSync(vuetifyPath))
+        return false;
+    const content = fs.readFileSync(vuetifyPath, 'utf8');
+    if (/apply-theme-body|applyThemeBody/.test(content))
+        return false;
+    const importLine = "import './viui-conf/apply-theme-body'";
+    const defaultsImportMatch = content.match(/import\s+.+\s+from\s+['"]\.\/viui-conf\/defaults[^'"]*['"]/);
+    const insert = defaultsImportMatch
+        ? content.replace(defaultsImportMatch[0], defaultsImportMatch[0] + '\n' + importLine)
+        : content.trimStart().replace(/^(\s*)/, `$1${importLine}\n$1`);
+    fs.writeFileSync(vuetifyPath, insert, 'utf8');
+    console.log('Added apply-theme-body import to src/plugins/vuetify.ts');
+    return true;
+}
+function showHelpDocs(cwd) {
+    console.log('\n--- Design system setup ---');
+    console.log('Design themes (viui-themes) are in: src/assets/styles/viui-themes/');
+    console.log('Available theme ids: minimalist-2 (default), neo-brutalism, material');
+    console.log('To use a theme: set VITE_VIUI_THEME in .env and add in vuetify.ts:');
+    console.log("  import './viui-conf/apply-theme-body'");
+    console.log('Details: src/plugins/viui-conf/defaults/README.md');
+    console.log('CLI docs: pnpm exec viui-cli --help');
+    console.log('---\n');
+}
+async function runConfigureTheme(cwd, rl, opts) {
+    console.log('\n  Design theme (viui-themes)');
+    console.log('  Available: minimalist-2 (default), neo-brutalism, material\n');
+    console.log('  a) Use minimalist-2 (default) — thin borders, flat');
+    console.log('  b) Use neo-brutalism        — thick borders, hard shadow');
+    console.log('  c) Use material             — elevated, standard Material');
+    console.log('  d) Skip / configure manually — set .env yourself\n');
+    const a = await rl.question('  Choose (a-d, or Enter for a): ');
+    const choice = (a.trim().toLowerCase() || 'a')[0];
+    const map = {
+        a: 'minimalist-2',
+        b: 'neo-brutalism',
+        c: 'material',
+        d: 'skip',
+    };
+    const themeId = map[choice] ?? map.a;
+    if (themeId === 'skip') {
+        console.log('  Skipped. Set VITE_VIUI_THEME in .env and add import in vuetify.ts. See src/plugins/viui-conf/defaults/README.md');
+        return;
+    }
+    setEnvTheme(cwd, themeId);
+    const vuetifyPath = path.join(cwd, 'src', 'plugins', 'vuetify.ts');
+    const hasImport = fs.existsSync(vuetifyPath) && /apply-theme-body|applyThemeBody/.test(fs.readFileSync(vuetifyPath, 'utf8'));
+    if (!hasImport && fs.existsSync(vuetifyPath)) {
+        const ans = await rl.question('  Add apply-theme-body import to vuetify.ts? (Y/n): ');
+        const add = opts.yes || (ans.trim().toLowerCase() === '' || ans.trim().toLowerCase() === 'y' || ans.trim().toLowerCase() === 'yes');
+        if (add)
+            ensureApplyThemeBodyInVuetify(cwd);
+    }
+    console.log('  Theme configured:', themeId);
+}
 async function runSetup(cwd, assetsDir, opts) {
     const isPostinstall = opts.postinstall === true;
     if (isPostinstall && !process.stdin.isTTY) {
@@ -243,50 +375,97 @@ async function runSetup(cwd, assetsDir, opts) {
     }
     const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
     const ask = async (q, defaultYes) => {
-        const def = defaultYes ? 'Y/n' : 'y/N';
-        const a = await rl.question(`${q} (${def}): `);
+        const a = await rl.question(`${q} (${defaultYes ? 'Y/n' : 'y/N'}): `);
         const s = a.trim().toLowerCase();
         if (s === '')
             return defaultYes;
         return s === 'y' || s === 'yes';
     };
     console.log(`\n${pkg.name ?? '@viui/cli'} — Setup i-design-system in this repo\n`);
+    console.log('  This will: sync .cursor, viui-conf, viui-themes; optional @viui/web, theme config, postinstall.\n');
     const runNow = opts.yes || (await ask('Run setup now?', true));
     if (!runNow) {
         console.log('Skipped. Run later: pnpm exec viui-cli setup');
         rl.close();
         return;
     }
+    const pm = detectPackageManager(cwd);
     const cursorDir = path.join(cwd, '.cursor');
-    const hasCursor = fs.existsSync(cursorDir);
-    if (!hasCursor) {
-        console.log('Step 1: Initializing .cursor (rules, plans) and src/plugins/viui-conf...');
-        runInit(cwd, assetsDir, { yes: true, dryRun: false, noPlans: false });
-    }
-    else {
-        const doSync = opts.yes || (await ask('Step 1: .cursor exists. Sync from design system?', true));
-        if (doSync) {
-            runSync(cwd, assetsDir, { dryRun: false, backup: false });
+    for (;;) {
+        console.log('\n  What do you want to do?\n');
+        console.log('  1) Full setup (recommended) — init/sync .cursor + viui-conf + viui-themes, install @viui/web, configure theme, add postinstall');
+        console.log('  2) Sync only                — update .cursor, viui-conf, viui-themes (no npm install)');
+        console.log('  3) Install @viui/web only   — add Vi* components dependency');
+        console.log('  4) Configure design theme   — set VITE_VIUI_THEME in .env and ensure body class is applied');
+        console.log('  5) Add postinstall script   — auto-sync on every pnpm install');
+        console.log('  6) Show help / docs         — print links and next steps\n');
+        const choiceInput = await rl.question('  Choose (1-6, or Enter for 1): ');
+        const choice = (choiceInput.trim() || '1').replace(/[^1-6]/, '1');
+        const n = parseInt(choice, 10);
+        if (n < 1 || n > 6)
+            continue;
+        if (n === 1) {
+            if (!fs.existsSync(cursorDir)) {
+                console.log('\nStep: Initializing .cursor, viui-conf, viui-themes...');
+                runInit(cwd, assetsDir, { yes: true, dryRun: false, noPlans: false });
+            }
+            else {
+                console.log('\nStep: Syncing .cursor, viui-conf, viui-themes...');
+                runSync(cwd, assetsDir, { dryRun: false, backup: false });
+            }
+            console.log('\nStep: Installing @viui/web...');
+            const { execSync } = await import('node:child_process');
+            const addCmd = pm === 'pnpm' ? 'pnpm add @viui/web' : pm === 'yarn' ? 'yarn add @viui/web' : 'npm install @viui/web';
+            execSync(addCmd, { cwd, stdio: 'inherit' });
+            await runConfigureTheme(cwd, rl, { yes: opts.yes });
+            if (!isPostinstall && (opts.yes || (await ask('\nAdd postinstall to auto-sync on install?', false)))) {
+                if (addPostinstallScript(cwd, pm))
+                    console.log('Added postinstall script to package.json.');
+            }
+            console.log('\nDone. Use: import { ViButton, ViInput, ... } from \'@viui/web\'');
+            console.log('Design themes: src/assets/styles/viui-themes/ — set VITE_VIUI_THEME in .env; see src/plugins/viui-conf/defaults/README.md');
+            break;
         }
-    }
-    const pm = detectPackageManager(cwd);
-    const doWeb = opts.yes || (await ask('Step 2: Install @viui/web for Vi* components?', true));
-    if (doWeb) {
-        const { execSync } = await import('node:child_process');
-        const addCmd = pm === 'pnpm' ? 'pnpm add @viui/web' : pm === 'yarn' ? 'yarn add @viui/web' : 'npm install @viui/web';
-        console.log(`Running: ${addCmd}`);
-        execSync(addCmd, { cwd, stdio: 'inherit' });
-    }
-    const doPostinstall = !isPostinstall && (opts.yes || (await ask('Step 3: Add postinstall to auto-sync on install?', false)));
-    if (doPostinstall) {
-        if (addPostinstallScript(cwd, pm)) {
-            console.log('Added postinstall script to package.json.');
+        if (n === 2) {
+            if (!fs.existsSync(cursorDir)) {
+                console.log('\nInitializing .cursor, viui-conf, viui-themes...');
+                runInit(cwd, assetsDir, { yes: true, dryRun: false, noPlans: false });
+            }
+            else {
+                console.log('\nSyncing .cursor, viui-conf, viui-themes...');
+                runSync(cwd, assetsDir, { dryRun: false, backup: false });
+            }
+            console.log('Sync done.');
+            break;
         }
-        else {
-            console.log('postinstall already contains viui-cli or package.json not found.');
+        if (n === 3) {
+            const { execSync } = await import('node:child_process');
+            const addCmd = pm === 'pnpm' ? 'pnpm add @viui/web' : pm === 'yarn' ? 'yarn add @viui/web' : 'npm install @viui/web';
+            console.log('\nRunning:', addCmd);
+            execSync(addCmd, { cwd, stdio: 'inherit' });
+            console.log('Done. Use: import { ViButton, ViInput, ... } from \'@viui/web\'');
+            break;
+        }
+        if (n === 4) {
+            await runConfigureTheme(cwd, rl, { yes: opts.yes });
+            break;
+        }
+        if (n === 5) {
+            if (addPostinstallScript(cwd, pm)) {
+                console.log('\nAdded postinstall script to package.json.');
+            }
+            else {
+                console.log('\npostinstall already contains viui-cli or package.json not found.');
+            }
+            break;
+        }
+        if (n === 6) {
+            showHelpDocs(cwd);
+            const again = opts.yes || (await ask('Show menu again?', true));
+            if (!again)
+                break;
         }
     }
-    console.log('\nDone. Use: import { ViButton, ViInput, ... } from \'@viui/web\'');
     rl.close();
 }
 const result = parseArgs({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hobui/viui-cli",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "CLI to sync i-design-system .cursor (rules, skills, commands) into consumer repos",
   "type": "module",
   "files": [