@pixerate/editor-svelte 0.42.1 → 0.44.0

package/dist/chart/ChartMarks.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { chartTextBaseline, chartTextTransform, type ChartMark } from '@pixerate/editor/chart';
+
+  interface Props {
+    marks: readonly ChartMark[];
+    fontFamily: string;
+    /** Marks with targets get a pointer cursor and receive events. */
+    interactive?: boolean;
+  }
+
+  let { marks, fontFamily, interactive = false }: Props = $props();
+
+  const pointerEvents = (mark: ChartMark) => (mark.role === 'selection' || mark.role === 'drag-readout' || (!mark.target && mark.role !== 'background') ? 'none' : undefined);
+  const cursor = (mark: ChartMark) => (interactive && mark.target && mark.role !== 'background' ? 'pointer' : undefined);
+</script>
+
+{#each 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={fontFamily}
+      style:user-select="none">{mark.text}</text
+    >
+  {/if}
+{/each}

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

@@ -0,0 +1,11 @@
+import { type ChartMark } from '@pixerate/editor/chart';
+interface Props {
+    marks: readonly ChartMark[];
+    fontFamily: string;
+    /** Marks with targets get a pointer cursor and receive events. */
+    interactive?: boolean;
+}
+declare const ChartMarks: import("svelte").Component<Props, {}, "">;
+type ChartMarks = ReturnType<typeof ChartMarks>;
+export default ChartMarks;
+//# sourceMappingURL=ChartMarks.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartMarks.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartMarks.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG7F,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/chart/ChartPresenceLayer.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { ChartPresence, ChartPresenceState } from '@pixerate/editor/chart';
+
+  interface Props {
+    /** Agent cursors to draw (see `ChartDirector`). */
+    presence: ChartPresence;
+  }
+
+  let { presence }: Props = $props();
+
+  let current: ChartPresenceState = $state.raw({ actors: [] });
+  $effect(() => {
+    current = presence.getState();
+    return presence.subscribe((next) => {
+      current = next;
+    });
+  });
+</script>
+
+<g data-chart-presence="" pointer-events="none">
+  {#each current.actors as a (a.id)}
+    <g transform="translate({a.x} {a.y})" data-actor={a.id}>
+      <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} style:stroke="#ffffff" style:stroke-width="1" transform={a.pressed ? 'scale(0.9)' : undefined} />
+      <g transform="translate(13 16)">
+        <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} />
+        <text x="6" y="9" dominant-baseline="central" style:fill="#ffffff" style:font-size="11px" style:font-weight="600" style:font-family="inherit">{a.message ?? a.name}</text>
+      </g>
+    </g>
+  {/each}
+</g>

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

@@ -0,0 +1,9 @@
+import type { ChartPresence } from '@pixerate/editor/chart';
+interface Props {
+    /** Agent cursors to draw (see `ChartDirector`). */
+    presence: ChartPresence;
+}
+declare const ChartPresenceLayer: import("svelte").Component<Props, {}, "">;
+type ChartPresenceLayer = ReturnType<typeof ChartPresenceLayer>;
+export default ChartPresenceLayer;
+//# sourceMappingURL=ChartPresenceLayer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartPresenceLayer.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartPresenceLayer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,wBAAwB,CAAC;AAG9E,UAAU,KAAK;IACb,mDAAmD;IACnD,QAAQ,EAAE,aAAa,CAAC;CACzB;AA8BH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/chart/ChartSceneSvg.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { ChartScene } from '@pixerate/editor/chart';
+  import ChartMarks from './ChartMarks.svelte';
+
+  interface Props {
+    /** A laid-out scene (`layoutChart`, `layoutSparkline`, `blendChartScenes`). */
+    scene: ChartScene;
+    label?: string;
+    class?: string;
+  }
+
+  let { scene, label, class: className = '' }: Props = $props();
+</script>
+
+<svg width={scene.width} height={scene.height} viewBox="0 0 {scene.width} {scene.height}" role="img" aria-label={label} class="block max-w-full {className}">
+  <ChartMarks marks={scene.marks} fontFamily={scene.theme.fontFamily} />
+</svg>

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

