@pascal-app/viewer 1.1.0 → 1.1.2

package/dist/ui/components/viewer-stage-modes.js

@@ -0,0 +1,42 @@
+export const VIEWER_STAGE_MODES = ['3d', '2d', 'split'];
+const THREE_D_MODES = ['3d'];
+const TWO_D_MODES = ['2d'];
+const SPLIT_MODES = ['split'];
+const THREE_D_TWO_D_MODES = ['3d', '2d'];
+const THREE_D_SPLIT_MODES = ['3d', 'split'];
+const TWO_D_SPLIT_MODES = ['2d', 'split'];
+export function normalizeViewerStageModes(modes) {
+    if (!modes)
+        return VIEWER_STAGE_MODES;
+    const has3D = modes.includes('3d');
+    const has2D = modes.includes('2d');
+    const hasSplit = modes.includes('split');
+    if (has3D && has2D && hasSplit)
+        return VIEWER_STAGE_MODES;
+    if (has3D && has2D)
+        return THREE_D_TWO_D_MODES;
+    if (has3D && hasSplit)
+        return THREE_D_SPLIT_MODES;
+    if (has2D && hasSplit)
+        return TWO_D_SPLIT_MODES;
+    if (has2D)
+        return TWO_D_MODES;
+    if (hasSplit)
+        return SPLIT_MODES;
+    return THREE_D_MODES;
+}
+export function resolveViewerStageMode(mode, modes) {
+    return mode && modes.includes(mode) ? mode : (modes[0] ?? '3d');
+}
+export function resolveMobileViewerStageMode(mode, modes) {
+    if (mode !== 'split')
+        return mode;
+    if (modes.includes('2d'))
+        return '2d';
+    if (modes.includes('3d'))
+        return '3d';
+    return 'split';
+}
+export function viewerStageIncludes3D(modes) {
+    return modes.includes('3d') || modes.includes('split');
+}

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

@@ -0,0 +1,10 @@
+import { type ViewerStageMode } from './viewer-stage-modes';
+export type ViewerStageSwitcherProps = {
+    className?: string;
+    hideSplitOnMobile?: boolean;
+    mode: ViewerStageMode;
+    modes?: readonly ViewerStageMode[];
+    onChange: (mode: ViewerStageMode) => void;
+};
+export declare function ViewerStageSwitcher({ className, hideSplitOnMobile, mode, modes, onChange, }: ViewerStageSwitcherProps): import("react").JSX.Element;
+//# sourceMappingURL=viewer-stage-switcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-stage-switcher.d.ts","sourceRoot":"","sources":["../../../src/ui/components/viewer-stage-switcher.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtF,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,IAAI,EAAE,eAAe,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,iBAAwB,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,GACT,EAAE,wBAAwB,+BAwC1B"}

