@pascal-app/viewer 1.1.0 → 1.1.2

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

@@ -0,0 +1,117 @@
+'use client';
+import { emitter } from '@pascal-app/core';
+import { useThree } from '@react-three/fiber';
+import { useCallback, useEffect, useRef } from 'react';
+import { Vector3 } from 'three';
+import useViewer from '../../store/use-viewer';
+import { normalizeCameraPose } from '../lib/camera-pose';
+import { publishCameraPose } from '../store/camera-pose-store';
+const position = new Vector3();
+const target = new Vector3();
+function isPerspectiveCamera(camera) {
+    return camera.isPerspectiveCamera === true;
+}
+function isOrthographicCamera(camera) {
+    return camera.isOrthographicCamera === true;
+}
+function cameraViewWidth(camera, distance, width, height) {
+    if (isPerspectiveCamera(camera)) {
+        const fov = (camera.getEffectiveFOV() * Math.PI) / 180;
+        return Math.max(0.001, 2 * distance * Math.tan(fov / 2) * (width / Math.max(height, 1)));
+    }
+    if (isOrthographicCamera(camera)) {
+        return Math.max(0.001, (camera.right - camera.left) / camera.zoom);
+    }
+    return Math.max(0.001, distance);
+}
+function applyViewWidth(controls, camera, viewWidth, width, height) {
+    if (isPerspectiveCamera(camera)) {
+        const fov = (camera.getEffectiveFOV() * Math.PI) / 180;
+        const denominator = 2 * Math.tan(fov / 2) * (width / Math.max(height, 1));
+        if (denominator > 0)
+            controls.dollyTo(Math.max(0.001, viewWidth / denominator), false);
+        return;
+    }
+    if (isOrthographicCamera(camera) && viewWidth > 0) {
+        controls.zoomTo(Math.max(0.001, (camera.right - camera.left) / viewWidth), false);
+    }
+}
+export function useViewerCameraNavigationSync(controls) {
+    const camera = useThree((state) => state.camera);
+    const size = useThree((state) => state.size);
+    const suppressPublish = useRef(false);
+    const pendingPose = useRef(null);
+    const publishCurrentPose = useCallback(() => {
+        const control = controls.current;
+        if (!control || suppressPublish.current)
+            return;
+        control.getPosition(position, false);
+        control.getTarget(target, false);
+        const projection = isPerspectiveCamera(camera)
+            ? 'perspective'
+            : isOrthographicCamera(camera)
+                ? 'orthographic'
+                : null;
+        if (!projection)
+            return;
+        const pose = normalizeCameraPose({
+            position: [position.x, position.y, position.z],
+            target: [target.x, target.y, target.z],
+            projection,
+            viewWidth: cameraViewWidth(camera, position.distanceTo(target), size.width, size.height),
+            ...(isPerspectiveCamera(camera) ? { fov: camera.fov } : {}),
+        });
+        if (pose)
+            publishCameraPose(pose);
+    }, [camera, controls, size.height, size.width]);
+    const applyPendingPose = useCallback(() => {
+        const control = controls.current;
+        const pose = pendingPose.current;
+        if (!(control && pose))
+            return;
+        const projectionMatches = (pose.projection === 'perspective' && isPerspectiveCamera(camera)) ||
+            (pose.projection === 'orthographic' && isOrthographicCamera(camera));
+        if (!projectionMatches)
+            return;
+        pendingPose.current = null;
+        suppressPublish.current = true;
+        try {
+            if (pose.fov !== undefined && isPerspectiveCamera(camera)) {
+                camera.fov = pose.fov;
+                camera.updateProjectionMatrix();
+            }
+            control.setLookAt(pose.position[0], pose.position[1], pose.position[2], pose.target[0], pose.target[1], pose.target[2], false);
+            if (pose.viewWidth !== undefined) {
+                applyViewWidth(control, camera, pose.viewWidth, size.width, size.height);
+            }
+            control.update(0);
+        }
+        finally {
+            suppressPublish.current = false;
+            publishCurrentPose();
+        }
+    }, [camera, controls, publishCurrentPose, size.height, size.width]);
+    useEffect(() => {
+        applyPendingPose();
+    }, [applyPendingPose]);
+    useEffect(() => {
+        const applyPose = (value) => {
+            const pose = normalizeCameraPose(value);
+            if (!pose)
+                return;
+            pendingPose.current = pose;
+            if (useViewer.getState().cameraMode !== pose.projection) {
+                useViewer.getState().setCameraMode(pose.projection);
+                return;
+            }
+            applyPendingPose();
+        };
+        emitter.on('camera-controls:apply-pose', applyPose);
+        return () => emitter.off('camera-controls:apply-pose', applyPose);
+    }, [applyPendingPose]);
+    useEffect(() => {
+        const frame = requestAnimationFrame(publishCurrentPose);
+        return () => cancelAnimationFrame(frame);
+    }, [publishCurrentPose]);
+    return publishCurrentPose;
+}

package/dist/ui/components/viewer-controls-bar.d.ts

