@spinjs/components 0.1.0-preview.2 → 0.2.0-alpha.1

package/dist/runtime/actions/hover-delay.js

@@ -0,0 +1,61 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/hover-delay.ts
+/** Listen with automatic removal on destroy. Shared with the index's own actions. */
+function listen(node, type, handler) {
+	const listener = (event) => handler(event);
+	node.addEventListener(type, listener);
+	return () => node.removeEventListener(type, listener);
+}
+const hoverDelay = createAction((node, param) => {
+	let openTimer;
+	let closeTimer;
+	const clearOpen = () => {
+		clearTimeout(openTimer);
+		openTimer = void 0;
+	};
+	const clearClose = () => {
+		clearTimeout(closeTimer);
+		closeTimer = void 0;
+	};
+	const enter = (event) => {
+		if (event.pointerType === "touch") return;
+		clearClose();
+		if (openTimer !== void 0 || param?.onOpen === void 0) return;
+		const delay = param?.openDelay ?? 150;
+		if (delay <= 0) {
+			param?.onOpen?.();
+			return;
+		}
+		openTimer = setTimeout(() => {
+			openTimer = void 0;
+			param?.onOpen?.();
+		}, delay);
+	};
+	const leave = () => {
+		clearOpen();
+		if (closeTimer !== void 0 || param?.onClose === void 0) return;
+		const delay = param?.closeDelay ?? 100;
+		if (delay <= 0) {
+			param?.onClose?.();
+			return;
+		}
+		closeTimer = setTimeout(() => {
+			closeTimer = void 0;
+			param?.onClose?.();
+		}, delay);
+	};
+	const stops = [listen(node, "pointerenter", enter), listen(node, "pointerleave", leave)];
+	return {
+		update: (next) => {
+			param = next;
+		},
+		destroy: () => {
+			clearOpen();
+			clearClose();
+			for (const stop of stops) stop();
+		}
+	};
+});
+export { hoverDelay };
+
+//# sourceMappingURL=hover-delay.js.map

package/dist/runtime/actions/index.d.ts

