designmaxxing 0.1.0

package/dist/extractors/visual.js

@@ -0,0 +1,7 @@
+import { BaseExtractor } from './base.js';
+export class VisualExtractor extends BaseExtractor {
+    async extract() {
+        throw new Error('VisualExtractor not implemented');
+    }
+}
+//# sourceMappingURL=visual.js.map

package/dist/extractors/visual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual.js","sourceRoot":"","sources":["../../src/extractors/visual.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAGzC,MAAM,OAAO,eAAgB,SAAQ,aAAqC;IACxE,KAAK,CAAC,OAAO;QACX,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAA;IACpD,CAAC;CACF"}

package/dist/generators/component-inventory.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentExtractionResult } from '../types/extraction.js';
+import type { DesignTokens, ComponentInventory } from '../types/tokens.js';
+export declare function generateComponentInventory(components: ComponentExtractionResult, tokens?: DesignTokens): ComponentInventory;
+//# sourceMappingURL=component-inventory.d.ts.map

package/dist/generators/component-inventory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-inventory.d.ts","sourceRoot":"","sources":["../../src/generators/component-inventory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAkB,MAAM,wBAAwB,CAAA;AACvF,OAAO,KAAK,EAAE,YAAY,EAA8C,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAyNtH,wBAAgB,0BAA0B,CACxC,UAAU,EAAE,yBAAyB,EACrC,MAAM,CAAC,EAAE,YAAY,GACpB,kBAAkB,CA0CpB"}

package/dist/generators/component-inventory.js

