@pascal-app/nodes 1.0.3 → 1.0.5

package/dist/roof/glazing-controls.d.ts

@@ -0,0 +1,33 @@
+import type { CurtainGrid, RoofGlazing } from '@pascal-app/core';
+import type { createRoofGlazingPreview } from './glazing-preview.js';
+type Preview = ReturnType<typeof createRoofGlazingPreview>;
+type NumberField = 'frameWidth' | 'frameDepth' | 'glassThickness' | 'glassOpacity' | 'glassRoughness';
+export declare function GlazingNumber({ field, label, value, preview, fraction, mixed, }: {
+    field: NumberField;
+    label: string;
+    value: number;
+    preview: Preview;
+    fraction?: boolean;
+    mixed?: boolean;
+}): import("react").JSX.Element;
+export declare function GlazingGridControls({ axis, title, description, grid, grids, preview, }: {
+    axis: 'across' | 'along';
+    title: string;
+    description: string;
+    grid: CurtainGrid;
+    grids: readonly CurtainGrid[];
+    preview: Preview;
+}): import("react").JSX.Element;
+export declare function GlazingColor({ field, label, value, mixed, preview, }: {
+    field: 'glassColor' | 'frameColor';
+    label: string;
+    value: string;
+    mixed: boolean;
+    preview: Preview;
+}): import("react").JSX.Element;
+export declare const GLAZING_INFILL_OPTIONS: {
+    value: RoofGlazing['panelType'];
+    label: string;
+}[];
+export {};
+//# sourceMappingURL=glazing-controls.d.ts.map

package/dist/roof/glazing-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glazing-controls.d.ts","sourceRoot":"","sources":["../../src/roof/glazing-controls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAYhE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAA;AAEjE,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAC1D,KAAK,WAAW,GACZ,YAAY,GACZ,YAAY,GACZ,gBAAgB,GAChB,cAAc,GACd,gBAAgB,CAAA;AAEpB,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAgB,EAChB,KAAa,GACd,EAAE;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,+BAiCA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,GACR,EAAE;IACD,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,WAAW,CAAA;IACjB,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,OAAO,EAAE,OAAO,CAAA;CACjB,+BA+EA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,YAAY,GAAG,YAAY,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;CACjB,+BAwBA;AAED,eAAO,MAAM,sBAAsB,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAItF,CAAA"}

