inkhouse 0.1.0-beta.0

package/src/icon-builder.ts

@@ -0,0 +1,607 @@
+/**
+ * Icon Builder Module
+ *
+ * Handles icon creation, SVG processing, and icon manipulation for Figma.
+ * Extracted from ui-builder.ts for better modularity.
+ */
+
+import { COMPONENT_DEFS } from './tokens';
+
+declare const figma: any;
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type RGB = { r: number; g: number; b: number };
+
+type NodeIR = {
+  kind: string;
+  tagLower?: string;
+  props?: Record<string, string>;
+  children?: NodeIR[];
+};
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+export const ICON_PATHS: Record<string, { d: string; viewBox: number; stroke: boolean; strokeWidth?: number }> = {
+  home: {
+    d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
+    viewBox: 24,
+    stroke: true,
+    strokeWidth: 2
+  },
+  portfolio: {
+    d: "M3 3C2.44772 3 2 3.44772 2 4V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20V4C22 3.44772 21.5523 3 21 3H3ZM8 5V8H4V5H8ZM4 14V10H8V14H4ZM4 16H8V19H4V16ZM10 16H20V19H10V16ZM20 14H10V10H20V14ZM20 5V8H10V5H20Z",
+    viewBox: 24,
+    stroke: false
+  },
+  strategy: {
+    d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z M16.5 7.5 14 14 7.5 16.5 10 10l6.5-2.5Zm-4.5 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    viewBox: 24,
+    stroke: true,
+    strokeWidth: 1.8
+  },
+  pda: {
+    d: "M22.0049 7.99979H13.0049C12.4526 7.99979 12.0049 8.4475 12.0049 8.99979V14.9998C12.0049 15.5521 12.4526 15.9998 13.0049 15.9998H22.0049V19.9998C22.0049 20.5521 21.5572 20.9998 21.0049 20.9998H3.00488C2.4526 20.9998 2.00488 20.5521 2.00488 19.9998V3.99979C2.00488 3.4475 2.4526 2.99979 3.00488 2.99979H21.0049C21.5572 2.99979 22.0049 3.4475 22.0049 3.99979V7.99979ZM15.0049 10.9998H18.0049V12.9998H15.0049V10.9998Z",
+    viewBox: 24,
+    stroke: false
+  },
+  account: {
+    d: "M3 4.99509C3 3.89323 3.89262 3 4.99509 3H19.0049C20.1068 3 21 3.89262 21 4.99509V19.0049C21 20.1068 20.1074 21 19.0049 21H4.99509C3.89323 21 3 20.1074 3 19.0049V4.99509ZM5 5V19H19V5H5ZM7.97216 18.1808C7.35347 17.9129 6.76719 17.5843 6.22083 17.2024C7.46773 15.2753 9.63602 14 12.1022 14C14.5015 14 16.6189 15.2071 17.8801 17.0472C17.3438 17.4436 16.7664 17.7877 16.1555 18.0718C15.2472 16.8166 13.77 16 12.1022 16C10.3865 16 8.87271 16.8641 7.97216 18.1808ZM12 13C10.067 13 8.5 11.433 8.5 9.5C8.5 7.567 10.067 6 12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13ZM12 11C12.8284 11 13.5 10.3284 13.5 9.5C13.5 8.67157 12.8284 8 12 8C11.1716 8 10.5 8.67157 10.5 9.5C10.5 10.3284 11.1716 11 12 11Z",
+    viewBox: 24,
+    stroke: false
+  },
+  logout: {
+    d: "M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z",
+    viewBox: 20,
+    stroke: false
+  },
+  menu: {
+    d: "M4 6h16M4 12h16M4 18h16",
+    viewBox: 24,
+    stroke: true,
+    strokeWidth: 2
+  },
+  close: {
+    d: "M6 18L18 6M6 6l12 12",
+    viewBox: 24,
+    stroke: true,
+    strokeWidth: 2
+  },
+  'chevron-down': {
+    d: "M6 9l6 6 6-6",
+    viewBox: 24,
+    stroke: true,
+    strokeWidth: 2
+  },
+  check: {
+    d: "M5 13l4 4L19 7",
+    viewBox: 24,
+    stroke: true,
+    strokeWidth: 2
+  }
+};
+
+const SVG_CHILD_TAGS: Record<string, boolean> = {
+  path: true,
+  circle: true,
+  rect: true,
+  line: true,
+  polyline: true,
+  polygon: true,
+  ellipse: true,
+  g: true,
+  use: true,
+  defs: true,
+  clippath: true,
+  mask: true,
+};
+
+// ---------------------------------------------------------------------------
+// Helper Functions
+// ---------------------------------------------------------------------------
+
+/**
+ * Convert RGB to hex string
+ */
+export function rgbToHex(color: RGB): string {
+  const r = Math.round(Math.max(0, Math.min(1, color.r)) * 255);
+  const g = Math.round(Math.max(0, Math.min(1, color.g)) * 255);
+  const b = Math.round(Math.max(0, Math.min(1, color.b)) * 255);
+  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
+}
+
+function escapeSvgAttr(value: string): string {
+  return String(value || '')
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function extractSvgAttribute(svg: string, attr: string): string | null {
+  const re = new RegExp('<svg[^>]*\\s' + attr + '=["\\\']([^"\\\']+)["\\\']', 'i');
+  const match = svg.match(re);
+  return match ? match[1] : null;
+}
+
+function normalizeSvgPaintValue(value: string | null): string | null {
+  if (!value) return null;
+  const lower = value.trim().toLowerCase();
+  if (lower === 'none') return null;
+  return value;
+}
+
+/**
+ * Preprocess SVG for Figma compatibility
+ * - Replaces "currentColor" with the actual hex color (Figma doesn't understand CSS currentColor)
+ */
+function preprocessSvgForFigma(svg: string, color?: RGB): string {
+  const hexColor = color ? rgbToHex(color) : '#000000';
+  let output = svg.replace(/currentColor/gi, hexColor);
+  output = output.replace(/\scolor=["'][^"']*["']/gi, '');
+  output = output.replace(/\sstyle=["']([^"']*)["']/gi, function(_match, rawStyles) {
+    const cleaned = String(rawStyles || '')
+      .split(';')
+      .map(s => s.trim())
+      .filter(Boolean)
+      .filter(s => s.toLowerCase().indexOf('color:') !== 0)
+      .join('; ');
+    if (!cleaned) return '';
+    return ' style="' + cleaned + '"';
+  });
+  const rootFill = normalizeSvgPaintValue(extractSvgAttribute(output, 'fill'));
+  const rootStroke = normalizeSvgPaintValue(extractSvgAttribute(output, 'stroke'));
+
+  output = output.replace(/<path\b([^>]*)>/gi, function(_match, rawAttrs) {
+    let attrs = rawAttrs || '';
+    let suffix = '';
+    if (attrs.trim().endsWith('/')) {
+      attrs = attrs.replace(/\s*\/$/, '');
+      suffix = ' /';
+    }
+
+    const hasFill = /\sfill=/.test(attrs);
+    const hasStroke = /\sstroke=/.test(attrs);
+
+    if (!hasStroke && rootStroke) {
+      attrs += ' stroke="' + rootStroke + '"';
+    }
+    if (!hasFill) {
+      if (!hasStroke && rootFill) {
+        attrs += ' fill="' + rootFill + '"';
+      } else if (!hasStroke && !rootFill && !rootStroke) {
+        attrs += ' fill="' + hexColor + '"';
+      }
+    }
+
+    return '<path' + attrs + suffix + '>';
+  });
+
+  return output;
+}
+
+// ---------------------------------------------------------------------------
+// SVG Node Manipulation
+// ---------------------------------------------------------------------------
+
+function getVectorPaintUsage(node: SceneNode): { hasFills: boolean; hasStrokes: boolean } {
+  let hasFills = false;
+  let hasStrokes = false;
+  const vectors: any[] = [];
+  if (node.type === 'VECTOR') {
+    vectors.push(node);
+  } else if ('findAll' in node) {
+    const found = (node as any).findAll((child: any) => child.type === 'VECTOR');
+    for (const vector of found) vectors.push(vector);
+  }
+  for (const vector of vectors) {
+    if (Array.isArray(vector.fills) && vector.fills.length > 0) hasFills = true;
+    if (Array.isArray(vector.strokes) && vector.strokes.length > 0) hasStrokes = true;
+  }
+  return { hasFills, hasStrokes };
+}
+
+function recolorIconPaint(node: SceneNode, color: RGB): void {
+  const vectors: any[] = [];
+  if (node.type === 'VECTOR') {
+    vectors.push(node);
+  } else if ('findAll' in node) {
+    const found = (node as any).findAll((child: any) => child.type === 'VECTOR');
+    for (const vector of found) vectors.push(vector);
+  }
+  const paint = { type: 'SOLID', color: { r: color.r, g: color.g, b: color.b } };
+  for (const vector of vectors) {
+    if (Array.isArray(vector.fills) && vector.fills.length > 0) {
+      vector.fills = [paint];
+    }
+    if (Array.isArray(vector.strokes) && vector.strokes.length > 0) {
+      vector.strokes = [paint];
+    }
+  }
+}
+
+function applyIconPaint(
+  node: SceneNode,
+  color: RGB,
+  options: { stroke?: boolean; strokeWidth?: number } = {}
+): void {
+  const vectors: any[] = [];
+  if (node.type === 'VECTOR') {
+    vectors.push(node);
+  } else if ('findAll' in node) {
+    const found = (node as any).findAll((child: any) => child.type === 'VECTOR');
+    for (const vector of found) vectors.push(vector);
+  }
+  for (const vector of vectors) {
+    const paint = { type: 'SOLID', color: { r: color.r, g: color.g, b: color.b } };
+    if (options.stroke) {
+      vector.strokes = [paint];
+      vector.strokeWeight = options.strokeWidth || vector.strokeWeight || 1.5;
+      vector.fills = [];
+    } else {
+      vector.fills = [paint];
+      vector.strokes = [];
+    }
+  }
+}
+
+export function normalizeIconNode(node: SceneNode): void {
+  if (!node) return;
+  if ('clipsContent' in node) (node as any).clipsContent = false;
+  if ('layoutGrow' in node) (node as any).layoutGrow = 0;
+  const vectors: any[] = [];
+  if (node.type === 'VECTOR') {
+    vectors.push(node);
+  } else if ('findAll' in node) {
+    const found = (node as any).findAll((child: any) => child.type === 'VECTOR');
+    for (const vector of found) vectors.push(vector);
+  }
+  for (const vector of vectors) {
+    if ('strokeAlign' in vector) {
+      try {
+        vector.strokeAlign = 'CENTER';
+      } catch (_err) {
+        // ignore
+      }
+    }
+  }
+}
+
+export function flattenSvgNode(node: SceneNode): SceneNode | null {
+  if (!node || !('children' in node)) return null;
+  const children = (node as any).children || [];
+  if (!children.length) return null;
+  try {
+    const flattened = figma.flatten(Array.from(children));
+    flattened.name = node.name;
+    normalizeIconNode(flattened);
+    try {
+      const parent = (node as any).parent as any;
+      if (parent && 'appendChild' in parent) {
+        (parent as any).appendChild(flattened);
+      }
+      node.remove();
+    } catch (_err) {
+      // ignore
+    }
+    return flattened;
+  } catch (_err) {
+    return null;
+  }
+}
+
+export function resizeSvgNodeTo(node: SceneNode, width: number, height: number): void {
+  if (!node || width <= 0 || height <= 0) return;
+  if (node.type === 'VECTOR') {
+    if ('resizeWithoutConstraints' in node) (node as any).resizeWithoutConstraints(width, height);
+    else if ('resize' in node) (node as any).resize(width, height);
+    return;
+  }
+  const vectors = ('findAll' in node) ? (node as any).findAll((child: any) => child.type === 'VECTOR') : [];
+  const baseWidth = (node as any).width || 0;
+  const baseHeight = (node as any).height || 0;
+  if (!vectors.length || baseWidth <= 0 || baseHeight <= 0) {
+    if ('resizeWithoutConstraints' in node) (node as any).resizeWithoutConstraints(width, height);
+    else if ('resize' in node) (node as any).resize(width, height);
+    return;
+  }
+  const sx = width / baseWidth;
+  const sy = height / baseHeight;
+  for (const vector of vectors) {
+    if ('resizeWithoutConstraints' in vector) {
+      vector.resizeWithoutConstraints(vector.width * sx, vector.height * sy);
+    } else if ('resize' in vector) {
+      vector.resize(vector.width * sx, vector.height * sy);
+    }
+    if (typeof vector.x === 'number') vector.x = vector.x * sx;
+    if (typeof vector.y === 'number') vector.y = vector.y * sy;
+  }
+  if ('resizeWithoutConstraints' in node) (node as any).resizeWithoutConstraints(width, height);
+  else if ('resize' in node) (node as any).resize(width, height);
+}
+
+export function wrapIconNode(
+  icon: SceneNode,
+  width: number,
+  height: number,
+  pad: number,
+  name: string
+): FrameNode {
+  const wrapper = figma.createFrame();
+  wrapper.name = name;
+  wrapper.layoutMode = 'NONE';
+  wrapper.fills = [];
+  wrapper.strokes = [];
+  wrapper.resize(width, height);
+  wrapper.clipsContent = false;
+  if ('layoutGrow' in wrapper) (wrapper as any).layoutGrow = 0;
+
+  const innerWidth = Math.max(1, width - pad * 2);
+  const innerHeight = Math.max(1, height - pad * 2);
+  if (innerWidth !== width || innerHeight !== height) {
+    resizeSvgNodeTo(icon, innerWidth, innerHeight);
+  }
+  normalizeIconNode(icon);
+  if ('x' in icon) (icon as any).x = Math.round((width - (icon as any).width) / 2);
+  if ('y' in icon) (icon as any).y = Math.round((height - (icon as any).height) / 2);
+  wrapper.appendChild(icon);
+  return wrapper;
+}
+
+// ---------------------------------------------------------------------------
+// Icon Creation Functions
+// ---------------------------------------------------------------------------
+
+/**
+ * Create an icon from the built-in ICON_PATHS
+ */
+export function createIcon(name: string, color: RGB): any {
+  const spec = ICON_PATHS[name];
+  if (!spec) return null;
+  const hexColor = color && typeof color.r === 'number' ? rgbToHex(color) : '#000000';
+  const strokeAttrs = spec.stroke
+    ? `fill="none" stroke="${hexColor}" stroke-width="${spec.strokeWidth || 1.5}" stroke-linecap="round" stroke-linejoin="round"`
+    : `fill="${hexColor}"`;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${spec.viewBox} ${spec.viewBox}"><path d="${spec.d}" ${strokeAttrs} /></svg>`;
+  const node = figma.createNodeFromSvg(svg);
+  node.name = `icon/${name}`;
+  normalizeIconNode(node);
+  // Keep the imported SVG frame so its original viewBox canvas is preserved.
+  // Flattening collapses to tight path bounds, which distorts icon proportions
+  // for sparse glyphs (for example chevrons) when resized to Tailwind sizes.
+  const target = node;
+  const usage = getVectorPaintUsage(target);
+  if (!usage.hasFills && !usage.hasStrokes) {
+    applyIconPaint(target, color, { stroke: spec.stroke, strokeWidth: spec.strokeWidth || 1.5 });
+  }
+  normalizeIconNode(target);
+  return target;
+}
+
+/**
+ * Create an icon from an SVG string
+ */
+export function createIconFromSvg(svg: string, color: RGB): any {
+  try {
+    const usesCurrentColor = /currentcolor/i.test(svg);
+    const processedSvg = preprocessSvgForFigma(svg, color);
+    const node = figma.createNodeFromSvg(processedSvg);
+    node.name = 'icon/svg';
+    normalizeIconNode(node);
+
+    const vectors: SceneNode[] = [];
+    if (node.type === 'VECTOR') {
+      vectors.push(node);
+    } else if ('findAll' in node) {
+      const found = (node as FrameNode).findAll(function(child) { return child.type === 'VECTOR'; });
+      for (let i = 0; i < found.length; i++) vectors.push(found[i]);
+    }
+    if (vectors.length === 0) {
+      node.remove();
+      return null;
+    }
+
+    // Keep the imported SVG frame so resize operations honor the source
+    // viewBox instead of scaling from tight vector bounds.
+    const target = node;
+
+    let finalUsage = getVectorPaintUsage(target);
+    if (usesCurrentColor && (finalUsage.hasFills || finalUsage.hasStrokes)) {
+      recolorIconPaint(target, color);
+      finalUsage = getVectorPaintUsage(target);
+    }
+    if (!finalUsage.hasFills && !finalUsage.hasStrokes) {
+      const svgHasStroke = /stroke=/.test(processedSvg) && !/stroke=["']none["']/i.test(processedSvg);
+      const svgHasFill = /fill=/.test(processedSvg) && !/fill=["']none["']/i.test(processedSvg);
+      applyIconPaint(target, color, { stroke: svgHasStroke && !svgHasFill });
+      finalUsage = getVectorPaintUsage(target);
+      if (!finalUsage.hasFills && !finalUsage.hasStrokes) {
+        target.remove();
+        return null;
+      }
+    }
+
+    normalizeIconNode(target);
+    return target;
+  } catch (_err) {
+    return null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// NodeIR to SVG Conversion
+// ---------------------------------------------------------------------------
+
+function nodeIrToSvgChild(node: NodeIR): string | null {
+  if (node.kind !== 'element') return null;
+
+  const tag = node.tagLower || '';
+  const props = node.props || {};
+
+  if (!SVG_CHILD_TAGS[tag]) {
+    const inner = (node.children || [])
+      .map(function(child) { return nodeIrToSvgChild(child); })
+      .filter(Boolean)
+      .join('');
+    return inner || null;
+  }
+
+  const attrs: string[] = [];
+  for (const key in props) {
+    if (props[key] == null) continue;
+    if (key === 'className') continue;
+    const attrKey = key.replace(/[A-Z]/g, function(m) { return '-' + m.toLowerCase(); });
+    attrs.push(`${attrKey}="${escapeSvgAttr(props[key])}"`);
+  }
+
+  const inner = (node.children || [])
+    .map(function(child) { return nodeIrToSvgChild(child); })
+    .filter(Boolean)
+    .join('');
+  if (inner) {
+    return `<${tag}${attrs.length ? ' ' + attrs.join(' ') : ''}>${inner}</${tag}>`;
+  }
+  return `<${tag}${attrs.length ? ' ' + attrs.join(' ') : ''} />`;
+}
+
+export function nodeIrToSvg(node: NodeIR): string | null {
+  if (node.kind !== 'element' || node.tagLower !== 'svg') return null;
+
+  const attrs: string[] = [];
+  const props = node.props || {};
+
+  if (props.viewBox) attrs.push(`viewBox="${escapeSvgAttr(props.viewBox)}"`);
+  if (props.width) attrs.push(`width="${escapeSvgAttr(props.width)}"`);
+  if (props.height) attrs.push(`height="${escapeSvgAttr(props.height)}"`);
+  if (props.fill) attrs.push(`fill="${escapeSvgAttr(props.fill)}"`);
+  if (props.stroke) attrs.push(`stroke="${escapeSvgAttr(props.stroke)}"`);
+  if (props['stroke-width']) attrs.push(`stroke-width="${escapeSvgAttr(props['stroke-width'])}"`);
+  if (props.strokeWidth) attrs.push(`stroke-width="${escapeSvgAttr(props.strokeWidth)}"`);
+  if (props['stroke-linecap']) attrs.push(`stroke-linecap="${escapeSvgAttr(props['stroke-linecap'])}"`);
+  if (props.strokeLinecap) attrs.push(`stroke-linecap="${escapeSvgAttr(props.strokeLinecap)}"`);
+  if (props['stroke-linejoin']) attrs.push(`stroke-linejoin="${escapeSvgAttr(props['stroke-linejoin'])}"`);
+  if (props.strokeLinejoin) attrs.push(`stroke-linejoin="${escapeSvgAttr(props.strokeLinejoin)}"`);
+
+  attrs.unshift(`xmlns="http://www.w3.org/2000/svg"`);
+
+  const children = (node.children || [])
+    .map(function(child) { return nodeIrToSvgChild(child); })
+    .filter(Boolean)
+    .join('');
+
+  const hasViewBox = !!props.viewBox;
+  const safeAttrs = hasViewBox ? attrs : attrs.concat(['viewBox="0 0 24 24"']);
+
+  return `<svg ${safeAttrs.join(' ')}>${children}</svg>`;
+}
+
+// ---------------------------------------------------------------------------
+// Size Resolution
+// ---------------------------------------------------------------------------
+
+function resolveSpacingToken(token: string): number | null {
+  const spacingScale = COMPONENT_DEFS && COMPONENT_DEFS.spacingScale ? COMPONENT_DEFS.spacingScale : {};
+  if (spacingScale && spacingScale[token] != null) return spacingScale[token];
+  const numeric = parseFloat(token);
+  if (!Number.isNaN(numeric)) return numeric * 4;
+  return null;
+}
+
+function getBaseClass(cls: string): string | null {
+  if (!cls) return null;
+  const parts = cls.split(':');
+  return parts[parts.length - 1] || null;
+}
+
+export function resolveIconSizeFromClasses(classes: string[], props: Record<string, string>): { width: number; height: number } {
+  let width: number | null = null;
+  let height: number | null = null;
+
+  const parsePx = (value: string): number | null => {
+    const n = parseFloat(value);
+    if (Number.isNaN(n)) return null;
+    return n;
+  };
+
+  if (props.size) {
+    const sizeValue = parsePx(props.size);
+    if (sizeValue != null) {
+      width = sizeValue;
+      height = sizeValue;
+    }
+  }
+
+  if (props.width) {
+    const w = parsePx(props.width);
+    if (w != null) width = w;
+  }
+  if (props.height) {
+    const h = parsePx(props.height);
+    if (h != null) height = h;
+  }
+
+  for (const cls of classes) {
+    const base = getBaseClass(cls);
+    if (!base) continue;
+    const sizeBracket = base.match(/^size-\[(\d+(?:\.\d+)?)px\]$/);
+    if (sizeBracket) {
+      const size = parseFloat(sizeBracket[1]);
+      width = size;
+      height = size;
+      break;
+    }
+    const sizeToken = base.match(/^size-(\d+(?:\.\d+)?)$/);
+    if (sizeToken) {
+      const size = resolveSpacingToken(sizeToken[1]);
+      if (size != null) {
+        width = size;
+        height = size;
+        break;
+      }
+    }
+  }
+
+  for (const cls of classes) {
+    const base = getBaseClass(cls);
+    if (!base) continue;
+    const wBracket = base.match(/^w-\[(\d+(?:\.\d+)?)px\]$/);
+    if (wBracket) {
+      width = parseFloat(wBracket[1]);
+      continue;
+    }
+    const hBracket = base.match(/^h-\[(\d+(?:\.\d+)?)px\]$/);
+    if (hBracket) {
+      height = parseFloat(hBracket[1]);
+      continue;
+    }
+    const wToken = base.match(/^w-(\d+(?:\.\d+)?)$/);
+    if (wToken) {
+      const w = resolveSpacingToken(wToken[1]);
+      if (w != null) width = w;
+    }
+    const hToken = base.match(/^h-(\d+(?:\.\d+)?)$/);
+    if (hToken) {
+      const h = resolveSpacingToken(hToken[1]);
+      if (h != null) height = h;
+    }
+  }
+
+  if (width == null && height == null) {
+    width = 24;
+    height = 24;
+  } else if (width == null && height != null) {
+    width = height;
+  } else if (height == null && width != null) {
+    height = width;
+  }
+
+  return { width: width as number, height: height as number };
+}
+
+// Re-export for convenience
+export { getVectorPaintUsage };

package/src/image-cache.ts

@@ -0,0 +1,22 @@
+/**
+ * Module-level image cache: src path → figma imageHash (raster) or SVG string.
+ * Populated by prefetchImages() before rendering starts.
+ */
+let _imageMap: Map<string, string> = new Map();
+let _svgMap: Map<string, string> = new Map();
+
+export function setImageMap(map: Map<string, string>): void {
+  _imageMap = map;
+}
+
+export function getImageHash(src: string): string | null {
+  return _imageMap.get(src) ?? null;
+}
+
+export function setSvgMap(map: Map<string, string>): void {
+  _svgMap = map;
+}
+
+export function getSvgString(src: string): string | null {
+  return _svgMap.get(src) ?? null;
+}