@reekon-tools/boldr-cad 1.4.0 → 1.6.0

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/PlanCanvas.web.tsx

@@ -2,8 +2,8 @@ import { useEffect, useRef } from 'react';
 import { pointerCancel, pointerDown, pointerLeave, pointerMove, pointerUp, wheelZoom, type PointerIn } from '../editor/gestures';
 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 { cvs, fitView, initCanvas, resize, setFrameRenderer } from '../render/view';
+import { BESIDE, PAGE_LOCK_ROOT } from './pageLock';
 import { setCursorTarget } from './ports';
 
 /*
@@ -14,14 +14,19 @@ import { setCursorTarget } from './ports';
 
 const keyIn = (e: KeyboardEvent): KeyIn => ({ key: e.key, shift: e.shiftKey, mod: e.metaKey || e.ctrlKey, alt: e.altKey });
 
+/** The host's pane beside the editor that the last press on the page was in (BESIDE), if it was in one. */
+let pressedBeside: Element | null = null;
+
 /**
  * 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.
+ * would otherwise delete what's selected on the drawing. With nothing focused it's the editor's unless the last press
+ * was in a pane beside it (a split view) that's still open: a click on its page, where nothing takes focus, leaves the
+ * focus on the page itself.
  */
 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 || t === document.body || t === document.documentElement) return !pressedBeside?.isConnected;
   if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable) return false;
   return !!t.closest('#' + PAGE_LOCK_ROOT);
 }
@@ -36,7 +41,9 @@ export function PlanCanvas() {
     let first = true;
     const ro = new ResizeObserver(() => {
       resize();
-      if (first && (!page().view || page()._fit !== false)) fitView();
+      // fitted once, at its first real size (not while a pane opening round it is still a sliver)
+      if (!first || cvs.W < 40 || cvs.H < 40) return;
+      if (!page().view || page()._fit !== false) fitView();
       first = false;
     });
     ro.observe(cv);
@@ -60,6 +67,11 @@ export function PlanCanvas() {
       // shift+wheel arrives as deltaX on some systems
       wheelZoom(e.clientX - r.left, e.clientY - r.top, e.deltaY || e.deltaX, e.ctrlKey || e.metaKey, e.deltaMode !== 0);
     }, { passive: false, signal: ac.signal });
+    // (whether the last press was in a pane beside the editor, for keys pressed with nothing focused: see forEditor)
+    pressedBeside = null;
+    document.addEventListener('pointerdown', e => {
+      pressedBeside = e.target instanceof Element ? e.target.closest(`[${BESIDE}]`) : null;
+    }, { capture: true, signal: ac.signal });
     // 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 => {

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/ShapeMenu.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { Animated, Text, useWindowDimensions, View } from 'react-native';
+import { Animated, Text, View } from 'react-native';
 import { ed } from '../app/state';
 import { railIcon, TOOL_GROUPS, toolLabel } from '../editor/mode';
 import { toolTip } from '../editor/tooltips';
@@ -9,6 +9,7 @@ import { notify, ui, useEditorKey } from './store';
 import { C, FONT, shadow } from './theme';
 import { Tap, usePopup } from './motion';
 import { createSheet } from './corners';
+import { useEditorBox } from './editorBox';
 
 const ROW = 44, GAP = 6, PAD = 8;
 /** A menu's height for `n` rows: the rows, the gaps between them, its padding and border. */
@@ -22,7 +23,7 @@ const heightFor = (n: number) => n * ROW + (n - 1) * GAP + 2 * PAD + 2;
  */
 export function ShapeMenu() {
   useEditorKey(() => (ui.shapeMenu ? [ui.shapeMenu.x, ui.shapeMenu.y, ui.shapeMenu.group, ed.mode, ed.tool].join('|') : ''));
-  const { height } = useWindowDimensions(), now = ui.shapeMenu, nowGroup = now ? TOOL_GROUPS[now.group] : null;
+  const { height } = useEditorBox(), now = ui.shapeMenu, nowGroup = now ? TOOL_GROUPS[now.group] : null;
   const open = !!now && !!nowGroup && ed.mode === nowGroup.mode;
   // (it grows out of the rail's place, sideways; as it goes it keeps what it showed)
   const last = useRef(now), pop = usePopup(open, { x: -8 }, 'left center');

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]}>

