Upload folder using huggingface_hub

CLAUDE.md

@@ -1,11 +1,77 @@
-# Design System Extractor v3.1 — Project Context
+# Design System Extractor v3.2 — Project Context
 
 ## Overview
 
 A multi-agent system that extracts, analyzes, and recommends improvements for design systems from websites. The system operates in two stages:
 
-1. **Stage 1 (Deterministic)**: Extract CSS values → Normalize → Rule Engine analysis → **Rule-Based Color Classification** (free, no LLM)
-2. **Stage 2 (LLM-powered, advisory only)**: Brand insights → Benchmark comparison → Best practices → Final synthesis
+1. **Stage 1 (Deterministic)**: Extract CSS values → Normalize (colors, radius, shadows, typography, spacing) → Rule Engine analysis → **Rule-Based Color Classification** (free, no LLM)
+2. **Stage 2 (LLM-powered)**: Brand identification (AURORA) → Benchmark comparison (ATLAS) → Best practices (SENTINEL) → Synthesis (NEXUS)
+3. **Export**: W3C DTCG v1 compliant JSON → Figma Plugin (visual spec + styles/variables)
+
+---
+
+## CURRENT STATUS: v3.2 (Feb 2026)
+
+### What's Working
+
+| Component | Status | Notes |
+|-----------|--------|-------|
+| CSS Extraction (Playwright) | ✅ Working | Desktop + mobile viewports |
+| Color normalization | ✅ Working | Single numeric shade system (50-900) |
+| Color classification | ✅ Working | `core/color_classifier.py` (815 lines, 100% deterministic) |
+| Radius normalization | ✅ Working | Parse, deduplicate, sort, name (none/sm/md/lg/xl/2xl/full) |
+| Shadow normalization | ✅ Working | Parse, sort by blur, deduplicate, name (xs/sm/md/lg/xl) |
+| Typography normalization | ✅ Working | Desktop/mobile split, weight suffix |
+| Spacing normalization | ✅ Working | GCD-based grid detection, base-8 alignment |
+| Rule engine | ✅ Working | Type scale, WCAG AA, spacing grid, color statistics |
+| LLM agents (ReAct) | ✅ Working | AURORA, ATLAS, SENTINEL, NEXUS with critic/retry |
+| W3C DTCG export | ✅ Working | $value, $type, $description, $extensions |
+| Figma plugin - visual spec | ✅ Working | Separate frames, AA badges, horizontal layout |
+| Figma plugin - styles/variables | ✅ Working | Paint, text, effect styles + variable collections |
+| Shadow interpolation | ✅ Working | Always produces 5 levels (xs→xl), interpolates if fewer extracted |
+
+### Architecture Decisions (v3.2)
+
+#### Naming Authority Chain (RESOLVED)
+The three-naming-system conflict from v2/v3.0 is resolved:
+
+```
+1. Color Classifier (PRIMARY) — deterministic, covers ALL colors
+   └── Rule-based: CSS evidence → category → token name
+   └── 100% reproducible, logged with evidence
+
+2. AURORA LLM (SECONDARY) — semantic role enhancer ONLY
+   └── Can promote "color.blue.500" → "color.brand.primary"
+   └── CANNOT rename palette colors
+   └── Only brand/text/bg/border/feedback roles accepted
+   └── filter_aurora_naming_map() enforces this boundary
+
+3. Normalizer (FALLBACK) — preliminary hue+shade names
+   └── Only used if classifier hasn't run yet
+   └── _generate_preliminary_name() → "color.blue.500"
+```
+
+**app.py `_get_semantic_color_overrides()`** implements this chain:
+- PRIMARY: `state.color_classification.colors` (from color_classifier)
+- SECONDARY: `state.brand_result.naming_map` (from AURORA, filtered to semantic roles only)
+
+**`_generate_color_name_from_hex()`** is DEPRECATED — kept as thin wrapper for edge cases.
+
+#### W3C DTCG v1 Compliance (2025.10 Spec)
+- `$type` values: `color`, `dimension`, `typography`, `shadow`
+- `$value` for all token values
+- `$description` for human-readable descriptions
+- `$extensions` with namespaced metadata: `com.design-system-extractor`
+  - Colors: `{frequency, confidence, category, evidence}`
+  - Radius: `{frequency, fitsBase4, fitsBase8}`
+  - Shadows: `{frequency, rawCSS, blurPx}`
+- Nested structure (not flat)
+- `_flat_key_to_nested()` prevents nesting inside DTCG leaf nodes
+
+#### Deprecated Components
+- `agents/semantic_analyzer.py` — superseded by color_classifier + normalizer._infer_role_hint()
+- `agents/stage2_graph.py` — old LangGraph parallel system, replaced by direct async in app.py
+- `app.py _generate_color_name_from_hex()` — third naming system, now thin wrapper
 
 ---
 
@@ -30,10 +96,11 @@ CSS Evidence → Category:
   everything else → PALETTE (named by hue.shade)
 ```
 
-### What AURORA Does Now (Advisory Only)
-- Does NOT output naming_map
+### What AURORA Does Now
 - Provides brand insights, palette strategy, cohesion score
-- LLM reasoning is shown in logs but doesn't affect token names
+- naming_map is filtered to semantic roles only (brand/text/bg/border/feedback)
+- LLM reasoning is shown in logs
+- `filter_aurora_naming_map()` in llm_agents.py enforces the boundary
 
 ### Files Changed in v3.1
 - `core/color_classifier.py` — NEW: Rule-based classifier with dedup, caps, naming conventions
@@ -43,6 +110,24 @@ CSS Evidence → Category:
 
 ---
 
+## v3.2 FIX: DTCG COMPLIANCE + NAMING AUTHORITY (Feb 2026)
+
+### What Changed
+1. **W3C DTCG v1 strict compliance**: `_to_dtcg_token()` now supports `$extensions` with namespaced metadata
+2. **Single naming authority resolved**: Color classifier is PRIMARY, AURORA is SECONDARY (semantic roles only)
+3. **`_get_semantic_color_overrides()` rewritten**: Uses classifier as primary, AURORA filtered to role-only names
+4. **`filter_aurora_naming_map()` added**: In llm_agents.py, strips non-semantic names from AURORA output
+5. **`_generate_color_name_from_hex()` deprecated**: Thin wrapper using `categorize_color()` from color_utils
+6. **`semantic_analyzer.py` deprecated**: Marked with deprecation notice, functionality absorbed elsewhere
+
+### Files Changed in v3.2
+- `app.py` — DTCG helpers enhanced, `_get_semantic_color_overrides()` rewritten, hex-name function deprecated
+- `agents/llm_agents.py` — Added `filter_aurora_naming_map()` function
+- `agents/semantic_analyzer.py` — Deprecated with notice
+- `CLAUDE.md` — Updated to current status
+
+---
+
 ## PREVIOUS STATUS (v3.0 and earlier): BROKEN — RETHINK COMPLETED
 
 ### What's Wrong (observed from real site tests)
@@ -1008,54 +1093,77 @@ NormalizedTokens:
 
 ---
 
-## REVISED EXECUTION ORDER (Stage 1 fixes interleaved, not deferred)
-
-The original plan was "fix Stage 2 first, Stage 1 later." But the audit reveals:
-**If normalizer sends word-based shade names to AURORA, AURORA's ReAct naming will STILL conflict with normalizer names in the export merge.**
-
-The pre-processing layer (Step 2 in the old plan) was supposed to fix this. But that's a bandaid — it re-normalizes what the normalizer already normalized. It's cleaner to fix the normalizer itself so it produces correct output from the start.
+## EXECUTION STATUS (Updated Feb 2026)
 
-### New Execution Order:
+### Phases 1-3: COMPLETED
 
 ```