@@ -0,0 +1,218 @@
+// ---------------------------------------------------------------------------
+// Color helpers (parse rgb(r, g, b) → hex for token matching)
+// ---------------------------------------------------------------------------
+function rgbStringToHex(rgb) {
+    const match = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/.exec(rgb.trim());
+    if (!match)
+        return null;
+    const r = parseInt(match[1], 10);
+    const g = parseInt(match[2], 10);
+    const b = parseInt(match[3], 10);
+    return '#' + [r, g, b].map(n => n.toString(16).padStart(2, '0')).join('');
+}
+function normalizeColorToHex(value) {
+    const trimmed = value.trim();
+    if (/^#[0-9a-fA-F]{6}$/.test(trimmed))
+        return trimmed.toLowerCase();
+    const fromRgb = rgbStringToHex(trimmed);
+    if (fromRgb)
+        return fromRgb.toLowerCase();
+    return null;
+}
+// ---------------------------------------------------------------------------
+// Categorization
+// ---------------------------------------------------------------------------
+function extractTagFromSelector(selector) {
+    // Take the first word-like segment (tag name) from the selector
+    const match = /^([a-zA-Z][a-zA-Z0-9]*)/.exec(selector.trim());
+    return match ? match[1].toLowerCase() : '';
+}
+function extractClassesFromSelector(selector) {
+    // Collect all .className parts from the selector
+    const matches = selector.match(/\.([a-zA-Z0-9_-]+)/g);
+    return matches ? matches.map(c => c.slice(1)).join(' ') : '';
+}
+function selectorContains(selector, term) {
+    return selector.toLowerCase().includes(term.toLowerCase());
+}
+function classContains(classes, term) {
+    return classes.toLowerCase().split(/\s+/).some(c => c.includes(term.toLowerCase()));
+}
+function categorize(component) {
+    const selector = component.selector;
+    const tag = extractTagFromSelector(selector);
+    const classes = extractClassesFromSelector(selector);
+    // button
+    if (tag === 'button' ||
+        selectorContains(selector, '[role="button"]') ||
+        classContains(classes, 'btn')) {
+        return 'button';
+    }
+    // input
+    if (tag === 'input' || tag === 'select' || tag === 'textarea' || tag === 'form') {
+        return 'input';
+    }
+    // card
+    if (classContains(classes, 'card') ||
+        classContains(classes, 'panel') ||
+        classContains(classes, 'tile')) {
+        return 'card';
+    }
+    // navigation
+    if (tag === 'nav' ||
+        tag === 'header' ||
+        tag === 'footer' ||
+        selectorContains(selector, '[role="navigation"]') ||
+        classContains(classes, 'nav') ||
+        classContains(classes, 'menu') ||
+        classContains(classes, 'sidebar')) {
+        return 'navigation';
+    }
+    // media
+    if (tag === 'img' ||
+        tag === 'video' ||
+        tag === 'svg' ||
+        tag === 'picture' ||
+        tag === 'figure' ||
+        selectorContains(selector, '[role="img"]')) {
+        return 'media';
+    }
+    // typography
+    if (tag === 'p' ||
+        tag === 'h1' || tag === 'h2' || tag === 'h3' ||
+        tag === 'h4' || tag === 'h5' || tag === 'h6' ||
+        tag === 'span' ||
+        tag === 'label' ||
+        classContains(classes, 'text') ||
+        classContains(classes, 'title') ||
+        classContains(classes, 'heading')) {
+        return 'typography';
+    }
+    // layout
+    if (tag === 'div' ||
+        tag === 'section' ||
+        tag === 'main' ||
+        tag === 'article' ||
+        tag === 'aside' ||
+        selectorContains(selector, 'container') ||
+        selectorContains(selector, 'wrapper') ||
+        selectorContains(selector, 'layout') ||
+        selectorContains(selector, 'grid') ||
+        selectorContains(selector, 'flex')) {
+        return 'layout';
+    }
+    return 'other';
+}
+// ---------------------------------------------------------------------------
+// Name generation
+// ---------------------------------------------------------------------------
+function selectorToName(selector) {
+    // Strip CSS specificity symbols
+    const stripped = selector.replace(/[#.\[\]:>+~\s]/g, '');
+    if (stripped.length > 0)
+        return stripped;
+    // Fallback to tag name
+    return extractTagFromSelector(selector) || 'component';
+}
+function deduplicateNames(names) {
+    const counts = new Map();
+    const seen = new Map();
+    const result = [];
+    // Count occurrences first
+    for (const name of names) {
+        counts.set(name, (counts.get(name) ?? 0) + 1);
+    }
+    for (const name of names) {
+        if ((counts.get(name) ?? 0) > 1) {
+            const index = (seen.get(name) ?? 0) + 1;
+            seen.set(name, index);
+            result.push(index === 1 ? name : `${name}-${index}`);
+        }
+        else {
+            result.push(name);
+        }
+    }
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Token mapping
+// ---------------------------------------------------------------------------
+function buildTokenMappings(component, tokens) {
+    if (!tokens)
+        return {};
+    // Collect all CSS property values from all states.
+    // Use Object.create(null) to prevent prototype pollution from user-controlled CSS property keys.
+    const allProps = Object.create(null);
+    for (const stateStyles of Object.values(component.states)) {
+        for (const [prop, value] of Object.entries(stateStyles)) {
+            if (Object.prototype.hasOwnProperty.call(Object.prototype, prop))
+                continue;
+            allProps[prop] = value;
+        }
+    }
+    if (Object.keys(allProps).length === 0)
+        return {};
+    // Build a lookup: hex → token name for all color tokens
+    const hexToTokenName = new Map();
+    for (const [tokenName, tokenValue] of Object.entries(tokens.colors)) {
+        const hex = normalizeColorToHex(tokenValue);
+        if (hex)
+            hexToTokenName.set(hex, tokenName);
+    }
+    const mappings = Object.create(null);
+    for (const [prop, value] of Object.entries(allProps)) {
+        const hex = normalizeColorToHex(value);
+        if (hex) {
+            const tokenName = hexToTokenName.get(hex);
+            if (tokenName) {
+                mappings[prop] = `var(--color-${tokenName})`;
+            }
+            else {
+                mappings[prop] = value;
+            }
+        }
+    }
+    return mappings;
+}
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+export function generateComponentInventory(components, tokens) {
+    const entries = components.components;
+    if (entries.length === 0) {
+        const emptyCategories = {
+            button: 0, input: 0, card: 0, navigation: 0,
+            layout: 0, typography: 0, media: 0, other: 0,
+        };
+        return {
+            components: [],
+            categories: emptyCategories,
+            totalComponents: 0,
+        };
+    }
+    // Generate raw names before dedup
+    const rawNames = entries.map(c => selectorToName(c.selector));
+    const deduped = deduplicateNames(rawNames);
+    const inventoryEntries = entries.map((component, i) => ({
+        name: deduped[i],
+        category: categorize(component),
+        selector: component.selector,
+        html: component.html,
+        tokenMappings: buildTokenMappings(component, tokens),
+        states: component.states,
+        dimensions: component.dimensions,
+    }));
+    const categoryCounts = {
+        button: 0, input: 0, card: 0, navigation: 0,
+        layout: 0, typography: 0, media: 0, other: 0,
+    };
+    for (const entry of inventoryEntries) {
+        categoryCounts[entry.category]++;
+    }
+    return {
+        components: inventoryEntries,
+        categories: categoryCounts,
+        totalComponents: inventoryEntries.length,
+    };
+}
+//# sourceMappingURL=component-inventory.js.map

package/dist/generators/component-inventory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-inventory.js","sourceRoot":"","sources":["../../src/generators/component-inventory.ts"],"names":[],"mappings":"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"}

package/dist/generators/design-tokens.d.ts

@@ -0,0 +1,5 @@
+import type { VisualExtractionResult, TypographyExtractionResult, LayoutExtractionResult } from '../types/extraction.js';
+import type { DesignTokens, TokenOutputFormat } from '../types/tokens.js';
+export declare function generateDesignTokens(visual: VisualExtractionResult, typography: TypographyExtractionResult, layout?: LayoutExtractionResult): DesignTokens;
+export declare function formatTokens(tokens: DesignTokens, format: TokenOutputFormat): string;
+//# sourceMappingURL=design-tokens.d.ts.map

package/dist/generators/design-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../src/generators/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,0BAA0B,EAC1B,sBAAsB,EAGvB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAmB,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAuS1F,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,sBAAsB,EAC9B,UAAU,EAAE,0BAA0B,EACtC,MAAM,CAAC,EAAE,sBAAsB,GAC9B,YAAY,CAoBd;AAyID,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAOpF"}

package/dist/generators/design-tokens.js

@@ -0,0 +1,384 @@
+// ---------------------------------------------------------------------------
+// Color helpers
+// ---------------------------------------------------------------------------
+function parseHex(hex) {
+    const clean = hex.replace('#', '');
+    if (clean.length !== 6)
+        return null;
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    if (isNaN(r) || isNaN(g) || isNaN(b))
+        return null;
+    return [r, g, b];
+}
+function colorDistance(a, b) {
+    const pa = parseHex(a);
+    const pb = parseHex(b);
+    if (!pa || !pb)
+        return Infinity;
+    return Math.sqrt(Math.pow(pa[0] - pb[0], 2) +
+        Math.pow(pa[1] - pb[1], 2) +
+        Math.pow(pa[2] - pb[2], 2));
+}
+function clusterColors(colors) {
+    const clusters = [];
+    for (const color of colors) {
+        let placed = false;
+        for (const cluster of clusters) {
+            const representative = cluster[0];
+            if (colorDistance(color.hex, representative.hex) < 50) {
+                cluster.push(color);
+                placed = true;
+                break;
+            }
+        }
+        if (!placed) {
+            clusters.push([color]);
+        }
+    }
+    // Pick the most-used entry from each cluster as canonical
+    return clusters.map(cluster => cluster.reduce((best, c) => (c.usageCount > best.usageCount ? c : best), cluster[0]));
+}
+function buildColorTokens(colors) {
+    if (colors.length === 0)
+        return {};
+    const sorted = [...colors].sort((a, b) => b.usageCount - a.usageCount);
+    const canonical = clusterColors(sorted).sort((a, b) => b.usageCount - a.usageCount);
+    const tokens = {};
+    let colorIndex = 1;
+    let bgAssigned = false;
+    let textAssigned = false;
+    for (const entry of canonical) {
+        const isBackground = entry.properties.some(p => p.includes('background') || p.includes('Background'));
+        const isText = entry.properties.some(p => p.includes('color') && !p.includes('background') && !p.includes('Background'));
+        if (isBackground && !bgAssigned) {
+            tokens['bg-primary'] = entry.hex;
+            bgAssigned = true;
+        }
+        else if (isText && !textAssigned) {
+            tokens['text-primary'] = entry.hex;
+            textAssigned = true;
+        }
+        else {
+            tokens[`color-${colorIndex}`] = entry.hex;
+            colorIndex++;
+        }
+    }
+    return tokens;
+}
+// ---------------------------------------------------------------------------
+// Typography helpers
+// ---------------------------------------------------------------------------
+const SIZE_NAMES = [
+    { name: 'text-xs', px: 12 },
+    { name: 'text-sm', px: 14 },
+    { name: 'text-base', px: 16 },
+    { name: 'text-lg', px: 18 },
+    { name: 'text-xl', px: 20 },
+    { name: 'text-2xl', px: 24 },
+    { name: 'text-3xl', px: 30 },
+];
+function closestSizeName(px) {
+    let best = SIZE_NAMES[0];
+    let bestDist = Math.abs(px - best.px);
+    for (const s of SIZE_NAMES) {
+        const d = Math.abs(px - s.px);
+        if (d < bestDist) {
+            bestDist = d;
+            best = s;
+        }
+    }
+    return best.name;
+}
+function parsePx(value) {
+    const match = /^([\d.]+)px$/.exec(value.trim());
+    if (!match)
+        return null;
+    return parseFloat(match[1]);
+}
+function buildTypographyTokens(scale) {
+    if (scale.length === 0)
+        return {};
+    // --- Font families ---
+    const familyCount = new Map();
+    for (const entry of scale) {
+        const fam = entry.fontFamily.trim();
+        if (fam) {
+            familyCount.set(fam, (familyCount.get(fam) ?? 0) + entry.usageCount);
+        }
+    }
+    const familiesByFreq = [...familyCount.entries()].sort((a, b) => b[1] - a[1]);
+    const familyTokens = {};
+    let bodyAssigned = false;
+    let headingAssigned = false;
+    for (const [fam] of familiesByFreq) {
+        const lower = fam.toLowerCase();
+        if (lower.includes('mono') || lower.includes('courier') || lower.includes('code')) {
+            if (!familyTokens['font-mono'])
+                familyTokens['font-mono'] = fam;
+        }
+        else if (!bodyAssigned) {
+            familyTokens['font-body'] = fam;
+            bodyAssigned = true;
+        }
+        else if (!headingAssigned) {
+            familyTokens['font-heading'] = fam;
+            headingAssigned = true;
+        }
+    }
+    // --- Font sizes ---
+    const sizeCount = new Map();
+    for (const entry of scale) {
+        const sz = entry.fontSize.trim();
+        if (sz) {
+            sizeCount.set(sz, (sizeCount.get(sz) ?? 0) + entry.usageCount);
+        }
+    }
+    const sizesByFreq = [...sizeCount.entries()].sort((a, b) => {
+        const pa = parsePx(a[0]) ?? 0;
+        const pb = parsePx(b[0]) ?? 0;
+        return pb - pa; // descending by numeric value
+    });
+    const usedSizeNames = new Set();
+    const sizeTokens = {};
+    for (const [sz] of sizesByFreq) {
+        const px = parsePx(sz);
+        if (px === null)
+            continue;
+        let name = closestSizeName(px);
+        // If name already used, append incrementing suffix
+        if (usedSizeNames.has(name)) {
+            let i = 2;
+            while (usedSizeNames.has(`${name}-${i}`))
+                i++;
+            name = `${name}-${i}`;
+        }
+        usedSizeNames.add(name);
+        sizeTokens[name] = sz;
+    }
+    // --- Build TypographyToken records by font-family role ---
+    const tokens = {};
+    // Emit family tokens as simple TypographyTokens (size/weight/etc left as defaults)
+    for (const [role, fam] of Object.entries(familyTokens)) {
+        tokens[role] = {
+            fontFamily: fam,
+            fontSize: '1rem',
+            fontWeight: '400',
+            lineHeight: '1.5',
+            letterSpacing: '0',
+        };
+    }
+    // Emit size tokens
+    for (const [role, sz] of Object.entries(sizeTokens)) {
+        // Find a representative entry for this size
+        const rep = scale.find(e => e.fontSize.trim() === sz.trim()) ?? scale[0];
+        tokens[role] = {
+            fontFamily: rep.fontFamily,
+            fontSize: sz,
+            fontWeight: rep.fontWeight,
+            lineHeight: rep.lineHeight,
+            letterSpacing: rep.letterSpacing,
+        };
+    }
+    return tokens;
+}
+// ---------------------------------------------------------------------------
+// Spacing helpers
+// ---------------------------------------------------------------------------
+function pxToRem(px) {
+    return `${(px / 16).toFixed(4).replace(/\.?0+$/, '')}rem`;
+}
+function buildSpacingTokens(visual) {
+    // VisualExtractionResult has no dedicated spacing array; return empty.
+    void visual;
+    return {};
+}
+// ---------------------------------------------------------------------------
+// Border radius helpers
+// ---------------------------------------------------------------------------
+function normalizeBorderRadiusName(value, index) {
+    const trimmed = value.trim();
+    if (trimmed === '0' || trimmed === '0px')
+        return 'rounded-none';
+    const px = parsePx(trimmed);
+    if (px !== null) {
+        if (px >= 9999)
+            return 'rounded-full';
+        if (px <= 2)
+            return 'rounded-sm';
+        if (px <= 4)
+            return 'rounded';
+        if (px <= 6)
+            return 'rounded-md';
+        if (px <= 12)
+            return 'rounded-lg';
+        return `rounded-${index + 1}`;
+    }
+    if (trimmed === '50%')
+        return 'rounded-full';
+    return `rounded-${index + 1}`;
+}
+function buildBorderRadiusTokens(borderRadii) {
+    if (borderRadii.length === 0)
+        return {};
+    const unique = [...new Set(borderRadii.map(r => r.trim()).filter(r => r))];
+    const sorted = unique.sort((a, b) => {
+        const pa = parsePx(a) ?? 0;
+        const pb = parsePx(b) ?? 0;
+        return pa - pb;
+    });
+    const tokens = {};
+    const usedNames = new Set();
+    sorted.forEach((val, i) => {
+        let name = normalizeBorderRadiusName(val, i);
+        if (usedNames.has(name)) {
+            let j = 2;
+            while (usedNames.has(`${name}-${j}`))
+                j++;
+            name = `${name}-${j}`;
+        }
+        usedNames.add(name);
+        tokens[name] = val;
+    });
+    return tokens;
+}
+// ---------------------------------------------------------------------------
+// Shadow helpers
+// ---------------------------------------------------------------------------
+const SHADOW_NAMES = ['shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl'];
+function buildShadowTokens(shadows) {
+    if (shadows.length === 0)
+        return {};
+    const unique = [...new Set(shadows.map(s => s.trim()).filter(s => s && s !== 'none'))];
+    const tokens = {};
+    unique.forEach((val, i) => {
+        const name = i < SHADOW_NAMES.length ? SHADOW_NAMES[i] : `shadow-${i + 1}`;
+        tokens[name] = val;
+    });
+    return tokens;
+}
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+export function generateDesignTokens(visual, typography, layout) {
+    const breakpoints = {};
+    if (layout) {
+        for (const bp of layout.breakpoints) {
+            if (bp.minWidth !== null) {
+                breakpoints[`screen-min-${bp.minWidth}`] = `${bp.minWidth}px`;
+            }
+        }
+    }
+    return {
+        colors: buildColorTokens(visual.colors),
+        typography: buildTypographyTokens(typography.scale),
+        spacing: buildSpacingTokens(visual),
+        borderRadius: buildBorderRadiusTokens(visual.borderRadii),
+        shadows: buildShadowTokens(visual.shadows),
+        breakpoints,
+        transitions: {},
+        zIndex: {},
+    };
+}
+// ---------------------------------------------------------------------------
+// Format helpers
+// ---------------------------------------------------------------------------
+function toCssVarName(category, key) {
+    return `--${category}-${key}`.replace(/[^a-zA-Z0-9-]/g, '-');
+}
+function formatJson(tokens) {
+    return JSON.stringify(tokens, null, 2);
+}
+function formatCss(tokens) {
+    const lines = [':root {'];
+    // Strip newlines and closing-brace sequences from CSS values to prevent ruleset injection.
+    const escCss = (s) => s.replace(/\r?\n/g, ' ').replace(/}/g, '');
+    function section(comment, entries) {
+        if (entries.length === 0)
+            return;
+        lines.push(`  /* ${comment} */`);
+        for (const [key, value] of entries) {
+            lines.push(`  ${key}: ${escCss(value)};`);
+        }
+    }
+    section('Colors', Object.entries(tokens.colors).map(([k, v]) => [toCssVarName('color', k), v]));
+    section('Typography', Object.entries(tokens.typography).flatMap(([k, v]) => [
+        [toCssVarName('font-family', k), v.fontFamily],
+        [toCssVarName('font-size', k), v.fontSize],
+        [toCssVarName('font-weight', k), v.fontWeight],
+        [toCssVarName('line-height', k), v.lineHeight],
+        [toCssVarName('letter-spacing', k), v.letterSpacing],
+    ]));
+    section('Spacing', Object.entries(tokens.spacing).map(([k, v]) => [toCssVarName('spacing', k), v]));
+    section('Border Radius', Object.entries(tokens.borderRadius).map(([k, v]) => [toCssVarName('radius', k), v]));
+    section('Shadows', Object.entries(tokens.shadows).map(([k, v]) => [toCssVarName('shadow', k), v]));
+    section('Breakpoints', Object.entries(tokens.breakpoints).map(([k, v]) => [toCssVarName('breakpoint', k), v]));
+    lines.push('}');
+    return lines.join('\n');
+}
+function formatTailwind(tokens) {
+    const colorEntries = Object.entries(tokens.colors);
+    const spacingEntries = Object.entries(tokens.spacing);
+    const borderRadiusEntries = Object.entries(tokens.borderRadius);
+    const shadowEntries = Object.entries(tokens.shadows);
+    const breakpointEntries = Object.entries(tokens.breakpoints);
+    const fontFamilyEntries = Object.entries(tokens.typography).map(([k, v]) => [k, v.fontFamily]);
+    const fontSizeEntries = Object.entries(tokens.typography).map(([k, v]) => [k, v.fontSize]);
+    // Escape single quotes so that user-controlled values (e.g. font family names)
+    // cannot break out of the string literal in the generated TypeScript config file.
+    const escTs = (s) => s.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\r?\n/g, ' ');
+    function obj(entries) {
+        if (entries.length === 0)
+            return '{}';
+        const inner = entries.map(([k, v]) => `      '${escTs(k)}': '${escTs(v)}'`).join(',\n');
+        return `{\n${inner}\n    }`;
+    }
+    return [
+        'export default {',
+        '  theme: {',
+        '    extend: {',
+        `    colors: ${obj(colorEntries)},`,
+        `    fontFamily: ${obj(fontFamilyEntries)},`,
+        `    fontSize: ${obj(fontSizeEntries)},`,
+        `    spacing: ${obj(spacingEntries)},`,
+        `    borderRadius: ${obj(borderRadiusEntries)},`,
+        `    boxShadow: ${obj(shadowEntries)},`,
+        `    screens: ${obj(breakpointEntries)},`,
+        '    },',
+        '  },',
+        '}',
+    ].join('\n');
+}
+function formatScss(tokens) {
+    const lines = [];
+    // Strip newlines and semicolons from SCSS values to prevent property injection.
+    const escScss = (s) => s.replace(/\r?\n/g, ' ').replace(/;/g, '');
+    function section(comment, entries) {
+        if (entries.length === 0)
+            return;
+        lines.push(`// ${comment}`);
+        for (const [key, value] of entries) {
+            const varName = `$${key}`.replace(/[^a-zA-Z0-9-_$]/g, '-');
+            lines.push(`${varName}: ${escScss(value)};`);
+        }
+        lines.push('');
+    }
+    section('Colors', Object.entries(tokens.colors));
+    section('Typography — Font Families', Object.entries(tokens.typography).map(([k, v]) => [`${k}-family`, v.fontFamily]));
+    section('Typography — Font Sizes', Object.entries(tokens.typography).map(([k, v]) => [`${k}-size`, v.fontSize]));
+    section('Spacing', Object.entries(tokens.spacing));
+    section('Border Radius', Object.entries(tokens.borderRadius));
+    section('Shadows', Object.entries(tokens.shadows));
+    section('Breakpoints', Object.entries(tokens.breakpoints));
+    return lines.join('\n').trimEnd();
+}
+export function formatTokens(tokens, format) {
+    switch (format) {
+        case 'json': return formatJson(tokens);
+        case 'css': return formatCss(tokens);
+        case 'tailwind': return formatTailwind(tokens);
+        case 'scss': return formatScss(tokens);
+    }
+}
+//# sourceMappingURL=design-tokens.js.map