@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/react/Drawer.tsx

@@ -1,45 +1,149 @@
-import { useEffect, useRef, useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, Switch, Text, TextInput, useWindowDimensions, View } from 'react-native';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  addPage, calibrateUnderlay, deletePage, deletePending, duplicatePage, focusSpace, LAYER_ROWS, layerOn, removeUnderlay,
-  renamePage, renameProject, renameSpace, setUnderlayOpacity, spaceSchedule, switchPage, toggleLayer, toggleUnderlayLock,
+  Animated, Easing, Keyboard, PanResponder, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useWindowDimensions, 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 { settings } from '../model/settings';
 import { page, store } from '../model/store';
 import { fmtArea, fmtLen } from '../units';
-import { Icon } from './Icon';
+import { Icon, RawSvg } from './Icon';
+import { PLUS_SIZE, PLUS_SVG, TRASH_SIZE, TRASH_SVG } from '../render/figmaIcons';
 import { PageThumb } from './PageThumb';
 import { notify, ui, useEditorVersion } from './store';
 import { C, FONT } from './theme';
+import { EASE, Segmented, Tap } from './motion';
+import { NATIVE } from './easing';
+import { createSheet } from './corners';
+
+/**
+ * The Pages frame's sizes, scaled to the panel: Figma draws it 515 wide, the panel's content is about 370 (K). Its
+ * tiles are 180 tall there, with the name in a band at their foot below the drawing.
+ */
+const K = 0.72, TILE_H = Math.round(180 * K), NAME_BAND = 34, THUMB_H = TILE_H - NAME_BAND - 2;
 
-const TABS: [DrawerTab, string][] = [['pages', 'Pages'], ['layers', 'Layers'], ['rooms', 'Spaces']];
+/** Pages and Spaces, tabs of one panel (Layers is a menu of its own in the top bar). */
+const TABS: [DrawerTab, string][] = [['pages', 'Pages'], ['rooms', 'Spaces']];
 const close = () => { ui.drawer = null; ui.renameRoom = null; notify(); };
 