@@ -0,0 +1,20 @@
+export type ViewerControlsBarProps = {
+    canShowScans?: boolean;
+    canShowGuides?: boolean;
+    /** A baked GLB is the active artifact: hide controls it can't honor (wall
+     *  modes aren't baked into the GLB). */
+    glbActive?: boolean;
+    /** In GLB mode, whether scans/guides were re-added from scene data — so the
+     *  visibility control surfaces the matching toggle even though the artifact
+     *  itself carries none. */
+    glbHasScans?: boolean;
+    glbHasGuides?: boolean;
+    walkthroughActive?: boolean;
+    onWalkthroughToggle: () => void;
+    /** The free-flying drone camera; its button shows only with a handler, and never on touch. */
+    droneActive?: boolean;
+    onDroneToggle?: () => void;
+    className?: string;
+};
+export declare const ViewerControlsBar: ({ canShowScans, canShowGuides, glbActive, glbHasScans, glbHasGuides, walkthroughActive, onWalkthroughToggle, droneActive, onDroneToggle, className, }: ViewerControlsBarProps) => import("react").JSX.Element;
+//# sourceMappingURL=viewer-controls-bar.d.ts.map

package/dist/ui/components/viewer-controls-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-controls-bar.d.ts","sourceRoot":"","sources":["../../../src/ui/components/viewer-controls-bar.tsx"],"names":[],"mappings":"AAsPA,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;4CACwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;+BAE2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,EAAE,MAAM,IAAI,CAAA;IAC/B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,iBAAiB,0JAW3B,sBAAsB,gCA2NxB,CAAA"}

package/dist/ui/components/viewer-controls-bar.js

