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

package/dist/eyebrow-vent/renderer.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
-import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, resolveMaterialRef, useNodeEvents, useViewer, } from '@pascal-app/viewer';
 import { useEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface';
@@ -26,6 +26,7 @@ const EyebrowVentRenderer = ({ node: storeNode }) => {
     const textures = useViewer((s) => s.textures);
     const colorPreset = useViewer((s) => s.colorPreset);
     const sceneTheme = useViewer((s) => s.sceneTheme);
+    const sceneMaterials = useScene((s) => s.materials);
     const overrides = useLiveNodeOverrides((s) => s.get(storeNode.id));
     const node = overrides
         ? { ...storeNode, ...overrides }
@@ -43,13 +44,31 @@ const EyebrowVentRenderer = ({ node: storeNode }) => {
         return surfaceQuatFromNormal(normal, new THREE.Quaternion());
     }, [segment, node.position[0], node.position[2]]);
     const material = useMemo(() => {
-        if (!textures || (!node.material && !node.materialPreset)) {
-            return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme);
-        }
-        return node.material
-            ? createMaterial(node.material, shading)
-            : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial);
-    }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]);
+        const roleDefault = createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme);
+        const resolve = (role) => {
+            if (!textures)
+                return roleDefault;
+            const slotMaterial = resolveMaterialRef(node.slots?.[role], sceneMaterials, shading);
+            if (slotMaterial)
+                return slotMaterial;
+            if (node.material)
+                return createMaterial(node.material, shading);
+            if (node.materialPreset) {
+                return createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial;
+            }
+            return roleDefault;
+        };
+        return [resolve('hood'), resolve('front')];
+    }, [
+        textures,
+        colorPreset,
+        sceneTheme,
+        shading,
+        node.slots,
+        node.material,
+        node.materialPreset,
+        sceneMaterials,
+    ]);
     const yAxis = useMemo(() => new THREE.Vector3(0, 1, 0), []);
     const composedQuat = useMemo(() => {
         const yawQuat = new THREE.Quaternion().setFromAxisAngle(yAxis, node.rotation ?? 0);

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

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/fence/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AAkBzB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAgPpC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,OAAO,SAAS,CAyH5D,CAAA"}
+{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/fence/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AAmBzB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAgPpC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,OAAO,SAAS,CA0H5D,CAAA"}

package/dist/fence/definition.js

@@ -1,7 +1,7 @@
 import { getFenceControlHandle, isSplineFence, } from '@pascal-app/core';
 import { clearStructuralElevationGuide, publishStructuralElevationGuide, resolveStructuralElevationSnap, } from '@pascal-app/editor';
 import { buildFenceFloorplan } from './floorplan';
-import { fenceControlPointAffordance, fenceCurveAffordance, fenceMoveEndpointAffordance, fenceTangentAffordance, } from './floorplan-affordances';
+import { fenceControlPointAffordance, fenceCurveAffordance, fenceMoveEndpointAffordance, fenceTangentAffordance, fenceThicknessAffordance, } from './floorplan-affordances';
 import { fenceFloorplanMoveTarget } from './floorplan-move';
 import { buildFenceGeometry } from './geometry';
 import { resolveFenceLiftElevation, resolveFenceLiftElevationForNodes } from './lift';
@@ -305,6 +305,7 @@ export const fenceDefinition = {
         'move-control-point': fenceControlPointAffordance,
         'move-tangent': fenceTangentAffordance,
         curve: fenceCurveAffordance,
+        thickness: fenceThicknessAffordance,
     },
     // Body move on the fence is driven by the two `move-arrow` chevrons
     // the floor-plan builder emits at the midpoint. Pointer-down enters

package/dist/fence/floorplan-affordances.d.ts

@@ -10,6 +10,7 @@ import { type FenceNode, type FloorplanAffordance } from '@pascal-app/core';
  * both committed on pointer-up).
  */
 export declare const fenceCurveAffordance: FloorplanAffordance<FenceNode>;
+export declare const fenceThicknessAffordance: FloorplanAffordance<FenceNode>;
 /**
  * Spline control-point drag — reshapes one point of the fence `path`. Grid
  * snap follows the active mode; start/end stay pinned to the path ends so endpoint-

package/dist/fence/floorplan-affordances.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floorplan-affordances.d.ts","sourceRoot":"","sources":["../../src/fence/floorplan-affordances.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,mBAAmB,EASzB,MAAM,kBAAkB,CAAA;AAoFzB;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,EAAE,mBAAmB,CAAC,SAAS,CAsC/D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,CAAC,SAAS,CAqCtE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,EAAE,mBAAmB,CAAC,SAAS,CAoDjE,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,CAAC,SAAS,CA4HtE,CAAA"}
+{"version":3,"file":"floorplan-affordances.d.ts","sourceRoot":"","sources":["../../src/fence/floorplan-affordances.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,mBAAmB,EAUzB,MAAM,kBAAkB,CAAA;AAsFzB;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,EAAE,mBAAmB,CAAC,SAAS,CAsC/D,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAgCnE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,CAAC,SAAS,CAqCtE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,EAAE,mBAAmB,CAAC,SAAS,CAoDjE,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,CAAC,SAAS,CA4HtE,CAAA"}

package/dist/fence/floorplan-affordances.js

@@ -1,4 +1,4 @@
-import { getMaxWallCurveOffset, getWallChordFrame, normalizeWallCurveOffset, resolveFenceSupportSlabPatch, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { getFenceCenterlineFrameAt, getMaxWallCurveOffset, getWallChordFrame, normalizeWallCurveOffset, resolveFenceSupportSlabPatch, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
 import { alignFloorplanDraftPoint, getSegmentGridStep, isAlignmentGuideActive, isAngleSnapActive, isGridSnapActive, isMagneticSnapActive, isSegmentLongEnough, snapBuildingLocalToWorldGrid, snapFenceDraftPoint, snapScalarToGrid, useAlignmentGuides, } from '@pascal-app/editor';
 /**
  * Floor-plan 2D drag affordances for fence — sister to the 3D
@@ -20,6 +20,7 @@ const LINKED_FENCE_ENDPOINT_EPSILON = 0.025;
 // arm is this many times the raw tangent vector, so dividing the dragged
 // offset back out recovers the stored tangent.
 const TANGENT_HANDLE_ARM_SCALE = 3;
+const MIN_FENCE_THICKNESS = 0.03;
 function pointsNearlyEqual(a, b) {
     return (Math.abs(a[0] - b[0]) <= LINKED_FENCE_ENDPOINT_EPSILON &&
         Math.abs(a[1] - b[1]) <= LINKED_FENCE_ENDPOINT_EPSILON);
@@ -94,6 +95,34 @@ export const fenceCurveAffordance = {
         };
     },
 };
+export const fenceThicknessAffordance = {
+    start({ node, payload, initialPlanPoint }) {
+        const { side } = payload;
+        const frame = getFenceCenterlineFrameAt(node, 0.5);
+        const outwardX = frame.normal.x * side;
+        const outwardY = frame.normal.y * side;
+        const initialThickness = node.thickness ?? 0.08;
+        const fenceId = node.id;
+        let lastThickness = initialThickness;
+        return {
+            affectedIds: [fenceId],
+            apply({ planPoint }) {
+                const outwardDelta = (planPoint[0] - initialPlanPoint[0]) * outwardX +
+                    (planPoint[1] - initialPlanPoint[1]) * outwardY;
+                lastThickness = Math.max(MIN_FENCE_THICKNESS, snapScalarToGrid(initialThickness + outwardDelta * 2, getSegmentGridStep()));
+                useLiveNodeOverrides.getState().set(fenceId, { thickness: lastThickness });
+                useScene.getState().markDirty(fenceId);
+            },
+            canCommit() {
+                return true;
+            },
+            commit() {
+                useScene.getState().updateNodes([{ id: fenceId, data: { thickness: lastThickness } }]);
+                useLiveNodeOverrides.getState().clear(fenceId);
+            },
+        };
+    },
+};
 /**
  * Spline control-point drag — reshapes one point of the fence `path`. Grid
  * snap follows the active mode; start/end stay pinned to the path ends so endpoint-

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

@@ -1 +1 @@
-{"version":3,"file":"floorplan.d.ts","sourceRoot":"","sources":["../../src/fence/floorplan.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,eAAe,EAQrB,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAiNzC,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,GAAG,iBAAiB,CA0S5F"}
+{"version":3,"file":"floorplan.d.ts","sourceRoot":"","sources":["../../src/fence/floorplan.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,eAAe,EAQrB,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAiNzC,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,eAAe,GAAG,iBAAiB,CAyT5F"}

package/dist/fence/floorplan.js

@@ -386,6 +386,20 @@ export function buildFenceFloorplan(node, ctx) {
                 payload: { fenceId: node.id, endpoint: 'end' },
             });
         }
+        const thicknessFrame = getFenceCenterlineFrameAt(node, 0.5);
+        const halfThickness = (node.thickness ?? 0.08) / 2;
+        for (const side of [1, -1]) {
+            children.push({
+                kind: 'endpoint-handle',
+                point: [
+                    thicknessFrame.point.x + thicknessFrame.normal.x * halfThickness * side,
+                    thicknessFrame.point.y + thicknessFrame.normal.y * halfThickness * side,
+                ],
+                state: 'idle',
+                affordance: 'thickness',
+                payload: { fenceId: node.id, side },
+            });
+        }
         // Two perpendicular `move-arrow` chevrons at the fence midpoint.
         // No `affordance` → the registry layer routes pointer-down through
         // `setMovingNode`, which the `FloorplanRegistryMoveOverlay` picks

package/dist/fence/inspector-editors.js

@@ -39,5 +39,5 @@ export function FenceLengthEditor({ node, onUpdate, }) {
 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 }));
+    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: curveOffset }));
 }

package/dist/fence/parametrics.js

@@ -49,8 +49,8 @@ export const fenceParametrics = {
                     component: FenceCurveEditor,
                     visibleIf: (n) => !isSplineFence(n),
                 },
-                { key: 'height', kind: 'number', unit: 'm', min: 0.4, max: 4, step: 0.05 },
-                { key: 'thickness', kind: 'number', unit: 'm', min: 0.03, max: 0.5, step: 0.005 },
+                { key: 'height', kind: 'number', unit: 'm', min: 0.4, max: 1000, step: 0.05 },
+                { key: 'thickness', kind: 'number', unit: 'm', min: 0.03, max: 1000, step: 0.005 },
             ],
         },
         {
@@ -58,7 +58,7 @@ export const fenceParametrics = {
             fields: [
                 { key: 'baseHeight', kind: 'number', unit: 'm', min: 0.04, max: 1, step: 0.01 },
                 { key: 'topRailHeight', kind: 'number', unit: 'm', min: 0.01, max: 0.25, step: 0.005 },
-                { key: 'postSpacing', kind: 'number', unit: 'm', min: 0.05, max: 5, step: 0.01 },
+                { key: 'postSpacing', kind: 'number', unit: 'm', min: 0.05, max: 1000, step: 0.01 },
                 { key: 'postSize', kind: 'number', unit: 'm', min: 0.01, max: 0.4, step: 0.005 },
                 {
                     // Dropdown (not segmented) so the inspector renders its "Post Cap"

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

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/fence/tool.tsx"],"names":[],"mappings":"AA6bA,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAM7B,CAAA;AA0eD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/fence/tool.tsx"],"names":[],"mappings":"AA8bA,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAM7B,CAAA;AA8gBD,eAAe,SAAS,CAAA"}

package/dist/fence/tool.js

@@ -19,7 +19,7 @@ const surfacePointScratch = new Vector3();
 // them; those keep the uncapped max election and leave the grid plane alone.
 function pointedSurfaceFor(camera, event) {
     return event.nativeEvent?.target instanceof HTMLCanvasElement
-        ? resolvePointerSupportSurface(camera, event.position)
+        ? resolvePointerSupportSurface(camera, event.position, { includeNodeTopSurfaces: true })
         : null;
 }
 /** Figma-style alignment-snap threshold (meters), matching the move tools. */
@@ -309,6 +309,7 @@ const StraightFenceTool = () => {
     const previewRef = useRef(null);
     const startingPoint = useRef(new Vector3(0, 0, 0));
     const endingPoint = useRef(new Vector3(0, 0, 0));
+    const constructionSurface = useRef(null);
     const buildingState = useRef(0);
     const [draftMeasurement, setDraftMeasurement] = useState(null);
     const [axisGuide, setAxisGuide] = useState(null);
@@ -348,6 +349,7 @@ const StraightFenceTool = () => {
         };
         const stopDrafting = () => {
             buildingState.current = 0;
+            constructionSurface.current = null;
             previewRef.current.visible = false;
             setDraftMeasurement(null);
             setAxisGuide(null);
@@ -366,11 +368,17 @@ const StraightFenceTool = () => {
             // (`event.localPosition[1]`) sits at the lift the committed fence
             // will get. Aiming past the deck edge drops it back to the floor.
             const pointed = pointedSurfaceFor(cameraRef.current, event);
-            if (pointed) {
-                publishPlacementSurface(surfacePointScratch.set(event.position[0], pointed.worldY, event.position[2]), SURFACE_UP);
+            const activeSurface = constructionSurface.current ?? pointed;
+            if (activeSurface) {
+                publishPlacementSurface(surfacePointScratch.set(event.position[0], activeSurface.worldY, event.position[2]), SURFACE_UP);
             }
+            const activeY = activeSurface?.localPoint?.[1] ?? event.localPosition[1];
             const { walls, fences } = getCurrentLevelElements();
-            const localPoint = [event.localPosition[0], event.localPosition[2]];
+            const pointedLocal = buildingState.current === 0 ? pointed?.localPoint : null;
+            const localPoint = [
+                pointedLocal?.[0] ?? event.localPosition[0],
+                pointedLocal?.[2] ?? event.localPosition[2],
+            ];
             // While drafting, the segment locks to 15° rays from its start.
             // Snapping is governed by the snapping mode (`'off'` is the bypass);
             // there is no Shift hold-to-bypass. Alignment follows the magnetic snap
@@ -385,7 +393,7 @@ const StraightFenceTool = () => {
                     angleSnap: angleLocked,
                     magnetic: isMagneticSnapActive(),
                 }), { applySnap: !angleLocked });
-                endingPoint.current.set(snappedLocal[0], event.localPosition[1], snappedLocal[1]);
+                endingPoint.current.set(snappedLocal[0], activeY, snappedLocal[1]);
                 const draftPreview = useFloorplanDraftPreview.getState();
                 draftPreview.setFenceDraftStart([startingPoint.current.x, startingPoint.current.z]);
                 draftPreview.setFenceDraftEnd(snappedLocal);
@@ -412,7 +420,7 @@ const StraightFenceTool = () => {
                     fences,
                     magnetic: isMagneticSnapActive(),
                 }));
-                cursorRef.current.position.set(snappedPoint[0], event.localPosition[1], snappedPoint[1]);
+                cursorRef.current.position.set(snappedPoint[0], activeY, snappedPoint[1]);
                 setDraftMeasurement(null);
                 setAxisGuide(null);
             }
@@ -425,6 +433,7 @@ const StraightFenceTool = () => {
                 return;
             }
             const { walls, fences } = getCurrentLevelElements();
+            const pointed = pointedSurfaceFor(cameraRef.current, event);
             const localClick = [event.localPosition[0], event.localPosition[2]];
             if (buildingState.current === 0) {
                 const snappedStart = alignPoint(snapFenceDraftPoint({
@@ -433,7 +442,8 @@ const StraightFenceTool = () => {
                     fences,
                     magnetic: isMagneticSnapActive(),
                 }));
-                startingPoint.current.set(snappedStart[0], event.localPosition[1], snappedStart[1]);
+                startingPoint.current.set(snappedStart[0], pointed?.localPoint?.[1] ?? event.localPosition[1], snappedStart[1]);
+                constructionSurface.current = pointed;
                 endingPoint.current.copy(startingPoint.current);
                 buildingState.current = 1;
                 const draftPreview = useFloorplanDraftPreview.getState();
@@ -463,8 +473,12 @@ const StraightFenceTool = () => {
                 const dz = snappedEnd[1] - startingPoint.current.z;
                 if (dx * dx + dz * dz < 0.01 * 0.01)
                     return;
-                const pointed = pointedSurfaceFor(cameraRef.current, event);
-                const createdFence = createFenceOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd, { supportCap: pointed ? pointed.elevation : null });
+                const pointedSurface = constructionSurface.current ?? pointed;
+                const createdFence = createFenceOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd, {
+                    supportCap: pointedSurface?.elevation ?? null,
+                    preferredSupportSlabId: pointedSurface?.supportSlabId ?? null,
+                    constructionElevation: pointedSurface?.sourceNodeId ? pointedSurface.elevation : null,
+                });
                 if (!createdFence)
                     return;
                 // The new segment is now a real node — make it an alignment target
@@ -482,7 +496,7 @@ const StraightFenceTool = () => {
                 // chains its next segment from the same point (its own snap
                 // pipeline can resolve a slightly different endpoint).
                 useSegmentDraftChain.getState().setChainStart('fence', [nextStart[0], nextStart[1]]);
-                startingPoint.current.set(nextStart[0], event.localPosition[1], nextStart[1]);
+                startingPoint.current.set(nextStart[0], constructionSurface.current?.localPoint?.[1] ?? event.localPosition[1], nextStart[1]);
                 endingPoint.current.copy(startingPoint.current);
                 const draftPreview = useFloorplanDraftPreview.getState();
                 draftPreview.setFenceDraftEnd(null);
@@ -540,7 +554,7 @@ const SplineFenceDraft = () => {
     cameraRef.current = camera;
     // Pointer cap for the commit (Enter / double-click carry no useful grid
     // event of their own) — last resolved on move/click.
-    const supportCapRef = useRef(null);
+    const supportSurfaceRef = useRef(null);
     const draftRef = useRef(draftPoints);
     draftRef.current = draftPoints;
     // Mirror the full transient curve so additional preview surfaces observe
@@ -561,7 +575,11 @@ const SplineFenceDraft = () => {
             const points = draftRef.current;
             if (points.length >= 2) {
                 const created = createSplineFenceOnCurrentLevel(points, undefined, {
-                    supportCap: supportCapRef.current,
+                    supportCap: supportSurfaceRef.current?.elevation ?? null,
+                    preferredSupportSlabId: supportSurfaceRef.current?.supportSlabId ?? null,
+                    constructionElevation: supportSurfaceRef.current?.sourceNodeId
+                        ? supportSurfaceRef.current.elevation
+                        : null,
                 });
                 if (created) {
                     triggerSFX('sfx:item-place');
@@ -578,22 +596,31 @@ const SplineFenceDraft = () => {
         const trackPointedSurface = (event) => {
             const pointed = pointedSurfaceFor(cameraRef.current, event);
             if (!pointed)
-                return;
-            supportCapRef.current = pointed.elevation;
-            publishPlacementSurface(surfacePointScratch.set(event.position[0], pointed.worldY, event.position[2]), SURFACE_UP);
-            setLiftY(event.localPosition[1]);
+                return null;
+            if (draftRef.current.length === 0)
+                supportSurfaceRef.current = pointed;
+            const activeSurface = supportSurfaceRef.current ?? pointed;
+            publishPlacementSurface(surfacePointScratch.set(event.position[0], activeSurface.worldY, event.position[2]), SURFACE_UP);
+            setLiftY(activeSurface.localPoint?.[1] ?? event.localPosition[1]);
+            return pointed;
         };
         const onMove = (event) => {
-            trackPointedSurface(event);
-            setCursor(snapPoint([event.localPosition[0], event.localPosition[2]]));
+            const pointed = trackPointedSurface(event);
+            setCursor(snapPoint([
+                pointed?.localPoint?.[0] ?? event.localPosition[0],
+                pointed?.localPoint?.[2] ?? event.localPosition[2],
+            ]));
         };
         const onClick = (event) => {
-            trackPointedSurface(event);
+            const pointed = trackPointedSurface(event);
             if (event.nativeEvent.detail >= 2) {
                 commit();
                 return;
             }
-            const point = snapPoint([event.localPosition[0], event.localPosition[2]]);
+            const point = snapPoint([
+                pointed?.localPoint?.[0] ?? event.localPosition[0],
+                pointed?.localPoint?.[2] ?? event.localPosition[2],
+            ]);
             triggerSFX('sfx:grid-snap');
             setDraftPoints((prev) => [...prev, point]);
         };

package/dist/gutter/corner-mitre.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"corner-mitre.d.ts","sourceRoot":"","sources":["../../src/gutter/corner-mitre.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,YAAoC,CAAA;AAQ5D,eAAO,MAAM,iBAAiB,QAAkC,CAAA;AAYhE,+EAA+E;AAC/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,UAAU,CAAA;IAClB,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;CACxD,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC,2FAA2F;IAC3F,OAAO,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,gFAAgF;IAChF,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAClC,CAAA;AA6BD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,CAAC,EAAE,UAAU,EACb,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,GACtD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAA;CAAE,CA4BrC;AAUD,wBAAgB,UAAU,CACxB,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EACpC,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GACnC,MAAM,CAIR;AA2CD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,UAAU,EACnB,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,EAC9D,QAAQ,EAAE,SAAS,iBAAiB,EAAE,GACrC,YAAY,CAqCd"}
+{"version":3,"file":"corner-mitre.d.ts","sourceRoot":"","sources":["../../src/gutter/corner-mitre.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,YAAoC,CAAA;AAoB5D,eAAO,MAAM,iBAAiB,QAAkC,CAAA;AAYhE,+EAA+E;AAC/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,UAAU,CAAA;IAClB,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;CACxD,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC,2FAA2F;IAC3F,OAAO,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,gFAAgF;IAChF,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAClC,CAAA;AAsDD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,CAAC,EAAE,UAAU,EACb,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,GACtD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAA;CAAE,CA4BrC;AAUD,wBAAgB,UAAU,CACxB,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EACpC,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GACnC,MAAM,CAIR;AA2CD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,UAAU,EACnB,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,EAC9D,QAAQ,EAAE,SAAS,iBAAiB,EAAE,GACrC,YAAY,CAsCd"}

package/dist/gutter/corner-mitre.js

@@ -1,4 +1,17 @@
 export const NO_MITRES = { left: 0, right: 0 };
+function prescribedLeanToMitres(gutter) {
+    const metadata = gutter.metadata;
+    if (!(metadata && typeof metadata === 'object' && !Array.isArray(metadata)))
+        return NO_MITRES;
+    const value = metadata.leanToGutterMitres;
+    if (!(value && typeof value === 'object' && !Array.isArray(value)))
+        return NO_MITRES;
+    const mitres = value;
+    return {
+        left: typeof mitres.left === 'number' && Number.isFinite(mitres.left) ? mitres.left : 0,
+        right: typeof mitres.right === 'number' && Number.isFinite(mitres.right) ? mitres.right : 0,
+    };
+}
 // Match the length-snap's 10 cm catch radius (`length-snap.ts`): any two
 // endpoints close enough for the corner snap to bind are close enough to
 // read as "they meant to meet". The corner snap pulls them to the exact
@@ -25,15 +38,41 @@ function gutterEndpoints(g) {
     const outX = Math.sin(r);
     const outZ = Math.cos(r);
     const half = g.length / 2;
+    const curvedEnd = (x, plus) => {
+        const arc = g.arc;
+        if (!arc || !Number.isFinite(arc.radius))
+            return null;
+        const signedRef = (Math.sign(arc.centerZ) || 1) * arc.radius;
+        const phi = (x - arc.centerX) / signedRef;
+        const radial = -arc.centerZ;
+        const bentX = arc.centerX - radial * Math.sin(phi);
+        const bentZ = arc.centerZ + radial * Math.cos(phi);
+        const tangentX = Math.cos(phi);
+        const tangentZ = Math.sin(phi);
+        const radialX = -Math.sin(phi);
+        const radialZ = Math.cos(phi);
+        const rotate = (xValue, zValue) => [
+            xValue * dirX + zValue * outX,
+            xValue * dirZ + zValue * outZ,
+        ];
+        const [worldX, worldZ] = rotate(bentX, bentZ);
+        const [tangentWorldX, tangentWorldZ] = rotate(tangentX, tangentZ);
+        const [outWorldX, outWorldZ] = rotate(radialX, radialZ);
+        return {
+            pos: [px + worldX, py, pz + worldZ],
+            awayDir: plus ? [-tangentWorldX, -tangentWorldZ] : [tangentWorldX, tangentWorldZ],
+            outDir: [outWorldX, outWorldZ],
+        };
+    };
     return {
-        plus: {
+        plus: curvedEnd(half, true) ?? {
             pos: [px + dirX * half, py, pz + dirZ * half],
             // From the +X endpoint, the rest of the gutter extends back
             // toward the −X end — so "away from this end" is −dir.
             awayDir: [-dirX, -dirZ],
             outDir: [outX, outZ],
         },
-        minus: {
+        minus: curvedEnd(-half, false) ?? {
             pos: [px - dirX * half, py, pz - dirZ * half],
             awayDir: [dirX, dirZ],
             outDir: [outX, outZ],
@@ -143,11 +182,12 @@ function axisIntersectionXZ(aPos, aDir, bPos, bDir) {
  * result is deterministic.
  */
 export function computeGutterMitres(subject, subjectSegment, siblings) {
+    const prescribed = prescribedLeanToMitres(subject);
     if (siblings.length === 0)
-        return NO_MITRES;
+        return prescribed;
     const subj = gutterEndpointsInFrame(subject, subjectSegment);
-    let leftMitre = 0;
-    let rightMitre = 0;
+    let leftMitre = prescribed.left;
+    let rightMitre = prescribed.right;
     for (const sib of siblings) {
         if (sib.gutter.id === subject.id)
             continue;
@@ -163,10 +203,10 @@ export function computeGutterMitres(subject, subjectSegment, siblings) {
         if (!otherPlusAtCorner && !otherMinusAtCorner)
             continue;
         const otherEnd = otherPlusAtCorner ? other.plus : other.minus;
-        if (leftMitre === 0 && planDistSq(subj.minus.pos, corner) <= CORNER_EPSILON_SQ) {
+        if (planDistSq(subj.minus.pos, corner) <= CORNER_EPSILON_SQ) {
             leftMitre = mitreBetween(subj.minus, otherEnd);
         }
-        if (rightMitre === 0 && planDistSq(subj.plus.pos, corner) <= CORNER_EPSILON_SQ) {
+        if (planDistSq(subj.plus.pos, corner) <= CORNER_EPSILON_SQ) {
             rightMitre = mitreBetween(subj.plus, otherEnd);
         }
         if (leftMitre !== 0 && rightMitre !== 0)

package/dist/gutter/definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/gutter/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8GrC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,OAAO,UAAU,CA2D9D,CAAA"}
+{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/gutter/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,kBAAkB,CAAA;AAKzB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAoHrC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,OAAO,UAAU,CA8D9D,CAAA"}

package/dist/gutter/definition.js

@@ -1,6 +1,7 @@
 import { GutterNode as GutterNodeSchema, } from '@pascal-app/core';
 import { buildGutterFloorplan } from './floorplan';
 import { snapLengthToCorner } from './length-snap';
+import { gutterPaint } from './paint';
 import { gutterParametrics } from './parametrics';
 import { GutterNode } from './schema';
 // Edge-to-arrow-center offset, matching the box-vent / ridge-vent
@@ -33,9 +34,9 @@ function getRimZ(n) {
 //
 // Corner snap: when the dragged endpoint nears the geometric corner it
 // would form with another gutter (the crossing of their length axes),
-// `snapLengthToCorner` overrides the raw newLength so the endpoint lands
-// EXACTLY on that corner — the corner-mitre detector then fires reliably
-// without pixel-perfect dragging. Only this gutter's length changes.
+// `snapLengthToCorner` is the handle's magnetic snap, so Lines mode lands the
+// endpoint exactly on that corner, Grid mode uses the chosen step, and Off
+// leaves the cursor raw. Only this gutter's length changes.
 function gutterLengthHandle(side) {
     const sign = side === 'right' ? 1 : -1;
     return {
@@ -43,21 +44,26 @@ function gutterLengthHandle(side) {
         axis: 'x',
         anchor: side === 'right' ? 'min' : 'max',
         min: MIN_LENGTH,
+        gridSnap: true,
         currentValue: (n) => n.length,
-        apply: (initial, newLength, sceneApi) => {
+        magneticSnap: (initial, newLength, sceneApi) => {
             const rotY = initial.rotation ?? 0;
             const armX = Math.cos(rotY);
             const armZ = -Math.sin(rotY);
             const anchorX = initial.position[0] - sign * (initial.length / 2) * armX;
             const anchorZ = initial.position[2] - sign * (initial.length / 2) * armZ;
-            const snap = snapLengthToCorner(initial, newLength, sign, anchorX, anchorZ, armX, armZ, MIN_LENGTH, sceneApi);
-            // Only the dragged gutter's own length is snapped — `snapLengthToCorner`
-            // never moves the corner-mate, so dragging one gutter can't reset
-            // another the user placed deliberately.
-            const newCenterX = anchorX + sign * (snap.length / 2) * armX;
-            const newCenterZ = anchorZ + sign * (snap.length / 2) * armZ;
+            return snapLengthToCorner(initial, newLength, sign, anchorX, anchorZ, armX, armZ, MIN_LENGTH, sceneApi).length;
+        },
+        apply: (initial, newLength) => {
+            const rotY = initial.rotation ?? 0;
+            const armX = Math.cos(rotY);
+            const armZ = -Math.sin(rotY);
+            const anchorX = initial.position[0] - sign * (initial.length / 2) * armX;
+            const anchorZ = initial.position[2] - sign * (initial.length / 2) * armZ;
+            const newCenterX = anchorX + sign * (newLength / 2) * armX;
+            const newCenterZ = anchorZ + sign * (newLength / 2) * armZ;
             return {
-                length: snap.length,
+                length: newLength,
                 position: [newCenterX, initial.position[1], newCenterZ],
             };
         },
@@ -81,6 +87,7 @@ function gutterSizeHandle() {
         // downward grows the value 1:1.
         anchor: 'max',
         min: MIN_SIZE,
+        gridSnap: true,
         currentValue: (n) => n.size,
         apply: (_n, newValue) => ({ size: Math.max(MIN_SIZE, newValue) }),
         placement: {
@@ -112,10 +119,11 @@ const gutterHandles = [
  */
 export const gutterDefinition = {
     kind: 'gutter',
-    schemaVersion: 1,
+    schemaVersion: 4,
     schema: GutterNode,
     category: 'structure',
     surfaceRole: 'roof',
+    snapProfile: 'item',
     defaults: () => {
         const stub = GutterNodeSchema.parse({
             id: 'gutter_default',
@@ -125,9 +133,11 @@ export const gutterDefinition = {
         return rest;
     },
     capabilities: {
+        slots: () => [{ slotId: 'gutter', label: 'Gutter', default: 'library:preset-softwhite' }],
         selectable: { hitVolume: 'bbox' },
         duplicable: true,
         deletable: true,
+        paint: gutterPaint,
         // Mounts on a roof segment via `roofSegmentId`. Sits ON TOP of the
         // eave fascia — no `buildCut`, just the dirty cascade so the
         // parent roof's merged shell rebuilds when the gutter moves /
@@ -154,7 +164,7 @@ export const gutterDefinition = {
     presentation: {
         label: 'Gutter',
         description: 'Rain-water channel running along the eave of a roof segment.',
-        icon: { kind: 'url', src: '/icons/roof.webp' },
+        icon: { kind: 'url', src: '/icons/gutter.webp' },
         paletteSection: 'structure',
         paletteOrder: 122,
     },

package/dist/gutter/eave-align.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eave-align.d.ts","sourceRoot":"","sources":["../../src/gutter/eave-align.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAInE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,oFAAoF;AACpF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,UAAU,CAAA;IAClB,OAAO,EAAE,eAAe,CAAA;CACzB,CAAA;AA2BD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,UAAU,EACnB,cAAc,EAAE,eAAe,EAC/B,QAAQ,EAAE,SAAS,iBAAiB,EAAE,GACrC,MAAM,CA+BR"}
+{"version":3,"file":"eave-align.d.ts","sourceRoot":"","sources":["../../src/gutter/eave-align.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAInE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,oFAAoF;AACpF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,UAAU,CAAA;IAClB,OAAO,EAAE,eAAe,CAAA;CACzB,CAAA;AAkCD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,UAAU,EACnB,cAAc,EAAE,eAAe,EAC/B,QAAQ,EAAE,SAAS,iBAAiB,EAAE,GACrC,MAAM,CAiCR"}

package/dist/gutter/eave-align.js

@@ -1,5 +1,12 @@
 import { CORNER_EPSILON_SQ, gutterEndpointsInFrame, planDistSq } from './corner-mitre';
 import { computeEaveY } from './eave-snap';
+function prescribedLeanToEaveY(gutter) {
+    const metadata = gutter.metadata;
+    if (!(metadata && typeof metadata === 'object' && !Array.isArray(metadata)))
+        return null;
+    const value = metadata.leanToGutterEaveY;
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
 function guttersMeet(a, aSeg, b, bSeg) {
     const ea = gutterEndpointsInFrame(a, aSeg);
     const eb = gutterEndpointsInFrame(b, bSeg);
@@ -17,6 +24,9 @@ function worldEaveY(segment) {
     return (segment.position?.[1] ?? 0) + computeEaveY(segment);
 }
 export function computeSharedEaveY(subject, subjectSegment, siblings) {
+    const prescribed = prescribedLeanToEaveY(subject);
+    if (prescribed !== null)
+        return prescribed;
     const subjectBaseY = subjectSegment.position?.[1] ?? 0;
     if (siblings.length === 0)
         return computeEaveY(subjectSegment);

package/dist/gutter/eave-snap.d.ts

@@ -1,4 +1,4 @@
-import type { RoofSegmentNode } from '@pascal-app/core';
+import { type RoofSegmentNode } from '@pascal-app/core';
 /**
  * Shared eave-snap math for the gutter's placement + move tools.
  *

package/dist/gutter/eave-snap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eave-snap.d.ts","sourceRoot":"","sources":["../../src/gutter/eave-snap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,kBAAkB,CAAA;AAEjE;;;;;;;;;;;;;;GAcG;AAOH,eAAO,MAAM,gBAAgB,OAAO,CAAA;AACpC,eAAO,MAAM,YAAY,OAAO,CAAA;AAEhC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,MAAM,MAAM,QAAQ,GAAG;IACrB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,GAC/E,MAAM,CAYR;AA2CD,wBAAgB,eAAe,CAC7B,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACb,QAAQ,CAqDV"}
+{"version":3,"file":"eave-snap.d.ts","sourceRoot":"","sources":["../../src/gutter/eave-snap.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,kBAAkB,CAAA;AAEzB;;;;;;;;;;;;;;GAcG;AAOH,eAAO,MAAM,gBAAgB,OAA0B,CAAA;AACvD,eAAO,MAAM,YAAY,OAAsB,CAAA;AAE/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,MAAM,MAAM,QAAQ,GAAG;IACrB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,GAC/E,MAAM,CAER;AAwCD,wBAAgB,eAAe,CAC7B,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACb,QAAQ,CAqDV"}