@svgrid/grid 1.2.21 → 1.2.23

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";
 }

package/src/SvGrid.svelte

@@ -24,6 +24,8 @@
   } from "./render-component";
   import { buildSparkline, toSparklineValues } from "./sparkline";
   import SvGridDropdown from "./SvGridDropdown.svelte";
+  import SvDateTimePicker from "./SvDateTimePicker.svelte";
+  import { timeStringToDate, dateToTimeString } from "./SvGrid.helpers";
   import type {
     Props,
     SelectionPoint,
@@ -246,6 +248,7 @@
   const computeRowClass = $derived(ctrl.computeRowClass);
   const computeCellClass = $derived(ctrl.computeCellClass);
   const computeCellTooltip = $derived(ctrl.computeCellTooltip);
+  const computeCellValidity = $derived(ctrl.computeCellValidity);
   const computeCellNote = $derived(ctrl.computeCellNote);
   const getCellDisplayValue = $derived(ctrl.getCellDisplayValue);
   const getColumnAlign = $derived(ctrl.getColumnAlign);
@@ -266,6 +269,7 @@
   const getCellRangeEdges = $derived(ctrl.getCellRangeEdges);
   const fillHandleCell = $derived(ctrl.fillHandleCell);
   const isInFillPreview = $derived(ctrl.isInFillPreview);
+  const fillMarqueeEdges = $derived(ctrl.fillMarqueeEdges);
   const startFillDrag = $derived(ctrl.startFillDrag);
   const onCellPointerDown = $derived(ctrl.onCellPointerDown);
   const onCellPointerEnter = $derived(ctrl.onCellPointerEnter);
@@ -306,7 +310,12 @@
   onpointermove={onWindowPointerMove}
 />
 
-{#if props.loading && !props.loadingOverlay}
+{#if props.loading && !props.loadingOverlay && !hasMeasured}
+  <!-- Full-screen loading state only on the *initial* load, before the grid
+       has ever rendered. Once measured, a `loading` flip (from a server-mode
+       sort / filter / page refetch) keeps the table mounted so header inputs
+       and focus survive - the empty-row message + optional `loadingOverlay`
+       cover the in-place refresh. -->
   <div class="sv-grid-state sv-grid-state-loading" role="status">
     Loading grid data...
   </div>
@@ -798,6 +807,49 @@
           </div>
         {/if}
       </div>
+    {:else if ctrl.editingCell?.editorType === "date"}
+      <!-- Rich date editor: SvCalendar popover over a formatted input. Opts
+           out to the native <input type="date"> via editorType 'date-native'. -->
+      <SvDateTimePicker
+        value={ctrl.editingCell?.value as string | number | Date | null}
+        formatString="yyyy-MM-dd"
+        dropDownDisplayMode="calendar"
+        autoOpen
+        onChange={(d) => updateEditingCellValue(d)}
+        onCommit={() => saveEditingCell()}
+        onCancel={() => {
+          ctrl.editingCell = null;
+          ctrl.gridRootEl?.focus({ preventScroll: true });
+        }}
+      />
+    {:else if ctrl.editingCell?.editorType === "datetime"}
+      <SvDateTimePicker
+        value={ctrl.editingCell?.value as string | number | Date | null}
+        formatString="yyyy-MM-dd HH:mm"
+        dropDownDisplayMode="both"
+        autoOpen
+        onChange={(d) => updateEditingCellValue(d)}
+        onCommit={() => saveEditingCell()}
+        onCancel={() => {
+          ctrl.editingCell = null;
+          ctrl.gridRootEl?.focus({ preventScroll: true });
+        }}
+      />
+    {:else if ctrl.editingCell?.editorType === "time"}
+      <!-- Rich time editor: SvTimePicker dial. Stores the 'HH:MM' string the
+           `time` parser expects; opts out via editorType 'time-native'. -->
+      <SvDateTimePicker
+        value={timeStringToDate(ctrl.editingCell?.value)}
+        formatString="HH:mm"
+        dropDownDisplayMode="time"
+        autoOpen
+        onChange={(d) => updateEditingCellValue(dateToTimeString(d))}
+        onCommit={() => saveEditingCell()}
+        onCancel={() => {
+          ctrl.editingCell = null;
+          ctrl.gridRootEl?.focus({ preventScroll: true });
+        }}
+      />
     {:else if ctrl.editingCell?.editorType === "color"}
       <!-- Native <input type="color"> opens its picker in a separate OS
            overlay; once the picker closes, focus stays on the input so
@@ -1179,6 +1231,10 @@
       </div>
     {/if}
 
+    {#if hasMeasured && (props.paginationPosition === "top" || props.paginationPosition === "both")}
+      <GridFooter {ctrl} showStatus={false} top pager pageSizeOptions={props.pageSizeOptions} />
+    {/if}
+
     <div
       class="sv-grid-shell"
       style={`height: ${
@@ -1197,6 +1253,7 @@
         <table
           bind:this={ctrl.gridRootEl}
           class="sv-grid-table"
+          class:sv-grid-no-row-hover={props.enableRowHover !== true}
           {...getGridRootA11yProps({
             activeDescendantId,
             rowCount: allRows.length,
@@ -1795,6 +1852,7 @@
                           rowIndex,
                           colIndex,
                         )}
+                        {@const fillEdges = fillMarqueeEdges(rowIndex, colIndex)}
                         {@const hasFillHandle =
                           fillHandleCell &&
                           fillHandleCell.rowIndex === rowIndex &&
@@ -1807,6 +1865,10 @@
                           row,
                           rendered.column,
                         )}
+                        {@const cellValidity = computeCellValidity(
+                          row,
+                          rendered.column,
+                        )}
                         {@const cellNote = computeCellNote(
                           row,
                           rendered.column,
@@ -1818,7 +1880,9 @@
                             rowIndex && activeCell.colIndex === colIndex}
                           class:sv-grid-cell-has-fill-handle={hasFillHandle}
                           class:sv-grid-cell-cf={hasConditionalFormats}
+                          class:sv-grid-cell-invalid={cellValidity.invalid}
                           class:sv-grid-cell-has-note={cellNote != null}
+                          title={cellValidity.message ?? undefined}
                           data-svgrid-row={rowIndex}
                           data-svgrid-col={colIndex}
                           data-col-id={rendered.column.id}
@@ -1839,6 +1903,10 @@
                           data-fill-preview={isInFillPreview(rowIndex, colIndex)
                             ? "true"
                             : undefined}
+                          data-fill-top={fillEdges?.top ? "true" : undefined}
+                          data-fill-bottom={fillEdges?.bottom ? "true" : undefined}
+                          data-fill-left={fillEdges?.left ? "true" : undefined}
+                          data-fill-right={fillEdges?.right ? "true" : undefined}
                           style={`width: ${rendered.item.size}px; min-width: ${rendered.item.size}px; max-width: ${rendered.item.size}px; ${cellPinStyle(rendered.column.id)}`}
                           onpointerdown={(event) =>
                             onCellPointerDown(rowIndex, colIndex, event)}
@@ -2040,6 +2108,10 @@
                         row,
                         rendered.column,
                       )}
+                      {@const cellValidity = computeCellValidity(
+                        row,
+                        rendered.column,
+                      )}
                       {@const cellNote = computeCellNote(row, rendered.column)}
                       <td
                         class={`sv-grid-cell ${userCellClass}`}
@@ -2047,6 +2119,7 @@
                         class:sv-grid-cell-active={activeCell.rowIndex ===
                           rowIndex && activeCell.colIndex === colIndex}
                         class:sv-grid-cell-cf={hasConditionalFormats}
+                        class:sv-grid-cell-invalid={cellValidity.invalid}
                         class:sv-grid-cell-has-note={cellNote != null}
                         data-svgrid-row={rowIndex}
                         data-svgrid-col={colIndex}
@@ -2070,11 +2143,17 @@
                           // Column tooltip fires on whole-cell hover.
                           // Per-cell notes are gated on the corner hot-
                           // zone below (Excel-style: hover the small
-                          // triangle to read the note).
-                          if (cellTooltip)
+                          // triangle to read the note). A validation
+                          // message (when the cell is invalid) wins over
+                          // the plain column tooltip.
+                          const tip =
+                            cellValidity.invalid && cellValidity.message
+                              ? cellValidity.message
+                              : cellTooltip;
+                          if (tip)
                             showTooltipFor(
                               event.currentTarget as HTMLElement,
-                              cellTooltip,
+                              tip,
                             );
                         }}
                         onpointerleave={hideTooltip}
@@ -2284,7 +2363,7 @@
       {/if}
     </div>
 
-    <GridFooter {ctrl} />
+    <GridFooter {ctrl} pager={(props.paginationPosition ?? "bottom") !== "top"} pageSizeOptions={props.pageSizeOptions} />
 
     {#if ctrl.findOpen}
       <!-- Find-in-grid overlay. Anchored to the TOP of the grid root so

package/src/SvGrid.types.ts

@@ -105,6 +105,32 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
   showPagination?: boolean;
   /** Initial page size when pagination is enabled. Defaults to 10. */
   pageSize?: number;
+  /** Page-size choices shown in the footer's selector. Defaults to `[10, 25, 50, 100]`. */
+  pageSizeOptions?: number[];
+  /**
+   * Where the pagination footer sits: `'bottom'` (default), `'top'`, or `'both'`.
+   * The status bar (when enabled) always stays at the bottom.
+   */
+  paginationPosition?: 'top' | 'bottom' | 'both';
+  /**
+   * Server-side pagination. When `true`, the grid renders its native
+   * pagination footer from the `rowCount` / `pageIndex` you provide (rather
+   * than counting the local rows), does NOT slice `data` (the rows you pass are
+   * treated as the current page), and emits `onPaginationChange` when the user
+   * pages or changes page size. Pair with `externalSort` / `externalFilter`
+   * and a server data source. Requires `showPagination` / `pageable` to show
+   * the footer. Controlled: you own `pageIndex` + `pageSize` + `rowCount`.
+   */
+  externalPagination?: boolean;
+  /** Total rows on the server, for the footer's range + page count. Used with `externalPagination`. */
+  rowCount?: number;
+  /** Current 0-based page index. Used with `externalPagination` (controlled). */
+  pageIndex?: number;
+  /**
+   * Fires when the user changes page or page size while `externalPagination`
+   * is on. Fetch that page and update `data` / `rowCount` / `pageIndex`.
+   */
+  onPaginationChange?: (pagination: { pageIndex: number; pageSize: number }) => void;
   virtualization?: boolean;
   /** Row height in pixels. Pass a function `(rowIndex) => px` for
    *  per-row variable heights (e.g. an interactive row-resize feature).
@@ -150,6 +176,13 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
   showFilterMenu?: boolean;
   showFilterRow?: boolean;
   enableCellSelection?: boolean;
+  /**
+   * Highlight the row under the pointer. Default **false** - the hover tint can
+   * compete with the cell selection / fill marquee. Set `true` to opt in; when
+   * on, the hover no longer paints over selected cells so the selection stays
+   * visible.
+   */
+  enableRowHover?: boolean;
   /**
    * Prepend a header row (the column labels) to copied cell ranges, so pasting
    * into Excel / Sheets includes the headers. Applies per copied range.

package/src/SvGridDropdown.svelte

@@ -19,6 +19,7 @@
    *   Tab                - commit and let focus escape.
    */
   import type { CellEditorOption } from './editors/cell-editors'
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
 
   type Props = {
     options: ReadonlyArray<CellEditorOption>
@@ -30,6 +31,10 @@
     /** Add a typeahead input at the top of the popover that filters the
      *  option list as the user types. Used by the rich-select editor. */
     searchable?: boolean
+    /** Focus the trigger and open the panel on mount. True for in-cell editing
+     *  (you clicked into the cell to edit); set false for form fields, which
+     *  should stay closed and unfocused until the user acts. Default true. */
+    autoOpen?: boolean
     /** Called with the new full value (scalar for single, array for multi). */
     onChange?: (next: unknown) => void
     /** Called when the user finalizes the selection (single pick, Enter, blur with selection). */
@@ -45,6 +50,7 @@
     placeholder = 'Select…',
     renderChipsInTrigger = false,
     searchable = false,
+    autoOpen = true,
     onChange,
     onCommit,
     onCancel,
@@ -69,7 +75,7 @@
   /** Viewport-anchored panel position. We `position: fixed` the panel so it
    *  escapes the grid's overflow:hidden scroll container - otherwise the
    *  bottom of the list gets clipped by the pager or the grid's footer. */
-  let panelRect = $state<{ top: number; left: number; width: number; openUpward: boolean }>({
+  let panelRect = $state<AnchoredRect>({
     top: 0,
     left: 0,
     width: 0,
@@ -134,20 +140,15 @@
    *  flips upward when there isn't enough room below the trigger. */
   function updatePanelPosition() {
     if (!triggerEl) return
-    const r = triggerEl.getBoundingClientRect()
     // Use the smaller of (option count, 10) for the upward-flip math so
     // a 3-option list doesn't think it needs 320px of headroom.
     const visibleCount = Math.min(options.length, 10)
     const estimatedHeight = visibleCount * 32 + (multiple ? 40 : 0) + 8
-    const spaceBelow = window.innerHeight - r.bottom
-    const spaceAbove = r.top
-    const openUpward = spaceBelow < estimatedHeight && spaceAbove > spaceBelow
-    panelRect = {
-      top: openUpward ? r.top - estimatedHeight - 2 : r.bottom + 2,
-      left: r.left,
-      width: r.width,
-      openUpward,
-    }
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), {
+      estimatedHeight,
+      // Preserve the original behavior: anchor to the trigger, no clamping.
+      clampHorizontal: false,
+    })
   }
 
   // Keep the panel anchored as the page scrolls or resizes - without this,
@@ -249,28 +250,13 @@
   }
 
   function focusTrigger(node: HTMLButtonElement) {
+    // Form fields (autoOpen=false) stay closed + unfocused until the user acts;
+    // in-cell editing auto-focuses + opens to match clicking into a cell.
+    if (!autoOpen) return
     node.focus()
-    // Auto-open so the user can immediately pick - matches the
-    // expectation set by clicking into an editing cell.
     openPanel()
   }
 
-  /** Svelte action: detach the element on mount and append it to
-   *  document.body, then put it back / remove on destroy. This is how
-   *  we "portal" the panel out of the grid's overflow:hidden scroll
-   *  container so it can never be clipped, no matter how deeply nested
-   *  the editing cell is. */
-  function portalToBody(node: HTMLElement) {
-    document.body.appendChild(node)
-    return {
-      destroy() {
-        if (node.parentNode === document.body) {
-          document.body.removeChild(node)
-        }
-      },
-    }
-  }
-
   /** Close the panel when the user clicks outside both trigger AND
    *  panel - `onfocusout` on the dropdown root no longer catches this
    *  because the portal'd panel is a sibling of body, not a descendant
@@ -388,7 +374,7 @@
       style:left={`${panelRect.left}px`}
       style:width={`${panelRect.width}px`}
       style:max-height={panelMax !== null ? `${panelMax}px` : null}
-      style:z-index="9999"
+      style:z-index="2147483647"
       onpointerdown={(event) => event.stopPropagation()}
       onmousedown={(event) => event.stopPropagation()}
       onclick={(event) => event.stopPropagation()}