-PHASE 1: FIX NORMALIZER (makes Stage 1 output clean)
-  1a. Unify color naming → numeric shades only
-  1b. Add radius normalization (parse, deduplicate, sort, name)
-  1c. Add shadow normalization (parse, sort by blur, name)
-  1d. Feed semantic_analyzer role hints into normalizer
-
-PHASE 2: FIX STAGE 2 (agents can now trust their input)
-  2a. Consolidate two Stage 2 systems into one
-  2b. Rewrite AURORA with ReAct + critic (names ALL colors, not 10)
-  2c. Rewrite SENTINEL with grounded scoring + critic
-  2d. Rewrite NEXUS with ToT
-  2e. Add post-validation layer
-
-PHASE 3: FIX EXPORT (single naming authority)
-  3a. AURORA naming_map is THE authority (not 3-way merge)
-  3b. Radius/shadow export uses normalizer output directly
-  3c. Validation before JSON write
-
-PHASE 4: FIX EXTRACTION (nice-to-have, not blocking)
-  4a. Font family detection improvement
-  4b. Rule engine: radius grid analysis
-  4c. Rule engine: shadow elevation analysis
+PHASE 1: FIX NORMALIZER ✅ DONE
+  1a. ✅ Unify color naming → numeric shades only (_generate_preliminary_name)
+  1b. ✅ Add radius normalization (parse, deduplicate, sort, name) — normalizer.py:626-778
+  1c. ✅ Add shadow normalization (parse, sort by blur, name) — normalizer.py:784-940
+  1d. ✅ Feed role hints into normalizer — normalizer._infer_role_hint()
+
+PHASE 2: FIX STAGE 2 ✅ DONE
+  2a. ✅ Consolidated — llm_agents.py is primary, stage2_graph.py deprecated
+  2b. ✅ AURORA with ReAct + critic + retry — llm_agents.py:420-470
+  2c. ✅ SENTINEL with grounded scoring + cross-reference critic
+  2d. ✅ NEXUS with ToT (two-perspective evaluation)
+  2e. ✅ Post-validation layer — post_validate_stage2()
+
+PHASE 3: FIX EXPORT ✅ DONE (v3.2)
+  3a. ✅ Color classifier = PRIMARY authority, AURORA = semantic roles only
+  3b. ✅ Radius/shadow export uses normalizer output directly
+  3c. ✅ W3C DTCG v1 compliance with $extensions metadata
+  3d. ✅ filter_aurora_naming_map() enforces role-only boundary
+
+PHASE 4: EXTRACTION IMPROVEMENTS (NOT STARTED)
+  4a. ❌ Font family detection — still returns "sans-serif" fallback
+  4b. ❌ Rule engine: radius grid analysis
+  4c. ❌ Rule engine: shadow elevation analysis
 ```
 
-### Why this order is better:
+### PHASE 5: COMPONENT GENERATION (FUTURE — NOT STARTED)
 
-1. **Phase 1 first** because AURORA can't name colors well if the input names are garbage. The ReAct prompt says "observe your naming" but if the LLM sees `color.blue.light` in its input AND is asked to output `color.blue.300`, it gets confused.
+Based on strategic research (Feb 2026), the next major feature is automated component generation in Figma:
+
+```
+PHASE 5: FIGMA COMPONENT GENERATION
+  5a. Component Definition Schema (JSON defining anatomy + token bindings + variants)
+  5b. Token-to-Component binding engine
+  5c. Figma Plugin: createComponent() + combineAsVariants() + setBoundVariable()
+  5d. MVP Components: Button (60 variants), TextInput (8), Card (2), Toast (4), Checkbox+Radio (12)
+  5e. Variable Collections: Primitives, Semantic, Spacing, Radius, Typography
+
+PHASE 6: ECOSYSTEM INTEGRATION
+  6a. Style Dictionary v4 compatible output (50+ platform formats for free)
+  6b. Tokens Studio compatible JSON import
+  6c. Dembrandt JSON as alternative input source
+  6d. CI/CD GitHub Action for design system regression checks
+
+PHASE 7: MCP INTEGRATION
+  7a. Expose extractor as MCP tool server
+  7b. Claude Desktop: "Extract design system from example.com"
+  7c. Community Figma MCP bridge for push-to-Figma
+```
 
-2. **Phase 2 after Phase 1** because now the LLM agents receive clean, consistently-named input. AURORA's job becomes "confirm or improve these names" rather than "fix the mess from normalizer."
+### Strategic Positioning
 
-3. **Phase 3 after Phase 2** because the export layer just needs to respect one naming authority (AURORA), not reconcile three.
+**"Lighthouse for Design Systems"** — We are NOT a token management platform (Tokens Studio), NOT a documentation platform (Zeroheight), NOT an extraction tool (Dembrandt). We are the **automated audit + bootstrap tool** that sits upstream of all of those.
 
-4. **Phase 4 last** because font family and enhanced rule engine analysis are improvements, not blockers.
+**Unique differentiators no competitor has:**
+- Type scale ratio detection + standard scale matching
+- Spacing grid detection (GCD-based, base-8 alignment scoring)
+- LLM brand identification from CSS usage patterns
+- Holistic design system quality score (0-100)
+- Visual spec page auto-generated in Figma
+- Benchmark comparison against established design systems
 
-### Deploy Plan:
-- **Deploy 1**: After Phase 1 (normalizer fixes) — even without Stage 2 improvements, the export will be cleaner
-- **Deploy 2**: After Phase 2 + 3 (full Stage 2 rework + export) — the big quality jump
-- **Deploy 3**: After Phase 4 (font family, enhanced analysis) — polish
+**Key competitors to watch:**
+- Dembrandt (1,300★) — does extraction better, but no analysis
+- Tokens Studio (264K users) — does Figma management better, but no extraction
+- Knapsack ($10M funding) — building ingestion engine, biggest strategic threat
+- html.to.design — captures layouts but not tokens/variables
 
 ---
 

agents/llm_agents.py

@@ -1214,6 +1214,34 @@ def _apply_sentinel_fixes(result: BestPracticesResult, rule_engine, errors: list
     return result
 
 
+def filter_aurora_naming_map(aurora: BrandIdentification) -> dict:
+    """Filter AURORA naming_map to only keep semantic role assignments.
+
+    AURORA is a secondary naming authority — it can assign semantic roles
+    (brand.primary, text.secondary, bg.primary, feedback.error, etc.)
+    but cannot override palette names (blue.500, neutral.700, etc.).
+
+    The color_classifier is the primary naming authority.
+
+    Returns:
+        Dict of hex -> semantic_name (only role-based names).
+    """
+    SEMANTIC_PREFIXES = ('brand.', 'text.', 'bg.', 'border.', 'feedback.')
+    filtered = {}
+
+    for hex_val, name in (aurora.naming_map or {}).items():
+        hex_clean = str(hex_val).strip().lower()
+        if not hex_clean.startswith('#') or not name:
+            continue
+        clean_name = name if name.startswith('color.') else f'color.{name}'
+        # Extract the part after "color."
+        after_prefix = clean_name[6:]  # "brand.primary", "blue.500", etc.
+        if any(after_prefix.startswith(sp) for sp in SEMANTIC_PREFIXES):
+            filtered[hex_clean] = clean_name
+
+    return filtered
+
+
 def post_validate_stage2(
     aurora: BrandIdentification,
     sentinel: BestPracticesResult,

agents/semantic_analyzer.py

@@ -2,6 +2,15 @@
 Agent 1C: Semantic Color Analyzer
 Design System Extractor v2
 
+⚠️  DEPRECATED in v3.2 — Superseded by:
+  - core/color_classifier.py (rule-based, primary naming authority)
+  - agents/normalizer.py._infer_role_hint() (role hints for AURORA)
+  - AURORA agent in llm_agents.py (semantic role enhancement only)
+
+This module is kept for backward compatibility but should not be called
+in the main pipeline. Its heuristics have been absorbed into
+normalizer._infer_role_hint() and color_classifier.classify_colors().
+
 Persona: Design System Semanticist
 
 Responsibilities:

app.py

@@ -1502,14 +1502,12 @@ async def run_stage2_analysis_v2(
             shadow_count = 0
             if state.desktop_normalized:
                 shadow_count = len(getattr(state.desktop_normalized, 'shadows', {}))
-            tobe_shadow_count = min(shadow_count, 5)  # Export only what was extracted (capped at 5)
-            _SHADOW_LABELS = {1: "md", 2: "sm → lg", 3: "sm → md → lg", 4: "xs → sm → lg → xl", 5: "xs → sm → md → lg → xl"}
-            tobe_label = _SHADOW_LABELS.get(tobe_shadow_count, f"{tobe_shadow_count} levels")
+            tobe_shadow_count = max(shadow_count, 5) if shadow_count > 0 else 0  # Always 5 levels (interpolated)
             cards.append(_render_as_is_to_be(
-                "Shadows", f"{shadow_count} levels",
+                "Shadows", f"{shadow_count} extracted",
                 "Elevation tokens" if shadow_count > 0 else "No shadows found",
                 f"{tobe_shadow_count} levels",
-                tobe_label,
+                "xs → sm → md → lg → xl" + (f" (interpolated from {shadow_count})" if shadow_count < 5 else ""),
                 icon="🌫️"
             ))
             asis_tobe_html = "".join(cards)
@@ -2949,20 +2947,29 @@ def _flat_key_to_nested(flat_key: str, value: dict, root: dict):
     current[parts[-1]] = value
 
 
-def _to_dtcg_token(value, token_type: str, description: str = None, source: str = None) -> dict:
-    """Wrap value in W3C DTCG format with $value, $type, $description.
+def _to_dtcg_token(value, token_type: str, description: str = None,
+                    source: str = None, extensions: dict = None) -> dict:
+    """Wrap value in W3C DTCG v1 (2025.10) format.
+
+    Spec: https://www.designtokens.org/tr/drafts/format/
 
     Args:
         value: The token value
-        token_type: W3C DTCG type (color, typography, dimension, shadow)
+        token_type: W3C DTCG type — must be one of:
+            color, dimension, fontFamily, fontWeight, number,
+            duration, cubicBezier, shadow, strokeStyle, border,
+            transition, gradient, typography
         description: Optional human-readable description
         source: Optional source indicator (extracted, recommended, semantic)
+        extensions: Optional dict for $extensions (custom metadata like frequency, confidence)
     """
     token = {"$type": token_type, "$value": value}
-    if description:
+    if description and source:
+        token["$description"] = f"[{source}] {description}"
+    elif description:
         token["$description"] = description
-    if source:
-        token["$description"] = f"[{source}] {description or ''}"
+    if extensions:
+        token["$extensions"] = {"com.design-system-extractor": extensions}
     return token
 
 
@@ -2984,21 +2991,42 @@ def _shadow_to_dtcg(shadow_dict: dict) -> dict:
 def _get_semantic_color_overrides() -> dict:
     """Build color hex->semantic name map.
 
-    v3: AURORA naming_map is the SINGLE naming authority.
-    Falls back to normalizer suggested_name, then _generate_color_name_from_hex.
+    v3.2: Color classifier is the PRIMARY naming authority (deterministic, reproducible).
+    AURORA is a SECONDARY enhancer — it can only ADD semantic role names
+    (brand.primary, text.secondary, etc.) but cannot override palette names.
+
+    Authority chain:
+      1. Color classifier (rule-based, covers ALL colors)
+      2. AURORA naming_map (LLM, only brand/text/bg/border/feedback roles accepted)
+      3. Normalizer suggested_name (fallback)
     """
     overrides = {}  # hex -> semantic_name
 
-    # PRIMARY: AURORA's naming_map (covers ALL colors if critic passed)
+    # PRIMARY: Color classifier (deterministic, covers ALL colors)
+    classified = getattr(state, 'color_classification', None)
+    if classified and hasattr(classified, 'colors'):
+        for cc in classified.colors:
+            hex_clean = cc.hex.strip().lower()
+            if hex_clean.startswith('#') and cc.token_name:
+                overrides[hex_clean] = cc.token_name
+
+    # SECONDARY: AURORA naming_map — ONLY accept semantic role upgrades
+    # AURORA can promote "color.blue.500" to "color.brand.primary"
+    # but cannot rename palette colors to different palette names
+    _SEMANTIC_ROLES = {'brand.', 'text.', 'bg.', 'border.', 'feedback.'}
     brand_result = getattr(state, 'brand_result', None)
     if brand_result:
         naming_map = getattr(brand_result, 'naming_map', None)
         if isinstance(naming_map, dict) and naming_map:
             for hex_val, name in naming_map.items():
                 hex_clean = str(hex_val).strip().lower()
-                if hex_clean.startswith('#') and name:
-                    # Ensure color. prefix
-                    clean_name = name if name.startswith('color.') else f'color.{name}'
+                if not hex_clean.startswith('#') or not name:
+                    continue
+                clean_name = name if name.startswith('color.') else f'color.{name}'
+                # Only accept semantic role names from AURORA
+                name_after_color = clean_name[6:]  # strip "color."
+                is_semantic_role = any(name_after_color.startswith(r) for r in _SEMANTIC_ROLES)
+                if is_semantic_role:
                     overrides[hex_clean] = clean_name
 
     return overrides
@@ -3015,90 +3043,48 @@ def _is_valid_hex_color(value: str) -> bool:
 
 
 def _generate_color_name_from_hex(hex_val: str, used_names: set = None) -> str:
-    """Generate a semantic color name based on the color's HSL characteristics.
+    """DEPRECATED: Use normalizer._generate_preliminary_name() instead.
 
-    Returns names like: color.neutral.400, color.blue.500, color.red.300
-    Uses standard design system naming conventions.
+    Kept as thin wrapper for backward compatibility.
+    Delegates to normalizer's naming logic via color_utils.categorize_color().
     """
+    from core.color_utils import categorize_color, parse_color
     import colorsys
 
     used_names = used_names or set()
 
-    # Parse hex to RGB
     hex_clean = hex_val.lstrip('#').lower()
     if len(hex_clean) == 3:
-        hex_clean = ''.join([c*2 for c in hex_clean])
+        hex_clean = ''.join([c * 2 for c in hex_clean])
 
     try:
         r = int(hex_clean[0:2], 16) / 255
         g = int(hex_clean[2:4], 16) / 255
         b = int(hex_clean[4:6], 16) / 255
     except (ValueError, IndexError):
-        return "color.other.base"
+        return "color.other.500"
 
-    # Convert to HSL
     h, l, s = colorsys.rgb_to_hls(r, g, b)
-    hue = h * 360
-    saturation = s
-    lightness = l
-
-    # Determine color family based on hue (for saturated colors)
-    if saturation < 0.1:
-        # Grayscale / neutral
-        color_family = "neutral"
-    else:
-        # Map hue to color name
-        if hue < 15 or hue >= 345:
-            color_family = "red"
-        elif hue < 45:
-            color_family = "orange"
-        elif hue < 75:
-            color_family = "yellow"
-        elif hue < 150:
-            color_family = "green"
-        elif hue < 195:
-            color_family = "teal"
-        elif hue < 255:
-            color_family = "blue"
-        elif hue < 285:
-            color_family = "purple"
-        elif hue < 345:
-            color_family = "pink"
-        else:
-            color_family = "red"
-
-    # Determine shade based on lightness (100-900 scale)
-    if lightness >= 0.95:
-        shade = "50"
-    elif lightness >= 0.85:
-        shade = "100"
-    elif lightness >= 0.75:
-        shade = "200"
-    elif lightness >= 0.65:
-        shade = "300"
-    elif lightness >= 0.50:
-        shade = "400"
-    elif lightness >= 0.40:
-        shade = "500"
-    elif lightness >= 0.30:
-        shade = "600"
-    elif lightness >= 0.20:
-        shade = "700"
-    elif lightness >= 0.10:
-        shade = "800"
-    else:
-        shade = "900"
+    color_family = categorize_color(hex_val) or "neutral"
+
+    # Numeric shade from lightness (matches normalizer._generate_preliminary_name)
+    if l >= 0.95: shade = "50"
+    elif l >= 0.85: shade = "100"
+    elif l >= 0.75: shade = "200"
+    elif l >= 0.65: shade = "300"
+    elif l >= 0.50: shade = "400"
+    elif l >= 0.40: shade = "500"
+    elif l >= 0.30: shade = "600"
+    elif l >= 0.20: shade = "700"
+    elif l >= 0.10: shade = "800"
+    else: shade = "900"
 
-    # Generate base name
     base_name = f"color.{color_family}.{shade}"
-
-    # Handle conflicts by adding suffix
     final_name = base_name
     suffix = 1
     while final_name in used_names:
         suffix += 1
         final_name = f"{base_name}_{suffix}"
-
     return final_name
 
 
@@ -3212,7 +3198,14 @@ def export_stage1_json(convention: str = "semantic"):
             log_callback=state.log,
         )
         for c in classification.colors:
-            dtcg_token = _to_dtcg_token(c.hex, "color", description=f"Rule-based: {c.category}")
+            ext = {"frequency": c.frequency, "confidence": c.confidence, "category": c.category}
+            if c.evidence:
+                ext["evidence"] = c.evidence[:3]  # Top 3 evidence items
+            dtcg_token = _to_dtcg_token(
+                c.hex, "color",
+                description=f"{c.category}: {c.role}",
+                extensions=ext,
+            )
             _flat_key_to_nested(c.token_name, dtcg_token, result)
             token_count += 1
 
@@ -3287,7 +3280,7 @@ def export_stage1_json(convention: str = "semantic"):
             token_count += 1
 
     # =========================================================================
-    # BORDER RADIUS — Nested structure (DTCG uses "dimension" type for radii)
+    # BORDER RADIUS — W3C DTCG "dimension" type
     # =========================================================================
     if state.desktop_normalized and state.desktop_normalized.radius:
         seen_radius = {}
@@ -3296,7 +3289,14 @@ def export_stage1_json(convention: str = "semantic"):
             if token_name is None:
                 continue  # Duplicate radius — skip
             flat_key = token_name
-            dtcg_token = _to_dtcg_token(r.value, "dimension", description="Extracted from site")
+            ext = {"frequency": r.frequency}
+            if hasattr(r, 'fits_base_4') and r.fits_base_4 is not None:
+                ext["fitsBase4"] = r.fits_base_4
+            if hasattr(r, 'fits_base_8') and r.fits_base_8 is not None:
+                ext["fitsBase8"] = r.fits_base_8
+            dtcg_token = _to_dtcg_token(r.value, "dimension",
+                                         description=f"Border radius ({name})",
+                                         extensions=ext)
             _flat_key_to_nested(flat_key, dtcg_token, result)
             token_count += 1
 
@@ -3304,18 +3304,22 @@ def export_stage1_json(convention: str = "semantic"):
     # SHADOWS — W3C DTCG shadow format
     # =========================================================================
     if state.desktop_normalized and state.desktop_normalized.shadows:
-        shadow_names = ["xs", "sm", "md", "lg", "xl", "2xl"]
+        shadow_tier_names = ["xs", "sm", "md", "lg", "xl", "2xl"]
         sorted_shadows = sorted(
             state.desktop_normalized.shadows.items(),
             key=lambda x: _get_shadow_blur(x[1].value),
         )
         for i, (name, s) in enumerate(sorted_shadows):
-            size_name = shadow_names[i] if i < len(shadow_names) else str(i + 1)
+            size_name = shadow_tier_names[i] if i < len(shadow_tier_names) else str(i + 1)
             flat_key = f"shadow.{size_name}"
-            # Parse CSS shadow and convert to DTCG format
             parsed = _parse_shadow_to_tokens_studio(s.value)
             dtcg_shadow_value = _shadow_to_dtcg(parsed)
-            dtcg_token = _to_dtcg_token(dtcg_shadow_value, "shadow", description="Extracted from site")
+            ext = {"frequency": s.frequency, "rawCSS": s.value}
+            if hasattr(s, 'blur_px') and s.blur_px is not None:
+                ext["blurPx"] = s.blur_px
+            dtcg_token = _to_dtcg_token(dtcg_shadow_value, "shadow",
+                                         description=f"Elevation {size_name}",
+                                         extensions=ext)
             _flat_key_to_nested(flat_key, dtcg_token, result)
             token_count += 1
 
@@ -3605,16 +3609,11 @@ def export_tokens_json(convention: str = "semantic"):
             token_count += 1
 
     # =========================================================================
-    # SHADOWS — W3C DTCG format — export ONLY what was actually extracted
+    # SHADOWS — W3C DTCG format — always produce 5 elevation levels (xs→xl)
+    # Interpolates between extracted shadows to fill missing levels.
     # =========================================================================
-    # Name mapping: assign best-fit names based on how many shadows were found
-    _SHADOW_NAMES_BY_COUNT = {
-        1: ["shadow.md"],
-        2: ["shadow.sm", "shadow.lg"],
-        3: ["shadow.sm", "shadow.md", "shadow.lg"],
-        4: ["shadow.xs", "shadow.sm", "shadow.lg", "shadow.xl"],
-        5: ["shadow.xs", "shadow.sm", "shadow.md", "shadow.lg", "shadow.xl"],
-    }
+    TARGET_SHADOW_COUNT = 5
+    shadow_names = ["shadow.xs", "shadow.sm", "shadow.md", "shadow.lg", "shadow.xl"]
 
     if state.desktop_normalized and state.desktop_normalized.shadows:
         sorted_shadows = sorted(
@@ -3634,16 +3633,54 @@ def export_tokens_json(convention: str = "semantic"):
                 "color": p.get("color", "rgba(0,0,0,0.25)"),
             })
 
+        # Interpolation helpers
+        def _lerp(a, b, t):
+            return a + (b - a) * t
+
+        def _lerp_shadow(s1, s2, t):
+            """Interpolate between two shadow dicts at factor t (0.0=s1, 1.0=s2)."""
+            import re
+            interp = {
+                "x": round(_lerp(s1["x"], s2["x"], t), 1),
+                "y": round(_lerp(s1["y"], s2["y"], t), 1),
+                "blur": round(_lerp(s1["blur"], s2["blur"], t), 1),
+                "spread": round(_lerp(s1["spread"], s2["spread"], t), 1),
+            }
+            alpha1, alpha2 = 0.25, 0.25
+            m1 = re.search(r'rgba?\([^)]*,\s*([\d.]+)\)', s1["color"])
+            m2 = re.search(r'rgba?\([^)]*,\s*([\d.]+)\)', s2["color"])
+            if m1: alpha1 = float(m1.group(1))
+            if m2: alpha2 = float(m2.group(1))
+            interp_alpha = round(_lerp(alpha1, alpha2, t), 3)
+            interp["color"] = f"rgba(0, 0, 0, {interp_alpha})"
+            return interp
+
+        final_shadows = []
         n = len(parsed_shadows)
-        # Cap at 5 maximum, take first 5 sorted by blur
-        final_shadows = parsed_shadows[:5]
-        names = _SHADOW_NAMES_BY_COUNT.get(len(final_shadows))
-        if names is None:
-            # Fallback for n > 5: xs, sm, md, lg, xl
-            names = [f"shadow.{i+1}" for i in range(len(final_shadows))]
+        if n >= TARGET_SHADOW_COUNT:
+            final_shadows = parsed_shadows[:TARGET_SHADOW_COUNT]
+        elif n == 1:
+            base = parsed_shadows[0]
+            for i in range(TARGET_SHADOW_COUNT):
+                factor = (i + 1) / 3.0
+                final_shadows.append({
+                    "x": round(base["x"] * factor, 1),
+                    "y": round(max(1, base["y"] * factor), 1),
+                    "blur": round(max(1, base["blur"] * factor), 1),
+                    "spread": round(base["spread"] * factor, 1),
+                    "color": f"rgba(0, 0, 0, {round(0.04 + i * 0.04, 3)})",
+                })
+        elif n >= 2:
+            for i in range(TARGET_SHADOW_COUNT):
+                t = i / (TARGET_SHADOW_COUNT - 1)
+                src_pos = t * (n - 1)
+                lo = int(src_pos)
+                hi = min(lo + 1, n - 1)
+                frac = src_pos - lo
+                final_shadows.append(_lerp_shadow(parsed_shadows[lo], parsed_shadows[hi], frac))
 
         for i, shadow in enumerate(final_shadows):
-            token_name = names[i] if i < len(names) else f"shadow.{i + 1}"
+            token_name = shadow_names[i] if i < len(shadow_names) else f"shadow.{i + 1}"
             dtcg_value = {
                 "color": shadow["color"],
                 "offsetX": f"{shadow['x']}px",

output_json/figma-plugin-extracted/figma-design-token-creator 5/src/code.js

@@ -40,6 +40,31 @@ function hexToRgb(hex) {
   } : { r: 0, g: 0, b: 0 };
 }
 
+// WCAG 2.1 contrast ratio calculation
+function getRelativeLuminance(rgb) {
+  function sRGB(c) { return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); }
+  return 0.2126 * sRGB(rgb.r) + 0.7152 * sRGB(rgb.g) + 0.0722 * sRGB(rgb.b);
+}
+function getContrastRatio(hex1, hex2) {
+  var l1 = getRelativeLuminance(hexToRgb(hex1));
+  var l2 = getRelativeLuminance(hexToRgb(hex2));
+  var lighter = Math.max(l1, l2);
+  var darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function getAAResult(hex) {
+  var onWhite = getContrastRatio(hex, '#ffffff');
+  var onBlack = getContrastRatio(hex, '#000000');
+  var bestRatio = Math.max(onWhite, onBlack);
+  var bestOn = onWhite >= onBlack ? 'white' : 'black';
+  return {
+    ratio: Math.round(bestRatio * 10) / 10,
+    passAA: bestRatio >= 4.5,
+    passAAA: bestRatio >= 7,
+    bestOn: bestOn
+  };
+}
+
 // Helper to convert font weight to Figma font style name
 function getFontStyleFromWeight(weight) {
   var weightStr = String(weight).toLowerCase();
@@ -782,301 +807,499 @@ figma.ui.onmessage = async function(msg) {
   }
 
   // ==========================================
-  // VISUAL SPEC GENERATOR
-  // Creates a visual reference page showing all tokens
+  // ==========================================
+  // VISUAL SPEC GENERATOR v3 — Material Design best-practices layout
+  // Each section in its own Figma FRAME. AA contrast badges. Prominent labels.
   // ==========================================
   if (msg.type === 'create-visual-spec') {
     try {
       var rawTokens = msg.tokens;
-
-      // Validate tokens exist
       if (!rawTokens) {
-        figma.ui.postMessage({
-          type: 'error',
-          message: 'No tokens provided. Please load a JSON file first.'
-        });
+        figma.ui.postMessage({ type: 'error', message: 'No tokens provided. Please load a JSON file first.' });
         return;
       }
 
-      console.log('Creating visual spec with tokens:', Object.keys(rawTokens));
       var tokens = normalizeTokens(rawTokens);
-      console.log('Normalized tokens - colors:', tokens.colors.length, 'typography:', tokens.typography.length);
-
-      // Use current page instead of creating new page (Figma Starter plan has 3-page limit)
       var specPage = figma.currentPage;
       specPage.name = '🎨 Design System Spec';
+      while (specPage.children.length > 0) { specPage.children[0].remove(); }
+
+      // ── Constants (Material Design / Carbon inspired) ──
+      var FRAME_W = 1440;
+      var CONTENT_W = 1200;
+      var MARGIN = 120;
+      var SECTION_PAD = 48;
+      var SECTION_GAP = 40;  // gap between frames on the page
+      var ITEM_GAP = 16;
+      var SWATCH_W = 160;
+      var SWATCH_H_COLOR = 64;
+      var SWATCH_META_H = 72;
+      var SWATCH_GAP = 12;
+
+      // ── Load fonts ──
+      var labelFont = { family: 'Inter', style: 'Regular' };
+      var boldFont = { family: 'Inter', style: 'Regular' };
+      await figma.loadFontAsync(labelFont);
+      try { await figma.loadFontAsync({ family: 'Inter', style: 'Bold' }); boldFont = { family: 'Inter', style: 'Bold' }; } catch (e) {}
+
+      // Try loading extracted font
+      var sampleFontFamily = 'Inter';
+      var sampleFont = labelFont;
+      var sampleFontBold = boldFont;
+      for (var fi = 0; fi < tokens.typography.length; fi++) {
+        var ff = (tokens.typography[fi].value.fontFamily || '').split(',')[0].trim();
+        if (ff && ff !== 'Inter' && ff !== 'sans-serif' && ff !== 'serif') { sampleFontFamily = ff; break; }
+      }
+      if (sampleFontFamily !== 'Inter') {
+        try {
+          await figma.loadFontAsync({ family: sampleFontFamily, style: 'Regular' });
+          sampleFont = { family: sampleFontFamily, style: 'Regular' };
+          try { await figma.loadFontAsync({ family: sampleFontFamily, style: 'Bold' }); sampleFontBold = { family: sampleFontFamily, style: 'Bold' }; } catch (e2) { sampleFontBold = sampleFont; }
+        } catch (e) { sampleFontFamily = 'Inter'; sampleFont = labelFont; sampleFontBold = boldFont; }
+      }
 
-      // Clear existing children on the page so spec starts fresh
-      while (specPage.children.length > 0) {
-        specPage.children[0].remove();
+      // Collect all frames — position them at the very end
+      var allFrames = [];
+
+      // ── Helper: create a section FRAME (positioned later) ──
+      function createSectionFrame(name, contentHeight) {
+        var frame = figma.createFrame();
+        frame.name = name;
+        frame.resize(FRAME_W, contentHeight);
+        frame.x = 0;
+        frame.y = 0; // will be repositioned at the end
+        frame.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }];
+        frame.clipsContent = false;
+        specPage.appendChild(frame);
+        allFrames.push(frame);
+        return frame;
       }
 
-      var yOffset = 0;
-      var xOffset = 0;
-      var sectionGap = 80;
-      var itemGap = 16;
-
-      // Load Inter font for labels (with fallbacks for environments missing styles)
-      var headingStyle = 'Regular';
-      await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
-      try {
-        await figma.loadFontAsync({ family: 'Inter', style: 'Bold' });
-        headingStyle = 'Bold';
-      } catch (e) {
-        console.warn('Inter Bold not available, using Regular for headings');
+      // ── Helper: add text to a frame ──
+      function addText(frame, text, font, size, x, y, color) {
+        var t = figma.createText();
+        t.fontName = font;
+        t.fontSize = size;
+        t.characters = text;
+        t.fills = [{ type: 'SOLID', color: color || { r: 0.1, g: 0.1, b: 0.1 } }];
+        t.x = x; t.y = y;
+        frame.appendChild(t);
+        return t;
       }
 
-      // === COLORS SECTION ===
+      var MUTED = { r: 0.5, g: 0.5, b: 0.5 };
+      var DARK = { r: 0.12, g: 0.12, b: 0.12 };
+      var BLUE = { r: 0.15, g: 0.45, b: 0.95 };
+
+      // ══════════════════════════════════════════════════════════
+      // TITLE FRAME
+      // ══════════════════════════════════════════════════════════
+      var titleFrame = createSectionFrame('Title', 120);
+      addText(titleFrame, 'Design System Specification', boldFont, 36, MARGIN, 32, DARK);
+      addText(titleFrame, 'Font: ' + sampleFontFamily, labelFont, 14, MARGIN, 80, MUTED);
+
+      // ══════════════════════════════════════════════════════════
+      // COLORS FRAME — grouped by category with AA badges
+      // ══════════════════════════════════════════════════════════
       if (tokens.colors.length > 0) {
+        // Group colors by category
+        var colorGroups = {};
+        var groupOrder = [];
+        for (var ci = 0; ci < tokens.colors.length; ci++) {
+          var cat = tokens.colors[ci].name.split('/')[0] || 'other';
+          if (!colorGroups[cat]) { colorGroups[cat] = []; groupOrder.push(cat); }
+          colorGroups[cat].push(tokens.colors[ci]);
+        }
+        // Sort: semantic first, then palette
+        var semOrder = ['brand', 'text', 'bg', 'background', 'border', 'feedback'];
+        var sortedGroups = [];
+        for (var so = 0; so < semOrder.length; so++) { if (colorGroups[semOrder[so]]) sortedGroups.push(semOrder[so]); }
+        for (var go = 0; go < groupOrder.length; go++) { if (sortedGroups.indexOf(groupOrder[go]) === -1) sortedGroups.push(groupOrder[go]); }
+
+        // Calculate initial height estimate (will be resized at end)
+        var colorsPerRow = Math.floor((CONTENT_W - 140 + SWATCH_GAP) / (SWATCH_W + SWATCH_GAP));
+        var totalColorH = 2000; // generous initial estimate, resized later
+
+        var colorFrame = createSectionFrame('Colors', totalColorH);
+        var cy = SECTION_PAD;
+
         // Section title
-        var colorTitle = figma.createText();
-        colorTitle.characters = 'COLORS';
-        colorTitle.fontName = { family: 'Inter', style: headingStyle };
-        colorTitle.fontSize = 24;
-        colorTitle.x = xOffset;
-        colorTitle.y = yOffset;
-        specPage.appendChild(colorTitle);
-        yOffset += 50;
-
-        var colorX = xOffset;
-        var colorY = yOffset;
-        var swatchSize = 60;
-        var swatchGap = 16;
-        var colsPerRow = 6;
+        addText(colorFrame, 'COLORS', boldFont, 32, MARGIN, cy, DARK);
+        cy += 48;
+
+        // Helper to render a single color card at position
+        function renderColorCard(frame, ct, sx, sy) {
+            var swatch = figma.createRectangle();
+            swatch.resize(SWATCH_W, SWATCH_H_COLOR);
+            swatch.x = sx; swatch.y = sy;
+            swatch.topLeftRadius = 8; swatch.topRightRadius = 8;
+            swatch.fills = [{ type: 'SOLID', color: hexToRgb(ct.value) }];
+            frame.appendChild(swatch);
+
+            // AA badge
+            var aa = getAAResult(ct.value);
+            var badgeText = aa.passAA ? 'AA ✓ ' + aa.ratio + ':1' : 'AA ✗ ' + aa.ratio + ':1';
+            var badgeColor = aa.bestOn === 'white' ? { r: 1, g: 1, b: 1 } : { r: 0, g: 0, b: 0 };
+            addText(frame, badgeText, labelFont, 10, sx + 8, sy + SWATCH_H_COLOR - 18, badgeColor);
+
+            // Metadata area
+            var metaBg = figma.createRectangle();
+            metaBg.resize(SWATCH_W, SWATCH_META_H);
+            metaBg.x = sx; metaBg.y = sy + SWATCH_H_COLOR;
+            metaBg.bottomLeftRadius = 8; metaBg.bottomRightRadius = 8;
+            metaBg.fills = [{ type: 'SOLID', color: { r: 0.97, g: 0.97, b: 0.98 } }];
+            metaBg.strokes = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }];
+            metaBg.strokeWeight = 1;
+            frame.appendChild(metaBg);
+
+            var nameParts = ct.name.split('/');
+            var displayName = nameParts.filter(function(p) { return p !== 'DEFAULT'; }).join('/');
+            addText(frame, displayName, boldFont, 11, sx + 10, sy + SWATCH_H_COLOR + 8, DARK);
+            addText(frame, ct.value.toUpperCase(), labelFont, 11, sx + 10, sy + SWATCH_H_COLOR + 26, MUTED);
+
+            var contrastText = aa.passAA ? 'AA Pass on ' + aa.bestOn : 'AA Fail (' + aa.ratio + ':1)';
+            var contrastColor = aa.passAA ? { r: 0.13, g: 0.55, b: 0.13 } : { r: 0.85, g: 0.18, b: 0.18 };
+            addText(frame, contrastText, labelFont, 10, sx + 10, sy + SWATCH_H_COLOR + 44, contrastColor);
+        }
 
-        for (var ci = 0; ci < tokens.colors.length; ci++) {
-          var colorToken = tokens.colors[ci];
-          var col = ci % colsPerRow;
-          var row = Math.floor(ci / colsPerRow);
-
-          // Color swatch
-          var swatch = figma.createRectangle();
-          swatch.resize(swatchSize, swatchSize);
-          swatch.x = colorX + col * (swatchSize + swatchGap);
-          swatch.y = colorY + row * (swatchSize + swatchGap + 30);
-          swatch.cornerRadius = 8;
-
-          var rgb = hexToRgb(colorToken.value);
-          swatch.fills = [{ type: 'SOLID', color: rgb }];
-          swatch.strokes = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }];
-          swatch.strokeWeight = 1;
-          specPage.appendChild(swatch);
-
-          // Color name label
-          var colorLabel = figma.createText();
-          colorLabel.characters = colorToken.name.split('/').pop() || colorToken.name;
-          colorLabel.fontName = { family: 'Inter', style: 'Regular' };
-          colorLabel.fontSize = 10;
-          colorLabel.x = swatch.x;
-          colorLabel.y = swatch.y + swatchSize + 4;
-          specPage.appendChild(colorLabel);
-
-          // Color value label
-          var valueLabel = figma.createText();
-          valueLabel.characters = colorToken.value.toUpperCase();
-          valueLabel.fontName = { family: 'Inter', style: 'Regular' };
-          valueLabel.fontSize = 9;
-          valueLabel.fills = [{ type: 'SOLID', color: { r: 0.5, g: 0.5, b: 0.5 } }];
-          valueLabel.x = swatch.x;
-          valueLabel.y = swatch.y + swatchSize + 16;
-          specPage.appendChild(valueLabel);
+        var isSemantic = { 'brand': 1, 'text': 1, 'bg': 1, 'background': 1, 'border': 1, 'feedback': 1 };
+        var CARD_H = SWATCH_H_COLOR + SWATCH_META_H + ITEM_GAP;
+
+        for (var gi = 0; gi < sortedGroups.length; gi++) {
+          var gName = sortedGroups[gi];
+          var gColors = colorGroups[gName];
+
+          // Group heading
+          addText(colorFrame, gName.charAt(0).toUpperCase() + gName.slice(1), boldFont, 18, MARGIN, cy, DARK);
+          cy += 36;
+
+          if (isSemantic[gName]) {
+            // ── SEMANTIC LAYOUT: sub-group by 2nd path segment, each on own row ──
+            // e.g. brand/primary/DEFAULT, brand/primary/50 → sub-group "primary"
+            //      feedback/error/DEFAULT, feedback/info/DEFAULT → sub-groups "error", "info"
+            var subGroups = {};
+            var subOrder = [];
+            for (var si = 0; si < gColors.length; si++) {
+              var sp = gColors[si].name.split('/');
+              var subKey = sp.length > 1 ? sp[1] : sp[0];
+              if (!subGroups[subKey]) { subGroups[subKey] = []; subOrder.push(subKey); }
+              subGroups[subKey].push(gColors[si]);
+            }
+
+            for (var ski = 0; ski < subOrder.length; ski++) {
+              var subName = subOrder[ski];
+              var subColors = subGroups[subName];
+
+              // Row label on the left
+              addText(colorFrame, subName, boldFont, 13, MARGIN, cy + 30, MUTED);
+
+              // Swatches start after label
+              var labelW = 140;
+              for (var sci = 0; sci < subColors.length; sci++) {
+                var scx = MARGIN + labelW + sci * (SWATCH_W + SWATCH_GAP);
+                renderColorCard(colorFrame, subColors[sci], scx, cy);
+              }
+
+              cy += CARD_H + 8;
+            }
+          } else {
+            // ── PALETTE LAYOUT: horizontal grid (50-900 ramp) ──
+            for (var ci2 = 0; ci2 < gColors.length; ci2++) {
+              var ct = gColors[ci2];
+              var col = ci2 % colorsPerRow;
+              var row = Math.floor(ci2 / colorsPerRow);
+              var sx = MARGIN + col * (SWATCH_W + SWATCH_GAP);
+              var sy = cy + row * CARD_H;
+              renderColorCard(colorFrame, ct, sx, sy);
+            }
+
+            var gRows = Math.ceil(gColors.length / colorsPerRow);
+            cy += gRows * CARD_H + 16;
+          }
+
+          cy += 8; // gap between groups
         }
 
-        var colorRows = Math.ceil(tokens.colors.length / colsPerRow);
-        yOffset = colorY + colorRows * (swatchSize + swatchGap + 30) + sectionGap;
+        // Resize color frame to actual content
+        colorFrame.resize(FRAME_W, cy + SECTION_PAD);
       }
 
-      // === TYPOGRAPHY SECTION ===
-      // IMPORTANT: Only use already-loaded Inter Regular/Bold for ALL text in the spec.
-      // Never attempt to load custom fonts — they may not exist in the Figma environment
-      // and would crash the entire spec generation. Font details are shown as labels.
-      if (tokens.typography.length > 0) {
-        var typoTitle = figma.createText();
-        typoTitle.characters = 'TYPOGRAPHY';
-        typoTitle.fontName = { family: 'Inter', style: headingStyle };
-        typoTitle.fontSize = 24;
-        typoTitle.x = xOffset;
-        typoTitle.y = yOffset;
-        specPage.appendChild(typoTitle);
-        yOffset += 50;
-
-        for (var ti = 0; ti < tokens.typography.length; ti++) {
-          var typoToken = tokens.typography[ti];
-          var value = typoToken.value;
+      // ══════════════════════════════════════════════════════════
+      // TYPOGRAPHY DESKTOP FRAME
+      // ══════════════════════════════════════════════════════════
+      var desktopTypo = [];
+      var mobileTypo = [];
+      for (var tti = 0; tti < tokens.typography.length; tti++) {
+        if (tokens.typography[tti].name.toLowerCase().indexOf('mobile') > -1) {
+          mobileTypo.push(tokens.typography[tti]);
+        } else {
+          desktopTypo.push(tokens.typography[tti]);
+        }
+      }
 
-          var fontFamily = value.fontFamily || 'Inter';
-          if (fontFamily.indexOf(',') > -1) {
-            fontFamily = fontFamily.split(',')[0].trim();
-          }
-          var fontSize = parseNumericValue(value.fontSize) || 16;
-          var fontWeight = value.fontWeight || '400';
-          var displaySize = Math.min(fontSize, 48); // Cap display size
-
-          // Sample text — always use Inter (safe), size shows relative scale
-          var sampleText = figma.createText();
-          sampleText.fontName = { family: 'Inter', style: headingStyle };
-          sampleText.fontSize = displaySize;
-          sampleText.characters = typoToken.name.split('/').pop() || 'Sample Text';
-          sampleText.x = xOffset;
-          sampleText.y = yOffset;
-          specPage.appendChild(sampleText);
-
-          // Specs label — show the ACTUAL font specs as readable text
-          var specsLabel = figma.createText();
-          specsLabel.fontName = { family: 'Inter', style: 'Regular' };
-          specsLabel.fontSize = 11;
-          specsLabel.characters = fontFamily + '  ·  ' + fontSize + 'px  ·  wt ' + fontWeight;
-          specsLabel.fills = [{ type: 'SOLID', color: { r: 0.5, g: 0.5, b: 0.5 } }];
-          specsLabel.x = xOffset + 300;
-          specsLabel.y = yOffset + 4;
-          specPage.appendChild(specsLabel);
-
-          yOffset += Math.max(displaySize, 24) + itemGap;
+      function getSampleText(name) {
+        var n = name.toLowerCase();
+        if (n.indexOf('display') > -1) return 'The quick brown fox jumps over the lazy dog';
+        if (n.indexOf('heading') > -1) return 'The quick brown fox jumps over';
+        if (n.indexOf('body') > -1) return 'The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.';
+        if (n.indexOf('caption') > -1) return 'The quick brown fox jumps over the lazy dog';
+        if (n.indexOf('overline') > -1) return 'THE QUICK BROWN FOX JUMPS';
+        return 'The quick brown fox jumps over the lazy dog';
+      }
+
+      function renderTypoFrame(typoList, frameName) {
+        if (typoList.length === 0) return;
+
+        // Use generous initial height — will be resized to actual content
+        var estH = 3000;
+
+        var frame = createSectionFrame(frameName, estH);
+        var fy = SECTION_PAD;
+
+        addText(frame, frameName.toUpperCase(), boldFont, 32, MARGIN, fy, DARK);
+        fy += 52;
+
+        // Column headers
+        var COL_NAME = MARGIN;
+        var COL_SAMPLE = MARGIN + 180;
+        var COL_SPECS = MARGIN + 760;
+
+        addText(frame, 'Token', boldFont, 12, COL_NAME, fy, MUTED);
+        addText(frame, 'Sample', boldFont, 12, COL_SAMPLE, fy, MUTED);
+        addText(frame, 'Specifications', boldFont, 12, COL_SPECS, fy, MUTED);
+        fy += 28;
+
+        // Divider
+        var div = figma.createRectangle();
+        div.resize(CONTENT_W, 1); div.x = MARGIN; div.y = fy;
+        div.fills = [{ type: 'SOLID', color: { r: 0.88, g: 0.88, b: 0.88 } }];
+        frame.appendChild(div);
+        fy += 16;
+
+        for (var ti = 0; ti < typoList.length; ti++) {
+          var tt = typoList[ti];
+          var val = tt.value;
+          var fFamily = (val.fontFamily || 'Inter').split(',')[0].trim();
+          var fSize = parseNumericValue(val.fontSize) || 16;
+          var fWeight = val.fontWeight || '400';
+          var fLH = val.lineHeight || '1.5';
+          var displaySize = Math.min(fSize, 56);
+
+          // Token name column
+          var tierParts = tt.name.split('/');
+          var tierName = tierParts.filter(function(p) { return p !== 'desktop' && p !== 'mobile'; }).join('.');
+          addText(frame, tierName, boldFont, 13, COL_NAME, fy + 4, DARK);
+
+          // Sample text in actual font
+          var useBold = (tierName.indexOf('display') > -1 || tierName.indexOf('heading') > -1);
+          var sampleText = getSampleText(tt.name);
+          var sample = figma.createText();
+          sample.fontName = useBold ? sampleFontBold : sampleFont;
+          sample.fontSize = displaySize;
+          sample.textAutoResize = 'HEIGHT';
+          sample.resize(540, displaySize * 2);
+          sample.characters = sampleText;
+          sample.x = COL_SAMPLE; sample.y = fy;
+          frame.appendChild(sample);
+
+          // Manual height calculation — sample.height is unreliable in plugin API
+          var avgCharWidth = displaySize * 0.52;
+          var sampleColW = 540;
+          var charsPerLine = Math.max(1, Math.floor(sampleColW / avgCharWidth));
+          var numLines = Math.ceil(sampleText.length / charsPerLine);
+          var lineH = displaySize * 1.4;
+          var sampleH = Math.max(numLines * lineH, displaySize * 1.5);
+
+          // Specs column — stacked chips
+          var specY = fy;
+          addText(frame, 'Size: ' + fSize + 'px', boldFont, 12, COL_SPECS, specY, DARK);
+          specY += 18;
+          addText(frame, 'Weight: ' + fWeight, labelFont, 12, COL_SPECS, specY, MUTED);
+          specY += 18;
+          addText(frame, 'Line Height: ' + fLH, labelFont, 12, COL_SPECS, specY, MUTED);
+          specY += 18;
+          addText(frame, 'Font: ' + fFamily, labelFont, 12, COL_SPECS, specY, BLUE);
+
+          // Row height = max of (sample text height, spec labels height, minimum 40px)
+          var specsH = specY - fy + 24;
+          var rowH = Math.max(sampleH + 12, specsH, 40);
+          fy += rowH + 8;
+
+          // Row separator
+          var sep = figma.createRectangle();
+          sep.resize(CONTENT_W, 1); sep.x = MARGIN; sep.y = fy;
+          sep.fills = [{ type: 'SOLID', color: { r: 0.94, g: 0.94, b: 0.94 } }];
+          frame.appendChild(sep);
+          fy += 12;
         }
 
-        yOffset += sectionGap;
+        // Resize frame to actual content
+        frame.resize(FRAME_W, fy + SECTION_PAD);
       }
 
-      // === SPACING SECTION ===
+      renderTypoFrame(desktopTypo, 'Typography — Desktop');
+      renderTypoFrame(mobileTypo, 'Typography — Mobile');
+
+      // ══════════════════════════════════════════════════════════
+      // SPACING FRAME — Desktop & Mobile side by side, bars not squares
+      // ══════════════════════════════════════════════════════════
       if (tokens.spacing.length > 0) {
-        var spacingTitle = figma.createText();
-        spacingTitle.characters = 'SPACING';
-        spacingTitle.fontName = { family: 'Inter', style: headingStyle };
-        spacingTitle.fontSize = 24;
-        spacingTitle.x = xOffset;
-        spacingTitle.y = yOffset;
-        specPage.appendChild(spacingTitle);
-        yOffset += 50;
-
-        var spacingX = xOffset;
-        for (var si = 0; si < Math.min(tokens.spacing.length, 12); si++) {
-          var spacingToken = tokens.spacing[si];
-          var spacingValue = parseNumericValue(spacingToken.value);
-
-          // Spacing bar
-          var bar = figma.createRectangle();
-          bar.resize(Math.max(spacingValue, 4), 24);
-          bar.x = spacingX;
-          bar.y = yOffset;
-          bar.cornerRadius = 4;
-          bar.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.6, b: 1 } }];
-          specPage.appendChild(bar);
-
-          // Label
-          var spLabel = figma.createText();
-          spLabel.characters = spacingToken.name.split('/').pop() + ' = ' + spacingToken.value;
-          spLabel.fontName = { family: 'Inter', style: 'Regular' };
-          spLabel.fontSize = 11;
-          spLabel.x = spacingX;
-          spLabel.y = yOffset + 30;
-          specPage.appendChild(spLabel);
-
-          spacingX += Math.max(spacingValue, 40) + 24;
+        var dSpacing = [];
+        var mSpacing = [];
+        for (var spi = 0; spi < tokens.spacing.length; spi++) {
+          if (tokens.spacing[spi].name.toLowerCase().indexOf('mobile') > -1) {
+            mSpacing.push(tokens.spacing[spi]);
+          } else {
+            dSpacing.push(tokens.spacing[spi]);
+          }
         }
 
-        yOffset += 80 + sectionGap;
+        var maxItems = Math.max(dSpacing.length, mSpacing.length);
+        var spFrameH = SECTION_PAD + 60 + maxItems * 48 + SECTION_PAD;
+
+        var spFrame = createSectionFrame('Spacing', spFrameH);
+        var spy = SECTION_PAD;
+
+        addText(spFrame, 'SPACING', boldFont, 32, MARGIN, spy, DARK);
+        spy += 52;
+
+        // Render spacing column as horizontal bars (Carbon-style)
+        function renderSpacingBars(list, startX, title, y0) {
+          addText(spFrame, title, boldFont, 16, startX, y0, BLUE);
+          var ly = y0 + 32;
+
+          for (var si = 0; si < Math.min(list.length, 12); si++) {
+            var sp = list[si];
+            var spVal = parseNumericValue(sp.value);
+            var barW = Math.max(spVal * 3, 8); // Scale 3x for visibility
+            barW = Math.min(barW, 400); // Cap
+
+            // Token label
+            var spParts = sp.name.split('/');
+            var spDisplayName = spParts.filter(function(p) { return p !== 'desktop' && p !== 'mobile'; }).join('/');
+            addText(spFrame, spDisplayName, labelFont, 12, startX, ly + 4, DARK);
+
+            // Bar
+            var bar = figma.createRectangle();
+            bar.resize(barW, 24);
+            bar.x = startX + 120;
+            bar.y = ly;
+            bar.cornerRadius = 4;
+            bar.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.55, b: 1 } }];
+            spFrame.appendChild(bar);
+
+            // Value label
+            addText(spFrame, sp.value, labelFont, 12, startX + 120 + barW + 12, ly + 4, MUTED);
+
+            ly += 40;
+          }
+          return ly;
+        }
+
+        var dEnd = renderSpacingBars(dSpacing, MARGIN, '🖥  Desktop', spy);
+        var mEnd = renderSpacingBars(mSpacing, MARGIN + 560, '📱  Mobile', spy);
+
+        spFrame.resize(FRAME_W, Math.max(dEnd, mEnd) + SECTION_PAD);
       }
 
-      // === BORDER RADIUS SECTION ===
+      // ══════════════════════════════════════════════════════════
+      // BORDER RADIUS FRAME
+      // ══════════════════════════════════════════════════════════
       if (tokens.borderRadius.length > 0) {
-        var radiusTitle = figma.createText();
-        radiusTitle.characters = 'BORDER RADIUS';
-        radiusTitle.fontName = { family: 'Inter', style: headingStyle };
-        radiusTitle.fontSize = 24;
-        radiusTitle.x = xOffset;
-        radiusTitle.y = yOffset;
-        specPage.appendChild(radiusTitle);
-        yOffset += 50;
-
-        var radiusX = xOffset;
+        var radFrameH = SECTION_PAD + 60 + 120 + SECTION_PAD;
+        var radFrame = createSectionFrame('Border Radius', radFrameH);
+        var ry = SECTION_PAD;
+
+        addText(radFrame, 'BORDER RADIUS', boldFont, 32, MARGIN, ry, DARK);
+        ry += 52;
+
+        var rx = MARGIN;
         for (var ri = 0; ri < tokens.borderRadius.length; ri++) {
-          var radiusToken = tokens.borderRadius[ri];
-          var radiusValue = parseNumericValue(radiusToken.value);
+          var rToken = tokens.borderRadius[ri];
+          var rVal = parseNumericValue(rToken.value);
 
-          // Rounded rectangle
           var rect = figma.createRectangle();
-          rect.resize(50, 50);
-          rect.x = radiusX;
-          rect.y = yOffset;
-          rect.cornerRadius = Math.min(radiusValue, 25);
-          rect.fills = [{ type: 'SOLID', color: { r: 0.95, g: 0.95, b: 0.95 } }];
-          rect.strokes = [{ type: 'SOLID', color: { r: 0.8, g: 0.8, b: 0.8 } }];
+          rect.resize(64, 64);
+          rect.x = rx; rect.y = ry;
+          rect.cornerRadius = Math.min(rVal, 32);
+          rect.fills = [{ type: 'SOLID', color: { r: 0.93, g: 0.93, b: 0.96 } }];
+          rect.strokes = [{ type: 'SOLID', color: { r: 0.75, g: 0.75, b: 0.82 } }];
           rect.strokeWeight = 2;
-          specPage.appendChild(rect);
-
-          // Label
-          var rLabel = figma.createText();
-          rLabel.characters = radiusToken.name.split('/').pop() + '\n' + radiusToken.value;
-          rLabel.fontName = { family: 'Inter', style: 'Regular' };
-          rLabel.fontSize = 10;
-          rLabel.textAlignHorizontal = 'CENTER';
-          rLabel.x = radiusX;
-          rLabel.y = yOffset + 56;
-          specPage.appendChild(rLabel);
-
-          radiusX += 70;
-        }
+          radFrame.appendChild(rect);
+
+          // Name
+          addText(radFrame, rToken.name.split('/').pop(), boldFont, 11, rx, ry + 72, DARK);
+          // Value
+          addText(radFrame, rToken.value, labelFont, 11, rx, ry + 88, MUTED);
 
-        yOffset += 100 + sectionGap;
+          rx += 90;
+        }
       }
 
-      // === SHADOWS SECTION ===
+      // ══════════════════════════════════════════════════════════
+      // SHADOWS FRAME — on light gray background (MD pattern)
+      // ══════════════════════════════════════════════════════════
       if (tokens.shadows.length > 0) {
-        var shadowTitle = figma.createText();
-        shadowTitle.characters = 'SHADOWS';
-        shadowTitle.fontName = { family: 'Inter', style: headingStyle };
-        shadowTitle.fontSize = 24;
-        shadowTitle.x = xOffset;
-        shadowTitle.y = yOffset;
-        specPage.appendChild(shadowTitle);
-        yOffset += 50;
-
-        var shadowX = xOffset;
-        for (var shi = 0; shi < tokens.shadows.length; shi++) {
-          var shadowToken = tokens.shadows[shi];
-          var sv = shadowToken.value;
+        var shFrameH = SECTION_PAD + 60 + 200 + SECTION_PAD;
+        var shFrame = createSectionFrame('Shadows', shFrameH);
+        // Light gray background for shadow visibility
+        shFrame.fills = [{ type: 'SOLID', color: { r: 0.96, g: 0.96, b: 0.96 } }];
 
-          var offsetXVal = parseNumericValue(sv.offsetX || sv.x || '0');
-          var offsetYVal = parseNumericValue(sv.offsetY || sv.y || '0');
-          var blurVal = parseNumericValue(sv.blur || '0');
-          var spreadVal = parseNumericValue(sv.spread || '0');
-          var shColor = parseColorToRGBA(sv.color || 'rgba(0,0,0,0.25)');
+        var shy = SECTION_PAD;
+        addText(shFrame, 'SHADOWS / ELEVATION', boldFont, 32, MARGIN, shy, DARK);
+        shy += 52;
 
-          // Shadow card
+        var shx = MARGIN;
+        for (var shi = 0; shi < tokens.shadows.length; shi++) {
+          var shToken = tokens.shadows[shi];
+          var sv = shToken.value;
+          var oxV = parseNumericValue(sv.offsetX || sv.x || '0');
+          var oyV = parseNumericValue(sv.offsetY || sv.y || '0');
+          var blV = parseNumericValue(sv.blur || '0');
+          var spV = parseNumericValue(sv.spread || '0');
+          var shC = parseColorToRGBA(sv.color || 'rgba(0,0,0,0.25)');
+
+          // White card with shadow
           var card = figma.createRectangle();
-          card.resize(80, 80);
-          card.x = shadowX;
-          card.y = yOffset;
-          card.cornerRadius = 8;
+          card.resize(140, 140);
+          card.x = shx; card.y = shy;
+          card.cornerRadius = 12;
           card.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }];
           card.effects = [{
             type: 'DROP_SHADOW',
-            color: { r: shColor.r, g: shColor.g, b: shColor.b, a: shColor.a },
-            offset: { x: offsetXVal, y: offsetYVal },
-            radius: blurVal,
-            spread: spreadVal,
+            color: { r: shC.r, g: shC.g, b: shC.b, a: shC.a },
+            offset: { x: oxV, y: oyV },
+            radius: blV,
+            spread: spV,
             visible: true,
             blendMode: 'NORMAL'
           }];
-          specPage.appendChild(card);
-
-          // Label
-          var shLabel = figma.createText();
-          shLabel.characters = shadowToken.name.split('/').pop();
-          shLabel.fontName = { family: 'Inter', style: 'Regular' };
-          shLabel.fontSize = 11;
-          shLabel.x = shadowX;
-          shLabel.y = yOffset + 90;
-          specPage.appendChild(shLabel);
-
-          shadowX += 110;
+          shFrame.appendChild(card);
+
+          // Level name centered on card
+          addText(shFrame, shToken.name.split('/').pop(), boldFont, 14, shx + 20, shy + 30, DARK);
+
+          // Specs on card
+          addText(shFrame, 'blur: ' + blV + 'px', labelFont, 11, shx + 20, shy + 56, MUTED);
+          addText(shFrame, 'y: ' + oyV + 'px', labelFont, 11, shx + 20, shy + 72, MUTED);
+          addText(shFrame, 'spread: ' + spV + 'px', labelFont, 11, shx + 20, shy + 88, MUTED);
+
+          shx += 180;
         }
       }
 
-      figma.ui.postMessage({
-        type: 'spec-complete',
-        message: 'Visual spec page created!'
-      });
+      // ══════════════════════════════════════════════════════════
+      // POSITION ALL FRAMES — stack HORIZONTALLY with proper spacing
+      // This runs AFTER all frames are created and resized to actual content.
+      // ══════════════════════════════════════════════════════════
+      var stackX = 0;
+      for (var fi = 0; fi < allFrames.length; fi++) {
+        allFrames[fi].x = stackX;
+        allFrames[fi].y = 0;
+        stackX += allFrames[fi].width + SECTION_GAP;
+      }
+
+      figma.ui.postMessage({ type: 'spec-complete', message: 'Visual spec created with ' + allFrames.length + ' section frames!' });
 
     } catch (error) {
       console.error('Error creating visual spec:', error);

storage/benchmark_cache.json

@@ -15,7 +15,7 @@
     "colors": {},
     "radius": {},
     "shadows": {},
-    "fetched_at": "2026-02-22T12:38:30.430328",
+    "fetched_at": "2026-02-22T17:56:25.598103",
     "confidence": "high",
     "best_for": []
   }