@pascal-app/viewer 1.0.6 → 1.1.0

package/dist/components/viewer/selection-callout.js

@@ -0,0 +1,197 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { emitter, usePascalI18n, } from '@pascal-app/core';
+import { Html } from '@react-three/drei';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Box3, Vector3 } from 'three';
+function resolve(i18n, text) {
+    return typeof text === 'string' ? text : i18n._(text);
+}
+const opens = (icon) => icon === 'door' || icon === 'window' || icon === 'shutters';
+const STEM_MIN = 64;
+const STEM_MAX = 104;
+const EDGE = 16;
+const _box = new Box3();
+const _world = new Vector3();
+const _ndc = new Vector3();
+/**
+ * The selected element's label: a dot on it, a hairline rising from the dot,
+ * then its name, a detail line, its controls and a close button. It follows
+ * the element's world point each frame rather than living inside its object:
+ * kinds that rebuild their children (a window opening) would drop it.
+ */
+export function SelectionCallout({ object, anchor: anchorProp, title, subtitle, actions, onDismiss, }) {
+    const camera = useThree((state) => state.camera);
+    const size = useThree((state) => state.size);
+    const rootRef = useRef(null);
+    const copyRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const i18n = usePascalI18n();
+    const deselect = i18n._({ id: 'viewer.callout.deselect', message: 'Deselect' });
+    // The dot sits at the centre of the element's bounds, in its own space.
+    const anchor = useMemo(() => {
+        if (anchorProp)
+            return anchorProp;
+        object.updateWorldMatrix(true, true);
+        _box.setFromObject(object);
+        if (_box.isEmpty())
+            return new Vector3();
+        return object.worldToLocal(_box.getCenter(new Vector3()));
+    }, [object, anchorProp]);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => setVisible(true));
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    // Escape deselects, as the close button does.
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key === 'Escape')
+                onDismiss();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [onDismiss]);
+    const copyHeight = useRef(0);
+    useLayoutEffect(() => {
+        const copy = copyRef.current;
+        if (!copy)
+            return;
+        const observer = new ResizeObserver(() => {
+            copyHeight.current = copy.offsetHeight;
+        });
+        observer.observe(copy);
+        copyHeight.current = copy.offsetHeight;
+        return () => observer.disconnect();
+    }, []);
+    // Stem height and side follow the canvas: the copy flips left near the right
+    // edge and hangs below the dot near the top.
+    useFrame(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const stem = Math.max(copyHeight.current + 12, Math.min(STEM_MAX, Math.max(STEM_MIN, size.height * 0.12)));
+        _ndc.copy(object.localToWorld(_world.copy(anchor))).project(camera);
+        const x = ((_ndc.x + 1) / 2) * size.width;
+        const y = ((1 - _ndc.y) / 2) * size.height;
+        const width = copyRef.current?.offsetWidth ?? 0;
+        root.style.setProperty('--callout-stem', `${stem}px`);
+        root.dataset.left = String(x + 12 + width > size.width - EDGE);
+        root.dataset.below = String(y - stem < EDGE);
+    });
+    // Drei places the label from its own group: move that group onto the
+    // element's anchor first, so projection and the behind-camera test agree.
+    const calculatePosition = useCallback((el, view, viewport) => {
+        object.localToWorld(_world.copy(anchor));
+        el.position.copy(el.parent ? el.parent.worldToLocal(_world) : _world);
+        el.updateWorldMatrix(false, false);
+        _ndc.setFromMatrixPosition(el.matrixWorld).project(view);
+        return [((_ndc.x + 1) / 2) * viewport.width, ((1 - _ndc.y) / 2) * viewport.height];
+    }, [object, anchor]);
+    return (_jsxs(Html, { calculatePosition: calculatePosition, pointerEvents: "none", zIndexRange: [20, 0], children: [_jsx("style", { children: CALLOUT_CSS }), _jsxs("div", { className: "pascal-callout", "data-visible": visible, ref: rootRef, children: [_jsx("span", { "aria-hidden": "true", className: "pascal-callout-pin" }), _jsx("span", { "aria-hidden": "true", className: "pascal-callout-leader" }), _jsxs("div", { className: "pascal-callout-copy", onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onPointerUp: (event) => event.stopPropagation(), ref: copyRef, children: [_jsx("strong", { children: title }), subtitle ? (_jsx("span", { className: "pascal-callout-detail", children: resolve(i18n, subtitle) })) : null, _jsxs("div", { className: "pascal-callout-actions", children: [actions.map((action) => action.kind === 'toggle' ? (_jsx(ToggleAction, { action: action }, action.key)) : (_jsx(RangeAction, { action: action }, action.key))), _jsx("button", { "aria-label": deselect, className: "pascal-callout-dismiss", onClick: onDismiss, title: deselect, type: "button", children: _jsx(CalloutGlyph, { icon: "close", on: false }) })] })] })] })] }));
+}
+function ToggleAction({ action }) {
+    const i18n = usePascalI18n();
+    const text = action.text
+        ? resolve(i18n, action.text)
+        : i18n._({
+            id: 'viewer.callout.state',
+            message: '{state, select, open {Open} closed {Closed} on {On} other {Off}}',
+            values: {
+                state: opens(action.icon) ? (action.on ? 'open' : 'closed') : action.on ? 'on' : 'off',
+            },
+        });
+    const label = action.icon === 'shutters'
+        ? i18n._({
+            id: 'viewer.callout.shuttersAction',
+            message: '{action, select, close {Close the shutters of {name}} other {Open the shutters of {name}}}',
+            values: { action: action.on ? 'close' : 'open', name: action.name },
+        })
+        : i18n._({
+            id: 'viewer.callout.action',
+            message: '{action, select, open {Open {name}} close {Close {name}} on {Turn on {name}} other {Turn off {name}}}',
+            values: {
+                action: opens(action.icon) ? (action.on ? 'close' : 'open') : action.on ? 'off' : 'on',
+                name: action.text ? resolve(i18n, action.text) : action.name,
+            },
+        });
+    return (_jsxs("button", { "aria-label": label, "aria-pressed": action.on, className: "pascal-callout-action", "data-control": action.text ? 'named' : opens(action.icon) ? 'opening' : 'toggle', onClick: () => {
+            if (!action.on)
+                emitter.emit('interaction:sound', action.sound.on);
+            const settled = action.toggle();
+            if (action.on)
+                playClosing(action, settled);
+        }, title: label, type: "button", children: [_jsx(CalloutGlyph, { icon: action.icon, on: action.on }), _jsx("span", { children: text })] }));
+}
+/**
+ * A door, window or cabinet door swings shut, then latches as it lands
+ * (shutters and drawers just land); anything without a known end sounds at once.
+ */
+function playClosing(action, settled) {
+    // A garage door's motor runs the whole way, so it starts with the press.
+    if (!settled || action.sound.off === 'garage') {
+        emitter.emit('interaction:sound', action.sound.off);
+        return;
+    }
+    if (action.sound.swing)
+        emitter.emit('interaction:sound', action.sound.swing);
+    void settled.then(() => emitter.emit('interaction:sound', action.sound.off));
+}
+function RangeAction({ action }) {
+    return (_jsxs("label", { className: "pascal-callout-action pascal-callout-range", children: [_jsxs("span", { children: [action.label, " ", action.value, action.unit ?? ''] }), _jsx("input", { "aria-label": action.label, max: action.max, min: action.min, onChange: (event) => action.onChange(Number(event.target.value)), step: action.step, type: "range", value: action.value })] }));
+}
+function Svg({ children }) {
+    return (_jsx("svg", { "aria-hidden": "true", fill: "none", focusable: "false", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, viewBox: "0 0 24 24", children: children }));
+}
+function CalloutGlyph({ icon, on }) {
+    switch (icon) {
+        case 'light':
+            return (_jsxs(Svg, { children: [_jsx("path", { d: "M9 18h6m-5 3h4M8 13a6 6 0 1 1 8 0c-1.2 1-1 2-1 2H9s.2-1-1-2Z" }), on ? (_jsx("path", { d: "M12 1v1M3 4l1 1m16-1-1 1M1 10h1m20 0h-1" })) : (_jsx("path", { d: "m3 3 18 18", opacity: ".6" }))] }));
+        case 'fan':
+            return (_jsxs(Svg, { children: [_jsx("circle", { cx: "12", cy: "12", r: "2" }), _jsx("path", { d: "M10.5 10.5C6 5 10 1 13 3c2 2 0 5-1 7M14 11c6-2 9 3 6 5-2 2-5-1-7-3M11.5 14c-1 6-7 6-8 3-1-3 4-4 7-4" }), on ? null : _jsx("path", { d: "m3 3 18 18", opacity: ".6" })] }));
+        case 'window':
+            return (_jsx(Svg, { children: _jsx("path", { d: on
+                        ? 'M3 3h18v18H3ZM3 12h10M13 3v18m0-14 6-2v14l-6-2'
+                        : 'M3 3h18v18H3ZM12 3v18M3 12h18' }) }));
+        case 'door':
+            return (_jsx(Svg, { children: _jsx("path", { d: on ? 'M3 21h18M5 21V3h14v18M5 3l9 3v15M11 12v2' : 'M3 21h18M5 21V3h14v18M15 12h1' }) }));
+        case 'shutters':
+            return (_jsx(Svg, { children: on ? (_jsxs(_Fragment, { children: [_jsx("rect", { height: "16", rx: "1", width: "8", x: "8", y: "4" }), _jsx("path", { d: "M8 4 3 6v12l5 2M16 4l5 2v12l-5 2" })] })) : (_jsxs(_Fragment, { children: [_jsx("rect", { height: "18", rx: "1", width: "16", x: "4", y: "3" }), _jsx("path", { d: "M12 3v18M7 8h2M7 12h2M7 16h2M15 8h2M15 12h2M15 16h2" })] })) }));
+        case 'close':
+            return (_jsx(Svg, { children: _jsx("path", { d: "m6 6 12 12M6 18 18 6" }) }));
+        default:
+            return (_jsx(Svg, { children: _jsx("path", { d: "M12 2v9m-5-7a9 9 0 1 0 10 0" }) }));
+    }
+}
+// The marketing house's callout at dusk: light ink on a dark halo reads over
+// any scene; only the controls get a surface.
+const CALLOUT_CSS = `
+.pascal-callout { --callout-ink:#f1f2f4; --callout-secondary:#e0e3e8; --callout-halo:#000000e0; --callout-halo-soft:#00000080; --callout-control:#24272d70; --callout-active:#e7e9ee2b; position:absolute; width:0; height:0; pointer-events:none; user-select:none; color:var(--callout-ink); text-shadow:0 0 2px var(--callout-halo), 0 1px 6px var(--callout-halo-soft); opacity:0; transition:opacity 70ms ease; }
+.pascal-callout[data-visible="true"] { opacity:1; transition-duration:0ms; }
+.pascal-callout-pin { position:absolute; left:-2px; top:-2px; width:4px; height:4px; border-radius:50%; background:currentColor; box-shadow:0 0 2px var(--callout-halo); opacity:.8; }
+.pascal-callout-leader { position:absolute; left:0; bottom:0; width:1px; height:var(--callout-stem, 100px); background:currentColor; box-shadow:0 0 2px var(--callout-halo); opacity:.48; transform:scaleY(0); transform-origin:bottom; transition:transform 100ms cubic-bezier(.22,1,.36,1); }
+.pascal-callout[data-visible="true"] .pascal-callout-leader { transform:scaleY(1); }
+.pascal-callout-copy { position:absolute; left:12px; bottom:var(--callout-stem, 100px); width:max-content; transform:translateY(100%); pointer-events:auto; }
+.pascal-callout-copy strong { display:block; max-width:min(220px, calc(100vw - 32px)); font-size:15px; line-height:1.3; font-weight:550; letter-spacing:-.015em; }
+.pascal-callout-detail { display:block; max-width:min(220px, calc(100vw - 32px)); margin-top:4px; font-size:11px; line-height:1.3; letter-spacing:.025em; font-variant-numeric:tabular-nums; color:var(--callout-secondary); }
+.pascal-callout[data-left="true"] .pascal-callout-copy { left:auto; right:12px; text-align:right; }
+.pascal-callout[data-left="true"] .pascal-callout-copy strong, .pascal-callout[data-left="true"] .pascal-callout-detail { margin-left:auto; }
+.pascal-callout[data-left="true"] .pascal-callout-actions { justify-content:flex-end; }
+.pascal-callout[data-below="true"] .pascal-callout-leader { bottom:auto; top:0; transform-origin:top; }
+.pascal-callout[data-below="true"] .pascal-callout-copy { bottom:auto; top:var(--callout-stem, 100px); transform:translateY(-100%); }
+.pascal-callout-actions { display:flex; flex-wrap:nowrap; gap:6px; margin-top:9px; align-items:center; }
+.pascal-callout-actions button, .pascal-callout-range { min-width:44px; height:44px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--callout-ink); font:inherit; font-size:10px; border:1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius:22px; background:var(--callout-control); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); text-shadow:0 0 2px var(--callout-halo), 0 1px 6px var(--callout-halo-soft); cursor:pointer; touch-action:manipulation; white-space:nowrap; }
+.pascal-callout-actions button[aria-pressed="true"] { background:var(--callout-active); }
+.pascal-callout-actions button:active { transform:scale(.96); }
+.pascal-callout-actions button:focus-visible { outline:2px solid var(--callout-ink); outline-offset:3px; }
+.pascal-callout-actions svg { width:18px; height:18px; flex:none; filter:drop-shadow(0 0 2px var(--callout-halo)); }
+.pascal-callout-action > span { display:inline-block; text-align:left; }
+.pascal-callout-action[data-control="toggle"] > span { width:1.7em; }
+.pascal-callout-action[data-control="opening"] > span { width:3.4em; }
+.pascal-callout-actions .pascal-callout-dismiss { padding:0; background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
+.pascal-callout-range { cursor:default; }
+.pascal-callout-range > span { font-variant-numeric:tabular-nums; }
+.pascal-callout-range input { width:96px; accent-color:var(--callout-ink); }
+@media (max-width:760px) { .pascal-callout-copy strong, .pascal-callout-detail { max-width:160px; } .pascal-callout-copy strong { font-size:14px; } }
+@media (prefers-reduced-motion: reduce) { .pascal-callout, .pascal-callout-leader { transition:none; } }
+`;