@@ -0,0 +1,113 @@
+/**
+ * The actions Sail ships with the component library: one behavior per
+ * action, like uno utilities for behavior.
+ *
+ * Deliberately NOT here: anything that is a component rather than a
+ * behavior. A resizable pane is a component, not an action — but the
+ * REFLEXES inside one (listen for pointerdown on a handle, report deltas)
+ * are these.
+ *
+ * Shared house rules, enforced per action:
+ * - Mutate only the node: attributes, focus, scroll, class.
+ * - Write no styles. Visual state goes out as attributes; utilities paint.
+ * - Cross no element boundary. `send` (via param) is the only outward path.
+ * - Everything acquired is released in `destroy`.
+ */
+import { AnchorGeometry, AnchorParam, AnchorPlacement } from "./anchor.js";
+import { DragDelta, DragParam, DragPress } from "./drag.js";
+import { HoverDelayParam } from "./hover-delay.js";
+import { FormControlParam } from "./form-control.js";
+import { ObserveParam } from "./observe.js";
+import { ScrollIntoViewAction } from "./scroll-into-view.js";
+import { InteractOutsideDetail, InteractOutsideEvent, InteractOutsideParam } from "./interact-outside.js";
+import { SelectOptionsParam, SelectOptionsRow } from "./select-options.js";
+import { SelectFocusParam } from "./select-focus.js";
+import { DatePickerFocusParam } from "./date-picker-focus.js";
+import { InfiniteScrollParam } from "./infinite-scroll.js";
+import { ToastRegionParam, ToastRowParam, ToastTimerParam } from "./toast-actions.js";
+import { ElementAction, createAction, runAction } from "./action.js";
+export interface DismissableParam {
+  onOutside?: (event: PointerEvent) => void;
+  onEscape?: () => void;
+  /** Defer the outside listener a frame so the opening press doesn't dismiss. */
+  armedByFrame?: boolean;
+  /** An id whose element counts as inside: presses on it are the trigger's
+   * business, not a dismissal. Resolved by id so defs never query. */
+  excludeId?: string;
+  /** Treat the host's parent element as inside (submenu levels dismiss
+   * through their parent, not past it). */
+  excludeParent?: boolean;
+}
+export declare const dismissable: ElementAction<DismissableParam | undefined>;
+export interface AutoplayParam {
+  /** Ticks are how the machine advances; the action owns only the clock. */
+  onTick?: () => void;
+  interval?: number;
+  enabled?: boolean;
+}
+export declare const autoplay: ElementAction<AutoplayParam | undefined>;
+export interface HoverIntentParam {
+  /** Fired once the pointer has rested on the node for `delay`. */
+  onOpen?: () => void;
+  /** Fired when the pointer leaves the node after an open fired. */
+  onClose?: () => void;
+  /** Dwell before opening. */
+  delay?: number;
+}
+export declare const hoverIntent: ElementAction<HoverIntentParam | undefined>;
+export interface LongPressParam {
+  onPress?: (point: {
+    x: number;
+    y: number;
+  }) => void;
+  onCancel?: () => void;
+  /** Dwell before firing. */
+  delay?: number;
+}
+export declare const longPress: ElementAction<LongPressParam | undefined>;
+export interface DragScrollParam {
+  onDragStart?: () => void;
+  onDragEnd?: (velocity: number) => void;
+}
+export declare const dragScroll: ElementAction<DragScrollParam | undefined>;
+export interface IntersectParam {
+  onVisibility?: (visible: boolean) => void;
+  threshold?: number;
+}
+export declare const intersect: ElementAction<IntersectParam | undefined>;
+export interface ResizeObserverParam {
+  onResize?: (size: {
+    width: number;
+    height: number;
+  }) => void;
+}
+export declare const resizeObserver: ElementAction<ResizeObserverParam | undefined>;
+/**
+ * The registry: the `use:` vocabulary. Machines and markup reference
+ * actions BY NAME from this table; nothing else resolves.
+ */
+export declare const ACTIONS: {
+  readonly anchor: ElementAction<AnchorParam | undefined>;
+  readonly drag: ElementAction<DragParam | undefined>;
+  readonly "hover-delay": ElementAction<HoverDelayParam | undefined>;
+  readonly dismissable: ElementAction<DismissableParam | undefined>;
+  readonly autoplay: ElementAction<AutoplayParam | undefined>;
+  readonly "hover-intent": ElementAction<HoverIntentParam | undefined>;
+  readonly "long-press": ElementAction<LongPressParam | undefined>;
+  readonly "drag-scroll": ElementAction<DragScrollParam | undefined>;
+  readonly intersect: ElementAction<IntersectParam | undefined>;
+  readonly "resize-observer": ElementAction<ResizeObserverParam | undefined>;
+  readonly "form-control": ElementAction<FormControlParam | undefined>;
+  readonly observe: ElementAction<ObserveParam | undefined>;
+  readonly "scroll-into-view": ScrollIntoViewAction;
+  readonly "interact-outside": ElementAction<InteractOutsideParam | undefined>;
+  readonly "select-options": ElementAction<SelectOptionsParam | undefined>;
+  readonly "select-focus": ElementAction<SelectFocusParam | undefined>;
+  readonly "date-picker-focus": ElementAction<DatePickerFocusParam | undefined>;
+  readonly "infinite-scroll": ElementAction<InfiniteScrollParam | undefined>;
+  readonly "toast-timer": ElementAction<ToastTimerParam>;
+  readonly "toast-row": ElementAction<ToastRowParam>;
+  readonly "toast-region": ElementAction<ToastRegionParam>;
+};
+export type ActionName = keyof typeof ACTIONS;
+export { type AnchorGeometry, type AnchorParam, type AnchorPlacement, type DatePickerFocusParam, type DragDelta, type DragParam, type DragPress, type ElementAction, type HoverDelayParam, type InteractOutsideDetail, type InteractOutsideEvent, type InteractOutsideParam, type ObserveParam, type SelectFocusParam, type SelectOptionsParam, type SelectOptionsRow, type ToastRegionParam, type ToastRowParam, type ToastTimerParam, createAction, runAction };