@@ -0,0 +1,11 @@
+import type { ChartScene } from '@pixerate/editor/chart';
+interface Props {
+    /** A laid-out scene (`layoutChart`, `layoutSparkline`, `blendChartScenes`). */
+    scene: ChartScene;
+    label?: string;
+    class?: string;
+}
+declare const ChartSceneSvg: import("svelte").Component<Props, {}, "">;
+type ChartSceneSvg = ReturnType<typeof ChartSceneSvg>;
+export default ChartSceneSvg;
+//# sourceMappingURL=ChartSceneSvg.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSceneSvg.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartSceneSvg.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIvD,UAAU,KAAK;IACb,+EAA+E;IAC/E,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAeH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/chart/ChartSparkline.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { layoutSparkline, type ChartSparklineKind, type ChartValue } from '@pixerate/editor/chart';
+  import ChartSceneSvg from './ChartSceneSvg.svelte';
+
+  interface Props {
+    values: readonly ChartValue[];
+    kind?: ChartSparklineKind;
+    width?: number;
+    height?: number;
+    color?: string;
+    negativeColor?: string;
+    markers?: boolean;
+    highLow?: boolean;
+    min?: number;
+    max?: number;
+    /** Accessible label (default: first and last value). */
+    label?: string;
+    class?: string;
+  }
+
+  let { values, kind = 'line', width = 80, height = 20, color, negativeColor, markers, highLow, min, max, label, class: className = '' }: Props = $props();
+
+  const scene = $derived(layoutSparkline(values, { kind, width, height, color, negativeColor, markers, highLow, min, max }));
+  const present = $derived(values.filter((v): v is number => v !== null));
+</script>
+
+<ChartSceneSvg {scene} label={label ?? (present.length ? `Trend from ${present[0]} to ${present[present.length - 1]}` : 'No data')} class="inline-block align-middle {className}" />

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