package/dist/components/viewer/unsupported-gpu-fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unsupported-gpu-fallback.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/unsupported-gpu-fallback.tsx"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,gCAY3C"}
+{"version":3,"file":"unsupported-gpu-fallback.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/unsupported-gpu-fallback.tsx"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,gCAsC3C"}

package/dist/components/viewer/unsupported-gpu-fallback.js

@@ -1,4 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function UnsupportedGpuViewerFallback() {
-    return (_jsx("div", { className: "flex h-full min-h-64 w-full items-center justify-center bg-[#fafafa] p-6 text-center text-neutral-900", children: _jsxs("div", { className: "max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm", children: [_jsx("h2", { className: "font-semibold text-lg", children: "3D viewer unavailable" }), _jsx("p", { className: "mt-2 text-neutral-600 text-sm", children: "This browser or environment could not initialize WebGPU or WebGL, so Pascal cannot render the 3D scene here. Try opening the editor in a browser with hardware acceleration enabled." })] }) }));
+    return (_jsx("div", { style: {
+            display: 'flex',
+            height: '100%',
+            minHeight: 256,
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: '#fafafa',
+            padding: 24,
+            textAlign: 'center',
+            color: '#171717',
+            boxSizing: 'border-box',
+        }, children: _jsxs("div", { style: {
+                maxWidth: 448,
+                boxSizing: 'border-box',
+                borderRadius: 16,
+                border: '1px solid #e5e5e5',
+                background: 'white',
+                padding: 24,
+                boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+            }, children: [_jsx("h2", { style: { margin: 0, fontWeight: 600, fontSize: 18, lineHeight: '28px' }, children: "3D viewer unavailable" }), _jsx("p", { style: { margin: '8px 0 0', color: '#525252', fontSize: 14, lineHeight: '20px' }, children: "This browser or environment could not initialize WebGPU or WebGL, so Pascal cannot render the 3D scene here. Try opening the editor in a browser with hardware acceleration enabled." })] }) }));
 }

package/dist/components/viewer/use-daylight-rooms.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Keeps the daylight room system in step with the scene: rebuilds rooms, portals and lamps
+ * after edits (debounced; uniforms and textures only, no recompiles), and every frame feeds it
+ * the live level heights, the camera, lamp switches and door openness.
+ */
+export declare function useDaylightRooms(): void;
+/** Whether a scene edit touched anything the rooms are built from (anything but furniture). Exported for tests. */
+export declare function roomInputsChanged(next: Readonly<Record<string, {
+    type: string;
+} | undefined>>, previous: Readonly<Record<string, {
+    type: string;
+} | undefined>>): boolean;
+//# sourceMappingURL=use-daylight-rooms.d.ts.map

package/dist/components/viewer/use-daylight-rooms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-daylight-rooms.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/use-daylight-rooms.ts"],"names":[],"mappings":"AAyCA;;;;GAIG;AACH,wBAAgB,gBAAgB,SAiI/B;AAuCD,mHAAmH;AACnH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,EAC5D,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,GAC/D,OAAO,CAcT"}

package/dist/components/viewer/use-daylight-rooms.js

@@ -0,0 +1,278 @@
+'use client';
+import { sceneRegistry, useInteractive, useScene } from '@pascal-app/core';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useRef } from 'react';
+import { Box3, Vector3 } from 'three';
+import { DEFAULT_TEXTURE_LIMIT } from '../../lib/daylight/room-map';
+import { bakedLevelObjects, bakedRoomScene, feedLamps, lampFeeds, liveDoorOpenness, liveLevelObjects, liveRoomScene, syncLampEmitters, } from '../../lib/daylight/room-scene';
+import { daylightRooms } from '../../lib/daylight/rooms';
+import { heldReasons } from '../../lib/scene-visibility';
+import useViewer from '../../store/use-viewer';
+/** Seconds between scene-change checks, and the quiet time before a rebuild. */
+const CHECK_INTERVAL = 0.5;
+const REBUILD_DELAY = 0.4;
+/** Longest wait for the scene to settle before building anyway (seconds). */
+const SETTLE_WAIT = 10;
+/**
+ * Furniture: what the rooms are built from (walls, slabs, ceilings, roofs, doors, windows,
+ * zones) never includes it, so moving or placing it doesn't rebuild them (a rebuild casts
+ * thousands of rays). A lamp among it is followed by its light's position instead.
+ */
+const FURNITURE_TYPES = new Set([
+    'item',
+    'procedural-item',
+    'imported-mesh',
+    'cabinet',
+    'cabinet-module',
+    'shelf',
+]);
+const LAMP_POSITION_STEP = 0.05;
+/**
+ * Keeps the daylight room system in step with the scene: rebuilds rooms, portals and lamps
+ * after edits (debounced; uniforms and textures only, no recompiles), and every frame feeds it
+ * the live level heights, the camera, lamp switches and door openness.
+ */
+export function useDaylightRooms() {
+    const scene = useThree((s) => s.scene);
+    const gl = useThree((s) => s.gl);
+    const nodesVersion = useRef(0);
+    const state = useRef({
+        signature: '',
+        pendingSince: -1,
+        sinceCheck: CHECK_INTERVAL,
+        /** Times the scene finished rebuilding geometry (no dirty nodes left), and whether it is now. */
+        settles: 0,
+        dirty: false,
+        dirtyRooms: false,
+        /** Dirty nodes left when rooms were last built mid-load (they rebuild as the count falls). */
+        builtDirty: Number.POSITIVE_INFINITY,
+        /** Level offsets last frame: rays are cast at stacked heights, so no build while levels move. */
+        offsets: [],
+        levelsMoved: false,
+        live: true,
+        bakedRoot: null,
+        levelObjects: [],
+    });
+    useEffect(() => useScene.subscribe((next, previous) => {
+        if (next.nodes !== previous.nodes && roomInputsChanged(next.nodes, previous.nodes))
+            nodesVersion.current++;
+    }), []);
+    useFrame(({ camera }, delta) => {
+        const s = state.current;
+        const lampDefault = useInteractive.getState().lampDefault;
+        s.sinceCheck += delta;
+        // Rooms are built from finished walls, windows and covers: wait for the scene to settle, and
+        // build again each time it does (walls and openings finish without a geometry revision).
+        const { dirtyNodes, nodes } = useScene.getState();
+        const dirty = dirtyNodes.size > 0;
+        if (dirty && !s.dirtyRooms)
+            for (const id of dirtyNodes) {
+                const type = nodes[id]?.type;
+                if (type && !FURNITURE_TYPES.has(type)) {
+                    s.dirtyRooms = true;
+                    break;
+                }
+            }
+        if (s.dirty && !dirty && s.dirtyRooms) {
+            s.settles++;
+            s.dirtyRooms = false;
+        }
+        s.dirty = dirty;
+        if (s.sinceCheck >= CHECK_INTERVAL) {
+            s.sinceCheck = 0;
+            // Items can swap their materials (edits, loads): keep the lamps' own emitters installed.
+            syncLampEmitters();
+            const live = (sceneRegistry.byType.zone?.size ?? 0) > 0;
+            const baked = live ? null : findBakedRoot(scene);
+            const feedKeys = feedSignature();
+            const signature = live
+                ? `live|${roomObjectsSignature()}|${nodesVersion.current}|${useViewer.getState().geometryRevision}|${s.settles}|${feedKeys}`
+                : `baked|${baked?.uuid ?? ''}|${baked?.children.length ?? 0}|${feedKeys}`;
+            if (signature !== s.signature) {
+                s.signature = signature;
+                s.pendingSince = 0;
+                s.live = live;
+                s.bakedRoot = baked;
+            }
+        }
+        if (s.pendingSince >= 0) {
+            s.pendingSince += delta;
+            const exploded = useViewer.getState().levelMode === 'exploded' || s.levelsMoved;
+            if (s.pendingSince >= REBUILD_DELAY &&
+                !exploded &&
+                (!(s.live && dirty) || s.pendingSince > SETTLE_WAIT)) {
+                s.pendingSince = -1;
+                const input = s.live
+                    ? liveRoomScene(lampDefault)
+                    : s.bakedRoot
+                        ? bakedRoomScene(s.bakedRoot, lampDefault)
+                        : null;
+                daylightRooms.map.textureLimit = textureLimit(gl);
+                daylightRooms.build(input ?? {
+                    bounds: emptyBounds,
+                    levels: [],
+                    zones: [],
+                    covers: [],
+                    walls: [],
+                    openings: [],
+                    lamps: feedLamps(),
+                    virtualLampsOn: lampDefault,
+                });
+                s.levelObjects = s.live ? liveLevelObjects() : bakedLevelObjects(s.bakedRoot);
+                // Built before the scene settled (a large scene still building walls and windows): build
+                // again after the next wait while geometry keeps arriving, so the rooms catch up.
+                if (s.live && dirty && dirtyNodes.size < s.builtDirty) {
+                    s.builtDirty = dirtyNodes.size;
+                    s.pendingSince = 0;
+                }
+                else if (!dirty)
+                    s.builtDirty = Number.POSITIVE_INFINITY;
+                flagGlassMaterials(scene);
+                syncLampEmitters();
+            }
+        }
+        // Live level heights (stacked / exploded motion), what is shown, and the camera.
+        const levels = daylightRooms.levels;
+        const offsets = s.levelObjects.map((object, index) => object ? object.getWorldPosition(scratch).y - (levels[index]?.y ?? 0) : 0);
+        s.levelsMoved = offsets.some((offset, index) => Math.abs(offset - (s.offsets[index] ?? offset)) > 1e-4);
+        s.offsets = offsets;
+        const shown = s.levelObjects.map((object) => !!object && presented(object));
+        const focus = selectedFocusLevel();
+        const selected = s.levelObjects.map((object) => !!object && object === focus);
+        daylightRooms.setLevelPresentation(offsets, shown, selected);
+        daylightRooms.cameraY.value = camera.position.y;
+        // Lamp switches (fed lamps by key; virtual lamps follow the time-of-day default) and doors.
+        const lit = litFeedKeys();
+        if (daylightRooms.setLampStates((lamp) => (lamp.itemId ? lit.has(lamp.itemId) : lampDefault)))
+            syncLampEmitters();
+        if (s.live)
+            daylightRooms.updateDoors(liveDoorOpenness);
+    });
+}
+const emptyBounds = new Box3();
+const scratch = new Vector3();
+/**
+ * Glass is a slot on the mesh, but shaders compile per material (shared by every pane): mark
+ * the material itself so the tuned glass applies whichever pane compiles it first.
+ */
+function flagGlassMaterials(scene) {
+    scene.traverse((object) => {
+        const mesh = object;
+        if (!mesh.isMesh || mesh.userData.slotId !== 'glass')
+            return;
+        for (const material of Array.isArray(mesh.material) ? mesh.material : [mesh.material]) {
+            if (!material || material.userData.isGlass)
+                continue;
+            material.userData.isGlass = true;
+            material.needsUpdate = true;
+        }
+    });
+}
+const feedPosition = new Vector3();
+/** The lamps fed to the rooms and where they stand (a moved lamp, or its host, rebuilds). */
+function feedSignature() {
+    let keys = '';
+    for (const feed of lampFeeds) {
+        for (const light of feed.lights()) {
+            keys += `${light.key}`;
+            if (light.getWorldPosition(feedPosition)) {
+                const q = (v) => Math.round(v / LAMP_POSITION_STEP);
+                keys += `@${q(feedPosition.x)},${q(feedPosition.y)},${q(feedPosition.z)}`;
+            }
+            keys += ';';
+        }
+    }
+    return keys;
+}
+/** Whether a scene edit touched anything the rooms are built from (anything but furniture). Exported for tests. */
+export function roomInputsChanged(next, previous) {
+    for (const id in next) {
+        const node = next[id];
+        const before = previous[id];
+        if (node === before || FURNITURE_TYPES.has((node ?? before)?.type ?? ''))
+            continue;
+        // A level (or any container) whose child list alone changed: what joined or left it shows up
+        // as its own change, so furniture re-parenting under it doesn't rebuild the rooms.
+        if (node && before && onlyChildrenDiffer(node, before))
+            continue;
+        return true;
+    }
+    for (const id in previous) {
+        if (!(id in next) && !FURNITURE_TYPES.has(previous[id]?.type ?? ''))
+            return true;
+    }
+    return false;
+}
+function onlyChildrenDiffer(a, b) {
+    const x = a;
+    const y = b;
+    for (const key in x)
+        if (key !== 'children' && x[key] !== y[key])
+            return false;
+    for (const key in y)
+        if (key !== 'children' && !(key in x))
+            return false;
+    return true;
+}
+/** The registered objects the rooms are built from: changes when one mounts, unmounts or is replaced. */
+function roomObjectsSignature() {
+    let count = 0;
+    let ids = 0;
+    for (const [type, set] of Object.entries(sceneRegistry.byType)) {
+        if (FURNITURE_TYPES.has(type))
+            continue;
+        for (const id of set) {
+            const object = sceneRegistry.nodes.get(id);
+            count++;
+            if (object)
+                ids += object.id;
+        }
+    }
+    return `${count}:${ids}`;
+}
+function litFeedKeys() {
+    const lit = new Set();
+    for (const feed of lampFeeds)
+        for (const light of feed.lights())
+            if (feed.intensity(light) > 0)
+                lit.add(light.key);
+    return lit;
+}
+/** The baked artifact's root (the first object carrying export identities), if any. */
+function findBakedRoot(scene) {
+    let found = null;
+    scene.traverse((object) => {
+        if (found)
+            return;
+        const kind = object.userData.kind;
+        if (kind === 'site' || kind === 'building' || kind === 'level')
+            found = object.parent ?? object;
+    });
+    return found;
+}
+/**
+ * On screen: visible through every ancestor (hidden levels are switched off on their group) and
+ * not drawn for shadows only (levels hidden above the selection keep shadowing it).
+ */
+function presented(object) {
+    for (let x = object; x; x = x.parent)
+        if (!x.visible)
+            return false;
+    return !heldReasons(object)?.has('shadow-only');
+}
+/** The selected level when the levels over it are hidden (solo, or hide-above), else null. */
+function selectedFocusLevel() {
+    const viewer = useViewer.getState();
+    const hidesAbove = viewer.levelMode === 'solo' || viewer.hideLevelsAboveSelection;
+    const levelId = viewer.selection.levelId;
+    if (!hidesAbove || !levelId)
+        return null;
+    return sceneRegistry.nodes.get(levelId) ?? null;
+}
+/** The device's largest 2D texture side (WebGPU device limits, or the WebGL context's). */
+function textureLimit(gl) {
+    const backend = gl.backend;
+    const limit = backend?.device?.limits?.maxTextureDimension2D ??
+        backend?.gl?.getParameter(backend.gl.MAX_TEXTURE_SIZE);
+    return limit && limit > 0 ? limit : DEFAULT_TEXTURE_LIMIT;
+}

