@pascal-app/viewer 1.1.0 → 1.1.2

package/dist/ui/components/action-button.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { playSound } from '../../sfx/player';
+import { cn } from '../lib/cn';
+import { Button } from '../primitives/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip';
+import { useActionMenuPopupSide } from './action-menu-placement';
+export const ActionButton = React.forwardRef(({ className, children, label, shortcut, isActive, tooltipContent, tooltipSide, tooltipClassName, onClick, onMouseEnter, ...props }, ref) => {
+    const popupSide = useActionMenuPopupSide();
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button
+                // These are toggles, not commands: the armed/unarmed state has to be
+                // readable without decoding the active-state styling.
+                , { "aria-pressed": isActive, "aria-label": label, className: cn('relative h-11 w-11 transition-all', className), onClick: (event) => {
+                        playSound('menuClick');
+                        onClick?.(event);
+                    }, onMouseEnter: (event) => {
+                        playSound('menuHover');
+                        onMouseEnter?.(event);
+                    }, ref: ref, ...props, children: [_jsx("div", { className: cn('flex h-full w-full items-center justify-center transition-transform', shortcut && '-translate-x-0.5 -translate-y-0.5'), children: children }), shortcut && (_jsx("div", { className: "absolute right-1 bottom-1 rounded border border-border/40 bg-background/40 px-1 py-[2px] backdrop-blur-md", children: _jsx("span", { className: "block font-medium font-mono text-[9px] text-muted-foreground/70 leading-none", children: shortcut }) }))] }) }), _jsx(TooltipContent, { className: tooltipClassName, side: tooltipSide ?? popupSide, children: tooltipContent || (_jsxs("p", { children: [label, " ", shortcut && `(${shortcut})`] })) })] }));
+});
+ActionButton.displayName = 'ActionButton';

package/dist/ui/components/action-menu-placement.d.ts

@@ -0,0 +1,7 @@
+/** Viewport edge the action menu docks to. */
+export type ActionMenuPlacement = 'bottom' | 'top';
+export declare const ActionMenuPlacementProvider: import("react").Provider<ActionMenuPlacement>;
+export declare function useActionMenuPlacement(): ActionMenuPlacement;
+/** Side tooltips and popovers open toward, away from the docked edge. */
+export declare function useActionMenuPopupSide(): 'top' | 'bottom';
+//# sourceMappingURL=action-menu-placement.d.ts.map

package/dist/ui/components/action-menu-placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu-placement.d.ts","sourceRoot":"","sources":["../../../src/ui/components/action-menu-placement.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,KAAK,CAAA;AAIlD,eAAO,MAAM,2BAA2B,+CAAsC,CAAA;AAE9E,wBAAgB,sBAAsB,IAAI,mBAAmB,CAE5D;AAED,yEAAyE;AACzE,wBAAgB,sBAAsB,IAAI,KAAK,GAAG,QAAQ,CAEzD"}

package/dist/ui/components/action-menu-placement.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+const ActionMenuPlacementContext = createContext('bottom');
+export const ActionMenuPlacementProvider = ActionMenuPlacementContext.Provider;
+export function useActionMenuPlacement() {
+    return useContext(ActionMenuPlacementContext);
+}
+/** Side tooltips and popovers open toward, away from the docked edge. */
+export function useActionMenuPopupSide() {
+    return useActionMenuPlacement() === 'top' ? 'bottom' : 'top';
+}

package/dist/ui/components/floorplan-compass-button.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+export type FloorplanCompassButtonProps = {
+    northRotationDeg: number;
+    onAlignNorth: () => void;
+    needleRef?: React.RefObject<SVGSVGElement | null>;
+    /** Horizontal anchor; defaults to the bottom-left corner. */
+    style?: React.CSSProperties;
+};
+export declare function FloorplanCompassButton({ northRotationDeg, onAlignNorth, needleRef, style, }: FloorplanCompassButtonProps): React.JSX.Element;
+//# sourceMappingURL=floorplan-compass-button.d.ts.map

