@svgrid/grid 3.0.1 → 3.0.2

package/dist/SvGridChart.svelte.d.ts

@@ -6,7 +6,17 @@
    * focus tooltips, a clickable legend that toggles series, optional data
    * labels, and an `onSelect` drill hook. No external charting dependency.
    */
-import { type ChartSpec, type ChartSelection } from './chart.js';
+import type { Snippet } from 'svelte';
+import { type ChartSpec, type ChartSelection, type ChartGeometry, type ChartScales } from './chart.js';
+/** What a custom mark is handed. `scales` is null on non-cartesian types. */
+type ChartRenderContext = {
+    geo: ChartGeometry;
+    /** Pixel x at the centre of category `i`. Null when there is no x axis. */
+    xOf: ChartScales['xOf'] | null;
+    /** Pixel y for a value. Null when there is no value axis. */
+    yOf: ChartScales['yOf'] | null;
+    scales: ChartScales | null;
+};
 type Props = {
     spec: ChartSpec;
     /** Show the (clickable) legend. Default true. */
@@ -40,6 +50,58 @@ type Props = {
      *  fit exactly - used by the docked panel to size the chart to its body. */
     width?: number;
     height?: number;
+    /**
+     * Draw your own marks in the chart's own coordinates - the custom-series
+     * seam. `underlay` paints beneath the built-in marks (bands, shaded
+     * regions, a background you want the bars to sit on); `overlay` paints
+     * above them but below the crosshair and the hit layer, so tooltips and
+     * clicks keep working over whatever you draw.
+     *
+     * Both receive the laid-out geometry and its scales, so a custom mark lands
+     * on exactly the axis the built-in ones did:
+     *
+     * ```svelte
+     * <SvChart {spec}>
+     *   {#snippet overlay({ geo, xOf, yOf })}
+     *     <circle cx={xOf(3)} cy={yOf(120)} r="5" fill="tomato" />
+     *   {/snippet}
+     * </SvChart>
+     * ```
+     *
+     * `xOf` / `yOf` are null for the types with no cartesian axes (pie, gauge,
+     * treemap, sankey, calendar, radar, funnel); `geo` is always there.
+     */
+    underlay?: Snippet<[ChartRenderContext]>;
+    overlay?: Snippet<[ChartRenderContext]>;
+    /**
+     * Let a reader pin annotations on the plot. Adds an "Annotate" toggle to
+     * the toolbar; while it is on, clicking the plot fires `onAnnotate` with
+     * the point that was clicked, and clicking an existing marker fires
+     * `onAnnotationRemove` with its index.
+     *
+     * The chart does NOT store them. It owns the gesture - which you cannot
+     * build from outside, because drag is already zoom and click is already
+     * drill - and hands back the data point; where the annotations live, and
+     * whether they survive a reload, is the host's business. Put what comes
+     * back into `spec.annotations` and they render like any other.
+     */
+    annotatable?: boolean;
+    /**
+     * A point the reader picked while annotating. It is a DATA point, not a
+     * pixel: annotate mode takes over the category gesture, so a note anchors
+     * to the category it was pinned on and stays there when the chart is
+     * re-laid-out, re-sorted or zoomed. That also means it works from the
+     * keyboard, since the category hit zones already navigate with arrows.
+     */
+    onAnnotate?: (at: {
+        /** The category picked, and its index. */
+        category: string;
+        index: number;
+        /** The value at that category on the first series. */
+        value: number;
+    }) => void;
+    /** An existing `spec.annotations` entry was clicked, by index. */
+    onAnnotationRemove?: (index: number) => void;
 };
 declare const SvGridChart: import("svelte").Component<Props, {}, "">;
 type SvGridChart = ReturnType<typeof SvGridChart>;

package/dist/SvGridChartPanel.svelte

@@ -15,7 +15,7 @@
   import { fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import SvGridChart from "./SvGridChart.svelte";
-  import { downloadChartPng, downloadChartSvg, downloadChartCsv, chartToPngBlob } from "./chart-export";
+  import { downloadChartPng, downloadChartSvg, downloadChartCsv, chartCsvExportable, chartToPngBlob } from "./chart-export";
   import type { ChartType, ChartSelection, RowData, TableFeatures } from "./index";
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
@@ -126,14 +126,103 @@
   const chartW = $derived(bodyW > 24 ? bodyW - 8 : undefined);
   const chartH = $derived(bodyH > 24 ? Math.max(120, bodyH - 8 - reserve) : undefined);
 
-  // Aggregation-friendly types offered in the picker; exotic types come via
-  // `buildSpec`, where the picker is hidden.
-  const TYPES: Array<{ value: ChartType; label: string }> = [
-    { value: "bar", label: "Bar" },
-    { value: "line", label: "Line" },
-    { value: "area", label: "Area" },
-    { value: "pie", label: "Pie" },
+  /**
+   * The chart types the picker offers, grouped by what they are FOR.
+   *
+   * This used to be four entries while the engine drew fifteen, so nine types
+   * were reachable only by hand-writing a spec - and `charting.defaultType`
+   * accepted them all, which meant setting one left the picker showing
+   * something else entirely.
+   *
+   * `needs` gates on COLUMN SHAPE only, never on the data. Column shape is
+   * stable while the user filters; row counts are not, and a picker whose
+   * options vanish mid-session because a filter emptied a group is worse than
+   * one that explains itself. Data-level problems get a sentence instead, see
+   * `typeIssue` below.
+   */
+  type TypeDef = {
+    value: ChartType;
+    label: string;
+    group: string;
+    needs?: (c: { dims: unknown[]; measures: unknown[]; dates: unknown[] }) => boolean;
+  };
+  const TYPES: TypeDef[] = [
+    { value: "bar", label: "Bar", group: "Compare" },
+    { value: "line", label: "Line", group: "Compare" },
+    { value: "area", label: "Area", group: "Compare" },
+    { value: "pie", label: "Pie", group: "Part of a whole" },
+    { value: "treemap", label: "Tree map", group: "Part of a whole" },
+    { value: "funnel", label: "Funnel", group: "Flow" },
+    { value: "waterfall", label: "Waterfall", group: "Flow" },
+    { value: "sankey", label: "Sankey", group: "Flow", needs: (c) => c.dims.length >= 2 },
+    { value: "radar", label: "Radar", group: "Distribution" },
+    { value: "heatmap", label: "Heat map", group: "Distribution", needs: (c) => c.dims.length >= 2 },
+    { value: "scatter", label: "Scatter", group: "Distribution", needs: (c) => c.measures.length >= 2 },
+    { value: "boxplot", label: "Box plot", group: "Distribution" },
+    { value: "gauge", label: "Gauge", group: "Single value" },
+    { value: "calendar", label: "Calendar", group: "Over time", needs: (c) => c.dates.length >= 1 },
   ];
+  const availableTypes = $derived(TYPES.filter((t) => !t.needs || t.needs(columns)));
+
+  // Which controls this type can actually use. Allow-lists rather than the old
+  // "not pie" guards: with thirteen types, "everything except pie" hands a
+  // gauge a Stacked checkbox.
+  const CARTESIAN: ChartType[] = ["bar", "line", "area"];
+
+  /** Named series palettes. "Theme" defers to --sg-chart-1..8 and the defaults. */
+  const PALETTES: Array<{ key: string; label: string; colors: string[] | null }> = [
+    { key: "theme", label: "Theme", colors: null },
+    { key: "ocean", label: "Ocean", colors: ["#0ea5e9", "#14b8a6", "#6366f1", "#8b5cf6", "#06b6d4"] },
+    { key: "sunset", label: "Sunset", colors: ["#f59e0b", "#ef4444", "#ec4899", "#8b5cf6", "#f97316"] },
+    { key: "forest", label: "Forest", colors: ["#16a34a", "#65a30d", "#0d9488", "#4d7c0f", "#0891b2"] },
+    { key: "slate", label: "Slate", colors: ["#475569", "#0ea5e9", "#64748b", "#38bdf8", "#94a3b8"] },
+  ];
+  const activePalette = $derived(
+    PALETTES.find((x) => x.colors && ctrl.chartPalette && x.colors.join() === ctrl.chartPalette.join())?.key ??
+      "theme",
+  );
+  const wantsHorizontal = $derived(ctrl.chartType === "bar");
+  const wantsDonut = $derived(ctrl.chartType === "pie");
+  const wantsGroupBy = $derived(ctrl.chartType !== "gauge");
+  const wantsSplitBy = $derived(
+    columns.dims.length > 1 &&
+      !["pie", "gauge", "waterfall", "funnel", "calendar"].includes(ctrl.chartType),
+  );
+  const wantsStacked = $derived(CARTESIAN.includes(ctrl.chartType));
+  const wantsLogScale = $derived(
+    CARTESIAN.includes(ctrl.chartType) || ctrl.chartType === "scatter" || ctrl.chartType === "boxplot",
+  );
+  const wantsDataLabels = $derived(
+    !["gauge", "sankey", "calendar", "treemap", "scatter", "boxplot"].includes(ctrl.chartType),
+  );
+  const wantsSecondMeasure = $derived(ctrl.chartType === "scatter");
+  /**
+   * A box plot is the one type that reduces its groups itself: the whole point
+   * is the spread of the sample, so `sum | avg | count` has nothing to say
+   * about it. Showing an Aggregate select that changes nothing is worse than
+   * not showing one.
+   */
+  const wantsReduce = $derived(!wantsSecondMeasure && ctrl.chartType !== "boxplot");
+  const typeGroups = $derived([...new Set(availableTypes.map((t) => t.group))]);
+
+  /**
+   * Why the current type cannot draw anything useful yet, as a sentence.
+   *
+   * The alternative - removing the option - means a chart can disappear from
+   * under the user when they filter. Saying what is missing keeps the picker
+   * honest without making it unstable.
+   */
+  const typeIssue = $derived.by<string | null>(() => {
+    const t = ctrl.chartType;
+    const cats = ctrl.chartSpec?.categories.length ?? 0;
+    if (t === "heatmap" && !ctrl.chartSeriesId && columns.dims.length > 1)
+      return "Heat map needs a Split by column for its rows.";
+    if (t === "sankey" && !ctrl.chartSeriesId)
+      return "Sankey needs a Split by column: Group by is the source, Split by the target.";
+    if (t === "radar" && cats > 0 && cats < 3) return "Radar needs at least 3 groups.";
+    if (t === "funnel" && cats === 1) return "Funnel needs at least 2 stages.";
+    return null;
+  });
   const REDUCERS = [
     { value: "sum", label: "Sum" },
     { value: "avg", label: "Average" },
@@ -154,7 +243,9 @@
   let exportOpen = $state(false);
   let copied = $state(false);
   const svgEl = () => bodyEl?.querySelector("svg") ?? null;
-  const csvExportable = $derived(!!(spec && spec.categories?.length && spec.series?.length));
+  // One source of truth with the serializer: a scatter chart has no categories
+  // but does have points, so the old shape test greyed out an export that works.
+  const csvExportable = $derived(!!spec && chartCsvExportable(spec));
   function exportPng() {
     const el = svgEl();
     if (el) void downloadChartPng(el, "chart.png");
@@ -386,18 +477,28 @@
         <label class="sv-grid-chart-ctl">
           <span class="sv-grid-chart-ctl-lbl">Type</span>
           <select value={ctrl.chartType} onchange={(e) => (ctrl.chartType = e.currentTarget.value as ChartType)}>
-            {#each TYPES as t (t.value)}<option value={t.value}>{t.label}</option>{/each}
+            <!-- Grouped: a flat thirteen-item list is a wall. optgroup is
+                 native, so this costs no new component. -->
+            {#each typeGroups as g (g)}
+              <optgroup label={g}>
+                {#each availableTypes.filter((t) => t.group === g) as t (t.value)}
+                  <option value={t.value}>{t.label}</option>
+                {/each}
+              </optgroup>
+            {/each}
           </select>
         </label>
+        {#if wantsGroupBy}
         <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Group by</span>
+          <span class="sv-grid-chart-ctl-lbl">{ctrl.chartType === "sankey" ? "From" : ctrl.chartType === "heatmap" ? "Columns" : "Group by"}</span>
           <select value={ctrl.chartDimensionId ?? ""} onchange={(e) => (ctrl.chartDimensionId = e.currentTarget.value || null)}>
             {#each columns.dims as d (d.id)}<option value={d.id}>{d.label}</option>{/each}
           </select>
         </label>
-        {#if columns.dims.length > 1}
+        {/if}
+        {#if wantsSplitBy}
           <label class="sv-grid-chart-ctl">
-            <span class="sv-grid-chart-ctl-lbl">Split by</span>
+            <span class="sv-grid-chart-ctl-lbl">{ctrl.chartType === "sankey" ? "To" : ctrl.chartType === "heatmap" ? "Rows" : "Split by"}</span>
             <select value={ctrl.chartSeriesId ?? ""} onchange={(e) => (ctrl.chartSeriesId = e.currentTarget.value || null)}>
               <option value="">(none)</option>
               {#each columns.dims as d (d.id)}<option value={d.id}>{d.label}</option>{/each}
@@ -405,51 +506,98 @@
           </label>
         {/if}
         <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Value</span>
+          <span class="sv-grid-chart-ctl-lbl">{wantsSecondMeasure ? "X" : ctrl.chartType === "gauge" ? "Metric" : "Value"}</span>
           <select value={ctrl.chartMeasureId ?? ""} onchange={(e) => (ctrl.chartMeasureId = e.currentTarget.value || null)}>
             {#each columns.measures as m (m.id)}<option value={m.id}>{m.label}</option>{/each}
           </select>
         </label>
+        {#if wantsSecondMeasure}
+          <label class="sv-grid-chart-ctl">
+            <span class="sv-grid-chart-ctl-lbl">Y</span>
+            <select value={ctrl.effectiveChartMeasure2Id ?? ""} onchange={(e) => (ctrl.chartMeasure2Id = e.currentTarget.value || null)}>
+              {#each columns.measures as m (m.id)}<option value={m.id}>{m.label}</option>{/each}
+            </select>
+          </label>
+        {/if}
+        {#if wantsReduce}
         <label class="sv-grid-chart-ctl">
           <span class="sv-grid-chart-ctl-lbl">Aggregate</span>
           <select value={ctrl.chartReduce} onchange={(e) => (ctrl.chartReduce = e.currentTarget.value as "sum" | "avg" | "count")}>
             {#each REDUCERS as r (r.value)}<option value={r.value}>{r.label}</option>{/each}
           </select>
         </label>
+        {/if}
         <label class="sv-grid-chart-ctl">
           <span class="sv-grid-chart-ctl-lbl">Format</span>
           <select value={ctrl.chartValueFormat} onchange={(e) => (ctrl.chartValueFormat = e.currentTarget.value as "number" | "currency" | "percent")}>
             {#each FORMATS as f (f.value)}<option value={f.value}>{f.label}</option>{/each}
           </select>
         </label>
-        {#if ctrl.chartType !== "pie"}
+        {#if wantsStacked}
           <label class="sv-grid-chart-toggle">
             <input type="checkbox" checked={ctrl.chartStacked} onchange={(e) => (ctrl.chartStacked = e.currentTarget.checked)} />
             Stacked
           </label>
+          <label class="sv-grid-chart-toggle" title="Normalise each category to 100 percent">
+            <input type="checkbox" checked={ctrl.chartStacked100} onchange={(e) => (ctrl.chartStacked100 = e.currentTarget.checked)} />
+            100%
+          </label>
+        {/if}
+        {#if wantsHorizontal}
+          <label class="sv-grid-chart-toggle" title="Bars grow rightwards - suits long category labels">
+            <input
+              type="checkbox"
+              checked={ctrl.chartOrientation === "horizontal"}
+              onchange={(e) => (ctrl.chartOrientation = e.currentTarget.checked ? "horizontal" : "vertical")}
+            />
+            Horizontal
+          </label>
         {/if}
-        <label class="sv-grid-chart-toggle">
-          <input type="checkbox" checked={ctrl.chartDataLabels} onchange={(e) => (ctrl.chartDataLabels = e.currentTarget.checked)} />
-          Labels
+        {#if wantsDonut}
+          <label class="sv-grid-chart-toggle">
+            <input type="checkbox" checked={ctrl.chartDonut} onchange={(e) => (ctrl.chartDonut = e.currentTarget.checked)} />
+            Donut
+          </label>
+        {/if}
+        <label class="sv-grid-chart-ctl">
+          <span class="sv-grid-chart-ctl-lbl">Colours</span>
+          <select
+            value={activePalette}
+            onchange={(e) => (ctrl.chartPalette = PALETTES.find((x) => x.key === e.currentTarget.value)?.colors ?? null)}
+          >
+            {#each PALETTES as pal (pal.key)}<option value={pal.key}>{pal.label}</option>{/each}
+          </select>
         </label>
-        {#if ctrl.chartType !== "pie"}
+        {#if wantsDataLabels}
+          <label class="sv-grid-chart-toggle">
+            <input type="checkbox" checked={ctrl.chartDataLabels} onchange={(e) => (ctrl.chartDataLabels = e.currentTarget.checked)} />
+            Labels
+          </label>
+        {/if}
+        {#if wantsLogScale}
           <label class="sv-grid-chart-toggle" title="Logarithmic value axis - flattens wide-range data">
             <input type="checkbox" checked={ctrl.chartLogScale} onchange={(e) => (ctrl.chartLogScale = e.currentTarget.checked)} />
             Log scale
           </label>
         {/if}
-        {#if ctrl.chartDimensionIsDate && ctrl.chartType !== "pie"}
+        {#if ctrl.chartDimensionIsDate && CARTESIAN.includes(ctrl.chartType)}
           <label class="sv-grid-chart-toggle" title="Space points by actual date - real time ticks and proportional gaps">
             <input type="checkbox" checked={ctrl.chartTimeAxis} onchange={(e) => (ctrl.chartTimeAxis = e.currentTarget.checked)} />
             Date axis
           </label>
         {/if}
       {/if}
+      {#if typeIssue}
+        <p class="sv-grid-chart-hint" role="note">{typeIssue}</p>
+      {/if}
     </div>
   </header>
 
   <div class="sv-grid-chart-panel-body" bind:this={bodyEl} bind:clientWidth={bodyW} bind:clientHeight={bodyH}>
-    {#if spec && (spec.series.length || isCustom)}
+    <!-- A gauge is one number, so it legitimately carries no series and no
+         categories. Gating purely on `series.length` sent it to the "No data"
+         message even with a perfectly good spec. -->
+    {#if spec && (spec.series.length || spec.gaugeValue != null || isCustom)}
       <SvGridChart
         {spec}
         width={chartW}

package/dist/SvGridChartView.svelte

@@ -17,12 +17,18 @@
   let {
     data,
     chart,
+    localization,
   }: {
     data: ReadonlyArray<Record<string, unknown>>;
     /** Present for parity with board/scheduler renderers; unused here. */
     columns?: unknown;
     getRowId?: unknown;
     chart: ChartViewConfig;
+    /** The grid's localization, so a localized grid gets a localized chart
+     *  without saying so twice. Resolved here rather than in SvGrid because
+     *  this renderer is lazy: a grid that never charts should not carry the
+     *  fallback in its base bundle. */
+    localization?: { locale?: string | ReadonlyArray<string> };
   } = $props();
 
   // Container size -> chart viewBox, so the chart fills the grid area and
@@ -44,6 +50,9 @@
       palette: chart.palette,
     });
     if (chart.valueFormat) s.valueFormat = chart.valueFormat;
+    const locale = chart.locale ?? localization?.locale;
+    if (locale) s.locale = locale;
+    if (chart.currency) s.currency = chart.currency;
     return s;
   });
 </script>

package/dist/SvGridChartView.svelte.d.ts

@@ -5,6 +5,13 @@ type $$ComponentProps = {
     columns?: unknown;
     getRowId?: unknown;
     chart: ChartViewConfig;
+    /** The grid's localization, so a localized grid gets a localized chart
+     *  without saying so twice. Resolved here rather than in SvGrid because
+     *  this renderer is lazy: a grid that never charts should not carry the
+     *  fallback in its base bundle. */
+    localization?: {
+        locale?: string | ReadonlyArray<string>;
+    };
 };
 declare const SvGridChartView: import("svelte").Component<$$ComponentProps, {}, "">;
 type SvGridChartView = ReturnType<typeof SvGridChartView>;

package/dist/SvGroupCell.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang="ts" generics="TData">
   import type { ServerDisplayRow } from './server-data-source'
+  import type { GridIcons } from './grid-icons'
 
   type GroupGridRow = { __group?: ServerDisplayRow<TData> } & Record<string, unknown>
   type Props = {
@@ -24,9 +25,17 @@
     leafField?: string
     /** Pixels of indentation per level. Default 18. */
     indent?: number
+    /**
+     * Icon overrides, the same map `<SvGrid icons>` takes. Only
+     * `chevron-right` is drawn here. You mount this component yourself, so it
+     * cannot inherit the grid's icons - pass the same object to both to keep
+     * the expander consistent with the rest of the chrome.
+     */
+    icons?: GridIcons
   }
 
-  let { row, onToggle, leafField, indent = 18 }: Props = $props()
+  let { row, onToggle, leafField, indent = 18, icons }: Props = $props()
+  const chevron = $derived(icons?.['chevron-right'])
   const meta = $derived(row.__group)
 </script>
 
@@ -42,8 +51,12 @@
     <!-- Same chevron the grid's own expanders and SvTree draw, so every
          expander in the library looks identical. -->
     <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">
-      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
-        stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+      {#if chevron}
+        {@render chevron()}
+      {:else}
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
+          stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+      {/if}
     </span>
     <span class="sv-group-key">{meta.key}</span>
     {#if meta.loading}<span class="sv-group-load" aria-hidden="true">…</span>{/if}
@@ -84,9 +97,21 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 12px;
+    height: 12px;
     transition: transform 0.15s;
     color: var(--sg-muted, #64748b);
   }
+  /* An `icons` override renders inside this wrapper, and this style block is
+     scoped, so its markup needs :global() to be reached. Sizing it here means
+     a custom chevron lands in the same box as the built-in and rotates with
+     the wrapper rather than needing to know the rule exists. */
+  .sv-group-chev :global(svg),
+  .sv-group-chev :global(img) {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
   .sv-group-chev.open { transform: rotate(90deg); }
   .sv-group-key { font-weight: 600; }
   .sv-group-load { color: var(--sg-muted, #64748b); font-size: 12px; }

package/dist/SvGroupCell.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { ServerDisplayRow } from './server-data-source.js';
+import type { GridIcons } from './grid-icons.js';
 declare function $$render<TData>(): {
     props: {
         /** The grid row from `serverGroupRows` (carries the `__group` marker). */
@@ -16,6 +17,13 @@ declare function $$render<TData>(): {
         leafField?: string;
         /** Pixels of indentation per level. Default 18. */
         indent?: number;
+        /**
+         * Icon overrides, the same map `<SvGrid icons>` takes. Only
+         * `chevron-right` is drawn here. You mount this component yourself, so it
+         * cannot inherit the grid's icons - pass the same object to both to keep
+         * the expander consistent with the rest of the chrome.
+         */
+        icons?: GridIcons;
     };
     exports: {};
     bindings: "";

package/dist/SvRowGroupPanel.svelte

@@ -12,6 +12,8 @@
       />
 -->
 <script lang="ts">
+  import { GRID_ICON_GLYPHS, type GridIconName, type GridIcons } from './grid-icons'
+
   type Col = { id: string; label: string }
   type Props = {
     /** Columns that can be grouped on. */
@@ -22,8 +24,15 @@
     onChange: (groupBy: string[]) => void
     /** Text shown when nothing is grouped. */
     placeholder?: string
+    /**
+     * Icon overrides, the same map `<SvGrid icons>` takes. This panel draws
+     * `drag-handle`, `remove` and `breadcrumb-separator`. You mount it
+     * yourself, so pass the same object you gave the grid to keep them
+     * consistent.
+     */
+    icons?: GridIcons
   }
-  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it' }: Props = $props()
+  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it', icons }: Props = $props()
 
   const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
   const available = $derived(columns.filter((c) => !groupBy.includes(c.id)))
@@ -68,6 +77,13 @@
   }
 </script>
 
+<!-- Same override-or-default resolution SvGrid uses, kept local because this
+     component is mounted by the consumer and never sees the grid's snippet. -->
+{#snippet ic(name: GridIconName)}
+  {@const override = icons?.[name]}
+  {#if override}{@render override()}{:else}{GRID_ICON_GLYPHS[name]}{/if}
+{/snippet}
+
 <div
   class="sv-rowgroup-panel"
   role="group"
@@ -80,7 +96,7 @@
     <span class="sv-rgp-empty">{placeholder}</span>
   {:else}
     {#each groupBy as id, i (id)}
-      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">›</span>{/if}
+      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">{@render ic('breadcrumb-separator')}</span>{/if}
       <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
       <span
         class="sv-rgp-chip"
@@ -95,9 +111,9 @@
         ondrop={() => reorder(i)}
         onkeydown={(e) => onChipKeydown(e, i)}
       >
-        <span class="sv-rgp-grip" aria-hidden="true">⠿</span>
+        <span class="sv-rgp-grip" aria-hidden="true">{@render ic('drag-handle')}</span>
         {labelOf(id)}
-        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>×</button>
+        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>{@render ic('remove')}</button>
       </span>
     {/each}
   {/if}

package/dist/SvRowGroupPanel.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type GridIcons } from './grid-icons.js';
 type Col = {
     id: string;
     label: string;
@@ -11,6 +12,13 @@ type Props = {
     onChange: (groupBy: string[]) => void;
     /** Text shown when nothing is grouped. */
     placeholder?: string;
+    /**
+     * Icon overrides, the same map `<SvGrid icons>` takes. This panel draws
+     * `drag-handle`, `remove` and `breadcrumb-separator`. You mount it
+     * yourself, so pass the same object you gave the grid to keep them
+     * consistent.
+     */
+    icons?: GridIcons;
 };
 declare const SvRowGroupPanel: import("svelte").Component<Props, {}, "">;
 type SvRowGroupPanel = ReturnType<typeof SvRowGroupPanel>;

package/dist/ai.d.ts

@@ -266,8 +266,17 @@ export type AIAnomalyOptions = {
  * export just those".
  */
 export declare function aiFindAnomalies<TFeatures extends TableFeatures, TData extends RowData>(api: SvGridApi<TFeatures, TData>, opts?: AIAnomalyOptions): Promise<AIAnomalyResult>;
-/** Chart shapes the model may choose from when planning a visualisation. */
-export type AIChartType = 'bar' | 'line' | 'area' | 'pie';
+/**
+ * Chart shapes the model may choose from when planning a visualisation.
+ *
+ * These are exactly the types the built-in panel can build from a dimension, a
+ * measure and an optional split - which is all a chart plan carries. Two
+ * families are deliberately absent, because a plan cannot express them:
+ * scatter needs a SECOND measure for its y axis, and candlestick / OHLC need
+ * four under first/max/min/last. Asking for either would produce a plan the
+ * panel renders as an empty frame, which is worse than not offering it.
+ */
+export type AIChartType = 'bar' | 'line' | 'area' | 'pie' | 'treemap' | 'funnel' | 'waterfall' | 'radar' | 'heatmap' | 'boxplot' | 'gauge' | 'calendar' | 'sankey';
 /** A chart the model proposed: its type, and the fields to plot. */
 export type AIChartPlan = {
     type: AIChartType;