@pixerate/editor-svelte 0.119.0 → 0.120.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/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.0",
+  "version": "0.120.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.0"
+    "@pixerate/editor": "0.163.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",