@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/react/Rail.tsx

@@ -1,45 +1,378 @@
-import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { toolTip } from '../editor/tooltips';
+import { notify, ui, useEditorKey } from './store';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Dimensions, Platform, ScrollView, StyleSheet, View } from 'react-native';
 import { redo, undo } from '../app/edit';
 import { ed } from '../app/state';
-import { RAIL, toggleConstr } from '../editor/mode';
-import { openPalette, toast } from '../editor/ports';
+import { groupTools, RAIL, railIcon, railItems, TOGGLES, TOOL_GROUPS, toolLabel, type RailItem } from '../editor/mode';
+import { markupTarget } from '../editor/markup';
+import { elevOpen } from '../editor/elevation';
+import { openPalette } from '../editor/ports';
 import { setTool } from '../tools/registry';
+import { addLinks, LINK_PLUS_LABEL, linkPlusVisible } from '../editor/linkActions';
+import { canLink } from '../editor/links';
 import { hovered } from './Buttons';
 import { Icon } from './Icon';
 import { C, shadow } from './theme';
+import { EASE, DURATION, Tap, TOGGLE_EASE, useEased } from './motion';
+import { NATIVE } from './easing';
+import { TweenView } from './Tween';
+import { createSheet } from './corners';
+
+/** A rail button's icon, fading from white to dark as it's selected (two icons, crossfaded). */
+const RailIcon = memo(function RailIcon({ name, size, on }: { name: string; size: number; on: boolean }) {
+  const t = useEased(on), off = useMemo(() => t.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }), [t]);
+  return (
+    <View style={{ width: size, height: size }}>
+      <Animated.View style={[StyleSheet.absoluteFill, { opacity: off }]}><Icon name={name} size={size} color="#fff" /></Animated.View>
+      <Animated.View style={[StyleSheet.absoluteFill, { opacity: t }]}><Icon name={name} size={size} color={C.dark} /></Animated.View>
+    </View>
+  );
+});
+
+/**
+ * The selected tool's white disc: it glides from tool to tool (and fades when the tool isn't on the rail), moved by a
+ * transform so the glide runs on the native driver. Where it goes is worked out from the rail's own layout, not
+ * measured: a button that moves without changing size reports no new layout (react-native-web), which left the disc
+ * between buttons.
+ */
+function useGlide(top: number | null) {
+  const y = useRef(new Animated.Value(0)).current, o = useRef(new Animated.Value(0)).current, seen = useRef(false);
+  useEffect(() => {
+    const go = (v: Animated.Value, to: number) => Animated.timing(v, { toValue: to, duration: DURATION, easing: EASE, useNativeDriver: NATIVE }).start();
+    if (top == null) { go(o, 0); return; }
+    if (!seen.current) { y.setValue(top); o.setValue(1); seen.current = true; return; }
+    go(y, top); go(o, 1);
+  }, [top]); // eslint-disable-line react-hooks/exhaustive-deps
+  return { y, o };
+}
+
+/**
+ * INSET: the space around the buttons, the same at the ends as at the sides, so the end buttons sit concentric in the
+ * pill. GAP: the space between buttons — kept, not spread to fill a tall screen (less only where the screen is short).
+ */
+const BTN = 40, MIN_BTN = 32, DIV = 11, INSET = 6, PAD = 2 * INSET, GAP = 5;
+/**
+ * On a tablet the rail is bigger than on a computer (44 pt buttons, easy to hit with a finger, the same eighth of a
+ * button apart) and keeps its proportions as it sizes: dividers, padding and icons follow the buttons. It's sized for
+ * the room it has in landscape and stays that size in portrait, so it looks the same whichever way the tablet is held:
+ * where landscape is short the space between buttons tightens first, to a twelfth of a button at least, and then the
+ * whole rail scales down — 44 pt buttons on a 13" iPad Pro, 41 pt on an 11" iPad, 36 pt on an iPad mini. A tablet's
+ * rail never scrolls: TABLET_MIN_BTN is below what the smallest iPad needs.
+ */
+const TABLET_BTN = 44, TABLET_MIN_BTN = 30;
+const PER_BTN = { gapMax: 0.12, gapMin: 0.08, div: 0.275, pad: (2 * INSET) / BTN, icon: 0.6 };
+
+export interface TabletRail { size: number; gap: number; div: number; pad: number; icon: number }
+
+/**
+ * The room a tablet's rail is sized for: its room in landscape — what it has when held that way, and in portrait less
+ * the difference between the window's sides. From one layout (the window read with the room): the same either way the
+ * tablet is held, so the rail doesn't change as it's turned.
+ */
+export function landscapeRoom(height: number, winW: number, winH: number): number {
+  return height - Math.max(0, winH - Math.min(winW, winH));
+}
+
+/** The tablet rail for `height` of room: 44 pt buttons an eighth apart, tighter gaps then smaller to fit. */
+export function tabletRailLayout(height: number, buttons: number, dividers: number): TabletRail {
+  const spaces = buttons + dividers - 1;
+  // height per point of button size, before the gaps: the buttons, the dividers and the padding
+  const base = buttons + dividers * PER_BTN.div + PER_BTN.pad;
+  let size = TABLET_BTN, gap = PER_BTN.gapMax;
+  if (height) {
+    const room = height / TABLET_BTN - base; // what's left for gaps at full size, per point of button
+    if (room < spaces * PER_BTN.gapMax) {
+      gap = Math.max(PER_BTN.gapMin, room / spaces);
+      if (room < spaces * PER_BTN.gapMin) size = Math.floor(height / (base + spaces * gap));
+    }
+  }
+  size = Math.max(TABLET_MIN_BTN, Math.min(TABLET_BTN, size));
+  return {
+    size,
+    gap: Math.round(size * gap),
+    div: Math.round(size * PER_BTN.div),
+    pad: Math.round(size * PER_BTN.pad),
+    icon: Math.round(size * PER_BTN.icon),
+  };
+}
+
+/**
+ * Buttons and the space between them for a rail `height` tall: on a computer GAP apart, closer on a short screen, and
+ * on a shorter one still the buttons shrink to fit before it has to scroll. Phones keep the compact rail, scrolling
+ * when it must.
+ */
+export function railLayout(height: number, buttons: number, dividers: number, phone: boolean): { size: number; gap: number } {
+  if (phone || !height || buttons < 2) return { size: BTN, gap: 0 };
+  const natural = buttons * BTN + dividers * DIV + PAD;
+  if (height < natural) {
+    return { size: Math.max(MIN_BTN, Math.floor((height - dividers * DIV - PAD) / buttons)), gap: 0 };
+  }
+  return { size: BTN, gap: Math.min(GAP, Math.floor((height - natural) / (buttons + dividers - 1))) };
+}
+
+/**
+ * The rail's room on a tablet or a computer: from 30 under the top bar's buttons (their 58) to 14 above the bottom.
+ * The rail hangs from the top of it, whatever its tools and whichever way a tablet is held: its first button (Select)
+ * never moves, and a shorter rail just ends sooner.
+ */
+const RAIL_TOP = 58 + 30, RAIL_BOTTOM = 14;
+
+/** How long the rail takes to change from one tool set to another (switching between Draft and Annotate). */
+const MORPH = 240, FADE_OUT = 130, FADE_IN_AT = 70;
+/** Annotate's + sits this far under the rail, as wide as the rail is. */
+const PLUS_GAP = 10;
+
+/** A value that follows `to`, easing to each new one (set at once the first time), on the native driver. */
+function useMorphed(to: number): Animated.Value {
+  const v = useRef(new Animated.Value(to)).current;
+  useEffect(() => { Animated.timing(v, { toValue: to, duration: MORPH, easing: EASE, useNativeDriver: NATIVE }).start(); }, [to, v]);
+  return v;
+}
+
+/**
+ * What one place on the rail shows, all as plain values: a divider (`id` null), or a tool, toggle or action. A place
+ * re-renders only when one of them changes — picking a tool redraws the two places whose selection changed, not the
+ * whole rail (each of which took its share of a phone's frame).
+ */
+interface SlotProps {
+  y: number; appear: boolean; leaving?: boolean;
+  id: string | null; label: string; kind?: 'toggle' | 'act' | 'group'; tool: string; on: boolean;
+  size: number; icon: number; unit: number; div: number;
+  /** the markup colour's dot (the Color place) */
+  dot: string | null;
+  /** where a shared place's menu opens: beside it */
+  menuX: number; menuY: number;
+  onAddImage: () => void;
+}
+
+/**
+ * One place on the rail. As the tool set changes it glides to where it now sits; a place new to this tool set fades
+ * (and grows a touch) in, and one that's gone fades out — so switching modes, the rail morphs rather than redraws.
+ * It moves by a transform, on the native driver.
+ */
+const RailSlot = memo(function RailSlot(p: SlotProps) {
+  const top = useMorphed(p.y), vis = useRef(new Animated.Value(p.appear ? 0 : 1)).current;
+  const scale = useMemo(() => vis.interpolate({ inputRange: [0, 1], outputRange: [0.88, 1] }), [vis]);
+  // what goes clears quickly, and what comes fades in just behind it, so the two never sit on top of each other
+  useEffect(() => {
+    // (fades ease in and out: a fast start reads as a blink on something appearing or going)
+    Animated.timing(vis, p.leaving ? { toValue: 0, duration: FADE_OUT, easing: TOGGLE_EASE, useNativeDriver: NATIVE }
+      : { toValue: 1, duration: MORPH - FADE_IN_AT, delay: p.appear ? FADE_IN_AT : 0, easing: TOGGLE_EASE, useNativeDriver: NATIVE }).start();
+  }, [p.leaving, vis]); // eslint-disable-line react-hooks/exhaustive-deps
+  return (
+    <Animated.View pointerEvents={p.leaving ? 'none' : 'box-none'} aria-hidden={p.leaving || undefined}
+      style={[s.slot, { opacity: vis, transform: [{ translateY: top }, { scale }] }]}>
+      {p.id == null ? <View style={[s.div, { width: 28 * p.unit, marginVertical: (p.div - 1) / 2 }]} /> : <RailEntry {...p} />}
+    </Animated.View>
+  );
+});
+
+/**
+ * A tool, toggle or action on the rail, and what a press does. A place several tools share draws with the one it shows
+ * on a tap, and opens the menu of them all on a long press; with a mouse (a browser on a computer) a click opens the
+ * menu instead — a mouse has no long press to find. A browser on a phone or an iPad keeps the touch behaviour.
+ */
+const MENU_ON_CLICK = Platform.OS === 'web' && typeof matchMedia === 'function' && matchMedia('(hover: hover) and (pointer: fine)').matches;
+function RailEntry({ id, label, kind, tool, on, size, icon, unit, dot, menuX, menuY, onAddImage, leaving }: SlotProps) {
+  const group = kind === 'group';
+  const press = () => {
+    if (group && MENU_ON_CLICK) {
+      // a second click closes it again
+      if (ui.shapeMenu?.group === id) { ui.shapeMenu = null; notify(); } else openMenu();
+      return;
+    }
+    ui.shapeMenu = null;
+    if (kind === 'toggle') TOGGLES[id!]?.flip();
+    else if (kind === 'act') {
+      if (id === 'undo') undo(); else if (id === 'redo') redo(); else if (id === 'image') onAddImage(); else if (id === 'color') openPalette();
+    } else setTool(tool);
+    // what it does, in a line under the tabs (for a tool or a toggle; not Undo, a colour, an action)
+    const t = kind === 'act' ? null : toolTip(tool, label);
+    if (t) ui.toolTip = { text: t, seq: (ui.toolTip?.seq ?? 0) + 1 };
+    notify();
+  };
+  // the menu of the place's tools, beside the rail level with it
+  const openMenu = () => {
+    setTool(tool);
+    ui.menu = false; ui.palette = false;
+    ui.shapeMenu = { x: menuX, y: menuY, group: id! };
+    notify();
+  };
+  return (
+    <RailButton id={id!} label={label} on={on} toggle={kind === 'toggle'} size={size} onPress={press} testID={leaving ? undefined : 'tool-' + id}
+      onLongPress={group ? openMenu : undefined} hint={group ? (MENU_ON_CLICK ? 'Opens the other shapes' : 'Touch and hold for the other shapes') : undefined}>
+      {id === 'color'
+        ? <View style={[s.dot, { width: 20 * unit, height: 20 * unit, borderRadius: 10 * unit, backgroundColor: dot ?? undefined }]} />
+        : <RailIcon name={railIcon(tool)} size={icon} on={on} />}
+    </RailButton>
+  );
+}
+
+/** A rail item's place: a tool keeps its place across tool sets when it's the same tool (Select / Select markup). */
+const slotKey = (it: RailItem, divider: number): string => (it === '|' ? 'd' + divider : it[0] === 'aselect' ? 'select' : it[0]);
+interface Placed { key: string; y: number; it: RailItem }
 
 /** The tool rail on the left: the current mode's tools, toggles and actions. */
 export function Rail({ phone, onAddImage }: { phone: boolean; onAddImage?: () => void }) {
-  const items = RAIL[ed.mode].filter(it => it === '|' || it[0] !== 'image' || onAddImage);
+  // its tools (the mode's or the wall view's), the one in use, the toggles, the markup colour, the shape
+  useEditorKey(() => [ed.mode, elevOpen(), ed.tool, ed.drawConstr, ed.drawWalls, markupTarget().color, JSON.stringify(ui.picked), canLink(), linkPlusVisible()].join('|'));
+  // (shapes share one place: Annotate's always, Draft's on a phone, which has no room for each)
+  const usable = (list: RailItem[]) => groupTools(list.filter(it => it === '|' || it[0] !== 'image' || onAddImage), phone);
+  const items = usable(railItems());
+  // the room it has, as last laid out, and the window it was laid out in — read at that same moment. A tablet turned
+  // changes the window at once and the room a layout later: the two taken together (a portrait room in a landscape
+  // window) shrank the rail to nothing and grew it back as it turned.
+  const [room, setRoom] = useState({ height: 0, y: 0, winW: 0, winH: 0 });
+  const { height, y: railY } = room;
+  // the tool a shared place draws with: the one in use, or the last picked
+  const pickedIn = (g: string) => (TOOL_GROUPS[g].tools.includes(ed.tool) ? ed.tool : ui.picked[g]);
+  const tablet = Platform.OS !== 'web' && !phone;
+  // a tablet's rail keeps its proportions as it sizes; elsewhere the 40 pt rail closes up or shrinks to fit
+  // the rail's room in landscape: the same as now when held that way; in portrait, less by the difference between the sides
+  const landscapeHeight = landscapeRoom(height, room.winW, room.winH);
+  const layoutOf = (list: RailItem[], less = 0) => {
+    const dividers = list.filter(it => it === '|').length, buttons = list.length - dividers;
+    return tablet ? tabletRailLayout(landscapeHeight - less, buttons, dividers) : { ...railLayout(height - less, buttons, dividers, phone), div: DIV, pad: PAD, icon: 24 };
+  };
+  type Layout = ReturnType<typeof layoutOf>;
+  const tightest = (ls: Layout[]) => ls.reduce((a, b) => (b.size < a.size || (b.size === a.size && b.gap < a.gap) ? b : a));
+  const lengthOf = (list: RailItem[], l: Layout) => list.reduce((h, it) => h + (it === '|' ? l.div : l.size) + l.gap, 0) - l.gap + 2 * INSET * (l.size / BTN);
+  const pillWidth = (l: Layout) => l.size + 2 * INSET * (l.size / BTN);
+  // one spacing for every tool set — the one the longest rail (Draft's) can fit — so a shorter rail is just shorter
+  let L = tightest([items, usable(RAIL.draft), usable(RAIL.annotate)].map(l => layoutOf(l)));
+  // with a host that links, Annotate's rail leaves room under it for the + — or, where even a smaller rail wouldn't
+  // (a short window), the + floats in the corner instead
+  let plusUnder = false;
+  if (!phone && canLink() && height > 0) {
+    const annotate = usable(RAIL.annotate), withPlus = tightest([L, layoutOf(annotate, PLUS_GAP + pillWidth(L))]);
+    if (lengthOf(annotate, withPlus) + PLUS_GAP + pillWidth(withPlus) <= height + 0.5) { L = withPlus; plusUnder = true; }
+  }
+  const fab = !phone && canLink() && height > 0 && !plusUnder;
+  useEffect(() => { if (ui.linkFab !== fab) { ui.linkFab = fab; notify(); } }, [fab]);
+  const { size, gap, icon } = L, unit = size / BTN;
+  // where each item sits: the rail's top padding, then each button or divider above it and the gap after it
+  // (the space above the first button is the space beside it: the pill's ends are concentric with the end buttons)
+  const inset = INSET * unit;
+  let y = inset, dn = 0;
+  const placed: Placed[] = items.map(it => { const p = { key: slotKey(it, dn), y, it }; if (it === '|') dn++; y += (it === '|' ? L.div : size) + gap; return p; });
+  const total = y - gap + inset, width = size + 2 * inset, radius = size / 2 + inset;
+  // what was on the rail and isn't now fades out where it was — worked out in this same render, so it never drops
+  // out for a frame before fading (that read as a flicker)
+  const prev = useRef<Placed[]>(placed), leaving = useRef<{ items: Placed[]; seq: number }>({ items: [], seq: 0 }), mounted = useRef(false);
+  const keys = placed.map(p => p.key).join(), [, rerender] = useState(0);
+  if (keys !== prev.current.map(p => p.key).join()) {
+    const now = new Set(placed.map(p => p.key));
+    const gone = [...prev.current.filter(p => !now.has(p.key)), ...leaving.current.items.filter(p => !now.has(p.key))];
+    leaving.current = { items: gone.filter((p, i) => gone.findIndex(q => q.key === p.key) === i), seq: leaving.current.seq + 1 };
+    prev.current = placed;
+  }
+  const seq = leaving.current.seq;
+  useEffect(() => {
+    if (!leaving.current.items.length) return;
+    const t = setTimeout(() => { if (leaving.current.seq === seq) { leaving.current = { items: [], seq }; rerender(n => n + 1); } }, MORPH + 20);
+    return () => clearTimeout(t);
+  }, [seq]);
+  // (what's on the rail when it's first shown is just there; what comes later fades in)
+  useEffect(() => { if (height) mounted.current = true; }, [height]);
+  const isOn = (id: string) => id === ed.tool || !!TOOL_GROUPS[id]?.tools.includes(ed.tool);
+  const sel = placed.find(p => p.it !== '|' && (!p.it[3] || p.it[3] === 'group') && isOn(p.it[0]));
+  const glide = useGlide(sel ? sel.y : null);
+  // (one function for every render, so the places' props stay equal: the host's own may be new each time)
+  const addImage = useRef(onAddImage);
+  addImage.current = onAddImage;
+  const onAdd = useCallback(() => addImage.current?.(), []);
+  /** A place's props: plain values only (see SlotProps). */
+  const slot = (p: Placed, isLeaving: boolean): SlotProps => {
+    const common = { y: p.y, appear: !isLeaving && mounted.current, leaving: isLeaving, size, icon, unit, div: L.div, onAddImage: onAdd };
+    if (p.it === '|') return { ...common, id: null, label: '', tool: '', on: false, dot: null, menuX: 0, menuY: 0 };
+    const [id, rawLabel, , kind] = p.it, group = kind === 'group';
+    // a shared place stands for the tool it'll draw with
+    const tool = group ? pickedIn(id) : id;
+    return {
+      ...common, id, kind, tool, label: group ? toolLabel(tool) : rawLabel,
+      on: !isLeaving && (kind === 'toggle' ? !!TOGGLES[id]?.on() : isOn(id)),
+      dot: id === 'color' ? markupTarget().color : null,
+      // (the rail's own place, plus where this sits on it)
+      menuX: group ? 12 + width + 10 : 0, menuY: group ? railY + p.y : 0,
+    };
+  };
   return (
-    <View style={[s.rail, phone && { top: 162 }]}>
-      <ScrollView contentContainerStyle={s.inner} showsVerticalScrollIndicator={false}>
-        {items.map((it, i) => {
-          if (it === '|') return <View key={'d' + i} style={s.div} />;
-          const [id, label, , kind] = it;
-          const on = id === ed.tool || (id === 'constr' && ed.drawConstr);
-          const press = () => {
-            if (kind === 'toggle') { toggleConstr(); toast(ed.drawConstr ? 'New lines are construction lines — guides that never make spaces.' : 'New lines are regular lines.'); }
-            else if (kind === 'act') {
-              if (id === 'undo') undo(); else if (id === 'redo') redo(); else if (id === 'image') onAddImage?.(); else if (id === 'color') openPalette();
-            } else setTool(id);
-          };
-          return (
-            <Pressable key={id} accessibilityRole="button" accessibilityLabel={label} accessibilityState={{ selected: on }} testID={'tool-' + id} onPress={press}
-              style={st => [s.btn, on ? { backgroundColor: kind === 'toggle' ? C.lblue : '#fff' } : hovered(st) && { backgroundColor: 'rgba(255,255,255,0.08)' }]}>
-              {id === 'color' ? <View style={[s.dot, { backgroundColor: ed.noteColor }]} /> : <Icon name={id} color={on ? C.dark : '#fff'} />}
-            </Pressable>
-          );
-        })}
-      </ScrollView>
+    // (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 => {
+      const { height: h, y: top } = e.nativeEvent.layout, w = Dimensions.get('window');
+      setRoom({ height: h, y: top, winW: w.width, winH: w.height });
+    }}>
+      {/* the pill eases to its new length as the tool set changes (on the UI thread on a device: see TweenView). It's
+          shown once its room is known, at the size that room gives it: no settling as it opens. */}
+      {height > 0 && <TweenView testID="railPill" to={{ height: total }} duration={MORPH} style={[s.inner, { width, maxHeight: '100%', borderRadius: radius }]}>
+        {/* it scrolls only when its tools can't all fit (a phone): otherwise a drag down the rail would move it */}
+        <ScrollView style={{ flex: 1, borderRadius: radius }} contentContainerStyle={{ height: total }} showsVerticalScrollIndicator={false}
+          scrollEnabled={!!height && total > height + 1} bounces={false}>
+          {sel && <Animated.View pointerEvents="none" style={[s.disc, { left: inset, width: size, height: size, borderRadius: size / 2, opacity: glide.o, transform: [{ translateY: glide.y }] }]} />}
+          {leaving.current.items.map(p => <RailSlot key={'gone-' + p.key} {...slot(p, true)} />)}
+          {placed.map(p => <RailSlot key={p.key} {...slot(p, false)} />)}
+        </ScrollView>
+      </TweenView>}
+      {height > 0 && plusUnder && <RailPlus top={Math.min(total, height) + PLUS_GAP} size={width} shown={linkPlusVisible()} />}
     </View>
   );
 }
 