package/dist/ui/components/viewer-stage-switcher.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePascalI18n } from '@pascal-app/core';
+import { Box, Columns2, Map as MapIcon } from 'lucide-react';
+import { cn } from '../lib/cn';
+import { normalizeViewerStageModes } from './viewer-stage-modes';
+export function ViewerStageSwitcher({ className, hideSplitOnMobile = true, mode, modes, onChange, }) {
+    const i18n = usePascalI18n();
+    const enabledModes = normalizeViewerStageModes(modes);
+    return (_jsxs("div", { "aria-label": i18n._({ id: 'viewer.stage.layout', message: 'Viewer layout' }), className: cn('dark absolute top-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full border border-white/10 bg-neutral-950/82 p-1 text-white shadow-elevation-4 backdrop-blur-xl', className), role: "group", children: [enabledModes.includes('3d') ? (_jsx(StageButton, { active: mode === '3d', icon: _jsx(Box, {}), label: "3D", onClick: () => onChange('3d') })) : null, enabledModes.includes('2d') ? (_jsx(StageButton, { active: mode === '2d', icon: _jsx(MapIcon, {}), label: "2D", onClick: () => onChange('2d') })) : null, enabledModes.includes('split') ? (_jsx(StageButton, { active: mode === 'split', className: hideSplitOnMobile && enabledModes.length > 1 ? 'hidden md:flex' : undefined, icon: _jsx(Columns2, {}), label: i18n._({ id: 'viewer.stage.split', message: 'Split' }), onClick: () => onChange('split') })) : null] }));
+}
+function StageButton({ active, className, icon, label, onClick, }) {
+    return (_jsxs("button", { "aria-pressed": active, className: cn('flex h-8 items-center gap-1.5 rounded-full px-3 font-medium text-xs', active
+            ? 'bg-white text-neutral-950 shadow-sm'
+            : 'text-neutral-300 transition-colors hover:bg-white/10 hover:text-white', className), onClick: onClick, type: "button", children: [_jsx("span", { className: "[&>svg]:size-3.5", children: icon }), label] }));
+}

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { type FloorplanPreviewScene } from '../floorplan/floorplan-preview';
+import { type ViewerStageMode } from './viewer-stage-modes';
+export type ViewerStageProps = {
+    children?: ReactNode;
+    className?: string;
+    collapseSplitOnMobile?: boolean;
+    compassHost?: Element | null;
+    defaultMode?: ViewerStageMode;
+    floorplanClassName?: string;
+    levelId?: string | null;
+    mode?: ViewerStageMode;
+    modes?: readonly ViewerStageMode[];
+    onLevelChange?: (levelId: string) => void;
+    onModeChange?: (mode: ViewerStageMode) => void;
+    scene?: FloorplanPreviewScene | null;
+    showCompass?: boolean;
+    showLevelSelector?: boolean;
+    showSwitcher?: boolean;
+    switcherClassName?: string;
+    synchronizeNavigation?: boolean;
+    threeDClassName?: string;
+};
+export declare function ViewerStage({ children, className, collapseSplitOnMobile, compassHost, defaultMode, floorplanClassName, levelId, mode: controlledMode, modes, onLevelChange, onModeChange, scene, showCompass, showLevelSelector, showSwitcher, switcherClassName, synchronizeNavigation, threeDClassName, }: ViewerStageProps): import("react").JSX.Element;
+//# sourceMappingURL=viewer-stage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-stage.d.ts","sourceRoot":"","sources":["../../../src/ui/components/viewer-stage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAE7F,OAAO,EAIL,KAAK,eAAe,EAErB,MAAM,sBAAsB,CAAA;AAG7B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IAC5B,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IAC9C,KAAK,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AA2BD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,qBAA4B,EAC5B,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,KAAK,EACL,aAAa,EACb,YAAY,EACZ,KAAK,EACL,WAAkB,EAClB,iBAAwB,EACxB,YAAmB,EACnB,iBAAiB,EACjB,qBAA4B,EAC5B,eAAe,GAChB,EAAE,gBAAgB,+BAyIlB"}

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

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScene } from '@pascal-app/core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { markPerfAction } from '../../lib/perf-actions';
+import useViewer from '../../store/use-viewer';
+import { FloorplanPreview } from '../floorplan/floorplan-preview';
+import { cn } from '../lib/cn';
+import { normalizeViewerStageModes, resolveMobileViewerStageMode, resolveViewerStageMode, viewerStageIncludes3D, } from './viewer-stage-modes';
+import { ViewerStageSwitcher } from './viewer-stage-switcher';
+const EMPTY_LEVEL_IDS = [];
+function levelNodeIds(nodes) {
+    return Object.values(nodes)
+        .filter((node) => node.type === 'level')
+        .sort((left, right) => (left.level ?? 0) - (right.level ?? 0))
+        .map((node) => node.id);
+}
+function selectViewerLevel(nodes, levelId) {
+    const level = nodes[levelId];
+    if (level?.type !== 'level')
+        return;
+    const building = level.parentId ? nodes[level.parentId] : null;
+    const viewer = useViewer.getState();
+    viewer.setSelection({
+        buildingId: building?.type === 'building' ? building.id : null,
+        levelId: level.id,
+        selectedIds: [],
+        zoneId: null,
+    });
+}
+export function ViewerStage({ children, className, collapseSplitOnMobile = true, compassHost, defaultMode, floorplanClassName, levelId, mode: controlledMode, modes, onLevelChange, onModeChange, scene, showCompass = true, showLevelSelector = true, showSwitcher = true, switcherClassName, synchronizeNavigation = true, threeDClassName, }) {
+    const enabledModes = normalizeViewerStageModes(modes);
+    const [internalMode, setInternalMode] = useState(() => resolveViewerStageMode(defaultMode, enabledModes));
+    const activeMode = resolveViewerStageMode(controlledMode ?? internalMode, enabledModes);
+    const storeLevelIds = useScene(useShallow((state) => (scene ? EMPTY_LEVEL_IDS : levelNodeIds(state.nodes))));
+    const externalLevelIds = useMemo(() => (scene ? levelNodeIds(scene.nodes) : null), [scene]);
+    const levelIds = externalLevelIds ?? storeLevelIds;
+    const selectedLevelId = useViewer((state) => state.selection.levelId);
+    const [internalLevelId, setInternalLevelId] = useState(null);
+    const [internalCompassHost, setInternalCompassHost] = useState(null);
+    const resolvedCompassHost = compassHost ?? internalCompassHost;
+    const floorplanEnabled = enabledModes.includes('2d') || enabledModes.includes('split');
+    const threeDEnabled = viewerStageIncludes3D(enabledModes);
+    const mountFloorplan = floorplanEnabled || showCompass;
+    const requestMode = useCallback((nextMode) => {
+        if (!enabledModes.includes(nextMode))
+            return;
+        if (controlledMode === undefined)
+            setInternalMode(nextMode);
+        onModeChange?.(nextMode);
+    }, [controlledMode, enabledModes, onModeChange]);
+    useEffect(() => {
+        if (controlledMode !== undefined) {
+            if (controlledMode !== activeMode)
+                onModeChange?.(activeMode);
+            return;
+        }
+        if (internalMode !== activeMode)
+            setInternalMode(activeMode);
+    }, [activeMode, controlledMode, internalMode, onModeChange]);
+    useEffect(() => {
+        if (!collapseSplitOnMobile)
+            return;
+        const mediaQuery = window.matchMedia('(max-width: 767px)');
+        const resolveMode = () => {
+            if (!mediaQuery.matches)
+                return;
+            const nextMode = resolveMobileViewerStageMode(activeMode, enabledModes);
+            if (nextMode !== activeMode)
+                requestMode(nextMode);
+        };
+        resolveMode();
+        mediaQuery.addEventListener('change', resolveMode);
+        return () => mediaQuery.removeEventListener('change', resolveMode);
+    }, [activeMode, collapseSplitOnMobile, enabledModes, requestMode]);
+    const chooseLevel = useCallback((nextLevelId, notify = true) => {
+        setInternalLevelId(nextLevelId);
+        if (notify && nextLevelId !== useViewer.getState().selection.levelId) {
+            markPerfAction('level-switch', nextLevelId);
+        }
+        if (nextLevelId !== useViewer.getState().selection.levelId)
+            selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId);
+        if (notify)
+            onLevelChange?.(nextLevelId);
+    }, [onLevelChange, scene]);
+    useEffect(() => {
+        if (activeMode === '3d' || levelIds.length === 0)
+            return;
+        const nextLevelId = (levelId && levelIds.includes(levelId) ? levelId : null) ??
+            (selectedLevelId && levelIds.includes(selectedLevelId) ? selectedLevelId : null) ??
+            (internalLevelId && levelIds.includes(internalLevelId) ? internalLevelId : null) ??
+            levelIds[0] ??
+            null;
+        if (nextLevelId)
+            chooseLevel(nextLevelId, false);
+    }, [activeMode, chooseLevel, internalLevelId, levelId, levelIds, selectedLevelId]);
+    return (_jsxs("div", { className: cn('relative h-full w-full overflow-hidden bg-neutral-100', className), "data-pascal-navigation-sync": synchronizeNavigation ? 'on' : 'off', "data-pascal-viewer-stage": activeMode, children: [showCompass && compassHost === undefined ? (_jsx("div", { className: "pointer-events-none absolute inset-0 z-30", ref: setInternalCompassHost })) : null, showSwitcher && enabledModes.length > 1 ? (_jsx(ViewerStageSwitcher, { className: switcherClassName, hideSplitOnMobile: collapseSplitOnMobile, mode: activeMode, modes: enabledModes, onChange: requestMode })) : null, _jsxs("div", { className: activeMode === 'split'
+                    ? 'absolute inset-0 grid grid-rows-2 md:grid-cols-2 md:grid-rows-1'
+                    : 'absolute inset-0', children: [threeDEnabled ? (_jsx("div", { className: cn(activeMode === '2d'
+                            ? 'pointer-events-none invisible absolute inset-0 h-full w-full'
+                            : 'relative h-full min-h-0 w-full min-w-0', threeDClassName), "data-pascal-viewer-3d": true, children: children })) : null, mountFloorplan ? (_jsx(FloorplanPreview, { className: cn(activeMode === '3d'
+                            ? 'hidden'
+                            : activeMode === 'split'
+                                ? 'min-h-0 min-w-0 border-border border-t md:border-t-0 md:border-l'
+                                : 'h-full w-full', floorplanClassName), compassHost: resolvedCompassHost, levelId: levelId ?? internalLevelId, navigationVisible: activeMode !== '3d', onLevelChange: chooseLevel, scene: scene, showCompass: showCompass, showLevelSelector: showLevelSelector, synchronizeNavigation: synchronizeNavigation })) : null] })] }));
+}

