@pascal-app/nodes 1.0.3 → 1.0.5

package/dist/procedural-item/renderer.js

@@ -1,17 +1,53 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLiveNodeOverrides, useLiveTransforms, useRegistry, useScene, } from '@pascal-app/core';
-import { proceduralLocalPose } from '@pascal-app/core/procedural-items';
-import { createSurfaceRoleMaterial, NodeRenderer, resolveMaterialRef, resolveSlotDefaultMaterial, useLibraryMaterialsVersion, useNodeEvents, useViewer, } from '@pascal-app/viewer';
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Mesh } from 'three';
-import { acquireProceduralGeometry, geometrySignature } from './geometry';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInteractive, useLiveNodeOverrides, useLiveTransforms, useRegistry, useScene, } from '@pascal-app/core';
+import { motionAxis, motionRestOffset, ProceduralMotionController, proceduralLocalPose, } from '@pascal-app/core/procedural-items';
+import { usePlacementPreview } from '@pascal-app/editor';
+import { cloneWithProceduralEmission, createSurfaceRoleMaterial, materialCastsShadow, NodeRenderer, proceduralSlotMeshes, resolveMaterialRef, resolveSlotDefaultMaterial, setProceduralEmission, useItemLightPool, useLibraryMaterialsVersion, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Mesh, Vector3 } from 'three';
+import { canRegisterItemLight } from '../shared/item-light-placement.js';
+import { releaseFromBatch } from '../shared/node-batch/release.js';
+import { setProceduralMotionPlaying } from './animation.js';
+import { acquireProceduralGeometry, geometrySignature } from './geometry.js';
+const axis = new Vector3();
+const noRaycast = () => { };
+// What a hidden mesh raycast with, which may be SceneBVH's accelerated raycast.
+const hiddenRaycasts = new WeakMap();
+// Hidden mesh sets are skipped by raycasts too (three raycasts invisible objects).
+function setDrawn(container, drawn) {
+    container.visible = drawn;
+    container.traverse((child) => {
+        if (!(child instanceof Mesh))
+            return;
+        if (drawn) {
+            child.raycast = hiddenRaycasts.get(child) ?? child.raycast;
+            hiddenRaycasts.delete(child);
+        }
+        else if (child.raycast !== noRaycast) {
+            hiddenRaycasts.set(child, child.raycast);
+            child.raycast = noRaycast;
+        }
+    });
+}
 export default function ProceduralRenderer({ node }) {
     const ref = useRef(null);
+    // Part-tree designs draw their merged rest pose while idle and their joint groups while moving.
+    const restRef = useRef(null);
+    const splitRef = useRef(null);
+    const controller = useRef(null);
+    const lastCommand = useRef(0);
+    const awake = useRef(false);
+    const invalidate = useThree((state) => state.invalidate);
     const overrides = useLiveNodeOverrides((s) => s.overrides.get(node.id));
     const live = useLiveTransforms((s) => s.get(node.id));
     const effective = { ...node, ...overrides };
-    const host = useScene((s) => (node.parentId ? s.nodes[node.parentId] : undefined));
+    // Only wall and ceiling hosts pose a design; a level host changes with every child it gains.
+    const host = useScene((s) => {
+        const parent = node.parentId ? s.nodes[node.parentId] : undefined;
+        return parent?.type === 'wall' || parent?.type === 'ceiling' ? parent : undefined;
+    });
     const hostOverride = useLiveNodeOverrides((s) => node.parentId ? s.overrides.get(node.parentId) : undefined);
     const pose = proceduralLocalPose(effective, host ? { [host.id]: { ...host, ...hostOverride } } : {});
     const sceneMaterials = useScene((s) => s.materials);
@@ -19,47 +55,260 @@ export default function ProceduralRenderer({ node }) {
     const libraryVersion = useLibraryMaterialsVersion();
     const key = geometrySignature(effective);
     const [built, setBuilt] = useState(null);
+    const lightsOn = useInteractive((state) => state.procedural[node.id]?.lightsOn ?? state.lampDefault);
     const handlers = useNodeEvents(node, 'procedural-item');
     useRegistry(node.id, 'procedural-item', ref);
+    const rotation = live?.rotation === undefined
+        ? pose.rotation
+        : [pose.rotation[0], live.rotation, pose.rotation[2]];
+    const position = live?.position ?? pose.position;
+    const poseKey = JSON.stringify([position, rotation]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: poseKey is the rendered pose
     useLayoutEffect(() => {
-        // React can restore base Y after the previous frame consumed the elevation mark.
+        // Re-rendering a changed pose restores base Y after the previous frame consumed the
+        // elevation mark; an unchanged one is not reapplied, and a mark would release the batch.
         useScene.getState().markDirty(node.id);
-    });
+    }, [poseKey, node.id]);
     useLayoutEffect(() => {
         const [recipe, parameters] = JSON.parse(key);
         const lease = acquireProceduralGeometry({ recipe, parameters });
         setBuilt(lease.value);
         return lease.release;
     }, [key]);
+    useEffect(() => () => {
+        useInteractive.getState().removeProcedural(node.id);
+        setProceduralMotionPlaying(node.id, false);
+    }, [node.id]);
+    // A recessed design's host ceiling re-cuts whenever its cut can move, live values included.
+    const cutKey = effective.recipe.cuts
+        ? JSON.stringify([
+            node.parentId,
+            effective.position,
+            effective.rotation,
+            effective.parameters,
+            effective.visible,
+            effective.recipe.cuts,
+            effective.recipe.surfaces,
+            effective.recipe.mounting?.reference,
+        ])
+        : '';
+    useEffect(() => {
+        const parentId = node.parentId;
+        if (!(cutKey && parentId))
+            return;
+        const recut = (id = parentId) => {
+            if (id && useScene.getState().nodes[id])
+                useScene.getState().markDirty(id);
+        };
+        recut();
+        // A move preview of this design re-cuts its ceiling, and the ceiling it previews on, on
+        // every step.
+        const unsubscribe = usePlacementPreview.subscribe((state, previous) => {
+            if (state.node?.id !== node.id && previous.node?.id !== node.id)
+                return;
+            recut();
+            for (const id of new Set([state.node?.parentId, previous.node?.parentId]))
+                if (id !== parentId && useScene.getState().nodes[id]?.type === 'ceiling')
+                    recut(id);
+        });
+        return () => {
+            unsubscribe();
+            recut();
+            const preview = usePlacementPreview.getState().node;
+            if (preview?.id === node.id && preview.parentId !== parentId)
+                recut(preview.parentId);
+        };
+    }, [cutKey, node.parentId, node.id]);
+    useLayoutEffect(() => {
+        // Continuous joints start running, as in the baked viewer; flat spins keep #930's default.
+        const running = new Set((node.recipe.joints ?? [])
+            .filter((joint) => joint.kind === 'continuous')
+            .map((joint) => joint.child));
+        controller.current = built
+            ? new ProceduralMotionController(built.evaluation.motions, Object.fromEntries([...running].map((partId) => [partId, true])))
+            : null;
+        lastCommand.current = 0;
+        if (built)
+            useInteractive
+                .getState()
+                .initProcedural(node.id, [...new Set(built.evaluation.motions.map((motion) => motion.partId))], [...running]);
+        for (const motion of built?.evaluation.motions ?? []) {
+            const group = ref.current?.getObjectByName(`${node.id}__motion__${motion.id}`);
+            if (!group)
+                continue;
+            group.position.set(...motionRestOffset(motion, built.evaluation.motions));
+            group.quaternion.identity();
+        }
+        if (restRef.current)
+            setDrawn(restRef.current, true);
+        if (splitRef.current)
+            setDrawn(splitRef.current, false);
+        if (built?.evaluation.motions.length) {
+            awake.current = true;
+            invalidate();
+        }
+    }, [built, node.id, invalidate]);
+    useEffect(() => useInteractive.subscribe((state, previous) => {
+        if (state.procedural[node.id] === previous.procedural[node.id])
+            return;
+        awake.current = true;
+        invalidate();
+    }), [node.id, invalidate]);
+    useFrame((_, delta) => {
+        if (!awake.current || !built || !ref.current)
+            return;
+        const state = useInteractive.getState().procedural[node.id];
+        if (state?.motionCommand && state.motionCommand.sequence > lastCommand.current) {
+            controller.current?.command(state.motionCommand);
+            lastCommand.current = state.motionCommand.sequence;
+        }
+        const frame = controller.current?.tick(delta);
+        if (!frame)
+            return;
+        for (const motion of built.evaluation.motions) {
+            const group = ref.current.getObjectByName(`${node.id}__motion__${motion.id}`);
+            if (!group)
+                continue;
+            const angle = motion.kind === 'spin'
+                ? (frame.spins[motion.id]?.phase ?? 0)
+                : motion.amount * (frame.fractions[motion.id] ?? 0);
+            if (motion.kind === 'slide')
+                group.position
+                    .set(...motionRestOffset(motion, built.evaluation.motions))
+                    .addScaledVector(axis.set(...motionAxis(motion)), angle);
+            else if (motion.direction)
+                group.quaternion.setFromAxisAngle(axis.set(...motion.direction), angle);
+            else
+                group.rotation[motion.axis] = angle;
+        }
+        if (restRef.current && splitRef.current) {
+            const moving = frame.pending ||
+                Object.values(frame.fractions).some((fraction) => fraction > 0) ||
+                Object.values(frame.spins).some((spin) => spin.speed > 0);
+            if (restRef.current.visible === moving) {
+                setDrawn(restRef.current, !moving);
+                setDrawn(splitRef.current, moving);
+            }
+        }
+        // A playing motion draws its own meshes; it rejoins the node batch at the settled pose.
+        if (setProceduralMotionPlaying(node.id, frame.pending))
+            releaseFromBatch(node.id);
+        if (frame.pending)
+            invalidate();
+        else
+            awake.current = false;
+    }, -1);
+    useLayoutEffect(() => {
+        if (!built || !ref.current || !canRegisterItemLight(effective.metadata))
+            return;
+        const pool = useItemLightPool.getState();
+        const keys = [];
+        for (const light of built.evaluation.lights) {
+            const key = `${node.id}:procedural:${light.id}`;
+            keys.push(key);
+            const local = new Vector3(...light.position);
+            const motion = built.evaluation.motions.find((entry) => entry.id === light.motionGroup);
+            if (motion)
+                local.sub(new Vector3(...motion.pivot));
+            pool.register({
+                key,
+                nodeId: node.id,
+                color: light.color,
+                distance: light.distance,
+                getWorldPosition: (out) => {
+                    const root = ref.current;
+                    if (!root)
+                        return false;
+                    const object = light.motionGroup
+                        ? root.getObjectByName(`${node.id}__motion__${light.motionGroup}`)
+                        : root;
+                    if (!object)
+                        return false;
+                    object.updateWorldMatrix(true, false);
+                    out.copy(local).applyMatrix4(object.matrixWorld);
+                    return true;
+                },
+                getIntensity: () => light.intensity,
+                isEligible: () => effective.visible !== false &&
+                    (useInteractive.getState().procedural[node.id]?.lightsOn ??
+                        useInteractive.getState().lampDefault),
+            });
+        }
+        return () => {
+            for (const key of keys)
+                useItemLightPool.getState().unregister(key);
+        };
+    }, [built, node.id, effective.visible, effective.metadata?.isNew]);
     const materialKey = JSON.stringify([effective.recipe.slots, effective.slots, libraryVersion]);
     const materials = useMemo(() => {
         const [slots, overrides] = JSON.parse(materialKey);
+        const emission = new Map(built?.evaluation.lights
+            .filter((light) => light.emissiveSlot)
+            .map((light) => [light.emissiveSlot, light.color]) ?? []);
         return new Map(slots.map((s) => {
             const ref = overrides[s.id];
             const material = textures
                 ? (resolveMaterialRef(ref, sceneMaterials, shading) ??
                     resolveSlotDefaultMaterial(ref?.startsWith('#') ? ref : s.color, shading, 0.75))
                 : createSurfaceRoleMaterial('furnishing', colorPreset, undefined, sceneTheme);
-            return [s.id, material];
+            return [
+                s.id,
+                emission.has(s.id)
+                    ? cloneWithProceduralEmission(material, emission.get(s.id), true)
+                    : material,
+            ];
         }));
-    }, [materialKey, sceneMaterials, shading, textures, colorPreset, sceneTheme]);
+    }, [materialKey, sceneMaterials, shading, textures, colorPreset, sceneTheme, built]);
+    useLayoutEffect(() => {
+        const slots = new Set();
+        for (const light of built?.evaluation.lights ?? []) {
+            if (light.emissiveSlot) {
+                slots.add(light.emissiveSlot);
+                const material = materials.get(light.emissiveSlot);
+                if (material)
+                    setProceduralEmission(material, lightsOn);
+            }
+        }
+        for (const mesh of ref.current ? proceduralSlotMeshes(ref.current, slots) : []) {
+            const active = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+            for (const material of active)
+                setProceduralEmission(material, lightsOn);
+        }
+    }, [built, materials, lightsOn]);
     useLayoutEffect(() => () => {
         for (const material of materials.values())
             if (!material.userData.__pascalCachedMaterial)
                 material.dispose();
     }, [materials]);