-/** The project panel: pages, layers and the spaces schedule. */
-export function Drawer() {
-  const version = useEditorVersion(), { width } = useWindowDimensions();
-  const tab = ui.drawer;
-  if (!tab) return null;
+/** Sliding in it eases to a stop; sliding out it gathers pace as it goes. */
+const SLIDE_IN = 240, SLIDE_OUT = 200, EASE_OUT = Easing.bezier(0.4, 0, 1, 1);
+/** A phone's sheet rises the way iOS's own sheets do: quick off the mark, a long soft landing. */
+const SHEET_IN = 320, SHEET_EASE = Easing.bezier(0.32, 0.72, 0, 1), SHEET_OUT = 220;
+/** Taps on the scrim right after the sheet opens are the opening tap's ghost click (touch screens): ignore them. */
+const GHOST_MS = 450;
+/** A drag down the sheet's top that closes it: this far, or a flick. */
+const CLOSE_DRAG = 80, CLOSE_FLICK = 0.5;
+
+/**
+ * The project panel: pages and the spaces schedule. On a tablet or computer it slides in from the right; on a phone
+ * it's a bottom sheet the way BOLDR's are (a grey-1 sheet with a grey-4 handle over a dimmed drawing, closed by a drag
+ * 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 open = !!ui.drawer;
+  // what it showed last stays while it slides away
+  const last = useRef<DrawerTab>('pages');
+  if (ui.drawer) last.current = ui.drawer;
+  const [present, setPresent] = useState(open);
+  // the phone's sheet slides its own height (measured as it opens), not the screen's: from a screen's height away the
+  // first part of the slide happened below the screen, and what showed rushed by in a few frames. While it slides,
+  // what's costly in it (the pages' thumbnails) waits: `settled`
+  const [travel, setTravel] = useState<number | null>(null), [settled, setSettled] = useState(open);
+  const measuring = phone && open && travel == null;
+  const x = useRef(new Animated.Value(open ? 0 : 1)).current;
+  // made once for its size, which only changes while it's still: a new one each render would detach the old, and a
+  // value with nothing attached stops its animation — the slide would end before it began
+  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 dropped = useMemo(() => Animated.add(slide, drag), [slide, drag]);
+  useEffect(() => {
+    if (open) { setPresent(true); openedAt.current = Date.now(); }
+  }, [open]);
+  useEffect(() => {
+    // (a phone's sheet first lays out below the screen, so it knows how far to come)
+    if (measuring) return;
+    // started on the next frame: a panel just put on screen is taken off and put back once more by React's strict
+    // mode as it mounts, and its animation stops when that leaves nothing attached to it
+    const frame = requestAnimationFrame(() => {
+      if (open) {
+        Animated.timing(x, { toValue: 0, duration: phone ? SHEET_IN : SLIDE_IN, easing: phone ? SHEET_EASE : EASE, useNativeDriver: NATIVE })
+          .start(({ finished }) => { if (finished) setSettled(true); });
+      } else {
+        Animated.timing(x, { toValue: 1, duration: phone ? SHEET_OUT : SLIDE_OUT, easing: EASE_OUT, useNativeDriver: NATIVE })
+          // (the thumbnails stay as they slide away; they're held back again the next time it opens)
+          .start(({ finished }) => { if (finished) { setPresent(false); setTravel(null); setSettled(false); drag.setValue(0); } });
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, measuring, phone, x, drag]);
+  const pan = useMemo(() => {
+    const back = () => Animated.timing(drag, { toValue: 0, duration: SLIDE_IN, easing: EASE, useNativeDriver: NATIVE }).start();
+    return PanResponder.create({
+      // a drag down (not a tap on a tab, nor a sideways swipe) moves the sheet with the finger
+      onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
+      onPanResponderRelease: (_, g) => { if (g.dy > CLOSE_DRAG || g.vy > CLOSE_FLICK) close(); else back(); },
+      onPanResponderTerminate: back,
+    });
+  }, [drag]);
+  // iOS doesn't resize the window for the keyboard (Android does): lift the sheet clear of it to rename a space
+  useEffect(() => {
+    if (!phone || Platform.OS !== 'ios') return;
+    const show = Keyboard.addListener('keyboardWillShow', e => {
+      sheet.current?.measureInWindow((_x, y, _w, h) => setLift(l => Math.max(0, y + h + l - e.endCoordinates.screenY)));
+    });
+    const hide = Keyboard.addListener('keyboardWillHide', () => setLift(0));
+    return () => { show.remove(); hide.remove(); };
+  }, [phone]);
+  if (!open && !present) return null;
+  const tab = last.current;
+  const body = (
+    <ScrollView style={phone && s.sheetScroll} contentContainerStyle={s.body} keyboardShouldPersistTaps="handled">
+      {tab === 'pages' && <Pages version={version} thumbs={settled || !phone} />}
+      {tab === 'rooms' && <Spaces />}
+    </ScrollView>
+  );
+  const tabs = (
+    <Segmented role="tab" value={tab} options={TABS} onPick={t => { ui.drawer = t; notify(); }}
+      style={s.tabs} optionStyle={s.tab} textStyle={s.tabText} onText={C.dark} offText={C.lg1} />
+  );
+  if (phone) {
+    return (
+      <>
+        <Animated.View pointerEvents={open ? 'auto' : 'none'} style={[StyleSheet.absoluteFill, s.scrim, { opacity: fade }]}>
+          <Pressable accessibilityRole="button" accessibilityLabel="Close panel" testID="drawerScrim" style={StyleSheet.absoluteFill}
+            onPress={() => { if (Date.now() - openedAt.current > GHOST_MS) close(); }} />
+        </Animated.View>
+        <Animated.View ref={sheet} pointerEvents={open ? 'auto' : 'none'} accessibilityLabel="Project panel" accessibilityViewIsModal
+          testID={open ? 'drawer' : undefined} style={[s.sheet, { bottom: lift, transform: [{ translateY: dropped }] }]}
+          // its height: how far it slides (taken while it's still — opening, or open and settled — never mid-slide)
+          onLayout={e => { const h = e.nativeEvent.layout.height; if (travel == null || (settled && open)) setTravel(t => (t != null && Math.abs(t - h) < 1 ? t : h)); }}>
+          {/* the handle and the tabs: a drag down either closes it */}
+          <View {...pan.panHandlers}>
+            <View style={s.handleWrap}><View style={[s.handle, { width: Math.round(width * 0.075) }]} /></View>
+            <View style={[s.head, s.sheetHead]}>{tabs}</View>
+          </View>
+          {body}
+        </Animated.View>
+      </>
+    );
+  }
   return (
-    <View style={[s.drawer, { width: Math.min(350, width) }]} accessibilityLabel="Project panel" testID="drawer">
+    // (off by its shadow too, so nothing of it shows once it's out)
+    <Animated.View pointerEvents={open ? 'auto' : 'none'} accessibilityLabel="Project panel" testID={open ? 'drawer' : undefined}
+      style={[s.drawer, { width: w, transform: [{ translateX: slide }] }]}>
       <View style={s.head}>
-        <View style={s.tabs} accessibilityRole="tablist">
-          {TABS.map(([t, label]) => (
-            <Pressable key={t} accessibilityRole="tab" accessibilityState={{ selected: tab === t }} onPress={() => { ui.drawer = t; notify(); }}
-              style={[s.tab, tab === t && { backgroundColor: '#fff' }]}>
-              <Text style={[s.tabText, tab === t && { color: C.dark }]}>{label}</Text>
-            </Pressable>
-          ))}
-        </View>
-        <Pressable accessibilityRole="button" accessibilityLabel="Close panel" onPress={close} style={s.close}><Icon name="close" /></Pressable>
+        {tabs}
+        <Tap accessibilityRole="button" accessibilityLabel="Close panel" onPress={close} style={s.close}><Icon name="close" /></Tap>
       </View>
-      <ScrollView contentContainerStyle={s.body}>
-        {tab === 'pages' && <Pages version={version} />}
-        {tab === 'layers' && <Layers />}
-        {tab === 'rooms' && <Spaces />}
-      </ScrollView>
-    </View>
+      {body}
+    </Animated.View>
   );
 }
 