@@ -0,0 +1,20 @@
+import { type ChartSparklineKind, type ChartValue } from '@pixerate/editor/chart';
+interface Props {
+    values: readonly ChartValue[];
+    kind?: ChartSparklineKind;
+    width?: number;
+    height?: number;
+    color?: string;
+    negativeColor?: string;
+    markers?: boolean;
+    highLow?: boolean;
+    min?: number;
+    max?: number;
+    /** Accessible label (default: first and last value). */
+    label?: string;
+    class?: string;
+}
+declare const ChartSparkline: import("svelte").Component<Props, {}, "">;
+type ChartSparkline = ReturnType<typeof ChartSparkline>;
+export default ChartSparkline;
+//# sourceMappingURL=ChartSparkline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSparkline.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartSparkline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIjG,UAAU,KAAK;IACb,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/chart/ChartStreamingView.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { onDestroy, untrack } from 'svelte';
+  import {
+    CSS_VARIABLE_CHART_THEME,
+    ChartStream,
+    blendChartScenes,
+    easeChartTween,
+    layoutChart,
+    type ChartIssue,
+    type ChartScene,
+    type ChartStreamFormat,
+    type ChartTheme
+  } from '@pixerate/editor/chart';
+  import type { Snippet } from 'svelte';
+  import ChartSceneSvg from './ChartSceneSvg.svelte';
+
+  interface Props {
+    /** Mermaid (xychart-beta, pie, radar-beta) or a JSON chart spec, as far as it has arrived. */
+    source: string;
+    /** Nothing more will arrive: the final chart is drawn at once and problems are reported. */
+    complete?: boolean;
+    format?: ChartStreamFormat;
+    width?: number;
+    height?: number;
+    theme?: Partial<ChartTheme>;
+    /** How often a new layout is adopted while streaming (ms, default 300). */
+    adoptInterval?: number;
+    /** Tween length between layouts (ms, default 450; 0 to switch at once). */
+    tween?: number;
+    /** Shown before anything can be drawn. */
+    placeholder?: Snippet;
+    /** Called with the parse problems once `complete`. */
+    onissues?: (issues: ChartIssue[]) => void;
+    class?: string;
+  }
+
+  let { source, complete = false, format = 'auto', width = 640, height = 360, theme, adoptInterval = 300, tween = 450, placeholder, onissues, class: className = '' }: Props = $props();
+
+  const stream = $derived(new ChartStream(format));
+  const fullTheme = $derived({ ...CSS_VARIABLE_CHART_THEME, ...theme });
+  let scene: ChartScene | null = $state.raw(null);
+  let lastAdopt = 0;
+  let frame: number | null = null;
+  let pending: ReturnType<typeof setTimeout> | null = null;
+
+  function adopt(src: string, done: boolean) {
+    const read = stream.update(src, done);
+    if (done) onissues?.(read.issues);
+    if (!read.spec) return;
+    const next = layoutChart(read.spec, { width, height, theme: fullTheme, valueDomain: read.valueDomain });
+    const from = untrack(() => scene);
+    lastAdopt = Date.now();
+    if (frame !== null) cancelAnimationFrame(frame);
+    if (!from || tween <= 0 || typeof requestAnimationFrame === 'undefined') {
+      scene = next;
+      return;
+    }
+    const start = performance.now();
+    const step = () => {
+      const t = easeChartTween((performance.now() - start) / tween);
+      scene = blendChartScenes(from, next, t);
+      frame = t < 1 ? requestAnimationFrame(step) : null;
+    };
+    frame = requestAnimationFrame(step);
+  }
+
+  $effect(() => {
+    const src = source;
+    const done = complete;
+    if (pending) clearTimeout(pending);
+    const wait = done ? 0 : Math.max(0, adoptInterval - (Date.now() - lastAdopt));
+    if (wait === 0) adopt(src, done);
+    else pending = setTimeout(() => adopt(src, done), wait);
+    return () => {
+      if (pending) clearTimeout(pending);
+    };
+  });
+
+  onDestroy(() => {
+    if (frame !== null) cancelAnimationFrame(frame);
+  });
+</script>
+
+<div class={className} data-chart-streaming={complete ? 'complete' : 'streaming'} aria-busy={!complete}>
+  {#if scene}
+    <ChartSceneSvg {scene} label={complete ? undefined : 'Chart loading'} />
+  {:else if placeholder}
+    {@render placeholder()}
+  {:else}
+    <div style:height="{height}px" class="flex items-center justify-center text-xs text-muted-foreground">Drawing chart…</div>
+  {/if}
+</div>

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

@@ -0,0 +1,25 @@
+import { type ChartIssue, type ChartStreamFormat, type ChartTheme } from '@pixerate/editor/chart';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Mermaid (xychart-beta, pie, radar-beta) or a JSON chart spec, as far as it has arrived. */
+    source: string;
+    /** Nothing more will arrive: the final chart is drawn at once and problems are reported. */
+    complete?: boolean;
+    format?: ChartStreamFormat;
+    width?: number;
+    height?: number;
+    theme?: Partial<ChartTheme>;
+    /** How often a new layout is adopted while streaming (ms, default 300). */
+    adoptInterval?: number;
+    /** Tween length between layouts (ms, default 450; 0 to switch at once). */
+    tween?: number;
+    /** Shown before anything can be drawn. */
+    placeholder?: Snippet;
+    /** Called with the parse problems once `complete`. */
+    onissues?: (issues: ChartIssue[]) => void;
+    class?: string;
+}
+declare const ChartStreamingView: import("svelte").Component<Props, {}, "">;
+type ChartStreamingView = ReturnType<typeof ChartStreamingView>;
+export default ChartStreamingView;
+//# sourceMappingURL=ChartStreamingView.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartStreamingView.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartStreamingView.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAMH,KAAK,UAAU,EAEf,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAClC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,8FAA8F;IAC9F,MAAM,EAAE,MAAM,CAAC;IACf,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmEH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

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