package/dist/runtime/actions/index.js

@@ -0,0 +1,240 @@
+import { createAction, runAction } from "./action.js";
+import { formControl } from "./form-control.js";
+import { anchor } from "./anchor.js";
+import { drag } from "./drag.js";
+import { hoverDelay } from "./hover-delay.js";
+import { observe } from "./observe.js";
+import { scrollIntoView } from "./scroll-into-view.js";
+import { interactOutside } from "./interact-outside.js";
+import { selectOptions } from "./select-options.js";
+import { selectFocus } from "./select-focus.js";
+import { datePickerFocus } from "./date-picker-focus.js";
+import { infiniteScroll } from "./infinite-scroll.js";
+import { toastRegion, toastRow, toastTimer } from "./toast-actions.js";
+// src/runtime/actions/index.ts
+/**
+* The actions Sail ships with the component library: one behavior per
+* action, like uno utilities for behavior.
+*
+* Deliberately NOT here: anything that is a component rather than a
+* behavior. A resizable pane is a component, not an action — but the
+* REFLEXES inside one (listen for pointerdown on a handle, report deltas)
+* are these.
+*
+* Shared house rules, enforced per action:
+* - Mutate only the node: attributes, focus, scroll, class.
+* - Write no styles. Visual state goes out as attributes; utilities paint.
+* - Cross no element boundary. `send` (via param) is the only outward path.
+* - Everything acquired is released in `destroy`.
+*/
+function listen(target, type, handler, capture = false) {
+	target.addEventListener(type, handler, { capture });
+	return () => target.removeEventListener(type, handler, { capture });
+}
+const dismissable = createAction((node, param) => {
+	const outside = (event) => {
+		const target = event.target;
+		if (target && node.contains(target)) return;
+		if (param?.excludeId !== void 0 && target instanceof Element) {
+			const excluded = node.ownerDocument.getElementById(param.excludeId);
+			if (excluded !== null && excluded.contains(target)) return;
+		}
+		if (param?.excludeParent === true) {
+			const parent = node.parentElement;
+			if (parent !== null && target instanceof Element && parent.contains(target)) return;
+		}
+		param?.onOutside?.(event);
+	};
+	const escape = (event) => {
+		if (event.key === "Escape") param?.onEscape?.();
+	};
+	let cancelArm = () => {};
+	let stopDoc;
+	if (param?.armedByFrame === false) stopDoc = listen(document, "pointerdown", outside, true);
+	else {
+		const raf = requestAnimationFrame(() => {
+			stopDoc = listen(document, "pointerdown", outside, true);
+		});
+		cancelArm = () => cancelAnimationFrame(raf);
+	}
+	const stopKey = listen(document, "keydown", escape);
+	return { destroy: () => {
+		cancelArm();
+		stopDoc?.();
+		stopKey();
+	} };
+});
+const autoplay = createAction((_node, param) => {
+	let timer;
+	const clear = () => {
+		if (timer !== void 0) clearInterval(timer);
+		timer = void 0;
+	};
+	const start = (interval) => {
+		clear();
+		if (interval > 0) timer = setInterval(() => param?.onTick?.(), interval);
+	};
+	if (param?.enabled !== false) start(param?.interval ?? 3e3);
+	return {
+		update: (next) => {
+			if (next?.enabled === false) clear();
+			else start(next?.interval ?? 3e3);
+		},
+		destroy: clear
+	};
+});
+const hoverIntent = createAction((node, param) => {
+	let timer;
+	let opened = false;
+	const clear = () => {
+		clearTimeout(timer);
+		timer = void 0;
+	};
+	const enter = (event) => {
+		if (event.pointerType !== "mouse") return;
+		const delay = param?.delay ?? 200;
+		if (delay <= 0 || param?.onOpen === void 0) return;
+		clear();
+		timer = setTimeout(() => {
+			timer = void 0;
+			opened = true;
+			param?.onOpen?.();
+		}, delay);
+	};
+	const leave = () => {
+		clear();
+		if (!opened) return;
+		opened = false;
+		param?.onClose?.();
+	};
+	const stops = [listen(node, "pointerenter", enter), listen(node, "pointerleave", leave)];
+	return {
+		update: (next) => {
+			param = next;
+		},
+		destroy: () => {
+			clear();
+			for (const stop of stops) stop();
+		}
+	};
+});
+const longPress = createAction((node, param) => {
+	let timer;
+	const clear = () => {
+		clearTimeout(timer);
+		timer = void 0;
+	};
+	const arm = (event) => {
+		if (event.pointerType === "mouse") return;
+		const delay = param?.delay ?? 700;
+		if (delay <= 0 || param?.onPress === void 0) return;
+		clear();
+		const point = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		timer = setTimeout(() => {
+			timer = void 0;
+			param?.onPress?.(point);
+		}, delay);
+	};
+	const cancel = () => {
+		if (timer === void 0) return;
+		clear();
+		param?.onCancel?.();
+	};
+	const stops = [
+		listen(node, "pointerdown", arm),
+		listen(node, "pointerup", cancel),
+		listen(node, "pointermove", cancel),
+		listen(node, "pointercancel", cancel)
+	];
+	return {
+		update: (next) => {
+			param = next;
+		},
+		destroy: () => {
+			clear();
+			for (const stop of stops) stop();
+		}
+	};
+});
+const dragScroll = createAction((node, param) => {
+	let startX = 0;
+	let startScroll = 0;
+	let lastX = 0;
+	let lastAt = 0;
+	let dragging = false;
+	const down = (event) => {
+		dragging = true;
+		startX = lastX = event.clientX;
+		startScroll = node.scrollLeft;
+		lastAt = performance.now();
+		param?.onDragStart?.();
+	};
+	const move = (event) => {
+		if (!dragging) return;
+		node.scrollLeft = startScroll - (event.clientX - startX);
+		lastX = event.clientX;
+		lastAt = performance.now();
+	};
+	const up = () => {
+		if (!dragging) return;
+		dragging = false;
+		const dt = performance.now() - lastAt;
+		param?.onDragEnd?.(dt > 0 ? (lastX - startX) / dt : 0);
+	};
+	const stops = [
+		listen(node, "pointerdown", down),
+		listen(document, "pointermove", move),
+		listen(document, "pointerup", () => up())
+	];
+	return { destroy: () => stops.forEach((s) => s()) };
+});
+const intersect = createAction((node, param) => {
+	if (typeof IntersectionObserver !== "function") return;
+	const observer = new IntersectionObserver((entries) => {
+		param?.onVisibility?.(entries.some((entry) => entry.isIntersecting));
+	}, { threshold: param?.threshold ?? .5 });
+	observer.observe(node);
+	return { destroy: () => observer.disconnect() };
+});
+const resizeObserver = createAction((node, param) => {
+	if (typeof ResizeObserver !== "function") return;
+	const observer = new ResizeObserver((entries) => {
+		const box = entries[0]?.contentRect;
+		if (box) param?.onResize?.(box);
+	});
+	observer.observe(node);
+	return { destroy: () => observer.disconnect() };
+});
+/**
+* The registry: the `use:` vocabulary. Machines and markup reference
+* actions BY NAME from this table; nothing else resolves.
+*/
+const ACTIONS = {
+	anchor,
+	drag,
+	"hover-delay": hoverDelay,
+	dismissable,
+	autoplay,
+	"hover-intent": hoverIntent,
+	"long-press": longPress,
+	"drag-scroll": dragScroll,
+	intersect,
+	"resize-observer": resizeObserver,
+	"form-control": formControl,
+	observe,
+	"scroll-into-view": scrollIntoView,
+	"interact-outside": interactOutside,
+	"select-options": selectOptions,
+	"select-focus": selectFocus,
+	"date-picker-focus": datePickerFocus,
+	"infinite-scroll": infiniteScroll,
+	"toast-timer": toastTimer,
+	"toast-row": toastRow,
+	"toast-region": toastRegion
+};
+export { ACTIONS, autoplay, createAction, dismissable, dragScroll, hoverIntent, intersect, longPress, resizeObserver, runAction };
+
+//# sourceMappingURL=index.js.map

