@treasuryspatial/viewer-ui-kit 0.1.33 → 0.1.36

package/dist/ComposerRightRail.d.ts.map

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

package/dist/ComposerRightRail.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { RightPanel, RightPanelCollapseToggle, RightPanelShowToggle, } from './layout.js';
 export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title = 'image system', statusLabel = 'live', }) {
     const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0] ?? null;
-    return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: onToggle, "aria-label": "Hide right panel", title: "Hide right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "border-b viewer-ui-kit-border px-5 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-[11px] uppercase tracking-[0.14em] viewer-ui-kit-text-subtle", children: [_jsx("span", { children: title }), _jsx("span", { children: statusLabel })] }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `rounded-full px-3.5 py-2.5 text-[12px] font-neusa font-black lowercase tracking-[0.06em] whitespace-nowrap transition border ${active?.id === tab.id
+    const hasStatus = Boolean(statusLabel && statusLabel.trim().length > 0);
+    return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: onToggle, "aria-label": "Hide right panel", title: "Hide right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "border-b viewer-ui-kit-border px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px] uppercase tracking-[0.14em] viewer-ui-kit-text-subtle", children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `rounded-full px-3.5 py-2.5 text-[12px] font-neusa font-black lowercase tracking-[0.06em] whitespace-nowrap transition border ${active?.id === tab.id
                                         ? 'bg-[var(--viewer-ui-color-toggle)] text-[var(--viewer-ui-color-toggle-text)] border-[var(--viewer-ui-color-toggle)]'
                                         : 'bg-[var(--viewer-ui-color-tab-bg)] text-[var(--viewer-ui-color-text-muted)] border-[var(--viewer-ui-color-panel-border-subtle)] hover:bg-[var(--viewer-ui-color-button-secondary)] hover:text-[var(--viewer-ui-color-text-strong)]'}`, children: tab.label }, tab.id))) })] }), _jsx("div", { className: "viewer-ui-shell-right-body flex-1 overflow-y-auto px-5 py-5", children: active?.content ?? null })] })) : null, !isVisible ? (_jsx(RightPanelShowToggle, { type: "button", onClick: onToggle, "aria-label": "Show right panel", title: "Show right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12.707 14.707a1 1 0 010-1.414L9.414 10l3.293-3.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414 0z", clipRule: "evenodd" }) }) })) : null] }));
 }

package/dist/CustomModeSurface.d.ts

@@ -1,11 +1,17 @@
 import type { ReactNode } from 'react';
+import type { UiManifestImage, UiScaffoldShellMeta } from '@treasuryspatial/ui-manifest';
 type CustomModeSurfaceProps = {
     modeLabel: string;
     title: string;
     summary?: string;
     children: ReactNode;
     footer?: ReactNode;
+    badge?: string;
+    primaryLogo?: UiManifestImage;
+    secondaryLogo?: UiManifestImage;
+    meta?: UiScaffoldShellMeta[];
+    headerActions?: ReactNode;
 };
-export default function CustomModeSurface({ modeLabel, title, summary, children, footer, }: CustomModeSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export default function CustomModeSurface({ modeLabel, title, summary, children, footer, badge, primaryLogo, secondaryLogo, meta, headerActions, }: CustomModeSurfaceProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CustomModeSurface.d.ts.map

package/dist/CustomModeSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomModeSurface.d.ts","sourceRoot":"","sources":["../src/CustomModeSurface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AA2EF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,sBAAsB,2CAcxB"}
+{"version":3,"file":"CustomModeSurface.d.ts","sourceRoot":"","sources":["../src/CustomModeSurface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEzF,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,IAAI,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AA4HF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,aAAa,EACb,IAAI,EACJ,aAAa,GACd,EAAE,sBAAsB,2CAmCxB"}

package/dist/CustomModeSurface.js

@@ -13,9 +13,8 @@ const SurfaceRoot = styled.section `
   grid-template-rows: auto 1fr auto;
 `;
 const SurfaceHeader = styled.header `
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 18px;
   padding: 14px 18px 12px;
   border-bottom: 1px solid var(--viewer-ui-color-panel-border, #d8dee9);
@@ -27,6 +26,12 @@ const SurfaceMeta = styled.div `
   flex-direction: column;
   gap: 4px;
 `;
+const SurfaceHeaderAside = styled.div `
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 10px;
+`;
 const ModePill = styled.span `
   display: inline-flex;
   align-items: center;
@@ -41,6 +46,20 @@ const ModePill = styled.span `
   border: 1px solid rgba(15, 23, 42, 0.16);
   background: rgba(255, 255, 255, 0.9);
 `;
+const HeaderLogos = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const HeaderLogo = styled.img `
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.84);
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  padding: 4px;
+`;
 const SurfaceTitle = styled.h3 `
   margin: 0;
   font-size: 18px;
