@principal-ai/subsystems-react 0.17.0

package/dist/components/WorkflowSequenceDiagram.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Workflow Sequence Diagram
+ *
+ * A wrapper around SequenceDiagramRenderer that handles conversion from
+ * workflow scenarios to sequence diagram format, following the graph-to-sequence
+ * model where participants are scopes and events are move/transform operations.
+ */
+/// <reference types="react" />
+import type { WorkflowScenario, Canvas, ExtendedCanvas } from '@principal-ai/subsystems-core';
+import type { UseSequenceLayoutOptions } from '../hooks/useSequenceLayout';
+/**
+ * Props for WorkflowSequenceDiagram
+ */
+export interface WorkflowSequenceDiagramProps {
+    /** Workflow scenario to visualize */
+    scenario: WorkflowScenario;
+    /** Optional canvas for extracting scope metadata from OTEL nodes */
+    canvas?: Canvas | ExtendedCanvas | null;
+    /** Optional height for the diagram */
+    height?: number | string;
+    /** Optional width for the diagram */
+    width?: number | string;
+    /** Layout options for the sequence diagram */
+    layoutOptions?: UseSequenceLayoutOptions;
+    /** Whether to show controls */
+    showControls?: boolean;
+    /** Whether to show background grid */
+    showBackground?: boolean;
+    /** Optional class name */
+    className?: string;
+    /** Callback when an event node is clicked - receives the event index (0-based) */
+    onEventIndexChange?: (eventIndex: number) => void;
+    /** Currently selected event index (0-based) for visual highlighting */
+    selectedEventIndex?: number;
+    /** Whether to show event labels on nodes (default: false, labels already shown on edges) */
+    showEventLabels?: boolean;
+    /**
+     * When true, render the diagram chrome (canvas background, swimlane fills,
+     * header backgrounds) as transparent so the diagram can be composited over
+     * an arbitrary backdrop. Defaults to `false`.
+     */
+    transparent?: boolean;
+}
+/**
+ * WorkflowSequenceDiagram Component
+ *
+ * Renders a workflow scenario as a sequence diagram, automatically extracting
+ * participant scopes from the canvas and distinguishing between move events
+ * (cross-participant communication) and transform events (internal processing).
+ *
+ * @example
+ * ```tsx
+ * <WorkflowSequenceDiagram
+ *   scenario={workflowScenario}
+ *   canvas={otelCanvas}
+ *   height={600}
+ *   layoutOptions={{ eventSpacing: 80 }}
+ * />
+ * ```
+ */
+export declare function WorkflowSequenceDiagram({ scenario, canvas, height, width, layoutOptions, showControls, showBackground, className, onEventIndexChange, selectedEventIndex, showEventLabels, // Default to false - labels already on edges
+transparent, }: WorkflowSequenceDiagramProps): import("react").JSX.Element;
+//# sourceMappingURL=WorkflowSequenceDiagram.d.ts.map

package/dist/components/WorkflowSequenceDiagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowSequenceDiagram.d.ts","sourceRoot":"","sources":["../../src/components/WorkflowSequenceDiagram.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG9F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,qCAAqC;IACrC,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;IAExC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAElD,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,4FAA4F;IAC5F,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsHD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,MAAM,EACN,MAAY,EACZ,KAAc,EACd,aAAa,EACb,YAAmB,EACnB,cAAsB,EACtB,SAAS,EACT,kBAAkB,EAClB,kBAAkB,EAClB,eAAuB,EAAE,6CAA6C;AACtE,WAAmB,GACpB,EAAE,4BAA4B,+BAgE9B"}

