@pascal-app/nodes 0.1.1

package/dist/fence/geometry.js

@@ -0,0 +1,65 @@
+import { getMaterialPresetByRef } from '@pascal-app/core';
+import { applyMaterialPresetToMaterials, createDefaultMaterial, createMaterial, createSurfaceRoleMaterial, generateFenceSlotGeometries, resolveMaterialRef, resolveSlotDefaultMaterial, } from '@pascal-app/viewer';
+import { FrontSide, Group, Mesh } from 'three';
+import { FENCE_SLOT_DEFAULTS } from './slots';
+const FENCE_SLOT_ORDER = ['posts', 'infill', 'base', 'rail'];
+const fenceMaterialCache = new Map();
+function getFenceSlotMaterial(node, slotId, shading, textures, colorPreset, sceneTheme, sceneMaterials) {
+    if (!textures) {
+        return createSurfaceRoleMaterial('joinery', colorPreset, FrontSide, sceneTheme);
+    }
+    const slotRef = node.slots?.[slotId];
+    if (slotRef) {
+        const resolved = resolveMaterialRef(slotRef, sceneMaterials, shading);
+        if (resolved)
+            return resolved;
+    }
+    if (node.materialPreset || node.material) {
+        return getLegacyFenceMaterial(node, shading);
+    }
+    return resolveSlotDefaultMaterial(FENCE_SLOT_DEFAULTS[slotId], shading, 0.8);
+}
+function getLegacyFenceMaterial(node, shading) {
+    const cacheKey = JSON.stringify({
+        shading,
+        material: node.material ?? null,
+        materialPreset: node.materialPreset ?? null,
+    });
+    const cached = fenceMaterialCache.get(cacheKey);
+    if (cached)
+        return cached;
+    const preset = getMaterialPresetByRef(node.materialPreset);
+    const material = preset
+        ? createDefaultMaterial('#ffffff', 0.5, shading)
+        : node.material
+            ? createMaterial(node.material, shading).clone()
+            : createDefaultMaterial('#ffffff', 0.9, shading);
+    if (preset) {
+        applyMaterialPresetToMaterials(material, preset);
+    }
+    const fenceMaterial = material;
+    fenceMaterial.transparent = false;
+    fenceMaterial.opacity = 1;
+    fenceMaterial.alphaMap = null;
+    fenceMaterial.side = FrontSide;
+    fenceMaterial.depthWrite = true;
+    fenceMaterial.needsUpdate = true;
+    fenceMaterialCache.set(cacheKey, material);
+    return material;
+}
+export function buildFenceGeometry(node, ctx, shading = 'rendered', textures = true, colorPreset = 'clay', sceneTheme) {
+    const group = new Group();
+    const geometries = generateFenceSlotGeometries(node);
+    for (const slotId of FENCE_SLOT_ORDER) {
+        const geometry = geometries[slotId];
+        if (geometry.getAttribute('position') === undefined)
+            continue;
+        const material = getFenceSlotMaterial(node, slotId, shading, textures, colorPreset, sceneTheme, ctx?.materials);
+        const mesh = new Mesh(geometry, material);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        mesh.userData.slotId = slotId;
+        group.add(mesh);
+    }
+    return group;
+}

package/dist/fence/index.d.ts

@@ -0,0 +1,3 @@
+export { fenceDefinition } from './definition';
+export { FenceNode } from './schema';
+//# sourceMappingURL=index.d.ts.map

package/dist/fence/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fence/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA"}

package/dist/fence/index.js

@@ -0,0 +1,2 @@
+export { fenceDefinition } from './definition';
+export { FenceNode } from './schema';

package/dist/fence/inspector-editors.d.ts

