@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/react/Toast.tsx

@@ -1,26 +1,33 @@
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { notify, ui } from './store';
+import { useRef } from 'react';
+import { Animated, Text, View } from 'react-native';
+import { notify, ui, useEditorKey } from './store';
 import { C, FONT, shadow } from './theme';
+import { Tap, usePopup } from './motion';
+import { createSheet } from './corners';
 
 /** A short message above the bottom bar, sometimes with an action (Undo). */
 export function Toast({ phone }: { phone: boolean }) {
-  const t = ui.toast;
-  if (!t) return null;
+  useEditorKey(() => (ui.toast ? String(ui.toast.id) : ''));
+  // (it rises in, and fades as it goes, still saying what it said)
+  const open = !!ui.toast, last = useRef(ui.toast), pop = usePopup(open, { y: 8 }, 'bottom center');
+  if (ui.toast) last.current = ui.toast;
+  const t = last.current;
+  if (!pop.present || !t) return null;
   return (
     <View style={[s.wrap, { bottom: phone ? 160 : 96 }]}>
-      <View style={[s.toast, t.warn && s.warn]} accessibilityRole="alert" testID="toast" key={t.id}>
+      <Animated.View style={[s.toast, t.warn && s.warn, pop.style]} pointerEvents={open ? 'auto' : 'none'} accessibilityRole="alert" testID={open ? 'toast' : undefined} key={t.id}>
         <Text style={s.text}>{t.msg}</Text>
         {t.action && (
-          <Pressable accessibilityRole="button" onPress={() => { const fn = t.action!.fn; ui.toast = null; notify(); fn(); }}>
+          <Tap accessibilityRole="button" onPress={() => { const fn = t.action!.fn; ui.toast = null; notify(); fn(); }}>
             <Text style={s.action}>{t.action.label}</Text>
-          </Pressable>
+          </Tap>
         )}
-      </View>
+      </Animated.View>
     </View>
   );
 }
 
