@orchestra-mcp/widgets 0.2.0

package/dist/index.cjs

@@ -0,0 +1,816 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/saveFile.ts
+function uuid() {
+  return crypto.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function uuidFilename(prefix, ext) {
+  return `${prefix}-${uuid()}.${ext}`;
+}
+async function saveViaDesktopAPI(content, filename, encoding = "text") {
+  try {
+    const res = await fetch(`${API}/api/download`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ filename, content, encoding })
+    });
+    if (res.ok) {
+      const data = await res.json();
+      return data.ok !== false;
+    }
+  } catch {
+  }
+  return false;
+}
+function getExtension(filename) {
+  const dot = filename.lastIndexOf(".");
+  return dot >= 0 ? filename.slice(dot) : "";
+}
+async function saveWithPicker(blob, suggestedName, mimeType) {
+  if (typeof window === "undefined" || !("showSaveFilePicker" in window)) return false;
+  try {
+    const ext = getExtension(suggestedName);
+    const accept = {};
+    if (MIME_EXTENSIONS[mimeType]) {
+      accept[mimeType] = MIME_EXTENSIONS[mimeType];
+    } else if (ext) {
+      accept[mimeType || "application/octet-stream"] = [ext];
+    }
+    const handle = await window.showSaveFilePicker({
+      suggestedName,
+      types: Object.keys(accept).length ? [{ description: suggestedName, accept }] : void 0
+    });
+    const writable = await handle.createWritable();
+    await writable.write(blob);
+    await writable.close();
+    return true;
+  } catch (err) {
+    if (err?.name === "AbortError") return true;
+    return false;
+  }
+}
+function saveViaBrowser(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  setTimeout(() => {
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, 100);
+}
+async function saveFile(content, filename, mimeType) {
+  const apiOk = await saveViaDesktopAPI(content, filename);
+  if (apiOk) return;
+  const blob = new Blob([content], { type: mimeType });
+  const pickerOk = await saveWithPicker(blob, filename, mimeType);
+  if (pickerOk) return;
+  saveViaBrowser(blob, filename);
+}
+async function saveBlob(blob, filename, mimeType) {
+  try {
+    const buffer = await blob.arrayBuffer();
+    const bytes = new Uint8Array(buffer);
+    let binary = "";
+    for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+    const base64 = btoa(binary);
+    const apiOk = await saveViaDesktopAPI(base64, filename, "base64");
+    if (apiOk) return;
+  } catch {
+  }
+  const pickerOk = await saveWithPicker(blob, filename, mimeType);
+  if (pickerOk) return;
+  saveViaBrowser(blob, filename);
+}
+var API, MIME_EXTENSIONS;
+var init_saveFile = __esm({
+  "src/utils/saveFile.ts"() {
+    "use strict";
+    API = "http://127.0.0.1:19191";
+    MIME_EXTENSIONS = {
+      "text/plain": [".txt"],
+      "text/csv": [".csv"],
+      "text/html": [".html"],
+      "text/css": [".css"],
+      "text/javascript": [".js"],
+      "text/markdown": [".md"],
+      "application/json": [".json"],
+      "image/png": [".png"],
+      "image/jpeg": [".jpg", ".jpeg"],
+      "image/svg+xml": [".svg"]
+    };
+  }
+});
+
+// src/utils/exportToImage.ts
+var exportToImage_exports = {};
+__export(exportToImage_exports, {
+  exportToImage: () => exportToImage
+});
+async function exportToImage(element, filename = "export", padding = 40) {
+  const { toPng } = await import("html-to-image");
+  const computed = getComputedStyle(element);
+  const accent = computed.getPropertyValue("--color-accent").trim() || "#7c3aed";
+  const bgColor = computed.getPropertyValue("--color-bg").trim() || "#1e1e2e";
+  const bgContrast = computed.getPropertyValue("--color-bg-contrast").trim() || bgColor;
+  const fgColor = computed.getPropertyValue("--color-fg").trim() || "#e4e4e7";
+  const fgMuted = computed.getPropertyValue("--color-fg-muted").trim() || "#a1a1aa";
+  const borderColor = computed.getPropertyValue("--color-border").trim() || "#27272a";
+  const gradient = `linear-gradient(135deg, ${accent}22 0%, ${bgContrast} 40%, ${bgColor} 100%)`;
+  const wrapper = document.createElement("div");
+  wrapper.style.display = "inline-block";
+  wrapper.style.padding = `${padding}px`;
+  wrapper.style.borderRadius = "16px";
+  wrapper.style.background = gradient;
+  wrapper.style.setProperty("--color-accent", accent);
+  wrapper.style.setProperty("--color-bg", bgColor);
+  wrapper.style.setProperty("--color-bg-contrast", bgContrast);
+  wrapper.style.setProperty("--color-fg", fgColor);
+  wrapper.style.setProperty("--color-fg-muted", fgMuted);
+  wrapper.style.setProperty("--color-border", borderColor);
+  const parent = element.parentNode;
+  const nextSibling = element.nextSibling;
+  wrapper.appendChild(element);
+  document.body.appendChild(wrapper);
+  element.classList.add("code-block--exporting");
+  element.classList.add("data-table--exporting");
+  const origBorderRadius = element.style.borderRadius;
+  element.style.borderRadius = "12px";
+  try {
+    const dataUrl = await toPng(wrapper, {
+      pixelRatio: 2,
+      backgroundColor: bgColor
+    });
+    const res = await fetch(dataUrl);
+    const blob = await res.blob();
+    const fullFilename = uuidFilename(filename, "png");
+    await saveBlob(blob, fullFilename, "image/png");
+  } finally {
+    element.classList.remove("code-block--exporting");
+    element.classList.remove("data-table--exporting");
+    element.style.borderRadius = origBorderRadius;
+    if (parent) {
+      if (nextSibling) {
+        parent.insertBefore(element, nextSibling);
+      } else {
+        parent.appendChild(element);
+      }
+    }
+    wrapper.remove();
+  }
+}
+var init_exportToImage = __esm({
+  "src/utils/exportToImage.ts"() {
+    "use strict";
+    init_saveFile();
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AreaChart: () => AreaChart,
+  BarChart: () => BarChart,
+  DataTable: () => DataTable,
+  DonutChart: () => DonutChart,
+  LineChart: () => LineChart,
+  PieChart: () => PieChart,
+  Widget: () => Widget,
+  saveBlob: () => saveBlob,
+  saveFile: () => saveFile,
+  uuidFilename: () => uuidFilename
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Widget/Widget.tsx
+var import_react = require("react");
+var import_icons = require("@orchestra-mcp/icons");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Widget = ({
+  title,
+  subtitle,
+  children,
+  icon,
+  actions,
+  collapsible = false,
+  defaultCollapsed = false,
+  loading = false,
+  error,
+  onRefresh,
+  size = "medium",
+  onContextMenu,
+  style
+}) => {
+  const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
+  const isCollapsed = collapsible && collapsed;
+  const headerClasses = [
+    "widget__header",
+    isCollapsed ? "widget__header--collapsed" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `widget widget--${size}${isCollapsed ? " widget--collapsed" : ""}`, "data-testid": "widget", style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: headerClasses, onContextMenu, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "widget__icon", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "widget__title-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "widget__title", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "widget__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "widget__actions", children: [
+        actions?.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "widget__action-btn",
+            onClick: action.onClick,
+            "aria-label": action.label,
+            title: action.label,
+            type: "button",
+            children: action.icon ?? action.label
+          },
+          action.id
+        )),
+        onRefresh && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "widget__action-btn",
+            onClick: onRefresh,
+            "aria-label": "Refresh",
+            title: "Refresh",
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.BoxIcon, { name: "bx-refresh", size: 14 })
+          }
+        ),
+        collapsible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: `widget__collapse-btn${isCollapsed ? " widget__collapse-btn--collapsed" : ""}`,
+            onClick: () => setCollapsed((c) => !c),
+            "aria-label": isCollapsed ? "Expand" : "Collapse",
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.BoxIcon, { name: "bx-chevron-down", size: 14 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `widget__body${isCollapsed ? " widget__body--hidden" : ""}`, children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "widget__error", role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "widget__error-text", children: error }),
+        onRefresh && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "widget__retry-btn",
+            onClick: onRefresh,
+            type: "button",
+            children: "Retry"
+          }
+        )
+      ] }),
+      !error && children,
+      loading && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "widget__loading", "data-testid": "widget-loading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "widget__shimmer" }) })
+    ] })
+  ] });
+};
+
+// src/DataTable/DataTable.tsx
+var import_react2 = require("react");
+init_saveFile();
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function isNumeric(value) {
+  return value !== "" && !isNaN(Number(value));
+}
+function compareValues(a, b) {
+  if (isNumeric(a) && isNumeric(b)) {
+    return Number(a) - Number(b);
+  }
+  return a.localeCompare(b);
+}
+function escapeCsvValue(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M11 3H4.5A1.5 1.5 0 0 0 3 4.5V11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var DownloadIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 2v8m0 0L5 7m3 3l3-3M3 12h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ImageIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "6", cy: "6", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2 11l3-3 2 2 3-3 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var DataTable = ({
+  columns,
+  rows,
+  sortable = false,
+  exportable = false,
+  exportImage = false,
+  showHeader = false,
+  label,
+  renderCell,
+  onLinkClick,
+  maxHeight,
+  className
+}) => {
+  const [sort, setSort] = (0, import_react2.useState)({ column: null, direction: "asc" });
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const timerRef = (0, import_react2.useRef)(null);
+  const tableRef = (0, import_react2.useRef)(null);
+  const handleSort = (0, import_react2.useCallback)((col) => {
+    if (!sortable && !col.sortable) return;
+    setSort((prev) => {
+      if (prev.column === col.key) {
+        return prev.direction === "asc" ? { column: col.key, direction: "desc" } : { column: null, direction: "asc" };
+      }
+      return { column: col.key, direction: "asc" };
+    });
+  }, [sortable]);
+  const sortedRows = (0, import_react2.useMemo)(() => {
+    if (!sort.column) return rows;
+    const colIndex = columns.findIndex((c) => c.key === sort.column);
+    if (colIndex === -1) return rows;
+    const sorted = [...rows].sort((a, b) => compareValues(a[colIndex], b[colIndex]));
+    return sort.direction === "desc" ? sorted.reverse() : sorted;
+  }, [rows, columns, sort]);
+  const buildCsv = (0, import_react2.useCallback)(() => {
+    const headerLine = columns.map((c) => escapeCsvValue(c.header)).join(",");
+    const dataLines = rows.map((row) => row.map(escapeCsvValue).join(","));
+    return [headerLine, ...dataLines].join("\n");
+  }, [columns, rows]);
+  const handleExport = (0, import_react2.useCallback)(async () => {
+    await saveFile(buildCsv(), uuidFilename("table-export", "csv"), "text/csv");
+  }, [buildCsv]);
+  const handleCopy = (0, import_react2.useCallback)(() => {
+    const csv = buildCsv();
+    navigator.clipboard.writeText(csv).then(() => {
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 2e3);
+    });
+  }, [buildCsv]);
+  const handleExportImage = (0, import_react2.useCallback)(async () => {
+    if (!tableRef.current) return;
+    const { exportToImage: exportToImage2 } = await Promise.resolve().then(() => (init_exportToImage(), exportToImage_exports));
+    await exportToImage2(tableRef.current, "table-export");
+  }, []);
+  const handleTableClick = (0, import_react2.useCallback)((e) => {
+    if (!onLinkClick) return;
+    const target = e.target;
+    const link = target.closest("[data-md-link]");
+    if (link) {
+      e.preventDefault();
+      onLinkClick(link.dataset.mdLink);
+    }
+  }, [onLinkClick]);
+  const isSortable = (col) => sortable || col.sortable === true;
+  const hasActions = exportable || exportImage || showHeader;
+  const containerStyle = maxHeight ? { maxHeight: `${maxHeight}px` } : void 0;
+  const containerClass = [
+    "data-table-container",
+    showHeader ? "data-table-container--card" : "",
+    maxHeight ? "data-table-container--scrollable" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: containerClass, ref: tableRef, children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "data-table__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "data-table__header-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "data-table__dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "data-table__dot data-table__dot--red" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "data-table__dot data-table__dot--yellow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "data-table__dot data-table__dot--green" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "data-table__badge", children: label || "Table" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "data-table__actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `data-table__btn ${copied ? "data-table__btn--copied" : ""}`,
+            onClick: handleCopy,
+            "aria-label": "Copy as CSV",
+            title: "Copy as CSV",
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyIcon, {})
+          }
+        ),
+        exportable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "data-table__btn",
+            onClick: handleExport,
+            "aria-label": "Download CSV",
+            title: "Download CSV",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DownloadIcon, {})
+          }
+        ),
+        exportImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "data-table__btn",
+            onClick: handleExportImage,
+            "aria-label": "Export as image",
+            title: "Export as image",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImageIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    !showHeader && (exportable || exportImage) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "data-table__toolbar", children: [
+      exportable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "data-table__export", onClick: handleExport, children: "Export CSV" }),
+      exportImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "data-table__export",
+          onClick: handleExportImage,
+          "aria-label": "Export as image",
+          children: "Export Image"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "data-table__body", style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { className: "data-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "th",
+        {
+          className: [
+            `data-table__th--${col.align ?? "left"}`,
+            isSortable(col) ? "data-table__th--sortable" : ""
+          ].filter(Boolean).join(" "),
+          onClick: () => isSortable(col) && handleSort(col),
+          children: [
+            renderCell ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: renderCell(col.header) } }) : col.header,
+            isSortable(col) && sort.column === col.key && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "data-table__sort", children: sort.direction === "asc" ? "\u25B2" : "\u25BC" })
+          ]
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { onClick: handleTableClick, children: sortedRows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: row.map(
+        (cell, cellIdx) => renderCell ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "td",
+          {
+            className: `data-table__td--${columns[cellIdx]?.align ?? "left"}`,
+            dangerouslySetInnerHTML: { __html: renderCell(cell) }
+          },
+          cellIdx
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "td",
+          {
+            className: `data-table__td--${columns[cellIdx]?.align ?? "left"}`,
+            children: cell
+          },
+          cellIdx
+        )
+      ) }, rowIdx)) })
+    ] }) })
+  ] });
+};
+
+// src/Charts/LineChart.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var COLORS = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#f97316"];
+var LineChart = ({
+  data,
+  width = 400,
+  height = 300,
+  showLegend = false,
+  title,
+  className
+}) => {
+  if (!data.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `chart__empty ${className ?? ""}`, style: { width, height }, children: "No data" });
+  }
+  const pad = { top: 20, right: 20, bottom: 40, left: 50 };
+  const w = width - pad.left - pad.right;
+  const h = height - pad.top - pad.bottom;
+  const max = Math.max(...data.map((d) => d.value));
+  const step = w / Math.max(data.length - 1, 1);
+  const points = data.map((d, i) => ({
+    x: pad.left + i * step,
+    y: pad.top + h - d.value / (max || 1) * h
+  }));
+  const pathD = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className: "chart__svg", width, height, children: [
+      [0, 0.25, 0.5, 0.75, 1].map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "line",
+        {
+          className: "chart__grid-line",
+          x1: pad.left,
+          x2: width - pad.right,
+          y1: pad.top + h * (1 - t),
+          y2: pad.top + h * (1 - t)
+        },
+        t
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { className: "chart__line", d: pathD, stroke: COLORS[0] }),
+      points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "circle",
+        {
+          className: "chart__dot",
+          cx: p.x,
+          cy: p.y,
+          r: 4,
+          fill: data[i].color ?? COLORS[0]
+        },
+        i
+      )),
+      data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "text",
+        {
+          className: "chart__axis-label",
+          x: points[i].x,
+          y: height - 8,
+          textAnchor: "middle",
+          children: d.label
+        },
+        i
+      ))
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS[i % COLORS.length] } }),
+      d.label
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/BarChart.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var COLORS2 = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#f97316"];
+var BarChart = ({
+  data,
+  width = 400,
+  height = 300,
+  showLegend = false,
+  title,
+  className
+}) => {
+  if (!data.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `chart__empty ${className ?? ""}`, style: { width, height }, children: "No data" });
+  }
+  const pad = { top: 20, right: 20, bottom: 40, left: 50 };
+  const w = width - pad.left - pad.right;
+  const h = height - pad.top - pad.bottom;
+  const max = Math.max(...data.map((d) => d.value));
+  const barW = w / data.length * 0.7;
+  const gap = w / data.length * 0.3;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "chart__svg", width, height, children: [
+      [0, 0.25, 0.5, 0.75, 1].map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "line",
+        {
+          className: "chart__grid-line",
+          x1: pad.left,
+          x2: width - pad.right,
+          y1: pad.top + h * (1 - t),
+          y2: pad.top + h * (1 - t)
+        },
+        t
+      )),
+      data.map((d, i) => {
+        const barH = d.value / (max || 1) * h;
+        const x = pad.left + i * (barW + gap) + gap / 2;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "rect",
+            {
+              className: "chart__bar",
+              x,
+              y: pad.top + h - barH,
+              width: barW,
+              height: barH,
+              rx: 3,
+              fill: d.color ?? COLORS2[i % COLORS2.length]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { className: "chart__axis-label", x: x + barW / 2, y: height - 8, textAnchor: "middle", children: d.label })
+        ] }, i);
+      })
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS2[i % COLORS2.length] } }),
+      d.label
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/PieChart.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var COLORS3 = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#f97316"];
+function polarToCartesian(cx, cy, r, angle) {
+  const rad = (angle - 90) * Math.PI / 180;
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+function arcPath(cx, cy, r, startAngle, endAngle) {
+  const start = polarToCartesian(cx, cy, r, endAngle);
+  const end = polarToCartesian(cx, cy, r, startAngle);
+  const large = endAngle - startAngle > 180 ? 1 : 0;
+  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${large} 0 ${end.x} ${end.y} L ${cx} ${cy} Z`;
+}
+var PieChart = ({
+  data,
+  width = 300,
+  height = 300,
+  showLegend = true,
+  title,
+  className
+}) => {
+  if (!data.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `chart__empty ${className ?? ""}`, style: { width, height }, children: "No data" });
+  }
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const cx = width / 2;
+  const cy = height / 2;
+  const r = Math.min(cx, cy) - 10;
+  let startAngle = 0;
+  const slices = data.map((d, i) => {
+    const sweep = total > 0 ? d.value / total * 360 : 0;
+    const path = arcPath(cx, cy, r, startAngle, startAngle + sweep);
+    startAngle += sweep;
+    return { path, color: d.color ?? COLORS3[i % COLORS3.length], label: d.label };
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "chart__svg", width, height, children: slices.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { className: "chart__slice", d: s.path, fill: s.color }, i)) }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS3[i % COLORS3.length] } }),
+      d.label,
+      ": ",
+      d.value
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/AreaChart.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var COLORS4 = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#f97316"];
+var AreaChart = ({
+  data,
+  width = 400,
+  height = 300,
+  showLegend = false,
+  title,
+  className
+}) => {
+  if (!data.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `chart__empty ${className ?? ""}`, style: { width, height }, children: "No data" });
+  }
+  const pad = { top: 20, right: 20, bottom: 40, left: 50 };
+  const w = width - pad.left - pad.right;
+  const h = height - pad.top - pad.bottom;
+  const max = Math.max(...data.map((d) => d.value));
+  const step = w / Math.max(data.length - 1, 1);
+  const points = data.map((d, i) => ({
+    x: pad.left + i * step,
+    y: pad.top + h - d.value / (max || 1) * h
+  }));
+  const lineD = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+  const areaD = `${lineD} L${points[points.length - 1].x},${pad.top + h} L${points[0].x},${pad.top + h} Z`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { className: "chart__svg", width, height, children: [
+      [0, 0.25, 0.5, 0.75, 1].map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "line",
+        {
+          className: "chart__grid-line",
+          x1: pad.left,
+          x2: width - pad.right,
+          y1: pad.top + h * (1 - t),
+          y2: pad.top + h * (1 - t)
+        },
+        t
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { className: "chart__area", d: areaD, fill: COLORS4[0] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { className: "chart__line", d: lineD, stroke: COLORS4[0] }),
+      points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "circle",
+        {
+          className: "chart__dot",
+          cx: p.x,
+          cy: p.y,
+          r: 4,
+          fill: data[i].color ?? COLORS4[0]
+        },
+        i
+      )),
+      data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { className: "chart__axis-label", x: points[i].x, y: height - 8, textAnchor: "middle", children: d.label }, i))
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS4[i % COLORS4.length] } }),
+      d.label
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/DonutChart.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var COLORS5 = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#f97316"];
+function polarToCartesian2(cx, cy, r, angle) {
+  const rad = (angle - 90) * Math.PI / 180;
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+function donutArc(cx, cy, outer, inner, start, end) {
+  const oStart = polarToCartesian2(cx, cy, outer, end);
+  const oEnd = polarToCartesian2(cx, cy, outer, start);
+  const iStart = polarToCartesian2(cx, cy, inner, start);
+  const iEnd = polarToCartesian2(cx, cy, inner, end);
+  const large = end - start > 180 ? 1 : 0;
+  return [
+    `M ${oStart.x} ${oStart.y}`,
+    `A ${outer} ${outer} 0 ${large} 0 ${oEnd.x} ${oEnd.y}`,
+    `L ${iStart.x} ${iStart.y}`,
+    `A ${inner} ${inner} 0 ${large} 1 ${iEnd.x} ${iEnd.y}`,
+    "Z"
+  ].join(" ");
+}
+var DonutChart = ({
+  data,
+  width = 300,
+  height = 300,
+  showLegend = true,
+  title,
+  className,
+  innerRatio = 0.6,
+  centerLabel
+}) => {
+  if (!data.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `chart__empty ${className ?? ""}`, style: { width, height }, children: "No data" });
+  }
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const cx = width / 2;
+  const cy = height / 2;
+  const outer = Math.min(cx, cy) - 10;
+  const inner = outer * innerRatio;
+  let startAngle = 0;
+  const slices = data.map((d, i) => {
+    const sweep = total > 0 ? d.value / total * 360 : 0;
+    const path = donutArc(cx, cy, outer, inner, startAngle, startAngle + sweep);
+    startAngle += sweep;
+    return { path, color: d.color ?? COLORS5[i % COLORS5.length] };
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { className: "chart__svg", width, height, children: [
+      slices.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { className: "chart__slice", d: s.path, fill: s.color }, i)),
+      centerLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { className: "chart__donut-label", x: cx, y: cy, children: centerLabel })
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS5[i % COLORS5.length] } }),
+      d.label,
+      ": ",
+      d.value
+    ] }, i)) })
+  ] });
+};
+
+// src/index.ts
+init_saveFile();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AreaChart,
+  BarChart,
+  DataTable,
+  DonutChart,
+  LineChart,
+  PieChart,
+  Widget,
+  saveBlob,
+  saveFile,
+  uuidFilename
+});