inkbridge 0.1.0-beta.20 → 0.1.0-beta.21

package/scanner/jsx-prop-unresolved-regression.ts

@@ -0,0 +1,178 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: when a JSX attribute reads an unresolved identifier (e.g. a
+ * function parameter with no default), the scanner must OMIT the prop
+ * rather than serialise the identifier's source text as the value.
+ *
+ * History: DropdownMenuItem's body has
+ *
+ *     <DropdownMenuPrimitive.Item data-inset={inset} ... />
+ *
+ * where `inset?: boolean` is destructured from props with no default. In
+ * the Default story the consumer never passes `inset`, so its runtime
+ * value is `undefined` — React would render NO `data-inset` attribute.
+ *
+ * The scanner used to fall back to `expr.getText()` when an expression
+ * couldn't be resolved, which serialised the identifier name `"inset"`
+ * as the attribute value. The plugin's variant engine then treated
+ * `props["data-inset"] === "inset"` as "data-inset is present", which
+ * activated every `data-[inset]:` utility. The visible symptom: every
+ * DropdownMenuItem got `data-[inset]:pl-8` (32px left padding) even when
+ * no item was `inset`, leaving them indented like checkbox/radio items.
+ *
+ * The fix: omit the prop when the expression doesn't resolve. Matches
+ * React's runtime behaviour for `data-x={undefined}` — no attribute is
+ * emitted, so no variant predicate matches.
+ *
+ * This file locks the contract at the boundary the variant engine reads
+ * from — the props object on the JSX node.
+ */
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: 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 findElement(node: JsxNodeLike | null, tag: string): JsxNodeLike | null {
+  if (!node || node.type !== 'element') return null;
+  if (node.tagName === tag) return node;
+  for (const child of node.children || []) {
+    const found = findElement(child, tag);
+    if (found) return found;
+  }
+  return null;
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: unresolved boolean-prop identifier — the DropdownMenuItem pattern.
+// `inset` is a destructured parameter with no default. The data-attribute
+// expression `data-inset={inset}` MUST be omitted, not serialised as
+// "inset".
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('unresolved-data-attr.tsx'),
+    `
+      // The className would normally include "data-[inset]:pl-8" — omitted
+      // from this fixture because the regression asserts on the props map,
+      // not on class extraction, and inlining the class string trips the
+      // workspace lint (suggestCanonicalClasses) for what is intentionally
+      // a verbatim shadcn-shaped fixture.
+      export function DropdownMenuItem({ inset }: { inset?: boolean }) {
+        return (
+          <div
+            data-slot="dropdown-menu-item"
+            data-inset={inset}
+            data-variant="default"
+          />
+        );
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'DropdownMenuItem');
+  assert.ok(tree, 'DropdownMenuItem must produce a tree');
+  const root = findElement(tree, 'div');
+  assert.ok(root, 'must find the root <div>');
+
+  // Literal data-* attrs survive.
+  assert.equal(root.props?.['data-slot'], 'dropdown-menu-item', 'literal data-slot preserved');
+  assert.equal(root.props?.['data-variant'], 'default', 'literal data-variant preserved');
+
+  // The unresolved expression must NOT have been serialised as the
+  // identifier name. Either the key is absent, or the value is some
+  // explicit "absent" sentinel — never the identifier text "inset".
+  const insetValue = root.props?.['data-inset'];
+  assert.notEqual(
+    insetValue,
+    'inset',
+    "data-inset must NOT serialise to the unresolved identifier's source text"
+  );
+  // Stronger contract: the key should be absent. React renders no
+  // attribute for `data-x={undefined}`, and that's what the variant
+  // engine needs to see for the predicate to NOT match.
+  assert.ok(
+    !Object.prototype.hasOwnProperty.call(root.props || {}, 'data-inset'),
+    'data-inset key must be omitted when the value expression is unresolved'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: unresolved string-prop identifier — same rule, different shape.
+// `<input placeholder={placeholder}>` where `placeholder` is unresolved
+// shouldn't end up with `placeholder="placeholder"` (the identifier name)
+// in the rendered tree.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('unresolved-string-attr.tsx'),
+    `
+      export function Field({ placeholder }: { placeholder?: string }) {
+        return <input placeholder={placeholder} />;
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Field');
+  assert.ok(tree, 'Field must produce a tree');
+  const input = findElement(tree, 'input');
+  assert.ok(input, 'must find <input>');
+  assert.ok(
+    !Object.prototype.hasOwnProperty.call(input.props || {}, 'placeholder'),
+    'placeholder key must be omitted when the value identifier is unresolved'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: literal string attribute survives — sanity check that this fix
+// only suppresses *unresolved* expressions, not the literal-attr path.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('literal-attr.tsx'),
+    `
+      export function LiteralAttr() {
+        return <div data-variant="primary" data-slot="root" />;
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'LiteralAttr');
+  assert.ok(tree, 'LiteralAttr must produce a tree');
+  const div = findElement(tree, 'div');
+  assert.ok(div, 'must find <div>');
+  assert.equal(div.props?.['data-variant'], 'primary', 'literal data-variant survives');
+  assert.equal(div.props?.['data-slot'], 'root', 'literal data-slot survives');
+}
+
+console.log('jsx-prop-unresolved-regression: PASS (3 cases)');

package/scanner/local-const-className-regression.ts

@@ -0,0 +1,331 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: function-body-local `const` declarations whose initializer
+ * depends on a prop value must be resolved when the identifier is
+ * referenced in a child JSX `className`. Without this, the common pattern
+ *
+ *     const StatusPill = ({ sourceLabel }) => {
+ *       const dotClass =
+ *         sourceLabel === "db"   ? "bg-emerald-500"
+ *       : sourceLabel === "live" ? "bg-sky-400"
+ *                                : "bg-muted-foreground";
+ *       return <span className={cn("h-2 w-2 rounded-full", dotClass)} />;
+ *     };
+ *
+ * collapses to just `"h-2 w-2 rounded-full"` in the scanned output —
+ * the conditional color silently disappears.
+ *
+ * History: the inkbridge greenhouse-app `DataSourcesCard` shipped this
+ * pattern for its source-status pill. Stories passed `overallSourceLabel:
+ * "live"`, the runtime evaluated `dotClass = "bg-sky-400"`, but Figma
+ * rendered every pill with a black dot (the `bg-muted-foreground` fallback
+ * was being picked up incorrectly because the `cn(base, dotClass)` call
+ * lost the `dotClass` argument entirely).
+ *
+ * Root cause: `resolveExpressionValue` looked up identifiers in
+ * `propsContext` (function params), then fell back to
+ * `SourceFile.getVariableDeclaration` — which only searches MODULE-LEVEL
+ * declarations. Function-body `const`s were invisible.
+ *
+ * Fix: walk ancestor scopes (Block / CaseClause / DefaultClause) from the
+ * identifier site outward and resolve the matching `const`'s initializer
+ * against the current `propsContext`. This is the universal version of the
+ * pattern — applies to any local-const-derived className, not just pill
+ * colors.
+ */
+
+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 findElement(node: JsxNodeLike | null, tag: string): JsxNodeLike | null {
+  if (!node || node.type !== 'element') return null;
+  if (node.tagName === tag) return node;
+  for (const child of node.children || []) {
+    const found = findElement(child, tag);
+    if (found) return found;
+  }
+  return null;
+}
+
+function classList(node: JsxNodeLike | null): string[] {
+  const cls = node?.props?.className;
+  if (typeof cls !== 'string') return [];
+  return cls.split(/\s+/).filter(Boolean);
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: the canonical StatusPill shape. A wrapper component renders a
+// local-defined inner component with a literal prop value. The inner has a
+// local `const dotClass = sourceLabel === "..." ? "class" : ...` whose
+// resolved class must appear in the rendered `<span>`'s className.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-status-pill.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const StatusPill = ({ sourceLabel }: { sourceLabel: "db" | "live" | "inactive" }) => {
+        const dotClass =
+          sourceLabel === "db"
+            ? "bg-emerald-500"
+            : sourceLabel === "live"
+              ? "bg-sky-400"
+              : "bg-muted-foreground";
+        return <span data-slot="dot" className={cn("h-2 w-2 rounded-full", dotClass)} />;
+      };
+
+      export function Card() {
+        return <StatusPill sourceLabel="live" />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const dot = findElement(tree, 'span');
+  assert.ok(dot, 'must find the rendered <span>');
+  const classes = classList(dot);
+  assert.ok(
+    classes.includes('bg-sky-400'),
+    `dot must inherit bg-sky-400 from the "live" branch of the local-const ternary; got: ${classes.join(' ')}`,
+  );
+  assert.ok(classes.includes('h-2'), 'base utilities must survive cn() resolution');
+  assert.ok(classes.includes('rounded-full'), 'base utilities must survive cn() resolution');
+  // The non-chosen branches must NOT appear.
+  assert.ok(!classes.includes('bg-emerald-500'), 'losing branch "db" must not appear');
+  assert.ok(!classes.includes('bg-muted-foreground'), 'losing branch fallback must not appear');
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: literal pass-through with a different prop name. Verifies the
+// resolver picks the right branch when a wrapper forwards a literal value
+// (the StatusPill shape but a different name, to catch regressions tied to
+// hard-coded identifier matching).
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-passthrough.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const StatusPill = ({ tone }: { tone: "ok" | "warn" }) => {
+        const dotClass = tone === "warn" ? "bg-amber-500" : "bg-emerald-500";
+        return <span className={cn("dot", dotClass)} />;
+      };
+
+      export function Card() {
+        return <StatusPill tone="warn" />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const dot = findElement(tree, 'span');
+  assert.ok(dot, 'must find the rendered <span>');
+  const classes = classList(dot);
+  assert.ok(
+    classes.includes('bg-amber-500'),
+    `the "warn" branch must be selected; got: ${classes.join(' ')}`,
+  );
+  assert.ok(!classes.includes('bg-emerald-500'), 'the losing branch must not appear');
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: forward-reference TDZ. A const declared AFTER the JSX reference
+// site in the same scope MUST NOT be picked up — that would resolve a
+// real TDZ error as if it succeeded, masking bugs.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-tdz.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      export function Card() {
+        // Reference comes BEFORE the declaration — JS would throw at runtime.
+        // The scanner must not silently "fix" it.
+        // @ts-ignore — intentional TDZ for the test.
+        const out = <span className={cn("base", lateClass)} />;
+        const lateClass = "should-not-appear";
+        return out;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const span = findElement(tree, 'span');
+  assert.ok(span, 'must find <span>');
+  const classes = classList(span);
+  assert.ok(
+    !classes.includes('should-not-appear'),
+    'forward-declared const must not be resolved (TDZ semantics)',
+  );
+  assert.ok(classes.includes('base'), 'literal class survives');
+}
+
+// ---------------------------------------------------------------------------
+// Case 4: cycle protection. `const A = B` and `const B = A` must not
+// infinite-loop — both should resolve to undefined and the className
+// should fall back to just the literal base.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-cycle.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      export function Card() {
+        const A = B;
+        const B = A;
+        return <span className={cn("base", A)} />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const span = findElement(tree, 'span');
+  assert.ok(span, 'must find <span>');
+  const classes = classList(span);
+  assert.ok(classes.includes('base'), 'literal class survives cycle protection');
+  // A and B are mutually recursive — neither should resolve to a literal
+  // string. The cn() call should silently drop the unresolved arg.
+  assert.equal(classes.length, 1, `only the literal "base" should remain; got: ${classes.join(' ')}`);
+}
+
+// ---------------------------------------------------------------------------
+// Case 5: scope-locality. Two functions in the same file both have a local
+// `const colorClass = ...` with different values. The resolver must pick
+// the one in the enclosing scope, not bleed across functions.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-scope.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const Inner = () => {
+        const colorClass = "text-sky-500";
+        return <span data-which="inner" className={cn("a", colorClass)} />;
+      };
+
+      export function Card() {
+        const colorClass = "text-rose-500";
+        return (
+          <div>
+            <span data-which="outer" className={cn("b", colorClass)} />
+            <Inner />
+          </div>
+        );
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+
+  // Find the two <span>s by their data-which marker.
+  function findByMarker(node: JsxNodeLike | null, value: string): JsxNodeLike | null {
+    if (!node || node.type !== 'element') return null;
+    if (node.props?.['data-which'] === value) return node;
+    for (const child of node.children || []) {
+      const found = findByMarker(child, value);
+      if (found) return found;
+    }
+    return null;
+  }
+  const outer = findByMarker(tree, 'outer');
+  const inner = findByMarker(tree, 'inner');
+  assert.ok(outer, 'outer <span> must be present');
+  assert.ok(inner, 'inner <span> must be present');
+
+  const outerClasses = classList(outer);
+  const innerClasses = classList(inner);
+  assert.ok(outerClasses.includes('text-rose-500'), `outer scope wins for outer span; got: ${outerClasses.join(' ')}`);
+  assert.ok(!outerClasses.includes('text-sky-500'), 'inner-scope value must not bleed into outer span');
+  assert.ok(innerClasses.includes('text-sky-500'), `inner scope wins for inner span; got: ${innerClasses.join(' ')}`);
+  assert.ok(!innerClasses.includes('text-rose-500'), 'outer-scope value must not be picked when inner scope shadows');
+}
+
+// ---------------------------------------------------------------------------
+// Case 6: text-children expressions. `<span>{statusText}</span>` where
+// `statusText` is a local-const ternary must render the resolved text.
+// History: the original DataSourcesCard fix landed for className identifiers
+// but the main `buildJsxTree` flow had a separate, narrower lookup for JSX
+// text-children that only checked module-level vars — so the "Live - DB"
+// label inside the StatusPill was missing even after the dot color worked.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-text-children.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const StatusPill = ({ sourceLabel }: { sourceLabel: "db" | "live" | "inactive" }) => {
+        const statusText =
+          sourceLabel === "db"
+            ? "Live - DB"
+            : sourceLabel === "live"
+              ? "Live - API"
+              : "Inactive";
+        return <span data-slot="label">{statusText}</span>;
+      };
+
+      export function Card() {
+        return <StatusPill sourceLabel="db" />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const span = findElement(tree, 'span');
+  assert.ok(span, 'must find <span>');
+  const textChildren = (span.children || []).filter((c) => c.type === 'text');
+  const combined = textChildren.map((c) => c.content ?? '').join('');
+  assert.ok(
+    combined.includes('Live - DB'),
+    `text child must resolve to "Live - DB" via local-const lookup; got: ${JSON.stringify(textChildren)}`,
+  );
+}
+
+console.log('local-const-className-regression: PASS (6 cases)');

package/scanner/ring-utility-regression.ts

@@ -96,11 +96,32 @@ assert.equal(parseRingColor('ring-[3px]', colorGroup), null, 'arbitrary widths a
 }
 
 {
-  // Color without width still produces a ring at the default width (3px).
-  // This matches Tailwind v3 behavior where `ring-primary` implies `ring`.
+  // Color WITHOUT an explicit width is a CSS no-op — Tailwind's
+  // `ring-COLOR` sets `--tw-ring-color` but the ring stays
+  // invisible until a width utility is added. shadcn's
+  // invalid-input pattern relies on this:
+  //   `aria-invalid:ring-destructive/20 focus-visible:ring-[3px]`
+  // → tinted ring when invalid, only visible (3px) when focused.
+  // Previously this helper defaulted to width 3 when ANY ring color
+  // was present — so the State Matrix `error` variant rendered with
+  // a doubled red ring outside the destructive border instead of
+  // just the border. Now: color-only → null (no ring).
   const ring = getRingInfoFromClasses(['ring-primary'], colorGroup);
-  assert.ok(ring, 'color implies default width');
-  assert.equal(ring!.width, 3, 'default 3px when color is the only signal');
+  assert.equal(ring, null, 'color without width → null (no ring)');
+}
+
+{
+  // Same contract for the shadcn invalid-input pattern: tinted color,
+  // no width, no visible ring.
+  const ring = getRingInfoFromClasses(['ring-destructive', 'border-destructive'], colorGroup);
+  assert.equal(ring, null, 'color + non-ring class without width → null');
+}
+
+{
+  // Color + explicit width DOES render the ring.
+  const ring = getRingInfoFromClasses(['ring-destructive', 'ring-[3px]'], colorGroup);
+  assert.ok(ring, 'color + arbitrary width → ring renders');
+  assert.equal(ring!.width, 3, '3px from `ring-[3px]`');
 }
 
 {

package/scanner/state-classification-regression.ts

@@ -134,4 +134,42 @@ const scanner = makeScanner();
   );
 }
 
+// ---------------------------------------------------------------------------
+// Case 4: shadcn-style Label — only carries `peer-disabled:` and
+// `group-data-[disabled=true]:` modifiers (passive reactions to a
+// parent's state, NOT its own state axis). Must NOT be classified as
+// `state` — otherwise the runtime renders it via the state-master
+// path, which has no slot for the label's text children, and a story
+// like `<Dialog>... <Label>Name</Label> <Input/> ...</Dialog>` ends up
+// with the labels invisible. Lock this in so a future widening of the
+// state-modifier list doesn't silently re-break it.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('passive-label.tsx'),
+    `
+      export function Label({ className, ...props }: any) {
+        return (
+          <label
+            className={
+              "flex items-center gap-2 text-sm leading-none font-medium select-none " +
+              "group-data-[disabled=true]:pointer-events-none " +
+              "group-data-[disabled=true]:opacity-50 " +
+              "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+            }
+            {...props}
+          />
+        );
+      }
+    `,
+    { overwrite: true }
+  );
+  const result = scanner.analyzeState(file, file.getFilePath());
+  assert.equal(
+    result,
+    null,
+    'A component whose only "state" modifiers are passive `group-*:` / `peer-*:` reactions must NOT be classified as `state` — it has no own-element state axis, and the runtime would lose its text children when rendering via the state-master path.',
+  );
+}
+
 console.log('state-classification-regression: ok');

package/scanner/stretch-to-parent-width-regression.ts

@@ -110,4 +110,38 @@ assert.equal(
   'w-full suppresses stretch (the post-normalisation form of size-full)',
 );
 
-console.log('stretch-to-parent-width-regression: PASS (14 cases)');
+// DropdownMenuItem class shape: scanner emits these wrappers as
+// `kind: 'component'` with tagName `DropdownMenuPrimitive.Item`. The
+// ui-builder wrapperFrame branch calls `shouldStretchToParentWidth('div',
+// classes)` to mirror the kind:'element' decision — without it, items
+// inside a `w-56` Content stay HUG-width. Lock the predicate so the call
+// site keeps producing true for the canonical Item / Label class lists.
+assert.equal(
+  shouldStretchToParentWidth('div', [
+    'focus:bg-accent', 'focus:text-accent-foreground',
+    'relative', 'flex', 'cursor-default', 'items-center', 'gap-2',
+    'rounded-sm', 'px-2', 'py-1.5', 'text-sm',
+    'data-[disabled]:opacity-50', 'data-[inset]:pl-8',
+  ]),
+  true,
+  'DropdownMenuItem class list → stretches in vertical block-flow parent',
+);
+assert.equal(
+  shouldStretchToParentWidth('div', [
+    'px-2', 'py-1.5', 'text-sm', 'font-medium', 'data-[inset]:pl-8',
+  ]),
+  true,
+  'DropdownMenuLabel class list → stretches in vertical block-flow parent',
+);
+// DropdownMenuContent itself has `min-w-[8rem]` which IS a width signal —
+// so Content does NOT stretch (the consumer's `w-56` sets its width
+// instead). Lock that boundary.
+assert.equal(
+  shouldStretchToParentWidth('div', [
+    'bg-popover', 'min-w-[8rem]', 'rounded-md', 'border', 'p-1', 'shadow-md',
+  ]),
+  false,
+  'DropdownMenuContent (min-w-* present) → does NOT stretch — consumer width wins',
+);
+
+console.log('stretch-to-parent-width-regression: PASS (17 cases)');