@@ -58,83 +162,58 @@ function NameField({ value, onCommit, style, label, autoFocus, onFocus }: {
   );
 }
 
-function SmallButton({ label, onPress, danger }: { label: string; onPress: () => void; danger?: boolean }) {
+/**
+ * The pages (Figma 2548:101990): the current page's name, then the pages — Duplicate and Delete for the current one
+ * (greyed out while it's the only page), + Page, and a tile for each, its drawing above its name, the current one
+ * ringed in yellow. A tablet's or a browser's
+ * side panel and a phone's bottom sheet show the same.
+ */
+function Pages({ version, thumbs }: { version: number; thumbs: boolean }) {
+  const project = store.project, cur = page(), pending = deletePending();
+  // a project keeps at least one page: nothing to delete while there's only one
+  const lone = project.pages.length <= 1;
   return (
-    <Pressable accessibilityRole="button" accessibilityLabel={label} onPress={onPress} style={s.small}>
-      <Text style={[s.smallText, danger && { color: C.softRed }]}>{label}</Text>
-    </Pressable>
-  );
-}
-
-function Pages({ version }: { version: number }) {
-  const project = store.project, cur = page();
-  return (
-    <>
-      <NameField label="Project name" value={project.name} onCommit={renameProject} style={{ fontSize: 18 }} />
-      <Text style={s.sec}>This page</Text>
-      <NameField label="Page name" value={cur.name} onCommit={renamePage} style={{ fontSize: 15 }} />
-      <View style={s.buttons}>
-        <SmallButton label="Duplicate" onPress={duplicatePage} />
-        <SmallButton label={deletePending() ? 'Tap again to delete' : 'Delete page'} onPress={deletePage} danger />
+    <View style={s.cards}>
+      <View style={s.current}>
+        <Text style={s.pcardLabel}>Current Page:</Text>
+        <NameField label="Page name" value={cur.name} onCommit={renamePage} style={s.curName} />
       </View>
-      <View style={s.space}>
-        <View style={s.spaceHead}>
-          <Text style={[s.sec, { margin: 0, flex: 1 }]}>Pages</Text>
-          <SmallButton label="+ Page" onPress={addPage} />
-        </View>
-        <View style={s.grid}>
-          {project.pages.map(p => (
-            <Pressable key={p.id} accessibilityRole="button" accessibilityLabel={p.name} onPress={() => switchPage(p.id)}
-              style={[s.card, p.id === cur.id && { borderColor: C.yellow }]}>
-              <PageThumb page={p} version={version} />
-              <Text numberOfLines={1} style={s.cardText}>{p.name}</Text>
-            </Pressable>
-          ))}
+      <View style={s.pcard}>
+        <View style={s.pageBar}>
+          <View style={s.pageBarLeft}>
+            <Tap accessibilityRole="button" accessibilityLabel="Duplicate" onPress={duplicatePage} style={[s.pill, s.pillGrey]}>
+              <Text style={[s.pillText, { color: '#fff' }]}>Duplicate</Text>
+            </Tap>
+            {/* a first tap arms it (it says so), a second deletes the page */}
+            <Tap accessibilityRole="button" accessibilityLabel={pending ? 'Tap again to delete' : 'Delete page'} accessibilityState={{ disabled: lone }}
+              disabled={lone} onPress={deletePage} style={[s.pill, s.pillRed, pending && s.pillArmed, lone && s.pillOff]}>
+              <View style={lone && s.iconOff}><RawSvg xml={TRASH_SVG} width={TRASH_SIZE.width * K} height={TRASH_SIZE.height * K} /></View>
+              {pending && <Text style={[s.pillText, { color: '#fff' }]}>Delete?</Text>}
+            </Tap>
+          </View>
+          <Tap accessibilityRole="button" accessibilityLabel="+ Page" onPress={addPage} style={[s.pill, s.pillYellow]}>
+            <RawSvg xml={PLUS_SVG} width={PLUS_SIZE.width * K} height={PLUS_SIZE.height * K} />
+            <Text style={[s.pillText, { color: C.dark }]}>Page</Text>
+          </Tap>
         </View>
+        {project.pages.map(p => {
+          const on = p.id === cur.id;
+          return (
+            <Tap key={p.id} accessibilityRole="button" accessibilityLabel={p.name} accessibilityState={{ selected: on }} onPress={() => switchPage(p.id)}
+              style={[s.tile, on && s.tileOn]} testID="pageTile">
+              {/* (held back while the sheet slides in: recording and mounting them cost the slide its frames; and drawn
+                  again only for what they show: the page being drawn on, when it's edited — not every tap, toast and
+                  selection, for every page) */}
+              {thumbs ? <PageThumb page={p} version={on ? ed.editSeq : 0} height={THUMB_H} /> : <View style={{ height: THUMB_H }} />}
+              <Text numberOfLines={1} style={s.tileName}>{p.name}</Text>
+            </Tap>
+          );
+        })}
       </View>
-    </>
-  );
-}
-
-function SwitchRow({ label, sub, value, onChange }: { label: string; sub?: string; value: boolean; onChange: () => void }) {
-  return (
-    <View style={s.row}>
-      <View style={{ flex: 1 }}>
-        <Text style={s.rowText}>{label}</Text>
-        {sub ? <Text style={s.rowSub}>{sub}</Text> : null}
-      </View>
-      <Switch accessibilityLabel={label} value={value} onValueChange={onChange} trackColor={{ true: C.blue, false: C.g3 }} thumbColor="#fff" />
     </View>
   );
 }
 
-function Layers() {
-  const ul = page().underlay, op = Math.round((ul?.opacity ?? 0.6) * 100);
-  return (
-    <>
-      <SwitchRow label="Photo or plan underlay" sub={ul ? 'Traced image under the drawing' : 'None on this page'} value={settings.layers.underlay} onChange={() => toggleLayer('underlay')} />
-      {ul && (
-        <>
-          <View style={s.row}>
-            <Text style={s.rowText}>Image opacity</Text>
-            <View style={s.stepper}>
-              <SmallButton label="−" onPress={() => setUnderlayOpacity(Math.max(0.1, (op - 10) / 100))} />
-              <Text style={[s.rowText, { width: 44, textAlign: 'center' }]}>{op}%</Text>
-              <SmallButton label="+" onPress={() => setUnderlayOpacity(Math.min(1, (op + 10) / 100))} />
-            </View>
-          </View>
-          <View style={s.buttons}>
-            <SmallButton label={ul.locked ? 'Unlock image' : 'Lock image'} onPress={toggleUnderlayLock} />
-            <SmallButton label="Set scale" onPress={() => { close(); calibrateUnderlay(); }} />
-            <SmallButton label="Remove image" onPress={removeUnderlay} danger />
-          </View>
-        </>
-      )}
-      {LAYER_ROWS.map(([k, label, sub]) => <SwitchRow key={k} label={label} sub={sub} value={layerOn(k)} onChange={() => toggleLayer(k)} />)}
-    </>
-  );
-}
-
 function Spaces() {
   const sched = spaceSchedule();
   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>;
@@ -160,24 +239,25 @@ function Spaces() {
   );
 }
 
-const s = StyleSheet.create({
-  drawer: { position: 'absolute', top: 0, right: 0, bottom: 0, backgroundColor: C.g1, zIndex: 50, boxShadow: '-8px 0px 30px rgba(0, 0, 0, 0.3)' },
+const s = createSheet({
+  // (a hairline along its top and left: it doesn't run into the page's header, the same grey, above it)
+  drawer: { position: 'absolute', top: 0, right: 0, bottom: 0, backgroundColor: C.g1, borderTopWidth: 1, borderLeftWidth: 1, borderColor: C.g2, zIndex: 50, boxShadow: '-8px 0px 30px rgba(0, 0, 0, 0.3)' },
+  // BOLDR's bottom sheet (AnimatedBottomSheet, surface="card"): gorhom's 15 pt corners and handle, over a 50% scrim
+  scrim: { backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 49 },
+  sheet: { position: 'absolute', left: 0, right: 0, maxHeight: '85%', backgroundColor: C.g1, borderTopLeftRadius: 15, borderTopRightRadius: 15, zIndex: 50 },
+  handleWrap: { padding: 10 },
+  handle: { alignSelf: 'center', height: 4, borderRadius: 4, backgroundColor: C.g4 },
+  sheetHead: { paddingTop: 0 },
+  // (as tall as what's in it, up to the sheet's limit, then it scrolls)
+  sheetScroll: { flexGrow: 0, flexShrink: 1 },
   head: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 16, paddingBottom: 10, paddingLeft: 16, paddingRight: 14, gap: 10 },
-  tabs: { flexDirection: 'row', backgroundColor: C.dark, borderRadius: 20, padding: 3 },
-  tab: { paddingVertical: 8, paddingHorizontal: 14, borderRadius: 17 },
+  title: { fontFamily: FONT, fontSize: 17, fontWeight: '700', color: '#fff', paddingLeft: 2 },
+  tabs: { flexDirection: 'row', backgroundColor: C.dark, borderRadius: 999, padding: 3 },
+  tab: { paddingVertical: 8, paddingHorizontal: 14, borderRadius: 999 },
   tabText: { fontFamily: FONT, fontSize: 13, fontWeight: '600', color: C.lg1 },
   close: { width: 38, height: 38, borderRadius: 19, backgroundColor: C.g2, alignItems: 'center', justifyContent: 'center' },
   body: { paddingTop: 6, paddingHorizontal: 16, paddingBottom: 30 },
   field: { fontFamily: FONT, color: '#fff', fontWeight: '600', paddingVertical: 6, paddingHorizontal: 8, marginLeft: -8, borderRadius: 8, borderWidth: 1, borderColor: 'transparent' },
-  sec: { fontFamily: FONT, fontSize: 13, fontWeight: '600', color: C.g4, marginTop: 18, marginBottom: 8 },
-  buttons: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
-  small: { height: 32, paddingHorizontal: 12, borderRadius: 16, backgroundColor: C.dark, justifyContent: 'center' },
-  smallText: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: C.lg2 },
-  space: { marginTop: 16, backgroundColor: C.g2, borderWidth: 1, borderColor: C.g3, borderRadius: 12, padding: 10 },
-  spaceHead: { flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 8 },
-  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
-  card: { width: '48%', flexGrow: 1, backgroundColor: C.dark, borderRadius: 9, padding: 6, borderWidth: 2, borderColor: 'transparent', gap: 5 },
-  cardText: { fontFamily: FONT, fontSize: 12.5, fontWeight: '500', color: C.lg2, paddingHorizontal: 2 },
   row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: C.g2 },
   rowText: { fontFamily: FONT, fontSize: 14, color: '#fff' },
   rowSub: { fontFamily: FONT, fontSize: 12, color: C.g4, marginTop: 2 },
@@ -186,5 +266,28 @@ const s = StyleSheet.create({
   nums: { flexDirection: 'row', gap: 16, marginTop: 2 },
   num: { fontFamily: FONT, fontSize: 13, color: C.lg1 },
   numB: { color: '#fff', fontWeight: '600' },
+  // the Pages frame (Figma 2548:101989), at K: two cards of grey-3-ringed #3A3B3C, 20 corners, 15 inside
+  cards: { gap: 20 * K },
+  pcard: { backgroundColor: C.card, borderWidth: 1, borderColor: C.g3, borderRadius: 20 * K, padding: 15 * K, gap: 15 * K },
+  pcardLabel: { fontFamily: FONT, fontSize: 18 * K, fontWeight: '600', color: C.g4 },
+  // the current page's name: its label over a dark field, 60 tall, editable in place — straight on the panel, no card
+  current: { gap: 15 * K },
+  curName: { fontSize: 21 * K, backgroundColor: C.dark, borderRadius: 15 * K, minHeight: 60 * K, paddingVertical: 0, paddingHorizontal: 15 * K, marginLeft: 0 },
+  pageBar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 * K },
+  pageBarLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 * K },
+  // 50-tall pills: Duplicate 125 wide, Delete 70, + Page 125
+  pill: { height: 50 * K, borderRadius: 100, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10 * K, paddingHorizontal: 20 * K },
+  pillGrey: { backgroundColor: C.g3, minWidth: 125 * K },
+  pillRed: { backgroundColor: C.red, minWidth: 70 * K },
+  pillArmed: { paddingHorizontal: 15 * K },
+  // Delete with nothing to delete (the only page): grey-3 like Duplicate, its can faded
+  pillOff: { backgroundColor: C.g3 },
+  iconOff: { opacity: 0.45 },
+  pillYellow: { backgroundColor: C.yellow, minWidth: 125 * K },
+  pillText: { fontFamily: FONT, fontSize: 18 * K, fontWeight: '600' },
+  // a page: its drawing, its name at the foot; dark grey, ringed grey-3 (the current one 3 wide in yellow)
+  tile: { height: TILE_H, backgroundColor: C.dark, borderRadius: 10 * K, borderWidth: 1, borderColor: C.g3, overflow: 'hidden' },
+  tileOn: { borderWidth: 3, borderColor: C.yellow },
+  tileName: { fontFamily: FONT, fontSize: 18 * K, fontWeight: '600', color: '#fff', position: 'absolute', left: 15 * K, right: 15 * K, bottom: 15 * K - 2 },
   empty: { fontFamily: FONT, color: C.g4, fontSize: 13, lineHeight: 20, paddingVertical: 8 },
 });

