cursedbelt 5.40.0 → 5.45.0

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

@@ -0,0 +1,176 @@
+import { afterEach, beforeAll, describe, expect, spyOn, test } from 'bun:test';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { AsyncPanel } from './AsyncPanel.js';
+import { DataTable, preloadDataTableParts } from './DataTable/DataTable.js';
+import type { ColDef } from './DataTable/types.js';
+import { EmptyState } from './EmptyState.js';
+import { LogViewer } from './LogViewer.js';
+import { STATUS_ATTENTION_TONE } from './StatusPill.js';
+import { StatTile } from './StatTile.js';
+import { StatTileGrid } from './StatTileGrid.js';
+
+// Task 2464's unit half — what happy-dom can decide, through the components alone (the pure
+// helpers are specced beside them: `DataTable/numericColumn.spec.ts`, `charts/chartBox.spec.ts`,
+// `StatTileGrid.spec.tsx`, `AsyncPanel.spec.tsx`). Layout (fit at 2560, chart resize, the log's
+// follow pause) is measured in `e2e/data-display.spec.ts`.
+
+beforeAll(preloadDataTableParts);
+afterEach(cleanup);
+
+interface Row extends Record<string, unknown> {
+  step: string;
+  runs: number;
+  code: string;
+}
+const ROWS: Row[] = [
+  { step: 'gate', runs: 2472, code: '41' },
+  { step: 'prove-red', runs: 531, code: '7' },
+];
+const COLUMNS: ColDef<Row>[] = [
+  { key: 'step', label: 'Step', type: 'text' },
+  { key: 'runs', label: 'Runs', type: 'number' },
+];
+
+describe('DAT-1 · numeric columns', () => {
+  test('numeric header and cells stack digits; the warning fires once in dev', () => {
+    const warn = spyOn(console, 'warn').mockImplementation(() => undefined);
+    const { container } = render(
+      <DataTable<Row> columns={[...COLUMNS, { key: 'code', label: 'Code', type: 'text' }]} data={ROWS} hidePagination />,
+    );
+    const th = [...container.querySelectorAll('thead th')].find((n) => n.textContent?.includes('Runs'));
+    expect(th?.className).toContain('tabular-nums');
+    const cells = container.querySelectorAll('tbody tr:first-child td');
+    expect(cells[1]?.className).toContain('tabular-nums');
+    expect(cells[0]?.className).not.toContain('tabular-nums');
+    expect(warn.mock.calls.some(([m]) => String(m).includes('"code"'))).toBe(true);
+    warn.mockRestore();
+  });
+});
+
+describe('DAT-3 / DAT-5 · fit and the row action', () => {
+  test('`fit` marks the table and drops the full-width rule', () => {
+    const { container } = render(<DataTable<Row> columns={COLUMNS} data={ROWS} fit hidePagination />);
+    const table = container.querySelector('table');
+    expect(table?.getAttribute('data-cb-table-fit')).toBe('true');
+    expect(table?.className.split(' ')).not.toContain('w-full');
+    expect(table?.className).toContain('w-auto');
+  });
+
+  test('one inline action where the row returns one, none where it returns null', () => {
+    const { container } = render(
+      <DataTable<Row>
+        columns={COLUMNS}
+        data={ROWS}
+        hidePagination
+        rowAction={(r) => (r.runs > 1000 ? { label: 'Retry', onClick: () => undefined } : null)}
+      />,
+    );
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows[0]?.textContent).toContain('Retry');
+    expect(rows[1]?.textContent).not.toContain('Retry');
+  });
+
+  test('a right-click opens the row menu only where the row has one', () => {
+    const { container } = render(
+      <DataTable<Row> columns={COLUMNS} data={ROWS} hidePagination rowMenu={() => [{ key: 'o', label: 'Open', onClick: () => undefined }]} />,
+    );
+    const row = container.querySelector('tbody tr') as HTMLElement;
+    const event = new MouseEvent('contextmenu', { bubbles: true, cancelable: true });
+    act(() => {
+      row.dispatchEvent(event);
+    });
+    expect(event.defaultPrevented).toBe(true);
+  });
+});
+
+describe('STA-3 · filtered to nothing', () => {
+  test('EmptyState `onClearFilters` is the filtered variant with its own verb', () => {
+    let cleared = 0;
+    const { getByText, container } = render(<EmptyState onClearFilters={() => cleared++} />);
+    expect(getByText('No matches')).toBeDefined();
+    expect(container.querySelector('[data-cb-empty-state]')?.getAttribute('data-cb-empty-state')).toBe('filtered');
+    fireEvent.click(getByText('Clear filters'));
+    expect(cleared).toBe(1);
+  });
+
+  test('a DataTable searched to nothing offers Clear filters, which brings the rows back', async () => {
+    const { container, getByText } = render(<DataTable<Row> columns={COLUMNS} data={ROWS} hidePagination />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'zzz-nothing' } });
+    await waitFor(() => expect(getByText('Clear filters')).toBeDefined());
+    fireEvent.click(getByText('Clear filters'));
+    await waitFor(() => expect(container.querySelectorAll('tbody tr').length).toBe(2));
+  });
+
+  test('an empty dataset is NOT the filtered variant', () => {
+    const { container } = render(<DataTable<Row> columns={COLUMNS} data={[]} hidePagination />);
+    expect(container.textContent).toContain('No results');
+    expect(container.textContent).not.toContain('Clear filters');
+  });
+});
+
+describe('DAT-8 / DAT-9 · StatTile', () => {
+  test('one value size per grid — the longest value sets it for every tile', () => {
+    const { container } = render(
+      <StatTileGrid>
+        <StatTile label='a' value='21' />
+        <StatTile label='b' value='61h 20m' />
+        <StatTile label='c' value='Executing now' />
+      </StatTileGrid>,
+    );
+    const sizes = [...container.querySelectorAll('[data-cb-stat-size]')].map((n) => n.getAttribute('data-cb-stat-size'));
+    expect(sizes).toEqual(['sm', 'sm', 'sm']);
+  });
+
+  test('a budget past its max reads as the real percentage, in the critical tone', () => {
+    const { container, getByText } = render(
+      <StatTile label='DO' value='1.11M' budget={{ used: 1.11, max: 1, verb: 'of the allowance', window: 'Oct' }} />,
+    );
+    expect(getByText('111% of the allowance')).toBeDefined();
+    expect(container.querySelector('[data-cb-stat-budget]')?.getAttribute('data-cb-stat-budget')).toBe('critical');
+  });
+});
+
+describe('STA-1 / STA-2 · AsyncPanel', () => {
+  test('first load is a skeleton of the content\'s shape', () => {
+    const { container } = render(
+      <AsyncPanel loading skeleton='tiles'>
+        <p>never</p>
+      </AsyncPanel>,
+    );
+    expect(container.querySelector('[data-cb-skeleton="tiles"]')).not.toBeNull();
+  });
+
+  test('a refetch keeps the data on screen and says it is updating', () => {
+    const { getByText, rerender, container } = render(
+      <AsyncPanel updatedAt={Date.now() - 12_000}>
+        <p>the goods</p>
+      </AsyncPanel>,
+    );
+    expect(container.querySelector('[data-cb-freshness]')?.getAttribute('data-cb-freshness')).toBe('fresh');
+    rerender(
+      <AsyncPanel loading updatedAt={Date.now() - 12_000}>
+        <p>the goods</p>
+      </AsyncPanel>,
+    );
+    expect(getByText('the goods')).toBeDefined();
+    expect(getByText('Updating…')).toBeDefined();
+  });
+});
+
+describe('DAT-4 / DAT-13 · status and the log', () => {
+  test('the operator vocabulary of station and roms is rationed, not neutral', () => {
+    expect(STATUS_ATTENTION_TONE.interrupted).toBe('error');
+    expect(STATUS_ATTENTION_TONE['not-answering']).toBe('error');
+    expect(STATUS_ATTENTION_TONE.stale).toBe('warning');
+    expect(STATUS_ATTENTION_TONE.transcoding).toBe('success');
+  });
+
+  test('a log with a stream draws the header strip and no empty toolbar row', () => {
+    const { container, getByText } = render(
+      <LogViewer text={'a\nb'} stream='Batch B1' age='3m' openFullLog={{ href: '#x' }} filterable={false} />,
+    );
+    expect(container.querySelector('[data-cb-log-header]')?.textContent).toContain('Batch B1');
+    expect(getByText(/Open full log/)).toBeDefined();
+  });
+});