package/dist/components/WorkflowSequenceDiagram.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Workflow Sequence Diagram
+ *
+ * A wrapper around SequenceDiagramRenderer that handles conversion from
+ * workflow scenarios to sequence diagram format, following the graph-to-sequence
+ * model where participants are scopes and events are move/transform operations.
+ */
+import { useMemo, useCallback } from 'react';
+import { SequenceDiagramRenderer } from './SequenceDiagramRenderer';
+/**
+ * Type guard to check if a node is an OTEL event node
+ */
+function isOtelEventNode(node) {
+    return node?.type === 'otel-event' && node?.event?.name;
+}
+/**
+ * Type guard to check if a node is an OTEL participant node
+ */
+function isOtelParticipantNode(node) {
+    return node?.type === 'otel-participant' && node?.participant?.name;
+}
+/**
+ * Convert workflow scenario to sequence diagram format
+ */
+function convertWorkflowToSequence(scenario, canvas) {
+    // Extract event names from scenario template
+    const templateEvents = scenario.template.events || {};
+    const eventNames = Object.keys(templateEvents);
+    if (eventNames.length === 0) {
+        return { events: [], edges: [] };
+    }
+    // Build maps from canvas metadata
+    const eventToScopeMap = new Map();
+    const eventToLabelMap = new Map();
+    const eventToMoveEventMap = new Map();
+    if (canvas?.nodes) {
+        for (const node of canvas.nodes) {
+            // Type guard narrowing - we know the structure but Canvas type doesn't include OTEL specifics
+            const nodeData = node;
+            // Handle OTEL event nodes
+            if (isOtelEventNode(nodeData)) {
+                const eventName = nodeData.event.name;
+                if (nodeData.otel?.scope) {
+                    eventToScopeMap.set(eventName, nodeData.otel.scope);
+                }
+                if (nodeData.label) {
+                    eventToLabelMap.set(eventName, nodeData.label);
+                }
+            }
+            // Handle OTEL participant nodes (participant-based model)
+            if (isOtelParticipantNode(nodeData)) {
+                const scope = nodeData.participant.scope || nodeData.participant.name;
+                // Mark transform events (internal to participant)
+                if (nodeData.transformEvents) {
+                    for (const transformEvent of nodeData.transformEvents) {
+                        eventToScopeMap.set(transformEvent.name, scope);
+                        eventToMoveEventMap.set(transformEvent.name, false);
+                    }
+                }
+            }
+        }
+    }
+    // Convert to SequenceEvent format
+    const events = eventNames.map((eventName, index) => {
+        const canvasScope = eventToScopeMap.get(eventName);
+        const label = eventToLabelMap.get(eventName) || eventName.split('.').pop() || eventName;
+        // Determine if this is a move event
+        // Default to true unless explicitly marked as transform event in participant node
+        const isMoveEvent = eventToMoveEventMap.get(eventName) ?? true;
+        // When the canvas provides a scope, prefix it so the event lands in that
+        // participant's lane (the layout uses the first dotted segment as the
+        // default lane). Otherwise, use the event name as-is.
+        const name = canvasScope ? `${canvasScope}.${eventName}` : eventName;
+        const participant = canvasScope ?? eventName.split('.')[0] ?? eventName;
+        return {
+            id: `event-${index}`,
+            name,
+            label,
+            moveEvent: isMoveEvent,
+            participant,
+        };
+    });
+    // Create sequential edges
+    const edges = [];
+    for (let i = 0; i < events.length - 1; i++) {
+        edges.push({
+            id: `edge-${i}`,
+            fromEvent: events[i].id,
+            toEvent: events[i + 1].id,
+        });
+    }
+    return { events, edges };
+}
+/**
+ * WorkflowSequenceDiagram Component
+ *
+ * Renders a workflow scenario as a sequence diagram, automatically extracting
+ * participant scopes from the canvas and distinguishing between move events
+ * (cross-participant communication) and transform events (internal processing).
+ *
+ * @example
+ * ```tsx
+ * <WorkflowSequenceDiagram
+ *   scenario={workflowScenario}
+ *   canvas={otelCanvas}
+ *   height={600}
+ *   layoutOptions={{ eventSpacing: 80 }}
+ * />
+ * ```
+ */
+export function WorkflowSequenceDiagram({ scenario, canvas, height = 600, width = '100%', layoutOptions, showControls = true, showBackground = false, className, onEventIndexChange, selectedEventIndex, showEventLabels = false, // Default to false - labels already on edges
+transparent = false, }) {
+    // Convert workflow to sequence format
+    const { events, edges } = useMemo(() => convertWorkflowToSequence(scenario, canvas), [scenario, canvas]);
+    // Handle node clicks - map sequence node ID back to event index
+    const handleNodeClick = useCallback((nodeId) => {
+        if (!onEventIndexChange)
+            return;
+        // Node IDs are in format "event-{index}"
+        const match = nodeId.match(/^event-(\d+)$/);
+        if (match) {
+            const eventIndex = parseInt(match[1], 10);
+            onEventIndexChange(eventIndex);
+        }
+    }, [onEventIndexChange]);
+    // Convert selected event index to node ID
+    const selectedNodeId = useMemo(() => {
+        if (selectedEventIndex === undefined || selectedEventIndex === null)
+            return undefined;
+        return `event-${selectedEventIndex}`;
+    }, [selectedEventIndex]);
+    // If no events, show empty state
+    if (events.length === 0) {
+        return (_jsx("div", { className: className, style: {
+                width,
+                height,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#888',
+            }, children: "No events in workflow" }));
+    }
+    // Render sequence diagram
+    return (_jsx(SequenceDiagramRenderer, { events: events, edges: edges, height: height, width: width, layoutOptions: layoutOptions, showControls: showControls, showBackground: showBackground, className: className, onNodeClick: onEventIndexChange ? handleNodeClick : undefined, selectedNodeId: selectedNodeId, showEventLabels: showEventLabels, transparent: transparent }));
+}
+//# sourceMappingURL=WorkflowSequenceDiagram.js.map

