cursedbelt 5.46.2 → 5.47.0

package/scripts/demoCoverage.ts

@@ -0,0 +1,124 @@
+/**
+ * `bun run demo:coverage [--prune]` — every exported component has a demo, or it does not ship.
+ *
+ * ## The trap this exists for
+ *
+ * Forge task 2466 (2026-10-02) set out to review every exported component against the demo, "the
+ * visual contract", and its first step was the list. Generated from the export map rather than
+ * remembered, it said **242 of 383** exported components appeared in no demo page at all —
+ * `Tabs`, `TopBar`, `Menu`, the whole auth kit, chat, calendar — so no review, matrix or design
+ * audit had ever drawn them, and nothing stopped the 384th arriving the same way.
+ *
+ * ## What counts
+ *
+ * A COMPONENT is a capitalised value export of a `./react*` subpath (`package.json` `exports`,
+ * through its `source` file) whose type is a React component: an exotic component (`memo`,
+ * `forwardRef`, `lazy`) or a function returning an element. A component is DEMOED when a file under
+ * `demo/` (not `demo/dist/`) names it outside its imports and comments — a demo that imports a
+ * component and never renders it has not shown it.
+ *
+ * `demoCoverage.baseline` lists the ones that had no demo when this was written. It is a CEILING:
+ * a component missing from the demo and from the baseline fails; a baseline entry that now HAS a
+ * demo (or is no longer exported) fails too, so the list only shrinks — `--prune` removes those,
+ * and refuses to add anything.
+ */
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import * as ts from "typescript";
+
+const ROOT = join(import.meta.dir, "..");
+export const BASELINE = join(ROOT, "demoCoverage.baseline");
+
+/** Every component name → the subpaths that export it. */
+export function exportedComponents(root: string = ROOT): Map<string, string[]> {
+	const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as { exports: Record<string, unknown> };
+	const entries: [string, string][] = [];
+	for (const [subpath, target] of Object.entries(pkg.exports)) {
+		const source = typeof target === "object" && target !== null ? (target as { source?: unknown }).source : undefined;
+		if (subpath.startsWith("./react") && typeof source === "string") entries.push([subpath, join(root, source)]);
+	}
+	const program = ts.createProgram(
+		entries.map(([, file]) => file),
+		{
+			jsx: ts.JsxEmit.ReactJSX,
+			module: ts.ModuleKind.ESNext,
+			target: ts.ScriptTarget.ES2022,
+			moduleResolution: ts.ModuleResolutionKind.Bundler,
+			allowImportingTsExtensions: true,
+			noEmit: true,
+			skipLibCheck: true,
+		},
+	);
+	const checker = program.getTypeChecker();
+	const found = new Map<string, string[]>();
+	for (const [subpath, file] of entries) {
+		const source = program.getSourceFile(file);
+		const module = source && checker.getSymbolAtLocation(source);
+		if (!module) continue;
+		for (const exported of checker.getExportsOfModule(module)) {
+			const name = exported.getName();
+			if (!/^[A-Z][a-z0-9]/.test(name)) continue;
+			const symbol = exported.flags & ts.SymbolFlags.Alias ? checker.getAliasedSymbol(exported) : exported;
+			const declaration = symbol.valueDeclaration;
+			if (!(symbol.flags & ts.SymbolFlags.Value) || !declaration) continue;
+			const type = checker.getTypeOfSymbolAtLocation(symbol, declaration);
+			const component =
+				/ExoticComponent|FC<|FunctionComponent/.test(checker.typeToString(type)) ||
+				type.getCallSignatures().some((s) => /Element|ReactNode|ReactPortal/.test(checker.typeToString(s.getReturnType())));
+			if (!component) continue;
+			found.set(name, [...(found.get(name) ?? []), subpath]);
+		}
+	}
+	return found;
+}
+
+/** Every demo source with its imports and comments taken out, as one text. */
+export function demoText(root: string = ROOT): string {
+	const files = [...new Bun.Glob("demo/**/*.{ts,tsx}").scanSync(root)].filter((f) => !f.startsWith("demo/dist/"));
+	return files
+		.map((f) =>
+			readFileSync(join(root, f), "utf8")
+				.replace(/\/\*[\s\S]*?\*\//g, "")
+				.replace(/(^|[^:])\/\/.*$/gm, "$1")
+				.replace(/^\s*import[\s\S]*?from\s+["'][^"']+["'];?/gm, ""),
+		)
+		.join("\n");
+}
+
+/** The components no demo names, sorted. */
+export function undemoed(components: ReadonlyMap<string, string[]>, text: string): string[] {
+	return [...components.keys()].filter((name) => !new RegExp(`\\b${name}\\b`).test(text)).sort();
+}
+
+export function readBaseline(file: string = BASELINE): string[] {
+	return readFileSync(file, "utf8")
+		.split("\n")
+		.map((l) => l.trim())
+		.filter((l) => l && !l.startsWith("#"));
+}
+
+/** What the check says: the new gaps (a fault), and the entries that have outlived their gap (also a fault). */
+export function compare(missing: readonly string[], baseline: readonly string[]): { added: string[]; stale: string[] } {
+	const now = new Set(missing);
+	const allowed = new Set(baseline);
+	return { added: missing.filter((n) => !allowed.has(n)), stale: baseline.filter((n) => !now.has(n)) };
+}
+
+if (import.meta.main) {
+	const components = exportedComponents();
+	const missing = undemoed(components, demoText());
+	const baseline = readBaseline();
+	const { added, stale } = compare(missing, baseline);
+	const prune = process.argv.includes("--prune");
+	if (prune && stale.length > 0) {
+		const text = readFileSync(BASELINE, "utf8");
+		const gone = new Set(stale);
+		writeFileSync(BASELINE, text.split("\n").filter((l) => !gone.has(l.trim())).join("\n"));
+		console.log(`pruned ${stale.length}: ${stale.join(", ")}`);
+	}
+	for (const name of added) console.error(`✗ ${name} (${components.get(name)?.join(", ")}) has no demo — add it to a demo/sections page before it ships.`);
+	if (!prune) for (const name of stale) console.error(`✗ ${name} is in demoCoverage.baseline but no longer needs to be — \`bun run demo:coverage --prune\`.`);
+	const faults = added.length + (prune ? 0 : stale.length);
+	console.log(`${components.size} exported components · ${components.size - missing.length} demoed · ${missing.length} without a demo (baseline ${baseline.length - (prune ? stale.length : 0)})`);
+	process.exit(faults > 0 ? 1 : 0);
+}

package/src/react/charts/IntervalTimeline.tsx

@@ -243,22 +243,24 @@ export function IntervalTimeline({
         </div>
       )}
 
-      <div className='flex justify-between text-caption text-muted-foreground tabular-nums'>
+      {/* The two ends of the axis never wrap ("02:30 / PM" at 390px), and the overflow note takes
+          its own full-width row instead of squeezing between them (forge task 2591). */}
+      <div className='flex flex-wrap justify-between gap-x-3 text-caption text-muted-foreground tabular-nums'>
         {/* Bands and markers are drawn `aria-hidden` and carry no `title` — a native
             tooltip does not exist on touch and cannot be themed (DESIGN.md §4). They
             are NAMED here instead, in text every reader gets. */}
-        <span>
+        <span className='whitespace-nowrap'>
           {formatTime(view.from)}
           {bands.length > 0 && ' · shaded = paused'}
           {markers.filter((m) => m.label).length > 0 &&
             ` · ${markers.filter((m) => m.label).map((m) => m.label).join(', ')} marked`}
         </span>
+        <span className='whitespace-nowrap'>{formatTime(view.to)}</span>
         {lanes.overflow > 0 && (
-          <span className='text-warning'>
+          <span className='w-full text-warning'>
             +{lanes.overflow} more not drawn — the chart stacks {maxLanes} lanes
           </span>
         )}
-        <span>{formatTime(view.to)}</span>
       </div>
     </div>
   );

