@pixerate/editor-react 0.35.0 → 0.36.0

package/dist/chart/index.cjs

@@ -25,6 +25,10 @@ __export(chart_exports, {
   ChartDataGrid: () => ChartDataGrid,
   ChartEditor: () => ChartEditor,
   ChartInspector: () => ChartInspector,
+  ChartPresenceLayer: () => ChartPresenceLayer,
+  ChartSceneSvg: () => ChartSceneSvg,
+  ChartSparkline: () => ChartSparkline,
+  ChartStreamingView: () => ChartStreamingView,
   chartButtonClass: () => chartButtonClass,
   chartCellClass: () => chartCellClass,
   chartIconButtonClass: () => chartIconButtonClass,
@@ -32,10 +36,13 @@ __export(chart_exports, {
   chartLabelClass: () => chartLabelClass,
   chartSectionClass: () => chartSectionClass,
   chartSegmentClass: () => chartSegmentClass,
+  renderChartMark: () => renderChartMark,
   useChartCommands: () => useChartCommands,
   useChartController: () => useChartController,
+  useChartDirector: () => useChartDirector,
   useChartEditor: () => useChartEditor,
-  useChartState: () => useChartState
+  useChartState: () => useChartState,
+  useChartToolProvider: () => useChartToolProvider
 });
 module.exports = __toCommonJS(chart_exports);
 
@@ -79,6 +86,26 @@ function useChartCommands(registry, controller, options = {}) {
     return registry.register((0, import_chart.createChartCommands)(controller, { prefix, group, scope }));
   }, [registry, controller, prefix, group, scope]);
 }
+function useChartToolProvider(registry, controller, options = {}) {
+  const latest = (0, import_react.useRef)(options);
+  latest.current = options;
+  const { id, namespace } = options;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    return registry.register((0, import_chart.createChartToolProvider)(controller, { ...latest.current, id, namespace }));
+  }, [registry, controller, id, namespace]);
+}
+function useChartDirector(controller, options = {}) {
+  const sceneRef = (0, import_react.useRef)(null);
+  const ref = (0, import_react.useRef)(null);
+  if (!ref.current) {
+    const presence = new import_chart.ChartPresence();
+    const size = options.size ?? { width: 640, height: 400 };
+    const director = new import_chart.ChartDirector(controller, presence, { scene: () => sceneRef.current ?? (0, import_chart.layoutChart)(controller.getSpec(), size), speed: options.speed });
+    ref.current = { presence, director };
+  }
+  return { ...ref.current, sceneRef };
+}
 
 // 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";
@@ -93,13 +120,13 @@ var chartCellClass = "h-7 w-full min-w-[4.5rem] bg-transparent px-2 text-right t
 var import_react2 = require("react");
 var import_chart2 = require("@pixerate/editor/chart");
 var import_jsx_runtime = require("react/jsx-runtime");
-function renderMark(mark, fontFamily, interactive) {
+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.target && mark.role !== "background" ? "none" : void 0,
+    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) {
@@ -139,12 +166,26 @@ function renderMark(mark, fontFamily, interactive) {
       );
   }
 }