package/dist/ui/components/floorplan-compass-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floorplan-compass-button.d.ts","sourceRoot":"","sources":["../../../src/ui/components/floorplan-compass-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,2BAA2B,GAAG;IACxC,gBAAgB,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAA;IACjD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,GACN,EAAE,2BAA2B,qBA6C7B"}

package/dist/ui/components/floorplan-compass-button.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePascalI18n } from '@pascal-app/core';
+import { cn } from '../lib/cn';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip';
+import { SKY_COMPASS_BOTTOM, useSkyPanel } from './sky-control';
+export function FloorplanCompassButton({ northRotationDeg, onAlignNorth, needleRef, style, }) {
+    const i18n = usePascalI18n();
+    // Beside the sky chip (not when moved to the plan's right corner), centre on the docks' row.
+    const besideSky = useSkyPanel((s) => s.hosts > 0) && style?.right === undefined;
+    const label = i18n._({
+        id: 'viewer.floorplan.alignNorth',
+        message: 'Align view to north',
+    });
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": label, className: cn('group pointer-events-auto absolute bottom-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900', !style && 'left-3'), style: besideSky ? { bottom: SKY_COMPASS_BOTTOM, ...style } : style, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onAlignNorth();
+                    }, onPointerDown: (event) => {
+                        event.stopPropagation();
+                    }, type: "button", children: _jsx("span", { className: "relative flex h-6 w-6 items-center justify-center rounded-full bg-[#b8b8b8] shadow-inner dark:bg-neutral-700", children: _jsxs("svg", { "aria-hidden": "true", className: "h-6 w-6", ref: needleRef, style: { transform: `rotate(${northRotationDeg}deg)` }, viewBox: "0 0 48 48", children: [_jsx("path", { d: "M24 4.5 31.5 25 24 21.5 16.5 25Z", fill: "#f15b5b" }), _jsx("path", { d: "M24 43.5 16.5 23 24 26.5 31.5 23Z", fill: "#ffffff" })] }) }) }) }), _jsx(TooltipContent, { side: "right", children: label })] }));
+}

package/dist/ui/components/follow-pascal-toggle.d.ts

@@ -0,0 +1,6 @@
+/** The toolbar's switch for Follow Pascal: the camera follows what the agent builds. */
+export declare function FollowPascalToggle({ className, tooltipClassName, }: {
+    className?: string;
+    tooltipClassName?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=follow-pascal-toggle.d.ts.map

package/dist/ui/components/follow-pascal-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"follow-pascal-toggle.d.ts","sourceRoot":"","sources":["../../../src/ui/components/follow-pascal-toggle.tsx"],"names":[],"mappings":"AAQA,wFAAwF;AACxF,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,gBAAgB,GACjB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,+BA6BA"}

package/dist/ui/components/follow-pascal-toggle.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePascalI18n } from '@pascal-app/core';
+import { Video } from 'lucide-react';
+import { cn } from '../lib/cn';
+import { useFollowPascal } from '../store/use-follow-pascal';
+import { ActionButton } from './action-button';
+/** The toolbar's switch for Follow Pascal: the camera follows what the agent builds. */
+export function FollowPascalToggle({ className, tooltipClassName, }) {
+    const i18n = usePascalI18n();
+    const on = useFollowPascal((state) => state.on);
+    const setOn = useFollowPascal((state) => state.setOn);
+    return (_jsx(ActionButton, { "aria-pressed": on, className: cn(on
+            ? 'bg-violet-500/20 text-violet-600 dark:text-violet-300 dark:hover:text-accent-foreground'
+            : 'hover:bg-black/4 hover:text-violet-600 dark:hover:text-violet-300', className), label: on
+            ? i18n._({ id: 'editor.actionMenu.followPascalToggle.on', message: 'Follow Pascal: On' })
+            : i18n._({
+                id: 'editor.actionMenu.followPascalToggle.off',
+                message: 'Follow Pascal: Off',
+            }), onClick: () => setOn(!on), size: "icon", tooltipClassName: tooltipClassName, variant: "ghost", children: _jsx(Video, { className: "h-6 w-6" }) }));
+}