package/src/react/components/dialog.tsx

@@ -1,6 +1,7 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { type ComponentPropsWithoutRef, forwardRef, useEffect } from 'react';
 import { cn } from '../lib/cn.js';
+import { CardFrameContext } from './cardFrame.js';
 import { useFloatingContainer } from '../lib/floatingContainer.js';
 import { noteDialogOpen } from '../lib/openDialogs.js';
 
@@ -115,7 +116,9 @@ export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
           {...props}
         >
           <CountsAsOpen />
-          {children}
+          {/* A dialog floats: what it holds starts a fresh stack of container levels, even
+              when it was opened from inside a card (React context crosses the portal). */}
+          <CardFrameContext.Provider value={false}>{children}</CardFrameContext.Provider>
         </DialogPrimitive.Content>
       </DialogPortal>
     );

package/src/react/dashboard-grid/WidgetFrame.tsx

@@ -84,9 +84,9 @@ export function WidgetFrame({
             </>
           }
           className={cn(
-            'dashboard-drag-handle h-auto min-h-[2.75rem] cursor-grab select-none active:cursor-grabbing',
+            'dashboard-drag-handle h-auto min-h-11 cursor-grab select-none active:cursor-grabbing',
             onKeyDown !== undefined &&
-              'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
+              'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',
           )}
           {...(onKeyDown !== undefined && {
             tabIndex: 0,

package/src/react/emoji/EmojiPicker.tsx

@@ -57,7 +57,7 @@ function EmojiMartPanel(props: Record<string, unknown>) {
   if (failed) throw failed;
   return (
     <>
-      {!ready && <Skeleton className='h-[420px] w-[352px]' />}
+      {!ready && <Skeleton className='h-105 w-88' />}
       <div ref={host} />
     </>
   );

package/src/react/file-tree/FileTree.spec.tsx

@@ -673,6 +673,55 @@ describe('where you are', () => {
     view.rerender(<FileTree nodes={TREE} selectedId='dinos' onSelect={() => undefined} />);
     expect(scrolled).toEqual([]);
   });
+
+  test('a changed revealKey reveals the SAME selection again; an unchanged one does not', () => {
+    const scrolled: string[] = [];
+    const props = { nodes: TREE, onSelect: () => undefined, selectedId: 'dinos' };
+    const view = render(<FileTree {...props} revealKey={0} />);
+    for (const row of screen.getAllByRole('treeitem') as HTMLElement[]) {
+      row.scrollIntoView = () => scrolled.push((row.textContent ?? '').trim());
+      row.getBoundingClientRect = () => ({ top: 900, bottom: 920 }) as DOMRect;
+    }
+    (view.container.querySelector('.cbft-scroll') as HTMLElement).getBoundingClientRect = () =>
+      ({ top: 0, bottom: 400 }) as DOMRect;
+    view.rerender(<FileTree {...props} revealKey={0} />);
+    expect(scrolled).toEqual([]);
+    view.rerender(<FileTree {...props} revealKey={1} />);
+    expect(scrolled).toEqual(['Dinos']);
+  });
+
+  test('🔴 under scroll="host" the HOST scroller is the frame, not the tree drawn at full height', () => {
+    // music's rail: the tree is laid out at its natural height inside the rail's scroller, so
+    // its own frame holds every row and measuring against it never scrolled a revealed row
+    // into view (owner, 2026-10-01: "the file tree does not open to it").
+    const scrolled: string[] = [];
+    const host = document.createElement('div');
+    host.style.overflowY = 'auto';
+    document.body.append(host);
+    host.getBoundingClientRect = () => ({ top: 0, bottom: 400 }) as DOMRect;
+    const props = { nodes: TREE, onSelect: () => undefined, scroll: 'host' as const };
+    const view = render(<FileTree {...props} selectedId={null} />, { container: host });
+    try {
+      // The tree's own box spans every row — exactly what made the old check a no-op.
+      (host.querySelector('.cbft-scroll') as HTMLElement).getBoundingClientRect = () =>
+        ({ top: 0, bottom: 2000 }) as DOMRect;
+      for (const row of screen.getAllByRole('treeitem') as HTMLElement[]) {
+        row.scrollIntoView = () => scrolled.push((row.textContent ?? '').trim());
+        row.getBoundingClientRect = () => ({ top: 900, bottom: 920 }) as DOMRect;
+      }
+      view.rerender(<FileTree {...props} selectedId='dinos' />);
+      expect(scrolled).toEqual(['Dinos']);
+
+      // …and a row the host already shows still does not jump.
+      for (const row of screen.getAllByRole('treeitem') as HTMLElement[])
+        row.getBoundingClientRect = () => ({ top: 10, bottom: 32 }) as DOMRect;
+      view.rerender(<FileTree {...props} selectedId='simpsons' />);
+      expect(scrolled).toEqual(['Dinos']);
+    } finally {
+      view.unmount();
+      host.remove();
+    }
+  });
 });
 
 /**

package/src/react/file-tree/FileTree.tsx

@@ -365,6 +365,13 @@ export interface FileTreeProps {
    * Wire it to whatever decides the fetch plan, never to the stored collapse.
    */
   onRevealExpand?: (ids: readonly string[]) => void;
+  /**
+   * Change it to reveal the selection AGAIN — VS Code's *Reveal in Explorer* on the file that
+   * is already selected. The reveal otherwise fires once per {@link selectedId}, so a "show me
+   * where it is" button pressed after the reader scrolled away or shut its folder did nothing.
+   * Any value; only a change counts. Omit it and nothing differs.
+   */
+  revealKey?: unknown;
 
   /**
    * The rows kept in a section of their own ABOVE the folders — *"pin open files where they
@@ -809,6 +816,7 @@ export function FileTree({
   onCollapsedChange,
   expandOnReveal = false,
   onRevealExpand,
+  revealKey,
   pinnedIds,
   onPinnedChange,
   pinnedLabel = 'Pinned',
@@ -1327,7 +1335,9 @@ export function FileTree({
     announceReveal.current = onRevealExpand;
   }, [revealShut, onRevealExpand]);
   /** The selection an expanding reveal has already fired for — see limit 1 below. */
-  const revealedFor = useRef<string | null>(null);
+  const revealedFor = useRef<string | null | undefined>(null);
+  /** The {@link FileTreeProps.revealKey} last honoured — a change re-arms `revealedFor`. */
+  const revealedKey = useRef(revealKey);
 
   /**
    * Bring the selected row into view — the explorer's *reveal*.
@@ -1384,10 +1394,14 @@ export function FileTree({
    * expansion returns without scrolling and the re-render it causes is what lands the scroll.
    * What it must NOT be is the trigger for expanding again — that is `revealedFor`, below.
    */
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `selectedId` is the trigger and not a read; `drag` is a guard and not a trigger; `revealOpened` is the second pass — see just above.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `selectedId` and `revealKey` are the triggers; `drag` is a guard and not a trigger; `revealOpened` is the second pass — see just above.
   useEffect(() => {
     const scroller = scrollRef.current;
     if (!scroller || drag?.active) return;
+    if (revealedKey.current !== revealKey) {
+      revealedKey.current = revealKey;
+      revealedFor.current = undefined;
+    }
     /*
      * Once per selection, whatever it finds — the ref moves even when there is nothing shut to
      * open, so a later hand-shut of one of these folders cannot be undone by this effect.
@@ -1408,12 +1422,19 @@ export function FileTree({
       scroller.querySelector<HTMLElement>('.cbft-row[data-holds-open]');
     if (!row?.scrollIntoView) return;
     const box = row.getBoundingClientRect();
-    const frame = scroller.getBoundingClientRect();
+    /*
+     * 🔴 Under `scroll='host'` the tree's own frame is NOT what clips it: it is drawn at full
+     * height, so every row is always "inside" it and this check returned before scrolling —
+     * a reveal in music's rail opened the folders and lit the row eight hundred pixels below
+     * the fold (owner, 2026-10-01: *"the file tree does not open to it"*). The frame that
+     * decides "already visible" is the host's scroller.
+     */
+    const frame = (scroll === 'host' ? hostScroller(scroller) : scroller).getBoundingClientRect();
     if (box.top >= frame.top && box.bottom <= frame.bottom) return;
     // `nearest` on both axes: the least movement that makes the row visible, and no sideways
     // travel in a list that does not scroll sideways.
     row.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-  }, [selectedId, revealOpened]);
+  }, [selectedId, revealOpened, revealKey]);
 
   // ── The drag ──────────────────────────────────────────────────────────────────────────
 
@@ -3249,3 +3270,15 @@ function nameOf(nodes: readonly FileTreeNode[], id: string): string {
   }
   return '';
 }