package/dist/components/viewer/viewer-camera.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewer-camera.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/viewer-camera.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAOnC,wBAAgB,2BAA2B,CAAC,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAWxF;AAcD,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,OAAO;;;EAExD;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,sBAAsB,IAAI,IAAI,CAAA;CAAE,EACrE,WAAW,EAAE,OAAO,QAMrB;AAED,wBAAgB,8BAA8B,CAAC,MAAM,EAAE;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ,sBAAsB,IAAI,IAAI,CAAA;CAC/B,cASA;AAED,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,WAEnF;AAED,eAAO,MAAM,YAAY,oBAA6B;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,gCAqB9E,CAAA"}
+{"version":3,"file":"viewer-camera.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/viewer-camera.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAYnC,wBAAgB,2BAA2B,CAAC,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAWxF;AAcD,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,OAAO;;;EAExD;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,sBAAsB,IAAI,IAAI,CAAA;CAAE,EACrE,WAAW,EAAE,OAAO,QAMrB;AAED,wBAAgB,8BAA8B,CAAC,MAAM,EAAE;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ,sBAAsB,IAAI,IAAI,CAAA;CAC/B,cASA;AAED,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,WAEnF;AAED,eAAO,MAAM,YAAY,oBAA6B;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,gCA4B9E,CAAA"}

