@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/carouselLayout.ts

@@ -0,0 +1,229 @@
+// How a carousel's items (Carousel.tsx) are laid out in Material's contained layouts that change the items' widths as
+// they scroll (m3.material.io/components/carousel): 'multi-browse' (large items from the start, then a medium and a
+// small one) and 'hero' (a large one and a small one after it, or, aligned to the centre, between two small ones). As
+// Material's CarouselLayoutManager does it: every item is in the row as wide as a large one (so swiping and scroll-snap
+// work as in any row), and its mask (.carousel-item-mask) is moved and clipped to the size its place gives it. The
+// places are keylines: where each item stands and how wide it is seen, with an item that is just leaving or coming in
+// outside at each end. Scrolled to the start, the large ones are at the start (also in a hero aligned to the centre);
+// scrolled to the end, at the end; between, the layout's own; and from one to the other the keylines move by
+// themselves, so that every item grows and shrinks as it passes. Widths from the theme (--carousel-large-item-width,
+// --carousel-small-item-min-width and -max-width, the gap and the height, in ui.css); what is masked of an item is on it
+// as --carousel-mask (0 to 1), for what is on it to fade. The site's carousel.script.ts and, in the editor, Carousel.tsx
+// run it; it gives back what stops it. The other layouts ('uncontained', 'full-screen') are only ui.css.
+export type CarouselLayout = 'multi-browse' | 'uncontained' | 'hero' | 'full-screen';
+export type CarouselAlignment = 'start' | 'center';
+
+/** The layouts laid out here, with their items' widths changing as they scroll. */
+export const keylineLayouts: CarouselLayout[] = ['multi-browse', 'hero'];
+
+type Keyline = { loc: number; size: number };
+type State = { lines: Keyline[]; offsets: number[]; focal: number };
+
+/** A length the theme gives in a custom property (in px or rem), else `fallback` px. */
+function lengthOf(el: HTMLElement, name: string, fallback: number) {
+  const value = getComputedStyle(el).getPropertyValue(name).trim();
+  const n = parseFloat(value);
+  if (Number.isNaN(n)) return fallback;
+  if (value.endsWith('rem')) return n * parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return n;
+}
+
+/** The sizes the items are seen at in the layout's own arrangement, from its start, filling `width` with `gap`s. */
+function arrangement(
+  layout: CarouselLayout,
+  alignment: CarouselAlignment,
+  count: number,
+  width: number,
+  gap: number,
+  { large, smallMin, smallMax, height }: { large: number; smallMin: number; smallMax: number; height: number },
+): number[] {
+  // As many large ones as there are items, side by side, when they all fit.
+  const even = (n: number) => Array<number>(n).fill((width - (n - 1) * gap) / n);
+  if (layout === 'hero') {
+    // A large one at most twice as wide as it is high: more large ones on a wide screen.
+    const smalls = alignment === 'center' ? 2 : 1;
+    if (count <= smalls) return even(count);
+    let n = 1;
+    const sizeOf = (k: number) => (width - smalls * smallMax - (k + smalls - 1) * gap) / k;
+    while (sizeOf(n) > 2 * height && n + smalls < count) n++;
+    const l = sizeOf(n);
+    const larges = Array<number>(n).fill(l);
+    return alignment === 'center' ? [smallMax, ...larges, smallMax] : [...larges, smallMax];
+  }
+  // Multi-browse: large items, a medium one and a small one (without the medium one only where it does not fit), the
+  // large ones as near the theme's width as they can be.
+  let best: { sizes: number[]; cost: number } | undefined;
+  for (const medium of [1, 0]) {
+    for (let n = 1; n + medium + 1 <= count; n++)
+      for (const small of [smallMax, smallMin]) {
+        // n large (l), evt. a medium one halfway between a large and the small one, and the small one.
+        const l = (width - small - (n + medium) * gap - (medium * small) / 2) / (n + medium / 2);
+        if (l < small * 2) continue;
+        const cost = Math.abs(l - large);
+        if (!best || cost < best.cost) best = { sizes: [...Array<number>(n).fill(l), ...(medium ? [(l + small) / 2] : []), small], cost };
+      }
+    if (best) break;
+  }
+  return best?.sizes ?? even(Math.max(1, count));
+}
+
+/** The keylines of an arrangement, with one outside at each end, and the unmasked centres of the items that stand at
+ * them: an item as wide as a large one (`large`) one step (`large` and a gap) after the other, from the first large one
+ * (`anchor` 'first') or back from the last (`anchor` 'last'). */
+function stateOf(sizes: number[], width: number, gap: number, large: number, anchor: 'first' | 'last'): State {
+  const small = Math.min(...sizes);
+  const lines: Keyline[] = [{ loc: -gap - small / 2, size: small }];
+  let x = 0;
+  for (const size of sizes) {
+    lines.push({ loc: x + size / 2, size });
+    x += size + gap;
+  }
+  lines.push({ loc: width + gap + small / 2, size: small });
+  const at = (i: number) => Math.abs(lines[i].size - large) < 0.5;
+  const focal = anchor === 'first' ? lines.findIndex((_, i) => at(i)) : lines.findLastIndex((_, i) => at(i));
+  const step = large + gap;
+  return { lines, offsets: lines.map((_, i) => lines[focal].loc + (i - focal) * step), focal };
+}
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+const mix = (a: State, b: State, t: number): State => ({
+  lines: a.lines.map((l, i) => ({ loc: lerp(l.loc, b.lines[i].loc, t), size: lerp(l.size, b.lines[i].size, t) })),
+  offsets: a.offsets.map((o, i) => lerp(o, b.offsets[i], t)),
+  focal: a.focal,
+});
+
+/** Lays out the carousel `root` (its [data-carousel-items] and their masks) in its layout (data-carousel-layout) and
+ * alignment (data-carousel-alignment) as it scrolls and is resized; gives back what stops it. */
+export function carouselLayout(root: HTMLElement): () => void {
+  const layout = (root.dataset.carouselLayout ?? 'uncontained') as CarouselLayout;
+  const alignment = (root.dataset.carouselAlignment ?? 'start') as CarouselAlignment;
+  const row = root.querySelector<HTMLElement>('[data-carousel-items]');
+  if (!row || !keylineLayouts.includes(layout)) return () => {};
+  const items = [...row.querySelectorAll<HTMLElement>('[data-carousel-item]')];
+  const masks = items.map((item) => item.querySelector<HTMLElement>('[data-carousel-mask]'));
+  let start: State, normal: State, end: State, large: number;
+  let lead = 0;
+  let toStart = 0;
+  let toEnd = 0;
+
+  function measure() {
+    const width = row!.clientWidth;
+    const gap = parseFloat(getComputedStyle(row!).columnGap) || 0;
+    const sizes = arrangement(layout, alignment, items.length, width, gap, {
+      large: lengthOf(root, '--carousel-large-item-width', 200),
+      smallMin: lengthOf(root, '--carousel-small-item-min-width', 40),
+      smallMax: lengthOf(root, '--carousel-small-item-max-width', 56),
+      height: row!.clientHeight,
+    });
+    large = Math.max(...sizes);
+    row!.style.setProperty('--carousel-item-width', `${large}px`);
+    // Scrolled to the start, the large ones first; to the end, last; between, the layout's own.
+    start = stateOf(
+      [...sizes].sort((a, b) => b - a),
+      width,
+      gap,
+      large,
+      'first',
+    );
+    normal = stateOf(sizes, width, gap, large, 'first');
+    end = stateOf(
+      [...sizes].sort((a, b) => a - b),
+      width,
+      gap,
+      large,
+      'last',
+    );
+    // Where an item rests: its start this far before the first large keyline's (scroll-padding, for scroll-snap).
+    lead = normal.lines[normal.focal].loc - large / 2;
+    row!.style.scrollPaddingInlineStart = `${lead}px`;
+    toStart = start.offsets[0] - normal.offsets[0];
+    toEnd = normal.offsets[0] - end.offsets[0];
+    update();
+  }
+
+  function update() {
+    const s = row!.scrollLeft;
+    const max = row!.scrollWidth - row!.clientWidth;
+    let state = start;
+    if (max > 0) {
+      // When the row is too short for both, each shift takes its share of it.
+      const k = Math.min(1, max / (toStart + toEnd || 1));
+      const a = toStart * k;
+      const b = toEnd * k;
+      state = s < a ? mix(start, normal, s / a) : s > max - b ? mix(normal, end, (s - (max - b)) / b) : normal;
+    }
+    const { lines, offsets } = state;
+    const first = items[0]?.offsetLeft ?? 0;
+    items.forEach((item, i) => {
+      const mask = masks[i];
+      if (!mask) return;
+      // Where its centre is in the row's window, and which two keylines it is between.
+      const c = item.offsetLeft - first + large / 2 - s;
+      let loc: number;
+      let size: number;
+      const last = lines.length - 1;
+      if (c <= offsets[0]) [loc, size] = [lines[0].loc + c - offsets[0], lines[0].size];
+      else if (c >= offsets[last]) [loc, size] = [lines[last].loc + c - offsets[last], lines[last].size];
+      else {
+        const j = offsets.findIndex((o, n) => c >= o && c <= offsets[n + 1]);
+        const t = (c - offsets[j]) / (offsets[j + 1] - offsets[j]);
+        loc = lerp(lines[j].loc, lines[j + 1].loc, t);
+        size = lerp(lines[j].size, lines[j + 1].size, t);
+      }
+      mask.style.transform = `translateX(${loc - c}px)`;
+      mask.style.setProperty('--carousel-mask-inset', `${Math.max(0, (large - size) / 2)}px`);
+      item.style.setProperty('--carousel-mask', String(Math.max(0, Math.min(1, 1 - size / large))));
+    });
+  }
+
+  let frame = 0;
+  const onScroll = () => {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(update);
+  };
+  row.addEventListener('scroll', onScroll, { passive: true });
+  const resized = new ResizeObserver(() => measure());
+  resized.observe(row);
+  measure();
+
+  return () => {
+    cancelAnimationFrame(frame);
+    row.removeEventListener('scroll', onScroll);
+    resized.disconnect();
+    row.style.removeProperty('--carousel-item-width');
+    row.style.scrollPaddingInlineStart = '';
+    items.forEach((item, i) => {
+      item.style.removeProperty('--carousel-mask');
+      masks[i]?.style.removeProperty('transform');
+      masks[i]?.style.removeProperty('--carousel-mask-inset');
+    });
+  };
+}
+
+// How much further than its padding an item rests from the row's start (its scroll-padding: a hero's small item before
+// it), and the step from one item to the next.
+function restOf(row: HTMLElement) {
+  const style = getComputedStyle(row);
+  const items = [...row.querySelectorAll<HTMLElement>('[data-carousel-item]')];
+  return {
+    items,
+    lead: (parseFloat(style.scrollPaddingInlineStart) || 0) - (parseFloat(style.paddingInlineStart) || 0),
+    step: (items[1]?.offsetLeft ?? 0) - (items[0]?.offsetLeft ?? 0) || 1,
+  };
+}
+
+/** Where a carousel's row is scrolled to show item `i` where it rests. */
+export function scrollFor(row: HTMLElement, i: number) {
+  const { items, lead } = restOf(row);
+  const target = items[Math.max(0, Math.min(items.length - 1, i))];
+  return target ? target.offsetLeft - items[0].offsetLeft - lead : 0;
+}
+
+/** The item a carousel's row shows where it rests, for its page indicator. */
+export function shownItem(row: HTMLElement) {
+  const { items, lead, step } = restOf(row);
+  if (items.length < 2) return 0;
+  const end = row.scrollLeft >= row.scrollWidth - row.clientWidth - 2;
+  // Several items can be in view at once: at the end, the last one is the chosen one.
+  return end ? items.length - 1 : Math.max(0, Math.min(items.length - 1, Math.round((row.scrollLeft + lead) / step)));
+}

