@pascal-app/viewer 1.1.0 → 1.1.1

package/dist/ui/components/rooms/viewer-rooms.d.ts

@@ -0,0 +1,14 @@
+import { type ViewerSource } from '../../lib/viewer-selection';
+/**
+ * Rooms on every viewer surface, as the editor shows them: the room pills on
+ * the current floor while nothing but the floor is selected, the room
+ * highlight on the selected or hovered room (or a focused unit's rooms), and
+ * the selected room's callout. Zones draw no tinted volume here, and their
+ * meshes are not mounted at all, so they never catch a click.
+ */
+export declare function ViewerRooms({ source }: {
+    source: ViewerSource;
+}): import("react").JSX.Element;
+/** `ViewerRooms` over the parametric scene store. */
+export declare function ParametricViewerRooms(): import("react").JSX.Element;
+//# sourceMappingURL=viewer-rooms.d.ts.map

package/dist/ui/components/rooms/viewer-rooms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-rooms.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/rooms/viewer-rooms.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAEL,KAAK,YAAY,EAGlB,MAAM,4BAA4B,CAAA;AAanC;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,+BAqI/D;AAsCD,qDAAqD;AACrD,wBAAgB,qBAAqB,gCAIpC"}

package/dist/ui/components/rooms/viewer-rooms.js

