@treasuryspatial/viewer-ui-kit 0.1.42 → 0.1.56

package/dist/ManifestTopBar.js

@@ -4,61 +4,187 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { buildLoginHref, useClientHydrated, useComposerAuthState, useSessionLogout, useSurfaceComposerData, } from '@treasuryspatial/viewer-react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import TopBar from './TopBar.js';
+import { LANDING_LOGO_SIZE, LANDING_TITLE_SIZE, } from './landingTokens.js';
+import { resolveVisibleTopbarSecondaryLogo } from './topbarLogoPolicy.js';
+const drawTreasuryMark = keyframes `
+  to {
+    stroke-dashoffset: 0;
+  }
+`;
 const BrandLink = styled(Link) `
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: ${(props) => (props.$variant === 'landing' ? '10px' : '8px')};
   text-decoration: none;
   color: inherit;
   min-width: 0;
 
-  &:hover {
-    opacity: 0.75;
+  &:hover ${() => TreasuryMark} {
+    color: var(--brand-primary);
+  }
+`;
+const BrandLogoCluster = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${(props) => (props.$variant === 'landing' ? '10px' : '8px')};
+  flex-shrink: 0;
+`;
+const TreasuryMark = styled.svg `
+  width: ${(props) => (props.$variant === 'landing' ? LANDING_LOGO_SIZE : '31px')};
+  height: ${(props) => (props.$variant === 'landing' ? LANDING_LOGO_SIZE : '31px')};
+  margin-top: ${(props) => (props.$variant === 'landing' ? '6px' : '3px')};
+  color: var(--brand-text-primary);
+  transition: color 0.2s ease-in-out;
+  flex-shrink: 0;
+
+  path {
+    fill: none;
+    stroke: currentColor;
+    stroke-miterlimit: 3.86;
+    stroke-width: ${(props) => (props.$variant === 'landing' ? '27.4px' : '27.4px')};
+    stroke-dasharray: 243.60040283203125;
+    stroke-dashoffset: 243.60040283203125;
+    animation: ${drawTreasuryMark} 2s ease-out forwards;
   }
 `;
 const BrandLogo = styled.img `
-  width: ${(props) => (props.$variant === 'landing' ? 'clamp(32px, 4vw + 8px, 64px)' : '32px')};
-  height: ${(props) => (props.$variant === 'landing' ? 'clamp(32px, 4vw + 8px, 64px)' : '32px')};
+  width: ${(props) => (props.$variant === 'landing' ? LANDING_LOGO_SIZE : '28px')};
+  height: ${(props) => (props.$variant === 'landing' ? LANDING_LOGO_SIZE : '28px')};
+  object-fit: contain;
+  flex-shrink: 0;
+`;
+const BrandLogoDivider = styled.div `
+  width: 1px;
+  height: ${(props) => (props.$variant === 'landing' ? '28px' : '20px')};
+  background: var(--brand-panel-border);
+  opacity: 0.65;
+  flex-shrink: 0;
+`;
+const BrandSecondaryLogo = styled.img `
+  width: ${(props) => (props.$variant === 'landing' ? '30px' : '20px')};
+  height: ${(props) => (props.$variant === 'landing' ? '30px' : '20px')};
   object-fit: contain;
   flex-shrink: 0;
 `;
+const BrandText = styled.div `
+  min-width: 0;
+  display: flex;
+  align-items: ${(props) => (props.$stacked ? 'center' : 'baseline')};
+  gap: ${(props) => (props.$stacked ? (props.$variant === 'landing' ? '12px' : '10px') : '0')};
+`;
 const BrandTitle = styled.div `
   display: flex;