package/dist/ui/components/localized-html.d.ts

@@ -0,0 +1,9 @@
+/**
+ * drei's `Html`, keeping the surrounding i18n scope. `Html` renders its
+ * children in a separate React root, which sees none of the surrounding
+ * context, so a component inside it would translate and format with the
+ * default (English) scope instead of the host's (the editor's `?lang=` or
+ * `<Editor locale>` one).
+ */
+export declare const LocalizedHtml: import("react").ForwardRefExoticComponent<Omit<import("@react-three/drei/web/Html").HtmlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=localized-html.d.ts.map

package/dist/ui/components/localized-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localized-html.d.ts","sourceRoot":"","sources":["../../../src/ui/components/localized-html.tsx"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,wMAUxB,CAAA"}

package/dist/ui/components/localized-html.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PascalI18nProvider, usePascalI18n } from '@pascal-app/core';
+import { Html as DreiHtml } from '@react-three/drei';
+import { forwardRef } from 'react';
+/**
+ * drei's `Html`, keeping the surrounding i18n scope. `Html` renders its
+ * children in a separate React root, which sees none of the surrounding
+ * context, so a component inside it would translate and format with the
+ * default (English) scope instead of the host's (the editor's `?lang=` or
+ * `<Editor locale>` one).
+ */
+export const LocalizedHtml = forwardRef(function LocalizedHtml({ children, ...props }, ref) {
+    const i18n = usePascalI18n();
+    return (_jsx(DreiHtml, { ...props, ref: ref, children: _jsx(PascalI18nProvider, { i18n: i18n, children: children }) }));
+});

package/dist/ui/components/render-settings-menu.d.ts

@@ -0,0 +1,9 @@
+export declare function QualityMenu({ subContentClassName, }: {
+    subContentClassName?: string;
+}): import("react").JSX.Element;
+export declare function DaylightMenu({ subContentClassName, }: {
+    subContentClassName?: string;
+}): import("react").JSX.Element;
+/** Ink edges on (soft) or off. The menu stays open on toggle. */
+export declare function EdgesToggleItem(): import("react").JSX.Element;
+//# sourceMappingURL=render-settings-menu.d.ts.map

package/dist/ui/components/render-settings-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-settings-menu.d.ts","sourceRoot":"","sources":["../../../src/ui/components/render-settings-menu.tsx"],"names":[],"mappings":"AAuGA,wBAAgB,WAAW,CAAC,EAC1B,mBAAqC,GACtC,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,+BA6CA;AAED,wBAAgB,YAAY,CAAC,EAC3B,mBAAqC,GACtC,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,+BA6GA;AAED,iEAAiE;AACjE,wBAAgB,eAAe,gCAmB9B"}

package/dist/ui/components/render-settings-menu.js

