cursedbelt 5.78.0 → 5.79.1

package/src/react/components/SelectFieldImpl.tsx

@@ -0,0 +1,140 @@
+import * as RSelect from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { cn, RAW_BUTTON } from '../lib/cn.js';
+import { useFloatingContainer } from '../lib/floatingContainer.js';
+import {
+  FLOATING_ANIMATION,
+  FLOATING_COLLISION_PADDING,
+  FLOATING_CONTENT_BASE,
+  FLOATING_ITEM_BASE,
+} from '../lib/floatingStyles.js';
+import {
+  SELECT_VALUE_CLASS,
+  type SelectFieldImplProps,
+  selectGroupsOf,
+  selectTriggerClass,
+} from '../lib/selectField.js';
+
+/**
+ * The Radix Select behind {@link SelectField} — loaded as its own chunk by `SelectField.tsx`, which
+ * says why. Not exported from the package: render `SelectField`.
+ */
+export default function SelectFieldImpl({
+  value,
+  onValueChange,
+  options = [],
+  groups = [],
+  placeholder = 'Select…',
+  disabled,
+  fieldStyle = true,
+  size = 'md',
+  id,
+  name,
+  required,
+  className,
+  emptyLabel,
+  emptyHint,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-invalid': ariaInvalid,
+  'aria-describedby': ariaDescribedBy,
+  initialOpen = false,
+  initialFocus = false,
+}: SelectFieldImplProps) {
+  const allGroups = selectGroupsOf({ options, groups });
+  const empty = allGroups.every((group) => group.options.length === 0);
+  const container = useFloatingContainer();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  // The light trigger this replaced had the keyboard focus: keep it here, or it drops to <body>.
+  // An `initialOpen` select moves focus into its list itself, and hands it back on close.
+  useEffect(() => {
+    if (initialFocus && !initialOpen) triggerRef.current?.focus();
+  }, [initialFocus, initialOpen]);
+
+  return (
+    <RSelect.Root
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      name={name}
+      required={required}
+      defaultOpen={initialOpen}
+    >
+      <RSelect.Trigger
+        ref={triggerRef}
+        id={id}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-invalid={ariaInvalid}
+        aria-describedby={ariaDescribedBy}
+        className={cn(RAW_BUTTON, selectTriggerClass({ fieldStyle, size, className }))}
+      >
+        <span className={SELECT_VALUE_CLASS}>
+          <RSelect.Value placeholder={placeholder} />
+        </span>
+        <RSelect.Icon asChild>
+          <ChevronDown className='size-4 shrink-0 opacity-50' />
+        </RSelect.Icon>
+      </RSelect.Trigger>
+      <RSelect.Portal container={container}>
+        <RSelect.Content
+          position='popper'
+          sideOffset={4}
+          collisionPadding={FLOATING_COLLISION_PADDING}
+          className={cn(
+            FLOATING_CONTENT_BASE,
+            FLOATING_ANIMATION,
+            'max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] p-1',
+          )}
+        >
+          <RSelect.ScrollUpButton className='flex cursor-default items-center justify-center py-1'>
+            <ChevronUp className='size-4' />
+          </RSelect.ScrollUpButton>
+          <RSelect.Viewport>
+            {empty && (
+              // Not a `RSelect.Item`: an empty state is a statement, not a choice, and
+              // Radix would make it focusable and type-ahead-matchable.
+              <div className='flex flex-col gap-0.5 px-2 py-2.5 text-left'>
+                <span className='text-sm font-medium'>
+                  {emptyLabel ?? 'Nothing to choose from yet'}
+                </span>
+                {emptyHint && <span className='text-xs text-muted-foreground'>{emptyHint}</span>}
+              </div>
+            )}
+            {allGroups.map((group, gi) => (
+              <RSelect.Group key={group.label ?? gi}>
+                {group.label && (
+                  <RSelect.Label className='px-2 py-1.5 text-xs font-semibold text-muted-foreground'>
+                    {group.label}
+                  </RSelect.Label>
+                )}
+                {group.options.map((opt) => (
+                  <RSelect.Item
+                    key={opt.value}
+                    value={opt.value}
+                    disabled={opt.disabled}
+                    className={cn(FLOATING_ITEM_BASE, 'pr-8')}
+                  >
+                    <RSelect.ItemIndicator className='absolute right-2 flex size-4 items-center justify-center'>
+                      <Check className='size-3' />
+                    </RSelect.ItemIndicator>
+                    <RSelect.ItemText>{opt.label}</RSelect.ItemText>
+                    {opt.description && (
+                      <span className='text-xs text-muted-foreground'>{opt.description}</span>
+                    )}
+                  </RSelect.Item>
+                ))}
+                {gi < allGroups.length - 1 && <RSelect.Separator className='my-1 h-px bg-border' />}
+              </RSelect.Group>
+            ))}
+          </RSelect.Viewport>
+          <RSelect.ScrollDownButton className='flex cursor-default items-center justify-center py-1'>
+            <ChevronDown className='size-4' />
+          </RSelect.ScrollDownButton>
+        </RSelect.Content>
+      </RSelect.Portal>
+    </RSelect.Root>
+  );
+}

