@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/react/BottomBar.tsx

@@ -1,84 +1,301 @@
-import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { memo, useRef, useState } from 'react';
+import { Animated, ScrollView, Text, View } from 'react-native';
 import { ed } from '../app/state';
 import { applyCtxAction, barItems, deleteSelection, plusAction, plusLabel, plusVisible } from '../editor/actions';
-import { statusPill, currentHint } from '../editor/status';
+import { addLinks, LINK_PLUS_LABEL, linkPlusVisible, linkSizeVisible, pageLinkSize, setLinkSize, SIZE_STEPS, sizeToStep, stepToSize } from '../editor/linkActions';
+import { afterEdit } from '../app/edit';
+import { LINK_SIDE_IN } from '../model/links';
+import { fmtLen } from '../units';
+import { bar3d, run3d } from '../editor/view3d';
+import { is3d } from '../editor/view3dState';
+import { OPACITY_MIN, OPACITY_STEP, ROTATE_MAX, ROTATE_STEP, setUnderlayOpacity, setUnderlayRotation } from '../editor/project';
+import { pushHistory } from '../model/history';
+import { imageById } from '../model/images';
+import { Slider } from './Slider';
+import { notify, ui, useEditorKey } from './store';
+import { currentHint } from '../editor/status';
 import { hovered } from './Buttons';
 import { Icon } from './Icon';
 import { RichText } from './RichText';
 import { C, FONT, shadow } from './theme';
+import { Tap, usePopup } from './motion';
+import { createSheet } from './corners';
 
-/** The contextual bar: what fits the tool and selection, the yellow + to measure, and the trash on its own. */
+/**
+ * The contextual bar: what fits the tool and selection, the yellow + to measure, and the trash on its own. It's as
+ * long as what's in it, centred on the screen — on a phone, unless that would put it under the trash, when it moves
+ * just clear of it (and scrolls only if even that leaves too little room). In Annotate on a phone (or a window too
+ * short for it under the rail) the + that adds the job's files and measurements has the trash's corner while nothing's
+ * selected: selecting anything puts the trash there instead, and letting go brings the + back.
+ */
 export function BottomBar({ phone }: { phone: boolean }) {
-  const items = barItems(), plus = plusVisible();
+  // what's in the bar, and the selected image's opacity and turn (its sliders)
+  useEditorKey(() => {
+    const u = ed.sel.length === 1 && ed.sel[0].type === 'underlay' ? imageById(ed.sel[0].id) : undefined;
+    return [buttonsKey(), plusVisible(), ed.sel.length, u ? u.opacity ?? 0.6 : '', u ? (u.rot ?? 0) + (u.locked ? 'L' : '') : '', linkPlusVisible(), ui.linkFab, linkSizeVisible(), pageLinkSize() ?? ''].join('|');
+  });
+  // (on a phone only buttons show: a bar that would hold just a label isn't shown at all. The 3D tab measures and
+  // deletes nothing: what's tapped there shows its sizes, and what can be done with it from there)
+  const items = shown(phone), plus = !is3d() && plusVisible(), trash = !is3d() && ed.sel.length > 0;
+  const fab = !trash && (phone || ui.linkFab) && linkPlusVisible(), corner = trash || fab;
+  // it scrolls only when its buttons can't all fit (a narrow phone): otherwise a drag on the bar would move it
+  const [room, setRoom] = useState(0), [content, setContent] = useState(0), over = content > room + 1;
   return (
     <>
       {(items.length > 0 || plus) && (
-        <View style={[s.bottom, phone ? { left: 12, right: 76 } : s.centered]}>
-          <View style={[s.ctx, phone && { flex: 1 }]}>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.items} style={{ flexShrink: 1 }}>
-              {items.map((it, i) => {
-                if (it === 'sep') return <View key={'s' + i} style={s.sep} />;
-                if ('lbl' in it) return <Text key={'l' + i} style={s.lbl}>{it.lbl}</Text>;
-                const fg = it.on ? C.dark : it.locked ? C.red : '#fff';
-                return (
-                  <Pressable key={it.act + i} accessibilityRole="button" accessibilityLabel={it.label}
-                    accessibilityState={it.on != null || it.locked != null ? { selected: !!(it.on || it.locked) } : undefined}
-                    onPress={e => applyCtxAction(it.act, e.currentTarget)}
-                    style={st => [s.cb, it.on ? { backgroundColor: '#fff' } : hovered(st) && { backgroundColor: 'rgba(255,255,255,0.08)' }]}>
-                    {it.ic === 'color' ? <View style={[s.colorDot, { backgroundColor: ed.noteColor }]} /> : <Icon name={it.ic} color={fg} />}
-                    <Text style={[s.cbText, { color: fg }]}>{it.label}</Text>
-                  </Pressable>
-                );
-              })}
+        <View style={[s.bottom, phone ? s.phoneRow : s.centered]}>
+          <ImagePopover />
+          <LinkSizePopover />
+          {/* a phone's bar sits between two springs that start as wide as the trash takes and share what's left
+              equally, so it's centred; only the left one gives way (first, before the bar), so a long bar slides left
+              to clear the trash. (A minimum width on the right one alone did that in a browser, but a device's layout
+              shares the room out differently and left a short bar off-centre.) The springs let touches through. */}
+          {phone && <View pointerEvents="none" style={[s.springL, { flexBasis: corner ? TRASH_ROOM : 0 }]} />}
+          <View testID="ctxBar" style={s.ctx}>
+            {/* (a native ScrollView grows to fill its row by default, which stretched the bar across a tablet) */}
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} scrollEnabled={over} bounces={false} contentContainerStyle={s.items}
+              style={{ flexGrow: 0, flexShrink: 1 }} onLayout={e => setRoom(e.nativeEvent.layout.width)} onContentSizeChange={w => setContent(w)}>
+              <BarButtons k={buttonsKey()} phone={phone} />
             </ScrollView>
             {plus && (
-              <Pressable accessibilityRole="button" accessibilityLabel={plusLabel()} testID="addbtn" onPress={plusAction} style={s.add}>
+              <Tap accessibilityRole="button" accessibilityLabel={plusLabel()} testID="addbtn" onPress={plusAction} style={s.add}>
                 <Icon name="plus" color={C.dark} />
-              </Pressable>
+              </Tap>
             )}
           </View>
+          {phone && <View pointerEvents="none" style={[s.springR, { flexBasis: corner ? TRASH_ROOM : 0 }]} />}
         </View>
       )}
