@pixerate/editor-svelte 0.121.0 → 0.122.0

package/dist/chart/ChartDataGrid.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { chartColorInputValue, chartSeriesColor, chartTreeFromSeries, formatChartNumber, type ChartController } from '@pixerate/editor/chart';
   import ChartCommitInput from './ChartCommitInput.svelte';
+  import ChartLinksGrid from './ChartLinksGrid.svelte';
   import ChartTreeGrid from './ChartTreeGrid.svelte';
   import { chartStateOf } from './createChartEditor.svelte.js';
   import { chartButtonClass, chartCellClass, chartIconButtonClass, chartInputClass } from './styles.js';
@@ -32,7 +33,9 @@
   };
 </script>
 
-{#if spec.tree.length}
+{#if spec.links.length || spec.type === 'sankey'}
+  <ChartLinksGrid {controller} {readOnly} class={className} />
+{:else if spec.tree.length}
   <ChartTreeGrid {controller} {readOnly} class={className} />
 {:else}
 <div class="overflow-auto rounded-md border border-border {className}" data-chart-grid="">

package/dist/chart/ChartInspector.svelte

@@ -12,6 +12,7 @@
     CHART_COLOR_SCHEMES,
     CHART_CURVES,
     CHART_RADAR_GRATICULES,
+    CHART_SANKEY_LINK_COLORS,
     CHART_ERROR_BAR_DIRECTIONS,
     CHART_ERROR_BAR_LABELS,
     CHART_ERROR_BAR_TYPES,
@@ -423,6 +424,16 @@
           </div>
         </div>
       {/if}
+      {#if spec.type === 'sankey'}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-sankey-color" class="{chartLabelClass} w-20 shrink-0">Flows</label>
+          <select id="{idPrefix}-sankey-color" class={chartInputClass} value={spec.sankeyLinkColor} data-option="sankeyLinkColor" onchange={(e) => controller.update({ sankeyLinkColor: e.currentTarget.value as (typeof CHART_SANKEY_LINK_COLORS)[number] })}>
+            {#each CHART_SANKEY_LINK_COLORS as c (c)}
+              <option value={c}>{c === 'source' ? 'Coloured by source' : c === 'target' ? 'Coloured by target' : 'Grey'}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
       {#if spec.type === 'sunburst'}
         <div class="flex items-center gap-2">
           <label for="{idPrefix}-sunburst-label" class="{chartLabelClass} w-20 shrink-0">Caption</label>

package/dist/chart/ChartLinksGrid.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { addChartLink, setChartLinkField, type ChartController } from '@pixerate/editor/chart';
+  import ChartCommitInput from './ChartCommitInput.svelte';
+  import { chartStateOf } from './createChartEditor.svelte.js';
+  import { chartButtonClass, chartCellClass, chartIconButtonClass } from './styles.js';
+
+  interface Props {
+    controller: ChartController;
+    /** Hide the add / delete buttons. */
+    readOnly?: boolean;
+    class?: string;
+  }
+
+  let { controller, readOnly = false, class: className = '' }: Props = $props();
+
+  const view = chartStateOf(() => controller);
+  const links = $derived(view.current.spec.links);
+  const commit = (next: unknown) => controller.setLinks(next).ok;
+  const fields = ['source', 'target'] as const;
+</script>
+
+<!-- Flows as a table: source, target and value per row. Edits are checked as a whole (no loops, no repeated pairs). -->
+<div class="overflow-auto rounded-md border border-border {className}" data-chart-grid="" data-chart-links-grid="">
+  <table class="w-full border-collapse text-xs">
+    <thead class="bg-muted/50">
+      <tr>
+        <th class="border-b border-r border-border px-2 py-1 text-left font-medium text-muted-foreground">Source</th>
+        <th class="border-b border-r border-border px-2 py-1 text-left font-medium text-muted-foreground">Target</th>
+        <th class="border-b border-r border-border px-2 py-1 text-right font-medium text-muted-foreground">Value</th>
+        {#if !readOnly}<th class="w-8 border-b border-border"></th>{/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#each links as link, i (i)}
+        <tr data-link-row={i}>
+          {#each fields as field (field)}
+            <td class="border-b border-r border-border p-0">
+              <ChartCommitInput value={link[field]} aria-label="{field === 'source' ? 'Source' : 'Target'} of flow {i + 1}" data-link-cell="{i}:{field}" readonly={readOnly} oncommit={(text) => commit(setChartLinkField(links, i, field, text))} class="{chartCellClass} text-left" />
+            </td>
+          {/each}
+          <td class="border-b border-r border-border p-0">
+            <ChartCommitInput value={String(link.value)} inputmode="decimal" aria-label="Value of {link.source} → {link.target}" data-link-cell="{i}:value" readonly={readOnly} oncommit={(text) => commit(setChartLinkField(links, i, 'value', text))} class={chartCellClass} />
+          </td>
+          {#if !readOnly}
+            <td class="border-b border-border px-1">
+              <button type="button" class={chartIconButtonClass} title="Delete flow" aria-label="Delete {link.source} → {link.target}" data-action="link-remove" onclick={() => controller.removeLink(i)}>×</button>
+            </td>
+          {/if}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  {#if !readOnly}
+    <div class="flex flex-wrap gap-1 p-1">
+      <button type="button" class="{chartButtonClass} h-6 border-dashed" data-action="link-add" onclick={() => commit(addChartLink(links))}>+ Add flow</button>
+      <span class="flex-1"></span>
+      {#if links.length}
+        <button type="button" class="{chartButtonClass} h-6" data-action="links-clear" title="Keep how much passes through each node as plain data" onclick={() => controller.setLinks([])}>Remove flows</button>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import { type ChartController } from '@pixerate/editor/chart';
+interface Props {
+    controller: ChartController;
+    /** Hide the add / delete buttons. */
+    readOnly?: boolean;
+    class?: string;
+}
+declare const ChartLinksGrid: import("svelte").Component<Props, {}, "">;
+type ChartLinksGrid = ReturnType<typeof ChartLinksGrid>;
+export default ChartLinksGrid;

package/dist/chart/index.d.ts

@@ -9,6 +9,7 @@ export { default as ChartEditor } from "./ChartEditor.svelte";
 export { default as ChartCanvas } from "./ChartCanvas.svelte";
 export { default as ChartDataGrid } from "./ChartDataGrid.svelte";
 export { default as ChartTreeGrid } from "./ChartTreeGrid.svelte";
+export { default as ChartLinksGrid } from "./ChartLinksGrid.svelte";
 export { default as ChartInspector } from "./ChartInspector.svelte";
 export { default as ChartCommitInput } from "./ChartCommitInput.svelte";
 export { default as ChartMarks } from "./ChartMarks.svelte";

package/dist/chart/index.js

@@ -2,6 +2,7 @@ export { default as ChartEditor } from "./ChartEditor.svelte";
 export { default as ChartCanvas } from "./ChartCanvas.svelte";
 export { default as ChartDataGrid } from "./ChartDataGrid.svelte";
 export { default as ChartTreeGrid } from "./ChartTreeGrid.svelte";
+export { default as ChartLinksGrid } from "./ChartLinksGrid.svelte";
 export { default as ChartInspector } from "./ChartInspector.svelte";
 export { default as ChartCommitInput } from "./ChartCommitInput.svelte";
 export { default as ChartMarks } from "./ChartMarks.svelte";

package/dist/index.d.ts

@@ -49,3 +49,4 @@ export * from "./generation/index.js";
 export * from "./find-replace/index.js";
 export * from "./tables/index.js";
 export * from "./chart-node/index.js";
+export * from "./style/index.js";

package/dist/index.js

@@ -29,3 +29,4 @@ export * from "./generation/index.js";
 export * from "./find-replace/index.js";
 export * from "./tables/index.js";
 export * from "./chart-node/index.js";
+export * from "./style/index.js";

package/dist/persistence/editorAutosave.svelte.d.ts

@@ -1,8 +1,14 @@
-import { type EditorDocument, type EditorDocumentFile, type LoadReport } from "@pixerate/editor/persistence";
+import { type EditorAssetGarbageOptions, type EditorDocument, type EditorDocumentFile, type LoadReport } from "@pixerate/editor/persistence";
 import { type CreateAutosaveOptions, type SvelteAutosave } from "./autosave.svelte.js";
 export interface CreateEditorAutosaveOptions extends Omit<CreateAutosaveOptions<EditorDocumentFile>, "key" | "getSnapshot" | "serialize" | "deserialize" | "history"> {
     /** Snapshot key (default the document's `kind`). */
     key?: string;
+    /**
+     * For documents with `assets`: after `markClean` or `discard` retire a snapshot, delete the
+     * stored assets nothing refers to any more (`collectEditorAssetGarbage`, best effort, keeping
+     * the assets the document uses now; default `true`). Needs `storage.keys`; `false` turns it off.
+     */
+    collectAssetGarbage?: boolean | Omit<EditorAssetGarbageOptions, "dryRun" | "only">;
 }
 export interface SvelteEditorAutosave extends Omit<SvelteAutosave<EditorDocumentFile>, "restore"> {
     /** Loads the recovered snapshot into the document and starts autosaving. */
@@ -14,4 +20,4 @@ export interface SvelteEditorAutosave extends Omit<SvelteAutosave<EditorDocument
  * `EditorDocumentFile` after each change, and `restore` loads a recovered
  * snapshot straight into the editor. Status and recovery stay reactive.
  */
-export declare function createEditorAutosave(doc: EditorDocument, options: CreateEditorAutosaveOptions): SvelteEditorAutosave;
+export declare function createEditorAutosave(doc: EditorDocument, { collectAssetGarbage, ...options }: CreateEditorAutosaveOptions): SvelteEditorAutosave;

package/dist/persistence/editorAutosave.svelte.js

@@ -1,4 +1,4 @@
-import { parseEditorDocument, toEditorDocumentFile, withEditorAssets, } from "@pixerate/editor/persistence";
+import { collectRetiredEditorAssets, parseEditorDocument, toEditorDocumentFile, withEditorAssets, } from "@pixerate/editor/persistence";
 import { createAutosave } from "./autosave.svelte.js";
 /**
  * `createAutosave` for any editor's `EditorDocument` (e.g.
@@ -6,7 +6,9 @@ import { createAutosave } from "./autosave.svelte.js";
  * `EditorDocumentFile` after each change, and `restore` loads a recovered
  * snapshot straight into the editor. Status and recovery stay reactive.
  */
-export function createEditorAutosave(doc, options) {
+export function createEditorAutosave(doc, { collectAssetGarbage, ...options }) {
+    // Retiring a snapshot can leave assets nothing refers to any more.
+    const collect = () => collectRetiredEditorAssets(options.storage, doc, collectAssetGarbage);
     const autosave = createAutosave({
         ...options,
         // Image and paint documents hold asset references: their bytes are saved and read with them.
@@ -30,10 +32,16 @@ export function createEditorAutosave(doc, options) {
             const snapshot = autosave.restore();
             return snapshot ? doc.loadDocument(snapshot, { history: "reset" }) : undefined;
         },
-        discard: () => autosave.discard(),
+        async discard() {
+            await autosave.discard();
+            await collect();
+        },
         ready: () => autosave.ready(),
         flushNow: () => autosave.flushNow(),
-        markClean: () => autosave.markClean(),
+        async markClean() {
+            await autosave.markClean();
+            await collect();
+        },
         notifyChange: () => autosave.notifyChange(),
         checked: autosave.checked,
         controller: autosave.controller,

package/dist/style/StyleFindings.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { StyleCheckReport, StyleFinding } from "@pixerate/editor/tools";
+
+  interface Props {
+    /** A check report (`useStyleFindings(...).report`, or a `check_*_style` tool result). Renders nothing while `null`. */
+    report: StyleCheckReport | null | undefined;
+    /** Called when a finding with a `target` is clicked, e.g. to select that series in the chart. */
+    onSelect?: (finding: StyleFinding) => void;
+    /** Heading (default "House style"). */
+    title?: string;
+    class?: string;
+  }
+
+  let { report, onSelect, title = "House style", class: className = "" }: Props = $props();
+
+  const SEVERITY_CLASS: Record<StyleFinding["severity"], string> = {
+    error: "text-destructive",
+    warning: "text-amber-600",
+    info: "text-muted-foreground",
+  };
+</script>
+
+{#snippet body(finding: StyleFinding)}
+  <span data-style-severity={finding.severity} class="shrink-0 font-semibold uppercase text-[10px] {SEVERITY_CLASS[finding.severity]}">
+    {finding.severity}
+  </span>
+  <span class="flex min-w-0 flex-col">
+    <span data-style-message="">{finding.message}</span>
+    <span class="text-[10px] text-muted-foreground"><code>{finding.check}</code>{#if finding.layer} · {finding.layer}{/if}</span>
+  </span>
+{/snippet}
+
+{#if report}
+  <section data-style-findings="" aria-label={title} class="flex flex-col gap-1.5 text-xs text-foreground {className}">
+    <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
+    {#if report.findings.length > 0}
+      <ul class="flex flex-col gap-1">
+        {#each report.findings as finding, i (`${finding.check}-${i}`)}
+          <li data-style-finding={finding.check}>
+            {#if finding.target !== undefined && onSelect}
+              <button
+                type="button"
+                class="flex w-full items-start gap-2 rounded border border-border px-2 py-1 text-left hover:bg-muted"
+                onclick={() => onSelect?.(finding)}
+              >
+                {@render body(finding)}
+              </button>
+            {:else}
+              <div class="flex items-start gap-2 rounded border border-border px-2 py-1">{@render body(finding)}</div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if report.findings.length === 0 && report.ran.length > 0}
+      <p data-style-clear="" class="text-emerald-600">
+        All clear: {report.ran.length} {report.ran.length === 1 ? "check" : "checks"} passed.
+      </p>
+    {/if}
+    {#if report.findings.length === 0 && report.ran.length === 0 && report.skipped.length === 0}
+      <p class="text-muted-foreground">No house-style checks apply.</p>
+    {/if}
+    {#if report.skipped.length > 0}
+      <ul data-style-skipped="" aria-label="Skipped checks" class="flex flex-col gap-0.5 text-muted-foreground">
+        {#each report.skipped as s (s.check)}
+          <li data-style-skipped-check={s.check}>Skipped <code>{s.check}</code>: {s.reason}</li>
+        {/each}
+      </ul>
+    {/if}
+  </section>
+{/if}

package/dist/style/StyleFindings.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { StyleCheckReport, StyleFinding } from "@pixerate/editor/tools";
+interface Props {
+    /** A check report (`useStyleFindings(...).report`, or a `check_*_style` tool result). Renders nothing while `null`. */
+    report: StyleCheckReport | null | undefined;
+    /** Called when a finding with a `target` is clicked, e.g. to select that series in the chart. */
+    onSelect?: (finding: StyleFinding) => void;
+    /** Heading (default "House style"). */
+    title?: string;
+    class?: string;
+}
+declare const StyleFindings: import("svelte").Component<Props, {}, "">;
+type StyleFindings = ReturnType<typeof StyleFindings>;
+export default StyleFindings;

package/dist/style/index.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from "svelte";
+import type StyleFindingsComponent from "./StyleFindings.svelte";
+export { default as StyleFindings } from "./StyleFindings.svelte";
+export * from "./style.svelte.js";
+export type StyleFindingsProps = ComponentProps<typeof StyleFindingsComponent>;

package/dist/style/index.js

@@ -0,0 +1,2 @@
+export { default as StyleFindings } from "./StyleFindings.svelte";
+export * from "./style.svelte.js";

package/dist/style/style.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ResolvedStyle, StyleCheckReport, StyleResolver } from "@pixerate/editor/tools";
+type MaybeGetter<T> = T | (() => T);
+export interface SvelteStyle {
+    /** The resolved house style for the domain, or `null` before the first resolve (or without a resolver) (reactive). */
+    readonly style: ResolvedStyle | null;
+    /** Why the last resolve failed (e.g. an unknown domain), or `null` (reactive). */
+    readonly error: string | null;
+}
+export interface SvelteStyleFindings extends SvelteStyle {
+    /** The last check report for `state`, or `null` before the first check (or without a resolver) (reactive). */
+    readonly report: StyleCheckReport | null;
+}
+/**
+ * Svelte 5 rune: the house style for one domain (`chart`, `tokens`, ...), merged across the
+ * resolver's layers; re-resolves when a style store or the token source changes. Call it during
+ * component initialisation; pass getters to react to changes. Parity with React's `useStyle`.
+ */
+export declare function useStyle(styles: MaybeGetter<StyleResolver | null | undefined>, domain: MaybeGetter<string>): SvelteStyle;
+/**
+ * Svelte 5 rune: runs the domain's house-style checks against `subject`, the domain's state (e.g. a chart spec),
+ * whenever the value a getter returns changes by reference, the domain or resolver changes, or
+ * the resolver notifies. Results of older runs that settle late are ignored. Feed `report` to
+ * `<StyleFindings>`. Call it during component initialisation. Parity with React's `useStyleFindings`.
+ */
+export declare function useStyleFindings(styles: MaybeGetter<StyleResolver | null | undefined>, domain: MaybeGetter<string>, subject: MaybeGetter<unknown>): SvelteStyleFindings;
+export {};

package/dist/style/style.svelte.js

@@ -0,0 +1,89 @@
+const read = (value) => (typeof value === "function" ? value() : value);
+const message = (error) => (error instanceof Error ? error.message : String(error));
+/**
+ * Runs `run` in an effect (re-run when anything `inputs` reads changes) and whenever the
+ * resolver notifies, delivering only the newest result.
+ */
+function resolverTask(inputs, run, deliver) {
+    $effect(() => {
+        const { styles, input } = inputs();
+        if (!styles) {
+            deliver({ value: null, error: null });
+            return;
+        }
+        let latest = 0;
+        let active = true;
+        const go = () => {
+            const call = ++latest;
+            run(styles, input).then((value) => {
+                if (active && call === latest)
+                    deliver({ value, error: null });
+            }, (error) => {
+                if (active && call === latest)
+                    deliver({ value: null, error: message(error) });
+            });
+        };
+        go();
+        const unsubscribe = styles.subscribe(go);
+        return () => {
+            active = false;
+            unsubscribe();
+        };
+    });
+}
+/**
+ * Svelte 5 rune: the house style for one domain (`chart`, `tokens`, ...), merged across the
+ * resolver's layers; re-resolves when a style store or the token source changes. Call it during
+ * component initialisation; pass getters to react to changes. Parity with React's `useStyle`.
+ */
+export function useStyle(styles, domain) {
+    let style = $state.raw(null);
+    let error = $state.raw(null);
+    resolverTask(() => ({ styles: read(styles), input: read(domain) }), (s, d) => s.resolve(d), (result) => {
+        style = result.value;
+        error = result.error;
+    });
+    return {
+        get style() {
+            return style;
+        },
+        get error() {
+            return error;
+        },
+    };
+}
+/**
+ * Svelte 5 rune: runs the domain's house-style checks against `subject`, the domain's state (e.g. a chart spec),
+ * whenever the value a getter returns changes by reference, the domain or resolver changes, or
+ * the resolver notifies. Results of older runs that settle late are ignored. Feed `report` to
+ * `<StyleFindings>`. Call it during component initialisation. Parity with React's `useStyleFindings`.
+ */
+export function useStyleFindings(styles, domain, subject) {
+    let report = $state.raw(null);
+    let style = $state.raw(null);
+    let error = $state.raw(null);
+    resolverTask(() => ({ styles: read(styles), input: { domain: read(domain), value: read(subject) } }), (s, { domain: d, value }) => s.check(d, value), (result) => {
+        if (!result.value) {
+            report = null;
+            style = null;
+            error = result.error;
+        }
+        else {
+            const { style: resolved, ...rest } = result.value;
+            report = rest;
+            style = resolved;
+            error = null;
+        }
+    });
+    return {
+        get report() {
+            return report;
+        },
+        get style() {
+            return style;
+        },
+        get error() {
+            return error;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.121.0",
+  "version": "0.122.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -168,7 +168,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.164.0"
+    "@pixerate/editor": "0.165.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",