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

package/CHANGELOG.md

@@ -5,6 +5,85 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.22.0] - 2026-09-18
+
+Wheel zoom and drag pan on the surfaces that could not be read when the content
+was dense: the image lightbox, and Chart.js charts in their expanded view.
+
+### The rule this follows
+
+**Wheel zoom is only ever enabled on a surface that owns its viewport** — a
+fullscreen overlay or the expanded modal. A component sitting inline in a
+scrolling page must not swallow the wheel, or a user scrolling the page finds
+themselves zooming a chart instead. That is why chart zoom defaults to the
+expanded view only, and why inline zoom is opt-in.
+
+### Added
+
+- **`createPanZoom(options)`** (`src/utils/pan-zoom.ts`, exported from the root
+  and from the `./hooks` subpath) — a dependency-free cursor-anchored zoom and
+  drag-pan primitive: the point under the pointer stays under the pointer.
+  Handles two-finger pinch, clamps to `min`/`max`, and exposes
+  `cancelGesture()` for the case where the surface carrying the handlers is
+  torn down while a pointer is still down. The pure helpers behind it
+  (`clampScale`, `contentPointAt`, `viewportPointOf`, `zoomAtAnchor`) are
+  exported too.
+- **`LightboxOverlay` zooms.** Wheel, drag to pan, double-click to toggle,
+  pinch on touch, and the keyboard shortcuts `+` / `-` / `0` alongside the
+  existing Escape and arrows. Zoom controls carry a level readout, and the zoom
+  resets when the displayed image changes.
+- **Chart.js zoom and pan**, through `chartjs-plugin-zoom` as a new **optional**
+  peer dependency. Absent, charts render exactly as before — no warning, no
+  broken UI. A reset button appears in the toolbar only while the chart is
+  actually zoomed. A chart's own `options.plugins.zoom` is preserved: the
+  renderer's block is deep-merged into it, the caller's explicit values win
+  (`limits`, wheel `speed`, a pan `modifierKey`, `mode`), and a caller's
+  `onZoom` / `onPan` is *composed* with the renderer's rather than replacing
+  it, so the reset control stays in sync with the viewport either way. A key
+  the caller left `undefined` is read as an omission, not as an erasure. And
+  `options.plugins.zoom: false` — Chart.js's documented per-chart plugin
+  opt-out — beats `chartZoom`: the plugin is never downloaded and the toolbar
+  offers no controls.
+- **`MCPUIConfig.chartZoom`**: `'expanded'` (default), `'always'` or `'never'`.
+- Four string keys: `zoomIn`, `zoomOut`, `zoomReset`, `zoomLevel`
+  (`'Zoom {percent}%'`). Chrome key count 271 → 275.
+
+### Changed
+
+- **Every `MCPUIConfig` field is now optional**, as `MCPUIStrings` has always
+  been. `MCPUIConfig` grows a key in a minor release each time the library
+  gains a policy switch — `iframeFallbackLink` in 6.21.0, `chartZoom` here —
+  and while the fields were required, each addition broke the build of anyone
+  holding a *complete* config: a typed constant, a helper returning one, or a
+  direct `<MCPUIConfigContext.Provider value={…}>`. Nothing about their
+  behaviour had changed; only `tsc` failed. Adding a key is additive now.
+
+  The completeness guarantee moved onto the values: `DEFAULT_MCPUI_CONFIG` is
+  typed `Required<MCPUIConfig>` (a new key without a default is a compile error
+  in the library), and `useMCPUIConfig()` returns `Required<MCPUIConfig>`, so
+  every renderer still reads a fully resolved policy and never null-checks one.
+  `MCPUIConfigContext` itself stays typed `MCPUIConfig`, which makes providing
+  it directly *more* permissive than before. Backward compatible in both
+  directions: a consumer already passing a field still type-checks.
+
+### Fixed
+
+- **`ExpandableWrapper` no longer closes on a drag released over its backdrop.**
+  When a press and its release have different targets the browser dispatches
+  `click` on their nearest common ancestor — the backdrop — so panning a zoomed
+  chart, or selecting text in an expanded table, and releasing over the 16px
+  margin around the panel tore the modal down mid-gesture. The close now
+  requires the gesture to have *begun* on the backdrop. This was reachable
+  before this release for any drag inside an expanded view; chart panning just
+  made it easy to hit.
+
+### Not affected
+
+Maps and graphs already zoomed: `MapRenderer` enables Leaflet's
+`scrollWheelZoom` and `GraphRenderer` registers G6's `zoom-canvas` /
+`drag-canvas`. Iframes (including a diagram served from `mermaid.ink`) are
+cross-origin documents and cannot be transformed by the host at all.
+
 ## [6.21.0] - 2026-09-17
 
 The library's iframes now work on a host that serves

