@reekon-tools/boldr-cad 1.4.0 → 1.6.0

package/src/react/BottomBar.tsx

@@ -1,11 +1,9 @@
-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 { addLinks, LINK_PLUS_LABEL, linkPlusVisible, linkSizeVisible, pageLinkSize, setLinkSize, SIZE_STEPS, sizeToStep, stepToSize } from '../editor/linkActions';
+import { applyCtxAction, barItems, deleteSelection, iconAlone, plusAction, plusLabel, plusVisible } from '../editor/actions';
+import { addLinks, LINK_PLUS_LABEL, linkPlusVisible, linkSizeVisible, openLinkTarget, opensWithChoice, pageLinkSize, pageTilePct, pctToStep, selectedOpenTarget, setTilePct, SIZE_STEPS, stepToPct } from '../editor/linkActions';
 import { afterEdit } from '../app/edit';
-import { LINK_SIDE_IN } from '../model/links';
-import { fmtLen } from '../units';
 import { bar3d, run3d } from '../editor/view3d';
 import { is3d } from '../editor/view3dState';
 import { OPACITY_MIN, OPACITY_STEP, ROTATE_MAX, ROTATE_STEP, setUnderlayOpacity, setUnderlayRotation } from '../editor/project';
@@ -15,48 +13,65 @@ 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 />
+          <OpenPopover />
           {/* a phone's bar sits between two springs that start as wide as the trash takes and share what's left
               equally, so it's centred; only the left one gives way (first, before the bar), so a long bar slides left
               to clear the trash. (A minimum width on the right one alone did that in a browser, but a device's layout
               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 +111,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 +183,30 @@ 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,
+            onPress={e => {
+              if (is3d() && run3d(it.act)) return;
+              // (Open asks how — here, or beside the drawing — where the host can show it there and no pane's open yet)
+              const t = isOpen(it.act) ? selectedOpenTarget() : null;
+              if (t && opensWithChoice(t)) { ui.imgPop = ui.imgPop === 'open' ? null : 'open'; notify(); return; }
+              applyCtxAction(it.act, e.currentTarget);
+            }}
+            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') || (isOpen(it.act) && ui.imgPop === 'open') ? { 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>
         );
       })}
@@ -137,6 +214,41 @@ const BarButtons = memo(function BarButtons({ phone }: { k: string; phone: boole
   );
 });
 
+/** The bar's Open: a tile's or expanded photo's, or a linked dimension's. */
+const isOpen = (act: string): boolean => act === 'linkOpen' || act === 'dimLinkOpen';
+
+/**
+ * Open's question, just above the bar (the user's call, 2026-10-30): Open, the host's own way as before, or Open side
+ * by side, in a pane beside the drawing. Asked only where the host can show it there and no pane is open yet
+ * (opensWithChoice); a press on the drawing closes it, as it does the bar's sliders.
+ */
+function OpenPopover() {
+  const t = ui.imgPop === 'open' ? selectedOpenTarget() : null, open = !!t && opensWithChoice(t);
+  const pop = usePopup(open, { y: 8 }, 'bottom center');
+  if (!pop.present) return null;
+  const go = (how: 'here' | 'beside') => {
+    const target = selectedOpenTarget();
+    ui.imgPop = null;
+    notify();
+    if (target) openLinkTarget(target, how);
+  };
+  return (
+    <View style={s.popWrap} pointerEvents="box-none">
+      <Animated.View style={[s.pop, s.choices, pop.style]} pointerEvents={open ? 'auto' : 'none'} testID={open ? 'openPop' : undefined}>
+        <Tap feel="dim" accessibilityRole="button" accessibilityLabel="Open" testID="openHere" onPress={() => go('here')}
+          style={st => [s.choice, hovered(st) && s.choiceHover]}>
+          <Text style={s.choiceText}>Open</Text>
+        </Tap>
+        <View style={s.sep} />
+        <Tap feel="dim" accessibilityRole="button" accessibilityLabel="Open side by side" testID="openBeside" onPress={() => go('beside')}
+          style={st => [s.choice, hovered(st) && s.choiceHover]}>
+          <Text style={s.choiceText}>Open side by side</Text>
+        </Tap>
+      </Animated.View>
+    </View>
+  );
+}
+
 /** Degrees, as the rotation slider shows them: whole, or to the half degree. */
 const fmtDeg = (v: number): string => (Math.round(v * 2) / 2).toString().replace('-', '−') + '°';
 
@@ -198,36 +310,32 @@ function ImagePopover() {
   );
 }
 
