@treasuryspatial/viewer-ui-kit 0.1.41 → 0.1.56

package/dist/MetricsPanel.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { panelEyebrowCss, panelPillButtonCss, panelSectionTitleCss } from './panelPrimitives.js';
 const Panel = styled.div `
   position: fixed;
   right: 0;
@@ -9,9 +10,9 @@ const Panel = styled.div `
   transform: translateY(-50%) ${(props) => (props.$visible ? 'translateX(0)' : 'translateX(100%)')};
   width: var(--ui-metrics-width);
   height: 70vh;
-  background: rgba(255, 255, 255, 0.96);
-  border-left: 1px solid var(--brand-panel-border);
-  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
+  background: var(--viewer-ui-color-surface);
+  border-left: 1px solid var(--viewer-ui-color-panel-border);
+  box-shadow: none;
   transition: transform 0.3s ease;
   z-index: 40;
   display: flex;
@@ -19,14 +20,12 @@ const Panel = styled.div `
 `;
 const Header = styled.div `
   padding: 16px 20px;
-  border-bottom: 1px solid var(--brand-panel-border);
+  border-bottom: 1px solid var(--viewer-ui-color-panel-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--brand-text-secondary);
+  ${panelEyebrowCss}
+  color: var(--viewer-ui-color-text-muted);
 `;
 const TabRow = styled.div `
   display: flex;
@@ -34,13 +33,10 @@ const TabRow = styled.div `
   padding: 12px 20px 0;
 `;
 const TabButton = styled.button `
-  border-radius: 999px;
-  padding: 6px 12px;
-  font-size: 11px;
-  text-transform: lowercase;
-  border: none;
-  background: ${(props) => (props.$active ? 'var(--brand-primary)' : 'rgba(15, 23, 42, 0.08)')};
-  color: ${(props) => (props.$active ? '#ffffff' : 'var(--brand-text-secondary)')};
+  ${panelPillButtonCss}
+  min-height: 30px;
+  padding: 0 12px;
+  font-size: 10px;
   cursor: pointer;
 `;
 const Body = styled.div `
@@ -57,21 +53,18 @@ const MetricGrid = styled.div `
   gap: 12px;
 `;
 const MetricCard = styled.div `
-  border-radius: 12px;
-  border: 1px solid var(--brand-panel-border);
+  border-radius: 8px;
+  border: 1px solid var(--viewer-ui-color-panel-border-subtle);
   padding: 8px 10px;
-  background: rgba(15, 23, 42, 0.04);
+  background: var(--viewer-ui-color-surface);
 `;
 const MetricLabel = styled.div `
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--brand-text-secondary);
+  ${panelEyebrowCss}
 `;
 const MetricValue = styled.div `
   font-size: 13px;
   font-weight: 600;
-  color: var(--brand-text-primary);
+  color: var(--viewer-ui-color-text-strong);
 `;
 const ToggleWrapper = styled.div `
   position: fixed;
@@ -83,13 +76,10 @@ const ToggleWrapper = styled.div `
 `;
 const Divider = styled.div `
   height: 1px;
