@pascal-app/nodes 1.0.6 → 1.0.7

package/dist/roof-segment/panel.js

@@ -1,6 +1,6 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createDefaultRidgeVentsForSegment, getConicalRoofCoverage, getRoofSegmentDeckReach, getSegmentSlopeFrame, isAutoGutterEnabled, isAutoRidgeVentEnabled, isDefaultRidgeVentNode, isGlazedRoofSegment, normalizeRoofSegmentTrim, ROOF_SHAPE_DEFAULTS, roofTypeHasRakes, useScene, } from '@pascal-app/core';
+import { createDefaultRidgeVentsForSegment, getConicalRoofCoverage, getRoofSegmentDeckReach, getSegmentSlopeFrame, isAutoGutterEnabled, isAutoRidgeVentEnabled, isDefaultRidgeVentNode, isGlazedRoofSegment, normalizeRoofSegmentTrim, ROOF_SHAPE_DEFAULTS, roofBuildUpPatch, roofSegmentEaveProfile, roofTypeHasRakes, usePascalI18n, useScene, } from '@pascal-app/core';
 import { ActionButton, ActionGroup, duplicateNodeAndPickUp, PanelSection, PanelWrapper, SegmentedControl, SliderControl, ToggleControl, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Check, Copy, Move, Pencil, RotateCcw, Trash2 } from 'lucide-react';
@@ -8,21 +8,42 @@ import { useCallback } from 'react';
 import { BarrelRoofPanel } from '../roof/barrel-panel.js';
 import { RoofGlazingPanel } from '../roof/glazing-panel.js';
 import { commitSeatedRoofEdit } from '../roof/roof-level-target.js';
+import { RoofBuildUpSection } from './build-up-section.js';
 const ROOF_TYPE_OPTIONS = [
-    { label: 'Hip', value: 'hip' },
-    { label: 'Gable', value: 'gable' },
-    { label: 'Shed', value: 'shed' },
+    { label: /* i18n */ { id: 'node.roofSegment.panel.hip', message: 'Hip' }, value: 'hip' },
+    { label: /* i18n */ { id: 'node.roofSegment.panel.gable', message: 'Gable' }, value: 'gable' },
+    { label: /* i18n */ { id: 'node.roofSegment.panel.shed', message: 'Shed' }, value: 'shed' },
 ];
 const ROOF_TYPE_OPTIONS_2 = [
-    { label: 'Flat', value: 'flat' },
-    { label: 'Gambrel', value: 'gambrel' },
-    { label: 'Dutch', value: 'dutch' },
-    { label: 'Mansard', value: 'mansard' },
+    { label: /* i18n */ { id: 'node.roofSegment.panel.flat', message: 'Flat' }, value: 'flat' },
+    {
+        label: /* i18n */ { id: 'node.roofSegment.panel.gambrel', message: 'Gambrel' },
+        value: 'gambrel',
+    },
+    { label: /* i18n */ { id: 'node.roofSegment.panel.dutch', message: 'Dutch' }, value: 'dutch' },
+    {
+        label: /* i18n */ { id: 'node.roofSegment.panel.mansard', message: 'Mansard' },
+        value: 'mansard',
+    },
 ];
 const ROOF_TYPE_OPTIONS_3 = [
-    { label: 'Conical', value: 'conical' },
-    { label: 'Barrel', value: 'barrel' },
+    {
+        label: /* i18n */ { id: 'node.roofSegment.panel.conical', message: 'Conical' },
+        value: 'conical',
+    },
+    { label: /* i18n */ { id: 'node.roofSegment.panel.barrel', message: 'Barrel' }, value: 'barrel' },
 ];
