bo-grid 0.21.0 → 1.0.0

package/dist/bo-grid.element.d.ts

@@ -0,0 +1,17 @@
+// Type declarations for the `bo-grid/element` entry (the <bo-grid> custom element).
+import type { GridProps } from './index';
+
+/** The <bo-grid> `config` object — every <Grid> prop. */
+export type BoGridConfig = GridProps;
+
+/** A <bo-grid> DOM element with a typed `config` property. */
+export interface BoGridElement extends HTMLElement {
+  config?: BoGridConfig;
+}
+
+/** Create a <bo-grid> element with its `config` already set (safe
+ *  create-before-attach pattern for React/Vue/vanilla). */
+export function createBoGrid(config?: BoGridConfig): BoGridElement;
+
+declare const BoGrid: unknown;
+export default BoGrid;

package/dist/bo-grid.element.js

@@ -1,4 +1,5 @@
-import { E as f } from "./bo-grid.element-DPnHUXMa.js";
+import { E as r, F as o } from "./bo-grid.element-BZGnfKB_.js";
 export {
-  f as default
+  r as createBoGrid,
+  o as default
 };

package/dist/grid/Cell.svelte

@@ -3,6 +3,7 @@
   import type { ColumnDef, GridRow } from './column';
   import {
     formatCell,
+    tooltipText,
     colStyle,
     candlesOf,
     isNumeric,
@@ -146,12 +147,22 @@
   const extraClass = $derived(
     typeof col.cellClass === 'function' ? (col.cellClass(value, row) ?? '') : (col.cellClass ?? ''),
   );
-  // Native tooltip of the full value (opt-in via column `tooltip`).
-  const tip = $derived(
-    col.tooltip && col.type !== 'sparkline' && col.type !== 'custom'
-      ? formatCell(col, value, row)
-      : undefined,
-  );
+  // Styled floating tooltip text (opt-in via column `tooltip`); the grid root
+  // renders the actual tooltip from this cell's `data-bo-tip` attribute.
+  const tip = $derived(tooltipText(col, value, row));
+
+  // JS cell renderer (framework-agnostic alt to the `cell` snippet). Returns an
+  // HTML string ({@html}) or a DOM Node (mounted via the action below).
+  const rendered = $derived(col.render ? col.render({ value, row, column: col }) : undefined);
+  // Mount/replace a Node return value; updates when the derived node changes.
+  function renderNode(host: HTMLElement, node: Node | string | null | undefined) {
+    const set = (n: Node | string | null | undefined) => {
+      if (n instanceof Node) host.replaceChildren(n);
+      else host.textContent = n == null ? '' : String(n);
+    };
+    set(node);
+    return { update: set };
+  }
 
   // ---- Conditional formatting (v0.10): data bar + icon set ----
   // Geometry/threshold logic lives in column.ts (pure, unit-tested); here we map
@@ -193,6 +204,7 @@
 <span
   class="c {kind} {extraClass}"
   class:dim={col.type === 'volume'}
+  class:wrap={col.wrap}
   class:pos={col.type === 'percent' && Number(value) >= 0}
   class:neg={col.type === 'percent' && Number(value) < 0}
   class:sel={selected}
@@ -202,7 +214,7 @@
   role="gridcell"
   tabindex="-1"
   id={cellId}
-  title={tip}
+  data-bo-tip={tip}
   aria-colindex={colIndex}
   aria-selected={selected}
   onpointerdown={(e) => onCellDown?.(r, c, e)}
@@ -269,6 +281,12 @@
       onclick={(e) => e.stopPropagation()}
       ondblclick={(e) => e.stopPropagation()}
     />
+  {:else if col.render}
+    {#if typeof rendered === 'string'}
+      <span class="bo-render">{@html rendered}</span>
+    {:else}
+      <span class="bo-render" use:renderNode={rendered}></span>
+    {/if}
   {:else if col.type === 'custom'}
     {#if cellSnippet}{@render cellSnippet({ row, column: col, value })}{:else}{value ?? ''}{/if}
   {:else if col.type === 'sparkline'}
@@ -324,10 +342,10 @@
     {/key}
   {:else if col.flash}
     {#key row.flashSeq}
-      <span class="flash {row.flashDir}">{formatCell(col, value, row)}</span>
+      <span class="flash bo-cell-text {row.flashDir}">{formatCell(col, value, row)}</span>
     {/key}
   {:else}
-    {formatCell(col, value, row)}
+    <span class="bo-cell-text">{formatCell(col, value, row)}</span>
   {/if}
   {#if fillCorner}
     <span
@@ -356,6 +374,35 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+  /* Truncating text node inside the flex cell: a bare text child of a flex
+     container won't honour text-overflow, so plain values render through this
+     span to get a real ellipsis when they overflow. */
+  .bo-cell-text {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  /* Host for a JS `render` return (string HTML or a DOM node). Lays out inline
+     and truncates like a normal cell; consumer markup controls the rest. */
+  .bo-render {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* Opt-in multi-line wrap (col.wrap) — pair with a taller rowHeight. */
+  .c.wrap {
+    white-space: normal;
+  }
+  .c.wrap .bo-cell-text,
+  .c.wrap strong {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
   .num {
     justify-content: flex-end;
     font-family: var(--bo-mono);
@@ -500,10 +547,15 @@
     line-height: 1;
   }
   .text strong {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     font-family: var(--bo-mono);
     font-weight: 600;
   }
   .text em {
+    flex: none;
     font-style: normal;
     font-size: 10px;
     color: var(--bo-text-dim);

package/dist/grid/Grid.svelte

@@ -36,8 +36,8 @@
   import RowMenu from './RowMenu.svelte';
 
   let {
-    rows,
-    columns,
+    rows = [],
+    columns = [],
     height,
     filter = '',
     groupBy = [],
@@ -48,6 +48,7 @@
     rowHeight,
     theme,
     resizable = true,
+    cellSelection = true,
     rowSelection = false,
     onRowSelectionChange,
     hiddenColumns = [],
@@ -57,6 +58,7 @@
     virtualizeColumns = false,
     rowClass,
     getRowId = (r: GridRow) => r.id,
+    selectedRowId = null,
     onRowClick,
     sort,
     onSortChange,
@@ -81,6 +83,8 @@
     loadGroup,
     onRowReorder,
     pageSize = 0,
+    pageSizeOptions,
+    onPageSizeChange,
     page,
     onPageChange,
     onColumnReorder,
@@ -90,7 +94,12 @@
   }: {
     rows: GridRow[];
     columns: ColumnDef[];
-    height: number;
+    /** Viewport height. A **number** is the scroll viewport's pixel height (the
+        grid's total height is that plus header/toolbar/footer chrome). A **CSS
+        string** (e.g. `'100%'`, `'80vh'`, `'480px'`) sizes the whole grid element
+        and the viewport auto-fits the space left after the chrome — give the grid
+        a sized parent (or use `'100%'` inside a flex/grid cell). */
+    height: number | string;
     /** Row height in px (uniform), or a function for variable heights
         (in-memory mode only). Default 36. */
     rowHeight?: number | ((row: GridRow, index: number) => number);
@@ -99,6 +108,11 @@
     /** Allow drag-to-resize column widths. Default true; opt out per column
         with `resizable: false`. */
     resizable?: boolean;
+    /** Highlight cells/ranges on click-drag (the blue selection fill + focus
+        ring + fill handle). Set false for a read-only/display grid where clicks
+        should pass straight through to `onRowClick`/`onCellClick` without a
+        selection highlight. Default true. */
+    cellSelection?: boolean;
     /** Show a leading checkbox column for whole-row selection (keyed by row id,
         stable across sort/filter). Default false. */
     rowSelection?: boolean;
@@ -128,6 +142,10 @@
     /** Identity key for row selection. Defaults to `row.id`; override for
         string/UUID/composite keys. */
     getRowId?: (row: GridRow) => string | number;
+    /** Controlled "active row" highlight (keyed by `getRowId`) — for
+        master-detail / list-detail where one row is selected. Independent of the
+        checkbox `rowSelection` and the cell range selection. `null` = none. */
+    selectedRowId?: string | number | null;
     /** Called when a data row is activated by click or Enter (open a detail
         view, navigate, …). Edit-input and checkbox clicks are excluded. */
     onRowClick?: (row: GridRow, event: MouseEvent | KeyboardEvent) => void;
@@ -210,6 +228,12 @@
     /** Rows per page. When > 0 (in-memory mode), shows a pager instead of one
         long scroll; rows still virtualize within a page. Default 0 (off). */
     pageSize?: number;
+    /** Page-size choices for a dropdown in the pager (e.g. `[25, 50, 100]`).
+        Picking one re-pages from page 0. Uncontrolled unless you also drive
+        `pageSize` and update it from `onPageSizeChange`. */
+    pageSizeOptions?: number[];
+    /** Called with the new page size when the pager's size dropdown changes. */
+    onPageSizeChange?: (size: number) => void;
     /** Controlled current page (0-based). Omit for uncontrolled paging. */
     page?: number;
     /** Called with the new page index when the pager is used. */
@@ -239,6 +263,11 @@
   const gid = `bo-grid-${uid++}`;
 
   let scrollTop = $state(0);
+  // Styled floating tooltip (opt-in via column `tooltip`): a single fixed-
+  // position bubble driven by the hovered cell's `data-bo-tip`. Fixed escapes
+  // the cell/viewport overflow:hidden without a portal.
+  const hasTooltips = $derived(columns.some((c) => !!c.tooltip || !!c.headerTooltip));
+  let tip = $state<{ x: number; y: number; text: string; below: boolean } | null>(null);
   // Sort order, primary first. Empty = unsorted. Multiple keys via Shift-click.
   // Controlled by the `sort` prop when provided, else internal state.
   let internalSorts = $state<SortState[]>([]);
@@ -512,6 +541,12 @@
   const COL_OVERSCAN = 320; // px
   let scrollLeft = $state(0);
   let viewW = $state(0);
+  // Viewport height in px for row virtualization. A numeric `height` is that
+  // value directly; a CSS-string `height` (auto-fit) is the measured viewport
+  // height (clientHeight), with a sane fallback before the first measure.
+  const heightIsPx = $derived(typeof height === 'number');
+  let viewH = $state(0);
+  const viewPx = $derived(heightIsPx ? (height as number) : viewH || 400);
   type ColItem = { kind: 'cell'; ci: number; key: string } | { kind: 'spacer'; w: number; key: string };
   const colItems = $derived.by<ColItem[]>(() => {
     const n = cols.length;
@@ -902,15 +937,24 @@
   });
 
   // Pagination (in-memory only): slice the view into pages; rows still
-  // virtualize within a page. Off when pageSize <= 0.
-  const paged = $derived(pageSize > 0 && !source);
+  // virtualize within a page. Off when the page size is <= 0.
+  // Effective page size: a runtime pick from `pageSizeOptions` (uncontrolled),
+  // else the `pageSize` prop.
+  let internalPageSize = $state<number | null>(null);
+  const effPageSize = $derived(internalPageSize ?? pageSize);
+  function setPageSize(size: number): void {
+    internalPageSize = size;
+    onPageSizeChange?.(size);
+    setPage(0); // a new page size invalidates the current page index
+  }
+  const paged = $derived(effPageSize > 0 && !source);
   let internalPage = $state(0);
   const currentPage = $derived(page ?? internalPage); // controlled by `page` prop, else internal
   function setPage(p: number): void {
     if (page === undefined) internalPage = p; // uncontrolled: own the state
     onPageChange?.(p); // always notify
   }
-  const pageCount = $derived(paged ? Math.max(1, Math.ceil(view.length / pageSize)) : 1);
+  const pageCount = $derived(paged ? Math.max(1, Math.ceil(view.length / effPageSize)) : 1);
   // Keep the page in range when the view shrinks (filter/sort changes).
   $effect(() => {
     const max = pageCount - 1;
@@ -919,7 +963,7 @@
     });
   });
   const pageRows = $derived(
-    paged ? view.slice(currentPage * pageSize, currentPage * pageSize + pageSize) : view,
+    paged ? view.slice(currentPage * effPageSize, currentPage * effPageSize + effPageSize) : view,
   );
 
   const treeData = $derived(!!(getChildren || loadChildren) && !source);
@@ -929,7 +973,7 @@
   // Drag-to-reorder rows (flat, unsorted, in-memory only). The handle lives in
   // the first cell; the dragged/drop indices are tracked in component state.
   const reorderable = $derived(
-    !!onRowReorder && !source && !treeData && groupBy.length === 0 && pageSize <= 0,
+    !!onRowReorder && !source && !treeData && groupBy.length === 0 && effPageSize <= 0,
   );
   let dragRowVr = $state(-1);
   let dropRowVr = $state(-1);
@@ -1059,12 +1103,12 @@
   const rowWidthStyle = $derived(
     hScroll ? `width:${layout.totalWidth + leadPx}px;right:auto;` : '',
   );
-  const visibleCount = $derived(Math.ceil(height / baseH) + OVERSCAN * 2);
+  const visibleCount = $derived(Math.ceil(viewPx / baseH) + OVERSCAN * 2);
   const start = $derived(Math.max(0, hm.indexAt(scrollTop) - OVERSCAN));
   const renderEnd = $derived(
     source
       ? (controller && controller.total > 0 ? Math.min(start + visibleCount, controller.total) : start + visibleCount)
-      : Math.min(flat.length, hm.indexAt(scrollTop + height) + OVERSCAN + 1),
+      : Math.min(flat.length, hm.indexAt(scrollTop + viewPx) + OVERSCAN + 1),
   );
 
   type RenderItem =
@@ -1139,6 +1183,27 @@
     if (hScroll && headEl) headEl.scrollLeft = el.scrollLeft; // keep header in sync
     if (hScroll && filterRowEl) filterRowEl.scrollLeft = el.scrollLeft; // and the filter row
     if (hScroll && groupHeadEl) groupHeadEl.scrollLeft = el.scrollLeft; // and group headers
+    if (tip) tip = null; // a stale fixed-position bubble would float away on scroll
+  }
+
+  // Tooltip hover delegation (only wired when a column opts in). Matches both
+  // data cells (`.c[data-bo-tip]`) and column headers (`.h[data-bo-tip]`).
+  function onTipOver(e: PointerEvent) {
+    const cell = (e.target as HTMLElement | null)?.closest?.('[data-bo-tip]') as HTMLElement | null;
+    const text = cell?.dataset.boTip;
+    if (!cell || !text) {
+      if (tip) tip = null;
+      return;
+    }
+    const rect = cell.getBoundingClientRect();
+    const below = rect.top < 72; // not enough room above near the header — flip down
+    const x = Math.min(Math.max(rect.left + rect.width / 2, 96), window.innerWidth - 96);
+    tip = { text, x, y: below ? rect.bottom + 7 : rect.top - 7, below };
+  }
+  function onTipOut(e: PointerEvent) {
+    const to = e.relatedTarget as HTMLElement | null;
+    if (to?.closest?.('[data-bo-tip]')) return; // moved within the same tipped cell/header
+    if (tip) tip = null;
   }
 
   function toggleGroup(path: string) {
@@ -1150,6 +1215,8 @@
 
   function onCellDown(r: number, c: number, e: PointerEvent) {
     if (e.button !== 0) return;
+    // Display grid: skip range selection but let onclick (row/cell click) fire.
+    if (!cellSelection) return;
     e.preventDefault();
     gridEl?.focus();
     if (e.shiftKey) sel.extendTo(r, c);
@@ -1354,7 +1421,7 @@
     const top = hm.offsetOf(f.r);
     const h = hm.heightOf(f.r);
     if (top < viewportEl.scrollTop) viewportEl.scrollTop = top;
-    else if (top + h > viewportEl.scrollTop + height) viewportEl.scrollTop = top + h - height;
+    else if (top + h > viewportEl.scrollTop + viewPx) viewportEl.scrollTop = top + h - viewPx;
   }
 
   async function copySelection() {
@@ -1540,7 +1607,7 @@
     const f = sel.focus;
     if (f && (e.key === 'Home' || e.key === 'End' || e.key === 'PageUp' || e.key === 'PageDown')) {
       e.preventDefault();
-      const page = Math.max(1, Math.floor(height / baseH) - 1);
+      const page = Math.max(1, Math.floor(viewPx / baseH) - 1);
       if (e.key === 'Home') focusTo(mod ? 0 : f.r, 0, e.shiftKey);
       else if (e.key === 'End') focusTo(mod ? maxR : f.r, maxC, e.shiftKey);
       else if (e.key === 'PageDown') focusTo(f.r + page, f.c, e.shiftKey);
@@ -1594,7 +1661,7 @@
   aria-colcount={cols.length + leadCols}
   aria-multiselectable="true"
   aria-activedescendant={activeId}
-  style={themeStyle}
+  style="{themeStyle}{heightIsPx ? '' : `;height:${height};min-height:0`}"
   bind:this={gridEl}
   onkeydown={onKeydown}
 >
@@ -1623,7 +1690,17 @@
       {/each}
     </div>
   {/if}
-  <div class="head" role="row" aria-rowindex={1} bind:this={headEl} style={hScroll ? 'overflow:hidden;' : ''}>
+  <!-- Tooltip hover delegation; header semantics live on the columnheader buttons. -->
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  <div
+    class="head"
+    role="row"
+    aria-rowindex={1}
+    bind:this={headEl}
+    style={hScroll ? 'overflow:hidden;' : ''}
+    onpointerover={hasTooltips ? onTipOver : undefined}
+    onpointerout={hasTooltips ? onTipOut : undefined}
+  >
     {#if expandable}
       <span class="expandcell selhead" role="columnheader" aria-colindex={1} style={expandCellStyle(true)}></span>
     {/if}
@@ -1652,6 +1729,7 @@
         type="button"
         role="columnheader"
         aria-colindex={ci + 1 + leadCols}
+        data-bo-tip={col.headerTooltip}
         draggable="true"
         aria-sort={isSortable(col) && sortInfo(col.key)
           ? sortInfo(col.key)?.dir === 'asc'
@@ -1682,6 +1760,9 @@
         }}
       >
         <span class="label">{col.header}</span>
+        {#if col.headerTooltip && col.headerInfo}
+          <span class="hinfo" aria-hidden="true">i</span>
+        {/if}
         {#if isSortable(col) && sortInfo(col.key)}
           {@const si = sortInfo(col.key)}
           <span class="ind">
@@ -1762,12 +1843,18 @@
     </div>
   {/if}
 
+  <!-- Tooltip hover delegation lives on the scroll container; the grid's
+       interactive semantics are on the role="grid" root. -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="viewport"
-    style="height:{height}px;{hScroll ? 'overflow-x:auto;' : ''}"
+    style="{heightIsPx ? `height:${height}px` : 'flex:1 1 auto;min-height:0'};{hScroll ? 'overflow-x:auto;' : ''}"
     bind:this={viewportEl}
     bind:clientWidth={viewW}
+    bind:clientHeight={viewH}
     onscroll={onScroll}
+    onpointerover={hasTooltips ? onTipOver : undefined}
+    onpointerout={hasTooltips ? onTipOut : undefined}
   >
     {#if pinnedRows.length > 0}
       <div class="pinned-top">
@@ -1839,7 +1926,7 @@
         {:else}
           <!-- Row activation is keyboard-accessible at the grid level: Enter on the focused cell fires onRowClick (focus is via aria-activedescendant). -->
           <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-          <div class="row {rowClass?.(item.row) ?? ''}" class:alt={item.vr % 2 === 1} class:rowsel={rowSelection && isRowSelected(getRowId(item.row))} class:clickable={!!onRowClick} class:droptarget={reorderable && dropRowVr === item.vr && dragRowVr !== item.vr} role="row" tabindex="-1" aria-rowindex={item.vr + 2} aria-selected={rowSelection ? isRowSelected(getRowId(item.row)) : undefined} aria-level={treeData ? (item.depth ?? 0) + 1 : undefined} aria-expanded={treeData && item.hasChildren ? isExpanded(getRowId(item.row)) : undefined} style="top:{hm.offsetOf(item.vr)}px;height:{expandable ? baseH : hm.heightOf(item.vr)}px;{rowWidthStyle}" onclick={(e) => onRowClick?.(item.row, e)} oncontextmenu={(e) => openRowMenu(item.row, e)} ondragover={reorderable ? (e) => { if (dragRowVr < 0) return; e.preventDefault(); dropRowVr = item.vr; } : undefined} ondrop={reorderable ? (e) => { e.preventDefault(); onRowDrop(); } : undefined}>
+          <div class="row {rowClass?.(item.row) ?? ''}" class:alt={item.vr % 2 === 1} class:rowsel={rowSelection && isRowSelected(getRowId(item.row))} class:rowactive={selectedRowId != null && getRowId(item.row) === selectedRowId} class:clickable={!!onRowClick} class:droptarget={reorderable && dropRowVr === item.vr && dragRowVr !== item.vr} role="row" tabindex="-1" aria-rowindex={item.vr + 2} aria-selected={rowSelection ? isRowSelected(getRowId(item.row)) : undefined} aria-level={treeData ? (item.depth ?? 0) + 1 : undefined} aria-expanded={treeData && item.hasChildren ? isExpanded(getRowId(item.row)) : undefined} style="top:{hm.offsetOf(item.vr)}px;height:{expandable ? baseH : hm.heightOf(item.vr)}px;{rowWidthStyle}" onclick={(e) => onRowClick?.(item.row, e)} oncontextmenu={(e) => openRowMenu(item.row, e)} ondragover={reorderable ? (e) => { if (dragRowVr < 0) return; e.preventDefault(); dropRowVr = item.vr; } : undefined} ondrop={reorderable ? (e) => { e.preventDefault(); onRowDrop(); } : undefined}>
             {#if expandable}
               <span class="expandcell" style={expandCellStyle(false)}>
                 <button
@@ -1882,8 +1969,8 @@
                   colIndex={ci + 1 + leadCols}
                   cellId={`${gid}-r${item.vr}-c${ci}`}
                   cellSnippet={cell}
-                  selected={sel.contains(item.vr, ci)}
-                  focused={sel.isFocus(item.vr, ci)}
+                  selected={cellSelection && sel.contains(item.vr, ci)}
+                  focused={cellSelection && sel.isFocus(item.vr, ci)}
                   pinned={pinned && layout.info[ci].pinned}
                   pinSide={layout.info[ci].side ?? 'left'}
                   pinOffset={layout.info[ci].side === 'right' ? layout.info[ci].right : layout.info[ci].left + leadPx}
@@ -1945,7 +2032,15 @@
   <AggregationBar result={agg} kinds={aggregations} />
 
   {#if paged}
-    <Pager page={currentPage} {pageCount} total={view.length} onGoto={goToPage} />
+    <Pager
+      page={currentPage}
+      {pageCount}
+      total={view.length}
+      onGoto={goToPage}
+      pageSize={effPageSize}
+      {pageSizeOptions}
+      onPageSize={setPageSize}
+    />
   {/if}
 
   {#if menu}
@@ -1979,6 +2074,18 @@
       onClose={() => (panelXY = null)}
     />
   {/if}
+
+  {#if tip}
+    <div
+      class="bo-tip"
+      class:below={tip.below}
+      role="tooltip"
+      aria-hidden="true"
+      style="left:{tip.x}px;top:{tip.y}px"
+    >
+      {tip.text}
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -2022,6 +2129,65 @@
   .grid:focus-visible {
     border-color: var(--bo-sel-border);
   }
+  /* Styled floating tooltip (opt-in via column `tooltip`). Fixed-positioned so
+     it escapes the cell/viewport overflow; centred on the cell, flips below
+     near the header. */
+  .bo-tip {
+    position: fixed;
+    z-index: 60;
+    max-width: 280px;
+    padding: 5px 9px;
+    font-family: var(--bo-sans);
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--bo-text);
+    background: var(--bo-header-bg);
+    border: 0.5px solid var(--bo-border);
+    border-radius: 6px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    pointer-events: none;
+    transform: translate(-50%, -100%);
+    animation: bo-tip-in 90ms ease-out;
+  }
+  .bo-tip.below {
+    transform: translate(-50%, 0);
+  }
+  /* Caret. */
+  .bo-tip::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    background: var(--bo-header-bg);
+    border: 0.5px solid var(--bo-border);
+    transform: translateX(-50%) rotate(45deg);
+  }
+  .bo-tip:not(.below)::after {
+    bottom: -4px;
+    border-top: 0;
+    border-left: 0;
+  }
+  .bo-tip.below::after {
+    top: -4px;
+    border-bottom: 0;
+    border-right: 0;
+  }
+  @keyframes bo-tip-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bo-tip {
+      animation: none;
+    }
+  }
   /* Built-in quick-filter toolbar (opt-in via `quickFilter`). */
   .bo-toolbar {
     display: flex;
@@ -2174,6 +2340,28 @@
     font-size: 9px;
     color: var(--bo-text);
   }
+  /* Header info cue: a small circled "i" signalling a headerTooltip. */
+  .h .hinfo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 12px;
+    height: 12px;
+    margin-left: 1px;
+    font-size: 8px;
+    font-style: italic;
+    font-family: var(--bo-mono);
+    line-height: 1;
+    color: var(--bo-text-dim);
+    border: 0.5px solid var(--bo-text-dim);
+    border-radius: 50%;
+    pointer-events: none;
+  }
+  .h:hover .hinfo {
+    color: var(--bo-text);
+    border-color: var(--bo-text);
+  }
   .h .ind .ord {
     font-size: 8px;
     line-height: 1;
@@ -2374,6 +2562,12 @@
   .row.rowsel {
     background: var(--bo-sel-fill);
   }
+  /* Controlled active-row highlight (selectedRowId) — a tint + an accent bar so
+     it reads distinctly from the checkbox selection and hover. */
+  .row.rowactive {
+    background: var(--bo-sel-fill);
+    box-shadow: inset 2px 0 0 var(--bo-sel-border);
+  }
   .row.clickable {
     cursor: pointer;
   }

package/dist/grid/Grid.svelte.d.ts

@@ -8,7 +8,12 @@ import type { RowSource } from './source';
 type $$ComponentProps = {
     rows: GridRow[];
     columns: ColumnDef[];
-    height: number;
+    /** Viewport height. A **number** is the scroll viewport's pixel height (the
+        grid's total height is that plus header/toolbar/footer chrome). A **CSS
+        string** (e.g. `'100%'`, `'80vh'`, `'480px'`) sizes the whole grid element
+        and the viewport auto-fits the space left after the chrome — give the grid
+        a sized parent (or use `'100%'` inside a flex/grid cell). */
+    height: number | string;
     /** Row height in px (uniform), or a function for variable heights
         (in-memory mode only). Default 36. */
     rowHeight?: number | ((row: GridRow, index: number) => number);
@@ -17,6 +22,11 @@ type $$ComponentProps = {
     /** Allow drag-to-resize column widths. Default true; opt out per column
         with `resizable: false`. */
     resizable?: boolean;
+    /** Highlight cells/ranges on click-drag (the blue selection fill + focus
+        ring + fill handle). Set false for a read-only/display grid where clicks
+        should pass straight through to `onRowClick`/`onCellClick` without a
+        selection highlight. Default true. */
+    cellSelection?: boolean;
     /** Show a leading checkbox column for whole-row selection (keyed by row id,
         stable across sort/filter). Default false. */
     rowSelection?: boolean;
@@ -46,6 +56,10 @@ type $$ComponentProps = {
     /** Identity key for row selection. Defaults to `row.id`; override for
         string/UUID/composite keys. */
     getRowId?: (row: GridRow) => string | number;
+    /** Controlled "active row" highlight (keyed by `getRowId`) — for
+        master-detail / list-detail where one row is selected. Independent of the
+        checkbox `rowSelection` and the cell range selection. `null` = none. */
+    selectedRowId?: string | number | null;
     /** Called when a data row is activated by click or Enter (open a detail
         view, navigate, …). Edit-input and checkbox clicks are excluded. */
     onRowClick?: (row: GridRow, event: MouseEvent | KeyboardEvent) => void;
@@ -134,6 +148,12 @@ type $$ComponentProps = {
     /** Rows per page. When > 0 (in-memory mode), shows a pager instead of one
         long scroll; rows still virtualize within a page. Default 0 (off). */
     pageSize?: number;
+    /** Page-size choices for a dropdown in the pager (e.g. `[25, 50, 100]`).
+        Picking one re-pages from page 0. Uncontrolled unless you also drive
+        `pageSize` and update it from `onPageSizeChange`. */
+    pageSizeOptions?: number[];
+    /** Called with the new page size when the pager's size dropdown changes. */
+    onPageSizeChange?: (size: number) => void;
     /** Controlled current page (0-based). Omit for uncontrolled paging. */
     page?: number;
     /** Called with the new page index when the pager is used. */