-  background: var(--brand-panel-border);
+  background: var(--viewer-ui-color-panel-border-subtle);
 `;
 const SectionTitle = styled.div `
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--brand-text-secondary);
+  ${panelSectionTitleCss}
 `;
 export default function MetricsPanel({ isVisible, onToggle, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, moduleLabel, moduleSummary, renderInputs, }) {
     const [activeTab, setActiveTab] = useState('inputs');
@@ -103,5 +93,5 @@ export default function MetricsPanel({ isVisible, onToggle, distanceToFloor, dis
         { label: 'compass', value: `${compassAngle.toFixed(1)} deg` },
         { label: 'pitch', value: `${pitchAngle.toFixed(1)} deg` },
     ], [distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle]);
-    return (_jsxs(_Fragment, { children: [_jsx(ToggleWrapper, { "$visible": isVisible, children: _jsx("button", { type: "button", onClick: onToggle, className: "collapse-toggle collapse-toggle--edge-right", title: isVisible ? 'Hide metrics' : 'Show metrics', children: isVisible ? (_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" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }) }), _jsxs(Panel, { "$visible": isVisible, children: [_jsxs(Header, { children: [_jsx("span", { children: "analytics" }), _jsx("span", { children: "live" })] }), _jsxs(TabRow, { children: [_jsx(TabButton, { type: "button", "$active": activeTab === 'inputs', onClick: () => setActiveTab('inputs'), children: "inputs" }), _jsx(TabButton, { type: "button", "$active": activeTab === 'outputs', onClick: () => setActiveTab('outputs'), children: "outputs" })] }), _jsxs(Body, { children: [activeTab === 'inputs' ? (_jsxs(_Fragment, { children: [moduleLabel ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "module" }), _jsx("div", { style: { fontSize: '16px', fontWeight: 600, marginTop: 6 }, children: moduleLabel }), moduleSummary ? (_jsx("div", { style: { fontSize: '12px', color: 'var(--brand-text-secondary)', marginTop: 6 }, children: moduleSummary })) : null] })) : null, renderInputs ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "render inputs" }), _jsx("div", { style: { marginTop: 8, fontSize: '12px', color: 'var(--brand-text-secondary)' }, children: renderInputs.presetLabel ? `Preset: ${renderInputs.presetLabel}` : 'Preset: default' }), renderInputs.presetSummary ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: renderInputs.presetSummary })) : null, renderInputs.lightingRig ? (_jsxs("div", { style: { marginTop: 6, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: ["Lighting rig: ", renderInputs.lightingRig] })) : null, typeof renderInputs.toneMappingExposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: ["Exposure: ", renderInputs.toneMappingExposure.toFixed(2)] })) : null, renderInputs.sky ? (_jsxs("div", { style: { marginTop: 8 }, children: [_jsx(SectionTitle, { children: "sky & environment" }), _jsxs("div", { style: { marginTop: 6, fontSize: '12px', color: 'var(--brand-text-secondary)' }, children: [renderInputs.sky.label, renderInputs.sky.mode ? ` · ${renderInputs.sky.mode}` : ''] }), renderInputs.sky.description ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: renderInputs.sky.description })) : null, renderInputs.sky.src ? (_jsx("div", { style: { marginTop: 4, fontSize: '10px', color: 'var(--brand-text-secondary)' }, children: renderInputs.sky.src })) : null, typeof renderInputs.sky.exposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--brand-text-secondary)' }, children: ["Sky exposure: ", renderInputs.sky.exposure.toFixed(2)] })) : null] })) : null] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: "spatial metrics" }), _jsx(MetricGrid, { children: metrics.map((metric) => (_jsxs(MetricCard, { children: [_jsx(MetricLabel, { children: metric.label }), _jsx(MetricValue, { children: metric.value })] }, metric.label))) })] })), _jsx(Divider, {})] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ToggleWrapper, { "$visible": isVisible, children: _jsx("button", { type: "button", onClick: onToggle, className: "collapse-toggle collapse-toggle--edge-right", title: isVisible ? 'Hide metrics' : 'Show metrics', children: isVisible ? (_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" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }) }), _jsxs(Panel, { "$visible": isVisible, children: [_jsxs(Header, { children: [_jsx("span", { children: "analytics" }), _jsx("span", { children: "live" })] }), _jsxs(TabRow, { children: [_jsx(TabButton, { type: "button", "$active": activeTab === 'inputs', onClick: () => setActiveTab('inputs'), children: "inputs" }), _jsx(TabButton, { type: "button", "$active": activeTab === 'outputs', onClick: () => setActiveTab('outputs'), children: "outputs" })] }), _jsxs(Body, { children: [activeTab === 'inputs' ? (_jsxs(_Fragment, { children: [moduleLabel ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "module" }), _jsx("div", { style: { fontSize: '16px', fontWeight: 600, marginTop: 6 }, children: moduleLabel }), moduleSummary ? (_jsx("div", { style: { fontSize: '12px', color: 'var(--viewer-ui-color-text-muted)', marginTop: 6 }, children: moduleSummary })) : null] })) : null, renderInputs ? (_jsxs("div", { children: [_jsx(SectionTitle, { children: "render inputs" }), _jsx("div", { style: { marginTop: 8, fontSize: '12px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.presetLabel ? `Preset: ${renderInputs.presetLabel}` : 'Preset: default' }), renderInputs.presetSummary ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.presetSummary })) : null, renderInputs.lightingRig ? (_jsxs("div", { style: { marginTop: 6, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: ["Lighting rig: ", renderInputs.lightingRig] })) : null, typeof renderInputs.toneMappingExposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: ["Exposure: ", renderInputs.toneMappingExposure.toFixed(2)] })) : null, renderInputs.sky ? (_jsxs("div", { style: { marginTop: 8 }, children: [_jsx(SectionTitle, { children: "sky & environment" }), _jsxs("div", { style: { marginTop: 6, fontSize: '12px', color: 'var(--viewer-ui-color-text-muted)' }, children: [renderInputs.sky.label, renderInputs.sky.mode ? ` · ${renderInputs.sky.mode}` : ''] }), renderInputs.sky.description ? (_jsx("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.sky.description })) : null, renderInputs.sky.src ? (_jsx("div", { style: { marginTop: 4, fontSize: '10px', color: 'var(--viewer-ui-color-text-muted)' }, children: renderInputs.sky.src })) : null, typeof renderInputs.sky.exposure === 'number' ? (_jsxs("div", { style: { marginTop: 4, fontSize: '11px', color: 'var(--viewer-ui-color-text-muted)' }, children: ["Sky exposure: ", renderInputs.sky.exposure.toFixed(2)] })) : null] })) : null] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: "spatial metrics" }), _jsx(MetricGrid, { children: metrics.map((metric) => (_jsxs(MetricCard, { children: [_jsx(MetricLabel, { children: metric.label }), _jsx(MetricValue, { children: metric.value })] }, metric.label))) })] })), _jsx(Divider, {})] })] })] }));
 }

package/dist/MetricsPanelContent.d.ts

@@ -1,21 +1,42 @@
+type MetricsFeedKind = 'runtime' | 'viewer' | 'geometry' | 'render' | 'map';
+type ToolMetricDefinition = {
+    id: string;
+    label: string;
+    summary?: string;
+    source: {
+        kind: MetricsFeedKind;
+        path: string;
+    };
+    format?: 'text' | 'number' | 'count';
+    digits?: number;
+    prefix?: string;
+    suffix?: string;
+    emptyLabel?: string;
+};
+type ToolMetricGroupDefinition = {
+    id: string;
+    label: string;
+    summary?: string;
+    metrics: ToolMetricDefinition[];
+};
+type ToolMetricsDefinition = {
+    title?: string;
+    summary?: string;
+    groups: ToolMetricGroupDefinition[];
+};
+type ToolMetricsFeeds = Partial<Record<MetricsFeedKind, Record<string, unknown>>>;
 interface MetricsPanelContentProps {
-    cameraMetrics: {
-        position: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        heightAboveFloor: number;
-    } | null;
-    distanceToFloor: number;
-    distanceToCeiling: number;
-    distanceToNorth: number;
-    distanceToSouth: number;
-    distanceToEast: number;
-    distanceToWest: number;
-    compassAngle: number;
-    pitchAngle: number;
+    modeId: string;
+    modeLabel: string;
+    moduleLabel?: string | null;
+    moduleSummary?: string | null;
+    promptPackLabel?: string | null;
+    promptPackDescription?: string | null;
+    renderCount?: number;
+    imageSetCount?: number;
+    toolMetrics?: ToolMetricsDefinition | null;
+    feeds?: ToolMetricsFeeds | null;
 }
-export default function MetricsPanelContent({ cameraMetrics, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, }: MetricsPanelContentProps): import("react/jsx-runtime").JSX.Element;
+export default function MetricsPanelContent({ modeId, modeLabel, moduleLabel, moduleSummary, promptPackLabel, promptPackDescription, renderCount, imageSetCount, toolMetrics, feeds, }: MetricsPanelContentProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MetricsPanelContent.d.ts.map

package/dist/MetricsPanelContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,aAAa,EAAE;QAAE,QAAQ,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClG,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAqED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,wBAAwB,2CAyD1B"}
+{"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE5E,KAAK,oBAAoB,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,oBAAoB,EAAE,CAAC;CACjC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,yBAAyB,EAAE,CAAC;CACrC,CAAC;AAEF,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AAElF,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAgED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,SAAS,EACT,WAAW,EACX,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,WAAe,EACf,aAAiB,EACjB,WAAW,EACX,KAAK,GACN,EAAE,wBAAwB,2CAwJ1B"}

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"}