-function ChartCanvas({ controller, width = 640, height = 400, responsive = true, theme, editable = true, measureText, emptyMessage, className }) {
+function ChartPresenceLayer({ presence }) {
+  const { actors } = (0, import_react2.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { "data-chart-presence": "", pointerEvents: "none", children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${a.x} ${a.y})`, "data-actor": a.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("g", { transform: "translate(13 16)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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 ChartSceneSvg({ scene, label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: scene.width, height: scene.height, viewBox: `0 0 ${scene.width} ${scene.height}`, role: "img", "aria-label": label, className: `block max-w-full ${className ?? ""}`, children: scene.marks.map((m) => renderChartMark(m, scene.theme.fontFamily, false)) });
+}
+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_react2.useRef)(null);
   const svg = (0, import_react2.useRef)(null);
   const drag = (0, import_react2.useRef)(null);
   const [measured, setMeasured] = (0, import_react2.useState)(null);
+  const [frozen, setFrozen] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(() => {
     const el = wrapper.current;
     if (!responsive || !el || typeof ResizeObserver === "undefined") return;
@@ -158,9 +199,21 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
   const sceneWidth = responsive && measured || width;
   const fullTheme = (0, import_react2.useMemo)(() => ({ ...import_chart2.CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
   const scene = (0, import_react2.useMemo)(
-    () => (0, import_chart2.layoutChart)(state.spec, { width: sceneWidth, height, theme: fullTheme, selection: editable ? state.selection : null, measureText, emptyMessage }),
-    [state.spec, state.selection, sceneWidth, height, fullTheme, editable, measureText, emptyMessage]
+    () => (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_react2.useMemo)(() => new Map(scene.marks.map((m) => [m.key, m])), [scene]);
   (0, import_react2.useEffect)(() => () => drag.current?.end(), []);
   const scenePoint = (e) => (0, import_chart2.chartClientToScene)(scene, svg.current.getBoundingClientRect(), e.clientX, e.clientY);
@@ -170,20 +223,32 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
     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) svg.current?.setPointerCapture?.(e.pointerId);
+    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));
+    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_runtime.jsx)("div", { ref: wrapper, className: `w-full ${className ?? ""}`, "data-chart-canvas": "", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: wrapper, className: `w-full ${className ?? ""}`, "data-chart-canvas": "", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
       ref: svg,
@@ -199,7 +264,10 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
       onPointerUp: endDrag,
       onPointerCancel: endDrag,
       onKeyDown,
-      children: scene.marks.map((m) => renderMark(m, scene.theme.fontFamily, editable))
+      children: [
+        scene.marks.map((m) => renderChartMark(m, scene.theme.fontFamily, editable)),
+        presence && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartPresenceLayer, { presence })
+      ]
     }
   ) });
 }
@@ -366,43 +434,60 @@ function Toggle({ label, checked, onChange, name }) {
 function Select({ id, value, options, onChange, name, labels }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("select", { id, className: chartInputClass, value, "data-option": name, onChange: (e) => onChange(e.currentTarget.value), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o, children: labels?.[o] ?? cap(o) }, o)) });
 }
-function AxisSection({ controller, axis, value, idBase, horizontal }) {
+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 = (key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const bound = (key2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     ChartCommitInput,
     {
-      id: `${idBase}-${axis}-${key}`,
-      value: value[key] === null ? "" : String(value[key]),
+      id: `${idBase}-${axis}-${key2}`,
+      value: value[key2] === null ? "" : String(value[key2]),
       placeholder: "Auto",
       inputMode: "decimal",
-      "data-option": `${axis}Axis.${key}`,
+      "data-option": `${axis}Axis.${key2}`,
       className: chartInputClass,
-      onCommit: (text) => set({ [key]: text.trim() === "" ? null : Number(text) }).ok
+      onCommit: (text) => set({ [key2]: text.trim() === "" ? null : Number(text) }).ok
     }
   );
-  const name = axis === "x" ? "Category axis" : "Value axis";
+  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_runtime3.jsxs)("div", { className: chartSectionClass, "data-section": `axis-${axis}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("h4", { className: "text-xs font-semibold text-foreground", children: [
         name,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "ml-1 font-normal text-muted-foreground", children: [
           "(",
-          axis === "x" ? horizontal ? "left" : "bottom" : horizontal ? "bottom" : "left",
+          axis === "x" ? horizontal ? "left" : "bottom" : axis === "y2" ? horizontal ? "top" : "right" : horizontal ? "bottom" : "left",
           ")"
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Show", name: `${axis}Axis.show`, checked: value.show, onChange: (show) => set({ show }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Title", htmlFor: `${idBase}-${axis}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(Toggle, { label: "Grid lines", name: `${axis}Axis.gridlines`, checked: value.gridlines, onChange: (gridlines) => set({ gridlines }) }),
-    axis === "y" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Grid lines", name: `${key}.gridlines`, checked: value.gridlines, onChange: (gridlines) => set({ gridlines }) }),
+      axis === "x" && !numeric && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Dates", name: "xAxis.kind", checked: value.kind === "date", onChange: (dates) => set({ kind: dates ? "date" : void 0 }) })
+    ] }),
+    valueAxis && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Step", htmlFor: `${idBase}-${axis}-step`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Min / max", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-1", children: [
         bound("min"),
         bound("max")
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Format", htmlFor: `${idBase}-y-format`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Select, { id: `${idBase}-y-format`, name: "yAxis.format.style", value: value.format.style ?? "number", options: import_chart4.CHART_NUMBER_STYLES, onChange: (style) => setFormat({ style }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Format", htmlFor: `${idBase}-${axis}-format`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
           ChartCommitInput,
           {
@@ -411,7 +496,7 @@ function AxisSection({ controller, axis, value, idBase, horizontal }) {
             "aria-label": "Decimals",
             title: "Decimals",
             inputMode: "numeric",
-            "data-option": "yAxis.format.decimals",
+            "data-option": `${key}.format.decimals`,
             className: `${chartInputClass} w-14 shrink-0`,
             onCommit: (text) => {
               const format = { ...value.format };
@@ -422,7 +507,23 @@ function AxisSection({ controller, axis, value, idBase, horizontal }) {
           }
         )
       ] }) }),
-      value.format.style === "currency" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Currency", htmlFor: `${idBase}-y-currency`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartCommitInput, { id: `${idBase}-y-currency`, value: value.format.currency ?? "USD", "data-option": "yAxis.format.currency", className: chartInputClass, onCommit: (currency) => void setFormat({ currency: currency.toUpperCase() }) }) })
+      value.format.style === "currency" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Currency", htmlFor: `${idBase}-${axis}-currency`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(Field, { label: "Code", htmlFor: `${idBase}-${axis}-code`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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;
+          }
+        }
+      ) })
     ] })
   ] });
 }
@@ -431,12 +532,28 @@ function ChartInspector({ controller, sections, className }) {
   const idBase = (0, import_react4.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_runtime3.jsxs)("div", { className: `space-y-3 text-xs ${className ?? ""}`, "data-chart-inspector": "", children: [
     show("type") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: chartSectionClass, "data-section": "type", children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.jsxs)("div", { className: chartSectionClass, "data-section": "style", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Layout", htmlFor: `${idBase}-layout`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("option", { value: "", children: "Quick layout\u2026" }),
+        import_chart4.CHART_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: p.id, title: p.description, children: p.label }, p.id))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Colours", htmlFor: `${idBase}-colors`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("option", { value: "", children: "Custom" }),
+        import_chart4.CHART_COLOR_SCHEMES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: c.id, title: c.description, children: c.label }, c.id))
+      ] }) }),
+      !colorCheck.ok && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("button", { type: "button", className: chartButtonClass, "data-action": "transpose", onClick: () => controller.transpose(), children: "Switch rows and columns" })
+    ] }),
     show("titles") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: chartSectionClass, "data-section": "titles", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Title", htmlFor: `${idBase}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartCommitInput, { id: `${idBase}-title`, value: spec.title, "data-option": "title", className: chartInputClass, onCommit: (title) => void controller.setTitle(title) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Subtitle", htmlFor: `${idBase}-subtitle`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartCommitInput, { id: `${idBase}-subtitle`, value: spec.subtitle, "data-option": "subtitle", className: chartInputClass, onCommit: (subtitle) => void controller.setSubtitle(subtitle) }) })
@@ -461,7 +578,26 @@ function ChartInspector({ controller, sections, className }) {
           onChange: (e) => controller.update({ innerRadius: Number(e.currentTarget.value) })
         }
       ) }),
+      hasBars && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Spacing", htmlFor: `${idBase}-gap`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(Field, { label: "Labels", htmlFor: `${idBase}-label-position`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(Field, { label: "Bins", htmlFor: `${idBase}-bins`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [
+        spec.type === "waterfall" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Total bar", name: "showTotal", checked: spec.showTotal, onChange: (showTotal) => controller.update({ showTotal }) }),
         hasLines && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Points", name: "points", checked: spec.points, onChange: (points) => controller.update({ points }) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Data labels", name: "dataLabels", checked: spec.dataLabels, onChange: (dataLabels) => controller.update({ dataLabels }) })
       ] })
