@toolpath/viewer 1.4.0 → 1.5.0

package/dist/index.js

@@ -1,15 +1,20 @@
 import {
+  ANGLE_ARC_FRACTION,
+  ANGLE_ARC_SEGMENTS,
   AXES_PLANE_OFFSET,
   AXES_PLANE_SCALE,
+  AXIS_COLORS,
   CAD_CAMERA_UP,
   CANDIDATE_WEIGHT,
   CAP_HATCH,
   CHAMFER,
   CONE_AXIS,
+  CONTROL_SCHEME_OPTIONS,
   CadCameraControls,
   DEFAULT_FIT_MARGIN,
   DEFAULT_SECTION_NORMAL,
   DEFAULT_THEME,
+  DELTA_DASH_PIXELS,
   DIRECTION_COLORS,
   DISABLED_SECTION,
   DOUBLE_TAP_MS,
@@ -24,6 +29,9 @@ import {
   HIGHLIGHT_WEIGHT,
   HOVER_WEIGHT,
   MAX_FRAME_RATIO,
+  MEASURE_LINE_PIXELS,
+  MEASURE_MARKER_PIXELS,
+  MEASURE_RENDER_ORDER,
   MIN_FRAME_RATIO,
   NO_MODIFIERS,
   ORBIT_TARGET_COLOR,
@@ -37,12 +45,17 @@ import {
   OUTLINE_SCALE,
   PERSPECTIVE_FOV,
   PICKED_SURFACE_LABEL,
+  POINTS_PER_MEASUREMENT,
   PREVIEW_SCALE,
   PartMesh,
   PartReportFormatError,
   REGION_ATTRIBUTE,
+  SECTION_GIZMO_FRAME_SCALE,
   SECTION_RENDER_ORDER,
   SHAFT_RADIUS,
+  SNAP_MARKER_PIXELS,
+  SNAP_PIXELS,
+  STOCK_OBJECT,
   SectionView,
   TAP_SLOP,
   UnsupportedKernelVersionError,
@@ -50,6 +63,9 @@ import {
   VIEW_SIGNS,
   Viewer,
   adaptedUp,
+  angleArc,
+  angleArcRadius,
+  angleAt,
   applyCapTheme,
   applyHighlightLayers,
   applyProjection,
@@ -76,19 +92,30 @@ import {
   currentViewDirection,
   cycleOwner,
   defaultBounds,
+  deltaBetween,
+  deltaLegs,
   directionColor,
   directionIndexOf,
   directionLabel,
+  distanceBetween,
   dragPlane,
   excludedFromFrame,
   featureTypeRank,
   fitDistance,
   focusForPick,
+  formatDegrees,
+  formatMillimetres,
   groupByDirection,
   hitUnderRay,
   labelGeometry,
   labelTexture,
+  lockToAxis,
+  measurementFromPoints,
+  measurementLabel,
+  measurementLabelAnchor,
+  midpoint,
   movedFar,
+  nextMeasurementId,
   normalizePartReport,
   orbitTargetOpacity,
   orthographicHalfHeight,
@@ -103,6 +130,7 @@ import {
   retargetPose,
   sameDirection,
   screenLength,
+  screenPoint,
   sectionAnchor,
   sectionBounds,
   sectionConstant,
@@ -110,10 +138,12 @@ import {
   sectionDepthConstant,
   sectionDepthRange,
   sectionFromPick,
+  sectionMeasurement,
   sectionOffset,
   sectionOptionsFromState,
   sectionPlane,
   smoothRegionNormals,
+  snapAt,
   squaredUp,
   startPosition,
   surfaceUnderRay,
@@ -131,21 +161,505 @@ import {
   viewUp,
   viewVector,
   visualSurfaces
-} from "./chunk-HH3W5T42.js";
+} from "./chunk-4TBLMR4Z.js";
+
+// src/hover-card.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var HoverCard = ({ pick, children, className: className2, offset = 16 }) => {
+  const [pointer, setPointer] = useState(pick?.pointer);
+  useEffect(() => {
+    setPointer(pick?.pointer);
+    if (pick === null) return;
+    const follow = (event) => setPointer({ clientX: event.clientX, clientY: event.clientY });
+    window.addEventListener("pointermove", follow);
+    return () => window.removeEventListener("pointermove", follow);
+  }, [pick]);
+  if (pick === null || pointer === void 0) return null;
+  const style = {
+    position: "fixed",
+    left: pointer.clientX + offset,
+    top: pointer.clientY + offset,
+    pointerEvents: "none",
+    zIndex: 4
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["viewer-hover-card", className2].filter(Boolean).join(" "),
+      "data-viewer-hover-card": "true",
+      role: "tooltip",
+      style,
+      children: children(pick)
+    }
+  );
+};
+
+// src/viewer-toolbar.tsx
+import { createContext, useContext } from "react";
+
+// src/toolbar-icons.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SvgIcon = ({ viewBox = "0 0 24 24", fill = "none", children }) => /* @__PURE__ */ jsx2(
+  "svg",
+  {
+    className: "viewer-toolbar-icon",
+    "data-viewer-toolbar-icon": "true",
+    viewBox,
+    fill,
+    stroke: fill === "none" ? "currentColor" : "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children
+  }
+);
+var FitIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M8 8h8v8H8z" }) });
+var ResetIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 10a9 9 0 1 1 2 8M3 4v6h6" }) });
+var TopIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 7l8-4 8 4-8 4zM4 7v10l8 4 8-4V7M12 11v10" }) });
+var StockIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 6l9-4 9 4v12l-9 4-9-4zM3 6l9 4 9-4M12 10v12M7 8v8l5 2 5-2V8" }) });
+var AxesIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M5 19V3m0 16h16M5 19l10-10M2 6l3-3 3 3m10 10 3 3-3 3M11 9h4v4" }) });
+var GridIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 8l9-5 9 5-9 5zM3 8v8l9 5 9-5V8M12 13v8M7.5 5.5v8M16.5 5.5v8" }) });
+var BananaIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { viewBox: "0 0 576 512", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M284.2 245.6c12.99 6.929 25.35 15.14 36.08 25.8L334.5 285.6l65.75-23.47c14.75-5.265 30.18-7.849 45.81-8.389c1.154-10.73 1.764-21.38 1.764-31.87c0-118.5-81.33-221.9-119.7-221.9c-21.01 0-40.91 17.04-40.91 39.25c0 16.18 16.74 41.9 16.74 103C303.1 170.1 300.6 203.1 284.2 245.6zM575.1 389.6c0-3.687-.8637-7.429-2.687-10.93l-15.12-29.11c-21.05-40.53-63.08-64.51-106.9-64.51c-13.43 0-27.02 2.252-40.22 6.969l-84.84 30.27l-28.59-28.41C274.4 270.9 243.7 258.1 212.8 258.1c-23.72 0-47.57 6.97-68.29 21.2L106.3 306.4c-6.732 4.631-10.35 12.07-10.35 19.63c0 14.93 12.7 23.87 24.04 23.87c4.695 0 9.443-1.376 13.61-4.26l38.13-26.23c12.43-8.525 26.71-12.69 40.91-12.69c10.64 0 21.24 2.339 30.97 6.934c-50.62 62.23-128.3 99.85-211.4 99.85C14.42 413.5 0 427.8 0 445.5v31.38c0 17.68 14.66 32.02 32.46 32.02l28.98.0009c14.15 0 34.69 1.098 59.07 1.098c93.51 0 243.4-16.15 304.8-172.4c9.021-3.22 17.95-4.712 26.53-4.712c27.65 0 51.7 15.49 63.7 38.55l15.12 29.11c3.484 6.723 11.74 12.98 21.41 12.98C564.1 413.6 575.1 403.8 575.1 389.6z" }) });
+var DirectionsIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M7 3v18m-4-4 4 4 4-4M17 21V3m-4 4 4-4 4 4" }) });
+var HoverIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 4h16v12H9l-5 4zm4 5h8m-8 3h5" }) });
+var FocusIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 4h16v16H4zM8 8h8v8H8zM2 12h4m12 0h4M12 2v4m0 12v4" }) });
+var WireframeIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 7l8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10M4 17l8-4 8 4M12 3v10" }) });
+var SectionIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 6h9v12H3zM12 3v18M16 6h2m3 3v2m0 3v2m-5 3h-2" }) });
+var MeasureIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 16L16 3l5 5L8 21zM8 11l3 3m1-7 3 3m-11 5 3 3" }) });
+var ICONS = {
+  fit: FitIcon,
+  reset: ResetIcon,
+  top: TopIcon,
+  stock: StockIcon,
+  axes: AxesIcon,
+  grid: GridIcon,
+  banana: BananaIcon,
+  directions: DirectionsIcon,
+  hover: HoverIcon,
+  focus: FocusIcon,
+  wireframe: WireframeIcon,
+  section: SectionIcon,
+  measure: MeasureIcon
+};
+var ToolbarIcon = ({ name }) => {
+  const Icon = ICONS[name];
+  return /* @__PURE__ */ jsx2(Icon, {});
+};
+
+// src/viewer-toolbar.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ViewerToolbarContext = createContext(null);
+var ViewerToolbarProvider = ({
+  controls,
+  children
+}) => /* @__PURE__ */ jsx3(ViewerToolbarContext.Provider, { value: controls, children });
+var useViewerToolbar = () => {
+  const controls = useContext(ViewerToolbarContext);
+  if (!controls) throw new Error("useViewerToolbar must be used inside <ViewerToolbarProvider>");
+  return controls;
+};
+var buttonName = (action) => `${action.slice(0, 1).toUpperCase()}${action.slice(1)}Button`;
+var ToolbarButton = ({ action, icon, label, toggle = true }) => {
+  const control = useViewerToolbar()[action];
+  if (!control) {
+    throw new Error(`<ViewerToolbar.${buttonName(action)}> requires a '${action}' toolbar control`);
+  }
+  const pressed = control.pressed ?? false;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "viewer-toolbar-button",
+      "data-viewer-toolbar-action": action,
+      type: "button",
+      "aria-label": label(pressed),
+      "aria-pressed": toggle ? pressed : void 0,
+      onClick: control.onClick,
+      children: [
+        /* @__PURE__ */ jsx3(ToolbarIcon, { name: icon }),
+        /* @__PURE__ */ jsx3("span", { className: "viewer-toolbar-tooltip", "data-viewer-toolbar-tooltip": "true", role: "tooltip", children: label(pressed) })
+      ]
+    }
+  );
+};
+var StockButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "stock",
+    icon: "stock",
+    label: (pressed) => pressed ? "Hide stock" : "Show stock"
+  }
+);
+var AxesButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "axes",
+    icon: "axes",
+    label: (pressed) => pressed ? "Hide axis" : "Show axis"
+  }
+);
+var GridButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "grid",
+    icon: "grid",
+    label: (pressed) => pressed ? "Hide grid" : "Show grid"
+  }
+);
+var BananaButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "banana",
+    icon: "banana",
+    label: (pressed) => pressed ? "Banana for scale (on)" : "Banana for scale"
+  }
+);
+var DirectionsButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "directions",
+    icon: "directions",
+    label: () => "Highlight faces by direction"
+  }
+);
+var HoverButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "hover",
+    icon: "hover",
+    label: (pressed) => pressed ? "Disable feature hover" : "Enable feature hover"
+  }
+);
+var FocusButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "focus",
+    icon: "focus",
+    label: (pressed) => pressed ? "Show full part" : "Focus selection"
+  }
+);
+var WireframeButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "wireframe", icon: "wireframe", label: () => "Wireframe" });
+var SectionButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "section",
+    icon: "section",
+    label: (pressed) => pressed ? "Exit section" : "Section"
+  }
+);
+var MeasureButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "measure",
+    icon: "measure",
+    label: (pressed) => pressed ? "Exit measure" : "Measure"
+  }
+);
+var FitButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "fit", icon: "fit", label: () => "Fit", toggle: false });
+var ResetButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "reset", icon: "reset", label: () => "Reset", toggle: false });
+var TopButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "top", icon: "top", label: () => "Top view", toggle: false });
+var Divider = () => /* @__PURE__ */ jsx3("span", { className: "viewer-toolbar-divider", "data-viewer-toolbar-divider": "true" });
+var Controls = ({ children, className: className2 }) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    className: ["viewer-toolbar", className2].filter(Boolean).join(" "),
+    "data-viewer-toolbar-controls": "true",
+    role: "group",
+    "aria-label": "Viewer controls",
+    children
+  }
+);
+var DefaultControls = () => {
+  const controls = useViewerToolbar();
+  const display = [
+    controls.stock ? /* @__PURE__ */ jsx3(StockButton, {}, "stock") : null,
+    controls.axes ? /* @__PURE__ */ jsx3(AxesButton, {}, "axes") : null,
+    controls.grid ? /* @__PURE__ */ jsx3(GridButton, {}, "grid") : null,
+    controls.banana ? /* @__PURE__ */ jsx3(BananaButton, {}, "banana") : null
+  ].filter(Boolean);
+  const analysis = [
+    controls.directions ? /* @__PURE__ */ jsx3(DirectionsButton, {}, "directions") : null,
+    controls.hover ? /* @__PURE__ */ jsx3(HoverButton, {}, "hover") : null,
+    controls.focus ? /* @__PURE__ */ jsx3(FocusButton, {}, "focus") : null,
+    controls.wireframe ? /* @__PURE__ */ jsx3(WireframeButton, {}, "wireframe") : null,
+    controls.section ? /* @__PURE__ */ jsx3(SectionButton, {}, "section") : null,
+    controls.measure ? /* @__PURE__ */ jsx3(MeasureButton, {}, "measure") : null
+  ].filter(Boolean);
+  const camera = [
+    controls.fit ? /* @__PURE__ */ jsx3(FitButton, {}, "fit") : null,
+    controls.reset ? /* @__PURE__ */ jsx3(ResetButton, {}, "reset") : null,
+    controls.top ? /* @__PURE__ */ jsx3(TopButton, {}, "top") : null
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs(Controls, { children: [
+    display,
+    display.length && analysis.length ? /* @__PURE__ */ jsx3(Divider, {}) : null,
+    analysis,
+    (display.length || analysis.length) && camera.length ? /* @__PURE__ */ jsx3(Divider, {}) : null,
+    camera
+  ] });
+};
+var ViewerToolbarRoot = ({ className: className2, children }) => {
+  useViewerToolbar();
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: ["viewer-toolbar-stack", className2].filter(Boolean).join(" "),
+      "data-viewer-toolbar": "true",
+      children: children ?? /* @__PURE__ */ jsx3(DefaultControls, {})
+    }
+  );
+};
+var ViewerToolbar = Object.assign(ViewerToolbarRoot, {
+  Controls,
+  Divider,
+  StockButton,
+  AxesButton,
+  GridButton,
+  BananaButton,
+  DirectionsButton,
+  HoverButton,
+  FocusButton,
+  WireframeButton,
+  SectionButton,
+  MeasureButton,
+  FitButton,
+  ResetButton,
+  TopButton
+});
+
+// src/stock.tsx
+import { useThree } from "@react-three/fiber";
+import { useEffect as useEffect2, useLayoutEffect, useMemo } from "react";
+import { BoxGeometry, Vector3 as Vector32 } from "three";
+
+// src/render/stock.ts
+import {
+  Box3,
+  EdgesGeometry,
+  Group,
+  LineBasicMaterial,
+  LineSegments,
+  Mesh,
+  MeshLambertMaterial,
+  Vector3
+} from "three";
+function fixedBoxStockBounds(geometry, dimensions, position = "model_centered", positionOffset = 0, offset = { x: 0, y: 0, z: 0 }) {
+  if (![dimensions.x, dimensions.y, dimensions.z].every(Number.isFinite) || [dimensions.x, dimensions.y, dimensions.z].some((value) => value <= 0)) {
+    throw new RangeError("Fixed stock dimensions must be finite and positive.");
+  }
+  if (!Number.isFinite(positionOffset)) {
+    throw new RangeError("Fixed stock position offset must be finite.");
+  }
+  if (![offset.x, offset.y, offset.z].every(Number.isFinite)) {
+    throw new RangeError("Fixed stock offset must be finite.");
+  }
+  const part = partBounds(geometry);
+  const center = part.getCenter(new Vector3());
+  const z = position === "offset_from_top" ? part.max.z + positionOffset - dimensions.z / 2 : position === "offset_from_bottom" ? part.min.z - positionOffset + dimensions.z / 2 : center.z;
+  const half = new Vector3(dimensions.x / 2, dimensions.y / 2, dimensions.z / 2);
+  return new Box3(
+    new Vector3(center.x, center.y, z).sub(half),
+    new Vector3(center.x, center.y, z).add(half)
+  ).translate(new Vector3(offset.x, offset.y, offset.z));
+}
+function boxStockBounds(geometry, allowance = 0, offset = { x: 0, y: 0, z: 0 }) {
+  const padding = typeof allowance === "number" ? new Vector3(allowance, allowance, allowance) : "wall" in allowance ? new Vector3(allowance.wall, allowance.wall, allowance.floor) : new Vector3(allowance.x, allowance.y, allowance.z);
+  if (padding.toArray().some((value) => !Number.isFinite(value) || value < 0)) {
+    throw new RangeError("Stock allowance must be finite and non-negative.");
+  }
+  if (![offset.x, offset.y, offset.z].every(Number.isFinite)) {
+    throw new RangeError("Stock offset must be finite.");
+  }
+  const box = partBounds(geometry);
+  box.expandByVector(padding).translate(new Vector3(offset.x, offset.y, offset.z));
+  const size = box.getSize(new Vector3());
+  if (size.toArray().some((value) => !Number.isFinite(value) || value <= 0)) {
+    throw new RangeError("Stock dimensions must be finite and positive.");
+  }
+  return box;
+}
+function partBounds(geometry) {
+  const position = geometry.getAttribute("position");
+  if (!position || position.count === 0)
+    throw new RangeError("Stock needs non-empty part geometry.");
+  const box = new Box3();
+  const point = new Vector3();
+  for (let index = 0; index < position.count; index += 1) {
+    point.fromBufferAttribute(position, index);
+    if (!Number.isFinite(point.x) || !Number.isFinite(point.y) || !Number.isFinite(point.z)) {
+      throw new RangeError("Stock needs finite part coordinates.");
+    }
+    box.expandByPoint(point);
+  }
+  return box;
+}
+function createStock(geometry) {
+  const material = new MeshLambertMaterial({ transparent: true, depthWrite: false });
+  const edgeMaterial = new LineBasicMaterial({ transparent: true, depthWrite: false });
+  const mesh = new Mesh(geometry, material);
+  const edgeGeometry = new EdgesGeometry(geometry, 15);
+  const edges = new LineSegments(edgeGeometry, edgeMaterial);
+  const object = new Group();
+  object.userData[STOCK_OBJECT] = true;
+  mesh.renderOrder = 5;
+  edges.renderOrder = 6;
+  mesh.raycast = () => {
+  };
+  edges.raycast = () => {
+  };
+  object.add(mesh, edges);
+  return {
+    object,
+    material,
+    edgeMaterial,
+    edges,
+    dispose() {
+      material.dispose();
+      edgeMaterial.dispose();
+      edgeGeometry.dispose();
+    }
+  };
+}
+
+// src/stock.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Stock = ({
+  geometry,
+  color = 12176354,
+  opacity = 0.2,
+  edgeColor = 11058648,
+  edgeOpacity = 0.75,
+  showEdges = true
+}) => {
+  const invalidate = useThree((state) => state.invalidate);
+  const stock = useMemo(() => createStock(geometry), [geometry]);
+  useEffect2(() => () => stock.dispose(), [stock]);
+  useLayoutEffect(() => {
+    stock.material.color.setHex(color);
+    stock.material.opacity = opacity;
+    stock.edgeMaterial.color.setHex(edgeColor);
+    stock.edgeMaterial.opacity = edgeOpacity;
+    stock.edges.visible = showEdges;
+    invalidate();
+  }, [color, edgeColor, edgeOpacity, invalidate, opacity, showEdges, stock]);
+  return /* @__PURE__ */ jsx4("primitive", { object: stock.object, dispose: null });
+};
+var BoxStock = ({
+  partGeometry,
+  dimensions,
+  position = "model_centered",
+  positionOffset = 0,
+  allowance = 0,
+  offset,
+  ...props
+}) => {
+  const ox = offset?.x ?? 0;
+  const oy = offset?.y ?? 0;
+  const oz = offset?.z ?? 0;
+  const geometry = useMemo(() => {
+    const box = dimensions ? fixedBoxStockBounds(partGeometry, dimensions, position, positionOffset, {
+      x: ox,
+      y: oy,
+      z: oz
+    }) : boxStockBounds(partGeometry, allowance, { x: ox, y: oy, z: oz });
+    const size = box.getSize(new Vector32());
+    const center = box.getCenter(new Vector32());
+    return new BoxGeometry(size.x, size.y, size.z).translate(center.x, center.y, center.z);
+  }, [allowance, dimensions, ox, oy, oz, partGeometry, position, positionOffset]);
+  useEffect2(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ jsx4(Stock, { geometry, ...props });
+};
+
+// src/banana.tsx
+import { useGLTF } from "@react-three/drei";
+import { useThree as useThree2 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef } from "react";
+
+// src/render/banana.ts
+import { Vector3 as Vector33 } from "three";
+var BANANA_GAP = 0.1;
+function bananaPosition(part, banana) {
+  const size = part.getSize(new Vector33());
+  const reach = Math.max(size.x, size.y, size.z);
+  const centre = part.getCenter(new Vector33());
+  return new Vector33(
+    part.max.x + reach * BANANA_GAP - banana.min.x,
+    centre.y - (banana.min.y + banana.max.y) / 2,
+    part.min.z - banana.min.z
+  );
+}
+function bananaFrameBounds(part, banana, position) {
+  return part.clone().union(banana.clone().translate(position));
+}
+
+// src/banana.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BANANA_MODEL_URL = new URL("./assets/banana.glb", import.meta.url).href;
+var SKIN = "#e8b530";
+var FURNITURE = { [EXCLUDE_FROM_FRAME]: true };
+var Banana = ({ onPlaced }) => {
+  const part = useContentBox();
+  const invalidate = useThree2((state) => state.invalidate);
+  const gltf = useGLTF(BANANA_MODEL_URL);
+  const group = useRef(null);
+  const geometry = useMemo2(() => {
+    let found = null;
+    gltf.scene.traverse((object) => {
+      const mesh = object;
+      if (found === null && mesh.isMesh) found = mesh.geometry;
+    });
+    const source = found;
+    if (!source) return null;
+    const own = source.clone();
+    own.computeVertexNormals();
+    own.rotateY(Math.PI / 2);
+    own.rotateX(Math.PI / 2);
+    own.computeBoundingBox();
+    return own;
+  }, [gltf]);
+  useLayoutEffect2(() => {
+    const node = group.current;
+    const own = geometry?.boundingBox;
+    if (!node || !own || part.isEmpty()) return;
+    const position = bananaPosition(part, own);
+    node.position.copy(position);
+    node.visible = true;
+    node.updateWorldMatrix(true, true);
+    onPlaced?.(bananaFrameBounds(part, own, position));
+    invalidate();
+  }, [geometry, invalidate, onPlaced, part]);
+  if (!geometry) return null;
+  return /* @__PURE__ */ jsx5("group", { ref: group, userData: FURNITURE, visible: false, children: /* @__PURE__ */ jsx5("mesh", { geometry, children: /* @__PURE__ */ jsx5("meshStandardMaterial", { color: SKIN, roughness: 0.85, metalness: 0 }) }) });
+};
+
+// src/render/direction-highlights.ts
+function directionHighlights(model, activeDirection = null) {
+  const features = model.features.map((feature) => ({ feature, index: directionIndexOf(model, feature.machiningDirection) })).filter(({ index }) => index >= 0 && (activeDirection === null || index === activeDirection)).sort(
+    (a, b) => featureTypeRank(a.feature.featureType) - featureTypeRank(b.feature.featureType) || a.index - b.index || (a.feature.tag < b.feature.tag ? -1 : a.feature.tag > b.feature.tag ? 1 : 0)
+  );
+  const colors = /* @__PURE__ */ new Map();
+  for (const { feature, index } of features) {
+    for (const region of model.regionIndex.regionsForFeature(feature.tag)) {
+      if (!colors.has(region)) colors.set(region, { region, color: directionColor(index) });
+    }
+  }
+  return [...colors.values()].sort((a, b) => a.region - b.region);
+}
 
 // src/primitives.tsx
 import { GizmoHelper } from "@react-three/drei";
-import { useThree } from "@react-three/fiber";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useThree as useThree3 } from "@react-three/fiber";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
 
 // src/render/grid.ts