@@ -0,0 +1,123 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildUnitReport, polygonInteriorPoint, roomFloorElevation, sceneRegistry, useLocale, usePascalI18n, useScene, } from '@pascal-app/core';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Vector3 } from 'three';
+import { useShallow } from 'zustand/react/shallow';
+import { SelectionCallout } from '../../../components/viewer/selection-callout';
+import useViewer from '../../../store/use-viewer';
+import { formatRoomArea } from '../../lib/room-area';
+import { resolveRoomAssemblyHeights } from '../../lib/room-assembly-overlay';
+import { describeZoneOutline } from '../../lib/room-selection';
+import { selectViewerRoom, viewerRooms, zoneLabel, } from '../../lib/viewer-selection';
+import { RoomAssemblyMesh } from './room-highlight';
+import { RoomLabelAnchor3D, RoomPillChip, RoomPillDetail, RoomPillsLayer3D, roomLabelEntries, roomLabelsVisible, useFadePresence, } from './room-labels';
+/**
+ * Rooms on every viewer surface, as the editor shows them: the room pills on
+ * the current floor while nothing but the floor is selected, the room
+ * highlight on the selected or hovered room (or a focused unit's rooms), and
+ * the selected room's callout. Zones draw no tinted volume here, and their
+ * meshes are not mounted at all, so they never catch a click.
+ */
+export function ViewerRooms({ source }) {
+    const i18n = usePascalI18n();
+    useEffect(() => {
+        const before = useViewer.getState().showZones;
+        useViewer.getState().setShowZones(false);
+        return () => useViewer.getState().setShowZones(before);
+    }, []);
+    const { levelId, zoneId, selectedIds } = useViewer(useShallow((s) => ({
+        levelId: s.selection.levelId,
+        zoneId: s.selection.zoneId,
+        selectedIds: s.selection.selectedIds,
+    })));
+    const focusedUnitId = useViewer((s) => s.focusedUnitId);
+    const hoveredId = useViewer((s) => s.hoveredId);
+    const walkthrough = useViewer((s) => s.walkthroughMode);
+    const { nodes } = source;
+    const pillsShown = !!levelId &&
+        !walkthrough &&
+        roomLabelsVisible({
+            zoneId,
+            focusedUnitId,
+            selectedTypes: selectedIds.map((id) => nodes[id]?.type),
+        });
+    // The layer stays mounted through its fade-out.
+    const pillsPresent = useFadePresence(pillsShown);
+    const rooms = useMemo(() => (levelId ? viewerRooms(levelId, nodes) : []), [levelId, nodes]);
+    const entries = useMemo(() => {
+        if (!levelId)
+            return [];
+        const zones = Object.values(nodes).filter((node) => node.type === 'zone' && node.parentId === levelId && node.visible !== false);
+        return roomLabelEntries(rooms.filter((room) => nodes[room.zoneId]?.visible !== false), zones);
+    }, [levelId, nodes, rooms]);
+    const highlighted = useMemo(() => {
+        if (walkthrough)
+            return [];
+        const ids = new Set();
+        if (zoneId)
+            ids.add(zoneId);
+        if (hoveredId && nodes[hoveredId]?.type === 'zone')
+            ids.add(hoveredId);
+        const unit = focusedUnitId ? nodes[focusedUnitId] : undefined;
+        if (unit?.type === 'unit') {
+            for (const member of buildUnitReport(unit, nodes).members)
+                if (member.levelId === levelId)
+                    ids.add(member.zoneId);
+        }
+        return [...ids].flatMap((id) => {
+            const zone = nodes[id];
+            if (zone?.type !== 'zone' || !zone.parentId)
+                return [];
+            const detected = viewerRooms(zone.parentId, nodes).find((room) => room.zoneId === id);
+            return [detected ?? describeZoneOutline(zone.parentId, zone)];
+        });
+    }, [focusedUnitId, hoveredId, levelId, nodes, walkthrough, zoneId]);
+    return (_jsxs(_Fragment, { children: [pillsPresent && levelId ? (_jsx(RoomPillsLayer3D, { entries: entries, levelObject: () => source.objectFor(levelId), renderDetail: (entry) => {
+                    const zone = nodes[entry.zoneId];
+                    if (zone?.type !== 'zone')
+                        return null;
+                    return (_jsx(RoomPillDetail, { areaM2: entry.area, color: zone.color, name: zoneLabel(zone, i18n), view: "3d", zoneId: zone.id }));
+                }, renderLabel: (entry, anchors, elements) => {
+                    const zone = nodes[entry.zoneId];
+                    if (zone?.type !== 'zone')
+                        return null;
+                    return (_jsx(RoomLabelAnchor3D, { anchors: anchors, entry: entry, floorY: roomFloorElevation(nodes, entry.zoneId), children: _jsx(RoomPillChip, { areaM2: entry.area, color: zone.color, elements: elements, name: zoneLabel(zone, i18n), onClick: () => selectViewerRoom(zone.id, source), onHover: () => useViewer.getState().setHoveredId(zone.id), onLeave: () => {
+                                if (useViewer.getState().hoveredId === zone.id)
+                                    useViewer.getState().setHoveredId(null);
+                            }, view: "3d", zoneId: zone.id }) }));
+                }, shown: pillsShown }, levelId)) : null, highlighted.map((room) => (_jsx(ViewerRoomHighlight, { room: room, source: source }, room.zoneId))), zoneId && levelId && !walkthrough && selectedIds.length === 0
+                ? (() => {
+                    const entry = entries.find((candidate) => candidate.zoneId === zoneId);
+                    const zone = nodes[zoneId];
+                    const level = source.objectFor(levelId);
+                    return entry && zone?.type === 'zone' && level ? (_jsx(ViewerRoomCallout, { entry: entry, floorY: roomFloorElevation(nodes, zoneId), level: level, name: zoneLabel(zone, i18n) }, zoneId)) : null;
+                })()
+                : null] }));
+}
+/** The selected room's callout: its name and area at a point inside it, and the close button. */
+function ViewerRoomCallout({ entry, floorY, level, name, }) {
+    const unit = useViewer((s) => s.unit);
+    const locale = useLocale();
+    const anchor = useMemo(() => {
+        const [x, z] = polygonInteriorPoint({ polygon: entry.polygon, holes: entry.holes });
+        return new Vector3(x, floorY + 0.05, z);
+    }, [entry.polygon, entry.holes, floorY]);
+    const dismiss = useCallback(() => {
+        const { selection, setSelection } = useViewer.getState();
+        if (selection.zoneId === entry.zoneId)
+            setSelection({ zoneId: null });
+    }, [entry.zoneId]);
+    return (_jsx(SelectionCallout, { actions: [], anchor: anchor, object: level, onDismiss: dismiss, subtitle: formatRoomArea(entry.area, unit, locale), title: name }));
+}
+const parametricObject = (id) => sceneRegistry.nodes.get(id);
+/** `ViewerRooms` over the parametric scene store. */
+export function ParametricViewerRooms() {
+    const nodes = useScene((s) => s.nodes);
+    const source = useMemo(() => ({ nodes, objectFor: parametricObject }), [nodes]);
+    return _jsx(ViewerRooms, { source: source });
+}
+function ViewerRoomHighlight({ room, source, }) {
+    const heights = useMemo(() => resolveRoomAssemblyHeights(room, source.nodes), [room, source.nodes]);
+    return (_jsx(RoomAssemblyMesh, { heights: heights, levelObject: () => source.objectFor(room.key.levelId), room: room }));
+}

package/dist/ui/components/scene-loader.d.ts