@@ -473,9 +609,10 @@ function ChartInspector({ controller, sections, className }) {
       ] }),
       spec.legend.show && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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") && cartesian && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal" })
+    show("axes") && hasAxes && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      family !== "box" && family !== "histogram" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "x", value: spec.xAxis, idBase, horizontal: spec.orientation === "horizontal", numeric: family === "xy" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "y", value: spec.yAxis, idBase, horizontal: spec.orientation === "horizontal" }),
+      usesSecondary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AxisSection, { controller, axis: "y2", value: spec.yAxis2, idBase, horizontal: spec.orientation === "horizontal" })
     ] }),
     show("series") && selectedSeries && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: chartSectionClass, "data-section": "series", "data-series-id": selectedSeries.id, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "text-xs font-semibold text-foreground", children: "Series" }),
@@ -510,8 +647,44 @@ function ChartInspector({ controller, sections, className }) {
           ]
         }
       ) }),
+      (cartesian || family === "xy") && ["line", "area", "scatter"].includes((0, import_chart4.chartSeriesType)(spec, selectedSeries)) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Field, { label: "Marker", htmlFor: `${idBase}-series-marker`, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("option", { value: "", children: "Default" }),
+            import_chart4.CHART_MARKERS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: m, children: cap(m) }, m))
+          ]
+        }
+      ) }),
+      (0, import_chart4.chartSupportsTrendlines)(spec.type, spec.stacking) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1", "data-section": "trendlines", children: [
+        (selectedSeries.trendlines ?? []).map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", "data-trendline": i, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1 truncate text-muted-foreground", children: (0, import_chart4.chartTrendlineName)(t, selectedSeries.name) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "R\xB2", name: `trendline.${i}.showR2`, checked: !!t.showR2, onChange: (showR2) => controller.updateTrendline(selectedSeries.id, i, { showR2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.jsx)("option", { value: "", children: "Add trendline\u2026" }),
+              import_chart4.CHART_TRENDLINE_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: t, children: cap(t.replace("-", " ")) }, t))
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toggle, { label: "Hidden", name: "series.hidden", checked: !!selectedSeries.hidden, onChange: (hidden) => controller.updateSeries(selectedSeries.id, { hidden }) }),
+        family === "cartesian" && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("span", { className: "flex-1" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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" }),
@@ -540,6 +713,61 @@ function ChartEditor({ controller, showInspector = true, showDataGrid = true, sh
     showDataGrid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartDataGrid, { controller })
   ] });
 }