-  align-items: baseline;
-  gap: ${(props) => (props.$variant === 'landing' ? '8px' : '6px')};
-  font-family: var(--ui-font-family, system-ui);
-  font-size: ${(props) => (props.$variant === 'landing' ? 'clamp(18px, 2vw + 10px, 48px)' : '18px')};
-  line-height: 1;
-  white-space: nowrap;
+  flex-direction: ${(props) => (props.$stacked ? 'column' : 'row')};
+  align-items: ${(props) => (props.$stacked ? 'flex-start' : 'baseline')};
+  gap: ${(props) => (props.$stacked ? (props.$variant === 'landing' ? '4px' : '2px') : props.$variant === 'landing' ? '10px' : '6px')};
+  font-family: var(--viewer-ui-font-display, var(--ui-font-family, system-ui));
+  font-size: ${(props) => {
+    if (props.$stacked)
+        return props.$variant === 'landing' ? 'clamp(13px, 1.1vw + 7px, 18px)' : '11px';
+    return props.$variant === 'landing' ? LANDING_TITLE_SIZE : '16px';
+}};
+  line-height: ${(props) => (props.$stacked ? '1.05' : '1')};
+  letter-spacing: ${(props) => (props.$stacked ? '-0.02em' : '-0.03em')};
+  min-width: 0;
+  max-width: ${(props) => (props.$stacked ? (props.$variant === 'landing' ? 'min(50vw, 560px)' : 'min(36vw, 420px)') : 'none')};
+`;
+const BrandTitleRow = styled.div `
+  display: flex;
+  align-items: ${(props) => (props.$stacked ? 'center' : 'baseline')};
+  gap: 6px;
+  min-width: 0;
 `;
 const BrandTenant = styled.span `
   color: var(--brand-text-primary);
   font-weight: 400;
+  font-size: ${(props) => (props.$stacked ? '1em' : 'inherit')};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 const BrandSurface = styled.span `
   color: var(--brand-primary);
   font-weight: 400;
+  font-family: var(--viewer-ui-font-display, var(--ui-font-family, system-ui));
+  font-size: ${(props) => {
+    if (props.$variant === 'landing')
+        return '1em';
+    return '16px';
+}};
+  letter-spacing: 0;
+  text-transform: none;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const BrandProductSuffix = styled.span `
+  color: var(--brand-text-primary);
+  font-weight: 400;
+  font-family: var(--viewer-ui-font-display, var(--ui-font-family, system-ui));
+  font-size: ${(props) => {
+    if (props.$variant === 'landing')
+        return '1em';
+    return '16px';
+}};
+  letter-spacing: 0;
+  text-transform: none;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const BrandSubtitle = styled.span `
+  color: var(--brand-text-secondary);
+  font-weight: 400;
+  font-size: ${(props) => (props.$variant === 'landing' ? '0.72em' : '11px')};
+  letter-spacing: 0.02em;
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 const Actions = styled.div `
   display: flex;
   align-items: center;
-  gap: ${(props) => (props.$variant === 'landing' ? '22px' : '16px')};
-  font-size: ${(props) => (props.$variant === 'landing' ? '14px' : '13px')};
+  gap: ${(props) => (props.$variant === 'landing' ? '18px' : '16px')};
+  font-family: var(--viewer-ui-font-body, var(--ui-font-family, system-ui));
+  font-size: ${(props) => (props.$variant === 'landing' ? '16px' : '15px')};
+  font-weight: 400;
+  line-height: 1.45;
   min-width: 0;
 `;
 const NavLink = styled(Link) `
   color: ${(props) => (props.$active ? 'var(--brand-primary)' : 'var(--brand-text-primary)')};
   text-decoration: none;
   font-weight: 400;
+  text-transform: none;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--brand-primary);
+  }
+`;
+const NavAnchor = styled.a `
+  color: ${(props) => (props.$active ? 'var(--brand-primary)' : 'var(--brand-text-primary)')};
+  text-decoration: none;
+  font-weight: 400;
+  text-transform: none;
   white-space: nowrap;
 
   &:hover {
     color: var(--brand-primary);
   }
 `;
-const AuthButton = styled.button `
+const AccountCluster = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+`;
+const AccountPrimaryAction = styled.button `
   border: none;
   background: transparent;
   color: var(--brand-text-primary);