package/dist/ui/components/walkthrough-hud.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import type { WalkthroughInteract } from '../../store/use-first-person-hud';
+/** A control shown in the HUD's key strip: its keys (as printed on the keycaps) and what they do. */
+export type WalkthroughHint = {
+    keys: readonly string[];
+    action: string;
+};
+export type WalkthroughHudProps = {
+    floorLabel?: string | null;
+    zoneLabel?: string | null;
+    interact?: WalkthroughInteract;
+    /** Movement controls listed before the cursor and exit pills. */
+    hints?: readonly WalkthroughHint[];
+    /** Pointer lock temporarily released (OS screenshot) — the pill flips to
+     *  "Click to resume" and lets clicks fall through to the canvas. */
+    suspended?: boolean;
+    onExit?: () => void;
+    children?: ReactNode;
+};
+/** The centered walkthrough pointer: a dot that grows into a green ring over
+ *  an interactable (door / window / elevator). Also mounted by the snapshot
+ *  capture overlay so walk / drone framing keeps the same E-to-open pointer. */
+export declare function WalkthroughCrosshair({ interact }: {
+    interact: WalkthroughInteract;
+}): import("react").JSX.Element;
+export declare function WalkthroughHud({ floorLabel, zoneLabel, interact, hints, suspended, onExit, children, }: WalkthroughHudProps): import("react").JSX.Element;
+/** The walkthrough HUD for the drone: the plain pointer dot and the flight keys, no room or door prompts. */
+export declare function DroneHud({ suspended, onExit, children, }: Pick<WalkthroughHudProps, 'suspended' | 'onExit' | 'children'>): import("react").JSX.Element;
+//# sourceMappingURL=walkthrough-hud.d.ts.map

