@hobui/viui-cli 0.0.5 → 0.0.7

package/dist/adapters/external/external-adapter-base.js

@@ -0,0 +1,92 @@
+/** Strip import lines referencing internal paths */
+export function stripImportPaths(md) {
+    return md.replace(/^.*import\s+.*from\s+['"]@[/'].*['"].*$/gm, '')
+        .replace(/^\s*[-*]\s*(Design System repo|Consumer app|Tokens):.*@.*$/gm, '')
+        .replace(/^\s*[-*]\s*Import path:?\s*$/gm, '');
+}
+/** Compact color table (12 rows) — extracted from COLORS_JSON */
+export const COLORS_TABLE = `| Token | Light | Dark |
+|---|---|---|
+| primary | #024799 | #619ee9 |
+| accent | #cc0e0e | #ed7b7b |
+| neutral-bg | #F4F7FA | #0D1117 |
+| neutral-text | #0F1E2D | #E6EDF3 |
+| neutral-border | #D0DAE6 | #21262D |
+| success | #0E9F6E | #34D399 |
+| warning | #D47B0A | #FBBF24 |
+| error | #B91C1C | #F87171 |
+| info | #8abdef | #619ee9 |
+| surface-bg | #FFFFFF | #121212 |
+| surface-card | #FFFFFF | #2a2a2a |
+| surface-elev | #FFFFFF | #1e1e1e |`;
+/** CSS vars block for embedded use */
+export const CSS_VARS_BLOCK = `:root {
+  --color-primary: #024799;
+  --color-accent: #cc0e0e;
+  --neutral-bg: #F4F7FA;
+  --neutral-text: #0F1E2D;
+  --neutral-border: #D0DAE6;
+  --color-success: #0E9F6E;
+  --color-warning: #D47B0A;
+  --color-error: #B91C1C;
+  --color-info: #8abdef;
+}
+.dark {
+  --color-primary: #619ee9;
+  --color-accent: #ed7b7b;
+  --neutral-bg: #0D1117;
+  --neutral-text: #E6EDF3;
+  --neutral-border: #21262D;
+  --color-success: #34D399;
+  --color-warning: #FBBF24;
+  --color-error: #F87171;
+  --color-info: #619ee9;
+}`;
+/** Tailwind extend config */
+export const TAILWIND_CONFIG = `extend: {
+  colors: {
+    'primary': '#024799',
+    'accent': '#cc0e0e',
+    'neutral-bg': '#F4F7FA',
+    'neutral-text': '#0F1E2D',
+    'success': '#0E9F6E',
+    'warning': '#D47B0A',
+    'error': '#B91C1C',
+    'info': '#8abdef'
+  }
+}`;
+/** Replace full color JSON blob with a compact replacement */
+export function replaceColorsWithFormat(md, replacement) {
+    return md.replace(/\{"colors":\{[^}]*(?:\{[^}]*\}[^}]*)*\}\}/g, replacement);
+}
+/** Vi* → shadcn component mapping */
+const SHADCN_MAP = {
+    ViButton: '<Button>', ViCard: '<Card>', ViInput: '<Input>',
+    ViSelect: '<Select>', ViAlert: '<Alert>', ViDialog: '<Dialog>',
+    ViDataTable: '<Table>', ViChip: '<Badge>', ViAvatar: '<Avatar>',
+    ViCheckbox: '<Checkbox>', ViSwitch: '<Switch>', ViLoading: '<Skeleton>',
+};
+/** Vi* → HTML semantic mapping */
+const HTML_MAP = {
+    ViButton: '<button>', ViCard: '<div class="card">', ViInput: '<input>',
+    ViSelect: '<select>', ViAlert: '<div role="alert">', ViDialog: '<dialog>',
+    ViDataTable: '<table>', ViChip: '<span class="badge">', ViAvatar: '<img>',
+    ViCheckbox: '<input type="checkbox">', ViSwitch: '<input type="checkbox" role="switch">',
+};
+/** Map Vi* component names to target equivalent */
+export function mapComponents(md, target) {
+    const map = target === 'shadcn' ? SHADCN_MAP : HTML_MAP;
+    let result = md;
+    for (const [vi, replacement] of Object.entries(map)) {
+        result = result.replace(new RegExp(`\\b${vi}\\b`, 'g'), replacement);
+    }
+    return result;
+}
+/** Trim text to maxChars at last newline */
+export function trimToLimit(text, maxChars) {
+    if (text.length <= maxChars)
+        return text;
+    const trimmed = text.slice(0, maxChars);
+    const lastNl = trimmed.lastIndexOf('\n');
+    return (lastNl > 0 ? trimmed.slice(0, lastNl) : trimmed) + '\n\n[truncated]';
+}

