@ifc-lite/viewer 1.17.4 → 1.17.6

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

@@ -16,6 +16,9 @@ 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 { useIfc } from '@/hooks/useIfc';
+import { toast } from '@/components/ui/toast';
 
 // ── Field-specific assistance data ─────────────────────────────────────
 
@@ -319,9 +322,11 @@ export interface GeoreferencingPanelProps {
   coordinateInfo?: CoordinateInfo;
   /** GeometryResult for KMZ export */
   geometryResult?: GeometryResult | null;
+  /** IFC project length unit → metres (e.g. 0.001 for mm models). Default 1. */
+  lengthUnitScale?: number;
 }
 
-export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVersion, coordinateInfo, geometryResult }: GeoreferencingPanelProps) {
+export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVersion, coordinateInfo, geometryResult, lengthUnitScale }: GeoreferencingPanelProps) {
   const georefMutations = useViewerStore(s => s.georefMutations);
   const setGeorefField = useViewerStore(s => s.setGeorefField);
   const setGeorefFields = useViewerStore(s => s.setGeorefFields);
@@ -330,10 +335,14 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
   const setCesiumTerrainClamp = useViewerStore(s => s.setCesiumTerrainClamp);
   const cesiumTerrainHeight = useViewerStore(s => s.cesiumTerrainHeight);
   const cesiumSourceModelId = useViewerStore(s => s.cesiumSourceModelId);
+  const models = useViewerStore(s => s.models);
+  const loading = useViewerStore(s => s.loading);
+  const { addModel, clearAllModels } = useIfc();
   // Only show terrain actions when this panel's model is the one backing the Cesium overlay
   const isActiveCesiumModel = !!modelId && modelId === cesiumSourceModelId;
   const [crsOpen, setCrsOpen] = useState(false);
   const [conversionOpen, setConversionOpen] = useState(false);
+  const [showReloadPrompt, setShowReloadPrompt] = useState(false);
 
   useViewerStore(s => s.mutationVersion);
 
@@ -341,37 +350,12 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
   const supportsStandardGeoreferencing = !schemaVersion?.toUpperCase().includes('2X3');
 
   const mergedCRS = useMemo((): ProjectedCRS | undefined => {
-    const base = georef?.projectedCRS;
-    const muts = mutations?.projectedCRS;
-    if (!base && !muts) return undefined;
-    return {
-      id: base?.id ?? 0,
-      name: muts?.name ?? base?.name ?? '',
-      description: muts?.description ?? base?.description,
-      geodeticDatum: muts?.geodeticDatum ?? base?.geodeticDatum,
-      verticalDatum: muts?.verticalDatum ?? base?.verticalDatum,
-      mapProjection: muts?.mapProjection ?? base?.mapProjection,
-      mapZone: muts?.mapZone ?? base?.mapZone,
-      mapUnit: muts?.mapUnit ?? base?.mapUnit,
-    };
-  }, [georef, mutations]);
+    return mergeProjectedCRS(georef?.projectedCRS, mutations?.projectedCRS, lengthUnitScale ?? 1);
+  }, [georef?.projectedCRS, mutations?.projectedCRS, lengthUnitScale]);
 
   const mergedConversion = useMemo((): MapConversion | undefined => {
-    const base = georef?.mapConversion;
-    const muts = mutations?.mapConversion;
-    if (!base && !muts) return undefined;
-    return {
-      id: base?.id ?? 0,
-      sourceCRS: base?.sourceCRS ?? 0,
-      targetCRS: base?.targetCRS ?? 0,
-      eastings: muts?.eastings ?? base?.eastings ?? 0,
-      northings: muts?.northings ?? base?.northings ?? 0,
-      orthogonalHeight: muts?.orthogonalHeight ?? base?.orthogonalHeight ?? 0,
-      xAxisAbscissa: muts?.xAxisAbscissa ?? base?.xAxisAbscissa,
-      xAxisOrdinate: muts?.xAxisOrdinate ?? base?.xAxisOrdinate,
-      scale: muts?.scale ?? base?.scale,
-    };
-  }, [georef, mutations]);
+    return mergeMapConversion(georef?.mapConversion, mutations?.mapConversion);
+  }, [georef?.mapConversion, mutations?.mapConversion]);
 
   const angleToGridNorth = useMemo(() => {
     return computeAngleToGridNorth(mergedConversion?.xAxisAbscissa, mergedConversion?.xAxisOrdinate);
@@ -399,22 +383,69 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
     return field in entityMuts;
   }, [mutations]);
 
