@reekon-tools/boldr-cad 1.3.0 → 1.5.0

package/src/react/barScroll.ts

@@ -0,0 +1,57 @@
+import { C } from './theme';
+
+/*
+  A bottom bar too long for the screen scrolls, and has to look like it does (the user's call, 2026-10-27: "on mobile
+  it is hard to tell that the bottom bar is scrollable"). Three things say so, in react/BottomBar.tsx:
+  - a fade at each end that has more of the bar past it, there as it's scrolled;
+  - its end always cuts through a button, never at a gap: there, what shows looks like all there is (barCut);
+  - the first bar of a session that doesn't fit slides a little way along and back, unless Reduce Motion is on.
+*/
+
+/** A button's place along the bar's buttons: from their start, and its width. */
+export type Span = readonly [x: number, w: number];
+
+/** How much of a button the end leaves showing: what it's cut to, and the shares that already read as cut. */
+export const CUT = 0.6, CUT_MIN = 0.3, CUT_MAX = 0.8;
+/** A fade's width; how far the bar scrolls as one comes or goes. */
+export const FADE = 20, FADE_RAMP = 24;
+/** The nudge: how far along, how long after the bar shows, and how long before it goes back (ms). */
+export const NUDGE = 40, NUDGE_AFTER = 400, NUDGE_HOLD = 450;
+
+/**
+ * The buttons' places along the bar, from the widths of everything in it in order (a divider's too) and the gap
+ * between each: null while any is still unmeasured.
+ */
+export function barSpans(items: readonly { w: number | undefined; button: boolean }[], gap: number): Span[] | null {
+  const out: Span[] = [];
+  let x = 0;
+  for (const { w, button } of items) {
+    if (w == null) return null;
+    if (button) out.push([x, w]);
+    x += w + gap;
+  }
+  return out;
+}
+
+/**
+ * How much of a scrolling bar shows, given `room` for it: all of that, if it already ends partway through a button
+ * (between CUT_MIN and CUT_MAX of it showing); otherwise less, ending at CUT of the last button that leaves showing.
+ */
+export function barCut(spans: readonly Span[], room: number): number {
+  let best = 0;
+  for (const [x, w] of spans) {
+    const f = (room - x) / w;
+    if (f >= CUT_MIN && f <= CUT_MAX) return room;
+    const c = x + CUT * w;
+    if (c <= room && c > best) best = c;
+  }
+  return best || room;
+}
+
+/** A fade, as an SVG: the bar's grey, clear at one side, whole at the other (`to`: the side that's whole). */
+export const fadeSvg = (to: 'left' | 'right'): string => {
+  const id = 'barFade' + (to === 'left' ? 'L' : 'R'), [a, b] = to === 'right' ? [0, 1] : [1, 0];
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${FADE}" height="54" viewBox="0 0 1 1" preserveAspectRatio="none">` +
+    `<defs><linearGradient id="${id}" x1="${a}" y1="0" x2="${b}" y2="0"><stop offset="0" stop-color="${C.g2}" stop-opacity="0"/>` +
+    `<stop offset="1" stop-color="${C.g2}" stop-opacity="1"/></linearGradient></defs><rect width="1" height="1" fill="url(#${id})"/></svg>`;
+};

package/src/react/corners.ts

@@ -1,4 +1,4 @@
-import { Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, type ImageStyle, type TextStyle, type ViewStyle } from 'react-native';
 import { CORNER_SMOOTHING } from '../render/squircle';
 
 /*
@@ -44,9 +44,12 @@ export function smoothCorners<T extends Style>(st: T): T {
   return out as T;
 }
 
+/** A sheet's styles by name. (React Native 0.88's generated types have no `StyleSheet.NamedStyles`.) */
+type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
+
 /** StyleSheet.create, every style's corners smoothed (smoothCorners). */
