@nons-dev/uikit 0.1.7 → 0.1.9

package/dist/src/index.d.ts

@@ -1,7 +1,7 @@
 export { registry } from '../core/registry/registry';
 export { bootstrapRegistry } from '../core/registry/bootstrap';
-export { loadConfig, getConfig, getDirection, getDefaultLocale, getSupportedLocales, getFontFamily } from '../core/config';
-export type { NonsConfig } from '../core/config/types';
+export { loadConfig, getConfig, getDirection, getDefaultLocale, getSupportedLocales, getFontFamily, generateFullCSS } from '../core/config';
+export type { NonsConfig, RawConfig } from '../core/config/types';
 export { runtimeContext, hasPermission, setUILocale, setUIDirection } from '../core/runtime';
 export { validateSchema, normalizeSchema } from '../core/schema-engine';
 export type { SchemaNode } from '../core/types/schema';

package/locales/en.json

@@ -322,5 +322,12 @@
     "demo_subtitle": "This card is fully rendered from a JSON specification and has real functionality.",
     "input_placeholder": "Schema input...",
     "submit": "Submit from Schema"
+  },
+  "sidepanel": {
+    "close": "Close",
+    "cancel": "Cancel",
+    "save": "Save",
+    "minimize": "Minimize",
+    "maximize": "Maximize"
   }
 }

package/locales/fa.json

@@ -322,5 +322,12 @@
     "demo_subtitle": "این کادر به طور کامل از یک مشخصات JSON رندر شده است و عملکرد واقعی دارد.",
     "input_placeholder": "ورودی اسکیما...",
     "submit": "ثبت از اسکیما"
