@pascal-app/nodes 1.0.0-beta.5 → 1.0.1

package/dist/dormer/panel.js

@@ -1,12 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useLiveNodeOverrides, useScene, } from '@pascal-app/core';
-import { cn, PanelSection, PanelWrapper, SliderControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { createDormerDefaultWindow, generateId, useLiveNodeOverrides, useScene, WindowNode, } from '@pascal-app/core';
+import { cn, createFreshPlacementSubtree, PanelSection, PanelWrapper, SliderControl, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { useCallback, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { DormerActionsSection } from './panel-actions-section';
 import { DormerPositionSection } from './panel-position-section';
-import { DormerWindowSection } from './panel-window-section';
+import { DormerWindowsSection } from './panel-windows-section';
+import { planDormerWindowRow } from './window-layout';
 const ROOF_TYPE_OPTIONS = [
     { label: 'Gable', value: 'gable' },
     { label: 'Hip', value: 'hip' },
@@ -16,9 +18,13 @@ const ROOF_TYPE_OPTIONS = [
     { label: 'Mansard', value: 'mansard' },
     { label: 'Flat', value: 'flat' },
 ];
+const SHED_HIGH_SIDE_OPTIONS = [
+    { label: 'Rise Back', value: 'back' },
+    { label: 'Rise Front', value: 'front' },
+];
 const SECTION_OPTIONS = [
     { label: 'Dormer', value: 'dormer' },
-    { label: 'Window', value: 'window' },
+    { label: 'Windows', value: 'window' },
 ];
 export default function DormerPanel() {
     const [section, setSection] = useState('dormer');
@@ -30,6 +36,16 @@ export default function DormerPanel() {
     const storeNode = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
     const overrides = useLiveNodeOverrides((s) => selectedId ? s.get(selectedId) : undefined);
     const node = storeNode && overrides ? { ...storeNode, ...overrides } : storeNode;
+    const hostedWindows = useScene(useShallow((state) => {
+        if (!selectedId)
+            return [];
+        const dormer = state.nodes[selectedId];
+        if (dormer?.type !== 'dormer')
+            return [];
+        return (dormer.children ?? [])
+            .map((childId) => state.nodes[childId])
+            .filter((child) => child?.type === 'window');
+    }));
     const handleUpdate = useCallback((updates) => {
         if (!selectedId)
             return;
@@ -74,18 +90,14 @@ export default function DormerPanel() {
         if (!node?.roofSegmentId)
             return;
         triggerSFX('sfx:item-pick');
-        // Deep clone and strip the id so the move tool's onClick branch
-        // (`isNew || !node.id`) takes the "create fresh" path. Setting
-        // `metadata.isNew = true` is what gates the move tool from
-        // updating any existing node — the dormer is only added to the
-        // scene on click, not when the Duplicate button is pressed.
-        const cloned = structuredClone(node);
-        delete cloned.id;
-        const prevMeta = cloned.metadata && typeof cloned.metadata === 'object' && !Array.isArray(cloned.metadata)
-            ? cloned.metadata
-            : {};
-        cloned.metadata = { ...prevMeta, isNew: true };
-        setMovingNode(cloned);
+        useScene.temporal.getState().pause();
+        const draftId = createFreshPlacementSubtree(node.id);
+        const draft = draftId ? useScene.getState().nodes[draftId] : null;
+        if (!draft) {
+            useScene.temporal.getState().resume();
+            return;
+        }
+        setMovingNode(draft);
         setSelection({ selectedIds: [] });
     }, [node, setMovingNode, setSelection]);
     const handleDelete = useCallback(() => {
@@ -111,6 +123,60 @@ export default function DormerPanel() {
             setSelection({ selectedIds: [] });
         }
     }, [selectedId, node, deleteNode, setSelection]);
+    const handleAddWindow = useCallback(() => {
+        if (!node)
+            return;
+        const frontWindows = hostedWindows.filter((window) => (window.dormerFace ?? 'front') === 'front');
+        const template = frontWindows[0] ?? hostedWindows[0];
+        const id = generateId('window');
+        const defaultWindow = createDormerDefaultWindow(node, id);
+        const newWindow = WindowNode.parse({
+            ...(template ? structuredClone(template) : defaultWindow),
+            id,
+            name: `Window ${hostedWindows.length + 1}`,
+            parentId: node.id,
+            dormerId: node.id,
+            dormerFace: 'front',
+            wallId: undefined,
+            roofSegmentId: undefined,
+            roofFace: undefined,
+            position: [0, template?.position[1] ?? defaultWindow.position[1], 0],
+            rotation: [0, 0, 0],
+            side: 'front',
+            metadata: {},
+            visible: true,
+        });
+        const plan = planDormerWindowRow(node.width, [...frontWindows, newWindow]);
+        if (!plan)
+            return;
+        const newPlacement = plan.find((entry) => entry.id === newWindow.id);
+        if (!newPlacement)
+            return;
+        const placedWindow = WindowNode.parse({
+            ...newWindow,
+            position: newPlacement.position,
+            width: newPlacement.width,
+        });
+        const existingIds = new Set(frontWindows.map((window) => window.id));
+        useScene.getState().applyNodeChanges({
+            create: [{ node: placedWindow, parentId: node.id }],
+            update: plan
+                .filter((entry) => existingIds.has(entry.id))
+                .map((entry) => ({
+                id: entry.id,
+                data: { position: entry.position, width: entry.width },
+            })),
+        });
+        triggerSFX('sfx:structure-build');
+    }, [hostedWindows, node]);
+    const handleEditWindow = useCallback((window) => {
+        setSelection({ selectedIds: [window.id] });
+    }, [setSelection]);
+    const handleMoveWindow = useCallback((window) => {
+        triggerSFX('sfx:item-pick');
+        setMovingNode(window);
+        setSelection({ selectedIds: [] });
+    }, [setMovingNode, setSelection]);
     if (!(node && node.type === 'dormer' && selectedId))
         return null;
     const scenestate = useScene.getState();
@@ -120,15 +186,31 @@ export default function DormerPanel() {
     const roof = segment?.parentId
         ? scenestate.nodes[segment.parentId]
         : undefined;
+    const frontWindows = hostedWindows.filter((window) => (window.dormerFace ?? 'front') === 'front');
+    const templateWindow = frontWindows[0] ?? hostedWindows[0];
+    const defaultWindow = createDormerDefaultWindow(node, 'window_preview');
+    const canAddWindow = planDormerWindowRow(node.width, [
+        ...frontWindows,
+        {
+            id: 'window_preview',
+            position: [0, templateWindow?.position[1] ?? defaultWindow.position[1], 0],
+            width: templateWindow?.width ?? defaultWindow.width,
+        },
+    ]) !== null;
     return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onBack: node.roofSegmentId ? handleBack : undefined, onClose: handleClose, title: node.name || 'Dormer', width: 300, children: [_jsx(DormerPositionSection, { commitProp: commitProp, node: node, previewProp: previewProp, roof: roof, segment: segment, selectedId: selectedId }), _jsx(PanelSection, { title: "Section", children: _jsx("div", { className: "grid grid-cols-3 gap-1.5 px-1 pt-1", children: SECTION_OPTIONS.map((option) => {
                         const isSelected = section === option.value;
                         return (_jsx("button", { className: cn('flex min-h-10 items-center justify-center rounded-lg border px-2 py-2 text-center text-xs transition-colors', isSelected
                                 ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
                                 : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground'), onClick: () => setSection(option.value), type: "button", children: _jsx("span", { className: "truncate font-medium", children: option.label }) }, option.value));
-                    }) }) }), section === 'dormer' && (_jsxs(_Fragment, { children: [_jsxs(PanelSection, { title: "Dimensions", children: [_jsx(SliderControl, { label: "Width", max: 4, min: 0.5, onChange: (v) => previewProp({ width: v }), onCommit: (v) => commitProp({ width: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.width * 100) / 100 }), _jsx(SliderControl, { label: "Depth", max: 5, min: 0.5, onChange: (v) => previewProp({ depth: v }), onCommit: (v) => commitProp({ depth: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.depth * 100) / 100 }), _jsx(SliderControl, { label: "Wall Height", max: 5, min: 0, onChange: (v) => previewProp({ height: v }), onCommit: (v) => commitProp({ height: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.height * 100) / 100 }), _jsx(SliderControl, { label: "Roof Height", max: 3, min: 0, onChange: (v) => previewProp({ roofHeight: v }), onCommit: (v) => commitProp({ roofHeight: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.roofHeight * 100) / 100 })] }), _jsx(PanelSection, { title: "Roof Type", children: _jsx("div", { className: "grid grid-cols-3 gap-1.5 px-1 pt-1", children: ROOF_TYPE_OPTIONS.map((option) => {
+                    }) }) }), section === 'dormer' && (_jsxs(_Fragment, { children: [_jsxs(PanelSection, { title: "Dimensions", children: [_jsx(SliderControl, { label: "Width", max: 1000, min: 0.5, onChange: (v) => previewProp({ width: v }), onCommit: (v) => commitProp({ width: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: node.width }), _jsx(SliderControl, { label: "Depth", max: 1000, min: 0.5, onChange: (v) => previewProp({ depth: v }), onCommit: (v) => commitProp({ depth: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: node.depth }), _jsx(SliderControl, { label: "Wall Height", max: 1000, min: 0, onChange: (v) => previewProp({ height: v }), onCommit: (v) => commitProp({ height: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: node.height }), _jsx(SliderControl, { label: node.roofType === 'shed' ? 'Pitch Rise' : 'Roof Height', max: 3, min: 0, onChange: (v) => previewProp({ roofHeight: v }), onCommit: (v) => commitProp({ roofHeight: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: node.roofHeight })] }), _jsx(PanelSection, { title: "Roof Type", children: _jsx("div", { className: "grid grid-cols-3 gap-1.5 px-1 pt-1", children: ROOF_TYPE_OPTIONS.map((option) => {
                                 const isSelected = node.roofType === option.value;
                                 return (_jsx("button", { className: cn('flex min-h-10 items-center justify-center rounded-lg border px-2 py-2 text-xs transition-colors', isSelected
                                         ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
                                         : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground'), onClick: () => handleUpdate({ roofType: option.value }), type: "button", children: _jsx("span", { className: "truncate font-medium", children: option.label }) }, option.value));
-                            }) }) })] })), section === 'window' && (_jsx(DormerWindowSection, { commitProp: commitProp, handleUpdate: handleUpdate, node: node, previewProp: previewProp })), _jsx(DormerActionsSection, { onDelete: handleDelete, onDuplicate: handleDuplicate, onMove: handleMove })] }));
+                            }) }) }), node.roofType === 'shed' && (_jsx(PanelSection, { title: "Pitch Direction", children: _jsx("div", { className: "grid grid-cols-2 gap-1.5 px-1 pt-1", children: SHED_HIGH_SIDE_OPTIONS.map((option) => {
+                                const isSelected = node.shedHighSide === option.value;
+                                return (_jsx("button", { className: cn('flex min-h-10 items-center justify-center rounded-lg border px-2 py-2 text-xs transition-colors', isSelected
+                                        ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
+                                        : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground'), onClick: () => handleUpdate({ shedHighSide: option.value }), type: "button", children: _jsx("span", { className: "truncate font-medium", children: option.label }) }, option.value));
+                            }) }) }))] })), section === 'window' && (_jsx(DormerWindowsSection, { canAdd: canAddWindow, onAdd: handleAddWindow, onEdit: handleEditWindow, onMove: handleMoveWindow, windows: hostedWindows })), _jsx(DormerActionsSection, { onDelete: handleDelete, onDuplicate: handleDuplicate, onMove: handleMove })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/dormer/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,iBAAiB,EAAE,oBAAoB,CAAC,UAAU,CA4G9D,CAAA"}
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/dormer/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,iBAAiB,EAAE,oBAAoB,CAAC,UAAU,CAwC9D,CAAA"}

package/dist/dormer/parametrics.js

@@ -1,4 +1,3 @@
-import { dormerSupportsArch } from './geometry';
 export const dormerParametrics = {
     // Bespoke tabbed UI (Dormer / Window / Frame / Grid / Sill) — same
     // pattern as chimney. `groups` stays for the MCP path / fallback
@@ -8,9 +7,9 @@ export const dormerParametrics = {
         {
             label: 'Dormer',
             fields: [
-                { key: 'width', kind: 'number', unit: 'm', min: 0.5, max: 4, step: 0.05 },
-                { key: 'depth', kind: 'number', unit: 'm', min: 0.5, max: 5, step: 0.05 },
-                { key: 'height', kind: 'number', unit: 'm', min: 0, max: 5, step: 0.05 },
+                { key: 'width', kind: 'number', unit: 'm', min: 0.5, max: 1000, step: 0.05 },
+                { key: 'depth', kind: 'number', unit: 'm', min: 0.5, max: 1000, step: 0.05 },
+                { key: 'height', kind: 'number', unit: 'm', min: 0, max: 1000, step: 0.05 },
             ],
         },
         {
@@ -23,87 +22,19 @@ export const dormerParametrics = {
                     display: 'select',
                 },
                 { key: 'roofHeight', kind: 'number', unit: 'm', min: 0, max: 2, step: 0.05 },
-            ],
-        },
-        {
-            label: 'Hung wall',
-            fields: [{ key: 'wallSkirtHeight', kind: 'number', unit: 'm', min: 0.2, max: 6, step: 0.05 }],
-        },
-        {
-            label: 'Window opening',
-            fields: [
-                { key: 'windowWidth', kind: 'number', unit: 'm', min: 0.2, max: 3, step: 0.05 },
-                { key: 'windowHeight', kind: 'number', unit: 'm', min: 0.2, max: 6, step: 0.05 },
-                { key: 'windowOffsetX', kind: 'number', unit: 'm', min: -1, max: 1, step: 0.05 },
-                { key: 'windowOffsetY', kind: 'number', unit: 'm', min: 0, max: 2, step: 0.05 },
-            ],
-        },
-        {
-            label: 'Window grid',
-            fields: [
-                { key: 'windowColumns', kind: 'number', min: 1, max: 8, step: 1 },
-                { key: 'windowRows', kind: 'number', min: 1, max: 8, step: 1 },
-            ],
-        },
-        {
-            label: 'Window frame',
-            fields: [
-                {
-                    key: 'windowFrameThickness',
-                    kind: 'number',
-                    unit: 'm',
-                    min: 0.01,
-                    max: 0.15,
-                    step: 0.005,
-                },
-                { key: 'windowFrameDepth', kind: 'number', unit: 'm', min: 0.02, max: 0.15, step: 0.005 },
                 {
-                    key: 'windowDividerThickness',
-                    kind: 'number',
-                    unit: 'm',
-                    min: 0,
-                    max: 0.06,
-                    step: 0.002,
-                },
-                {
-                    key: 'windowShape',
+                    key: 'shedHighSide',
                     kind: 'enum',
-                    options: ['rectangle', 'rounded', 'arch'],
+                    options: ['back', 'front'],
                     display: 'segmented',
-                },
-                {
-                    key: 'windowArchHeight',
-                    kind: 'number',
-                    unit: 'm',
-                    min: 0.1,
-                    max: 1,
-                    step: 0.05,
-                    visibleIf: dormerSupportsArch,
+                    visibleIf: (n) => n.roofType === 'shed',
                 },
             ],
         },
         {
-            label: 'Sill',
+            label: 'Hung wall',
             fields: [
-                { key: 'windowSill', kind: 'boolean' },
-                {
-                    key: 'windowSillDepth',
-                    kind: 'number',
-                    unit: 'm',
-                    min: 0.02,
-                    max: 0.3,
-                    step: 0.01,
-                    visibleIf: (n) => n.windowSill === true,
-                },
-                {
-                    key: 'windowSillThickness',
-                    kind: 'number',
-                    unit: 'm',
-                    min: 0.01,
-                    max: 0.1,
-                    step: 0.005,
-                    visibleIf: (n) => n.windowSill === true,
-                },
+                { key: 'wallSkirtHeight', kind: 'number', unit: 'm', min: 0.2, max: 1000, step: 0.05 },
             ],
         },
     ],

package/dist/dormer/preview.d.ts.map

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

package/dist/dormer/preview.js

@@ -22,7 +22,15 @@ const invalidGhostMaterial = new THREE.MeshStandardMaterial({
 const DormerPreview = ({ node, invalid }) => {
     const material = invalid ? invalidGhostMaterial : ghostMaterial;
     // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
-    const geo = useMemo(() => buildDormerGhostGeometry(node), [node.width, node.depth, node.height, node.roofHeight, node.roofType, node.wallSkirtHeight]);
+    const geo = useMemo(() => buildDormerGhostGeometry(node), [
+        node.width,
+        node.depth,
+        node.height,
+        node.roofHeight,
+        node.roofType,
+        node.shedHighSide,
+        node.wallSkirtHeight,
+    ]);
     useEffect(() => () => geo.dispose(), [geo]);
     return _jsx("mesh", { geometry: geo, material: material, raycast: () => { } });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/dormer/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,UAAU,EAMhB,MAAM,kBAAkB,CAAA;AAYzB,OAAO,EAEL,2BAA2B,EAE5B,MAAM,gBAAgB,CAAA;AAGvB,QAAA,MAAM,cAAc,GAAI,qBAAqB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,uCA+KhE,CAAA;AAID,OAAO,EAAE,2BAA2B,EAAE,CAAA;AAEtC,eAAe,cAAc,CAAA"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/dormer/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,UAAU,EAShB,MAAM,kBAAkB,CAAA;AAczB,OAAO,EAEL,2BAA2B,EAE5B,MAAM,gBAAgB,CAAA;AAEvB,QAAA,MAAM,cAAc,GAAI,qBAAqB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,uCAoLhE,CAAA;AAqBD,OAAO,EAAE,2BAA2B,EAAE,CAAA;AAEtC,eAAe,cAAc,CAAA"}

package/dist/dormer/renderer.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getEffectiveDormerSurfaceMaterial, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
-import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { getDormerWallFaceFrame, getEffectiveDormerSurfaceMaterial, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
+import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, NodeRenderer, useNodeEvents, useViewer, } from '@pascal-app/viewer';
 import { useEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
+import { useShallow } from 'zustand/react/shallow';
 import { useSegmentTrimClippedGeometry } from '../shared/use-segment-trim-clip';
 import { buildDormerFallbackGeometry, DORMER_GABLE_MATERIAL_INDEX, generateDormerGeometry, } from './csg-geometry';
-import DormerWindowAssembly from './window-assembly';
 const DormerRenderer = ({ node: storeNode }) => {
     const ref = useRef(null);
     useRegistry(storeNode.id, 'dormer', ref);
@@ -20,6 +20,17 @@ const DormerRenderer = ({ node: storeNode }) => {
     const liveOverrides = useLiveNodeOverrides((state) => state.get(storeNode.id));
     const isLiveDrag = !!liveOverrides && Object.keys(liveOverrides).length > 0;
     const node = useMemo(() => (liveOverrides ? { ...storeNode, ...liveOverrides } : storeNode), [storeNode, liveOverrides]);
+    const childNodes = useScene(useShallow((state) => (node.children ?? [])
+        .map((childId) => state.nodes[childId])
+        .filter((child) => child !== undefined)));
+    const hostedWindowNodes = useMemo(() => childNodes.filter((child) => child.type === 'window'), [childNodes]);
+    const hostedWindowIds = useMemo(() => hostedWindowNodes.map((window) => window.id), [hostedWindowNodes]);
+    const liveWindowOverrides = useLiveNodeOverrides(useShallow((state) => hostedWindowIds.map((windowId) => state.overrides.get(windowId))));
+    const hostedWindows = useMemo(() => hostedWindowNodes.map((window, index) => {
+        const override = liveWindowOverrides[index];
+        return override ? { ...window, ...override } : window;
+    }), [hostedWindowNodes, liveWindowOverrides]);
+    const hasLiveWindowPreview = liveWindowOverrides.some((override) => override !== undefined);
     const segment = useScene((state) => node.roofSegmentId
         ? state.nodes[node.roofSegmentId]
         : undefined);
@@ -65,28 +76,20 @@ const DormerRenderer = ({ node: storeNode }) => {
         node.wallMaterial,
         node.wallMaterialPreset,
     ]);
-    // The window frame bars / sill take the 'joinery' role when untextured;
-    // otherwise the deck-side material (slot 1) drives the frame look.
-    const frameSideMat = useMemo(() => {
-        if (!textures)
-            return createSurfaceRoleMaterial('joinery', colorPreset, undefined, sceneTheme);
-        return material[1];
-    }, [textures, colorPreset, sceneTheme, material]);
-    // Dormer window glass has no per-node material — it always takes the
-    // themed 'glazing' role (semi-transparent) in both texture modes.
-    const glassMat = useMemo(() => createSurfaceRoleMaterial('glazing', colorPreset, undefined, sceneTheme), [colorPreset, sceneTheme]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
     const geometry = useMemo(() => {
         if (!segment)
             return null;
-        if (isLiveDrag)
+        if (isLiveDrag || hasLiveWindowPreview)
             return buildDormerFallbackGeometry(node);
-        return generateDormerGeometry(node, segment);
+        return generateDormerGeometry(node, segment, hostedWindows);
     }, [
         isLiveDrag,
+        hasLiveWindowPreview,
         segment,
         node.id,
         node.roofType,
+        node.shedHighSide,
         node.width,
         node.depth,
         node.height,
@@ -96,16 +99,7 @@ const DormerRenderer = ({ node: storeNode }) => {
         node.position[1],
         node.position[2],
         node.rotation,
-        node.windowWidth,
-        node.windowHeight,
-        node.windowOffsetX,
-        node.windowOffsetY,
-        node.windowShape,
-        node.windowArchHeight,
-        node.windowCornerRadii[0],
-        node.windowCornerRadii[1],
-        node.windowCornerRadii[2],
-        node.windowCornerRadii[3],
+        hostedWindows,
     ]);
     useEffect(() => () => geometry?.dispose(), [geometry]);
     // Map dormer-local geometry into the host segment's local frame (where the
@@ -126,8 +120,12 @@ const DormerRenderer = ({ node: storeNode }) => {
     // dormer's own position + rotation so the registered Object3D's
     // local frame is *dormer-local* — that's what `NodeArrowHandles`
     // reads to place its chevrons. Mirrors chimney's structure.
-    return (_jsx("group", { position: segment.position, "rotation-y": segment.rotation ?? 0, visible: node.visible, ...handlers, children: _jsxs("group", { position: [node.position[0] ?? 0, node.position[1] ?? 0, node.position[2] ?? 0], ref: ref, "rotation-y": node.rotation ?? 0, children: [_jsx("mesh", { castShadow: true, geometry: clippedGeometry ?? geometry, material: material, name: "dormer-body", receiveShadow: true }), _jsx(DormerWindowAssembly, { dormerToSegment: localToSegment, frameMaterial: frameSideMat, glassMaterial: glassMat, node: node, segment: segment })] }) }));
+    return (_jsx("group", { position: segment.position, "rotation-y": segment.rotation ?? 0, visible: node.visible, children: _jsxs("group", { position: [node.position[0] ?? 0, node.position[1] ?? 0, node.position[2] ?? 0], ref: ref, "rotation-y": node.rotation ?? 0, children: [_jsx("mesh", { castShadow: true, geometry: clippedGeometry ?? geometry, material: material, name: "dormer-body", receiveShadow: true, ...handlers }), hostedWindows.map((window) => (_jsx(DormerWindowHostFrame, { dormer: node, face: window.dormerFace ?? 'front', children: _jsx(NodeRenderer, { nodeId: window.id }) }, `${node.id}:${window.id}`)))] }) }));
 };
+function DormerWindowHostFrame({ dormer, face, children, }) {
+    const frame = getDormerWallFaceFrame(dormer, face);
+    return (_jsx("group", { position: frame.origin, "rotation-y": frame.yaw, children: children }));
+}
 // Re-export so consumers (e.g. tests) can reach the gable slot index
 // without importing from `@pascal-app/viewer` directly.
 export { DORMER_GABLE_MATERIAL_INDEX };

package/dist/dormer/tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/dormer/tool.tsx"],"names":[],"mappings":"AA8BA;;;;;;;GAOG;AACH,QAAA,MAAM,UAAU,mCAyFf,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/dormer/tool.tsx"],"names":[],"mappings":"AAoCA;;;;;;;GAOG;AACH,QAAA,MAAM,UAAU,mCA+Ff,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/dormer/tool.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DormerNode, useScene } from '@pascal-app/core';
+import { createDormerDefaultWindow, DormerNode, getDormerDefaultWindowFace, useScene, } from '@pascal-app/core';
 import { usePlacementPreview } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { useEffect, useMemo } from 'react';
@@ -61,6 +61,8 @@ const DormerTool = () => {
                 rotation,
             });
             state.createNode(dormer, hit.segment.id);
+            const defaultWindow = createDormerDefaultWindow(dormer, `window_${dormer.id.replace(/^dormer_/, '')}_default`, getDormerDefaultWindowFace(dormer, hit.segment));
+            state.createNode(defaultWindow, dormer.id);
             state.dirtyNodes.add(hit.segment.id);
             setSelection({ selectedIds: [dormer.id] });
             usePlacementPreview.getState().clear();

package/dist/dormer/window-layout.d.ts

@@ -0,0 +1,15 @@
+export declare const DORMER_WINDOW_GAP = 0.12;
+export declare const DORMER_WINDOW_MARGIN = 0.12;
+export declare const DORMER_WINDOW_MIN_WIDTH = 0.3;
+export type DormerWindowRowItem = {
+    id: string;
+    position: readonly [number, number, number];
+    width: number;
+};
+export type DormerWindowRowPlacement = {
+    id: string;
+    position: [number, number, number];
+    width: number;
+};
+export declare function planDormerWindowRow(dormerWidth: number, windows: readonly DormerWindowRowItem[]): DormerWindowRowPlacement[] | null;
+//# sourceMappingURL=window-layout.d.ts.map

package/dist/dormer/window-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-layout.d.ts","sourceRoot":"","sources":["../../src/dormer/window-layout.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,oBAAoB,OAAO,CAAA;AACxC,eAAO,MAAM,uBAAuB,MAAM,CAAA;AAE1C,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC3C,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAwCD,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,SAAS,mBAAmB,EAAE,GACtC,wBAAwB,EAAE,GAAG,IAAI,CA4BnC"}

package/dist/dormer/window-layout.js

@@ -0,0 +1,59 @@
+export const DORMER_WINDOW_GAP = 0.12;
+export const DORMER_WINDOW_MARGIN = 0.12;
+export const DORMER_WINDOW_MIN_WIDTH = 0.3;
+const roundLayoutValue = (value) => {
+    const rounded = Math.round(value * 1_000_000) / 1_000_000;
+    return Object.is(rounded, -0) ? 0 : rounded;
+};
+function fitWindowWidths(preferredWidths, availableWidth) {
+    const minimumTotal = preferredWidths.length * DORMER_WINDOW_MIN_WIDTH;
+    if (availableWidth + 1e-9 < minimumTotal)
+        return null;
+    const widths = preferredWidths.map((width) => Math.max(DORMER_WINDOW_MIN_WIDTH, width));
+    if (widths.reduce((sum, width) => sum + width, 0) <= availableWidth)
+        return widths;
+    const fitted = Array.from({ length: widths.length }, () => 0);
+    const remainingIndices = new Set(widths.map((_, index) => index));
+    let remainingWidth = availableWidth;
+    while (remainingIndices.size > 0) {
+        const preferredTotal = [...remainingIndices].reduce((sum, index) => sum + widths[index], 0);
+        const scale = remainingWidth / preferredTotal;
+        const belowMinimum = [...remainingIndices].filter((index) => widths[index] * scale < DORMER_WINDOW_MIN_WIDTH);
+        if (belowMinimum.length === 0) {
+            for (const index of remainingIndices)
+                fitted[index] = widths[index] * scale;
+            break;
+        }
+        for (const index of belowMinimum) {
+            fitted[index] = DORMER_WINDOW_MIN_WIDTH;
+            remainingWidth -= DORMER_WINDOW_MIN_WIDTH;
+            remainingIndices.delete(index);
+        }
+    }
+    return fitted;
+}
+export function planDormerWindowRow(dormerWidth, windows) {
+    if (windows.length === 0)
+        return [];
+    const innerWidth = Math.max(0, dormerWidth - DORMER_WINDOW_MARGIN * 2);
+    const gapsWidth = DORMER_WINDOW_GAP * Math.max(0, windows.length - 1);
+    const widths = fitWindowWidths(windows.map((window) => window.width), innerWidth - gapsWidth);
+    if (!widths)
+        return null;
+    const rowWidth = widths.reduce((sum, width) => sum + width, 0) + gapsWidth;
+    let cursor = -rowWidth / 2;
+    return windows.map((window, index) => {
+        const width = widths[index];
+        const x = cursor + width / 2;
+        cursor += width + DORMER_WINDOW_GAP;
+        return {
+            id: window.id,
+            position: [
+                roundLayoutValue(x),
+                roundLayoutValue(window.position[1]),
+                roundLayoutValue(window.position[2]),
+            ],
+            width: roundLayoutValue(width),
+        };
+    });
+}

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

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/downspout/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAGpB,MAAM,kBAAkB,CAAA;AAQzB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AA4HxC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,OAAO,aAAa,CAqDpE,CAAA"}
+{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/downspout/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAGpB,MAAM,kBAAkB,CAAA;AASzB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAiIxC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,OAAO,aAAa,CA4DpE,CAAA"}

package/dist/downspout/definition.js

@@ -1,4 +1,5 @@
 import { DownspoutNode as DownspoutNodeSchema, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { surfacePaintCapability } from '../shared/surface-paint';
 import { downspoutParametrics } from './parametrics';
 import { computeDownspoutPath, downspoutPipeDims, effectiveWallJog, resolveDownspoutRouting, } from './routing';
 import { DownspoutNode } from './schema';
@@ -38,8 +39,12 @@ function downspoutLengthHandle() {
         anchor: 'max',
         shape: 'tracker',
         min: MIN_LENGTH,
+        gridSnap: true,
         currentValue: (n) => n.length,
-        apply: (_n, newValue) => ({ length: Math.max(MIN_LENGTH, newValue) }),
+        apply: (_n, newValue) => ({
+            length: Math.max(MIN_LENGTH, newValue),
+            lengthMode: 'manual',
+        }),
         placement: {
             position: (n, scene) => {
                 const routing = resolveDownspoutRouting(n, scene);
@@ -87,13 +92,14 @@ function downspoutMoveHandle(side) {
         axis: 'x',
         anchor: 'min',
         cursor: 'ew-resize',
+        gridSnap: true,
         overrideTarget: (n) => (n.gutterId ? n.gutterId : undefined),
         currentValue: (n) => readOutletOffset(n),
         apply: (n, newOffset, scene) => {
             const gutter = n.gutterId ? scene.get(n.gutterId) : undefined;
             if (!gutter)
                 return {};
-            const outlets = (gutter.outlets ?? []).map((o) => o.id === n.outletId ? { ...o, offset: newOffset } : o);
+            const outlets = (gutter.outlets ?? []).map((o) => o.id === n.outletId ? { ...o, offset: newOffset, generatedBy: undefined } : o);
             // Patch targets the GUTTER (overrideTarget), not the downspout.
             return { outlets };
         },
@@ -127,10 +133,11 @@ const downspoutHandles = [
  */
 export const downspoutDefinition = {
     kind: 'downspout',
-    schemaVersion: 1,
+    schemaVersion: 3,
     schema: DownspoutNode,
     category: 'structure',
     surfaceRole: 'roof',
+    snapProfile: 'item',
     defaults: () => {
         const stub = DownspoutNodeSchema.parse({
             id: 'downspout_default',
@@ -140,9 +147,11 @@ export const downspoutDefinition = {
         return rest;
     },
     capabilities: {
+        slots: () => [{ slotId: 'surface', label: 'Surface', default: 'library:preset-softwhite' }],
         selectable: { hitVolume: 'bbox' },
         duplicable: true,
         deletable: true,
+        paint: { ...surfacePaintCapability, materialTarget: 'downspout' },
         // Logically a roof accessory — registers under the segment, has
         // no buildCut, just the standard dirty cascade.
         roofAccessory: {},
@@ -153,6 +162,10 @@ export const downspoutDefinition = {
         kind: 'parametric',
         module: () => import('./renderer'),
     },
+    system: {
+        module: () => import('./system'),
+        priority: 2,
+    },
     preview: () => import('./preview'),
     tool: () => import('./tool'),
     toolHints: [
@@ -163,7 +176,7 @@ export const downspoutDefinition = {
     presentation: {
         label: 'Downspout',
         description: 'Vertical drop pipe from a gutter outlet to the ground.',
-        icon: { kind: 'url', src: '/icons/roof.webp' },
+        icon: { kind: 'url', src: '/icons/downspout.webp' },
         paletteSection: 'structure',
         paletteOrder: 123,
     },

package/dist/downspout/geometry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/downspout/geometry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAGL,KAAK,gBAAgB,EAGtB,MAAM,WAAW,CAAA;AAwClB,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,aAAa,EACnB,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,GAChC,KAAK,CAAC,cAAc,CA+CtB"}
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/downspout/geometry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,EAGL,KAAK,gBAAgB,EAGtB,MAAM,WAAW,CAAA;AAwClB,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,aAAa,EACnB,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,GAChC,KAAK,CAAC,cAAc,CAgDtB"}