@pascal-app/viewer 0.9.1 → 0.9.2

package/dist/systems/interactive/control-widget.d.ts

@@ -0,0 +1,10 @@
+import type { Control, ControlValue } from '@pascal-app/core';
+/** One interactive control (toggle / slider / temperature) rendered inside the
+ *  item controls overlay. Shared by the parametric `InteractiveSystem` and the
+ *  baked-GLB `GlbInteractive` overlay so both look and behave identically. */
+export declare const ControlWidget: ({ control, value, onChange, }: {
+    control: Control;
+    value: ControlValue;
+    onChange: (v: ControlValue) => void;
+}) => import("react").JSX.Element | null;
+//# sourceMappingURL=control-widget.d.ts.map

package/dist/systems/interactive/control-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-widget.d.ts","sourceRoot":"","sources":["../../../src/systems/interactive/control-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE7D;;8EAE8E;AAC9E,eAAO,MAAM,aAAa,GAAI,+BAI3B;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,YAAY,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;CACpC,uCAuEA,CAAA"}

package/dist/systems/interactive/control-widget.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One interactive control (toggle / slider / temperature) rendered inside the
+ *  item controls overlay. Shared by the parametric `InteractiveSystem` and the
+ *  baked-GLB `GlbInteractive` overlay so both look and behave identically. */
+export const ControlWidget = ({ control, value, onChange, }) => {
+    const labelStyle = {
+        color: 'white',
+        fontSize: 11,
+        fontFamily: 'monospace',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+    };
+    if (control.kind === 'toggle') {
+        return (_jsx("button", { onClick: () => onChange(!value), style: {
+                background: value ? '#4ade80' : '#374151',
+                color: 'white',
+                border: 'none',
+                borderRadius: 4,
+                padding: '4px 8px',
+                cursor: 'pointer',
+                fontSize: 12,
+                fontFamily: 'monospace',
+                transition: 'background 0.2s',
+            }, children: control.label ?? (value ? 'On' : 'Off') }));
+    }
+    if (control.kind === 'slider') {
+        return (_jsxs("label", { style: labelStyle, children: [_jsxs("span", { children: [control.label, ": ", value, control.unit ? ` ${control.unit}` : ''] }), _jsx("input", { max: control.max, min: control.min, onChange: (e) => onChange(Number(e.target.value)), onPointerDown: (e) => e.stopPropagation(), step: control.step, type: "range", value: value })] }));
+    }
+    if (control.kind === 'temperature') {
+        return (_jsxs("label", { style: labelStyle, children: [_jsxs("span", { children: [control.label, ": ", value, "\u00B0", control.unit] }), _jsx("input", { max: control.max, min: control.min, onChange: (e) => onChange(Number(e.target.value)), onPointerDown: (e) => e.stopPropagation(), step: 1, type: "range", value: value })] }));
+    }
+    return null;
+};

package/dist/systems/interactive/interactive-system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactive-system.d.ts","sourceRoot":"","sources":["../../../src/systems/interactive/interactive-system.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,iBAAiB,mCAgB7B,CAAA"}
+{"version":3,"file":"interactive-system.d.ts","sourceRoot":"","sources":["../../../src/systems/interactive/interactive-system.tsx"],"names":[],"mappings":"AAiCA,eAAO,MAAM,iBAAiB,mCAsB7B,CAAA"}

package/dist/systems/interactive/interactive-system.js

@@ -1,22 +1,41 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { pointInPolygon, sceneRegistry, useInteractive, useScene, } from '@pascal-app/core';
 import { Html } from '@react-three/drei';
 import { createPortal, useFrame } from '@react-three/fiber';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Vector3 } from 'three';
 import { useShallow } from 'zustand/react/shallow';
 import useViewer from '../../store/use-viewer';
+import { ControlWidget } from './control-widget';
 const _tempVec = new Vector3();
