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

package/src/{render-context.ts → design-system/render-context.ts}

@@ -1,9 +1,19 @@
-import type { RGB } from './colors';
-import { splitClassName } from './node-ir';
-import { getBaseClass } from './width-solver';
+import type { RGB } from '../tokens';
+import { splitClassName, getBaseClass } from '../tailwind';
 
 export type RenderContext = {
   maxWidth?: number;
+  /**
+   * Story-level viewport width used for responsive breakpoint resolution.
+   * Stays constant through the entire tree (unlike `maxWidth`, which is the
+   * current container's content width and shrinks as we descend). CSS
+   * `@media (min-width: …)` queries match against the viewport, not the
+   * element's container — using `maxWidth` for breakpoints causes nested
+   * elements (e.g. icons inside an `aspect-5/3` container at 720px in a
+   * 1280px story) to resolve at a smaller breakpoint than the viewport
+   * actually is, so `lg:size-16` etc. silently fail to apply.
+   */
+  viewportWidth?: number;
   textAlign?: 'LEFT' | 'CENTER' | 'RIGHT';
   textFontSize?: number;
   textBold?: boolean;
@@ -13,11 +23,27 @@ export type RenderContext = {
   parentLayout?: 'HORIZONTAL' | 'VERTICAL';
   textColor?: string | RGB | null;
   textColorToken?: string;
-  parentCompoundDef?: any;
+  parentCompoundDef?: unknown;
   accordionOpenValue?: string | null;
   accordionItemIndex?: number;
   accordionItemValue?: string | null;
   accordionItemIsOpen?: boolean;
+  tabsSelectedValue?: string | null;
+  selectSelectedValue?: string | null;
+  selectSelectedLabel?: string | null;
+  selectItemValue?: string | null;
+  selectItemSelected?: boolean;
+  /** True when the enclosing <Select> has open=true or defaultOpen=true. */
+  selectIsOpen?: boolean;
+  /**
+   * Value of the first SelectItem when the Select is open without a selected
+   * value. Radix highlights the first item by default in that case, so we
+   * render the same highlight in Figma previews.
+   */
+  selectHighlightedValue?: string | null;
+  radioGroupSelectedValue?: string | null;
+  radioItemValue?: string | null;
+  radioItemChecked?: boolean;
   /** Pre-fetched images: src path → figma imageHash */
   imageMap?: Map<string, string>;
   /** Text truncation: true when `truncate` or `line-clamp-N` is active */
@@ -108,9 +134,9 @@ export function hasWidthHintInClasses(classes: string[]): boolean {
   return false;
 }
 
-export function propsContainWidthHint(props: Record<string, any> | undefined): boolean {
+export function propsContainWidthHint(props: Record<string, unknown> | undefined): boolean {
   if (!props) return false;
-  if (props.className && hasWidthHintInClasses(splitClassName(props.className))) return true;
+  if (typeof props.className === 'string' && hasWidthHintInClasses(splitClassName(props.className))) return true;
   for (const key in props) {
     const value = props[key];
     if (typeof value === 'string') {

package/src/design-system/render-prop-parser.ts

@@ -0,0 +1,50 @@
+import type { ComponentInstance } from '../components';
+
+/**
+ * Parses a Storybook `render={...}` prop expressed as a string-literal JSX
+ * snippet (e.g. `'<Button variant="primary">Click</Button>'`) into a synthetic
+ * ComponentInstance that the renderer can treat like a real scanner-emitted
+ * instance.
+ *
+ * Used when a story declares its render via a stringified JSX literal instead
+ * of a real React render function — the scanner can't expand the literal into
+ * a JsxTree, so this parser reconstructs the minimum shape (tagName, props,
+ * children-as-text) required for the plugin's instance rendering path.
+ *
+ * Constraints / non-goals:
+ * - Single root element only. Multi-root fragments / arrays return null.
+ * - Attributes must be double-quoted strings. Boolean shorthand (`disabled`)
+ *   is ignored. JSX expressions (`prop={value}`) are ignored.
+ * - Self-closing tags (`<Foo />`) are NOT supported — the closing tag pattern
+ *   is required so the parser stays strict.
+ * - Returns null for any input it can't handle, never throws.
+ */
+export function parseRenderPropToSyntheticInstance(renderProp: unknown): ComponentInstance | null {
+  if (typeof renderProp !== 'string') return null;
+  const input = renderProp.trim();
+  if (!input) return null;
+
+  const match = input.match(/^<([A-Za-z0-9_.-]+)([^>]*)>([\s\S]*?)<\/\1>$/);
+  if (!match) return null;
+
+  const tagName = String(match[1] || '').trim();
+  if (!tagName) return null;
+  const rawAttrs = String(match[2] || '');
+  const rawChildren = String(match[3] || '').trim();
+  const props: Record<string, string> = {};
+
+  const attrRegex = /([A-Za-z0-9_:-]+)="([^"]*)"/g;
+  let attrMatch: RegExpExecArray | null = null;
+  while ((attrMatch = attrRegex.exec(rawAttrs)) !== null) {
+    const key = String(attrMatch[1] || '').trim();
+    if (!key) continue;
+    props[key] = attrMatch[2];
+  }
+
+  // Preserve component naming as scanned (e.g. Button) and keep text as children.
+  return {
+    componentName: tagName,
+    props: props,
+    children: rawChildren || undefined,
+  };
+}

package/src/design-system/responsive-resolver.ts

@@ -0,0 +1,180 @@
+import { parseUtilityClass, type NodeIR } from '../tailwind';
+
+/**
+ * Tailwind responsive-variant resolution. Given a NodeIR (or a flat class
+ * list) and a target width, strip variants that don't apply at that width
+ * and promote the matching ones to active utilities.
+ *
+ * Also exposes `promoteFocusVariants` — the renderer uses it to surface
+ * focus styles for nodes that are known to be focused (e.g. an open
+ * Select trigger).
+ *
+ * Pure: NodeIR-only walk, no Figma calls.
+ */
+
+const RESPONSIVE_BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'] as const;
+const RESPONSIVE_BREAKPOINT_MIN_WIDTH: Record<typeof RESPONSIVE_BREAKPOINT_ORDER[number], number> = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+export function resolveBreakpointIndexForWidth(width?: number): number {
+  if (!Number.isFinite(width) || (width as number) <= 0) return -1;
+  let idx = -1;
+  for (let i = 0; i < RESPONSIVE_BREAKPOINT_ORDER.length; i++) {
+    const bp = RESPONSIVE_BREAKPOINT_ORDER[i];
+    if ((width as number) >= RESPONSIVE_BREAKPOINT_MIN_WIDTH[bp]) {
+      idx = i;
+    }
+  }
+  return idx;
+}
+
+/**
+ * Promote `focus:` / `focus-visible:` variants to active base utilities by
+ * stripping the variant prefix. Used for elements that are known to be focused
+ * (e.g. an open Select's trigger) so focus-only visuals render in Figma.
+ */
+export function promoteFocusVariants(classes: string[]): string[] {
+  let out: string[] | null = null;
+  const seen: Record<string, true> = {};
+  for (let i = 0; i < classes.length; i++) seen[classes[i]] = true;
+
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const m = cls.match(/^(focus|focus-visible):(.+)$/);
+    if (!m) continue;
+    const base = m[2];
+    if (seen[base]) continue;
+    if (!out) out = classes.slice();
+    out.push(base);
+    seen[base] = true;
+  }
+  return out || classes;
+}
+
+function getResponsiveConflictGroup(utility: string): string | null {
+  if (
+    utility === 'flex-row' ||
+    utility === 'flex-row-reverse' ||
+    utility === 'flex-col' ||
+    utility === 'flex-col-reverse'
+  ) {
+    return 'layout-direction';
+  }
+
+  if (
+    utility === 'justify-start' ||
+    utility === 'justify-center' ||
+    utility === 'justify-end' ||
+    utility === 'justify-between' ||
+    utility === 'justify-around' ||
+    utility === 'justify-evenly'
+  ) {
+    return 'main-align';
+  }
+
+  if (
+    utility === 'items-start' ||
+    utility === 'items-center' ||
+    utility === 'items-end' ||
+    utility === 'items-stretch' ||
+    utility === 'items-baseline'
+  ) {
+    return 'cross-align';
+  }
+
+  if (
+    utility === 'text-left' ||
+    utility === 'text-center' ||
+    utility === 'text-right' ||
+    utility === 'text-justify'
+  ) {
+    return 'text-align';
+  }
+
+  return null;
+}
+
+export function resolveClassesForBreakpoint(classes: string[], breakpointIndex: number): string[] {
+  if (!classes || classes.length === 0) return classes || [];
+
+  const out: string[] = [];
+  const conflictIndex = new Map<string, number>();
+  for (let i = 0; i < classes.length; i++) {
+    const atom = parseUtilityClass(classes[i]);
+    if (!atom.utility) continue;
+
+    let requiredBreakpoint = -1;
+    const remainingVariants: string[] = [];
+    for (let j = 0; j < atom.variants.length; j++) {
+      const variant = atom.variants[j];
+      const responsiveIdx = RESPONSIVE_BREAKPOINT_ORDER.indexOf(variant as typeof RESPONSIVE_BREAKPOINT_ORDER[number]);
+      if (responsiveIdx !== -1) {
+        if (responsiveIdx > requiredBreakpoint) requiredBreakpoint = responsiveIdx;
+      } else {
+        remainingVariants.push(variant);
+      }
+    }
+
+    if (requiredBreakpoint !== -1 && breakpointIndex < requiredBreakpoint) {
+      continue;
+    }
+
+    const rebuilt = remainingVariants.length > 0
+      ? remainingVariants.join(':') + ':' + atom.utility
+      : atom.utility;
+    const finalClass = atom.important ? '!' + rebuilt : rebuilt;
+    const conflictGroup = getResponsiveConflictGroup(atom.utility);
+    if (conflictGroup) {
+      const variantScope = remainingVariants.join(':');
+      const conflictKey = `${variantScope}|${conflictGroup}`;
+      const existingIndex = conflictIndex.get(conflictKey);
+      if (existingIndex !== undefined) {
+        out[existingIndex] = finalClass;
+      } else {
+        conflictIndex.set(conflictKey, out.length);
+        out.push(finalClass);
+      }
+      continue;
+    }
+
+    out.push(finalClass);
+  }
+  return out;
+}
+
+export function resolveNodeResponsiveClasses(node: NodeIR, width?: number): NodeIR {
+  // When width is unknown, keep all responsive variants intact — we can't
+  // decide which ones apply. Below `sm` (width < 640) we still want to
+  // resolve: `resolveBreakpointIndexForWidth` returns -1 for both cases,
+  // but `resolveClassesForBreakpoint` with `-1` already does the right
+  // thing (strips every `{sm|md|lg|xl|2xl}:` variant, keeps base). Only
+  // early-return on actually-unknown widths so mobile previews don't
+  // inherit desktop-only utilities like `sm:flex-row` on `flex-col-reverse`.
+  if (!Number.isFinite(width) || (width as number) <= 0) return node;
+  const breakpointIndex = resolveBreakpointIndexForWidth(width);
+
+  if (node.kind === 'text' || node.kind === 'divider') return node;
+
+  if (node.kind === 'fragment') {
+    return Object.assign({}, node, {
+      children: node.children.map(child => resolveNodeResponsiveClasses(child, width)),
+    });
+  }
+
+  if (node.kind === 'ring') {
+    return Object.assign({}, node, {
+      classes: resolveClassesForBreakpoint(node.classes, breakpointIndex),
+      child: resolveNodeResponsiveClasses(node.child, width),
+    });
+  }
+
+  return Object.assign({}, node, {
+    classes: resolveClassesForBreakpoint(node.classes, breakpointIndex),
+    children: node.children.map(child => resolveNodeResponsiveClasses(child, width)),
+  });
+}

package/src/design-system/selectable-state.ts

@@ -0,0 +1,157 @@
+import { isTruthyStateProp } from './state-utils';
+import { isSelectItemTag } from './tag-predicates';
+import type { NodeIR, NodeIRElement } from '../tailwind';
+import type { RenderContext } from './render-context';
+
+/**
+ * State and value resolution for the interactive component families that
+ * carry a "currently-selected" or "currently-active" notion: Select, Tabs,
+ * Accordion, RadioGroup. Used by ui-builder to decide which item should
+ * render in its open / checked / active visual.
+ *
+ * Pure: only walks the NodeIR tree and reads RenderContext / props.
+ */
+
+export function normalizeSelectableValue(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === 'undefined' || trimmed === 'null' || trimmed === 'defaultValue' || trimmed === 'value') {
+    return null;
+  }
+  return trimmed;
+}
+
+export function normalizeAccordionDefaultValue(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === 'defaultValue' || trimmed === 'undefined' || trimmed === 'null') {
+    return null;
+  }
+  return trimmed;
+}
+
+export function resolveAccordionItemValue(value: unknown, itemIndex?: number): string | null {
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (trimmed) {
+      if (trimmed.includes('${i}')) {
+        return Number.isFinite(itemIndex) ? `item-${itemIndex}` : null;
+      }
+      return trimmed;
+    }
+  }
+  return Number.isFinite(itemIndex) ? `item-${itemIndex}` : null;
+}
+
+export function resolveRadioItemChecked(node: NodeIRElement, context: RenderContext): boolean | null {
+  const props = node.props || {};
+  if (
+    isTruthyStateProp(props.checked) ||
+    isTruthyStateProp(props.defaultChecked) ||
+    isTruthyStateProp(props['aria-checked']) ||
+    String(props['data-state'] || '').trim().toLowerCase() === 'checked'
+  ) {
+    return true;
+  }
+  const selected = normalizeSelectableValue(context.radioGroupSelectedValue);
+  const value = normalizeSelectableValue(props.value);
+  if (selected == null || value == null) return null;
+  return selected === value;
+}
+
+export function resolveTabsNodeActive(node: NodeIRElement, context: RenderContext): boolean | null {
+  const props = node.props || {};
+  const selected = normalizeSelectableValue(context.tabsSelectedValue);
+  const value = normalizeSelectableValue(props.value);
+  if (selected == null || value == null) return null;
+  return selected === value;
+}
+
+export function resolveSelectItemSelected(node: NodeIRElement, context: RenderContext): boolean | null {
+  const props = node.props || {};
+  if (
+    isTruthyStateProp(props.selected) ||
+    isTruthyStateProp(props['aria-selected']) ||
+    String(props['data-state'] || '').trim().toLowerCase() === 'checked'
+  ) {
+    return true;
+  }
+  const selected = normalizeSelectableValue(context.selectSelectedValue);
+  const value = normalizeSelectableValue(props.value);
+  if (selected == null || value == null) return null;
+  return selected === value;
+}
+
+/**
+ * Recursively collect visible text content from a resolved NodeIR tree.
+ * Skips hidden / sr-only nodes and dividers.
+ */
+export function collectTextContent(node: NodeIR): string {
+  const parts: string[] = [];
+  const walk = (current: NodeIR): void => {
+    if (current.kind === 'text') {
+      parts.push(current.text);
+      return;
+    }
+    if (current.kind === 'fragment') {
+      for (const child of current.children) {
+        walk(child);
+      }
+      return;
+    }
+    if (current.kind === 'divider') {
+      return;
+    }
+    if (current.kind === 'ring') {
+      walk(current.child);
+      return;
+    }
+    if (current.classes.includes('hidden') || current.classes.includes('sr-only')) {
+      return;
+    }
+    for (const child of current.children || []) {
+      walk(child);
+    }
+  };
+  walk(node);
+  return parts.join(' ').replace(/\s+/g, ' ').trim();
+}
+
+export function findSelectedSelectLabel(node: NodeIR, selectedValue: string): string | null {
+  if (node.kind !== 'element' && node.kind !== 'component') return null;
+  if (isSelectItemTag(node.tagName)) {
+    const itemValue = normalizeSelectableValue((node.props || {}).value);
+    if (itemValue != null && itemValue === selectedValue) {
+      const label = collectTextContent(node).trim();
+      return label || null;
+    }
+  }
+  for (const child of node.children || []) {
+    const found = findSelectedSelectLabel(child, selectedValue);
+    if (found) return found;
+  }
+  return null;
+}
+
+export function findFirstSelectItemValue(node: NodeIR): string | null {
+  if (node.kind !== 'element' && node.kind !== 'component') return null;
+  if (isSelectItemTag(node.tagName)) {
+    const itemValue = normalizeSelectableValue((node.props || {}).value);
+    if (itemValue != null) return itemValue;
+  }
+  for (const child of node.children || []) {
+    const found = findFirstSelectItemValue(child);
+    if (found) return found;
+  }
+  return null;
+}
+
+export function prettySelectValueLabel(value: string): string {
+  const text = String(value || '').trim();
+  if (!text) return text;
+  if (text.includes('-') || text.includes('_')) {
+    const normalized = text.replace(/[-_]+/g, ' ');
+    return normalized.replace(/\b\w/g, (m) => m.toUpperCase());
+  }
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}