@svgrid/grid 2.2.30 → 2.2.32

package/src/SvGridSelect.svelte

@@ -38,6 +38,12 @@
     loadOptions?: (query: string) => Promise<Row[]>
     debounceMs?: number
     loadingText?: string
+    /** Shown when the list is empty / a search matches nothing (localization). */
+    emptyText?: string
+    /** Placeholder in the panel's search box (localization). */
+    searchPlaceholder?: string
+    /** Accessible name for the panel's search box (localization). */
+    searchLabel?: string
   }
 
   let {
@@ -54,6 +60,9 @@
     loadOptions,
     debounceMs = 250,
     loadingText = 'Loading…',
+    emptyText = 'No matches',
+    searchPlaceholder = 'Search…',
+    searchLabel = 'Search options',
     disabled = false,
     readonly = false,
     label,
@@ -168,8 +177,8 @@
         aria-expanded="true"
         aria-controls={gs.panelId}
         aria-activedescendant={gs.activeDescendant()}
-        aria-label="Search options"
-        placeholder="Search…"
+        aria-label={searchLabel}
+        placeholder={searchPlaceholder}
         value={search}
         oninput={(e) => { search = e.currentTarget.value; gs.active = 0; if (loadOptions) runLoad(search) }}
       />
@@ -205,7 +214,7 @@
             {/each}
           </div>
         {:else}
-          <div class="sv-gs__empty" role="row">{loading ? loadingText : 'No matches'}</div>
+          <div class="sv-gs__empty" role="row">{loading ? loadingText : emptyText}</div>
         {/each}
         {#if loading && filtered.length}
           <div class="sv-gs__empty" role="row" aria-live="polite">{loadingText}</div>

package/src/SvGroupCell.svelte

@@ -39,7 +39,12 @@
     aria-label={meta.expanded ? 'Collapse group' : 'Expand group'}
     onclick={() => onToggle(row)}
   >
-    <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">▸</span>
+    <!-- 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>
+    </span>
     <span class="sv-group-key">{meta.key}</span>
     {#if meta.loading}<span class="sv-group-load" aria-hidden="true">…</span>{/if}
   </button>
@@ -76,7 +81,9 @@
     cursor: pointer;
   }
   .sv-group-chev {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     transition: transform 0.15s;
     color: var(--sg-muted, #64748b);
   }

package/src/SvMultiSelect.svelte

@@ -37,6 +37,12 @@
     /** Debounce for remote search. Default 250ms. */
     debounceMs?: number
     loadingText?: string
+    /** Shown when the list is empty / a search matches nothing (localization). */
+    emptyText?: string
+    /** Placeholder in the panel's search box (localization). */
+    searchPlaceholder?: string
+    /** Accessible name for the panel's search box (localization). */
+    searchLabel?: string
   }
 
   let {
@@ -52,6 +58,9 @@
     loadOptions,
     debounceMs = 250,
     loadingText = 'Loading…',
+    emptyText = 'No matches',
+    searchPlaceholder = 'Search…',
+    searchLabel = 'Search options',
     disabled = false,
     readonly = false,
     label,
@@ -193,8 +202,8 @@
         aria-expanded="true"
         aria-controls={ms.panelId}
         aria-activedescendant={ms.activeDescendant()}
-        aria-label="Search options"
-        placeholder="Search…"
+        aria-label={searchLabel}
+        placeholder={searchPlaceholder}
         value={search}
         oninput={(e) => { search = e.currentTarget.value; ms.active = 0; if (loadOptions) runLoad(search) }}
       />
@@ -224,7 +233,7 @@
           <span class="sv-ms__label">{opt.label}</span>
         </li>
       {:else}
-        <li class="sv-ms__empty" aria-disabled="true">{loading ? loadingText : 'No matches'}</li>
+        <li class="sv-ms__empty" aria-disabled="true">{loading ? loadingText : emptyText}</li>
       {/each}
       {#if loading && filtered.length}
         <li class="sv-ms__loading" aria-live="polite">{loadingText}</li>

package/src/SvPasswordInput.svelte

@@ -142,7 +142,7 @@
   .sv-pw__meter { display: flex; gap: 4px; }
   .sv-pw__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--sg-border, #e2e8f0); transition: background 0.15s; }
   .sv-pw__bar.on.is-lvl1 { background: var(--sg-danger, #dc2626); }
-  .sv-pw__bar.on.is-lvl2 { background: var(--sg-warning, #f59e0b); }
+  .sv-pw__bar.on.is-lvl2 { background: var(--sg-warning, #d97706); }
   .sv-pw__bar.on.is-lvl3 { background: #eab308; }
   .sv-pw__bar.on.is-lvl4 { background: var(--sg-success, #16a34a); }
   .sv-pw__strength { font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }

package/src/SvProgress.svelte

@@ -75,7 +75,7 @@
     display: flex; align-items: center; gap: 10px; width: 100%;
   }
   .sv-prog--success { --_c: var(--sg-success, #16a34a); }
-  .sv-prog--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-prog--warning { --_c: var(--sg-warning, #d97706); }
   .sv-prog--danger { --_c: var(--sg-danger, #dc2626); }
   .sv-prog__track {
     position: relative; flex: 1; overflow: hidden;

package/src/SvRating.svelte

@@ -96,7 +96,7 @@
 <style>
   .sv-rating {
     --_on: var(--sg-rating-on, #f59e0b);
-    --_off: var(--sg-rating-empty, #d1d5db);
+    --_off: var(--sg-rating-empty, #cbd5e1);
     --_sz: 22px;
     display: inline-flex; gap: 2px; align-items: center;
   }

package/src/SvResult.svelte

@@ -59,7 +59,7 @@
   }
   .sv-result--success { --_c: var(--sg-success, #16a34a); }
   .sv-result--error { --_c: var(--sg-danger, #dc2626); }
-  .sv-result--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-result--warning { --_c: var(--sg-warning, #d97706); }
   .sv-result--notfound { --_c: var(--sg-muted, #64748b); }
   .sv-result__icon {
     display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 4px;

package/src/SvRichText.svelte

@@ -19,7 +19,7 @@
    * <SvRichText bind:value={html} placeholder="Write something…" />
    * ```
    */
-  import { nextEditorId } from './editor-contract'
+  import { nextEditorId, resolveMessages } from './editor-contract'
 
   const DEFAULT_TOOLS: RichTextTool[] = [
     'bold', 'italic', 'underline', 'strike', '|',
@@ -29,16 +29,27 @@
     'link', 'clear', '|', 'undo', 'redo',
   ]
 
-  const META: Record<Exclude<RichTextTool, '|'>, { label: string; glyph: string }> = {
-    bold: { label: 'Bold', glyph: 'B' }, italic: { label: 'Italic', glyph: 'I' },
-    underline: { label: 'Underline', glyph: 'U' }, strike: { label: 'Strikethrough', glyph: 'S' },
-    h1: { label: 'Heading 1', glyph: 'H1' }, h2: { label: 'Heading 2', glyph: 'H2' },
-    h3: { label: 'Heading 3', glyph: 'H3' }, p: { label: 'Paragraph', glyph: '¶' },
-    ul: { label: 'Bullet list', glyph: '•' }, ol: { label: 'Numbered list', glyph: '1.' },
-    quote: { label: 'Quote', glyph: '❝' }, code: { label: 'Code block', glyph: '</>' },
-    alignLeft: { label: 'Align left', glyph: '≡' }, alignCenter: { label: 'Align center', glyph: '≣' },
-    alignRight: { label: 'Align right', glyph: '≡' }, link: { label: 'Link', glyph: '🔗' },
-    clear: { label: 'Clear formatting', glyph: '⌫' }, undo: { label: 'Undo', glyph: '↶' }, redo: { label: 'Redo', glyph: '↷' },
+  /** Toolbar glyphs. Mode-independent and not language-dependent, so they stay
+   *  fixed; the LABELS beside them are localizable via `messages`. */
+  const GLYPH: Record<Exclude<RichTextTool, '|'>, string> = {
+    bold: 'B', italic: 'I', underline: 'U', strike: 'S',
+    h1: 'H1', h2: 'H2', h3: 'H3', p: '¶',
+    ul: '•', ol: '1.', quote: '❝', code: '</>',
+    alignLeft: '≡', alignCenter: '≣', alignRight: '≡', link: '🔗',
+    clear: '⌫', undo: '↶', redo: '↷',
+  }
+
+  /** User-facing strings (localizable via `messages`). Every one is a tooltip +
+   *  accessible name on a toolbar button, so leaving them hard-coded made the
+   *  whole toolbar English-only for screen-reader users. */
+  type RichTextMessages = Record<Exclude<RichTextTool, '|'>, string> & { linkPrompt: string; toolbar: string }
+  const DEFAULT_MESSAGES: RichTextMessages = {
+    bold: 'Bold', italic: 'Italic', underline: 'Underline', strike: 'Strikethrough',
+    h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', p: 'Paragraph',
+    ul: 'Bullet list', ol: 'Numbered list', quote: 'Quote', code: 'Code block',
+    alignLeft: 'Align left', alignCenter: 'Align center', alignRight: 'Align right',
+    link: 'Link', clear: 'Clear formatting', undo: 'Undo', redo: 'Redo',
+    linkPrompt: 'Link URL', toolbar: 'Formatting',
   }
 
   type Props = {
@@ -52,6 +63,8 @@
     /** Toolbar tools + order; use '|' for a separator. */
     tools?: RichTextTool[]
     ariaLabel?: string
+    /** Override any toolbar label / prompt (localization). */
+    messages?: Partial<RichTextMessages>
   }
 
   let {
@@ -63,8 +76,10 @@
     minHeight = '160px',
     tools = DEFAULT_TOOLS,
     ariaLabel = 'Rich text editor',
+    messages,
   }: Props = $props()
 
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
   const uid = nextEditorId('sv-rt')
   let editorEl = $state<HTMLDivElement | null>(null)
   let focused = $state(false)
@@ -109,14 +124,14 @@
     ul: () => exec('insertUnorderedList'), ol: () => exec('insertOrderedList'),
     quote: () => exec('formatBlock', 'BLOCKQUOTE'), code: () => exec('formatBlock', 'PRE'),
     alignLeft: () => exec('justifyLeft'), alignCenter: () => exec('justifyCenter'), alignRight: () => exec('justifyRight'),
-    link: () => { const url = typeof prompt === 'function' ? prompt('Link URL', 'https://') : null; if (url) exec('createLink', url) },
+    link: () => { const url = typeof prompt === 'function' ? prompt(M.linkPrompt, 'https://') : null; if (url) exec('createLink', url) },
     clear: () => exec('removeFormat'), undo: () => exec('undo'), redo: () => exec('redo'),
   }
 </script>
 
 <div class="sv-rt" class:is-disabled={disabled} class:is-readonly={readonly}>
   {#if !readonly}
-    <div class="sv-rt__toolbar" role="toolbar" aria-label="Formatting" aria-controls={uid}>
+    <div class="sv-rt__toolbar" role="toolbar" aria-label={M.toolbar} aria-controls={uid}>
       {#each tools as t, i (i)}
         {#if t === '|'}
           <span class="sv-rt__sep" aria-hidden="true"></span>
@@ -126,13 +141,13 @@
             class="sv-rt__btn"
             class:is-on={activeState[t]}
             data-tool={t}
-            title={META[t].label}
-            aria-label={META[t].label}
+            title={M[t]}
+            aria-label={M[t]}
             aria-pressed={activeState[t] ? true : undefined}
             {disabled}
             onmousedown={(e) => e.preventDefault()}
             onclick={run[t]}
-          >{META[t].glyph}</button>
+          >{GLYPH[t]}</button>
         {/if}
       {/each}
     </div>

package/src/SvSwitchButton.svelte

@@ -53,8 +53,9 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <!-- role="switch" arrives via switchProps(), which the a11y pass cannot see through -->
+  <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
   <button
-    role="switch"
     class="sv-switch sv-switch--{size}"
     class:is-on={checked}
     class:is-readonly={readonly}

package/src/SvToaster.svelte

@@ -135,7 +135,7 @@
 
   :global(.sv-toast--success) { --_accent: var(--sg-success, #16a34a); }
   :global(.sv-toast--error) { --_accent: var(--sg-danger, #dc2626); }
-  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #f59e0b); }
+  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #d97706); }
   :global(.sv-toast--info) { --_accent: var(--sg-accent, #2563eb); }
 
   :global(.sv-toast__icon) { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_accent); font-weight: 700; }

package/src/SvTree.svelte

@@ -48,6 +48,11 @@
     /** Render a built-in search box that drives the filter. */
     searchable?: boolean
     searchPlaceholder?: string
+    /** Placeholder row shown under a lazy node while its children load
+     *  (localization). */
+    loadingText?: string
+    /** Accessible name for the search box's clear button (localization). */
+    clearSearchLabel?: string
     /** Sort siblings by label ('asc'/'desc') or a custom comparator. */
     sort?: 'asc' | 'desc' | ((a: TreeNode, b: TreeNode) => number)
     /** Allow inline rename (double-click or F2). Fires onRename. */
@@ -77,6 +82,8 @@
     filter,
     searchable = false,
     searchPlaceholder = 'Search...',
+    loadingText = 'Loading...',
+    clearSearchLabel = 'Clear search',
     sort,
     editable = false,
     onRename,
@@ -173,7 +180,7 @@
     if (!node?.lazy || loaded.has(id) || loadingIds.has(id)) return
     loadingIds = new Set(loadingIds).add(id)
     // A placeholder row shows immediately while the promise resolves.
-    loaded = new Map(loaded).set(id, [{ id: `${id}__loading`, label: 'Loading...', disabled: true }])
+    loaded = new Map(loaded).set(id, [{ id: `${id}__loading`, label: loadingText, disabled: true }])
     try {
       const kids = await loadChildren(node)
       loaded = new Map(loaded).set(id, kids)
@@ -268,7 +275,7 @@
   <div class="sv-tree__search">
     <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
     <input class="sv-tree__search-input" type="text" placeholder={searchPlaceholder} bind:value={query} aria-label={searchPlaceholder} />
-    {#if query}<button type="button" class="sv-tree__search-clear" aria-label="Clear search" onclick={() => (query = '')}>&times;</button>{/if}
+    {#if query}<button type="button" class="sv-tree__search-clear" aria-label={clearSearchLabel} onclick={() => (query = '')}>&times;</button>{/if}
   </div>
 {/if}
 <!-- svelte-ignore a11y_no_static_element_interactions -->

package/src/SvTreeSelect.svelte

@@ -186,7 +186,11 @@
           {...ts.itemProps(i)}
         >
           {#if row.hasChildren}
-            <span class="sv-ts__chev" class:is-open={row.expanded} aria-hidden="true">▸</span>
+            <!-- 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}
@@ -226,7 +230,7 @@
   :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; color: var(--sg-muted, #64748b); transition: transform 0.12s; font-size: 10px; }
+  :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; }

package/src/build-api.ts

@@ -455,6 +455,21 @@ export function createGridApi<
       clearFilter(columnId) {
         ctx.clearColumnFilter(columnId);
       },
+      refreshEditorOptions(columnId) {
+        // Async `editorOptions` are cached per column (or per column+row for a
+        // per-row source) so opening an editor twice does not refetch. This
+        // drops those entries, so the next render re-runs the source - use it
+        // when the underlying list changed server-side.
+        if (columnId == null) {
+          ctx.asyncEditorOptions = {};
+          return;
+        }
+        const next = { ...ctx.asyncEditorOptions };
+        for (const key of Object.keys(next)) {
+          if (key === columnId || key.startsWith(`${columnId}::`)) delete next[key];
+        }
+        ctx.asyncEditorOptions = next;
+      },
       clearAllFilters() {
         // See `setFilter` for why the read-modify-write is untracked.
         untrack(() => {

package/src/builtin-editors.test.ts

@@ -9,6 +9,8 @@ import {
   type CellEditorContext,
 } from './editor-registry'
 
+// onCommitAndMove / onRequestClose / inCell are the hooks the grid injects at
+// mount; the registry tests here never exercise them.
 function ctx(overrides: Partial<CellEditorContext> = {}): CellEditorContext {
   return {
     value: null,
@@ -18,7 +20,7 @@ function ctx(overrides: Partial<CellEditorContext> = {}): CellEditorContext {
     onCommit: () => {},
     onCancel: () => {},
     ...overrides,
-  }
+  } as CellEditorContext
 }
 
 afterEach(() => {

package/src/cell-render.test.ts

@@ -9,16 +9,35 @@ import { createCellRender } from './cell-render'
 // shape that mirrors the @svgrid/grid runtime closely enough to exercise
 // every branch.
 
+// Only `id` / `original` / `getCellValueByColumnId` are read by the functions
+// under test, but the stub carries the full `Row` shape so it is assignable
+// without a cast at every call site.
 type AnyRow = {
   id: string
+  index: number
   original: Record<string, unknown>
+  depth: number
+  getCanExpand: () => boolean
+  getIsExpanded: () => boolean
+  toggleExpanded: () => void
+  getIsSelected: () => boolean
+  toggleSelected: () => void
+  getAllCells: () => never[]
   getCellValueByColumnId: (colId: string) => unknown
 }
 
 function makeRow(id: string, data: Record<string, unknown>): AnyRow {
   return {
     id,
+    index: 0,
     original: data,
+    depth: 0,
+    getCanExpand: () => false,
+    getIsExpanded: () => false,
+    toggleExpanded: () => {},
+    getIsSelected: () => false,
+    toggleSelected: () => {},
+    getAllCells: () => [],
     getCellValueByColumnId: (colId: string) => data[colId],
   }
 }
@@ -34,6 +53,11 @@ function makeCtx(overrides: Partial<any> = {}): any {
     conditionalColumnStats: new Map(),
     noteOverrides: {},
     editorOptionsCache: {},
+    // Async `editorOptions` bookkeeping: resolved lists (reactive in the real
+    // controller) plus two plain Sets used as dedupe guards.
+    asyncEditorOptions: {} as Record<string, unknown>,
+    asyncEditorOptionsPending: new Set<string>(),
+    asyncEditorColumns: new Set<string>(),
     ...overrides,
   }
 }
@@ -172,7 +196,7 @@ describe('createCellRender / computeCellClass', () => {
     const row = makeRow('r', { score: 9 })
     expect(cr.computeCellClass(row, makeColumn('score', { cellClass }))).toBe('big')
     expect(cellClass).toHaveBeenCalledTimes(1)
-    const passed = cellClass.mock.calls[0][0]
+    const passed = cellClass.mock.calls[0]![0]
     expect(passed.row).toBe(row)
     expect(passed.getValue()).toBe(9)
   })
@@ -423,7 +447,7 @@ describe('createCellRender / formatPinnedValue', () => {
     const formatter = vi.fn(({ value, row }: any) => `${value}:${row}`)
     const col = makeColumn('a', { formatter })
     expect(cr.formatPinnedValue(col, 5)).toBe('5:null')
-    expect(formatter.mock.calls[0][0].row).toBeNull()
+    expect(formatter.mock.calls[0]![0].row).toBeNull()
   })
 
   it('masks password pinned values', () => {
@@ -478,7 +502,7 @@ describe('createCellRender / computePinnedCellClass', () => {
       field: 'a',
     })
     expect(cr.computePinnedCellClass({ a: 3 }, col)).toBe('pos')
-    expect(cellClass.mock.calls[0][0].row).toBeNull()
+    expect(cellClass.mock.calls[0]![0].row).toBeNull()
   })
 
   it('coerces a falsy cellClass result to empty string', () => {

package/src/cell-render.ts

@@ -263,6 +263,77 @@ export function createCellRender<
     return v && v.trim() ? v : null
   }
 
+  const isThenable = (v: unknown): v is Promise<unknown> =>
+    typeof (v as { then?: unknown } | null)?.then === "function";
+
+  /**
+   * Resolve a promised option list once per key, then keep it.
+   *
+   * Render paths call `getColumnEditorOptions` synchronously and often, so an
+   * async source cannot block: the first call starts the fetch and returns an
+   * empty list, and the resolved value lands in reactive state which re-renders
+   * the editor. `asyncEditorOptionsPending` tracks in-flight keys so repeated
+   * renders do not fire the request again.
+   */
+  function resolveAsyncOptions(
+    key: string,
+    promise: Promise<unknown>,
+    /** Drop other cached entries starting with this prefix when the result
+     *  lands - used to evict a cascade's superseded signatures. */
+    prunePrefix?: string,
+  ): CellEditorOption[] {
+    const done = ctx.asyncEditorOptions[key];
+    if (done) return done;
+    const pending: Set<string> = ctx.asyncEditorOptionsPending;
+    if (!pending.has(key)) {
+      // Plain Set, not reactive state: this runs inside the template, and a
+      // $state write during render is a Svelte 5 error.
+      pending.add(key);
+      const store = (value: CellEditorOption[]) => {
+        const next: Record<string, CellEditorOption[]> = {};
+        for (const [k, v] of Object.entries(ctx.asyncEditorOptions as Record<string, CellEditorOption[]>)) {
+          // Keep everything except this cell's stale signatures.
+          if (prunePrefix && k !== key && k.startsWith(prunePrefix)) continue;
+          next[k] = v;
+        }
+        next[key] = value;
+        ctx.asyncEditorOptions = next;
+      };
+      promise
+        .then((value) => store(normalizeEditorOptions(value as never)))
+        // A failed lookup settles on "no options" rather than leaving the
+        // editor spinning forever.
+        .catch(() => store([]))
+        .finally(() => {
+          pending.delete(key);
+        });
+    }
+    return [];
+  }
+
+  /**
+   * Cache key for a per-row async source.
+   *
+   * A cascade depends on the row's OTHER cells - City is a function of Country -
+   * so keying by row id alone made the first result permanent: changing the
+   * country left the old city list cached forever. The row's own values are
+   * folded into the key, so editing the row naturally supersedes the entry.
+   *
+   * Only reached for columns already known to be async, so the stringify cost
+   * is bounded by the rows actually rendering such a column.
+   */
+  function asyncRowKey(column: Column<TData>, row: Row<TData>): string {
+    let signature: string;
+    try {
+      signature = JSON.stringify(row.original);
+    } catch {
+      // Circular / non-serializable row: fall back to identity, which at least
+      // invalidates when the consumer replaces the object immutably.
+      signature = String(row.index);
+    }
+    return `${column.id}::${row.id}::${signature}`;
+  }
+
   function getColumnEditorOptions(
     column: Column<TData>,
     row?: Row<TData> | null,
@@ -272,8 +343,36 @@ export function createCellRender<
       // Dynamic per-row: must be re-evaluated because the row's other
       // cells may have just changed (cascade).
       if (!row?.original) return [];
-      return normalizeEditorOptions(def(row.original as TData));
+      // Once a column is known to hand back promises, answer from the cache
+      // WITHOUT calling the source again. Render reads options constantly, so
+      // calling an async source every time fires a real request per render -
+      // and any state the source touches is being mutated mid-render, which
+      // Svelte rejects outright. The key folds in the row's values, so editing
+      // the row supersedes the entry and the cascade refetches.
+      const known = (ctx.asyncEditorColumns as Set<string>).has(column.id);
+      if (known) {
+        const key = asyncRowKey(column, row);
+        const done = ctx.asyncEditorOptions[key];
+        if (done) return done;
+        if ((ctx.asyncEditorOptionsPending as Set<string>).has(key)) return [];
+        const produced = def(row.original as TData);
+        if (isThenable(produced)) {
+          return resolveAsyncOptions(key, produced, `${column.id}::${row.id}::`);
+        }
+        return normalizeEditorOptions(produced);
+      }
+      const produced = def(row.original as TData);
+      if (isThenable(produced)) {
+        (ctx.asyncEditorColumns as Set<string>).add(column.id);
+        return resolveAsyncOptions(
+          asyncRowKey(column, row),
+          produced,
+          `${column.id}::${row.id}::`,
+        );
+      }
+      return normalizeEditorOptions(produced);
     }
+    if (isThenable(def)) return resolveAsyncOptions(column.id, def);
     const id = column.id;
     if (
       !ctx.editorOptionsCache[id] ||
@@ -285,6 +384,27 @@ export function createCellRender<
     return ctx.editorOptionsCache[id];
   }
 
+  /**
+   * True while a column's (or cell's) async option list is still loading.
+   * Derived from "the source is async and no result has landed" rather than
+   * from the pending Set, so it stays reactive - `asyncEditorOptions` is the
+   * reactive half, the Set is only a dedupe guard.
+   */
+  function areEditorOptionsLoading(
+    column: Column<TData>,
+    row?: Row<TData> | null,
+  ): boolean {
+    const def = column.columnDef.editorOptions;
+    if (typeof def === "function") {
+      if (!row?.original) return false;
+      // Never call the source here - that would fire another request just to
+      // answer "are we loading?". The resolver records which columns are async.
+      if (!(ctx.asyncEditorColumns as Set<string>).has(column.id)) return false;
+      return !ctx.asyncEditorOptions[asyncRowKey(column, row)];
+    }
+    return isThenable(def) && !ctx.asyncEditorOptions[column.id];
+  }
+
   /** Joined display string for list/chips cells. */
   function formatListCellValue(
     column: Column<TData>,
@@ -461,6 +581,7 @@ export function createCellRender<
     computeCellValidity,
     computeCellNote,
     getColumnEditorOptions,
+    areEditorOptionsLoading,
     formatListCellValue,
     formatCellValue,
     formatPinnedValue,

package/src/cell-values.ts

@@ -19,6 +19,10 @@ export function getColumnBaseValue<TData extends RowData>(row: Row<TData>, colum
 }
 
 export function isGroupRow<TData extends RowData>(row: Row<TData>) {
+  // Tree rows are expandable too, but they are real data rows - rendering one as
+  // a full-width banner would swallow its cells. Only grouping's synthetic rows
+  // are banners.
+  if ((row as { __treeRow?: boolean }).__treeRow) return false;
   return typeof row.getCanExpand === "function" && row.getCanExpand();
 }
 

package/src/chart-export.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi, type Mock } from 'vitest'
 import {
   chartToSvgString,
   chartToPngBlob,
@@ -125,7 +125,7 @@ describe('chartToSvgString', () => {
 describe('downloadChartSvg', () => {
   let createSpy: ReturnType<typeof vi.spyOn>
   let revokeSpy: ReturnType<typeof vi.spyOn>
-  let clickSpy: ReturnType<typeof vi.fn>
+  let clickSpy: Mock<() => void>
 
   beforeEach(() => {
     vi.useFakeTimers()

package/src/clipboard.test.ts

@@ -614,7 +614,6 @@ describe('copySelectionToClipboard', () => {
       configurable: true,
     })
     const execCommand = vi.fn().mockReturnValue(true)
-    // @ts-expect-error - jsdom lacks execCommand by default
     document.execCommand = execCommand
     const ctx = makeCtx()
     ctx.selectionRange = {
@@ -631,7 +630,6 @@ describe('copySelectionToClipboard', () => {
       value: undefined,
       configurable: true,
     })
-    // @ts-expect-error - override execCommand to throw
     document.execCommand = () => {
       throw new Error('blocked')
     }