@@ -0,0 +1,18 @@
+interface SceneLoaderProps {
+    className?: string;
+    fullScreen?: boolean;
+}
+export declare function SceneLoader({ className, fullScreen }: SceneLoaderProps): import("react").JSX.Element;
+interface SceneLoadFailedProps {
+    className?: string;
+    onRetry: () => void;
+}
+/**
+ * Replaces the loader when the host could not deliver the scene. Rendered
+ * INSTEAD of falling back to an empty default scene: a session that shows
+ * scaffold nodes after a failed load autosaves that scaffold over the real
+ * project (prod scene-wipe class, 2026-09-02).
+ */
+export declare function SceneLoadFailed({ className, onRetry }: SceneLoadFailedProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=scene-loader.d.ts.map

package/dist/ui/components/scene-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene-loader.d.ts","sourceRoot":"","sources":["../../../src/ui/components/scene-loader.tsx"],"names":[],"mappings":"AAcA,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,EAAE,gBAAgB,+BAmB9E;AAED,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,oBAAoB,+BAqB3E"}

package/dist/ui/components/scene-loader.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { cn } from '../lib/cn';
+import { Button } from '../primitives/button';
+const LOADERS = [
+    'pascal-loader-1',
+    'pascal-loader-2',
+    'pascal-loader-3',
+    'pascal-loader-4',
+    'pascal-loader-5',
+];
+export function SceneLoader({ className, fullScreen = false }) {
+    const [loaderClass, setLoaderClass] = useState(LOADERS[0]);
+    useEffect(() => {
+        // Pick a random loader on mount
+        setLoaderClass(LOADERS[Math.floor(Math.random() * LOADERS.length)] ?? LOADERS[0]);
+    }, []);
+    return (_jsx("div", { className: cn('z-100 flex items-center justify-center bg-background/80 backdrop-blur-md transition-opacity duration-300', fullScreen ? 'fixed inset-0' : 'absolute inset-0', className), children: _jsx("div", { className: cn(loaderClass, 'text-foreground opacity-80') }) }));
+}
+/**
+ * Replaces the loader when the host could not deliver the scene. Rendered
+ * INSTEAD of falling back to an empty default scene: a session that shows
+ * scaffold nodes after a failed load autosaves that scaffold over the real
+ * project (prod scene-wipe class, 2026-09-02).
+ */
+export function SceneLoadFailed({ className, onRetry }) {
+    return (_jsxs("div", { className: cn('z-100 flex flex-col items-center justify-center gap-4 bg-background/90 px-6 text-center backdrop-blur-md', 'absolute inset-0', className), role: "alert", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "font-medium text-foreground text-sm", children: "This project couldn't be loaded" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing was changed. Check your connection and try again." })] }), _jsx(Button, { className: "rounded-full", onClick: onRetry, size: "sm", type: "button", children: "Try again" })] }));
+}

package/dist/ui/components/sky-control.d.ts

@@ -0,0 +1,37 @@
+import { type PascalI18n } from '@pascal-app/core';
+import { type CSSProperties } from 'react';
+import { type Weather } from '../../lib/daylight/sky';
+/**
+ * The sky (time of day and weather) as a chip beside the compass, opening a panel: the sun's
+ * arc to drag through the day, the presets, the live clock, and the cloud cover. While a chip is
+ * mounted the display menus point here instead of carrying their own time and weather menus.
+ */
+export declare const useSkyPanel: import("zustand").UseBoundStore<import("zustand").StoreApi<{
+    open: boolean;
+    hosts: number;
+}>>;
+export declare function openSkyPanel(): void;
+/**
+ * The bottom docks the chip lines up with (measured): the editor's tool dock and the viewer's
+ * controls bar, both 24 px up. The compass beside the chip centres on them.
+ */
+export declare const SKY_DOCK_BOTTOM = 24;
+export declare const SKY_DOCK_HEIGHT: {
+    readonly editor: 58;
+    readonly viewer: 56;
+};
+export declare const SKY_COMPASS_BOTTOM = 36;
+export declare function weatherIcon(weather: Weather): import("lucide-react").LucideIcon;
+export declare function weatherName(i18n: PascalI18n, id: Weather): string;
+/**
+ * The chip and its panel, absolutely placed by the caller (the scene's bottom-left corner, beside
+ * the compass). `dark` for the viewer's dark chrome.
+ */
+export declare function SkyControl({ className, dark, height, style, }: {
+    className?: string;
+    dark?: boolean;
+    /** The dock's height beside it, so the two line up. */
+    height: number;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+//# sourceMappingURL=sky-control.d.ts.map

package/dist/ui/components/sky-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-control.d.ts","sourceRoot":"","sources":["../../../src/ui/components/sky-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAA2B,MAAM,kBAAkB,CAAA;AAa3E,OAAO,EACL,KAAK,aAAa,EAOnB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAgBpE;;;;GAIG;AACH,eAAO,MAAM,WAAW;UAAkB,OAAO;WAAS,MAAM;GAG7D,CAAA;AAEH,wBAAgB,YAAY,SAE3B;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,KAAK,CAAA;AACjC,eAAO,MAAM,eAAe;aAAK,MAAM,EAAE,EAAE;aAAE,MAAM,EAAE,EAAE;CAAW,CAAA;AAClE,eAAO,MAAM,kBAAkB,KAAK,CAAA;AAqDpC,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,qCAE3C;AAgCD,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,UAWxD;AAkFD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAY,EACZ,MAAM,EACN,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uDAAuD;IACvD,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,+BAmFA"}

package/dist/ui/components/sky-control.js

@@ -0,0 +1,382 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePascalI18n, useScene } from '@pascal-app/core';
+import { Cloud, CloudSun, Cloudy, LocateFixed, Moon, RotateCcw, Sun, Sunrise, Sunset, X, } from 'lucide-react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { create } from 'zustand';
+import { requestDeviceLocation, resolveLocation } from '../../lib/daylight/location';
+import { WEATHER_COVER } from '../../lib/daylight/sky';
+import { presetInstant, skyPhase, solarClockInstant, solarClockMinutes, solarPosition, sunEvents, } from '../../lib/daylight/solar';
+import useViewer from '../../store/use-viewer';
+import { cn } from '../lib/cn';
+import { Popover, PopoverAnchor, PopoverContent } from '../primitives/popover';
+import { Switch } from '../primitives/switch';
+/**
+ * The sky (time of day and weather) as a chip beside the compass, opening a panel: the sun's
+ * arc to drag through the day, the presets, the live clock, and the cloud cover. While a chip is
+ * mounted the display menus point here instead of carrying their own time and weather menus.
+ */
+export const useSkyPanel = create(() => ({
+    open: false,
+    hosts: 0,
+}));
+export function openSkyPanel() {
+    useSkyPanel.setState({ open: true });
+}
+/**
+ * The bottom docks the chip lines up with (measured): the editor's tool dock and the viewer's
+ * controls bar, both 24 px up. The compass beside the chip centres on them.
+ */
+export const SKY_DOCK_BOTTOM = 24;
+export const SKY_DOCK_HEIGHT = { editor: 58, viewer: 56 };
+export const SKY_COMPASS_BOTTOM = 36;
+/**
+ * A preset or reset eases the sun to its time the short way round the clock, slowly enough to
+ * watch the light change: 1.5 s for a short hop, up to 3 s for half a day, easing in and out.
+ */
+const TWEEN_MIN_MS = 1500;
+const TWEEN_MAX_MS = 3000;
+let tween = 0;
+function stopTween() {
+    cancelAnimationFrame(tween);
+    tween = 0;
+}
+function easeTimeTo(from, to, done) {
+    stopTween();
+    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    const delta = ((((to - from + 2160) % 1440) + 1440) % 1440) - 720;
+    if (reduce || Math.abs(delta) < 1) {
+        done();
+        return;
+    }
+    const start = performance.now();
+    const duration = TWEEN_MIN_MS + (TWEEN_MAX_MS - TWEEN_MIN_MS) * (Math.abs(delta) / 720);
+    const step = (now) => {
+        const t = Math.min(1, (now - start) / duration);
+        const eased = t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+        if (t >= 1) {
+            tween = 0;
+            done();
+            return;
+        }
+        useViewer.getState().setTimeOfDayMinutes((((from + delta * eased) % 1440) + 1440) % 1440);
+        tween = requestAnimationFrame(step);
+    };
+    tween = requestAnimationFrame(step);
+}
+const PRESETS = [
+    { id: 'midday', icon: Sun },
+    { id: 'golden', icon: Sunset },
+    { id: 'blue', icon: Sunrise },
+    { id: 'night', icon: Moon },
+];
+const WEATHERS = [
+    { id: 'clear', icon: Sun },
+    { id: 'fair', icon: CloudSun },
+    { id: 'cloudy', icon: Cloudy },
+    { id: 'overcast', icon: Cloud },
+];
+export function weatherIcon(weather) {
+    return WEATHERS.find((option) => option.id === weather)?.icon ?? CloudSun;
+}
+function presetName(i18n, id) {
+    switch (id) {
+        case 'golden':
+            return i18n._({ id: 'viewer.daylight.time.golden', message: 'Golden hour' });
+        case 'midday':
+            return i18n._({ id: 'viewer.daylight.time.midday', message: 'Midday' });
+        case 'blue':
+            return i18n._({ id: 'viewer.daylight.time.blue', message: 'Blue hour' });
+        case 'night':
+            return i18n._({ id: 'viewer.daylight.time.night', message: 'Night' });
+    }
+}
+function phaseName(i18n, phase) {
+    switch (phase) {
+        case 'night':
+            return presetName(i18n, 'night');
+        case 'blue':
+            return presetName(i18n, 'blue');
+        case 'golden':
+            return presetName(i18n, 'golden');
+        case 'midday':
+            return presetName(i18n, 'midday');
+        case 'morning':
+            return i18n._({ id: 'viewer.daylight.phase.morning', message: 'Morning' });
+        case 'afternoon':
+            return i18n._({ id: 'viewer.daylight.phase.afternoon', message: 'Afternoon' });
+    }
+}
+export function weatherName(i18n, id) {
+    switch (id) {
+        case 'clear':
+            return i18n._({ id: 'viewer.daylight.weather.clear', message: 'Clear' });
+        case 'fair':
+            return i18n._({ id: 'viewer.daylight.weather.fair', message: 'Fair' });
+        case 'cloudy':
+            return i18n._({ id: 'viewer.daylight.weather.cloudy', message: 'Cloudy' });
+        case 'overcast':
+            return i18n._({ id: 'viewer.daylight.weather.overcast', message: 'Overcast' });
+    }
+}
+/** Sky colours (zenith, horizon) per phase, for the chip swatch and the arc's backdrop. */
+const PHASE_SKY = {
+    night: ['#121a36', '#36406c'],
+    blue: ['#263465', '#8c88b4'],
+    golden: ['#8e98c6', '#f2cfb2'],
+    morning: ['#6f9dd6', '#dbe7f2'],
+    midday: ['#5a93d5', '#d3e4f3'],
+    afternoon: ['#6a98d0', '#e6e2da'],
+};
+/** Minutes after midnight, as the locale writes a time of day. */
+const formatMinutes = (() => {
+    let format = null;
+    return (minutes) => {
+        format ??= new Intl.DateTimeFormat(undefined, {
+            hour: 'numeric',
+            minute: '2-digit',
+            timeZone: 'UTC',
+        });
+        return format.format(new Date(Math.round(minutes) * 60_000));
+    };
+})();
+/** The sky the viewer shows right now: its time on the site's sun clock, phase and events. */
+function useSky() {
+    const timeOfDay = useViewer((s) => s.timeOfDay);
+    const timeOfDayMinutes = useViewer((s) => s.timeOfDayMinutes);
+    const skyLive = useViewer((s) => s.skyLive);
+    const weather = useViewer((s) => s.weather);
+    const deviceLocation = useViewer((s) => s.deviceLocation);
+    const site = useScene((state) => {
+        for (const id of state.rootNodeIds) {
+            const node = state.nodes[id];
+            if (node?.type === 'site')
+                return node;
+        }
+        return undefined;
+    });
+    // The live clock moves the chip on once a minute.
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        if (!skyLive)
+            return;
+        setNow(new Date());
+        const timer = setInterval(() => setNow(new Date()), 60_000);
+        return () => clearInterval(timer);
+    }, [skyLive]);
+    const { location, source } = resolveLocation(site, deviceLocation);
+    const { lat, lng } = location;
+    const day = useMemo(() => {
+        const today = new Date();
+        const presets = Object.fromEntries(PRESETS.map(({ id }) => [id, solarClockMinutes(presetInstant(today, lat, lng, id), lng)]));
+        return { today, presets, events: sunEvents(today, lat, lng) };
+    }, [lat, lng]);
+    const minutes = skyLive
+        ? solarClockMinutes(now, location.lng)
+        : (timeOfDayMinutes ?? day.presets[timeOfDay]);
+    const elevation = solarPosition(solarClockInstant(day.today, location.lng, minutes), location.lat, location.lng).elevation;
+    return {
+        minutes,
+        // The live sky reads the wall clock the person knows; set times read the site's sun clock.
+        clock: skyLive ? now.getHours() * 60 + now.getMinutes() : minutes,
+        phase: skyPhase(elevation, minutes),
+        activePreset: skyLive || timeOfDayMinutes !== null ? null : timeOfDay,
+        presets: day.presets,
+        events: day.events ?? { sunrise: 6 * 60, sunset: 18 * 60 },
+        skyLive,
+        weather,
+        source,
+    };
+}
+/**
+ * The chip and its panel, absolutely placed by the caller (the scene's bottom-left corner, beside
+ * the compass). `dark` for the viewer's dark chrome.
+ */
+export function SkyControl({ className, dark = false, height, style, }) {
+    const i18n = usePascalI18n();
+    const open = useSkyPanel((s) => s.open);
+    const sky = useSky();
+    const WeatherIcon = weatherIcon(sky.weather);
+    const nextWeather = WEATHERS[(WEATHERS.findIndex((w) => w.id === sky.weather) + 1) % WEATHERS.length];
+    const chip = useRef(null);
+    const compact = useClearOfDock(chip);
+    useEffect(() => {
+        useSkyPanel.setState((s) => ({ hosts: s.hosts + 1 }));
+        return () => useSkyPanel.setState((s) => ({ hosts: s.hosts - 1, open: false }));
+    }, []);
+    return (_jsxs(Popover, { onOpenChange: (next) => useSkyPanel.setState({ open: next }), open: open, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { className: cn('corner-smooth pointer-events-auto absolute z-30 flex items-stretch gap-0.5 rounded-2xl border border-border/40 bg-background/95 p-1 text-foreground text-xs shadow-elevation-4 backdrop-blur-xl', dark && 'dark', className), onPointerDown: (event) => event.stopPropagation(), ref: chip, style: { bottom: SKY_DOCK_BOTTOM, height, ...style }, children: [_jsxs("button", { "aria-expanded": open, "aria-label": i18n._({ id: 'viewer.daylight.sky.open', message: 'Time and weather' }), className: cn('flex items-center gap-2 rounded-xl pr-3 pl-1.5 transition-colors', open ? 'bg-violet-500/10' : 'hover:bg-accent'), onClick: () => useSkyPanel.setState({ open: !open }), type: "button", children: [_jsx(MiniSky, { sky: sky }), _jsx("span", { className: "font-mono text-foreground text-sm tabular-nums", children: formatMinutes(sky.clock) }), compact ? null : (_jsx("span", { className: "text-muted-foreground text-sm", children: phaseName(i18n, sky.phase) }))] }), _jsx("span", { "aria-hidden": "true", className: "mx-0.5 my-auto h-6 w-px bg-border" }), _jsxs("button", { "aria-label": i18n._({
+                                id: 'viewer.daylight.sky.cycleWeather',
+                                message: 'Cloud cover: {current}. Change to {next}',
+                                values: {
+                                    current: weatherName(i18n, sky.weather),
+                                    next: weatherName(i18n, nextWeather.id),
+                                },
+                            }), className: "flex items-center gap-1.5 rounded-xl px-2.5 text-sm transition-colors hover:bg-accent", onClick: () => useViewer.getState().setWeather(nextWeather.id), title: i18n._({
+                                id: 'viewer.daylight.sky.cycleWeatherTip',
+                                message: 'Cycle cloud cover',
+                            }), type: "button", children: [_jsx(WeatherIcon, { "aria-hidden": "true", className: "h-[18px] w-[18px] text-muted-foreground" }), compact ? null : _jsx("span", { children: weatherName(i18n, sky.weather) })] })] }) }), _jsx(PopoverContent, { align: "start", className: cn('w-[22rem] rounded-2xl p-4', dark && 'dark'), 
+                // Opened from a menu, focus returns to that menu's trigger: only a click outside closes.
+                onFocusOutside: (event) => event.preventDefault(), onOpenAutoFocus: (event) => event.preventDefault(), onPointerDown: (event) => event.stopPropagation(), side: "top", sideOffset: 8, children: _jsx(SkyPanel, { sky: sky }) })] }));
+}
+/**
+ * Whether the chip must drop its phase and weather labels to stay clear of the bottom dock (centred
+ * on the window, so a sidebar or a narrow pane brings it close). Measures the full chip, then
+ * compares where it would end with where the dock starts.
+ */
+function useClearOfDock(chip) {
+    const [compact, setCompact] = useState(false);
+    const fullWidth = useRef(0);
+    useLayoutEffect(() => {
+        const element = chip.current;
+        if (!element)
+            return;
+        const check = () => {
+            const box = element.getBoundingClientRect();
+            if (!compact)
+                fullWidth.current = box.width;
+            const dock = document.querySelector('[data-surface="tool-dock"], [data-surface="viewer-dock"]');
+            const dockBox = dock?.getBoundingClientRect();
+            const overlaps = !!dockBox &&
+                dockBox.width > 0 &&
+                Math.abs(dockBox.bottom - box.bottom) < 40 &&
+                box.left + fullWidth.current + 12 > dockBox.left;
+            if (overlaps !== compact)
+                setCompact(overlaps);
+        };
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(element);
+        if (element.offsetParent)
+            observer.observe(element.offsetParent);
+        window.addEventListener('resize', check);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', check);
+        };
+    });
+    return compact;
+}
+/** The chip's swatch: the sky's colours with the sun (or moon) where it stands on its arc. */
+function MiniSky({ sky }) {
+    const [top, horizon] = PHASE_SKY[sky.phase];
+    const sun = arcPoint(sky.minutes, sky.events.sunrise, sky.events.sunset);
+    return (_jsx("span", { "aria-hidden": "true", className: "relative h-8 w-8 shrink-0 overflow-hidden rounded-lg border border-black/10", style: { background: `linear-gradient(${top}, ${horizon} 62%, #8a8a94 63%, #6c6c7a)` }, children: _jsx("span", { className: "absolute h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full", style: {
+                left: `${(sun.x / W) * 100}%`,
+                top: `${Math.min(92, (sun.y / H) * 100)}%`,
+                background: sun.day ? '#fcd165' : '#d6dcf0',
+                boxShadow: sun.day ? '0 0 4px 1px rgba(252, 209, 101, 0.6)' : 'none',
+            } }) }));
+}
+function SkyPanel({ sky }) {
+    const i18n = usePascalI18n();
+    const [locating, setLocating] = useState(false);
+    const viewer = useViewer.getState;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium text-foreground text-sm", children: i18n._({ id: 'viewer.daylight.sky.title', message: 'Sky' }) }), _jsx("div", { className: "text-muted-foreground text-xs", children: i18n._({
+                                    id: 'viewer.daylight.sky.subtitle',
+                                    message: 'Light and weather for this view',
+                                }) })] }), _jsxs("button", { className: "flex items-center gap-1 rounded-md px-1.5 py-1 text-violet-600 text-xs hover:bg-accent dark:text-violet-300", onClick: () => {
+                            easeTimeTo(sky.minutes, sky.presets.midday, () => viewer().setTimeOfDay('midday'));
+                            viewer().setWeather('fair');
+                        }, type: "button", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), i18n._({ id: 'viewer.daylight.sky.reset', message: 'Reset' })] }), _jsx("button", { "aria-label": i18n._({ id: 'viewer.daylight.sky.close', message: 'Close' }), className: "rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground", onClick: () => useSkyPanel.setState({ open: false }), type: "button", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: i18n._({ id: 'viewer.daylight.time.title', message: 'Time of day' }) }), _jsx("span", { className: "font-mono text-foreground text-sm tabular-nums", children: formatMinutes(sky.clock) }), _jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-foreground text-xs", children: phaseName(i18n, sky.phase) })] }), _jsx(SunArc, { sky: sky }), _jsxs("div", { className: "-mt-1 flex justify-between text-muted-foreground text-xs", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Sunrise, { className: "h-3.5 w-3.5" }), i18n._({ id: 'viewer.daylight.sky.sunrise', message: 'Sunrise' }), _jsx("span", { className: "font-mono text-foreground tabular-nums", children: formatMinutes(sky.events.sunrise) })] }), _jsxs("span", { className: "flex items-center gap-1", children: [i18n._({ id: 'viewer.daylight.sky.sunset', message: 'Sunset' }), _jsx("span", { className: "font-mono text-foreground tabular-nums", children: formatMinutes(sky.events.sunset) }), _jsx(Sunset, { className: "h-3.5 w-3.5" })] })] }), _jsx("div", { className: "grid grid-cols-4 gap-2", children: PRESETS.map((preset) => (_jsx(OptionCard, { active: sky.activePreset === preset.id, detail: formatMinutes(sky.presets[preset.id]), icon: preset.icon, name: presetName(i18n, preset.id), onSelect: () => easeTimeTo(sky.minutes, sky.presets[preset.id], () => viewer().setTimeOfDay(preset.id)) }, preset.id))) }), _jsxs("div", { className: "flex items-center gap-3 rounded-xl bg-muted/60 px-3 py-2.5", children: [_jsx(LocateFixed, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-foreground text-sm", children: sky.source === 'site'
+                                    ? i18n._({ id: 'viewer.daylight.sky.followClock', message: 'Follow the clock' })
+                                    : i18n._({ id: 'viewer.daylight.location.use', message: 'Use my location' }) }), _jsx("div", { className: "text-muted-foreground text-xs", children: sky.source === 'site'
+                                    ? i18n._({
+                                        id: 'viewer.daylight.sky.followClockDetail',
+                                        message: 'The sun moves with your local clock.',
+                                    })
+                                    : i18n._({
+                                        id: 'viewer.daylight.sky.liveDetail',
+                                        message: 'Follows your local clock. Sun position is approximate.',
+                                    }) })] }), _jsx(Switch, { checked: sky.skyLive, disabled: locating, onCheckedChange: (live) => {
+                            stopTween();
+                            viewer().setSkyLive(live);
+                            if (!live || sky.source === 'site' || sky.source === 'device')
+                                return;
+                            setLocating(true);
+                            requestDeviceLocation()
+                                .then((location) => useViewer.getState().setDeviceLocation(location))
+                                .catch(() => { })
+                                .finally(() => setLocating(false));
+                        } })] }), _jsx("div", { className: "h-px bg-border" }), _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "flex-1 font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: i18n._({ id: 'viewer.daylight.sky.cloudCover', message: 'Cloud cover' }) }), _jsx("span", { className: "text-foreground text-sm", children: weatherName(i18n, sky.weather) })] }), _jsx("div", { className: "grid grid-cols-4 gap-2", children: WEATHERS.map((option) => (_jsx(OptionCard, { active: sky.weather === option.id, detail: `${Math.round(WEATHER_COVER[option.id] * 100)}%`, icon: option.icon, name: weatherName(i18n, option.id), onSelect: () => viewer().setWeather(option.id) }, option.id))) })] }));
+}
+function OptionCard({ active, detail, icon: Icon, name, onSelect, }) {
+    return (_jsxs("button", { "aria-pressed": active, className: cn('flex flex-col items-center gap-0.5 rounded-xl border px-1 py-2 text-center transition hover:bg-accent', active
+            ? 'border-violet-500 bg-violet-500/10 text-violet-700 dark:text-violet-300'
+            : 'border-border text-foreground'), onClick: onSelect, type: "button", children: [_jsx(Icon, { className: cn('mb-0.5 h-4 w-4', active ? '' : 'text-amber-600 dark:text-amber-400') }), _jsx("span", { className: "text-xs leading-tight", children: name }), _jsx("span", { className: "font-mono text-[11px] text-muted-foreground tabular-nums", children: detail })] }));
+}
+// The arc: day above the horizon from sunrise (left) to sunset (right), night dotted below.
+const W = 320;
+const H = 150;
+const CX = W / 2;
+const CY = 100;
+const RX = 136;
+const RY_DAY = 80;
+const RY_NIGHT = 30;
+const SNAP = 5;
+function arcPoint(minutes, sunrise, sunset) {
+    const dayLength = sunset - sunrise;
+    if (minutes >= sunrise && minutes <= sunset) {
+        const angle = Math.PI * (1 - (minutes - sunrise) / dayLength);
+        return { x: CX + RX * Math.cos(angle), y: CY - RY_DAY * Math.sin(angle), day: true };
+    }
+    const since = (minutes < sunrise ? minutes + 1440 : minutes) - sunset;
+    const angle = Math.PI * (since / (1440 - dayLength));
+    return { x: CX + RX * Math.cos(angle), y: CY + RY_NIGHT * Math.sin(angle), day: false };
+}
+function arcMinutes(x, y, sunrise, sunset) {
+    const dayLength = sunset - sunrise;
+    const angle = Math.atan2((CY - y) / (y < CY ? RY_DAY : RY_NIGHT), (x - CX) / RX);
+    const minutes = angle >= 0
+        ? sunrise + (1 - angle / Math.PI) * dayLength
+        : sunset + (-angle / Math.PI) * (1440 - dayLength);
+    return (((Math.round(minutes / SNAP) * SNAP) % 1440) + 1440) % 1440;
+}
+/** The sun's course from `from` to `to` minutes after sunrise, as an SVG path. */
+function coursePath(sunrise, sunset, from, to) {
+    if (to - from < 1)
+        return '';
+    const steps = Math.max(2, Math.ceil((to - from) / 6));
+    let d = '';
+    for (let i = 0; i <= steps; i++) {
+        const point = arcPoint((sunrise + from + ((to - from) * i) / steps) % 1440, sunrise, sunset);
+        d += `${i ? 'L' : 'M'} ${point.x.toFixed(1)} ${point.y.toFixed(1)} `;
+    }
+    return d;
+}
+function SunArc({ sky }) {
+    const i18n = usePascalI18n();
+    const slider = useRef(null);
+    const { sunrise, sunset } = sky.events;
+    const sun = arcPoint(sky.minutes, sunrise, sunset);
+    const [top, horizon] = PHASE_SKY[sky.phase];
+    // The day's course from sunrise: drawn solid as far as the sun, dotted for what is left.
+    const elapsed = (((sky.minutes - sunrise) % 1440) + 1440) % 1440;
+    const travelled = coursePath(sunrise, sunset, 0, elapsed);
+    const ahead = coursePath(sunrise, sunset, elapsed, 1440);
+    const setFromPointer = (event) => {
+        const rect = slider.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const x = ((event.clientX - rect.left) / rect.width) * W;
+        const y = ((event.clientY - rect.top) / rect.height) * H;
+        stopTween();
+        useViewer.getState().setTimeOfDayMinutes(arcMinutes(x, y, sunrise, sunset));
+    };
+    return (_jsx("div", { "aria-label": i18n._({
+            id: 'viewer.daylight.sky.arc',
+            message: 'Drag the sun to set the time',
+        }), "aria-valuemax": 1440, "aria-valuemin": 0, "aria-valuenow": Math.round(sky.minutes), "aria-valuetext": formatMinutes(sky.clock), className: "cursor-grab touch-none select-none overflow-hidden rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing", onKeyDown: (event) => {
+            const step = event.key === 'ArrowRight' ? 15 : event.key === 'ArrowLeft' ? -15 : 0;
+            if (!step)
+                return;
+            event.preventDefault();
+            stopTween();
+            useViewer.getState().setTimeOfDayMinutes((sky.minutes + step + 1440) % 1440);
+        }, onPointerDown: (event) => {
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setFromPointer(event);
+        }, onPointerMove: (event) => {
+            if (event.currentTarget.hasPointerCapture(event.pointerId))
+                setFromPointer(event);
+        }, ref: slider, role: "slider", tabIndex: 0, children: _jsxs("svg", { "aria-hidden": "true", className: "block w-full", viewBox: `0 0 ${W} ${H}`, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "sky-arc-backdrop", x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: top }), _jsx("stop", { offset: CY / H, stopColor: horizon }), _jsx("stop", { offset: CY / H, stopColor: "#9a9aa6" }), _jsx("stop", { offset: "1", stopColor: "#6c6c7a" })] }) }), _jsx("rect", { fill: "url(#sky-arc-backdrop)", height: H, width: W }), _jsx("line", { stroke: "rgba(0,0,0,0.25)", x1: "0", x2: W, y1: CY, y2: CY }), _jsx("path", { d: travelled, fill: "none", stroke: "#252a44", strokeLinecap: "round", strokeWidth: "2" }), _jsx("path", { d: ahead, fill: "none", stroke: "#252a44", strokeDasharray: "2 5", strokeLinecap: "round", strokeOpacity: "0.7", strokeWidth: "1.5" }), sun.day ? _jsx("circle", { cx: sun.x, cy: sun.y, fill: "#fcd165", opacity: "0.3", r: "15" }) : null, _jsx("circle", { cx: sun.x, cy: sun.y, fill: sun.day ? '#fcd165' : '#d6dcf0', r: "9", stroke: "#ffffff", strokeWidth: "2.5" })] }) }));
+}

package/dist/ui/components/use-viewer-camera-navigation-sync.d.ts

@@ -0,0 +1,4 @@
+import type { CameraControlsImpl } from '@react-three/drei';
+import { type RefObject } from 'react';
+export declare function useViewerCameraNavigationSync(controls: RefObject<CameraControlsImpl | null>): () => void;
+//# sourceMappingURL=use-viewer-camera-navigation-sync.d.ts.map

package/dist/ui/components/use-viewer-camera-navigation-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewer-camera-navigation-sync.d.ts","sourceRoot":"","sources":["../../../src/ui/components/use-viewer-camera-navigation-sync.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAA;AA+CtE,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAuF3F"}