@pascal-app/nodes 1.0.6 → 1.0.7

package/dist/roof/panel.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { getRoofSegmentDeckReach, getSegmentSlopeFrame, isRoofOnStoreyWalls, planRoofsOffStorey, roofLevelAbove, roofTypeHasRakes, useLocale, usePascalI18n, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, duplicateNodeAndPickUp, formatLinearMeasurement, localizedLevelName, nodeLabel, 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';
@@ -9,6 +9,8 @@ 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 i18n = usePascalI18n();
+    const locale = useLocale();
     const [ventType, setVentType] = useState('box-vent');
     const selectedId = useViewer((s) => s.selection.selectedIds[0]);
     const unit = useViewer((s) => s.unit);
@@ -110,10 +112,17 @@ export default function RoofPanel() {
         const level = s.nodes[node.parentId];
         const above = roofLevelAbove(s.nodes, level.id);
         return {
-            storey: getLevelDisplayName(level),
+            storey: localizedLevelName(level, i18n, locale),
             label: above.kind === 'roof'
-                ? 'Move to the roof level'
-                : `Move to ${getLevelDisplayName(above.level)}`,
+                ? i18n._({
+                    id: 'node.roof.panel.moveToTheRoofLevel',
+                    message: 'Move to the roof level',
+                })
+                : i18n._({
+                    id: 'node.roof.panel.moveToLevel',
+                    message: 'Move to {level}',
+                    values: { level: localizedLevelName(above.level, i18n, locale) },
+                }),
             roofs: level.children.filter((id) => isRoofOnStoreyWalls(s.nodes, id)).length,
         };
     }));
@@ -143,6 +152,17 @@ export default function RoofPanel() {
         // Moved or turned onto the walls that carry it, it goes to the level above them.
         commitSeatedRoofEdit(parametricNodeUpdates(selectedId, updates), selectedId);
     }, [selectedId]);
+    // The eaves are each segment's: the roof's sliders set them on all of its segments at once.
+    const handleSegmentsUpdate = useCallback((patch) => {
+        if (!selectedId)
+            return;
+        const update = segments.flatMap((segment) => {
+            const data = patch(segment);
+            return data ? [{ id: segment.id, data: data }] : [];
+        });
+        if (update.length > 0)
+            commitSeatedRoofEdit(update, selectedId);
+    }, [segments, selectedId]);
     const handleClose = useCallback(() => {
         setSelection({ selectedIds: [] });
     }, [setSelection]);
