cursedbelt 5.78.0 → 5.79.1

package/src/react/canvas-hud/HudControls.tsx

@@ -60,10 +60,16 @@ export interface HudZoomControlsProps {
   /** The canvas's own utilities, drawn before the zoom keys in the same pill (CNV-4 — utilities
    *  only; preferences and primary actions belong in the page's panel). */
   children?: ReactNode;
+  /**
+   * `vertical` stacks the keys down an edge — +, the zoom %, −, Fit, Center — the way Figma and
+   * Miro draw them on a phone, where a bottom-centre pill sits over the drawing and the thumb's
+   * sheet handle. Place it with `absolute right-3 top-1/2 -translate-y-1/2` or the like.
+   */
+  orientation?: 'horizontal' | 'vertical';
   className?: string;
 }
 
-/** CNV-3's essentials as one pill: −, the zoom %, +, Fit and Center. */
+/** CNV-3's essentials as one pill: −, the zoom %, +, Fit and Center (a column: + on top). */
 export function HudZoomControls({
   scale,
   onZoomIn,
@@ -73,20 +79,38 @@ export function HudZoomControls({
   fitLabel = 'Fit to screen',
   centerLabel = 'Center on the selection',
   children,
+  orientation = 'horizontal',
   className,
 }: HudZoomControlsProps) {
+  const vertical = orientation === 'vertical';
+  const zoomOut = (
+    <HudButton label='Zoom out' onClick={onZoomOut}>
+      <IconZoomOut />
+    </HudButton>
+  );
+  const zoomIn = (
+    <HudButton label='Zoom in' onClick={onZoomIn}>
+      <IconZoomIn />
+    </HudButton>
+  );
   return (
-    <HudPill role='group' aria-label='View' className={cn('gap-0.5 rounded-lg px-1 py-1', className)}>
+    <HudPill
+      role='group'
+      aria-label='View'
+      aria-orientation={orientation}
+      data-orientation={orientation}
+      className={cn('gap-0.5 rounded-lg px-1 py-1', vertical && 'flex-col py-1.5', className)}
+    >
       {children}
-      <HudButton label='Zoom out' onClick={onZoomOut}>
-        <IconZoomOut />
-      </HudButton>
-      <span className='min-w-11 text-center text-xs text-muted-foreground tabular-nums' data-testid='hud-zoom'>
+      {/* Up the column is in: + on top, as on every map. */}
+      {vertical ? zoomIn : zoomOut}
+      <span
+        className={cn('text-center text-xs text-muted-foreground tabular-nums', vertical ? 'w-full' : 'min-w-11')}
+        data-testid='hud-zoom'
+      >
         {Math.round(scale * 100)}%
       </span>
-      <HudButton label='Zoom in' onClick={onZoomIn}>
-        <IconZoomIn />
-      </HudButton>
+      {vertical ? zoomOut : zoomIn}
       <HudButton label={fitLabel} onClick={onFit}>
         <IconFit />
       </HudButton>

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

@@ -302,6 +302,46 @@ describe('AppShell', () => {
     expect(q(account as HTMLElement, '[data-testid="avatar"]')).not.toBeNull();
   });
 
+  test('headerCenter: a one-place app’s toolbar takes the center zone, in place of the command spine', () => {
+    const { container } = render(
+      <AppShell navHeader={<h1>App</h1>} headerCenter={<div data-testid='toolbar'>tools</div>}>
+        x
+      </AppShell>,
+    );
+    const center = q(container, '[data-cb-header-zone="center"]') as HTMLElement;
+    expect(q(center, '[data-testid="toolbar"]')).not.toBeNull();
+    expect(q(container, '[data-cb-commandbar]')).toBeNull();
+  });
+
+  test('headerCenter is ignored when nav gives the header places to draw', () => {
+    const { container } = render(
+      <AppShell nav={nav} onNavigate={() => {}} headerCenter={<div data-testid='toolbar'>tools</div>}>
+        x
+      </AppShell>,
+    );
+    expect(q(container, '[data-testid="toolbar"]')).toBeNull();
+  });
+
+  test('immersive: the header and the bottom chrome step aside, a banner stays, the content stays', () => {
+    const { container, rerender } = render(
+      <AppShell nav={nav} onNavigate={() => {}} account={<span>A</span>} banners={[{ id: 'b', tone: 'error', message: 'Down' }]}>
+        page content
+      </AppShell>,
+    );
+    expect(q(container, '[data-cb-appheader]')).not.toBeNull();
+    expect(q(container, '[data-cb-placebar]')).not.toBeNull();
+    rerender(
+      <AppShell immersive nav={nav} onNavigate={() => {}} account={<span>A</span>} banners={[{ id: 'b', tone: 'error', message: 'Down' }]}>
+        page content
+      </AppShell>,
+    );
+    expect(q(container, '[data-cb-appshell]')?.hasAttribute('data-cb-immersive')).toBe(true);
+    expect(q(container, '[data-cb-appheader]')).toBeNull();
+    expect(q(container, '[data-cb-placebar]')).toBeNull();
+    expect(container.textContent).toContain('Down');
+    expect(container.textContent).toContain('page content');
+  });
+
   test('the active place carries aria-current=page in every rail variant and the PlaceBar', () => {
     const { container } = render(
       <AppShell nav={station} activeHref='/console' onNavigate={() => {}}>

package/src/react/components/AppShell.tsx

@@ -1,4 +1,4 @@
-import { type ElementType, type ReactNode, type Ref, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { type ElementType, type ReactNode, type Ref, useEffect, useState } from 'react';
 import {
   allowAllGate,
   deriveSideNavDomains,
@@ -13,6 +13,7 @@ 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 { usePublishedBottomChrome } from '../hooks/usePublishedBottomChrome.js';
 import { SideNav } from '../nav/SideNav.js';
 import { TopBarPlaces } from '../nav/TopBar.js';
 import { CommandSourceProvider, useCommandSources } from '../palette/commandSources.js';
@@ -137,6 +138,22 @@ export interface AppShellProps {
   /** App slot at the trailing edge of the command spine (e.g. presence dots). */
   commandBarExtra?: ReactNode;
 
+  /**
+   * The header's center zone, for an app with no places and no command spine: a one-place
+   * canvas app's own toolbar (its depth switch, Save, Export) folded INTO the header instead of
+   * stacked under it as a second bar. On a phone that row is a quarter of what the canvas gets
+   * (arch, forge task 3059). Ignored when `nav` gives the header places to draw; otherwise it
+   * REPLACES the command spine (`onOpenCommand`, `onCapture`, `commandBarExtra`) — put them in it.
+   */
+  headerCenter?: ReactNode;
+
+  /**
+   * Presentation mode: the header and the bottom chrome (dock, `PlaceBar`) step aside so the
+   * content has the whole viewport, until the app turns it off — a canvas's double-tap on blank
+   * space (Figma's and Miro's ⌘\). Banners stay: one is a fault the reader must still see.
+   */
+  immersive?: boolean;
+
   /** Account chrome behind the avatar (profile/settings/sign-out) — NOT a nav door
    *  (§6). Rendered at the trailing edge of the top spine. */
   account?: ReactNode;
@@ -262,6 +279,8 @@ function Shell({
   commandLabel,
   commandHint,
   commandBarExtra,
+  headerCenter,
+  immersive = false,
   account,
   bottomDock,
   palette,
@@ -302,8 +321,8 @@ function Shell({
     else window.location.assign(path);
   };
 
-  const showSpine = Boolean(nav || navHeader || account || openCommand || onCapture || commandBarExtra);
-  const showBottom = Boolean(bottomDock || nav);
+  const showSpine = !immersive && Boolean(nav || navHeader || account || openCommand || onCapture || commandBarExtra || headerCenter);
+  const showBottom = !immersive && Boolean(bottomDock || nav);
   const bottomChromeRef = usePublishedBottomChrome(showBottom);
   // Chrome that lets the field through. The rails/spine keep their own directional
   // border either way — only the FILL changes, so the layout is byte-identical and
@@ -344,6 +363,7 @@ function Shell({
     <div
       data-cb-appshell=''
       data-cb-nav-pattern={pattern}
+      data-cb-immersive={immersive ? '' : undefined}
       className={cn(
         'flex h-dvh flex-col overflow-hidden bg-background text-foreground',
         // `isolation: isolate` is load-bearing, not decoration: the blobs blend with
@@ -397,6 +417,8 @@ function Shell({
                   linkProps: navLinkComponent ? undefined : { onClick: routeClick(d.path, onNavigate) },
                 }))}
               />
+            ) : headerCenter ? (
+              headerCenter
             ) : (
               commandBar
             )}
@@ -507,27 +529,3 @@ function Shell({
   );
 }
 
-/**
- * Publishes the bottom chrome's height (dock + `PlaceBar` + safe area) as
- * `--cb-bottom-chrome-h` on the root, so what floats over the page — the `Toaster`'s stack
- * (OVL-9) — rises above the navigation instead of covering it. A `PlaceBar` hidden at `md` up
- * measures 0, so the desktop stack drops back to the corner by itself.
- */
-function usePublishedBottomChrome(shown: boolean) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `shown` mounts or drops the element the ref points at.
-  useLayoutEffect(() => {
-    const el = ref.current;
-    const root = document.documentElement;
-    if (!el) return;
-    const publish = () => root.style.setProperty('--cb-bottom-chrome-h', `${el.offsetHeight}px`);
-    publish();
-    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(publish);
-    observer?.observe(el);
-    return () => {
-      observer?.disconnect();
-      root.style.removeProperty('--cb-bottom-chrome-h');
-    };
-  }, [shown]);
-  return ref;
-}

package/src/react/components/ChipFilterStrip.tsx

@@ -1,6 +1,5 @@
-import type { ReactNode } from 'react';
-import { cn, RAW_BUTTON } from '../lib/cn.js';
-import { PRESS } from '../lib/press.js';
+import { cn } from '../lib/cn.js';
+import { Chip } from './filterChip.js';
 import { ScrollArea } from './ScrollArea.js';
 
 export interface ChipOption {
@@ -104,38 +103,3 @@ export function ChipFilterStrip({
     </fieldset>
   );
 }
-
-interface ChipProps {
-  active: boolean;
-  onClick: () => void;
-  children: ReactNode;
-}
-
-function Chip({ active, onClick, children }: ChipProps) {
-  return (
-    <button
-      // guardrails-ignore no-raw-action-button: presentational filter-chip toggle —
-      // reflects local filter state (aria-pressed), no destructive/mutating intent.
-      type='button'
-      onClick={onClick}
-      aria-pressed={active}
-      className={cn(
-        RAW_BUTTON,
-        // 44 px min tap target height via py + min-h (STANDARDS §4a). px-4 keeps every
-        // pill's internal padding identical regardless of label length.
-        'inline-flex min-h-11 shrink-0 cursor-pointer items-center rounded-full px-4 text-sm font-medium',
-        PRESS,
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-        // Soft active state — an accent tint + accent text (the standardized active
-        // treatment shared with nav items and the `accent` Badge tone), not a stark
-        // solid accent block. `text-accent-strong` (not plain `text-accent`) — the
-        // /15 tint only clears 4.43:1 with the base accent hue, under AA (cbux-101).
-        active
-          ? 'bg-accent/15 text-accent-strong ring-1 ring-inset ring-accent/30'
-          : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
-      )}
-    >
-      {children}
-    </button>
-  );
-}

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

@@ -162,6 +162,22 @@ describe('FileDropZone', () => {
     expect(input.className).toContain('peer');
   });
 
+  /**
+   * 🔴 Transparent in EVERY state, disabled included (2026-10-13, vault-stage at 390 and 1440): the
+   * input is cursedbelt's `Input`, whose field classes end `disabled:opacity-50` — a variant, so it
+   * outranks the zone's `opacity-0` exactly when the zone is disabled, and the browser's own
+   * "Choose Files · No file chosen" was painted over the hint saying why the zone is off.
+   */
+  test('a DISABLED zone keeps its input transparent — no opacity class but opacity-0, in any state', () => {
+    for (const disabled of [false, true]) {
+      const { container, unmount } = render(<FileDropZone disabled={disabled} onFiles={() => {}} />);
+      const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+      const opacities = input.className.split(/\s+/).filter((c) => /(^|:)opacity-/.test(c));
+      expect({ disabled, opacities: opacities.filter((c) => !/(^|:)opacity-0$/.test(c)) }).toEqual({ disabled, opacities: [] });
+      unmount();
+    }
+  });
+
   /**
    * 🔴 The 2026-09-28 roms report: the owner unpacked a `.7z` in Finder and dropped
    * the FOLDER — `Loaded (USA) (En,Fr)/` holding a readme and, one level down, a

package/src/react/components/FileDropZone.tsx

@@ -342,7 +342,9 @@ export function FileDropZone({
         accept={accept}
         multiple={multiple}
         disabled={disabled}
-        className='peer pointer-events-none absolute inset-0 h-full w-full opacity-0'
+        // `disabled:opacity-0` too: the field classes' `disabled:opacity-50` is a variant, and would
+        // paint the browser's "Choose Files" over a disabled zone's hint (FileDropZone.spec.tsx).
+        className='peer pointer-events-none absolute inset-0 h-full w-full opacity-0 disabled:opacity-0'
         tabIndex={browse === 'both' ? -1 : undefined}
         {...(browse === 'folder' ? DIRECTORY_PICKER : {})}
         onChange={(e) => {

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

@@ -0,0 +1,89 @@
+import { afterEach, describe, expect, it } from 'bun:test';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { KanbanBoard } from './KanbanBoard.js';
+
+afterEach(() => cleanup());
+
+interface Card {
+  id: string;
+  title: string;
+}
+const COLUMNS = [
+  { id: 'todo', title: 'To do', items: [{ id: 'a', title: 'Spec the API' }, { id: 'b', title: 'Pick colors' }] },
+  { id: 'done', title: 'Done', items: [] as Card[] },
+];
+
+function board(over: Partial<Parameters<typeof KanbanBoard<Card>>[0]> = {}) {
+  const opened: string[] = [];
+  const added: string[] = [];
+  render(
+    <KanbanBoard<Card>
+      aria-label='Work'
+      columns={COLUMNS}
+      getKey={(c) => c.id}
+      cardLabel={(c) => c.title}
+      renderCard={(c) => <span>{c.title}</span>}
+      onOpen={(c) => opened.push(c.id)}
+      onAdd={(id) => added.push(id)}
+      addLabel='Add task'
+      {...over}
+    />,
+  );
+  return { opened, added };
+}
+
+describe('KanbanBoard', () => {
+  it('draws each column with its name and count, and says so for an empty one', () => {
+    board();
+    expect(screen.getByRole('region', { name: 'To do, 2 cards' })).toBeTruthy();
+    expect(screen.getByRole('region', { name: 'Done, 0 cards' })).toBeTruthy();
+    expect(screen.getByText('Nothing here yet')).toBeTruthy();
+  });
+
+  it('a card is the tap target: click and Enter open it', () => {
+    const { opened } = board();
+    fireEvent.click(screen.getByRole('button', { name: 'Spec the API' }));
+    fireEvent.keyDown(screen.getByRole('button', { name: 'Pick colors' }), { key: 'Enter' });
+    expect(opened).toEqual(['a', 'b']);
+  });
+
+  it("the column's + starts a card IN that column, and names the column", () => {
+    const { added } = board();
+    fireEvent.click(screen.getByRole('button', { name: 'Add task to Done' }));
+    expect(added).toEqual(['done']);
+  });
+
+  it('marks the open card, and offers New column only when asked', () => {
+    board({ selectedKey: 'b' });
+    expect(document.querySelector('[data-cb-kanban-card="b"]')?.getAttribute('data-selected')).toBe('true');
+    expect(document.querySelector('[data-cb-kanban-card="a"]')?.hasAttribute('data-selected')).toBe(false);
+    expect(screen.queryByRole('button', { name: /New column/ })).toBeNull();
+    cleanup();
+    let made = 0;
+    board({ onNewColumn: () => made++ });
+    fireEvent.click(screen.getByRole('button', { name: /New column/ }));
+    expect(made).toBe(1);
+  });
+
+  it("a phone's tray names every column with its count; a pill glides to its column and lights", () => {
+    const glided: Element[] = [];
+    const original = Element.prototype.scrollIntoView;
+    Element.prototype.scrollIntoView = function (this: Element) {
+      glided.push(this);
+    };
+    try {
+      board();
+      const tray = screen.getByRole('navigation', { name: 'Work: columns' });
+      const done = Array.from(tray.querySelectorAll('button')).find((b) => b.textContent === 'Done0');
+      expect(Array.from(tray.querySelectorAll('button')).map((b) => [b.textContent, b.getAttribute('aria-pressed')])).toEqual([
+        ['To do2', 'true'],
+        ['Done0', 'false'],
+      ]);
+      fireEvent.click(done as HTMLButtonElement);
+      expect(glided.map((el) => el.getAttribute('data-cb-kanban-column'))).toEqual(['done']);
+      expect(done?.getAttribute('aria-pressed')).toBe('true');
+    } finally {
+      Element.prototype.scrollIntoView = original;
+    }
+  });
+});

package/src/react/components/KanbanBoard.tsx

@@ -0,0 +1,270 @@
+import { Plus } from 'lucide-react';
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { registerAutoScroll } from '../hooks/pragmaticDnd.js';
+import { useCrossContainerDrag } from '../hooks/useCrossContainerDrag.js';
+import { cn } from '../lib/cn.js';
+import { Badge } from './Badge.js';
+import { Button } from './Button.js';
+import { CardTapTarget } from './CardTapTarget.js';
+import { Chip } from './filterChip.js';
+import { IconButton } from './IconButton.js';
+import { ScrollArea } from './ScrollArea.js';
+
+/** One column of a {@link KanbanBoard}: what it is called, and the cards in it, in order. */
+export interface KanbanColumn<T> {
+  id: string;
+  title: string;
+  items: readonly T[];
+  /** A glyph before the title. */
+  icon?: ReactNode;
+}
+
+export interface KanbanBoardProps<T> {
+  columns: readonly KanbanColumn<T>[];
+  /** A stable key per card, unique across every column. */
+  getKey: (item: T) => string;
+  /** What is ON the card — a glyph, a title, one detail line. The board draws the card around it. */
+  renderCard: (item: T) => ReactNode;
+  /** The card's accessible name, and the text of the ghost that follows a drag. */
+  cardLabel: (item: T) => string;
+  /** A card was clicked, tapped, or Enter'd. */
+  onOpen: (item: T) => void;
+  /** The card that is open — drawn as the active place (NAV-6). */
+  selectedKey?: string | null;
+  /**
+   * A card was dropped in ANOTHER column. Omit it and the board is read-only: nothing drags.
+   * Order within a column is the consumer's (the board never reorders), so a drop back into
+   * its own column is not a move.
+   */
+  onMove?: (itemKey: string, fromColumn: string, toColumn: string) => void;
+  /** The column's `+`: start a new card in it. */
+  onAdd?: (columnId: string) => void;
+  /** The `+`'s verb — "Add entry", "Add task". */
+  addLabel?: string;
+  /** A trailing "New column" button after the last column. */
+  onNewColumn?: () => void;
+  newColumnLabel?: string;
+  /** What an empty column says. */
+  emptyText?: string;
+  'aria-label': string;
+  className?: string;
+}
+
+/**
+ * Cards in columns, dragged between them — the board Linear and Trello settle on (forge task
+ * 3030, the vault's Kanban canvas). The columns scroll sideways as a strip and each column
+ * scrolls on its own; a card is the whole tap target (`CardTapTarget`) and drags through
+ * {@link useCrossContainerDrag} (pointer, touch, the edge indicator, auto-scroll).
+ *
+ * Under 768px a phone sees ONE column at a time: the strip snaps column by column, and the
+ * column titles become a pill tray above it — tap one to glide there, and the one in view is
+ * lit (forge task 3033, the redesign's "Pill Segmenter"). Under 1024px the strip snaps too.
+ *
+ * 🔴 Dragging is a PLUS. Every move a drag makes must also be reachable from the card's own
+ * detail (a folder or status picker): the hook's keyboard lift does not yet carry a card across
+ * columns, so the board never relies on it.
+ */
+export function KanbanBoard<T>({
+  columns,
+  getKey,
+  renderCard,
+  cardLabel,
+  onOpen,
+  selectedKey = null,
+  onMove,
+  onAdd,
+  addLabel = 'Add',
+  onNewColumn,
+  newColumnLabel = 'New column',
+  emptyText = 'Nothing here yet',
+  'aria-label': ariaLabel,
+  className,
+}: KanbanBoardProps<T>) {
+  const containers = useMemo(() => columns.map((c) => ({ id: c.id, items: [...c.items] })), [columns]);
+  const onDrop = useCallback(
+    (from: string, to: string, fromIndex: number) => {
+      if (from === to || !onMove) return;
+      const item = containers.find((c) => c.id === from)?.items[fromIndex];
+      if (item !== undefined) onMove(getKey(item), from, to);
+    },
+    [containers, getKey, onMove],
+  );
+  const { ContainerContext, Container, Item } = useCrossContainerDrag<T>({
+    containers,
+    getKey,
+    onMove: onDrop,
+    disabled: !onMove,
+    renderOverlay: (item) => (
+      <div className='max-w-64 truncate rounded-md bg-surface px-3 py-2 text-sm font-medium text-foreground shadow-2xl ring-1 ring-accent'>
+        {cardLabel(item)}
+      </div>
+    ),
+  });
+
+  // The phone's tray follows the column in view. Columns are the strip's full width there, so
+  // at most one is 60 % visible; wider, the tray is not drawn and this is unused.
+  const stripRef = useRef<HTMLDivElement | null>(null);
+  const columnEls = useRef(new Map<string, HTMLElement>());
+  const [inView, setInView] = useState<string | null>(null);
+  const columnIds = columns.map((c) => c.id).join('\n');
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `columnIds` is the trigger — a column added or gone re-observes the set held in the ref.
+  useEffect(() => {
+    const root = stripRef.current;
+    if (!root || typeof IntersectionObserver === 'undefined') return;
+    const io = new IntersectionObserver(
+      (records) => {
+        for (const r of records) if (r.isIntersecting) setInView((r.target as HTMLElement).dataset.cbKanbanColumn ?? null);
+      },
+      { root, threshold: 0.6 },
+    );
+    for (const el of columnEls.current.values()) io.observe(el);
+    return () => io.disconnect();
+  }, [columnIds]);
+  // A card carried to the strip's edge scrolls the strip, for a mouse and a finger: the hook
+  // only registers each card's NEAREST scroller, which is its column.
+  useEffect(() => {
+    const strip = stripRef.current;
+    return strip && onMove ? registerAutoScroll(strip) : undefined;
+  }, [onMove]);
+  const current = columns.some((c) => c.id === inView) ? inView : (columns[0]?.id ?? null);
+  const showColumn = (id: string) => {
+    columnEls.current.get(id)?.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });
+    setInView(id);
+  };
+
+  return (
+    <ContainerContext>
+      <div className={cn('flex min-h-0 min-w-0 flex-1 flex-col gap-2', className)} data-cb-kanban-frame>
+        <nav aria-label={`${ariaLabel}: columns`} data-cb-kanban-tray className='min-w-0 md:hidden'>
+          <ScrollArea
+            axis='x'
+            space='none'
+            safeArea={false}
+            className='flex items-center gap-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+          >
+            {columns.map((column) => (
+              <Chip key={column.id} active={column.id === current} onClick={() => showColumn(column.id)}>
+                {column.title}
+                <span className='ml-1 text-xs tabular-nums'>{column.items.length}</span>
+              </Chip>
+            ))}
+          </ScrollArea>
+        </nav>
+        <ScrollArea
+          axis='x'
+          fade
+          space='compact'
+          safeArea={false}
+          role='group'
+          aria-label={ariaLabel}
+          data-cb-kanban
+          scrollRef={stripRef}
+          className='min-h-0 flex-1 max-lg:snap-x max-lg:snap-mandatory'
+        >
+          <div className='flex h-full items-start gap-3'>
+            {columns.map((column) => (
+              <Container key={column.id} containerId={column.id}>
+                {({ setNodeRef, isOver, items }) => (
+                  <section
+                    ref={(node) => {
+                      setNodeRef(node);
+                      if (node) columnEls.current.set(column.id, node);
+                      else columnEls.current.delete(column.id);
+                    }}
+                    aria-label={`${column.title}, ${items.length} ${items.length === 1 ? 'card' : 'cards'}`}
+                    data-cb-kanban-column={column.id}
+                    className={cn(
+                      'flex max-h-full w-72 shrink-0 snap-start flex-col gap-2 rounded-lg bg-muted/40 p-2 transition-colors max-md:w-full',
+                      isOver && 'bg-muted ring-1 ring-inset ring-accent/50',
+                    )}
+                  >
+                    <header className='flex min-h-8 items-center gap-2 px-1'>
+                      {column.icon && (
+                        <span aria-hidden className='flex shrink-0 text-muted-foreground [&_svg]:size-4'>
+                          {column.icon}
+                        </span>
+                      )}
+                      <h3 className='m-0 min-w-0 truncate text-sm font-medium text-foreground'>{column.title}</h3>
+                      <Badge tone='neutral' className='tabular-nums'>
+                        {items.length}
+                      </Badge>
+                      {onAdd && (
+                        <IconButton
+                          size='sm'
+                          className='ml-auto'
+                          label={`${addLabel} to ${column.title}`}
+                          onClick={() => onAdd(column.id)}
+                        >
+                          <Plus />
+                        </IconButton>
+                      )}
+                    </header>
+                    {/* `overscroll-x-auto`: a y-scroller is a scroll container on BOTH axes, and the
+                      ScrollArea's `overscroll-contain` kept every sideways swipe and wheel that
+                      started on a card from reaching the strip (vault-stage at 390, 3033). */}
+                  <ScrollArea
+                    axis='y'
+                    space='compact'
+                    safeArea={false}
+                    fade
+                    className='flex flex-col gap-2 overscroll-x-auto'
+                  >
+                      {items.length === 0 ? (
+                        <p className='m-0 rounded-md border border-dashed border-border px-3 py-6 text-center text-caption text-muted-foreground'>
+                          {emptyText}
+                        </p>
+                      ) : (
+                        items.map((item) => {
+                          const key = getKey(item);
+                          const selected = key === selectedKey;
+                          return (
+                            <Item key={key} containerId={column.id} itemKey={key}>
+                              {({ setNodeRef: cardRef, isDragging }) => (
+                                <div
+                                  ref={cardRef}
+                                  data-cb-kanban-card={key}
+                                  data-selected={selected || undefined}
+                                  className={cn('relative isolate', isDragging && 'opacity-40')}
+                                >
+                                  <CardTapTarget
+                                    aria-label={cardLabel(item)}
+                                    onClick={() => onOpen(item)}
+                                    className={cn(
+                                      // A border, not a ring: the column scrolls, and a scroller clips the
+                                      // ring a card draws OUTSIDE itself (seen on vault-stage, 2026-10-13).
+                                      'flex w-full flex-col gap-1 rounded-md border border-border bg-surface px-3 py-2 text-sm transition-colors hover:border-border-strong focus-visible:border-accent focus-visible:outline-none',
+                                      onMove && 'cursor-grab active:cursor-grabbing',
+                                      selected && 'border-accent/70',
+                                    )}
+                                  >
+                                    {renderCard(item)}
+                                  </CardTapTarget>
+                                </div>
+                              )}
+                            </Item>
+                          );
+                        })
+                      )}
+                    </ScrollArea>
+                  </section>
+                )}
+              </Container>
+            ))}
+            {onNewColumn && (
+              <Button
+                variant='ghost'
+                size='sm'
+                className='shrink-0'
+                leftIcon={<Plus />}
+                tooltip={`${newColumnLabel} — a new column at the end`}
+                onClick={onNewColumn}
+              >
+                {newColumnLabel}
+              </Button>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    </ContainerContext>
+  );
+}