@seed-ship/mcp-ui-solid 6.24.0 → 6.25.1

package/dist/components/ChartJSRenderer.js

@@ -1,5 +1,5 @@
 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 { createSignal, onMount, createMemo, createUniqueId, createEffect, untrack, onCleanup, Show, For } from "solid-js";
 import { ExpandableWrapper, useExpanded } from "./ExpandableWrapper.js";
 import { DegradedFallback } from "./DegradedFallback.js";
 import { MissingValueMark, MissingValueLegend } from "./MissingValue.js";
@@ -9,8 +9,181 @@ import { summarizeChartMissing, PART_TO_WHOLE_CHART_TYPES } from "../utils/missi
 import { useTelemetry } from "../context/MCPUITelemetryContext.js";
 import { useMCPUIConfig } from "../context/MCPUIConfigContext.js";
 import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+import { observeTheme, readThemeTokens } from "../utils/theme.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-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(`<p>`), _tmpl$9 = /* @__PURE__ */ template(`<p data-mcp-chart-note=no-data>`), _tmpl$0 = /* @__PURE__ */ template(`<div data-mcp-chart-notes class="mt-2 space-y-0.5 text-xs text-gray-600 dark:text-gray-400"><!$><!/><!$><!/>`), _tmpl$1 = /* @__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><!$><!/></div><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$11 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$12 = /* @__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-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"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-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"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-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"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-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"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-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$6 = /* @__PURE__ */ template(`<div><table class="w-full border-collapse text-left text-sm"><caption class=sr-only><!$><!/> — <!$><!/></caption><thead class="bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-gray-900,#111827)_40%,transparent))]"><tr></tr></thead><tbody><!$><!/><!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-white,#fff)_80%,transparent))] dark:bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-gray-800,#1f2937)_80%,transparent))]"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[color:var(--mcp-ui-accent-border,var(--color-blue-600))]"></div><span class="text-sm text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$8 = /* @__PURE__ */ template(`<p>`), _tmpl$9 = /* @__PURE__ */ template(`<p data-mcp-chart-note=no-data>`), _tmpl$0 = /* @__PURE__ */ template(`<div data-mcp-chart-notes class="mt-2 space-y-0.5 text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"><!$><!/><!$><!/>`), _tmpl$1 = /* @__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-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] p-0.5 dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))]"role=group><button type=button></button><button type=button></button></div><!$><!/><!$><!/></div></div><p class=sr-only><!$><!/>. <!$><!/></p><!$><!/><!$><!/><div><canvas role=img></canvas><!$><!/></div><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<th scope=col class="px-3 py-2 font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-100,#f3f4f6))]">`), _tmpl$11 = /* @__PURE__ */ template(`<tr class="border-t border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">`), _tmpl$12 = /* @__PURE__ */ template(`<td class="px-3 py-2 text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]">`);
