foldkit-primitives 0.2.1 → 0.4.0

package/dist/follow-tab-stop-DpxwLXvU.mjs

@@ -0,0 +1,800 @@
+import { Effect, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+import * as Dom from "foldkit/dom";
+//#region src/dom/focus-scope.ts
+/**
+* A focus scope as a Mount: on insert it remembers what was focused, focuses
+* an initial element inside, and with `contain` keeps Tab and Shift+Tab
+* cycling inside; on unmount it gives focus back. Nothing crosses to the
+* Model: which element had focus is a DOM fact, so this is element lifecycle,
+* not state. It emits no Messages.
+*/
+const FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]",
+	"[contenteditable=\"true\"]"
+].join(", ");
+const isVisible = (element) => {
+	const probe = element;
+	return element.closest("[hidden], [inert]") === null && (probe.checkVisibility?.() ?? true);
+};
+/** Tabbable descendants in DOM order: focusable, visible, and not `tabindex="-1"`. */
+const tabbableWithin = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter((element) => element.tabIndex >= 0 && isVisible(element));
+const focusFirst = (elements) => {
+	const first = elements[0];
+	if (first === void 0) return false;
+	first.focus();
+	return true;
+};
+const FocusScope = Mount.defineStream("FocusScope", {
+	messages: [Schema.Never],
+	args: {
+		/** Keep Tab, Shift+Tab, and a stray focus inside. */
+		contain: Schema.Boolean,
+		/** Give focus back to what had it, on unmount. */
+		restore: Schema.Boolean,
+		/** A selector inside the element to focus first; else the first tabbable
+		*  descendant, else the element itself when it is focusable. */
+		initialFocus: Schema.NullOr(Schema.String)
+	},
+	execute: ({ element, contain, restore, initialFocus }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		const ownerDocument = element.ownerDocument;
+		const previous = ownerDocument.activeElement;
+		const initial = initialFocus === null ? null : element.querySelector(initialFocus);
+		if (initial !== null) initial.focus();
+		else if (!focusFirst(tabbableWithin(element)) && element instanceof HTMLElement) element.focus();
+		const onKeyDown = (event) => {
+			const key = event;
+			if (key.key !== "Tab") return;
+			const tabbable = tabbableWithin(element);
+			const first = tabbable[0];
+			const last = tabbable[tabbable.length - 1];
+			if (first === void 0 || last === void 0) {
+				key.preventDefault();
+				return;
+			}
+			const active = ownerDocument.activeElement;
+			if (key.shiftKey && (active === first || !element.contains(active))) {
+				key.preventDefault();
+				last.focus();
+			} else if (!key.shiftKey && (active === last || !element.contains(active))) {
+				key.preventDefault();
+				first.focus();
+			}
+		};
+		const onFocusIn = (event) => {
+			const target = event.target;
+			if (target instanceof Node && element.contains(target)) return;
+			focusFirst(tabbableWithin(element));
+		};
+		if (contain) {
+			element.addEventListener("keydown", onKeyDown);
+			ownerDocument.addEventListener("focusin", onFocusIn);
+		}
+		return {
+			previous,
+			onKeyDown,
+			onFocusIn,
+			ownerDocument
+		};
+	}), ({ previous, onKeyDown, onFocusIn, ownerDocument }) => Effect.sync(() => {
+		if (contain) {
+			element.removeEventListener("keydown", onKeyDown);
+			ownerDocument.removeEventListener("focusin", onFocusIn);
+		}
+		if (restore && previous instanceof HTMLElement && ownerDocument.contains(previous)) previous.focus();
+	})))
+});
+//#endregion
+//#region src/dom/layers.ts
+/**
+* Two Mounts over Foldkit's own DOM helpers, for an overlay that is not a
+* native `<dialog>` or `popover`:
+*
+* - `ScrollLock` locks the document's scroll while mounted. Foldkit's lock is
+*   refcounted, so nested overlays release it only when the last one goes.
+* - `HideOutside` marks everything outside the element inert while mounted,
+*   through `Dom.inertOthers`, keyed by an id this Mount mints.
+*
+* Both emit no Messages; they are element lifecycle.
+*/
+const ScrollLock = Mount.defineStream("ScrollLock", {
+	messages: [Schema.Never],
+	execute: () => Stream.callback(() => Effect.acquireRelease(Dom.lockScroll, () => Dom.unlockScroll))
+});
+const HIDE_OUTSIDE_ATTRIBUTE = "data-foldkit-plus-hide-outside";
+let minted = 0;
+const HideOutside = Mount.defineStream("HideOutside", {
+	messages: [Schema.Never],
+	execute: ({ element }) => Stream.callback(() => Effect.acquireRelease(Effect.gen(function* () {
+		const id = `hide-outside-${minted += 1}`;
+		element.setAttribute(HIDE_OUTSIDE_ATTRIBUTE, id);
+		yield* Dom.inertOthers(id, [`[${HIDE_OUTSIDE_ATTRIBUTE}="${id}"]`]);
+		return id;
+	}), (id) => Effect.andThen(Dom.restoreInert(id), () => Effect.sync(() => element.removeAttribute(HIDE_OUTSIDE_ATTRIBUTE)))))
+});
+//#endregion
+//#region src/dom/move.ts
+/**
+* Pointer movement on an element as a Mount: a primary-button pointer down
+* captures the pointer, each move reports the delta from where it started,
+* and up, cancel, or lost capture ends it. Nothing is decided here: a drag
+* threshold, a snap, or a constraint is the parent's `update`. Capture is
+* released with the Mount.
+*/
+const MoveStarted = Schema.TaggedStruct("MoveStarted", {
+	pointerId: Schema.Number,
+	pointerType: Schema.String
+});
+const Moved = Schema.TaggedStruct("Moved", {
+	pointerId: Schema.Number,
+	/** From where the pointer went down, in CSS pixels. */
+	deltaX: Schema.Number,
+	deltaY: Schema.Number,
+	pointerType: Schema.String
+});
+const MoveEnded = Schema.TaggedStruct("MoveEnded", {
+	pointerId: Schema.Number,
+	/** `false` when the pointer was cancelled or capture was lost. */
+	completed: Schema.Boolean
+});
+const Move = Mount.defineStream("Move", {
+	messages: [
+		MoveStarted,
+		Moved,
+		MoveEnded
+	],
+	execute: ({ element }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const target = element;
+		let active = null;
+		const offer = (fact) => Queue.offerUnsafe(queue, fact);
+		const end = (pointerId, completed) => {
+			if (active === null || active.pointerId !== pointerId) return;
+			active = null;
+			try {
+				target.releasePointerCapture?.(pointerId);
+			} catch {}
+			offer(MoveEnded.make({
+				pointerId,
+				completed
+			}));
+		};
+		const listeners = [
+			["pointerdown", (event) => {
+				const pointer = event;
+				if ((pointer.button ?? 0) !== 0 || active !== null) return;
+				const pointerId = pointer.pointerId ?? 0;
+				active = {
+					pointerId,
+					x: pointer.clientX ?? 0,
+					y: pointer.clientY ?? 0
+				};
+				try {
+					target.setPointerCapture?.(pointerId);
+				} catch {}
+				offer(MoveStarted.make({
+					pointerId,
+					pointerType: pointer.pointerType ?? "mouse"
+				}));
+			}],
+			["pointermove", (event) => {
+				const pointer = event;
+				const pointerId = pointer.pointerId ?? 0;
+				if (active === null || active.pointerId !== pointerId) return;
+				offer(Moved.make({
+					pointerId,
+					deltaX: (pointer.clientX ?? 0) - active.x,
+					deltaY: (pointer.clientY ?? 0) - active.y,
+					pointerType: pointer.pointerType ?? "mouse"
+				}));
+			}],
+			["pointerup", (event) => end(event.pointerId ?? 0, true)],
+			["pointercancel", (event) => end(event.pointerId ?? 0, false)],
+			["lostpointercapture", (event) => end(event.pointerId ?? 0, false)]
+		];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return {
+			listeners,
+			current: () => active
+		};
+	}), ({ listeners, current }) => Effect.sync(() => {
+		for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		const pointer = current();
+		if (pointer !== null) try {
+			element.releasePointerCapture?.(pointer.pointerId);
+		} catch {}
+	})))
+});
+//#endregion
+//#region src/dom/targets.ts
+/**
+* Which marked descendant of an element the pointer is over, and which one was
+* pressed, as a Mount: one set of listeners on the container, not one per item.
+* A descendant is marked by an attribute whose value is its id, such as a
+* canvas's `data-composition-node` or a table's `data-row`. The nearest marked
+* ancestor of the event's target, inside the container, is the one reported.
+*
+* What hovering or pressing means (a selection, an outline, a menu) is the
+* parent's `update`.
+*/
+const TargetHovered = Schema.TaggedStruct("TargetHovered", { 
+/** The marked descendant under the pointer, or `null` when there is none. */
+id: Schema.NullOr(Schema.String) });
+const TargetPressed = Schema.TaggedStruct("TargetPressed", {
+	id: Schema.String,
+	shiftKey: Schema.Boolean,
+	altKey: Schema.Boolean,
+	ctrlKey: Schema.Boolean,
+	metaKey: Schema.Boolean
+});
+/** The id of the nearest marked element at or above `from`, inside `container`. */
+const targetOf = (container, from, attribute) => {
+	if (!(from instanceof Element)) return null;
+	const marked = from.closest(`[${attribute}]`);
+	return marked !== null && container.contains(marked) ? marked.getAttribute(attribute) : null;
+};
+const Targets = Mount.defineStream("Targets", {
+	messages: [TargetHovered, TargetPressed],
+	args: {
+		/** The attribute that marks a descendant, holding its id. */
+		attribute: Schema.String,
+		/** Prevent a press's default, such as a link navigating inside an editor's canvas. */
+		preventDefault: Schema.Boolean
+	},
+	execute: ({ element, attribute, preventDefault }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		let hovered = null;
+		const hover = (id) => {
+			if (id === hovered) return;
+			hovered = id;
+			Queue.offerUnsafe(queue, TargetHovered.make({ id }));
+		};
+		const listeners = [
+			["pointerover", (event) => hover(targetOf(element, event.target, attribute))],
+			["pointerleave", () => hover(null)],
+			["click", (event) => {
+				const id = targetOf(element, event.target, attribute);
+				if (id === null) return;
+				if (preventDefault) event.preventDefault();
+				const modified = event;
+				Queue.offerUnsafe(queue, TargetPressed.make({
+					id,
+					shiftKey: modified.shiftKey === true,
+					altKey: modified.altKey === true,
+					ctrlKey: modified.ctrlKey === true,
+					metaKey: modified.metaKey === true
+				}));
+			}]
+		];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return listeners;
+	}), (listeners) => Effect.sync(() => {
+		for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+	})))
+});
+//#endregion
+//#region src/dom/pointer-drag.ts
+/**
+* Dragging one marked descendant of an element onto another, as a Mount. A
+* descendant is marked by an attribute whose value is its id, as `Targets`
+* marks them; a press on one that then moves past a threshold starts a drag,
+* and the pointer's place over another marked descendant is reported with the
+* zone of it the pointer is in: its first third (`before`), its middle
+* (`inside`), or its last third (`after`). Releasing drops, and Escape or a
+* cancelled pointer ends the drag with nothing dropped.
+*
+* It writes no roles, no `tabindex` and no key handling, so the marked
+* elements can be anything: a tree's rows, a canvas's nodes. The keyboard's way
+* to do what a drag does is the parent's to give. Geometry is measured when the
+* pointer moves and never kept; what a drop means is the parent's `update`.
+*/
+const DragZone = Schema.Literals([
+	"before",
+	"inside",
+	"after"
+]);
+/** A marked descendant under the pointer, and the zone of it the pointer is in. */
+const DragPlace = Schema.Struct({
+	id: Schema.String,
+	zone: DragZone
+});
+const DragStarted = Schema.TaggedStruct("DragStarted", { 
+/** The marked descendant being dragged. */
+id: Schema.String });
+const DraggedOver = Schema.TaggedStruct("DraggedOver", {
+	/** Where the pointer is, or `null` over nothing marked, or over what is dragged. */
+	over: Schema.NullOr(DragPlace),
+	/**
+	* For a drag onto `targets`: whether the pointer is inside the region they
+	* are in, so `over: null` with `region: true` is its empty space (an empty
+	* page, the space below the last node). Absent for a drag among its own.
+	*/
+	region: Schema.optionalKey(Schema.Boolean)
+});
+const DragDropped = Schema.TaggedStruct("DragDropped", {
+	id: Schema.String,
+	over: Schema.NullOr(DragPlace),
+	/** As `DraggedOver`'s: released inside the `targets` region. */
+	region: Schema.optionalKey(Schema.Boolean)
+});
+const DragCancelled = Schema.TaggedStruct("DragCancelled", { id: Schema.String });
+/** How far, in CSS pixels, a press moves before it is a drag rather than a click. */
+const DRAG_THRESHOLD = 4;
+/** The zone of a box a vertical position falls in, by thirds. */
+const zoneOf = (box, y) => {
+	if (box.height <= 0) return "inside";
+	const at = (y - box.top) / box.height;
+	return at < 1 / 3 ? "before" : at > 2 / 3 ? "after" : "inside";
+};
+/**
+* An element's box. An element drawn as `display: contents` has none, so its
+* first child's stands for it, as an editor's node wrapper's does.
+*/
+const boxOf = (element) => {
+	const own = element.getBoundingClientRect();
+	if (own.width > 0 || own.height > 0) return own;
+	const child = element.firstElementChild;
+	return child === null ? own : boxOf(child);
+};
+const PointerDrag = Mount.defineStream("PointerDrag", {
+	messages: [
+		DragStarted,
+		DraggedOver,
+		DragDropped,
+		DragCancelled
+	],
+	args: {
+		/** The attribute that marks a descendant, holding its id. */
+		attribute: Schema.String,
+		/**
+		* Where a drag may land, when not on the element's own marked descendants:
+		* the elements marked by `attribute` inside the one `within` selects, such
+		* as a palette's Blocks dragged onto a page. A drop's `over` is then one of
+		* those; what is dragged is still one of the element's own. `within` is
+		* looked for nearest first, under the element's closest ancestor that holds
+		* a match, so two editors on one page each drop onto their own.
+		*/
+		targets: Schema.optionalKey(Schema.Struct({
+			attribute: Schema.String,
+			within: Schema.String
+		}))
+	},
+	execute: ({ element, attribute, targets }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const owner = element.ownerDocument;
+		const landsOn = targets?.attribute ?? attribute;
+		const regionOf = (within) => {
+			for (let at = element.parentElement; at !== null; at = at.parentElement) {
+				const found = at.querySelector(within);
+				if (found !== null) return found;
+			}
+			return null;
+		};
+		const find = (from) => {
+			if (!(from instanceof Element)) return {
+				marked: null,
+				inRegion: false
+			};
+			const region = targets === void 0 ? element : regionOf(targets.within);
+			const marked = from.closest(`[${landsOn}]`);
+			return {
+				marked: marked !== null && region !== null && region.contains(marked) ? marked : null,
+				inRegion: targets !== void 0 && region !== null && region.contains(from)
+			};
+		};
+		let pressed = null;
+		let dragging = null;
+		let over = null;
+		let inRegion = false;
+		let swallowClick = false;
+		const placeAt = (event) => {
+			const under = typeof owner.elementFromPoint === "function" && event.clientX !== void 0 ? owner.elementFromPoint(event.clientX, event.clientY ?? 0) : null;
+			const { marked, inRegion: region } = find(under ?? event.target);
+			const id = marked?.getAttribute(landsOn) ?? null;
+			return {
+				place: marked === null || id === null || targets === void 0 && id === dragging ? null : {
+					id,
+					zone: zoneOf(boxOf(marked), event.clientY ?? 0)
+				},
+				region
+			};
+		};
+		/** The region flag a fact carries: only for a drag onto `targets`. */
+		const withRegion = (region) => targets === void 0 ? {} : { region };
+		const ours = (event) => pressed !== null && (pressed.pointer === void 0 || event.pointerId === pressed.pointer);
+		const end = (dropped, inside = false) => {
+			const id = dragging;
+			pressed = null;
+			dragging = null;
+			const last = over;
+			const lastRegion = inRegion;
+			over = null;
+			inRegion = false;
+			release();
+			if (id === null) return;
+			swallowClick = dropped && inside;
+			Queue.offerUnsafe(queue, dropped ? DragDropped.make({
+				id,
+				over: last,
+				...withRegion(lastRegion)
+			}) : DragCancelled.make({ id }));
+		};
+		const onDocument = [
+			["pointermove", (event) => {
+				const positioned = event;
+				if (!ours(positioned) || pressed === null) return;
+				if (positioned.buttons !== void 0 && (positioned.buttons & 1) === 0) return end(false);
+				if (dragging === null) {
+					if (Math.hypot((positioned.clientX ?? 0) - pressed.x, (positioned.clientY ?? 0) - pressed.y) < 4) return;
+					dragging = pressed.id;
+					owner.getSelection()?.removeAllRanges();
+					Queue.offerUnsafe(queue, DragStarted.make({ id: dragging }));
+				}
+				const { place, region } = placeAt(positioned);
+				if (place?.id === over?.id && place?.zone === over?.zone && region === inRegion) return;
+				over = place;
+				inRegion = region;
+				Queue.offerUnsafe(queue, DraggedOver.make({
+					over: place,
+					...withRegion(region)
+				}));
+			}],
+			["pointerup", (event) => {
+				if (!ours(event)) return;
+				if (dragging === null) end(false);
+				else end(true, event.target instanceof Node && element.contains(event.target));
+			}],
+			["pointercancel", (event) => {
+				if (ours(event)) end(false);
+			}]
+		];
+		const onEscape = (event) => {
+			if (pressed === null || event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			end(false);
+		};
+		let listening = false;
+		const listen = () => {
+			if (listening) return;
+			listening = true;
+			for (const [type, listener] of onDocument) owner.addEventListener(type, listener);
+			owner.addEventListener("keydown", onEscape, true);
+		};
+		const release = () => {
+			if (!listening) return;
+			listening = false;
+			for (const [type, listener] of onDocument) owner.removeEventListener(type, listener);
+			owner.removeEventListener("keydown", onEscape, true);
+		};
+		const onElement = [
+			[
+				"pointerdown",
+				(event) => {
+					const positioned = event;
+					swallowClick = false;
+					if (pressed !== null) return;
+					if ((positioned.button ?? 0) !== 0) return;
+					if (event.target instanceof Element && event.target.closest("[contenteditable]:not([contenteditable=\"false\"])") !== null) return;
+					const id = targetOf(element, event.target, attribute);
+					if (id === null) return;
+					pressed = {
+						id,
+						pointer: positioned.pointerId,
+						x: positioned.clientX ?? 0,
+						y: positioned.clientY ?? 0
+					};
+					listen();
+				},
+				false
+			],
+			[
+				"click",
+				(event) => {
+					if (!swallowClick) return;
+					swallowClick = false;
+					event.preventDefault();
+					event.stopImmediatePropagation();
+				},
+				true
+			],
+			[
+				"dragstart",
+				(event) => event.preventDefault(),
+				false
+			]
+		];
+		for (const [type, listener, capture] of onElement) element.addEventListener(type, listener, capture);
+		return {
+			onElement,
+			release
+		};
+	}), ({ onElement, release }) => Effect.sync(() => {
+		for (const [type, listener, capture] of onElement) element.removeEventListener(type, listener, capture);
+		release();
+	})))
+});
+//#endregion
+//#region src/dom/editable-text.ts
+/**
+* Text typed into an editable descendant of an element, as a Mount: one set of
+* listeners on the container, like `Targets`. A field is a descendant marked
+* by an attribute whose value names it, while it is `contenteditable`. The
+* view decides which one is; the Mount focuses it as it becomes so (made
+* editable, or drawn editable), with the caret at its end, and at no other
+* time. When Enter or Escape ends an edit and the view then removes the field
+* or makes it no longer editable, focus, left on nothing, comes back to the
+* container, so the next key reaches it; give the container a `tabindex`. A double-click on a marked field that is not editable yet asks for it
+* to be (`EditAsked`).
+*
+* It reads `innerText`, never `innerHTML`, so what arrives is text. A field is
+* one line unless it carries `aria-multiline="true"`: in one line, a line
+* break becomes a space. Nothing is reported while an input method composes;
+* the composed text arrives once, when it is done.
+*
+* Enter commits (Shift+Enter breaks a line in a multiline field), and so does
+* leaving the field. Escape cancels, and puts the text the field had when
+* editing began back in the DOM, since a view that stopped redrawing the field
+* while it was edited will not. Where the browser lacks `plaintext-only`, a
+* paste is inserted as text. What an edit means is the parent's `update`.
+*/
+const TextEdited = Schema.TaggedStruct("TextEdited", {
+	/** The field, by its marking attribute's value. */
+	field: Schema.String,
+	text: Schema.String
+});
+const TextCommitted = Schema.TaggedStruct("TextCommitted", {
+	field: Schema.String,
+	text: Schema.String
+});
+const TextCancelled = Schema.TaggedStruct("TextCancelled", {
+	field: Schema.String,
+	/** The text the field had when editing began, which the DOM shows again. */
+	initial: Schema.String
+});
+const EditAsked = Schema.TaggedStruct("EditAsked", { 
+/** A marked field, not editable yet, that was double-clicked. */
+field: Schema.String });
+/** Whether a field takes more than one line. */
+const multiline = (element) => element.getAttribute("aria-multiline") === "true";
+/**
+* A field's text. A browser ends an edited element with a line break it adds
+* itself, which is not the author's; in one line, the author's breaks are spaces.
+*/
+const textOf = (element) => {
+	const text = element.innerText.replace(/\r\n?/g, "\n").replace(/\n$/, "");
+	return multiline(element) ? text : text.replace(/\n+/g, " ");
+};
+/** Puts the caret at the end of a field, which focuses it too. */
+const caretAtEnd = (field) => {
+	field.focus();
+	const caret = document.createRange();
+	caret.selectNodeContents(field);
+	caret.collapse(false);
+	const selection = window.getSelection();
+	selection?.removeAllRanges();
+	selection?.addRange(caret);
+};
+/** Whether a key press belongs to an input method still composing, not to the field. */
+const composing = (event) => event.isComposing || event.keyCode === 229;
+const EditableText = Mount.defineStream("EditableText", {
+	messages: [
+		TextEdited,
+		TextCommitted,
+		TextCancelled,
+		EditAsked
+	],
+	args: { 
+	/** The attribute that marks a field, holding its name. */
+attribute: Schema.String },
+	execute: ({ element, attribute }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		/** The field being edited: its name, its text when editing began, and the last reported. */
+		let current;
+		let composingText = false;
+		let ending;
+		/** The marked field at or above an event's target, inside the container. */
+		const markedOf = (target) => {
+			if (!(target instanceof Element)) return void 0;
+			const field = target.closest(`[${attribute}]`);
+			return field instanceof HTMLElement && element.contains(field) ? field : void 0;
+		};
+		/** The same, while it is editable. */
+		const fieldOf = (target) => {
+			const field = markedOf(target);
+			return field?.isContentEditable === true ? field : void 0;
+		};
+		/** Begins an edit of `field`, unless one of it is under way: on focus, or typing. */
+		const begin = (field) => {
+			if (current?.field === field && !current.ended) return current;
+			const text = textOf(field);
+			current = {
+				field,
+				name: field.getAttribute(attribute) ?? "",
+				initial: text,
+				reported: text,
+				ended: false
+			};
+			return current;
+		};
+		/**
+		* The edit of `field`: the one under way or just ended, else one begun
+		* now, for a field focused before these listeners came. An ended edit
+		* reports nothing more, so the blur that follows a commit or a cancel
+		* does not commit again.
+		*/
+		const editOf = (field) => current?.field === field ? current : begin(field);
+		const report = (field) => {
+			const edit = editOf(field);
+			if (edit.ended) return;
+			const text = textOf(field);
+			if (text === edit.reported) return;
+			edit.reported = text;
+			Queue.offerUnsafe(queue, TextEdited.make({
+				field: edit.name,
+				text
+			}));
+		};
+		const commit = (field) => {
+			const edit = editOf(field);
+			if (edit.ended) return;
+			edit.ended = true;
+			Queue.offerUnsafe(queue, TextCommitted.make({
+				field: edit.name,
+				text: textOf(field)
+			}));
+		};
+		const cancel = (field) => {
+			const edit = editOf(field);
+			if (edit.ended) return;
+			edit.ended = true;
+			field.innerText = edit.initial;
+			caretAtEnd(field);
+			Queue.offerUnsafe(queue, TextCancelled.make({
+				field: edit.name,
+				initial: edit.initial
+			}));
+		};
+		const listeners = [
+			["dblclick", (event) => {
+				const field = markedOf(event.target);
+				if (field === void 0 || field.isContentEditable) return;
+				Queue.offerUnsafe(queue, EditAsked.make({ field: field.getAttribute(attribute) ?? "" }));
+			}],
+			["focusin", (event) => {
+				composingText = false;
+				const field = fieldOf(event.target);
+				if (field !== void 0) begin(field);
+			}],
+			["beforeinput", (event) => {
+				const field = fieldOf(event.target);
+				if (field !== void 0) begin(field);
+			}],
+			["compositionstart", () => composingText = true],
+			["compositionend", (event) => {
+				composingText = false;
+				const field = fieldOf(event.target);
+				if (field !== void 0) report(field);
+			}],
+			["input", (event) => {
+				const field = fieldOf(event.target);
+				if (field !== void 0 && !composingText) report(field);
+			}],
+			["keydown", (event) => {
+				const field = fieldOf(event.target);
+				const key = event;
+				if (field === void 0 || composing(key)) return;
+				if (key.key === "Escape") {
+					event.preventDefault();
+					ending = field;
+					cancel(field);
+				} else if (key.key === "Enter" && !(key.shiftKey && multiline(field))) {
+					event.preventDefault();
+					ending = field;
+					commit(field);
+				}
+			}],
+			["focusout", (event) => {
+				const field = fieldOf(event.target);
+				if (field === void 0) return;
+				queueMicrotask(() => {
+					if (field === ending && field.isConnected && field.isContentEditable) ending = void 0;
+				});
+				commit(field);
+			}],
+			["paste", (event) => {
+				const field = fieldOf(event.target);
+				if (field === void 0 || field.contentEditable === "plaintext-only") return;
+				const pasted = event.clipboardData?.getData("text/plain") ?? "";
+				event.preventDefault();
+				begin(field);
+				document.execCommand("insertText", false, pasted);
+			}]
+		];
+		const editable = `[${attribute}][contenteditable]:not([contenteditable="false"])`;
+		const becoming = new MutationObserver((records) => {
+			if (ending !== void 0 && !(ending.isConnected && ending.isContentEditable)) {
+				ending = void 0;
+				const focused = document.activeElement;
+				if ((focused === null || focused === document.body) && element instanceof HTMLElement) element.focus({ preventScroll: true });
+			}
+			for (const record of records) {
+				const changed = record.type === "attributes" ? [record.target] : Array.from(record.addedNodes);
+				for (const node of changed) {
+					if (!(node instanceof HTMLElement)) continue;
+					const field = node.matches(editable) ? node : node.querySelector(editable);
+					if (field instanceof HTMLElement) return caretAtEnd(field);
+				}
+			}
+		});
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		becoming.observe(element, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ["contenteditable"]
+		});
+		return {
+			listeners,
+			becoming
+		};
+	}), ({ listeners, becoming }) => Effect.sync(() => {
+		becoming.disconnect();
+		for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+	})))
+});
+//#endregion
+//#region src/dom/follow-tab-stop.ts
+/**
+* Keeps focus that is inside a container of roving tab stops on its stop, as a
+* Mount: when a transition moves the stop (a row made current by a command the
+* container did not see, such as a duplicate) or removes the focused
+* descendant (a deleted row), focus goes to the descendant with
+* `tabindex="0"`. It sends no Message. Focus outside the container is never
+* taken, and focus the user moved away stays where it went.
+*/
+const FollowTabStop = Mount.defineStream("FollowTabStop", {
+	messages: [Schema.Never],
+	execute: ({ element }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		let within = element.contains(document.activeElement);
+		const entered = () => {
+			within = true;
+		};
+		const left = (event) => {
+			const next = event.relatedTarget;
+			if (next instanceof Node && element.contains(next)) return;
+			const from = event.target;
+			queueMicrotask(() => {
+				if (!(from instanceof Node) || from.isConnected) within = false;
+			});
+		};
+		const follow = () => {
+			if (!within) return;
+			const stop = element.querySelector("[tabindex=\"0\"]");
+			const focused = document.activeElement;
+			if (!(stop instanceof HTMLElement) || stop === focused) return;
+			const lost = focused === null || focused === document.body;
+			const passed = focused !== null && element.contains(focused) && focused.getAttribute("tabindex") === "-1";
+			if (lost || passed) stop.focus();
+		};
+		const changes = new MutationObserver(follow);
+		element.addEventListener("focusin", entered);
+		element.addEventListener("focusout", left);
+		changes.observe(element, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ["tabindex"]
+		});
+		return () => {
+			changes.disconnect();
+			element.removeEventListener("focusin", entered);
+			element.removeEventListener("focusout", left);
+		};
+	}), (stop) => Effect.sync(stop)))
+});
+//#endregion
+export { MoveEnded as C, ScrollLock as D, HideOutside as E, FocusScope as O, Move as S, Moved as T, zoneOf as _, TextCommitted as a, Targets as b, DRAG_THRESHOLD as c, DragPlace as d, DragStarted as f, boxOf as g, PointerDrag as h, TextCancelled as i, tabbableWithin as k, DragCancelled as l, DraggedOver as m, EditAsked as n, TextEdited as o, DragZone as p, EditableText as r, textOf as s, FollowTabStop as t, DragDropped as u, TargetHovered as v, MoveStarted as w, targetOf as x, TargetPressed as y };
+
+//# sourceMappingURL=follow-tab-stop-DpxwLXvU.mjs.map