@seed-ship/mcp-ui-solid 6.20.0 → 6.22.0

package/dist/components/ChartJSRenderer.js

@@ -1,12 +1,13 @@
-import { createComponent, getNextElement, getNextMarker, insert, effect, setProperty, setAttribute, runHydrationEvents, mergeProps, memo, className, style, template, use, delegateEvents } from "solid-js/web";
-import { createSignal, createMemo, createUniqueId, createEffect, onCleanup, Show, For } from "solid-js";
+import { createComponent, getNextElement, getNextMarker, insert, effect, setAttribute, runHydrationEvents, setProperty, mergeProps, memo, className, style, template, use, delegateEvents } from "solid-js/web";
+import { createSignal, createMemo, createUniqueId, createEffect, untrack, onCleanup, Show, For } from "solid-js";
 import { ExpandableWrapper, useExpanded } from "./ExpandableWrapper.js";
 import { DegradedFallback } from "./DegradedFallback.js";
 import { chartToDataTable } from "./chart-data-table.js";
 import { useTelemetry } from "../context/MCPUITelemetryContext.js";
+import { useMCPUIConfig } from "../context/MCPUIConfigContext.js";
 import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
 import { formatMCPUIString } from "../utils/format-string.js";
-var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$3 = /* @__PURE__ */ template(`<tr><td class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">`), _tmpl$4 = /* @__PURE__ */ template(`<div><table class="w-full border-collapse text-left text-sm"><caption class=sr-only><!$><!/> — <!$><!/></caption><thead class="bg-gray-50 dark:bg-gray-900/40"><tr></tr></thead><tbody><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">`), _tmpl$6 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-between gap-3 mb-3 flex-shrink-0"><div class=min-w-0></div><div class="flex items-center gap-2"><div class="inline-flex rounded-md border border-gray-200 p-0.5 dark:border-gray-600"role=group><button type=button></button><button type=button></button></div><!$><!/></div></div><p class=sr-only><!$><!/>. <!$><!/></p><!$><!/><!$><!/><div><canvas role=img></canvas><!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$8 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$9 = /* @__PURE__ */ template(`<td class="px-3 py-2 text-gray-700 dark:text-gray-300">`);
+var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="inline-flex items-center gap-1"><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"></path></svg></button><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6"></path></svg></button><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$5 = /* @__PURE__ */ template(`<tr><td class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">`), _tmpl$6 = /* @__PURE__ */ template(`<div><table class="w-full border-collapse text-left text-sm"><caption class=sr-only><!$><!/> — <!$><!/></caption><thead class="bg-gray-50 dark:bg-gray-900/40"><tr></tr></thead><tbody><!$><!/><!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">`), _tmpl$8 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-between gap-3 mb-3 flex-shrink-0"><div class=min-w-0></div><div class="flex items-center gap-2"><div class="inline-flex rounded-md border border-gray-200 p-0.5 dark:border-gray-600"role=group><button type=button></button><button type=button></button></div><!$><!/><!$><!/></div></div><p class=sr-only><!$><!/>. <!$><!/></p><!$><!/><!$><!/><div><canvas role=img></canvas><!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$0 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$1 = /* @__PURE__ */ template(`<td class="px-3 py-2 text-gray-700 dark:text-gray-300">`);
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -30,16 +31,78 @@ async function isChartJSAvailable() {
     return false;
   }
 }