package/src/react/chat/DateMarker.tsx

@@ -17,6 +17,16 @@ function formatMarkerDate(date: Date, now = new Date()): string {
   return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
 }
 
+/**
+ * The LOCAL calendar day as `YYYY-MM-DD` — the same day the label names. `toISOString()` is the
+ * UTC day, so a message at 19:00 in Chicago was labelled "Wednesday, July 1" and stamped
+ * `2026-07-02` (forge task 2591).
+ */
+function localDayKey(date: Date): string {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
 // ── Component ─────────────────────────────────────────────────────────────────
 
 export interface DateMarkerProps {
@@ -27,23 +37,29 @@ export interface DateMarkerProps {
 /**
  * Centered date-separator row inserted between messages from different calendar
  * days. Renders "Today", "Yesterday", or a full date ("Monday, July 1").
+ *
+ * A `separator` with the date as its name, not `aria-hidden`: in a transcript the day change is
+ * the only place a screen reader learns WHEN the messages below were sent (Slack and iMessage
+ * both announce it).
  */
 export function DateMarker({ date, className }: DateMarkerProps) {
   const d = date instanceof Date ? date : new Date(date);
   const label = formatMarkerDate(d);
-  const iso = d.toISOString().slice(0, 10);
+  const day = localDayKey(d);
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: an <hr> cannot hold the date it announces; a named separator role on the row is the labelled-divider pattern
     <div
-      data-chat-date={iso}
+      data-chat-date={day}
+      role='separator'
+      aria-label={label}
       className={cn('flex items-center gap-3 px-4 py-2', className)}
-      aria-hidden='true'
     >
-      <span className='h-px flex-1 bg-border' />
-      <time dateTime={iso} className='text-xs font-medium text-muted-foreground'>
+      <span aria-hidden className='h-px flex-1 bg-border' />
+      <time dateTime={day} className='text-xs font-medium text-muted-foreground'>
         {label}
       </time>
-      <span className='h-px flex-1 bg-border' />
+      <span aria-hidden className='h-px flex-1 bg-border' />
     </div>
   );
 }

package/src/react/chat/MessageThread.spec.tsx

@@ -122,9 +122,33 @@ describe('DateMarker', () => {
   });
 
   test('has data-chat-date attribute', () => {
-    const { container } = render(<DateMarker date={new Date('2026-07-02T00:00:00Z')} />);
+    const { container } = render(<DateMarker date={new Date(2026, 6, 2, 12)} />);
     expect(container.querySelector('[data-chat-date="2026-07-02"]')).toBeTruthy();
   });
+
+  test('stamps the LOCAL day the label names, at either end of it — not the UTC day', () => {
+    // `bun test` runs in UTC, where the local and UTC days agree and the bug cannot show — so the
+    // zone is set here: west of UTC the late message crosses into tomorrow's UTC day, east of it
+    // the early one falls back into yesterday's.
+    const zone = process.env.TZ;
+    try {
+      for (const [tz, hour] of [['America/Chicago', 23], ['Asia/Tokyo', 0]] as const) {
+        process.env.TZ = tz;
+        const { container, unmount } = render(<DateMarker date={new Date(2026, 6, 2, hour, 30)} />);
+        const marker = container.querySelector('[data-chat-date]');
+        expect(marker?.getAttribute('data-chat-date')).toBe('2026-07-02');
+        expect(marker?.querySelector('time')?.getAttribute('dateTime')).toBe('2026-07-02');
+        unmount();
+      }
+    } finally {
+      process.env.TZ = zone;
+    }
+  });
+
+  test('is a named separator a screen reader announces, not hidden from it', () => {
+    render(<DateMarker date={new Date()} />);
+    expect(screen.getByRole('separator', { name: 'Today' })).toBeTruthy();
+  });
 });
 
 // ── StatusMarker ──────────────────────────────────────────────────────────────