@@ -69,39 +195,39 @@ const AuthButton = styled.button `
   white-space: nowrap;
   display: inline-grid;
   align-items: center;
-  grid-template-areas: 'auth';
+  text-transform: none;
 
-  &:hover {
-    color: var(--brand-text-primary);
+  > span {
+    grid-area: 1 / 1;
+    transition: opacity 160ms ease, transform 160ms ease;
   }
 
-  .auth-default,
-  .auth-logout {
-    grid-area: auth;
-    transition: opacity 0.16s ease;
+  .account-primary-default {
+    opacity: 1;
   }
 
-  .auth-logout {
+  .account-primary-hover {
     opacity: 0;
-    visibility: hidden;
+    color: var(--brand-primary);
   }
 
-  &:hover .auth-default,
-  &:focus-visible .auth-default {
+  &:hover .account-primary-default,
+  &:focus-visible .account-primary-default {
     opacity: 0;
-    visibility: hidden;
+    transform: translateY(-1px);
   }
 
-  &:hover .auth-logout,
-  &:focus-visible .auth-logout {
+  &:hover .account-primary-hover,
+  &:focus-visible .account-primary-hover {
     opacity: 1;
-    visibility: visible;
+    transform: translateY(0);
   }
 `;
 const AuthLink = styled(Link) `
   color: var(--brand-text-primary);
   text-decoration: none;
   font-weight: 400;
+  text-transform: none;
   white-space: nowrap;
 
   &:hover {
@@ -166,26 +292,84 @@ const isRouteActive = (pathname, href) => {
         return pathname === '/';
     return pathname === routePath || pathname.startsWith(`${routePath}/`);
 };
-export default function ManifestTopBar({ manifest, variant = 'canvas', showPoweredBy = false, showLogout = false, showSubtitle = false, logoutCookieNames, logoutEndpoint = '/api/auth/logout', logoutHref = '/login', }) {
+const isInternalHref = (href) => href.startsWith('/');
+const isGalleryHref = (href) => {
+    if (!href)
+        return false;
+    const normalized = href.trim();
+    if (!normalized)
+        return false;
+    const path = normalized.split('?')[0] || normalized;
+    if (path === '/gallery' ||
+        path.startsWith('/gallery/') ||
+        path === '/composer/gallery' ||
+        path.startsWith('/composer/gallery/')) {
+        return true;
+    }
+    try {
+        const params = new URLSearchParams(normalized.split('?')[1] || '');
+        return params.get('mode') === 'gallery';
+    }
+    catch {
+        return false;
+    }
+};
+const isGalleryTopbarLink = (link) => link.route === 'gallery' || isGalleryHref(link.href);
+export default function ManifestTopBar({ manifest, variant = 'canvas', topbarContext, showPoweredBy = false, showLogout = false, showSubtitle = false, hidden = false, center, bottomOverlay, logoutCookieNames, logoutEndpoint = '/api/auth/logout', logoutHref = '/login', }) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const hydrated = useClientHydrated();
     const composerData = useSurfaceComposerData();
-    const { auth } = useComposerAuthState();
+    const { auth, authHydrated } = useComposerAuthState();
     const [searchOpen, setSearchOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const searchRef = useRef(null);
     const inputRef = useRef(null);
     const navigation = composerData.navigation;
+    const topbar = composerData.topbar;
+    const effectiveTopbarContext = topbarContext ?? (variant === 'landing' ? 'landing' : 'composer');
+    const contextTopbar = topbar?.contexts?.[effectiveTopbarContext];
     const introHref = navigation?.introHref || '/';
-    const composeHref = navigation?.composeHref || composerData.routePolicy?.homeRoute || '/compose';
-    const surfaceTitle = navigation?.surfaceTitle ||
+    const composeHref = navigation?.composeHref || composerData.routePolicy?.homeRoute || '/composer/compose';
+    const brandTitle = contextTopbar?.title || topbar?.title || manifest.topbar.title;
+    const surfaceSubtitle = contextTopbar?.subtitle ||
+        topbar?.subtitle ||
+        (showSubtitle ? manifest.topbar.subtitle : null);
+    const surfaceTitle = contextTopbar?.productLabel ||
+        topbar?.productLabel ||
+        navigation?.surfaceTitle ||
         composerData.title ||
         manifest.surface?.label ||
         manifest.topbar.productLabel ||
         'Composer';
+    const productSuffixLabel = contextTopbar?.productSuffixLabel ||
+        (effectiveTopbarContext === 'landing' || effectiveTopbarContext === 'login'
+            ? ''
+            : topbar?.productSuffixLabel || manifest.topbar.productSuffixLabel || '');
     const searchEnabled = navigation?.searchEnabled ?? true;
+    const displaySubtitle = Boolean(surfaceSubtitle) && (showSubtitle || Boolean(contextTopbar?.subtitle || topbar?.subtitle));
     const brandLogo = manifest.topbar.logo;
+    const treasuryNative = manifest.surface?.brandProfile === 'treasury-native';
+    const secondaryLogo = resolveVisibleTopbarSecondaryLogo({
+        primaryLogo: brandLogo,
+        subtenantLogo: manifest.topbar.subtenantLogo,
+        composerDataSecondaryLogo: topbar?.secondaryLogo,
+        manifestSecondaryLogo: manifest.topbar.secondaryLogo,
+        hasSubtenant: Boolean(composerData.subtenantSlug),
+    });
+    const manifestTopbarLinks = (manifest.topbar.links ?? []).map((link) => ({
+        label: link.label,
+        href: link.href,
+        ...(link.target ? { target: link.target } : {}),
+    }));
+    const topbarLinksSource = contextTopbar?.links ?? (topbar ? (topbar.links ?? []) : manifestTopbarLinks);
+    const topbarLinks = topbarLinksSource.filter((entry) => Boolean(entry?.label?.trim() && (entry?.route || entry?.href?.trim()) && !isGalleryTopbarLink(entry)));
+    const visibleLinks = topbarLinks.length > 0
+        ? topbarLinks
+        : [
+            { label: 'Introduction', route: 'intro' },
+            { label: 'Composer', route: 'compose' },
+        ];
     const loginHref = hydrated
         ? buildLoginHref({
             pathname,
@@ -215,19 +399,46 @@ export default function ManifestTopBar({ manifest, variant = 'canvas', showPower
     const authControl = useMemo(() => {
         if (!showLogout)
             return null;
+        if (!authHydrated)
+            return null;
         if (hydrated && auth.isAuthenticated) {
             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" })] }));
+            return (_jsx(AccountCluster, { children: _jsxs(AccountPrimaryAction, { type: "button", onClick: () => handleLogout(), "aria-label": "Logout", children: [_jsx("span", { className: "account-primary-default", children: authLabel }), _jsx("span", { className: "account-primary-hover", children: "Logout" })] }) }));
         }
         if (pathname === logoutHref)
             return null;
         return _jsx(AuthLink, { href: loginHref, children: "Login" });
-    }, [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) => {
+    }, [
+        auth.isAuthenticated,
+        auth.name,
+        auth.user,
+        authHydrated,
+        handleLogout,
+        hydrated,
+        loginHref,
+        logoutHref,
+        pathname,
+        showLogout,
+    ]);
+    const actions = (_jsxs(Actions, { "$variant": variant, children: [visibleLinks.map((link) => (() => {
+                const resolvedHref = link.route === 'intro'
+                    ? introHref
+                    : link.route === 'compose'
+                        ? composeHref
+                        : link.href;
+                if (!resolvedHref)
+                    return null;
+                if (isGalleryHref(resolvedHref))
+                    return null;
+                if (isInternalHref(resolvedHref) && isRouteActive(pathname, resolvedHref))
+                    return null;
+                return isInternalHref(resolvedHref) ? (_jsx(NavLink, { href: resolvedHref, "$active": isRouteActive(pathname, resolvedHref), children: link.label }, `${link.label}:${resolvedHref}`)) : (_jsx(NavAnchor, { href: resolvedHref, target: link.target === '_blank' ? '_blank' : undefined, rel: link.target === '_blank' ? 'noreferrer' : undefined, "$active": false, children: link.label }, `${link.label}:${resolvedHref}`));
+            })()), 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);
                                         setSearchQuery('');
                                     }
                                 } }), 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 }));
+    const centerSlot = center ?? (showPoweredBy ? null : null);
+    return (_jsx(TopBar, { compact: variant === 'canvas', hidden: hidden, brand: _jsxs(BrandLink, { href: introHref, "$variant": variant, children: [_jsxs(BrandLogoCluster, { "$variant": variant, children: [treasuryNative && !brandLogo?.src ? (_jsxs(TreasuryMark, { "$variant": variant, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 268.52 268.01", "aria-hidden": "true", children: [_jsx("path", { d: "M289.12,263.83l-.29,70.25c0,46.25-26.29,63.78-65.48,63.78H154.81", transform: "translate(-154.81 -263.78)" }), _jsx("path", { d: "M289,531.73l.29-70.24c0-46.25,26.29-63.78,65.49-63.78h68.53", transform: "translate(-154.81 -263.78)" })] })) : brandLogo?.src ? (_jsx(BrandLogo, { "$variant": variant, src: brandLogo.src, alt: brandLogo.alt })) : null, brandLogo?.src && secondaryLogo?.src ? (_jsxs(_Fragment, { children: [_jsx(BrandLogoDivider, { "$variant": variant }), _jsx(BrandSecondaryLogo, { "$variant": variant, src: secondaryLogo.src, alt: secondaryLogo.alt })] })) : null] }), _jsxs(BrandText, { "$variant": variant, "$stacked": displaySubtitle, children: [_jsx(BrandTitle, { "$variant": variant, "$stacked": displaySubtitle, children: displaySubtitle ? (_jsxs(_Fragment, { children: [_jsx(BrandTitleRow, { "$stacked": true, children: _jsx(BrandTenant, { "$stacked": true, children: brandTitle }) }), _jsx(BrandTitleRow, { "$stacked": true, children: _jsx(BrandSubtitle, { "$variant": variant, children: surfaceSubtitle }) })] })) : (_jsxs(BrandTitleRow, { children: [_jsx(BrandTenant, { children: brandTitle }), surfaceTitle ? _jsx(BrandSurface, { "$variant": variant, children: surfaceTitle }) : null, productSuffixLabel ? (_jsx(BrandProductSuffix, { "$variant": variant, children: productSuffixLabel })) : null] })) }), displaySubtitle && surfaceTitle ? (_jsxs(BrandTitleRow, { children: [_jsx(BrandSurface, { "$variant": variant, children: surfaceTitle }), productSuffixLabel ? (_jsx(BrandProductSuffix, { "$variant": variant, children: productSuffixLabel })) : null] })) : null] })] }), center: centerSlot, actions: actions, bottomOverlay: bottomOverlay }));
 }

package/dist/MetricsPanel.d.ts

@@ -8,7 +8,7 @@ export interface RenderInputSummary {
         id: string;
         label: string;
         description?: string;
-        mode?: 'gradient' | 'hdr' | 'cube' | 'none';
+        mode?: 'gradient' | 'hdr' | 'image' | 'cube' | 'none';
         src?: string;
         exposure?: number;
     } | null;

package/dist/MetricsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsPanel.d.ts","sourceRoot":"","sources":["../src/MetricsPanel.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,GAAG,CAAC,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;QAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,IAAI,CAAC;CACV;AAED,UAAU,iBAAiB;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,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;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC1C;AAuGD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,GACb,EAAE,iBAAiB,2CAwInB"}
+{"version":3,"file":"MetricsPanel.d.ts","sourceRoot":"","sources":["../src/MetricsPanel.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,GAAG,CAAC,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;QACtD,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,IAAI,CAAC;CACV;AAED,UAAU,iBAAiB;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,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;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC1C;AA4FD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,GACb,EAAE,iBAAiB,2CAwInB"}

package/dist/MetricsPanel.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { panelEyebrowCss, panelPillButtonCss, panelSectionTitleCss } from './panelPrimitives.js';
 const Panel = styled.div `
   position: fixed;
   right: 0;