+// How the rafter tails are cut at the eaves, the fascia and soffit with them (core's `roofEaveProfile`).
+const EAVE_CUT_OPTIONS = [
+    { label: /* i18n */ { id: 'node.roofSegment.panel.plumb', message: 'Plumb' }, value: 'plumb' },
+    { label: /* i18n */ { id: 'node.roofSegment.panel.square', message: 'Square' }, value: 'square' },
+    {
+        label: /* i18n */ { id: 'node.roofSegment.panel.plumbLevel', message: 'Plumb + level' },
+        value: 'plumb-level',
+    },
+];
+/** The sloped forms whose tails are cut at their eaves by the plane's eave cut. */
+const EAVE_CUT_ROOF_TYPES = new Set(['gable', 'hip', 'shed']);
 // Carpenter / roofer convention: rise over a 12" run, converted to degrees.
 // atan(3/12) ≈ 14.04°, atan(6/12) ≈ 26.57°, atan(9/12) ≈ 36.87°, atan(12/12) = 45°.
 const PITCH_PRESETS = [
@@ -49,6 +70,13 @@ const EMPTY_TRIM = {
     backRightX: 0,
     backRightZ: 0,
 };
+/** The planes of a roof that take layers: its segments, glazed ones aside. */
+function roofLayerPlaneIds(children, nodes) {
+    return children.filter((id) => {
+        const child = nodes[id];
+        return child?.type === 'roof-segment' && !isGlazedRoofSegment(child);
+    });
+}
 function hasSegmentTrim(node) {
     return Object.values(normalizeRoofSegmentTrim(node)).some((value) => value > 0);
 }
@@ -66,11 +94,13 @@ function metadataRecord(metadata) {
     return {};
 }
 export default function RoofSegmentPanel() {
+    const i18n = usePascalI18n();
     const selectedId = useViewer((s) => s.selection.selectedIds[0]);
     const setSelection = useViewer((s) => s.setSelection);
     const updateNode = useScene((s) => s.updateNode);
     const setMovingNode = useEditor((s) => s.setMovingNode);
     const setRoofHostDragArmedId = useEditor((s) => s.setRoofHostDragArmedId);
+    const unit = useViewer((s) => s.unit);
     const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
     const autoRidgeVentEnabled = useScene((s) => {
         const current = selectedId
@@ -80,6 +110,14 @@ export default function RoofSegmentPanel() {
             return false;
         return isAutoRidgeVentEnabled(current, s.nodes);
     });
+    // How many planes of this roof take layers: "Apply to all planes" shows once there are two.
+    const roofPlaneCount = useScene((s) => {
+        const current = selectedId
+            ? s.nodes[selectedId]
+            : undefined;
+        const roof = current?.parentId ? s.nodes[current.parentId] : undefined;
+        return roof?.type === 'roof' ? roofLayerPlaneIds(roof.children, s.nodes).length : 0;
+    });
     const autoGutterEnabled = useScene((s) => {
         const current = selectedId
             ? s.nodes[selectedId]
@@ -94,6 +132,17 @@ export default function RoofSegmentPanel() {
         // Reshaped or moved onto the walls that carry it, its roof goes to the level above them.
         commitSeatedRoofEdit([{ id: selectedId, data: updates }], selectedId);
     }, [selectedId]);
+    const handleApplyToRoof = useCallback(() => {
+        const scene = useScene.getState();
+        const current = selectedId ? scene.nodes[selectedId] : undefined;
+        if (current?.type !== 'roof-segment' || !current.buildUp)
+            return;
+        const roof = current.parentId ? scene.nodes[current.parentId] : undefined;
+        if (roof?.type !== 'roof')
+            return;
+        const patch = roofBuildUpPatch(current.buildUp);
+        scene.updateNodes(roofLayerPlaneIds(roof.children, scene.nodes).map((id) => ({ id, data: patch })));
+    }, [selectedId]);
     const handleRoofTypeChange = useCallback((roofType) => {
         if (isManagedLeanToRoofSegment(node?.metadata))
             return;
@@ -239,9 +288,42 @@ export default function RoofSegmentPanel() {
     const reach = getRoofSegmentDeckReach(node);
     const halfWall = node.wallThickness / 2;
     const { cosTheta } = getSegmentSlopeFrame(node);
-    return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onBack: handleBack, onClose: handleClose, title: node.name || 'Roof Segment', width: 300, children: [_jsx(RoofGlazingPanel, { segments: [node] }), _jsxs(PanelSection, { title: "Roof Type", children: [_jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS, value: node.roofType, disabled: managedLeanToRoofSegment }), _jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS_2, value: node.roofType, disabled: managedLeanToRoofSegment }), _jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS_3, value: node.roofType, disabled: managedLeanToRoofSegment })] }), node.roofType !== 'conical' && (_jsxs(PanelSection, { title: "Trim", children: [_jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: showTrimPlanes ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(Pencil, { className: "h-3.5 w-3.5" })), label: showTrimPlanes ? 'Done editing' : 'Edit footprint', onClick: () => (showTrimPlanes ? handleBack() : handleTrimEditing(true)) }), _jsx(ActionButton, { className: "disabled:cursor-not-allowed disabled:opacity-40", disabled: !hasSegmentTrim(node), icon: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }), label: "Reset", onClick: handleResetTrim })] }), node.roofType !== 'shed' && node.roofType !== 'flat' && node.roofType !== 'barrel' && (_jsx(ToggleControl, { checked: autoRidgeVentEnabled, label: "Auto ridge vent", onChange: handleAutoRidgeVentToggle }))] })), node.roofType !== 'conical' && (_jsx(PanelSection, { title: "Drainage", children: _jsx(ToggleControl, { checked: autoGutterEnabled, label: "Auto gutters", onChange: handleAutoGutterToggle }) })), _jsx(PanelSection, { title: "Footprint", children: node.roofType === 'conical' ? (_jsx(SliderControl, { label: "Diameter", max: 1000, min: 0.5, onChange: (v) => handleUpdate({ width: v, depth: v }), precision: 2, step: 0.5, unit: "m", value: node.width })) : (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: node.roofType === 'barrel' ? 'Length' : 'Width', max: 1000, min: 0.5, onChange: (v) => handleUpdate({ width: v }), precision: 2, step: 0.5, unit: "m", value: node.width }), _jsx(SliderControl, { label: node.roofType === 'barrel' ? 'Span' : 'Depth', max: 1000, min: 0.5, onChange: (v) => handleUpdate({ depth: v }), precision: 2, step: 0.5, unit: "m", value: node.depth })] })) }), node.roofType === 'conical' && (_jsxs(PanelSection, { title: "Conical Shape", children: [_jsx(ToggleControl, { checked: !conicalCoverage.fullCircle, label: "Clipped version", onChange: (checked) => handleUpdate({ conicalFullCircle: !checked }) }), !conicalCoverage.fullCircle && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: "Start Angle", max: 180, min: -180, onChange: (degrees) => handleUpdate({ conicalStartAngle: (degrees * Math.PI) / 180 }), precision: 0, step: 1, unit: "\u00B0", value: Math.round((conicalCoverage.startAngle * 180) / Math.PI) }), _jsx(SliderControl, { label: "Arc", max: 345, min: 15, onChange: (degrees) => handleUpdate({
+    return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onBack: handleBack, onClose: handleClose, title: node.name || i18n._({ id: 'node.roofSegment.panel.roofSegment', message: 'Roof Segment' }), width: 300, children: [_jsx(RoofGlazingPanel, { segments: [node] }), _jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.roofType', message: 'Roof Type' }), children: [_jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS.map((option) => ({ ...option, label: i18n._(option.label) })), value: node.roofType, disabled: managedLeanToRoofSegment }), _jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS_2.map((option) => ({
+                            ...option,
+                            label: i18n._(option.label),
+                        })), value: node.roofType, disabled: managedLeanToRoofSegment }), _jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS_3.map((option) => ({
+                            ...option,
+                            label: i18n._(option.label),
+                        })), value: node.roofType, disabled: managedLeanToRoofSegment })] }), node.roofType !== 'conical' && (_jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.trim', message: 'Trim' }), children: [_jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: showTrimPlanes ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(Pencil, { className: "h-3.5 w-3.5" })), label: showTrimPlanes
+                                    ? i18n._({ id: 'node.roofSegment.panel.doneEditing', message: 'Done editing' })
+                                    : i18n._({
+                                        id: 'node.roofSegment.panel.editFootprint',
+                                        message: 'Edit footprint',
+                                    }), onClick: () => (showTrimPlanes ? handleBack() : handleTrimEditing(true)) }), _jsx(ActionButton, { className: "disabled:cursor-not-allowed disabled:opacity-40", disabled: !hasSegmentTrim(node), icon: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roofSegment.panel.reset', message: 'Reset' }), onClick: handleResetTrim })] }), node.roofType !== 'shed' && node.roofType !== 'flat' && node.roofType !== 'barrel' && (_jsx(ToggleControl, { checked: autoRidgeVentEnabled, label: i18n._({
+                            id: 'node.roofSegment.panel.autoRidgeVent',
+                            message: 'Auto ridge vent',
+                        }), onChange: handleAutoRidgeVentToggle }))] })), node.roofType !== 'conical' && (_jsx(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.drainage', message: 'Drainage' }), children: _jsx(ToggleControl, { checked: autoGutterEnabled, label: i18n._({ id: 'node.roofSegment.panel.autoGutters', message: 'Auto gutters' }), onChange: handleAutoGutterToggle }) })), _jsx(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.footprint', message: 'Footprint' }), children: node.roofType === 'conical' ? (_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.diameter', message: 'Diameter' }), max: 1000, min: 0.5, onChange: (v) => handleUpdate({ width: v, depth: v }), precision: 2, step: 0.5, unit: "m", value: node.width })) : (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: node.roofType === 'barrel'
+                                ? i18n._({ id: 'node.roofSegment.panel.length', message: 'Length' })
+                                : i18n._({ id: 'node.roofSegment.panel.width', message: 'Width' }), max: 1000, min: 0.5, onChange: (v) => handleUpdate({ width: v }), precision: 2, step: 0.5, unit: "m", value: node.width }), _jsx(SliderControl, { label: node.roofType === 'barrel'
+                                ? i18n._({ id: 'node.roofSegment.panel.span', message: 'Span' })
+                                : i18n._({ id: 'node.roofSegment.panel.depth', message: 'Depth' }), max: 1000, min: 0.5, onChange: (v) => handleUpdate({ depth: v }), precision: 2, step: 0.5, unit: "m", value: node.depth })] })) }), node.roofType === 'conical' && (_jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.conicalShape', message: 'Conical Shape' }), children: [_jsx(ToggleControl, { checked: !conicalCoverage.fullCircle, label: i18n._({
+                            id: 'node.roofSegment.panel.clippedVersion',
+                            message: 'Clipped version',
+                        }), onChange: (checked) => handleUpdate({ conicalFullCircle: !checked }) }), !conicalCoverage.fullCircle && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.startAngle', message: 'Start Angle' }), max: 180, min: -180, onChange: (degrees) => handleUpdate({ conicalStartAngle: (degrees * Math.PI) / 180 }), precision: 0, step: 1, unit: "\u00B0", value: Math.round((conicalCoverage.startAngle * 180) / Math.PI) }), _jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.arc', message: 'Arc' }), max: 345, min: 15, onChange: (degrees) => handleUpdate({
                                     conicalSweepAngle: (Math.sign(conicalCoverage.sweepAngle) * degrees * Math.PI) / 180,
-                                }), precision: 0, step: 1, unit: "\u00B0", value: Math.round((Math.abs(conicalCoverage.sweepAngle) * 180) / Math.PI) })] }))] })), _jsx(PanelSection, { title: "Wall Height", children: _jsx(SliderControl, { label: "Wall", max: 1000, min: 0, onChange: (v) => handleUpdate({ wallHeight: v }), precision: 2, step: 0.1, unit: "m", value: node.wallHeight }) }), node.roofType === 'barrel' ? (_jsx(BarrelRoofPanel, { node: node })) : (_jsxs(PanelSection, { title: "Pitch", children: [_jsx(SliderControl, { label: "Angle", max: 60, min: 0, onChange: (v) => handleUpdate({ pitch: v }), precision: 0, step: 1, unit: "\u00B0", value: Math.round(node.pitch) }), _jsx("div", { className: "flex gap-1.5 px-1 pt-2 pb-1", children: PITCH_PRESETS.map((preset) => (_jsx(ActionButton, { label: preset.label, onClick: () => handleUpdate({ pitch: preset.deg }) }, preset.label))) })] })), node.roofType === 'gambrel' && (_jsxs(PanelSection, { title: "Shape", children: [_jsx(SliderControl, { label: "Kink Depth", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ gambrelLowerWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.gambrelLowerWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: "Kink Height", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ gambrelLowerHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.gambrelLowerHeightRatio * 100) / 100 })] })), node.roofType === 'mansard' && (_jsxs(PanelSection, { title: "Shape", children: [_jsx(SliderControl, { label: "Waist Width", max: 0.45, min: 0.05, onChange: (v) => handleUpdate({ mansardSteepWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.mansardSteepWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: "Waist Height", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ mansardSteepHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.mansardSteepHeightRatio * 100) / 100 })] })), node.roofType === 'dutch' && (_jsxs(PanelSection, { title: "Shape", children: [_jsx(SliderControl, { label: "Waist Width", max: 0.45, min: 0.05, onChange: (v) => handleUpdate({ dutchHipWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.dutchHipWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: "Waist Height", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ dutchHipHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.dutchHipHeightRatio * 100) / 100 }), _jsx(SliderControl, { label: "Waist Length", max: 1, min: 0.1, onChange: (v) => handleUpdate({ dutchWaistLengthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round((node.dutchWaistLengthRatio ?? ROOF_SHAPE_DEFAULTS.dutchWaistLengthRatio) * 100) / 100 }), _jsx(SliderControl, { label: "Top Rake Thick.", max: 0.5, min: 0.01, onChange: (v) => handleUpdate({ dutchTopRakeThickness: v }), precision: 2, step: 0.01, unit: "m", value: node.dutchTopRakeThickness ?? ROOF_SHAPE_DEFAULTS.dutchTopRakeThickness }), _jsx(SliderControl, { label: "Top Rake Length", max: 3, min: 0, onChange: (v) => handleUpdate({ dutchGabletRake: v }), precision: 2, step: 0.01, unit: "m", value: node.dutchGabletRake ?? ROOF_SHAPE_DEFAULTS.dutchGabletRake })] })), _jsxs(PanelSection, { title: "Structure", children: [_jsx(SliderControl, { label: "Wall Thick.", max: 1, min: 0.05, onChange: (v) => handleUpdate({ wallThickness: v }), precision: 2, step: 0.05, unit: "m", value: node.wallThickness }), !isGlazedRoofSegment(node) && (_jsx(SliderControl, { label: "Deck Thick.", max: 0.3, min: 0.04, onChange: (v) => handleUpdate({ deckThickness: v }), precision: 2, step: 0.01, unit: "m", value: node.deckThickness })), node.roofType === 'barrel' ? (_jsx(SliderControl, { label: "End overhang", max: 1, min: 0, onChange: (v) => handleUpdate({ overhang: v }), precision: 2, step: 0.05, unit: "m", value: reach.x - halfWall })) : (_jsx(SliderControl, { label: "Eave overhang", max: 1, min: 0, onChange: (v) => handleUpdate({ overhang: v / cosTheta }), precision: 2, step: 0.05, unit: "m", value: reach.z - halfWall })), roofTypeHasRakes(node.roofType) && (_jsx(SliderControl, { label: "Gable overhang", max: 3, min: 0, onChange: (v) => handleUpdate({ gableOverhang: v }), precision: 2, step: 0.05, unit: "m", value: reach.x - halfWall })), !isGlazedRoofSegment(node) && (_jsx(SliderControl, { label: "Shingle Thick.", max: 0.3, min: 0.02, onChange: (v) => handleUpdate({ shingleThickness: v }), precision: 2, step: 0.01, unit: "m", value: node.shingleThickness })), _jsx(ToggleControl, { checked: node.fascia ?? false, label: "Fascia", onChange: (checked) => handleUpdate({ fascia: checked }) }), node.fascia && (_jsx(SliderControl, { label: "Fascia height", max: 0.6, min: 0.1, onChange: (v) => handleUpdate({ fasciaHeight: v }), precision: 2, step: 0.01, unit: "m", value: node.fasciaHeight ?? 0.184 }))] }), _jsxs(PanelSection, { title: "Position", children: [_jsx(SliderControl, { label: "X", onChange: (v) => {
+                                }), precision: 0, step: 1, unit: "\u00B0", value: Math.round((Math.abs(conicalCoverage.sweepAngle) * 180) / Math.PI) })] }))] })), _jsx(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.wallHeight', message: 'Wall Height' }), children: _jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.wall', message: 'Wall' }), max: 1000, min: 0, onChange: (v) => handleUpdate({ wallHeight: v }), precision: 2, step: 0.1, unit: "m", value: node.wallHeight }) }), node.roofType === 'barrel' ? (_jsx(BarrelRoofPanel, { node: node })) : (_jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.pitch', message: 'Pitch' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.angle', message: 'Angle' }), max: 60, min: 0, onChange: (v) => handleUpdate({ pitch: v }), precision: 0, step: 1, unit: "\u00B0", value: Math.round(node.pitch) }), _jsx("div", { className: "flex gap-1.5 px-1 pt-2 pb-1", children: PITCH_PRESETS.map((preset) => (_jsx(ActionButton, { label: preset.label, onClick: () => handleUpdate({ pitch: preset.deg }) }, preset.label))) })] })), node.roofType === 'gambrel' && (_jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.shape', message: 'Shape' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.kinkDepth', message: 'Kink Depth' }), max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ gambrelLowerWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.gambrelLowerWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.kinkHeight', message: 'Kink Height' }), max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ gambrelLowerHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.gambrelLowerHeightRatio * 100) / 100 })] })), node.roofType === 'mansard' && (_jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.shape', message: 'Shape' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.waistWidth', message: 'Waist Width' }), max: 0.45, min: 0.05, onChange: (v) => handleUpdate({ mansardSteepWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.mansardSteepWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.waistHeight', message: 'Waist Height' }), max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ mansardSteepHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.mansardSteepHeightRatio * 100) / 100 })] })), node.roofType === 'dutch' && (_jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.shape', message: 'Shape' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.waistWidth', message: 'Waist Width' }), max: 0.45, min: 0.05, onChange: (v) => handleUpdate({ dutchHipWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.dutchHipWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.waistHeight', message: 'Waist Height' }), max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ dutchHipHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.dutchHipHeightRatio * 100) / 100 }), _jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.waistLength', message: 'Waist Length' }), max: 1, min: 0.1, onChange: (v) => handleUpdate({ dutchWaistLengthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round((node.dutchWaistLengthRatio ?? ROOF_SHAPE_DEFAULTS.dutchWaistLengthRatio) * 100) / 100 }), _jsx(SliderControl, { label: i18n._({
+                            id: 'node.roofSegment.panel.topRakeThick',
+                            message: 'Top Rake Thick.',
+                        }), max: 0.5, min: 0.01, onChange: (v) => handleUpdate({ dutchTopRakeThickness: v }), precision: 2, step: 0.01, unit: "m", value: node.dutchTopRakeThickness ?? ROOF_SHAPE_DEFAULTS.dutchTopRakeThickness }), _jsx(SliderControl, { label: i18n._({
+                            id: 'node.roofSegment.panel.topRakeLength',
+                            message: 'Top Rake Length',
+                        }), max: 3, min: 0, onChange: (v) => handleUpdate({ dutchGabletRake: v }), precision: 2, step: 0.01, unit: "m", value: node.dutchGabletRake ?? ROOF_SHAPE_DEFAULTS.dutchGabletRake })] })), _jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.structure', message: 'Structure' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.wallThick', message: 'Wall Thick.' }), max: 1, min: 0.05, onChange: (v) => handleUpdate({ wallThickness: v }), precision: 2, step: 0.05, unit: "m", value: node.wallThickness }), !(isGlazedRoofSegment(node) || node.buildUp) && (_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.deckThick', message: 'Deck Thick.' }), max: 0.3, min: 0.04, onChange: (v) => handleUpdate({ deckThickness: v }), precision: 2, step: 0.01, unit: "m", value: node.deckThickness })), node.roofType === 'barrel' ? (_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.endOverhang', message: 'End overhang' }), max: 1, min: 0, onChange: (v) => handleUpdate({ overhang: v }), precision: 2, step: 0.05, unit: "m", value: reach.x - halfWall })) : (_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.eaveOverhang', message: 'Eave overhang' }), max: 1, min: 0, onChange: (v) => handleUpdate({ overhang: v / cosTheta }), precision: 2, step: 0.05, unit: "m", value: reach.z - halfWall })), roofTypeHasRakes(node.roofType) && (_jsx(SliderControl, { label: i18n._({
+                            id: 'node.roofSegment.panel.gableOverhang',
+                            message: 'Gable overhang',
+                        }), max: 3, min: 0, onChange: (v) => handleUpdate({ gableOverhang: v }), precision: 2, step: 0.05, unit: "m", value: reach.x - halfWall })), !(isGlazedRoofSegment(node) || node.buildUp) && (_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.shingleThick', message: 'Shingle Thick.' }), max: 0.3, min: 0.02, onChange: (v) => handleUpdate({ shingleThickness: v }), precision: 2, step: 0.01, unit: "m", value: node.shingleThickness })), EAVE_CUT_ROOF_TYPES.has(node.roofType) && node.pitch > 0 && (_jsxs("div", { children: [_jsx("div", { className: "px-1 pb-1 text-[10px] text-muted-foreground uppercase tracking-wide", children: i18n._({ id: 'node.roofSegment.panel.eaveCut', message: 'Eave cut' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ eaveCut: v }), options: EAVE_CUT_OPTIONS.map((option) => ({
+                                    ...option,
+                                    label: i18n._(option.label),
+                                })), value: node.eaveCut ?? 'plumb' })] })), _jsx(ToggleControl, { checked: node.fascia ?? false, label: i18n._({ id: 'node.roofSegment.panel.fascia', message: 'Fascia' }), onChange: (checked) => handleUpdate({ fascia: checked }) }), node.fascia && (_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.fasciaHeight', message: 'Fascia height' }), max: 0.6, min: 0.1, onChange: (v) => handleUpdate({ fasciaHeight: v }), precision: 2, step: 0.01, unit: "m", value: node.fasciaHeight ?? roofSegmentEaveProfile(node).fascia.height }))] }), !isGlazedRoofSegment(node) && (_jsx(RoofBuildUpSection, { node: node, onApplyToRoof: roofPlaneCount > 1 ? handleApplyToRoof : undefined, onUpdate: handleUpdate, unit: unit })), _jsxs(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.position', message: 'Position' }), children: [_jsx(SliderControl, { label: "X", onChange: (v) => {
                             const pos = [...node.position];
                             pos[0] = v;
                             handleUpdate({ position: pos });
@@ -253,7 +335,7 @@ export default function RoofSegmentPanel() {
                             const pos = [...node.position];
                             pos[2] = v;
                             handleUpdate({ position: pos });
-                        }, precision: 2, step: 0.05, unit: "m", value: node.position[2] }), (node.roofType !== 'conical' || !conicalCoverage.fullCircle) && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: "Rotation", max: 180, min: -180, onChange: (degrees) => {
+                        }, precision: 2, step: 0.05, unit: "m", value: node.position[2] }), (node.roofType !== 'conical' || !conicalCoverage.fullCircle) && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roofSegment.panel.rotation', message: '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');
@@ -261,5 +343,5 @@ export default function RoofSegmentPanel() {
                                         } }), _jsx(ActionButton, { label: "+45\u00B0", onClick: () => {
                                             triggerSFX('sfx:item-rotate');
                                             handleUpdate({ rotation: node.rotation + Math.PI / 4 });
-                                        } })] })] }))] }), _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 })] }) })] }));
+                                        } })] })] }))] }), _jsx(PanelSection, { title: i18n._({ id: 'node.roofSegment.panel.actions', message: 'Actions' }), children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roofSegment.panel.move', message: 'Move' }), onClick: handleMove }), _jsx(ActionButton, { icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roofSegment.panel.duplicate', message: '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: i18n._({ id: 'node.roofSegment.panel.delete', message: 'Delete' }), onClick: handleDelete })] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/roof-segment/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAoB,MAAM,kBAAkB,CAAA;AAEpG,eAAO,MAAM,sBAAsB,EAAE,oBAAoB,CAAC,eAAe,CA6LxE,CAAA"}
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/roof-segment/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAoB,MAAM,kBAAkB,CAAA;AAEpG,eAAO,MAAM,sBAAsB,EAAE,oBAAoB,CAAC,eAAe,CAiMxE,CAAA"}

package/dist/roof-segment/parametrics.js

@@ -140,6 +140,8 @@ export const roofSegmentParametrics = {
                     min: 0.04,
                     max: 0.3,
                     step: 0.01,
+                    // Layers set it: edited here it would part from them.
+                    visibleIf: (node) => !node.buildUp,
                 },
                 { key: 'overhang', kind: 'number', unit: 'm', min: 0, max: 1, step: 0.05 },
                 {
@@ -160,6 +162,8 @@ export const roofSegmentParametrics = {
                     min: 0.02,
                     max: 0.3,
                     step: 0.01,
+                    // Layers set it: edited here it would part from them.
+                    visibleIf: (node) => !node.buildUp,
                 },
                 {
                     key: 'wallShell',

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

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/roof-segment/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,eAAe,EAKrB,MAAM,kBAAkB,CAAA;AAiBzB,eAAO,MAAM,mBAAmB,yBAA0B;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,gCAkMlF,CAAA;eAEc,mBAAmB"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/roof-segment/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EASL,KAAK,eAAe,EAKrB,MAAM,kBAAkB,CAAA;AAkBzB,eAAO,MAAM,mBAAmB,yBAA0B;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,gCA4NlF,CAAA;eAEc,mBAAmB"}

package/dist/roof-segment/renderer.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getEffectiveNode, getEffectiveRoofSurfaceMaterial, getEffectiveSegmentSurfaceMaterial, getSegmentFasciaMaterial, isGlazedRoofSegment, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
-import { createMaterial, getRoofMaterialArray, levelWallCladdingRef, resolveMaterialRef, SHADOW_ONLY_LAYER, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { getEffectiveNode, getEffectiveRoofSurfaceMaterial, getEffectiveSegmentSurfaceMaterial, getRoofWallBandMaterial, getSegmentFasciaMaterial, isGlazedRoofSegment, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
+import { createMaterial, getRoofMaterialArray, levelWallCladdingRef, levelWallFaceRef, resolveMaterialRef, SHADOW_ONLY_LAYER, useNodeEvents, useViewer, } from '@pascal-app/viewer';
 import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { syncGlazedRoofShadow } from '../roof/glazed-geometry.js';
@@ -51,8 +51,11 @@ export const RoofSegmentRenderer = ({ node: storedNode }) => {
     //   slot 1 → 'wall'  (deck top & shingle eave bands)
     //   slot 2 → 'wall'  (interior)
     //   slot 3 → 'top'   (shingle / roof surface)
+    //   slot 4 → the heel band (its own, the roof's, else the walls' below)
+    //   slot 5 / 6 → the left / right gable (its own, else slot 0's)
     // The gable band is clad like the walls below it (their assemblies).
     const wallCladdingRef = useScene((state) => parentNode ? levelWallCladdingRef(state.nodes, parentNode) : null);
+    const wallFaceRef = useScene((state) => parentNode ? levelWallFaceRef(state.nodes, parentNode) : null);
     // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
     const customMaterial = useMemo(() => {
         const resolveSlot = (role) => {
@@ -69,8 +72,15 @@ export const RoofSegmentRenderer = ({ node: storedNode }) => {
         // Themed parent-roof array (per-role scene-theme colours) — used both as the
         // full fallback and to fill any individual untextured slot below.
         const themedArray = parentNode
-            ? getRoofMaterialArray(parentNode, shading, textures, colorPreset, sceneTheme, wallCladdingRef, sceneMaterials)
+            ? getRoofMaterialArray(parentNode, shading, textures, colorPreset, sceneTheme, wallCladdingRef, sceneMaterials, wallFaceRef)
             : null;
+        const resolveSpec = (spec) => spec
+            ? (resolveMaterialRef(spec.materialPreset, sceneMaterials, shading) ??
+                (spec.material !== undefined ? createMaterial(spec.material, shading) : null))
+            : null;
+        const heel = resolveSpec(getRoofWallBandMaterial(node, 'heel'));
+        const gableLeft = resolveSpec(getRoofWallBandMaterial(node, 'gable-left'));
+        const gableRight = resolveSpec(getRoofWallBandMaterial(node, 'gable-right'));
         const edge = resolveSlot('edge');
         const wall = resolveSlot('wall');
         const top = resolveSlot('top');
@@ -80,7 +90,7 @@ export const RoofSegmentRenderer = ({ node: storedNode }) => {
             ? (resolveMaterialRef(fasciaSpec.materialPreset, sceneMaterials, shading) ??
                 (fasciaSpec.material !== undefined ? createMaterial(fasciaSpec.material, shading) : null))
             : null;
-        if (!(edge || wall || top || fascia)) {
+        if (!(edge || wall || top || fascia || heel || gableLeft || gableRight)) {
             return themedArray;
         }
         // Some slots have explicit materials; fill the rest from the themed array so
@@ -88,11 +98,15 @@ export const RoofSegmentRenderer = ({ node: storedNode }) => {
         // Per-role only, then the themed parent slot — no cross-role fallback, so
         // painting one segment surface never bleeds onto its other surfaces.
         const slot = (i) => themedArray?.[i] ?? new THREE.MeshStandardMaterial();
+        const trim = edge ?? slot(0);
         return [
-            edge ?? slot(0),
+            trim,
             wall ?? slot(1),
             fascia ?? wall ?? slot(2),
             top ?? slot(3),
+            heel ?? slot(4),
+            gableLeft ?? trim,
+            gableRight ?? trim,
         ];
     }, [
         node.material,
@@ -106,6 +120,13 @@ export const RoofSegmentRenderer = ({ node: storedNode }) => {
         node.wallMaterialPreset,
         node.fasciaMaterial,
         node.fasciaMaterialPreset,
+        node.heelMaterial,
+        node.heelMaterialPreset,
+        node.gableLeftMaterial,
+        node.gableLeftMaterialPreset,
+        node.gableRightMaterial,
+        node.gableRightMaterialPreset,
+        wallFaceRef,
         parentNode,
         sceneMaterials,
         shading,

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

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/separator/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAErE,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,OAAO,aAAa,CAqCpE,CAAA"}
+{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/separator/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAIrE,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,OAAO,aAAa,CAiCpE,CAAA"}

package/dist/separator/definition.js

@@ -1,6 +1,10 @@
 import { SeparatorNode } from '@pascal-app/core';
+import { buildSeparatorFloorplan } from './floorplan.js';
+import { separatorMoveEndpointAffordance } from './floorplan-affordances.js';
 export const separatorDefinition = {
     kind: 'separator',
+    // Its pushes and end drags snap as a wall's do.
+    snapProfile: 'structural',
     bake: 'strip',
     schemaVersion: 1,
     schema: SeparatorNode,
@@ -18,18 +22,12 @@ export const separatorDefinition = {
     dirtyTracking: false,
     rendersChildren: false,
     renderer: { kind: 'parametric', module: () => import('./renderer.js') },
-    floorplan: (node) => ({
-        kind: 'line',
-        x1: node.start[0],
-        y1: node.start[1],
-        x2: node.end[0],
-        y2: node.end[1],
-        stroke: '#818cf8',
-        strokeWidth: 2,
-        strokeDasharray: '6 4',
-        vectorEffect: 'non-scaling-stroke',
-        pointerEvents: 'stroke',
-    }),
+    floorplan: buildSeparatorFloorplan,
+    // An invisible wall moves as a wall does, taking the ones joined to it along:
+    // its side arrows push it (the plan's `move-arrow`s, the 3D selection
+    // handles) and its ends drag, on the plan and in 3D.
+    floorplanAffordances: { 'move-endpoint': separatorMoveEndpointAffordance },
+    affordanceTools: { selection: () => import('./selection.js') },
     presentation: {
         icon: { kind: 'iconify', name: 'lucide:split' },
         label: 'Separator',

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

@@ -0,0 +1,9 @@
+import type { FloorplanAffordance, SeparatorNode } from '@pascal-app/core';
+/**
+ * An invisible wall's end handle on the plan, the 2D twin of its 3D grip: the
+ * same snapping, preview and commit (`beginSeparatorEndDrag`), the pointer read
+ * by the floor plan. The invisible walls joined at that end follow it; Alt
+ * leaves them where they are.
+ */
+export declare const separatorMoveEndpointAffordance: FloorplanAffordance<SeparatorNode>;
+//# sourceMappingURL=floorplan-affordances.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floorplan-affordances.d.ts","sourceRoot":"","sources":["../../src/separator/floorplan-affordances.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,aAAa,EACd,MAAM,kBAAkB,CAAA;AAKzB;;;;;GAKG;AACH,eAAO,MAAM,+BAA+B,EAAE,mBAAmB,CAAC,aAAa,CAe9E,CAAA"}

package/dist/separator/floorplan-affordances.js

@@ -0,0 +1,23 @@
+import { beginSeparatorEndDrag } from '@pascal-app/editor';
+/**
+ * An invisible wall's end handle on the plan, the 2D twin of its 3D grip: the
+ * same snapping, preview and commit (`beginSeparatorEndDrag`), the pointer read
+ * by the floor plan. The invisible walls joined at that end follow it; Alt
+ * leaves them where they are.
+ */
+export const separatorMoveEndpointAffordance = {
+    start({ node, payload }) {
+        const { endpoint } = payload;
+        const drag = beginSeparatorEndDrag(node.id, endpoint);
+        return {
+            affectedIds: drag?.affectedIds ?? [node.id],
+            apply({ planPoint, modifiers }) {
+                drag?.move([planPoint[0], planPoint[1]], modifiers.altKey);
+            },
+            canCommit: () => drag?.canCommit() ?? false,
+            commit() {
+                drag?.commit();
+            },
+        };
+    },
+};

package/dist/separator/floorplan.d.ts

@@ -0,0 +1,9 @@
+import type { FloorplanGeometry, GeometryContext, SeparatorNode } from '@pascal-app/core';
+/**
+ * An invisible wall on the plan: a dashed line. Selected, it shows a wall's own
+ * handles — an end handle at each end (drag it; the invisible walls joined
+ * there follow) and a push arrow off each side (the wall push, the ones joined
+ * to it following).
+ */
+export declare function buildSeparatorFloorplan(node: SeparatorNode, ctx: GeometryContext): FloorplanGeometry;
+//# sourceMappingURL=floorplan.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floorplan.d.ts","sourceRoot":"","sources":["../../src/separator/floorplan.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAMzF;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,aAAa,EACnB,GAAG,EAAE,eAAe,GACnB,iBAAiB,CA2CnB"}

package/dist/separator/floorplan.js

@@ -0,0 +1,54 @@
+import { WALL_PUSH_AFFORDANCE } from '@pascal-app/editor';
+/** How far off the line (m) a selected invisible wall's side arrows sit. */
+const SIDE_ARROW_OFFSET = 0.12;
+/**
+ * An invisible wall on the plan: a dashed line. Selected, it shows a wall's own
+ * handles — an end handle at each end (drag it; the invisible walls joined
+ * there follow) and a push arrow off each side (the wall push, the ones joined
+ * to it following).
+ */
+export function buildSeparatorFloorplan(node, ctx) {
+    const line = {
+        kind: 'line',
+        x1: node.start[0],
+        y1: node.start[1],
+        x2: node.end[0],
+        y2: node.end[1],
+        stroke: '#818cf8',
+        strokeWidth: 2,
+        strokeDasharray: '6 4',
+        vectorEffect: 'non-scaling-stroke',
+        pointerEvents: 'stroke',
+    };
+    if (!ctx.viewState?.selected)
+        return line;
+    const children = [line];
+    for (const endpoint of ['start', 'end'])
+        children.push({
+            kind: 'endpoint-handle',
+            point: [node[endpoint][0], node[endpoint][1]],
+            state: 'idle',
+            affordance: 'move-endpoint',
+            payload: { separatorId: node.id, endpoint },
+        });
+    const dx = node.end[0] - node.start[0];
+    const dz = node.end[1] - node.start[1];
+    const length = Math.hypot(dx, dz);
+    if (length > 1e-6) {
+        const middle = [(node.start[0] + node.end[0]) / 2, (node.start[1] + node.end[1]) / 2];
+        for (const side of ['a', 'b']) {
+            // Side `a` is the +normal one, as a wall's front.
+            const sign = side === 'a' ? 1 : -1;
+            const nx = (-dz / length) * sign;
+            const nz = (dx / length) * sign;
+            children.push({
+                kind: 'move-arrow',
+                point: [middle[0] + nx * SIDE_ARROW_OFFSET, middle[1] + nz * SIDE_ARROW_OFFSET],
+                angle: Math.atan2(nz, nx),
+                affordance: WALL_PUSH_AFFORDANCE,
+                payload: { wallId: node.id, side },
+            });
+        }
+    }
+    return { kind: 'group', children };
+}

package/dist/separator/renderer.d.ts

@@ -1,4 +1,8 @@
 import { type SeparatorNode } from '@pascal-app/core';
+/**
+ * An invisible wall in 3D: a dashed line on the floor, shown while its room or
+ * it is selected. A push or end drag moves it live (`useLiveNodeOverrides`).
+ */
 export default function SeparatorRenderer({ node }: {
     node: SeparatorNode;
 }): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/separator/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAyB,MAAM,kBAAkB,CAAA;AAU5E,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,+BAgD1E"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/separator/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAA+C,MAAM,kBAAkB,CAAA;AAUlG;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,+BAgE1E"}

package/dist/separator/renderer.js

@@ -1,26 +1,41 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRegistry, useScene } from '@pascal-app/core';
-import { useEditor } from '@pascal-app/editor';
+import { useLiveNodeOverrides, useRegistry, useScene } from '@pascal-app/core';
+import { separatorFloorElevation, useEditor } from '@pascal-app/editor';
 import { useNodeEvents, useViewer } from '@pascal-app/viewer';
 import { useEffect, useMemo, useRef } from 'react';
 import { BufferGeometry, Float32BufferAttribute } from 'three';
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu';
 const separatorMaterial = new LineBasicNodeMaterial({ color: '#818cf8', depthWrite: false });
 const hitMaterial = new MeshBasicNodeMaterial({ transparent: true, opacity: 0, depthWrite: false });
+/**
+ * An invisible wall in 3D: a dashed line on the floor, shown while its room or
+ * it is selected. A push or end drag moves it live (`useLiveNodeOverrides`).
+ */
 export default function SeparatorRenderer({ node }) {
     const ref = useRef(null);
     useRegistry(node.id, 'separator', ref);
     const roomId = useEditor((s) => s.room?.zoneId);
     const viewerRoomId = useViewer((s) => s.selection.zoneId);
+    const selected = useViewer((s) => s.selection.selectedIds.includes(node.id));
     const zone = useScene((s) => {
         const id = roomId ?? viewerRoomId;
         return id ? s.nodes[id] : undefined;
     });
-    const visible = zone?.type === 'zone' && zone.boundarySeparatorIds.includes(node.id);
+    const inRoom = zone?.type === 'zone' && zone.boundarySeparatorIds.includes(node.id);
+    const visible = inRoom || selected;
+    // Selected on its own, it lies on the floor of a room it closes.
+    const ownFloor = useScene((s) => selected && !inRoom ? separatorFloorElevation(s.nodes, node.id) : null);
+    const live = useLiveNodeOverrides((s) => s.overrides.get(node.id));
+    const start = live?.start ?? node.start;
+    const end = live?.end ?? node.end;
     const events = useNodeEvents(node, 'separator');
-    const y = zone?.type === 'zone' ? (zone.floor?.elevation ?? 0.05) + 0.02 : 0.07;
-    const dx = node.end[0] - node.start[0], dz = node.end[1] - node.start[1];
+    const y = zone?.type === 'zone' && inRoom
+        ? (zone.floor?.elevation ?? 0.05) + 0.02
+        : ownFloor !== null
+            ? ownFloor + 0.02
+            : 0.07;
+    const dx = end[0] - start[0], dz = end[1] - start[1];
     const length = Math.hypot(dx, dz);
     const geometry = useMemo(() => {
         const positions = [];
@@ -32,5 +47,5 @@ export default function SeparatorRenderer({ node }) {
         return new BufferGeometry().setAttribute('position', new Float32BufferAttribute(positions, 3));
     }, [length]);
     useEffect(() => () => geometry.dispose(), [geometry]);
-    return (_jsx("group", { ref: ref, visible: visible, children: visible && (_jsxs(_Fragment, { children: [_jsx("lineSegments", { geometry: geometry, material: separatorMaterial, position: [node.start[0], y, node.start[1]], rotation: [0, -Math.atan2(dz, dx), 0], raycast: () => { } }), _jsx("mesh", { ...events, material: hitMaterial, position: [(node.start[0] + node.end[0]) / 2, y, (node.start[1] + node.end[1]) / 2], rotation: [0, -Math.atan2(dz, dx), 0], children: _jsx("boxGeometry", { args: [length, 0.03, 0.1] }) })] })) }));
+    return (_jsx("group", { ref: ref, visible: visible, children: visible && (_jsxs(_Fragment, { children: [_jsx("lineSegments", { geometry: geometry, material: separatorMaterial, position: [start[0], y, start[1]], rotation: [0, -Math.atan2(dz, dx), 0], raycast: () => { } }), _jsx("mesh", { ...events, material: hitMaterial, position: [(start[0] + end[0]) / 2, y, (start[1] + end[1]) / 2], rotation: [0, -Math.atan2(dz, dx), 0], children: _jsx("boxGeometry", { args: [length, 0.03, 0.1] }) })] })) }));
 }

package/dist/separator/selection.d.ts

@@ -0,0 +1,10 @@
+import { type SelectionAffordanceProps } from '@pascal-app/editor';
+/**
+ * A selected invisible wall's 3D handles, the twins of its plan ones: a push
+ * arrow off each side (the wall push: the invisible walls joined to it follow
+ * and those T'd into it stretch) and a grip at each end (drag it across the
+ * floor; the ones joined there follow). They lie on the floor of the room it
+ * closes, where its dashed line is drawn, and hide while a drag runs.
+ */
+export default function SeparatorSelectionAffordance({ node, readOnly }: SelectionAffordanceProps): import("react").JSX.Element | null;
+//# sourceMappingURL=selection.d.ts.map

package/dist/separator/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../src/separator/selection.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,wBAAwB,EAO9B,MAAM,oBAAoB,CAAA;AAK3B;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,wBAAwB,sCAmChG"}

package/dist/separator/selection.js

@@ -0,0 +1,35 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sceneRegistry, useScene } from '@pascal-app/core';
+import { SeparatorEndGrip, separatorFloorElevation, separatorPushHandles, useEditor, useInteractionScope, WallPushArrow, } from '@pascal-app/editor';
+import { createPortal } from '@react-three/fiber';
+import { useEffect, useState } from 'react';
+/**
+ * A selected invisible wall's 3D handles, the twins of its plan ones: a push
+ * arrow off each side (the wall push: the invisible walls joined to it follow
+ * and those T'd into it stretch) and a grip at each end (drag it across the
+ * floor; the ones joined there follow). They lie on the floor of the room it
+ * closes, where its dashed line is drawn, and hide while a drag runs.
+ */
+export default function SeparatorSelectionAffordance({ node, readOnly }) {
+    const editing = useEditor((s) => s.mode === 'select' && !s.isFloorplanHovered);
+    const idle = useInteractionScope((s) => s.scope.kind === 'idle');
+    const floor = useScene((s) => separatorFloorElevation(s.nodes, node.id));
+    const levelId = node.parentId;
+    const [level, setLevel] = useState(null);
+    useEffect(() => {
+        let frame = 0;
+        const resolve = () => {
+            const next = levelId ? (sceneRegistry.nodes.get(levelId) ?? null) : null;
+            setLevel((current) => (current === next ? current : next));
+            if (!next && levelId)
+                frame = window.requestAnimationFrame(resolve);
+        };
+        resolve();
+        return () => window.cancelAnimationFrame(frame);
+    }, [levelId]);
+    if (node.type !== 'separator' || readOnly || !editing || !idle || !level || !levelId)
+        return null;
+    const separator = node;
+    return createPortal(_jsxs(_Fragment, { children: [separatorPushHandles(separator, floor).map((handle) => (_jsx(WallPushArrow, { handle: handle, levelId: levelId }, handle.key))), ['start', 'end'].map((endpoint) => (_jsx(SeparatorEndGrip, { endpoint: endpoint, height: floor + 0.02, levelId: levelId, separator: separator }, endpoint)))] }), level);
+}