@pixerate/editor-react 0.35.1 → 0.37.0

package/dist/index.cjs

@@ -33,6 +33,7 @@ __export(src_exports, {
   AdjustmentLayersPanel: () => AdjustmentLayersPanel,
   AssetMentionChips: () => AssetMentionChips,
   BubbleMenu: () => BubbleMenu,
+  ChartNodeView: () => ChartNodeView,
   CommandPalette: () => CommandPalette,
   CommentButton: () => CommentButton,
   CommentsPanel: () => CommentsPanel,
@@ -74,6 +75,7 @@ __export(src_exports, {
   bindDirtyToHistory: () => import_editor21.bindDirtyToHistory,
   createDirtyTracker: () => import_editor21.createDirtyTracker,
   createHistoryManager: () => import_editor21.createHistoryManager,
+  createReactChartNodeView: () => createReactChartNodeView,
   defaultIsEqual: () => import_editor21.defaultIsEqual,
   useAgentToolProvider: () => useAgentToolProvider,
   useAutosave: () => useAutosave,
@@ -7233,11 +7235,682 @@ var TableBubbleMenu = ({
   pluginKey = "tableBubbleMenu",
   ...rest
 }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BubbleMenu, { editor, pluginKey, shouldShow: import_editor20.shouldShowTableBubbleMenu, ...rest, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableToolbar, { editor, ...toolbarProps }) });
+
+// src/chart-node/ChartNodeView.tsx
+var import_client = require("react-dom/client");
+
+// src/chart/ChartCanvas.tsx
+var import_react57 = require("react");
+var import_chart2 = require("@pixerate/editor/chart");
+
+// src/chart/useChartEditor.ts
+var import_react56 = require("react");
+var import_chart = require("@pixerate/editor/chart");
+function useChartState(controller) {
+  return (0, import_react56.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+}
+
+// src/chart/ChartCanvas.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function renderChartMark(mark, fontFamily, interactive) {
+  const common = {
+    "data-role": mark.role,
+    "data-chart-key": mark.target ? mark.key : void 0,
+    "data-selected": mark.selected ? "" : void 0,
+    opacity: mark.opacity,
+    pointerEvents: mark.role === "selection" || mark.role === "drag-readout" || !mark.target && mark.role !== "background" ? "none" : void 0,
+    cursor: interactive && mark.target && mark.role !== "background" ? "pointer" : void 0
+  };
+  switch (mark.kind) {
+    case "rect":
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { ...common, x: mark.x, y: mark.y, width: mark.width, height: mark.height, rx: mark.radius, style: { fill: mark.fill, stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
+    case "path":
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "path",
+        {
+          ...common,
+          d: mark.d,
+          strokeLinejoin: "round",
+          strokeLinecap: "round",
+          strokeDasharray: mark.dash,
+          style: { fill: mark.fill ?? "none", stroke: mark.stroke, strokeWidth: mark.strokeWidth }
+        },
+        mark.key
+      );
+    case "circle":
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
+    case "line":
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { ...common, x1: mark.x1, y1: mark.y1, x2: mark.x2, y2: mark.y2, strokeDasharray: mark.dash, style: { stroke: mark.stroke, strokeWidth: mark.strokeWidth } }, mark.key);
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "text",
+        {
+          ...common,
+          x: mark.x,
+          y: mark.y,
+          textAnchor: mark.anchor,
+          dominantBaseline: (0, import_chart2.chartTextBaseline)(mark.baseline),
+          transform: (0, import_chart2.chartTextTransform)(mark),
+          style: { fill: mark.fill, fontSize: mark.size, fontWeight: mark.weight, fontFamily, userSelect: "none" },
+          children: mark.text
+        },
+        mark.key
+      );
+  }
+}
+function ChartPresenceLayer({ presence }) {
+  const { actors } = (0, import_react57.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("g", { "data-chart-presence": "", pointerEvents: "none", children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("g", { transform: `translate(${a.x} ${a.y})`, "data-actor": a.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 }, transform: a.pressed ? "scale(0.9)" : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("g", { transform: "translate(13 16)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { x: 0, y: 0, rx: 4, height: 18, width: Math.max(28, (a.message ?? a.name).length * 6.4 + 12), style: { fill: a.color } }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("text", { x: 6, y: 9, dominantBaseline: "central", style: { fill: "#ffffff", fontSize: 11, fontWeight: 600, fontFamily: "inherit" }, children: a.message ?? a.name })
+    ] })
+  ] }, a.id)) });
+}
+function ChartCanvas({ controller, width = 640, height = 400, responsive = true, theme, editable = true, measureText, emptyMessage, className, presence, sceneRef }) {
+  const state = useChartState(controller);
+  const wrapper = (0, import_react57.useRef)(null);
+  const svg = (0, import_react57.useRef)(null);
+  const drag = (0, import_react57.useRef)(null);
+  const [measured, setMeasured] = (0, import_react57.useState)(null);
+  const [frozen, setFrozen] = (0, import_react57.useState)(null);
+  (0, import_react57.useEffect)(() => {
+    const el = wrapper.current;
+    if (!responsive || !el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      const w = Math.round(entry.contentRect.width);
+      if (w > 0) setMeasured(w);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [responsive]);
+  const sceneWidth = responsive && measured || width;
+  const fullTheme = (0, import_react57.useMemo)(() => ({ ...import_chart2.CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
+  const scene = (0, import_react57.useMemo)(
+    () => (0, import_chart2.layoutChart)(state.spec, {
+      width: sceneWidth,
+      height,
+      theme: fullTheme,
+      selection: editable ? state.selection : null,
+      measureText,
+      emptyMessage,
+      valueDomain: frozen?.valueDomain,
+      valueDomain2: frozen?.valueDomain2,
+      xDomain: frozen?.xDomain,
+      readout: frozen?.readout
+    }),
+    [state.spec, state.selection, sceneWidth, height, fullTheme, editable, measureText, emptyMessage, frozen]
+  );
+  if (sceneRef) sceneRef.current = scene;
+  const byKey = (0, import_react57.useMemo)(() => new Map(scene.marks.map((m) => [m.key, m])), [scene]);
+  (0, import_react57.useEffect)(() => () => drag.current?.end(), []);
+  const scenePoint = (e) => (0, import_chart2.chartClientToScene)(scene, svg.current.getBoundingClientRect(), e.clientX, e.clientY);
+  const onPointerDown = (e) => {
+    if (!editable || e.button !== 0) return;
+    const key = e.target.closest?.("[data-chart-key]")?.getAttribute("data-chart-key");
+    const target = key ? byKey.get(key)?.target : void 0;
+    controller.select(target ?? null);
+    drag.current = (0, import_chart2.startChartPointDrag)(controller, scene, target, scenePoint(e));
+    if (drag.current) {
+      const d = drag.current;
+      setFrozen({ valueDomain: d.valueDomain, valueDomain2: d.valueDomain2 ?? null, xDomain: d.xDomain ?? null, readout: d.target });
+      svg.current?.setPointerCapture?.(e.pointerId);
+    }
+  };
+  const onPointerMove = (e) => {
+    if (drag.current) drag.current.move(scenePoint(e), { fine: e.altKey, lockAxis: e.shiftKey, noSnap: e.ctrlKey || e.metaKey });
+  };
+  const endDrag = () => {
+    drag.current?.end();
+    drag.current = null;
+    setFrozen(null);
+  };
+  const onKeyDown = (e) => {
+    if (drag.current && e.key === "Escape") {
+      drag.current.cancel();
+      drag.current = null;
+      setFrozen(null);
+      e.preventDefault();
+      return;
+    }
+    if (editable && (0, import_chart2.handleChartKey)(controller, scene, e)) e.preventDefault();
+  };
+  const label = state.spec.title || "Chart";
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref: wrapper, className: `w-full ${className ?? ""}`, "data-chart-canvas": "", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "svg",
+    {
+      ref: svg,
+      width: sceneWidth,
+      height,
+      viewBox: `0 0 ${scene.width} ${scene.height}`,
+      role: "img",
+      "aria-label": editable ? `${label}. ${(0, import_chart2.describeChartSelection)(controller, state.selection)}` : label,
+      tabIndex: editable ? 0 : void 0,
+      className: "block max-w-full touch-none select-none rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onKeyDown,
+      children: [
+        scene.marks.map((m) => renderChartMark(m, scene.theme.fontFamily, editable)),
+        presence && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChartPresenceLayer, { presence })
+      ]
+    }
+  ) });
+}
+
+// src/chart/ChartDataGrid.tsx
+var import_react58 = require("react");
+var import_chart3 = require("@pixerate/editor/chart");
+
+// src/chart/styles.ts
+var chartInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
+var chartButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
+var chartIconButtonClass = "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-xs text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40";
+var chartSegmentClass = (active) => `inline-flex h-7 flex-1 items-center justify-center rounded px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary ${active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`;
+var chartLabelClass = "text-[11px] font-medium text-muted-foreground";
+var chartSectionClass = "space-y-2 border-b border-border pb-3 last:border-b-0";
+var chartCellClass = "h-7 w-full min-w-[4.5rem] bg-transparent px-2 text-right text-xs tabular-nums text-foreground focus-visible:bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary";
+
+// src/chart/ChartDataGrid.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function ChartCommitInput({ value, onCommit, onKeyDown, onBlur, ...rest }) {
+  const [draft, setDraft] = (0, import_react58.useState)(value);
+  const typing = (0, import_react58.useRef)(false);
+  (0, import_react58.useEffect)(() => {
+    if (!typing.current) setDraft(value);
+  }, [value]);
+  const commit = () => {
+    if (!typing.current) return;
+    typing.current = false;
+    if (draft === value) return;
+    if (onCommit(draft) === false) setDraft(value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "input",
+    {
+      ...rest,
+      value: draft,
+      onChange: (e) => {
+        typing.current = true;
+        setDraft(e.currentTarget.value);
+      },
+      onBlur: (e) => {
+        onBlur?.(e);
+        commit();
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          typing.current = false;
+          setDraft(value);
+        }
+      }
+    }
+  );
+}
+function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = false, className }) {
+  const { spec, selection } = useChartState(controller);
+  const paste = (row, column) => (e) => {
+    const text = e.clipboardData?.getData("text/plain") ?? "";
+    if (!/[\t\n]/.test(text.replace(/\n$/, ""))) return;
+    e.preventDefault();
+    controller.pasteCells(row, column, text);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: `overflow-auto rounded-md border border-border ${className ?? ""}`, "data-chart-grid": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("table", { className: "w-full border-collapse text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("thead", { className: "bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "border-b border-r border-border px-2 py-1 text-left font-medium text-muted-foreground", children: categoryHeader }),
+        spec.series.map((s, si) => {
+          const color = (0, import_chart3.chartSeriesColor)(spec, si);
+          const selected = selection?.kind === "series" && selection.seriesId === s.id;
+          return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { "data-series-id": s.id, className: `border-b border-r border-border px-1 py-1 font-medium ${selected ? "bg-primary/10" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "input",
+              {
+                type: "color",
+                "aria-label": `${s.name} colour`,
+                value: (0, import_chart3.chartColorInputValue)(color),
+                disabled: readOnly,
+                onPointerDown: () => controller.beginGesture(`color:${s.id}`),
+                onChange: (e) => controller.updateSeries(s.id, { color: e.currentTarget.value }),
+                onBlur: () => controller.endGesture(),
+                className: "h-5 w-5 shrink-0 cursor-pointer rounded border-0 bg-transparent p-0"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              ChartCommitInput,
+              {
+                value: s.name,
+                "aria-label": "Series name",
+                onFocus: () => controller.select({ kind: "series", seriesId: s.id }),
+                onCommit: (name) => void controller.updateSeries(s.id, { name }),
+                className: `${chartInputClass} h-6 min-w-[5rem] border-transparent bg-transparent font-medium ${s.hidden ? "text-muted-foreground line-through" : ""}`
+              }
+            ),
+            !readOnly && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: chartIconButtonClass,
+                  title: s.hidden ? "Show series" : "Hide series",
+                  "aria-label": s.hidden ? `Show ${s.name}` : `Hide ${s.name}`,
+                  "aria-pressed": !s.hidden,
+                  "data-action": "toggle-series",
+                  onClick: () => controller.toggleSeries(s.id),
+                  children: s.hidden ? "\u25CB" : "\u25CF"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Delete series", "aria-label": `Delete ${s.name}`, "data-action": "remove-series", onClick: () => controller.removeSeries(s.id), children: "\xD7" })
+            ] })
+          ] }) }, s.id);
+        }),
+        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "w-8 border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Add series", "aria-label": "Add series", "data-action": "add-series", onClick: () => controller.addSeries(), children: "+" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tbody", { children: spec.categories.map((category, i) => {
+        const rowSelected = selection?.kind === "category" && selection.index === i;
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("tr", { "data-category-index": i, className: rowSelected ? "bg-primary/10" : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("th", { className: "border-b border-r border-border p-0 text-left font-normal", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            ChartCommitInput,
+            {
+              value: category,
+              "aria-label": `Category ${i + 1}`,
+              onFocus: () => controller.select({ kind: "category", index: i }),
+              onPaste: paste(i, -1),
+              onCommit: (label) => void controller.renameCategory(i, label),
+              className: `${chartCellClass} text-left`
+            }
+          ) }),
+          spec.series.map((s) => {
+            const value = s.values[i];
+            const selected = selection?.kind === "point" && selection.seriesId === s.id && selection.index === i;
+            return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: `border-b border-r border-border p-0 ${selected ? "bg-primary/10" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              ChartCommitInput,
+              {
+                value: value === null || value === void 0 ? "" : String(value),
+                inputMode: "decimal",
+                "aria-label": `${s.name}, ${category}`,
+                title: value === null ? void 0 : (0, import_chart3.formatChartNumber)(value, spec.yAxis.format),
+                "data-cell": `${s.id}:${i}`,
+                onFocus: () => controller.select({ kind: "point", seriesId: s.id, index: i }),
+                onPaste: paste(i, spec.series.indexOf(s)),
+                onCommit: (text) => controller.setValue(s.id, i, text).ok,
+                className: chartCellClass
+              }
+            ) }, s.id);
+          }),
+          !readOnly && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "border-b border-border px-1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", className: chartIconButtonClass, title: "Delete category", "aria-label": `Delete ${category}`, "data-action": "remove-category", onClick: () => controller.removeCategory(i), children: "\xD7" }) })
+        ] }, i);
+      }) })
+    ] }),
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", className: `${chartButtonClass} h-6 border-dashed`, "data-action": "add-category", onClick: () => controller.addCategory(), children: "+ Add category" }) })
+  ] });
+}
+
+// src/chart/ChartInspector.tsx
+var import_react59 = require("react");
+var import_chart4 = require("@pixerate/editor/chart");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+function Field({ label, htmlFor, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { htmlFor, className: `${chartLabelClass} w-20 shrink-0`, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "min-w-0 flex-1", children })
+  ] });
+}
+function Toggle({ label, checked, onChange, name }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "checkbox", className: "h-3.5 w-3.5 accent-primary", checked, "data-option": name, onChange: (e) => onChange(e.currentTarget.checked) }),
+    label
+  ] });
+}
+function Select({ id, value, options, onChange, name, labels }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("select", { id, className: chartInputClass, value, "data-option": name, onChange: (e) => onChange(e.currentTarget.value), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: o, children: labels?.[o] ?? cap(o) }, o)) });
+}
+function AxisSection({ controller, axis, value, idBase, horizontal, numeric = false }) {
+  const set = (patch) => controller.setAxis(axis, patch);
+  const setFormat = (patch) => set({ format: { ...value.format, ...patch } });
+  const bound = (key2) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    ChartCommitInput,
+    {
+      id: `${idBase}-${axis}-${key2}`,
+      value: value[key2] === null ? "" : String(value[key2]),
+      placeholder: "Auto",
+      inputMode: "decimal",
+      "data-option": `${axis}Axis.${key2}`,
+      className: chartInputClass,
+      onCommit: (text) => set({ [key2]: text.trim() === "" ? null : Number(text) }).ok
+    }
+  );
+  const name = axis === "x" ? numeric ? "X axis" : "Category axis" : axis === "y" ? "Value axis" : "Secondary axis";
+  const valueAxis = axis !== "x" || numeric;
+  const key = axis === "y2" ? "yAxis2" : `${axis}Axis`;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: chartSectionClass, "data-section": `axis-${axis}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("h4", { className: "text-xs font-semibold text-foreground", children: [
+        name,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "ml-1 font-normal text-muted-foreground", children: [
+          "(",
+          axis === "x" ? horizontal ? "left" : "bottom" : axis === "y2" ? horizontal ? "top" : "right" : horizontal ? "bottom" : "left",
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Show", name: `${axis}Axis.show`, checked: value.show, onChange: (show) => set({ show }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Title", htmlFor: `${idBase}-${axis}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartCommitInput, { id: `${idBase}-${axis}-title`, value: value.title, "data-option": `${axis}Axis.title`, className: chartInputClass, onCommit: (title) => void set({ title }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Grid lines", name: `${key}.gridlines`, checked: value.gridlines, onChange: (gridlines) => set({ gridlines }) }),
+      axis === "x" && !numeric && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Dates", name: "xAxis.kind", checked: value.kind === "date", onChange: (dates) => set({ kind: dates ? "date" : void 0 }) })
+    ] }),
+    valueAxis && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Step", htmlFor: `${idBase}-${axis}-step`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      ChartCommitInput,
+      {
+        id: `${idBase}-${axis}-step`,
+        value: value.step === null ? "" : String(value.step),
+        placeholder: "Auto",
+        inputMode: "decimal",
+        "data-option": `${key}.step`,
+        className: chartInputClass,
+        onCommit: (text) => set({ step: text.trim() === "" ? null : Number(text) }).ok
+      }
+    ) }),
+    valueAxis && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Min / max", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-1", children: [
+        bound("min"),
+        bound("max")
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Format", htmlFor: `${idBase}-${axis}-format`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Select, { id: `${idBase}-${axis}-format`, name: `${key}.format.style`, value: value.format.style ?? "number", options: import_chart4.CHART_NUMBER_STYLES, onChange: (style) => setFormat({ style }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          ChartCommitInput,
+          {
+            value: value.format.decimals === void 0 ? "" : String(value.format.decimals),
+            placeholder: "Auto",
+            "aria-label": "Decimals",
+            title: "Decimals",
+            inputMode: "numeric",
+            "data-option": `${key}.format.decimals`,
+            className: `${chartInputClass} w-14 shrink-0`,
+            onCommit: (text) => {
+              const format = { ...value.format };
+              if (text.trim() === "") delete format.decimals;
+              else format.decimals = Number(text);
+              return set({ format }).ok;
+            }
+          }
+        )
+      ] }) }),
+      value.format.style === "currency" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Currency", htmlFor: `${idBase}-${axis}-currency`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartCommitInput, { id: `${idBase}-${axis}-currency`, value: value.format.currency ?? "USD", "data-option": `${key}.format.currency`, className: chartInputClass, onCommit: (currency) => void setFormat({ currency: currency.toUpperCase() }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Code", htmlFor: `${idBase}-${axis}-code`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        ChartCommitInput,
+        {
+          id: `${idBase}-${axis}-code`,
+          value: value.format.code ?? "",
+          placeholder: 'e.g. #,##0.0,,"M"',
+          "data-option": `${key}.format.code`,
+          className: chartInputClass,
+          onCommit: (code) => {
+            const format = { ...value.format };
+            if (code.trim()) format.code = code.trim();
+            else delete format.code;
+            return set({ format }).ok;
+          }
+        }
+      ) })
+    ] })
+  ] });
+}
+function ChartInspector({ controller, sections, className }) {
+  const { spec, selectedSeries } = useChartState(controller);
+  const idBase = (0, import_react59.useId)();
+  const show = (section) => !sections || sections.includes(section);
+  const cartesian = (0, import_chart4.isCartesianChart)(spec.type);
+  const family = (0, import_chart4.chartFamily)(spec);
+  const hasAxes = family === "cartesian" || family === "xy" || family === "waterfall" || family === "histogram" || family === "box";
+  const types = spec.series.map((s) => (0, import_chart4.chartSeriesType)(spec, s));
+  const usesSecondary = family === "cartesian" && spec.series.some((s) => s.axis === "secondary" && !s.hidden);
+  const colorCheck = (0, import_chart4.checkChartColors)(spec.series.filter((s) => !s.hidden).map((s) => (0, import_chart4.chartSeriesColor)(spec, spec.series.indexOf(s))));
+  const hasBars = cartesian && types.includes("bar");
+  const hasLines = cartesian && types.some((t) => t === "line" || t === "area");
+  const seriesIndex = selectedSeries ? spec.series.findIndex((s) => s.id === selectedSeries.id) : -1;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: `space-y-3 text-xs ${className ?? ""}`, "data-chart-inspector": "", children: [
+    show("type") && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: chartSectionClass, "data-section": "type", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "grid grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5", role: "radiogroup", "aria-label": "Chart type", children: import_chart4.CHART_TYPES.map((type) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", role: "radio", "aria-checked": spec.type === type, "data-chart-type": type, className: chartSegmentClass(spec.type === type), onClick: () => controller.setType(type), children: import_chart4.CHART_TYPE_LABELS[type] }, type)) }) }),
+    show("style") && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: chartSectionClass, "data-section": "style", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Layout", htmlFor: `${idBase}-layout`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("select", { id: `${idBase}-layout`, className: chartInputClass, value: "", "data-option": "preset.layout", onChange: (e) => e.currentTarget.value && controller.applyPreset({ layout: e.currentTarget.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: "", children: "Quick layout\u2026" }),
+        import_chart4.CHART_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: p.id, title: p.description, children: p.label }, p.id))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Colours", htmlFor: `${idBase}-colors`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("select", { id: `${idBase}-colors`, className: chartInputClass, value: import_chart4.CHART_COLOR_SCHEMES.find((c) => c.palette.join() === spec.palette.join())?.id ?? "", "data-option": "preset.colors", onChange: (e) => e.currentTarget.value && controller.applyPreset({ colors: e.currentTarget.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: "", children: "Custom" }),
+        import_chart4.CHART_COLOR_SCHEMES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: c.id, title: c.description, children: c.label }, c.id))
+      ] }) }),
+      !colorCheck.ok && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] leading-snug text-amber-600 dark:text-amber-400", "data-chart-color-warning": "", children: colorCheck.issues[0] }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "transpose", onClick: () => controller.transpose(), children: "Switch rows and columns" })
+    ] }),
+    show("titles") && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: chartSectionClass, "data-section": "titles", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Title", htmlFor: `${idBase}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartCommitInput, { id: `${idBase}-title`, value: spec.title, "data-option": "title", className: chartInputClass, onCommit: (title) => void controller.setTitle(title) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Subtitle", htmlFor: `${idBase}-subtitle`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartCommitInput, { id: `${idBase}-subtitle`, value: spec.subtitle, "data-option": "subtitle", className: chartInputClass, onCommit: (subtitle) => void controller.setSubtitle(subtitle) }) })
+    ] }),
+    show("options") && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: chartSectionClass, "data-section": "options", children: [
+      cartesian && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Stacking", htmlFor: `${idBase}-stacking`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Select, { id: `${idBase}-stacking`, name: "stacking", value: spec.stacking, options: import_chart4.CHART_STACKINGS, labels: { none: "None", stacked: "Stacked", percent: "100%" }, onChange: (stacking) => controller.update({ stacking }) }) }),
+      hasBars && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Bars", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: ["vertical", "horizontal"].map((o) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", "aria-pressed": spec.orientation === o, "data-option": `orientation.${o}`, className: chartSegmentClass(spec.orientation === o), onClick: () => controller.update({ orientation: o }), children: cap(o) }, o)) }) }),
+      hasLines && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Lines", htmlFor: `${idBase}-curve`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Select, { id: `${idBase}-curve`, name: "curve", value: spec.curve, options: import_chart4.CHART_CURVES, onChange: (curve) => controller.update({ curve }) }) }),
+      spec.type === "donut" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Hole", htmlFor: `${idBase}-hole`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "input",
+        {
+          id: `${idBase}-hole`,
+          type: "range",
+          min: 0,
+          max: 0.9,
+          step: 0.05,
+          value: spec.innerRadius,
+          "data-option": "innerRadius",
+          className: "w-full accent-primary",
+          onPointerDown: () => controller.beginGesture("innerRadius"),
+          onPointerUp: () => controller.endGesture(),
+          onChange: (e) => controller.update({ innerRadius: Number(e.currentTarget.value) })
+        }
+      ) }),
+      hasBars && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Spacing", htmlFor: `${idBase}-gap`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "input",
+        {
+          id: `${idBase}-gap`,
+          type: "range",
+          min: 0,
+          max: 0.9,
+          step: 0.02,
+          value: spec.gapWidth,
+          "data-option": "gapWidth",
+          className: "w-full accent-primary",
+          onPointerDown: () => controller.beginGesture("gapWidth"),
+          onPointerUp: () => controller.endGesture(),
+          onChange: (e) => controller.update({ gapWidth: Number(e.currentTarget.value) })
+        }
+      ) }),
+      spec.dataLabels && hasBars && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Labels", htmlFor: `${idBase}-label-position`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Select, { id: `${idBase}-label-position`, name: "labelPosition", value: spec.labelPosition, options: import_chart4.CHART_LABEL_POSITIONS, onChange: (labelPosition) => controller.update({ labelPosition }) }) }),
+      spec.type === "histogram" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Bins", htmlFor: `${idBase}-bins`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartCommitInput, { id: `${idBase}-bins`, value: spec.bins === null ? "" : String(spec.bins), placeholder: "Auto", inputMode: "numeric", "data-option": "bins", className: chartInputClass, onCommit: (text) => controller.update({ bins: text.trim() === "" ? null : Number(text) }).ok }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
+        spec.type === "waterfall" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Total bar", name: "showTotal", checked: spec.showTotal, onChange: (showTotal) => controller.update({ showTotal }) }),
+        hasLines && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Points", name: "points", checked: spec.points, onChange: (points) => controller.update({ points }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Data labels", name: "dataLabels", checked: spec.dataLabels, onChange: (dataLabels) => controller.update({ dataLabels }) })
+      ] })
+    ] }),
+    show("legend") && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: chartSectionClass, "data-section": "legend", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Legend" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Show", name: "legend.show", checked: spec.legend.show, onChange: (v) => controller.setLegend({ show: v }) })
+      ] }),
+      spec.legend.show && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: import_chart4.CHART_LEGEND_POSITIONS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", "aria-pressed": spec.legend.position === p, "data-option": `legend.${p}`, className: chartSegmentClass(spec.legend.position === p), onClick: () => controller.setLegend({ position: p }), children: cap(p) }, p)) })
+    ] }),
+    show("axes") && hasAxes && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+      family !== "box" && family !== "histogram" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal", numeric: family === "xy" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal" }),
+      usesSecondary && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AxisSection, { controller, axis: "y2", value: spec.yAxis2, idBase, horizontal: spec.orientation === "horizontal" })
+    ] }),
+    show("series") && selectedSeries && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: chartSectionClass, "data-section": "series", "data-series-id": selectedSeries.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Series" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Name", htmlFor: `${idBase}-series-name`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartCommitInput, { id: `${idBase}-series-name`, value: selectedSeries.name, "data-option": "series.name", className: chartInputClass, onCommit: (name) => void controller.updateSeries(selectedSeries.id, { name }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Colour", htmlFor: `${idBase}-series-color`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "input",
+          {
+            id: `${idBase}-series-color`,
+            type: "color",
+            value: (0, import_chart4.chartColorInputValue)((0, import_chart4.chartSeriesColor)(spec, seriesIndex)),
+            "data-option": "series.color",
+            className: "h-7 w-9 shrink-0 cursor-pointer rounded border border-input bg-background p-0.5",
+            onPointerDown: () => controller.beginGesture(`color:${selectedSeries.id}`),
+            onBlur: () => controller.endGesture(),
+            onChange: (e) => controller.updateSeries(selectedSeries.id, { color: e.currentTarget.value })
+          }
+        ),
+        selectedSeries.color && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "reset-color", onClick: () => controller.updateSeries(selectedSeries.id, { color: null }), children: "Palette" })
+      ] }) }),
+      cartesian && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Draw as", htmlFor: `${idBase}-series-type`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        "select",
+        {
+          id: `${idBase}-series-type`,
+          className: chartInputClass,
+          value: selectedSeries.type ?? "",
+          "data-option": "series.type",
+          onChange: (e) => controller.updateSeries(selectedSeries.id, { type: e.currentTarget.value || null }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: "", children: "Chart type" }),
+            import_chart4.CHART_SERIES_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: t, children: import_chart4.CHART_TYPE_LABELS[t] }, t))
+          ]
+        }
+      ) }),
+      (cartesian || family === "xy") && ["line", "area", "scatter"].includes((0, import_chart4.chartSeriesType)(spec, selectedSeries)) && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Field, { label: "Marker", htmlFor: `${idBase}-series-marker`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        "select",
+        {
+          id: `${idBase}-series-marker`,
+          className: chartInputClass,
+          value: selectedSeries.marker ?? "",
+          "data-option": "series.marker",
+          onChange: (e) => controller.updateSeries(selectedSeries.id, { marker: e.currentTarget.value || null }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: "", children: "Default" }),
+            import_chart4.CHART_MARKERS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: m, children: cap(m) }, m))
+          ]
+        }
+      ) }),
+      (0, import_chart4.chartSupportsTrendlines)(spec.type, spec.stacking) && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "space-y-1", "data-section": "trendlines", children: [
+        (selectedSeries.trendlines ?? []).map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", "data-trendline": i, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 truncate text-muted-foreground", children: (0, import_chart4.chartTrendlineName)(t, selectedSeries.name) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "R\xB2", name: `trendline.${i}.showR2`, checked: !!t.showR2, onChange: (showR2) => controller.updateTrendline(selectedSeries.id, i, { showR2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: chartButtonClass, "aria-label": "Delete trendline", "data-action": "trendline-delete", onClick: () => controller.removeTrendline(selectedSeries.id, i), children: "\xD7" })
+        ] }, i)),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          "select",
+          {
+            className: chartInputClass,
+            value: "",
+            "aria-label": "Add trendline",
+            "data-option": "trendline.add",
+            onChange: (e) => e.currentTarget.value && controller.addTrendline(selectedSeries.id, { type: e.currentTarget.value }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: "", children: "Add trendline\u2026" }),
+              import_chart4.CHART_TRENDLINE_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: t, children: cap(t.replace("-", " ")) }, t))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Hidden", name: "series.hidden", checked: !!selectedSeries.hidden, onChange: (hidden) => controller.updateSeries(selectedSeries.id, { hidden }) }),
+        family === "cartesian" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toggle, { label: "Secondary axis", name: "series.axis", checked: selectedSeries.axis === "secondary", onChange: (secondary) => controller.updateSeries(selectedSeries.id, { axis: secondary ? "secondary" : null }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: chartButtonClass, disabled: seriesIndex <= 0, "aria-label": "Move series earlier", "data-action": "series-up", onClick: () => controller.moveSeries(selectedSeries.id, seriesIndex - 1), children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: chartButtonClass, disabled: seriesIndex >= spec.series.length - 1, "aria-label": "Move series later", "data-action": "series-down", onClick: () => controller.moveSeries(selectedSeries.id, seriesIndex + 1), children: "\u2193" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: `${chartButtonClass} text-destructive`, "data-action": "series-delete", onClick: () => controller.removeSeries(selectedSeries.id), children: "Delete" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/chart-node/ChartNodeView.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function ChartNodeView({ state, theme, showDataGrid = true }) {
+  const { controller, editing, editable, selected, width, height, setEditing } = state;
+  const open = () => {
+    if (editable && !editing) setEditing(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "div",
+    {
+      className: `not-prose my-2 rounded-md border bg-background p-1 ${selected ? "border-primary ring-1 ring-primary" : "border-border"}`,
+      "data-chart-node-view": "",
+      "data-editing": editing ? "" : void 0,
+      onKeyDown: (e) => {
+        if (editing && e.key === "Escape") {
+          e.stopPropagation();
+          setEditing(false);
+        }
+      },
+      children: [
+        editing && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-2 px-1", "data-chart-node-toolbar": "", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xs text-muted-foreground", children: "Editing chart" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "done", onClick: () => setEditing(false), children: "Done" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "div",
+          {
+            className: editable && !editing ? "cursor-pointer" : void 0,
+            onClick: open,
+            title: editable && !editing ? "Click to edit the chart" : void 0,
+            "data-chart-node-canvas": "",
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChartCanvas, { controller, width: width ?? 640, height, responsive: width === null, editable: editing, theme })
+          }
+        ),
+        editing && // Wraps by the document's width, not the viewport's: side by side when there is room.
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mt-2 flex flex-wrap items-start gap-2", "data-chart-node-panel": "", children: [
+          showDataGrid && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "min-w-0 flex-[1_1_20rem] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChartDataGrid, { controller }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChartInspector, { controller, className: "max-h-96 min-w-0 flex-[1_1_16rem] overflow-y-auto rounded-md border border-border p-3" })
+        ] })
+      ]
+    }
+  );
+}
+function createReactChartNodeView(options = {}) {
+  const { component: Component = ChartNodeView, ...props } = options;
+  return (dom, state) => {
+    const root = (0, import_client.createRoot)(dom);
+    let latest = state;
+    let scheduled = false;
+    let destroyed = false;
+    const schedule = () => {
+      if (scheduled) return;
+      scheduled = true;
+      queueMicrotask(() => {
+        scheduled = false;
+        if (!destroyed) root.render(/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component, { ...props, state: latest }));
+      });
+    };
+    schedule();
+    return {
+      update: (next) => {
+        latest = next;
+        schedule();
+      },
+      destroy: () => {
+        destroyed = true;
+        queueMicrotask(() => root.unmount());
+      }
+    };
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AdjustmentLayersPanel,
   AssetMentionChips,
   BubbleMenu,
+  ChartNodeView,
   CommandPalette,
   CommentButton,
   CommentsPanel,
@@ -7279,6 +7952,7 @@ var TableBubbleMenu = ({
   bindDirtyToHistory,
   createDirtyTracker,
   createHistoryManager,
+  createReactChartNodeView,
   defaultIsEqual,
   useAgentToolProvider,
   useAutosave,