@pascal-app/nodes 1.0.0-beta.5 → 1.0.0

package/dist/pipe-segment/selection.js

@@ -1,18 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { analyzePortConnectivity, PipeSegmentNode, pauseSceneHistory, resolveConnectivityUpdates, resumeSceneHistory, sceneRegistry, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
-import { DimensionPill, swallowNextClick, triggerSFX, useEditor } from '@pascal-app/editor';
+import { clearPlacementSurface, DimensionPill, isGridSnapActive, swallowNextClick, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Html } from '@react-three/drei';
 import { createPortal, useFrame, useThree } from '@react-three/fiber';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Plane, Raycaster, Vector2, Vector3 } from 'three';
+import { planRunEndCapFollowUpdates } from '../shared/automatic-run-end-cap';
 import { detectFittingEndpoint, planFittingEndpointReaim, } from '../shared/fitting-endpoint-reaim';
 import { PipeFittingGhost, PipeSegmentGhost } from '../shared/mep-ghost';
 import { planPipeRunTranslationOffsets } from '../shared/pipe-run-translation-offset';
 import { planVerticalOffsets } from '../shared/pipe-vertical-offset';
 import { collectScenePorts, DWV_PORT_SYSTEMS, findNearestPortXZ } from '../shared/ports';
-import { HandleCube, MoveChevron } from '../shared/selection-handles';
+import { ContinuePlusHandle, HandleCube, MoveChevron } from '../shared/selection-handles';
+import { refreshWallRunAttachment } from '../shared/wall-run-move';
+import { activatePipeContinuation, pipeContinuationHandlePlan, } from './continuation';
 /** Port-snap radius for dragged run endpoints (meters, XZ). */
 const PORT_SNAP_RADIUS_M = 0.4;
 const CENTER_ARROW_GAP = 0.28;
