@treasuryspatial/viewer-ui-kit 0.1.37 → 0.1.39

package/dist/ComposerRightRail.js

@@ -4,7 +4,7 @@ import { RightPanel, RightPanelCollapseToggle, RightPanelShowToggle, } from './l
 export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title = 'image system', statusLabel = 'live', }) {
     const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0] ?? null;
     const hasStatus = Boolean(statusLabel && statusLabel.trim().length > 0);
-    return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: onToggle, "aria-label": "Hide right panel", title: "Hide right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "border-b viewer-ui-kit-border px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px] uppercase tracking-[0.14em] viewer-ui-kit-text-subtle", children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `rounded-full px-3.5 py-2.5 text-[12px] font-neusa font-black lowercase tracking-[0.06em] whitespace-nowrap transition border ${active?.id === tab.id
+    return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: onToggle, "aria-label": "Hide right panel", title: "Hide right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "border-b viewer-ui-kit-border px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px] uppercase tracking-[0.14em] viewer-ui-kit-text-subtle", children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `rounded-full px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.08em] whitespace-nowrap transition border ${active?.id === tab.id
                                         ? 'bg-[var(--viewer-ui-color-toggle)] text-[var(--viewer-ui-color-toggle-text)] border-[var(--viewer-ui-color-toggle)]'
                                         : 'bg-[var(--viewer-ui-color-tab-bg)] text-[var(--viewer-ui-color-text-muted)] border-[var(--viewer-ui-color-panel-border-subtle)] hover:bg-[var(--viewer-ui-color-button-secondary)] hover:text-[var(--viewer-ui-color-text-strong)]'}`, children: tab.label }, tab.id))) })] }), _jsx("div", { className: "viewer-ui-shell-right-body flex-1 overflow-y-auto px-5 py-5", children: active?.content ?? null })] })) : null, !isVisible ? (_jsx(RightPanelShowToggle, { type: "button", onClick: onToggle, "aria-label": "Show right panel", title: "Show right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12.707 14.707a1 1 0 010-1.414L9.414 10l3.293-3.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414 0z", clipRule: "evenodd" }) }) })) : null] }));
 }

package/dist/LandingShell.d.ts

@@ -1,8 +1,8 @@
 import type { UiManifest } from '@treasuryspatial/ui-manifest';
-import type { SurfaceShellLandingContent } from '@treasuryspatial/surface-kit';
+import type { SurfaceLandingContent } from '@treasuryspatial/surface-kit';
 export type LandingShellProps = {
     manifest: UiManifest;
-    content: SurfaceShellLandingContent;
+    content: SurfaceLandingContent;
     showPoweredBy?: boolean;
     showLogout?: boolean;
     className?: string;

package/dist/LandingShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LandingShell.d.ts","sourceRoot":"","sources":["../src/LandingShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAsG/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,0BAA0B,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,SAAS,GACV,EAAE,iBAAiB,2CAuBnB"}
+{"version":3,"file":"LandingShell.d.ts","sourceRoot":"","sources":["../src/LandingShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAsG1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,SAAS,GACV,EAAE,iBAAiB,2CAuBnB"}

package/dist/LoginShell.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 import type { UiManifest } from '@treasuryspatial/ui-manifest';
-import type { SurfaceShellLoginContent } from '@treasuryspatial/surface-kit';
+import type { SurfaceLoginContent } from '@treasuryspatial/surface-kit';
 export type LoginShellProps = {
     manifest: UiManifest;
-    content?: SurfaceShellLoginContent | null;
+    content?: SurfaceLoginContent | null;
     children: ReactNode;
     showLogout?: boolean;
     showPoweredBy?: boolean;

package/dist/LoginShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginShell.d.ts","sourceRoot":"","sources":["../src/LoginShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAkE7E,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,aAAqB,EACrB,SAAS,GACV,EAAE,eAAe,2CAwBjB"}
+{"version":3,"file":"LoginShell.d.ts","sourceRoot":"","sources":["../src/LoginShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAkExE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,aAAqB,EACrB,SAAS,GACV,EAAE,eAAe,2CAwBjB"}

package/dist/ManifestTopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManifestTopBar.d.ts","sourceRoot":"","sources":["../src/ManifestTopBar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAa/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA2KF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAkB,EAClB,aAAqB,EACrB,UAAkB,EAClB,eAAuB,EACvB,YAAoB,EACpB,iBAAiB,EACjB,cAAmC,EACnC,UAAqB,GACtB,EAAE,mBAAmB,2CA2JrB"}
+{"version":3,"file":"ManifestTopBar.d.ts","sourceRoot":"","sources":["../src/ManifestTopBar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAY/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAiKF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAkB,EAClB,aAAqB,EACrB,UAAkB,EAClB,eAAuB,EACvB,YAAoB,EACpB,iBAAiB,EACjB,cAAmC,EACnC,UAAqB,GACtB,EAAE,mBAAmB,2CA4HrB"}

package/dist/ManifestTopBar.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { buildLoginHref, useClientHydrated, useComposerAuthState, useSessionLogout, useShellPanelToggle, useSurfaceComposerData, } from '@treasuryspatial/viewer-react';
+import { buildLoginHref, useClientHydrated, useComposerAuthState, useSessionLogout, useSurfaceComposerData, } from '@treasuryspatial/viewer-react';
 import styled from 'styled-components';
 import TopBar from './TopBar.js';
 const BrandLink = styled(Link) `