package/dist/adapters/external/gemini-adapter.d.ts

@@ -0,0 +1,3 @@
+import type { AiAdapter } from '../adapter-types.js';
+export declare const geminiAdapter: AiAdapter;
+//# sourceMappingURL=gemini-adapter.d.ts.map

package/dist/adapters/external/gemini-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gemini-adapter.d.ts","sourceRoot":"","sources":["../../../src/adapters/external/gemini-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,qBAAqB,CAAA;AAGhE,eAAO,MAAM,aAAa,EAAE,SAY3B,CAAA"}

package/dist/adapters/external/gemini-adapter.js

@@ -0,0 +1,14 @@
+import { stripImportPaths, replaceColorsWithFormat, CSS_VARS_BLOCK, trimToLimit } from './external-adapter-base.js';
+export const geminiAdapter = {
+    name: 'Gemini',
+    category: 'external',
+    detectDirs: [],
+    outputPath: '.viui/prompts/gemini/design-system.txt',
+    maxChars: 6000,
+    transform(markdown, meta) {
+        let result = stripImportPaths(markdown);
+        result = replaceColorsWithFormat(result, CSS_VARS_BLOCK);
+        result = trimToLimit(result, 6000);
+        return `# iNET Design System (v${meta.version})\n\n` + result;
+    },
+};

package/dist/adapters/external/lovable-adapter.d.ts

@@ -0,0 +1,3 @@
+import type { AiAdapter } from '../adapter-types.js';
+export declare const lovableAdapter: AiAdapter;
+//# sourceMappingURL=lovable-adapter.d.ts.map

package/dist/adapters/external/lovable-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lovable-adapter.d.ts","sourceRoot":"","sources":["../../../src/adapters/external/lovable-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,qBAAqB,CAAA;AAGhE,eAAO,MAAM,cAAc,EAAE,SAY5B,CAAA"}

package/dist/adapters/external/lovable-adapter.js

@@ -0,0 +1,14 @@
+import { stripImportPaths, replaceColorsWithFormat, TAILWIND_CONFIG, trimToLimit } from './external-adapter-base.js';
+export const lovableAdapter = {
+    name: 'Lovable',
+    category: 'external',
+    detectDirs: [],
+    outputPath: '.viui/prompts/lovable/design-system.txt',
+    maxChars: 4000,
+    transform(markdown, meta) {
+        let result = stripImportPaths(markdown);
+        result = replaceColorsWithFormat(result, TAILWIND_CONFIG);
+        result = trimToLimit(result, 4000);
+        return `# iNET Design System (v${meta.version})\n\n` + result;
+    },
+};

package/dist/adapters/external/v0-adapter.d.ts

@@ -0,0 +1,3 @@
+import type { AiAdapter } from '../adapter-types.js';
+export declare const v0Adapter: AiAdapter;
+//# sourceMappingURL=v0-adapter.d.ts.map

package/dist/adapters/external/v0-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"v0-adapter.d.ts","sourceRoot":"","sources":["../../../src/adapters/external/v0-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,qBAAqB,CAAA;AAGhE,eAAO,MAAM,SAAS,EAAE,SAavB,CAAA"}

package/dist/adapters/external/v0-adapter.js

@@ -0,0 +1,15 @@
+import { stripImportPaths, replaceColorsWithFormat, TAILWIND_CONFIG, mapComponents, trimToLimit } from './external-adapter-base.js';
+export const v0Adapter = {
+    name: 'v0',
+    category: 'external',
+    detectDirs: [],
+    outputPath: '.viui/prompts/v0/design-system.txt',
+    maxChars: 4000,
+    transform(markdown, meta) {
+        let result = stripImportPaths(markdown);
+        result = replaceColorsWithFormat(result, TAILWIND_CONFIG);
+        result = mapComponents(result, 'shadcn');
+        result = trimToLimit(result, 4000);
+        return `# iNET Design System (v${meta.version})\n\n` + result;
+    },
+};

package/dist/adapters/windsurf-adapter.d.ts

@@ -0,0 +1,3 @@
+import type { AiAdapter } from './adapter-types.js';
+export declare const windsurfAdapter: AiAdapter;
+//# sourceMappingURL=windsurf-adapter.d.ts.map