package/dist/ui/components/walkthrough-hud.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walkthrough-hud.d.ts","sourceRoot":"","sources":["../../../src/ui/components/walkthrough-hud.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAI3E,qGAAqG;AACrG,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzE,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC;wEACoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED;;gFAEgF;AAChF,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,mBAAmB,CAAA;CAAE,+BAgBnF;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,SAAS,EACT,QAAe,EACf,KAAK,EACL,SAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BA8FrB;AAgCD,6GAA6G;AAC7G,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC,+BAMhE"}

package/dist/ui/components/walkthrough-hud.js

@@ -0,0 +1,55 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePascalI18n } from '@pascal-app/core';
+import { useMemo } from 'react';
+import { cn } from '../lib/cn';
+import { displayRoomName } from '../lib/room-name-messages';
+/** The centered walkthrough pointer: a dot that grows into a green ring over
+ *  an interactable (door / window / elevator). Also mounted by the snapshot
+ *  capture overlay so walk / drone framing keeps the same E-to-open pointer. */
+export function WalkthroughCrosshair({ interact }) {
+    return (_jsx("div", { className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", "data-walkthrough-crosshair": true, children: _jsx("div", { className: cn('rounded-full transition-all duration-150', interact
+                ? 'h-4 w-4 border-2 border-emerald-400 bg-emerald-400/10'
+                : 'h-1.5 w-1.5 bg-white/80 shadow-[0_0_2px_rgba(0,0,0,0.6)]') }) }));
+}
+export function WalkthroughHud({ floorLabel, zoneLabel, interact = null, hints, suspended = false, onExit, children, }) {
+    const kbdClass = 'rounded border border-border/60 bg-white/10 px-1.5 py-0.5 font-mono text-[10px]';
+    const pillClass = 'flex items-center gap-1.5 rounded-full border border-border/40 bg-background/70 px-3 py-1 text-muted-foreground text-xs backdrop-blur-xl';
+    const exitContent = (_jsxs(_Fragment, { children: [_jsx("kbd", { className: kbdClass, children: "Esc" }), "to exit"] }));
+    return (_jsxs("div", { className: "dark pointer-events-none absolute inset-0 z-30 text-foreground", "data-walkthrough-hud": true, children: [_jsxs("div", { className: "absolute top-6 left-1/2 flex -translate-x-1/2 flex-col items-center gap-1.5", children: [floorLabel && (_jsx("div", { className: "font-medium text-[10px] text-muted-foreground uppercase tracking-wider", children: floorLabel })), zoneLabel && (_jsx("div", { className: "corner-smooth rounded-full border border-border/40 bg-background/80 px-3 py-1 font-medium text-sm shadow-elevation-3 backdrop-blur-xl", children: _jsx(WalkthroughZoneName, { name: zoneLabel }) })), children] }), _jsx(WalkthroughCrosshair, { interact: interact }), _jsx("div", { className: "absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2", children: suspended ? (_jsxs("div", { className: pillClass, children: [_jsx("span", { className: "font-medium text-foreground", children: "Click" }), _jsx("span", { children: "or" }), _jsx("kbd", { className: kbdClass, children: "P" }), _jsx("span", { children: "to resume" }), _jsx("span", { className: "text-muted-foreground/60", children: "\u00B7" }), exitContent] })) : (_jsxs(_Fragment, { children: [hints && hints.length > 0 ? (_jsx("div", { className: pillClass, children: hints.map(({ keys, action }, index) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [index > 0 && _jsx("span", { className: "text-muted-foreground/60", children: "\u00B7" }), keys.map((key, keyIndex) => (_jsxs("span", { className: "flex items-center gap-1", children: [keyIndex > 0 && _jsx("span", { className: "text-muted-foreground/60", children: "/" }), _jsx("kbd", { className: kbdClass, children: key })] }, key))), action] }, action))) })) : null, _jsxs("div", { className: pillClass, children: [_jsx("kbd", { className: kbdClass, children: "P" }), "free cursor"] }), onExit ? (_jsx("button", { className: cn(pillClass, 'pointer-events-auto'), onClick: onExit, type: "button", children: exitContent })) : (_jsx("div", { className: pillClass, children: exitContent }))] })) }), interact && (_jsx("div", { className: "absolute top-1/2 left-1/2 mt-7 -translate-x-1/2 whitespace-nowrap", children: _jsxs("div", { className: "corner-smooth flex items-center gap-1.5 rounded-full border border-border/40 bg-background/80 px-3 py-1 text-xs shadow-elevation-3 backdrop-blur-xl", children: [_jsx("kbd", { className: "rounded border border-border/60 bg-white/10 px-1.5 py-0.5 font-mono text-[10px]", children: "E" }), _jsx("span", { className: "text-muted-foreground", children: "or click to" }), _jsxs("span", { className: "font-medium", children: [interact.verb, " ", interact.label] })] }) }))] }));
+}
+/** The drone's key strip: the movement controls of the viewer's `DroneController`. */
+function useDroneHints() {
+    const i18n = usePascalI18n();
+    return useMemo(() => [
+        {
+            keys: ['WASD'],
+            action: i18n._({ id: 'editor.walkthroughHud.drone.move', message: 'move' }),
+        },
+        {
+            keys: ['Space', 'E'],
+            action: i18n._({ id: 'editor.walkthroughHud.drone.up', message: 'up' }),
+        },
+        {
+            keys: ['Q'],
+            action: i18n._({ id: 'editor.walkthroughHud.drone.down', message: 'down' }),
+        },
+        {
+            keys: ['Shift'],
+            action: i18n._({ id: 'editor.walkthroughHud.drone.boost', message: 'boost' }),
+        },
+        {
+            keys: ['Alt'],
+            action: i18n._({ id: 'editor.walkthroughHud.drone.slow', message: 'slow' }),
+        },
+    ], [i18n]);
+}
+/** The walkthrough HUD for the drone: the plain pointer dot and the flight keys, no room or door prompts. */
+export function DroneHud({ suspended, onExit, children, }) {
+    return (_jsx(WalkthroughHud, { hints: useDroneHints(), onExit: onExit, suspended: suspended, children: children }));
+}
+/** The room the walker is in, in the UI language (the scene keeps its stored name). */
+function WalkthroughZoneName({ name }) {
+    const i18n = usePascalI18n();
+    return displayRoomName(name, i18n);
+}

