@pixerate/editor-react 0.35.1 → 0.37.0

package/dist/chart/index.js

@@ -1,532 +1,106 @@
-// src/chart/useChartEditor.ts
-import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import {
-  ChartController,
-  createChartCommands
-} from "@pixerate/editor/chart";
-function useChartController(options = {}) {
-  const ref = useRef(null);
-  if (!ref.current) ref.current = new ChartController(options);
-  return ref.current;
-}
-function useChartState(controller) {
-  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
-}
-function useChartEditor(controllerOrOptions = {}) {
-  const own = useRef(null);
-  let controller;
-  if (controllerOrOptions instanceof ChartController) controller = controllerOrOptions;
-  else {
-    if (!own.current) own.current = new ChartController(controllerOrOptions);
-    controller = own.current;
-  }
-  const state = useChartState(controller);
-  const actions = useMemo(
-    () => ({
-      update: (patch) => controller.update(patch),
-      setType: (type) => controller.setType(type),
-      setValue: (seriesId, index, value) => controller.setValue(seriesId, index, value),
-      select: (selection) => controller.select(selection),
-      undo: () => void controller.undo(),
-      redo: () => void controller.redo()
-    }),
-    [controller]
-  );
-  return { controller, state, spec: state.spec, selection: state.selection, ...actions };
-}
-function useChartCommands(registry, controller, options = {}) {
-  const { prefix, group, scope } = options;
-  useEffect(() => {
-    if (!registry) return;
-    return registry.register(createChartCommands(controller, { prefix, group, scope }));
-  }, [registry, controller, prefix, group, scope]);
-}
-
-// 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";
+  ChartCanvas,
+  ChartCommitInput,
+  ChartDataGrid,
+  ChartInspector,
+  ChartPresenceLayer,
+  ChartSceneSvg,
+  chartButtonClass,
+  chartCellClass,
+  chartIconButtonClass,
+  chartInputClass,
+  chartLabelClass,
+  chartSectionClass,
+  chartSegmentClass,
+  renderChartMark,
+  useChartCommands,
+  useChartController,
+  useChartDirector,
+  useChartEditor,
+  useChartState,
+  useChartToolProvider
+} from "../chunk-C2JWRD2B.js";
 
