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

package/scanner/hidden-check-drift-regression.ts

@@ -0,0 +1,125 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Regression: ban every raw `classes.includes('hidden')` /
+ * `classes.includes('sr-only')` / `lastIndexOf('hidden')` /
+ * `lastIndexOf('sr-only')` site in `src/`.
+ *
+ * Background: three separate sites historically reimplemented the
+ * "is this element hidden?" rule each with subtle drift:
+ *
+ *   1. `buildFigmaNode`'s outer gate (hand-rolled DISPLAY_OVERRIDES +
+ *      lastIndexOf + slice — closest to correct).
+ *   2. `collectTextContent` (raw `classes.includes('hidden')` — wrong;
+ *      ignored last-display-wins, returned `''` for a `<p hidden
+ *      sm:block>` resolved to `['hidden','text-muted-foreground','block']`
+ *      where `block` is the winning display utility).
+ *   3. inline-collapse / renderChildren filters (used
+ *      `isEffectivelyHidden` correctly but didn't honour sr-only —
+ *      mostly accidental; we tightened later).
+ *
+ * Each site needed its own bug-hunt to find. The lesson: route every
+ * "is this element hidden / sr-only?" check through the shared
+ * `isEffectivelyHiddenOrSrOnly` helper in
+ * `src/tailwind/responsive-analyzer.ts`. This fixture mechanically
+ * enforces that — adding a new raw site fails CI before it can land.
+ *
+ * The helper itself (and its narrower `isEffectivelyHidden` companion)
+ * IS allowed to reference the literals — that's the source of truth.
+ * Allow-list pattern: any file under `src/tailwind/responsive-analyzer.ts`.
+ */
+
+const SRC_DIR = path.resolve(__dirname, '..', 'src');
+const ALLOWED_FILES = new Set([
+  // The shared helper itself. Other allowed files can be added here
+  // with a comment explaining why a raw literal check is justified.
+  path.resolve(SRC_DIR, 'tailwind', 'responsive-analyzer.ts'),
+]);
+
+// Patterns that indicate a raw, drift-prone check. The shared helper
+// covers ALL of these cases — there's no legitimate reason to write
+// them directly in any other file.
+const BANNED_PATTERNS: Array<{ regex: RegExp; description: string }> = [
+  {
+    regex: /\.includes\(\s*['"]hidden['"]\s*\)/,
+    description: `classes.includes('hidden') — use isEffectivelyHiddenOrSrOnly() from '../tailwind'`,
+  },
+  {
+    regex: /\.includes\(\s*['"]sr-only['"]\s*\)/,
+    description: `classes.includes('sr-only') — use isEffectivelyHiddenOrSrOnly() from '../tailwind'`,
+  },
+  {
+    regex: /\.lastIndexOf\(\s*['"]hidden['"]\s*\)/,
+    description: `classes.lastIndexOf('hidden') — use isEffectivelyHidden() or isEffectivelyHiddenOrSrOnly() from '../tailwind'`,
+  },
+  {
+    regex: /\.lastIndexOf\(\s*['"]sr-only['"]\s*\)/,
+    description: `classes.lastIndexOf('sr-only') — use isEffectivelyHiddenOrSrOnly() from '../tailwind'`,
+  },
+];
+
+function walk(dir: string, out: string[]): void {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walk(full, out);
+      continue;
+    }
+    if (entry.isFile() && entry.name.endsWith('.ts') && !entry.name.endsWith('.d.ts')) {
+      out.push(full);
+    }
+  }
+}
+
+const files: string[] = [];
+walk(SRC_DIR, files);
+assert.ok(files.length > 0, 'expected to find .ts files under tools/figma-plugin/src/');
+
+type Violation = { file: string; line: number; snippet: string; reason: string };
+const violations: Violation[] = [];
+
+for (const file of files) {
+  if (ALLOWED_FILES.has(file)) continue;
+  const text = fs.readFileSync(file, 'utf-8');
+  const lines = text.split('\n');
+  for (let i = 0; i < lines.length; i++) {
+    const raw = lines[i];
+    // Strip line comments — they're commentary, not code that runs.
+    const codePortion = raw.replace(/\/\/.*$/, '');
+    for (const pat of BANNED_PATTERNS) {
+      if (pat.regex.test(codePortion)) {
+        violations.push({
+          file: path.relative(SRC_DIR, file),
+          line: i + 1,
+          snippet: raw.trim().slice(0, 120),
+          reason: pat.description,
+        });
+      }
+    }
+  }
+}
+
+if (violations.length > 0) {
+  console.error('hidden-check-drift-regression: FAIL');
+  console.error(`Found ${violations.length} raw hidden / sr-only check(s) in src/:`);
+  for (const v of violations) {
+    console.error(`  ${v.file}:${v.line}`);
+    console.error(`    ${v.snippet}`);
+    console.error(`    ${v.reason}`);
+  }
+  console.error('');
+  console.error('Why this matters:');
+  console.error('  These string-literal checks repeatedly drifted from each other.');
+  console.error('  The recurring `<p hidden sm:block>` lost-its-text bug existed because');
+  console.error('  three separate sites each had their own subtly-wrong "is this hidden?"');
+  console.error('  rule. Route every check through `isEffectivelyHiddenOrSrOnly` instead.');
+  process.exit(1);
+}
+
+console.log(`hidden-check-drift-regression: PASS (scanned ${files.length} files, 0 raw hidden/sr-only checks in src/)`);

package/scanner/horizontal-text-shrink-regression.ts

@@ -0,0 +1,230 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+/**
+ * Regression: `constrainSingleHorizontalTextChild` shrinks the
+ * text-bearing child of a HORIZONTAL FIXED-width row when its HUG
+ * width would overflow the sibling button's space. The helper
+ * mirrors CSS `flex-shrink: 1` — flex items shrink to min-content
+ * (text wraps to longest word) when the row would otherwise
+ * overflow; Figma auto-layout has no shrink primitive so without
+ * this stabilizer the text sibling visually overlaps the button.
+ *
+ * The helper has always handled the case where a direct `<TEXT>`
+ * child sits next to a non-text sibling. The extension covered here
+ * is shadcn's canonical "title + description" wrapper —
+ * `<div><p>Heading</p><p>Long description text…</p></div>` —
+ * which is a FRAME containing only text, not a direct TEXT node.
+ * Without recognising the wrapper as text-bearing, the helper bailed
+ * (`textChildren.length !== 1`) and rows like DecreasePositionModal's
+ * "Close entire position" card rendered the description on one line
+ * overlapping the "Entire position" button.
+ *
+ * The fix: treat any frame whose visible subtree is entirely text
+ * (paragraphs / spans / TEXT nodes wrapped in transparent frames) as
+ * text-bearing. Resize the wrapper to the available width and
+ * recursively pin every TEXT descendant to `textAutoResize='HEIGHT'`
+ * so the text wraps within the now-constrained wrapper.
+ */
+
+import {
+  constrainSingleHorizontalTextChild,
+} from '../src/design-system/frame-stabilizers';
+
+interface StubText {
+  type: 'TEXT';
+  width: number;
+  height: number;
+  textAutoResize: 'NONE' | 'HEIGHT' | 'WIDTH_AND_HEIGHT' | 'TRUNCATE' | undefined;
+  resize: (w: number, h: number) => void;
+  layoutPositioning?: 'AUTO' | 'ABSOLUTE';
+}
+
+interface StubFrame {
+  type: 'FRAME';
+  layoutMode: 'HORIZONTAL' | 'VERTICAL';
+  primaryAxisAlignItems: 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN';
+  primaryAxisSizingMode: 'AUTO' | 'FIXED';
+  counterAxisSizingMode: 'AUTO' | 'FIXED';
+  layoutAlign?: 'INHERIT' | 'STRETCH' | 'MIN' | 'CENTER' | 'MAX';
+  width: number;
+  height: number;
+  itemSpacing: number;
+  paddingLeft: number;
+  paddingRight: number;
+  paddingTop: number;
+  paddingBottom: number;
+  children: (StubFrame | StubText)[];
+  layoutPositioning?: 'AUTO' | 'ABSOLUTE';
+  resize: (w: number, h: number) => void;
+}
+
+function text(width: number, opts: Partial<StubText> = {}): StubText {
+  const t: StubText = {
+    type: 'TEXT',
+    width,
+    height: 16,
+    textAutoResize: 'WIDTH_AND_HEIGHT',
+    layoutPositioning: 'AUTO',
+    resize(w, h) { this.width = w; this.height = h; },
+    ...opts,
+  };
+  return t;
+}
+
+function frame(opts: Partial<StubFrame> & { children?: (StubFrame | StubText)[] } = {}): StubFrame {
+  const f: StubFrame = {
+    type: 'FRAME',
+    layoutMode: 'HORIZONTAL',
+    primaryAxisAlignItems: 'SPACE_BETWEEN',
+    primaryAxisSizingMode: 'FIXED',
+    counterAxisSizingMode: 'AUTO',
+    layoutAlign: 'INHERIT',
+    width: 470,
+    height: 64,
+    itemSpacing: 8,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    layoutPositioning: 'AUTO',
+    children: [],
+    resize(w, h) { this.width = w; this.height = h; },
+    ...opts,
+  };
+  return f;
+}
+
+const constrain = constrainSingleHorizontalTextChild as unknown as (n: StubFrame | StubText) => void;
+
+// ---------------------------------------------------------------------------
+// Original case: direct TEXT next to a non-text sibling — preserved
+// ---------------------------------------------------------------------------
+
+{
+  const direct = text(400);
+  const button = frame({ width: 100, primaryAxisSizingMode: 'AUTO', primaryAxisAlignItems: 'MIN' });
+  const row = frame({ width: 460, children: [direct, button] });
+  constrain(row);
+  assert.equal(direct.width, 460 - 100 - 8, 'direct TEXT shrinks to available width (preserved behavior)');
+  assert.equal(direct.textAutoResize, 'HEIGHT', 'direct TEXT pinned to HEIGHT so it wraps vertically');
+}
+
+// ---------------------------------------------------------------------------
+// New case: text-bearing wrapper (frame with two paragraph frames inside)
+// ---------------------------------------------------------------------------
+
+{
+  // Wrapper that mirrors shadcn's `<div><p>Title</p><p>Description…</p></div>`
+  // shape: a VERTICAL frame containing two paragraph frames, each holding a
+  // single TEXT node. Both paragraphs are at their one-line HUG width before
+  // the stabilizer runs.
+  const titleText = text(150);
+  const descText = text(400);
+  const titleParagraph = frame({
+    layoutMode: 'VERTICAL',
+    primaryAxisAlignItems: 'MIN',
+    width: 150,
+    height: 20,
+    children: [titleText],
+  });
+  const descParagraph = frame({
+    layoutMode: 'VERTICAL',
+    primaryAxisAlignItems: 'MIN',
+    width: 400,
+    height: 16,
+    children: [descText],
+  });
+  const wrapper = frame({
+    layoutMode: 'VERTICAL',
+    primaryAxisAlignItems: 'MIN',
+    width: 400,
+    height: 40,
+    children: [titleParagraph, descParagraph],
+  });
+  // The "button" sibling stays HUG — Figma equivalent of a `<Button>`.
+  const buttonFrame = frame({ width: 120, primaryAxisSizingMode: 'AUTO', primaryAxisAlignItems: 'MIN' });
+  const row = frame({ width: 470, children: [wrapper, buttonFrame] });
+  constrain(row);
+
+  const expectedAvailable = 470 - 120 - 8;  // 342
+  assert.equal(wrapper.width, expectedAvailable, 'text-bearing wrapper shrinks to available width');
+  assert.equal(
+    wrapper.counterAxisSizingMode,
+    'FIXED',
+    'wrapper counter-axis sizing pinned to FIXED so text wraps within it instead of pushing it back open',
+  );
+  assert.equal(
+    wrapper.layoutAlign,
+    'INHERIT',
+    'wrapper layoutAlign set to INHERIT so it does not also stretch in the cross-axis',
+  );
+  assert.equal(titleText.width, expectedAvailable, 'TEXT inside paragraph 1 sized to available width');
+  assert.equal(titleText.textAutoResize, 'HEIGHT', 'TEXT inside paragraph 1 pinned to HEIGHT');
+  assert.equal(descText.width, expectedAvailable, 'TEXT inside paragraph 2 sized to available width');
+  assert.equal(descText.textAutoResize, 'HEIGHT', 'TEXT inside paragraph 2 pinned to HEIGHT — this is the description that was overlapping the button');
+}
+
+// ---------------------------------------------------------------------------
+// Bail-out: no overflow → leave widths alone
+// ---------------------------------------------------------------------------
+
+{
+  const t = text(100);
+  const sibling = frame({ width: 100, primaryAxisSizingMode: 'AUTO' });
+  const row = frame({ width: 460, children: [t, sibling] });
+  constrain(row);
+  assert.equal(t.width, 100, 'fitting content untouched — keeps the SPACE_BETWEEN gap');
+  assert.equal(t.textAutoResize, 'WIDTH_AND_HEIGHT', 'fitting TEXT keeps its default autoResize');
+}
+
+// ---------------------------------------------------------------------------
+// Bail-out: two text-bearing children — ambiguous which to shrink
+// ---------------------------------------------------------------------------
+
+{
+  const a = text(300);
+  const b = text(300);
+  const row = frame({ width: 460, children: [a, b] });
+  constrain(row);
+  assert.equal(a.width, 300, 'two text children → ambiguous, helper bails (matches CSS where both would shrink proportionally)');
+  assert.equal(b.width, 300, 'second text also untouched in ambiguous case');
+}
+
+// ---------------------------------------------------------------------------
+// Bail-out: CENTER alignment is intentional (CTA rows)
+// ---------------------------------------------------------------------------
+
+{
+  const t = text(400);
+  const sibling = frame({ width: 100, primaryAxisSizingMode: 'AUTO' });
+  const row = frame({
+    width: 460,
+    primaryAxisAlignItems: 'CENTER',
+    children: [t, sibling],
+  });
+  constrain(row);
+  assert.equal(t.width, 400, 'CENTER rows preserve symmetry — text is not shrunk so siblings stay visually centered');
+}
+
+// ---------------------------------------------------------------------------
+// Bail-out: parent itself is HUG — width not known, no constraint to apply
+// ---------------------------------------------------------------------------
+
+{
+  const t = text(400);
+  const sibling = frame({ width: 100, primaryAxisSizingMode: 'AUTO' });
+  const row = frame({
+    width: 460,
+    primaryAxisSizingMode: 'AUTO',
+    children: [t, sibling],
+  });
+  constrain(row);
+  assert.equal(t.width, 400, 'AUTO-width parent → no constraint applied (parent would just grow with kids)');
+}
+
+console.log('horizontal-text-shrink-regression: PASS');

package/scanner/imported-array-map-regression.ts

@@ -0,0 +1,195 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: `.map()` over a NAMED imported array must expand into N
+ * JSX children, not fall through to the placeholder-iteration path.
+ *
+ * History: greenhouse-app's `MarketPriceCard` renders its timeframe row
+ * with
+ *
+ *     import { PRICE_CHART_TIMEFRAMES } from "~/domains/perps/constants";
+ *     ...
+ *     {PRICE_CHART_TIMEFRAMES.map((option) => (
+ *       <Button variant={timeframe === option.value ? "default" : "outline"}>
+ *         {option.label}
+ *       </Button>
+ *     ))}
+ *
+ * `findArrayValue` only inspected the current source file's variable
+ * declarations + default JSON imports. Named imports from a TypeScript
+ * file (`export const PRICE_CHART_TIMEFRAMES = [...]` in
+ * `~/domains/perps/constants.ts`) were invisible. The `.map()` fell
+ * through to the "no array found" branch and emitted ONE synthetic
+ * placeholder iteration — so Figma rendered zero buttons.
+ *
+ * Fix: `findArrayInNamedImports` follows named imports to the source
+ * file via `resolveImportedComponentPath`, opens the file, and recurses
+ * into `findArrayValue` against the imported source. Wired into
+ * `findArrayValue` after the JSON-import branch.
+ *
+ * Generalizes to ANY named-imported const array, not just chart
+ * timeframes — covers role lists, theme enums, navigation items, etc.
+ */
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  content?: string;
+  props?: Record<string, unknown>;
+  children?: JsxNodeLike[];
+}
+
+interface TestScannerView {
+  project: import('ts-morph').Project;
+  extractComponentJsxTree: (
+    sourceFile: import('ts-morph').SourceFile,
+    componentName: string,
+  ) => JsxNodeLike | null;
+}
+
+function makeScanner(): TestScannerView {
+  return new ComponentScanner({
+    componentPaths: [],
+    filePattern: '*.tsx',
+    exclude: [],
+  }) as unknown as TestScannerView;
+}
+
+function fixturePath(relative: string): string {
+  return path.resolve(process.cwd(), 'tools/figma-plugin/scanner/__fixtures__', relative);
+}
+
+function findAllElements(node: JsxNodeLike | null, tag: string, out: JsxNodeLike[] = []): JsxNodeLike[] {
+  if (!node || node.type !== 'element') return out;
+  if (node.tagName === tag) out.push(node);
+  for (const child of node.children || []) findAllElements(child, tag, out);
+  return out;
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: relative-path named import (`./constants`). Asserts `.map()` over
+// the imported array expands into N JSX elements with the right label text.
+// ---------------------------------------------------------------------------
+{
+  scanner.project.createSourceFile(
+    fixturePath('imported-array/constants.ts'),
+    `
+      export const PRICE_CHART_TIMEFRAMES: Array<{ label: string; value: string }> = [
+        { label: "Tick", value: "tick" },
+        { label: "1h", value: "1h" },
+        { label: "1d", value: "1d" },
+      ];
+    `,
+    { overwrite: true },
+  );
+
+  const file = scanner.project.createSourceFile(
+    fixturePath('imported-array/Card.tsx'),
+    `
+      import { PRICE_CHART_TIMEFRAMES } from "./constants";
+      export function Card() {
+        return (
+          <div>
+            {PRICE_CHART_TIMEFRAMES.map((option) => (
+              <button data-key={option.value}>{option.label}</button>
+            ))}
+          </div>
+        );
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const buttons = findAllElements(tree, 'button');
+  assert.equal(
+    buttons.length,
+    3,
+    `expected 3 buttons from the named-imported array .map(); got ${buttons.length}`,
+  );
+  const labels = buttons
+    .map((b) => (b.children || []).map((c) => c.content ?? '').join(''))
+    .join('|');
+  assert.ok(
+    labels.includes('Tick') && labels.includes('1h') && labels.includes('1d'),
+    `expected each button's text child to come from option.label; got "${labels}"`,
+  );
+  const keys = buttons.map((b) => b.props?.['data-key']).join(',');
+  assert.equal(
+    keys,
+    'tick,1h,1d',
+    `expected data-key props to come from option.value; got "${keys}"`,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: aliased named import (`import { Foo as Bar } from "./x"`). The
+// scanner must follow the imported name even when locally renamed.
+// ---------------------------------------------------------------------------
+{
+  scanner.project.createSourceFile(
+    fixturePath('imported-array/aliased-constants.ts'),
+    `
+      export const ROLES = [
+        { id: "admin", label: "Admin" },
+        { id: "viewer", label: "Viewer" },
+      ];
+    `,
+    { overwrite: true },
+  );
+
+  const file = scanner.project.createSourceFile(
+    fixturePath('imported-array/Aliased.tsx'),
+    `
+      import { ROLES as RolesList } from "./aliased-constants";
+      export function Aliased() {
+        return (
+          <ul>
+            {RolesList.map((r) => <li data-id={r.id}>{r.label}</li>)}
+          </ul>
+        );
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Aliased');
+  assert.ok(tree, 'Aliased must produce a tree');
+  const items = findAllElements(tree, 'li');
+  assert.equal(items.length, 2, `expected 2 <li> from aliased import .map(); got ${items.length}`);
+  const ids = items.map((b) => b.props?.['data-id']).join(',');
+  assert.equal(ids, 'admin,viewer', `expected ids resolved through the alias; got "${ids}"`);
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: unresolvable import (path doesn't exist on disk) MUST NOT crash.
+// `.map()` falls through to the existing placeholder-iteration path. Lock the
+// graceful degradation so a future change can't turn this into a hard error.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('imported-array/Unresolvable.tsx'),
+    `
+      import { NOPE } from "./does-not-exist";
+      export function Unresolvable() {
+        return <div>{NOPE.map((x) => <span>{x.label}</span>)}</div>;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Unresolvable');
+  assert.ok(tree, 'must not throw on an unresolvable import');
+  // Should produce the placeholder iteration (one synthetic <span>) — the
+  // existing fallback path. Just assert we got *something* without
+  // checking the placeholder shape, which is implementation-detail.
+  const spans = findAllElements(tree, 'span');
+  assert.ok(spans.length >= 0, 'should not throw');
+}
+
+console.log('imported-array-map-regression: PASS (3 cases)');

package/scanner/inline-flex-regression.ts

@@ -93,6 +93,7 @@ function runRegression(): void {
   blockFlowCard.layoutMode = 'VERTICAL';
   blockFlowCard.width = 600;
   blockFlowCard.primaryAxisSizingMode = 'FIXED';
+  blockFlowCard.counterAxisSizingMode = 'FIXED';
   setFrameCrossAlign(blockFlowCard as unknown as FrameNode, 'MIN');
   setFrameFromBlockFlow(blockFlowCard as unknown as FrameNode, true);
 
@@ -117,6 +118,7 @@ function runRegression(): void {
   blockFlowCard2.layoutMode = 'VERTICAL';
   blockFlowCard2.width = 600;
   blockFlowCard2.primaryAxisSizingMode = 'FIXED';
+  blockFlowCard2.counterAxisSizingMode = 'FIXED';
   setFrameCrossAlign(blockFlowCard2 as unknown as FrameNode, 'MIN');
   setFrameFromBlockFlow(blockFlowCard2 as unknown as FrameNode, true);
 
@@ -141,6 +143,7 @@ function runRegression(): void {
   blockFlowCard3.layoutMode = 'VERTICAL';
   blockFlowCard3.width = 600;
   blockFlowCard3.primaryAxisSizingMode = 'FIXED';
+  blockFlowCard3.counterAxisSizingMode = 'FIXED';
   setFrameCrossAlign(blockFlowCard3 as unknown as FrameNode, 'MIN');
   setFrameFromBlockFlow(blockFlowCard3 as unknown as FrameNode, true);
 
@@ -169,6 +172,7 @@ function runRegression(): void {
   flexFooter.layoutMode = 'VERTICAL';
   flexFooter.width = 400;
   flexFooter.primaryAxisSizingMode = 'FIXED';
+  flexFooter.counterAxisSizingMode = 'FIXED';
   setFrameCrossAlign(flexFooter as unknown as FrameNode, 'STRETCH');
   setFrameFromBlockFlow(flexFooter as unknown as FrameNode, false);
 
@@ -198,6 +202,7 @@ function runRegression(): void {
   centeredBlockParent.layoutMode = 'VERTICAL';
   centeredBlockParent.width = 600;
   centeredBlockParent.primaryAxisSizingMode = 'FIXED';
+  centeredBlockParent.counterAxisSizingMode = 'FIXED';
   setFrameCrossAlign(centeredBlockParent as unknown as FrameNode, 'MIN');
   setFrameFromBlockFlow(centeredBlockParent as unknown as FrameNode, true);
   setFrameInlineAlign(centeredBlockParent as unknown as FrameNode, 'CENTER');