@pascal-app/nodes 0.1.1

package/dist/roof/floorplan.js

@@ -0,0 +1,271 @@
+import { unionPolygons } from '@pascal-app/viewer';
+import { getRoofSegmentPlanLinework } from '../roof-segment/floorplan';
+function signedArea(ring) {
+    let a = 0;
+    const n = ring.length;
+    for (let i = 0; i < n; i++) {
+        const p = ring[i];
+        const q = ring[(i + 1) % n];
+        a += p[0] * q[1] - q[0] * p[1];
+    }
+    return a / 2;
+}
+/** Distance `t >= 0` from `V` along unit dir `(dx,dz)` to where the ray first
+ *  meets segment `A→B`, or null. (Used to terminate valleys at ridges.) */
+function rayHitT(vx, vz, dx, dz, ax, az, bx, bz) {
+    const ex = bx - ax;
+    const ez = bz - az;
+    const denom = dx * ez - dz * ex;
+    if (Math.abs(denom) < 1e-9)
+        return null;
+    const wx = ax - vx;
+    const wz = az - vz;
+    const t = (wx * ez - wz * ex) / denom;
+    const s = (wx * dz - wz * dx) / denom;
+    if (t < 0)
+        return null;
+    if (s < -1e-6 || s > 1 + 1e-6)
+        return null;
+    return t;
+}
+function pointInPolygon(px, pz, poly) {
+    let inside = false;
+    for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+        const pi = poly[i];
+        const pj = poly[j];
+        if (pi[1] > pz !== pj[1] > pz &&
+            px < ((pj[0] - pi[0]) * (pz - pi[1])) / (pj[1] - pi[1]) + pi[0]) {
+            inside = !inside;
+        }
+    }
+    return inside;
+}
+/** Parametric `t` in (0,1) along `p1→p2` where it crosses segment `a→b`, else null. */
+function segCrossT(p1, p2, a, b) {
+    const rx = p2[0] - p1[0];
+    const rz = p2[1] - p1[1];
+    const ex = b[0] - a[0];
+    const ez = b[1] - a[1];
+    const denom = rx * ez - rz * ex;
+    if (Math.abs(denom) < 1e-12)
+        return null;
+    const wx = a[0] - p1[0];
+    const wz = a[1] - p1[1];
+    const t = (wx * ez - wz * ex) / denom;
+    const s = (wx * rz - wz * rx) / denom;
+    if (t <= 1e-4 || t >= 1 - 1e-9)
+        return null;
+    if (s < -1e-6 || s > 1 + 1e-6)
+        return null;
+    return t;
+}
+/** A segment's footprint + ridge/hip/break/slope linework, in world plan coords. */
+function buildSegPlan(roof, seg) {
+    const cosRoof = Math.cos(-roof.rotation);
+    const sinRoof = Math.sin(-roof.rotation);
+    const segCx = roof.position[0] + seg.position[0] * cosRoof - seg.position[2] * sinRoof;
+    const segCz = roof.position[2] + seg.position[0] * sinRoof + seg.position[2] * cosRoof;
+    const rot = -(roof.rotation + seg.rotation);
+    const cos = Math.cos(rot);
+    const sin = Math.sin(rot);
+    const tp = (lx, lz) => [
+        segCx + lx * cos - lz * sin,
+        segCz + lx * sin + lz * cos,
+    ];
+    const hw = Math.max(seg.width, 0.01) / 2;
+    const hd = Math.max(seg.depth, 0.01) / 2;
+    const lw = getRoofSegmentPlanLinework(seg);
+    const mapSeg = (s) => [
+        tp(s[0][0], s[0][1]),
+        tp(s[1][0], s[1][1]),
+    ];
+    return {
+        footprint: [tp(-hw, -hd), tp(hw, -hd), tp(hw, hd), tp(-hw, hd)],
+        ridges: lw.ridges.map(mapSeg),
+        hips: lw.hips.map(mapSeg),
+        breaks: lw.breaks.map(mapSeg),
+        slope: lw.slope
+            ? {
+                tail: tp(lw.slope.tail[0], lw.slope.tail[1]),
+                head: tp(lw.slope.head[0], lw.slope.head[1]),
+            }
+            : null,
+    };
+}
+/**
+ * Roof-level floor-plan builder. Draws the whole merged-roof plan: the
+ * unioned silhouette, the valley diagonals at concave junctions, and every
+ * segment's ridge/hip/break linework — clipped so a line stops at the valley
+ * where its segment overlaps a neighbour, instead of running on at the
+ * segment's full length into the cut-away part.
+ *
+ * Drawing all the linework here (rather than per-segment) is what lets the
+ * clip work: the valleys and the neighbouring footprints are all in hand, so
+ * each line can be trimmed to the actual merged geometry. The segment
+ * builder keeps only its hit-target / selection chrome.
+ *
+ * Composition uses the floor plan's negated-rotation convention
+ * (segment-local → roof-local → plan). `unionPolygons` returns one ring per
+ * disjoint group, so non-touching segments each keep their own outline. The
+ * group is decorative (`pointerEvents: 'none'`) — clicks fall through to the
+ * segment hit-targets.
+ */
+export function buildRoofFloorplan(node, ctx) {
+    const segments = ctx.children.filter((c) => c.type === 'roof-segment');
+    if (segments.length === 0)
+        return null;
+    const plans = segments.map((s) => buildSegPlan(node, s));
+    const rings = unionPolygons(plans.map((p) => p.footprint));
+    if (rings.length === 0)
+        return null;
+    // Valleys at concave (reflex) corners of the merged outline. Each runs
+    // along the interior angle bisector and terminates at the nearest segment
+    // ridge — the diagonal where two merged slopes meet.
+    const allRidges = plans.flatMap((p) => p.ridges);
+    const valleys = [];
+    for (const ring of rings) {
+        const n = ring.length;
+        if (n < 3)
+            continue;
+        const orient = signedArea(ring) > 0 ? 1 : -1;
+        for (let i = 0; i < n; i++) {
+            const prev = ring[(i - 1 + n) % n];
+            const V = ring[i];
+            const next = ring[(i + 1) % n];
+            const ax = prev[0] - V[0];
+            const az = prev[1] - V[1];
+            const bx = next[0] - V[0];
+            const bz = next[1] - V[1];
+            if ((ax * bz - az * bx) * orient <= 0)
+                continue; // not reflex
+            const la = Math.hypot(ax, az) || 1;
+            const lb = Math.hypot(bx, bz) || 1;
+            let dx = -(ax / la + bx / lb);
+            let dz = -(az / la + bz / lb);
+            const dl = Math.hypot(dx, dz);
+            if (dl < 1e-6)
+                continue;
+            dx /= dl;
+            dz /= dl;
+            let bestT = Number.POSITIVE_INFINITY;
+            for (const [A, B] of allRidges) {
+                const t = rayHitT(V[0], V[1], dx, dz, A[0], A[1], B[0], B[1]);
+                if (t !== null && t > 1e-4 && t < bestT)
+                    bestT = t;
+            }
+            if (!Number.isFinite(bestT))
+                continue;
+            valleys.push([
+                [V[0], V[1]],
+                [V[0] + dx * bestT, V[1] + dz * bestT],
+            ]);
+        }
+    }
+    const view = ctx.viewState;
+    const palette = view?.palette;
+    const showSelectedChrome = (view?.selected ?? false) || (view?.highlighted ?? false);
+    const ink = showSelectedChrome && palette ? palette.selectedStroke : '#111111';
+    const eaveWidth = showSelectedChrome ? 0.04 : 0.03;
+    const ridgeWidth = showSelectedChrome ? 0.05 : 0.038;
+    const hipWidth = showSelectedChrome ? 0.04 : 0.026;
+    const children = [];
+    const pushLine = (a, b, width) => {
+        children.push({
+            kind: 'line',
+            x1: a[0],
+            y1: a[1],
+            x2: b[0],
+            y2: b[1],
+            stroke: ink,
+            strokeWidth: width,
+            strokeLinecap: 'round',
+            pointerEvents: 'none',
+        });
+    };
+    // Merged outline (eaves).
+    for (const ring of rings) {
+        if (ring.length < 3)
+            continue;
+        children.push({
+            kind: 'polygon',
+            points: ring.map(([x, z]) => [x, z]),
+            fill: 'none',
+            stroke: ink,
+            strokeWidth: eaveWidth,
+            strokeLinejoin: 'miter',
+            pointerEvents: 'none',
+        });
+    }
+    // Valley diagonals.
+    for (const v of valleys)
+        pushLine(v[0], v[1], hipWidth);
+    // Per-segment ridge / hip / break linework, clipped to the merged geometry:
+    // an endpoint that overshoots into another segment is pulled back to the
+    // valley it crosses (the junction), so a ridge stops at the diagonal.
+    const footprints = plans.map((p) => p.footprint);
+    const clipEnd = (pt, other, ownIndex) => {
+        let inOther = false;
+        for (let i = 0; i < footprints.length; i++) {
+            if (i === ownIndex)
+                continue;
+            if (pointInPolygon(pt[0], pt[1], footprints[i])) {
+                inOther = true;
+                break;
+            }
+        }
+        if (!inOther)
+            return pt;
+        let bestT = Number.POSITIVE_INFINITY; // nearest valley crossing to the overshoot
+        for (const v of valleys) {
+            const t = segCrossT(pt, other, v[0], v[1]);
+            if (t !== null && t < bestT)
+                bestT = t;
+        }
+        if (!Number.isFinite(bestT))
+            return pt; // overshoots but no valley to stop at
+        return [pt[0] + (other[0] - pt[0]) * bestT, pt[1] + (other[1] - pt[1]) * bestT];
+    };
+    const clipPush = (line, width, ownIndex) => {
+        const a = clipEnd(line[0], line[1], ownIndex);
+        const b = clipEnd(line[1], a, ownIndex);
+        const dx = a[0] - b[0];
+        const dz = a[1] - b[1];
+        if (dx * dx + dz * dz < 1e-8)
+            return;
+        pushLine(a, b, width);
+    };
+    plans.forEach((p, idx) => {
+        for (const s of p.breaks)
+            clipPush(s, hipWidth, idx);
+        for (const s of p.hips)
+            clipPush(s, hipWidth, idx);
+        for (const s of p.ridges)
+            clipPush(s, ridgeWidth, idx);
+        // Shed downslope arrow (no overshoot to clip).
+        if (p.slope) {
+            const { tail, head } = p.slope;
+            const dx = head[0] - tail[0];
+            const dz = head[1] - tail[1];
+            const len = Math.hypot(dx, dz) || 1;
+            const ux = dx / len;
+            const uz = dz / len;
+            const headLen = Math.min(0.22, len * 0.4);
+            const wing = headLen * 0.6;
+            pushLine(tail, head, hipWidth);
+            children.push({
+                kind: 'polyline',
+                points: [
+                    [head[0] - headLen * ux - wing * uz, head[1] - headLen * uz + wing * ux],
+                    [head[0], head[1]],
+                    [head[0] - headLen * ux + wing * uz, head[1] - headLen * uz - wing * ux],
+                ],
+                stroke: ink,
+                strokeWidth: hipWidth,
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+                pointerEvents: 'none',
+            });
+        }
+    });
+    return children.length > 0 ? { kind: 'group', children } : null;
+}