package/dist/roof/glazing-controls.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getLinearUnitLabel, linearControlValueToMeters, metersToLinearUnit, PanelSection, SegmentedControl, SelectControl, SliderControl, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { useCallback } from 'react';
+export function GlazingNumber({ field, label, value, preview, fraction = false, mixed = false, }) {
+    const unit = useViewer((state) => state.unit);
+    const millimeters = !fraction && unit === 'metric';
+    const display = (meters) => millimeters ? meters * 1000 : metersToLinearUnit(meters, unit);
+    const onChange = useCallback((input) => {
+        const next = fraction
+            ? input / 100
+            : millimeters
+                ? Math.max(0.001, input / 1000)
+                : linearControlValueToMeters(input, unit, { minMeters: 0.001 });
+        preview.previewGlazing((config) => ({ ...config, [field]: next }));
+    }, [field, fraction, millimeters, preview, unit]);
+    return (_jsx(SliderControl, { label: label, value: fraction ? value * 100 : display(value), mixed: mixed, min: fraction ? (field === 'glassOpacity' ? 5 : 0) : display(0.001), max: fraction ? 100 : undefined, unit: fraction ? '%' : millimeters ? 'mm' : getLinearUnitLabel(unit), precision: fraction ? 0 : millimeters ? 1 : 3, step: fraction || millimeters ? 1 : 0.005, onChange: onChange, onCommit: preview.finish, onCancel: preview.cancel, restoreOnCommit: false, previewWhileTyping: true }));
+}
+export function GlazingGridControls({ axis, title, description, grid, grids, preview, }) {
+    const unit = useViewer((state) => state.unit);
+    const patch = useCallback((data, commit = false) => {
+        preview.previewGlazing((config) => ({ ...config, [axis]: { ...config[axis], ...data } }));
+        if (commit)
+            preview.commit();
+    }, [axis, preview]);
+    const mixedLayout = grids.some((value) => value.layout !== grid.layout);
+    return (_jsxs(PanelSection, { title: title, children: [_jsx(SelectControl, { label: "Layout", value: grid.layout, mixed: mixedLayout, options: [
+                    { value: 'maximum-spacing', label: 'Maximum spacing' },
+                    { value: 'count', label: 'Panel count' },
+                    { value: 'fixed-spacing', label: 'Fixed spacing' },
+                ], onChange: (layout) => patch({ layout }, true) }), mixedLayout ? (_jsx("p", { className: "pt-1 text-[11px] text-muted-foreground", children: "Choose a layout to edit the grid." })) : grid.layout === 'count' ? (_jsx(SliderControl, { label: "Panels", value: grid.count, mixed: grids.some((value) => value.count !== grid.count), min: 1, max: 32, step: 1, precision: 0, onChange: (count) => patch({ count: Math.round(count) }), onCommit: preview.finish, onCancel: preview.cancel, restoreOnCommit: false, previewWhileTyping: true })) : (_jsx(SliderControl, { label: grid.layout === 'maximum-spacing' ? 'Max spacing' : 'Spacing', value: metersToLinearUnit(grid.spacing, unit), mixed: grids.some((value) => value.spacing !== grid.spacing), min: metersToLinearUnit(0.2, unit), max: metersToLinearUnit(100, unit), unit: getLinearUnitLabel(unit), step: 0.05, precision: 2, onChange: (input) => patch({
+                    spacing: linearControlValueToMeters(input, unit, { minMeters: 0.2, maxMeters: 100 }),
+                }), onCommit: preview.finish, onCancel: preview.cancel, restoreOnCommit: false, previewWhileTyping: true })), !mixedLayout && grid.layout === 'fixed-spacing' && (_jsxs("div", { className: "flex flex-col gap-2 pt-1", role: "group", "aria-label": `${title} alignment`, children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Alignment" }), _jsx(SegmentedControl, { value: grid.alignment, mixed: grids.some((value) => value.alignment !== grid.alignment), options: [
+                            { value: 'start', label: 'Start' },
+                            { value: 'center', label: 'Center' },
+                            { value: 'end', label: 'End' },
+                        ], onChange: (alignment) => patch({ alignment }, true) })] })), _jsx("p", { className: "pt-1 text-[11px] leading-relaxed text-muted-foreground", children: description })] }));
+}
+export function GlazingColor({ field, label, value, mixed, preview, }) {
+    return (_jsxs("label", { className: "flex h-10 items-center justify-between gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-mono text-[11px] text-foreground", children: mixed ? 'Mixed' : value.toUpperCase() }), _jsx("input", { "aria-label": label, type: "color", value: value, className: "size-6 cursor-pointer overflow-hidden rounded border border-border/50 bg-transparent p-0 focus-visible:outline-2 focus-visible:outline-ring", onChange: (event) => preview.previewGlazing((config) => ({ ...config, [field]: event.target.value })), onBlur: preview.finish, onKeyDown: (event) => {
+                            if (event.key === 'Escape')
+                                preview.cancel();
+                        } })] })] }));
+}
+export const GLAZING_INFILL_OPTIONS = [
+    { value: 'glass', label: 'Glass' },
+    { value: 'solid', label: 'Solid' },
+    { value: 'empty', label: 'Empty' },
+];

package/dist/roof/glazing-panel-editor.d.ts

