cursedbelt 5.40.0 → 5.45.1

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/components/entryChunks.graph.spec.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from 'bun:test';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join, relative } from 'node:path';
+
+/**
+ * What an app's entry chunk must NOT carry. Forge task 2533: AppShell keeps its ⌘K palette off
+ * it; task 2535: `Page`'s header keeps its ⓘ guide popover off it. Whatever a module reaches
+ * through STATIC imports lands in the chunk that imports it, so this walks AppShell's static
+ * graph (Bun's own scanner — type-only imports and `import()` excluded) and refuses the palette
+ * body and the packages only it needs. A dynamic `import()` is the split, and is not followed.
+ */
+const SRC = join(import.meta.dir, '..', '..');
+// One per loader: a `.ts` file's `<const T>` generic is not JSX, and a TSX parse refuses it.
+const transpilers = { ts: new Bun.Transpiler({ loader: 'ts' }), tsx: new Bun.Transpiler({ loader: 'tsx' }) };
+
+function resolveLocal(from: string, spec: string): string | null {
+  const base = join(dirname(from), spec.replace(/\.js$/, ''));
+  for (const candidate of [`${base}.ts`, `${base}.tsx`, join(base, 'index.ts'), join(base, 'index.tsx')]) {
+    if (existsSync(candidate)) return candidate;
+  }
+  return null;
+}
+
+function staticGraph(entry: string): { files: Set<string>; packages: Set<string> } {
+  const files = new Set<string>();
+  const packages = new Set<string>();
+  const queue = [entry];
+  while (queue.length > 0) {
+    const file = queue.pop() as string;
+    if (files.has(file)) continue;
+    files.add(file);
+    for (const { path, kind } of transpilers[file.endsWith('.tsx') ? 'tsx' : 'ts'].scanImports(readFileSync(file, 'utf8'))) {
+      if (kind !== 'import-statement') continue;
+      if (!path.startsWith('.')) {
+        packages.add(path);
+        continue;
+      }
+      const next = resolveLocal(file, path);
+      if (next) queue.push(next);
+    }
+  }
+  return { files, packages };
+}
+
+describe('AppShell static graph', () => {
+  const { files, packages } = staticGraph(join(SRC, 'react', 'components', 'AppShell.tsx'));
+  const local = [...files].map((f) => relative(SRC, f));
+
+  test('the walker sees the shell itself and what it draws on every page', () => {
+    expect(local).toContain('react/components/AppShell.tsx');
+    expect(local).toContain('react/palette/useCommandPalette.ts');
+    expect(local).toContain('react/nav/SideNav.tsx');
+  });
+
+  test('🔴 the command palette body is not in it — it is fetched on idle or first open', () => {
+    expect(local).not.toContain('react/palette/CommandPalette.tsx');
+    expect(local).not.toContain('react/palette/Command.tsx');
+  });
+
+  test('🔴 neither are the packages only the palette needs', () => {
+    // `cursedbelt-core/palette/hotkeys` stays: it is the ⌘K binding `useCommandPalette` registers.
+    const palettePackages = [...packages].filter(
+      (p) => p === 'cmdk' || p.startsWith('@leeoniya/ufuzzy') || p === 'cursedbelt-core/palette/fuzzy-rank',
+    );
+    expect(palettePackages).toEqual([]);
+  });
+});
+
+describe('Page static graph', () => {
+  const { files, packages } = staticGraph(join(SRC, 'react', 'components', 'Page.tsx'));
+  const local = [...files].map((f) => relative(SRC, f));
+
+  test('the walker sees the page and its guide trigger', () => {
+    expect(local).toContain('react/components/Page.tsx');
+    expect(local).toContain('react/components/PageGuideButton.tsx');
+  });
+
+  test('🔴 the guide popover is not in it — it is fetched on idle or on the first hover, focus or press', () => {
+    expect(local).not.toContain('react/components/PageGuidePopover.tsx');
+    expect(local).not.toContain('react/components/Popover.tsx');
+  });
+
+  test('🔴 neither is the positioning engine a closed popover does not need', () => {
+    const floating = [...packages].filter(
+      (p) => p.startsWith('@radix-ui/react-popover') || p.startsWith('@radix-ui/react-popper') || p.startsWith('@floating-ui/'),
+    );
+    expect(floating).toEqual([]);
+  });
+});

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/folder-tree/FolderPicker.spec.tsx

