Add more viewer features

.changeset/banana-for-scale.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': minor
+---
+
+Add a bundled banana-for-scale model while preserving feature hover by default.

.changeset/fix-focused-depth.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': patch
+---
+
+Keep focused feature regions opaque in X-ray rendering and copy the bundled banana asset in watch builds.

.changeset/fixed-box-stock.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': minor
+---
+
+Support explicit fixed-box dimensions and top/bottom positioning for box stock.

.changeset/focus-selection-xray.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': patch
+---
+
+Keep far-side focused geometry visible through the faded part.

.changeset/stock-direction-wireframe.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': minor
+---
+
+Add translucent stock meshes and allowance-based box stock, a semantic-edge wireframe display, and deterministic machining-direction face highlights. Fit includes stock while part-relative tools and overlays remain sized to the finished part.

.changeset/stock-wall-floor.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': minor
+---
+
+Support separate wall and floor stock-to-leave values for box stock.

.changeset/viewer-cad-controls.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': minor
+---
+
+Add CAD navigation presets for Alias, Fusion, Inventor, Onshape, PowerMill, SolidWorks, and Tinkercad.

.changeset/viewer-hover-card.md

@@ -0,0 +1,6 @@
+---
+'@toolpath/viewer': minor
+---
+
+Add a cursor-following hover-card primitive, browser pointer coordinates on part picks, and a
+hover toggle that preserves face picking.

.changeset/viewer-section-gizmo.md

@@ -0,0 +1,7 @@
+---
+'@toolpath/viewer': minor
+---
+
+Add a visible section-plane gizmo with direction-coloured handles, a two-way drag handle, and
+physical cut measurement. A custom `sectionHandle` theme colour still overrides the direction
+colour.

.changeset/viewer-toolbar.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': minor
+---
+
+Add a viewer-scoped, composable toolbar with camera, display, analysis, and banana-for-scale controls.

.changeset/viewer-xray-focus.md

@@ -0,0 +1,5 @@
+---
+'@toolpath/viewer': minor
+---
+
+Add opt-in selection-driven X-ray focus rendering for part meshes.

examples/react-viewer/README.md

@@ -7,6 +7,17 @@ requires no Toolpath API key or Engine request. The extra parts exist for the me
 have holes, chamfers, a pocket and a bore to snap to, and each page states what its dimensions
 should measure.
 
+The bottom toolbar offers stock, axes, grid, direction coloring, wireframe, Section, Measure, Fit,
+Reset, and Top view. Stock is a fixed box with editable X/Y/Z dimensions and centered/top/bottom
+positioning; its X × Y × Z dimensions appear in the sidebar. Use Fit after showing or resizing stock
+to frame the whole blank. These values are a demonstration setting, not a machine-stock recommendation.
+
+Direction mode colors the model and shows matching arrows and a clickable legend. Choosing a
+direction scopes face picks; All clears that scope. Wireframe shows CAD face boundaries with
+painted/hovered faces still visible. Section and Measure use the contextual panel above the
+toolbar and switch cleanly between each other. The example owns these controls and uses only
+the package's public API.
+
 ```bash
 pnpm install --frozen-lockfile
 pnpm --filter @toolpath/example-react-viewer dev
@@ -22,6 +33,7 @@ defaults and this example's are not the same:
 | `/`                         | A perspective camera. Picking, the section tool, panning, the cube. |
 | `/?projection=orthographic` | The projection `@toolpath/viewer` itself defaults to.               |
 | `/?orbitTarget=on`          | `showOrbitTarget` — two circles at the point the view turns about.  |
+| `/?stock=on`                | Stock visible and framed on the opening view.                       |
 
 The pin on the default page is deliberate: its click points were scanned by hand
 off the rendered canvas, and a camera change moves every one of them. Each page

examples/react-viewer/package.json

@@ -10,6 +10,7 @@
     "test": "pnpm build && playwright test"
   },
   "dependencies": {
+    "@phosphor-icons/react": "2.1.10",
     "@react-three/drei": "10.7.8",
     "@react-three/fiber": "9.7.0",
     "@toolpath/viewer": "workspace:*",

examples/react-viewer/src/analysis-options.tsx

@@ -0,0 +1,95 @@
+import { AngleIcon, RulerIcon, TrashIcon } from '@phosphor-icons/react'
+import type { MeasureMode, SectionState } from '@toolpath/viewer'
+
+interface AnalysisOptionsProps {
+  sectioning: boolean
+  measuring: boolean
+  cut: SectionState | null
+  offset: number
+  measureMode: MeasureMode
+  onOffsetChange: (offset: number) => void
+  onClearCut: () => void
+  onMeasureModeChange: (mode: MeasureMode) => void
+  onClearMeasurements: () => void
+}
+
+/** The single options card shared by sectioning and measuring. */
+export const AnalysisOptions = ({
+  sectioning,
+  measuring,
+  cut,
+  offset,
+  measureMode,
+  onOffsetChange,
+  onClearCut,
+  onMeasureModeChange,
+  onClearMeasurements,
+}: AnalysisOptionsProps) => {
+  if (!sectioning && !measuring) return null
+
+  return (
+    <div
+      className="viewer-tool-options analysis-options"
+      role="group"
+      aria-label="Section and measure options"
+    >
+      {sectioning ? (
+        cut ? (
+          <>
+            <input
+              className="cut-slider"
+              type="range"
+              min={0}
+              max={1}
+              step={0.01}
+              value={offset}
+              aria-label="Cut depth"
+              onChange={(event) => onOffsetChange(Number(event.target.value))}
+            />
+            <button
+              className="tool-icon-button"
+              type="button"
+              aria-label="Clear cut"
+              onClick={onClearCut}
+            >
+              <TrashIcon className="viewer-tool-icon" size={23} weight="regular" />
+            </button>
+          </>
+        ) : (
+          <span className="viewer-hint">Click a face or a plane · Esc clears</span>
+        )
+      ) : null}
+      {sectioning && measuring ? <span className="analysis-divider" aria-hidden="true" /> : null}
+      {measuring ? (
+        <>
+          <div className="measure-mode-toggle" role="group" aria-label="Measurement type">
+            <button
+              type="button"
+              aria-label="Distance"
+              aria-pressed={measureMode === 'distance'}
+              onClick={() => onMeasureModeChange('distance')}
+            >
+              <RulerIcon className="viewer-tool-icon" size={23} weight="regular" />
+            </button>
+            <button
+              type="button"
+              aria-label="Angle"
+              aria-pressed={measureMode === 'angle'}
+              onClick={() => onMeasureModeChange('angle')}
+            >
+              <AngleIcon className="viewer-tool-icon" size={23} weight="regular" />
+            </button>
+          </div>
+          <button
+            className="tool-icon-button"
+            type="button"
+            aria-label="Clear measurements"
+            onClick={onClearMeasurements}
+          >
+            <TrashIcon className="viewer-tool-icon" size={23} weight="regular" />
+          </button>
+        </>
+      ) : null}
+    </div>
+  )
+}