package/src/react/components/Button.spec.tsx

@@ -34,6 +34,17 @@ describe('Button', () => {
     expect(cls).toContain('h-[var(--control-h-md)]'); // md, the shared control-height token
   });
 
+  test('a link is unpadded text at every size, so it lines up with the text around it (task 2466)', () => {
+    for (const size of [undefined, 'sm', 'md', 'lg'] as const) {
+      const { getByRole, unmount } = render(<Button tooltip='L' variant='link' size={size}>L</Button>);
+      const cls = getByRole('button').className.split(/\s+/);
+      expect(cls).toContain('px-0');
+      expect(cls).toContain('h-auto');
+      expect(cls.some((c) => /^px-[1-9]/.test(c) || c.startsWith('h-[var(--control-h'))).toBe(false);
+      unmount();
+    }
+  });
+
   test('primary uses the saturated solid accent fill; destructive is quiet at rest', () => {
     const { getByRole, rerender } = render(<Button tooltip='P' variant='primary'>P</Button>);
     expect(getByRole('button').className).toContain('bg-accent-solid');

package/src/react/components/Button.tsx

@@ -119,6 +119,11 @@ export const buttonVariants = cva(
         'icon-lg': 'h-[var(--control-h-lg)] w-[var(--control-h-lg)] p-0 pointer-coarse:min-w-11',
       },
     },
+    // 🔴 A link is a TEXT link at every size (forge task 2466). `link`'s own `px-0 h-auto` came
+    // before the size's `px-3`/`px-4` and fixed height, so the size won the merge and every link
+    // button — sized or on the `md` default — drew a padded box: TotpEntry's "Use a recovery code
+    // instead" sat 12px in from the column every other row starts on.
+    compoundVariants: [{ variant: 'link', size: ['sm', 'md', 'lg'], class: 'h-auto px-0 py-0' }],
     defaultVariants: { variant: 'secondary', size: 'md' },
   },
 );

