cursedbelt 5.45.0 → 5.46.0

package/src/react/components/AppShell.tsx

@@ -1,4 +1,4 @@
-import { type ElementType, type ReactNode, type Ref, useLayoutEffect, useRef } from 'react';
+import { type ElementType, type ReactNode, type Ref, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
   allowAllGate,
   deriveSideNavDomains,
@@ -9,18 +9,29 @@ import {
 import { useKeyboardInset } from '../hooks/useKeyboardInset.js';
 import { cn } from '../lib/cn.js';
 import { devWarnOnce } from '../lib/devWarn.js';
+import { whenIdle } from '../lib/whenIdle.js';
 import { CommandBar } from '../nav/CommandBar.js';
 import { type IconResolver, isDomainActive, type NavBadgeTone, renderIcon, routeClick } from '../nav/navShared.js';
 import { PlaceBar } from '../nav/PlaceBar.js';
 import { SideNav } from '../nav/SideNav.js';
 import { TopBarPlaces } from '../nav/TopBar.js';
-import { CommandPalette } from '../palette/CommandPalette.js';
 import { CommandSourceProvider, useCommandSources } from '../palette/commandSources.js';
 import { useCommandPalette } from '../palette/useCommandPalette.js';
 import { AmbientBackdrop, type AmbientBackdropProps } from './AmbientBackdrop.js';
 import { BannerLane, type ShellBanner } from './BannerLane.js';
+import { lazyPart } from './DataTable/lazyPart.js';
 import { ScrollArea, type ScrollAreaSpace } from './ScrollArea.js';
 
+/**
+ * The shell's ⌘K palette, off the entry chunk (forge task 2533). It draws nothing until it is
+ * opened, yet a static import put cmdk, uFuzzy, Radix's Dialog and the palette itself (~48 kB
+ * gzip with the rest of the shell) in the entry of every app on AppShell — station's grew
+ * 212.9 → 261.2 kB the day it adopted the shell. The hotkey and the spine trigger stay static
+ * (`useCommandPalette`); the body is fetched on idle after the shell mounts, or on the first
+ * open if that comes sooner, and it mounts only once it has been opened.
+ */
+const ShellCommandPalette = lazyPart(() => import('../palette/CommandPalette.js').then((m) => m.CommandPalette));
+
 export interface AppShellProps {
   /** Routed page content. Scrolls inside the single keyboard-safe `ScrollArea`. */
   children: ReactNode;
@@ -265,6 +276,14 @@ function Shell({
   const ownPalette = !palette && Boolean(nav) && (commandPalette === 'auto' ? pattern === 'side' : commandPalette);
   const paletteControls = useCommandPalette({ enabled: ownPalette });
   const sources = useCommandSources();
+  // Mounted from its first open on and never unmounted, so a close keeps Radix's exit and the
+  // palette's own reset-on-close; fetched on idle so ⌘K normally finds it already here.
+  const [paletteMounted, setPaletteMounted] = useState(false);
+  if (paletteControls.open && !paletteMounted) setPaletteMounted(true);
+  useEffect(() => {
+    if (!ownPalette) return;
+    return whenIdle(() => void ShellCommandPalette.preload().catch(() => undefined));
+  }, [ownPalette]);
   const openCommand = onOpenCommand ?? (ownPalette ? paletteControls.toggle : undefined);
   const navigate = (path: string) => {
     if (onNavigate) onNavigate(path);
@@ -454,8 +473,8 @@ function Shell({
 
       {/* The command palette portals its own Dialog; rendered here so one shell owns one. */}
       {palette}
-      {ownPalette && nav ? (
-        <CommandPalette
+      {ownPalette && nav && paletteMounted ? (
+        <ShellCommandPalette
           model={nav}
           gate={navGate}
           open={paletteControls.open}

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

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
 import { AsyncPanel, ageLabel } from './AsyncPanel.js';
+import { Button } from './Button.js';
 
 afterEach(cleanup);
 
@@ -24,6 +25,15 @@ describe('AsyncPanel', () => {
     expect(getByText(/AccessDenied/)).toBeDefined();
   });
 
+  test('offers the retry action beside the error (STA-3) — Alert reads `actions`, not `action`', () => {
+    const { getByRole } = render(
+      <AsyncPanel label='AWS cost' error='boom' onRetryAction={<Button tooltip='Read it again'>Retry</Button>}>
+        <p>never</p>
+      </AsyncPanel>,
+    );
+    expect(getByRole('button', { name: 'Retry' })).toBeDefined();
+  });
+
   test('degrades only this panel — the children are not rendered', () => {
     const { queryByText } = render(
       <AsyncPanel error='boom'>

package/src/react/components/AsyncPanel.tsx

@@ -133,7 +133,9 @@ export function AsyncPanel({
   }
   if (error) {
     return (
-      <Alert tone='warning' {...(onRetryAction ? { action: onRetryAction } : {})}>
+      // `actions`, typed: a spread of `{ action }` passed tsc's excess-property check and the
+      // Retry never rendered (found by station's task 2471).
+      <Alert tone='warning' actions={onRetryAction}>
         {label ? `${label} is unavailable — ` : ''}
         {messageOf(error)}
       </Alert>

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

@@ -81,4 +81,22 @@ describe('Checkbox', () => {
     // …and `className` still means the box, as it always has.
     expect(getByRole('checkbox').getAttribute('class') ?? '').toContain('size-4');
   });
+
+  test('a captioned checkbox starts at the left edge, never centred in a stretched row (FRM-2)', () => {
+    const { getByText } = render(
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <Checkbox checked={false} onCheckedChange={() => {}} label='Short' />
+      </div>,
+    );
+    const target = (getByText('Short').closest('label')?.getAttribute('class') ?? '').split(/\s+/);
+    expect(target).not.toContain('justify-center');
+    expect(target).toContain('justify-start');
+    expect(target).toContain('self-start');
+  });
+
+  test('a bare box still centres itself in its 44px target', () => {
+    const { getByRole } = render(<Checkbox checked={false} onCheckedChange={() => {}} />);
+    const target = (getByRole('checkbox').closest('label')?.getAttribute('class') ?? '').split(/\s+/);
+    expect(target).toContain('justify-center');
+  });
 });

package/src/react/components/Checkbox.tsx

@@ -48,10 +48,13 @@ const BOX = cn(
 // region a thumb is actually aiming at, which is the words as much as the box.
 // `data-cb-tap-target` is the seam `e2e/touch-targets.spec.ts` measures a
 // sub-44px control through, the way a checkbox has to be measured.
-const TARGET = cn(
-  'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 align-middle',
-  TAP_TARGET,
-);
+const TARGET = cn('inline-flex shrink-0 cursor-pointer items-center gap-2 align-middle', TAP_TARGET);
+
+// A bare box centres itself in its 44px square. A captioned one starts at the left edge and is
+// only as wide as its caption: `justify-center` on a stretched label (any column parent) set a
+// short caption adrift in the middle of the row, off the edge every other control shares (FRM-2).
+const BARE = 'justify-center';
+const CAPTIONED = 'justify-start self-start text-left';
 
 /**
  * Checkbox vendored from shadcn (Radix `Checkbox`). White check on a solid-accent
@@ -77,7 +80,7 @@ export function Checkbox({
     // descendant: Radix renders a hidden bubble `<input type="checkbox">` inside
     // the Root when the control sits in a form, and an implicit association would
     // resolve to THAT instead of the button the user can see.
-    <label htmlFor={id} data-cb-tap-target='' className={TARGET}>
+    <label htmlFor={id} data-cb-tap-target='' className={cn(TARGET, label == null ? BARE : CAPTIONED)}>
       <RadixCheckbox.Root id={id} className={cn(BOX, className)} {...props}>
         <RadixCheckbox.Indicator className='flex items-center justify-center text-current'>
           {props.checked === 'indeterminate' ? (

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

@@ -136,8 +136,9 @@ describe('Field', () => {
         </Field>
       </Harness>,
     );
-    // InfoHint's trigger has aria-label "More info" and must NOT be nested in the label.
-    const info = getByLabelText('More info');
+    // The trigger is named for its field (not InfoHint's generic "More info") and must NOT be
+    // nested in the label.
+    const info = getByLabelText('About email');
     expect(info.tagName).toBe('BUTTON');
     expect(container.querySelector('label')?.contains(info)).toBe(false);
   });

package/src/react/components/Field.tsx

@@ -205,6 +205,9 @@ export function Field({
   ) : null;
 
   const labelTitle = typeof label === 'string' ? label : undefined;
+  // The ⓘ trigger is named for its field: three hints in a row are three "More info" buttons to
+  // a screen reader otherwise, and a browser test cannot find one by name (forge task 2532).
+  const hintLabel = labelTitle ? `About ${labelTitle.toLowerCase()}` : undefined;
 
   return (
     <div
@@ -236,23 +239,23 @@ export function Field({
             )
           ) : null}
           {foldsAlways ? (
-            <InfoHint title={labelTitle}>
+            <InfoHint title={labelTitle} label={hintLabel}>
               {hint != null ? <p className='mb-1'>{hint}</p> : null}
               {description}
             </InfoHint>
           ) : null}
-          {hint != null && !folds && !foldsAlways ? <InfoHint title={labelTitle}>{hint}</InfoHint> : null}
+          {hint != null && !folds && !foldsAlways ? <InfoHint title={labelTitle} label={hintLabel}>{hint}</InfoHint> : null}
           {folds ? (
             // Two triggers, one shown per breakpoint: wide screens keep `hint` alone in the ⓘ
             // (the description is on screen below), a phone gets the description folded in.
             <>
               {hint != null ? (
                 <span className='inline-flex max-sm:hidden'>
-                  <InfoHint title={labelTitle}>{hint}</InfoHint>
+                  <InfoHint title={labelTitle} label={hintLabel}>{hint}</InfoHint>
                 </span>
               ) : null}
               <span className='inline-flex sm:hidden'>
-                <InfoHint title={labelTitle}>
+                <InfoHint title={labelTitle} label={hintLabel}>
                   {hint != null ? <p className='mb-1'>{hint}</p> : null}
                   {description}
                 </InfoHint>

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

@@ -141,7 +141,7 @@ describe('Field description', () => {
     expect(p?.className).toContain('text-muted-foreground');
     // Short: never folded, so no phone-only ⓘ.
     expect(p?.className).not.toContain('max-sm:hidden');
-    expect(container.querySelectorAll('button[aria-label="More info"]').length).toBe(0);
+    expect(container.querySelectorAll('button[aria-label="About d"]').length).toBe(0);
   });
 
   test('a long one folds into an ⓘ on a phone, and stays described', () => {
@@ -152,7 +152,7 @@ describe('Field description', () => {
     );
     const p = container.querySelector('#cb-f-d-desc');
     expect(p?.className).toContain('max-sm:hidden');
-    expect(container.querySelectorAll('button[aria-label="More info"]').length).toBe(1);
+    expect(container.querySelectorAll('button[aria-label="About d"]').length).toBe(1);
     expect(container.querySelector('input')?.getAttribute('aria-describedby')).toBe('cb-f-d-desc');
   });
 
@@ -171,7 +171,7 @@ describe('Field description', () => {
         <Input />
       </Field>,
     );
-    const hosts = [...container.querySelectorAll('button[aria-label="More info"]')].map(
+    const hosts = [...container.querySelectorAll('button[aria-label="About d"]')].map(
       (b) => b.parentElement?.className ?? '',
     );
     expect(hosts.length).toBe(2);

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

@@ -0,0 +1,39 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { PageGuideButton } from './PageGuideButton.js';
+
+afterEach(cleanup);
+
+/** Let the dynamic import and React's Suspense retry settle. */
+async function settle() {
+  for (let i = 0; i < 5; i += 1) {
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+  }
+}
+
+// Forge task 2535: the popover is a lazy chunk (the graph spec proves it is not static). These
+// prove the swap from the placeholder trigger to the real one loses nothing a user did.
+describe('PageGuideButton — a static trigger, the popover fetched on demand', () => {
+  test('a press on the placeholder, before the popover is loaded, opens the guide', async () => {
+    render(<PageGuideButton>First agent run after a gap.</PageGuideButton>);
+    const trigger = screen.getByRole('button', { name: 'Guide' });
+    expect(trigger.getAttribute('aria-haspopup')).toBe('dialog');
+    fireEvent.click(trigger);
+    await settle();
+    expect(await screen.findByText('First agent run after a gap.')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Guide' }).getAttribute('aria-expanded')).toBe('true');
+  });
+
+  test('a page reached after the chunk is here draws the real trigger at once, closed', async () => {
+    render(<PageGuideButton label='Help'>Body.</PageGuideButton>);
+    const trigger = screen.getByRole('button', { name: 'Help' });
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(screen.queryByText('Body.')).toBeNull();
+    fireEvent.click(trigger);
+    await settle();
+    expect(screen.getByText('Body.')).toBeTruthy();
+  });
+
+});

package/src/react/components/PageGuideButton.tsx

@@ -1,9 +1,8 @@
 import { BookOpen } from 'lucide-react';
-import type { ReactNode } from 'react';
-import { cn } from '../lib/cn.js';
+import { type ComponentType, type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { whenIdle } from '../lib/whenIdle.js';
 import { Button } from './Button.js';
-import { Popover } from './Popover.js';
-import { ScrollArea } from './ScrollArea.js';
+import type { PageGuidePopoverProps } from './PageGuidePopover.js';
 
 // The first of CPY-2's two homes for a page's documentation; `Guide.tsx` has both, and why.
 
@@ -15,28 +14,97 @@ export interface PageGuideButtonProps {
   className?: string;
 }
 
+/**
+ * ── Why the popover is a chunk of its own (forge task 2535) ──────────────────
+ * 🔴 `Page.tsx` renders this button, so a static import of `Popover` put Radix Popover,
+ * react-popper and @floating-ui (~15–20 kB gzip) in the entry chunk of every app whose first
+ * page has a header — for a panel that is closed until its button is pressed. This file is
+ * the trigger alone; `PageGuidePopover.tsx` is fetched on idle after the button mounts, or
+ * at once on a hover, focus or press if one comes sooner. `entryChunks.graph.spec.ts` is the
+ * WHETHER.
+ *
+ * 🔴 The placeholder is ONE element until the real trigger replaces it, once — the way
+ * `InfoHint.tsx` does it, not through Suspense. A Suspense fallback is a second copy of the
+ * button: the hover that starts the fetch swapped the node under the pointer between its
+ * pointerdown and its click, and the press was lost (the CPY-2 browser test caught it).
+ */
+type PageGuidePopoverComponent = ComponentType<PageGuidePopoverProps>;
+
+let loadedImpl: PageGuidePopoverComponent | null = null;
+let pendingImpl: Promise<PageGuidePopoverComponent> | null = null;
+
+/** Fetch the popover once per page; a failed fetch may be asked again. */
+function loadPageGuide(): Promise<PageGuidePopoverComponent> {
+  pendingImpl ??= import('./PageGuidePopover.js').then(
+    (m) => {
+      loadedImpl = m.PageGuidePopover;
+      return m.PageGuidePopover;
+    },
+    (error: unknown) => {
+      pendingImpl = null;
+      throw error;
+    },
+  );
+  return pendingImpl;
+}
+
+/** What the placeholder saw before the real trigger replaced it. */
+type Early = 'none' | 'focus' | 'press';
+
 /** The "Guide" button and its popover. */
 export function PageGuideButton({ children, label = 'Guide', className }: PageGuideButtonProps) {
+  // `() => loadedImpl`: a component IS a function, and `useState(fn)` would call it.
+  const [Impl, setImpl] = useState<PageGuidePopoverComponent | null>(() => loadedImpl);
+  // State, not a ref, so the render that swaps the real trigger in reads the latest.
+  const [early, setEarly] = useState<Early>('none');
+  const alive = useRef(true);
+
+  const load = useCallback(() => {
+    void loadPageGuide().then(
+      (c) => {
+        if (alive.current) setImpl(() => c);
+      },
+      () => undefined, // the placeholder stays; the next hover or press asks again
+    );
+  }, []);
+  useEffect(() => {
+    alive.current = true;
+    const cancel = Impl ? undefined : whenIdle(load);
+    return () => {
+      alive.current = false;
+      cancel?.();
+    };
+  }, [Impl, load]);
+
+  if (Impl) {
+    return (
+      <Impl label={label} className={className} initialOpen={early === 'press'} initialFocus={early === 'focus'}>
+        {children}
+      </Impl>
+    );
+  }
+  // The same button the popover renders, so nothing moves or changes when it is swapped in.
   return (
-    <Popover
-      label={label}
-      align='end'
-      width='var(--guide-popover-w)'
-      // A bounded column, so the guide scrolls inside the popover rather than off the screen.
-      className={cn('flex max-h-[var(--guide-popover-max-h)] flex-col', className)}
-      trigger={
-        <Button variant='ghost' size='sm' tooltip='How this page works' tooltipMobile='off'>
-          <BookOpen aria-hidden />
-          {label}
-        </Button>
-      }
+    <Button
+      variant='ghost'
+      size='sm'
+      tooltip='How this page works'
+      tooltipMobile='off'
+      aria-haspopup='dialog'
+      aria-expanded={false}
+      onPointerEnter={load}
+      onFocus={() => {
+        load();
+        setEarly((e) => (e === 'press' ? e : 'focus'));
+      }}
+      onBlur={() => setEarly((e) => (e === 'focus' ? 'none' : e))}
+      onClick={() => {
+        load();
+        setEarly('press');
+      }}
     >
-      <ScrollArea space='none'>
-        <div data-cb-prose='' data-cb-guide='' className='flex flex-col gap-3 text-sm leading-relaxed text-foreground'>
-          {children}
-        </div>
-      </ScrollArea>
-    </Popover>
+      <BookOpen aria-hidden />
+      {label}
+    </Button>
   );
 }
-

package/src/react/components/PageGuidePopover.tsx

@@ -0,0 +1,52 @@
+import { BookOpen } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { Button } from './Button.js';
+import type { PageGuideButtonProps } from './PageGuideButton.js';
+import { Popover } from './Popover.js';
+import { ScrollArea } from './ScrollArea.js';
+
+export interface PageGuidePopoverProps extends PageGuideButtonProps {
+  label: string;
+  /** The placeholder trigger was pressed before this loaded: open at once. */
+  initialOpen?: boolean;
+  /** The placeholder trigger held the focus when this replaced it: take it back. */
+  initialFocus?: boolean;
+}
+
+/**
+ * The guide's popover — Radix Popover and its positioning engine. Loaded by
+ * `PageGuideButton.tsx`, which says why it is a chunk of its own.
+ */
+export function PageGuidePopover({ children, label, className, initialOpen = false, initialFocus = false }: PageGuidePopoverProps) {
+  const [open, setOpen] = useState(initialOpen);
+  const trigger = useRef<HTMLButtonElement | null>(null);
+  // Once, on mount: the swap from the placeholder must not drop a keyboard user's place.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the props are the placeholder's state at the swap, read once.
+  useEffect(() => {
+    if (initialFocus && !initialOpen) trigger.current?.focus();
+  }, []);
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      label={label}
+      align='end'
+      width='var(--guide-popover-w)'
+      // A bounded column, so the guide scrolls inside the popover rather than off the screen.
+      className={cn('flex max-h-[var(--guide-popover-max-h)] flex-col', className)}
+      trigger={
+        <Button ref={trigger} variant='ghost' size='sm' tooltip='How this page works' tooltipMobile='off'>
+          <BookOpen aria-hidden />
+          {label}
+        </Button>
+      }
+    >
+      <ScrollArea space='none'>
+        <div data-cb-prose='' data-cb-guide='' className='flex flex-col gap-3 text-sm leading-relaxed text-foreground'>
+          {children}
+        </div>
+      </ScrollArea>
+    </Popover>
+  );
+}

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

@@ -22,6 +22,14 @@ const typeAndEnter = (input: HTMLInputElement, text: string) => {
 };
 
 describe('TagsInput', () => {
+  test('the empty row fits the control height beside an Input — py-1, not the 38px py-1.5 (FND-4)', () => {
+    const { container } = render(<TagsInput value={[]} onChange={() => {}} aria-label='Tags' />);
+    const cls = (container.firstElementChild?.getAttribute('class') ?? '').split(/\s+/);
+    expect(cls).toContain('min-h-[var(--control-h-md)]');
+    expect(cls).toContain('py-1');
+    expect(cls).not.toContain('py-1.5');
+  });
+
   test('adds 3 tags then removes the middle one → ["a","c"]', () => {
     const { container, getByLabelText } = render(<Controlled />);
     const input = container.querySelector('input') as HTMLInputElement;

package/src/react/components/TagsInput.tsx

@@ -98,8 +98,10 @@ export function TagsInput({
     <div
       aria-invalid={ariaInvalid}
       className={cn(
+        // `py-1`, not `py-1.5`: the empty row is a 20px line + 8px + 2px border, under the min-height, so it
+        // sits at exactly the control height beside an Input; `py-1.5` made it 38px next to a 36px one (FND-4).
         // guardrails-ignore control-height-tokens: min-height chip-wrapping row (not fixed) — py- clears wrapped lines
-        'flex w-full flex-wrap items-center gap-1.5 rounded-field border border-field-border bg-field-bg px-2 py-1.5 transition focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30 aria-[invalid=true]:border-field-error',
+        'flex w-full flex-wrap items-center gap-1.5 rounded-field border border-field-border bg-field-bg px-2 py-1 transition focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30 aria-[invalid=true]:border-field-error',
         CONTROL_MIN_HEIGHT_CLASS[size],
         disabled && 'cursor-not-allowed opacity-50',
         className,

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/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');