@cere/cere-design-system 0.0.21 → 0.0.23

package/dist/index.js

@@ -137,11 +137,14 @@ __export(index_exports, {
   StepLabel: () => StepLabel,
   Stepper: () => Stepper,
   StorageAppIcon: () => StorageAppIcon,
+  SummaryStats: () => SummaryStats,
   Switch: () => Switch,
   Tab: () => Tab,
   Table: () => Table,
   TableHeader: () => TableHeader,
   TextField: () => TextField,
+  TimeRangeSelect: () => TimeRangeSelect,
+  TimeSeriesGraph: () => TimeSeriesGraph,
   ToggleButton: () => ToggleButton,
   ToggleButtonGroup: () => ToggleButtonGroup,
   Toolbar: () => import_material37.Toolbar,
@@ -7390,13 +7393,312 @@ var MetricsChart = ({ history = [] }) => {
   ] });
 };
 
-// src/components/third-party/FlowEditor.tsx
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
 var import_react33 = require("react");
-var import_reactflow = __toESM(require("reactflow"));
+var import_material67 = require("@mui/material");
+var import_x_charts3 = require("@mui/x-charts");
+var import_date_fns3 = require("date-fns");
+
+// src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
 var import_material65 = require("@mui/material");
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  import_material65.TextField,
+  {
+    select: true,
+    size: "small",
+    value: value ?? (options2.length > 0 ? options2[0].value : ""),
+    onChange: (e) => onChange?.(e.target.value),
+    "aria-label": "Time range selector",
+    sx: { minWidth: 120 },
+    children: options2.map((option) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_material65.MenuItem, { value: option.value, children: option.label }, option.value))
+  }
+);
+
+// src/components/charts/TimeSeriesGraph/SummaryStats.tsx
+var import_material66 = require("@mui/material");
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var formatSummaryValue = (value, unit) => {
+  const displayValue = typeof value === "number" ? value.toLocaleString() : value;
+  return unit ? `${displayValue} ${unit}` : displayValue;
+};
+var SummaryStats = ({ items }) => {
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    import_material66.Stack,
+    {
+      direction: "row",
+      spacing: 3,
+      padding: 2,
+      flexWrap: "wrap",
+      useFlexGap: true,
+      role: "list",
+      "aria-label": "Summary statistics",
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+        import_material66.Stack,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 1,
+          role: "listitem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Typography, { variant: "body2", color: "text.secondary", children: item.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Typography, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+};
+
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var ChartContainer = (0, import_material67.styled)(import_material67.Box)({
+  position: "relative",
+  height: 320
+});
+var LoadingOverlay = (0, import_material67.styled)(import_material67.Box)(({ theme: theme2 }) => ({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.7)",
+  zIndex: 1,
+  borderRadius: theme2.shape.borderRadius
+}));
+var LegendDot = (0, import_material67.styled)(import_material67.Box, {
+  shouldForwardProp: (prop) => prop !== "dotColor"
+})(({ dotColor }) => ({
+  width: 14,
+  height: 14,
+  borderRadius: 4,
+  backgroundColor: dotColor,
+  flexShrink: 0
+}));
+var formatYAxisValue = (value) => {
+  const absValue = Math.abs(value);
+  if (absValue >= 1e9) {
+    return `${(value / 1e9).toFixed(absValue % 1e9 === 0 ? 0 : 1)}B`;
+  }
+  if (absValue >= 1e6) {
+    return `${(value / 1e6).toFixed(absValue % 1e6 === 0 ? 0 : 1)}M`;
+  }
+  if (absValue >= 1e3) {
+    return `${(value / 1e3).toFixed(absValue % 1e3 === 0 ? 0 : 1)}K`;
+  }
+  return String(value);
+};
+var TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1e3;
+var inferXAxisFormat = (min, max) => {
+  if (!min || !max) return "do MMM";
+  const spanMs = max.getTime() - min.getTime();
+  return spanMs <= TWENTY_FOUR_HOURS_MS ? "HH:mm" : "do MMM";
+};
+var buildDataset = (series, hiddenSeries) => {
+  const timestampMap = /* @__PURE__ */ new Map();
+  series.forEach((s) => {
+    if (hiddenSeries.has(s.name)) return;
+    s.data.forEach((dp) => {
+      const ts = dp.timestamp.getTime();
+      if (!timestampMap.has(ts)) {
+        timestampMap.set(ts, { timestamp: dp.timestamp });
+      }
+      timestampMap.get(ts)[s.name] = dp.value;
+    });
+  });
+  return Array.from(timestampMap.values()).sort(
+    (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+  );
+};
+var TimeSeriesGraph = ({
+  title,
+  series,
+  timeRangeOptions,
+  selectedTimeRange,
+  onTimeRangeChange,
+  summaryItems,
+  showSummary = true,
+  headerAction,
+  loading = false,
+  xAxisFormat
+}) => {
+  const theme2 = (0, import_material67.useTheme)();
+  const [hiddenSeries, setHiddenSeries] = (0, import_react33.useState)(/* @__PURE__ */ new Set());
+  const dataset = (0, import_react33.useMemo)(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
+  const visibleSeries = (0, import_react33.useMemo)(
+    () => series.filter((s) => !hiddenSeries.has(s.name)),
+    [series, hiddenSeries]
+  );
+  const chartColors = (0, import_react33.useMemo)(() => visibleSeries.map((s) => s.color), [visibleSeries]);
+  const handleLegendToggle = (0, import_react33.useCallback)((seriesName) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(seriesName)) {
+        next.delete(seriesName);
+      } else {
+        next.add(seriesName);
+      }
+      return next;
+    });
+  }, []);
+  const timeBounds = (0, import_react33.useMemo)(() => {
+    if (dataset.length === 0) return { min: void 0, max: void 0 };
+    const timestamps = dataset.map((row) => row.timestamp.getTime());
+    return {
+      min: new Date(Math.min(...timestamps)),
+      max: new Date(Math.max(...timestamps))
+    };
+  }, [dataset]);
+  const resolvedXAxisFormat = (0, import_react33.useMemo)(
+    () => xAxisFormat ?? inferXAxisFormat(timeBounds.min, timeBounds.max),
+    [xAxisFormat, timeBounds.min, timeBounds.max]
+  );
+  const hasData = dataset.length > 0;
+  const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;
+  const headerActionElement = /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_material67.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+    headerAction,
+    timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      TimeRangeSelect,
+      {
+        options: timeRangeOptions,
+        value: selectedTimeRange,
+        onChange: onTimeRangeChange
+      }
+    )
+  ] });
+  const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+    import_material67.Card,
+    {
+      "aria-label": title ? `Line chart showing ${title}` : "Line chart",
+      role: "figure",
+      children: [
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          import_material67.CardHeader,
+          {
+            title,
+            titleTypographyProps: {
+              variant: "subtitle1",
+              fontWeight: 500
+            },
+            action: headerActionElement
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_material67.CardMedia, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(ChartContainer, { children: [
+            loading && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_material67.CircularProgress, { size: 40 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+              import_x_charts3.LineChart,
+              {
+                dataset,
+                axisHighlight: { x: "line", y: "none" },
+                grid: { horizontal: true, vertical: false },
+                margin: { top: 10, right: 20, bottom: 40, left: 50 },
+                colors: chartColors.length > 0 ? chartColors : [theme2.palette.primary.main],
+                slots: {
+                  noDataOverlay: () => null
+                },
+                tooltip: { trigger: hasData ? "axis" : "none" },
+                yAxis: [
+                  {
+                    disableLine: true,
+                    disableTicks: true,
+                    min: hasData ? void 0 : 0,
+                    max: hasData ? void 0 : 100,
+                    tickNumber: hasData ? void 0 : 5,
+                    valueFormatter: (value) => formatYAxisValue(value || 0),
+                    tickLabelStyle: {
+                      fontSize: 10
+                    }
+                  }
+                ],
+                xAxis: [
+                  {
+                    dataKey: "timestamp",
+                    scaleType: "time",
+                    min: timeBounds.min,
+                    max: timeBounds.max,
+                    disableLine: true,
+                    disableTicks: true,
+                    valueFormatter: (date) => (0, import_date_fns3.format)(date, resolvedXAxisFormat),
+                    tickLabelStyle: {
+                      fontSize: 10
+                    }
+                  }
+                ],
+                series: visibleSeries.map((s) => ({
+                  curve: "linear",
+                  dataKey: s.name,
+                  label: s.name,
+                  showMark: false,
+                  connectNulls: false
+                })),
+                slotProps: {
+                  legend: { hidden: true }
+                }
+              }
+            )
+          ] }),
+          series.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            import_material67.Stack,
+            {
+              direction: "row",
+              spacing: 2,
+              justifyContent: "center",
+              paddingY: 1,
+              flexWrap: "wrap",
+              useFlexGap: true,
+              role: "list",
+              "aria-label": "Chart legend",
+              children: series.map((s) => {
+                const isHidden = hiddenSeries.has(s.name);
+                return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+                  import_material67.Stack,
+                  {
+                    direction: "row",
+                    spacing: 1,
+                    alignItems: "center",
+                    role: "listitem",
+                    onClick: () => handleLegendToggle(s.name),
+                    sx: {
+                      cursor: "pointer",
+                      opacity: isHidden ? 0.4 : 1,
+                      transition: "opacity 0.2s ease",
+                      userSelect: "none"
+                    },
+                    "aria-pressed": !isHidden,
+                    "aria-label": `Toggle ${s.name} visibility`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(LegendDot, { dotColor: s.color }),
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_material67.Typography, { variant: "body2", children: s.name })
+                    ]
+                  },
+                  s.name
+                );
+              })
+            }
+          )
+        ] }),
+        shouldShowSummary && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_material67.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(SummaryStats, { items: summaryItems })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/third-party/FlowEditor.tsx
+var import_react34 = require("react");
+var import_reactflow = __toESM(require("reactflow"));
+var import_material68 = require("@mui/material");
 var import_styles40 = require("@mui/material/styles");
 var import_reactflow2 = require("reactflow");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var FlowEditor = ({
   nodes,
   edges,
@@ -7414,7 +7716,7 @@ var FlowEditor = ({
   ...reactFlowProps
 }) => {
   const theme2 = (0, import_styles40.useTheme)();
-  const handleInit = (0, import_react33.useCallback)(
+  const handleInit = (0, import_react34.useCallback)(
     (instance) => {
       if (onInit) {
         onInit(instance);
@@ -7422,8 +7724,8 @@ var FlowEditor = ({
     },
     [onInit]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_reactflow.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-    import_material65.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_reactflow.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+    import_material68.Box,
     {
       sx: {
         width: "100%",
@@ -7435,7 +7737,7 @@ var FlowEditor = ({
         ...containerProps?.sx
       },
       ...containerProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         import_reactflow.default,
         {
           nodes,
@@ -7457,7 +7759,7 @@ var FlowEditor = ({
           },
           ...reactFlowProps,
           children: [
-            showBackground && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+            showBackground && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               import_reactflow.Background,
               {
                 variant: backgroundVariant,
@@ -7466,8 +7768,8 @@ var FlowEditor = ({
                 color: theme2.palette.divider
               }
             ),
-            showControls && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_reactflow.Controls, {}),
-            showMinimap && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+            showControls && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_reactflow.Controls, {}),
+            showMinimap && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               import_reactflow.MiniMap,
               {
                 nodeColor: (node) => {
@@ -7490,15 +7792,15 @@ var FlowEditor = ({
 };
 
 // src/components/third-party/CodeEditor.tsx
-var import_react34 = require("react");
-var import_react35 = __toESM(require("@monaco-editor/react"));
-var import_material66 = require("@mui/material");
+var import_react35 = require("react");
+var import_react36 = __toESM(require("@monaco-editor/react"));
+var import_material69 = require("@mui/material");
 var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
 var import_FullscreenExit = __toESM(require("@mui/icons-material/FullscreenExit"));
 var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"));
 var import_ExpandMore3 = __toESM(require("@mui/icons-material/ExpandMore"));
 var import_ExpandLess = __toESM(require("@mui/icons-material/ExpandLess"));
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var configureTypeScript = (monaco) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.ES2020,
@@ -7542,16 +7844,16 @@ var CodeEditor = ({
   containerProps,
   typeDefinitions
 }) => {
-  const [isEditorReady, setIsEditorReady] = (0, import_react34.useState)(false);
-  const [validationErrors, setValidationErrors] = (0, import_react34.useState)([]);
-  const [isFullscreen, setIsFullscreen] = (0, import_react34.useState)(false);
-  const [tsCode, setTsCode] = (0, import_react34.useState)(value);
-  const [actualHeight, setActualHeight] = (0, import_react34.useState)(
+  const [isEditorReady, setIsEditorReady] = (0, import_react35.useState)(false);
+  const [validationErrors, setValidationErrors] = (0, import_react35.useState)([]);
+  const [isFullscreen, setIsFullscreen] = (0, import_react35.useState)(false);
+  const [tsCode, setTsCode] = (0, import_react35.useState)(value);
+  const [actualHeight, setActualHeight] = (0, import_react35.useState)(
     typeof height === "number" ? `${height}px` : height
   );
-  const [showProblems, setShowProblems] = (0, import_react34.useState)(false);
-  const [hasUserToggledProblems, setHasUserToggledProblems] = (0, import_react34.useState)(false);
-  (0, import_react34.useEffect)(() => {
+  const [showProblems, setShowProblems] = (0, import_react35.useState)(false);
+  const [hasUserToggledProblems, setHasUserToggledProblems] = (0, import_react35.useState)(false);
+  (0, import_react35.useEffect)(() => {
     if (hasUserToggledProblems) return;
     if (validationErrors.length > 0) {
       setShowProblems(true);
@@ -7559,25 +7861,25 @@ var CodeEditor = ({
       setShowProblems(false);
     }
   }, [validationErrors, hasUserToggledProblems]);
-  const internalEditorRef = (0, import_react34.useRef)(null);
-  const internalMonacoRef = (0, import_react34.useRef)(null);
+  const internalEditorRef = (0, import_react35.useRef)(null);
+  const internalMonacoRef = (0, import_react35.useRef)(null);
   const finalEditorRef = editorRef || internalEditorRef;
   const finalMonacoRef = monacoRef || internalMonacoRef;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (isFullscreen) {
       setActualHeight("calc(100vh - 80px)");
     } else {
       setActualHeight(typeof height === "number" ? `${height}px` : height);
     }
   }, [height, isFullscreen]);
-  const toggleFullscreen = (0, import_react34.useCallback)(() => {
+  const toggleFullscreen = (0, import_react35.useCallback)(() => {
     const newFullscreenState = !isFullscreen;
     setIsFullscreen(newFullscreenState);
     if (onFullscreenChange) {
       onFullscreenChange(newFullscreenState);
     }
   }, [isFullscreen, onFullscreenChange]);
-  const gotoMarker = (0, import_react34.useCallback)(
+  const gotoMarker = (0, import_react35.useCallback)(
     (marker) => {
       const ed = finalEditorRef?.current;
       if (!ed) return;
@@ -7592,7 +7894,7 @@ var CodeEditor = ({
     },
     [finalEditorRef]
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!isFullscreen) return;
     function escapeHandler(event) {
       if (event.key === "Escape") {
@@ -7609,7 +7911,7 @@ var CodeEditor = ({
       window.removeEventListener("keydown", escapeHandler, { capture: true });
     };
   }, [isFullscreen, onFullscreenChange]);
-  const handleEditorDidMount = (0, import_react34.useCallback)(
+  const handleEditorDidMount = (0, import_react35.useCallback)(
     (editor, monaco) => {
       console.log("CodeEditor: onMount called", { editor: !!editor, monaco: !!monaco });
       try {
@@ -7663,7 +7965,7 @@ var CodeEditor = ({
     },
     [isFullscreen, onFullscreenChange, onValidate, onMount, finalEditorRef, finalMonacoRef]
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!isEditorReady || !finalMonacoRef?.current || !typeDefinitions) return;
     const monaco = finalMonacoRef.current;
     const definitions = Array.isArray(typeDefinitions) ? typeDefinitions : [typeDefinitions];
@@ -7685,7 +7987,7 @@ var CodeEditor = ({
     setTsCode(valueStr);
     onChange(valueStr);
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (value !== tsCode) {
       setTsCode(value);
       if (isEditorReady && finalEditorRef?.current) {
@@ -7710,8 +8012,8 @@ var CodeEditor = ({
     theme: themeProp || "vs",
     ...options2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-    import_material66.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    import_material69.Box,
     {
       sx: {
         display: "flex",
@@ -7731,8 +8033,8 @@ var CodeEditor = ({
         pb: isFullscreen ? 2 : 0,
         overflow: isFullscreen ? "hidden" : "visible"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
-        import_material66.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+        import_material69.Box,
         {
           sx: {
             flex: 1,
@@ -7747,8 +8049,8 @@ var CodeEditor = ({
           },
           ...containerProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-              import_material66.IconButton,
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_material69.Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+              import_material69.IconButton,
               {
                 onClick: toggleFullscreen,
                 size: "small",
@@ -7765,11 +8067,11 @@ var CodeEditor = ({
                   },
                   boxShadow: 1
                 },
-                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_FullscreenExit.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_Fullscreen.default, { fontSize: "small" })
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_FullscreenExit.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_Fullscreen.default, { fontSize: "small" })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-              import_material66.Box,
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+              import_material69.Box,
               {
                 sx: {
                   flex: 1,
@@ -7780,8 +8082,8 @@ var CodeEditor = ({
                   position: "relative",
                   height: isFullscreen ? "100%" : actualHeight
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-                  import_react35.default,
+                children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                  import_react36.default,
                   {
                     height: "100%",
                     defaultLanguage: language,
@@ -7791,7 +8093,7 @@ var CodeEditor = ({
                     onMount: handleEditorDidMount,
                     theme: themeProp || "vs",
                     options: defaultOptions,
-                    loading: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Box, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    loading: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_material69.Box, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
                     beforeMount: (monaco) => {
                       console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
                     }
@@ -7799,8 +8101,8 @@ var CodeEditor = ({
                 )
               }
             ),
-            validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
-              import_material66.Box,
+            validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+              import_material69.Box,
               {
                 sx: {
                   borderTop: 1,
@@ -7813,8 +8115,8 @@ var CodeEditor = ({
                   transition: "max-height 0.2s ease"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
-                    import_material66.Box,
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+                    import_material69.Box,
                     {
                       sx: {
                         display: "flex",
@@ -7828,16 +8130,16 @@ var CodeEditor = ({
                         color: "text.secondary"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_ErrorOutline.default, { color: "error", fontSize: "small" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Box, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_material66.Box, { sx: { ml: 1 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_ErrorOutline.default, { color: "error", fontSize: "small" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_material69.Box, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_material69.Box, { sx: { ml: 1 }, children: [
                           validationErrors.length,
                           " error",
                           validationErrors.length > 1 ? "s" : ""
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Box, { sx: { flex: 1 } }),
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-                          import_material66.IconButton,
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_material69.Box, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                          import_material69.IconButton,
                           {
                             size: "small",
                             "aria-label": "Toggle problems panel",
@@ -7845,14 +8147,14 @@ var CodeEditor = ({
                               setHasUserToggledProblems(true);
                               setShowProblems((s) => !s);
                             },
-                            children: showProblems ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_ExpandMore3.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_ExpandLess.default, { fontSize: "small" })
+                            children: showProblems ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_ExpandMore3.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_ExpandLess.default, { fontSize: "small" })
                           }
                         )
                       ]
                     }
                   ),
-                  showProblems && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Box, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
-                    import_material66.Box,
+                  showProblems && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_material69.Box, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+                    import_material69.Box,
                     {
                       onClick: () => gotoMarker(error),
                       sx: {
@@ -7868,12 +8170,12 @@ var CodeEditor = ({
                         fontSize: "0.85rem"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_ErrorOutline.default, { color: "error", sx: { fontSize: 18 } }),
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_material66.Box, { sx: { color: "text.secondary", width: 64 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_ErrorOutline.default, { color: "error", sx: { fontSize: 18 } }),
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_material69.Box, { sx: { color: "text.secondary", width: 64 }, children: [
                           "Line ",
                           error.startLineNumber
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material66.Box, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_material69.Box, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
                       ]
                     },
                     `${error.startLineNumber}-${error.startColumn}-${index}`
@@ -7999,11 +8301,14 @@ var import_reactflow3 = require("reactflow");
   StepLabel,
   Stepper,
   StorageAppIcon,
+  SummaryStats,
   Switch,
   Tab,
   Table,
   TableHeader,
   TextField,
+  TimeRangeSelect,
+  TimeSeriesGraph,
   ToggleButton,
   ToggleButtonGroup,
   Toolbar,