@@ -194,14 +214,47 @@ 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: [_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) => {
+    // Shown as the segment panel shows them: in plan, past the walls' outside faces.
+    const eaveSegment = segments.find((segment) => segment.roofType !== 'barrel');
+    const rakedSegment = segments.find((segment) => roofTypeHasRakes(segment.roofType));
+    const overhangPastWall = (segment, axis) => getRoofSegmentDeckReach(segment)[axis] - segment.wallThickness / 2;
+    return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onClose: handleClose, title: node.name || i18n._({ id: 'node.roof.panel.roof', message: 'Roof' }), width: 300, children: [_jsx(RoofGlazingPanel, { segments: segments }), levelMove && (_jsx(PanelSection, { title: i18n._({ id: 'node.roof.panel.level', message: 'Level' }), children: _jsxs("div", { className: "flex flex-col gap-2 px-1 pb-1", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: i18n._({
+                                id: 'node.roof.panel.onStoreyWalls',
+                                message: "On {storey} with its walls, so it hides that floor's plan in solo and exploded views.{roofs, plural, =0 {} =1 {} other { The floor's {roofCount} roofs move together.}}",
+                                values: {
+                                    storey: levelMove.storey,
+                                    roofs: levelMove.roofs,
+                                    roofCount: String(levelMove.roofs),
+                                },
+                            }) }), _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: i18n._({ id: 'node.roof.panel.segments', message: '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 ||
+                                        i18n._({
+                                            id: 'node.segmentNumber',
+                                            message: 'Segment {number}',
+                                            values: { number: i + 1 },
+                                        }) }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({
+                                        id: 'node.roof.panel.segmentType',
+                                        message: '{roofType, select, hip {Hip} gable {Gable} shed {Shed} gambrel {Gambrel} dutch {Dutch} mansard {Mansard} flat {Flat} conical {Conical} barrel {Barrel} other {Roof}}',
+                                        values: { roofType: seg.roofType },
+                                    }) })] }, seg.id))) }), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.drawSegment', message: 'Draw Segment' }), onClick: handleAddSegment }) })] }), eaveSegment && (_jsxs(PanelSection, { title: i18n._({ id: 'node.roof.panel.eaves', message: 'Eaves' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.roof.panel.eaveOverhang', message: 'Eave overhang' }), max: 1, min: 0, onChange: (v) => handleSegmentsUpdate((segment) => segment.roofType === 'barrel'
+                            ? null
+                            : { overhang: v / getSegmentSlopeFrame(segment).cosTheta }), precision: 2, step: 0.05, unit: "m", value: overhangPastWall(eaveSegment, 'z') }), rakedSegment && (_jsx(SliderControl, { label: i18n._({ id: 'node.roof.panel.gableOverhang', message: 'Gable overhang' }), max: 3, min: 0, onChange: (v) => handleSegmentsUpdate((segment) => roofTypeHasRakes(segment.roofType) ? { gableOverhang: v } : null), precision: 2, step: 0.05, unit: "m", value: overhangPastWall(rakedSegment, 'x') }))] })), _jsxs(PanelSection, { title: i18n._({ id: 'node.roof.panel.position', message: 'Position' }), children: [_jsx(SliderControl, { label: "X", onChange: (v) => {
                             const pos = [...node.position];
                             pos[0] = v;
                             handleUpdate({ position: pos });
                         }, precision: 2, step: 0.05, unit: "m", value: node.position[0] }), node.support?.kind !== 'roof' && (_jsx(SegmentedControl, { onChange: (mode) => handleUpdate({ support: { kind: mode === 'walls' ? 'walls' : 'level' } }), options: [
-                            { label: 'Follows walls', value: 'walls' },
-                            { label: 'Custom', value: 'custom' },
-                        ], value: node.support?.kind === 'walls' ? 'walls' : 'custom' })), node.support?.kind === 'walls' ? (_jsxs("div", { className: "px-1 text-[11px] text-muted-foreground", children: ["Currently ", formatLinearMeasurement(node.position[1], unit, metricNotation)] })) : (_jsx(SliderControl, { label: "Y", onChange: (v) => {
+                            {
+                                label: i18n._({ id: 'node.roof.panel.followsWalls', message: 'Follows walls' }),
+                                value: 'walls',
+                            },
+                            {
+                                label: i18n._({ id: 'node.roof.panel.custom', message: 'Custom' }),
+                                value: 'custom',
+                            },
+                        ], value: node.support?.kind === 'walls' ? 'walls' : 'custom' })), node.support?.kind === 'walls' ? (_jsx("div", { className: "px-1 text-[11px] text-muted-foreground", children: i18n._({
+                            id: 'node.panel.currently',
+                            message: 'Currently {value}',
+                            values: { value: formatLinearMeasurement(node.position[1], unit, metricNotation) },
+                        }) })) : (_jsx(SliderControl, { label: "Y", onChange: (v) => {
                             const pos = [...node.position];
                             pos[1] = v;
                             const current = useScene.getState().nodes[node.id];
@@ -217,7 +270,7 @@ export default function RoofPanel() {
                             const pos = [...node.position];
                             pos[2] = v;
                             handleUpdate({ position: pos });
-                        }, precision: 2, step: 0.05, unit: "m", value: node.position[2] }), _jsx(SliderControl, { label: "Rotation", max: 180, min: -180, onChange: (degrees) => {
+                        }, precision: 2, step: 0.05, unit: "m", value: node.position[2] }), _jsx(SliderControl, { label: i18n._({ id: 'node.roof.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');
@@ -225,18 +278,33 @@ 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-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}`
+                                } })] })] }), _jsx(PanelSection, { title: i18n._({ id: 'node.roof.panel.elements', message: '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 || numberedName(nodeLabel('chimney', 'Chimney', i18n), i + 1, i18n) }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({ id: 'node.roof.panel.chimney', message: 'chimney' }) })] }, chimney.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.addChimney', message: '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 || numberedName(nodeLabel('dormer', 'Dormer', i18n), i + 1, i18n) }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({ id: 'node.roof.panel.dormer', message: 'dormer' }) })] }, dormer.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.addDormer', message: '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 ||
+                                                numberedName(nodeLabel('skylight', 'Skylight', i18n), i + 1, i18n) }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({ id: 'node.roof.panel.skylight', message: 'skylight' }) })] }, skylight.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.addSkylight', message: '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 ||
+                                                numberedName(nodeLabel('solar-panel', 'Solar Panel', i18n), i + 1, i18n) }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({ id: 'node.roof.panel.solarPanel', message: 'solar panel' }) })] }, panel.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.addSolarPanel', message: '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 ||
+                                                numberedName(vent.type === 'box-vent'
+                                                    ? nodeLabel('box-vent', 'Box Vent', i18n)
                                                     : vent.type === 'ridge-vent'
-                                                        ? `Ridge Vent ${i + 1}`
-                                                        : `Turbine Vent ${i + 1}`) }), _jsx("span", { className: "text-muted-foreground text-xs", children: vent.type === 'box-vent'
-                                                ? 'box vent'
+                                                        ? nodeLabel('ridge-vent', 'Ridge Vent', i18n)
+                                                        : nodeLabel('turbine-vent', 'Turbine Vent', i18n), i + 1, i18n) }), _jsx("span", { className: "text-muted-foreground text-xs", children: vent.type === 'box-vent'
+                                                ? i18n._({ id: 'node.roof.panel.boxVent', message: 'box vent' })
                                                 : vent.type === 'ridge-vent'
-                                                    ? 'ridge vent'
-                                                    : 'turbine vent' })] }, vent.id))), _jsx(SegmentedControl, { onChange: setVentType, options: [
-                                        { label: 'Box', value: 'box-vent' },
-                                        { label: 'Ridge', value: 'ridge-vent' },
-                                        { label: 'Turbine', value: 'turbine-vent' },
-                                    ], value: ventType }), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Vent", onClick: () => activateTool(ventType) }) })] }), _jsx("div", { className: "flex flex-col gap-1", children: _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Cupola", onClick: () => activateTool('cupola') }) }) }), _jsx("div", { className: "flex flex-col gap-1", children: _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Eyebrow Vent", onClick: () => activateTool('eyebrow-vent') }) }) }), _jsxs("div", { className: "flex flex-col gap-1", children: [gutters.map((gutter, i) => (_jsxs("button", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-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 })] }) })] }));
+                                                    ? i18n._({ id: 'node.roof.panel.ridgeVent', message: 'ridge vent' })
+                                                    : i18n._({ id: 'node.roof.panel.turbineVent', message: 'turbine vent' }) })] }, vent.id))), _jsx(SegmentedControl, { onChange: setVentType, options: [
+                                        { label: i18n._({ id: 'node.roof.panel.box', message: 'Box' }), value: 'box-vent' },
+                                        {
+                                            label: i18n._({ id: 'node.roof.panel.ridge', message: 'Ridge' }),
+                                            value: 'ridge-vent',
+                                        },
+                                        {
+                                            label: i18n._({ id: 'node.roof.panel.turbine', message: 'Turbine' }),
+                                            value: 'turbine-vent',
+                                        },
+                                    ], value: ventType }), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.addVent', message: '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: i18n._({ id: 'node.roof.panel.addCupola', message: '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: i18n._({
+                                        id: 'node.roof.panel.addEyebrowVent',
+                                        message: '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 || numberedName(nodeLabel('gutter', 'Gutter', i18n), i + 1, i18n) }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({ id: 'node.roof.panel.gutter', message: 'gutter' }) })] }, gutter.id))), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.addGutter', message: 'Add Gutter' }), onClick: () => activateTool('gutter') }) })] })] }) }), _jsx(PanelSection, { title: i18n._({ id: 'node.roof.panel.actions', message: 'Actions' }), children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.panel.move', message: 'Move' }), onClick: handleMove }), _jsx(ActionButton, { icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.roof.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.roof.panel.delete', message: 'Delete' }), onClick: handleDelete })] }) })] }));
+}
+/** "Chimney 2": a list row for an element without a name of its own. */
+function numberedName(kind, number, i18n) {
+    return i18n._({ id: 'node.numberedName', message: '{kind} {number}', values: { kind, number } });
 }

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

package/dist/roof/renderer.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { hasSegmentMaterialOverride, isIndependentRoofSegment, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
-import { getRoofMaterialArray, isRevealAssembling, levelWallCladdingRef, NodeRenderer, subscribeRevealAssembling, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { getRoofMaterialArray, isRevealAssembling, levelWallCladdingRef, levelWallFaceRef, 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.js';
@@ -97,8 +97,19 @@ export const RoofRenderer = ({ node: rawNode }) => {
     const placeholderGeometry = useMemo(() => createPlaceholderGeometry(4), []);
     // The gable band is clad like the walls below it (their assemblies).
     const wallCladdingRef = useScene((state) => levelWallCladdingRef(state.nodes, node));
+    // The heel band, under the eaves, is wall: it shows what the walls below show outside.
+    const wallFaceRef = useScene((state) => levelWallFaceRef(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 customMaterial = useMemo(() => getRoofMaterialArray(node, shading, textures, colorPreset, sceneTheme, wallCladdingRef, sceneMaterials, wallFaceRef), [
+        node,
+        shading,
+        textures,
+        colorPreset,
+        sceneTheme,
+        wallCladdingRef,
+        sceneMaterials,
+        wallFaceRef,
+    ]);
     const material = debugColors
         ? getRoofDebugMaterials(shading)
         : customMaterial || getRoofMaterials(shading, textures, colorPreset);

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

@@ -1,7 +1,15 @@
 export type RoofFootprintSourceChoice = 'draw' | 'room';
+/**
+ * What a Room pick finds under the cursor: a room it can roof, a room that is
+ * not a rectangle (Room roofs only rectangles), or no closed room at all.
+ */
+export type RoofRoomPick = 'room' | 'irregular' | 'none';
 type RoofFootprintSourceState = {
     source: RoofFootprintSourceChoice;
     setSource: (source: RoofFootprintSourceChoice) => void;
+    /** The hovered Room pick, for the HUD to say why a click would do nothing; null off Room. */
+    roomPick: RoofRoomPick | null;
+    setRoomPick: (roomPick: RoofRoomPick | null) => void;
 };
 /**
  * How the user wants the next roof footprint made — draw two corners, or pick
@@ -12,5 +20,14 @@ type RoofFootprintSourceState = {
  * tool clears on unmount — both used to wipe the user's choice.
  */
 declare const useRoofFootprintSource: import("zustand").UseBoundStore<import("zustand").StoreApi<RoofFootprintSourceState>>;
+declare const subscribeToRoomPick: (onChange: () => void) => () => void;
+export declare const irregularRoomHintVisibility: {
+    subscribe: typeof subscribeToRoomPick;
+    value: () => boolean;
+};
+export declare const noRoomHintVisibility: {
+    subscribe: typeof subscribeToRoomPick;
+    value: () => boolean;
+};
 export default useRoofFootprintSource;
 //# sourceMappingURL=roof-footprint-source.d.ts.map

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;eAEY,sBAAsB"}
+{"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;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAA;AAExD,KAAK,wBAAwB,GAAG;IAC9B,MAAM,EAAE,yBAAyB,CAAA;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAA;IACtD,6FAA6F;IAC7F,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,WAAW,EAAE,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,uFAKzB,CAAA;AAEH,QAAA,MAAM,mBAAmB,aAAc,MAAM,IAAI,eAG7C,CAAA;AAEJ,eAAO,MAAM,2BAA2B;IACtC,SAAS;IACT,KAAK;CACN,CAAA;AAED,eAAO,MAAM,oBAAoB;IAC/B,SAAS;IACT,KAAK;CACN,CAAA;eAEc,sBAAsB"}

package/dist/roof/roof-footprint-source.js

@@ -10,5 +10,19 @@ import { create } from 'zustand';
 const useRoofFootprintSource = create((set) => ({
     source: 'draw',
     setSource: (source) => set({ source }),
+    roomPick: null,
+    setRoomPick: (roomPick) => set({ roomPick }),
 }));
+const subscribeToRoomPick = (onChange) => useRoofFootprintSource.subscribe((state, previous) => {
+    if (state.roomPick !== previous.roomPick)
+        onChange();
+});
+export const irregularRoomHintVisibility = {
+    subscribe: subscribeToRoomPick,
+    value: () => useRoofFootprintSource.getState().roomPick === 'irregular',
+};
+export const noRoomHintVisibility = {
+    subscribe: subscribeToRoomPick,
+    value: () => useRoofFootprintSource.getState().roomPick === 'none',
+};
 export default useRoofFootprintSource;

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

@@ -1,8 +1,42 @@
-import { type AnyNode, type LevelNode, type RoofFootprintTarget, type RoofType, type WallNode } from '@pascal-app/core';
+import { type AlignmentAnchor, type AnyNode, type LevelNode, type RoofFootprintTarget, type RoofType, type WallNode } from '@pascal-app/core';
+import type { RoofRoomPick } from './roof-footprint-source.js';
 export type RoofFootprintSource = 'room' | 'walls' | 'draw';
-export declare function isStandardRoofWallEligible(wall: WallNode): boolean;
+export declare function isStandardRoofWallEligible(wall: Pick<WallNode, 'start' | 'end' | 'curveOffset'>): boolean;
+/**
+ * The rooms' edges on `levelIds` a drawn roof snaps to, as it snaps to walls (their corners,
+ * middles, crossings and runs): each invisible wall's line, and each railing round a porch, deck
+ * or patio at its outside face, from post corner to post corner (`outdoorRoomRoofOutline`), so a
+ * roof drawn over the room reaches its outside edge as one drawn over the house reaches its walls'.
+ * `faced` holds those railings: their faces stand in for their centre lines. Kept per scene, so a
+ * pointer move asks once.
+ */
+export declare function roofSnapEdges(nodes: Readonly<Record<string, AnyNode>>, levelIds: readonly string[]): {
+    references: WallNode[];
+    faced: Set<string>;
+};
+/**
+ * The rooms' edges on `levelIds` as alignment anchors for a roof drawn over them: each straight
+ * invisible wall's ends and middle (as a wall's), and each porch's, deck's or patio's outside
+ * corners, railings' post corners included.
+ */
+export declare function roofEdgeAnchors(nodes: Readonly<Record<string, AnyNode>>, levelIds: readonly string[]): AlignmentAnchor[];
+/** What a Room pick lights up while it hovers a room: its walls, a porch's edges with them. */
+export declare function roofFootprintPreviewIds(target: RoofFootprintTarget | null): string[];
 export declare function isConicalRoofWallEligible(targetLevelId: LevelNode['id'], wall: WallNode, nodes: Readonly<Record<string, AnyNode>>): boolean;
+/**
+ * The curved wall a cone would be built over from a plan point: the nearest one in reach on the
+ * level or the level below. The plan raises no wall events, so its tool picks the wall itself.
+ */
+export declare function pickConicalRoofWall(levelId: LevelNode['id'], nodes: Readonly<Record<string, AnyNode>>, point: [number, number]): WallNode | null;
 export declare function parseRoofFootprintSource(value: unknown, roofType: RoofType): RoofFootprintSource;
+/**
+ * The room a Room pick at `point` roofs (the smallest one on the level, else on the level below),
+ * and what the pick found: a rectangle it roofs, a room it can't (not a rectangle), or none.
+ */
+export declare function pickRoofRoom(levelId: LevelNode['id'], nodes: Readonly<Record<string, AnyNode>>, point: [number, number]): {
+    target: RoofFootprintTarget | null;
+    pick: RoofRoomPick;
+};
 export declare function subscribeToConicalRoofWallClicks(options: {
     footprintSource: RoofFootprintSource;
     currentLevelId: LevelNode['id'] | null;

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

@@ -1 +1 @@
-{"version":3,"file":"roof-footprint.d.ts","sourceRoot":"","sources":["../../src/roof/roof-footprint.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EAKZ,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,QAAQ,EAIb,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AAEzB,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAI3D,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAKlE;AAED,wBAAgB,yBAAyB,CACvC,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,EAC9B,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GACvC,OAAO,CAMT;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,mBAAmB,CAGhG;AAED,wBAAgB,gCAAgC,CAAC,OAAO,EAAE;IACxD,eAAe,EAAE,mBAAmB,CAAA;IACpC,cAAc,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,QAAQ,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,QAAQ,CAAA;CACnB,GAAG,MAAM,IAAI,CA0Cb;AAED,wBAAgB,6BAA6B,CAC3C,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,EAC9B,MAAM,EAAE,mBAAmB,EAC3B,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GACvC,MAAM,CAUR;AAED,wBAAgB,kCAAkC,CAChD,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,EAC9B,MAAM,EAAE,mBAAmB,EAC3B,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GACvC,MAAM,CAOR;AAED;;;;;;;GAOG;AACH,wBAAgB,gCAAgC,CAC9C,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,EAC9B,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EACxC,UAAU,yDAAuD,GAChE,MAAM,CAKR"}
+{"version":3,"file":"roof-footprint.d.ts","sourceRoot":"","sources":["../../src/roof/roof-footprint.ts"],"names":[],"mappings":"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"}

package/dist/roof/roof-footprint.js

@@ -1,4 +1,4 @@
-import { emitter, getLevelBelow, getLevelElevations, isCurvedWall, resolveLevelId, resolveRoofWallTopElevation, } from '@pascal-app/core';
+import { emitter, getLevelBelow, getLevelElevations, getWallCurveFrameAt, getWallCurveStationAtPoint, isCurvedWall, isOutdoorRoomType, isRailingWall, outdoorRoomRoofOutline, polygonAnchors, resolveLevelId, resolveRoofWallTopElevation, resolveRoomRoofFootprint, wallSegmentAnchors, } from '@pascal-app/core';
 const ROOF_AXIS_ALIGNMENT_EPSILON = 1e-4;
 export function isStandardRoofWallEligible(wall) {
     if (isCurvedWall(wall))
@@ -7,6 +7,94 @@ export function isStandardRoofWallEligible(wall) {
     const deltaZ = Math.abs(wall.end[1] - wall.start[1]);
     return deltaX <= ROOF_AXIS_ALIGNMENT_EPSILON || deltaZ <= ROOF_AXIS_ALIGNMENT_EPSILON;
 }
+/** A room's edge as the wall snap reads a wall: its ends, its middle and its run catch a point. */
+function edgeReference(id, parentId, start, end) {
+    return {
+        object: 'node',
+        id: id,
+        type: 'wall',
+        parentId,
+        visible: true,
+        metadata: {},
+        children: [],
+        start,
+        end,
+        frontSide: 'unknown',
+        backSide: 'unknown',
+    };
+}
+/** The levels' invisible walls, and their porches', decks' and patios' outside edges. */
+function levelEdges(nodes, levelIds) {
+    return levelIds.flatMap((levelId) => {
+        const level = nodes[levelId];
+        if (level?.type !== 'level')
+            return [];
+        const children = level.children.map((id) => nodes[id]);
+        const walls = children.filter((node) => node?.type === 'wall');
+        const separators = children.filter((node) => node?.type === 'separator');
+        const rooms = children
+            .filter((node) => node?.type === 'zone' && isOutdoorRoomType(node.roomType) && node.polygon.length >= 3)
+            .map((zone) => ({ zone, ...outdoorRoomRoofOutline(zone, walls, separators) }));
+        return [{ levelId, separators, rooms }];
+    });
+}
+const snapEdgesMemo = new WeakMap();
+function computeRoofSnapEdges(nodes, levelIds) {
+    const references = [];
+    const faced = new Set();
+    for (const { levelId, separators, rooms } of levelEdges(nodes, levelIds)) {
+        for (const separator of separators)
+            references.push(edgeReference(separator.id, levelId, separator.start, separator.end));
+        for (const { polygon, edges } of rooms)
+            edges.forEach((edge, index) => {
+                if (edge?.kind !== 'railing')
+                    return;
+                faced.add(edge.id);
+                const next = polygon[(index + 1) % polygon.length];
+                references.push(edgeReference(edge.id, levelId, polygon[index], next));
+            });
+    }
+    return { references, faced };
+}
+/**
+ * The rooms' edges on `levelIds` a drawn roof snaps to, as it snaps to walls (their corners,
+ * middles, crossings and runs): each invisible wall's line, and each railing round a porch, deck
+ * or patio at its outside face, from post corner to post corner (`outdoorRoomRoofOutline`), so a
+ * roof drawn over the room reaches its outside edge as one drawn over the house reaches its walls'.
+ * `faced` holds those railings: their faces stand in for their centre lines. Kept per scene, so a
+ * pointer move asks once.
+ */
+export function roofSnapEdges(nodes, levelIds) {
+    const key = levelIds.join('|');
+    let byKey = snapEdgesMemo.get(nodes);
+    if (!byKey) {
+        byKey = new Map();
+        snapEdgesMemo.set(nodes, byKey);
+    }
+    const cached = byKey.get(key);
+    if (cached)
+        return cached;
+    const edges = computeRoofSnapEdges(nodes, levelIds);
+    byKey.set(key, edges);
+    return edges;
+}
+/**
+ * The rooms' edges on `levelIds` as alignment anchors for a roof drawn over them: each straight
+ * invisible wall's ends and middle (as a wall's), and each porch's, deck's or patio's outside
+ * corners, railings' post corners included.
+ */
+export function roofEdgeAnchors(nodes, levelIds) {
+    return levelEdges(nodes, levelIds).flatMap(({ separators, rooms }) => [
+        ...separators
+            .filter((separator) => isStandardRoofWallEligible(separator))
+            .flatMap((separator) => wallSegmentAnchors(separator.id, separator.start, separator.end)),
+        ...rooms.flatMap(({ zone, polygon }) => polygonAnchors(zone.id, polygon)),
+    ]);
+}
+/** What a Room pick lights up while it hovers a room: its walls, a porch's edges with them. */
+export function roofFootprintPreviewIds(target) {
+    return target ? [...target.wallIds, ...(target.edgeIds ?? [])] : [];
+}
 export function isConicalRoofWallEligible(targetLevelId, wall, nodes) {
     const completeNodes = nodes;
     const sourceLevelId = resolveLevelId(wall, completeNodes);
@@ -16,11 +104,44 @@ export function isConicalRoofWallEligible(targetLevelId, wall, nodes) {
         return true;
     return getLevelBelow(targetLevelId, completeNodes)?.id === sourceLevelId;
 }
+// As far off the wall's centreline as the plan reaches for a wall a door or window goes in.
+const CONICAL_WALL_PICK_DISTANCE = 0.5;
+/**
+ * The curved wall a cone would be built over from a plan point: the nearest one in reach on the
+ * level or the level below. The plan raises no wall events, so its tool picks the wall itself.
+ */
+export function pickConicalRoofWall(levelId, nodes, point) {
+    let picked = null;
+    let pickedDistance = CONICAL_WALL_PICK_DISTANCE;
+    for (const node of Object.values(nodes)) {
+        if (!(node.type === 'wall' && isCurvedWall(node)))
+            continue;
+        if (!isConicalRoofWallEligible(levelId, node, nodes))
+            continue;
+        const nearest = getWallCurveFrameAt(node, getWallCurveStationAtPoint(node, point)).point;
+        const distance = Math.hypot(point[0] - nearest.x, point[1] - nearest.y);
+        if (distance > pickedDistance)
+            continue;
+        picked = node;
+        pickedDistance = distance;
+    }
+    return picked;
+}
 export function parseRoofFootprintSource(value, roofType) {
     if (roofType === 'conical')
         return 'walls';
     return value === 'room' ? 'room' : 'draw';
 }
+/**
+ * The room a Room pick at `point` roofs (the smallest one on the level, else on the level below),
+ * and what the pick found: a rectangle it roofs, a room it can't (not a rectangle), or none.
+ */
+export function pickRoofRoom(levelId, nodes, point) {
+    const found = resolveRoomRoofFootprint(levelId, nodes, point);
+    if (!found)
+        return { target: null, pick: 'none' };
+    return found.rectangular ? { target: found, pick: 'room' } : { target: null, pick: 'irregular' };
+}
 export function subscribeToConicalRoofWallClicks(options) {
     if (!(options.roofType === 'conical' && options.footprintSource === 'walls'))
         return () => { };
@@ -66,9 +187,10 @@ export function subscribeToConicalRoofWallClicks(options) {
 export function resolveRoofFootprintElevation(targetLevelId, target, nodes) {
     const completeNodes = nodes;
     const elevations = getLevelElevations(completeNodes);
+    // A railing is a guard round a deck or a porch, not a wall: the roof never sits on its top.
     const tops = target.wallIds.flatMap((id) => {
         const wall = nodes[id];
-        return wall?.type === 'wall'
+        return wall?.type === 'wall' && !isRailingWall(wall)
             ? [resolveRoofWallTopElevation(targetLevelId, wall, completeNodes, elevations)]
             : [];
     });

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

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

package/dist/roof/roof-materials.js

@@ -1,7 +1,7 @@
 import { createDefaultMaterial, createSurfaceRoleMaterial, resolveSlotDefaultMaterial, } from '@pascal-app/viewer';
 import * as THREE from 'three';
 // Production materials — match the rest of the scene (white walls, light-gray slabs).
-// Indices: 0 = Wall/Trim, 1 = Deck, 2 = Interior, 3 = Shingle
+// Indices: 0 = Wall/Trim, 1 = Deck, 2 = Interior, 3 = Shingle, 4 = Heel band, 5/6 = Gables
 const roofMaterialsCache = new Map();
 export function getRoofMaterials(shading = 'rendered', textures = true, colorPreset = 'clay') {
     const cacheKey = `${shading}-${textures}-${colorPreset}`;
@@ -16,12 +16,18 @@ export function getRoofMaterials(shading = 'rendered', textures = true, colorPre
             resolveSlotDefaultMaterial('library:preset-softwhite', shading), // 1: Deck
             resolveSlotDefaultMaterial('library:preset-softwhite', shading), // 2: Interior
             resolveSlotDefaultMaterial('library:roof-terracottatiles', shading), // 3: Shingle
+            resolveSlotDefaultMaterial('library:concrete-drywall', shading), // 4: Heel band
+            resolveSlotDefaultMaterial('library:concrete-drywall', shading), // 5: Left gable
+            resolveSlotDefaultMaterial('library:concrete-drywall', shading), // 6: Right gable
         ]
         : [
             createSurfaceRoleMaterial('roof', colorPreset),
             createSurfaceRoleMaterial('ceiling', colorPreset),
             createSurfaceRoleMaterial('ceiling', colorPreset),
             createSurfaceRoleMaterial('roof', colorPreset),
+            createSurfaceRoleMaterial('wall', colorPreset),
+            createSurfaceRoleMaterial('roof', colorPreset),
+            createSurfaceRoleMaterial('roof', colorPreset),
         ];
     roofMaterialsCache.set(cacheKey, materials);
     return materials;
@@ -37,6 +43,9 @@ export function getRoofDebugMaterials(shading = 'rendered') {
         createDefaultMaterial('#000000', 0.9, shading, THREE.FrontSide), // 1: Deck
         createDefaultMaterial('#dddddd', 0.9, shading, THREE.DoubleSide), // 2: Interior
         createDefaultMaterial('#4ade80', 0.9, shading, THREE.FrontSide), // 3: Shingle
+        createDefaultMaterial('#f5d0a9', 0.8, shading, THREE.DoubleSide), // 4: Heel band
+        createDefaultMaterial('#93c5fd', 0.8, shading, THREE.DoubleSide), // 5: Left gable
+        createDefaultMaterial('#c4b5fd', 0.8, shading, THREE.DoubleSide), // 6: Right gable
     ];
     roofDebugMaterialsCache.set(shading, materials);
     return materials;

package/dist/roof/roof-placement-mode.d.ts

@@ -1,9 +1,7 @@
 export type RoofPlacementMode = 'auto' | 'ground' | 'roof';
 type RoofPlacementModeState = {
-    conical: boolean;
     mode: RoofPlacementMode;
     cycleMode: () => void;
-    setConical: (conical: boolean) => void;
 };
 declare const useRoofPlacementMode: import("zustand").UseBoundStore<import("zustand").StoreApi<RoofPlacementModeState>>;
 declare const subscribeToRoofKind: (onChange: () => void) => () => void;

package/dist/roof/roof-placement-mode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"roof-placement-mode.d.ts","sourceRoot":"","sources":["../../src/roof/roof-placement-mode.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAI1D,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,iBAAiB,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,QAAA,MAAM,oBAAoB,qFAQvB,CAAA;AAEH,QAAA,MAAM,mBAAmB,aAAc,MAAM,IAAI,eAG7C,CAAA;AAEJ,eAAO,MAAM,6BAA6B;IACxC,SAAS;IACT,KAAK;CACN,CAAA;AAED,eAAO,MAAM,8BAA8B;IACzC,SAAS;IACT,KAAK;CACN,CAAA;eAEc,oBAAoB"}
+{"version":3,"file":"roof-placement-mode.d.ts","sourceRoot":"","sources":["../../src/roof/roof-placement-mode.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAI1D,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,iBAAiB,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,QAAA,MAAM,oBAAoB,qFAMvB,CAAA;AAOH,QAAA,MAAM,mBAAmB,aAAc,MAAM,IAAI,eAG7C,CAAA;AAEJ,eAAO,MAAM,6BAA6B;IACxC,SAAS;IACT,KAAK;CACN,CAAA;AAED,eAAO,MAAM,8BAA8B;IACzC,SAAS;IACT,KAAK;CACN,CAAA;eAEc,oBAAoB"}

package/dist/roof/roof-placement-mode.js

@@ -1,24 +1,26 @@
+import { useEditor } from '@pascal-app/editor';
 import { create } from 'zustand';
 const MODES = ['auto', 'ground', 'roof'];
 const useRoofPlacementMode = create((set, get) => ({
-    conical: false,
     mode: 'auto',
     cycleMode: () => {
         const current = MODES.indexOf(get().mode);
         set({ mode: MODES[(current + 1) % MODES.length] ?? 'auto' });
     },
-    setConical: (conical) => set({ conical }),
 }));
-const subscribeToRoofKind = (onChange) => useRoofPlacementMode.subscribe((state, previous) => {
-    if (state.conical !== previous.conical)
+// Read from the roof type the tool is armed with, not from whichever roof tool mounted: in a
+// 2D-only session the 3D tool never mounts, and the HUD showed a cone the standard rows.
+const isConicalRoof = (state) => state.toolDefaults.roof?.roofType === 'conical';
+const subscribeToRoofKind = (onChange) => useEditor.subscribe((state, previous) => {
+    if (isConicalRoof(state) !== isConicalRoof(previous))
         onChange();
 });
 export const conicalRoofToolHintVisibility = {
     subscribe: subscribeToRoofKind,
-    value: () => useRoofPlacementMode.getState().conical,
+    value: () => isConicalRoof(useEditor.getState()),
 };
 export const standardRoofToolHintVisibility = {
     subscribe: subscribeToRoofKind,
-    value: () => !useRoofPlacementMode.getState().conical,
+    value: () => !isConicalRoof(useEditor.getState()),
 };
 export default useRoofPlacementMode;