@treasuryspatial/viewer-ui-kit 0.1.41 → 0.1.56

package/dist/AdminLayout.js

@@ -14,7 +14,7 @@ export const AdminSection = styled.section `
 `;
 export const AdminSectionTitle = styled.div `
   font-size: 11px;
-  text-transform: uppercase;
+  text-transform: var(--viewer-ui-eyebrow-text-case, lowercase);
   letter-spacing: 0.2em;
   color: var(--viewer-ui-color-text-subtle, rgba(148, 163, 184, 0.8));
   margin-bottom: 16px;

package/dist/AdminShell.d.ts

@@ -5,10 +5,15 @@ export type AdminTab = {
     href: string;
 };
 type AdminShellProps = {
+    title?: string;
+    tabs?: AdminTab[];
+    activeTab?: string;
+    onSelectTab?: (id: string) => void;
     nav?: ReactNode;
+    actions?: ReactNode;
     modeBar?: ReactNode;
     children: ReactNode;
 };
-export default function AdminShell({ nav, modeBar, children }: AdminShellProps): import("react/jsx-runtime").JSX.Element;
+export default function AdminShell({ title, tabs, activeTab, onSelectTab, nav, actions, modeBar, children, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AdminShell.d.ts.map

package/dist/AdminShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminShell.d.ts","sourceRoot":"","sources":["../src/AdminShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,KAAK,eAAe,GAAG;IACrB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAQ7E"}
+{"version":3,"file":"AdminShell.d.ts","sourceRoot":"","sources":["../src/AdminShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AA+CF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAwB,EACxB,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,EACH,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,eAAe,2CAsBjB"}

package/dist/AdminShell.js

@@ -1,5 +1,47 @@
 "use client";
-import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export default function AdminShell({ nav, modeBar, children }) {
-    return (_jsxs(_Fragment, { children: [nav, modeBar, children] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import ModeBar, { MODE_BAR_HEIGHT_PX } from "./ModeBar.js";
+import { TOP_BAR_COMPACT_HEIGHT_PX } from "./TopBar.js";
+const MAX_WIDTH_PX = 1600;
+const Root = styled.div `
+  min-height: 100vh;
+  background: var(--viewer-ui-color-background, var(--brand-background));
+  color: var(--viewer-ui-color-text, var(--brand-text-primary));
+`;
+const TopBar = styled.div `
+  position: fixed;
+  inset: 0 0 auto;
+  height: ${TOP_BAR_COMPACT_HEIGHT_PX}px;
+  z-index: 70;
+  border-bottom: 1px solid var(--viewer-ui-color-panel-border, var(--brand-panel-border));
+  background: var(--viewer-ui-color-bg-base, var(--brand-panel));
+`;
+const TopBarInner = styled.div `
+  width: min(100%, ${MAX_WIDTH_PX}px);
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const TopBarTitle = styled.div `
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: var(--viewer-ui-eyebrow-text-case, lowercase);
+  color: var(--viewer-ui-color-text-subtle, var(--brand-text-secondary));
+`;
+const TopBarActions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+`;
+const Body = styled.div `
+  min-height: 100vh;
+  padding-top: ${TOP_BAR_COMPACT_HEIGHT_PX + MODE_BAR_HEIGHT_PX}px;
+`;
+export default function AdminShell({ title = "composer admin", tabs = [], activeTab, onSelectTab, nav, actions, modeBar, children, }) {
+    return (_jsxs(Root, { children: [nav ?? (_jsx(TopBar, { children: _jsxs(TopBarInner, { children: [_jsx(TopBarTitle, { children: title }), actions ? _jsx(TopBarActions, { children: actions }) : null] }) })), modeBar ?? (_jsx(ModeBar, { active: activeTab || '', tabs: tabs, topOffsetPx: TOP_BAR_COMPACT_HEIGHT_PX, onSelect: onSelectTab })), _jsx(Body, { children: children })] }));
 }

package/dist/ChooserActionCard.d.ts

@@ -0,0 +1,10 @@
+type ChooserActionCardProps = {
+    title: string;
+    description: string;
+    href?: string;
+    onClick?: () => void;
+    actionLabel?: string;
+};
+export default function ChooserActionCard({ title, description, href, onClick, actionLabel, }: ChooserActionCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChooserActionCard.d.ts.map

package/dist/ChooserActionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChooserActionCard.d.ts","sourceRoot":"","sources":["../src/ChooserActionCard.tsx"],"names":[],"mappings":"AAYA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAqCF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAoB,GACrB,EAAE,sBAAsB,2CAaxB"}

package/dist/ChooserActionCard.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import styled from 'styled-components';
+import { panelSystemActionCardCss, panelSystemBodyTextCss, panelSystemLabelCss, panelSystemSubheadingCss, } from './PanelSystem.js';
+const Card = styled.a `
+  ${panelSystemActionCardCss}
+  min-height: 0;
+  align-items: stretch;
+  flex-direction: column;
+  padding: 16px 18px;
+  display: flex;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.16s ease, background 0.16s ease;
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    border-color: var(--viewer-ui-shell-pill-active-border, var(--viewer-ui-color-button-primary));
+    background: color-mix(in srgb, var(--viewer-ui-color-surface) 84%, var(--viewer-ui-color-control-hover) 16%);
+  }
+`;
+const Title = styled.div `
+  ${panelSystemSubheadingCss}
+  font-weight: 400;
+  color: var(--viewer-ui-color-text-strong);
+`;
+const Description = styled.div `
+  ${panelSystemBodyTextCss}
+  color: var(--viewer-ui-color-text-muted);
+`;
+const ActionLabel = styled.div `
+  ${panelSystemLabelCss}
+  color: var(--viewer-ui-color-text-strong);
+`;
+export default function ChooserActionCard({ title, description, href, onClick, actionLabel = 'open', }) {
+    return (_jsxs(Card, { as: href ? Link : 'button', href: href, type: href ? undefined : 'button', onClick: href ? undefined : onClick, children: [_jsx(Title, { children: title }), _jsx(Description, { children: description }), _jsx(ActionLabel, { children: actionLabel })] }));
+}

package/dist/ComposerRightRail.d.ts

@@ -7,6 +7,8 @@ export type ComposerRightRailTab = {
 type ComposerRightRailProps = {
     isVisible: boolean;
     onToggle: () => void;
+    shellCollapsed?: boolean;
+    onRestoreShell?: () => void;
     activeTab: string;
     onTabChange: (id: string) => void;
     tabs: ComposerRightRailTab[];
@@ -15,6 +17,6 @@ type ComposerRightRailProps = {
     showEdgeToggle?: boolean;
     topOffsetPx?: number;
 };
-export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title, statusLabel, showEdgeToggle, topOffsetPx, }: ComposerRightRailProps): import("react/jsx-runtime").JSX.Element;
+export default function ComposerRightRail({ isVisible, onToggle, shellCollapsed, onRestoreShell, activeTab, onTabChange, tabs, title, statusLabel, showEdgeToggle, topOffsetPx, }: ComposerRightRailProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ComposerRightRail.d.ts.map

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;AASvC,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;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAwDF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,KAAsB,EACtB,WAAoB,EACpB,cAAsB,EACtB,WAAe,GAChB,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;AAavC,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,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,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;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAkBF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,QAAQ,EACR,cAAsB,EACtB,cAAc,EACd,SAAS,EACT,WAAW,EACX,IAAI,EACJ,KAAsB,EACtB,WAAoB,EACpB,cAAsB,EACtB,WAAe,GAChB,EAAE,sBAAsB,2CAwExB"}

package/dist/ComposerRightRail.js

@@ -1,58 +1,26 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from 'styled-components';
-import { RightPanel, RightPanelCollapseToggle, RightPanelShowToggle, } from './layout.js';
-const RailHeader = styled.div `
-  border-bottom: 1px solid var(--brand-panel-border);
-  padding: 16px 18px 14px;
-  background: var(--brand-panel);
-`;
+import { panelEyebrowCss, panelPillButtonCss, panelPillRowCss } from './panelPrimitives.js';
+import { PanelBody, PanelHeader, PanelHeaderContent, RightPanel, RightPanelCollapseToggle, RightPanelShowToggle, } from './layout.js';
 const RailEyebrow = styled.div `
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-  color: var(--brand-text-secondary);
+  ${panelEyebrowCss}
 `;
 const RailTabs = styled.div `
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-  overflow-x: auto;
-  padding-bottom: 2px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  ${panelPillRowCss}
+  margin-top: 8px;
 `;
 const RailTab = styled.button `
