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

package/scanner/percent-position-regression.ts

@@ -0,0 +1,105 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import {
+  applyDeferredPercentPositioning,
+  markPositionInfo,
+} from '../src/layout/deferred-layout';
+
+// Stub a SceneNode with just the bits the resolver inspects.
+type StubChild = {
+  type: 'FRAME';
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+};
+
+type StubParent = {
+  type: 'FRAME';
+  width: number;
+  height: number;
+  layoutMode: 'NONE' | 'VERTICAL' | 'HORIZONTAL';
+  children: StubChild[];
+};
+
+function child(width: number, height: number): StubChild {
+  return { type: 'FRAME', width, height, x: 0, y: 0 };
+}
+
+function parent(width: number, height: number, kids: StubChild[]): StubParent {
+  return { type: 'FRAME', width, height, layoutMode: 'NONE', children: kids };
+}
+
+function runRegression(): void {
+  // ---- left/top percent: positions on the parent's content box -----------
+  // Parent 600 × 360 (the round-trip diagram in viewBox units). Logo at
+  // left-[18.33%] top-[30.56%] should land at (109.98, 110.016) — i.e. very
+  // close to the (110, 110) Next.js node coords used in the section.
+  const p1 = parent(600, 360, [child(40, 40)]);
+  markPositionInfo(p1.children[0] as unknown as SceneNode, {
+    leftPercent: 0.1833,
+    topPercent: 0.3056,
+  });
+  applyDeferredPercentPositioning(p1 as unknown as FrameNode);
+  assert.equal(Math.round(p1.children[0].x), 110, 'left-[18.33%] of 600 ≈ 110');
+  assert.equal(Math.round(p1.children[0].y), 110, 'top-[30.56%] of 360 ≈ 110');
+
+  // ---- bottom/right percent: anchor child's bottom/right edge -----------
+  // Drop is 28×40, in a parent 600×100, with bottom-[70%]. CSS bottom: 70%
+  // means the child's BOTTOM edge sits 70% of parent height from the parent's
+  // bottom = 30% from top. So child.y = 100 - 40 - 100*0.7 = -10 (the drop
+  // overflows above the top edge — that's correct CSS, the parent has
+  // overflow:hidden in the original component).
+  const p2 = parent(600, 100, [child(28, 40)]);
+  markPositionInfo(p2.children[0] as unknown as SceneNode, {
+    leftPercent: 0.5,
+    bottomPercent: 0.7,
+  });
+  applyDeferredPercentPositioning(p2 as unknown as FrameNode);
+  assert.equal(p2.children[0].x, 300, 'left-[50%] of 600 = 300');
+  assert.equal(p2.children[0].y, 100 - 40 - 100 * 0.7, 'bottom-[70%]: y = ph - ch - ph*0.7');
+
+  // ---- collapsed parent: no resize, mark retained for retry --------------
+  const p3 = parent(0, 0, [child(20, 20)]);
+  markPositionInfo(p3.children[0] as unknown as SceneNode, {
+    leftPercent: 0.5,
+    topPercent: 0.5,
+  });
+  applyDeferredPercentPositioning(p3 as unknown as FrameNode);
+  assert.equal(p3.children[0].x, 0, 'collapsed parent: x untouched');
+  assert.equal(p3.children[0].y, 0, 'collapsed parent: y untouched');
+
+  // Retry once parent has dimensions: should now resolve.
+  p3.width = 200;
+  p3.height = 100;
+  applyDeferredPercentPositioning(p3 as unknown as FrameNode);
+  assert.equal(p3.children[0].x, 100, 'retry: left-[50%] of 200 = 100');
+  assert.equal(p3.children[0].y, 50, 'retry: top-[50%] of 100 = 50');
+
+  // ---- mixed pixel + percent: pixel takes precedence on its axis ---------
+  // (Matches CSS where `top: 50px` and `top: 30%` would both target `top`,
+  // and the cascade picks one. For our marks, pixel `top` is consumed by
+  // applyAbsoluteIfPossible first; only percent fields reach this resolver.
+  // Verify the resolver doesn't overwrite a pre-set y when only LEFT
+  // percent is provided.)
+  const p4 = parent(400, 200, [child(20, 20)]);
+  p4.children[0].y = 42;
+  markPositionInfo(p4.children[0] as unknown as SceneNode, { leftPercent: 0.25 });
+  applyDeferredPercentPositioning(p4 as unknown as FrameNode);
+  assert.equal(p4.children[0].x, 100, 'leftPercent applied');
+  assert.equal(p4.children[0].y, 42, 'y untouched when no top/bottom percent');
+}
+
+try {
+  runRegression();
+  console.log('percent-position-regression: PASS');
+} catch (err) {
+  console.error('percent-position-regression: FAIL');
+  console.error(err);
+  process.exit(1);
+}

