@pixerate/editor-svelte 0.42.0 → 0.43.0

package/dist/chart/ChartCanvas.svelte

@@ -3,19 +3,20 @@
   import {
     CSS_VARIABLE_CHART_THEME,
     chartClientToScene,
-    chartTextBaseline,
-    chartTextTransform,
     describeChartSelection,
     handleChartKey,
     layoutChart,
     startChartPointDrag,
     type ChartController,
-    type ChartMark,
     type ChartPointDrag,
+    type ChartPresence,
+    type ChartScene,
     type ChartTextMeasure,
     type ChartTheme
   } from '@pixerate/editor/chart';
   import { chartStateOf } from './createChartEditor.svelte.js';
+  import ChartMarks from './ChartMarks.svelte';
+  import ChartPresenceLayer from './ChartPresenceLayer.svelte';
 
   interface Props {
     controller: ChartController;
@@ -33,6 +34,10 @@
     measureText?: ChartTextMeasure;
     emptyMessage?: string;
     class?: string;
+    /** Agent cursors to draw over the chart (see `ChartDirector`). */
+    presence?: ChartPresence;
+    /** Receives the scene as drawn (e.g. for `ChartDirector`'s `scene`). */
+    sceneRef?: { current: ChartScene | null };
   }
 
   let {
@@ -44,7 +49,9 @@
     editable = true,
     measureText,
     emptyMessage,
-    class: className = ''
+    class: className = '',
+    presence,
+    sceneRef
   }: Props = $props();
 
   const view = chartStateOf(() => controller);
@@ -64,6 +71,8 @@
     return () => observer.disconnect();
   });
   let drag: ChartPointDrag | null = null;
+  // Frozen while a point is dragged so the axes do not rescale under the pointer.
+  let frozen = $state.raw<{ valueDomain: ChartPointDrag['valueDomain']; valueDomain2: ChartPointDrag['valueDomain2'] | null; xDomain: ChartPointDrag['xDomain'] | null; readout: ChartPointDrag['target'] } | null>(null);
 
   const sceneWidth = $derived((responsive && measured) || width);
   const fullTheme = $derived({ ...CSS_VARIABLE_CHART_THEME, ...theme });
@@ -74,16 +83,21 @@
       theme: fullTheme,
       selection: editable ? view.current.selection : null,
       measureText,
-      emptyMessage
+      emptyMessage,
+      valueDomain: frozen?.valueDomain,
+      valueDomain2: frozen?.valueDomain2,
+      xDomain: frozen?.xDomain,
+      readout: frozen?.readout
     })
   );
+  $effect(() => {
+    if (sceneRef) sceneRef.current = scene;
+  });
   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) {
@@ -92,16 +106,27 @@
     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);
+    if (drag) {
+      frozen = { valueDomain: drag.valueDomain, valueDomain2: drag.valueDomain2 ?? null, xDomain: drag.xDomain ?? null, readout: drag.target };
+      svg?.setPointerCapture?.(e.pointerId);
+    }
   }
   function pointermove(e: PointerEvent) {
-    drag?.move(scenePoint(e));
+    drag?.move(scenePoint(e), { fine: e.altKey, lockAxis: e.shiftKey, noSnap: e.ctrlKey || e.metaKey });
   }
   function endDrag() {
     drag?.end();
     drag = null;
+    frozen = null;
   }
   function keydown(e: KeyboardEvent) {
+    if (drag && e.key === 'Escape') {
+      drag.cancel();
+      drag = null;
+      frozen = null;
+      e.preventDefault();
+      return;
+    }
     if (editable && handleChartKey(controller, scene, e)) e.preventDefault();
   }
 </script>
@@ -123,91 +148,7 @@
     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}