+  const requestAlignmentReload = useCallback(() => {
+    if (models.size > 1) {
+      setShowReloadPrompt(true);
+    }
+  }, [models.size]);
+
+  const reloadModelsForAlignment = useCallback(async () => {
+    const state = useViewerStore.getState();
+    const snapshot = Array.from(state.models.values()).sort((a, b) => (a.loadedAt ?? 0) - (b.loadedAt ?? 0));
+    const missingSource = snapshot.find(model => !model.sourceFile);
+    if (snapshot.length < 2) {
+      setShowReloadPrompt(false);
+      return;
+    }
+    if (missingSource) {
+      toast.error(`Cannot reload ${missingSource.name}: source file is not available`);
+      return;
+    }
+
+    try {
+      clearAllModels();
+      for (const model of snapshot) {
+        const sourceFile = model.sourceFile;
+        if (!sourceFile) continue;
+        const reloadedModelId = await addModel(sourceFile, {
+          name: model.name,
+          modelId: model.id,
+          loadedAt: model.loadedAt,
+          visible: model.visible,
+          collapsed: model.collapsed,
+        });
+        if (!reloadedModelId) {
+          throw new Error(`Failed to reload ${model.name}`);
+        }
+        if (model.visible === false) {
+          useViewerStore.getState().setModelVisibility(model.id, false);
+        }
+      }
+      setShowReloadPrompt(false);
+      toast.success('Reloaded models for edited georeferencing');
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Reload failed');
+    }
+  }, [addModel, clearAllModels]);
+
   const handleSave = useCallback((entity: 'projectedCRS' | 'mapConversion', field: string, value: string | number) => {
     if (!modelId || !setGeorefField) return;
     const oldValue = entity === 'projectedCRS'
-      ? georef?.projectedCRS?.[field as keyof ProjectedCRS]
-      : georef?.mapConversion?.[field as keyof MapConversion];
+      ? mergedCRS?.[field as keyof ProjectedCRS]
+      : mergedConversion?.[field as keyof MapConversion];
     setGeorefField(modelId, entity, field, value, oldValue as string | number | undefined);
-  }, [modelId, setGeorefField, georef]);
+    requestAlignmentReload();
+  }, [modelId, setGeorefField, mergedCRS, mergedConversion, requestAlignmentReload]);
 
   // Handle angle edit: compute and set both XAxisAbscissa and XAxisOrdinate
   const handleAngleChange = useCallback((abscissa: number, ordinate: number) => {
     if (!modelId || !setGeorefFields) return;
     setGeorefFields(modelId, 'mapConversion', [
-      { field: 'xAxisAbscissa', value: abscissa, oldValue: georef?.mapConversion?.xAxisAbscissa },
-      { field: 'xAxisOrdinate', value: ordinate, oldValue: georef?.mapConversion?.xAxisOrdinate },
+      { field: 'xAxisAbscissa', value: abscissa, oldValue: mergedConversion?.xAxisAbscissa },
+      { field: 'xAxisOrdinate', value: ordinate, oldValue: mergedConversion?.xAxisOrdinate },
     ]);
-  }, [modelId, setGeorefFields, georef]);
+    requestAlignmentReload();
+  }, [modelId, setGeorefFields, mergedConversion, requestAlignmentReload]);
 
   // Handle position picked from the map (reverse-projected easting/northing + optional terrain height)
   const handleApplyPosition = useCallback((position: PickedPosition) => {
@@ -432,35 +463,37 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
     }
     setGeorefFields(modelId, 'mapConversion', fields);
     setConversionOpen(true);
-  }, [modelId, setGeorefFields, mergedConversion]);
+    requestAlignmentReload();
+  }, [modelId, setGeorefFields, mergedConversion, requestAlignmentReload]);
 
   const initializeMapConversionDefaults = useCallback(() => {
     if (!modelId || !setGeorefFields) return;
     setGeorefFields(modelId, 'mapConversion', [
-      { field: 'eastings', value: georef?.mapConversion?.eastings ?? 0, oldValue: georef?.mapConversion?.eastings },
-      { field: 'northings', value: georef?.mapConversion?.northings ?? 0, oldValue: georef?.mapConversion?.northings },
-      { field: 'orthogonalHeight', value: georef?.mapConversion?.orthogonalHeight ?? 0, oldValue: georef?.mapConversion?.orthogonalHeight },
-      { field: 'xAxisAbscissa', value: georef?.mapConversion?.xAxisAbscissa ?? 1, oldValue: georef?.mapConversion?.xAxisAbscissa },
-      { field: 'xAxisOrdinate', value: georef?.mapConversion?.xAxisOrdinate ?? 0, oldValue: georef?.mapConversion?.xAxisOrdinate },
-      { field: 'scale', value: georef?.mapConversion?.scale ?? 1, oldValue: georef?.mapConversion?.scale },
+      { field: 'eastings', value: mergedConversion?.eastings ?? 0, oldValue: mergedConversion?.eastings },
+      { field: 'northings', value: mergedConversion?.northings ?? 0, oldValue: mergedConversion?.northings },
+      { field: 'orthogonalHeight', value: mergedConversion?.orthogonalHeight ?? 0, oldValue: mergedConversion?.orthogonalHeight },
+      { field: 'xAxisAbscissa', value: mergedConversion?.xAxisAbscissa ?? 1, oldValue: mergedConversion?.xAxisAbscissa },
+      { field: 'xAxisOrdinate', value: mergedConversion?.xAxisOrdinate ?? 0, oldValue: mergedConversion?.xAxisOrdinate },
+      { field: 'scale', value: mergedConversion?.scale ?? 1, oldValue: mergedConversion?.scale },
     ]);
     setConversionOpen(true);
-  }, [modelId, setGeorefFields, georef]);
+    requestAlignmentReload();
+  }, [modelId, setGeorefFields, mergedConversion, requestAlignmentReload]);
 
   const handleEpsgSelect = useCallback((result: EpsgResult) => {
     if (!modelId || !setGeorefFields) return;
     const epsgName = `EPSG:${result.code}`;
     const fieldUpdates: Array<{ field: string; value: string | number; oldValue?: string | number }> = [
-      { field: 'name', value: epsgName, oldValue: georef?.projectedCRS?.name },
+      { field: 'name', value: epsgName, oldValue: mergedCRS?.name },
     ];
     if (result.name) {
-      fieldUpdates.push({ field: 'description', value: result.name, oldValue: georef?.projectedCRS?.description });
+      fieldUpdates.push({ field: 'description', value: result.name, oldValue: mergedCRS?.description });
     }
     if (result.datum) {
-      fieldUpdates.push({ field: 'geodeticDatum', value: result.datum, oldValue: georef?.projectedCRS?.geodeticDatum });
+      fieldUpdates.push({ field: 'geodeticDatum', value: result.datum, oldValue: mergedCRS?.geodeticDatum });
     }
     if (result.projection) {
-      fieldUpdates.push({ field: 'mapProjection', value: result.projection, oldValue: georef?.projectedCRS?.mapProjection });
+      fieldUpdates.push({ field: 'mapProjection', value: result.projection, oldValue: mergedCRS?.mapProjection });
     }
     if (result.unit) {
       const unitUpper = result.unit.toUpperCase();
@@ -471,14 +504,15 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
           : unitUpper.includes('FOOT') || unitUpper.includes('FEET')
             ? 'FOOT'
             : result.unit;
-      fieldUpdates.push({ field: 'mapUnit', value: mapUnit, oldValue: georef?.projectedCRS?.mapUnit });
+      fieldUpdates.push({ field: 'mapUnit', value: mapUnit, oldValue: mergedCRS?.mapUnit });
     }
     setGeorefFields(modelId, 'projectedCRS', fieldUpdates);
-    if (!georef?.mapConversion && !mutations?.mapConversion) {
+    if (!mergedConversion && !mutations?.mapConversion) {
       initializeMapConversionDefaults();
     }
     setCrsOpen(true);
-  }, [modelId, setGeorefFields, georef, mutations, initializeMapConversionDefaults]);
+    requestAlignmentReload();
+  }, [modelId, setGeorefFields, mergedCRS, mergedConversion, mutations, initializeMapConversionDefaults, requestAlignmentReload]);
 
   const hasData = mergedCRS || mergedConversion;
   const editable = enableEditing && !!modelId && supportsStandardGeoreferencing;
