tokvista 1.5.2 → 1.6.1

package/README.md

@@ -90,6 +90,25 @@ npx tokvista tokens.json --port 4000
 npx tokvista tokens.json --no-open
 ```
 
+### Export Tokens
+
+```bash
+# Export to CSS
+npx tokvista export tokens.json --format css --output tokens.css
+
+# Export to SCSS
+npx tokvista export tokens.json --format scss --output _tokens.scss
+
+# Export to JavaScript
+npx tokvista export tokens.json --format json --output tokens.js
+
+# Export to Tailwind config
+npx tokvista export tokens.json --format tailwind --output tailwind.config.js
+
+# Print to stdout (for piping)
+npx tokvista export tokens.json --format css
+```
+
 ### Interactive Setup
 
 ```bash
@@ -118,8 +137,11 @@ Then run `npx tokvista` to use your config.
 |--------|-------------|
 | `tokvista [file]` | Token file path (default: `./tokens.json`) |
 | `tokvista init` | Interactive config setup |
+| `tokvista export <file> --format <type>` | Export tokens (css, scss, json, tailwind) |
 | `--config`, `-c` | Config file path |
 | `--port`, `-p` | Server port (default: `3000`) |
+| `--format` | Export format (export only) |
+| `--output`, `-o` | Output file path (export only) |
 | `--no-open` | Don't open browser |
 | `--no-watch` | Disable live reload |
 | `--no-preview` | Skip preview after init |

package/dist/bin/tokvista.js

@@ -9,6 +9,758 @@ import path from "path";
 import { createInterface } from "readline";
 import { fileURLToPath, pathToFileURL } from "url";
 
