@pixerate/editor-svelte 0.119.1 → 0.121.0

package/README.md

@@ -89,7 +89,7 @@ Tables are on by default in `createRichTextPreset` (`table: false` turns them of
 | `@pixerate/editor-svelte/parameters` | `ParametersPanel` (a whole schema with groups, presets, undo / reset / randomize and keyframe diamonds), `createParameters` (call `destroy()` when done), `useParameterCommands`, and the field controls `ParameterFieldControl`, `ParameterSlider`, `ParameterToggle`, `ParameterSelect`, `ParameterColor`, `ParameterVector`, `ParameterImage`, `ParameterText`, `KeyframeDiamond` over `@pixerate/editor/parameters` (see [the parameters guide](../../docs/parameters.md)) |
 | `@pixerate/editor-svelte/color` | `ColorPicker` (interactive hex/rgb/hsl/oklch picker with alpha, swatches, eyedropper, recent history), `DualColorPicker` (dual light/dark mode color picker with theme preview and switch), `createColorScheme` / `resolvedColor` (the active scheme from the system, a root attribute or an override) |
 | `@pixerate/editor-svelte/gradient` | `GradientEditor` (interactive stops bar, midpoints, presets, angle dial, type selector, OKLab/OKLCH/sRGB/linear-sRGB interpolation, CSS output), `FillPicker` (controlled solid-or-gradient fill picker), `createGradientController` |
-| `@pixerate/editor-svelte/canvas` | Runes for `@xyflow/svelte`: `createCanvasGraph`, `createCanvasClipboard`, `createCanvasDocking`, `createCanvasShortcuts`, `createCanvasInteractions`, `createCanvasExplosion`, `createCanvasNodeSync`, `createCanvasMultiDrag`, `createStreamingCanvas`, `AgentPresenceLayer`, `FloatingHorizontalScrollbar`, plus layout helpers |
+| `@pixerate/editor-svelte/canvas` | Runes for `@xyflow/svelte`: `createCanvasGraph`, `createCanvasClipboard`, `createCanvasDocking`, `createCanvasShortcuts`, `createCanvasInteractions`, `createCanvasExplosion`, `createCanvasExplosionState`, `createCanvasNodeSync`, `createCanvasMultiDrag`, `createStreamingCanvas`, `AgentPresenceLayer`, `FloatingHorizontalScrollbar`, plus layout helpers |
 
 Spreadsheet persistence: `createReactiveSpreadsheet` exposes `document` (and passes it to `onDocumentChange`) with the defined names its formulas use in `document.names`, so saving that document and passing it back as `document` restores workbook, sheet-scoped and LAMBDA names. For several sheets, save `controller.getWorkbook()` instead.
 

package/dist/canvas/createCanvasExplosion.svelte.d.ts

@@ -17,8 +17,13 @@ export interface CreateCanvasExplosionOptions<TNode extends CanvasNode = CanvasN
     onSave?: () => void;
 }
 /**
- * Headless Svelte 5 rune managing canvas node explosion, spatial layout displacement,
- * coordinated multi-node animation paths, and reversible collapsing.
+ * Imperative explosion coordinator for a mutable graph (whiteboards, diagrams): adds child
+ * nodes and edges, animates them out along a trajectory while surrounding nodes slide aside,
+ * and collapses back exactly. The layout math is `computeCanvasExplosionLayout` from
+ * `@pixerate/editor/canvas`; several nodes can be exploded at once. For a canvas derived from
+ * state (`$derived`), use `createCanvasExplosionState` and the layout functions instead.
+ *
+ * `explodeNode` throws when a child id is already on the canvas or repeated.
  */
 export declare function createCanvasExplosion<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(graph: CanvasGraphTarget<TNode, TEdge>, options?: CreateCanvasExplosionOptions<TNode>): {
     readonly explodedNodeIds: string[];

package/dist/canvas/createCanvasExplosion.svelte.js

@@ -1,9 +1,14 @@
 import { cubicOut } from 'svelte/easing';
-import { calculateDirectionalDisplacement, calculateReflowDisplacement } from './createCanvasDisplacement.js';
+import { computeCanvasExplosionLayout } from '@pixerate/editor/canvas';
 import { createFanOutTrajectory, linearPositionTrajectory, runMultiNodeTransition } from './createCanvasTrajectory.js';
 /**
- * Headless Svelte 5 rune managing canvas node explosion, spatial layout displacement,
- * coordinated multi-node animation paths, and reversible collapsing.
+ * Imperative explosion coordinator for a mutable graph (whiteboards, diagrams): adds child
+ * nodes and edges, animates them out along a trajectory while surrounding nodes slide aside,
+ * and collapses back exactly. The layout math is `computeCanvasExplosionLayout` from
+ * `@pixerate/editor/canvas`; several nodes can be exploded at once. For a canvas derived from
+ * state (`$derived`), use `createCanvasExplosionState` and the layout functions instead.
+ *
+ * `explodeNode` throws when a child id is already on the canvas or repeated.
  */
 export function createCanvasExplosion(graph, options = {}) {
     let explodedNodeIds = $state([]);
@@ -36,98 +41,50 @@ export function createCanvasExplosion(graph, options = {}) {
         return explodedNodeIds.includes(nodeId);
     }
     function explodeNode(parentId, explodeOptions) {
-        if (isExploded(parentId)) {
+        // Already exploded, or its explosion is still animating
+        if (isExploded(parentId) || snapshots.has(parentId)) {
             return false;
         }
         const parentNode = graph.nodes.find((n) => n.id === parentId);
         if (!parentNode) {
             return false;
         }
-        const { childNodes, childEdges = [], connectParentToChildren = 'all', displacementStrategy = 'directional', directionalOptions = {}, reflowOptions = {}, trajectory, duration = 500, staggerDelay = 20, easing = cubicOut, onComplete } = explodeOptions;
-        if (childNodes.length === 0) {
+        const { childNodes: requestedChildren, childEdges = [], connectParentToChildren = 'all', displacementStrategy = 'directional', directionalOptions = {}, reflowOptions = {}, trajectory, duration = 500, staggerDelay = 20, easing = cubicOut, onComplete } = explodeOptions;
+        if (requestedChildren.length === 0) {
             return false;
         }
-        // 1. Calculate displacement for existing nodes
-        let displacementMap;
-        if (displacementStrategy === 'dagre') {
-            displacementMap = calculateReflowDisplacement({
-                existingNodes: graph.nodes,
-                existingEdges: graph.edges,
-                originNode: parentNode,
-                childNodes,
-                childEdges,
-                getNodesBounds: options.getNodesBounds,
-                options: {
-                    ...reflowOptions,
-                    direction: reflowOptions.direction ?? 'LR'
-                }
-            });
-        }
-        else if (displacementStrategy === 'none') {
-            displacementMap = new Map();
-        }
-        else {
-            displacementMap = calculateDirectionalDisplacement({
-                existingNodes: graph.nodes,
-                originNode: parentNode,
-                childNodes,
-                getNodesBounds: options.getNodesBounds,
-                options: directionalOptions
-            });
-        }
-        // 2. Build snapshot of displaced nodes before mutating positions
-        const displacedNodesSnapshot = Array.from(displacementMap.entries()).map(([id]) => {
-            const node = graph.nodes.find((n) => n.id === id);
-            return {
-                id,
-                originalPosition: { ...(node?.position ?? { x: 0, y: 0 }) }
-            };
+        // 1-3. Pure layout: displacement of existing nodes, child copies and the edges to add
+        // Loose type parameter: SvelteFlow `class` is ClassValue, core `CanvasNode.class` is a string (see GOTCHAS).
+        const layout = computeCanvasExplosionLayout({
+            existingNodes: graph.nodes,
+            existingEdges: graph.edges,
+            originNode: parentNode,
+            childNodes: requestedChildren,
+            childEdges,
+            strategy: displacementStrategy,
+            options: directionalOptions,
+            reflowOptions,
+            connectParentToChildren,
+            createEdge: graph.createEdge ? (source, target) => graph.createEdge(source, target) : undefined,
+            getNodesBounds: options.getNodesBounds
         });
-        // 3. Prepare child edges & parent connection edges
-        const edgesToAdd = [...childEdges];
-        const defaultCreateEdge = (sourceId, targetId) => {
-            if (graph.createEdge) {
-                return graph.createEdge(sourceId, targetId);
-            }
-            return {
-                id: crypto.randomUUID(),
-                type: 'default',
-                source: sourceId,
-                target: targetId
-            };
-        };
-        if (connectParentToChildren === 'all' || connectParentToChildren === true) {
-            childNodes.forEach((child) => {
-                const exists = edgesToAdd.some((e) => e.source === parentId && e.target === child.id);
-                if (!exists) {
-                    edgesToAdd.push(defaultCreateEdge(parentId, child.id));
-                }
-            });
-        }
-        else if (connectParentToChildren === 'first' && childNodes.length > 0) {
-            const firstChild = childNodes[0];
-            const exists = edgesToAdd.some((e) => e.source === parentId && e.target === firstChild.id);
-            if (!exists) {
-                edgesToAdd.push(defaultCreateEdge(parentId, firstChild.id));
-            }
-        }
+        const displacementMap = layout.displacedPositions;
+        const childNodes = layout.childNodes;
+        const edgesToAdd = layout.childEdges.map((edge) => ({ ...edge }));
         const snapshot = {
             parentId,
             childNodeIds: childNodes.map((n) => n.id),
             childEdgeIds: edgesToAdd.map((e) => e.id),
-            displacedNodes: displacedNodesSnapshot,
+            displacedNodes: [...layout.originalPositions].map(([id, originalPosition]) => ({ id, originalPosition })),
             timestamp: Date.now()
         };
         snapshots.set(parentId, snapshot);
-        // 4. Position child nodes initially at origin node coordinate
+        // 4. Position child nodes (copies, so the caller's objects stay untouched) at the origin
         const originPos = { ...parentNode.position };
         const targetPositions = childNodes.map((child) => ({ ...child.position }));
         childNodes.forEach((child) => {
             child.position = { ...originPos };
-            if (!child.data)
-                child.data = {};
-            child.data.scale = 0;
-            child.data.opacity = 0;
+            child.data = { ...(child.data ?? {}), scale: 0, opacity: 0 };
             const currentStyle = (child.style || '').replace(/opacity:\s*[^;]+;?/g, '').trim();
             child.style = `${currentStyle ? currentStyle + '; ' : ''}opacity: 0;`;
         });
@@ -330,7 +287,7 @@ export function createCanvasExplosion(graph, options = {}) {
         return true;
     }
     function toggleExplode(parentId, explodeOptions, collapseOptions) {
-        if (isExploded(parentId)) {
+        if (snapshots.has(parentId)) {
             return collapseNode(parentId, collapseOptions);
         }
         return explodeNode(parentId, explodeOptions);

package/dist/canvas/createCanvasExplosionState.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type CanvasExplosionState, type CanvasExplosionStateController, type CanvasExplosionStateOptions } from '@pixerate/editor/canvas';
+export type { CanvasExplosionState, CanvasExplosionStateOptions };
+export interface CanvasExplosionStateRune extends CanvasExplosionState {
+    /** The framework-free controller underneath (for `canvasExplosionToolTarget` and agent tools). */
+    readonly controller: CanvasExplosionStateController;
+}
+/**
+ * Headless, declarative explosion state as a Svelte 5 rune: which node is exploded
+ * (`activeId`), which is still collapsing (`collapsingId`, so its children can play a collapse
+ * animation before unmounting), and the collapse timer. It never touches a graph: derive the
+ * canvas from it with `$derived` and `computeCanvasExplosionLayout` /
+ * `calculateDirectionalDisplacement`.
+ *
+ * Created during component initialisation it cleans up its timer when the component unmounts;
+ * created elsewhere, call `destroy()` yourself.
+ */
+export declare function createCanvasExplosionState(options?: CanvasExplosionStateOptions): CanvasExplosionStateRune;

package/dist/canvas/createCanvasExplosionState.svelte.js

@@ -0,0 +1,44 @@
+import { createCanvasExplosionStateController } from '@pixerate/editor/canvas';
+/**
+ * Headless, declarative explosion state as a Svelte 5 rune: which node is exploded
+ * (`activeId`), which is still collapsing (`collapsingId`, so its children can play a collapse
+ * animation before unmounting), and the collapse timer. It never touches a graph: derive the
+ * canvas from it with `$derived` and `computeCanvasExplosionLayout` /
+ * `calculateDirectionalDisplacement`.
+ *
+ * Created during component initialisation it cleans up its timer when the component unmounts;
+ * created elsewhere, call `destroy()` yourself.
+ */
+export function createCanvasExplosionState(options = {}) {
+    const controller = createCanvasExplosionStateController(options);
+    let snapshot = $state(controller.getSnapshot());
+    controller.subscribe(() => {
+        snapshot = controller.getSnapshot();
+    });
+    try {
+        $effect(() => () => controller.destroy());
+    }
+    catch {
+        // Not inside a component or effect: the caller owns destroy().
+    }
+    return {
+        controller,
+        get activeId() {
+            return snapshot.activeId;
+        },
+        get collapsingId() {
+            return snapshot.collapsingId;
+        },
+        get isExplodingOrCollapsing() {
+            return snapshot.activeId !== null || snapshot.collapsingId !== null;
+        },
+        isExploded: (nodeId) => snapshot.activeId === nodeId,
+        isCollapsing: (nodeId) => snapshot.collapsingId === nodeId,
+        shouldRenderChildren: (nodeId) => snapshot.activeId === nodeId || snapshot.collapsingId === nodeId,
+        explode: (nodeId) => controller.explode(nodeId),
+        collapse: (nodeId) => controller.collapse(nodeId),
+        toggle: (nodeId) => controller.toggle(nodeId),
+        finishCollapse: () => controller.finishCollapse(),
+        destroy: () => controller.destroy()
+    };
+}

package/dist/canvas/index.d.ts

@@ -6,7 +6,8 @@ export { createCanvasDocking, type CreateCanvasDockingOptions, type DockStrategy
 export { createCanvasShortcuts } from './createCanvasShortcuts.js';
 export { createCanvasInteractions, defaultSvelteFlowPreset, miroCompatiblePreset, restorePanelPointerEvents, isolateCanvasGestures, type CreateCanvasInteractionsOptions } from './createCanvasInteractions.svelte.js';
 export { linearTrajectory, linearPositionTrajectory, createFanOutTrajectory, createBezierTrajectory, runMultiNodeTransition } from './createCanvasTrajectory.js';
-export { computeNodesBoundingBox, calculateDirectionalDisplacement, calculateReflowDisplacement } from './createCanvasDisplacement.js';
+export { computeNodesBoundingBox, nodeSizeOf, calculateDirectionalDisplacement, calculateReflowDisplacement, calculateDagreReflowDisplacement, computeCanvasExplosionLayout, explosionEdgeId, createCanvasExplosionStateController, createCanvasExplosionToolProvider, canvasExplosionToolTarget, type ComputeCanvasExplosionLayoutParams, type CanvasExplosionLayoutResult, type CanvasExplosionStateController, type CanvasExplosionStateSnapshot, type CanvasExplosionToolTarget, type CanvasExplosionToolProviderOptions } from '@pixerate/editor/canvas';
+export { createCanvasExplosionState, type CanvasExplosionState, type CanvasExplosionStateOptions, type CanvasExplosionStateRune } from './createCanvasExplosionState.svelte.js';
 export { createCanvasExplosion, type CanvasGraphTarget, type CreateCanvasExplosionOptions } from './createCanvasExplosion.svelte.js';
 export { createCanvasNodeSync, preserveNodeMeasurements, normalizeNodeHandles, snapshotCanvasGraph, type HandleConfig, type NodeMeasurement, type CreateCanvasNodeSyncOptions, type CanvasGraphSnapshotInput } from './createCanvasNodeSync.svelte.js';
 export { createCanvasMultiDrag, type MultiDragState, type MultiDragFollowerOffset, type CreateCanvasMultiDragOptions, type FollowerTransform } from './createCanvasMultiDrag.svelte.js';

package/dist/canvas/index.js

@@ -14,9 +14,11 @@ export { createCanvasShortcuts } from './createCanvasShortcuts.js';
 export { createCanvasInteractions, defaultSvelteFlowPreset, miroCompatiblePreset, restorePanelPointerEvents, isolateCanvasGestures } from './createCanvasInteractions.svelte.js';
 // Trajectory calculation & multi-node transitions
 export { linearTrajectory, linearPositionTrajectory, createFanOutTrajectory, createBezierTrajectory, runMultiNodeTransition } from './createCanvasTrajectory.js';
-// Spatial layout displacement
-export { computeNodesBoundingBox, calculateDirectionalDisplacement, calculateReflowDisplacement } from './createCanvasDisplacement.js';
-// Node explosion & collapse rune
+// Spatial layout displacement & pure explosion layout (core)
+export { computeNodesBoundingBox, nodeSizeOf, calculateDirectionalDisplacement, calculateReflowDisplacement, calculateDagreReflowDisplacement, computeCanvasExplosionLayout, explosionEdgeId, createCanvasExplosionStateController, createCanvasExplosionToolProvider, canvasExplosionToolTarget } from '@pixerate/editor/canvas';
+// Declarative explosion state rune
+export { createCanvasExplosionState } from './createCanvasExplosionState.svelte.js';
+// Imperative explosion coordinator rune
 export { createCanvasExplosion } from './createCanvasExplosion.svelte.js';
 // Node synchronization & handle normalization
 export { createCanvasNodeSync, preserveNodeMeasurements, normalizeNodeHandles, snapshotCanvasGraph } from './createCanvasNodeSync.svelte.js';

package/dist/canvas/types.d.ts

@@ -1,4 +1,5 @@
 import type { Node, Edge, XYPosition, ColorMode } from '@xyflow/svelte';
+import type { DirectionalDisplacementOptions, ExplosionDisplacementStrategy, ReflowDisplacementOptions } from '@pixerate/editor/canvas';
 /**
  * Generic node interface representing an element on the canvas.
  */
@@ -120,26 +121,7 @@ export interface NodeTransition<TNode extends CanvasNode = CanvasNode> {
     index?: number;
     total?: number;
 }
-/**
- * Displacement axis / direction.
- */
-export type DisplacementDirection = 'right' | 'left' | 'down' | 'up' | 'vertical';
-/**
- * Options for directional displacement calculation.
- */
-export interface DirectionalDisplacementOptions {
-    direction?: DisplacementDirection;
-    gap?: number;
-    spreadSiblingLanes?: boolean;
-    siblingTolerance?: number;
-    minY?: number;
-}
-/**
- * Options for Dagre reflow displacement calculation.
- */
-export interface ReflowDisplacementOptions extends CanvasLayoutOptions {
-    anchorNodeId: string;
-}
+export type { DisplacementDirection, DirectionalDisplacementOptions, ReflowDisplacementOptions, ExplosionDisplacementStrategy } from '@pixerate/editor/canvas';
 /**
  * Snapshot of canvas graph state prior to node explosion, enabling exact reversibility.
  */
@@ -160,8 +142,7 @@ export interface ExplodeNodeOptions<TNode extends CanvasNode = CanvasNode, TEdge
     childNodes: TNode[];
     childEdges?: TEdge[];
     connectParentToChildren?: boolean | 'first' | 'all';
-    connectChildrenToDownstream?: boolean;
-    displacementStrategy?: 'directional' | 'dagre' | 'none';
+    displacementStrategy?: ExplosionDisplacementStrategy;
     directionalOptions?: DirectionalDisplacementOptions;
     reflowOptions?: Partial<ReflowDisplacementOptions>;
     trajectory?: TrajectoryFunction;

package/dist/chart/ChartDataGrid.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { chartColorInputValue, chartSeriesColor, formatChartNumber, type ChartController } from '@pixerate/editor/chart';
+  import { chartColorInputValue, chartSeriesColor, chartTreeFromSeries, formatChartNumber, type ChartController } from '@pixerate/editor/chart';
   import ChartCommitInput from './ChartCommitInput.svelte';
+  import ChartTreeGrid from './ChartTreeGrid.svelte';
   import { chartStateOf } from './createChartEditor.svelte.js';
   import { chartButtonClass, chartCellClass, chartIconButtonClass, chartInputClass } from './styles.js';
 
@@ -18,6 +19,7 @@
   const view = chartStateOf(() => controller);
   const spec = $derived(view.current.spec);
   const selection = $derived(view.current.selection);
+  const canGroup = $derived(spec.type === 'treemap' || spec.type === 'sunburst');
 
   const cellText = (value: number | null | undefined) => (value === null || value === undefined ? '' : String(value));
 
@@ -30,6 +32,9 @@
   };
 </script>
 
+{#if spec.tree.length}
+  <ChartTreeGrid {controller} {readOnly} class={className} />
+{:else}
 <div class="overflow-auto rounded-md border border-border {className}" data-chart-grid="">
   <table class="w-full border-collapse text-xs">
     <thead class="bg-muted/50">
@@ -121,6 +126,15 @@
   {#if !readOnly}
     <div class="p-1">
       <button type="button" class="{chartButtonClass} h-6 border-dashed" data-action="add-category" onclick={() => controller.addCategory()}>+ Add category</button>
+      {#if canGroup}
+        <button
+          type="button"
+          class="{chartButtonClass} ml-1 h-6"
+          data-action="tree-from-table"
+          title="Edit the categories as groups of items"
+          onclick={() => controller.setTree(chartTreeFromSeries(spec.categories, spec.series.find((s) => !s.hidden)?.values ?? []))}>Group items</button>
+      {/if}
     </div>
   {/if}
 </div>
+{/if}

package/dist/chart/ChartInspector.svelte

@@ -18,6 +18,8 @@
     CHART_LABEL_POSITIONS,
     CHART_LAYOUT_PRESETS,
     CHART_LEGEND_POSITIONS,
+    CHART_LIKERT_NEUTRALS,
+    CHART_LIKERT_SORTS,
     CHART_MARKERS,
     CHART_NUMBER_STYLES,
     CHART_SERIES_TYPES,
@@ -36,6 +38,7 @@
     defaultChartErrorBarValue,
     formatChartAmountList,
     isCartesianChart,
+    suggestChartReferences,
     parseChartAmountList,
     type ChartAxis,
     type ChartController,
@@ -66,6 +69,7 @@
   const view = chartStateOf(() => controller);
   const spec = $derived(view.current.spec);
   const selectedSeries = $derived(view.current.selectedSeries);
+  const selection = $derived(view.current.selection);
   const show = (section: ChartInspectorSection) => !sections || sections.includes(section);
   const cartesian = $derived(isCartesianChart(spec.type));
   const family = $derived(chartFamily(spec));
@@ -80,6 +84,10 @@
   const horizontal = $derived(spec.orientation === 'horizontal');
   // Log and reversed axes and error bars are drawn by the bar / line / area / scatter layouts.
   const scales = $derived(family === 'cartesian' || family === 'xy');
+  // Reference lines and bands, callouts and colour by category are drawn by the same layouts.
+  const annotated = $derived(scales);
+  const oneSeries = $derived(cartesian && spec.series.filter((s) => !s.hidden).length === 1);
+  const calloutIndex = $derived(selection?.kind === 'point' && selection.seriesId === selectedSeries?.id ? selection.index : null);
   const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
   const stackingLabels: Record<string, string> = { none: 'None', stacked: 'Stacked', percent: '100%' };
 
@@ -332,6 +340,12 @@
           <ChartCommitInput id="{idPrefix}-subtitle" value={spec.subtitle} data-option="subtitle" oncommit={(subtitle) => void controller.setSubtitle(subtitle)} />
         </div>
       </div>
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-note" class="{chartLabelClass} w-20 shrink-0">Note</label>
+        <div class="min-w-0 flex-1">
+          <ChartCommitInput id="{idPrefix}-note" value={spec.note} placeholder="Source or footnote" data-option="note" oncommit={(note) => void controller.setNote(note)} />
+        </div>
+      </div>
     </div>
   {/if}
 
@@ -409,6 +423,62 @@
           </div>
         </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>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-sunburst-label" value={spec.sunburstLabel} placeholder="Under the total" data-option="sunburstLabel" oncommit={(sunburstLabel) => controller.update({ sunburstLabel }).ok} />
+          </div>
+        </div>
+      {/if}
+      {#if spec.type === 'likert'}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-likert-neutral" class="{chartLabelClass} w-20 shrink-0">Neutral</label>
+          <select id="{idPrefix}-likert-neutral" class={chartInputClass} value={spec.likertNeutral} data-option="likertNeutral" onchange={(e) => controller.update({ likertNeutral: e.currentTarget.value as (typeof CHART_LIKERT_NEUTRALS)[number] })}>
+            {#each CHART_LIKERT_NEUTRALS as n (n)}
+              <option value={n}>{n === 'split' ? 'Across the centre' : 'In its own column'}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-likert-sort" class="{chartLabelClass} w-20 shrink-0">Order</label>
+          <select id="{idPrefix}-likert-sort" class={chartInputClass} value={spec.likertSort} data-option="likertSort" onchange={(e) => controller.update({ likertSort: e.currentTarget.value as (typeof CHART_LIKERT_SORTS)[number] })}>
+            {#each CHART_LIKERT_SORTS as o (o)}
+              <option value={o}>{o === 'none' ? 'As entered' : o === 'positive' ? 'Most agreement first' : 'Most disagreement first'}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+      {#if spec.type === 'parliament'}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-parliament-arc" class="{chartLabelClass} w-20 shrink-0">Sweep</label>
+          <input
+            id="{idPrefix}-parliament-arc"
+            type="range"
+            min="90"
+            max="360"
+            step="10"
+            value={spec.parliamentArc}
+            data-option="parliamentArc"
+            class="w-full accent-primary"
+            onpointerdown={() => controller.beginGesture('parliamentArc')}
+            onpointerup={() => controller.endGesture()}
+            oninput={(e) => controller.update({ parliamentArc: Number(e.currentTarget.value) })}
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-parliament-majority" class="{chartLabelClass} w-20 shrink-0">Majority</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-parliament-majority" value={spec.parliamentMajority === null ? '' : String(spec.parliamentMajority)} placeholder="Half plus one" inputmode="numeric" data-option="parliamentMajority" oncommit={(text) => controller.update({ parliamentMajority: text.trim() === '' ? null : Number(text) }).ok} />
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-parliament-label" class="{chartLabelClass} w-20 shrink-0">Caption</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput id="{idPrefix}-parliament-label" value={spec.parliamentLabel} placeholder="seats" data-option="parliamentLabel" oncommit={(parliamentLabel) => controller.update({ parliamentLabel }).ok} />
+          </div>
+        </div>
+      {/if}
       {#if spec.type === 'radar'}
         <div class="flex items-center gap-2">
           <label for="{idPrefix}-radar-ticks" class="{chartLabelClass} w-20 shrink-0">Rings</label>
@@ -450,6 +520,9 @@
         {#if hasLines}
           {@render toggle('Points', 'points', spec.points, (points) => controller.update({ points }))}
         {/if}
+        {#if oneSeries}
+          {@render toggle('Colour by category', 'varyColors', spec.varyColors, (varyColors) => controller.update({ varyColors }))}
+        {/if}
         {@render toggle('Data labels', 'dataLabels', spec.dataLabels, (dataLabels) => controller.update({ dataLabels }))}
       </div>
     </div>
@@ -483,6 +556,43 @@
     {/if}
   {/if}
 
+  {#if show('annotations') && annotated}
+    <div class={chartSectionClass} data-section="annotations">
+      <h4 class="text-xs font-semibold text-foreground">Annotations</h4>
+      <div class="flex items-center gap-2">
+        <label for="{idPrefix}-highlight" class="{chartLabelClass} w-20 shrink-0">Highlight</label>
+        <div class="min-w-0 flex-1">
+          <ChartCommitInput
+            id="{idPrefix}-highlight"
+            value={spec.highlight.join(', ')}
+            placeholder="Categories or series"
+            data-option="highlight"
+            oncommit={(text) => controller.setHighlight(text.split(',').map((n) => n.trim()).filter(Boolean)).ok}
+          />
+        </div>
+      </div>
+      {#each spec.referenceLines as line, i (i)}
+        <div class="flex items-center gap-1" data-reference-line={i}>
+          <ChartCommitInput value={String(line.value)} aria-label="Line value" inputmode="decimal" data-option="referenceLine.{i}.value" class="{chartInputClass} w-16 shrink-0" oncommit={(text) => controller.updateReferenceLine(i, { value: Number(text) }).ok} />
+          <ChartCommitInput value={line.label ?? ''} aria-label="Line label" placeholder="Label" data-option="referenceLine.{i}.label" class="{chartInputClass} flex-1" oncommit={(text) => controller.updateReferenceLine(i, { label: text || null }).ok} />
+          <button type="button" class={chartButtonClass} aria-label="Delete reference line" data-action="reference-line-delete" onclick={() => controller.removeReferenceLine(i)}>×</button>
+        </div>
+      {/each}
+      {#each spec.referenceBands as band, i (i)}
+        <div class="flex items-center gap-1" data-reference-band={i}>
+          <ChartCommitInput value={String(band.from)} aria-label="Band from" inputmode="decimal" data-option="referenceBand.{i}.from" class="{chartInputClass} w-14 shrink-0" oncommit={(text) => controller.updateReferenceBand(i, { from: Number(text) }).ok} />
+          <ChartCommitInput value={String(band.to)} aria-label="Band to" inputmode="decimal" data-option="referenceBand.{i}.to" class="{chartInputClass} w-14 shrink-0" oncommit={(text) => controller.updateReferenceBand(i, { to: Number(text) }).ok} />
+          <ChartCommitInput value={band.label ?? ''} aria-label="Band label" placeholder="Label" data-option="referenceBand.{i}.label" class="{chartInputClass} flex-1" oncommit={(text) => controller.updateReferenceBand(i, { label: text || null }).ok} />
+          <button type="button" class={chartButtonClass} aria-label="Delete reference band" data-action="reference-band-delete" onclick={() => controller.removeReferenceBand(i)}>×</button>
+        </div>
+      {/each}
+      <div class="flex gap-1">
+        <button type="button" class={chartButtonClass} data-option="referenceLine.add" onclick={() => controller.addReferenceLine(suggestChartReferences(spec).line)}>Add line</button>
+        <button type="button" class={chartButtonClass} data-option="referenceBand.add" onclick={() => controller.addReferenceBand(suggestChartReferences(spec).band)}>Add band</button>
+      </div>
+    </div>
+  {/if}
+
   {#if show('series') && selectedSeries}
     {@const series = selectedSeries}
     {@const drawnAs = chartSeriesType(spec, series)}
@@ -546,6 +656,21 @@
           </select>
         </div>
       {/if}
+      {#if annotated && calloutIndex !== null}
+        {@const at = calloutIndex}
+        <div class="flex items-center gap-2">
+          <label for="{idPrefix}-series-callout" class="{chartLabelClass} w-20 shrink-0">Callout</label>
+          <div class="min-w-0 flex-1">
+            <ChartCommitInput
+              id="{idPrefix}-series-callout"
+              value={series.callouts?.[at] ?? ''}
+              placeholder="Label for {spec.categories[at] ?? 'this point'}"
+              data-option="series.callout"
+              oncommit={(text) => controller.setCallout(series.id, at, text || null).ok}
+            />
+          </div>
+        </div>
+      {/if}
       {#if scales}
         {@render errorBarFields(series, 'errorBars')}
       {/if}

package/dist/chart/ChartTreeGrid.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import {
+    addChartTreeRow,
+    chartTreeColumnLabels,
+    chartTreeDepth,
+    chartTreeToRows,
+    formatChartNumber,
+    removeChartTreeRow,
+    setChartTreeRowName,
+    setChartTreeRowValue,
+    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 spec = $derived(view.current.spec);
+  // `+ Level` raises the column count; it stays until the grid is unmounted, so a new column can be filled in.
+  let columns = $state(1);
+  const rows = $derived(chartTreeToRows(spec.tree));
+  const depth = $derived(Math.max(columns, chartTreeDepth(spec.tree)));
+  const labels = $derived(chartTreeColumnLabels(depth));
+
+  const commit = (next: Parameters<ChartController['setTreeRows']>[0]) => controller.setTreeRows(next).ok;
+</script>
+
+<!-- Grouped data as a table: the names from the group down to each item, then its value. -->
+<div class="overflow-auto rounded-md border border-border {className}" data-chart-grid="" data-chart-tree-grid="">
+  <table class="w-full border-collapse text-xs">
+    <thead class="bg-muted/50">
+      <tr>
+        {#each labels as label (label)}
+          <th class="border-b border-r border-border px-2 py-1 text-left font-medium text-muted-foreground">{label}</th>
+        {/each}
+        <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 rows as row, r (r)}
+        <tr data-tree-row={r}>
+          {#each labels as label, k (k)}
+            <td class="border-b border-r border-border p-0">
+              <ChartCommitInput
+                value={row.path[k] ?? ''}
+                aria-label="{label}, row {r + 1}"
+                data-tree-cell="{r}:{k}"
+                readonly={readOnly}
+                oncommit={(name) => commit(setChartTreeRowName(rows, r, k, name))}
+                class="{chartCellClass} text-left"
+              />
+            </td>
+          {/each}
+          <td class="border-b border-r border-border p-0">
+            <ChartCommitInput
+              value={String(row.value)}
+              inputmode="decimal"
+              aria-label="Value of {row.path.join(' / ')}"
+              title={formatChartNumber(row.value, spec.yAxis.format)}
+              data-tree-value={r}
+              readonly={readOnly}
+              oncommit={(text) => commit(setChartTreeRowValue(rows, r, text))}
+              class={chartCellClass}
+            />
+          </td>
+          {#if !readOnly}
+            <td class="border-b border-border px-1">
+              <button type="button" class={chartIconButtonClass} title="Delete item" aria-label="Delete {row.path.join(' / ')}" data-action="tree-remove-row" onclick={() => commit(removeChartTreeRow(rows, r))}>×</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="tree-add-row" onclick={() => commit(addChartTreeRow(rows))}>+ Add item</button>
+      <button type="button" class="{chartButtonClass} h-6 border-dashed" data-action="tree-add-level" disabled={depth >= 6} onclick={() => (columns = depth + 1)}>+ Level</button>
+      <span class="flex-1"></span>
+      <button type="button" class="{chartButtonClass} h-6" data-action="tree-ungroup" title="Keep the group totals as plain data" onclick={() => controller.setTree([])}>Ungroup</button>
+    </div>
+  {/if}
+</div>

package/dist/chart/ChartTreeGrid.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 ChartTreeGrid: import("svelte").Component<Props, {}, "">;
+type ChartTreeGrid = ReturnType<typeof ChartTreeGrid>;
+export default ChartTreeGrid;

package/dist/chart/index.d.ts

@@ -8,6 +8,7 @@ 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 ChartTreeGrid } from "./ChartTreeGrid.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

@@ -1,6 +1,7 @@
 export { default as ChartEditor } from "./ChartEditor.svelte";
 export { default as ChartCanvas } from "./ChartCanvas.svelte";
 export { default as ChartDataGrid } from "./ChartDataGrid.svelte";
+export { default as ChartTreeGrid } from "./ChartTreeGrid.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/types.d.ts

@@ -1 +1 @@
-export type ChartInspectorSection = 'type' | 'style' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
+export type ChartInspectorSection = 'type' | 'style' | 'titles' | 'options' | 'legend' | 'axes' | 'annotations' | 'series';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.119.1",
+  "version": "0.121.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.162.1"
+    "@pixerate/editor": "0.164.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",

package/dist/canvas/createCanvasDisplacement.d.ts

@@ -1,31 +0,0 @@
-import type { Rect, XYPosition } from '@xyflow/svelte';
-import type { CanvasEdge, CanvasLayoutOptions, CanvasNode, DirectionalDisplacementOptions } from './types.js';
-/**
- * Calculates a bounding rectangle for a set of nodes if not provided by getNodesBounds.
- */
-export declare function computeNodesBoundingBox<TNode extends CanvasNode = CanvasNode>(nodes: TNode[], defaultWidth?: number, defaultHeight?: number): Rect;
-/**
- * Pure directional displacement calculation.
- * Shifts downstream or surrounding nodes along an axis to clear space for newly inserted child nodes.
- */
-export declare function calculateDirectionalDisplacement<TNode extends CanvasNode = CanvasNode>(params: {
-    existingNodes: TNode[];
-    originNode: TNode;
-    childNodes: TNode[];
-    getNodesBounds?: (nodes: TNode[]) => Rect;
-    options?: DirectionalDisplacementOptions;
-}): Map<string, XYPosition>;
-/**
- * Pure hierarchical Dagre reflow displacement calculation.
- * Calculates new coordinates for surrounding nodes using Dagre hierarchical layout,
- * anchoring the origin node at its current position to eliminate layout jumping.
- */
-export declare function calculateReflowDisplacement<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(params: {
-    existingNodes: TNode[];
-    existingEdges: TEdge[];
-    originNode: TNode;
-    childNodes: TNode[];
-    childEdges?: TEdge[];
-    getNodesBounds?: (nodes: TNode[]) => Rect;
-    options?: CanvasLayoutOptions;
-}): Map<string, XYPosition>;

package/dist/canvas/createCanvasDisplacement.js

@@ -1,170 +0,0 @@
-import dagre from '@dagrejs/dagre';
-/**
- * Calculates a bounding rectangle for a set of nodes if not provided by getNodesBounds.
- */
-export function computeNodesBoundingBox(nodes, defaultWidth = 200, defaultHeight = 60) {
-    if (nodes.length === 0) {
-        return { x: 0, y: 0, width: 0, height: 0 };
-    }
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    for (const node of nodes) {
-        const width = node.measured?.width ?? node.width ?? defaultWidth;
-        const height = node.measured?.height ?? node.height ?? defaultHeight;
-        minX = Math.min(minX, node.position.x);
-        minY = Math.min(minY, node.position.y);
-        maxX = Math.max(maxX, node.position.x + width);
-        maxY = Math.max(maxY, node.position.y + height);
-    }
-    return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY
-    };
-}
-/**
- * Pure directional displacement calculation.
- * Shifts downstream or surrounding nodes along an axis to clear space for newly inserted child nodes.
- */
-export function calculateDirectionalDisplacement(params) {
-    const { existingNodes, originNode, childNodes, getNodesBounds, options = {} } = params;
-    const { direction = 'right', gap = 40, spreadSiblingLanes = false, siblingTolerance = 50, minY } = options;
-    const displacedMap = new Map();
-    if (childNodes.length === 0 || existingNodes.length === 0) {
-        return displacedMap;
-    }
-    const childBounds = getNodesBounds
-        ? getNodesBounds(childNodes)
-        : computeNodesBoundingBox(childNodes);
-    const originWidth = originNode.measured?.width ?? originNode.width ?? 200;
-    const originHeight = originNode.measured?.height ?? originNode.height ?? 60;
-    // The delta space required along primary axis
-    const deltaPrimary = (direction === 'right' || direction === 'left')
-        ? childBounds.width + gap
-        : childBounds.height + gap;
-    // Vertical displacement parameters: upward and downward row clearance
-    const deltaUp = Math.max(0, originNode.position.y - childBounds.y + gap);
-    const deltaDown = Math.max(0, childBounds.y + childBounds.height - (originNode.position.y + originHeight) + gap);
-    // Both above and below displace equally so the row expands symmetrically
-    const equalDelta = Math.max(deltaUp, deltaDown);
-    for (const node of existingNodes) {
-        if (node.id === originNode.id)
-            continue;
-        let newX = node.position.x;
-        let newY = node.position.y;
-        let moved = false;
-        if (direction === 'right') {
-            // Downstream nodes strictly to the right of the origin
-            if (node.position.x >= originNode.position.x + originWidth * 0.5) {
-                newX += deltaPrimary;
-                moved = true;
-            }
-            else if (spreadSiblingLanes) {
-                // Sibling nodes occupying the same vertical space as the exploded cluster
-                const isVerticallyOverlapping = node.position.y + (node.height ?? 60) >= childBounds.y - gap &&
-                    node.position.y <= childBounds.y + childBounds.height + gap;
-                if (isVerticallyOverlapping && Math.abs(node.position.x - originNode.position.x) <= siblingTolerance) {
-                    const pushDirection = node.position.y >= originNode.position.y ? 1 : -1;
-                    newY += pushDirection * (childBounds.height * 0.5 + gap);
-                    moved = true;
-                }
-            }
-        }
-        else if (direction === 'left') {
-            if (node.position.x <= originNode.position.x) {
-                newX -= deltaPrimary;
-                moved = true;
-            }
-        }
-        else if (direction === 'down') {
-            if (node.position.y >= originNode.position.y + originHeight * 0.5) {
-                newY += deltaPrimary;
-                moved = true;
-            }
-        }
-        else if (direction === 'up') {
-            if (node.position.y <= originNode.position.y) {
-                newY -= deltaPrimary;
-                moved = true;
-            }
-        }
-        else if (direction === 'vertical') {
-            // Row grows vertically:
-            // Nodes strictly above the origin node move up by equalDelta
-            // Nodes strictly below the origin node move down by equalDelta
-            // Both above and below displace equally; horizontal position (x) is strictly preserved
-            if (node.position.y < originNode.position.y) {
-                if (equalDelta > 0) {
-                    newY -= equalDelta;
-                    moved = true;
-                }
-            }
-            else if (node.position.y >= originNode.position.y + originHeight * 0.5) {
-                if (equalDelta > 0) {
-                    newY += equalDelta;
-                    moved = true;
-                }
-            }
-        }
-        if (moved) {
-            displacedMap.set(node.id, { x: newX, y: newY });
-        }
-    }
-    return displacedMap;
-}
-/**
- * Pure hierarchical Dagre reflow displacement calculation.
- * Calculates new coordinates for surrounding nodes using Dagre hierarchical layout,
- * anchoring the origin node at its current position to eliminate layout jumping.
- */
-export function calculateReflowDisplacement(params) {
-    const { existingNodes, existingEdges, originNode, childNodes, childEdges = [], options = {} } = params;
-    const { direction = 'LR', ranksep = 80, nodesep = 30, defaultNodeWidth = 200, defaultNodeHeight = 60 } = options;
-    const displacedMap = new Map();
-    if (existingNodes.length === 0)
-        return displacedMap;
-    const allNodes = [...existingNodes, ...childNodes];
-    const allEdges = [...existingEdges, ...childEdges];
-    const dagreGraph = new dagre.graphlib.Graph();
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
-    const allNodeIds = new Set(allNodes.map((n) => n.id));
-    allNodes.forEach((node) => {
-        const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
-        const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
-        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-    });
-    allEdges.forEach((edge) => {
-        if (allNodeIds.has(edge.source) && allNodeIds.has(edge.target)) {
-            dagreGraph.setEdge(edge.source, edge.target);
-        }
-    });
-    dagre.layout(dagreGraph);
-    const dagreOrigin = dagreGraph.node(originNode.id);
-    if (!dagreOrigin)
-        return displacedMap;
-    const originWidth = originNode.measured?.width ?? originNode.width ?? defaultNodeWidth;
-    const originHeight = originNode.measured?.height ?? originNode.height ?? defaultNodeHeight;
-    // Calculate offset so origin node remains anchored at its exact initial coordinates
-    const anchorOffsetX = originNode.position.x - (dagreOrigin.x - originWidth / 2);
-    const anchorOffsetY = originNode.position.y - (dagreOrigin.y - originHeight / 2);
-    existingNodes.forEach((node) => {
-        if (node.id === originNode.id)
-            return;
-        const dagreNode = dagreGraph.node(node.id);
-        if (!dagreNode)
-            return;
-        const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
-        const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
-        const targetX = dagreNode.x - nodeWidth / 2 + anchorOffsetX;
-        const targetY = dagreNode.y - nodeHeight / 2 + anchorOffsetY;
-        // Only include if position actually shifted
-        if (Math.abs(targetX - node.position.x) > 0.5 || Math.abs(targetY - node.position.y) > 0.5) {
-            displacedMap.set(node.id, { x: targetX, y: targetY });
-        }
-    });
-    return displacedMap;
-}