@pixerate/editor-svelte 0.41.0 → 0.42.0

package/README.md

@@ -84,6 +84,7 @@ Tables are on by default in `createRichTextPreset` (`table: false` turns them of
 | `@pixerate/editor-svelte/persistence` | `createAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`; call `destroy()` when done) and `<RecoveryPrompt>` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments; `onchange` / `onaddreference`), `createGenerationPlan(() => request, () => caps)`, `JobProgress`, `createJobProgress` (call `destroy()` when done) over `@pixerate/editor/generation` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/vector` | `VectorEditor` (toolbar, canvas and style panel), `VectorCanvas` (SVG canvas forwarding pointer, wheel, keyboard and clipboard events), `VectorToolbar`, `VectorStylePanel`, `VectorSceneNodes`, `VectorGradientDefs`, `createVectorEditor` (call `destroy()` when done) and `useVectorCommands` over `@pixerate/editor/vector` (see [the vector editor guide](../../docs/vector-editor.md)) |
+| `@pixerate/editor-svelte/chart` | `ChartEditor` (toolbar, chart, inspector and data grid), `ChartCanvas` (SVG chart with selection, drag-to-edit and keyboard editing), `ChartDataGrid`, `ChartInspector`, `createChartEditor` (call `destroy()` when done) and `useChartCommands` over `@pixerate/editor/chart` (see [the chart editor guide](../../docs/chart-editor.md)) |
 | `@pixerate/editor-svelte/parameters` | `ParametersPanel` (a whole schema with groups, presets, undo / reset / randomize and keyframe diamonds), `createParameters` (call `destroy()` when done), `useParameterCommands`, and the field controls `ParameterFieldControl`, `ParameterSlider`, `ParameterToggle`, `ParameterSelect`, `ParameterColor`, `ParameterVector`, `ParameterImage`, `ParameterText`, `KeyframeDiamond` over `@pixerate/editor/parameters` (see [the parameters guide](../../docs/parameters.md)) |
 | `@pixerate/editor-svelte/canvas` | Runes for `@xyflow/svelte`: `createCanvasGraph`, `createCanvasClipboard`, `createCanvasDocking`, `createCanvasShortcuts`, `createCanvasInteractions`, `createCanvasExplosion`, `createCanvasNodeSync`, `createCanvasMultiDrag`, `createStreamingCanvas`, `AgentPresenceLayer`, `FloatingHorizontalScrollbar`, plus layout helpers |
 

package/dist/chart/ChartCanvas.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import {
+    CSS_VARIABLE_CHART_THEME,
+    chartClientToScene,
+    chartTextBaseline,
+    chartTextTransform,
+    describeChartSelection,
+    handleChartKey,
+    layoutChart,
+    startChartPointDrag,
+    type ChartController,
+    type ChartMark,
+    type ChartPointDrag,
+    type ChartTextMeasure,
+    type ChartTheme
+  } from '@pixerate/editor/chart';
+  import { chartStateOf } from './createChartEditor.svelte.js';
+
+  interface Props {
+    controller: ChartController;
+    /** Scene width; with `responsive` this is only the fallback before the container is measured (default 640). */
+    width?: number;
+    /** Scene height in pixels (default 400). */
+    height?: number;
+    /** Follow the container's width (default `true`). */
+    responsive?: boolean;
+    /** Colours and type (default: shadcn-style CSS variables). */
+    theme?: Partial<ChartTheme>;
+    /** Click to select, drag bars and points, keyboard editing (default `true`). */
+    editable?: boolean;
+    /** Text width for layout (default: an estimate). */
+    measureText?: ChartTextMeasure;
+    emptyMessage?: string;
+    class?: string;
+  }
+
+  let {
+    controller,
+    width = 640,
+    height = 400,
+    responsive = true,
+    theme,
+    editable = true,
+    measureText,
+    emptyMessage,
+    class: className = ''
+  }: Props = $props();
+
+  const view = chartStateOf(() => controller);
+  let measured = $state(0);
+  let wrapper: HTMLDivElement | undefined = $state();
+  let svg: SVGSVGElement | undefined = $state();
+
+  // Guarded (not `bind:clientWidth`) so it also runs where ResizeObserver is missing (jsdom).
+  $effect(() => {
+    const el = wrapper;
+    if (!responsive || !el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(([entry]) => {
+      const w = Math.round(entry.contentRect.width);
+      if (w > 0) measured = w;
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
+  let drag: ChartPointDrag | null = null;
+
+  const sceneWidth = $derived((responsive && measured) || width);
+  const fullTheme = $derived({ ...CSS_VARIABLE_CHART_THEME, ...theme });
+  const scene = $derived(
+    layoutChart(view.current.spec, {
+      width: sceneWidth,
+      height,
+      theme: fullTheme,
+      selection: editable ? view.current.selection : null,
+      measureText,
+      emptyMessage
+    })
+  );
+  const byKey = $derived(new Map(scene.marks.map((m) => [m.key, m])));
+  const label = $derived(view.current.spec.title || 'Chart');
+
+  onDestroy(() => drag?.end());
+
+  const pointerEvents = (mark: ChartMark) => (mark.role === 'selection' || (!mark.target && mark.role !== 'background') ? 'none' : undefined);
+  const cursor = (mark: ChartMark) => (editable && mark.target && mark.role !== 'background' ? 'pointer' : undefined);
+  const scenePoint = (e: PointerEvent) => chartClientToScene(scene, svg!.getBoundingClientRect(), e.clientX, e.clientY);
+
+  function pointerdown(e: PointerEvent) {
+    if (!editable || e.button !== 0) return;
+    const key = (e.target as Element).closest?.('[data-chart-key]')?.getAttribute('data-chart-key');
+    const target = key ? byKey.get(key)?.target : undefined;
+    controller.select(target ?? null);
+    drag = startChartPointDrag(controller, scene, target, scenePoint(e));
+    if (drag) svg?.setPointerCapture?.(e.pointerId);
+  }
+  function pointermove(e: PointerEvent) {
+    drag?.move(scenePoint(e));
+  }
+  function endDrag() {
+    drag?.end();
+    drag = null;
+  }
+  function keydown(e: KeyboardEvent) {
+    if (editable && handleChartKey(controller, scene, e)) e.preventDefault();
+  }
+</script>
+
+<div bind:this={wrapper} class="w-full {className}" data-chart-canvas="">
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+  <svg
+    bind:this={svg}
+    width={sceneWidth}
+    {height}
+    viewBox="0 0 {scene.width} {scene.height}"
+    role="img"
+    aria-label={editable ? `${label}. ${describeChartSelection(controller, view.current.selection)}` : label}
+    tabindex={editable ? 0 : undefined}
+    class="block max-w-full touch-none select-none rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+    onpointerdown={pointerdown}
+    onpointermove={pointermove}
+    onpointerup={endDrag}
+    onpointercancel={endDrag}
+    onkeydown={keydown}
+  >
+    {#each scene.marks as mark (mark.key)}
+      {#if mark.kind === 'rect'}
+        <rect
+          data-role={mark.role}
+          data-chart-key={mark.target ? mark.key : undefined}
+          data-selected={mark.selected ? '' : undefined}
+          x={mark.x}
+          y={mark.y}
+          width={mark.width}
+          height={mark.height}
+          rx={mark.radius}
+          opacity={mark.opacity}
+          pointer-events={pointerEvents(mark)}
+          cursor={cursor(mark)}
+          style:fill={mark.fill}
+          style:stroke={mark.stroke}
+          style:stroke-width={mark.strokeWidth}
+        />
+      {:else if mark.kind === 'path'}
+        <path
+          data-role={mark.role}
+          data-chart-key={mark.target ? mark.key : undefined}
+          data-selected={mark.selected ? '' : undefined}
+          d={mark.d}
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          stroke-dasharray={mark.dash}
+          opacity={mark.opacity}
+          pointer-events={pointerEvents(mark)}
+          cursor={cursor(mark)}
+          style:fill={mark.fill ?? 'none'}
+          style:stroke={mark.stroke}
+          style:stroke-width={mark.strokeWidth}
+        />
+      {:else if mark.kind === 'circle'}
+        <circle
+          data-role={mark.role}
+          data-chart-key={mark.target ? mark.key : undefined}
+          data-selected={mark.selected ? '' : undefined}
+          cx={mark.cx}
+          cy={mark.cy}
+          r={mark.r}
+          opacity={mark.opacity}
+          pointer-events={pointerEvents(mark)}
+          cursor={cursor(mark)}
+          style:fill={mark.fill}
+          style:stroke={mark.stroke}
+          style:stroke-width={mark.strokeWidth}
+        />
+      {:else if mark.kind === 'line'}
+        <line
+          data-role={mark.role}
+          data-chart-key={mark.target ? mark.key : undefined}
+          data-selected={mark.selected ? '' : undefined}
+          x1={mark.x1}
+          y1={mark.y1}
+          x2={mark.x2}
+          y2={mark.y2}
+          stroke-dasharray={mark.dash}
+          opacity={mark.opacity}
+          pointer-events={pointerEvents(mark)}
+          cursor={cursor(mark)}
+          style:stroke={mark.stroke}
+          style:stroke-width={mark.strokeWidth}
+        />
+      {:else}
+        <text
+          data-role={mark.role}
+          data-chart-key={mark.target ? mark.key : undefined}
+          data-selected={mark.selected ? '' : undefined}
+          x={mark.x}
+          y={mark.y}
+          text-anchor={mark.anchor}
+          dominant-baseline={chartTextBaseline(mark.baseline)}
+          transform={chartTextTransform(mark)}
+          opacity={mark.opacity}
+          pointer-events={pointerEvents(mark)}
+          cursor={cursor(mark)}
+          style:fill={mark.fill}
+          style:font-size="{mark.size}px"
+          style:font-weight={mark.weight}
+          style:font-family={scene.theme.fontFamily}
+          style:user-select="none">{mark.text}</text
+        >
+      {/if}
+    {/each}
+  </svg>
+</div>

package/dist/chart/ChartCanvas.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type ChartController, type ChartTextMeasure, type ChartTheme } from '@pixerate/editor/chart';
+interface Props {
+    controller: ChartController;
+    /** Scene width; with `responsive` this is only the fallback before the container is measured (default 640). */
+    width?: number;
+    /** Scene height in pixels (default 400). */
+    height?: number;
+    /** Follow the container's width (default `true`). */
+    responsive?: boolean;
+    /** Colours and type (default: shadcn-style CSS variables). */
+    theme?: Partial<ChartTheme>;
+    /** Click to select, drag bars and points, keyboard editing (default `true`). */
+    editable?: boolean;
+    /** Text width for layout (default: an estimate). */
+    measureText?: ChartTextMeasure;
+    emptyMessage?: string;
+    class?: string;
+}
+declare const ChartCanvas: import("svelte").Component<Props, {}, "">;
+type ChartCanvas = ReturnType<typeof ChartCanvas>;
+export default ChartCanvas;
+//# sourceMappingURL=ChartCanvas.svelte.d.ts.map

package/dist/chart/ChartCanvas.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartCanvas.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EASH,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAIhC,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmGH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/chart/ChartCommitInput.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { chartInputClass } from './styles.js';
+
+  interface Props extends Omit<HTMLInputAttributes, 'value' | 'class'> {
+    value: string;
+    /** Called with the typed text. Return `false` to show the stored value again (a refused edit). */
+    oncommit: (value: string) => boolean | void;
+    class?: string;
+  }
+
+  let { value, oncommit, class: className = chartInputClass, onkeydown, onblur, ...rest }: Props = $props();
+
+  // Follows `value` unless the user is typing.
+  let draft = $state('');
+  let typing = false;
+  $effect.pre(() => {
+    const next = value;
+    if (!typing) draft = next;
+  });
+
+  function commit() {
+    if (!typing) return;
+    typing = false;
+    if (draft === value) return;
+    if (oncommit(draft) === false) draft = value;
+  }
+
+  function keydown(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    (onkeydown as ((e: KeyboardEvent) => void) | undefined)?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commit();
+    } else if (e.key === 'Escape') {
+      typing = false;
+      draft = value;
+    }
+  }
+</script>
+
+<input
+  type="text"
+  {...rest}
+  class={className}
+  value={draft}
+  oninput={(e) => {
+    typing = true;
+    draft = e.currentTarget.value;
+  }}
+  onblur={(e) => {
+    (onblur as ((e: FocusEvent) => void) | undefined)?.(e);
+    commit();
+  }}
+  onkeydown={keydown}
+/>

package/dist/chart/ChartCommitInput.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'value' | 'class'> {
+    value: string;
+    /** Called with the typed text. Return `false` to show the stored value again (a refused edit). */
+    oncommit: (value: string) => boolean | void;
+    class?: string;
+}
+declare const ChartCommitInput: import("svelte").Component<Props, {}, "">;
+type ChartCommitInput = ReturnType<typeof ChartCommitInput>;
+export default ChartCommitInput;
+//# sourceMappingURL=ChartCommitInput.svelte.d.ts.map

package/dist/chart/ChartCommitInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCommitInput.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartCommitInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/chart/ChartDataGrid.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import { chartColorInputValue, chartSeriesColor, formatChartNumber, type ChartController } from '@pixerate/editor/chart';
+  import ChartCommitInput from './ChartCommitInput.svelte';
+  import { chartStateOf } from './createChartEditor.svelte.js';
+  import { chartButtonClass, chartCellClass, chartIconButtonClass, chartInputClass } from './styles.js';
+
+  interface Props {
+    controller: ChartController;
+    /** Header of the category column (default "Category"). */
+    categoryHeader?: string;
+    /** Hide the add / delete buttons. */
+    readOnly?: boolean;
+    class?: string;
+  }
+
+  let { controller, categoryHeader = 'Category', readOnly = false, class: className = '' }: Props = $props();
+
+  const view = chartStateOf(() => controller);
+  const spec = $derived(view.current.spec);
+  const selection = $derived(view.current.selection);
+
+  const cellText = (value: number | null | undefined) => (value === null || value === undefined ? '' : String(value));
+
+  // Pasting TSV / CSV fills and grows the grid from the cell.
+  const paste = (row: number, column: number) => (e: ClipboardEvent) => {
+    const text = e.clipboardData?.getData('text/plain') ?? '';
+    if (!/[\t\n]/.test(text.replace(/\n$/, ''))) return;
+    e.preventDefault();
+    controller.pasteCells(row, column, text);
+  };
+</script>
+
+<div class="overflow-auto rounded-md border border-border {className}" data-chart-grid="">
+  <table class="w-full border-collapse text-xs">
+    <thead class="bg-muted/50">
+      <tr>
+        <th class="border-b border-r border-border px-2 py-1 text-left font-medium text-muted-foreground">{categoryHeader}</th>
+        {#each spec.series as s, si (s.id)}
+          {@const selected = selection?.kind === 'series' && selection.seriesId === s.id}
+          <th data-series-id={s.id} class="border-b border-r border-border px-1 py-1 font-medium {selected ? 'bg-primary/10' : ''}">
+            <div class="flex items-center gap-1">
+              <input
+                type="color"
+                aria-label="{s.name} colour"
+                value={chartColorInputValue(chartSeriesColor(spec, si))}
+                disabled={readOnly}
+                onpointerdown={() => controller.beginGesture(`color:${s.id}`)}
+                oninput={(e) => controller.updateSeries(s.id, { color: e.currentTarget.value })}
+                onblur={() => controller.endGesture()}
+                class="h-5 w-5 shrink-0 cursor-pointer rounded border-0 bg-transparent p-0"
+              />
+              <ChartCommitInput
+                value={s.name}
+                aria-label="Series name"
+                onfocus={() => controller.select({ kind: 'series', seriesId: s.id })}
+                oncommit={(name) => void controller.updateSeries(s.id, { name })}
+                class="{chartInputClass} h-6 min-w-[5rem] border-transparent bg-transparent font-medium {s.hidden ? 'text-muted-foreground line-through' : ''}"
+              />
+              {#if !readOnly}
+                <button
+                  type="button"
+                  class={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)}>{s.hidden ? '○' : '●'}</button
+                >
+                <button type="button" class={chartIconButtonClass} title="Delete series" aria-label="Delete {s.name}" data-action="remove-series" onclick={() => controller.removeSeries(s.id)}>×</button>
+              {/if}
+            </div>
+          </th>
+        {/each}
+        {#if !readOnly}
+          <th class="w-8 border-b border-border px-1">
+            <button type="button" class={chartIconButtonClass} title="Add series" aria-label="Add series" data-action="add-series" onclick={() => controller.addSeries()}>+</button>
+          </th>
+        {/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#each spec.categories as category, i (i)}
+        {@const rowSelected = selection?.kind === 'category' && selection.index === i}
+        <tr data-category-index={i} class={rowSelected ? 'bg-primary/10' : undefined}>
+          <th class="border-b border-r border-border p-0 text-left font-normal">
+            <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)}
+              class="{chartCellClass} text-left"
+            />
+          </th>
+          {#each spec.series as s, si (s.id)}
+            {@const value = s.values[i]}
+            {@const selected = selection?.kind === 'point' && selection.seriesId === s.id && selection.index === i}
+            <td class="border-b border-r border-border p-0 {selected ? 'bg-primary/10' : ''}">
+              <ChartCommitInput
+                value={cellText(value)}
+                inputmode="decimal"
+                aria-label="{s.name}, {category}"
+                title={value === null ? undefined : formatChartNumber(value, spec.yAxis.format)}
+                data-cell="{s.id}:{i}"
+                onfocus={() => controller.select({ kind: 'point', seriesId: s.id, index: i })}
+                onpaste={paste(i, si)}
+                oncommit={(text) => controller.setValue(s.id, i, text).ok}
+                class={chartCellClass}
+              />
+            </td>
+          {/each}
+          {#if !readOnly}
+            <td class="border-b border-border px-1">
+              <button type="button" class={chartIconButtonClass} title="Delete category" aria-label="Delete {category}" data-action="remove-category" onclick={() => controller.removeCategory(i)}>×</button>
+            </td>
+          {/if}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  {#if !readOnly}
+    <div class="p-1">
+      <button type="button" class="{chartButtonClass} h-6 border-dashed" data-action="add-category" onclick={() => controller.addCategory()}>+ Add category</button>
+    </div>
+  {/if}
+</div>

package/dist/chart/ChartDataGrid.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type ChartController } from '@pixerate/editor/chart';
+interface Props {
+    controller: ChartController;
+    /** Header of the category column (default "Category"). */
+    categoryHeader?: string;
+    /** Hide the add / delete buttons. */
+    readOnly?: boolean;
+    class?: string;
+}
+declare const ChartDataGrid: import("svelte").Component<Props, {}, "">;
+type ChartDataGrid = ReturnType<typeof ChartDataGrid>;
+export default ChartDataGrid;
+//# sourceMappingURL=ChartDataGrid.svelte.d.ts.map

package/dist/chart/ChartDataGrid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDataGrid.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartDataGrid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA6D,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAMvH,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkFH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/chart/ChartEditor.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { describeChartSelection, type ChartController } from '@pixerate/editor/chart';
+  import ChartCanvas from './ChartCanvas.svelte';
+  import ChartDataGrid from './ChartDataGrid.svelte';
+  import ChartInspector from './ChartInspector.svelte';
+  import { chartStateOf } from './createChartEditor.svelte.js';
+  import { chartButtonClass } from './styles.js';
+
+  interface Props {
+    controller: ChartController;
+    /** The settings sidebar (default `true`). */
+    showInspector?: boolean;
+    /** The data grid under the chart (default `true`). */
+    showDataGrid?: boolean;
+    /** Undo / redo and the selection readout (default `true`). */
+    showToolbar?: boolean;
+    /** Chart height in pixels (default 380). */
+    height?: number;
+    canvasProps?: Omit<ComponentProps<typeof ChartCanvas>, 'controller' | 'height'>;
+    class?: string;
+  }
+
+  let { controller, showInspector = true, showDataGrid = true, showToolbar = true, height = 380, canvasProps = {}, class: className = '' }: Props = $props();
+
+  const view = chartStateOf(() => controller);
+  const state = $derived(view.current);
+</script>
+
+<div class="flex flex-col gap-2 {className}" data-chart-editor="">
+  {#if showToolbar}
+    <div class="flex items-center gap-1" data-chart-toolbar="">
+      <button type="button" class={chartButtonClass} disabled={!state.canUndo} title={state.undoLabel ? `Undo ${state.undoLabel}` : 'Undo'} data-action="undo" onclick={() => controller.undo()}>Undo</button>
+      <button type="button" class={chartButtonClass} disabled={!state.canRedo} title={state.redoLabel ? `Redo ${state.redoLabel}` : 'Redo'} data-action="redo" onclick={() => controller.redo()}>Redo</button>
+      <span class="ml-2 truncate text-xs text-muted-foreground" data-chart-selection="" aria-live="polite">{describeChartSelection(controller, state.selection)}</span>
+    </div>
+  {/if}
+  {#if state.issues.length > 0}
+    <p role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive" data-chart-issues="">
+      {state.issues.map((i) => i.message).join(' ')}
+    </p>
+  {/if}
+  <div class="flex min-h-0 flex-col gap-2 md:flex-row">
+    <div class="min-w-0 flex-1 rounded-md border border-border bg-background p-1">
+      <ChartCanvas {controller} {height} {...canvasProps} />
+    </div>
+    {#if showInspector}
+      <ChartInspector {controller} class="w-full shrink-0 overflow-y-auto rounded-md border border-border p-3 md:w-64" />
+    {/if}
+  </div>
+  {#if showDataGrid}
+    <ChartDataGrid {controller} />
+  {/if}
+</div>

package/dist/chart/ChartEditor.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'svelte';
+import { type ChartController } from '@pixerate/editor/chart';
+import ChartCanvas from './ChartCanvas.svelte';
+interface Props {
+    controller: ChartController;
+    /** The settings sidebar (default `true`). */
+    showInspector?: boolean;
+    /** The data grid under the chart (default `true`). */
+    showDataGrid?: boolean;
+    /** Undo / redo and the selection readout (default `true`). */
+    showToolbar?: boolean;
+    /** Chart height in pixels (default 380). */
+    height?: number;
+    canvasProps?: Omit<ComponentProps<typeof ChartCanvas>, 'controller' | 'height'>;
+    class?: string;
+}
+declare const ChartEditor: import("svelte").Component<Props, {}, "">;
+type ChartEditor = ReturnType<typeof ChartEditor>;
+export default ChartEditor;
+//# sourceMappingURL=ChartEditor.svelte.d.ts.map

package/dist/chart/ChartEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAO7C,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC,CAAC;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/chart/ChartInspector.svelte

@@ -0,0 +1,316 @@
+<script lang="ts" module>
+  // A counter keeps label ids unique per inspector. Pass `idPrefix` for ids that match
+  // between server and client renders.
+  let nextId = 0;
+
+  export type ChartInspectorSection = 'type' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
+</script>
+
+<script lang="ts">
+  import {
+    CHART_CURVES,
+    CHART_LEGEND_POSITIONS,
+    CHART_NUMBER_STYLES,
+    CHART_SERIES_TYPES,
+    CHART_STACKINGS,
+    CHART_TYPE_LABELS,
+    CHART_TYPES,
+    chartColorInputValue,
+    chartSeriesColor,
+    chartSeriesType,
+    isCartesianChart,
+    type ChartAxis,
+    type ChartController,
+    type ChartNumberFormat,
+    type ChartSeriesType
+  } from '@pixerate/editor/chart';
+  import ChartCommitInput from './ChartCommitInput.svelte';
+  import { chartStateOf } from './createChartEditor.svelte.js';
+  import { chartButtonClass, chartInputClass, chartLabelClass, chartSectionClass, chartSegmentClass } from './styles.js';
+
+  interface Props {
+    controller: ChartController;
+    /** Which sections to show (default: all that apply to the chart). */
+    sections?: readonly ChartInspectorSection[];
+    /** Prefix for the inspector's element ids. */
+    idPrefix?: string;
+    class?: string;
+  }
+
+  let { controller, sections, idPrefix = `pixerate-chart-${++nextId}`, class: className = '' }: Props = $props();
+
+  const view = chartStateOf(() => controller);
+  const spec = $derived(view.current.spec);
+  const selectedSeries = $derived(view.current.selectedSeries);
+  const show = (section: ChartInspectorSection) => !sections || sections.includes(section);
+  const cartesian = $derived(isCartesianChart(spec.type));
+  const types = $derived(spec.series.map((s) => chartSeriesType(spec, s)));
+  const hasBars = $derived(cartesian && types.includes('bar'));
+  const hasLines = $derived(cartesian && types.some((t) => t === 'line' || t === 'area'));
+  const seriesIndex = $derived(selectedSeries ? spec.series.findIndex((s) => s.id === selectedSeries.id) : -1);
+  const horizontal = $derived(spec.orientation === 'horizontal');
+  const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+  const stackingLabels: Record<string, string> = { none: 'None', stacked: 'Stacked', percent: '100%' };
+
+  const setAxis = (axis: 'x' | 'y', patch: Partial<ChartAxis>) => controller.setAxis(axis, patch);
+  const setFormat = (patch: Partial<ChartNumberFormat>) => setAxis('y', { format: { ...spec.yAxis.format, ...patch } });
+  const commitBound = (key: 'min' | 'max') => (text: string) => setAxis('y', { [key]: text.trim() === '' ? null : Number(text) }).ok;
+  function commitDecimals(text: string) {
+    const format = { ...spec.yAxis.format };
+    if (text.trim() === '') delete format.decimals;
+    else format.decimals = Number(text);
+    return setAxis('y', { format }).ok;
+  }
+</script>
+
+{#snippet toggle(label: string, name: string, checked: boolean, onchange: (checked: boolean) => void)}
+  <label class="flex cursor-pointer items-center gap-2 text-xs text-foreground">
+    <input type="checkbox" class="h-3.5 w-3.5 accent-primary" {checked} data-option={name} onchange={(e) => onchange(e.currentTarget.checked)} />
+    {label}
+  </label>
+{/snippet}
+
+{#snippet axisSection(axis: 'x' | 'y', value: ChartAxis)}
+  <div class={chartSectionClass} data-section="axis-{axis}">
+    <div class="flex items-center justify-between">
+      <h4 class="text-xs font-semibold text-foreground">
+        {axis === 'x' ? 'Category axis' : 'Value axis'}
+        <span class="ml-1 font-normal text-muted-foreground">({axis === 'x' ? (horizontal ? 'left' : 'bottom') : horizontal ? 'bottom' : 'left'})</span>
+      </h4>
+      {@render toggle('Show', `${axis}Axis.show`, value.show, (v) => setAxis(axis, { show: v }))}
+    </div>
+    <div class="flex items-center gap-2">
+      <label for="{idPrefix}-{axis}-title" class="{chartLabelClass} w-20 shrink-0">Title</label>
+      <div class="min-w-0 flex-1">
+        <ChartCommitInput id="{idPrefix}-{axis}-title" value={value.title} data-option="{axis}Axis.title" oncommit={(title) => void setAxis(axis, { title })} />
+      </div>
+    </div>
+    {@render toggle('Grid lines', `${axis}Axis.gridlines`, value.gridlines, (v) => setAxis(axis, { gridlines: v }))}
+    {#if axis === 'y'}
+      <div class="flex items-center gap-2">
+        <span class="{chartLabelClass} w-20 shrink-0">Min / max</span>
+        <div class="flex min-w-0 flex-1 gap-1">
+          <ChartCommitInput id="{idPrefix}-y-min" value={value.min === null ? '' : String(value.min)} placeholder="Auto" inputmode="decimal" data-option="yAxis.min" oncommit={commitBound('min')} />
+          <ChartCommitInput id="{idPrefix}-y-max" value={value.max === null ? '' : String(value.max)} placeholder="Auto" inputmode="decimal" data-option="yAxis.max" oncommit={commitBound('max')} />
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-y-format" class="{chartLabelClass} w-20 shrink-0">Format</label>
+        <div class="flex min-w-0 flex-1 gap-1">
+          <select
+            id="{idPrefix}-y-format"
+            class={chartInputClass}
+            value={value.format.style ?? 'number'}
+            data-option="yAxis.format.style"
+            onchange={(e) => setFormat({ style: e.currentTarget.value as ChartNumberFormat['style'] })}
+          >
+            {#each CHART_NUMBER_STYLES as style (style)}
+              <option value={style}>{cap(style)}</option>
+            {/each}
+          </select>
+          <ChartCommitInput
+            value={value.format.decimals === undefined ? '' : String(value.format.decimals)}
+            placeholder="Auto"
+            aria-label="Decimals"
+            title="Decimals"
+            inputmode="numeric"
+            data-option="yAxis.format.decimals"
+            class="{chartInputClass} w-14 shrink-0"
+            oncommit={commitDecimals}
+          />
+        </div>
+      </div>
+      {#if value.format.style === 'currency'}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-y-currency" class="{chartLabelClass} w-20 shrink-0">Currency</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-y-currency" value={value.format.currency ?? 'USD'} data-option="yAxis.format.currency" oncommit={(c) => void setFormat({ currency: c.toUpperCase() })} />
+          </div>
+        </div>
+      {/if}
+    {/if}
+  </div>
+{/snippet}
+
+<div class="space-y-3 text-xs {className}" data-chart-inspector="">
+  {#if show('type')}
+    <div class={chartSectionClass} data-section="type">
+      <div class="grid grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5" role="radiogroup" aria-label="Chart type">
+        {#each CHART_TYPES as type (type)}
+          <button type="button" role="radio" aria-checked={spec.type === type} data-chart-type={type} class={chartSegmentClass(spec.type === type)} onclick={() => controller.setType(type)}>
+            {CHART_TYPE_LABELS[type]}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  {#if show('titles')}
+    <div class={chartSectionClass} data-section="titles">
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-title" class="{chartLabelClass} w-20 shrink-0">Title</label>
+        <div class="min-w-0 flex-1">
+          <ChartCommitInput id="{idPrefix}-title" value={spec.title} data-option="title" oncommit={(title) => void controller.setTitle(title)} />
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-subtitle" class="{chartLabelClass} w-20 shrink-0">Subtitle</label>
+        <div class="min-w-0 flex-1">
+          <ChartCommitInput id="{idPrefix}-subtitle" value={spec.subtitle} data-option="subtitle" oncommit={(subtitle) => void controller.setSubtitle(subtitle)} />
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  {#if show('options')}
+    <div class={chartSectionClass} data-section="options">
+      {#if cartesian}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-stacking" class="{chartLabelClass} w-20 shrink-0">Stacking</label>
+          <select
+            id="{idPrefix}-stacking"
+            class={chartInputClass}
+            value={spec.stacking}
+            data-option="stacking"
+            onchange={(e) => controller.update({ stacking: e.currentTarget.value as (typeof CHART_STACKINGS)[number] })}
+          >
+            {#each CHART_STACKINGS as s (s)}
+              <option value={s}>{stackingLabels[s]}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+      {#if hasBars}
+        <div class="flex items-center gap-2">
+          <span class="{chartLabelClass} w-20 shrink-0">Bars</span>
+          <div class="flex min-w-0 flex-1 gap-0.5 rounded-md bg-muted p-0.5">
+            {#each ['vertical', 'horizontal'] as const as o (o)}
+              <button type="button" aria-pressed={spec.orientation === o} data-option="orientation.{o}" class={chartSegmentClass(spec.orientation === o)} onclick={() => controller.update({ orientation: o })}>
+                {cap(o)}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      {#if hasLines}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-curve" class="{chartLabelClass} w-20 shrink-0">Lines</label>
+          <select id="{idPrefix}-curve" class={chartInputClass} value={spec.curve} data-option="curve" onchange={(e) => controller.update({ curve: e.currentTarget.value as (typeof CHART_CURVES)[number] })}>
+            {#each CHART_CURVES as c (c)}
+              <option value={c}>{cap(c)}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+      {#if spec.type === 'donut'}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-hole" class="{chartLabelClass} w-20 shrink-0">Hole</label>
+          <input
+            id="{idPrefix}-hole"
+            type="range"
+            min="0"
+            max="0.9"
+            step="0.05"
+            value={spec.innerRadius}
+            data-option="innerRadius"
+            class="w-full accent-primary"
+            onpointerdown={() => controller.beginGesture('innerRadius')}
+            onpointerup={() => controller.endGesture()}
+            oninput={(e) => controller.update({ innerRadius: Number(e.currentTarget.value) })}
+          />
+        </div>
+      {/if}
+      <div class="flex flex-wrap gap-x-4 gap-y-1">
+        {#if hasLines}
+          {@render toggle('Points', 'points', spec.points, (points) => controller.update({ points }))}
+        {/if}
+        {@render toggle('Data labels', 'dataLabels', spec.dataLabels, (dataLabels) => controller.update({ dataLabels }))}
+      </div>
+    </div>
+  {/if}
+
+  {#if show('legend')}
+    <div class={chartSectionClass} data-section="legend">
+      <div class="flex items-center justify-between">
+        <h4 class="text-xs font-semibold text-foreground">Legend</h4>
+        {@render toggle('Show', 'legend.show', spec.legend.show, (v) => controller.setLegend({ show: v }))}
+      </div>
+      {#if spec.legend.show}
+        <div class="flex gap-0.5 rounded-md bg-muted p-0.5">
+          {#each CHART_LEGEND_POSITIONS as p (p)}
+            <button type="button" aria-pressed={spec.legend.position === p} data-option="legend.{p}" class={chartSegmentClass(spec.legend.position === p)} onclick={() => controller.setLegend({ position: p })}>
+              {cap(p)}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if show('axes') && cartesian}
+    {@render axisSection('x', spec.xAxis)}
+    {@render axisSection('y', spec.yAxis)}
+  {/if}
+
+  {#if show('series') && selectedSeries}
+    {@const series = selectedSeries}
+    <div class={chartSectionClass} data-section="series" data-series-id={series.id}>
+      <h4 class="text-xs font-semibold text-foreground">Series</h4>
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-series-name" class="{chartLabelClass} w-20 shrink-0">Name</label>
+        <div class="min-w-0 flex-1">
+          <ChartCommitInput id="{idPrefix}-series-name" value={series.name} data-option="series.name" oncommit={(name) => void controller.updateSeries(series.id, { name })} />
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-series-color" class="{chartLabelClass} w-20 shrink-0">Colour</label>
+        <div class="flex min-w-0 flex-1 items-center gap-1">
+          <input
+            id="{idPrefix}-series-color"
+            type="color"
+            value={chartColorInputValue(chartSeriesColor(spec, seriesIndex))}
+            data-option="series.color"
+            class="h-7 w-9 shrink-0 cursor-pointer rounded border border-input bg-background p-0.5"
+            onpointerdown={() => controller.beginGesture(`color:${series.id}`)}
+            onblur={() => controller.endGesture()}
+            oninput={(e) => controller.updateSeries(series.id, { color: e.currentTarget.value })}
+          />
+          {#if series.color}
+            <button type="button" class={chartButtonClass} data-action="reset-color" onclick={() => controller.updateSeries(series.id, { color: null })}>Palette</button>
+          {/if}
+        </div>
+      </div>
+      {#if cartesian}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-series-type" class="{chartLabelClass} w-20 shrink-0">Draw as</label>
+          <select
+            id="{idPrefix}-series-type"
+            class={chartInputClass}
+            value={series.type ?? ''}
+            data-option="series.type"
+            onchange={(e) => controller.updateSeries(series.id, { type: (e.currentTarget.value || null) as ChartSeriesType | null })}
+          >
+            <option value="">Chart type</option>
+            {#each CHART_SERIES_TYPES as t (t)}
+              <option value={t}>{CHART_TYPE_LABELS[t]}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+      <div class="flex flex-wrap items-center gap-1">
+        {@render toggle('Hidden', 'series.hidden', !!series.hidden, (hidden) => controller.updateSeries(series.id, { hidden }))}
+        <span class="flex-1"></span>
+        <button type="button" class={chartButtonClass} disabled={seriesIndex <= 0} aria-label="Move series earlier" data-action="series-up" onclick={() => controller.moveSeries(series.id, seriesIndex - 1)}>↑</button>
+        <button
+          type="button"
+          class={chartButtonClass}
+          disabled={seriesIndex >= spec.series.length - 1}
+          aria-label="Move series later"
+          data-action="series-down"
+          onclick={() => controller.moveSeries(series.id, seriesIndex + 1)}>↓</button
+        >
+        <button type="button" class="{chartButtonClass} text-destructive" data-action="series-delete" onclick={() => controller.removeSeries(series.id)}>Delete</button>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/chart/ChartInspector.svelte.d.ts

@@ -0,0 +1,14 @@
+export type ChartInspectorSection = 'type' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
+import { type ChartController } from '@pixerate/editor/chart';
+interface Props {
+    controller: ChartController;
+    /** Which sections to show (default: all that apply to the chart). */
+    sections?: readonly ChartInspectorSection[];
+    /** Prefix for the inspector's element ids. */
+    idPrefix?: string;
+    class?: string;
+}
+declare const ChartInspector: import("svelte").Component<Props, {}, "">;
+type ChartInspector = ReturnType<typeof ChartInspector>;
+export default ChartInspector;
+//# sourceMappingURL=ChartInspector.svelte.d.ts.map

package/dist/chart/ChartInspector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartInspector.svelte.ts"],"names":[],"mappings":"AAOE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAGnG,OAAO,EAaH,KAAK,eAAe,EAGrB,MAAM,wBAAwB,CAAC;AAMhC,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC5C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2OH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/chart/createChartEditor.svelte.d.ts

@@ -0,0 +1,38 @@
+import { ChartController, type ChartActionResult, type ChartCommandOptions, type ChartControllerOptions, type ChartSelection, type ChartSpecPatch, type ChartState, type ChartType } from "@pixerate/editor/chart";
+export interface SvelteChartEditor {
+    readonly controller: ChartController;
+    /** The controller's state (reactive). */
+    readonly state: ChartState;
+    /** Shorthand for `state.spec` (reactive). */
+    readonly spec: ChartState["spec"];
+    /** Shorthand for `state.selection` (reactive). */
+    readonly selection: ChartSelection | null;
+    update(patch: ChartSpecPatch): ChartActionResult;
+    setType(type: ChartType): ChartActionResult;
+    setValue(seriesId: string, index: number, value: unknown): ChartActionResult;
+    select(selection: ChartSelection | null): void;
+    undo(): void;
+    redo(): void;
+    /** Stops listening to the controller. */
+    destroy(): void;
+}
+/**
+ * Svelte 5 rune: subscribes to a `ChartController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export declare function createChartEditor(controllerOrOptions?: ChartController | ChartControllerOptions): SvelteChartEditor;
+/** Reactive state of a (possibly replaced) controller prop, for use inside components. */
+export declare function chartStateOf(getController: () => ChartController): {
+    readonly current: ChartState;
+};
+/** Anything with `register(specs) → unregister` (a `CommandRegistry`). */
+export interface ChartCommandTarget {
+    register(specs: any): () => void;
+}
+/**
+ * Registers the controller's palette / agent commands (`chart.describe`, `chart.update`,
+ * `chart.setValues`, …) for the lifetime of the calling component (call it during
+ * initialisation). Pass a getter to follow a changing registry.
+ */
+export declare function useChartCommands(registry: ChartCommandTarget | null | undefined | (() => ChartCommandTarget | null | undefined), controller: ChartController, options?: ChartCommandOptions): void;
+//# sourceMappingURL=createChartEditor.svelte.d.ts.map

