@ifc-lite/viewer 1.22.0 → 1.23.0

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

@@ -0,0 +1,242 @@
+/* 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/. */
+
+/**
+ * Live SVG preview for the Split tool. Mounted by `ToolOverlays`
+ * while `activeTool === 'split'`. Branches by element type:
+ *
+ *   Wall / beam / column / member  (single-click):
+ *     Perpendicular guide line through the projected cut point,
+ *     "distance / length" readout. State driven by
+ *     `splitHoverPoint` / `splitHoverAxisDirection` /
+ *     `splitHoverDistance` / `splitHoverLength`.
+ *
+ *   Slab / roof / plate / space  (two-click):
+ *     Outline the polygon footprint with a faint purple stroke.
+ *     Before the first click: hint chip says "click to start cut".
+ *     After the first click: ghost line from anchor → cursor,
+ *     drawn straight through the polygon (the actual extent is
+ *     clamped by polygon-clip at commit).
+ *
+ * Same camera-tracking RAF trick the GizmoOverlay uses, so the
+ * preview tracks the element through orbit / zoom without
+ * re-rendering on every camera frame.
+ */
+
+import { useViewerStore } from '@/store';
+import { useCameraTickSubscription } from '@/hooks/useCameraTickSubscription';
+import { Slice as KnifeIcon } from 'lucide-react';
+
+type Vec2 = { x: number; y: number };
+type Vec3 = { x: number; y: number; z: number };
+type Project = (worldPos: Vec3) => Vec2 | null;
+
+const GUIDE_COLOR = '#a855f7'; // purple-500 — matches edit-mode pill
+const GUIDE_HALF_LENGTH_PX = 30;
+
+/** Storey-local 2D → renderer Y-up world point at the storey floor. */
+function ifc2dToRendererWorld(p: [number, number], storeyElevation: number): Vec3 {
+  return { x: p[0], y: storeyElevation, z: -p[1] };
+}
+
+export function SplitOverlay() {
+  const activeTool = useViewerStore((s) => s.activeTool);
+  const splitMode = useViewerStore((s) => s.splitMode);
+  const splitHoverPoint = useViewerStore((s) => s.splitHoverPoint);
+  const splitHoverDistance = useViewerStore((s) => s.splitHoverDistance);
+  const splitHoverLength = useViewerStore((s) => s.splitHoverLength);
+  const splitHoverCutPoint = useViewerStore((s) => s.splitHoverCutPoint);
+  const splitHoverAxisDirection = useViewerStore((s) => s.splitHoverAxisDirection);
+  const splitTargetModelId = useViewerStore((s) => s.splitTargetModelId);
+  const splitTargetExpressId = useViewerStore((s) => s.splitTargetExpressId);
+  const slabCutAnchor = useViewerStore((s) => s.slabCutAnchor);
+  const slabCutFootprint = useViewerStore((s) => s.slabCutFootprint);
+  const slabCutStoreyElevation = useViewerStore((s) => s.slabCutStoreyElevation);
+  const readSlabFootprint = useViewerStore((s) => s.readSlabFootprint);
+  const projectToScreen = useViewerStore((s) => s.cameraCallbacks.projectToScreen);
+  const getViewpoint = useViewerStore((s) => s.cameraCallbacks.getViewpoint);
+
+  // Camera-tick subscription — wakes the overlay when the camera
+  // moves so the preview tracks the element through orbit / zoom.
+  // Skipped when nothing is hovered (idle Split tool with no cursor
+  // over an element is free of per-frame work).
+  const active =
+    activeTool === 'split' &&
+    (splitMode === 'aiming' || splitMode === 'first-anchor') &&
+    splitHoverPoint !== null;
+  void useCameraTickSubscription(getViewpoint, active);
+
+  // Hint chip when idle (tool armed, nothing under cursor).
+  if (activeTool === 'split' && !active) {
+    return (
+      <div
+        className="absolute bottom-4 left-1/2 -translate-x-1/2 pointer-events-none z-30
+          flex items-center gap-2 px-3 py-1.5 rounded-full
+          bg-purple-600/95 text-white text-xs shadow-lg"
+        role="status"
+      >
+        <KnifeIcon className="h-3.5 w-3.5" />
+        <span>Move the cursor to set the cut point on the selected element — Esc to exit</span>
+      </div>
+    );
+  }
+  if (!active || !projectToScreen) return null;
+
+  const project = projectToScreen as Project;
+
+  // Branch: slab two-click flow vs single-click linear/wall flow.
+  // The discriminator is whether we have a slab footprint cached
+  // (first-anchor or fresh hover); if not, fall through to the
+  // single-click rendering.
+  const slabFootprint = slabCutFootprint
+    ?? (splitTargetModelId !== null && splitTargetExpressId !== null
+        ? readSlabFootprint(splitTargetModelId, splitTargetExpressId)?.footprint ?? null
+        : null);
+  const storeyElevation = slabCutStoreyElevation
+    ?? (splitTargetModelId !== null && splitTargetExpressId !== null
+        ? readSlabFootprint(splitTargetModelId, splitTargetExpressId)?.storeyElevation ?? 0
+        : 0);
+
+  if (slabFootprint) {
+    // Slab path. Project every footprint vertex; build a polygon.
+    const screenVerts = slabFootprint
+      .map((p) => project(ifc2dToRendererWorld(p, storeyElevation)))
+      .filter((v): v is Vec2 => v !== null);
+    if (screenVerts.length < 3) return null;
+    const path = screenVerts.map((v, i) => `${i === 0 ? 'M' : 'L'}${v.x} ${v.y}`).join(' ') + ' Z';
+
+    // Cursor as storey-local 2D — splitHoverCutPoint is the 3D
+    // form; we want X/Y for the ghost line endpoint.
+    const cursorXy: [number, number] | null = splitHoverCutPoint
+      ? [splitHoverCutPoint[0], splitHoverCutPoint[1]]
+      : null;
+    const anchorScreen = slabCutAnchor
+      ? project(ifc2dToRendererWorld(slabCutAnchor, storeyElevation))
+      : null;
+    const cursorScreen = cursorXy
+      ? project(ifc2dToRendererWorld(cursorXy, storeyElevation))
+      : null;
+
+    return (
+      <svg className="absolute inset-0 pointer-events-none z-30" style={{ overflow: 'visible' }}>
+        <path
+          d={path}
+          fill={GUIDE_COLOR}
+          fillOpacity={0.08}
+          stroke={GUIDE_COLOR}
+          strokeWidth={1.5}
+          strokeDasharray="4 4"
+        />
+        {anchorScreen && (
+          <circle
+            cx={anchorScreen.x}
+            cy={anchorScreen.y}
+            r={5}
+            fill="#fff"
+            stroke={GUIDE_COLOR}
+            strokeWidth={2.5}
+          />
+        )}
+        {anchorScreen && cursorScreen && (
+          <line
+            x1={anchorScreen.x}
+            y1={anchorScreen.y}
+            x2={cursorScreen.x}
+            y2={cursorScreen.y}
+            stroke={GUIDE_COLOR}
+            strokeWidth={3}
+            strokeLinecap="round"
+          />
+        )}
+        {cursorScreen && (
+          <circle
+            cx={cursorScreen.x}
+            cy={cursorScreen.y}
+            r={4}
+            fill="#fff"
+            stroke={GUIDE_COLOR}
+            strokeWidth={2}
+          />
+        )}
+      </svg>
+    );
+  }
+
+  // Single-click element split (wall / beam / column / member).
+  if (!splitHoverPoint || splitHoverDistance === null || splitHoverLength === null) {
+    return null;
+  }
+  const cutWorld: Vec3 = { x: splitHoverPoint[0], y: splitHoverPoint[1], z: splitHoverPoint[2] };
+  const cutScreen = project(cutWorld);
+  if (!cutScreen) return null;
+
+  // Build the perpendicular guide from the slice-provided IFC axis.
+  let guideDx = 0;
+  let guideDy = -1;
+  if (splitTargetModelId !== null && splitHoverAxisDirection) {
+    const [ax, ay, az] = splitHoverAxisDirection;
+    const farScreen = project({
+      x: cutWorld.x + ax,
+      y: cutWorld.y + az,
+      z: cutWorld.z - ay,
+    });
+    if (farScreen) {
+      const axisDx = farScreen.x - cutScreen.x;
+      const axisDy = farScreen.y - cutScreen.y;
+      const len = Math.hypot(axisDx, axisDy);
+      if (len > 1e-3) {
+        // Perpendicular in screen space is (-dy, dx).
+        guideDx = -axisDy / len;
+        guideDy = axisDx / len;
+      }
+    }
+  }
+
+  const gx1 = cutScreen.x - guideDx * GUIDE_HALF_LENGTH_PX;
+  const gy1 = cutScreen.y - guideDy * GUIDE_HALF_LENGTH_PX;
+  const gx2 = cutScreen.x + guideDx * GUIDE_HALF_LENGTH_PX;
+  const gy2 = cutScreen.y + guideDy * GUIDE_HALF_LENGTH_PX;
+  const labelText = `${splitHoverDistance.toFixed(2)} / ${splitHoverLength.toFixed(2)} m`;
+
+  return (
+    <svg className="absolute inset-0 pointer-events-none z-30" style={{ overflow: 'visible' }}>
+      <line
+        x1={gx1}
+        y1={gy1}
+        x2={gx2}
+        y2={gy2}
+        stroke={GUIDE_COLOR}
+        strokeWidth={3}
+        strokeLinecap="round"
+        opacity={0.95}
+      />
+      <circle
+        cx={cutScreen.x}
+        cy={cutScreen.y}
+        r={5}
+        fill="#fff"
+        stroke={GUIDE_COLOR}
+        strokeWidth={2.5}
+      />
+      <rect
+        x={cutScreen.x + 12}
+        y={cutScreen.y - 22}
+        width={Math.max(70, labelText.length * 7 + 12)}
+        height={18}
+        rx={3}
+        fill={GUIDE_COLOR}
+        opacity={0.95}
+      />
+      <text
+        x={cutScreen.x + 18}
+        y={cutScreen.y - 9}
+        fontSize={11}
+        fontFamily="ui-monospace, SFMono-Regular, monospace"
+        fill="#fff"
+      >
+        {labelText}
+      </text>
+    </svg>
+  );
+}

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