package/dist/runtime/actions/infinite-scroll.d.ts

@@ -0,0 +1,22 @@
+import { ElementAction } from "./action.js";
+/**
+ * infinite-scroll — report when a sentinel at the end of a list scrolls into
+ * view, INCLUDING when the content around it grows.
+ *
+ * A plain IntersectionObserver reports a change of visibility and nothing
+ * else, which is exactly the case an async list keeps producing: a page is
+ * appended, the sentinel is still in view, and no notification ever comes,
+ * so the list loads one page and stops. The observer's last known state is
+ * therefore re-reported whenever the element that grows with the content
+ * changes size, which is what makes a paged list drain without a scroll.
+ *
+ * The action mutates only the nodes it is given and holds no state that
+ * outlives them; the only outward path is `onLoadMore`.
+ */
+export interface InfiniteScrollParam {
+  /** Fired when the sentinel is in view and loading is not switched off. */
+  onLoadMore?: () => void;
+  /** True while there is anything left to load. */
+  enabled?: boolean;
+}
+export declare const infiniteScroll: ElementAction<InfiniteScrollParam | undefined>;

package/dist/runtime/actions/infinite-scroll.js

@@ -0,0 +1,33 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/infinite-scroll.ts
+const infiniteScroll = createAction((node, param) => {
+	let intersecting = false;
+	let enabled = param?.enabled !== false;
+	const report = () => {
+		if (!enabled || !intersecting) return;
+		param?.onLoadMore?.();
+	};
+	let stops = [];
+	const visibility = typeof IntersectionObserver === "function" ? new IntersectionObserver((entries) => {
+		intersecting = entries.some((entry) => entry.isIntersecting);
+		report();
+	}, { threshold: 0 }) : void 0;
+	visibility?.observe(node);
+	const content = node.parentElement;
+	const sizing = typeof ResizeObserver === "function" && content !== null ? new ResizeObserver(() => report()) : void 0;
+	if (content !== null) sizing?.observe(content);
+	stops = [() => visibility?.disconnect(), () => sizing?.disconnect()];
+	return {
+		update: (next) => {
+			param = next;
+			enabled = next?.enabled !== false;
+			report();
+		},
+		destroy: () => {
+			for (const stop of stops) stop();
+		}
+	};
+});
+export { infiniteScroll };
+
+//# sourceMappingURL=infinite-scroll.js.map

