@seed-ship/mcp-ui-solid 2.1.3 → 2.2.3

package/dist/components/ChartJSRenderer.cjs

@@ -24,7 +24,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
-var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$2 = /* @__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">Loading chart...`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="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"><!$><!/><!$><!/><!$><!/><div class="w-full h-[250px]"><canvas>`);
+const ExpandableWrapper = require("./ExpandableWrapper.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="opacity-0 group-hover: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"title="Download PNG"aria-label="Download chart as PNG"><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(`<div class="flex items-center justify-between mb-3"><!$><!/><!$><!/>`), _tmpl$4 = /* @__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">Loading chart...`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="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"><!$><!/><!$><!/><!$><!/><div class=w-full><canvas>`);
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -54,6 +55,14 @@ const ChartJSRenderer = (props) => {
   let canvasRef;
   let chartInstance;
   const params = () => props.component.params;
+  const handleExportPNG = () => {
+    if (!canvasRef) return;
+    const url = canvasRef.toDataURL("image/png");
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${(params().title || "chart").replace(/\s+/g, "-").toLowerCase()}.png`;
+    a.click();
+  };
   solidJs.createEffect(async () => {
     var _a, _b, _c, _d;
     if (!canvasRef) return;
@@ -97,42 +106,76 @@ const ChartJSRenderer = (props) => {
       chartInstance = null;
     }
   });
-  return (() => {
-    var _el$ = web.getNextElement(_tmpl$4), _el$1 = _el$.firstChild, [_el$10, _co$] = web.getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = web.getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = web.getNextMarker(_el$13.nextSibling), _el$9 = _el$14.nextSibling, _el$0 = _el$9.firstChild;
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return params().title;
-      },
-      get children() {
-        var _el$2 = web.getNextElement(_tmpl$);
-        web.insert(_el$2, () => params().title);
-        return _el$2;
-      }
-    }), _el$10, _co$);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return isLoading();
-      },
-      get children() {
-        return web.getNextElement(_tmpl$2);
-      }
-    }), _el$12, _co$2);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return error();
-      },
-      get children() {
-        var _el$4 = web.getNextElement(_tmpl$3), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
-        web.insert(_el$8, error);
-        return _el$4;
-      }
-    }), _el$14, _co$3);
-    var _ref$ = canvasRef;
-    typeof _ref$ === "function" ? web.use(_ref$, _el$0) : canvasRef = _el$0;
-    web.effect((_$p) => web.setStyleProperty(_el$9, "display", error() ? "none" : "block"));
-    return _el$;
-  })();
+  return web.createComponent(ExpandableWrapper.ExpandableWrapper, {
+    get title() {
+      return params().title || "Chart";
+    },
+    get children() {
+      var _el$ = web.getNextElement(_tmpl$6), _el$15 = _el$.firstChild, [_el$16, _co$3] = web.getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$4] = web.getNextMarker(_el$17.nextSibling), _el$19 = _el$18.nextSibling, [_el$20, _co$5] = web.getNextMarker(_el$19.nextSibling), _el$13 = _el$20.nextSibling, _el$14 = _el$13.firstChild;
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return params().title || params().exportable;
+        },
+        get children() {
+          var _el$2 = web.getNextElement(_tmpl$3), _el$5 = _el$2.firstChild, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = web.getNextMarker(_el$7.nextSibling);
+          web.insert(_el$2, web.createComponent(solidJs.Show, {
+            get when() {
+              return params().title;
+            },
+            get children() {
+              var _el$3 = web.getNextElement(_tmpl$);
+              web.insert(_el$3, () => params().title);
+              return _el$3;
+            }
+          }), _el$6, _co$);
+          web.insert(_el$2, web.createComponent(solidJs.Show, {
+            get when() {
+              return params().exportable;
+            },
+            get children() {
+              var _el$4 = web.getNextElement(_tmpl$2);
+              _el$4.$$click = handleExportPNG;
+              web.runHydrationEvents();
+              return _el$4;
+            }
+          }), _el$8, _co$2);
+          return _el$2;
+        }
+      }), _el$16, _co$3);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return isLoading();
+        },
+        get children() {
+          return web.getNextElement(_tmpl$4);
+        }
+      }), _el$18, _co$4);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return error();
+        },
+        get children() {
+          var _el$0 = web.getNextElement(_tmpl$5), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling;
+          web.insert(_el$12, error);
+          return _el$0;
+        }
+      }), _el$20, _co$5);
+      var _ref$ = canvasRef;
+      typeof _ref$ === "function" ? web.use(_ref$, _el$14) : canvasRef = _el$14;
+      web.effect((_p$) => {
+        var _v$ = params().height || "250px", _v$2 = error() ? "none" : "block";
+        _v$ !== _p$.e && web.setStyleProperty(_el$13, "height", _p$.e = _v$);
+        _v$2 !== _p$.t && web.setStyleProperty(_el$13, "display", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    }
+  });
 };
+web.delegateEvents(["click"]);
 exports.ChartJSRenderer = ChartJSRenderer;
 exports.isChartJSAvailable = isChartJSAvailable;
 //# sourceMappingURL=ChartJSRenderer.cjs.map

package/dist/components/ChartJSRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartJSRenderer.cjs","sources":["../../src/components/ChartJSRenderer.tsx"],"sourcesContent":["/**\n * ChartJSRenderer - Native Chart.js rendering\n * Sprint 4: State & Charts\n *\n * Requires chart.js peer dependency:\n * ```\n * pnpm add chart.js\n * ```\n */\n\nimport { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'\nimport type { UIComponent, ChartComponentParams } from '../types'\n\n// Lazy load Chart.js to avoid bundling if not used\nlet ChartJS: any = null\nlet chartJSLoadPromise: Promise<any> | null = null\n\nconst loadChartJS = async () => {\n  if (ChartJS) return ChartJS\n\n  if (!chartJSLoadPromise) {\n    chartJSLoadPromise = import('chart.js/auto')\n      .then((module) => {\n        ChartJS = module.default || module.Chart\n        return ChartJS\n      })\n      .catch((err) => {\n        chartJSLoadPromise = null\n        throw err\n      })\n  }\n\n  return chartJSLoadPromise\n}\n\n/**\n * Check if Chart.js is available\n */\nexport async function isChartJSAvailable(): Promise<boolean> {\n  try {\n    await loadChartJS()\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport interface ChartJSRendererProps {\n  /**\n   * UIComponent with chart params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n}\n\n/**\n * Native Chart.js renderer component\n *\n * @example\n * ```tsx\n * const chartComponent: UIComponent = {\n *   id: 'revenue-chart',\n *   type: 'chart',\n *   position: { colStart: 1, colSpan: 6 },\n *   params: {\n *     type: 'bar',\n *     title: 'Monthly Revenue',\n *     data: {\n *       labels: ['Jan', 'Feb', 'Mar'],\n *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]\n *     },\n *     renderer: 'native',\n *   },\n * }\n * <ChartJSRenderer component={chartComponent} />\n * ```\n */\nexport const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {\n  const [isLoading, setIsLoading] = createSignal(true)\n  const [error, setError] = createSignal<string>()\n  let canvasRef: HTMLCanvasElement | undefined\n  let chartInstance: any\n\n  const params = () => props.component.params as ChartComponentParams\n\n  // Create/update chart when params change\n  createEffect(async () => {\n    if (!canvasRef) return\n\n    // Access params to track dependencies\n    const chartParams = params()\n\n    setIsLoading(true)\n    setError(undefined)\n\n    try {\n      const Chart = await loadChartJS()\n\n      // Destroy previous instance\n      if (chartInstance) {\n        chartInstance.destroy()\n        chartInstance = null\n      }\n\n      // Create new chart\n      chartInstance = new Chart(canvasRef, {\n        type: chartParams.type,\n        data: chartParams.data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          ...chartParams.options,\n          plugins: {\n            ...chartParams.options?.plugins,\n            legend: {\n              display: true,\n              position: 'bottom',\n              ...chartParams.options?.plugins?.legend,\n            },\n          },\n        },\n      })\n\n      setIsLoading(false)\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Chart rendering failed')\n      setError(error.message)\n      setIsLoading(false)\n      props.onError?.(error)\n    }\n  })\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (chartInstance) {\n      chartInstance.destroy()\n      chartInstance = null\n    }\n  })\n\n  return (\n    <div class=\"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\">\n      <Show when={params().title}>\n        <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white mb-3\">\n          {params().title}\n        </h3>\n      </Show>\n\n      <Show when={isLoading()}>\n        <div class=\"absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80\">\n          <div class=\"flex flex-col items-center gap-2\">\n            <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600\" />\n            <span class=\"text-sm text-gray-500 dark:text-gray-400\">Loading chart...</span>\n          </div>\n        </div>\n      </Show>\n\n      <Show when={error()}>\n        <div class=\"absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800\">\n          <div class=\"text-center\">\n            <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3\">\n              <svg\n                class=\"w-6 h-6 text-red-600 dark:text-red-400\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n            </div>\n            <p class=\"text-red-600 dark:text-red-400 text-sm font-medium\">Chart Error</p>\n            <p class=\"text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs\">{error()}</p>\n          </div>\n        </div>\n      </Show>\n\n      <div\n        class=\"w-full h-[250px]\"\n        style={{ display: error() ? 'none' : 'block' }}\n      >\n        <canvas ref={canvasRef} />\n      </div>\n    </div>\n  )\n}\n"],"names":["ChartJS","chartJSLoadPromise","loadChartJS","then","module","default","Chart","catch","err","isChartJSAvailable","ChartJSRenderer","props","isLoading","setIsLoading","createSignal","error","setError","canvasRef","chartInstance","params","component","createEffect","chartParams","undefined","destroy","type","data","options","responsive","maintainAspectRatio","plugins","legend","display","position","Error","message","onError","onCleanup","_el$","_$getNextElement","_tmpl$4","_el$1","firstChild","_el$10","_co$","_$getNextMarker","nextSibling","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","_el$9","_el$0","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_tmpl$2","_el$4","_tmpl$3","_el$5","_el$6","_el$7","_el$8","_ref$","_$use","_$effect","_$p","_$setStyleProperty"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAIA,UAAe;AACnB,IAAIC,qBAA0C;AAE9C,MAAMC,cAAc,YAAY;AAC9B,MAAIF,QAAS,QAAOA;AAEpB,MAAI,CAACC,oBAAoB;AACvBA,yBAAqB,OAAO,eAAe,EACxCE,KAAMC,CAAAA,YAAW;AAChBJ,gBAAUI,QAAOC,WAAWD,QAAOE;AACnC,aAAON;AAAAA,IACT,CAAC,EACAO,MAAOC,CAAAA,QAAQ;AACdP,2BAAqB;AACrB,YAAMO;AAAAA,IACR,CAAC;AAAA,EACL;AAEA,SAAOP;AACT;AAKA,eAAsBQ,qBAAuC;AAC3D,MAAI;AACF,UAAMP,YAAAA;AACN,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAoCO,MAAMQ,kBAAoDC,CAAAA,UAAU;AACzE,QAAM,CAACC,WAAWC,YAAY,IAAIC,QAAAA,aAAa,IAAI;AACnD,QAAM,CAACC,OAAOC,QAAQ,IAAIF,qBAAAA;AAC1B,MAAIG;AACJ,MAAIC;AAEJ,QAAMC,SAASA,MAAMR,MAAMS,UAAUD;AAGrCE,UAAAA,aAAa,YAAY;;AACvB,QAAI,CAACJ,UAAW;AAGhB,UAAMK,cAAcH,OAAAA;AAEpBN,iBAAa,IAAI;AACjBG,aAASO,MAAS;AAElB,QAAI;AACF,YAAMjB,QAAQ,MAAMJ,YAAAA;AAGpB,UAAIgB,eAAe;AACjBA,sBAAcM,QAAAA;AACdN,wBAAgB;AAAA,MAClB;AAGAA,sBAAgB,IAAIZ,MAAMW,WAAW;AAAA,QACnCQ,MAAMH,YAAYG;AAAAA,QAClBC,MAAMJ,YAAYI;AAAAA,QAClBC,SAAS;AAAA,UACPC,YAAY;AAAA,UACZC,qBAAqB;AAAA,UACrB,GAAGP,YAAYK;AAAAA,UACfG,SAAS;AAAA,YACP,IAAGR,iBAAYK,YAAZL,mBAAqBQ;AAAAA,YACxBC,QAAQ;AAAA,cACNC,SAAS;AAAA,cACTC,UAAU;AAAA,cACV,IAAGX,uBAAYK,YAAZL,mBAAqBQ,YAArBR,mBAA8BS;AAAAA,YAAAA;AAAAA,UACnC;AAAA,QACF;AAAA,MACF,CACD;AAEDlB,mBAAa,KAAK;AAAA,IACpB,SAASL,KAAK;AACZ,YAAMO,SAAQP,eAAe0B,QAAQ1B,MAAM,IAAI0B,MAAM,wBAAwB;AAC7ElB,eAASD,OAAMoB,OAAO;AACtBtB,mBAAa,KAAK;AAClBF,kBAAMyB,YAANzB,+BAAgBI;AAAAA,IAClB;AAAA,EACF,CAAC;AAGDsB,UAAAA,UAAU,MAAM;AACd,QAAInB,eAAe;AACjBA,oBAAcM,QAAAA;AACdN,sBAAgB;AAAA,IAClB;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAAoB,OAAAC,IAAAA,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAA,CAAAC,QAAAC,IAAA,IAAAC,IAAAA,cAAAJ,MAAAK,WAAA,GAAAC,SAAAJ,OAAAG,aAAA,CAAAE,QAAAC,KAAA,IAAAJ,kBAAAE,OAAAD,WAAA,GAAAI,SAAAF,OAAAF,aAAA,CAAAK,QAAAC,KAAA,IAAAP,IAAAA,cAAAK,OAAAJ,WAAA,GAAAO,QAAAF,OAAAL,aAAAQ,QAAAD,MAAAX;AAAAa,eAAAjB,MAAAkB,IAAAA,gBAEKC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvC,SAASwC;AAAAA,MAAK;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAtB,IAAAA,eAAAuB,MAAA;AAAAP,YAAAA,OAAAM,OAAA,MAErB1C,OAAAA,EAASwC,KAAK;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAlB,QAAAC,IAAA;AAAAW,eAAAjB,MAAAkB,IAAAA,gBAIlBC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE9C,UAAAA;AAAAA,MAAW;AAAA,MAAA,IAAAgD,WAAA;AAAA,eAAArB,IAAAA,eAAAwB,OAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAf,QAAAC,KAAA;AAAAM,eAAAjB,MAAAkB,IAAAA,gBAStBC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE3C,MAAAA;AAAAA,MAAO;AAAA,MAAA,IAAA6C,WAAA;AAAA,YAAAI,QAAAzB,IAAAA,eAAA0B,OAAA,GAAAC,QAAAF,MAAAtB,YAAAyB,QAAAD,MAAAxB,YAAA0B,QAAAD,MAAArB,aAAAuB,QAAAD,MAAAtB;AAAAS,YAAAA,OAAAc,OAmBsDtD,KAAK;AAAA,eAAAiD;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAb,QAAAC,KAAA;AAAA,QAAAkB,QAS/DrD;AAAS,WAAAqD,UAAA,aAAAC,IAAAA,IAAAD,OAAAhB,KAAA,IAATrC,YAASqC;AAAAkB,eAAAC,CAAAA,QAAAC,IAAAA,iBAAArB,OAAA,WAFJtC,UAAU,SAAS,OAAO,CAAA;AAAA,WAAAuB;AAAAA,EAAA,GAAA;AAMpD;;;"}
+{"version":3,"file":"ChartJSRenderer.cjs","sources":["../../src/components/ChartJSRenderer.tsx"],"sourcesContent":["/**\n * ChartJSRenderer - Native Chart.js rendering\n * Sprint 4: State & Charts\n *\n * Requires chart.js peer dependency:\n * ```\n * pnpm add chart.js\n * ```\n */\n\nimport { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'\nimport type { UIComponent, ChartComponentParams } from '../types'\nimport { ExpandableWrapper } from './ExpandableWrapper'\n\n// Lazy load Chart.js to avoid bundling if not used\nlet ChartJS: any = null\nlet chartJSLoadPromise: Promise<any> | null = null\n\nconst loadChartJS = async () => {\n  if (ChartJS) return ChartJS\n\n  if (!chartJSLoadPromise) {\n    chartJSLoadPromise = import('chart.js/auto')\n      .then((module) => {\n        ChartJS = module.default || module.Chart\n        return ChartJS\n      })\n      .catch((err) => {\n        chartJSLoadPromise = null\n        throw err\n      })\n  }\n\n  return chartJSLoadPromise\n}\n\n/**\n * Check if Chart.js is available\n */\nexport async function isChartJSAvailable(): Promise<boolean> {\n  try {\n    await loadChartJS()\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport interface ChartJSRendererProps {\n  /**\n   * UIComponent with chart params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n}\n\n/**\n * Native Chart.js renderer component\n *\n * @example\n * ```tsx\n * const chartComponent: UIComponent = {\n *   id: 'revenue-chart',\n *   type: 'chart',\n *   position: { colStart: 1, colSpan: 6 },\n *   params: {\n *     type: 'bar',\n *     title: 'Monthly Revenue',\n *     data: {\n *       labels: ['Jan', 'Feb', 'Mar'],\n *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]\n *     },\n *     renderer: 'native',\n *   },\n * }\n * <ChartJSRenderer component={chartComponent} />\n * ```\n */\nexport const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {\n  const [isLoading, setIsLoading] = createSignal(true)\n  const [error, setError] = createSignal<string>()\n  let canvasRef: HTMLCanvasElement | undefined\n  let chartInstance: any\n\n  const params = () => props.component.params as ChartComponentParams\n\n  // Chart PNG export\n  const handleExportPNG = () => {\n    if (!canvasRef) return\n    const url = canvasRef.toDataURL('image/png')\n    const a = document.createElement('a')\n    a.href = url\n    a.download = `${(params().title || 'chart').replace(/\\s+/g, '-').toLowerCase()}.png`\n    a.click()\n  }\n\n  // Create/update chart when params change\n  createEffect(async () => {\n    if (!canvasRef) return\n\n    // Access params to track dependencies\n    const chartParams = params()\n\n    setIsLoading(true)\n    setError(undefined)\n\n    try {\n      const Chart = await loadChartJS()\n\n      // Destroy previous instance\n      if (chartInstance) {\n        chartInstance.destroy()\n        chartInstance = null\n      }\n\n      // Create new chart\n      chartInstance = new Chart(canvasRef, {\n        type: chartParams.type,\n        data: chartParams.data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          ...chartParams.options,\n          plugins: {\n            ...chartParams.options?.plugins,\n            legend: {\n              display: true,\n              position: 'bottom',\n              ...chartParams.options?.plugins?.legend,\n            },\n          },\n        },\n      })\n\n      setIsLoading(false)\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Chart rendering failed')\n      setError(error.message)\n      setIsLoading(false)\n      props.onError?.(error)\n    }\n  })\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (chartInstance) {\n      chartInstance.destroy()\n      chartInstance = null\n    }\n  })\n\n  return (\n    <ExpandableWrapper title={params().title || 'Chart'}>\n      <div class=\"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\">\n        <Show when={params().title || params().exportable}>\n          <div class=\"flex items-center justify-between mb-3\">\n            <Show when={params().title}>\n              <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">\n                {params().title}\n              </h3>\n            </Show>\n            <Show when={params().exportable}>\n              <button\n                onClick={handleExportPNG}\n                class=\"opacity-0 group-hover: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\"\n                title=\"Download PNG\"\n                aria-label=\"Download chart as PNG\"\n              >\n                <svg class=\"w-3 h-3 text-gray-500 dark:text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <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\" />\n                </svg>\n              </button>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={isLoading()}>\n          <div class=\"absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80\">\n            <div class=\"flex flex-col items-center gap-2\">\n              <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600\" />\n              <span class=\"text-sm text-gray-500 dark:text-gray-400\">Loading chart...</span>\n            </div>\n          </div>\n        </Show>\n\n        <Show when={error()}>\n          <div class=\"absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800\">\n            <div class=\"text-center\">\n              <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3\">\n                <svg\n                  class=\"w-6 h-6 text-red-600 dark:text-red-400\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                  />\n                </svg>\n              </div>\n              <p class=\"text-red-600 dark:text-red-400 text-sm font-medium\">Chart Error</p>\n              <p class=\"text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs\">{error()}</p>\n            </div>\n          </div>\n        </Show>\n\n        <div\n          class=\"w-full\"\n          style={{ height: params().height || '250px', display: error() ? 'none' : 'block' }}\n        >\n          <canvas ref={canvasRef} />\n        </div>\n      </div>\n    </ExpandableWrapper>\n  )\n}\n"],"names":["ChartJS","chartJSLoadPromise","loadChartJS","then","module","default","Chart","catch","err","isChartJSAvailable","ChartJSRenderer","props","isLoading","setIsLoading","createSignal","error","setError","canvasRef","chartInstance","params","component","handleExportPNG","url","toDataURL","a","document","createElement","href","download","title","replace","toLowerCase","click","createEffect","chartParams","undefined","destroy","type","data","options","responsive","maintainAspectRatio","plugins","legend","display","position","Error","message","onError","onCleanup","_$createComponent","ExpandableWrapper","children","_el$","_$getNextElement","_tmpl$6","_el$15","firstChild","_el$16","_co$3","_$getNextMarker","nextSibling","_el$17","_el$18","_co$4","_el$19","_el$20","_co$5","_el$13","_el$14","_$insert","Show","when","exportable","_el$2","_tmpl$3","_el$5","_el$6","_co$","_el$7","_el$8","_co$2","_el$3","_tmpl$","_el$4","_tmpl$2","$$click","_$runHydrationEvents","_tmpl$4","_el$0","_tmpl$5","_el$1","_el$10","_el$11","_el$12","_ref$","_$use","_$effect","_p$","_v$","height","_v$2","e","_$setStyleProperty","t","_$delegateEvents"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChartJSRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ChartJSRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAA+C,MAAM,UAAU,CAAA;AACjF,OAAO,KAAK,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAA;AAwBjE;;GAEG;AACH,wBAAsB,kBAAkB,IAAI,OAAO,CAAC,OAAO,CAAC,CAO3D;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,EAAE,WAAW,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,CAAC,oBAAoB,CAgH3D,CAAA"}
+{"version":3,"file":"ChartJSRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ChartJSRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAA+C,MAAM,UAAU,CAAA;AACjF,OAAO,KAAK,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAA;AAyBjE;;GAEG;AACH,wBAAsB,kBAAkB,IAAI,OAAO,CAAC,OAAO,CAAC,CAO3D;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,EAAE,WAAW,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,CAAC,oBAAoB,CA4I3D,CAAA"}

package/dist/components/ChartJSRenderer.js

@@ -1,6 +1,7 @@
-import { getNextElement, template, getNextMarker, insert, createComponent, effect, setStyleProperty, use } from "solid-js/web";
+import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, runHydrationEvents, effect, setStyleProperty, use } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show } from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$2 = /* @__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">Loading chart...`), _tmpl$3 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="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"><!$><!/><!$><!/><!$><!/><div class="w-full h-[250px]"><canvas>`);
+import { ExpandableWrapper } from "./ExpandableWrapper.js";
+var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="opacity-0 group-hover: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"title="Download PNG"aria-label="Download chart as PNG"><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(`<div class="flex items-center justify-between mb-3"><!$><!/><!$><!/>`), _tmpl$4 = /* @__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">Loading chart...`), _tmpl$5 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$6 = /* @__PURE__ */ template(`<div class="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"><!$><!/><!$><!/><!$><!/><div class=w-full><canvas>`);
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -30,6 +31,14 @@ const ChartJSRenderer = (props) => {
   let canvasRef;
   let chartInstance;
   const params = () => props.component.params;
+  const handleExportPNG = () => {
+    if (!canvasRef) return;
+    const url = canvasRef.toDataURL("image/png");
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${(params().title || "chart").replace(/\s+/g, "-").toLowerCase()}.png`;
+    a.click();
+  };
   createEffect(async () => {
     var _a, _b, _c, _d;
     if (!canvasRef) return;
@@ -73,42 +82,76 @@ const ChartJSRenderer = (props) => {
       chartInstance = null;
     }
   });
-  return (() => {
-    var _el$ = getNextElement(_tmpl$4), _el$1 = _el$.firstChild, [_el$10, _co$] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling), _el$9 = _el$14.nextSibling, _el$0 = _el$9.firstChild;
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return params().title;
-      },
-      get children() {
-        var _el$2 = getNextElement(_tmpl$);
-        insert(_el$2, () => params().title);
-        return _el$2;
-      }
-    }), _el$10, _co$);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return isLoading();
-      },
-      get children() {
-        return getNextElement(_tmpl$2);
-      }
-    }), _el$12, _co$2);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return error();
-      },
-      get children() {
-        var _el$4 = getNextElement(_tmpl$3), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
-        insert(_el$8, error);
-        return _el$4;
-      }
-    }), _el$14, _co$3);
-    var _ref$ = canvasRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$0) : canvasRef = _el$0;
-    effect((_$p) => setStyleProperty(_el$9, "display", error() ? "none" : "block"));
-    return _el$;
-  })();
+  return createComponent(ExpandableWrapper, {
+    get title() {
+      return params().title || "Chart";
+    },
+    get children() {
+      var _el$ = getNextElement(_tmpl$6), _el$15 = _el$.firstChild, [_el$16, _co$3] = getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$4] = getNextMarker(_el$17.nextSibling), _el$19 = _el$18.nextSibling, [_el$20, _co$5] = getNextMarker(_el$19.nextSibling), _el$13 = _el$20.nextSibling, _el$14 = _el$13.firstChild;
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return params().title || params().exportable;
+        },
+        get children() {
+          var _el$2 = getNextElement(_tmpl$3), _el$5 = _el$2.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling);
+          insert(_el$2, createComponent(Show, {
+            get when() {
+              return params().title;
+            },
+            get children() {
+              var _el$3 = getNextElement(_tmpl$);
+              insert(_el$3, () => params().title);
+              return _el$3;
+            }
+          }), _el$6, _co$);
+          insert(_el$2, createComponent(Show, {
+            get when() {
+              return params().exportable;
+            },
+            get children() {
+              var _el$4 = getNextElement(_tmpl$2);
+              _el$4.$$click = handleExportPNG;
+              runHydrationEvents();
+              return _el$4;
+            }
+          }), _el$8, _co$2);
+          return _el$2;
+        }
+      }), _el$16, _co$3);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return isLoading();
+        },
+        get children() {
+          return getNextElement(_tmpl$4);
+        }
+      }), _el$18, _co$4);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return error();
+        },
+        get children() {
+          var _el$0 = getNextElement(_tmpl$5), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling;
+          insert(_el$12, error);
+          return _el$0;
+        }
+      }), _el$20, _co$5);
+      var _ref$ = canvasRef;
+      typeof _ref$ === "function" ? use(_ref$, _el$14) : canvasRef = _el$14;
+      effect((_p$) => {
+        var _v$ = params().height || "250px", _v$2 = error() ? "none" : "block";
+        _v$ !== _p$.e && setStyleProperty(_el$13, "height", _p$.e = _v$);
+        _v$2 !== _p$.t && setStyleProperty(_el$13, "display", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    }
+  });
 };
+delegateEvents(["click"]);
 export {
   ChartJSRenderer,
   isChartJSAvailable

package/dist/components/ChartJSRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartJSRenderer.js","sources":["../../src/components/ChartJSRenderer.tsx"],"sourcesContent":["/**\n * ChartJSRenderer - Native Chart.js rendering\n * Sprint 4: State & Charts\n *\n * Requires chart.js peer dependency:\n * ```\n * pnpm add chart.js\n * ```\n */\n\nimport { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'\nimport type { UIComponent, ChartComponentParams } from '../types'\n\n// Lazy load Chart.js to avoid bundling if not used\nlet ChartJS: any = null\nlet chartJSLoadPromise: Promise<any> | null = null\n\nconst loadChartJS = async () => {\n  if (ChartJS) return ChartJS\n\n  if (!chartJSLoadPromise) {\n    chartJSLoadPromise = import('chart.js/auto')\n      .then((module) => {\n        ChartJS = module.default || module.Chart\n        return ChartJS\n      })\n      .catch((err) => {\n        chartJSLoadPromise = null\n        throw err\n      })\n  }\n\n  return chartJSLoadPromise\n}\n\n/**\n * Check if Chart.js is available\n */\nexport async function isChartJSAvailable(): Promise<boolean> {\n  try {\n    await loadChartJS()\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport interface ChartJSRendererProps {\n  /**\n   * UIComponent with chart params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n}\n\n/**\n * Native Chart.js renderer component\n *\n * @example\n * ```tsx\n * const chartComponent: UIComponent = {\n *   id: 'revenue-chart',\n *   type: 'chart',\n *   position: { colStart: 1, colSpan: 6 },\n *   params: {\n *     type: 'bar',\n *     title: 'Monthly Revenue',\n *     data: {\n *       labels: ['Jan', 'Feb', 'Mar'],\n *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]\n *     },\n *     renderer: 'native',\n *   },\n * }\n * <ChartJSRenderer component={chartComponent} />\n * ```\n */\nexport const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {\n  const [isLoading, setIsLoading] = createSignal(true)\n  const [error, setError] = createSignal<string>()\n  let canvasRef: HTMLCanvasElement | undefined\n  let chartInstance: any\n\n  const params = () => props.component.params as ChartComponentParams\n\n  // Create/update chart when params change\n  createEffect(async () => {\n    if (!canvasRef) return\n\n    // Access params to track dependencies\n    const chartParams = params()\n\n    setIsLoading(true)\n    setError(undefined)\n\n    try {\n      const Chart = await loadChartJS()\n\n      // Destroy previous instance\n      if (chartInstance) {\n        chartInstance.destroy()\n        chartInstance = null\n      }\n\n      // Create new chart\n      chartInstance = new Chart(canvasRef, {\n        type: chartParams.type,\n        data: chartParams.data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          ...chartParams.options,\n          plugins: {\n            ...chartParams.options?.plugins,\n            legend: {\n              display: true,\n              position: 'bottom',\n              ...chartParams.options?.plugins?.legend,\n            },\n          },\n        },\n      })\n\n      setIsLoading(false)\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Chart rendering failed')\n      setError(error.message)\n      setIsLoading(false)\n      props.onError?.(error)\n    }\n  })\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (chartInstance) {\n      chartInstance.destroy()\n      chartInstance = null\n    }\n  })\n\n  return (\n    <div class=\"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\">\n      <Show when={params().title}>\n        <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white mb-3\">\n          {params().title}\n        </h3>\n      </Show>\n\n      <Show when={isLoading()}>\n        <div class=\"absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80\">\n          <div class=\"flex flex-col items-center gap-2\">\n            <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600\" />\n            <span class=\"text-sm text-gray-500 dark:text-gray-400\">Loading chart...</span>\n          </div>\n        </div>\n      </Show>\n\n      <Show when={error()}>\n        <div class=\"absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800\">\n          <div class=\"text-center\">\n            <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3\">\n              <svg\n                class=\"w-6 h-6 text-red-600 dark:text-red-400\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n            </div>\n            <p class=\"text-red-600 dark:text-red-400 text-sm font-medium\">Chart Error</p>\n            <p class=\"text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs\">{error()}</p>\n          </div>\n        </div>\n      </Show>\n\n      <div\n        class=\"w-full h-[250px]\"\n        style={{ display: error() ? 'none' : 'block' }}\n      >\n        <canvas ref={canvasRef} />\n      </div>\n    </div>\n  )\n}\n"],"names":["ChartJS","chartJSLoadPromise","loadChartJS","then","module","default","Chart","catch","err","isChartJSAvailable","ChartJSRenderer","props","isLoading","setIsLoading","createSignal","error","setError","canvasRef","chartInstance","params","component","createEffect","chartParams","undefined","destroy","type","data","options","responsive","maintainAspectRatio","plugins","legend","display","position","Error","message","onError","onCleanup","_el$","_$getNextElement","_tmpl$4","_el$1","firstChild","_el$10","_co$","_$getNextMarker","nextSibling","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","_el$9","_el$0","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_tmpl$2","_el$4","_tmpl$3","_el$5","_el$6","_el$7","_el$8","_ref$","_$use","_$effect","_$p","_$setStyleProperty"],"mappings":"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"}
+{"version":3,"file":"ChartJSRenderer.js","sources":["../../src/components/ChartJSRenderer.tsx"],"sourcesContent":["/**\n * ChartJSRenderer - Native Chart.js rendering\n * Sprint 4: State & Charts\n *\n * Requires chart.js peer dependency:\n * ```\n * pnpm add chart.js\n * ```\n */\n\nimport { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'\nimport type { UIComponent, ChartComponentParams } from '../types'\nimport { ExpandableWrapper } from './ExpandableWrapper'\n\n// Lazy load Chart.js to avoid bundling if not used\nlet ChartJS: any = null\nlet chartJSLoadPromise: Promise<any> | null = null\n\nconst loadChartJS = async () => {\n  if (ChartJS) return ChartJS\n\n  if (!chartJSLoadPromise) {\n    chartJSLoadPromise = import('chart.js/auto')\n      .then((module) => {\n        ChartJS = module.default || module.Chart\n        return ChartJS\n      })\n      .catch((err) => {\n        chartJSLoadPromise = null\n        throw err\n      })\n  }\n\n  return chartJSLoadPromise\n}\n\n/**\n * Check if Chart.js is available\n */\nexport async function isChartJSAvailable(): Promise<boolean> {\n  try {\n    await loadChartJS()\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport interface ChartJSRendererProps {\n  /**\n   * UIComponent with chart params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n}\n\n/**\n * Native Chart.js renderer component\n *\n * @example\n * ```tsx\n * const chartComponent: UIComponent = {\n *   id: 'revenue-chart',\n *   type: 'chart',\n *   position: { colStart: 1, colSpan: 6 },\n *   params: {\n *     type: 'bar',\n *     title: 'Monthly Revenue',\n *     data: {\n *       labels: ['Jan', 'Feb', 'Mar'],\n *       datasets: [{ label: 'Revenue', data: [100, 200, 150] }]\n *     },\n *     renderer: 'native',\n *   },\n * }\n * <ChartJSRenderer component={chartComponent} />\n * ```\n */\nexport const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {\n  const [isLoading, setIsLoading] = createSignal(true)\n  const [error, setError] = createSignal<string>()\n  let canvasRef: HTMLCanvasElement | undefined\n  let chartInstance: any\n\n  const params = () => props.component.params as ChartComponentParams\n\n  // Chart PNG export\n  const handleExportPNG = () => {\n    if (!canvasRef) return\n    const url = canvasRef.toDataURL('image/png')\n    const a = document.createElement('a')\n    a.href = url\n    a.download = `${(params().title || 'chart').replace(/\\s+/g, '-').toLowerCase()}.png`\n    a.click()\n  }\n\n  // Create/update chart when params change\n  createEffect(async () => {\n    if (!canvasRef) return\n\n    // Access params to track dependencies\n    const chartParams = params()\n\n    setIsLoading(true)\n    setError(undefined)\n\n    try {\n      const Chart = await loadChartJS()\n\n      // Destroy previous instance\n      if (chartInstance) {\n        chartInstance.destroy()\n        chartInstance = null\n      }\n\n      // Create new chart\n      chartInstance = new Chart(canvasRef, {\n        type: chartParams.type,\n        data: chartParams.data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          ...chartParams.options,\n          plugins: {\n            ...chartParams.options?.plugins,\n            legend: {\n              display: true,\n              position: 'bottom',\n              ...chartParams.options?.plugins?.legend,\n            },\n          },\n        },\n      })\n\n      setIsLoading(false)\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Chart rendering failed')\n      setError(error.message)\n      setIsLoading(false)\n      props.onError?.(error)\n    }\n  })\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (chartInstance) {\n      chartInstance.destroy()\n      chartInstance = null\n    }\n  })\n\n  return (\n    <ExpandableWrapper title={params().title || 'Chart'}>\n      <div class=\"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\">\n        <Show when={params().title || params().exportable}>\n          <div class=\"flex items-center justify-between mb-3\">\n            <Show when={params().title}>\n              <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">\n                {params().title}\n              </h3>\n            </Show>\n            <Show when={params().exportable}>\n              <button\n                onClick={handleExportPNG}\n                class=\"opacity-0 group-hover: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\"\n                title=\"Download PNG\"\n                aria-label=\"Download chart as PNG\"\n              >\n                <svg class=\"w-3 h-3 text-gray-500 dark:text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <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\" />\n                </svg>\n              </button>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={isLoading()}>\n          <div class=\"absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80\">\n            <div class=\"flex flex-col items-center gap-2\">\n              <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600\" />\n              <span class=\"text-sm text-gray-500 dark:text-gray-400\">Loading chart...</span>\n            </div>\n          </div>\n        </Show>\n\n        <Show when={error()}>\n          <div class=\"absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800\">\n            <div class=\"text-center\">\n              <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3\">\n                <svg\n                  class=\"w-6 h-6 text-red-600 dark:text-red-400\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                  />\n                </svg>\n              </div>\n              <p class=\"text-red-600 dark:text-red-400 text-sm font-medium\">Chart Error</p>\n              <p class=\"text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs\">{error()}</p>\n            </div>\n          </div>\n        </Show>\n\n        <div\n          class=\"w-full\"\n          style={{ height: params().height || '250px', display: error() ? 'none' : 'block' }}\n        >\n          <canvas ref={canvasRef} />\n        </div>\n      </div>\n    </ExpandableWrapper>\n  )\n}\n"],"names":["ChartJS","chartJSLoadPromise","loadChartJS","then","module","default","Chart","catch","err","isChartJSAvailable","ChartJSRenderer","props","isLoading","setIsLoading","createSignal","error","setError","canvasRef","chartInstance","params","component","handleExportPNG","url","toDataURL","a","document","createElement","href","download","title","replace","toLowerCase","click","createEffect","chartParams","undefined","destroy","type","data","options","responsive","maintainAspectRatio","plugins","legend","display","position","Error","message","onError","onCleanup","_$createComponent","ExpandableWrapper","children","_el$","_$getNextElement","_tmpl$6","_el$15","firstChild","_el$16","_co$3","_$getNextMarker","nextSibling","_el$17","_el$18","_co$4","_el$19","_el$20","_co$5","_el$13","_el$14","_$insert","Show","when","exportable","_el$2","_tmpl$3","_el$5","_el$6","_co$","_el$7","_el$8","_co$2","_el$3","_tmpl$","_el$4","_tmpl$2","$$click","_$runHydrationEvents","_tmpl$4","_el$0","_tmpl$5","_el$1","_el$10","_el$11","_el$12","_ref$","_$use","_$effect","_p$","_v$","height","_v$2","e","_$setStyleProperty","t","_$delegateEvents"],"mappings":"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"}

package/dist/components/CodeBlockRenderer.cjs

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
-var _tmpl$ = /* @__PURE__ */ web.template(`<svg class="w-4 h-4 text-green-500"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 13l4 4L19 7">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="flex-none text-right select-none bg-gray-100 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 py-4 px-2 text-gray-400 font-mono text-xs leading-5">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="w-full bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden text-sm flex flex-col"><div class="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shrink-0"><div class="font-mono text-xs text-gray-600 dark:text-gray-400"></div><button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"aria-label="Copy code"title="Copy code"></button></div><div class="relative overflow-auto flex"><!$><!/><pre class="flex-1 m-0 p-4 font-mono text-gray-800 dark:text-gray-100 bg-transparent leading-5"><code>`), _tmpl$4 = /* @__PURE__ */ web.template(`<svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=px-2>`);
+const ExpandableWrapper = require("./ExpandableWrapper.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<svg class="w-4 h-4 text-green-500"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 13l4 4L19 7">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="flex-none text-right select-none bg-gray-100 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 py-4 px-2 text-gray-400 font-mono text-xs leading-5">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="w-full bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden text-sm flex flex-col"><div class="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shrink-0"><div class="font-mono text-xs text-gray-600 dark:text-gray-400"></div><div class="flex items-center gap-2"><button aria-label="Toggle word wrap"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4"></path></svg></button><button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"aria-label="Copy code"title="Copy code"></button></div></div><div class="relative overflow-auto flex"><!$><!/><pre class="flex-1 m-0 p-4 font-mono text-gray-800 dark:text-gray-100 bg-transparent leading-5"><code>`), _tmpl$4 = /* @__PURE__ */ web.template(`<svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=px-2>`);
 let hljs = null;
 let stylesLoaded = false;
 const CodeBlockRenderer = (props) => {
@@ -10,6 +11,7 @@ const CodeBlockRenderer = (props) => {
   const [isCopied, setIsCopied] = solidJs.createSignal(false);
   const [isHljsLoaded, setIsHljsLoaded] = solidJs.createSignal(false);
   const [activeTheme, setActiveTheme] = solidJs.createSignal("dark");
+  const [wordWrap, setWordWrap] = solidJs.createSignal(false);
   const params = () => {
     var _a;
     return props.params || ((_a = props.component) == null ? void 0 : _a.params);
@@ -101,63 +103,84 @@ const CodeBlockRenderer = (props) => {
       }
     }
   };
-  return (() => {
-    var _el$ = web.getNextElement(_tmpl$3), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$6 = _el$2.nextSibling, _el$0 = _el$6.firstChild, [_el$1, _co$] = web.getNextMarker(_el$0.nextSibling), _el$8 = _el$1.nextSibling, _el$9 = _el$8.firstChild;
-    web.insert(_el$3, () => {
+  return web.createComponent(ExpandableWrapper.ExpandableWrapper, {
+    get title() {
       var _a, _b;
       return ((_a = params()) == null ? void 0 : _a.filename) || ((_b = params()) == null ? void 0 : _b.language) || "Code";
-    });
-    _el$4.$$click = handleCopy;
-    web.insert(_el$4, web.createComponent(solidJs.Show, {
-      get when() {
-        return isCopied();
-      },
-      get fallback() {
-        return web.getNextElement(_tmpl$4);
-      },
-      get children() {
-        return web.getNextElement(_tmpl$);
-      }
-    }));
-    web.insert(_el$6, web.createComponent(solidJs.Show, {
-      get when() {
-        var _a;
-        return ((_a = params()) == null ? void 0 : _a.showLineNumbers) !== false;
-      },
-      get children() {
-        var _el$7 = web.getNextElement(_tmpl$2);
-        web.insert(_el$7, web.createComponent(solidJs.For, {
-          get each() {
-            return lineNumbers();
-          },
-          children: (num) => (() => {
-            var _el$11 = web.getNextElement(_tmpl$5);
-            web.insert(_el$11, num);
-            return _el$11;
-          })()
-        }));
-        return _el$7;
-      }
-    }), _el$1, _co$);
-    web.effect((_p$) => {
-      var _a, _b, _c, _d;
-      var _v$ = ((_a = params()) == null ? void 0 : _a.maxHeight) ? {
-        "max-height": (_b = params()) == null ? void 0 : _b.maxHeight
-      } : {}, _v$2 = activeTheme(), _v$3 = `hljs ${((_c = params()) == null ? void 0 : _c.language) ? `language-${(_d = params()) == null ? void 0 : _d.language}` : ""}`, _v$4 = highlightedCode();
-      _p$.e = web.style(_el$6, _v$, _p$.e);
-      _v$2 !== _p$.t && web.setAttribute(_el$8, "data-theme", _p$.t = _v$2);
-      _v$3 !== _p$.a && web.className(_el$9, _p$.a = _v$3);
-      _v$4 !== _p$.o && web.setProperty(_el$9, "innerHTML", _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    web.runHydrationEvents();
-    return _el$;
-  })();
+    },
+    get copyData() {
+      var _a;
+      return (_a = params()) == null ? void 0 : _a.code;
+    },
+    copyLabel: "Copy code",
+    get children() {
+      var _el$ = web.getNextElement(_tmpl$3), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$8 = _el$2.nextSibling, _el$10 = _el$8.firstChild, [_el$11, _co$] = web.getNextMarker(_el$10.nextSibling), _el$0 = _el$11.nextSibling, _el$1 = _el$0.firstChild;
+      web.insert(_el$3, () => {
+        var _a, _b;
+        return ((_a = params()) == null ? void 0 : _a.filename) || ((_b = params()) == null ? void 0 : _b.language) || "Code";
+      });
+      _el$5.$$click = () => setWordWrap(!wordWrap());
+      _el$6.$$click = handleCopy;
+      web.insert(_el$6, web.createComponent(solidJs.Show, {
+        get when() {
+          return isCopied();
+        },
+        get fallback() {
+          return web.getNextElement(_tmpl$4);
+        },
+        get children() {
+          return web.getNextElement(_tmpl$);
+        }
+      }));
+      web.insert(_el$8, web.createComponent(solidJs.Show, {
+        get when() {
+          var _a;
+          return ((_a = params()) == null ? void 0 : _a.showLineNumbers) !== false;
+        },
+        get children() {
+          var _el$9 = web.getNextElement(_tmpl$2);
+          web.insert(_el$9, web.createComponent(solidJs.For, {
+            get each() {
+              return lineNumbers();
+            },
+            children: (num) => (() => {
+              var _el$13 = web.getNextElement(_tmpl$5);
+              web.insert(_el$13, num);
+              return _el$13;
+            })()
+          }));
+          return _el$9;
+        }
+      }), _el$11, _co$);
+      web.effect((_p$) => {
+        var _a, _b, _c, _d;
+        var _v$ = `focus:outline-none transition-colors ${wordWrap() ? "text-blue-500 dark:text-blue-400" : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"}`, _v$2 = wordWrap() ? "Disable word wrap" : "Enable word wrap", _v$3 = ((_a = params()) == null ? void 0 : _a.maxHeight) ? {
+          "max-height": (_b = params()) == null ? void 0 : _b.maxHeight
+        } : {}, _v$4 = wordWrap() ? {
+          "white-space": "pre-wrap",
+          "word-break": "break-all"
+        } : {}, _v$5 = activeTheme(), _v$6 = `hljs ${((_c = params()) == null ? void 0 : _c.language) ? `language-${(_d = params()) == null ? void 0 : _d.language}` : ""}`, _v$7 = highlightedCode();
+        _v$ !== _p$.e && web.className(_el$5, _p$.e = _v$);
+        _v$2 !== _p$.t && web.setAttribute(_el$5, "title", _p$.t = _v$2);
+        _p$.a = web.style(_el$8, _v$3, _p$.a);
+        _p$.o = web.style(_el$0, _v$4, _p$.o);
+        _v$5 !== _p$.i && web.setAttribute(_el$0, "data-theme", _p$.i = _v$5);
+        _v$6 !== _p$.n && web.className(_el$1, _p$.n = _v$6);
+        _v$7 !== _p$.s && web.setProperty(_el$1, "innerHTML", _p$.s = _v$7);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0
+      });
+      web.runHydrationEvents();
+      return _el$;
+    }
+  });
 };
 web.delegateEvents(["click"]);
 exports.CodeBlockRenderer = CodeBlockRenderer;