inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/src/{utility-resolver.ts → tailwind/utility-resolver.ts}

@@ -1,4 +1,4 @@
-import { pxFromSizeToken } from './variables';
+import { pxFromSizeToken } from '../tokens';
 
 export type UtilityAtom = {
   raw: string;
@@ -23,7 +23,17 @@ const MAX_WIDTH_MAP: Record<string, number> = {
   'max-w-7xl': 1280,
 };
 
+// Memo for `parseUtilityClass` — the function is pure and the same class
+// strings repeat heavily across a render tree (`flex` / `items-center` /
+// `text-sm` appear on dozens of elements per story). The atom is treated
+// as read-only by callers, so sharing the same instance across call sites
+// is safe.
+const PARSE_UTILITY_CACHE = new Map<string, UtilityAtom>();
+
 export function parseUtilityClass(input: string): UtilityAtom {
+  const cached = PARSE_UTILITY_CACHE.get(input);
+  if (cached !== undefined) return cached;
+
   let cls = input.trim();
   let important = false;
   if (cls.startsWith('!')) {
@@ -51,10 +61,11 @@ export function parseUtilityClass(input: string): UtilityAtom {
   }
   if (buf) parts.push(buf);
 
-  if (parts.length <= 1) {
-    return { raw: input, variants: [], important, utility: parts[0] || '' };
-  }
-  return { raw: input, variants: parts.slice(0, -1), important, utility: parts[parts.length - 1] };
+  const atom: UtilityAtom = parts.length <= 1
+    ? { raw: input, variants: [], important, utility: parts[0] || '' }
+    : { raw: input, variants: parts.slice(0, -1), important, utility: parts[parts.length - 1] };
+  PARSE_UTILITY_CACHE.set(input, atom);
+  return atom;
 }
 
 export function hasResponsiveVariant(variants: string[]): boolean {
@@ -120,6 +131,16 @@ export function resolveRadius(utility: string, radiusGroup: Record<string, strin
   if (radiusGroup && radiusGroup[key]) {
     return pxFromSizeToken(radiusGroup[key]);
   }
-  const fallback: Record<string, number> = { none: 0, sm: 2, md: 6, lg: 8, xl: 12, '2xl': 16, '3xl': 24, full: 9999 };
+  const fallback: Record<string, number> = {
+    none: 0,
+    sm: 2,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    '2xl': 16,
+    '3xl': 24,
+    '4xl': 32,
+    full: 9999,
+  };
   return fallback[key] ?? null;
 }

package/src/{font-style-resolver.ts → text/font-style-resolver.ts}

@@ -1,5 +1,3 @@
-declare const figma: any;
-
 type FontStyleIndex = Record<string, string[]>;
 
 let AVAILABLE_STYLES_BY_FAMILY: FontStyleIndex | null = null;

package/src/text/index.ts

@@ -0,0 +1,4 @@
+export * from './text-builder';
+export * from './text-line';
+export * from './inline-text';
+export * from './font-style-resolver';

package/src/{inline-text.ts → text/inline-text.ts}

@@ -1,12 +1,12 @@
-import { type RGB, parseColor } from './colors';
-import { resolveTextColorValue, extractTextColorToken } from './color-resolver';
-import { getLineHeightFromClasses, TAG_TYPOGRAPHY, createTextNode } from './text-builder';
-import { tailwindClassesToStyle, type TailwindStyle } from './tailwind';
-import { type NodeIR, type NodeIRElement } from './node-ir';
-import type { RenderContext } from './render-context';
-import { type NodeLayoutComputed } from './width-solver';
+import { type RGB, parseColor } from '../tokens';
+import { resolveTextColorValue, extractTextColorToken } from '../tokens';
+import { getLineHeightFromClasses, TAG_TYPOGRAPHY, createTextNode, type CreateTextOptions } from './text-builder';
+import { tailwindClassesToStyle, type TailwindStyle } from '../tailwind';
+import { type NodeIR, type NodeIRElement } from '../tailwind';
+import type { RenderContext } from '../design-system';
+import { type NodeLayoutComputed } from '../layout';
 import { INLINE_TEXT_TAGS } from './text-builder';
-import { TOKENS, getThemeFontFamily } from './tokens';
+import { TOKENS, getThemeFontFamily } from '../tokens';
 import { getFontStyleCandidatesForFamily, inferFontWeight } from './font-style-resolver';
 
 export type InlineTextSegment = {
@@ -166,7 +166,7 @@ export function createInlineTextNode(
   const textValue = segments.map(seg => seg.text).join('');
 
   const typo = TAG_TYPOGRAPHY[node.tagLower] || { fontSize: 14 };
-  const textOpts: any = {
+  const textOpts: CreateTextOptions & { theme?: string } = {
     fontSize: typo.fontSize,
     lineHeight: typo.lineHeight,
   };
@@ -188,7 +188,7 @@ export function createInlineTextNode(
     };
     if (sizeMap[sizeClass]) textOpts.fontSize = sizeMap[sizeClass];
   }
-  const lineHeight = getLineHeightFromClasses(node.classes, textOpts.fontSize);
+  const lineHeight = getLineHeightFromClasses(node.classes, textOpts.fontSize ?? 14);
   if (lineHeight) {
     textOpts.lineHeight = lineHeight;
   }
@@ -196,11 +196,11 @@ export function createInlineTextNode(
   textOpts.theme = theme;
   const textNode = createTextNode(textValue, textOpts);
 
-  const baseFontName = textNode.fontName && typeof textNode.fontName === 'object' ? textNode.fontName : null;
-  const fontFamily = (baseFontName && 'family' in baseFontName ? (baseFontName as any).family : null)
+  const baseFontName: FontName | null = textNode.fontName !== figma.mixed ? textNode.fontName : null;
+  const fontFamily = (baseFontName ? baseFontName.family : null)
     || getThemeFontFamily(TOKENS, theme)
     || 'Inter';
-  const baseStyle = baseFontName && 'style' in baseFontName ? (baseFontName as any).style : (baseFontStyle || 'Regular');
+  const baseStyle = baseFontName ? baseFontName.style : (baseFontStyle || 'Regular');
   let cursor = 0;
   for (const seg of segments) {
     const start = cursor;

package/src/{text-builder.ts → text/text-builder.ts}

@@ -1,10 +1,23 @@
-import { parseColor } from './colors';
-import { TOKENS, getCoreFontFamily, getThemeFontFamily } from './tokens';
-import { tailwindClassesToStyle, type TailwindStyle } from './tailwind';
-import { type NodeIR, isElementLikeNode } from './node-ir';
+import { parseColor } from '../tokens';
+import { TOKENS, getCoreFontFamily, getThemeFontFamily } from '../tokens';
+import type { RGB } from '../tokens/colors';
+import { tailwindClassesToStyle, type TailwindStyle } from '../tailwind';
+import { type NodeIR, isElementLikeNode } from '../tailwind';
 import { getFontStyleCandidatesForFamily } from './font-style-resolver';
 
-declare const figma: any;
+export interface CreateTextOptions {
+  fontStyle?: string;
+  bold?: boolean;
+  fontRole?: string;
+  fontFamily?: string;
+  theme?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  textAlignHorizontal?: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED';
+  textAlignVertical?: 'TOP' | 'CENTER' | 'BOTTOM';
+  fill?: string | RGB;
+  opacity?: number;
+}
 
 const FONT_LOAD_STATE: Record<string, 'loading' | 'loaded'> = {};
 const FONT_LOAD_PROMISES: Promise<void>[] = [];
@@ -48,10 +61,10 @@ function queueFontLoad(family: string, style: string): void {
   }
 }
 
-export function createTextNode(text: string, options?: any): any {
+export function createTextNode(text: string, options?: CreateTextOptions): TextNode {
   const node = figma.createText();
   node.characters = text;
-  const opts = options || {};
+  const opts: CreateTextOptions = options || {};
   const style = opts.fontStyle || (opts.bold ? 'Bold' : 'Regular');
   const fontRole = opts.fontRole || 'sans';
   const fontFamily = opts.fontFamily || (opts.theme ? getThemeFontFamily(TOKENS, opts.theme, fontRole) : null) || getCoreFontFamily(TOKENS) || 'Inter';
@@ -80,6 +93,10 @@ export function createTextNode(text: string, options?: any): any {
   if (opts.textAlignHorizontal) {
     node.textAlignHorizontal = opts.textAlignHorizontal;
   }
+  // Default to CENTER: identical to TOP for hug-sized single-line text, but
+  // correct when the text box is taller (row-synced in flex/grid with
+  // items-center, or layoutAlign=STRETCH). Callers can override with 'TOP'.
+  node.textAlignVertical = opts.textAlignVertical || 'CENTER';
   if (opts.fill) {
     const fill = typeof opts.fill === 'string' ? parseColor(opts.fill) : opts.fill;
     node.fills = [{

package/src/{text-line.ts → text/text-line.ts}

@@ -1,5 +1,5 @@
-import { type NodeIR, type NodeIRComponent, splitClassName } from './node-ir';
-import { parseTextLineCount, parseWidthTokenList, TEXT_LINE_WIDTH_CLASSES } from './render-context';
+import { type NodeIR, type NodeIRComponent, splitClassName } from '../tailwind';
+import { parseTextLineCount, parseWidthTokenList, TEXT_LINE_WIDTH_CLASSES } from '../design-system';
 
 export function buildTextLinePlaceholderNode(node: NodeIRComponent): NodeIR {
   const props = node.props || {};

package/src/{change-detection.ts → tokens/change-detection.ts}

@@ -1,12 +1,12 @@
 import { COMPONENT_DEFS } from './tokens';
-import { extractFrameProperties, propsToTailwindClasses } from './tailwind';
+import { extractFrameProperties, propsToTailwindClasses, type FrameProperties } from '../tailwind';
 
 interface ComponentFrame {
-  frame: any;
+  frame: SceneNode;
   componentName: string;
   variant: string;
   state: string;
-  props: any;
+  props: FrameProperties;
 }
 
 interface ChangeDetail {
@@ -21,7 +21,7 @@ interface ComponentChange {
   type: string;
   file: string;
   changes: ChangeDetail[];
-  figmaProps: any;
+  figmaProps: FrameProperties;
   suggestedClasses: string[];
 }
 
@@ -38,10 +38,10 @@ interface ComponentPatch {
 }
 
 export function findComponentFrames(): ComponentFrame[] {
-  let dsPage: any = null;
-  for (let i = 0; i < (figma as any).root.children.length; i++) {
-    if ((figma as any).root.children[i].name === 'Design System') {
-      dsPage = (figma as any).root.children[i];
+  let dsPage: PageNode | null = null;
+  for (let i = 0; i < figma.root.children.length; i++) {
+    if (figma.root.children[i].name === 'Design System') {
+      dsPage = figma.root.children[i];
       break;
     }
   }
@@ -53,7 +53,7 @@ export function findComponentFrames(): ComponentFrame[] {
   const components: ComponentFrame[] = [];
 
   // Find component frames by name pattern: "ComponentName/variant/state" or "ComponentName States"
-  function searchFrames(node: any, depth: number): void {
+  function searchFrames(node: SceneNode | PageNode, depth: number): void {
     if (depth > 5) return; // Limit depth
 
     if (node.type === 'FRAME' || node.type === 'COMPONENT') {
@@ -101,12 +101,12 @@ export function detectComponentChanges(): { changes?: ComponentChange[]; error?:
   }
 
   // Compare with code definitions
-  if (!COMPONENT_DEFS || !(COMPONENT_DEFS as any).components) {
+  if (!COMPONENT_DEFS || !COMPONENT_DEFS.components) {
     return { error: 'No component definitions loaded. Start dev server and refresh.' };
   }
 
-  for (let j = 0; j < (COMPONENT_DEFS as any).components.length; j++) {
-    const codeDef = (COMPONENT_DEFS as any).components[j];
+  for (let j = 0; j < COMPONENT_DEFS.components.length; j++) {
+    const codeDef = COMPONENT_DEFS.components[j];
     const figmaFrames = figmaByComponent[codeDef.name] || [];
 
     if (figmaFrames.length === 0) {

package/src/{color-resolver.ts → tokens/color-resolver.ts}

@@ -1,5 +1,6 @@
 import { TOKENS, getThemeColors } from './tokens';
 import type { RGB } from './colors';
+import { getBaseClass } from '../tailwind';
 
 const NON_COLOR_TEXT_PREFIXES = new Set([
   'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl',
@@ -11,12 +12,6 @@ const NON_COLOR_TEXT_TOKENS = new Set([
   'inherit',
 ]);
 
-function getBaseClass(value: string): string | null {
-  if (!value) return null;
-  if (value.indexOf(':') !== -1) return null;
-  return value;
-}
-
 function isRgbObject(value: unknown): value is RGB {
   if (!value || typeof value !== 'object') return false;
   const obj = value as Record<string, unknown>;

package/src/{colors.ts → tokens/colors.ts}

@@ -1,3 +1,5 @@
+import type { Tokens } from './tokens';
+
 // --- Color parsing: OKLCH -> sRGB ---
 
 export interface RGB {
@@ -20,8 +22,12 @@ export const DEBUG = false;
 export function debug(...args: unknown[]): void {
   if (!DEBUG) return;
   try {
-    console.log.apply(console, ["[TailwindTokens]"].concat([].slice.call(args)));
-  } catch (err) {}
+    // Rest params compile to value-side arg-collection at es2017; the
+    // Figma sandbox supports this fine. What it can't handle is
+    // value-side call/array spread (`fn(...args)`, `[...arr]`) — see
+    // .ai/behaviour.md.
+    console.log.apply(console, (['[TailwindTokens]'] as unknown[]).concat(args));
+  } catch (_err) { /* ignore */ }
 }
 
 export function clamp01(x: number): number {
@@ -162,14 +168,15 @@ export function normalizeSizeValue(value: unknown): string {
 
 // --- Color index for nearest-color lookups ---
 
-export function rebuildColorIndex(tokens: any): void {
+export function rebuildColorIndex(tokens: Tokens): void {
   COLOR_INDEX.length = 0;
   for (const theme of Object.keys(tokens)) {
-    const col: Record<string, unknown> = (tokens[theme] && tokens[theme].color) ? tokens[theme].color : {};
-    for (const [token, value] of Object.entries(col)) {
+    const themeTokens = tokens[theme];
+    if (!themeTokens || !('color' in themeTokens) || !themeTokens.color) continue;
+    for (const [token, value] of Object.entries(themeTokens.color)) {
       try {
         COLOR_INDEX.push({ token, rgb: parseColor(value) });
-      } catch (err) {
+      } catch (_err) {
         // ignore bad color
       }
     }

package/src/tokens/index.ts

@@ -0,0 +1,6 @@
+export * from './tokens';
+export * from './token-source';
+export * from './variables';
+export * from './colors';
+export * from './color-resolver';
+export * from './change-detection';

package/src/{token-source.ts → tokens/token-source.ts}

@@ -1,4 +1,4 @@
-export type TokenSourceMode = 'auto' | 'css' | 'dtcg';
+export type TokenSourceMode = 'css' | 'dtcg';
 export type ResolvedTokenSourceMode = 'css' | 'dtcg' | 'embedded';
 
 export interface ScannedThemeTokens {
@@ -8,6 +8,7 @@ export interface ScannedThemeTokens {
   spacing?: Record<string, number>;
   fontSize?: Record<string, number>;
   shadows?: Record<string, string>;
+  breakpoints?: Record<string, number>;
 }
 
 export interface ScannedTokenMap {
@@ -20,6 +21,7 @@ export interface ScannedTokenMap {
   spacing: Record<string, number>;
   fontSize: Record<string, number>;
   shadows: Record<string, string>;
+  breakpoints: Record<string, number>;
   themes: Record<string, ScannedThemeTokens>;
 }
 
@@ -38,6 +40,7 @@ export function createEmptyScannedTokenMap(
     spacing: {},
     fontSize: {},
     shadows: {},
+    breakpoints: {},
     themes: {},
   };
 }

package/src/{tokens.ts → tokens/tokens.ts}

@@ -1,6 +1,7 @@
 import { parseColor, mergeTokens as deepMergeTokens } from './colors';
 import { readVariableTokens } from './variables';
 import type { ScannedTokenMap } from './token-source';
+import type { ComponentDef } from '../components/scanner-types';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -9,7 +10,7 @@ import type { ScannedTokenMap } from './token-source';
 /** A flat record of token name -> value (e.g. color name -> oklch string). */
 export type TokenGroup = Record<string, string>;
 
-/** A theme block contains optional color, radius, spacing, fontSize, and shadow groups. */
+/** A theme block contains optional color, radius, spacing, fontSize, shadow, and breakpoint groups. */
 export interface ThemeTokens {
   color?: TokenGroup;
   font?: TokenGroup;
@@ -17,6 +18,7 @@ export interface ThemeTokens {
   spacing?: TokenGroup;
   fontSize?: TokenGroup;
   shadow?: TokenGroup;
+  breakpoint?: TokenGroup;
 }
 
 /** Core (non-theme) tokens. */
@@ -46,6 +48,7 @@ export interface DTCGTokens {
     description: string;
     note: string;
   };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- DTCG groups are deeply nested and dynamically built
   [key: string]: any;
 }
 
@@ -59,9 +62,9 @@ export interface ComponentDefs {
   schemaVersion?: number;
   version?: string;
   generatedAt?: string;
-  components: any[];
-  spacingScale: Record<string, any>;
-  colorTokens: any[];
+  components: ComponentDef[];
+  spacingScale: Record<string, number>;
+  colorTokens: unknown[];
   paletteTokens?: Record<string, string>;
   iconRegistry?: Record<string, { module: string; exportName: string; svg: string }>;
   styleMap?: Record<string, { declarations: Record<string, string>; media?: string }[]>;
@@ -71,7 +74,7 @@ export interface ComponentDefs {
 // Mutable state
 // ---------------------------------------------------------------------------
 
-export let TOKENS: Tokens = {"primary":{"color":{"background":"oklch(1 0 0)","foreground":"oklch(0.141 0.005 285.823)","card":"oklch(1 0 0)","card-foreground":"oklch(0.141 0.005 285.823)","popover":"oklch(1 0 0)","popover-foreground":"oklch(0.141 0.005 285.823)","primary":"oklch(62.71% 0.17 149.21)","primary-foreground":"oklch(0.982 0.018 155.826)","secondary":"oklch(0.967 0.001 286.375)","secondary-foreground":"oklch(0.21 0.006 285.885)","muted":"oklch(0.967 0.001 286.375)","muted-foreground":"oklch(0.552 0.016 285.938)","accent":"oklch(0.967 0.001 286.375)","accent-foreground":"oklch(0.21 0.006 285.885)","destructive":"oklch(0.577 0.245 27.325)","border":"oklch(0.92 0.004 286.32)","input":"oklch(0.92 0.004 286.32)","ring":"oklch(0.723 0.219 149.579)","sidebar":"oklch(0.985 0 0)","sidebar-foreground":"oklch(0.141 0.005 285.823)","sidebar-primary":"oklch(0.723 0.219 149.579)","sidebar-primary-foreground":"oklch(0.982 0.018 155.826)","sidebar-accent":"oklch(0.967 0.001 286.375)","sidebar-accent-foreground":"oklch(0.21 0.006 285.885)","sidebar-border":"oklch(0.92 0.004 286.32)","sidebar-ring":"oklch(0.723 0.219 149.579)"},"font":{"sans":"\"Open Sans\", ui-sans-serif, system-ui, sans-serif","heading":"\"Open Sans\", ui-sans-serif, system-ui, sans-serif"},"radius":{"base":"0.5rem","sm":"0.25rem","md":"0.5rem","lg":"0.75rem","xl":"1rem","2xl":"1.25rem","full":"624rem"},"spacing":{"xs":"0.25rem","sm":"0.5rem","md":"1rem","lg":"1.5rem","xl":"2rem","2xl":"3rem","3xl":"4rem","4xl":"6rem"},"fontSize":{"xs":"0.75rem","sm":"0.875rem","base":"1rem","lg":"1.125rem","xl":"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},"shadow":{"sm":"0 1px 2px 0 rgb(0 0 0 / 0.05)","DEFAULT":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)","md":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)","lg":"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05)","xl":"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.04)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)","inner":"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"}},"secondary":{"color":{"background":"oklch(1 0 0)","foreground":"oklch(0.141 0.005 285.823)","card":"oklch(1 0 0)","card-foreground":"oklch(0.141 0.005 285.823)","popover":"oklch(1 0 0)","popover-foreground":"oklch(0.141 0.005 285.823)","primary":"oklch(62.71% 0.17 250)","primary-foreground":"oklch(0.982 0.018 250)","secondary":"oklch(0.967 0.001 286.375)","secondary-foreground":"oklch(0.21 0.006 285.885)","muted":"oklch(0.967 0.001 286.375)","muted-foreground":"oklch(0.552 0.016 285.938)","accent":"oklch(0.967 0.001 286.375)","accent-foreground":"oklch(0.21 0.006 285.885)","destructive":"oklch(0.577 0.245 250)","border":"oklch(0.92 0.004 286.32)","input":"oklch(0.92 0.004 286.32)","ring":"oklch(0.723 0.219 250)","sidebar":"oklch(0.985 0 0)","sidebar-foreground":"oklch(0.141 0.005 285.823)","sidebar-primary":"oklch(0.723 0.219 250)","sidebar-primary-foreground":"oklch(0.982 0.018 250)","sidebar-accent":"oklch(0.967 0.001 286.375)","sidebar-accent-foreground":"oklch(0.21 0.006 285.885)","sidebar-border":"oklch(0.92 0.004 286.32)","sidebar-ring":"oklch(0.723 0.219 250)"},"font":{"sans":"\"Inter\", ui-sans-serif, system-ui, sans-serif","heading":"\"Playfair Display\", Georgia, serif"},"radius":{"base":"1rem","sm":"0.75rem","md":"1rem","lg":"1.25rem","xl":"1.5rem","2xl":"1.75rem","full":"624rem"}}};
+export let TOKENS: Tokens = {"primary":{"color":{"background":"oklch(1 0 0)","foreground":"oklch(0.141 0.005 285.823)","card":"oklch(1 0 0)","card-foreground":"oklch(0.141 0.005 285.823)","popover":"oklch(1 0 0)","popover-foreground":"oklch(0.141 0.005 285.823)","primary":"oklch(50% 0.14 145)","primary-foreground":"oklch(0.982 0.018 155.826)","primary-decorative":"oklch(62.71% 0.17 149.21)","primary-soft":"oklch(0.84 0.06 145)","secondary":"oklch(0.967 0.001 286.375)","secondary-foreground":"oklch(0.21 0.006 285.885)","muted":"oklch(0.967 0.001 286.375)","muted-foreground":"oklch(0.552 0.016 285.938)","accent":"oklch(0.967 0.001 286.375)","accent-foreground":"oklch(0.21 0.006 285.885)","destructive":"oklch(0.577 0.245 27.325)","border":"oklch(0.92 0.004 286.32)","input":"oklch(0.92 0.004 286.32)","ring":"oklch(0.723 0.219 149.579)","sidebar":"oklch(0.985 0 0)","sidebar-foreground":"oklch(0.141 0.005 285.823)","sidebar-primary":"oklch(0.723 0.219 149.579)","sidebar-primary-foreground":"oklch(0.982 0.018 155.826)","sidebar-accent":"oklch(0.967 0.001 286.375)","sidebar-accent-foreground":"oklch(0.21 0.006 285.885)","sidebar-border":"oklch(0.92 0.004 286.32)","sidebar-ring":"oklch(0.723 0.219 149.579)"},"font":{"sans":"\"Open Sans\", ui-sans-serif, system-ui, sans-serif","heading":"\"Open Sans\", ui-sans-serif, system-ui, sans-serif"},"radius":{"base":"0.5rem","sm":"0.25rem","md":"0.5rem","lg":"0.75rem","xl":"1rem","2xl":"1.25rem","full":"624rem"},"spacing":{"xs":"0.25rem","sm":"0.5rem","md":"1rem","lg":"1.5rem","xl":"2rem","2xl":"3rem","3xl":"4rem","4xl":"6rem"},"fontSize":{"xs":"0.75rem","sm":"0.875rem","base":"1rem","lg":"1.125rem","xl":"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},"shadow":{"sm":"0 1px 2px 0 rgb(0 0 0 / 0.05)","DEFAULT":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)","md":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)","lg":"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05)","xl":"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.04)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)","inner":"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"}},"secondary":{"color":{"background":"oklch(1 0 0)","foreground":"oklch(0.141 0.005 285.823)","card":"oklch(1 0 0)","card-foreground":"oklch(0.141 0.005 285.823)","popover":"oklch(1 0 0)","popover-foreground":"oklch(0.141 0.005 285.823)","primary":"oklch(50% 0.16 250)","primary-foreground":"oklch(0.982 0.018 250)","primary-decorative":"oklch(62.71% 0.17 250)","primary-soft":"oklch(0.84 0.06 250)","secondary":"oklch(0.967 0.001 286.375)","secondary-foreground":"oklch(0.21 0.006 285.885)","muted":"oklch(0.967 0.001 286.375)","muted-foreground":"oklch(0.552 0.016 285.938)","accent":"oklch(0.967 0.001 286.375)","accent-foreground":"oklch(0.21 0.006 285.885)","destructive":"oklch(0.577 0.245 250)","border":"oklch(0.92 0.004 286.32)","input":"oklch(0.92 0.004 286.32)","ring":"oklch(0.723 0.219 250)","sidebar":"oklch(0.985 0 0)","sidebar-foreground":"oklch(0.141 0.005 285.823)","sidebar-primary":"oklch(0.723 0.219 250)","sidebar-primary-foreground":"oklch(0.982 0.018 250)","sidebar-accent":"oklch(0.967 0.001 286.375)","sidebar-accent-foreground":"oklch(0.21 0.006 285.885)","sidebar-border":"oklch(0.92 0.004 286.32)","sidebar-ring":"oklch(0.723 0.219 250)"},"font":{"sans":"\"Open Sans\", ui-sans-serif, system-ui, sans-serif","heading":"\"Playfair Display\", Georgia, serif"},"radius":{"base":"1rem","sm":"0.75rem","md":"1rem","lg":"1.25rem","xl":"1.5rem","2xl":"1.75rem","full":"624rem"}}};
 const EMBEDDED_TOKENS_SNAPSHOT: Tokens = JSON.parse(JSON.stringify(TOKENS));
 
 // Component definitions - fetched from dev server at runtime
@@ -86,18 +89,21 @@ function isPlainObject(v: unknown): v is Record<string, unknown> {
   return v !== null && typeof v === 'object' && !Array.isArray(v);
 }
 
-function mergeTokens(base: any, override: any): any {
+function mergeTokens<T>(base: T, override: T): T {
   if (!isPlainObject(base)) return override;
-  const out: Record<string, any> = {};
-  for (const key in base) out[key] = base[key];
+  if (!isPlainObject(override)) return base;
+  const out: Record<string, unknown> = {};
+  for (const key in base) out[key] = (base as Record<string, unknown>)[key];
   for (const key in override) {
-    if (isPlainObject(base[key]) && isPlainObject(override[key])) {
-      out[key] = mergeTokens(base[key], override[key]);
+    const baseVal = (base as Record<string, unknown>)[key];
+    const overrideVal = (override as Record<string, unknown>)[key];
+    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {
+      out[key] = mergeTokens(baseVal, overrideVal);
     } else {
-      out[key] = override[key];
+      out[key] = overrideVal;
     }
   }
-  return out;
+  return out as T;
 }
 
 function parseDimensionToPx(value: unknown): number | null {
@@ -293,16 +299,53 @@ function hasKeys(group: Record<string, unknown> | undefined): boolean {
   return !!group && Object.keys(group).length > 0;
 }
 
+/**
+ * Ensures a font-family CSS value always contains a quoted literal name so that
+ * round-trips through patchCssVariables are self-healing.
+ *
+ * e.g. `var(--font-playfair), Georgia, serif`
+ *   → `var(--font-playfair), "Playfair", Georgia, serif`
+ *
+ * If a proper literal is already present the value is returned unchanged.
+ */
+function enrichFontValue(value: string): string {
+  const parts = value.split(',');
+  let hasLiteral = false;
+  let insertAfterIdx = -1;
+
+  for (let i = 0; i < parts.length; i++) {
+    const trimmed = parts[i].trim();
+    if (/^var\(/.test(trimmed)) {
+      if (insertAfterIdx === -1) insertAfterIdx = i;
+      continue;
+    }
+    const lower = trimmed.toLowerCase().replace(/^["']|["']$/g, '');
+    if (SYSTEM_FONT_KEYWORDS.has(lower)) continue;
+    if (trimmed.replace(/^["']|["']$/g, '').trim()) { hasLiteral = true; break; }
+  }
+
+  if (hasLiteral || insertAfterIdx === -1) return value;
+
+  // Derive best-effort literal from the first var(--font-*) name
+  const varMatch = parts[insertAfterIdx].trim().match(/^var\(--font-([a-z0-9-]+)\)/i);
+  if (!varMatch) return value;
+  const literal = varMatch[1].split('-').map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+  const result = parts.slice();
+  result.splice(insertAfterIdx + 1, 0, ` "${literal}"`);
+  return result.join(',');
+}
+
 function buildTokenPatchFromScanned(map: ScannedTokenMap): Tokens {
   const patch: Tokens = {};
 
   const primary: ThemeTokens = {};
   if (hasKeys(map.colors)) primary.color = { ...map.colors };
-  if (hasKeys(map.fonts)) primary.font = { ...map.fonts };
+  if (hasKeys(map.fonts)) primary.font = Object.fromEntries(Object.entries(map.fonts).map(([k, v]) => [k, enrichFontValue(String(v))]));
   if (hasKeys(map.radius)) primary.radius = mapDimensionGroup(map.radius);
   if (hasKeys(map.spacing)) primary.spacing = mapDimensionGroup(map.spacing);
   if (hasKeys(map.fontSize)) primary.fontSize = mapDimensionGroup(map.fontSize);
   if (hasKeys(map.shadows)) primary.shadow = { ...map.shadows };
+  if (hasKeys(map.breakpoints)) primary.breakpoint = mapDimensionGroup(map.breakpoints);
   if (Object.keys(primary).length > 0) patch.primary = primary;
 
   for (const themeName in map.themes) {
@@ -310,11 +353,12 @@ function buildTokenPatchFromScanned(map: ScannedTokenMap): Tokens {
     if (!scanned) continue;
     const themedPatch: ThemeTokens = {};
     if (hasKeys(scanned.colors)) themedPatch.color = { ...scanned.colors };
-    if (hasKeys(scanned.fonts)) themedPatch.font = { ...scanned.fonts };
+    if (hasKeys(scanned.fonts)) themedPatch.font = Object.fromEntries(Object.entries(scanned.fonts as Record<string, string>).map(([k, v]) => [k, enrichFontValue(v)]));
     if (hasKeys(scanned.radius)) themedPatch.radius = mapDimensionGroup(scanned.radius as Record<string, number>);
     if (hasKeys(scanned.spacing)) themedPatch.spacing = mapDimensionGroup(scanned.spacing as Record<string, number>);
     if (hasKeys(scanned.fontSize)) themedPatch.fontSize = mapDimensionGroup(scanned.fontSize as Record<string, number>);
     if (hasKeys(scanned.shadows)) themedPatch.shadow = { ...(scanned.shadows as Record<string, string>) };
+    if (hasKeys(scanned.breakpoints)) themedPatch.breakpoint = mapDimensionGroup(scanned.breakpoints as Record<string, number>);
     if (Object.keys(themedPatch).length > 0) patch[themeName] = themedPatch;
   }
 
@@ -455,6 +499,17 @@ export function getThemeFontSize(tokens: Tokens, theme: string): TokenGroup {
   return {};
 }
 
+/** Get breakpoint tokens for a named theme, falling back to primary. */
+export function getThemeBreakpoints(tokens: Tokens, theme: string): TokenGroup {
+  const block = tokens[theme];
+  if (block && 'breakpoint' in block) {
+    const themeBlock = block as ThemeTokens;
+    if (themeBlock.breakpoint && Object.keys(themeBlock.breakpoint).length) return themeBlock.breakpoint;
+  }
+  if (theme !== 'primary') return getThemeBreakpoints(tokens, 'primary');
+  return {};
+}
+
 /** Get named theme keys in declaration order, excluding the core block. */
 export function getThemeNames(tokens: Tokens): string[] {
   return Object.keys(tokens).filter((key) => {
@@ -471,6 +526,45 @@ export function getThemeNames(tokens: Tokens): string[] {
 
 /** Get a font family for a specific theme and role ('sans' | 'heading' | 'mono').
  *  Falls back: theme+role → theme+sans → primary+role → primary+sans → null. */
+const SYSTEM_FONT_KEYWORDS = new Set([
+  // Generic families & system keywords
+  'ui-sans-serif', 'ui-serif', 'ui-monospace', 'system-ui',
+  'sans-serif', 'serif', 'monospace', '-apple-system', 'inherit', 'initial',
+  // Common web-safe fonts that appear as fallbacks, not as the intended design font
+  'arial', 'helvetica', 'georgia', 'verdana', 'tahoma', 'trebuchet ms',
+  'times new roman', 'courier new', 'courier', 'palatino', 'garamond',
+  'bookman', 'comic sans ms', 'impact', 'lucida sans unicode',
+  // Emoji / symbol fallback fonts — present in Tailwind's default
+  // sans-serif stack but not in Figma's font registry. Without skipping
+  // these, the resolver picks "Apple Color Emoji" as the body font on
+  // any consumer that exposes Tailwind's default `font.sans` value,
+  // then `figma.loadFontAsync` throws "couldn't load font".
+  'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', 'noto color emoji',
+]);
+
+export function extractFontName(raw: unknown): string | null {
+  const parts = String(raw || '').split(',');
+  let varFallback: string | null = null;
+  for (const part of parts) {
+    const trimmed = part.trim();
+    // Try to extract from CSS variable references like var(--font-open-sans)
+    const varMatch = trimmed.match(/^var\(--font-([a-z0-9-]+)\)/i);
+    if (varMatch) {
+      if (!varFallback) {
+        varFallback = varMatch[1].split('-').map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+      }
+      continue;
+    }
+    // Skip system font keywords
+    const lower = trimmed.toLowerCase().replace(/^["']|["']$/g, '');
+    if (SYSTEM_FONT_KEYWORDS.has(lower)) continue;
+    const name = trimmed.replace(/^["']|["']$/g, '');
+    if (name) return name;
+  }
+  // Fall back to name derived from the CSS variable (e.g. var(--font-open-sans) → "Open Sans")
+  return varFallback;
+}
+
 export function getThemeFontFamily(tokens: Tokens, theme: string, role: string = 'sans'): string | null {
   const block = tokens[theme];
   if (block && 'font' in block) {
@@ -478,8 +572,8 @@ export function getThemeFontFamily(tokens: Tokens, theme: string, role: string =
     if (font) {
       const raw = (font as TokenGroup)[role] || (role !== 'sans' ? (font as TokenGroup).sans : null) || Object.values(font as TokenGroup)[0];
       if (raw) {
-        const first = String(raw).split(',')[0].trim().replace(/^["']|["']$/g, '');
-        if (first) return first;
+        const name = extractFontName(raw);
+        if (name) return name;
       }
     }
   }
@@ -493,8 +587,10 @@ export function getCoreFontFamily(tokens: Tokens): string | null {
   if (core && core.font) {
     const raw = (core.font as TokenGroup).sans || Object.values(core.font as TokenGroup)[0];
     if (raw) {
-      const first = String(raw).split(',')[0].trim().replace(/^["']|["']$/g, '');
-      if (first) return first;
+      // Filter system / emoji / generic-keyword entries — they aren't
+      // valid Figma font families. Same logic as getThemeFontFamily.
+      const name = extractFontName(raw);
+      if (name) return name;
     }
   }
   return getThemeFontFamily(tokens, 'primary');
@@ -534,7 +630,7 @@ export function tokensToDTCG(tokens: Tokens): DTCGTokens {
 
   // Core (font)
   if (tokens.core) {
-    dtcg.core = {} as Record<string, any>;
+    dtcg.core = {} as Record<string, Record<string, DTCGEntry>>;
     if (tokens.core.font) {
       dtcg.core.font = {} as Record<string, DTCGEntry>;
       for (const fk in tokens.core.font) {
@@ -554,7 +650,7 @@ export function tokensToDTCG(tokens: Tokens): DTCGTokens {
   for (let ti = 0; ti < themes.length; ti++) {
     const themeName = themes[ti];
     if (!tokens[themeName]) continue;
-    dtcg[themeName] = {} as Record<string, any>;
+    dtcg[themeName] = {} as Record<string, Record<string, DTCGEntry>>;
 
     const themeBlock = tokens[themeName] as ThemeTokens;