@ultimat3/ui 29.3.2 → 30.0.0

package/src/content/unified-patch.ts

@@ -0,0 +1,53 @@
+// A unified patch (`git diff`, `diff -u`) read into the same rows `lineDiff` makes: file and hunk
+// headers, numbered context, additions and removals, word-marked in pairs. Malformed text is never
+// an error — a line the grammar does not know is kept as context, so nothing a tool wrote is lost.
+
+import { type DiffRow, markPairs } from './line-diff';
+
+const HUNK = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/;
+
+export function parseUnifiedPatch(patch: string): DiffRow[] {
+  const rows: DiffRow[] = [];
+  let oldNo = 0;
+  let newNo = 0;
+  let inHunk = false;
+  for (const line of patch.replace(/\r\n?/g, '\n').split('\n')) {
+    const hunk = HUNK.exec(line);
+    if (hunk !== null) {
+      oldNo = Number.parseInt(hunk[1] ?? '1', 10) - 1;
+      newNo = Number.parseInt(hunk[2] ?? '1', 10) - 1;
+      inHunk = true;
+      rows.push({ kind: 'hunk', text: line });
+      continue;
+    }
+    if (
+      line.startsWith('diff ') ||
+      (!inHunk && (line.startsWith('--- ') || line.startsWith('+++ ')))
+    ) {
+      inHunk = false;
+      rows.push({ kind: 'file', text: line });
+      continue;
+    }
+    if (!inHunk) {
+      if (line !== '') rows.push({ kind: 'file', text: line });
+      continue;
+    }
+    // `` annotates the line above; it is not a line of either side.
+    if (line.startsWith('\\')) continue;
+    const added = line.startsWith('+');
+    const removed = line.startsWith('-');
+    if (!added) oldNo += 1;
+    if (!removed) newNo += 1;
+    if (added) rows.push({ kind: 'add', new: newNo, text: line.slice(1) });
+    else if (removed) rows.push({ kind: 'del', old: oldNo, text: line.slice(1) });
+    else {
+      const text = line.startsWith(' ') ? line.slice(1) : line;
+      rows.push({ kind: 'context', old: oldNo, new: newNo, text });
+    }
+  }
+  // A trailing newline in the patch is not a context line.
+  const last = rows[rows.length - 1];
+  if (last !== undefined && last.kind === 'context' && last.text === '' && patch.endsWith('\n'))
+    rows.pop();
+  return markPairs(rows);
+}

package/src/drag/pointer-drag.ts