-export function createSheet<T extends StyleSheet.NamedStyles<T>>(styles: T & StyleSheet.NamedStyles<unknown>): T {
+export function createSheet<T extends NamedStyles<T>>(styles: T): T {
   const out = {} as Record<string, unknown>;
   for (const k of Object.keys(styles)) out[k] = smoothCorners((styles as Record<string, Style>)[k]);
-  return StyleSheet.create(out as T);
+  return StyleSheet.create(out as Record<string, ViewStyle | TextStyle | ImageStyle>) as unknown as T;
 }

package/src/react/host.ts

@@ -1,6 +1,6 @@
 import { applyReading, laser } from '../editor/laser';
 import { store } from '../model/store';
-import { setSurveyCursor, takeSurveyPoint } from '../tools/survey';
+import { closeSurveyRun, setSurveyCursor, takeSurveyPoint } from '../tools/survey';
 import { notify } from './store';
 
 /*
@@ -49,6 +49,19 @@ export function surveyPoint(x: number, y: number, capture?: unknown): boolean {
   return ok;
 }
 
+/**
+ * Close the templating device's open run, from a button that means "close" (BOLDR's T1R's D) — the bar's Close shape:
+ * the last edge back to the first point, the corners it makes, and a space. It takes no point; a host whose device
+ * also measured one on that press drops it. False when no drawing is open, there's no run of 3 points or more, or it
+ * can't now (a wall view or keypad open); the editor says why.
+ */
+export function surveyClose(): boolean {
+  if (!editorHost.open || !store.project) return false;
+  const ok = closeSurveyRun();
+  notify();
+  return ok;
+}
+
 /**
  * The templating device's live point — where its next surveyPoint would land — on the same axes as surveyPoint, or
  * null to hide it (the device stopped, its reading went stale, the host left the screen). Drawn as a ring, with the

package/src/react/motion.tsx

@@ -51,7 +51,7 @@ export const reducedMotion = (): boolean => reduceMotion;
  * device, the wait before it moved). `mounted` says whether to draw it at all; the style hides it when it's away.
  */
 export function usePopup(open: boolean, from: { x?: number; y?: number }, origin: string, keep = false): {
-  present: boolean; mounted: boolean; style: Animated.WithAnimatedObject<ViewStyle>;
+  present: boolean; mounted: boolean; style: Animated.WithAnimatedValue<ViewStyle>;
 } {
   const v = useRef(new Animated.Value(open ? 1 : 0)).current, [present, setPresent] = useState(open), been = useRef(open);
   if (open) been.current = true;
@@ -77,9 +77,9 @@ export function usePopup(open: boolean, from: { x?: number; y?: number }, origin
         { translateY: v.interpolate({ inputRange: [0, 1], outputRange: [fy, 0] }) },
         { scale: v.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) },
       ],
-    }) as Animated.WithAnimatedObject<ViewStyle>, [v, fx, fy, origin]);
+    }) as Animated.WithAnimatedValue<ViewStyle>, [v, fx, fy, origin]);
   const shown = open || present;
-  const hidden = useMemo(() => [style, { display: 'none' as const }] as unknown as Animated.WithAnimatedObject<ViewStyle>, [style]);
+  const hidden = useMemo(() => [style, { display: 'none' as const }] as unknown as Animated.WithAnimatedValue<ViewStyle>, [style]);
   return { present: shown, mounted: shown || (keep && been.current), style: shown ? style : hidden };
 }
 
@@ -185,13 +185,13 @@ function SegOption({ label, on, onPress, onLayout, style, textStyle, onText, off
       onLayout={e => onLayout(e.nativeEvent.layout)} style={[segCenter, style, { backgroundColor: 'transparent' }]}>
       {NATIVE ? (
         <>
-          <Animated.Text style={[textStyle, { color: offText, opacity: ink }]}>{label}</Animated.Text>
+          <Animated.Text numberOfLines={1} style={[textStyle, { color: offText, opacity: ink }]}>{label}</Animated.Text>
           {/* (the chosen colour's label, exactly over the other) */}
           <View pointerEvents="none" style={segOver}>
-            <Animated.Text accessible={false} style={[textStyle, { color: onText, opacity: t }]}>{label}</Animated.Text>
+            <Animated.Text numberOfLines={1} accessible={false} style={[textStyle, { color: onText, opacity: t }]}>{label}</Animated.Text>
           </View>
         </>
-      ) : <Animated.Text style={[textStyle, { color: ink }]}>{label}</Animated.Text>}
+      ) : <Animated.Text numberOfLines={1} style={[textStyle, { color: ink }]}>{label}</Animated.Text>}
     </Tap>
   );
 }

package/src/render/draw.ts

@@ -1,8 +1,8 @@
 import { ed, isSel, type HitChip } from '../app/state';
 import { consPoints, curveDefined, isDim, lineDefined, measure } from '../model/constraints';
 import { hyp, norm2, normAng, projT } from '../model/geom';
-import { drivingDim, edgePoint, measureOpeningDim, refPoint, refS, widthEntered } from '../model/openings';
-import { arcAngles, curveFrame, dimEnds, dimRadius, edgeOf, gridSteps, OPENING_TICK_EXT, openingFrame, outsideSide, wallThick } from '../model/planGeom';
+import { drivingDim, edgePoint, hingeEdge, measureOpeningDim, refPoint, refS, widthEntered } from '../model/openings';
+import { angleCorner, angleLabel, arcAngles, curveFrame, dimEnds, dimRadius, edgeOf, gridSteps, OPENING_TICK_EXT, openingFrame, outsideSide, wallThick } from '../model/planGeom';
 import { faceCorner } from '../model/wallfaces';
 import { roomGeom } from '../model/rooms';
 import { wallPieces } from '../model/wallshape';