@@ -0,0 +1,130 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { emitter, usePascalI18n } from '@pascal-app/core';
+import { Camera, Check, Contrast, Diamond, Drone, Eye, EyeOff, Footprints, Layers, Layers2, Palette, SlidersHorizontal, Square, SwatchBook, } from 'lucide-react';
+import { CLAY_PALETTE } from '../../lib/materials';
+import { getSceneTheme, SCENE_THEMES } from '../../lib/scene-themes';
+import { getViewerConfig } from '../../lib/viewer-config';
+import useViewer from '../../store/use-viewer';
+import { useIsMobile } from '../hooks/use-mobile';
+import { cn } from '../lib/cn';
+import { sceneThemeName } from '../lib/scene-theme-name';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../primitives/dropdown-menu';
+import { TooltipProvider } from '../primitives/tooltip';
+import { ActionButton } from './action-button';
+import { FollowPascalToggle } from './follow-pascal-toggle';
+import { DaylightMenu, EdgesToggleItem, QualityMenu } from './render-settings-menu';
+import { SKY_DOCK_HEIGHT, SkyControl } from './sky-control';
+// Resolved per render from `configureViewer({ iconsBaseUrl })`: app icons, not item assets.
+const iconUrl = (name) => `${getViewerConfig().iconsBaseUrl}/${name}.webp`;
+const wallModeConfig = {
+    up: { icon: 'room' },
+    cutaway: { icon: 'wallcut' },
+    down: { icon: 'walllow' },
+};
+function levelModeLabel(mode, i18n) {
+    if (mode === 'stacked')
+        return i18n._({ id: 'viewer.levels.stacked', message: 'Stacked' });
+    if (mode === 'exploded')
+        return i18n._({ id: 'viewer.levels.exploded', message: 'Exploded' });
+    if (mode === 'solo')
+        return i18n._({ id: 'viewer.levels.solo', message: 'Solo' });
+    return i18n._({ id: 'viewer.levels.manual', message: 'Manual' });
+}
+function wallModeLabel(mode, i18n) {
+    if (mode === 'up')
+        return i18n._({ id: 'viewer.walls.fullHeight', message: 'Full height' });
+    if (mode === 'down')
+        return i18n._({ id: 'viewer.walls.low', message: 'Low' });
+    return i18n._({ id: 'viewer.walls.cutaway', message: 'Cutaway' });
+}
+// Keep the dropdown open when flipping an in-place toggle row.
+const keepOpen = (event, fn) => {
+    event.preventDefault();
+    fn();
+};
+// Scans + guides folded into one control. A baked GLB carries none of its own,
+// but the GLB viewer re-adds them from scene data when the privacy flags allow,
+// so the toggle shows for whichever exist.
+function VisibilityMenu({ canShowScans, canShowGuides, }) {
+    const i18n = usePascalI18n();
+    const showScans = useViewer((s) => s.showScans);
+    const showGuides = useViewer((s) => s.showGuides);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { className: "hover:bg-white/5 hover:text-foreground", label: i18n._({ id: 'viewer.visibility.title', message: 'Visibility' }), size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx(Eye, { className: "h-5 w-5" }) }) }), _jsxs(DropdownMenuContent, { align: "center", className: "dark min-w-44", side: "top", children: [canShowScans && (_jsxs(DropdownMenuItem, { onSelect: (e) => keepOpen(e, () => useViewer.getState().setShowScans(!showScans)), children: [_jsx("img", { alt: "", className: "h-4 w-4 object-contain", src: iconUrl('mesh') }), _jsx("span", { children: i18n._({ id: 'viewer.visibility.scans', message: 'Scans' }) }), showScans ? (_jsx(Eye, { className: "ml-auto h-4 w-4 text-foreground" })) : (_jsx(EyeOff, { className: "ml-auto h-4 w-4 text-muted-foreground" }))] })), canShowGuides && (_jsxs(DropdownMenuItem, { onSelect: (e) => keepOpen(e, () => useViewer.getState().setShowGuides(!showGuides)), children: [_jsx("img", { alt: "", className: "h-4 w-4 object-contain", src: iconUrl('floorplan') }), _jsx("span", { children: i18n._({ id: 'viewer.visibility.guides', message: 'Guides' }) }), showGuides ? (_jsx(Eye, { className: "ml-auto h-4 w-4 text-foreground" })) : (_jsx(EyeOff, { className: "ml-auto h-4 w-4 text-muted-foreground" }))] }))] })] }));
+}
+// One "Display" button gathering shadows, camera projection, colors, render
+// mode, scene theme and edges.
+function DisplayMenu() {
+    const i18n = usePascalI18n();
+    const cameraMode = useViewer((s) => s.cameraMode);
+    const textures = useViewer((s) => s.textures);
+    const shadows = useViewer((s) => s.shadows);
+    const sceneTheme = useViewer((s) => s.sceneTheme);
+    const activeTheme = getSceneTheme(sceneTheme);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { className: "hover:bg-white/5 hover:text-foreground", label: i18n._({ id: 'viewer.display.title', message: 'Display settings' }), size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx(SlidersHorizontal, { className: "h-5 w-5" }) }) }), _jsxs(DropdownMenuContent, { align: "center", className: "dark min-w-56", side: "top", children: [_jsxs(DropdownMenuItem, { onSelect: (e) => keepOpen(e, () => useViewer.getState().setShadows(!shadows)), children: [_jsx(Contrast, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.display.shadows', message: 'Shadows' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: shadows
+                                    ? i18n._({ id: 'viewer.common.on', message: 'On' })
+                                    : i18n._({ id: 'viewer.common.off', message: 'Off' }) })] }), _jsxs(DropdownMenuItem, { onSelect: (e) => keepOpen(e, () => useViewer
+                            .getState()
+                            .setCameraMode(cameraMode === 'perspective' ? 'orthographic' : 'perspective')), children: [_jsx(Camera, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.display.camera', message: 'Camera' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: cameraMode === 'perspective'
+                                    ? i18n._({ id: 'viewer.display.perspective', message: 'Perspective' })
+                                    : i18n._({ id: 'viewer.display.orthographic', message: 'Orthographic' }) })] }), _jsxs(DropdownMenuItem, { onSelect: (e) => keepOpen(e, () => useViewer.getState().setTextures(!textures)), children: [textures ? _jsx(Palette, { className: "h-4 w-4" }) : _jsx(Square, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.display.colors', message: 'Colors' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: textures
+                                    ? i18n._({ id: 'viewer.display.colored', message: 'Colored' })
+                                    : i18n._({ id: 'viewer.display.monochrome', message: 'Monochrome' }) })] }), _jsx(DropdownMenuSeparator, {}), _jsx(QualityMenu, { subContentClassName: "dark min-w-56" }), textures ? (_jsx(DaylightMenu, { subContentClassName: "dark min-w-48" })) : (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(SwatchBook, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.theme.title', message: 'Scene theme' }) }), _jsx("span", { className: "ml-auto truncate text-muted-foreground text-xs", children: sceneThemeName(activeTheme.id, activeTheme.name, i18n) })] }), _jsx(DropdownMenuSubContent, { className: "dark min-w-48", children: SCENE_THEMES.map((theme) => {
+                                            const swatches = ['wall', 'roof', 'floor', 'glazing'].map((role) => theme.clayTints?.[role] ?? CLAY_PALETTE[role]);
+                                            return (_jsxs(DropdownMenuItem, { className: "gap-2", onSelect: () => useViewer.getState().setSceneTheme(theme.id), children: [_jsx("span", { className: "grid h-5 w-5 shrink-0 grid-cols-2 overflow-hidden rounded-sm border border-black/10", style: { backgroundColor: theme.background }, children: swatches.map((color, index) => (_jsx("span", { style: { backgroundColor: color } }, `${theme.id}-${index}`))) }), _jsx("span", { children: sceneThemeName(theme.id, theme.name, i18n) }), sceneTheme === theme.id ? _jsx(Check, { className: "ml-auto h-4 w-4" }) : null] }, theme.id));
+                                        }) })] }), _jsx(EdgesToggleItem, {})] }))] })] }));
+}
+export const ViewerControlsBar = ({ canShowScans = true, canShowGuides = true, glbActive = false, glbHasScans = false, glbHasGuides = false, walkthroughActive = false, onWalkthroughToggle, droneActive = false, onDroneToggle, className, }) => {
+    const i18n = usePascalI18n();
+    const levelMode = useViewer((s) => s.levelMode);
+    const wallMode = useViewer((s) => s.wallMode);
+    const textures = useViewer((s) => s.textures);
+    const isMobile = useIsMobile();
+    // Sessions may carry a stale mode outside the cycle (e.g. the retired
+    // 'translucent'); render and cycle it as cutaway instead of crashing.
+    const safeWallMode = (wallMode in wallModeConfig ? wallMode : 'cutaway');
+    return (_jsxs(_Fragment, { children: [textures && !isMobile ? (_jsx(SkyControl, { dark: true, height: SKY_DOCK_HEIGHT.viewer, style: { left: 52 } })) : null, _jsx("div", { className: cn('dark absolute bottom-4 left-1/2 z-20 -translate-x-1/2 text-foreground sm:bottom-6', className), children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("div", { "data-surface": "viewer-dock", className: "corner-smooth pointer-events-auto flex h-12 max-w-[calc(100vw-1rem)] flex-row items-center justify-center gap-0.5 overflow-hidden rounded-2xl border border-border/40 bg-background/95 p-1 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out sm:h-14 sm:gap-1.5 sm:p-1.5", children: [((canShowScans && (!glbActive || glbHasScans)) ||
+                                (canShowGuides && (!glbActive || glbHasGuides))) && (_jsxs(_Fragment, { children: [_jsx(VisibilityMenu, { canShowGuides: canShowGuides && (!glbActive || glbHasGuides), canShowScans: canShowScans && (!glbActive || glbHasScans) }), _jsx("div", { className: "mx-1 h-5 w-px bg-border/40" })] })), _jsxs(ActionButton, { className: levelMode === 'stacked'
+                                    ? 'hover:bg-white/5 hover:text-amber-400'
+                                    : 'bg-amber-500/20 text-amber-400', label: i18n._({
+                                    id: 'viewer.levels.label',
+                                    message: 'Levels: {mode}',
+                                    values: { mode: levelModeLabel(levelMode, i18n) },
+                                }), onClick: () => {
+                                    if (levelMode === 'manual')
+                                        return useViewer.getState().setLevelMode('stacked');
+                                    const modes = ['stacked', 'exploded', 'solo'];
+                                    const nextIndex = (modes.indexOf(levelMode) + 1) % modes.length;
+                                    useViewer.getState().setLevelMode(modes[nextIndex] ?? 'stacked');
+                                }, size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: [levelMode === 'solo' && _jsx(Diamond, { className: "h-6 w-6" }), levelMode === 'exploded' && _jsx(Layers2, { className: "h-6 w-6" }), (levelMode === 'stacked' || levelMode === 'manual') && (_jsx(Layers, { className: "h-6 w-6" }))] }), !glbActive && (_jsx(ActionButton, { className: safeWallMode === 'cutaway'
+                                    ? 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0'
+                                    : 'bg-white/10', label: i18n._({
+                                    id: 'viewer.walls.label',
+                                    message: 'Walls: {mode}',
+                                    values: { mode: wallModeLabel(safeWallMode, i18n) },
+                                }), onClick: () => {
+                                    const modes = ['cutaway', 'up', 'down'];
+                                    const nextIndex = (modes.indexOf(safeWallMode) + 1) % modes.length;
+                                    useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway');
+                                }, size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx("img", { alt: wallModeLabel(safeWallMode, i18n), className: "h-[28px] w-[28px]", height: 28, src: iconUrl(wallModeConfig[safeWallMode].icon), width: 28 }) })), _jsx("div", { className: "mx-1 h-5 w-px bg-border/40" }), _jsx(DisplayMenu, {}), _jsx("div", { className: "mx-1 h-5 w-px bg-border/40" }), _jsx(ActionButton, { className: walkthroughActive
+                                    ? 'bg-emerald-500/20 text-emerald-400'
+                                    : 'hover:bg-white/5 hover:text-emerald-400', label: i18n._({
+                                    id: 'viewer.walkthrough.label',
+                                    message: 'Walkthrough: {state}',
+                                    values: {
+                                        state: walkthroughActive
+                                            ? i18n._({ id: 'viewer.common.on', message: 'On' })
+                                            : i18n._({ id: 'viewer.common.off', message: 'Off' }),
+                                    },
+                                }), onClick: onWalkthroughToggle, size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx(Footprints, { className: "h-6 w-6" }) }), onDroneToggle && !isMobile && (_jsx(ActionButton, { className: droneActive
+                                    ? 'bg-emerald-500/20 text-emerald-400'
+                                    : 'hover:bg-white/5 hover:text-emerald-400', label: i18n._({
+                                    id: 'viewer.drone.label',
+                                    message: 'Drone: {state}',
+                                    values: {
+                                        state: droneActive
+                                            ? i18n._({ id: 'viewer.common.on', message: 'On' })
+                                            : i18n._({ id: 'viewer.common.off', message: 'Off' }),
+                                    },
+                                }), onClick: onDroneToggle, size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx(Drone, { className: "h-6 w-6" }) })), _jsx("div", { className: "mx-1 h-5 w-px bg-border/40" }), _jsx(FollowPascalToggle, { className: "hidden sm:inline-flex", tooltipClassName: "dark" }), _jsx(ActionButton, { className: "group hidden hover:bg-white/5 sm:inline-flex", label: i18n._({ id: 'viewer.camera.orbitLeft', message: 'Orbit left' }), onClick: () => emitter.emit('camera-controls:orbit-ccw'), size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx("img", { alt: i18n._({ id: 'viewer.camera.orbitLeft', message: 'Orbit left' }), className: "h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100", src: iconUrl('rotate') }) }), _jsx(ActionButton, { className: "group hidden hover:bg-white/5 sm:inline-flex", label: i18n._({ id: 'viewer.camera.orbitRight', message: 'Orbit right' }), onClick: () => emitter.emit('camera-controls:orbit-cw'), size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx("img", { alt: i18n._({ id: 'viewer.camera.orbitRight', message: 'Orbit right' }), className: "h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100", src: iconUrl('rotate') }) }), _jsx(ActionButton, { className: "group hover:bg-white/5", label: i18n._({ id: 'viewer.camera.topView', message: 'Top view' }), onClick: () => emitter.emit('camera-controls:top-view'), size: "icon", tooltipClassName: "dark", tooltipSide: "top", variant: "ghost", children: _jsx("img", { alt: i18n._({ id: 'viewer.camera.topView', message: 'Top view' }), className: "h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100", src: iconUrl('topview') }) })] }) }) })] }));
+};