-      {ed.sel.length > 0 && (
-        <Pressable accessibilityRole="button" accessibilityLabel="Delete selection" testID="btnTrash" onPress={deleteSelection}
-          style={({ pressed }) => [s.trash, phone && { width: 52, height: 52, right: 12 }, { transform: [{ scale: pressed ? 0.93 : 1 }] }]}>
-          <Icon name="trash" />
-        </Pressable>
+      {trash && (
+        <Tap accessibilityRole="button" accessibilityLabel="Delete selection" testID="btnTrash" onPress={deleteSelection}
+          style={s.trash}>
+          <Icon name="trash" size={24} color="#fff" />
+        </Tap>
+      )}
+      {fab && (
+        <Tap accessibilityRole="button" accessibilityLabel={LINK_PLUS_LABEL} testID="linkFab" onPress={() => { void addLinks(); }} style={[s.trash, s.fab]}>
+          <Icon name="plus" size={30} color={C.dark} />
+        </Tap>
       )}
     </>
   );
 }
 
-/** The definition-state pill (top left), and the hint for screen readers. */
-export function StatusPill({ phone }: { phone: boolean }) {
-  const st = statusPill();
+/** What's in the bar: for the selection, or for what's tapped in the 3D tab. */
+const entries = () => (is3d() ? bar3d() : barItems());
+
+/**
+ * What the bar shows: on a phone, its buttons alone (see buttonsOnly) — except in 3D, where the sizes are the point of
+ * tapping something, and nothing else shows them.
+ */
+const shown = (phone: boolean) => (phone && !is3d() ? buttonsOnly(entries()) : entries());
+
+/** What the bar's buttons show: its items (with their states), and which slider is open above it. */
+function buttonsKey(): string {
+  const its = entries();
+  return JSON.stringify(its) + '|' + ui.imgPop;
+}
+
+/**
+ * A phone's bar: the buttons alone — the line saying what's selected and its sizes ("Cabinet 24" L × 34 1/2" H…") takes
+ * room a phone hasn't got, and the drawing shows the sizes anyway — with no divider left at an end or doubled up.
+ */
+function buttonsOnly(items: ReturnType<typeof barItems>): ReturnType<typeof barItems> {
+  const out: ReturnType<typeof barItems> = [];
+  for (const it of items) {
+    if (it !== 'sep' && 'lbl' in it) continue;
+    if (it === 'sep' && (!out.length || out[out.length - 1] === 'sep')) continue;
+    out.push(it);
+  }
+  while (out[out.length - 1] === 'sep') out.pop();
+  return out;
+}
+
+/**
+ * The bar's buttons, drawn again only when what they show changes (`k`, see buttonsKey) — not when the bar itself
+ * is, as it measures whether they fit.
+ */
+const BarButtons = memo(function BarButtons({ phone }: { k: string; phone: boolean }) {
   return (
     <>
-      <View style={[s.dof, phone && { top: 120 }, st.state === 'bad' && { backgroundColor: C.wred }]} testID="dof">
-        <View style={[s.dofDot, { backgroundColor: st.state === 'full' ? C.green : st.state === 'bad' ? '#fff' : C.lblue }]} />
-        <Text style={[s.dofText, st.state === 'bad' && { color: '#fff' }]}>{st.text}</Text>
-      </View>
-      <View style={s.srOnly} accessibilityLiveRegion="polite" nativeID="hint">
-        <RichText html={currentHint()} />
-      </View>
+      {shown(phone).map((it, i) => {
+        if (it === 'sep') return <View key={'s' + i} style={s.sep} />;
+        if ('lbl' in it) return <Text key={'l' + i} style={s.lbl}>{it.lbl}</Text>;
+        const fg = it.on ? C.dark : it.locked ? C.red : '#fff';
+        return (
+          <Tap key={it.act + i} accessibilityRole="button" accessibilityLabel={it.label}
+            accessibilityState={it.on != null || it.locked != null ? { selected: !!(it.on || it.locked) } : undefined}
+            onPress={e => { if (!(is3d() && run3d(it.act))) applyCtxAction(it.act, e.currentTarget); }}
+            style={st => [s.cb, it.on || (it.act === 'imgOpacity' && ui.imgPop === 'opacity') || (it.act === 'imgRotate' && ui.imgPop === 'rotate') || (it.act === 'linkSize' && ui.imgPop === 'tilesize') ? { backgroundColor: 'rgba(255,255,255,0.14)' } : null,
+              it.on ? { backgroundColor: '#fff' } : hovered(st) && { backgroundColor: 'rgba(255,255,255,0.08)' }]}>
+            <Icon name={it.ic} color={fg} />
+            <Text style={[s.cbText, { color: fg }]}>{it.label}</Text>
+          </Tap>
+        );
+      })}
     </>
   );
+});
+
+/** Degrees, as the rotation slider shows them: whole, or to the half degree. */
+const fmtDeg = (v: number): string => (Math.round(v * 2) / 2).toString().replace('-', '−') + '°';
+
+/**
+ * The selected image's slider, just above the bar: its opacity, or how far it's turned (Opacity or Rotate in the bar
+ * opens and closes it), with Reset to stand a turned one upright again. A locked image can't be turned: its slider
+ * goes with the lock.
+ *
+ * Kept quick on a device: as it's dragged the thumb and the number follow the finger from here (`live`), the image is
+ * changed at most once a frame, and only the photos are drawn again (requestImageDraw) — the rest of the editor
+ * hears of it once, as it's let go.
+ */
+function ImagePopover() {
+  const [live, setLive] = useState<number | null>(null);
+  const pending = useRef<{ v: number; frame: number } | null>(null);
+  const now = ed.sel.length === 1 && ed.sel[0].type === 'underlay' ? imageById(ed.sel[0].id) : undefined;
+  const kind = ui.imgPop === 'opacity' || ui.imgPop === 'rotate' ? ui.imgPop : null;
+  const open = !!kind && !!now && !(kind === 'rotate' && now.locked);
+  // (it rises from the bar; as it goes it keeps showing the image it was for)
+  const last = useRef<{ kind: 'opacity' | 'rotate'; sel: NonNullable<typeof now> } | null>(null), pop = usePopup(open, { y: 8 }, 'bottom center');
+  if (open) last.current = { kind: kind!, sel: now! };
+  if (!pop.present || !last.current) return null;
+  const { sel } = last.current, rotate = last.current.kind === 'rotate', id = sel.id;
+  const apply = (v: number) => (rotate ? setUnderlayRotation(id, v) : setUnderlayOpacity(id, v / 100));
+  const value = live ?? (rotate ? sel.rot ?? 0 : Math.round((sel.opacity ?? 0.6) * 100));
+  const change = (v: number) => {
+    setLive(v);
+    const p = pending.current;
+    if (p) { p.v = v; return; }
+    pending.current = { v, frame: requestAnimationFrame(() => { const q = pending.current; pending.current = null; if (q) apply(q.v); }) };
+  };
+  const end = () => {
+    const p = pending.current;
+    if (p) { cancelAnimationFrame(p.frame); pending.current = null; apply(p.v); }
+    setLive(null);
+    notify();
+  };
+  const upright = Math.abs(sel.rot ?? 0) < 1e-9;
+  return (
+    <View style={s.popWrap} pointerEvents="box-none">
+    <Animated.View style={[s.pop, rotate && s.popReset, pop.style]} pointerEvents={open ? 'auto' : 'none'} testID={open ? (rotate ? 'rotatePop' : 'opacityPop') : undefined}>
+      <Text style={s.popLabel}>{rotate ? 'Rotate' : 'Opacity'}</Text>
+      <View style={{ flex: 1 }}>
+        {rotate
+          ? <Slider label="Image rotation" testID="rotateSlider" value={value} min={-ROTATE_MAX} max={ROTATE_MAX} step={ROTATE_STEP} format={fmtDeg}
+              onStart={pushHistory} onChange={change} onEnd={end} />
+          : <Slider label="Image opacity" testID="opacitySlider" value={value} min={OPACITY_MIN} max={100} step={OPACITY_STEP}
+              onStart={pushHistory} onChange={change} onEnd={end} />}
+      </View>
+      <Text style={s.popValue}>{rotate ? fmtDeg(value) : value + '%'}</Text>
+      {rotate && (
+        <Tap feel="dim" accessibilityRole="button" accessibilityLabel="Reset rotation" accessibilityState={{ disabled: upright }} disabled={upright}
+          testID="rotateReset" onPress={() => { pushHistory(); setUnderlayRotation(id, 0); notify(); }} style={[s.reset, upright && { opacity: 0.4 }]}>
+          <Text style={s.resetText}>Reset</Text>
+        </Tap>
+      )}
+    </Animated.View>
+    </View>
+  );
 }
 
-const s = StyleSheet.create({
+/** A tile size from the slider, as it's kept: to the quarter inch. */
+const tileSize = (step: number): number => Math.round(stepToSize(step) * 4) / 4;
+
+/**
+ * The tiles' size, just above the bar (Size in it opens and closes it): one size for every tile on the page, on the drawing
+ * (they zoom with the plan and print at it). Kept quick on a device, as ImagePopover is: the thumb and the number follow
+ * the finger from here, the tiles are sized at most once a frame, and the rest of the editor hears of it as it's let go.
+ */
+function LinkSizePopover() {
+  const [live, setLive] = useState<number | null>(null);
+  // the number's width as it was laid out, held while a drag goes on (the track ends at it: as long as the number is,
+  // no longer — but never narrower mid-drag, which would move the track under the finger)
+  const [numW, setNumW] = useState(0);
+  const pending = useRef<{ v: number; frame: number } | null>(null);
+  // (opened from the bar's Size, as an image's sliders are; a press on the drawing closes it)
+  const size = ui.imgPop === 'tilesize' && linkSizeVisible() ? pageLinkSize() : null, open = size != null;
+  // (as it goes it keeps showing the size it had)
+  const last = useRef(size ?? LINK_SIDE_IN), pop = usePopup(open, { y: 8 }, 'bottom center');
+  if (size != null) last.current = size;
+  if (!pop.present) return null;
+  const value = live ?? sizeToStep(last.current);
+  const change = (v: number) => {
+    setLive(v);
+    const p = pending.current;
+    if (p) { p.v = v; return; }
+    pending.current = { v, frame: requestAnimationFrame(() => { const q = pending.current; pending.current = null; if (q) setLinkSize(tileSize(q.v)); }) };
+  };
+  const end = () => {
+    const p = pending.current;
+    if (p) { cancelAnimationFrame(p.frame); pending.current = null; setLinkSize(tileSize(p.v)); }
+    setLive(null);
+    afterEdit();
+    notify();
+  };
+  return (
+    <View style={s.popWrap} pointerEvents="box-none">
+      <Animated.View style={[s.pop, pop.style]} pointerEvents={open ? 'auto' : 'none'} testID={open ? 'tileSizePop' : undefined}>
+        <Text style={s.popLabel}>Tile size</Text>
+        <View style={{ flex: 1 }}>
+          <Slider label="Tile size" testID="tileSizeSlider" value={value} min={0} max={SIZE_STEPS} step={1} format={v => fmtLen(tileSize(v))}
+            onStart={pushHistory} onChange={change} onEnd={end} />
+        </View>
+        <Text onLayout={e => { if (live == null) setNumW(e.nativeEvent.layout.width); }}
+          style={[s.popValue, s.sizeValue, live != null && numW ? { minWidth: numW } : null]}>{fmtLen(live != null ? tileSize(live) : last.current)}</Text>
+      </Animated.View>
+    </View>
+  );
+}
+
+/** The hint for screen readers: what to do next with the tool or what's picked, read out as it changes. */
+export function SpokenHint() {
+  useEditorKey(currentHint);
+  return (
+    <View style={s.srOnly} accessibilityLiveRegion="polite" nativeID="hint">
+      <RichText html={currentHint()} />
+    </View>
+  );
+}
+
+/** What the trash (or Annotate's +, in its place) takes at the right of a phone's bar row: its 60 pt, and the 12 between them. */
+const TRASH_ROOM = 72;
+
+const s = createSheet({
   bottom: { pointerEvents: 'box-none', position: 'absolute', bottom: 14, zIndex: 24, flexDirection: 'row', alignItems: 'center' },
   centered: { left: 90, right: 90, justifyContent: 'center' },
-  ctx: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.g2, borderRadius: 34, paddingVertical: 6, paddingHorizontal: 8, maxWidth: '100%', ...shadow },
+  phoneRow: { left: 12, right: 12 },
+  springL: { flexGrow: 1, flexShrink: 1000 },
+  springR: { flexGrow: 1, flexShrink: 0 },
+  // the same 6 all round, and corners of the buttons' radius plus 6: the end buttons sit concentric in the bar
+  // (it gives way when its buttons don't fit — React Native doesn't shrink a view unless told — and then scrolls)
+  ctx: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.g2, borderRadius: 27 + 6, minHeight: 54 + 12, padding: 6, maxWidth: '100%', flexShrink: 1, ...shadow },
   items: { flexDirection: 'row', alignItems: 'center', gap: 2 },
   cb: { minWidth: 58, height: 54, borderRadius: 27, alignItems: 'center', justifyContent: 'center', gap: 3, paddingHorizontal: 8 },
   cbText: { fontFamily: FONT, fontSize: 10.5, fontWeight: '500' },
   sep: { width: 1, height: 32, backgroundColor: C.g3, marginHorizontal: 4 },
   lbl: { fontFamily: FONT, fontSize: 12, color: C.lg1, paddingHorizontal: 10 },
-  colorDot: { width: 16, height: 16, borderRadius: 8, borderWidth: 2, borderColor: '#fff' },
-  add: { width: 48, height: 48, borderRadius: 24, backgroundColor: C.yellow, alignItems: 'center', justifyContent: 'center', marginLeft: 4 },
-  trash: { position: 'absolute', right: 16, bottom: 16, zIndex: 24, width: 56, height: 56, borderRadius: 28, backgroundColor: C.red, alignItems: 'center', justifyContent: 'center', ...shadow },
-  dof: { position: 'absolute', top: 70, left: 12, zIndex: 20, height: 32, borderRadius: 16, backgroundColor: C.g1, paddingLeft: 10, paddingRight: 12, flexDirection: 'row', alignItems: 'center', gap: 8, ...shadow },
-  dofDot: { width: 10, height: 10, borderRadius: 5 },
-  dofText: { fontFamily: FONT, fontSize: 13, fontWeight: '600', color: C.lg2 },
+  // the slider sits just above the bar, centred on it
+  popWrap: { position: 'absolute', left: 0, right: 0, bottom: 76, alignItems: 'center' },
+  pop: { width: 400, maxWidth: '100%', flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: C.g2, borderRadius: 999, paddingHorizontal: 16, paddingVertical: 4, ...shadow },
+  popLabel: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: C.lg2 },
+  popValue: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: '#fff', width: 48, textAlign: 'right' },
+  // (a length: as long as it is, the track running up to it)
+  sizeValue: { width: 'auto', minWidth: 0 },
+  // back to upright: a pill at the end of the rotation slider, concentric with it — the same 4 above, below and beside
+  // it, and the slider's radius (22, half its 44) less that 4 for its own
+  popReset: { paddingRight: 4 },
+  reset: { height: 36, paddingHorizontal: 16, borderRadius: 18, backgroundColor: C.g3, justifyContent: 'center' },
+  resetText: { fontFamily: FONT, fontSize: 12.5, fontWeight: '600', color: '#fff' },
+  // (smaller than a button, so 3 in from the bar's end as well as from its top and bottom: concentric too)
+  add: { width: 48, height: 48, borderRadius: 24, backgroundColor: C.yellow, alignItems: 'center', justifyContent: 'center', marginLeft: 4, marginRight: 3 },
+  // BOLDR's delete FAB (the annotation editors' DeleteFab): a 60 pt solid red circle 12 from the right and 14 from the
+  // bottom, level with the bar beside it, on every screen size
+  trash: {
+    position: 'absolute', right: 12, bottom: 14, zIndex: 24, width: 60, height: 60, borderRadius: 30,
+    backgroundColor: '#FD2525', alignItems: 'center', justifyContent: 'center',
+    boxShadow: '0 2.5px 2.5px rgba(0,0,0,0.15)', elevation: 4,
+  },
   srOnly: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 },