+// src/utils/formatDetector.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function hasTokenShape(obj) {
+  if (!isRecord(obj)) return false;
+  return "value" in obj && "type" in obj || "$value" in obj && "$type" in obj;
+}
+function countTokens(obj, maxDepth = 5, depth = 0) {
+  if (depth > maxDepth || !isRecord(obj)) return 0;
+  if (hasTokenShape(obj)) return 1;
+  let count = 0;
+  for (const value of Object.values(obj)) {
+    count += countTokens(value, maxDepth, depth + 1);
+  }
+  return count;
+}
+function detectStyleDictionary(data) {
+  const issues = [];
+  const keys = Object.keys(data);
+  if (keys.length === 0) return { match: false, issues };
+  const cssVarKeys = keys.filter((k) => k.startsWith("--") || k.startsWith("$"));
+  const hasCssVars = cssVarKeys.length > keys.length * 0.5;
+  if (hasCssVars) {
+    const allStrings = Object.values(data).every((v) => typeof v === "string" || typeof v === "number");
+    if (allStrings) return { match: true, issues };
+    issues.push("Style Dictionary format detected but some values are not primitives");
+  }
+  return { match: false, issues };
+}
+function detectSupernova(data) {
+  const issues = [];
+  if ("tokens" in data && Array.isArray(data.tokens)) {
+    const tokens = data.tokens;
+    if (tokens.length > 0) {
+      const first = tokens[0];
+      if (isRecord(first) && "id" in first && "name" in first && "value" in first) {
+        return { match: true, issues };
+      }
+      issues.push("Supernova format detected but tokens array has unexpected structure");
+    }
+  }
+  return { match: false, issues };
+}
+function detectFigmaAPI(data) {
+  const issues = [];
+  if ("meta" in data && isRecord(data.meta)) {
+    const meta = data.meta;
+    if ("variables" in meta || "variableCollections" in meta) {
+      return { match: true, issues };
+    }
+  }
+  if ("nodes" in data && isRecord(data.nodes)) {
+    issues.push("Figma API response detected but needs variable extraction");
+    return { match: true, issues };
+  }
+  return { match: false, issues };
+}
+function detectW3C(data) {
+  const issues = [];
+  const tokenCount = countTokens(data);
+  if (tokenCount === 0) return { match: false, issues };
+  let w3cCount = 0;
+  let totalChecked = 0;
+  const checkW3C = (obj, depth = 0) => {
+    if (depth > 10 || !isRecord(obj)) return;
+    if ("$value" in obj && "$type" in obj) {
+      w3cCount++;
+      totalChecked++;
+      return;
+    }
+    if ("value" in obj && "type" in obj) {
+      totalChecked++;
+      return;
+    }
+    for (const value of Object.values(obj)) {
+      checkW3C(value, depth + 1);
+    }
+  };
+  checkW3C(data);
+  if (totalChecked > 0 && w3cCount > totalChecked * 0.5) {
+    return { match: true, issues };
+  }
+  return { match: false, issues };
+}
+function detectTokenStudio(data) {
+  const issues = [];
+  const tokenCount = countTokens(data);
+  if (tokenCount === 0) return { match: false, issues };
+  let studioCount = 0;
+  let totalChecked = 0;
+  const checkStudio = (obj, depth = 0) => {
+    if (depth > 10 || !isRecord(obj)) return;
+    if ("value" in obj && "type" in obj && !("$value" in obj)) {
+      studioCount++;
+      totalChecked++;
+      return;
+    }
+    if ("$value" in obj) {
+      totalChecked++;
+      return;
+    }
+    for (const value of Object.values(obj)) {
+      checkStudio(value, depth + 1);
+    }
+  };
+  checkStudio(data);
+  if (totalChecked > 0 && studioCount > totalChecked * 0.5) {
+    return { match: true, issues };
+  }
+  return { match: false, issues };
+}
+function detectTokenFormat(input) {
+  if (Array.isArray(input)) {
+    if (input.length === 0) {
+      return {
+        format: "unknown",
+        confidence: 0,
+        issues: ["Token array is empty"],
+        suggestions: ["Add tokens to the array"]
+      };
+    }
+    const first = input[0];
+    if (isRecord(first) && "id" in first && "tokenType" in first && "value" in first) {
+      return { format: "supernova", confidence: 0.95, issues: [], suggestions: [] };
+    }
+    return {
+      format: "unknown",
+      confidence: 0,
+      issues: ["Array format detected but structure is not recognized"],
+      suggestions: ["Supernova format expects: [{ id, name, tokenType, value, category }]"]
+    };
+  }
+  if (!isRecord(input)) {
+    return {
+      format: "unknown",
+      confidence: 0,
+      issues: ["Input is not a valid JSON object or array"],
+      suggestions: ["Ensure your token file contains a valid JSON object or array"]
+    };
+  }
+  const data = input;
+  const allIssues = [];
+  const suggestions = [];
+  if ("$format" in data && typeof data.$format === "string") {
+    const format = data.$format.toLowerCase();
+    if (format.includes("tokvista") || format.includes("token-studio")) {
+      return { format: "token-studio", confidence: 1, issues: [], suggestions: [] };
+    }
+  }
+  const figmaResult = detectFigmaAPI(data);
+  if (figmaResult.match) {
+    allIssues.push(...figmaResult.issues);
+    suggestions.push("Extract variables from meta.variables or use Figma plugin export");
+    return { format: "figma-api", confidence: 0.9, issues: allIssues, suggestions };
+  }
+  const supernovaResult = detectSupernova(data);
+  if (supernovaResult.match) {
+    allIssues.push(...supernovaResult.issues);
+    return { format: "supernova", confidence: 0.9, issues: allIssues, suggestions };
+  }
+  const styleDictResult = detectStyleDictionary(data);
+  if (styleDictResult.match) {
+    allIssues.push(...styleDictResult.issues);
+    return { format: "style-dictionary", confidence: 0.85, issues: allIssues, suggestions };
+  }
+  const w3cResult = detectW3C(data);
+  const studioResult = detectTokenStudio(data);
+  if (w3cResult.match && studioResult.match) {
+    return { format: "token-studio", confidence: 0.8, issues: [], suggestions: [] };
+  }
+  if (w3cResult.match) {
+    return { format: "w3c", confidence: 0.8, issues: [], suggestions: [] };
+  }
+  if (studioResult.match) {
+    return { format: "token-studio", confidence: 0.8, issues: [], suggestions: [] };
+  }
+  const tokenCount = countTokens(data);
+  if (tokenCount === 0) {
+    allIssues.push("No valid tokens found with {type, value} or {$type, $value} structure");
+    suggestions.push('Tokens should have format: { "type": "color", "value": "#fff" }');
+    suggestions.push('Or W3C format: { "$type": "color", "$value": "#fff" }');
+  } else {
+    allIssues.push(`Found ${tokenCount} potential tokens but format is unclear`);
+    suggestions.push("Check that tokens have consistent {type, value} structure");
+  }
+  return { format: "unknown", confidence: 0, issues: allIssues, suggestions };
+}
+
+// src/utils/formatNormalizers.ts
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeW3C(data) {
+  const normalize = (obj) => {
+    if (!isRecord2(obj)) return obj;
+    if ("$value" in obj && "$type" in obj) {
+      const result2 = {
+        value: obj.$value,
+        type: obj.$type
+      };
+      if (obj.$description) {
+        result2.description = obj.$description;
+      }
+      return result2;
+    }
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      if (key.startsWith("$") && !["$value", "$type", "$description"].includes(key)) {
+        result[key] = value;
+      } else if (!key.startsWith("$")) {
+        result[key] = normalize(value);
+      }
+    }
+    return result;
+  };
+  return normalize(data);
+}
+function normalizeStyleDictionary(data) {
+  const tokens = {};
+  for (const [key, value] of Object.entries(data)) {
+    if (typeof value !== "string" && typeof value !== "number") continue;
+    let cleanKey = key;
+    if (key.startsWith("--")) cleanKey = key.slice(2);
+    if (key.startsWith("$")) cleanKey = key.slice(1);
+    const parts = cleanKey.split("-").filter(Boolean);
+    if (parts.length === 0) continue;
+    let type = "string";
+    const valueStr = String(value);
+    if (valueStr.match(/^#[0-9a-f]{3,8}$/i) || valueStr.match(/^rgba?\(/i)) {
+      type = "color";
+    } else if (valueStr.match(/^\d+px$/)) {
+      if (parts.some((p) => p.includes("space") || p.includes("spacing") || p.includes("gap"))) {
+        type = "spacing";
+      } else if (parts.some((p) => p.includes("radius") || p.includes("round"))) {
+        type = "borderRadius";
+      } else if (parts.some((p) => p.includes("size") || p.includes("width") || p.includes("height"))) {
+        type = "sizing";
+      } else {
+        type = "dimension";
+      }
+    } else if (valueStr.match(/^\d+$/)) {
+      type = "number";
+    }
+    let current = tokens;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (!current[part]) current[part] = {};
+      current = current[part];
+    }
+    const lastPart = parts[parts.length - 1];
+    current[lastPart] = { type, value };
+  }
+  return { tokens };
+}
+function normalizeSupernova(data) {
+  const tokenArray = Array.isArray(data) ? data : isRecord2(data) && Array.isArray(data.tokens) ? data.tokens : [];
+  const tokens = {};
+  for (const token of tokenArray) {
+    if (!isRecord2(token)) continue;
+    const id = token.id;
+    const name = token.name || id;
+    const tokenValue = token.value;
+    const tokenType = token.tokenType || token.type || "string";
+    const category = token.category;
+    if (!name || tokenValue === void 0) continue;
+    let value = tokenValue;
+    if (isRecord2(tokenValue)) {
+      if ("hex" in tokenValue) value = tokenValue.hex;
+      else if ("measure" in tokenValue && "unit" in tokenValue) {
+        value = `${tokenValue.measure}${tokenValue.unit}`;
+      }
+    }
+    let type = "string";
+    if (tokenType === "Color") type = "color";
+    else if (tokenType === "Dimension") type = "dimension";
+    else if (tokenType === "Number") type = "number";
+    else type = tokenType.toLowerCase();
+    const pathParts = [];
+    if (category) pathParts.push(category);
+    pathParts.push(...name.split("/").filter(Boolean));
+    if (pathParts.length === 0) continue;
+    let current = tokens;
+    for (let i = 0; i < pathParts.length - 1; i++) {
+      const part = pathParts[i];
+      if (!current[part]) current[part] = {};
+      current = current[part];
+    }
+    const lastPart = pathParts[pathParts.length - 1];
+    current[lastPart] = { type, value };
+  }
+  return tokens;
+}
+function normalizeFigmaAPI(data) {
+  if ("meta" in data && isRecord2(data.meta)) {
+    const meta = data.meta;
+    if ("variables" in meta && isRecord2(meta.variables)) {
+      const tokens = {};
+      for (const [key, variable] of Object.entries(meta.variables)) {
+        if (!isRecord2(variable)) continue;
+        const name = variable.name || key;
+        const resolvedType = variable.resolvedType;
+        const valuesByMode = variable.valuesByMode;
+        if (!name || !valuesByMode || !isRecord2(valuesByMode)) continue;
+        const firstModeValue = Object.values(valuesByMode)[0];
+        let type = "string";
+        if (resolvedType === "COLOR") type = "color";
+        else if (resolvedType === "FLOAT") type = "number";
+        else if (resolvedType === "STRING") type = "string";
+        const parts = name.split("/").filter(Boolean);
+        if (parts.length === 0) continue;
+        let current = tokens;
+        for (let i = 0; i < parts.length - 1; i++) {
+          const part = parts[i];
+          if (!current[part]) current[part] = {};
+          current = current[part];
+        }
+        const lastPart = parts[parts.length - 1];
+        current[lastPart] = { type, value: firstModeValue };
+      }
+      return { tokens };
+    }
+  }
+  return data;
+}
+function normalizeTokenFormat(data, detectedFormat) {
+  if (!isRecord2(data) && !Array.isArray(data)) return {};
+  switch (detectedFormat) {
+    case "w3c":
+      return isRecord2(data) ? normalizeW3C(data) : {};
+    case "style-dictionary":
+      return isRecord2(data) ? normalizeStyleDictionary(data) : {};
+    case "supernova":
+      return normalizeSupernova(data);
+    case "figma-api":
+      return isRecord2(data) ? normalizeFigmaAPI(data) : {};
+    case "token-studio":
+    case "unknown":
+    default:
+      return isRecord2(data) ? data : {};
+  }
+}
+
+// src/utils/core.ts
+function isTokenValue(obj) {
+  return typeof obj === "object" && obj !== null && "value" in obj && "type" in obj;
+}
+function isRecord3(value) {
+  return typeof value === "object" && value !== null;
+}
+function canonicalKey(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "");
+}
+function hasStructuredSets(record) {
+  if (Object.keys(record).some((key) => {
+    const normalized = canonicalKey(key);
+    return normalized === "foundationvalue" || normalized === "semanticvalue" || normalized.startsWith("components");
+  })) {
+    return true;
+  }
+  return Object.keys(record).some((key) => {
+    const normalized = canonicalKey(key);
+    return normalized === "foundation" || normalized === "semantic" || normalized === "components";
+  });
+}
+function getCaseInsensitiveRecord(record, ...candidateNames) {
+  const candidates = new Set(candidateNames.map((name) => canonicalKey(name)));
+  for (const [key, value] of Object.entries(record)) {
+    if (!isRecord3(value)) continue;
+    if (candidates.has(canonicalKey(key))) {
+      return value;
+    }
+  }
+  return null;
+}
+function isModeLikeKey(key) {
+  const normalized = canonicalKey(key);
+  return normalized === "value" || normalized === "default" || normalized === "mode" || /^mode\d+$/.test(normalized) || /^theme\d+$/.test(normalized);
+}
+function mergeModeRecords(record) {
+  const modeEntries = Object.entries(record).filter(([key, value]) => isModeLikeKey(key) && isRecord3(value));
+  if (modeEntries.length === 0) {
+    return record;
+  }
+  return modeEntries.reduce((acc, [, value]) => {
+    return deepMergeRecords(acc, value);
+  }, {});
+}
+function getPrefixedRecord(record, prefix) {
+  const target = `${prefix}value`;
+  for (const [key, value] of Object.entries(record)) {
+    if (!isRecord3(value)) continue;
+    if (canonicalKey(key) === target) {
+      return value;
+    }
+  }
+  return null;
+}
+function getDirectCollectionRecord(record, collectionName) {
+  const direct = getCaseInsensitiveRecord(record, collectionName);
+  if (!direct) {
+    return null;
+  }
+  const valueRecord = getCaseInsensitiveRecord(direct, "value");
+  if (valueRecord) {
+    return mergeModeRecords(valueRecord);
+  }
+  return mergeModeRecords(direct);
+}
+function getComponentsRecord(record) {
+  const mergedFromPrefixed = Object.entries(record).filter(([key, value]) => isRecord3(value) && canonicalKey(key).startsWith("components")).reduce((acc, [, value]) => {
+    return deepMergeRecords(acc, value);
+  }, {});
+  const directComponents = getCaseInsensitiveRecord(record, "components");
+  if (!directComponents) {
+    return mergedFromPrefixed;
+  }
+  return deepMergeRecords(mergedFromPrefixed, mergeModeRecords(directComponents));
+}
+function normalizeTokenSetsRoot(input) {
+  if (!isRecord3(input)) return {};
+  const detection = detectTokenFormat(input);
+  let normalized = input;
+  if (detection.format !== "token-studio" && detection.format !== "unknown") {
+    if (typeof console !== "undefined" && console.info) {
+      console.info(`[Tokvista] Detected ${detection.format} format (confidence: ${detection.confidence}), normalizing...`);
+    }
+    normalized = normalizeTokenFormat(input, detection.format);
+  } else if (detection.format === "unknown" && detection.confidence === 0) {
+    if (typeof console !== "undefined" && console.warn) {
+      console.warn("[Tokvista] Unknown token format detected:", detection.issues);
+      if (detection.suggestions.length > 0) {
+        console.warn("[Tokvista] Suggestions:", detection.suggestions);
+      }
+    }
+  }
+  const directRoot = isRecord3(normalized.tokens) ? normalized.tokens : normalized;
+  const candidateKeys = Object.keys(directRoot).filter((key) => !key.startsWith("$"));
+  if (candidateKeys.length === 1) {
+    const inner = directRoot[candidateKeys[0]];
+    if (isRecord3(inner) && hasStructuredSets(inner)) {
+      return inner;
+    }
+  }
+  return directRoot;
+}
+function getFoundationTokenTree(tokens) {
+  const normalizedRoot = normalizeTokenSetsRoot(tokens);
+  const source = getPrefixedRecord(normalizedRoot, "foundation") || getDirectCollectionRecord(normalizedRoot, "foundation") || normalizedRoot;
+  if (!isRecord3(source)) return {};
+  const keys = Object.keys(source).filter((key) => !key.startsWith("$"));
+  if (keys.length === 1 && keys[0].toLowerCase() === "base") {
+    const baseValue = source[keys[0]];
+    if (isRecord3(baseValue)) {
+      return baseValue;
+    }
+  }
+  return source;
+}
+function extractFoundationSet(tokens) {
+  return getFoundationTokenTree(tokens);
+}
+function extractSemanticSet(tokens) {
+  const normalizedRoot = normalizeTokenSetsRoot(tokens);
+  const semantic = getPrefixedRecord(normalizedRoot, "semantic") || getDirectCollectionRecord(normalizedRoot, "semantic");
+  return semantic || {};
+}
+function extractComponentSet(tokens) {
+  const normalizedRoot = normalizeTokenSetsRoot(tokens);
+  return getComponentsRecord(normalizedRoot);
+}
+function findAllTokens(obj, path2 = []) {
+  const tokens = [];
+  if (!obj || typeof obj !== "object") return tokens;
+  if (isTokenValue(obj)) {
+    tokens.push({ path: path2.join("."), token: obj });
+    return tokens;
+  }
+  for (const [key, value] of Object.entries(obj)) {
+    tokens.push(...findAllTokens(value, [...path2, key]));
+  }
+  return tokens;
+}
+function createTokenMap(tokens) {
+  const map = {};
+  const normalizedRoot = normalizeTokenSetsRoot(tokens);
+  Object.entries(normalizedRoot).forEach(([setKey, setData]) => {
+    if (["global", "$themes", "$metadata"].includes(setKey)) return;
+    const allTokens = findAllTokens(setData);
+    allTokens.forEach(({ path: path2, token }) => {
+      map[path2] = typeof token.value === "string" ? token.value : String(token.value);
+      map[`${setKey}.${path2}`] = typeof token.value === "string" ? token.value : String(token.value);
+    });
+  });
+  const addStructuredEntries = (prefix, value) => {
+    const allTokens = findAllTokens(value);
+    allTokens.forEach(({ path: path2, token }) => {
+      const tokenValue = typeof token.value === "string" ? token.value : String(token.value);
+      map[`${prefix}.${path2}`] = tokenValue;
+    });
+  };
+  addStructuredEntries("Foundation", extractFoundationSet(normalizedRoot));
+  addStructuredEntries("Semantic", extractSemanticSet(normalizedRoot));
+  addStructuredEntries("Components", extractComponentSet(normalizedRoot));
+  return map;
+}
+function resolveTokenValue(value, tokenMap, maxDepth = 10) {
+  if (!value || typeof value !== "string") return value;
+  let currentValue = value;
+  let depth = 0;
+  while (currentValue.startsWith("{") && currentValue.endsWith("}") && depth < maxDepth) {
+    const refPath = currentValue.slice(1, -1);
+    let resolved = tokenMap[refPath];
+    if (resolved === void 0 && refPath.includes(".")) {
+      const withoutCollectionPrefix = refPath.slice(refPath.indexOf(".") + 1);
+      resolved = tokenMap[withoutCollectionPrefix];
+    }
+    if (resolved !== void 0) {
+      currentValue = resolved;
+    } else {
+      break;
+    }
+    depth++;
+  }
+  return currentValue;
+}
+function deepMergeRecords(target, source) {
+  Object.entries(source).forEach(([key, nextValue]) => {
+    const currentValue = target[key];
+    const currentIsObject = typeof currentValue === "object" && currentValue !== null;
+    const nextIsObject = typeof nextValue === "object" && nextValue !== null;
+    const currentIsTokenLeaf = currentIsObject && "value" in currentValue;
+    const nextIsTokenLeaf = nextIsObject && "value" in nextValue;
+    if (currentIsObject && nextIsObject && !currentIsTokenLeaf && !nextIsTokenLeaf) {
+      target[key] = deepMergeRecords(
+        currentValue,
+        nextValue
+      );
+      return;
+    }
+    target[key] = nextValue;
+  });
+  return target;
+}
+function isTokenLike(value) {
+  return isRecord3(value) && "value" in value;
+}
+function normalizeColorPath(path2) {
+  const wrappers = /* @__PURE__ */ new Set(["color", "colors", "palette", "palettes", "base", "foundation", "value"]);
+  const filtered = path2.filter((part) => !wrappers.has(part.toLowerCase()));
+  return filtered.length > 0 ? filtered : path2;
+}
+function determineTokenType(name, tokenType) {
+  const n = name.toLowerCase();
+  const rawType = String(tokenType || "").toLowerCase();
+  if (rawType === "color") return "color";
+  if (rawType === "spacing") return "spacing";
+  if (rawType === "sizing" || rawType === "size") return "size";
+  if (rawType === "borderradius" || rawType === "radius") return "radius";
+  if (rawType.includes("font") || rawType.includes("line")) return "typography";
+  if (n.includes("color") || n.includes("fill") || n.includes("stroke") || n.includes("text") || n.includes("bg")) return "color";
+  if (n.includes("space") || n.includes("spacing") || n.includes("gap") || n.includes("padding") || n.includes("margin")) return "spacing";
+  if (n.includes("size") || n.includes("width") || n.includes("height")) return "size";
+  if (n.includes("radius") || n.includes("round")) return "radius";
+  if (n.includes("font") || n.includes("line-height") || n.includes("typography") || n.includes("letter")) return "typography";
+  return "component";
+}
+
+// src/utils/exportUtils.ts
+function formatTokenValue(value, format, tokenMap) {
+  if (typeof value !== "string") return String(value);
+  const aliasMatch = value.match(/^\{(.+)\}$/);
+  if (aliasMatch) {
+    const path2 = aliasMatch[1];
+    let cleanPath = path2.replace(/\./g, "-");
+    if (cleanPath.startsWith("base-")) {
+      const afterBase = cleanPath.slice(5).toLowerCase();
+      const isSpatial = ["space", "size", "radius", "line-height", "border-width"].some((k) => afterBase.includes(k));
+      if (isSpatial) {
+        cleanPath = cleanPath.slice(5);
+      }
+    }
+    if (format === "css") {
+      return `var(--${cleanPath})`;
+    } else if (format === "scss") {
+      return `$${cleanPath}`;
+    } else if (format === "js" && tokenMap) {
+      return resolveTokenValue(value, tokenMap);
+    }
+  }
+  return value;
+}
+function getFlattenedTokens(tokens) {
+  const flattened = [];
+  const pushToken = (name, cssVariable, value, type, category) => {
+    flattened.push({ name, cssVariable, value, type, category });
+  };
+  const foundationRoot = getFoundationTokenTree(tokens);
+  const walkFoundation = (node, path2 = []) => {
+    if (!isRecord3(node)) return;
+    if (isTokenLike(node) && node.value !== null) {
+      const joinedPath = path2.join("-");
+      const tokenType = determineTokenType(joinedPath, node.type);
+      const value = String(node.value);
+      if (tokenType === "color") {
+        const colorPath = normalizeColorPath(path2);
+        const colorName = colorPath.join("-");
+        pushToken(`base-${colorName}`, `--base-${colorName}`, value, tokenType, "Foundation");
+      } else {
+        pushToken(joinedPath, `--${joinedPath}`, value, tokenType, "Foundation");
+      }
+      return;
+    }
+    Object.entries(node).forEach(([key, value]) => {
+      walkFoundation(value, [...path2, key]);
+    });
+  };
+  if (isRecord3(foundationRoot)) {
+    walkFoundation(foundationRoot);
+  }
+  const semanticSet = extractSemanticSet(tokens);
+  if (Object.keys(semanticSet).length > 0) {
+    const walkSemantic = (node, path2 = []) => {
+      if (!isRecord3(node)) return;
+      if (isTokenLike(node) && node.value !== null) {
+        const name = path2.join("-");
+        const tokenType = determineTokenType(name, node.type);
+        pushToken(name, `--${name}`, String(node.value), tokenType, "Semantic");
+        return;
+      }
+      Object.entries(node).forEach(([key, value]) => {
+        walkSemantic(value, [...path2, key]);
+      });
+    };
+    walkSemantic(semanticSet);
+  }
+  const mergedComponents = extractComponentSet(tokens);
+  Object.entries(mergedComponents).forEach(([compName, comp]) => {
+    if (!isRecord3(comp)) return;
+    const walkComponent = (node, path2 = []) => {
+      if (!isRecord3(node)) return;
+      if (isTokenLike(node) && node.value !== null) {
+        const suffix = path2.join("-");
+        const type = determineTokenType(suffix, node.type);
+        const tokenType = type === "size" ? "size" : type;
+        const name = suffix ? `${compName}-${suffix}` : compName;
+        pushToken(name, `--${name}`, String(node.value), tokenType, `Component (${compName})`);
+        return;
+      }
+      Object.entries(node).forEach(([key, value]) => {
+        walkComponent(value, [...path2, key]);
+      });
+    };
+    walkComponent(comp);
+  });
+  return flattened;
+}
+function generateCSS(tokens) {
+  const flattened = getFlattenedTokens(tokens);
+  let css = ":root {\n";
+  const categories = ["Foundation", "Semantic"];
+  const componentCategories = Array.from(new Set(flattened.map((t) => t.category))).filter((c) => c.startsWith("Component"));
+  [...categories, ...componentCategories].forEach((cat) => {
+    const catTokens = flattened.filter((t) => t.category === cat);
+    if (catTokens.length > 0) {
+      css += `  /* ${cat} */
+`;
+      catTokens.forEach((t) => {
+        const value = formatTokenValue(t.value, "css");
+        css += `  ${t.cssVariable}: ${value};
+`;
+      });
+      css += "\n";
+    }
+  });
+  css = css.trim() + "\n}";
+  return css;
+}
+function generateSCSS(tokens) {
+  const flattened = getFlattenedTokens(tokens);
+  let scss = "";
+  const categories = ["Foundation", "Semantic"];
+  const componentCategories = Array.from(new Set(flattened.map((t) => t.category))).filter((c) => c.startsWith("Component"));
+  const allCategories = [...categories, ...componentCategories];
+  allCategories.forEach((cat) => {
+    const catTokens = flattened.filter((t) => t.category === cat);
+    if (catTokens.length > 0) {
+      scss += `// ${cat}
+`;
+      catTokens.forEach((t) => {
+        const scssVar = t.cssVariable.replace("--", "$");
+        const value = formatTokenValue(t.value, "scss");
+        scss += `${scssVar}: ${value};
+`;
+      });
+      scss += "\n";
+    }
+  });
+  scss += "// Token Map\n$tokens: (\n";
+  flattened.forEach((t) => {
+    const value = formatTokenValue(t.value, "scss");
+    scss += `  "${t.name}": ${value},
+`;
+  });
+  scss += ");";
+  return scss;
+}
+function generateJS(tokens) {
+  const flattened = getFlattenedTokens(tokens);
+  const tokenMap = createTokenMap(tokens);
+  const jsObj = {};
+  flattened.forEach((t) => {
+    jsObj[t.name] = formatTokenValue(t.value, "js", tokenMap);
+  });
+  return `export const tokens = ${JSON.stringify(jsObj, null, 2)};`;
+}
+function generateTailwind(tokens) {
+  const flattened = getFlattenedTokens(tokens);
+  const config = {
+    theme: {
+      extend: {
+        colors: {},
+        spacing: {},
+        width: {},
+        borderRadius: {},
+        fontSize: {}
+      }
+    }
+  };
+  flattened.forEach((t) => {
+    const cleanName = t.name;
+    if (t.type === "color") {
+      config.theme.extend.colors[cleanName] = `var(${t.cssVariable})`;
+    } else if (t.type === "spacing") {
+      config.theme.extend.spacing[cleanName] = `var(${t.cssVariable})`;
+    } else if (t.type === "size") {
+      config.theme.extend.width[cleanName] = `var(${t.cssVariable})`;
+    } else if (t.type === "radius") {
+      config.theme.extend.borderRadius[cleanName] = `var(${t.cssVariable})`;
+    } else if (t.type === "typography" && t.name.includes("font-size")) {
+      config.theme.extend.fontSize[cleanName] = `var(${t.cssVariable})`;
+    }
+  });
+  if (Object.keys(config.theme.extend.colors).length === 0) delete config.theme.extend.colors;
+  if (Object.keys(config.theme.extend.spacing).length === 0) delete config.theme.extend.spacing;
+  if (Object.keys(config.theme.extend.width).length === 0) delete config.theme.extend.width;
+  if (Object.keys(config.theme.extend.borderRadius).length === 0) delete config.theme.extend.borderRadius;
+  if (Object.keys(config.theme.extend.fontSize).length === 0) delete config.theme.extend.fontSize;
+  return `/** @type {import('tailwindcss').Config} */
+module.exports = ${JSON.stringify(config, null, 2)};`;
+}
+
 // src/bin/hotreload.ts
 import { createHash } from "crypto";
 var HotReloadServer = class {
@@ -91,6 +843,7 @@ function printHelp() {
 Usage:
   tokvista [tokens.json] [--config tokvista.config.ts] [--port 3000] [--no-open]
   tokvista init [--force] [--port 3000] [--no-open] [--no-preview]
+  tokvista export <tokens.json> --format <css|scss|json|tailwind> [--output <file>]
 
 Arguments:
   tokens.json       Path to your tokens file (overrides config.tokens)
@@ -99,7 +852,10 @@ Options:
   -c, --config      Path to TokVista config file
   -f, --force       Overwrite existing tokvista.config.ts (init only)
   -p, --port        Preferred server port (default: 3000)
+  --format          Export format: css, scss, json, tailwind (export only)
+  --output, -o      Output file path (export only)
   --no-open         Do not automatically open the browser
+  --no-watch        Disable live reload (serve only)
   --no-preview      Skip starting live preview after init
   -h, --help        Show this help message
 `);
@@ -211,8 +967,62 @@ function parseArgs(args) {
   if (args[0] === "init") {
     return parseInitArgs(args.slice(1));
   }
+  if (args[0] === "export") {
+    return parseExportArgs(args.slice(1));
+  }
   return parseServeArgs(args);
 }
+function parseExportArgs(args) {
+  let tokenFileArg;
+  let format;
+  let output;
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+    if (arg === "-h" || arg === "--help") {
+      printHelp();
+      process.exit(0);
+    }
+    if (arg === "--format") {
+      const next = args[index + 1];
+      if (!next) throw new Error("Missing value for --format");
+      if (!["css", "scss", "json", "tailwind"].includes(next)) {
+        throw new Error("Format must be: css, scss, json, or tailwind");
+      }
+      format = next;
+      index += 1;
+      continue;
+    }
+    if (arg === "--output" || arg === "-o") {
+      const next = args[index + 1];
+      if (!next) throw new Error("Missing value for --output");
+      output = next;
+      index += 1;
+      continue;
+    }
+    if (arg.startsWith("--format=")) {
+      const val = arg.slice("--format=".length);
+      if (!["css", "scss", "json", "tailwind"].includes(val)) {
+        throw new Error("Format must be: css, scss, json, or tailwind");
+      }
+      format = val;
+      continue;
+    }
+    if (arg.startsWith("--output=")) {
+      output = arg.slice("--output=".length);
+      continue;
+    }
+    if (arg.startsWith("-")) {
+      throw new Error(`Unknown option: ${arg}`);
+    }
+    if (tokenFileArg) {
+      throw new Error(`Only one token file is supported. Unexpected value: "${arg}"`);
+    }
+    tokenFileArg = arg;
+  }
+  if (!tokenFileArg) throw new Error("Token file is required for export");
+  if (!format) throw new Error("--format is required (css, scss, json, or tailwind)");
+  return { command: "export", tokenFileArg, format, output };
+}
 function formatTitleFromPackageName(packageName) {
   const trimmed = packageName.trim();
   if (!trimmed) return "My Design System";
@@ -801,6 +1611,40 @@ Received ${signal}, shutting down TokVista...`);
   process.on("SIGINT", () => shutdown("SIGINT"));
   process.on("SIGTERM", () => shutdown("SIGTERM"));
 }