@@ -0,0 +1,185 @@
+// The one drag gesture: Pointer Events with capture, never HTML5 drag events (they do not fire on
+// touch and have no keyboard form). A pure tracker decides tap vs drag and cancel; the binder wires
+// it to a handle; the auto-scroller steps a box near its edges. Clock and geometry are injected.
+
+/** A pointer position in client coordinates. */
+export interface DragPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+/** Below this travel a press is a tap: a click on the handle, never a lift. */
+export const DRAG_THRESHOLD_PX = 4;
+
+export interface DragHandlers {
+  /** The travel passed the threshold: the item lifts at the press point. */
+  start(origin: DragPoint): void;
+  move(point: DragPoint): void;
+  drop(point: DragPoint): void;
+  /** Escape, `pointercancel`, a lost capture or a blur: back to the origin, nothing requested. */
+  cancel(): void;
+}
+
+export type DragPhase = 'idle' | 'pressed' | 'dragging';
+
+export interface DragTracker {
+  phase(): DragPhase;
+  down(point: DragPoint): void;
+  move(point: DragPoint): void;
+  up(point: DragPoint): void;
+  cancel(): void;
+}
+
+/** The state machine alone, so a test drives tap, drag, drop and every cancel with plain points. */
+export function dragTracker(handlers: DragHandlers, threshold = DRAG_THRESHOLD_PX): DragTracker {
+  let phase: DragPhase = 'idle';
+  let origin: DragPoint = { x: 0, y: 0 };
+  return {
+    phase: () => phase,
+    down(point) {
+      phase = 'pressed';
+      origin = point;
+    },
+    move(point) {
+      if (phase === 'pressed') {
+        if (Math.hypot(point.x - origin.x, point.y - origin.y) < threshold) return;
+        phase = 'dragging';
+        handlers.start(origin);
+      }
+      if (phase === 'dragging') handlers.move(point);
+    },
+    up(point) {
+      const was = phase;
+      phase = 'idle';
+      if (was === 'dragging') handlers.drop(point);
+    },
+    cancel() {
+      const was = phase;
+      phase = 'idle';
+      if (was === 'dragging') handlers.cancel();
+    },
+  };
+}
+
+/** The edge band, in px, inside which a drag scrolls its box, and the cap on a frame's step. */
+export const AUTO_SCROLL_EDGE_PX = 48;
+export const AUTO_SCROLL_MAX_PX = 16;
+
+/**
+ * Px per frame along one axis for a pointer at `pos` in a box spanning `lo..hi`: zero in the
+ * middle, growing toward an edge, capped. Under reduced motion there is no ramp — one whole step
+ * of `edge` px, which the scroller spends on a slow cadence instead of every frame.
+ */
+export function autoScrollDelta(pos: number, lo: number, hi: number, reduced: boolean): number {
+  const edge = Math.min(AUTO_SCROLL_EDGE_PX, (hi - lo) / 2);
+  if (edge <= 0) return 0;
+  const into = pos < lo + edge ? -(lo + edge - pos) : pos > hi - edge ? pos - (hi - edge) : 0;
+  if (into === 0) return 0;
+  if (reduced) return Math.sign(into) * AUTO_SCROLL_EDGE_PX;
+  return (
+    Math.sign(into) *
+    Math.min(AUTO_SCROLL_MAX_PX, Math.ceil((Math.abs(into) / edge) * AUTO_SCROLL_MAX_PX))
+  );
+}
+
+/** The host a scroller needs: a frame clock and a reduced-motion answer, both injected. */
+export interface ScrollEnv {
+  frame(run: () => void): number;
+  cancelFrame(handle: number): void;
+  now(): number;
+  reducedMotion(): boolean;
+}
+
+/** Under reduced motion the box moves in steps this far apart, never as a glide. */
+export const REDUCED_STEP_MS = 250;
+
+export interface Scrollable {
+  getBoundingClientRect(): { top: number; bottom: number; left: number; right: number };
+  scrollBy(x: number, y: number): void;
+}
+
+/** Scrolls `box` while the last pointer sits in an edge band; `stop()` ends it for good. */
+export function autoScroller(
+  env: ScrollEnv,
+  box: Scrollable,
+): { update(point: DragPoint): void; stop(): void } {
+  let point: DragPoint | null = null;
+  let handle: number | null = null;
+  let last = Number.NEGATIVE_INFINITY;
+  const tick = (): void => {
+    handle = null;
+    if (point === null) return;
+    const rect = box.getBoundingClientRect();
+    const reduced = env.reducedMotion();
+    const dx = autoScrollDelta(point.x, rect.left, rect.right, reduced);
+    const dy = autoScrollDelta(point.y, rect.top, rect.bottom, reduced);
+    if (dx === 0 && dy === 0) return;
+    if (!reduced || env.now() - last >= REDUCED_STEP_MS) {
+      last = env.now();
+      box.scrollBy(dx, dy);
+    }
+    handle = env.frame(tick);
+  };
+  return {
+    update(next) {
+      point = next;
+      if (handle === null) handle = env.frame(tick);
+    },
+    stop() {
+      point = null;
+      if (handle !== null) env.cancelFrame(handle);
+      handle = null;
+    },
+  };
+}
+
+/** The browser's frame clock, read only when a drag starts — a server render never gets here. */
+export function browserScrollEnv(): ScrollEnv {
+  return {
+    frame: (run) => requestAnimationFrame(run),
+    cancelFrame: (handle) => cancelAnimationFrame(handle),
+    now: () => performance.now(),
+    reducedMotion: () => matchMedia('(prefers-reduced-motion: reduce)').matches,
+  };
+}
+
+const pointOf = (event: PointerEvent): DragPoint => ({ x: event.clientX, y: event.clientY });
+
+/**
+ * Wires a tracker to one handle: the press captures the pointer, so the move, the release and the
+ * cancel arrive here wherever the finger goes. Primary button only. Answers the unbind.
+ */
+export function bindPointerDrag(handle: HTMLElement, handlers: DragHandlers): () => void {
+  const tracker = dragTracker(handlers);
+  const onDown = (event: PointerEvent): void => {
+    if (event.button !== 0 || !event.isPrimary) return;
+    tracker.down(pointOf(event));
+    handle.setPointerCapture(event.pointerId);
+  };
+  const onMove = (event: PointerEvent): void => {
+    if (tracker.phase() === 'idle') return;
+    tracker.move(pointOf(event));
+    if (tracker.phase() === 'dragging') event.preventDefault();
+  };
+  const onUp = (event: PointerEvent): void => tracker.up(pointOf(event));
+  const onCancel = (): void => tracker.cancel();
+  const onKey = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape' && tracker.phase() === 'dragging') tracker.cancel();
+  };
+  handle.addEventListener('pointerdown', onDown);
+  handle.addEventListener('pointermove', onMove);
+  handle.addEventListener('pointerup', onUp);
+  handle.addEventListener('pointercancel', onCancel);
+  handle.addEventListener('lostpointercapture', onCancel);
+  document.addEventListener('keydown', onKey);
+  window.addEventListener('blur', onCancel);
+  return () => {
+    handle.removeEventListener('pointerdown', onDown);
+    handle.removeEventListener('pointermove', onMove);
+    handle.removeEventListener('pointerup', onUp);
+    handle.removeEventListener('pointercancel', onCancel);
+    handle.removeEventListener('lostpointercapture', onCancel);
+    document.removeEventListener('keydown', onKey);
+    window.removeEventListener('blur', onCancel);
+  };
+}