package/dist/components/ChartJSRenderer.cjs

@@ -28,9 +28,10 @@ const ExpandableWrapper = require("./ExpandableWrapper.cjs");
 const DegradedFallback = require("./DegradedFallback.cjs");
 const chartDataTable = require("./chart-data-table.cjs");
 const MCPUITelemetryContext = require("../context/MCPUITelemetryContext.cjs");
+const MCPUIConfigContext = require("../context/MCPUIConfigContext.cjs");
 const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
 const formatString = require("../utils/format-string.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ web.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__ */ web.template(`<tr><td class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">`), _tmpl$4 = /* @__PURE__ */ web.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__ */ web.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__ */ web.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__ */ web.template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$8 = /* @__PURE__ */ web.template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$9 = /* @__PURE__ */ web.template(`<td class="px-3 py-2 text-gray-700 dark:text-gray-300">`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ web.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__ */ web.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__ */ web.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__ */ web.template(`<tr><td class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">`), _tmpl$6 = /* @__PURE__ */ web.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__ */ web.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__ */ web.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__ */ web.template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$0 = /* @__PURE__ */ web.template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$1 = /* @__PURE__ */ web.template(`<td class="px-3 py-2 text-gray-700 dark:text-gray-300">`);
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -54,16 +55,78 @@ async function isChartJSAvailable() {
     return false;
   }
 }