+const CHART_THEME_TOKENS = [...Array.from({
+  length: 8
+}, (_, i) => `--mcp-ui-chart-${i + 1}`), "--mcp-ui-chart-grid", "--mcp-ui-chart-axis", "--mcp-ui-chart-label", "--mcp-ui-surface", "--mcp-ui-fg", "--mcp-ui-border"];
+function createChartTheme(params, baseOptions, root, chartConfig) {
+  let tokens = readThemeTokens(root, CHART_THEME_TOKENS);
+  const originalDatasets = params.data.datasets.map((dataset) => ({
+    ...dataset
+  }));
+  let engineColors;
+  const sharedPaintOptions = /* @__PURE__ */ new WeakMap();
+  const paths = [{
+    path: ["plugins", "legend", "labels", "color"],
+    token: "--mcp-ui-chart-label"
+  }, {
+    path: ["plugins", "tooltip", "backgroundColor"],
+    token: "--mcp-ui-surface"
+  }, {
+    path: ["plugins", "tooltip", "titleColor"],
+    token: "--mcp-ui-fg"
+  }, {
+    path: ["plugins", "tooltip", "bodyColor"],
+    token: "--mcp-ui-fg"
+  }, {
+    path: ["plugins", "tooltip", "footerColor"],
+    token: "--mcp-ui-fg"
+  }, {
+    path: ["plugins", "tooltip", "borderColor"],
+    token: "--mcp-ui-border"
+  }];
+  const configuredScales = Object.keys(baseOptions.scales ?? {});
+  const scales = configuredScales.length ? configuredScales : params.type === "radar" || params.type === "polarArea" ? ["r"] : params.type === "pie" || params.type === "doughnut" ? [] : ["x", "y"];
+  const knownScales = /* @__PURE__ */ new Set();
+  const addScalePaths = (names) => {
+    for (const scale of names) {
+      if (knownScales.has(scale)) continue;
+      knownScales.add(scale);
+      for (const [part, token] of [["grid", "--mcp-ui-chart-grid"], ["border", "--mcp-ui-chart-axis"], ["ticks", "--mcp-ui-chart-label"], ["title", "--mcp-ui-chart-label"], ...scale === "r" ? [["angleLines", "--mcp-ui-chart-grid"], ["pointLabels", "--mcp-ui-chart-label"]] : []]) paths.push({
+        path: ["scales", scale, part, "color"],
+        token
+      });
+    }
+  };
+  addScalePaths(scales);
+  const read = (value, path) => path.reduce((part, key) => part == null ? void 0 : part[key], value);
+  const owned = /* @__PURE__ */ new Set();
+  const applyOptions = (options) => {
+    var _a;
+    for (const {
+      path,
+      token
+    } of paths) {
+      if (read(baseOptions, path) !== void 0) continue;
+      if (token === "--mcp-ui-chart-label" && ((_a = params.options) == null ? void 0 : _a.color) !== void 0) continue;
+      let blocked = false;
+      for (let i = 1; i < path.length; i++) {
+        const part = read(baseOptions, path.slice(0, i));
+        if (part === false || part === null) blocked = true;
+      }
+      if (blocked) continue;
+      const key = path.join(".");
+      const color = tokens[token];
+      if (!color && !owned.has(key)) continue;
+      let target = options;
+      for (const part of path.slice(0, -1)) {
+        target[part] = {
+          ...target[part]
+        };
+        target = target[part];
+      }
+      if (color) {
+        target[path.at(-1)] = color;
+        owned.add(key);
+      } else {
+        delete target[path.at(-1)];
+        owned.delete(key);
+      }
+    }
+  };
+  const plugin = {
+    id: "mcp-ui-theme",
+    beforeInit(chart) {
+      addScalePaths(Object.keys(chart.config.options.scales ?? {}));
+      applyOptions(chart.config.options);
+    },
+    // Global Colors runs first. Capture its actual output rather than copying
+    // a version-specific 7-color palette (or changing its opt-out semantics).
+    beforeLayout(chart) {
+      const datasets = chart.data.datasets;
+      engineColors ?? (engineColors = datasets.map((dataset) => ({
+        backgroundColor: Array.isArray(dataset.backgroundColor) ? [...dataset.backgroundColor] : dataset.backgroundColor,
+        borderColor: Array.isArray(dataset.borderColor) ? [...dataset.borderColor] : dataset.borderColor
+      })));
+      const callerOptions = params.options;
+      let pointOffset = 0;
+      datasets.forEach((dataset, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+        const original = originalDatasets[index];
+        const baseline = engineColors[index];
+        if (!original || !baseline) return;
+        const datasetType = original.type ?? params.type;
+        const perPoint = ["pie", "doughnut", "polarArea"].includes(datasetType);
+        const lineWithPoints = datasetType === "line" || datasetType === "radar";
+        const elementKinds = datasetType === "bar" ? ["bar"] : perPoint ? ["arc"] : lineWithPoints ? ["line"] : ["point"];
+        const hasSeriesToken = perPoint ? dataset.data.some((_, i) => tokens[`--mcp-ui-chart-${(pointOffset + i) % 8 + 1}`]) : Boolean(tokens[`--mcp-ui-chart-${index % 8 + 1}`]);
+        for (const field of ["backgroundColor", "borderColor"]) {
+          if (original[field] !== void 0) continue;
+          const callerDatasetColor = (_b = (_a = callerOptions == null ? void 0 : callerOptions.datasets) == null ? void 0 : _a[datasetType]) == null ? void 0 : _b[field];
+          if (callerDatasetColor !== void 0) {
+            const color = hasSeriesToken ? callerDatasetColor : baseline[field];
+            if (color !== void 0) dataset[field] = color;
+            else delete dataset[field];
+            continue;
+          }
+          if ((callerOptions == null ? void 0 : callerOptions[field]) !== void 0 || elementKinds.some((kind) => {
+            var _a2, _b2;
+            return ((_b2 = (_a2 = callerOptions == null ? void 0 : callerOptions.elements) == null ? void 0 : _a2[kind]) == null ? void 0 : _b2[field]) !== void 0;
+          })) continue;
+          if (lineWithPoints && hasSeriesToken) {
+            const pointField = field === "borderColor" ? "pointBorderColor" : "pointBackgroundColor";
+            const scopedPointPaint = (_f = (_e = (_d = (_c = callerOptions == null ? void 0 : callerOptions.datasets) == null ? void 0 : _c[datasetType]) == null ? void 0 : _d.elements) == null ? void 0 : _e.point) == null ? void 0 : _f[field];
+            const pointPaint = scopedPointPaint !== void 0 ? scopedPointPaint : (_h = (_g = callerOptions == null ? void 0 : callerOptions.elements) == null ? void 0 : _g.point) == null ? void 0 : _h[field];
+            if (original[pointField] === void 0 && ((_j = (_i = callerOptions == null ? void 0 : callerOptions.datasets) == null ? void 0 : _i[datasetType]) == null ? void 0 : _j[pointField]) === void 0 && (callerOptions == null ? void 0 : callerOptions[pointField]) === void 0 && pointPaint !== void 0) {
+              dataset[pointField] = pointPaint;
+            }
+          }
+          if (perPoint && field === "borderColor") continue;
+          if (perPoint) {
+            const previous = baseline[field];
+            const colors = dataset.data.map((_, i) => tokens[`--mcp-ui-chart-${(pointOffset + i) % 8 + 1}`] ?? (Array.isArray(previous) ? previous[i % previous.length] : previous));
+            dataset[field] = colors.some((_, i) => tokens[`--mcp-ui-chart-${(pointOffset + i) % 8 + 1}`]) ? colors : previous;
+          } else {
+            const color = tokens[`--mcp-ui-chart-${index % 8 + 1}`];
+            if (color || baseline[field] !== void 0) dataset[field] = color ?? baseline[field];
+            else delete dataset[field];
+          }
+        }
+        if (perPoint) pointOffset += dataset.data.length;
+      });
+    },
+    afterDatasetUpdate(_chart, args) {
+      var _a, _b;
+      const meta = args.meta;
+      if (!((_a = meta == null ? void 0 : meta.data) == null ? void 0 : _a.length) || typeof ((_b = meta.controller) == null ? void 0 : _b.getStyle) !== "function") return;
+      const index = meta.data.findIndex((element) => {
+        var _a2;
+        return ((_a2 = element.options) == null ? void 0 : _a2.$shared) && !element.active;
+      });
+      if (index >= 0 && !Object.isFrozen(meta.data[index].options)) {
+        sharedPaintOptions.set(meta.controller, meta.data[index].options);
+      }
+      if (args.mode !== "none") return;
+      const shared = sharedPaintOptions.get(meta.controller);
+      if (!shared) return;
+      const resolved = meta.controller.getStyle(index >= 0 ? index : 0, false);
+      if (!resolved.$shared) return;
+      shared.backgroundColor = resolved.backgroundColor;
+      shared.borderColor = resolved.borderColor;
+    }
+  };
+  chartConfig.plugins = [...chartConfig.plugins ?? [], plugin];
+  return {
+    applyOptions,
+    refresh(chart) {
+      const next = readThemeTokens(root, CHART_THEME_TOKENS);
+      if (CHART_THEME_TOKENS.every((name) => next[name] === tokens[name])) return;
+      tokens = next;
+      addScalePaths(Object.keys(chart.scales ?? chart.config.options.scales ?? {}));
+      applyOptions(chart.config.options);
+      chart.update("none");
+    }
+  };
+}
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -101,8 +274,18 @@ const ChartJSRenderer = (props) => {
   const [zoomPlugin, setZoomPlugin] = createSignal(null);
   const [isZoomed, setIsZoomed] = createSignal(false);
   let canvasRef;
+  let themeRoot;
   let chartInstance;
+  let chartTheme;
   let renderVersion = 0;
+  onMount(() => {
+    if (themeRoot) {
+      const stop = observeTheme(themeRoot, () => {
+        if (chartInstance) chartTheme == null ? void 0 : chartTheme.refresh(chartInstance);
+      });
+      onCleanup(stop);
+    }
+  });
   const params = () => props.component.params;
   const telemetry = useTelemetry();
   const config = useMCPUIConfig();
@@ -274,7 +457,15 @@ const ChartJSRenderer = (props) => {
       applyUnitAxisTitle(baseOptions, chartParams.type, chartUnit);
       const chartConfig = {
         type: chartParams.type,
-        data: chartParams.data,
+        // The Colors plugin writes its generated palette onto datasets. Never
+        // let that turn a shared payload into caller-supplied colors for the
+        // next renderer, nor mutate data owned by a host application.
+        data: {
+          ...chartParams.data,
+          datasets: chartParams.data.datasets.map((dataset) => ({
+            ...dataset
+          }))
+        },
         options: baseOptions
       };
       if (chartUnit !== void 0 || chartMissing.hasMissing) {
@@ -307,9 +498,26 @@ const ChartJSRenderer = (props) => {
           getFontFamily: () => {
             var _a2, _b2;
             return (_b2 = (_a2 = Chart == null ? void 0 : Chart.defaults) == null ? void 0 : _a2.font) == null ? void 0 : _b2.family;
+          },
+          getTextColor: () => {
+            var _a2;
+            return ((_a2 = chartParams.options) == null ? void 0 : _a2.color) ?? readThemeTokens(themeRoot, ["--mcp-ui-chart-label"])["--mcp-ui-chart-label"];
           }
         })];
       }
