inkbridge 0.1.0-beta.21 → 0.1.0-beta.23

package/scanner/responsive-opt-in-regression.ts

@@ -0,0 +1,212 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { ComponentScanner } from './component-scanner';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import { shouldRenderResponsiveForStory } from '../src/design-system/preview-builder';
+
+/**
+ * Locks in the responsive-frame opt-in / opt-out flow:
+ *
+ *  1. **Scanner side** — `parameters.inkbridge.responsive` on a story
+ *     export round-trips to `StoryInfo.responsive` (`true`, `false`, or
+ *     omitted). The scanner reads it via the ObjectLiteralExpression
+ *     property chain `parameters → inkbridge → responsive`.
+ *
+ *  2. **Plugin side** — `shouldRenderResponsiveForStory(def, story,
+ *     storyIndex)` enforces the policy:
+ *       - explicit `story.responsive === true` → always render
+ *       - explicit `story.responsive === false` → never render
+ *       - unset → render only for the canonical Default story (name
+ *         contains "default") or, if no Default story exists, only for
+ *         the first story (storyIndex === 0).
+ *
+ * Together this lets consumers cut frame-explosion: variant stories
+ * like `Loading` / `WithError` get a single non-responsive frame by
+ * default, and any story can opt in/out via Storybook parameters.
+ */
+
+interface StoryShape {
+  name: string;
+  responsive?: boolean;
+}
+
+interface ScannedShape {
+  name: string;
+  stories?: StoryShape[];
+}
+
+const FIXTURE_DIR = path.resolve(
+  process.cwd(),
+  'tools/figma-plugin/scanner/__fixtures__/responsive-opt-in'
+);
+
+function writeFixtures(): void {
+  fs.mkdirSync(FIXTURE_DIR, { recursive: true });
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'Card.tsx'),
+    `
+      export function Card({ label }: { label: string }) {
+        return <div className="flex flex-col gap-2 sm:flex-row md:gap-4">{label}</div>;
+      }
+    `,
+    'utf-8'
+  );
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'Card.stories.tsx'),
+    `
+      import { Card } from "./Card";
+      const meta = { component: Card };
+      export default meta;
+
+      // No parameters — falls through to default policy.
+      export const Default = {
+        args: { label: "default" },
+      };
+
+      // Explicit opt-in via parameters.inkbridge.responsive = true.
+      export const WithItems = {
+        args: { label: "with items" },
+        parameters: { inkbridge: { responsive: true } },
+      };
+
+      // Explicit opt-out (suppress even if Default).
+      export const Suppressed = {
+        args: { label: "suppressed" },
+        parameters: { inkbridge: { responsive: false } },
+      };
+
+      // No flag, not Default — should not render responsive by default.
+      export const Loading = {
+        args: { label: "loading" },
+      };
+    `,
+    'utf-8'
+  );
+}
+
+function cleanupFixtures(): void {
+  try { fs.rmSync(FIXTURE_DIR, { recursive: true, force: true }); } catch { /* ignore */ }
+}
+
+async function run(): Promise<void> {
+  writeFixtures();
+
+  const scanner = new ComponentScanner({
+    componentPaths: [FIXTURE_DIR],
+    filePattern: '*.tsx',
+    exclude: [],
+  });
+  const results = (await scanner.scanAll()) as unknown as ScannedShape[];
+  const card = results.find((r) => r.name === 'Card');
+  assert.ok(card, `Card must be scanned; got: ${results.map((r) => r.name).join(', ')}`);
+  const stories = card.stories || [];
+  const byName = (n: string) => stories.find((s) => s.name === n);
+
+  // ---------------------------------------------------------------------
+  // Scanner round-trip
+  // ---------------------------------------------------------------------
+  {
+    const def = byName('Default');
+    assert.ok(def, 'Default story must exist');
+    assert.equal(def.responsive, undefined, 'Default: parameters absent → responsive undefined');
+  }
+  {
+    const wi = byName('WithItems');
+    assert.ok(wi, 'WithItems story must exist');
+    assert.equal(wi.responsive, true, 'WithItems: parameters.inkbridge.responsive=true → true');
+  }
+  {
+    const sup = byName('Suppressed');
+    assert.ok(sup, 'Suppressed story must exist');
+    assert.equal(sup.responsive, false, 'Suppressed: parameters.inkbridge.responsive=false → false');
+  }
+  {
+    const loading = byName('Loading');
+    assert.ok(loading, 'Loading story must exist');
+    assert.equal(loading.responsive, undefined, 'Loading: parameters absent → undefined');
+  }
+
+  // ---------------------------------------------------------------------
+  // Gate helper — uses the scanned StoryInfo shape directly.
+  // ---------------------------------------------------------------------
+  // Reuse the same def from the scanner so we test against the real
+  // shape, not a hand-rolled mock.
+  const def = card;
+  const get = (name: string) => stories.findIndex((s) => s.name === name);
+
+  assert.equal(
+    shouldRenderResponsiveForStory(def, byName('Default'), get('Default')),
+    true,
+    'Default story: no flag, name=Default → render responsive',
+  );
+  assert.equal(
+    shouldRenderResponsiveForStory(def, byName('WithItems'), get('WithItems')),
+    true,
+    'WithItems: explicit responsive=true → render',
+  );
+  assert.equal(
+    shouldRenderResponsiveForStory(def, byName('Suppressed'), get('Suppressed')),
+    false,
+    'Suppressed: explicit responsive=false → suppress even if it would otherwise render',
+  );
+  assert.equal(
+    shouldRenderResponsiveForStory(def, byName('Loading'), get('Loading')),
+    false,
+    'Loading: no flag, not Default, Default exists in sibling stories → suppress',
+  );
+
+  // ---------------------------------------------------------------------
+  // First-story fallback when no Default story exists.
+  // Synthetic def: two stories named X, Y. Y has no flag, X is first.
+  // ---------------------------------------------------------------------
+  {
+    const syntheticDef = { stories: [{ name: 'X' }, { name: 'Y' }] };
+    assert.equal(
+      shouldRenderResponsiveForStory(syntheticDef, syntheticDef.stories[0], 0),
+      true,
+      'first story (no Default sibling): renders responsive',
+    );
+    assert.equal(
+      shouldRenderResponsiveForStory(syntheticDef, syntheticDef.stories[1], 1),
+      false,
+      'non-first story (no Default sibling): suppress',
+    );
+  }
+
+  // ---------------------------------------------------------------------
+  // Explicit flag wins over policy in both directions.
+  // ---------------------------------------------------------------------
+  {
+    const syntheticDef = {
+      stories: [
+        { name: 'Default', responsive: false },
+        { name: 'Variant', responsive: true },
+      ],
+    };
+    assert.equal(
+      shouldRenderResponsiveForStory(syntheticDef, syntheticDef.stories[0], 0),
+      false,
+      'Default with explicit false: suppress (opt-out wins over name-based default)',
+    );
+    assert.equal(
+      shouldRenderResponsiveForStory(syntheticDef, syntheticDef.stories[1], 1),
+      true,
+      'Variant with explicit true: render (opt-in wins over default policy)',
+    );
+  }
+
+  cleanupFixtures();
+  console.log('responsive-opt-in-regression: PASS (scanner round-trip + gate helper)');
+}
+
+run().catch((err) => {
+  cleanupFixtures();
+  console.error(err);
+  process.exit(1);
+});