@@ -1,4 +1,5 @@
-import { ChartController, type ChartActionResult, type ChartCommandOptions, type ChartControllerOptions, type ChartSelection, type ChartSpecPatch, type ChartState, type ChartType } from "@pixerate/editor/chart";
+import type { ToolRegistry } from "@pixerate/editor/tools";
+import { ChartController, ChartDirector, ChartPresence, type ChartScene, type ChartToolProviderOptions, 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). */
@@ -35,4 +36,27 @@ export interface ChartCommandTarget {
  * 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;
+/**
+ * Registers the chart's agent tools (`createChartToolProvider`) with a `ToolRegistry` for the
+ * lifetime of the calling component. Pass a getter to follow a changing registry.
+ */
+export declare function useChartToolProvider(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: ChartController, options?: ChartToolProviderOptions): void;
+/**
+ * A `ChartPresence` and `ChartDirector` for a chart: pass `presence` and `sceneRef` to
+ * `ChartCanvas`, and `director` to `useChartToolProvider` so agent edits are acted out with a
+ * cursor.
+ */
+export declare function createChartDirector(controller: ChartController, options?: {
+    speed?: number;
+    size?: {
+        width: number;
+        height: number;
+    };
+}): {
+    presence: ChartPresence;
+    director: ChartDirector;
+    sceneRef: {
+        current: ChartScene | null;
+    };
+};
 //# sourceMappingURL=createChartEditor.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"createChartEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/createChartEditor.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EACL,eAAe,EACf,aAAa,EACb,aAAa,EAIb,KAAK,UAAU,EACf,KAAK,wBAAwB,EAC7B,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;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,eAAe,EAC3B,OAAO,GAAE,wBAA6B,GACrC,IAAI,CAMN;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAAO;;;;iBAC9G,UAAU,GAAG,IAAI;;EAK7C"}

package/dist/chart/createChartEditor.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { ChartController, createChartCommands, } from "@pixerate/editor/chart";
+import { ChartController, ChartDirector, ChartPresence, createChartCommands, createChartToolProvider, layoutChart, } from "@pixerate/editor/chart";
 /**
  * Svelte 5 rune: subscribes to a `ChartController` (or creates one from options) and
  * exposes its state reactively with bound actions.
@@ -59,3 +59,27 @@ export function useChartCommands(registry, controller, options = {}) {
         return target.register(createChartCommands(controller, options));
     });
 }
+/**
+ * Registers the chart's agent tools (`createChartToolProvider`) with a `ToolRegistry` for the
+ * lifetime of the calling component. Pass a getter to follow a changing registry.
+ */
+export function useChartToolProvider(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createChartToolProvider(controller, options));
+    });
+}
+/**
+ * A `ChartPresence` and `ChartDirector` for a chart: pass `presence` and `sceneRef` to
+ * `ChartCanvas`, and `director` to `useChartToolProvider` so agent edits are acted out with a
+ * cursor.
+ */
+export function createChartDirector(controller, options = {}) {
+    const sceneRef = { current: null };
+    const presence = new ChartPresence();
+    const size = options.size ?? { width: 640, height: 400 };
+    const director = new ChartDirector(controller, presence, { scene: () => sceneRef.current ?? layoutChart(controller.getSpec(), size), speed: options.speed });
+    return { presence, director, sceneRef };
+}

package/dist/chart/index.d.ts

@@ -3,11 +3,18 @@ import type ChartCanvasComponent from "./ChartCanvas.svelte";
 import type ChartDataGridComponent from "./ChartDataGrid.svelte";
 import type ChartEditorComponent from "./ChartEditor.svelte";
 import type ChartInspectorComponent from "./ChartInspector.svelte";