-const s = StyleSheet.create({
-  rail: { position: 'absolute', left: 12, top: 112, bottom: 84, zIndex: 22, alignItems: 'flex-start' },
-  inner: { backgroundColor: C.g2, borderRadius: 30, paddingVertical: 8, paddingHorizontal: 6, alignItems: 'center', ...shadow },
+/**
+ * Annotate's +, under the rail: picks the job's files and measurements to put on the plan. It follows the rail's end as
+ * the rail changes length, and fades in and out with Annotate's tools (all on the native driver).
+ */
+const RailPlus = memo(function RailPlus({ top, size, shown }: { top: number; size: number; shown: boolean }) {
+  const y = useMorphed(top), vis = useRef(new Animated.Value(shown ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(vis, shown ? { toValue: 1, duration: MORPH - FADE_IN_AT, delay: FADE_IN_AT, easing: TOGGLE_EASE, useNativeDriver: NATIVE }
+      : { toValue: 0, duration: FADE_OUT, easing: TOGGLE_EASE, useNativeDriver: NATIVE }).start();
+  }, [shown, vis]);
+  return (
+    <Animated.View pointerEvents={shown ? 'box-none' : 'none'} aria-hidden={!shown || undefined} style={[s.plusAt, { opacity: vis, transform: [{ translateY: y }] }]}>
+      <Tap accessibilityRole="button" accessibilityLabel={LINK_PLUS_LABEL} testID={shown ? 'linkPlus' : undefined} onPress={() => { void addLinks(); }}
+        style={[s.plus, { width: size, height: size, borderRadius: size / 2 }]}>
+        <Icon name="plus" size={Math.round(size * 0.5)} color={C.dark} />
+      </Tap>
+    </Animated.View>
+  );
+});
+
+/**
+ * A rail button: a tool sits on the gliding disc when selected; a toggle fades its own blue in and out. One that opens
+ * a menu on a long press has a small nub on its right edge, pointing where the menu opens (as in BOLDR's annotation rail).
+ */
+function RailButton({ id, label, on, toggle, size, onPress, onLongPress, hint, children, testID }: {
+  id: string; label: string; on: boolean; toggle: boolean; size: number; onPress: () => void; onLongPress?: () => void; hint?: string;
+  children: React.ReactNode; testID?: string;
+}) {
+  const t = useEased(on && toggle);
+  const fill = useMemo(() => t.interpolate({ inputRange: [0, 1], outputRange: ['rgba(80,166,255,0)', C.lblue] }), [t]);
+  return (
+    <Tap accessibilityRole="button" accessibilityLabel={label} accessibilityHint={hint} accessibilityState={{ selected: on }} aria-pressed={toggle ? on : undefined} testID={testID}
+      onPress={onPress} onLongPress={onLongPress}
+      style={st => [s.btn, { width: size, height: size, borderRadius: size / 2 },
+        toggle && { backgroundColor: fill as unknown as string },
+        !on && hovered(st) && { backgroundColor: 'rgba(255,255,255,0.08)' }]}>
+      {children}
+      {onLongPress && <View pointerEvents="none" style={[s.nub, { top: size / 2 - 4 }, on && { borderLeftColor: C.dark }]} />}
+    </Tap>
+  );
+}
+
+const s = createSheet({
+  // (both moved by a transform from the top: see useGlide, RailSlot)
+  disc: { position: 'absolute', top: 0, backgroundColor: '#fff' },
+  rail: { position: 'absolute', left: 12, top: RAIL_TOP, bottom: RAIL_BOTTOM, zIndex: 22, alignItems: 'flex-start' },
+  inner: { backgroundColor: C.g2, ...shadow },
+  slot: { position: 'absolute', top: 0, left: 0, right: 0, alignItems: 'center' },
   btn: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
   div: { width: 28, height: 1, backgroundColor: C.g3, marginVertical: 5 },
+  // a right-pointing triangle, 8 tall, hugging the right edge
+  nub: { position: 'absolute', right: 3, width: 0, height: 0, borderTopWidth: 4, borderBottomWidth: 4, borderLeftWidth: 5, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderLeftColor: 'rgba(255,255,255,0.75)' },
   dot: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: 'rgba(255,255,255,0.85)' },
+  // (moved by a transform from the rail's top: see RailPlus)
+  plusAt: { position: 'absolute', top: 0, left: 0 },
+  plus: { backgroundColor: C.yellow, alignItems: 'center', justifyContent: 'center', ...shadow },
 });

package/src/react/ShapeMenu.tsx

@@ -0,0 +1,66 @@
+import { useRef } from 'react';
+import { Animated, Text, useWindowDimensions, View } from 'react-native';
+import { ed } from '../app/state';
+import { railIcon, TOOL_GROUPS, toolLabel } from '../editor/mode';
+import { toolTip } from '../editor/tooltips';
+import { setTool } from '../tools/registry';
+import { Icon } from './Icon';
+import { notify, ui, useEditorKey } from './store';
+import { C, FONT, shadow } from './theme';
+import { Tap, usePopup } from './motion';
+import { createSheet } from './corners';
+
+const ROW = 44, GAP = 6, PAD = 8;
+/** A menu's height for `n` rows: the rows, the gaps between them, its padding and border. */
+const heightFor = (n: number) => n * ROW + (n - 1) * GAP + 2 * PAD + 2;
+
+/**
+ * The menu of the tools sharing one place on the rail (a long press on it; a click in a browser) — Draft's shapes on a
+ * phone, Annotate's markup shapes: each by icon and name, the one in use on a blue disc, as BOLDR's annotation rail lays out its sub-menus. Picking one draws with it from then on, and the rail's
+ * place shows it. It sits beside the rail, level with the place; there's no scrim, and a tap on the drawing, the rail
+ * or the top bar closes it.
+ */
+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 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');
+  if (open) last.current = now;
+  const at = last.current, group = at ? TOOL_GROUPS[at.group] : null;
+  if (!pop.present || !at || !group) return null;
+  // (lifted to stay on screen when the place sits low)
+  const top = Math.max(12, Math.min(at.y - PAD, height - heightFor(group.tools.length) - 96));
+  const pick = (id: string) => {
+    ui.picked[at.group] = id;
+    ui.shapeMenu = null;
+    setTool(id);
+    const t = toolTip(id, toolLabel(id));
+    if (t) ui.toolTip = { text: t, seq: (ui.toolTip?.seq ?? 0) + 1 };
+    notify();
+  };
+  return (
+    <Animated.View style={[s.menu, { left: at.x, top }, pop.style]} pointerEvents={open ? 'auto' : 'none'} accessibilityRole="menu" accessibilityLabel={group.label} testID={open ? 'shapeMenu' : undefined}>
+      {group.tools.map(id => {
+        const on = ed.tool === id;
+        return (
+          <Tap key={id} feel="dim" accessibilityRole="menuitem" accessibilityLabel={toolLabel(id)} accessibilityState={{ selected: on }}
+            onPress={() => pick(id)} style={s.row} testID={'shape-' + id}>
+            <View style={[s.disc, on && { backgroundColor: C.blue }]}><Icon name={railIcon(id)} color="#fff" /></View>
+            <Text style={s.label}>{toolLabel(id)}</Text>
+          </Tap>
+        );
+      })}
+    </Animated.View>
+  );
+}
+
+const s = createSheet({
+  menu: {
+    position: 'absolute', zIndex: 46, backgroundColor: C.g2, borderColor: C.g3, borderWidth: 1, borderRadius: 30,
+    padding: PAD, gap: GAP, ...shadow,
+  },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 12, height: ROW, paddingRight: 24, borderRadius: ROW / 2 },
+  disc: { width: ROW, height: ROW, borderRadius: ROW / 2, alignItems: 'center', justifyContent: 'center' },
+  label: { fontFamily: FONT, fontSize: 16, fontWeight: '500', color: '#fff' },
+});