package/src/react/Duck.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef, useSyncExternalStore, type ReactNode } from 'react';
+import { Animated, Platform, StyleSheet, type 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
+  while a gesture on the drawing is in motion (a stroke, a drag, a pan or pinch that moved; never a tap: see
+  editor/gestures.ts), and comes back as the last finger lifts, so the drawing gets the whole of a small screen. As
+  BOLDR's annotation screen does it: out in 120 ms, back in 200 ms (a gesture that ends mid-fade turns round from
+  where it is), and untouchable while it's away. The fade runs on the native driver, so it stays smooth while the
+  JavaScript thread is busy redrawing the plan under a pinch.
+*/
+
+let moving = false;
+const listeners = new Set<() => void>();
+const subscribe = (fn: () => void) => { listeners.add(fn); return () => { listeners.delete(fn); }; };
+const isMoving = () => moving;
+
+/** A gesture on the drawing is in motion, or not (the editor's `interacting` port). */
+export function setInteracting(on: boolean): void {
+  if (on === moving) return;
+  moving = on;
+  listeners.forEach(fn => fn());
+}
+
+const OUT_MS = 120, IN_MS = 200;
+
+/**
+ * The chrome inside steps aside while a gesture on the drawing moves, when `active` (a phone). `held`: it stays in
+ * view but out of reach — a sheet is up over the drawing (a tablet's or a computer's keypad): a tap on it reaches the
+ * drawing beneath, which closes the sheet, as a tap outside a sheet does.
+ */
+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);
+  useEffect(() => {
+    Animated.timing(opacity, { toValue: away ? 0 : 1, duration: away ? OUT_MS : IN_MS, useNativeDriver: Platform.OS !== 'web' }).start();
+  }, [away, opacity]);
+  useEffect(() => {
+    // in a browser the chrome's own pass-through containers (box-none) turn their children back on, whatever is set
+    // above them: `inert` takes the whole of it out of reach (a device's pointerEvents="none" already does)
+    if (Platform.OS === 'web' && ref.current) (ref.current as unknown as HTMLElement).inert = off;
+  }, [off]);
+  // (an editor closed mid-gesture mustn't leave the next one's chrome away)
+  useEffect(() => () => setInteracting(false), []);
+  return (
+    <Animated.View ref={ref} pointerEvents={off ? 'none' : 'box-none'} aria-hidden={away || undefined} testID="chrome" style={[StyleSheet.absoluteFill, { opacity }]}>
+      {children}
+    </Animated.View>
+  );
+}

