inkhouse 0.1.0-beta.0

package/src/component-gen.ts

@@ -0,0 +1,561 @@
+import { TOKENS, COMPONENT_DEFS, getThemeColors, getThemeRadius } from './tokens';
+import { parseColor, debug } from './colors';
+import { getComponentDef } from './component-defs';
+import { tailwindClassesToStyle, applyTailwindStylesToFrame } from './tailwind';
+import { bindColorVariable, pxFromSizeToken } from './variables';
+import { createTextNode } from './text-builder';
+import { extractStatesFromClasses, mergeStatesWithDefinition, type StateInfo } from './state-analyzer';
+import { extractArbitraryValue, parseLength } from './utility-resolver';
+
+type RingInfo = { width: number; color: { r: number; g: number; b: number; a?: number } };
+
+function getStateEntry(states: StateInfo[], name: string): StateInfo | null {
+  for (let i = 0; i < states.length; i++) {
+    if (states[i].name === name) return states[i];
+  }
+  return null;
+}
+
+function getStateNames(states: StateInfo[]): string[] {
+  const names: string[] = ['default'];
+  for (let i = 0; i < states.length; i++) {
+    const name = states[i].name;
+    if (name === 'default') continue;
+    names.push(name);
+  }
+  return names;
+}
+
+function buildStateClasses(states: StateInfo[], name: string): string[] {
+  const defaultEntry = getStateEntry(states, 'default');
+  const baseClasses = defaultEntry ? defaultEntry.classes.slice() : [];
+  if (name === 'default') return baseClasses;
+  const entry = getStateEntry(states, name);
+  if (!entry) return baseClasses;
+  return baseClasses.concat(entry.classes);
+}
+
+function parseRingWidth(utility: string): number | null {
+  if (utility === 'ring') return 3;
+  if (!utility.startsWith('ring-')) return null;
+  const token = utility.substring(5);
+  if (token === 'inset' || token.startsWith('offset-')) return null;
+  if (token.startsWith('[')) {
+    const arbitrary = extractArbitraryValue(utility);
+    if (!arbitrary) return null;
+    return parseLength(arbitrary);
+  }
+  const num = parseFloat(token);
+  if (!Number.isNaN(num) && String(num) === token) return num;
+  return null;
+}
+
+function parseRingColor(utility: string, colorGroup: Record<string, string>): { r: number; g: number; b: number; a?: number } | null {
+  if (!utility.startsWith('ring-')) return null;
+  const token = utility.substring(5);
+  if (token === 'inset' || token.startsWith('offset-')) return null;
+  if (token.startsWith('[')) return null;
+  const num = parseFloat(token);
+  if (!Number.isNaN(num) && String(num) === token) return null;
+  const resolved = colorGroup[token];
+  if (!resolved) return null;
+  return parseColor(resolved);
+}
+
+function getRingInfoFromClasses(classes: string[], colorGroup: Record<string, string>): RingInfo | null {
+  let width: number | null = null;
+  let color: { r: number; g: number; b: number; a?: number } | null = null;
+
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const nextWidth = parseRingWidth(cls);
+    if (nextWidth != null) width = nextWidth;
+    const nextColor = parseRingColor(cls, colorGroup);
+    if (nextColor) color = nextColor;
+  }
+
+  if (width == null && color == null) return null;
+  if (width == null) width = 3;
+  if (!color) {
+    const fallback = colorGroup.ring || colorGroup.primary;
+    if (!fallback) return null;
+    color = parseColor(fallback);
+  }
+  if (!width || width <= 0) return null;
+  return { width, color };
+}
+
+function hasVisibleFill(node: FrameNode): boolean {
+  const fills = (node as any).fills;
+  if (!Array.isArray(fills)) return false;
+  for (let i = 0; i < fills.length; i++) {
+    const fill = fills[i];
+    if (!fill || fill.visible === false) continue;
+    if (fill.opacity != null && fill.opacity <= 0) continue;
+    return true;
+  }
+  return false;
+}
+
+function applyRingEffect(node: FrameNode, classes: string[], colorGroup: Record<string, string>): void {
+  const ring = getRingInfoFromClasses(classes, colorGroup);
+  if (!ring) return;
+  const useSpread = (node as any).clipsContent === true && hasVisibleFill(node);
+  if (!useSpread) {
+    const strokeWeight = typeof node.strokeWeight === 'number' ? node.strokeWeight : 0;
+    node.strokes = [{
+      type: 'SOLID',
+      color: { r: ring.color.r, g: ring.color.g, b: ring.color.b },
+      opacity: ring.color.a == null ? 1 : ring.color.a,
+    }];
+    node.strokeWeight = Math.max(strokeWeight, ring.width);
+    return;
+  }
+  const effect: DropShadowEffect = {
+    type: 'DROP_SHADOW',
+    color: { r: ring.color.r, g: ring.color.g, b: ring.color.b, a: ring.color.a == null ? 1 : ring.color.a },
+    offset: { x: 0, y: 0 },
+    radius: 0,
+    spread: ring.width,
+    visible: true,
+    blendMode: 'NORMAL'
+  };
+  const effects: Effect[] = [];
+  if (node.effects && node.effects.length > 0) {
+    for (let i = 0; i < node.effects.length; i++) effects.push(node.effects[i]);
+  }
+  effects.push(effect);
+  node.effects = effects;
+}
+
+export function createCVAComponentSet(parent: any, def: any, theme: string): any {
+  const colorGroup = getThemeColors(TOKENS, theme);
+  const radiusGroup = getThemeRadius(TOKENS, theme);
+
+  const container = figma.createFrame();
+  container.name = def.name + ' Variants';
+  container.layoutMode = 'VERTICAL';
+  container.itemSpacing = 24;
+  container.primaryAxisSizingMode = 'AUTO';
+  container.counterAxisSizingMode = 'AUTO';
+  container.fills = [];
+
+  // Get variant keys (e.g., ['variant', 'size'])
+  const variantKeys = Object.keys(def.variants || {});
+  if (variantKeys.length === 0) {
+    debug('CVA component has no variants', def.name);
+    return container;
+  }
+
+  // Get the primary variant (usually 'variant')
+  const primaryVariant = variantKeys[0];
+  const primaryValues = def.variants[primaryVariant] || [];
+
+  // Create a section for each primary variant value
+  for (let vi = 0; vi < primaryValues.length; vi++) {
+    const variantValue = primaryValues[vi];
+
+    const variantSection = figma.createFrame();
+    variantSection.name = def.name + ' - ' + variantValue;
+    variantSection.layoutMode = 'VERTICAL';
+    variantSection.itemSpacing = 8;
+    variantSection.primaryAxisSizingMode = 'AUTO';
+    variantSection.counterAxisSizingMode = 'AUTO';
+    variantSection.fills = [];
+
+    // Label for this variant
+    const label = createTextNode(variantValue.charAt(0).toUpperCase() + variantValue.slice(1), { fontSize: 12, bold: true });
+    variantSection.appendChild(label);
+
+    // Row for states
+    const stateRow = figma.createFrame();
+    stateRow.name = 'States';
+    stateRow.layoutMode = 'HORIZONTAL';
+    stateRow.itemSpacing = 12;
+    stateRow.primaryAxisSizingMode = 'AUTO';
+    stateRow.counterAxisSizingMode = 'AUTO';
+    stateRow.fills = [];
+
+    // Get classes for this variant
+    let classes = def.baseClasses.slice();
+    if (def.variantClasses && def.variantClasses[primaryVariant] && def.variantClasses[primaryVariant][variantValue]) {
+      classes = classes.concat(def.variantClasses[primaryVariant][variantValue]);
+    }
+
+    const stateInfo = extractStatesFromClasses(classes);
+    const stateNames = getStateNames(stateInfo);
+
+    for (let si = 0; si < stateNames.length; si++) {
+      const state = stateNames[si];
+      const stateClasses = buildStateClasses(stateInfo, state);
+
+      // Create component frame
+      const comp = figma.createFrame();
+      comp.name = def.name + '/' + variantValue + '/' + state;
+      comp.layoutMode = 'HORIZONTAL';
+      comp.primaryAxisSizingMode = 'AUTO';
+      comp.counterAxisSizingMode = 'AUTO';
+      comp.counterAxisAlignItems = 'CENTER';
+      comp.primaryAxisAlignItems = 'CENTER';
+      comp.itemSpacing = 8;
+      comp.paddingLeft = comp.paddingRight = 16;
+      comp.paddingTop = comp.paddingBottom = 8;
+      comp.cornerRadius = pxFromSizeToken(radiusGroup.base || '0.5rem');
+      comp.fills = [];
+      comp.strokes = [];
+
+      // Get style for this state (base + state overrides)
+      const style = tailwindClassesToStyle(stateClasses, 'default', colorGroup);
+
+      // Apply background - try variable binding first, fall back to raw color
+      if (style.bg) {
+        const bgBound = style.bgToken && bindColorVariable(comp, style.bgToken, 'fill', theme);
+        if (!bgBound) {
+          const bg = parseColor(style.bg);
+          const bgOpacity = style.bgOpacity != null ? style.bgOpacity : (bg.a == null ? 1 : bg.a);
+          comp.fills = [{ type: 'SOLID', color: { r: bg.r, g: bg.g, b: bg.b }, opacity: bgOpacity }];
+        }
+      }
+
+      // Apply border - try variable binding first, fall back to raw color
+      if (style.border) {
+        const borderBound = style.borderToken && bindColorVariable(comp, style.borderToken, 'stroke', theme);
+        if (!borderBound) {
+          const borderColor = parseColor(style.border);
+          comp.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
+        }
+        comp.strokeWeight = 1;
+      }
+
+      // Apply opacity for disabled
+      if (style.opacity != null) {
+        comp.opacity = style.opacity;
+      }
+
+      // Create text
+      const textColor = style.text ? parseColor(style.text) : colorGroup.foreground ? parseColor(colorGroup.foreground) : { r: 0, g: 0, b: 0 };
+      const text = createTextNode(def.name, { bold: true, fontSize: 14, fill: { r: textColor.r, g: textColor.g, b: textColor.b } });
+
+      // Apply underline for link variant
+      if (style.underline && text.textDecoration !== undefined) {
+        text.textDecoration = 'UNDERLINE';
+      }
+
+      comp.appendChild(text);
+      applyRingEffect(comp, stateClasses, colorGroup);
+      stateRow.appendChild(comp);
+    }
+
+    variantSection.appendChild(stateRow);
+    container.appendChild(variantSection);
+  }
+
+  parent.appendChild(container);
+  return container;
+}
+
+export function createStateComponentSet(parent: any, def: any, theme: string): any {
+  const colorGroup = getThemeColors(TOKENS, theme);
+  const radiusGroup = getThemeRadius(TOKENS, theme);
+
+  const container = figma.createFrame();
+  container.name = def.name + ' States';
+  container.layoutMode = 'VERTICAL';
+  container.itemSpacing = 16;
+  container.primaryAxisSizingMode = 'AUTO';
+  container.counterAxisSizingMode = 'AUTO';
+  container.fills = [];
+
+  // Label
+  const label = createTextNode(def.name, { fontSize: 14, bold: true });
+  container.appendChild(label);
+
+  const stateRow = figma.createFrame();
+  stateRow.name = 'States';
+  stateRow.layoutMode = 'HORIZONTAL';
+  stateRow.itemSpacing = 16;
+  stateRow.primaryAxisSizingMode = 'AUTO';
+  stateRow.counterAxisSizingMode = 'AUTO';
+  stateRow.fills = [];
+
+  const baseClasses = def.baseClasses ? def.baseClasses.slice() : [];
+  const extractedStates = extractStatesFromClasses(baseClasses);
+  const mergedStates = mergeStatesWithDefinition(extractedStates, def);
+  const stateNames = getStateNames(mergedStates);
+
+  for (let i = 0; i < stateNames.length; i++) {
+    const stateName = stateNames[i];
+    const stateClasses = buildStateClasses(mergedStates, stateName);
+
+    const comp = figma.createFrame();
+    comp.name = def.name + '/' + stateName;
+    comp.layoutMode = 'HORIZONTAL';
+    comp.primaryAxisSizingMode = 'FIXED';
+    comp.counterAxisSizingMode = 'AUTO';
+    comp.resize(200, comp.height);
+    comp.paddingLeft = comp.paddingRight = 12;
+    comp.paddingTop = comp.paddingBottom = 8;
+    comp.cornerRadius = pxFromSizeToken(radiusGroup.base || '0.5rem');
+    comp.fills = [];
+    comp.strokes = [];
+
+    // Apply base + state styles
+    const style = tailwindClassesToStyle(stateClasses, 'default', colorGroup);
+
+    if (style.bg) {
+      const bgBound = style.bgToken && bindColorVariable(comp, style.bgToken, 'fill', theme);
+      if (!bgBound) {
+        const bg = parseColor(style.bg);
+        const bgOpacity = style.bgOpacity != null ? style.bgOpacity : (bg.a == null ? 1 : bg.a);
+        comp.fills = [{ type: 'SOLID', color: { r: bg.r, g: bg.g, b: bg.b }, opacity: bgOpacity }];
+      }
+    }
+
+    if (style.border) {
+      const borderBound = style.borderToken && bindColorVariable(comp, style.borderToken, 'stroke', theme);
+      if (!borderBound) {
+        const borderColor = parseColor(style.border);
+        comp.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
+      }
+      comp.strokeWeight = 1;
+    } else {
+      let hasBorderWidth = false;
+      for (let j = 0; j < stateClasses.length; j++) {
+        const cls = stateClasses[j];
+        if (cls === 'border' || /^border-\\d+$/.test(cls)) {
+          hasBorderWidth = true;
+          break;
+        }
+      }
+      if (hasBorderWidth) {
+        const inputBorder = colorGroup.input || colorGroup.border;
+        if (inputBorder) {
+          const borderColor = parseColor(inputBorder);
+          comp.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
+          comp.strokeWeight = 1;
+        }
+      }
+    }
+
+    if (style.opacity != null) {
+      comp.opacity = style.opacity;
+    }
+
+    // Add placeholder text
+    let placeholderColor = colorGroup['muted-foreground'] ? parseColor(colorGroup['muted-foreground']) : { r: 0.5, g: 0.5, b: 0.5 };
+    if (style.text) placeholderColor = parseColor(style.text);
+    const placeholder = createTextNode(stateName === 'default' ? 'Placeholder...' : stateName.charAt(0).toUpperCase() + stateName.slice(1), {
+      fontSize: 14,
+      fill: { r: placeholderColor.r, g: placeholderColor.g, b: placeholderColor.b }
+    });
+    comp.appendChild(placeholder);
+    applyRingEffect(comp, stateClasses, colorGroup);
+
+    stateRow.appendChild(comp);
+  }
+
+  container.appendChild(stateRow);
+  parent.appendChild(container);
+  return container;
+}
+
+export function createCompoundComponent(parent: any, def: any, theme: string): any {
+  const colorGroup = getThemeColors(TOKENS, theme);
+  const radiusGroup = getThemeRadius(TOKENS, theme);
+
+  const container = figma.createFrame();
+  container.name = def.name;
+  container.layoutMode = 'VERTICAL';
+  container.primaryAxisSizingMode = 'AUTO';
+  container.counterAxisSizingMode = 'AUTO';
+  container.fills = [];
+  container.strokes = [];
+
+  // Find the main container sub-component
+  let mainSub: any = null;
+  const subComponents = def.subComponents || [];
+  for (let i = 0; i < subComponents.length; i++) {
+    if (subComponents[i].slot === 'container' || subComponents[i].name === def.name) {
+      mainSub = subComponents[i];
+      break;
+    }
+  }
+
+  // Apply main container styles
+  if (mainSub) {
+    applyTailwindStylesToFrame(container, mainSub.classes, colorGroup, radiusGroup, theme);
+  }
+
+  // Set minimum size for card-like components
+  container.resize(320, container.height);
+  container.primaryAxisSizingMode = 'AUTO';
+
+  // Helper to find a sub-component by slot
+  function findSub(slot: string): any {
+    for (let j = 0; j < subComponents.length; j++) {
+      if (subComponents[j].slot === slot) return subComponents[j];
+    }
+    return null;
+  }
+
+  // Build structure: header wraps title + description, then content, then footer
+  // This mirrors how shadcn compound components actually nest
+  const headerSub = findSub('header');
+  const titleSub = findSub('title');
+  const descSub = findSub('description');
+  const contentSub = findSub('content');
+  const footerSub = findSub('footer');
+
+  // --- Header (contains title + description) ---
+  const hasTitle = !!titleSub;
+  const hasDesc = !!descSub;
+  if (headerSub && (hasTitle || hasDesc)) {
+    const headerFrame = figma.createFrame();
+    headerFrame.name = headerSub.name;
+    headerFrame.layoutMode = 'VERTICAL';
+    headerFrame.primaryAxisSizingMode = 'AUTO';
+    headerFrame.counterAxisSizingMode = 'AUTO';
+    headerFrame.fills = [];
+    applyTailwindStylesToFrame(headerFrame, headerSub.classes, colorGroup, radiusGroup, theme);
+
+    if (hasTitle) {
+      const titleFrame = figma.createFrame();
+      titleFrame.name = titleSub.name;
+      titleFrame.layoutMode = 'VERTICAL';
+      titleFrame.primaryAxisSizingMode = 'AUTO';
+      titleFrame.counterAxisSizingMode = 'AUTO';
+      titleFrame.fills = [];
+      applyTailwindStylesToFrame(titleFrame, titleSub.classes, colorGroup, radiusGroup, theme);
+      const titleText = createTextNode(def.name + ' Title', { fontSize: 18, bold: true });
+      titleFrame.appendChild(titleText);
+      headerFrame.appendChild(titleFrame);
+    }
+
+    if (hasDesc) {
+      const descFrame = figma.createFrame();
+      descFrame.name = descSub.name;
+      descFrame.layoutMode = 'VERTICAL';
+      descFrame.primaryAxisSizingMode = 'AUTO';
+      descFrame.counterAxisSizingMode = 'AUTO';
+      descFrame.fills = [];
+      applyTailwindStylesToFrame(descFrame, descSub.classes, colorGroup, radiusGroup, theme);
+      const descColor = colorGroup['muted-foreground'] ? parseColor(colorGroup['muted-foreground']) : { r: 0.5, g: 0.5, b: 0.5 };
+      const descText = createTextNode('Description text goes here', { fontSize: 14, fill: { r: descColor.r, g: descColor.g, b: descColor.b } });
+      descFrame.appendChild(descText);
+      headerFrame.appendChild(descFrame);
+    }
+
+    container.appendChild(headerFrame);
+  } else {
+    // No header wrapper - add title and description directly
+    if (hasTitle) {
+      const titleText2 = createTextNode(def.name + ' Title', { fontSize: 18, bold: true });
+      container.appendChild(titleText2);
+    }
+    if (hasDesc) {
+      const descColor2 = colorGroup['muted-foreground'] ? parseColor(colorGroup['muted-foreground']) : { r: 0.5, g: 0.5, b: 0.5 };
+      const descText2 = createTextNode('Description text goes here', { fontSize: 14, fill: { r: descColor2.r, g: descColor2.g, b: descColor2.b } });
+      container.appendChild(descText2);
+    }
+  }
+
+  // --- Content ---
+  if (contentSub) {
+    const contentFrame = figma.createFrame();
+    contentFrame.name = contentSub.name;
+    contentFrame.layoutMode = 'VERTICAL';
+    contentFrame.primaryAxisSizingMode = 'AUTO';
+    contentFrame.counterAxisSizingMode = 'AUTO';
+    contentFrame.fills = [];
+    applyTailwindStylesToFrame(contentFrame, contentSub.classes, colorGroup, radiusGroup, theme);
+    const contentText = createTextNode('Content area', { fontSize: 14 });
+    contentFrame.appendChild(contentText);
+    container.appendChild(contentFrame);
+  }
+
+  // --- Footer ---
+  if (footerSub) {
+    const footerFrame = figma.createFrame();
+    footerFrame.name = footerSub.name;
+    footerFrame.layoutMode = 'HORIZONTAL';
+    footerFrame.primaryAxisSizingMode = 'AUTO';
+    footerFrame.counterAxisSizingMode = 'AUTO';
+    footerFrame.fills = [];
+    applyTailwindStylesToFrame(footerFrame, footerSub.classes, colorGroup, radiusGroup, theme);
+    const footerText = createTextNode('Footer', { fontSize: 12 });
+    footerFrame.appendChild(footerText);
+    container.appendChild(footerFrame);
+  }
+
+  parent.appendChild(container);
+  return container;
+}
+
+export function createSimpleComponent(parent: any, def: any, theme: string): any {
+  const colorGroup = getThemeColors(TOKENS, theme);
+  const radiusGroup = getThemeRadius(TOKENS, theme);
+
+  const frame = figma.createFrame();
+  frame.name = def.name;
+  frame.layoutMode = 'VERTICAL';
+  frame.primaryAxisSizingMode = 'AUTO';
+  frame.counterAxisSizingMode = 'AUTO';
+  frame.fills = [];
+
+  applyTailwindStylesToFrame(frame, def.classes || [], colorGroup, radiusGroup, theme);
+
+  // Add label
+  const label = createTextNode(def.name, { fontSize: 14 });
+  frame.appendChild(label);
+
+  parent.appendChild(frame);
+  return frame;
+}
+
+export function createComponentFromDef(parent: any, componentName: string, theme: string, options?: any): any {
+  const def = getComponentDef(componentName);
+  if (!def) {
+    debug('Component not found in COMPONENT_DEFS:', componentName);
+    return null;
+  }
+
+  debug('Creating component from def:', { name: componentName, type: def.type });
+
+  switch (def.type) {
+    case 'cva':
+      return createCVAComponentSet(parent, def, theme);
+    case 'compound':
+      return createCompoundComponent(parent, def, theme);
+    case 'state':
+      return createStateComponentSet(parent, def, theme);
+    case 'simple':
+      return createSimpleComponent(parent, def, theme);
+    default:
+      debug('Unknown component type:', def.type);
+      return null;
+  }
+}
+
+export function createAllComponentsFromDefs(parent: any, theme: string, options?: any): any[] {
+  options = options || {};
+  const allowedTypes = options.types || ['cva', 'compound', 'state', 'simple'];
+  const excludeNames = options.exclude || [];
+
+  const components = COMPONENT_DEFS && COMPONENT_DEFS.components ? COMPONENT_DEFS.components : [];
+  const created: any[] = [];
+
+  for (let i = 0; i < components.length; i++) {
+    const def = components[i];
+
+    // Filter by type
+    if (allowedTypes.indexOf(def.type) === -1) continue;
+
+    // Filter by exclude list
+    if (excludeNames.indexOf(def.name) !== -1) continue;
+
+    const comp = createComponentFromDef(parent, def.name, theme, options);
+    if (comp) created.push(comp);
+  }
+
+  return created;
+}