@@ -55,6 +74,29 @@ const SurfaceSummary = styled.p `
   text-transform: lowercase;
   letter-spacing: 0.03em;
 `;
+const SurfaceMetaRow = styled.dl `
+  margin: 2px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+`;
+const SurfaceMetaItem = styled.div `
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  font-size: 11px;
+  color: #475569;
+`;
+const SurfaceMetaLabel = styled.dt `
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #64748b;
+`;
+const SurfaceMetaValue = styled.dd `
+  margin: 0;
+  color: #0f172a;
+`;
 const SurfaceContent = styled.div `
   position: relative;
   min-height: 0;
@@ -66,6 +108,6 @@ const SurfaceFooter = styled.footer `
   color: #475569;
   background: rgba(255, 255, 255, 0.78);
 `;
-export default function CustomModeSurface({ modeLabel, title, summary, children, footer, }) {
-    return (_jsxs(SurfaceRoot, { children: [_jsx(SurfaceHeader, { children: _jsxs(SurfaceMeta, { children: [_jsx(ModePill, { children: modeLabel }), _jsx(SurfaceTitle, { children: title }), summary ? _jsx(SurfaceSummary, { children: summary }) : null] }) }), _jsx(SurfaceContent, { children: children }), footer ? _jsx(SurfaceFooter, { children: footer }) : null] }));
+export default function CustomModeSurface({ modeLabel, title, summary, children, footer, badge, primaryLogo, secondaryLogo, meta, headerActions, }) {
+    return (_jsxs(SurfaceRoot, { children: [_jsxs(SurfaceHeader, { children: [_jsxs(SurfaceMeta, { children: [_jsx(ModePill, { children: badge || modeLabel }), _jsx(SurfaceTitle, { children: title }), summary ? _jsx(SurfaceSummary, { children: summary }) : null, Array.isArray(meta) && meta.length > 0 ? (_jsx(SurfaceMetaRow, { children: meta.map((item, index) => (_jsxs(SurfaceMetaItem, { children: [_jsx(SurfaceMetaLabel, { children: item.label }), _jsx(SurfaceMetaValue, { children: item.value })] }, item.id || `${item.label}-${index}`))) })) : null] }), primaryLogo || secondaryLogo || headerActions ? (_jsxs(SurfaceHeaderAside, { children: [headerActions, primaryLogo || secondaryLogo ? (_jsxs(HeaderLogos, { children: [primaryLogo ? _jsx(HeaderLogo, { src: primaryLogo.src, alt: primaryLogo.alt }) : null, secondaryLogo ? _jsx(HeaderLogo, { src: secondaryLogo.src, alt: secondaryLogo.alt }) : null] })) : null] })) : null] }), _jsx(SurfaceContent, { children: children }), footer ? _jsx(SurfaceFooter, { children: footer }) : null] }));
 }

package/dist/LandingShell.d.ts

@@ -0,0 +1,11 @@
+import type { UiManifest } from '@treasuryspatial/ui-manifest';
+import type { SurfaceShellLandingContent } from '@treasuryspatial/surface-kit';
+export type LandingShellProps = {
+    manifest: UiManifest;
+    content: SurfaceShellLandingContent;
+    showPoweredBy?: boolean;
+    showLogout?: boolean;
+    className?: string;
+};
+export default function LandingShell({ manifest, content, showPoweredBy, showLogout, className, }: LandingShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LandingShell.d.ts.map

package/dist/LandingShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LandingShell.d.ts","sourceRoot":"","sources":["../src/LandingShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AA4P/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,0BAA0B,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAiB,EACjB,SAAS,GACV,EAAE,iBAAiB,2CA4DnB"}

package/dist/LandingShell.js

@@ -0,0 +1,231 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import ManifestTopBar from './ManifestTopBar.js';
+const Root = styled.main `
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 32%),
+    linear-gradient(180deg, color-mix(in srgb, var(--brand-background) 90%, white 10%), var(--brand-background));
+  color: var(--brand-text-primary);
+  overflow-x: hidden;
+`;
+const HeroShell = styled.section `
+  padding: calc(var(--ui-nav-height) + 48px) 24px 40px;
+
+  @media (min-width: 768px) {
+    padding: calc(var(--ui-nav-height) + 72px) 40px 56px;
+  }
+
+  @media (min-width: 1024px) {
+    padding: calc(var(--ui-nav-height) + 96px) 56px 72px;
+  }
+`;
+const HeroGrid = styled.div `
+  display: grid;
+  gap: 28px;
+  max-width: 1480px;
+  margin: 0 auto;
+
+  @media (min-width: 1024px) {
+    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 440px);
+    align-items: stretch;
+  }
+`;
+const HeroCopy = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 30px 28px;
+  border-radius: 28px;
+  background:
+    linear-gradient(145deg, color-mix(in srgb, var(--brand-panel) 94%, white 6%), color-mix(in srgb, var(--brand-background) 82%, var(--brand-panel) 18%));
+  border: 1px solid color-mix(in srgb, var(--brand-panel-border) 72%, transparent);
+  box-shadow: 0 24px 60px rgba(32, 33, 36, 0.08);
+
+  @media (min-width: 1024px) {
+    padding: 42px 40px;
+  }
+`;
+const Eyebrow = styled.div `
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--brand-accent);
+`;
+const HeroTitle = styled.h1 `
+  margin: 0;
+  font-family: var(--ui-font-family, system-ui);
+  font-size: clamp(42px, 8vw, 96px);
+  line-height: 0.98;
+  letter-spacing: -0.03em;
+  color: var(--brand-primary);
+`;
+const HeroSubtitle = styled.p `
+  margin: 0;
+  max-width: 26ch;
+  font-size: clamp(22px, 3.4vw, 40px);
+  line-height: 1.04;
+  color: color-mix(in srgb, var(--brand-primary) 86%, var(--brand-accent) 14%);
+`;
+const HeroDescription = styled.p `
+  margin: 0;
+  max-width: 64ch;
+  font-size: 16px;
+  line-height: 1.7;
+  color: var(--brand-text-secondary);
+
+  @media (min-width: 768px) {
+    font-size: 18px;
+  }
+`;
+const HeroActions = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 8px;
+`;
+const PrimaryLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0 18px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: transform 0.18s ease;
+  background: var(--brand-accent);
+  border: 1px solid var(--brand-accent);
+  color: #ffffff;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+`;
+const SecondaryAnchor = styled.a `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0 18px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: transform 0.18s ease;
+  background: transparent;
+  border: 1px solid var(--brand-panel-border);
+  color: var(--brand-text-primary);
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+`;
+const CardGrid = styled.aside `
+  display: grid;
+  gap: 14px;
+`;
+const Card = styled.div `
+  padding: 20px 18px;
+  border-radius: 22px;
+  background: color-mix(in srgb, var(--brand-panel) 90%, white 10%);
+  border: 1px solid color-mix(in srgb, var(--brand-panel-border) 74%, transparent);
+  box-shadow: 0 18px 46px rgba(32, 33, 36, 0.06);
+`;
+const CardLabel = styled.div `
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--brand-text-secondary);
+`;
+const CardValue = styled.div `
+  margin-top: 10px;
+  font-size: 24px;
+  line-height: 1.1;
+  font-weight: 700;
+`;
+const CardText = styled.p `
+  margin: 10px 0 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--brand-text-secondary);
+`;
+const Sections = styled.section `
+  max-width: 1480px;
+  margin: 0 auto;
+  padding: 0 24px 64px;
+  display: grid;
+  gap: 20px;
+
+  @media (min-width: 768px) {
+    padding: 0 40px 80px;
+  }
+
+  @media (min-width: 1024px) {
+    padding: 0 56px 96px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+`;
+const SectionCard = styled.article `
+  border-radius: 24px;
+  padding: 26px 24px;
+  background: color-mix(in srgb, var(--brand-panel) 92%, white 8%);
+  border: 1px solid color-mix(in srgb, var(--brand-panel-border) 72%, transparent);
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
+`;
+const SectionTitle = styled.h2 `
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.1;
+  color: var(--brand-primary);
+`;
+const SectionDescription = styled.p `
+  margin: 14px 0 0;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--brand-text-secondary);
+`;
+const SectionBody = styled.div `
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  font-size: 15px;
+  line-height: 1.75;
+  color: var(--brand-text-secondary);
+`;
+const BulletList = styled.ul `
+  margin: 16px 0 0;
+  padding-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: var(--brand-text-secondary);
+`;
+const Notice = styled.p `
+  max-width: 1480px;
+  margin: 0 auto;
+  padding: 0 24px 80px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--brand-text-secondary);
+
+  @media (min-width: 768px) {
+    padding: 0 40px 88px;
+  }
+
+  @media (min-width: 1024px) {
+    padding: 0 56px 104px;
+  }
+`;
+export default function LandingShell({ manifest, content, showPoweredBy = false, showLogout = true, className, }) {
+    return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(HeroShell, { children: _jsxs(HeroGrid, { children: [_jsxs(HeroCopy, { children: [_jsx(Eyebrow, { children: content.hero.eyebrow }), _jsx(HeroTitle, { children: content.hero.title }), _jsx(HeroSubtitle, { children: content.hero.subtitle }), _jsx(HeroDescription, { children: content.hero.description }), _jsxs(HeroActions, { children: [_jsx(PrimaryLink, { href: content.hero.primaryCta.href, children: content.hero.primaryCta.label }), content.hero.secondaryCta ? (_jsx(SecondaryAnchor, { href: content.hero.secondaryCta.href, target: "_blank", rel: "noreferrer", children: content.hero.secondaryCta.label })) : null] })] }), content.cards?.length ? (_jsx(CardGrid, { children: content.cards.map((card) => (_jsxs(Card, { children: [_jsx(CardLabel, { children: card.label }), _jsx(CardValue, { children: card.value }), _jsx(CardText, { children: card.text })] }, card.id))) })) : null] }) }), content.sections?.length ? (_jsx(Sections, { children: content.sections.map((section) => (_jsxs(SectionCard, { children: [_jsx(SectionTitle, { children: section.title }), section.description ? _jsx(SectionDescription, { children: section.description }) : null, section.paragraphs?.length ? (_jsx(SectionBody, { children: section.paragraphs.map((paragraph) => (_jsx("p", { children: paragraph }, paragraph))) })) : null, section.bullets?.length ? (_jsx(BulletList, { children: section.bullets.map((bullet) => (_jsx("li", { children: bullet }, bullet))) })) : null] }, section.id))) })) : null, content.notice ? _jsx(Notice, { children: content.notice }) : null] }));
+}