package/src/react/Empty3D.tsx

@@ -0,0 +1,32 @@
+import { Text, View } from 'react-native';
+import { planSK } from '../model/store';
+import { useEditorKey } from './store';
+import { C, FONT } from './theme';
+import { createSheet } from './corners';
+
+/** Whether the plan has a wall to stand up (lines and guides stay flat on the plan). */
+function hasWalls(): boolean {
+  const sk = planSK();
+  for (const id in sk.lines) { const l = sk.lines[id]; if (l.kind === 'wall' && !l.constr) return true; }
+  for (const id in sk.arcs) { const a = sk.arcs[id]; if (a.kind === 'wall' && !a.constr) return true; }
+  for (const id in sk.circles) { const c = sk.circles[id]; if (c.kind === 'wall' && !c.constr) return true; }
+  return false;
+}
+
+/** Over an empty 3D view: what it shows, and how to get walls into it. */
+export function Empty3D() {
+  useEditorKey(() => String(hasWalls()));
+  if (hasWalls()) return null;
+  return (
+    <View pointerEvents="none" style={s.wrap} testID="empty3d">
+      <Text style={s.title}>No walls to stand up yet</Text>
+      <Text style={s.sub}>3D shows walls, with their doors, windows and cabinets. In Draft, draw with Walls on, or select lines and tap To wall.</Text>
+    </View>
+  );
+}
+
+const s = createSheet({
+  wrap: { position: 'absolute', left: 24, right: 24, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' },
+  title: { fontFamily: FONT, fontSize: 16, fontWeight: '600', color: C.lg2, textAlign: 'center' },
+  sub: { fontFamily: FONT, fontSize: 13, color: C.g4, textAlign: 'center', marginTop: 6, maxWidth: 360 },
+});

package/src/react/FitScroll.tsx

@@ -0,0 +1,19 @@
+import { useState, type ReactNode } from 'react';
+import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+
+/*
+  A menu's or panel's body: fixed in its box. It neither scrolls nor bounces while everything fits (an iOS ScrollView
+  drags and springs back even when there's nothing more to see); only when the screen is too short to hold it all —
+  a phone turned on its side — does it scroll, without the bounce.
+*/
+export function FitScroll({ children, contentContainerStyle }: { children: ReactNode; contentContainerStyle?: StyleProp<ViewStyle> }) {
+  const [box, setBox] = useState(0), [content, setContent] = useState(0);
+  const over = content > box + 1;
+  return (
+    <ScrollView scrollEnabled={over} bounces={false} alwaysBounceVertical={false} overScrollMode="never"
+      showsVerticalScrollIndicator={over} contentContainerStyle={contentContainerStyle}
+      onLayout={e => setBox(e.nativeEvent.layout.height)} onContentSizeChange={(_, h) => setContent(h)}>
+      {children}
+    </ScrollView>
+  );
+}

package/src/react/Icon.native.tsx

@@ -5,3 +5,8 @@ import { icon } from '../render/icons';
 export function Icon({ name, size = 24, color = '#fff' }: { name: string; size?: number; color?: string }) {
   return <SvgXml xml={icon(name, size)} width={size} height={size} color={color} />;
 }
+
+/** An SVG as Figma exported it (render/figmaIcons.ts), shown at `width` × `height`. */
+export function RawSvg({ xml, width, height }: { xml: string; width: number; height: number }) {
+  return <SvgXml xml={xml} width={width} height={height} />;
+}

package/src/react/Icon.web.tsx

@@ -4,3 +4,8 @@ import { icon } from '../render/icons';
 export function Icon({ name, size = 24, color = '#fff' }: { name: string; size?: number; color?: string }) {
   return <span aria-hidden style={{ display: 'flex', color, lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: icon(name, size) }} />;
 }
+
+/** An SVG as Figma exported it (render/figmaIcons.ts), shown at `width` × `height`. */
+export function RawSvg({ xml, width, height }: { xml: string; width: number; height: number }) {
+  return <span aria-hidden style={{ display: 'flex', width, height, lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: xml.replace(/width="[^"]*" height="[^"]*"/, `width="${width}" height="${height}"`) }} />;
+}