+import type ChartStreamingViewComponent from "./ChartStreamingView.svelte";
+import type ChartSparklineComponent from "./ChartSparkline.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 { default as ChartMarks } from "./ChartMarks.svelte";
+export { default as ChartSceneSvg } from "./ChartSceneSvg.svelte";
+export { default as ChartPresenceLayer } from "./ChartPresenceLayer.svelte";
+export { default as ChartStreamingView } from "./ChartStreamingView.svelte";
+export { default as ChartSparkline } from "./ChartSparkline.svelte";
 export type { ChartInspectorSection } from "./ChartInspector.svelte";
 export * from "./createChartEditor.svelte.js";
 export * from "./styles.js";
@@ -15,4 +22,6 @@ export type ChartCanvasProps = ComponentProps<typeof ChartCanvasComponent>;
 export type ChartDataGridProps = ComponentProps<typeof ChartDataGridComponent>;
 export type ChartEditorProps = ComponentProps<typeof ChartEditorComponent>;
 export type ChartInspectorProps = ComponentProps<typeof ChartInspectorComponent>;
+export type ChartStreamingViewProps = ComponentProps<typeof ChartStreamingViewComponent>;
+export type ChartSparklineProps = ComponentProps<typeof ChartSparklineComponent>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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;AACnE,OAAO,KAAK,2BAA2B,MAAM,6BAA6B,CAAC;AAC3E,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,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,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;AACjF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,2BAA2B,CAAC,CAAC;AACzF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/chart/index.js

@@ -3,5 +3,10 @@ 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 { default as ChartMarks } from "./ChartMarks.svelte";
+export { default as ChartSceneSvg } from "./ChartSceneSvg.svelte";
+export { default as ChartPresenceLayer } from "./ChartPresenceLayer.svelte";
+export { default as ChartStreamingView } from "./ChartStreamingView.svelte";
+export { default as ChartSparkline } from "./ChartSparkline.svelte";
 export * from "./createChartEditor.svelte.js";
 export * from "./styles.js";