package/dist/runtime/actions/interact-outside.d.ts

@@ -0,0 +1,43 @@
+import { ElementAction } from "./action.js";
+/**
+ * interact-outside — report focus and pointer movement outside the node.
+ *
+ * The port of `trackInteractOutside`, which the editable uses to submit (or
+ * cancel) a field the user walks away from. A cancelable custom event fires
+ * on the node and `onInteractOutside` vetoes by calling `preventDefault`;
+ * this action hands the same event object to the same three callbacks, with
+ * the same veto.
+ *
+ * Two faithful details worth keeping:
+ *
+ * - The document listeners arm on the next frame. The press that OPENED the
+ *   surface is a pointerdown outside it, and arming immediately would make
+ *   that press close what it opened.
+ * - A focusin is ignored while a pointerdown is in flight: the pointerdown
+ *   has already reported, and the click's own focus move would report the
+ *   same interaction twice.
+ *
+ * The excluded set is a thunk so the caller resolves the parts it owns at
+ * event time; the node's own `aria-controls` targets count as inside, which
+ * is the `isControlledElement` rule.
+ */
+export interface InteractOutsideDetail {
+  readonly originalEvent: Event;
+  readonly contextmenu: boolean;
+  readonly focusable: boolean;
+  readonly target: EventTarget | null;
+}
+export interface InteractOutsideEvent {
+  readonly type: "pointerdown" | "focus";
+  readonly detail: InteractOutsideDetail;
+  defaultPrevented: boolean;
+  preventDefault(): void;
+}
+export interface InteractOutsideParam {
+  onPointerDownOutside?: (event: InteractOutsideEvent) => void;
+  onFocusOutside?: (event: InteractOutsideEvent) => void;
+  onInteractOutside?: (event: InteractOutsideEvent) => void;
+  /** Elements the report ignores — the caller's own controls. */
+  exclude?: () => readonly (Element | null)[];
+}
+export declare const interactOutside: ElementAction<InteractOutsideParam | undefined>;