@@ -0,0 +1,6 @@
+import { type RoofGlazing, type RoofSegmentNode } from '@pascal-app/core';
+export declare function GlazingPanelEditor({ node, onUpdate, }: {
+    node: RoofSegmentNode;
+    onUpdate: (patch: Partial<RoofGlazing>) => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=glazing-panel-editor.d.ts.map

package/dist/roof/glazing-panel-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glazing-panel-editor.d.ts","sourceRoot":"","sources":["../../src/roof/glazing-panel-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAA;AAwBzB,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CAChD,sCAmFA"}

package/dist/roof/glazing-panel-editor.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getGlazedRoofLayout, getGlazedRoofPanelType, getRoofGlazing, } from '@pascal-app/core';
+import { ActionButton, PanelSection, SegmentedControl, SelectControl, SliderControl, } from '@pascal-app/editor';
+import { RotateCcw } from 'lucide-react';
+import { useState } from 'react';
+import { GLAZING_INFILL_OPTIONS } from './glazing-controls.js';
+function faceLabel(id) {
+    if (id.startsWith('barrel-'))
+        return `Arch bay ${Number(id.slice(7)) + 1}`;
+    const labels = {
+        front: 'Front slope',
+        back: 'Back slope',
+        slope: 'Shed slope',
+        'end-left': 'Left end',
+        'end-right': 'Right end',
+    };
+    return labels[id] ?? id;
+}
+export function GlazingPanelEditor({ node, onUpdate, }) {
+    const [faceId, setFaceId] = useState('front');
+    const [column, setColumn] = useState(0);
+    const [row, setRow] = useState(0);
+    const config = getRoofGlazing(node);
+    const layouts = getGlazedRoofLayout(node).filter(({ face, across, along }) => face.polygon.length >= 3 && across.length > 1 && along.length > 1);
+    const layout = layouts.find((entry) => entry.face.id === faceId) ?? layouts[0];
+    if (!layout)
+        return null;
+    const columns = layout.across.length - 1, rows = layout.along.length - 1;
+    const activeColumn = Math.max(0, Math.min(column, columns - 1)), activeRow = Math.max(0, Math.min(row, rows - 1));
+    const matches = (panel) => panel.face === layout.face.id && panel.column === activeColumn && panel.row === activeRow;
+    const overridden = config.panels.some(matches);
+    const update = (type) => onUpdate({
+        panels: [
+            ...config.panels.filter((panel) => !matches(panel)),
+            ...(type ? [{ face: layout.face.id, column: activeColumn, row: activeRow, type }] : []),
+        ],
+    });
+    return (_jsxs(PanelSection, { title: "Individual panels", defaultExpanded: false, children: [_jsx("p", { className: "pb-1 text-[11px] leading-relaxed text-muted-foreground", children: "Choose a panel to override its default infill." }), _jsx(SelectControl, { label: "Roof face", value: layout.face.id, options: layouts.map(({ face }) => ({ value: face.id, label: faceLabel(face.id) })), onChange: (value) => {
+                    setFaceId(value);
+                    setColumn(0);
+                    setRow(0);
+                } }), _jsxs("p", { className: "py-1 text-[11px] text-muted-foreground", children: [columns, " ", columns === 1 ? 'column' : 'columns', " \u00B7 ", rows, " ", rows === 1 ? 'row' : 'rows'] }), columns > 1 && (_jsx(SliderControl, { label: "Column", value: activeColumn + 1, min: 1, max: columns, step: 1, precision: 0, onChange: (value) => setColumn(Math.round(value) - 1) })), rows > 1 && (_jsx(SliderControl, { label: "Row", value: activeRow + 1, min: 1, max: rows, step: 1, precision: 0, onChange: (value) => setRow(Math.round(value) - 1) })), _jsxs("div", { className: "flex flex-col gap-2 pt-1", role: "group", "aria-label": "Selected panel infill", children: [_jsxs("span", { className: "flex items-center justify-between text-xs text-muted-foreground", children: ["Panel infill ", _jsx("span", { className: "text-[11px]", children: overridden ? 'Custom' : 'Default' })] }), _jsx(SegmentedControl, { value: getGlazedRoofPanelType(node, layout.face.id, activeColumn, activeRow), options: GLAZING_INFILL_OPTIONS, onChange: (type) => update(type) })] }), _jsx(ActionButton, { label: "Reset to default", icon: _jsx(RotateCcw, { className: "size-3.5" }), disabled: !overridden, className: "mt-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-[#2C2C2E]", onClick: () => update() })] }));
+}

package/dist/roof/glazing-panel.d.ts

@@ -0,0 +1,5 @@
+import { type RoofSegmentNode } from '@pascal-app/core';
+export declare function RoofGlazingPanel({ segments }: {
+    segments: readonly RoofSegmentNode[];
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=glazing-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"glazing-panel.d.ts","sourceRoot":"","sources":["../../src/roof/glazing-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAA;AAazB,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,sCAuKtF"}

package/dist/roof/glazing-panel.js

@@ -0,0 +1,41 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getEffectiveNode, getRoofGlazing, isGlazedRoofSegment, supportsRoofGlazing, useLiveNodeOverrides, } from '@pascal-app/core';
+import { PanelSection, SegmentedControl, ToggleControl } from '@pascal-app/editor';
+import { useEffect, useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { GLAZING_INFILL_OPTIONS, GlazingColor, GlazingGridControls, GlazingNumber, } from './glazing-controls.js';
+import { GlazingPanelEditor } from './glazing-panel-editor.js';
+import { createRoofGlazingPreview } from './glazing-preview.js';
+export function RoofGlazingPanel({ segments }) {
+    useLiveNodeOverrides(useShallow((state) => segments.map((segment) => state.overrides.get(segment.id))));
+    const idKey = segments.map((segment) => segment.id).join(',');
+    const preview = useMemo(() => createRoofGlazingPreview(idKey ? idKey.split(',') : []), [idKey]);
+    useEffect(() => () => preview.cancel(), [preview]);
+    if (!segments.length)
+        return null;
+    const effectiveSegments = segments.map((segment) => getEffectiveNode(segment));
+    const node = effectiveSegments[0];
+    const config = getRoofGlazing(node);
+    const configs = effectiveSegments.map(getRoofGlazing);
+    const glazed = isGlazedRoofSegment(node);
+    const supported = effectiveSegments.every(supportsRoofGlazing);
+    const mixed = effectiveSegments.some((segment) => isGlazedRoofSegment(segment) !== glazed);
+    const allBarrel = effectiveSegments.every((segment) => segment.roofType === 'barrel');
+    const mixedField = (field) => configs.some((value) => value[field] !== config[field]);
+    const update = (patch) => {
+        preview.previewGlazing((current) => ({ ...current, ...patch }));
+        preview.commit();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(PanelSection, { title: "Roof system", children: [_jsx(SegmentedControl, { value: glazed ? 'glazed' : 'standard', mixed: mixed, options: [
+                            { value: 'standard', label: 'Standard' },
+                            { value: 'glazed', label: 'Glazed', disabled: !supported },
+                        ], onChange: (roofSystem) => {
+                            if (roofSystem === 'standard' || supported)
+                                preview.commit({ roofSystem });
+                        } }), !supported && (_jsx("p", { className: "pt-1 text-[11px] leading-relaxed text-muted-foreground", children: "Glazing is available for gable, straight shed, and barrel roofs." })), mixed && (_jsx("p", { className: "pt-1 text-[11px] leading-relaxed text-muted-foreground", children: "Choose one roof system to edit settings for all selected segments." })), segments.length > 1 && (_jsxs("p", { className: "pt-1 text-[11px] text-muted-foreground", children: ["Changes apply to all ", segments.length, " roof segments."] }))] }), glazed && !mixed && (_jsxs(_Fragment, { children: [_jsx(GlazingGridControls, { axis: "across", title: allBarrel ? 'Grid along the length' : 'Grid across the roof', description: allBarrel
+                            ? 'Divides the length of each arch bay into columns.'
+                            : 'Divides each roof face into columns.', grid: config.across, grids: configs.map((value) => value.across), preview: preview }), _jsx(GlazingGridControls, { axis: "along", title: allBarrel ? 'Grid within each arch bay' : 'Grid along the slope', description: allBarrel
+                            ? 'Subdivides each flat arch bay. Arch bays controls the divisions around the curve.'
+                            : 'Spacing is measured on the slope, not its horizontal projection.', grid: config.along, grids: configs.map((value) => value.along), preview: preview }), _jsxs(PanelSection, { title: "Framing", children: [_jsx(GlazingNumber, { field: "frameWidth", label: "Frame width", value: config.frameWidth, mixed: mixedField('frameWidth'), preview: preview }), _jsx(GlazingNumber, { field: "frameDepth", label: "Frame depth", value: config.frameDepth, mixed: mixedField('frameDepth'), preview: preview }), _jsx(GlazingColor, { field: "frameColor", label: "Frame color", value: config.frameColor, mixed: mixedField('frameColor'), preview: preview })] }), _jsxs(PanelSection, { title: "Glass", children: [_jsx(GlazingNumber, { field: "glassThickness", label: "Pane thickness", value: config.glassThickness, mixed: mixedField('glassThickness'), preview: preview }), _jsx(GlazingColor, { field: "glassColor", label: "Glass tint", value: config.glassColor, mixed: mixedField('glassColor'), preview: preview }), _jsx(GlazingNumber, { field: "glassOpacity", label: "Opacity", value: config.glassOpacity, mixed: mixedField('glassOpacity'), preview: preview, fraction: true }), _jsx(GlazingNumber, { field: "glassRoughness", label: "Roughness", value: config.glassRoughness, mixed: mixedField('glassRoughness'), preview: preview, fraction: true })] }), _jsxs(PanelSection, { title: "Infill", children: [_jsxs("div", { className: "flex flex-col gap-2 pb-1", role: "group", "aria-label": "Default panel infill", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Default panel infill" }), _jsx(SegmentedControl, { value: config.panelType, mixed: mixedField('panelType'), options: GLAZING_INFILL_OPTIONS, onChange: (panelType) => update({ panelType }) })] }), _jsx(ToggleControl, { label: "Close the roof ends", checked: config.glazedEnds, mixed: mixedField('glazedEnds'), onChange: (glazedEnds) => update({ glazedEnds }) }), _jsx("p", { className: "pt-1 text-[11px] leading-relaxed text-muted-foreground", children: "End infill fills the space above the walls. Edit room walls and ceilings separately." })] }), segments.length === 1 && (_jsx(GlazingPanelEditor, { node: node, onUpdate: update }, node.id))] }))] }));
+}

package/dist/roof/glazing-preview.d.ts

@@ -0,0 +1,10 @@
+import { type AnyNodeId, type RoofGlazing, type RoofSegmentNode } from '@pascal-app/core';
+/** A roof panel edits several segments as one gesture without writing the scene per tick. */
+export declare function createRoofGlazingPreview(ids: readonly AnyNodeId[]): {
+    previewFields(data: Partial<RoofSegmentNode>): void;
+    previewGlazing(update: (config: RoofGlazing) => RoofGlazing): void;
+    commit: (patch?: Partial<RoofSegmentNode>) => void;
+    finish: () => void;
+    cancel: () => void;
+};
+//# sourceMappingURL=glazing-preview.d.ts.map

package/dist/roof/glazing-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glazing-preview.d.ts","sourceRoot":"","sources":["../../src/roof/glazing-preview.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAGd,KAAK,WAAW,EAChB,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAA;AAEzB,6FAA6F;AAC7F,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,SAAS,SAAS,EAAE;wBAmB1C,OAAO,CAAC,eAAe,CAAC;2BAQrB,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW;qBAlBrC,OAAO,CAAC,eAAe,CAAC;;;EAgCjD"}

package/dist/roof/glazing-preview.js

@@ -0,0 +1,48 @@
+import { getEffectiveNode, getRoofGlazing, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+/** A roof panel edits several segments as one gesture without writing the scene per tick. */
+export function createRoofGlazingPreview(ids) {
+    const pending = new Map();
+    const clear = () => {
+        for (const [id, patch] of pending) {
+            useLiveNodeOverrides.getState().clearFields(id, Object.keys(patch));
+            useScene.getState().markDirty(id);
+        }
+        pending.clear();
+    };
+    const commit = (patch) => {
+        const updates = ids.flatMap((id) => {
+            if (useScene.getState().nodes[id]?.type !== 'roof-segment')
+                return [];
+            const data = { ...pending.get(id), ...patch };
+            return Object.keys(data).length ? [{ id, data }] : [];
+        });
+        if (updates.length)
+            useScene.getState().updateNodes(updates);
+        clear();
+    };
+    return {
+        previewFields(data) {
+            for (const id of ids) {
+                if (useScene.getState().nodes[id]?.type !== 'roof-segment')
+                    continue;
+                pending.set(id, { ...pending.get(id), ...data });
+                useLiveNodeOverrides.getState().set(id, data);
+                useScene.getState().markDirty(id);
+            }
+        },
+        previewGlazing(update) {
+            for (const id of ids) {
+                const stored = useScene.getState().nodes[id];
+                if (stored?.type !== 'roof-segment')
+                    continue;
+                const data = { glazing: update(getRoofGlazing(getEffectiveNode(stored))) };
+                pending.set(id, { ...pending.get(id), ...data });
+                useLiveNodeOverrides.getState().set(id, data);
+                useScene.getState().markDirty(id);
+            }
+        },
+        commit,
+        finish: () => commit(),
+        cancel: clear,
+    };
+}

package/dist/roof/index.d.ts

@@ -1,4 +1,4 @@
-export { type RoofSegmentHit, resolveRoofSegmentHit } from '../shared/roof-segment-hit';
-export { roofDefinition } from './definition';
-export { default as useRoofFootprintSource, type RoofFootprintSourceChoice, } from './roof-footprint-source';
+export { type RoofSegmentHit, resolveRoofSegmentHit } from '../shared/roof-segment-hit.js';
+export { roofDefinition } from './definition.js';
+export { default as useRoofFootprintSource, type RoofFootprintSourceChoice, } from './roof-footprint-source.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/roof/index.js

@@ -1,3 +1,3 @@
-export { resolveRoofSegmentHit } from '../shared/roof-segment-hit';
-export { roofDefinition } from './definition';
-export { default as useRoofFootprintSource, } from './roof-footprint-source';
+export { resolveRoofSegmentHit } from '../shared/roof-segment-hit.js';
+export { roofDefinition } from './definition.js';
+export { default as useRoofFootprintSource, } from './roof-footprint-source.js';

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

@@ -1 +1 @@
-{"version":3,"file":"panel-model.d.ts","sourceRoot":"","sources":["../../src/roof/panel-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAEd,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,oBAAoB,CAAA;AAG3B,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,QAAQ,CAqJnD,CAAA"}
+{"version":3,"file":"panel-model.d.ts","sourceRoot":"","sources":["../../src/roof/panel-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAEd,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,oBAAoB,CAAA;AAG3B,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,QAAQ,CAyJnD,CAAA"}

package/dist/roof/panel-model.js

@@ -1,5 +1,5 @@
 import { nodeRegistry, useScene, } from '@pascal-app/core';
-import { duplicateRoofSubtree, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { duplicateNodeAndPickUp, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 export const roofPanelModel = {
     rows({ node, nodes, update }) {
@@ -28,7 +28,12 @@ export const roofPanelModel = {
             kind: 'action',
             section: 'Segments',
             label: 'Draw Segment',
-            onSelect: () => activate('roof'),
+            // Arming a tool ends the selection; the roof tool draws into the roof
+            // selected while it is armed, so hand it this one explicitly.
+            onSelect: () => {
+                activate('roof');
+                select(node.id);
+            },
         });
         for (const axis of [0, 1, 2])
             rows.push({
@@ -124,10 +129,9 @@ export const roofPanelModel = {
                     id: 'duplicate',
                     label: 'Duplicate',
                     onSelect: () => {
-                        if (!useScene.getState().nodes[node.id])
-                            return;
-                        triggerSFX('sfx:item-pick');
-                        duplicateRoofSubtree(node.id, { mode: 'move' });
+                        const live = useScene.getState().nodes[node.id];
+                        if (live)
+                            duplicateNodeAndPickUp(live);
                     },
                 },
                 {

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

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

package/dist/roof/panel.js

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useScene, } from '@pascal-app/core';
-import { ActionButton, ActionGroup, commitParametricNodeFields, duplicateRoofSubtree, formatLinearMeasurement, PanelSection, PanelWrapper, SegmentedControl, SliderControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { getLevelDisplayName, isRoofOnStoreyWalls, planRoofsOffStorey, roofLevelAbove, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, duplicateNodeAndPickUp, formatLinearMeasurement, PanelSection, PanelWrapper, parametricNodeUpdates, 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';
+import { RoofGlazingPanel } from '../roof/glazing-panel.js';
+import { commitSeatedRoofEdit } from './roof-level-target.js';
 export default function RoofPanel() {
     const [ventType, setVentType] = useState('box-vent');
     const selectedId = useViewer((s) => s.selection.selectedIds[0]);
@@ -100,13 +102,46 @@ export default function RoofPanel() {
         }
         return out;
     }));
+    // A roof on the walls of the storey holding it (the agents' and the editor's roofs before the
+    // roof level) hides that storey's plan in solo and exploded views: offer to move it where it goes.
+    const levelMove = useScene(useShallow((s) => {
+        if (!node || !isRoofOnStoreyWalls(s.nodes, node.id))
+            return null;
+        const level = s.nodes[node.parentId];
+        const above = roofLevelAbove(s.nodes, level.id);
+        return {
+            storey: getLevelDisplayName(level),
+            label: above.kind === 'roof'
+                ? 'Move to the roof level'
+                : `Move to ${getLevelDisplayName(above.level)}`,
+            roofs: level.children.filter((id) => isRoofOnStoreyWalls(s.nodes, id)).length,
+        };
+    }));
+    const handleMoveOffStorey = useCallback(() => {
+        if (!node?.parentId)
+            return;
+        const move = planRoofsOffStorey(useScene.getState().nodes, node.parentId);
+        if (!move)
+            return;
+        triggerSFX('sfx:item-place');
+        useScene.getState().applyNodeChanges({
+            create: move.changes.create.map((op) => ({
+                node: op.node,
+                parentId: op.parentId,
+            })),
+            update: move.changes.update.map(({ id, data }) => ({ id: id, data })),
+        });
+        // The storey in view hides the levels above it: the selection follows the roof up.
+        setSelection({ levelId: move.plan.levelId, selectedIds: [node.id] });
+    }, [node, setSelection]);
     const handleSelectElement = useCallback((id) => {
         setSelection({ selectedIds: [id] });
     }, [setSelection]);
     const handleUpdate = useCallback((updates) => {
         if (!selectedId)
             return;
-        commitParametricNodeFields(selectedId, updates);
+        // Moved or turned onto the walls that carry it, it goes to the level above them.
+        commitSeatedRoofEdit(parametricNodeUpdates(selectedId, updates), selectedId);
     }, [selectedId]);
     const handleClose = useCallback(() => {
         setSelection({ selectedIds: [] });
@@ -124,15 +159,8 @@ export default function RoofPanel() {
         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);
-        }
+        if (node)
+            duplicateNodeAndPickUp(node);
     }, [node]);
     const handleMove = useCallback(() => {
         if (node) {
@@ -166,7 +194,7 @@ export default function RoofPanel() {
     }, []);
     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: "Draw Segment", onClick: handleAddSegment }) })] }), _jsxs(PanelSection, { title: "Position", children: [_jsx(SliderControl, { label: "X", onChange: (v) => {
+    return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onClose: handleClose, title: node.name || 'Roof', width: 300, children: [_jsx(RoofGlazingPanel, { segments: segments }), levelMove && (_jsx(PanelSection, { title: "Level", children: _jsxs("div", { className: "flex flex-col gap-2 px-1 pb-1", children: [_jsxs("p", { className: "text-muted-foreground text-xs", children: ["On ", levelMove.storey, " with its walls, so it hides that floor's plan in solo and exploded views.", levelMove.roofs > 1 && ` The floor's ${levelMove.roofs} roofs move together.`] }), _jsx("button", { className: "w-full rounded-full bg-foreground/[0.08] px-3 py-2 font-medium text-foreground text-xs transition-colors hover:bg-foreground/[0.14]", onClick: handleMoveOffStorey, type: "button", children: levelMove.label })] }) })), _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-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark: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: "Draw Segment", onClick: handleAddSegment }) })] }), _jsxs(PanelSection, { title: "Position", children: [_jsx(SliderControl, { label: "X", onChange: (v) => {
                             const pos = [...node.position];
                             pos[0] = v;
                             handleUpdate({ position: pos });
@@ -197,7 +225,7 @@ export default function RoofPanel() {
                                 } }), _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 ||
+                                } })] })] }), _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-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark: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-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark: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-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark: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-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark: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-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark: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'
@@ -210,5 +238,5 @@ export default function RoofPanel() {
                                         { 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 })] }) })] }));
+                                    ], 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-black/4 dark:bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-black/8 dark: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-600 dark:text-red-400" }), label: "Delete", onClick: handleDelete })] }) })] }));
 }