@@ -71,6 +71,18 @@ const AuthButton = styled.button `
   &:hover {
     color: var(--brand-primary);
   }
+
+  .auth-hover {
+    display: none;
+  }
+
+  &:hover .auth-default {
+    display: none;
+  }
+
+  &:hover .auth-hover {
+    display: inline;
+  }
 `;
 const AuthLink = styled(Link) `
   color: var(--brand-text-primary);
@@ -128,26 +140,6 @@ const SearchReset = styled.button `
   font-size: 18px;
   line-height: 1;
 `;
-const PanelToggleCluster = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-const PanelToggleText = styled.button `
-  border: none;
-  background: transparent;
-  color: var(--brand-text-secondary);
-  font-weight: 400;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  cursor: pointer;
-  padding: 0;
-
-  &:hover {
-    color: var(--brand-text-primary);
-  }
-`;
 const formatDisplayName = (value) => {
     const trimmed = value?.trim();
     if (!trimmed)
@@ -167,7 +159,6 @@ export default function ManifestTopBar({ manifest, variant = 'canvas', showPower
     const hydrated = useClientHydrated();
     const composerData = useSurfaceComposerData();
     const { auth } = useComposerAuthState();
-    const { collapsed, toggle } = useShellPanelToggle();
     const [searchOpen, setSearchOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const searchRef = useRef(null);
@@ -213,7 +204,7 @@ export default function ManifestTopBar({ manifest, variant = 'canvas', showPower
         if (!showLogout)
             return null;
         if (hydrated && auth.isAuthenticated) {
-            return (_jsx(AuthButton, { type: "button", onClick: handleLogout, children: formatDisplayName(auth.name || auth.user) }));
+            return (_jsxs(AuthButton, { type: "button", onClick: handleLogout, children: [_jsx("span", { className: "auth-default", children: formatDisplayName(auth.name || auth.user) }), _jsx("span", { className: "auth-hover", children: "logout" })] }));
         }
         if (pathname === logoutHref)
             return null;
@@ -224,6 +215,6 @@ export default function ManifestTopBar({ manifest, variant = 'canvas', showPower
                                         setSearchOpen(false);
                                         setSearchQuery('');
                                     }
-                                } }), searchQuery ? _jsx(SearchReset, { onClick: () => setSearchQuery(''), children: "\u00D7" }) : null] })) : null }) })) : null, showPanelToggle ? (_jsxs(PanelToggleCluster, { children: [_jsx("button", { "aria-label": collapsed ? 'Show navigation panels' : 'Hide navigation panels', className: "collapse-toggle collapse-toggle--edge-top", onClick: toggle, type: "button", children: collapsed ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.25 8.27a.75.75 0 01-.02-1.06z", clipRule: "evenodd" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.23 12.79a.75.75 0 001.06-.02L10 9.06l3.71 3.71a.75.75 0 001.06-1.06L10.53 7.47a.75.75 0 00-1.06 0L4.23 11.75a.75.75 0 001 1.04z", clipRule: "evenodd" }) })) }), _jsx(PanelToggleText, { type: "button", onClick: toggle, children: collapsed ? 'show panels' : 'toggle panels' })] })) : null] }));
+                                } }), searchQuery ? _jsx(SearchReset, { onClick: () => setSearchQuery(''), children: "\u00D7" }) : null] })) : null }) })) : null] }));
     return (_jsx(TopBar, { compact: variant === 'canvas', hidden: false, brand: _jsxs(BrandLink, { href: introHref, children: [brandLogo?.src ? _jsx(BrandLogo, { "$variant": variant, src: brandLogo.src, alt: brandLogo.alt }) : null, _jsxs("div", { children: [_jsxs(BrandTitle, { "$variant": variant, children: [_jsx(BrandTenant, { children: manifest.topbar.title }), _jsx(BrandSurface, { children: surfaceTitle })] }), showSubtitle && manifest.topbar.subtitle ? _jsx("div", { children: manifest.topbar.subtitle }) : null] })] }), center: showPoweredBy ? null : null, actions: actions }));
 }

package/dist/MetricsPanelContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IAChC,aAAa,EAAE;QAAE,QAAQ,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClG,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAmCD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,wBAAwB,2CAgC1B"}
+{"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IAChC,aAAa,EAAE;QAAE,QAAQ,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClG,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAKD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,wBAAwB,2CA4D1B"}

package/dist/MetricsPanelContent.js

@@ -1,46 +1,41 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const placeholderSections = [
-    {
-        title: 'social',
-        metrics: [
-            { label: 'social activation index', value: '—' },
-            { label: 'eyes-on-courtyard score', value: '—' },
-            { label: 'dwell time potential', value: '—' },
-            { label: 'access equity', value: '—' },
-            { label: 'circulation clarity', value: '—' },
-        ],
-    },
-    {
-        title: 'value',
-        metrics: [
-            { label: 'net usable area', value: '— m²' },
-            { label: 'efficiency ratio', value: '—' },
-            { label: 'leasing potential', value: '—' },
-            { label: 'operating cost proxy', value: '—' },
-            { label: 'construction complexity', value: '—' },
-        ],
-    },
-    {
-        title: 'architectural',
-        metrics: [
-            { label: 'courtyard daylight factor', value: '—' },
-            { label: 'perimeter efficiency', value: '—' },
-            { label: 'facade porosity', value: '—' },
-            { label: 'green coverage', value: '— %' },
-            { label: 'acoustic buffer score', value: '—' },
-        ],
-    },
-];
+const formatMeters = (value) => `${value.toFixed(2)} m`;
+const formatDegrees = (value) => `${value.toFixed(1)}°`;
 export default function MetricsPanelContent({ cameraMetrics, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, }) {
-    void cameraMetrics;
-    void distanceToFloor;
-    void distanceToCeiling;
-    void distanceToNorth;
-    void distanceToSouth;
-    void distanceToEast;
-    void distanceToWest;
-    void compassAngle;
-    void pitchAngle;
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-2xl font-black text-[#EFE9DE] lowercase font-neusa", children: "courtyard metrics" }), _jsx("div", { className: "text-[10px] uppercase tracking-[0.2em] text-[#EFE9DE]/50", children: "coming soon" })] }), _jsx("div", { className: "space-y-6 text-xs font-nunito", children: placeholderSections.map((section) => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.2em] text-[#EFE9DE]/50", children: section.title }), section.metrics.map((metric) => (_jsxs("div", { className: "flex justify-between gap-4", children: [_jsxs("span", { className: "text-[#EFE9DE]/70 lowercase", children: [metric.label, ":"] }), _jsx("span", { className: "text-[#EFE9DE]/80 font-mono", children: metric.value })] }, metric.label)))] }, section.title))) })] }));
+    const sections = [
+        {
+            title: 'camera',
+            metrics: [
+                {
+                    label: 'height above floor',
+                    value: cameraMetrics ? formatMeters(cameraMetrics.heightAboveFloor) : formatMeters(distanceToFloor),
+                },
+                { label: 'compass angle', value: formatDegrees(compassAngle) },
+                { label: 'pitch angle', value: formatDegrees(pitchAngle) },
+            ],
+        },
+        {
+            title: 'clearances',
+            metrics: [
+                { label: 'floor', value: formatMeters(distanceToFloor) },
+                { label: 'ceiling', value: formatMeters(distanceToCeiling) },
+                { label: 'north', value: formatMeters(distanceToNorth) },
+                { label: 'south', value: formatMeters(distanceToSouth) },
+                { label: 'east', value: formatMeters(distanceToEast) },
+                { label: 'west', value: formatMeters(distanceToWest) },
+            ],
+        },
+        cameraMetrics
+            ? {
+                title: 'position',
+                metrics: [
+                    { label: 'x', value: formatMeters(cameraMetrics.position.x) },
+                    { label: 'y', value: formatMeters(cameraMetrics.position.y) },
+                    { label: 'z', value: formatMeters(cameraMetrics.position.z) },
+                ],
+            }
+            : null,
+    ].filter(Boolean);
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[16px] font-semibold tracking-[0.01em] viewer-ui-kit-text", children: "viewer metrics" }), _jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] viewer-ui-kit-text-subtle", children: "live scene telemetry" })] }), _jsx("div", { className: "space-y-5 text-[12px]", children: sections.map((section) => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] viewer-ui-kit-text-subtle", children: section.title }), section.metrics.map((metric) => (_jsxs("div", { className: "flex justify-between gap-4 border-b viewer-ui-kit-border-subtle pb-2 last:border-b-0 last:pb-0", children: [_jsx("span", { className: "viewer-ui-kit-text-muted", children: metric.label }), _jsx("span", { className: "font-mono viewer-ui-kit-text", children: metric.value })] }, metric.label)))] }, section.title))) })] }));
 }

package/dist/PanelSkin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,2FA4kBrB,CAAC"}
+{"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,2FA8kBrB,CAAC"}

package/dist/PanelSkin.js

@@ -26,11 +26,12 @@ export const PanelSkin = createGlobalStyle `
     border: 1px solid var(--viewer-ui-color-panel-border);
     background: transparent;
     color: var(--viewer-ui-color-text-muted);