+
+/**
+ * The element that actually clips a `scroll='host'` tree: its nearest ancestor that scrolls
+ * vertically, or the document's scroller when nothing between here and the root does.
+ */
+function hostScroller(from: HTMLElement): Element {
+  for (let node = from.parentElement; node; node = node.parentElement) {
+    const overflow = getComputedStyle(node).overflowY;
+    if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') return node;
+  }
+  return document.scrollingElement ?? document.documentElement;
+}

package/src/react/filter-rail/FilterRail.tsx

@@ -443,7 +443,7 @@ function FilterRailRow({
         // Outlined rather than filled, so the row's own SELECTED paint stays readable
         // underneath it — a row can be both the current one and the drop target.
         item.dropActive &&
-          'outline outline-2 outline-dashed outline-offset-[-2px] outline-accent bg-accent/10',
+          'outline outline-2 outline-dashed -outline-offset-2 outline-accent bg-accent/10',
       )}
       // A collapsed rail has no room to indent, and a 14rem-wide column has no room to
       // indent far — the step is deliberately small and it stops growing at depth 6, so a

package/src/react/icons.tsx

@@ -331,7 +331,7 @@ export function DynamicIcon({ token, iconMap, className }: DynamicIconProps) {
           className={cn(
             // guardrails-ignore micro-typography-floor: 0.6em is RELATIVE to the avatar box —
     // it scales with the circle rather than sitting at a fixed sub-floor size.
-    'inline-flex shrink-0 items-center justify-center overflow-hidden text-[0.6em] font-semibold uppercase leading-none',
+    'inline-flex shrink-0 items-center justify-center overflow-hidden text-[length:var(--text-glyph-relative)] font-semibold uppercase leading-none',
             className,
           )}
           data-icon={token}

package/src/react/index.ts

@@ -116,6 +116,7 @@ export {
   type AmbientIntensity,
 } from './components/AmbientBackdrop.js';
 export { AppShell, type AppShellProps } from './components/AppShell.js';
+export { BannerLane, type BannerLaneProps, type ShellBanner } from './components/BannerLane.js';
 export { AuthGate, type AuthGateProps, notifyUnauthorized } from './AuthGate.js';
 export { AutocompleteField, type AutocompleteProps } from './components/Autocomplete.js';
 export { AutoGrowTextarea, type AutoGrowTextareaProps } from './components/AutoGrowTextarea.js';
@@ -289,6 +290,7 @@ export {
   type TableViewMode,
   TableViewToggle,
   type DataTableHandle,
+  type DataTableRowAction,
   type DataTableRowProps,
   type DataTableSelectAll,
   type DataTableServerWindow,
@@ -463,10 +465,19 @@ export { OtpInput, type OtpInputProps } from './components/OtpInput.js';
 export {
   Page,
   PageContainer,
+  type PageContainerProps,
   PageHeader,
   type PageHeaderProps,
+  type PageWidth,
   ReadableColumn,
 } from './components/Page.js';
+export {
+  GuideRoute,
+  type GuideRouteProps,
+  GuideSection,
+  type GuideSectionProps,
+} from './components/Guide.js';
+export { PageGuideButton, type PageGuideButtonProps } from './components/PageGuideButton.js';
 export { PathText, type PathTextProps } from './components/PathText.js';
 export { TruncatedText, type TruncatedTextProps } from './components/TruncatedText.js';
 export { UnstyledButton, type UnstyledButtonProps } from './components/UnstyledButton.js';
@@ -500,7 +511,7 @@ export {
 } from './components/ResponsiveWorkbench.js';
 export { RevealAction, type RevealActionProps } from './components/RevealAction.js';
 export { REVEAL_ON_HOVER } from './components/revealOnHover.js';
-export { ScrollArea, type ScrollAreaProps, type ScrollAreaSpace } from './components/ScrollArea.js';
+export { ScrollArea, type ScrollAreaHeight, type ScrollAreaProps, type ScrollAreaSpace } from './components/ScrollArea.js';
 export { ScrollToTopButton } from './components/ScrollToTopButton.js';
 export {
   SaveIndicator,
@@ -530,7 +541,15 @@ export {
   type SelectGroup,
   type SelectOption,
 } from './components/SelectField.js';
-export { Skeleton, SkeletonList, type SkeletonListProps } from './components/Skeleton.js';
+export {
+  ContentSkeleton,
+  Skeleton,
+  SkeletonChart,
+  SkeletonList,
+  type SkeletonListProps,
+  SkeletonTiles,
+  type SkeletonVariant,
+} from './components/Skeleton.js';
 export {
   RangeSlider,
   type RangeSliderProps,
@@ -578,7 +597,13 @@ export {
 } from './components/SplitPane.js';
 export { Sparkline, type SparklineProps } from './components/Sparkline.js';
 export { StatStrip, type StatStripItem, type StatStripProps } from './components/StatStrip.js';
-export { StatTile, type StatTileProps, type StatTileTone } from './components/StatTile.js';
+export {
+  StatTile,
+  type StatTileBudget,
+  type StatTileProps,
+  type StatTileTone,
+  type StatValueSize,
+} from './components/StatTile.js';
 export {
   ThresholdMeter,
   type ThresholdMeterProps,

package/src/react/lib/menuSections.ts

@@ -0,0 +1,33 @@
+import type { DropdownMenuAction, DropdownMenuItem } from '../components/DropdownMenu.js';
+
+// Kept out of `DropdownMenu.tsx` so the `./react/dropdown-menu` subpath does not export it.
+
+/**
+ * OVL-7's order: the caller's sections (split at its dividers, then by `group`), and every
+ * destructive action pulled out into one last section, so "Delete" is never between "Rename"
+ * and "Duplicate" and never sits by accident under the pointer's resting place.
+ */
+export function arrangeMenuItems(items: readonly DropdownMenuItem[]): DropdownMenuAction[][] {
+  const sections: DropdownMenuAction[][] = [];
+  const destructive: DropdownMenuAction[] = [];
+  let run: DropdownMenuAction[] = [];
+  const flush = () => {
+    const byGroup = new Map<string, DropdownMenuAction[]>();
+    for (const item of run) {
+      const key = item.group ?? '';
+      const list = byGroup.get(key);
+      if (list) list.push(item);
+      else byGroup.set(key, [item]);
+    }
+    sections.push(...byGroup.values());
+    run = [];
+  };
+  for (const item of items) {
+    if (item.divider) flush();
+    else if (item.destructive) destructive.push(item);
+    else run.push(item);
+  }
+  flush();
+  if (destructive.length) sections.push(destructive);
+  return sections.filter((section) => section.length > 0);
+}

package/src/react/markdown/Markdown.tsx

@@ -23,7 +23,7 @@ function renderInline(nodes: InlineNode[], keyPrefix: string): ReactNode[] {
         return <em key={key}>{renderInline(node.children, key)}</em>;
       case 'code':
         return (
-          <code key={key} className='rounded bg-black/10 px-1 py-0.5 font-mono text-[0.9em] dark:bg-white/10'>
+          <code key={key} className='rounded bg-black/10 px-1 py-0.5 font-mono text-[length:var(--text-code-inline)] dark:bg-white/10'>
             {node.value}
           </code>
         );
@@ -67,7 +67,7 @@ function renderBlock(block: BlockNode, key: string): ReactNode {
           <pre
             // guardrails-ignore no-raw-overflow: horizontal-only scroll sized to the code
             // block's own content, not a keyboard-aware vertical page region.
-            className='overflow-x-auto rounded-md bg-black/10 p-2 pr-9 font-mono text-[0.85em] leading-snug dark:bg-white/10'
+            className='overflow-x-auto rounded-md bg-black/10 p-2 pr-9 font-mono text-[length:var(--text-code-block)] leading-snug dark:bg-white/10'
           >
             <code>{block.code}</code>
           </pre>

package/src/react/media/HoverScrubVideoThumb.tsx

@@ -265,8 +265,8 @@ export function HoverScrubVideoThumb({
        */}
       {!previewing && !posterFailed && video.posterUrl ? (
         <span className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <span className='flex size-9 items-center justify-center rounded-full bg-black/55 text-white shadow-sm backdrop-blur-[2px]'>
-            <Play aria-hidden className='size-4 translate-x-[1px]' />
+          <span className='flex size-9 items-center justify-center rounded-full bg-black/55 text-white shadow-sm backdrop-blur-xs'>
+            <Play aria-hidden className='size-4 translate-x-px' />
           </span>
         </span>
       ) : null}

package/src/react/media/MaskPainter.tsx

@@ -687,7 +687,7 @@ export function MaskPainter({
     <Modal
       open={open}
       onClose={onClose}
-      size='xl'
+      size='lg'
       title='Paint mask'
       scrollBody={false}
       // guardrails-ignore no-raw-modal-footer: wraps a toolbar row above the actual ActionBar

package/src/react/media/MediaUploadControl.tsx

@@ -97,7 +97,7 @@ export function MediaUploadControl({
             placeholder='tags, comma,separated'
             spellCheck={false}
             disabled={busy}
-            className='max-w-[200px]'
+            className='max-w-50'
             aria-label='Upload tags'
           />
           <Button

package/src/react/media/VideoTrimmer.tsx

@@ -173,7 +173,7 @@ export function VideoTrimmer({
           <video
             ref={videoRef}
             src={src}
-            className='mx-auto max-h-[48vh] w-full bg-black'
+            className='mx-auto max-h-[var(--media-max-h)] w-full bg-black'
             playsInline
             preload='metadata'
             crossOrigin='anonymous'

package/src/react/media/denseGallery.css

@@ -32,7 +32,11 @@
 .cbgd-search {
 	margin-left: auto;
 	width: min(360px, 50%);
-	padding: 7px 12px;
+	/* The order pills' 28px, so the header row is one control height (FND-4); the phone rule
+	 * below raises both to 44px together. */
+	box-sizing: border-box;
+	height: 28px;
+	padding: 0 12px;
 	border-radius: 18px;
 	border: 1px solid var(--border);
 	background: var(--muted);

package/src/react/namespace/NamespaceTargetCapsule.tsx

@@ -116,7 +116,7 @@ export function NamespaceTargetCapsule({
           data-testid="namespace-target-capsule"
         >
           <span aria-hidden className={cn('inline-block size-2.5 shrink-0 rounded-full', dot.className)} style={dot.style} />
-          <span className="max-w-[10rem] truncate">{selected?.label ?? 'General'}</span>
+          <span className="max-w-40 truncate">{selected?.label ?? 'General'}</span>
           <ChevronDown className="size-3 shrink-0 opacity-60" />
         </Button>
       }

package/src/react/nav/BreadcrumbTrail.tsx

@@ -500,7 +500,7 @@ const Crumb = memo(function Crumb({
     typeof node.label === 'string' ? (
       <TruncatedText
         as='span'
-        className={cn(isLeaf ? 'max-w-[20rem]' : 'max-w-[12rem]', hideLabel && 'hidden')}
+        className={cn(isLeaf ? 'max-w-80' : 'max-w-48', hideLabel && 'hidden')}
         {...(isRoot ? { 'data-cb-crumb-rootlabel': '' } : {})}
       >
         {node.label}
@@ -520,7 +520,7 @@ const Crumb = memo(function Crumb({
       <span
         className={cn(
           'inline-flex min-w-0 items-center [&>*]:min-w-0',
-          isLeaf ? 'max-w-[20rem]' : 'max-w-[12rem]',
+          isLeaf ? 'max-w-80' : 'max-w-48',
           hideLabel && 'hidden',
         )}
       >

package/src/react/nav/CommandBar.tsx

@@ -30,6 +30,12 @@ export interface CommandBarProps {
    * `PlaceBar` owns capture via its raised center FAB, so capture isn't duplicated.
    */
   captureDesktopOnly?: boolean;
+  /**
+   * The command trigger as a square ⌘K button instead of a field — for a header whose
+   * center zone holds the places (a 2–5-place `AppShell`), where the trigger sits in the
+   * locked right zone and must not compete with them for width.
+   */
+  compact?: boolean;
   className?: string;
 }
 
@@ -52,6 +58,7 @@ export function CommandBar({
   commandHint = '⌘K',
   extra,
   captureDesktopOnly = false,
+  compact = false,
   className,
 }: CommandBarProps) {
   return (
@@ -63,6 +70,8 @@ export function CommandBar({
           data-cb-command-trigger=''
           onClick={onOpenCommand}
           aria-keyshortcuts='Meta+K Control+K'
+          // The square trigger paints no words, so it is named by them.
+          aria-label={compact ? commandPlaceholder : undefined}
           leftIcon={<Search className='size-4 shrink-0' aria-hidden='true' />}
           className={cn(
             'group h-10 min-w-0 flex-1 justify-start gap-2 rounded-lg border border-border bg-surface px-3 font-normal text-muted-foreground hover:border-foreground/20',
@@ -72,16 +81,18 @@ export function CommandBar({
             // `pointer-coarse:min-w-11` alongside it: the collapsed `w-10` square is
             // a mouse-fine 40px, short of the 44px touch floor on a coarse pointer
             // (owner orch-host 390px teardown — measured 40×44).
-            'max-sm:w-10 max-sm:flex-none max-sm:justify-center max-sm:px-0 pointer-coarse:min-w-11',
+            compact
+              ? 'w-10 flex-none justify-center px-0 pointer-coarse:min-w-11'
+              : 'max-sm:w-10 max-sm:flex-none max-sm:justify-center max-sm:px-0 pointer-coarse:min-w-11',
           )}
         >
           {/* Below sm the field can be squeezed by spine meta (badges/pills) — a
               truncated placeholder fragment ("S..") reads broken, so the text
               yields entirely and the trigger collapses to the icon button above. */}
-          <span className='hidden min-w-0 flex-1 truncate text-left text-sm sm:inline'>
+          <span className={cn('hidden min-w-0 flex-1 truncate text-left text-sm', !compact && 'sm:inline')}>
             {commandPlaceholder}
           </span>
-          {commandHint != null && (
+          {commandHint != null && !compact && (
             <kbd className='hidden shrink-0 items-center rounded border border-border bg-background px-1.5 py-0.5 font-sans text-xs text-muted-foreground sm:inline-flex'>
               {commandHint}
             </kbd>