+
+// src/chart/ChartStreamingView.tsx
+var import_react5 = require("react");
+var import_chart6 = require("@pixerate/editor/chart");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ChartStreamingView({ source, complete = false, format = "auto", width = 640, height = 360, theme, adoptInterval = 300, tween = 450, placeholder, onIssues, className }) {
+  const stream = (0, import_react5.useMemo)(() => new import_chart6.ChartStream(format), [format]);
+  const fullTheme = (0, import_react5.useMemo)(() => ({ ...import_chart6.CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
+  const [scene, setScene] = (0, import_react5.useState)(null);
+  const shown = (0, import_react5.useRef)(null);
+  const lastAdopt = (0, import_react5.useRef)(0);
+  const frame = (0, import_react5.useRef)(null);
+  const pending = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    const adopt = () => {
+      const read = stream.update(source, complete);
+      if (complete && onIssues) onIssues(read.issues);
+      if (!read.spec) return;
+      const next = (0, import_chart6.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 = (0, import_chart6.easeChartTween)((performance.now() - start) / tween);
+        const s = (0, import_chart6.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]);
+  (0, import_react5.useEffect)(() => () => {
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, "data-chart-streaming": complete ? "complete" : "streaming", "aria-busy": !complete, children: scene ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartSceneSvg, { scene, label: complete ? void 0 : "Chart loading" }) : placeholder ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height }, className: "flex items-center justify-center text-xs text-muted-foreground", children: "Drawing chart\u2026" }) });
+}
+function ChartSparkline({ values, width = 80, height = 20, label, className, ...options }) {
+  const scene = (0, import_react5.useMemo)(() => (0, import_chart6.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__ */ (0, import_jsx_runtime5.jsx)(ChartSceneSvg, { scene, label: label ?? (present.length ? `Trend from ${present[0]} to ${present[present.length - 1]}` : "No data"), className: `inline-block align-middle ${className ?? ""}` });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChartCanvas,
@@ -547,6 +775,10 @@ function ChartEditor({ controller, showInspector = true, showDataGrid = true, sh
   ChartDataGrid,
   ChartEditor,
   ChartInspector,
+  ChartPresenceLayer,
+  ChartSceneSvg,
+  ChartSparkline,
+  ChartStreamingView,
   chartButtonClass,
   chartCellClass,
   chartIconButtonClass,
@@ -554,9 +786,12 @@ function ChartEditor({ controller, showInspector = true, showDataGrid = true, sh
   chartLabelClass,
   chartSectionClass,
   chartSegmentClass,
+  renderChartMark,
   useChartCommands,
   useChartController,
+  useChartDirector,
   useChartEditor,
-  useChartState
+  useChartState,
+  useChartToolProvider
 });
 //# sourceMappingURL=index.cjs.map