@@ -16,13 +16,15 @@ import { drawKeyPlan, drawWallBackdrop, drawWallChips, drawWallSelection, type E
 import type { Constraint, Page, Sketch, WallFace, XY } from '../model/types';
 import { fmtAng, fmtArea, fmtLen } from '../units';
 import { FONT, TH } from './theme';
-import { cvs, imgCache, keyPlanSize, mainT, nextThumbFrame, noteFont, noteHandles, noteTextBox, S, sketchBounds, underlayH, underlayHandles, underlayMid, type Xform } from './view';
+import { cvs, imageLinkBadge, imgCache, keyPlanSize, mainT, nextThumbFrame, noteFont, noteHandles, noteTextBox, S, sketchBounds, underlayH, underlayHandles, underlayMid, underlaySrc, type Xform } from './view';
 import type { DrawCtx } from './ctx';
 import { dashFor, isSegment, NOTE_TEXT_SIZE, noteLook, shapeOutline } from '../model/markup';
 import { strokeMarkup, strokeOutline } from './markup';
 import { drawLink } from './linkTile';
 import { isLink, linkInfoOf } from '../model/links';
 import { smoothRectPath } from './squircle';
+import { LINK_SVG } from './figmaIcons';
+import { drawSvgIcon, svgIcon } from './svgPath';
 
 type C2D = DrawCtx;
 
@@ -41,7 +43,10 @@ export function rr(c: C2D, x: number, y: number, w: number, h: number, r: number
 export interface ChipOpts {
   bg: string; fg: string; border?: [string, number?] | null; font?: string; pad?: number; h?: number; minW?: number;
   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) */
+  /**
+   * 'link': a measurement of the job sets it. The chip is then Figma's linked measurement (2795:77149): a white badge
+   * with the link icon before the value (LINKED), at the chip's own height and font, so it's the size of a plain chip.
+   */
   mark?: 'link';
 }
 
@@ -52,30 +57,46 @@ export function linkBlue(): string {
   return dark ? TH.lblue : TH.blue;
 }
 
-/** A small chain-link mark centred on (x, y). */
-export function linkMark(c: C2D, x: number, y: number, color: string): void {
-  c.save();
-  c.translate(x, y); c.rotate(-Math.PI / 4);
-  c.strokeStyle = color; c.lineWidth = 1.4;
-  c.beginPath(); c.roundRect(-6.5, -2.25, 7.5, 4.5, 2.25); c.roundRect(-1, -2.25, 7.5, 4.5, 2.25); c.stroke();
-  c.restore();
+/** Figma's link icon (render/figmaIcons.ts), read once. */
+const LINK_ICON = svgIcon(LINK_SVG);
+
+/** The link icon, `size` across, centred on (x, y): in its own dark grey, or `color`. */
+export function linkIcon(c: C2D, x: number, y: number, size: number, color?: string): void {
+  drawSvgIcon(c, LINK_ICON, 'link', x - size / 2, y - size / 2, size, color);
 }
 
-/** What a link mark takes before a chip's text. */
-const MARK_W = 14;
+/**
+ * A linked measurement's badge, as the frame draws it on its 30 px chip (Figma 2795:77149): 5 in from the chip's edges,
+ * 20 across with the 12 px link icon in its middle, 10 before the value, and the value 5 from the chip's end. A linked
+ * chip is the size of a plain one (the user's call, 2026-10-25: "the same size as the regular measurement tiles"), so
+ * the badge is drawn at the chip's own height: all of it scaled by h / 30.
+ */
+const LINKED = { h: 30, pad: 5, badge: 20, badgeR: 3.826, icon: 12, gap: 10 } as const;
 
-/** Rounded label on the canvas; registers a hit region when `kind` is given. */
-export function chip(c: C2D, text: string, cx: number, cy: number, { bg, fg, border, font = '600 12px', pad = 7, h = 22, minW = 0, kind, id, rot = 0, mark }: ChipOpts): number {
+/** The width and height chip() draws `text` at (and its font, set on `c`). */
+export function chipSize(c: C2D, text: string, { font = '600 12px', pad = 7, h = 22, minW = 0, mark }: ChipOpts): { w: number; h: number } {
   c.font = font + ' ' + FONT;
-  const mw = mark ? MARK_W : 0, w = Math.max(minW, c.measureText(text).width + pad * 2 + mw);
-  const x = cx - w / 2, y = cy - h / 2;
+  const room = mark ? (LINKED.pad * 2 + LINKED.badge + LINKED.gap) * (h / LINKED.h) : pad * 2;
+  return { w: Math.max(minW, c.measureText(text).width + room), h };
+}
+
+/** Rounded label on the canvas; registers a hit region when `kind` is given. */
+export function chip(c: C2D, text: string, cx: number, cy: number, opts: ChipOpts): number {
+  const { bg, fg, border, kind, id, rot = 0, mark } = opts;
+  const { w, h } = chipSize(c, text, opts), x = cx - w / 2, y = cy - h / 2;
   c.save();
   if (rot) { c.translate(cx, cy); c.rotate(rot); c.translate(-cx, -cy); }
   rr(c, x, y, w, h, 5);
   c.fillStyle = bg; c.fill();
   if (border) { c.lineWidth = border[1] || 1; c.strokeStyle = border[0]; c.stroke(); }
-  c.fillStyle = fg; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(text, cx + mw / 2, cy + 0.5);
-  if (mark) linkMark(c, x + pad + 4.5, cy, fg);
+  c.fillStyle = fg; c.textAlign = 'center'; c.textBaseline = 'middle';
+  if (mark) {
+    const k = h / LINKED.h, inset = LINKED.pad * k, bw = LINKED.badge * k, bx = x + inset, tx = bx + bw + LINKED.gap * k;
+    c.fillText(text, (tx + x + w - inset) / 2, cy + 0.5);
+    rr(c, bx, cy - bw / 2, bw, bw, LINKED.badgeR * k);
+    c.fillStyle = '#FFFFFF'; c.fill();
+    linkIcon(c, bx + bw / 2, cy, LINKED.icon * k);
+  } else c.fillText(text, cx, cy + 0.5);
   c.restore();
   if (kind) {
     const ext = rot ? Math.max(w, h) / 2 : 0;
@@ -105,14 +126,43 @@ function drawGrid(c: C2D, T: Xform, m = 0): void {
 function drawUnderlay(c: C2D, T: Xform): void {
   if (!settings.layers.underlay) return;
   for (const u of page().underlays) {
-    const im = imgCache(u.src);
-    if (!im || !im.complete || !im.naturalWidth) continue;
+    const im = imgCache(underlaySrc(u)), ready = !!im && im.complete && !!im.naturalWidth;
+    // (an expanded photo whose picture hasn't come yet, or is gone: where it is, as its tile's card)
+    if (!ready && !u.link) continue;
     // drawn about its middle, turned as it's set (clockwise as seen: the canvas turns that way)
     const h = underlayH(u), m = underlayMid(u), [x, y] = S(T, m.x, m.y), w = u.w * T.s, hh = h * T.s;
     c.save(); c.globalAlpha = u.opacity ?? 0.6;
     c.translate(x, y);
     if (u.rot) c.rotate((u.rot * Math.PI) / 180);
-    c.drawImage(im, -w / 2, -hh / 2, w, hh);
+    if (ready) c.drawImage(im!, -w / 2, -hh / 2, w, hh);
+    else {
+      c.fillStyle = '#2B2C2E'; c.fillRect(-w / 2, -hh / 2, w, hh);
+      if (linkInfoOf(u.link!)?.exists === false) {
+        c.font = '500 13px ' + FONT; c.fillStyle = '#9FA0A2'; c.textAlign = 'center'; c.textBaseline = 'middle';
+        c.fillText('Removed', 0, 0);
+      }
+    }
+    c.restore();
+  }
+}
+
+/**
+ * Each expanded photo's badge: its link icon in a white disc in its top-right corner (imageLinkBadge), over the drawing
+ * — always, as Skia's, selected or not, locked or not: it says the photo is the job's, and a tap on it opens it.
+ */
+function drawImageLinks(c: C2D, T: Xform): void {
+  if (!settings.layers.underlay) return;
+  const { W, H } = cvs;
+  for (const u of page().underlays) {
+    const b = imageLinkBadge(T, u);
+    if (!b || b.x < -b.r || b.y < -b.r || b.x > W + b.r || b.y > H + b.r) continue;
+    const r = b.r, disc = (cc: C2D, X: number, Y: number) => { cc.beginPath(); cc.arc(X + r, Y + r, r, 0, Math.PI * 2); };
+    c.save();
+    if (ed.mode === 'draft') c.globalAlpha = 0.75;
+    if (c.shape) c.shape('image link ' + r, b.x - r, b.y - r, disc); else disc(c, b.x - r, b.y - r);
+    c.fillStyle = '#FFFFFF'; c.fill();
+    c.lineWidth = 1; c.strokeStyle = 'rgba(24,26,28,.2)'; c.stroke();
+    linkIcon(c, b.x, b.y, r * 1.2, '#181A1C');
     c.restore();
   }
 }
@@ -131,18 +181,40 @@ function drawRooms(c: C2D, T: Xform, sk: Sketch, thumb?: boolean): void {
     c.fill();
     if (thumb) continue;
     const [cx, cy] = S(T, g.c.x, g.c.y);
-    c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillStyle = TH.label;
+    // (its area and perimeter once the drawing has its scale: before, only placeholders — just its name)
+    const nm = r.name, info = sk.unscaled ? '' : fmtArea(g.area) + '  ·  ' + fmtLen(g.per) + ' perim.';
     c.font = '600 14px ' + FONT;
-    const nm = r.name;
-    c.fillText(nm, cx, cy - 9);
-    c.font = '500 12px ' + FONT; c.fillStyle = TH.ink2;
-    c.fillText(fmtArea(g.area) + '  ·  ' + fmtLen(g.per) + ' perim.', cx, cy + 9);
+    const nw = c.measureText(nm).width;
+    c.font = '500 12px ' + FONT;
+    const iw = info ? c.measureText(info).width : 0;
+    const show = spaceLabel(T, g.inner, nw, iw);
+    if (!show.name) continue;
+    c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillStyle = TH.label;
     c.font = '600 14px ' + FONT;
-    const w = Math.max(c.measureText(nm).width, 140);
+    c.fillText(nm, cx, show.info ? cy - 9 : cy);
+    if (show.info) { c.font = '500 12px ' + FONT; c.fillStyle = TH.ink2; c.fillText(info, cx, cy + 9); }
+    const w = Math.max(nw, 140);
     addHit({ kind: 'room', id, x: cx - w / 2, y: cy - 20, w, h: 40 });
   }
 }
 
+/** Room left round a space's label on the screen, each side, points. */
+const SPACE_LABEL_PAD = 8;
+
+/**
+ * Which of a space's label shows: only what fits inside the space on the screen, so zoomed out it goes rather than
+ * cluttering the drawing (the user's call, 2026-10-29, as a tile's name goes: LINK_FULL_PX) — its area and perimeter
+ * first, then its name. `nameW`, `infoW`: their widths (no area line: 0).
+ */
+export function spaceLabel(T: Xform, inner: XY[], nameW: number, infoW: number): { name: boolean; info: boolean } {
+  let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+  for (const p of inner) { x0 = Math.min(x0, p.x); x1 = Math.max(x1, p.x); y0 = Math.min(y0, p.y); y1 = Math.max(y1, p.y); }
+  const w = (x1 - x0) * T.s, h = (y1 - y0) * T.s, pad = 2 * SPACE_LABEL_PAD;
+  // (one line of 14 pt; two, 18 apart, of 14 and 12)
+  const name = w >= nameW + pad && h >= 18 + pad;
+  return { name, info: name && infoW > 0 && w >= infoW + pad && h >= 36 + pad };
+}
+
 interface CurveWall { id: string; kind: 'circle' | 'arc'; thick: number; constr?: boolean }
 
 function curveWalls(sk: Sketch): CurveWall[] {
@@ -333,11 +405,13 @@ function drawOpenings(c: C2D, T: Xform, sk: Sketch): void {
       for (const k of [t / 6, -t / 6]) { const a = P(s0, k), b = P(s1, k); c.moveTo(a[0], a[1]); c.lineTo(b[0], b[1]); }
       c.stroke();
     } else {
-      const hinge = P(s0, (f * t) / 2), leaf = P(s0, f * (t / 2 + w));
+      // the leaf, open square to the wall from the jamb it hangs on, and its swing back to the other
+      const [hs, ls] = hingeEdge(o) === 's1' ? [s1, s0] : [s0, s1];
+      const hinge = P(hs, (f * t) / 2), leaf = P(hs, f * (t / 2 + w));
       c.beginPath(); c.moveTo(hinge[0], hinge[1]); c.lineTo(leaf[0], leaf[1]); c.stroke();
       const [hx, hy] = hinge, r = w * T.s;
       const a0 = Math.atan2(leaf[1] - hy, leaf[0] - hx);
-      const end = P(s1, (f * t) / 2);
+      const end = P(ls, (f * t) / 2);
       const a1 = Math.atan2(end[1] - hy, end[0] - hx);
       c.beginPath(); c.setLineDash([4, 3]); c.lineWidth = 1;
       const ccw = normAng(a1 - a0) > Math.PI;
@@ -423,12 +497,25 @@ function drawLock(c: C2D, x: number, y: number): void {
   c.restore();
 }
 
+/** The selected points and the selected lines' ends: what a constraint's icon still shows for with the icons off. */
+function selPoints(sk: Sketch): Set<string> {
+  const out = new Set<string>();
+  for (const s of ed.sel) {
+    if (s.type === 'line') { const l = sk.lines[s.id]; if (l) { out.add(l.a); out.add(l.b); } }
+    if (s.type === 'point') out.add(s.id);
+  }
+  return out;
+}
+
 /** Points: filled = fully defined, hollow = still free (shape cue paired with color). */
 function drawPoints(c: C2D, T: Xform, sk: Sketch): void {
   const { W, H } = cvs;
   const touch = ed.lastPointerTouch;
   // a cabinet's corners aren't grab points: it moves as one, like a door or window
   const cabCorners = new Set(Object.values((sk as WallFace).cabs ?? {}).flatMap(cabPoints));
+  // a locked point's padlock is a constraint icon: with the icons off, it shows only as the badges do, on what's
+  // selected (the user's call, 2026-10-26)
+  const locks = settings.showCons ? null : selPoints(sk);
   for (const id in sk.points) {
     const p = sk.points[id];
     const [x, y] = S(T, p.x, p.y);
@@ -447,47 +534,31 @@ function drawPoints(c: C2D, T: Xform, sk: Sketch): void {
     if (selected) { c.fillStyle = TH.yellow; c.fill(); c.lineWidth = 1.5; c.strokeStyle = TH.ink; c.stroke(); }
     else if (det) { c.fillStyle = ed.highlight.has(id) ? TH.red : p.origin ? TH.ink : inkForPoint(sk, id); c.fill(); }
     else { c.fillStyle = TH.bg; c.fill(); c.lineWidth = 1.8; c.strokeStyle = TH.ink; c.stroke(); }
-    if (p.fixed && !p.origin && !p.anchor) drawLock(c, x + 9, y - 14);
+    if (p.fixed && !p.origin && !p.anchor && (!locks || locks.has(id) || ed.highlight.has(id))) drawLock(c, x + 9, y - 14);
   }
 }
 
 type DimAnchor =
   | { m: XY; a: XY; b: XY; nx?: number; ny?: number; L?: number }
   | { m: XY; o: XY; r: number }
-  | { vtx: XY; bis: [number, number]; u1?: [number, number]; u2?: [number, number] };
+  | { vtx: XY; bis: [number, number]; u1?: [number, number]; u2?: [number, number]; len1?: number; len2?: number };
 
 function dimAnchor(sk: Sketch, c: Constraint): DimAnchor | null {
-  const P = (id: string) => sk.points[id];
-  if (c.type === 'dist') {
-    // (measured on a wall's face: from its corner to corner, the label off the face on that side)
+  if (c.type === 'dist' || c.type === 'pldist') {
+    // (a length measured on a wall's face: from its corner to corner, the label off the face on that side. Between
+    // parallel lines or walls: from face to face, slid along them.)
     const e = dimEnds(sk, c);
     if (!e) return null;
     const { a, b } = e;
     const dx = b.x - a.x, dy = b.y - a.y, L = hyp(dx, dy) || 1e-9, nx = -dy / L, ny = dx / L, off = c.off || 0;
     return { m: { x: (a.x + b.x) / 2 + nx * off, y: (a.y + b.y) / 2 + ny * off }, a, b, nx, ny, L };
   }
-  if (c.type === 'pldist') {
-    // (between walls' faces: from face to face)
-    const e = dimEnds(sk, c);
-    if (!e) return null;
-    return { m: { x: (e.a.x + e.b.x) / 2, y: (e.a.y + e.b.y) / 2 }, a: e.a, b: e.b };
-  }
   if (c.type === 'diam') {
     // (across a curved wall's face: its arrows on that face)
     const g = dimRadius(sk, c);
     return g ? { m: { x: g.o.x, y: g.o.y }, o: g.o, r: g.r } : null;
   }
-  if (c.type === 'angle') {
-    const l1 = sk.lines[c.l1!], l2 = sk.lines[c.l2!];
-    const sh = [l1.a, l1.b].find(p => p === l2.a || p === l2.b);
-    if (sh) {
-      const s = P(sh), o1 = P(l1.a === sh ? l1.b : l1.a), o2 = P(l2.a === sh ? l2.b : l2.a);
-      const u1 = norm2(o1.x - s.x, o1.y - s.y), u2 = norm2(o2.x - s.x, o2.y - s.y);
-      return { vtx: s, bis: norm2(u1[0] + u2[0], u1[1] + u2[1]), u1, u2 };
-    }
-    const a = P(l1.a), b = P(l1.b);
-    return { vtx: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, bis: [0, 1] };
-  }
+  if (c.type === 'angle') return angleCorner(sk, c);
   return null;
 }
 
@@ -509,35 +580,50 @@ function drawDims(c: C2D, T: Xform, sk: Sketch): void {
   if (!settings.layers.dims) return;
   for (const id in sk.cons) {
     const d = sk.cons[id];
-    if (!isDim(d) || d.layer === 'print' || d.elev) continue; // the wall view's own dimensions are its chips
+    if (!isDim(d) || d.elev) continue; // the wall view's own dimensions are its chips
     const A = dimAnchor(sk, d);
     if (!A) continue;
     const ref = d.driving === false, val = ref ? measure(sk, d) : d.value!;
     const selected = isSel('dim', id) || isSel('cons', id);
     const bad = ed.highlight.has(id) || ed.ana.bad.has(id);
     if (ref && !bad && !dimLive(sk, id, d)) continue;
-    // a measurement of the job sets it: outlined, with a link mark — red once the job's measurement is gone
+    // a measurement of the job sets it: the link badge before its value (chip()), on the chip's own colour — red once
+    // the job's measurement is gone
     const linked = !!d.measurementRef && !ref && !bad, gone = linked && linkInfoOf(d.measurementRef!)?.exists === false;
     let bg = ref ? TH.ref : TH.blue, fg = ref ? TH.reftext : '#fff';
-    if (bad) { bg = TH.red; fg = '#fff'; }
-    if (linked) { bg = TH.bg; fg = gone ? TH.red : d.type === 'angle' ? TH.purple : linkBlue(); }
-    const border: [string, number] | null = selected ? [TH.yellow, 2.5] : linked ? [fg, 1.5] : null;
+    if (bad || gone) { bg = TH.red; fg = '#fff'; }
+    const border: [string, number] | null = selected ? [TH.yellow, 2.5] : null;
     const mark = linked ? 'link' as const : undefined;
     const wrap = (s: string) => (ref ? '(' : '') + s + (ref ? ')' : '');
     if (d.type === 'angle' && 'vtx' in A) {
       const [vx, vy] = S(T, A.vtx.x, A.vtx.y);
+      // pulled off its corner: its arc out where the label is, the label riding on it; else a little arc at the
+      // corner, the label out along the bisector
+      const moved = angleLabel(sk, d), R = moved ? moved.r * T.s : 22;
       if (A.u1 && A.u2) {
         // arc between the two lines, so the angle reads as belonging to that corner
         const t1 = Math.atan2(-A.u1[1], A.u1[0]), t2 = Math.atan2(-A.u2[1], A.u2[0]);
         let sweep = t2 - t1;
         while (sweep > Math.PI) sweep -= 2 * Math.PI;
         while (sweep < -Math.PI) sweep += 2 * Math.PI;
-        c.save(); c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.purple; c.lineWidth = 1.2;
+        // (blue, as every other dimension is — the user's call, 2026-10-29; purple is the inference guides')
+        c.save(); c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue; c.lineWidth = 1.2;
         if (ref) c.setLineDash([3, 3]);
-        c.beginPath(); c.arc(vx, vy, 22, t1, t1 + sweep, sweep < 0); c.stroke(); c.restore();
+        c.beginPath(); c.arc(vx, vy, R, t1, t1 + sweep, sweep < 0); c.stroke();
+        // (pulled out past where a line ends: an extension line along it, out to the arc)
+        c.lineWidth = 1;
+        for (const [u, len] of [[A.u1, A.len1], [A.u2, A.len2]] as const) {
+          const from = (len ?? 0) * T.s;
+          if (moved && R > from + 2) { c.beginPath(); c.moveTo(vx + u[0] * from, vy - u[1] * from); c.lineTo(vx + u[0] * (R + 4), vy - u[1] * (R + 4)); c.stroke(); }
+        }
+        c.restore();
       }
-      chip(c, wrap(fmtAng(val)), vx + A.bis[0] * 50, vy - A.bis[1] * 50, linked ? { bg, fg, border, kind: 'dim', id, mark }
-        : { bg: bad ? TH.red : ref ? TH.ref : TH.purple, fg: ref ? TH.reftext : '#fff', border, kind: 'dim', id });
+      const text = wrap(fmtAng(val)), opts: ChipOpts = { bg, fg, border, kind: 'dim', id, mark };
+      // (left where it was drawn: 50 px out along the bisector, or as far as its corners stay clear of the corner — a
+      // linked chip is wider)
+      const sz = chipSize(c, text, opts), out = Math.max(50, Math.hypot(sz.w, sz.h) / 2 + 28);
+      const [lx, ly] = moved ? [vx + Math.cos(moved.ang) * R, vy - Math.sin(moved.ang) * R] : [vx + A.bis[0] * out, vy - A.bis[1] * out];
+      chip(c, text, lx, ly, opts);
       continue;
     }
     if (d.type === 'diam' && 'o' in A) {
@@ -547,7 +633,7 @@ function drawDims(c: C2D, T: Xform, sk: Sketch): void {
     if (!('a' in A)) continue;
     const [mx, my] = S(T, A.m.x, A.m.y);
     const lineColor = bad ? TH.red : ref ? TH.chipline : TH.blue;
-    if (d.type === 'dist' && A.nx != null && Math.abs((d.off || 0) * T.s) > 10) {
+    if ((d.type === 'dist' || d.type === 'pldist') && A.nx != null && Math.abs((d.off || 0) * T.s) > 10) {
       drawDimLeaders(c, T, A.a, A.b, A.nx, A.ny!, d.off!, lineColor, ref);
     } else if (d.type === 'pldist' || !d.line) {
       // (dashed only when it's a reference: a dashed line means the number holds nothing, wherever it's drawn)
@@ -720,7 +806,8 @@ export function drawRubberBand(c: C2D, T: Xform, from: XY, to: XY, snapped: bool
   if (snapped) endRing(c, x2, y2, TH.blue);
   c.restore();
   const L = hyp(to.x - from.x, to.y - from.y);
-  if (L * T.s > 24) chip(c, fmtLen(L), (x1 + x2) / 2, (y1 + y2) / 2 - 16, { bg: '#fff', fg: TH.blue, border: [TH.blue, 1.5] });
+  // (no distance on a drawing without its scale yet: it's only a placeholder)
+  if (L * T.s > 24 && !planSK().unscaled) chip(c, fmtLen(L), (x1 + x2) / 2, (y1 + y2) / 2 - 16, { bg: '#fff', fg: TH.blue, border: [TH.blue, 1.5] });
 }
 
 /**
@@ -751,7 +838,8 @@ export function drawPendingDim(c: C2D, T: Xform, p: { from: XY; to: XY; a: XY; b
   for (const q of [p.from, p.to]) { const [x, y] = S(T, q.x, q.y); endRing(c, x, y, TH.yellow); }
   c.restore();
   const [mx, my] = S(T, (p.a.x + p.b.x) / 2 + p.nx * p.off, (p.a.y + p.b.y) / 2 + p.ny * p.off);
-  chip(c, p.label, mx, my - (Math.abs(p.off * T.s) > 1 ? 0 : 16), { bg: TH.blue, fg: '#fff', border: [TH.yellow, 2] });
+  // (no label until one's typed, on a page whose sizes are still placeholders)
+  if (p.label) chip(c, p.label, mx, my - (Math.abs(p.off * T.s) > 1 ? 0 : 16), { bg: TH.blue, fg: '#fff', border: [TH.yellow, 2] });
 }
 
 /**
@@ -800,54 +888,10 @@ function drawDiameter(c: C2D, T: Xform, o: XY, r: number, d: Constraint, text: s
   arrowHead(c, p1, sx, sy);
   if (!d.rad) arrowHead(c, p2, -sx, -sy);
   c.restore();
-  c.font = (chipOpts.font || '600 12px') + ' ' + FONT;
-  const w = c.measureText(text).width + 14 + (chipOpts.mark ? MARK_W : 0);
+  const { w } = chipSize(c, text, chipOpts);
   chip(c, text, end[0] + side * (w / 2 + 2), end[1], chipOpts);
 }
 
-/** Architectural dimension strings on the Print dimensions layer (reference-only). */
-function drawPrintDims(c: C2D, T: Xform, sk: Sketch): void {
-  if (!settings.layers.print) return;
-  for (const id in sk.cons) {
-    const d = sk.cons[id];
-    if (d.layer !== 'print' || d.type !== 'dist') continue;
-    const a = sk.points[d.a!], b = sk.points[d.b!];
-    if (!a || !b) continue;
-    const dx = b.x - a.x, dy = b.y - a.y, L = hyp(dx, dy);
-    if (L < 1e-6) continue;
-    const nx = -dy / L, ny = dx / L, off = d.off || 24;
-    const pa = { x: a.x + nx * off, y: a.y + ny * off }, pb = { x: b.x + nx * off, y: b.y + ny * off };
-    const [ax, ay] = S(T, a.x, a.y), [bx, by] = S(T, b.x, b.y), [qax, qay] = S(T, pa.x, pa.y), [qbx, qby] = S(T, pb.x, pb.y);
-    const sgn = Math.sign(off) || 1, ex = nx * sgn * 6, ey = -ny * sgn * 6;
-    const selected = isSel('dim', id);
-    c.strokeStyle = selected ? TH.yellow : TH.ink; c.lineWidth = 1;
-    c.beginPath();
-    const gap = ax - qax || ay - qay ? 4 : 0, ga = norm2(qax - ax, qay - ay);
-    c.moveTo(ax + ga[0] * gap, ay + ga[1] * gap); c.lineTo(qax + ex, qay + ey);
-    c.moveTo(bx + ga[0] * gap, by + ga[1] * gap); c.lineTo(qbx + ex, qby + ey);
-    c.moveTo(qax, qay); c.lineTo(qbx, qby);
-    c.stroke();
-    const u = norm2(qbx - qax, qby - qay);
-    c.lineWidth = 1.8; c.beginPath();
-    for (const [x, y] of [[qax, qay], [qbx, qby]]) {
-      const tx = ((u[0] - u[1]) * 5) / Math.SQRT2, ty = ((u[1] + u[0]) * 5) / Math.SQRT2;
-      c.moveTo(x - tx, y - ty); c.lineTo(x + tx, y + ty);
-    }
-    c.stroke();
-    let ang = Math.atan2(qby - qay, qbx - qax);
-    if (ang > Math.PI / 2) ang -= Math.PI;
-    if (ang < -Math.PI / 2) ang += Math.PI;
-    const mx = (qax + qbx) / 2, my = (qay + qby) / 2, txt = fmtLen(L);
-    c.save(); c.translate(mx, my); c.rotate(ang);
-    c.font = '600 12px ' + FONT;
-    const w = c.measureText(txt).width + 8;
-    c.fillStyle = TH.bg; c.fillRect(-w / 2, -17, w, 14);
-    c.fillStyle = selected ? TH.yellow : TH.ink; c.textAlign = 'center'; c.textBaseline = 'alphabetic'; c.fillText(txt, 0, -6);
-    c.restore();
-    addHit({ kind: 'pdim', id, x: mx - w / 2 - 4, y: my - 18, w: w + 8, h: 24 });
-  }
-}
-
 /**
  * A badge's symbol drawn as lines rather than a character: ∥ ⊥ ∘ ◎ aren't in every typeface — on a device the
  * app's own (Inter) lacks them and Skia has nothing to fall back on, so they came out as the font's "missing glyph"
@@ -914,11 +958,7 @@ function badgeSpots(T: Xform, sk: Sketch, c: Constraint): [number, number][] {
 
 function drawBadges(c: C2D, T: Xform, sk: Sketch): void {
   const { W, H } = cvs;
-  const selIds = new Set(ed.sel.map(s => s.id)), selPts = new Set<string>();
-  for (const s of ed.sel) {
-    if (s.type === 'line') { const l = sk.lines[s.id]; if (l) { selPts.add(l.a); selPts.add(l.b); } }
-    if (s.type === 'point') selPts.add(s.id);
-  }
+  const selIds = new Set(ed.sel.map(s => s.id)), selPts = selPoints(sk);
   for (const id in sk.cons) {
     const k = sk.cons[id];
     if (isDim(k) || k.elev) continue;
@@ -1162,7 +1202,6 @@ function paintPlanView(ctx: C2D, sk: Sketch, m: number, under = true): void {
   if (settings.layers.rooms) drawRooms(ctx, T, sk);
   if (settings.layers.cabinets) drawCabinetFootprints(ctx, T, sk);
   drawWalls(ctx, T, sk); drawOpenings(ctx, T, sk); drawLines(ctx, T, sk); drawCurves(ctx, T, sk);
-  drawPrintDims(ctx, T, sk);
   if (ed.mode === 'draft') drawBadges(ctx, T, sk);
   // (the drawing's points only in Draft: Annotate can't move them, and shouldn't look as if it could — the user's
   // call, 2026-10-21)
@@ -1170,6 +1209,8 @@ function paintPlanView(ctx: C2D, sk: Sketch, m: number, under = true): void {
   drawOpeningAnchors(ctx, T, sk);
   drawDims(ctx, T, sk);
   drawOpeningDims(ctx, T, sk);
+  // (an expanded photo's badge over the drawing, under the markup: as it's tapped)
+  drawImageLinks(ctx, T);
   drawNotes(ctx, T, sk);
   drawNoteSelection(ctx, T);
 }
@@ -1190,7 +1231,6 @@ function paintWall(ctx: C2D, W: number, fixed: C2D): void {
   drawLines(ctx, T, sk); drawCurves(ctx, T, sk);
   // (over the edges — its own and its neighbours' — so a selected cabinet's outline shows all the way round)
   drawWallSelection(ctx, T, plan, f, sk);
-  drawPrintDims(ctx, T, sk);
   drawBadges(ctx, T, sk);
   if (ed.mode === 'draft') drawPoints(ctx, T, sk);
   drawDims(ctx, T, sk);