@treasuryspatial/viewer-ui-kit 0.1.36 → 0.1.38

package/dist/ManifestTopBar.js

@@ -1,198 +1,220 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useShellPanelToggle } from '@treasuryspatial/viewer-react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { buildLoginHref, useClientHydrated, useComposerAuthState, useSessionLogout, useSurfaceComposerData, } from '@treasuryspatial/viewer-react';
 import styled from 'styled-components';
 import TopBar from './TopBar.js';
-const Brand = styled.div `
+const BrandLink = styled(Link) `
   display: flex;
   align-items: center;
-  gap: ${(props) => (props.$variant === 'landing' ? '12px' : '8px')};
-`;
-const BrandCopy = styled.div `
-  display: flex;
-  flex-direction: column;
+  gap: 14px;
+  text-decoration: none;
+  color: inherit;
   min-width: 0;
-  gap: 2px;
+
+  &:hover {
+    opacity: 0.75;
+  }
 `;
 const BrandLogo = styled.img `
-  width: ${(props) => (props.$variant === 'landing' ? 'clamp(32px, 3.5vw + 12px, 64px)' : '32px')};
-  height: ${(props) => (props.$variant === 'landing' ? 'clamp(32px, 3.5vw + 12px, 64px)' : '32px')};
+  width: ${(props) => (props.$variant === 'landing' ? 'clamp(32px, 4vw + 8px, 64px)' : '32px')};
+  height: ${(props) => (props.$variant === 'landing' ? 'clamp(32px, 4vw + 8px, 64px)' : '32px')};
   object-fit: contain;
+  flex-shrink: 0;
 `;
 const BrandTitle = styled.div `
   display: flex;
   align-items: baseline;
-  flex-wrap: wrap;
   gap: ${(props) => (props.$variant === 'landing' ? '8px' : '6px')};
-  font-size: ${(props) => (props.$variant === 'landing' ? '18px' : '18px')};
-  font-weight: 400;
-
-  @media (min-width: 640px) {
-    font-size: ${(props) => (props.$variant === 'landing' ? '20px' : '18px')};
-  }
-
-  @media (min-width: 768px) {
-    font-size: ${(props) => (props.$variant === 'landing' ? '24px' : '20px')};
-  }
-
-  @media (min-width: 1024px) {
-    font-size: ${(props) => (props.$variant === 'landing' ? '30px' : '22px')};
-  }
-
-  @media (min-width: 1280px) {
-    font-size: ${(props) => (props.$variant === 'landing' ? '36px' : '24px')};
-  }
-
-  @media (min-width: 1536px) {
-    font-size: ${(props) => (props.$variant === 'landing' ? '48px' : '28px')};
-  }
+  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;
 `;
 const BrandTenant = styled.span `
+  color: var(--brand-text-primary);
   font-weight: 400;
-  color: var(--brand-primary);
-  white-space: nowrap;
 `;
-const BrandProduct = styled.span `
+const BrandSurface = styled.span `
+  color: var(--brand-primary);
   font-weight: 400;
-  color: var(--brand-text-primary);
-  white-space: nowrap;
 `;
-const BrandSubtitle = styled.div `
-  font-size: 11px;
-  color: var(--brand-text-secondary);
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const BrandPartnerLogos = styled.div `
+const Actions = styled.div `
   display: flex;
   align-items: center;
-  gap: 8px;
-`;
-const PartnerLogo = styled.img `
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-`;
-const Links = styled.nav `
-  display: flex;
-  gap: 18px;
-  align-items: center;
-  font-size: 13px;
+  gap: ${(props) => (props.$variant === 'landing' ? '22px' : '16px')};
+  font-size: ${(props) => (props.$variant === 'landing' ? '14px' : '13px')};
+  min-width: 0;
 `;
-const LinkItem = styled.a `
-  color: var(--brand-text-secondary);
+const NavLink = styled(Link) `
+  color: ${(props) => (props.$active ? 'var(--brand-primary)' : 'var(--brand-text-primary)')};
   text-decoration: none;
   font-weight: 400;
