@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/react/motion.tsx

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import {
+  AccessibilityInfo, Animated, Easing, Pressable, StyleSheet, View,
+  type GestureResponderEvent, type LayoutRectangle, type PressableProps, type StyleProp, type TextStyle, type ViewStyle,
+} from 'react-native';
+import { DURATION, EASE, NATIVE } from './easing';
+import { TweenView } from './Tween';
+
+/*
+  How the chrome moves: one set of rules, everywhere.
+  - A change of state (a toggle, a choice in a segmented control, the selected tool) moves over 150 ms: off at once,
+    settling softly at the end — quick to answer, nothing springy.
+  - A press sinks a touch (to 96 %, a little dimmer) in 70 ms and comes back over 150 ms with the same easing; wide
+    rows (menu items) only dim.
+  On a device all of it runs on the native driver — opacity, transforms and colours only (what moves a view's size or
+  place goes through TweenView) — so a press or a change of state plays smoothly however busy the JavaScript thread is,
+  as it is just after a tap (the editor answers, the plan is drawn again). Interpolations are made once, not on every
+  render: each one made anew has to be sent to the UI thread again.
+*/
+
+export { DURATION, EASE };
+const PRESS_IN = 70;
+
+const ease = (v: Animated.Value, to: number, duration = DURATION) =>
+  Animated.timing(v, { toValue: to, duration, easing: EASE, useNativeDriver: NATIVE }).start();
+
+/*
+  Popups — the ••• and Layers menus, the shapes menu, the markup panel, an image's slider, a toast — come and go the
+  same way: in about 140 ms they fade in and grow from just under their size, easing to a stop, moving out a few
+  points from the button that opened them; going, in about 100 ms they fade and shrink back, gathering pace, and stay
+  on screen until they've gone. Opacity and a transform only, on the native driver: the UI thread plays them, so a
+  busy JavaScript thread (a redraw, a save) can't make them stutter. With Reduce Motion on, they only fade.
+*/
+export const POP_IN = 140, POP_OUT = 100, POP_EASE_OUT = Easing.bezier(0.4, 0, 1, 1);
+
+let reduceMotion = false;
+try {
+  AccessibilityInfo.isReduceMotionEnabled?.().then(v => { reduceMotion = !!v; }, () => {});
+  AccessibilityInfo.addEventListener?.('reduceMotionChanged', (v: boolean) => { reduceMotion = !!v; });
+} catch { /* (no accessibility settings to read: full motion) */ }
+/** Reduce Motion is on: things that move only fade. */
+export const reducedMotion = (): boolean => reduceMotion;
+
+/**
+ * A popup's coming and going: whether it's on screen (`present` — open, or still going), and the style that moves it.
+ * `from`: where it comes from, points (toward the button that opened it: a menu under a button at the top comes down
+ * from it, `{ y: -6 }`); `origin`: the point it grows from, as CSS transform-origin ('top right', 'left center'…).
+ *
+ * `keep`: once it's been open, it stays built between times — hidden (`display: none`: not laid out, not tapped, not
+ * read out) rather than taken down — so a menu with a lot in it opens at once, not after it's been built again (on a
+ * device, the wait before it moved). `mounted` says whether to draw it at all; the style hides it when it's away.
+ */
+export function usePopup(open: boolean, from: { x?: number; y?: number }, origin: string, keep = false): {
+  present: boolean; mounted: boolean; style: Animated.WithAnimatedObject<ViewStyle>;
+} {
+  const v = useRef(new Animated.Value(open ? 1 : 0)).current, [present, setPresent] = useState(open), been = useRef(open);
+  if (open) been.current = true;
+  useEffect(() => {
+    if (open) setPresent(true);
+    // (on the next frame: a popup just put on screen is mounted twice by React's strict mode, and its animation would
+    // stop when the first goes)
+    const frame = requestAnimationFrame(() => {
+      Animated.timing(v, open
+        ? { toValue: 1, duration: POP_IN, easing: EASE, useNativeDriver: NATIVE }
+        : { toValue: 0, duration: POP_OUT, easing: POP_EASE_OUT, useNativeDriver: NATIVE })
+        .start(({ finished }) => { if (finished && !open) setPresent(false); });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, v]);
+  const fx = from.x ?? 0, fy = from.y ?? 0;
+  const style = useMemo(() => (reduceMotion
+    ? { opacity: v }
+    : {
+      opacity: v, transformOrigin: origin,
+      transform: [
+        { translateX: v.interpolate({ inputRange: [0, 1], outputRange: [fx, 0] }) },
+        { translateY: v.interpolate({ inputRange: [0, 1], outputRange: [fy, 0] }) },
+        { scale: v.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) },
+      ],
+    }) as Animated.WithAnimatedObject<ViewStyle>, [v, fx, fy, origin]);
+  const shown = open || present;
+  const hidden = useMemo(() => [style, { display: 'none' as const }] as unknown as Animated.WithAnimatedObject<ViewStyle>, [style]);
+  return { present: shown, mounted: shown || (keep && been.current), style: shown ? style : hidden };
+}
+
+/** An animated value that eases to 1 when `on`, to 0 when not (starting where it is). */
+export function useEased(on: boolean): Animated.Value {
+  const v = useRef(new Animated.Value(on ? 1 : 0)).current;
+  useEffect(() => { ease(v, on ? 1 : 0); }, [on, v]);
+  return v;
+}
+
+/**
+ * A press as an animated value: to 1 as it goes down, back to 0 as it lets go. Spread the handlers on a Pressable.
+ * `full`: a quick tap still shows the whole press — let go before it's all the way in, it finishes going in, then
+ * comes back (within `outMs` all told).
+ */
+export function usePress(inMs = PRESS_IN, outMs = DURATION, easing = EASE, full = false): { v: Animated.Value; onPressIn: () => void; onPressOut: () => void } {
+  const v = useRef(new Animated.Value(0)).current;
+  const timing = (x: number, ms: number) => Animated.timing(v, { toValue: x, duration: ms, easing, useNativeDriver: NATIVE });
+  return {
+    v,
+    onPressIn: () => timing(1, inMs).start(),
+    onPressOut: () => v.stopAnimation(now => {
+      if (!full || now >= 0.99) { timing(0, outMs).start(); return; }
+      const rest = Math.round((1 - now) * inMs * 0.6);
+      Animated.sequence([timing(1, rest), timing(0, Math.max(60, outMs - rest))]).start();
+    }),
+  };
+}
+
+/** The toggle's own pace: a smooth ease in and out, slower than a button press, so its knob's travel reads as one glide. */
+export const TOGGLE_EASE = Easing.bezier(0.4, 0, 0.2, 1);
+export const TOGGLE_MS = 200, TOGGLE_PRESS_MS = 90;
+
+/**
+ * A toggle's glide, started by the tap itself rather than once the setting it flips has been applied: on a device that
+ * meant waiting for the menu to render again and, for a layer or a snap, the drawing to be redrawn — the knob sat
+ * stretched for a moment before it moved. `go` starts the glide now; a change of `on` from elsewhere (the setting
+ * changed another way, or put back) glides it too.
+ */
+export function useToggleEased(on: boolean): { v: Animated.Value; go: (to: boolean, change: () => void) => void } {
+  const v = useRef(new Animated.Value(on ? 1 : 0)).current, at = useRef(on), pending = useRef(false);
+  const glide = useCallback((to: boolean) => {
+    at.current = to;
+    Animated.timing(v, { toValue: to ? 1 : 0, duration: TOGGLE_MS, easing: TOGGLE_EASE, useNativeDriver: NATIVE }).start();
+  }, [v]);
+  /** Glide to `to` now, and make the change a frame later (once the glide is with the native driver). */
+  const go = useCallback((to: boolean, change: () => void) => {
+    glide(to);
+    pending.current = true;
+    requestAnimationFrame(() => { pending.current = false; change(); });
+  }, [glide]);
+  // after every render: where the setting really is wins (changed another way, or refused) — not while a tap's own
+  // change is still on its way
+  useEffect(() => { if (!pending.current && on !== at.current) glide(on); });
+  return { v, go };
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+type TapState = { pressed: boolean; hovered: boolean };
+export type TapProps = Omit<PressableProps, 'style' | 'children'> & {
+  style?: StyleProp<ViewStyle> | ((s: TapState) => StyleProp<ViewStyle>);
+  children?: ReactNode;
+  /** scale: sinks and dims (buttons, keys); dim: only dims (wide rows); none: no press feedback */
+  feel?: 'scale' | 'dim' | 'none';
+};
+
+/** A Pressable with the chrome's press feel. `style` may be a function of { pressed, hovered }, as a Pressable's. */
+export function Tap({ style, feel = 'scale', onPressIn, onPressOut, onHoverIn, onHoverOut, ...rest }: TapProps) {
+  const v = useRef(new Animated.Value(0)).current;
+  const [st, setSt] = useState<TapState>({ pressed: false, hovered: false });
+  const resolved = typeof style === 'function' ? style(st) : style;
+  const base = (StyleSheet.flatten(resolved)?.opacity as number | undefined) ?? 1;
+  const anim = useMemo(() => (feel === 'none' ? null : {
+    opacity: v.interpolate({ inputRange: [0, 1], outputRange: [base, base * (feel === 'dim' ? 0.7 : 0.82)] }),
+    ...(feel === 'scale' ? { transform: [{ scale: v.interpolate({ inputRange: [0, 1], outputRange: [1, 0.96] }) }] } : {}),
+  }), [v, base, feel]);
+  return (
+    <AnimatedPressable
+      {...rest}
+      onPressIn={(e: GestureResponderEvent) => { setSt(s => ({ ...s, pressed: true })); ease(v, 1, PRESS_IN); onPressIn?.(e); }}
+      onPressOut={(e: GestureResponderEvent) => { setSt(s => ({ ...s, pressed: false })); ease(v, 0); onPressOut?.(e); }}
+      onHoverIn={(e: Parameters<NonNullable<PressableProps['onHoverIn']>>[0]) => { setSt(s => ({ ...s, hovered: true })); onHoverIn?.(e); }}
+      onHoverOut={(e: Parameters<NonNullable<PressableProps['onHoverOut']>>[0]) => { setSt(s => ({ ...s, hovered: false })); onHoverOut?.(e); }}
+      style={[resolved, anim]}
+    />
+  );
+}
+
+/**
+ * One option of a segmented control: its label fades between the two colours as it's chosen. On a device that's two
+ * labels, one over the other, crossfaded on the native driver (it animates a fade smoothly, not a text colour); in a
+ * browser, one label whose colour is eased.
+ */
+function SegOption({ label, on, onPress, onLayout, style, textStyle, onText, offText, role }: {
+  label: string; on: boolean; onPress: () => void; onLayout: (r: LayoutRectangle) => void;
+  style?: StyleProp<ViewStyle>; textStyle?: StyleProp<TextStyle>; onText: string; offText: string; role: 'button' | 'tab';
+}) {
+  const t = useEased(on);
+  const ink = useMemo(() => (NATIVE ? t.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) : t.interpolate({ inputRange: [0, 1], outputRange: [offText, onText] })), [t, offText, onText]);
+  return (
+    <Tap feel="dim" accessibilityRole={role} accessibilityLabel={label} accessibilityState={{ selected: on }} onPress={onPress}
+      onLayout={e => onLayout(e.nativeEvent.layout)} style={[segCenter, style, { backgroundColor: 'transparent' }]}>
+      {NATIVE ? (
+        <>
+          <Animated.Text style={[textStyle, { color: offText, opacity: ink }]}>{label}</Animated.Text>
+          {/* (the chosen colour's label, exactly over the other) */}
+          <View pointerEvents="none" style={segOver}>
+            <Animated.Text accessible={false} style={[textStyle, { color: onText, opacity: t }]}>{label}</Animated.Text>
+          </View>
+        </>
+      ) : <Animated.Text style={[textStyle, { color: ink }]}>{label}</Animated.Text>}
+    </Tap>
+  );
+}
+// (no grow: a device's layout grows a row with a growing child to all the room it's given — the control then ran the
+// width of its menu row, squeezing the row's own label out)
+const segRow: ViewStyle = { flexDirection: 'row', alignSelf: 'stretch' };
+/** An option's label sits in its middle, both ways, whatever its padding. */
+const segCenter: ViewStyle = { alignItems: 'center', justifyContent: 'center' };
+// (spelt out: React Native 0.86 dropped StyleSheet.absoluteFillObject, and spreading it gave nothing — the label then sat
+// under the other one, each option centring the pair)
+const segOver: ViewStyle = { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' };
+
+/**
+ * A segmented control (Units, Precision, Draft / Annotate, Pages / Spaces): the chosen option's highlight slides to
+ * the one picked as the labels fade. `style` is the track, `optionStyle` each option, `onColor` the highlight.
+ */
+export function Segmented<T extends string | number>({ value, options, onPick, style, optionStyle, textStyle, onColor = '#fff', onText, offText, role = 'button' }: {
+  value: T; options: [T, string][]; onPick: (v: T) => void;
+  style?: StyleProp<ViewStyle>; optionStyle?: StyleProp<ViewStyle>; textStyle?: StyleProp<TextStyle>;
+  onColor?: string; onText: string; offText: string; role?: 'button' | 'tab';
+}) {
+  const [boxes, setBoxes] = useState<Record<string, LayoutRectangle>>({});
+  const box = boxes[String(value)];
+  const radius = (StyleSheet.flatten(optionStyle)?.borderRadius as number | undefined) ?? 999;
+  return (
+    <View style={style} accessibilityRole={role === 'tab' ? 'tablist' : undefined}>
+      {/* the options and their highlight share an unpadded row, the highlight the row's whole height: only where an
+          option starts and how wide it is are measured, so a later layout (text settling on a device) can't leave
+          the highlight off its label */}
+      <View style={segRow}>
+        {/* the first time it's measured it's simply there; after that it slides (and widens or narrows) to the choice */}
+        {box && (
+          <TweenView pointerEvents="none" to={{ left: box.x, width: box.width }}
+            style={{ position: 'absolute', top: 0, bottom: 0, borderRadius: radius, backgroundColor: onColor }} />
+        )}
+        {options.map(([v, label]) => (
+          <SegOption key={String(v)} label={label} on={v === value} onPress={() => onPick(v)} role={role}
+            onLayout={r => setBoxes(b => (b[String(v)] && b[String(v)].x === r.x && b[String(v)].width === r.width ? b : { ...b, [String(v)]: r }))}
+            style={optionStyle} textStyle={textStyle} onText={onText} offText={offText} />
+        ))}
+      </View>
+    </View>
+  );
+}
+

package/src/react/ports.ts

@@ -1,11 +1,17 @@
 import { conflictEnd, conflictOpen, conflictStart } from '../editor/conflict';
 import { elevSyncFrame } from '../editor/elevation';
-import { keypadEnd, keypadOpen, keypadStart, keypadTyped } from '../editor/keypad';
+import { keypadEnd, keypadOnHost, keypadOpen, keypadSpec, keypadStart, keypadSubmit, keypadTyped } from '../editor/keypad';
+import type { KeypadSpec } from '../editor/ports';
+import { hostKeypad, type HostKeypadRequest } from './hostKeypad';
+import { offersJobMeasurements } from '../editor/links';
+import type { LinkTarget } from '../model/types';
 import type { EditorPorts } from '../editor/ports';
 import { onSessionReset } from '../model/session';
 import { saveNow } from '../model/store';
-import { requestDraw } from '../render/view';
+import { manualSave, noteEdits, saveDrawing } from './saving';
+import { requestDraw, requestOverlayDraw } from '../render/view';
 import { notify, ui } from './store';
+import { setInteracting } from './Duck';
 
 /* The editor's ports for the React Native interface: each request updates the interface's state and re-renders. */
 
@@ -34,13 +40,58 @@ function downloadInBrowser(name: string, mime: string, data: string): void {
   setTimeout(() => URL.revokeObjectURL(a.href), 2000);
 }
 
+/** What the host's keypad is asked for (see hostKeypad.ts): its answer goes to this keypad, if it's still the one open. */
+function hostRequest(spec: KeypadSpec): HostKeypadRequest {
+  const mine = () => keypadSpec() === spec;
+  return {
+    title: spec.title,
+    sub: spec.sub,
+    kind: spec.numeric ? 'angle' : 'length',
+    current: spec.initial || undefined,
+    extras: () => (spec.extras?.() ?? []).map(x => ({ label: x.label, ariaLabel: x.ariaLabel, on: x.on, danger: x.danger, press: () => { if (mine()) { x.onPress(); notify(); } } })),
+    apply: v => { if (mine()) keypadSubmit(v); },
+    cancel: () => { if (mine()) reactPorts.closeKeypad(); },
+    ...(spec.measurements && offersJobMeasurements() ? {
+      measurementKind: spec.measurements.kind,
+      pickMeasurement: (t: LinkTarget) => { if (mine()) { spec.measurements!.pick(t); notify(); } },
+    } : {}),
+  };
+}
+
+/** A slider above the bar (an image's opacity or rotation, the tiles' size): opened, swapped for another, or closed by its button again. */
+function toggleImagePop(kind: 'opacity' | 'rotate' | 'tilesize'): void {
+  ui.imgPop = ui.imgPop === kind ? null : kind;
+  ui.menu = false;
+  // (a toast would sit over the slider: it's done with once the slider opens)
+  if (ui.imgPop) ui.toast = null;
+  notify();
+}
+
+/**
+ * One re-render for all an edit refreshes: an edit alone refreshes the bar, the status, the drawer and the wall view,
+ * and each refresh had every component on screen work out again what it shows — four to seven times for one tap.
+ * React draws once at the end of the task anyway; this has them look once too.
+ */
+let refreshQueued = false;
+function notifySoon(): void {
+  if (refreshQueued) return;
+  refreshQueued = true;
+  queueMicrotask(() => { refreshQueued = false; notify(); });
+}
+onSessionReset(() => { refreshQueued = false; });
+
 export const reactPorts: EditorPorts = {
   refresh(part) {
-    if (part === 'keypad') requestDraw(); // canvas previews follow the typed value
+    // canvas previews follow the typed value: they're drawn with the moving parts, not the whole drawing again
+    if (part === 'keypad') requestOverlayDraw();
     if (part === 'elevation') elevSyncFrame(); // the open wall's frame from the live drawing (closes the view if the wall is gone)
-    notify();
+    noteEdits();
+    notifySoon();
   },
+  // only what needs attention: something asked for that couldn't be done, and why. What did happen shows on the
+  // drawing itself — no status messages ("Deleted", "Undone", "Points joined"…)
   toast(msg, o = {}) {
+    if (!o.warn) return;
     ui.toast = { id: ++toastId, msg, warn: o.warn, action: o.action };
     clearTimeout(toastTimer);
     toastTimer = setTimeout(() => { ui.toast = null; notify(); }, o.warn ? 5200 : 3200);
@@ -48,6 +99,17 @@ export const reactPorts: EditorPorts = {
   },
   openKeypad(spec) {
     reactPorts.dismissConflict();
+    // a phone's host asks with its own keypad: the editor keeps the request (a laser reading, Delete, another tool can
+    // still close it) but draws nothing of its own
+    const host = hostKeypad();
+    if (host) {
+      if (keypadOpen()) reactPorts.closeKeypad();
+      keypadStart(spec, true);
+      host(hostRequest(spec));
+      notify();
+      requestDraw();
+      return;
+    }
     // the keypad has no text field: let typed keys reach the editor, not the button that opened it (Enter would press it again)
     if (typeof document !== 'undefined') (document.activeElement as HTMLElement | null)?.blur?.();
     keypadStart(spec);
@@ -57,7 +119,8 @@ export const reactPorts: EditorPorts = {
     requestDraw();
   },
   closeKeypad() {
-    const spec = keypadEnd();
+    const onHost = keypadOnHost(), spec = keypadEnd();
+    if (onHost) hostKeypad()?.(null);
     ui.keypad = false;
     notify();
     requestDraw();
@@ -78,18 +141,24 @@ export const reactPorts: EditorPorts = {
     return true;
   },
   openDrawer(tab) { ui.drawer = tab ?? 'pages'; notify(); },
-  showNoteInput(x, y, cb) { ui.note = { x, y, cb }; notify(); },
+  showNoteInput(x, y, cb, initial) { ui.note = { x, y, cb, initial }; notify(); },
   hideNoteInput() { if (ui.note) { ui.note = null; notify(); } },
-  openPalette() { ui.palette = true; notify(); },
+  // (its button again closes it)
+  openPalette() { ui.palette = !ui.palette; ui.menu = false; ui.shapeMenu = null; notify(); },
+  toggleImageOpacity() { toggleImagePop('opacity'); },
+  toggleImageRotation() { toggleImagePop('rotate'); },
+  toggleTileSize() { toggleImagePop('tilesize'); },
   editRoomName(roomId) { ui.drawer = 'rooms'; ui.renameRoom = roomId; notify(); },
   setCursor(cursor, where = 'plan') { cursorTargets[where]?.(cursor); },
+  interacting: setInteracting,
   dismissPopovers() {
-    const was = ui.palette || ui.menu;
-    if (was) { ui.palette = false; ui.menu = false; notify(); }
+    const was = ui.palette || !!ui.menu || !!ui.imgPop || !!ui.shapeMenu;
+    if (was) { ui.palette = false; ui.menu = false; ui.imgPop = null; ui.shapeMenu = null; notify(); }
     return was;
   },
   saveFile(name, mime, data) { (fileSaver ?? downloadInBrowser)(name, mime, data); },
   save() {
+    if (manualSave()) { void saveDrawing(); return; }
     const ok = saveNow();
     reactPorts.toast(ok ? 'Saved on this device' : 'Saved, but the image was too large to keep offline.', { warn: !ok });
   },

package/src/react/saving.ts

@@ -0,0 +1,80 @@
+import { ed } from '../app/state';
+import type { CadSync } from '../data/sync';
+import { sessionState } from '../model/session';
+import { store } from '../model/store';
+import { notify } from './store';
+import { renderThumbnail } from './thumbnail';
+
+/*
+  Manual saving (BOLDR's annotation behaviour): edits stay in the editor until Save writes them — the drawing, its
+  preview and its measurements — and leaving with unsaved edits is the host's to warn about (it gets the state through
+  CadEditor's onSaveState, and can save on the way out with saveCadDrawing).
+*/
+
+export type CadSaveState = 'saved' | 'dirty' | 'saving' | 'error';
+
+const sv = sessionState(() => ({
+  manual: false,
+  state: 'saved' as CadSaveState,
+  /** the edit count when the drawing last matched what's saved */
+  cleanSeq: 0,
+  sync: null as CadSync | null,
+  listener: null as ((s: CadSaveState) => void) | null,
+}));
+
+export const manualSave = (): boolean => sv.manual;
+export const saveState = (): CadSaveState => sv.state;
+
+function setState(s: CadSaveState): void {
+  if (sv.state === s) return;
+  sv.state = s;
+  sv.listener?.(s);
+  notify();
+}
+
+/** Start manual saving for the drawing open in `sync`; `listener` hears each change of state. */
+export function startManualSave(sync: CadSync, listener: ((s: CadSaveState) => void) | null): void {
+  Object.assign(sv, { manual: true, state: 'saved', cleanSeq: ed.editSeq, sync, listener });
+  listener?.('saved');
+}
+
+export function stopManualSave(): void {
+  Object.assign(sv, { manual: false, sync: null, listener: null });
+}
+
+/** An edit was made: unsaved from now on (cheap, so it runs with every refresh of the editor). */
+export function noteEdits(): void {
+  if (sv.manual && sv.state !== 'saving' && ed.editSeq !== sv.cleanSeq) setState('dirty');
+}
+
+/** Compare the drawing with what's saved (an undo back to the saved drawing is clean again). */
+export function checkChanges(): void {
+  if (!sv.manual || !sv.sync || sv.state === 'saving') return;
+  if (sv.sync.hasChanges()) setState('dirty');
+  else { sv.cleanSeq = ed.editSeq; setState('saved'); }
+}
+
+/** Whether the drawing has edits that aren't saved (or a save that failed or is still going). */
+export function hasUnsavedChanges(): boolean {
+  checkChanges();
+  return sv.manual && sv.state !== 'saved';
+}
+
+/** Save: write the drawing, its preview and its measurements. Resolves true once written, false if that failed. */
+export async function saveDrawing(): Promise<boolean> {
+  const sync = sv.sync;
+  if (!sv.manual || !sync || !store.project) return true;
+  setState('saving');
+  const before = sync.failures();
+  sync.persistence.save();
+  const thumb = renderThumbnail(store.project.pages[0]);
+  if (thumb) sync.saveThumbnail(thumb);
+  await sync.idle();
+  await sync.idle(); // the measurement ids the save stamped on the pages
+  if (sync.failures() !== before) { setState('error'); return false; }
+  // edited while it saved: still unsaved
+  const dirty = sync.hasChanges();
+  if (!dirty) sv.cleanSeq = ed.editSeq;
+  setState(dirty ? 'dirty' : 'saved');
+  return true;
+}

package/src/react/store.ts

@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from 'react';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
 import type { ConflictSpec, DrawerTab, ToastOpts } from '../editor/ports';
 import { sessionState } from '../model/session';
 
@@ -22,8 +22,24 @@ const getVersion = () => version;
 /** Re-render this component whenever the editor changes. */
 export const useEditorVersion = (): number => useSyncExternalStore(subscribe, getVersion, getVersion);
 
+/** The editor's change count (for a key that should change with every change: see useEditorKey). */
+export const editorVersion = (): number => version;
+
+/**
+ * Re-render this component only when what it shows changes, not on every change to the editor: `key` sums up all it
+ * reads, as one string, worked out again after each change — the same string, and it isn't rendered again. Keep it
+ * cheap and free of side effects; a component that's only briefly on screen can key on editorVersion() instead.
+ * (Re-rendering the whole interface on every change was most of the time an interaction took on a phone.)
+ */
+export function useEditorKey(key: () => string): string {
+  const latest = useRef(key);
+  latest.current = key;
+  const get = useCallback(() => latest.current(), []);
+  return useSyncExternalStore(subscribe, get, get);
+}
+
 export interface ToastState { id: number; msg: string; warn?: boolean; action?: ToastOpts['action'] }
-export interface NoteInputState { x: number; y: number; cb: (text: string) => void }
+export interface NoteInputState { x: number; y: number; cb: (text: string) => void; initial?: string }
 
 export const ui = sessionState(() => ({
   toast: null as ToastState | null,
@@ -37,7 +53,23 @@ export const ui = sessionState(() => ({
   renameRoom: null as string | null,
   note: null as NoteInputState | null,
   palette: false,
-  menu: false,
+  /** what the tool just picked from the rail does (a note under the tabs that goes by itself); seq tells one pick from the next */
+  toolTip: null as { text: string; seq: number } | null,
+  /** the slider open above the bar: the selected image's opacity, or how far it's turned; or the link tiles' size */
+  imgPop: null as null | 'opacity' | 'rotate' | 'tilesize',
+  /** the tool each shared place on the rail draws with (the last picked; editor/mode.ts TOOL_GROUPS), and the menu of
+      a group's tools, open beside its place at x, y */
+  picked: { shapes: 'line', marks: 'arrow' } as Record<string, string>,
+  shapeMenu: null as { x: number; y: number; group: string } | null,
+  /** the top bar's open menu: ••• (exports, files and settings) or Layers (the stack) */
+  menu: false as false | 'more' | 'layers',
   /** when a sheet opened (taps on the backdrop right after are the opening tap's ghost click) */
   sheetOpenedAt: 0,
+  /**
+   * How wide the top row's mode tabs and right-hand buttons laid out (0: not yet), and whether those buttons were
+   * measured in 3D, which has no Layers (see topRow.ts)
+   */
+  topRoom: { tabs: 0, right: 0, right3d: false },
+  /** Annotate's + floats in the corner (as a phone's) on a screen too short for it under the rail (see Rail) */
+  linkFab: false,
 }));

package/src/react/theme.ts

@@ -3,9 +3,17 @@ import { Platform } from 'react-native';
 /* The editor chrome's colors and type (dark in both themes; the canvas has its own light and dark colors). */
 
 export const C = {
+  /** card: the Pages panel's cards (Figma 2548:101989), a step between grey-1 and grey-2 */
+  card: '#3A3B3C',
   dark: '#181A1C', g1: '#2B2C2E', g2: '#424345', g3: '#626364', g4: '#9FA0A2', lg1: '#BCBEC2', lg2: '#E8EAED',
   yellow: '#FFAD00', blue: '#0066FF', lblue: '#50A6FF', lblue2: '#89C3FF', red: '#E83D2F', wred: '#DA1100',
   purple: '#BD30A8', green: '#00E920', white: '#FFFFFF', softRed: '#FFB4AE',
+  /** the keypad's keys: digits, unit and symbol keys, Del */
+  key: '#4B6074', key2: '#67819A', mutedRed: '#DF6358',
+  /** a toggle that's on */
+  on: '#58A942',
+  /** BOLDR's measurement tiles (Other/Active Blue): the job's lengths under a line's length keys */
+  tile: '#0364F4',
 } as const;
 
 /** The chrome's typeface: Montserrat in a browser (the host loads the web font); the system font on a device. */

package/src/react/topRow.ts

@@ -0,0 +1,71 @@
+import { is3d } from '../editor/view3dState';
+import { notify, ui } from './store';
+
+/*
+  The top row: the back button and the crumb on the left, the round buttons on the right, and the mode tabs centred
+  between them. Where they don't all fit:
+    - a tall screen (a phone; an iPad held upright) puts the tabs on a row of their own under it, as a phone has them;
+    - a short one (a phone on its side) has no height to spare for that: the crumb goes, and the tabs sit between the
+      back button and the buttons.
+  Worked out from their widths as they lay out, so it holds for whatever buttons the host adds. (Centred regardless,
+  an 11" iPad's tabs covered the crumb and, in Draft, the Fit button.)
+*/
+
+/** From the screen's edges to the row, and between the tabs and what's beside them. */
+const EDGE = 12, GAP = 10;
+/** The back button's gap to the crumb. */
+const BACK_GAP = 8;
+/** A crumb narrower than this isn't worth showing; the crumb's widest. */
+const CRUMB_MIN = 140, CRUMB_MAX = 420;
+/** Shorter than this (points), a screen keeps the tabs in the top row. */
+const SHORT = 560;
+/** Until they've laid out: about how wide the tabs and the right-hand buttons are. */
+const GUESS = { tabs: 232, right: 330 };
+
+/** Where the row the tabs sit on starts (from the editor's top), and the line under them (the tool tips). */
+export const TABS_TOP = { row: 12, below: 66 }, TIP_TOP = { row: 66, below: 120 };
+
+export interface TopLayout {
+  /** the tabs on a row of their own under the top row */
+  below: boolean;
+  /** in the top row, but not centred on the screen: their left edge (null: centred) */
+  left: number | null;
+  /** how wide the crumb may be (0: it isn't shown) */
+  crumb: number;
+}
+
+/** A part of the row laid out `w` wide (the right-hand buttons: as they are in this mode). Nothing changes for less than a point. */
+export function setTopRoom(part: 'tabs' | 'right', w: number): void {
+  const r = ui.topRoom, now3d = part === 'right' && is3d();
+  if (Math.abs(r[part] - w) < 1 && (part === 'tabs' || r.right3d === now3d)) return;
+  ui.topRoom = part === 'tabs' ? { ...r, tabs: w } : { ...r, right: w, right3d: now3d };
+  notify();
+}
+
+/**
+ * The tabs' width, and the right-hand buttons' as Draft has them: 3D has no Layers button, and it's counted anyway, so
+ * switching between them never moves the tabs.
+ */
+function widths(size: number): { tabs: number; right: number } {
+  const r = ui.topRoom;
+  return { tabs: r.tabs || GUESS.tabs, right: r.right ? r.right + (r.right3d ? size + BACK_GAP : 0) : GUESS.right };
+}
+
+/** The top row on a screen `width` by `height` (round buttons `size` across). */
+export function topLayout(width: number, height: number, phone: boolean, size = 46): TopLayout {
+  const m = widths(size), back = EDGE + size + BACK_GAP, end = width - EDGE - m.right - GAP;
+  if (phone) return { below: true, left: null, crumb: 0 };
+  // centred: the crumb up to the tabs, the buttons clear of them
+  const side = width / 2 - m.tabs / 2 - GAP, centred = side >= m.right + EDGE;
+  if (centred && side - back >= CRUMB_MIN) return { below: false, left: null, crumb: Math.min(CRUMB_MAX, side - back) };
+  if (height < SHORT) {
+    if (centred) return { below: false, left: null, crumb: 0 };
+    const from = EDGE + size + GAP;
+    if (end - from >= m.tabs) return { below: false, left: (from + end) / 2 - m.tabs / 2, crumb: 0 };
+  }
+  const crumb = Math.min(CRUMB_MAX, end - back);
+  return { below: true, left: null, crumb: crumb >= CRUMB_MIN ? crumb : 0 };
+}
+
+/** The layout as a string, for a component's key (it's drawn again when this changes). */
+export const topKey = (l: TopLayout): string => [l.below, l.left == null ? '' : Math.round(l.left), Math.round(l.crumb)].join(',');

package/src/react/touch.ts

@@ -0,0 +1,10 @@
+import { Platform } from 'react-native';
+import { ed } from '../app/state';
+
+/**
+ * Whether the person is on a touch screen: a device, a coarse pointer in a browser (an iPad), or a finger the last
+ * thing on the drawing. A keypad swipes to the job's measurements there, as BOLDR's own keypads do; a desktop has a
+ * button for them.
+ */
+export const touchUI = (): boolean =>
+  Platform.OS !== 'web' || ed.lastPointerTouch || (typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches);

package/src/render/ctx.ts

@@ -23,17 +23,25 @@ export interface DrawCtx {
   translate(x: number, y: number): void;
   /** radians, clockwise on screen */
   rotate(angle: number): void;
+  scale(x: number, y: number): void;
   setLineDash(segments: number[]): void;
 
   beginPath(): void;
   moveTo(x: number, y: number): void;
   lineTo(x: number, y: number): void;
   closePath(): void;
+  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
   /** as the HTML canvas: angles in radians, clockwise on screen unless `counterclockwise` */
   arc(x: number, y: number, r: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
   arcTo(x1: number, y1: number, x2: number, y2: number, r: number): void;
   rect(x: number, y: number, w: number, h: number): void;
   roundRect(x: number, y: number, w: number, h: number, r: number): void;
+  /**
+   * Optional: start a path that is a shape `draw` makes (drawn there with its top left at x, y), for a shape drawn many
+   * times a frame — every chip's and badge's box. An engine that has it keeps each shape (by `key`) once and moves it
+   * into place, instead of describing it again each time; without it, `draw` draws it there.
+   */
+  shape?(key: string, x: number, y: number, draw: (c: DrawCtx, x: number, y: number) => void): void;
   fill(): void;
   stroke(): void;
   clip(): void;