@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/dist/react/store.js

@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from 'react';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
 import { sessionState } from '../model/session';
 /*
   The React side of the editor: a version number that changes whenever the editor or the interface's own state
@@ -16,6 +16,20 @@ const subscribe = (l) => { listeners.add(l); return () => { listeners.delete(l);
 const getVersion = () => version;
 /** Re-render this component whenever the editor changes. */
 export const useEditorVersion = () => useSyncExternalStore(subscribe, getVersion, getVersion);
+/** The editor's change count (for a key that should change with every change: see useEditorKey). */
+export const editorVersion = () => version;
+/**
+ * Re-render this component only when what it shows changes, not on every change to the editor: `key` sums up all it
+ * reads, as one string, worked out again after each change — the same string, and it isn't rendered again. Keep it
+ * cheap and free of side effects; a component that's only briefly on screen can key on editorVersion() instead.
+ * (Re-rendering the whole interface on every change was most of the time an interaction took on a phone.)
+ */
+export function useEditorKey(key) {
+    const latest = useRef(key);
+    latest.current = key;
+    const get = useCallback(() => latest.current(), []);
+    return useSyncExternalStore(subscribe, get, get);
+}
 export const ui = sessionState(() => ({
     toast: null,
     /** the keypad sheet is showing (its contents live in editor/keypad.ts) */
@@ -28,8 +42,24 @@ export const ui = sessionState(() => ({
     renameRoom: null,
     note: null,
     palette: false,
+    /** what the tool just picked from the rail does (a note under the tabs that goes by itself); seq tells one pick from the next */
+    toolTip: null,
+    /** the slider open above the bar: the selected image's opacity, or how far it's turned; or the link tiles' size */
+    imgPop: null,
+    /** the tool each shared place on the rail draws with (the last picked; editor/mode.ts TOOL_GROUPS), and the menu of
+        a group's tools, open beside its place at x, y */
+    picked: { shapes: 'line', marks: 'arrow' },
+    shapeMenu: null,
+    /** the top bar's open menu: ••• (exports, files and settings) or Layers (the stack) */
     menu: false,
     /** when a sheet opened (taps on the backdrop right after are the opening tap's ghost click) */
     sheetOpenedAt: 0,
+    /**
+     * How wide the top row's mode tabs and right-hand buttons laid out (0: not yet), and whether those buttons were
+     * measured in 3D, which has no Layers (see topRow.ts)
+     */
+    topRoom: { tabs: 0, right: 0, right3d: false },
+    /** Annotate's + floats in the corner (as a phone's) on a screen too short for it under the rail (see Rail) */
+    linkFab: false,
 }));
 //# sourceMappingURL=store.js.map

package/dist/react/store.js.map

@@ -1 +1 @@
-{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/react/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;EAGE;AAEF,IAAI,OAAO,GAAG,CAAC,CAAC;AAChB,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAC;AAExC,2FAA2F;AAC3F,MAAM,UAAU,MAAM;IACpB,OAAO,EAAE,CAAC;IACV,KAAK,MAAM,CAAC,IAAI,SAAS;QAAE,CAAC,EAAE,CAAC;AACjC,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,CAAa,EAAE,EAAE,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClG,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC;AAEjC,4DAA4D;AAC5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAW,EAAE,CAAC,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;AAKtG,MAAM,CAAC,MAAM,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC;IACpC,KAAK,EAAE,IAAyB;IAChC,0EAA0E;IAC1E,MAAM,EAAE,KAAK;IACb,gEAAgE;IAChE,QAAQ,EAAE,IAA4E;IACtF,+CAA+C;IAC/C,MAAM,EAAE,IAAwB;IAChC,8DAA8D;IAC9D,UAAU,EAAE,IAAqB;IACjC,IAAI,EAAE,IAA6B;IACnC,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,KAAK;IACX,+FAA+F;IAC/F,aAAa,EAAE,CAAC;CACjB,CAAC,CAAC,CAAC"}
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/react/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;EAGE;AAEF,IAAI,OAAO,GAAG,CAAC,CAAC;AAChB,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAC;AAExC,2FAA2F;AAC3F,MAAM,UAAU,MAAM;IACpB,OAAO,EAAE,CAAC;IACV,KAAK,MAAM,CAAC,IAAI,SAAS;QAAE,CAAC,EAAE,CAAC;AACjC,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,CAAa,EAAE,EAAE,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClG,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC;AAEjC,4DAA4D;AAC5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAW,EAAE,CAAC,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;AAEtG,oGAAoG;AACpG,MAAM,CAAC,MAAM,aAAa,GAAG,GAAW,EAAE,CAAC,OAAO,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,GAAiB;IAC5C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC;IACrB,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,OAAO,oBAAoB,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AACnD,CAAC;AAKD,MAAM,CAAC,MAAM,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC;IACpC,KAAK,EAAE,IAAyB;IAChC,0EAA0E;IAC1E,MAAM,EAAE,KAAK;IACb,gEAAgE;IAChE,QAAQ,EAAE,IAA4E;IACtF,+CAA+C;IAC/C,MAAM,EAAE,IAAwB;IAChC,8DAA8D;IAC9D,UAAU,EAAE,IAAqB;IACjC,IAAI,EAAE,IAA6B;IACnC,OAAO,EAAE,KAAK;IACd,iIAAiI;IACjI,OAAO,EAAE,IAA4C;IACrD,mHAAmH;IACnH,MAAM,EAAE,IAAgD;IACxD;yDACqD;IACrD,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAA4B;IACpE,SAAS,EAAE,IAAsD;IACjE,uFAAuF;IACvF,IAAI,EAAE,KAAkC;IACxC,+FAA+F;IAC/F,aAAa,EAAE,CAAC;IAChB;;;OAGG;IACH,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE;IAC9C,8GAA8G;IAC9G,OAAO,EAAE,KAAK;CACf,CAAC,CAAC,CAAC"}

package/dist/react/theme.d.ts

@@ -1,4 +1,6 @@
 export declare const C: {
+    /** card: the Pages panel's cards (Figma 2548:101989), a step between grey-1 and grey-2 */
+    readonly card: '#3A3B3C';
     readonly dark: '#181A1C';
     readonly g1: '#2B2C2E';
     readonly g2: '#424345';
@@ -16,6 +18,14 @@ export declare const C: {
     readonly green: '#00E920';
     readonly white: '#FFFFFF';
     readonly softRed: '#FFB4AE';
+    /** the keypad's keys: digits, unit and symbol keys, Del */
+    readonly key: '#4B6074';
+    readonly key2: '#67819A';
+    readonly mutedRed: '#DF6358';
+    /** a toggle that's on */
+    readonly on: '#58A942';
+    /** BOLDR's measurement tiles (Other/Active Blue): the job's lengths under a line's length keys */
+    readonly tile: '#0364F4';
 };
 /** The chrome's typeface: Montserrat in a browser (the host loads the web font); the system font on a device. */
 export declare const FONT: string | undefined;

package/dist/react/theme.js

@@ -1,9 +1,17 @@
 import { Platform } from 'react-native';
 /* The editor chrome's colors and type (dark in both themes; the canvas has its own light and dark colors). */
 export const C = {
+    /** card: the Pages panel's cards (Figma 2548:101989), a step between grey-1 and grey-2 */
+    card: '#3A3B3C',
     dark: '#181A1C', g1: '#2B2C2E', g2: '#424345', g3: '#626364', g4: '#9FA0A2', lg1: '#BCBEC2', lg2: '#E8EAED',
     yellow: '#FFAD00', blue: '#0066FF', lblue: '#50A6FF', lblue2: '#89C3FF', red: '#E83D2F', wred: '#DA1100',
     purple: '#BD30A8', green: '#00E920', white: '#FFFFFF', softRed: '#FFB4AE',
+    /** the keypad's keys: digits, unit and symbol keys, Del */
+    key: '#4B6074', key2: '#67819A', mutedRed: '#DF6358',
+    /** a toggle that's on */
+    on: '#58A942',
+    /** BOLDR's measurement tiles (Other/Active Blue): the job's lengths under a line's length keys */
+    tile: '#0364F4',
 };
 /** The chrome's typeface: Montserrat in a browser (the host loads the web font); the system font on a device. */
 export const FONT = Platform.select({ web: '"Metropolis","Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif', default: undefined });

package/dist/react/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/react/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,8GAA8G;AAE9G,MAAM,CAAC,MAAM,CAAC,GAAG;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS;IAC3G,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS;IACxG,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS;CACjE,CAAC;AAEX,iHAAiH;AACjH,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAqB,EAAE,GAAG,EAAE,sEAAsE,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAE7J,gDAAgD;AAChD,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,SAAS,EAAE,kCAAkC,EAAW,CAAC;AAEjF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/react/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,8GAA8G;AAE9G,MAAM,CAAC,MAAM,CAAC,GAAG;IACf,0FAA0F;IAC1F,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS;IAC3G,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS;IACxG,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS;IACzE,2DAA2D;IAC3D,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS;IACpD,yBAAyB;IACzB,EAAE,EAAE,SAAS;IACb,kGAAkG;IAClG,IAAI,EAAE,SAAS;CACP,CAAC;AAEX,iHAAiH;AACjH,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAqB,EAAE,GAAG,EAAE,sEAAsE,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAE7J,gDAAgD;AAChD,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,SAAS,EAAE,kCAAkC,EAAW,CAAC;AAEjF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC"}

package/dist/react/topRow.d.ts

@@ -0,0 +1,22 @@
+/** Where the row the tabs sit on starts (from the editor's top), and the line under them (the tool tips). */
+export declare const TABS_TOP: {
+    row: number;
+    below: number;
+}, TIP_TOP: {
+    row: number;
+    below: number;
+};
+export interface TopLayout {
+    /** the tabs on a row of their own under the top row */
+    below: boolean;
+    /** in the top row, but not centred on the screen: their left edge (null: centred) */
+    left: number | null;
+    /** how wide the crumb may be (0: it isn't shown) */
+    crumb: number;
+}
+/** A part of the row laid out `w` wide (the right-hand buttons: as they are in this mode). Nothing changes for less than a point. */
+export declare function setTopRoom(part: 'tabs' | 'right', w: number): void;
+/** The top row on a screen `width` by `height` (round buttons `size` across). */
+export declare function topLayout(width: number, height: number, phone: boolean, size?: number): TopLayout;
+/** The layout as a string, for a component's key (it's drawn again when this changes). */
+export declare const topKey: (l: TopLayout) => string;

package/dist/react/topRow.js

@@ -0,0 +1,61 @@
+import { is3d } from '../editor/view3dState';
+import { notify, ui } from './store';
+/*
+  The top row: the back button and the crumb on the left, the round buttons on the right, and the mode tabs centred
+  between them. Where they don't all fit:
+    - a tall screen (a phone; an iPad held upright) puts the tabs on a row of their own under it, as a phone has them;
+    - a short one (a phone on its side) has no height to spare for that: the crumb goes, and the tabs sit between the
+      back button and the buttons.
+  Worked out from their widths as they lay out, so it holds for whatever buttons the host adds. (Centred regardless,
+  an 11" iPad's tabs covered the crumb and, in Draft, the Fit button.)
+*/
+/** From the screen's edges to the row, and between the tabs and what's beside them. */
+const EDGE = 12, GAP = 10;
+/** The back button's gap to the crumb. */
+const BACK_GAP = 8;
+/** A crumb narrower than this isn't worth showing; the crumb's widest. */
+const CRUMB_MIN = 140, CRUMB_MAX = 420;
+/** Shorter than this (points), a screen keeps the tabs in the top row. */
+const SHORT = 560;
+/** Until they've laid out: about how wide the tabs and the right-hand buttons are. */
+const GUESS = { tabs: 232, right: 330 };
+/** Where the row the tabs sit on starts (from the editor's top), and the line under them (the tool tips). */
+export const TABS_TOP = { row: 12, below: 66 }, TIP_TOP = { row: 66, below: 120 };
+/** A part of the row laid out `w` wide (the right-hand buttons: as they are in this mode). Nothing changes for less than a point. */
+export function setTopRoom(part, w) {
+    const r = ui.topRoom, now3d = part === 'right' && is3d();
+    if (Math.abs(r[part] - w) < 1 && (part === 'tabs' || r.right3d === now3d))
+        return;
+    ui.topRoom = part === 'tabs' ? { ...r, tabs: w } : { ...r, right: w, right3d: now3d };
+    notify();
+}
+/**
+ * The tabs' width, and the right-hand buttons' as Draft has them: 3D has no Layers button, and it's counted anyway, so
+ * switching between them never moves the tabs.
+ */
+function widths(size) {
+    const r = ui.topRoom;
+    return { tabs: r.tabs || GUESS.tabs, right: r.right ? r.right + (r.right3d ? size + BACK_GAP : 0) : GUESS.right };
+}
+/** The top row on a screen `width` by `height` (round buttons `size` across). */
+export function topLayout(width, height, phone, size = 46) {
+    const m = widths(size), back = EDGE + size + BACK_GAP, end = width - EDGE - m.right - GAP;
+    if (phone)
+        return { below: true, left: null, crumb: 0 };
+    // centred: the crumb up to the tabs, the buttons clear of them
+    const side = width / 2 - m.tabs / 2 - GAP, centred = side >= m.right + EDGE;
+    if (centred && side - back >= CRUMB_MIN)
+        return { below: false, left: null, crumb: Math.min(CRUMB_MAX, side - back) };
+    if (height < SHORT) {
+        if (centred)
+            return { below: false, left: null, crumb: 0 };
+        const from = EDGE + size + GAP;
+        if (end - from >= m.tabs)
+            return { below: false, left: (from + end) / 2 - m.tabs / 2, crumb: 0 };
+    }
+    const crumb = Math.min(CRUMB_MAX, end - back);
+    return { below: true, left: null, crumb: crumb >= CRUMB_MIN ? crumb : 0 };
+}
+/** The layout as a string, for a component's key (it's drawn again when this changes). */
+export const topKey = (l) => [l.below, l.left == null ? '' : Math.round(l.left), Math.round(l.crumb)].join(',');
+//# sourceMappingURL=topRow.js.map

package/dist/react/topRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"topRow.js","sourceRoot":"","sources":["../../src/react/topRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;EAQE;AAEF,uFAAuF;AACvF,MAAM,IAAI,GAAG,EAAE,EAAE,GAAG,GAAG,EAAE,CAAC;AAC1B,0CAA0C;AAC1C,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,0EAA0E;AAC1E,MAAM,SAAS,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,CAAC;AACvC,0EAA0E;AAC1E,MAAM,KAAK,GAAG,GAAG,CAAC;AAClB,sFAAsF;AACtF,MAAM,KAAK,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAExC,6GAA6G;AAC7G,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,OAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAWlF,qIAAqI;AACrI,MAAM,UAAU,UAAU,CAAC,IAAsB,EAAE,CAAS;IAC1D,MAAM,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,KAAK,GAAG,IAAI,KAAK,OAAO,IAAI,IAAI,EAAE,CAAC;IACzD,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC;QAAE,OAAO;IAClF,EAAE,CAAC,OAAO,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IACtF,MAAM,EAAE,CAAC;AACX,CAAC;AAED;;;GAGG;AACH,SAAS,MAAM,CAAC,IAAY;IAC1B,MAAM,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC;IACrB,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;AACpH,CAAC;AAED,iFAAiF;AACjF,MAAM,UAAU,SAAS,CAAC,KAAa,EAAE,MAAc,EAAE,KAAc,EAAE,IAAI,GAAG,EAAE;IAChF,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,EAAE,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC;IAC1F,IAAI,KAAK;QAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IACxD,+DAA+D;IAC/D,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC;IAC5E,IAAI,OAAO,IAAI,IAAI,GAAG,IAAI,IAAI,SAAS;QAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;IACtH,IAAI,MAAM,GAAG,KAAK,EAAE,CAAC;QACnB,IAAI,OAAO;YAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAC3D,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;QAC/B,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,IAAI;YAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IACnG,CAAC;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC5E,CAAC;AAED,0FAA0F;AAC1F,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAAY,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC"}

package/dist/react/touch.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether the person is on a touch screen: a device, a coarse pointer in a browser (an iPad), or a finger the last
+ * thing on the drawing. A keypad swipes to the job's measurements there, as BOLDR's own keypads do; a desktop has a
+ * button for them.
+ */
+export declare const touchUI: () => boolean;

package/dist/react/touch.js

@@ -0,0 +1,9 @@
+import { Platform } from 'react-native';
+import { ed } from '../app/state';
+/**
+ * Whether the person is on a touch screen: a device, a coarse pointer in a browser (an iPad), or a finger the last
+ * thing on the drawing. A keypad swipes to the job's measurements there, as BOLDR's own keypads do; a desktop has a
+ * button for them.
+ */
+export const touchUI = () => Platform.OS !== 'web' || ed.lastPointerTouch || (typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches);
+//# sourceMappingURL=touch.js.map

package/dist/react/touch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch.js","sourceRoot":"","sources":["../../src/react/touch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAY,EAAE,CACnC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,EAAE,CAAC,gBAAgB,IAAI,CAAC,OAAO,UAAU,KAAK,UAAU,IAAI,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC"}

package/dist/render/ctx.d.ts

@@ -16,16 +16,24 @@ export interface DrawCtx {
     translate(x: number, y: number): void;
     /** radians, clockwise on screen */
     rotate(angle: number): void;
+    scale(x: number, y: number): void;
     setLineDash(segments: number[]): void;
     beginPath(): void;
     moveTo(x: number, y: number): void;
     lineTo(x: number, y: number): void;
     closePath(): void;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
     /** as the HTML canvas: angles in radians, clockwise on screen unless `counterclockwise` */
     arc(x: number, y: number, r: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
     arcTo(x1: number, y1: number, x2: number, y2: number, r: number): void;
     rect(x: number, y: number, w: number, h: number): void;
     roundRect(x: number, y: number, w: number, h: number, r: number): void;
+    /**
+     * Optional: start a path that is a shape `draw` makes (drawn there with its top left at x, y), for a shape drawn many
+     * times a frame — every chip's and badge's box. An engine that has it keeps each shape (by `key`) once and moves it
+     * into place, instead of describing it again each time; without it, `draw` draws it there.
+     */
+    shape?(key: string, x: number, y: number, draw: (c: DrawCtx, x: number, y: number) => void): void;
     fill(): void;
     stroke(): void;
     clip(): void;

package/dist/render/draw.d.ts

@@ -3,6 +3,7 @@ import type { Page, XY } from '../model/types';
 import { type Xform } from './view';
 import type { DrawCtx } from './ctx';
 type C2D = DrawCtx;
+/** A rounded rectangle's path, its corners smoothed as Figma's 60% ("iOS"): render/squircle.ts. */
 export declare function rr(c: C2D, x: number, y: number, w: number, h: number, r: number): void;
 export interface ChipOpts {
     bg: string;
@@ -15,9 +16,15 @@ export interface ChipOpts {
     kind?: HitChip['kind'];
     id?: string;
     rot?: number;
+    /** a link mark before the text (a value set elsewhere: another view, or a measurement of the job) */
+    mark?: 'link';
 }
+/** Blue for outlined (linked) chips: the lighter blue on a dark canvas, so the text stays readable. */
+export declare function linkBlue(): string;
+/** A small chain-link mark centred on (x, y). */
+export declare function linkMark(c: C2D, x: number, y: number, color: string): void;
 /** Rounded label on the canvas; registers a hit region when `kind` is given. */
-export declare function chip(c: C2D, text: string, cx: number, cy: number, { bg, fg, border, font, pad, h, minW, kind, id, rot }: ChipOpts): number;
+export declare function chip(c: C2D, text: string, cx: number, cy: number, { bg, fg, border, font, pad, h, minW, kind, id, rot, mark }: ChipOpts): number;
 export declare const DIAM_DEFAULT_ANG: number;
 /**
  * Dimension tool, between the two taps: a dashed line from the first pick to what's under the pointer,
@@ -46,6 +53,31 @@ export declare function draw(): void;
  * can be tapped, in drawing order — what was drawn is what can be tapped.
  */
 export declare function drawPlan(ctx: C2D, W: number, H: number): HitChip[];
+/**
+ * How a host that keeps the drawing as a picture (see PlanCanvas.native) wants it drawn. It moves and scales the
+ * picture with the view until it's redrawn, so: `margin` px of background and grid past each edge of the screen (so
+ * a picture zoomed out or panned a little shows no edge), and what stays put on the screen however the view moves —
+ * the wall view's key plan, the conflict border — drawn on `fixed` instead. Without them, everything is drawn on the
+ * one canvas, to the screen's edges (the browser).
+ */
+/**
+ * `layer`: just the background, grid and photos and plans ('under'), or everything over them ('above') — a host that
+ * keeps them apart redraws the photos alone as one is turned or moved. Without it, all of it.
+ */
+export interface KeepOpts {
+    margin?: number;
+    fixed?: C2D;
+    layer?: 'under' | 'above';
+}
+/**
+ * The drawing without its moving parts (see drawPlanOverlay), for a host that keeps it as a picture and redraws only
+ * those parts as the pointer moves. Returns the tap targets, as drawPlan does.
+ */
+export declare function drawPlanStatic(ctx: C2D, W: number, H: number, opts?: KeepOpts): HitChip[];
+/** The photos and plans under the drawing, with the background and grid (see KeepOpts.layer). */
+export declare function drawPlanUnder(ctx: C2D, W: number, H: number, opts?: KeepOpts): void;
+/** The parts that move with the pointer: a tool's preview, the snap marker, the selection box, the conflict tint. */
+export declare function drawPlanOverlay(ctx: C2D, W: number, H: number, opts?: KeepOpts): void;
 /** Page thumbnail for the drawer (no chips, no definition colors). */
 export declare function drawThumb(canvas: HTMLCanvasElement, pg: Page): void;
 /** A page's walls, lines and spaces fitted into w × h, without labels (page thumbnails, file previews). */