+async function runExportCommand(cwd, options) {
+  const resolvedTokenPath = path.resolve(cwd, options.tokenFileArg);
+  if (!existsSync(resolvedTokenPath)) {
+    throw new Error(`Token file not found: ${resolvedTokenPath}`);
+  }
+  const tokens = await readTokens(resolvedTokenPath);
+  let output;
+  let defaultFilename;
+  switch (options.format) {
+    case "css":
+      output = generateCSS(tokens);
+      defaultFilename = "tokens.css";
+      break;
+    case "scss":
+      output = generateSCSS(tokens);
+      defaultFilename = "_tokens.scss";
+      break;
+    case "json":
+      output = generateJS(tokens);
+      defaultFilename = "tokens.js";
+      break;
+    case "tailwind":
+      output = generateTailwind(tokens);
+      defaultFilename = "tailwind.config.js";
+      break;
+  }
+  if (options.output) {
+    const outputPath = path.resolve(cwd, options.output);
+    await writeFile(outputPath, output, "utf8");
+    console.log(`Exported ${options.format} to ${outputPath}`);
+  } else {
+    console.log(output);
+  }
+}
 async function main() {
   try {
     const options = parseArgs(process.argv.slice(2));
@@ -812,6 +1656,10 @@ async function main() {
       }
       return;
     }
+    if (options.command === "export") {
+      await runExportCommand(cwd, options);
+      return;
+    }
     await runServeCommand(cwd, options);
   } catch (error) {
     console.error(error.message);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokvista",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "Interactive visual documentation for design tokens.",
   "type": "module",
   "main": "./dist/index.cjs",