-/** A tile size from the slider, as it's kept: to the quarter inch. */
-const tileSize = (step: number): number => Math.round(stepToSize(step) * 4) / 4;
-
 /**
  * The tiles' size, just above the bar (Size in it opens and closes it): one size for every tile on the page, on the drawing
- * (they zoom with the plan and print at it). Kept quick on a device, as ImagePopover is: the thumb and the number follow
- * the finger from here, the tiles are sized at most once a frame, and the rest of the editor hears of it as it's let go.
+ * (they zoom with the plan and print at it), said in percent of the size they came in at — never feet or metres (the
+ * user's call, 2026-11-03: see editor/linkActions.ts). Kept quick on a device, as ImagePopover is: the thumb and the
+ * number follow the finger from here, the tiles are sized at most once a frame, and the rest of the editor hears of it
+ * as it's let go.
  */
 function LinkSizePopover() {
   const [live, setLive] = useState<number | null>(null);
-  // the number's width as it was laid out, held while a drag goes on (the track ends at it: as long as the number is,
-  // no longer — but never narrower mid-drag, which would move the track under the finger)
-  const [numW, setNumW] = useState(0);
   const pending = useRef<{ v: number; frame: number } | null>(null);
   // (opened from the bar's Size, as an image's sliders are; a press on the drawing closes it)
-  const size = ui.imgPop === 'tilesize' && linkSizeVisible() ? pageLinkSize() : null, open = size != null;
+  const pct = ui.imgPop === 'tilesize' && linkSizeVisible() ? pageTilePct() : null, open = pct != null;
   // (as it goes it keeps showing the size it had)
-  const last = useRef(size ?? LINK_SIDE_IN), pop = usePopup(open, { y: 8 }, 'bottom center');
-  if (size != null) last.current = size;
+  const last = useRef(pct ?? 100), pop = usePopup(open, { y: 8 }, 'bottom center');
+  if (pct != null) last.current = pct;
   if (!pop.present) return null;
-  const value = live ?? sizeToStep(last.current);
+  const value = live ?? pctToStep(last.current);
   const change = (v: number) => {
     setLive(v);
     const p = pending.current;
     if (p) { p.v = v; return; }
-    pending.current = { v, frame: requestAnimationFrame(() => { const q = pending.current; pending.current = null; if (q) setLinkSize(tileSize(q.v)); }) };
+    pending.current = { v, frame: requestAnimationFrame(() => { const q = pending.current; pending.current = null; if (q) setTilePct(stepToPct(q.v)); }) };
   };
   const end = () => {
     const p = pending.current;
-    if (p) { cancelAnimationFrame(p.frame); pending.current = null; setLinkSize(tileSize(p.v)); }
+    if (p) { cancelAnimationFrame(p.frame); pending.current = null; setTilePct(stepToPct(p.v)); }
     setLive(null);
     afterEdit();
     notify();
@@ -237,11 +345,11 @@ function LinkSizePopover() {
       <Animated.View style={[s.pop, pop.style]} pointerEvents={open ? 'auto' : 'none'} testID={open ? 'tileSizePop' : undefined}>
         <Text style={s.popLabel}>Tile size</Text>
         <View style={{ flex: 1 }}>
-          <Slider label="Tile size" testID="tileSizeSlider" value={value} min={0} max={SIZE_STEPS} step={1} format={v => fmtLen(tileSize(v))}
+          <Slider label="Tile size" testID="tileSizeSlider" value={value} min={0} max={SIZE_STEPS} step={1} format={v => stepToPct(v) + '%'}
             onStart={pushHistory} onChange={change} onEnd={end} />
         </View>
-        <Text onLayout={e => { if (live == null) setNumW(e.nativeEvent.layout.width); }}
-          style={[s.popValue, s.sizeValue, live != null && numW ? { minWidth: numW } : null]}>{fmtLen(live != null ? tileSize(live) : last.current)}</Text>
+        {/* (a fixed width, as the image sliders' numbers: the track stays one length whatever the number — "70%" or "1000%" — the user's call, 2026-11-03) */}
+        <Text style={s.popValue}>{(live != null ? stepToPct(live) : last.current) + '%'}</Text>
       </Animated.View>
     </View>
   );
@@ -259,6 +367,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,28 +380,39 @@ 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' },
-  // (a length: as long as it is, the track running up to it)
-  sizeValue: { width: 'auto', minWidth: 0 },
   // back to upright: a pill at the end of the rotation slider, concentric with it — the same 4 above, below and beside
   // it, and the slider's radius (22, half its 44) less that 4 for its own
   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 },
+  // Open's question: its two answers as the bar's own buttons are (white on the bar's grey, a divider between),
+  // concentric with it (4 in all round)
+  choices: { width: 'auto', paddingHorizontal: 4, gap: 2 },
+  choice: { height: 40, paddingHorizontal: 16, borderRadius: 20, justifyContent: 'center' },
+  choiceHover: { backgroundColor: 'rgba(255,255,255,0.08)' },
+  choiceText: { fontFamily: FONT, fontSize: 14, fontWeight: '600', color: '#fff' },
+  // (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/CadEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useColorScheme, useWindowDimensions, View } from 'react-native';
 import { analyze } from '../app/edit';
 import { ed } from '../app/state';
@@ -19,7 +19,6 @@ import { confirmCancel, confirmOpen } from '../editor/confirm';
 import { Drawer } from './Drawer';
 import { Duck } from './Duck';
 import { elevOpen } from '../editor/elevation';
-import { LaserTray } from './LaserTray';
 import { MarkupPanel } from './MarkupPanel';
 import { Menu, NoteInput } from './Popovers';
 import { KeypadSheet } from './KeypadSheet';
@@ -29,7 +28,7 @@ import { Empty3D } from './Empty3D';
 import { is3d } from '../editor/view3dState';
 import { reactPorts, setFileSaver } from './ports';
 import { editorHost } from './host';
-import { checkChanges, startManualSave, stopManualSave, type CadSaveState } from './saving';
+import { announceSaveState, checkChanges, startManualSave, stopManualSave, type CadSaveState } from './saving';
 import { PAGE_LOCK_ROOT, usePageLock } from './pageLock';
 import { setSkiaFonts } from '../skia/fonts';
 import type { SkiaFonts } from '../skia/SkiaDrawCtx';
@@ -47,6 +46,7 @@ import { setLinksHost, type CadLinks } from '../editor/links';
 import { ShapeMenu } from './ShapeMenu';
 import { PHONE_MAX } from './theme';
 import { createSheet } from './corners';
+import { EditorBoxContext, type EditorBox } from './editorBox';
 
 export interface CadEditorProps {
   /** Back to the host (otherwise the back button opens the project's pages) */
@@ -154,6 +154,8 @@ export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser,
     clearTimeout(closing.current);
     setPorts(reactPorts);
     editorHost.open = true;
+    // saving manually: the state it opens in, now it's mounted (not as it rendered: see startManualSave)
+    announceSaveState();
     return () => {
       // saving as they draw: the last edits and the preview go now. Saving manually: unsaved edits are dropped.
       if (!manualSave) {
@@ -172,17 +174,21 @@ export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser,
   // the canvases read their colors when they draw: set them before this render's children draw
   setCanvasTheme(theme);
   useEffect(() => { requestDraw(); }, [theme]);
-  const { width } = useWindowDimensions(), phone = width < PHONE_MAX, wide = width >= 900;
+  // the chrome is laid out in the editor's own area, not the window: the host can put it in a pane (editorBox.ts)
+  const win = useWindowDimensions(), [laid, setLaid] = useState<EditorBox | null>(null);
+  const box = useMemo(() => laid ?? { width: win.width, height: win.height }, [laid, win.width, win.height]);
+  const phone = box.width < PHONE_MAX, wide = box.width >= 900;
   // (asked about once the drawing's loaded: what it links to)
   useEffect(() => {
     setLinksHost(links ?? null);
     return () => setLinksHost(null);
   }, [links]);
-  // (a phone asks with the host's keypad, when it has one)
+  // (a phone asks with the host's keypad, when it has one: the device is a phone, whatever the editor's area)
+  const phoneDevice = win.width < PHONE_MAX;
   useEffect(() => {
-    setHostKeypad(phone && keypad ? keypad : null);
+    setHostKeypad(phoneDevice && keypad ? keypad : null);
     return () => setHostKeypad(null);
-  }, [phone, keypad]);
+  }, [phoneDevice, keypad]);
   // (a modeless keypad leaves the drawing live: no backdrop. On a tablet or a computer the drawing stays in reach
   // around a sheet too — it pans and zooms, and a tap on it (or the chrome over it) closes the sheet: see
   // editor/gestures.ts sheetUp. A phone's sheet covers most of it: there a backdrop closes it.)
@@ -198,7 +204,11 @@ export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser,
     return () => clearTimeout(t);
   }, [threeD, kept3d]);
   return (
-    <View nativeID={PAGE_LOCK_ROOT} style={[s.root, { backgroundColor: CANVAS_THEMES[theme].bg }]}>
+    <EditorBoxContext.Provider value={box}>
+    <View nativeID={PAGE_LOCK_ROOT} style={[s.root, { backgroundColor: CANVAS_THEMES[theme].bg }]} onLayout={e => {
+      const { width, height } = e.nativeEvent.layout;
+      setLaid(b => (b && Math.abs(b.width - width) < 0.5 && Math.abs(b.height - height) < 0.5 ? b : { width, height }));
+    }}>
       <PlanCanvas />
       {/* the 3D tab: over the plan, which stays as it was underneath */}
       {(threeD || kept3d) && <View3D theme={theme} active={threeD} />}
@@ -212,7 +222,6 @@ export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser,
         {/* (none in 3D: it's a view, its camera moved with the fingers) */}
         {!readOnly && !threeD && <Rail phone={phone} onAddImage={() => { pickImage().then(img => { if (img) placeUnderlay(img.dataUrl, img.w, img.h); }); }} />}
         {!readOnly && <BottomBar phone={phone} />}
-        {!threeD && <LaserTray phone={phone} />}
         {!threeD && <MarkupPanel phone={phone} />}
       </Duck>
       {!readOnly && !elevOpen() && !threeD && <ShapeMenu />}
@@ -226,6 +235,7 @@ export function CadEditor({ onBack, headerRight, pickImage = pickImageInBrowser,
       <ConflictSheet wide={wide} open={!!ui.conflict && !ui.keypad} />
       <ConfirmSheet wide={wide} />
     </View>
+    </EditorBoxContext.Provider>
   );
 }
 

package/src/react/Drawer.tsx

@@ -1,12 +1,13 @@
-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,
+  Animated, Easing, Keyboard, PanResponder, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View,
 } from 'react-native';
 import {
   addPage, deletePage, deletePending, duplicatePage, focusSpace, renamePage, renameSpace, spaceSchedule, switchPage,
 } 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';
@@ -17,6 +18,7 @@ import { C, FONT } from './theme';
 import { EASE, Segmented, Tap } from './motion';
 import { NATIVE } from './easing';
 import { createSheet } from './corners';
+import { useEditorBox } from './editorBox';
 
 /**
  * The Pages frame's sizes, scaled to the panel: Figma draws it 515 wide, the panel's content is about 370 (K). Its
@@ -43,7 +45,7 @@ const CLOSE_DRAG = 80, CLOSE_FLICK = 0.5;
  * down or a tap outside). Either way it slides back out when closed.
  */
 export function Drawer({ phone = false }: { phone?: boolean }) {
-  const version = useEditorVersion(), { width, height } = useWindowDimensions(), w = Math.min(400, width);
+  const version = useEditorVersion(), { width, height } = useEditorBox(), w = Math.min(400, width);
   const open = !!ui.drawer;
   // what it showed last stays while it slides away
   const last = useRef<DrawerTab>('pages');
@@ -60,7 +62,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 +153,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 +217,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 },