@@ -0,0 +1,252 @@
+/* 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/. */
+
+/**
+ * Endpoint drag handles for a selected rectangular-profile wall.
+ * Renders two SVG circles at the wall's storey-floor start and end
+ * points; dragging either projects the cursor back onto the storey
+ * floor plane and commits a `resizeWall` mutation in IFC frame.
+ *
+ * Gating:
+ *   - `editEnabled` is on
+ *   - `activeTool === 'select'`
+ *   - selected entity is a wall (`IfcWall`) with a resolvable wall
+ *     edit chain — `readWallEndpoints` returning non-null is the gate
+ *
+ * Source-buffer walls (loaded from a parsed IFC, not added via
+ * `addWallToStore`) may or may not have the rectangle-profile shape
+ * the resize action expects. The handles surface only when the chain
+ * resolves, so the user never grabs a handle that can't commit.
+ *
+ * Drag math:
+ *   The two endpoints live in IFC storey-local (Z-up) space. The
+ *   renderer is Y-up. To project cursor → world point on the storey
+ *   floor, we use the renderer's existing `raycastStoreyFloor`
+ *   helper (re-exported via `selectionHandlers`) — same fallback used
+ *   by the wall draw tool, so snapping and floor-plane semantics
+ *   match. Result is in renderer frame; we convert to IFC via
+ *   `rendererPointToIfcStoreyLocal`.
+ *
+ * We commit one `resizeWall` call per pointer-move frame. The action
+ * pushes four positional mutations onto the undo stack (start, dir,
+ * profile length, profile origin) so each drag frame is a coarse but
+ * recoverable step. Future polish: a batched-mutation primitive that
+ * folds the four into one undo entry.
+ */
+
+import { useMemo, useRef } from 'react';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+import { useCameraTickSubscription } from '@/hooks/useCameraTickSubscription';
+import { rendererPointToIfcStoreyLocal } from '../selectionHandlers';
+
+type Vec2 = { x: number; y: number };
+type Vec3 = { x: number; y: number; z: number };
+type Project = (worldPos: Vec3) => Vec2 | null;
+
+const HANDLE_RADIUS = 7;
+const HANDLE_COLOR = '#a855f7'; // purple-500 — matches edit-mode accent
+
+/**
+ * Convert an IFC storey-local point (Z-up, metres) into a renderer
+ * world-frame point (Y-up). Mirror of `rendererPointToIfcStoreyLocal`.
+ * We don't apply storey elevation here — `readWallEndpoints` returns
+ * points in storey-local space (Z = 0 for a planar wall) and the
+ * storey's own placement carries the elevation. To project to screen
+ * we ride on top of the entity bbox path: bbox center already in
+ * renderer frame is what selectionHandlers uses; for the endpoints
+ * we add the storey elevation explicitly.
+ */
+function ifcStoreyLocalToRenderer(p: [number, number, number], storeyElevation: number): Vec3 {
+  // IFC Z-up storey-local → renderer Y-up world:
+  //   renderer.x =  ifc.x
+  //   renderer.y =  ifc.z + storeyElevation
+  //   renderer.z = -ifc.y
+  return { x: p[0], y: p[2] + storeyElevation, z: -p[1] };
+}
+
+interface ActiveDrag {
+  end: 'start' | 'end';
+  /** Cached counterpart endpoint that stays fixed during the drag. */
+  fixedIfc: [number, number, number];
+  storeyElevation: number;
+}
+
+export function WallEndpointOverlay() {
+  const editEnabled = useViewerStore((s) => s.editEnabled);
+  const activeTool = useViewerStore((s) => s.activeTool);
+  const selectedEntity = useViewerStore((s) => s.selectedEntity);
+  const projectToScreen = useViewerStore((s) => s.cameraCallbacks.projectToScreen);
+  const getViewpoint = useViewerStore((s) => s.cameraCallbacks.getViewpoint);
+  const readWallEndpoints = useViewerStore((s) => s.readWallEndpoints);
+  const resizeWall = useViewerStore((s) => s.resizeWall);
+  const mutationVersion = useViewerStore((s) => s.mutationVersion);
+  const { models } = useIfc();
+
+  const dragRef = useRef<ActiveDrag | null>(null);
+
+  // Discover the wall's endpoints + storey elevation. Re-resolves on
+  // every mutation so any other mutation (translate, rotate) updates
+  // the handles. Returns null when the entity isn't a resizable wall.
+  const endpoints = useMemo(() => {
+    if (!editEnabled || activeTool !== 'select') return null;
+    if (!selectedEntity) return null;
+    const wall = readWallEndpoints(selectedEntity.modelId, selectedEntity.expressId);
+    if (!wall) return null;
+    // Storey elevation — needed to project endpoints back into renderer
+    // world. Pulled from the model's spatial hierarchy so multi-model
+    // sessions stay correct.
+    const model = models.get(selectedEntity.modelId);
+    const dataStore = model?.ifcDataStore;
+    const hierarchy = dataStore?.spatialHierarchy;
+    const storeyId = hierarchy?.elementToStorey.get(selectedEntity.expressId);
+    const storeyElevation =
+      (storeyId !== undefined ? hierarchy?.storeyElevations?.get(storeyId) : undefined) ?? 0;
+    return {
+      modelId: selectedEntity.modelId,
+      expressId: selectedEntity.expressId,
+      start: wall.start,
+      end: wall.end,
+      storeyElevation,
+    };
+    // mutationVersion forces re-resolution after any edit so handles
+    // track live. Camera moves don't change endpoints — the
+    // `useCameraTickSubscription` below re-renders the host so the
+    // JSX projection refreshes without re-running this memo.
+  }, [
+    editEnabled,
+    activeTool,
+    selectedEntity,
+    models,
+    readWallEndpoints,
+    mutationVersion,
+  ]);
+
+  // Camera-tick subscription — wakes the overlay on real viewpoint
+  // motion so the projection stays aligned. Skipped when the overlay
+  // isn't visible.
+  void useCameraTickSubscription(getViewpoint, endpoints !== null);
+
+  if (!endpoints || !projectToScreen) return null;
+  const project = projectToScreen as Project;
+
+  const startWorld = ifcStoreyLocalToRenderer(endpoints.start, endpoints.storeyElevation);
+  const endWorld = ifcStoreyLocalToRenderer(endpoints.end, endpoints.storeyElevation);
+  const startScreen = project(startWorld);
+  const endScreen = project(endWorld);
+  if (!startScreen || !endScreen) return null;
+
+  const startDrag = (which: 'start' | 'end', e: React.PointerEvent<SVGElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    (e.target as SVGElement).setPointerCapture(e.pointerId);
+    dragRef.current = {
+      end: which,
+      fixedIfc: which === 'start' ? endpoints.end : endpoints.start,
+      storeyElevation: endpoints.storeyElevation,
+    };
+  };
+
+  /**
+   * Unproject the cursor onto the storey floor plane and return the
+   * resulting point in IFC storey-local space. Uses the camera's
+   * `unprojectToFloor` callback (added in this PR) — same machinery
+   * as the addElement tool's floor-fallback, so behaviour matches.
+   */
+  const screenToFloorIfc = (clientX: number, clientY: number): [number, number, number] | null => {
+    const drag = dragRef.current;
+    if (!drag) return null;
+    const pickFn = useViewerStore.getState().cameraCallbacks.unprojectToFloor;
+    if (typeof pickFn !== 'function') return null;
+    const world = pickFn(clientX, clientY, drag.storeyElevation);
+    if (!world) return null;
+    return rendererPointToIfcStoreyLocal(world);
+  };
+
+  const onDragMove = (e: React.PointerEvent<SVGElement>) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const ifc = screenToFloorIfc(e.clientX, e.clientY);
+    if (!ifc) return;
+    const newStart = drag.end === 'start' ? ifc : drag.fixedIfc;
+    const newEnd = drag.end === 'end' ? ifc : drag.fixedIfc;
+    const result = resizeWall(endpoints.modelId, endpoints.expressId, newStart, newEnd);
+    if (!result.ok) {
+      // Most likely a zero-length drag (cursor over the fixed end).
+      // Don't toast every frame; just skip the write.
+      return;
+    }
+  };
+
+  const onDragEnd = (e: React.PointerEvent<SVGElement>) => {
+    if (!dragRef.current) return;
+    try {
+      (e.target as SVGElement).releasePointerCapture(e.pointerId);
+    } catch {
+      /* pointer already released — safe to ignore */
+    }
+    dragRef.current = null;
+  };
+
+  // Validate that the unproject callback exists once per render —
+  // if it doesn't, the handles are inert. Render them as a hint that
+  // the wall IS resizable; just warn the user once.
+  const hasUnproject =
+    typeof useViewerStore.getState().cameraCallbacks.unprojectToFloor === 'function';
+  if (!hasUnproject) {
+    // Quietly skip — no need to spam toast on every render. The
+    // numeric Move controls in GeometryEditCard still work.
+    return null;
+  }
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-30"
+      style={{ overflow: 'visible' }}
+    >
+      {/* Dashed axis line connecting the two handles — visual cue
+          that they belong to one wall and orient its sweep. */}
+      <line
+        x1={startScreen.x}
+        y1={startScreen.y}
+        x2={endScreen.x}
+        y2={endScreen.y}
+        stroke={HANDLE_COLOR}
+        strokeWidth={1.5}
+        strokeDasharray="4 4"
+        opacity={0.5}
+      />
+      {[
+        { which: 'start' as const, screen: startScreen },
+        { which: 'end' as const, screen: endScreen },
+      ].map(({ which, screen }) => (
+        <g key={which} style={{ pointerEvents: 'auto' }}>
+          {/* Generous hit area so users don't have to land pixel-perfect. */}
+          <circle
+            cx={screen.x}
+            cy={screen.y}
+            r={HANDLE_RADIUS + 6}
+            fill="transparent"
+            style={{ cursor: 'grab' }}
+            onPointerDown={(e) => startDrag(which, e)}
+            onPointerMove={onDragMove}
+            onPointerUp={onDragEnd}
+            onPointerCancel={onDragEnd}
+          />
+          {/* Visible handle. */}
+          <circle
+            cx={screen.x}
+            cy={screen.y}
+            r={HANDLE_RADIUS}
+            fill="#fff"
+            stroke={HANDLE_COLOR}
+            strokeWidth={2.5}
+            pointerEvents="none"
+          />
+        </g>
+      ))}
+    </svg>
+  );
+}
+