package/dist/roof/parametrics.js

@@ -15,5 +15,5 @@ export const roofParametrics = {
             ],
         },
     ],
-    customPanel: () => import('./panel'),
+    customPanel: () => import('./panel.js'),
 };

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

@@ -1 +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,gCAkHjE,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/roof/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,QAAQ,EAKd,MAAM,kBAAkB,CAAA;AAgBzB,eAAO,MAAM,YAAY,sBAAuB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,gCAyJjE,CAAA;eAEc,YAAY"}

package/dist/roof/renderer.js

@@ -1,11 +1,11 @@
 '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 { hasSegmentMaterialOverride, isIndependentRoofSegment, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
+import { getRoofMaterialArray, isRevealAssembling, levelWallCladdingRef, NodeRenderer, subscribeRevealAssembling, 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';
+import { createPlaceholderGeometry } from '../shared/placeholder-geometry.js';
+import { getRoofDebugMaterials, getRoofMaterials } from './roof-materials.js';
 export const RoofRenderer = ({ node: rawNode }) => {
     const ref = useRef(null);
     const liveOverride = useLiveNodeOverrides((s) => s.overrides.get(rawNode.id));
@@ -14,6 +14,36 @@ export const RoofRenderer = ({ node: rawNode }) => {
     useLayoutEffect(() => {
         useScene.getState().markDirty(node.id);
     }, [node.id]);
+    // A roof an agent builds assembles: its segments drop in drawn apart, then
+    // the merged shell (built meanwhile) takes over. Imperative and synchronous,
+    // so a capture that ends the reveal sees the whole shell in the same tick.
+    useLayoutEffect(() => {
+        const group = ref.current;
+        const show = (assembling) => {
+            const merged = group.getObjectByName('merged-roof');
+            const wrapper = group.getObjectByName('segments-wrapper');
+            const elements = group.getObjectByName('roof-elements');
+            if (merged)
+                merged.visible = !assembling;
+            if (wrapper)
+                wrapper.visible = assembling;
+            if (elements)
+                elements.visible = !assembling;
+            if (assembling || !wrapper)
+                return;
+            // Hidden meshes still meet rays: back to empty placeholders, as after a reload.
+            for (const child of wrapper.children) {
+                const mesh = child;
+                if (!mesh.isMesh || mesh.geometry?.userData.placeholder)
+                    continue;
+                mesh.geometry?.dispose();
+                mesh.geometry = createPlaceholderGeometry(4);
+            }
+        };
+        if (isRevealAssembling(node.id))
+            show(true);
+        return subscribeRevealAssembling(node.id, show);
+    }, [node.id]);
     const handlers = useNodeEvents(node, 'roof');
     const debugColors = useViewer((s) => s.debugColors);
     const shading = useViewer((s) => s.shading);
@@ -47,7 +77,7 @@ export const RoofRenderer = ({ node: rawNode }) => {
             const seg = state.nodes[segmentId];
             if (!seg)
                 continue;
-            if (hasSegmentMaterialOverride(seg))
+            if (hasSegmentMaterialOverride(seg) || isIndependentRoofSegment(seg))
                 ids.push(segmentId);
         }
         return ids;
@@ -58,14 +88,17 @@ export const RoofRenderer = ({ node: rawNode }) => {
             const seg = state.nodes[segmentId];
             if (!seg)
                 continue;
-            if (!hasSegmentMaterialOverride(seg))
+            if (!hasSegmentMaterialOverride(seg) && !isIndependentRoofSegment(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]);
+    // The gable band is clad like the walls below it (their assemblies).
+    const wallCladdingRef = useScene((state) => levelWallCladdingRef(state.nodes, node));
+    const sceneMaterials = useScene((state) => state.materials);
+    const customMaterial = useMemo(() => getRoofMaterialArray(node, shading, textures, colorPreset, sceneTheme, wallCladdingRef, sceneMaterials), [node, shading, textures, colorPreset, sceneTheme, wallCladdingRef, sceneMaterials]);
     const material = debugColors
         ? getRoofDebugMaterials(shading)
         : customMaterial || getRoofMaterials(shading, textures, colorPreset);

package/dist/roof/roof-footprint-source.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"roof-footprint-source.d.ts","sourceRoot":"","sources":["../../src/roof/roof-footprint-source.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEvD,KAAK,wBAAwB,GAAG;IAC9B,MAAM,EAAE,yBAAyB,CAAA;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAA;CACvD,CAAA;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,uFAGzB,CAAA;AAEH,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"roof-footprint-source.d.ts","sourceRoot":"","sources":["../../src/roof/roof-footprint-source.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEvD,KAAK,wBAAwB,GAAG;IAC9B,MAAM,EAAE,yBAAyB,CAAA;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAA;CACvD,CAAA;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,uFAGzB,CAAA;eAEY,sBAAsB"}