foldkit-mixins-data-grid 0.2.14 → 0.3.0

package/dist/{index.mjs → view.js}

@@ -1,906 +1,14 @@
-import { Attr, Behavior, Capability, Event, Layers, Slot, SlotView, Slots, Style } from "foldkit-mixins";
-import { Theme } from "foldkit-mixins/theme";
+import { Match, Option } from "effect";
 import * as Mount from "foldkit/mount";
-import { Effect, Match, Option, Queue, Schema, Stream } from "effect";
+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";
-// 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]
-	})
-});
-// 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.standard());
-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 field = Style.compose(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
-}), Style.media("(pointer: coarse)", { fontSize: "max(1rem, 1em)" }));
-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: `${ref.icon.lock} 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))`,
-		WebkitTouchCallout: "none"
-	}), Style.pseudo(":hover", { background: `linear-gradient(to right, transparent calc(100% - 2px), ${ref.outline.focus} calc(100% - 2px))` }), Style.at("@media (pointer: coarse)", Style.nest("&::before", {
-		content: "\"\"",
-		position: "absolute",
-		insetBlock: "0",
-		insetInlineStart: "-12px",
-		insetInlineEnd: "-4px"
-	}))),
-	fillHandle: Style.compose(Style.self({
-		width: "7px",
-		height: "7px",
-		background: ref.outline.focus,
-		border: `1px solid ${ref.surface.base}`,
-		cursor: "crosshair",
-		zIndex: "3",
-		touchAction: "none",
-		WebkitTouchCallout: "none"
-	}), Style.at("@media (pointer: coarse)", Style.nest("&::before", {
-		content: "\"\"",
-		position: "absolute",
-		inset: "-18px"
-	}))),
-	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 calc(${ref.motion.fast} * ${ref.knob.travel}) ${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") });
-// 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()));
-	}))
-});
-// 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
-	};
-};
-// 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?.();
-	})))
-});
-// 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))))
-});
-// 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);
-	})))
-});
-// 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();
-	})))
-});
+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. */
@@ -1748,99 +856,6 @@ define: (grid) => {
 	}, { name: grid.id });
 } });
 const DataGridView = view;
-// 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);
-// 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") });
-export { DataGridView, GridLegend, GridLegendSlots, GridLegendStyle, GridMarkStyle, GridMarks, GridSlots, GridStyle, MoreOnScroll };
+export { DataGridView, isBusy };
 
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=view.js.map