package/dist/runtime/actions/interact-outside.js

@@ -0,0 +1,72 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/interact-outside.ts
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),details,[tabindex]:not([tabindex=\"-1\"])";
+const makeEvent = (type, originalEvent, target) => {
+	const event = {
+		type,
+		detail: {
+			originalEvent,
+			contextmenu: originalEvent.type === "contextmenu" || originalEvent.button === 2,
+			focusable: target instanceof Element && target.matches(FOCUSABLE),
+			target
+		},
+		defaultPrevented: false
+	};
+	event.preventDefault = () => {
+		event.defaultPrevented = true;
+	};
+	return event;
+};
+const interactOutside = createAction((node, param) => {
+	const excluded = (target) => {
+		if (!(target instanceof Element)) return false;
+		if (target.getAttribute("aria-controls") === node.id) return true;
+		return (param?.exclude?.() ?? []).some((el) => el !== null && (el === target || el.contains(target)));
+	};
+	const isOutside = (target) => {
+		if (!(target instanceof Element)) return false;
+		if (!target.isConnected) return false;
+		if (node.contains(target)) return false;
+		return !excluded(target);
+	};
+	const report = (type, originalEvent, target) => {
+		const event = makeEvent(type, originalEvent, target);
+		if (type === "pointerdown") param?.onPointerDownOutside?.(event);
+		else param?.onFocusOutside?.(event);
+		param?.onInteractOutside?.(event);
+	};
+	let pointerInFlight = false;
+	const onPointerDown = (event) => {
+		pointerInFlight = true;
+		const release = () => {
+			pointerInFlight = false;
+		};
+		document.addEventListener("pointerup", release, { once: true });
+		if (isOutside(event.target)) report("pointerdown", event, event.target);
+	};
+	const onFocusIn = (event) => {
+		if (pointerInFlight) return;
+		if (isOutside(event.target)) report("focus", event, event.target);
+	};
+	const stops = [];
+	const arm = () => {
+		document.addEventListener("pointerdown", onPointerDown, true);
+		document.addEventListener("focusin", onFocusIn, true);
+		stops.push(() => document.removeEventListener("pointerdown", onPointerDown, true));
+		stops.push(() => document.removeEventListener("focusin", onFocusIn, true));
+	};
+	const frame = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => arm()) : null;
+	if (frame === null) arm();
+	return {
+		update: (next) => {
+			param = next;
+		},
+		destroy: () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			for (const stop of stops) stop();
+		}
+	};
+});
+export { interactOutside };
+
+//# sourceMappingURL=interact-outside.js.map