package/dist/chart/createChartEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createChartEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/createChartEditor.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EAEf,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,wBAAwB,CAAC;AAEhC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAClC,kDAAkD;IAClD,QAAQ,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,KAAK,EAAE,cAAc,GAAG,iBAAiB,CAAC;IACjD,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,iBAAiB,CAAC;IAC5C,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC7E,MAAM,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/C,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,yCAAyC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,mBAAmB,GAAE,eAAe,GAAG,sBAA2B,GAAG,iBAAiB,CAyBvH;AAED,0FAA0F;AAC1F,wBAAgB,YAAY,CAAC,aAAa,EAAE,MAAM,eAAe,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAA;CAAE,CAgBnG;AAED,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,IAAI,CAAC;CAClC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC,EAC/F,UAAU,EAAE,eAAe,EAC3B,OAAO,GAAE,mBAAwB,GAChC,IAAI,CAMN"}

package/dist/chart/createChartEditor.svelte.js

@@ -0,0 +1,61 @@
+import { untrack } from "svelte";
+import { ChartController, createChartCommands, } from "@pixerate/editor/chart";
+/**
+ * Svelte 5 rune: subscribes to a `ChartController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export function createChartEditor(controllerOrOptions = {}) {
+    const controller = controllerOrOptions instanceof ChartController ? controllerOrOptions : new ChartController(controllerOrOptions);
+    let state = $state.raw(controller.getState());
+    const unsubscribe = controller.subscribe((next) => {
+        state = next;
+    });
+    return {
+        controller,
+        get state() {
+            return state;
+        },
+        get spec() {
+            return state.spec;
+        },
+        get selection() {
+            return state.selection;
+        },
+        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(),
+        destroy: unsubscribe,
+    };
+}
+/** Reactive state of a (possibly replaced) controller prop, for use inside components. */
+export function chartStateOf(getController) {
+    let view = $state.raw(untrack(() => getController().getState()));
+    $effect(() => {
+        const controller = getController();
+        view = controller.getState();
+        return untrack(() => controller.subscribe((next) => {
+            view = next;
+        }));
+    });
+    return {
+        get current() {
+            return view;
+        },
+    };
+}
+/**
+ * Registers the controller's palette / agent commands (`chart.describe`, `chart.update`,
+ * `chart.setValues`, …) for the lifetime of the calling component (call it during
+ * initialisation). Pass a getter to follow a changing registry.
+ */
+export function useChartCommands(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createChartCommands(controller, options));
+    });
+}