package/dist/adapters/windsurf-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"windsurf-adapter.d.ts","sourceRoot":"","sources":["../../src/adapters/windsurf-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAkBnD,eAAO,MAAM,eAAe,EAAE,SAQ7B,CAAA"}

package/dist/adapters/windsurf-adapter.js

@@ -0,0 +1,23 @@
+/** Truncate markdown to fit within maxChars by removing sections from the end */
+function truncateToFit(markdown, maxChars) {
+    if (markdown.length <= maxChars)
+        return markdown;
+    // Split into sections by ## headings
+    const sections = markdown.split(/(?=^## )/m);
+    let result = sections[0] ?? '';
+    for (let i = 1; i < sections.length; i++) {
+        if ((result + sections[i]).length > maxChars)
+            break;
+        result += sections[i];
+    }
+    return result.trimEnd() + '\n';
+}
+export const windsurfAdapter = {
+    name: 'Windsurf',
+    detectDirs: ['.windsurf'],
+    outputPath: '.windsurf/rules/viui-design-system.md',
+    maxChars: 6000,
+    transform(markdown) {
+        return truncateToFit(markdown, this.maxChars ?? 6000);
+    },
+};

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

@@ -1,5 +1,5 @@
 /**
- * Áp dụng body class theo VITE_VIUI_THEME để SCSS viui-themes (design-style-*) có hiệu lực toàn app.
+ * Áp dụng body class theo VITE_VIUI_THEME để SCSS 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'
@@ -11,16 +11,35 @@ 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).
+ * Hai vòng lặp: (1) gỡ hết design-style-* rồi add một class; (2) gỡ mọi design-style-* khác toAdd (tránh race khi module chạy hai lần hoặc script khác thêm class).
  */
 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)
-  })
+  for (;;) {
+    const toRemove = Array.from(body.classList).find((c) => c.startsWith(DESIGN_STYLE_PREFIX))
+    if (!toRemove) break
+    body.classList.remove(toRemove)
+  }
   body.classList.add(toAdd)
+  for (;;) {
+    const other = Array.from(body.classList).find((c) => c.startsWith(DESIGN_STYLE_PREFIX) && c !== toAdd)
+    if (!other) break
+    body.classList.remove(other)
+  }
 }
 
 applyViuiThemeBodyClass(themeId)
+
+// Dev-only: giúp debug khi theme không áp dụng (giao diện vẫn mặc định)
+try {
+  if ((import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV) {
+    console.info(
+      `[ViUI] Theme: ${themeId} → body class "design-style-${themeId}". Nếu style vẫn mặc định: kiểm tra main.scss có import themes-entry và app có import main.scss.`
+    )
+  }
+} catch {
+  /* no import.meta.env */
+}

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

@@ -25,6 +25,8 @@ Khi chạy `viui-cli init` hoặc `viui-cli sync`, CLI đồng bộ **viui-theme
 
 **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')`.
 
+**Theme không áp dụng (giao diện vẫn mặc định)?** (1) `.env` có `VITE_VIUI_THEME=neo-brutalism` và **restart dev server**. (2) `vuetify.ts` có `import './viui-conf/apply-theme-body'`. (3) Có `src/assets/styles/main.scss` với `@use './viui-themes-entry' as *;` và **app entry (main.ts) import main.scss**. (4) Đã chạy `viui-cli sync` để có `src/assets/styles/viui-themes/`. Console (dev) có log `[ViUI] Theme: neo-brutalism → body class "design-style-neo-brutalism"` nếu body class đã chạy; có log mà style vẫn mặc định → SCSS chưa load (kiểm tra bước 3).
+
 ## Cấu trúc
 
 - `index.ts` — merge base + export `getDefaults(themeId?)`, `defaults` (= getDefaults()).

package/dist/assets/plugins/viui-conf/defaults/app-bar.ts

@@ -8,7 +8,7 @@ import type { VuetifyOptions } from 'vuetify'
 export const appBarDefaults: NonNullable<VuetifyOptions['defaults']> = {
   VAppBar: {
     density: 'default',
-    elevation: 1,
+    elevation: 0,
     color: 'surface',
   },
 }

package/dist/assets/plugins/viui-conf/defaults/buttons.ts

@@ -8,7 +8,7 @@ import type { VuetifyOptions } from 'vuetify'
 export const buttonDefaults: NonNullable<VuetifyOptions['defaults']> = {
   VBtn: {
     variant: 'elevated',
-    elevation: 1,
+    elevation: 0,
     rounded: 'lg',
     size: 'default',
   },

package/dist/assets/plugins/viui-conf/defaults/by-theme/minimalist-2.ts

@@ -10,6 +10,6 @@ export const minimalist2ThemeDefaults: NonNullable<VuetifyOptions['defaults']> =
     variant: 'outlined',
   },
   VCard: {
-    variant: 'flat',
+    variant: 'elevated',
   },
 }

