@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/react/PlanCanvas.native.tsx

@@ -1,38 +1,141 @@
-import { Canvas, Picture, type SkPicture } from '@shopify/react-native-skia';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Canvas, Group, Picture, Skia, type SkPicture, type Transforms3d } from '@shopify/react-native-skia';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { View, type LayoutChangeEvent } from 'react-native';
 import { Gesture, GestureDetector, PointerType, type GestureTouchEvent, type TouchData } from 'react-native-gesture-handler';
+import { runOnJS, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { ed } from '../app/state';
-import { pointerCancel, pointerDown, pointerLeave, pointerMove, pointerUp, type PointerIn } from '../editor/gestures';
-import { drawPlan } from '../render/draw';
-import { cvs, fitView, setFrameRenderer, setImageLoader, setViewSize } from '../render/view';
+import { navigationOnly, pointerCancel, pointerDown, pointerLeave, pointerMove, pointersStill, pointerUp, setHostNavigation } from '../editor/gestures';
+import { drawPlanOverlay, drawPlanStatic, drawPlanUnder } from '../render/draw';
+import {
+  carryTo, NAV_CANCEL, NAV_DOWN, NAV_MOVE, NAV_UP, navTouch, type NavState, type NavView, type UiView,
+} from '../render/navigate';
+import {
+  cvs, drawingChanged, fitView, imagesChanged, mainT, markDrawingKept, markImagesKept, paintPending, setFrameRenderer, setImageLoader, setTextMeasure, setViewFromHost, setViewSize, V, type Xform,
+} from '../render/view';
 import { page } from '../model/store';
-import { recordPicture, skiaImageLoader } from '../skia/host';
+import { recordLayers, skiaImageLoader, skiaTextMeasure } from '../skia/host';
 
 /*
-  The plan on a device: each frame is recorded as a Skia picture by the shared renderer, and touches, Apple Pencil and
-  a trackpad pointer reach editor/gestures.ts through one manual gesture (plus hover), as the browser's pointer events
-  do. Pen draws and fingers navigate, as on the web.
+  The plan on a device. Pan and zoom never wait for the JavaScript thread: the fingers are followed on the UI thread
+  (a worklet), which moves the view and redraws at the screen's own rate (120 Hz on ProMotion), as a native app does.
+
+  The drawing itself is drawn on the JavaScript thread by the shared renderer, recorded as Skia pictures, and handed
+  to the canvas through shared values — so no frame goes through React. While a pinch runs, that thread draws the
+  plan again at the newest view as fast as it can, and until each new picture arrives the UI thread moves and scales
+  the last one to where the fingers have taken the view. Pictures reach past the screen's edges (OVERSCAN), so one
+  that has fallen a little behind a pinch out or a fling shows drawing, not an edge; what stays put on the screen (the
+  wall view's key plan, the conflict border) is drawn apart and never moves.
+
+  As a tool follows the pointer, only the moving parts (preview, snap marker, selection box) are drawn again; the
+  drawing is kept until it changes. Touches still reach editor/gestures.ts for the tools, Apple Pencil, and two- and
+  three-finger taps (undo, redo); it leaves the view to this canvas (setHostNavigation).
 */
 
-const kindOf = (t: PointerType): string => (t === PointerType.STYLUS ? 'pen' : t === PointerType.MOUSE ? 'mouse' : 'touch');
-const pin = (t: TouchData, kind: string): PointerIn => ({ id: t.id, kind, x: t.x, y: t.y, t: Date.now(), cx: t.absoluteX, cy: t.absoluteY });
+/** How far past each edge of the screen a picture of the drawing reaches, as a share of the screen's longer side. */
+const OVERSCAN = 0.5;
+const EMPTY = Skia.Picture.MakePicture(null)!;
+
+/** What the JavaScript thread drew last, and the view it drew it at. */
+interface Frame {
+  /** the photos and plans under the drawing, the drawing, its moving parts, and what stays put on the screen (from each) */
+  under: SkPicture; base: SkPicture; overlay: SkPicture; baseFixed: SkPicture; overlayFixed: SkPicture;
+  /** the view it was drawn at, as a transform (s, ox, oy) on a W × H screen and as a view */
+  s: number; ox: number; oy: number; W: number; H: number; view: NavView;
+  /** the latest of the UI thread's views it was drawn at (see UiView) */
+  seq: number;
+}
+/** A touch as the UI thread hands it over: id, position on the canvas, position in the window. */
+type Packed = [id: number, x: number, y: number, ax: number, ay: number];
+
+/** The latest of the UI thread's views this thread has taken; each frame says which it includes. */
+let hostSeq = 0;
 
-export function PlanCanvas() {
-  const [picture, setPicture] = useState<SkPicture | null>(null);
+/**
+ * Touches from the UI thread: the view first, if the fingers moved it, then each touch to the editor's gestures (as a
+ * pointer lands, `down` is every one still down: any other's lift was lost).
+ */
+function touchesOnJS(type: number, kind: string, ts: Packed[], view: UiView | null, down: number[] | null): void {
+  if (view) { hostSeq = view.seq; setViewFromHost(view.s, view.cx, view.cy); }
+  if (down) pointersStill(down);
+  const fn = type === NAV_DOWN ? pointerDown : type === NAV_MOVE ? pointerMove : type === NAV_UP ? pointerUp : pointerCancel, t = Date.now();
+  for (const [id, x, y, ax, ay] of ts) fn({ id, kind, x, y, t, cx: ax, cy: ay });
+  // what a tool shows following the finger (a shape's outline, its marks, the snap), drawn now: left for the next frame
+  // it reached the screen a frame behind the finger. Only when nothing but those moving parts changed — the drawing
+  // itself, and the view, are drawn on the frame as before.
+  if (!view && !drawingChanged() && !imagesChanged()) paintPending();
+}
+
+const kindOf = (t: PointerType): string => {
+  'worklet';
+  return t === PointerType.STYLUS ? 'pen' : t === PointerType.MOUSE ? 'mouse' : 'touch';
+};
+const pack = (ts: TouchData[]): Packed[] => {
+  'worklet';
+  return ts.map(t => [t.id, t.x, t.y, t.absoluteX, t.absoluteY] as Packed);
+};
+
+export const PlanCanvas = memo(function PlanCanvas() {
   const first = useRef(true);
+  const frame = useSharedValue<Frame | null>(null);
+  const view = useSharedValue<UiView>({ s: 1, cx: 0, cy: 0, seq: 0 });
+  // the UI thread's own: the fingers down, whether they're navigating and where they were last, a pen seen
+  const nav = useSharedValue<NavState>({ fingers: {}, navigating: false, last: null, pen: false });
+  const readOnly = useSharedValue(false);
+
+  // the last pictures, carried from the view they were drawn at to the view the fingers have reached since
+  const shift = useDerivedValue<Transforms3d>(() => {
+    const f = frame.value, c = f && carryTo(f, view.value);
+    return c ? [{ translateX: c.tx }, { translateY: c.ty }, { scale: c.k }] : [];
+  });
+  const under = useDerivedValue(() => frame.value?.under ?? EMPTY);
+  const base = useDerivedValue(() => frame.value?.base ?? EMPTY);
+  const overlay = useDerivedValue(() => frame.value?.overlay ?? EMPTY);
+  const baseFixed = useDerivedValue(() => frame.value?.baseFixed ?? EMPTY);
+  const overlayFixed = useDerivedValue(() => frame.value?.overlayFixed ?? EMPTY);
 
   useEffect(() => {
     setImageLoader(skiaImageLoader);
+    // (a device has no browser canvas to measure a note's text with)
+    setTextMeasure(skiaTextMeasure);
+    setHostNavigation(true);
+    /**
+     * The drawing as last kept (and what of it stays put), the photos and plans under it, and the view and size they
+     * were drawn at. Each is drawn again only when it changed: turning or moving a photo redraws the photos alone,
+     * not every wall and dimension over them (a frame's worth of the JavaScript thread on a big plan).
+     */
+    let kept: { under: SkPicture; base: SkPicture; fixed: SkPicture; T: Xform; W: number; H: number } | null = null;
+    let wasReadOnly: boolean | null = null;
     setFrameRenderer(() => {
       const { W, H } = cvs;
       if (!W || !H) return;
-      const { picture: p, result } = recordPicture(W, H, ctx => drawPlan(ctx, W, H));
-      ed.hitChips = result;
-      setPicture(p);
+      // (fingers only move the view: a drawing that can't be edited, or a sheet up over it — the keypad)
+      const navOnly = navigationOnly();
+      if (navOnly !== wasReadOnly) { wasReadOnly = navOnly; readOnly.value = navOnly; }
+      const T = mainT(), v = V();
+      // the drawing changed, the screen changed size, or the view moved (each step of a pinch: the UI thread carries
+      // the last picture along until this one arrives)
+      const moved = !kept || kept.W !== W || kept.H !== H || kept.T.s !== T.s || kept.T.ox !== T.ox || kept.T.oy !== T.oy;
+      const margin = Math.round(Math.max(W, H) * OVERSCAN);
+      let under = kept?.under, base = kept?.base, fixed = kept?.fixed;
+      if (moved || imagesChanged() || !under) {
+        under = recordLayers(W, H, margin, ctx => drawPlanUnder(ctx, W, H, { margin })).moving;
+        markImagesKept();
+      }
+      if (moved || drawingChanged() || !base || !fixed) {
+        const r = recordLayers(W, H, margin, (ctx, fx) => drawPlanStatic(ctx, W, H, { margin, fixed: fx, layer: 'above' }));
+        base = r.moving; fixed = r.fixed;
+        ed.hitChips = r.result;
+        markDrawingKept();
+      }
+      kept = { under, base, fixed, T, W, H };
+      const over = recordLayers(W, H, 0, (ctx, fx) => drawPlanOverlay(ctx, W, H, { fixed: fx }));
+      frame.value = {
+        under: kept.under, base: kept.base, overlay: over.moving, baseFixed: kept.fixed, overlayFixed: over.fixed,
+        s: T.s, ox: T.ox, oy: T.oy, W, H, view: { s: v.s, cx: v.cx, cy: v.cy }, seq: hostSeq,
+      };
     });
-    return () => { setFrameRenderer(null); setImageLoader(null); };
-  }, []);
+    return () => { setFrameRenderer(null); setImageLoader(null); setTextMeasure(null); setHostNavigation(false); };
+  }, [frame, readOnly]);
 
   const onLayout = (e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
@@ -42,25 +145,33 @@ export function PlanCanvas() {
   };
 
   const gesture = useMemo(() => {
+    /** A touch event on the UI thread: follow the fingers (render/navigate.ts), then hand the touches to this thread. */
+    const touch = (type: number, e: GestureTouchEvent) => {
+      'worklet';
+      const kind = kindOf(e.pointerType), down = type === NAV_DOWN ? e.allTouches.map(t => t.id) : null;
+      const r = navTouch(nav.value, type, kind, e.changedTouches, down, readOnly.value, view.value, frame.value);
+      nav.value = r.st;
+      if (r.view !== view.value) view.value = r.view;
+      runOnJS(touchesOnJS)(type, kind, pack(e.changedTouches), r.moved ? r.view : null, down);
+    };
     const touches = Gesture.Manual()
-      .runOnJS(true)
-      .onTouchesDown((e: GestureTouchEvent, manager) => {
+      .onTouchesDown((e, manager) => {
+        'worklet';
         manager.activate();
-        const kind = kindOf(e.pointerType);
-        for (const t of e.changedTouches) pointerDown(pin(t, kind));
+        touch(NAV_DOWN, e);
       })
-      .onTouchesMove((e: GestureTouchEvent) => {
-        const kind = kindOf(e.pointerType);
-        for (const t of e.changedTouches) pointerMove(pin(t, kind));
+      .onTouchesMove(e => {
+        'worklet';
+        touch(NAV_MOVE, e);
       })
-      .onTouchesUp((e: GestureTouchEvent, manager) => {
-        const kind = kindOf(e.pointerType);
-        for (const t of e.changedTouches) pointerUp(pin(t, kind));
+      .onTouchesUp((e, manager) => {
+        'worklet';
+        touch(NAV_UP, e);
         if (e.numberOfTouches === 0) manager.end();
       })
-      .onTouchesCancelled((e: GestureTouchEvent, manager) => {
-        const kind = kindOf(e.pointerType);
-        for (const t of e.changedTouches) pointerCancel(pin(t, kind));
+      .onTouchesCancelled((e, manager) => {
+        'worklet';
+        touch(NAV_CANCEL, e);
         manager.fail();
       });
     // a hovering Pencil (iPad Pro) or trackpad pointer shows snaps and highlights before it touches down
@@ -69,15 +180,21 @@ export function PlanCanvas() {
       .onUpdate(e => pointerMove({ id: -1, kind: kindOf(e.pointerType), x: e.x, y: e.y, t: Date.now() }))
       .onEnd(() => pointerLeave('mouse')); // drops hover highlights, whichever pointer hovered
     return Gesture.Simultaneous(touches, hover);
-  }, []);
+  }, [frame, nav, readOnly, view]);
 
   return (
     <GestureDetector gesture={gesture}>
       <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} onLayout={onLayout} accessibilityLabel="Drawing canvas" testID="cv">
         <Canvas style={{ flex: 1 }}>
-          {picture && <Picture picture={picture} />}
+          <Group transform={shift}>
+            <Picture picture={under} />
+            <Picture picture={base} />
+            <Picture picture={overlay} />
+          </Group>
+          <Picture picture={baseFixed} />
+          <Picture picture={overlayFixed} />
         </Canvas>
       </View>
     </GestureDetector>
   );
-}
+});

package/src/react/PlanCanvas.web.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useRef } from 'react';
-import { elevKeyDown, elevOpen } from '../editor/elevation';
 import { pointerCancel, pointerDown, pointerLeave, pointerMove, pointerUp, wheelZoom, type PointerIn } from '../editor/gestures';
-import { keypadOpen } from '../editor/keypad';
 import { keyDown, keyUp, type KeyIn } from '../editor/keys';
 import { page } from '../model/store';
 import { fitView, initCanvas, resize, setFrameRenderer } from '../render/view';
+import { PAGE_LOCK_ROOT } from './pageLock';
 import { setCursorTarget } from './ports';
 
 /*
@@ -15,6 +14,18 @@ import { setCursorTarget } from './ports';
 
 const keyIn = (e: KeyboardEvent): KeyIn => ({ key: e.key, shift: e.shiftKey, mod: e.metaKey || e.ctrlKey, alt: e.altKey });
 
+/**
+ * Whether a key is the editor's: pressed in it, or with nothing focused — not typed into a field, nor pressed in the
+ * host's own UI over the drawing (a picker, a measurement's detail), which is outside the editor's root. Delete there
+ * would otherwise delete what's selected on the drawing.
+ */
+function forEditor(e: KeyboardEvent): boolean {
+  const t = e.target instanceof HTMLElement ? e.target : null;
+  if (!t || t === document.body || t === document.documentElement) return true;
+  if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable) return false;
+  return !!t.closest('#' + PAGE_LOCK_ROOT);
+}
+
 export function PlanCanvas() {
   const ref = useRef<HTMLCanvasElement>(null);
   useEffect(() => {
@@ -52,10 +63,9 @@ export function PlanCanvas() {
     // capture phase: a key the editor uses (Enter on the keypad, Space to pan, …) must not also press whatever button
     // last took focus
     document.addEventListener('keydown', e => {
-      const tag = (e.target && (e.target as HTMLElement).tagName) || '';
-      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if (!forEditor(e)) return;
       const k = keyIn(e);
-      if (!keypadOpen() && elevOpen() ? elevKeyDown(k) : keyDown(k)) { e.preventDefault(); e.stopPropagation(); }
+      if (keyDown(k)) { e.preventDefault(); e.stopPropagation(); }
     }, { capture: true, signal: ac.signal });
     document.addEventListener('keyup', e => keyUp(keyIn(e)), { capture: true, signal: ac.signal });
     return () => { ac.abort(); ro.disconnect(); setCursorTarget('plan', null); };

package/src/react/Popovers.tsx

@@ -1,48 +1,85 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { Pressable, ScrollView, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
-import { disarmReset, exportDxf, exportPdf, openProjectText, resetArmed, resetToDemo, saveProjectFile } from '../editor/files';
-import { NOTE_COLORS, setNoteColor } from '../editor/markup';
-import { setPreference, togglePreference } from '../editor/project';
-import { ed } from '../app/state';
+import { Animated, Text, TextInput, View, type ViewStyle } from 'react-native';
+import { disarmReset, exportDxf, exportPdf, importPagesText, openProjectText, resetArmed, resetToDemo, saveProjectFile } from '../editor/files';
+import {
+  editDefaultWallHeight, LAYER_ROWS, layerOn, setDefaultWallHeight, setPrecision, setPreference, setUnits,
+  toggleLayer, togglePreference, WALL_PRESETS, type UnitChoice,
+} from '../editor/project';
+import { page } from '../model/store';
+import { fitView } from '../render/view';
+import { command3d, is3d } from '../editor/view3dState';
+import { fmtLen, followingHostUnits } from '../units';
 import { settings } from '../model/settings';
+import { Toggle } from './Buttons';
+import { FitScroll } from './FitScroll';
 import { pickTextFile } from './files';
-import { notify, ui } from './store';
+import { editorVersion, notify, ui, useEditorKey } from './store';
 import { C, FONT, shadow } from './theme';
+import { Segmented, Tap, usePopup } from './motion';
+import { createSheet } from './corners';
 
 const closeMenu = () => { ui.menu = false; disarmReset(); notify(); };
 
 function MenuLink({ label, onPress, danger }: { label: string; onPress: () => void; danger?: boolean }) {
   return (
-    <Pressable accessibilityRole="button" accessibilityLabel={label} onPress={onPress} style={s.link}>
+    <Tap feel="dim" accessibilityRole="button" accessibilityLabel={label} onPress={onPress} style={s.link}>
       <Text style={[s.linkText, danger && { color: C.softRed }]}>{label}</Text>
-    </Pressable>
+    </Tap>
   );
 }
 
 function Seg<T extends string | number>({ value, opts, onPick }: { value: T; opts: [T, string][]; onPick: (v: T) => void }) {
-  return (
-    <View style={s.seg}>
-      {opts.map(([v, l]) => (
-        <Pressable key={String(v)} accessibilityRole="button" accessibilityLabel={l} accessibilityState={{ selected: v === value }} onPress={() => onPick(v)}
-          style={[s.segBtn, v === value && { backgroundColor: '#fff' }]}>
-          <Text style={[s.segText, v === value && { color: C.dark }]}>{l}</Text>
-        </Pressable>
-      ))}
-    </View>
-  );
+  return <Segmented value={value} options={opts} onPick={onPick} style={s.seg} optionStyle={s.segBtn} textStyle={s.segText} onText={C.dark} offText={C.lg1} />;
 }
 
 const MRow = ({ label, children }: { label: string; children: ReactNode }) => (
   <View style={s.mrow}><Text style={s.rowText}>{label}</Text>{children}</View>
 );
 
-/** Settings and files (the ••• button). `units` false: units come from the host (the person's BOLDR settings). */
-export function Menu({ units = true, devTools = true, themeChoice = true }: { units?: boolean; devTools?: boolean; themeChoice?: boolean }) {
-  if (!ui.menu) return null;
+/**
+ * The top bar's menus: Layers, or ••• (on a phone Fit to screen, then exports, opening a file, settings). `accountUnits`: the host formats
+ * lengths (BOLDR: the person's account settings), offered as Units → Account beside the editor's own units.
+ */
+export function Menu({ accountUnits = false, devTools = true, themeChoice = true, pickText = pickTextFile, readOnly = false, phone = false }: {
+  accountUnits?: boolean; devTools?: boolean; themeChoice?: boolean;
+  /** how to pick a .boldr.json file's text (a device's host passes its own); the browser's file picker by default */
+  pickText?: () => Promise<string | null>;
+  readOnly?: boolean;
+  /** a phone's top bar has no room for Fit to screen: it's the menu's first item there */
+  phone?: boolean;
+}) {
+  // (open only briefly: while it is, it follows every change)
+  useEditorKey(() => (ui.menu ? ui.menu + editorVersion() : ''));
+  // two menus in the one spot, each dropping down from its button (top right) and kept built once opened, so it opens
+  // at once the next time; one swapped for the other fades across
+  const more = usePopup(ui.menu === 'more', { y: -6 }, 'top right', true), layers = usePopup(ui.menu === 'layers', { y: -6 }, 'top right', true);
+  return (
+    <>
+      {more.mounted && <MoreMenu open={ui.menu === 'more'} style={more.style} {...{ accountUnits, devTools, themeChoice, pickText, readOnly, phone }} />}
+      {layers.mounted && <LayersMenu open={ui.menu === 'layers'} style={layers.style} />}
+    </>
+  );
+}
+
+/** ••• : the exports, opening a file, and the settings. */
+function MoreMenu({ open, style, accountUnits, devTools, themeChoice, pickText, readOnly, phone }: {
+  open: boolean; style: Animated.WithAnimatedObject<ViewStyle>;
+  accountUnits: boolean; devTools: boolean; themeChoice: boolean; pickText: () => Promise<string | null>; readOnly: boolean; phone: boolean;
+}) {
   const run = (fn: () => void) => () => { closeMenu(); fn(); };
   return (
-    <View style={s.menu} accessibilityLabel="Settings" testID="menu">
-      <ScrollView>
+    <Animated.View style={[s.menu, style]} pointerEvents={open ? 'auto' : 'none'} accessibilityLabel="Settings" testID={open ? 'menu' : undefined}>
+      <FitScroll>
+        {phone && <MenuLink label="Fit to screen" onPress={run(() => (is3d() ? command3d('fit') : fitView()))} />}
+        <MenuLink label="Export page as PDF (.pdf)" onPress={run(exportPdf)} />
+        <MenuLink label="Export page as DXF (.dxf)" onPress={run(exportDxf)} />
+        <View style={s.hr} />
+        {!readOnly && (
+          <>
+            <MenuLink label="Open file… (adds its pages)" onPress={run(() => { pickText().then(t => { if (t != null) importPagesText(t); }, () => {}); })} />
+            <View style={s.hr} />
+          </>
+        )}
         {devTools && (
           <>
             <MenuLink label="Save project to file…" onPress={run(saveProjectFile)} />
@@ -50,21 +87,31 @@ export function Menu({ units = true, devTools = true, themeChoice = true }: { un
             <View style={s.hr} />
           </>
         )}
-        <MenuLink label="Export page as PDF (.pdf)" onPress={run(exportPdf)} />
-        <MenuLink label="Export page as DXF (.dxf)" onPress={run(exportDxf)} />
-        <View style={s.hr} />
-        {units && (
-          <>
-            <MRow label="Units"><Seg value={settings.unit} opts={[['ftin', 'ft-in'], ['in', 'in'], ['mm', 'mm']]} onPick={v => setPreference('unit', v)} /></MRow>
-            <MRow label="Precision"><Seg value={settings.denom} opts={[[16, '1/16"'], [8, '1/8"'], [4, '1/4"']]} onPick={v => setPreference('denom', v)} /></MRow>
-          </>
+        <MRow label="Units">
+          <Seg<UnitChoice>
+            value={accountUnits && followingHostUnits() ? 'account' : settings.unit}
+            opts={[...(accountUnits ? [['account', 'Account'] as [UnitChoice, string]] : []), ['ftin', 'ft-in'], ['in', 'in'], ['mm', 'mm']]}
+            onPick={setUnits}
+          />
+        </MRow>
+        {!(accountUnits && followingHostUnits()) && settings.unit !== 'mm' && (
+          <MRow label="Precision"><Seg value={settings.denom} opts={[[16, '1/16"'], [8, '1/8"'], [4, '1/4"']]} onPick={setPrecision} /></MRow>
         )}
-        <MRow label="Wall height"><Seg value={settings.wallH} opts={[[96, "8'"], [108, "9'"], [120, "10'"]]} onPick={v => setPreference('wallH', v)} /></MRow>
-        <MRow label="Snap to grid"><Switch accessibilityLabel="Snap to grid" value={settings.snapGrid} onValueChange={() => togglePreference('snapGrid')} trackColor={{ true: C.blue, false: C.g3 }} thumbColor="#fff" /></MRow>
+        {/* 8', 9', 10' in a tap; Custom (showing the height when it's one) opens the keypad */}
+        <MRow label="Wall height">
+          <Seg value={WALL_PRESETS.includes(settings.wallH) ? settings.wallH : -1}
+            opts={[[96, "8'"], [108, "9'"], [120, "10'"], [-1, WALL_PRESETS.includes(settings.wallH) ? 'Custom' : fmtLen(settings.wallH)]]}
+            onPick={v => { if (v === -1) { closeMenu(); editDefaultWallHeight(); } else if (setDefaultWallHeight(v)) notify(); }} />
+        </MRow>
+        <MRow label="Snap to grid"><Toggle label="Snap to grid" value={settings.snapGrid} onChange={() => togglePreference('snapGrid')} /></MRow>
+        {/* cabinets, doors and windows snapping to corners and each other */}
+        <MRow label="Object snapping"><Toggle label="Object snapping" value={layerOn('objSnap')} onChange={() => { toggleLayer('objSnap'); notify(); }} /></MRow>
         {themeChoice && (
           <MRow label="Theme"><Seg value={settings.theme} opts={[['system', 'Auto'], ['light', 'Light'], ['dark', 'Dark']]} onPick={v => setPreference('theme', v)} /></MRow>
         )}
-        <MRow label="Auto-constrain while drawing"><Switch accessibilityLabel="Auto-constrain while drawing" value={settings.autoCons} onValueChange={() => togglePreference('autoCons')} trackColor={{ true: C.blue, false: C.g3 }} thumbColor="#fff" /></MRow>
+        <MRow label="Auto-constrain while drawing"><Toggle label="Auto-constrain while drawing" value={settings.autoCons} onChange={() => togglePreference('autoCons')} /></MRow>
+        {/* picking a tool says what it does, for a moment, under the tabs */}
+        <MRow label="Tool tips"><Toggle label="Tool tips" value={settings.toolTips !== false} onChange={() => { togglePreference('toolTips'); notify(); }} /></MRow>
         {devTools && (
           <>
             <View style={s.hr} />
@@ -72,28 +119,46 @@ export function Menu({ units = true, devTools = true, themeChoice = true }: { un
               onPress={() => { if (resetToDemo()) closeMenu(); else notify(); }} />
           </>
         )}
-      </ScrollView>
-    </View>
+      </FitScroll>
+    </Animated.View>
   );
 }
 
-/** The markup colors (from the rail's color dot or the bar's Color). */
-export function Palette() {
-  if (!ui.palette) return null;
+/** A layer's switch: its name, what it shows beneath, the toggle. */
+function LayerRow({ label, sub, value, onChange }: { label: string; sub?: string; value: boolean; onChange: () => void }) {
   return (
-    <View style={s.palette} testID="palette">
-      {NOTE_COLORS.map(c => (
-        <Pressable key={c} accessibilityRole="button" accessibilityLabel={'Color ' + c} onPress={() => { setNoteColor(c); ui.palette = false; notify(); }}
-          style={[s.swatch, { backgroundColor: c }, c === ed.noteColor && { borderColor: '#fff', borderWidth: 3 }]} />
-      ))}
+    <View style={s.mrow}>
+      <View style={{ flexShrink: 1 }}>
+        <Text style={s.rowText}>{label}</Text>
+        {sub ? <Text style={s.rowSub}>{sub}</Text> : null}
+      </View>
+      <Toggle label={label} value={value} onChange={onChange} />
     </View>
   );
 }
 
+/** The Layers menu: what's shown — the photos and plans under the drawing, then each layer. (An image's own lock, scale and
+ * opacity are in its bar when it's selected.) */
+function LayersMenu({ open, style }: { open: boolean; style: Animated.WithAnimatedObject<ViewStyle> }) {
+  const ims = page().underlays, n = ims.length;
+  return (
+    <Animated.View style={[s.menu, s.layers, style]} pointerEvents={open ? 'auto' : 'none'} accessibilityLabel="Layers" testID={open ? 'layersMenu' : undefined}>
+      <FitScroll>
+        <LayerRow label={n > 1 ? 'Photos and plans' : 'Photo or plan underlay'}
+          sub={n > 1 ? n + ' images under the drawing' : n ? 'Traced image under the drawing' : 'None on this page'} value={settings.layers.underlay}
+          onChange={() => { toggleLayer('underlay'); notify(); }} />
+        <View style={s.hr} />
+        {LAYER_ROWS.map(([k, label, sub]) => <LayerRow key={k} label={label} sub={sub} value={layerOn(k)} onChange={() => { toggleLayer(k); notify(); }} />)}
+      </FitScroll>
+    </Animated.View>
+  );
+}
+
 /** Typing a note where the text tool was tapped: Enter places it, Esc cancels, leaving the field places it too. */
 export function NoteInput() {
+  useEditorKey(() => (ui.note ? String(editorVersion()) : ''));
   const n = ui.note, [text, setText] = useState(''), ref = useRef<TextInput>(null), done = useRef(false);
-  useEffect(() => { setText(''); done.current = false; if (n) setTimeout(() => ref.current?.focus(), 30); }, [n]);
+  useEffect(() => { setText(n?.initial ?? ''); done.current = false; if (n) setTimeout(() => ref.current?.focus(), 30); }, [n]);
   if (!n) return null;
   const finish = (commit: boolean) => {
     if (done.current) return;
@@ -103,24 +168,24 @@ export function NoteInput() {
     if (commit && text.trim()) cb(text.trim());
   };
   return (
-    <TextInput ref={ref} accessibilityLabel="Note text" placeholder="Type a note, then Enter" placeholderTextColor={C.g4} value={text} onChangeText={setText}
+    <TextInput ref={ref} accessibilityLabel="Note text" selectTextOnFocus={!!n.initial} placeholder="Type a note, then Enter" placeholderTextColor={C.g4} value={text} onChangeText={setText}
       onSubmitEditing={() => finish(true)} onBlur={() => finish(true)}
       onKeyPress={e => { if (e.nativeEvent.key === 'Escape') finish(false); }}
       style={[s.note, { left: n.x, top: n.y - 18 }]} />
   );
 }
 
-const s = StyleSheet.create({
+const s = createSheet({
   menu: { position: 'absolute', top: 66, right: 12, width: 320, maxHeight: '80%', backgroundColor: C.g1, borderRadius: 15, paddingVertical: 8, zIndex: 45, ...shadow },
   link: { paddingVertical: 10, paddingHorizontal: 16 },
   linkText: { fontFamily: FONT, fontSize: 14, color: '#fff' },
   hr: { height: 1, backgroundColor: C.g2, marginVertical: 6 },
   mrow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 8, paddingHorizontal: 16, gap: 10 },
+  layers: { width: 340 },
+  rowSub: { fontFamily: FONT, fontSize: 12, color: C.g4, marginTop: 2 },
   rowText: { fontFamily: FONT, fontSize: 14, color: '#fff', flexShrink: 1 },
-  seg: { flexDirection: 'row', backgroundColor: C.dark, borderRadius: 16, padding: 3 },
-  segBtn: { paddingVertical: 5, paddingHorizontal: 10, borderRadius: 13 },
+  seg: { flexDirection: 'row', backgroundColor: C.dark, borderRadius: 999, padding: 3 },
+  segBtn: { paddingVertical: 5, paddingHorizontal: 10, borderRadius: 999 },
   segText: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: C.lg1 },
-  palette: { position: 'absolute', left: 70, top: 300, flexDirection: 'row', gap: 8, backgroundColor: C.g1, borderRadius: 24, padding: 8, zIndex: 46, ...shadow },
-  swatch: { width: 32, height: 32, borderRadius: 16, borderWidth: 2, borderColor: 'rgba(255,255,255,0.4)' },
   note: { position: 'absolute', zIndex: 40, minWidth: 220, height: 36, paddingHorizontal: 10, borderRadius: 8, backgroundColor: '#fff', color: C.dark, fontFamily: FONT, fontSize: 14, borderWidth: 2, borderColor: C.purple },
 });