@svgrid/grid 1.2.22 → 1.2.24

package/src/SvGauge.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  /**
+   * SvGauge - a radial arc gauge (SVG) that renders a value within [min, max]
+   * with optional colored threshold bands, a needle, and a center label. Parity:
+   * Smart `smart-gauge` (radial). Display control; theme-driven.
+   *
+   * The arc/needle geometry + `role="meter"` ARIA live in the headless
+   * `createGauge` core; this component is just one styled renderer over it.
+   */
+  import { createGauge } from './createGauge.svelte'
+
+  type Band = { from: number; to: number; color: string }
+
+  type Props = {
+    value?: number
+    min?: number
+    max?: number
+    /** Sweep angle in degrees (default 270, a classic dashboard gauge). */
+    sweep?: number
+    /** Colored threshold bands along the arc. */
+    bands?: Band[]
+    /** Show the needle. */
+    needle?: boolean
+    /** Center label (defaults to the formatted value). */
+    label?: string
+    unit?: string
+    size?: number
+    thickness?: number
+    formatValue?: (v: number) => string
+    ariaLabel?: string
+  }
+
+  let {
+    value = 0,
+    min = 0,
+    max = 100,
+    sweep = 270,
+    bands = [],
+    needle = true,
+    label,
+    unit = '',
+    size = 180,
+    thickness = 14,
+    formatValue,
+    ariaLabel,
+  }: Props = $props()
+
+  const gauge = createGauge({
+    value: () => value,
+    min: () => min,
+    max: () => max,
+    sweep: () => sweep,
+    size: () => size,
+    thickness: () => thickness,
+    ariaLabel: () => ariaLabel,
+  })
+  const clamped = $derived(gauge.clamped)
+  const cx = $derived(gauge.cx)
+  const cy = $derived(gauge.cy)
+  const r = $derived(gauge.r)
+  const arcPath = (v0: number, v1: number, radius: number) => gauge.arcPath(v0, v1, radius)
+  const needleEnd = $derived(gauge.needleEnd)
+  const display = $derived(label ?? `${formatValue ? formatValue(clamped) : Math.round(clamped)}${unit}`)
+</script>
+
+<div class="sv-gauge" {...gauge.rootProps()}>
+  <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} class="sv-gauge__svg">
+    <!-- track -->
+    <path d={arcPath(min, max, r)} class="sv-gauge__track" fill="none" stroke-width={thickness} stroke-linecap="round" />
+    <!-- bands (or accent fill up to value when no bands) -->
+    {#if bands.length}
+      {#each bands as band (band.from + '-' + band.to)}
+        <path d={arcPath(band.from, band.to, r)} fill="none" stroke={band.color} stroke-width={thickness} stroke-linecap="round" />
+      {/each}
+    {:else}
+      <path d={arcPath(min, clamped, r)} class="sv-gauge__value" fill="none" stroke-width={thickness} stroke-linecap="round" />
+    {/if}
+    {#if needle}
+      <line x1={cx} y1={cy} x2={needleEnd.x} y2={needleEnd.y} class="sv-gauge__needle" stroke-linecap="round" />
+      <circle cx={cx} cy={cy} r="5" class="sv-gauge__hub" />
+    {/if}
+  </svg>
+  <div class="sv-gauge__label">{display}</div>
+</div>
+
+<style>
+  .sv-gauge { position: relative; display: inline-flex; flex-direction: column; align-items: center; color: var(--sg-fg, #0f172a); }
+  .sv-gauge__svg { display: block; }
+  .sv-gauge__track { stroke: var(--sg-border, #e2e8f0); }
+  .sv-gauge__value { stroke: var(--sg-accent, #2563eb); }
+  .sv-gauge__needle { stroke: var(--sg-fg, #0f172a); stroke-width: 3; }
+  .sv-gauge__hub { fill: var(--sg-fg, #0f172a); }
+  .sv-gauge__label {
+    position: absolute; left: 0; right: 0; bottom: 22%; text-align: center;
+    font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums;
+  }
+</style>

package/src/SvGrid.controller.svelte.ts

@@ -409,6 +409,10 @@ export function createSvGridController<
   });
   let columnVirtualizerVersion = $state(0);
   let gridStateVersion = $state(0);
+  // Bumps only when a row-model-affecting slice changes (see the store
+  // subscription below) - the row-model derivation depends on THIS, not the
+  // catch-all gridStateVersion, so navigation doesn't rebuild 1M rows.
+  let dataStateVersion = $state(0);
   const selectionColumnWidth = 44;
   const rowNumberColumnWidth = $derived(props.rowNumberWidth ?? 56);
   const showRowNumbersEffective = $derived(props.showRowNumbers ?? false);
@@ -582,6 +586,10 @@ export function createSvGridController<
   // the wrapper records filter state but does not actually filter rows.
   // svelte-ignore state_referenced_locally
   const externalFilterEnabled = props.externalFilter === true;
+  // Server-side pagination: the footer reads rowCount/pageIndex from props and
+  // emits onPaginationChange instead of slicing locally. Controlled by the
+  // consumer. Reactive (unlike sort/filter) so pageIndex/rowCount can change.
+  const externalPaginationEnabled = $derived(props.externalPagination === true);
   const passthroughSortedRowModel = ({ rows }: { rows: Array<Row<TData>> }) =>
     rows;
 
@@ -629,9 +637,38 @@ export function createSvGridController<
     },
   });
 
+  // `gridStateVersion` bumps on EVERY store change (incl. moving the active
+  // cell). `dataStateVersion` bumps ONLY when a slice that actually changes the
+  // row model changes (sort / filter / pagination / grouping / expansion /
+  // selection) - so the O(rows) row-model derivation does NOT re-run on plain
+  // keyboard navigation. Without this, arrow-keying a 1,000,000-row grid re-ran
+  // the entire core->filter->sort->group pipeline on every keystroke.
+  let prevDataSlices:
+    | { sorting: unknown; columnFilters: unknown; pagination: unknown; grouping: unknown; expanded: unknown; rowSelection: unknown }
+    | null = null;
   $effect(() => {
     const unsubscribe = grid.store.subscribe(() => {
       gridStateVersion += 1;
+      const s = grid.getState();
+      if (
+        !prevDataSlices ||
+        prevDataSlices.sorting !== s.sorting ||
+        prevDataSlices.columnFilters !== s.columnFilters ||
+        prevDataSlices.pagination !== s.pagination ||
+        prevDataSlices.grouping !== s.grouping ||
+        prevDataSlices.expanded !== s.expanded ||
+        prevDataSlices.rowSelection !== s.rowSelection
+      ) {
+        dataStateVersion += 1;
+        prevDataSlices = {
+          sorting: s.sorting,
+          columnFilters: s.columnFilters,
+          pagination: s.pagination,
+          grouping: s.grouping,
+          expanded: s.expanded,
+          rowSelection: s.rowSelection,
+        };
+      }
     });
     return unsubscribe;
   });
@@ -977,7 +1014,11 @@ export function createSvGridController<
    * filters reduce the dataset.
    */
   const allRowsBeforePagination = $derived.by(() => {
-    gridStateVersion;
+    // Depend on dataStateVersion (row-model-affecting store changes) NOT
+    // gridStateVersion - so moving the active cell / selection does not force
+    // this O(rows) pipeline to re-run. Filter-input state (globalFilter etc.)
+    // and internalData are read below and tracked as their own dependencies.
+    dataStateVersion;
     // Touch internalData + internalColumns so the row model re-derives when
     // the consumer replaces the data array (e.g. via a "Reset" button).
     void internalData;
@@ -1081,7 +1122,8 @@ export function createSvGridController<
    */
   const allRows = $derived.by(() => {
     const rows = allRowsBeforePagination;
-    if (!paginationEnabled) return rows;
+    // External pagination: `data` already IS the current page - never slice.
+    if (!paginationEnabled || externalPaginationEnabled) return rows;
     const { pageIndex, pageSize } = paginationState;
     const start = pageIndex * pageSize;
     return rows.slice(start, start + pageSize);
@@ -1089,14 +1131,27 @@ export function createSvGridController<
 
   // When a filter reduces the dataset, the stored pageIndex can point beyond
   // the last valid page. Reset to page 0 so the grid never shows a blank body.
+  // Skipped for external pagination, where the consumer owns pageIndex.
   $effect(() => {
-    if (!paginationEnabled) return;
+    if (!paginationEnabled || externalPaginationEnabled) return;
     const { pageIndex, pageSize } = paginationState;
     const pageCount = Math.ceil(allRowsBeforePagination.length / pageSize);
     if (pageCount > 0 && pageIndex >= pageCount) {
       grid.setPagination({ pageIndex: 0, pageSize });
     }
   });
+
+  // Footer-facing pagination values. In external mode they come from the
+  // consumer-controlled props; otherwise from the local row model + state.
+  const paginationTotalRows = $derived(
+    externalPaginationEnabled ? (props.rowCount ?? 0) : allRowsBeforePagination.length,
+  );
+  const paginationPageIndex = $derived(
+    externalPaginationEnabled ? (props.pageIndex ?? 0) : paginationState.pageIndex,
+  );
+  const paginationPageSize = $derived(
+    externalPaginationEnabled ? (props.pageSize ?? 10) : paginationState.pageSize,
+  );
   const rowSelectionState = $derived.by(() => {
     gridStateVersion;
     return grid.getState().rowSelection ?? {};
@@ -1501,9 +1556,14 @@ export function createSvGridController<
 
   let summaryByColumn = $state<Record<string, string>>({});
   $effect(() => {
-    // Re-aggregate whenever the visible data, columns, edits, or any
-    // state that reorders/filters rows changes.
-    gridStateVersion;
+    // Re-aggregate whenever the data / columns / edits change. We depend on
+    // `allRows` / `allColumns` / `editedCellValues` DIRECTLY - not the
+    // catch-all `gridStateVersion` - because that version bumps on EVERY store
+    // change, including moving the active cell or selection. `allRows` stays
+    // referentially stable across those (sort/filter/paginate produce a new
+    // rows array; navigation does not), so this now skips the
+    // O(rows x cols) aggregation on plain keyboard navigation - which was
+    // making arrow-key movement crawl on huge grids (e.g. 1,000,000 rows).
     void editedCellValues;
     const rows = allRows;
     const columns = allColumns;
@@ -2209,6 +2269,10 @@ export function createSvGridController<
     get sortDirectionByColumn() { return sortDirectionByColumn; },
     get groupingColumns() { return groupingColumns; },
     get paginationState() { return paginationState; },
+    get externalPaginationEnabled() { return externalPaginationEnabled; },
+    get paginationTotalRows() { return paginationTotalRows; },
+    get paginationPageIndex() { return paginationPageIndex; },
+    get paginationPageSize() { return paginationPageSize; },
     get getRowColumnValue() { return getRowColumnValue; },
     get allRowsBeforePagination() { return allRowsBeforePagination; },
     get allRows() { return allRows; },
@@ -2274,6 +2338,7 @@ export function createSvGridController<
     get computeRowClass() { return computeRowClass; },
     get computeCellClass() { return computeCellClass; },
     get computeCellTooltip() { return computeCellTooltip; },
+    get computeCellValidity() { return computeCellValidity; },
     get computeCellNote() { return computeCellNote; },
     get getCellDisplayValue() { return getCellDisplayValue; },
     get getColumnAlign() { return getColumnAlign; },
@@ -2309,6 +2374,7 @@ export function createSvGridController<
     get getSelectionRects() { return getSelectionRects; },
     get fillHandleCell() { return fillHandleCell; },
     get isInFillPreview() { return isInFillPreview; },
+    get fillMarqueeEdges() { return fillMarqueeEdges; },
     get findColumnById() { return findColumnById; },
     get readCellRaw() { return readCellRaw; },
     get writeCellRaw() { return writeCellRaw; },
@@ -2402,9 +2468,9 @@ export function createSvGridController<
   const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard<TFeatures, TData>(ctx);
   const { computeSummaries, hasRenderedColumn } = createSummaries<TFeatures, TData>(ctx);
   const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus<TFeatures, TData>(ctx);
-  const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender<TFeatures, TData>(ctx);
+  const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender<TFeatures, TData>(ctx);
   const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing<TFeatures, TData>(ctx);
-  const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection<TFeatures, TData>(ctx);
+  const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection<TFeatures, TData>(ctx);
   const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, startColumnResize, onColumnResizeMove, endColumnResize, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns<TFeatures, TData>(ctx);
   const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd } = createRowDrag<TFeatures, TData>(ctx);
   const { register: registerAlignedGrid, broadcastScroll: broadcastAlignedScroll, broadcastWidths: broadcastAlignedWidths } = createAlignedGrids<TFeatures, TData>(ctx);

package/src/SvGrid.css

@@ -348,9 +348,13 @@
 .sv-grid-table tr > :last-child.sv-grid-cell {
   border-right: 0;
 }
-/* Row hover tint. */
-.sv-grid-table tbody tr:hover > .sv-grid-cell {
-  background: var(--sg-row-hover-bg, #eef2ff);
+/* Row hover tint - opt-in via `enableRowHover` (off by default; the class is
+   present unless the grid opts in). Uses `background-color` (not the shorthand)
+   so it never resets the fill-marquee `background-image`, and skips selected
+   cells so the selection stays visible under a hovered row. */
+.sv-grid-table:not(.sv-grid-no-row-hover)
+  tbody tr:hover > .sv-grid-cell:not([data-selected-range="true"]) {
+  background-color: var(--sg-row-hover-bg, #eef2ff);
 }
 /* Only the active cell + the cell hosting the fill handle become a
    positioning context (so the absolutely-positioned handle anchors
@@ -441,8 +445,10 @@
     ),
     var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
-/* Hovered row keeps the pinned tint distinguishable from the hover. */
-.sv-grid-row:hover > .sv-grid-cell[data-pinned] {
+/* Hovered row keeps the pinned tint distinguishable from the hover. Selected
+   cells are excluded so the selection stays visible under hover. */
+.sv-grid-table:not(.sv-grid-no-row-hover)
+  .sv-grid-row:hover > .sv-grid-cell[data-pinned]:not([data-selected-range="true"]) {
   background:
     linear-gradient(
       color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent),
@@ -1062,18 +1068,52 @@ select.sv-grid-fr-editor {
   transform-origin: bottom right;
 }
 
-/* Fill-preview overlay paints an accent border on the cells the user is
-   about to fill. Source cells (still in the selection range) keep their
-   normal range styling. The border + tint derive from the theme accent
-   (`--sg-accent`) so they match each theme instead of a fixed blue;
-   `--sg-fill-preview-border` / `--sg-fill-preview-bg` let a theme override
-   them directly. */
-.sv-grid-cell[data-fill-preview="true"] {
-  box-shadow: inset 0 0 0 2px
-    var(--sg-fill-preview-border,
-      color-mix(in srgb, var(--sg-accent, #0b63f3) 50%, transparent));
-  background: var(--sg-fill-preview-bg,
-    color-mix(in srgb, var(--sg-accent, #0b63f3) 8%, transparent));
+/* Excel-style fill-handle drag marquee: ONE thin dashed rectangle around the
+   whole target range (source + fill-into area), not a thick per-cell border or
+   fill tint. Drawn as four background-image layers on the boundary cells - no
+   `border`, so it paints on the compositor with zero reflow while dragging.
+   `--sg-fill-marquee` overrides the colour (defaults to a theme-aware grey). */
+/* Step 1 (LOW specificity): default every edge layer to `none`, then light up
+   the edges this cell sits on. These are custom properties, which the
+   `background:` shorthands on selected / zebra cells do NOT reset - so they can
+   safely live at low specificity and just compete with each other by source
+   order (gradient rules come after the defaults, so they win). */
+.sv-grid-cell[data-fill-top="true"],
+.sv-grid-cell[data-fill-bottom="true"],
+.sv-grid-cell[data-fill-left="true"],
+.sv-grid-cell[data-fill-right="true"] {
+  --sv-fill-top: none;
+  --sv-fill-bottom: none;
+  --sv-fill-left: none;
+  --sv-fill-right: none;
+  /* Match the selection colour (the grid accent) by default. */
+  --sv-fill-color: var(--sg-fill-marquee, var(--sg-accent, #2563eb));
+}
+.sv-grid-cell[data-fill-top="true"] {
+  --sv-fill-top: repeating-linear-gradient(to right, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+.sv-grid-cell[data-fill-bottom="true"] {
+  --sv-fill-bottom: repeating-linear-gradient(to right, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+.sv-grid-cell[data-fill-left="true"] {
+  --sv-fill-left: repeating-linear-gradient(to bottom, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+.sv-grid-cell[data-fill-right="true"] {
+  --sv-fill-right: repeating-linear-gradient(to bottom, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+/* Step 2 (HIGH specificity, `.sv-grid-table` prefix): compose the resolved edge
+   layers into `background-image` so it beats the `background:` shorthands on
+   selected / zebra / hover cells (which would otherwise reset background-image).
+   The cell keeps its background-COLOR; this only adds the dashed lines on top. */
+.sv-grid-table .sv-grid-cell[data-fill-top="true"],
+.sv-grid-table .sv-grid-cell[data-fill-bottom="true"],
+.sv-grid-table .sv-grid-cell[data-fill-left="true"],
+.sv-grid-table .sv-grid-cell[data-fill-right="true"] {
+  background-image: var(--sv-fill-top), var(--sv-fill-bottom),
+    var(--sv-fill-left), var(--sv-fill-right);
+  background-repeat: no-repeat;
+  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
+  background-position: top left, bottom left, top left, top right;
 }
 
 .sv-grid-cell-editing {
@@ -1338,6 +1378,17 @@ select.sv-grid-fr-editor {
 .sv-grid-cell-cf {
   position: relative;
 }
+/* Declarative cell validation (column `validate` hook). Invalid cells get a
+ * soft red wash and a red inset ring - Handsontable's `htInvalid` look. The
+ * value keeps rendering as-is; the message (if any) shows as the tooltip. */
+.sv-grid-cell-invalid {
+  background-color: var(--sg-invalid-bg, rgba(239, 68, 68, 0.14)) !important;
+  box-shadow: inset 0 0 0 1px var(--sg-invalid-border, rgba(239, 68, 68, 0.45));
+  color: var(--sg-invalid-fg, #b91c1c);
+}
+.sv-grid-cell-invalid.sv-grid-cell-active {
+  box-shadow: inset 0 0 0 2px var(--sg-invalid-border, rgba(239, 68, 68, 0.7));
+}
 .sv-grid-status-bar {
   display: flex;
   flex-wrap: wrap;
@@ -2103,32 +2154,34 @@ select.sv-grid-fr-editor {
   color: var(--sg-fg, #0f172a);
   font-size: 13px;
 }
+/* Top-positioned pager: rounded + bordered on the top edge instead. */
+.sv-grid-pagination-top {
+  border-top: 1px solid var(--sg-border, #e2e8f0);
+  border-bottom: 0;
+  border-radius: var(--sg-radius, 6px) var(--sg-radius, 6px) 0 0;
+}
 .sv-grid-pagination-pagesize {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--sg-muted, #64748b);
 }
-.sv-grid-pagination-pagesize select {
+.sv-grid-pagination-pagesize-dd {
+  position: relative;
   height: 28px;
-  padding: 0 22px 0 8px;
+  min-width: 62px;
   border: 1px solid var(--sg-input-border, #cbd5e1);
   border-radius: 5px;
   background: var(--sg-input-bg, #fff);
-  color: var(--sg-fg, #0f172a);
-  font: inherit;
+}
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown,
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-trigger {
+  background: transparent;
+  border-radius: 5px;
   font-size: 13px;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
-  background-size: 4px 4px, 4px 4px;
-  background-repeat: no-repeat;
+  color: var(--sg-fg, #0f172a);
 }
-.sv-grid-pagination-pagesize select:focus {
-  outline: none;
+.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.helpers.ts

@@ -69,19 +69,47 @@ export function toDateTimeLocalInputValue(value: unknown) {
   return parsed.toISOString().slice(0, 16);
 }
 
+/** Strip the `-native` opt-out suffix so the native-input helpers treat
+ *  `date-native` exactly like `date` (the rich pickers own the bare types). */
+function baseEditor(editorType: CellEditorType): string {
+  return String(editorType).replace(/-native$/, "");
+}
+
+/** 'HH:MM[:SS]' string (or Date) to a Date carrying that time (today's date). */
+export function timeStringToDate(value: unknown): Date | null {
+  if (value instanceof Date) return value;
+  if (typeof value === "string") {
+    const m = value.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?/);
+    if (m) {
+      const d = new Date();
+      d.setHours(Math.min(23, +m[1]!), Math.min(59, +m[2]!), m[3] ? +m[3] : 0, 0);
+      return d;
+    }
+  }
+  return null;
+}
+
+/** A Date to an 'HH:MM' string (the `time` editor's stored form). */
+export function dateToTimeString(d: Date | null): string | null {
+  if (!d) return null;
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
 export function getEditableInputValue(editorType: CellEditorType, value: unknown) {
-  if (editorType === "date") return toDateInputValue(value);
-  if (editorType === "datetime") return toDateTimeLocalInputValue(value);
+  const base = baseEditor(editorType);
+  if (base === "date") return toDateInputValue(value);
+  if (base === "datetime") return toDateTimeLocalInputValue(value);
   return String(value ?? "");
 }
 
 export function getEditorInputType(editorType: CellEditorType) {
-  if (editorType === "number") return "number";
-  if (editorType === "date") return "date";
-  if (editorType === "datetime") return "datetime-local";
-  if (editorType === "time") return "time";
-  if (editorType === "password") return "password";
-  if (editorType === "color") return "color";
+  const base = baseEditor(editorType);
+  if (base === "number") return "number";
+  if (base === "date") return "date";
+  if (base === "datetime") return "datetime-local";
+  if (base === "time") return "time";
+  if (base === "password") return "password";
+  if (base === "color") return "color";
   return "text";
 }
 
@@ -130,13 +158,14 @@ export function colorfulChipStyle(color: string | undefined): string {
 }
 
 export function getEditorClass(editorType: CellEditorType) {
-  if (editorType === "number")
+  const base = baseEditor(editorType);
+  if (base === "number")
     return "sv-grid-cell-editor sv-grid-cell-editor-number";
-  if (editorType === "date")
+  if (base === "date")
     return "sv-grid-cell-editor sv-grid-cell-editor-date";
-  if (editorType === "datetime")
+  if (base === "datetime")
     return "sv-grid-cell-editor sv-grid-cell-editor-datetime";
-  if (editorType === "color")
+  if (base === "color")
     return "sv-grid-cell-editor sv-grid-cell-editor-color";
   return "sv-grid-cell-editor";
 }