@ifc-lite/viewer 1.19.1 → 1.21.0

package/src/components/viewer/properties/GeoreferencingPanel.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState, useCallback, useMemo } from 'react';
-import { Globe, MapPin, PenLine, Check, X, Search, ChevronRight, Mountain } from 'lucide-react';
+import { Globe, MapPin, PenLine, Check, X, Search, ChevronRight, Mountain, AlertTriangle } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { Badge } from '@/components/ui/badge';
 import { computeAngleToGridNorth, type GeoreferenceInfo, type MapConversion, type ProjectedCRS } from '@ifc-lite/parser';
@@ -16,7 +16,8 @@ import { useViewerStore } from '@/store';
 import type { CoordinateInfo, GeometryResult } from '@ifc-lite/geometry';
 import { EpsgLookupDialog, type EpsgResult } from './EpsgLookupDialog';
 import { LocationMap, type PickedPosition } from './LocationMap';
-import { mergeMapConversion, mergeProjectedCRS } from '@/lib/geo/effective-georef';
+import { findClampAnchorY } from '@/lib/geo/clamp-anchor';
+import { detectScaleUnitMismatch, mergeMapConversion, mergeProjectedCRS } from '@/lib/geo/effective-georef';
 import { useIfc } from '@/hooks/useIfc';
 import { toast } from '@/components/ui/toast';
 
@@ -324,9 +325,12 @@ export interface GeoreferencingPanelProps {
   geometryResult?: GeometryResult | null;
   /** IFC project length unit → metres (e.g. 0.001 for mm models). Default 1. */
   lengthUnitScale?: number;
+  /** IfcBuildingStorey elevations (express id → metres, viewer-Y aligned).
+   *  Used to anchor the model's ground floor to terrain. */
+  storeyElevations?: Map<number, number>;
 }
 
-export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVersion, coordinateInfo, geometryResult, lengthUnitScale }: GeoreferencingPanelProps) {
+export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVersion, coordinateInfo, geometryResult, lengthUnitScale, storeyElevations }: GeoreferencingPanelProps) {
   const georefMutations = useViewerStore(s => s.georefMutations);
   const setGeorefField = useViewerStore(s => s.setGeorefField);
   const setGeorefFields = useViewerStore(s => s.setGeorefFields);
@@ -361,6 +365,15 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
     return computeAngleToGridNorth(mergedConversion?.xAxisAbscissa, mergedConversion?.xAxisOrdinate);
   }, [mergedConversion]);
 
+  const scaleMismatch = useMemo(() => {
+    if (!mergedConversion) return null;
+    return detectScaleUnitMismatch(
+      mergedConversion.scale,
+      mergedCRS?.mapUnitScale,
+      lengthUnitScale,
+    );
+  }, [mergedConversion, mergedCRS?.mapUnitScale, lengthUnitScale]);
+
   const mapUnitSuffix = useMemo(() => {
     const mapUnit = mergedCRS?.mapUnit?.toUpperCase();
     if (!mapUnit) return 'm';
@@ -376,6 +389,26 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
     return meters; // already meters
   }, [mapUnitSuffix]);
 
