@treasuryspatial/viewer-ui-kit 0.1.41 → 0.1.56

package/dist/LoginShell.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import ManifestTopBar from './ManifestTopBar.js';
 const Root = styled.main `
@@ -8,14 +8,14 @@ const Root = styled.main `
   color: var(--brand-text-primary);
 `;
 const Shell = styled.section `
-  min-height: 100vh;
+  min-height: calc(100vh - var(--ui-nav-height));
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--ui-nav-height) + 40px) 24px 40px;
+  padding: calc(var(--ui-nav-height) + 16px) 32px 32px;
 
   @media (min-width: 768px) {
-    padding: calc(var(--ui-nav-height) + 48px) 40px 48px;
+    padding: calc(var(--ui-nav-height) + 24px) 32px 32px;
   }
 `;
 const Inner = styled.div `
@@ -28,24 +28,44 @@ const Header = styled.header `
 const Title = styled.h1 `
   margin: 0;
   font-family: var(--ui-font-family, system-ui);
-  font-size: clamp(44px, 7vw, 72px);
-  line-height: 0.96;
-  letter-spacing: -0.03em;
+  font-size: clamp(54px, 7vw, 72px);
+  line-height: 1;
+  letter-spacing: -0.02em;
   font-weight: 400;
   color: var(--brand-text-primary);
 `;
+const TitleAccent = styled.span `
+  color: var(--brand-primary);
+`;
 const Strap = styled.p `
   margin: 16px 0 0;
-  max-width: 42ch;
+  max-width: 672px;
   font-size: 18px;
-  line-height: 1.45;
+  line-height: 1.6;
   color: var(--brand-text-secondary);
 `;
+function renderTitle(title, accentLabel) {
+    const normalizedTitle = title.trim();
+    const accent = accentLabel?.trim();
+    if (!normalizedTitle || !accent)
+        return normalizedTitle;
+    const titleLower = normalizedTitle.toLowerCase();
+    const accentLower = accent.toLowerCase();
+    if (titleLower === accentLower || !titleLower.endsWith(accentLower)) {
+        return normalizedTitle;
+    }
+    const accentStart = normalizedTitle.length - accent.length;
+    const prefix = normalizedTitle.slice(0, accentStart).trimEnd();
+    if (!prefix)
+        return normalizedTitle;
+    const separator = normalizedTitle.slice(prefix.length, accentStart) || ' ';
+    return (_jsxs(_Fragment, { children: [prefix, separator, _jsx(TitleAccent, { children: normalizedTitle.slice(accentStart) })] }));
+}
 const Body = styled.p `
-  margin: 18px 0 0;
-  max-width: 52ch;
-  font-size: 15px;
-  line-height: 1.75;
+  margin: 20px 0 0;
+  max-width: 720px;
+  font-size: 16px;
+  line-height: 1.7;
   color: var(--brand-text-secondary);
 `;
 const Disclaimer = styled.p `
@@ -55,7 +75,10 @@ const Disclaimer = styled.p `
   line-height: 1.7;
   color: var(--brand-text-secondary);
 `;
-export default function LoginShell({ manifest, content, children, showLogout = false, showPoweredBy = false, className, }) {
+export default function LoginShell({ manifest, content, subtitle, children, showLogout = false, showPoweredBy = false, className, }) {
     const fallbackHeading = `${manifest.topbar.title} ${manifest.surface?.label || manifest.topbar.productLabel}`.trim();
-    return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Shell, { children: _jsxs(Inner, { children: [_jsxs(Header, { children: [_jsx(Title, { children: content?.heading || fallbackHeading }), content?.strap ? _jsx(Strap, { children: content.strap }) : null, content?.body ? _jsx(Body, { children: content.body }) : null] }), children, content?.disclaimer ? _jsx(Disclaimer, { children: content.disclaimer }) : null] }) })] }));
+    const heading = content?.heading || fallbackHeading;
+    const displaySubtitle = subtitle || content?.strap;
+    const accentLabel = manifest.topbar.productLabel || null;
+    return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", topbarContext: "login", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Shell, { children: _jsxs(Inner, { children: [_jsxs(Header, { children: [_jsx(Title, { children: renderTitle(heading, accentLabel) }), displaySubtitle ? _jsx(Strap, { children: displaySubtitle }) : null, content?.body ? _jsx(Body, { children: content.body }) : null] }), children, content?.disclaimer ? _jsx(Disclaimer, { children: content.disclaimer }) : null] }) })] }));
 }

package/dist/ManifestTopBar.d.ts

@@ -1,13 +1,19 @@
+import { type ReactNode } from 'react';
 import type { UiManifest } from '@treasuryspatial/ui-manifest';
+export type ManifestTopBarContext = 'landing' | 'login' | 'composer' | 'admin';
 export type ManifestTopBarProps = {
     manifest: UiManifest;
     variant?: 'landing' | 'canvas';
+    topbarContext?: ManifestTopBarContext;
     showPoweredBy?: boolean;
     showLogout?: boolean;
     showSubtitle?: boolean;
+    hidden?: boolean;
+    center?: ReactNode;
+    bottomOverlay?: ReactNode;
     logoutCookieNames?: string[];
     logoutEndpoint?: string;
     logoutHref?: string;
 };
-export default function ManifestTopBar({ manifest, variant, showPoweredBy, showLogout, showSubtitle, logoutCookieNames, logoutEndpoint, logoutHref, }: ManifestTopBarProps): import("react/jsx-runtime").JSX.Element;
+export default function ManifestTopBar({ manifest, variant, topbarContext, showPoweredBy, showLogout, showSubtitle, hidden, center, bottomOverlay, 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,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"}
+{"version":3,"file":"ManifestTopBar.d.ts","sourceRoot":"","sources":["../src/ManifestTopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAuB/D,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/E,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA6UF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAkB,EAClB,aAAa,EACb,aAAqB,EACrB,UAAkB,EAClB,YAAoB,EACpB,MAAc,EACd,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,cAAmC,EACnC,UAAqB,GACtB,EAAE,mBAAmB,2CAiPrB"}

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"}