inkhouse 0.1.0-beta.0

package/src/width-solver.ts

@@ -0,0 +1,466 @@
+import { LayoutParser } from './layout-parser';
+import { type NodeIR, isElementLikeNode } from './node-ir';
+
+export type NodeLayoutComputed = {
+  layoutIR: ReturnType<typeof LayoutParser.parseToIR>;
+  maxWidth: number | null;
+  explicitWidth: number | null;
+  gridCols: number | null;
+  hasLayoutClass: boolean;
+  hasFlexChildClass: boolean;
+  hasExplicitSize: boolean;
+};
+
+const NODE_LAYOUT_CACHE = new WeakMap<object, NodeLayoutComputed>();
+
+const BLOCK_TAGS = new Set([
+  'div',
+  'nav',
+  'section',
+  'header',
+  'footer',
+  'main',
+  'article',
+  'aside',
+  'ul',
+  'ol',
+  'li',
+  'table',
+  'thead',
+  'tbody',
+  'tfoot',
+  'tr',
+]);
+
+const GRID_BREAKPOINTS: Record<string, number> = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+export function getBaseClass(value: string): string | null {
+  if (!value) return null;
+  if (value.indexOf(':') !== -1) return null;
+  return value;
+}
+
+export function extractFixedWidth(classes: string[] | undefined): number | null {
+  if (!classes) return null;
+  for (const cls of classes) {
+    const base = getBaseClass(cls);
+    if (!base) continue;
+    const wBracket = base.match(/^w-\[(\d+(?:\.\d+)?)px\]$/);
+    if (wBracket) return parseFloat(wBracket[1]);
+    const wMatch = base.match(/^w-(\d+(?:\.\d+)?)$/);
+    if (wMatch) return parseFloat(wMatch[1]) * 4;
+  }
+  return null;
+}
+
+export function extractMaxWidth(classes: string[] | undefined): number | null {
+  if (!classes) return null;
+  const map: Record<string, number> = {
+    'max-w-xs': 320,
+    'max-w-sm': 384,
+    'max-w-md': 448,
+    'max-w-lg': 512,
+    'max-w-xl': 576,
+    'max-w-2xl': 672,
+    'max-w-3xl': 768,
+    'max-w-4xl': 896,
+    'max-w-5xl': 1024,
+    'max-w-6xl': 1152,
+    'max-w-7xl': 1280,
+  };
+  for (const cls of classes) {
+    const base = getBaseClass(cls);
+    if (!base) continue;
+    if (map[base]) return map[base];
+    const bracket = base.match(/^max-w-\[(\d+(?:\.\d+)?)px\]$/);
+    if (bracket) return parseFloat(bracket[1]);
+  }
+  return null;
+}
+
+export function extractGridColumns(classes: string[] | undefined, availableWidth?: number): number | null {
+  if (!classes) return null;
+  const responsivePrefixes = new Set(Object.keys(GRID_BREAKPOINTS));
+  let baseCols: number | null = null;
+  let best: { bp: number; cols: number } | null = null;
+  let hasBaseGrid = false;
+  for (const cls of classes) {
+    const parts = cls.split(':');
+    const tail = parts[parts.length - 1];
+    const prefixes = parts.slice(0, -1);
+    if ((tail === 'grid' || tail === 'inline-grid') && prefixes.length === 0) {
+      hasBaseGrid = true;
+    }
+    const match = tail.match(/^grid-cols-(\d+)$/);
+    if (!match) continue;
+    const cols = parseInt(match[1], 10);
+    if (!Number.isFinite(cols) || cols <= 0) continue;
+
+    if (prefixes.length === 0) {
+      baseCols = cols;
+      continue;
+    }
+
+    for (const prefix of prefixes) {
+      if (!responsivePrefixes.has(prefix)) continue;
+      const bp = GRID_BREAKPOINTS[prefix];
+      if (!bp) continue;
+      if (!best || bp > best.bp) {
+        best = { bp: bp, cols: cols };
+      }
+    }
+  }
+
+  if (!hasBaseGrid && baseCols == null && !best) return null;
+
+  if (availableWidth != null && Number.isFinite(availableWidth)) {
+    if (best && availableWidth >= best.bp) return best.cols;
+    if (baseCols != null) return baseCols;
+    // Tailwind defaults to one implicit column for grid containers until a responsive override applies.
+    if (hasBaseGrid) return 1;
+    return best ? best.cols : null;
+  }
+
+  if (baseCols != null) return baseCols;
+  if (best) return best.cols;
+  if (hasBaseGrid) return 1;
+  return null;
+}
+
+export function extractGridBreakpointWidth(classes: string[] | undefined): number | null {
+  if (!classes) return null;
+  let best = 0;
+  for (const cls of classes) {
+    const parts = cls.split(':');
+    if (parts.length < 2) continue;
+    const prefix = parts[0];
+    const tail = parts[parts.length - 1];
+    if (!tail.startsWith('grid-cols-')) continue;
+    const bp = GRID_BREAKPOINTS[prefix];
+    if (bp && bp > best) best = bp;
+  }
+  return best || null;
+}
+
+export function shouldStretchToParentWidth(tag: string, classes: string[]): boolean {
+  if (!BLOCK_TAGS.has(tag)) return false;
+  for (const cls of classes) {
+    const base = getBaseClass(cls);
+    if (!base) continue;
+    if (base === 'inline' || base === 'inline-block' || base === 'inline-flex' || base === 'inline-grid') {
+      return false;
+    }
+    if (base.startsWith('w-') || base.startsWith('max-w-') || base.startsWith('min-w-')) {
+      return false;
+    }
+    if (base.startsWith('self-')) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function shouldSkipFullWidthForClasses(classes: string[] | undefined): boolean {
+  if (!classes || classes.length === 0) return false;
+  if (classes.includes('grid') || classes.includes('inline-grid')) return true;
+  return extractGridColumns(classes) != null;
+}
+
+export function resolveExplicitWidthFromClasses(classes: string[]): number | null {
+  if (!classes) return null;
+  let width = extractFixedWidth(classes);
+  if (width != null && classes.includes('w-full')) {
+    width = null;
+  }
+  return width;
+}
+
+export function getNodeLayoutComputed(node: NodeIR): NodeLayoutComputed {
+  const cached = NODE_LAYOUT_CACHE.get(node as any);
+  if (cached) return cached;
+
+  const classes = isElementLikeNode(node) ? node.classes : [];
+  const semanticLayoutClasses = getSemanticLayoutClasses(node);
+  const layoutClasses = semanticLayoutClasses.length > 0
+    ? [...semanticLayoutClasses, ...classes]
+    : classes;
+  const layoutIR = LayoutParser.parseToIR(layoutClasses);
+  const maxWidth = extractMaxWidth(classes);
+  const explicitWidth = resolveExplicitWidthFromClasses(classes);
+  const gridCols = extractGridColumns(classes);
+  const hasLayoutClass = layoutClasses.some(c =>
+    c === 'flex' || c === 'inline-flex' || c === 'grid' || c === 'inline-grid' ||
+    c.startsWith('flex-') || c.startsWith('items-') || c.startsWith('justify-') ||
+    c.startsWith('gap-') || c.startsWith('space-')
+  );
+  const hasFlexChildClass = classes.some(c =>
+    c === 'flex-1' || c === 'flex-grow' || c === 'grow' ||
+    c === 'flex-grow-0' || c === 'grow-0' ||
+    c === 'flex-shrink' || c === 'shrink' ||
+    c === 'flex-shrink-0' || c === 'shrink-0' ||
+    c.startsWith('self-')
+  );
+  const hasExplicitSize = classes.some(c =>
+    /^w-\d+$/.test(c) || /^w-\[/.test(c) || /^h-\d+$/.test(c) || /^h-\[/.test(c) ||
+    c === 'w-full' || c === 'h-full' || /^w-\d+\/\d+$/.test(c)
+  );
+
+  const computed: NodeLayoutComputed = {
+    layoutIR: layoutIR,
+    maxWidth: maxWidth,
+    explicitWidth: explicitWidth,
+    gridCols: gridCols,
+    hasLayoutClass: hasLayoutClass,
+    hasFlexChildClass: hasFlexChildClass,
+    hasExplicitSize: hasExplicitSize,
+  };
+  NODE_LAYOUT_CACHE.set(node as any, computed);
+  return computed;
+}
+
+function getSemanticLayoutClasses(node: NodeIR): string[] {
+  if (node.kind !== 'element' && node.kind !== 'component') return [];
+  switch (node.tagLower) {
+    case 'table':
+    case 'thead':
+    case 'tbody':
+    case 'tfoot':
+      return ['flex', 'flex-col'];
+    case 'tr':
+      return ['flex', 'flex-row'];
+    default:
+      return [];
+  }
+}
+
+export function solveLayoutWidths(node: NodeIR, availableWidth?: number): NodeIR {
+  if (node.kind === 'text' || node.kind === 'divider') {
+    return node;
+  }
+
+  if (node.kind === 'fragment') {
+    const nextChildren: NodeIR[] = [];
+    for (const child of node.children) {
+      nextChildren.push(solveLayoutWidths(child, availableWidth));
+    }
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  if (node.kind === 'ring') {
+    let childWidth: number | undefined = availableWidth;
+    if (childWidth != null) {
+      childWidth = Math.max(0, childWidth - (node.ringWidth + node.offsetWidth) * 2);
+    }
+    return Object.assign({}, node, { child: solveLayoutWidths(node.child, childWidth) });
+  }
+
+  let classes = node.classes;
+  const layoutComputed = getNodeLayoutComputed(node);
+  const maxWidthConstraint = layoutComputed.maxWidth;
+  let widthOverride: number | null = layoutComputed.explicitWidth;
+  let widthDerivedFromMaxConstraint = false;
+  if (widthOverride == null && maxWidthConstraint != null) {
+    if (availableWidth != null) {
+      widthOverride = Math.min(maxWidthConstraint, availableWidth);
+      widthDerivedFromMaxConstraint = true;
+    } else {
+      widthOverride = maxWidthConstraint;
+    }
+  }
+  if (widthOverride == null && availableWidth != null && classes.includes('w-full')) {
+    widthOverride = availableWidth;
+  }
+  if (widthOverride == null && availableWidth != null && node.kind === 'element') {
+    if (shouldStretchToParentWidth(node.tagLower, classes)) {
+      widthOverride = availableWidth;
+    }
+  }
+  // Component wrappers (Card, CardHeader, etc.) are not in BLOCK_TAGS but should
+  // still inherit the parent's available width when they have no explicit width of their own.
+  if (widthOverride == null && availableWidth != null && node.kind === 'component') {
+    if (!hasNonFullWidthClass(classes)) {
+      widthOverride = availableWidth;
+    }
+  }
+
+  const wantsFixedWidth = shouldForceFixedWidth(node, availableWidth);
+  if (wantsFixedWidth && availableWidth != null && !hasNonFullWidthClass(classes)) {
+    classes = applyFixedWidthClass(classes, availableWidth);
+    widthOverride = availableWidth;
+  }
+  if (widthDerivedFromMaxConstraint && widthOverride != null) {
+    classes = applyFixedWidthClass(classes, widthOverride);
+  }
+
+  let layoutIR = layoutComputed.layoutIR;
+  if (classes !== node.classes) {
+    layoutIR = LayoutParser.parseToIR(classes);
+  }
+  const paddingX = layoutIR.paddingLeft + layoutIR.paddingRight;
+  const containerWidth = widthOverride != null ? widthOverride : undefined;
+  const contentWidth = containerWidth != null ? Math.max(0, containerWidth - paddingX) : undefined;
+
+  const gridCols = extractGridColumns(classes, containerWidth ?? availableWidth);
+  let gridChildWidth: number | null = null;
+  if (gridCols && containerWidth != null) {
+    const gap = layoutIR.gapX != null ? layoutIR.gapX : layoutIR.gap;
+    const available = containerWidth - paddingX - gap * (gridCols - 1);
+    if (available > 0) {
+      gridChildWidth = Math.max(0, available / gridCols);
+    }
+  }
+
+  const childWidth = contentWidth != null ? contentWidth : undefined;
+  let flexChildWidth: number | null = null;
+  let remainingChildWidth: number | null = null;
+  if (layoutIR.layoutMode === 'HORIZONTAL' && contentWidth != null && node.children && node.children.length > 0) {
+    const gap = layoutIR.gapX != null ? layoutIR.gapX : layoutIR.gap;
+    const totalGap = gap * Math.max(0, node.children.length - 1);
+    let fixedTotal = 0;
+    let growCount = 0;
+    let variableCount = 0;
+    for (const child of node.children) {
+      if (!isElementLikeNode(child)) continue;
+      const explicitChildWidth = resolveExplicitWidthFromChild(child);
+      if (explicitChildWidth != null) {
+        fixedTotal += explicitChildWidth;
+        continue;
+      }
+      if (hasGrowClass(child.classes)) {
+        growCount += 1;
+      } else {
+        variableCount += 1;
+      }
+    }
+    const remaining = contentWidth - fixedTotal - totalGap;
+    if (growCount > 0 && Number.isFinite(remaining) && remaining > 0) {
+      flexChildWidth = Math.max(0, remaining / growCount);
+    } else if (growCount === 0 && fixedTotal > 0 && variableCount > 0 && Number.isFinite(remaining) && remaining > 0) {
+      // When there are fixed-width siblings but no grow children, split the remaining
+      // space equally among variable-width children (e.g. icon + text wrapper in flex row).
+      remainingChildWidth = Math.max(0, remaining / variableCount);
+    }
+  }
+
+  const nextChildren: NodeIR[] = [];
+  for (const child of node.children) {
+    let nextChild = child;
+    let nextWidth = childWidth;
+    if (gridChildWidth != null) {
+      nextChild = enforceFixedWidthOnGridChild(child, gridChildWidth);
+      nextWidth = gridChildWidth;
+    } else if (layoutIR.layoutMode === 'HORIZONTAL' && contentWidth != null) {
+      const explicitChildWidth = resolveExplicitWidthFromChild(child);
+      if (explicitChildWidth != null) {
+        nextWidth = explicitChildWidth;
+      } else if (flexChildWidth != null && isElementLikeNode(child) && hasGrowClass(child.classes)) {
+        nextChild = enforceFixedWidthOnFlexChild(child, flexChildWidth);
+        nextWidth = flexChildWidth;
+      } else if (remainingChildWidth != null && isElementLikeNode(child)) {
+        nextChild = enforceFixedWidthOnGridChild(child, remainingChildWidth);
+        nextWidth = remainingChildWidth;
+      } else {
+        nextWidth = undefined;
+      }
+    }
+    nextChildren.push(solveLayoutWidths(nextChild, nextWidth));
+  }
+
+  return Object.assign({}, node, {
+    classes: classes,
+    children: nextChildren,
+  });
+}
+
+function shouldForceFixedWidth(node: NodeIR, availableWidth?: number): boolean {
+  if (availableWidth == null) return false;
+  if (node.kind !== 'element' && node.kind !== 'component') return false;
+  if (!node.children || node.children.length === 0) return false;
+
+  const classes = node.classes;
+  if (classes.includes('justify-between')) return true;
+  if (extractGridColumns(classes, availableWidth)) return true;
+  if (classes.includes('grid') || classes.includes('inline-grid')) return true;
+
+  for (const child of node.children) {
+    if (!isElementLikeNode(child)) continue;
+    if (hasGrowClass(child.classes)) return true;
+  }
+
+  return false;
+}
+
+function hasGrowClass(classes: string[]): boolean {
+  for (const cls of classes) {
+    const base = getBaseClass(cls);
+    if (!base) continue;
+    if (base === 'flex-1' || base === 'grow' || base === 'flex-grow' || base === 'grow-1') {
+      return true;
+    }
+  }
+  return false;
+}
+
+function hasNonFullWidthClass(classes: string[]): boolean {
+  for (const cls of classes) {
+    const base = getBaseClass(cls);
+    if (!base) continue;
+    if (base === 'w-full' || base === 'w-auto') continue;
+    if (base.startsWith('w-')) return true;
+    if (base.startsWith('max-w-') || base.startsWith('min-w-')) return true;
+    if (base.startsWith('size-') || base.startsWith('basis-')) return true;
+  }
+  return false;
+}
+
+function resolveExplicitWidthFromChild(child: NodeIR): number | null {
+  if (!isElementLikeNode(child)) return null;
+  return getNodeLayoutComputed(child).explicitWidth;
+}
+
+function enforceFixedWidthOnGridChild(child: NodeIR, width: number): NodeIR {
+  if (width <= 0) return child;
+  if (child.kind === 'ring') {
+    const inner = child.child;
+    if (isElementLikeNode(inner)) {
+      const explicit = resolveExplicitWidthFromClasses(inner.classes);
+      if (explicit == null) {
+        const nextInner = Object.assign({}, inner, {
+          classes: applyFixedWidthClass(inner.classes, width - (child.ringWidth + child.offsetWidth) * 2),
+        });
+        return Object.assign({}, child, { child: nextInner });
+      }
+    }
+    return child;
+  }
+  if (!isElementLikeNode(child)) return child;
+  const explicit = resolveExplicitWidthFromClasses(child.classes);
+  if (explicit != null) return child;
+  return Object.assign({}, child, {
+    classes: applyFixedWidthClass(child.classes, width),
+  });
+}
+
+function enforceFixedWidthOnFlexChild(child: NodeIR, width: number): NodeIR {
+  if (width <= 0) return child;
+  return enforceFixedWidthOnGridChild(child, width);
+}
+
+function applyFixedWidthClass(classes: string[], width: number): string[] {
+  if (!Number.isFinite(width) || width <= 0) return classes;
+  const rounded = Math.round(width);
+  if (!Number.isFinite(rounded) || rounded <= 0) return classes;
+  const out: string[] = [];
+  for (const cls of classes) {
+    if (cls === 'w-full') continue;
+    out.push(cls);
+  }
+  out.push('w-[' + rounded + 'px]');
+  return out;
+}

package/templates/patch-tokens-route.ts

@@ -0,0 +1,165 @@
+/**
+ * Figma Token Patch API Route
+ *
+ * Generated by `inkhouse setup`. Do not move this file.
+ * The Figma plugin calls POST /api/figma/patch-tokens during Push to Code
+ * to apply token updates via a PostCSS AST patcher.
+ *
+ * To re-generate: pnpm exec inkhouse setup
+ */
+
+import { NextResponse } from 'next/server';
+import postcss, { type AtRule, type Rule, type Declaration, type Container } from 'postcss';
+
+const CORS = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+};
+
+type ThemeUpdateMap = Record<string, Record<string, string>>;
+
+function parseThemeSelectors(selector: string): string[] {
+  const themes = new Set<string>();
+  const normalized = String(selector || '').trim().toLowerCase();
+  if (!normalized) return [];
+
+  const matches = normalized.matchAll(/\[data-theme\s*=\s*["']?([^"'\\\]]+)["']?\]/g);
+  for (const match of matches) {
+    const themeName = String(match[1] || '').trim();
+    if (themeName) themes.add(themeName);
+  }
+
+  if (/(\.|:)(dark)\b/.test(normalized)) themes.add('dark');
+  if (normalized.includes(':root') && themes.size === 0) themes.add('primary');
+  return Array.from(themes);
+}
+
+function cloneUpdates(updatesByTheme: ThemeUpdateMap): Map<string, Map<string, string>> {
+  const out = new Map<string, Map<string, string>>();
+  for (const [themeName, updates] of Object.entries(updatesByTheme || {})) {
+    const normalizedTheme = String(themeName || '').trim().toLowerCase();
+    if (!normalizedTheme) continue;
+    if (!updates || typeof updates !== 'object') continue;
+    const map = out.get(normalizedTheme) || new Map<string, string>();
+    for (const [prop, value] of Object.entries(updates)) {
+      if (!prop || !prop.startsWith('--')) continue;
+      map.set(prop, String(value));
+    }
+    if (map.size > 0) out.set(normalizedTheme, map);
+  }
+  return out;
+}
+
+function resolveThemesForNode(node: Rule | AtRule): string[] {
+  if (node.type === 'atrule') {
+    return String((node as AtRule).name || '').toLowerCase() === 'theme' ? ['primary'] : [];
+  }
+  const selectors = Array.isArray((node as Rule).selectors)
+    ? (node as Rule).selectors
+    : String((node as Rule).selector || '').split(',');
+  const themes = new Set<string>();
+  for (const selector of selectors) {
+    for (const themeName of parseThemeSelectors(selector)) {
+      themes.add(themeName);
+    }
+  }
+  return Array.from(themes);
+}
+
+function walkTokenContainers(root: postcss.Root): Array<Rule | AtRule> {
+  const containers: Array<Rule | AtRule> = [];
+  root.walk((node) => {
+    if (node.type !== 'rule' && node.type !== 'atrule') return;
+    const typed = node as Rule | AtRule;
+    const themes = resolveThemesForNode(typed);
+    if (themes.length > 0) containers.push(typed);
+  });
+  return containers;
+}
+
+function appendDecl(container: Rule | AtRule, prop: string, value: string): void {
+  const decl = postcss.decl({ prop, value });
+  if (!container.nodes || container.nodes.length === 0) {
+    decl.raws.before = '\n  ';
+  } else {
+    const sample = container.nodes.find((n) => n.type === 'decl') as Declaration | undefined;
+    decl.raws.before = sample?.raws?.before || '\n  ';
+  }
+  (container as unknown as Container).append(decl);
+}
+
+function patchCssVariables(cssText: string, updatesByTheme: ThemeUpdateMap): string {
+  const root = postcss.parse(cssText);
+  const pending = cloneUpdates(updatesByTheme);
+  const containers = walkTokenContainers(root);
+
+  for (const container of containers) {
+    const themes = resolveThemesForNode(container);
+    if (themes.length === 0) continue;
+
+    for (const themeName of themes) {
+      const updates = pending.get(String(themeName || '').toLowerCase());
+      if (!updates || updates.size === 0) continue;
+
+      for (const node of container.nodes || []) {
+        if (node.type !== 'decl') continue;
+        const decl = node as Declaration;
+        if (!decl.prop || !updates.has(decl.prop)) continue;
+        decl.value = String(updates.get(decl.prop) || '');
+        updates.delete(decl.prop);
+      }
+    }
+  }
+
+  for (const [themeName, updates] of pending.entries()) {
+    if (updates.size === 0) continue;
+
+    let target: Rule | AtRule | null = null;
+    for (const container of containers) {
+      const themes = resolveThemesForNode(container);
+      if (themes.includes(themeName)) {
+        target = container;
+        break;
+      }
+    }
+
+    // Do not create missing theme blocks from sparse updates here.
+    // The plugin runtime performs the authoritative second pass that
+    // handles stale-theme pruning and full-theme block insertion.
+    if (!target) continue;
+
+    for (const [prop, value] of updates.entries()) {
+      appendDecl(target, prop, value);
+    }
+  }
+
+  return root.toString();
+}
+
+export async function POST(request: Request) {
+  try {
+    const payload = await request.json();
+    const cssText = typeof payload?.cssText === 'string' ? payload.cssText : '';
+    const updatesByTheme = (payload?.updatesByTheme || {}) as ThemeUpdateMap;
+
+    if (!cssText) {
+      return NextResponse.json(
+        { error: 'Invalid payload: cssText is required.' },
+        { status: 400, headers: CORS }
+      );
+    }
+
+    const patchedCss = patchCssVariables(cssText, updatesByTheme);
+    return NextResponse.json({ patchedCss }, { headers: CORS });
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to patch CSS tokens', message: error instanceof Error ? error.message : String(error) },
+      { status: 500, headers: CORS }
+    );
+  }
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, { headers: CORS });
+}

package/templates/scan-components-route.ts

@@ -0,0 +1,57 @@
+/**
+ * Figma Component Scanner API Route
+ *
+ * Generated by `inkhouse setup`. Do not move this file.
+ * The Figma plugin calls GET /api/figma/scan-components when the user
+ * clicks "Generate Design System Page".
+ *
+ * To re-generate: pnpm exec inkhouse setup
+ */
+
+import { NextResponse } from 'next/server';
+import * as path from 'path';
+import * as fs from 'fs';
+import { spawnSync } from 'child_process';
+
+const CWD = process.cwd();
+const TSX = path.resolve(CWD, 'node_modules/.bin/tsx');
+const CLI = path.resolve(CWD, 'node_modules/inkhouse/scanner/cli.ts');
+const OUTPUT = path.resolve(CWD, '.inkhouse/component-definitions.json');
+
+const CORS = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+};
+
+export async function GET(request: Request) {
+  try {
+    const url = new URL(request.url);
+    const tokenSourceMode = url.searchParams.get('tokenSourceMode') || 'auto';
+    const cssTokenPath = url.searchParams.get('cssTokenPath') || undefined;
+    const dtcgTokenPath = url.searchParams.get('dtcgTokenPath') || undefined;
+
+    fs.mkdirSync(path.dirname(OUTPUT), { recursive: true });
+
+    const args = [CLI, '--output', OUTPUT, '--include-tokens', '--token-mode', tokenSourceMode];
+    if (cssTokenPath) args.push('--css-token-path', cssTokenPath);
+    if (dtcgTokenPath) args.push('--dtcg-token-path', dtcgTokenPath);
+
+    const result = spawnSync(TSX, args, { cwd: CWD, encoding: 'utf-8' });
+    if (result.status !== 0) {
+      throw new Error(result.stderr || 'Scanner exited with non-zero status');
+    }
+
+    const output = JSON.parse(fs.readFileSync(OUTPUT, 'utf-8'));
+    return NextResponse.json(output, { headers: CORS });
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to scan components', message: error instanceof Error ? error.message : String(error) },
+      { status: 500, headers: CORS }
+    );
+  }
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, { headers: CORS });
+}