package/src/drag/sort-controller.ts

@@ -0,0 +1,196 @@
+// The one reorder state machine `SortableList` and `Board` share: a lifted item and where it sits,
+// the preview it makes of the caller's groups, keyboard and pointer input, and the drop as a
+// REQUEST — the preview holds until `onMove` settles, and a refusal puts it back and says so.
+
+import type { Direction } from '@ultimat3/core';
+import type { Accessor, Setter } from '../theme/solid-adapter';
+import type { DragHandlers, DragPoint } from './pointer-drag';
+import {
+  type AxisBox,
+  type AxisSpan,
+  type CanDrop,
+  dropMove,
+  moveBetween,
+  pointerGroup,
+  pointerIndex,
+  type SortGroup,
+  type SortMove,
+  type SortPosition,
+  sortKeyStep,
+  sortPositions,
+  sortSpeech,
+} from './sort-view';
+
+/** The four things said aloud, each taking `{ position, total, group }`. */
+export type SortSpeech = 'lift' | 'moved' | 'dropped' | 'cancelled';
+
+export interface SortControllerInput<T> {
+  readonly groups: () => readonly SortGroup<T>[];
+  readonly itemKey: (item: T) => string;
+  readonly onMove: (move: SortMove) => unknown;
+  readonly canDrop?: CanDrop<T> | undefined;
+  readonly dir: () => Direction;
+  /** Text for one announcement; the component reads its catalog, a test reads a literal. */
+  readonly say: (what: SortSpeech, params: ReturnType<typeof sortSpeech>) => void;
+  readonly groupLabel: (id: string) => string;
+}
+
+/** Geometry the pointer path reads: the groups along the inline axis, items along the block. */
+export interface SortMeasure {
+  groupBoxes(): readonly AxisBox[];
+  itemSpans(group: number, without: string): readonly AxisSpan[];
+}
+
+export interface SortRuntime {
+  createSignal<T>(value: T): [Accessor<T>, Setter<T>];
+}
+
+interface Held {
+  readonly id: string;
+  readonly at: SortPosition;
+}
+
+export interface SortController<T> {
+  /** The caller's groups, with a lifted or in-flight item shown where it is headed. */
+  view(): readonly SortGroup<T>[];
+  lifted(): string | null;
+  /** True for a key the handle consumed — the component then prevents its default. */
+  key(id: string, event: { key: string; altKey: boolean }): boolean;
+  pointer(id: string, measure: SortMeasure): DragHandlers;
+  /** Tab left the lifted handle: put it back. */
+  leave(id: string): void;
+}
+
+export function sortController<T>(
+  rt: SortRuntime,
+  input: SortControllerInput<T>,
+): SortController<T> {
+  const [lift, setLift] = rt.createSignal<Held | null>(null);
+  const [held, setHeld] = rt.createSignal<Held | null>(null);
+
+  const origin = (id: string): SortPosition | undefined =>
+    sortPositions(input.groups(), input.itemKey).get(id);
+  const accepts =
+    (id: string) =>
+    (group: string): boolean => {
+      const at = origin(id);
+      const item = at === undefined ? undefined : input.groups()[at.group]?.items[at.index];
+      if (item === undefined || input.canDrop === undefined) return true;
+      return input.groups()[at?.group ?? -1]?.id === group || input.canDrop(item, group);
+    };
+  const view = (): readonly SortGroup<T>[] => {
+    const groups = input.groups();
+    const moving = lift() ?? held();
+    const from = moving === null ? undefined : origin(moving.id);
+    return moving === null || from === undefined ? groups : moveBetween(groups, from, moving.at);
+  };
+  const say = (what: SortSpeech, at: SortPosition): void =>
+    input.say(what, sortSpeech(view(), at, input.groupLabel));
+
+  const start = (id: string): void => {
+    const at = origin(id);
+    if (at === undefined) return;
+    setLift({ id, at });
+    say('lift', at);
+  };
+  const moveTo = (id: string, at: SortPosition, speak: boolean): void => {
+    setLift({ id, at });
+    if (speak) say('moved', at);
+  };
+  const cancel = (): void => {
+    const was = lift();
+    setLift(null);
+    const at = was === null ? undefined : origin(was.id);
+    if (at !== undefined) say('cancelled', at);
+  };
+  // Only the answer to the move now held clears it: an earlier request settling while a later one
+  // is in flight would otherwise snap the preview back to the stale order.
+  const release = (was: Held): void => {
+    if (held() === was) setHeld(null);
+  };
+  const drop = (): void => {
+    const was = lift();
+    if (was === null) return;
+    const from = origin(was.id);
+    const item = from === undefined ? undefined : input.groups()[from.group]?.items[from.index];
+    const move =
+      from === undefined || item === undefined
+        ? null
+        : dropMove(input.groups(), item, was.id, from, was.at, input.canDrop);
+    if (move === null || from === undefined) {
+      setLift(null);
+      if (from !== undefined) say('cancelled', from);
+      return;
+    }
+    // Held, not committed: the preview stays until the caller's answer, so a row does not jump
+    // back and forward again while its server echo is in flight.
+    setHeld(was);
+    setLift(null);
+    say('dropped', was.at);
+    Promise.resolve()
+      .then(() => input.onMove(move))
+      .then(
+        () => release(was),
+        () => {
+          release(was);
+          const back = origin(was.id);
+          if (back !== undefined) say('cancelled', back);
+        },
+      );
+  };
+
+  return {
+    view,
+    lifted: () => lift()?.id ?? null,
+    key(id, event) {
+      const current = lift();
+      if (current === null) {
+        if (event.key === ' ' || event.key === 'Enter') {
+          start(id);
+          return true;
+        }
+        if (!event.altKey) return false;
+        // A step from a move still in flight starts where the preview shows it, not at the echo.
+        const pending = held();
+        const at = pending?.id === id ? pending.at : origin(id);
+        const base = pending?.id === id ? view() : input.groups();
+        const step =
+          at === undefined ? null : sortKeyStep(base, at, event.key, input.dir(), accepts(id));
+        if (step === null) return false;
+        setLift({ id, at: step });
+        drop();
+        return true;
+      }
+      if (current.id !== id) return false;
+      if (event.key === 'Escape') cancel();
+      else if (event.key === ' ' || event.key === 'Enter') drop();
+      else {
+        const step = sortKeyStep(view(), current.at, event.key, input.dir(), accepts(id));
+        if (step === null) return event.key.startsWith('Arrow');
+        moveTo(id, step, true);
+      }
+      return true;
+    },
+    pointer(id, measure): DragHandlers {
+      return {
+        start: () => start(id),
+        move: (point: DragPoint) => {
+          const current = lift();
+          if (current === null) return;
+          const boxes = measure.groupBoxes();
+          const near = boxes.length > 1 ? pointerGroup(point, boxes) : 0;
+          const group = accepts(id)(view()[near]?.id ?? '') ? near : current.at.group;
+          const index = pointerIndex(point.y, measure.itemSpans(group, id));
+          if (group !== current.at.group || index !== current.at.index) {
+            moveTo(id, { group, index }, false);
+          }
+        },
+        drop: () => drop(),
+        cancel: () => cancel(),
+      };
+    },
+    leave(id) {
+      if (lift()?.id === id) cancel();
+    },
+  };
+}