package/src/react/components/DataTable/DataTable.spec.tsx

@@ -568,3 +568,46 @@ describe('hidePagination shows every row', () => {
     expect(bodyRows(container).length).toBe(50);
   });
 });
+
+/**
+ * 🔴 Forge task 2577: apps/music's Length header read "LE…" at 390px. `headerIcon` paints a glyph
+ * instead of the label below a TABLE width, and the label stays the header's accessible name.
+ */
+describe('ColDef.headerIcon', () => {
+  const CLOCK = <svg data-testid='clock' />;
+  const WITH_ICON: ColDef<Person>[] = [
+    { key: 'name', label: 'Name', type: 'text', sortable: true },
+    { key: 'age', label: 'Length', type: 'number', sortable: true, headerIcon: CLOCK },
+    { key: 'nick', label: 'Plain', type: 'text', headerIcon: CLOCK },
+  ];
+
+  test('the glyph replaces the label below the table step; the label stays for assistive tech', () => {
+    const { container } = render(<DataTable columns={WITH_ICON} data={PEOPLE} />);
+    const heads = [...container.querySelectorAll('thead th')];
+    const length = heads.find((th) => th.textContent?.includes('Length')) as HTMLElement;
+    const label = length.querySelector('[data-cb-header-label]') as HTMLElement;
+    const icon = length.querySelector('[data-cb-header-icon]') as HTMLElement;
+    expect(label.className).toContain('@max-2xl:sr-only');
+    expect(icon.className).toContain('hidden @max-2xl:inline-flex');
+    expect(icon.getAttribute('aria-hidden')).not.toBeNull();
+    expect(icon.querySelector('[data-testid="clock"]')).not.toBeNull();
+    // A sortable header still sorts by its label's name, and stays a 44px target without it.
+    expect(length.querySelector('button')?.textContent).toContain('Length');
+    expect(length.querySelector('button')?.className).toContain('@max-2xl:min-w-11');
+
+    const plain = heads.find((th) => th.textContent?.includes('Plain')) as HTMLElement;
+    // A plain (unsortable) header swaps the same way.
+    expect(plain.querySelector('[data-cb-header-label]')?.className).toContain('@max-2xl:sr-only');
+  });
+
+  test('a column without one renders exactly as before', () => {
+    const { container } = render(<DataTable columns={COLUMNS} data={PEOPLE} />);
+    expect(container.querySelector('[data-cb-header-icon]')).toBeNull();
+    expect(container.querySelector('[data-cb-header-label]')).toBeNull();
+  });
+
+  test('the utility build carries every class the swap uses', async () => {
+    const css = await Bun.file(new URL('../../../styles-utilities.css', import.meta.url)).text();
+    for (const cls of ['sr-only', 'inline-flex', 'min-w-11', 'justify-center']) expect(css).toContain(`.\\@max-2xl\\:${cls}`);
+  });
+});