+let zoomPluginPromise = null;
+let zoomPluginRegistered = false;
+const loadZoomPlugin = () => {
+  if (!zoomPluginPromise) {
+    zoomPluginPromise = import(
+      /* @vite-ignore */
+      "chartjs-plugin-zoom"
+    ).then((module) => module.default ?? module).catch(() => null);
+  }
+  return zoomPluginPromise;
+};
+const ensureZoomPlugin = async () => {
+  try {
+    const plugin = await loadZoomPlugin();
+    if (!plugin) return null;
+    if (!zoomPluginRegistered) {
+      const Chart = await loadChartJS();
+      if (typeof (Chart == null ? void 0 : Chart.register) !== "function") return null;
+      Chart.register(plugin);
+      zoomPluginRegistered = true;
+    }
+    return plugin;
+  } catch {
+    return null;
+  }
+};
+const ZOOMABLE_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "line", "scatter", "bubble"]);
+const CHART_ZOOM_BUTTON_FACTOR = 1.5;
+const isChartZoomed = (chart) => {
+  var _a;
+  if (typeof (chart == null ? void 0 : chart.isZoomedOrPanned) === "function") return Boolean(chart.isZoomedOrPanned());
+  const level = (_a = chart == null ? void 0 : chart.getZoomLevel) == null ? void 0 : _a.call(chart);
+  return typeof level === "number" ? level !== 1 : false;
+};
+const isPlainZoomObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const mergeZoomOptions = (base, override) => {
+  if (!isPlainZoomObject(override)) return base;
+  const merged = {
+    ...base
+  };
+  for (const [key, value] of Object.entries(override)) {
+    if (value === void 0) continue;
+    const ours = merged[key];
+    if (isPlainZoomObject(ours) && isPlainZoomObject(value)) {
+      merged[key] = mergeZoomOptions(ours, value);
+    } else if (typeof ours === "function" && typeof value === "function") {
+      const rendererHook = ours;
+      const callerHook = value;
+      merged[key] = (...args) => {
+        rendererHook(...args);
+        return callerHook(...args);
+      };
+    } else {
+      merged[key] = value;
+    }
+  }
+  return merged;
+};
 const ContextAwareChartLayout = (props) => props.render(useExpanded());
 const ChartJSRenderer = (props) => {
   const [isLoading, setIsLoading] = createSignal(true);
   const [error, setError] = createSignal();
   const [activeView, setActiveView] = createSignal("chart");
+  const [isExpanded, setIsExpanded] = createSignal(false);
+  const [zoomPlugin, setZoomPlugin] = createSignal(null);
+  const [isZoomed, setIsZoomed] = createSignal(false);
   let canvasRef;
   let chartInstance;
   let renderVersion = 0;
   const params = () => props.component.params;
   const telemetry = useTelemetry();
+  const config = useMCPUIConfig();
   const strings = useMCPUIStrings();
   const tableData = createMemo(() => chartToDataTable(params(), {
     series: strings.chartTableSeries,
@@ -54,6 +117,60 @@ const ChartJSRenderer = (props) => {
     type: params().type,
     data: params().data
   }, null, 2);
+  const zoomWanted = createMemo(() => {
+    var _a, _b;
+    if (!ZOOMABLE_CHART_TYPES.has(params().type)) return false;
+    const hostZoom = (_b = (_a = params().options) == null ? void 0 : _a.plugins) == null ? void 0 : _b.zoom;
+    if (hostZoom === false || hostZoom === null) return false;
+    const mode = config.chartZoom;
+    if (mode === "never") return false;
+    if (mode === "always") return true;
+    return isExpanded();
+  });
+  createEffect(() => {
+    if (!zoomWanted() || untrack(zoomPlugin)) return;
+    void ensureZoomPlugin().then((plugin) => {
+      if (plugin) setZoomPlugin(() => plugin);
+    });
+  });
+  const zoomPluginOptions = {
+    zoom: {
+      wheel: {
+        enabled: true
+      },
+      pinch: {
+        enabled: true
+      },
+      // Drag is reserved for panning below; a drag-to-select zoom would make
+      // the two gestures fight over the same mouse button.
+      drag: {
+        enabled: false
+      },
+      mode: "xy",
+      onZoom: ({
+        chart
+      }) => setIsZoomed(isChartZoomed(chart))
+    },
+    pan: {
+      enabled: true,
+      mode: "xy",
+      onPan: ({
+        chart
+      }) => setIsZoomed(isChartZoomed(chart))
+    }
+  };
+  const zoomOptions = createMemo(() => zoomWanted() && zoomPlugin() ? zoomPluginOptions : null);
+  const zoomControlsShown = () => Boolean(zoomOptions()) && activeView() === "chart" && !error();
+  const handleZoomBy = (factor) => {
+    var _a;
+    (_a = chartInstance == null ? void 0 : chartInstance.zoom) == null ? void 0 : _a.call(chartInstance, factor);
+    setIsZoomed(isChartZoomed(chartInstance));
+  };
+  const handleResetZoom = () => {
+    var _a;
+    (_a = chartInstance == null ? void 0 : chartInstance.resetZoom) == null ? void 0 : _a.call(chartInstance);
+    setIsZoomed(false);
+  };
   const handleExportPNG = () => {
     if (!canvasRef) return;
     const url = canvasRef.toDataURL("image/png");
@@ -63,9 +180,10 @@ const ChartJSRenderer = (props) => {
     a.click();
   };
   createEffect(async () => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!canvasRef) return;
     const chartParams = params();
+    const zoom = zoomOptions();
     const version = ++renderVersion;
     setIsLoading(true);
     setError(void 0);
@@ -76,17 +194,28 @@ const ChartJSRenderer = (props) => {
         chartInstance.destroy();
         chartInstance = null;
       }
+      const hostZoomOptions = (_b = (_a = chartParams.options) == null ? void 0 : _a.plugins) == null ? void 0 : _b.zoom;
       const baseOptions = {
         responsive: true,
         maintainAspectRatio: false,
         ...chartParams.options,
         plugins: {
-          ...(_a = chartParams.options) == null ? void 0 : _a.plugins,
+          ...(_c = chartParams.options) == null ? void 0 : _c.plugins,
           legend: {
             display: true,
             position: "bottom",
-            ...(_c = (_b = chartParams.options) == null ? void 0 : _b.plugins) == null ? void 0 : _c.legend
-          }
+            ...(_e = (_d = chartParams.options) == null ? void 0 : _d.plugins) == null ? void 0 : _e.legend
+          },
+          // Present only once the optional peer has loaded AND the current
+          // surface wants zoom. Merged rather than assigned, so a consumer's
+          // own `plugins.zoom` survives; when zoom is off, the spread above
+          // has already left their block exactly as they wrote it.
+          // An explicit `plugins.zoom: false` never reaches here: `zoomWanted`
+          // already returned false for it, so `zoom` is null and the spread
+          // above carries the host's own value through untouched.
+          ...zoom ? {
+            zoom: mergeZoomOptions(zoom, hostZoomOptions)
+          } : {}
         }
       };
       if (chartParams.timeAxis) {
@@ -94,7 +223,7 @@ const ChartJSRenderer = (props) => {
         baseOptions.scales = {
           ...baseOptions.scales,
           x: {
-            ...(_d = baseOptions.scales) == null ? void 0 : _d.x,
+            ...(_f = baseOptions.scales) == null ? void 0 : _f.x,
             type: "time",
             time: {
               parser: ta.parser,
@@ -115,6 +244,7 @@ const ChartJSRenderer = (props) => {
         data: chartParams.data,
         options: baseOptions
       });
+      setIsZoomed(false);
       setIsLoading(false);
     } catch (err) {
       if (version !== renderVersion) return;
@@ -124,11 +254,11 @@ const ChartJSRenderer = (props) => {
       telemetry == null ? void 0 : telemetry.dispatch({
         type: "render:error",
         errorMessage: error2.message,
-        id: ((_e = props.component) == null ? void 0 : _e.id) ?? "",
+        id: ((_g = props.component) == null ? void 0 : _g.id) ?? "",
         componentType: "chart",
         ts: Date.now()
       });
-      (_f = props.onError) == null ? void 0 : _f.call(props, error2);
+      (_h = props.onError) == null ? void 0 : _h.call(props, error2);
     }
   });
   createEffect(() => {
@@ -158,10 +288,11 @@ const ChartJSRenderer = (props) => {
     get toolbarVariant() {
       return props.toolbarVariant;
     },
+    onExpandedChange: setIsExpanded,
     get children() {
       return createComponent(ContextAwareChartLayout, {
-        render: (isExpanded) => (() => {
-          var _el$ = getNextElement(_tmpl$6), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$0 = _el$6.nextSibling, [_el$1, _co$] = getNextMarker(_el$0.nextSibling), _el$10 = _el$2.nextSibling, _el$12 = _el$10.firstChild, [_el$13, _co$2] = getNextMarker(_el$12.nextSibling), _el$11 = _el$13.nextSibling, _el$14 = _el$11.nextSibling, [_el$15, _co$3] = getNextMarker(_el$14.nextSibling), _el$41 = _el$10.nextSibling, [_el$42, _co$9] = getNextMarker(_el$41.nextSibling), _el$43 = _el$42.nextSibling, [_el$44, _co$0] = getNextMarker(_el$43.nextSibling), _el$33 = _el$44.nextSibling, _el$34 = _el$33.firstChild, _el$39 = _el$34.nextSibling, [_el$40, _co$8] = getNextMarker(_el$39.nextSibling);
+        render: (isExpanded2) => (() => {
+          var _el$ = getNextElement(_tmpl$8), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$14 = _el$6.nextSibling, [_el$15, _co$2] = getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$3] = getNextMarker(_el$16.nextSibling), _el$18 = _el$2.nextSibling, _el$20 = _el$18.firstChild, [_el$21, _co$4] = getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = getNextMarker(_el$22.nextSibling), _el$49 = _el$18.nextSibling, [_el$50, _co$1] = getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$10] = getNextMarker(_el$51.nextSibling), _el$41 = _el$52.nextSibling, _el$42 = _el$41.firstChild, _el$47 = _el$42.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling);
           insert(_el$3, createComponent(Show, {
             get when() {
               return params().title;
@@ -176,18 +307,63 @@ const ChartJSRenderer = (props) => {
           insert(_el$7, () => strings.chartView);
           _el$8.$$click = () => setActiveView("data");
           insert(_el$8, () => strings.chartDataView);
+          insert(_el$5, createComponent(Show, {
+            get when() {
+              return zoomControlsShown();
+            },
+            get children() {
+              var _el$9 = getNextElement(_tmpl$3), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$11 = _el$1.nextSibling, [_el$12, _co$] = getNextMarker(_el$11.nextSibling);
+              _el$0.$$click = () => handleZoomBy(1 / CHART_ZOOM_BUTTON_FACTOR);
+              _el$1.$$click = () => handleZoomBy(CHART_ZOOM_BUTTON_FACTOR);
+              insert(_el$9, createComponent(Show, {
+                get when() {
+                  return isZoomed();
+                },
+                get children() {
+                  var _el$10 = getNextElement(_tmpl$2);
+                  _el$10.$$click = handleResetZoom;
+                  effect((_p$) => {
+                    var _v$ = strings.zoomReset, _v$2 = strings.zoomReset;
+                    _v$ !== _p$.e && setAttribute(_el$10, "title", _p$.e = _v$);
+                    _v$2 !== _p$.t && setAttribute(_el$10, "aria-label", _p$.t = _v$2);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  });
+                  runHydrationEvents();
+                  return _el$10;
+                }
+              }), _el$12, _co$);
+              effect((_p$) => {
+                var _v$3 = strings.zoomOut, _v$4 = strings.zoomOut, _v$5 = strings.zoomIn, _v$6 = strings.zoomIn;
+                _v$3 !== _p$.e && setAttribute(_el$0, "title", _p$.e = _v$3);
+                _v$4 !== _p$.t && setAttribute(_el$0, "aria-label", _p$.t = _v$4);
+                _v$5 !== _p$.a && setAttribute(_el$1, "title", _p$.a = _v$5);
+                _v$6 !== _p$.o && setAttribute(_el$1, "aria-label", _p$.o = _v$6);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0
+              });
+              runHydrationEvents();
+              return _el$9;
+            }
+          }), _el$15, _co$2);
           insert(_el$5, createComponent(Show, {
             get when() {
               return exportEnabled();
             },
             get children() {
-              var _el$9 = getNextElement(_tmpl$2);
-              _el$9.$$click = handleExportPNG;
+              var _el$13 = getNextElement(_tmpl$4);
+              _el$13.$$click = handleExportPNG;
               effect((_p$) => {
-                var _v$ = activeView() !== "chart" || isLoading() || Boolean(error()), _v$2 = strings.chartDownloadPng, _v$3 = strings.chartDownloadPngAria;
-                _v$ !== _p$.e && setProperty(_el$9, "disabled", _p$.e = _v$);
-                _v$2 !== _p$.t && setAttribute(_el$9, "title", _p$.t = _v$2);
-                _v$3 !== _p$.a && setAttribute(_el$9, "aria-label", _p$.a = _v$3);
+                var _v$7 = activeView() !== "chart" || isLoading() || Boolean(error()), _v$8 = strings.chartDownloadPng, _v$9 = strings.chartDownloadPngAria;
+                _v$7 !== _p$.e && setProperty(_el$13, "disabled", _p$.e = _v$7);
+                _v$8 !== _p$.t && setAttribute(_el$13, "title", _p$.t = _v$8);
+                _v$9 !== _p$.a && setAttribute(_el$13, "aria-label", _p$.a = _v$9);
                 return _p$;
               }, {
                 e: void 0,
@@ -195,12 +371,12 @@ const ChartJSRenderer = (props) => {
                 a: void 0
               });
               runHydrationEvents();
-              return _el$9;
+              return _el$13;
             }
-          }), _el$1, _co$);
-          setAttribute(_el$10, "id", descriptionId);
-          insert(_el$10, title, _el$13, _co$2);
-          insert(_el$10, () => strings.chartDataSummary, _el$15, _co$3);
+          }), _el$17, _co$3);
+          setAttribute(_el$18, "id", descriptionId);
+          insert(_el$18, title, _el$21, _co$4);
+          insert(_el$18, () => strings.chartDataSummary, _el$23, _co$5);
           insert(_el$, createComponent(Show, {
             get when() {
               return memo(() => !!error())() && activeView() === "chart";
@@ -217,103 +393,103 @@ const ChartJSRenderer = (props) => {
                 }
               }, tableData));
             }
-          }), _el$42, _co$9);
+          }), _el$50, _co$1);
           insert(_el$, createComponent(Show, {
             get when() {
               return activeView() === "data";
             },
             get children() {
-              var _el$16 = getNextElement(_tmpl$4), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$20 = _el$18.firstChild, [_el$21, _co$4] = getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = getNextMarker(_el$22.nextSibling), _el$24 = _el$18.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$24.nextSibling, _el$29 = _el$26.firstChild, [_el$30, _co$6] = getNextMarker(_el$29.nextSibling), _el$31 = _el$30.nextSibling, [_el$32, _co$7] = getNextMarker(_el$31.nextSibling);
-              insert(_el$18, title, _el$21, _co$4);
-              insert(_el$18, () => strings.chartDataTable, _el$23, _co$5);
-              insert(_el$25, createComponent(For, {
+              var _el$24 = getNextElement(_tmpl$6), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$28 = _el$26.firstChild, [_el$29, _co$6] = getNextMarker(_el$28.nextSibling), _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling, [_el$31, _co$7] = getNextMarker(_el$30.nextSibling), _el$32 = _el$26.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$37 = _el$34.firstChild, [_el$38, _co$8] = getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$9] = getNextMarker(_el$39.nextSibling);
+              insert(_el$26, title, _el$29, _co$6);
+              insert(_el$26, () => strings.chartDataTable, _el$31, _co$7);
+              insert(_el$33, createComponent(For, {
                 get each() {
                   return tableData().columns;
                 },
                 children: (column) => (() => {
-                  var _el$45 = getNextElement(_tmpl$7);
-                  insert(_el$45, column);
-                  return _el$45;
+                  var _el$53 = getNextElement(_tmpl$9);
+                  insert(_el$53, column);
+                  return _el$53;
                 })()
               }));
-              insert(_el$26, createComponent(For, {
+              insert(_el$34, createComponent(For, {
                 get each() {
                   return tableData().rows;
                 },
                 children: (row) => (() => {
-                  var _el$46 = getNextElement(_tmpl$8);
-                  insert(_el$46, createComponent(For, {
+                  var _el$54 = getNextElement(_tmpl$0);
+                  insert(_el$54, createComponent(For, {
                     get each() {
                       return tableData().columns;
                     },
                     children: (_column, index) => (() => {
-                      var _el$47 = getNextElement(_tmpl$9);
-                      insert(_el$47, () => String(row[index()] ?? ""));
-                      return _el$47;
+                      var _el$55 = getNextElement(_tmpl$1);
+                      insert(_el$55, () => String(row[index()] ?? ""));
+                      return _el$55;
                     })()
                   }));
-                  return _el$46;
+                  return _el$54;
                 })()
-              }), _el$30, _co$6);
-              insert(_el$26, createComponent(Show, {
+              }), _el$38, _co$8);
+              insert(_el$34, createComponent(Show, {
                 get when() {
                   return tableData().rows.length === 0;
                 },
                 get children() {
-                  var _el$27 = getNextElement(_tmpl$3), _el$28 = _el$27.firstChild;
-                  insert(_el$28, () => strings.chartNoData);
-                  effect(() => setAttribute(_el$28, "colspan", Math.max(1, tableData().columns.length)));
-                  return _el$27;
+                  var _el$35 = getNextElement(_tmpl$5), _el$36 = _el$35.firstChild;
+                  insert(_el$36, () => strings.chartNoData);
+                  effect(() => setAttribute(_el$36, "colspan", Math.max(1, tableData().columns.length)));
+                  return _el$35;
                 }
-              }), _el$32, _co$7);
+              }), _el$40, _co$9);
               effect((_p$) => {
-                var _v$4 = `w-full overflow-auto rounded border border-gray-200 dark:border-gray-700 ${isExpanded() ? "flex-1 min-h-0" : ""}`, _v$5 = isExpanded() ? void 0 : {
+                var _v$0 = `w-full overflow-auto rounded border border-gray-200 dark:border-gray-700 ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$1 = isExpanded2() ? void 0 : {
                   height: params().height || "250px",
                   "max-height": "70vh"
                 };
-                _v$4 !== _p$.e && className(_el$16, _p$.e = _v$4);
-                _p$.t = style(_el$16, _v$5, _p$.t);
+                _v$0 !== _p$.e && className(_el$24, _p$.e = _v$0);
+                _p$.t = style(_el$24, _v$1, _p$.t);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0
               });
-              return _el$16;
+              return _el$24;
             }
-          }), _el$44, _co$0);
+          }), _el$52, _co$10);
           var _ref$ = canvasRef;
-          typeof _ref$ === "function" ? use(_ref$, _el$34) : canvasRef = _el$34;
-          setAttribute(_el$34, "aria-describedby", descriptionId);
-          insert(_el$33, createComponent(Show, {
+          typeof _ref$ === "function" ? use(_ref$, _el$42) : canvasRef = _el$42;
+          setAttribute(_el$42, "aria-describedby", descriptionId);
+          insert(_el$41, createComponent(Show, {
             get when() {
               return memo(() => !!isLoading())() && activeView() === "chart";
             },
             get children() {
-              var _el$35 = getNextElement(_tmpl$5), _el$36 = _el$35.firstChild, _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
-              insert(_el$38, () => strings.chartLoading);
-              return _el$35;
+              var _el$43 = getNextElement(_tmpl$7), _el$44 = _el$43.firstChild, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling;
+              insert(_el$46, () => strings.chartLoading);
+              return _el$43;
             }
-          }), _el$40, _co$8);
+          }), _el$48, _co$0);
           effect((_p$) => {
-            var _v$6 = `relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""} ${params().className || ""}`, _v$7 = strings.chartViewSelector, _v$8 = activeView() === "chart", _v$9 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "chart" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$0 = activeView() === "data", _v$1 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "data" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$10 = `relative w-full ${isExpanded() ? "flex-1 min-h-0" : ""}`, _v$11 = error() || activeView() === "data" ? {
+            var _v$10 = `relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${isExpanded2() ? "flex-1 min-h-0 flex flex-col" : ""} ${params().className || ""}`, _v$11 = strings.chartViewSelector, _v$12 = activeView() === "chart", _v$13 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "chart" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$14 = activeView() === "data", _v$15 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "data" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$16 = `relative w-full ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$17 = error() || activeView() === "data" ? {
               display: "none"
-            } : isExpanded() ? {
+            } : isExpanded2() ? {
               height: "100%",
               display: "block"
             } : {
               height: params().height || "250px",
               display: "block"
-            }, _v$12 = title(), _v$13 = activeView() !== "chart" || Boolean(error());
-            _v$6 !== _p$.e && className(_el$, _p$.e = _v$6);
-            _v$7 !== _p$.t && setAttribute(_el$6, "aria-label", _p$.t = _v$7);
-            _v$8 !== _p$.a && setAttribute(_el$7, "aria-pressed", _p$.a = _v$8);
-            _v$9 !== _p$.o && className(_el$7, _p$.o = _v$9);
-            _v$0 !== _p$.i && setAttribute(_el$8, "aria-pressed", _p$.i = _v$0);
-            _v$1 !== _p$.n && className(_el$8, _p$.n = _v$1);
-            _v$10 !== _p$.s && className(_el$33, _p$.s = _v$10);
-            _p$.h = style(_el$33, _v$11, _p$.h);
-            _v$12 !== _p$.r && setAttribute(_el$34, "aria-label", _p$.r = _v$12);
-            _v$13 !== _p$.d && setAttribute(_el$34, "aria-hidden", _p$.d = _v$13);
+            }, _v$18 = title(), _v$19 = activeView() !== "chart" || Boolean(error());
+            _v$10 !== _p$.e && className(_el$, _p$.e = _v$10);
+            _v$11 !== _p$.t && setAttribute(_el$6, "aria-label", _p$.t = _v$11);
+            _v$12 !== _p$.a && setAttribute(_el$7, "aria-pressed", _p$.a = _v$12);
+            _v$13 !== _p$.o && className(_el$7, _p$.o = _v$13);
+            _v$14 !== _p$.i && setAttribute(_el$8, "aria-pressed", _p$.i = _v$14);
+            _v$15 !== _p$.n && className(_el$8, _p$.n = _v$15);
+            _v$16 !== _p$.s && className(_el$41, _p$.s = _v$16);
+            _p$.h = style(_el$41, _v$17, _p$.h);
+            _v$18 !== _p$.r && setAttribute(_el$42, "aria-label", _p$.r = _v$18);
+            _v$19 !== _p$.d && setAttribute(_el$42, "aria-hidden", _p$.d = _v$19);
             return _p$;
           }, {
             e: void 0,