@treasuryspatial/viewer-ui-kit 0.1.42 → 0.1.56

package/dist/MetricsPanelContent.js

@@ -1,97 +1,91 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
-const formatMeters = (value) => `${value.toFixed(2)} m`;
-const formatDegrees = (value) => `${value.toFixed(1)}°`;
-const Root = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
+const Root = styled.div.attrs({ className: 'viewer-ui-panel-sections' }) ``;
+const Section = styled.section.attrs({ className: 'panel-section' }) ``;
+const SectionHeader = styled.div.attrs({ className: 'panel-section-header' }) ``;
+const SectionHeaderCopy = styled.div `
+  min-width: 0;
 `;
-const Header = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-const Title = styled.div `
-  font-size: 17px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--brand-text-primary);
-`;
-const Eyebrow = styled.div `
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  color: var(--brand-text-secondary);
-`;
-const Section = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-const SectionTitle = styled.div `
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  color: var(--brand-text-secondary);
-`;
-const MetricRow = styled.div `
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--brand-panel-border);
-
-  &:last-child {
-    border-bottom: 0;
-    padding-bottom: 0;
-  }
-`;
-const MetricLabel = styled.span `
-  font-size: 13px;
-  color: var(--brand-text-secondary);
-`;
-const MetricValue = styled.span `
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
-  font-size: 13px;
-  color: var(--brand-text-primary);
-`;
-export default function MetricsPanelContent({ cameraMetrics, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, }) {
-    const sections = [
-        {
-            title: 'camera',
-            metrics: [
-                {
-                    label: 'height above floor',
-                    value: cameraMetrics ? formatMeters(cameraMetrics.heightAboveFloor) : formatMeters(distanceToFloor),
-                },
-                { label: 'compass angle', value: formatDegrees(compassAngle) },
-                { label: 'pitch angle', value: formatDegrees(pitchAngle) },
-            ],
-        },
+const SectionList = styled.div.attrs({ className: 'panel-section-list' }) ``;
+const MetricRow = styled.div.attrs({ className: 'panel-section-row' }) ``;
+const MetricMeta = styled.div.attrs({ className: 'panel-section-row-copy' }) ``;
+const MetricLabel = styled.span.attrs({ className: 'panel-section-row-label' }) ``;
+const MetricHelp = styled.span.attrs({ className: 'panel-section-row-help' }) ``;
+const MetricValue = styled.span.attrs({ className: 'panel-section-row-value' }) ``;
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const resolvePathValue = (root, path) => {
+    if (!root || !path.trim())
+        return null;
+    const parts = path.split('.').map((part) => part.trim()).filter(Boolean);
+    let current = root;
+    for (const part of parts) {
+        if (!isRecord(current))
+            return null;
+        current = current[part];
+    }
+    return current ?? null;
+};
+const formatMetricValue = (metric, value) => {
+    if (value === null || value === undefined || value === '') {
+        return metric.emptyLabel?.trim() || 'not emitted';
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        if (metric.prefix === '$') {
+            const digits = metric.digits ?? 0;
+            return new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+                minimumFractionDigits: digits,
+                maximumFractionDigits: digits,
+            }).format(value);
+        }
+        if (metric.format === 'count') {
+            return `${metric.prefix ?? ''}${Math.round(value)}${metric.suffix ?? ''}`;
+        }
+        const digits = metric.digits ?? (Number.isInteger(value) ? 0 : 2);
+        return `${metric.prefix ?? ''}${value.toFixed(digits)}${metric.suffix ?? ''}`;
+    }
+    if (typeof value === 'boolean') {
+        return value ? `${metric.prefix ?? ''}yes${metric.suffix ?? ''}` : `${metric.prefix ?? ''}no${metric.suffix ?? ''}`;
+    }
+    return `${metric.prefix ?? ''}${String(value)}${metric.suffix ?? ''}`;
+};
+export default function MetricsPanelContent({ modeId, modeLabel, moduleLabel, moduleSummary, promptPackLabel, promptPackDescription, renderCount = 0, imageSetCount = 0, toolMetrics, feeds, }) {
+    const supportsDerivedMetrics = modeId === 'design' || modeId === 'map' || modeId === 'streetmix' || modeId === 'streetview';
+    const manifestGroups = Array.isArray(toolMetrics?.groups) ? toolMetrics.groups : [];
+    const hasManifestMetrics = manifestGroups.length > 0;
+    const runtimeFeed = isRecord(feeds?.runtime) ? feeds.runtime : null;
+    const mapFeed = isRecord(feeds?.map) ? feeds.map : null;
+    const mapMetrics = mapFeed ? feeds?.map : null;
+    const hasMapFeed = Boolean(mapFeed && Object.keys(mapFeed).length > 0);
+    const manifestUsesMapFeed = manifestGroups.some((group) => Array.isArray(group.metrics) ? group.metrics.some((metric) => metric.source.kind === 'map') : false);
+    const mapMetricsSourceLabel = hasMapFeed && mapMetrics?.source?.trim() ? mapMetrics.source.trim() : 'derived';
+    const eyebrowLabel = hasManifestMetrics
+        ? 'manifest-driven feeds'
+        : modeId === 'map' && hasMapFeed
+            ? 'runtime + map feed'
+            : 'runtime context only';
+    const runtimeRows = [
+        { label: 'mode', value: modeLabel },
+        { label: 'module', value: moduleLabel?.trim() || 'none' },
+        { label: 'prompt system', value: promptPackLabel?.trim() || 'default' },
+        { label: 'renders', value: `${renderCount}` },
+        { label: 'image sets', value: `${imageSetCount}` },
         {
-            title: 'clearances',
-            metrics: [
-                { label: 'floor', value: formatMeters(distanceToFloor) },
-                { label: 'ceiling', value: formatMeters(distanceToCeiling) },
-                { label: 'north', value: formatMeters(distanceToNorth) },
-                { label: 'south', value: formatMeters(distanceToSouth) },
-                { label: 'east', value: formatMeters(distanceToEast) },
-                { label: 'west', value: formatMeters(distanceToWest) },
-            ],
+            label: 'geometry status',
+            value: typeof runtimeFeed?.geometryStatus === 'string' && runtimeFeed.geometryStatus.trim()
+                ? runtimeFeed.geometryStatus
+                : modeId === 'imagine'
+                    ? 'blank canvas'
+                    : 'idle',
         },
-        cameraMetrics
-            ? {
-                title: 'position',
-                metrics: [
-                    { label: 'x', value: formatMeters(cameraMetrics.position.x) },
-                    { label: 'y', value: formatMeters(cameraMetrics.position.y) },
-                    { label: 'z', value: formatMeters(cameraMetrics.position.z) },
-                ],
-            }
-            : null,
-    ].filter(Boolean);
-    return (_jsxs(Root, { children: [_jsxs(Header, { children: [_jsx(Title, { children: "viewer metrics" }), _jsx(Eyebrow, { children: "live scene telemetry" })] }), _jsx("div", { children: sections.map((section) => (_jsxs(Section, { children: [_jsx(SectionTitle, { children: section.title }), section.metrics.map((metric) => (_jsxs(MetricRow, { children: [_jsx(MetricLabel, { children: metric.label }), _jsx(MetricValue, { children: metric.value })] }, metric.label)))] }, section.title))) })] }));
+    ];
+    return (_jsxs(Root, { children: [_jsx(Section, { "data-panel-id": "metrics-overview", children: _jsx(SectionHeader, { children: _jsxs(SectionHeaderCopy, { children: [_jsx("h3", { children: toolMetrics?.title?.trim() || 'surface metrics' }), _jsx("p", { children: eyebrowLabel }), toolMetrics?.summary?.trim() ? _jsx("p", { children: toolMetrics.summary }) : null] }) }) }), _jsxs(Section, { "data-panel-id": "metrics-context", children: [_jsx(SectionHeader, { children: _jsxs(SectionHeaderCopy, { children: [_jsx("h3", { children: "surface context" }), moduleSummary?.trim() ? _jsx("p", { children: moduleSummary }) : null, promptPackDescription?.trim() ? _jsx("p", { children: promptPackDescription }) : null] }) }), _jsx(SectionList, { children: runtimeRows.map((metric) => (_jsxs(MetricRow, { children: [_jsx(MetricMeta, { children: _jsx(MetricLabel, { children: metric.label }) }), _jsx(MetricValue, { children: metric.value })] }, metric.label))) })] }), !hasManifestMetrics ? (_jsx(Section, { "data-panel-id": "metrics-contract-warning", children: _jsx(SectionHeader, { children: _jsxs(SectionHeaderCopy, { children: [_jsx("h3", { children: modeId === 'map' ? 'map metrics contract missing' : 'tool metrics not declared' }), _jsx("p", { children: modeId === 'map'
+                                    ? 'This map tool is receiving live site metrics, but its manifest does not declare canonical groups against the shared map feed. Add manifest metrics instead of relying on frontend-only cards.'
+                                    : 'This tool manifest does not declare canonical metrics feeds. Composer is only showing shared runtime context and will not invent tool-specific metrics from frontend heuristics.' })] }) }) })) : null, modeId === 'map' && manifestUsesMapFeed && !hasMapFeed ? (_jsx(Section, { "data-panel-id": "metrics-map-feed-warning", children: _jsx(SectionHeader, { children: _jsxs(SectionHeaderCopy, { children: [_jsx("h3", { children: "map feed missing" }), _jsx("p", { children: "This panel has manifest-declared map metrics, but no canonical `feeds.map` payload was provided. This is a metrics wiring bug, not absent site data." })] }) }) })) : null, manifestGroups.map((group) => (_jsxs(Section, { "data-panel-id": `metrics-${group.id}`, children: [_jsx(SectionHeader, { children: _jsxs(SectionHeaderCopy, { children: [_jsx("h3", { children: group.label }), group.summary?.trim() ? _jsx("p", { children: group.summary }) : null] }) }), group.metrics.length > 0 ? (_jsx(SectionList, { children: group.metrics.map((metric) => {
+                            const feedRoot = isRecord(feeds?.[metric.source.kind]) ? feeds?.[metric.source.kind] : null;
+                            const value = resolvePathValue(feedRoot, metric.source.path);
+                            return (_jsxs(MetricRow, { children: [_jsxs(MetricMeta, { children: [_jsx(MetricLabel, { children: metric.label }), metric.summary?.trim() ? _jsx(MetricHelp, { children: metric.summary }) : null] }), _jsx(MetricValue, { children: formatMetricValue(metric, value) })] }, metric.id));
+                        }) })) : (_jsx("div", { className: "panel-section-empty", children: "This metrics group has no declared fields." }))] }, group.id))), _jsxs(Section, { "data-panel-id": "metrics-status", children: [_jsx(SectionHeader, { children: _jsx(SectionHeaderCopy, { children: _jsx("h3", { children: modeId === 'map' ? 'metrics' : supportsDerivedMetrics || hasManifestMetrics ? 'status' : 'metrics' }) }) }), _jsx(SectionList, { children: modeId === 'map' && hasMapFeed ? (_jsxs(MetricRow, { children: [_jsx(MetricMeta, { children: _jsx(MetricLabel, { children: "source" }) }), _jsx(MetricValue, { children: mapMetricsSourceLabel })] })) : (_jsxs(MetricRow, { children: [_jsx(MetricMeta, { children: _jsx(MetricLabel, { children: hasManifestMetrics ? 'source' : supportsDerivedMetrics ? 'availability' : 'state' }) }), _jsx(MetricValue, { children: hasManifestMetrics ? 'manifest + runtime' : supportsDerivedMetrics ? 'pending' : 'none' })] })) })] })] }));
 }

