@toolpath/tool-drawing 0.2.0 → 0.3.0

package/dist/index.js

@@ -9,9 +9,9 @@ import {
 } from "./chunk-7ZID4QRO.js";
 import {
   assemblyOutline,
-  hasNeck,
-  isHolderProfile
-} from "./chunk-UBENO6GN.js";
+  isHolderProfile,
+  radiusAt
+} from "./chunk-WYHJGR7P.js";
 
 // src/model/frame.ts
 var DEFAULT_PADDING = 16;
@@ -80,7 +80,21 @@ var frameFor = (outline, box, options = {}) => {
 };
 
 // src/model/dimensions.ts
+import { hasNeck } from "@toolpath/tool-support";
+var SAME = 1e-6;
 var EMPTY = { lengths: [], widths: [], angles: [], cornerRadius: null };
+var oneLinePerSpan = (spans) => spans.reduce((lines, span) => {
+  const index = lines.findIndex(
+    (each) => Math.abs(each.from - span.from) < SAME && Math.abs(each.to - span.to) < SAME
+  );
+  if (index < 0) {
+    return [...lines, span];
+  }
+  const same = lines[index];
+  return lines.map(
+    (each, at2) => at2 === index ? { ...same, aliases: [...same.aliases ?? [], span.code] } : each
+  );
+}, []);
 var dimensionsFor = (assembly) => {
   const { tool, holder, stickout } = assembly;
   const { DC, LCF, OAL, SFDM, RE } = tool.geometry;
@@ -103,21 +117,21 @@ var dimensionsFor = (assembly) => {
   }
   if (SFDM !== void 0) {
     const shankFrom = necked && shoulderLength !== void 0 ? shoulderLength : LCF;
-    const shankTo = stickout ?? OAL ?? shankFrom;
+    const seated = holder?.colletProtrusion ?? null;
+    const shankTo = stickout !== null && seated !== null ? stickout - seated : stickout ?? OAL ?? shankFrom;
     widths.push({
       code: "SFDM",
       radius: SFDM / 2,
       at: (shankFrom + Math.max(shankFrom, shankTo)) / 2
     });
   }
-  const spans = [
-    { code: "LCF", from: 0, to: LCF }
-  ];
+  const spans = [{ code: "LCF", from: 0, to: LCF }];
   if (necked && shoulderLength !== void 0) {
     spans.push({ code: "shoulder-length", from: 0, to: shoulderLength });
   }
-  const below = tool.geometry.LBH;
-  if (below !== void 0 && below > 0) {
+  const below = tool.geometry.LBH !== void 0 && tool.geometry.LBH > 0 ? tool.geometry.LBH : null;
+  const buried = below !== null && holder !== null && stickout !== null && below > stickout + SAME;
+  if (below !== null && !buried) {
     spans.push({ code: "LBH", from: 0, to: below });
   }
   if (holder === null) {
@@ -127,7 +141,7 @@ var dimensionsFor = (assembly) => {
   } else if (stickout !== null) {
     spans.push({ code: "stickout", from: 0, to: stickout });
   }
-  const lengths = spans.slice().sort((a, b) => a.to - a.from - (b.to - b.from)).map((span, index) => ({ ...span, lane: index }));
+  const lengths = oneLinePerSpan(spans).sort((a, b) => a.to - a.from - (b.to - b.from)).map((span, index) => ({ ...span, lane: index }));
   const SIG = tool.geometry.SIG;
   const pointed = tool.form === "drill" || tool.form === "spot drill" || tool.form === "center drill";
   const angles = pointed && SIG !== void 0 && SIG > 0 ? [
@@ -144,104 +158,17 @@ var dimensionsFor = (assembly) => {
     cornerRadius: RE !== void 0 && RE > 0 ? RE : null
   };
 };
-var DIMENSION_LABEL = {
-  LBH: "below holder",
-  "shoulder-length": "shoulder",
-  "shoulder-diameter": "shoulder \u2300",
-  stickout: "stickout",
-  // A drill's included angle. "Tip angle" is what the table beside it calls
-  // the same number (Paul, 2026-09-01).
-  SIG: "tip angle"
-};
-var dimensionLabel = (code) => DIMENSION_LABEL[code] ?? code;
-var formatMillimetres = (millimetres) => `${String(Math.round(millimetres * 100) / 100)} mm`;
-var stackLabels = (boxes, gap = 0, fixed = []) => {
-  const placed = [...fixed];
-  const moved = /* @__PURE__ */ new Map();
-  const clashes = (one, two) => one.across < two.across + two.width && two.across < one.across + one.width && one.along < two.along + two.height + gap && two.along < one.along + one.height + gap;
-  for (const box of [...boxes].sort((a, b) => a.along - b.along)) {
-    let along = box.along;
-    let clash = true;
-    while (clash) {
-      clash = false;
-      for (const other of placed) {
-        if (clashes({ ...box, along }, other)) {
-          along = other.along + other.height + gap;
-          clash = true;
-          break;
-        }
-      }
-    }
-    placed.push({ ...box, along });
-    moved.set(box.key, along);
-  }
-  return moved;
-};
-var figureType = (fontSize) => fontSize * 0.85;
-var figureWidth = (lines, type) => lines.length === 0 ? 0 : (Math.max(...lines.map((each) => each.length)) + 1) * type * 0.56;
-var figureHeight = (lines, type) => type * 0.45 * 2 + type * 1.15 * lines;
-var bandOffset = (bands, band, room) => {
-  let at2 = room.arrow + room.gap;
-  for (let index = 0; index < band; index += 1) {
-    at2 += (bands[index] ?? 0) + room.gap * 2;
-  }
-  return at2;
-};
-var laneOffset = (bands, lane, room) => bandOffset(bands, lane, room) + (bands[lane] ?? 0) + room.gap;
-var bandRoom = (bands, room) => bands.length === 0 ? 0 : bandOffset(bands, bands.length - 1, room) + (bands[bands.length - 1] ?? 0);
-var linesOf = (model, format) => [
-  ...model.lengths.map((each) => ({
-    code: each.code,
-    lines: [dimensionLabel(each.code), format(each.to - each.from)]
-  })),
-  ...model.angles.map((each) => ({
+var laneLayout = (model, sides = "one") => {
+  const lanes = model.lengths.map((each) => ({
     code: each.code,
-    lines: [dimensionLabel(each.code), `${String(each.degrees)}\xB0`]
-  })),
-  ...model.widths.map((each) => ({
-    code: each.code,
-    // Some labels carry the diameter sign already; none carries it twice.
-    lines: [
-      dimensionLabel(each.code).includes("\u2300") ? dimensionLabel(each.code) : `${dimensionLabel(each.code)} \u2300`,
-      format(each.radius * 2),
-      // The corner radius belongs to the tip's diameter, and reads under it
-      // rather than beside it.
-      ...each.at === 0 && model.cornerRadius !== null ? [`RE ${format(model.cornerRadius)}`] : []
-    ]
-  }))
-];
-var dimensionLayout = (model, format, fontSize, sides = "one", textAlongAxis = false) => {
-  const type = figureType(fontSize);
-  const said = new Map(linesOf(model, format).map((each) => [each.code, each.lines]));
-  const extents = (lines) => {
-    const wide = figureWidth(lines, type);
-    const deep = figureHeight(lines.length, type);
-    return textAlongAxis ? { across: deep, along: wide } : { across: wide, along: deep };
-  };
-  const across = [...model.widths, ...model.angles];
-  const figures = [
-    ...across.map((each, index) => {
-      const side = sides === "both" && index % 2 === 1 ? "plus" : "minus";
-      const lines = said.get(each.code) ?? [];
-      return { code: each.code, side, band: 0, lane: null, lines, ...extents(lines) };
-    }),
-    ...model.lengths.map((each) => {
-      const side = sides === "both" && each.lane % 2 === 1 ? "plus" : "minus";
-      const lane = sides === "both" ? Math.floor(each.lane / 2) : each.lane;
-      const lines = said.get(each.code) ?? [];
-      return { code: each.code, side, band: lane + 1, lane, lines, ...extents(lines) };
-    })
-  ];
-  const bandsOn = (side) => {
-    const mine = figures.filter((each) => each.side === side);
-    const count = Math.max(0, ...mine.map((each) => each.band)) + 1;
-    return Array.from(
-      { length: mine.length === 0 ? 0 : count },
-      (_, band) => Math.max(0, ...mine.filter((each) => each.band === band).map((each) => each.across))
-    );
-  };
-  return { figures, bands: { minus: bandsOn("minus"), plus: bandsOn("plus") } };
+    side: sides === "both" && each.lane % 2 === 1 ? "plus" : "minus",
+    lane: sides === "both" ? Math.floor(each.lane / 2) : each.lane
+  }));
+  const on = (side) => lanes.filter((each) => each.side === side).length;
+  return { lanes, count: { minus: on("minus"), plus: on("plus") } };
 };
+var laneOffset = (lane, room) => room.arrow + room.gap + lane * room.step;
+var laneRoom = (lanes, room) => lanes === 0 ? room.arrow : laneOffset(lanes - 1, room);
 
 // src/render/sheet.ts
 var SHEETS = {
@@ -250,6 +177,15 @@ var SHEETS = {
     ink: "#3f4650",
     centre: "#15181c",
     dimension: "#606a76",
+    /**
+     * The dimension the reader is pointing at.
+     *
+     * **Not a colour the tool is already drawn in** (Paul, 2026-09-02): the
+     * flutes are gold and a struck section is red, so a highlight in either
+     * would read as a property of the metal rather than as a pointer. Blue is
+     * on neither the tool nor the holder, and it carries on both sheets.
+     */
+    accent: "#0284c7",
     body: "#c4c8ce",
     flutes: "#e6bf59",
     holder: "#9aa2ad",
@@ -261,6 +197,8 @@ var SHEETS = {
     ink: "#c7cdd6",
     centre: "#e8ebef",
     dimension: "#8d97a4",
+    // Lighter than the light sheet's, to hold its own against the dark ground.
+    accent: "#38bdf8",
     body: "#5b626c",
     // The gold reads as gold on either ground, a shade deeper here so it does
     // not glare against the greys around it.
@@ -334,6 +272,7 @@ var joins = (segments) => {
 
 // src/render/dimension-lines.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var LIT_WEIGHT = 1.8;
 var DimensionLines = ({
   model,
   layout,
@@ -342,13 +281,12 @@ var DimensionLines = ({
   room,
   requested,
   ink,
-  ground
+  accent,
+  highlight,
+  onHover
 }) => {
   const { fontSize, scale } = frame;
   const head = fontSize * 0.9;
-  const type = figureType(fontSize);
-  const lineHeight = type * 1.15;
-  const inset = type * 0.45;
   const mm = (pixels) => pixels / scale;
   const sign = (side) => side === "minus" ? -1 : 1;
   const granted = (side) => {
@@ -357,235 +295,239 @@ var DimensionLines = ({
     return asked > 0 ? got / asked : 1;
   };
   const at2 = (r, z) => `${frame.toX(r, z).toFixed(2)},${frame.toY(r, z).toFixed(2)}`;
-  const edgeAt = (side) => sign(side) * outline.radius;
-  const laneAt = (lane, side) => sign(side) * (outline.radius + mm(laneOffset(layout.bands[side], lane, room) * granted(side)));
-  const bandAt = (band, side) => sign(side) * (outline.radius + mm(bandOffset(layout.bands[side], band, room) * granted(side)));
-  const placeOf = new Map(layout.figures.map((each) => [each.code, each]));
-  const wants = (figure) => {
-    if (figure.lane === null) {
-      const angle = model.angles.find((each) => each.code === figure.code);
-      if (angle) {
-        return { r: angle.at.r * sign(figure.side), z: angle.at.z };
-      }
-      const width = model.widths.find((each) => each.code === figure.code);
-      return { r: (width?.radius ?? 0) * sign(figure.side), z: width?.at ?? 0 };
-    }
-    const length = model.lengths.find((each) => each.code === figure.code);
-    return {
-      r: laneAt(figure.lane, figure.side),
-      /**
-       * **At the top of its dimension, not the middle of it** (Paul,
-       * 2026-09-01). A figure halfway down a 50 mm dimension is level with
-       * nothing on the tool; at the top it is level with the arrow it belongs
-       * to.
-       */
-      z: Math.max(length?.from ?? 0, length?.to ?? 0)
-    };
-  };
-  const boxOf = (figure) => {
-    const inboard = bandAt(figure.band, figure.side);
-    const across = mm(figure.across * granted(figure.side));
-    const along = mm(figure.along);
-    return {
-      // Outward from the band's inboard edge, on this flank.
-      from: inboard,
-      to: inboard + sign(figure.side) * across,
-      across,
-      along
-    };
+  const clearance = fontSize * 0.35;
+  const edgeAt = (side, z) => sign(side) * (radiusAt(outline, z) + clearance);
+  const laneAt = (lane) => sign(lane.side) * (outline.radius + mm(laneOffset(lane.lane, room) * granted(lane.side)));
+  const standFor = (radius) => Math.max(head * 0.9, Math.min(head * 2.4, outline.radius - radius + mm(laneOffset(0, room))));
+  const laneOf = new Map(layout.lanes.map((each) => [each.code, each]));
+  const litCodes = /* @__PURE__ */ new Set([
+    ...highlight,
+    ...model.lengths.filter((each) => (each.aliases ?? []).some((code) => highlight.has(code))).map((each) => each.code)
+  ]);
+  const lit = (code) => litCodes.has(code);
+  const inkFor = (code) => lit(code) ? accent : ink;
+  const weightFor = (code, weight) => fontSize * weight * (lit(code) ? LIT_WEIGHT : 1);
+  const fadeFor = (code, opacity) => lit(code) ? 1 : opacity;
+  const pointing = (code) => onHover === void 0 ? {} : {
+    onPointerEnter: () => {
+      onHover(code);
+    },
+    onPointerLeave: () => {
+      onHover(null);
+    },
+    style: { cursor: "pointer" }
   };
-  const obstacles = model.lengths.flatMap((each) => {
-    const place = placeOf.get(each.code);
-    if (place === void 0 || place.lane === null) {
-      return [];
+  const hit = fontSize * 1.3;
+  const grab = (points) => onHover === void 0 ? null : /* @__PURE__ */ jsx(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: "transparent",
+      strokeWidth: hit,
+      strokeLinecap: "round"
     }
-    const lane = laneAt(place.lane, place.side);
-    const edge = edgeAt(place.side);
-    const thickness = mm(figureType(fontSize) * 0.7 * scale);
-    return [each.from, each.to].map((height, index) => ({
-      key: `line-${each.code}-${String(index)}`,
-      across: Math.min(lane, edge),
-      width: Math.abs(lane - edge),
-      along: height - thickness / 2,
-      height: thickness
-    }));
-  });
-  const placed = stackLabels(
-    layout.figures.map((figure) => {
-      const box = boxOf(figure);
-      const start = wants(figure);
-      return {
-        key: figure.code,
-        across: Math.min(box.from, box.to),
-        width: box.across,
-        along: start.z,
-        height: box.along
-      };
-    }),
-    mm(type * 0.5 * scale),
-    obstacles
   );
+  const byLight = (each) => [...each].sort((one, two) => Number(lit(one.code)) - Number(lit(two.code)));
   return /* @__PURE__ */ jsxs("g", { "data-dimensions": true, children: [
-    model.lengths.map((each) => {
-      const place = placeOf.get(each.code);
-      if (place === void 0 || place.lane === null) {
+    byLight(model.lengths).map((each) => {
+      const place = laneOf.get(each.code);
+      if (place === void 0) {
         return null;
       }
-      const lane = laneAt(place.lane, place.side);
-      const edge = edgeAt(place.side);
+      const lane = laneAt(place);
+      const edge = { from: edgeAt(place.side, each.from), to: edgeAt(place.side, each.to) };
       const inside = Math.abs(each.to - each.from) >= head * 2.6;
       const reach = head * 2.2;
-      return /* @__PURE__ */ jsxs("g", { "data-dimension": each.code, children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: frame.toX(lane, each.from),
-            y1: frame.toY(lane, each.from),
-            x2: frame.toX(edge, each.from),
-            y2: frame.toY(edge, each.from),
-            stroke: ink,
-            strokeOpacity: 0.4,
-            strokeWidth: fontSize * 0.05
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: frame.toX(lane, each.to),
-            y1: frame.toY(lane, each.to),
-            x2: frame.toX(edge, each.to),
-            y2: frame.toY(edge, each.to),
-            stroke: ink,
-            strokeOpacity: 0.4,
-            strokeWidth: fontSize * 0.05
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: frame.toX(lane, inside ? each.from : each.from - reach),
-            y1: frame.toY(lane, inside ? each.from : each.from - reach),
-            x2: frame.toX(lane, inside ? each.to : each.to + reach),
-            y2: frame.toY(lane, inside ? each.to : each.to + reach),
-            stroke: ink,
-            strokeWidth: fontSize * 0.07
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: arrowhead(lane, each.from, inside ? TOWARD_TIP : AWAY_FROM_TIP, head, frame),
-            fill: ink
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: arrowhead(lane, each.to, inside ? AWAY_FROM_TIP : TOWARD_TIP, head, frame),
-            fill: ink
-          }
-        )
-      ] }, each.code);
+      const from = inside ? each.from : each.from - reach;
+      const to = inside ? each.to : each.to + reach;
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          "data-dimension": each.code,
+          ...lit(each.code) ? { "data-lit": "true" } : {},
+          ...pointing(each.code),
+          children: [
+            grab(`${at2(lane, from)} ${at2(lane, to)}`),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: frame.toX(lane, each.from),
+                y1: frame.toY(lane, each.from),
+                x2: frame.toX(edge.from, each.from),
+                y2: frame.toY(edge.from, each.from),
+                stroke: inkFor(each.code),
+                strokeOpacity: fadeFor(each.code, 0.4),
+                strokeWidth: weightFor(each.code, 0.05)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: frame.toX(lane, each.to),
+                y1: frame.toY(lane, each.to),
+                x2: frame.toX(edge.to, each.to),
+                y2: frame.toY(edge.to, each.to),
+                stroke: inkFor(each.code),
+                strokeOpacity: fadeFor(each.code, 0.4),
+                strokeWidth: weightFor(each.code, 0.05)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: frame.toX(lane, from),
+                y1: frame.toY(lane, from),
+                x2: frame.toX(lane, to),
+                y2: frame.toY(lane, to),
+                stroke: inkFor(each.code),
+                strokeWidth: weightFor(each.code, 0.07)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "polygon",
+              {
+                points: arrowhead(lane, each.from, inside ? TOWARD_TIP : AWAY_FROM_TIP, head, frame),
+                fill: inkFor(each.code)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "polygon",
+              {
+                points: arrowhead(lane, each.to, inside ? AWAY_FROM_TIP : TOWARD_TIP, head, frame),
+                fill: inkFor(each.code)
+              }
+            )
+          ]
+        },
+        each.code
+      );
     }),
-    model.widths.map((each) => {
-      const stand = head * 2.4;
-      return /* @__PURE__ */ jsxs("g", { "data-dimension": each.code, children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: frame.toX(-each.radius - stand, each.at),
-            y1: frame.toY(-each.radius - stand, each.at),
-            x2: frame.toX(-each.radius, each.at),
-            y2: frame.toY(-each.radius, each.at),
-            stroke: ink,
-            strokeWidth: fontSize * 0.07
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: arrowhead(-each.radius, each.at, TOWARD_PLUS, head, frame),
-            fill: ink
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: frame.toX(each.radius, each.at),
-            y1: frame.toY(each.radius, each.at),
-            x2: frame.toX(each.radius + stand, each.at),
-            y2: frame.toY(each.radius + stand, each.at),
-            stroke: ink,
-            strokeWidth: fontSize * 0.07
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: arrowhead(each.radius, each.at, TOWARD_MINUS, head, frame),
-            fill: ink
-          }
-        )
-      ] }, each.code);
+    byLight(model.widths).map((each) => {
+      const stand = standFor(each.radius);
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          "data-dimension": each.code,
+          ...lit(each.code) ? { "data-lit": "true" } : {},
+          ...pointing(each.code),
+          children: [
+            grab(`${at2(-each.radius - stand, each.at)} ${at2(-each.radius, each.at)}`),
+            grab(`${at2(each.radius, each.at)} ${at2(each.radius + stand, each.at)}`),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: frame.toX(-each.radius - stand, each.at),
+                y1: frame.toY(-each.radius - stand, each.at),
+                x2: frame.toX(-each.radius, each.at),
+                y2: frame.toY(-each.radius, each.at),
+                stroke: inkFor(each.code),
+                strokeWidth: weightFor(each.code, 0.07)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "polygon",
+              {
+                points: arrowhead(-each.radius, each.at, TOWARD_PLUS, head, frame),
+                fill: inkFor(each.code)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: frame.toX(each.radius, each.at),
+                y1: frame.toY(each.radius, each.at),
+                x2: frame.toX(each.radius + stand, each.at),
+                y2: frame.toY(each.radius + stand, each.at),
+                stroke: inkFor(each.code),
+                strokeWidth: weightFor(each.code, 0.07)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "polygon",
+              {
+                points: arrowhead(each.radius, each.at, TOWARD_MINUS, head, frame),
+                fill: inkFor(each.code)
+              }
+            )
+          ]
+        },
+        each.code
+      );
     }),
-    layout.figures.map((figure) => {
-      const box = boxOf(figure);
-      const start = wants(figure);
-      const low = placed.get(figure.code) ?? start.z;
-      const one = { x: frame.toX(box.from, low), y: frame.toY(box.from, low) };
-      const two = {
-        x: frame.toX(box.to, low + box.along),
-        y: frame.toY(box.to, low + box.along)
-      };
-      const rect = {
-        x: Math.min(one.x, two.x),
-        y: Math.min(one.y, two.y),
-        width: Math.abs(one.x - two.x),
-        height: Math.abs(one.y - two.y)
-      };
-      const turn = box.from - sign(figure.side) * mm(type * 0.5 * scale);
-      const middleZ = low + box.along / 2;
-      const anchorX = frame.toX(box.from, middleZ);
-      const axisX = frame.toX(0, middleZ);
-      const apart = Math.abs(anchorX - axisX) > mm(1);
-      const textAnchor = apart ? anchorX < axisX ? "end" : "start" : "middle";
-      const textX = apart ? anchorX : rect.x + rect.width / 2;
-      return /* @__PURE__ */ jsxs("g", { "data-figure": figure.code, children: [
-        /* @__PURE__ */ jsx(
-          "polyline",
-          {
-            points: `${at2(start.r, start.z)} ${at2(turn, start.z)} ${at2(turn, middleZ)}`,
-            fill: "none",
-            stroke: ink,
-            strokeOpacity: 0.35,
-            strokeWidth: fontSize * 0.05
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height,
-            fill: ground,
-            rx: type * 0.2
-          }
-        ),
-        figure.lines.map((line, index) => /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: textX,
-            y: rect.y + inset + type * 0.85 + lineHeight * index,
-            fontSize: type,
-            textAnchor,
-            fill: ink,
-            fontFamily: "ui-monospace, monospace",
-            children: line
-          },
-          line
-        ))
-      ] }, `figure-${figure.code}`);
+    byLight(model.angles).map((each) => {
+      const half = each.degrees / 2 * Math.PI / 180;
+      const flank = Math.hypot(each.at.r * 2, each.at.z * 2);
+      const reach = Math.max(flank * 1.5, head * 3);
+      const ray = (towards) => ({
+        r: towards * reach * Math.sin(half),
+        z: reach * Math.cos(half)
+      });
+      const minus = ray(-1);
+      const plus = ray(1);
+      const radius = reach * 0.62;
+      const arc = Array.from({ length: 17 }, (_, index) => {
+        const angle = -half + 2 * half * index / 16;
+        return at2(radius * Math.sin(angle), radius * Math.cos(angle));
+      }).join(" ");
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          "data-dimension": each.code,
+          ...lit(each.code) ? { "data-lit": "true" } : {},
+          ...pointing(each.code),
+          children: [
+            grab(arc),
+            grab(`${at2(minus.r, minus.z)} ${at2(0, 0)} ${at2(plus.r, plus.z)}`),
+            /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                points: `${at2(minus.r, minus.z)} ${at2(0, 0)} ${at2(plus.r, plus.z)}`,
+                fill: "none",
+                stroke: inkFor(each.code),
+                strokeOpacity: fadeFor(each.code, 0.5),
+                strokeWidth: weightFor(each.code, 0.05)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                points: arc,
+                fill: "none",
+                stroke: inkFor(each.code),
+                strokeWidth: weightFor(each.code, 0.07)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "polygon",
+              {
+                points: arrowhead(
+                  radius * Math.sin(-half),
+                  radius * Math.cos(half),
+                  { dr: -Math.cos(half), dz: -Math.sin(half) },
+                  head * 0.8,
+                  frame
+                ),
+                fill: inkFor(each.code)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "polygon",
+              {
+                points: arrowhead(
+                  radius * Math.sin(half),
+                  radius * Math.cos(half),
+                  { dr: Math.cos(half), dz: -Math.sin(half) },
+                  head * 0.8,
+                  frame
+                ),
+                fill: inkFor(each.code)
+              }
+            )
+          ]
+        },
+        each.code
+      );
     })
   ] });
 };
@@ -601,7 +543,8 @@ var ToolDrawing = ({
   caption,
   dimensions = false,
   dimensionSides = "one",
-  formatLength = formatMillimetres,
+  highlight = null,
+  onDimensionHover,
   padding = DEFAULT_PADDING2,
   collisions,
   verdict,
@@ -645,13 +588,15 @@ var ToolDrawing = ({
   }
   const typePx = typeSizeFor(box);
   const model = dimensions ? dimensionsFor(assembly) : null;
-  const room = { arrow: typePx * 0.9 * 2.4, gap: typePx * 0.5 };
-  const layout = model === null ? null : dimensionLayout(
-    model,
-    formatLength,
-    typePx,
-    dimensionSides,
-    orientationFor(box) === "horizontal"
+  const widthsReachEdge = model !== null && model.widths.some((each) => each.radius >= outline.radius - 1e-6);
+  const room = {
+    arrow: widthsReachEdge ? typePx * 0.9 * 2.4 : 0,
+    gap: typePx * 0.6,
+    step: typePx * 1.1
+  };
+  const layout = model === null ? null : laneLayout(model, dimensionSides);
+  const lit = new Set(
+    highlight === null ? [] : typeof highlight === "string" ? [highlight] : highlight
   );
   const asked = typeof padding === "number" ? { minus: padding, plus: padding, along: padding } : {
     minus: padding.minus ?? DEFAULT_PADDING2,
@@ -659,12 +604,12 @@ var ToolDrawing = ({
     along: padding.along ?? DEFAULT_PADDING2
   };
   const chrome = layout === null ? asked : {
-    minus: asked.minus + bandRoom(layout.bands.minus, room) + room.gap,
-    plus: asked.plus + bandRoom(layout.bands.plus, room) + room.gap,
-    // Headroom for one figure's depth past each end: the stacker moves a
-    // clash away from the tip, so the outermost figure of a crowded tool
-    // ends up past the top of what it measures.
-    along: asked.along + Math.max(0, ...layout.figures.map((each) => each.along))
+    minus: asked.minus + laneRoom(layout.count.minus, room) + room.gap,
+    plus: asked.plus + laneRoom(layout.count.plus, room) + room.gap,
+    // Headroom for the arrows of a dimension too short to hold them:
+    // those stand outside the line and point back in, so they reach past
+    // the end of what they measure.
+    along: asked.along + typePx * 0.9 * 3.2
   };
   const frame = frameFor(outline, box, { padding: chrome });
   const { fontSize } = frame;
@@ -787,7 +732,9 @@ var ToolDrawing = ({
                   room,
                   requested: chrome,
                   ink: sheet.dimension,
-                  ground: sheet.ground
+                  accent: sheet.accent,
+                  highlight: lit,
+                  ...onDimensionHover === void 0 ? {} : { onHover: onDimensionHover }
                 }
               ) : null,
               /* @__PURE__ */ jsx2(
@@ -831,19 +778,13 @@ var ToolDrawing = ({
 export {
   SHEETS,
   ToolDrawing,
-  bandOffset,
-  bandRoom,
-  dimensionLabel,
-  dimensionLayout,
   dimensionsFor,
-  figureHeight,
-  figureType,
-  formatMillimetres,
   frameFor,
   isHolderProfile,
+  laneLayout,
   laneOffset,
+  laneRoom,
   orientationFor,
-  stackLabels,
   typeSizeFor,
   useDrawingContext
 };