package/src/component-lookup.ts

@@ -0,0 +1,82 @@
+import { COMPONENT_DEFS } from './tokens';
+
+export type IconRegistryEntry = {
+  module: string;
+  exportName: string;
+  svg: string;
+};
+
+const REACT_ICON_MAP: Record<string, string> = {
+  HiOutlineHome: 'home',
+  HiHome: 'home',
+  RiTableView: 'portfolio',
+  HiMiniSquares2x2: 'portfolio',
+  RiCompass3Line: 'strategy',
+  RiWallet2Fill: 'pda',
+  RiAccountBoxLine: 'account',
+  HiLogout: 'logout',
+  RiLogoutBoxLine: 'logout',
+  HiMenu: 'menu',
+  HiX: 'close',
+  HiCheck: 'check',
+  ChevronDown: 'chevron-down',
+  ChevronDownIcon: 'chevron-down',
+};
+
+let COMPONENT_DEF_MAP: Record<string, any> | null = null;
+let ICON_REGISTRY_MAP: Record<string, IconRegistryEntry> | null = null;
+
+export function getComponentDefByName(name: string): any | null {
+  const defName = String(name || '').toLowerCase();
+  if (!COMPONENT_DEF_MAP) {
+    COMPONENT_DEF_MAP = {};
+    const defsArray = (COMPONENT_DEFS && COMPONENT_DEFS.components) ? COMPONENT_DEFS.components : [];
+    for (let i = 0; i < defsArray.length; i++) {
+      const d = defsArray[i];
+      const analysis = d.analysis || d;
+      if (!analysis || !analysis.name) continue;
+      const key = String(analysis.name).toLowerCase();
+      if (!COMPONENT_DEF_MAP[key]) {
+        COMPONENT_DEF_MAP[key] = d;
+      }
+      // Also index under dash-stripped key so PascalCase JSX refs (e.g. "HeroSection")
+      // resolve to kebab-case scanner names (e.g. "Hero-section" → "herosection").
+      const dashlessKey = key.replace(/-/g, '');
+      if (dashlessKey !== key && !COMPONENT_DEF_MAP[dashlessKey]) {
+        COMPONENT_DEF_MAP[dashlessKey] = d;
+      }
+    }
+  }
+  return COMPONENT_DEF_MAP[defName] || null;
+}
+
+function getIconRegistry(): Record<string, IconRegistryEntry> {
+  if (ICON_REGISTRY_MAP) return ICON_REGISTRY_MAP;
+  const registry = (COMPONENT_DEFS && COMPONENT_DEFS.iconRegistry) ? COMPONENT_DEFS.iconRegistry : {};
+  ICON_REGISTRY_MAP = {};
+  for (const key in registry) {
+    ICON_REGISTRY_MAP[key] = registry[key];
+  }
+  return ICON_REGISTRY_MAP;
+}
+
+export function getIconRegistryEntry(name: string): IconRegistryEntry | null {
+  if (!name) return null;
+  const registry = getIconRegistry();
+  if (registry[name]) return registry[name];
+  const target = name.toLowerCase();
+  for (const key in registry) {
+    if (key.toLowerCase() === target) return registry[key];
+  }
+  return null;
+}
+
+export function getReactIconKey(name: string): string | null {
+  if (!name) return null;
+  if (REACT_ICON_MAP[name]) return REACT_ICON_MAP[name];
+  const target = name.toLowerCase();
+  for (const key in REACT_ICON_MAP) {
+    if (key.toLowerCase() === target) return REACT_ICON_MAP[key];
+  }
+  return null;
+}