package/src/react/components/filterChip.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { cn, RAW_BUTTON } from '../lib/cn.js';
+import { PRESS } from '../lib/press.js';
+
+/*
+ * The pill `ChipFilterStrip` draws, and `KanbanBoard`'s column tray on a phone. Its own module,
+ * off every barrel and subpath: it is a part, not a component an app reaches for.
+ */
+
+export interface ChipProps {
+  active: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}
+
+export 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/hooks/pointerDnd.spec.ts

@@ -12,6 +12,9 @@ import {
   subscribePointerDragMonitor,
   TOUCH_ACTIVATION_DELAY_MS,
   TOUCH_ACTIVATION_TOLERANCE_PX,
+  registerTouchEdgeScroll,
+  TOUCH_EDGE_MAX_STEP_PX,
+  touchEdgeStep,
   wireTouchDragSource,
   withinTolerance,
 } from './pointerDnd.js';
@@ -239,17 +242,41 @@ describe('createTouchDragSession', () => {
 });
 
 describe('wireTouchDragSource (DOM glue)', () => {
-  test('sets touch-action none while wired and restores it on cleanup', () => {
+  test('leaves the element pannable: a move before the long press is a scroll, one after it is the drag', async () => {
     const element = document.createElement('div');
     element.style.touchAction = 'pan-y';
+    document.body.append(element);
     const cleanup = wireTouchDragSource({
       element,
       getInitialData: () => ({}),
       onDragStateChange: () => {},
+      delayMs: 5,
     });
-    expect(element.style.touchAction).toBe('none');
-    cleanup();
+    // The page keeps its own touch-action — `none` here made a phone board unscrollable from a card.
     expect(element.style.touchAction).toBe('pan-y');
+
+    const down = new Event('pointerdown', { bubbles: true, cancelable: true });
+    Object.assign(down, { pointerType: 'touch', isPrimary: true, pointerId: 7, clientX: 10, clientY: 10 });
+    const touchMove = () => {
+      const e = new Event('touchmove', { bubbles: true, cancelable: true });
+      element.dispatchEvent(e);
+      return e.defaultPrevented;
+    };
+    const menu = () => {
+      const e = new Event('contextmenu', { bubbles: true, cancelable: true });
+      element.dispatchEvent(e);
+      return e.defaultPrevented;
+    };
+
+    expect(menu()).toBe(false); // no press, no interference
+    element.dispatchEvent(down);
+    expect(touchMove()).toBe(false); // still waiting: the browser may scroll
+    expect(menu()).toBe(true); // the long press is ours, not Android's menu
+    await Bun.sleep(20);
+    expect(touchMove()).toBe(true); // the drag is live: the pan is cancelled
+    cleanup();
+    expect(touchMove()).toBe(false);
+    element.remove();
   });
 
   test('a long-press touch drag reaches the shared monitor and toggles the target', async () => {
@@ -309,3 +336,62 @@ describe('wireTouchDragSource (DOM glue)', () => {
     target.remove();
   });
 });
+
+describe('touch edge auto-scroll', () => {
+  const box = { left: 0, right: 400, top: 100, bottom: 700 };
+
+  test('nothing in the middle; faster the nearer the edge; full speed past it, while level with the box', () => {
+    expect(touchEdgeStep(box, 200, 400)).toEqual({ dx: 0, dy: 0 });
+    expect(touchEdgeStep(box, 399, 400).dx).toBe(TOUCH_EDGE_MAX_STEP_PX);
+    expect(touchEdgeStep(box, 376, 400).dx).toBeGreaterThan(0);
+    expect(touchEdgeStep(box, 376, 400).dx).toBeLessThan(TOUCH_EDGE_MAX_STEP_PX);
+    expect(touchEdgeStep(box, 2, 400).dx).toBeLessThan(0);
+    expect(touchEdgeStep(box, 200, 690).dy).toBeGreaterThan(0);
+    // Past the right side (a thumb at the screen edge, the scroller inset by a gutter): full speed.
+    expect(touchEdgeStep(box, 420, 400)).toEqual({ dx: TOUCH_EDGE_MAX_STEP_PX, dy: 0 });
+    // Above the box and past its side: level with neither, so it scrolls only toward the top.
+    expect(touchEdgeStep(box, 420, 50)).toEqual({ dx: 0, dy: 0 });
+    expect(touchEdgeStep(box, 200, 50)).toEqual({ dx: 0, dy: -TOUCH_EDGE_MAX_STEP_PX });
+  });
+
+  test("a touch drag held at a scroller's edge scrolls it, snapping off until the drop", async () => {
+    const container = document.createElement('div');
+    container.style.scrollSnapType = 'x mandatory';
+    const card = document.createElement('div');
+    container.append(card);
+    document.body.append(container);
+    container.getBoundingClientRect = () => ({ ...box, x: 0, y: 100, width: 400, height: 600, toJSON: () => ({}) }) as DOMRect;
+    const scrolled: number[] = [];
+    container.scrollBy = ((x: number) => scrolled.push(x)) as typeof container.scrollBy;
+    const originalFromPoint = document.elementsFromPoint;
+    document.elementsFromPoint = () => [];
+
+    const off = registerTouchEdgeScroll(container);
+    const unwire = wireTouchDragSource({ element: card, getInitialData: () => ({}), onDragStateChange: () => {}, delayMs: 5 });
+    const pointer = (type: string, x: number, y: number) => {
+      const e = new Event(type, { bubbles: true, cancelable: true });
+      Object.assign(e, { pointerType: 'touch', isPrimary: true, pointerId: 3, clientX: x, clientY: y });
+      return e;
+    };
+    try {
+      card.dispatchEvent(pointer('pointerdown', 200, 400));
+      await Bun.sleep(20);
+      window.dispatchEvent(pointer('pointermove', 395, 400)); // carried to the right edge, then held
+      await Bun.sleep(120);
+      expect(scrolled.length).toBeGreaterThan(1);
+      expect(scrolled.every((dx) => dx > 0)).toBe(true);
+      expect(container.style.scrollSnapType).toBe('none');
+      window.dispatchEvent(pointer('pointerup', 395, 400));
+      const after = scrolled.length;
+      await Bun.sleep(60);
+      expect(scrolled.length).toBe(after); // the drop stops it
+      expect(container.style.scrollSnapType).toBe('x mandatory');
+    } finally {
+      unwire();
+      off();
+      document.elementsFromPoint = originalFromPoint;
+      container.remove();
+    }
+  });
+});
+

package/src/react/hooks/pointerDnd.ts

@@ -324,9 +324,15 @@ function elementsFromPointSafe(x: number, y: number): Element[] {
 /**
  * Wire touch-drag onto one draggable element, using the shared registry + monitor bus.
  * Only `touch` pointers are handled — mouse/pen still drive pragmatic's native adapter,
- * so the two engines never fight over the same gesture. Sets `touch-action: none` on the
- * element while wired (restored on cleanup) so a long-press isn't stolen by the browser's
- * scroll/gesture handling — the same guard the `@dnd-kit` sensors relied on.
+ * so the two engines never fight over the same gesture.
+ *
+ * 🔴 The element stays PANNABLE. A finger that moves before the long press fires is a scroll,
+ * and the browser runs it; only once the drag is live does a non-passive `touchmove` on the
+ * element cancel the browser's pan, so the finger drives the drag instead — the way
+ * `@dnd-kit`'s TouchSensor does it. This used to set `touch-action: none` on the element, and
+ * on a phone a board whose columns are full of cards could not be swiped or scrolled from any
+ * card (forge task 3033, seen on vault-stage at 390). While a press is in flight the
+ * long-press `contextmenu` (Android's menu) is cancelled too.
  *
  * The `pointerdown` listener lives on the element; the `pointermove`/`up`/`cancel`/
  * `keydown` listeners are only attached on the `window` for the life of one interaction
@@ -358,8 +364,6 @@ export function wireTouchDragSource(config: WireTouchDragConfig): CleanupFn {
 
   const onPointerMove = (event: PointerEvent): void => {
     if (event.pointerId !== activePointerId) return;
-    // Once dragging, suppress the browser's scroll so the finger drives the drag.
-    if (session.isActive() && event.cancelable) event.preventDefault();
     session.pointerMove({ x: event.clientX, y: event.clientY });
     if (session.status() === 'idle') detach(); // a pre-activation move was a scroll
   };
@@ -406,14 +410,105 @@ export function wireTouchDragSource(config: WireTouchDragConfig): CleanupFn {
     session.pointerDown({ x: event.clientX, y: event.clientY });
   };
 
-  const prevTouchAction = element.style.touchAction;
-  element.style.touchAction = 'none';
+  // Touch events go to the element the finger came down on for the whole gesture, so the
+  // element's own listener sees every move. Non-passive: it must be able to cancel the pan.
+  const onTouchMove = (event: TouchEvent): void => {
+    if (session.isActive() && event.cancelable) event.preventDefault();
+  };
+  const onContextMenu = (event: Event): void => {
+    if (session.status() !== 'idle') event.preventDefault();
+  };
   element.addEventListener('pointerdown', onPointerDown);
+  element.addEventListener('touchmove', onTouchMove, { passive: false });
+  element.addEventListener('contextmenu', onContextMenu);
 
   return () => {
     session.cancel();
     detach();
-    element.style.touchAction = prevTouchAction;
     element.removeEventListener('pointerdown', onPointerDown);
+    element.removeEventListener('touchmove', onTouchMove);
+    element.removeEventListener('contextmenu', onContextMenu);
+  };
+}
+
+// --- Edge auto-scroll for touch drags -------------------------------------------------
+
+/** How near a scroller's edge (px) a touch drag must come before it scrolls, and its top speed. */
+export const TOUCH_EDGE_PX = 48;
+export const TOUCH_EDGE_MAX_STEP_PX = 14;
+
+interface EdgeRect {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+/**
+ * How far one frame scrolls a scroller whose box is `rect` while a finger drags at (x, y):
+ * nothing in the middle, faster the nearer the edge, full speed at or PAST it — a thumb at the
+ * screen's edge is often outside a scroller inset by the page's gutter (vault-stage at 390: the
+ * strip ends at 374, the thumb sat at 385). An axis only moves while the finger is level with the
+ * box on the other one. Pure, so the feel is tested without a layout.
+ */
+export function touchEdgeStep(rect: EdgeRect, x: number, y: number): { dx: number; dy: number } {
+  const ramp = (into: number) => Math.round(TOUCH_EDGE_MAX_STEP_PX * Math.min(1, 1 - into / TOUCH_EDGE_PX));
+  let dx = 0;
+  let dy = 0;
+  if (y >= rect.top && y <= rect.bottom) {
+    if (x < rect.left + TOUCH_EDGE_PX) dx = -ramp(x - rect.left);
+    else if (x > rect.right - TOUCH_EDGE_PX) dx = ramp(rect.right - x);
+  }
+  if (x >= rect.left && x <= rect.right) {
+    if (y < rect.top + TOUCH_EDGE_PX) dy = -ramp(y - rect.top);
+    else if (y > rect.bottom - TOUCH_EDGE_PX) dy = ramp(rect.bottom - y);
+  }
+  return { dx: dx || 0, dy: dy || 0 };
+}
+
+/**
+ * Scroll `container` while a TOUCH drag holds near its edge — what pragmatic's
+ * `autoScrollForElements` does for a mouse, which the touch bridge never reaches. Without it a
+ * phone board whose columns are each a screen wide could not carry a card to any other column
+ * (forge task 3033). A finger held still keeps scrolling (one step a frame); scroll snapping is
+ * suspended while it does, and the container settles back onto its snap points on the drop.
+ */
+export function registerTouchEdgeScroll(container: HTMLElement): CleanupFn {
+  let point: PointerPoint | null = null;
+  let frame = 0;
+  let snapWas: string | null = null;
+  const tick = (): void => {
+    frame = 0;
+    if (!point) return;
+    const { dx, dy } = touchEdgeStep(container.getBoundingClientRect(), point.x, point.y);
+    if (dx !== 0 || dy !== 0) {
+      if (snapWas === null) {
+        snapWas = container.style.scrollSnapType;
+        container.style.scrollSnapType = 'none';
+      }
+      container.scrollBy(dx, dy);
+    }
+    frame = requestAnimationFrame(tick);
+  };
+  const stop = (): void => {
+    point = null;
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    if (snapWas !== null) {
+      container.style.scrollSnapType = snapWas;
+      snapWas = null;
+    }
+  };
+  const unsubscribe = subscribePointerDragMonitor((event) => {
+    if (event.phase === 'drop') {
+      stop();
+      return;
+    }
+    point = { x: event.current.input.clientX, y: event.current.input.clientY };
+    if (!frame) frame = requestAnimationFrame(tick);
+  });
+  return () => {
+    unsubscribe();
+    stop();
   };
 }

package/src/react/hooks/pragmaticDnd.ts

@@ -23,6 +23,7 @@ import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hi
 import { useEffect, useRef, useState } from 'react';
 import {
   registerPointerDropTarget,
+  registerTouchEdgeScroll,
   subscribePointerDragMonitor,
   wireTouchDragSource,
 } from './pointerDnd.js';
@@ -105,11 +106,21 @@ export function findScrollContainer(start: Element | null): Element | null {
 // auto-scroll exactly ONCE (double-registering would compound the scroll velocity).
 const autoScrollRegistry = new Map<Element, { count: number; cleanup: CleanupFn }>();
 
-/** Register `element` as an auto-scroll container for the drag engine (ref-counted). */
+/**
+ * Register `element` as an auto-scroll container for the drag engine (ref-counted) — for a
+ * mouse (pragmatic's own) and for a touch drag (`registerTouchEdgeScroll`, forge task 3033).
+ */
 export function registerAutoScroll(element: Element): CleanupFn {
   const existing = autoScrollRegistry.get(element);
   if (existing) existing.count += 1;
-  else autoScrollRegistry.set(element, { count: 1, cleanup: autoScrollForElements({ element }) });
+  else
+    autoScrollRegistry.set(element, {
+      count: 1,
+      cleanup: combine(
+        autoScrollForElements({ element }),
+        element instanceof HTMLElement ? registerTouchEdgeScroll(element) : () => {},
+      ),
+    });
   let released = false;
   return () => {
     if (released) return;

package/src/react/hooks/usePublishedBottomChrome.ts

@@ -0,0 +1,30 @@
+import { useLayoutEffect, useRef } from 'react';
+
+/**
+ * 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.
+ *
+ * `AppShell` uses it for its dock and `PlaceBar`; an app that draws its own bottom bar without
+ * the shell (the vault's phone `PlaceBar`, forge task 3033) puts the returned ref on the bar's
+ * wrapper. Its own module so that app does not pull the shell into its entry chunk.
+ */
+export 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/hooks/useScrollMemory.spec.tsx

@@ -110,17 +110,19 @@ describe('useScrollMemory', () => {
    */
   test('a list growing page by page is followed past the deadline, as long as each page lands within it', async () => {
     const s = fakeScroller(20_000);
-    const { rerender } = render(<Shell at='/' el={s.el} deadlineMs={60} />);
+    const { rerender } = render(<Shell at='/' el={s.el} deadlineMs={150} />);
     s.scrollTo(15_000);
     const list = { state: window.history.state, path: '/' };
     push('/item/7');
-    rerender(<Shell at='/item/7' el={s.el} deadlineMs={60} />);
+    rerender(<Shell at='/item/7' el={s.el} deadlineMs={150} />);
 
     s.grow(3_000);
     back(list);
-    rerender(<Shell at='/' el={s.el} deadlineMs={60} />);
-    // Five pages, 40ms apart: 200ms in all — well past 60ms from the start, never 60ms without a page.
-    for (const height of [6_000, 9_000, 12_000, 15_000, 20_000]) {
+    rerender(<Shell at='/' el={s.el} deadlineMs={150} />);
+    // Eight pages, 40ms apart: 320ms in all — over twice the 150ms deadline from the start, and
+    // never near 150ms without a page. (A 60ms deadline left a 40ms sleep 1.5x headroom, and it
+    // went red under a busy machine's full gate, 2026-10-13.)
+    for (const height of [5_000, 7_000, 9_000, 11_000, 13_000, 15_000, 17_000, 20_000]) {
       await act(() => Bun.sleep(40));
       s.grow(height);
     }

package/src/react/index.ts

@@ -127,6 +127,7 @@ export {
 // state, task 2275) must not have to import the media gallery — and its optional spreadsheet
 // peer — to hear a `RailSection` toggle.
 export { onPreferenceSeed, type PreferenceSeedListener } from './media-gallery/preferenceBus.js';
+export { useRememberedPreference } from './media-gallery/rememberedPreference.js';
 export { onPreferenceWrite, type PreferenceListener, seedPreferences } from './media-gallery/preferenceSync.js';
 export {
   type ScrollMemoryOptions,
@@ -139,6 +140,7 @@ export {
   type AmbientIntensity,
 } from './components/AmbientBackdrop.js';
 export { AppShell, type AppShellProps } from './components/AppShell.js';
+export { usePublishedBottomChrome } from './hooks/usePublishedBottomChrome.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';
@@ -155,6 +157,7 @@ export {
 } from './components/ChartTablePanel.js';
 export * from './companion-link/index.js';
 export { CardTapTarget, type CardTapTargetProps } from './components/CardTapTarget.js';
+export { KanbanBoard, type KanbanBoardProps, type KanbanColumn } from './components/KanbanBoard.js';
 export { EntityCard, type EntityCardProps } from './components/EntityCard.js';
 export { CardDisplayControls, type CardDisplayControlsProps } from './components/CardDisplayControls.js';
 export {

package/src/react/lib/floatingStyles.spec.ts

@@ -27,7 +27,7 @@ describe('the floating layer — DESIGN.md §5 containment', () => {
       'components/Popover.tsx',
       'components/DropdownMenu.tsx',
       'components/HoverCard.tsx',
-      'components/SelectField.tsx',
+      'components/SelectFieldImpl.tsx',
       'components/ComboboxField.tsx',
       'components/Autocomplete.tsx',
       'components/TooltipImpl.tsx',

package/src/react/lib/selectField.ts

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+import { cn } from './cn.js';
+import { type ControlSize, fieldControlClass } from './field.js';
+
+/** Shared by `components/SelectField.tsx` (the light trigger) and `components/SelectFieldImpl.tsx`
+ *  (the lazily loaded Radix select) — here so the two draw the same box and neither widens the
+ *  public surface. */
+
+export interface SelectOption {
+  value: string;
+  label: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SelectGroup {
+  label?: string;
+  options: SelectOption[];
+}
+
+export interface SelectFieldProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  options?: SelectOption[];
+  groups?: SelectGroup[];
+  placeholder?: string;
+  disabled?: boolean;
+  /** Use the full field style (16px, rounded-md, border, focus ring). Default true. */
+  fieldStyle?: boolean;
+  /** Trigger height on the shared control-height scale (`--control-h-*`, task
+   *  cbux-41). Default `md`. No-op when `fieldStyle={false}`. */
+  size?: ControlSize;
+  /** Forwarded to the trigger so a visible `<label htmlFor>` can target it. */
+  id?: string;
+  name?: string;
+  required?: boolean;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  /**
+   * What to say when there is nothing to choose — *"No lists yet"*.
+   *
+   * 🔴 Required in practice for any control whose options come from DATA rather than
+   * from a constant: an empty popup is a dead end that reads as a broken control, and
+   * the `choice-needs-empty-state` guardrail reports one. Rendered as plain text, not
+   * as an item, so it can never be picked or keyboard-focused.
+   */
+  emptyLabel?: ReactNode;
+  /** The second line — what belongs in this list, or how to get one. */
+  emptyHint?: ReactNode;
+  /** Set by {@link Field} for inline validation — paints the field-token invalid
+   *  border (via `aria-invalid`) and links the description/error to the trigger. */
+  'aria-invalid'?: boolean | 'true' | 'false';
+  'aria-describedby'?: string;
+}
+
+/** What the light trigger hands the real select when it replaces it. Internal. */
+export interface SelectFieldImplProps extends SelectFieldProps {
+  /** The trigger was pressed (or Enter/Space/an arrow) before the implementation arrived. */
+  initialOpen?: boolean;
+  /** The trigger had keyboard focus: keep it on the real one. */
+  initialFocus?: boolean;
+}
+
+/** The keys Radix Select opens on from its trigger (`OPEN_KEYS` in `@radix-ui/react-select`). */
+export const SELECT_OPEN_KEYS: readonly string[] = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];
+
+/** The trigger's classes — one function, so the light trigger and Radix's are the same box and the
+ *  swap between them moves nothing. */
+export function selectTriggerClass({
+  fieldStyle = true,
+  size = 'md',
+  className,
+}: Pick<SelectFieldProps, 'fieldStyle' | 'size' | 'className'>): string {
+  return cn(
+    fieldStyle && fieldControlClass(size),
+    'flex items-center justify-between gap-2 data-[placeholder]:text-muted-foreground',
+    className,
+  );
+}
+
+/** The value's text wrapper. One line, ellipsized, left-aligned: a long value (a deep path) used to
+ *  wrap to three centred lines and spill out of a 36px trigger at 390px (Radix Themes' Select
+ *  truncates the same way, forge task 2594). Radix's Value drops `className`, so the truncation
+ *  lives on a wrapper. */
+export const SELECT_VALUE_CLASS = 'block min-w-0 flex-1 truncate text-left';
+
+/** `groups` when given, else `options` as one unlabelled group. */
+export function selectGroupsOf({ options = [], groups = [] }: Pick<SelectFieldProps, 'options' | 'groups'>): SelectGroup[] {
+  return groups.length > 0 ? groups : options.length > 0 ? [{ options }] : [];
+}
+
+/** Radix Select shows the placeholder for exactly these values (`shouldShowPlaceholder`). */
+export function selectShowsPlaceholder(value: string | undefined): boolean {
+  return value === undefined || value === '';
+}