@svgrid/grid 3.0.0 → 3.0.2

package/dist/SvTreeSelect.svelte

@@ -1,239 +1,239 @@
-<script lang="ts" module>
-  export type { TreeSelectNode } from './ui-app.types'
-</script>
-
-<script lang="ts">
-  /**
-   * SvTreeSelect - a single-select dropdown that shows an indented, collapsible
-   * tree in its panel (pick a node from a hierarchy). The open / position /
-   * dismiss / roving / keyboard / ARIA mechanics come from the shared
-   * `createPopoverSelect` core (with ArrowLeft/Right handled via onExtraKey for
-   * expand/collapse); this component adds the tree flattening + rendering. Covers
-   * the "cascader / tree select" pattern without depending on SvTree.
-   */
-  import type { TreeSelectNode } from './ui-app.types'
-  import SvField from './SvField.svelte'
-  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
-  import { portalToBody, popIn } from './popover'
-  import { createPopoverSelect } from './createPopoverSelect.svelte'
-  import { flattenVisible, findNodePath } from './tree-select'
-
-  type Props = Pick<
-    SvEditorProps,
-    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'block' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
-  > & {
-    nodes: ReadonlyArray<TreeSelectNode>
-    value?: string | number | null
-    onChange?: (value: string | number) => void
-    onCommit?: (value: string | number) => void
-    onCancel?: () => void
-    placeholder?: string
-    showPath?: boolean
-    expandedIds?: ReadonlyArray<string | number>
-  }
-
-  let {
-    nodes,
-    value = $bindable<string | number | null>(null),
-    onChange,
-    placeholder = 'Select…',
-    showPath = false,
-    expandedIds = [],
-    disabled = false,
-    readonly = false,
-    label,
-    hint,
-    error,
-    required = false,
-    invalid = false,
-    block = false,
-    size = 'md',
-    id,
-    name,
-    dir,
-    ariaLabel,
-    loading = false,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-ts')
-  const uid = $derived(id ?? autoId)
-
-  let expanded = $state(new Set<string | number>(expandedIds))
-  let triggerEl = $state<HTMLButtonElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let treeEl = $state<HTMLUListElement | null>(null)
-
-  const rows = $derived(flattenVisible(nodes, expanded))
-  const selectedPath = $derived(value == null ? null : findNodePath(nodes, value))
-  const triggerText = $derived(
-    !selectedPath
-      ? ''
-      : showPath
-        ? selectedPath.map((n) => n.label).join(' / ')
-        : selectedPath[selectedPath.length - 1]!.label,
-  )
-
-  function setExpanded(v: string | number, on: boolean) {
-    const next = new Set(expanded)
-    on ? next.add(v) : next.delete(v)
-    expanded = next
-  }
-  function toggleExpand(v: string | number) {
-    setExpanded(v, !expanded.has(v))
-  }
-  function pick(node: TreeSelectNode) {
-    if (node.disabled) return
-    value = node.value // enables bind:value
-    onChange?.(node.value)
-    ts.closePanel()
-  }
-  function onRowClick(row: { node: TreeSelectNode; hasChildren: boolean }) {
-    if (row.hasChildren) toggleExpand(row.node.value)
-    else pick(row.node)
-  }
-
-  const ts = createPopoverSelect({
-    itemCount: () => rows.length,
-    disabled: (i) => !!rows[i]?.node.disabled,
-    readonly: () => readonly,
-    onSelect: (i) => { const row = rows[i]; if (row) onRowClick(row) },
-    getTrigger: () => triggerEl,
-    getPanel: () => panelEl,
-    getInitialFocus: () => treeEl,
-    closeOnSelect: () => false, // onRowClick handles pick + close (branches stay open)
-    initialActive: () => Math.max(0, rows.findIndex((r) => r.node.value === value)),
-    minWidth: () => 220,
-    estimatedHeight: () => 300,
-    onExtraKey: (e, act) => {
-      const row = rows[act]
-      if (!row) return false
-      // "expand" opens the node or steps into the first child; "collapse" closes
-      // it or jumps to the parent - same fallback as createTree's core.
-      const expand = () => {
-        if (row.hasChildren && !row.expanded) setExpanded(row.node.value, true)
-        else if (row.hasChildren && row.expanded) ts.active = Math.min(act + 1, rows.length - 1)
-      }
-      const collapse = () => {
-        if (row.hasChildren && row.expanded) setExpanded(row.node.value, false)
-        else {
-          let pi = act - 1
-          while (pi >= 0 && rows[pi]!.depth >= row.depth) pi--
-          if (pi >= 0) ts.active = pi
-        }
-      }
-      if (e.key === 'ArrowRight') { e.preventDefault(); expand(); return true }
-      if (e.key === 'ArrowLeft') { e.preventDefault(); collapse(); return true }
-      return false
-    },
-    idPrefix: 'sv-ts',
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
-  <div class="sv-ts sv-ts--{size}"
-    class:is-block={block} class:is-disabled={disabled}>
-    <button
-      bind:this={triggerEl}
-      type="button"
-      class="sv-ts__trigger"
-      class:is-invalid={invalid}
-      {disabled}
-      onclick={() => ts.toggle()}
-      {...ts.triggerProps('tree')}
-      {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
-    >
-      <span class="sv-ts__value" class:is-placeholder={!triggerText}>{triggerText || placeholder}</span>
-      <span class="sv-ts__arrow" aria-hidden="true">▾</span>
-    </button>
-    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
-  </div>
-</SvField>
-
-{#if ts.open}
-  <div
-    bind:this={panelEl}
-    class="sv-ts__panel"
-    dir={dir}
-    use:portalToBody
-    use:popIn={{ up: ts.rect.openUpward }}
-    style:position="fixed"
-    style:top={`${ts.rect.top}px`}
-    style:left={`${ts.rect.left}px`}
-    style:min-width={`${ts.rect.width}px`}
-  >
-    <ul
-      bind:this={treeEl}
-      id={ts.panelId}
-      class="sv-ts__tree"
-      role="tree"
-      aria-label={label ?? ariaLabel ?? 'Tree'}
-      aria-activedescendant={ts.activeDescendant()}
-      tabindex="0"
-      style:max-height={`${ts.rect.maxHeight}px`}
-      onkeydown={ts.onPanelKeydown}
-    >
-      {#each rows as row, i (row.node.value)}
-        <li
-          class="sv-ts__row"
-          class:is-active={ts.isActive(i)}
-          class:is-selected={row.node.value === value}
-          class:is-disabled={row.node.disabled}
-          role="treeitem"
-          aria-selected={row.node.value === value}
-          aria-expanded={row.hasChildren ? row.expanded : undefined}
-          style:padding-inline-start={`${8 + row.depth * 16}px`}
-          onclick={() => onRowClick(row)}
-          {...ts.itemProps(i)}
-        >
-          {#if row.hasChildren}
-            <!-- Same chevron as SvTree and the grid's expanders. -->
-            <span class="sv-ts__chev" class:is-open={row.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>
-            </span>
-          {:else}
-            <span class="sv-ts__chev sv-ts__chev--leaf" aria-hidden="true"></span>
-          {/if}
-          <span class="sv-ts__label">{row.node.label}</span>
-        </li>
-      {/each}
-    </ul>
-  </div>
-{/if}
-
-<style>
-  .sv-ts { --_accent: var(--sg-accent, #2563eb); display: inline-flex; width: 240px; }
-  .sv-ts.is-disabled { opacity: 0.6; }
-  .sv-ts__trigger {
-    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: start;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-    font: inherit; cursor: pointer; padding: 0 9px;
-  }
-  .sv-ts--sm .sv-ts__trigger { height: 28px; font-size: 12px; }
-  .sv-ts--md .sv-ts__trigger { height: 34px; font-size: 13px; }
-  .sv-ts--lg .sv-ts__trigger { height: 40px; font-size: 15px; }
-  .sv-ts__trigger:focus-visible { outline: none; border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-ts__trigger.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-ts__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .sv-ts__value.is-placeholder { color: var(--sg-muted, #94a3b8); }
-  .sv-ts__arrow { color: var(--sg-muted, #64748b); font-size: 10px; }
-
-  :global(.sv-ts__panel) {
-    z-index: 2147483646; max-height: 320px; max-width: 92vw; overflow: hidden;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
-    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
-  }
-  :global(.sv-ts__tree) { list-style: none; margin: 0; padding: 4px; overflow: auto; max-height: 320px; outline: none; }
-  :global(.sv-ts__row) { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
-  :global(.sv-ts__row.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
-  :global(.sv-ts__row.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
-  :global(.sv-ts__row.is-disabled) { opacity: 0.5; cursor: not-allowed; }
-  :global(.sv-ts__chev) { width: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sg-muted, #64748b); transition: transform 0.12s; }
-  :global(.sv-ts__chev.is-open) { transform: rotate(90deg); }
-  :global(.sv-ts__chev--leaf) { visibility: hidden; }
-  :global(.sv-ts__label) { flex: 1; white-space: nowrap; }
-  /* Fill the container - see `block` in SvEditorProps. */
-  .sv-ts.is-block { width: 100%; max-width: 100%; }
-</style>
+<script lang="ts" module>
+  export type { TreeSelectNode } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvTreeSelect - a single-select dropdown that shows an indented, collapsible
+   * tree in its panel (pick a node from a hierarchy). The open / position /
+   * dismiss / roving / keyboard / ARIA mechanics come from the shared
+   * `createPopoverSelect` core (with ArrowLeft/Right handled via onExtraKey for
+   * expand/collapse); this component adds the tree flattening + rendering. Covers
+   * the "cascader / tree select" pattern without depending on SvTree.
+   */
+  import type { TreeSelectNode } from './ui-app.types'
+  import SvField from './SvField.svelte'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+  import { portalToBody, popIn } from './popover'
+  import { createPopoverSelect } from './createPopoverSelect.svelte'
+  import { flattenVisible, findNodePath } from './tree-select'
+
+  type Props = Pick<
+    SvEditorProps,
+    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'block' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
+  > & {
+    nodes: ReadonlyArray<TreeSelectNode>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    onCommit?: (value: string | number) => void
+    onCancel?: () => void
+    placeholder?: string
+    showPath?: boolean
+    expandedIds?: ReadonlyArray<string | number>
+  }
+
+  let {
+    nodes,
+    value = $bindable<string | number | null>(null),
+    onChange,
+    placeholder = 'Select…',
+    showPath = false,
+    expandedIds = [],
+    disabled = false,
+    readonly = false,
+    label,
+    hint,
+    error,
+    required = false,
+    invalid = false,
+    block = false,
+    size = 'md',
+    id,
+    name,
+    dir,
+    ariaLabel,
+    loading = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-ts')
+  const uid = $derived(id ?? autoId)
+
+  let expanded = $state(new Set<string | number>(expandedIds))
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let treeEl = $state<HTMLUListElement | null>(null)
+
+  const rows = $derived(flattenVisible(nodes, expanded))
+  const selectedPath = $derived(value == null ? null : findNodePath(nodes, value))
+  const triggerText = $derived(
+    !selectedPath
+      ? ''
+      : showPath
+        ? selectedPath.map((n) => n.label).join(' / ')
+        : selectedPath[selectedPath.length - 1]!.label,
+  )
+
+  function setExpanded(v: string | number, on: boolean) {
+    const next = new Set(expanded)
+    on ? next.add(v) : next.delete(v)
+    expanded = next
+  }
+  function toggleExpand(v: string | number) {
+    setExpanded(v, !expanded.has(v))
+  }
+  function pick(node: TreeSelectNode) {
+    if (node.disabled) return
+    value = node.value // enables bind:value
+    onChange?.(node.value)
+    ts.closePanel()
+  }
+  function onRowClick(row: { node: TreeSelectNode; hasChildren: boolean }) {
+    if (row.hasChildren) toggleExpand(row.node.value)
+    else pick(row.node)
+  }
+
+  const ts = createPopoverSelect({
+    itemCount: () => rows.length,
+    disabled: (i) => !!rows[i]?.node.disabled,
+    readonly: () => readonly,
+    onSelect: (i) => { const row = rows[i]; if (row) onRowClick(row) },
+    getTrigger: () => triggerEl,
+    getPanel: () => panelEl,
+    getInitialFocus: () => treeEl,
+    closeOnSelect: () => false, // onRowClick handles pick + close (branches stay open)
+    initialActive: () => Math.max(0, rows.findIndex((r) => r.node.value === value)),
+    minWidth: () => 220,
+    estimatedHeight: () => 300,
+    onExtraKey: (e, act) => {
+      const row = rows[act]
+      if (!row) return false
+      // "expand" opens the node or steps into the first child; "collapse" closes
+      // it or jumps to the parent - same fallback as createTree's core.
+      const expand = () => {
+        if (row.hasChildren && !row.expanded) setExpanded(row.node.value, true)
+        else if (row.hasChildren && row.expanded) ts.active = Math.min(act + 1, rows.length - 1)
+      }
+      const collapse = () => {
+        if (row.hasChildren && row.expanded) setExpanded(row.node.value, false)
+        else {
+          let pi = act - 1
+          while (pi >= 0 && rows[pi]!.depth >= row.depth) pi--
+          if (pi >= 0) ts.active = pi
+        }
+      }
+      if (e.key === 'ArrowRight') { e.preventDefault(); expand(); return true }
+      if (e.key === 'ArrowLeft') { e.preventDefault(); collapse(); return true }
+      return false
+    },
+    idPrefix: 'sv-ts',
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
+  <div class="sv-ts sv-ts--{size}"
+    class:is-block={block} class:is-disabled={disabled}>
+    <button
+      bind:this={triggerEl}
+      type="button"
+      class="sv-ts__trigger"
+      class:is-invalid={invalid}
+      {disabled}
+      onclick={() => ts.toggle()}
+      {...ts.triggerProps('tree')}
+      {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+    >
+      <span class="sv-ts__value" class:is-placeholder={!triggerText}>{triggerText || placeholder}</span>
+      <span class="sv-ts__arrow" aria-hidden="true">▾</span>
+    </button>
+    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+  </div>
+</SvField>
+
+{#if ts.open}
+  <div
+    bind:this={panelEl}
+    class="sv-ts__panel"
+    dir={dir}
+    use:portalToBody
+    use:popIn={{ up: ts.rect.openUpward }}
+    style:position="fixed"
+    style:top={`${ts.rect.top}px`}
+    style:left={`${ts.rect.left}px`}
+    style:min-width={`${ts.rect.width}px`}
+  >
+    <ul
+      bind:this={treeEl}
+      id={ts.panelId}
+      class="sv-ts__tree"
+      role="tree"
+      aria-label={label ?? ariaLabel ?? 'Tree'}
+      aria-activedescendant={ts.activeDescendant()}
+      tabindex="0"
+      style:max-height={`${ts.rect.maxHeight}px`}
+      onkeydown={ts.onPanelKeydown}
+    >
+      {#each rows as row, i (row.node.value)}
+        <li
+          class="sv-ts__row"
+          class:is-active={ts.isActive(i)}
+          class:is-selected={row.node.value === value}
+          class:is-disabled={row.node.disabled}
+          role="treeitem"
+          aria-selected={row.node.value === value}
+          aria-expanded={row.hasChildren ? row.expanded : undefined}
+          style:padding-inline-start={`${8 + row.depth * 16}px`}
+          onclick={() => onRowClick(row)}
+          {...ts.itemProps(i)}
+        >
+          {#if row.hasChildren}
+            <!-- Same chevron as SvTree and the grid's expanders. -->
+            <span class="sv-ts__chev" class:is-open={row.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>
+            </span>
+          {:else}
+            <span class="sv-ts__chev sv-ts__chev--leaf" aria-hidden="true"></span>
+          {/if}
+          <span class="sv-ts__label">{row.node.label}</span>
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+<style>
+  .sv-ts { --_accent: var(--sg-accent, #2563eb); display: inline-flex; width: 240px; }
+  .sv-ts.is-disabled { opacity: 0.6; }
+  .sv-ts__trigger {
+    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: start;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    font: inherit; cursor: pointer; padding: 0 9px;
+  }
+  .sv-ts--sm .sv-ts__trigger { height: 28px; font-size: 12px; }
+  .sv-ts--md .sv-ts__trigger { height: 34px; font-size: 13px; }
+  .sv-ts--lg .sv-ts__trigger { height: 40px; font-size: 15px; }
+  .sv-ts__trigger:focus-visible { outline: none; border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ts__trigger.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ts__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-ts__value.is-placeholder { color: var(--sg-muted, #94a3b8); }
+  .sv-ts__arrow { color: var(--sg-muted, #64748b); font-size: 10px; }
+
+  :global(.sv-ts__panel) {
+    z-index: 2147483646; max-height: 320px; max-width: 92vw; overflow: hidden;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
+  }
+  :global(.sv-ts__tree) { list-style: none; margin: 0; padding: 4px; overflow: auto; max-height: 320px; outline: none; }
+  :global(.sv-ts__row) { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
+  :global(.sv-ts__row.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  :global(.sv-ts__row.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
+  :global(.sv-ts__row.is-disabled) { opacity: 0.5; cursor: not-allowed; }
+  :global(.sv-ts__chev) { width: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sg-muted, #64748b); transition: transform 0.12s; }
+  :global(.sv-ts__chev.is-open) { transform: rotate(90deg); }
+  :global(.sv-ts__chev--leaf) { visibility: hidden; }
+  :global(.sv-ts__label) { flex: 1; white-space: nowrap; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-ts.is-block { width: 100%; max-width: 100%; }
+</style>

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;

package/dist/ai.js

@@ -511,7 +511,7 @@ export async function aiChart(api, query, opts = {}) {
         `into a strict-JSON chart plan the grid can render.\n\n` +
         `Columns:\n${schemaToPromptBlock(schema)}\n\n` +
         `Output JSON schema:\n` +
-        `{ "type": "bar"|"line"|"area"|"pie", ` +
+        `{ "type": "bar"|"line"|"area"|"pie"|"treemap"|"funnel"|"waterfall"|"radar"|"heatmap"|"boxplot"|"gauge"|"calendar"|"sankey", ` +
         `"dimension": "<a categorical column to group by>", ` +
         `"series": "<a second categorical column to split into series, or null>", ` +
         `"measure": "<a numeric column to aggregate>", ` +
@@ -523,6 +523,16 @@ export async function aiChart(api, query, opts = {}) {
         `"rationale": "<one-sentence explanation>" }\n\n` +
         `Rules: pick "dimension" and "series" from text/date columns and "measure" ` +
         `from a numeric column; use only column names from the list above; ` +
+        `default to "bar" unless the request clearly wants another type. ` +
+        `Type hints: share/proportion/breakdown -> pie; nested/hierarchy/"what makes ` +
+        `up" -> treemap; drop-off/conversion/stages/pipeline -> funnel; ` +
+        `running total/contribution/bridge -> waterfall; comparing several measures ` +
+        `per item -> radar; a grid of two dimensions -> heatmap (needs "series"); ` +
+        `spread/distribution/variance/outliers/percentiles -> boxplot; a single ` +
+        `number vs a target -> gauge (leave "dimension" null); a year of daily ` +
+        `activity -> calendar (dimension must be a date column); flow between two ` +
+        `things -> sankey (needs "series": dimension is the source, series the ` +
+        `target). ` +
         `"stacked"/"stack" -> stacked:true; "log"/"logarithmic" -> logScale:true; ` +
         `"over time"/"by date"/a date dimension -> timeAxis:true; ` +
         `money/revenue/price/$ -> valueFormat:"currency"; rate/%/share -> valueFormat:"percent"; ` +
@@ -537,7 +547,11 @@ export async function aiChart(api, query, opts = {}) {
     });
     const valid = new Set(schema.map((c) => c.field));
     const numericFields = new Set(schema.filter((c) => c.type === 'number').map((c) => c.field));
-    const CHART_TYPES = ['bar', 'line', 'area', 'pie'];
+    const CHART_TYPES = [
+        'bar', 'line', 'area', 'pie',
+        'treemap', 'funnel', 'waterfall', 'radar',
+        'heatmap', 'boxplot', 'gauge', 'calendar', 'sankey',
+    ];
     plan.type = CHART_TYPES.includes(plan.type) ? plan.type : 'bar';
     plan.dimension = plan.dimension && valid.has(plan.dimension) ? plan.dimension : null;
     plan.series = plan.series && valid.has(plan.series) && plan.series !== plan.dimension ? plan.series : null;
@@ -545,6 +559,21 @@ export async function aiChart(api, query, opts = {}) {
         plan.measure && numericFields.has(plan.measure)
             ? plan.measure
             : (schema.find((c) => c.type === 'number')?.field ?? null);
+    // Shape check. Some types need more than a dimension and a measure, and a
+    // plan that does not satisfy one renders an empty frame - the model asked for
+    // a chart the data cannot make. Fall back to a bar, which any dimension and
+    // measure can draw, rather than showing nothing and blaming the request.
+    const dateFields = new Set(schema.filter((c) => c.type === 'date').map((c) => c.field));
+    const needsSplit = plan.type === 'heatmap' || plan.type === 'sankey';
+    if (needsSplit && !plan.series)
+        plan.type = 'bar';
+    if (plan.type === 'calendar' && !(plan.dimension && dateFields.has(plan.dimension)))
+        plan.type = 'bar';
+    // A gauge is one number: it has no category axis, so a dimension is noise.
+    if (plan.type === 'gauge')
+        plan.dimension = null;
+    if (plan.type !== 'gauge' && !plan.dimension)
+        plan.type = 'bar';
     plan.reduce = ['sum', 'avg', 'count'].includes(plan.reduce) ? plan.reduce : 'sum';
     plan.stacked = plan.stacked === true;
     plan.logScale = plan.logScale === true;
@@ -640,10 +669,22 @@ function buildMockChart(prompt) {
     const typed = extractFieldTypes(prompt);
     const textFields = typed.filter((f) => f.type === 'string' || f.type === 'date').map((f) => f.name);
     const numberFields = typed.filter((f) => f.type === 'number').map((f) => f.name);
-    const type = /\bline\b|\btrend\b|over time/.test(q) ? 'line'
-        : /\barea\b/.test(q) ? 'area'
-            : /\bpie\b|share|proportion|breakdown/.test(q) ? 'pie'
-                : 'bar';
+    // Mirrors the type hints in the real prompt, so the bundled offline provider
+    // can reach the same charts a model can. Ordered most-specific first: "share
+    // of the pipeline" is a funnel request, not a pie one.
+    const type = /\bfunnel\b|drop.?off|conversion|\bstages?\b|pipeline/.test(q) ? 'funnel'
+        : /\bwaterfall\b|running total|contribution|\bbridge\b/.test(q) ? 'waterfall'
+            : /\btree ?map\b|nested|hierarch/.test(q) ? 'treemap'
+                : /\bradar\b|spider|multi.?measure/.test(q) ? 'radar'
+                    : /\bheat ?map\b/.test(q) ? 'heatmap'
+                        : /\bbox ?plot\b|spread|distribution|variance|outlier|percentile|quartile/.test(q) ? 'boxplot'
+                            : /\bgauge\b|\bdial\b|vs target|against target/.test(q) ? 'gauge'
+                                : /\bcalendar\b|daily activity|year of/.test(q) ? 'calendar'
+                                    : /\bsankey\b|\bflow\b/.test(q) ? 'sankey'
+                                        : /\bline\b|\btrend\b|over time/.test(q) ? 'line'
+                                            : /\barea\b/.test(q) ? 'area'
+                                                : /\bpie\b|share|proportion|breakdown/.test(q) ? 'pie'
+                                                    : 'bar';
     const byMatch = q.match(/\bby\s+([a-z0-9_ ]+?)(?:\s+(?:split|stacked|grouped|by|as|,|$))/);
     const pickText = (hint) => {
         if (hint) {
@@ -654,7 +695,10 @@ function buildMockChart(prompt) {
         return null;
     };
     const dimension = pickText(byMatch?.[1]) ?? textFields[0] ?? null;
-    const series = /\b(split|stack(?:ed)?|by product|by category|per)\b/.test(q)
+    // Heatmap and sankey are two-dimension charts: without a split the shape
+    // check downgrades them to a bar, so the mock would answer "heatmap" with a
+    // bar chart and look broken rather than offline.
+    const series = /\b(split|stack(?:ed)?|by product|by category|per)\b/.test(q) || type === 'heatmap' || type === 'sankey'
         ? (textFields.find((t) => t !== dimension) ?? null)
         : null;
     const measure = numberFields.find((n) => q.includes(n.toLowerCase())) ?? numberFields[0] ?? null;