@@ -0,0 +1,24 @@
+import { type FenceNode } from '@pascal-app/core';
+/**
+ * Custom inspector editors for fence fields that don't map to a single
+ * node property in the canonical way:
+ *
+ * - **Length** is derived from `start`/`end`. Adjusting the slider
+ *   moves `end` along the existing direction so the fence resizes from
+ *   the start point. Matches the legacy `FencePanel`'s "Length" slider.
+ * - **Curve** is a slider on `curveOffset` with min/max bounded by the
+ *   chord length (per-node), normalized via `normalizeWallCurveOffset`.
+ *   Can't use a plain `number` field because the bounds change with
+ *   the fence's shape.
+ *
+ * Both are wired through `parametrics.fields[].kind: 'custom'`.
+ */
+export declare function FenceLengthEditor({ node, onUpdate, }: {
+    node: FenceNode;
+    onUpdate: (patch: Partial<FenceNode>) => void;
+}): import("react").JSX.Element;
+export declare function FenceCurveEditor({ node, onUpdate, }: {
+    node: FenceNode;
+    onUpdate: (patch: Partial<FenceNode>) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=inspector-editors.d.ts.map

package/dist/fence/inspector-editors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector-editors.d.ts","sourceRoot":"","sources":["../../src/fence/inspector-editors.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAA;AAGzB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAA;CAC9C,+BA8BA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAA;CAC9C,+BAgBA"}

package/dist/fence/inspector-editors.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClampedWallCurveOffset, getMaxWallCurveOffset, getWallCurveLength, normalizeWallCurveOffset, } from '@pascal-app/core';
+import { SliderControl } from '@pascal-app/editor';
+/**
+ * Custom inspector editors for fence fields that don't map to a single
+ * node property in the canonical way:
+ *
+ * - **Length** is derived from `start`/`end`. Adjusting the slider
+ *   moves `end` along the existing direction so the fence resizes from
+ *   the start point. Matches the legacy `FencePanel`'s "Length" slider.
+ * - **Curve** is a slider on `curveOffset` with min/max bounded by the
+ *   chord length (per-node), normalized via `normalizeWallCurveOffset`.
+ *   Can't use a plain `number` field because the bounds change with
+ *   the fence's shape.
+ *
+ * Both are wired through `parametrics.fields[].kind: 'custom'`.
+ */
+export function FenceLengthEditor({ node, onUpdate, }) {
+    const length = getWallCurveLength(node);
+    const handleChange = (newLength) => {
+        if (newLength <= 0)
+            return;
+        const dx = node.end[0] - node.start[0];
+        const dz = node.end[1] - node.start[1];
+        const currentLength = Math.sqrt(dx * dx + dz * dz);
+        if (currentLength === 0)
+            return;
+        const dirX = dx / currentLength;
+        const dirZ = dz / currentLength;
+        const newEnd = [
+            node.start[0] + dirX * newLength,
+            node.start[1] + dirZ * newLength,
+        ];
+        onUpdate({ end: newEnd });
+    };
+    return (_jsx(SliderControl, { label: "Length", max: 50, min: 0.1, onChange: handleChange, precision: 2, step: 0.01, unit: "m", value: length }));
+}
+export function FenceCurveEditor({ node, onUpdate, }) {
+    const curveOffset = getClampedWallCurveOffset(node);
+    const maxCurveOffset = getMaxWallCurveOffset(node);
+    return (_jsx(SliderControl, { label: "Curve", max: Math.max(0.01, maxCurveOffset), min: -Math.max(0.01, maxCurveOffset), onChange: (value) => onUpdate({ curveOffset: normalizeWallCurveOffset(node, value) }), precision: 2, step: 0.1, unit: "m", value: Math.round(curveOffset * 100) / 100 }));
+}

package/dist/fence/move-control-point-tool.d.ts

@@ -0,0 +1,9 @@
+import { type FenceNode } from '@pascal-app/core';
+export declare const MoveFenceControlPointTool: React.FC<{
+    target: {
+        fence: FenceNode;
+        index: number;
+    };
+}>;
+export default MoveFenceControlPointTool;
+//# sourceMappingURL=move-control-point-tool.d.ts.map

package/dist/fence/move-control-point-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-control-point-tool.d.ts","sourceRoot":"","sources":["../../src/fence/move-control-point-tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,SAAS,EAMf,MAAM,kBAAkB,CAAA;AAazB,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/C,MAAM,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5C,CAoGA,CAAA;AAED,eAAe,yBAAyB,CAAA"}

package/dist/fence/move-control-point-tool.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emitter, pauseSceneHistory, resumeSceneHistory, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { CursorSphere, getSegmentGridStep, isGridSnapActive, markToolCancelConsumed, snapScalarToGrid, triggerSFX, useInteractionScope, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { useEffect, useState } from 'react';
+export const MoveFenceControlPointTool = ({ target }) => {
+    const fenceId = target.fence.id;
+    const index = target.index;
+    const originalPath = target.fence.path ?? [];
+    const originalPoint = originalPath[index] ?? target.fence.start;
+    const [cursor, setCursor] = useState([
+        originalPoint[0],
+        0,
+        originalPoint[1],
+    ]);
+    useEffect(() => {
+        pauseSceneHistory(useScene);
+        let committed = false;
+        let lastPoint = [originalPoint[0], originalPoint[1]];
+        const buildPatch = (point) => {
+            const nextPath = originalPath.map((pathPoint, pathIndex) => pathIndex === index ? point : pathPoint);
+            const patch = { path: nextPath };
+            if (index === 0)
+                patch.start = point;
+            if (index === nextPath.length - 1)
+                patch.end = point;
+            return patch;
+        };
+        const previewPath = (point) => {
+            useLiveNodeOverrides.getState().set(fenceId, buildPatch(point));
+            useScene.getState().markDirty(fenceId);
+        };
+        const restore = () => {
+            useLiveNodeOverrides.getState().clear(fenceId);
+            useScene.getState().markDirty(fenceId);
+        };
+        const exit = (didCommit) => {
+            if (didCommit)
+                triggerSFX('sfx:item-place');
+            useViewer.getState().setSelection({ selectedIds: [fenceId] });
+            useInteractionScope
+                .getState()
+                .endIf((scope) => scope.kind === 'reshaping' &&
+                scope.reshape === 'control-point' &&
+                scope.nodeId === fenceId &&
+                scope.index === index);
+        };
+        const onGridMove = (event) => {
+            const step = isGridSnapActive() ? getSegmentGridStep() : 0;
+            const x = step > 0 ? snapScalarToGrid(event.localPosition[0], step) : event.localPosition[0];
+            const z = step > 0 ? snapScalarToGrid(event.localPosition[2], step) : event.localPosition[2];
+            if (x !== lastPoint[0] || z !== lastPoint[1]) {
+                if (step > 0)
+                    triggerSFX('sfx:grid-snap');
+                lastPoint = [x, z];
+                setCursor([x, 0, z]);
+                previewPath([x, z]);
+            }
+        };
+        const onGridClick = (event) => {
+            committed = true;
+            resumeSceneHistory(useScene);
+            useScene.getState().updateNode(fenceId, buildPatch(lastPoint));
+            useLiveNodeOverrides.getState().clear(fenceId);
+            useScene.getState().markDirty(fenceId);
+            exit(true);
+            event.nativeEvent?.stopPropagation?.();
+        };
+        const onCancel = () => {
+            restore();
+            resumeSceneHistory(useScene);
+            markToolCancelConsumed();
+            exit(false);
+        };
+        emitter.on('grid:move', onGridMove);
+        emitter.on('grid:click', onGridClick);
+        emitter.on('tool:cancel', onCancel);
+        return () => {
+            if (!committed) {
+                restore();
+                resumeSceneHistory(useScene);
+            }
+            emitter.off('grid:move', onGridMove);
+            emitter.off('grid:click', onGridClick);
+            emitter.off('tool:cancel', onCancel);
+        };
+    }, [fenceId, index, originalPath, originalPoint, originalPoint[0], originalPoint[1]]);
+    return (_jsx("group", { children: _jsx(CursorSphere, { position: cursor, showTooltip: false }) }));
+};
+export default MoveFenceControlPointTool;

package/dist/fence/move-endpoint-tool.d.ts

@@ -0,0 +1,27 @@
+import { type FenceNode } from '@pascal-app/core';
+/**
+ * Phase 5 Stage D — thin React wrapper around `moveFenceEndpointDragAction`.
+ *
+ * Replaces the legacy `MoveFenceEndpointTool` (425 LoC). All the math
+ * (snap, linked cascade, length gate, single-undo dance) lives in the
+ * pure action; this wrapper owns the React-only surface:
+ *
+ *  - Live cursor sphere tracking the moving endpoint (subscribed from
+ *    `useScene` so it follows the draft as `apply()` writes).
+ *  - Alt-key detach badge — pure UX, reads window keystate so the badge
+ *    updates without requiring a pointer move.
+ *  - Angle label between this segment and any neighbour segment sharing
+ *    the dragged endpoint — same legacy treatment.
+ *
+ *  Mounted by ToolManager via the `move-endpoint` affordance key. ToolManager
+ *  reconstructs this `target` from the reshaped node + the scope's endpoint.
+ */
+export type MovingFenceEndpoint = {
+    fence: FenceNode;
+    endpoint: 'start' | 'end';
+};
+export declare const MoveFenceEndpointTool: React.FC<{
+    target: MovingFenceEndpoint;
+}>;
+export default MoveFenceEndpointTool;
+//# sourceMappingURL=move-endpoint-tool.d.ts.map

package/dist/fence/move-endpoint-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-endpoint-tool.d.ts","sourceRoot":"","sources":["../../src/fence/move-endpoint-tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAA;AAkBzB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAA;CAC1B,CAAA;AAgDD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,CA0M3E,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/fence/move-endpoint-tool.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { emitter, getWallCurveLength, useScene, } from '@pascal-app/core';
+import { CursorSphere, formatAngleRadians, getAngleToSegmentReference, getSegmentAngleReferenceAtPoint, MeasurementPill, triggerSFX, useAlignmentGuides, useDragAction, useInteractionScope, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { Html } from '@react-three/drei';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { moveFenceEndpointDragAction } from './actions/move-endpoint';
+function referenceSegments(walls, fences) {
+    return [
+        ...walls.map((w) => ({ id: w.id, start: w.start, end: w.end, curveOffset: w.curveOffset })),
+        ...fences.map((f) => ({ id: f.id, start: f.start, end: f.end, curveOffset: f.curveOffset })),
+    ];
+}
+function pickAngleLabel(args) {
+    const target = {
+        id: args.fenceId,
+        start: args.start,
+        end: args.end,
+        curveOffset: args.curveOffset,
+    };
+    for (const endpoint of [args.start, args.end]) {
+        const targetRef = getSegmentAngleReferenceAtPoint(endpoint, target);
+        if (!targetRef)
+            continue;
+        const neighbour = args.segments.find((s) => s.id !== args.fenceId && Boolean(getSegmentAngleReferenceAtPoint(endpoint, s)));
+        if (!neighbour)
+            continue;
+        const neighbourRef = getSegmentAngleReferenceAtPoint(endpoint, neighbour);
+        if (!neighbourRef)
+            continue;
+        const angle = getAngleToSegmentReference(targetRef.vector, neighbourRef);
+        if (angle === null)
+            continue;
+        return {
+            label: formatAngleRadians(angle),
+            position: [endpoint[0], 0.34, endpoint[1]],
+        };
+    }
+    return null;
+}
+export const MoveFenceEndpointTool = ({ target }) => {
+    const fenceId = target.fence.id;
+    const endpoint = target.endpoint;
+    const initialPoint = endpoint === 'start'
+        ? [target.fence.start[0], target.fence.start[1]]
+        : [target.fence.end[0], target.fence.end[1]];
+    const [altPressed, setAltPressed] = useState(false);
+    const unit = useViewer((s) => s.unit);
+    const exitMoveMode = (committed) => {
+        if (committed)
+            triggerSFX('sfx:item-place');
+        useViewer.getState().setSelection({ selectedIds: [fenceId] });
+        useInteractionScope
+            .getState()
+            .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'endpoint');
+    };
+    useDragAction({
+        active: true,
+        action: moveFenceEndpointDragAction,
+        initial: {
+            node: target.fence,
+            handleId: endpoint,
+            point: initialPoint,
+        },
+        onCommit: () => exitMoveMode(true),
+        onCancel: () => exitMoveMode(false),
+    });
+    // Live subscriptions — the action writes onto the fence node every
+    // grid:move, so the cursor + angle label can mirror current state.
+    const live = useScene((s) => s.nodes[fenceId]);
+    const liveFence = live?.type === 'fence' ? live : null;
+    const liveStart = liveFence?.start ?? target.fence.start;
+    const liveEnd = liveFence?.end ?? target.fence.end;
+    const movingPoint = endpoint === 'start' ? liveStart : liveEnd;
+    // Ticker SFX on each grid-snap step, mirroring the wall endpoint tool.
+    // First tick just seeds the ref (no sound on mount). The drag action receives
+    // the Shift modifier through grid events, so mirror that modifier here to
+    // avoid playing grid ticks while snap is bypassed.
+    const previousGridPosRef = useRef(null);
+    const shiftPressedRef = useRef(false);
+    useEffect(() => {
+        const onGridMove = (event) => {
+            shiftPressedRef.current = event.nativeEvent?.shiftKey === true;
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Shift')
+                shiftPressedRef.current = true;
+        };
+        const onKeyUp = (event) => {
+            if (event.key === 'Shift')
+                shiftPressedRef.current = false;
+        };
+        const onBlur = () => {
+            shiftPressedRef.current = false;
+        };
+        emitter.on('grid:move', onGridMove);
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', onBlur);
+        return () => {
+            emitter.off('grid:move', onGridMove);
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', onBlur);
+        };
+    }, []);
+    useEffect(() => {
+        const prev = previousGridPosRef.current;
+        if (!shiftPressedRef.current &&
+            prev &&
+            (prev[0] !== movingPoint[0] || prev[1] !== movingPoint[1])) {
+            triggerSFX('sfx:grid-snap');
+        }
+        previousGridPosRef.current = movingPoint;
+    }, [movingPoint]);
+    // Neighbour segments at the parent level — computed once at mount.
+    const parentId = target.fence.parentId ?? null;
+    const neighbourSegments = useMemo(() => {
+        const { nodes } = useScene.getState();
+        const walls = [];
+        const fences = [];
+        for (const node of Object.values(nodes)) {
+            if (!node)
+                continue;
+            if ((node.parentId ?? null) !== parentId)
+                continue;
+            if (node.type === 'wall')
+                walls.push(node);
+            else if (node.type === 'fence' && node.id !== fenceId)
+                fences.push(node);
+        }
+        return referenceSegments(walls, fences);
+    }, [parentId, fenceId]);
+    const angleLabel = useMemo(() => pickAngleLabel({
+        fenceId,
+        start: liveStart,
+        end: liveEnd,
+        curveOffset: liveFence?.curveOffset ?? target.fence.curveOffset,
+        segments: neighbourSegments,
+    }), [
+        fenceId,
+        liveStart,
+        liveEnd,
+        liveFence?.curveOffset,
+        target.fence.curveOffset,
+        neighbourSegments,
+    ]);
+    // Safety net: drop any alignment guides if the tool unmounts without the
+    // action's commit / cancel running (e.g. abrupt teardown).
+    useEffect(() => () => useAlignmentGuides.getState().clear(), []);
+    // Window-level keystate for the detach badge — independent of grid
+    // event modifiers so the badge can toggle without a pointer move.
+    useEffect(() => {
+        const onKeyDown = (e) => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+                return;
+            if (e.key === 'Alt')
+                setAltPressed(true);
+        };
+        const onKeyUp = (e) => {
+            if (e.key === 'Alt')
+                setAltPressed(false);
+        };
+        const onBlur = () => setAltPressed(false);
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', onBlur);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', onBlur);
+        };
+    }, []);
+    const cursorPos = [movingPoint[0], 0, movingPoint[1]];
+    // Live segment dimensions for the floating pill. Length tracks the drag;
+    // height + thickness are static during an endpoint move.
+    const liveLength = getWallCurveLength({
+        start: liveStart,
+        end: liveEnd,
+        curveOffset: liveFence?.curveOffset ?? target.fence.curveOffset,
+    });
+    const fenceHeight = target.fence.height ?? 1.8;
+    const dimMidX = (liveStart[0] + liveEnd[0]) / 2;
+    const dimMidZ = (liveStart[1] + liveEnd[1]) / 2;
+    return (_jsxs("group", { children: [_jsx(CursorSphere, { position: cursorPos, showTooltip: false }), _jsx(Html, { center: true, position: [dimMidX, fenceHeight + 0.3, dimMidZ], style: { pointerEvents: 'none', touchAction: 'none' }, zIndexRange: [100, 0], children: _jsx(MeasurementPill, { height: fenceHeight, length: liveLength, primary: "length", thickness: target.fence.thickness ?? 0.08, unit: unit }) }), _jsx(Html, { position: cursorPos, style: { pointerEvents: 'none', touchAction: 'none' }, zIndexRange: [100, 0], children: _jsx("div", { className: "translate-y-10", children: _jsx("div", { className: `whitespace-nowrap rounded-full border px-2 py-1 font-medium text-[11px] shadow-lg backdrop-blur-md transition-colors ${altPressed
+                            ? 'border-amber-500/70 bg-amber-500/15 text-amber-100'
+                            : 'border-border/70 bg-background/90 text-foreground/80'}`, children: altPressed ? 'Detach endpoint' : 'Drag endpoint' }) }) }), angleLabel && (_jsx(Html, { center: true, position: angleLabel.position, style: { pointerEvents: 'none' }, zIndexRange: [100, 0], children: _jsx("div", { className: "whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono font-semibold text-[11px] text-foreground shadow-lg backdrop-blur-md", children: angleLabel.label }) }))] }));
+};
+export default MoveFenceEndpointTool;