@@ -48,11 +51,10 @@ function pipeRadiusM(pipe) {
  * - **Alt** detaches: the joint breaks for this drag — the elbow does NOT
  *   re-aim and mated fittings / runs do NOT follow; the endpoint moves on its
  *   own (port re-mate still allowed so it can be reattached elsewhere).
- * - **Shift** bypasses grid snapping for a perfectly smooth precision drag.
+ * - Snapping follows the active editor snapping mode.
  *
- * History does the single-undo dance: paused during the drag (the live
- * `updateNode` ticks are untracked), then on release the path is
- * reverted, history resumed, and the final path applied as one tracked
+ * History is paused during the drag while live overrides drive the preview.
+ * On release, history resumes and the final path is applied as one tracked
  * change.
  */
 const PipeSegmentSelectionAffordance = () => {
@@ -90,6 +92,8 @@ const PipeSegmentSelectionAffordance = () => {
 };
 const PipePointHandles = ({ pipe, target }) => {
     const { camera, gl } = useThree();
+    const liveOverride = useLiveNodeOverrides((state) => state.overrides.get(pipe.id));
+    const displayPipe = liveOverride ? { ...pipe, ...liveOverride } : pipe;
     const outerRef = useRef(null);
     useFrame(() => {
         const outer = outerRef.current;
@@ -190,21 +194,54 @@ const PipePointHandles = ({ pipe, target }) => {
     // collar and the elbow swings to fit. Otherwise: the dragged point moves
     // and any mated fittings / runs translate via connectivity.
     const buildDragBatch = (drag, next, detached) => {
+        const wall = pipe.wallAttachment
+            ? useScene.getState().nodes[pipe.wallAttachment.wallId]
+            : undefined;
+        const attachmentFor = (path) => pipe.wallAttachment && wall?.type === 'wall'
+            ? refreshWallRunAttachment(path, pipe.wallAttachment, wall)
+            : pipe.wallAttachment;
+        const withEndCapFollow = (path, updates) => {
+            if (drag.index !== 0 && drag.index !== drag.initialPath.length - 1)
+                return updates;
+            const endpoint = drag.index === 0 ? 'start' : 'end';
+            const nextPipe = { ...pipe, path };
+            const capUpdates = planRunEndCapFollowUpdates(pipe, nextPipe, endpoint, useScene.getState().nodes);
+            const capIds = new Set(capUpdates.map((update) => update.id));
+            return [...updates.filter((update) => !capIds.has(update.id)), ...capUpdates];
+        };
         if (!detached && drag.fittingEndpoint) {
             const plan = planFittingEndpointReaim(drag.fittingEndpoint, drag.index, next);
             // Out of the elbow's buildable turn range — hold this frame.
             if (!plan)
                 return null;
-            return [
-                { id: pipe.id, data: { path: plan.path } },
+            return withEndCapFollow(plan.path, [
+                {
+                    id: pipe.id,
+                    data: { path: plan.path, wallAttachment: attachmentFor(plan.path) },
+                },
                 { id: plan.fittingUpdate.id, data: plan.fittingUpdate.data },
-            ];
+                ...(drag.jointPartner
+                    ? [
+                        {
+                            id: drag.jointPartner.id,
+                            data: {
+                                path: drag.jointPartner.startPath.map((p, i) => i === (drag.index === 0 ? drag.jointPartner.startPath.length - 1 : 0)
+                                    ? drag.index === 0
+                                        ? plan.path[plan.path.length - 1]
+                                        : plan.path[0]
+                                    : p),
+                            },
+                        },
+                    ]
+                    : []),
+            ]);
         }
-        const path = pipe.path.map((p, i) => (i === drag.index ? next : p));
-        return [
-            { id: pipe.id, data: { path } },
+        const path = drag.initialPath.map((p, i) => (i === drag.index ? next : p));
+        const updates = [
+            { id: pipe.id, data: { path, wallAttachment: attachmentFor(path) } },
             ...(detached ? [] : connectivityUpdatesForPath(drag.connectivity, path)),
         ];
+        return detached ? updates : withEndCapFollow(path, updates);
     };
     /** World-space position of a local path point. */
     const toWorld = (p) => target.localToWorld(new Vector3(p[0], p[1], p[2]));
@@ -228,11 +265,32 @@ const PipePointHandles = ({ pipe, target }) => {
         const startPoint = initialPath[index];
         const connectivity = analyzePortConnectivity(pipe, useScene.getState().nodes);
         pauseSceneHistory(useScene);
+        const livePreviewIds = new Set();
+        const publishLivePreview = (updates) => {
+            const scene = useScene.getState();
+            const entries = updates
+                .filter((update) => scene.nodes[update.id])
+                .map((update) => [update.id, update.data]);
+            useLiveNodeOverrides.getState().setMany(entries);
+            for (const [id] of entries) {
+                livePreviewIds.add(id);
+                scene.markDirty(id);
+            }
+        };
+        const clearLivePreview = () => {
+            const scene = useScene.getState();
+            const overrides = useLiveNodeOverrides.getState();
+            for (const id of livePreviewIds) {
+                overrides.clear(id);
+                if (scene.nodes[id])
+                    scene.markDirty(id);
+            }
+        };
         useViewer.getState().setInputDragging(true);
         document.body.style.cursor = kind.axis === 'y' ? 'ns-resize' : 'grabbing';
         setDraggingIndex(index);
         const isEndpoint = index === 0 || index === initialPath.length - 1;
-        const swings = kind.axis === 'y' ? kind.along !== true : !kind.along;
+        const swings = kind.axis === 'y' ? kind.along !== true : kind.axis === 'horizontal' && !kind.along;
         const neighborIndex = index === 0 ? 1 : index === initialPath.length - 1 ? index - 1 : null;
         const pivot = neighborIndex !== null ? initialPath[neighborIndex] : null;
         const radius = pivot
@@ -247,17 +305,20 @@ const PipePointHandles = ({ pipe, target }) => {
         const fittingEndpoint = isEndpoint
             ? detectFittingEndpoint('pipe-segment', initialPath, index, useScene.getState().nodes)
             : null;
+        const partnerId = fittingEndpoint?.fitting.metadata?.altJoint
+            ? fittingEndpoint.fitting.metadata.partnerIds?.find((id) => id !== pipe.id)
+            : undefined;
+        const partner = partnerId ? useScene.getState().nodes[partnerId] : undefined;
         const onMove = (event) => {
             const drag = dragRef.current;
             if (!drag)
                 return;
-            // Shift = precision: bypass grid snapping for a perfectly smooth
-            // drag (snap() is a no-op at step 0).
-            const step = event.shiftKey ? 0 : useEditor.getState().gridSnapStep;
+            // Follow the active snapping mode; Shift cycles that mode globally.
+            const step = isGridSnapActive() ? useEditor.getState().gridSnapStep : 0;
             // Alt = detach: break the joint for this drag — the endpoint moves on
             // its own, no elbow re-aim and no connectivity follow (it can still
             // port-snap to re-mate elsewhere). Mirrors the wall corner drag.
-            const detached = event.altKey;
+            const detached = event.altKey && !drag.jointPartner;
             let next = null;
             if (canSwing && pivot) {
                 const aim = kind.axis === 'y'
@@ -289,7 +350,10 @@ const PipePointHandles = ({ pipe, target }) => {
             if (!next)
                 return;
             if (isEndpoint && (detached || !drag.fittingEndpoint)) {
-                const port = findNearestPortXZ([next[0], next[1], next[2]], collectScenePorts({ excludeNodeId: pipe.id, systems: DWV_PORT_SYSTEMS }), PORT_SNAP_RADIUS_M);
+                const port = findNearestPortXZ([next[0], next[1], next[2]], collectScenePorts({
+                    excludeNodeId: pipe.id,
+                    systems: DWV_PORT_SYSTEMS,
+                }), PORT_SNAP_RADIUS_M);
                 if (port)
                     next = [port.position[0], port.position[1], port.position[2]];
             }
@@ -302,7 +366,7 @@ const PipePointHandles = ({ pipe, target }) => {
             drag.detached = detached;
             if (step > 0)
                 triggerSFX('sfx:grid-snap');
-            useScene.getState().updateNodes(batch);
+            publishLivePreview(batch);
         };
         const onUp = () => {
             const drag = dragRef.current;
@@ -312,30 +376,15 @@ const PipePointHandles = ({ pipe, target }) => {
             drag.cleanup();
             dragRef.current = null;
             setDraggingIndex(null);
-            // Single-undo dance: revert (still paused), resume, re-apply the final
-            // batch as one tracked change. The final batch is built the same way as
+            clearLivePreview();
+            // Resume history and apply the final batch as one tracked change. The
+            // final batch is built the same way as
             // each live frame (elbow re-aim, rigid connectivity follow, or — when
             // detached — just the pipe path).
             const detached = drag.detached;
+            const moved = drag.current.some((v, axis) => v !== drag.initialPath[drag.index][axis]);
             const finalBatch = buildDragBatch(drag, drag.current, detached);
-            // Revert the run AND whatever the drag carried to their pre-drag state
-            // while paused so history captures a clean before→after delta. When
-            // detached nothing else moved, so only the run needs reverting.
-            const revertUpdates = detached
-                ? []
-                : drag.fittingEndpoint
-                    ? [drag.fittingEndpoint.revert]
-                    : (drag.connectivity?.connections ?? []).map((conn) => conn.kind === 'rigid-node'
-                        ? { id: conn.nodeId, data: { position: conn.startPosition } }
-                        : { id: conn.nodeId, data: { path: conn.startPath } });
-            useScene
-                .getState()
-                .updateNodes([
-                { id: pipe.id, data: { path: drag.initialPath } },
-                ...revertUpdates.filter((u) => useScene.getState().nodes[u.id]),
-            ]);
             resumeSceneHistory(useScene);
-            const moved = drag.current.some((v, axis) => v !== drag.initialPath[drag.index][axis]);
             if (moved && finalBatch) {
                 useScene.getState().updateNodes(finalBatch);
             }
@@ -354,6 +403,9 @@ const PipePointHandles = ({ pipe, target }) => {
             cleanup,
             connectivity,
             fittingEndpoint,
+            jointPartner: partner?.type === 'pipe-segment'
+                ? { id: partner.id, startPath: partner.path.map((p) => [...p]) }
+                : undefined,
             detached: false,
         };
         window.addEventListener('pointermove', onMove);
@@ -366,14 +418,19 @@ const PipePointHandles = ({ pipe, target }) => {
         const initialPath = pipe.path.map((p) => [...p]);
         const center = runAxisAndCenter(pipe)?.center ?? initialPath[0];
         const anchorWorld = toWorld(center);
-        const profile = { diameter: pipe.diameter, pipeMaterial: pipe.pipeMaterial };
-        const nodesById = { ...useScene.getState().nodes };
+        const profile = {
+            diameter: pipe.diameter,
+            pipeMaterial: pipe.pipeMaterial,
+        };
+        const nodesById = {
+            ...useScene.getState().nodes,
+        };
         const connectivity = analyzePortConnectivity(pipe, nodesById);
         const scenePorts = collectScenePorts({
             excludeNodeId: pipe.id,
             systems: DWV_PORT_SYSTEMS,
         });
-        const previewDeletedSnapshots = new Map();
+        const previewHiddenIds = new Set();
         pauseSceneHistory(useScene);
         const ensureSceneObjectsVisible = (ids) => {
             const scene = useScene.getState();
@@ -404,29 +461,30 @@ const PipePointHandles = ({ pipe, target }) => {
             }
         };
         const clearLivePreview = () => {
+            const scene = useScene.getState();
             const overrides = useLiveNodeOverrides.getState();
-            for (const id of livePreviewIds)
+            for (const id of livePreviewIds) {
                 overrides.clear(id);
+                if (scene.nodes[id])
+                    scene.markDirty(id);
+            }
             livePreviewIds.clear();
         };
-        const restorePreviewDeleted = (keepDeleted = []) => {
-            const keep = new Set(keepDeleted);
-            const scene = useScene.getState();
-            const create = [];
-            for (const [id, node] of previewDeletedSnapshots) {
-                if (keep.has(id))
+        const setPreviewHidden = (ids) => {
+            const next = new Set(ids);
+            for (const id of previewHiddenIds) {
+                if (next.has(id))
                     continue;
-                if (!scene.nodes[id]) {
-                    create.push({
-                        node,
-                        parentId: (node.parentId ?? undefined),
-                    });
-                }
-                previewDeletedSnapshots.delete(id);
+                const object = sceneRegistry.nodes.get(id);
+                if (object)
+                    object.visible = true;
+                previewHiddenIds.delete(id);
             }
-            if (create.length > 0) {
-                scene.applyNodeChanges({ create });
-                ensureSceneObjectsVisible(create.map(({ node }) => node.id));
+            for (const id of next) {
+                const object = sceneRegistry.nodes.get(id);
+                if (object)
+                    object.visible = false;
+                previewHiddenIds.add(id);
             }
         };
         const sample = (clientX, clientY) => {
@@ -463,10 +521,15 @@ const PipePointHandles = ({ pipe, target }) => {
         const partnerReverts = () => (connectivity?.connections ?? [])
             .map((conn) => {
             if (conn.kind !== 'rigid-node') {
-                return { id: conn.nodeId, data: { path: conn.startPath } };
+                return {
+                    id: conn.nodeId,
+                    data: { path: conn.startPath },
+                };
             }
             const start = nodesById[conn.nodeId];
-            const data = { position: conn.startPosition };
+            const data = {
+                position: conn.startPosition,
+            };
             if (start?.rotation !== undefined)
                 data.rotation = start.rotation;
             if (start?.angle !== undefined)
@@ -480,7 +543,7 @@ const PipePointHandles = ({ pipe, target }) => {
             const s = sample(event.clientX, event.clientY);
             if (s === null)
                 return;
-            const step = event.shiftKey ? 0 : useEditor.getState().gridSnapStep;
+            const step = isGridSnapActive() ? useEditor.getState().gridSnapStep : 0;
             const next = snap(s - startSample, step);
             if (next === delta)
                 return;
@@ -502,12 +565,7 @@ const PipePointHandles = ({ pipe, target }) => {
                 const plan = offsetResult.plan;
                 const scene = useScene.getState();
                 const deletePreview = (plan.delete ?? []).filter((id) => scene.nodes[id]);
-                for (const id of deletePreview) {
-                    const node = scene.nodes[id];
-                    if (node)
-                        previewDeletedSnapshots.set(id, node);
-                }
-                restorePreviewDeleted(plan.delete ?? []);
+                setPreviewHidden(deletePreview);
                 const followUpdates = connectivityUpdatesForPath(connectivity, plan.followPath);
                 const updates = [
                     { id: pipe.id, data: { path: plan.pipePath } },
@@ -515,28 +573,30 @@ const PipePointHandles = ({ pipe, target }) => {
                     ...followUpdates,
                 ];
                 publishLivePreview(updates);
-                scene.applyNodeChanges({ delete: deletePreview, update: updates });
-                ensureSceneObjectsVisible(updates.map((update) => update.id));
-                setVerticalGhost({ tint: 'valid', fittings: plan.fittings, risers: plan.risers });
+                setVerticalGhost({
+                    tint: 'valid',
+                    fittings: plan.fittings,
+                    risers: plan.risers,
+                });
             }
             else if (offsetResult?.status === 'invalid') {
-                restorePreviewDeleted();
+                setPreviewHidden([]);
                 const updates = [
                     { id: pipe.id, data: { path: pipe.path } },
                     ...partnerReverts(),
                 ];
                 publishLivePreview(updates);
-                useScene.getState().updateNodes(updates);
-                const lifted = PipeSegmentNode.parse({ ...pipe, path: shiftedPath(next) });
+                const lifted = PipeSegmentNode.parse({
+                    ...pipe,
+                    path: shiftedPath(next),
+                });
                 setVerticalGhost({ tint: 'invalid', fittings: [], risers: [lifted] });
             }
             else {
-                restorePreviewDeleted();
+                setPreviewHidden([]);
                 setVerticalGhost(null);
                 const updates = batchFor(shiftedPath(next));
                 publishLivePreview(updates);
-                useScene.getState().updateNodes(updates);
-                ensureSceneObjectsVisible(updates.map((update) => update.id));
             }
         };
         const onUp = () => {
@@ -545,27 +605,12 @@ const PipePointHandles = ({ pipe, target }) => {
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onUp);
             useViewer.getState().setInputDragging(false);
+            clearPlacementSurface();
             document.body.style.cursor = '';
             setRunMoving(false);
             setVerticalGhost(null);
             clearLivePreview();
-            const restore = useScene.getState();
-            const restoredPreviewNodes = Array.from(previewDeletedSnapshots.values()).filter((node) => !restore.nodes[node.id]);
-            const restoreUpdates = [
-                { id: pipe.id, data: { path: initialPath } },
-                ...partnerReverts(),
-            ];
-            restore.applyNodeChanges({
-                create: restoredPreviewNodes.map((node) => ({
-                    node,
-                    parentId: (node.parentId ?? undefined),
-                })),
-                update: restoreUpdates,
-            });
-            ensureSceneObjectsVisible([
-                ...restoredPreviewNodes.map((node) => node.id),
-                ...restoreUpdates.map((update) => update.id),
-            ]);
+            setPreviewHidden([]);
             resumeSceneHistory(useScene);
             if (delta === 0)
                 return;
@@ -607,11 +652,17 @@ const PipePointHandles = ({ pipe, target }) => {
             if (translationPlan) {
                 const created = [...translationPlan.fittings, ...translationPlan.connectors];
                 const updates = [
-                    { id: pipe.id, data: { path: translationPlan.pipePath } },
+                    {
+                        id: pipe.id,
+                        data: { path: translationPlan.pipePath },
+                    },
                     ...translationPlan.updates,
                 ];
                 scene.applyNodeChanges({
-                    create: created.map((node) => ({ node: node, parentId })),
+                    create: created.map((node) => ({
+                        node: node,
+                        parentId,
+                    })),
                     update: updates,
                 });
                 ensureSceneObjectsVisible([
@@ -628,19 +679,19 @@ const PipePointHandles = ({ pipe, target }) => {
         window.addEventListener('pointerup', onUp);
         window.addEventListener('pointercancel', onUp);
     };
-    const cornerArrows = useMemo(() => getCornerArrows(pipe), [pipe]);
-    const runCenter = useMemo(() => runAxisAndCenter(pipe)?.center ?? null, [pipe]);
+    const cornerArrows = useMemo(() => getCornerArrows(displayPipe), [displayPipe]);
+    const runCenter = useMemo(() => runAxisAndCenter(displayPipe)?.center ?? null, [displayPipe]);
     const runCenterYaw = useMemo(() => {
-        const axis = runAxisAndCenter(pipe);
+        const axis = runAxisAndCenter(displayPipe);
         if (!axis || Math.hypot(axis.dir[0], axis.dir[2]) < 1e-6)
             return 0;
         return Math.atan2(-axis.dir[2], axis.dir[0]);
-    }, [pipe]);
+    }, [displayPipe]);
     const centerArrows = useMemo(() => {
         if (!runCenter)
             return [];
-        const base = Math.max(pipeRadiusM(pipe) + CENTER_ARROW_GAP, CENTER_ARROW_MIN_OFFSET);
-        const axis = runAxisAndCenter(pipe);
+        const base = Math.max(pipeRadiusM(displayPipe) + CENTER_ARROW_GAP, CENTER_ARROW_MIN_OFFSET);
+        const axis = runAxisAndCenter(displayPipe);
         const t = axis && Math.hypot(axis.dir[0], axis.dir[2]) > 1e-6
             ? (() => {
                 const len = Math.hypot(axis.dir[0], axis.dir[2]);
@@ -677,19 +728,22 @@ const PipePointHandles = ({ pipe, target }) => {
             cursor: 'ns-resize',
         });
         return arrows;
-    }, [pipe, runCenter]);
+    }, [displayPipe, runCenter]);
     return (_jsxs("group", { ref: outerRef, children: [verticalGhost?.fittings.map((f) => (_jsx(PipeFittingGhost, { fitting: f, tint: verticalGhost.tint }, `pipe-vghost-fit-${f.id}`))), verticalGhost?.risers.map((r) => (_jsx(PipeSegmentGhost, { pipe: r, tint: verticalGhost.tint }, `pipe-vghost-riser-${r.id}`))), draggingIndex === null &&
                 !runMoving &&
-                pipe.path.map((p, i) => (_jsxs("group", { children: [_jsx(HandleCube, { active: openCluster === i, onClick: () => toggleCluster(i), position: p, rotationY: vertexYaw(pipe, i) }), openCluster === i &&
+                openCluster === null &&
+                ['start', 'end'].map((endpoint) => (_jsx(PipeContinuationHandle, { endpoint: endpoint, pipe: displayPipe }, endpoint))), draggingIndex === null &&
+                !runMoving &&
+                displayPipe.path.map((p, i) => (_jsxs("group", { children: [_jsx(HandleCube, { active: openCluster === i, onClick: () => toggleCluster(i), position: p, rotationY: vertexYaw(displayPipe, i) }), openCluster === i &&
                             cornerArrows
                                 .filter((a) => a.index === i)
                                 .map((a) => (_jsx(MoveChevron, { cursor: a.cursor, onPointerDown: onHandleDown(a.index, a.kind), position: a.position, rotationY: a.rotationY, vertical: a.vertical }, a.key)))] }, `pipe-vtx${i}`))), draggingIndex === null && !runMoving && runCenter && (_jsxs("group", { children: [_jsx(HandleCube, { active: openCluster === 'center', onClick: () => toggleCluster('center'), position: runCenter, rotationY: runCenterYaw }), openCluster === 'center' &&
                         centerArrows.map((a) => (_jsx(MoveChevron, { cursor: a.cursor, onPointerDown: onRunMoveDown(a.kind), position: a.position, rotationY: a.rotationY, vertical: a.vertical }, a.key)))] })), draggingIndex !== null &&
-                pipe.path[draggingIndex] &&
+                displayPipe.path[draggingIndex] &&
                 (() => {
                     // Same pill as the draw tool: signed per-axis deltas from the
                     // drag-start position, dominant axis emphasised.
-                    const point = pipe.path[draggingIndex];
+                    const point = displayPipe.path[draggingIndex];
                     const origin = dragRef.current?.initialPath[draggingIndex] ?? point;
                     const deltas = [point[0] - origin[0], point[1] - origin[1], point[2] - origin[2]];
                     const axes = ['x', 'y', 'z'];
@@ -702,6 +756,16 @@ const PipePointHandles = ({ pipe, target }) => {
                             })), primary: primary, unit: unit }) }));
                 })()] }));
 };
+function PipeContinuationHandle({ pipe, endpoint, }) {
+    const nodes = useScene((state) => state.nodes);
+    const plan = pipeContinuationHandlePlan(pipe, endpoint, nodes);
+    if (!plan)
+        return null;
+    return (_jsx(ContinuePlusHandle, { onActivate: () => {
+            triggerSFX('sfx:item-pick');
+            activatePipeContinuation(pipe, endpoint, plan.fittingId);
+        }, position: plan.position }));
+}
 function getCornerArrows(pipe) {
     const arrows = [];
     const base = Math.max(pipeRadiusM(pipe) + CENTER_ARROW_GAP, CENTER_ARROW_MIN_OFFSET);

package/dist/pipe-segment/slope.d.ts

@@ -0,0 +1,5 @@
+type Point = readonly [number, number, number];
+export declare function pipeGrade(start: Point, end: Point): number | null;
+export declare function applyPipeGrade(start: Point, end: Point, grade: number): [number, number, number];
+export {};
+//# sourceMappingURL=slope.d.ts.map

package/dist/pipe-segment/slope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slope.d.ts","sourceRoot":"","sources":["../../src/pipe-segment/slope.ts"],"names":[],"mappings":"AAAA,KAAK,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAE9C,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAGjE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAIhG"}

package/dist/pipe-segment/slope.js

@@ -0,0 +1,10 @@
+export function pipeGrade(start, end) {
+    const horizontal = Math.hypot(end[0] - start[0], end[2] - start[2]);
+    return horizontal < 1e-6 ? null : (start[1] - end[1]) / horizontal;
+}
+export function applyPipeGrade(start, end, grade) {
+    const horizontal = Math.hypot(end[0] - start[0], end[2] - start[2]);
+    if (horizontal < 1e-6 || !Number.isFinite(grade))
+        return [...end];
+    return [end[0], start[1] - horizontal * grade, end[2]];
+}

package/dist/pipe-segment/tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/pipe-segment/tool.tsx"],"names":[],"mappings":"AAyIA,QAAA,MAAM,eAAe,0CAujBpB,CAAA;AAkCD,eAAe,eAAe,CAAA"}
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/pipe-segment/tool.tsx"],"names":[],"mappings":"AA+DA,QAAA,MAAM,eAAe,0CA2bpB,CAAA;AA8BD,eAAe,eAAe,CAAA"}