@reekon-tools/boldr-cad 1.3.0 → 1.5.0

package/src/react/BottomBar.tsx

@@ -1,7 +1,7 @@
-import { memo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import { Animated, ScrollView, Text, View } from 'react-native';
 import { ed } from '../app/state';
-import { applyCtxAction, barItems, deleteSelection, plusAction, plusLabel, plusVisible } from '../editor/actions';
+import { applyCtxAction, barItems, deleteSelection, iconAlone, plusAction, plusLabel, plusVisible } from '../editor/actions';
 import { addLinks, LINK_PLUS_LABEL, linkPlusVisible, linkSizeVisible, pageLinkSize, setLinkSize, SIZE_STEPS, sizeToStep, stepToSize } from '../editor/linkActions';
 import { afterEdit } from '../app/edit';
 import { LINK_SIDE_IN } from '../model/links';
@@ -15,35 +15,45 @@ import { Slider } from './Slider';
 import { notify, ui, useEditorKey } from './store';
 import { currentHint } from '../editor/status';
 import { hovered } from './Buttons';
-import { Icon } from './Icon';
+import { Icon, RawSvg } from './Icon';
 import { RichText } from './RichText';
 import { C, FONT, shadow } from './theme';
-import { Tap, usePopup } from './motion';
+import { reducedMotion, Tap, usePopup } from './motion';
 import { createSheet } from './corners';
+import { NATIVE } from './easing';
+import { barCut, barSpans, FADE, FADE_RAMP, fadeSvg, NUDGE, NUDGE_AFTER, NUDGE_HOLD } from './barScroll';
 
 /**
  * The contextual bar: what fits the tool and selection, the yellow + to measure, and the trash on its own. It's as
  * long as what's in it, centred on the screen — on a phone, unless that would put it under the trash, when it moves
  * just clear of it (and scrolls only if even that leaves too little room). In Annotate on a phone (or a window too
  * short for it under the rail) the + that adds the job's files and measurements has the trash's corner while nothing's
- * selected: selecting anything puts the trash there instead, and letting go brings the + back.
+ * selected: selecting anything puts the trash there instead, and letting go brings the + back. A bar that scrolls
+ * says so (react/barScroll.ts).
  */
 export function BottomBar({ phone }: { phone: boolean }) {
-  // what's in the bar, and the selected image's opacity and turn (its sliders)
+  // what's in the bar and what it's for, and the selected image's opacity and turn (its sliders)
   useEditorKey(() => {
     const u = ed.sel.length === 1 && ed.sel[0].type === 'underlay' ? imageById(ed.sel[0].id) : undefined;
-    return [buttonsKey(), plusVisible(), ed.sel.length, u ? u.opacity ?? 0.6 : '', u ? (u.rot ?? 0) + (u.locked ? 'L' : '') : '', linkPlusVisible(), ui.linkFab, linkSizeVisible(), pageLinkSize() ?? ''].join('|');
+    return [buttonsKey(), barFor(), plusVisible(), ed.sel.length, u ? u.opacity ?? 0.6 : '', u ? (u.rot ?? 0) + (u.locked ? 'L' : '') : '', linkPlusVisible(), ui.linkFab, linkSizeVisible(), pageLinkSize() ?? ''].join('|');
   });
   // (on a phone only buttons show: a bar that would hold just a label isn't shown at all. The 3D tab measures and
   // deletes nothing: what's tapped there shows its sizes, and what can be done with it from there)
   const items = shown(phone), plus = !is3d() && plusVisible(), trash = !is3d() && ed.sel.length > 0;
   const fab = !trash && (phone || ui.linkFab) && linkPlusVisible(), corner = trash || fab;
-  // it scrolls only when its buttons can't all fit (a narrow phone): otherwise a drag on the bar would move it
-  const [room, setRoom] = useState(0), [content, setContent] = useState(0), over = content > room + 1;
+  // It scrolls only when its buttons can't all fit (a narrow phone): otherwise a drag on the bar would move it. Its
+  // room comes from its row's width, not the scroller's, which barCut makes shorter than that; where its buttons are
+  // comes from their widths, which a browser reports as they change (not as they move along).
+  const [row, setRow] = useState(0), [content, setContent] = useState(0), [widths, setWidths] = useState<readonly (number | undefined)[]>([]);
+  const room = row - (phone && corner ? TRASH_ROOM : 0) - 2 * PAD - (plus ? ADD + ADD_GAP : 0), over = row > 0 && content > room + 1;
+  const spans = over ? barSpans(items.map((it, i) => (it === 'sep' ? { w: SEP_W + 2 * SEP_M, button: false } : { w: widths[i], button: !('lbl' in it) })), GAP) : null;
+  const cut = !over ? undefined : spans ? barCut(spans, room) : room;
+  const onWidth = useCallback((i: number, w: number) => setWidths(p => (p[i] === w ? p : Object.assign(p.slice(), { [i]: w }))), []);
+  const scroll = useBarScroll(over, cut == null ? 0 : content - cut, barFor());
   return (
     <>
       {(items.length > 0 || plus) && (
-        <View style={[s.bottom, phone ? s.phoneRow : s.centered]}>
+        <View style={[s.bottom, phone ? s.phoneRow : s.centered]} onLayout={e => setRow(e.nativeEvent.layout.width)}>
           <ImagePopover />
           <LinkSizePopover />
           {/* a phone's bar sits between two springs that start as wide as the trash takes and share what's left
@@ -52,11 +62,17 @@ export function BottomBar({ phone }: { phone: boolean }) {
               shares the room out differently and left a short bar off-centre.) The springs let touches through. */}
           {phone && <View pointerEvents="none" style={[s.springL, { flexBasis: corner ? TRASH_ROOM : 0 }]} />}
           <View testID="ctxBar" style={s.ctx}>
-            {/* (a native ScrollView grows to fill its row by default, which stretched the bar across a tablet) */}
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} scrollEnabled={over} bounces={false} contentContainerStyle={s.items}
-              style={{ flexGrow: 0, flexShrink: 1 }} onLayout={e => setRoom(e.nativeEvent.layout.width)} onContentSizeChange={w => setContent(w)}>
-              <BarButtons k={buttonsKey()} phone={phone} />
-            </ScrollView>
+            {/* the buttons and their fades, clipped to the round ends the buttons have: scrolled, they'd stick out past
+                the bar's own. (A native ScrollView grows to fill its row by default, which stretched the bar across a
+                tablet.) */}
+            <View style={s.clip}>
+              <Animated.ScrollView ref={scroll.ref} testID="ctxScroll" horizontal showsHorizontalScrollIndicator={false} scrollEnabled={over} bounces={over}
+                contentContainerStyle={s.items} style={[s.scroller, cut != null && { width: cut }]} onContentSizeChange={w => setContent(w)}
+                onScroll={scroll.onScroll} scrollEventThrottle={16} onScrollBeginDrag={scroll.stop}>
+                <BarButtons k={buttonsKey()} phone={phone} onWidth={onWidth} />
+              </Animated.ScrollView>
+              {cut != null && <Fades x={scroll.x} end={cut} max={content - cut} />}
+            </View>
             {plus && (
               <Tap accessibilityRole="button" accessibilityLabel={plusLabel()} testID="addbtn" onPress={plusAction} style={s.add}>
                 <Icon name="plus" color={C.dark} />
@@ -96,6 +112,61 @@ function buttonsKey(): string {
   return JSON.stringify(its) + '|' + ui.imgPop;
 }
 
+/** What the bar is for: the selection, or what's tapped in 3D. A new one's bar starts at its start. */
+const barFor = (): string => (is3d() ? JSON.stringify(bar3d()) : ed.sel.map(x => x.type + ':' + x.id).join(','));
+
+/** The first bar that scrolls in a session (until the app is next started) is nudged; no other is. */
+let nudged = false;
+
+/**
+ * A bar's scrolling: how far it's scrolled (for its fades), back to its start for each new selection, and the nudge —
+ * the first bar of a session that doesn't fit slides NUDGE along and back, unless Reduce Motion is on. `max`: how far
+ * it scrolls.
+ */
+function useBarScroll(over: boolean, max: number, forKey: string) {
+  const ref = useRef<ComponentRef<typeof ScrollView>>(null), x = useRef(new Animated.Value(0)).current;
+  const back = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const onScroll = useMemo(() => Animated.event([{ nativeEvent: { contentOffset: { x } } }], { useNativeDriver: NATIVE }), [x]);
+  // (and one that's come to fit has only its start)
+  useEffect(() => { ref.current?.scrollTo({ x: 0, animated: false }); x.setValue(0); }, [forKey, over, x]);
+  useEffect(() => {
+    if (!over || nudged || max <= 0 || reducedMotion()) return;
+    // (once what's in it has stopped changing: its buttons' widths come in one by one)
+    const t = setTimeout(() => {
+      nudged = true;
+      ref.current?.scrollTo({ x: Math.min(NUDGE, max), animated: true });
+      back.current = setTimeout(() => ref.current?.scrollTo({ x: 0, animated: true }), NUDGE_HOLD);
+    }, NUDGE_AFTER);
+    return () => clearTimeout(t);
+  }, [over, max]);
+  // a finger dragging it mid-nudge keeps it where it's taken
+  const stop = useCallback(() => clearTimeout(back.current), []);
+  useEffect(() => stop, [stop]);
+  return { ref, x, onScroll, stop };
+}
+
+const FADE_START = fadeSvg('left'), FADE_END = fadeSvg('right');
+
+/**
+ * A scrolling bar's fades, over its scroller: at its start once it's scrolled from there, and at its end (`end` along
+ * it) while there's more past it. They come and go as it's scrolled, on the native driver; touches go through them.
+ */
+function Fades({ x, end, max }: { x: Animated.Value; end: number; max: number }) {
+  const [start, more] = useMemo(() => {
+    const ramp = Math.max(1, Math.min(FADE_RAMP, max));
+    return [
+      x.interpolate({ inputRange: [0, ramp], outputRange: [0, 1], extrapolate: 'clamp' }),
+      x.interpolate({ inputRange: [max - ramp, max], outputRange: [1, 0], extrapolate: 'clamp' }),
+    ];
+  }, [x, max]);
+  return (
+    <>
+      <Animated.View testID="barFadeStart" style={[s.fade, { left: 0, opacity: start }]}><RawSvg xml={FADE_START} width={FADE} height={BTN_H} /></Animated.View>
+      <Animated.View testID="barFadeEnd" style={[s.fade, { left: end - FADE, opacity: more }]}><RawSvg xml={FADE_END} width={FADE} height={BTN_H} /></Animated.View>
+    </>
+  );
+}
+
 /**
  * A phone's bar: the buttons alone — the line saying what's selected and its sizes ("Cabinet 24" L × 34 1/2" H…") takes
  * room a phone hasn't got, and the drawing shows the sizes anyway — with no divider left at an end or doubled up.
@@ -113,23 +184,24 @@ function buttonsOnly(items: ReturnType<typeof barItems>): ReturnType<typeof barI
 
 /**
  * The bar's buttons, drawn again only when what they show changes (`k`, see buttonsKey) — not when the bar itself
- * is, as it measures whether they fit.
+ * is, as it measures whether they fit. Each says how wide it is (`onWidth`, by its place; a divider's is fixed).
  */
-const BarButtons = memo(function BarButtons({ phone }: { k: string; phone: boolean }) {
+const BarButtons = memo(function BarButtons({ phone, onWidth }: { k: string; phone: boolean; onWidth: (i: number, w: number) => void }) {
   return (
     <>
       {shown(phone).map((it, i) => {
         if (it === 'sep') return <View key={'s' + i} style={s.sep} />;
-        if ('lbl' in it) return <Text key={'l' + i} style={s.lbl}>{it.lbl}</Text>;
+        if ('lbl' in it) return <Text key={'l' + i} style={s.lbl} onLayout={e => onWidth(i, e.nativeEvent.layout.width)}>{it.lbl}</Text>;
         const fg = it.on ? C.dark : it.locked ? C.red : '#fff';
         return (
-          <Tap key={it.act + i} accessibilityRole="button" accessibilityLabel={it.label}
+          <Tap key={it.act + i} onLayout={e => onWidth(i, e.nativeEvent.layout.width)} accessibilityRole="button" accessibilityLabel={it.label}
             accessibilityState={it.on != null || it.locked != null ? { selected: !!(it.on || it.locked) } : undefined}
             onPress={e => { if (!(is3d() && run3d(it.act))) applyCtxAction(it.act, e.currentTarget); }}
-            style={st => [s.cb, it.on || (it.act === 'imgOpacity' && ui.imgPop === 'opacity') || (it.act === 'imgRotate' && ui.imgPop === 'rotate') || (it.act === 'linkSize' && ui.imgPop === 'tilesize') ? { backgroundColor: 'rgba(255,255,255,0.14)' } : null,
+            style={st => [s.cb, iconAlone(it) && s.lead, it.on || (it.act === 'imgOpacity' && ui.imgPop === 'opacity') || (it.act === 'imgRotate' && ui.imgPop === 'rotate') || (it.act === 'linkSize' && ui.imgPop === 'tilesize') ? { backgroundColor: 'rgba(255,255,255,0.14)' } : null,
               it.on ? { backgroundColor: '#fff' } : hovered(st) && { backgroundColor: 'rgba(255,255,255,0.08)' }]}>
             <Icon name={it.ic} color={fg} />
-            <Text style={[s.cbText, { color: fg }]}>{it.label}</Text>
+            {/* (the bar's lead — Lock, or Open — and Lock wherever it is: its icon alone, its name said, not shown) */}
+            {!iconAlone(it) && <Text style={[s.cbText, { color: fg }]}>{it.label}</Text>}
           </Tap>
         );
       })}
@@ -259,6 +331,12 @@ export function SpokenHint() {
 
 /** What the trash (or Annotate's +, in its place) takes at the right of a phone's bar row: its 60 pt, and the 12 between them. */
 const TRASH_ROOM = 72;
+/**
+ * The bar's measures, which its room is worked out from as well as drawn with: its height and its buttons', its padding
+ * at each end, the yellow + and the gap before it, a divider and the margin at each side of it, and the gap between
+ * its buttons.
+ */
+const BAR_H = 60, BTN_H = 54, PAD = 6, ADD = 48, ADD_GAP = 4, SEP_W = 1, SEP_M = 4, GAP = 2;
 
 const s = createSheet({
   bottom: { pointerEvents: 'box-none', position: 'absolute', bottom: 14, zIndex: 24, flexDirection: 'row', alignItems: 'center' },
@@ -266,16 +344,23 @@ const s = createSheet({
   phoneRow: { left: 12, right: 12 },
   springL: { flexGrow: 1, flexShrink: 1000 },
   springR: { flexGrow: 1, flexShrink: 0 },
-  // the same 6 all round, and corners of the buttons' radius plus 6: the end buttons sit concentric in the bar
+  // 60 tall (Figma's bars, 2528:101128 — the user's call, 2026-10-27: "60 px in height - not 66"): its 54 buttons 3 in
+  // from its top and bottom, 6 from its ends, its ends round
   // (it gives way when its buttons don't fit — React Native doesn't shrink a view unless told — and then scrolls)
-  ctx: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.g2, borderRadius: 27 + 6, minHeight: 54 + 12, padding: 6, maxWidth: '100%', flexShrink: 1, ...shadow },
-  items: { flexDirection: 'row', alignItems: 'center', gap: 2 },
-  cb: { minWidth: 58, height: 54, borderRadius: 27, alignItems: 'center', justifyContent: 'center', gap: 3, paddingHorizontal: 8 },
+  ctx: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.g2, borderRadius: BAR_H / 2, minHeight: BAR_H, paddingVertical: (BAR_H - BTN_H) / 2, paddingHorizontal: PAD, maxWidth: '100%', flexShrink: 1, ...shadow },
+  clip: { flexGrow: 0, flexShrink: 1, borderRadius: BTN_H / 2, overflow: 'hidden' },
+  scroller: { flexGrow: 0, flexShrink: 1 },
+  items: { flexDirection: 'row', alignItems: 'center', gap: GAP },
+  // a scrolling bar's fade, over an end of its scroller
+  fade: { position: 'absolute', top: 0, bottom: 0, width: FADE, pointerEvents: 'none' },
+  cb: { minWidth: 58, height: BTN_H, borderRadius: BTN_H / 2, alignItems: 'center', justifyContent: 'center', gap: 3, paddingHorizontal: 8 },
+  // the lead: a 48 round button, its icon alone
+  lead: { minWidth: 48, width: 48, height: 48, borderRadius: 24, paddingHorizontal: 0 },
   cbText: { fontFamily: FONT, fontSize: 10.5, fontWeight: '500' },
-  sep: { width: 1, height: 32, backgroundColor: C.g3, marginHorizontal: 4 },
+  sep: { width: SEP_W, height: 32, backgroundColor: C.g3, marginHorizontal: SEP_M },
   lbl: { fontFamily: FONT, fontSize: 12, color: C.lg1, paddingHorizontal: 10 },
   // the slider sits just above the bar, centred on it
-  popWrap: { position: 'absolute', left: 0, right: 0, bottom: 76, alignItems: 'center' },
+  popWrap: { position: 'absolute', left: 0, right: 0, bottom: 70, alignItems: 'center' },
   pop: { width: 400, maxWidth: '100%', flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: C.g2, borderRadius: 999, paddingHorizontal: 16, paddingVertical: 4, ...shadow },
   popLabel: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: C.lg2 },
   popValue: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: '#fff', width: 48, textAlign: 'right' },
@@ -286,8 +371,8 @@ const s = createSheet({
   popReset: { paddingRight: 4 },
   reset: { height: 36, paddingHorizontal: 16, borderRadius: 18, backgroundColor: C.g3, justifyContent: 'center' },
   resetText: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: '#fff' },
-  // (smaller than a button, so 3 in from the bar's end as well as from its top and bottom: concentric too)
-  add: { width: 48, height: 48, borderRadius: 24, backgroundColor: C.yellow, alignItems: 'center', justifyContent: 'center', marginLeft: 4, marginRight: 3 },
+  // (6 in from the bar's end, top and bottom: concentric with it)
+  add: { width: ADD, height: ADD, borderRadius: ADD / 2, backgroundColor: C.yellow, alignItems: 'center', justifyContent: 'center', marginLeft: ADD_GAP },
   // BOLDR's delete FAB (the annotation editors' DeleteFab): a 60 pt solid red circle 12 from the right and 14 from the
   // bottom, level with the bar beside it, on every screen size
   trash: {

package/src/react/Drawer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   Animated, Easing, Keyboard, PanResponder, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useWindowDimensions, View,
 } from 'react-native';
@@ -7,6 +7,7 @@ import {
 } from '../editor/project';
 import { ed } from '../app/state';
 import type { DrawerTab } from '../editor/ports';
+import { noScaleYet } from '../editor/scaleGate';
 import { page, store } from '../model/store';
 import { fmtArea, fmtLen } from '../units';
 import { Icon, RawSvg } from './Icon';
@@ -60,7 +61,7 @@ export function Drawer({ phone = false }: { phone?: boolean }) {
   const slide = useMemo(() => x.interpolate({ inputRange: [0, 1], outputRange: [0, (phone ? travel ?? height : w) + 40] }), [x, w, height, phone, travel]);
   const fade = useMemo(() => x.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }), [x]);
   // the phone's sheet: how far it's dragged down, when it opened, and how far the keyboard lifts it
-  const drag = useRef(new Animated.Value(0)).current, openedAt = useRef(0), sheet = useRef<View>(null), [lift, setLift] = useState(0);
+  const drag = useRef(new Animated.Value(0)).current, openedAt = useRef(0), sheet = useRef<ComponentRef<typeof View>>(null), [lift, setLift] = useState(0);
   const dropped = useMemo(() => Animated.add(slide, drag), [slide, drag]);
   useEffect(() => {
     if (open) { setPresent(true); openedAt.current = Date.now(); }
@@ -151,7 +152,7 @@ export function Drawer({ phone = false }: { phone?: boolean }) {
 function NameField({ value, onCommit, style, label, autoFocus, onFocus }: {
   value: string; onCommit: (v: string) => void; style?: object; label: string; autoFocus?: boolean; onFocus?: () => void;
 }) {
-  const [text, setText] = useState(value), editing = useRef(false), ref = useRef<TextInput>(null);
+  const [text, setText] = useState(value), editing = useRef(false), ref = useRef<ComponentRef<typeof TextInput>>(null);
   useEffect(() => { if (!editing.current) setText(value); }, [value]);
   useEffect(() => { if (autoFocus) setTimeout(() => ref.current?.focus(), 320); }, [autoFocus]);
   return (
@@ -215,26 +216,29 @@ function Pages({ version, thumbs }: { version: number; thumbs: boolean }) {
 }
 
 function Spaces() {
-  const sched = spaceSchedule();
+  const sched = spaceSchedule(), sketchOnly = noScaleYet();
   if (!sched.rows.length) return <Text style={s.empty}>No spaces on this page yet. Close a loop of walls or lines, or pick the Space tool and tap inside a closed shape.</Text>;
   return (
     <>
       {sched.rows.map(r => (
         <View key={r.id} style={s.roomRow}>
           <NameField label="Space name" value={r.name} onCommit={v => renameSpace(r.id, v)} autoFocus={ui.renameRoom === r.id} onFocus={() => focusSpace(r.id)} style={{ fontSize: 14 }} />
-          <View style={s.nums}>
-            <Text style={s.num}><Text style={s.numB}>{fmtArea(r.area)}</Text> floor</Text>
-            <Text style={s.num}><Text style={s.numB}>{fmtLen(r.per)}</Text> perimeter</Text>
-          </View>
+          {!sketchOnly && (
+            <View style={s.nums}>
+              <Text style={s.num}><Text style={s.numB}>{fmtArea(r.area)}</Text> floor</Text>
+              <Text style={s.num}><Text style={s.numB}>{fmtLen(r.per)}</Text> perimeter</Text>
+            </View>
+          )}
         </View>
       ))}
-      <View style={s.row}>
+      {/* (a sketch's sizes are placeholders until its first length: no areas until then) */}
+      {sketchOnly ? <Text style={s.empty}>Areas show once the drawing has a length. Select a line and tap + to enter one.</Text> : <View style={s.row}>
         <View style={{ flex: 1 }}>
           <Text style={[s.rowText, { fontWeight: '700' }]}>Total</Text>
           <Text style={s.rowSub}>Measured to inside wall faces</Text>
         </View>
         <Text style={[s.rowText, { fontWeight: '700' }]}>{fmtArea(sched.total)}</Text>
-      </View>
+      </View>}
     </>
   );
 }

package/src/react/Duck.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useSyncExternalStore, type ReactNode } from 'react';
-import { Animated, Platform, StyleSheet, type View } from 'react-native';
+import { useEffect, useRef, useSyncExternalStore, type ComponentRef, type ReactNode } from 'react';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
 
 /*
   On a phone the floating chrome — the top bar, the tabs, the rail, the bottom bar and trash, the trays — steps aside
@@ -31,7 +31,7 @@ const OUT_MS = 120, IN_MS = 200;
  */
 export function Duck({ active, held = false, children }: { active: boolean; held?: boolean; children: ReactNode }) {
   const away = useSyncExternalStore(subscribe, isMoving) && active, off = away || held;
-  const opacity = useRef(new Animated.Value(1)).current, ref = useRef<View>(null);
+  const opacity = useRef(new Animated.Value(1)).current, ref = useRef<ComponentRef<typeof View>>(null);
   useEffect(() => {
     Animated.timing(opacity, { toValue: away ? 0 : 1, duration: away ? OUT_MS : IN_MS, useNativeDriver: Platform.OS !== 'web' }).start();
   }, [away, opacity]);

package/src/react/KeypadSheet.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState, type ReactNode } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState, type ComponentRef, type ReactNode } from 'react';
 import { FlatList, ScrollView, Text, View } from 'react-native';
 import {
   hostPicksMeasurements, measurementFits, offersJobMeasurements, pickJobMeasurement, watchJobMeasurements, type MeasurementKind,
@@ -164,7 +164,7 @@ function Keys({ spec, wide, selectFromList }: { spec: NonNullable<ReturnType<typ
  * It's the host's list when it draws one (measurementList), and the editor's grid when it doesn't.
  */
 const Pager = forwardRef<PagerHandle, { kind: MeasurementKind; pick: (t: LinkTarget) => void; measurementList?: MeasurementList; children: ReactNode }>(function Pager({ kind, pick, measurementList, children }, ref) {
-  const scroll = useRef<ScrollView>(null);
+  const scroll = useRef<ComponentRef<typeof ScrollView>>(null);
   const [w, setW] = useState(0), [h, setH] = useState(0), [page, setPage] = useState(0), [listed, setListed] = useState(false);
   const show = (p: number) => { if (p) setListed(true); scroll.current?.scrollTo({ x: p * w, animated: true }); };
   useImperativeHandle(ref, () => ({ show }));

package/src/react/MarkupPanel.tsx

@@ -124,7 +124,7 @@ export function MarkupPanel({ phone }: { phone: boolean }) {
 }
 
 const s = createSheet({
-  wrap: { position: 'absolute', left: 76, top: 112, bottom: 84, zIndex: 46, alignItems: 'flex-start' },
+  wrap: { position: 'absolute', left: 76, top: 112, bottom: 78, zIndex: 46, alignItems: 'flex-start' },
   panel: { width: 264, maxHeight: '100%', backgroundColor: C.g1, borderRadius: 20, borderWidth: 1, borderColor: C.g2, ...shadow },
   body: { padding: 12, gap: 8 },
   section: { gap: 8 },

package/src/react/PlanCanvas.native.tsx

@@ -1,6 +1,6 @@
-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 { Canvas, Group, Path, Picture, RoundedRect, Skia, type SkPicture, type Transforms3d } from '@shopify/react-native-skia';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useWindowDimensions, 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';
@@ -14,6 +14,9 @@ import {
 } from '../render/view';
 import { page } from '../model/store';
 import { recordLayers, skiaImageLoader, skiaTextMeasure } from '../skia/host';
+import { LENS_ARM, LENS_R, LENS_ZOOM, lensNow, type Lens } from '../render/lens';
+import { PHONE_MAX } from './theme';
+import { TABS_TOP, topLayout } from './topRow';
 
 /*
   The plan on a device. Pan and zoom never wait for the JavaScript thread: the fingers are followed on the UI thread
@@ -29,10 +32,15 @@ import { recordLayers, skiaImageLoader, skiaTextMeasure } from '../skia/host';
   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).
+
+  While a finger or Pencil places or drags something, the lens (render/lens.ts) shows the drawing around it twice as
+  close in a top corner: the same pictures again, through its zoom, clipped to it — nothing more is drawn for it.
 */
 
 /** 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;
+/** A tablet's rail's right edge (Rail.tsx: 12 in, its buttons 44 at most and 6 in from its sides); its top row's buttons' height. */
+const RAIL_RIGHT = 12 + 44 + 2 * 6, TOP_BUTTON = 46;
 const EMPTY = Skia.Picture.MakePicture(null)!;
 
 /** What the JavaScript thread drew last, and the view it drew it at. */
@@ -50,6 +58,9 @@ 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;
 
+/** Where the lens is now (render/lens.ts), told to the UI thread: after each touch, and each frame. */
+let placeLens: (() => void) | 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).
@@ -63,6 +74,7 @@ function touchesOnJS(type: number, kind: string, ts: Packed[], view: UiView | nu
   // 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();
+  placeLens?.();
 }
 
 const kindOf = (t: PointerType): string => {
@@ -81,6 +93,14 @@ export const PlanCanvas = memo(function PlanCanvas() {
   // 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 lens, and whether it's up (mounted only then: nothing drawn twice for it otherwise)
+  const lens = useSharedValue<Lens | null>(null);
+  const [lensUp, setLensUp] = useState(false);
+  // what the chrome leaves it: a phone's all (its chrome steps aside as a finger moves: Duck); a tablet's, right of
+  // the rail and under the top row, and under the tabs where they've a row of their own
+  const { width, height } = useWindowDimensions(), phone = width < PHONE_MAX;
+  const room = useRef({ left: 0, top: 0 });
+  room.current = phone ? { left: 0, top: 0 } : { left: RAIL_RIGHT, top: (topLayout(width, height, false).below ? TABS_TOP.below : TABS_TOP.row) + TOP_BUTTON };
 
   // the last pictures, carried from the view they were drawn at to the view the fingers have reached since
   const shift = useDerivedValue<Transforms3d>(() => {
@@ -92,6 +112,19 @@ export const PlanCanvas = memo(function PlanCanvas() {
   const overlay = useDerivedValue(() => frame.value?.overlay ?? EMPTY);
   const baseFixed = useDerivedValue(() => frame.value?.baseFixed ?? EMPTY);
   const overlayFixed = useDerivedValue(() => frame.value?.overlayFixed ?? EMPTY);
+  // the lens: its square, the finger at its middle LENS_ZOOM times closer, and its cross
+  const lensClip = useDerivedValue(() => { const l = lens.value; return Skia.RRectXY(Skia.XYWHRect(l?.x ?? 0, l?.y ?? 0, l?.size ?? 0, l?.size ?? 0), LENS_R, LENS_R); });
+  const lensZoom = useDerivedValue<Transforms3d>(() => {
+    const l = lens.value;
+    return l ? [{ translateX: l.x + l.size / 2 }, { translateY: l.y + l.size / 2 }, { scale: LENS_ZOOM }, { translateX: -l.fx }, { translateY: -l.fy }] : [];
+  });
+  const lensCross = useDerivedValue(() => {
+    const l = lens.value, b = Skia.PathBuilder.Make();
+    if (l) { b.moveTo(l.cx - LENS_ARM, l.cy); b.lineTo(l.cx + LENS_ARM, l.cy); b.moveTo(l.cx, l.cy - LENS_ARM); b.lineTo(l.cx, l.cy + LENS_ARM); }
+    return b.build();
+  });
+  const lensX = useDerivedValue(() => lens.value?.x ?? 0), lensY = useDerivedValue(() => lens.value?.y ?? 0);
+  const lensSize = useDerivedValue(() => lens.value?.size ?? 0), lensInk = useDerivedValue(() => lens.value?.ink ?? '#000');
 
   useEffect(() => {
     setImageLoader(skiaImageLoader);
@@ -104,7 +137,12 @@ export const PlanCanvas = memo(function PlanCanvas() {
      * 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;
+    let wasReadOnly: boolean | null = null, lensShown = false;
+    placeLens = () => {
+      const l = lensNow(cvs.W, cvs.H, room.current);
+      if (l || lensShown) lens.value = l;
+      if (!!l !== lensShown) { lensShown = !!l; setLensUp(lensShown); }
+    };
     setFrameRenderer(() => {
       const { W, H } = cvs;
       if (!W || !H) return;
@@ -133,9 +171,10 @@ export const PlanCanvas = memo(function PlanCanvas() {
         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,
       };
+      placeLens?.();
     });
-    return () => { setFrameRenderer(null); setImageLoader(null); setTextMeasure(null); setHostNavigation(false); };
-  }, [frame, readOnly]);
+    return () => { setFrameRenderer(null); setImageLoader(null); setTextMeasure(null); setHostNavigation(false); placeLens = null; };
+  }, [frame, readOnly, lens]);
 
   const onLayout = (e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
@@ -193,6 +232,21 @@ export const PlanCanvas = memo(function PlanCanvas() {
           </Group>
           <Picture picture={baseFixed} />
           <Picture picture={overlayFixed} />
+          {lensUp && (
+            <Group>
+              <Group clip={lensClip}>
+                <Group transform={lensZoom}>
+                  <Group transform={shift}>
+                    <Picture picture={under} />
+                    <Picture picture={base} />
+                    <Picture picture={overlay} />
+                  </Group>
+                </Group>
+                <Path path={lensCross} color={lensInk} style="stroke" strokeWidth={1.5} />
+              </Group>
+              <RoundedRect x={lensX} y={lensY} width={lensSize} height={lensSize} r={LENS_R} color={lensInk} style="stroke" strokeWidth={2} />
+            </Group>
+          )}
         </Canvas>
       </View>
     </GestureDetector>

package/src/react/Popovers.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ComponentRef, type ReactNode } from 'react';
 import { Animated, Text, TextInput, View, type ViewStyle } from 'react-native';
 import { disarmReset, exportDxf, exportPdf, importPagesText, openProjectText, resetArmed, resetToDemo, saveProjectFile } from '../editor/files';
 import {
@@ -28,14 +28,24 @@ function MenuLink({ label, onPress, danger }: { label: string; onPress: () => vo
   );
 }
 
-function Seg<T extends string | number>({ value, opts, onPick }: { value: T; opts: [T, string][]; onPick: (v: T) => void }) {
-  return <Segmented value={value} options={opts} onPick={onPick} style={s.seg} optionStyle={s.segBtn} textStyle={s.segText} onText={C.dark} offText={C.lg1} />;
+/** A setting's choices; `fill`: across the whole width it's given (MStack), each choice growing into the room. */
+function Seg<T extends string | number>({ value, opts, onPick, fill = false }: { value: T; opts: [T, string][]; onPick: (v: T) => void; fill?: boolean }) {
+  return <Segmented value={value} options={opts} onPick={onPick} style={fill ? [s.seg, s.segFill] : s.seg} optionStyle={fill ? [s.segBtn, s.segBtnFill] : 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>
 );
 
+/**
+ * A setting whose choices need the menu's whole width, its label above them. Units has up to seven (six, and the
+ * host's Account): beside its label they ran off the menu's edge, and the last of them (m) couldn't be picked at all.
+ */
+const MStack = ({ label, children }: { label: string; children: ReactNode }) => (
+  <View style={s.mstack}><Text style={s.rowText}>{label}</Text>{children}</View>
+);
+
 /**
  * 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.
@@ -63,7 +73,7 @@ export function Menu({ accountUnits = false, devTools = true, themeChoice = true
 
 /** ••• : the exports, opening a file, and the settings. */
 function MoreMenu({ open, style, accountUnits, devTools, themeChoice, pickText, readOnly, phone }: {
-  open: boolean; style: Animated.WithAnimatedObject<ViewStyle>;
+  open: boolean; style: Animated.WithAnimatedValue<ViewStyle>;
   accountUnits: boolean; devTools: boolean; themeChoice: boolean; pickText: () => Promise<string | null>; readOnly: boolean; phone: boolean;
 }) {
   const run = (fn: () => void) => () => { closeMenu(); fn(); };
@@ -87,13 +97,13 @@ function MoreMenu({ open, style, accountUnits, devTools, themeChoice, pickText,
             <View style={s.hr} />
           </>
         )}
-        <MRow label="Units">
-          <Seg<UnitChoice>
+        <MStack label="Units">
+          <Seg<UnitChoice> fill
             value={accountUnits && followingHostUnits() ? 'account' : settings.unit}
             opts={[...(accountUnits ? [['account', 'Account'] as [UnitChoice, string]] : []), ['ftin', 'ft-in'], ['in', 'in'], ['ft', 'ft'], ['mm', 'mm'], ['cm', 'cm'], ['m', 'm']]}
             onPick={setUnits}
           />
-        </MRow>
+        </MStack>
         {!(accountUnits && followingHostUnits()) && showFractions() && (
           <MRow label="Precision"><Seg value={settings.denom} opts={[[16, '1/16"'], [8, '1/8"'], [4, '1/4"']]} onPick={setPrecision} /></MRow>
         )}
@@ -139,7 +149,7 @@ function LayerRow({ label, sub, value, onChange }: { label: string; sub?: string
 
 /** 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> }) {
+function LayersMenu({ open, style }: { open: boolean; style: Animated.WithAnimatedValue<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}>
@@ -157,7 +167,7 @@ function LayersMenu({ open, style }: { open: boolean; style: Animated.WithAnimat
 /** 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);
+  const n = ui.note, [text, setText] = useState(''), ref = useRef<ComponentRef<typeof TextInput>>(null), done = useRef(false);
   useEffect(() => { setText(n?.initial ?? ''); done.current = false; if (n) setTimeout(() => ref.current?.focus(), 30); }, [n]);
   if (!n) return null;
   const finish = (commit: boolean) => {
@@ -181,11 +191,16 @@ const s = createSheet({
   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 },
+  mstack: { paddingVertical: 8, paddingHorizontal: 16, gap: 8 },
   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: 999, padding: 3 },
   segBtn: { paddingVertical: 5, paddingHorizontal: 10, borderRadius: 999 },
+  // (the track a column, so its row of choices runs the track's whole width; each choice grows into the room there, and
+  // shrinks rather than running off the menu when the text is set large — its label then cut short, never wrapped)
+  segFill: { flexDirection: 'column' },
+  segBtnFill: { flexGrow: 1, flexShrink: 1, minWidth: 0, paddingHorizontal: 6 },
   segText: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: C.lg1 },
   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 },
 });

package/src/react/Rail.tsx

@@ -299,7 +299,7 @@ export function Rail({ phone, onAddImage }: { phone: boolean; onAddImage?: () =>
   };
   return (
     // (on a phone the bar runs under it, so it stops above; elsewhere the bar is centred and the rail runs to the bottom)
-    <View style={[s.rail, phone && { top: 162, bottom: 84 }]} onLayout={e => {
+    <View style={[s.rail, phone && { top: 162, bottom: 78 }]} onLayout={e => {
       const { height: h, y: top } = e.nativeEvent.layout, w = Dimensions.get('window');
       setRoom({ height: h, y: top, winW: w.width, winH: w.height });
     }}>

package/src/react/Sheet.tsx

@@ -19,7 +19,7 @@ const GHOST_MS = 450;
 const SHEET_IN = 200, SHEET_OUT = 160, SHEET_EASE_OUT = Easing.bezier(0.4, 0, 1, 1);
 /** how far it rises on a phone, and a card on a wide screen (as a popup does) */
 const RISE_BY = 80, CARD_RISE = 8;
-export function useSheetMotion(shown: boolean, wide: boolean): { present: boolean; motion: Animated.WithAnimatedObject<Pick<ViewStyle, 'transform' | 'opacity'>> } {
+export function useSheetMotion(shown: boolean, wide: boolean): { present: boolean; motion: Animated.WithAnimatedValue<Pick<ViewStyle, 'transform' | 'opacity'>> } {
   const x = useRef(new Animated.Value(1)).current, [present, setPresent] = useState(shown);
   const motion = useMemo(() => {
     const opacity = x.interpolate({ inputRange: [0, 1], outputRange: [1, 0] });
@@ -29,7 +29,7 @@ export function useSheetMotion(shown: boolean, wide: boolean): { present: boolea
         opacity, transformOrigin: 'bottom right',
         transform: [{ translateY: x.interpolate({ inputRange: [0, 1], outputRange: [0, CARD_RISE] }) }, { scale: x.interpolate({ inputRange: [0, 1], outputRange: [1, 0.96] }) }],
       }
-      : { opacity, transform: [{ translateY: x.interpolate({ inputRange: [0, 1], outputRange: [0, RISE_BY] }) }] }) as Animated.WithAnimatedObject<Pick<ViewStyle, 'transform' | 'opacity'>>;
+      : { opacity, transform: [{ translateY: x.interpolate({ inputRange: [0, 1], outputRange: [0, RISE_BY] }) }] }) as Animated.WithAnimatedValue<Pick<ViewStyle, 'transform' | 'opacity'>>;
   }, [wide, x]);
   useEffect(() => {
     if (shown) setPresent(true);
@@ -59,7 +59,7 @@ export function Backdrop({ wide, onClose }: { wide: boolean; onClose: () => void
  */
 export function Sheet({ wide, children, label, testID, motion, live = true }: {
   wide: boolean; children: ReactNode; label: string; testID?: string;
-  motion?: Animated.WithAnimatedObject<Pick<ViewStyle, 'transform' | 'opacity'>>; live?: boolean;
+  motion?: Animated.WithAnimatedValue<Pick<ViewStyle, 'transform' | 'opacity'>>; live?: boolean;
 }) {
   return (
     <Animated.View accessibilityLabel={label} testID={testID} pointerEvents={live ? 'auto' : 'none'} style={[s.sheet, wide ? s.card : s.bottom, motion]}>