@nice2dev/design-tokens 1.3.17 → 1.4.0

package/dist/cli/index.js

@@ -1,18 +1,15 @@
 #!/usr/bin/env node
-import {
-  createGenerator
-} from "../chunk-PF2R7I6P.js";
 import {
   __commonJS,
   __require
-} from "../chunk-6OYMWYZS.js";
+} from "./chunk-6OYMWYZS.js";
 
 // package.json
 var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@nice2dev/design-tokens",
-      version: "1.3.17",
+      version: "1.4.0",
       description: "W3C Design Tokens for Nice2Dev UI with CLI generator",
       type: "module",
       main: "./dist/index.cjs",
@@ -36,7 +33,7 @@ var require_package = __commonJS({
         "tokens"
       ],
       scripts: {
-        build: "tsup src/index.ts src/cli/index.ts --format esm,cjs --dts --clean",
+        build: "tsup src/index.ts --format esm,cjs --dts --clean && tsup src/cli/index.ts --format esm --dts --out-dir dist/cli",
         dev: "tsup src/index.ts src/cli/index.ts --format esm,cjs --dts --watch",
         generate: "node dist/cli/index.js generate",
         test: "vitest run --passWithNoTests",
@@ -73,9 +70,917 @@ var require_package = __commonJS({
 });
 
 // src/cli/index.ts
-import * as fs from "fs";
-import * as path from "path";
+import * as fs3 from "fs";
+import * as path2 from "path";
 import { Command } from "commander";
+
+// src/generator.ts
+import * as fs2 from "fs";
+import * as path from "path";
+
+// src/parser.ts
+import * as fs from "fs";
+function isDesignToken(obj) {
+  return typeof obj === "object" && obj !== null && "$value" in obj && obj.$value !== void 0;
+}
+function isTokenGroup(obj) {
+  if (typeof obj !== "object" || obj === null) {
+    return false;
+  }
+  if (isDesignToken(obj)) {
+    return false;
+  }
+  return Object.keys(obj).some((key) => !key.startsWith("$"));
+}
+function isReference(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+  return /^\{[\w.]+\}$/.test(value);
+}
+function extractReferencePath(ref) {
+  const match = ref.match(/^\{([\w.]+)\}$/);
+  if (!match) {
+    throw new Error(`Invalid reference: ${ref}`);
+  }
+  return match[1].split(".");
+}
+function pathToCssVariable(path3, prefix = "nice") {
+  return `--${prefix}-${path3.join("-")}`;
+}
+function pathToString(path3) {
+  return path3.join(".");
+}
+function parseTokenFile(filePath) {
+  const content = fs.readFileSync(filePath, "utf-8");
+  const parsed = JSON.parse(content);
+  return parsed;
+}
+function parseTokenFiles(filePaths) {
+  const merged = {};
+  for (const filePath of filePaths) {
+    const tokens = parseTokenFile(filePath);
+    mergeTokenFiles(merged, tokens);
+  }
+  return merged;
+}
+function mergeTokenFiles(target, source) {
+  for (const [key, value] of Object.entries(source)) {
+    if (key.startsWith("$")) {
+      if (!(key in target)) {
+        target[key] = value;
+      }
+    } else if (typeof value === "object" && value !== null) {
+      if (!(key in target)) {
+        target[key] = {};
+      }
+      const targetValue = target[key];
+      if (typeof targetValue === "object" && targetValue !== null) {
+        mergeTokenFiles(targetValue, value);
+      }
+    } else {
+      target[key] = value;
+    }
+  }
+}
+function flattenTokens(tokenFile, prefix = [], inheritedType) {
+  const tokens = [];
+  const currentType = tokenFile.$type ?? inheritedType;
+  for (const [key, value] of Object.entries(tokenFile)) {
+    if (key.startsWith("$")) {
+      continue;
+    }
+    const currentPath = [...prefix, key];
+    if (isDesignToken(value)) {
+      const token = value;
+      const tokenType = token.$type ?? currentType;
+      const references = [];
+      findReferences(token.$value, references);
+      tokens.push({
+        path: currentPath,
+        name: key,
+        value: token.$value,
+        resolvedValue: "",
+        // Will be populated by resolver
+        type: tokenType,
+        description: token.$description,
+        cssVariable: pathToCssVariable(currentPath),
+        references: references.length > 0 ? references : void 0
+      });
+    } else if (isTokenGroup(value)) {
+      const group = value;
+      const groupType = group.$type ?? currentType;
+      tokens.push(...flattenTokens(group, currentPath, groupType));
+    }
+  }
+  return tokens;
+}
+function findReferences(value, refs) {
+  if (typeof value === "string" && isReference(value)) {
+    refs.push(extractReferencePath(value).join("."));
+  } else if (typeof value === "object" && value !== null) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        findReferences(item, refs);
+      }
+    } else {
+      for (const v of Object.values(value)) {
+        findReferences(v, refs);
+      }
+    }
+  }
+}
+function createTokenCollection(tokens) {
+  const byPath = /* @__PURE__ */ new Map();
+  const byName = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    const pathStr = pathToString(token.path);
+    byPath.set(pathStr, token);
+    const existing = byName.get(token.name);
+    if (!existing || token.path.length > existing.path.length) {
+      byName.set(token.name, token);
+    }
+  }
+  return { tokens, byPath, byName };
+}
+function getCategories(collection) {
+  const categories = /* @__PURE__ */ new Set();
+  for (const token of collection.tokens) {
+    if (token.path.length > 0) {
+      categories.add(token.path[0]);
+    }
+  }
+  return Array.from(categories);
+}
+
+// src/resolver.ts
+var MAX_RESOLUTION_DEPTH = 10;
+function resolveTokens(collection) {
+  const resolvedTokens = collection.tokens.map((token) => {
+    const resolved = { ...token };
+    resolved.resolvedValue = resolveTokenValue(token.value, collection, 0);
+    return resolved;
+  });
+  return {
+    tokens: resolvedTokens,
+    byPath: new Map(resolvedTokens.map((t) => [pathToString(t.path), t])),
+    byName: new Map(resolvedTokens.map((t) => [t.name, t]))
+  };
+}
+function resolveTokenValue(value, collection, depth) {
+  if (depth > MAX_RESOLUTION_DEPTH) {
+    throw new Error(`Maximum reference depth exceeded while resolving token`);
+  }
+  if (typeof value === "string") {
+    if (isReference(value)) {
+      const refPath = extractReferencePath(value);
+      const refPathStr = pathToString(refPath);
+      const refToken = collection.byPath.get(refPathStr);
+      if (!refToken) {
+        console.warn(`Reference not found: ${value}`);
+        return value;
+      }
+      return resolveTokenValue(refToken.value, collection, depth + 1);
+    }
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map((v) => {
+      if (typeof v === "string") {
+        return v.includes(" ") ? `"${v}"` : v;
+      }
+      return String(v);
+    }).join(", ");
+  }
+  if (isShadowValue(value)) {
+    return resolveShadowValue(value, collection, depth);
+  }
+  if (Array.isArray(value) && value.length > 0 && isShadowValue(value[0])) {
+    return value.map((s) => resolveShadowValue(s, collection, depth)).join(", ");
+  }
+  if (isTypographyValue(value)) {
+    return resolveTypographyValue(value, collection, depth);
+  }
+  if (isBorderValue(value)) {
+    return resolveBorderValue(value, collection, depth);
+  }
+  return JSON.stringify(value);
+}
+function isShadowValue(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return "offsetX" in value && "offsetY" in value && "blur" in value;
+}
+function resolveShadowValue(shadow, collection, depth) {
+  const offsetX = resolveTokenValue(shadow.offsetX, collection, depth);
+  const offsetY = resolveTokenValue(shadow.offsetY, collection, depth);
+  const blur = resolveTokenValue(shadow.blur, collection, depth);
+  const spread = resolveTokenValue(shadow.spread, collection, depth);
+  const color = resolveTokenValue(shadow.color, collection, depth);
+  const inset = shadow.inset ? "inset " : "";
+  return `${inset}${offsetX} ${offsetY} ${blur} ${spread} ${color}`;
+}
+function isTypographyValue(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return "fontFamily" in value && "fontSize" in value;
+}
+function resolveTypographyValue(typography, collection, depth) {
+  const fontFamily = resolveTokenValue(typography.fontFamily, collection, depth);
+  const fontSize = resolveTokenValue(typography.fontSize, collection, depth);
+  const fontWeight = resolveTokenValue(typography.fontWeight, collection, depth);
+  const lineHeight = typography.lineHeight ? resolveTokenValue(typography.lineHeight, collection, depth) : "normal";
+  const fontStyle = typography.fontStyle || "normal";
+  return `${fontStyle} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
+}
+function isBorderValue(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return "color" in value && "width" in value && "style" in value;
+}
+function resolveBorderValue(border, collection, depth) {
+  const width = resolveTokenValue(border.width, collection, depth);
+  const style = resolveTokenValue(border.style, collection, depth);
+  const color = resolveTokenValue(border.color, collection, depth);
+  return `${width} ${style} ${color}`;
+}
+
+// src/transforms.ts
+function transformToCss(collection, prefix = "nice") {
+  const lines = [];
+  for (const token of collection.tokens) {
+    const varName = `--${prefix}-${token.path.join("-")}`;
+    lines.push(`  ${varName}: ${token.resolvedValue};`);
+  }
+  return `:root {
+${lines.join("\n")}
+}`;
+}
+function transformToScss(collection, prefix = "nice") {
+  const lines = [];
+  for (const token of collection.tokens) {
+    const varName = `$${prefix}-${token.path.join("-")}`;
+    lines.push(`${varName}: ${token.resolvedValue};`);
+  }
+  return lines.join("\n");
+}
+function transformToJs(collection, variableName = "tokens") {
+  const obj = buildTokenObject(collection);
+  return `export const ${variableName} = ${JSON.stringify(obj, null, 2)};`;
+}
+function transformToTs(collection, variableName = "tokens") {
+  const obj = buildTokenObject(collection);
+  const types = generateTokenTypes(collection);
+  return `${types}
+
+export const ${variableName}: Tokens = ${JSON.stringify(obj, null, 2)};`;
+}
+function buildTokenObject(collection) {
+  const result = {};
+  for (const token of collection.tokens) {
+    let current = result;
+    for (let i = 0; i < token.path.length - 1; i++) {
+      const key = token.path[i];
+      if (!(key in current)) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const lastKey = token.path[token.path.length - 1];
+    current[lastKey] = token.resolvedValue;
+  }
+  return result;
+}
+function generateTokenTypes(collection) {
+  const typeObj = buildTypeStructure(collection);
+  return `interface Tokens ${formatTypeStructure(typeObj)}`;
+}
+function buildTypeStructure(collection) {
+  const result = {};
+  for (const token of collection.tokens) {
+    let current = result;
+    for (let i = 0; i < token.path.length - 1; i++) {
+      const key = token.path[i];
+      if (!(key in current)) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const lastKey = token.path[token.path.length - 1];
+    current[lastKey] = "string";
+  }
+  return result;
+}
+function formatTypeStructure(obj, indent = 0) {
+  const spaces = "  ".repeat(indent);
+  const lines = ["{"];
+  for (const [key, value] of Object.entries(obj)) {
+    const safeKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : `'${key}'`;
+    if (typeof value === "string") {
+      lines.push(`${spaces}  ${safeKey}: ${value};`);
+    } else {
+      lines.push(
+        `${spaces}  ${safeKey}: ${formatTypeStructure(value, indent + 1)};`
+      );
+    }
+  }
+  lines.push(`${spaces}}`);
+  return lines.join("\n");
+}
+function transformToTailwind(collection) {
+  const colors = {};
+  const spacing = {};
+  const fontSize = {};
+  const fontFamily = {};
+  const borderRadius = {};
+  const boxShadow = {};
+  for (const token of collection.tokens) {
+    const path3 = token.path;
+    const value = token.resolvedValue;
+    if (path3[0] === "color" || path3[0] === "colors") {
+      setNestedValue(colors, path3.slice(1), value);
+    } else if (path3[0] === "spacing") {
+      spacing[path3.slice(1).join("-")] = value;
+    } else if (path3[0] === "typography" && path3[1] === "fontSize") {
+      fontSize[path3[2]] = value;
+    } else if (path3[0] === "typography" && path3[1] === "fontFamily") {
+      fontFamily[path3[2]] = value.split(",").map((f) => f.trim());
+    } else if (path3[0] === "effects" && path3[1] === "radius") {
+      borderRadius[path3[2]] = value;
+    } else if (path3[0] === "effects" && path3[1] === "shadow") {
+      boxShadow[path3[2]] = value;
+    }
+  }
+  const config = {
+    theme: {
+      extend: {
+        colors,
+        spacing,
+        fontSize,
+        fontFamily,
+        borderRadius,
+        boxShadow
+      }
+    }
+  };
+  return `module.exports = ${JSON.stringify(config, null, 2)};`;
+}
+function setNestedValue(obj, path3, value) {
+  let current = obj;
+  for (let i = 0; i < path3.length - 1; i++) {
+    const key = path3[i];
+    if (!(key in current)) {
+      current[key] = {};
+    }
+    current = current[key];
+  }
+  current[path3[path3.length - 1]] = value;
+}
+function applyThemeOverrides(baseCollection, overrides) {
+  const mergedTokens = [...baseCollection.tokens];
+  for (const override of overrides.tokens) {
+    const pathStr = pathToString(override.path);
+    const existingIndex = mergedTokens.findIndex((t) => pathToString(t.path) === pathStr);
+    if (existingIndex >= 0) {
+      mergedTokens[existingIndex] = { ...mergedTokens[existingIndex], ...override };
+    } else {
+      mergedTokens.push(override);
+    }
+  }
+  return {
+    tokens: mergedTokens,
+    byPath: new Map(mergedTokens.map((t) => [pathToString(t.path), t])),
+    byName: new Map(mergedTokens.map((t) => [t.name, t]))
+  };
+}
+
+// src/themes.ts
+var defaultThemes = {
+  light: {
+    name: "light",
+    displayName: "Light",
+    mode: "light",
+    selector: ':root, [data-theme="light"]'
+  },
+  dark: {
+    name: "dark",
+    displayName: "Dark",
+    mode: "dark",
+    selector: '[data-theme="dark"]',
+    mediaQuery: "(prefers-color-scheme: dark)",
+    extends: "light"
+  },
+  "high-contrast": {
+    name: "high-contrast",
+    displayName: "High Contrast",
+    mode: "high-contrast",
+    selector: '[data-theme="high-contrast"]',
+    mediaQuery: "(prefers-contrast: more)",
+    extends: "light"
+  },
+  "high-contrast-dark": {
+    name: "high-contrast-dark",
+    displayName: "High Contrast Dark",
+    mode: "high-contrast-dark",
+    selector: '[data-theme="high-contrast-dark"]',
+    extends: "dark"
+  },
+  dim: {
+    name: "dim",
+    displayName: "Dim",
+    mode: "dim",
+    selector: '[data-theme="dim"]',
+    extends: "dark"
+  }
+};
+function createTheme(name, baseTokens, overrideTokens, config) {
+  const tokens = overrideTokens ? applyThemeOverrides(baseTokens, overrideTokens) : baseTokens;
+  const resolvedTokens = resolveTokens(tokens);
+  const themeConfig = { ...defaultThemes.light, ...config, name };
+  return {
+    name,
+    tokens: resolvedTokens,
+    extends: themeConfig.extends,
+    selector: themeConfig.selector,
+    mediaQuery: themeConfig.mediaQuery
+  };
+}
+function generateThemesCss(themes, prefix = "nice") {
+  const sections = [];
+  for (const theme of themes) {
+    const vars = generateThemeVariables(theme, prefix);
+    sections.push(`${theme.selector} {
+${vars}
+}`);
+    if (theme.mediaQuery) {
+      sections.push(
+        `@media ${theme.mediaQuery} {
+  :root {
+${vars.split("\n").map((l) => `  ${l}`).join("\n")}
+  }
+}`
+      );
+    }
+  }
+  return sections.join("\n\n");
+}
+function generateThemeVariables(theme, prefix) {
+  const lines = [];
+  for (const token of theme.tokens.tokens) {
+    const varName = `--${prefix}-${token.path.join("-")}`;
+    lines.push(`  ${varName}: ${token.resolvedValue};`);
+  }
+  return lines.join("\n");
+}
+function generateThemeSwitcher() {
+  return `
+/**
+ * Nice2Dev Theme Switcher
+ * Auto-generated by @nice2dev/design-tokens
+ */
+
+const THEME_KEY = 'nice-theme';
+const THEMES = ['light', 'dark', 'high-contrast', 'high-contrast-dark', 'dim'];
+
+/**
+ * Get current theme
+ */
+function getTheme() {
+  return document.documentElement.getAttribute('data-theme') || 'light';
+}
+
+/**
+ * Set theme
+ */
+function setTheme(theme) {
+  if (!THEMES.includes(theme)) {
+    console.warn(\`Invalid theme: \${theme}\`);
+    return;
+  }
+  
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem(THEME_KEY, theme);
+  
+  // Dispatch event
+  window.dispatchEvent(new CustomEvent('nice-theme-change', { detail: { theme } }));
+}
+
+/**
+ * Toggle between light and dark
+ */
+function toggleTheme() {
+  const current = getTheme();
+  const next = current === 'dark' ? 'light' : 'dark';
+  setTheme(next);
+  return next;
+}
+
+/**
+ * Use system preference
+ */
+function useSystemTheme() {
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersHighContrast = window.matchMedia('(prefers-contrast: more)').matches;
+  
+  let theme = 'light';
+  if (prefersDark && prefersHighContrast) {
+    theme = 'high-contrast-dark';
+  } else if (prefersDark) {
+    theme = 'dark';
+  } else if (prefersHighContrast) {
+    theme = 'high-contrast';
+  }
+  
+  setTheme(theme);
+  return theme;
+}
+
+/**
+ * Initialize theme on page load
+ */
+function initTheme() {
+  const saved = localStorage.getItem(THEME_KEY);
+  
+  if (saved && THEMES.includes(saved)) {
+    setTheme(saved);
+  } else {
+    useSystemTheme();
+  }
+  
+  // Listen for system changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (!localStorage.getItem(THEME_KEY)) {
+      useSystemTheme();
+    }
+  });
+}
+
+// Auto-init
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+  } else {
+    initTheme();
+  }
+}
+
+export { getTheme, setTheme, toggleTheme, useSystemTheme, initTheme, THEMES };
+`.trim();
+}
+function generateReactThemeContext() {
+  return `
+'use client';
+
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+
+type Theme = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark' | 'dim';
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  useSystemTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+const THEME_KEY = 'nice-theme';
+const THEMES: Theme[] = ['light', 'dark', 'high-contrast', 'high-contrast-dark', 'dim'];
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+}
+
+export function ThemeProvider({ children, defaultTheme = 'light' }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(defaultTheme);
+
+  useEffect(() => {
+    const saved = localStorage.getItem(THEME_KEY) as Theme | null;
+    if (saved && THEMES.includes(saved)) {
+      setThemeState(saved);
+      document.documentElement.setAttribute('data-theme', saved);
+    } else {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const initial = prefersDark ? 'dark' : 'light';
+      setThemeState(initial);
+      document.documentElement.setAttribute('data-theme', initial);
+    }
+  }, []);
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    setThemeState(newTheme);
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem(THEME_KEY, newTheme);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [theme, setTheme]);
+
+  const useSystemTheme = useCallback(() => {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prefersHighContrast = window.matchMedia('(prefers-contrast: more)').matches;
+    
+    let systemTheme: Theme = 'light';
+    if (prefersDark && prefersHighContrast) {
+      systemTheme = 'high-contrast-dark';
+    } else if (prefersDark) {
+      systemTheme = 'dark';
+    } else if (prefersHighContrast) {
+      systemTheme = 'high-contrast';
+    }
+    
+    setTheme(systemTheme);
+    localStorage.removeItem(THEME_KEY);
+  }, [setTheme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme, useSystemTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export { THEMES };
+export type { Theme };
+`.trim();
+}
+
+// src/generator.ts
+var defaultOptions = {
+  formats: ["css"],
+  outputDir: "./dist",
+  prefix: "nice",
+  includePrimitives: true,
+  separateFiles: false,
+  includeDarkMode: true,
+  includeComponents: true
+};
+var TokenGenerator = class {
+  constructor(options = {}) {
+    this.plugins = [];
+    this.collection = null;
+    this.themes = [];
+    this.options = { ...defaultOptions, ...options };
+  }
+  /**
+   * Add plugin
+   */
+  use(plugin) {
+    this.plugins.push(plugin);
+    return this;
+  }
+  /**
+   * Load tokens from files
+   */
+  load(files) {
+    const tokenFile = parseTokenFiles(files);
+    let processedTokens = [tokenFile];
+    for (const plugin of this.plugins) {
+      if (plugin.beforeResolve) {
+        processedTokens = plugin.beforeResolve(processedTokens);
+      }
+    }
+    const flatTokens = flattenTokens(processedTokens[0]);
+    let collection = createTokenCollection(flatTokens);
+    collection = resolveTokens(collection);
+    for (const plugin of this.plugins) {
+      if (plugin.afterResolve) {
+        collection = plugin.afterResolve(collection);
+      }
+    }
+    this.collection = collection;
+    return this;
+  }
+  /**
+   * Load tokens from directory
+   */
+  loadDirectory(dir, pattern = "**/*.json") {
+    const glob = __require("fast-glob");
+    const files = glob.sync(path.join(dir, pattern));
+    return this.load(files);
+  }
+  /**
+   * Add theme
+   */
+  addTheme(name, overrideTokens) {
+    if (!this.collection) {
+      throw new Error("Load tokens first before adding themes");
+    }
+    const theme = createTheme(name, this.collection, overrideTokens);
+    this.themes.push(theme);
+    return this;
+  }
+  /**
+   * Generate output files
+   */
+  async generate() {
+    if (!this.collection) {
+      throw new Error("No tokens loaded");
+    }
+    fs2.mkdirSync(this.options.outputDir, { recursive: true });
+    for (const format of this.options.formats) {
+      await this.generateFormat(format);
+    }
+    if (this.themes.length > 0) {
+      await this.generateThemeFiles();
+    }
+  }
+  /**
+   * Generate single format
+   */
+  async generateFormat(format) {
+    if (!this.collection) {
+      return;
+    }
+    for (const plugin of this.plugins) {
+      if (plugin.customFormat) {
+        const output = plugin.customFormat(this.collection, this.options);
+        if (output) {
+          const ext = this.getExtension(format);
+          fs2.writeFileSync(
+            path.join(this.options.outputDir, `tokens.${plugin.name}.${ext}`),
+            output
+          );
+        }
+      }
+    }
+    if (this.options.separateFiles) {
+      await this.generateSeparateFiles(format);
+    } else {
+      await this.generateSingleFile(format);
+    }
+  }
+  /**
+   * Generate single output file
+   */
+  async generateSingleFile(format) {
+    if (!this.collection) {
+      return;
+    }
+    const content = this.transform(this.collection, format);
+    const filename = `tokens.${this.getExtension(format)}`;
+    const filepath = path.join(this.options.outputDir, filename);
+    fs2.writeFileSync(filepath, content);
+    console.log(`Generated: ${filepath}`);
+  }
+  /**
+   * Generate separate files by category
+   */
+  async generateSeparateFiles(format) {
+    if (!this.collection) {
+      return;
+    }
+    const categories = getCategories(this.collection);
+    const ext = this.getExtension(format);
+    for (const category of categories) {
+      const tokens = this.collection.tokens.filter((t) => t.path[0] === category);
+      const catCollection = {
+        tokens,
+        byPath: new Map(tokens.map((t) => [t.path.join("."), t])),
+        byName: new Map(tokens.map((t) => [t.name, t]))
+      };
+      const content = this.transform(catCollection, format);
+      const filename = `${category}.${ext}`;
+      const filepath = path.join(this.options.outputDir, filename);
+      fs2.writeFileSync(filepath, content);
+      console.log(`Generated: ${filepath}`);
+    }
+    this.generateIndexFile(categories, format);
+  }
+  /**
+   * Generate index file for separated files
+   */
+  generateIndexFile(categories, format) {
+    const ext = this.getExtension(format);
+    let content = "";
+    switch (format) {
+      case "css":
+        content = categories.map((c) => `@import './${c}.css';`).join("\n");
+        break;
+      case "scss":
+        content = categories.map((c) => `@import './${c}';`).join("\n");
+        break;
+      case "js":
+      case "ts":
+        content = categories.map((c) => `export * from './${c}';`).join("\n");
+        break;
+      default:
+        return;
+    }
+    const filepath = path.join(this.options.outputDir, `index.${ext}`);
+    fs2.writeFileSync(filepath, content);
+    console.log(`Generated: ${filepath}`);
+  }
+  /**
+   * Transform collection to format
+   */
+  transform(collection, format) {
+    const prefix = this.options.prefix ?? "nice";
+    switch (format) {
+      case "css":
+        return transformToCss(collection, prefix);
+      case "scss":
+        return transformToScss(collection, prefix);
+      case "js":
+        return transformToJs(collection);
+      case "ts":
+        return transformToTs(collection);
+      case "json":
+        return JSON.stringify(this.buildNestedObject(collection), null, 2);
+      case "tailwind":
+        return transformToTailwind(collection);
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+  /**
+   * Build nested object from flat tokens
+   */
+  buildNestedObject(collection) {
+    const result = {};
+    for (const token of collection.tokens) {
+      let current = result;
+      for (let i = 0; i < token.path.length - 1; i++) {
+        const key = token.path[i];
+        if (!(key in current)) {
+          current[key] = {};
+        }
+        current = current[key];
+      }
+      current[token.path[token.path.length - 1]] = token.resolvedValue;
+    }
+    return result;
+  }
+  /**
+   * Get file extension for format
+   */
+  getExtension(format) {
+    switch (format) {
+      case "css":
+        return "css";
+      case "scss":
+        return "scss";
+      case "js":
+        return "js";
+      case "ts":
+        return "ts";
+      case "json":
+        return "json";
+      case "tailwind":
+        return "tailwind.js";
+      default:
+        return "txt";
+    }
+  }
+  /**
+   * Generate theme-related files
+   */
+  async generateThemeFiles() {
+    const prefix = this.options.prefix ?? "nice";
+    const themesCss = generateThemesCss(this.themes, prefix);
+    fs2.writeFileSync(path.join(this.options.outputDir, "themes.css"), themesCss);
+    console.log(`Generated: themes.css`);
+    const switcherJs = generateThemeSwitcher();
+    fs2.writeFileSync(path.join(this.options.outputDir, "theme-switcher.js"), switcherJs);
+    console.log(`Generated: theme-switcher.js`);
+    const reactContext = generateReactThemeContext();
+    fs2.writeFileSync(path.join(this.options.outputDir, "ThemeContext.tsx"), reactContext);
+    console.log(`Generated: ThemeContext.tsx`);
+  }
+  /**
+   * Get generated token collection
+   */
+  getCollection() {
+    return this.collection;
+  }
+  /**
+   * Get generated themes
+   */
+  getThemes() {
+    return this.themes;
+  }
+};
+function createGenerator(options) {
+  return new TokenGenerator(options);
+}
+
+// src/cli/index.ts
 var pkg = require_package();
 var program = new Command();
 program.name("nice-tokens").description("Generate design tokens in various formats").version(pkg.version);
@@ -86,8 +991,8 @@ program.command("build").description("Build design tokens from JSON source files
 ).option("-p, --prefix <prefix>", "CSS variable prefix", "nice").option("--separate", "Generate separate files by category").option("--no-dark", "Exclude dark mode tokens").option("--no-components", "Exclude component tokens").option("--watch", "Watch for changes and rebuild").action(async (options) => {
   const formats = options.formats.split(",").map((f) => f.trim());
   console.log("Nice2Dev Design Tokens Generator\n");
-  console.log(`Input:  ${path.resolve(options.input)}`);
-  console.log(`Output: ${path.resolve(options.output)}`);
+  console.log(`Input:  ${path2.resolve(options.input)}`);
+  console.log(`Output: ${path2.resolve(options.output)}`);
   console.log(`Formats: ${formats.join(", ")}`);
   console.log("");
   try {
@@ -104,13 +1009,13 @@ program.command("build").description("Build design tokens from JSON source files
     console.log("\nBuild complete!");
     if (options.watch) {
       console.log("\nWatching for changes...");
-      const chokidar = await import("../esm-LPVAZ4IA.js");
-      const watcher = chokidar.watch(path.join(options.input, "**/*.json"), {
+      const chokidar = await import("./esm-LPVAZ4IA.js");
+      const watcher = chokidar.watch(path2.join(options.input, "**/*.json"), {
         ignoreInitial: true
       });
       watcher.on("change", async (file) => {
         console.log(`
-File changed: ${path.basename(file)}`);
+File changed: ${path2.basename(file)}`);
         try {
           const gen = createGenerator({
             outputDir: options.output,
@@ -134,11 +1039,11 @@ File changed: ${path.basename(file)}`);
   }
 });
 program.command("init").description("Initialize a new design tokens project").option("-d, --dir <dir>", "Directory to initialize", ".").action(async (options) => {
-  const dir = path.resolve(options.dir);
-  const tokensDir = path.join(dir, "tokens");
+  const dir = path2.resolve(options.dir);
+  const tokensDir = path2.join(dir, "tokens");
   console.log("Initializing Nice2Dev Design Tokens\n");
-  fs.mkdirSync(tokensDir, { recursive: true });
-  fs.mkdirSync(path.join(dir, "dist"), { recursive: true });
+  fs3.mkdirSync(tokensDir, { recursive: true });
+  fs3.mkdirSync(path2.join(dir, "dist"), { recursive: true });
   const colorsJson = {
     color: {
       $type: "color",
@@ -159,7 +1064,7 @@ program.command("init").description("Initialize a new design tokens project").op
       }
     }
   };
-  fs.writeFileSync(path.join(tokensDir, "colors.json"), JSON.stringify(colorsJson, null, 2));
+  fs3.writeFileSync(path2.join(tokensDir, "colors.json"), JSON.stringify(colorsJson, null, 2));
   const typographyJson = {
     typography: {
       fontFamily: {
@@ -177,8 +1082,8 @@ program.command("init").description("Initialize a new design tokens project").op
       }
     }
   };
-  fs.writeFileSync(
-    path.join(tokensDir, "typography.json"),
+  fs3.writeFileSync(
+    path2.join(tokensDir, "typography.json"),
     JSON.stringify(typographyJson, null, 2)
   );
   const spacingJson = {
@@ -192,7 +1097,7 @@ program.command("init").description("Initialize a new design tokens project").op
       "8": { $value: "2rem" }
     }
   };
-  fs.writeFileSync(path.join(tokensDir, "spacing.json"), JSON.stringify(spacingJson, null, 2));
+  fs3.writeFileSync(path2.join(tokensDir, "spacing.json"), JSON.stringify(spacingJson, null, 2));
   console.log("Created token files in ./tokens/");
   console.log("");
   console.log("Next steps:");
@@ -204,7 +1109,7 @@ program.command("validate").description("Validate design token files").argument(
   const glob = __require("fast-glob");
   let tokenFiles = files;
   if (options.dir) {
-    tokenFiles = await glob(path.join(options.dir, "**/*.json"));
+    tokenFiles = await glob(path2.join(options.dir, "**/*.json"));
   }
   if (tokenFiles.length === 0) {
     console.log("No token files specified");
@@ -214,11 +1119,11 @@ program.command("validate").description("Validate design token files").argument(
   let hasErrors = false;
   for (const file of tokenFiles) {
     try {
-      const content = fs.readFileSync(file, "utf-8");
+      const content = fs3.readFileSync(file, "utf-8");
       JSON.parse(content);
-      console.log(`OK    ${path.basename(file)}`);
+      console.log(`OK    ${path2.basename(file)}`);
     } catch (err) {
-      console.log(`FAIL  ${path.basename(file)}: ${err.message}`);
+      console.log(`FAIL  ${path2.basename(file)}: ${err.message}`);
       hasErrors = true;
     }
   }
@@ -236,9 +1141,9 @@ program.command("convert").description("Convert between token formats").argument
   try {
     const generator = createGenerator({
       formats: [format],
-      outputDir: path.dirname(output)
+      outputDir: path2.dirname(output)
     });
-    const inputStat = fs.statSync(input);
+    const inputStat = fs3.statSync(input);
     if (inputStat.isDirectory()) {
       generator.loadDirectory(input);
     } else {
@@ -253,9 +1158,9 @@ program.command("convert").description("Convert between token formats").argument
 });
 program.command("info").description("Show information about token files").argument("<dir>", "Directory containing token files").action(async (dir) => {
   const glob = __require("fast-glob");
-  const files = await glob(path.join(dir, "**/*.json"));
+  const files = await glob(path2.join(dir, "**/*.json"));
   console.log("Token Information\n");
-  console.log(`Directory: ${path.resolve(dir)}`);
+  console.log(`Directory: ${path2.resolve(dir)}`);
   console.log(`Files: ${files.length}`);
   console.log("");
   const generator = createGenerator();
@@ -286,8 +1191,8 @@ program.command("diff").description("Compare two token files or directories").ar
   console.log("Comparing tokens\n");
   const generatorA = createGenerator();
   const generatorB = createGenerator();
-  const statA = fs.statSync(source);
-  const statB = fs.statSync(target);
+  const statA = fs3.statSync(source);
+  const statB = fs3.statSync(target);
   if (statA.isDirectory()) {
     generatorA.loadDirectory(source);
   } else {
@@ -309,21 +1214,21 @@ program.command("diff").description("Compare two token files or directories").ar
   const added = [];
   const removed = [];
   const changed = [];
-  for (const path2 of pathsB) {
-    if (!pathsA.has(path2)) {
-      added.push(path2);
+  for (const path3 of pathsB) {
+    if (!pathsA.has(path3)) {
+      added.push(path3);
     }
   }
-  for (const path2 of pathsA) {
-    if (!pathsB.has(path2)) {
-      removed.push(path2);
+  for (const path3 of pathsA) {
+    if (!pathsB.has(path3)) {
+      removed.push(path3);
     }
   }
   for (const tokenA of collectionA.tokens) {
-    const path2 = tokenA.path.join(".");
-    const tokenB = collectionB.byPath.get(path2);
+    const path3 = tokenA.path.join(".");
+    const tokenB = collectionB.byPath.get(path3);
     if (tokenB && tokenA.resolvedValue !== tokenB.resolvedValue) {
-      changed.push(`${path2}: ${tokenA.resolvedValue} \u2192 ${tokenB.resolvedValue}`);
+      changed.push(`${path3}: ${tokenA.resolvedValue} \u2192 ${tokenB.resolvedValue}`);
     }
   }
   if (added.length === 0 && removed.length === 0 && changed.length === 0) {