package/dist/ui/components/viewer-hover-label.d.ts

@@ -0,0 +1,14 @@
+import type { DescriptorTranslator } from '../lib/room-name-messages';
+import { type ViewerNodes } from '../lib/viewer-selection';
+/** The hovered node's name, for the bottom pill. A room reads as the room. */
+export declare function viewerHoverLabel(hoveredId: string | null, nodes: ViewerNodes, i18n: DescriptorTranslator): string | null;
+/**
+ * What a click would select, named in a pill above the controls bar. Every
+ * viewer surface's hit source sets the hover (`applyViewerHover`); hidden in
+ * the walkthrough and on devices without a hovering pointer. Names come from
+ * the parametric scene store unless the surface passes its own graph.
+ */
+export declare function ViewerHoverLabel({ nodes: nodesProp }: {
+    nodes?: ViewerNodes;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=viewer-hover-label.d.ts.map

package/dist/ui/components/viewer-hover-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-hover-label.d.ts","sourceRoot":"","sources":["../../../src/ui/components/viewer-hover-label.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AACrE,OAAO,EAAE,KAAK,WAAW,EAAa,MAAM,yBAAyB,CAAA;AAErE,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,oBAAoB,GACzB,MAAM,GAAG,IAAI,CAIf;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,sCAgB7E"}

package/dist/ui/components/viewer-hover-label.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePascalI18n, useScene } from '@pascal-app/core';
+import useViewer from '../../store/use-viewer';
+import { nodeDisplayLabel } from '../lib/node-display-label';
+import { zoneLabel } from '../lib/viewer-selection';
+/** The hovered node's name, for the bottom pill. A room reads as the room. */
+export function viewerHoverLabel(hoveredId, nodes, i18n) {
+    const node = hoveredId ? nodes[hoveredId] : undefined;
+    if (!node)
+        return null;
+    return node.type === 'zone' ? zoneLabel(node, i18n) : nodeDisplayLabel(node);
+}
+/**
+ * What a click would select, named in a pill above the controls bar. Every
+ * viewer surface's hit source sets the hover (`applyViewerHover`); hidden in
+ * the walkthrough and on devices without a hovering pointer. Names come from
+ * the parametric scene store unless the surface passes its own graph.
+ */
+export function ViewerHoverLabel({ nodes: nodesProp }) {
+    const i18n = usePascalI18n();
+    const sceneNodes = useScene((s) => s.nodes);
+    const nodes = nodesProp ?? sceneNodes;
+    const label = useViewer((s) => s.walkthroughMode ? null : viewerHoverLabel(s.hoveredId, nodes, i18n));
+    if (!label)
+        return null;
+    return (_jsx("div", { className: "pointer-events-none absolute bottom-24 left-1/2 z-20 -translate-x-1/2 rounded-full border border-border/60 bg-background/90 px-3 py-1 text-foreground text-sm shadow-elevation-3 backdrop-blur [@media(hover:none)]:hidden", "data-testid": "viewer-hover-label", children: label }));
+}

package/dist/ui/components/viewer-scene-header.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type ViewerSource } from '../lib/viewer-selection';
+/** What a header link receives; a host passes its router's link component (e.g. Next's `Link`). */
+export type ViewerLinkProps = {
+    href: string;
+    className?: string;
+    'aria-label'?: string;
+    children: ReactNode;
+};
+export type ViewerSceneHeaderProps = {
+    projectName?: string | null;
+    owner?: {
+        username?: string | null;
+    } | null;
+    onBack?: () => void;
+    /** Fallback destination when no `onBack` handler is supplied. Must already be
+     *  sanitized by the caller. `null` shows no back arrow (an embedded viewer with
+     *  nowhere to go back to). */
+    backHref?: string | null;
+    /** Extra row under the project info (e.g. like and duplicate actions). */
+    stats?: ReactNode;
+    /** The scene the header navigates; the parametric scene store by default. */
+    source?: ViewerSource;
+    /** Renders the back and owner links; a plain `<a>` by default. */
+    linkComponent?: ComponentType<ViewerLinkProps>;
+};
+/**
+ * The navigation of every viewer surface: the project card, the bar (building
+ * › floor › room › element) and the floor list with, under the current floor,
+ * its units, rooms and zones. A row or a crumb selects and frames; the canvas
+ * selects in place (`ui/lib/viewer-selection.ts`).
+ */
+export declare const ViewerSceneHeader: ({ projectName, owner, onBack, backHref, stats, source: sourceProp, linkComponent: Link, }: ViewerSceneHeaderProps) => import("react").JSX.Element;
+//# sourceMappingURL=viewer-scene-header.d.ts.map