package/src/components/viewer/useGeometryStreaming.ts

@@ -30,13 +30,37 @@ export interface UseGeometryStreamingParams {
   /** Monotonic counter — triggers the streaming effect even when the geometry
    *  array reference is stable (incremental filtering reuses the same array). */
   geometryVersion?: number;
+  /**
+   * Monotonic counter that bumps whenever existing mesh data has been mutated
+   * in place (e.g. realignFederation rewrote vertex positions). Length-based
+   * triggers can't detect in-place mutation, so when this bumps we treat the
+   * incoming `geometry` as a fresh replacement and re-upload it to the GPU.
+   */
+  geometryContentVersion?: number;
   coordinateInfo?: CoordinateInfo;
   isStreaming: boolean;
   geometryBoundsRef: MutableRefObject<{ min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } }>;
   pendingMeshColorUpdates: Map<number, [number, number, number, number]> | null;
   pendingColorUpdates: Map<number, [number, number, number, number]> | null;
+  /**
+   * Authoring actions (split, delete) push globalIds here; the
+   * streaming loop drains them via `scene.removeMeshesForEntities`
+   * so tombstoned IFC entities disappear from the rendered scene
+   * (rather than just being hidden via `hiddenIds`). Cleared by
+   * the hook after the drain.
+   */
+  pendingMeshRemovals: Set<number> | null;
+  /**
+   * Per-entity translations queued by authoring actions (gizmo
+   * drag, numeric move). Drained by the streaming hook into
+   * `scene.translateMeshesForEntities` so the visible mesh
+   * follows the IFC coordinate mutation on the next frame.
+   */
+  pendingMeshTranslations: Map<number, [number, number, number]> | null;
   clearPendingMeshColorUpdates: () => void;
   clearPendingColorUpdates: () => void;
