@reekon-tools/boldr-cad 1.3.0 → 1.5.0

package/src/render/elevation.ts

@@ -5,7 +5,7 @@ import { cabPoints, cornerAnchor, emptyFace, openingAnchor } from '../model/face
 import { edgeS, openingSpan, pickBetween, refS, sameRef, widthEntered } from '../model/openings';
 import type { Constraint, OpeningDim, OpeningEdge, OpeningRef, Sketch, WallFace } from '../model/types';
 import { fmtLen } from '../units';
-import { chip, linkBlue, linkMark } from './draw';
+import { chip, linkBlue, linkIcon } from './draw';
 import { FONT, TH } from './theme';
 import { S, type Xform } from './view';
 import type { DrawCtx } from './ctx';
@@ -35,7 +35,8 @@ export interface ElevHit { x: number; y: number; w: number; h: number; act: Elev
 
 /**
  * Chip look: locked blue, reference grey in parentheses, unlocked (just measured) neutral grey, red when it can't be met,
- * and 'linked': locked, but set in another view (the floor plan) — an outlined blue chip with a link mark, read-only here.
+ * and 'linked': locked, but set in another view (the floor plan) — an outlined blue chip with the link icon, read-only
+ * here. (Not a linked measurement's chip: that's one of the job's, set from outside the drawing — chip()'s `mark`.)
  */
 type Look = 'drive' | 'ref' | 'free' | 'bad' | 'linked';
 const LOOK = (look: Look) => look === 'drive' ? { bg: TH.blue, fg: '#fff', line: TH.blue } : look === 'bad' ? { bg: TH.red, fg: '#fff', line: TH.red }
@@ -75,7 +76,7 @@ function dim(c: C2D, p: [number, number], q: [number, number], nx: number, ny: n
   // a number that holds nothing (dashed) reads in parentheses, as in the plan
   const linked = look === 'linked', text = dashed ? '(' + label + ')' : linked ? '  ' + label : label; // (figure spaces: room for the link mark)
   const w = chip(c, text, cx, cy, { bg: st.bg, fg: st.fg, font: '600 11.5px', h, pad: 6, border: selected ? [TH.yellow, 2] : linked ? [st.line, 1.5] : null });
-  if (linked) linkMark(c, cx - w / 2 + 11, cy, st.fg);
+  if (linked) linkIcon(c, cx - w / 2 + 11, cy, 10, st.fg);
   return { x: cx - w / 2 - 4, y: cy - h / 2 - 4, w: w + 8, h: h + 8 };
 }
 
@@ -433,7 +434,7 @@ export function drawWallChips(c: C2D, T: Xform, sk: Sketch, f: ElevFrame, face:
   }
   next += lostRows.length;
   // the wall's length comes from the floor plan: linked (outlined blue) when a dimension locks it there, grey when free
-  const planLocked = Object.values(sk.cons).some(cn => cn.type === 'dist' && cn.line === f.lid && cn.driving !== false && cn.layer !== 'print');
+  const planLocked = Object.values(sk.cons).some(cn => cn.type === 'dist' && cn.line === f.lid && cn.driving !== false);
   const anyRow = rows.some(r => r.length) || next > 1;
   tag(S(T, f.face[0], 0), S(T, f.face[1], 0), 0, anyRow ? ROW0 + ROW * next : ROW0, fmtLen(f.face[1] - f.face[0]), planLocked ? 'linked' : 'free', { k: 'len' });
   // the wall's height: blue once entered, grey while it's the default

package/src/render/figmaIcons.ts

@@ -1,6 +1,7 @@
 /*
   Icons drawn in a Figma frame, kept exactly as Figma exports them (their own size, viewBox and colours) rather than
-  redrawn on the rail's 24 grid: the Pages panel's Delete and + Page (Figma 2548:101989).
+  redrawn on the rail's 24 grid: the Pages panel's Delete and + Page (Figma 2548:101989), and the link icon on a
+  linked measurement's chip (Figma 2795:77149), which the canvas draws from its paths (render/svgPath.ts).
 */
 
 /** Delete page: a trash can, white, for the red pill. */
@@ -20,3 +21,18 @@ export const PLUS_SVG = `<svg preserveAspectRatio="none" overflow="visible" styl
 <path id="Vector" d="M9.25 0.125C9.58152 0.125 9.89937 0.256791 10.1338 0.491211C10.3682 0.725631 10.5 1.04348 10.5 1.375V8H17.125C17.4565 8 17.7744 8.13179 18.0088 8.36621C18.2432 8.60063 18.375 8.91848 18.375 9.25C18.375 9.58152 18.2432 9.89937 18.0088 10.1338C17.7744 10.3682 17.4565 10.5 17.125 10.5H10.5V17.125C10.5 17.4565 10.3682 17.7744 10.1338 18.0088C9.89937 18.2432 9.58152 18.375 9.25 18.375C8.91848 18.375 8.60063 18.2432 8.36621 18.0088C8.13179 17.7744 8 17.4565 8 17.125V10.5H1.375C1.04348 10.5 0.725631 10.3682 0.491211 10.1338C0.256791 9.89937 0.125 9.58152 0.125 9.25C0.125 8.91848 0.256791 8.60063 0.491211 8.36621C0.725631 8.13179 1.04348 8 1.375 8H8V1.375C8 1.04348 8.13179 0.725631 8.36621 0.491211C8.60063 0.256791 8.91848 0.125 9.25 0.125Z" fill="#181A1C" stroke="#181A1C" stroke-width="0.25"/>
 </svg>`;
 export const PLUS_SIZE = { width: 18.5, height: 18.5 };
+
+/** Link: a chain link, dark grey, for the white badge on a linked measurement's chip. */
+export const LINK_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="link-svgrepo-com (2) 1" clip-path="url(#clip0_0_4)">
+<path id="Vector" d="M5.28769 1.15165C6.02508 0.414261 7.02519 0 8.06805 0C10.2396 0 12 1.76041 12 3.93198C12 4.97481 11.5858 5.97492 10.8484 6.71231L9.31065 8.25L8.25 7.18934L9.78772 5.65165C10.2438 5.19557 10.5 4.57698 10.5 3.93198C10.5 2.58884 9.41115 1.5 8.06805 1.5C7.42302 1.5 6.80444 1.75622 6.34835 2.21231L4.81066 3.75L3.75 2.68934L5.28769 1.15165Z" fill="#181A1C"/>
+<path id="Vector_2" d="M5.65165 9.78772L7.18934 8.25L8.25 9.31065L6.71231 10.8484C5.97492 11.5858 4.97481 12 3.93198 12C1.76041 12 0 10.2396 0 8.06805C0 7.0252 0.41426 6.02508 1.15165 5.28769L2.68934 3.75L3.75 4.81066L2.21231 6.34835C1.75622 6.80444 1.5 7.42302 1.5 8.06805C1.5 9.41115 2.58884 10.5 3.93198 10.5C4.57698 10.5 5.19557 10.2438 5.65165 9.78772Z" fill="#181A1C"/>
+<path id="Vector_3" d="M4.28039 8.78136L8.78038 4.28137L7.71973 3.2207L3.21973 7.72071L4.28039 8.78136Z" fill="#181A1C"/>
+</g>
+<defs>
+<clipPath id="clip0_0_4">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+export const LINK_SIZE = { width: 12, height: 12 };

package/src/render/hit.ts

@@ -6,12 +6,12 @@ import { roomValid } from '../model/sketch';
 import { page, SK } from '../model/store';
 import { edgePoint } from '../model/openings';
 import { elevOpen, wallBodyAt } from '../editor/elevation';
-import type { Note, OpeningEdge } from '../model/types';
+import type { LinkTarget, Note, OpeningEdge, Underlay } from '../model/types';
 import { cabinetFootprints } from '../model/facesolve';
 import { arcAngles, curveFrame, edgeId, OPENING_TICK_EXT, openingFrame, wallThick } from '../model/planGeom';
 import { noteLook, shapeOutline } from '../model/markup';
 import { smoothPolyline } from '../model/smooth';
-import { leaderPath, linkBox, mainT, noteHandles, noteTextBox, S, s2w, underlayH, underlayHandles, underlayLocal, type Xform } from './view';
+import { imageLinkBadge, leaderPath, linkBox, mainT, noteHandles, noteTextBox, S, s2w, underlayH, underlayHandles, underlayLocal, type Xform } from './view';
 
 /** The handle closest to (sx, sy) within `tol` px (small boxes put handles close together; take the nearest, not the first). */
 function nearestHandle<H extends { x: number; y: number }>(hs: H[], sx: number, sy: number, tol: number): H | null {
@@ -42,6 +42,20 @@ export function linkAt(sx: number, sy: number, touch = false): (Note & { link: N
   return null;
 }
 
+/**
+ * The expanded photo whose badge is under a screen point (its link icon, in its corner: a tap opens what it's for —
+ * a view-only one too), the top one. The badges are drawn over every image, so they're picked before any.
+ */
+export function imageLinkAt(sx: number, sy: number, touch = false): (Underlay & { link: LinkTarget }) | null {
+  if (!settings.layers.underlay || elevOpen()) return null;
+  const T = mainT(), ims = page().underlays;
+  for (let i = ims.length - 1; i >= 0; i--) {
+    const b = imageLinkBadge(T, ims[i]);
+    if (b && hyp(sx - b.x, sy - b.y) <= b.r + (touch ? 6 : 2)) return ims[i] as Underlay & { link: LinkTarget };
+  }
+  return null;
+}
+
 function notePointHit(n: Note, sx: number, sy: number, T: Xform, tol: number): boolean {
   if (n.type === 'link') return !!linkHit(T, n, sx, sy, tol);
   if (n.type === 'text') {
@@ -129,6 +143,9 @@ export function hitAny(sx: number, sy: number, { touch = false, only = null as s
       if (notePointHit(n, sx, sy, T, tol)) return { type: 'note', id: n.id };
     }
     if (!only) {
+      // an expanded photo's badge: a tap opens what it's for, a drag moves the photo
+      const lu = imageLinkAt(sx, sy, touch);
+      if (lu) return { type: 'underlay', id: lu.id, part: 'link' };
       // the topmost image under the point
       const [wx, wy] = s2w(sx, sy);
       for (let i = ims.length - 1; i >= 0; i--) {
@@ -145,7 +162,7 @@ export function hitAny(sx: number, sy: number, { touch = false, only = null as s
       const h = chips[i];
       if (h.weak) continue;
       if (sx >= h.x && sx <= h.x + h.w && sy >= h.y && sy <= h.y + h.h) {
-        if (h.kind === 'dim' || h.kind === 'pdim') return { type: 'dim', id: h.id, print: h.kind === 'pdim' };
+        if (h.kind === 'dim') return { type: 'dim', id: h.id };
         if (h.kind === 'cons') return { type: 'cons', id: h.id };
         if (h.kind === 'odim') return { type: 'odim', id: h.id, part: h.part };
         if (h.kind === 'room') return { type: 'room', id: h.id };
@@ -219,7 +236,7 @@ export function hitAny(sx: number, sy: number, { touch = false, only = null as s
     const [x, y] = S(T, g.o.x, g.o.y);
     const [wx, wy] = s2w(sx, sy);
     const th = Math.atan2(wy - g.o.y, wx - g.o.x);
-    const sweep = normAng(g.t1 - g.t0), at = normAng(th - g.t0);
+    const sweep = g.full ? 2 * Math.PI : normAng(g.t1 - g.t0), at = normAng(th - g.t0);
     const tw = sk.arcs[id].kind === 'wall' ? Math.max(0, ((sk.arcs[id].thick || 4.5) * T.s) / 2 - tol / 2) : 0;
     if (at <= sweep) consider('arc', id, Math.abs(hyp(x - sx, y - sy) - g.r * T.s) - tw);
   }

package/src/render/icons.ts

@@ -1,4 +1,9 @@
-/* 24px stroke icons (currentColor). */
+/*
+  24px stroke icons (currentColor). The bottom bar's are Figma's bar icon library ("BOTTOM TOOL BAR - CONSTRAINTS",
+  2528:101128: the user's call, 2026-10-27, "update icons"), drawn in one ink so they read in each of the bar's states
+  (white; dark on a toggle that's on; red when locked). Where Figma draws a part in its lighter grey (#E8EAED), it's
+  that ink at 0.88 here, and its grey fill (#626364) the ink at 0.17.
+*/
 export const IC: Record<string, string> = {
   select: '<path d="M6 3.5l12.5 7.2-5.6 1.4-2.6 5.4z"/>',
   line: '<path d="M6.6 17.4L17.4 6.6"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="5" r="2"/>',
@@ -9,17 +14,17 @@ export const IC: Record<string, string> = {
   // a corner cut off straight, its corners sharp (Figma 2523:101121)
   chamfer: '<path d="M2 22V11.79L9.45 2H22" stroke-linejoin="miter"/>',
   // a corner of wall as drawn in plan: an L-shaped band, hatched (not a box, so it isn't taken for the Rectangle)
-  wall: '<path d="M4 20V4h16v5H9v11z"/><path d="M4 16.5l5-5M4 10.5L10.5 4M12.5 9l5-5" stroke-width="1.3"/>',
+  wall: '<path d="M4 20V4H20V9H9V20H4Z"/><path d="M4 16.5L9 11.5M4 10.5L10.5 4M12.5 9L17.5 4" stroke-width="1"/>',
   rect: '<rect x="4.5" y="6" width="15" height="12" rx="1"/>',
   circle: '<circle cx="12" cy="12" r="7.5"/><circle cx="12" cy="12" r="1" fill="currentColor"/>',
   arc: '<path d="M4.5 13.5a8.5 8.5 0 0 1 15 0"/><circle cx="4.5" cy="13.5" r="1.6"/><circle cx="19.5" cy="13.5" r="1.6"/>', // (centred in the box: y 9–15)
-  dim: '<path d="M4 7v10M20 7v10M4 12h16M7.5 9.5L4.5 12l3 2.5M16.5 9.5l3 2.5-3 2.5"/>',
+  dim: '<path d="M3.5 7V17M20.5 7V17M4.5 12H19.5M7.5 14.5L4.5 12L7.5 9.5M16.5 14.5L19.5 12L16.5 9.5"/>',
   trim: '<circle cx="6.5" cy="7" r="2.6"/><circle cx="6.5" cy="17" r="2.6"/><path d="M8.6 8.6L20 18M8.6 15.4L20 6"/>',
-  offset: '<path d="M4 15L15 4M9 20L20 9"/><path d="M11 9l2.5 2.5"/>',
-  split: '<path d="M3 12H9.5M14.5 12H21"/><path d="M12 14.1969C13.2151 14.1969 14.2 13.2119 14.2 11.9969C14.2 10.7818 13.2151 9.79688 12 9.79688C10.785 9.79688 9.80005 10.7818 9.80005 11.9969C9.80005 13.2119 10.785 14.1969 12 14.1969Z" fill="currentColor"/><path d="M12 4V7M12 17V20"/>',
+  offset: '<path d="M4 15L15 4M9 20L20 9"/><path d="M11 9L13.5 11.5" stroke-width="1.5"/>',
+  split: '<path d="M3 12H9.5M14.5 12H21"/><path d="M11.9998 14.1969C13.2148 14.1969 14.1998 13.2119 14.1998 11.9969C14.1998 10.7818 13.2148 9.79688 11.9998 9.79688C10.7848 9.79688 9.7998 10.7818 9.7998 11.9969C9.7998 13.2119 10.7848 14.1969 11.9998 14.1969Z" fill="currentColor"/><path d="M12 4V7M12 17V20" stroke-width="1.5"/>',
   opening: '<path d="M5 20V6"/><path d="M5 6a14 14 0 0 1 14 14"/><path d="M3 20h18"/>',
   room: '<path d="M4 5h9v6h7v8H4z"/>',
-  constr: '<path d="M5 19L19 5" stroke-dasharray="2.5 3"/>',
+  constr: '<path d="M5 19L19 5" stroke-dasharray="2 4"/>',
   undo: '<path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>',
   redo: '<path d="M15 14l5-5-5-5"/><path d="M20 9H9.5a5.5 5.5 0 0 0 0 11H13"/>',
   pen: '<path d="M4 20l1-4.5L16 4.5l3.5 3.5L8.5 19z"/><path d="M13.5 7l3.5 3.5"/>',
@@ -33,10 +38,12 @@ export const IC: Record<string, string> = {
   image: '<path d="M16 5h6"/><path d="M19 2v6"/><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/><circle cx="9" cy="9" r="2"/>',
   text: '<path d="M5 6h14M12 6v13M9 19h6"/>',
   cloud: '<path d="M7 18a3 3 0 0 1-.4-6A4.5 4.5 0 0 1 15 9.6 3.5 3.5 0 1 1 17.5 18z"/>',
-  calib: '<path d="M3 15l12-12 6 6-12 12z"/><path d="M7 11l2 2M10 8l2 2M13 5l2 2"/>',
+  calib: '<path d="M3 15L15 3L18 6L21 9L9 21L3 15Z"/><path d="M7 12L9 14M10 9L12.5 11.5M13 6L15 8" stroke-width="1"/>',
   aselect: '<path d="M6 3.5l12.5 7.2-5.6 1.4-2.6 5.4z"/>',
   trash: '<path d="M5 7h14M10 7V4.5h4V7M7 7l1 13h8l1-13"/>',
   plus: '<path d="M12 5v14M5 12h14"/>',
+  // Lucide's expand: a photo's tile to the photo whole, and back
+  expand: '<path d="M21 21l-6-6M21 21v-4.8M21 21h-4.8"/><path d="M3 16.2V21M3 21h4.8M3 21l6-6"/><path d="M21 7.8V3M21 3h-4.8M21 3l-6 6"/><path d="M3 7.8V3M3 3h4.8M3 3l6 6"/>',
   fit: '<path d="M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5"/>',
   magnet: '<path d="M6 4v8a6 6 0 0 0 12 0V4h-4v8a2 2 0 0 1-4 0V4z"/><path d="M6 8h4M14 8h4"/>',
   eye: '<path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="2.8"/>',
@@ -51,8 +58,8 @@ export const IC: Record<string, string> = {
   // a circle half filled: how see-through
   opacity: '<circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor" stroke="none"/>',
   // two overlapping sheets: the front one solid (bring to front), or the back one (send to back)
-  tofront: '<path d="M13 3.5H5C4.17157 3.5 3.5 4.17157 3.5 5V13C3.5 13.8284 4.17157 14.5 5 14.5H13C13.8284 14.5 14.5 13.8284 14.5 13V5C14.5 4.17157 13.8284 3.5 13 3.5Z" stroke-width="1.5" stroke-dasharray="2.75 2.5"/><path d="M19 9.5H11C10.1716 9.5 9.5 10.1716 9.5 11V19C9.5 19.8284 10.1716 20.5 11 20.5H19C19.8284 20.5 20.5 19.8284 20.5 19V11C20.5 10.1716 19.8284 9.5 19 9.5Z" fill="currentColor" fill-opacity="0.35"/>',
-  toback: '<path d="M19 9.5H11C10.1716 9.5 9.5 10.1716 9.5 11V19C9.5 19.8284 10.1716 20.5 11 20.5H19C19.8284 20.5 20.5 19.8284 20.5 19V11C20.5 10.1716 19.8284 9.5 19 9.5Z" stroke-width="1.5" stroke-dasharray="2.75 2.5"/><path d="M13 3.5H5C4.17157 3.5 3.5 4.17157 3.5 5V13C3.5 13.8284 4.17157 14.5 5 14.5H13C13.8284 14.5 14.5 13.8284 14.5 13V5C14.5 4.17157 13.8284 3.5 13 3.5Z" fill="currentColor" fill-opacity="0.35"/>',
+  tofront: '<path d="M13 3.5H5C4.17157 3.5 3.5 4.17157 3.5 5V13C3.5 13.8284 4.17157 14.5 5 14.5H13C13.8284 14.5 14.5 13.8284 14.5 13V5C14.5 4.17157 13.8284 3.5 13 3.5Z" stroke-width="1" stroke-dasharray="2.75 2.5"/><path d="M19 9.5H11C10.1716 9.5 9.5 10.1716 9.5 11V19C9.5 19.8284 10.1716 20.5 11 20.5H19C19.8284 20.5 20.5 19.8284 20.5 19V11C20.5 10.1716 19.8284 9.5 19 9.5Z" stroke-opacity="0.88" fill="currentColor" fill-opacity="0.17"/>',
+  toback: '<path d="M13 3.5H5C4.17157 3.5 3.5 4.17157 3.5 5V13C3.5 13.8284 4.17157 14.5 5 14.5H13C13.8284 14.5 14.5 13.8284 14.5 13V5C14.5 4.17157 13.8284 3.5 13 3.5Z" stroke-opacity="0.88" fill="currentColor" fill-opacity="0.17"/><path d="M19 9.5H11C10.1716 9.5 9.5 10.1716 9.5 11V19C9.5 19.8284 10.1716 20.5 11 20.5H19C19.8284 20.5 20.5 19.8284 20.5 19V11C20.5 10.1716 19.8284 9.5 19 9.5Z" stroke-width="1" stroke-dasharray="2.75 2.5"/>',
   share: '<circle cx="6" cy="12" r="2.4"/><circle cx="18" cy="6" r="2.4"/><circle cx="18" cy="18" r="2.4"/><path d="M8.2 10.9l7.6-3.8M8.2 13.1l7.6 3.8"/>',
   dots: '<circle cx="5" cy="12" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="19" cy="12" r="1.6" fill="currentColor"/>',
   // BOLDR's save (Figma 2247:138414): a filled disk, the full 24 box
@@ -62,19 +69,19 @@ export const IC: Record<string, string> = {
   v: '<path d="M12 4v16"/><circle cx="12" cy="4" r="1.8" fill="currentColor"/><circle cx="12" cy="20" r="1.8" fill="currentColor"/>',
   par: '<path d="M5 18L13 6M11 18L19 6"/>',
   perp: '<path d="M4 19H20M10 19V5"/><path d="M10 14H15V19"/>',
-  tan: '<circle cx="12" cy="14" r="6"/><path d="M3 8h18"/>',
+  tan: '<path d="M2 8H22" stroke-opacity="0.88"/><path d="M12 20C15.3137 20 18 17.3137 18 14C18 10.6863 15.3137 8 12 8C8.68629 8 6 10.6863 6 14C6 17.3137 8.68629 20 12 20Z"/>',
   col: '<path d="M3 20L8.5 14.5M15.5 7.5L21 2"/><path d="M10.5 12.5L13.5 9.5" stroke-dasharray="1.5 2"/>',
   eq: '<path d="M5 9h14M5 15h14"/>',
-  mid: '<path d="M3.5 17L20.5 7"/><circle cx="12" cy="12" r="2.6" fill="currentColor"/>',
-  online: '<path d="M3.5 17L20.5 7"/><circle cx="15.5" cy="9.6" r="2.4"/>',
-  oncircle: '<circle cx="11" cy="13" r="7"/><circle cx="16" cy="8" r="2.2" fill="currentColor"/>',
+  mid: '<path d="M3.5 17L20.5 7" stroke-opacity="0.88"/><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="currentColor"/>',
+  online: '<path d="M3.5 17L20.5 7" stroke-opacity="0.88"/><path d="M15 13C16.6569 13 18 11.6569 18 10C18 8.34315 16.6569 7 15 7C13.3431 7 12 8.34315 12 10C12 11.6569 13.3431 13 15 13Z"/>',
+  oncircle: '<path d="M11 20C14.866 20 18 16.866 18 13C18 9.13401 14.866 6 11 6C7.13401 6 4 9.13401 4 13C4 16.866 7.13401 20 11 20Z" stroke-opacity="0.88"/><path d="M16 11C17.6569 11 19 9.65685 19 8C19 6.34315 17.6569 5 16 5C14.3431 5 13 6.34315 13 8C13 9.65685 14.3431 11 16 11Z" fill="currentColor"/>',
   lock: '<rect x="5.5" y="10.5" width="13" height="9.5" rx="2"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/>',
   unlock: '<rect x="5.5" y="10.5" width="13" height="9.5" rx="2"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 6.8-1.2"/>',
   angle: '<path d="M4 19h16M4 19L15 5"/><path d="M10.5 19a6.5 6.5 0 0 0-2.6-5.2"/>',
   diam: '<circle cx="12" cy="12" r="7.5"/><path d="M6.7 17.3L17.3 6.7"/>',
-  merge: '<path d="M4.2 14.1969C5.41503 14.1969 6.4 13.2119 6.4 11.9969C6.4 10.7818 5.41503 9.79688 4.2 9.79688C2.98497 9.79688 2 10.7818 2 11.9969C2 13.2119 2.98497 14.1969 4.2 14.1969Z"/><path d="M18 14.1969C19.2151 14.1969 20.2 13.2119 20.2 11.9969C20.2 10.7818 19.2151 9.79688 18 9.79688C16.785 9.79688 15.8 10.7818 15.8 11.9969C15.8 13.2119 16.785 14.1969 18 14.1969Z"/><path d="M6.5 12H14.5M12 14.5L14.5 12L12 9.5" stroke-width="1.5"/>',
+  merge: '<path d="M4.2 14.1969C5.41503 14.1969 6.4 13.2119 6.4 11.9969C6.4 10.7818 5.41503 9.79688 4.2 9.79688C2.98497 9.79688 2 10.7818 2 11.9969C2 13.2119 2.98497 14.1969 4.2 14.1969Z"/><path d="M19.2 14.1969C20.415 14.1969 21.4 13.2119 21.4 11.9969C21.4 10.7818 20.415 9.79688 19.2 9.79688C17.985 9.79688 17 10.7818 17 11.9969C17 13.2119 17.985 14.1969 19.2 14.1969Z" stroke-opacity="0.88"/><path d="M6.5 12H14.5M12 14.5L14.5 12L12 9.5" stroke-width="1.5"/>',
   chain: '<path d="M9 7H6a5 5 0 0 0 0 10h3M15 7h3a5 5 0 0 1 0 10h-3M8 12h8"/>',
-  thick: '<path d="M3 7h18M3 17h18"/><path d="M12 9.5v5M10.3 11l1.7-1.7 1.7 1.7M10.3 13l1.7 1.7 1.7-1.7"/>',
+  thick: '<path d="M3 4H21M3 17H21"/><path d="M11.9998 6.29688C11.9998 8.2495 11.9998 12.5474 11.9998 14.5M13.6998 7.99687L11.9998 6.29688L10.2998 7.99687M10.2998 13L11.9998 14.7L13.6998 13" stroke-width="1.5"/>',
   // a wall's length measured on its face on top, at the bottom, left or right (as the page shows the wall), or along its
   // centerline (a level wall's, a plumb one's): a wall dimension's choices
   faceT: '<path d="M3 16h18" stroke-width="1.3"/><path d="M3 8h18M6 5.5L3 8l3 2.5M18 5.5L21 8l-3 2.5"/>',
@@ -85,9 +92,9 @@ export const IC: Record<string, string> = {
   faceMidV: '<path d="M6 3v18M18 3v18" stroke-width="1.3"/><path d="M12 3v18M9.5 6L12 3l2.5 3M9.5 18L12 21l2.5-3"/>',
   // the distance between two walls (plumb ones; H: level): between their faces toward each other, their centerlines,
   // their far faces
-  spanIn: '<path d="M2.5 4v16M7 4v16M17 4v16M21.5 4v16" stroke-width="1.3"/><path d="M7 12h10M9.5 9.5L7 12l2.5 2.5M14.5 9.5L17 12l-2.5 2.5"/>',
-  spanMid: '<path d="M2.5 4v16M7 4v16M17 4v16M21.5 4v16" stroke-width="1.3"/><path d="M4.75 4v16M19.25 4v16" stroke-width="1" stroke-dasharray="1.5 2"/><path d="M4.75 12h14.5M7.25 9.5L4.75 12l2.5 2.5M16.75 9.5l2.5 2.5-2.5 2.5"/>',
-  spanOut: '<path d="M2.5 3v12M7 3v12M17 3v12M21.5 3v12" stroke-width="1.3"/><path d="M2.5 19.5h19M5 17L2.5 19.5 5 22M19 17l2.5 2.5L19 22"/>',
+  spanIn: '<path d="M2.5 4V20M7 4V20M17 4V20M21.5 4V20" stroke-opacity="0.88" stroke-width="1.3"/><path d="M8 12.5H16M10 15L8 12.5L10 10M14 15L16 12.5L14 10" stroke-width="1.5"/>',
+  spanMid: '<path d="M2.5 4V20M7.23684 4V20M17.7632 4V20M22.5 4V20" stroke-opacity="0.88" stroke-width="1.3"/><path d="M4.5 4V20M20.5 4V20" stroke-opacity="0.88" stroke-width="1" stroke-dasharray="1.5 2"/><path d="M4.75 12H19.25M7.25 14.5L4.75 12L7.25 9.5M16.75 14.5L19.25 12L16.75 9.5" stroke-width="1"/>',
+  spanOut: '<path d="M2.5 3V15M7 3V15M17 3V15M21.5 3V15" stroke-opacity="0.88" stroke-width="1.3"/><path d="M2.5 19.5H21.5M5 22L2.5 19.5L5 17M19 22L21.5 19.5L19 17" stroke-width="1.5"/>',
   spanInH: '<path d="M4 2.5h16M4 7h16M4 17h16M4 21.5h16" stroke-width="1.3"/><path d="M12 7v10M9.5 9.5L12 7l2.5 2.5M9.5 14.5L12 17l2.5-2.5"/>',
   spanMidH: '<path d="M4 2.5h16M4 7h16M4 17h16M4 21.5h16" stroke-width="1.3"/><path d="M4 4.75h16M4 19.25h16" stroke-width="1" stroke-dasharray="1.5 2"/><path d="M12 4.75v14.5M9.5 7.25L12 4.75l2.5 2.5M9.5 16.75l2.5 2.5 2.5-2.5"/>',
   spanOutH: '<path d="M3 2.5h12M3 7h12M3 17h12M3 21.5h12" stroke-width="1.3"/><path d="M19.5 2.5v19M17 5L19.5 2.5 22 5M17 19l2.5 2.5L22 19"/>',
@@ -101,7 +108,7 @@ export const IC: Record<string, string> = {
   cabinet: '<rect x="4" y="6" width="16" height="14" rx="1"/><path d="M12 6v14M10 11v3M14 11v3M3 20h18"/>',
   window: '<path d="M2.5 8.5v7M21.5 8.5v7M2.5 12h3M18.5 12h3"/><path d="M5.5 10h13M5.5 14h13M5.5 8.5v7M18.5 8.5v7"/>',
   door: '<path d="M5 20V6"/><path d="M5 6a14 14 0 0 1 14 14"/><path d="M3 20h18"/>',
-  convert: '<path d="M4 17c3-6 4.5 1 7.5-4.5S16 9 20 6"/><path d="M4 21h16" stroke-dasharray="3 2.5"/>',
+  convert: '<path d="M4 17C7 11 8.5 18 11.5 12.5C14.5 7 16 9 20 6"/><path d="M4 21H20" stroke-width="1.5" stroke-dasharray="3 3"/>',
   rename: '<path d="M4 20h4l11-11-4-4L4 16z"/>',
   typelen: '<rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 12h.01M11 12h.01M15 12h2"/>',
   finish: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
@@ -115,7 +122,7 @@ export const IC: Record<string, string> = {
   // a measurement linked to a dimension, and let go of (Lucide's link and unlink); saved to the drawing's group
   // (Lucide's folder-plus)
   open: '<path d="M15 3h6v6"/><path d="M10 14L21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
-  leader: '<rect x="3" y="3" width="8.5" height="8.5" rx="2"/><path d="M11.5 11.5L20 20"/><path d="M14.5 20H20v-5.5"/>',
+  leader: '<path d="M11.5 11.5L20 20" stroke-opacity="0.88"/><path d="M14.5 20H20V14.5" stroke-opacity="0.88"/><path d="M9.5 3H5C3.89543 3 3 3.89543 3 5V9.5C3 10.6046 3.89543 11.5 5 11.5H9.5C10.6046 11.5 11.5 10.6046 11.5 9.5V5C11.5 3.89543 10.6046 3 9.5 3Z"/>',
   link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
   unlink: '<path d="M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M5.17 11.75l-1.71 1.71a5 5 0 0 0 7.07 7.07l1.71-1.71"/><path d="M8 2v3M2 8h3M16 19v3M19 16h3"/>',
   // the link tiles' size (Lucide's scaling)

package/src/render/lens.ts

@@ -0,0 +1,52 @@
+import { ed } from '../app/state';
+import { lensPointer } from '../editor/gestures';
+import { clamp } from '../model/geom';
+import { TH } from './theme';
+import { mainT, S } from './view';
+
+/*
+  A device's magnifier (the user's call, 2026-10-27: "a zoom in box in the corner while dragging and creating lines or
+  shapes like skia annotation have", for "pencil / finger interactions only - do not include in web"). While a finger
+  or Apple Pencil is placing or dragging something, in Draft, Annotate or the wall view, a square in a top corner shows
+  the drawing around it twice as close, with a cross on the point it'll land on: the snap, when there is one, so what
+  it snaps to shows before it's let go. As Skia annotation's lens: a third of the screen's shorter side, its corners
+  rounded, a line round it. react/PlanCanvas.native.tsx draws it from the pictures the frame is already made of; the
+  browser's canvas has none.
+*/
+
+/** How much closer than the drawing; the share of the screen's shorter side it's across, and its bounds; its corners. */
+export const LENS_ZOOM = 2, LENS_SHARE = 0.3, LENS_MIN = 120, LENS_MAX = 240, LENS_R = 16;
+/** From the room's edges to it; how near a finger may come before it moves to the other top corner; its cross's arms. */
+export const LENS_GAP = 12, LENS_CLEAR = 40, LENS_ARM = 9;
+
+export interface Lens {
+  /** its top left and its side, on the canvas */
+  x: number; y: number; size: number;
+  /** the finger or pencil, which its middle shows */
+  fx: number; fy: number;
+  /** its cross, on the canvas: where what's placed lands (kept inside it) */
+  cx: number; cy: number;
+  /** its line and its cross, in the drawing's ink */
+  ink: string;
+}
+
+/**
+ * The lens on a W × H canvas, while a finger or pencil places or drags something (else null): in the top-left corner
+ * of the room the chrome leaves it (`room`: from the canvas's left and top) or, with the finger near there, the top
+ * right.
+ */
+export function lensNow(W: number, H: number, room: { left: number; top: number }): Lens | null {
+  const f = lensPointer();
+  if (!f) return null;
+  const size = Math.round(clamp(Math.min(W, H) * LENS_SHARE, LENS_MIN, LENS_MAX));
+  let x = room.left + LENS_GAP;
+  const y = room.top + LENS_GAP;
+  if (f.x < x + size + LENS_CLEAR && f.y < y + size + LENS_CLEAR) x = W - LENS_GAP - size;
+  // (the cross on the snap, as close again as the drawing is in it, and never past its edge)
+  const s = ed.snapState, [px, py] = s ? S(mainT(), s.x, s.y) : [f.x, f.y], half = size / 2 - LENS_ARM;
+  return {
+    x, y, size, fx: f.x, fy: f.y,
+    cx: x + size / 2 + clamp(LENS_ZOOM * (px - f.x), -half, half), cy: y + size / 2 + clamp(LENS_ZOOM * (py - f.y), -half, half),
+    ink: TH.ink,
+  };
+}