package/src/react/ToolTip.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Animated, useWindowDimensions, View } from 'react-native';
+import { Animated, View } from 'react-native';
 import { TIP_TOP, topLayout } from './topRow';
 import { RichText } from './RichText';
 import { ui, useEditorKey } from './store';
@@ -7,6 +7,7 @@ import { C, FONT, shadow } from './theme';
 import { TOGGLE_EASE } from './motion';
 import { NATIVE } from './easing';
 import { createSheet } from './corners';
+import { useEditorBox } from './editorBox';
 
 /** How long the note stays, and how it comes and goes. */
 const SHOW_MS = 2600, IN_MS = 160, OUT_MS = 240;
@@ -16,7 +17,7 @@ const SHOW_MS = 2600, IN_MS = 160, OUT_MS = 240;
  * moment and goes by itself; picking another tool replaces it at once.
  */
 export function ToolTip({ phone }: { phone: boolean }) {
-  const { width, height } = useWindowDimensions();
+  const { width, height } = useEditorBox();
   useEditorKey(() => String(ui.toolTip?.seq ?? '') + '|' + topLayout(width, height, phone).below);
   const tip = ui.toolTip, v = useRef(new Animated.Value(0)).current, [shown, setShown] = useState<{ text: string; seq: number } | null>(null);
   const slide = useRef(v.interpolate({ inputRange: [0, 1], outputRange: [-4, 0] })).current;

package/src/react/TopBar.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Text, useWindowDimensions, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { closeElevation, elev, elevOpen, elevTitle, flipElevation } from '../editor/elevation';
 import { setMode } from '../editor/mode';
 import { openDrawer } from '../editor/ports';
@@ -17,6 +17,7 @@ import { C, FONT, shadow } from './theme';
 import { Segmented, Tap } from './motion';
 import { createSheet } from './corners';
 import { setTopRoom, TABS_TOP, topKey, topLayout } from './topRow';
+import { useEditorBox } from './editorBox';
 
 /**
  * The top bar: back, the project and page, view controls, the host's own buttons, settings, and Save. In the wall
@@ -25,7 +26,7 @@ import { setTopRoom, TABS_TOP, topKey, topLayout } from './topRow';
 export function TopBar({ onBack, headerRight, phone, readOnly }: {
   onBack?: () => void; headerRight?: ReactNode | ((buttonSize: number) => ReactNode); phone: boolean; readOnly?: boolean;
 }) {
-  const { width, height } = useWindowDimensions(), size = phone ? 42 : 46;
+  const { width, height } = useEditorBox(), size = phone ? 42 : 46;
   useEditorKey(() => {
     const w = elevOpen() && !!elev.frame, title = w ? elevTitle() : null;
     return [w, title?.title, title?.sub, store.project.name, page().name, ui.menu, saveState(), manualSave(), is3d(), topKey(topLayout(width, height, phone, size))].join('|');
@@ -95,7 +96,7 @@ const TABS: [Mode | '3d', string][] = [['annotate', 'Annotate'], ['draft', 'Draf
 
 /** Annotate / Draft / 3D: centred in the top row, or on a row of their own under it (see topRow.ts). */
 export function ModeTabs({ phone }: { phone: boolean }) {
-  const { width, height } = useWindowDimensions();
+  const { width, height } = useEditorBox();
   useEditorKey(() => (is3d() ? '3d' : ed.mode) + '|' + topKey(topLayout(width, height, phone)));
   const at = topLayout(width, height, phone);
   // (straight over: no line under the tabs saying how to get about in 3D)

package/src/react/barScroll.ts

@@ -0,0 +1,57 @@
+import { C } from './theme';
+
+/*
+  A bottom bar too long for the screen scrolls, and has to look like it does (the user's call, 2026-10-27: "on mobile
+  it is hard to tell that the bottom bar is scrollable"). Three things say so, in react/BottomBar.tsx:
+  - a fade at each end that has more of the bar past it, there as it's scrolled;
+  - its end always cuts through a button, never at a gap: there, what shows looks like all there is (barCut);
+  - the first bar of a session that doesn't fit slides a little way along and back, unless Reduce Motion is on.
+*/
+
+/** A button's place along the bar's buttons: from their start, and its width. */
+export type Span = readonly [x: number, w: number];
+
+/** How much of a button the end leaves showing: what it's cut to, and the shares that already read as cut. */
+export const CUT = 0.6, CUT_MIN = 0.3, CUT_MAX = 0.8;
+/** A fade's width; how far the bar scrolls as one comes or goes. */
+export const FADE = 20, FADE_RAMP = 24;
+/** The nudge: how far along, how long after the bar shows, and how long before it goes back (ms). */
+export const NUDGE = 40, NUDGE_AFTER = 400, NUDGE_HOLD = 450;
+
+/**
+ * The buttons' places along the bar, from the widths of everything in it in order (a divider's too) and the gap
+ * between each: null while any is still unmeasured.
+ */
+export function barSpans(items: readonly { w: number | undefined; button: boolean }[], gap: number): Span[] | null {
+  const out: Span[] = [];
+  let x = 0;
+  for (const { w, button } of items) {
+    if (w == null) return null;
+    if (button) out.push([x, w]);
+    x += w + gap;
+  }
+  return out;
+}
+
+/**
+ * How much of a scrolling bar shows, given `room` for it: all of that, if it already ends partway through a button
+ * (between CUT_MIN and CUT_MAX of it showing); otherwise less, ending at CUT of the last button that leaves showing.
+ */
+export function barCut(spans: readonly Span[], room: number): number {
+  let best = 0;
+  for (const [x, w] of spans) {
+    const f = (room - x) / w;
+    if (f >= CUT_MIN && f <= CUT_MAX) return room;
+    const c = x + CUT * w;
+    if (c <= room && c > best) best = c;
+  }
+  return best || room;
+}
+
+/** A fade, as an SVG: the bar's grey, clear at one side, whole at the other (`to`: the side that's whole). */
+export const fadeSvg = (to: 'left' | 'right'): string => {
+  const id = 'barFade' + (to === 'left' ? 'L' : 'R'), [a, b] = to === 'right' ? [0, 1] : [1, 0];
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${FADE}" height="54" viewBox="0 0 1 1" preserveAspectRatio="none">` +
+    `<defs><linearGradient id="${id}" x1="${a}" y1="0" x2="${b}" y2="0"><stop offset="0" stop-color="${C.g2}" stop-opacity="0"/>` +
+    `<stop offset="1" stop-color="${C.g2}" stop-opacity="1"/></linearGradient></defs><rect width="1" height="1" fill="url(#${id})"/></svg>`;
+};

package/src/react/corners.ts

@@ -1,4 +1,4 @@
-import { Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, type ImageStyle, type TextStyle, type ViewStyle } from 'react-native';
 import { CORNER_SMOOTHING } from '../render/squircle';
 
 /*
@@ -44,9 +44,12 @@ export function smoothCorners<T extends Style>(st: T): T {
   return out as T;
 }
 
+/** A sheet's styles by name. (React Native 0.88's generated types have no `StyleSheet.NamedStyles`.) */
+type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
+
 /** StyleSheet.create, every style's corners smoothed (smoothCorners). */
-export function createSheet<T extends StyleSheet.NamedStyles<T>>(styles: T & StyleSheet.NamedStyles<unknown>): T {
+export function createSheet<T extends NamedStyles<T>>(styles: T): T {
   const out = {} as Record<string, unknown>;
   for (const k of Object.keys(styles)) out[k] = smoothCorners((styles as Record<string, Style>)[k]);
-  return StyleSheet.create(out as T);
+  return StyleSheet.create(out as Record<string, ViewStyle | TextStyle | ImageStyle>) as unknown as T;
 }

package/src/react/editorBox.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+/*
+  The editor's own area: what its chrome is laid out in. It's the window when the editor fills it, and less when the
+  host puts it in a pane beside something else (a split view, beside the app's sidebar). The phone or tablet layout,
+  the top row, the drawer and the menus all go by this, never by the window; the drawing already does, its canvas
+  sized by its own layout.
+*/
+
+export interface EditorBox { width: number; height: number }
+
+/** Set by CadEditor from its root's layout; until that first layout, the window stands in. */
+export const EditorBoxContext = createContext<EditorBox | null>(null);
+
+/** The editor's area (the window until it's been laid out). */
+export function useEditorBox(): EditorBox {
+  const box = useContext(EditorBoxContext), win = useWindowDimensions();
+  return box ?? win;
+}

package/src/react/host.ts

@@ -12,7 +12,7 @@ import { notify } from './store';
 /** Whether an editor is on screen (CadEditor sets it): readings that arrive after it closed are left to the host. */
 export const editorHost = { open: false };
 
-/** A measure connected or disconnected: shows the reading tray and enables the keypad's Laser key. */
+/** A measure connected or disconnected: enables the keypad's Laser key (no tray of readings shows: see applyReading). */
 export function setLaserConnected(on: boolean): void {
   laser.on = on;
   laser.external = on;

package/src/react/motion.tsx

@@ -51,7 +51,7 @@ export const reducedMotion = (): boolean => reduceMotion;
  * device, the wait before it moved). `mounted` says whether to draw it at all; the style hides it when it's away.
  */
 export function usePopup(open: boolean, from: { x?: number; y?: number }, origin: string, keep = false): {
-  present: boolean; mounted: boolean; style: Animated.WithAnimatedObject<ViewStyle>;
+  present: boolean; mounted: boolean; style: Animated.WithAnimatedValue<ViewStyle>;
 } {
   const v = useRef(new Animated.Value(open ? 1 : 0)).current, [present, setPresent] = useState(open), been = useRef(open);
   if (open) been.current = true;
@@ -77,9 +77,9 @@ export function usePopup(open: boolean, from: { x?: number; y?: number }, origin
         { translateY: v.interpolate({ inputRange: [0, 1], outputRange: [fy, 0] }) },
         { scale: v.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) },
       ],
-    }) as Animated.WithAnimatedObject<ViewStyle>, [v, fx, fy, origin]);
+    }) as Animated.WithAnimatedValue<ViewStyle>, [v, fx, fy, origin]);
   const shown = open || present;
