foldkit-mixins-data-grid 0.2.15 → 0.3.0

package/dist/view.js

@@ -0,0 +1,861 @@
+import { Match, Option } from "effect";
+import * as Mount from "foldkit/mount";
+import { GridSlots } from "./slots.js";
+import { SlotView } from "foldkit-mixins";
+import { fillHandleAttribute } from "./fillDrag.js";
+import { CellEditor, Clipboard, Columns, Fill, GridFocus, GridSelection, GridViewport, RowCount, RowStatus, VirtualGrid, addressableRows } from "foldkit-data-grid";
+import { Move } from "foldkit-primitives/dom";
+import { HoldFocus } from "./holdFocus.js";
+import { KeepFocus } from "./keepFocus.js";
+import { HeaderDrag } from "./headerDrag.js";
+import { CellPress } from "./press.js";
+// src/view.ts
+const px = (value) => `${value}px`;
+/** Whether the rows' source is reading: the grid says so, and asks for nothing more. */
+const isBusy = (status) => RowStatus.match(status ?? RowStatus.Ready(), {
+	Ready: () => false,
+	Loading: () => true,
+	Refreshing: () => true,
+	Failed: () => false
+});
+const ariaSort = (direction) => {
+	if (direction === "asc") return "ascending";
+	if (direction === "desc") return "descending";
+	return "none";
+};
+/** How far one press of an arrow key on a resize handle moves the edge, in pixels. */
+const resizeStep = 16;
+const { textOf } = Columns;
+const copies = /* @__PURE__ */ new WeakMap();
+const remembered = (projection, key, make) => {
+	const known = copies.get(projection) ?? /* @__PURE__ */ new Map();
+	copies.set(projection, known);
+	const text = known.get(key);
+	if (text !== void 0) return text;
+	const made = make();
+	known.set(key, made);
+	return made;
+};
+/** The offset of each pinned column from its edge: the widths of the ones before it. */
+const insets = (ids, width) => {
+	const offsets = /* @__PURE__ */ new Map();
+	let offset = 0;
+	for (const id of ids) {
+		offsets.set(id, offset);
+		offset += Math.max(0, width(id));
+	}
+	return offsets;
+};
+const view = () => ({ 
+/**
+* The view of one `DataGrid`. It draws the grid's columns' headers and the
+* window of cells `VirtualGrid.window` picks for the placed viewport, and
+* sends the grid's Messages through `wrap`: `Moved` for a key, with the
+* scroll that reveals the cell, `Focused` for the pointer, `Measured` from
+* the scroll container. Attach Style and Behavior to the result.
+*/
+define: (grid) => {
+	const editsAny = Object.values(grid.columns.byId).some((column) => column.edit !== void 0);
+	return SlotView.forMessages().define(GridSlots, (input, slots, h) => {
+		const { rowHeight, headerHeight, state } = input;
+		const projection = grid.project(input.rows, state.columns);
+		const width = grid.columnState.widthOf(state.columns);
+		const viewport = state.viewport;
+		const shown = grid.window(input);
+		const stop = GridFocus.tabStop(projection, state.focus.current);
+		const pageRows = Math.max(1, Math.floor((viewport.height - headerHeight) / rowHeight));
+		const drawn = [
+			...shown.start,
+			...shown.centerColumns,
+			...shown.end
+		];
+		const indexOf = new Map(projection.columns.map((id, index) => [id, index]));
+		const startInsets = insets(shown.start, width);
+		const endInsets = insets([...shown.end].reverse(), width);
+		const markOf = (address) => input.marks === void 0 ? Option.none() : input.marks(address);
+		const pinned = (id) => {
+			if (startInsets.has(id)) return Option.some("start");
+			if (endInsets.has(id)) return Option.some("end");
+			return Option.none();
+		};
+		const startEdge = shown.start.at(-1);
+		const endEdge = shown.end[0];
+		const pinnedEdge = (id) => {
+			if (id === startEdge) return [h.DataAttribute("pinned-edge", "start")];
+			if (id === endEdge) return [h.DataAttribute("pinned-edge", "end")];
+			return [];
+		};
+		const cellStyle = (id) => {
+			const base = {
+				boxSizing: "border-box",
+				width: px(Math.max(0, width(id))),
+				flex: "none"
+			};
+			return Option.match(pinned(id), {
+				onNone: () => base,
+				onSome: (edge) => edge === "start" ? {
+					...base,
+					position: "sticky",
+					insetInlineStart: px(startInsets.get(id))
+				} : {
+					...base,
+					position: "sticky",
+					insetInlineEnd: px(endInsets.get(id))
+				}
+			});
+		};
+		const spacer = (size) => size > 0 ? [h.div([h.AriaHidden(true), h.Style({
+			width: px(size),
+			flex: "none"
+		})], [])] : [];
+		const across = (drawCell) => [
+			...shown.start.map(drawCell),
+			...spacer(shown.center.before),
+			...shown.centerColumns.map(drawCell),
+			...spacer(shown.center.after),
+			...shown.end.map(drawCell)
+		];
+		const isDrawn = (address) => Option.match(projection.positionOf(address), {
+			onNone: () => false,
+			onSome: ({ row }) => row >= shown.rows.start && row < shown.rows.end && drawn.includes(address.column)
+		});
+		const isRowShown = (address) => Option.isSome(projection.positionOf(address));
+		const onHeader = state.focus.header;
+		const activeDescendant = Option.match(onHeader, {
+			onSome: (column) => drawn.includes(column) ? Option.some(GridFocus.headerId(grid.id, column)) : Option.none(),
+			onNone: () => Option.map(Option.filter(stop, isDrawn), (address) => GridFocus.cellId(grid.id, address))
+		});
+		const revealOf = (address) => Option.flatMap(projection.positionOf(address), (position) => VirtualGrid.reveal({
+			projection,
+			rowHeight,
+			width,
+			headerHeight,
+			viewport,
+			position
+		}));
+		const selection = state.selection;
+		const isSelectedRow = GridSelection.isSelected(selection.rows);
+		const range = Option.flatMap(selection.cells, (cells) => GridSelection.boxOf(projection, cells));
+		const rangeColumns = Option.map(range, (box) => new Set(box.columns));
+		const selectionKey = (key, modifiers) => {
+			const toggle = modifiers.ctrlKey || modifiers.metaKey;
+			if (key === "Escape" && Option.isSome(selection.cells)) return Option.some(grid.Message.CellsCleared());
+			if ((key === "a" || key === "A") && toggle && !modifiers.shiftKey && !modifiers.altKey) {
+				if (grid.rowSelection === "multiple") return Option.some(grid.Message.AllRowsSelected());
+				if (grid.cellSelection) return Option.zipWith(projection.first(), projection.last(), (anchor, far) => grid.Message.CellsSelected({
+					anchor,
+					focus: far,
+					reveal: Option.none()
+				}));
+				return Option.none();
+			}
+			if (key === " " && !toggle && !modifiers.altKey && grid.rowSelection !== void 0) return Option.map(stop, (current) => {
+				if (!modifiers.shiftKey || grid.rowSelection !== "multiple") return grid.Message.RowSelected({ row: current.row });
+				const from = Option.getOrElse(selection.anchor, () => current.row);
+				return grid.Message.RowsExtended({
+					rows: GridSelection.rowsBetween(projection, from, current.row),
+					to: current.row
+				});
+			});
+			if (!grid.cellSelection) return Option.none();
+			return Option.map(GridSelection.extend(projection, {
+				range: selection.cells,
+				current: stop,
+				key,
+				modifiers,
+				pageRows,
+				...input.direction === void 0 ? {} : { direction: input.direction }
+			}), (extended) => grid.Message.CellsSelected({
+				anchor: extended.anchor,
+				focus: extended.focus,
+				reveal: revealOf(extended.focus)
+			}));
+		};
+		const focusKey = (key, modifiers) => Option.map(GridFocus.target(projection, {
+			current: state.focus.current,
+			key,
+			modifiers,
+			pageRows,
+			...input.direction === void 0 ? {} : { direction: input.direction }
+		}), (address) => grid.Message.Moved({
+			address,
+			reveal: revealOf(address)
+		}));
+		const flip = input.direction === "rtl" ? -1 : 1;
+		const sideways = /* @__PURE__ */ new Map([["ArrowRight", flip], ["ArrowLeft", -flip]]);
+		const plainKey = (modifiers) => !modifiers.shiftKey && !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey;
+		const revealHeader = (column) => Option.flatMap(projection.columnIndex(column), (columnIndex) => Option.flatMap(VirtualGrid.reveal({
+			projection,
+			rowHeight,
+			width,
+			headerHeight,
+			viewport,
+			position: {
+				row: shown.rows.start,
+				column: columnIndex
+			}
+		}), ({ left }) => left === viewport.left ? Option.none() : Option.some({
+			top: viewport.top,
+			left
+		})));
+		const headerTo = (column) => grid.Message.HeaderFocused({
+			column,
+			reveal: revealHeader(column)
+		});
+		const headerKey = (column, key, modifiers) => {
+			const columns = projection.columns;
+			const at = columns.indexOf(column);
+			const step = sideways.get(key);
+			const opensMenu = key === "ArrowDown" && modifiers.altKey || key === "F10" && modifiers.shiftKey || key === "ContextMenu";
+			if (input.columnMenu === true && opensMenu) return Option.some(grid.Message.MenuOpened({ column }));
+			if (modifiers.altKey) return Option.none();
+			if (step !== void 0 && modifiers.shiftKey && (modifiers.ctrlKey || modifiers.metaKey)) {
+				const region = [
+					"start",
+					"center",
+					"end"
+				].find((name) => state.columns[name].includes(column));
+				if (region === void 0) return Option.none();
+				const index = state.columns[region].indexOf(column) + step;
+				return Option.some(grid.Message.ColumnMoved({
+					column,
+					region,
+					index
+				}));
+			}
+			if (step !== void 0 && modifiers.shiftKey && !modifiers.ctrlKey && !modifiers.metaKey) return Option.some(grid.Message.ColumnResized({
+				column,
+				width: width(column) + resizeStep * step
+			}));
+			if (!plainKey(modifiers)) return Option.none();
+			if (step !== void 0) {
+				const next = columns[Math.min(Math.max(at + step, 0), columns.length - 1)];
+				return Option.fromUndefinedOr(next).pipe(Option.map(headerTo));
+			}
+			if (key === "Home") return Option.fromUndefinedOr(columns[0]).pipe(Option.map(headerTo));
+			if (key === "End") return Option.fromUndefinedOr(columns[columns.length - 1]).pipe(Option.map(headerTo));
+			if (key === "ArrowDown" || key === "Escape") {
+				const row = Option.orElse(Option.map(Option.filter(stop, isRowShown), (current) => current.row), () => Option.map(projection.first(), (first) => first.row));
+				return Option.map(row, (key) => {
+					const address = {
+						row: key,
+						column
+					};
+					return grid.Message.Moved({
+						address,
+						reveal: revealOf(address)
+					});
+				});
+			}
+			return Option.none();
+		};
+		const upToHeader = (key, modifiers) => key === "ArrowUp" && plainKey(modifiers) ? Option.flatMap(Option.filter(stop, (current) => Option.exists(projection.positionOf(current), ({ row }) => row === 0)), (current) => Option.some(headerTo(current.column))) : Option.none();
+		const editing = Option.filter(state.editing, (edit) => isDrawn(edit.address));
+		const draftOf = (address) => grid.draftOf(projection, address);
+		const editKey = (key, modifiers) => Option.flatMap(Option.filter(stop, (address) => grid.columns.byId[address.column].edit !== void 0), (address) => {
+			if ((key === "Enter" || key === "F2") && plainKey(modifiers)) return Option.some(grid.Message.EditStarted({
+				address,
+				draft: draftOf(address)
+			}));
+			if (key === "Escape") return Option.some(grid.Message.EditCancelled());
+			if (!(key.length === 1 && !modifiers.ctrlKey && !modifiers.metaKey && !modifiers.altKey)) return Option.none();
+			return Option.some(grid.Message.EditTyped({
+				address,
+				text: key,
+				from: draftOf(address)
+			}));
+		});
+		const editorKey = (address, key, modifiers) => {
+			if (key === "Escape") return Option.some(grid.Message.EditCancelled());
+			const back = modifiers.shiftKey ? -1 : 1;
+			const offsets = {
+				Enter: { rows: back },
+				Tab: { columns: back * flip }
+			};
+			const offset = Object.hasOwn(offsets, key) ? offsets[key] : void 0;
+			if (offset === void 0 || modifiers.ctrlKey || modifiers.metaKey || modifiers.altKey) return Option.none();
+			const next = projection.moveBy(address, offset);
+			return Option.some(grid.Message.EditCommitted({
+				next,
+				reveal: Option.flatMap(next, revealOf)
+			}));
+		};
+		const choiceSteps = {
+			ArrowDown: grid.Message.EditStepped({ by: "next" }),
+			ArrowUp: grid.Message.EditStepped({ by: "previous" }),
+			Home: grid.Message.EditStepped({ by: "first" }),
+			End: grid.Message.EditStepped({ by: "last" }),
+			PageDown: grid.Message.EditStepped({ by: "pageNext" }),
+			PageUp: grid.Message.EditStepped({ by: "pagePrevious" })
+		};
+		const choiceKey = (address, key, modifiers) => {
+			if (key === "ArrowUp" && modifiers.altKey) return Option.some(grid.Message.EditCommitted({
+				next: Option.none(),
+				reveal: Option.none()
+			}));
+			if (modifiers.ctrlKey || modifiers.metaKey || modifiers.altKey) return editorKey(address, key, modifiers);
+			if (Object.hasOwn(choiceSteps, key)) return Option.some(choiceSteps[key]);
+			if (key.length === 1) return Option.some(grid.Message.EditTyped({
+				address,
+				text: key,
+				from: draftOf(address)
+			}));
+			return editorKey(address, key, modifiers);
+		};
+		const choiceRows = 8;
+		const choiceList = (address, options, draft, shared) => {
+			const cellId = GridFocus.cellId(grid.id, address);
+			const listId = `${cellId}:options`;
+			const optionId = (index) => `${cellId}:option:${index}`;
+			const active = options.indexOf(draft);
+			const top = Option.match(projection.positionOf(address), {
+				onNone: () => 0,
+				onSome: ({ row }) => headerHeight + row * rowHeight - viewport.top
+			});
+			const listHeight = Math.min(options.length, choiceRows) * rowHeight;
+			const above = viewport.height - (top + rowHeight) < listHeight && top - headerHeight >= listHeight;
+			return [h.div(slots.choice.attrs([
+				...shared,
+				h.Role("combobox"),
+				h.Tabindex(0),
+				h.AriaExpanded(true),
+				h.AriaControls(listId),
+				...active === -1 ? [] : [h.AriaActiveDescendant(optionId(active))]
+			]), [draft]), h.ul(slots.choiceList.attrs([
+				h.Id(listId),
+				h.Role("listbox"),
+				h.AriaLabel(grid.columns.byId[address.column].header),
+				h.DataAttribute("place", above ? "above" : "below"),
+				h.OnMount(KeepFocus()),
+				h.Style({
+					position: "absolute",
+					insetInlineStart: "0",
+					...above ? { bottom: "100%" } : { top: "100%" }
+				})
+			]), options.map((option, index) => h.li(slots.choiceOption.attrs([
+				h.Id(optionId(index)),
+				h.Role("option"),
+				h.AriaSelected(index === active),
+				h.OnClick(input.wrap(grid.Message.EditChosen({ draft: option })))
+			]), [option])))];
+		};
+		const editorOf = (address, edit) => {
+			const errorId = `${GridFocus.cellId(grid.id, address)}:error`;
+			const sharedWith = (keys) => [
+				h.Key(`edit:${address.row}:${address.column}`),
+				h.AriaLabel(grid.columns.byId[address.column].header),
+				h.AriaInvalid(Option.isSome(edit.error)),
+				...Option.isSome(edit.error) ? [h.AriaDescribedBy(errorId)] : [],
+				h.OnKeyDownPreventDefault((pressed, modifiers) => Option.map(keys(pressed, modifiers), input.wrap)),
+				h.OnBlur(input.wrap(grid.Message.EditCommitted({
+					next: Option.none(),
+					reveal: Option.none()
+				}))),
+				h.OnMount(HoldFocus()),
+				h.Style({
+					boxSizing: "border-box",
+					width: "100%",
+					height: "100%"
+				})
+			];
+			const shared = sharedWith((pressed, modifiers) => editorKey(address, pressed, modifiers));
+			const changed = (draft) => input.wrap(grid.Message.EditChanged({ draft }));
+			const field = (mode, type = "text") => h.input(slots.editor.attrs([
+				...shared,
+				h.Type(type),
+				h.Value(edit.draft),
+				...Option.match(mode, {
+					onNone: () => [],
+					onSome: (decimal) => [h.InputMode(decimal)]
+				}),
+				h.OnInput(changed)
+			]));
+			const message = Option.match(edit.error, {
+				onNone: () => [],
+				onSome: (error) => [h.div(slots.editorError.attrs([h.Id(errorId), h.Role("alert")]), [error])]
+			});
+			return [...Option.match(grid.editorFor(address.column), {
+				onNone: () => [field(Option.none())],
+				onSome: CellEditor.match({
+					Text: () => [field(Option.none())],
+					Number: () => [field(Option.some("decimal"))],
+					Date: () => [field(Option.none(), "date")],
+					Choice: ({ options }) => input.choiceEditor === "native" ? [h.select(slots.choice.attrs([...shared, h.OnChange(changed)]), options.map((option) => h.option(slots.choiceOption.attrs([h.Value(option), ...option === edit.draft ? [h.Selected(true)] : []]), [option])))] : choiceList(address, options, edit.draft, sharedWith((pressed, modifiers) => choiceKey(address, pressed, modifiers)))
+				})
+			}), ...message];
+		};
+		const clipboardBox = Option.filter(Option.orElse(range, () => Option.flatMap(stop, (address) => projection.box(address, address))), () => Option.isNone(editing));
+		const editable = (column) => grid.columns.byId[column].edit !== void 0;
+		const readOnly = (column) => editsAny && !editable(column);
+		const cornerOf = (box) => Option.map(projection.rows.keyAt(box.rows.start), (row) => ({
+			row,
+			column: box.columns[0]
+		}));
+		const clearedOf = (box) => Option.match(cornerOf(box), {
+			onNone: () => [],
+			onSome: (anchor) => Clipboard.pasteAt(projection, anchor, Array.from({ length: box.rows.end - box.rows.start }, () => box.columns.map(() => "")), {
+				editable,
+				from: draftOf
+			})
+		});
+		const clipboard = (box) => {
+			const text = remembered(projection, JSON.stringify(box), () => Clipboard.copy(projection, box, (address) => textOf(Option.match(Option.flatMap(projection.rowIndex(address.row), (index) => projection.rows.rowAt(index)), {
+				onNone: () => "",
+				onSome: (row) => grid.columns.byId[address.column].value(row)
+			}))));
+			const corner = cornerOf(box);
+			return [
+				h.OnCopyText(text),
+				h.OnCutText(text, input.wrap(grid.Message.Pasted({ cells: clearedOf(box) }))),
+				h.OnPastePreventDefault((pasted) => Option.flatMap(corner, (anchor) => {
+					const cells = Clipboard.pasteAt(projection, anchor, Clipboard.parseTsv(pasted), {
+						editable,
+						from: draftOf
+					});
+					return cells.length === 0 ? Option.none() : Option.some(input.wrap(grid.Message.Pasted({ cells })));
+				}))
+			];
+		};
+		const sortOf = (column) => Option.fromUndefinedOr(input.sort?.[column]);
+		const sortKey = (column, key, modifiers) => key === "Enter" && plainKey(modifiers) ? Option.map(sortOf(column), (sorted) => sorted.message) : Option.none();
+		const fillKey = (key, modifiers) => {
+			const pressed = key.toLowerCase();
+			const toggle = modifiers.ctrlKey || modifiers.metaKey;
+			if (!editsAny || !toggle || modifiers.shiftKey || modifiers.altKey) return Option.none();
+			if (pressed !== "d" && pressed !== "r") return Option.none();
+			const box = Option.orElse(range, () => Option.flatMap(stop, (address) => projection.box(address, address)));
+			return Option.flatMap(box, ({ rows, columns }) => {
+				const first = columns[0];
+				const last = columns[columns.length - 1];
+				if (pressed === "d") {
+					const from = rows.end - rows.start > 1 ? rows.start : rows.start - 1;
+					return Option.zipWith(projection.rows.keyAt(from), projection.rows.keyAt(rows.end - 1), (sourceRow, toRow) => grid.Message.FillRequested({
+						source: {
+							anchor: {
+								row: sourceRow,
+								column: first
+							},
+							focus: {
+								row: sourceRow,
+								column: last
+							}
+						},
+						to: {
+							row: toRow,
+							column: first
+						}
+					}));
+				}
+				const at = projection.columns.indexOf(first);
+				const from = columns.length > 1 ? first : projection.columns[at - 1];
+				return Option.zipWith(Option.fromUndefinedOr(from), Option.zipWith(projection.rows.keyAt(rows.start), projection.rows.keyAt(rows.end - 1), (top, bottom) => ({
+					top,
+					bottom
+				})), (column, { top, bottom }) => grid.Message.FillRequested({
+					source: {
+						anchor: {
+							row: top,
+							column
+						},
+						focus: {
+							row: bottom,
+							column
+						}
+					},
+					to: {
+						row: top,
+						column: last
+					}
+				}));
+			});
+		};
+		const clearKey = (key, modifiers) => (key === "Delete" || key === "Backspace") && plainKey(modifiers) ? Option.flatMap(clipboardBox, (box) => {
+			const cells = clearedOf(box);
+			return cells.length === 0 ? Option.none() : Option.some(grid.Message.Pasted({ cells }));
+		}) : Option.none();
+		const onKey = (key, modifiers) => {
+			if (key === "Escape" && Option.isSome(state.dragging)) return Option.some(input.wrap(grid.Message.ColumnDragEnded({ completed: false })));
+			if (key === "Escape" && Option.isSome(state.filling)) return Option.some(input.wrap(grid.Message.FillEnded({ completed: false })));
+			return keyOf(key, modifiers);
+		};
+		const historyKey = (key, modifiers) => {
+			if (!(modifiers.ctrlKey || modifiers.metaKey) || modifiers.altKey) return Option.none();
+			const pressed = key.toLowerCase();
+			if (pressed === "z") return Option.some(modifiers.shiftKey ? grid.Message.RedoRequested() : grid.Message.UndoRequested());
+			return pressed === "y" && !modifiers.shiftKey ? Option.some(grid.Message.RedoRequested()) : Option.none();
+		};
+		const cellKeys = [
+			historyKey,
+			fillKey,
+			clearKey,
+			selectionKey,
+			editKey,
+			upToHeader,
+			focusKey
+		];
+		const keyOf = (key, modifiers) => Option.match(onHeader, {
+			onSome: (column) => Option.orElse(sortKey(column, key, modifiers), () => Option.map(headerKey(column, key, modifiers), input.wrap)),
+			onNone: () => Option.map(cellKeys.reduce((found, next) => Option.orElse(found, () => next(key, modifiers)), Option.none()), input.wrap)
+		});
+		const pressed = Mount.mapMessage(CellPress(), (fact) => input.wrap(Match.valueTags(fact, {
+			CellClicked: ({ cell, shiftKey, toggleKey }) => grid.Message.CellPressed({
+				cell,
+				shiftKey,
+				toggleKey
+			}),
+			FillDragStarted: () => grid.Message.FillStarted(),
+			FillDraggedOver: ({ cell }) => grid.Message.FillDragged({ cell }),
+			FillDragEnded: ({ completed }) => grid.Message.FillEnded({ completed })
+		})));
+		const measured = Mount.mapMessage(GridViewport.Measure(), (reading) => input.wrap(grid.Message.Measured({
+			top: reading.top,
+			left: reading.left,
+			width: reading.width,
+			height: reading.height
+		})));
+		const rowCount = RowCount.match(projection.rowCount, {
+			Known: ({ total }) => total + 1,
+			Unknown: () => -1
+		});
+		const toward = input.direction === "rtl" ? -1 : 1;
+		const fillTarget = Option.map(Option.flatMap(state.filling, (filling) => Fill.plan(projection, filling)), ({ target }) => ({
+			rows: target.rows,
+			columns: new Set(target.columns)
+		}));
+		const handleAt = Option.filter(Option.orElse(Option.flatMap(range, (box) => Option.map(projection.rows.keyAt(box.rows.end - 1), (row) => ({
+			row,
+			column: box.columns[box.columns.length - 1]
+		}))), () => stop), () => editsAny);
+		const fillHandle = h.span(slots.fillHandle.attrs([
+			h.AriaHidden(true),
+			h.Attribute(fillHandleAttribute, ""),
+			h.Style({
+				position: "absolute",
+				insetInlineEnd: "0",
+				insetBlockEnd: "0"
+			})
+		]), []);
+		const headerDragged = Mount.mapMessage(HeaderDrag(), (fact) => input.wrap(Match.valueTags(fact, {
+			HeaderDragStarted: ({ header }) => grid.Message.ColumnDragStarted({ header }),
+			HeaderDragged: ({ deltaX }) => grid.Message.ColumnDragged({ delta: deltaX * toward }),
+			HeaderDragEnded: ({ completed }) => grid.Message.ColumnDragEnded({ completed })
+		})));
+		const landing = Option.flatMap(state.dragging, ({ column, delta }) => {
+			const columns = grid.columnState;
+			const region = columns.regionOf(state.columns, column);
+			const moved = columns.move(state.columns, column, region, columns.dropAt(state.columns, column, delta));
+			if (moved === state.columns) return Option.none();
+			const hidden = new Set(moved.hidden);
+			const order = moved[region].filter((id) => !hidden.has(id));
+			const at = order.indexOf(column);
+			return at + 1 < order.length ? Option.some({
+				column: order[at + 1],
+				side: "before"
+			}) : Option.some({
+				column: order[at - 1],
+				side: "after"
+			});
+		});
+		const resizeHandle = (id) => {
+			const column = grid.columns.byId[id];
+			if (column.resizable === false) return [];
+			const now = width(id);
+			const steps = /* @__PURE__ */ new Map([["ArrowRight", resizeStep * toward], ["ArrowLeft", -16 * toward]]);
+			const dragged = Mount.mapMessage(Move(), (fact) => input.wrap(Match.valueTags(fact, {
+				MoveStarted: () => grid.Message.ResizeStarted({ column: id }),
+				Moved: ({ deltaX }) => grid.Message.ResizeMoved({ delta: deltaX * toward }),
+				MoveEnded: ({ completed }) => grid.Message.ResizeEnded({ completed })
+			})));
+			return [h.div(slots.resizeHandle.attrs([
+				h.Key(`resize:${id}:${toward}`),
+				h.Role("separator"),
+				h.AriaOrientation("vertical"),
+				h.AriaLabel(`Resize ${column.header}`),
+				h.AriaValuenow(now),
+				h.AriaValuemin(column.minWidth ?? Columns.minWidth),
+				...column.maxWidth === void 0 ? [] : [h.AriaValuemax(column.maxWidth)],
+				h.Tabindex(-1),
+				h.OnKeyDownSelfPreventDefault((key) => Option.map(Option.fromUndefinedOr(steps.get(key)), (by) => input.wrap(grid.Message.ColumnResized({
+					column: id,
+					width: now + by
+				})))),
+				h.OnMount(dragged),
+				h.Style({
+					position: "absolute",
+					top: "0",
+					bottom: "0",
+					insetInlineEnd: "0",
+					width: px(resizeStep / 2),
+					cursor: "col-resize",
+					touchAction: "none"
+				})
+			]), [])];
+		};
+		const menuPart = (column, part) => [
+			grid.id,
+			column,
+			"menu",
+			part
+		].map(encodeURIComponent).join(":");
+		const say = (template, column) => template.replace("{column}", grid.columns.byId[column].header);
+		const itemLabel = (item) => grid.MenuItem.match(item, {
+			Pin: ({ region }) => ({
+				start: words.pinStart ?? "Pin to start",
+				end: words.pinEnd ?? "Pin to end",
+				center: words.unpin ?? "Unpin"
+			})[region],
+			Hide: () => words.hide ?? "Hide column",
+			Show: ({ column: other }) => say(words.show ?? "Show {column}", other)
+		});
+		const columnMenu = (id) => {
+			if (input.columnMenu !== true) return [];
+			const open = Option.filter(state.menu, (menu) => menu.column === id);
+			const button = h.button(slots.menuButton.attrs([
+				h.Type("button"),
+				h.Tabindex(-1),
+				h.AriaHasPopup("menu"),
+				h.AriaExpanded(Option.isSome(open)),
+				h.AriaLabel(say(words.menu ?? "{column} menu", id)),
+				...grid.columns.byId[id].resizable === false ? [] : [h.Style({ marginInlineEnd: px(resizeStep / 2) })],
+				h.OnClick(input.wrap(Option.match(open, {
+					onNone: () => grid.Message.MenuOpened({ column: id }),
+					onSome: () => grid.Message.MenuClosed()
+				})))
+			]), [String.fromCharCode(8942)]);
+			return Option.match(open, {
+				onNone: () => [button],
+				onSome: ({ active }) => {
+					const items = grid.menuItems(state.columns, id);
+					const count = items.length;
+					const menuKey = (key) => {
+						if (key === "ArrowDown") return Option.some(grid.Message.MenuMoved({ active: (active + 1) % count }));
+						if (key === "ArrowUp") return Option.some(grid.Message.MenuMoved({ active: (active - 1 + count) % count }));
+						if (key === "Home") return Option.some(grid.Message.MenuMoved({ active: 0 }));
+						if (key === "End") return Option.some(grid.Message.MenuMoved({ active: count - 1 }));
+						if (key === "Enter" || key === " ") return Option.some(grid.Message.MenuChosen({ index: active }));
+						if (key === "Escape") return Option.some(grid.Message.MenuClosed());
+						return Option.none();
+					};
+					return [button, h.div(slots.menu.attrs([
+						h.Key(menuPart(id, "list")),
+						h.Role("menu"),
+						h.Id(menuPart(id, "list")),
+						h.Tabindex(-1),
+						h.AriaLabel(grid.columns.byId[id].header),
+						...count === 0 ? [] : [h.AriaActiveDescendant(menuPart(id, String(active)))],
+						h.OnKeyDownPreventDefault((key) => Option.map(menuKey(key), input.wrap)),
+						h.OnFocusLeave(input.wrap(grid.Message.MenuClosed())),
+						h.OnMount(HoldFocus()),
+						h.Style({
+							position: "absolute",
+							top: "100%",
+							insetInlineEnd: "0"
+						})
+					]), items.map((item, index) => h.div(slots.menuItem.attrs([
+						h.Role("menuitem"),
+						h.Id(menuPart(id, String(index))),
+						...index === active ? [h.DataAttribute("active", "true")] : [],
+						h.OnClick(input.wrap(grid.Message.MenuChosen({ index })))
+					]), [itemLabel(item)])))];
+				}
+			});
+		};
+		const headerCell = (id) => {
+			const dragged = Option.filter(state.dragging, (dragging) => dragging.column === id);
+			return h.div(slots.headerCell.attrs([
+				h.Role("columnheader"),
+				h.Id(GridFocus.headerId(grid.id, id)),
+				...Option.contains(onHeader, id) ? [h.DataAttribute("focused", "true")] : [],
+				h.AriaColindex(indexOf.get(id) + 1),
+				h.Style({
+					...cellStyle(id),
+					...Option.isNone(pinned(id)) ? { position: "relative" } : {},
+					...Option.match(dragged, {
+						onNone: () => ({}),
+						onSome: ({ delta }) => ({ transform: `translateX(${px(delta * toward)})` })
+					})
+				}),
+				...Option.isSome(dragged) ? [h.DataAttribute("dragging", "true")] : [],
+				...Option.match(Option.filter(landing, (place) => place.column === id), {
+					onNone: () => [],
+					onSome: (place) => [h.DataAttribute("drop", place.side)]
+				}),
+				...Option.match(pinned(id), {
+					onNone: () => [],
+					onSome: (edge) => [h.DataAttribute("pinned", edge)]
+				}),
+				...pinnedEdge(id),
+				...readOnly(id) ? [h.AriaReadonly(true), h.Title("Read-only")] : [],
+				...Option.match(sortOf(id), {
+					onNone: () => [],
+					onSome: (sorted) => [h.AriaSort(ariaSort(sorted.direction))]
+				})
+			]), [
+				Option.match(sortOf(id), {
+					onNone: () => grid.columns.byId[id].header,
+					onSome: (sorted) => h.button(slots.sort.attrs([
+						h.Type("button"),
+						h.Tabindex(-1),
+						h.OnClick(sorted.message),
+						...sorted.direction === void 0 ? [] : [h.DataAttribute("sort", sorted.direction)]
+					]), [grid.columns.byId[id].header])
+				}),
+				...columnMenu(id),
+				...resizeHandle(id)
+			]);
+		};
+		const rowAt = (index) => Option.match(Option.zipWith(projection.rows.rowAt(index), projection.rows.keyAt(index), (row, key) => ({
+			row,
+			key
+		})), {
+			onNone: () => h.div(slots.placeholder.attrs([
+				h.AriaHidden(true),
+				h.Key(`unloaded:${index}`),
+				h.Style({
+					height: px(rowHeight),
+					width: px(shown.width)
+				})
+			]), []),
+			onSome: ({ row, key }) => h.div(slots.row.attrs([
+				h.Key(key),
+				h.Role("row"),
+				h.AriaRowindex(index + 2),
+				...grid.rowSelection === void 0 ? [] : [h.AriaSelected(isSelectedRow(key))],
+				h.Style({
+					display: "flex",
+					height: px(rowHeight),
+					width: px(shown.width)
+				})
+			]), across((id) => {
+				const address = {
+					row: key,
+					column: id
+				};
+				const focused = Option.isNone(onHeader) && Option.exists(stop, (current) => current.row === key && current.column === id);
+				const inRange = Option.exists(Option.zipWith(range, rangeColumns, (box, ids) => ({
+					box,
+					ids
+				})), ({ box, ids }) => index >= box.rows.start && index < box.rows.end && ids.has(id));
+				const edited = Option.filter(editing, (edit) => edit.address.row === key && edit.address.column === id);
+				const handled = Option.exists(handleAt, (at) => at.row === key && at.column === id);
+				const filled = Option.exists(fillTarget, (box) => index >= box.rows.start && index < box.rows.end && box.columns.has(id));
+				return h.div(slots.cell.attrs([
+					h.Role("gridcell"),
+					h.Id(GridFocus.cellId(grid.id, address)),
+					h.AriaColindex(indexOf.get(id) + 1),
+					h.Style({
+						...cellStyle(id),
+						...(Option.isSome(edited) || handled) && Option.isNone(pinned(id)) ? { position: "relative" } : {}
+					}),
+					...filled ? [h.DataAttribute("fill", "target")] : [],
+					...grid.cellSelection ? [h.AriaSelected(inRange)] : [],
+					...focused ? [h.DataAttribute("focused", "true")] : [],
+					...Option.match(pinned(id), {
+						onNone: () => [],
+						onSome: (edge) => [h.DataAttribute("pinned", edge)]
+					}),
+					...pinnedEdge(id),
+					...editable(id) ? [h.DataAttribute("editable", "true"), h.OnDoubleClick(input.wrap(grid.Message.EditStarted({
+						address,
+						draft: draftOf(address)
+					})))] : [],
+					...Option.isSome(edited) ? [h.DataAttribute("editing", "true")] : [],
+					...readOnly(id) ? [h.AriaReadonly(true)] : [],
+					...Option.match(markOf(address), {
+						onNone: () => [],
+						onSome: (mark) => [
+							h.DataAttribute("mark", mark.name),
+							h.AriaDescription(mark.description),
+							h.Title(mark.description)
+						]
+					})
+				]), Option.match(edited, {
+					onNone: () => [input.cell?.(id, row, h) ?? textOf(grid.columns.byId[id].value(row)), ...handled ? [fillHandle] : []],
+					onSome: (edit) => editorOf(address, edit)
+				}));
+			}))
+		});
+		const bodyRows = Array.from({ length: shown.rows.end - shown.rows.start }, (_, offset) => rowAt(shown.rows.start + offset));
+		const empty = addressableRows(projection.rowCount) === 0;
+		const status = input.status ?? RowStatus.Ready();
+		const busy = isBusy(status);
+		const words = input.words ?? {};
+		const failure = (message) => [h.p(slots.status.attrs([h.Role("alert")]), [(words.failed ?? "{message}").replaceAll("{message}", message)]), ...input.onRetry === void 0 ? [] : [h.button(slots.retry.attrs([h.Type("button"), h.OnClick(input.onRetry)]), [words.retry ?? "Try again"])]];
+		const emptyBody = RowStatus.match(status, {
+			Loading: () => [h.p(slots.status.attrs([h.Role("status"), h.AriaBusy(true)]), [words.loading ?? "Loading…"])],
+			Refreshing: () => [h.p(slots.status.attrs([h.Role("status")]), [words.empty ?? "No rows."])],
+			Ready: () => [h.p(slots.status.attrs([h.Role("status")]), [words.empty ?? "No rows."])],
+			Failed: ({ message }) => failure(message)
+		});
+		const more = Option.filter(Option.fromUndefinedOr(input.onMore), () => RowCount.match(projection.rowCount, {
+			Known: () => false,
+			Unknown: () => true
+		}));
+		const footer = [...empty ? [] : RowStatus.match(status, {
+			Ready: () => [],
+			Loading: () => [],
+			Refreshing: () => [],
+			Failed: ({ message }) => failure(message)
+		}), ...Option.match(more, {
+			onNone: () => [],
+			onSome: (message) => [h.button(slots.more.attrs([
+				h.Type("button"),
+				h.Disabled(busy),
+				h.OnClick(message),
+				h.Key(`more:${addressableRows(projection.rowCount)}:${busy}`)
+			]), [words.more ?? "More"])]
+		})];
+		return h.div(slots.root.attrs([
+			h.Id(grid.id),
+			h.Role("grid"),
+			...busy ? [h.AriaBusy(true)] : [],
+			h.AriaLabel(input.label),
+			h.Tabindex(0),
+			h.AriaRowcount(rowCount),
+			h.AriaColcount(projection.columns.length),
+			...grid.rowSelection === "multiple" || grid.cellSelection ? [h.AriaMultiSelectable(true)] : [],
+			...Option.match(activeDescendant, {
+				onNone: () => [],
+				onSome: (id) => [h.AriaActiveDescendant(id)]
+			}),
+			h.OnKeyDownSelfPreventDefault(onKey),
+			...Option.match(clipboardBox, {
+				onNone: () => [],
+				onSome: clipboard
+			}),
+			h.OnMount(measured),
+			h.Style({
+				overflow: "auto",
+				position: "relative"
+			})
+		]), [
+			h.div(slots.header.attrs([h.Role("rowgroup"), h.Style({
+				position: "sticky",
+				top: "0"
+			})]), [h.div(slots.headerRow.attrs([
+				h.Role("row"),
+				h.AriaRowindex(1),
+				h.Key(`header-drag:${toward}`),
+				h.OnMount(headerDragged),
+				h.Style({
+					display: "flex",
+					height: px(headerHeight),
+					width: px(shown.width)
+				})
+			]), across(headerCell))]),
+			h.div(slots.body.attrs([
+				h.Role("rowgroup"),
+				h.OnMount(pressed),
+				h.Style({
+					height: px(shown.height - headerHeight),
+					width: px(shown.width)
+				})
+			]), empty ? emptyBody : [...shown.rows.before > 0 ? [h.div([h.AriaHidden(true), h.Style({ height: px(shown.rows.before) })], [])] : [], ...bodyRows]),
+			...footer.length === 0 ? [] : [h.div(slots.footer.attrs(), footer)]
+		]);
+	}, { name: grid.id });
+} });
+const DataGridView = view;
+export { DataGridView, isBusy };
+
+//# sourceMappingURL=view.js.map