foldkit-mixins-data-grid 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1846 @@
+import { Attr, Behavior, Capability, Event, Layers, Slot, SlotView, Slots, Style } from "foldkit-mixins";
+import { Theme } from "foldkit-mixins/theme";
+import * as Mount from "foldkit/mount";
+import { Effect, Match, Option, Queue, Schema, Stream } from "effect";
+import { CellEditor, Clipboard, Columns, Fill, GridFocus, GridSelection, GridViewport, RowCount, RowStatus, VirtualGrid, addressableRows } from "foldkit-data-grid";
+import { Move } from "foldkit-primitives/dom";
+//#region src/slots.ts
+const AriaRowCount = Attr.make("aria-rowcount");
+const AriaColCount = Attr.make("aria-colcount");
+const AriaRowIndex = Attr.make("aria-rowindex");
+const AriaColIndex = Attr.make("aria-colindex");
+const AriaActiveDescendant = Attr.make("aria-activedescendant");
+const Tabindex = Attr.make("tabindex");
+const AriaValueNow = Attr.make("aria-valuenow");
+const AriaValueMin = Attr.make("aria-valuemin");
+const AriaValueMax = Attr.make("aria-valuemax");
+const Id = Attr.make("id");
+const MouseDown = Event.make("mousedown");
+const AriaHasPopup = Attr.make("aria-haspopup");
+const geometry = [
+	"boxSizing",
+	"width",
+	"height",
+	"minWidth",
+	"maxWidth",
+	"flex",
+	"position",
+	"insetInlineStart",
+	"insetInlineEnd",
+	"top"
+];
+const GridSlots = Slots.define({
+	/** The scroll container: `role="grid"`, the one tab stop, and the keyboard. */
+	root: Slot.make({
+		capability: Capability.Focusable,
+		events: [Event.KeyDown],
+		attributes: [
+			Attr.Role,
+			Attr.AriaLabel,
+			AriaRowCount,
+			AriaColCount,
+			AriaActiveDescendant
+		],
+		protected: {
+			events: [Event.KeyDown],
+			attributes: [
+				Attr.Role,
+				Tabindex,
+				Id,
+				AriaRowCount,
+				AriaColCount,
+				AriaActiveDescendant
+			],
+			style: ["overflow", "position"]
+		}
+	}),
+	/** The header row's group; it stays at the top while the body scrolls. */
+	header: Slot.make({
+		capability: Capability.Container,
+		protected: {
+			attributes: [Attr.Role],
+			style: ["position", "top"]
+		}
+	}),
+	headerRow: Slot.make({
+		capability: Capability.Container,
+		protected: {
+			attributes: [Attr.Role, AriaRowIndex],
+			style: geometry
+		}
+	}),
+	/**
+	* One per drawn column. `data-pinned` is `start` or `end` on a pinned
+	* column; while a header is dragged it has `data-dragging` and follows the
+	* pointer by a `transform`, and the shown neighbour it would land beside
+	* has `data-drop`, `before` or `after`.
+	*/
+	headerCell: Slot.make({
+		capability: Capability.Base,
+		protected: {
+			attributes: [Attr.Role, AriaColIndex],
+			style: [...geometry, "transform"]
+		}
+	}),
+	/**
+	* A column's resize handle at its end edge: a `role="separator"` with its
+	* width as `aria-valuenow`, dragged with the pointer, or stepped with the
+	* arrow keys once focused. It is out of the tab order, so the grid stays
+	* one tab stop. Only resizable columns have one.
+	*/
+	resizeHandle: Slot.make({
+		capability: Capability.Focusable,
+		events: [Event.KeyDown],
+		protected: {
+			events: [Event.KeyDown],
+			attributes: [
+				Attr.Role,
+				Tabindex,
+				AriaValueNow,
+				AriaValueMin,
+				AriaValueMax
+			],
+			style: [
+				"position",
+				"insetInlineEnd",
+				"top",
+				"bottom"
+			]
+		}
+	}),
+	body: Slot.make({
+		capability: Capability.Container,
+		protected: {
+			attributes: [Attr.Role],
+			style: geometry
+		}
+	}),
+	/** One per drawn row; `aria-rowindex` is its place among every row, drawn or not. */
+	row: Slot.make({
+		capability: Capability.Container,
+		protected: {
+			attributes: [Attr.Role, AriaRowIndex],
+			style: geometry
+		}
+	}),
+	/** One per drawn cell; `data-focused` marks the current one, `data-pinned` a pinned one. */
+	cell: Slot.make({
+		capability: Capability.Base,
+		events: [MouseDown],
+		protected: {
+			events: [MouseDown],
+			attributes: [
+				Attr.Role,
+				Id,
+				AriaColIndex
+			],
+			style: geometry
+		}
+	}),
+	/** A row counted but not loaded yet, drawn at its height for a skeleton to style. */
+	placeholder: Slot.make({
+		capability: Capability.Base,
+		protected: { style: ["height", "width"] }
+	}),
+	/**
+	* The text field a cell is edited in, drawn in place of its content while
+	* the edit lasts; `aria-invalid` when the column refused the draft.
+	*/
+	editor: Slot.make({
+		capability: Capability.TextInput,
+		events: [
+			Event.Input,
+			Event.KeyDown,
+			Event.Blur
+		],
+		protected: { events: [
+			Event.Input,
+			Event.KeyDown,
+			Event.Blur
+		] }
+	}),
+	/**
+	* Why the column refused a draft, shown below the field while the edit
+	* lasts; the field names it with `aria-describedby`.
+	*/
+	editorError: Slot.make({ capability: Capability.Base }),
+	/**
+	* The editor of a column whose schema's text is one of a few literals,
+	* drawn in place of the cell's content while the edit lasts, like
+	* `editor`: a `role="combobox"` showing the draft, its options in
+	* `choiceList` (or, with `choiceEditor: 'native'`, a `select`).
+	*/
+	choice: Slot.make({
+		capability: Capability.Focusable,
+		events: [
+			Event.Change,
+			Event.KeyDown,
+			Event.Blur
+		],
+		protected: {
+			events: [
+				Event.Change,
+				Event.KeyDown,
+				Event.Blur
+			],
+			attributes: [
+				Attr.Role,
+				Tabindex,
+				AriaActiveDescendant
+			]
+		}
+	}),
+	/**
+	* A choice's options, `role="listbox"`, below the cell, or above it when
+	* the cell is low in the view (`data-place="above"`).
+	*/
+	choiceList: Slot.make({
+		capability: Capability.Base,
+		protected: {
+			attributes: [Attr.Role, Id],
+			style: ["position"]
+		}
+	}),
+	/** One literal a `choice` offers: `role="option"`, `aria-selected` on the draft. */
+	choiceOption: Slot.make({
+		capability: Capability.Base,
+		events: [Event.Click],
+		protected: {
+			events: [Event.Click],
+			attributes: [Attr.Role, Id]
+		}
+	}),
+	/** Said in place of rows when there are none: empty, loading, or failed. */
+	status: Slot.make({ capability: Capability.Base }),
+	/**
+	* The button on a column's header that opens its menu, when the view is
+	* given `columnMenu`: `aria-haspopup="menu"` and `aria-expanded`, out of
+	* the tab order like the grid's other controls.
+	*/
+	menuButton: Slot.make({
+		capability: Capability.Interactive,
+		events: [Event.Click],
+		attributes: [Attr.AriaLabel],
+		protected: {
+			events: [Event.Click],
+			attributes: [
+				AriaHasPopup,
+				Attr.AriaExpanded,
+				Tabindex
+			]
+		}
+	}),
+	/**
+	* A column's open menu, below its header: a `role="menu"` that takes focus
+	* and points at its active item with `aria-activedescendant`, as the grid
+	* points at its cell. Focus leaving it closes it.
+	*/
+	menu: Slot.make({
+		capability: Capability.Focusable,
+		events: [Event.KeyDown],
+		protected: {
+			events: [Event.KeyDown],
+			attributes: [
+				Attr.Role,
+				Tabindex,
+				AriaActiveDescendant
+			],
+			style: ["position"]
+		}
+	}),
+	/** One of a menu's items; `data-active` marks the one the keyboard is on. */
+	menuItem: Slot.make({
+		capability: Capability.Base,
+		events: [Event.Click],
+		protected: {
+			events: [Event.Click],
+			attributes: [Attr.Role, Id]
+		}
+	}),
+	/**
+	* The button on a sortable column's header: a click sends its sort Message.
+	* `data-sort` is `asc` or `desc` while the column is sorted.
+	*/
+	sort: Slot.make({
+		capability: Capability.Interactive,
+		events: [Event.Click]
+	}),
+	/**
+	* The square at the end corner of the range, or of the focused cell, in a
+	* grid that edits: dragged, it fills the cells it is drawn over. Pointer
+	* only and hidden from assistive technology; Ctrl+D and Ctrl+R fill by key.
+	*/
+	fillHandle: Slot.make({
+		capability: Capability.Base,
+		protected: { style: [
+			"position",
+			"insetInlineEnd",
+			"insetBlockEnd"
+		] }
+	}),
+	/** Below the rows: a failure that left them on screen, and the More button. */
+	footer: Slot.make({ capability: Capability.Container }),
+	retry: Slot.make({
+		capability: Capability.Interactive,
+		events: [Event.Click]
+	}),
+	more: Slot.make({
+		capability: Capability.Interactive,
+		events: [Event.Click]
+	})
+});
+//#endregion
+//#region src/style.ts
+/**
+* The grid's default look, for a page that ships `foldkit-mixins/theme`'s
+* tokens and palette. It only paints: the geometry the virtual window
+* depends on is the view's, and the slots refuse a Style that sets it.
+*/
+/** The tokens the grid's styles draw with; the marks' too (`marks.ts`). */
+const ref = Theme.ref(Theme.compose(Theme.tokens, Theme.oklch({ accent: {
+	h: 0,
+	c: 0,
+	l: "50%"
+} })));
+const line = `${ref.border.thin} solid ${ref.outline.subtle}`;
+const faint = `${ref.border.thin} solid color-mix(in oklch, ${ref.outline.subtle} 55%, transparent)`;
+const pinnedEdge = [Style.nest("&[data-pinned-edge=\"start\"]", { borderInlineEnd: `${ref.border.thick} solid ${ref.outline.default}` }), Style.nest("&[data-pinned-edge=\"end\"]", { borderInlineStart: `${ref.border.thick} solid ${ref.outline.default}` })];
+const padlock = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2h.5A1.5 1.5 0 0 1 13 8.5v5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13.5v-5A1.5 1.5 0 0 1 4.5 7H5zm1.5 0h3V5a1.5 1.5 0 0 0-3 0v2z'/%3E%3C/svg%3E")`;
+const field = Style.self({
+	background: ref.surface.base,
+	border: "none",
+	caretColor: ref.outline.focus,
+	color: "inherit",
+	font: "inherit",
+	outline: `${ref.border.thick} solid ${ref.outline.focus}`,
+	outlineOffset: `calc(-1 * ${ref.border.thick})`,
+	paddingInline: ref.space.sm
+});
+const refused = Style.nest("&[aria-invalid=\"true\"]", {
+	outlineColor: ref.error.default,
+	caretColor: ref.error.default
+});
+/** Every piece is in the `components` layer, so an application's own layer wins. */
+const GridStyle = Style.forSlots(GridSlots)({
+	root: Style.compose(Style.self({
+		background: ref.surface.base,
+		color: ref.text.default,
+		fontVariantNumeric: "tabular-nums"
+	}), Style.pseudo(":focus-visible", { outline: `${ref.border.thick} solid ${ref.outline.focus}` })),
+	header: Style.self({
+		zIndex: "2",
+		background: ref.surface.muted
+	}),
+	headerCell: Style.compose(Style.self({
+		alignItems: "center",
+		background: ref.surface.muted,
+		borderBlockEnd: line,
+		display: "flex",
+		fontSize: ref.size.sm,
+		fontWeight: ref.weight.semibold,
+		paddingInline: ref.space.sm,
+		whiteSpace: "nowrap",
+		userSelect: "none"
+	}), Style.nest("&[data-pinned]", { zIndex: "1" }), ...pinnedEdge, Style.nest("&[aria-readonly=\"true\"]::before", {
+		background: ref.text.muted,
+		content: "\"\"",
+		flex: "none",
+		height: "0.75em",
+		marginInlineEnd: ref.space["2xs"],
+		mask: `${padlock} center / contain no-repeat`,
+		width: "0.75em"
+	}), Style.nest("&[data-dragging]", {
+		zIndex: "3",
+		background: ref.surface.default,
+		opacity: "0.9",
+		cursor: "grabbing"
+	}), Style.nest("&[data-drop=\"before\"]", { borderInlineStart: `${ref.border.thick} solid ${ref.outline.focus}` }), Style.nest("&[data-drop=\"after\"]", { borderInlineEnd: `${ref.border.thick} solid ${ref.outline.focus}` })),
+	cell: Style.compose(Style.self({
+		alignItems: "center",
+		borderBlockEnd: line,
+		borderInlineEnd: faint,
+		display: "flex",
+		overflow: "hidden",
+		paddingInline: ref.space.sm,
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	}), Style.nest("&[data-pinned]", {
+		background: ref.surface.base,
+		zIndex: "1"
+	}), ...pinnedEdge, Style.nest("&[data-editable]", { cursor: "text" }), Style.nest("&[aria-readonly=\"true\"]", {
+		color: ref.text.muted,
+		cursor: "default"
+	}), Style.nest("&[data-editing]", {
+		boxShadow: ref.shadow.md,
+		overflow: "visible",
+		paddingInline: "0",
+		zIndex: "2"
+	}), Style.nest("&[data-focused=\"true\"]", {
+		outline: `${ref.border.thick} solid ${ref.outline.focus}`,
+		outlineOffset: `calc(-1 * ${ref.border.thick})`
+	}), Style.nest("&[data-fill=\"target\"]", {
+		outline: `${ref.border.thin} dashed ${ref.outline.focus}`,
+		outlineOffset: `calc(-1 * ${ref.border.thin})`
+	}), Style.nest("&[data-mark]", { backgroundImage: `radial-gradient(circle at calc(100% - 6px) 6px, ${ref.outline.focus} 3px, transparent 3.5px)` })),
+	editor: Style.compose(field, refused),
+	choice: Style.compose(field, refused, Style.self({
+		display: "flex",
+		alignItems: "center",
+		cursor: "default"
+	})),
+	choiceList: Style.compose(Style.self({
+		zIndex: "3",
+		minWidth: "100%",
+		maxHeight: "16rem",
+		overflowY: "auto",
+		margin: "0",
+		padding: ref.space["3xs"],
+		listStyle: "none",
+		background: ref.surface.base,
+		border: `${ref.border.thin} solid ${ref.outline.default}`,
+		borderRadius: ref.radius.md,
+		boxShadow: ref.shadow.lg
+	})),
+	choiceOption: Style.compose(Style.self({
+		padding: `${ref.space["2xs"]} ${ref.space.sm}`,
+		borderRadius: ref.radius.sm,
+		cursor: "pointer",
+		whiteSpace: "nowrap"
+	}), Style.nest("&:hover", { background: ref.surface.subtle }), Style.nest("&[aria-selected=\"true\"]", {
+		background: ref.accent.subtle,
+		color: ref.accent.ink
+	}), Style.media("(pointer: coarse)", {
+		minHeight: "44px",
+		display: "flex",
+		alignItems: "center"
+	})),
+	editorError: Style.self({
+		background: ref.error.default,
+		borderRadius: ref.radius.md,
+		boxShadow: ref.shadow.lg,
+		color: ref.error["on-fill"],
+		fontSize: ref.size.xs,
+		fontWeight: ref.weight.medium,
+		insetInlineStart: "0",
+		paddingBlock: ref.space["3xs"],
+		paddingInline: ref.space.xs,
+		pointerEvents: "none",
+		position: "absolute",
+		top: `calc(100% + ${ref.space["3xs"]})`,
+		whiteSpace: "nowrap",
+		zIndex: "5"
+	}),
+	resizeHandle: Style.compose(Style.self({ background: `linear-gradient(to right, transparent calc(100% - 1px), color-mix(in oklch, ${ref.outline.subtle} 70%, transparent) calc(100% - 1px))` }), Style.pseudo(":hover", { background: `linear-gradient(to right, transparent calc(100% - 2px), ${ref.outline.focus} calc(100% - 2px))` })),
+	fillHandle: Style.self({
+		width: "7px",
+		height: "7px",
+		background: ref.outline.focus,
+		border: `1px solid ${ref.surface.base}`,
+		cursor: "crosshair",
+		zIndex: "3"
+	}),
+	menuButton: Style.compose(Style.self({
+		background: "none",
+		border: "none",
+		color: ref.text.muted,
+		cursor: "pointer",
+		marginInlineStart: "auto",
+		paddingInline: ref.space.xs
+	}), Style.nest("&[aria-expanded=\"true\"]", { color: ref.text.default })),
+	menu: Style.compose(Style.self({
+		background: ref.surface.base,
+		border: line,
+		borderRadius: ref.radius.md,
+		fontWeight: ref.weight.normal,
+		minWidth: "10rem",
+		paddingBlock: ref.space.xs,
+		zIndex: "4"
+	}), Style.pseudo(":focus-visible", { outline: `${ref.border.thick} solid ${ref.outline.focus}` })),
+	menuItem: Style.compose(Style.self({
+		cursor: "pointer",
+		paddingBlock: ref.space.xs,
+		paddingInline: ref.space.sm
+	}), Style.nest("&[data-active=\"true\"]", { background: ref.surface.muted })),
+	sort: Style.compose(Style.self({
+		alignItems: "center",
+		background: "none",
+		border: "none",
+		color: "inherit",
+		cursor: "pointer",
+		display: "inline-flex",
+		font: "inherit",
+		gap: ref.space.xs,
+		minWidth: "0",
+		overflow: "hidden",
+		padding: "0",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	}), Style.nest("&::after", {
+		borderBlockEnd: `1.5px solid currentColor`,
+		borderInlineEnd: `1.5px solid currentColor`,
+		content: "\"\"",
+		flex: "none",
+		height: "0.4em",
+		opacity: "0",
+		transform: "translateY(-0.15em) rotate(45deg)",
+		transition: `opacity ${ref.motion.fast} ${ref.motion.ease}, transform ${ref.motion.fast} ${ref.motion.ease}`,
+		width: "0.4em"
+	}), Style.nest("&:hover::after", { opacity: "0.35" }), Style.nest("&[data-sort=\"desc\"]::after", { opacity: "1" }), Style.nest("&[data-sort=\"asc\"]::after", {
+		opacity: "1",
+		transform: "translateY(0.1em) rotate(-135deg)"
+	})),
+	placeholder: Style.self({ background: ref.surface.subtle }),
+	status: Style.self({
+		color: ref.text.muted,
+		padding: ref.space.md
+	})
+}, { layer: Layers.standard.layer("components") });
+//#endregion
+//#region src/nearEnd.ts
+const NearEnd = Schema.TaggedStruct("NearEnd", {});
+/** How far ahead of the end the next rows are asked for, so they arrive before they are needed. */
+const ahead = "200px";
+/**
+* The element coming within 200px of the grid's visible box: one report each
+* time it comes in, measured against the scroll container it sits in, not
+* the page. Not `watching` (a load in flight), or no observer (SSR, an old
+* browser), it reports nothing.
+*/
+const Nearing = Mount.defineStream("DataGridNearEnd", {
+	args: { watching: Schema.Boolean },
+	messages: [NearEnd],
+	execute: ({ element, watching }) => Stream.callback((queue) => Effect.gen(function* () {
+		const Observer = globalThis.IntersectionObserver;
+		if (!watching || Observer === void 0) return;
+		yield* Effect.acquireRelease(Effect.sync(() => {
+			const observer = new Observer((entries) => {
+				if (entries.some((entry) => entry.isIntersecting)) Queue.offerUnsafe(queue, NearEnd.make({}));
+			}, {
+				root: element.closest("[role=\"grid\"]"),
+				rootMargin: ahead
+			});
+			observer.observe(element);
+			return observer;
+		}), (observer) => Effect.sync(() => observer.disconnect()));
+	}))
+});
+//#endregion
+//#region src/fillDrag.ts
+const FillDragStarted = Schema.TaggedStruct("FillDragStarted", {});
+const FillDraggedOver = Schema.TaggedStruct("FillDraggedOver", { 
+/** The DOM id of the gridcell under the pointer. */
+cell: Schema.String });
+const FillDragEnded = Schema.TaggedStruct("FillDragEnded", { 
+/** `false` when the pointer was cancelled or capture was lost. */
+completed: Schema.Boolean });
+/** The attribute that marks the fill handle, which the body's listener looks for. */
+const fillHandleAttribute = "data-fill-handle";
+/** How far a press moves before it is a fill, so a stray click fills nothing. */
+const threshold$1 = 4;
+/** How near the grid's edge the pointer brings a scroll, and the fastest step a frame. */
+const edge$1 = 24;
+const fastest = 20;
+/**
+* The fill handle dragged with the pointer, from the element that holds the
+* grid's cells, so the drag outlives the handle's own cell scrolling out of
+* the window. A press on the handle is kept from the cells (a press there
+* would select one instead). Once it has moved 4px the pointer is captured,
+* so the cell under it is found by where it is (`elementFromPoint`), not by
+* the event's target, which capture makes this element. While the pointer is
+* within 24px of the grid's edge, or past it, the grid scrolls toward it. The
+* listeners that follow the pointer, and the scroll, live for one press.
+*
+* Returns the cleanup, and whether a click now is the one a drag ended with.
+*/
+const fillDragOn = (element, offer) => {
+	const page = element.ownerDocument;
+	const view = page.defaultView;
+	let press = Option.none();
+	let dragEnded = false;
+	const pointerOf = (event) => event.pointerId ?? 0;
+	const grid = () => Option.fromNullishOr(element.closest("[role=\"grid\"]"));
+	const probe = ({ x, y }) => Option.match(grid(), {
+		onNone: () => ({
+			x,
+			y,
+			toward: {
+				x,
+				y
+			}
+		}),
+		onSome: (box) => {
+			const rect = box.getBoundingClientRect();
+			const header = box.querySelector("[role=\"row\"][aria-rowindex=\"1\"]");
+			const top = header === null ? rect.top : header.getBoundingClientRect().bottom;
+			const clamp = (at, from, to) => Math.max(from, Math.min(to, at));
+			const right = rect.left + box.clientWidth - 2;
+			const bottom = rect.top + box.clientHeight - 2;
+			return {
+				x: clamp(x, rect.left + 1, right),
+				y: clamp(y, top + 1, bottom),
+				toward: {
+					x: (rect.left + right) / 2,
+					y: (top + bottom) / 2
+				}
+			};
+		}
+	});
+	const cellAt = ({ x, y, toward }) => {
+		const steps = 48;
+		for (let step = 0; step <= steps; step++) {
+			const found = page.elementFromPoint(x + (toward.x - x) * step / steps, y + (toward.y - y) * step / steps)?.closest("[role=\"gridcell\"]");
+			if (found !== null && found !== void 0 && found.id !== "") return Option.some(found.id);
+		}
+		return Option.none();
+	};
+	const report = (current) => {
+		const found = cellAt(probe(current.at));
+		if (Option.isNone(found) || found.value === current.over) return;
+		current.over = found.value;
+		offer(FillDraggedOver.make({ cell: found.value }));
+	};
+	const stepOf = (at, start, end) => {
+		if (at < start + edge$1) return Math.max(-20, at - (start + edge$1));
+		if (at > end - edge$1) return Math.min(fastest, at - (end - edge$1));
+		return 0;
+	};
+	const scroll = (current) => {
+		current.frame = Option.none();
+		Option.match(grid(), {
+			onNone: () => {},
+			onSome: (box) => {
+				const rect = box.getBoundingClientRect();
+				const down = stepOf(current.at.y, rect.top, rect.bottom);
+				const across = stepOf(current.at.x, rect.left, rect.right);
+				if (down === 0 && across === 0) return;
+				report(current);
+				box.scrollBy(across, down);
+				if (view !== null) current.frame = Option.some(view.requestAnimationFrame(() => scroll(current)));
+			}
+		});
+	};
+	const release = (current) => {
+		page.removeEventListener("pointermove", onMove);
+		page.removeEventListener("pointerup", onUp);
+		page.removeEventListener("pointercancel", onCancel);
+		element.removeEventListener("lostpointercapture", onCancel);
+		if (Option.isSome(current.frame)) view?.cancelAnimationFrame(current.frame.value);
+		current.frame = Option.none();
+		if (!current.dragging) return;
+		try {
+			element.releasePointerCapture(current.pointerId);
+		} catch {}
+	};
+	const finish = (event, completed) => {
+		const found = Option.filter(press, (current) => current.pointerId === pointerOf(event));
+		if (Option.isNone(found)) return;
+		press = Option.none();
+		release(found.value);
+		if (!found.value.dragging) return;
+		dragEnded = true;
+		view?.setTimeout(() => dragEnded = false, 0);
+		offer(FillDragEnded.make({ completed }));
+	};
+	const onUp = (event) => finish(event, true);
+	const onCancel = (event) => finish(event, false);
+	const onMove = (event) => {
+		const found = Option.filter(press, (current) => current.pointerId === pointerOf(event));
+		if (Option.isNone(found)) return;
+		const current = found.value;
+		const pointer = event;
+		current.at = {
+			x: pointer.clientX ?? 0,
+			y: pointer.clientY ?? 0
+		};
+		if (!current.dragging) {
+			if (Math.max(Math.abs(current.at.x - current.x), Math.abs(current.at.y - current.y)) < threshold$1) return;
+			current.dragging = true;
+			try {
+				element.setPointerCapture(current.pointerId);
+			} catch {}
+			offer(FillDragStarted.make({}));
+		}
+		report(current);
+		if (Option.isNone(current.frame)) scroll(current);
+	};
+	const onDown = (event) => {
+		const pointer = event;
+		const from = event.target;
+		if (!(from instanceof Element) || from.closest(`[data-fill-handle]`) === null) return;
+		event.stopPropagation();
+		if ((pointer.button ?? 0) !== 0 || Option.isSome(press)) return;
+		event.preventDefault();
+		const x = pointer.clientX ?? 0;
+		const y = pointer.clientY ?? 0;
+		press = Option.some({
+			pointerId: pointerOf(event),
+			x,
+			y,
+			at: {
+				x,
+				y
+			},
+			dragging: false,
+			over: "",
+			frame: Option.none()
+		});
+		page.addEventListener("pointermove", onMove);
+		page.addEventListener("pointerup", onUp);
+		page.addEventListener("pointercancel", onCancel);
+		element.addEventListener("lostpointercapture", onCancel);
+	};
+	element.addEventListener("pointerdown", onDown);
+	return {
+		dispose: () => {
+			element.removeEventListener("pointerdown", onDown);
+			if (Option.isSome(press)) release(press.value);
+			press = Option.none();
+		},
+		owns: (event) => dragEnded || event.target instanceof Element && event.target.closest(`[data-fill-handle]`) !== null
+	};
+};
+//#endregion
+//#region src/holdFocus.ts
+/**
+* Focuses what the grid draws over itself while it is open (a cell's editor,
+* with the caret after its text, or a column's menu) and hands focus back to
+* the grid when it goes, so closing it leaves the keyboard on the grid rather
+* than on the page's body. Focus the user moved elsewhere stays there. A
+* choice's `select` also opens its list, so a double-click on the cell shows
+* the choices at once rather than asking for another click.
+*/
+const HoldFocus = Mount.defineStream("DataGridHoldFocus", {
+	messages: [Schema.Never],
+	execute: ({ element }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		const editor = element;
+		const grid = element.closest("[role=\"grid\"]");
+		editor.focus?.();
+		const end = editor.value?.length ?? 0;
+		editor.setSelectionRange?.(end, end);
+		if (element.tagName === "SELECT") try {
+			editor.showPicker?.();
+		} catch {}
+		return grid;
+	}), (grid) => Effect.sync(() => {
+		const active = typeof document === "undefined" ? null : document.activeElement;
+		if (active === null || active === element || active === document.body) grid?.focus?.();
+	})))
+});
+//#endregion
+//#region src/keepFocus.ts
+/**
+* Keeps focus where it is when a press lands on the element: a choice's list
+* sits beside its combobox, so a press on an option would otherwise blur the
+* combobox, which commits the old draft before the option's click arrives.
+* Attached only while the list is open.
+*/
+const KeepFocus = Mount.defineStream("DataGridKeepFocus", {
+	messages: [Schema.Never],
+	execute: ({ element }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		const keep = (event) => event.preventDefault();
+		element.addEventListener("mousedown", keep);
+		return keep;
+	}), (keep) => Effect.sync(() => element.removeEventListener("mousedown", keep))))
+});
+//#endregion
+//#region src/headerDrag.ts
+const HeaderDragStarted = Schema.TaggedStruct("HeaderDragStarted", { 
+/** The dragged columnheader's DOM id. */
+header: Schema.String });
+const HeaderDragged = Schema.TaggedStruct("HeaderDragged", { 
+/** From where the pointer went down, in CSS pixels. */
+deltaX: Schema.Number });
+const HeaderDragEnded = Schema.TaggedStruct("HeaderDragEnded", { 
+/** `false` when the pointer was cancelled or capture was lost. */
+completed: Schema.Boolean });
+/** How far a press moves before it is a drag, so a click on a header stays a click. */
+const threshold = 4;
+/**
+* Column headers dragged with the pointer, from one listener on the row that
+* holds them. A press on a header becomes a drag once it has moved 4px, and
+* only then is the pointer captured, so a click (on a sort button, say) stays
+* a click. A press on a resize handle, or in a column's open menu, is not a
+* drag. The listeners that
+* follow the pointer are attached for the length of a press. Where a drag
+* lands is the grid's update.
+*/
+const HeaderDrag = Mount.defineStream("DataGridHeaderDrag", {
+	messages: [
+		HeaderDragStarted,
+		HeaderDragged,
+		HeaderDragEnded
+	],
+	execute: ({ element }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const page = element.ownerDocument;
+		let press = Option.none();
+		const offer = (fact) => Queue.offerUnsafe(queue, fact);
+		const swallow = (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		};
+		const release = (current) => {
+			page.removeEventListener("pointermove", onMove);
+			page.removeEventListener("pointerup", onUp);
+			page.removeEventListener("pointercancel", onCancel);
+			element.removeEventListener("lostpointercapture", onCancel);
+			if (!current.dragging) return;
+			try {
+				element.releasePointerCapture(current.pointerId);
+			} catch {}
+		};
+		const pressOf = (event) => Option.filter(press, (current) => current.pointerId === (event.pointerId ?? 0));
+		const finish = (event, completed) => {
+			const found = pressOf(event);
+			if (Option.isNone(found)) return;
+			const current = found.value;
+			press = Option.none();
+			release(current);
+			if (!current.dragging) return;
+			offer(HeaderDragEnded.make({ completed }));
+			element.addEventListener("click", swallow, {
+				capture: true,
+				once: true
+			});
+			setTimeout(() => element.removeEventListener("click", swallow, true), 0);
+		};
+		const onUp = (event) => finish(event, true);
+		const onCancel = (event) => finish(event, false);
+		const onMove = (event) => {
+			const found = pressOf(event);
+			if (Option.isNone(found)) return;
+			const current = found.value;
+			const deltaX = (event.clientX ?? 0) - current.x;
+			if (!current.dragging) {
+				if (Math.abs(deltaX) < threshold) return;
+				current.dragging = true;
+				try {
+					element.setPointerCapture(current.pointerId);
+				} catch {}
+				offer(HeaderDragStarted.make({ header: current.header }));
+			}
+			offer(HeaderDragged.make({ deltaX }));
+		};
+		const onDown = (event) => {
+			const pointer = event;
+			const from = event.target;
+			if ((pointer.button ?? 0) !== 0 || Option.isSome(press)) return;
+			if (!(from instanceof Element) || from.closest("[role=\"separator\"], [role=\"menu\"]")) return;
+			const header = from.closest("[role=\"columnheader\"]");
+			if (header === null || !element.contains(header) || header.id === "") return;
+			press = Option.some({
+				pointerId: pointer.pointerId ?? 0,
+				x: pointer.clientX ?? 0,
+				header: header.id,
+				dragging: false
+			});
+			page.addEventListener("pointermove", onMove);
+			page.addEventListener("pointerup", onUp);
+			page.addEventListener("pointercancel", onCancel);
+			element.addEventListener("lostpointercapture", onCancel);
+		};
+		element.addEventListener("pointerdown", onDown);
+		return {
+			onDown,
+			current: () => press,
+			release
+		};
+	}), ({ onDown, current, release }) => Effect.sync(() => {
+		element.removeEventListener("pointerdown", onDown);
+		const left = current();
+		if (Option.isSome(left)) release(left.value);
+	})))
+});
+//#endregion
+//#region src/press.ts
+const CellClicked = Schema.TaggedStruct("CellClicked", {
+	/** The clicked gridcell's DOM id. */
+	cell: Schema.String,
+	shiftKey: Schema.Boolean,
+	/** Ctrl, or Meta on a Mac: a toggle. */
+	toggleKey: Schema.Boolean
+});
+/**
+* Clicks on a grid's cells, with their modifier keys, and the fill handle's
+* drag (`fillDragOn`), from listeners on the element that holds the cells
+* rather than one per cell: one Mount, since an element holds one. A click
+* outside a gridcell, on the fill handle, or ending a fill reports nothing;
+* what a click means is the grid's update.
+*/
+const CellPress = Mount.defineStream("DataGridCellPress", {
+	messages: [
+		CellClicked,
+		FillDragStarted,
+		FillDraggedOver,
+		FillDragEnded
+	],
+	execute: ({ element }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const fill = fillDragOn(element, (fact) => Queue.offerUnsafe(queue, fact));
+		const listener = (event) => {
+			if (fill.owns(event)) return;
+			const from = event.target;
+			if (!(from instanceof Element)) return;
+			const cell = from.closest("[role=\"gridcell\"]");
+			if (cell === null || !element.contains(cell) || cell.id === "") return;
+			const modified = event;
+			Queue.offerUnsafe(queue, CellClicked.make({
+				cell: cell.id,
+				shiftKey: modified.shiftKey === true,
+				toggleKey: modified.ctrlKey === true || modified.metaKey === true
+			}));
+		};
+		element.addEventListener("click", listener);
+		return {
+			listener,
+			fill
+		};
+	}), ({ listener, fill }) => Effect.sync(() => {
+		element.removeEventListener("click", listener);
+		fill.dispose();
+	})))
+});
+//#endregion
+//#region 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) => h.input(slots.editor.attrs([
+				...shared,
+				h.Type("text"),
+				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"))],
+					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;
+//#endregion
+//#region src/moreOnScroll.ts
+/**
+* Sends the grid's `onMore` as its More button comes within 200px of the
+* grid's visible box, and again after each load while the button stays
+* there; the button stays for the keyboard. Nothing is asked while the rows'
+* source is busy. Attach it to a grid's view:
+* `DataGridView<Message>().define(Grid).pipe(MoreOnScroll)`.
+*/
+const MoreOnScroll = (view) => Behavior.attach(Behavior.forSlots(GridSlots)({ more: Behavior.slot({ mount: (input) => Mount.mapMessage(Nearing({ watching: !isBusy(input.status) }), () => input.onMore) }) }, { name: "MoreOnScroll" }))(view);
+//#endregion
+//#region src/marks.ts
+/**
+* The marks an editable grid over a server shows on a cell, by name, styled
+* on the theme's tokens, with a legend drawn from the same rules: an edit not
+* sent, one saved that the read rows do not show yet, one the server refused,
+* one another device's later edit replaced, and another device's focus.
+* `CellMark.name` stays any string; these are the shared ones.
+*/
+const GridMarks = [
+	"pending",
+	"saved",
+	"refused",
+	"replaced",
+	"peer"
+];
+/** A dot in the top end corner, filled or hollow: an edit on its way. */
+const dot = (color, hollow) => ({ backgroundImage: hollow ? `radial-gradient(circle at calc(100% - 6px) 6px, transparent 2px, ${color} 2.5px, ${color} 3.5px, transparent 4px)` : `radial-gradient(circle at calc(100% - 6px) 6px, ${color} 3px, transparent 3.5px)` });
+/** A 2px inset edge, and a ground: something that needs reading. */
+const edge = (color, ground) => ({
+	backgroundImage: "none",
+	boxShadow: `inset 0 0 0 ${ref.border.thick} ${color}`,
+	...ground === void 0 ? {} : { background: ground }
+});
+const looks = {
+	pending: dot(ref.info.default, false),
+	saved: dot(ref.success.ink, true),
+	refused: edge(ref.error.ink, ref.error.subtle),
+	replaced: edge(ref.warning.ink),
+	peer: edge(`var(--fk-grid-peer, ${ref.secondary.default})`, ref.secondary.subtle)
+};
+/** Each mark's rule on an element carrying `data-mark`, and an outline where colour is forced. */
+const marked = Style.compose(...GridMarks.map((mark) => Style.nest(`&[data-mark="${mark}"]`, looks[mark])), Style.at("@media (forced-colors: active)", Style.nest("&[data-mark]", { outline: `${ref.border.thick} solid CanvasText` })));
+const GridLegendSlots = Slots.define({
+	/** The list: labelled, so a screen reader names what the marks are. */
+	legend: Slot.make({ attributes: [Attr.AriaLabel] }),
+	/** One mark and its words. */
+	legendItem: Slot.make({}),
+	/** The mark drawn small, as the cells draw it (`data-mark`), hidden from screen readers. */
+	legendSwatch: Slot.make({})
+});
+const words = {
+	label: "What the marks on a cell mean",
+	marks: {
+		pending: "Not sent yet",
+		saved: "Saved, not yet in the table",
+		refused: "Not saved",
+		replaced: "Replaced by another device",
+		peer: "Another device is here"
+	}
+};
+/**
+* A legend of the marks, each beside a swatch drawn by the same rules as the
+* cells (`GridMarkStyle` styles both), so the two cannot drift apart.
+*/
+const GridLegend = () => SlotView.forMessages().define(GridLegendSlots, (input, slots, h) => {
+	const said = input.words ?? words;
+	return h.ul(slots.legend.attrs([h.AriaLabel(said.label)]), (input.marks ?? GridMarks).map((mark) => h.li(slots.legendItem.attrs([]), [h.span(slots.legendSwatch.attrs([h.DataAttribute("mark", mark), h.AriaHidden(true)]), []), said.marks[mark]])));
+});
+/** The marks on the grid's cells. Attach after `GridStyle`, whose plain dot it replaces by name. */
+const GridMarkStyle = Style.forSlots(GridSlots)({ cell: marked }, { layer: Layers.standard.layer("components") });
+/** The legend's look, its swatches drawn by the cells' own rules. */
+const GridLegendStyle = Style.forSlots(GridLegendSlots)({
+	legend: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: `${ref.space["2xs"]} ${ref.space.md}`,
+		listStyle: "none",
+		margin: "0",
+		padding: "0",
+		fontSize: ref.size.xs,
+		color: ref.text.muted
+	},
+	legendItem: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: ref.space.xs
+	},
+	legendSwatch: Style.compose(Style.inline({
+		display: "inline-block",
+		width: "12px",
+		height: "12px",
+		borderRadius: ref.radius.xs
+	}), marked)
+}, { layer: Layers.standard.layer("components") });
+//#endregion
+export { DataGridView, GridLegend, GridLegendSlots, GridLegendStyle, GridMarkStyle, GridMarks, GridSlots, GridStyle, MoreOnScroll };
+
+//# sourceMappingURL=index.mjs.map