+  // BOLDR's add FAB, in the trash's place: yellow, its + dark (white on the yellow is too faint)
+  fab: { backgroundColor: C.yellow },
 });

package/src/react/Buttons.tsx

@@ -1,42 +1,83 @@
-import type { ReactNode } from 'react';
-import { Pressable, StyleSheet, Text, View, type PressableStateCallbackType, type StyleProp, type ViewStyle } from 'react-native';
+import { useMemo, type ReactNode } from 'react';
+import { Animated, Pressable, Text, View, type PressableStateCallbackType, type StyleProp, type ViewStyle } from 'react-native';
 import { Icon } from './Icon';
+import { Tap, TOGGLE_EASE, TOGGLE_MS, TOGGLE_PRESS_MS, usePress, useToggleEased } from './motion';
 import { C, FONT, shadow } from './theme';
+import { createSheet } from './corners';
 
 /** A round icon button (the top bar's circles). */
 export function CircleButton({ icon, label, onPress, color = C.g3, iconColor = '#fff', size = 46, testID }: {
   icon: string; label: string; onPress: () => void; color?: string; iconColor?: string; size?: number; testID?: string;
 }) {
   return (
-    <Pressable accessibilityRole="button" accessibilityLabel={label} testID={testID} onPress={onPress}
-      style={({ pressed }) => [s.circle, { width: size, height: size, backgroundColor: color, transform: [{ scale: pressed ? 0.93 : 1 }] }]}>
+    <Tap accessibilityRole="button" accessibilityLabel={label} testID={testID} onPress={onPress}
+      style={[s.circle, { width: size, height: size, backgroundColor: color }]}>
       <Icon name={icon} color={iconColor} />
-    </Pressable>
+    </Tap>
   );
 }
 
 /** A rounded pill button: yellow for the main action, grey otherwise. */
