cursedbelt 5.78.0 → 5.79.0

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 === '';
+}

package/src/react/media/VideoChapterEditor.tsx

@@ -7,6 +7,7 @@ import { Button } from '../components/Button.js';
 import { InfoHint } from '../components/InfoHint.js';
 import { Input } from '../components/Input.js';
 import { Modal } from '../components/Modal.js';
+import { Kbd } from '../palette/Kbd.js';
 import {
   chapterProblem,
   chapterSpans,
@@ -360,11 +361,11 @@ export function VideoChapterEditor({
           <InfoHint title='Naming the parts of a video' align='right'>
             <p>
               Play or scrub to where a part begins, type what it is about, and press{' '}
-              <strong>Mark here</strong> (or <kbd>Enter</kbd> in the box).
+              <strong>Mark here</strong> (or <Kbd>Enter</Kbd> in the box).
             </p>
             <p>
               Each section runs until the next one starts. Click a section's time to jump there,
-              edit a name in place, and <kbd>Space</kbd> plays and pauses.
+              edit a name in place, and <Kbd>Space</Kbd> plays and pauses.
             </p>
             <p>
               Nothing here changes your video — these are names the player shows on the scrub

package/src/react/media/VideoCutEditor.tsx

@@ -21,6 +21,7 @@ import {
   type VideoCut,
 } from 'cursedbelt-core/media/video-cuts';
 import { cn, RAW_BUTTON } from '../lib/cn.js';
+import { Kbd } from '../palette/Kbd.js';
 
 /**
  * Mark the parts of a video to cut out, and send the marks off to be executed.
@@ -324,12 +325,12 @@ export function VideoCutEditor({
            */}
           <InfoHint title='Marking a video to trim' align='right'>
             <p>
-              Press <strong>Cut here</strong> (or <kbd>C</kbd>) to divide the clip at the
+              Press <strong>Cut here</strong> (or <Kbd>C</Kbd>) to divide the clip at the
               playhead. Every piece between two cuts is a section.
             </p>
             <p>
               Click <strong>✗</strong> on a section to remove it — click again to keep it after
-              all. Click a section's timecode to jump there, and <kbd>Space</kbd> plays and
+              all. Click a section's timecode to jump there, and <Kbd>Space</Kbd> plays and
               pauses.
             </p>
             <p>

package/src/react/media/denseGallery.css

@@ -148,6 +148,8 @@
 	display: block;
 }
 .cbgd-dwell-select {
+	/* A SelectField trigger (forge task 3097): its value and chevron sit in one row. */
+	gap: 2px;
 	min-height: 24px;
 	padding: 0 4px;
 	border: 0;

package/src/react/media-gallery/MediaGallery.spec.tsx

@@ -779,6 +779,16 @@ describe('MediaGallery — the playback run', () => {
     throw new Error(`the playback button never reached ${label}`);
   }
 
+  /** Pick a slideshow speed the way a keyboard does: open the dwell field, take the option. */
+  function pickDwell(
+    getByLabelText: ReturnType<typeof render>['getByLabelText'],
+    getByRole: ReturnType<typeof render>['getByRole'],
+    label: string,
+  ) {
+    fireEvent.keyDown(getByLabelText('How long each picture holds the screen'), { key: 'Enter' });
+    fireEvent.click(getByRole('option', { name: label }));
+  }
+
   test('🔴 the button cycles all FIVE settings, including from a picture', () => {
     // Gated on `category === 'video'` before this, so a folder of photographs — the item most
     // albums open on — had no way to start a slideshow at all.
@@ -814,9 +824,7 @@ describe('MediaGallery — the playback run', () => {
     fireEvent.click(getByRole('button', { name: 'Open beach.jpg' }));
     cycleTo(getByRole, /Play all/);
     // The shortest rung on the ladder, so the test waits two seconds rather than five.
-    fireEvent.change(getByLabelText('How long each picture holds the screen'), {
-      target: { value: '2' },
-    });
+    pickDwell(getByLabelText, getByRole, '2s');
     // `beach.jpg` is the newest, so the default sort puts `clip.mp4` next.
     await waitFor(
       () => expect(container.querySelector('.cbgd-watch-title')?.textContent).toBe('clip.mp4'),
@@ -830,9 +838,7 @@ describe('MediaGallery — the playback run', () => {
     const { getByRole, getByLabelText, container } = render(<MediaGallery items={ITEMS} />);
     fireEvent.click(getByRole('button', { name: 'Open clip.mp4' }));
     cycleTo(getByRole, /Play all/);
-    fireEvent.change(getByLabelText('How long each picture holds the screen'), {
-      target: { value: '2' },
-    });
+    pickDwell(getByLabelText, getByRole, '2s');
     await new Promise((resolve) => setTimeout(resolve, 2600));
     expect(container.querySelector('.cbgd-watch-title')?.textContent).toBe('clip.mp4');
   }, 8000);
@@ -841,16 +847,14 @@ describe('MediaGallery — the playback run', () => {
     const first = render(<MediaGallery items={ITEMS} />);
     fireEvent.click(first.getByRole('button', { name: 'Open beach.jpg' }));
     cycleTo(first.getByRole, /Play all/);
-    fireEvent.change(first.getByLabelText('How long each picture holds the screen'), {
-      target: { value: '30' },
-    });
+    pickDwell(first.getByLabelText, first.getByRole, '30s');
     first.unmount();
 
     const second = render(<MediaGallery items={ITEMS} />);
     fireEvent.click(second.getByRole('button', { name: 'Open beach.jpg' }));
     expect(
-      (second.getByLabelText('How long each picture holds the screen') as HTMLSelectElement).value,
-    ).toBe('30');
+      second.getByLabelText('How long each picture holds the screen').textContent,
+    ).toBe('30s');
   });
 });
 

package/src/react/media-gallery/MediaGallery.tsx

@@ -138,6 +138,7 @@ import { GalleryTable, durationLabel } from './GalleryTable.js';
 import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun.js';
 import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder, MediaPending } from './types.js';
 import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia.js';
+import { SelectField } from '../components/SelectField.js';
 import { Tooltip } from '../components/Tooltip.js';
 
 import { TruncatedText } from '../components/TruncatedText.js';
@@ -151,6 +152,9 @@ import { cn, RAW_BUTTON } from '../lib/cn.js';
 // `MediaGalleryItem` and keep auth/signing/deletion on their side.
 
 // Heavy viewers stay off the critical path — each loads only when a matching file opens.
+/** The slideshow speeds, as the dwell field offers them. */
+const DWELL_CHOICES = IMAGE_DWELL_OPTIONS.map((seconds) => ({ value: String(seconds), label: `${seconds}s` }));
+
 const LazyVideoPlayer = lazyWithReload(() =>
   import('../media/VideoPlayer.js').then((m) => ({ default: m.VideoPlayer })),
 );
@@ -2901,34 +2905,28 @@ export function MediaGallery({
                 happen. Owner: "The time should be configurable for slow to fast slideshows." */}
             {runAdvances(playbackEnd) ? (
               <Tooltip content='How long each picture holds the screen before the next item'>
-                <label className='cbgd-dwell'>
+                <span className='cbgd-dwell'>
                   {/* The word `Hold` was the control's NAME and is now the hourglass; the
                       `5s` beside it is its VALUE and stays printed, because a duration you
-                      have to hover to read is a duration you cannot compare. The select
-                      keeps its own `aria-label`, so the glyph is decoration. */}
+                      have to hover to read is a duration you cannot compare. The field
+                      keeps its own `aria-label`, so the glyph is decoration. A SelectField, not
+                      a `<select>`: the OS drew that list, outside the kit (forge task 3097). */}
                   <span className='cbgd-dwell-label'>
                     <Timer aria-hidden />
                   </span>
-                  <select
-                    // guardrails-ignore no-raw-inputs: `.cbgd-dwell` is this module's own
-                    // self-contained plain-CSS control, for the same reason `.cbgd-search`
-                    // states — cursedbelt's Tailwind field layer would fight it on cascade.
+                  <SelectField
+                    fieldStyle={false}
                     className='cbgd-dwell-select'
-                    value={imageDwell}
-                    onChange={(event) => {
-                      const next = Number(event.target.value);
+                    value={String(imageDwell)}
+                    onValueChange={(value) => {
+                      const next = Number(value);
                       setImageDwell(next);
                       writeImageDwell(next);
                     }}
+                    options={DWELL_CHOICES}
                     aria-label='How long each picture holds the screen'
-                  >
-                    {IMAGE_DWELL_OPTIONS.map((seconds) => (
-                      <option key={seconds} value={seconds}>
-                        {seconds}s
-                      </option>
-                    ))}
-                  </select>
-                </label>
+                  />
+                </span>
               </Tooltip>
             ) : null}
             {/*