-  border-radius: 999px;
-  min-height: 42px;
-  padding: 0 20px;
-  border: 1px solid ${(props) => (props.$active ? 'var(--brand-text-primary)' : 'var(--brand-panel-border)')};
-  background: ${(props) => (props.$active ? 'var(--brand-text-primary)' : 'var(--brand-background)')};
-  color: ${(props) => (props.$active ? 'var(--brand-background)' : 'var(--brand-text-secondary)')};
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  text-transform: lowercase;
-  white-space: nowrap;
-  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
-
-  &:hover {
-    color: ${(props) => (props.$active ? 'var(--brand-background)' : 'var(--brand-text-primary)')};
-  }
-`;
-const RailBody = styled.div `
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 18px;
+  ${panelPillButtonCss}
 `;
-export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title = 'image system', statusLabel = 'live', showEdgeToggle = false, topOffsetPx = 0, }) {
+export default function ComposerRightRail({ isVisible, onToggle, shellCollapsed = false, onRestoreShell, activeTab, onTabChange, tabs, title = 'image system', statusLabel = 'live', showEdgeToggle = false, topOffsetPx = 0, }) {
     const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0] ?? null;
     const hasStatus = Boolean(statusLabel && statusLabel.trim().length > 0);
-    return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, "$topOffset": topOffsetPx, children: [showEdgeToggle ? (_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" }) }) })) : null, _jsxs(RailHeader, { children: [_jsxs(RailEyebrow, { children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx(RailTabs, { children: tabs.map((tab) => (_jsx(RailTab, { type: "button", onClick: () => onTabChange(tab.id), "$active": active?.id === tab.id, children: tab.label }, tab.id))) })] }), _jsx(RailBody, { children: active?.content ?? null })] })) : null, !isVisible && showEdgeToggle ? (_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] }));
+    const handleShow = shellCollapsed && onRestoreShell ? onRestoreShell : onToggle;
+    const showTitle = shellCollapsed ? 'Restore shell' : 'Show right panel';
+    const showLabel = shellCollapsed ? 'Restore shell' : 'Show right panel';
+    return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, "$topOffset": topOffsetPx, children: [showEdgeToggle ? (_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" }) }) })) : null, _jsx(PanelHeader, { children: _jsxs(PanelHeaderContent, { children: [_jsxs(RailEyebrow, { children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx(RailTabs, { children: tabs.map((tab) => (_jsx(RailTab, { type: "button", onClick: () => onTabChange(tab.id), "$active": active?.id === tab.id, children: tab.label }, tab.id))) })] }) }), _jsx(PanelBody, { className: "viewer-ui-shell-right-body viewer-ui-panel-renderer viewer-ui-panel-renderer--sectioned", children: active?.content ?? null })] })) : null, !isVisible && showEdgeToggle ? (_jsx(RightPanelShowToggle, { type: "button", onClick: handleShow, "aria-label": showLabel, title: showTitle, 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/ConfiguratorShell.js

@@ -6,5 +6,5 @@ export default function ConfiguratorShell({ navOffsetPx = 0, className, leftOpen
         ['--ui-left-offset']: leftOpen ? 'var(--ui-panel-width)' : '0px',
         ['--ui-right-offset']: rightOpen ? 'var(--ui-metrics-width)' : '0px',
     };
-    return (_jsxs(ShellLayout, { className: className, "$topOffset": navOffsetPx, style: shellStyle, children: [_jsxs(ControlPanel, { "$open": leftOpen, children: [showLeftToggle && (_jsx(PanelCollapseToggle, { type: "button", onClick: () => onLeftToggle(false), "aria-label": "Hide control panel", title: "Hide control 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" }) }) })), _jsx(PanelHeader, { children: leftHeader }), _jsx(PanelBody, { children: leftBody }), leftFooter ? _jsx(PanelFooter, { children: leftFooter }) : null] }), showLeftToggle && !leftOpen && (_jsx(PanelShowToggle, { type: "button", onClick: () => onLeftToggle(true), "aria-label": "Show control panel", title: "Show control 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" }) }) })), viewer, rightOpen && onRightToggle ? (_jsxs(RightPanel, { "$open": rightOpen, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: () => onRightToggle(false), "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" }) }) }), rightHeader, _jsx("div", { className: "viewer-ui-shell-right-body", children: rightBody })] })) : null, showRightToggle && onRightToggle && !rightOpen && (_jsx(RightPanelShowToggle, { type: "button", onClick: () => onRightToggle(true), "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" }) }) }))] }));
+    return (_jsxs(ShellLayout, { className: className, "$topOffset": navOffsetPx, style: shellStyle, children: [_jsxs(ControlPanel, { "$open": leftOpen, children: [showLeftToggle && (_jsx(PanelCollapseToggle, { type: "button", onClick: () => onLeftToggle(false), "aria-label": "Hide control panel", title: "Hide control 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" }) }) })), _jsx(PanelHeader, { children: leftHeader }), _jsx(PanelBody, { children: leftBody }), leftFooter ? _jsx(PanelFooter, { children: leftFooter }) : null] }), showLeftToggle && !leftOpen && (_jsx(PanelShowToggle, { type: "button", onClick: () => onLeftToggle(true), "aria-label": "Show control panel", title: "Show control 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" }) }) })), viewer, rightOpen && onRightToggle ? (_jsxs(RightPanel, { "$open": rightOpen, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: () => onRightToggle(false), "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" }) }) }), rightHeader, _jsx(PanelBody, { className: "viewer-ui-shell-right-body", children: rightBody })] })) : null, showRightToggle && onRightToggle && !rightOpen && (_jsx(RightPanelShowToggle, { type: "button", onClick: () => onRightToggle(true), "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" }) }) }))] }));
 }

package/dist/LandingShell.d.ts

@@ -3,9 +3,10 @@ import type { SurfaceLandingContent } from '@treasuryspatial/surface-kit';
 export type LandingShellProps = {
     manifest: UiManifest;
     content: SurfaceLandingContent;
+    subtitle?: string | null;
     showPoweredBy?: boolean;
     showLogout?: boolean;
     className?: string;
 };
-export default function LandingShell({ manifest, content, showPoweredBy, showLogout, className, }: LandingShellProps): import("react/jsx-runtime").JSX.Element;
+export default function LandingShell({ manifest, content, subtitle, showPoweredBy, showLogout, className, }: LandingShellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LandingShell.d.ts.map

package/dist/LandingShell.d.ts.map

@@ -1 +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,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAsG1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,SAAS,GACV,EAAE,iBAAiB,2CAuBnB"}
+{"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,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AA4P1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,aAAqB,EACrB,UAAkB,EAClB,SAAS,GACV,EAAE,iBAAiB,2CAyDnB"}

package/dist/LandingShell.js

@@ -1,20 +1,23 @@
 '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';
+import { LANDING_BODY_FONT_SIZE, LANDING_BODY_MAX_WIDTH, LANDING_SECTION_STRAP_SIZE, LANDING_SECTION_TITLE_SIZE, } from './landingTokens.js';
 const Root = styled.main `
   min-height: 100vh;
   background: var(--brand-background);
   color: var(--brand-text-primary);
 `;
 const Section = styled.section `
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: calc(var(--ui-nav-height) + 28px) 0 56px;
+  padding-top: calc(var(--ui-nav-height) + 72px);
+  margin-bottom: 50px;
 
   @media (min-width: 1024px) {
-    padding-top: calc(var(--ui-nav-height) + 40px);
-    padding-bottom: 96px;
+    padding-top: calc(var(--ui-nav-height) + 85px);
+    padding-bottom: 140px;
   }
 `;
 const Row = styled.div `
