@toolpath/viewer 1.4.0 → 2.0.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,760 @@ 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, useState as useState2 } from "react";
+
+// src/render/stock-mesh.ts
+import { Mesh } from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+async function parseStockGlb(data) {
+  const { scene } = await new GLTFLoader().parseAsync(data, "");
+  try {
+    return stockMeshGeometries(scene);
+  } finally {
+    scene.traverse((object) => {
+      if (!(object instanceof Mesh)) return;
+      object.geometry.dispose();
+      for (const material of Array.isArray(object.material) ? object.material : [object.material]) {
+        material.dispose();
+      }
+    });
+  }
+}
+function stockMeshGeometries(scene) {
+  const geometries = [];
+  scene.updateWorldMatrix(true, true);
+  scene.traverse((object) => {
+    if (!(object instanceof Mesh)) return;
+    const geometry = object.geometry.clone().applyMatrix4(object.matrixWorld);
+    if (!geometry.hasAttribute("normal")) geometry.computeVertexNormals();
+    geometries.push(geometry);
+  });
+  if (geometries.length === 0) throw new Error("The stock GLB contains no mesh.");
+  return geometries;
+}
+
+// src/render/stock-mesh-buffer.ts
+function createStockMeshBuffer() {
+  const owned = /* @__PURE__ */ new Set();
+  let disposed = false;
+  return {
+    request(decode, ready, failed) {
+      disposed = false;
+      let active = true;
+      void decode().then(
+        (geometries) => {
+          if (!active || disposed) {
+            geometries.forEach((geometry) => geometry.dispose());
+            return;
+          }
+          geometries.forEach((geometry) => owned.add(geometry));
+          ready(geometries);
+        },
+        (cause) => {
+          if (active && !disposed) {
+            failed(cause);
+          }
+        }
+      );
+      return () => {
+        active = false;
+      };
+    },
+    commit(geometries) {
+      const visible = new Set(geometries);
+      for (const geometry of owned) {
+        if (!visible.has(geometry)) {
+          owned.delete(geometry);
+          geometry.dispose();
+        }
+      }
+    },
+    dispose() {
+      disposed = true;
+      owned.forEach((geometry) => geometry.dispose());
+      owned.clear();
+    }
+  };
+}
+
+// src/render/stock.ts
+import {
+  Box3,
+  BoxGeometry,
+  CylinderGeometry,
+  EdgesGeometry,
+  Group,
+  LineBasicMaterial,
+  LineSegments,
+  Matrix4,
+  Mesh as Mesh2,
+  MeshLambertMaterial,
+  Quaternion,
+  Vector3
+} from "three";
+function boxFigure(bounds) {
+  return {
+    lower: { x: bounds.min.x, y: bounds.min.y, z: bounds.min.z },
+    upper: { x: bounds.max.x, y: bounds.max.y, z: bounds.max.z }
+  };
+}
+var CYLINDER_SEGMENTS = 64;
+var CYLINDER_AXIS = new Vector3(0, 1, 0);
+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 = fixedStockLowerZ(part, dimensions.z, position, positionOffset);
+  return new Box3(
+    new Vector3(center.x - dimensions.x / 2, center.y - dimensions.y / 2, z),
+    new Vector3(center.x + dimensions.x / 2, center.y + dimensions.y / 2, z + dimensions.z)
+  ).translate(new Vector3(offset.x, offset.y, offset.z));
+}
+function fixedCylinderStock(geometry, size, position = "model_centered", positionOffset = 0) {
+  if (![size.diameter, size.length].every((value) => Number.isFinite(value) && value > 0)) {
+    throw new RangeError("Fixed stock diameter and length must be finite and positive.");
+  }
+  if (!Number.isFinite(positionOffset)) {
+    throw new RangeError("Fixed stock position offset must be finite.");
+  }
+  const part = partBounds(geometry);
+  const center = part.getCenter(new Vector3());
+  return {
+    origin: {
+      x: center.x,
+      y: center.y,
+      z: fixedStockLowerZ(part, size.length, position, positionOffset)
+    },
+    axis: { x: 0, y: 0, z: 1 },
+    diameter: size.diameter,
+    length: size.length
+  };
+}
+function fixedStockLowerZ(part, length, position, positionOffset) {
+  if (position === "offset_from_top") return part.max.z + positionOffset - length;
+  if (position === "offset_from_bottom") return part.min.z - positionOffset;
+  return (part.min.z + part.max.z - length) / 2;
+}
+function cylinderStockGeometry(input) {
+  const figure = input.partGeometry ? fixedCylinderStock(input.partGeometry, input, input.position, input.positionOffset) : input;
+  const { origin, diameter, length } = figure;
+  if (![origin.x, origin.y, origin.z].every(Number.isFinite)) {
+    throw new RangeError("Cylinder stock origin must be finite.");
+  }
+  if (![diameter, length].every((value) => Number.isFinite(value) && value > 0)) {
+    throw new RangeError("Cylinder stock diameter and length must be finite and positive.");
+  }
+  const axis = new Vector3(figure.axis.x, figure.axis.y, figure.axis.z);
+  const norm = axis.length();
+  if (!Number.isFinite(norm) || norm === 0) {
+    throw new RangeError("Cylinder stock axis must be finite and non-zero.");
+  }
+  axis.divideScalar(norm);
+  const center = axis.clone().multiplyScalar(length / 2).add(new Vector3(origin.x, origin.y, origin.z));
+  return new CylinderGeometry(diameter / 2, diameter / 2, length, CYLINDER_SEGMENTS).applyQuaternion(new Quaternion().setFromUnitVectors(CYLINDER_AXIS, axis)).translate(center.x, center.y, center.z);
+}
+function boxStockGeometry(input) {
+  const figure = input.partGeometry ? boxFigure(
+    input.dimensions ? fixedBoxStockBounds(
+      input.partGeometry,
+      input.dimensions,
+      input.position,
+      input.positionOffset,
+      input.offset
+    ) : boxStockBounds(input.partGeometry, input.allowance, input.offset)
+  ) : input;
+  return orientedBoxStockGeometry(figure);
+}
+function orientedBoxStockGeometry(figure) {
+  const { lower, upper } = figure;
+  const frame = figure.frame ?? {
+    location: { x: 0, y: 0, z: 0 },
+    axis: { x: 0, y: 0, z: 1 },
+    refDirection: { x: 1, y: 0, z: 0 }
+  };
+  const { location, axis, refDirection } = frame;
+  if (![location, axis, refDirection, lower, upper].every(
+    (vector) => [vector.x, vector.y, vector.z].every(Number.isFinite)
+  )) {
+    throw new RangeError("Box stock frame and corners must be finite.");
+  }
+  const size = new Vector3(upper.x - lower.x, upper.y - lower.y, upper.z - lower.z);
+  if (size.toArray().some((value) => !(value > 0))) {
+    throw new RangeError("Box stock upper corner must be above its lower corner on every axis.");
+  }
+  const z = new Vector3(axis.x, axis.y, axis.z).normalize();
+  const x = new Vector3(refDirection.x, refDirection.y, refDirection.z);
+  const reference = x.length();
+  x.addScaledVector(z, -x.dot(z));
+  if (!(z.lengthSq() > 0 && x.length() > 1e-9 * reference)) {
+    throw new RangeError(
+      "Box stock frame axis and reference direction must be non-zero and not parallel."
+    );
+  }
+  x.normalize();
+  const y = new Vector3().crossVectors(z, x);
+  return new BoxGeometry(size.x, size.y, size.z).translate((lower.x + upper.x) / 2, (lower.y + upper.y) / 2, (lower.z + upper.z) / 2).applyMatrix4(new Matrix4().makeBasis(x, y, z).setPosition(location.x, location.y, location.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, legacyWorkpiece = false) {
+  const material = new MeshLambertMaterial({ transparent: true, depthWrite: false });
+  const edgeMaterial = new LineBasicMaterial({ transparent: true, depthWrite: false });
+  const mesh = new Mesh2(geometry, material);
+  const object = new Group();
+  object.userData[STOCK_OBJECT] = true;
+  mesh.renderOrder = legacyWorkpiece ? 2 : 5;
+  mesh.raycast = () => {
+  };
+  object.add(mesh);
+  if (legacyWorkpiece) {
+    const shadow = mesh.clone();
+    shadow.raycast = () => {
+    };
+    object.add(shadow);
+    edgeMaterial.depthWrite = true;
+  }
+  let edges = null;
+  return {
+    object,
+    material,
+    edgeMaterial,
+    /**
+     * Shows or hides the outline, building it the first time it is shown: the
+     * edge pass reads every triangle, and stock cut by a toolpath has a great
+     * many of them.
+     */
+    showEdges(show) {
+      if (show && !edges) {
+        edges = new LineSegments(new EdgesGeometry(geometry, 15), edgeMaterial);
+        edges.renderOrder = legacyWorkpiece ? 1 : 6;
+        edges.raycast = () => {
+        };
+        object.add(edges);
+      }
+      if (edges) edges.visible = show;
+    },
+    dispose() {
+      material.dispose();
+      edgeMaterial.dispose();
+      edges?.geometry.dispose();
+    }
+  };
+}
+
+// src/stock.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Stock = ({ geometry, glb, box, cylinder, ...appearance }) => geometry ? /* @__PURE__ */ jsx4(GeometryStock, { geometry, ...appearance }) : glb ? /* @__PURE__ */ jsx4(GlbStock, { glb, ...appearance }) : /* @__PURE__ */ jsx4(ShapeStock, { box, cylinder, ...appearance });
+var GeometryStock = ({
+  geometry,
+  renderStyle = "overlay",
+  color = renderStyle === "legacy-workpiece" ? 16777215 : 12176354,
+  emissive = renderStyle === "legacy-workpiece" ? 3948625 : 0,
+  flatShading = renderStyle === "legacy-workpiece",
+  opacity = 0.2,
+  edgeColor = renderStyle === "legacy-workpiece" ? 0 : 11058648,
+  edgeOpacity = renderStyle === "legacy-workpiece" ? 0.5 : 0.75,
+  showEdges = true
+}) => {
+  const invalidate = useThree((state) => state.invalidate);
+  const stock = useMemo(
+    () => createStock(geometry, renderStyle === "legacy-workpiece"),
+    [geometry, renderStyle]
+  );
+  useEffect2(() => () => stock.dispose(), [stock]);
+  useLayoutEffect(() => {
+    stock.material.color.setHex(color);
+    stock.material.emissive.setHex(emissive);
+    if (stock.material.flatShading !== flatShading) {
+      stock.material.flatShading = flatShading;
+      stock.material.needsUpdate = true;
+    }
+    stock.material.opacity = opacity;
+    stock.material.depthWrite = renderStyle === "legacy-workpiece" && opacity === 1;
+    stock.material.polygonOffset = renderStyle === "legacy-workpiece" && opacity === 1;
+    stock.material.polygonOffsetFactor = 1;
+    stock.material.polygonOffsetUnits = 1;
+    stock.edgeMaterial.color.setHex(edgeColor);
+    stock.edgeMaterial.opacity = edgeOpacity;
+    stock.showEdges(showEdges);
+    invalidate();
+  }, [
+    color,
+    emissive,
+    flatShading,
+    edgeColor,
+    edgeOpacity,
+    invalidate,
+    opacity,
+    renderStyle,
+    showEdges,
+    stock
+  ]);
+  return /* @__PURE__ */ jsx4("primitive", { object: stock.object, dispose: null });
+};
+var GlbStock = ({
+  glb,
+  retainPrevious = false,
+  ...appearance
+}) => {
+  const buffer = useMemo(() => createStockMeshBuffer(), []);
+  const [decoded, setDecoded] = useState2(null);
+  useEffect2(() => () => buffer.dispose(), [buffer]);
+  useLayoutEffect(() => {
+    buffer.commit(decoded?.geometries ?? []);
+  }, [buffer, decoded]);
+  useEffect2(
+    () => buffer.request(
+      () => parseStockGlb(glb),
+      (geometries) => {
+        setDecoded({ source: glb, geometries });
+      },
+      (cause) => {
+        setDecoded({
+          source: glb,
+          error: cause instanceof Error ? cause : new Error(String(cause))
+        });
+      }
+    ),
+    [buffer, glb]
+  );
+  if (!decoded || !retainPrevious && decoded.source !== glb) return null;
+  if (decoded.error) throw decoded.error;
+  return decoded.geometries?.map((geometry) => /* @__PURE__ */ jsx4(GeometryStock, { geometry, ...appearance }, geometry.uuid));
+};
+var keepNonFinite = (_key, value) => typeof value === "number" && !Number.isFinite(value) ? String(value) : value;
+var restoreNonFinite = (_key, value) => value === "NaN" || value === "Infinity" || value === "-Infinity" ? Number(value) : value;
+var ShapeStock = ({
+  box,
+  cylinder,
+  ...appearance
+}) => {
+  const isBox = box !== void 0;
+  const partGeometry = box?.partGeometry ?? cylinder?.partGeometry;
+  const figure = JSON.stringify(
+    box ? box.partGeometry ? {
+      dimensions: box.dimensions,
+      allowance: box.allowance,
+      offset: box.offset,
+      position: box.position,
+      positionOffset: box.positionOffset
+    } : { frame: box.frame, lower: box.lower, upper: box.upper } : cylinder.partGeometry ? {
+      diameter: cylinder.diameter,
+      length: cylinder.length,
+      position: cylinder.position,
+      positionOffset: cylinder.positionOffset
+    } : {
+      origin: cylinder.origin,
+      axis: cylinder.axis,
+      diameter: cylinder.diameter,
+      length: cylinder.length
+    },
+    keepNonFinite
+  );
+  const geometry = useMemo(() => {
+    const options = JSON.parse(figure, restoreNonFinite);
+    const input = partGeometry ? { ...options, partGeometry } : options;
+    return isBox ? boxStockGeometry(input) : cylinderStockGeometry(input);
+  }, [figure, isBox, partGeometry]);
+  useEffect2(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ jsx4(GeometryStock, { geometry, ...appearance });
+};
+
+// 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 Vector32 } from "three";
+var BANANA_GAP = 0.1;
+function bananaPosition(part, banana) {
+  const size = part.getSize(new Vector32());
+  const reach = Math.max(size.x, size.y, size.z);
+  const centre = part.getCenter(new Vector32());
+  return new Vector32(
+    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 useState3 } from "react";
 
 // src/render/grid.ts
-import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
+import { BufferGeometry, Float32BufferAttribute, Vector3 as Vector33 } 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 Vector33());
+  const center = box.getCenter(new Vector33());
   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 +958,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 +985,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] = useState3(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 +1001,7 @@ var CubePanels = ({
     })),
     [theme.cubeLabel, zones]
   );
-  useEffect(
+  useEffect3(
     () => () => {
       for (const panel of panels) panel.geometry.dispose();
       for (const label of labels) {
@@ -251,8 +1020,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 +1034,7 @@ var CubePanels = ({
           event.stopPropagation();
           choose(zone);
         },
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx6(
           "meshLambertMaterial",
           {
             color: hovered === zone.name ? theme.hover : theme.cube,
@@ -277,19 +1046,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 as Quaternion2, Vector3 as Vector34 } 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 +1070,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 +1082,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 +1097,7 @@ var DirectionArrows = ({
           `candidate-${index}`
         );
       }),
-      namedDirections.map((named) => /* @__PURE__ */ jsx2(
+      namedDirections.map((named) => /* @__PURE__ */ jsx7(
         Arrow,
         {
           direction: named.direction,
@@ -339,17 +1108,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(
+    const aim = new Quaternion2().setFromUnitVectors(
       CONE_AXIS,
-      new Vector32(direction.x, direction.y, direction.z).normalize()
+      new Vector34(direction.x, direction.y, direction.z).normalize()
     );
     return { tip: placement.tip, length: placement.length, quaternion: aim };
   }, [box, direction]);
@@ -362,234 +1131,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 useState4, useSyncExternalStore } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide,
-  Quaternion as Quaternion2,
+  Quaternion as Quaternion3,
   Raycaster,
-  Vector2 as Vector22,
-  Vector3 as Vector34
+  Vector2,
+  Vector3 as Vector35
 } 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 Vector35(0, 0, 1);
 var AXIS_ROTATIONS = {
   x: [0, Math.PI / 2, 0],
   y: [Math.PI / 2, 0, 0],
@@ -601,12 +1168,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 +1182,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 Vector35(-1, 1, 0),
+      new Vector35(1, 1, 0),
+      new Vector35(1, -1, 0),
+      new Vector35(-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] = useState4(null);
+  const span = useMemo5(() => box.getSize(new Vector35()).length(), [box]);
+  const centre = useMemo5(() => box.getCenter(new Vector35()), [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 Vector35();
     const hide = () => {
       if (!hover.current) return;
       hover.current = null;
@@ -678,6 +1245,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 +1263,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] = useState4(() => 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 +1289,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 +1304,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 +1324,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 +1343,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,22 +1361,22 @@ 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 Vector35()).length(), [box]);
+  const placement = useMemo5(() => {
     if (!cut) return null;
     const position = sectionAnchor(box, cut.plane).addScaledVector(
       cut.plane.normal,
       -span * SHEET_SETBACK
     );
-    return { position, quaternion: new Quaternion2().setFromUnitVectors(Z, cut.plane.normal) };
+    return { position, quaternion: new Quaternion3().setFromUnitVectors(Z, cut.plane.normal) };
   }, [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 +1387,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 +1411,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 useState5,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import {
-  Matrix4,
+  Matrix4 as Matrix42,
   Raycaster as Raycaster2,
   SphereGeometry,
-  Vector2 as Vector23,
-  Vector3 as Vector36
+  Vector2 as Vector22,
+  Vector3 as Vector37
 } from "three";
 
 // src/render/resample.ts
-import { Vector3 as Vector35 } from "three";
+import { Vector3 as Vector36 } 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 Vector36();
+  const b = new Vector36();
   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 +1451,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 Vector36();
+  const b = new Vector36();
+  const c = new Vector36();
+  const p = new Vector36();
+  const q = new Vector36();
   const byRegion = /* @__PURE__ */ new Map();
   const triangleCount = Math.floor(positions.length / 9);
   for (let t = 0; t < triangleCount; t += 1) {
@@ -945,17 +1513,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 Vector36();
+    const e = new Vector36();
     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 Vector36();
+  const n = new Vector36();
   const next = (i, end) => {
-    const at = point(i, end, new Vector35());
+    const at = point(i, end, new Vector36());
     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 +1552,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 Vector36());
+    const e = point(forward.index, forward.end, new Vector36());
     out.push(s.x, s.y, s.z, e.x, e.y, e.z);
   }
 }
@@ -993,8 +1561,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 Vector36();
+  const b = new Vector36();
   let inside = false;
   const count = Math.floor(contour.length / 6);
   for (let i = 0; i < count; i += 1) {
@@ -1011,15 +1579,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 Vector36());
   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 Vector36(1, 0, 0) : new Vector36(0, 1, 0);
+  const u = new Vector36().crossVectors(n, seed).normalize();
+  const v = new Vector36().crossVectors(n, u).normalize();
   return [u, v];
 }
 function sampleSection(meshPositions, regionOf, edgePositions, plane) {
@@ -1032,8 +1600,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 +1614,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] = useState5([]);
   const controlled = measurements !== void 0;
   const list = controlled ? measurements : held;
-  const [draft, setDraft] = useState3([]);
-  useEffect3(() => {
+  const [draft, setDraft] = useState5([]);
+  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 +1661,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 +1673,7 @@ var MeasureTool = ({
         label
       }
     ),
-    draft.map((point, index) => /* @__PURE__ */ jsx4(
+    draft.map((point, index) => /* @__PURE__ */ jsx9(
       ScreenDot,
       {
         point,
@@ -1114,8 +1682,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 +1697,30 @@ var MeasureTool = ({
   ] });
 };
 var NO_POINTER = { pointerEvents: "none" };
-var NOWHERE = [new Vector36(), new Vector36()];
+var NOWHERE = [new Vector37(), new Vector37()];
 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 +1750,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 Vector37(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
       snap.current = found;
       const node = marker.current;
       if (node) {
@@ -1256,7 +1824,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 +1835,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 +1851,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
         raycast: () => null
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx9(
       Line,
       {
         ref: band,
@@ -1297,7 +1865,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,
@@ -1344,7 +1912,7 @@ function targetUnderRay(raycaster, scene, samples) {
       edges: samples.edgesFor(hit.object)
     };
   }
-  const local = new Matrix4();
+  const local = new Matrix42();
   for (const mesh of cutMeshes(scene)) {
     const planes = clippingPlanesOf(mesh);
     const sample = samples.for(mesh, planes);
@@ -1407,7 +1975,7 @@ var SampleCache = class {
     const key = planes.map((plane) => `${plane.normal.x},${plane.normal.y},${plane.normal.z},${plane.constant}`).join("|");
     const cached = this.held.get(mesh);
     if (cached && cached.key === key) return cached;
-    const local = new Matrix4().copy(mesh.matrixWorld).invert();
+    const local = new Matrix42().copy(mesh.matrixWorld).invert();
     const localPlanes = planes.map((plane) => plane.clone().applyMatrix4(local));
     const positions = mesh.geometry.getAttribute("position")?.array ?? [];
     const regionOf = this.regionsOf(mesh.geometry);
@@ -1462,35 +2030,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 Vector37(at.x, at.y, at.z);
   }, [a, b]);
   useFrame2(() => {
     const dash = screenLength(camera, centre, size, DELTA_DASH_PIXELS);
@@ -1504,16 +2072,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 Vector37(leg.from.x, leg.from.y, leg.from.z),
+          new Vector37(leg.to.x, leg.to.y, leg.to.z)
         ],
         color: AXIS_COLORS[leg.axis],
         lineWidth: MEASURE_LINE_PIXELS.leg,
@@ -1528,7 +2096,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 +2110,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 Vector37(point.x, point.y, point.z), [point]);
   useFrame2(() => {
     const group = node.current;
     if (!group) return;
@@ -1559,21 +2127,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 Vector37(a.x, a.y, a.z), new Vector37(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 +2156,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 +2208,14 @@ export {
   AXES_PLANE_SCALE,
   AXIS_COLORS,
   Axes,
+  BANANA_GAP,
+  BANANA_MODEL_URL,
+  Banana,
   CAD_CAMERA_UP,
   CANDIDATE_WEIGHT,
   CAP_HATCH,
   CHAMFER,
+  CONTROL_SCHEME_OPTIONS,
   CadCameraControls,
   DEFAULT_FIT_MARGIN,
   DEFAULT_SECTION_NORMAL,
@@ -1662,6 +2234,7 @@ export {
   HIGHLIGHT_COLORS,
   HIGHLIGHT_WEIGHT,
   HOVER_WEIGHT,
+  HoverCard,
   MAX_FRAME_RATIO,
   MEASURE_LABEL_CLASS,
   MEASURE_LINE_PIXELS,
@@ -1686,17 +2259,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 +2284,11 @@ export {
   arrowPlacement,
   aspectRatio,
   axesPlanes,
+  bananaFrameBounds,
+  bananaPosition,
   bestOwner,
   boundsFromBox,
+  boxStockBounds,
   buildPick,
   buildRegionAttribute,
   buildRegionIndex,
@@ -1732,6 +2312,7 @@ export {
   deltaBetween,
   deltaLegs,
   directionColor,
+  directionHighlights,
   directionIndexOf,
   directionLabel,
   distanceBetween,
@@ -1739,6 +2320,7 @@ export {
   excludedFromFrame,
   featureTypeRank,
   fitDistance,
+  fixedBoxStockBounds,
   focusForPick,
   formatDegrees,
   formatMillimetres,
@@ -1781,6 +2363,7 @@ export {
   sectionDepthConstant,
   sectionDepthRange,
   sectionFromPick,
+  sectionMeasurement,
   sectionOffset,
   sectionOptionsFromState,
   sectionPlane,
@@ -1798,6 +2381,7 @@ export {
   useSectionStore,
   useTapGuard,
   useViewerControls,
+  useViewerToolbar,
   viewDirection,
   viewKind,
   viewUp,