@treasuryspatial/viewer-ui-kit 0.1.40 → 0.1.41

package/dist/ComposerRightRail.d.ts

@@ -13,7 +13,8 @@ type ComposerRightRailProps = {
     title?: string;
     statusLabel?: string;
     showEdgeToggle?: boolean;
+    topOffsetPx?: number;
 };
-export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title, statusLabel, showEdgeToggle, }: ComposerRightRailProps): import("react/jsx-runtime").JSX.Element;
+export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title, statusLabel, showEdgeToggle, topOffsetPx, }: ComposerRightRailProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ComposerRightRail.d.ts.map

package/dist/ComposerRightRail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerRightRail.d.ts","sourceRoot":"","sources":["../src/ComposerRightRail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,KAAsB,EACtB,WAAoB,EACpB,cAAsB,GACvB,EAAE,sBAAsB,2CAqExB"}
+{"version":3,"file":"ComposerRightRail.d.ts","sourceRoot":"","sources":["../src/ComposerRightRail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAwDF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,KAAsB,EACtB,WAAoB,EACpB,cAAsB,EACtB,WAAe,GAChB,EAAE,sBAAsB,2CAiExB"}

package/dist/ComposerRightRail.js

@@ -1,10 +1,58 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
 import { RightPanel, RightPanelCollapseToggle, RightPanelShowToggle, } from './layout.js';
-export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title = 'image system', statusLabel = 'live', showEdgeToggle = false, }) {
+const RailHeader = styled.div `
+  border-bottom: 1px solid var(--brand-panel-border);
+  padding: 16px 18px 14px;
+  background: var(--brand-panel);
+`;
+const RailEyebrow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--brand-text-secondary);
+`;
+const RailTabs = styled.div `
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const RailTab = styled.button `
+  border-radius: 999px;
+  min-height: 42px;
+  padding: 0 20px;
+  border: 1px solid ${(props) => (props.$active ? 'var(--brand-text-primary)' : 'var(--brand-panel-border)')};
+  background: ${(props) => (props.$active ? 'var(--brand-text-primary)' : 'var(--brand-background)')};
+  color: ${(props) => (props.$active ? 'var(--brand-background)' : 'var(--brand-text-secondary)')};
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: lowercase;
+  white-space: nowrap;
+  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
+
+  &:hover {
+    color: ${(props) => (props.$active ? 'var(--brand-background)' : 'var(--brand-text-primary)')};
+  }
+`;
+const RailBody = styled.div `
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px;
+`;
+export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title = 'image system', statusLabel = 'live', showEdgeToggle = false, topOffsetPx = 0, }) {
     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: [showEdgeToggle ? (_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" }) }) })) : null, _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 && showEdgeToggle ? (_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] }));
+    return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, "$topOffset": topOffsetPx, children: [showEdgeToggle ? (_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" }) }) })) : null, _jsxs(RailHeader, { children: [_jsxs(RailEyebrow, { children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx(RailTabs, { children: tabs.map((tab) => (_jsx(RailTab, { type: "button", onClick: () => onTabChange(tab.id), "$active": active?.id === tab.id, children: tab.label }, tab.id))) })] }), _jsx(RailBody, { children: active?.content ?? null })] })) : null, !isVisible && showEdgeToggle ? (_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/LoginForm.js

@@ -65,5 +65,5 @@ const Notice = styled.p `
   max-width: 720px;
 `;
 export default function LoginForm({ email, password, onEmailChange, onPasswordChange, onSubmit, busy = false, status = null, emailLabel = 'Email', passwordLabel = 'Password', submitLabel = 'Login', busyLabel = 'Logging in…', }) {
-    return (_jsxs(Form, { onSubmit: onSubmit, autoComplete: "off", children: [_jsxs(Row, { children: [_jsx(LabelCell, { children: emailLabel }), _jsx(Input, { "aria-label": emailLabel, name: "email", placeholder: emailLabel, value: email, onChange: (event) => onEmailChange(event.target.value), autoComplete: "email", "data-lpignore": "true", required: true })] }), _jsxs(Row, { style: { marginTop: '1px' }, children: [_jsx(LabelCell, { children: passwordLabel }), _jsx(Input, { type: "password", "aria-label": passwordLabel, name: "password", placeholder: passwordLabel, required: true, value: password, onChange: (event) => onPasswordChange(event.target.value), autoComplete: "new-password", "data-lpignore": "true" })] }), _jsxs(ButtonRow, { style: { marginTop: '1px' }, children: [_jsx(Button, { type: "submit", "aria-label": submitLabel, disabled: busy || email.trim() === '' || password.trim() === '', children: busy ? busyLabel : submitLabel }), _jsx(Spacer, {})] }), status ? _jsx(Notice, { style: { color: 'var(--viewer-ui-color-text-error, #b91c1c)' }, children: status }) : null] }));
+    return (_jsxs(Form, { onSubmit: onSubmit, autoComplete: "on", children: [_jsxs(Row, { children: [_jsx(LabelCell, { children: emailLabel }), _jsx(Input, { "aria-label": emailLabel, name: "email", placeholder: emailLabel, value: email, onChange: (event) => onEmailChange(event.target.value), autoComplete: "username", "data-lpignore": "true", required: true })] }), _jsxs(Row, { style: { marginTop: '1px' }, children: [_jsx(LabelCell, { children: passwordLabel }), _jsx(Input, { type: "password", "aria-label": passwordLabel, name: "password", placeholder: passwordLabel, required: true, value: password, onChange: (event) => onPasswordChange(event.target.value), autoComplete: "current-password", "data-lpignore": "true" })] }), _jsxs(ButtonRow, { style: { marginTop: '1px' }, children: [_jsx(Button, { type: "submit", "aria-label": submitLabel, disabled: busy || email.trim() === '' || password.trim() === '', children: busy ? busyLabel : submitLabel }), _jsx(Spacer, {})] }), status ? _jsx(Notice, { style: { color: 'var(--viewer-ui-color-text-error, #b91c1c)' }, children: status }) : null] }));
 }

package/dist/ManifestTopBar.d.ts

@@ -4,11 +4,10 @@ export type ManifestTopBarProps = {
     variant?: 'landing' | 'canvas';
     showPoweredBy?: boolean;
     showLogout?: boolean;
-    showPanelToggle?: boolean;
     showSubtitle?: boolean;
     logoutCookieNames?: string[];
     logoutEndpoint?: string;
     logoutHref?: string;
 };
-export default function ManifestTopBar({ manifest, variant, showPoweredBy, showLogout, showPanelToggle, showSubtitle, logoutCookieNames, logoutEndpoint, logoutHref, }: ManifestTopBarProps): import("react/jsx-runtime").JSX.Element;
+export default function ManifestTopBar({ manifest, variant, showPoweredBy, showLogout, showSubtitle, logoutCookieNames, logoutEndpoint, logoutHref, }: ManifestTopBarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ManifestTopBar.d.ts.map

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;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;AAuJF,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,2CAmIrB"}
+{"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,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;AA+KF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAkB,EAClB,aAAqB,EACrB,UAAkB,EAClB,YAAoB,EACpB,iBAAiB,EACjB,cAAmC,EACnC,UAAqB,GACtB,EAAE,mBAAmB,2CA+HrB"}

package/dist/ManifestTopBar.js

@@ -1,5 +1,5 @@
 '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, useSearchParams } from 'next/navigation';
@@ -67,11 +67,35 @@ const AuthButton = styled.button `
   cursor: pointer;
   padding: 0;
   white-space: nowrap;
-  min-width: 12ch;
-  text-align: left;
+  display: inline-grid;
+  align-items: center;
+  grid-template-areas: 'auth';
 
   &:hover {
-    color: var(--brand-primary);
+    color: var(--brand-text-primary);
+  }
+
+  .auth-default,
+  .auth-logout {
+    grid-area: auth;
+    transition: opacity 0.16s ease;
+  }
+
+  .auth-logout {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &:hover .auth-default,
+  &:focus-visible .auth-default {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &:hover .auth-logout,
+  &:focus-visible .auth-logout {
+    opacity: 1;
+    visibility: visible;
   }
 `;
 const AuthLink = styled(Link) `
@@ -142,7 +166,7 @@ const isRouteActive = (pathname, href) => {
         return pathname === '/';
     return pathname === routePath || pathname.startsWith(`${routePath}/`);
 };
-export default function ManifestTopBar({ manifest, variant = 'canvas', showPoweredBy = false, showLogout = false, showPanelToggle = false, showSubtitle = false, logoutCookieNames, logoutEndpoint = '/api/auth/logout', logoutHref = '/login', }) {
+export default function ManifestTopBar({ manifest, variant = 'canvas', showPoweredBy = false, showLogout = false, showSubtitle = false, logoutCookieNames, logoutEndpoint = '/api/auth/logout', logoutHref = '/login', }) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const hydrated = useClientHydrated();
@@ -150,7 +174,6 @@ export default function ManifestTopBar({ manifest, variant = 'canvas', showPower
     const { auth } = useComposerAuthState();
     const [searchOpen, setSearchOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
-    const [authHovered, setAuthHovered] = useState(false);
     const searchRef = useRef(null);
     const inputRef = useRef(null);
     const navigation = composerData.navigation;
@@ -171,7 +194,7 @@ export default function ManifestTopBar({ manifest, variant = 'canvas', showPower
         : logoutHref;
     const handleLogout = useSessionLogout({
         logoutRoute: logoutEndpoint,
-        redirectPath: logoutHref,
+        redirectPath: loginHref,
     });
     useEffect(() => {
         if (!searchOpen)
@@ -193,13 +216,13 @@ export default function ManifestTopBar({ manifest, variant = 'canvas', showPower
         if (!showLogout)
             return null;
         if (hydrated && auth.isAuthenticated) {
-            const authLabel = authHovered ? 'logout' : formatDisplayName(auth.name || auth.user);
-            return (_jsx(AuthButton, { type: "button", onClick: handleLogout, onMouseEnter: () => setAuthHovered(true), onMouseLeave: () => setAuthHovered(false), onFocus: () => setAuthHovered(true), onBlur: () => setAuthHovered(false), "aria-label": authHovered ? 'logout' : authLabel, children: authLabel }));
+            const authLabel = formatDisplayName(auth.name || auth.user);
+            return (_jsxs(AuthButton, { type: "button", onClick: handleLogout, "aria-label": "logout", children: [_jsx("span", { className: "auth-default", children: authLabel }), _jsx("span", { className: "auth-logout", children: "logout" })] }));
         }
         if (pathname === logoutHref)
             return null;
         return _jsx(AuthLink, { href: loginHref, children: "Login" });
-    }, [auth.isAuthenticated, auth.name, auth.user, authHovered, handleLogout, hydrated, loginHref, logoutHref, pathname, showLogout]);
+    }, [auth.isAuthenticated, auth.name, auth.user, handleLogout, hydrated, loginHref, logoutHref, pathname, showLogout]);
     const actions = (_jsxs(Actions, { "$variant": variant, children: [_jsx(NavLink, { href: introHref, "$active": isRouteActive(pathname, introHref), children: "Introduction" }), _jsx(NavLink, { href: composeHref, "$active": isRouteActive(pathname, composeHref), children: "Compose" }), authControl, searchEnabled ? (_jsx(SearchWrap, { ref: searchRef, children: _jsx(SearchControl, { "$expanded": searchOpen, onClick: !searchOpen ? () => setSearchOpen(true) : undefined, children: searchOpen ? (_jsxs(_Fragment, { children: [_jsx(SearchInput, { ref: inputRef, type: "text", placeholder: "Search...", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
                                     if (event.key === 'Escape') {
                                         setSearchOpen(false);

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;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"}
+{"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAIA,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;AAqED,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,2CAyD1B"}

package/dist/MetricsPanelContent.js

@@ -1,7 +1,63 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
 const formatMeters = (value) => `${value.toFixed(2)} m`;
 const formatDegrees = (value) => `${value.toFixed(1)}°`;
+const Root = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+`;
+const Header = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const Title = styled.div `
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--brand-text-primary);
+`;
+const Eyebrow = styled.div `
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--brand-text-secondary);
+`;
+const Section = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const SectionTitle = styled.div `
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--brand-text-secondary);
+`;
+const MetricRow = styled.div `
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--brand-panel-border);
+
+  &:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+  }
+`;
+const MetricLabel = styled.span `
+  font-size: 13px;
+  color: var(--brand-text-secondary);
+`;
+const MetricValue = styled.span `
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: 13px;
+  color: var(--brand-text-primary);
+`;
 export default function MetricsPanelContent({ cameraMetrics, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, }) {
     const sections = [
         {
@@ -37,5 +93,5 @@ export default function MetricsPanelContent({ cameraMetrics, distanceToFloor, di
             }
             : 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))) })] }));
+    return (_jsxs(Root, { children: [_jsxs(Header, { children: [_jsx(Title, { children: "viewer metrics" }), _jsx(Eyebrow, { children: "live scene telemetry" })] }), _jsx("div", { children: sections.map((section) => (_jsxs(Section, { children: [_jsx(SectionTitle, { children: section.title }), section.metrics.map((metric) => (_jsxs(MetricRow, { children: [_jsx(MetricLabel, { children: metric.label }), _jsx(MetricValue, { children: metric.value })] }, metric.label)))] }, section.title))) })] }));
 }