package/dist/chart/index.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "svelte";
+import type ChartCanvasComponent from "./ChartCanvas.svelte";
+import type ChartDataGridComponent from "./ChartDataGrid.svelte";
+import type ChartEditorComponent from "./ChartEditor.svelte";
+import type ChartInspectorComponent from "./ChartInspector.svelte";
+export { default as ChartEditor } from "./ChartEditor.svelte";
+export { default as ChartCanvas } from "./ChartCanvas.svelte";
+export { default as ChartDataGrid } from "./ChartDataGrid.svelte";
+export { default as ChartInspector } from "./ChartInspector.svelte";
+export { default as ChartCommitInput } from "./ChartCommitInput.svelte";
+export type { ChartInspectorSection } from "./ChartInspector.svelte";
+export * from "./createChartEditor.svelte.js";
+export * from "./styles.js";
+export type ChartCanvasProps = ComponentProps<typeof ChartCanvasComponent>;
+export type ChartDataGridProps = ComponentProps<typeof ChartDataGridComponent>;
+export type ChartEditorProps = ComponentProps<typeof ChartEditorComponent>;
+export type ChartInspectorProps = ComponentProps<typeof ChartInspectorComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,cAAc,+BAA+B,CAAC;AAC9C,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/chart/index.js

@@ -0,0 +1,7 @@
+export { default as ChartEditor } from "./ChartEditor.svelte";
+export { default as ChartCanvas } from "./ChartCanvas.svelte";
+export { default as ChartDataGrid } from "./ChartDataGrid.svelte";
+export { default as ChartInspector } from "./ChartInspector.svelte";
+export { default as ChartCommitInput } from "./ChartCommitInput.svelte";
+export * from "./createChartEditor.svelte.js";
+export * from "./styles.js";

