@pixerate/editor-svelte 0.42.1 → 0.44.0

package/dist/chart/ChartCanvas.svelte

@@ -3,19 +3,20 @@
   import {
     CSS_VARIABLE_CHART_THEME,
     chartClientToScene,
-    chartTextBaseline,
-    chartTextTransform,
     describeChartSelection,
     handleChartKey,
     layoutChart,
     startChartPointDrag,
     type ChartController,
-    type ChartMark,
     type ChartPointDrag,
+    type ChartPresence,
+    type ChartScene,
     type ChartTextMeasure,
     type ChartTheme
   } from '@pixerate/editor/chart';
   import { chartStateOf } from './createChartEditor.svelte.js';
+  import ChartMarks from './ChartMarks.svelte';
+  import ChartPresenceLayer from './ChartPresenceLayer.svelte';
 
   interface Props {
     controller: ChartController;
@@ -33,6 +34,10 @@
     measureText?: ChartTextMeasure;
     emptyMessage?: string;
     class?: string;
+    /** Agent cursors to draw over the chart (see `ChartDirector`). */
+    presence?: ChartPresence;
+    /** Receives the scene as drawn (e.g. for `ChartDirector`'s `scene`). */
+    sceneRef?: { current: ChartScene | null };
   }
 
   let {
@@ -44,7 +49,9 @@
     editable = true,
     measureText,
     emptyMessage,
-    class: className = ''
+    class: className = '',
+    presence,
+    sceneRef
   }: Props = $props();
 
   const view = chartStateOf(() => controller);
@@ -64,8 +71,8 @@
     return () => observer.disconnect();
   });
   let drag: ChartPointDrag | null = null;
-  // Frozen while a point is dragged so the value axis does not rescale under the pointer.
-  let valueDomain = $state<ChartPointDrag['valueDomain'] | null>(null);
+  // Frozen while a point is dragged so the axes do not rescale under the pointer.
+  let frozen = $state.raw<{ valueDomain: ChartPointDrag['valueDomain']; valueDomain2: ChartPointDrag['valueDomain2'] | null; xDomain: ChartPointDrag['xDomain'] | null; readout: ChartPointDrag['target'] } | null>(null);
 
   const sceneWidth = $derived((responsive && measured) || width);
   const fullTheme = $derived({ ...CSS_VARIABLE_CHART_THEME, ...theme });
@@ -77,16 +84,20 @@
       selection: editable ? view.current.selection : null,
       measureText,
       emptyMessage,
-      valueDomain
+      valueDomain: frozen?.valueDomain,
+      valueDomain2: frozen?.valueDomain2,
+      xDomain: frozen?.xDomain,
+      readout: frozen?.readout
     })
   );
+  $effect(() => {
+    if (sceneRef) sceneRef.current = scene;
+  });
   const byKey = $derived(new Map(scene.marks.map((m) => [m.key, m])));
   const label = $derived(view.current.spec.title || 'Chart');
 
   onDestroy(() => drag?.end());
 
-  const pointerEvents = (mark: ChartMark) => (mark.role === 'selection' || (!mark.target && mark.role !== 'background') ? 'none' : undefined);
-  const cursor = (mark: ChartMark) => (editable && mark.target && mark.role !== 'background' ? 'pointer' : undefined);
   const scenePoint = (e: PointerEvent) => chartClientToScene(scene, svg!.getBoundingClientRect(), e.clientX, e.clientY);
 
   function pointerdown(e: PointerEvent) {
@@ -96,19 +107,26 @@
     controller.select(target ?? null);
     drag = startChartPointDrag(controller, scene, target, scenePoint(e));
     if (drag) {
-      valueDomain = drag.valueDomain;
+      frozen = { valueDomain: drag.valueDomain, valueDomain2: drag.valueDomain2 ?? null, xDomain: drag.xDomain ?? null, readout: drag.target };
       svg?.setPointerCapture?.(e.pointerId);
     }
   }
   function pointermove(e: PointerEvent) {
-    drag?.move(scenePoint(e));
+    drag?.move(scenePoint(e), { fine: e.altKey, lockAxis: e.shiftKey, noSnap: e.ctrlKey || e.metaKey });
   }
   function endDrag() {
     drag?.end();
     drag = null;
-    valueDomain = null;
+    frozen = null;
   }
   function keydown(e: KeyboardEvent) {
+    if (drag && e.key === 'Escape') {
+      drag.cancel();
+      drag = null;
+      frozen = null;
+      e.preventDefault();
+      return;
+    }
     if (editable && handleChartKey(controller, scene, e)) e.preventDefault();
   }
 </script>
@@ -130,91 +148,7 @@
     onpointercancel={endDrag}
     onkeydown={keydown}
   >