+let zoomPluginPromise = null;
+let zoomPluginRegistered = false;
+const loadZoomPlugin = () => {
+  if (!zoomPluginPromise) {
+    zoomPluginPromise = import(
+      /* @vite-ignore */
+      "chartjs-plugin-zoom"
+    ).then((module2) => module2.default ?? module2).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(ExpandableWrapper.useExpanded());
 const ChartJSRenderer = (props) => {
   const [isLoading, setIsLoading] = solidJs.createSignal(true);
   const [error, setError] = solidJs.createSignal();
   const [activeView, setActiveView] = solidJs.createSignal("chart");
+  const [isExpanded, setIsExpanded] = solidJs.createSignal(false);
+  const [zoomPlugin, setZoomPlugin] = solidJs.createSignal(null);
+  const [isZoomed, setIsZoomed] = solidJs.createSignal(false);
   let canvasRef;
   let chartInstance;
   let renderVersion = 0;
   const params = () => props.component.params;
   const telemetry = MCPUITelemetryContext.useTelemetry();
+  const config = MCPUIConfigContext.useMCPUIConfig();
   const strings = MCPUIStringsContext.useMCPUIStrings();
   const tableData = solidJs.createMemo(() => chartDataTable.chartToDataTable(params(), {
     series: strings.chartTableSeries,
@@ -78,6 +141,60 @@ const ChartJSRenderer = (props) => {
     type: params().type,
     data: params().data
   }, null, 2);
+  const zoomWanted = solidJs.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();
+  });
+  solidJs.createEffect(() => {
+    if (!zoomWanted() || solidJs.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 = solidJs.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");
@@ -87,9 +204,10 @@ const ChartJSRenderer = (props) => {
     a.click();
   };
   solidJs.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);
@@ -100,17 +218,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) {
@@ -118,7 +247,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,
@@ -139,6 +268,7 @@ const ChartJSRenderer = (props) => {
         data: chartParams.data,
         options: baseOptions
       });
+      setIsZoomed(false);
       setIsLoading(false);
     } catch (err) {
       if (version !== renderVersion) return;
@@ -148,11 +278,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);
     }
   });
   solidJs.createEffect(() => {
@@ -182,10 +312,11 @@ const ChartJSRenderer = (props) => {
     get toolbarVariant() {
       return props.toolbarVariant;
     },
+    onExpandedChange: setIsExpanded,
     get children() {
       return web.createComponent(ContextAwareChartLayout, {
-        render: (isExpanded) => (() => {
-          var _el$ = web.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$] = web.getNextMarker(_el$0.nextSibling), _el$10 = _el$2.nextSibling, _el$12 = _el$10.firstChild, [_el$13, _co$2] = web.getNextMarker(_el$12.nextSibling), _el$11 = _el$13.nextSibling, _el$14 = _el$11.nextSibling, [_el$15, _co$3] = web.getNextMarker(_el$14.nextSibling), _el$41 = _el$10.nextSibling, [_el$42, _co$9] = web.getNextMarker(_el$41.nextSibling), _el$43 = _el$42.nextSibling, [_el$44, _co$0] = web.getNextMarker(_el$43.nextSibling), _el$33 = _el$44.nextSibling, _el$34 = _el$33.firstChild, _el$39 = _el$34.nextSibling, [_el$40, _co$8] = web.getNextMarker(_el$39.nextSibling);
+        render: (isExpanded2) => (() => {
+          var _el$ = web.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] = web.getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$3] = web.getNextMarker(_el$16.nextSibling), _el$18 = _el$2.nextSibling, _el$20 = _el$18.firstChild, [_el$21, _co$4] = web.getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = web.getNextMarker(_el$22.nextSibling), _el$49 = _el$18.nextSibling, [_el$50, _co$1] = web.getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$10] = web.getNextMarker(_el$51.nextSibling), _el$41 = _el$52.nextSibling, _el$42 = _el$41.firstChild, _el$47 = _el$42.nextSibling, [_el$48, _co$0] = web.getNextMarker(_el$47.nextSibling);
           web.insert(_el$3, web.createComponent(solidJs.Show, {
             get when() {
               return params().title;
@@ -200,18 +331,63 @@ const ChartJSRenderer = (props) => {
           web.insert(_el$7, () => strings.chartView);
           _el$8.$$click = () => setActiveView("data");
           web.insert(_el$8, () => strings.chartDataView);
+          web.insert(_el$5, web.createComponent(solidJs.Show, {
+            get when() {
+              return zoomControlsShown();
+            },
+            get children() {
+              var _el$9 = web.getNextElement(_tmpl$3), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$11 = _el$1.nextSibling, [_el$12, _co$] = web.getNextMarker(_el$11.nextSibling);
+              _el$0.$$click = () => handleZoomBy(1 / CHART_ZOOM_BUTTON_FACTOR);
+              _el$1.$$click = () => handleZoomBy(CHART_ZOOM_BUTTON_FACTOR);
+              web.insert(_el$9, web.createComponent(solidJs.Show, {
+                get when() {
+                  return isZoomed();
+                },
+                get children() {
+                  var _el$10 = web.getNextElement(_tmpl$2);
+                  _el$10.$$click = handleResetZoom;
+                  web.effect((_p$) => {
+                    var _v$ = strings.zoomReset, _v$2 = strings.zoomReset;
+                    _v$ !== _p$.e && web.setAttribute(_el$10, "title", _p$.e = _v$);
+                    _v$2 !== _p$.t && web.setAttribute(_el$10, "aria-label", _p$.t = _v$2);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  });
+                  web.runHydrationEvents();
+                  return _el$10;
+                }
+              }), _el$12, _co$);
+              web.effect((_p$) => {
+                var _v$3 = strings.zoomOut, _v$4 = strings.zoomOut, _v$5 = strings.zoomIn, _v$6 = strings.zoomIn;
+                _v$3 !== _p$.e && web.setAttribute(_el$0, "title", _p$.e = _v$3);
+                _v$4 !== _p$.t && web.setAttribute(_el$0, "aria-label", _p$.t = _v$4);
+                _v$5 !== _p$.a && web.setAttribute(_el$1, "title", _p$.a = _v$5);
+                _v$6 !== _p$.o && web.setAttribute(_el$1, "aria-label", _p$.o = _v$6);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0
+              });
+              web.runHydrationEvents();
+              return _el$9;
+            }
+          }), _el$15, _co$2);
           web.insert(_el$5, web.createComponent(solidJs.Show, {
             get when() {
               return exportEnabled();
             },
             get children() {
-              var _el$9 = web.getNextElement(_tmpl$2);
-              _el$9.$$click = handleExportPNG;
+              var _el$13 = web.getNextElement(_tmpl$4);
+              _el$13.$$click = handleExportPNG;
               web.effect((_p$) => {
-                var _v$ = activeView() !== "chart" || isLoading() || Boolean(error()), _v$2 = strings.chartDownloadPng, _v$3 = strings.chartDownloadPngAria;
-                _v$ !== _p$.e && web.setProperty(_el$9, "disabled", _p$.e = _v$);
-                _v$2 !== _p$.t && web.setAttribute(_el$9, "title", _p$.t = _v$2);
-                _v$3 !== _p$.a && web.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 && web.setProperty(_el$13, "disabled", _p$.e = _v$7);
+                _v$8 !== _p$.t && web.setAttribute(_el$13, "title", _p$.t = _v$8);
+                _v$9 !== _p$.a && web.setAttribute(_el$13, "aria-label", _p$.a = _v$9);
                 return _p$;
               }, {
                 e: void 0,
@@ -219,12 +395,12 @@ const ChartJSRenderer = (props) => {
                 a: void 0
               });
               web.runHydrationEvents();
-              return _el$9;
+              return _el$13;
             }
-          }), _el$1, _co$);
-          web.setAttribute(_el$10, "id", descriptionId);
-          web.insert(_el$10, title, _el$13, _co$2);
-          web.insert(_el$10, () => strings.chartDataSummary, _el$15, _co$3);
+          }), _el$17, _co$3);
+          web.setAttribute(_el$18, "id", descriptionId);
+          web.insert(_el$18, title, _el$21, _co$4);
+          web.insert(_el$18, () => strings.chartDataSummary, _el$23, _co$5);
           web.insert(_el$, web.createComponent(solidJs.Show, {
             get when() {
               return web.memo(() => !!error())() && activeView() === "chart";
@@ -241,103 +417,103 @@ const ChartJSRenderer = (props) => {
                 }
               }, tableData));
             }
-          }), _el$42, _co$9);
+          }), _el$50, _co$1);
           web.insert(_el$, web.createComponent(solidJs.Show, {
             get when() {
               return activeView() === "data";
             },
             get children() {
-              var _el$16 = web.getNextElement(_tmpl$4), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$20 = _el$18.firstChild, [_el$21, _co$4] = web.getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = web.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] = web.getNextMarker(_el$29.nextSibling), _el$31 = _el$30.nextSibling, [_el$32, _co$7] = web.getNextMarker(_el$31.nextSibling);
-              web.insert(_el$18, title, _el$21, _co$4);
-              web.insert(_el$18, () => strings.chartDataTable, _el$23, _co$5);
-              web.insert(_el$25, web.createComponent(solidJs.For, {
+              var _el$24 = web.getNextElement(_tmpl$6), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$28 = _el$26.firstChild, [_el$29, _co$6] = web.getNextMarker(_el$28.nextSibling), _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling, [_el$31, _co$7] = web.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] = web.getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$9] = web.getNextMarker(_el$39.nextSibling);
+              web.insert(_el$26, title, _el$29, _co$6);
+              web.insert(_el$26, () => strings.chartDataTable, _el$31, _co$7);
+              web.insert(_el$33, web.createComponent(solidJs.For, {
                 get each() {
                   return tableData().columns;
                 },
                 children: (column) => (() => {
-                  var _el$45 = web.getNextElement(_tmpl$7);
-                  web.insert(_el$45, column);
-                  return _el$45;
+                  var _el$53 = web.getNextElement(_tmpl$9);
+                  web.insert(_el$53, column);
+                  return _el$53;
                 })()
               }));
-              web.insert(_el$26, web.createComponent(solidJs.For, {
+              web.insert(_el$34, web.createComponent(solidJs.For, {
                 get each() {
                   return tableData().rows;
                 },
                 children: (row) => (() => {
-                  var _el$46 = web.getNextElement(_tmpl$8);
-                  web.insert(_el$46, web.createComponent(solidJs.For, {
+                  var _el$54 = web.getNextElement(_tmpl$0);
+                  web.insert(_el$54, web.createComponent(solidJs.For, {
                     get each() {
                       return tableData().columns;
                     },
                     children: (_column, index) => (() => {
-                      var _el$47 = web.getNextElement(_tmpl$9);
-                      web.insert(_el$47, () => String(row[index()] ?? ""));
-                      return _el$47;
+                      var _el$55 = web.getNextElement(_tmpl$1);
+                      web.insert(_el$55, () => String(row[index()] ?? ""));
+                      return _el$55;
                     })()
                   }));
-                  return _el$46;
+                  return _el$54;
                 })()
-              }), _el$30, _co$6);
-              web.insert(_el$26, web.createComponent(solidJs.Show, {
+              }), _el$38, _co$8);
+              web.insert(_el$34, web.createComponent(solidJs.Show, {
                 get when() {
                   return tableData().rows.length === 0;
                 },
                 get children() {
-                  var _el$27 = web.getNextElement(_tmpl$3), _el$28 = _el$27.firstChild;
-                  web.insert(_el$28, () => strings.chartNoData);
-                  web.effect(() => web.setAttribute(_el$28, "colspan", Math.max(1, tableData().columns.length)));
-                  return _el$27;
+                  var _el$35 = web.getNextElement(_tmpl$5), _el$36 = _el$35.firstChild;
+                  web.insert(_el$36, () => strings.chartNoData);
+                  web.effect(() => web.setAttribute(_el$36, "colspan", Math.max(1, tableData().columns.length)));
+                  return _el$35;
                 }
-              }), _el$32, _co$7);
+              }), _el$40, _co$9);
               web.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 && web.className(_el$16, _p$.e = _v$4);
-                _p$.t = web.style(_el$16, _v$5, _p$.t);
+                _v$0 !== _p$.e && web.className(_el$24, _p$.e = _v$0);
+                _p$.t = web.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" ? web.use(_ref$, _el$34) : canvasRef = _el$34;
-          web.setAttribute(_el$34, "aria-describedby", descriptionId);
-          web.insert(_el$33, web.createComponent(solidJs.Show, {
+          typeof _ref$ === "function" ? web.use(_ref$, _el$42) : canvasRef = _el$42;
+          web.setAttribute(_el$42, "aria-describedby", descriptionId);
+          web.insert(_el$41, web.createComponent(solidJs.Show, {
             get when() {
               return web.memo(() => !!isLoading())() && activeView() === "chart";
             },
             get children() {
-              var _el$35 = web.getNextElement(_tmpl$5), _el$36 = _el$35.firstChild, _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
-              web.insert(_el$38, () => strings.chartLoading);
-              return _el$35;
+              var _el$43 = web.getNextElement(_tmpl$7), _el$44 = _el$43.firstChild, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling;
+              web.insert(_el$46, () => strings.chartLoading);
+              return _el$43;
             }
-          }), _el$40, _co$8);
+          }), _el$48, _co$0);
           web.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 && web.className(_el$, _p$.e = _v$6);
-            _v$7 !== _p$.t && web.setAttribute(_el$6, "aria-label", _p$.t = _v$7);
-            _v$8 !== _p$.a && web.setAttribute(_el$7, "aria-pressed", _p$.a = _v$8);
-            _v$9 !== _p$.o && web.className(_el$7, _p$.o = _v$9);
-            _v$0 !== _p$.i && web.setAttribute(_el$8, "aria-pressed", _p$.i = _v$0);
-            _v$1 !== _p$.n && web.className(_el$8, _p$.n = _v$1);
-            _v$10 !== _p$.s && web.className(_el$33, _p$.s = _v$10);
-            _p$.h = web.style(_el$33, _v$11, _p$.h);
-            _v$12 !== _p$.r && web.setAttribute(_el$34, "aria-label", _p$.r = _v$12);
-            _v$13 !== _p$.d && web.setAttribute(_el$34, "aria-hidden", _p$.d = _v$13);
+            }, _v$18 = title(), _v$19 = activeView() !== "chart" || Boolean(error());
+            _v$10 !== _p$.e && web.className(_el$, _p$.e = _v$10);
+            _v$11 !== _p$.t && web.setAttribute(_el$6, "aria-label", _p$.t = _v$11);
+            _v$12 !== _p$.a && web.setAttribute(_el$7, "aria-pressed", _p$.a = _v$12);
+            _v$13 !== _p$.o && web.className(_el$7, _p$.o = _v$13);
+            _v$14 !== _p$.i && web.setAttribute(_el$8, "aria-pressed", _p$.i = _v$14);
+            _v$15 !== _p$.n && web.className(_el$8, _p$.n = _v$15);
+            _v$16 !== _p$.s && web.className(_el$41, _p$.s = _v$16);
+            _p$.h = web.style(_el$41, _v$17, _p$.h);
+            _v$18 !== _p$.r && web.setAttribute(_el$42, "aria-label", _p$.r = _v$18);
+            _v$19 !== _p$.d && web.setAttribute(_el$42, "aria-hidden", _p$.d = _v$19);
             return _p$;
           }, {
             e: void 0,