+  white-space: nowrap;
 
   &:hover {
-    color: var(--brand-text-primary);
+    color: var(--brand-primary);
   }
 `;
-const LogoutButton = styled.button `
+const AuthButton = styled.button `
   border: none;
   background: transparent;
-  color: var(--brand-text-secondary);
+  color: var(--brand-text-primary);
   font-weight: 400;
-  font-size: 13px;
+  font-size: inherit;
   cursor: pointer;
   padding: 0;
+  white-space: nowrap;
 
   &:hover {
-    color: var(--brand-text-primary);
+    color: var(--brand-primary);
   }
-`;
-const PoweredBy = styled.a `
-  display: none;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  border-radius: 999px;
-  border: 1px solid var(--brand-panel-border);
-  background: color-mix(in srgb, var(--brand-panel) 90%, transparent);
-  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
-  opacity: 0.6;
-  transition: opacity 0.2s ease;
-  color: inherit;
-  text-decoration: none;
 
-  &:hover {
-    opacity: 1;
+  .auth-hover {
+    display: none;
   }
 
-  @media (min-width: 1024px) {
-    display: flex;
+  &:hover .auth-default {
+    display: none;
+  }
+
+  &:hover .auth-hover {
+    display: inline;
   }
 `;
-const PoweredByLogo = styled.img `
-  width: 16px;
-  height: 16px;
-  object-fit: contain;
-`;
-const PoweredByLabel = styled.div `
-  font-size: 9px;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--brand-text-secondary);
-  line-height: 1;
-`;
-const PoweredByTitle = styled.div `
-  font-size: 11px;
+const AuthLink = styled(Link) `
   color: var(--brand-text-primary);
-  line-height: 1.2;
+  text-decoration: none;
+  font-weight: 400;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--brand-primary);
+  }
 `;
-const PoweredByAccent = styled.span `
-  font-weight: 600;
-  color: var(--brand-text-primary);
+const SearchWrap = styled.div `
+  display: flex;
+  align-items: center;
 `;
-const PanelToggleCluster = styled.div `
+const SearchControl = styled.div `
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  width: ${(props) => (props.$expanded ? '220px' : '35px')};
+  height: 35px;
+  border: 3px solid ${(props) => (props.$expanded ? 'var(--brand-text-secondary)' : 'var(--brand-text-primary)')};
+  border-radius: ${(props) => (props.$expanded ? '18px' : '999px')};
+  background: var(--brand-background);
   display: flex;
   align-items: center;
-  gap: 10px;
+  position: relative;
+  overflow: hidden;
 `;
-const PanelToggleText = styled.button `
+const SearchInput = styled.input `
+  flex: 1;
+  min-width: 0;
+  padding: 0 14px;
   border: none;
+  outline: none;
   background: transparent;
-  color: var(--brand-text-secondary);
-  font-weight: 400;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  cursor: pointer;
-  padding: 0;
+  color: var(--brand-text-primary);
+  font-family: var(--ui-font-family, system-ui);
+  font-size: 13px;
 
-  &:hover {
-    color: var(--brand-text-primary);
+  &::placeholder {
+    color: var(--brand-text-secondary);
   }
 `;