@@ -9,9 +10,9 @@ const Panel = styled.div `
   transform: translateY(-50%) ${(props) => (props.$visible ? 'translateX(0)' : 'translateX(100%)')};
   width: var(--ui-metrics-width);
   height: 70vh;
-  background: rgba(255, 255, 255, 0.96);
-  border-left: 1px solid var(--brand-panel-border);
-  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
+  background: var(--viewer-ui-color-surface);
+  border-left: 1px solid var(--viewer-ui-color-panel-border);
+  box-shadow: none;
   transition: transform 0.3s ease;
   z-index: 40;
   display: flex;
@@ -19,14 +20,12 @@ const Panel = styled.div `
 `;
 const Header = styled.div `
   padding: 16px 20px;
-  border-bottom: 1px solid var(--brand-panel-border);
+  border-bottom: 1px solid var(--viewer-ui-color-panel-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--brand-text-secondary);
+  ${panelEyebrowCss}
+  color: var(--viewer-ui-color-text-muted);
 `;
 const TabRow = styled.div `
   display: flex;
@@ -34,13 +33,10 @@ const TabRow = styled.div `
   padding: 12px 20px 0;
 `;
 const TabButton = styled.button `
-  border-radius: 999px;
-  padding: 6px 12px;
-  font-size: 11px;
-  text-transform: lowercase;
-  border: none;
-  background: ${(props) => (props.$active ? 'var(--brand-primary)' : 'rgba(15, 23, 42, 0.08)')};
-  color: ${(props) => (props.$active ? '#ffffff' : 'var(--brand-text-secondary)')};
+  ${panelPillButtonCss}
+  min-height: 30px;
+  padding: 0 12px;
+  font-size: 10px;
   cursor: pointer;
 `;
 const Body = styled.div `
@@ -57,21 +53,18 @@ const MetricGrid = styled.div `
   gap: 12px;
 `;
 const MetricCard = styled.div `