package/scanner/select-root-flatten-regression.ts

@@ -0,0 +1,314 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: `<Select value="x">` / `<SelectPrimitive.Root>` wrappers
+ * with no className are flattened away by the scanner. The wrapper's
+ * context-providing props (`value`, `defaultValue`, `open`,
+ * `defaultOpen`) become `__selectRoot*` data props on the hoisted
+ * children. The matching `<SelectItem value="x">`'s label is baked
+ * into `__selectRootSelectedLabel` at scan time so the renderer
+ * doesn't have to walk the original tree shape.
+ *
+ * History: shadcn `Select` is `export const Select = SelectPrimitive.Root`
+ * — a Radix logical context provider with no DOM in the browser. The
+ * plugin used to create a hugging wrapper frame around the Trigger,
+ * which trapped `<SelectTrigger className="w-full">` at the trigger's
+ * own content width inside a `sm:grid-cols-2` form column. The earlier
+ * `layoutAlign = STRETCH` patch fired in the wrong pipeline phase
+ * (the OUTER `renderChildren` loop) because the kind-component path
+ * never reached the OUTER loop — `buildFigmaNode` always created the
+ * wrapper frame itself.
+ *
+ * Universal fix: flatten the wrapper at SCAN time, mirroring the
+ * `__fromPortal` annotation pattern. Once the JSX tree no longer
+ * carries a Select Root node, every render path automatically treats
+ * the Trigger/Content as direct siblings of the form fields, so the
+ * full-width cascade works without special-casing the Radix wrapper.
+ */
+
+interface TestScannerView {
+  project: import('ts-morph').Project;
+  extractComponentJsxTree: (
+    sourceFile: import('ts-morph').SourceFile,
+    componentName: string,
+  ) => unknown;
+  transformJsxTree: (tree: unknown) => unknown;
+}
+
+function makeScanner(): TestScannerView {
+  return new ComponentScanner({
+    componentPaths: [],
+    filePattern: '*.tsx',
+    exclude: [],
+  }) as unknown as TestScannerView;
+}
+
+interface NodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  isComponent?: boolean;
+  props?: Record<string, string>;
+  children?: NodeLike[];
+  content?: string;
+}
+
+function element(
+  tagName: string,
+  props: Record<string, string> = {},
+  children: NodeLike[] = [],
+): NodeLike {
+  return {
+    type: 'element',
+    tagName,
+    isComponent: /^[A-Z]/.test(tagName),
+    props,
+    children,
+  };
+}
+
+function text(content: string): NodeLike {
+  return { type: 'text', content };
+}
+
+const scanner = makeScanner();
+const transform = (tree: NodeLike): NodeLike =>
+  scanner.transformJsxTree(tree as unknown) as NodeLike;
+
+function findElements(node: NodeLike, tagName: string, out: NodeLike[] = []): NodeLike[] {
+  if (!node || node.type !== 'element') return out;
+  if (node.tagName === tagName) out.push(node);
+  for (const child of node.children || []) findElements(child, tagName, out);
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Case 1: <Select value="usdc"> wrapping Trigger + Content with matching item
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', { className: 'space-y-2' }, [
+    element('Label', {}, [text('Receive collateral in')]),
+    element('Select', { value: 'usdc' }, [
+      element('SelectTrigger', { id: 'collateral' }, [
+        element('SelectValue', { placeholder: 'Choose' }),
+      ]),
+      element('SelectContent', {}, [
+        element('SelectItem', { value: 'usdc' }, [text('USDC')]),
+        element('SelectItem', { value: 'sol' }, [text('SOL')]),
+      ]),
+    ]),
+  ]);
+
+  const result = transform(tree);
+
+  // Wrapper is gone — Trigger and Content are direct children of the parent div.
+  assert.equal(
+    (result.children || []).length,
+    3,
+    'Label + Trigger + Content become direct children (3 total)',
+  );
+  const tags = (result.children || []).map(c => c.tagName);
+  assert.deepEqual(
+    tags,
+    ['Label', 'SelectTrigger', 'SelectContent'],
+    'Hoisted children preserve their original order',
+  );
+
+  const triggers = findElements(result, 'SelectTrigger');
+  assert.equal(triggers.length, 1, 'exactly one Trigger after hoist');
+  assert.equal(
+    triggers[0].props?.__selectRootSelectedValue,
+    'usdc',
+    'Trigger carries the Select value as __selectRootSelectedValue',
+  );
+  assert.equal(
+    triggers[0].props?.__selectRootSelectedLabel,
+    'USDC',
+    'Trigger carries the matched item label so SelectValue can render it without tree walk',
+  );
+  assert.equal(
+    triggers[0].props?.id,
+    'collateral',
+    'Original Trigger props (id) survive the merge',
+  );
+
+  const contents = findElements(result, 'SelectContent');
+  assert.equal(contents.length, 1, 'exactly one Content after hoist');
+  assert.equal(
+    contents[0].props?.__selectRootSelectedValue,
+    'usdc',
+    'Content carries the same __selectRootSelectedValue',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: defaultValue, defaultOpen, and the highlighted-first fallback
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('Select', { defaultOpen: 'true' }, [
+      element('SelectTrigger'),
+      element('SelectContent', {}, [
+        element('SelectItem', { value: 'first' }, [text('First option')]),
+        element('SelectItem', { value: 'second' }, [text('Second option')]),
+      ]),
+    ]),
+  ]);
+
+  const result = transform(tree);
+  const triggers = findElements(result, 'SelectTrigger');
+  assert.equal(triggers[0].props?.__selectRootIsOpen, 'true', 'defaultOpen propagates as isOpen=true');
+  assert.equal(
+    triggers[0].props?.__selectRootHighlightedValue,
+    'first',
+    'open with no selected value falls back to highlighting the first item',
+  );
+  assert.equal(
+    triggers[0].props?.__selectRootSelectedValue,
+    undefined,
+    'no selected value when neither value nor defaultValue is set',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: SelectPrimitive.Root flattens the same way as the Select alias
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('SelectPrimitive.Root', { value: 'sol' }, [
+      element('SelectPrimitive.Trigger'),
+      element('SelectPrimitive.Content', {}, [
+        element('SelectPrimitive.Item', { value: 'sol' }, [text('SOL')]),
+      ]),
+    ]),
+  ]);
+
+  const result = transform(tree);
+  assert.equal(
+    (result.children || []).map(c => c.tagName).indexOf('SelectPrimitive.Root'),
+    -1,
+    'raw SelectPrimitive.Root wrapper is also flattened',
+  );
+  const triggers = findElements(result, 'SelectPrimitive.Trigger');
+  assert.equal(
+    triggers[0].props?.__selectRootSelectedLabel,
+    'SOL',
+    'label lookup also matches SelectPrimitive.Item (the raw Radix tag)',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 4: Select with a className is NOT flattened (consumer customised it)
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('Select', { className: 'custom-select', value: 'x' }, [
+      element('SelectTrigger'),
+      element('SelectContent', {}, []),
+    ]),
+  ]);
+
+  const result = transform(tree);
+  const selectWrappers = findElements(result, 'Select');
+  assert.equal(
+    selectWrappers.length,
+    1,
+    'Select with a className is preserved — consumer may rely on the wrapper being a real frame',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 5: Nested transforms — Select inside another flattenable wrapper
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('Select', { value: 'a' }, [
+      element('SelectTrigger'),
+      element('SelectContent', {}, [
+        element('SelectItem', { value: 'a' }, [text('A')]),
+      ]),
+    ]),
+    element('Select', { value: 'b' }, [
+      element('SelectTrigger'),
+      element('SelectContent', {}, [
+        element('SelectItem', { value: 'b' }, [text('B')]),
+      ]),
+    ]),
+  ]);
+
+  const result = transform(tree);
+  // Two Selects → six hoisted children (Trigger + Content × 2).
+  assert.equal((result.children || []).length, 4, 'two flattened Selects produce 4 hoisted children');
+  const labels = findElements(result, 'SelectTrigger').map(t => t.props?.__selectRootSelectedLabel);
+  assert.deepEqual(labels, ['A', 'B'], 'each hoisted set carries its own Select context, not the sibling Select\'s');
+}
+
+// ---------------------------------------------------------------------------
+// Case 6: shadcn-inlined SelectItem — label lives inside SelectPrimitive.ItemText,
+// NOT as a direct text child. Without the deep-walk the annotation falls back
+// to the raw value (mint address) and the trigger shows "EPjFWdd..." instead
+// of "USDC".
+// ---------------------------------------------------------------------------
+
+{
+  const usdcMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
+  const tree = element('div', {}, [
+    element('Select', { value: usdcMint }, [
+      element('SelectPrimitive.Trigger', {}, [
+        element('SelectValue'),
+      ]),
+      element('SelectPrimitive.Content', {}, [
+        // The inlined shadcn shape: Item wraps Indicator + ItemText with the label
+        // text living one level deeper than the Item itself.
+        element('SelectPrimitive.Item', { value: usdcMint }, [
+          element('span', {}, [
+            element('SelectPrimitive.ItemIndicator', {}, [
+              element('Check'),
+            ]),
+          ]),
+          element('SelectPrimitive.ItemText', {}, [text('USDC')]),
+        ]),
+        element('SelectPrimitive.Item', { value: 'sol-mint' }, [
+          element('SelectPrimitive.ItemText', {}, [text('SOL')]),
+        ]),
+      ]),
+    ]),
+  ]);
+
+  const result = transform(tree);
+  const triggers = findElements(result, 'SelectPrimitive.Trigger');
+  assert.equal(
+    triggers[0].props?.__selectRootSelectedLabel,
+    'USDC',
+    'label is found via deep-walk through SelectPrimitive.ItemText — covers shadcn-inlined items',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 7: text children inside Select pass through unchanged
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('Select', {}, [
+      text('  '),  // whitespace text node
+      element('SelectTrigger'),
+    ]),
+  ]);
+  const result = transform(tree);
+  // Whitespace text node hoisted alongside the Trigger
+  assert.equal((result.children || []).length, 2, 'text + Trigger both hoisted');
+  assert.equal(result.children?.[0].type, 'text', 'text node preserved');
+  assert.equal(result.children?.[1].tagName, 'SelectTrigger', 'Trigger preserved');
+}
+
+// Avoid "unused" warnings for path / Project.
+void path;
+
+console.log('select-root-flatten-regression: PASS');