package/dist/ui/floorplan/floorplan-camera-sync.d.ts

@@ -0,0 +1,22 @@
+import { type CameraPose } from '@pascal-app/core';
+import { type NavigationSyncPose, type NavigationSyncPoseInput } from '../store/navigation-sync-pose-store';
+export declare function cameraPoseToFloorplanNavigationPose(pose: CameraPose): NavigationSyncPoseInput | null;
+export declare function floorplanNavigationPoseToCameraPose(navigationPose: NavigationSyncPose, cameraPose: CameraPose): CameraPose;
+export type FloorplanCameraSyncBridge = {
+    receiveCameraPose: (pose: CameraPose) => void;
+    receiveNavigationPose: (pose: NavigationSyncPose | null) => void;
+    setActive: (active: boolean) => void;
+};
+export type FloorplanCameraNavigationChannel = {
+    publish: (pose: NavigationSyncPoseInput) => void;
+    subscribe: (listener: (pose: NavigationSyncPose) => void) => () => void;
+};
+export declare function createFloorplanCameraNavigationChannel(): FloorplanCameraNavigationChannel;
+export declare function subscribeFloorplanCameraNavigation(listener: (pose: NavigationSyncPose) => void): () => void;
+export declare function createFloorplanCameraSyncBridge({ active: initialActive, applyCameraPose, publishNavigationPose, }: {
+    active?: boolean;
+    applyCameraPose: (pose: CameraPose) => void;
+    publishNavigationPose: (pose: NavigationSyncPoseInput) => void;
+}): FloorplanCameraSyncBridge;
+export declare function useFloorplanCameraSyncBridge(): void;
+//# sourceMappingURL=floorplan-camera-sync.d.ts.map