+  },
+  "sidepanel": {
+    "close": "بستن",
+    "cancel": "انصراف",
+    "save": "ذخیره",
+    "minimize": "کوچک‌نمایی",
+    "maximize": "بزرگ‌نمایی"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nons-dev/uikit",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "license": "BUSL-1.1",
   "type": "module",
   "main": "./dist/index.js",
@@ -19,9 +19,11 @@
   },
   "files": [
     "dist",
+    "core/config",
     "generated/components.json",
     "locales",
     "scripts/cli.mjs",
+    "scripts/vite-plugin-nons-config.ts",
     "readme.md"
   ],
   "exports": {
@@ -33,6 +35,11 @@
     "./style.css": {
       "import": "./dist/index.css",
       "default": "./dist/index.css"
+    },
+    "./plugin": {
+      "types": "./scripts/vite-plugin-nons-config.ts",
+      "import": "./scripts/vite-plugin-nons-config.ts",
+      "default": "./scripts/vite-plugin-nons-config.ts"
     }
   },
   "scripts": {

package/readme.md

@@ -2,50 +2,55 @@
 
 Schema-driven UI component library for the Nons platform — Vue 3, TypeScript, token-based design system.
 
-## Architecture
+## Installation
 
-```
-nons.config.yaml       Single source of truth for theme, tokens, locale, direction, font
-core/                  Schema types, component registry, schema renderer, runtime context
-ui/                    Vue 3 components (primitives, composites, layouts, sections)
-generated/             Auto-generated files from nons.config.yaml (tokens.css, theme.css, config.ts, locales/)
-design-system/         CSS reset, global styles (imports generated/ tokens)
-playground/            Demo/explorer app for component development and testing
-plugins/               i18n, direction, permissions
-adapters/              Data provider layer (mock API, storage abstraction)
-locales/               Persian (fa) and English (en) translation YAML files
-scripts/               CLI tools (generate, init, component discovery)
+```bash
+npm install @nons-dev/uikit
 ```
 
 ## Quick Start
 
 ```bash
-# Install
-npm install @nons-dev/uikit
-
-# Generate config file in your project root
+# Generate config in your project root
 npx @nons-dev/uikit init
 
-# Edit nons.config.yaml to customize theme, tokens, locale, direction, font
+# Edit nons.config.yaml
+```
 
-# Use in your app
-import { bootstrapRegistry, loadConfig } from '@nons-dev/uikit'
+```ts
+import { bootstrapRegistry } from '@nons-dev/uikit'
 import '@nons-dev/uikit/style.css'
 ```
 
-### Development (UI Kit only)
+For token/theme/font customization, use the Nons Vite plugin in your project:
 
-```bash
-npm install
-npm run dev           # Start Vite dev server (playground app)
-npm run build         # Generate tokens + type-check + library build
-npm run generate      # Regenerate CSS/theme from nons.config.yaml
-npm run preview       # Preview production playground build
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { nonsConfigPlugin } from '@nons-dev/uikit/plugin'
+
+export default defineConfig({
+  plugins: [vue(), nonsConfigPlugin()],
+})
+```
+
+## Architecture
+
+```
+nons.config.yaml       Single source of truth for theme, tokens, locale, direction, font
+core/                  Schema types, component registry, schema renderer, runtime context
+ui/                    Vue 3 components (primitives, composites, layouts, sections)
+design-system/         CSS reset, global styles, token defaults (shipped in dist/)
+plugins/               i18n, direction, permissions
+adapters/              Data provider layer (mock API, storage abstraction)
+locales/               Persian (fa) and English (en) translation JSON files
+scripts/               CLI tool (nons) and Vite plugin
 ```
 
 ## Config System
 
-The `nons.config.yaml` file at your project root is the **single source of truth**:
+`nons.config.yaml` at your project root is the **single source of truth**:
 
 ```yaml
 theme:
@@ -72,13 +77,11 @@ tokens:
     light:
       --color-primary: '#9FE870'
       --color-danger: '#F31260'
-      # ... override any CSS custom property
     dark:
       --color-primary: '#9FE870'
       --color-danger: '#f31260'
   spacing:
     --space-4: 16px
-  # ... typography, radius, shadows, z-index, opacity, button, alert
 
 theme-mappings:
   light:
@@ -89,61 +92,70 @@ theme-mappings:
     --text-primary: var(--color-text-default)
 ```
 
-Run `npx @nons-dev/uikit generate` to regenerate CSS variables from your config.
-
 ## CLI Commands
 
 ```bash
-npx @nons-dev/uikit init              # Create nons.config.yaml in project root
-npx @nons-dev/uikit generate          # Generate CSS from nons.config.yaml
+npx @nons-dev/uikit init              # Create nons.config.yaml + locales/ in project root
+npx @nons-dev/uikit validate          # Validate nons.config.yaml structure
 npx @nons-dev/uikit list              # List all components
 npx @nons-dev/uikit show <name>       # Show component details (props, events, slots)
 npx @nons-dev/uikit schema <name>     # Show schema JSON for a component
 npx @nons-dev/uikit search <query>    # Search components by name or description
 ```
 
-## Customizing Colors & Tokens
+## Customizing Tokens & Theme
 
-Edit `nons.config.yaml` in your project root, then regenerate:
-
-```bash
-npx @nons-dev/uikit generate
-```
+The default design tokens are built into `dist/index.css`. To override them:
 
-This produces `generated/tokens.css` (color schemes + all tokens) and `generated/theme.css` (semantic theme mappings). Import them in your app after the uikit CSS:
+1. Edit `nons.config.yaml` with your custom token values
+2. Use the **Nons Vite plugin** to generate custom CSS at build time:
 
 ```ts
-import '@nons-dev/uikit/style.css'
-import './generated/tokens.css'
-import './generated/theme.css'
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { nonsConfigPlugin } from '@nons-dev/uikit/plugin'
+
+export default defineConfig({
+  plugins: [vue(), nonsConfigPlugin()],
+})
 ```
 
-The generated CSS uses `:root` / `[data-theme="dark"]` blocks — your custom values override the defaults with the same specificity.
+The plugin creates virtual modules (`virtual:nons-config` for JS access, `virtual:nons-config:style` for CSS overrides). Custom token values are injected with the same specificity as defaults.
 
-All visual values in the uikit reference CSS custom properties (`var(--color-primary)`), so changing a token in YAML propagates to every component.
+All visual values in the uikit reference CSS custom properties (`var(--color-primary)`), so changing a token propagates to every component.
 
-## Documentation
+## Development (UI Kit only)
 
-| Resource | Description |
-|----------|-------------|
-| [Style Guide](docs/STYLE-GUIDE.md) | Token-driven design, layout isolation, flat UI, component conventions |
-| [Component Contracts](docs/component-contracts/) | Single source of truth for all component APIs, schemas, and states |
+```bash
+npm install
+npm run dev           # Start Vite dev server (playground app)
+npm run build         # Type-check + library build + copy fonts
+npm run preview       # Preview production playground build
+```
 
 ## Key Conventions
 
-- **Zero-hardcoding** — all visual values via CSS custom properties (`var(--...)`)
+- **Zero-hardcoding** — all visual values via CSS custom properties
 - **Config-driven** — theme, tokens, direction, locale all from `nons.config.yaml`
 - **RTL-first** — `<html dir="rtl">`, logical properties (`inset-inline-start`, `margin-inline`)
-- **Schema-driven** — every component has a registry key, contract, schema example, and auto-generated metadata (53 components parsed from source)
+- **Schema-driven** — every component has a registry key, contract, and metadata (53 components)
 - **modelValue** — all form inputs use `modelValue` prop + `update:modelValue` emit
 - **No external margins** — component spacing via parent layout `gap`
-- **Flat UI** — no elevation shadows; separation via themed borders (`--border-primary`)
+- **Flat UI** — no elevation shadows; separation via themed borders
 - **TypeScript strict** — `strict: true`, `noUncheckedIndexedAccess`, `noUnusedLocals`
 
 ## Dependencies
 
-- Vue 3.5 (Composition API, `<script setup lang="ts">`)
+- Vue 3.5 (Composition API)
 - `@lucide/vue` icons
 - Tabler Icons (CDN)
 - Plain CSS only (no SCSS/Sass)
-- Font files bundled in `dist/font/` (IRANSansX, Satoshi) — loaded via `@font-face` in generated CSS
+- Font files bundled in `dist/font/` (IRANSansX, Satoshi)
+
+## Documentation
+
+| Resource | Description |
+|----------|-------------|
+| [Style Guide](docs/STYLE-GUIDE.md) | Token-driven design, layout isolation, flat UI, component conventions |
+| [Component Contracts](docs/component-contracts/) | Single source of truth for all component APIs, schemas, and states |

package/scripts/vite-plugin-nons-config.ts

@@ -0,0 +1,76 @@
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import * as yaml from 'js-yaml'
+import type { Plugin, ResolvedConfig } from 'vite'
+import type { RawConfig } from '../core/config/types'
+import { generateFullCSS } from '../core/config/parser'
+
+const CONFIG_VIRTUAL = 'virtual:nons-config'
+const CONFIG_CSS_VIRTUAL = 'virtual:nons-config:style'
+const RESOLVED_CONFIG_VIRTUAL = '\0' + CONFIG_VIRTUAL
+const RESOLVED_CONFIG_CSS_VIRTUAL = '\0' + CONFIG_CSS_VIRTUAL
+
+let loadedConfig: RawConfig | null = null
+
+export function loadConfigFromYaml(filePath: string): RawConfig {
+  const raw = fs.readFileSync(filePath, 'utf-8')
+  const config = yaml.load(raw) as RawConfig
+  loadedConfig = config
+  return config
+}
+
+export function getLoadedConfig(): RawConfig | null {
+  return loadedConfig
+}
+
+export function nonsConfigPlugin(configPath?: string): Plugin {
+  const resolvedPath = configPath || path.resolve(process.cwd(), 'nons.config.yaml')
+
+  return {
+    name: 'nons-config',
+
+    configResolved(_config: ResolvedConfig) {
+      if (fs.existsSync(resolvedPath)) {
+        loadConfigFromYaml(resolvedPath)
+      }
+    },
+
+    resolveId(id: string) {
+      if (id === CONFIG_VIRTUAL) return RESOLVED_CONFIG_VIRTUAL
+      if (id === CONFIG_CSS_VIRTUAL) return RESOLVED_CONFIG_CSS_VIRTUAL
+      return null
+    },
+
+    load(id: string) {
+      if (id === RESOLVED_CONFIG_VIRTUAL) {
+        if (!loadedConfig) {
+          this.error('nons.config.yaml not found at ' + resolvedPath)
+          return
+        }
+        const runtimeConfig = {
+          theme: loadedConfig.theme,
+          brand: loadedConfig.brand,
+          direction: loadedConfig.direction,
+          locale: loadedConfig.locale,
+          font: {
+            fa: loadedConfig.font?.fa,
+            en: loadedConfig.font?.en,
+          },
+        }
+        return `export const nonsConfig = ${JSON.stringify(runtimeConfig, null, 2)}`
+      }
+
+      if (id === RESOLVED_CONFIG_CSS_VIRTUAL) {
+        if (!loadedConfig) {
+          this.error('nons.config.yaml not found at ' + resolvedPath)
+          return
+        }
+        return generateFullCSS(loadedConfig)
+      }
+
+      return null
+    },
+  }
+}
+
+