package/dist/ModeBar.d.ts

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 export type ModeTab = {
     id: string;
     label: string;
@@ -12,15 +11,14 @@ export type ModeBarProps = {
     tabs: ModeTab[];
     tone?: 'green' | 'ochre';
     heightPx?: number;
-    collapsed?: boolean;
-    showToggle?: boolean;
     lockedLabel?: string;
     onSelect?: (modeId: string) => void;
-    onTogglePanels?: () => void;
-    toggleButton?: ReactNode;
     hidden?: boolean;
     className?: string;
+    showPanelToggle?: boolean;
+    panelsCollapsed?: boolean;
+    onTogglePanels?: () => void;
 };
 export declare const MODE_BAR_HEIGHT_PX = 34;
-export default function ModeBar({ active, topOffsetPx, tabs, tone, heightPx, collapsed, showToggle, lockedLabel, onSelect, onTogglePanels, toggleButton, hidden, className, }: ModeBarProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ModeBar({ active, topOffsetPx, tabs, tone, heightPx, lockedLabel, onSelect, hidden, className, showPanelToggle, panelsCollapsed, onTogglePanels, }: ModeBarProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ModeBar.d.ts.map

package/dist/ModeBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModeBar.d.ts","sourceRoot":"","sources":["../src/ModeBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqGvC,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,MAAM,EACN,WAAW,EACX,IAAI,EACJ,IAAc,EACd,QAA6B,EAC7B,SAAiB,EACjB,UAAkB,EAClB,WAA2B,EAC3B,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,MAAc,EACd,SAAS,GACV,EAAE,YAAY,kDA4Ed"}
+{"version":3,"file":"ModeBar.d.ts","sourceRoot":"","sources":["../src/ModeBar.tsx"],"names":[],"mappings":"AAoGA,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,MAAM,EACN,WAAW,EACX,IAAI,EACJ,IAAc,EACd,QAA6B,EAC7B,WAA2B,EAC3B,QAAQ,EACR,MAAc,EACd,SAAS,EACT,eAAuB,EACvB,eAAuB,EACvB,cAAc,GACf,EAAE,YAAY,kDA6Dd"}

package/dist/ModeBar.js

@@ -11,6 +11,17 @@ const Root = styled.div `
   background: var(--viewer-ui-color-bg-base, var(--brand-panel, #f6f3eb));
   border-bottom: 1px solid var(--viewer-ui-color-panel-border, rgba(47, 74, 60, 0.35));
 `;
+const ToggleOverlay = styled.div `
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 8px);
+  transform: translateX(-50%);
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: auto;
+`;
 const Tabs = styled.div `
   height: 100%;
   display: flex;
@@ -32,73 +43,56 @@ const TabLink = styled.a `
   align-items: center;
   text-decoration: none;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: lowercase;
-  transition: color 0.16s ease, background-color 0.16s ease;
+  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
   background: ${(props) => props.$active
     ? props.$tone === 'green'
-        ? 'var(--viewer-ui-color-button-secondary)'
-        : 'var(--viewer-ui-color-button-primary)'
+        ? 'rgba(49, 143, 78, 0.12)'
+        : 'rgba(15, 23, 42, 0.08)'
     : 'var(--viewer-ui-color-tab-bg, rgba(47, 74, 60, 0.08))'};
   color: ${(props) => props.$active
-    ? 'var(--viewer-ui-color-text-strong, #efe9de)'
+    ? props.$tone === 'green'
+        ? 'var(--viewer-ui-color-button-primary, #318f4e)'
+        : 'var(--viewer-ui-color-button-secondary, #0b1320)'
     : 'var(--viewer-ui-color-text-muted, rgba(47, 74, 60, 0.75))'};
 
   &:hover {
-    color: var(--viewer-ui-color-text-strong, #efe9de);
+    color: ${(props) => props.$active
+    ? props.$tone === 'green'
+        ? 'var(--viewer-ui-color-button-primary, #318f4e)'
+        : 'var(--viewer-ui-color-button-secondary, #0b1320)'
+    : 'var(--viewer-ui-color-text-strong, #0f172a)'};
   }
 `;
-const ToggleCluster = styled.div `
-  position: absolute;
-  left: 50%;
-  bottom: -1px;
-  transform: translate(-50%, 100%);
-  display: flex;
-  align-items: center;
-  gap: 8px;
+const LockedLabel = styled.span `
+  margin-left: 8px;
+  font-size: 9px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--viewer-ui-color-text-muted, rgba(47, 74, 60, 0.75));
 `;
-const ToggleTextButton = styled.button `
+const ToggleText = styled.button `
   border: 0;
   background: transparent;
   font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--viewer-ui-color-text-muted, rgba(47, 74, 60, 0.75));
-  transition: color 0.16s ease;
+  letter-spacing: 0.14em;
+  color: var(--brand-text-secondary);
   cursor: pointer;
   padding: 0;
+  white-space: nowrap;
 
   &:hover {
-    color: var(--brand-primary, #318f4e);
+    color: var(--brand-text-primary);
   }
 `;
-const LockedLabel = styled.span `
-  margin-left: 8px;
-  font-size: 9px;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--viewer-ui-color-text-muted, rgba(47, 74, 60, 0.75));
-`;
-const CollapsedRoot = styled.div `
-  position: fixed;
-  left: 50%;
-  top: 58px;
-  z-index: 70;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
 export const MODE_BAR_HEIGHT_PX = 34;
-export default function ModeBar({ active, topOffsetPx, tabs, tone = 'green', heightPx = MODE_BAR_HEIGHT_PX, collapsed = false, showToggle = false, lockedLabel = 'coming soon', onSelect, onTogglePanels, toggleButton, hidden = false, className, }) {
-    const renderedToggleButton = toggleButton ?? (_jsx("button", { type: "button", className: "collapse-toggle collapse-toggle--edge-top", onClick: onTogglePanels, "aria-label": collapsed ? 'Show panels' : 'Hide panels', children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: collapsed ? (_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("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" })) }) }));
-    if (hidden && !showToggle) {
+export default function ModeBar({ active, topOffsetPx, tabs, tone = 'green', heightPx = MODE_BAR_HEIGHT_PX, lockedLabel = 'coming soon', onSelect, hidden = false, className, showPanelToggle = false, panelsCollapsed = false, onTogglePanels, }) {
+    if (hidden) {
         return null;
     }
-    if (collapsed && showToggle) {
-        return (_jsxs(CollapsedRoot, { className: className, children: [renderedToggleButton, _jsx(ToggleTextButton, { type: "button", onClick: onTogglePanels, "aria-label": "Show all panels", children: "show all panels" })] }));
-    }
     return (_jsxs(Root, { className: className, "$topOffsetPx": topOffsetPx, "$heightPx": heightPx, children: [_jsx(Tabs, { children: tabs.map((tab, index) => {
                     const statusLabel = tab.status === 'coming-soon' || tab.locked ? lockedLabel : null;
                     return (_jsxs(TabLink, { "$active": tab.id === active, "$tone": tone, "$index": index, href: tab.href ?? '#', onClick: (event) => {
@@ -107,5 +101,5 @@ export default function ModeBar({ active, topOffsetPx, tabs, tone = 'green', hei
                             }
                             onSelect?.(tab.id);
                         }, children: [_jsx("span", { children: tab.label }), statusLabel ? _jsx(LockedLabel, { children: statusLabel }) : null] }, tab.id));
-                }) }), showToggle ? (_jsxs(ToggleCluster, { children: [renderedToggleButton, _jsx(ToggleTextButton, { type: "button", onClick: onTogglePanels, "aria-label": "Toggle panels", children: "toggle panels" })] })) : null] }));
+                }) }), showPanelToggle && onTogglePanels ? (_jsxs(ToggleOverlay, { children: [_jsx("button", { type: "button", className: "collapse-toggle collapse-toggle--edge-top", onClick: onTogglePanels, "aria-label": panelsCollapsed ? 'Show panels' : 'Toggle panels', children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: panelsCollapsed ? (_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("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(ToggleText, { type: "button", onClick: onTogglePanels, children: panelsCollapsed ? 'show panels' : 'toggle panels' })] })) : null] }));
 }

package/dist/TopBar.d.ts

@@ -5,7 +5,8 @@ export type TopBarProps = {
     brand: ReactNode;
     center?: ReactNode;
     actions?: ReactNode;
+    bottomOverlay?: ReactNode;
     className?: string;
 };
-export default function TopBar({ compact, hidden, brand, center, actions, className, }: TopBarProps): import("react/jsx-runtime").JSX.Element;
+export default function TopBar({ compact, hidden, brand, center, actions, bottomOverlay, className, }: TopBarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TopBar.d.ts.map

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;AAkDvC,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,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,SAAS,GACV,EAAE,WAAW,2CAUb"}
+{"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"}

package/dist/TopBar.js

@@ -13,11 +13,12 @@ const Root = styled.nav `
   color: var(--viewer-ui-color-text-strong, var(--brand-text-primary, #1f2937));
   transform: ${(props) => (props.$hidden ? 'translateY(-100%)' : 'translateY(0)')};
   transition: transform 0.22s ease;
+  overflow: visible;
 `;
 const Inner = styled.div `
   height: 100%;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: ${(props) => (props.$hasCenter ? 'minmax(0, 1fr) auto minmax(0, 1fr)' : 'minmax(0, 1fr) auto')};
   align-items: center;
   gap: 16px;
   padding: 0 16px;
@@ -32,7 +33,7 @@ const BrandSlot = styled.div `
   align-items: center;
 `;
 const CenterSlot = styled.div `
-  display: none;
+  display: flex;
   justify-content: center;
   align-items: center;
   min-width: 0;
@@ -43,6 +44,16 @@ const ActionsSlot = styled.div `
   justify-content: flex-end;
   align-items: center;
 `;
-export default function TopBar({ compact = false, hidden = false, brand, center, actions, className, }) {
-    return (_jsx(Root, { className: className, "$compact": compact, "$hidden": hidden, children: _jsxs(Inner, { children: [_jsx(BrandSlot, { children: brand }), _jsx(CenterSlot, { children: center }), _jsx(ActionsSlot, { children: actions })] }) }));
+const BottomOverlay = styled.div `
+  position: absolute;
+  left: 50%;
+  bottom: -1px;
+  transform: translate(-50%, 100%);
+  z-index: 60;
+  display: ${(props) => (props.$compact ? 'flex' : 'none')};
+  align-items: center;
+  gap: 8px;
+`;
+export default function TopBar({ compact = false, hidden = false, brand, center, actions, bottomOverlay, className, }) {
+    return (_jsxs(Root, { className: className, "$compact": compact, "$hidden": hidden, children: [_jsxs(Inner, { "$hasCenter": Boolean(center), children: [_jsx(BrandSlot, { children: brand }), center ? _jsx(CenterSlot, { children: center }) : null, _jsx(ActionsSlot, { children: actions })] }), bottomOverlay ? _jsx(BottomOverlay, { "$compact": compact, children: bottomOverlay }) : null] }));
 }

package/dist/layout.d.ts

@@ -20,6 +20,7 @@ export declare const PanelCollapseToggle: import("styled-components/dist/types")
 export declare const PanelShowToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, never>> & string;
 export declare const RightPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     $open: boolean;
+    $topOffset?: number;
 }>> & string;
 export declare const RightPanelCollapseToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, never>> & string;
 export declare const RightPanelShowToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, never>> & string;

package/dist/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,6NAKlB,CAAC;AAEF,eAAO,MAAM,WAAW;iBAAiC,MAAM;YAM9D,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,YAAY;WAAyB,OAAO;YAexD,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAK1B,CAAC;AAEF,eAAO,MAAM,UAAU,qOAItB,CAAC;AAEF,eAAO,MAAM,aAAa,yOAIzB,CAAC;AAEF,eAAO,MAAM,eAAe;YAAyB,SAAS,GAAG,OAAO,GAAG,OAAO;YA4BjF,CAAC;AAEF,eAAO,MAAM,SAAS,6NASrB,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wbAM/B,CAAC;AAEF,eAAO,MAAM,eAAe,wbAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;WAAyB,OAAO;YActD,CAAC;AAEF,eAAO,MAAM,wBAAwB,wbAMpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,wbAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,MAAM;YAO/D,CAAC;AAEF,eAAO,MAAM,aAAa,6NAYzB,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,+NAK1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yOAa7B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAGzB,CAAC;AAEF,eAAO,MAAM,YAAY,6NAKxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,eAAe,yOAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,OAAO;YAYhE,CAAC"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,6NAKlB,CAAC;AAEF,eAAO,MAAM,WAAW;iBAAiC,MAAM;YAM9D,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,YAAY;WAAyB,OAAO;YAexD,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAK1B,CAAC;AAEF,eAAO,MAAM,UAAU,qOAItB,CAAC;AAEF,eAAO,MAAM,aAAa,yOAIzB,CAAC;AAEF,eAAO,MAAM,eAAe;YAAyB,SAAS,GAAG,OAAO,GAAG,OAAO;YA4BjF,CAAC;AAEF,eAAO,MAAM,SAAS,6NASrB,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wbAM/B,CAAC;AAEF,eAAO,MAAM,eAAe,wbAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;WAAyB,OAAO;iBAAe,MAAM;YAc3E,CAAC;AAEF,eAAO,MAAM,wBAAwB,wbAMpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,wbAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,MAAM;YAO/D,CAAC;AAEF,eAAO,MAAM,aAAa,6NAYzB,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,+NAK1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yOAa7B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAGzB,CAAC;AAEF,eAAO,MAAM,YAAY,6NAKxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,eAAe,yOAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,OAAO;YAYhE,CAAC"}

package/dist/layout.js

@@ -126,8 +126,8 @@ export const PanelShowToggle = styled.button.attrs({ className: 'collapse-toggle
 export const RightPanel = styled.aside `
   position: absolute;
   right: 0;
-  top: 0;
-  bottom: 0;
+  top: ${(props) => props.$topOffset ?? 0}px;
+  height: calc(100% - ${(props) => props.$topOffset ?? 0}px);
   width: var(--ui-metrics-width);
   background: var(--brand-panel);
   border-left: 1px solid var(--brand-panel-border);
@@ -135,7 +135,7 @@ export const RightPanel = styled.aside `
   display: flex;
   flex-direction: column;
   transform: translateX(${(props) => (props.$open ? '0' : '105%')});
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, top 0.3s ease, height 0.3s ease;
   z-index: 30;
 `;
 export const RightPanelCollapseToggle = styled.button.attrs({ className: 'collapse-toggle collapse-toggle--edge-left' }) `