package/dist/runtime/actions/observe.d.ts

@@ -0,0 +1,27 @@
+import { ElementAction } from "./action.js";
+/**
+ * A MutationObserver on the node. Attribute changes on the node itself,
+ * element children removed from it, and one report when observation starts,
+ * for a state that already settled before the observer existed (an <img> out
+ * of a warm cache never fires load/error again). The machine decides what
+ * any of it means.
+ *
+ * Same shape and rules as the catalog's other observers: it observes, never
+ * reaches across element boundaries, holds nothing that outlives the node,
+ * and releases the observer in `destroy`.
+ *
+ * Added for the avatar port: image sources swap under a rendered node and
+ * images get removed while rendered, and nothing in the catalog watches
+ * either.
+ */
+export interface ObserveParam {
+  /** Attributes on the node itself to watch. */
+  attributes?: readonly string[];
+  /** An attribute in `attributes` changed. */
+  onAttributes?: (node: Element) => void;
+  /** An element child was removed from the node. */
+  onRemove?: (removed: Element) => void;
+  /** Observation started; the node's current state is readable now. */
+  onAttach?: () => void;
+}
+export declare const observe: ElementAction<ObserveParam | undefined>;

package/dist/runtime/actions/observe.js

@@ -0,0 +1,25 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/observe.ts
+const observe = createAction((node, param) => {
+	if (typeof MutationObserver !== "function") return;
+	const filter = param?.attributes ?? [];
+	const observer = new MutationObserver((records) => {
+		for (const record of records) {
+			if (record.type === "attributes") {
+				param?.onAttributes?.(node);
+				continue;
+			}
+			for (const removed of record.removedNodes) if (removed instanceof Element) param?.onRemove?.(removed);
+		}
+	});
+	observer.observe(node, {
+		childList: true,
+		attributes: true,
+		attributeFilter: [...filter]
+	});
+	param?.onAttach?.();
+	return { destroy: () => observer.disconnect() };
+});
+export { observe };
+
+//# sourceMappingURL=observe.js.map

package/dist/runtime/actions/scroll-into-view.d.ts

@@ -0,0 +1,32 @@
+/**
+ * scroll-into-view — bring the active descendant into view when it moves, and
+ * scroll the lists home when it goes away.
+ *
+ * The reflex behind `aria-activedescendant` navigation: a listbox that
+ * highlights by moving an id rather than focus gets no browser scrolling for
+ * free, so the highlighted row would sit outside a scrolled list. The active
+ * id is read through a thunk and the action's `update` runs on every machine
+ * move, so a host's `setHighlightValue` scrolls exactly like a keypress does.
+ *
+ * The two directions are one reflex: a new active id reveals that element
+ * (`scrollIntoView` with `block: "nearest"` — the browser's own scroll, no
+ * offset arithmetic, and the nearest scrollable ancestor is the one that
+ * moves), and the active id going away scrolls the lists back to the top,
+ * which is what a panel should show on its next open. A host that scrolls its
+ * own content supplies `reveal` and owns the how; the reflex still owns the
+ * when.
+ */
+export interface ScrollIntoViewParam {
+  /** The id of the element to reveal; empty when nothing is active. */
+  readonly activeId: () => string;
+  /** The host's own reveal, replacing the built-in scrollIntoView. */
+  readonly reveal?: () => void;
+  /** Reveal the item flush with the container's edge instead of nearest. */
+  readonly edge?: "start" | "end";
+}
+export interface ScrollIntoViewResult {
+  update?(param: ScrollIntoViewParam | undefined): void;
+  destroy?(): void;
+}
+export type ScrollIntoViewAction = (node: Element, param: ScrollIntoViewParam | undefined) => ScrollIntoViewResult | void;
+export declare const scrollIntoView: ScrollIntoViewAction;