@@ -0,0 +1,145 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePascalI18n, useScene } from '@pascal-app/core';
+import { ArrowDownLeft, Check, Cloud, CloudSun, Gauge, LocateFixed, Moon, PenLine, Sun, Sunrise, Sunset, } from 'lucide-react';
+import { useState } from 'react';
+import { requestDeviceLocation, resolveLocation } from '../../lib/daylight/location';
+import useViewer, {} from '../../store/use-viewer';
+import { DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, } from '../primitives/dropdown-menu';
+import { openSkyPanel, useSkyPanel, weatherIcon } from './sky-control';
+/**
+ * Render settings shared by every display dropdown:
+ * - `QualityMenu` (both appearances): Low / Medium / High.
+ * - `DaylightMenu` (colored): time-of-day and weather presets, plus "Use my location" when the
+ *   site has no geocoded point — or, while the sky chip is in the viewport, a row opening it.
+ * - `EdgesToggleItem` (monochrome): ink edges on or off.
+ */
+function timeOptions(i18n) {
+    return [
+        {
+            id: 'golden',
+            icon: Sunrise,
+            name: i18n._({ id: 'viewer.daylight.time.golden', message: 'Golden hour' }),
+        },
+        {
+            id: 'midday',
+            icon: Sun,
+            name: i18n._({ id: 'viewer.daylight.time.midday', message: 'Midday' }),
+        },
+        {
+            id: 'blue',
+            icon: Sunset,
+            name: i18n._({ id: 'viewer.daylight.time.blue', message: 'Blue hour' }),
+        },
+        {
+            id: 'night',
+            icon: Moon,
+            name: i18n._({ id: 'viewer.daylight.time.night', message: 'Night' }),
+        },
+    ];
+}
+function weatherOptions(i18n) {
+    return [
+        { id: 'clear', name: i18n._({ id: 'viewer.daylight.weather.clear', message: 'Clear' }) },
+        { id: 'fair', name: i18n._({ id: 'viewer.daylight.weather.fair', message: 'Fair' }) },
+        { id: 'cloudy', name: i18n._({ id: 'viewer.daylight.weather.cloudy', message: 'Cloudy' }) },
+        {
+            id: 'overcast',
+            name: i18n._({ id: 'viewer.daylight.weather.overcast', message: 'Overcast' }),
+        },
+    ];
+}
+function qualityOptions(i18n) {
+    return [
+        {
+            id: 'low',
+            name: i18n._({ id: 'viewer.daylight.quality.low', message: 'Low' }),
+            detail: i18n._({
+                id: 'viewer.daylight.quality.lowDetail',
+                message: 'Fastest — no ambient occlusion or bloom',
+            }),
+        },
+        {
+            id: 'medium',
+            name: i18n._({ id: 'viewer.daylight.quality.medium', message: 'Medium' }),
+            detail: i18n._({
+                id: 'viewer.daylight.quality.mediumDetail',
+                message: 'Half-resolution ambient occlusion',
+            }),
+        },
+        {
+            id: 'high',
+            name: i18n._({ id: 'viewer.daylight.quality.high', message: 'High' }),
+            detail: i18n._({
+                id: 'viewer.daylight.quality.highDetail',
+                message: 'Lighting-aware ambient occlusion and bloom',
+            }),
+        },
+    ];
+}
+export function QualityMenu({ subContentClassName = 'dark min-w-56', }) {
+    const i18n = usePascalI18n();
+    const quality = useViewer((s) => s.renderQuality);
+    const choice = useViewer((s) => s.renderQualityChoice);
+    const qualities = qualityOptions(i18n);
+    const active = qualities.find((o) => o.id === quality) ?? qualities[2];
+    const autoName = i18n._({ id: 'viewer.daylight.quality.auto', message: 'Auto' });
+    return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(Gauge, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.quality.title', message: 'Quality' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: choice === 'auto' ? `${autoName} (${active.name})` : active.name })] }), _jsxs(DropdownMenuSubContent, { className: subContentClassName, children: [_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setRenderQuality('auto'), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground", children: autoName }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({
+                                            id: 'viewer.daylight.quality.autoDetail',
+                                            message: 'Picked for this device: {tier}',
+                                            values: { tier: active.name },
+                                        }) })] }), choice === 'auto' ? _jsx(Check, { className: "ml-auto h-4 w-4 text-foreground" }) : null] }), qualities.map((option) => (_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setRenderQuality(option.id), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground", children: option.name }), _jsx("span", { className: "text-muted-foreground text-xs", children: option.detail })] }), choice === option.id ? _jsx(Check, { className: "ml-auto h-4 w-4 text-foreground" }) : null] }, option.id)))] })] }));
+}
+export function DaylightMenu({ subContentClassName = 'dark min-w-48', }) {
+    const i18n = usePascalI18n();
+    const timeOfDay = useViewer((s) => s.timeOfDay);
+    const weather = useViewer((s) => s.weather);
+    const deviceLocation = useViewer((s) => s.deviceLocation);
+    const siteHasLocation = useScene((state) => {
+        for (const id of state.rootNodeIds) {
+            const node = state.nodes[id];
+            if (node?.type === 'site')
+                return Boolean(node.parcel?.originLngLat || node.dossier?.point);
+        }
+        return false;
+    });
+    const [locating, setLocating] = useState(false);
+    // The sky chip beside the compass carries time and weather wherever it is mounted.
+    const skyChip = useSkyPanel((s) => s.hosts > 0);
+    const times = timeOptions(i18n);
+    const weathers = weatherOptions(i18n);
+    const activeTime = times.find((o) => o.id === timeOfDay) ?? times[1];
+    const activeWeather = weathers.find((o) => o.id === weather) ?? weathers[1];
+    const source = siteHasLocation ? 'site' : resolveLocation(null, deviceLocation).source;
+    if (skyChip) {
+        const WeatherIcon = weatherIcon(weather);
+        return (_jsxs(DropdownMenuItem, { onSelect: openSkyPanel, children: [_jsx(WeatherIcon, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.sky.menuItem', message: 'Time & weather' }) }), _jsxs("span", { className: "ml-auto flex items-center gap-1 text-violet-600 text-xs dark:text-violet-300", children: [i18n._({ id: 'viewer.daylight.sky.inViewport', message: 'In viewport' }), _jsx(ArrowDownLeft, { className: "h-3.5 w-3.5" })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(activeTime.icon, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.time.title', message: 'Time of day' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: activeTime.name })] }), _jsxs(DropdownMenuSubContent, { className: subContentClassName, children: [times.map((option) => (_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setTimeOfDay(option.id), children: [_jsx(option.icon, { className: "h-4 w-4" }), _jsx("span", { children: option.name }), timeOfDay === option.id ? _jsx(Check, { className: "ml-auto h-4 w-4" }) : null] }, option.id))), source !== 'site' ? (_jsxs(DropdownMenuItem, { disabled: locating, onSelect: (event) => {
+                                    event.preventDefault();
+                                    setLocating(true);
+                                    requestDeviceLocation()
+                                        .then((location) => useViewer.getState().setDeviceLocation(location))
+                                        .catch(() => { })
+                                        .finally(() => setLocating(false));
+                                }, children: [_jsx(LocateFixed, { className: "h-4 w-4" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: i18n._({ id: 'viewer.daylight.location.use', message: 'Use my location' }) }), _jsx("span", { className: "text-muted-foreground text-xs", children: source === 'device'
+                                                    ? i18n._({
+                                                        id: 'viewer.daylight.location.device',
+                                                        message: 'Sun follows your location',
+                                                    })
+                                                    : i18n._({
+                                                        id: 'viewer.daylight.location.approximate',
+                                                        message: 'Sun position is approximate',
+                                                    }) })] })] })) : null] })] }), _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [weather === 'clear' ? _jsx(CloudSun, { className: "h-4 w-4" }) : _jsx(Cloud, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.weather.title', message: 'Weather' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: activeWeather.name })] }), _jsx(DropdownMenuSubContent, { className: subContentClassName, children: weathers.map((option) => (_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setWeather(option.id), children: [_jsx("span", { children: option.name }), weather === option.id ? _jsx(Check, { className: "ml-auto h-4 w-4" }) : null] }, option.id))) })] })] }));
+}
+/** Ink edges on (soft) or off. The menu stays open on toggle. */
+export function EdgesToggleItem() {
+    const i18n = usePascalI18n();
+    const on = useViewer((s) => s.edges !== 'off');
+    return (_jsxs(DropdownMenuItem, { onSelect: (event) => {
+            event.preventDefault();
+            useViewer.getState().setEdges(on ? 'off' : 'soft');
+        }, children: [_jsx(PenLine, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.display.edges.title', message: 'Edges' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: on
+                    ? i18n._({ id: 'viewer.common.on', message: 'On' })
+                    : i18n._({ id: 'viewer.common.off', message: 'Off' }) })] }));
+}