-// src/chart/ChartCanvas.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
-import {
-  CSS_VARIABLE_CHART_THEME,
-  chartClientToScene,
-  chartTextBaseline,
-  chartTextTransform,
-  describeChartSelection,
-  handleChartKey,
-  layoutChart,
-  startChartPointDrag
-} from "@pixerate/editor/chart";
-import { jsx } from "react/jsx-runtime";
-function renderMark(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.target && mark.role !== "background" ? "none" : void 0,
-    cursor: interactive && mark.target && mark.role !== "background" ? "pointer" : void 0
-  };
-  switch (mark.kind) {
-    case "rect":
-      return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(
-        "text",
-        {
-          ...common,
-          x: mark.x,
-          y: mark.y,
-          textAnchor: mark.anchor,
-          dominantBaseline: chartTextBaseline(mark.baseline),
-          transform: chartTextTransform(mark),
-          style: { fill: mark.fill, fontSize: mark.size, fontWeight: mark.weight, fontFamily, userSelect: "none" },
-          children: mark.text
-        },
-        mark.key
-      );
-  }
-}
-function ChartCanvas({ controller, width = 640, height = 400, responsive = true, theme, editable = true, measureText, emptyMessage, className }) {
+// src/chart/ChartEditor.tsx
+import { describeChartSelection } from "@pixerate/editor/chart";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartEditor({ controller, showInspector = true, showDataGrid = true, showToolbar = true, height = 380, canvasProps, className }) {
   const state = useChartState(controller);
-  const wrapper = useRef2(null);
-  const svg = useRef2(null);
-  const drag = useRef2(null);
-  const [measured, setMeasured] = useState(null);
-  const [valueDomain, setValueDomain] = useState(null);
-  useEffect2(() => {
-    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 = useMemo2(() => ({ ...CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
-  const scene = useMemo2(
-    () => layoutChart(state.spec, { width: sceneWidth, height, theme: fullTheme, selection: editable ? state.selection : null, measureText, emptyMessage, valueDomain }),
-    [state.spec, state.selection, sceneWidth, height, fullTheme, editable, measureText, emptyMessage, valueDomain]
-  );
-  const byKey = useMemo2(() => new Map(scene.marks.map((m) => [m.key, m])), [scene]);
-  useEffect2(() => () => drag.current?.end(), []);
-  const scenePoint = (e) => 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 = startChartPointDrag(controller, scene, target, scenePoint(e));
-    if (drag.current) {
-      setValueDomain(drag.current.valueDomain);
-      svg.current?.setPointerCapture?.(e.pointerId);
-    }
-  };
-  const onPointerMove = (e) => {
-    if (drag.current) drag.current.move(scenePoint(e));
-  };
-  const endDrag = () => {
-    drag.current?.end();
-    drag.current = null;
-    setValueDomain(null);
-  };
-  const onKeyDown = (e) => {
-    if (editable && handleChartKey(controller, scene, e)) e.preventDefault();
-  };
-  const label = state.spec.title || "Chart";
-  return /* @__PURE__ */ jsx("div", { ref: wrapper, className: `w-full ${className ?? ""}`, "data-chart-canvas": "", children: /* @__PURE__ */ jsx(
-    "svg",
-    {
-      ref: svg,
-      width: sceneWidth,
-      height,
-      viewBox: `0 0 ${scene.width} ${scene.height}`,
-      role: "img",
-      "aria-label": editable ? `${label}. ${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) => renderMark(m, scene.theme.fontFamily, editable))
-    }
-  ) });
-}
-
-// src/chart/ChartDataGrid.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
-import { chartColorInputValue, chartSeriesColor, formatChartNumber } from "@pixerate/editor/chart";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function ChartCommitInput({ value, onCommit, onKeyDown, onBlur, ...rest }) {
-  const [draft, setDraft] = useState2(value);
-  const typing = useRef3(false);
-  useEffect3(() => {
-    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__ */ jsx2(
-    "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__ */ jsxs("div", { className: `overflow-auto rounded-md border border-border ${className ?? ""}`, "data-chart-grid": "", children: [
-    /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-xs", children: [
-      /* @__PURE__ */ jsx2("thead", { className: "bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx2("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 = chartSeriesColor(spec, si);
-          const selected = selection?.kind === "series" && selection.seriesId === s.id;
-          return /* @__PURE__ */ jsx2("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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "color",
-                "aria-label": `${s.name} colour`,
-                value: 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__ */ jsx2(
-              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__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx2(
-                "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__ */ jsx2("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__ */ jsx2("th", { className: "w-8 border-b border-border px-1", children: /* @__PURE__ */ jsx2("button", { type: "button", className: chartIconButtonClass, title: "Add series", "aria-label": "Add series", "data-action": "add-series", onClick: () => controller.addSeries(), children: "+" }) })
-      ] }) }),
-      /* @__PURE__ */ jsx2("tbody", { children: spec.categories.map((category, i) => {
-        const rowSelected = selection?.kind === "category" && selection.index === i;
-        return /* @__PURE__ */ jsxs("tr", { "data-category-index": i, className: rowSelected ? "bg-primary/10" : void 0, children: [
-          /* @__PURE__ */ jsx2("th", { className: "border-b border-r border-border p-0 text-left font-normal", children: /* @__PURE__ */ jsx2(
-            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__ */ jsx2("td", { className: `border-b border-r border-border p-0 ${selected ? "bg-primary/10" : ""}`, children: /* @__PURE__ */ jsx2(
-              ChartCommitInput,
-              {
-                value: value === null || value === void 0 ? "" : String(value),
-                inputMode: "decimal",
-                "aria-label": `${s.name}, ${category}`,
-                title: value === null ? void 0 : 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__ */ jsx2("td", { className: "border-b border-border px-1", children: /* @__PURE__ */ jsx2("button", { type: "button", className: chartIconButtonClass, title: "Delete category", "aria-label": `Delete ${category}`, "data-action": "remove-category", onClick: () => controller.removeCategory(i), children: "\xD7" }) })
-        ] }, i);
-      }) })
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-chart-editor": "", children: [
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", "data-chart-toolbar": "", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: chartButtonClass, disabled: !state.canUndo, title: state.undoLabel ? `Undo ${state.undoLabel}` : "Undo", "data-action": "undo", onClick: () => controller.undo(), children: "Undo" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: chartButtonClass, disabled: !state.canRedo, title: state.redoLabel ? `Redo ${state.redoLabel}` : "Redo", "data-action": "redo", onClick: () => controller.redo(), children: "Redo" }),
+      /* @__PURE__ */ jsx("span", { className: "ml-2 truncate text-xs text-muted-foreground", "data-chart-selection": "", "aria-live": "polite", children: describeChartSelection(controller, state.selection) })
     ] }),
-    !readOnly && /* @__PURE__ */ jsx2("div", { className: "p-1", children: /* @__PURE__ */ jsx2("button", { type: "button", className: `${chartButtonClass} h-6 border-dashed`, "data-action": "add-category", onClick: () => controller.addCategory(), children: "+ Add category" }) })
+    state.issues.length > 0 && /* @__PURE__ */ jsx("p", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive", "data-chart-issues": "", children: state.issues.map((i) => i.message).join(" ") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-md border border-border bg-background p-1", children: /* @__PURE__ */ jsx(ChartCanvas, { controller, height, ...canvasProps }) }),
+      showInspector && /* @__PURE__ */ jsx(ChartInspector, { controller, className: "w-full shrink-0 overflow-y-auto rounded-md border border-border p-3 md:w-64" })
+    ] }),
+    showDataGrid && /* @__PURE__ */ jsx(ChartDataGrid, { controller })
   ] });
 }
 
-// src/chart/ChartInspector.tsx
-import { useId } from "react";
+// src/chart/ChartStreamingView.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
-  CHART_CURVES,
-  CHART_LEGEND_POSITIONS,
-  CHART_NUMBER_STYLES,
-  CHART_SERIES_TYPES,
-  CHART_STACKINGS,
-  CHART_TYPE_LABELS,
-  CHART_TYPES,
-  chartColorInputValue as chartColorInputValue2,
-  chartSeriesColor as chartSeriesColor2,
-  chartSeriesType,
-  isCartesianChart
+  CSS_VARIABLE_CHART_THEME,
+  ChartStream,
+  blendChartScenes,
+  easeChartTween,
+  layoutChart,
+  layoutSparkline
 } from "@pixerate/editor/chart";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
-function Field({ label, htmlFor, children }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx3("label", { htmlFor, className: `${chartLabelClass} w-20 shrink-0`, children: label }),
-    /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children })
-  ] });
-}
-function Toggle({ label, checked, onChange, name }) {
-  return /* @__PURE__ */ jsxs2("label", { className: "flex cursor-pointer items-center gap-2 text-xs text-foreground", children: [
-    /* @__PURE__ */ jsx3("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__ */ jsx3("select", { id, className: chartInputClass, value, "data-option": name, onChange: (e) => onChange(e.currentTarget.value), children: options.map((o) => /* @__PURE__ */ jsx3("option", { value: o, children: labels?.[o] ?? cap(o) }, o)) });
-}
-function AxisSection({ controller, axis, value, idBase, horizontal }) {
-  const set = (patch) => controller.setAxis(axis, patch);
-  const setFormat = (patch) => set({ format: { ...value.format, ...patch } });
-  const bound = (key) => /* @__PURE__ */ jsx3(
-    ChartCommitInput,
-    {
-      id: `${idBase}-${axis}-${key}`,
-      value: value[key] === null ? "" : String(value[key]),
-      placeholder: "Auto",
-      inputMode: "decimal",
-      "data-option": `${axis}Axis.${key}`,
-      className: chartInputClass,
-      onCommit: (text) => set({ [key]: text.trim() === "" ? null : Number(text) }).ok
-    }
-  );
-  const name = axis === "x" ? "Category axis" : "Value axis";
-  return /* @__PURE__ */ jsxs2("div", { className: chartSectionClass, "data-section": `axis-${axis}`, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs2("h4", { className: "text-xs font-semibold text-foreground", children: [
-        name,
-        /* @__PURE__ */ jsxs2("span", { className: "ml-1 font-normal text-muted-foreground", children: [
-          "(",
-          axis === "x" ? horizontal ? "left" : "bottom" : horizontal ? "bottom" : "left",
-          ")"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx3(Toggle, { label: "Show", name: `${axis}Axis.show`, checked: value.show, onChange: (show) => set({ show }) })
-    ] }),
-    /* @__PURE__ */ jsx3(Field, { label: "Title", htmlFor: `${idBase}-${axis}-title`, children: /* @__PURE__ */ jsx3(ChartCommitInput, { id: `${idBase}-${axis}-title`, value: value.title, "data-option": `${axis}Axis.title`, className: chartInputClass, onCommit: (title) => void set({ title }) }) }),
-    /* @__PURE__ */ jsx3(Toggle, { label: "Grid lines", name: `${axis}Axis.gridlines`, checked: value.gridlines, onChange: (gridlines) => set({ gridlines }) }),
-    axis === "y" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(Field, { label: "Min / max", children: /* @__PURE__ */ jsxs2("div", { className: "flex gap-1", children: [
-        bound("min"),
-        bound("max")
-      ] }) }),
-      /* @__PURE__ */ jsx3(Field, { label: "Format", htmlFor: `${idBase}-y-format`, children: /* @__PURE__ */ jsxs2("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx3(Select, { id: `${idBase}-y-format`, name: "yAxis.format.style", value: value.format.style ?? "number", options: CHART_NUMBER_STYLES, onChange: (style) => setFormat({ style }) }),
-        /* @__PURE__ */ jsx3(
-          ChartCommitInput,
-          {
-            value: value.format.decimals === void 0 ? "" : String(value.format.decimals),
-            placeholder: "Auto",
-            "aria-label": "Decimals",
-            title: "Decimals",
-            inputMode: "numeric",
-            "data-option": "yAxis.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__ */ jsx3(Field, { label: "Currency", htmlFor: `${idBase}-y-currency`, children: /* @__PURE__ */ jsx3(ChartCommitInput, { id: `${idBase}-y-currency`, value: value.format.currency ?? "USD", "data-option": "yAxis.format.currency", className: chartInputClass, onCommit: (currency) => void setFormat({ currency: currency.toUpperCase() }) }) })
-    ] })
-  ] });
-}
-function ChartInspector({ controller, sections, className }) {
-  const { spec, selectedSeries } = useChartState(controller);
-  const idBase = useId();
-  const show = (section) => !sections || sections.includes(section);
-  const cartesian = isCartesianChart(spec.type);
-  const types = spec.series.map((s) => chartSeriesType(spec, 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__ */ jsxs2("div", { className: `space-y-3 text-xs ${className ?? ""}`, "data-chart-inspector": "", children: [
-    show("type") && /* @__PURE__ */ jsx3("div", { className: chartSectionClass, "data-section": "type", children: /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5", role: "radiogroup", "aria-label": "Chart type", children: CHART_TYPES.map((type) => /* @__PURE__ */ jsx3("button", { type: "button", role: "radio", "aria-checked": spec.type === type, "data-chart-type": type, className: chartSegmentClass(spec.type === type), onClick: () => controller.setType(type), children: CHART_TYPE_LABELS[type] }, type)) }) }),
-    show("titles") && /* @__PURE__ */ jsxs2("div", { className: chartSectionClass, "data-section": "titles", children: [
-      /* @__PURE__ */ jsx3(Field, { label: "Title", htmlFor: `${idBase}-title`, children: /* @__PURE__ */ jsx3(ChartCommitInput, { id: `${idBase}-title`, value: spec.title, "data-option": "title", className: chartInputClass, onCommit: (title) => void controller.setTitle(title) }) }),
-      /* @__PURE__ */ jsx3(Field, { label: "Subtitle", htmlFor: `${idBase}-subtitle`, children: /* @__PURE__ */ jsx3(ChartCommitInput, { id: `${idBase}-subtitle`, value: spec.subtitle, "data-option": "subtitle", className: chartInputClass, onCommit: (subtitle) => void controller.setSubtitle(subtitle) }) })
-    ] }),
-    show("options") && /* @__PURE__ */ jsxs2("div", { className: chartSectionClass, "data-section": "options", children: [
-      cartesian && /* @__PURE__ */ jsx3(Field, { label: "Stacking", htmlFor: `${idBase}-stacking`, children: /* @__PURE__ */ jsx3(Select, { id: `${idBase}-stacking`, name: "stacking", value: spec.stacking, options: CHART_STACKINGS, labels: { none: "None", stacked: "Stacked", percent: "100%" }, onChange: (stacking) => controller.update({ stacking }) }) }),
-      hasBars && /* @__PURE__ */ jsx3(Field, { label: "Bars", children: /* @__PURE__ */ jsx3("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: ["vertical", "horizontal"].map((o) => /* @__PURE__ */ jsx3("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__ */ jsx3(Field, { label: "Lines", htmlFor: `${idBase}-curve`, children: /* @__PURE__ */ jsx3(Select, { id: `${idBase}-curve`, name: "curve", value: spec.curve, options: CHART_CURVES, onChange: (curve) => controller.update({ curve }) }) }),
-      spec.type === "donut" && /* @__PURE__ */ jsx3(Field, { label: "Hole", htmlFor: `${idBase}-hole`, children: /* @__PURE__ */ jsx3(
-        "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) })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
-        hasLines && /* @__PURE__ */ jsx3(Toggle, { label: "Points", name: "points", checked: spec.points, onChange: (points) => controller.update({ points }) }),
-        /* @__PURE__ */ jsx3(Toggle, { label: "Data labels", name: "dataLabels", checked: spec.dataLabels, onChange: (dataLabels) => controller.update({ dataLabels }) })
-      ] })
-    ] }),
-    show("legend") && /* @__PURE__ */ jsxs2("div", { className: chartSectionClass, "data-section": "legend", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx3("h4", { className: "text-xs font-semibold text-foreground", children: "Legend" }),
-        /* @__PURE__ */ jsx3(Toggle, { label: "Show", name: "legend.show", checked: spec.legend.show, onChange: (v) => controller.setLegend({ show: v }) })
-      ] }),
-      spec.legend.show && /* @__PURE__ */ jsx3("div", { className: "flex gap-0.5 rounded-md bg-muted p-0.5", children: CHART_LEGEND_POSITIONS.map((p) => /* @__PURE__ */ jsx3("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") && cartesian && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal" }),
-      /* @__PURE__ */ jsx3(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal" })
-    ] }),
-    show("series") && selectedSeries && /* @__PURE__ */ jsxs2("div", { className: chartSectionClass, "data-section": "series", "data-series-id": selectedSeries.id, children: [
-      /* @__PURE__ */ jsx3("h4", { className: "text-xs font-semibold text-foreground", children: "Series" }),
-      /* @__PURE__ */ jsx3(Field, { label: "Name", htmlFor: `${idBase}-series-name`, children: /* @__PURE__ */ jsx3(ChartCommitInput, { id: `${idBase}-series-name`, value: selectedSeries.name, "data-option": "series.name", className: chartInputClass, onCommit: (name) => void controller.updateSeries(selectedSeries.id, { name }) }) }),
-      /* @__PURE__ */ jsx3(Field, { label: "Colour", htmlFor: `${idBase}-series-color`, children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx3(
-          "input",
-          {
-            id: `${idBase}-series-color`,
-            type: "color",
-            value: chartColorInputValue2(chartSeriesColor2(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__ */ jsx3("button", { type: "button", className: chartButtonClass, "data-action": "reset-color", onClick: () => controller.updateSeries(selectedSeries.id, { color: null }), children: "Palette" })
-      ] }) }),
-      cartesian && /* @__PURE__ */ jsx3(Field, { label: "Draw as", htmlFor: `${idBase}-series-type`, children: /* @__PURE__ */ jsxs2(
-        "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__ */ jsx3("option", { value: "", children: "Chart type" }),
-            CHART_SERIES_TYPES.map((t) => /* @__PURE__ */ jsx3("option", { value: t, children: CHART_TYPE_LABELS[t] }, t))
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-1", children: [
-        /* @__PURE__ */ jsx3(Toggle, { label: "Hidden", name: "series.hidden", checked: !!selectedSeries.hidden, onChange: (hidden) => controller.updateSeries(selectedSeries.id, { hidden }) }),
-        /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
-        /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("button", { type: "button", className: `${chartButtonClass} text-destructive`, "data-action": "series-delete", onClick: () => controller.removeSeries(selectedSeries.id), children: "Delete" })
-      ] })
-    ] })
-  ] });
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ChartStreamingView({ source, complete = false, format = "auto", width = 640, height = 360, theme, adoptInterval = 300, tween = 450, placeholder, onIssues, className }) {
+  const stream = useMemo(() => new ChartStream(format), [format]);
+  const fullTheme = useMemo(() => ({ ...CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
+  const [scene, setScene] = useState(null);
+  const shown = useRef(null);
+  const lastAdopt = useRef(0);
+  const frame = useRef(null);
+  const pending = useRef(null);
+  useEffect(() => {
+    const adopt = () => {
+      const read = stream.update(source, complete);
+      if (complete && onIssues) onIssues(read.issues);
+      if (!read.spec) return;
+      const next = layoutChart(read.spec, { width, height, theme: fullTheme, valueDomain: read.valueDomain });
+      const from = shown.current;
+      lastAdopt.current = Date.now();
+      if (frame.current !== null) cancelAnimationFrame(frame.current);
+      if (!from || tween <= 0 || typeof requestAnimationFrame === "undefined") {
+        shown.current = next;
+        setScene(next);
+        return;
+      }
+      const start = performance.now();
+      const step = () => {
+        const t = easeChartTween((performance.now() - start) / tween);
+        const s = blendChartScenes(from, next, t);
+        shown.current = s;
+        setScene(s);
+        frame.current = t < 1 ? requestAnimationFrame(step) : null;
+      };
+      frame.current = requestAnimationFrame(step);
+    };
+    if (pending.current) clearTimeout(pending.current);
+    const wait = complete ? 0 : Math.max(0, adoptInterval - (Date.now() - lastAdopt.current));
+    if (wait === 0) adopt();
+    else pending.current = setTimeout(adopt, wait);
+    return () => {
+      if (pending.current) clearTimeout(pending.current);
+    };
+  }, [source, complete, stream, width, height, fullTheme, adoptInterval, tween, onIssues]);
+  useEffect(() => () => {
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+  }, []);
+  return /* @__PURE__ */ jsx2("div", { className, "data-chart-streaming": complete ? "complete" : "streaming", "aria-busy": !complete, children: scene ? /* @__PURE__ */ jsx2(ChartSceneSvg, { scene, label: complete ? void 0 : "Chart loading" }) : placeholder ?? /* @__PURE__ */ jsx2("div", { style: { height }, className: "flex items-center justify-center text-xs text-muted-foreground", children: "Drawing chart\u2026" }) });
 }
-
-// src/chart/ChartEditor.tsx
-import { describeChartSelection as describeChartSelection2 } from "@pixerate/editor/chart";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function ChartEditor({ controller, showInspector = true, showDataGrid = true, showToolbar = true, height = 380, canvasProps, className }) {
-  const state = useChartState(controller);
-  return /* @__PURE__ */ jsxs3("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-chart-editor": "", children: [
-    showToolbar && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", "data-chart-toolbar": "", children: [
-      /* @__PURE__ */ jsx4("button", { type: "button", className: chartButtonClass, disabled: !state.canUndo, title: state.undoLabel ? `Undo ${state.undoLabel}` : "Undo", "data-action": "undo", onClick: () => controller.undo(), children: "Undo" }),
-      /* @__PURE__ */ jsx4("button", { type: "button", className: chartButtonClass, disabled: !state.canRedo, title: state.redoLabel ? `Redo ${state.redoLabel}` : "Redo", "data-action": "redo", onClick: () => controller.redo(), children: "Redo" }),
-      /* @__PURE__ */ jsx4("span", { className: "ml-2 truncate text-xs text-muted-foreground", "data-chart-selection": "", "aria-live": "polite", children: describeChartSelection2(controller, state.selection) })
-    ] }),
-    state.issues.length > 0 && /* @__PURE__ */ jsx4("p", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive", "data-chart-issues": "", children: state.issues.map((i) => i.message).join(" ") }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ jsx4("div", { className: "min-w-0 flex-1 rounded-md border border-border bg-background p-1", children: /* @__PURE__ */ jsx4(ChartCanvas, { controller, height, ...canvasProps }) }),
-      showInspector && /* @__PURE__ */ jsx4(ChartInspector, { controller, className: "w-full shrink-0 overflow-y-auto rounded-md border border-border p-3 md:w-64" })
-    ] }),
-    showDataGrid && /* @__PURE__ */ jsx4(ChartDataGrid, { controller })
-  ] });
+function ChartSparkline({ values, width = 80, height = 20, label, className, ...options }) {
+  const scene = useMemo(() => layoutSparkline(values, { ...options, width, height }), [values, width, height, options.kind, options.color, options.negativeColor, options.markers, options.highLow, options.min, options.max]);
+  const present = values.filter((v) => v !== null);
+  return /* @__PURE__ */ jsx2(ChartSceneSvg, { scene, label: label ?? (present.length ? `Trend from ${present[0]} to ${present[present.length - 1]}` : "No data"), className: `inline-block align-middle ${className ?? ""}` });
 }
 export {
   ChartCanvas,
@@ -534,6 +108,10 @@ export {
   ChartDataGrid,
   ChartEditor,
   ChartInspector,
+  ChartPresenceLayer,
+  ChartSceneSvg,
+  ChartSparkline,
+  ChartStreamingView,
   chartButtonClass,
   chartCellClass,
   chartIconButtonClass,
@@ -541,9 +119,12 @@ export {
   chartLabelClass,
   chartSectionClass,
   chartSegmentClass,
+  renderChartMark,
   useChartCommands,
   useChartController,
+  useChartDirector,
   useChartEditor,
-  useChartState
+  useChartState,
+  useChartToolProvider
 };
 //# sourceMappingURL=index.js.map