-const resolvePoweredByConfig = (manifest) => {
-    const poweredBy = manifest.branding?.poweredBy;
-    return {
-        enabled: poweredBy?.enabled ??
-            (manifest.branding?.profile ? manifest.branding.profile !== 'treasury-native' : true),
-        href: poweredBy?.href ?? 'https://treasury.space',
-        logo: poweredBy?.logo ?? null,
-        kicker: poweredBy?.kicker ?? 'Powered by',
-        labelPrefix: poweredBy?.labelPrefix ?? 'Treasury',
-        labelAccent: poweredBy?.labelAccent ?? manifest.topbar.productLabel ?? 'Composer',
-    };
+const SearchReset = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: 4px;
+  border: none;
+  background: transparent;
+  color: var(--brand-text-secondary);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+`;
+const formatDisplayName = (value) => {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return 'user';
+    return trimmed.split('@')[0];
 };
-const clearCookie = (name) => {
-    document.cookie = `${name}=; max-age=0; path=/; samesite=strict`;
+const isRouteActive = (pathname, href) => {
+    const routePath = href.split('?')[0] || href;
+    if (routePath === '/')
+        return pathname === '/';
+    return pathname === routePath || pathname.startsWith(`${routePath}/`);
 };
-export default function ManifestTopBar({ manifest, variant = 'canvas', showPoweredBy = true, showLogout = false, showPanelToggle = false, showSubtitle = false, logoutCookieNames = ['treasury_auth_token'], logoutEndpoint = '/api/auth/logout', logoutHref = '/login', }) {
-    const { collapsed, toggle } = useShellPanelToggle();
-    const poweredBy = resolvePoweredByConfig(manifest);
-    const brandLogo = manifest.topbar.logo ?? null;
-    const brand = (_jsxs(Brand, { "$variant": variant, children: [brandLogo ? (_jsx(BrandLogo, { "$variant": variant, src: brandLogo.src, alt: brandLogo.alt })) : null, _jsxs(BrandCopy, { children: [_jsxs(BrandTitle, { "$variant": variant, children: [_jsx(BrandTenant, { children: manifest.topbar.title }), manifest.topbar.productLabel ? (_jsx(BrandProduct, { children: manifest.topbar.productLabel })) : null] }), showSubtitle && manifest.topbar.subtitle ? (_jsx(BrandSubtitle, { children: manifest.topbar.subtitle })) : null] }), manifest.topbar.subtenantLogo || manifest.topbar.secondaryLogo ? (_jsxs(BrandPartnerLogos, { children: [manifest.topbar.subtenantLogo ? (_jsx(PartnerLogo, { src: manifest.topbar.subtenantLogo.src, alt: manifest.topbar.subtenantLogo.alt })) : null, manifest.topbar.secondaryLogo ? (_jsx(PartnerLogo, { src: manifest.topbar.secondaryLogo.src, alt: manifest.topbar.secondaryLogo.alt })) : null] })) : null] }));
-    const center = showPoweredBy && poweredBy.enabled ? (_jsxs(PoweredBy, { href: poweredBy.href, target: "_blank", rel: "noreferrer", children: [poweredBy.logo ? (_jsx(PoweredByLogo, { src: poweredBy.logo.src, alt: poweredBy.logo.alt })) : null, _jsxs("div", { children: [_jsx(PoweredByLabel, { children: poweredBy.kicker }), _jsxs(PoweredByTitle, { children: [poweredBy.labelPrefix, " ", _jsx(PoweredByAccent, { children: poweredBy.labelAccent })] })] })] })) : null;
-    const actions = (_jsxs(Links, { children: [showPanelToggle ? (_jsxs(PanelToggleCluster, { children: [_jsx("button", { "aria-label": collapsed ? 'Show navigation' : 'Hide navigation', className: "collapse-toggle collapse-toggle--edge-top", onClick: toggle, type: "button", children: collapsed ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.25 8.27a.75.75 0 01-.02-1.06z", clipRule: "evenodd" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.23 12.79a.75.75 0 001.06-.02L10 9.06l3.71 3.71a.75.75 0 001.06-1.06L10.53 7.47a.75.75 0 00-1.06 0L4.23 11.75a.75.75 0 001 1.04z", clipRule: "evenodd" }) })) }), _jsx(PanelToggleText, { type: "button", onClick: toggle, "aria-label": collapsed ? 'Show panels' : 'Toggle panels', children: collapsed ? 'show panels' : 'toggle panels' })] })) : null, manifest.topbar.links.map((link) => (_jsx(LinkItem, { href: link.href, target: link.target ?? '_self', rel: link.target === '_blank' ? 'noreferrer' : undefined, children: link.label }, link.label))), showLogout ? (_jsx(LogoutButton, { type: "button", onClick: () => {
-                    fetch(logoutEndpoint, { method: 'POST' }).catch(() => {
-                        // ignore logout sync failures
-                    });
-                    logoutCookieNames.forEach(clearCookie);
-                    window.location.href = logoutHref;
-                }, children: "logout" })) : null] }));
-    return _jsx(TopBar, { hidden: collapsed, brand: brand, center: center, actions: actions });
+export default function ManifestTopBar({ manifest, variant = 'canvas', showPoweredBy = false, showLogout = false, showPanelToggle = false, showSubtitle = false, logoutCookieNames, logoutEndpoint = '/api/auth/logout', logoutHref = '/login', }) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const hydrated = useClientHydrated();
+    const composerData = useSurfaceComposerData();
+    const { auth } = useComposerAuthState();
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const searchRef = useRef(null);
+    const inputRef = useRef(null);
+    const navigation = composerData.navigation;
+    const introHref = navigation?.introHref || '/';
+    const composeHref = navigation?.composeHref || composerData.routePolicy?.homeRoute || '/compose';
+    const surfaceTitle = navigation?.surfaceTitle ||
+        composerData.title ||
+        manifest.surface?.label ||
+        manifest.topbar.productLabel ||
+        'Composer';
+    const searchEnabled = navigation?.searchEnabled ?? true;
+    const brandLogo = manifest.topbar.logo;
+    const loginHref = hydrated
+        ? buildLoginHref({
+            pathname,
+            search: searchParams?.toString() ?? '',
+        })
+        : logoutHref;
+    const handleLogout = useSessionLogout({
+        logoutRoute: logoutEndpoint,
+        redirectPath: logoutHref,
+        onRedirect: (path) => router.push(path),
+    });
+    useEffect(() => {
+        if (!searchOpen)
+            return undefined;
+        const handleClickOutside = (event) => {
+            if (searchRef.current && !searchRef.current.contains(event.target)) {
+                setSearchOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [searchOpen]);
+    useEffect(() => {
+        if (searchOpen) {
+            inputRef.current?.focus();
+        }
+    }, [searchOpen]);
+    const authControl = useMemo(() => {
+        if (!showLogout)
+            return null;
+        if (hydrated && auth.isAuthenticated) {
+            return (_jsxs(AuthButton, { type: "button", onClick: handleLogout, children: [_jsx("span", { className: "auth-default", children: formatDisplayName(auth.name || auth.user) }), _jsx("span", { className: "auth-hover", children: "logout" })] }));
+        }
+        if (pathname === logoutHref)
+            return null;
+        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) => {
+                                    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 }));
 }

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;AAsDvC,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;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"}

package/dist/TopBar.js

@@ -7,7 +7,7 @@ const Root = styled.nav `
   left: 0;
   right: 0;
   z-index: 50;
-  height: ${(props) => (props.$compact ? '50px' : '84px')};
+  height: ${(props) => (props.$compact ? '50px' : '72px')};
   background: var(--viewer-ui-color-bg-base, var(--brand-panel, #f6f3eb));
   border-bottom: 1px solid var(--viewer-ui-color-panel-border, var(--brand-panel-border, rgba(47, 74, 60, 0.35)));
   color: var(--viewer-ui-color-text-strong, var(--brand-text-primary, #1f2937));
@@ -17,7 +17,7 @@ const Root = styled.nav `
 const Inner = styled.div `
   height: 100%;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 16px;
   padding: 0 16px;
@@ -36,10 +36,6 @@ const CenterSlot = styled.div `
   justify-content: center;
   align-items: center;
   min-width: 0;
-
-  @media (min-width: 1024px) {
-    display: flex;
-  }
 `;
 const ActionsSlot = styled.div `
   min-width: 0;