package/src/drag/sort-view.ts

@@ -0,0 +1,201 @@
+// The pure rules of reordering: where an item is, where a pointer or a key puts it, and whether the
+// drop is a request at all. No DOM and no clock, so `SortableList` and `Board` share one answer and
+// every rule is tested under `dir="rtl"` with plain numbers.
+
+import type { Direction } from '@ultimat3/core';
+import { renderCauseValue } from '@ultimat3/core';
+import { UI_ERROR_CODES, UiError } from '../errors';
+
+/** One column of a board, or the single group of a list. `id` is what `onMove` names. */
+export interface SortGroup<T> {
+  readonly id: string;
+  readonly items: readonly T[];
+}
+
+/** Where an item sits: the group's position in the list of groups, and its index inside it. */
+export interface SortPosition {
+  readonly group: number;
+  readonly index: number;
+}
+
+/** What a drop asks for. `toIndex` is the item's index in `toGroup` AFTER the move. */
+export interface SortMove {
+  readonly id: string;
+  readonly fromGroup: string;
+  readonly toGroup: string;
+  readonly toIndex: number;
+}
+
+/** A span along one axis, as a measured rect gives it. */
+export interface AxisSpan {
+  readonly start: number;
+  readonly size: number;
+}
+
+/** `canDrop(item, groupId)`: the one seam a business rule (a WIP limit, a status machine) uses. */
+export type CanDrop<T> = (item: T, group: string) => boolean;
+
+function duplicateKeyError(key: string): UiError {
+  return new UiError({
+    code: UI_ERROR_CODES.invalidValue,
+    cause: `itemKey answered ${renderCauseValue(key)} for two items, across every group of the list or board — a dragged item must be exactly one node`,
+    fix: 'itemKey: (item) => item.id   # on <SortableList> or <Board>: a key unique across every group',
+  });
+}
+
+/** Every item's position by key. Two items under one key, in any group, is refused. */
+export function sortPositions<T>(
+  groups: readonly SortGroup<T>[],
+  itemKey: (item: T) => string,
+): Map<string, SortPosition> {
+  const at = new Map<string, SortPosition>();
+  groups.forEach((group, g) => {
+    group.items.forEach((item, index) => {
+      const key = itemKey(item);
+      if (at.has(key)) throw duplicateKeyError(key);
+      at.set(key, { group: g, index });
+    });
+  });
+  return at;
+}
+
+/** The groups with one item taken from `from` and put at `to` — the drag preview, never truth. */
+export function moveBetween<T>(
+  groups: readonly SortGroup<T>[],
+  from: SortPosition,
+  to: SortPosition,
+): readonly SortGroup<T>[] {
+  const source = groups[from.group];
+  const item = source?.items[from.index];
+  if (source === undefined || item === undefined || groups[to.group] === undefined) return groups;
+  const lifted = groups.map((group, g) =>
+    g === from.group
+      ? { id: group.id, items: group.items.filter((_, i) => i !== from.index) }
+      : group,
+  );
+  return lifted.map((group, g) => {
+    if (g !== to.group) return group;
+    const index = Math.max(0, Math.min(to.index, group.items.length));
+    return {
+      id: group.id,
+      items: [...group.items.slice(0, index), item, ...group.items.slice(index)],
+    };
+  });
+}
+
+/** The first group from `start` walking by `step` that accepts the item, or null at the edge. */
+function nextGroup<T>(
+  groups: readonly SortGroup<T>[],
+  start: number,
+  step: number,
+  accepts: (group: string) => boolean,
+): number | null {
+  for (let g = start + step; g >= 0 && g < groups.length; g += step) {
+    const group = groups[g];
+    if (group !== undefined && accepts(group.id)) return g;
+  }
+  return null;
+}
+
+/**
+ * One key while an item is lifted, over the PREVIEW groups (the item already sits at `at`).
+ * Up and Down walk the group; the inline arrows walk the groups, mirrored under `rtl`, skipping a
+ * group `canDrop` refuses; Home and End go to the group's ends. Null: the key does not move it.
+ */
+export function sortKeyStep<T>(
+  groups: readonly SortGroup<T>[],
+  at: SortPosition,
+  key: string,
+  dir: Direction,
+  canDrop: (group: string) => boolean = () => true,
+): SortPosition | null {
+  const length = groups[at.group]?.items.length ?? 0;
+  const within = (index: number): SortPosition | null => {
+    const clamped = Math.max(0, Math.min(index, length - 1));
+    return clamped === at.index ? null : { group: at.group, index: clamped };
+  };
+  if (key === 'ArrowUp') return within(at.index - 1);
+  if (key === 'ArrowDown') return within(at.index + 1);
+  if (key === 'Home') return within(0);
+  if (key === 'End') return within(length - 1);
+  if (key !== 'ArrowLeft' && key !== 'ArrowRight') return null;
+  const forward = key === 'ArrowRight' ? 1 : -1;
+  const step = dir === 'rtl' ? -forward : forward;
+  const g = nextGroup(groups, at.group, step, canDrop);
+  if (g === null) return null;
+  // The destination does not hold the item yet, so its insertion points run 0..length.
+  return { group: g, index: Math.min(at.index, groups[g]?.items.length ?? 0) };
+}
+
+/**
+ * The insertion index a pointer at `pointer` (one axis) asks for, among `spans` — the measured
+ * items of the destination group WITHOUT the dragged one. Past an item's midpoint is after it.
+ */
+export function pointerIndex(pointer: number, spans: readonly AxisSpan[]): number {
+  let index = 0;
+  for (const span of spans) if (pointer > span.start + span.size / 2) index += 1;
+  return index;
+}
+
+/** A measured box: one span per axis. */
+export interface AxisBox {
+  readonly inline: AxisSpan;
+  readonly block: AxisSpan;
+}
+
+const outside = (pointer: number, span: AxisSpan): number =>
+  pointer < span.start ? span.start - pointer : Math.max(0, pointer - span.start - span.size);
+
+/**
+ * The group whose box holds the pointer, else the nearest one: a drop between columns lands. Both
+ * axes, so columns side by side and columns stacked on a narrow screen answer alike.
+ */
+export function pointerGroup(
+  point: { readonly x: number; readonly y: number },
+  boxes: readonly AxisBox[],
+): number {
+  let best = 0;
+  let distance = Number.POSITIVE_INFINITY;
+  boxes.forEach((box, g) => {
+    const away = Math.hypot(outside(point.x, box.inline), outside(point.y, box.block));
+    if (away < distance) {
+      distance = away;
+      best = g;
+    }
+  });
+  return best;
+}
+
+/**
+ * The move a drop requests, or null when there is none to make: back where it started, or a
+ * group `canDrop` refuses — both keep the origin and call nothing.
+ */
+export function dropMove<T>(
+  groups: readonly SortGroup<T>[],
+  item: T,
+  id: string,
+  from: SortPosition,
+  to: SortPosition,
+  canDrop?: CanDrop<T>,
+): SortMove | null {
+  const fromGroup = groups[from.group]?.id;
+  const toGroup = groups[to.group]?.id;
+  if (fromGroup === undefined || toGroup === undefined) return null;
+  if (from.group === to.group && from.index === to.index) return null;
+  if (canDrop !== undefined && from.group !== to.group && !canDrop(item, toGroup)) return null;
+  return { id, fromGroup, toGroup, toIndex: to.index };
+}
+
+/** The numbers every announcement takes: a 1-based position, the group's size, and its name. */
+export function sortSpeech<T>(
+  groups: readonly SortGroup<T>[],
+  at: SortPosition,
+  groupLabel: (id: string) => string,
+): { readonly position: number; readonly total: number; readonly group: string } {
+  const group = groups[at.group];
+  return {
+    position: at.index + 1,
+    total: group?.items.length ?? 0,
+    group: group === undefined ? '' : groupLabel(group.id),
+  };
+}

package/src/errors.ts

@@ -103,7 +103,7 @@ export function providerNeedsRuntimeError(): UiError {
     code: UI_ERROR_CODES.runtimeMissing,
     cause:
       '<UiProvider> was rendered with no Solid runtime registered, so its locale, time zone, currency and translator would reach no component',
-    fix: "in an island, paste `import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from 'solid-js';` at the top of the *.island.tsx and `setSolidRuntime({ createContext, useContext, createSignal, createMemo, createEffect, onCleanup });` as the first line of its mount(), above the render() that builds <UiProvider> — six named imports, never `import * as`, which keeps all of solid-js in the chunk; on the server, delete <UiProvider> — useUi() already reads the request locale and time zone",
+    fix: "in an island, paste `import { createContext, createEffect, createMemo, createRoot, createSignal, onCleanup, useContext } from 'solid-js';` at the top of the *.island.tsx and `setSolidRuntime({ createContext, useContext, createSignal, createMemo, createEffect, onCleanup, createRoot });` as the first line of its mount(), above the render() that builds <UiProvider> — seven named imports, never `import * as`, which keeps all of solid-js in the chunk; on the server, delete <UiProvider> — useUi() already reads the request locale and time zone",
   });
 }