package/dist/ui/components/rooms/room-highlight.d.ts

@@ -0,0 +1,10 @@
+import { type Object3D } from 'three';
+import { type RoomAssemblyHeights } from '../../lib/room-assembly-overlay';
+import type { RoomSelectionRecord } from '../../lib/room-selection';
+/** A room's floor, wall faces and outline in the highlight colour, riding its level's object. */
+export declare function RoomAssemblyMesh({ room, heights, levelObject, }: {
+    room: RoomSelectionRecord;
+    heights: RoomAssemblyHeights;
+    levelObject: () => Object3D | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=room-highlight.d.ts.map

package/dist/ui/components/rooms/room-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"room-highlight.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/rooms/room-highlight.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,KAAK,QAAQ,EACd,MAAM,OAAO,CAAA;AAGd,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AAC3F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AA2BnE,iGAAiG;AACjG,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,WAAW,GACZ,EAAE;IACD,IAAI,EAAE,mBAAmB,CAAA;IACzB,OAAO,EAAE,mBAAmB,CAAA;IAC5B,WAAW,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAA;CACxC,+BAqDA"}

package/dist/ui/components/rooms/room-highlight.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from '@react-three/fiber';
+import { useEffect, useMemo, useRef } from 'react';
+import { BufferGeometry, DoubleSide, Float32BufferAttribute, } from 'three';
+import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu';
+import { OVERLAY_LAYER } from '../../../lib/layers';
+import { getRoomAssembly } from '../../lib/room-assembly-overlay';
+const noRaycast = () => { };
+const outlineMaterial = new LineBasicNodeMaterial({
+    color: '#818cf8',
+    depthTest: false,
+    depthWrite: false,
+});
+const fillMaterial = (opacity) => new MeshBasicNodeMaterial({
+    color: '#818cf8',
+    depthTest: false,
+    depthWrite: false,
+    opacity,
+    side: DoubleSide,
+    transparent: true,
+});
+const floorMaterial = fillMaterial(0.18);
+// Walls and the ceiling stack over the floor when seen from above.
+const surfaceMaterial = fillMaterial(0.1);
+function positions(array) {
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new Float32BufferAttribute(array, 3));
+    return geometry;
+}
+/** A room's floor, wall faces and outline in the highlight colour, riding its level's object. */
+export function RoomAssemblyMesh({ room, heights, levelObject, }) {
+    const ref = useRef(null);
+    const assembly = useMemo(() => getRoomAssembly(room.geometry, heights), [room, heights]);
+    const geometry = useMemo(() => ({
+        floor: positions(assembly.floor),
+        surfaces: positions(assembly.surfaces),
+        outline: positions(assembly.outline),
+    }), [assembly]);
+    useEffect(() => () => {
+        geometry.floor.dispose();
+        geometry.surfaces.dispose();
+        geometry.outline.dispose();
+    }, [geometry]);
+    useFrame(() => {
+        const level = levelObject();
+        if (!ref.current)
+            return;
+        ref.current.visible = !!level;
+        if (level) {
+            level.updateWorldMatrix(true, false);
+            ref.current.matrix.copy(level.matrixWorld);
+        }
+    });
+    return (_jsxs("group", { matrixAutoUpdate: false, ref: ref, children: [_jsx("mesh", { geometry: geometry.floor, layers: OVERLAY_LAYER, material: floorMaterial, raycast: noRaycast, renderOrder: 100 }), _jsx("mesh", { geometry: geometry.surfaces, layers: OVERLAY_LAYER, material: surfaceMaterial, raycast: noRaycast, renderOrder: 100 }), _jsx("lineSegments", { geometry: geometry.outline, layers: OVERLAY_LAYER, material: outlineMaterial, raycast: noRaycast, renderOrder: 101 })] }));
+}