+  clearPendingMeshRemovals: () => void;
+  clearPendingMeshTranslations: () => void;
   clearColorRef: MutableRefObject<[number, number, number, number]>;
   releaseGeometryAfterFinalize?: boolean;
   onGeometryReleased?: () => void;
@@ -61,13 +85,18 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     isInitialized,
     geometry,
     geometryVersion,
+    geometryContentVersion,
     coordinateInfo,
     isStreaming,
     geometryBoundsRef,
     pendingMeshColorUpdates,
     pendingColorUpdates,
+    pendingMeshRemovals,
+    pendingMeshTranslations,
     clearPendingMeshColorUpdates,
     clearPendingColorUpdates,
+    clearPendingMeshRemovals,
+    clearPendingMeshTranslations,
     clearColorRef,
     releaseGeometryAfterFinalize = false,
     onGeometryReleased,
@@ -81,6 +110,7 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
   const finalBoundsRefittedRef = useRef(false);
   const cameraSnapshotRef = useRef<{ px: number; py: number; pz: number; tx: number; ty: number; tz: number } | null>(null);
   const prevIsStreamingRef = useRef(isStreaming);
+  const lastContentVersionRef = useRef(geometryContentVersion ?? 0);
   const queuePumpTimerRef = useRef<ReturnType<typeof globalThis.setTimeout> | null>(null);
 
   // Only activate the timer-based queue pump when the tab is background-throttled