+  /**
+   * Given a target world altitude (metres) for the model's ground floor
+   * (the storey nearest elevation 0, falling back to bounds.min.y when
+   * no storeys are present), return the IfcMapConversion.OrthogonalHeight
+   * value (in map units, rounded to 0.01) that would put the ground floor
+   * there — accounting for any RTC / origin shifts the geometry pipeline
+   * applied. This mirrors the auto-clamp formula so the "Set
+   * OrthogonalHeight to Cesium terrain elevation" button produces the same
+   * world position as toggling the clamp.
+   */
+  const oHeightForBaseAltitude = useCallback((targetBaseAltitude: number): number => {
+    const bounds = coordinateInfo?.originalBounds;
+    const anchorY = findClampAnchorY(bounds, storeyElevations);
+    const shiftY = coordinateInfo?.originShift?.y ?? 0;
+    // RTC offset is in IFC Z-up; viewer Y-up takes its Z component.
+    const rtcYupY = coordinateInfo?.wasmRtcOffset?.z ?? 0;
+    const targetOHeightMeters = targetBaseAltitude - shiftY - rtcYupY - anchorY;
+    return Math.round(metersToMapUnit(targetOHeightMeters) * 100) / 100;
+  }, [coordinateInfo, storeyElevations, metersToMapUnit]);
+
   const isMutated = useCallback((entity: 'projectedCRS' | 'mapConversion', field: string): boolean => {
     if (!mutations) return false;
     const entityMuts = mutations[entity];
@@ -434,8 +467,14 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
       ? mergedCRS?.[field as keyof ProjectedCRS]
       : mergedConversion?.[field as keyof MapConversion];
     setGeorefField(modelId, entity, field, value, oldValue as string | number | undefined);
+    // Editing OrthogonalHeight implies "I want this exact altitude" — auto
+    // -release the terrain clamp so the new value actually takes effect
+    // (with clamp on, placement is locked to terrain regardless of oHeight).
+    if (entity === 'mapConversion' && field === 'orthogonalHeight' && terrainClamp) {
+      setCesiumTerrainClamp(false);
+    }
     requestAlignmentReload();
-  }, [modelId, setGeorefField, mergedCRS, mergedConversion, requestAlignmentReload]);
+  }, [modelId, setGeorefField, mergedCRS, mergedConversion, requestAlignmentReload, terrainClamp, setCesiumTerrainClamp]);
 
   // Handle angle edit: compute and set both XAxisAbscissa and XAxisOrdinate
   const handleAngleChange = useCallback((abscissa: number, ordinate: number) => {
@@ -455,16 +494,19 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
       { field: 'northings', value: position.northing, oldValue: mergedConversion?.northings },
     ];
     if (position.terrainHeight !== null) {
+      // position.terrainHeight is the world altitude where the user wants the
+      // base of the model — translate to OrthogonalHeight using the same
+      // bounds/shift accounting as the auto-clamp path.
       fields.push({
         field: 'orthogonalHeight',
-        value: Math.round(position.terrainHeight * 10) / 10,
+        value: oHeightForBaseAltitude(position.terrainHeight),
         oldValue: mergedConversion?.orthogonalHeight,
       });
     }
     setGeorefFields(modelId, 'mapConversion', fields);
     setConversionOpen(true);
     requestAlignmentReload();
-  }, [modelId, setGeorefFields, mergedConversion, requestAlignmentReload]);
+  }, [modelId, setGeorefFields, mergedConversion, requestAlignmentReload, oHeightForBaseAltitude]);
 
   const initializeMapConversionDefaults = useCallback(() => {
     if (!modelId || !setGeorefFields) return;
@@ -646,6 +688,19 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
             <ChevronRight className={`h-3 w-3 text-teal-500 shrink-0 transition-transform ${conversionOpen ? 'rotate-90' : ''}`} />
             <MapPin className="h-3 w-3 text-teal-500 shrink-0" />
             <span className="font-bold text-[11px] text-zinc-700 dark:text-zinc-300 uppercase tracking-wide flex-1 text-left">Coordinate Operation</span>
+            {scaleMismatch && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <AlertTriangle
+                    className="h-3 w-3 text-amber-500 shrink-0"
+                    aria-label="Scale inconsistent with project/map units"
+                  />
+                </TooltipTrigger>
+                <TooltipContent>
+                  Scale inconsistent with project/map units — expand to view details
+                </TooltipContent>
+              </Tooltip>
+            )}
             {!conversionOpen && (
               <span className="text-[10px] font-mono text-teal-600/70 dark:text-teal-500/60">
                 E {mergedConversion.eastings.toFixed(0)} N {mergedConversion.northings.toFixed(0)}
@@ -658,12 +713,26 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
               <GeorefRow label="Eastings" value={mergedConversion.eastings} suffix={mapUnitSuffix} isNumber editable={editable} isMutated={isMutated('mapConversion', 'eastings')} fieldEntity="mapConversion" fieldName="eastings" onSave={v => handleSave('mapConversion', 'eastings', v)} />
               <GeorefRow label="Northings" value={mergedConversion.northings} suffix={mapUnitSuffix} isNumber editable={editable} isMutated={isMutated('mapConversion', 'northings')} fieldEntity="mapConversion" fieldName="northings" onSave={v => handleSave('mapConversion', 'northings', v)} />
               <GeorefRow label="OrthogonalHeight" value={mergedConversion.orthogonalHeight} suffix={mapUnitSuffix} isNumber editable={editable} isMutated={isMutated('mapConversion', 'orthogonalHeight')} fieldEntity="mapConversion" fieldName="orthogonalHeight" onSave={v => handleSave('mapConversion', 'orthogonalHeight', v)}>
-                <TerrainHeightButton modelId={modelId} editable={editable} onApply={(h) => handleSave('mapConversion', 'orthogonalHeight', Math.round(metersToMapUnit(h) * 100) / 100)} />
+                <TerrainHeightButton modelId={modelId} editable={editable} onApply={(h) => handleSave('mapConversion', 'orthogonalHeight', oHeightForBaseAltitude(h))} />
               </GeorefRow>
               <GeorefRow label="XAxisAbscissa" value={mergedConversion.xAxisAbscissa} isNumber editable={editable} isMutated={isMutated('mapConversion', 'xAxisAbscissa')} fieldEntity="mapConversion" fieldName="xAxisAbscissa" onSave={v => handleSave('mapConversion', 'xAxisAbscissa', v)} />
               <GeorefRow label="XAxisOrdinate" value={mergedConversion.xAxisOrdinate} isNumber editable={editable} isMutated={isMutated('mapConversion', 'xAxisOrdinate')} fieldEntity="mapConversion" fieldName="xAxisOrdinate" onSave={v => handleSave('mapConversion', 'xAxisOrdinate', v)} />
               <AngleRow angle={angleToGridNorth} editable={editable} onAngleChange={handleAngleChange} />
               <GeorefRow label="Scale" value={mergedConversion.scale} isNumber editable={editable} isMutated={isMutated('mapConversion', 'scale')} fieldEntity="mapConversion" fieldName="scale" onSave={v => handleSave('mapConversion', 'scale', v)} />
+              {scaleMismatch && (
+                <div className="px-3 py-2 flex items-start gap-1.5 text-[10px] text-amber-600 dark:text-amber-400 bg-amber-50/50 dark:bg-amber-950/20">
+                  <AlertTriangle className="h-3 w-3 mt-0.5 shrink-0" />
+                  <span className="leading-snug">
+                    <strong>Scale inconsistent with project/map units.</strong>{' '}
+                    Per IFC schema, IfcMapConversion.Scale should bridge the unit
+                    difference between the project length unit and map CRS unit.
+                    Current Scale = {scaleMismatch.rawScale}; expected ≈{' '}
+                    {scaleMismatch.expectedScale.toPrecision(4)}. Geometry is
+                    being placed at {scaleMismatch.effectiveScale.toPrecision(4)}×
+                    its physical size — adjust Scale (or MapUnit) to fix.
+                  </span>
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -707,7 +776,7 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
           {cesiumTerrainHeight !== null && editable && modelId && (
             <div className="flex items-center gap-1 ml-5">
               <button
-                onClick={() => handleSave('mapConversion', 'orthogonalHeight', Math.round(metersToMapUnit(cesiumTerrainHeight) * 100) / 100)}
+                onClick={() => handleSave('mapConversion', 'orthogonalHeight', oHeightForBaseAltitude(cesiumTerrainHeight))}
                 className="text-[9px] text-teal-500 hover:text-teal-700 dark:hover:text-teal-300 transition-colors flex items-center gap-0.5"
               >
                 <Mountain className="h-2.5 w-2.5" />

package/src/components/viewer/properties/MaterialCard.tsx

@@ -170,8 +170,8 @@ export function MaterialCard({ material }: { material: MaterialInfo }) {
           {/* Material List */}
           {material.type === 'MaterialList' && material.materials && (
             <>
-              {material.materials.map((name, i) => (
-                <MaterialRow key={i} label={`Material ${i + 1}`} value={name} />
+              {material.materials.map((m, i) => (
+                <MaterialRow key={i} label={`Material ${i + 1}`} value={m.name} />
               ))}
             </>
           )}

package/src/components/viewer/selectionHandlers.ts

@@ -39,6 +39,47 @@ export async function handleSelectionClick(ctx: MouseHandlerContext, e: MouseEve
     return; // Skip click handling for measure tool
   }
 
+  // Section-tool face-pick (issue #243): clicking any visible face places
+  // the clip plane through it. Intercept BEFORE the generic select path
+  // so the click doesn't also flip the selection.
+  //
+  // Camera-aware orientation: we flip the picked normal if it faces away
+  // from the camera, so the kept half-space is the one the user is looking
+  // at by default (the most common expectation; if the cut goes the wrong
+  // way the existing Flip button still works). This addresses the
+  // CodeRabbit minor on PR #581 about face-pick not being camera-aware.
+  if (tool === 'section' && ctx.sectionPickModeRef?.current) {
+    const hit = renderer.raycastScene(x, y, {
+      hiddenIds:   ctx.hiddenEntitiesRef.current,
+      isolatedIds: ctx.isolatedEntitiesRef.current,
+    });
+    if (hit?.intersection) {
+      const n = hit.intersection.normal;
+      const p = hit.intersection.point;
+      const cam = renderer.getCamera().getPosition();
+      // View vector = camera → hit. If `dot(view, normal) > 0` the normal
+      // points away from the camera; invert so the cut keeps the side
+      // facing the user.
+      const vx = cam.x - p.x, vy = cam.y - p.y, vz = cam.z - p.z;
+      const dot = vx * n.x + vy * n.y + vz * n.z;
+      const sign = dot < 0 ? -1 : 1;
+      const bounds = ctx.modelBoundsRef?.current;
+      ctx.setSectionPlaneFromFace?.(
+        [sign * n.x, sign * n.y, sign * n.z],
+        [p.x, p.y, p.z],
+        bounds ? {
+          min: [bounds.min.x, bounds.min.y, bounds.min.z],
+          max: [bounds.max.x, bounds.max.y, bounds.max.z],
+        } : undefined,
+      );
+    } else {
+      // Missed geometry — disarm so the user isn't stuck in pick mode
+      // after an errant background click.
+      ctx.setSectionPickMode?.(false);
+    }
+    return;
+  }
+
   // Add-element tool — multi-click placement (start→end for walls/beams,
   // corner→opposite for slab rectangle, N+Enter for slab polygon, single
   // for columns). Uses magnetic snap so points lock to vertices/edges

package/src/components/viewer/tools/SectionPanel.tsx

@@ -6,10 +6,10 @@
  * Section plane controls panel
  */
 
-import React, { useCallback, useState } from 'react';
-import { X, Slice, ChevronDown, FileImage, FlipHorizontal2 } from 'lucide-react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { X, Slice, ChevronDown, FileImage, FlipHorizontal2, MousePointerClick, RotateCcw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { useViewerStore } from '@/store';
+import { useViewerStore, loadLastSectionMode } from '@/store';
 import { AXIS_INFO } from './sectionConstants';
 import { SectionPlaneVisualization } from './SectionVisualization';
 import { SectionCapControls } from './SectionCapControls';
@@ -20,11 +20,18 @@ export function SectionOverlay() {
   const setSectionPlanePosition = useViewerStore((s) => s.setSectionPlanePosition);
   const toggleSectionPlane = useViewerStore((s) => s.toggleSectionPlane);
   const flipSectionPlane = useViewerStore((s) => s.flipSectionPlane);
+  // Face-pick + custom plane actions (issue #243).
+  const sectionPickMode = useViewerStore((s) => s.sectionPickMode);
+  const setSectionPickMode = useViewerStore((s) => s.setSectionPickMode);
+  const setSectionCustomDistance = useViewerStore((s) => s.setSectionCustomDistance);
+  const setPreviewStride = useViewerStore((s) => s.setPointCloudPreviewStride);
+  const pointCloudAssetCount = useViewerStore((s) => s.pointCloudAssetCount);
   const setActiveTool = useViewerStore((s) => s.setActiveTool);
   const setDrawingPanelVisible = useViewerStore((s) => s.setDrawing2DPanelVisible);
   const drawingPanelVisible = useViewerStore((s) => s.drawing2DPanelVisible);
   const clearDrawing = useViewerStore((s) => s.clearDrawing2D);
   const [isPanelCollapsed, setIsPanelCollapsed] = useState(true);
+  const isCustom = sectionPlane.custom !== undefined;
 
   const handleClose = useCallback(() => {
     setActiveTool('select');
@@ -34,6 +41,26 @@ export function SectionOverlay() {
     setSectionPlaneAxis(axis);
   }, [setSectionPlaneAxis]);
 
+  // Toggle the "next click picks a face" arming. The actual click is
+  // intercepted in `selectionHandlers.ts`, which calls
+  // `setSectionPlaneFromFace` and clears pick mode for us. (issue #243)
+  const handleTogglePickMode = useCallback(() => {
+    setSectionPickMode(!sectionPickMode);
+  }, [sectionPickMode, setSectionPickMode]);
+
+  // "Reset to axis" in custom mode — clearing the custom field via
+  // setSectionPlaneAxis re-uses the existing cardinal pathway. We pick
+  // the nearest cardinal that's already in `axis` (kept in sync at pick
+  // time) so the user lands on the closest preset they had before.
+  const handleResetToAxis = useCallback(() => {
+    setSectionPlaneAxis(sectionPlane.axis);
+  }, [sectionPlane.axis, setSectionPlaneAxis]);
+
+  const handleCustomDistanceChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = Number(e.target.value);
+    if (Number.isFinite(v)) setSectionCustomDistance(v);
+  }, [setSectionCustomDistance]);
+
   const handlePositionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const value = Number(e.target.value);
     if (!Number.isNaN(value)) {
@@ -41,6 +68,65 @@ export function SectionOverlay() {
     }
   }, [setSectionPlanePosition]);
 
+  // Section-plane drag preview: while the user is actively dragging
+  // the position slider, render the splat shader at 1/4 density so
+  // huge scans (>10M points) keep up. Restored on release.
+  const handleSliderDragStart = useCallback(() => {
+    if (pointCloudAssetCount > 0) setPreviewStride(4);
+  }, [setPreviewStride, pointCloudAssetCount]);
+  const handleSliderDragEnd = useCallback(() => {
+    setPreviewStride(1);
+  }, [setPreviewStride]);
+  // Reset stride if the panel disappears mid-drag (e.g. user closes
+  // the section tool without releasing the slider). Without this the
+  // store can stay stuck at 4 and keep scans thinned indefinitely.
+  useEffect(() => {
+    return () => setPreviewStride(1);
+  }, [setPreviewStride]);
+
+  // Restore the user's last-used section mode when the panel mounts
+  // (issue #243 follow-up). Two modes round-trip via localStorage:
+  //
+  //   • 'pick'     — face-pick is the default for first-time users and
+  //                  anyone whose last action was a face pick. The 200ms
+  //                  debounce stops the click that opened the tool from
+  //                  bleeding through to the canvas pick handler and
+  //                  accidentally sectioning the floor on the same frame
+  //                  the panel mounts.
+  //   • 'cardinal' — restore axis + position + flipped so the cut
+  //                  appears exactly where the user left it. Section is
+  //                  enabled by these setters so the cut is immediately
+  //                  visible — matches the user's mental model of
+  //                  "opening the panel where I left it".
+  //
+  // Cleanup disarms pick mode on unmount so leaving the tool doesn't
+  // leave pick mode armed for the next tool.
+  useEffect(() => {
+    const mode = loadLastSectionMode();
+    let armTimer: ReturnType<typeof setTimeout> | null = null;
+
+    if (mode.kind === 'cardinal') {
+      // Read current flipped via getState() so we don't pull the live
+      // store value into the dep array (which would re-run the effect
+      // every flip and clobber the restore on each interaction).
+      const currentFlipped = useViewerStore.getState().sectionPlane.flipped;
+      setSectionPlaneAxis(mode.axis);
+      setSectionPlanePosition(mode.position);
+      if (currentFlipped !== mode.flipped) flipSectionPlane();
+    } else {
+      armTimer = setTimeout(() => setSectionPickMode(true), 200);
+    }
+
+    return () => {
+      if (armTimer !== null) clearTimeout(armTimer);
+      setSectionPickMode(false);
+    };
+    // The setters are stable refs from zustand; flipSectionPlane reads
+    // current state via getState() so it's intentionally NOT in the dep
+    // array (would cause the restore to re-run on every flip).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setSectionPickMode, setSectionPlaneAxis, setSectionPlanePosition, flipSectionPlane]);
+
   const togglePanel = useCallback(() => {
     setIsPanelCollapsed(prev => !prev);
   }, []);
@@ -65,7 +151,10 @@ export function SectionOverlay() {
             <span className="font-medium text-sm">Section</span>
             {sectionPlane.enabled && (
               <span className="text-xs text-primary font-mono">
-                {AXIS_INFO[sectionPlane.axis].label} <span className="inline-block w-12 text-right tabular-nums">{sectionPlane.position.toFixed(1)}%</span>
+                {isCustom
+                  ? <>Custom <span className="inline-block w-16 text-right tabular-nums">{sectionPlane.custom!.distance.toFixed(2)}m</span></>
+                  : <>{AXIS_INFO[sectionPlane.axis].label} <span className="inline-block w-12 text-right tabular-nums">{sectionPlane.position.toFixed(1)}%</span></>
+                }
               </span>
             )}
             <ChevronDown className={`h-3 w-3 transition-transform ${isPanelCollapsed ? '-rotate-90' : ''}`} />
@@ -86,28 +175,71 @@ export function SectionOverlay() {
         {/* Expandable content */}
         {!isPanelCollapsed && (
           <div className="border-t px-3 pb-3 min-w-72">
-            {/* Direction Selection */}
+            {/* Direction Selection. "Pick face" is the primary affordance —
+                face-pick auto-arms on tool open (issue #243 follow-up) and
+                matches Bonsai/Revit point-and-cut UX. Cardinal presets are
+                demoted to a secondary row below for power users who want
+                an axis-aligned cut without picking a surface. */}
             <div className="mt-3">
-              <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1.5">Direction</div>
+              <Button
+                variant={sectionPickMode || isCustom ? 'default' : 'outline'}
+                size="sm"
+                className="w-full flex-col h-auto py-1.5"
+                onClick={handleTogglePickMode}
+                aria-pressed={sectionPickMode}
+                title={
+                  sectionPickMode
+                    ? 'Click any face in the viewport to cut through it'
+                    : 'Pick a face to cut through (Bonsai-style)'
+                }
+              >
+                <span className="text-xs font-medium flex items-center gap-1">
+                  <MousePointerClick className="h-3 w-3" />
+                  {sectionPickMode ? 'Click a face to cut…' : isCustom ? 'Custom (pick again)' : 'Pick face'}
+                </span>
+              </Button>
+              <div className="mt-2 text-[10px] uppercase tracking-wider text-muted-foreground/70 mb-1">or pick an axis</div>
               <div className="flex gap-1">
                 {(['down', 'front', 'side'] as const).map((axis) => (
                   <Button
                     key={axis}
-                    variant={sectionPlane.axis === axis ? 'default' : 'outline'}
+                    variant={!isCustom && sectionPlane.axis === axis ? 'secondary' : 'ghost'}
                     size="sm"
-                    className="flex-1 flex-col h-auto py-1.5"
+                    className="flex-1 h-7 px-2 text-[11px]"
                     onClick={() => handleAxisChange(axis)}
                   >
-                    <span className="text-xs font-medium">{AXIS_INFO[axis].label}</span>
+                    <span className="font-normal">{AXIS_INFO[axis].label}</span>
                   </Button>
                 ))}
               </div>
+              {isCustom && (
+                <div className="mt-2 flex items-center justify-between text-[10px] font-mono text-muted-foreground bg-muted/50 rounded px-2 py-1">
+                  <span title="Custom plane normal (world-space unit vector)">
+                    n=({sectionPlane.custom!.normal.map((v) => v.toFixed(2)).join(', ')})
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={handleResetToAxis}
+                    title="Reset to nearest cardinal axis"
+                    className="h-5 w-5"
+                  >
+                    <RotateCcw className="h-3 w-3" />
+                  </Button>
+                </div>
+              )}
             </div>
 
-            {/* Position Slider */}
+            {/* Position. In cardinal mode this is a 0..100% slider along the
+                axis. In custom mode (issue #243) the numeric input becomes
+                a precise signed distance in world units along the picked
+                normal; the slider still works (it shifts the plane by a
+                small amount along the normal — see sectionSlice). */}
             <div className="mt-3">
               <div className="flex items-center justify-between mb-1">
-                <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Position</div>
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                  {isCustom ? 'Distance (m)' : 'Position'}
+                </div>
                 <div className="flex items-center gap-1">
                   <Button
                     variant={sectionPlane.flipped ? 'default' : 'ghost'}
@@ -119,16 +251,27 @@ export function SectionOverlay() {
                   >
                     <FlipHorizontal2 className="h-3 w-3" />
                   </Button>
-                  <input
-                    type="number"
-                    min="0"
-                    max="100"
-                    step="0.1"
-                    value={sectionPlane.position}
-                    onChange={handlePositionChange}
-                    aria-label="Section plane position percentage"
-                    className="w-16 text-xs font-mono bg-muted px-1.5 py-0.5 rounded border-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                  />
+                  {isCustom ? (
+                    <input
+                      type="number"
+                      step="0.05"
+                      value={sectionPlane.custom!.distance.toFixed(3)}
+                      onChange={handleCustomDistanceChange}
+                      aria-label="Section plane distance along picked normal (world units)"
+                      className="w-20 text-xs font-mono bg-muted px-1.5 py-0.5 rounded border-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                  ) : (
+                    <input
+                      type="number"
+                      min="0"
+                      max="100"
+                      step="0.1"
+                      value={sectionPlane.position}
+                      onChange={handlePositionChange}
+                      aria-label="Section plane position percentage"
+                      className="w-16 text-xs font-mono bg-muted px-1.5 py-0.5 rounded border-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                  )}
                 </div>
               </div>
               <input
@@ -138,6 +281,16 @@ export function SectionOverlay() {
                 step="0.1"
                 value={sectionPlane.position}
                 onChange={handlePositionChange}
+                onPointerDown={handleSliderDragStart}
+                onPointerUp={handleSliderDragEnd}
+                // pointercancel + blur cover the cases where the
+                // browser steals capture (touch scroll, OS gesture)
+                // or the user tabs away without releasing — the
+                // store would otherwise stay at stride 4.
+                onPointerCancel={handleSliderDragEnd}
+                onBlur={handleSliderDragEnd}
+                onKeyDown={handleSliderDragStart}
+                onKeyUp={handleSliderDragEnd}
                 aria-label="Section plane position slider"
                 className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
               />
@@ -174,9 +327,13 @@ export function SectionOverlay() {
         }}
       >
         <span className="font-mono text-xs uppercase tracking-wide">
-          {sectionPlane.enabled
-            ? `Cut ${AXIS_INFO[sectionPlane.axis].label.toLowerCase()} at ${sectionPlane.position.toFixed(1)}%${sectionPlane.flipped ? ' (flipped)' : ''}`
-            : 'Clip off — drag slider to cut'}
+          {sectionPickMode
+            ? 'Hover a surface to preview, click to cut'
+            : sectionPlane.enabled
+              ? isCustom
+                ? `Custom cut at d=${sectionPlane.custom!.distance.toFixed(2)}m${sectionPlane.flipped ? ' (flipped)' : ''}`
+                : `Cut ${AXIS_INFO[sectionPlane.axis].label.toLowerCase()} at ${sectionPlane.position.toFixed(1)}%${sectionPlane.flipped ? ' (flipped)' : ''}`
+              : 'Clip off — drag slider to cut'}
         </span>
       </div>