package/dist/fence/move-tangent-tool.d.ts

@@ -0,0 +1,10 @@
+import { type FenceNode } from '@pascal-app/core';
+export declare const MoveFenceTangentTool: React.FC<{
+    target: {
+        fence: FenceNode;
+        index: number;
+        side: 'in' | 'out';
+    };
+}>;
+export default MoveFenceTangentTool;
+//# sourceMappingURL=move-tangent-tool.d.ts.map

package/dist/fence/move-tangent-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-tangent-tool.d.ts","sourceRoot":"","sources":["../../src/fence/move-tangent-tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,SAAS,EAMf,MAAM,kBAAkB,CAAA;AAezB,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC1C,MAAM,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,IAAI,GAAG,KAAK,CAAA;KAAE,CAAA;CAChE,CAqGA,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/fence/move-tangent-tool.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emitter, pauseSceneHistory, resumeSceneHistory, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { CursorSphere, getSegmentGridStep, isGridSnapActive, markToolCancelConsumed, snapScalarToGrid, triggerSFX, useInteractionScope, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { useEffect, useState } from 'react';
+const TANGENT_HANDLE_ARM_SCALE = 3;
+export const MoveFenceTangentTool = ({ target }) => {
+    const fenceId = target.fence.id;
+    const { index, side } = target;
+    const anchor = target.fence.path?.[index] ?? target.fence.start;
+    const [cursor, setCursor] = useState([anchor[0], 0, anchor[1]]);
+    useEffect(() => {
+        pauseSceneHistory(useScene);
+        let committed = false;
+        const originalTangents = (target.fence.tangents ?? []).map((t) => (t ? [t[0], t[1]] : null));
+        let lastTangents = originalTangents;
+        const writeTangent = (vector) => {
+            const pathLength = target.fence.path?.length ?? originalTangents.length;
+            const next = Array.from({ length: pathLength }, (_, tangentIndex) => lastTangents[tangentIndex] ?? null);
+            next[index] = vector;
+            lastTangents = next;
+            useLiveNodeOverrides.getState().set(fenceId, { tangents: next });
+            useScene.getState().markDirty(fenceId);
+        };
+        const restore = () => {
+            useLiveNodeOverrides.getState().clear(fenceId);
+            useScene.getState().markDirty(fenceId);
+            lastTangents = originalTangents;
+        };
+        const exit = (didCommit) => {
+            if (didCommit)
+                triggerSFX('sfx:item-place');
+            useViewer.getState().setSelection({ selectedIds: [fenceId] });
+            useInteractionScope
+                .getState()
+                .endIf((scope) => scope.kind === 'reshaping' &&
+                scope.reshape === 'tangent' &&
+                scope.nodeId === fenceId &&
+                scope.index === index &&
+                scope.side === side);
+        };
+        const onGridMove = (event) => {
+            const step = isGridSnapActive() ? getSegmentGridStep() : 0;
+            const px = step > 0 ? snapScalarToGrid(event.localPosition[0], step) : event.localPosition[0];
+            const pz = step > 0 ? snapScalarToGrid(event.localPosition[2], step) : event.localPosition[2];
+            setCursor([px, 0, pz]);
+            let armX = px - anchor[0];
+            let armZ = pz - anchor[1];
+            if (side === 'in') {
+                armX = -armX;
+                armZ = -armZ;
+            }
+            writeTangent([armX / TANGENT_HANDLE_ARM_SCALE, armZ / TANGENT_HANDLE_ARM_SCALE]);
+        };
+        const onGridClick = (event) => {
+            committed = true;
+            const finalTangents = lastTangents;
+            resumeSceneHistory(useScene);
+            useScene.getState().updateNode(fenceId, { tangents: finalTangents });
+            useLiveNodeOverrides.getState().clear(fenceId);
+            useScene.getState().markDirty(fenceId);
+            lastTangents = finalTangents;
+            exit(true);
+            event.nativeEvent?.stopPropagation?.();
+        };
+        const onCancel = () => {
+            restore();
+            resumeSceneHistory(useScene);
+            markToolCancelConsumed();
+            exit(false);
+        };
+        emitter.on('grid:move', onGridMove);
+        emitter.on('grid:click', onGridClick);
+        emitter.on('tool:cancel', onCancel);
+        return () => {
+            if (!committed) {
+                restore();
+                resumeSceneHistory(useScene);
+            }
+            emitter.off('grid:move', onGridMove);
+            emitter.off('grid:click', onGridClick);
+            emitter.off('tool:cancel', onCancel);
+        };
+    }, [anchor[0], anchor[1], fenceId, index, side, target.fence]);
+    return (_jsx("group", { children: _jsx(CursorSphere, { position: cursor, showTooltip: false }) }));
+};
+export default MoveFenceTangentTool;

package/dist/fence/move-tool.d.ts

@@ -0,0 +1,6 @@
+import { type FenceNode } from '@pascal-app/core';
+export declare const MoveFenceTool: React.FC<{
+    node: FenceNode;
+}>;
+export default MoveFenceTool;
+//# sourceMappingURL=move-tool.d.ts.map

package/dist/fence/move-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-tool.d.ts","sourceRoot":"","sources":["../../src/fence/move-tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,SAAS,EAUf,MAAM,kBAAkB,CAAA;AAsHzB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAwQvD,CAAA;AAED,eAAe,aAAa,CAAA"}