-  const hidden = useMemo(() => [style, { display: 'none' as const }] as unknown as Animated.WithAnimatedObject<ViewStyle>, [style]);
+  const hidden = useMemo(() => [style, { display: 'none' as const }] as unknown as Animated.WithAnimatedValue<ViewStyle>, [style]);
   return { present: shown, mounted: shown || (keep && been.current), style: shown ? style : hidden };
 }
 
@@ -185,13 +185,13 @@ function SegOption({ label, on, onPress, onLayout, style, textStyle, onText, off
       onLayout={e => onLayout(e.nativeEvent.layout)} style={[segCenter, style, { backgroundColor: 'transparent' }]}>
       {NATIVE ? (
         <>
-          <Animated.Text style={[textStyle, { color: offText, opacity: ink }]}>{label}</Animated.Text>
+          <Animated.Text numberOfLines={1} style={[textStyle, { color: offText, opacity: ink }]}>{label}</Animated.Text>
           {/* (the chosen colour's label, exactly over the other) */}
           <View pointerEvents="none" style={segOver}>
-            <Animated.Text accessible={false} style={[textStyle, { color: onText, opacity: t }]}>{label}</Animated.Text>
+            <Animated.Text numberOfLines={1} accessible={false} style={[textStyle, { color: onText, opacity: t }]}>{label}</Animated.Text>
           </View>
         </>
-      ) : <Animated.Text style={[textStyle, { color: ink }]}>{label}</Animated.Text>}
+      ) : <Animated.Text numberOfLines={1} style={[textStyle, { color: ink }]}>{label}</Animated.Text>}
     </Tap>
   );
 }