package/dist/components/WorkflowSequenceDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowSequenceDiagram.js","sourceRoot":"","sources":["../../src/components/WorkflowSequenceDiagram.tsx"],"names":[],"mappings":"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"}

package/dist/components/dashboard/DashboardRenderer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DashboardRenderer
+ *
+ * Main component for rendering a dashboard from a DashboardDefinition.
+ * Takes a dashboard definition JSON and a data provider, renders all metrics.
+ */
+/// <reference types="react" />
+import type { DashboardRendererProps } from './types';
+export declare function DashboardRenderer({ dashboard, dataProvider, timeRange: controlledTimeRange, onTimeRangeChange, refreshInterval: controlledRefreshInterval, onRefreshIntervalChange, timeRangeConfig, onMetricClick, onSourceClick, }: DashboardRendererProps): import("react").JSX.Element;
+//# sourceMappingURL=DashboardRenderer.d.ts.map

package/dist/components/dashboard/DashboardRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAIH,OAAO,KAAK,EAAE,sBAAsB,EAA4D,MAAM,SAAS,CAAC;AAkChH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,YAAY,EACZ,SAAS,EAAE,mBAAmB,EAC9B,iBAAiB,EACjB,eAAe,EAAE,yBAAyB,EAC1C,uBAAuB,EACvB,eAAe,EACf,aAAa,EACb,aAAa,GACd,EAAE,sBAAsB,+BAuQxB"}