-  border-radius: 12px;
-  border: 1px solid var(--brand-panel-border);
+  border-radius: 8px;
+  border: 1px solid var(--viewer-ui-color-panel-border-subtle);
   padding: 8px 10px;
-  background: rgba(15, 23, 42, 0.04);
+  background: var(--viewer-ui-color-surface);
 `;
 const MetricLabel = styled.div `
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--brand-text-secondary);
+  ${panelEyebrowCss}
 `;
 const MetricValue = styled.div `
   font-size: 13px;
   font-weight: 600;
-  color: var(--brand-text-primary);
+  color: var(--viewer-ui-color-text-strong);
 `;
 const ToggleWrapper = styled.div `
   position: fixed;
@@ -83,13 +76,10 @@ const ToggleWrapper = styled.div `
 `;
 const Divider = styled.div `
   height: 1px;
-  background: var(--brand-panel-border);
+  background: var(--viewer-ui-color-panel-border-subtle);
 `;
 const SectionTitle = styled.div `
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--brand-text-secondary);
+  ${panelSectionTitleCss}
 `;
 export default function MetricsPanel({ isVisible, onToggle, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, moduleLabel, moduleSummary, renderInputs, }) {
     const [activeTab, setActiveTab] = useState('inputs');
@@ -103,5 +93,5 @@ export default function MetricsPanel({ isVisible, onToggle, distanceToFloor, dis
         { label: 'compass', value: `${compassAngle.toFixed(1)} deg` },
         { label: 'pitch', value: `${pitchAngle.toFixed(1)} deg` },
     ], [distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle]);
-    return (_jsxs(_Fragment, { children: [_jsx(ToggleWrapper, { "$visible": isVisible, children: _jsx("button", { type: "button", onClick: onToggle, className: "collapse-toggle collapse-toggle--edge-right", title: isVisible ? 'Hide metrics' : 'Show metrics', children: isVisible ? (_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" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }) }), _jsxs(Panel, { "$visible": isVisible, children: [_jsxs(Header, { children: [_jsx("span", { children: "analytics" }), _jsx("span", { children: "live" })] }), _jsxs(TabRow, { children: [_jsx(TabButton, { type: "button", "$active": activeTab === 'inputs', onClick: () => setActiveTab('inputs'), children: "inputs" }), _jsx(TabButton, { type: "button", "$active": activeTab === 'outputs', onClick: () => setActiveTab('outputs'), children: "outputs" })] }), _jsxs(Body, { children: [activeTab === 'inputs' ? (_jsxs(_Fragment, { children: [moduleLabel ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "module" }), _jsx("div", { style: { fontSize: '16px', fontWeight: 600, marginTop: 6 }, children: moduleLabel }), moduleSummary ? (_jsx("div", { style: { fontSize: '12px', color: 'var(--brand-text-secondary)', marginTop: 6 }, children: moduleSummary })) : null] })) : null, renderInputs ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "render inputs" }), _jsx("div", { style: { marginTop: 8, fontSize: '12px', color: 'var(--brand-text-secondary)' }, children: renderInputs.presetLabel ? `Preset: ${renderInputs.presetLabel}` : 'Preset: default' }), renderInputs.presetSummary ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: renderInputs.presetSummary })) : null, renderInputs.lightingRig ? (_jsxs("div", { style: { marginTop: 6, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: ["Lighting rig: ", renderInputs.lightingRig] })) : null, typeof renderInputs.toneMappingExposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: ["Exposure: ", renderInputs.toneMappingExposure.toFixed(2)] })) : null, renderInputs.sky ? (_jsxs("div", { style: { marginTop: 8 }, children: [_jsx(SectionTitle, { children: "sky & environment" }), _jsxs("div", { style: { marginTop: 6, fontSize: '12px', color: 'var(--brand-text-secondary)' }, children: [renderInputs.sky.label, renderInputs.sky.mode ? ` · ${renderInputs.sky.mode}` : ''] }), renderInputs.sky.description ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: renderInputs.sky.description })) : null, renderInputs.sky.src ? (_jsx("div", { style: { marginTop: 4, fontSize: '10px', color: 'var(--brand-text-secondary)' }, children: renderInputs.sky.src })) : null, typeof renderInputs.sky.exposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: ["Sky exposure: ", renderInputs.sky.exposure.toFixed(2)] })) : null] })) : null] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: "spatial metrics" }), _jsx(MetricGrid, { children: metrics.map((metric) => (_jsxs(MetricCard, { children: [_jsx(MetricLabel, { children: metric.label }), _jsx(MetricValue, { children: metric.value })] }, metric.label))) })] })), _jsx(Divider, {})] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ToggleWrapper, { "$visible": isVisible, children: _jsx("button", { type: "button", onClick: onToggle, className: "collapse-toggle collapse-toggle--edge-right", title: isVisible ? 'Hide metrics' : 'Show metrics', children: isVisible ? (_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" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }) }), _jsxs(Panel, { "$visible": isVisible, children: [_jsxs(Header, { children: [_jsx("span", { children: "analytics" }), _jsx("span", { children: "live" })] }), _jsxs(TabRow, { children: [_jsx(TabButton, { type: "button", "$active": activeTab === 'inputs', onClick: () => setActiveTab('inputs'), children: "inputs" }), _jsx(TabButton, { type: "button", "$active": activeTab === 'outputs', onClick: () => setActiveTab('outputs'), children: "outputs" })] }), _jsxs(Body, { children: [activeTab === 'inputs' ? (_jsxs(_Fragment, { children: [moduleLabel ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "module" }), _jsx("div", { style: { fontSize: '16px', fontWeight: 600, marginTop: 6 }, children: moduleLabel }), moduleSummary ? (_jsx("div", { style: { fontSize: '12px', color: 'var(--viewer-ui-color-text-muted)', marginTop: 6 }, children: moduleSummary })) : null] })) : null, renderInputs ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "render inputs" }), _jsx("div", { style: { marginTop: 8, fontSize: '12px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.presetLabel ? `Preset: ${renderInputs.presetLabel}` : 'Preset: default' }), renderInputs.presetSummary ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.presetSummary })) : null, renderInputs.lightingRig ? (_jsxs("div", { style: { marginTop: 6, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: ["Lighting rig: ", renderInputs.lightingRig] })) : null, typeof renderInputs.toneMappingExposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: ["Exposure: ", renderInputs.toneMappingExposure.toFixed(2)] })) : null, renderInputs.sky ? (_jsxs("div", { style: { marginTop: 8 }, children: [_jsx(SectionTitle, { children: "sky & environment" }), _jsxs("div", { style: { marginTop: 6, fontSize: '12px', color: 'var(--viewer-ui-color-text-muted)' }, children: [renderInputs.sky.label, renderInputs.sky.mode ? ` · ${renderInputs.sky.mode}` : ''] }), renderInputs.sky.description ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.sky.description })) : null, renderInputs.sky.src ? (_jsx("div", { style: { marginTop: 4, fontSize: '10px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.sky.src })) : null, typeof renderInputs.sky.exposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: ["Sky exposure: ", renderInputs.sky.exposure.toFixed(2)] })) : null] })) : null] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: "spatial metrics" }), _jsx(MetricGrid, { children: metrics.map((metric) => (_jsxs(MetricCard, { children: [_jsx(MetricLabel, { children: metric.label }), _jsx(MetricValue, { children: metric.value })] }, metric.label))) })] })), _jsx(Divider, {})] })] })] }));
 }