package/scanner/provider-cascade-regression.ts

@@ -0,0 +1,224 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: React Context cascade detection in the scanner.
+ *
+ * Background: shadcn-style compound components (ToggleGroup → ToggleGroupItem,
+ * RadioGroup → RadioGroupItem, etc.) cascade variant/size props from the
+ * group to each item via React.Context.Provider:
+ *
+ *   function ToggleGroup({ variant, size, children }) {
+ *     return (
+ *       <ToggleGroupPrimitive>
+ *         <ToggleGroupContext.Provider value={{ variant, size }}>
+ *           {children}
+ *         </ToggleGroupContext.Provider>
+ *       </ToggleGroupPrimitive>
+ *     );
+ *   }
+ *   function ToggleGroupItem({ variant, size, ...props }) {
+ *     const ctx = React.useContext(ToggleGroupContext);
+ *     return <Toggle variant={variant ?? ctx.variant ?? "default"} ... />;
+ *   }
+ *
+ * The scanner is a static analyzer — it can't run `useContext`. Before
+ * this fix, every ToggleGroupItem invocation resolved with `variant=undefined`
+ * regardless of what the wrapping ToggleGroup passed, so the rendered
+ * Toggle always picked the CVA default ("default" variant). Result:
+ * `<ToggleGroup variant="outline">` rendered as `default` everywhere.
+ *
+ * Fix: detect `<*.Provider value={{ ... }}>` wrappers in component bodies,
+ * extract the value object's key names, and at invocation time push the
+ * invocation's matching props as defaults onto a "provider stack" that
+ * descendant invocations consult. Statically models the runtime cascade.
+ */
+
+interface JsxTextNode { type: 'text'; content: string }
+interface JsxElementNode {
+  type: 'element';
+  tagName?: string;
+  props?: Record<string, string>;
+  children?: JsxNodeLike[];
+}
+type JsxNodeLike = JsxTextNode | JsxElementNode;
+
+interface TestScannerView {
+  project: import('ts-morph').Project;
+  extractComponentJsxTree: (
+    sourceFile: import('ts-morph').SourceFile,
+    componentName: string
+  ) => JsxNodeLike | null;
+}
+
+function makeScanner(): TestScannerView {
+  const scanner = new ComponentScanner({
+    componentPaths: [],
+    filePattern: '*.tsx',
+    exclude: [],
+  });
+  return scanner as unknown as TestScannerView;
+}
+
+function fixturePath(relative: string): string {
+  return path.resolve(process.cwd(), 'tools/figma-plugin/scanner/__fixtures__', relative);
+}
+
+function findElementsByTag(
+  node: JsxNodeLike | null | undefined,
+  tagName: string,
+  out: JsxElementNode[] = []
+): JsxElementNode[] {
+  if (!node || node.type !== 'element') return out;
+  if (node.tagName === tagName) out.push(node);
+  if (node.children) for (const c of node.children) findElementsByTag(c, tagName, out);
+  return out;
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: ToggleGroup-style component cascades variant + size through a
+// Context.Provider value object with shorthand properties.
+// ---------------------------------------------------------------------------
+{
+  // The fixture defines a minimal ToggleGroup that wraps children in a
+  // Provider, and the story passes variant + size at the group level.
+  // Each <Item> invocation has no explicit variant/size — they should be
+  // injected by the cascade.
+  const file = scanner.project.createSourceFile(
+    fixturePath('toggle-group-style.tsx'),
+    `
+      import * as React from 'react';
+      const CtxA = React.createContext({ variant: 'default', size: 'default' });
+      function Group({ variant = 'default', size = 'default', children }: {
+        variant?: string;
+        size?: string;
+        children?: React.ReactNode;
+      }) {
+        return (
+          <div>
+            <CtxA.Provider value={{ variant, size }}>
+              {children}
+            </CtxA.Provider>
+          </div>
+        );
+      }
+      function Item({ variant, size, value }: { variant?: string; size?: string; value: string }) {
+        return <button data-variant={variant ?? 'default'} data-size={size ?? 'default'} data-value={value} />;
+      }
+      function Story() {
+        return (
+          <Group variant="outline" size="lg">
+            <Item value="a" />
+            <Item value="b" />
+          </Group>
+        );
+      }
+      export { Story };
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Story');
+  assert.ok(tree && tree.type === 'element', 'Story tree must build');
+
+  const buttons = findElementsByTag(tree, 'button');
+  assert.equal(buttons.length, 2, `expected 2 buttons after expansion, got ${buttons.length}`);
+  for (let i = 0; i < buttons.length; i++) {
+    const b = buttons[i];
+    assert.equal(
+      b.props?.['data-variant'],
+      'outline',
+      `button ${i}: variant must cascade ("outline"), got ${b.props?.['data-variant']}`,
+    );
+    assert.equal(
+      b.props?.['data-size'],
+      'lg',
+      `button ${i}: size must cascade ("lg"), got ${b.props?.['data-size']}`,
+    );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: an Item that explicitly overrides one of the cascaded props
+// keeps its explicit value — cascade only fills MISSING props.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('toggle-group-explicit-override.tsx'),
+    `
+      import * as React from 'react';
+      const CtxB = React.createContext({ variant: 'default' });
+      function Group({ variant = 'default', children }: { variant?: string; children?: React.ReactNode }) {
+        return (
+          <CtxB.Provider value={{ variant }}>
+            {children}
+          </CtxB.Provider>
+        );
+      }
+      function Item({ variant }: { variant?: string }) {
+        return <span data-variant={variant ?? 'default'} />;
+      }
+      function Story() {
+        return (
+          <Group variant="outline">
+            <Item />
+            <Item variant="ghost" />
+          </Group>
+        );
+      }
+      export { Story };
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Story');
+  assert.ok(tree && tree.type === 'element', 'Story tree must build');
+  const spans = findElementsByTag(tree, 'span');
+  assert.equal(spans.length, 2, `expected 2 spans, got ${spans.length}`);
+  assert.equal(spans[0].props?.['data-variant'], 'outline', 'first span inherits "outline" from group');
+  assert.equal(spans[1].props?.['data-variant'], 'ghost', 'second span keeps explicit "ghost"');
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: a component with NO Provider wrapper doesn't push a cascade,
+// so descendants resolve as they would without the feature.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('no-provider.tsx'),
+    `
+      import * as React from 'react';
+      function Group({ variant = 'default', children }: { variant?: string; children?: React.ReactNode }) {
+        // Just a plain wrapper — no Provider — so variant does NOT cascade.
+        return <section data-variant={variant}>{children}</section>;
+      }
+      function Item({ variant }: { variant?: string }) {
+        return <p data-variant={variant ?? 'fallback'} />;
+      }
+      function Story() {
+        return (
+          <Group variant="outline">
+            <Item />
+          </Group>
+        );
+      }
+      export { Story };
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Story');
+  assert.ok(tree && tree.type === 'element', 'Story tree must build');
+  const ps = findElementsByTag(tree, 'p');
+  assert.equal(ps.length, 1, `expected 1 p, got ${ps.length}`);
+  assert.equal(
+    ps[0].props?.['data-variant'],
+    'fallback',
+    'without Provider wrapper, no cascade — Item falls back to its own default',
+  );
+}
+
+console.log('provider-cascade-regression: PASS (3 cases)');

package/scanner/provider-flatten-regression.ts

@@ -0,0 +1,235 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: a React Context Provider that wraps MULTIPLE children
+ * (typical pattern for compound components that cascade variant/size:
+ * `<ToggleGroup>` wraps items in `<ToggleGroupContext.Provider>`) must
+ * be transparently stripped from the JSX tree. Otherwise the renderer
+ * builds an unsized inner frame for the Provider, breaking the parent's
+ * auto-layout (e.g. ToggleGroup's `inline-flex` no longer applies to
+ * the actual items).
+ *
+ * History: scanner had a single-child Provider stripper at
+ * `buildJsxTree`'s return point (line ~1454) but no multi-child case.
+ * When a starter consumer added ToggleGroup with 3 toggle items, all
+ * 3 stacked vertically because the Provider barrier prevented inline-flex
+ * from reaching them as direct children. Universal fix in the scanner
+ * because the pattern (cascading context Providers in compound components)
+ * is canonical in shadcn-style libraries — not specific to this consumer.
+ */
+
+interface JsxTextNode { type: 'text'; content: string }
+interface JsxElementNode {
+  type: 'element';
+  tagName?: string;
+  props?: Record<string, string>;
+  children?: JsxNodeLike[];
+}
+type JsxNodeLike = JsxTextNode | JsxElementNode;
+
+interface TestScannerView {
+  project: import('ts-morph').Project;
+  extractComponentJsxTree: (
+    sourceFile: import('ts-morph').SourceFile,
+    componentName: string
+  ) => JsxNodeLike | null;
+}
+
+function makeScanner(): TestScannerView {
+  const scanner = new ComponentScanner({
+    componentPaths: [],
+    filePattern: '*.tsx',
+    exclude: [],
+  });
+  return scanner as unknown as TestScannerView;
+}
+
+function fixturePath(relative: string): string {
+  return path.resolve(process.cwd(), 'tools/figma-plugin/scanner/__fixtures__', relative);
+}
+
+function findElementsByTag(
+  node: JsxNodeLike | null | undefined,
+  tagName: string,
+  out: JsxElementNode[] = []
+): JsxElementNode[] {
+  if (!node || node.type !== 'element') return out;
+  if (node.tagName === tagName) out.push(node);
+  if (node.children) {
+    for (const c of node.children) findElementsByTag(c, tagName, out);
+  }
+  return out;
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: multi-child Context.Provider inside a compound component body
+// must be flattened — its 3 children become direct children of the
+// enclosing root.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('multi-child-provider.tsx'),
+    `
+      import * as React from 'react';
+      const ToggleGroupContext = React.createContext({ size: 'default' });
+      function ToggleGroup({ children }: { children?: React.ReactNode }) {
+        return (
+          <div className="inline-flex items-center gap-1">
+            <ToggleGroupContext.Provider value={{ size: 'default' }}>
+              <button>A</button>
+              <button>B</button>
+              <button>C</button>
+            </ToggleGroupContext.Provider>
+          </div>
+        );
+      }
+      export { ToggleGroup };
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'ToggleGroup');
+  assert.ok(tree && tree.type === 'element', 'ToggleGroup tree must build');
+
+  const providers = findElementsByTag(tree, 'ToggleGroupContext.Provider');
+  assert.equal(
+    providers.length,
+    0,
+    `transparent multi-child Provider must be flattened, but found ${providers.length} Provider node(s) in tree`
+  );
+
+  // After flattening the Provider, the inline-flex div should have the
+  // 3 buttons as direct children.
+  const root = tree as JsxElementNode;
+  assert.equal(root.tagName, 'div', `root should be the inline-flex div, got ${root.tagName}`);
+  const childTags = (root.children ?? [])
+    .filter((c): c is JsxElementNode => c.type === 'element')
+    .map((c) => c.tagName);
+  assert.deepEqual(
+    childTags,
+    ['button', 'button', 'button'],
+    `inline-flex div should have 3 button children after Provider flatten, got ${JSON.stringify(childTags)}`
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: NESTED transparent Providers (rare but the flatten must recurse).
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('nested-providers.tsx'),
+    `
+      import * as React from 'react';
+      const A = React.createContext(null);
+      const B = React.createContext(null);
+      function Group({ children }: { children?: React.ReactNode }) {
+        return (
+          <ul className="grid">
+            <A.Provider value={null}>
+              <B.Provider value={null}>
+                <li>One</li>
+                <li>Two</li>
+              </B.Provider>
+            </A.Provider>
+          </ul>
+        );
+      }
+      export { Group };
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Group');
+  assert.ok(tree && tree.type === 'element', 'Group tree must build');
+  const providers = [
+    ...findElementsByTag(tree, 'A.Provider'),
+    ...findElementsByTag(tree, 'B.Provider'),
+  ];
+  assert.equal(providers.length, 0, 'nested transparent Providers must both be flattened');
+  const ul = tree as JsxElementNode;
+  assert.equal(ul.tagName, 'ul');
+  const itemTags = (ul.children ?? [])
+    .filter((c): c is JsxElementNode => c.type === 'element')
+    .map((c) => c.tagName);
+  assert.deepEqual(
+    itemTags,
+    ['li', 'li'],
+    `ul should have 2 li children after nested Provider flatten, got ${JSON.stringify(itemTags)}`
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: a Provider WITH className (rare; not actually possible on a real
+// React Context.Provider, but tests the guard) must NOT be flattened.
+// Asserts the guard so future refactors can't accidentally collapse a
+// styled wrapper that happens to be named *.Provider.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('styled-provider.tsx'),
+    `
+      import * as React from 'react';
+      function Group() {
+        return (
+          <section>
+            <FooProvider className="rounded-md p-4">
+              <span>one</span>
+              <span>two</span>
+            </FooProvider>
+          </section>
+        );
+      }
+      export { Group };
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Group');
+  assert.ok(tree && tree.type === 'element', 'Group tree must build');
+  const providers = findElementsByTag(tree, 'FooProvider');
+  // FooProvider doesn't end with .Provider — it ends with "Provider". Should NOT be flattened
+  // by the .endsWith('.Provider') check. This asserts the dot-prefix discipline.
+  assert.equal(
+    providers.length,
+    1,
+    `FooProvider (no dot) must NOT match transparent-Provider rule; got ${providers.length}`
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 4: single-child Provider — was already handled before this fix.
+// Ensure the existing behaviour still works (Provider stripped, child
+// elevated).
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('single-child-provider.tsx'),
+    `
+      import * as React from 'react';
+      const Ctx = React.createContext(null);
+      function Group() {
+        return (
+          <Ctx.Provider value={null}>
+            <article className="card">hello</article>
+          </Ctx.Provider>
+        );
+      }
+      export { Group };
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Group');
+  assert.ok(tree && tree.type === 'element', 'Group tree must build');
+  assert.equal(
+    (tree as JsxElementNode).tagName,
+    'article',
+    `single-child Provider must be stripped, leaving the article as root; got ${(tree as JsxElementNode).tagName}`
+  );
+}
+
+console.log('provider-flatten-regression: PASS (4 cases)');

package/scanner/radial-gradient-regression.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { parseRadialAnchorFromUtility, radialGradientTransformFromAnchor } from '../src/radial-gradient';
+import { parseRadialAnchorFromUtility, radialGradientTransformFromAnchor } from '../src/effects/radial-gradient';
 
 function approxEqual(actual: number, expected: number, epsilon = 0.0001): void {
   assert.ok(Math.abs(actual - expected) <= epsilon, `expected ${expected}, got ${actual}`);