package/dist/components/dashboard/DashboardRenderer.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DashboardRenderer
+ *
+ * Main component for rendering a dashboard from a DashboardDefinition.
+ * Takes a dashboard definition JSON and a data provider, renders all metrics.
+ */
+import { useMemo, useState, useEffect } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { MetricPanel } from './MetricPanel';
+import { MockDataProvider } from './MockDataProvider';
+import { TimeRangeSelector } from './components';
+function useBreakpoint(breakpoints) {
+    const mobileBreak = breakpoints?.mobile ?? 768;
+    const tabletBreak = breakpoints?.tablet ?? 1024;
+    const [breakpoint, setBreakpoint] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'desktop';
+        const width = window.innerWidth;
+        if (width < mobileBreak)
+            return 'mobile';
+        if (width < tabletBreak)
+            return 'tablet';
+        return 'desktop';
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            const width = window.innerWidth;
+            if (width < mobileBreak)
+                setBreakpoint('mobile');
+            else if (width < tabletBreak)
+                setBreakpoint('tablet');
+            else
+                setBreakpoint('desktop');
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [mobileBreak, tabletBreak]);
+    return breakpoint;
+}
+export function DashboardRenderer({ dashboard, dataProvider, timeRange: controlledTimeRange, onTimeRangeChange, refreshInterval: controlledRefreshInterval, onRefreshIntervalChange, timeRangeConfig, onMetricClick, onSourceClick, }) {
+    const { theme } = useTheme();
+    const breakpoint = useBreakpoint(dashboard.layout.breakpoints);
+    // Internal state for uncontrolled time range
+    const [internalTimeRange, setInternalTimeRange] = useState({
+        preset: timeRangeConfig?.defaultRange ?? 'last_1h',
+    });
+    const [internalRefreshInterval, setInternalRefreshInterval] = useState(timeRangeConfig?.defaultRefresh ?? 'off');
+    // Use controlled or internal state
+    const timeRange = controlledTimeRange ?? internalTimeRange;
+    const refreshInterval = controlledRefreshInterval ?? internalRefreshInterval;
+    const handleTimeRangeChange = (range) => {
+        if (onTimeRangeChange) {
+            onTimeRangeChange(range);
+        }
+        else {
+            setInternalTimeRange(range);
+        }
+    };
+    const handleRefreshIntervalChange = (interval) => {
+        if (onRefreshIntervalChange) {
+            onRefreshIntervalChange(interval);
+        }
+        else {
+            setInternalRefreshInterval(interval);
+        }
+    };
+    // Grid configuration
+    const gridColumns = dashboard.layout.columns ?? 12;
+    const gridGap = dashboard.layout.gap ?? 16;
+    // Use provided data provider or create a mock one
+    const data = useMemo(() => {
+        const provider = dataProvider || new MockDataProvider(dashboard);
+        return provider.getAll();
+    }, [dashboard, dataProvider]);
+    // Build a map of metric ID → metric definition for quick lookup
+    const metricsMap = useMemo(() => {
+        const map = new Map();
+        for (const metric of dashboard.metrics) {
+            map.set(metric.id, metric);
+        }
+        return map;
+    }, [dashboard.metrics]);
+    const handleSourceClick = (source) => {
+        if (onSourceClick) {
+            onSourceClick(source);
+        }
+        else {
+            // Default behavior: log to console
+            console.log('Source clicked:', source);
+        }
+    };
+    // Get span for current breakpoint
+    const getSpan = (placement, totalPanels) => {
+        // Mobile defaults to full width
+        if (breakpoint === 'mobile') {
+            return placement.spanMobile ?? gridColumns;
+        }
+        // Tablet uses spanTablet or falls back to span
+        if (breakpoint === 'tablet') {
+            return placement.spanTablet ?? placement.span ?? Math.floor(gridColumns / Math.min(totalPanels, 2));
+        }
+        // Desktop uses spanDesktop or span or auto-calculate
+        return placement.spanDesktop ?? placement.span ?? Math.floor(gridColumns / Math.min(totalPanels, 3));
+    };
+    return (_jsxs("div", { style: {
+            backgroundColor: theme.colors.background,
+            color: theme.colors.text,
+            padding: theme.space?.[4] || 24,
+            minHeight: '100%',
+            fontFamily: theme.fonts.body,
+        }, children: [_jsxs("div", { style: { marginBottom: theme.space?.[4] || 24 }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'flex-start',
+                            gap: theme.space?.[3] || 16,
+                            flexWrap: 'wrap',
+                        }, children: [_jsx("h1", { style: {
+                                    fontSize: theme.fontSizes[4],
+                                    fontWeight: theme.fontWeights.semibold,
+                                    fontFamily: theme.fonts.heading,
+                                    margin: 0,
+                                    color: theme.colors.text,
+                                }, children: dashboard.name }), _jsx(TimeRangeSelector, { timeRange: timeRange, onTimeRangeChange: handleTimeRangeChange, refreshInterval: refreshInterval, onRefreshIntervalChange: handleRefreshIntervalChange, config: timeRangeConfig })] }), dashboard.description && (_jsx("p", { style: {
+                            fontSize: theme.fontSizes[1],
+                            color: theme.colors.textSecondary,
+                            margin: 0,
+                            marginTop: theme.space?.[2] || 8,
+                            marginBottom: theme.space?.[3] || 12,
+                            lineHeight: theme.lineHeights.body,
+                        }, children: dashboard.description })), dashboard.externalLinks && Object.keys(dashboard.externalLinks).length > 0 && (_jsx("div", { style: { display: 'flex', gap: theme.space?.[3] || 12 }, children: Object.entries(dashboard.externalLinks).map(([name, url]) => (url && (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", style: {
+                                fontSize: theme.fontSizes[0],
+                                color: theme.colors.primary || theme.colors.accent,
+                                textDecoration: 'none',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 4,
+                            }, children: [_jsxs("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), _jsx("polyline", { points: "15 3 21 3 21 9" }), _jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] }), name] }, name)))) }))] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.space?.[4] || 24 }, children: dashboard.layout.rows.map((row, rowIndex) => (_jsxs("div", { children: [row.title && (_jsx("h2", { style: {
+                                fontSize: theme.fontSizes[2],
+                                fontWeight: theme.fontWeights.medium,
+                                fontFamily: theme.fonts.heading,
+                                margin: 0,
+                                marginBottom: theme.space?.[3] || 12,
+                                color: theme.colors.text,
+                                paddingBottom: theme.space?.[2] || 8,
+                                borderBottom: `1px solid ${theme.colors.border}`,
+                            }, children: row.title })), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+                                gap: gridGap,
+                            }, children: row.panels.map((panel) => {
+                                const span = getSpan(panel, row.panels.length);
+                                const metric = metricsMap.get(panel.id);
+                                const panelStyle = {
+                                    gridColumn: `span ${span}`,
+                                    minHeight: panel.minHeight,
+                                    height: panel.height === 'auto' ? 'auto' : panel.height,
+                                };
+                                if (!metric) {
+                                    return (_jsxs("div", { style: {
+                                            ...panelStyle,
+                                            backgroundColor: theme.colors.surface || theme.colors.background,
+                                            border: `1px solid ${theme.colors.error}`,
+                                            borderRadius: theme.radii?.[2] || 8,
+                                            padding: theme.space?.[3] || 16,
+                                            color: theme.colors.error,
+                                            fontSize: theme.fontSizes[1],
+                                        }, children: ["Metric not found: ", panel.id] }, panel.id));
+                                }
+                                return (_jsx("div", { style: panelStyle, children: _jsx(MetricPanel, { metric: metric, data: data[panel.id] || { error: 'No data' }, onMetricClick: onMetricClick, onSourceClick: handleSourceClick }) }, panel.id));
+                            }) })] }, rowIndex))) }), dashboard.owner && (_jsxs("div", { style: {
+                    marginTop: theme.space?.[5] || 32,
+                    paddingTop: theme.space?.[3] || 16,
+                    borderTop: `1px solid ${theme.colors.border}`,
+                    fontSize: theme.fontSizes[0],
+                    color: theme.colors.textSecondary,
+                }, children: ["Owner: ", dashboard.owner] }))] }));
+}
+//# sourceMappingURL=DashboardRenderer.js.map