@@ -22,74 +25,201 @@ const Row = styled.div `
   flex-direction: column;
 
   @media (min-width: 1024px) {
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
+    gap: 0;
     position: relative;
+    min-height: calc(100vh - var(--ui-nav-height) - 225px);
+    align-items: stretch;
   }
 `;
 const LeftColumn = styled.div `
   flex: 0 0 auto;
 
   @media (min-width: 1024px) {
-    width: 50%;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    overflow: visible;
   }
 `;
 const RightColumn = styled.div `
   flex: 1 1 auto;
 
   @media (min-width: 1024px) {
-    width: 50%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+`;
+const RightColumnContent = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 46px;
+  padding: 32px 24px 0;
+
+  @media (min-width: 768px) {
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+
+  @media (min-width: 1024px) {
+    width: 100%;
+    max-width: calc(${LANDING_BODY_MAX_WIDTH} + 84px);
+    margin-top: clamp(48px, 7vh, 82px);
+    align-self: flex-end;
+    padding: 0 84px 0 0;
   }
 `;
 const Header = styled.div `
-  max-width: 65vw;
-  padding: 72px 24px 0;
-  font-family: var(--ui-font-family, system-ui);
+  max-width: min(92vw, 980px);
+  padding: 108px 24px 0 24px;
+  font-family: var(--viewer-ui-font-display, var(--ui-font-family, system-ui));
   font-weight: 400;
-  color: var(--brand-primary);
 
   @media (min-width: 768px) {
     padding-left: 48px;
-    font-size: 36px;
   }
 
   @media (min-width: 1024px) {
     padding: 0 0 0 84px;
+    width: calc(100vw - 168px);
+    max-width: calc(100vw - 168px);
   }
 `;
 const HeaderTitle = styled.div `
-  font-size: clamp(34px, 3vw + 18px, 61px);
-  line-height: 1.02;
+  color: var(--brand-text-primary);
+  font-size: 32px;
+  line-height: 1;
   letter-spacing: -0.03em;
+  max-width: 18ch;
+  text-wrap: pretty;
+
+  @media (min-width: 768px) {
+    font-size: 36px;
+  }
+
+  @media (min-width: 1024px) {
+    font-size: 42px;
+    max-width: 24ch;
+  }
+
+  @media (min-width: 1440px) {
+    font-size: ${LANDING_SECTION_TITLE_SIZE};
+  }
+`;
+const HeaderTitleAccent = styled.span `
+  color: var(--brand-primary);
 `;
 const HeaderStrap = styled.div `
-  margin-top: 18px;
-  font-size: clamp(22px, 2vw + 12px, 40px);
-  line-height: 1.1;
-  letter-spacing: -0.02em;
+  margin-top: 28px;
+  color: var(--brand-text-primary);
+  font-family: var(--viewer-ui-font-body, var(--ui-font-family, system-ui));
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  font-weight: 400;
+  max-width: 36ch;
+  text-wrap: pretty;
+
+  @media (min-width: 768px) {
+    font-size: 16px;
+  }
+
+  @media (min-width: 1024px) {
+    font-size: 18px;
+  }
+
+  @media (min-width: 1440px) {
+    font-size: ${LANDING_SECTION_STRAP_SIZE};
+  }
 `;
 const Body = styled.div `
-  padding: 32px 24px 0;
-  font-size: 15px;
-  line-height: 1.8;
-  color: var(--brand-text-secondary);
+  color: var(--brand-text-primary);
+  font-family: var(--viewer-ui-font-body, var(--ui-font-family, system-ui));
+  font-size: ${LANDING_BODY_FONT_SIZE};
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  font-weight: 400;
+  max-width: ${LANDING_BODY_MAX_WIDTH};
+  text-wrap: pretty;
 
   p {
-    margin: 0 0 20px;
+    margin: 0;
   }
 
-  p:last-child {
-    margin-bottom: 0;
+  p + p {
+    margin-top: 30px;
   }
 
-  @media (min-width: 768px) {
-    padding-left: 48px;
-    padding-right: 48px;
+  @media (min-width: 1440px) {
+    font-size: 20px;
   }
+`;
+const LandingSections = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  color: var(--brand-text-primary);
+  font-family: var(--viewer-ui-font-body, var(--ui-font-family, system-ui));
+  font-size: ${LANDING_BODY_FONT_SIZE};
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  font-weight: 400;
+  max-width: ${LANDING_BODY_MAX_WIDTH};
+  text-wrap: pretty;
 
-  @media (min-width: 1024px) {
-    padding: 24px 84px 0 32px;
+  @media (min-width: 1440px) {
+    font-size: 20px;
   }
 `;
-export default function LandingShell({ manifest, content, showPoweredBy = false, showLogout = false, className, }) {
-    return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Section, { children: _jsxs(Row, { children: [_jsx(LeftColumn, { children: _jsxs(Header, { children: [_jsx(HeaderTitle, { children: content.header }), _jsx(HeaderStrap, { children: content.strap })] }) }), _jsx(RightColumn, { children: _jsx(Body, { children: content.bodyParagraphs.map((paragraph, index) => (_jsx("p", { children: paragraph }, `${index}-${paragraph.slice(0, 16)}`))) }) })] }) })] }));
+const LandingSection = styled.section `
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+`;
+const LandingSectionTitle = styled.h3 `
+  margin: 0;
+  color: var(--brand-primary);
+  font-family: var(--viewer-ui-font-body, var(--ui-font-family, system-ui));
+  font-size: 1em;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 700;
+`;
+const LandingSectionParagraph = styled.p `
+  margin: 0;
+`;
+const LandingSectionBullets = styled.ul `
+  margin: 0;
+  padding-left: 1.2em;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const LandingSectionBullet = styled.li `
+  margin: 0;
+`;
+function renderHeaderTitle(header, accentLabel) {
+    const title = header.trim();
+    const accent = accentLabel?.trim();
+    if (!title || !accent)
+        return title;
+    const titleLower = title.toLowerCase();
+    const accentLower = accent.toLowerCase();
+    if (titleLower === accentLower || !titleLower.endsWith(accentLower)) {
+        return title;
+    }
+    const accentStart = title.length - accent.length;
+    const prefix = title.slice(0, accentStart).trimEnd();
+    if (!prefix)
+        return title;
+    const separator = title.slice(prefix.length, accentStart) || ' ';
+    return (_jsxs(_Fragment, { children: [prefix, separator, _jsx(HeaderTitleAccent, { children: title.slice(accentStart) })] }));
+}
+export default function LandingShell({ manifest, content, subtitle, showPoweredBy = false, showLogout = false, className, }) {
+    const headerAccentLabel = manifest.topbar.productLabel || null;
+    const displaySubtitle = subtitle || content.strap;
+    return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", topbarContext: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Section, { children: _jsxs(Row, { children: [_jsx(LeftColumn, { children: _jsxs(Header, { children: [_jsx(HeaderTitle, { children: renderHeaderTitle(content.header, headerAccentLabel) }), _jsx(HeaderStrap, { children: displaySubtitle })] }) }), _jsx(RightColumn, { children: _jsxs(RightColumnContent, { children: [_jsx(Body, { children: content.bodyParagraphs.map((paragraph, index) => (_jsx("p", { children: paragraph }, `${index}-${paragraph.slice(0, 16)}`))) }), content.sections?.length ? (_jsx(LandingSections, { children: content.sections.map((section, index) => (_jsxs(LandingSection, { children: [section.title ? _jsx(LandingSectionTitle, { children: section.title }) : null, section.paragraphs?.map((paragraph, paragraphIndex) => (_jsx(LandingSectionParagraph, { children: paragraph }, `${index}-${paragraphIndex}-${paragraph.slice(0, 16)}`))), section.bullets?.length ? (_jsx(LandingSectionBullets, { children: section.bullets.map((bullet, bulletIndex) => (_jsx(LandingSectionBullet, { children: bullet }, `${index}-${bulletIndex}-${bullet.slice(0, 16)}`))) })) : null] }, `${index}-${section.title ?? 'section'}`))) })) : null] }) })] }) })] }));
 }

package/dist/LoginForm.js

@@ -12,7 +12,7 @@ const Row = styled.div `
   display: flex;
 `;
 const LabelCell = styled.div `
-  background: var(--brand-secondary);
+  background: #6b7280;
   width: 296px;
   padding: 16px;
   color: white;
@@ -23,7 +23,7 @@ const Input = styled.input `
   outline: none;
   flex: 1;
   border: none;
-  background: color-mix(in srgb, var(--brand-panel) 88%, var(--brand-background) 12%);
+  background: #f2f2f5;
   padding: 16px;
   font-size: 16px;
   color: var(--brand-text-primary);

package/dist/LoginShell.d.ts

@@ -4,10 +4,11 @@ import type { SurfaceLoginContent } from '@treasuryspatial/surface-kit';
 export type LoginShellProps = {
     manifest: UiManifest;
     content?: SurfaceLoginContent | null;
+    subtitle?: string | 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;
+export default function LoginShell({ manifest, content, subtitle, children, showLogout, showPoweredBy, className, }: LoginShellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LoginShell.d.ts.map

package/dist/LoginShell.d.ts.map

@@ -1 +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,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAkExE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,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,2CAwBjB"}
+{"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,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAgGxE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,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,QAAQ,EACR,UAAkB,EAClB,aAAqB,EACrB,SAAS,GACV,EAAE,eAAe,2CA4BjB"}