@marktiderman/genesis-ui 2.5.0 → 2.7.0

package/dist/components/layout/index.js

@@ -1,14 +1,14 @@
-export { AppShell, PageHeader } from '../../chunk-DWM7ELFI.js';
+export { AppShell, PageHeader } from '../../chunk-ZPPLUGLA.js';
 import '../../chunk-46TZGMFW.js';
 export { Container, Stack, containerVariants, stackVariants } from '../../chunk-4CQHPWJD.js';
 export { FormPage } from '../../chunk-PLIYF6KI.js';
 import '../../chunk-OZZTPE7F.js';
 export { Section, SettingsPage, sectionHeadingVariants } from '../../chunk-P64MFQXZ.js';
-import '../../chunk-QJ6P2DW6.js';
 import '../../chunk-B2GIBUQD.js';
 import '../../chunk-NPNADZHM.js';
 import '../../chunk-FK42ZGGV.js';
 import '../../chunk-22XB3Q6H.js';
+import '../../chunk-QJ6P2DW6.js';
 import '../../chunk-27ELYTGE.js';
 import '../../chunk-NWSCYLPT.js';
 import '../../chunk-F47U5KNW.js';

package/dist/components/patterns/index.d.ts

@@ -2,6 +2,7 @@ export { EmptyState, EmptyStateProps, NoFeaturesFound, NoFeedbackFound, NoSearch
 export { FormDescription, FormError, FormField, FormLabel } from './form-field.js';
 export { PageLoading, PageLoadingProps, pageLoadingVariants } from './page-loading.js';
 export { SettingsRow, SettingsRowProps } from './settings-row.js';
+export { SortableList, SortableListItemContext, SortableListProps } from './sortable-list.js';
 export { StatusBadge, StatusBadgeProps, StatusBadgeStatus, statusBadgeVariants } from './status-badge.js';
 export { ToggleRow, ToggleRowProps } from './toggle-row.js';
 export { UserAvatar, UserAvatarProps, userAvatarVariants } from './user-avatar.js';

package/dist/components/patterns/index.js

@@ -1,4 +1,5 @@
 export { ViewSettings, ViewToggle } from '../../chunk-46TZGMFW.js';
+export { SortableList } from '../../chunk-TXOZMKNW.js';
 export { StatusBadge, statusBadgeVariants } from '../../chunk-XMK3T4TA.js';
 export { ToggleRow } from '../../chunk-6M4NHHKG.js';
 export { UserAvatar, userAvatarVariants } from '../../chunk-XBX6QMR5.js';
@@ -6,6 +7,7 @@ import '../../chunk-LNFF2RBD.js';
 export { SettingsRow } from '../../chunk-A7AHVDG7.js';
 import '../../chunk-FK42ZGGV.js';
 import '../../chunk-22XB3Q6H.js';
+import '../../chunk-QJ6P2DW6.js';
 import '../../chunk-27ELYTGE.js';
 export { EmptyState, NoFeaturesFound, NoFeedbackFound, NoSearchResults } from '../../chunk-65SPT7EA.js';
 import '../../chunk-NWSCYLPT.js';

package/dist/components/patterns/sortable-list.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+interface SortableListItemContext {
+    /** The item's position as shown, from 0. */
+    index: number;
+    /**
+     * The drag handle: drag it with a pointer, or focus it and press Space or
+     * Enter to pick the item up, the arrow keys to move it and Space or Enter
+     * again to drop it. Render it somewhere in the row.
+     */
+    handle: React.ReactNode;
+    /** True while this item is being dragged with a pointer. */
+    isDragging: boolean;
+    /** True while this item is picked up from the keyboard. */
+    isGrabbed: boolean;
+    /** Move this item without dragging, for a row menu of your own. */
+    moveUp: () => void;
+    moveDown: () => void;
+    moveTo: (index: number) => void;
+}
+interface SortableListReorder {
+    /** Key of the item that moved. */
+    key: string;
+}
+interface SortableListProps<T> {
+    items: readonly T[];
+    /** A stable key per item. Required: dragging finds the item again by key. */
+    getKey: (item: T) => string;
+    /** A name for an item, for the handle's label and announcements ("Week 1"). */
+    getItemLabel: (item: T) => string;
+    renderItem: (item: T, context: SortableListItemContext) => React.ReactNode;
+    /**
+     * Move the item at `from` to `to` (both from 0, `to` counted after the item
+     * is taken out). Each finished move calls this once: a keyboard pick-up
+     * that wanders and comes back calls nothing.
+     *
+     * The list shows the new order straight away and keeps showing it until the
+     * returned promise settles; by then `items` must be in the new order. A
+     * synchronous handler must update `items` in the same tick. A rejected
+     * promise puts the old order back and announces that the move failed. Other
+     * moves wait until this one settles.
+     */
+    onReorder: (from: number, to: number, move: SortableListReorder) => void | Promise<void>;
+    /** Accessible name of the list ("Course steps"). */
+    label: string;
+    /** Turns off dragging and every kind of move. */
+    disabled?: boolean | undefined;
+    /**
+     * A "Move" menu on each row (up, down, to top, to bottom), on by default so
+     * touch and screen-reader users always have a way to move an item. Turn it
+     * off only when the row offers `moveUp` / `moveDown` / `moveTo` itself.
+     */
+    moveMenu?: boolean | undefined;
+    className?: string | undefined;
+    itemClassName?: string | undefined;
+}
+/**
+ * A vertical list the user can rearrange: course steps, lesson blocks, form
+ * fields.
+ *
+ * Every way to move an item is equivalent, so dragging is never the only one
+ * (the same stance as KanbanBoard's "Move to…" menu):
+ * - drag the handle with a pointer;
+ * - focus the handle, Space or Enter to pick up, ↑/↓ and Home/End to move,
+ *   Space or Enter to drop, Escape to put it back (tabbing away also puts it
+ *   back); Alt+↑/↓ moves one step without picking up;
+ * - the row's "Move" menu, or `moveUp` / `moveDown` / `moveTo` from the render
+ *   context.
+ *
+ * Moves are announced in a polite live region once they succeed. Native drag
+ * and drop needs no dependency and Radix has none to offer (docs/FRAMEWORK.md
+ * rule 3).
+ *
+ * @stability Beta
+ */
+declare function SortableList<T>({ items, getKey, getItemLabel, renderItem, onReorder, label, disabled, moveMenu, className, itemClassName, }: SortableListProps<T>): React.JSX.Element;
+
+export { SortableList, type SortableListItemContext, type SortableListProps, type SortableListReorder };

package/dist/components/patterns/sortable-list.js

@@ -0,0 +1,5 @@
+export { SortableList } from '../../chunk-TXOZMKNW.js';
+import '../../chunk-QJ6P2DW6.js';
+import '../../chunk-NZ5WBA4R.js';
+//# sourceMappingURL=sortable-list.js.map
+//# sourceMappingURL=sortable-list.js.map

package/dist/components/patterns/sortable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"sortable-list.js"}