+    <ChartMarks marks={scene.marks} fontFamily={scene.theme.fontFamily} interactive={editable} />
+    {#if presence}<ChartPresenceLayer {presence} />{/if}
   </svg>
 </div>

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

@@ -1,4 +1,4 @@
-import { type ChartController, type ChartTextMeasure, type ChartTheme } from '@pixerate/editor/chart';
+import { type ChartController, type ChartPresence, type ChartScene, 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). */
@@ -15,6 +15,12 @@ interface Props {
     measureText?: ChartTextMeasure;
     emptyMessage?: string;
     class?: string;
+    /** Agent cursors to draw over the chart (see `ChartDirector`). */
+    presence?: ChartPresence;
+    /** Receives the scene as drawn (e.g. for `ChartDirector`'s `scene`). */
+    sceneRef?: {
+        current: ChartScene | null;
+    };
 }
 declare const ChartCanvas: import("svelte").Component<Props, {}, "">;
 type ChartCanvas = ReturnType<typeof ChartCanvas>;

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

@@ -1 +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"}
+{"version":3,"file":"ChartCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartCanvas.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAOH,KAAK,eAAe,EAEpB,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAMhC,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;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wEAAwE;IACxE,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,UAAU,GAAG,IAAI,CAAA;KAAE,CAAC;CAC3C;AA8GH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/chart/ChartInspector.svelte

@@ -3,26 +3,38 @@
   // between server and client renders.
   let nextId = 0;
 
-  export type ChartInspectorSection = 'type' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
+  export type ChartInspectorSection = 'type' | 'style' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
 </script>
 
 <script lang="ts">
   import {
+    CHART_COLOR_SCHEMES,
     CHART_CURVES,
+    CHART_LABEL_POSITIONS,
+    CHART_LAYOUT_PRESETS,
     CHART_LEGEND_POSITIONS,
+    CHART_MARKERS,
     CHART_NUMBER_STYLES,
     CHART_SERIES_TYPES,
     CHART_STACKINGS,
+    CHART_TRENDLINE_TYPES,
     CHART_TYPE_LABELS,
     CHART_TYPES,
+    checkChartColors,
     chartColorInputValue,
+    chartFamily,
     chartSeriesColor,
     chartSeriesType,
+    chartSupportsTrendlines,
+    chartTrendlineName,
     isCartesianChart,
     type ChartAxis,
     type ChartController,
+    type ChartLabelPosition,
+    type ChartMarker,
     type ChartNumberFormat,
-    type ChartSeriesType
+    type ChartSeriesType,
+    type ChartTrendlineType
   } from '@pixerate/editor/chart';
   import ChartCommitInput from './ChartCommitInput.svelte';
   import { chartStateOf } from './createChartEditor.svelte.js';
@@ -44,23 +56,36 @@
   const selectedSeries = $derived(view.current.selectedSeries);
   const show = (section: ChartInspectorSection) => !sections || sections.includes(section);
   const cartesian = $derived(isCartesianChart(spec.type));
+  const family = $derived(chartFamily(spec));
+  const hasAxes = $derived(family === 'cartesian' || family === 'xy' || family === 'waterfall' || family === 'histogram' || family === 'box');
   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 usesSecondary = $derived(family === 'cartesian' && spec.series.some((s) => s.axis === 'secondary' && !s.hidden));
+  const colorCheck = $derived(checkChartColors(spec.series.filter((s) => !s.hidden).map((s) => chartSeriesColor(spec, spec.series.indexOf(s)))));
+  const currentScheme = $derived(CHART_COLOR_SCHEMES.find((c) => c.palette.join() === spec.palette.join())?.id ?? '');
   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 };
+  const keyOf = (axis: 'x' | 'y' | 'y2') => (axis === 'y2' ? 'yAxis2' : `${axis}Axis`);
+  const setAxis = (axis: 'x' | 'y' | 'y2', patch: Partial<ChartAxis>) => controller.setAxis(axis, patch);
+  const setFormat = (axis: 'x' | 'y' | 'y2', value: ChartAxis, patch: Partial<ChartNumberFormat>) => setAxis(axis, { format: { ...value.format, ...patch } });
+  const commitNumber = (axis: 'x' | 'y' | 'y2', key: 'min' | 'max' | 'step') => (text: string) => setAxis(axis, { [key]: text.trim() === '' ? null : Number(text) }).ok;
+  function commitDecimals(axis: 'x' | 'y' | 'y2', value: ChartAxis, text: string) {
+    const format = { ...value.format };
     if (text.trim() === '') delete format.decimals;
     else format.decimals = Number(text);
-    return setAxis('y', { format }).ok;
+    return setAxis(axis, { format }).ok;
   }
+  function commitCode(axis: 'x' | 'y' | 'y2', value: ChartAxis, code: string) {
+    const format = { ...value.format };
+    if (code.trim()) format.code = code.trim();
+    else delete format.code;
+    return setAxis(axis, { format }).ok;
+  }
+  const side = (axis: 'x' | 'y' | 'y2') => (axis === 'x' ? (horizontal ? 'left' : 'bottom') : axis === 'y2' ? (horizontal ? 'top' : 'right') : horizontal ? 'bottom' : 'left');
 </script>
 
 {#snippet toggle(label: string, name: string, checked: boolean, onchange: (checked: boolean) => void)}
@@ -70,39 +95,52 @@
   </label>
 {/snippet}
 
-{#snippet axisSection(axis: 'x' | 'y', value: ChartAxis)}
+{#snippet axisSection(axis: 'x' | 'y' | 'y2', value: ChartAxis, numeric: boolean)}
+  {@const key = keyOf(axis)}
+  {@const valueAxis = axis !== 'x' || numeric}
   <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>
+        {axis === 'x' ? (numeric ? 'X axis' : 'Category axis') : axis === 'y' ? 'Value axis' : 'Secondary axis'}
+        <span class="ml-1 font-normal text-muted-foreground">({side(axis)})</span>
       </h4>
-      {@render toggle('Show', `${axis}Axis.show`, value.show, (v) => setAxis(axis, { show: v }))}
+      {@render toggle('Show', `${key}.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 })} />
+        <ChartCommitInput id="{idPrefix}-{axis}-title" value={value.title} data-option="{key}.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 flex-wrap gap-x-4 gap-y-1">
+      {@render toggle('Grid lines', `${key}.gridlines`, value.gridlines, (v) => setAxis(axis, { gridlines: v }))}
+      {#if axis === 'x' && !numeric}
+        {@render toggle('Dates', 'xAxis.kind', value.kind === 'date', (dates) => setAxis('x', { kind: dates ? 'date' : undefined } as Partial<ChartAxis>))}
+      {/if}
+    </div>
+    {#if valueAxis}
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-{axis}-step" class="{chartLabelClass} w-20 shrink-0">Step</label>
+        <div class="min-w-0 flex-1">
+          <ChartCommitInput id="{idPrefix}-{axis}-step" value={value.step === null ? '' : String(value.step)} placeholder="Auto" inputmode="decimal" data-option="{key}.step" oncommit={commitNumber(axis, 'step')} />
+        </div>
+      </div>
       <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')} />
+          <ChartCommitInput id="{idPrefix}-{axis}-min" value={value.min === null ? '' : String(value.min)} placeholder="Auto" inputmode="decimal" data-option="{key}.min" oncommit={commitNumber(axis, 'min')} />
+          <ChartCommitInput id="{idPrefix}-{axis}-max" value={value.max === null ? '' : String(value.max)} placeholder="Auto" inputmode="decimal" data-option="{key}.max" oncommit={commitNumber(axis, 'max')} />
         </div>
       </div>
       <div class="flex items-center gap-2">
-        <label for="{idPrefix}-y-format" class="{chartLabelClass} w-20 shrink-0">Format</label>
+        <label for="{idPrefix}-{axis}-format" class="{chartLabelClass} w-20 shrink-0">Format</label>
         <div class="flex min-w-0 flex-1 gap-1">
           <select
-            id="{idPrefix}-y-format"
+            id="{idPrefix}-{axis}-format"
             class={chartInputClass}
             value={value.format.style ?? 'number'}
-            data-option="yAxis.format.style"
-            onchange={(e) => setFormat({ style: e.currentTarget.value as ChartNumberFormat['style'] })}
+            data-option="{key}.format.style"
+            onchange={(e) => setFormat(axis, value, { style: e.currentTarget.value as ChartNumberFormat['style'] })}
           >
             {#each CHART_NUMBER_STYLES as style (style)}
               <option value={style}>{cap(style)}</option>
@@ -114,20 +152,26 @@
             aria-label="Decimals"
             title="Decimals"
             inputmode="numeric"
-            data-option="yAxis.format.decimals"
+            data-option="{key}.format.decimals"
             class="{chartInputClass} w-14 shrink-0"
-            oncommit={commitDecimals}
+            oncommit={(text) => commitDecimals(axis, value, text)}
           />
         </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>
+          <label for="{idPrefix}-{axis}-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() })} />
+            <ChartCommitInput id="{idPrefix}-{axis}-currency" value={value.format.currency ?? 'USD'} data-option="{key}.format.currency" oncommit={(c) => void setFormat(axis, value, { currency: c.toUpperCase() })} />
           </div>
         </div>
       {/if}
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-{axis}-code" class="{chartLabelClass} w-20 shrink-0">Code</label>
+        <div class="min-w-0 flex-1">
+          <ChartCommitInput id="{idPrefix}-{axis}-code" value={value.format.code ?? ''} placeholder={'e.g. #,##0.0,,"M"'} data-option="{key}.format.code" oncommit={(code) => commitCode(axis, value, code)} />
+        </div>
+      </div>
     {/if}
   </div>
 {/snippet}
@@ -145,6 +189,33 @@
     </div>
   {/if}
 
+  {#if show('style')}
+    <div class={chartSectionClass} data-section="style">
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-layout" class="{chartLabelClass} w-20 shrink-0">Layout</label>
+        <select id="{idPrefix}-layout" class={chartInputClass} value="" data-option="preset.layout" onchange={(e) => e.currentTarget.value && controller.applyPreset({ layout: e.currentTarget.value })}>
+          <option value="">Quick layout…</option>
+          {#each CHART_LAYOUT_PRESETS as p (p.id)}
+            <option value={p.id} title={p.description}>{p.label}</option>
+          {/each}
+        </select>
+      </div>
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-colors" class="{chartLabelClass} w-20 shrink-0">Colours</label>
+        <select id="{idPrefix}-colors" class={chartInputClass} value={currentScheme} data-option="preset.colors" onchange={(e) => e.currentTarget.value && controller.applyPreset({ colors: e.currentTarget.value })}>
+          <option value="">Custom</option>
+          {#each CHART_COLOR_SCHEMES as c (c.id)}
+            <option value={c.id} title={c.description}>{c.label}</option>
+          {/each}
+        </select>
+      </div>
+      {#if !colorCheck.ok}
+        <p class="text-[11px] leading-snug text-amber-600 dark:text-amber-400" data-chart-color-warning="">{colorCheck.issues[0]}</p>
+      {/if}
+      <button type="button" class={chartButtonClass} data-action="transpose" onclick={() => controller.transpose()}>Switch rows and columns</button>
+    </div>
+  {/if}
+
   {#if show('titles')}
     <div class={chartSectionClass} data-section="titles">
       <div class="flex items-center gap-2">
@@ -191,6 +262,32 @@
             {/each}
           </div>
         </div>
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-gap" class="{chartLabelClass} w-20 shrink-0">Spacing</label>
+          <input
+            id="{idPrefix}-gap"
+            type="range"
+            min="0"
+            max="0.9"
+            step="0.02"
+            value={spec.gapWidth}
+            data-option="gapWidth"
+            class="w-full accent-primary"
+            onpointerdown={() => controller.beginGesture('gapWidth')}
+            onpointerup={() => controller.endGesture()}
+            oninput={(e) => controller.update({ gapWidth: Number(e.currentTarget.value) })}
+          />
+        </div>
+      {/if}
+      {#if spec.dataLabels && hasBars}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-label-position" class="{chartLabelClass} w-20 shrink-0">Labels</label>
+          <select id="{idPrefix}-label-position" class={chartInputClass} value={spec.labelPosition} data-option="labelPosition" onchange={(e) => controller.update({ labelPosition: e.currentTarget.value as ChartLabelPosition })}>
+            {#each CHART_LABEL_POSITIONS as p (p)}
+              <option value={p}>{cap(p)}</option>
+            {/each}
+          </select>
+        </div>
       {/if}
       {#if hasLines}
         <div class="flex items-center gap-2">
@@ -202,6 +299,14 @@
           </select>
         </div>
       {/if}
+      {#if spec.type === 'histogram'}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-bins" class="{chartLabelClass} w-20 shrink-0">Bins</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-bins" value={spec.bins === null ? '' : String(spec.bins)} placeholder="Auto" inputmode="numeric" data-option="bins" oncommit={(text) => controller.update({ bins: text.trim() === '' ? null : Number(text) }).ok} />
+          </div>
+        </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>
@@ -221,6 +326,9 @@
         </div>
       {/if}
       <div class="flex flex-wrap gap-x-4 gap-y-1">
+        {#if spec.type === 'waterfall'}
+          {@render toggle('Total bar', 'showTotal', spec.showTotal, (showTotal) => controller.update({ showTotal }))}
+        {/if}
         {#if hasLines}
           {@render toggle('Points', 'points', spec.points, (points) => controller.update({ points }))}
         {/if}
@@ -247,13 +355,19 @@
     </div>
   {/if}
 
-  {#if show('axes') && cartesian}
-    {@render axisSection('x', spec.xAxis)}
-    {@render axisSection('y', spec.yAxis)}
+  {#if show('axes') && hasAxes}
+    {#if family !== 'box' && family !== 'histogram'}
+      {@render axisSection('x', spec.xAxis, family === 'xy')}
+    {/if}
+    {@render axisSection('y', spec.yAxis, false)}
+    {#if usesSecondary}
+      {@render axisSection('y2', spec.yAxis2, false)}
+    {/if}
   {/if}
 
   {#if show('series') && selectedSeries}
     {@const series = selectedSeries}
+    {@const drawnAs = chartSeriesType(spec, series)}
     <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">
@@ -297,8 +411,51 @@
           </select>
         </div>
       {/if}
+      {#if (cartesian || family === 'xy') && (drawnAs === 'line' || drawnAs === 'area' || drawnAs === 'scatter')}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-series-marker" class="{chartLabelClass} w-20 shrink-0">Marker</label>
+          <select
+            id="{idPrefix}-series-marker"
+            class={chartInputClass}
+            value={series.marker ?? ''}
+            data-option="series.marker"
+            onchange={(e) => controller.updateSeries(series.id, { marker: (e.currentTarget.value || null) as ChartMarker | null })}
+          >
+            <option value="">Default</option>
+            {#each CHART_MARKERS as m (m)}
+              <option value={m}>{cap(m)}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+      {#if chartSupportsTrendlines(spec.type, spec.stacking)}
+        <div class="space-y-1" data-section="trendlines">
+          {#each series.trendlines ?? [] as t, i (i)}
+            <div class="flex items-center gap-1" data-trendline={i}>
+              <span class="flex-1 truncate text-muted-foreground">{chartTrendlineName(t, series.name)}</span>
+              {@render toggle('R²', `trendline.${i}.showR2`, !!t.showR2, (showR2) => controller.updateTrendline(series.id, i, { showR2 }))}
+              <button type="button" class={chartButtonClass} aria-label="Delete trendline" data-action="trendline-delete" onclick={() => controller.removeTrendline(series.id, i)}>×</button>
+            </div>
+          {/each}
+          <select
+            class={chartInputClass}
+            value=""
+            aria-label="Add trendline"
+            data-option="trendline.add"
+            onchange={(e) => e.currentTarget.value && controller.addTrendline(series.id, { type: e.currentTarget.value as ChartTrendlineType })}
+          >
+            <option value="">Add trendline…</option>
+            {#each CHART_TRENDLINE_TYPES as t (t)}
+              <option value={t}>{cap(t.replace('-', ' '))}</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 }))}
+        {#if family === 'cartesian'}
+          {@render toggle('Secondary axis', 'series.axis', series.axis === 'secondary', (secondary) => controller.updateSeries(series.id, { axis: secondary ? 'secondary' : null }))}
+        {/if}
         <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

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

@@ -1,4 +1,4 @@
-export type ChartInspectorSection = 'type' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
+export type ChartInspectorSection = 'type' | 'style' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
 import { type ChartController } from '@pixerate/editor/chart';
 interface Props {
     controller: ChartController;

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

@@ -1 +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"}
+{"version":3,"file":"ChartInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartInspector.svelte.ts"],"names":[],"mappings":"AAOE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAG7G,OAAO,EAsBH,KAAK,eAAe,EAMrB,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;AAoWH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -115,14 +115,14 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.46.0"
+    "@pixerate/editor": "0.47.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@tiptap/core": "^2.11.5",
     "@tiptap/pm": "^2.11.5",
     "@xyflow/svelte": "^1.6.0",
-    "svelte": "^5.0.0"
+    "svelte": "^5.57.2"
   },
   "peerDependenciesMeta": {
     "@dagrejs/dagre": {
@@ -139,8 +139,8 @@
     "@tiptap/core": "^2.11.5",
     "@tiptap/pm": "^2.11.5",
     "@types/dagre": "^0.7.52",
-    "@xyflow/svelte": "^1.6.6",
-    "svelte": "^5.0.0",
+    "@xyflow/svelte": "^1.7.0",
+    "svelte": "^5.57.2",
     "svelte-check": "^4.7.6",
     "typescript": "^5.7.3",
     "vitest": "^4.1.11"