package/dist/components/dashboard/DashboardRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardRenderer.js","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/components/dashboard/MetricPanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * MetricPanel
+ *
+ * Wrapper component that determines which visualization to render
+ * based on the metric definition and data.
+ */
+import React from 'react';
+import type { MetricPanelProps } from './types';
+export declare function MetricPanel({ metric, data, onMetricClick, onSourceClick, }: MetricPanelProps): React.JSX.Element;
+//# sourceMappingURL=MetricPanel.d.ts.map

package/dist/components/dashboard/MetricPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricPanel.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MetricPanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAGjB,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,IAAI,EACJ,aAAa,EACb,aAAa,GACd,EAAE,gBAAgB,qBAwFlB"}

package/dist/components/dashboard/MetricPanel.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@principal-ade/industry-theme';
+import { MetricCard, LineChart, BarChart, SourceLink } from './components';
+export function MetricPanel({ metric, data, onMetricClick, onSourceClick, }) {
+    const { theme } = useTheme();
+    // Determine which component to use
+    const componentType = getComponentType(metric, data);
+    // Render loading state
+    if (data.loading) {
+        return (_jsx("div", { style: {
+                backgroundColor: theme.colors.surface || theme.colors.background,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: theme.radii?.[2] || 8,
+                padding: theme.space?.[3] || 16,
+                minHeight: 100,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontFamily: theme.fonts.body,
+            }, children: _jsx("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[1] }, children: "Loading..." }) }));
+    }
+    // Render error state
+    if (data.error) {
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { style: {
+                        backgroundColor: theme.colors.surface || theme.colors.background,
+                        border: `1px solid ${theme.colors.error}`,
+                        borderRadius: theme.radii?.[2] || 8,
+                        padding: theme.space?.[3] || 16,
+                        fontFamily: theme.fonts.body,
+                    }, children: [_jsx("div", { style: {
+                                color: theme.colors.error,
+                                marginBottom: theme.space?.[2] || 8,
+                                fontSize: theme.fontSizes[1],
+                                fontWeight: theme.fontWeights.medium,
+                            }, children: metric.name }), _jsx("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[0] }, children: data.error })] }), metric.sources && metric.sources.length > 0 && onSourceClick && (_jsx("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap' }, children: metric.sources.map((source, i) => (_jsx(SourceLink, { source: source, onClick: onSourceClick }, i))) }))] }));
+    }
+    const handleClick = () => {
+        onMetricClick?.(metric.id);
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [renderComponent(componentType, metric, data, handleClick), metric.sources && metric.sources.length > 0 && onSourceClick && (_jsx("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap' }, children: metric.sources.map((source, i) => (_jsx(SourceLink, { source: source, onClick: onSourceClick }, i))) }))] }));
+}
+/**
+ * Determine which component to render based on metric definition and data
+ */
+function getComponentType(metric, data) {
+    // Explicit display hint takes precedence
+    if (metric.display?.component) {
+        return metric.display.component;
+    }
+    const { type, query } = metric;
+    // Time series data → chart
+    if (data.series && data.series.length > 0) {
+        if (query.groupBy && query.groupBy.length > 0) {
+            return 'StackedBarChart';
+        }
+        return 'LineChart';
+    }
+    // Histogram data
+    if (data.histogram) {
+        return 'Histogram';
+    }
+    // Counter with time grouping → line/bar chart (but no series data yet)
+    if (type === 'counter' && query.timeGroup) {
+        return query.groupBy?.length ? 'BarChart' : 'LineChart';
+    }
+    // Gauge (percentage) → gauge or metric card
+    if (type === 'gauge') {
+        return metric.thresholds ? 'GaugeChart' : 'MetricCard';
+    }
+    // Default to metric card
+    return 'MetricCard';
+}
+/**
+ * Render the appropriate component
+ */
+function renderComponent(componentType, metric, data, onClick) {
+    switch (componentType) {
+        case 'MetricCard':
+        case 'GaugeChart': // Use MetricCard for now, can add GaugeChart later
+            return (_jsx(MetricCard, { title: metric.name, value: data.current ?? 0, unit: metric.unit, description: metric.description, trend: data.trend, changePercent: data.changePercent, showTrend: metric.display?.showTrend ?? true, showSparkline: metric.display?.showSparkline, sparklineData: data.series, thresholds: metric.thresholds, size: metric.display?.size || 'medium', onClick: onClick }));
+        case 'LineChart':
+            return (_jsx(LineChart, { title: metric.name, data: data.series || [], xKey: "date", yKey: "value", unit: metric.unit, onClick: onClick }));
+        case 'BarChart':
+        case 'StackedBarChart':
+            // Extract series keys from data
+            const series = data.series && data.series.length > 0
+                ? Object.keys(data.series[0]).filter(k => k !== 'date')
+                : metric.query.groupBy || [];
+            return (_jsx(BarChart, { title: metric.name, data: data.series || [], xKey: "date", series: series, stacked: componentType === 'StackedBarChart', unit: metric.unit, onClick: onClick }));
+        case 'Histogram':
+            // TODO: Implement Histogram component
+            return (_jsx(MetricCard, { title: metric.name, value: "Histogram (TODO)", description: metric.description, onClick: onClick }));
+        case 'PieChart':
+            // TODO: Implement PieChart component
+            return (_jsx(MetricCard, { title: metric.name, value: "PieChart (TODO)", description: metric.description, onClick: onClick }));
+        case 'DataTable':
+            // TODO: Implement DataTable component
+            return (_jsx(MetricCard, { title: metric.name, value: "DataTable (TODO)", description: metric.description, onClick: onClick }));
+        default:
+            return (_jsx(MetricCard, { title: metric.name, value: data.current ?? 0, unit: metric.unit, onClick: onClick }));
+    }
+}
+//# sourceMappingURL=MetricPanel.js.map

package/dist/components/dashboard/MetricPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricPanel.js","sourceRoot":"","sources":["../../../src/components/dashboard/MetricPanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/dashboard/MockDataProvider.d.ts

@@ -0,0 +1,30 @@
+/**
+ * MockDataProvider
+ *
+ * Provides mock data for dashboard metrics during prototyping.
+ * Can use inline _mockData from the dashboard definition or generate realistic data.
+ */
+import type { DashboardDefinition, MetricData, DataProvider } from './types';
+export declare class MockDataProvider implements DataProvider {
+    private data;
+    constructor(dashboard: DashboardDefinition);
+    get(metricId: string): MetricData;
+    getAll(): Record<string, MetricData>;
+    private resolveData;
+    private transformMockData;
+    private generateData;
+    private generateTimeSeries;
+    private generateGaugeData;
+    private generateCounterData;
+    private generateHistogramData;
+    private getPointCount;
+    private getBaseValue;
+    private generateDates;
+    private getWeekNumber;
+    private getGroupValues;
+}
+/**
+ * Create a mock data provider from a dashboard definition
+ */
+export declare function createMockDataProvider(dashboard: DashboardDefinition): DataProvider;
+//# sourceMappingURL=MockDataProvider.d.ts.map

package/dist/components/dashboard/MockDataProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockDataProvider.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MockDataProvider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,mBAAmB,EAEnB,UAAU,EACV,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,qBAAa,gBAAiB,YAAW,YAAY;IACnD,OAAO,CAAC,IAAI,CAAkC;gBAElC,SAAS,EAAE,mBAAmB;IAM1C,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU;IAIjC,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC;IAIpC,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,iBAAiB;IA4CzB,OAAO,CAAC,YAAY;IA4BpB,OAAO,CAAC,kBAAkB;IAqC1B,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,qBAAqB;IAqC7B,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAqCrB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;CAcvB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,mBAAmB,GAAG,YAAY,CAEnF"}