package/scanner/space-between-single-child-regression.ts

@@ -0,0 +1,163 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+/**
+ * Regression: a frame authored with `justify-between` that ends up with
+ * fewer than 2 in-flow children must collapse its primary alignment
+ * back to MIN. Figma's `primaryAxisAlignItems = 'SPACE_BETWEEN'` with a
+ * single child renders as "centred" ("Gap: Auto" in the inspector),
+ * which is NOT what CSS does — `justify-content: space-between` with
+ * one item anchors to start per the spec.
+ *
+ * Real-world repro: PerpsHeader at the md+ breakpoint —
+ *   <header className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+ *     <div>{title + description}</div>
+ *     {actions ? <div>{actions}</div> : null}
+ *   </header>
+ * When the consumer doesn't pass `actions`, the conditional renders
+ * nothing → only one child remains → the header centred "Jupiter
+ * Perps Desk" inside an otherwise-empty 900-wide bar.
+ *
+ * The post-children demotion in `buildFigmaNode`'s generic-element
+ * path is the universal fix: any node count < 2 with SPACE_BETWEEN
+ * primary gets MIN. Absolute-positioned children are excluded from
+ * the count since they don't participate in flex distribution.
+ */
+
+interface StubBase {
+  type: string;
+  layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+  primaryAxisAlignItems: 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN';
+  layoutPositioning?: 'AUTO' | 'ABSOLUTE';
+  width: number;
+  height: number;
+  children: StubBase[];
+}
+
+function mkFrame(overrides?: Partial<StubBase>): StubBase {
+  return Object.assign(
+    {
+      type: 'FRAME',
+      layoutMode: 'HORIZONTAL' as const,
+      primaryAxisAlignItems: 'SPACE_BETWEEN' as const,
+      layoutPositioning: 'AUTO' as const,
+      width: 100,
+      height: 32,
+      children: [],
+    },
+    overrides || {},
+  );
+}
+
+// The demotion is a property mutation. Mirror the production logic
+// here so the test exercises the rule against representative shapes
+// without booting the full ui-builder.
+function demoteSpaceBetweenIfSingleChild(frame: StubBase): void {
+  if (frame.primaryAxisAlignItems !== 'SPACE_BETWEEN') return;
+  const inFlow = frame.children.filter(
+    (c) => c.layoutPositioning !== 'ABSOLUTE',
+  );
+  if (inFlow.length >= 2) return;
+  frame.primaryAxisAlignItems = 'MIN';
+}
+
+// ---------------------------------------------------------------------------
+// Case 1 — single in-flow child: SPACE_BETWEEN → MIN
+// ---------------------------------------------------------------------------
+{
+  const frame = mkFrame({
+    children: [mkFrame({ width: 200, primaryAxisAlignItems: 'MIN' })],
+  });
+  demoteSpaceBetweenIfSingleChild(frame);
+  assert.equal(
+    frame.primaryAxisAlignItems,
+    'MIN',
+    'SPACE_BETWEEN with one in-flow child must demote to MIN',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2 — zero children: SPACE_BETWEEN → MIN
+// ---------------------------------------------------------------------------
+{
+  const frame = mkFrame({ children: [] });
+  demoteSpaceBetweenIfSingleChild(frame);
+  assert.equal(
+    frame.primaryAxisAlignItems,
+    'MIN',
+    'SPACE_BETWEEN with zero children must demote to MIN',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3 — two in-flow children: keep SPACE_BETWEEN
+// ---------------------------------------------------------------------------
+{
+  const frame = mkFrame({
+    children: [
+      mkFrame({ width: 200, primaryAxisAlignItems: 'MIN' }),
+      mkFrame({ width: 100, primaryAxisAlignItems: 'MIN' }),
+    ],
+  });
+  demoteSpaceBetweenIfSingleChild(frame);
+  assert.equal(
+    frame.primaryAxisAlignItems,
+    'SPACE_BETWEEN',
+    'SPACE_BETWEEN with two children must be preserved',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 4 — one in-flow + one absolute-positioned: demote.
+// Absolutes don't participate in flex distribution, so the lone in-flow
+// child would still be centred by SPACE_BETWEEN.
+// ---------------------------------------------------------------------------
+{
+  const frame = mkFrame({
+    children: [
+      mkFrame({ width: 200, primaryAxisAlignItems: 'MIN' }),
+      mkFrame({
+        width: 50,
+        primaryAxisAlignItems: 'MIN',
+        layoutPositioning: 'ABSOLUTE',
+      }),
+    ],
+  });
+  demoteSpaceBetweenIfSingleChild(frame);
+  assert.equal(
+    frame.primaryAxisAlignItems,
+    'MIN',
+    'SPACE_BETWEEN with one in-flow + one absolute child must demote',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 5 — already MIN: no-op
+// ---------------------------------------------------------------------------
+{
+  const frame = mkFrame({ primaryAxisAlignItems: 'MIN', children: [] });
+  demoteSpaceBetweenIfSingleChild(frame);
+  assert.equal(frame.primaryAxisAlignItems, 'MIN', 'MIN stays MIN');
+}
+
+// ---------------------------------------------------------------------------
+// Case 6 — CENTER alignment with one child: not SPACE_BETWEEN so unchanged.
+// ---------------------------------------------------------------------------
+{
+  const frame = mkFrame({
+    primaryAxisAlignItems: 'CENTER',
+    children: [mkFrame({ width: 200, primaryAxisAlignItems: 'MIN' })],
+  });
+  demoteSpaceBetweenIfSingleChild(frame);
+  assert.equal(
+    frame.primaryAxisAlignItems,
+    'CENTER',
+    'CENTER with one child is preserved (only SPACE_BETWEEN is demoted)',
+  );
+}
+
+console.log('space-between-single-child-regression: ok (6 cases)');