@@ -142,6 +172,26 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
 
     const scene = renderer.getScene();
     const currentLength = geometry.length;
+
+    // In-place mutation detection: when geometryContentVersion bumps, mesh
+    // positions/normals were rewritten in place (e.g. realignFederation).
+    // Length-based classification can't catch this, so force a full reset and
+    // re-process the geometry from scratch so the GPU re-uploads buffers.
+    const contentVersion = geometryContentVersion ?? 0;
+    if (contentVersion !== lastContentVersionRef.current) {
+      lastContentVersionRef.current = contentVersion;
+      if (lastGeometryLengthRef.current > 0) {
+        traceGeometrySync(`geometry content version bumped → ${contentVersion}; re-uploading buffers`);
+        scene.clear();
+        processedMeshIdsRef.current.clear();
+        lastGeometryLengthRef.current = 0;
+        lastGeometryRef.current = null;
+      }
+    }
+
+    // Read AFTER the optional reset above so the classification below reflects
+    // the post-reset state (otherwise an in-place update gets misclassified as
+    // "no change" and returns early at currentLength === lastLength).
     const lastLength = lastGeometryLengthRef.current;
 
     // ── Classify the change ──
@@ -276,7 +326,7 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     }
 
     renderer.requestRender();
-  }, [geometry, geometryVersion, coordinateInfo, isInitialized, isStreaming]);
+  }, [geometry, geometryVersion, geometryContentVersion, coordinateInfo, isInitialized, isStreaming]);
 
   useEffect(() => {
     return () => {
@@ -394,6 +444,55 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     }
   }, [pendingMeshColorUpdates, isInitialized, clearPendingMeshColorUpdates]);
 