package/dist/ui/components/viewer-scene-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-scene-header.d.ts","sourceRoot":"","sources":["../../../src/ui/components/viewer-scene-header.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAA;AAMnE,OAAO,EAUL,KAAK,YAAY,EAGlB,MAAM,yBAAyB,CAAA;AAEhC,mGAAmG;AACnG,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAMD,MAAM,MAAM,sBAAsB,GAAG;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAA;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;kCAE8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,kEAAkE;IAClE,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAA;CAC/C,CAAA;AAUD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,8FAQ3B,sBAAsB,gCAyNxB,CAAA"}

package/dist/ui/components/viewer-scene-header.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sceneRegistry, useLocale, usePascalI18n, useScene, } from '@pascal-app/core';
+import { ArrowLeft, ChevronRight, Layers } from 'lucide-react';
+import { useMemo } from 'react';
+import { markPerfAction } from '../../lib/perf-actions';
+import useViewer from '../../store/use-viewer';
+import { cn } from '../lib/cn';
+import { localizedLevelName } from '../lib/level-name';
+import { formatRoomArea } from '../lib/room-area';
+import { applyViewerClick, frameViewerNode, roomOfObject, selectViewerBuilding, selectViewerLevel, selectViewerRoom, selectViewerUnit, viewerBreadcrumb, viewerSidebarSections, } from '../lib/viewer-selection';
+function PlainLink(props) {
+    return _jsx("a", { ...props });
+}
+function sectionTitle(kind, i18n) {
+    if (kind === 'units')
+        return i18n._({ id: 'viewer.header.units', message: 'Units' });
+    if (kind === 'rooms')
+        return i18n._({ id: 'viewer.header.rooms', message: 'Rooms' });
+    return i18n._({ id: 'viewer.header.zones', message: 'Zones' });
+}
+const parametricObject = (id) => sceneRegistry.nodes.get(id);
+/**
+ * The navigation of every viewer surface: the project card, the bar (building
+ * › floor › room › element) and the floor list with, under the current floor,
+ * its units, rooms and zones. A row or a crumb selects and frames; the canvas
+ * selects in place (`ui/lib/viewer-selection.ts`).
+ */
+export const ViewerSceneHeader = ({ projectName, owner, onBack, backHref = '/', stats, source: sourceProp, linkComponent: Link = PlainLink, }) => {
+    const i18n = usePascalI18n();
+    const catalogVersion = i18n.getVersion();
+    const locale = useLocale();
+    const sceneNodes = useScene((s) => s.nodes);
+    const source = useMemo(() => sourceProp ?? { nodes: sceneNodes, objectFor: parametricObject }, [sourceProp, sceneNodes]);
+    const { nodes } = source;
+    const selection = useViewer((s) => s.selection);
+    const focusedUnitId = useViewer((s) => s.focusedUnitId);
+    const unit = useViewer((s) => s.unit);
+    const crumbs = useMemo(() => viewerBreadcrumb(selection, focusedUnitId, nodes, i18n, (nodeId, levelId) => roomOfObject(nodeId, levelId, source)), [selection, focusedUnitId, nodes, source, i18n, locale, catalogVersion]);
+    const buildingId = crumbs.find((crumb) => crumb.kind === 'building')?.id ?? null;
+    // Highest first so the list reads top-down like a building section.
+    const levels = useMemo(() => {
+        const building = buildingId ? nodes[buildingId] : undefined;
+        if (building?.type !== 'building')
+            return [];
+        return building.children
+            .map((id) => nodes[id])
+            .filter((node) => node?.type === 'level')
+            .sort((a, b) => b.level - a.level);
+    }, [buildingId, nodes]);
+    const sections = useMemo(() => (selection.levelId ? viewerSidebarSections(selection.levelId, nodes, i18n) : []), [selection.levelId, nodes, i18n, locale, catalogVersion]);
+    const handleCrumb = (crumb) => {
+        switch (crumb.kind) {
+            case 'building':
+                return selectViewerBuilding(source);
+            case 'level':
+                return selectViewerLevel(crumb.id, source);
+            case 'unit':
+                return selectViewerUnit(crumb.id, source);
+            case 'room':
+                return selectViewerRoom(crumb.id, source);
+            case 'node':
+                applyViewerClick({ nodeId: crumb.id, point: null }, nodes);
+                return frameViewerNode(crumb.id, source);
+        }
+    };
+    return (_jsxs("div", { className: "dark absolute top-4 left-4 z-20 flex max-h-[calc(100%-7rem)] flex-col gap-3 text-foreground", children: [_jsxs("div", { className: "corner-smooth pointer-events-auto flex min-w-[200px] max-w-[min(28rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out", children: [_jsxs("div", { className: "flex items-center gap-3 px-3 py-2.5", children: [onBack ? (_jsx("button", { "aria-label": i18n._({ id: 'viewer.header.back', message: 'Back' }), className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-white/10", onClick: onBack, type: "button", children: _jsx(ArrowLeft, { className: "h-4 w-4 text-muted-foreground" }) })) : backHref === null ? null : (_jsx(Link, { "aria-label": i18n._({ id: 'viewer.header.back', message: 'Back' }), className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-white/10", href: backHref, children: _jsx(ArrowLeft, { className: "h-4 w-4 text-muted-foreground" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-medium text-foreground text-sm", children: projectName || i18n._({ id: 'viewer.header.untitled', message: 'Untitled' }) }), owner?.username && (_jsxs(Link, { className: "text-muted-foreground text-xs transition-colors hover:text-foreground", href: `/u/${owner.username}`, children: ["@", owner.username] }))] })] }), stats && (_jsx("div", { className: "flex items-center gap-1 border-border/40 border-t px-3 py-2", children: stats })), crumbs.length > 0 && (_jsx("nav", { "aria-label": i18n._({ id: 'viewer.header.selection', message: 'Selection' }), className: "flex flex-wrap items-center gap-x-1.5 gap-y-1 border-border/40 border-t px-3 py-2 text-xs", "data-testid": "viewer-breadcrumb", children: crumbs.map((crumb, index) => {
+                            const isLast = index === crumbs.length - 1;
+                            return (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [index > 0 && _jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/50" }), _jsx("button", { className: cn('truncate transition-colors', isLast
+                                            ? 'font-medium text-foreground'
+                                            : 'text-muted-foreground hover:text-foreground'), "data-crumb": crumb.kind, onClick: () => handleCrumb(crumb), type: "button", children: crumb.label })] }, `${crumb.kind}:${crumb.id}`));
+                        }) }))] }), levels.length > 0 && (_jsxs("div", { className: "corner-smooth pointer-events-auto flex min-h-0 w-56 flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 py-1 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out", children: [_jsx("span", { className: "px-3 py-2 font-medium text-[10px] text-muted-foreground uppercase tracking-wider", children: i18n._({ id: 'viewer.header.levels', message: 'Levels' }) }), _jsx("div", { className: "flex min-h-0 flex-col overflow-y-auto", children: levels.map((lvl) => {
+                            const isSelected = lvl.id === selection.levelId;
+                            return (_jsxs("div", { children: [_jsx("button", { className: cn('group/row relative flex h-8 w-full cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b px-3 text-sm transition-all duration-200', isSelected
+                                            ? 'border-r-3 border-r-white bg-accent/50 text-foreground'
+                                            : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground'), onClick: () => {
+                                            if (!isSelected)
+                                                markPerfAction('level-switch', lvl.id);
+                                            selectViewerLevel(lvl.id, source);
+                                        }, type: "button", children: _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: cn('flex h-4 w-4 shrink-0 items-center justify-center transition-all duration-200', !isSelected && 'opacity-60 grayscale'), children: _jsx(Layers, { className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "min-w-0 flex-1 truncate text-left", children: localizedLevelName(lvl, i18n, locale) })] }) }), isSelected &&
+                                        sections.map((section) => (_jsxs("div", { className: "border-border/50 border-b pb-1", "data-viewer-section": section.kind, children: [_jsx("span", { className: "block px-3 pt-2 pb-1 pl-9 font-medium text-[10px] text-muted-foreground uppercase tracking-wider", children: sectionTitle(section.kind, i18n) }), section.rows.map((row) => {
+                                                    const active = section.kind === 'units'
+                                                        ? row.id === focusedUnitId
+                                                        : row.id === selection.zoneId;
+                                                    return (_jsxs("button", { className: cn('flex h-7 w-full cursor-pointer select-none items-center gap-2 pr-3 pl-9 text-left text-sm transition-colors', active
+                                                            ? 'bg-accent/50 text-foreground'
+                                                            : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground'), onClick: () => section.kind === 'units'
+                                                            ? selectViewerUnit(row.id, source)
+                                                            : selectViewerRoom(row.id, source), type: "button", children: [_jsx("span", { className: "h-2 w-2 shrink-0 rounded-full", style: { backgroundColor: row.color } }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: row.label }), _jsx("span", { className: "shrink-0 font-mono text-[11px] text-muted-foreground tabular-nums", children: formatRoomArea(row.areaM2, unit, locale) })] }, row.id));
+                                                })] }, section.kind)))] }, lvl.id));
+                        }) })] }))] }));
+};

