@toolpath/tool-drawing 0.1.0

package/dist/index.js

@@ -0,0 +1,846 @@
+import {
+  AWAY_FROM_TIP,
+  DrawingProvider,
+  TOWARD_MINUS,
+  TOWARD_PLUS,
+  TOWARD_TIP,
+  arrowhead,
+  useDrawingContext
+} from "./chunk-7ZID4QRO.js";
+import {
+  assemblyOutline,
+  hasNeck
+} from "./chunk-OUMNS4RI.js";
+
+// src/model/frame.ts
+var DEFAULT_PADDING = 16;
+var DEFAULT_BOX = { width: 640, height: 240 };
+var TYPE_FRACTION = 0.045;
+var TYPE_MIN_PX = 9;
+var TYPE_MAX_PX = 14;
+var MOST_OF_A_PANEL = 0.6;
+var clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+var fitted = (low, high, axis) => {
+  const total = low + high;
+  const most = axis * MOST_OF_A_PANEL;
+  return total <= most || total <= 0 ? [low, high] : [low * most / total, high * most / total];
+};
+var round = (value) => Math.round(value * 1e4) / 1e4;
+var boxFor = (box, options) => box.width > 0 && box.height > 0 ? box : options.defaultBox ?? DEFAULT_BOX;
+var typeSizeFor = (box, options = {}) => {
+  const measured = boxFor(box, options);
+  return clamp(Math.min(measured.width, measured.height) * TYPE_FRACTION, TYPE_MIN_PX, TYPE_MAX_PX);
+};
+var orientationFor = (box, options = {}) => {
+  const measured = boxFor(box, options);
+  return measured.width >= measured.height ? "horizontal" : "vertical";
+};
+var frameFor = (outline, box, options = {}) => {
+  const given = options.padding ?? DEFAULT_PADDING;
+  const pad = typeof given === "number" ? { minus: given, plus: given, along: given } : {
+    minus: given.minus ?? DEFAULT_PADDING,
+    plus: given.plus ?? DEFAULT_PADDING,
+    along: given.along ?? DEFAULT_PADDING
+  };
+  const measured = boxFor(box, options);
+  const orientation = orientationFor(box, options);
+  const alongPx = orientation === "horizontal" ? measured.width : measured.height;
+  const acrossPx = orientation === "horizontal" ? measured.height : measured.width;
+  const alongMm = outline.height;
+  const acrossMm = outline.radius * 2;
+  const [minus, plus] = fitted(pad.minus, pad.plus, acrossPx);
+  const [ends] = fitted(pad.along, pad.along, alongPx);
+  const padding = { minus, plus, along: ends };
+  const room = (px, chrome) => Math.max(1, px - chrome);
+  const ratios = [
+    room(alongPx, padding.along * 2) / alongMm,
+    room(acrossPx, padding.minus + padding.plus) / acrossMm
+  ].filter((ratio) => Number.isFinite(ratio) && ratio > 0);
+  const scale = ratios.length > 0 ? Math.min(...ratios) : 1;
+  const endMargin = padding.along / scale;
+  const minusMargin = padding.minus / scale;
+  const plusMargin = padding.plus / scale;
+  const along = alongMm + endMargin * 2;
+  const across = acrossMm + minusMargin + plusMargin;
+  const viewBox = orientation === "horizontal" ? [-endMargin, -outline.radius - minusMargin, along, across] : [-outline.radius - minusMargin, -endMargin, across, along];
+  const fontSize = typeSizeFor(box, options) / scale;
+  return {
+    orientation,
+    scale,
+    viewBox: viewBox.map(round).join(" "),
+    padding,
+    // The tip sits at the origin. Horizontal runs it left to right, so the
+    // business end is where reading starts; vertical runs it bottom to top, so
+    // the tool hangs from its holder the way it does in the spindle.
+    toX: orientation === "horizontal" ? (_r, z) => z : (r) => r,
+    toY: orientation === "horizontal" ? (r) => r : (_r, z) => outline.height - z,
+    fontSize
+  };
+};
+
+// src/model/dimensions.ts
+var EMPTY = { lengths: [], widths: [], angles: [], cornerRadius: null };
+var dimensionsFor = (assembly) => {
+  const { tool, holder, stickout } = assembly;
+  const { DC, LCF, OAL, SFDM, RE } = tool.geometry;
+  if (DC === void 0 || LCF === void 0) {
+    return EMPTY;
+  }
+  const shoulderLength = tool.geometry["shoulder-length"];
+  const shoulderDiameter = tool.geometry["shoulder-diameter"];
+  const necked = hasNeck(tool) && shoulderLength !== void 0 && shoulderDiameter !== void 0;
+  const widths = [{ code: "DC", radius: DC / 2, at: 0 }];
+  if (necked && shoulderDiameter !== void 0 && shoulderLength !== void 0) {
+    widths.push({
+      code: "shoulder-diameter",
+      radius: shoulderDiameter / 2,
+      // At the top of the relief, where the shank steps down to it: measured
+      // in the middle it sat among the flute length and the corner radius,
+      // which is the busiest inch of the drawing (Paul, 2026-09-01).
+      at: shoulderLength
+    });
+  }
+  if (SFDM !== void 0) {
+    const shankFrom = necked && shoulderLength !== void 0 ? shoulderLength : LCF;
+    const shankTo = 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 }
+  ];
+  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) {
+    spans.push({ code: "LBH", from: 0, to: below });
+  }
+  if (holder === null) {
+    if (OAL !== void 0) {
+      spans.push({ code: "OAL", from: 0, to: OAL });
+    }
+  } 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 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 ? [
+    {
+      code: "SIG",
+      degrees: SIG,
+      at: { r: DC / 4, z: DC / 2 / Math.tan(SIG / 2 * Math.PI / 180) / 2 }
+    }
+  ] : [];
+  return {
+    lengths,
+    widths,
+    angles,
+    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) => ({
+    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") } };
+};
+
+// src/render/sheet.ts
+var SHEETS = {
+  light: {
+    ground: "#ffffff",
+    ink: "#3f4650",
+    centre: "#15181c",
+    dimension: "#606a76",
+    body: "#c4c8ce",
+    flutes: "#e6bf59",
+    holder: "#9aa2ad",
+    connection: "#78818d"
+  },
+  dark: {
+    // A step above `zinc-900`, which is the card, and above the wash on it.
+    ground: "#22252b",
+    ink: "#c7cdd6",
+    centre: "#e8ebef",
+    dimension: "#8d97a4",
+    body: "#5b626c",
+    // The gold reads as gold on either ground, a shade deeper here so it does
+    // not glare against the greys around it.
+    flutes: "#c9a44b",
+    holder: "#474d57",
+    connection: "#3a4048"
+  }
+};
+var isConnection = (segment) => segment.part === "flange" || segment.part === "body" && segment.provenance === "assumed";
+var sectionFill = (segment, sheet) => {
+  if (segment.part === "flutes" || segment.part === "tip") {
+    return sheet.flutes;
+  }
+  if (segment.part === "shank" || segment.part === "neck") {
+    return sheet.body;
+  }
+  return isConnection(segment) ? sheet.connection : sheet.holder;
+};
+var ASSUMED = {
+  tip: "tip angle",
+  nose: "nose length",
+  body: "body cone",
+  flange: "flange thickness"
+};
+var assumedNames = (segments) => [
+  ...new Set(
+    segments.filter((segment) => segment.provenance === "assumed").map((segment) => ASSUMED[segment.part] ?? segment.part)
+  )
+];
+
+// src/render/tool-drawing.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/render/silhouette.ts
+var at = (point, frame) => `${frame.toX(point.r, point.z).toFixed(2)},${frame.toY(point.r, point.z).toFixed(2)}`;
+var silhouettePath = (segments, frame) => {
+  const up = segments.flatMap((segment) => segment.points);
+  if (up.length === 0) {
+    return "";
+  }
+  const down = [...segments].reverse().flatMap((segment) => [...segment.points].reverse());
+  const right = up.map((point) => at(point, frame)).join(" L");
+  const left = down.map((point) => at({ r: -point.r, z: point.z }, frame)).join(" L");
+  return `M${right} L${left} Z`;
+};
+var sectionPoints = (segment, frame) => {
+  const right = segment.points.map((point) => at(point, frame));
+  const left = [...segment.points].reverse().map((point) => at({ r: -point.r, z: point.z }, frame));
+  return [...right, ...left].join(" ");
+};
+var STEP = 0.01;
+var joins = (segments) => {
+  const found = [];
+  for (let index = 0; index + 1 < segments.length; index += 1) {
+    const lower = segments[index];
+    const upper = segments[index + 1];
+    const below = lower.points[lower.points.length - 1];
+    const above = upper.points[0];
+    if (below === void 0 || above === void 0) {
+      continue;
+    }
+    found.push({
+      part: lower.part,
+      radius: Math.min(below.r, above.r),
+      z: below.z,
+      stepped: Math.abs(below.r - above.r) > STEP
+    });
+  }
+  return found;
+};
+
+// src/render/dimension-lines.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DimensionLines = ({
+  model,
+  layout,
+  frame,
+  outline,
+  room,
+  requested,
+  ink,
+  ground
+}) => {
+  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) => {
+    const asked = side === "minus" ? requested.minus : requested.plus;
+    const got = side === "minus" ? frame.padding.minus : frame.padding.plus;
+    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 obstacles = model.lengths.flatMap((each) => {
+    const place = placeOf.get(each.code);
+    if (place === void 0 || place.lane === null) {
+      return [];
+    }
+    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
+  );
+  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) {
+        return null;
+      }
+      const lane = laneAt(place.lane, place.side);
+      const edge = edgeAt(place.side);
+      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);
+    }),
+    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);
+    }),
+    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}`);
+    })
+  ] });
+};
+
+// src/render/tool-drawing.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STROKE = { silhouette: 0.09, edge: 0.09, chord: 0.06, centre: 0.05 };
+var DEFAULT_PADDING2 = 16;
+var STRUCK = "#f87171";
+var ToolDrawing = ({
+  assembly,
+  theme = "dark",
+  caption,
+  dimensions = false,
+  dimensionSides = "one",
+  formatLength = formatMillimetres,
+  padding = DEFAULT_PADDING2,
+  collisions,
+  verdict,
+  children,
+  className
+}) => {
+  const sheet = SHEETS[theme];
+  const element = useRef(null);
+  const [box, setBox] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const svg = element.current;
+    if (!svg || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const watch = new ResizeObserver((entries) => {
+      const measured = entries[0]?.contentRect;
+      if (measured && measured.width > 0 && measured.height > 0) {
+        setBox({ width: measured.width, height: measured.height });
+      }
+    });
+    watch.observe(svg);
+    return () => {
+      watch.disconnect();
+    };
+  }, []);
+  const { tool, holder } = assembly;
+  const name = caption ?? tool.label ?? tool.form;
+  const outline = assemblyOutline(assembly);
+  if (outline === null) {
+    const missing = tool.geometry.DC === void 0 || tool.geometry.LCF === void 0;
+    return /* @__PURE__ */ jsx2(
+      "p",
+      {
+        "data-undrawable": tool.form,
+        className,
+        style: { background: sheet.ground, color: sheet.dimension, padding: "1rem", margin: 0 },
+        children: missing ? `${name} states no cutting diameter or flute length, so there is nothing to draw.` : `${name} is a ${tool.form}, and this drawing has no shape for that form \u2014 so it is not drawn, rather than drawn wrong.`
+      }
+    );
+  }
+  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 asked = typeof padding === "number" ? { minus: padding, plus: padding, along: padding } : {
+    minus: padding.minus ?? DEFAULT_PADDING2,
+    plus: padding.plus ?? DEFAULT_PADDING2,
+    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))
+  };
+  const frame = frameFor(outline, box, { padding: chrome });
+  const { fontSize } = frame;
+  const assumed = assumedNames(outline.segments);
+  const line = (r, z) => ({ x: frame.toX(r, z), y: frame.toY(r, z) });
+  const overhang = fontSize * 1.2;
+  const from = line(0, -overhang);
+  const to = line(0, outline.height + overhang);
+  return /* @__PURE__ */ jsxs2(
+    "figure",
+    {
+      className,
+      style: { display: "flex", flexDirection: "column", minHeight: 0, height: "100%", margin: 0 },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "figcaption",
+          {
+            style: {
+              display: "flex",
+              padding: "0.5rem 0.75rem",
+              fontSize: "0.75rem",
+              fontFamily: "ui-monospace, monospace",
+              color: sheet.dimension
+            },
+            children: [
+              name,
+              verdict ? /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  "data-verdict": verdict.clears ? "clears" : "collides",
+                  style: { marginLeft: "auto", color: verdict.clears ? sheet.dimension : STRUCK },
+                  children: verdict.clears ? "clears the part" : "collides with the part"
+                }
+              ) : null
+            ]
+          }
+        ),
+        verdict?.note ? /* @__PURE__ */ jsx2(
+          "p",
+          {
+            "data-verdict-note": true,
+            style: {
+              padding: "0 0.75rem 0.25rem",
+              fontSize: "0.625rem",
+              color: sheet.dimension,
+              margin: 0
+            },
+            children: verdict.note
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs2(
+          "svg",
+          {
+            ref: element,
+            role: "img",
+            "aria-label": `${name}, drawn from its stated dimensions`,
+            viewBox: frame.viewBox,
+            style: { background: sheet.ground, flex: 1, minHeight: 0, borderRadius: "0.25rem" },
+            preserveAspectRatio: "xMidYMid meet",
+            children: [
+              outline.segments.map((segment, index) => {
+                const struck = (collisions ?? []).some(
+                  (each) => each.part === segment.part && each.height >= Math.min(...segment.points.map((point) => point.z)) - 1e-6 && each.height <= Math.max(...segment.points.map((point) => point.z)) + 1e-6
+                );
+                return /* @__PURE__ */ jsx2(
+                  "polygon",
+                  {
+                    "data-part": segment.part,
+                    "data-provenance": segment.provenance,
+                    ...struck ? { "data-struck": "true" } : {},
+                    points: sectionPoints(segment, frame),
+                    fill: struck ? STRUCK : sectionFill(segment, sheet),
+                    fillOpacity: struck ? 0.75 : 1,
+                    stroke: "none"
+                  },
+                  `${segment.part}-${String(index)}`
+                );
+              }),
+              joins(outline.segments).map((join, index) => {
+                const start = line(-join.radius, join.z);
+                const end = line(join.radius, join.z);
+                return /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    "data-join": join.part,
+                    "data-stepped": join.stepped ? "true" : "false",
+                    x1: start.x,
+                    y1: start.y,
+                    x2: end.x,
+                    y2: end.y,
+                    stroke: sheet.ink,
+                    strokeOpacity: join.stepped ? 1 : 0.35,
+                    strokeWidth: fontSize * (join.stepped ? STROKE.edge : STROKE.chord),
+                    ...join.stepped ? {} : {
+                      strokeDasharray: `${(fontSize * 0.5).toFixed(2)} ${(fontSize * 0.4).toFixed(2)}`
+                    }
+                  },
+                  `join-${join.part}-${String(index)}`
+                );
+              }),
+              /* @__PURE__ */ jsx2(
+                "path",
+                {
+                  "data-silhouette": true,
+                  d: silhouettePath(outline.segments, frame),
+                  fill: "none",
+                  stroke: sheet.ink,
+                  strokeWidth: fontSize * STROKE.silhouette,
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx2(DrawingProvider, { value: { frame, outline, sheet }, children }),
+              model !== null && layout !== null ? /* @__PURE__ */ jsx2(
+                DimensionLines,
+                {
+                  model,
+                  layout,
+                  frame,
+                  outline,
+                  room,
+                  requested: chrome,
+                  ink: sheet.dimension,
+                  ground: sheet.ground
+                }
+              ) : null,
+              /* @__PURE__ */ jsx2(
+                "line",
+                {
+                  "data-centreline": true,
+                  x1: from.x,
+                  y1: from.y,
+                  x2: to.x,
+                  y2: to.y,
+                  stroke: sheet.centre,
+                  strokeWidth: fontSize * STROKE.centre,
+                  strokeDasharray: `${(fontSize * 1.6).toFixed(2)} ${(fontSize * 0.5).toFixed(2)} ${(fontSize * 0.3).toFixed(2)} ${(fontSize * 0.5).toFixed(2)}`
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "p",
+          {
+            "data-provenance-note": true,
+            style: {
+              padding: "0 0.75rem 0.5rem",
+              fontSize: "0.625rem",
+              color: sheet.dimension,
+              margin: 0
+            },
+            children: [
+              "Drawn from stated dimensions",
+              assumed.length > 0 ? `; ${assumed.join(", ")} assumed` : "",
+              ".",
+              holder !== null && holder.gaugeLength === null ? " The holder length is not stated." : ""
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SHEETS,
+  ToolDrawing,
+  bandOffset,
+  bandRoom,
+  dimensionLabel,
+  dimensionLayout,
+  dimensionsFor,
+  figureHeight,
+  figureType,
+  formatMillimetres,
+  frameFor,
+  laneOffset,
+  orientationFor,
+  stackLabels,
+  typeSizeFor,
+  useDrawingContext
+};