-    {#each scene.marks as mark (mark.key)}
-      {#if mark.kind === 'rect'}
-        <rect
-          data-role={mark.role}
-          data-chart-key={mark.target ? mark.key : undefined}
-          data-selected={mark.selected ? '' : undefined}
-          x={mark.x}
-          y={mark.y}
-          width={mark.width}
-          height={mark.height}
-          rx={mark.radius}
-          opacity={mark.opacity}
-          pointer-events={pointerEvents(mark)}
-          cursor={cursor(mark)}
-          style:fill={mark.fill}
-          style:stroke={mark.stroke}
-          style:stroke-width={mark.strokeWidth}
-        />
-      {:else if mark.kind === 'path'}
-        <path
-          data-role={mark.role}
-          data-chart-key={mark.target ? mark.key : undefined}
-          data-selected={mark.selected ? '' : undefined}
-          d={mark.d}
-          stroke-linejoin="round"
-          stroke-linecap="round"
-          stroke-dasharray={mark.dash}
-          opacity={mark.opacity}
-          pointer-events={pointerEvents(mark)}
-          cursor={cursor(mark)}
-          style:fill={mark.fill ?? 'none'}
-          style:stroke={mark.stroke}
-          style:stroke-width={mark.strokeWidth}
-        />
-      {:else if mark.kind === 'circle'}
-        <circle
-          data-role={mark.role}
-          data-chart-key={mark.target ? mark.key : undefined}
-          data-selected={mark.selected ? '' : undefined}
-          cx={mark.cx}
-          cy={mark.cy}
-          r={mark.r}
-          opacity={mark.opacity}
-          pointer-events={pointerEvents(mark)}
-          cursor={cursor(mark)}
-          style:fill={mark.fill}
-          style:stroke={mark.stroke}
-          style:stroke-width={mark.strokeWidth}
-        />
-      {:else if mark.kind === 'line'}
-        <line
-          data-role={mark.role}
-          data-chart-key={mark.target ? mark.key : undefined}
-          data-selected={mark.selected ? '' : undefined}
-          x1={mark.x1}
-          y1={mark.y1}
-          x2={mark.x2}
-          y2={mark.y2}
-          stroke-dasharray={mark.dash}
-          opacity={mark.opacity}
-          pointer-events={pointerEvents(mark)}
-          cursor={cursor(mark)}
-          style:stroke={mark.stroke}
-          style:stroke-width={mark.strokeWidth}
-        />
-      {:else}
-        <text
-          data-role={mark.role}
-          data-chart-key={mark.target ? mark.key : undefined}
-          data-selected={mark.selected ? '' : undefined}
-          x={mark.x}
-          y={mark.y}
-          text-anchor={mark.anchor}
-          dominant-baseline={chartTextBaseline(mark.baseline)}
-          transform={chartTextTransform(mark)}
-          opacity={mark.opacity}
-          pointer-events={pointerEvents(mark)}
-          cursor={cursor(mark)}
-          style:fill={mark.fill}
-          style:font-size="{mark.size}px"
-          style:font-weight={mark.weight}
-          style:font-family={scene.theme.fontFamily}
-          style:user-select="none">{mark.text}</text
-        >
-      {/if}
-    {/each}
+    <ChartMarks marks={scene.marks} fontFamily={scene.theme.fontFamily} interactive={editable} />
+    {#if presence}<ChartPresenceLayer {presence} />{/if}
   </svg>
 </div>

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

@@ -1,4 +1,4 @@
-import { type ChartController, type ChartTextMeasure, type ChartTheme } from '@pixerate/editor/chart';
+import { type ChartController, type ChartPresence, type ChartScene, type ChartTextMeasure, type ChartTheme } from '@pixerate/editor/chart';
 interface Props {
     controller: ChartController;
     /** Scene width; with `responsive` this is only the fallback before the container is measured (default 640). */
@@ -15,6 +15,12 @@ interface Props {
     measureText?: ChartTextMeasure;
     emptyMessage?: string;
     class?: string;
+    /** Agent cursors to draw over the chart (see `ChartDirector`). */
+    presence?: ChartPresence;
+    /** Receives the scene as drawn (e.g. for `ChartDirector`'s `scene`). */
+    sceneRef?: {
+        current: ChartScene | null;
+    };
 }
 declare const ChartCanvas: import("svelte").Component<Props, {}, "">;
 type ChartCanvas = ReturnType<typeof ChartCanvas>;

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

@@ -1 +1 @@
-{"version":3,"file":"ChartCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartCanvas.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EASH,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAIhC,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0GH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ChartCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartCanvas.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAOH,KAAK,eAAe,EAEpB,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAMhC,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wEAAwE;IACxE,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,UAAU,GAAG,IAAI,CAAA;KAAE,CAAC;CAC3C;AA8GH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/chart/ChartInspector.svelte

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ChartInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartInspector.svelte.ts"],"names":[],"mappings":"AAOE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAGnG,OAAO,EAaH,KAAK,eAAe,EAGrB,MAAM,wBAAwB,CAAC;AAMhC,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC5C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2OH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ChartInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/chart/ChartInspector.svelte.ts"],"names":[],"mappings":"AAOE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAG7G,OAAO,EAsBH,KAAK,eAAe,EAMrB,MAAM,wBAAwB,CAAC;AAMhC,UAAU,KAAK;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC5C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoWH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}