package/dist/ui/components/viewer-selection-manager.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Selection for a parametric viewer surface (the published viewer's fallback,
+ * its embed, the editor's Preview): free-form and room-first, through the same
+ * rules as the baked viewer. Mount it with `<Viewer selectionManager="custom">`.
+ */
+export declare function ViewerSelectionManager(): import("react").JSX.Element;
+//# sourceMappingURL=viewer-selection-manager.d.ts.map

package/dist/ui/components/viewer-selection-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-selection-manager.d.ts","sourceRoot":"","sources":["../../../src/ui/components/viewer-selection-manager.tsx"],"names":[],"mappings":"AAaA;;;;GAIG;AACH,wBAAgB,sBAAsB,gCAoErC"}

package/dist/ui/components/viewer-selection-manager.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emitter, sceneRegistry, useScene } from '@pascal-app/core';
+import { useThree } from '@react-three/fiber';
+import { useEffect } from 'react';
+import useViewer from '../../store/use-viewer';
+import { selectionModifiersFromEvent } from '../lib/selection-modifiers';
+import { applyViewerClick, applyViewerHover, viewerPickFromNodeEvent, } from '../lib/viewer-selection';
+/**
+ * Selection for a parametric viewer surface (the published viewer's fallback,
+ * its embed, the editor's Preview): free-form and room-first, through the same
+ * rules as the baked viewer. Mount it with `<Viewer selectionManager="custom">`.
+ */
+export function ViewerSelectionManager() {
+    const gl = useThree((state) => state.gl);
+    useEffect(() => {
+        let clickHandled = false;
+        let hoveredFrom = null;
+        const pendingClicks = new Set();
+        const onMove = (event) => {
+            if (useViewer.getState().walkthroughMode)
+                return;
+            const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes);
+            if (!pick)
+                return;
+            event.stopPropagation();
+            hoveredFrom = event.node.id;
+            applyViewerHover(pick, useScene.getState().nodes);
+        };
+        const onLeave = (event) => {
+            if (event.node.id !== hoveredFrom)
+                return;
+            hoveredFrom = null;
+            useViewer.getState().setHoveredId(null);
+        };
+        const onClick = (event) => {
+            if (useViewer.getState().walkthroughMode)
+                return;
+            const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes);
+            if (!pick)
+                return;
+            event.stopPropagation();
+            clickHandled = true;
+            applyViewerClick(pick, useScene.getState().nodes, selectionModifiersFromEvent(event.nativeEvent));
+        };
+        // A click on nothing selectable clears the room and the element.
+        const onCanvasClick = (event) => {
+            const viewer = useViewer.getState();
+            if (event.button !== 0 || viewer.walkthroughMode)
+                return;
+            if (viewer.cameraDragging || viewer.inputDragging)
+                return;
+            const frame = requestAnimationFrame(() => {
+                pendingClicks.delete(frame);
+                if (useViewer.getState().walkthroughMode)
+                    return;
+                if (clickHandled) {
+                    clickHandled = false;
+                    return;
+                }
+                applyViewerClick(null, useScene.getState().nodes);
+            });
+            pendingClicks.add(frame);
+        };
+        emitter.on('node:move', onMove);
+        emitter.on('node:enter', onMove);
+        emitter.on('node:leave', onLeave);
+        emitter.on('node:click', onClick);
+        const canvas = gl.domElement;
+        canvas.addEventListener('click', onCanvasClick);
+        return () => {
+            emitter.off('node:move', onMove);
+            emitter.off('node:enter', onMove);
+            emitter.off('node:leave', onLeave);
+            emitter.off('node:click', onClick);
+            canvas.removeEventListener('click', onCanvasClick);
+            for (const frame of pendingClicks)
+                cancelAnimationFrame(frame);
+            useViewer.getState().setHoveredId(null);
+        };
+    }, [gl]);
+    return _jsx(ViewerOutlineSync, {});
+}
+/** The selected elements and the hovered one, outlined (rooms highlight instead). */
+function ViewerOutlineSync() {
+    const selectedIds = useViewer((s) => s.selection.selectedIds);
+    const externalSelectedIds = useViewer((s) => s.externalSelectedIds);
+    const hoveredId = useViewer((s) => s.hoveredId);
+    const outliner = useViewer((s) => s.outliner);
+    const geometryRevision = useViewer((s) => s.geometryRevision);
+    const walkthrough = useViewer((s) => s.walkthroughMode);
+    const nodes = useScene((s) => s.nodes);
+    useEffect(() => {
+        void geometryRevision;
+        outliner.selectedObjects.length = 0;
+        outliner.hoveredObjects.length = 0;
+        if (walkthrough)
+            return;
+        for (const id of new Set([...selectedIds, ...externalSelectedIds])) {
+            const object = sceneRegistry.nodes.get(id);
+            if (object)
+                outliner.selectedObjects.push(object);
+        }
+        const hovered = hoveredId ? nodes[hoveredId] : undefined;
+        if (hovered && hovered.type !== 'zone') {
+            const object = sceneRegistry.nodes.get(hovered.id);
+            if (object)
+                outliner.hoveredObjects.push(object);
+        }
+    }, [selectedIds, externalSelectedIds, hoveredId, outliner, nodes, geometryRevision, walkthrough]);
+    useEffect(() => () => {
+        outliner.selectedObjects.length = 0;
+        outliner.hoveredObjects.length = 0;
+    }, [outliner]);
+    return null;
+}