+      if (themeRoot) {
+        const originalOptions = {
+          ...baseOptions,
+          plugins: {
+            ...baseOptions.plugins
+          },
+          scales: baseOptions.scales ? {
+            ...baseOptions.scales
+          } : void 0
+        };
+        chartTheme = createChartTheme(chartParams, originalOptions, themeRoot, chartConfig);
+        chartTheme.applyOptions(baseOptions);
+      }
       chartInstance = new Chart(canvasRef, chartConfig);
       setIsZoomed(false);
       setIsLoading(false);
@@ -360,6 +568,8 @@ const ChartJSRenderer = (props) => {
       return createComponent(ContextAwareChartLayout, {
         render: (isExpanded2) => (() => {
           var _el$ = getNextElement(_tmpl$1), _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$56 = _el$18.nextSibling, [_el$57, _co$11] = getNextMarker(_el$56.nextSibling), _el$58 = _el$57.nextSibling, [_el$59, _co$12] = getNextMarker(_el$58.nextSibling), _el$41 = _el$59.nextSibling, _el$42 = _el$41.firstChild, _el$47 = _el$42.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling), _el$60 = _el$41.nextSibling, [_el$61, _co$13] = getNextMarker(_el$60.nextSibling);
+          var _ref$ = themeRoot;
+          typeof _ref$ === "function" ? use(_ref$, _el$) : themeRoot = _el$;
           insert(_el$3, createComponent(Show, {
             get when() {
               return params().title;
@@ -522,7 +732,7 @@ const ChartJSRenderer = (props) => {
                   }
                 }), _el$40, _co$9);
                 effect((_p$) => {
-                  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 : {
+                  var _v$0 = `w-full overflow-auto rounded border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$1 = isExpanded2() ? void 0 : {
                     height: params().height || "250px",
                     "max-height": "70vh"
                   };
@@ -546,8 +756,8 @@ const ChartJSRenderer = (props) => {
               })];
             }
           }), _el$59, _co$12);
-          var _ref$ = canvasRef;
-          typeof _ref$ === "function" ? use(_ref$, _el$42) : canvasRef = _el$42;
+          var _ref$2 = canvasRef;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$42) : canvasRef = _el$42;
           insert(_el$41, createComponent(Show, {
             get when() {
               return memo(() => !!isLoading())() && activeView() === "chart";
@@ -595,7 +805,7 @@ const ChartJSRenderer = (props) => {
             }
           }), _el$61, _co$13);
           effect((_p$) => {
-            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" ? {
+            var _v$10 = `mcp-ui-root relative w-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] 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-[color:var(--mcp-ui-accent,var(--color-gray-900,#111827))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-accent,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-accent-fg,var(--color-gray-900,#111827))]" : "text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))]"}`, _v$14 = activeView() === "data", _v$15 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "data" ? "bg-[color:var(--mcp-ui-accent,var(--color-gray-900,#111827))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-accent,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-accent-fg,var(--color-gray-900,#111827))]" : "text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))]"}`, _v$16 = `relative w-full ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$17 = error() || activeView() === "data" ? {
               display: "none"
             } : isExpanded2() ? {
               height: "100%",