package/dist/components/sheet-grid/sheet-grid.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface SheetGridColumn<T> {
+    key: string;
+    header: string;
+    /** Width in px. Default 160. */
+    width?: number;
+    /** The cell's text: what is shown when no `render` is given, edited, and copied. Default `String(row[key])`. */
+    getText?: (row: T) => string;
+    /** Custom display. Editing and copying still use `getText`. */
+    render?: (row: T) => ReactNode;
+    /** Whether this column's cells can be edited. */
+    editable?: boolean;
+    /** Why the cells can't be edited, shown on hover. */
+    readOnlyReason?: string;
+    /** Fixed choices: the editor becomes a select. */
+    options?: string[];
+    /** Shown before the header text, e.g. an icon for the field's type. */
+    icon?: ReactNode;
+    /** `end` right-aligns the cells, as for numbers. */
+    align?: "start" | "end";
+}
+/** A column pinned to the left of every row, outside the cell grid (row numbers, a checkbox, an open button). */
+interface SheetGridRowHeader<T> {
+    width: number;
+    render: (row: T, index: number) => ReactNode;
+    /** The header cell above it. */
+    header?: ReactNode;
+}
+/** One cell's new text. A paste or a clear produces several at once. */
+interface SheetCellChange<T> {
+    row: T;
+    rowKey: string;
+    column: string;
+    value: string;
+}
+/**
+ * Reject `onCommit` with this to mark specific cells, rather than every cell
+ * in the commit, as failed.
+ */
+declare class SheetCommitError extends Error {
+    readonly cells: {
+        rowKey: string;
+        column: string;
+        message: string;
+    }[];
+    constructor(message: string, cells: {
+        rowKey: string;
+        column: string;
+        message: string;
+    }[]);
+}
+interface SheetGridProps<T> {
+    rows: T[];
+    columns: SheetGridColumn<T>[];
+    getKey: (row: T) => string;
+    /**
+     * Save one or more cells. Return a promise to show them as saving until it
+     * settles; a rejection marks them failed with the error's message (or the
+     * cells a `SheetCommitError` names) and keeps their old values.
+     */
+    onCommit: (changes: SheetCellChange<T>[]) => void | Promise<void>;
+    /** Cmd/Ctrl+Z inside the grid. */
+    onUndo?: () => void;
+    /** Called when a paste or clear touched cells that can't be edited. */
+    onSkipped?: (count: number) => void;
+    /** Viewport height in px. Default 480. */
+    height?: number;
+    /** Row height in px. Default 32. */
+    rowHeight?: number;
+    /** Accessible name for the grid. */
+    label: string;
+    className?: string;
+    /** A pinned column at the left of every row. */
+    rowHeader?: SheetGridRowHeader<T>;
+    /** Rendered after the last row, inside the scroll area (e.g. "Add a record"). */
+    footer?: ReactNode;
+    /** Shown when there are no rows. */
+    empty?: ReactNode;
+}
+/**
+ * A spreadsheet grid: virtualized rows, a keyboard-driven active cell and
+ * range, in-place editing, and copy and paste through the system clipboard
+ * as tab-separated text, so it round-trips with Sheets and Excel.
+ *
+ * Keys: arrows, Tab and Shift+Tab move; Shift+arrows extend the range;
+ * Enter or F2 edits (Enter again saves and moves down); typing starts an
+ * edit; Escape cancels; Delete clears; Home/End and Ctrl+Home/End jump;
+ * PageUp/PageDown move a screen; Ctrl/Cmd+Z undoes.
+ *
+ * Why it isn't Radix (docs/FRAMEWORK.md rule 3): Radix has no data grid.
+ * The focus model follows the WAI-ARIA grid pattern instead: one tab stop
+ * (the grid), the active cell exposed through aria-activedescendant, and
+ * aria-selected for the range, so a screen reader announces each move.
+ * Virtualization comes from TanStack Virtual (decision 20's spike: stable,
+ * headless, actively released; react-data-grid's latest has been a beta for
+ * years and brings its own CSS).
+ *
+ * @stability Experimental
+ */
+declare function SheetGrid<T>({ rows, columns, getKey, onCommit, onUndo, onSkipped, height, rowHeight, label, className, rowHeader, footer, empty, }: SheetGridProps<T>): React.JSX.Element;
+/** Parse spreadsheet clipboard text (tab-separated, quoted when needed). */
+declare function parseTsv(text: string): string[][];
+/** Write a block of cells as spreadsheet clipboard text (the inverse of `parseTsv`). */
+declare function toTsv(grid: string[][]): string;
+
+export { type SheetCellChange, SheetCommitError, SheetGrid, type SheetGridColumn, type SheetGridProps, type SheetGridRowHeader, parseTsv, toTsv };