package/dist/chart/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const 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";
+export declare const 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";
+export declare const 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";
+export declare const chartSegmentClass: (active: boolean) => string;
+export declare const chartLabelClass = "text-[11px] font-medium text-muted-foreground";
+export declare const chartSectionClass = "space-y-2 border-b border-border pb-3 last:border-b-0";
+export declare const 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";
+//# sourceMappingURL=styles.d.ts.map

package/dist/chart/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/chart/styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,4NAC+L,CAAC;AAC5N,eAAO,MAAM,gBAAgB,2QAC6O,CAAC;AAC3Q,eAAO,MAAM,oBAAoB,oQACkO,CAAC;AACpQ,eAAO,MAAM,iBAAiB,GAAI,QAAQ,OAAO,WAG7C,CAAC;AACL,eAAO,MAAM,eAAe,kDAAkD,CAAC;AAC/E,eAAO,MAAM,iBAAiB,0DAA0D,CAAC;AACzF,eAAO,MAAM,cAAc,kOACsM,CAAC"}

package/dist/chart/styles.js

@@ -0,0 +1,8 @@
+// Class names shared by the chart components (the same as the React package's).
+export const 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";
+export const 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";
+export const 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";
+export const 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"}`;
+export const chartLabelClass = "text-[11px] font-medium text-muted-foreground";
+export const chartSectionClass = "space-y-2 border-b border-border pb-3 last:border-b-0";
+export const 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -63,6 +63,11 @@
       "svelte": "./dist/vector/index.js",
       "default": "./dist/vector/index.js"
     },
+    "./chart": {
+      "types": "./dist/chart/index.d.ts",
+      "svelte": "./dist/chart/index.js",
+      "default": "./dist/chart/index.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -93,6 +98,9 @@
       ],
       "vector": [
         "./dist/vector/index.d.ts"
+      ],
+      "chart": [
+        "./dist/chart/index.d.ts"
       ]
     }
   },
@@ -107,7 +115,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.44.0"
+    "@pixerate/editor": "0.46.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",