-// ---- Parent: one overlay per interactive item ----
+// ---- Parent: one overlay per interactive item inside the selected zone ----
+//
+// The <Html> overlays only exist while a zone is selected and the item sits
+// inside it. Mounting them unconditionally is not an option: each drei <Html>
+// repositions and re-sorts its DOM element on every camera-move frame, and
+// with `occlude` it also raycasts the entire scene per overlay per frame. On
+// large scenes (hundreds of interactive items) that starves the frame budget
+// and the display/z-index churn makes the whole DOM UI flicker.
+//
+// The child components stay rendered (returning null) so an overlay can fade
+// out before its <Html> unmounts.
 export const InteractiveSystem = () => {
+    const zoneId = useViewer((s) => s.selection.zoneId);
+    const zonePolygon = useScene((s) => {
+        if (!zoneId)
+            return null;
+        const z = s.nodes[zoneId];
+        return z?.polygon ?? null;
+    });
     const interactiveNodeIds = useScene(useShallow((state) => Object.values(state.nodes)
         .filter((n) => n.type === 'item' && n.asset.interactive != null)
         .map((n) => n.id)));
-    return (_jsx(_Fragment, { children: interactiveNodeIds.map((id) => (_jsx(ItemControlsOverlay, { nodeId: id }, id))) }));
+    return (_jsx(_Fragment, { children: interactiveNodeIds.map((id) => (_jsx(ItemControlsOverlay, { nodeId: id, zonePolygon: zonePolygon }, id))) }));
 };
 // ---- Child: polls sceneRegistry then portals controls into the item group ----