package/dist/components/sheet-grid/sheet-grid.js

@@ -0,0 +1,434 @@
+"use client";
+import { Spinner } from '../../chunk-OVU3Z2MT.js';
+import { cn } from '../../chunk-NZ5WBA4R.js';
+import * as React from 'react';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SheetCommitError = class extends Error {
+  constructor(message, cells) {
+    super(message);
+    this.cells = cells;
+    this.name = "SheetCommitError";
+  }
+  cells;
+};
+function SheetGrid({
+  rows,
+  columns,
+  getKey,
+  onCommit,
+  onUndo,
+  onSkipped,
+  height = 480,
+  rowHeight = 32,
+  label,
+  className,
+  rowHeader,
+  footer,
+  empty
+}) {
+  const scroller = useRef(null);
+  const [active, setActive] = useState({ r: 0, c: 0 });
+  const [anchor, setAnchor] = useState(null);
+  const [editing, setEditingState] = useState(null);
+  const editingRef = useRef(null);
+  const setEditing = (next) => {
+    editingRef.current = next;
+    setEditingState(next);
+  };
+  const [status, setStatus] = useState({});
+  const id = React.useId();
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scroller.current,
+    estimateSize: () => rowHeight,
+    overscan: 10,
+    // Render the first screen before layout is measured (server render, tests).
+    initialRect: { width: 1024, height }
+  });
+  const textOf = useCallback(
+    (row, column) => column.getText ? column.getText(row) : String(row[column.key] ?? ""),
+    []
+  );
+  const cellKey = (rowKey, column) => `${rowKey}\0${column}`;
+  const lead = rowHeader?.width ?? 0;
+  const width = useMemo(() => lead + columns.reduce((sum, c) => sum + (c.width ?? 160), 0), [columns, lead]);
+  useEffect(() => {
+    setActive((a) => ({ r: Math.min(a.r, Math.max(0, rows.length - 1)), c: Math.min(a.c, Math.max(0, columns.length - 1)) }));
+  }, [rows.length, columns.length]);
+  const range = useMemo(() => {
+    const from = anchor ?? active;
+    return {
+      r0: Math.min(from.r, active.r),
+      r1: Math.max(from.r, active.r),
+      c0: Math.min(from.c, active.c),
+      c1: Math.max(from.c, active.c)
+    };
+  }, [anchor, active]);
+  const inRange = (r, c) => r >= range.r0 && r <= range.r1 && c >= range.c0 && c <= range.c1;
+  const moveTo = useCallback(
+    (cell, extend = false) => {
+      const next = { r: Math.max(0, Math.min(rows.length - 1, cell.r)), c: Math.max(0, Math.min(columns.length - 1, cell.c)) };
+      if (extend) setAnchor((a) => a ?? active);
+      else setAnchor(null);
+      setActive(next);
+      virtualizer.scrollToIndex(next.r, { align: "auto" });
+    },
+    [rows.length, columns.length, active, virtualizer]
+  );
+  const commit = useCallback(
+    async (changes) => {
+      if (!changes.length) return;
+      const keys = changes.map((ch) => cellKey(ch.rowKey, ch.column));
+      setStatus((s) => ({ ...s, ...Object.fromEntries(keys.map((k) => [k, { saving: true }])) }));
+      try {
+        await onCommit(changes);
+        setStatus((s) => {
+          const next = { ...s };
+          for (const k of keys) delete next[k];
+          return next;
+        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        setStatus((s) => {
+          const next = { ...s };
+          for (const k of keys) delete next[k];
+          if (error instanceof SheetCommitError && error.cells.length) {
+            for (const cell of error.cells) next[cellKey(cell.rowKey, cell.column)] = { error: cell.message };
+          } else {
+            for (const k of keys) next[k] = { error: message };
+          }
+          return next;
+        });
+      }
+    },
+    [onCommit]
+  );
+  const startEdit = (cell, draft) => {
+    const column = columns[cell.c];
+    const row = rows[cell.r];
+    if (!column?.editable || !row) return;
+    setEditing({ cell, rowKey: getKey(row), draft: draft ?? textOf(row, column) });
+  };
+  const finishEdit = async (move) => {
+    const current = editingRef.current;
+    if (!current) return;
+    const { cell, rowKey, draft } = current;
+    const row = rows.find((r) => getKey(r) === rowKey);
+    const column = columns[cell.c];
+    setEditing(null);
+    scroller.current?.focus();
+    if (move) moveTo(move);
+    if (!row) return;
+    if (draft !== textOf(row, column)) {
+      await commit([{ row, rowKey, column: column.key, value: draft }]);
+    }
+  };
+  const blockChanges = (values, origin) => {
+    const changes = [];
+    let skipped = 0;
+    values.forEach((line, dr) => {
+      line.forEach((value, dc) => {
+        const row = rows[origin.r + dr];
+        const column = columns[origin.c + dc];
+        if (!row || !column) return;
+        if (!column.editable) {
+          skipped++;
+          return;
+        }
+        if (value !== textOf(row, column)) changes.push({ row, rowKey: getKey(row), column: column.key, value });
+      });
+    });
+    if (skipped) onSkipped?.(skipped);
+    return changes;
+  };
+  const onKeyDown = (e) => {
+    if (editing) return;
+    if (e.target !== e.currentTarget) return;
+    const mod = e.metaKey || e.ctrlKey;
+    const page = Math.max(1, Math.floor(height / rowHeight) - 1);
+    const { r, c } = active;
+    const go = (cell) => {
+      e.preventDefault();
+      moveTo(cell, e.shiftKey && e.key !== "Tab");
+    };
+    switch (e.key) {
+      case "ArrowUp":
+        return go({ r: mod ? 0 : r - 1, c });
+      case "ArrowDown":
+        return go({ r: mod ? rows.length - 1 : r + 1, c });
+      case "ArrowLeft":
+        return go({ r, c: mod ? 0 : c - 1 });
+      case "ArrowRight":
+        return go({ r, c: mod ? columns.length - 1 : c + 1 });
+      case "Tab":
+        return go({ r, c: e.shiftKey ? c - 1 : c + 1 });
+      case "Home":
+        return go({ r: mod ? 0 : r, c: 0 });
+      case "End":
+        return go({ r: mod ? rows.length - 1 : r, c: columns.length - 1 });
+      case "PageUp":
+        return go({ r: r - page, c });
+      case "PageDown":
+        return go({ r: r + page, c });
+      case "Enter":
+      case "F2":
+        e.preventDefault();
+        return startEdit(active);
+      case "Escape":
+        setAnchor(null);
+        return;
+      case "Delete":
+      case "Backspace": {
+        e.preventDefault();
+        const blank = Array.from({ length: range.r1 - range.r0 + 1 }, () => Array.from({ length: range.c1 - range.c0 + 1 }, () => ""));
+        void commit(blockChanges(blank, { r: range.r0, c: range.c0 }));
+        return;
+      }
+      default:
+        if (mod && (e.key === "z" || e.key === "Z") && !e.shiftKey) {
+          e.preventDefault();
+          onUndo?.();
+          return;
+        }
+        if (!mod && !e.altKey && e.key.length === 1) {
+          e.preventDefault();
+          startEdit(active, e.key);
+        }
+    }
+  };
+  const onCopy = (e) => {
+    if (editing || e.target !== e.currentTarget || rows.length === 0 || columns.length === 0) return;
+    const block = [];
+    for (let r = range.r0; r <= range.r1; r++) {
+      const line = [];
+      for (let c = range.c0; c <= range.c1; c++) line.push(textOf(rows[r], columns[c]));
+      block.push(line);
+    }
+    e.clipboardData.setData("text/plain", toTsv(block));
+    e.preventDefault();
+  };
+  const onPaste = (e) => {
+    if (editing || e.target !== e.currentTarget) return;
+    const text = e.clipboardData.getData("text/plain");
+    if (!text) return;
+    e.preventDefault();
+    let block = parseTsv(text.replace(/\r?\n$/, ""));
+    if (block.length === 1 && block[0].length === 1 && (range.r1 > range.r0 || range.c1 > range.c0)) {
+      block = Array.from({ length: range.r1 - range.r0 + 1 }, () => Array.from({ length: range.c1 - range.c0 + 1 }, () => block[0][0]));
+    }
+    void commit(blockChanges(block, { r: range.r0, c: range.c0 }));
+  };
+  const items = virtualizer.getVirtualItems();
+  const activeCellId = `${id}-cell-${active.r}-${active.c}`;
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-lg border bg-background", className), "data-testid": "sheet-grid", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scroller,
+      role: "grid",
+      "aria-label": label,
+      "aria-rowcount": rows.length + 1,
+      "aria-colcount": columns.length,
+      "aria-multiselectable": "true",
+      "aria-activedescendant": rows.length ? activeCellId : void 0,
+      tabIndex: 0,
+      className: "group/grid relative overflow-auto text-sm outline-none",
+      style: { height },
+      onKeyDown,
+      onCopy,
+      onPaste,
+      children: [
+        /* @__PURE__ */ jsxs("div", { role: "row", "aria-rowindex": 1, className: "sticky top-0 z-20 flex border-b bg-muted", style: { width }, children: [
+          rowHeader && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "presentation",
+              className: "sticky left-0 z-10 flex shrink-0 items-center border-r bg-muted px-2 text-xs text-muted-foreground",
+              style: { width: rowHeader.width, height: rowHeight },
+              children: rowHeader.header
+            }
+          ),
+          columns.map((column, c) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "columnheader",
+              "aria-colindex": c + 1,
+              className: "flex shrink-0 items-center gap-1.5 border-r px-2 py-1.5 text-xs font-medium text-muted-foreground",
+              style: { width: column.width ?? 160, height: rowHeight },
+              title: column.readOnlyReason,
+              children: [
+                column.icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": true, children: column.icon }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: column.header })
+              ]
+            },
+            column.key
+          ))
+        ] }),
+        rows.length === 0 && empty && /* @__PURE__ */ jsx("div", { className: "sticky left-0 px-3 py-6 text-sm text-muted-foreground", style: { width: "100%" }, children: empty }),
+        /* @__PURE__ */ jsx("div", { style: { height: virtualizer.getTotalSize(), width, position: "relative" }, children: items.map((item) => {
+          const row = rows[item.index];
+          const rowKey = getKey(row);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "row",
+              "aria-rowindex": item.index + 2,
+              className: "group/row absolute left-0 flex border-b hover:bg-muted/40",
+              style: { top: item.start, height: rowHeight, width },
+              children: [
+                rowHeader && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "presentation",
+                    className: "sticky left-0 z-10 flex shrink-0 items-center border-r bg-background px-2 text-xs text-muted-foreground group-hover/row:bg-muted",
+                    style: { width: rowHeader.width },
+                    onMouseDown: (e) => e.stopPropagation(),
+                    children: rowHeader.render(row, item.index)
+                  }
+                ),
+                columns.map((column, c) => {
+                  const isActive = active.r === item.index && active.c === c;
+                  const selected = inRange(item.index, c);
+                  const state = status[cellKey(rowKey, column.key)];
+                  const isEditing = editing && editing.rowKey === rowKey && editing.cell.c === c;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      id: `${id}-cell-${item.index}-${c}`,
+                      role: "gridcell",
+                      "aria-colindex": c + 1,
+                      "aria-selected": selected,
+                      "aria-readonly": !column.editable || void 0,
+                      "aria-invalid": state?.error ? true : void 0,
+                      "aria-busy": state?.saving || void 0,
+                      title: state?.error ?? (!column.editable ? column.readOnlyReason : void 0),
+                      className: cn(
+                        "relative flex shrink-0 items-center border-r px-2",
+                        selected && (range.r1 > range.r0 || range.c1 > range.c0) && "bg-primary/5",
+                        // The active cell shows while the grid has focus, as in a spreadsheet.
+                        isActive && "group-focus-within/grid:outline group-focus-within/grid:outline-2 group-focus-within/grid:-outline-offset-2 group-focus-within/grid:outline-primary",
+                        state?.error && "bg-destructive/10",
+                        column.align === "end" && "justify-end tabular-nums"
+                      ),
+                      style: { width: column.width ?? 160 },
+                      onMouseDown: (e) => {
+                        if (isEditing) return;
+                        e.preventDefault();
+                        scroller.current?.focus();
+                        moveTo({ r: item.index, c }, e.shiftKey);
+                      },
+                      onDoubleClick: () => startEdit({ r: item.index, c }),
+                      children: [
+                        isEditing ? column.options ? /* @__PURE__ */ jsxs(
+                          "select",
+                          {
+                            autoFocus: true,
+                            "aria-label": `${column.header}, row ${item.index + 1}`,
+                            className: "h-full w-full bg-background text-sm outline-none",
+                            value: editing.draft,
+                            onChange: (e) => setEditing({ ...editing, draft: e.target.value }),
+                            onBlur: () => void finishEdit(),
+                            onKeyDown: (e) => {
+                              if (e.key === "Enter") void finishEdit({ r: item.index + 1, c });
+                              if (e.key === "Escape") {
+                                setEditing(null);
+                                scroller.current?.focus();
+                              }
+                            },
+                            children: [
+                              !column.options.includes(editing.draft) && /* @__PURE__ */ jsx("option", { value: editing.draft, children: editing.draft || "\u2014" }),
+                              column.options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            autoFocus: true,
+                            "aria-label": `${column.header}, row ${item.index + 1}`,
+                            className: "h-full w-full bg-background text-sm outline-none",
+                            value: editing.draft,
+                            onChange: (e) => setEditing({ ...editing, draft: e.target.value }),
+                            onBlur: () => void finishEdit(),
+                            onKeyDown: (e) => {
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                void finishEdit({ r: item.index + 1, c });
+                              } else if (e.key === "Tab") {
+                                e.preventDefault();
+                                void finishEdit({ r: item.index, c: c + (e.shiftKey ? -1 : 1) });
+                              } else if (e.key === "Escape") {
+                                setEditing(null);
+                                scroller.current?.focus();
+                              }
+                            }
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: column.render ? column.render(row) : textOf(row, column) || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }),
+                        state?.saving && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "absolute right-1 h-3 w-3", "aria-label": "Saving" })
+                      ]
+                    },
+                    column.key
+                  );
+                })
+              ]
+            },
+            rowKey
+          );
+        }) }),
+        footer && /* @__PURE__ */ jsx("div", { className: "sticky left-0 border-b", style: { width: Math.max(width, 0) }, children: footer })
+      ]
+    }
+  ) });
+}
+function parseTsv(text) {
+  const rows = [];
+  let row = [];
+  let field = "";
+  let quoted = false;
+  let wasQuoted = false;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (quoted) {
+      if (ch === '"' && text[i + 1] === '"') {
+        field += '"';
+        i++;
+      } else if (ch === '"') {
+        quoted = false;
+      } else {
+        field += ch;
+      }
+      continue;
+    }
+    if (ch === '"' && field === "") {
+      quoted = true;
+      wasQuoted = true;
+    } else if (ch === "	") {
+      row.push(field);
+      field = "";
+      wasQuoted = false;
+    } else if (ch === "\n" || ch === "\r") {
+      if (ch === "\r" && text[i + 1] === "\n") i++;
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+      wasQuoted = false;
+    } else field += ch;
+  }
+  if (field !== "" || wasQuoted || row.length) {
+    row.push(field);
+    rows.push(row);
+  }
+  return rows;
+}
+function tsvField(text) {
+  return /[\t\n\r"]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+function toTsv(grid) {
+  return grid.map((row) => row.length === 1 && row[0] === "" ? '""' : row.map(tsvField).join("	")).join("\n");
+}
+
+export { SheetCommitError, SheetGrid, parseTsv, toTsv };
+//# sourceMappingURL=sheet-grid.js.map
+//# sourceMappingURL=sheet-grid.js.map