Phase 2: Explore's latch, haptics, back button, label overflow

Four things reported on the device, all real.

Tapping a modifier did nothing. setLayer was only reachable from a
search result or the layer sheet, so the reference's latch was simply
never ported. It is now, with the semantics intact rather than reduced
to a toggle: hold to peek and it lifts away, tap to lock and it stays,
tap again to release, and reading a lit key while holding a modifier
spends that modifier so lifting drops it. Knobs and pads never latch,
which is what NOLATCH is for. held is now the source of truth and the
layer key is derived from it, as in the reference.

That needed per-control release events. Panel knew which control each
pointer held and threw it away; it now reports onRelease before the
gesture-wide callback, because the latch decides hold-versus-tap from
how long one key was down.

Haptics and the hardware back button were missing entirely - Phase 1 did
both in native.js and the port had no equivalent. native.ts adds them,
no-ops in a browser so the dev server is unaffected. Back owns the whole
stack: sheet, then Explore, then exit.

Grade haptics fire from the transition into answered, not from the four
dispatch sites. Grading happens in the reducer, so deciding correctness
again at each call site would be a second source of truth free to drift.

PINGPONG overflowed its key. Lit keys show the entry's short label, which
comes from the data and can be one unbreakable word; the soft hyphens
only cover printed labels. Keys now break anywhere and clip.

141 tests, typecheck clean, installed and running on the device.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/ui/Panel.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { panelLabel } from "../domain/format";
 import type { ControlId, Entry } from "../domain/types";
 import { cx } from "./cx";
+import { tapFeedback } from "./native";
 import { CONTROL_GROUPS, FX_LEFT, FX_RIGHT, KNOBS, PAD_ROWS } from "./panelLayout";
 import styles from "./Panel.module.css";
 
@@ -28,6 +29,8 @@ export interface PanelProps {
   readonly screen: ScreenText;
   /** A control went down. */
   readonly onPress?: ((id: ControlId) => void) | undefined;
+  /** That control's finger lifted. Explore's latch needs the timing per key. */
+  readonly onRelease?: ((id: ControlId) => void) | undefined;
   /** The last finger lifted; every control touched during the gesture. */
   readonly onGestureEnd?: ((ids: ControlId[]) => void) | undefined;
 }
@@ -92,6 +95,7 @@ export function Panel({
   selected,
   screen,
   onPress,
+  onRelease,
   onGestureEnd,
 }: PanelProps) {
   /** pointerId to the control it is holding. */
@@ -103,17 +107,23 @@ export function Panel({
   // Kept in refs so the window listeners below can be attached once and still
   // call the current callbacks.
   const pressRef = useRef(onPress);
+  const releaseRef = useRef(onRelease);
   const endRef = useRef(onGestureEnd);
   pressRef.current = onPress;
+  releaseRef.current = onRelease;
   endRef.current = onGestureEnd;
 
   useEffect(() => {
     // Fingers often lift outside the key they went down on, so releases are
     // heard on the window rather than the button.
     function release(e: PointerEvent) {
-      if (!active.current.has(e.pointerId)) return;
+      const id = active.current.get(e.pointerId);
+      if (id === undefined) return;
       active.current.delete(e.pointerId);
       setDown(new Set(active.current.values()));
+      // Per-control, and before the gesture-wide callback: Explore's latch
+      // decides hold-versus-tap from how long this one key was down.
+      releaseRef.current?.(id);
       if (active.current.size > 0) return;
 
       const ids = [...gesture.current];
@@ -139,12 +149,15 @@ export function Panel({
     active.current.set(e.pointerId, id);
     gesture.current.add(id);
     setDown(new Set(active.current.values()));
+    // Every key gets a tick, including the second and third finger of a chord.
+    tapFeedback();
     pressRef.current?.(id);
   }, []);
 
-  /** Keyboard: press and end the gesture in one go. */
+  /** Keyboard: a full press, release and gesture in one go, so taps latch. */
   const onKey = useCallback((id: ControlId) => {
     pressRef.current?.(id);
+    releaseRef.current?.(id);
     endRef.current?.([id]);
   }, []);