package/dist/chart-node/ChartNodeView.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { ChartNodeViewState } from '@pixerate/editor';
+  import type { ChartTheme } from '@pixerate/editor/chart';
+  import ChartCanvas from '../chart/ChartCanvas.svelte';
+  import ChartDataGrid from '../chart/ChartDataGrid.svelte';
+  import ChartInspector from '../chart/ChartInspector.svelte';
+  import { chartButtonClass } from '../chart/styles.js';
+
+  interface Props {
+    /** What the editor's `chart` node passes (see `ChartNodeViewState`). */
+    view: ChartNodeViewState;
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+  }
+
+  let { view, theme, showDataGrid = true }: Props = $props();
+
+  const clickable = $derived(view.editable && !view.editing);
+
+  function open() {
+    if (clickable) view.setEditing(true);
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    if (view.editing && event.key === 'Escape') {
+      event.stopPropagation();
+      view.setEditing(false);
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="not-prose my-2 rounded-md border bg-background p-1 {view.selected ? 'border-primary ring-1 ring-primary' : 'border-border'}"
+  data-chart-node-view=""
+  data-editing={view.editing ? '' : undefined}
+  {onkeydown}
+>
+  {#if view.editing}
+    <div class="mb-1 flex items-center justify-between gap-2 px-1" data-chart-node-toolbar="">
+      <span class="text-xs text-muted-foreground">Editing chart</span>
+      <button type="button" class={chartButtonClass} data-action="done" onclick={() => view.setEditing(false)}>Done</button>
+    </div>
+  {/if}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class={clickable ? 'cursor-pointer' : undefined} onclick={open} title={clickable ? 'Click to edit the chart' : undefined} data-chart-node-canvas="">
+    <ChartCanvas controller={view.controller} width={view.width ?? 640} height={view.height} responsive={view.width === null} editable={view.editing} {theme} />
+  </div>
+  {#if view.editing}
+    <!-- Wraps by the document's width, not the viewport's: side by side when there is room. -->
+    <div class="mt-2 flex flex-wrap items-start gap-2" data-chart-node-panel="">
+      {#if showDataGrid}
+        <div class="min-w-0 flex-[1_1_20rem] overflow-x-auto">
+          <ChartDataGrid controller={view.controller} />
+        </div>
+      {/if}
+      <ChartInspector controller={view.controller} class="max-h-96 min-w-0 flex-[1_1_16rem] overflow-y-auto rounded-md border border-border p-3" />
+    </div>
+  {/if}
+</div>

package/dist/chart-node/ChartNodeView.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ChartNodeViewState } from '@pixerate/editor';
+import type { ChartTheme } from '@pixerate/editor/chart';
+interface Props {
+    /** What the editor's `chart` node passes (see `ChartNodeViewState`). */
+    view: ChartNodeViewState;
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+}
+declare const ChartNodeView: import("svelte").Component<Props, {}, "">;
+type ChartNodeView = ReturnType<typeof ChartNodeView>;
+export default ChartNodeView;
+//# sourceMappingURL=ChartNodeView.svelte.d.ts.map

package/dist/chart-node/ChartNodeView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartNodeView.svelte.d.ts","sourceRoot":"","sources":["../../src/chart-node/ChartNodeView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOvD,UAAU,KAAK;IACb,wEAAwE;IACxE,IAAI,EAAE,kBAAkB,CAAC;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAqDH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/chart-node/createChartNodeView.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Component } from "svelte";
+import type { ChartNodeViewMount, ChartNodeViewState } from "@pixerate/editor";
+import type { ChartTheme } from "@pixerate/editor/chart";
+export interface SvelteChartNodeViewOptions {
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+    /** Draw something else for each chart (default `ChartNodeView`; it receives `view`). */
+    component?: Component<{
+        view: ChartNodeViewState;
+        theme?: Partial<ChartTheme>;
+        showDataGrid?: boolean;
+    }>;
+}
+/**
+ * The `nodeView` for the core `chart` node, mounting `ChartNodeView` into each chart:
+ * `createRichTextPreset({ chart: { nodeView: createSvelteChartNodeView() } })`.
+ */
+export declare function createSvelteChartNodeView(options?: SvelteChartNodeViewOptions): ChartNodeViewMount;
+//# sourceMappingURL=createChartNodeView.svelte.d.ts.map

package/dist/chart-node/createChartNodeView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createChartNodeView.svelte.d.ts","sourceRoot":"","sources":["../../src/chart-node/createChartNodeView.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGzD,MAAM,WAAW,0BAA0B;IACzC,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wFAAwF;IACxF,SAAS,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,kBAAkB,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1G;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,0BAA+B,GAAG,kBAAkB,CAqBtG"}

package/dist/chart-node/createChartNodeView.svelte.js

@@ -0,0 +1,28 @@
+import { mount, unmount } from "svelte";
+import ChartNodeView from "./ChartNodeView.svelte";
+/**
+ * The `nodeView` for the core `chart` node, mounting `ChartNodeView` into each chart:
+ * `createRichTextPreset({ chart: { nodeView: createSvelteChartNodeView() } })`.
+ */
+export function createSvelteChartNodeView(options = {}) {
+    const { component = ChartNodeView, theme, showDataGrid } = options;
+    return (dom, state) => {
+        let current = $state.raw(state);
+        const instance = mount(component, {
+            target: dom,
+            props: {
+                get view() {
+                    return current;
+                },
+                theme,
+                showDataGrid,
+            },
+        });
+        return {
+            update: (next) => {
+                current = next;
+            },
+            destroy: () => void unmount(instance),
+        };
+    };
+}