@@ -513,6 +547,33 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
 
   return (
     <div>
+      {showReloadPrompt && (
+        <div className="mx-2 my-2 border border-teal-300 dark:border-teal-700 bg-teal-50 dark:bg-teal-950/40 px-2.5 py-2">
+          <div className="flex items-start gap-2">
+            <MapPin className="h-3.5 w-3.5 text-teal-600 dark:text-teal-400 shrink-0 mt-0.5" />
+            <div className="min-w-0 flex-1">
+              <p className="text-[10px] text-zinc-700 dark:text-zinc-300">
+                Georeference saved. Reload loaded models to recompute 3D alignment?
+              </p>
+              <div className="mt-1.5 flex items-center gap-2">
+                <button
+                  onClick={reloadModelsForAlignment}
+                  disabled={loading}
+                  className="px-2 py-0.5 text-[10px] font-medium text-white bg-teal-600 hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Reload models
+                </button>
+                <button
+                  onClick={() => setShowReloadPrompt(false)}
+                  className="px-2 py-0.5 text-[10px] text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200/60 dark:hover:bg-zinc-800"
+                >
+                  Later
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       {/* CRS summary — always visible */}
       <div className="px-2 py-1.5 flex items-center gap-2">
         <Globe className="h-3 w-3 text-teal-500 shrink-0" />
@@ -663,6 +724,7 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
         projectedCRS={mergedCRS}
         coordinateInfo={coordinateInfo}
         geometryResult={geometryResult}
+        lengthUnitScale={lengthUnitScale}
         editable={editable}
         onApplyPosition={editable ? handleApplyPosition : undefined}
       />

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

@@ -49,6 +49,8 @@ export interface LocationMapProps {
   coordinateInfo?: CoordinateInfo;
   /** Geometry result for KMZ export (optional — KMZ button hidden if not provided) */
   geometryResult?: GeometryResult | null;
+  /** IFC project length unit → metres (e.g. 0.001 for mm models). Default 1 (metres). */
+  lengthUnitScale?: number;
   /** Whether the map is in edit mode (allows repositioning) */
   editable?: boolean;
   /** Called when the user applies a new position from the map */
@@ -138,7 +140,7 @@ function removeFootprintFromMap(map: InstanceType<typeof import('maplibre-gl').M
 
 export function LocationMap({
   mapConversion, projectedCRS, coordinateInfo, geometryResult,
-  editable, onApplyPosition,
+  lengthUnitScale = 1, editable, onApplyPosition,
 }: LocationMapProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const mapRef = useRef<InstanceType<typeof import('maplibre-gl').Map> | null>(null);
@@ -195,14 +197,14 @@ export function LocationMap({
 
     let cancelled = false;
 
-    computeFootprintGeoJSON(mapConversion, projectedCRS, coordinateInfo).then(fp => {
+    computeFootprintGeoJSON(mapConversion, projectedCRS, coordinateInfo, lengthUnitScale).then(fp => {
       if (cancelled) return;
       setFootprint(fp);
       footprintRef.current = fp;
     });
 
     return () => { cancelled = true; };
-  }, [mapConversion, projectedCRS, coordinateInfo]);
+  }, [mapConversion, projectedCRS, coordinateInfo, lengthUnitScale]);
 
   // Geocode search
   useEffect(() => {
@@ -234,7 +236,7 @@ export function LocationMap({
     setMapState('loading');
     setError(null);
 
-    reprojectToLatLon(mapConversion, projectedCRS, coordinateInfo).then(result => {
+    reprojectToLatLon(mapConversion, projectedCRS, coordinateInfo, lengthUnitScale).then(result => {
       if (cancelled) return;
       if (result) {
         setLatLon(result);
@@ -247,7 +249,7 @@ export function LocationMap({
     });
 
     return () => { cancelled = true; };
-  }, [mapConversion, projectedCRS, coordinateInfo]);
+  }, [mapConversion, projectedCRS, coordinateInfo, lengthUnitScale]);
 
   // When a picked position changes, reverse-project and query elevation
   useEffect(() => {
@@ -262,7 +264,7 @@ export function LocationMap({
 
     // Reverse-project to get IfcMapConversion eastings/northings
     // Accounts for model local geometry offset, rotation, and scale
-    reprojectFromLatLon(pickedLatLon, projectedCRS, mapConversion, coordinateInfo).then(coords => {
+    reprojectFromLatLon(pickedLatLon, projectedCRS, mapConversion, coordinateInfo, lengthUnitScale).then(coords => {
       if (!cancelled) setProjectedCoords(coords);
     });
 
@@ -276,7 +278,7 @@ export function LocationMap({
     });
 
     return () => { cancelled = true; };
-  }, [pickedLatLon, projectedCRS, mapConversion, coordinateInfo]);
+  }, [pickedLatLon, projectedCRS, mapConversion, coordinateInfo, lengthUnitScale]);
 
   // Place or move the picked marker on the map
   const updatePickedMarker = useCallback((pos: LatLon, maplibregl: typeof import('maplibre-gl')) => {

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

@@ -212,7 +212,7 @@ export function ModelMetadataPanel({ model }: { model: FederatedModel }) {
         </div>
 
         {/* Georeferencing */}
-        <GeoreferencingPanel georef={georef} modelId={model.id} enableEditing schemaVersion={model.schemaVersion} coordinateInfo={model.geometryResult?.coordinateInfo} geometryResult={model.geometryResult} />
+        <GeoreferencingPanel georef={georef} modelId={model.id} enableEditing schemaVersion={model.schemaVersion} coordinateInfo={model.geometryResult?.coordinateInfo} geometryResult={model.geometryResult} lengthUnitScale={unitInfo?.scale} />
 
         {/* IfcProject Data */}
         {projectData && (

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

@@ -0,0 +1,237 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Cap-surface appearance controls shown inside the expanded Section panel.
+ *
+ * Layout principle (tight compact panel, ≤ 260 px wide):
+ *   [Display]          Surfaces ⬛   Lines ⬛
+ *   ───────────────────────────────────────────────
+ *   [Hatch]            <pattern select>
+ *   [Colours]          Fill ▣   Hatch ▣
+ *   [Shape]            Spacing __px  Angle __°  Width __px
+ *
+ * Surfaces and Lines toggle independently so users can get a clean
+ * "architectural drawing" look (outlines only), a pure hatched fill, or
+ * the combination. All style inputs are hidden when Surfaces is off.
+ */
+
+import { useCallback, useId } from 'react';
+import { useViewerStore } from '@/store';
+import type { SectionCapHatchId } from '@/store/types';
+
+const PATTERN_LABELS: Record<SectionCapHatchId, string> = {
+  solid:      'Solid fill',
+  diagonal:   'Diagonal',
+  crossHatch: 'Cross-hatch',
+  horizontal: 'Horizontal',
+  vertical:   'Vertical',
+  concrete:   'Concrete',
+  brick:      'Brick',
+  insulation: 'Insulation',
+};
+
+const PATTERN_IDS: SectionCapHatchId[] = [
+  'diagonal', 'crossHatch', 'horizontal', 'vertical',
+  'concrete', 'brick', 'insulation', 'solid',
+];
+
+function rgbaToHex(c: [number, number, number, number]): string {
+  const to2 = (v: number) => Math.round(Math.max(0, Math.min(1, v)) * 255).toString(16).padStart(2, '0');
+  return `#${to2(c[0])}${to2(c[1])}${to2(c[2])}`;
+}
+
+function hexToRgba(hex: string, alpha: number): [number, number, number, number] {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!m) return [1, 1, 1, alpha];
+  return [
+    parseInt(m[1], 16) / 255,
+    parseInt(m[2], 16) / 255,
+    parseInt(m[3], 16) / 255,
+    alpha,
+  ];
+}
+
+interface DisplayToggleProps {
+  active: boolean;
+  label: string;
+  onToggle: () => void;
+}
+
+function DisplayToggle({ active, label, onToggle }: DisplayToggleProps): React.JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={active}
+      className={`flex items-center justify-center gap-1.5 px-2 py-1 text-[10px] font-mono uppercase tracking-wide border rounded transition-colors ${
+        active
+          ? 'bg-primary text-primary-foreground border-primary'
+          : 'bg-muted text-muted-foreground border-muted hover:border-foreground/20'
+      }`}
+      title={`${active ? 'Hide' : 'Show'} ${label.toLowerCase()}`}
+    >
+      <span
+        aria-hidden
+        className={`inline-block h-1.5 w-1.5 rounded-full ${active ? 'bg-primary-foreground' : 'bg-muted-foreground'}`}
+      />
+      {label}
+    </button>
+  );
+}
+
+export function SectionCapControls(): React.JSX.Element {
+  const sectionPlane       = useViewerStore((s) => s.sectionPlane);
+  const setShowCap         = useViewerStore((s) => s.setSectionShowCap);
+  const setShowOutlines    = useViewerStore((s) => s.setSectionShowOutlines);
+  const setCapStyle        = useViewerStore((s) => s.setSectionCapStyle);
+
+  const onPattern = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    setCapStyle({ pattern: e.target.value as SectionCapHatchId });
+  }, [setCapStyle]);
+
+  const onFillColor = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setCapStyle({ fillColor: hexToRgba(e.target.value, sectionPlane.capStyle.fillColor[3]) });
+  }, [setCapStyle, sectionPlane.capStyle.fillColor]);
+
+  const onStrokeColor = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setCapStyle({ strokeColor: hexToRgba(e.target.value, sectionPlane.capStyle.strokeColor[3]) });
+  }, [setCapStyle, sectionPlane.capStyle.strokeColor]);
+
+  const onSpacing = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = Number(e.target.value);
+    if (Number.isFinite(v)) setCapStyle({ spacingPx: Math.max(2, v) });
+  }, [setCapStyle]);
+
+  const onAngle = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const deg = Number(e.target.value);
+    if (Number.isFinite(deg)) setCapStyle({ angleRad: (deg * Math.PI) / 180 });
+  }, [setCapStyle]);
+
+  const onWidth = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = Number(e.target.value);
+    if (Number.isFinite(v)) setCapStyle({ widthPx: Math.max(1, v) });
+  }, [setCapStyle]);
+
+  const onToggleCap      = useCallback(() => setShowCap(!sectionPlane.showCap), [setShowCap, sectionPlane.showCap]);
+  const onToggleOutlines = useCallback(() => setShowOutlines(!sectionPlane.showOutlines), [setShowOutlines, sectionPlane.showOutlines]);
+
+  const angleDeg = Math.round((sectionPlane.capStyle.angleRad * 180) / Math.PI);
+
+  // Stable ids for label/control association. Multiple instances of the
+  // panel (rare, but possible during HMR) each get their own id namespace.
+  const baseId = useId();
+  const patternId = `${baseId}-pattern`;
+  const fillId    = `${baseId}-fill`;
+  const strokeId  = `${baseId}-stroke`;
+  const spacingId = `${baseId}-spacing`;
+  const angleId   = `${baseId}-angle`;
+  const widthId   = `${baseId}-width`;
+
+  const hatchInputsDisabled = !sectionPlane.showCap;
+
+  return (
+    <div className="mt-3 border-t pt-3 space-y-3">
+      {/* Display toggles — surfaces and lines independently. */}
+      <div>
+        <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1.5">Display</div>
+        <div className="grid grid-cols-2 gap-2">
+          <DisplayToggle active={sectionPlane.showCap}      label="Surfaces" onToggle={onToggleCap} />
+          <DisplayToggle active={sectionPlane.showOutlines} label="Lines"    onToggle={onToggleOutlines} />
+        </div>
+      </div>
+
+      {/* Hatch style — disabled visually when surfaces are off. */}
+      <fieldset
+        disabled={hatchInputsDisabled}
+        className={`space-y-2 ${hatchInputsDisabled ? 'opacity-50 pointer-events-none' : ''}`}
+      >
+        <div>
+          <label htmlFor={patternId} className="text-[10px] uppercase tracking-wider text-muted-foreground block mb-1">
+            Hatch pattern
+          </label>
+          <select
+            id={patternId}
+            value={sectionPlane.capStyle.pattern}
+            onChange={onPattern}
+            className="w-full text-xs bg-muted px-2 py-1.5 rounded border-none"
+          >
+            {PATTERN_IDS.map((id) => (
+              <option key={id} value={id}>{PATTERN_LABELS[id]}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <label htmlFor={fillId} className="flex items-center gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
+            <input
+              id={fillId}
+              type="color"
+              value={rgbaToHex(sectionPlane.capStyle.fillColor)}
+              onChange={onFillColor}
+              className="h-5 w-5 rounded cursor-pointer border border-muted"
+              aria-label="Fill colour"
+            />
+            Fill
+          </label>
+          <label htmlFor={strokeId} className="flex items-center gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
+            <input
+              id={strokeId}
+              type="color"
+              value={rgbaToHex(sectionPlane.capStyle.strokeColor)}
+              onChange={onStrokeColor}
+              className="h-5 w-5 rounded cursor-pointer border border-muted"
+              aria-label="Hatch colour"
+            />
+            Hatch
+          </label>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2">
+          <div>
+            <label htmlFor={spacingId} className="text-[10px] text-muted-foreground block mb-1">Spacing (px)</label>
+            <input
+              id={spacingId}
+              type="number"
+              min="2"
+              max="64"
+              step="1"
+              value={sectionPlane.capStyle.spacingPx}
+              onChange={onSpacing}
+              className="w-full text-xs bg-muted px-1.5 py-0.5 rounded border-none text-right"
+            />
+          </div>
+          <div>
+            <label htmlFor={angleId} className="text-[10px] text-muted-foreground block mb-1">Angle (°)</label>
+            <input
+              id={angleId}
+              type="number"
+              min="-180"
+              max="180"
+              step="5"
+              value={angleDeg}
+              onChange={onAngle}
+              className="w-full text-xs bg-muted px-1.5 py-0.5 rounded border-none text-right"
+            />
+          </div>
+          <div>
+            <label htmlFor={widthId} className="text-[10px] text-muted-foreground block mb-1">Width (px)</label>
+            <input
+              id={widthId}
+              type="number"
+              min="1"
+              max="16"
+              step="0.5"
+              value={sectionPlane.capStyle.widthPx}
+              onChange={onWidth}
+              className="w-full text-xs bg-muted px-1.5 py-0.5 rounded border-none text-right"
+            />
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+export default SectionCapControls;