@pixerate/editor-svelte 0.45.0 → 0.46.0

package/dist/chart/ChartEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
-  import { describeChartSelection, type ChartController } from '@pixerate/editor/chart';
+  import { describeChartSelection, downloadChartPng, type ChartController, type DownloadChartPngOptions } from '@pixerate/editor/chart';
   import ChartCanvas from './ChartCanvas.svelte';
   import ChartDataGrid from './ChartDataGrid.svelte';
   import ChartInspector from './ChartInspector.svelte';
@@ -13,31 +13,42 @@
     showInspector?: boolean;
     /** The data grid under the chart (default `true`). */
     showDataGrid?: boolean;
-    /** Undo / redo and the selection readout (default `true`). */
+    /** Undo / redo, Download PNG and the selection readout (default `true`). */
     showToolbar?: boolean;
+    /** Size, theme, scale and file name for the toolbar's Download PNG (default 800 × 450, light theme). */
+    pngOptions?: DownloadChartPngOptions;
     /** Chart height in pixels (default 380). */
     height?: number;
     canvasProps?: Omit<ComponentProps<typeof ChartCanvas>, 'controller' | 'height'>;
     class?: string;
   }
 
-  let { controller, showInspector = true, showDataGrid = true, showToolbar = true, height = 380, canvasProps = {}, class: className = '' }: Props = $props();
+  let { controller, showInspector = true, showDataGrid = true, showToolbar = true, pngOptions, height = 380, canvasProps = {}, class: className = '' }: Props = $props();
 
   const view = chartStateOf(() => controller);
-  const state = $derived(view.current);
+  const chart = $derived(view.current);
+  let pngError = $state<string | null>(null);
+  function downloadPng() {
+    pngError = null;
+    downloadChartPng(controller.toJSON(), pngOptions).catch((error: unknown) => (pngError = error instanceof Error ? error.message : String(error)));
+  }
 </script>
 
 <div class="flex flex-col gap-2 {className}" data-chart-editor="">
   {#if showToolbar}
     <div class="flex items-center gap-1" data-chart-toolbar="">
-      <button type="button" class={chartButtonClass} disabled={!state.canUndo} title={state.undoLabel ? `Undo ${state.undoLabel}` : 'Undo'} data-action="undo" onclick={() => controller.undo()}>Undo</button>
-      <button type="button" class={chartButtonClass} disabled={!state.canRedo} title={state.redoLabel ? `Redo ${state.redoLabel}` : 'Redo'} data-action="redo" onclick={() => controller.redo()}>Redo</button>
-      <span class="ml-2 truncate text-xs text-muted-foreground" data-chart-selection="" aria-live="polite">{describeChartSelection(controller, state.selection)}</span>
+      <button type="button" class={chartButtonClass} disabled={!chart.canUndo} title={chart.undoLabel ? `Undo ${chart.undoLabel}` : 'Undo'} data-action="undo" onclick={() => controller.undo()}>Undo</button>
+      <button type="button" class={chartButtonClass} disabled={!chart.canRedo} title={chart.redoLabel ? `Redo ${chart.redoLabel}` : 'Redo'} data-action="redo" onclick={() => controller.redo()}>Redo</button>
+      <button type="button" class={chartButtonClass} title="Download the chart as a PNG image" data-action="download-png" onclick={downloadPng}>Download PNG</button>
+      <span class="ml-2 truncate text-xs text-muted-foreground" data-chart-selection="" aria-live="polite">{describeChartSelection(controller, chart.selection)}</span>
     </div>
   {/if}
-  {#if state.issues.length > 0}
+  {#if pngError}
+    <p role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive" data-chart-png-error="">{pngError}</p>
+  {/if}
+  {#if chart.issues.length > 0}
     <p role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive" data-chart-issues="">
-      {state.issues.map((i) => i.message).join(' ')}
+      {chart.issues.map((i) => i.message).join(' ')}
     </p>
   {/if}
   <div class="flex min-h-0 flex-col gap-2 md:flex-row">

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'svelte';
-import { type ChartController } from '@pixerate/editor/chart';
+import { type ChartController, type DownloadChartPngOptions } from '@pixerate/editor/chart';
 import ChartCanvas from './ChartCanvas.svelte';
 interface Props {
     controller: ChartController;
@@ -7,8 +7,10 @@ interface Props {
     showInspector?: boolean;
     /** The data grid under the chart (default `true`). */
     showDataGrid?: boolean;
-    /** Undo / redo and the selection readout (default `true`). */
+    /** Undo / redo, Download PNG and the selection readout (default `true`). */
     showToolbar?: boolean;
+    /** Size, theme, scale and file name for the toolbar's Download PNG (default 800 × 450, light theme). */
+    pngOptions?: DownloadChartPngOptions;
     /** Chart height in pixels (default 380). */
     height?: number;
     canvasProps?: Omit<ComponentProps<typeof ChartCanvas>, 'controller' | 'height'>;

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

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

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

@@ -36,11 +36,16 @@ 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;
+/** `useChartToolProvider` options: `rasterize` defaults to a canvas rasterizer in the browser (`false` turns PNG off). */
+export type ChartToolProviderHookOptions = Omit<ChartToolProviderOptions, "rasterize"> & {
+    rasterize?: ChartToolProviderOptions["rasterize"] | false;
+};
 /**
  * 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.
+ * lifetime of the calling component. Pass a getter to follow a changing registry. In the
+ * browser, `render_chart { format: "png" }` works out of the box (`createChartRasterizer`).
  */
-export declare function useChartToolProvider(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: ChartController, options?: ChartToolProviderOptions): void;
+export declare function useChartToolProvider(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: ChartController, options?: ChartToolProviderHookOptions): 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

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,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"}
+{"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,EAKb,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,0HAA0H;AAC1H,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC,GAAG,KAAK,CAAA;CAAE,CAAC;AAEvJ;;;;GAIG;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,4BAAiC,GACzC,IAAI,CAON;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, ChartDirector, ChartPresence, createChartCommands, createChartToolProvider, layoutChart, } from "@pixerate/editor/chart";
+import { ChartController, ChartDirector, ChartPresence, createChartCommands, createChartRasterizer, 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.
@@ -61,14 +61,16 @@ export function useChartCommands(registry, 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.
+ * lifetime of the calling component. Pass a getter to follow a changing registry. In the
+ * browser, `render_chart { format: "png" }` works out of the box (`createChartRasterizer`).
  */
 export function useChartToolProvider(registry, controller, options = {}) {
     $effect(() => {
         const target = typeof registry === "function" ? registry() : registry;
         if (!target)
             return;
-        return target.register(createChartToolProvider(controller, options));
+        const { rasterize, ...rest } = options;
+        return target.register(createChartToolProvider(controller, { ...rest, rasterize: rasterize === false ? undefined : (rasterize ?? createChartRasterizer()) }));
     });
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -115,7 +115,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.50.0"
+    "@pixerate/editor": "0.51.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",