package/dist/assets/plugins/viui-conf/defaults/cards.ts

@@ -6,7 +6,7 @@ import type { VuetifyOptions } from 'vuetify'
 
 export const cardDefaults: NonNullable<VuetifyOptions['defaults']> = {
   VCard: {
-    elevation: 1,
+    elevation: 0,
     rounded: 'lg',
   },
 }

package/dist/assets/plugins/viui-conf/defaults/expansion-panels.ts

@@ -0,0 +1,16 @@
+/**
+ * iNET Design System — Vuetify defaults cho Expansion Panels (VExpansionPanels, VExpansionPanel).
+ */
+
+import type { VuetifyOptions } from 'vuetify'
+
+export const expansionPanelDefaults: NonNullable<VuetifyOptions['defaults']> = {
+  VExpansionPanels: {
+    variant: 'default',
+    eager: false,
+    flat: false,
+  },
+  VExpansionPanel: {
+    rounded: 'lg',
+  },
+}

package/dist/assets/plugins/viui-conf/defaults/index.ts

@@ -20,6 +20,7 @@ import { mainDefaults } from './main'
 import { chipDefaults } from './chips'
 import { avatarDefaults } from './avatars'
 import { menuDefaults } from './menus'
+import { expansionPanelDefaults } from './expansion-panels'
 import { getThemeDefaults } from './by-theme'
 
 type DefaultsConfig = NonNullable<VuetifyOptions['defaults']>
@@ -59,6 +60,7 @@ const baseDefaults: DefaultsConfig = mergeDefaults(
   chipDefaults,
   avatarDefaults,
   menuDefaults,
+  expansionPanelDefaults,
 )
 
 /**
@@ -89,5 +91,6 @@ export { mainDefaults } from './main'
 export { chipDefaults } from './chips'
 export { avatarDefaults } from './avatars'
 export { menuDefaults } from './menus'
+export { expansionPanelDefaults } from './expansion-panels'
 export { getThemeDefaults, VIUI_DEFAULT_THEME_ID } from './by-theme'
 export type { ViuiThemeId } from './by-theme'

package/dist/assets/plugins/viui-conf/defaults/inputs.ts

@@ -1,6 +1,6 @@
 /**
  * iNET Design System — Vuetify defaults cho form inputs:
- * VTextField, VTextarea, VSelect, VAutocomplete, VCheckbox, VRadioGroup, VSwitch.
+ * VTextField, VTextarea, VSelect, VAutocomplete, VCheckbox, VRadioGroup, VSwitch, VColorInput (labs).
  */
 
 import type { VuetifyOptions } from 'vuetify'
@@ -39,4 +39,14 @@ export const inputDefaults: NonNullable<VuetifyOptions['defaults']> = {
   VSwitch: {
     hideDetails: true,
   },
+  /** Labs — https://vuetifyjs.com/en/components/color-inputs/ */
+  VColorInput: {
+    variant: 'outlined',
+    density: 'default',
+    hideDetails: 'auto',
+    rounded: 'lg',
+    hideActions: true,
+    colorPip: true,
+    pipLocation: 'prepend-inner',
+  },
 }

package/dist/assets/plugins/viui-conf/design-tokens.ts

