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

package/src/effects/index.ts

@@ -0,0 +1,5 @@
+export * from './blob-placement';
+export * from './clip-path-decorative';
+export * from './radial-gradient';
+export * from './icon-builder';
+export * from './portal-panel';

package/src/effects/portal-panel.ts

@@ -0,0 +1,369 @@
+/**
+ * portal-panel.ts — pre-pass that injects explicit widths on portal panels.
+ *
+ * Portal-rendered components (Select dropdown, DropdownMenu content, Popover,
+ * Tooltip) visually escape their parent in the browser. The Figma plugin can't
+ * portal, so we render them in-place under the story layout. The challenge:
+ * panels without an explicit `max-w-*` class (Radix popper sizes to content
+ * with a `min-w-[8rem]` floor) have no width context at render time — their
+ * `w-full` children collapse in HUG parents and item text wraps aggressively.
+ *
+ * Solution: a pre-pass that walks the NodeIR tree and, for `__fromPortal` nodes
+ * without an explicit width, measures the intrinsic content width (longest
+ * text path + cumulative padding) and injects a synthetic `w-[Npx]` class.
+ * The standard rendering pipeline then treats the panel as any fixed-width
+ * frame — no shared-code branches or deferred apply logic required.
+ *
+ * Text widths come from real Figma text nodes (same path as the renderer), so
+ * the injected width matches rendered width. Each probe text node is created,
+ * read, and removed immediately — no lasting effect on the document.
+ */
+
+import { isElementLikeNode, type NodeIR, type NodeIRElementBase } from '../tailwind';
+import { createTextNode } from '../text';
+
+const PANEL_WIDTH_BUFFER_PX = 4;
+const DEFAULT_PANEL_GAP_CLASS = 'mt-1';
+
+const FONT_SIZE_PX: Record<string, number> = {
+  'text-xs': 12,
+  'text-sm': 14,
+  'text-base': 16,
+  'text-lg': 18,
+  'text-xl': 20,
+  'text-2xl': 24,
+};
+
+export function injectPortalPanelWidths(tree: NodeIR): NodeIR {
+  return walk(tree, 14);
+}
+
+const DRAWER_PANEL_HEIGHT_PX = 700;
+const DRAWER_PANEL_WIDTH_PX = 360;
+
+/**
+ * Portal panels with `h-full` (drawer/sheet content) need a fixed height so
+ * descendant `flex-1` siblings have vertical space to claim. They also need a
+ * concrete pixel width because their real parent in the browser is the
+ * viewport — in Figma auto-layout the nearest ancestor is a HUG-to-content
+ * container (Sheet.Root) that collapses to the sibling trigger's width.
+ *
+ * Inject both `h-[700px]` and `w-[360px]` so the drawer renders at drawer
+ * dimensions regardless of its wrapper chain.
+ */
+export function injectPortalPanelHeights(tree: NodeIR): NodeIR {
+  return walkHeights(tree);
+}
+
+function walkHeights(node: NodeIR): NodeIR {
+  if (node.kind === 'text' || node.kind === 'divider') return node;
+  if (node.kind === 'fragment') {
+    const nextChildren = node.children.map(walkHeights);
+    return nextChildren.some((c, i) => c !== node.children[i])
+      ? { ...node, children: nextChildren }
+      : node;
+  }
+  if (node.kind === 'ring') {
+    const nextChild = walkHeights(node.child);
+    return nextChild !== node.child ? { ...node, child: nextChild } : node;
+  }
+
+  const nextChildren = node.children.map(walkHeights);
+  let next: NodeIRElementBase = node;
+  if (nextChildren.some((c, i) => c !== node.children[i])) {
+    next = { ...node, children: nextChildren } as NodeIRElementBase;
+  }
+
+  const isPortalPanel = !!(next.props && next.props.__fromPortal);
+  if (!isPortalPanel) return next as NodeIR;
+
+  const hasHFull = next.classes.indexOf('h-full') !== -1
+    || next.classes.indexOf('h-screen') !== -1
+    || next.classes.indexOf('min-h-screen') !== -1;
+  if (!hasHFull) return next as NodeIR;
+
+  if (hasExplicitPanelHeight(next.classes)) return next as NodeIR;
+
+  const hasParentRelativeWidth = classListHasParentRelativeWidth(next.classes);
+  const shouldInjectWidth = hasParentRelativeWidth && !classListHasFixedWidth(next.classes);
+
+  const withFixed: string[] = [];
+  for (let i = 0; i < next.classes.length; i++) {
+    const cls = next.classes[i];
+    // Strip generic full-parent sizing sentinels that can't resolve without a
+    // fixed viewport-sized ancestor — we inject concrete pixel values below.
+    if (cls === 'h-full' || cls === 'h-screen' || cls === 'min-h-screen') continue;
+    if (shouldInjectWidth && (cls === 'w-full' || /^w-\d+\/\d+$/.test(cls))) continue;
+    withFixed.push(cls);
+  }
+  withFixed.push(`h-[${DRAWER_PANEL_HEIGHT_PX}px]`);
+  if (shouldInjectWidth) withFixed.push(`w-[${DRAWER_PANEL_WIDTH_PX}px]`);
+  return { ...next, classes: withFixed } as NodeIR;
+}
+
+function classListHasParentRelativeWidth(classes: string[]): boolean {
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (cls === 'w-full') return true;
+    if (/^w-\d+\/\d+$/.test(cls)) return true;
+  }
+  return false;
+}
+
+function classListHasFixedWidth(classes: string[]): boolean {
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (/^w-\[/.test(cls)) return true;
+    if (/^w-\d+$/.test(cls)) return true;
+  }
+  return false;
+}
+
+function hasExplicitPanelHeight(classes: string[]): boolean {
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (/^h-\[/.test(cls)) return true;
+    if (/^h-\d/.test(cls)) return true;
+    if (/^max-h-/.test(cls)) return true;
+  }
+  return false;
+}
+
+function walk(node: NodeIR, parentFontSize: number): NodeIR {
+  if (node.kind === 'text' || node.kind === 'divider') return node;
+  if (node.kind === 'fragment') {
+    const nextChildren = node.children.map((c) => walk(c, parentFontSize));
+    return { ...node, children: nextChildren };
+  }
+  if (node.kind === 'ring') {
+    return { ...node, child: walk(node.child, parentFontSize) };
+  }
+
+  const fs = resolveFontSize(node.classes, parentFontSize);
+  // Recurse first so children are processed (though we don't currently use
+  // their injected widths when measuring parent — raw NodeIR classes drive
+  // the estimate).
+  const nextChildren = node.children.map((c) => walk(c, fs));
+  let next: NodeIRElementBase = node;
+  if (nextChildren.some((c, i) => c !== node.children[i])) {
+    next = { ...node, children: nextChildren } as NodeIRElementBase;
+  }
+
+  const isPortalPanel = !!(next.props && next.props.__fromPortal);
+  if (!isPortalPanel) return next as NodeIR;
+
+  // Drawer/sheet-style panels (`h-full` + `w-full` / fractional width) are
+  // viewport-sized, not content-sized. The heights pre-pass handles them and
+  // injects concrete viewport pixels. Running intrinsic-width measurement here
+  // would inject a too-narrow `w-[Npx]` that the heights pass then treats as
+  // an explicit width and skips its own injection.
+  const hasFullHeight = next.classes.indexOf('h-full') !== -1
+    || next.classes.indexOf('h-screen') !== -1
+    || next.classes.indexOf('min-h-screen') !== -1;
+  if (hasFullHeight && classListHasParentRelativeWidth(next.classes)) {
+    return next as NodeIR;
+  }
+
+  let nextClasses: string[] | null = null;
+
+  // Radix popper panels use `translate-y-1` to create a visual gap from the
+  // trigger. CSS transforms have no effect in Figma auto-layout — translate
+  // any present `translate-y-*` to `mt-*`, and fall back to `mt-1` when the
+  // scanner didn't collect a translate class. The plugin converts child
+  // `mt-*` into parent itemSpacing, which renders as the trigger→panel gap.
+  const mtRewritten = rewriteTranslateYToMarginTop(next.classes);
+  if (mtRewritten !== next.classes) {
+    nextClasses = mtRewritten;
+  } else if (!hasExplicitMarginTop(next.classes)) {
+    nextClasses = next.classes.concat([DEFAULT_PANEL_GAP_CLASS]);
+  }
+
+  const baseClasses = nextClasses || next.classes;
+  if (!hasExplicitPanelWidth(baseClasses)) {
+    const measured = measurePanelWidth({ ...next, classes: baseClasses }, fs);
+    if (Number.isFinite(measured) && measured > 0) {
+      // Small right-edge buffer: Figma text measurement can round down and
+      // the last item in a HUG container otherwise sits flush against the
+      // panel border.
+      const widthPx = Math.round(measured) + PANEL_WIDTH_BUFFER_PX;
+      nextClasses = baseClasses.concat([`w-[${widthPx}px]`]);
+    }
+  }
+
+  if (!nextClasses) return next as NodeIR;
+  return { ...next, classes: nextClasses } as NodeIR;
+}
+
+function hasExplicitMarginTop(classes: string[]): boolean {
+  for (const cls of classes) {
+    if (/^mt-/.test(cls)) return true;
+  }
+  return false;
+}
+
+function rewriteTranslateYToMarginTop(classes: string[]): string[] {
+  let rewritten: string[] | null = null;
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const m = cls.match(/^translate-y-(.+)$/);
+    if (!m) continue;
+    if (!rewritten) rewritten = classes.slice();
+    rewritten[i] = 'mt-' + m[1];
+  }
+  return rewritten || classes;
+}
+
+function hasExplicitPanelWidth(classes: string[]): boolean {
+  for (const cls of classes) {
+    if (cls === 'w-full' || cls === 'w-auto') continue;
+    if (/^w-/.test(cls)) return true;
+    if (/^max-w-/.test(cls) && !/^max-w-\[(?:calc|min|max)\(/.test(cls)) return true;
+  }
+  return false;
+}
+
+function resolveFontSize(classes: string[] | undefined, fallback: number): number {
+  if (!classes) return fallback;
+  for (const cls of classes) {
+    const px = FONT_SIZE_PX[cls];
+    if (px != null) return px;
+  }
+  return fallback;
+}
+
+function parsePx(token: string): number {
+  const bracket = token.match(/^\[(.+)\]$/);
+  if (bracket) {
+    const inner = bracket[1];
+    if (inner.endsWith('rem')) return parseFloat(inner) * 16;
+    if (inner.endsWith('px')) return parseFloat(inner);
+    return 0;
+  }
+  const n = parseFloat(token);
+  return Number.isFinite(n) ? n * 4 : 0;
+}
+
+function paddingH(classes: string[]): number {
+  let left = 0, right = 0;
+  for (const cls of classes) {
+    if (cls.startsWith('px-')) {
+      const v = parsePx(cls.slice(3));
+      left = v; right = v;
+    } else if (cls.startsWith('pl-')) {
+      left = parsePx(cls.slice(3));
+    } else if (cls.startsWith('pr-')) {
+      right = parsePx(cls.slice(3));
+    } else if (/^p-[\d\[]/.test(cls)) {
+      const v = parsePx(cls.slice(2));
+      left = v; right = v;
+    }
+  }
+  return left + right;
+}
+
+function gapX(classes: string[]): number {
+  for (const cls of classes) {
+    if (cls.startsWith('gap-x-')) return parsePx(cls.slice(6));
+    if (cls.startsWith('gap-')) return parsePx(cls.slice(4));
+  }
+  return 0;
+}
+
+function minPanelWidth(classes: string[]): number | null {
+  for (const cls of classes) {
+    if (cls.startsWith('min-w-')) {
+      const v = parsePx(cls.slice(6));
+      if (v > 0) return v;
+    }
+  }
+  return null;
+}
+
+function explicitFixedWidth(classes: string[]): number | null {
+  for (const cls of classes) {
+    if (cls === 'w-full' || cls === 'w-auto') continue;
+    if (/^w-/.test(cls)) {
+      const v = parsePx(cls.slice(2));
+      if (v > 0) return v;
+    }
+    if (cls.startsWith('size-')) {
+      const v = parsePx(cls.slice(5));
+      if (v > 0) return v;
+    }
+  }
+  return null;
+}
+
+/**
+ * Measure the intrinsic content width of a node subtree by walking the NodeIR
+ * and summing/maxing child widths + layout padding/gap at each level. Text
+ * widths come from real Figma text nodes (created and removed per probe).
+ */
+function measurePanelWidth(node: NodeIRElementBase, parentFontSize: number): number {
+  const measured = measure(node, parentFontSize);
+  const minW = minPanelWidth(node.classes) ?? 0;
+  return Math.max(measured, minW);
+}
+
+function measure(node: NodeIR, parentFontSize: number): number {
+  if (node.kind === 'text') {
+    return measureTextWidth(node.text, parentFontSize);
+  }
+  if (node.kind === 'fragment') {
+    let max = 0;
+    for (const c of node.children) {
+      const w = measure(c, parentFontSize);
+      if (w > max) max = w;
+    }
+    return max;
+  }
+  if (node.kind === 'divider') return 0;
+  if (node.kind === 'ring') return measure(node.child, parentFontSize);
+  if (!isElementLikeNode(node)) return 0;
+
+  const classes = (node as NodeIRElementBase).classes || [];
+  // Out-of-flow siblings don't contribute to parent's in-flow width.
+  if (classes.includes('absolute') || classes.includes('fixed')) return 0;
+
+  const fixed = explicitFixedWidth(classes);
+  if (fixed != null) return fixed;
+
+  const fs = resolveFontSize(classes, parentFontSize);
+  const isHorizontal = classes.includes('flex') && !classes.includes('flex-col');
+  const gap = isHorizontal ? gapX(classes) : 0;
+  const pad = paddingH(classes);
+
+  const children = (node as NodeIRElementBase).children || [];
+  const widths: number[] = [];
+  for (const c of children) {
+    const w = measure(c, fs);
+    if (w > 0) widths.push(w);
+  }
+
+  let content = 0;
+  if (isHorizontal && widths.length > 0) {
+    content = widths.reduce((a, b) => a + b, 0) + gap * Math.max(0, widths.length - 1);
+  } else if (widths.length > 0) {
+    let maxW = widths[0];
+    for (let i = 1; i < widths.length; i++) {
+      if (widths[i] > maxW) maxW = widths[i];
+    }
+    content = maxW;
+  }
+
+  return content + pad;
+}
+
+function measureTextWidth(text: string, fontSize: number): number {
+  if (!text) return 0;
+  try {
+    const t = createTextNode(text, { fontSize });
+    const w = t.width;
+    try { t.remove(); } catch { /* ignore */ }
+    return w;
+  } catch {
+    // Fallback to char-width heuristic if Figma text-node creation fails
+    // (e.g. font not available).
+    return Math.ceil(text.length * fontSize * 0.55);
+  }
+}

package/src/{radial-gradient.ts → effects/radial-gradient.ts}

@@ -1,4 +1,4 @@
-import type { Transform2x3 } from './transform-math';
+import type { Transform2x3 } from '../tailwind';
 
 export type RadialAnchor = {
   x: number;

package/src/framework-adapters/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Framework adapters — translate UI-framework-specific runtime conventions
+ * (CSS rules, JS-driven layout) into class-list patches the plugin's
+ * Tailwind pipeline can see.
+ *
+ * The plugin scans className strings only. Frameworks that move layout
+ * intent OUT of className strings (shadcn's `[data-slot="..."]`
+ * stylesheet rules, MUI's emotion-injected styles, ...) need a small
+ * translation layer so the renderer doesn't have to learn each
+ * framework's idioms. That layer lives here.
+ *
+ * Each adapter is one file, pure, and idempotent. The dispatcher
+ * (`applyFrameworkAdapters`) composes them in order. Adding a new
+ * framework is a new file plus one line below.
+ */
+
+import type { NodeIR } from '../tailwind/node-ir';
+import { applyShadcnAdapter, isShadcnAdapterDroppedTag } from './shadcn';
+
+export { applyShadcnAdapter, getShadcnSlotInjections, isShadcnAdapterDroppedTag } from './shadcn';
+
+/**
+ * Returns true when the given JSX tagName is unconditionally dropped by
+ * some registered framework adapter at render time. Walks that adapters
+ * declare via their own `is…DroppedTag` predicate so callers don't have to
+ * know which adapters exist. Pre-render scans (responsive-signal
+ * detection, complexity heuristics, …) consult this to avoid counting
+ * classes on elements that never reach Figma.
+ */
+export function isFrameworkAdapterDroppedTag(tagName: string): boolean {
+  return isShadcnAdapterDroppedTag(tagName);
+  // Future adapters add `|| isMuiAdapterDroppedTag(tagName)` etc.
+}
+
+/**
+ * Run every registered framework adapter against the IR in turn. Each
+ * adapter returns the tree by reference when it makes no changes, so the
+ * common case (no shadcn slots in the tree) costs only a tree-walk.
+ */
+export function applyFrameworkAdapters(node: NodeIR): NodeIR {
+  let next = node;
+  next = applyShadcnAdapter(next);
+  // Add new adapters here, e.g.:
+  //   next = applyMuiAdapter(next);
+  //   next = applyHeadlessUiAdapter(next);
+  return next;
+}