package/theme/ui/checkbox.script.ts

@@ -0,0 +1,8 @@
+// What a checkbox (Checkbox.tsx) does on the site: one that is indeterminate (data-indeterminate) is shown so, as the
+// browser only has that as a property, until it is clicked. Run on every page by the theme's Base.astro (blockScripts,
+// packages/editor/site/blockScripts.ts); without such a checkbox on the page it does nothing.
+export default function checkbox() {
+  document.querySelectorAll<HTMLInputElement>('input[data-indeterminate]').forEach((input) => {
+    input.indeterminate = true;
+  });
+}

package/theme/ui/datePicker.script.ts

@@ -0,0 +1,302 @@
+// What a date picker (DatePicker.tsx) does on the site: its calendar button opens the picker in its <dialog> (docked:
+// under the field; modal: in the middle of the screen over the scrim), drawn by DatePickerContainer.tsx with React each
+// time something changes, so the site and the editor have one drawing. In the grid the arrow keys move a day or a week
+// (also into the month before or after), Home and End to the week's first and last day, Page Up and Page Down a month
+// (with Shift a year), Enter and Space pick the day; the month and the year can be stepped through or picked from
+// their lists, and a modal picker has a keyboard input mode. OK writes the day(s) into the hidden inputs a form sends
+// (2026-11-02) and into the field (02.11.2026), and fires their input and change events; Annuller, Escape and a tap
+// outside close it without. A date typed in the field is read when the field is left, and the field is marked when it
+// is not a date. React and the drawing are loaded the first time a picker is about to open (pointed at, focused).
+// Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a date picker it does nothing.
+import type { DatePickerSettings } from '@theme/ui/DatePicker';
+import type { DatePickerState } from '@theme/ui/DatePickerContainer';
+import {
+  addDays,
+  addMonths,
+  addMonthsToDay,
+  clampDay,
+  dateOf,
+  dayFromTyped,
+  daysFromTyped,
+  dayTyped,
+  monthOfDay,
+  today as todayOf,
+  weekStart,
+} from '@theme/ui/dates';
+
+const load = () => Promise.all([import('react'), import('react-dom'), import('react-dom/client'), import('@theme/ui/DatePickerContainer')]);
+let loading: ReturnType<typeof load> | undefined;
+const drawing = () => (loading ??= load());
+
+let opened = 0;
+
+export default function datePicker() {
+  document.querySelectorAll<HTMLElement>('[data-date-picker]').forEach(datePickerField);
+}
+
+/** One date picker (its [data-date-picker] element) made to work: on the site by datePicker(), in the editor by the
+ * DatePicker itself (with `onChange`). */
+export function datePickerField(field: HTMLElement) {
+  // Once for each picker, however often it is asked (React's effects may run twice).
+  if (field.dataset.datePickerReady !== undefined) return;
+  field.dataset.datePickerReady = '';
+  const settings = JSON.parse(field.dataset.datePicker!) as DatePickerSettings;
+  const { texts, kind, range, min, max } = settings;
+  const { locale } = texts;
+  const modal = kind === 'modal';
+  const text = field.querySelector<HTMLInputElement>('[data-date-picker-text]')!;
+  const textField = text.closest<HTMLElement>('.text-field');
+  const opener = field.querySelector<HTMLButtonElement>('[data-date-picker-open]')!;
+  const values = [...field.querySelectorAll<HTMLInputElement>('[data-date-picker-value]')];
+  const dialog = field.querySelector<HTMLDialogElement>('[data-date-picker-dialog]')!;
+  const headlineId = `date-picker-headline-${++opened}`;
+  if (modal) dialog.setAttribute('aria-labelledby', headlineId);
+
+  let state: DatePickerState;
+  let today = todayOf();
+  let root: import('react-dom/client').Root | undefined;
+  let draw: (() => void) | undefined;
+
+  // Load the drawing before it is needed.
+  field.addEventListener('pointerover', () => drawing(), { once: true });
+  field.addEventListener('focusin', () => drawing(), { once: true });
+
+  async function render(focusDay = false) {
+    const [react, reactDom, client, container] = await drawing();
+    root ??= client.createRoot(dialog);
+    reactDom.flushSync(() =>
+      root!.render(react.createElement(container.default, { ...state, kind, range, today, min, max, texts, headlineId })),
+    );
+    if (focusDay) focusShown();
+  }
+  draw = () => void render(true);
+
+  // The focus where it belongs in what is shown: the focused day, the shown year or month, the first field.
+  function focusShown() {
+    const target =
+      state.view === 'days'
+        ? dialog.querySelector<HTMLElement>(`[data-day="${state.focus}"]`)
+        : state.view === 'input'
+          ? dialog.querySelector<HTMLElement>('[data-date-picker-input]')
+          : dialog.querySelector<HTMLElement>('[data-date-picker-list] [tabindex="0"]');
+    target?.focus();
+  }
+
+  const picked = () => values.map((v) => (dateOf(v.value) ? v.value : ''));
+
+  async function open() {
+    if (dialog.open) return close();
+
+    today = todayOf();
+    const [start, end = ''] = picked();
+    const focus = clampDay(start || today, min, max);
+    state = { view: 'days', month: monthOfDay(focus), start, end, focus };
+    await render();
+    if (modal) {
+      dialog.showModal();
+      document.documentElement.style.overflow = 'hidden';
+    } else {
+      dialog.show();
+      document.addEventListener('pointerdown', outside);
+    }
+    opener.setAttribute('aria-expanded', 'true');
+    focusShown();
+  }
+
+  // Closed, and the focus back on the calendar button (not when it moved on elsewhere: `stay`).
+  function close(stay = false) {
+    if (!dialog.open) return;
+    dialog.close();
+    document.documentElement.style.overflow = '';
+    document.removeEventListener('pointerdown', outside);
+    opener.setAttribute('aria-expanded', 'false');
+    if (!stay) opener.focus();
+  }
+
+  // A docked picker closes when the focus leaves the field and the picker (Tab past it).
+  field.addEventListener('focusout', (e) => {
+    const to = e.relatedTarget as Node | null;
+    if (!modal && to && !field.contains(to)) close(true);
+  });
+
+  function outside(e: PointerEvent) {
+    if (!field.contains(e.target as Node)) close(true);
+  }
+
+  // What is picked, written into the inputs a form sends and into the field.
+  function write(days: string[]) {
+    values.forEach((input, i) => {
+      if (input.value === (days[i] ?? '')) return;
+      input.value = days[i] ?? '';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    text.value = days
+      .filter(Boolean)
+      .map((d) => dayTyped(d, locale))
+      .join(' – ');
+    mark(false);
+  }
+
+  function mark(wrong: boolean) {
+    textField?.classList.toggle('text-field-error', wrong);
+    if (wrong) text.setAttribute('aria-invalid', 'true');
+    else text.removeAttribute('aria-invalid');
+  }
+
+  const allowed = (day: string) => (!min || day >= min) && (!max || day <= max);
+
+  // A day picked in the grid: the day, or in a range the start, then the end (a day before the start starts again).
+  function pick(day: string) {
+    if (!allowed(day)) return;
+    if (!range) state = { ...state, start: day, focus: day };
+    else if (!state.start || state.end || day < state.start) state = { ...state, start: day, end: '', focus: day };
+    else state = { ...state, end: day, focus: day };
+    draw!();
+  }
+
+  // The focus moved to another day, in the shown month or another one.
+  function move(day: string) {
+    const focus = clampDay(day, min, max);
+    state = { ...state, focus, month: monthOfDay(focus) };
+    draw!();
+  }
+
+  // OK: what is picked (or typed, in the input mode) written, and closed; else what is wrong said at its field.
+  function done() {
+    if (state.view === 'input') {
+      const typed = [...dialog.querySelectorAll<HTMLInputElement>('[data-date-picker-input]')].map((i) => i.value.trim());
+      const days = typed.map((t) => (t ? dayFromTyped(t, locale) : ''));
+      const error = days
+        .map((d, i) =>
+          d === null
+            ? texts.wrongFormat
+            : d && !allowed(d)
+              ? texts.notAllowed
+              : i === 1 && d && !days[0]
+                ? undefined
+                : i === 1 && d && d < days[0]!
+                  ? texts.endBeforeStart
+                  : undefined,
+        )
+        .map((message, field) => message && { field, message })
+        .find(Boolean);
+      // An end without a start: the start is missing.
+      const startMissing = range && !days[0] && !!days[1];
+      if (error || startMissing) {
+        state = { ...state, typed, error: error || { field: 0, message: texts.wrongFormat } };
+        return draw!();
+      }
+      write(days.map((d) => d || ''));
+      return close();
+    }
+    write(range ? [state.start, state.end] : [state.start]);
+    close();
+  }
+
+  opener.addEventListener('click', () => void open());
+
+  // A date typed in the field, read when it is left.
+  text.addEventListener('change', () => {
+    const typed = text.value.trim();
+    if (!typed) return write([]);
+    const days = range ? daysFromTyped(typed, locale) : [dayFromTyped(typed, locale)];
+    const right = days.length === (range ? 2 : 1) && days.every((d) => d && allowed(d)) && (!range || days[0]! <= days[1]!);
+    if (right) write(days as string[]);
+    else mark(true);
+  });
+
+  dialog.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    // A tap on the scrim, outside a modal picker.
+    if (target === dialog) return close();
+    const day = target.closest<HTMLElement>('[data-day]')?.dataset.day;
+    if (day) return pick(day);
+    const year = target.closest<HTMLElement>('[data-year]')?.dataset.year;
+    if (year) return toView(`${year}-${state.month.slice(5)}`);
+    const month = target.closest<HTMLElement>('[data-month]')?.dataset.month;
+    if (month) return toView(month);
+    const action = target.closest<HTMLElement>('[data-date-picker-action]')?.dataset.datePickerAction;
+    if (!action) return;
+    const steps: Record<string, number> = { 'previous-month': -1, 'next-month': 1, 'previous-year': -12, 'next-year': 12 };
+    if (action in steps) {
+      const shown = addMonths(state.month, steps[action]);
+      state = { ...state, month: shown, focus: clampDay(addMonthsToDay(state.focus, steps[action]), min, max) };
+      return void render();
+    }
+    if (action === 'months' || action === 'years') {
+      state = { ...state, view: state.view === action ? 'days' : action };
+      return draw!();
+    }
+    if (action === 'mode') {
+      state =
+        state.view === 'input'
+          ? { ...state, view: 'days', error: undefined }
+          : { ...state, view: 'input', error: undefined, typed: [state.start, state.end].map((d) => (d ? dayTyped(d, locale) : '')) };
+      return draw!();
+    }
+    if (action === 'cancel') return close();
+    if (action === 'ok') return done();
+  });
+
+  // The month (and year) picked in a list: its days shown, the focus on the same day in it.
+  function toView(month: string): void {
+    const [y, m] = month.split('-').map(Number);
+    const last = new Date(y, m, 0).getDate();
+    const day = `${month}-${String(Math.min(Number(state.focus.slice(8)), last)).padStart(2, '0')}`;
+    const focus = clampDay(day, min, max);
+    state = { ...state, view: 'days', month: monthOfDay(focus), focus };
+    draw!();
+  }
+
+  dialog.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      // A modal dialog closes itself (cancel, below); a docked one is closed here.
+      if (!modal) {
+        e.preventDefault();
+        close();
+      }
+      return;
+    }
+    const target = e.target as HTMLElement;
+    const day = target.dataset.day;
+    if (day && state.view === 'days') {
+      const first = (dateOf(day)!.getDay() - (weekStart(locale) % 7) + 7) % 7;
+      const to: Record<string, () => string> = {
+        ArrowLeft: () => addDays(day, -1),
+        ArrowRight: () => addDays(day, 1),
+        ArrowUp: () => addDays(day, -7),
+        ArrowDown: () => addDays(day, 7),
+        Home: () => addDays(day, -first),
+        End: () => addDays(day, 6 - first),
+        PageUp: () => addMonthsToDay(day, e.shiftKey ? -12 : -1),
+        PageDown: () => addMonthsToDay(day, e.shiftKey ? 12 : 1),
+      };
+      if (to[e.key]) {
+        e.preventDefault();
+        move(to[e.key]());
+      }
+      return;
+    }
+    // The lists of years and months: the arrow keys move between them (in a modal grid of years, up and down a row).
+    const list = target.closest<HTMLElement>('[data-date-picker-list]');
+    if (list && target.matches('[role="option"]')) {
+      const options = [...list.querySelectorAll<HTMLElement>('[role="option"]')];
+      const columns = list.classList.contains('date-picker-years') ? 3 : 1;
+      const at = options.indexOf(target);
+      const by: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -columns, ArrowDown: columns };
+      const next = e.key === 'Home' ? 0 : e.key === 'End' ? options.length - 1 : e.key in by ? at + by[e.key] : -1;
+      if (next < 0 || next >= options.length) return;
+      e.preventDefault();
+      target.tabIndex = -1;
+      options[next].tabIndex = 0;
+      options[next].focus();
+    }
+  });
+
+  // Escape on a modal picker.
+  dialog.addEventListener('cancel', (e) => {
+    e.preventDefault();
+    close();
+  });
+}