package/dist/ui/floorplan/floorplan-camera-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floorplan-camera-sync.d.ts","sourceRoot":"","sources":["../../../src/ui/floorplan/floorplan-camera-sync.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAW,MAAM,kBAAkB,CAAA;AAG3D,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAE7B,MAAM,qCAAqC,CAAA;AAqC5C,wBAAgB,mCAAmC,CACjD,IAAI,EAAE,UAAU,GACf,uBAAuB,GAAG,IAAI,CAWhC;AAED,wBAAgB,mCAAmC,CACjD,cAAc,EAAE,kBAAkB,EAClC,UAAU,EAAE,UAAU,GACrB,UAAU,CAgBZ;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,iBAAiB,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IAC7C,qBAAqB,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAA;IAChE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,gCAAgC,GAAG;IAC7C,OAAO,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAChD,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,KAAK,MAAM,IAAI,CAAA;CACxE,CAAA;AAED,wBAAgB,sCAAsC,IAAI,gCAAgC,CAiBzF;AAID,wBAAgB,kCAAkC,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,SAxB1B,IAAI,CA0BxE;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,MAAM,EAAE,aAAoB,EAC5B,eAAe,EACf,qBAAqB,GACtB,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IAC3C,qBAAqB,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAA;CAC/D,GAAG,yBAAyB,CAuE5B;AAED,wBAAgB,4BAA4B,SAgB3C"}

package/dist/ui/floorplan/floorplan-camera-sync.js

