foldkit-primitives 0.2.1 → 0.4.0

package/dist/interaction/index.mjs

@@ -0,0 +1,1647 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.mjs";
+import { C as MoveEnded, D as ScrollLock, E as HideOutside, O as FocusScope, S as Move, T as Moved, _ as zoneOf, a as TextCommitted, b as Targets, d as DragPlace, f as DragStarted, g as boxOf, h as PointerDrag, i as TextCancelled, k as tabbableWithin, l as DragCancelled, m as DraggedOver, n as EditAsked, o as TextEdited, p as DragZone, r as EditableText, s as textOf, t as FollowTabStop, u as DragDropped, v as TargetHovered, w as MoveStarted, x as targetOf, y as TargetPressed } from "../follow-tab-stop-DpxwLXvU.mjs";
+import { n as perInput, r as sameIds, t as clearQuery } from "../internal-DP-xLKbT.mjs";
+import { a as modalityOfKey, i as Modality, t as InputModality } from "../input-modality-m6v7__Xs.mjs";
+import { Effect, Option, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+import { defineMessageUnion } from "foldkit/message";
+import * as Subscription from "foldkit/subscription";
+import { Bundle } from "foldkit-bundle";
+import { Behavior, Capability } from "foldkit-mixins";
+//#region src/interaction/dismiss-layer.ts
+/**
+* Dismissable layers: Escape closes the topmost open layer, a pointer press
+* outside closes the layers it is outside of. One Bundle, placed once, owns
+* the document listeners; each layer's Behavior marks its container (and its
+* trigger) with data attributes. The stack is the DOM order of the marked
+* elements at the moment of the event, so a layer opening or closing needs no
+* registration. A press inside a parent layer is outside its children, so the
+* parent stays and the children go; a press on a layer's trigger counts as
+* inside it, so a trigger never dismisses and reopens in one click. What a
+* dismissal does is the placement's `onOut`.
+*/
+var dismiss_layer_exports = /* @__PURE__ */ __exportAll({
+	Dismiss: () => Dismiss,
+	LAYER_ATTRIBUTE: () => LAYER_ATTRIBUTE,
+	Layer: () => Layer$1,
+	Message: () => Message$9,
+	Model: () => Model$9,
+	TRIGGER_ATTRIBUTE: () => TRIGGER_ATTRIBUTE,
+	behavior: () => behavior$14,
+	bundle: () => bundle$9,
+	layersOnPath: () => layersOnPath,
+	toDismiss: () => toDismiss
+});
+const LAYER_ATTRIBUTE = "data-foldkit-plus-layer";
+const TRIGGER_ATTRIBUTE = "data-foldkit-plus-layer-trigger";
+const OUTSIDE_ATTRIBUTE = "data-foldkit-plus-layer-outside";
+const ESCAPE_ATTRIBUTE = "data-foldkit-plus-layer-escape";
+/** An open layer as the document showed it: bottom to top is DOM order. */
+const Layer$1 = Schema.Struct({
+	id: Schema.String,
+	/** Dismiss on a press outside it. */
+	outside: Schema.Boolean,
+	/** Dismiss on Escape when topmost. */
+	escape: Schema.Boolean
+});
+const Model$9 = Schema.Struct({ 
+/** The open layers at the last event, bottom to top. */
+layers: Schema.Array(Layer$1) });
+const Message$9 = defineMessageUnion({
+	/** A pointer went down; `inside` are the layers whose element or trigger was on the event's path. */
+	PressedAt: {
+		layers: Schema.Array(Layer$1),
+		inside: Schema.Array(Schema.String)
+	},
+	PressedEscape: { layers: Schema.Array(Layer$1) }
+});
+const Dismiss = Schema.TaggedStruct("Dismiss", { ids: Schema.Array(Schema.String) });
+/** Which layers a press inside `inside` dismisses: every layer above the topmost one hit, or all when none was. */
+const toDismiss = (layers, inside) => {
+	let topmostHit = -1;
+	layers.forEach((layer, index) => {
+		if (inside.includes(layer.id)) topmostHit = index;
+	});
+	return layers.slice(topmostHit + 1).filter((layer) => layer.outside).map((layer) => layer.id);
+};
+const sameLayers = (a, b) => a.length === b.length && a.every((layer, index) => layer.id === b[index].id && layer.outside === b[index].outside && layer.escape === b[index].escape);
+const bundle$9 = Bundle.make("DismissLayer", {
+	Model: Model$9,
+	Message: Message$9,
+	init: () => ({ model: { layers: [] } }),
+	update: (model, message) => {
+		const next = sameLayers(model.layers, message.layers) ? model : { layers: message.layers };
+		return Message$9.match(message, {
+			PressedAt: ({ layers, inside }) => {
+				const ids = toDismiss(layers, inside);
+				return ids.length === 0 ? { model: next } : {
+					model: next,
+					outMessage: Dismiss.make({ ids })
+				};
+			},
+			PressedEscape: ({ layers }) => {
+				const top = layers[layers.length - 1];
+				return top !== void 0 && top.escape ? {
+					model: next,
+					outMessage: Dismiss.make({ ids: [top.id] })
+				} : { model: next };
+			}
+		});
+	},
+	subscriptions: () => Subscription.make()(() => ({ document: Subscription.persistent(documentEvents()) }))
+});
+const openLayers = (root) => Array.from(root.querySelectorAll(`[${LAYER_ATTRIBUTE}]`)).map((element) => ({
+	id: element.getAttribute("data-foldkit-plus-layer") ?? "",
+	outside: element.getAttribute(OUTSIDE_ATTRIBUTE) !== "false",
+	escape: element.getAttribute(ESCAPE_ATTRIBUTE) !== "false"
+}));
+/** The layer ids whose element or trigger is on the event's composed path. */
+const layersOnPath = (path) => {
+	const ids = [];
+	for (const target of path) {
+		if (!(target instanceof Element)) continue;
+		const id = target.getAttribute("data-foldkit-plus-layer") ?? target.getAttribute("data-foldkit-plus-layer-trigger");
+		if (id !== null && !ids.includes(id)) ids.push(id);
+	}
+	return ids;
+};
+/**
+* The facts are read inside the listener, not after: `composedPath()` is
+* empty once dispatch has finished, and the open layers must be the ones the
+* press saw, not the ones a later render left.
+*/
+const documentEvents = () => {
+	if (typeof document === "undefined") return Stream.empty;
+	return Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const onPointerDown = (event) => Queue.offerUnsafe(queue, Message$9.PressedAt({
+			layers: openLayers(document),
+			inside: layersOnPath(event.composedPath())
+		}));
+		const onKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			Queue.offerUnsafe(queue, Message$9.PressedEscape({ layers: openLayers(document) }));
+		};
+		document.addEventListener("pointerdown", onPointerDown, { capture: true });
+		document.addEventListener("keydown", onKeyDown, { capture: true });
+		return {
+			onPointerDown,
+			onKeyDown
+		};
+	}), ({ onPointerDown, onKeyDown }) => Effect.sync(() => {
+		document.removeEventListener("pointerdown", onPointerDown, { capture: true });
+		document.removeEventListener("keydown", onKeyDown, { capture: true });
+	})));
+};
+/**
+* Marks the layer's container and trigger for the placed stack. The layer
+* takes part only while its element is rendered, so an `open` flag in the
+* parent Model is the whole lifecycle. Not for an element with `popover`,
+* which the browser dismisses itself.
+*/
+const behavior$14 = (_declared) => (slots) => (options) => Behavior.forSlots(slots)({
+	[options.layer]: Behavior.slot({
+		requires: { capability: Capability.Container },
+		attributes: ({ input, h }) => [
+			h.Attribute(LAYER_ATTRIBUTE, options.id(input)),
+			...options.outsidePress === false ? [h.Attribute(OUTSIDE_ATTRIBUTE, "false")] : [],
+			...options.escape === false ? [h.Attribute(ESCAPE_ATTRIBUTE, "false")] : []
+		]
+	}),
+	...options.trigger === void 0 ? {} : { [options.trigger]: Behavior.slot({
+		requires: { capability: Capability.Interactive },
+		attributes: ({ input, h }) => [h.Attribute(TRIGGER_ATTRIBUTE, options.id(input))]
+	}) }
+}, { name: "DismissLayer" });
+//#endregion
+//#region src/interaction/editable-text.ts
+/**
+* `EditableText` as a Behavior: attaches the `foldkit-primitives/dom` Mount to
+* a container slot and maps what it reports into the view's Messages. No
+* Bundle: the text typed is a fact, and what it changes is the parent's
+* `update`.
+*/
+var editable_text_exports = /* @__PURE__ */ __exportAll({
+	EditAsked: () => EditAsked,
+	TextCancelled: () => TextCancelled,
+	TextCommitted: () => TextCommitted,
+	TextEdited: () => TextEdited,
+	behavior: () => behavior$13,
+	mount: () => EditableText,
+	textOf: () => textOf
+});
+const behavior$13 = (slots) => (options) => Behavior.forSlots(slots)({ [options.container]: Behavior.slot({
+	requires: { capability: Capability.Container },
+	mount: () => Mount.mapMessage(EditableText({ attribute: options.attribute }), options.toMessage)
+}) }, { name: "EditableText" });
+//#endregion
+//#region src/interaction/focus-scope.ts
+/**
+* `FocusScope` as a Behavior: attaches the `foldkit-primitives/dom` Mount to a
+* container slot. No Bundle, because which element has focus is a DOM fact.
+*/
+var focus_scope_exports = /* @__PURE__ */ __exportAll({
+	behavior: () => behavior$12,
+	mount: () => FocusScope,
+	tabbableWithin: () => tabbableWithin
+});
+/**
+* On insert the container focuses `initialFocus`, else its first tabbable
+* descendant, else itself; with `contain`, Tab and Shift+Tab wrap inside and
+* focus that lands outside comes back to the first tabbable; on unmount, with
+* `restore`, focus returns to the element that had it. A dialog that is not
+* a native `<dialog>`, a menu, or a command palette takes this.
+*/
+const behavior$12 = (slots) => (options) => Behavior.forSlots(slots)({ [options.container]: Behavior.slot({
+	requires: { capability: Capability.Container },
+	mount: () => FocusScope({
+		contain: options.contain ?? true,
+		restore: options.restore ?? true,
+		initialFocus: options.initialFocus ?? null
+	})
+}) }, { name: "FocusScope" });
+//#endregion
+//#region src/interaction/focus-visible.ts
+var focus_visible_exports = /* @__PURE__ */ __exportAll({
+	Modality: () => Modality,
+	behavior: () => behavior$11,
+	bundle: () => InputModality,
+	modalityOfKey: () => modalityOfKey
+});
+const behavior$11 = (declared) => (slots) => (options) => Behavior.forSlots(slots)({ [options.target]: Behavior.slot({
+	requires: { capability: Capability.Focusable },
+	attributes: ({ input, h }) => input[declared.field].modality === "keyboard" ? [h.DataAttribute("focus-visible", "true")] : []
+}) }, { name: "FocusVisible" });
+//#endregion
+//#region src/interaction/roving-tabindex.ts
+/**
+* One tab stop for a set of items (a toolbar, a tab list, a listbox): arrows
+* move focus between them, the rest stay out of the tab order. The current
+* item's id is the Model slice, so a reorder keeps the same item current and a
+* resumed page knows where focus was. Which item comes next is a pure
+* function of the items and the key; the Behavior wires it to the slots.
+*/
+var roving_tabindex_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$8,
+	Message: () => Message$8,
+	Model: () => Model$8,
+	Orientation: () => Orientation,
+	behavior: () => behavior$10,
+	bundle: () => bundle$8,
+	idSelector: () => idSelector,
+	itemAttributes: () => itemAttributes,
+	move: () => move$2,
+	tabStop: () => tabStop$1
+});
+const Orientation = Schema.Literals([
+	"vertical",
+	"horizontal",
+	"both"
+]);
+const Model$8 = Schema.Struct({ 
+/** The current item's id, or `null` before any item has been focused. */
+current: Schema.NullOr(Schema.String) });
+const Message$8 = defineMessageUnion({ 
+/** An item became current: the user focused it, or a key moved there. */
+Focused: { id: Schema.String } });
+const Args$8 = Schema.Struct({
+	orientation: Orientation,
+	/** Wrap from the last enabled item to the first, and back. */
+	loop: Schema.Boolean,
+	/** Keep DOM focus on the container and point at the current item with
+	*  `aria-activedescendant` instead of moving focus. */
+	virtual: Schema.Boolean
+});
+const bundle$8 = Bundle.make("RovingTabindex", {
+	Model: Model$8,
+	Message: Message$8,
+	args: Args$8,
+	init: () => ({ model: { current: null } }),
+	update: (model, message) => model.current === message.id ? { model } : { model: { current: message.id } }
+});
+const isPlain$1 = (modifiers) => !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey;
+/**
+* The index the key moves to from `current`, over the enabled indices only, or
+* `undefined` when the key is not a navigation key here. `current` may be
+* `-1` (nothing current yet): arrows then land on the first or last enabled
+* item. Under `rtl`, left and right swap. PageUp and PageDown move by `page`
+* and clamp at the ends, never wrapping.
+*/
+const move$2 = (enabled, current, key, modifiers, options) => {
+	if (enabled.length === 0 || !isPlain$1(modifiers)) return void 0;
+	const first = enabled[0];
+	const last = enabled[enabled.length - 1];
+	if (key === "Home") return first;
+	if (key === "End") return last;
+	if (options.page !== void 0 && (key === "PageUp" || key === "PageDown")) {
+		const position = enabled.indexOf(current);
+		if (position === -1) return key === "PageDown" ? first : last;
+		const jumped = position + (key === "PageDown" ? options.page : -options.page);
+		return enabled[Math.min(enabled.length - 1, Math.max(0, jumped))];
+	}
+	const vertical = options.orientation !== "horizontal";
+	const horizontal = options.orientation !== "vertical";
+	const forwardKey = options.direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const backwardKey = options.direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+	const step = vertical && key === "ArrowDown" || horizontal && key === forwardKey ? 1 : vertical && key === "ArrowUp" || horizontal && key === backwardKey ? -1 : 0;
+	if (step === 0) return void 0;
+	const position = enabled.indexOf(current);
+	if (position === -1) return step === 1 ? first : last;
+	const next = position + step;
+	if (next < 0) return options.loop ? last : first;
+	if (next >= enabled.length) return options.loop ? first : last;
+	return enabled[next];
+};
+/** The item that holds the tab stop: the current one, else the first enabled. */
+const tabStop$1 = (items, current) => {
+	const index = current === null ? -1 : items.indexOf(current);
+	if (index !== -1 && !items.isDisabled(index)) return index;
+	return items.enabled[0] ?? -1;
+};
+/** A selector for an element by id, safe for any id. */
+const idSelector = (id) => `[id="${id.replace(/["\\]/g, "\\$&")}"]`;
+/**
+* The attributes one item gets: `tabindex` 0 when it holds the tab stop and
+* -1 otherwise (none under `virtual`), and `OnFocus` reporting it current.
+* Shared with `ListNavigation`.
+*/
+const itemAttributes = (h, items, current, item, virtual, focused) => {
+	const id = item.id ?? items.ids[item.index];
+	if (id === void 0) return [];
+	const isStop = tabStop$1(items, current) === item.index;
+	return [...virtual ? [] : [h.Tabindex(isStop ? 0 : -1)], h.OnFocus(focused(id))];
+};
+/**
+* Wires a placed `RovingTabindex` to the slots: the container's arrow, Home
+* and End keys focus the next item (synchronously, then dispatch), each item
+* gets `tabindex` 0 or -1 and reports `Focused` when focused. Under `virtual`
+* DOM focus never leaves the container: the key only dispatches, the
+* container carries `aria-activedescendant`, and items keep no `tabindex`.
+*
+* Every handled key is default-prevented. Nothing is written on dispose: the
+* attributes are data, so a view that no longer attaches this leaves no
+* `tabindex` behind.
+*/
+const behavior$10 = (declared, args) => (slots) => (options) => {
+	const wrap = (id) => declared.wrapper.make(Message$8.Focused({ id }));
+	const slice = (input) => input[declared.field];
+	const itemsOf = perInput(options.items);
+	return Behavior.forSlots(slots)({
+		[options.container]: Behavior.slot({
+			requires: { capability: Capability.Interactive },
+			attributes: ({ input, h }) => {
+				const items = itemsOf(input);
+				const current = slice(input).current;
+				const from = current === null ? -1 : items.indexOf(current);
+				const direction = options.direction?.(input) ?? "ltr";
+				const stop = tabStop$1(items, current);
+				const stopId = stop === -1 ? void 0 : items.ids[stop];
+				const target = (key, modifiers) => {
+					const next = move$2(items.enabled, from, key, modifiers, {
+						...args,
+						direction
+					});
+					return next === void 0 ? void 0 : items.ids[next];
+				};
+				if (args.virtual) return [h.OnKeyDownPreventDefault((key, modifiers) => Option.map(Option.fromNullishOr(target(key, modifiers)), wrap)), ...stopId === void 0 ? [] : [h.AriaActiveDescendant(stopId)]];
+				return [h.OnKeyDownFocus((key, modifiers) => Option.map(Option.fromNullishOr(target(key, modifiers)), (id) => ({
+					focusSelector: idSelector(id),
+					message: wrap(id)
+				})))];
+			}
+		}),
+		[options.item]: Behavior.slot({
+			requires: { capability: Capability.Focusable },
+			attributes: ({ input, h, item }) => {
+				if (item === void 0) return [];
+				return itemAttributes(h, itemsOf(input), slice(input).current, item, args.virtual, wrap);
+			}
+		})
+	}, { name: "RovingTabindex" });
+};
+//#endregion
+//#region src/interaction/grid-navigation.ts
+/**
+* Two-dimensional arrow keys over a set of items laid out in rows of
+* `columns` (a calendar grid, a color swatch picker, an emoji palette). The
+* Model slice is the current item's id, as with `RovingTabindex`, so a
+* reorder keeps the same item current. Which cell a key lands on is the pure
+* `move`; the Behavior wires it to a container slot and a per-item slot and
+* shares `RovingTabindex`'s item attributes, so the two are interchangeable
+* on a view.
+*/
+var grid_navigation_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$7,
+	Message: () => Message$7,
+	Model: () => Model$7,
+	behavior: () => behavior$9,
+	bundle: () => bundle$7,
+	move: () => move$1
+});
+const Model$7 = Schema.Struct({ 
+/** The current cell's id, or `null` before any cell has been focused. */
+current: Schema.NullOr(Schema.String) });
+const Message$7 = defineMessageUnion({ 
+/** A cell became current: the user focused it, or a key moved there. */
+Focused: { id: Schema.String } });
+const Args$7 = Schema.Struct({
+	/** Cells per row; the last row may be short. */
+	columns: Schema.Number.pipe(Schema.check(Schema.isGreaterThanOrEqualTo(1))),
+	/** Left and right continue into the previous and next row; up and down
+	*  continue into the previous and next column. Off, they stop at the edge. */
+	wrap: Schema.Boolean,
+	/** Keep DOM focus on the container and point at the current cell with
+	*  `aria-activedescendant` instead of moving focus. */
+	virtual: Schema.Boolean
+});
+const bundle$7 = Bundle.make("GridNavigation", {
+	Model: Model$7,
+	Message: Message$7,
+	args: Args$7,
+	init: () => ({ model: { current: null } }),
+	update: (model, message) => model.current === message.id ? { model } : { model: { current: message.id } }
+});
+/**
+* The index the key moves to from `current` over a grid of `count` cells in
+* rows of `columns`, skipping cells not in `enabled`, or `undefined` when the
+* key is not a grid key. Left and right step within the row, and across rows
+* under `wrap`; up and down step within the column, and across columns under
+* `wrap`. Home and End are the row's first and last enabled cell; with Ctrl
+* they are the grid's. At an edge without `wrap` the key is consumed and
+* `current` is returned. From `-1` (nothing current) a forward key lands on
+* the first enabled cell and a backward key on the last. Under `rtl`, left
+* and right swap.
+*/
+const move$1 = (enabled, count, current, key, modifiers, options) => {
+	if (enabled.length === 0 || modifiers.altKey || modifiers.metaKey) return void 0;
+	const first = enabled[0];
+	const last = enabled[enabled.length - 1];
+	const isEnabled = (index) => enabled.includes(index);
+	const { columns } = options;
+	const row = (index) => Math.floor(index / columns);
+	if (key === "Home" || key === "End") {
+		if (modifiers.ctrlKey || current === -1) return key === "Home" ? first : last;
+		const inRow = enabled.filter((index) => row(index) === row(current));
+		return key === "Home" ? inRow[0] ?? current : inRow[inRow.length - 1] ?? current;
+	}
+	if (modifiers.ctrlKey) return void 0;
+	const forwardKey = options.direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const backwardKey = options.direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+	const axis = key === forwardKey || key === backwardKey ? "row" : key === "ArrowDown" || key === "ArrowUp" ? "column" : void 0;
+	if (axis === void 0) return void 0;
+	const step = key === forwardKey || key === "ArrowDown" ? 1 : -1;
+	if (current === -1) return step === 1 ? first : last;
+	if (axis === "row") {
+		for (let index = current + step; index >= 0 && index < count; index += step) {
+			if (!options.wrap && row(index) !== row(current)) return current;
+			if (isEnabled(index)) return index;
+		}
+		return current;
+	}
+	const column = current % columns;
+	for (let index = current + step * columns;; index += step * columns) {
+		if (index < 0 || index >= count) {
+			if (!options.wrap) return current;
+			const nextColumn = column + step;
+			if (nextColumn < 0 || nextColumn >= columns) return current;
+			const start = step === 1 ? nextColumn : nextColumn + columns * Math.floor((count - 1 - nextColumn) / columns);
+			for (let next = start; next >= 0 && next < count; next += step * columns) if (isEnabled(next)) return next;
+			return current;
+		}
+		if (isEnabled(index)) return index;
+	}
+};
+/**
+* Wires a placed `GridNavigation` to the slots exactly as `RovingTabindex`
+* does, with `move` above deciding the cell: the container's arrows, Home and
+* End focus the next cell (synchronously, then dispatch) or, under `virtual`,
+* only dispatch and point with `aria-activedescendant`; each cell gets
+* `tabindex` 0 or -1 and reports `Focused` when focused.
+*/
+const behavior$9 = (declared, args) => (slots) => (options) => {
+	const wrap = (id) => declared.wrapper.make(Message$7.Focused({ id }));
+	const slice = (input) => input[declared.field];
+	const itemsOf = perInput(options.items);
+	return Behavior.forSlots(slots)({
+		[options.container]: Behavior.slot({
+			requires: { capability: Capability.Interactive },
+			attributes: ({ input, h }) => {
+				const items = itemsOf(input);
+				const current = slice(input).current;
+				const from = current === null ? -1 : items.indexOf(current);
+				const direction = options.direction?.(input) ?? "ltr";
+				const stop = tabStop$1(items, current);
+				const stopId = stop === -1 ? void 0 : items.ids[stop];
+				const target = (key, modifiers) => {
+					const next = move$1(items.enabled, items.size, from, key, modifiers, {
+						columns: args.columns,
+						wrap: args.wrap,
+						direction
+					});
+					return next === void 0 ? void 0 : items.ids[next];
+				};
+				if (args.virtual) return [h.OnKeyDownPreventDefault((key, modifiers) => Option.map(Option.fromNullishOr(target(key, modifiers)), wrap)), ...stopId === void 0 ? [] : [h.AriaActiveDescendant(stopId)]];
+				return [h.OnKeyDownFocus((key, modifiers) => Option.map(Option.fromNullishOr(target(key, modifiers)), (id) => ({
+					focusSelector: idSelector(id),
+					message: wrap(id)
+				})))];
+			}
+		}),
+		[options.item]: Behavior.slot({
+			requires: { capability: Capability.Focusable },
+			attributes: ({ input, h, item }) => {
+				if (item === void 0) return [];
+				return itemAttributes(h, itemsOf(input), slice(input).current, item, args.virtual, wrap);
+			}
+		})
+	}, { name: "GridNavigation" });
+};
+//#endregion
+//#region src/interaction/layers.ts
+var layers_exports = /* @__PURE__ */ __exportAll({
+	hideOutside: () => hideOutside,
+	hideOutsideMount: () => HideOutside,
+	scrollLock: () => scrollLock,
+	scrollLockMount: () => ScrollLock
+});
+const mountOn = (name, mount) => (slots) => (options) => Behavior.forSlots(slots)({ [options.container]: Behavior.slot({
+	requires: { capability: Capability.Container },
+	mount
+}) }, { name });
+/** Locks the document's scroll while the container is mounted; nested locks release together. */
+const scrollLock = mountOn("ScrollLock", () => ScrollLock());
+/** Marks everything outside the container inert while it is mounted. */
+const hideOutside = mountOn("HideOutside", () => HideOutside());
+//#endregion
+//#region src/interaction/live-announce.ts
+/**
+* Announcements for assistive technology: one Bundle, placed once, holds the
+* text of a polite and an assertive live region. An announcement waits
+* `debounceMs` so a burst reads once, then clears after `clearAfterMs`, both
+* on Effect's clock with a generation so a superseded timer changes nothing.
+* The same text twice gets a trailing no-break space toggled, which is what
+* makes a screen reader read it again. `view` renders the two regions; put it
+* once in the page and style them visually hidden.
+*/
+var live_announce_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$6,
+	Message: () => Message$6,
+	Model: () => Model$6,
+	Politeness: () => Politeness,
+	REGION_ATTRIBUTE: () => REGION_ATTRIBUTE,
+	bundle: () => bundle$6,
+	reread: () => reread,
+	say: () => say,
+	view: () => view
+});
+const Politeness = Schema.Literals(["polite", "assertive"]);
+const Model$6 = Schema.Struct({
+	polite: Schema.String,
+	assertive: Schema.String,
+	/** Waiting for the debounce to read. */
+	pending: Schema.NullOr(Schema.Struct({
+		message: Schema.String,
+		politeness: Politeness
+	})),
+	generation: Schema.Number
+});
+const Message$6 = defineMessageUnion({
+	Announced: {
+		message: Schema.String,
+		politeness: Politeness
+	},
+	Read: { generation: Schema.Number },
+	Cleared: { generation: Schema.Number }
+});
+const positive = Schema.Number.pipe(Schema.check(Schema.isGreaterThanOrEqualTo(0)), Schema.check(Schema.isFinite()));
+const Args$6 = Schema.Struct({
+	/** A burst of announcements inside this window reads once, the last one. */
+	debounceMs: positive,
+	/** How long the text stays in the region. */
+	clearAfterMs: positive
+});
+const NBSP = "\xA0";
+/** The text to put in the region so that `next` is read even when it equals `current`. */
+const reread = (current, next) => current === next ? `${next}${NBSP}` : current === `${next}${NBSP}` ? next : next;
+const after = (ms, message, name, generation) => ({
+	name,
+	args: { generation },
+	effect: Effect.as(Effect.sleep(ms), message)
+});
+const bundle$6 = Bundle.make("LiveAnnounce", {
+	Model: Model$6,
+	Message: Message$6,
+	args: Args$6,
+	init: () => ({ model: {
+		polite: "",
+		assertive: "",
+		pending: null,
+		generation: 0
+	} }),
+	update: (model, message, args) => Message$6.match(message, {
+		Announced: ({ message: text, politeness }) => {
+			const generation = model.generation + 1;
+			return {
+				model: {
+					...model,
+					pending: {
+						message: text,
+						politeness
+					},
+					generation
+				},
+				commands: [after(args.debounceMs, Message$6.Read({ generation }), "LiveAnnounce.read", generation)]
+			};
+		},
+		Read: ({ generation }) => {
+			if (generation !== model.generation || model.pending === null) return { model };
+			const { message: text, politeness } = model.pending;
+			const region = politeness === "polite" ? "polite" : "assertive";
+			return {
+				model: {
+					...model,
+					pending: null,
+					[region]: reread(model[region], text)
+				},
+				commands: [after(args.clearAfterMs, Message$6.Cleared({ generation }), "LiveAnnounce.clear", generation)]
+			};
+		},
+		Cleared: ({ generation }) => generation === model.generation ? { model: {
+			...model,
+			polite: "",
+			assertive: ""
+		} } : { model }
+	})
+});
+/** The parent Message that announces `text`, to return from `update` or `onOut`. */
+const say = (declared) => (text, politeness = "polite") => declared.wrapper.make(Message$6.Announced({
+	message: text,
+	politeness
+}));
+const REGION_ATTRIBUTE = "data-foldkit-plus-live";
+/**
+* The two live regions. Render once, anywhere in the page, and hide them
+* visually with a rule on `[data-foldkit-plus-live]`; they must stay in the
+* accessibility tree, so no `display: none`.
+*/
+const view = (model, h) => h.div([h.Attribute(REGION_ATTRIBUTE, "regions")], [h.div([
+	h.Attribute(REGION_ATTRIBUTE, "polite"),
+	h.AriaLive("polite"),
+	h.AriaAtomic(true)
+], [model.polite]), h.div([
+	h.Attribute(REGION_ATTRIBUTE, "assertive"),
+	h.AriaLive("assertive"),
+	h.AriaAtomic(true)
+], [model.assertive])]);
+//#endregion
+//#region src/interaction/typeahead.ts
+/**
+* Typeahead over a set of items: printable keys build a query that a timer
+* clears, and the query picks the item to move to. The query lives in the
+* Model so a replay sees the same picks; the timer runs on Effect's clock so
+* TestClock drives it. Which item matches is a pure function.
+*/
+var typeahead_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$5,
+	Message: () => Message$5,
+	Model: () => Model$5,
+	behavior: () => behavior$8,
+	bundle: () => bundle$5,
+	isPrintable: () => isPrintable,
+	match: () => match
+});
+const Model$5 = Schema.Struct({
+	query: Schema.String,
+	/** Bumped per keystroke, carried by the clear it schedules, so a superseded
+	*  timer's `Expired` changes nothing. */
+	generation: Schema.Number
+});
+const Message$5 = defineMessageUnion({
+	/** A printable key was pressed with no ctrl, alt or meta. */
+	Typed: { char: Schema.String },
+	/** The clear timer fired for `generation`. */
+	Expired: { generation: Schema.Number },
+	/** The query was dropped on purpose (a blur, a selection). */
+	Cleared: {}
+});
+const Args$5 = Schema.Struct({ 
+/** How long the query survives after the last key. */
+timeoutMs: Schema.Number.pipe(Schema.check(Schema.isGreaterThan(0)), Schema.check(Schema.isFinite())) });
+const bundle$5 = Bundle.make("Typeahead", {
+	Model: Model$5,
+	Message: Message$5,
+	args: Args$5,
+	init: () => ({ model: {
+		query: "",
+		generation: 0
+	} }),
+	update: (model, message, args) => Message$5.match(message, {
+		Typed: ({ char }) => {
+			const generation = model.generation + 1;
+			return {
+				model: {
+					query: model.query + char,
+					generation
+				},
+				commands: [{
+					name: "Typeahead.expire",
+					args: { generation },
+					effect: Effect.as(Effect.sleep(args.timeoutMs), Message$5.Expired({ generation }))
+				}]
+			};
+		},
+		Expired: ({ generation }) => generation === model.generation ? clearQuery(model) : { model },
+		Cleared: () => clearQuery(model)
+	})
+});
+const normalize = (text) => text.trimStart().toLocaleLowerCase();
+const isRepeated = (query) => query.length > 1 && [...query].every((char) => char === query[0]);
+/**
+* The enabled index whose text starts with `query`, searching forward from
+* `current` and wrapping, or `undefined`. A query of one character, or one
+* character repeated (`aaa`), starts *after* the current item so repeated
+* presses cycle through the items that begin with it; a longer query starts
+* *at* the current item, since the user is refining a match. Case and leading
+* whitespace are ignored.
+*/
+const match = (texts, enabled, query, current) => {
+	if (query === "" || enabled.length === 0) return void 0;
+	const needle = normalize(isRepeated(query) ? query[0] : query);
+	const position = enabled.indexOf(current);
+	const startAfter = needle.length === 1 || isRepeated(query);
+	const start = position === -1 ? 0 : startAfter ? position + 1 : position;
+	for (let offset = 0; offset < enabled.length; offset += 1) {
+		const index = enabled[(start + offset) % enabled.length];
+		if (normalize(texts[index] ?? "").startsWith(needle)) return index;
+	}
+};
+/** A single character with no ctrl, alt or meta: a typeahead key. */
+const isPrintable = (key, modifiers) => key.length === 1 && !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey;
+/**
+* Wires a placed `Typeahead` to the host slot: a printable key extends the
+* query, focuses the matching item by its id (which then reports itself
+* current, through `RovingTabindex`'s `OnFocus`), and dispatches `Typed`.
+* With no match the key still extends the query, so the next one can match;
+* a space with an empty query is left to the host (it activates).
+*/
+const behavior$8 = (declared) => (slots) => (options) => {
+	const wrap = (char) => declared.wrapper.make(Message$5.Typed({ char }));
+	return Behavior.forSlots(slots)({ [options.host]: Behavior.slot({
+		requires: { capability: Capability.Interactive },
+		attributes: ({ input, h }) => {
+			const items = options.items(input);
+			const query = input[declared.field].query;
+			const currentId = options.current(input);
+			const current = currentId === null ? -1 : items.indexOf(currentId);
+			return [h.OnKeyDownFocus((key, modifiers) => {
+				if (!isPrintable(key, modifiers)) return Option.none();
+				if (key === " " && query === "") return Option.none();
+				const texts = items.ids.map((_, index) => options.text(input, index));
+				const found = match(texts, items.enabled, query + key, current);
+				const target = found === void 0 ? currentId : items.ids[found];
+				return Option.some({
+					focusSelector: target === null || target === void 0 ? ":not(*)" : idSelector(target),
+					message: wrap(key)
+				});
+			})];
+		}
+	}) }, { name: "Typeahead" });
+};
+//#endregion
+//#region src/interaction/list-navigation.ts
+/**
+* Keyboard navigation of a list in one placement: a roving tab stop, type to
+* find, and PageUp and PageDown. One Bundle holds the current item's id and
+* the typeahead query, so a printable key can move the pointer and extend the
+* query in one transition, which two placements cannot do under `virtual`.
+* The resolver allows one owner per event on a slot, so a host that needs
+* both arrows and typeahead takes this, not `RovingTabindex` plus `Typeahead`.
+*/
+var list_navigation_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$4,
+	Message: () => Message$4,
+	Model: () => Model$4,
+	behavior: () => behavior$7,
+	bundle: () => bundle$4,
+	keyOutcome: () => keyOutcome
+});
+const Model$4 = Schema.Struct({
+	current: Schema.NullOr(Schema.String),
+	query: Schema.String,
+	generation: Schema.Number
+});
+const Message$4 = defineMessageUnion({
+	/** An item became current: focused, or reached by a key. */
+	Focused: { id: Schema.String },
+	/** A printable key extended the query; `match` is the item it now picks, if any. */
+	Typed: {
+		char: Schema.String,
+		match: Schema.NullOr(Schema.String)
+	},
+	Expired: { generation: Schema.Number },
+	Cleared: {}
+});
+const Args$4 = Schema.Struct({
+	orientation: Orientation,
+	loop: Schema.Boolean,
+	virtual: Schema.Boolean,
+	/** How long the typeahead query survives after the last key. */
+	timeoutMs: Schema.Number.pipe(Schema.check(Schema.isGreaterThan(0)), Schema.check(Schema.isFinite())),
+	/** How many enabled items PageUp and PageDown move. */
+	page: Schema.Number.pipe(Schema.check(Schema.isInt()), Schema.check(Schema.isGreaterThan(0)))
+});
+const bundle$4 = Bundle.make("ListNavigation", {
+	Model: Model$4,
+	Message: Message$4,
+	args: Args$4,
+	init: () => ({ model: {
+		current: null,
+		query: "",
+		generation: 0
+	} }),
+	update: (model, message, args) => Message$4.match(message, {
+		Focused: ({ id }) => model.current === id ? { model } : { model: {
+			...model,
+			current: id
+		} },
+		Typed: ({ char, match }) => {
+			const generation = model.generation + 1;
+			return {
+				model: {
+					current: match ?? model.current,
+					query: model.query + char,
+					generation
+				},
+				commands: [{
+					name: "ListNavigation.expire",
+					args: { generation },
+					effect: Effect.as(Effect.sleep(args.timeoutMs), Message$4.Expired({ generation }))
+				}]
+			};
+		},
+		Expired: ({ generation }) => generation === model.generation ? clearQuery(model) : { model },
+		Cleared: () => clearQuery(model)
+	})
+});
+const keyOutcome = (items, texts, state, key, modifiers, options) => {
+	const from = state.current === null ? -1 : items.indexOf(state.current);
+	const moved = move$2(items.enabled, from, key, modifiers, options);
+	const movedId = moved === void 0 ? void 0 : items.ids[moved];
+	if (movedId !== void 0) return {
+		_tag: "Navigate",
+		id: movedId
+	};
+	if (!isPrintable(key, modifiers)) return void 0;
+	if (key === " " && state.query === "") return void 0;
+	const found = match(texts, items.enabled, state.query + key, from);
+	return {
+		_tag: "Type",
+		char: key,
+		match: found === void 0 ? null : items.ids[found] ?? null
+	};
+};
+/**
+* Wires a placed `ListNavigation` to the slots. The container gets one key
+* handler: arrows, Home, End, PageUp and PageDown move by id; a printable key
+* extends the query and moves to its match. Each item gets `tabindex` and
+* `OnFocus` as under `RovingTabindex`. Under `virtual` nothing takes DOM focus
+* and the container carries `aria-activedescendant`.
+*/
+const behavior$7 = (declared, args) => (slots) => (options) => {
+	const wrap = (message) => declared.wrapper.make(message);
+	const focused = (id) => wrap(Message$4.Focused({ id }));
+	const slice = (input) => input[declared.field];
+	const itemsOf = perInput(options.items);
+	const outcomeMessage = (outcome) => outcome._tag === "Navigate" ? focused(outcome.id) : wrap(Message$4.Typed({
+		char: outcome.char,
+		match: outcome.match
+	}));
+	return Behavior.forSlots(slots)({
+		[options.container]: Behavior.slot({
+			requires: { capability: Capability.Interactive },
+			attributes: ({ input, h }) => {
+				const items = itemsOf(input);
+				const state = slice(input);
+				const moveOptions = {
+					orientation: args.orientation,
+					loop: args.loop,
+					direction: options.direction?.(input) ?? "ltr",
+					page: args.page
+				};
+				const outcome = (key, modifiers) => Option.fromNullishOr(keyOutcome(items, items.ids.map((_, index) => options.text(input, index)), state, key, modifiers, moveOptions));
+				const stop = tabStop$1(items, state.current);
+				const stopId = stop === -1 ? void 0 : items.ids[stop];
+				if (args.virtual) return [h.OnKeyDownPreventDefault((key, modifiers) => Option.map(outcome(key, modifiers), outcomeMessage)), ...stopId === void 0 ? [] : [h.AriaActiveDescendant(stopId)]];
+				return [h.OnKeyDownFocus((key, modifiers) => Option.map(outcome(key, modifiers), (result) => {
+					const target = result._tag === "Navigate" ? result.id : result.match ?? state.current;
+					return {
+						focusSelector: target === null ? ":not(*)" : idSelector(target),
+						message: outcomeMessage(result)
+					};
+				}))];
+			}
+		}),
+		[options.item]: Behavior.slot({
+			requires: { capability: Capability.Focusable },
+			attributes: ({ input, h, item }) => item === void 0 ? [] : itemAttributes(h, itemsOf(input), slice(input).current, item, args.virtual, focused)
+		})
+	}, { name: "ListNavigation" });
+};
+//#endregion
+//#region src/interaction/press.ts
+/**
+* Press: pointer and keyboard activation of one element as one fact. A Mount
+* reports what the element saw (pointer down, up, cancel, key down, up,
+* click) with the detail Foldkit's declarative attributes do not carry; the
+* Bundle's `update` decides what counts as a press; the ghost click that
+* follows a touch is suppressed by a timed Command on Effect's clock, never
+* by a clock read in a handler. Activation is an OutMessage, `Pressed`, so
+* the placement must say what a press does.
+*/
+var press_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$3,
+	Message: () => Message$3,
+	Model: () => Model$3,
+	PointerType: () => PointerType,
+	Pressed: () => Pressed,
+	behavior: () => behavior$6,
+	bundle: () => bundle$3,
+	events: () => events
+});
+const PointerType = Schema.Literals([
+	"mouse",
+	"touch",
+	"pen",
+	"keyboard",
+	"virtual"
+]);
+const Model$3 = Schema.Struct({
+	/** Down and not yet released or cancelled. For styling. */
+	pressed: Schema.Boolean,
+	/** The pointer that pressed, so another pointer's up cannot release it. */
+	pointerId: Schema.NullOr(Schema.Number),
+	/** Enter or Space is down. */
+	key: Schema.NullOr(Schema.String),
+	/** A click arriving before this generation's window ends is the ghost of a pointer press. */
+	suppressing: Schema.NullOr(Schema.Number),
+	generation: Schema.Number
+});
+const Message$3 = defineMessageUnion({
+	PointerDown: {
+		pointerId: Schema.Number,
+		button: Schema.Number,
+		pointerType: Schema.String
+	},
+	PointerUp: {
+		pointerId: Schema.Number,
+		pointerType: Schema.String,
+		shiftKey: Schema.Boolean
+	},
+	PointerCancelled: { pointerId: Schema.Number },
+	KeyDown: {
+		key: Schema.String,
+		repeat: Schema.Boolean
+	},
+	KeyUp: {
+		key: Schema.String,
+		shiftKey: Schema.Boolean
+	},
+	/** `detail` is 0 for a click no pointer made: keyboard on a native control, or assistive technology. */
+	Clicked: {
+		detail: Schema.Number,
+		shiftKey: Schema.Boolean
+	},
+	Unsuppressed: { generation: Schema.Number }
+});
+const Pressed = Schema.TaggedStruct("Pressed", {
+	pointerType: PointerType,
+	/** Shift was held, for a range selection. */
+	shiftKey: Schema.Boolean
+});
+const Args$3 = Schema.Struct({ 
+/** How long after a pointer press a `click` is taken for its ghost. */
+clickSuppressionMs: Schema.Number.pipe(Schema.check(Schema.isGreaterThanOrEqualTo(0)), Schema.check(Schema.isFinite())) });
+const idle = (model) => ({
+	...model,
+	pressed: false,
+	pointerId: null,
+	key: null
+});
+const isActivationKey$1 = (key) => key === "Enter" || key === " ";
+const asPointerType = (raw) => raw === "touch" || raw === "pen" ? raw : "mouse";
+const bundle$3 = Bundle.make("Press", {
+	Model: Model$3,
+	Message: Message$3,
+	args: Args$3,
+	init: () => ({ model: {
+		pressed: false,
+		pointerId: null,
+		key: null,
+		suppressing: null,
+		generation: 0
+	} }),
+	update: (model, message, args) => Message$3.match(message, {
+		PointerDown: ({ pointerId, button }) => button !== 0 || model.pointerId !== null ? { model } : { model: {
+			...model,
+			pressed: true,
+			pointerId
+		} },
+		PointerUp: ({ pointerId, pointerType, shiftKey }) => {
+			if (model.pointerId !== pointerId) return { model };
+			const generation = model.generation + 1;
+			return {
+				model: {
+					...idle(model),
+					suppressing: generation,
+					generation
+				},
+				commands: [{
+					name: "Press.unsuppress",
+					args: { generation },
+					effect: Effect.as(Effect.sleep(args.clickSuppressionMs), Message$3.Unsuppressed({ generation }))
+				}],
+				outMessage: Pressed.make({
+					pointerType: asPointerType(pointerType),
+					shiftKey
+				})
+			};
+		},
+		PointerCancelled: ({ pointerId }) => model.pointerId === pointerId ? { model: idle(model) } : { model },
+		KeyDown: ({ key, repeat }) => !isActivationKey$1(key) || repeat || model.key !== null || model.pointerId !== null ? { model } : { model: {
+			...model,
+			pressed: true,
+			key
+		} },
+		KeyUp: ({ key, shiftKey }) => model.key === key ? {
+			model: idle(model),
+			outMessage: Pressed.make({
+				pointerType: "keyboard",
+				shiftKey
+			})
+		} : { model },
+		Clicked: ({ detail, shiftKey }) => detail === 0 ? {
+			model,
+			outMessage: Pressed.make({
+				pointerType: "virtual",
+				shiftKey
+			})
+		} : model.suppressing !== null ? { model } : {
+			model,
+			outMessage: Pressed.make({
+				pointerType: "mouse",
+				shiftKey
+			})
+		},
+		Unsuppressed: ({ generation }) => model.suppressing === generation ? { model: {
+			...model,
+			suppressing: null
+		} } : { model }
+	})
+});
+/**
+* The element's press-relevant events as facts. Enter and Space key downs
+* are default-prevented so a native control does not also click, and Space
+* does not scroll; the Bundle owns activation. An element marked
+* `aria-disabled="true"` (which the Behavior writes) reports nothing, read
+* at event time so a toggle needs no remount. Nothing else is decided here.
+*/
+const events = Mount.defineStream("PressEvents", {
+	messages: [
+		Message$3.PointerDown,
+		Message$3.PointerUp,
+		Message$3.PointerCancelled,
+		Message$3.KeyDown,
+		Message$3.KeyUp,
+		Message$3.Clicked
+	],
+	execute: ({ element }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const offer = (message) => {
+			if (element.getAttribute("aria-disabled") === "true") return;
+			Queue.offerUnsafe(queue, message);
+		};
+		const listeners = [
+			["pointerdown", (event) => {
+				const pointer = event;
+				offer(Message$3.PointerDown({
+					pointerId: pointer.pointerId ?? 0,
+					button: pointer.button ?? 0,
+					pointerType: pointer.pointerType ?? "mouse"
+				}));
+			}],
+			["pointerup", (event) => {
+				const pointer = event;
+				offer(Message$3.PointerUp({
+					pointerId: pointer.pointerId ?? 0,
+					pointerType: pointer.pointerType ?? "mouse",
+					shiftKey: pointer.shiftKey ?? false
+				}));
+			}],
+			["pointerleave", (event) => offer(Message$3.PointerCancelled({ pointerId: event.pointerId ?? 0 }))],
+			["pointercancel", (event) => offer(Message$3.PointerCancelled({ pointerId: event.pointerId ?? 0 }))],
+			["keydown", (event) => {
+				const key = event;
+				if (isActivationKey$1(key.key)) key.preventDefault();
+				offer(Message$3.KeyDown({
+					key: key.key,
+					repeat: key.repeat
+				}));
+			}],
+			["keyup", (event) => {
+				const key = event;
+				offer(Message$3.KeyUp({
+					key: key.key,
+					shiftKey: key.shiftKey
+				}));
+			}],
+			["click", (event) => {
+				const click = event;
+				offer(Message$3.Clicked({
+					detail: click.detail ?? 0,
+					shiftKey: click.shiftKey ?? false
+				}));
+			}]
+		];
+		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);
+	})))
+});
+/**
+* Attaches the events Mount to the target slot, mapped into the placement's
+* Messages, and writes `data-pressed` while down for styling. The element
+* decides nothing; a click, a touch, Enter, Space, or an assistive
+* technology's click all reach `update` and come out as one `Pressed`.
+*/
+const behavior$6 = (declared) => (slots) => (options) => Behavior.forSlots(slots)({ [options.target]: Behavior.slot({
+	requires: { capability: Capability.Interactive },
+	attributes: ({ input, h }) => [...input[declared.field].pressed ? [h.DataAttribute("pressed", "true")] : [], ...options.disabled?.(input) === true ? [h.AriaDisabled(true)] : []],
+	mount: () => Mount.mapMessage(events(), (message) => declared.wrapper.make(message))
+}) }, { name: "Press" });
+//#endregion
+//#region src/interaction/long-press.ts
+/**
+* LongPress: holding an element down for `thresholdMs` is one fact. It reads
+* the same facts `Press.events` reports; the threshold is a Command on
+* Effect's clock carrying a generation, so a release before it fires makes
+* its `Elapsed` a no-op. `LongPressed` is an OutMessage the placement must
+* handle. A short press is `Press`'s business, not this Bundle's.
+*/
+var long_press_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$2,
+	LongPressed: () => LongPressed,
+	Message: () => Message$2,
+	Model: () => Model$2,
+	behavior: () => behavior$5,
+	bundle: () => bundle$2
+});
+const Model$2 = Schema.Struct({
+	/** Down, and the threshold has not passed. */
+	holding: Schema.Boolean,
+	pointerId: Schema.NullOr(Schema.Number),
+	key: Schema.NullOr(Schema.String),
+	generation: Schema.Number
+});
+const Message$2 = defineMessageUnion({
+	PointerDown: {
+		pointerId: Schema.Number,
+		button: Schema.Number,
+		pointerType: Schema.String
+	},
+	PointerUp: {
+		pointerId: Schema.Number,
+		pointerType: Schema.String,
+		shiftKey: Schema.Boolean
+	},
+	PointerCancelled: { pointerId: Schema.Number },
+	KeyDown: {
+		key: Schema.String,
+		repeat: Schema.Boolean
+	},
+	KeyUp: {
+		key: Schema.String,
+		shiftKey: Schema.Boolean
+	},
+	Clicked: {
+		detail: Schema.Number,
+		shiftKey: Schema.Boolean
+	},
+	Elapsed: {
+		generation: Schema.Number,
+		pointerType: PointerType
+	}
+});
+const LongPressed = Schema.TaggedStruct("LongPressed", { pointerType: PointerType });
+const Args$2 = Schema.Struct({ thresholdMs: Schema.Number.pipe(Schema.check(Schema.isGreaterThan(0)), Schema.check(Schema.isFinite())) });
+const isActivationKey = (key) => key === "Enter" || key === " ";
+const released = (model) => ({
+	...model,
+	holding: false,
+	pointerId: null,
+	key: null
+});
+const start = (model, args, by, pointerType) => {
+	const generation = model.generation + 1;
+	return {
+		model: {
+			holding: true,
+			pointerId: "pointerId" in by ? by.pointerId : null,
+			key: "key" in by ? by.key : null,
+			generation
+		},
+		commands: [{
+			name: "LongPress.elapse",
+			args: { generation },
+			effect: Effect.as(Effect.sleep(args.thresholdMs), Message$2.Elapsed({
+				generation,
+				pointerType
+			}))
+		}]
+	};
+};
+const bundle$2 = Bundle.make("LongPress", {
+	Model: Model$2,
+	Message: Message$2,
+	args: Args$2,
+	init: () => ({ model: {
+		holding: false,
+		pointerId: null,
+		key: null,
+		generation: 0
+	} }),
+	update: (model, message, args) => Message$2.match(message, {
+		PointerDown: ({ pointerId, button, pointerType }) => button !== 0 || model.holding ? { model } : start(model, args, { pointerId }, pointerType === "touch" || pointerType === "pen" ? pointerType : "mouse"),
+		PointerUp: ({ pointerId }) => model.pointerId === pointerId ? { model: released(model) } : { model },
+		PointerCancelled: ({ pointerId }) => model.pointerId === pointerId ? { model: released(model) } : { model },
+		KeyDown: ({ key, repeat }) => !isActivationKey(key) || repeat || model.holding ? { model } : start(model, args, { key }, "keyboard"),
+		KeyUp: ({ key }) => model.key === key ? { model: released(model) } : { model },
+		Clicked: () => ({ model }),
+		Elapsed: ({ generation, pointerType }) => model.holding && model.generation === generation ? {
+			model: released(model),
+			outMessage: LongPressed.make({ pointerType })
+		} : { model }
+	})
+});
+/**
+* Attaches `Press.events` to the target, mapped into this placement's
+* Messages, and writes `data-holding` while the element is down. `Press` and
+* `LongPress` on one slot are refused by the resolver (two Mounts of one
+* name), so today a slot takes one of them.
+*/
+const behavior$5 = (declared) => (slots) => (options) => Behavior.forSlots(slots)({ [options.target]: Behavior.slot({
+	requires: { capability: Capability.Interactive },
+	attributes: ({ input, h }) => input[declared.field].holding ? [h.DataAttribute("holding", "true")] : [],
+	mount: () => Mount.mapMessage(events(), (fact) => declared.wrapper.make(fact))
+}) }, { name: "LongPress" });
+//#endregion
+//#region src/interaction/move.ts
+/**
+* `Move` as a Behavior: attaches the `foldkit-primitives/dom` Mount to a
+* draggable slot and maps its facts into the view's Messages. No Bundle: a
+* drag's meaning (a threshold, a snap, a reorder) is the parent's `update`,
+* and the deltas are already facts.
+*/
+var move_exports = /* @__PURE__ */ __exportAll({
+	MoveEnded: () => MoveEnded,
+	MoveStarted: () => MoveStarted,
+	Moved: () => Moved,
+	behavior: () => behavior$4,
+	mount: () => Move
+});
+const behavior$4 = (slots) => (options) => Behavior.forSlots(slots)({ [options.handle]: Behavior.slot({
+	requires: { capability: Capability.Draggable },
+	mount: () => Mount.mapMessage(Move(), options.toMessage)
+}) }, { name: "Move" });
+//#endregion
+//#region src/interaction/selection.ts
+/**
+* Selection over a set of items: which ids are selected, and the anchor a
+* range extends from. `mode` is `'single'` (a click replaces), `'multiple'`
+* (a click toggles), or `'none'`. Single mode keeps one item selected unless
+* `allowEmpty`. A range needs the items' order, which the view knows and the
+* Bundle does not, so `Ranged` carries it. The Behavior says the state in
+* ARIA and wires a plain click; a Shift range comes from `Press`, whose
+* `Pressed` carries `shiftKey`.
+*/
+var selection_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args$1,
+	Message: () => Message$1,
+	Mode: () => Mode,
+	Model: () => Model$1,
+	behavior: () => behavior$3,
+	between: () => between,
+	bundle: () => bundle$1
+});
+const Mode = Schema.Literals([
+	"single",
+	"multiple",
+	"none"
+]);
+const Model$1 = Schema.Struct({
+	/** In selection order. */
+	selected: Schema.Array(Schema.String),
+	/** Where the last plain selection happened; a range extends from it. */
+	anchor: Schema.NullOr(Schema.String)
+});
+const Message$1 = defineMessageUnion({
+	/** A plain activation: replaces in single mode, toggles in multiple mode. */
+	Activated: { id: Schema.String },
+	/** A Shift activation: selects everything between the anchor and `id` in `order`. */
+	Ranged: {
+		id: Schema.String,
+		order: Schema.Array(Schema.String)
+	},
+	Replaced: { ids: Schema.Array(Schema.String) },
+	Cleared: {}
+});
+const Args$1 = Schema.Struct({
+	mode: Mode,
+	/** In single mode, whether activating the selected item deselects it. */
+	allowEmpty: Schema.Boolean
+});
+const without = (ids, id) => ids.filter((other) => other !== id);
+/** The ids between `from` and `to` in `order`, inclusive, in `order`'s order. */
+const between = (order, from, to) => {
+	const end = order.indexOf(to);
+	if (end === -1) return [];
+	const start = from === null ? -1 : order.indexOf(from);
+	if (start === -1) return [to];
+	return order.slice(Math.min(start, end), Math.max(start, end) + 1);
+};
+const bundle$1 = Bundle.make("Selection", {
+	Model: Model$1,
+	Message: Message$1,
+	args: Args$1,
+	init: () => ({ model: {
+		selected: [],
+		anchor: null
+	} }),
+	update: (model, message, args) => Message$1.match(message, {
+		Activated: ({ id }) => {
+			if (args.mode === "none") return { model };
+			const isSelected = model.selected.includes(id);
+			if (args.mode === "single") return isSelected ? args.allowEmpty ? { model: {
+				selected: [],
+				anchor: id
+			} } : { model } : { model: {
+				selected: [id],
+				anchor: id
+			} };
+			return { model: {
+				selected: isSelected ? without(model.selected, id) : [...model.selected, id],
+				anchor: id
+			} };
+		},
+		Ranged: ({ id, order }) => {
+			if (args.mode !== "multiple") return { model };
+			const range = between(order, model.anchor, id);
+			const inRange = new Set(range);
+			const selected = [...model.selected.filter((other) => !inRange.has(other)), ...range];
+			const anchor = model.anchor ?? id;
+			return sameIds(selected, model.selected) && anchor === model.anchor ? { model } : { model: {
+				selected,
+				anchor
+			} };
+		},
+		Replaced: ({ ids }) => {
+			const selected = args.mode === "none" ? [] : [...new Set(ids)];
+			return sameIds(selected, model.selected) ? { model } : { model: {
+				selected,
+				anchor: model.anchor
+			} };
+		},
+		Cleared: () => model.selected.length === 0 ? { model } : { model: {
+			selected: [],
+			anchor: model.anchor
+		} }
+	})
+});
+/**
+* Writes `aria-selected` on each item from the placed slice, and
+* `aria-multiselectable` on the container in multiple mode; wires `OnClick`
+* to `Activated` unless told not to. A disabled item gets no click.
+*/
+const behavior$3 = (declared, args) => (slots) => (options) => {
+	const wrap = (message) => declared.wrapper.make(message);
+	const itemsOf = perInput(options.items);
+	const selectedOf = perInput((input) => new Set(input[declared.field].selected));
+	return Behavior.forSlots(slots)({
+		...options.container === void 0 ? {} : { [options.container]: Behavior.slot({
+			requires: { capability: Capability.Container },
+			attributes: ({ h }) => [h.AriaMultiSelectable(args.mode === "multiple")]
+		}) },
+		[options.item]: Behavior.slot({
+			requires: { capability: Capability.Interactive },
+			attributes: ({ input, h, item }) => {
+				if (item === void 0) return [];
+				const items = itemsOf(input);
+				const id = item.id ?? items.ids[item.index];
+				if (id === void 0) return [];
+				const clickable = options.click !== false && args.mode !== "none" && !items.isDisabled(item.index);
+				return [h.AriaSelected(selectedOf(input).has(id)), ...clickable ? [h.OnClick(wrap(Message$1.Activated({ id })))] : []];
+			}
+		})
+	}, { name: "Selection" });
+};
+//#endregion
+//#region src/interaction/targets.ts
+/**
+* `Targets` as a Behavior: attaches the `foldkit-primitives/dom` Mount to a
+* container slot and maps what it reports into the view's Messages. No Bundle:
+* which descendant is under the pointer, or was pressed, is already a fact, and
+* what it means is the parent's `update`.
+*/
+var targets_exports = /* @__PURE__ */ __exportAll({
+	TargetHovered: () => TargetHovered,
+	TargetPressed: () => TargetPressed,
+	behavior: () => behavior$2,
+	mount: () => Targets,
+	targetOf: () => targetOf
+});
+const behavior$2 = (slots) => (options) => Behavior.forSlots(slots)({ [options.container]: Behavior.slot({
+	requires: { capability: Capability.Container },
+	mount: () => Mount.mapMessage(Targets({
+		attribute: options.attribute,
+		preventDefault: options.preventDefault ?? false
+	}), options.toMessage)
+}) }, { name: "Targets" });
+//#endregion
+//#region src/interaction/pointer-drag.ts
+/**
+* `PointerDrag` as a Behavior: attaches the `foldkit-primitives/dom` Mount to
+* a container slot and maps what it reports into the view's Messages. No
+* Bundle: what is dragged and where the pointer is are facts, and what a drop
+* means, and whether it is allowed, is the parent's `update`.
+*/
+var pointer_drag_exports = /* @__PURE__ */ __exportAll({
+	DRAG_THRESHOLD: () => 4,
+	DragCancelled: () => DragCancelled,
+	DragDropped: () => DragDropped,
+	DragPlace: () => DragPlace,
+	DragStarted: () => DragStarted,
+	DragZone: () => DragZone,
+	DraggedOver: () => DraggedOver,
+	behavior: () => behavior$1,
+	boxOf: () => boxOf,
+	mount: () => PointerDrag,
+	zoneOf: () => zoneOf
+});
+const behavior$1 = (slots) => (options) => Behavior.forSlots(slots)({ [options.container]: Behavior.slot({
+	requires: { capability: Capability.Container },
+	mount: () => Mount.mapMessage(PointerDrag(options.targets === void 0 ? { attribute: options.attribute } : {
+		attribute: options.attribute,
+		targets: options.targets
+	}), options.toMessage)
+}) }, { name: "PointerDrag" });
+//#endregion
+//#region src/interaction/tree-navigation.ts
+/**
+* Keyboard navigation of a tree (a file explorer, a page's layers, a nested
+* menu), after the WAI-ARIA tree pattern: one tab stop, Up and Down through the
+* rows that are showing, Right to open a row or step into it, Left to close it
+* or step out to its parent, Home and End to the first and last row.
+*
+* The Model slice is the current row's id and which rows are open. Openness is
+* stored as the rows `toggled` away from a default, so a layers panel that
+* starts with everything open and a file tree that starts closed are the same
+* bundle with a different `openByDefault`, and neither stores every row.
+*
+* Which rows exist is the view's to say, each with its parent, in tree order.
+* What a key does is a pure function of those rows and the Model; the Behavior
+* wires it to the slots and writes the tree's ARIA attributes.
+*/
+var tree_navigation_exports = /* @__PURE__ */ __exportAll({
+	Args: () => Args,
+	Message: () => Message,
+	Model: () => Model,
+	behavior: () => behavior,
+	bundle: () => bundle,
+	isOpen: () => isOpen,
+	move: () => move,
+	shown: () => shown,
+	tabStop: () => tabStop
+});
+const Model = Schema.Struct({
+	/** The current row's id, or `null` before any row has been focused. */
+	current: Schema.NullOr(Schema.String),
+	/** The rows whose open state differs from `openByDefault`. */
+	toggled: Schema.Array(Schema.String)
+});
+const Message = defineMessageUnion({
+	/** A row became current: the user focused it, or a key moved there. */
+	Focused: { id: Schema.String },
+	Opened: { id: Schema.String },
+	Closed: { id: Schema.String }
+});
+const Args = Schema.Struct({ 
+/** Whether a row with children starts open. */
+openByDefault: Schema.Boolean });
+/** Whether a row is open, given the default and what was toggled. */
+const isOpen = (model, args, id) => args.openByDefault !== model.toggled.includes(id);
+const setOpen = (model, args, id, open) => isOpen(model, args, id) === open ? model : {
+	...model,
+	toggled: model.toggled.includes(id) ? model.toggled.filter((toggled) => toggled !== id) : [...model.toggled, id]
+};
+const bundle = Bundle.make("TreeNavigation", {
+	Model,
+	Message,
+	args: Args,
+	init: () => ({ model: {
+		current: null,
+		toggled: []
+	} }),
+	update: (model, message, args) => {
+		switch (message._tag) {
+			case "Focused": return model.current === message.id ? { model } : { model: {
+				...model,
+				current: message.id
+			} };
+			case "Opened": return { model: setOpen(model, args, message.id, true) };
+			case "Closed": return { model: setOpen(model, args, message.id, false) };
+		}
+	}
+});
+/**
+* The rows that are showing: every row whose ancestors are all open, with its
+* level and its place among its siblings. A row whose parent is not a row is
+* treated as top-level.
+*/
+const shown = (rows, model, args) => {
+	const byId = new Map(rows.map((row) => [row.id, row]));
+	const siblingsOf = /* @__PURE__ */ new Map();
+	const positionOf = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		const parent = row.parent !== null && byId.has(row.parent) ? row.parent : null;
+		const count = (siblingsOf.get(parent) ?? 0) + 1;
+		siblingsOf.set(parent, count);
+		positionOf.set(row.id, count);
+	}
+	const levels = /* @__PURE__ */ new Map();
+	const showing = /* @__PURE__ */ new Map();
+	const result = [];
+	for (const row of rows) {
+		const parent = row.parent !== null && byId.has(row.parent) ? row.parent : null;
+		const level = parent === null ? 1 : (levels.get(parent) ?? 0) + 1;
+		levels.set(row.id, level);
+		const visible = parent === null || showing.get(parent) === true && isOpen(model, args, parent);
+		showing.set(row.id, visible);
+		if (!visible) continue;
+		result.push({
+			...row,
+			level,
+			position: positionOf.get(row.id) ?? 1,
+			siblings: siblingsOf.get(parent) ?? 1
+		});
+	}
+	return result;
+};
+const isPlain = (modifiers) => !modifiers.ctrlKey && !modifiers.altKey && !modifiers.metaKey;
+/**
+* What a key does from the current row, over the rows that are showing, or
+* `undefined` when it is not a key the tree handles. Disabled rows are stepped
+* over. With nothing current, Down and Home land on the first row, Up and End
+* on the last. Right and Left swap under `rtl`.
+*/
+const move = (rows, current, key, modifiers, model, args, direction = "ltr") => {
+	const enabled = rows.filter((row) => row.disabled !== true);
+	if (enabled.length === 0 || !isPlain(modifiers)) return void 0;
+	const focus = (row) => row === void 0 ? void 0 : {
+		_tag: "Focus",
+		id: row.id
+	};
+	const at = enabled.findIndex((row) => row.id === current);
+	const inward = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const outward = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+	if (key === "Home") return focus(enabled[0]);
+	if (key === "End") return focus(enabled[enabled.length - 1]);
+	if (key === "ArrowDown") return focus(at === -1 ? enabled[0] : enabled[Math.min(at + 1, enabled.length - 1)]);
+	if (key === "ArrowUp") return focus(at === -1 ? enabled[enabled.length - 1] : enabled[Math.max(at - 1, 0)]);
+	const row = enabled[at];
+	if (row === void 0) return key === inward || key === outward ? focus(enabled[0]) : void 0;
+	if (key === inward) {
+		if (!row.branch) return void 0;
+		if (!isOpen(model, args, row.id)) return {
+			_tag: "Open",
+			id: row.id
+		};
+		return focus(enabled.find((child) => child.parent === row.id));
+	}
+	if (key === outward) {
+		if (row.branch && isOpen(model, args, row.id)) return {
+			_tag: "Close",
+			id: row.id
+		};
+		return focus(enabled.find((parent) => parent.id === row.parent));
+	}
+};
+/** The row that holds the tab stop: the current one while it is showing, else the first. */
+const tabStop = (rows, current) => {
+	return (rows.find((row) => row.id === current && row.disabled !== true) ?? rows.find((row) => row.disabled !== true))?.id;
+};
+/**
+* Wires a placed `TreeNavigation` to the slots. The container's keys move focus
+* to the row they pick, or open or close the current row with focus left where
+* it is. Each showing row gets its id, `role="treeitem"`, `aria-level` (and
+* the same level as `--fk-tree-level`, so one `calc` indents any depth),
+* `aria-posinset`, `aria-setsize`, `aria-expanded` when it has children,
+* `aria-disabled` when disabled, a roving `tabindex`, and `OnFocus` reporting
+* it current. Every handled key is default-prevented.
+*/
+const behavior = (declared, args) => (slots) => (options) => {
+	const wrap = (message) => declared.wrapper.make(message);
+	const slice = (input) => input[declared.field];
+	const domId = options.domId ?? ((id) => id);
+	const prepare = perInput((input) => {
+		const model = slice(input);
+		const rows = shown(options.rows(input), model, args);
+		return {
+			model,
+			rows,
+			byId: new Map(rows.map((row) => [row.id, row])),
+			stop: tabStop(rows, model.current)
+		};
+	});
+	return Behavior.forSlots(slots)({
+		[options.container]: Behavior.slot({
+			requires: { capability: Capability.Interactive },
+			mount: () => FollowTabStop(),
+			attributes: ({ input, h }) => {
+				const { model, rows } = prepare(input);
+				const direction = options.direction?.(input) ?? "ltr";
+				return [h.OnKeyDownFocus((key, modifiers) => {
+					const action = move(rows, model.current, key, modifiers, model, args, direction);
+					if (action === void 0) return Option.none();
+					const message = action._tag === "Focus" ? Message.Focused({ id: action.id }) : action._tag === "Open" ? Message.Opened({ id: action.id }) : Message.Closed({ id: action.id });
+					return Option.some({
+						focusSelector: idSelector(domId(action.id)),
+						message: wrap(message)
+					});
+				})];
+			}
+		}),
+		[options.item]: Behavior.slot({
+			requires: { capability: Capability.Focusable },
+			attributes: ({ input, h, item }) => {
+				if (item === void 0) return [];
+				const { model, rows, byId, stop } = prepare(input);
+				const row = item.id === void 0 ? rows[item.index] : byId.get(item.id);
+				if (row === void 0) return [];
+				return [
+					h.Id(domId(row.id)),
+					h.Role("treeitem"),
+					h.AriaLevel(row.level),
+					h.Style({ "--fk-tree-level": String(row.level) }),
+					h.AriaPosinset(row.position),
+					h.AriaSetsize(row.siblings),
+					...row.branch ? [h.AriaExpanded(isOpen(model, args, row.id))] : [],
+					...row.disabled === true ? [h.AriaDisabled(true)] : [],
+					h.Tabindex(stop === row.id ? 0 : -1),
+					h.OnFocus(wrap(Message.Focused({ id: row.id })))
+				];
+			}
+		})
+	}, { name: "TreeNavigation" });
+};
+//#endregion
+export { dismiss_layer_exports as DismissLayer, editable_text_exports as EditableText, focus_scope_exports as FocusScope, focus_visible_exports as FocusVisible, grid_navigation_exports as GridNavigation, layers_exports as Layers, list_navigation_exports as ListNavigation, live_announce_exports as LiveAnnounce, long_press_exports as LongPress, move_exports as Move, pointer_drag_exports as PointerDrag, press_exports as Press, roving_tabindex_exports as RovingTabindex, selection_exports as Selection, targets_exports as Targets, tree_navigation_exports as TreeNavigation, typeahead_exports as Typeahead };
+
+//# sourceMappingURL=index.mjs.map