package/dist/ModeBar.d.ts

@@ -1,3 +1,5 @@
+export declare const MODE_BAR_HEIGHT_PX = 42;
+export declare const MODE_BAR_WITH_UTILITIES_HEIGHT_PX = 42;
 export type ModeTab = {
     id: string;
     label: string;
@@ -18,7 +20,9 @@ export type ModeBarProps = {
     showPanelToggle?: boolean;
     panelsCollapsed?: boolean;
     onTogglePanels?: () => void;
+    inline?: boolean;
+    id?: string;
+    ariaLabel?: string;
 };
-export declare const MODE_BAR_HEIGHT_PX = 34;
-export default function ModeBar({ active, topOffsetPx, tabs, tone, heightPx, lockedLabel, onSelect, hidden, className, showPanelToggle, panelsCollapsed, onTogglePanels, }: ModeBarProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ModeBar({ active, topOffsetPx, tabs, tone: _tone, heightPx, lockedLabel, onSelect, hidden, className, showPanelToggle, panelsCollapsed, onTogglePanels, inline, id, ariaLabel, }: ModeBarProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ModeBar.d.ts.map

package/dist/ModeBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModeBar.d.ts","sourceRoot":"","sources":["../src/ModeBar.tsx"],"names":[],"mappings":"AAoGA,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,MAAM,EACN,WAAW,EACX,IAAI,EACJ,IAAc,EACd,QAA6B,EAC7B,WAA2B,EAC3B,QAAQ,EACR,MAAc,EACd,SAAS,EACT,eAAuB,EACvB,eAAuB,EACvB,cAAc,GACf,EAAE,YAAY,kDA6Dd"}
+{"version":3,"file":"ModeBar.d.ts","sourceRoot":"","sources":["../src/ModeBar.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,iCAAiC,KAAqB,CAAC;AAmDpE,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,MAAM,EACN,WAAW,EACX,IAAI,EACJ,IAAI,EAAE,KAAe,EACrB,QAAQ,EACR,WAA2B,EAC3B,QAAQ,EACR,MAAc,EACd,SAAS,EACT,eAAuB,EACvB,eAAuB,EACvB,cAAc,EACd,MAAc,EACd,EAAE,EACF,SAA2B,GAC5B,EAAE,YAAY,kDAmDd"}

package/dist/ModeBar.js

@@ -1,105 +1,72 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
+import { panelSystemFeatureToggleCss, panelSystemToggleBarCss, panelSystemVarsCss, } from './PanelSystem.js';
+import PanelToggleDock from './PanelToggleDock.js';
+export const MODE_BAR_HEIGHT_PX = 42;
+export const MODE_BAR_WITH_UTILITIES_HEIGHT_PX = MODE_BAR_HEIGHT_PX;
 const Root = styled.div `
-  position: fixed;
+  ${panelSystemVarsCss}
+  position: ${(props) => (props.$inline ? 'relative' : 'fixed')};
   left: 0;
   right: 0;
   z-index: 70;
-  top: ${(props) => `${Math.max(0, props.$topOffsetPx)}px`};
+  top: ${(props) => (props.$inline ? 'auto' : `${Math.max(0, props.$topOffsetPx)}px`)};
+  width: ${(props) => (props.$inline ? '100vw' : 'auto')};
   height: ${(props) => `${props.$heightPx}px`};
-  background: var(--viewer-ui-color-bg-base, var(--brand-panel, #f6f3eb));
-  border-bottom: 1px solid var(--viewer-ui-color-panel-border, rgba(47, 74, 60, 0.35));
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  background: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid var(--panel-system-border);
+  backdrop-filter: blur(12px);
+  font-family: var(--index-panel-font, var(--viewer-ui-font-body));
 `;
-const ToggleOverlay = styled.div `
-  position: absolute;
-  left: 50%;
-  top: calc(100% + 8px);
-  transform: translateX(-50%);
-  z-index: 80;
+const Content = styled.div `
+  flex: 0 0 ${() => `${MODE_BAR_HEIGHT_PX}px`};
   display: flex;
   align-items: center;
-  gap: 8px;
-  pointer-events: auto;
+  justify-content: center;
+  min-width: 0;
+  padding: 0 20px;
 `;
 const Tabs = styled.div `
-  height: 100%;
-  display: flex;
-  align-items: stretch;
+  ${panelSystemToggleBarCss}
+  flex: 0 1 auto;
+  justify-content: center;
+  max-width: 100%;
+  min-width: 0;
 `;
 const TabLink = styled.a `
-  position: relative;
-  z-index: ${(props) => (props.$active ? 10 : 0)};
-  margin-left: ${(props) => (props.$index === 0 ? '0' : '-18px')};
-  border-left: ${(props) => (props.$index === 0 ? '1px solid var(--viewer-ui-color-panel-border)' : '0')};
-  border-right: 1px solid var(--viewer-ui-color-panel-border);
-  border-bottom: 1px solid var(--viewer-ui-color-panel-border);
-  border-radius: 0 0 18px 0;
-  box-shadow: inset 0 0 0 1px var(--viewer-ui-color-panel-border-subtle);
-  flex: 1 1 0;
-  min-width: 0;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: lowercase;
-  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
-  background: ${(props) => props.$active
-    ? props.$tone === 'green'
-        ? 'rgba(49, 143, 78, 0.12)'
-        : 'rgba(15, 23, 42, 0.08)'
-    : 'var(--viewer-ui-color-tab-bg, rgba(47, 74, 60, 0.08))'};
-  color: ${(props) => props.$active
-    ? props.$tone === 'green'
-        ? 'var(--viewer-ui-color-button-primary, #318f4e)'
-        : 'var(--viewer-ui-color-button-secondary, #0b1320)'
-    : 'var(--viewer-ui-color-text-muted, rgba(47, 74, 60, 0.75))'};
-
-  &:hover {
-    color: ${(props) => props.$active
-    ? props.$tone === 'green'
-        ? 'var(--viewer-ui-color-button-primary, #318f4e)'
-        : 'var(--viewer-ui-color-button-secondary, #0b1320)'
-    : 'var(--viewer-ui-color-text-strong, #0f172a)'};
-  }
+  ${panelSystemFeatureToggleCss}
+  gap: 8px;
 `;
 const LockedLabel = styled.span `
-  margin-left: 8px;
-  font-size: 9px;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--viewer-ui-color-text-muted, rgba(47, 74, 60, 0.75));
-`;
-const ToggleText = styled.button `
-  border: 0;
-  background: transparent;
   font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-  color: var(--brand-text-secondary);
-  cursor: pointer;
-  padding: 0;
-  white-space: nowrap;
-
-  &:hover {
-    color: var(--brand-text-primary);
-  }
+  letter-spacing: 0;
+  text-transform: none;
+  color: currentColor;
+  opacity: 0.72;
+  flex: 0 0 auto;
 `;
-export const MODE_BAR_HEIGHT_PX = 34;
-export default function ModeBar({ active, topOffsetPx, tabs, tone = 'green', heightPx = MODE_BAR_HEIGHT_PX, lockedLabel = 'coming soon', onSelect, hidden = false, className, showPanelToggle = false, panelsCollapsed = false, onTogglePanels, }) {
+export default function ModeBar({ active, topOffsetPx, tabs, tone: _tone = 'green', heightPx, lockedLabel = 'coming soon', onSelect, hidden = false, className, showPanelToggle = false, panelsCollapsed = false, onTogglePanels, inline = false, id, ariaLabel = 'Composer mode', }) {
     if (hidden) {
         return null;
     }
-    return (_jsxs(Root, { className: className, "$topOffsetPx": topOffsetPx, "$heightPx": heightPx, children: [_jsx(Tabs, { children: tabs.map((tab, index) => {
-                    const statusLabel = tab.status === 'coming-soon' || tab.locked ? lockedLabel : null;
-                    return (_jsxs(TabLink, { "$active": tab.id === active, "$tone": tone, "$index": index, href: tab.href ?? '#', onClick: (event) => {
-                            if (!tab.href) {
-                                event.preventDefault();
-                            }
-                            onSelect?.(tab.id);
-                        }, children: [_jsx("span", { children: tab.label }), statusLabel ? _jsx(LockedLabel, { children: statusLabel }) : null] }, tab.id));
-                }) }), showPanelToggle && onTogglePanels ? (_jsxs(ToggleOverlay, { children: [_jsx("button", { type: "button", className: "collapse-toggle collapse-toggle--edge-top", onClick: onTogglePanels, "aria-label": panelsCollapsed ? 'Show panels' : 'Toggle panels', children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: panelsCollapsed ? (_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("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(ToggleText, { type: "button", onClick: onTogglePanels, children: panelsCollapsed ? 'show panels' : 'toggle panels' })] })) : null] }));
+    const hasPanelUtility = Boolean(showPanelToggle && onTogglePanels);
+    const resolvedHeightPx = heightPx ?? MODE_BAR_HEIGHT_PX;
+    return (_jsxs(Root, { id: id, className: className, "$topOffsetPx": topOffsetPx, "$heightPx": resolvedHeightPx, "$inline": inline, children: [_jsx(Content, { children: _jsx(Tabs, { role: "radiogroup", "aria-label": ariaLabel, children: tabs.map((tab, index) => {
+                        const isDisabled = tab.status === 'coming-soon' || tab.locked;
+                        const statusLabel = isDisabled ? lockedLabel : null;
+                        const isActive = tab.id === active;
+                        return (_jsxs(TabLink, { role: "radio", "aria-checked": isActive, "aria-disabled": isDisabled ? 'true' : undefined, "data-active": isActive ? 'true' : 'false', "data-index": index, href: tab.href ?? '#', onClick: (event) => {
+                                if (!tab.href || isDisabled) {
+                                    event.preventDefault();
+                                }
+                                if (isDisabled) {
+                                    return;
+                                }
+                                onSelect?.(tab.id);
+                            }, children: [_jsx("span", { children: tab.label }), statusLabel ? _jsx(LockedLabel, { children: statusLabel }) : null] }, tab.id));
+                    }) }) }), _jsx(PanelToggleDock, { placement: "absolute", topOffsetPx: resolvedHeightPx, collapsed: panelsCollapsed, hidden: !hasPanelUtility, onToggle: onTogglePanels })] }));
 }

package/dist/ModuleSelectorPanel.d.ts

@@ -19,7 +19,8 @@ type ModuleSelectorPanelProps = {
     uploadDescription?: string;
     uploadSlot?: ReactNode;
     uploadMeta?: ReactNode;
+    supplementarySlot?: ReactNode;
 };
-export default function ModuleSelectorPanel({ title, description, status, error, modules, activeModuleId, onSelectModule, emptyLabel, uploadTitle, uploadDescription, uploadSlot, uploadMeta, }: ModuleSelectorPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function ModuleSelectorPanel({ title, description: _description, status, error, modules, activeModuleId, onSelectModule, emptyLabel, uploadTitle, uploadDescription: _uploadDescription, uploadSlot, uploadMeta: _uploadMeta, supplementarySlot, }: ModuleSelectorPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ModuleSelectorPanel.d.ts.map

package/dist/ModuleSelectorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleSelectorPanel.d.ts","sourceRoot":"","sources":["../src/ModuleSelectorPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,oBAAoB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AA0GF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAA+B,EAC/B,WAAW,EACX,MAAgB,EAChB,KAAK,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,UAAoC,EACpC,WAAsB,EACtB,iBAAiB,EACjB,UAAU,EACV,UAAU,GACX,EAAE,wBAAwB,2CAyC1B"}
+{"version":3,"file":"ModuleSelectorPanel.d.ts","sourceRoot":"","sources":["../src/ModuleSelectorPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,oBAAoB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,CAAC;AAoGF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAA+B,EAC/B,WAAW,EAAE,YAAY,EACzB,MAAgB,EAChB,KAAK,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,UAAoC,EACpC,WAAsB,EACtB,iBAAiB,EAAE,kBAAkB,EACrC,UAAU,EACV,UAAU,EAAE,WAAW,EACvB,iBAAiB,GAClB,EAAE,wBAAwB,2CAuC1B"}

package/dist/ModuleSelectorPanel.js

@@ -1,61 +1,72 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
+import { panelSystemBodyTextCss, panelSystemSectionCss, panelSystemSectionHeadingCss, panelSystemValueCss, } from './PanelSystem.js';
 const PanelRoot = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 22px;
 `;
 const Section = styled.section `
-  border-bottom: 1px solid var(--viewer-ui-color-panel-border-subtle);
-  padding-bottom: 18px;
+  ${panelSystemSectionCss}
 `;
 const SectionHeader = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 `;
 const SectionTitle = styled.div `
-  font-family: var(--viewer-ui-font-display);
-  font-size: 22px;
-  font-weight: 700;
-  text-transform: lowercase;
-  letter-spacing: 0.06em;
-  color: var(--viewer-ui-color-text-strong);
-`;
-const SectionDescription = styled.p `
-  font-size: 11px;
-  text-transform: lowercase;
-  letter-spacing: 0.04em;
-  color: var(--viewer-ui-color-text-muted);
+  ${panelSystemSectionHeadingCss}
 `;
 const StatusBanner = styled.div `
-  padding: 12px 14px;
-  border-radius: 14px;
+  ${panelSystemBodyTextCss}
+  margin-top: 14px;
+  padding: 12px 0;
+  border-radius: 0;
   border: 1px solid var(--viewer-ui-color-panel-border);
+  border-left: 0;
+  border-right: 0;
   background: var(--viewer-ui-color-surface);
-  font-size: 11px;
-  text-transform: lowercase;
   color: var(--viewer-ui-color-text-muted);
 `;
 const ModuleGrid = styled.div `
   display: grid;
   grid-template-columns: 1fr;
-  gap: 10px;
+  gap: 0;
+  margin-top: 14px;
+  max-height: clamp(320px, 48vh, 640px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding-right: 0;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background: color-mix(in srgb, var(--viewer-ui-color-panel-border) 78%, transparent);
+    background-clip: padding-box;
+  }
 `;
 const ModuleButton = styled.button `
-  border-radius: 14px;
-  border: 1px solid
-    ${(props) => (props.$active ? 'var(--viewer-ui-color-button-primary)' : 'var(--viewer-ui-color-panel-border)')};
-  background: ${(props) => props.$active ? 'var(--viewer-ui-color-button-primary)' : 'var(--viewer-ui-color-surface)'};
-  color: ${(props) => props.$active ? 'var(--viewer-ui-color-text-strong)' : 'var(--viewer-ui-color-text-muted)'};
-  padding: 12px 14px;
+  border-radius: 0;
+  border: 0;
+  border-bottom: 1px solid var(--viewer-ui-color-panel-border);
+  background: transparent;
+  color: ${(props) => props.$active ? 'var(--viewer-ui-color-button-primary)' : 'var(--viewer-ui-color-text-strong)'};
+  padding: 9px 0;
   text-align: left;
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 
   &:hover {
-    border-color: var(--viewer-ui-color-button-primary);
     color: var(--viewer-ui-color-text-strong);
   }
 
@@ -65,32 +76,19 @@ const ModuleButton = styled.button `
   }
 `;
 const ModuleTitle = styled.div `
-  font-family: var(--viewer-ui-font-display);
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: lowercase;
-`;
-const ModuleSummary = styled.div `
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--viewer-ui-color-text-muted);
-  text-transform: lowercase;
-  letter-spacing: 0.03em;
+  ${panelSystemValueCss}
 `;
-const UploadSection = styled.section `
+const SupplementarySection = styled.section `
+  ${panelSystemSectionCss}
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
 `;
-const UploadMeta = styled.div `
+const UploadSection = styled.section `
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  font-size: 10px;
-  text-transform: lowercase;
-  color: var(--viewer-ui-color-text-muted);
+  gap: 10px;
 `;
-export default function ModuleSelectorPanel({ title = 'architectural modules', description, status = 'ready', error, modules, activeModuleId, onSelectModule, emptyLabel = 'No modules available.', uploadTitle = 'upload', uploadDescription, uploadSlot, uploadMeta, }) {
-    return (_jsxs(PanelRoot, { children: [_jsxs(Section, { children: [_jsxs(SectionHeader, { children: [_jsx(SectionTitle, { children: title }), description ? _jsx(SectionDescription, { children: description }) : null] }), status !== 'ready' ? (_jsx(StatusBanner, { children: error || (status === 'loading' ? 'Loading module registry…' : 'Module registry unavailable.') })) : modules.length === 0 ? (_jsx(StatusBanner, { children: emptyLabel })) : (_jsx(ModuleGrid, { children: modules.map((module) => (_jsxs(ModuleButton, { type: "button", "$active": module.id === activeModuleId, onClick: () => onSelectModule?.(module.id), disabled: module.disabled, children: [_jsx(ModuleTitle, { children: module.label }), module.summary ? _jsx(ModuleSummary, { children: module.summary }) : null] }, module.id))) }))] }), _jsxs(UploadSection, { children: [_jsxs(SectionHeader, { children: [_jsx(SectionTitle, { children: uploadTitle }), uploadDescription ? _jsx(SectionDescription, { children: uploadDescription }) : null] }), uploadSlot, uploadMeta ? _jsx(UploadMeta, { children: uploadMeta }) : null] })] }));
+export default function ModuleSelectorPanel({ title = 'architectural modules', description: _description, status = 'ready', error, modules, activeModuleId, onSelectModule, emptyLabel = 'No modules available.', uploadTitle = 'upload', uploadDescription: _uploadDescription, uploadSlot, uploadMeta: _uploadMeta, supplementarySlot, }) {
+    return (_jsxs(PanelRoot, { children: [_jsxs(Section, { children: [_jsx(SectionHeader, { children: _jsx(SectionTitle, { children: title }) }), status !== 'ready' ? (_jsx(StatusBanner, { children: error || (status === 'loading' ? 'Loading module registry…' : 'Module registry unavailable.') })) : modules.length === 0 ? (_jsx(StatusBanner, { children: emptyLabel })) : (_jsx(ModuleGrid, { children: modules.map((module) => (_jsx(ModuleButton, { type: "button", "$active": module.id === activeModuleId, onClick: () => onSelectModule?.(module.id), disabled: module.disabled, children: _jsx(ModuleTitle, { children: module.label }) }, module.id))) }))] }), supplementarySlot ? _jsx(SupplementarySection, { children: supplementarySlot }) : null, _jsxs(UploadSection, { children: [_jsx(SectionHeader, { children: _jsx(SectionTitle, { children: uploadTitle }) }), uploadSlot] })] }));
 }

package/dist/PanelSkin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,2FA8kBrB,CAAC"}
+{"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,SAAS,2FAm1DrB,CAAC"}