@@ -0,0 +1,157 @@
+'use client';
+import { emitter } from '@pascal-app/core';
+import { useEffect, useRef } from 'react';
+import { subscribeCameraPose } from '../store/camera-pose-store';
+import { subscribeNavigationSyncPose, } from '../store/navigation-sync-pose-store';
+const POSITION_EPSILON = 0.001;
+const AZIMUTH_EPSILON = 1e-4;
+const VIEW_WIDTH_EPSILON = 0.001;
+function angleDeltaRadians(a, b) {
+    return Math.atan2(Math.sin(a - b), Math.cos(a - b));
+}
+function normalizeNearZero(value) {
+    return Math.abs(value) < Number.EPSILON * 10 ? 0 : value;
+}
+function navigationSnapshot(pose) {
+    return {
+        target: [...pose.target],
+        azimuth: pose.azimuth,
+        viewWidth: pose.viewWidth,
+    };
+}
+function navigationSnapshotsEqual(previous, next) {
+    return (Math.abs(previous.target[0] - next.target[0]) < POSITION_EPSILON &&
+        Math.abs(previous.target[1] - next.target[1]) < POSITION_EPSILON &&
+        Math.abs(previous.target[2] - next.target[2]) < POSITION_EPSILON &&
+        Math.abs(angleDeltaRadians(previous.azimuth, next.azimuth)) < AZIMUTH_EPSILON &&
+        Math.abs(previous.viewWidth - next.viewWidth) < VIEW_WIDTH_EPSILON);
+}
+export function cameraPoseToFloorplanNavigationPose(pose) {
+    if (!(pose.viewWidth !== undefined && Number.isFinite(pose.viewWidth) && pose.viewWidth > 0)) {
+        return null;
+    }
+    return {
+        source: '3d',
+        target: [...pose.target],
+        azimuth: Math.atan2(pose.position[0] - pose.target[0], pose.position[2] - pose.target[2]),
+        viewWidth: pose.viewWidth,
+    };
+}
+export function floorplanNavigationPoseToCameraPose(navigationPose, cameraPose) {
+    const offsetX = cameraPose.position[0] - cameraPose.target[0];
+    const offsetY = cameraPose.position[1] - cameraPose.target[1];
+    const offsetZ = cameraPose.position[2] - cameraPose.target[2];
+    const horizontalDistance = Math.hypot(offsetX, offsetZ);
+    const horizontalX = normalizeNearZero(Math.sin(navigationPose.azimuth) * horizontalDistance);
+    const horizontalZ = normalizeNearZero(Math.cos(navigationPose.azimuth) * horizontalDistance);
+    const target = [...navigationPose.target];
+    return {
+        ...(cameraPose.fov === undefined ? {} : { fov: cameraPose.fov }),
+        position: [target[0] + horizontalX, target[1] + offsetY, target[2] + horizontalZ],
+        projection: cameraPose.projection,
+        target,
+        viewWidth: navigationPose.viewWidth,
+    };
+}
+export function createFloorplanCameraNavigationChannel() {
+    const listeners = new Set();
+    let revision = 0;
+    return {
+        publish: (pose) => {
+            revision += 1;
+            const revisedPose = { ...pose, revision };
+            for (const listener of listeners) {
+                listener(revisedPose);
+            }
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+const liveCameraNavigation = createFloorplanCameraNavigationChannel();
+export function subscribeFloorplanCameraNavigation(listener) {
+    return liveCameraNavigation.subscribe(listener);
+}
+export function createFloorplanCameraSyncBridge({ active: initialActive = true, applyCameraPose, publishNavigationPose, }) {
+    let active = initialActive;
+    let latestCameraPose = null;
+    let pendingNavigationPose = null;
+    let lastAppliedNavigationRevision = 0;
+    let lastPublishedNavigation = null;
+    const applyPendingNavigationPose = () => {
+        if (!(latestCameraPose && pendingNavigationPose))
+            return false;
+        if (pendingNavigationPose.revision === lastAppliedNavigationRevision) {
+            pendingNavigationPose = null;
+            return false;
+        }
+        const appliedPose = floorplanNavigationPoseToCameraPose(pendingNavigationPose, latestCameraPose);
+        const appliedNavigationPose = cameraPoseToFloorplanNavigationPose(appliedPose);
+        latestCameraPose = appliedPose;
+        lastAppliedNavigationRevision = pendingNavigationPose.revision;
+        pendingNavigationPose = null;
+        if (appliedNavigationPose) {
+            lastPublishedNavigation = navigationSnapshot(appliedNavigationPose);
+        }
+        applyCameraPose(appliedPose);
+        return true;
+    };
+    const publishCameraNavigationPose = (pose) => {
+        const navigationPose = cameraPoseToFloorplanNavigationPose(pose);
+        if (!navigationPose)
+            return;
+        const nextSnapshot = navigationSnapshot(navigationPose);
+        if (lastPublishedNavigation &&
+            navigationSnapshotsEqual(lastPublishedNavigation, nextSnapshot)) {
+            return;
+        }
+        lastPublishedNavigation = nextSnapshot;
+        publishNavigationPose(navigationPose);
+    };
+    return {
+        receiveCameraPose: (pose) => {
+            latestCameraPose = pose;
+            if (active && applyPendingNavigationPose())
+                return;
+            publishCameraNavigationPose(pose);
+        },
+        receiveNavigationPose: (pose) => {
+            if (!active ||
+                pose?.source !== '2d' ||
+                pose.revision === lastAppliedNavigationRevision ||
+                pose.revision === pendingNavigationPose?.revision) {
+                return;
+            }
+            pendingNavigationPose = pose;
+            applyPendingNavigationPose();
+        },
+        setActive: (nextActive) => {
+            if (active === nextActive)
+                return;
+            active = nextActive;
+            if (!active) {
+                pendingNavigationPose = null;
+                return;
+            }
+            if (latestCameraPose)
+                publishCameraNavigationPose(latestCameraPose);
+        },
+    };
+}
+export function useFloorplanCameraSyncBridge() {
+    // The compass is portalled into the always-visible viewer area, so its
+    // orientation-only 2D pose must still reach the camera while the floorplan
+    // itself is hidden in 3D view.
+    const bridgeRef = useRef(null);
+    if (!bridgeRef.current) {
+        bridgeRef.current = createFloorplanCameraSyncBridge({
+            applyCameraPose: (pose) => emitter.emit('camera-controls:apply-pose', pose),
+            publishNavigationPose: (pose) => liveCameraNavigation.publish(pose),
+        });
+    }
+    const bridge = bridgeRef.current;
+    useEffect(() => subscribeCameraPose(bridge.receiveCameraPose), [bridge]);
+    useEffect(() => subscribeNavigationSyncPose(bridge.receiveNavigationPose), [bridge]);
+}

package/dist/ui/floorplan/floorplan-dimension-renderer.d.ts

@@ -0,0 +1,61 @@
+import type { FloorplanGeometry, FloorplanPoint } from '@pascal-app/core';
+type FloorplanDimensionRenderMode = 'screen' | 'pdf';
+/**
+ * Click-to-type dimensions (WS3).
+ *
+ * On screen, under an editing host (`FloorplanDimensionHitsProvider` set to
+ * true), the label plate carries an invisible hit rect plus the data the
+ * editing layer needs to drive geometry from a typed value. The editor's
+ * layer picks it up by DOM delegation, so every producer of `dimension` /
+ * `dimension-string` geometry — wall automatic dimensions, contextual
+ * dimensions, manual construction-dimension nodes — becomes editable without
+ * each one wiring up a callback. Read-only plans carry no hit rects.
+ *
+ * Witness points are the measured feature points in level-plan metres; the
+ * value is the length the label actually reads (dimension-line points when
+ * the producer supplied them, witness points otherwise).
+ */
+export declare const FLOORPLAN_DIMENSION_HIT_ATTRIBUTE = "data-floorplan-dimension-hit";
+/** Whether the dimension labels below it carry typeable hit rects; off unless a host sets it. */
+export declare const FloorplanDimensionHitsProvider: import("react").Provider<boolean>;
+type DimensionGeometry = Extract<FloorplanGeometry, {
+    kind: 'dimension';
+}>;
+type DimensionStringGeometry = Extract<FloorplanGeometry, {
+    kind: 'dimension-string';
+}>;
+export type ArchitecturalDimensionLayout = {
+    dimensionStart: FloorplanPoint;
+    dimensionEnd: FloorplanPoint;
+    dimensionLineStart: FloorplanPoint;
+    dimensionLineEnd: FloorplanPoint;
+    extensionStart: FloorplanPoint;
+    extensionEnd: FloorplanPoint;
+    extensionStartTip: FloorplanPoint;
+    extensionEndTip: FloorplanPoint;
+    tickHalfVector: FloorplanPoint;
+    labelPoint: FloorplanPoint;
+    labelAngleDeg: number;
+    labelPlacement: 'inside' | 'outside-end';
+    outsideStartLabelPoint?: FloorplanPoint;
+    outsideStartDimensionLineStart?: FloorplanPoint;
+};
+export declare function floorplanDimensionAnnotationPriority(offsetDistance: number): number;
+export declare function computeArchitecturalDimensionLayout(geometry: DimensionGeometry, sceneRotationDeg: number, annotationUnitsPerPoint?: number): ArchitecturalDimensionLayout | null;
+export declare function FloorplanDimensionRenderer({ geometry, sceneRotationDeg, stroke, annotationUnitsPerPoint, renderMode, onSelect, }: {
+    geometry: DimensionGeometry;
+    sceneRotationDeg?: number;
+    stroke?: string;
+    annotationUnitsPerPoint?: number;
+    renderMode?: FloorplanDimensionRenderMode;
+    onSelect?: () => void;
+}): React.ReactElement | null;
+export declare function FloorplanDimensionStringRenderer({ geometry, sceneRotationDeg, stroke, annotationUnitsPerPoint, renderMode, }: {
+    geometry: DimensionStringGeometry;
+    sceneRotationDeg?: number;
+    stroke?: string;
+    annotationUnitsPerPoint?: number;
+    renderMode?: FloorplanDimensionRenderMode;
+}): React.ReactElement | null;
+export {};
+//# sourceMappingURL=floorplan-dimension-renderer.d.ts.map

package/dist/ui/floorplan/floorplan-dimension-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floorplan-dimension-renderer.d.ts","sourceRoot":"","sources":["../../../src/ui/floorplan/floorplan-dimension-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAsBzE,KAAK,4BAA4B,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEpD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iCAAiC,iCAAiC,CAAA;AAI/E,iGAAiG;AACjG,eAAO,MAAM,8BAA8B,mCAAgC,CAAA;AAE3E,KAAK,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC,CAAA;AAC1E,KAAK,uBAAuB,GAAG,OAAO,CAAC,iBAAiB,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,CAAC,CAAA;AAGvF,MAAM,MAAM,4BAA4B,GAAG;IACzC,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,cAAc,CAAA;IAC5B,kBAAkB,EAAE,cAAc,CAAA;IAClC,gBAAgB,EAAE,cAAc,CAAA;IAChC,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,cAAc,CAAA;IAC5B,iBAAiB,EAAE,cAAc,CAAA;IACjC,eAAe,EAAE,cAAc,CAAA;IAC/B,cAAc,EAAE,cAAc,CAAA;IAC9B,UAAU,EAAE,cAAc,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,QAAQ,GAAG,aAAa,CAAA;IACxC,sBAAsB,CAAC,EAAE,cAAc,CAAA;IACvC,8BAA8B,CAAC,EAAE,cAAc,CAAA;CAChD,CAAA;AAED,wBAAgB,oCAAoC,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAEnF;AAED,wBAAgB,mCAAmC,CACjD,QAAQ,EAAE,iBAAiB,EAC3B,gBAAgB,EAAE,MAAM,EACxB,uBAAuB,CAAC,EAAE,MAAM,GAC/B,4BAA4B,GAAG,IAAI,CAuFrC;AAkBD,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,gBAAoB,EACpB,MAAqC,EACrC,uBAAuB,EACvB,UAAqB,EACrB,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,UAAU,CAAC,EAAE,4BAA4B,CAAA;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA8I5B;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACR,gBAAoB,EACpB,MAAqC,EACrC,uBAAuB,EACvB,UAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,uBAAuB,CAAA;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,UAAU,CAAC,EAAE,4BAA4B,CAAA;CAC1C,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA0K5B"}