@treasuryspatial/viewer-ui-kit 0.1.33 → 0.1.35

package/dist/ManifestTopBar.js

@@ -0,0 +1,198 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useShellPanelToggle } from '@treasuryspatial/viewer-react';
+import styled from 'styled-components';
+import TopBar from './TopBar.js';
+const Brand = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${(props) => (props.$variant === 'landing' ? '12px' : '8px')};
+`;
+const BrandCopy = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 2px;
+`;
+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')};
+  object-fit: contain;
+`;
+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')};
+  }
+`;
+const BrandTenant = styled.span `
+  font-weight: 400;
+  color: var(--brand-primary);
+  white-space: nowrap;
+`;
+const BrandProduct = styled.span `
+  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 `
+  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;
+`;
+const LinkItem = styled.a `
+  color: var(--brand-text-secondary);
+  text-decoration: none;
+  font-weight: 400;
+
+  &:hover {
+    color: var(--brand-text-primary);
+  }
+`;
+const LogoutButton = styled.button `
+  border: none;
+  background: transparent;
+  color: var(--brand-text-secondary);
+  font-weight: 400;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    color: var(--brand-text-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;
+  }
+
+  @media (min-width: 1024px) {
+    display: flex;
+  }
+`;
+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;
+  color: var(--brand-text-primary);
+  line-height: 1.2;
+`;
+const PoweredByAccent = styled.span `
+  font-weight: 600;
+  color: var(--brand-text-primary);
+`;
+const PanelToggleCluster = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const PanelToggleText = styled.button `
+  border: none;
+  background: transparent;
+  color: var(--brand-text-secondary);
+  font-weight: 400;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    color: var(--brand-text-primary);
+  }
+`;
+const 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 clearCookie = (name) => {
+    document.cookie = `${name}=; max-age=0; path=/; samesite=strict`;
+};
+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 });
+}

package/dist/index.d.ts

@@ -19,6 +19,12 @@ export type { PromptPackChooserMode, PromptPackChooserCatalogEntry } from './Pro
 export { default as KitPill } from './KitPill.js';
 export { default as TopBar } from './TopBar.js';
 export type { TopBarProps } from './TopBar.js';
+export { default as ManifestTopBar } from './ManifestTopBar.js';
+export type { ManifestTopBarProps } from './ManifestTopBar.js';
+export { default as LoginShell } from './LoginShell.js';
+export type { LoginShellProps } from './LoginShell.js';
+export { default as LandingShell } from './LandingShell.js';
+export type { LandingShellProps } from './LandingShell.js';
 export { default as CustomModeSurface } from './CustomModeSurface.js';
 export { default as ModeBar, MODE_BAR_HEIGHT_PX } from './ModeBar.js';
 export type { ModeBarProps, ModeTab } from './ModeBar.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,YAAY,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACtE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAChF,YAAY,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACtE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -12,5 +12,8 @@ export { default as ModuleSelectorPanel } from './ModuleSelectorPanel.js';
 export { default as PromptPackChooserPanel } from './PromptPackChooserPanel.js';
 export { default as KitPill } from './KitPill.js';
 export { default as TopBar } from './TopBar.js';
+export { default as ManifestTopBar } from './ManifestTopBar.js';
+export { default as LoginShell } from './LoginShell.js';
+export { default as LandingShell } from './LandingShell.js';
 export { default as CustomModeSurface } from './CustomModeSurface.js';
 export { default as ModeBar, MODE_BAR_HEIGHT_PX } from './ModeBar.js';