-    font-size: 20px;
+    font-size: 11px;
     letter-spacing: 0.08em;
-    text-transform: lowercase;
-    font-family: var(--viewer-ui-font-display);
-    padding: 6px 12px;
+    text-transform: uppercase;
+    font-family: var(--viewer-ui-font-body);
+    font-weight: 600;
+    padding: 8px 14px;
     cursor: pointer;
   }
 
@@ -71,12 +72,12 @@ export const PanelSkin = createGlobalStyle `
   }
 
   .viewer-ui-panel-renderer .panel-section-header h3 {
-    font-size: 20px;
-    letter-spacing: 0.04em;
-    text-transform: lowercase;
+    font-size: 16px;
+    letter-spacing: 0.02em;
+    text-transform: none;
     color: var(--viewer-ui-color-text-strong);
-    font-family: var(--viewer-ui-font-display);
-    font-weight: 700;
+    font-family: var(--viewer-ui-font-body);
+    font-weight: 600;
   }
 
   .viewer-ui-panel-renderer--flat .panel-section-header h3 {
@@ -193,11 +194,12 @@ export const PanelSkin = createGlobalStyle `
     border: 1px solid var(--viewer-ui-color-button-primary);
     background: var(--viewer-ui-color-button-primary);
     color: var(--viewer-ui-color-text-strong);
