@svgrid/grid 2.6.16 → 2.6.18

package/dist/themes/index.d.ts

@@ -69,7 +69,9 @@ export type ThemePreset = {
 };
 /** The built-in theme presets, in gallery order (SvGrid's own theme first). */
 export declare const themePresets: ThemePreset[];
-/** The default preset (used when nothing is chosen). */
+/** The default preset (used when nothing is chosen): Ember, the house theme the
+ *  demo gallery and svgrid.com open on, so a scaffolded or Studio-generated app
+ *  looks like the demos unless a preset is picked. */
 export declare const defaultThemePreset: ThemePreset;
 /** Look up a preset by id. */
 export declare const getThemePreset: (id?: string) => ThemePreset | undefined;

package/dist/themes/index.js

@@ -101,8 +101,10 @@ export const themePresets = [
         light: { bg: '#eff1f5', fg: '#4c4f69', muted: '#5c5f77', border: '#ccd0da', headerBg: '#e6e9ef', headerFg: '#4c4f69', accent: '#8839ef', rowAlt: '#e6e9ef', rowHover: '#dce0e8', selectionBg: '#dce0e8' },
         dark: { bg: '#1e1e2e', fg: '#cdd6f4', muted: '#a6adc8', border: '#313244', headerBg: '#181825', headerFg: '#cdd6f4', accent: '#cba6f7', rowAlt: '#1a1a28', rowHover: '#313244', selectionBg: '#45475a' } },
 ];
-/** The default preset (used when nothing is chosen). */
-export const defaultThemePreset = themePresets.find((t) => t.id === 'tailwind') ?? themePresets[0];
+/** The default preset (used when nothing is chosen): Ember, the house theme the
+ *  demo gallery and svgrid.com open on, so a scaffolded or Studio-generated app
+ *  looks like the demos unless a preset is picked. */
+export const defaultThemePreset = themePresets.find((t) => t.id === 'ember') ?? themePresets[0];
 /** Look up a preset by id. */
 export const getThemePreset = (id) => id ? themePresets.find((t) => t.id === id) : undefined;
 /** WCAG 2.1 relative luminance. */

package/dist/toast-store.svelte.js