-import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
+import { BufferGeometry, Float32BufferAttribute, Vector3 as Vector34 } from "three";
 var STEPS = [0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 25, 50, 100, 200, 250, 500, 1e3];
 var TARGET_CELLS = 10;
 var OVERHANG = 1.6;
 function gridSpec(box) {
-  const size = box.getSize(new Vector3());
-  const center = box.getCenter(new Vector3());
+  const size = box.getSize(new Vector34());
+  const center = box.getCenter(new Vector34());
   const largest = Math.max(size.x, size.y, 1e-6);
   const ideal = largest / TARGET_CELLS;
   const step = [...STEPS].reverse().find((candidate) => candidate <= ideal) ?? STEPS[0];
@@ -189,26 +703,26 @@ function gridFor(box, options = {}) {
 }
 
 // src/primitives.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var FURNITURE = { [EXCLUDE_FROM_FRAME]: true };
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var FURNITURE2 = { [EXCLUDE_FROM_FRAME]: true };
 var Grid = ({ step, extent, color, opacity = 0.35 }) => {
   const theme = resolveTheme();
   const box = useContentBox();
-  const geometry = useMemo(() => gridFor(box, { step, extent }), [box, extent, step]);
-  useEffect(() => () => geometry?.dispose(), [geometry]);
+  const geometry = useMemo3(() => gridFor(box, { step, extent }), [box, extent, step]);
+  useEffect3(() => () => geometry?.dispose(), [geometry]);
   if (!geometry) return null;
-  return /* @__PURE__ */ jsx("lineSegments", { geometry, renderOrder: -1, raycast: () => null, userData: FURNITURE, children: /* @__PURE__ */ jsx("lineBasicMaterial", { color: color ?? theme.cubeEdge, transparent: true, opacity }) });
+  return /* @__PURE__ */ jsx6("lineSegments", { geometry, renderOrder: -1, raycast: () => null, userData: FURNITURE2, children: /* @__PURE__ */ jsx6("lineBasicMaterial", { color: color ?? theme.cubeEdge, transparent: true, opacity }) });
 };
-var Axes = ({ size = 25 }) => /* @__PURE__ */ jsx("axesHelper", { args: [size], userData: FURNITURE, raycast: () => null });
+var Axes = ({ size = 25 }) => /* @__PURE__ */ jsx6("axesHelper", { args: [size], userData: FURNITURE2, raycast: () => null });
 var ViewCube = ({
   alignment = "top-right",
   margin = [80, 80],
   theme,
   onViewChange
 }) => {
-  const resolved = useMemo(() => resolveTheme(theme), [theme]);
-  const zones = useMemo(() => cubeZones(), []);
-  return /* @__PURE__ */ jsx(GizmoHelper, { alignment, margin, children: /* @__PURE__ */ jsx(CubePanels, { zones, theme: resolved, onViewChange }) });
+  const resolved = useMemo3(() => resolveTheme(theme), [theme]);
+  const zones = useMemo3(() => cubeZones(), []);
+  return /* @__PURE__ */ jsx6(GizmoHelper, { alignment, margin, children: /* @__PURE__ */ jsx6(CubePanels, { zones, theme: resolved, onViewChange }) });
 };
 var CubePanels = ({
   zones,
@@ -216,15 +730,15 @@ var CubePanels = ({
   onViewChange
 }) => {
   const controls = useViewerControls();
-  const invalidate = useThree((state) => state.invalidate);
-  const groupRef = useRef(null);
-  const [hovered, setHovered] = useState(null);
-  const panels = useMemo(
+  const invalidate = useThree3((state) => state.invalidate);
+  const groupRef = useRef2(null);
+  const [hovered, setHovered] = useState2(null);
+  const panels = useMemo3(
     () => zones.map((zone) => ({ zone, geometry: panelGeometry(zone) })),
     [zones]
   );
-  const outline = useMemo(() => cubeOutlineGeometry(zones), [zones]);
-  const labels = useMemo(
+  const outline = useMemo3(() => cubeOutlineGeometry(zones), [zones]);
+  const labels = useMemo3(
     () => zones.filter((zone) => zone.kind === "face").map((zone) => ({
       zone,
       geometry: labelGeometry(zone),
@@ -232,7 +746,7 @@ var CubePanels = ({
     })),
     [theme.cubeLabel, zones]
   );
-  useEffect(
+  useEffect3(
     () => () => {
       for (const panel of panels) panel.geometry.dispose();
       for (const label of labels) {
@@ -251,8 +765,8 @@ var CubePanels = ({
     setHovered(name);
     invalidate();
   };
-  return /* @__PURE__ */ jsxs("group", { ref: groupRef, scale: 38, children: [
-    panels.map(({ zone, geometry }) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("group", { ref: groupRef, scale: 38, children: [
+    panels.map(({ zone, geometry }) => /* @__PURE__ */ jsx6(
       "mesh",
       {
         geometry,
@@ -265,7 +779,7 @@ var CubePanels = ({
           event.stopPropagation();
           choose(zone);
         },
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx6(
           "meshLambertMaterial",
           {
             color: hovered === zone.name ? theme.hover : theme.cube,
@@ -277,19 +791,19 @@ var CubePanels = ({
       },
       zone.name
     )),
-    labels.map(({ zone, geometry, texture }) => /* @__PURE__ */ jsx("mesh", { geometry, raycast: () => null, children: /* @__PURE__ */ jsx("meshBasicMaterial", { map: texture, transparent: true }) }, `${zone.name}-label`)),
-    /* @__PURE__ */ jsx("lineSegments", { geometry: outline, raycast: () => null, children: /* @__PURE__ */ jsx("lineBasicMaterial", { color: theme.cubeEdge }) }),
-    /* @__PURE__ */ jsx("ambientLight", { intensity: 1.4 }),
-    /* @__PURE__ */ jsx("directionalLight", { position: [viewVector("top-front-right").x, 1, 2], intensity: 1.1 })
+    labels.map(({ zone, geometry, texture }) => /* @__PURE__ */ jsx6("mesh", { geometry, raycast: () => null, children: /* @__PURE__ */ jsx6("meshBasicMaterial", { map: texture, transparent: true }) }, `${zone.name}-label`)),
+    /* @__PURE__ */ jsx6("lineSegments", { geometry: outline, raycast: () => null, children: /* @__PURE__ */ jsx6("lineBasicMaterial", { color: theme.cubeEdge }) }),
+    /* @__PURE__ */ jsx6("ambientLight", { intensity: 1.4 }),
+    /* @__PURE__ */ jsx6("directionalLight", { position: [viewVector("top-front-right").x, 1, 2], intensity: 1.1 })
   ] });
 };
 
 // src/direction-arrows.tsx
-import { useThree as useThree2 } from "@react-three/fiber";
-import { useMemo as useMemo2 } from "react";
-import { Quaternion, Vector3 as Vector32 } from "three";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var FURNITURE2 = { [EXCLUDE_FROM_FRAME]: true };
+import { useThree as useThree4 } from "@react-three/fiber";
+import { useMemo as useMemo4 } from "react";
+import { Quaternion, Vector3 as Vector35 } from "three";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var FURNITURE3 = { [EXCLUDE_FROM_FRAME]: true };
 var DirectionArrows = ({
   directions,
   activeDirection = null,
@@ -301,7 +815,7 @@ var DirectionArrows = ({
   visible = true
 }) => {
   const box = useContentBox();
-  const resolved = useMemo2(() => resolveTheme(theme), [theme]);
+  const resolved = useMemo4(() => resolveTheme(theme), [theme]);
   const shown = shownDirection === void 0 ? activeDirection : shownDirection;
   const drawn = (index) => {
     if (shown === null) return true;
@@ -313,10 +827,10 @@ var DirectionArrows = ({
     // Excluded from framing: the arrows are deliberately placed outside the
     // part, so a Fit that measured them would frame the arrows and leave the
     // part small in the middle of them.
-    /* @__PURE__ */ jsxs2("group", { userData: FURNITURE2, children: [
+    /* @__PURE__ */ jsxs3("group", { userData: FURNITURE3, children: [
       directions.map((direction, index) => {
         if (!drawn(index)) return null;
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx7(
           Arrow,
           {
             direction,
@@ -328,7 +842,7 @@ var DirectionArrows = ({
           `candidate-${index}`
         );
       }),
-      namedDirections.map((named) => /* @__PURE__ */ jsx2(
+      namedDirections.map((named) => /* @__PURE__ */ jsx7(
         Arrow,
         {
           direction: named.direction,
@@ -339,17 +853,17 @@ var DirectionArrows = ({
         },
         `named-${named.index}`
       )),
-      previewDirection ? /* @__PURE__ */ jsx2(Arrow, { direction: previewDirection, box, color: resolved.hover, opacity: 0.95, onTop: true }) : null
+      previewDirection ? /* @__PURE__ */ jsx7(Arrow, { direction: previewDirection, box, color: resolved.hover, opacity: 0.95, onTop: true }) : null
     ] })
   );
 };
 var Arrow = ({ direction, box, color, opacity, onPick, onTop = false }) => {
-  const invalidate = useThree2((state) => state.invalidate);
-  const { tip, length, quaternion } = useMemo2(() => {
+  const invalidate = useThree4((state) => state.invalidate);
+  const { tip, length, quaternion } = useMemo4(() => {
     const placement = arrowPlacement(direction, box);
     const aim = new Quaternion().setFromUnitVectors(
       CONE_AXIS,
-      new Vector32(direction.x, direction.y, direction.z).normalize()
+      new Vector35(direction.x, direction.y, direction.z).normalize()
     );
     return { tip: placement.tip, length: placement.length, quaternion: aim };
   }, [box, direction]);
@@ -362,234 +876,32 @@ var Arrow = ({ direction, box, color, opacity, onPick, onTop = false }) => {
       invalidate();
     }
   } : {};
-  return /* @__PURE__ */ jsxs2("group", { position: tip, quaternion, renderOrder: onTop ? 10 : 3, children: [
-    /* @__PURE__ */ jsxs2("mesh", { position: [0, head * 0.5, 0], rotation: [Math.PI, 0, 0], ...press, children: [
-      /* @__PURE__ */ jsx2("coneGeometry", { args: [length * HEAD_RADIUS, head, 20] }),
-      /* @__PURE__ */ jsx2("meshBasicMaterial", { color, transparent: true, opacity, depthTest: !onTop })
+  return /* @__PURE__ */ jsxs3("group", { position: tip, quaternion, renderOrder: onTop ? 10 : 3, children: [
+    /* @__PURE__ */ jsxs3("mesh", { position: [0, head * 0.5, 0], rotation: [Math.PI, 0, 0], ...press, children: [
+      /* @__PURE__ */ jsx7("coneGeometry", { args: [length * HEAD_RADIUS, head, 20] }),
+      /* @__PURE__ */ jsx7("meshBasicMaterial", { color, transparent: true, opacity, depthTest: !onTop })
     ] }),
-    /* @__PURE__ */ jsxs2("mesh", { position: [0, head + shaft * 0.5, 0], ...press, children: [
-      /* @__PURE__ */ jsx2("cylinderGeometry", { args: [length * SHAFT_RADIUS, length * SHAFT_RADIUS, shaft, 12] }),
-      /* @__PURE__ */ jsx2("meshBasicMaterial", { color, transparent: true, opacity, depthTest: !onTop })
+    /* @__PURE__ */ jsxs3("mesh", { position: [0, head + shaft * 0.5, 0], ...press, children: [
+      /* @__PURE__ */ jsx7("cylinderGeometry", { args: [length * SHAFT_RADIUS, length * SHAFT_RADIUS, shaft, 12] }),
+      /* @__PURE__ */ jsx7("meshBasicMaterial", { color, transparent: true, opacity, depthTest: !onTop })
     ] })
   ] });
 };
 
 // src/section-tool.tsx
-import { useFrame, useThree as useThree3 } from "@react-three/fiber";
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
+import { useFrame, useThree as useThree5 } from "@react-three/fiber";
+import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState3, useSyncExternalStore } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide,
   Quaternion as Quaternion2,
   Raycaster,
-  Vector2 as Vector22,
-  Vector3 as Vector34
+  Vector2,
+  Vector3 as Vector36
 } from "three";
-
-// src/render/measure.ts
-import { Vector2, Vector3 as Vector33 } from "three";
-var MEASURE_RENDER_ORDER = 7;
-var AXIS_COLORS = { x: 16739179, y: 7331978, z: 7314431 };
-var SNAP_PIXELS = {
-  vertex: 14,
-  midpoint: 12,
-  edge: 9
-};
-var SNAP_MARKER_PIXELS = {
-  vertex: 6,
-  midpoint: 5,
-  edge: 4,
-  face: 3.5
-};
-var MEASURE_MARKER_PIXELS = 3.5;
-var MEASURE_LINE_PIXELS = {
-  line: 2,
-  leg: 1.5,
-  edge: 3
-};
-var DELTA_DASH_PIXELS = 6;
-var ANGLE_ARC_FRACTION = 0.3;
-var ANGLE_ARC_SEGMENTS = 24;
-function snapAt(hit, edges, camera, viewport) {
-  const face = {
-    kind: "face",
-    point: hit.point.clone(),
-    normal: hit.normal.clone(),
-    edge: null
-  };
-  if (!edges) return face;
-  const positions = edges.positions;
-  const segments = Math.floor(positions.length / 6);
-  if (segments === 0) return face;
-  const inverse = edges.matrixWorld.clone().invert();
-  const p = hit.point.clone().applyMatrix4(inverse);
-  const n = hit.normal.clone().transformDirection(inverse);
-  const reach = screenLength(camera, hit.point, viewport, SNAP_PIXELS.vertex) * 1.5;
-  const reachSq = reach * reach;
-  const pointer = screenPoint(camera, hit.point, viewport);
-  const best = {
-    vertex: { distance: Number.POSITIVE_INFINITY, index: -1, t: 0 },
-    midpoint: { distance: Number.POSITIVE_INFINITY, index: -1, t: 0 },
-    edge: { distance: Number.POSITIVE_INFINITY, index: -1, t: 0 }
-  };
-  const a = new Vector33();
-  const b = new Vector33();
-  const ab = new Vector33();
-  const ap = new Vector33();
-  const q = new Vector33();
-  const pixel = new Vector2();
-  const consider = (kind, point, index, t) => {
-    const distance = screenPoint(
-      camera,
-      q.copy(point).applyMatrix4(edges.matrixWorld),
-      viewport,
-      pixel
-    ).distanceTo(pointer);
-    if (distance <= SNAP_PIXELS[kind] && distance < best[kind].distance) {
-      best[kind] = { distance, index, t };
-    }
-  };
-  for (let index = 0; index < segments; index += 1) {
-    const offset = index * 6;
-    a.set(positions[offset], positions[offset + 1], positions[offset + 2]);
-    b.set(positions[offset + 3], positions[offset + 4], positions[offset + 5]);
-    if (Math.abs(ap.subVectors(a, p).dot(n)) > reach) continue;
-    if (Math.abs(ap.subVectors(b, p).dot(n)) > reach) continue;
-    ab.subVectors(b, a);
-    ap.subVectors(p, a);
-    const lengthSq = ab.lengthSq();
-    const t = lengthSq === 0 ? 0 : Math.min(1, Math.max(0, ap.dot(ab) / lengthSq));
-    q.copy(a).addScaledVector(ab, t);
-    if (q.distanceToSquared(p) > reachSq) continue;
-    consider("vertex", a, index, 0);
-    consider("vertex", b, index, 1);
-    consider("midpoint", q.copy(a).addScaledVector(ab, 0.5), index, 0.5);
-    consider("edge", q.copy(a).addScaledVector(ab, t), index, t);
-  }
-  for (const kind of ["vertex", "midpoint", "edge"]) {
-    const found = best[kind];
-    if (found.index < 0) continue;
-    const offset = found.index * 6;
-    const start = new Vector33(positions[offset], positions[offset + 1], positions[offset + 2]);
-    const end = new Vector33(positions[offset + 3], positions[offset + 4], positions[offset + 5]);
-    const point = start.clone().lerp(end, found.t);
-    start.applyMatrix4(edges.matrixWorld);
-    end.applyMatrix4(edges.matrixWorld);
-    point.applyMatrix4(edges.matrixWorld);
-    return {
-      kind,
-      point,
-      normal: hit.normal.clone(),
-      edge: kind === "vertex" ? null : [start, end]
-    };
-  }
-  return face;
-}
-function screenPoint(camera, point, viewport, into = new Vector2()) {
-  const ndc = point.clone().project(camera);
-  return into.set((ndc.x + 1) / 2 * viewport.width, (1 - ndc.y) / 2 * viewport.height);
-}
-var POINTS_PER_MEASUREMENT = {
-  distance: 2,
-  angle: 3
-};
-function measurementFromPoints(kind, points, id) {
-  if (points.length < POINTS_PER_MEASUREMENT[kind]) return null;
-  const [a, b, c] = points;
-  if (kind === "distance") return { id, kind, points: [copy(a), copy(b)] };
-  return { id, kind, points: [copy(a), copy(b), copy(c)] };
-}
-function nextMeasurementId(held) {
-  return held.reduce((top, entry) => Math.max(top, entry.id), 0) + 1;
-}
-function distanceBetween(a, b) {
-  return Math.hypot(b.x - a.x, b.y - a.y, b.z - a.z);
-}
-function deltaBetween(a, b) {
-  return { x: b.x - a.x, y: b.y - a.y, z: b.z - a.z };
-}
-function midpoint(a, b) {
-  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, z: (a.z + b.z) / 2 };
-}
-function angleAt(vertex, a, b) {
-  const u = new Vector33(a.x - vertex.x, a.y - vertex.y, a.z - vertex.z);
-  const w = new Vector33(b.x - vertex.x, b.y - vertex.y, b.z - vertex.z);
-  if (u.lengthSq() === 0 || w.lengthSq() === 0) return 0;
-  return u.angleTo(w) * 180 / Math.PI;
-}
-function lockToAxis(from, to) {
-  const delta = deltaBetween(from, to);
-  let axis = "x";
-  for (const candidate of ["y", "z"]) {
-    if (Math.abs(delta[candidate]) > Math.abs(delta[axis])) axis = candidate;
-  }
-  return { axis, point: { ...from, [axis]: to[axis] } };
-}
-function deltaLegs(a, b) {
-  const delta = deltaBetween(a, b);
-  const threshold = Math.max(1e-9, distanceBetween(a, b) * 1e-6);
-  const legs = [];
-  let cursor = copy(a);
-  for (const axis of ["x", "y", "z"]) {
-    if (Math.abs(delta[axis]) <= threshold) continue;
-    const to = { ...cursor, [axis]: b[axis] };
-    legs.push({ axis, from: cursor, to, length: Math.abs(delta[axis]) });
-    cursor = to;
-  }
-  return legs.length > 1 ? legs : [];
-}
-function angleArc(vertex, a, b, radius, segments = ANGLE_ARC_SEGMENTS) {
-  const v = new Vector33(vertex.x, vertex.y, vertex.z);
-  const u = new Vector33(a.x, a.y, a.z).sub(v);
-  const w = new Vector33(b.x, b.y, b.z).sub(v);
-  if (u.lengthSq() === 0 || w.lengthSq() === 0) return [];
-  u.normalize();
-  w.normalize();
-  const theta = u.angleTo(w);
-  const sine = Math.sin(theta);
-  if (sine < 1e-6) {
-    return [v.clone().addScaledVector(u, radius), v.clone().addScaledVector(w, radius)];
-  }
-  const points = [];
-  for (let i = 0; i <= segments; i += 1) {
-    const t = i / segments;
-    const direction = u.clone().multiplyScalar(Math.sin((1 - t) * theta) / sine).addScaledVector(w, Math.sin(t * theta) / sine);
-    points.push(v.clone().addScaledVector(direction, radius));
-  }
-  return points;
-}
-function angleArcRadius(vertex, a, b) {
-  return Math.min(distanceBetween(vertex, a), distanceBetween(vertex, b)) * ANGLE_ARC_FRACTION;
-}
-function formatMillimetres(mm, digits = 2) {
-  return `${mm.toFixed(digits)} mm`;
-}
-function formatDegrees(degrees, digits = 1) {
-  return `${degrees.toFixed(digits)}\xB0`;
-}
-function measurementLabel(measurement, format = formatMillimetres) {
-  if (measurement.kind === "distance") {
-    const [a2, b2] = measurement.points;
-    return format(distanceBetween(a2, b2));
-  }
-  const [a, vertex, b] = measurement.points;
-  return formatDegrees(angleAt(vertex, a, b));
-}
-function measurementLabelAnchor(measurement) {
-  if (measurement.kind === "distance") return midpoint(measurement.points[0], measurement.points[1]);
-  const [a, vertex, b] = measurement.points;
-  const arc = angleArc(vertex, a, b, angleArcRadius(vertex, a, b) * 1.6, 2);
-  const middle = arc[1] ?? arc[0];
-  return middle ? { x: middle.x, y: middle.y, z: middle.z } : copy(vertex);
-}
-function copy(v) {
-  return { x: v.x, y: v.y, z: v.z };
-}
-
-// src/section-tool.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FURNITURE3 = { [EXCLUDE_FROM_FRAME]: true };
-var Z = new Vector34(0, 0, 1);
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var FURNITURE4 = { [EXCLUDE_FROM_FRAME]: true };
+var Z = new Vector36(0, 0, 1);
 var AXIS_ROTATIONS = {
   x: [0, Math.PI / 2, 0],
   y: [Math.PI / 2, 0, 0],
@@ -601,12 +913,12 @@ var SectionTool = ({ theme }) => {
   const store = useSectionStore();
   const section = useSyncExternalStore(store.subscribe, store.get, store.get);
   const box = useContentBox();
-  const resolved = useMemo3(() => resolveTheme(theme), [theme]);
-  useEffect2(() => {
+  const resolved = useMemo5(() => resolveTheme(theme), [theme]);
+  useEffect4(() => {
     store.setEngaged(true);
     return () => store.setEngaged(false);
   }, [store]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (!section) return void 0;
     const clear = (event) => {
       if (event.key === "Escape") store.set(null);
@@ -615,43 +927,43 @@ var SectionTool = ({ theme }) => {
     return () => window.removeEventListener("keydown", clear);
   }, [section, store]);
   if (box.isEmpty()) return null;
-  return /* @__PURE__ */ jsx3("group", { userData: FURNITURE3, children: section ? /* @__PURE__ */ jsx3(CutSheet, { box, section, theme: resolved }) : /* @__PURE__ */ jsx3(Picker, { box, theme: resolved }) });
+  return /* @__PURE__ */ jsx8("group", { userData: FURNITURE4, children: section ? /* @__PURE__ */ jsx8(CutSheet, { box, section, theme: resolved }) : /* @__PURE__ */ jsx8(Picker, { box, theme: resolved }) });
 };
 var useSquare = () => {
-  const square = useMemo3(
+  const square = useMemo5(
     () => new BufferGeometry2().setFromPoints([
-      new Vector34(-1, 1, 0),
-      new Vector34(1, 1, 0),
-      new Vector34(1, -1, 0),
-      new Vector34(-1, -1, 0)
+      new Vector36(-1, 1, 0),
+      new Vector36(1, 1, 0),
+      new Vector36(1, -1, 0),
+      new Vector36(-1, -1, 0)
     ]),
     []
   );
-  useEffect2(() => () => square.dispose(), [square]);
+  useEffect4(() => () => square.dispose(), [square]);
   return square;
 };
 var Picker = ({ box, theme }) => {
   const store = useSectionStore();
-  const camera = useThree3((state) => state.camera);
-  const scene = useThree3((state) => state.scene);
-  const domElement = useThree3((state) => state.gl.domElement);
-  const invalidate = useThree3((state) => state.invalidate);
+  const camera = useThree5((state) => state.camera);
+  const scene = useThree5((state) => state.scene);
+  const domElement = useThree5((state) => state.gl.domElement);
+  const invalidate = useThree5((state) => state.invalidate);
   const isTap = useTapGuard();
   const square = useSquare();
-  const previewRef = useRef2(null);
-  const hover = useRef2(null);
-  const [hoveredPlane, setHoveredPlane] = useState2(null);
-  const span = useMemo3(() => box.getSize(new Vector34()).length(), [box]);
-  const centre = useMemo3(() => box.getCenter(new Vector34()), [box]);
+  const previewRef = useRef3(null);
+  const hover = useRef3(null);
+  const [hoveredPlane, setHoveredPlane] = useState3(null);
+  const span = useMemo5(() => box.getSize(new Vector36()).length(), [box]);
+  const centre = useMemo5(() => box.getCenter(new Vector36()), [box]);
   const previewSize = span * PREVIEW_SCALE;
-  useEffect2(() => {
+  useEffect4(() => {
     store.setPicking(true);
     return () => store.setPicking(false);
   }, [store]);
-  useEffect2(() => {
+  useEffect4(() => {
     const raycaster = new Raycaster();
-    const pointer = new Vector22();
-    const aim = new Vector34();
+    const pointer = new Vector2();
+    const aim = new Vector36();
     const hide = () => {
       if (!hover.current) return;
       hover.current = null;
@@ -678,6 +990,7 @@ var Picker = ({ box, theme }) => {
       invalidate();
     };
     const up = (event) => {
+      move(event);
       const hit = hover.current;
       if (event.button !== 0 || !hit || !isTap(event)) return;
       store.set({
@@ -695,7 +1008,7 @@ var Picker = ({ box, theme }) => {
       domElement.removeEventListener("pointerup", up);
     };
   }, [box, camera, domElement, invalidate, isTap, scene, span, store]);
-  const [planes, setPlanes] = useState2(() => axesPlanes(box, camera.position));
+  const [planes, setPlanes] = useState3(() => axesPlanes(box, camera.position));
   const key = planes.map((plane) => plane.sign).join();
   useFrame(() => {
     const next = [camera.position.x, camera.position.y, camera.position.z].map((eye, axis) => eye - [centre.x, centre.y, centre.z][axis] < 0 ? -1 : 1).join();
@@ -721,11 +1034,11 @@ var Picker = ({ box, theme }) => {
       store.set(plane.options);
     }
   });
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsxs3("group", { ref: previewRef, visible: false, children: [
-      /* @__PURE__ */ jsxs3("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
-        /* @__PURE__ */ jsx3("planeGeometry", { args: [previewSize, previewSize] }),
-        /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4("group", { ref: previewRef, visible: false, children: [
+      /* @__PURE__ */ jsxs4("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
+        /* @__PURE__ */ jsx8("planeGeometry", { args: [previewSize, previewSize] }),
+        /* @__PURE__ */ jsx8(
           "meshBasicMaterial",
           {
             color: theme.sectionOutline,
@@ -736,14 +1049,14 @@ var Picker = ({ box, theme }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx8(
         "lineLoop",
         {
           geometry: square,
           scale: previewSize / 2,
           renderOrder: SECTION_RENDER_ORDER.outline,
           raycast: () => null,
-          children: /* @__PURE__ */ jsx3(
+          children: /* @__PURE__ */ jsx8(
             "lineBasicMaterial",
             {
               color: theme.sectionOutline,
@@ -756,15 +1069,15 @@ var Picker = ({ box, theme }) => {
         }
       )
     ] }),
-    planes.map((plane) => /* @__PURE__ */ jsxs3(
+    planes.map((plane) => /* @__PURE__ */ jsxs4(
       "group",
       {
         position: [plane.position.x, plane.position.y, plane.position.z],
         rotation: AXIS_ROTATIONS[plane.axis],
         children: [
-          /* @__PURE__ */ jsxs3("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, ...planeHandlers(plane), children: [
-            /* @__PURE__ */ jsx3("planeGeometry", { args: [plane.size, plane.size] }),
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs4("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, ...planeHandlers(plane), children: [
+            /* @__PURE__ */ jsx8("planeGeometry", { args: [plane.size, plane.size] }),
+            /* @__PURE__ */ jsx8(
               "meshBasicMaterial",
               {
                 color: AXIS_COLORS[plane.axis],
@@ -775,14 +1088,14 @@ var Picker = ({ box, theme }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx8(
             "lineLoop",
             {
               geometry: square,
               scale: plane.size / 2,
               renderOrder: SECTION_RENDER_ORDER.outline,
               raycast: () => null,
-              children: /* @__PURE__ */ jsx3("lineBasicMaterial", { color: AXIS_COLORS[plane.axis], transparent: true, opacity: 0.7 })
+              children: /* @__PURE__ */ jsx8("lineBasicMaterial", { color: AXIS_COLORS[plane.axis], transparent: true, opacity: 0.7 })
             }
           )
         ]
@@ -793,9 +1106,9 @@ var Picker = ({ box, theme }) => {
 };
 var CutSheet = ({ box, section, theme }) => {
   const square = useSquare();
-  const cut = useMemo3(() => resolveSectionPlane(section, box), [box, section]);
-  const span = useMemo3(() => box.getSize(new Vector34()).length(), [box]);
-  const placement = useMemo3(() => {
+  const cut = useMemo5(() => resolveSectionPlane(section, box), [box, section]);
+  const span = useMemo5(() => box.getSize(new Vector36()).length(), [box]);
+  const placement = useMemo5(() => {
     if (!cut) return null;
     const position = sectionAnchor(box, cut.plane).addScaledVector(
       cut.plane.normal,
@@ -805,10 +1118,10 @@ var CutSheet = ({ box, section, theme }) => {
   }, [box, cut, span]);
   if (!placement) return null;
   const size = span * OUTLINE_SCALE;
-  return /* @__PURE__ */ jsxs3("group", { position: placement.position, quaternion: placement.quaternion, children: [
-    /* @__PURE__ */ jsxs3("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
-      /* @__PURE__ */ jsx3("planeGeometry", { args: [size, size] }),
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("group", { position: placement.position, quaternion: placement.quaternion, children: [
+    /* @__PURE__ */ jsxs4("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
+      /* @__PURE__ */ jsx8("planeGeometry", { args: [size, size] }),
+      /* @__PURE__ */ jsx8(
         "meshBasicMaterial",
         {
           color: theme.sectionOutline,
@@ -819,14 +1132,14 @@ var CutSheet = ({ box, section, theme }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx8(
       "lineLoop",
       {
         geometry: square,
         scale: size / 2,
         renderOrder: SECTION_RENDER_ORDER.outline,
         raycast: () => null,
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx8(
           "lineBasicMaterial",
           {
             color: theme.sectionOutline,
@@ -843,32 +1156,32 @@ var CutSheet = ({ box, section, theme }) => {
 
 // src/measure-tool.tsx
 import { Html, Line } from "@react-three/drei";
-import { useFrame as useFrame2, useThree as useThree4 } from "@react-three/fiber";
+import { useFrame as useFrame2, useThree as useThree6 } from "@react-three/fiber";
 import {
-  useEffect as useEffect3,
-  useLayoutEffect,
-  useMemo as useMemo4,
-  useRef as useRef3,
-  useState as useState3,
+  useEffect as useEffect5,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo6,
+  useRef as useRef4,
+  useState as useState4,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import {
   Matrix4,
   Raycaster as Raycaster2,
   SphereGeometry,
-  Vector2 as Vector23,
-  Vector3 as Vector36
+  Vector2 as Vector22,
+  Vector3 as Vector38
 } from "three";
 
 // src/render/resample.ts
-import { Vector3 as Vector35 } from "three";
+import { Vector3 as Vector37 } from "three";
 var ON_PLANE = 1e-7;
 var STITCH = 1e-5;
 var COLLINEAR = 1e-6;
 function clipSegments(positions, plane) {
   const out = [];
-  const a = new Vector35();
-  const b = new Vector35();
+  const a = new Vector37();
+  const b = new Vector37();
   const count = Math.floor(positions.length / 6);
   for (let i = 0; i < count; i += 1) {
     a.set(positions[i * 6], positions[i * 6 + 1], positions[i * 6 + 2]);
@@ -883,11 +1196,11 @@ function clipSegments(positions, plane) {
   return Float32Array.from(out);
 }
 function sectionContour(positions, regionOf, plane) {
-  const a = new Vector35();
-  const b = new Vector35();
-  const c = new Vector35();
-  const p = new Vector35();
-  const q = new Vector35();
+  const a = new Vector37();
+  const b = new Vector37();
+  const c = new Vector37();
+  const p = new Vector37();
+  const q = new Vector37();
   const byRegion = /* @__PURE__ */ new Map();
   const triangleCount = Math.floor(positions.length / 9);
   for (let t = 0; t < triangleCount; t += 1) {
@@ -945,17 +1258,17 @@ function stitch(segments, out) {
     return into.set(segments[o], segments[o + 1], segments[o + 2]);
   };
   const direction = (i, into) => {
-    const s = new Vector35();
-    const e = new Vector35();
+    const s = new Vector37();
+    const e = new Vector37();
     point(i, 0, s);
     point(i, 1, e);
     return into.subVectors(e, s).normalize();
   };
   const consumed = new Uint8Array(count);
-  const d = new Vector35();
-  const n = new Vector35();
+  const d = new Vector37();
+  const n = new Vector37();
   const next = (i, end) => {
-    const at = point(i, end, new Vector35());
+    const at = point(i, end, new Vector37());
     const list = ends.get(key(at.x, at.y, at.z)) ?? [];
     if (list.length !== 2) return null;
     const other = list.find((entry) => entry >> 1 !== i);
@@ -984,8 +1297,8 @@ function stitch(segments, out) {
     };
     const back = walk(0);
     const forward = walk(1);
-    const s = point(back.index, back.end, new Vector35());
-    const e = point(forward.index, forward.end, new Vector35());
+    const s = point(back.index, back.end, new Vector37());
+    const e = point(forward.index, forward.end, new Vector37());
     out.push(s.x, s.y, s.z, e.x, e.y, e.z);
   }
 }
@@ -993,8 +1306,8 @@ function pointInContour(point, plane, contour) {
   const [u, v] = planeAxes(plane);
   const px = point.dot(u);
   const py = point.dot(v);
-  const a = new Vector35();
-  const b = new Vector35();
+  const a = new Vector37();
+  const b = new Vector37();
   let inside = false;
   const count = Math.floor(contour.length / 6);
   for (let i = 0; i < count; i += 1) {
@@ -1011,15 +1324,15 @@ function pointInContour(point, plane, contour) {
   return inside;
 }
 function capHit(ray, plane, contour) {
-  const point = ray.intersectPlane(plane, new Vector35());
+  const point = ray.intersectPlane(plane, new Vector37());
   if (!point) return null;
   return pointInContour(point, plane, contour) ? point : null;
 }
 function planeAxes(plane) {
   const n = plane.normal;
-  const seed = Math.abs(n.x) < 0.9 ? new Vector35(1, 0, 0) : new Vector35(0, 1, 0);
-  const u = new Vector35().crossVectors(n, seed).normalize();
-  const v = new Vector35().crossVectors(n, u).normalize();
+  const seed = Math.abs(n.x) < 0.9 ? new Vector37(1, 0, 0) : new Vector37(0, 1, 0);
+  const u = new Vector37().crossVectors(n, seed).normalize();
+  const v = new Vector37().crossVectors(n, u).normalize();
   return [u, v];
 }
 function sampleSection(meshPositions, regionOf, edgePositions, plane) {
@@ -1032,8 +1345,8 @@ function sampleSection(meshPositions, regionOf, edgePositions, plane) {
 }
 
 // src/measure-tool.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var FURNITURE4 = { [EXCLUDE_FROM_FRAME]: true };
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var FURNITURE5 = { [EXCLUDE_FROM_FRAME]: true };
 var MEASURE_LABEL_CLASS = "toolpath-measure-label";
 var MeasureTool = ({
   mode = "distance",
@@ -1046,26 +1359,26 @@ var MeasureTool = ({
 }) => {
   const store = useSectionStore();
   const box = useContentBox();
-  const resolved = useMemo4(() => resolveTheme(theme), [theme]);
+  const resolved = useMemo6(() => resolveTheme(theme), [theme]);
   const picking = useSyncExternalStore2(store.subscribe, store.isPicking, store.isPicking);
-  const [held, setHeld] = useState3([]);
+  const [held, setHeld] = useState4([]);
   const controlled = measurements !== void 0;
   const list = controlled ? measurements : held;
-  const [draft, setDraft] = useState3([]);
-  useEffect3(() => {
+  const [draft, setDraft] = useState4([]);
+  useEffect5(() => {
     store.setEngaged(true);
     return () => store.setEngaged(false);
   }, [store]);
-  useEffect3(() => {
+  useEffect5(() => {
     setDraft([]);
   }, [mode]);
   const commit = (next) => {
     if (!controlled) setHeld(next);
     onChange?.(next);
   };
-  const latest = useRef3({ list, commit });
+  const latest = useRef4({ list, commit });
   latest.current = { list, commit };
-  useEffect3(() => {
+  useEffect5(() => {
     const onKey = (event) => {
       if (event.key === "Escape") {
         setDraft([]);
@@ -1093,8 +1406,8 @@ var MeasureTool = ({
   };
   if (box.isEmpty()) return null;
   const label = className(labelClassName);
-  return /* @__PURE__ */ jsxs4("group", { userData: FURNITURE4, children: [
-    picking ? null : /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("group", { userData: FURNITURE5, children: [
+    picking ? null : /* @__PURE__ */ jsx9(
       Snapper,
       {
         mode,
@@ -1105,7 +1418,7 @@ var MeasureTool = ({
         label
       }
     ),
-    draft.map((point, index) => /* @__PURE__ */ jsx4(
+    draft.map((point, index) => /* @__PURE__ */ jsx9(
       ScreenDot,
       {
         point,
@@ -1114,8 +1427,8 @@ var MeasureTool = ({
       },
       index
     )),
-    draft.length === 2 ? /* @__PURE__ */ jsx4(Segment, { points: [draft[0], draft[1]], color: resolved.measure }) : null,
-    list.map((measurement) => /* @__PURE__ */ jsx4(
+    draft.length === 2 ? /* @__PURE__ */ jsx9(Segment, { points: [draft[0], draft[1]], color: resolved.measure }) : null,
+    list.map((measurement) => /* @__PURE__ */ jsx9(
       MeasurementView,
       {
         measurement,
@@ -1129,30 +1442,30 @@ var MeasureTool = ({
   ] });
 };
 var NO_POINTER = { pointerEvents: "none" };
-var NOWHERE = [new Vector36(), new Vector36()];
+var NOWHERE = [new Vector38(), new Vector38()];
 var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
-  const camera = useThree4((state) => state.camera);
-  const scene = useThree4((state) => state.scene);
-  const size = useThree4((state) => state.size);
-  const domElement = useThree4((state) => state.gl.domElement);
-  const invalidate = useThree4((state) => state.invalidate);
+  const camera = useThree6((state) => state.camera);
+  const scene = useThree6((state) => state.scene);
+  const size = useThree6((state) => state.size);
+  const domElement = useThree6((state) => state.gl.domElement);
+  const invalidate = useThree6((state) => state.invalidate);
   const isTap = useTapGuard();
-  const marker = useRef3(null);
-  const edgeLine = useRef3(null);
-  const band = useRef3(null);
-  const bandLabel = useRef3(null);
-  const bandText = useRef3(null);
-  const snap = useRef3(null);
+  const marker = useRef4(null);
+  const edgeLine = useRef4(null);
+  const band = useRef4(null);
+  const bandLabel = useRef4(null);
+  const bandText = useRef4(null);
+  const snap = useRef4(null);
   const dot = useDot();
-  useLayoutEffect(() => {
+  useLayoutEffect3(() => {
     if (edgeLine.current) edgeLine.current.visible = false;
     if (band.current) band.current.visible = false;
   }, []);
-  const current = useRef3({ mode, draft, onPlace, format, size });
+  const current = useRef4({ mode, draft, onPlace, format, size });
   current.current = { mode, draft, onPlace, format, size };
-  useEffect3(() => {
+  useEffect5(() => {
     const raycaster = new Raycaster2();
-    const pointer = new Vector23();
+    const pointer = new Vector22();
     const samples = new SampleCache();
     const hide = () => {
       if (!snap.current) return;
@@ -1182,7 +1495,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       const snapped = snapAt(target, target.edges, camera, viewport);
       const from = placed[placed.length - 1];
       const lock = shift && from ? lockToAxis(from, snapped.point) : null;
-      const found = lock ? { ...snapped, point: new Vector36(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
+      const found = lock ? { ...snapped, point: new Vector38(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
       snap.current = found;
       const node = marker.current;
       if (node) {
@@ -1256,7 +1569,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       window.removeEventListener("keyup", key);
     };
   }, [camera, domElement, invalidate, isTap, scene, theme.measure]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (draft.length === 0 && band.current) {
       band.current.visible = false;
       if (bandLabel.current) bandLabel.current.visible = false;
@@ -1267,9 +1580,9 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       invalidate();
     }
   }, [draft, invalidate]);
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("group", { ref: marker, visible: false, children: /* @__PURE__ */ jsx4("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx4("meshBasicMaterial", { color: theme.measureSnap, depthTest: false, depthWrite: false }) }) }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx9("group", { ref: marker, visible: false, children: /* @__PURE__ */ jsx9("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx9("meshBasicMaterial", { color: theme.measureSnap, depthTest: false, depthWrite: false }) }) }),
+    /* @__PURE__ */ jsx9(
       Line,
       {
         ref: edgeLine,
@@ -1283,7 +1596,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
         raycast: () => null
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx9(
       Line,
       {
         ref: band,
@@ -1297,7 +1610,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
         raycast: () => null
       }
     ),
-    /* @__PURE__ */ jsx4("group", { ref: bandLabel, visible: false, children: /* @__PURE__ */ jsx4(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx9("group", { ref: bandLabel, visible: false, children: /* @__PURE__ */ jsx9(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx9(
       "div",
       {
         ref: bandText,
@@ -1462,35 +1775,35 @@ var MeasurementView = ({
   const anchor = measurementLabelAnchor(measurement);
   if (measurement.kind === "distance") {
     const [a2, b2] = measurement.points;
-    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx4(Segment, { points: [a2, b2], color: theme.measure }),
-      /* @__PURE__ */ jsx4(ScreenDot, { point: a2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-      /* @__PURE__ */ jsx4(ScreenDot, { point: b2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-      showDeltas ? /* @__PURE__ */ jsx4(DeltaLegs, { a: a2, b: b2, id: measurement.id, format, label }) : null,
-      /* @__PURE__ */ jsx4(Label, { at: anchor, text, kind: "distance", id: measurement.id, className: label })
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(Segment, { points: [a2, b2], color: theme.measure }),
+      /* @__PURE__ */ jsx9(ScreenDot, { point: a2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+      /* @__PURE__ */ jsx9(ScreenDot, { point: b2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+      showDeltas ? /* @__PURE__ */ jsx9(DeltaLegs, { a: a2, b: b2, id: measurement.id, format, label }) : null,
+      /* @__PURE__ */ jsx9(Label, { at: anchor, text, kind: "distance", id: measurement.id, className: label })
     ] });
   }
   const [a, vertex, b] = measurement.points;
   const arc = angleArc(vertex, a, b, angleArcRadius(vertex, a, b));
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(Segment, { points: [vertex, a], color: theme.measure }),
-    /* @__PURE__ */ jsx4(Segment, { points: [vertex, b], color: theme.measure }),
-    /* @__PURE__ */ jsx4(Polyline, { points: arc, color: theme.measure }),
-    /* @__PURE__ */ jsx4(ScreenDot, { point: a, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-    /* @__PURE__ */ jsx4(ScreenDot, { point: vertex, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-    /* @__PURE__ */ jsx4(ScreenDot, { point: b, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-    /* @__PURE__ */ jsx4(Label, { at: anchor, text, kind: "angle", id: measurement.id, className: label })
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(Segment, { points: [vertex, a], color: theme.measure }),
+    /* @__PURE__ */ jsx9(Segment, { points: [vertex, b], color: theme.measure }),
+    /* @__PURE__ */ jsx9(Polyline, { points: arc, color: theme.measure }),
+    /* @__PURE__ */ jsx9(ScreenDot, { point: a, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx9(ScreenDot, { point: vertex, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx9(ScreenDot, { point: b, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx9(Label, { at: anchor, text, kind: "angle", id: measurement.id, className: label })
   ] });
 };
 var DeltaLegs = ({ a, b, id, format, label }) => {
-  const camera = useThree4((state) => state.camera);
-  const size = useThree4((state) => state.size);
-  const invalidate = useThree4((state) => state.invalidate);
-  const legs = useMemo4(() => deltaLegs(a, b), [a, b]);
-  const lines = useRef3([]);
-  const centre = useMemo4(() => {
+  const camera = useThree6((state) => state.camera);
+  const size = useThree6((state) => state.size);
+  const invalidate = useThree6((state) => state.invalidate);
+  const legs = useMemo6(() => deltaLegs(a, b), [a, b]);
+  const lines = useRef4([]);
+  const centre = useMemo6(() => {
     const at = midpoint(a, b);
-    return new Vector36(at.x, at.y, at.z);
+    return new Vector38(at.x, at.y, at.z);
   }, [a, b]);
   useFrame2(() => {
     const dash = screenLength(camera, centre, size, DELTA_DASH_PIXELS);
@@ -1504,16 +1817,16 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
     }
     if (changed) invalidate();
   });
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    legs.map((leg, index) => /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    legs.map((leg, index) => /* @__PURE__ */ jsx9(
       Line,
       {
         ref: (line) => {
           lines.current[index] = line;
         },
         points: [
-          new Vector36(leg.from.x, leg.from.y, leg.from.z),
-          new Vector36(leg.to.x, leg.to.y, leg.to.z)
+          new Vector38(leg.from.x, leg.from.y, leg.from.z),
+          new Vector38(leg.to.x, leg.to.y, leg.to.z)
         ],
         color: AXIS_COLORS[leg.axis],
         lineWidth: MEASURE_LINE_PIXELS.leg,
@@ -1528,7 +1841,7 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
       },
       leg.axis
     )),
-    legs.map((leg) => /* @__PURE__ */ jsx4(
+    legs.map((leg) => /* @__PURE__ */ jsx9(
       Label,
       {
         at: midpoint(leg.from, leg.to),
@@ -1542,14 +1855,14 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
     ))
   ] });
 };
-var Label = ({ at, text, kind, id, axis, className: name }) => /* @__PURE__ */ jsx4("group", { position: [at.x, at.y, at.z], children: /* @__PURE__ */ jsx4(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx4("div", { className: name, "data-measure-label": kind, "data-measurement-id": id, "data-axis": axis, children: text }) }) });
+var Label = ({ at, text, kind, id, axis, className: name }) => /* @__PURE__ */ jsx9("group", { position: [at.x, at.y, at.z], children: /* @__PURE__ */ jsx9(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx9("div", { className: name, "data-measure-label": kind, "data-measurement-id": id, "data-axis": axis, children: text }) }) });
 var ScreenDot = ({ point, pixels, color }) => {
-  const camera = useThree4((state) => state.camera);
-  const size = useThree4((state) => state.size);
-  const invalidate = useThree4((state) => state.invalidate);
-  const node = useRef3(null);
+  const camera = useThree6((state) => state.camera);
+  const size = useThree6((state) => state.size);
+  const invalidate = useThree6((state) => state.invalidate);
+  const node = useRef4(null);
   const dot = useDot();
-  const position = useMemo4(() => new Vector36(point.x, point.y, point.z), [point]);
+  const position = useMemo6(() => new Vector38(point.x, point.y, point.z), [point]);
   useFrame2(() => {
     const group = node.current;
     if (!group) return;
@@ -1559,21 +1872,21 @@ var ScreenDot = ({ point, pixels, color }) => {
       invalidate();
     }
   });
-  return /* @__PURE__ */ jsx4("group", { ref: node, position, children: /* @__PURE__ */ jsx4("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx4("meshBasicMaterial", { color, depthTest: false, depthWrite: false }) }) });
+  return /* @__PURE__ */ jsx9("group", { ref: node, position, children: /* @__PURE__ */ jsx9("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx9("meshBasicMaterial", { color, depthTest: false, depthWrite: false }) }) });
 };
 var Segment = ({ points, color }) => {
   const [a, b] = points;
-  const ends = useMemo4(
-    () => [new Vector36(a.x, a.y, a.z), new Vector36(b.x, b.y, b.z)],
+  const ends = useMemo6(
+    () => [new Vector38(a.x, a.y, a.z), new Vector38(b.x, b.y, b.z)],
     // Keyed on the numbers: a draft's tuple is a fresh array on every render,
     // and a rebuilt array would rebuild the line's geometry with it.
     [a.x, a.y, a.z, b.x, b.y, b.z]
   );
-  return /* @__PURE__ */ jsx4(Polyline, { points: ends, color });
+  return /* @__PURE__ */ jsx9(Polyline, { points: ends, color });
 };
 var Polyline = ({ points, color }) => {
   if (points.length < 2) return null;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx9(
     Line,
     {
       points,
@@ -1588,8 +1901,8 @@ var Polyline = ({ points, color }) => {
   );
 };
 function useDot() {
-  const geometry = useMemo4(() => new SphereGeometry(1, 16, 12), []);
-  useEffect3(() => () => geometry.dispose(), [geometry]);
+  const geometry = useMemo6(() => new SphereGeometry(1, 16, 12), []);
+  useEffect5(() => () => geometry.dispose(), [geometry]);
   return geometry;
 }
 function isEditing(target) {
@@ -1640,10 +1953,15 @@ export {
   AXES_PLANE_SCALE,
   AXIS_COLORS,
   Axes,
+  BANANA_GAP,
+  BANANA_MODEL_URL,
+  Banana,
+  BoxStock,
   CAD_CAMERA_UP,
   CANDIDATE_WEIGHT,
   CAP_HATCH,
   CHAMFER,
+  CONTROL_SCHEME_OPTIONS,
   CadCameraControls,
   DEFAULT_FIT_MARGIN,
   DEFAULT_SECTION_NORMAL,
@@ -1662,6 +1980,7 @@ export {
   HIGHLIGHT_COLORS,
   HIGHLIGHT_WEIGHT,
   HOVER_WEIGHT,
+  HoverCard,
   MAX_FRAME_RATIO,
   MEASURE_LABEL_CLASS,
   MEASURE_LINE_PIXELS,
@@ -1686,17 +2005,21 @@ export {
   PartMesh,
   PartReportFormatError,
   REGION_ATTRIBUTE,
+  SECTION_GIZMO_FRAME_SCALE,
   SECTION_RENDER_ORDER,
   SNAP_MARKER_PIXELS,
   SNAP_PIXELS,
   SectionTool,
   SectionView,
+  Stock,
   TAP_SLOP,
   UnsupportedKernelVersionError,
   VIEW_NAMES,
   VIEW_SIGNS,
   ViewCube,
   Viewer,
+  ViewerToolbar,
+  ViewerToolbarProvider,
   adaptedUp,
   angleArc,
   angleArcRadius,
@@ -1707,8 +2030,11 @@ export {
   arrowPlacement,
   aspectRatio,
   axesPlanes,
+  bananaFrameBounds,
+  bananaPosition,
   bestOwner,
   boundsFromBox,
+  boxStockBounds,
   buildPick,
   buildRegionAttribute,
   buildRegionIndex,
@@ -1732,6 +2058,7 @@ export {
   deltaBetween,
   deltaLegs,
   directionColor,
+  directionHighlights,
   directionIndexOf,
   directionLabel,
   distanceBetween,
@@ -1739,6 +2066,7 @@ export {
   excludedFromFrame,
   featureTypeRank,
   fitDistance,
+  fixedBoxStockBounds,
   focusForPick,
   formatDegrees,
   formatMillimetres,
@@ -1781,6 +2109,7 @@ export {
   sectionDepthConstant,
   sectionDepthRange,
   sectionFromPick,
+  sectionMeasurement,
   sectionOffset,
   sectionOptionsFromState,
   sectionPlane,
@@ -1798,6 +2127,7 @@ export {
   useSectionStore,
   useTapGuard,
   useViewerControls,
+  useViewerToolbar,
   viewDirection,
   viewKind,
   viewUp,