-    font-size: 20px;
+    font-size: 12px;
     letter-spacing: 0.08em;
-    text-transform: lowercase;
-    font-family: var(--viewer-ui-font-display);
-    padding: 10px 16px;
+    text-transform: uppercase;
+    font-family: var(--viewer-ui-font-body);
+    font-weight: 600;
+    padding: 10px 14px;
     cursor: pointer;
     transition: all 0.15s ease;
   }

package/dist/PanelTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../src/PanelTabs.tsx"],"names":[],"mappings":"AAiCA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAU9E"}
+{"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../src/PanelTabs.tsx"],"names":[],"mappings":"AA+CA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAU9E"}

package/dist/PanelTabs.js

@@ -3,29 +3,39 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 const TabRow = styled.div `
   display: flex;
-  gap: 12px;
+  gap: 8px;
   flex-wrap: nowrap;
   overflow-x: auto;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--brand-panel-border);
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--viewer-ui-color-panel-border, var(--brand-panel-border));
   margin-bottom: 6px;
 `;
 const TabButton = styled.button `
   border-radius: 999px;
-  padding: 8px 18px;
-  font-size: 14px;
-  font-weight: ${(props) => (props.$active ? 500 : 400)};
-  text-transform: capitalize;
-  border: none;
-  background: ${(props) => (props.$active ? 'var(--brand-primary)' : 'rgba(49, 143, 78, 0.12)')};
-  color: ${(props) => (props.$active ? '#ffffff' : 'rgba(49, 143, 78, 0.85)')};
+  padding: 8px 14px;
+  font-size: 11px;
+  font-weight: ${(props) => (props.$active ? 600 : 500)};
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border: 1px solid
+    ${(props) => props.$active
+    ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
+    : 'var(--viewer-ui-color-panel-border-subtle, var(--brand-panel-border))'};
+  background: ${(props) => props.$active
+    ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
+    : 'var(--viewer-ui-color-tab-bg, transparent)'};
+  color: ${(props) => props.$active
+    ? 'var(--viewer-ui-color-text-strong, #ffffff)'
+    : 'var(--viewer-ui-color-text-muted, var(--brand-text-secondary))'};
   cursor: pointer;
-  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
 
   &:hover {
-    background: ${(props) => (props.$active ? 'var(--brand-primary)' : 'rgba(49, 143, 78, 0.2)')};
-    color: ${(props) => (props.$active ? '#ffffff' : 'rgba(49, 143, 78, 1)')};
-    transform: translateY(-1px);
+    border-color: var(--viewer-ui-color-button-secondary, var(--brand-primary));
+    background: ${(props) => props.$active
+    ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
+    : 'var(--viewer-ui-color-tab-bg-hover, rgba(47, 74, 60, 0.08))'};
+    color: var(--viewer-ui-color-text-strong, var(--brand-text-primary));
   }
 `;
 export default function PanelTabs({ tabs, activeTab, onChange }) {