-    const meshes = useMemo(() => built?.batches.map((batch) => {
-        const mesh = new Mesh(batch.geometry, materials.get(batch.slot));
-        mesh.name = `slot_${batch.slot}`;
-        mesh.userData = { slotId: batch.slot, proceduralRanges: batch.ranges };
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
-        return mesh;
-    }) ?? [], [built, materials]);
-    const rotation = live?.rotation === undefined
-        ? pose.rotation
-        : [pose.rotation[0], live.rotation, pose.rotation[2]];
-    return (_jsxs("group", { ref: ref, position: live?.position ?? pose.position, rotation: rotation, visible: effective.visible, ...handlers, children: [meshes.map((mesh) => (_jsx("primitive", { object: mesh, dispose: null }, mesh.uuid))), effective.children.map((id) => {
+    const meshes = useMemo(() => {
+        const make = (batch, geometry = batch.geometry) => {
+            const mesh = new Mesh(geometry, materials.get(batch.slot));
+            mesh.name = `slot_${batch.slot}`;
+            mesh.userData = { slotId: batch.slot, proceduralRanges: batch.ranges };
+            mesh.castShadow = materialCastsShadow(mesh.material);
+            mesh.receiveShadow = true;
+            return { mesh, motionGroup: batch.motionGroup };
+        };
+        return {
+            split: built?.batches.map((batch) => make(batch, batch.motionGeometry ?? batch.geometry)) ?? [],
+            rest: built?.rest?.map((batch) => make(batch)) ?? [],
+        };
+    }, [built, materials]);
+    const motions = built?.evaluation.motions ?? [];
+    const motionGroup = (motion) => (_jsxs("group", { name: `${node.id}__motion__${motion.id}`, position: motionRestOffset(motion, motions), userData: {
+            proceduralMotion: {
+                nodeId: node.id,
+                partId: motion.partId,
+                groupId: motion.id,
+                kind: motion.kind,
+            },
+        }, children: [meshes.split
+                .filter((entry) => entry.motionGroup === motion.id)
+                .map(({ mesh }) => (_jsx("primitive", { object: mesh, dispose: null }, mesh.uuid))), motions.filter((child) => child.parent === motion.id).map(motionGroup)] }, motion.id));
+    const split = (_jsxs(_Fragment, { children: [meshes.split
+                .filter((entry) => !entry.motionGroup)
+                .map(({ mesh }) => (_jsx("primitive", { object: mesh, dispose: null }, mesh.uuid))), motions.filter((motion) => !motion.parent).map(motionGroup)] }));
+    return (_jsxs("group", { ref: ref, userData: { pascalId: node.id }, position: position, rotation: rotation, visible: effective.visible, ...handlers, children: [meshes.rest.length ? (_jsxs(_Fragment, { children: [_jsx("group", { ref: restRef, userData: { pascalProceduralRest: true }, children: meshes.rest.map(({ mesh }) => (_jsx("primitive", { object: mesh, dispose: null }, mesh.uuid))) }), _jsx("group", { ref: splitRef, userData: { pascalProceduralSplit: true }, visible: false, children: split })] })) : (split), effective.children.map((id) => {
                 const surface = built?.evaluation.surfaces.find((s) => s.id === effective.attachments[id]);
                 return (_jsx("group", { position: surface?.position ?? [0, 0, 0], rotation: surface?.rotation, children: _jsx(NodeRenderer, { nodeId: id }) }, id));
             })] }));

package/dist/ridge-vent/definition.d.ts

@@ -1,5 +1,5 @@
 import { type NodeDefinition } from '@pascal-app/core';
-import { RidgeVentNode } from './schema';
+import { RidgeVentNode } from './schema.js';
 /**
  * Ridge vent — a ventilation strip running along the ridge of a roof
  * segment. Parented to a `roof-segment`; position is segment-local.

package/dist/ridge-vent/definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAGpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAwIxC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,OAAO,aAAa,CA4DpE,CAAA"}
+{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAGpB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAwIxC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,OAAO,aAAa,CA6DpE,CAAA"}

package/dist/ridge-vent/definition.js

@@ -1,8 +1,8 @@
 import { RidgeVentNode as RidgeVentNodeSchema, } from '@pascal-app/core';
-import { surfacePaintCapability } from '../shared/surface-paint';
-import { buildRidgeVentFloorplan } from './floorplan';
-import { ridgeVentParametrics } from './parametrics';
-import { RidgeVentNode } from './schema';
+import { surfacePaintCapability } from '../shared/surface-paint.js';
+import { buildRidgeVentFloorplan } from './floorplan.js';
+import { ridgeVentParametrics } from './parametrics.js';
+import { RidgeVentNode } from './schema.js';
 // Edge-to-arrow-center offset, matching the box-vent / chimney cadence.
 const SIDE_HANDLE_OFFSET = 0.25;
 const HEIGHT_HANDLE_OFFSET = 0.15;
@@ -156,6 +156,7 @@ export const ridgeVentDefinition = {
         return rest;
     },
     capabilities: {
+        exterior: true,
         selectable: { hitVolume: 'bbox' },
         duplicable: true,
         deletable: true,
@@ -172,12 +173,12 @@ export const ridgeVentDefinition = {
     rendersChildren: false,
     renderer: {
         kind: 'parametric',
-        module: () => import('./renderer'),
+        module: () => import('./renderer.js'),
     },
-    preview: () => import('./preview'),
-    tool: () => import('./tool'),
+    preview: () => import('./preview.js'),
+    tool: () => import('./tool.js'),
     affordanceTools: {
-        move: () => import('./move-tool'),
+        move: () => import('./move-tool.js'),
     },
     toolHints: [
         { key: 'Left click', label: 'Place ridge vent on roof' },

package/dist/ridge-vent/geometry.js

@@ -1,6 +1,6 @@
 import { getDutchRoofMetrics, getRidgeVentLinesForSegment, normalizeRoofSegmentTrim, } from '@pascal-app/core';
 import * as THREE from 'three';
-import { getRoofTopSurfaceY } from '../shared/roof-surface';
+import { getRoofTopSurfaceY } from '../shared/roof-surface.js';
 const ARC_SEGS = 16;
 const SHINGLED_TAB_SIZE = 0.3;
 const DEFAULT_RIDGE_VENT_LENGTH = 2;

package/dist/ridge-vent/index.d.ts

@@ -1,4 +1,4 @@
-export { ridgeVentDefinition } from './definition';
-export { buildRidgeVentGeometry } from './geometry';
-export { RidgeVentNode } from './schema';
+export { ridgeVentDefinition } from './definition.js';
+export { buildRidgeVentGeometry } from './geometry.js';
+export { RidgeVentNode } from './schema.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/ridge-vent/index.js

@@ -1,3 +1,3 @@
-export { ridgeVentDefinition } from './definition';
-export { buildRidgeVentGeometry } from './geometry';
-export { RidgeVentNode } from './schema';
+export { ridgeVentDefinition } from './definition.js';
+export { buildRidgeVentGeometry } from './geometry.js';
+export { RidgeVentNode } from './schema.js';

package/dist/ridge-vent/move-tool.js

@@ -3,11 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { emitter, sceneRegistry, useScene, } from '@pascal-app/core';
 import { consumePlacementDragRelease, markToolCancelConsumed, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useCallback, useEffect, useState } from 'react';
-import { createRelativeRoofDrag, roofSegmentLocalToBuildingLocal, snapRelativeRoofDragTarget, } from '../shared/relative-roof-drag';
-import { resolveRidgeSnap } from '../shared/ridge-snap';
-import { getRoofTopSurfaceY } from '../shared/roof-surface';
-import { clearRoofSurfacePlacementGuides, publishRoofSurfaceNodePlacementGuides, } from '../shared/roof-surface-placement-guides';
-import RidgeVentPreview from './preview';
+import { createRelativeRoofDrag, roofSegmentLocalToBuildingLocal, snapRelativeRoofDragTarget, } from '../shared/relative-roof-drag.js';
+import { resolveRidgeSnap } from '../shared/ridge-snap.js';
+import { getRoofTopSurfaceY } from '../shared/roof-surface.js';
+import { clearRoofSurfacePlacementGuides, publishRoofSurfaceNodePlacementGuides, } from '../shared/roof-surface-placement-guides.js';
+import RidgeVentPreview from './preview.js';
 /**
  * Ridge-vent move tool. Mirrors the box-vent move flow — ghost follows
  * the cursor over any roof segment, click commits the new position +

package/dist/ridge-vent/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/panel.tsx"],"names":[],"mappings":"AAwBA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,uCAiQrC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/panel.tsx"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,uCA6OrC"}

package/dist/ridge-vent/panel.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RidgeVentNode as RidgeVentSchema, useScene, } from '@pascal-app/core';
-import { ActionButton, ActionGroup, PanelSection, PanelWrapper, SegmentedControl, SliderControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { useScene } from '@pascal-app/core';
+import { ActionButton, ActionGroup, duplicateNodeAndPickUp, PanelSection, PanelWrapper, SegmentedControl, SliderControl, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Copy, Move, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
@@ -42,27 +42,9 @@ export default function RidgeVentPanel() {
         setSelection({ selectedIds: [] });
     }, [node, setMovingNode, setSelection]);
     const handleDuplicate = useCallback(() => {
-        if (!node)
-            return;
-        triggerSFX('sfx:item-pick');
-        const parentId = node.roofSegmentId;
-        if (!parentId)
-            return;
-        const state = useScene.getState();
-        const meta = typeof node.metadata === 'object' && node.metadata !== null
-            ? node.metadata
-            : {};
-        const cloneInput = {
-            ...node,
-            id: undefined,
-            metadata: { ...meta, isNew: true },
-        };
-        const cloned = RidgeVentSchema.parse(cloneInput);
-        state.createNode(cloned, parentId);
-        state.dirtyNodes.add(parentId);
-        setMovingNode(cloned);
-        setSelection({ selectedIds: [] });
-    }, [node, setMovingNode, setSelection]);
+        if (node)
+            duplicateNodeAndPickUp(node);
+    }, [node]);
     const handleDelete = useCallback(() => {
         if (!(selectedId && node))
             return;
@@ -114,5 +96,5 @@ export default function RidgeVentPanel() {
                             position: [node.position[0] ?? 0, node.position[1] ?? 0, v],
                         }), onCommit: (v) => handleUpdate({
                             position: [node.position[0] ?? 0, node.position[1] ?? 0, v],
-                        }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: node.position[2] ?? 0 }), _jsx(SliderControl, { label: "Rotation", max: 180, min: -180, onChange: (deg) => handleUpdate({ rotation: (deg * Math.PI) / 180 }), onCommit: (deg) => handleUpdate({ rotation: (deg * Math.PI) / 180 }), precision: 0, restoreOnCommit: false, step: 1, unit: "\u00B0", value: Math.round(((node.rotation ?? 0) * 180) / Math.PI) })] }), _jsx(PanelSection, { title: "Actions", children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: "Move", onClick: handleMove }), _jsx(ActionButton, { icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: "Duplicate", onClick: handleDuplicate }), _jsx(ActionButton, { className: "hover:bg-red-500/20", icon: _jsx(Trash2, { className: "h-3.5 w-3.5 text-red-400" }), label: "Delete", onClick: handleDelete })] }) })] }));
+                        }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: node.position[2] ?? 0 }), _jsx(SliderControl, { label: "Rotation", max: 180, min: -180, onChange: (deg) => handleUpdate({ rotation: (deg * Math.PI) / 180 }), onCommit: (deg) => handleUpdate({ rotation: (deg * Math.PI) / 180 }), precision: 0, restoreOnCommit: false, step: 1, unit: "\u00B0", value: Math.round(((node.rotation ?? 0) * 180) / Math.PI) })] }), _jsx(PanelSection, { title: "Actions", children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: "Move", onClick: handleMove }), _jsx(ActionButton, { icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: "Duplicate", onClick: handleDuplicate }), _jsx(ActionButton, { className: "hover:bg-red-500/20", icon: _jsx(Trash2, { className: "h-3.5 w-3.5 text-red-600 dark:text-red-400" }), label: "Delete", onClick: handleDelete })] }) })] }));
 }

package/dist/ridge-vent/parametrics.d.ts

@@ -1,4 +1,4 @@
 import type { ParametricDescriptor } from '@pascal-app/core';
-import type { RidgeVentNode } from './schema';
+import type { RidgeVentNode } from './schema.js';
 export declare const ridgeVentParametrics: ParametricDescriptor<RidgeVentNode>;
 //# sourceMappingURL=parametrics.d.ts.map

package/dist/ridge-vent/parametrics.js

@@ -2,7 +2,7 @@ export const ridgeVentParametrics = {
     // Custom panel exposes Position sliders + Move/Duplicate actions
     // alongside the style/dimensions controls. See box-vent's parametrics
     // for the same pattern.
-    customPanel: () => import('./panel'),
+    customPanel: () => import('./panel.js'),
     groups: [
         {
             label: 'Style',

package/dist/ridge-vent/preview.d.ts

@@ -1,4 +1,4 @@
-import type { RidgeVentNode } from './schema';
+import type { RidgeVentNode } from './schema.js';
 declare const RidgeVentPreview: ({ node, invalid }: {
     node: RidgeVentNode;
     invalid?: boolean;

package/dist/ridge-vent/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/preview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C,QAAA,MAAM,gBAAgB,GAAI,mBAAmB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,gCAgDtF,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/preview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C,QAAA,MAAM,gBAAgB,sBAAuB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,gCAgDtF,CAAA;eAEc,gBAAgB"}

package/dist/ridge-vent/preview.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import * as THREE from 'three';
-import { INVALID_GHOST_COLOR } from '../shared/ghost-materials';
-import { buildRidgeVentGeometry } from './geometry';
+import { INVALID_GHOST_COLOR } from '../shared/ghost-materials.js';
+import { buildRidgeVentGeometry } from './geometry.js';
 const RidgeVentPreview = ({ node, invalid }) => {
     // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
     const geometry = useMemo(() => buildRidgeVentGeometry(node), [node.length, node.width, node.height, node.style, node.endCaps]);

package/dist/ridge-vent/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,aAAa,EAMnB,MAAM,kBAAkB,CAAA;AAuDzB;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,iBAAiB,GAAI,qBAAqB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,uCAiMtE,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,aAAa,EAMnB,MAAM,kBAAkB,CAAA;AAwDzB;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,iBAAiB,wBAAyB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,uCA4MtE,CAAA;eAEc,iBAAiB"}

package/dist/ridge-vent/renderer.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getEffectiveRoofSurfaceMaterial, getEffectiveSegmentSurfaceMaterial, normalizeRoofSegmentTrim, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
-import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, getRoofMaterialArray, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { createMaterial, createSurfaceRoleMaterial, getRoofMaterialArray, resolveMaterialRef, useNodeEvents, useViewer, } from '@pascal-app/viewer';
 import { useEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
-import { RIDGE_LIFT, resolveRidgeSnap } from '../shared/ridge-snap';
-import { getRoofTopSurfaceY } from '../shared/roof-surface';
-import { useSegmentTrimClippedGeometry } from '../shared/use-segment-trim-clip';
-import { buildRidgeVentGeometry } from './geometry';
+import { RIDGE_LIFT, resolveRidgeSnap } from '../shared/ridge-snap.js';
+import { getRoofTopSurfaceY } from '../shared/roof-surface.js';
+import { useSegmentTrimClippedGeometry } from '../shared/use-segment-trim-clip.js';
+import { buildRidgeVentGeometry } from './geometry.js';
 function ridgeVentSegmentGeometryKey(segment) {
     if (!segment)
         return 'none';
@@ -21,6 +21,7 @@ function ridgeVentSegmentGeometryKey(segment) {
         segment.wallThickness,
         segment.deckThickness,
         segment.overhang,
+        segment.gableOverhang,
         segment.shingleThickness,
         segment.gambrelLowerWidthRatio,
         segment.gambrelLowerHeightRatio,
@@ -96,6 +97,7 @@ const RidgeVentRenderer = ({ node: storeNode }) => {
     const parentRoof = useScene((state) => segmentStore?.parentId
         ? state.nodes[segmentStore.parentId]
         : undefined);
+    const sceneMaterials = useScene((state) => state.materials);
     const segmentGeometryKey = ridgeVentSegmentGeometryKey(segment);
     const rotationY = node.rotation ?? 0;
     const snap = useMemo(() => segment && Math.abs(rotationY) < 1e-5
@@ -131,16 +133,14 @@ const RidgeVentRenderer = ({ node: storeNode }) => {
         const createDefaultTopMaterial = () => {
             const parentSpec = parentRoof ? getEffectiveRoofSurfaceMaterial(parentRoof, 'top') : undefined;
             const spec = segment ? getEffectiveSegmentSurfaceMaterial(segment, 'top', parentSpec) : null;
-            if (typeof spec?.materialPreset === 'string') {
-                const resolved = createMaterialFromPresetRef(spec.materialPreset, shading);
-                if (resolved)
-                    return resolved;
-            }
+            const resolved = resolveMaterialRef(spec?.materialPreset, sceneMaterials, shading);
+            if (resolved)
+                return resolved;
             if (spec?.material !== undefined) {
                 return createMaterial(spec.material, shading);
             }
             const roofMaterials = parentRoof
-                ? getRoofMaterialArray(parentRoof, shading, textures, colorPreset, sceneTheme)
+                ? getRoofMaterialArray(parentRoof, shading, textures, colorPreset, sceneTheme, null, sceneMaterials)
                 : null;
             return (roofMaterials?.[3] ??
                 createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme));
@@ -149,7 +149,8 @@ const RidgeVentRenderer = ({ node: storeNode }) => {
             return createMaterial(node.material, shading);
         }
         if (node.materialPreset) {
-            return createMaterialFromPresetRef(node.materialPreset, shading) ?? createDefaultTopMaterial();
+            return (resolveMaterialRef(node.materialPreset, sceneMaterials, shading) ??
+                createDefaultTopMaterial());
         }
         return createDefaultTopMaterial();
     }, [
@@ -161,6 +162,7 @@ const RidgeVentRenderer = ({ node: storeNode }) => {
         node.materialPreset,
         segment,
         parentRoof,
+        sceneMaterials,
     ]);
     // Map vent-local geometry into the host segment's local frame (where the trim
     // cut prisms live). Recompose the same pose the inner mesh group is mounted

package/dist/ridge-vent/tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/tool.tsx"],"names":[],"mappings":"AA6BA;;;;GAIG;AACH,QAAA,MAAM,aAAa,mCA0JlB,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/ridge-vent/tool.tsx"],"names":[],"mappings":"AA6BA;;;;GAIG;AACH,QAAA,MAAM,aAAa,mCA0JlB,CAAA;eAEc,aAAa"}