package/src/react/pageLock.native.ts

@@ -1,3 +1,5 @@
 /** A device screen has no page to zoom or scroll (see pageLock.web.ts). */
 export const PAGE_LOCK_ROOT = 'cad-root';
+/** (a browser's: see pageLock.web.ts) */
+export const BESIDE = 'data-cad-beside';
 export function usePageLock(): void {}

package/src/react/pageLock.web.ts

@@ -17,6 +17,13 @@ const LOCKED_VIEWPORT = 'width=device-width, initial-scale=1, maximum-scale=1, u
 
 export const PAGE_LOCK_ROOT = ROOT;
 
+/**
+ * Put on a host's pane beside the editor (a split view). What starts in it is its own: the lock leaves its pinches and
+ * two-finger moves alone, and a key pressed with nothing focused after a press in it isn't the editor's (see
+ * PlanCanvas.web.tsx).
+ */
+export const BESIDE = 'data-cad-beside';
+
 export function usePageLock(): void {
   useEffect(() => {
     if (typeof document === 'undefined') return;
@@ -31,9 +38,11 @@ export function usePageLock(): void {
     if (!meta) { meta = document.createElement('meta'); meta.name = 'viewport'; document.head.appendChild(meta); }
     const before = meta.content;
     meta.content = LOCKED_VIEWPORT;
-    // Safari's pinch zoom (it ignores user-scalable=no): its gesture events, and two-finger touch moves
-    const stop = (e: Event) => e.preventDefault();
-    const pinch = (e: TouchEvent) => { if (e.touches.length > 1) e.preventDefault(); };
+    // Safari's pinch zoom (it ignores user-scalable=no): its gesture events, and two-finger touch moves — except in a
+    // host's pane beside the editor, which handles its own (BESIDE)
+    const own = (e: Event) => e.target instanceof Element && !!e.target.closest(`[${BESIDE}]`);
+    const stop = (e: Event) => { if (!own(e)) e.preventDefault(); };
+    const pinch = (e: TouchEvent) => { if (e.touches.length > 1 && !own(e)) e.preventDefault(); };
     const opts: AddEventListenerOptions = { passive: false };
     const gestures = ['gesturestart', 'gesturechange', 'gestureend'];
     gestures.forEach(g => document.addEventListener(g, stop, opts));

package/src/react/ports.ts

@@ -12,6 +12,7 @@ import { manualSave, noteEdits, saveDrawing } from './saving';
 import { requestDraw, requestOverlayDraw } from '../render/view';
 import { notify, ui } from './store';
 import { setInteracting } from './Duck';
+import { PAGE_LOCK_ROOT } from './pageLock';
 
 /* The editor's ports for the React Native interface: each request updates the interface's state and re-renders. */
 
@@ -110,8 +111,12 @@ export const reactPorts: EditorPorts = {
       requestDraw();
       return;
     }
-    // the keypad has no text field: let typed keys reach the editor, not the button that opened it (Enter would press it again)
-    if (typeof document !== 'undefined') (document.activeElement as HTMLElement | null)?.blur?.();
+    // the keypad has no text field: let typed keys reach the editor, not the button that opened it (Enter would press it
+    // again). Only a button of the editor's: focus elsewhere on the page (a pane beside it) stays where it is.
+    if (typeof document !== 'undefined') {
+      const a = document.activeElement as HTMLElement | null;
+      if (a?.closest?.('#' + PAGE_LOCK_ROOT)) a.blur?.();
+    }
     keypadStart(spec);
     ui.keypad = true;
     sheetOpened();