-const ItemControlsOverlay = ({ nodeId }) => {
+const FADE_MS = 300;
+const ItemControlsOverlay = ({ nodeId, zonePolygon, }) => {
     const node = useScene((state) => state.nodes[nodeId]);
     const [itemObj, setItemObj] = useState(null);
     useFrame(() => {
@@ -28,26 +47,37 @@ const ItemControlsOverlay = ({ nodeId }) => {
     });
     const controlValues = useInteractive(useShallow((state) => state.items[nodeId]?.controlValues));
     const setControlValue = useInteractive((state) => state.setControlValue);
-    const zoneId = useViewer((s) => s.selection.zoneId);
-    const zonePolygon = useScene((s) => {
-        if (!zoneId)
-            return null;
-        const z = s.nodes[zoneId];
-        return z?.polygon ?? null;
-    });
-    if (!(itemObj && controlValues && node?.asset.interactive))
+    let visible = false;
+    if (itemObj && zonePolygon?.length) {
+        itemObj.getWorldPosition(_tempVec);
+        visible = pointInPolygon(_tempVec.x, _tempVec.z, zonePolygon);
+    }
+    // Fade in on mount and fade out before unmounting the <Html>.
+    const [mounted, setMounted] = useState(false);
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        if (visible) {
+            setMounted(true);
+            // Double rAF: the overlay has to paint once at opacity 0 before the
+            // opacity-1 style lands, otherwise the fade-in transition is skipped.
+            let raf2 = 0;
+            const raf1 = requestAnimationFrame(() => {
+                raf2 = requestAnimationFrame(() => setShown(true));
+            });
+            return () => {
+                cancelAnimationFrame(raf1);
+                cancelAnimationFrame(raf2);
+            };
+        }
+        setShown(false);
+        const timeout = setTimeout(() => setMounted(false), FADE_MS);
+        return () => clearTimeout(timeout);
+    }, [visible]);
+    if (!(mounted && itemObj && controlValues && node?.asset.interactive))
         return null;
     const { controls } = node.asset.interactive;
     const [, height] = node.asset.dimensions;
-    let opacity = 0;
-    let pointerEvents = 'none';
-    if (zoneId && zonePolygon?.length) {
-        itemObj.getWorldPosition(_tempVec);
-        const inside = pointInPolygon(_tempVec.x, _tempVec.z, zonePolygon);
-        opacity = inside ? 1 : 0.1;
-        pointerEvents = inside ? 'auto' : 'none';
-    }
-    return createPortal(_jsx(Html, { center: true, distanceFactor: 8, occlude: true, position: [0, height + 0.3, 0], zIndexRange: [20, 0], children: _jsx("div", { style: {
+    return createPortal(_jsx(Html, { center: true, distanceFactor: 8, eps: -1, position: [0, height + 0.3, 0], zIndexRange: [20, 0], children: _jsx("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: 6,
@@ -56,40 +86,9 @@ const ItemControlsOverlay = ({ nodeId }) => {
                 borderRadius: 8,
                 padding: '8px 12px',
                 minWidth: 120,
-                pointerEvents,
+                pointerEvents: visible ? 'auto' : 'none',
                 userSelect: 'none',
-                opacity,
-                transition: 'opacity 0.3s ease',
+                opacity: shown ? 1 : 0,
+                transition: `opacity ${FADE_MS}ms ease`,
             }, children: controls.map((control, i) => (_jsx(ControlWidget, { control: control, onChange: (v) => setControlValue(nodeId, i, v), value: controlValues[i] ?? false }, i))) }) }), itemObj);
 };
-// ---- Control widgets ----
-const ControlWidget = ({ control, value, onChange, }) => {
-    const labelStyle = {
-        color: 'white',
-        fontSize: 11,
-        fontFamily: 'monospace',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-    };
-    if (control.kind === 'toggle') {
-        return (_jsx("button", { onClick: () => onChange(!value), style: {
-                background: value ? '#4ade80' : '#374151',
-                color: 'white',
-                border: 'none',
-                borderRadius: 4,
-                padding: '4px 8px',
-                cursor: 'pointer',
-                fontSize: 12,
-                fontFamily: 'monospace',
-                transition: 'background 0.2s',
-            }, children: control.label ?? (value ? 'On' : 'Off') }));
-    }
-    if (control.kind === 'slider') {
-        return (_jsxs("label", { style: labelStyle, children: [_jsxs("span", { children: [control.label, ": ", value, control.unit ? ` ${control.unit}` : ''] }), _jsx("input", { max: control.max, min: control.min, onChange: (e) => onChange(Number(e.target.value)), onPointerDown: (e) => e.stopPropagation(), step: control.step, type: "range", value: value })] }));
-    }
-    if (control.kind === 'temperature') {
-        return (_jsxs("label", { style: labelStyle, children: [_jsxs("span", { children: [control.label, ": ", value, "\u00B0", control.unit] }), _jsx("input", { max: control.max, min: control.min, onChange: (e) => onChange(Number(e.target.value)), onPointerDown: (e) => e.stopPropagation(), step: 1, type: "range", value: value })] }));
-    }
-    return null;
-};

package/dist/systems/item/item-system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item-system.d.ts","sourceRoot":"","sources":["../../../src/systems/item/item-system.tsx"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,YA+BtB,CAAA"}
+{"version":3,"file":"item-system.d.ts","sourceRoot":"","sources":["../../../src/systems/item/item-system.tsx"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,YA8CtB,CAAA"}

package/dist/systems/item/item-system.js

@@ -19,21 +19,35 @@ export const ItemSystem = () => {
         const nodes = useScene.getState().nodes;
         dirtyNodes.forEach((id) => {
             const node = nodes[id];
-            if (!node || node.type !== 'item')
+            if (node?.type !== 'item')
                 return;
             const item = node;
             const mesh = sceneRegistry.nodes.get(id);
             if (!mesh)
                 return;
             if (item.asset.attachTo === 'wall-side') {
-                // Wall-attached item: offset Z by half the parent wall's thickness
-                const parentWall = item.parentId ? nodes[item.parentId] : undefined;
-                if (parentWall && parentWall.type === 'wall') {
-                    const wallThickness = parentWall.thickness ?? 0.1;
+                // Wall-attached item: offset Z by half the host wall's thickness.
+                // Roof-segment wall faces share the convention — the face frame's
+                // z = 0 is the wall mid-plane, so the same push lands the item on
+                // the outer surface.
+                const parent = item.parentId ? nodes[item.parentId] : undefined;
+                const thickness = parent?.type === 'wall'
+                    ? (parent.thickness ?? 0.1)
+                    : parent?.type === 'roof-segment'
+                        ? (parent.wallThickness ?? 0.1)
+                        : undefined;
+                if (thickness !== undefined) {
                     const side = item.side === 'front' ? 1 : -1;
-                    mesh.position.z = (wallThickness / 2) * side;
+                    mesh.position.z = (thickness / 2) * side;
                 }
             }
+            // Hold the mark until the model settles (loaded, terminally failed, or
+            // never expected — see ItemRenderer.markSettled). Registration alone
+            // isn't "built": clearing then would let scene-ready fire while GLBs are
+            // still downloading and a bake would export loading placeholders.
+            const settled = mesh.userData.itemModelSettled;
+            if (!settled)
+                return;
             clearDirty(id);
         });
     }, 2);

package/dist/systems/level/level-system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"level-system.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-system.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,YAsCvB,CAAA"}
+{"version":3,"file":"level-system.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-system.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,WAAW,YA6DvB,CAAA"}

package/dist/systems/level/level-system.js

@@ -1,9 +1,14 @@
-import { sceneRegistry, useScene } from '@pascal-app/core';
+import { getLevelHeight, sceneRegistry, useScene } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
 import { lerp } from 'three/src/math/MathUtils.js';
+import { applyShadowOnly, clearShadowOnly } from '../../lib/shadow-only';
 import useViewer from '../../store/use-viewer';
-import { getLevelHeight } from './level-utils';
 const EXPLODED_GAP = 5;
+// Levels currently in shadow-caster-only mode (solo hides them from the color
+// passes but keeps their sun shadows). Tracked so we can restore layer masks
+// exactly once on transition; apply re-runs every frame so meshes rebuilt
+// while hidden (theme/texture changes) get re-hidden.
+const shadowOnlyLevels = new WeakSet();
 export const LevelSystem = () => {
     useFrame((_, delta) => {
         const nodes = useScene.getState().nodes;
@@ -19,6 +24,9 @@ export const LevelSystem = () => {
         });
         entries.sort((a, b) => a.index - b.index);
         // Walk sorted levels, accumulating base Y offsets
+        const selectedIndex = selectedLevel
+            ? entries.find((e) => e.levelId === selectedLevel)?.index
+            : undefined;
         let cumulativeY = 0;
         for (const { levelId, index, obj } of entries) {
             const level = nodes[levelId];
@@ -26,8 +34,24 @@ export const LevelSystem = () => {
             const explodedExtra = levelMode === 'exploded' ? index * EXPLODED_GAP : 0;
             const targetY = baseY + explodedExtra;
             obj.position.y = lerp(obj.position.y, targetY, delta * 12); // Smoothly animate to new Y position
-            obj.visible = levelMode !== 'solo' || level?.id === selectedLevel || !selectedLevel;
-            cumulativeY += getLevelHeight(levelId, nodes);
+            // Solo: hidden levels ABOVE the soloed one stay in the shadow map
+            // (shadow-caster-only) so the sun still shadows the soloed floor through
+            // them; levels below can't block the sun, so they plain-hide.
+            const hidden = levelMode === 'solo' && Boolean(selectedLevel) && level?.id !== selectedLevel;
+            const castsWhileHidden = hidden && selectedIndex !== undefined && index > selectedIndex;
+            if (castsWhileHidden) {
+                applyShadowOnly(obj);
+                shadowOnlyLevels.add(obj);
+                obj.visible = true;
+            }
+            else {
+                if (shadowOnlyLevels.has(obj)) {
+                    clearShadowOnly(obj);
+                    shadowOnlyLevels.delete(obj);
+                }
+                obj.visible = !hidden;
+            }
+            cumulativeY += getLevelHeight(levelId, nodes, (wallId) => sceneRegistry.nodes.get(wallId)?.position.y);
         }
     }, 5); // Using a lower priority so it runs after transforms from other systems have settled
     return null;

package/dist/systems/level/level-utils.d.ts

@@ -1,6 +1,3 @@
-import { useScene } from '@pascal-app/core';
-export declare const DEFAULT_LEVEL_HEIGHT = 2.5;
-export declare function getLevelHeight(levelId: string, nodes: ReturnType<typeof useScene.getState>['nodes']): number;
 /**
  * Instantly snaps all level Objects3D to their true stacked Y positions
  * (ignores levelMode — always uses stacked, no exploded gap).

package/dist/systems/level/level-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"level-utils.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,QAAQ,EAET,MAAM,kBAAkB,CAAA;AAEzB,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAQvC,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,GACnD,MAAM,CA8BR;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,IAAI,CAyCtD"}
+{"version":3,"file":"level-utils.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-utils.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,IAAI,CA6CtD"}

package/dist/systems/level/level-utils.js

@@ -1,43 +1,4 @@
-import { sceneRegistry, useScene, } from '@pascal-app/core';
-export const DEFAULT_LEVEL_HEIGHT = 2.5;
-// Cache: levelId → computed height. Invalidated when the nodes reference changes.
-// Zustand produces a new `nodes` object on every mutation, so reference equality
-// is a zero-cost way to detect stale data without any subscription overhead.
-const heightCache = new Map();
-let lastNodesRef = null;
-export function getLevelHeight(levelId, nodes) {
-    if (nodes !== lastNodesRef) {
-        heightCache.clear();
-        lastNodesRef = nodes;
-    }
-    if (heightCache.has(levelId))
-        return heightCache.get(levelId);
-    const level = nodes[levelId];
-    if (!level)
-        return DEFAULT_LEVEL_HEIGHT;
-    let maxTop = 0;
-    for (const childId of level.children) {
-        const child = nodes[childId];
-        if (!child)
-            continue;
-        if (child.type === 'ceiling') {
-            const ch = child.height ?? DEFAULT_LEVEL_HEIGHT;
-            if (ch > maxTop)
-                maxTop = ch;
-        }
-        else if (child.type === 'wall') {
-            let meshY = sceneRegistry.nodes.get(childId)?.position.y ?? 0;
-            if (meshY < 0)
-                meshY = 0;
-            const top = meshY + (child.height ?? DEFAULT_LEVEL_HEIGHT);
-            if (top > maxTop)
-                maxTop = top;
-        }
-    }
-    const height = maxTop > 0 ? maxTop : DEFAULT_LEVEL_HEIGHT;
-    heightCache.set(levelId, height);
-    return height;
-}
+import { getLevelHeight, sceneRegistry, useScene } from '@pascal-app/core';
 /**
  * Instantly snaps all level Objects3D to their true stacked Y positions
  * (ignores levelMode — always uses stacked, no exploded gap).
@@ -68,7 +29,7 @@ export function snapLevelsToTruePositions() {
     for (const { levelId, obj } of entries) {
         obj.position.y = cumulativeY;
         obj.visible = true;
-        cumulativeY += getLevelHeight(levelId, nodes);
+        cumulativeY += getLevelHeight(levelId, nodes, (wallId) => sceneRegistry.nodes.get(wallId)?.position.y);
     }
     return () => {
         for (const { levelId, obj } of entries) {

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

@@ -1 +1 @@
-{"version":3,"file":"roof-materials.d.ts","sourceRoot":"","sources":["../../../src/systems/roof/roof-materials.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,EAEd,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AACnC,OAAO,EACL,KAAK,WAAW,EAIhB,KAAK,aAAa,EACnB,MAAM,qBAAqB,CAAA;AAE5B,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;AA6BhG,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,QAAQ,EACd,OAAO,GAAE,aAA0B,EACnC,QAAQ,UAAO,EACf,WAAW,GAAE,WAAoB,EACjC,UAAU,CAAC,EAAE,MAAM,GAClB,iBAAiB,GAAG,IAAI,CA0D1B"}
+{"version":3,"file":"roof-materials.d.ts","sourceRoot":"","sources":["../../../src/systems/roof/roof-materials.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,EAEd,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AACnC,OAAO,EACL,KAAK,WAAW,EAIhB,KAAK,aAAa,EAEnB,MAAM,qBAAqB,CAAA;AAa5B,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;AA6BhG,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,QAAQ,EACd,OAAO,GAAE,aAA0B,EACnC,QAAQ,UAAO,EACf,WAAW,GAAE,WAAoB,EACjC,UAAU,CAAC,EAAE,MAAM,GAClB,iBAAiB,GAAG,IAAI,CAsE1B"}

package/dist/systems/roof/roof-materials.js

@@ -1,5 +1,15 @@
 import { getEffectiveRoofSurfaceMaterial, } from '@pascal-app/core';
-import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, } from '../../lib/materials';
+import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, resolveSlotDefaultMaterial, } from '../../lib/materials';
+// Declared catalog defaults for an unpainted roof, per the 4-slot layout
+// (0 wall/trim · 1 deck · 2 interior soffit · 3 shingle top). The wall/trim
+// band mirrors the wall kind's default (WALL_SLOT_DEFAULT = concrete-drywall)
+// so a roof reads as continuous with the walls below it.
+const ROOF_DEFAULT_REFS = [
+    'library:concrete-drywall',
+    'library:preset-softwhite',
+    'library:preset-softwhite',
+    'library:roof-terracottatiles',
+];
 const roofMaterialArrayCache = new Map();
 function getSurfaceMaterialSignature(spec) {
     return JSON.stringify({
@@ -43,27 +53,38 @@ export function getRoofMaterialArray(node, shading = 'rendered', textures = true
         ceilingMaterial,
         roofMaterial,
     ];
+    // Textures-off (monochrome) is the guaranteed escape hatch: themed role
+    // colours, no catalog finishes.
     if (!textures) {
         roofMaterialArrayCache.set(cacheKey, roleArray);
         return roleArray;
     }
+    // Textures-on default appearance: catalog finishes per slot (terracotta
+    // shingle, soft-white deck/soffit, wall-coloured trim). Used both when the
+    // roof is unpainted and to fill any individual unpainted slot below.
+    const defaultArray = [
+        resolveSlotDefaultMaterial(ROOF_DEFAULT_REFS[0], shading),
+        resolveSlotDefaultMaterial(ROOF_DEFAULT_REFS[1], shading),
+        resolveSlotDefaultMaterial(ROOF_DEFAULT_REFS[2], shading),
+        resolveSlotDefaultMaterial(ROOF_DEFAULT_REFS[3], shading),
+    ];
     const topMaterial = createResolvedMaterial(top.material, top.materialPreset, shading);
     const edgeMaterial = createResolvedMaterial(edge.material, edge.materialPreset, shading);
     const wallMaterial = createResolvedMaterial(wall.material, wall.materialPreset, shading);
     if (!(topMaterial || edgeMaterial || wallMaterial)) {
-        roofMaterialArrayCache.set(cacheKey, roleArray);
-        return roleArray;
+        roofMaterialArrayCache.set(cacheKey, defaultArray);
+        return defaultArray;
     }
-    // Each slot resolves to its own role only, then the themed default — never
+    // Each slot resolves to its own role only, then the declared default — never
     // another role. Cross-role fallback here used to splatter a single painted
     // surface (e.g. the edge) across the shingle and soffit slots. The legacy
     // catch-all still fills every role because `getEffectiveRoofSurfaceMaterial`
     // returns it for top/edge/wall alike.
     const materialArray = [
-        edgeMaterial ?? roofMaterial,
-        wallMaterial ?? ceilingMaterial,
-        wallMaterial ?? ceilingMaterial,
-        topMaterial ?? roofMaterial,
+        edgeMaterial ?? defaultArray[0],
+        wallMaterial ?? defaultArray[1],
+        wallMaterial ?? defaultArray[2],
+        topMaterial ?? defaultArray[3],
     ];
     roofMaterialArrayCache.set(cacheKey, materialArray);
     return materialArray;

package/dist/systems/roof/roof-system.d.ts

@@ -1,4 +1,4 @@
-import { type RoofSegmentNode } from '@pascal-app/core';
+import { type AnyNode, type RoofSegmentNode } from '@pascal-app/core';
 import * as THREE from 'three';
 import { Brush } from 'three-bvh-csg';
 export declare const RoofSystem: () => null;
@@ -17,18 +17,30 @@ export declare const roofCsgDummyMats: [
     THREE.MeshBasicMaterial
 ];
 export declare const ROOF_MATERIAL_SLOT_COUNT = 4;
+type RoofSegmentBrushSet = {
+    deckSlab: Brush;
+    shinSlab: Brush;
+    wallBrush: Brush;
+    innerBrush: Brush;
+    rakeBoards: THREE.BufferGeometry | null;
+};
 export declare function mapRoofGroupMaterialIndex(groupMaterialIndex: number | undefined, csgMaterials: THREE.Material[], matToIndex: Map<THREE.Material, number>): number;
+/**
+ * Subtract a segment's trim cuts from an arbitrary segment-local geometry,
+ * returning the clipped result. The input geometry is consumed (disposed) on
+ * each successful CSG pass — callers that need to keep the original must pass a
+ * clone. Returns the input untouched when the segment has no trim. Used
+ * internally for rake-board / end-slope attachments and exported so roof
+ * accessories (chimney, vents, skylight, …) can clip their own meshes by the
+ * same trim, in the same segment-local frame.
+ */
+export declare function clipGeometryBySegmentTrim(geometry: THREE.BufferGeometry | null, segment: RoofSegmentNode): THREE.BufferGeometry | null;
 /**
  * Generate complete hollow-shell geometry for a roof segment.
  * Ports the prototype's CSG approach using three-bvh-csg.
  */
-export declare function getRoofSegmentBrushes(node: RoofSegmentNode): {
-    deckSlab: Brush;
-    shinSlab: Brush;
-    wallBrush: Brush;
-    innerBrush: Brush;
-} | null;
-export declare function generateRoofSegmentGeometry(node: RoofSegmentNode): THREE.BufferGeometry;
+export declare function getRoofSegmentBrushes(node: RoofSegmentNode): RoofSegmentBrushSet | null;
+export declare function generateRoofSegmentGeometry(node: RoofSegmentNode, nodes?: Record<string, AnyNode>): THREE.BufferGeometry;
 export declare function remapRoofShellFaces(geometry: THREE.BufferGeometry, node: RoofSegmentNode): void;
 export type SurfaceFrame = {
     point: THREE.Vector3;
@@ -40,4 +52,5 @@ export type SurfaceFrame = {
  * to the true roof surface even on multi-slope roofs (gambrel/mansard/dutch).
  */
 export declare function getRoofOuterSurfaceFrameAtPoint(segment: RoofSegmentNode, lx: number, lz: number): SurfaceFrame;
+export {};
 //# sourceMappingURL=roof-system.d.ts.map

package/dist/systems/roof/roof-system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"roof-system.d.ts","sourceRoot":"","sources":["../../../src/systems/roof/roof-system.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,eAAe,EAKrB,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAY,KAAK,EAA0B,MAAM,eAAe,CAAA;AA0DvE,eAAO,MAAM,UAAU,YAmItB,CAAA;AA8PD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE;IAC7B,KAAK,CAAC,iBAAiB;IACvB,KAAK,CAAC,iBAAiB;IACvB,KAAK,CAAC,iBAAiB;IACvB,KAAK,CAAC,iBAAiB;CAMxB,CAAA;AAID,eAAO,MAAM,wBAAwB,IAAI,CAAA;AAEzC,wBAAgB,yBAAyB,CACvC,kBAAkB,EAAE,MAAM,GAAG,SAAS,EACtC,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAC9B,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,GACtC,MAAM,CAuBR;AAaD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,eAAe,GACpB;IAAE,QAAQ,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC;IAAC,SAAS,EAAE,KAAK,CAAC;IAAC,UAAU,EAAE,KAAK,CAAA;CAAE,GAAG,IAAI,CAmQlF;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,eAAe,GAAG,KAAK,CAAC,cAAc,CAmDvF;AAcD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,eAAe,QAyExF;AAwWD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAA;IACpB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,eAAe,EACxB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACT,YAAY,CA6Kd"}
+{"version":3,"file":"roof-system.d.ts","sourceRoot":"","sources":["../../../src/systems/roof/roof-system.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EAcZ,KAAK,eAAe,EAKrB,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAY,KAAK,EAA0B,MAAM,eAAe,CAAA;AAwIvE,eAAO,MAAM,UAAU,YAuItB,CAAA;AAmXD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE;IAC7B,KAAK,CAAC,iBAAiB;IACvB,KAAK,CAAC,iBAAiB;IACvB,KAAK,CAAC,iBAAiB;IACvB,KAAK,CAAC,iBAAiB;CAMxB,CAAA;AAID,eAAO,MAAM,wBAAwB,IAAI,CAAA;AAEzC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAA;IACf,QAAQ,EAAE,KAAK,CAAA;IACf,SAAS,EAAE,KAAK,CAAA;IAChB,UAAU,EAAE,KAAK,CAAA;IACjB,UAAU,EAAE,KAAK,CAAC,cAAc,GAAG,IAAI,CAAA;CACxC,CAAA;AA0FD,wBAAgB,yBAAyB,CACvC,kBAAkB,EAAE,MAAM,GAAG,SAAS,EACtC,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAC9B,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,GACtC,MAAM,CAuBR;AAgUD;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,KAAK,CAAC,cAAc,GAAG,IAAI,EACrC,OAAO,EAAE,eAAe,GACvB,KAAK,CAAC,cAAc,GAAG,IAAI,CAyB7B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,eAAe,GAAG,mBAAmB,GAAG,IAAI,CA+SvF;AAED,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,eAAe,EACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,KAAK,CAAC,cAAc,CAsFtB;AAsLD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,eAAe,QA2ExF;AAijBD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAA;IACpB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,eAAe,EACxB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACT,YAAY,CAqLd"}