package/dist/ui/components/viewer-stage-modes.d.ts

@@ -0,0 +1,7 @@
+export declare const VIEWER_STAGE_MODES: readonly ['3d', '2d', 'split'];
+export type ViewerStageMode = (typeof VIEWER_STAGE_MODES)[number];
+export declare function normalizeViewerStageModes(modes: readonly ViewerStageMode[] | undefined): readonly ViewerStageMode[];
+export declare function resolveViewerStageMode(mode: ViewerStageMode | undefined, modes: readonly ViewerStageMode[]): ViewerStageMode;
+export declare function resolveMobileViewerStageMode(mode: ViewerStageMode, modes: readonly ViewerStageMode[]): ViewerStageMode;
+export declare function viewerStageIncludes3D(modes: readonly ViewerStageMode[]): boolean;
+//# sourceMappingURL=viewer-stage-modes.d.ts.map

package/dist/ui/components/viewer-stage-modes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-stage-modes.d.ts","sourceRoot":"","sources":["../../../src/ui/components/viewer-stage-modes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,YAAI,IAAI,EAAE,IAAI,EAAE,OAAO,CAAU,CAAA;AAEhE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AASjE,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,SAAS,eAAe,EAAE,GAAG,SAAS,GAC5C,SAAS,eAAe,EAAE,CAc5B;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,eAAe,GAAG,SAAS,EACjC,KAAK,EAAE,SAAS,eAAe,EAAE,GAChC,eAAe,CAEjB;AAED,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,eAAe,EACrB,KAAK,EAAE,SAAS,eAAe,EAAE,GAChC,eAAe,CAKjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,eAAe,EAAE,WAEtE"}