package/dist/roof/index.d.ts

@@ -0,0 +1,3 @@
+export { type RoofSegmentHit, resolveRoofSegmentHit } from '../shared/roof-segment-hit';
+export { roofDefinition } from './definition';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/roof/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA"}

package/dist/roof/index.js

@@ -0,0 +1,2 @@
+export { resolveRoofSegmentHit } from '../shared/roof-segment-hit';
+export { roofDefinition } from './definition';

package/dist/roof/panel.d.ts

@@ -0,0 +1,2 @@
+export default function RoofPanel(): import("react").JSX.Element | null;
+//# sourceMappingURL=panel.d.ts.map

package/dist/roof/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/roof/panel.tsx"],"names":[],"mappings":"AAmCA,MAAM,CAAC,OAAO,UAAU,SAAS,uCAmgBhC"}

package/dist/roof/panel.js

@@ -0,0 +1,214 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createDefaultRidgeVentsForSegment, RoofSegmentNode as RoofSegmentNodeSchema, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, duplicateRoofSubtree, PanelSection, PanelWrapper, SegmentedControl, SliderControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { Copy, Move, Plus, Trash2 } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+export default function RoofPanel() {
+    const [ventType, setVentType] = useState('box-vent');
+    const selectedId = useViewer((s) => s.selection.selectedIds[0]);
+    const setSelection = useViewer((s) => s.setSelection);
+    const updateNode = useScene((s) => s.updateNode);
+    const createNodes = useScene((s) => s.createNodes);
+    const setMovingNode = useEditor((s) => s.setMovingNode);
+    const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    // Shallow selector — only re-renders when the segment list content changes.
+    const segments = useScene(useShallow((s) => {
+        if (!node)
+            return [];
+        return (node.children ?? [])
+            .map((childId) => s.nodes[childId])
+            .filter((n) => n?.type === 'roof-segment');
+    }));
+    // Flatten roof accessories hosted by any segment of this roof. Each
+    // selector re-runs only when the relevant child list changes.
+    const segmentIdSet = useScene(useShallow((s) => {
+        if (!node)
+            return new Set();
+        return new Set((node.children ?? []));
+    }));
+    const chimneys = useScene(useShallow((s) => {
+        if (segmentIdSet.size === 0)
+            return [];
+        const out = [];
+        for (const n of Object.values(s.nodes)) {
+            if (n?.type === 'chimney' && n.roofSegmentId && segmentIdSet.has(n.roofSegmentId)) {
+                out.push(n);
+            }
+        }
+        return out;
+    }));
+    const skylights = useScene(useShallow((s) => {
+        if (segmentIdSet.size === 0)
+            return [];
+        const out = [];
+        for (const n of Object.values(s.nodes)) {
+            if (n?.type === 'skylight' && n.roofSegmentId && segmentIdSet.has(n.roofSegmentId)) {
+                out.push(n);
+            }
+        }
+        return out;
+    }));
+    const solarPanels = useScene(useShallow((s) => {
+        if (segmentIdSet.size === 0)
+            return [];
+        const out = [];
+        for (const n of Object.values(s.nodes)) {
+            if (n?.type === 'solar-panel' && n.roofSegmentId && segmentIdSet.has(n.roofSegmentId)) {
+                out.push(n);
+            }
+        }
+        return out;
+    }));
+    const dormers = useScene(useShallow((s) => {
+        if (segmentIdSet.size === 0)
+            return [];
+        const out = [];
+        for (const n of Object.values(s.nodes)) {
+            if (n?.type === 'dormer' && n.roofSegmentId && segmentIdSet.has(n.roofSegmentId)) {
+                out.push(n);
+            }
+        }
+        return out;
+    }));
+    const gutters = useScene(useShallow((s) => {
+        if (segmentIdSet.size === 0)
+            return [];
+        const out = [];
+        for (const n of Object.values(s.nodes)) {
+            if (n?.type === 'gutter' && n.roofSegmentId && segmentIdSet.has(n.roofSegmentId)) {
+                out.push(n);
+            }
+        }
+        return out;
+    }));
+    // Box vents and ridge vents share the "Vents" UI group — same list,
+    // type shown as the right-side label, and an `Add Vent` button with
+    // a Box/Ridge segmented picker.
+    const vents = useScene(useShallow((s) => {
+        if (segmentIdSet.size === 0)
+            return [];
+        const out = [];
+        for (const n of Object.values(s.nodes)) {
+            if ((n?.type === 'box-vent' || n?.type === 'ridge-vent' || n?.type === 'turbine-vent') &&
+                n.roofSegmentId &&
+                segmentIdSet.has(n.roofSegmentId)) {
+                out.push(n);
+            }
+        }
+        return out;
+    }));
+    const handleSelectElement = useCallback((id) => {
+        setSelection({ selectedIds: [id] });
+    }, [setSelection]);
+    const handleUpdate = useCallback((updates) => {
+        if (!selectedId)
+            return;
+        updateNode(selectedId, updates);
+    }, [selectedId, updateNode]);
+    const handleClose = useCallback(() => {
+        setSelection({ selectedIds: [] });
+    }, [setSelection]);
+    const handleAddSegment = useCallback(() => {
+        if (!node)
+            return;
+        const segment = RoofSegmentNodeSchema.parse({
+            width: 6,
+            depth: 6,
+            wallHeight: 0.5,
+            pitch: 40,
+            roofType: 'gable',
+            position: [2, 0, 2],
+        });
+        const ridgeVents = createDefaultRidgeVentsForSegment(segment);
+        createNodes([
+            { node: segment, parentId: node.id },
+            ...ridgeVents.map((ridgeVent) => ({
+                node: ridgeVent,
+                parentId: segment.id,
+            })),
+        ]);
+    }, [node, createNodes]);
+    const handleSelectSegment = useCallback((segmentId) => {
+        setSelection({ selectedIds: [segmentId] });
+    }, [setSelection]);
+    const handleDuplicate = useCallback(() => {
+        if (!node)
+            return;
+        triggerSFX('sfx:item-pick');
+        try {
+            duplicateRoofSubtree(node.id, { mode: 'move' });
+        }
+        catch (e) {
+            console.error('Failed to duplicate roof', e);
+        }
+    }, [node]);
+    const handleMove = useCallback(() => {
+        if (node) {
+            triggerSFX('sfx:item-pick');
+            setMovingNode(node);
+            setSelection({ selectedIds: [] });
+        }
+    }, [node, setMovingNode, setSelection]);
+    const handleDelete = useCallback(() => {
+        if (!(selectedId && node))
+            return;
+        triggerSFX('sfx:item-delete');
+        const parentId = node.parentId;
+        useScene.getState().deleteNode(selectedId);
+        if (parentId) {
+            useScene.getState().dirtyNodes.add(parentId);
+        }
+        setSelection({ selectedIds: [] });
+    }, [selectedId, node, setSelection]);
+    // Each "Add" button activates the kind's registered placement tool
+    // via `setTool(kind)`. The tool listens for `roof:*` events and
+    // commits a new node parented to whichever segment the user clicks.
+    // Same code path as the top palette — see `tool-manager.tsx:28`'s
+    // `nodeRegistry.get(tool)?.tool` dispatch.
+    const activateTool = useCallback((kind) => {
+        triggerSFX('sfx:item-pick');
+        useEditor.getState().setTool(kind);
+        if (useEditor.getState().mode !== 'build') {
+            useEditor.getState().setMode('build');
+        }
+    }, []);
+    if (!(node && node.type === 'roof' && selectedId))
+        return null;
+    return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onClose: handleClose, title: node.name || 'Roof', width: 300, children: [_jsxs(PanelSection, { title: "Segments", children: [_jsx("div", { className: "flex flex-col gap-1", children: segments.map((seg, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]", onClick: () => handleSelectSegment(seg.id), type: "button", children: [_jsx("span", { className: "truncate", children: seg.name || `Segment ${i + 1}` }), _jsx("span", { className: "text-muted-foreground text-xs capitalize", children: seg.roofType })] }, seg.id))) }), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Segment", onClick: handleAddSegment }) })] }), _jsxs(PanelSection, { title: "Position", children: [_jsx(SliderControl, { label: "X", max: 50, min: -50, onChange: (v) => {
+                            const pos = [...node.position];
+                            pos[0] = v;
+                            handleUpdate({ position: pos });
+                        }, precision: 2, step: 0.05, unit: "m", value: Math.round(node.position[0] * 100) / 100 }), _jsx(SliderControl, { label: "Y", max: 50, min: -50, onChange: (v) => {
+                            const pos = [...node.position];
+                            pos[1] = v;
+                            handleUpdate({ position: pos });
+                        }, precision: 2, step: 0.05, unit: "m", value: Math.round(node.position[1] * 100) / 100 }), _jsx(SliderControl, { label: "Z", max: 50, min: -50, onChange: (v) => {
+                            const pos = [...node.position];
+                            pos[2] = v;
+                            handleUpdate({ position: pos });
+                        }, precision: 2, step: 0.05, unit: "m", value: Math.round(node.position[2] * 100) / 100 }), _jsx(SliderControl, { label: "Rotation", max: 180, min: -180, onChange: (degrees) => {
+                            handleUpdate({ rotation: (degrees * Math.PI) / 180 });
+                        }, precision: 0, step: 1, unit: "\u00B0", value: Math.round((node.rotation * 180) / Math.PI) }), _jsxs("div", { className: "flex gap-1.5 px-1 pt-2 pb-1", children: [_jsx(ActionButton, { label: "-45\u00B0", onClick: () => {
+                                    triggerSFX('sfx:item-rotate');
+                                    handleUpdate({ rotation: node.rotation - Math.PI / 4 });
+                                } }), _jsx(ActionButton, { label: "+45\u00B0", onClick: () => {
+                                    triggerSFX('sfx:item-rotate');
+                                    handleUpdate({ rotation: node.rotation + Math.PI / 4 });
+                                } })] })] }), _jsx(PanelSection, { title: "Elements", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [chimneys.map((chimney, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]", onClick: () => handleSelectElement(chimney.id), type: "button", children: [_jsx("span", { className: "truncate", children: chimney.name || `Chimney ${i + 1}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: "chimney" })] }, chimney.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Chimney", onClick: () => activateTool('chimney') }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [dormers.map((dormer, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]", onClick: () => handleSelectElement(dormer.id), type: "button", children: [_jsx("span", { className: "truncate", children: dormer.name || `Dormer ${i + 1}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: "dormer" })] }, dormer.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Dormer", onClick: () => activateTool('dormer') }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [skylights.map((skylight, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]", onClick: () => handleSelectElement(skylight.id), type: "button", children: [_jsx("span", { className: "truncate", children: skylight.name || `Skylight ${i + 1}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: "skylight" })] }, skylight.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Skylight", onClick: () => activateTool('skylight') }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [solarPanels.map((panel, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]", onClick: () => handleSelectElement(panel.id), type: "button", children: [_jsx("span", { className: "truncate", children: panel.name || `Solar Panel ${i + 1}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: "solar panel" })] }, panel.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Solar Panel", onClick: () => activateTool('solar-panel') }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [vents.map((vent, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]", onClick: () => handleSelectElement(vent.id), type: "button", children: [_jsx("span", { className: "truncate", children: vent.name ||
+                                                (vent.type === 'box-vent'
+                                                    ? `Box Vent ${i + 1}`
+                                                    : vent.type === 'ridge-vent'
+                                                        ? `Ridge Vent ${i + 1}`
+                                                        : `Turbine Vent ${i + 1}`) }), _jsx("span", { className: "text-muted-foreground text-xs", children: vent.type === 'box-vent'
+                                                ? 'box vent'
+                                                : vent.type === 'ridge-vent'
+                                                    ? 'ridge vent'
+                                                    : 'turbine vent' })] }, vent.id))), _jsx(SegmentedControl, { onChange: setVentType, options: [
+                                        { label: 'Box', value: 'box-vent' },
+                                        { label: 'Ridge', value: 'ridge-vent' },
+                                        { label: 'Turbine', value: 'turbine-vent' },
+                                    ], value: ventType }), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Vent", onClick: () => activateTool(ventType) }) })] }), _jsx("div", { className: "flex flex-col gap-1", children: _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Cupola", onClick: () => activateTool('cupola') }) }) }), _jsx("div", { className: "flex flex-col gap-1", children: _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Eyebrow Vent", onClick: () => activateTool('eyebrow-vent') }) }) }), _jsxs("div", { className: "flex flex-col gap-1", children: [gutters.map((gutter, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]", onClick: () => handleSelectElement(gutter.id), type: "button", children: [_jsx("span", { className: "truncate", children: gutter.name || `Gutter ${i + 1}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: "gutter" })] }, gutter.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Gutter", onClick: () => activateTool('gutter') }) })] })] }) }), _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 })] }) })] }));
+}

package/dist/roof/parametrics.d.ts

@@ -0,0 +1,3 @@
+import type { ParametricDescriptor, RoofNode } from '@pascal-app/core';
+export declare const roofParametrics: ParametricDescriptor<RoofNode>;
+//# sourceMappingURL=parametrics.d.ts.map

package/dist/roof/parametrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/roof/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtE,eAAO,MAAM,eAAe,EAAE,oBAAoB,CAAC,QAAQ,CAG1D,CAAA"}

package/dist/roof/parametrics.js

@@ -0,0 +1,4 @@
+export const roofParametrics = {
+    groups: [],
+    customPanel: () => import('./panel'),
+};

package/dist/roof/renderer.d.ts

@@ -0,0 +1,6 @@
+import { type RoofNode } from '@pascal-app/core';
+export declare const RoofRenderer: ({ node: rawNode }: {
+    node: RoofNode;
+}) => import("react").JSX.Element;
+export default RoofRenderer;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/roof/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/roof/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,QAAQ,EAKd,MAAM,kBAAkB,CAAA;AAQzB,eAAO,MAAM,YAAY,GAAI,mBAAmB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,gCAmHjE,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/roof/renderer.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hasSegmentMaterialOverride, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
+import { getRoofMaterialArray, NodeRenderer, useNodeEvents, useViewer } from '@pascal-app/viewer';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { createPlaceholderGeometry } from '../shared/placeholder-geometry';
+import { getRoofDebugMaterials, getRoofMaterials } from './roof-materials';
+export const RoofRenderer = ({ node: rawNode }) => {
+    const ref = useRef(null);
+    const liveOverride = useLiveNodeOverrides((s) => s.overrides.get(rawNode.id));
+    const node = useMemo(() => (liveOverride ? { ...rawNode, ...liveOverride } : rawNode), [rawNode, liveOverride]);
+    useRegistry(node.id, 'roof', ref);
+    useLayoutEffect(() => {
+        useScene.getState().markDirty(node.id);
+    }, [node.id]);
+    const handlers = useNodeEvents(node, 'roof');
+    const debugColors = useViewer((s) => s.debugColors);
+    const shading = useViewer((s) => s.shading);
+    const textures = useViewer((s) => s.textures);
+    const colorPreset = useViewer((s) => s.colorPreset);
+    const sceneTheme = useViewer((s) => s.sceneTheme);
+    // Collect roof element IDs (chimneys, skylights, etc.) hosted by any segment.
+    // Rendered outside segments-wrapper (invisible during normal mode) so elements
+    // stay visible at all times.
+    const roofElementIds = useScene(useShallow((state) => {
+        const ids = [];
+        for (const segmentId of node.children ?? []) {
+            const seg = state.nodes[segmentId];
+            if (!seg)
+                continue;
+            for (const childId of seg.children ?? [])
+                ids.push(childId);
+        }
+        return ids;
+    }));
+    // Segments that carry their own material/preset are rendered outside the
+    // segments-wrapper so they stay visible after edit mode exits — the merged
+    // shell skips them (see updateMergedRoofGeometry) to avoid overdraw.
+    //
+    // Two separate selectors: `useShallow` walks arrays element-wise but only
+    // walks the *outer* keys of a returned object, so nested arrays inside an
+    // object compare by reference and trigger an infinite re-render loop.
+    const paintedSegmentIds = useScene(useShallow((state) => {
+        const ids = [];
+        for (const segmentId of node.children ?? []) {
+            const seg = state.nodes[segmentId];
+            if (!seg)
+                continue;
+            if (hasSegmentMaterialOverride(seg))
+                ids.push(segmentId);
+        }
+        return ids;
+    }));
+    const unpaintedSegmentIds = useScene(useShallow((state) => {
+        const ids = [];
+        for (const segmentId of node.children ?? []) {
+            const seg = state.nodes[segmentId];
+            if (!seg)
+                continue;
+            if (!hasSegmentMaterialOverride(seg))
+                ids.push(segmentId);
+        }
+        return ids;
+    }));
+    // 4 groups map 1:1 to the roof's 4-material array (see getRoofMaterialArray).
+    const placeholderGeometry = useMemo(() => createPlaceholderGeometry(4), []);
+    const customMaterial = useMemo(() => getRoofMaterialArray(node, shading, textures, colorPreset, sceneTheme), [node, shading, textures, colorPreset, sceneTheme]);
+    const material = debugColors
+        ? getRoofDebugMaterials(shading)
+        : customMaterial || getRoofMaterials(shading, textures, colorPreset);
+    useEffect(() => {
+        return () => {
+            placeholderGeometry.dispose();
+        };
+    }, [placeholderGeometry]);
+    return (_jsxs("group", { position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: [_jsx("mesh", { castShadow: true, geometry: placeholderGeometry, material: material, name: "merged-roof", receiveShadow: true }), _jsx("group", { name: "segments-wrapper", visible: false, children: unpaintedSegmentIds.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) }), _jsx("group", { name: "painted-segments", children: paintedSegmentIds.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) }), _jsx("group", { name: "roof-elements", children: roofElementIds.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) })] }));
+};
+export default RoofRenderer;

package/dist/roof/roof-materials.d.ts

@@ -0,0 +1,5 @@
+import { type ColorPreset, type RenderShading } from '@pascal-app/viewer';
+import * as THREE from 'three';
+export declare function getRoofMaterials(shading?: RenderShading, textures?: boolean, colorPreset?: ColorPreset): THREE.Material[];
+export declare function getRoofDebugMaterials(shading?: RenderShading): THREE.Material[];
+//# sourceMappingURL=roof-materials.d.ts.map

package/dist/roof/roof-materials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roof-materials.d.ts","sourceRoot":"","sources":["../../src/roof/roof-materials.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,WAAW,EAGhB,KAAK,aAAa,EAEnB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,aAA0B,EACnC,QAAQ,UAAO,EACf,WAAW,GAAE,WAAoB,GAChC,KAAK,CAAC,QAAQ,EAAE,CAsBlB;AAKD,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,aAA0B,GAAG,KAAK,CAAC,QAAQ,EAAE,CAY3F"}