@treasuryspatial/viewer-ui-kit 0.1.41 → 0.1.56

package/dist/StreetviewModeSurface.js

@@ -0,0 +1,358 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import styled from 'styled-components';
+const Root = styled.div `
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.06), transparent 38%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+`;
+const ShellStage = styled.div `
+  position: absolute;
+  inset: 16px;
+  border-radius: 24px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
+`;
+const BlankCanvas = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.88)),
+    repeating-linear-gradient(
+      90deg,
+      rgba(148, 163, 184, 0.06) 0,
+      rgba(148, 163, 184, 0.06) 1px,
+      transparent 1px,
+      transparent 120px
+    );
+`;
+const Figure = styled.figure `
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  background: #ffffff;
+`;
+const PanoramaViewport = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #ffffff;
+`;
+const PanoramaFrame = styled.iframe `
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  background: #ffffff;
+`;
+const ImageCaption = styled.figcaption `
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  z-index: 3;
+  max-width: min(560px, calc(100% - 40px));
+  font-size: 11px;
+  line-height: 1.45;
+  color: rgba(15, 23, 42, 0.72);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  padding: 8px 10px;
+  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
+`;
+const FooterDock = styled.div `
+  position: absolute;
+  left: 18px;
+  right: 18px;
+  bottom: 18px;
+  z-index: 4;
+  pointer-events: none;
+`;
+const FooterCard = styled.div `
+  pointer-events: auto;
+  display: block;
+  padding: 10px;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
+  backdrop-filter: blur(12px);
+`;
+const CaptureNotice = styled.div `
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(248, 250, 252, 0.92);
+  color: rgba(51, 65, 85, 0.88);
+  font-size: 11px;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  text-transform: none;
+`;
+const FooterSearch = styled.form `
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(248, 250, 252, 0.96);
+`;
+const SearchInput = styled.input `
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 32px;
+  border: 0;
+  background: transparent;
+  color: #475569;
+  caret-color: #475569;
+  font-size: 12px;
+  line-height: 32px;
+  padding: 0 4px;
+  outline: none;
+
+  &::placeholder {
+    color: rgba(100, 116, 139, 0.72);
+    opacity: 1;
+    text-transform: lowercase;
+  }
+`;
+const SearchButton = styled.button `
+  height: 32px;
+  min-width: 36px;
+  border: 0;
+  background: transparent;
+  color: #475569;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: lowercase;
+  padding: 0 10px;
+  cursor: pointer;
+  border-left: 1px solid rgba(15, 23, 42, 0.08);
+
+  &:disabled {
+    opacity: 0.42;
+    cursor: not-allowed;
+  }
+`;
+const SuggestionMenu = styled.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 8px);
+  z-index: 8;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
+`;
+const SuggestionItem = styled.button `
+  display: grid;
+  width: 100%;
+  gap: 2px;
+  border: 0;
+  padding: 10px 14px;
+  text-align: left;
+  background: transparent;
+  color: #0f172a;
+  cursor: pointer;
+
+  &[data-active='true'],
+  &:hover {
+    background: rgba(15, 23, 42, 0.06);
+  }
+`;
+const SuggestionLabel = styled.span `
+  font-size: 12px;
+  line-height: 1.25;
+  color: #0f172a;
+`;
+const SuggestionMeta = styled.span `
+  font-size: 10px;
+  line-height: 1.3;
+  color: rgba(71, 85, 105, 0.76);
+`;
+const ErrorNotice = styled.div `
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  z-index: 3;
+  max-width: min(560px, calc(100% - 40px));
+  font-size: 12px;
+  line-height: 1.45;
+  color: #7c2d12;
+  background: rgba(255, 247, 237, 0.96);
+  border: 1px solid rgba(249, 115, 22, 0.28);
+  border-radius: 14px;
+  padding: 10px 12px;
+  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
+`;
+const DISPLAY_MEDIA_ERROR_MESSAGE = 'Street View capture now uses a live browser-tab screenshot. Choose this Composer tab in the share prompt and try again.';
+const stopStream = (stream) => {
+    stream?.getTracks().forEach((track) => track.stop());
+};
+const waitForVideoFrame = async (video) => {
+    const videoWithFrameCallback = video;
+    if (typeof videoWithFrameCallback.requestVideoFrameCallback === 'function') {
+        await new Promise((resolve) => {
+            videoWithFrameCallback.requestVideoFrameCallback?.(() => resolve());
+        });
+        return;
+    }
+    await new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => resolve());
+        });
+    });
+};
+const captureDisplayMediaViewport = async (bounds) => {
+    if (typeof navigator === 'undefined' || !navigator.mediaDevices?.getDisplayMedia) {
+        throw new Error('Street View live capture requires browser tab capture support, but this browser does not provide getDisplayMedia().');
+    }
+    if (bounds.width < 2 || bounds.height < 2) {
+        throw new Error('Street View viewport is not ready to capture yet.');
+    }
+    let stream = null;
+    const video = document.createElement('video');
+    video.muted = true;
+    video.playsInline = true;
+    video.autoplay = true;
+    try {
+        stream = await navigator.mediaDevices.getDisplayMedia({
+            video: {
+                displaySurface: 'browser',
+                preferCurrentTab: true,
+                selfBrowserSurface: 'include',
+                surfaceSwitching: 'exclude',
+                monitorTypeSurfaces: 'exclude',
+            },
+            audio: false,
+            preferCurrentTab: true,
+            selfBrowserSurface: 'include',
+            surfaceSwitching: 'exclude',
+            monitorTypeSurfaces: 'exclude',
+        });
+        video.srcObject = stream;
+        await video.play();
+        await waitForVideoFrame(video);
+        const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+        const scaleX = viewportWidth > 0 ? video.videoWidth / viewportWidth : 1;
+        const scaleY = viewportHeight > 0 ? video.videoHeight / viewportHeight : 1;
+        const sourceX = Math.max(0, Math.floor(bounds.left * scaleX));
+        const sourceY = Math.max(0, Math.floor(bounds.top * scaleY));
+        const sourceWidth = Math.min(video.videoWidth - sourceX, Math.max(1, Math.ceil(bounds.width * scaleX)));
+        const sourceHeight = Math.min(video.videoHeight - sourceY, Math.max(1, Math.ceil(bounds.height * scaleY)));
+        if (sourceWidth < 1 || sourceHeight < 1) {
+            throw new Error('Street View viewport capture resolved to an empty frame.');
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = sourceWidth;
+        canvas.height = sourceHeight;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Street View viewport capture could not initialize a 2D canvas.');
+        }
+        context.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight);
+        return canvas.toDataURL('image/png');
+    }
+    catch (error) {
+        if (error instanceof DOMException) {
+            if (error.name === 'AbortError' ||
+                error.name === 'InvalidStateError' ||
+                error.name === 'NotAllowedError' ||
+                error.name === 'NotReadableError') {
+                throw new Error(DISPLAY_MEDIA_ERROR_MESSAGE);
+            }
+        }
+        if (error instanceof Error) {
+            throw error;
+        }
+        throw new Error('Street View live capture failed.');
+    }
+    finally {
+        video.pause();
+        video.srcObject = null;
+        stopStream(stream);
+    }
+};
+const StreetviewModeSurface = forwardRef(function StreetviewModeSurface({ panoramaUrl, imageAlt = 'streetview image', imageCaption, locationQuery = '', searchPlaceholder = 'search a street, place, or address', loading = false, error, searchSuggestions = [], suggestionsOpen = false, suggestionsPending = false, activeSuggestionIndex = -1, onLocationQueryChange, onLocationSearch, onSuggestionSelect, onSuggestionActiveIndexChange, onSuggestionsOpenChange, }, ref) {
+    const panoramaViewportRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        capturePngDataUrl: async () => {
+            if (!panoramaUrl) {
+                throw new Error('Street View panorama is not ready. Search for a location first.');
+            }
+            const viewport = panoramaViewportRef.current;
+            if (!viewport) {
+                throw new Error('Street View viewport is not mounted.');
+            }
+            return captureDisplayMediaViewport(viewport.getBoundingClientRect());
+        },
+    }), [panoramaUrl]);
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const trimmed = locationQuery.trim();
+        if (!trimmed || loading)
+            return;
+        const activeSuggestion = searchSuggestions[activeSuggestionIndex];
+        if (suggestionsOpen && activeSuggestion) {
+            onSuggestionSelect?.(activeSuggestion);
+            return;
+        }
+        void onLocationSearch?.(trimmed);
+    };
+    const handleKeyDown = (event) => {
+        if (!searchSuggestions.length) {
+            if (event.key === 'Escape') {
+                onSuggestionsOpenChange?.(false);
+            }
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            onSuggestionsOpenChange?.(true);
+            onSuggestionActiveIndexChange?.((activeSuggestionIndex + 1) % searchSuggestions.length);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            onSuggestionsOpenChange?.(true);
+            onSuggestionActiveIndexChange?.(activeSuggestionIndex <= 0 ? searchSuggestions.length - 1 : activeSuggestionIndex - 1);
+            return;
+        }
+        if (event.key === 'Enter' && suggestionsOpen && activeSuggestionIndex >= 0) {
+            const activeSuggestion = searchSuggestions[activeSuggestionIndex];
+            if (activeSuggestion) {
+                event.preventDefault();
+                onSuggestionSelect?.(activeSuggestion);
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            onSuggestionsOpenChange?.(false);
+        }
+    };
+    const canSearch = Boolean(locationQuery.trim()) && !loading;
+    return (_jsx(Root, { children: _jsxs(ShellStage, { children: [panoramaUrl ? (_jsxs(Figure, { children: [_jsx(PanoramaViewport, { ref: panoramaViewportRef, children: _jsx(PanoramaFrame, { src: panoramaUrl, title: imageAlt, allow: "accelerometer; gyroscope; fullscreen", allowFullScreen: true, loading: "eager", referrerPolicy: "no-referrer-when-downgrade" }) }), imageCaption ? _jsx(ImageCaption, { children: imageCaption }) : null] })) : (_jsx(BlankCanvas, { "aria-label": "streetview shell stage" })), error ? _jsx(ErrorNotice, { children: error }) : null, _jsx(FooterDock, { children: _jsxs(FooterCard, { children: [_jsxs(FooterSearch, { onSubmit: handleSubmit, children: [_jsx(SearchInput, { value: locationQuery, placeholder: searchPlaceholder, onChange: (event) => onLocationQueryChange?.(event.target.value), onFocus: () => {
+                                            if (searchSuggestions.length) {
+                                                onSuggestionsOpenChange?.(true);
+                                            }
+                                        }, onKeyDown: handleKeyDown }), _jsx(SearchButton, { type: "submit", disabled: !canSearch, children: loading ? '...' : 'go' }), suggestionsOpen && (searchSuggestions.length > 0 || suggestionsPending) ? (_jsxs(SuggestionMenu, { onMouseDown: (event) => event.preventDefault(), onPointerDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: [searchSuggestions.map((suggestion, index) => (_jsxs(SuggestionItem, { type: "button", "data-active": index === activeSuggestionIndex ? 'true' : 'false', onMouseEnter: () => onSuggestionActiveIndexChange?.(index), onMouseDown: (event) => event.preventDefault(), onClick: () => onSuggestionSelect?.(suggestion), children: [_jsx(SuggestionLabel, { children: suggestion.label }), suggestion.secondaryLabel ? _jsx(SuggestionMeta, { children: suggestion.secondaryLabel }) : null] }, suggestion.id))), suggestionsPending ? (_jsx(SuggestionItem, { type: "button", disabled: true, children: _jsx(SuggestionLabel, { children: "searching..." }) })) : null] })) : null] }), _jsx(CaptureNotice, { children: "render capture uses the live Street View viewport only. when prompted, choose this Composer tab to share." })] }) })] }) }));
+});
+export default StreetviewModeSurface;

package/dist/SurfaceSwitcher.d.ts

@@ -0,0 +1,11 @@
+export type SurfaceSwitcherItem = {
+    id: string;
+    label: string;
+    href: string;
+    active?: boolean;
+};
+export type SurfaceSwitcherProps = {
+    items: SurfaceSwitcherItem[];
+};
+export default function SurfaceSwitcher({ items }: SurfaceSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SurfaceSwitcher.d.ts.map

package/dist/SurfaceSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceSwitcher.d.ts","sourceRoot":"","sources":["../src/SurfaceSwitcher.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B,CAAC;AA4CF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,kDAWtE"}

package/dist/SurfaceSwitcher.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from 'next/link';
+import styled from 'styled-components';
+const Switcher = styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 999px;
+  border: 1px solid var(--viewer-ui-color-panel-border, var(--brand-panel-border));
+  background: var(--viewer-ui-color-bg-base, var(--brand-panel));
+`;
+const SwitchLink = styled(Link) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding: 0 14px;
+  border-radius: 999px;
+  text-decoration: none;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: var(--viewer-ui-shell-text-case, lowercase);
+  white-space: nowrap;
+  color: ${(props) => props.$active
+    ? 'var(--viewer-ui-shell-pill-active-fg, var(--brand-primary))'
+    : 'var(--viewer-ui-shell-pill-inactive-fg, var(--viewer-ui-color-text-muted, var(--brand-text-secondary)))'};
+  background: ${(props) => props.$active
+    ? 'var(--viewer-ui-shell-pill-active-bg, color-mix(in srgb, var(--brand-primary) 14%, var(--viewer-ui-color-bg-base, #f6f3eb) 86%))'
+    : 'var(--viewer-ui-shell-pill-inactive-bg, transparent)'};
+  border: 1px solid
+    ${(props) => props.$active
+    ? 'var(--viewer-ui-shell-pill-active-border, var(--brand-primary))'
+    : 'var(--viewer-ui-shell-pill-inactive-border, var(--viewer-ui-color-panel-border, var(--brand-panel-border)))'};
+
+  &:hover {
+    color: var(--viewer-ui-color-text-strong, var(--brand-text-primary));
+  }
+`;
+export default function SurfaceSwitcher({ items }) {
+    if (!items.length)
+        return null;
+    return (_jsx(Switcher, { children: items.map((item) => (_jsx(SwitchLink, { href: item.href, "$active": Boolean(item.active), children: item.label }, item.id))) }));
+}

package/dist/TopBar.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+export declare const TOP_BAR_COMPACT_HEIGHT_PX = 50;
+export declare const TOP_BAR_STANDARD_HEIGHT_PX = 72;
 export type TopBarProps = {
     compact?: boolean;
     hidden?: boolean;

package/dist/TopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8DvC,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAe,EACf,MAAc,EACd,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAa,EACb,SAAS,GACV,EAAE,WAAW,2CAWb"}
+{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAC5C,eAAO,MAAM,0BAA0B,KAAK,CAAC;AA6D7C,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAe,EACf,MAAc,EACd,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAa,EACb,SAAS,GACV,EAAE,WAAW,2CAWb"}

package/dist/TopBar.js

@@ -1,13 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
+export const TOP_BAR_COMPACT_HEIGHT_PX = 50;
+export const TOP_BAR_STANDARD_HEIGHT_PX = 72;
 const Root = styled.nav `
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 50;
-  height: ${(props) => (props.$compact ? '50px' : '72px')};
+  height: ${(props) => (props.$compact ? `${TOP_BAR_COMPACT_HEIGHT_PX}px` : `${TOP_BAR_STANDARD_HEIGHT_PX}px`)};
   background: var(--viewer-ui-color-bg-base, var(--brand-panel, #f6f3eb));
   border-bottom: 1px solid var(--viewer-ui-color-panel-border, var(--brand-panel-border, rgba(47, 74, 60, 0.35)));
   color: var(--viewer-ui-color-text-strong, var(--brand-text-primary, #1f2937));

package/dist/UnknownModeSurface.d.ts

@@ -0,0 +1,6 @@
+type UnknownModeSurfaceProps = {
+    modeLabel: string;
+};
+export default function UnknownModeSurface({ modeLabel }: UnknownModeSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UnknownModeSurface.d.ts.map

package/dist/UnknownModeSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnknownModeSurface.d.ts","sourceRoot":"","sources":["../src/UnknownModeSurface.tsx"],"names":[],"mappings":"AAIA,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AA0CF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAahF"}

package/dist/UnknownModeSurface.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Root = styled.div `
+  position: absolute;
+  inset: 0;
+  background: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+`;
+const Card = styled.div `
+  width: min(100%, 720px);
+  border-radius: 24px;
+  border: 1px solid rgba(185, 28, 28, 0.22);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
+  padding: 28px 30px;
+  color: #7f1d1d;
+`;
+const Eyebrow = styled.div `
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  opacity: 0.72;
+`;
+const Title = styled.h3 `
+  margin: 10px 0 0;
+  font-size: 24px;
+  line-height: 1.12;
+  color: #7f1d1d;
+`;
+const Body = styled.p `
+  margin: 12px 0 0;
+  font-size: 14px;
+  line-height: 1.7;
+`;
+export default function UnknownModeSurface({ modeLabel }) {
+    return (_jsx(Root, { children: _jsxs(Card, { children: [_jsx(Eyebrow, { children: "unsupported mode contract" }), _jsxs(Title, { children: [modeLabel, " has no native runtime surface."] }), _jsx(Body, { children: "This is a hard runtime failure, not a compatibility fallback. Wire a real mode surface instead of falling back to the retired mode placeholder." })] }) }));
+}

package/dist/index.d.ts

@@ -1,11 +1,21 @@
 export * from './layout.js';
+export * from './PanelSystem.js';
 export { default as PanelTabs } from './PanelTabs.js';
 export type { PanelTab } from './PanelTabs.js';
+export { panelBodyTextCss, panelEyebrowCss, panelPillButtonCss, panelPillRowCss, panelSectionTitleCss, panelSubheadingCss, panelTitleCss, panelValueTextCss, } from './panelPrimitives.js';
 export { default as MetricsPanel } from './MetricsPanel.js';
 export { default as ComposerRightRail } from './ComposerRightRail.js';
 export type { ComposerRightRailTab } from './ComposerRightRail.js';
 export type { RenderInputSummary } from './MetricsPanel.js';
 export { default as MetricsPanelContent } from './MetricsPanelContent.js';
+export { default as ScienceDataPanelContent } from './ScienceDataPanelContent.js';
+export { default as ScienceMetricsPanelContent } from './ScienceMetricsPanelContent.js';
+export type { ScienceMetricsRenderState } from './ScienceMetricsPanelContent.js';
+export type { MapCostMetrics, MapDeliveryMetrics, MapEcoMetrics, MapMarketMetrics, MapMetricsPayload, MapMaterialsMetrics, MapModelMetrics, MapPlanningMetrics, MapSiteMetrics, } from './mapMetrics.js';
+export { default as SpatialHud } from './SpatialHud.js';
+export type { SpatialHudProps } from './SpatialHud.js';
+export { default as SceneInspectorPanel } from './SceneInspectorPanel.js';
+export type { SceneInspectorPanelProps } from './SceneInspectorPanel.js';
 export { default as AdminShell } from './AdminShell.js';
 export type { AdminTab } from './AdminShell.js';
 export { AdminPage, AdminSection, AdminSectionTitle, AdminMutedText } from './AdminLayout.js';
@@ -14,13 +24,17 @@ export { default as ConfiguratorShell } from './ConfiguratorShell.js';
 export { default as ComposerShell } from './ComposerShell.js';
 export { default as ModuleSelectorPanel } from './ModuleSelectorPanel.js';
 export type { ModuleSelectorEntry } from './ModuleSelectorPanel.js';
+export { default as ChooserActionCard } from './ChooserActionCard.js';
 export { default as PromptPackChooserPanel } from './PromptPackChooserPanel.js';
 export type { PromptPackChooserMode, PromptPackChooserCatalogEntry } from './PromptPackChooserPanel.js';
 export { default as KitPill } from './KitPill.js';
 export { default as TopBar } from './TopBar.js';
+export { TOP_BAR_COMPACT_HEIGHT_PX, TOP_BAR_STANDARD_HEIGHT_PX } from './TopBar.js';
 export type { TopBarProps } from './TopBar.js';
 export { default as ManifestTopBar } from './ManifestTopBar.js';
 export type { ManifestTopBarProps } from './ManifestTopBar.js';
+export { default as SurfaceSwitcher } from './SurfaceSwitcher.js';
+export type { SurfaceSwitcherItem, SurfaceSwitcherProps } from './SurfaceSwitcher.js';
 export { default as LoginShell } from './LoginShell.js';
 export type { LoginShellProps } from './LoginShell.js';
 export { default as LoginForm } from './LoginForm.js';
@@ -28,6 +42,11 @@ export type { LoginFormProps } from './LoginForm.js';
 export { default as LandingShell } from './LandingShell.js';
 export type { LandingShellProps } from './LandingShell.js';
 export { default as CustomModeSurface } from './CustomModeSurface.js';
+export { default as StreetviewModeSurface } from './StreetviewModeSurface.js';
+export type { StreetviewModeSurfaceHandle, StreetviewModeSurfaceProps } from './StreetviewModeSurface.js';
+export { default as UnknownModeSurface } from './UnknownModeSurface.js';
 export { default as ModeBar, MODE_BAR_HEIGHT_PX } from './ModeBar.js';
 export type { ModeBarProps, ModeTab } from './ModeBar.js';
+export { default as PanelToggleDock } from './PanelToggleDock.js';
+export type { PanelToggleDockProps } from './PanelToggleDock.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,YAAY,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACtE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,20 +1,32 @@
 export * from './layout.js';
+export * from './PanelSystem.js';
 export { default as PanelTabs } from './PanelTabs.js';
+export { panelBodyTextCss, panelEyebrowCss, panelPillButtonCss, panelPillRowCss, panelSectionTitleCss, panelSubheadingCss, panelTitleCss, panelValueTextCss, } from './panelPrimitives.js';
 export { default as MetricsPanel } from './MetricsPanel.js';
 export { default as ComposerRightRail } from './ComposerRightRail.js';
 export { default as MetricsPanelContent } from './MetricsPanelContent.js';
+export { default as ScienceDataPanelContent } from './ScienceDataPanelContent.js';
+export { default as ScienceMetricsPanelContent } from './ScienceMetricsPanelContent.js';
+export { default as SpatialHud } from './SpatialHud.js';
+export { default as SceneInspectorPanel } from './SceneInspectorPanel.js';
 export { default as AdminShell } from './AdminShell.js';
 export { AdminPage, AdminSection, AdminSectionTitle, AdminMutedText } from './AdminLayout.js';
 export { PanelSkin } from './PanelSkin.js';
 export { default as ConfiguratorShell } from './ConfiguratorShell.js';
 export { default as ComposerShell } from './ComposerShell.js';
 export { default as ModuleSelectorPanel } from './ModuleSelectorPanel.js';
+export { default as ChooserActionCard } from './ChooserActionCard.js';
 export { default as PromptPackChooserPanel } from './PromptPackChooserPanel.js';
 export { default as KitPill } from './KitPill.js';
 export { default as TopBar } from './TopBar.js';
+export { TOP_BAR_COMPACT_HEIGHT_PX, TOP_BAR_STANDARD_HEIGHT_PX } from './TopBar.js';
 export { default as ManifestTopBar } from './ManifestTopBar.js';
+export { default as SurfaceSwitcher } from './SurfaceSwitcher.js';
 export { default as LoginShell } from './LoginShell.js';
 export { default as LoginForm } from './LoginForm.js';
 export { default as LandingShell } from './LandingShell.js';
 export { default as CustomModeSurface } from './CustomModeSurface.js';
+export { default as StreetviewModeSurface } from './StreetviewModeSurface.js';
+export { default as UnknownModeSurface } from './UnknownModeSurface.js';
 export { default as ModeBar, MODE_BAR_HEIGHT_PX } from './ModeBar.js';
+export { default as PanelToggleDock } from './PanelToggleDock.js';

package/dist/landingTokens.d.ts

@@ -0,0 +1,7 @@
+export declare const LANDING_LOGO_SIZE = "clamp(32px, 1vw + 28px, 40px)";
+export declare const LANDING_TITLE_SIZE = "clamp(28px, 1.15vw + 24px, 42px)";
+export declare const LANDING_SECTION_TITLE_SIZE = "clamp(32px, 3vw, 61px)";
+export declare const LANDING_SECTION_STRAP_SIZE = "clamp(16px, 0.55vw + 14px, 20px)";
+export declare const LANDING_BODY_FONT_SIZE = "clamp(16px, 0.55vw + 14px, 20px)";
+export declare const LANDING_BODY_MAX_WIDTH = "720px";
+//# sourceMappingURL=landingTokens.d.ts.map

package/dist/landingTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"landingTokens.d.ts","sourceRoot":"","sources":["../src/landingTokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,kCAAkC,CAAC;AACjE,eAAO,MAAM,kBAAkB,qCAAqC,CAAC;AACrE,eAAO,MAAM,0BAA0B,2BAA2B,CAAC;AACnE,eAAO,MAAM,0BAA0B,qCAAqC,CAAC;AAC7E,eAAO,MAAM,sBAAsB,qCAAqC,CAAC;AACzE,eAAO,MAAM,sBAAsB,UAAU,CAAC"}

package/dist/landingTokens.js

@@ -0,0 +1,6 @@
+export const LANDING_LOGO_SIZE = 'clamp(32px, 1vw + 28px, 40px)';
+export const LANDING_TITLE_SIZE = 'clamp(28px, 1.15vw + 24px, 42px)';
+export const LANDING_SECTION_TITLE_SIZE = 'clamp(32px, 3vw, 61px)';
+export const LANDING_SECTION_STRAP_SIZE = 'clamp(16px, 0.55vw + 14px, 20px)';
+export const LANDING_BODY_FONT_SIZE = 'clamp(16px, 0.55vw + 14px, 20px)';
+export const LANDING_BODY_MAX_WIDTH = '720px';