@@ -0,0 +1,135 @@
+/**
+ * iNET Design System - Design Tokens (Standalone for consumer apps)
+ * Replaces the monorepo re-export version that uses @/ alias paths.
+ * Sync with src/tokens/design-tokens.ts + src/tokens/inet-design-tokens.ts when tokens change.
+ */
+
+export const colorTokens = {
+  brand: {
+    primary: '#0582D4',
+    secondary: '#6c757d',
+    accent: '#E8353C',
+    logo: '#E8353C',
+  },
+  semantic: {
+    success: '#1EE5B8',
+    warning: '#FFB74D',
+    error: '#B91C1C',
+    info: '#2196F3',
+  },
+  surface: {
+    background: '#121212',
+    elevated: '#1e1e1e',
+    card: '#2a2a2a',
+    overlay: 'rgba(0, 0, 0, 0.5)',
+  },
+  border: {
+    default: '#424242',
+    subtle: '#303030',
+    focus: '#0582D4',
+    error: '#B91C1C',
+  },
+  text: {
+    primary: '#e0e0e0',
+    secondary: '#b0b0b0',
+    disabled: '#6c757d',
+    placeholder: '#6c757d',
+    inverse: '#121212',
+    link: '#2196F3',
+  },
+  neutral: {
+    0: '#ffffff',
+    50: '#F5F7FA',
+    100: '#e0e0e0',
+    200: '#b0b0b0',
+    300: '#8c8c8c',
+    400: '#6c757d',
+    500: '#4a4a4a',
+    600: '#424242',
+    700: '#303030',
+    800: '#2a2a2a',
+    900: '#1e1e1e',
+    950: '#121212',
+  },
+  state: {
+    hover: 'rgba(255, 255, 255, 0.08)',
+    focus: 'rgba(5, 130, 212, 0.24)',
+    selected: 'rgba(5, 130, 212, 0.16)',
+    pressed: 'rgba(255, 255, 255, 0.12)',
+    disabled: 'rgba(255, 255, 255, 0.12)',
+  },
+  special: {
+    glowOrange: '#ff7b00',
+    glowPink: '#ff00ff',
+    glowCyan: '#00ffff',
+    gradientStart: '#0582D4',
+    gradientEnd: '#619ee9',
+  },
+} as const
+
+export const shapeTokens = {
+  borderRadius: {
+    none: '0',
+    sm: '4px',
+    base: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    '2xl': '32px',
+    full: '9999px',
+  },
+} as const
+
+export const inetDesignTokens = {
+  design_philosophy_title: 'triết lý thiết kế [Simple – Secure – Stable]',
+  colors: {
+    primary: {
+      light: '#024799', dark: '#619ee9', origin: '#0074BC', 500: '#0582D4',
+      scaleLight: ['#8abdef','#7eb3e7','#72a8e0','#669ed8','#5a93d0','#4c88c8','#3f7cbf','#3170b7','#2363ae','#1256a4','#024799'],
+      scaleDark: ['#619ee9','#5996e1','#528ed9','#4a86d1','#427ec8','#3a76c0','#316eb7','#2965af','#205ca5','#17539c','#0d4992'],
+    },
+    secondary: { light: '#024799', dark: '#5b4964' },
+    accent: {
+      light: '#cc0e0e', dark: '#ed7b7b', origin: '#ED1C24', 500: '#E8353C',
+      scaleLight: ['#f47e7e','#f17575','#ee6c6c','#eb6464','#e85b5b','#e45151','#e04646','#dc3b3b','#d82e2e','#d21f1f','#cc0e0e'],
+      scaleDark: ['#ed7b7b','#e77272','#e16868','#da5f5f','#d45555','#cd4a4a','#c63f3f','#be3333','#b62525','#ac1717','#a10606'],
+    },
+    tech: { 500: '#22D3EE' },
+    neutral: {
+      light: {
+        50: '#F4F7FA', 100: '#E8EEF4', 200: '#D0DAE6', 300: '#B0C2D4', 400: '#8FA3B8',
+        500: '#6D8599', 600: '#4A6278', 700: '#2E4A5C', 800: '#1A2F40', 900: '#0F1E2D',
+      },
+      dark: {
+        50: '#0D1117', 100: '#161B22', 200: '#21262D', 300: '#2D333B', 400: '#3D444D',
+        500: '#545D68', 600: '#768390', 700: '#8B949E', 800: '#B1BAC4', 900: '#E6EDF3',
+      },
+      keyTokens: {
+        light: { bg: '#F4F7FA', border: '#D0DAE6', subtle: '#4A6278', text: '#0F1E2D' },
+        dark: { bg: '#0D1117', border: '#21262D', subtle: '#8B949E', text: '#E6EDF3' },
+      },
+    },
+    success: {
+      light: { default: '#0E9F6E', surface: '#ECFDF5', border: '#A7F3D0', text: '#065F46' },
+      dark: { default: '#34D399', surface: '#0A2A1F', border: '#064E3B', text: '#34D399' },
+    },
+    warning: {
+      light: { default: '#D47B0A', surface: '#FFFBEB', border: '#FDE68A', text: '#92400E' },
+      dark: { default: '#FBBF24', surface: '#2A1F06', border: '#78350F', text: '#FBBF24' },
+    },
+    info: {
+      light: { default: '#8abdef', surface: '#EFF6FF', border: '#BFDBFE', text: '#1E40AF' },
+      dark: { default: '#619ee9', surface: '#0A1628', border: '#1E3A5F', text: '#93C5FD' },
+    },
+    error: {
+      light: { default: '#B91C1C', surface: '#FEF2F2', border: '#FECACA', text: '#991B1B' },
+      dark: { default: '#F87171', surface: '#450A0A', border: '#7F1D1D', text: '#FECACA' },
+    },
+  },
+  typography: {
+    'font-family': "'Be Vietnam Pro', sans-serif",
+    'font-size': { xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem' },
+  },
+  spacing: { xs: '0.25rem', sm: '0.5rem', md: '1rem', lg: '1.5rem' },
+  brand: { 'logo-width': '200px', 'logo-min-height': '38px' },
+} as const

package/dist/assets/plugins/viui-conf/theme-base.ts

@@ -3,7 +3,7 @@
  * Extended theme using design tokens as single source of truth
  */
 
-import { colorTokens } from '@/tokens/design-tokens'
+import { colorTokens } from './design-tokens'
 
 /**
  * Base theme colors shared between light and dark themes

package/dist/assets/plugins/viui-conf/v-dark.ts

@@ -4,10 +4,8 @@
  */
 
 import type { ThemeDefinition } from 'vuetify'
-import ThemeBase from './theme-base.ts'
-import { colorTokens } from '@/tokens/design-tokens'
-import { shapeTokens } from '@/tokens/design-tokens'
-import inetDesignTokens from '@/tokens/inet-design-tokens'
+import ThemeBase from './theme-base'
+import { colorTokens, shapeTokens, inetDesignTokens } from './design-tokens'
 
 const DarkTheme: ThemeDefinition = {
   dark: true,
@@ -27,7 +25,7 @@ const DarkTheme: ThemeDefinition = {
     'outline-variant': colorTokens.border.subtle,
   },
   variables: {
-    'border-opacity': 0.2,
+    'border-opacity': 0.6,
     'high-emphasis-opacity': 0.87,
     'medium-emphasis-opacity': 0.60,
     'disabled-opacity': 0.38,

package/dist/assets/plugins/viui-conf/v-light.ts

@@ -4,10 +4,8 @@
  */
 
 import type { ThemeDefinition } from 'vuetify'
-import ThemeBase from './theme-base.ts'
-import { colorTokens } from '@/tokens/design-tokens'
-import { shapeTokens } from '@/tokens/design-tokens'
-import inetDesignTokens from '@/tokens/inet-design-tokens'
+import ThemeBase from './theme-base'
+import { colorTokens, shapeTokens, inetDesignTokens } from './design-tokens'
 
 const LightTheme: ThemeDefinition = {
   dark: false,
@@ -30,7 +28,7 @@ const LightTheme: ThemeDefinition = {
     accent: colorTokens.brand.accent,
   },
   variables: {
-    'border-opacity': 0.12,
+    'border-opacity': 0.35,
     'high-emphasis-opacity': 0.87,
     'medium-emphasis-opacity': 0.60,
     'disabled-opacity': 0.38,

package/dist/assets/plugins/vuetify.ts

@@ -0,0 +1,36 @@
+// src/plugins/vuetify.ts — Auto-generated by viui-cli init
+// Modify freely; viui sync will NOT overwrite this file.
+import 'vuetify/styles'
+import '@mdi/font/css/materialdesignicons.css'
+import { createVuetify } from 'vuetify'
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import LightTheme from './viui-conf/v-light'
+import DarkTheme from './viui-conf/v-dark'
+import { getDefaults, VIUI_DEFAULT_THEME_ID } from './viui-conf/defaults/index'
+import { applyViuiThemeBodyClass } from './viui-conf/apply-theme-body'
+
+/** Read theme from env, fallback to default (minimalist-2). */
+const themeId = import.meta.env.VITE_VIUI_THEME ?? VIUI_DEFAULT_THEME_ID
+
+/** Re-export for runtime theme switching (e.g. from a settings page). */
+export { applyViuiThemeBodyClass }
+
+export const vuetify = createVuetify({
+  components,
+  directives,
+  defaults: getDefaults(themeId),
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: { mdi },
+  },
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light: LightTheme,
+      dark: DarkTheme,
+    },
+  },
+})