package/dist/MetricsPanelContent.d.ts

@@ -1,21 +1,42 @@
+type MetricsFeedKind = 'runtime' | 'viewer' | 'geometry' | 'render' | 'map';
+type ToolMetricDefinition = {
+    id: string;
+    label: string;
+    summary?: string;
+    source: {
+        kind: MetricsFeedKind;
+        path: string;
+    };
+    format?: 'text' | 'number' | 'count';
+    digits?: number;
+    prefix?: string;
+    suffix?: string;
+    emptyLabel?: string;
+};
+type ToolMetricGroupDefinition = {
+    id: string;
+    label: string;
+    summary?: string;
+    metrics: ToolMetricDefinition[];
+};
+type ToolMetricsDefinition = {
+    title?: string;
+    summary?: string;
+    groups: ToolMetricGroupDefinition[];
+};
+type ToolMetricsFeeds = Partial<Record<MetricsFeedKind, Record<string, unknown>>>;
 interface MetricsPanelContentProps {
-    cameraMetrics: {
-        position: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        heightAboveFloor: number;
-    } | null;
-    distanceToFloor: number;
-    distanceToCeiling: number;
-    distanceToNorth: number;
-    distanceToSouth: number;
-    distanceToEast: number;
-    distanceToWest: number;
-    compassAngle: number;
-    pitchAngle: number;
+    modeId: string;
+    modeLabel: string;
+    moduleLabel?: string | null;
+    moduleSummary?: string | null;
+    promptPackLabel?: string | null;
+    promptPackDescription?: string | null;
+    renderCount?: number;
+    imageSetCount?: number;
+    toolMetrics?: ToolMetricsDefinition | null;
+    feeds?: ToolMetricsFeeds | null;
 }
-export default function MetricsPanelContent({ cameraMetrics, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, }: MetricsPanelContentProps): import("react/jsx-runtime").JSX.Element;
+export default function MetricsPanelContent({ modeId, modeLabel, moduleLabel, moduleSummary, promptPackLabel, promptPackDescription, renderCount, imageSetCount, toolMetrics, feeds, }: MetricsPanelContentProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MetricsPanelContent.d.ts.map

package/dist/MetricsPanelContent.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE5E,KAAK,oBAAoB,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,oBAAoB,EAAE,CAAC;CACjC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,yBAAyB,EAAE,CAAC;CACrC,CAAC;AAEF,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AAElF,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAgED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,SAAS,EACT,WAAW,EACX,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,WAAe,EACf,aAAiB,EACjB,WAAW,EACX,KAAK,GACN,EAAE,wBAAwB,2CAwJ1B"}