@orchestra-mcp/widgets 0.2.0

package/dist/index.js

@@ -0,0 +1,600 @@
+import {
+  saveBlob,
+  saveFile,
+  uuidFilename
+} from "./chunk-UXC444LG.js";
+
+// src/Widget/Widget.tsx
+import { useState } from "react";
+import { BoxIcon } from "@orchestra-mcp/icons";
+import { jsx, jsxs } from "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] = useState(defaultCollapsed);
+  const isCollapsed = collapsible && collapsed;
+  const headerClasses = [
+    "widget__header",
+    isCollapsed ? "widget__header--collapsed" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: `widget widget--${size}${isCollapsed ? " widget--collapsed" : ""}`, "data-testid": "widget", style, children: [
+    /* @__PURE__ */ jsxs("div", { className: headerClasses, onContextMenu, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "widget__icon", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "widget__title-group", children: [
+        /* @__PURE__ */ jsx("span", { className: "widget__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("span", { className: "widget__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "widget__actions", children: [
+        actions?.map((action) => /* @__PURE__ */ 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__ */ jsx(
+          "button",
+          {
+            className: "widget__action-btn",
+            onClick: onRefresh,
+            "aria-label": "Refresh",
+            title: "Refresh",
+            type: "button",
+            children: /* @__PURE__ */ jsx(BoxIcon, { name: "bx-refresh", size: 14 })
+          }
+        ),
+        collapsible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `widget__collapse-btn${isCollapsed ? " widget__collapse-btn--collapsed" : ""}`,
+            onClick: () => setCollapsed((c) => !c),
+            "aria-label": isCollapsed ? "Expand" : "Collapse",
+            type: "button",
+            children: /* @__PURE__ */ jsx(BoxIcon, { name: "bx-chevron-down", size: 14 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `widget__body${isCollapsed ? " widget__body--hidden" : ""}`, children: [
+      error && /* @__PURE__ */ jsxs("div", { className: "widget__error", role: "alert", children: [
+        /* @__PURE__ */ jsx("span", { className: "widget__error-text", children: error }),
+        onRefresh && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "widget__retry-btn",
+            onClick: onRefresh,
+            type: "button",
+            children: "Retry"
+          }
+        )
+      ] }),
+      !error && children,
+      loading && !error && /* @__PURE__ */ jsx("div", { className: "widget__loading", "data-testid": "widget-loading", children: /* @__PURE__ */ jsx("div", { className: "widget__shimmer" }) })
+    ] })
+  ] });
+};
+
+// src/DataTable/DataTable.tsx
+import { useState as useState2, useMemo, useCallback, useRef } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx2("path", { d: "M11 3H4.5A1.5 1.5 0 0 0 3 4.5V11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var CheckIcon = () => /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx2("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var DownloadIcon = () => /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx2("path", { d: "M8 2v8m0 0L5 7m3 3l3-3M3 12h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ImageIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx2("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "6", cy: "6", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ jsx2("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] = useState2({ column: null, direction: "asc" });
+  const [copied, setCopied] = useState2(false);
+  const timerRef = useRef(null);
+  const tableRef = useRef(null);
+  const handleSort = 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 = 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 = 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 = useCallback(async () => {
+    await saveFile(buildCsv(), uuidFilename("table-export", "csv"), "text/csv");
+  }, [buildCsv]);
+  const handleCopy = 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 = useCallback(async () => {
+    if (!tableRef.current) return;
+    const { exportToImage } = await import("./exportToImage-QKASM3RA.js");
+    await exportToImage(tableRef.current, "table-export");
+  }, []);
+  const handleTableClick = 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__ */ jsxs2("div", { className: containerClass, ref: tableRef, children: [
+    showHeader && /* @__PURE__ */ jsxs2("div", { className: "data-table__header", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "data-table__header-left", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "data-table__dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx2("span", { className: "data-table__dot data-table__dot--red" }),
+          /* @__PURE__ */ jsx2("span", { className: "data-table__dot data-table__dot--yellow" }),
+          /* @__PURE__ */ jsx2("span", { className: "data-table__dot data-table__dot--green" })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "data-table__badge", children: label || "Table" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "data-table__actions", children: [
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(CheckIcon, {}) : /* @__PURE__ */ jsx2(CopyIcon, {})
+          }
+        ),
+        exportable && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "data-table__btn",
+            onClick: handleExport,
+            "aria-label": "Download CSV",
+            title: "Download CSV",
+            children: /* @__PURE__ */ jsx2(DownloadIcon, {})
+          }
+        ),
+        exportImage && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "data-table__btn",
+            onClick: handleExportImage,
+            "aria-label": "Export as image",
+            title: "Export as image",
+            children: /* @__PURE__ */ jsx2(ImageIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    !showHeader && (exportable || exportImage) && /* @__PURE__ */ jsxs2("div", { className: "data-table__toolbar", children: [
+      exportable && /* @__PURE__ */ jsx2("button", { type: "button", className: "data-table__export", onClick: handleExport, children: "Export CSV" }),
+      exportImage && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "data-table__export",
+          onClick: handleExportImage,
+          "aria-label": "Export as image",
+          children: "Export Image"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "data-table__body", style: containerStyle, children: /* @__PURE__ */ jsxs2("table", { className: "data-table", children: [
+      /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: columns.map((col) => /* @__PURE__ */ jsxs2(
+        "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__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: renderCell(col.header) } }) : col.header,
+            isSortable(col) && sort.column === col.key && /* @__PURE__ */ jsx2("span", { className: "data-table__sort", children: sort.direction === "asc" ? "\u25B2" : "\u25BC" })
+          ]
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx2("tbody", { onClick: handleTableClick, children: sortedRows.map((row, rowIdx) => /* @__PURE__ */ jsx2("tr", { children: row.map(
+        (cell, cellIdx) => renderCell ? /* @__PURE__ */ jsx2(
+          "td",
+          {
+            className: `data-table__td--${columns[cellIdx]?.align ?? "left"}`,
+            dangerouslySetInnerHTML: { __html: renderCell(cell) }
+          },
+          cellIdx
+        ) : /* @__PURE__ */ jsx2(
+          "td",
+          {
+            className: `data-table__td--${columns[cellIdx]?.align ?? "left"}`,
+            children: cell
+          },
+          cellIdx
+        )
+      ) }, rowIdx)) })
+    ] }) })
+  ] });
+};
+
+// src/Charts/LineChart.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "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__ */ jsx3("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__ */ jsxs3("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ jsx3("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ jsxs3("svg", { className: "chart__svg", width, height, children: [
+      [0, 0.25, 0.5, 0.75, 1].map((t) => /* @__PURE__ */ jsx3(
+        "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__ */ jsx3("path", { className: "chart__line", d: pathD, stroke: COLORS[0] }),
+      points.map((p, i) => /* @__PURE__ */ jsx3(
+        "circle",
+        {
+          className: "chart__dot",
+          cx: p.x,
+          cy: p.y,
+          r: 4,
+          fill: data[i].color ?? COLORS[0]
+        },
+        i
+      )),
+      data.map((d, i) => /* @__PURE__ */ jsx3(
+        "text",
+        {
+          className: "chart__axis-label",
+          x: points[i].x,
+          y: height - 8,
+          textAnchor: "middle",
+          children: d.label
+        },
+        i
+      ))
+    ] }),
+    showLegend && /* @__PURE__ */ jsx3("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ jsxs3("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ jsx3("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS[i % COLORS.length] } }),
+      d.label
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/BarChart.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "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__ */ jsx4("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__ */ jsxs4("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ jsx4("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ jsxs4("svg", { className: "chart__svg", width, height, children: [
+      [0, 0.25, 0.5, 0.75, 1].map((t) => /* @__PURE__ */ jsx4(
+        "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__ */ jsxs4("g", { children: [
+          /* @__PURE__ */ jsx4(
+            "rect",
+            {
+              className: "chart__bar",
+              x,
+              y: pad.top + h - barH,
+              width: barW,
+              height: barH,
+              rx: 3,
+              fill: d.color ?? COLORS2[i % COLORS2.length]
+            }
+          ),
+          /* @__PURE__ */ jsx4("text", { className: "chart__axis-label", x: x + barW / 2, y: height - 8, textAnchor: "middle", children: d.label })
+        ] }, i);
+      })
+    ] }),
+    showLegend && /* @__PURE__ */ jsx4("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ jsxs4("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ jsx4("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS2[i % COLORS2.length] } }),
+      d.label
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/PieChart.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "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__ */ jsx5("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__ */ jsxs5("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ jsx5("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ jsx5("svg", { className: "chart__svg", width, height, children: slices.map((s, i) => /* @__PURE__ */ jsx5("path", { className: "chart__slice", d: s.path, fill: s.color }, i)) }),
+    showLegend && /* @__PURE__ */ jsx5("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ jsxs5("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ jsx5("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS3[i % COLORS3.length] } }),
+      d.label,
+      ": ",
+      d.value
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/AreaChart.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "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__ */ jsx6("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__ */ jsxs6("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ jsx6("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ jsxs6("svg", { className: "chart__svg", width, height, children: [
+      [0, 0.25, 0.5, 0.75, 1].map((t) => /* @__PURE__ */ jsx6(
+        "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__ */ jsx6("path", { className: "chart__area", d: areaD, fill: COLORS4[0] }),
+      /* @__PURE__ */ jsx6("path", { className: "chart__line", d: lineD, stroke: COLORS4[0] }),
+      points.map((p, i) => /* @__PURE__ */ jsx6(
+        "circle",
+        {
+          className: "chart__dot",
+          cx: p.x,
+          cy: p.y,
+          r: 4,
+          fill: data[i].color ?? COLORS4[0]
+        },
+        i
+      )),
+      data.map((d, i) => /* @__PURE__ */ jsx6("text", { className: "chart__axis-label", x: points[i].x, y: height - 8, textAnchor: "middle", children: d.label }, i))
+    ] }),
+    showLegend && /* @__PURE__ */ jsx6("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ jsxs6("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ jsx6("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS4[i % COLORS4.length] } }),
+      d.label
+    ] }, i)) })
+  ] });
+};
+
+// src/Charts/DonutChart.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "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__ */ jsx7("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__ */ jsxs7("div", { className: `chart ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ jsx7("p", { className: "chart__title", children: title }),
+    /* @__PURE__ */ jsxs7("svg", { className: "chart__svg", width, height, children: [
+      slices.map((s, i) => /* @__PURE__ */ jsx7("path", { className: "chart__slice", d: s.path, fill: s.color }, i)),
+      centerLabel && /* @__PURE__ */ jsx7("text", { className: "chart__donut-label", x: cx, y: cy, children: centerLabel })
+    ] }),
+    showLegend && /* @__PURE__ */ jsx7("div", { className: "chart__legend", children: data.map((d, i) => /* @__PURE__ */ jsxs7("span", { className: "chart__legend-item", children: [
+      /* @__PURE__ */ jsx7("span", { className: "chart__legend-dot", style: { background: d.color ?? COLORS5[i % COLORS5.length] } }),
+      d.label,
+      ": ",
+      d.value
+    ] }, i)) })
+  ] });
+};
+export {
+  AreaChart,
+  BarChart,
+  DataTable,
+  DonutChart,
+  LineChart,
+  PieChart,
+  Widget,
+  saveBlob,
+  saveFile,
+  uuidFilename
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@orchestra-mcp/widgets",
+  "version": "0.2.0",
+  "description": "Utility widget components for Orchestra MCP",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "publishConfig": { "access": "public" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orchestra-mcp/widgets"
+  },
+  "funding": "https://github.com/sponsors/fadymondy",
+  "license": "MIT",
+  "dependencies": {
+    "@orchestra-mcp/icons": "^0.2.0",
+    "html-to-image": "^1.11.13"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "prepublishOnly": "pnpm build"
+  },
+  "keywords": ["orchestra", "mcp", "react", "components", "widgets"]
+}