@@ -18,6 +18,14 @@ function Harness({ initial = [] as string[] }: { initial?: string[] }) {
 }
 
 describe("FolderPicker", () => {
+	test("the trigger is a field at the locked control height, not a hand-padded box (FND-4)", () => {
+		const { container } = render(<Harness />);
+		const cls = (container.querySelector("button[aria-expanded]")?.getAttribute("class") ?? "").split(/\s+/);
+		expect(cls).toContain("h-[var(--control-h-md)]");
+		expect(cls).toContain("border-field-border");
+		expect(cls).not.toContain("py-1.5");
+	});
+
 	test("every existing-folder option is labeled with its FULL breadcrumb path", () => {
 		const { getByLabelText, queryByLabelText } = render(<Harness />);
 		fireEvent.click(getByLabelText("Folder")); // open the panel

package/src/react/folder-tree/FolderPicker.tsx

@@ -15,6 +15,7 @@
 import { useState } from "react";
 import { Button } from "../components/Button.js";
 import { Input } from "../components/Input.js";
+import { fieldControlClass } from "../lib/field.js";
 import { FolderBreadcrumb } from "./FolderBreadcrumb.js";
 import { formatFolderPath, isValidFolderName, normalizeFolderName } from "cursedbelt-core/folder-tree/path";
 import { type FolderNode, flattenFolderTree } from "cursedbelt-core/folder-tree/tree";
@@ -102,7 +103,9 @@ export function FolderPicker({
 				type="button"
 				aria-label={ariaLabel}
 				aria-expanded={open}
-				className="flex items-center justify-between gap-2 rounded-md border border-[var(--border)] bg-[var(--background)] px-2.5 py-1.5 text-left text-sm"
+				// The shared field chrome at the locked control height, so the trigger lines up with
+				// an Input or TagsInput beside it (FND-4); it was hand-padded to 34px in its own colours.
+				className={`${fieldControlClass("md")} flex items-center justify-between gap-2 text-left`}
 				onClick={() => (open ? close() : setOpen(true))}
 			>
 				<span className="min-w-0 truncate">{selectedLabel}</span>

package/src/react/icons.spec.ts

@@ -3,10 +3,20 @@ import { render } from '@testing-library/react';
 import {
   createIconMapRegistry,
   DynamicIcon,
+  IconAdd,
+  IconArchive,
+  IconCopies,
+  IconFullscreen,
+  IconFullscreenExit,
+  IconGrid,
+  IconMore,
+  IconRefresh,
   IconRegistry,
+  IconScissors,
   IconSearch,
   IconSidebar,
   IconTable,
+  IconTrash,
 } from './icons.js';
 
 describe('createIconMapRegistry', () => {
@@ -72,11 +82,21 @@ describe('DynamicIcon with no iconMap', () => {
 describe('hand-drawn icons', () => {
   // Dependency-free SVG components (not routed through IconToken/lucide) shared by
   // hosts that don't carry lucide-react — collections and desk used to hand-roll
-  // these three locally; see task 2382.
+  // these locally; see tasks 2382 and 2473.
   test.each([
     ['IconSidebar', IconSidebar],
     ['IconSearch', IconSearch],
     ['IconTable', IconTable],
+    ['IconAdd', IconAdd],
+    ['IconMore', IconMore],
+    ['IconFullscreen', IconFullscreen],
+    ['IconFullscreenExit', IconFullscreenExit],
+    ['IconRefresh', IconRefresh],
+    ['IconGrid', IconGrid],
+    ['IconTrash', IconTrash],
+    ['IconCopies', IconCopies],
+    ['IconArchive', IconArchive],
+    ['IconScissors', IconScissors],
   ] as const)('%s renders a sized svg with no lucide dependency', (_name, Icon) => {
     const { container } = render(Icon({ size: 24, className: 'test-class' }));
     const svg = container.querySelector('svg');