package/src/react/components/DataTable/DataTable.tsx

@@ -1171,6 +1171,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
             <SortHeader
               column={column}
               label={col.label}
+              icon={col.headerIcon}
               sortable={col.sortable}
               sortIndex={stack.length > 1 ? stack.findIndex((s) => s.id === col.key) : -1}
               onSort={() => toggleSortKey(col.key)}

package/src/react/components/DataTable/SortHeader.tsx

@@ -23,9 +23,36 @@ const withLabelTip = (label: string, children: ReactNode) => (
   </Tooltip>
 );
 
+/**
+ * `ColDef.headerIcon`'s swap below the table's 42rem step (`@max-2xl`; the table is the
+ * `@container`). The label goes `sr-only`, not `hidden`, so the header keeps its name for
+ * assistive tech at every width. One step only: each step costs every consuming app its CSS.
+ */
+const COMPACT_LABEL = '@max-2xl:sr-only';
+const COMPACT_ICON = 'hidden @max-2xl:inline-flex';
+/** A glyph and an arrow are ~30px; the label was what made the button wide enough to tap. */
+const COMPACT_BUTTON = ' @max-2xl:min-w-11 @max-2xl:justify-center';
+
+/** The label, and — with an icon — the glyph that replaces it on a narrow table. */
+function HeaderLabel({ label, icon }: { label: string; icon?: ReactNode }) {
+  if (icon == null) return <span className='min-w-0 truncate'>{label}</span>;
+  return (
+    <>
+      <span data-cb-header-label className={`min-w-0 truncate ${COMPACT_LABEL}`}>
+        {label}
+      </span>
+      <span data-cb-header-icon aria-hidden className={`shrink-0 items-center [&>svg]:size-3.5 ${COMPACT_ICON}`}>
+        {icon}
+      </span>
+    </>
+  );
+}
+
 export interface SortHeaderProps<TRow> {
   column: Column<TRow, unknown>;
   label: string;
+  /** `ColDef.headerIcon` — drawn instead of the label when the table is narrower than 42rem. */
+  icon?: ReactNode;
   sortable?: boolean;
   /**
    * This column's position in the sort STACK, or `-1` when it is not in one (or
@@ -58,6 +85,7 @@ export interface SortHeaderProps<TRow> {
 export function SortHeader<TRow>({
   column,
   label,
+  icon,
   sortable,
   sortIndex = -1,
   onSort,
@@ -69,8 +97,20 @@ export function SortHeader<TRow>({
   // that overflows a `<th>` paints on top of the NEXT header rather than
   // clipping, which reads as a rendering fault ("Sask"/"ACTEMPY" in orch's
   // fleet table, 2026-08-11). `title` keeps the full label one hover away.
-  if (!sortable) return withLabelTip(label, <span className='block truncate'>{label}</span>);
+  if (!sortable)
+    return withLabelTip(
+      label,
+      icon == null ? (
+        <span className='block truncate'>{label}</span>
+      ) : (
+        <span className='flex min-w-0 items-center'>
+          <HeaderLabel label={label} icon={icon} />
+        </span>
+      ),
+    );
   const sorted = column.getIsSorted();
+  // The design law's LAY-13 floor is 44px, and music's audit caught the bare glyph at 390 (task 2577).
+  const compact = icon == null ? '' : COMPACT_BUTTON;
   if (disabledReason)
     // Visible and explained, never hidden — and `aria-disabled` rather than `disabled`, because
     // a disabled button fires no pointer events and the reason could never be hovered.
@@ -81,9 +121,9 @@ export function SortHeader<TRow>({
         type='button'
         aria-disabled
         aria-label={`${label} — ${disabledReason}`}
-        className={`-mx-1 -my-2.5 inline-flex max-w-full cursor-not-allowed items-center gap-1 rounded px-1 py-2.5 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`}
+        className={`-mx-1 -my-2.5 inline-flex max-w-full cursor-not-allowed items-center gap-1 rounded px-1 py-2.5 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}${compact}`}
       >
-        <span className='min-w-0 truncate'>{label}</span>
+        <HeaderLabel label={label} icon={icon} />
       </button>,
     );
   return withLabelTip(
@@ -104,11 +144,11 @@ export function SortHeader<TRow>({
       // computed styles on orch's Fleet tab, 2026-08-12: `th` uppercase,
       // `button` none. Letter-spacing does inherit (0.55px on both), so only
       // the case needs restating.
-      className={`-mx-1 -my-2.5 inline-flex max-w-full items-center gap-1 rounded px-1 py-2.5 uppercase transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`}
+      className={`-mx-1 -my-2.5 inline-flex max-w-full items-center gap-1 rounded px-1 py-2.5 uppercase transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}${compact}`}
     >
       {/* min-w-0 so the label is what gives way in a narrow track — the sort
           arrow is the affordance and must survive at any width. */}