package/dist/LoginForm.d.ts

@@ -0,0 +1,16 @@
+import type { FormEvent } from 'react';
+export type LoginFormProps = {
+    email: string;
+    password: string;
+    onEmailChange: (value: string) => void;
+    onPasswordChange: (value: string) => void;
+    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    busy?: boolean;
+    status?: string | null;
+    emailLabel?: string;
+    passwordLabel?: string;
+    submitLabel?: string;
+    busyLabel?: string;
+};
+export default function LoginForm({ email, password, onEmailChange, onPasswordChange, onSubmit, busy, status, emailLabel, passwordLabel, submitLabel, busyLabel, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoginForm.d.ts.map

package/dist/LoginForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../src/LoginForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0EvC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,IAAY,EACZ,MAAa,EACb,UAAoB,EACpB,aAA0B,EAC1B,WAAqB,EACrB,SAAyB,GAC1B,EAAE,cAAc,2CAsChB"}

package/dist/LoginForm.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Form = styled.form `
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  max-width: 720px;
+`;
+const Row = styled.div `
+  display: flex;
+`;
+const LabelCell = styled.div `
+  background: var(--brand-secondary);
+  width: 296px;
+  padding: 16px;
+  color: white;
+  font-size: 16px;
+  font-weight: 400;
+`;
+const Input = styled.input `
+  outline: none;
+  flex: 1;
+  border: none;
+  background: color-mix(in srgb, var(--brand-panel) 88%, var(--brand-background) 12%);
+  padding: 16px;
+  font-size: 16px;
+  color: var(--brand-text-primary);
+`;
+const ButtonRow = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Button = styled.button `
+  outline: none;
+  border: none;
+  width: 296px;
+  box-sizing: border-box;
+  padding: 16px;
+  color: white;
+  font-size: 16px;
+  font-weight: 400;
+  transition: background-color 0.2s ease;
+  background: var(--brand-primary);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--brand-primary) 85%, #0f172a 15%);
+  }
+
+  &:disabled {
+    background: var(--brand-panel-border);
+    color: color-mix(in srgb, var(--brand-text-primary) 45%, white 55%);
+    cursor: not-allowed;
+  }
+`;
+const Spacer = styled.div `
+  flex: 1;
+`;
+const Notice = styled.p `
+  color: var(--brand-text-secondary);
+  font-size: 14px;
+  margin-top: 20px;
+  max-width: 720px;
+`;
+export default function LoginForm({ email, password, onEmailChange, onPasswordChange, onSubmit, busy = false, status = null, emailLabel = 'Email', passwordLabel = 'Password', submitLabel = 'Login', busyLabel = 'Logging in…', }) {
+    return (_jsxs(Form, { onSubmit: onSubmit, autoComplete: "off", children: [_jsxs(Row, { children: [_jsx(LabelCell, { children: emailLabel }), _jsx(Input, { "aria-label": emailLabel, name: "email", placeholder: emailLabel, value: email, onChange: (event) => onEmailChange(event.target.value), autoComplete: "email", "data-lpignore": "true" })] }), _jsxs(Row, { style: { marginTop: '1px' }, children: [_jsx(LabelCell, { children: passwordLabel }), _jsx(Input, { type: "password", "aria-label": passwordLabel, name: "password", placeholder: passwordLabel, required: true, value: password, onChange: (event) => onPasswordChange(event.target.value), autoComplete: "new-password", "data-lpignore": "true" })] }), _jsxs(ButtonRow, { style: { marginTop: '1px' }, children: [_jsx(Button, { type: "submit", "aria-label": submitLabel, disabled: busy || password.trim() === '', children: busy ? busyLabel : submitLabel }), _jsx(Spacer, {})] }), status ? _jsx(Notice, { style: { color: '#9f1d1d' }, children: status }) : null] }));
+}

package/dist/LoginShell.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { UiManifest } from '@treasuryspatial/ui-manifest';
+import type { SurfaceShellLoginContent } from '@treasuryspatial/surface-kit';
+export type LoginShellProps = {
+    manifest: UiManifest;
+    content?: SurfaceShellLoginContent | null;
+    children: ReactNode;
+    showLogout?: boolean;
+    showPoweredBy?: boolean;
+    className?: string;
+};
+export default function LoginShell({ manifest, content, children, showLogout, showPoweredBy, className, }: LoginShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoginShell.d.ts.map

package/dist/LoginShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginShell.d.ts","sourceRoot":"","sources":["../src/LoginShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAyH7E,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,aAAqB,EACrB,SAAS,GACV,EAAE,eAAe,2CAsCjB"}

package/dist/LoginShell.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import ManifestTopBar from './ManifestTopBar.js';
+const Root = styled.main `
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 36%),
+    linear-gradient(180deg, color-mix(in srgb, var(--brand-background) 94%, white 6%), var(--brand-background));
+  color: var(--brand-text-primary);
+`;
+const Shell = styled.section `
+  min-height: 100vh;
+  padding: calc(var(--ui-nav-height) + 48px) 24px 40px;
+
+  @media (min-width: 768px) {
+    padding: calc(var(--ui-nav-height) + 64px) 40px 56px;
+  }
+
+  @media (min-width: 1024px) {
+    padding: calc(var(--ui-nav-height) + 72px) 56px 72px;
+  }
+`;
+const Grid = styled.div `
+  display: grid;
+  gap: 28px;
+  max-width: 1280px;
+  margin: 0 auto;
+
+  @media (min-width: 1024px) {
+    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 520px);
+    align-items: start;
+  }
+`;
+const Intro = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+`;
+const Eyebrow = styled.div `
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--brand-accent);
+`;
+const Title = styled.h1 `
+  margin: 0;
+  font-family: var(--ui-font-family, system-ui);
+  font-size: clamp(44px, 5.5vw, 82px);
+  line-height: 0.96;
+  letter-spacing: -0.03em;
+  color: var(--brand-primary);
+`;
+const Subtitle = styled.p `
+  margin: 0;
+  max-width: 28ch;
+  font-size: clamp(20px, 2.8vw, 34px);
+  line-height: 1.06;
+  color: color-mix(in srgb, var(--brand-primary) 86%, var(--brand-accent) 14%);
+`;
+const Description = styled.p `
+  margin: 0;
+  max-width: 64ch;
+  font-size: 16px;
+  line-height: 1.7;
+  color: var(--brand-text-secondary);
+`;
+const SupportLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--brand-primary);
+
+  &:hover {
+    color: var(--brand-text-primary);
+  }
+`;
+const Panel = styled.div `
+  border-radius: 28px;
+  background: color-mix(in srgb, var(--brand-panel) 94%, white 6%);
+  border: 1px solid color-mix(in srgb, var(--brand-panel-border) 76%, transparent);
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+  padding: 26px 22px;
+
+  @media (min-width: 768px) {
+    padding: 32px 28px;
+  }
+`;
+const Meta = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 20px;
+`;
+const MetaText = styled.p `
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--brand-text-secondary);
+`;
+export default function LoginShell({ manifest, content, children, showLogout = false, showPoweredBy = false, className, }) {
+    const title = content?.title?.trim() ||
+        manifest.surface?.label ||
+        `${manifest.topbar.title} ${manifest.topbar.productLabel}`.trim();
+    return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Shell, { children: _jsxs(Grid, { children: [_jsxs(Intro, { children: [content?.eyebrow ? _jsx(Eyebrow, { children: content.eyebrow }) : null, _jsx(Title, { children: title }), _jsx(Subtitle, { children: content?.subtitle ?? `${manifest.topbar.title} ${manifest.topbar.productLabel}`.trim() }), content?.description ? _jsx(Description, { children: content.description }) : null, content?.supportLink ? (_jsx(SupportLink, { href: content.supportLink.href, target: "_blank", rel: "noreferrer", children: content.supportLink.label })) : null, (content?.notice || content?.legal) ? (_jsxs(Meta, { children: [content.notice ? _jsx(MetaText, { children: content.notice }) : null, content.legal ? _jsx(MetaText, { children: content.legal }) : null] })) : null] }), _jsx(Panel, { children: children })] }) })] }));
+}

package/dist/ManifestTopBar.d.ts

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

package/dist/ManifestTopBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManifestTopBar.d.ts","sourceRoot":"","sources":["../src/ManifestTopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAM/D,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA0MF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAkB,EAClB,aAAoB,EACpB,UAAkB,EAClB,eAAuB,EACvB,YAAoB,EACpB,iBAA2C,EAC3C,cAAmC,EACnC,UAAqB,GACtB,EAAE,mBAAmB,2CA2HrB;AAED,YAAY,EAAE,mBAAmB,EAAE,CAAC"}