+  // ─── Mesh removals (split / delete) ───────────────────────────────────
+  // Authoring actions push globalIds into pendingMeshRemovals; drain
+  // here so the renderer actually drops them rather than leaving the
+  // mesh hidden via the visibility set. The bucket rebuild rides
+  // along on the existing rebuildPendingBatches path the streaming
+  // queue already exercises every frame.
+  useEffect(() => {
+    if (pendingMeshRemovals === null || !isInitialized) return;
+    const renderer = rendererRef.current;
+    if (!renderer) return;
+    const device = renderer.getGPUDevice();
+    const pipeline = renderer.getPipeline();
+    const scene = renderer.getScene();
+    if (!device || !pipeline) return;
+
+    if (pendingMeshRemovals.size > 0) {
+      scene.removeMeshesForEntities(pendingMeshRemovals);
+      if (scene.hasPendingBatches()) {
+        scene.rebuildPendingBatches(device, pipeline);
+      }
+      renderer.requestRender();
+    }
+    clearPendingMeshRemovals();
+  }, [pendingMeshRemovals, isInitialized, clearPendingMeshRemovals]);
+
+  // ─── Mesh translations (move / gizmo drag / numeric move) ────────────
+  // Drain the pending-translation map onto the renderer. Same
+  // rebuildPendingBatches ride-along; the in-place vertex update
+  // means a translate frame is one batch rebuild per affected
+  // bucket (typically one per entity).
+  useEffect(() => {
+    if (pendingMeshTranslations === null || !isInitialized) return;
+    const renderer = rendererRef.current;
+    if (!renderer) return;
+    const device = renderer.getGPUDevice();
+    const pipeline = renderer.getPipeline();
+    const scene = renderer.getScene();
+    if (!device || !pipeline) return;
+
+    if (pendingMeshTranslations.size > 0) {
+      scene.translateMeshesForEntities(pendingMeshTranslations);
+      if (scene.hasPendingBatches()) {
+        scene.rebuildPendingBatches(device, pipeline);
+      }
+      renderer.requestRender();
+    }
+    clearPendingMeshTranslations();
+  }, [pendingMeshTranslations, isInitialized, clearPendingMeshTranslations]);
+
   // ─── Lens color overlays ─────────────────────────────────────────────
   useEffect(() => {
     if (pendingColorUpdates === null || !isInitialized) return;

package/src/components/viewer/useMouseControls.ts

@@ -30,7 +30,7 @@ import {
   handleMeasureUp,
   updateMeasureScreenCoords,
 } from './measureHandlers.js';
-import { handleSelectionClick, handleContextMenu as handleContextMenuSelection, handleAddElementHover } from './selectionHandlers.js';
+import { handleSelectionClick, handleContextMenu as handleContextMenuSelection, handleAddElementHover, handleSplitHover } from './selectionHandlers.js';
 
 export interface MouseState {
   isDragging: boolean;
@@ -600,6 +600,13 @@ export function useMouseControls(params: UseMouseControlsParams): void {
         if (handleAddElementHover(ctx, x, y)) return;
       }
 
+      // Split-tool hover preview — projects the cursor onto the
+      // hovered wall's axis and pushes the cut distance into the
+      // store so SplitOverlay renders the perpendicular guide.
+      if (tool === 'split' && !mouseState.isDragging) {
+        if (handleSplitHover(ctx, x, y)) return;
+      }
+
       // Section tool face-pick: dwell-aware hover preview (issue #243
       // follow-up). Runs INSTEAD of the generic tooltip path while
       // pick mode is armed so the overlay stays the only signal under