package/dist/components/viewer/viewer-camera.js

@@ -2,9 +2,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { OrthographicCamera, PerspectiveCamera } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { useEffect } from 'react';
+import { isDaylightAtmosphere } from '../../lib/daylight/look';
 import { GRID_LAYER, OVERLAY_LAYER, ZONE_LAYER } from '../../lib/layers';
 import useViewer from '../../store/use-viewer';
+import { useSceneAtmosphere } from './scene-atmosphere';
 import { useSceneGroundReplacement } from './scene-ground-replacement';
+/** Far plane of the daylight look (its ground fades into the sky by 2.6 km). */
+const DAYLIGHT_FAR = 6000;
 const IMMERSIVE_XR_VISIBLE_LAYERS = [OVERLAY_LAYER, ZONE_LAYER, GRID_LAYER];
 export function enableImmersiveXRViewLayers(cameraLayers, raycasterLayers) {
     const cameraMask = cameraLayers.mask;
@@ -53,6 +57,13 @@ export function viewerUsesPerspectiveCamera(cameraMode, immersiveXR) {
 export const ViewerCamera = ({ immersiveXR = false }) => {
     const cameraMode = useViewer((state) => state.cameraMode);
     const clipping = viewerCameraClipping(immersiveXR);
-    const far = useSceneGroundReplacement() ? 20_000 : clipping.far;
+    const groundReplaced = useSceneGroundReplacement();
+    // The daylight look's ground runs to the horizon: see it out to where it meets the sky.
+    const daylight = isDaylightAtmosphere(useSceneAtmosphere());
+    const far = groundReplaced
+        ? 20_000
+        : daylight
+            ? Math.max(clipping.far, DAYLIGHT_FAR)
+            : clipping.far;
     return (_jsxs(_Fragment, { children: [viewerUsesPerspectiveCamera(cameraMode, immersiveXR) ? (_jsx(PerspectiveCamera, { far: far, fov: 50, makeDefault: true, near: clipping.near, position: [10, 10, 10] })) : (_jsx(OrthographicCamera, { far: 1000, makeDefault: true, near: -1000, position: [10, 10, 10], zoom: 20 })), _jsx(ImmersiveXRViewLayers, { enabled: immersiveXR })] }));
 };

package/dist/hooks/use-gltf-ktx2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-gltf-ktx2.d.ts","sourceRoot":"","sources":["../../src/hooks/use-gltf-ktx2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAM3C,QAAA,MAAM,WAAW,SAAU,MAAM,KAAG,UAAU,CAAC,OAAO,OAAO,CAQ5D,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"use-gltf-ktx2.d.ts","sourceRoot":"","sources":["../../src/hooks/use-gltf-ktx2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAO3C,QAAA,MAAM,WAAW,SAAU,MAAM,KAAG,UAAU,CAAC,OAAO,OAAO,CAQ5D,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/hooks/use-gltf-ktx2.js

@@ -3,9 +3,10 @@ import { useThree } from '@react-three/fiber';
 import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
 import { preserveGltfUnlit } from '../lib/gltf-unlit';
 import { configureKtx2Support } from '../lib/ktx2-loader';
+import { getViewerConfig } from '../lib/viewer-config';
 const useGLTFKTX2 = (path) => {
     const gl = useThree((state) => state.gl);
-    return useGLTF(path, true, true, (loader) => {
+    return useGLTF(path, getViewerConfig().decoders.dracoPath, true, (loader) => {
         loader.register(preserveGltfUnlit);
         configureKtx2Support(loader, gl);
         loader.setMeshoptDecoder(MeshoptDecoder);