-      <span className='min-w-0 truncate'>{label}</span>
+      <HeaderLabel label={label} icon={icon} />
       {sorted === 'asc' ? (
         <ArrowUp className='size-3 shrink-0' aria-hidden />
       ) : sorted === 'desc' ? (

package/src/react/components/DataTable/types.ts

@@ -90,6 +90,16 @@ export interface ColDef<TRow = Record<string, unknown>> {
    * Applies to the grid; the card tiers already choose their own fields.
    */
   hideBelow?: 'sm' | 'md' | 'lg';
+  /**
+   * A glyph the header shows INSTEAD of its label when the table (its container) is narrower
+   * than 42rem — {@link hideBelow}'s `'sm'` step — Spotify's clock over the duration column. `label` stays the
+   * accessible name, the hover tip and the Columns-menu name; only the painted text gives way.
+   *
+   * 🔴 Why (forge task 2577): apps/music's Length column read "LE…" at 390px. "LENGTH" and its
+   * sort arrow need ~90px, and on a phone those pixels belong to the title, which is already
+   * truncating real titles. A truncated word is a header nobody can read; a glyph is one.
+   */
+  headerIcon?: ReactNode;
   /**
    * Drop order when the table is too NARROW for its declared tracks — HIGHER numbers go first.
    * Columns without one never drop. The table measures its own width and collapses the

package/src/react/components/DropdownMenu.spec.tsx

@@ -91,4 +91,30 @@ describe('DropdownMenu — a list of verbs in groups, destructive last (OVL-7)',
     const items = Array.from(open.querySelectorAll('[role="menuitem"]')).map((el) => el.textContent);
     expect(items.at(-1)).toBe('Delete');
   });
+
+  test('once one row can be checked, every row keeps its column — icons line up', () => {
+    // The player's ⋯ (forge task 2568): Keep offline and Tag are toggles, Share and Delete are
+    // not, and the toggles' check column pushed their icons 24px right of the others'.
+    render(
+      <DropdownMenu
+        items={[
+          { key: 'share', label: 'Share', icon: <span>s</span> },
+          { key: 'keep', label: 'Keep offline', icon: <span>k</span>, checked: false },
+          { key: 'del', label: 'Delete', icon: <span>d</span>, destructive: true },
+        ]}
+        trigger={<B>actions</B>}
+      />,
+    );
+    fireEvent.pointerDown(screen.getByText('actions'), { button: 0, ctrlKey: false });
+    const rows = Array.from((menu() as HTMLElement).querySelectorAll('[role^="menuitem"]')) as HTMLElement[];
+    expect(rows.map((row) => row.getAttribute('role'))).toEqual(['menuitem', 'menuitemcheckbox', 'menuitem']);
+    for (const row of rows) expect(row.className.split(/\s+/)).toContain('pl-8');
+  });
+
+  test('a menu with no row to check keeps no empty check column', () => {
+    render(<DropdownMenu items={[{ key: 'share', label: 'Share' }]} trigger={<B>actions</B>} />);
+    fireEvent.pointerDown(screen.getByText('actions'), { button: 0, ctrlKey: false });
+    const row = (menu() as HTMLElement).querySelector('[role="menuitem"]') as HTMLElement;
+    expect(row.className.split(/\s+/)).not.toContain('pl-8');
+  });
 });

package/src/react/components/DropdownMenu.tsx

@@ -155,11 +155,17 @@ export function DropdownMenu({
 
 function MenuSections({ items }: { items: readonly DropdownMenuItem[] }) {
   const sections = useMemo(() => arrangeMenuItems(items), [items]);
+  /*
+   * One row that can be checked gives every row of this menu the check column, as a native menu
+   * does: otherwise the toggles' icons sit 24px right of their neighbours' (the player's ⋯, forge
+   * task 2568). A submenu is its own menu and decides for itself.
+   */
+  const inset = items.some((item) => !item.divider && item.checked !== undefined);
   return sections.map((section, index) => (
     <Fragment key={section[0]?.key ?? index}>
       {index > 0 && <RDrop.Separator className='my-1 h-px bg-border' />}
       {section.map((item) => (
-        <DropdownItem key={item.key} item={item} />
+        <DropdownItem key={item.key} item={item} inset={inset} />
       ))}
     </Fragment>
   ));
@@ -195,7 +201,7 @@ function ItemTrailing({ item }: { item: DropdownMenuAction }) {
   );
 }
 
-function DropdownItem({ item }: { item: DropdownMenuItem }) {
+function DropdownItem({ item, inset }: { item: DropdownMenuItem; inset: boolean }) {
   const container = useFloatingContainer();
   if (item.divider) {
     return <RDrop.Separator className='my-1 h-px bg-border' />;
@@ -204,7 +210,7 @@ function DropdownItem({ item }: { item: DropdownMenuItem }) {
   if (item.children?.length) {
     return (
       <RDrop.Sub>
-        <RDrop.SubTrigger className={cn(FLOATING_ITEM_BASE, 'justify-between')}>
+        <RDrop.SubTrigger className={cn(FLOATING_ITEM_BASE, 'justify-between', inset && 'pl-8')}>
           <span className='flex items-center gap-2'>
             {item.icon && (
               <span className='inline-flex size-4 items-center justify-center' aria-hidden>
@@ -262,6 +268,7 @@ function DropdownItem({ item }: { item: DropdownMenuItem }) {
       title={item.title ?? item.disabledReason}
       className={cn(
         FLOATING_ITEM_BASE,
+        inset && 'pl-8',
         item.destructive && 'text-destructive focus:bg-destructive/10 focus:text-destructive',
       )}
     >

package/src/react/components/Field.spec.tsx

@@ -200,6 +200,30 @@ describe('Field', () => {
       expect(container.querySelector('div')?.childElementCount).toBe(before as number);
     });
 
+    test('a `status` (the strength meter) holds the reserved row directly under the control, and gives it to an error (task 2466)', () => {
+      const { container } = render(
+        <Harness>
+          <Field name='email' label='Email' reserveErrorSpace status={<span>Strong</span>}>
+            <input
+              // guardrails-ignore no-raw-inputs: test fixture, not product UI
+            />
+          </Field>
+        </Harness>,
+      );
+      const slot = () => container.querySelector('[data-cb-field-status]');
+      // In the reserved row's place — not under an empty one.
+      expect(container.querySelector('[data-cc-field-error-reserved]')).toBeNull();
+      expect(slot()?.textContent).toBe('Strong');
+      const prev = slot()?.previousElementSibling;
+      expect(prev?.tagName === 'INPUT' || prev?.querySelector('input') != null).toBe(true);
+      const before = container.querySelector('div')?.childElementCount;
+
+      setError('email', 'Required');
+      expect(slot()).toBeNull();
+      expect(container.querySelector('[role="alert"]')?.textContent).toContain('Required');
+      expect(container.querySelector('div')?.childElementCount).toBe(before as number);
+    });
+
     test('is OFF by default — turning it on globally is a density change to every form', () => {
       const { container } = render(
         <Harness>

package/src/react/components/Field.tsx

@@ -1,7 +1,7 @@
-import { AlertCircle } from 'lucide-react';
 import { cloneElement, isValidElement, type ReactElement, type ReactNode, useId } from 'react';
 import { get, useFormContext } from 'react-hook-form';
 import { cn } from '../lib/cn.js';
+import { FieldErrorText } from './fieldErrorText.js';
 import {
   DESCRIPTION_FOLD_CHARS,
   FIELD_WIDTH_CLASS,
@@ -64,6 +64,14 @@ interface FieldBaseProps {
    * reachability gate caught exactly that: "Create an account" did nothing.
    */
   reserveErrorSpace?: boolean;
+  /**
+   * Live feedback on the VALUE — a password-strength meter, a character count — in the error's
+   * slot under the control: shown while there is no error, giving the slot to the error while
+   * one shows (FRM-10), and never folded into the ⓘ the way help is. With `reserveErrorSpace`
+   * it holds the reserved line itself, so it must fit one line of `text-sm`. (Forge task 2466:
+   * the meter used to sit BELOW the reserved empty line, 34px from the field it measures.)
+   */
+  status?: ReactNode;
   /**
    * How wide the CONTROL may grow — a cap, never a fixed width (see {@link FieldWidth}). The
    * label, description and error keep the row's full width.
@@ -140,6 +148,7 @@ export function Field({
   children,
   className,
   reserveErrorSpace = false,
+  status,
   width,
   descriptionOnNarrow = 'auto',
   layout = 'stacked',
@@ -293,10 +302,11 @@ export function Field({
       ) : null}
 
       {error ? (
-        <p id={errId} role='alert' className='m-0 flex items-center gap-1.5 text-sm text-field-error' data-cb-field-error=''>
-          <AlertCircle className='size-4 shrink-0' aria-hidden />
-          {error}
-        </p>
+        <FieldErrorText id={errId}>{error}</FieldErrorText>
+      ) : status != null ? (
+        <div className='min-h-[1lh] text-sm' data-cb-field-status=''>
+          {status}
+        </div>
       ) : reserveErrorSpace && (description == null || foldsAlways) ? (
         // `aria-hidden` + no `role`: this is LAYOUT, and a screen reader must not
         // meet an empty alert region. The height is one line of the same `text-sm`

package/src/react/components/SecretInput.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type KeyboardEvent, type ReactNode, useState } from 'react';
+import { type CSSProperties, type FocusEvent, type KeyboardEvent, type ReactNode, useState } from 'react';
 import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
 import { CONTROL_HEIGHT_CLASS, type ControlSize, declareFieldWidth } from '../lib/field.js';
 import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
@@ -123,6 +123,8 @@ export interface SecretInputProps extends StyleableProps<SecretInputSlot> {
   disabled?: boolean;
   /** Fires on Enter in THIS field — the login/rotation forms submit from their last field. */
   onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  /** Fires when the INPUT loses focus — a form library's touched/validate-on-blur hook. */
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
   className?: string;
   style?: CSSProperties;
   /** Container height on the shared control-height scale (`--control-h-*`, task
@@ -156,6 +158,7 @@ export const SecretInput = ({
   autoFocus = false,
   disabled,
   onEnter,
+  onBlur,
   className,
   style,
   classNames,
@@ -206,6 +209,7 @@ export const SecretInput = ({
         value={value}
         readOnly={readOnly}
         onChange={onChange ? (e) => onChange(e.target.value) : undefined}
+        onBlur={onBlur}
         onKeyDown={onEnter ? (e) => {
           if (e.key === 'Enter') onEnter(e);
         } : undefined}

package/src/react/components/auth/AuthCard.spec.tsx

@@ -23,6 +23,14 @@ describe('AuthCard', () => {
     expect(getByText('Footer')).not.toBeNull();
   });
 
+  test('embedded, it paints no page background of its own — the host’s surface shows through (task 2466)', () => {
+    const page = render(<AuthCard>x</AuthCard>);
+    expect((page.container.firstElementChild as HTMLElement).className).toContain('bg-background');
+    page.unmount();
+    const embedded = render(<AuthCard fullScreen={false}>x</AuthCard>);
+    expect((embedded.container.firstElementChild as HTMLElement).className).not.toContain('bg-background');
+  });
+
   test('omits the header block entirely when no title/subtitle/logo', () => {
     const { container } = render(
       <AuthCard>