-const s = StyleSheet.create({
+const s = createSheet({
   wrap: { pointerEvents: 'box-none', position: 'absolute', left: 16, right: 16, alignItems: 'center', zIndex: 70 },
   toast: { backgroundColor: C.dark, borderWidth: 1, borderColor: C.g2, borderRadius: 12, paddingVertical: 11, paddingHorizontal: 14, flexDirection: 'row', alignItems: 'center', gap: 14, maxWidth: 520, ...shadow },
   warn: { borderLeftWidth: 4, borderLeftColor: C.wred },

package/src/react/ToolTip.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated, useWindowDimensions, View } from 'react-native';
+import { TIP_TOP, topLayout } from './topRow';
+import { RichText } from './RichText';
+import { ui, useEditorKey } from './store';
+import { C, FONT, shadow } from './theme';
+import { TOGGLE_EASE } from './motion';
+import { NATIVE } from './easing';
+import { createSheet } from './corners';
+
+/** How long the note stays, and how it comes and goes. */
+const SHOW_MS = 2600, IN_MS = 160, OUT_MS = 240;
+
+/**
+ * What the tool just picked from the rail does, in a line, just under the Annotate / Draft tabs: it fades in, stays a
+ * moment and goes by itself; picking another tool replaces it at once.
+ */
+export function ToolTip({ phone }: { phone: boolean }) {
+  const { width, height } = useWindowDimensions();
+  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;
+  useEffect(() => {
+    if (!tip) return;
+    setShown(tip);
+    v.setValue(0);
+    const go = (to: number, ms: number) => Animated.timing(v, { toValue: to, duration: ms, easing: TOGGLE_EASE, useNativeDriver: NATIVE });
+    go(1, IN_MS).start();
+    const t = setTimeout(() => go(0, OUT_MS).start(({ finished }) => { if (finished) setShown(s => (s?.seq === tip.seq ? null : s)); }), SHOW_MS);
+    return () => clearTimeout(t);
+  }, [tip?.seq]); // eslint-disable-line react-hooks/exhaustive-deps
+  // (always mounted, see-through when idle: a view put on screen as its fade starts can be detached for a moment by
+  // React's strict mode, which stops the fade part-way)
+  return (
+    <View pointerEvents="none" style={[s.wrap, { top: topLayout(width, height, phone).below ? TIP_TOP.below : TIP_TOP.row }]}>
+      <Animated.View testID={shown ? 'toolTip' : undefined} accessibilityLiveRegion="polite" aria-hidden={!shown}
+        style={[s.tip, !shown && s.idle, { opacity: v, transform: [{ translateY: slide }] }]}>
+        {shown ? <RichText html={shown.text} style={s.text} /> : null}
+      </Animated.View>
+    </View>
+  );
+}
+
+const s = createSheet({
+  wrap: { position: 'absolute', left: 12, right: 12, alignItems: 'center', zIndex: 29 },
+  tip: { maxWidth: 460, backgroundColor: C.g1, borderRadius: 999, paddingVertical: 8, paddingHorizontal: 14, borderWidth: 1, borderColor: C.g2, ...shadow },
+  text: { fontFamily: FONT, fontSize: 13, color: C.lg2, textAlign: 'center' },
+  idle: { borderWidth: 0, padding: 0, boxShadow: 'none' },
+});

package/src/react/TopBar.tsx

@@ -1,75 +1,133 @@
 import type { ReactNode } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { applyCtxAction } from '../editor/actions';
+import { Text, useWindowDimensions, View } from 'react-native';
+import { closeElevation, elev, elevOpen, elevTitle, flipElevation } from '../editor/elevation';
 import { setMode } from '../editor/mode';
 import { openDrawer } from '../editor/ports';
-import { ed } from '../app/state';
-import { settings } from '../model/settings';
+import { close3d, open3d } from '../editor/view3d';
+import { command3d, is3d } from '../editor/view3dState';
+import { ed, type Mode } from '../app/state';
 import { page, store } from '../model/store';
 import { fitView } from '../render/view';
 import { CircleButton, Pill } from './Buttons';
 import { Icon } from './Icon';
 import { reactPorts } from './ports';
-import { notify, ui } from './store';
+import { manualSave, saveState } from './saving';
+import { notify, ui, useEditorKey } from './store';
 import { C, FONT, shadow } from './theme';
+import { Segmented, Tap } from './motion';
+import { createSheet } from './corners';
+import { setTopRoom, TABS_TOP, topKey, topLayout } from './topRow';
 
-/** The top bar: back, the project and page, view controls, the host's own buttons, settings, and Save. */
-export function TopBar({ onBack, headerRight, phone, readOnly }: { onBack?: () => void; headerRight?: ReactNode; phone: boolean; readOnly?: boolean }) {
-  const size = phone ? 42 : 46;
+/**
+ * The top bar: back, the project and page, view controls, the host's own buttons, settings, and Save. In the wall
+ * view: back to the plan, the wall and the side it's seen from, and Flip to look from the other side.
+ */
+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;
+  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('|');
+  });
+  const wall = elevOpen() && !!elev.frame, t = wall ? elevTitle() : null, crumb = topLayout(width, height, phone, size).crumb;
   return (
     <View style={s.top}>
-      <View style={s.side}>
-        <CircleButton icon="back" label={onBack ? 'Back' : 'Project pages'} size={size} onPress={onBack ?? (() => openDrawer('pages'))} testID="btnPages" />
-        {!phone && (
-          <Pressable accessibilityRole="button" accessibilityLabel="Open pages" testID="crumb" onPress={() => openDrawer('pages')} style={s.crumb}>
+      <View style={[s.side, wall && { flexShrink: 1 }]}>
+        {wall ? (
+          <>
+            <CircleButton icon="back" label="Back to the plan" size={size} onPress={closeElevation} testID="elevClose" />
+            {/* on a phone the wall's name gets the row below (where Draft / Annotate sit on the plan) */}
+            <View style={[s.crumb, s.wallCrumb, { height: size }, phone && s.wallCrumbPhone]} accessibilityLabel="Wall elevation" testID="elev">
+              <Text numberOfLines={1} style={s.wallTitle} testID="elevTitle">{t!.title}</Text>
+              <Text numberOfLines={1} style={s.wallSub} testID="elevSub">{t!.sub}</Text>
+            </View>
+          </>
+        ) : (
+          <CircleButton icon="back" label={onBack ? 'Back' : 'Project pages'} size={size} onPress={onBack ?? (() => openDrawer('pages'))} testID="btnPages" />
+        )}
+        {/* (where there's room: beside the tabs, or with the tabs below it, up to the buttons) */}
+        {!phone && !wall && crumb > 0 && (
+          <Tap accessibilityRole="button" accessibilityLabel="Open pages" testID="crumb" onPress={() => openDrawer('pages')} style={[s.crumb, { maxWidth: crumb }]}>
             <Text numberOfLines={1} style={s.crumbProj}>{store.project.name}</Text>
             <Text style={s.crumbSep}>/</Text>
             <Text numberOfLines={1} style={s.crumbPage}>{page().name}</Text>
-          </Pressable>
+          </Tap>
         )}
       </View>
-      <View style={[s.side, phone && { gap: 6 }]}>
-        <CircleButton icon="fit" label="Fit to screen" size={size} onPress={() => fitView()} testID="btnFit" />
-        <CircleButton icon={settings.showCons ? 'eye' : 'eyeoff'} label="Constraint icons" size={size} iconColor={settings.showCons ? '#fff' : C.lg1}
-          onPress={() => applyCtxAction('showcons')} testID="btnIcons" />
-        <CircleButton icon="layers" label="Layers" size={size} onPress={() => openDrawer('layers')} testID="btnLayers" />
-        {headerRight}
-        <Pill kind="grey" accessibilityLabel="Settings and more" testID="btnMore" style={[s.more, { height: size }, phone && { paddingHorizontal: 13, gap: 10 }]}
-          onPress={() => { ui.menu = !ui.menu; ui.palette = false; notify(); }}>
-          <Icon name="share" /><Icon name="dots" />
-        </Pill>
-        {!readOnly && <Pill accessibilityLabel="Save" testID="btnSave" style={[{ height: size }, phone && { minWidth: 52, paddingHorizontal: 14 }]} onPress={() => reactPorts.save()}><Icon name="save" color={C.dark} /></Pill>}
+      {/* (how wide the buttons are decides whether the tabs fit between them and the crumb: the wall view's own aren't
+          the plan's, and its tabs are hidden) */}
+      <View style={[s.side, phone && { gap: 6 }]} onLayout={e => { if (!elevOpen()) setTopRoom('right', e.nativeEvent.layout.width); }}>
+        {wall && (
+          <Pill kind="grey" accessibilityLabel="Flip: look from the other side" testID="elevFlip" onPress={flipElevation} style={[{ height: size, minWidth: 0 }, phone && { paddingHorizontal: 12 }]}>
+            <Icon name="flip" />{!phone && <Text style={s.flipText}>Flip</Text>}
+          </Pill>
+        )}
+        {/* (on a phone, Fit is the first item in •••: the row has no room for it) */}
+        {!phone && <CircleButton icon="fit" label="Fit to screen" size={size} onPress={() => (is3d() ? command3d('fit') : fitView())} testID="btnFit" />}
+        {/* the stack: what's shown (the Layers menu), open or closed — the plan's layers, so not in 3D */}
+        {!(wall && phone) && !is3d() && (
+          <CircleButton icon="layers" label="Layers" size={size} iconColor={ui.menu === 'layers' ? C.yellow : '#fff'}
+            onPress={() => { ui.menu = ui.menu === 'layers' ? false : 'layers'; ui.palette = false; ui.shapeMenu = null; notify(); }} testID="btnLayers" />
+        )}
+        {/* the room: the project panel, pages and spaces */}
+        {!wall && <CircleButton icon="spaces" label="Pages and spaces" size={size} onPress={() => openDrawer('pages')} testID="btnProject" />}
+        {typeof headerRight === 'function' ? headerRight(size) : headerRight}
+        {/* •••: exports, files and settings */}
+        <CircleButton icon="dots" label="Share, settings and more" size={size} iconColor={ui.menu === 'more' ? C.yellow : '#fff'}
+          onPress={() => { ui.menu = ui.menu === 'more' ? false : 'more'; ui.palette = false; ui.shapeMenu = null; notify(); }} testID="btnMore" />
+        {!readOnly && (
+          <Pill accessibilityLabel="Save" testID="btnSave" style={{ height: size }}
+            disabled={saveState() === 'saving'} onPress={() => reactPorts.save()}>
+            <Icon name="save" color={C.dark} />
+            {/* saving manually: what Save will do, or has done */}
+            {manualSave() && !phone && (
+              <Text style={s.saveText}>{saveState() === 'saving' ? 'Saving…' : saveState() === 'saved' ? 'Saved' : 'Save'}</Text>
+            )}
+          </Pill>
+        )}
       </View>
     </View>
   );
 }
 
-/** Draft / Annotate. */
+const TABS: [Mode | '3d', string][] = [['annotate', 'Annotate'], ['draft', 'Draft'], ['3d', '3D']];
+
+/** 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();
+  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)
+  const pick = (m: Mode | '3d') => {
+    if (m !== '3d') { close3d(); setMode(m); return; }
+    open3d();
+  };
   return (
-    <View style={[s.modes, phone && { top: 66 }]} accessibilityRole="tablist">
-      {(['annotate', 'draft'] as const).map(m => {
-        const on = ed.mode === m;
-        return (
-          <Pressable key={m} accessibilityRole="tab" accessibilityState={{ selected: on }} accessibilityLabel={m === 'draft' ? 'Draft' : 'Annotate'}
-            onPress={() => setMode(m)} style={[s.mode, on && { backgroundColor: '#fff' }]}>
-            <Text style={[s.modeText, on && { color: C.dark }]}>{m === 'draft' ? 'Draft' : 'Annotate'}</Text>
-          </Pressable>
-        );
-      })}
+    <View pointerEvents="box-none" style={[s.modesAt, at.left == null ? s.modesCentred : { left: at.left }, { top: at.below ? TABS_TOP.below : TABS_TOP.row }]}
+      onLayout={e => setTopRoom('tabs', e.nativeEvent.layout.width)}>
+      <Segmented role="tab" value={is3d() ? '3d' : ed.mode} options={TABS} onPick={pick}
+        style={s.modes} optionStyle={s.mode} textStyle={s.modeText} onText={C.dark} offText={C.lg1} />
     </View>
   );
 }
 
-const s = StyleSheet.create({
+const s = createSheet({
+  wallCrumb: { flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 0, flexShrink: 1, minWidth: 0 },
+  wallCrumbPhone: { position: 'absolute', top: 54, left: 0, maxWidth: 260 },
+  wallTitle: { fontFamily: FONT, fontSize: 14, fontWeight: '700', color: '#fff' },
+  wallSub: { fontFamily: FONT, fontSize: 12, color: C.lg1 },
+  flipText: { fontFamily: FONT, fontSize: 14, fontWeight: '600', color: '#fff', marginLeft: 6 },
+  saveText: { fontFamily: FONT, fontSize: 14, fontWeight: '600', color: C.dark, marginLeft: 6 },
   top: { pointerEvents: 'box-none', position: 'absolute', top: 12, left: 12, right: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10, zIndex: 30 },
   side: { pointerEvents: 'box-none', flexDirection: 'row', alignItems: 'center', gap: 8, minWidth: 0 },
   crumb: { height: 46, borderRadius: 24, backgroundColor: C.g1, paddingHorizontal: 16, flexDirection: 'row', alignItems: 'center', gap: 7, maxWidth: 420, ...shadow },
   crumbProj: { fontFamily: FONT, fontSize: 14, color: C.lg1, flexShrink: 1 },
   crumbSep: { fontFamily: FONT, fontSize: 14, color: C.g4 },
   crumbPage: { fontFamily: FONT, fontSize: 14, color: '#fff', fontWeight: '600', flexShrink: 1 },
-  more: { minWidth: 0, paddingHorizontal: 16, gap: 14 },
-  modes: { position: 'absolute', top: 12, alignSelf: 'center', flexDirection: 'row', backgroundColor: C.g1, borderRadius: 24, padding: 4, height: 46, zIndex: 31, ...shadow },
-  mode: { paddingHorizontal: 18, borderRadius: 20, justifyContent: 'center' },
+  modesAt: { position: 'absolute', zIndex: 31 },
+  modesCentred: { alignSelf: 'center' },
+  modes: { flexDirection: 'row', backgroundColor: C.g1, borderRadius: 24, padding: 4, height: 46, ...shadow },
+  mode: { paddingHorizontal: 18, borderRadius: 999, justifyContent: 'center' },
   modeText: { fontFamily: FONT, fontSize: 14, fontWeight: '600', color: C.lg1 },
 });

package/src/react/Tween.native.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+import type { ViewProps } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { DURATION, type TweenTo } from './easing';
+
+/*
+  TweenView on a device (see Tween.tsx): its box eases on the UI thread with Reanimated, so a rail growing longer or a
+  segmented control's highlight sliding never waits for the JavaScript thread. Same curve as the rest of the chrome.
+*/
+const EASE_UI = Easing.bezier(0.2, 0, 0, 1);
+
+export function TweenView({ to, duration = DURATION, style, ...rest }: ViewProps & { to: TweenTo; duration?: number }) {
+  const left = useSharedValue(to.left ?? 0), top = useSharedValue(to.top ?? 0);
+  const width = useSharedValue(to.width ?? 0), height = useSharedValue(to.height ?? 0);
+  const hasL = to.left != null, hasT = to.top != null, hasW = to.width != null, hasH = to.height != null;
+  // (each set at once the first time it's given, as in a browser — one given after the first render too)
+  const given = useRef({ left: hasL, top: hasT, width: hasW, height: hasH }).current;
+  useEffect(() => {
+    const cfg = { duration, easing: EASE_UI };
+    const go = (k: keyof typeof given, v: { value: number }, to: number | undefined) => {
+      if (to == null) return;
+      v.value = given[k] ? withTiming(to, cfg) : to;
+      given[k] = true;
+    };
+    go('left', left, to.left); go('top', top, to.top); go('width', width, to.width); go('height', height, to.height);
+  }, [to.left, to.top, to.width, to.height]); // eslint-disable-line react-hooks/exhaustive-deps
+  const box = useAnimatedStyle(() => {
+    const o: { left?: number; top?: number; width?: number; height?: number } = {};
+    if (hasL) o.left = left.value;
+    if (hasT) o.top = top.value;
+    if (hasW) o.width = width.value;
+    if (hasH) o.height = height.value;
+    return o;
+  });
+  return <Animated.View {...rest} style={[style, box]} />;
+}

package/src/react/Tween.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import { Animated, type ViewProps } from 'react-native';
+import { DURATION, EASE, type TweenTo } from './easing';
+
+/*
+  A view whose size and place ease to each new value: what a transform can't do — a rail growing longer, the highlight
+  of a segmented control moving to a wider option. In a browser JavaScript draws every frame anyway; on a device the
+  same view runs on the UI thread (Tween.native.tsx), so it never waits for the JavaScript thread.
+*/
+
+const KEYS = ['left', 'top', 'width', 'height'] as const;
+
+/** `to`: the box it eases to (set at once the first time); `duration` in ms. */
+export function TweenView({ to, duration = DURATION, style, ...rest }: ViewProps & { to: TweenTo; duration?: number }) {
+  const vals = useRef<Partial<Record<(typeof KEYS)[number], Animated.Value>>>({}).current;
+  for (const k of KEYS) if (to[k] != null && !vals[k]) vals[k] = new Animated.Value(to[k]!);
+  useEffect(() => {
+    for (const k of KEYS) {
+      const v = vals[k];
+      if (v && to[k] != null) Animated.timing(v, { toValue: to[k]!, duration, easing: EASE, useNativeDriver: false }).start();
+    }
+  }, [to.left, to.top, to.width, to.height]); // eslint-disable-line react-hooks/exhaustive-deps
+  return <Animated.View {...rest} style={[style, vals]} />;
+}

package/src/react/View3D.native.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useMemo, useRef, useState, type ComponentType } from 'react';
+import { PixelRatio, StyleSheet, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import type { WebGLRenderer } from 'three';
+import { toast } from '../editor/ports';
+import { view3dKey } from '../editor/view3d';
+import { rendererOn, sizeOn } from '../view3d/viewer';
+import { useEditorKey } from './store';
+import { View3DHost } from './View3DHost';
+
+/*
+  The 3D tab on a device: an expo-gl view over the plan (which stays as it was underneath), drawn by three.js on the
+  JavaScript thread only when something changed. One finger turns the model, two move it and pinch to zoom, a tap
+  picks what's under it, a double tap frames everything.
+
+  Sized from its layout at the screen's pixel ratio, never from gl.drawingBufferWidth: expo-gl sets that once, as the
+  view is made, and leaves it as the device turns (iOS resizes the buffer itself as the view lays out; Android's
+  surface follows the view).
+
+  The GL view is made only once this view has a size, as react-three-fiber makes its own: resized after it's made,
+  expo-gl (iOS) deletes the framebuffer three.js draws to, makes another and binds framebuffers behind three.js's back,
+  and three.js keeps track of what it thinks is bound. So each resize (a device turned) binds the default framebuffer
+  afresh (sizeOn — not three.js's resetState(), which reads gl.canvas: expo-gl's context has none, and it threw), and
+  the frames just after are drawn again, in case one went while expo-gl was making its buffers — this view draws
+  only when something changes, so a frame lost stays lost. Anything that goes wrong making or sizing it is said in a
+  toast, never thrown: thrown from a GL view's callbacks, it takes the app down.
+
+  Left, the tab's view is kept (hidden, untouchable, drawing nothing: `active`), so coming back is at once — made
+  again each time, its GL context, renderer and shaders took a pause every time the tab opened. CadEditor lets it go
+  after a while away.
+
+  expo-gl comes from the host app (BOLDR has it, for its layout viewer); its types aren't installed here, so what's
+  used of it is written out below.
+*/
+
+/** expo-gl's context: WebGL 2, plus the call that puts a drawn frame on the screen. */
+interface ExpoGL extends WebGL2RenderingContext { endFrameEXP(): void }
+interface GLViewProps { style?: StyleProp<ViewStyle>; onContextCreate: (gl: ExpoGL) => void; msaaSamples?: number }
+declare const require: (id: 'expo-gl') => { GLView: ComponentType<GLViewProps> };
+const { GLView } = require('expo-gl');
+
+export function View3D({ theme, active = true }: { theme: 'light' | 'dark'; active?: boolean }) {
+  const host = useRef<View3DHost | null>(null), renderer = useRef<WebGLRenderer | null>(null), context = useRef<ExpoGL | null>(null);
+  const size = useRef({ w: 0, h: 0 }), themeNow = useRef(theme), failed = useRef(false);
+  // (the GL view waits for this view's size: see above)
+  const [laidOut, setLaidOut] = useState(false);
+  themeNow.current = theme;
+  const key = useEditorKey(view3dKey);
+  const drop = () => { host.current?.dispose(); renderer.current?.dispose(); host.current = null; renderer.current = null; context.current = null; };
+  useEffect(() => drop, []);
+  // (hidden, it follows nothing: shown again, it catches up with the plan at once)
+  const activeNow = useRef(active);
+  activeNow.current = active;
+  useEffect(() => {
+    host.current?.setVisible(active);
+    if (active) host.current?.sync(theme);
+  }, [key, theme, active]);
+
+  /** What went wrong making or sizing the view, in a toast (once): see above. */
+  const fail = (e: unknown) => {
+    console.error('3D view:', e);
+    if (failed.current) return;
+    failed.current = true;
+    toast('The 3D view couldn’t start (' + (e instanceof Error ? e.message : String(e)) + '). Leave the tab and open it again to retry.', { warn: true });
+  };
+  /** The drawing as big as the view (in points, at the screen's pixel density): again as the device turns. */
+  const fit = () => {
+    const { w, h } = size.current;
+    if (!renderer.current || !context.current || w < 1 || h < 1) return;
+    try {
+      sizeOn(renderer.current, context.current, w, h, PixelRatio.get());
+      host.current?.resize(w, h);
+      host.current?.settle();
+    } catch (e) { fail(e); }
+  };
+  const onContextCreate = (gl: ExpoGL) => {
+    drop();
+    try {
+      renderer.current = rendererOn(gl);
+      context.current = gl;
+      // (the GL view is made after this view's first layout: its size is known)
+      host.current = new View3DHost(renderer.current, themeNow.current, () => gl.endFrameEXP());
+      host.current.setVisible(activeNow.current);
+      fit();
+      host.current.sync(themeNow.current);
+    } catch (e) {
+      drop();
+      fail(e);
+    }
+  };
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    size.current = { w: width, h: height };
+    if (width >= 1 && height >= 1) setLaidOut(true);
+    fit();
+  };
+
+  const gesture = useMemo(() => {
+    // the chrome steps aside while either moves the camera: a pinch with its fingers spreading evenly needn't move
+    // their middle far enough to start the pan
+    let panning = false, pinching = false;
+    const moving = () => host.current?.moving(panning || pinching);
+    // one finger turns the model, two move it (and pinch to zoom, at the same time)
+    const pan = Gesture.Pan().runOnJS(true).minPointers(1).maxPointers(2).averageTouches(true)
+      .onStart(() => { panning = true; moving(); })
+      .onChange(e => { if (e.numberOfPointers >= 2) host.current?.pan(e.changeX, e.changeY); else host.current?.orbit(e.changeX, e.changeY); })
+      .onFinalize(() => { panning = false; moving(); });
+    const pinch = Gesture.Pinch().runOnJS(true)
+      .onStart(() => { pinching = true; moving(); })
+      .onChange(e => { if (e.scaleChange > 0) host.current?.zoom(1 / e.scaleChange, e.focalX, e.focalY); })
+      .onFinalize(() => { pinching = false; moving(); });
+    // a tap is told at once, and the host makes a second one soon after a double tap: a double-tap gesture would hold
+    // every single tap back until it failed (half a second)
+    const tap = Gesture.Tap().runOnJS(true).maxDuration(400).onEnd((e, ok) => { if (ok) host.current?.tapAt(e.x, e.y); });
+    return Gesture.Race(Gesture.Simultaneous(pan, pinch), tap);
+  }, []);
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <View style={[s.fill, !active && s.away]} pointerEvents={active ? 'auto' : 'none'} aria-hidden={!active}
+        onLayout={onLayout} collapsable={false} testID="view3d" accessibilityLabel="3D view of the plan">
+        {laidOut && <GLView style={s.fill} onContextCreate={onContextCreate} msaaSamples={4} />}
+      </View>
+    </GestureDetector>
+  );
+}
+
+// (no zIndex: it's drawn after the plan and before the chrome, which stays on top. Spelt out: React Native 0.86
+// dropped StyleSheet.absoluteFillObject, and with it undefined the view got no style — the screen's width, no height —
+// so the 3D tab showed nothing over the plan.)
+const s = StyleSheet.create({ fill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, away: { opacity: 0 } });

package/src/react/View3D.web.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef } from 'react';
+import { WebGLRenderer } from 'three';
+import { toast } from '../editor/ports';
+import { view3dKey } from '../editor/view3d';
+import { useEditorKey } from './store';
+import { View3DHost } from './View3DHost';
+
+/*
+  The 3D tab in a browser: a WebGL <canvas> over the plan (which stays as it was underneath). A finger or the mouse
+  drags to turn the model; two fingers, the right or middle button, or Shift and a drag move it; a pinch, the wheel or
+  a trackpad's pinch zooms toward the pointer. A tap picks what's under it; a double tap frames everything.
+
+  Left, the tab's canvas is kept (hidden, untouchable, drawing nothing: `active`), so coming back is at once — made
+  again each time, its WebGL context, renderer and shaders took a pause every time the tab opened. CadEditor lets it
+  go after a while away.
+*/
+
+/** Moving less than this (points) between press and release is a tap (a double tap is the host's: View3DHost.tapAt). */
+const TAP_SLOP = 6;
+
+export function View3D({ theme, active = true }: { theme: 'light' | 'dark'; active?: boolean }) {
+  const ref = useRef<HTMLCanvasElement>(null), host = useRef<View3DHost | null>(null), activeNow = useRef(active);
+  activeNow.current = active;
+  const key = useEditorKey(view3dKey);
+  useEffect(() => {
+    const cv = ref.current!;
+    let renderer: WebGLRenderer;
+    try {
+      renderer = new WebGLRenderer({ canvas: cv, antialias: true, powerPreference: 'high-performance' });
+    } catch {
+      toast('3D needs WebGL, which this browser has turned off.', { warn: true });
+      return;
+    }
+    renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+    const h = new View3DHost(renderer, theme);
+    host.current = h;
+    h.setVisible(activeNow.current);
+    // (only for a new size: setting a canvas's size makes its drawing buffer again and clears it, the same size or not —
+    // and the observer reports the size just set as it starts)
+    let was = { w: -1, h: -1 };
+    const size = () => {
+      const w = cv.clientWidth, ht = cv.clientHeight;
+      if (w === was.w && ht === was.h) return;
+      was = { w, h: ht };
+      renderer.setSize(w, ht, false);
+      h.resize(w, ht);
+    };
+    size();
+    h.sync(theme);
+    const ro = new ResizeObserver(size);
+    ro.observe(cv);
+
+    // the pointers down, and what they're doing
+    const ac = new AbortController(), on = { signal: ac.signal };
+    const pts = new Map<number, { x: number; y: number }>();
+    let mode: 'none' | 'orbit' | 'pan' | 'pinch' = 'none', moved = false, downAt = 0, start = { x: 0, y: 0 };
+    let pinch = { d: 0, x: 0, y: 0 };
+    const at = (e: PointerEvent | WheelEvent) => { const r = cv.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; };
+    const two = () => {
+      const [a, b] = [...pts.values()];
+      return { d: Math.hypot(b.x - a.x, b.y - a.y), x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+    };
+    cv.addEventListener('pointerdown', e => {
+      cv.focus({ preventScroll: true });
+      try { cv.setPointerCapture(e.pointerId); } catch { /* not capturable (synthetic) */ }
+      const p = at(e);
+      pts.set(e.pointerId, p);
+      if (pts.size === 1) {
+        mode = e.button === 1 || e.button === 2 || e.shiftKey ? 'pan' : 'orbit';
+        moved = false; downAt = performance.now(); start = p;
+      } else if (pts.size === 2) {
+        // (two fingers never tap)
+        mode = 'pinch'; moved = true; pinch = two();
+        h.moving(true);
+      }
+    }, on);
+    cv.addEventListener('pointermove', e => {
+      const prev = pts.get(e.pointerId);
+      if (!prev) return;
+      const p = at(e);
+      pts.set(e.pointerId, p);
+      if (mode === 'pinch' && pts.size >= 2) {
+        const now = two();
+        if (pinch.d > 0 && now.d > 0) h.zoom(pinch.d / now.d, now.x, now.y);
+        h.pan(now.x - pinch.x, now.y - pinch.y);
+        pinch = now;
+        return;
+      }
+      if (mode !== 'orbit' && mode !== 'pan') return;
+      if (!moved) {
+        if (Math.hypot(p.x - start.x, p.y - start.y) < TAP_SLOP) return;
+        moved = true;
+        h.moving(true);
+      }
+      if (mode === 'orbit') h.orbit(p.x - prev.x, p.y - prev.y);
+      else h.pan(p.x - prev.x, p.y - prev.y);
+    }, on);
+    const up = (e: PointerEvent, cancel: boolean) => {
+      if (!pts.has(e.pointerId)) return;
+      pts.delete(e.pointerId);
+      if (!cancel && (mode === 'orbit' || mode === 'pan') && !moved && performance.now() - downAt < 600) {
+        const p = at(e);
+        h.tapAt(p.x, p.y);
+      }
+      if (pts.size === 1 && mode === 'pinch') { mode = 'orbit'; return; } // (one finger left: it turns the model)
+      if (!pts.size) { if (moved) h.moving(false); mode = 'none'; }
+    };
+    cv.addEventListener('pointerup', e => up(e, false), on);
+    cv.addEventListener('pointercancel', e => up(e, true), on);
+    cv.addEventListener('contextmenu', e => e.preventDefault(), on);
+    // (a browser can take the GL context back — Safari does in the background — and three.js makes it again: draw then)
+    cv.addEventListener('webglcontextrestored', () => h.redraw(), on);
+    cv.addEventListener('wheel', e => {
+      e.preventDefault();
+      const p = at(e), d = e.deltaY || e.deltaX, unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
+      // a trackpad's pinch arrives as the wheel with Ctrl held, in smaller steps
+      h.zoom(Math.exp(d * unit * (e.ctrlKey ? 0.01 : 0.0015)), p.x, p.y);
+    }, { passive: false, signal: ac.signal });
+    return () => { ac.abort(); ro.disconnect(); h.dispose(); renderer.dispose(); host.current = null; };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // (hidden, it follows nothing: shown again, it catches up with the plan at once)
+  useEffect(() => {
+    host.current?.setVisible(active);
+    if (active) host.current?.sync(theme);
+  }, [key, theme, active]);
+  return (
+    <canvas ref={ref} tabIndex={-1} aria-label="3D view of the plan" aria-hidden={!active} data-testid="view3d" id="cv3d"
+      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', touchAction: 'none', display: 'block', outline: 'none',
+        visibility: active ? 'visible' : 'hidden', pointerEvents: active ? 'auto' : 'none' }} />
+  );
+}