@@ -1,4 +1,4 @@
-import { announce } from './a11y/live-region';
+import { announce } from './a11y/live-region.js';
 function createToastStore() {
     const toasts = $state([]);
     const timers = new Map();

package/dist/tree-select.d.ts

@@ -4,7 +4,7 @@
  * resolve the path from root to a value (for the trigger label). Framework-free
  * + pure so they are unit-tested directly.
  */
-import type { TreeSelectNode } from './ui-app.types';
+import type { TreeSelectNode } from './ui-app.types.js';
 export type FlatRow = {
     node: TreeSelectNode;
     depth: number;

package/dist/virtualization/column-virtualizer.d.ts

@@ -9,14 +9,14 @@ export declare function createColumnVirtualizer(input: {
 }): {
     setViewportWidth(viewportWidth: number): void;
     setHorizontalOffset(scrollOffset: number): void;
-    setOptions(next: Partial<import("./types").VirtualizerOptions>): void;
+    setOptions(next: Partial<import("./types.js").VirtualizerOptions>): void;
     setScrollOffset(scrollOffset: number): void;
     setViewportHeight(viewportHeight: number): void;
     scrollToIndex(index: number): void;
-    getVirtualItems(): import("./types").VirtualItem[];
+    getVirtualItems(): import("./types.js").VirtualItem[];
     getTotalSize(): number;
     getOffsetForIndex(index: number): number;
     getSizeForIndex(index: number): number;
-    getState(): import("./types").VirtualizerState;
+    getState(): import("./types.js").VirtualizerState;
     subscribe(listener: () => void): () => boolean;
 };

package/dist/virtualization/column-virtualizer.js

@@ -1,4 +1,4 @@
-import { createVirtualizer } from './virtualizer';
+import { createVirtualizer } from './virtualizer.js';
 export function createColumnVirtualizer(input) {
     const virtualizer = createVirtualizer({
         count: input.count,

package/dist/virtualization/svelte-virtualizer.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { VirtualizerOptions } from './types';
+import type { VirtualizerOptions } from './types.js';
 export declare function createSvelteVirtualizer(options: VirtualizerOptions): {
     readonly version: number;
     setOptions: (next: Partial<VirtualizerOptions>) => void;
     setScrollOffset: (scrollOffset: number) => void;
     setViewportHeight: (viewportHeight: number) => void;
     scrollToIndex: (index: number) => void;
-    getVirtualItems: () => import("./types").VirtualItem[];
+    getVirtualItems: () => import("./types.js").VirtualItem[];
     getTotalSize: () => number;
     getOffsetForIndex: (index: number) => number;
     getSizeForIndex: (index: number) => number;
-    getState: () => import("./types").VirtualizerState;
+    getState: () => import("./types.js").VirtualizerState;
 };

package/dist/virtualization/svelte-virtualizer.svelte.js

@@ -1,4 +1,4 @@
-import { createVirtualizer } from './virtualizer';
+import { createVirtualizer } from './virtualizer.js';
 export function createSvelteVirtualizer(options) {
     const virtualizer = createVirtualizer(options);
     let version = $state(0);

package/dist/virtualization/virtualizer.d.ts

@@ -1,4 +1,4 @@
-import type { VirtualItem, VirtualizerOptions, VirtualizerState } from './types';
+import type { VirtualItem, VirtualizerOptions, VirtualizerState } from './types.js';
 type VirtualizerListener = () => void;
 /**
  * The window to render when no DOM measurement exists yet.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.6.16",
+  "version": "2.6.18",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -34,7 +34,19 @@
     "headless",
     "headless-table",
     "virtual-scroll",
+    "virtual-scrolling",
+    "virtualization",
+    "sortable",
+    "filterable",
+    "pagination",
+    "tree-grid",
+    "pivot-table",
     "spreadsheet",
+    "ag-grid-alternative",
+    "tanstack-table",
+    "tanstack-table-alternative",
+    "svelte-headless-table",
+    "svelte-headless-table-alternative",
     "typescript",
     "svgrid"
   ],
@@ -110,7 +122,7 @@
     "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:lib": "vitest run --coverage",
     "test:build": "publint --strict",
-    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
+    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ../../tools/add-dist-extensions.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
     "lint": "eslint ./src"
   },
   "devDependencies": {

package/src/GridFooter.svelte

@@ -117,9 +117,12 @@
                 onChange={(v) => setPageSize(Number(v))}
               />
             {:else}
-              <!-- Mirrors SvGridDropdown's closed trigger exactly (same classes,
-                   same ARIA) so there is no visual change and no layout shift
-                   when the real component swaps in. -->
+              <!-- Mirrors SvGridDropdown's closed trigger (same classes, same
+                   ARIA). Its box styling comes from the global
+                   .sv-grid-pagination-pagesize-dd rules in SvGrid.css, NOT from
+                   SvGridDropdown's scoped styles (those only exist once the chunk
+                   loads) - so keep the two in step or the placeholder renders as
+                   a stock <button> until the first click. -->
               <div class="sv-grid-dropdown">
                 <button
                   type="button"

package/src/SvGrid.controller.svelte.ts

@@ -595,8 +595,13 @@ export function createSvGridController<
       ((props.selectionMode ?? "both") === "row" ||
         (props.selectionMode ?? "both") === "both"),
   );
+  // `selectable` is the shortcut alias, so it wins over the fine-grained prop,
+  // which in turn wins over `selectionMode` - the same precedence the other
+  // shortcuts use. Unlike them it starts ON (selectionMode defaults to 'both'),
+  // so its real work is `selectable={false}`.
   const enableCellSelectionEffective = $derived(
-    props.enableCellSelection ??
+    props.selectable ??
+      props.enableCellSelection ??
       ((props.selectionMode ?? "both") === "cell" ||
         (props.selectionMode ?? "both") === "both"),
   );
@@ -2543,7 +2548,53 @@ export function createSvGridController<
   // footer is correct on the first frame (no flicker).
   const SUMMARY_DEFER_CELL_LIMIT = 50_000;
 
-  let summaryByColumn = $state<Record<string, string>>({});
+  /** Deferred summaries for a grid too big to total inline. A grid under the
+   *  cell limit is handled by `eagerSummaries` below - synchronously, so the
+   *  totals are in the SERVER-rendered footer too. */
+  let deferredSummaries = $state<Record<string, string>>({});
+
+  /**
+   * The aggregator, handed over once `createSummaries(ctx)` has run - it needs
+   * `ctx`, which cannot exist this early. Held in `$state` so `eagerSummaries`
+   * recomputes when it lands.
+   *
+   * The whole dance is to keep the declaration ABOVE `ctx`: a `$derived`
+   * referenced before its declaration is mis-compiled (the binding is dropped
+   * and the `ctx` getter comes out with an empty body, so the footer read
+   * `undefined` and threw on the first column id).
+   */
+  let summarize = $state<
+    | null
+    | ((rows: ReadonlyArray<Row<TData>>, columns: ReadonlyArray<Column<TData>>) => Record<string, string>)
+  >(null);
+
+  /**
+   * Footer totals for a grid small enough to aggregate inline, derived rather
+   * than assigned from an `$effect`.
+   *
+   * Effects never run during SSR, so when the totals lived only in the effect
+   * the server emitted a summary row of EMPTY cells: the numbers appeared only
+   * after hydration (a visible pop-in), and never at all for a reader with
+   * JavaScript off - while the row still took up space and drew its border.
+   * A `$derived` runs on the server too, so the totals ship with the HTML.
+   *
+   * `null` above the cell limit - that case stays on the rAF-deferred effect,
+   * which keeps a huge grid painting before it totals.
+   */
+  const eagerSummaries = $derived.by(() => {
+    if (!summarize) return null;
+    if (!(props.enableRowSummaries ?? true)) return null;
+    const rows = allRows;
+    const columns = allColumns;
+    if (rows.length * columns.length > SUMMARY_DEFER_CELL_LIMIT) return null;
+    // `computeSummaries` reads `editedCellValues` through `ctx`, so an inline
+    // edit re-runs this too.
+    return summarize(rows, columns);
+  });
+
+  /** What the footer renders: the inline totals when the grid is small enough,
+   *  otherwise the rAF-deferred ones. */
+  const summaryByColumn = $derived(eagerSummaries ?? deferredSummaries);
   $effect(() => {
     // Re-aggregate whenever the data / columns / edits change. We depend on
     // `allRows` / `allColumns` / `editedCellValues` DIRECTLY - not the
@@ -2557,20 +2608,21 @@ export function createSvGridController<
     const rows = allRows;
     const columns = allColumns;
     if (!(props.enableRowSummaries ?? true)) {
-      summaryByColumn = {};
+      deferredSummaries = {};
       return;
     }
     if (
       rows.length * columns.length <= SUMMARY_DEFER_CELL_LIMIT ||
       typeof requestAnimationFrame === "undefined"
     ) {
-      summaryByColumn = computeSummaries(rows, columns);
+      // Small enough to total inline - `eagerSummaries` already did, and it
+      // wins in the getter, so there is nothing to recompute here.
       return;
     }
     // Large grid: paint first, total a frame later.
     let cancelled = false;
     const handle = requestAnimationFrame(() => {
-      if (!cancelled) summaryByColumn = computeSummaries(rows, columns);
+      if (!cancelled) deferredSummaries = computeSummaries(rows, columns);
     });
     return () => {
       cancelled = true;
@@ -2778,18 +2830,39 @@ export function createSvGridController<
   // width/height stays in sync. Always attached (window resize / parent
   // layout shift / sidebar collapse can change the size whether the
   // consumer passed a numeric or "100%" containerHeight).
-  /** True after the first ResizeObserver tick - i.e. once the grid has
-   *  measured its real container size and `fitColumns` has had a chance
-   *  to scale the columns to that width. Used to gate the scrollbar
-   *  visibility: rendering it before this flips paints a horizontal
-   *  scrollbar for ONE frame (based on the base column widths summing
-   *  larger than the viewport), then immediately hides it once fit
-   *  scaling kicks in - visible as a "flashing horizontal scrollbar"
-   *  every time a demo first loads. */
+  /** True once the grid has measured its real container size and `fitColumns`
+   *  has had a chance to scale the columns to that width. Gates the scrollbar
+   *  visibility, the scrollbar gutter on a trailing right-aligned column and
+   *  the top pager: rendering those before this flips paints a horizontal
+   *  scrollbar for ONE frame (based on the base column widths summing larger
+   *  than the viewport), then immediately hides it once fit scaling kicks in -
+   *  visible as a "flashing horizontal scrollbar" every time a demo first
+   *  loads. */
   let hasMeasured = $state(false);
 
   $effect(() => {
     if (!scrollContainer) return;
+    // Measure SYNCHRONOUSLY here, not just from the observer below. Effects run
+    // after the DOM is in place but before the browser paints, so reading the
+    // container now lets the very first painted frame already carry the
+    // scrollbars, the fit-scaled column widths, the 16px gutter on a trailing
+    // right-aligned column and the top pager (which has a `border-top`).
+    // `observeSizeRaf` has to defer its callback by a frame (or the
+    // ResizeObserver re-notifies within one delivery cycle), so relying on it
+    // alone guarantees one painted frame in the unmeasured state - a visible
+    // flash on EVERY mount, and therefore on every navigation in an app that
+    // recreates the grid (e.g. a `{#key}` around it, or a route that remounts).
+    // `untrack` keeps the writes below from making this effect depend on
+    // `viewportVersion` (it would then re-run and re-attach the observer).
+    untrack(() => {
+      // A zero-height container means the grid is not laid out yet (hidden
+      // ancestor, `display: none`); leave it unmeasured and let the observer
+      // flip it when the box becomes real.
+      if (scrollContainer && scrollContainer.clientHeight > 0) {
+        viewportVersion += 1;
+        hasMeasured = true;
+      }
+    });
     return observeSizeRaf(scrollContainer, () => {
       viewportVersion += 1;
       if (!hasMeasured) hasMeasured = true;
@@ -3705,7 +3778,6 @@ export function createSvGridController<
     get computeSummaries() { return computeSummaries; },
     get SUMMARY_DEFER_CELL_LIMIT() { return SUMMARY_DEFER_CELL_LIMIT; },
     get summaryByColumn() { return summaryByColumn; },
-    set summaryByColumn(v) { summaryByColumn = v as never; },
     get hasMeasured() { return hasMeasured; },
     set hasMeasured(v) { hasMeasured = v as never; },
     get scrollBottomArmed() { return scrollBottomArmed; },
@@ -3859,6 +3931,10 @@ export function createSvGridController<
   const { showTooltipFor, hideTooltip, flushScheduledScrollSync, scheduleScrollSync, onBodyScroll } = createScrollSync<TFeatures, TData>(ctx);
   const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard<TFeatures, TData>(ctx);
   const { computeSummaries, hasRenderedColumn } = createSummaries<TFeatures, TData>(ctx);
+  // Hand the aggregator to `eagerSummaries` (declared above `ctx`, which this
+  // needs). Plain assignment during init - no effect, so SSR gets it too.
+  summarize = computeSummaries;
+
   const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, addFilterToken, removeFilterToken, toggleFilterToken, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openInSuggest, closeInSuggest, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, setFacetSelection, setFilterTokens, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus<TFeatures, TData>(ctx);
   const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, areEditorOptionsLoading, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender<TFeatures, TData>(ctx);
   const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, commitAndMoveByTab, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing<TFeatures, TData>(ctx);

package/src/SvGrid.css

@@ -2495,13 +2495,53 @@ select.sv-grid-fr-editor {
   border-radius: 5px;
   background: var(--sg-input-bg, #fff);
 }
-.sv-grid-pagination-pagesize-dd .sv-grid-dropdown,
-.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-trigger {
+/* The closed page-size trigger is plain markup until the real SvGridDropdown
+   chunk loads on the first click (GridFooter.svelte keeps that component lazy).
+   SvGridDropdown's own trigger rules are scoped to the component, so they never
+   reach the placeholder - it needs the same box here, or the pager shows a
+   stock <button> (UA border + padding, hugging the left) until the first click.
+   Keep these in step with the .sv-grid-dropdown* rules in SvGridDropdown.svelte. */
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown {
+  position: absolute;
+  inset: 0;
+  height: 100%;
   background: transparent;
   border-radius: 5px;
   font-size: 13px;
   color: var(--sg-fg, #0f172a);
 }
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+  min-height: 28px;
+  padding: 0 8px;
+  border: 0;
+  outline: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--sg-fg, #0f172a);
+  font: inherit;
+  font-size: 13px;
+  text-align: start;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-caret {
+  flex: 0 0 auto;
+  font-size: 10px;
+  opacity: 0.7;
+  line-height: 1;
+}
 .sv-grid-pagination-pagesize-dd:focus-within {
   border-color: var(--sg-accent, #2563eb);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);

package/src/SvGrid.types.ts

@@ -1020,6 +1020,7 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    *   `sortable`   - column sorting       (injects `rowSortingFeature`)
    *   `filterable` - column filtering     (injects `columnFilteringFeature`)
    *   `editable`   - inline cell editing  (alias of `enableInlineEditing`)
+   *   `selectable` - cell selection       (alias of `enableCellSelection`)
    *   `groupable`  - row grouping controls(alias of `showGroupingControls`,
    *                  also injects `columnGroupingFeature`)
    *   `pageable`   - pagination footer    (alias of `showPagination`)
@@ -1030,6 +1031,26 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
   sortable?: boolean;
   filterable?: boolean;
   editable?: boolean;
+  /**
+   * Cell selection - click a cell to select it, drag or shift-click to extend
+   * the selection to a range. Alias of `enableCellSelection`, and the highest
+   * priority of the three inputs that decide it:
+   * `selectable` -> `enableCellSelection` -> `selectionMode`.
+   *
+   * NOTE the asymmetry with its siblings, which are all off until you opt in:
+   * this one is **ON by default**, because `selectionMode` defaults to
+   * `'both'`. It is named here so the capability is discoverable next to the
+   * other shortcuts, and so `selectable={false}` is a one-word way to turn
+   * cell selection off (the longhand being `selectionMode="none"`, which also
+   * removes the row-selection surface).
+   *
+   * This is the CELL surface only. The selection **checkbox column** is the
+   * other half of `selectionMode`, controlled by `showRowSelection` - also on
+   * by default, and it needs no feature import (verified: the column renders
+   * and toggles rows with an empty `features` set). Use `selectionMode` when
+   * you want to move both surfaces at once.
+   */
+  selectable?: boolean;
   /**
    * Client-side tree data: nest rows into a hierarchy by parent id.
    *

package/src/headless.ts

@@ -7,6 +7,13 @@
  * your own renderer, running the engine under SSR, or unit-testing row models
  * without a browser.
  *
+ * Two entry functions, and the difference matters outside a bundler:
+ * `createSvGrid` is the Svelte 5 wrapper - it holds its state in runes, so it
+ * needs the Svelte compiler in the pipeline (Vite, SvelteKit, vitest). Bare
+ * `node script.mjs` cannot run it. `createSvGridCore` is the same engine with
+ * no runes and no reactivity, so it runs anywhere Node runs: a service, a
+ * worker, a CLI, a plain unit test.
+ *
  * Every runtime symbol here is also reachable from the main `@svgrid/grid`
  * barrel, so the two paths never disagree. This entry additionally exposes the
  * low-level types a custom renderer needs and the barrel does not re-export

package/src/svgrid.behavior.test.ts

@@ -703,3 +703,211 @@ describe('SvGrid - fitColumns', () => {
     }
   })
 })
+
+describe('SvGrid - selectable shortcut (cell selection)', () => {
+  // The gated path a user actually takes: pointerdown on a cell runs through
+  // createSelection.setSelection, which bails on !enableCellSelectionEffective.
+  // Asserting through it (rather than api.selectCells, which writes the range
+  // directly and bypasses the gate) is what makes these tests meaningful.
+  // Deliberately skips `.sv-grid-selection-cell`: the checkbox column is a
+  // different surface and a pointerdown there starts no range, so clicking it
+  // would make every assertion below pass vacuously.
+  async function clickCell(target: HTMLElement, index: number) {
+    const cells = target.querySelectorAll(
+      '.sv-grid-cell:not(.sv-grid-selection-cell)',
+    )
+    const cell = cells[index]
+    if (!cell) throw new Error(`no data cell at index ${index} (found ${cells.length})`)
+    cell.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
+    await tick()
+  }
+
+  it('is ON by default - selectionMode defaults to "both"', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected().length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable={false} turns cell selection off', async () => {
+    const { api, target, destroy } = await mountGrid({ selectable: false })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable={true} wins over selectionMode="none"', async () => {
+    const { api, target, destroy } = await mountGrid({
+      selectable: true,
+      selectionMode: 'none',
+    })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected().length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable={false} wins over enableCellSelection={true}', async () => {
+    const { api, target, destroy } = await mountGrid({
+      selectable: false,
+      enableCellSelection: true,
+    })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('falls back to enableCellSelection when selectable is omitted', async () => {
+    const { api, target, destroy } = await mountGrid({ enableCellSelection: false })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('api.setOption("selectable", false) turns it off at runtime', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected().length).toBe(1)
+
+      api.setOption('selectable', false)
+      await tick()
+      api.selectCells([])
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+})
+
+/**
+ * Guards the promise the homepage "A real grid in ~15 lines" section makes:
+ * the snippet shown there is shortcuts-only - no `features` import, no
+ * `editorType` - so every capability it advertises must work from exactly
+ * those props. The section drifted from the component once already (it showed
+ * a bare grid beside a preview captioned "sort, filter, select, edit ... are
+ * all live"), which is what this test exists to catch.
+ */
+describe('SvGrid - homepage snippet (shortcuts only, no features import)', () => {
+  const snippetRows = [
+    { firstName: 'Ada', age: 36, status: 'active' },
+    { firstName: 'Linus', age: 54, status: 'active' },
+    { firstName: 'Grace', age: 85, status: 'inactive' },
+  ]
+  const snippetColumns = [
+    { field: 'firstName', header: 'First name' },
+    { field: 'age', header: 'Age' },
+    { field: 'status', header: 'Status' },
+  ] as unknown as typeof personColumns
+
+  function mountSnippet(): Promise<MountResult> {
+    return new Promise((resolveApi, rejectApi) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: snippetRows,
+          columns: snippetColumns,
+          // The four shortcuts the snippet passes - and nothing else.
+          sortable: true,
+          filterable: true,
+          editable: true,
+          selectable: true,
+          getRowId: (r: { firstName: string }) => r.firstName,
+          rowHeight: 36,
+          containerHeight: 300,
+          virtualization: false,
+          onApiReady(api: SvGridApi<any, any>) {
+            resolveApi({
+              api,
+              target,
+              destroy: () => {
+                unmount(app)
+                target.remove()
+              },
+            } as unknown as MountResult)
+          },
+        } as never,
+      })
+      if (!app) rejectApi(new Error('mount failed'))
+    })
+  }
+
+  it('sortable works without importing rowSortingFeature', async () => {
+    const { api, destroy } = await mountSnippet()
+    try {
+      await tick()
+      api.setSort('age', 'asc')
+      await tick()
+      expect(api.getState().sorting).toEqual([{ id: 'age', desc: false }])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('editable opens an editor on a column with no editorType', async () => {
+    const { api, target, destroy } = await mountSnippet()
+    try {
+      await tick()
+      api.startEditing(0, 'firstName')
+      await tick()
+      expect(target.querySelectorAll('.sv-grid-cell-editing').length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable gives cell selection', async () => {
+    const { api, target, destroy } = await mountSnippet()
+    try {
+      await tick()
+      const cell = target.querySelector('.sv-grid-cell:not(.sv-grid-selection-cell)')
+      cell?.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
+      await tick()
+      expect(api.getSelected().length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('the checkbox column renders and toggles a row - no feature import needed', async () => {
+    const { api, target, destroy } = await mountSnippet()
+    try {
+      await tick()
+      // [0] is the header select-all; [1] is the first row.
+      const boxes = target.querySelectorAll<HTMLElement>('.sv-grid-checkbox')
+      expect(boxes.length).toBeGreaterThan(1)
+      boxes[1]?.click()
+      await tick()
+      const names = (api.getSelectedRows() as unknown as { firstName: string }[]).map(
+        (r) => r.firstName,
+      )
+      expect(names).toEqual(['Ada'])
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/themes/index.ts

@@ -162,8 +162,10 @@ export const themePresets: ThemePreset[] = [
     dark: { bg: '#1e1e2e', fg: '#cdd6f4', muted: '#a6adc8', border: '#313244', headerBg: '#181825', headerFg: '#cdd6f4', accent: '#cba6f7', rowAlt: '#1a1a28', rowHover: '#313244', selectionBg: '#45475a' } },
 ]
 
-/** The default preset (used when nothing is chosen). */
-export const defaultThemePreset: ThemePreset = themePresets.find((t) => t.id === 'tailwind') ?? themePresets[0]!
+/** The default preset (used when nothing is chosen): Ember, the house theme the
+ *  demo gallery and svgrid.com open on, so a scaffolded or Studio-generated app
+ *  looks like the demos unless a preset is picked. */
+export const defaultThemePreset: ThemePreset = themePresets.find((t) => t.id === 'ember') ?? themePresets[0]!
 
 /** Look up a preset by id. */
 export const getThemePreset = (id?: string): ThemePreset | undefined =>