-export function Pill({ label, onPress, children, kind = 'yellow', style, testID, accessibilityLabel }: {
+export function Pill({ label, onPress, children, kind = 'yellow', style, testID, accessibilityLabel, disabled }: {
   label?: string; onPress: () => void; children?: ReactNode; kind?: 'yellow' | 'grey' | 'dark'; style?: StyleProp<ViewStyle>; testID?: string; accessibilityLabel?: string;
+  disabled?: boolean;
 }) {
   const bg = kind === 'yellow' ? C.yellow : kind === 'grey' ? C.g2 : C.g1, fg = kind === 'yellow' ? C.dark : '#fff';
   return (
-    <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} testID={testID} onPress={onPress}
-      style={({ pressed }) => [s.pill, { backgroundColor: bg, transform: [{ scale: pressed ? 0.96 : 1 }] }, style]}>
+    <Tap accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={{ disabled: !!disabled }}
+      testID={testID} onPress={onPress} disabled={disabled}
+      style={[s.pill, { backgroundColor: bg }, disabled && { opacity: 0.7 }, style]}>
       {children}
       {label ? <Text style={[s.pillText, { color: fg }]}>{label}</Text> : null}
+    </Tap>
+  );
+}
+
+/**
+ * BOLDR's on/off toggle: a grey track with its knob on the left when off, green with the knob on the right when on.
+ * As on Apple's switches, pressing it in stretches the knob toward the side it's about to go (to the right when off,
+ * to the left when on); letting go, the knob glides across, rounding up again, as the track fades (react/motion.tsx).
+ */
+export function Toggle({ label, value, onChange }: { label: string; value: boolean; onChange: () => void }) {
+  // pressed in it stretches (unhurried, so a quick tap still shows it); let go, it rounds up again over the whole glide
+  const { v: t, go } = useToggleEased(value), press = usePress(TOGGLE_PRESS_MS, TOGGLE_MS, TOGGLE_EASE, true);
+  // the knob sets off at once; the setting changes a frame later, once the glide is with the native driver (what it
+  // sets off — the menu drawn again, the drawing for a layer or a snap — then can't hold it up)
+  const flip = () => go(!value, onChange);
+  const travel = TOGGLE.w - TOGGLE.k - 2 * TOGGLE.pad;
+  // the stretch grows from the knob's outer edge: rightward from the left, leftward from the right. Drawn as a scale
+  // and a slide (what the native driver can play): the knob, k wide, scaled about its middle to k + stretch, its left
+  // edge at t × (travel − stretch) — so moved there plus half the stretch
+  const { fill, x, sx } = useMemo(() => {
+    const stretch = Animated.multiply(press.v, TOGGLE.stretch);
+    return {
+      fill: t.interpolate({ inputRange: [0, 1], outputRange: [C.g4, C.on] }),
+      x: Animated.add(Animated.subtract(Animated.multiply(t, travel), Animated.multiply(t, stretch)), Animated.multiply(stretch, 0.5)),
+      sx: Animated.add(1, Animated.multiply(press.v, TOGGLE.stretch / TOGGLE.k)),
+    };
+  }, [t, press.v, travel]);
+  return (
+    <Pressable accessibilityRole="switch" accessibilityLabel={label} accessibilityState={{ checked: value }} aria-checked={value} hitSlop={6}
+      onPressIn={press.onPressIn} onPressOut={press.onPressOut} onPress={flip}>
+      <Animated.View style={[s.track, { backgroundColor: fill }]}>
+        <Animated.View style={[s.knob, { transform: [{ translateX: x }, { scaleX: sx }] }]} />
+      </Animated.View>
     </Pressable>
   );
 }
+/** The Figma's 69 × 36 toggle (30 knob), scaled to the menus */
+const TOGGLE = { w: 48, h: 25, k: 21, pad: 2, stretch: 6 };
 
 export function Row({ children, gap = 8, style }: { children: ReactNode; gap?: number; style?: StyleProp<ViewStyle> }) {
   return <View style={[{ flexDirection: 'row', alignItems: 'center', gap }, style]}>{children}</View>;
 }
 
-const s = StyleSheet.create({
+const s = createSheet({
   circle: { borderRadius: 999, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: 'rgba(255,255,255,0.16)', ...shadow },
   pill: { height: 46, minWidth: 64, paddingHorizontal: 18, borderRadius: 24, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, ...shadow },
   pillText: { fontFamily: FONT, fontWeight: '600', fontSize: 15 },
+  track: { width: TOGGLE.w, height: TOGGLE.h, borderRadius: 100, padding: TOGGLE.pad, justifyContent: 'center', alignItems: 'flex-start', flexShrink: 0 },
+  knob: { width: TOGGLE.k, height: TOGGLE.k, borderRadius: 100, backgroundColor: '#fff', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)' },
 });
 
 /** Whether a Pressable is under the mouse (react-native-web adds `hovered`; devices without a mouse never are). */