@crisp-ui-kit/crisp 0.34.0 → 0.36.0

package/dist/esm/components/fillsheet/fillsheet.js

@@ -0,0 +1,683 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cx, isRtlElement } from "../../core/index.js";
+import { Select } from "../select/index.js";
+import { fillsheetRecipe } from "./fillsheet.recipe.js";
+import { toHTML, toTSV } from "./serialize.js";
+const DEFAULT_W = 128;
+// The fms iOS detail row is 45pt tall, and this is the same row: 12px of
+// padding, a 20px line, 12px of padding, rounded up to its 45.
+const DEFAULT_H = 45;
+const MIN_W = 48;
+// The same 45. A row cannot be dragged shorter than one properly-inset line;
+// below that it only clips its own text, which is not a smaller row, it is a
+// broken one.
+const MIN_H = 45;
+/**
+ * A select inside a cell.
+ *
+ * `Select` owns its own open state and has no `open` prop, so a cell that
+ * merely rendered one would leave you looking at a closed trigger — the
+ * select-then-click-again this component spent a long time getting rid of.
+ * The trigger is clicked once on mount so the list is already down by the time
+ * the cell opens.
+ */
+function SelectCell({ options, value, onCommit, onCancel, }) {
+    const ref = React.useRef(null);
+    const opened = React.useRef(false);
+    React.useEffect(() => {
+        if (opened.current)
+            return;
+        opened.current = true;
+        ref.current?.querySelector('[role="combobox"]')?.click();
+    }, []);
+    return (_jsx("div", { ref: ref, className: "crisp-fillsheet-editor crisp-fillsheet-select", onKeyDown: (e) => {
+            e.stopPropagation();
+            if (e.key === "Escape")
+                onCancel();
+        }, children: _jsx(Select, { options: options, value: value, onValueChange: onCommit }) }));
+}
+/**
+ * Size a textarea to its own content.
+ *
+ * `height: auto` first so the box can SHRINK: `scrollHeight` never reports
+ * less than the element's current height, so measuring without resetting
+ * makes a cell that grows but never comes back when you delete a line.
+ */
+function autoGrow(el) {
+    if (!el)
+        return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+}
+/** Grow (or trim) a grid to exactly rows x cols, keeping what is already there. */
+function shape(grid, rows, cols) {
+    const out = [];
+    for (let r = 0; r < rows; r++) {
+        const row = grid[r] ?? [];
+        const next = [];
+        for (let c = 0; c < cols; c++)
+            next.push(row[c] ?? "");
+        out.push(next);
+    }
+    return out;
+}
+const rect = (a, b) => ({
+    r0: Math.min(a.r, b.r),
+    r1: Math.max(a.r, b.r),
+    c0: Math.min(a.c, b.c),
+    c1: Math.max(a.c, b.c),
+});
+/**
+ * A sheet of cells you can select, type into, resize and drag-fill.
+ *
+ * It comes in two modes, because two different people hold a form: in `edit`
+ * you build it, dragging columns and rows to size; in `fill` you only fill it
+ * in, and the structure is locked. Typing and drag-filling work in both --
+ * what `fill` withholds is the shape, not the content.
+ *
+ * Tab off the last cell appends a row, which is the gesture a word processor
+ * uses and the reason its tables are quick to fill: your hands are already on
+ * the keyboard, and the row you want is the one after the one you just
+ * finished. It grows in both modes -- a row is content, not structure.
+ *
+ * One click puts you in a cell, in both modes. A word processor places the
+ * caret where you clicked; there is no select-then-click-again step.
+ *
+ * Deliberately NOT built on Table or DataTable. Those take rows of records and
+ * own the layout; this owns neither. A cell here is addressed by (row, column)
+ * and carries text, its column can be any width and its row any height, and
+ * the grid is CSS `grid` rather than `<table>` precisely so those two axes are
+ * independent.
+ *
+ * It is also deliberately bare: cells and hairlines, nothing else. No A/B/C
+ * lettering, no numbered row gutter, no header row, and no prop that turns
+ * any of them on. Those are what make a grid read as spreadsheet SOFTWARE,
+ * and a boxed-in cell is the loudest of them -- so a cell carries one rule
+ * underneath and nothing else. A consumer that wants headings puts them
+ * above the sheet, where they are content rather than chrome.
+ */
+export const FillSheet = React.forwardRef(function FillSheet({ columns, rows, value, defaultValue, onValueChange, readOnly = false, columnWidth = DEFAULT_W, rowHeight = DEFAULT_H, mode = "edit", label, surface = "panel", className, style, ...rest }, forwardedRef) {
+    const cols = React.useMemo(() => typeof columns === "number"
+        ? Array.from({ length: columns }, () => ({}))
+        : columns, [columns]);
+    const colCount = cols.length;
+    // Seeded from `defaultValue` directly, NOT reshaped to a row count
+    // computed ahead of it. The row count has to be derived FROM whichever
+    // grid is live, because an uncontrolled sheet grows by appending to this
+    // state -- and the first version measured `defaultValue.length` instead,
+    // so a Tab that appended a sixth row was immediately trimmed back to five
+    // by `shape()`. The sheet could not grow at all unless it was controlled.
+    const [internal, setInternal] = React.useState(() => (defaultValue ?? []).map((row) => row.slice()));
+    const rowCount = Math.max(rows ?? 0, (value ?? internal).length, 1);
+    const grid = React.useMemo(() => shape(value ?? internal, rowCount, colCount), [value, internal, rowCount, colCount]);
+    const commit = React.useCallback((next) => {
+        if (value === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+    }, [value, onValueChange]);
+    const [widths, setWidths] = React.useState(() => cols.map((c) => c.width ?? columnWidth));
+    const [heights, setHeights] = React.useState(() => Array.from({ length: rowCount }, () => rowHeight));
+    // Column and row counts are props: a sheet that grows has to grow its
+    // tracks too, or the new ones render at width `undefined`.
+    React.useEffect(() => {
+        setWidths((w) => w.length === colCount
+            ? w
+            : Array.from({ length: colCount }, (_, i) => w[i] ?? cols[i]?.width ?? columnWidth));
+    }, [colCount, cols, columnWidth]);
+    React.useEffect(() => {
+        setHeights((h) => h.length === rowCount
+            ? h
+            : Array.from({ length: rowCount }, (_, i) => h[i] ?? rowHeight));
+    }, [rowCount, rowHeight]);
+    const [anchor, setAnchor] = React.useState(null);
+    const [focus, setFocus] = React.useState(null);
+    const [editing, setEditing] = React.useState(null);
+    const [draft, setDraft] = React.useState("");
+    /**
+     * Was the last thing that moved the selection a KEY?
+     *
+     * Tracked explicitly because `:focus-visible` cannot answer it here. The
+     * cell press calls `rootRef.focus()`, and Chrome treats a programmatic
+     * focus as keyboard-ish -- so `:focus-visible` matched on a plain mouse
+     * press and the indicator came back exactly where it was not wanted.
+     * Measured, not assumed: `sheet.matches(":focus-visible")` returns true
+     * mid-click.
+     */
+    const [keyNav, setKeyNav] = React.useState(false);
+    const rootRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof forwardedRef === "function")
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
+    const sel = anchor && focus ? rect(anchor, focus) : null;
+    // Does the selection cover more than one cell? Only then is it worth
+    // painting -- see the recipe. The cell attributes stay the same either
+    // way; this only decides whether the tint applies.
+    const multiSelect = !!sel && (sel.r1 > sel.r0 || sel.c1 > sel.c0);
+    const isReadOnly = React.useCallback((c) => readOnly || !!cols[c]?.readOnly, [readOnly, cols]);
+    // --- selection ---------------------------------------------------------
+    const cellFromPoint = (x, y) => {
+        const el = document
+            .elementFromPoint(x, y)
+            ?.closest("[data-r][data-c]");
+        if (!el || !rootRef.current?.contains(el))
+            return null;
+        return { r: Number(el.dataset.r), c: Number(el.dataset.c) };
+    };
+    const dragRef = React.useRef(null);
+    /**
+     * Did the pointer travel far enough between press and release to be a
+     * drag rather than a click?
+     *
+     * A DISTANCE, not a boolean. The first version flipped a flag on any
+     * `mousemove` at all, which is correct for a synthetic click and wrong
+     * for every real one: a hand moves a pixel or two between pressing and
+     * releasing, so real clicks were being read as drags and the cell never
+     * opened. The tests could not see it, because a dispatched click moves
+     * nothing.
+     */
+    const pressRef = React.useRef(null);
+    const draggedRef = React.useRef(false);
+    // Roughly the platform drag threshold. Small enough that a deliberate
+    // drag is never mistaken for a click, large enough to absorb a hand.
+    const DRAG_SLOP = 4;
+    const markIfDragged = (x, y) => {
+        const p = pressRef.current;
+        if (!p) {
+            draggedRef.current = true;
+            return;
+        }
+        if (Math.abs(x - p.x) > DRAG_SLOP || Math.abs(y - p.y) > DRAG_SLOP) {
+            draggedRef.current = true;
+        }
+    };
+    const onCellPointerDown = (e, cell) => {
+        // `isPrimary === false` and not `!isPrimary`: the second finger of a
+        // pinch must be ignored, but environments that do not populate the
+        // field at all should not have every press thrown away.
+        if (e.button !== 0 || e.isPrimary === false)
+            return;
+        setEditing(null);
+        if (e.shiftKey && anchor) {
+            setFocus(cell);
+        }
+        else {
+            setAnchor(cell);
+            setFocus(cell);
+        }
+        // A TOUCH press selects but never starts a range drag. Dragging a
+        // finger across cells and scrolling the page are the same gesture, and
+        // the only way to tell them apart is `touch-action: none`, which would
+        // mean the page could not be scrolled by dragging over the sheet at all
+        // -- a much worse trade on a phone than not having drag-select there.
+        // Tapping a cell opens it, which is the flow that matters on touch.
+        setKeyNav(false); // a pointer put us here, so draw nothing
+        if (e.pointerType !== "touch") {
+            dragRef.current = "range";
+            draggedRef.current = false;
+            pressRef.current = { x: e.clientX, y: e.clientY };
+        }
+        rootRef.current?.focus({ preventScroll: true });
+    };
+    // --- fill ---------------------------------------------------------
+    /**
+     * Write the source rectangle over the swept one, tiling it — the same rule
+     * spreadsheets use, so dragging a two-cell pattern repeats the pair rather
+     * than stamping the last value. Only cells OUTSIDE the source are touched.
+     */
+    const applyFill = React.useCallback((to, source) => {
+        const from = source ?? sel;
+        if (!from)
+            return;
+        const { r0, r1, c0, c1 } = from;
+        // One axis at a time, whichever was dragged further — a fill that
+        // spread diagonally would have no defined source for the corner block.
+        const dRow = to.r < r0 ? r0 - to.r : to.r - r1;
+        const dCol = to.c < c0 ? c0 - to.c : to.c - c1;
+        const vertical = dRow >= dCol;
+        const tr0 = vertical ? Math.min(r0, to.r) : r0;
+        const tr1 = vertical ? Math.max(r1, to.r) : r1;
+        const tc0 = vertical ? c0 : Math.min(c0, to.c);
+        const tc1 = vertical ? c1 : Math.max(c1, to.c);
+        const srcRows = r1 - r0 + 1;
+        const srcCols = c1 - c0 + 1;
+        const next = grid.map((row) => row.slice());
+        let touched = false;
+        for (let r = tr0; r <= tr1; r++) {
+            for (let c = tc0; c <= tc1; c++) {
+                if (r >= r0 && r <= r1 && c >= c0 && c <= c1)
+                    continue;
+                if (isReadOnly(c))
+                    continue;
+                // `+ srcN` before the modulo: filling upward gives a negative
+                // offset, and JS `%` keeps the sign.
+                const sr = r0 + ((((r - r0) % srcRows) + srcRows) % srcRows);
+                const sc = c0 + ((((c - c0) % srcCols) + srcCols) % srcCols);
+                next[r][c] = grid[sr][sc];
+                touched = true;
+            }
+        }
+        if (touched)
+            commit(next);
+        setAnchor({ r: tr0, c: tc0 });
+        setFocus({ r: tr1, c: tc1 });
+    }, [sel, grid, commit, isReadOnly]);
+    // One window listener pair for both drags, attached unconditionally.
+    //
+    // The alternative guards on `dragRef.current` so an idle sheet holds no
+    // listeners. That version does work, but only because of a chain of
+    // incidental React timing: mousedown sets the ref, the discrete event
+    // flushes, this effect re-runs and attaches before any mousemove arrives,
+    // and nothing afterwards re-renders to detach it. Every link there is a
+    // detail of how React schedules, not a property of this component -- and a
+    // mutation test cannot tell the two versions apart, so nothing would catch
+    // it breaking. Two idle listeners buy independence from all of it.
+    //
+    // No dependency array on purpose: `applyFill` and the state it closes over
+    // change every render, and a stale closure here would fill from the
+    // previous selection.
+    React.useEffect(() => {
+        const move = (e) => {
+            if (!dragRef.current)
+                return;
+            markIfDragged(e.clientX, e.clientY);
+            const cell = cellFromPoint(e.clientX, e.clientY);
+            if (!cell)
+                return;
+            setFocus(cell);
+        };
+        const up = () => {
+            dragRef.current = null;
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
+        return () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", up);
+        };
+    });
+    // --- resize ------------------------------------------------------------
+    /** Shared by both axes: track a pointer delta into a track size. */
+    const startResize = (e, from, min, pick, set, index) => {
+        if (e.button !== 0 || e.isPrimary === false)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const origin = pick(e.nativeEvent);
+        pressRef.current = null; // a boundary drag is never a click on a cell
+        const move = (ev) => {
+            // the same flag the range drag uses: whatever click event follows
+            // this must not be read as "open the cell I started on"
+            draggedRef.current = true;
+            set((sizes) => {
+                const next = sizes.slice();
+                next[index] = Math.max(min, from + (pick(ev) - origin));
+                return next;
+            });
+        };
+        const up = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", up);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
+    };
+    const startColResize = (e, index) => startResize(e, widths[index] ?? columnWidth, MIN_W, (ev) => ev.clientX, setWidths, index);
+    const startRowResize = (e, index) => startResize(e, heights[index] ?? rowHeight, MIN_H, (ev) => ev.clientY, setHeights, index);
+    // --- editing -----------------------------------------------------------
+    // Mirrors `editing`, but cleared SYNCHRONOUSLY, which is what makes
+    // `closeEditor` idempotent. Committing on Enter unmounts the textarea, the
+    // unmount fires blur, and blur calls `closeEditor` again -- with `editing`
+    // still set in that closure, so the same edit was committed twice and
+    // `onValueChange` fired twice for one keystroke. Anything counting changes
+    // (an undo stack, a dirty flag, a save) would have seen both.
+    const editingRef = React.useRef(null);
+    const openEditor = (cell, seed) => {
+        if (isReadOnly(cell.c))
+            return;
+        editingRef.current = cell;
+        setEditing(cell);
+        setDraft(seed ?? grid[cell.r]?.[cell.c] ?? "");
+    };
+    const closeEditor = (write) => {
+        const cell = editingRef.current;
+        if (!cell)
+            return; // already closed; this is the unmount's blur
+        editingRef.current = null;
+        if (write) {
+            const next = grid.map((row) => row.slice());
+            next[cell.r][cell.c] = draft;
+            commit(next);
+        }
+        setEditing(null);
+        rootRef.current?.focus({ preventScroll: true });
+    };
+    /**
+     * Append an empty row and land on the start of it.
+     *
+     * Word's gesture, and the reason it is Tab rather than a hover control: in
+     * a table you are filling in, your hands are already on the keyboard and
+     * the row you want is the one after the one you just finished. It goes
+     * through `commit`, so a controlled sheet grows through `onValueChange`
+     * like every other edit, and an uncontrolled one just grows.
+     */
+    const appendRow = () => {
+        if (readOnly)
+            return;
+        const next = [...grid.map((row) => row.slice()), cols.map(() => "")];
+        commit(next);
+        setAnchor({ r: next.length - 1, c: 0 });
+        setFocus({ r: next.length - 1, c: 0 });
+    };
+    /** Tab off the last cell grows the sheet instead of going nowhere. */
+    const atLastCell = (cell) => cell.r === rowCount - 1 && cell.c === colCount - 1;
+    const move = (dr, dc, extend) => {
+        setKeyNav(true); // only `move` runs from the keyboard
+        // The FIRST arrow lands on the first cell rather than stepping off it.
+        // Moving from an implicit {0,0} means an arrow pressed with nothing
+        // selected skips r0c0 entirely and starts you on the second cell, which
+        // is a cell nobody asked for.
+        if (!focus) {
+            const start = { r: 0, c: 0 };
+            setFocus(start);
+            if (!extend)
+                setAnchor(start);
+            return;
+        }
+        const from = focus;
+        const to = {
+            r: Math.min(rowCount - 1, Math.max(0, from.r + dr)),
+            c: Math.min(colCount - 1, Math.max(0, from.c + dc)),
+        };
+        setFocus(to);
+        if (!extend)
+            setAnchor(to);
+    };
+    const onKeyDown = (e) => {
+        if (editing)
+            return;
+        const cur = focus ?? { r: 0, c: 0 };
+        // Copy the selection as TSV -- the format every spreadsheet and every
+        // word processor's table speaks, so a range lands in Excel, Sheets or
+        // Numbers as cells rather than as one blob of text.
+        if ((e.metaKey || e.ctrlKey) && (e.key === "c" || e.key === "C")) {
+            if (!sel)
+                return;
+            e.preventDefault();
+            const block = grid
+                .slice(sel.r0, sel.r1 + 1)
+                .map((row) => row.slice(sel.c0, sel.c1 + 1));
+            const text = toTSV(block);
+            // TWO flavours. The plain text is what a spreadsheet reads; the HTML
+            // `<table>` is what Word, Google Docs, Pages and every rich-text
+            // editor read -- given only tabs they paste a paragraph of tabs, so
+            // without this a sheet cannot land in a document as a table at all.
+            const html = toHTML(block, {
+                columns: cols.slice(sel.c0, sel.c1 + 1),
+            });
+            const write = navigator.clipboard?.write;
+            if (write && typeof ClipboardItem !== "undefined") {
+                write
+                    .call(navigator.clipboard, [
+                    new ClipboardItem({
+                        "text/plain": new Blob([text], { type: "text/plain" }),
+                        "text/html": new Blob([html], { type: "text/html" }),
+                    }),
+                ])
+                    // `write` needs a secure context and the clipboard permission;
+                    // plain text is always available, so fall back rather than
+                    // leaving the copy silently doing nothing.
+                    .catch(() => navigator.clipboard?.writeText(text));
+            }
+            else {
+                navigator.clipboard?.writeText(text);
+            }
+            return;
+        }
+        // Fill down, the way a spreadsheet does it, with no handle to find. The
+        // sheet is meant to be plain, and a square parked in a cell corner is
+        // the one mark that could not be made to sit quietly: always visible it
+        // is clutter, revealed on hover it appears exactly when you reach for
+        // the cell.
+        //
+        // Handled BEFORE the switch, not as a case in it. As a case, the guard
+        // for "no modifier held" has to `break`, and `break` leaves the switch
+        // without reaching `default` -- so typing a plain d was swallowed and
+        // never opened the cell.
+        if ((e.metaKey || e.ctrlKey) && (e.key === "d" || e.key === "D")) {
+            e.preventDefault();
+            // No single-cell guard: `applyFill` already writes nothing when the
+            // target is entirely inside the source, which is exactly what one
+            // selected cell is. A guard here looked like a safety check and was
+            // unreachable -- a mutation removing it could not be made to fail.
+            if (!sel || readOnly)
+                return;
+            // source is the FIRST row of the selection; it fills over the rest
+            return applyFill({ r: sel.r1, c: sel.c1 }, { r0: sel.r0, r1: sel.r0, c0: sel.c0, c1: sel.c1 });
+        }
+        switch (e.key) {
+            case "ArrowUp":
+                e.preventDefault();
+                return move(-1, 0, e.shiftKey);
+            case "ArrowDown":
+                e.preventDefault();
+                return move(1, 0, e.shiftKey);
+            // The arrows follow what the user SEES: under RTL column 0 renders
+            // rightmost, so ArrowLeft steps forward and ArrowRight steps back.
+            // Tab is NOT mirrored -- it follows reading order, which already runs
+            // right-to-left there, so column 0 -> 1 is correct either way.
+            case "ArrowLeft":
+            case "ArrowRight": {
+                e.preventDefault();
+                const rtl = isRtlElement(e.currentTarget);
+                const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                return move(0, forward ? 1 : -1, e.shiftKey);
+            }
+            case "Tab":
+                e.preventDefault();
+                if (!e.shiftKey && atLastCell(cur))
+                    return appendRow();
+                return move(0, e.shiftKey ? -1 : 1, false);
+            case "Enter":
+                e.preventDefault();
+                if (!anchor)
+                    setAnchor(cur);
+                return openEditor(cur);
+            case "Escape":
+                e.preventDefault();
+                // Tab moves between cells here, which is the word-processor
+                // behaviour and the thing that makes a form quick to fill -- but it
+                // means Tab can never carry focus OUT, and a grid you cannot leave
+                // with the keyboard is a trap. Escape is the way out: once to drop
+                // the selection, again to leave the sheet entirely.
+                if (!anchor && !focus) {
+                    rootRef.current?.blur();
+                    return;
+                }
+                setAnchor(null);
+                return setFocus(null);
+            case "Backspace":
+            case "Delete": {
+                e.preventDefault();
+                if (!sel || readOnly)
+                    return;
+                const next = grid.map((row) => row.slice());
+                for (let r = sel.r0; r <= sel.r1; r++)
+                    for (let c = sel.c0; c <= sel.c1; c++)
+                        if (!isReadOnly(c))
+                            next[r][c] = "";
+                return commit(next);
+            }
+            default:
+                // Typing replaces, the way it does in every spreadsheet: the first
+                // character opens the editor and becomes its whole contents.
+                if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                    e.preventDefault();
+                    openEditor(cur, e.key);
+                }
+        }
+    };
+    // --- render ------------------------------------------------------------
+    const gridStyle = {
+        "--crisp-fillsheet-cols": widths.map((w) => `${w}px`).join(" "),
+        // `minmax(h, auto)` and not a fixed track: a narrowed column wraps its
+        // text, and the row has to be free to grow to hold it. The dragged
+        // height is the floor, never the ceiling.
+        "--crisp-fillsheet-rows": heights
+            .map((h) => `minmax(${h}px, auto)`)
+            .join(" "),
+        ...style,
+    };
+    return (_jsx("div", { ...rest, ref: setRefs, role: "grid", "aria-label": label, "data-multi": multiSelect ? "" : undefined, "data-keynav": keyNav ? "" : undefined, "aria-rowcount": rowCount, "aria-colcount": colCount, tabIndex: 0, className: cx(fillsheetRecipe({ surface }), className), style: gridStyle, onKeyDown: (e) => {
+            rest.onKeyDown?.(e);
+            if (!e.defaultPrevented)
+                onKeyDown(e);
+        }, onPaste: (e) => {
+            rest.onPaste?.(e);
+            if (e.defaultPrevented || editing || readOnly || !anchor)
+                return;
+            const text = e.clipboardData.getData("text/plain");
+            if (!text)
+                return;
+            e.preventDefault();
+            // TSV in, the same shape copy puts out, so a range pasted from a
+            // spreadsheet arrives as CELLS. Splitting on tabs is what makes
+            // this a paste TARGET rather than a box that takes one blob of
+            // text -- which is what the docs have been claiming it is.
+            const rows = text
+                .replace(/\r\n?/g, "\n")
+                .replace(/\n$/, "")
+                .split("\n")
+                .map((line) => line.split("\t"));
+            const next = grid.map((row) => row.slice());
+            let lastR = anchor.r;
+            let lastC = anchor.c;
+            for (let i = 0; i < rows.length; i++) {
+                const r = anchor.r + i;
+                if (r >= rowCount)
+                    break; // a paste never grows the sheet silently
+                for (let j = 0; j < rows[i].length; j++) {
+                    const c = anchor.c + j;
+                    if (c >= colCount || isReadOnly(c))
+                        continue;
+                    next[r][c] = rows[i][j];
+                    lastR = Math.max(lastR, r);
+                    lastC = Math.max(lastC, c);
+                }
+            }
+            commit(next);
+            setFocus({ r: lastR, c: lastC });
+        }, onFocus: (e) => {
+            rest.onFocus?.(e);
+            // Tabbing into the sheet lands on a cell, the way it does in every
+            // sheet -- and it is what lets the root drop its own focus ring
+            // without leaving a keyboard user with nothing to look at.
+            //
+            // Two guards, both load-bearing. `e.target === e.currentTarget`
+            // because this bubbles from the cell editor. And `!dragRef.current`
+            // because a CLICK also focuses the root: `onCellMouseDown` sets the
+            // anchor and then calls focus(), so this handler runs inside the
+            // same event with `anchor` still reading its pre-click value of
+            // null -- and would queue {0,0} AFTER the clicked cell, throwing the
+            // selection to A1 on every single click. The drag ref is already set
+            // by then, so it is the one thing here that is not stale.
+            if (e.target === e.currentTarget && !anchor && !dragRef.current) {
+                setAnchor({ r: 0, c: 0 });
+                setFocus({ r: 0, c: 0 });
+            }
+        }, children: grid.map((row, r) => (_jsx("div", { role: "row", "aria-rowindex": r + 1, style: { display: "contents" }, children: row.map((raw, c) => {
+                // What the CLOSED cell shows. A select renders its option's
+                // label, everything else its own text; either way what is
+                // STORED is the raw string, which is what keeps fill, clear and
+                // tiling from needing to know a cell's type at all.
+                const col = cols[c];
+                const opts = typeof col?.options === "function"
+                    ? col.options(r)
+                    : col?.options;
+                const text = col?.format?.(raw) ??
+                    opts?.find((o) => o.value === raw)?.label ??
+                    raw;
+                const selected = sel?.r0 === r && sel?.c0 === c;
+                const inRange = sel && r >= sel.r0 && r <= sel.r1 && c >= sel.c0 && c <= sel.c1;
+                const isEditing = editing?.r === r && editing?.c === c;
+                return (_jsxs("div", { role: "gridcell", "aria-colindex": c + 1, "aria-selected": inRange ? true : undefined, "aria-readonly": isReadOnly(c) || undefined, className: "crisp-fillsheet-cell", "data-r": r, "data-c": c, "data-align": cols[c]?.align, "data-selected": selected ? "" : undefined, "data-editing": isEditing ? "" : undefined, "data-range": inRange ? "" : undefined, onPointerDown: (e) => onCellPointerDown(e, { r, c }), onClick: () => {
+                        // ONE click puts you in the cell. Both modes, no
+                        // select-then-click-again: a word processor places the
+                        // caret where you clicked, and nobody double-clicks a
+                        // paper form.
+                        //
+                        // This was gated to `fill` at first, on the theory that in
+                        // `edit` a click might be reaching for a boundary to drag.
+                        // It is not: the resize grabs stop the event themselves,
+                        // and mark the drag so the mouseup that ends one cannot
+                        // open anything. The gate only made editing a form you
+                        // were building take twice as many clicks.
+                        if (!draggedRef.current)
+                            openEditor({ r, c });
+                    }, onDoubleClick: () => openEditor({ r, c }), children: [isEditing && opts ? (_jsx(SelectCell, { options: opts, value: draft, onCommit: (v) => {
+                                const next = grid.map((r2) => r2.slice());
+                                next[r][c] = v;
+                                commit(next);
+                                editingRef.current = null;
+                                setEditing(null);
+                                rootRef.current?.focus({ preventScroll: true });
+                            }, onCancel: () => closeEditor(false) })) : isEditing ? (_jsx("textarea", { className: "crisp-fillsheet-editor", 
+                            // biome-ignore lint/a11y/noAutofocus: the editor only exists because the user opened it
+                            autoFocus: true, rows: 1, value: draft, ref: autoGrow, onFocus: (e) => {
+                                autoGrow(e.currentTarget);
+                                // Put the caret at the END. A focused textarea starts
+                                // at position 0, so clicking a filled cell dropped you
+                                // in front of the text you were coming to add to.
+                                //
+                                // In `onFocus` and not a ref callback: an inline ref
+                                // is a new function every render, so it re-runs on
+                                // every keystroke and would drag the caret back to the
+                                // end mid-word. This fires once, when autoFocus lands.
+                                const end = e.currentTarget.value.length;
+                                e.currentTarget.setSelectionRange(end, end);
+                            }, onChange: (e) => {
+                                autoGrow(e.currentTarget);
+                                setDraft(e.target.value);
+                            }, onBlur: () => closeEditor(true), onKeyDown: (e) => {
+                                e.stopPropagation();
+                                // A prose column inverts the pair: Enter breaks the
+                                // line and the modifier commits, which is what every
+                                // app with a multi-line composer does. Everywhere
+                                // else Enter commits, because a form is filled far
+                                // more often than it is written in paragraphs.
+                                const prose = !!cols[c]?.multiline;
+                                // Outside a prose column ⌘Enter commits too, rather
+                                // than being a dead key: it is the submit chord
+                                // everywhere else, so it should never do nothing.
+                                const commitChord = prose
+                                    ? e.metaKey || e.ctrlKey
+                                    : !e.shiftKey;
+                                if (e.key === "Enter" && commitChord) {
+                                    e.preventDefault();
+                                    closeEditor(true);
+                                    move(1, 0, false);
+                                }
+                                else if (e.key === "Escape") {
+                                    e.preventDefault();
+                                    closeEditor(false);
+                                }
+                                else if (e.key === "Tab") {
+                                    e.preventDefault();
+                                    closeEditor(true);
+                                    if (!e.shiftKey && atLastCell({ r, c }))
+                                        appendRow();
+                                    else
+                                        move(0, e.shiftKey ? -1 : 1, false);
+                                }
+                            } })) : (text), mode === "edit" && (_jsx("span", { className: "crisp-fillsheet-colresize", onPointerDown: (e) => startColResize(e, c), "aria-hidden": "true" })), mode === "edit" && (_jsx("span", { className: "crisp-fillsheet-rowresize", onPointerDown: (e) => startRowResize(e, r), "aria-hidden": "true" }))] }, c));
+            }) }, r))) }));
+});