package/src/react/Sheet.tsx

@@ -1,12 +1,51 @@
-import type { ReactNode } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
+import { EASE, NATIVE } from './easing';
+import { POP_EASE_OUT, POP_IN, POP_OUT, reducedMotion } from './motion';
 import { ui } from './store';
 import { C } from './theme';
+import { createSheet } from './corners';
 
 /** Taps on the backdrop right after a sheet opens are the opening tap's ghost click (touch screens): ignore them. */
 const GHOST_MS = 450;
 
-/** Dims the drawing behind a sheet on phones; a tap outside closes the sheet. */
+/**
+ * How a sheet (the keypad, a conflict) comes and goes. On a tablet or a computer it's a card in the corner, and comes
+ * and goes as the popup menus do (motion.tsx usePopup): fading in and growing from just under its size out of its
+ * corner, rising a few points, in about 140 ms; fading and shrinking back, gathering pace, in about 100. On a phone it
+ * rises from the bottom as it fades in. A transform and opacity, on the native driver; with Reduce Motion on, it only
+ * fades. `present`: on screen — shown, or still going (it keeps what it showed till then).
+ */
+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'>> } {
+  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] });
+    if (reducedMotion()) return { opacity };
+    return (wide
+      ? {
+        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'>>;
+  }, [wide, x]);
+  useEffect(() => {
+    if (shown) setPresent(true);
+    // (on the next frame: see Drawer — strict mode's second mount would otherwise stop it)
+    const frame = requestAnimationFrame(() => {
+      Animated.timing(x, shown
+        ? { toValue: 0, duration: wide ? POP_IN : SHEET_IN, easing: EASE, useNativeDriver: NATIVE }
+        : { toValue: 1, duration: wide ? POP_OUT : SHEET_OUT, easing: wide ? POP_EASE_OUT : SHEET_EASE_OUT, useNativeDriver: NATIVE })
+        .start(({ finished }) => { if (finished && !shown) setPresent(false); });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [shown, wide, x]);
+  return { present: shown || present, motion };
+}
+
+/** Dims the drawing behind a sheet on a phone; a tap outside closes the sheet. (Elsewhere the drawing stays in reach.) */
 export function Backdrop({ wide, onClose }: { wide: boolean; onClose: () => void }) {
   return (
     <Pressable accessibilityLabel="Close" testID="backdrop" style={[StyleSheet.absoluteFill, s.backdrop, wide && { backgroundColor: 'transparent' }]}
@@ -14,20 +53,26 @@ export function Backdrop({ wide, onClose }: { wide: boolean; onClose: () => void
   );
 }
 
-/** A sheet: a card in the bottom-right corner on wide screens, a bottom sheet on phones. */
-export function Sheet({ wide, children, label, testID }: { wide: boolean; children: ReactNode; label: string; testID?: string }) {
+/**
+ * A sheet: a card in the bottom-right corner on wide screens, a bottom sheet on phones. `motion`: a transform (and
+ * opacity) it's moved by as it comes and goes; `live` false while it's going (nothing in it can be pressed).
+ */
+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;
+}) {
   return (
-    <View accessibilityLabel={label} testID={testID} style={[s.sheet, wide ? s.card : s.bottom]}>
+    <Animated.View accessibilityLabel={label} testID={testID} pointerEvents={live ? 'auto' : 'none'} style={[s.sheet, wide ? s.card : s.bottom, motion]}>
       {!wide && <View style={s.handle} />}
       {children}
-    </View>
+    </Animated.View>
   );
 }
 
-const s = StyleSheet.create({
+const s = createSheet({
   backdrop: { backgroundColor: 'rgba(0,0,0,0.35)', zIndex: 55 },
-  sheet: { position: 'absolute', backgroundColor: C.g1, paddingTop: 12, paddingHorizontal: 18, paddingBottom: 18, zIndex: 60, maxHeight: '88%' },
-  card: { right: 16, bottom: 16, width: 380, borderRadius: 20 },
-  bottom: { left: 0, right: 0, bottom: 0, borderTopLeftRadius: 20, borderTopRightRadius: 20 },
+  sheet: { position: 'absolute', backgroundColor: C.g1, borderColor: C.g3, borderWidth: 1, paddingTop: 14, paddingHorizontal: 16, paddingBottom: 16, zIndex: 60, maxHeight: '88%', boxShadow: '0px 5px 15px rgba(0, 0, 0, 0.75)' },
+  card: { right: 16, bottom: 16, width: 360, borderRadius: 20, paddingTop: 16 },
+  bottom: { left: 0, right: 0, bottom: 0, borderTopLeftRadius: 20, borderTopRightRadius: 20, borderBottomWidth: 0 },
   handle: { width: 50, height: 5, borderRadius: 3, backgroundColor: C.g4, alignSelf: 'center', marginBottom: 14 },
 });

package/src/react/Slider.tsx

@@ -0,0 +1,48 @@
+import { useRef, useState } from 'react';
+import { View, type GestureResponderEvent, type LayoutChangeEvent } from 'react-native';
+import { C } from './theme';
+import { createSheet } from './corners';
+
+/**
+ * A horizontal slider: drag (or tap) along the track; the screen reader's adjust gestures step it. `onStart` comes once
+ * as a drag begins (an undo step), `onChange` as the value moves, `onEnd` as it's let go. Values snap to `step`
+ * between `min` and `max`.
+ */
+export function Slider({ value, min, max, step, onChange, onStart, onEnd, label, testID, format = v => v + '%' }: {
+  value: number; min: number; max: number; step: number; onChange: (v: number) => void; onStart?: () => void; onEnd?: () => void; label: string; testID?: string;
+  /** the value as a screen reader says it (percent unless given) */
+  format?: (v: number) => string;
+}) {
+  const width = useRef(0), [, setW] = useState(0);
+  const snap = (v: number) => Math.min(max, Math.max(min, Math.round(v / step) * step));
+  // the thumb and fill take no touches, so a touch's x is always measured from the track's left edge
+  const at = (e: GestureResponderEvent) => snap(min + (e.nativeEvent.locationX / (width.current || 1)) * (max - min));
+  const t = (value - min) / (max - min);
+  return (
+    <View
+      accessibilityRole="adjustable" accessibilityLabel={label} testID={testID}
+      accessibilityValue={{ min, max, now: value, text: format(value) }}
+      onAccessibilityAction={e => { onChange(snap(value + (e.nativeEvent.actionName === 'increment' ? step : -step))); onEnd?.(); }}
+      accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+      onLayout={(e: LayoutChangeEvent) => { width.current = e.nativeEvent.layout.width; setW(width.current); }}
+      onStartShouldSetResponder={() => true} onMoveShouldSetResponder={() => true} onResponderTerminationRequest={() => false}
+      onResponderGrant={e => { onStart?.(); onChange(at(e)); }}
+      onResponderMove={e => onChange(at(e))}
+      onResponderRelease={() => onEnd?.()} onResponderTerminate={() => onEnd?.()}
+      style={s.hit}>
+      <View style={s.track} pointerEvents="none">
+        <View style={[s.fill, { width: `${t * 100}%` }]} />
+      </View>
+      <View pointerEvents="none" style={[s.thumb, { left: `${t * 100}%` }]} />
+    </View>
+  );
+}
+
+const THUMB = 22;
+const s = createSheet({
+  // a tall hit area around a thin track
+  hit: { height: 36, justifyContent: 'center', marginHorizontal: THUMB / 2 },
+  track: { height: 4, borderRadius: 2, backgroundColor: C.g3, overflow: 'hidden' },
+  fill: { height: 4, backgroundColor: '#fff' },
+  thumb: { position: 'absolute', top: (36 - THUMB) / 2, width: THUMB, height: THUMB, marginLeft: -THUMB / 2, borderRadius: THUMB / 2, backgroundColor: '#fff', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.3)' },
+});