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

package/dist/rating-group/rating-group.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/rating-group/rating-group.state.ts
 function ratingValue(raw) {
 	const n = typeof raw === "number" ? raw : Number(raw);

package/dist/rating-group/rating-group.transitions.d.ts

@@ -1,6 +1,6 @@
-import { RatingGroupContext } from "./rating-group.state.js";
 import { RatingGroupEvents } from "./rating-group.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { RatingGroupContext } from "./rating-group.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type RatingAssign<K extends keyof RatingGroupEvents = keyof RatingGroupEvents> = AssignFor<RatingGroupContext, RatingGroupEvents, K>;
 export declare const clearHoveredValue: () => Partial<RatingGroupContext>;
 export declare const setValue: RatingAssign<"CLICK" | "SPACE">;
@@ -12,5 +12,4 @@ export declare const arrowLeft: (ctx: RatingGroupContext) => Partial<RatingGroup
 export declare const arrowRight: (ctx: RatingGroupContext) => Partial<RatingGroupContext>;
 export declare const homeValue: () => Partial<RatingGroupContext>;
 export declare const endValue: (ctx: RatingGroupContext) => Partial<RatingGroupContext>;
-export {};
-//# sourceMappingURL=rating-group.transitions.d.ts.map
+export {};

package/dist/react/react.d.ts

@@ -1,5 +1,5 @@
 import { CtlFor, ElementTarget, spinComponentCtl } from "../controller.js";
-import { DefinedComponent } from "@spinjs/runtime";
+import { DefinedComponent } from "@spinjs/components/runtime";
 /**
  * React adapter: `useSpinComponent(el)` is the app controller's instrument.
  *
@@ -25,5 +25,4 @@ import { DefinedComponent } from "@spinjs/runtime";
  */
 export declare function useSpinComponent<D extends DefinedComponent<any, any>>(def: D): CtlFor<D>;
 export declare function useSpinComponent<D extends DefinedComponent<any, any>>(target: ElementTarget, def: D): CtlFor<D>;
-export declare function useSpinComponent<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>>(el: ElementTarget, handle?: object): ReturnType<typeof spinComponentCtl<TCommands, TState, TProps>>;
-//# sourceMappingURL=react.d.ts.map
+export declare function useSpinComponent<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>>(el: ElementTarget, handle?: object): ReturnType<typeof spinComponentCtl<TCommands, TState, TProps>>;

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

@@ -0,0 +1,64 @@
+/**
+ * The action contract: Svelte's, deliberately.
+ *
+ * An action is a function that receives the element it is attached to and a
+ * parameter, and may return `{ update, destroy }`. The runtime wires the
+ * lifecycle: call on mount, `update(param)` when the parameter's reactive
+ * reads change, `destroy()` when the element goes away.
+ *
+ * ```ts
+ * function myAction(node, params) {
+ *   const stop = listen(node, "click", params.onClick)
+ *   return { destroy: stop }
+ * }
+ * <div use:myAction={{ onClick }} />
+ * ```
+ *
+ * What an action may do — the whole gate, enforced by the shipped catalog
+ * and the contract tests, not by convention:
+ *
+ * - Mutate only the node it is given: attributes, focus, scroll, class.
+ * - Listen anywhere it must (document, observers) — observe, don't reach.
+ * - Read layout freely. Write NO styles: not `style.*`, not `cssText`, not
+ *   stylesheets. Visual state flows through attributes and utility classes;
+ *   that is what keeps the styling engine the single source of truth.
+ * - Cross element boundaries in one direction only: none. Coordination goes
+ *   through `send` events.
+ * - Hold no state that outlives the element. A timer, a drag offset, an
+ *   observer handle — all released in `destroy`.
+ *
+ * `param` is the only inbound channel. A machine that needs context reads
+ * it, resolves it, and passes the result as the param; actions never see
+ * the scope chain.
+ */
+export interface ActionResult<P = unknown> {
+  /** Called when the param's reactive dependencies change. */
+  update?(param: P): void;
+  /** Called once when the element unmounts. Release everything. */
+  destroy?(): void;
+}
+export type ElementAction<P = unknown> = (node: Element, param: P) => ActionResult<P> | void;
+/**
+ * Wrap an action so its setup does not track reactive reads: whatever the
+ * action reads at mount must not subscribe the surrounding effect. Params
+ * still flow through `update`, re-run by `runAction`'s effect.
+ */
+export declare function createAction<P>(fn: ElementAction<P>): ElementAction<P>;
+/**
+ * Attach an action with full lifecycle. The compiler target for
+ * `use:name={param}` and for bag-carried `use:` entries.
+ *
+ * The param is a thunk, not a value: an action that wanted it once would be
+ * a reaction to a value, and reactive re-params are the whole point. A
+ * missing thunk runs the action exactly once with `undefined`.
+ *
+ * The setup effect is owned by the surrounding scope, so it — and the
+ * destroy cleanup — release when the component unmounts. An action that
+ * outlived its element would be a leak nothing else can see; the scope is
+ * what makes that impossible rather than unlikely.
+ *
+ * A non-function is inert rather than fatal: a directive that threw because
+ * an action was not found would take the tree down, which tells an author
+ * less than a behavior that simply did not happen.
+ */
+export declare function runAction<P>(node: Element, action: ElementAction<P> | null | undefined, paramThunk?: () => P): void;

package/dist/runtime/actions/action.js

@@ -0,0 +1,45 @@
+import { effect, own, untrack } from "../core/signal.js";
+// src/runtime/actions/action.ts
+/**
+* Wrap an action so its setup does not track reactive reads: whatever the
+* action reads at mount must not subscribe the surrounding effect. Params
+* still flow through `update`, re-run by `runAction`'s effect.
+*/
+function createAction(fn) {
+	return (node, param) => untrack(() => fn(node, param) ?? void 0);
+}
+/**
+* Attach an action with full lifecycle. The compiler target for
+* `use:name={param}` and for bag-carried `use:` entries.
+*
+* The param is a thunk, not a value: an action that wanted it once would be
+* a reaction to a value, and reactive re-params are the whole point. A
+* missing thunk runs the action exactly once with `undefined`.
+*
+* The setup effect is owned by the surrounding scope, so it — and the
+* destroy cleanup — release when the component unmounts. An action that
+* outlived its element would be a leak nothing else can see; the scope is
+* what makes that impossible rather than unlikely.
+*
+* A non-function is inert rather than fatal: a directive that threw because
+* an action was not found would take the tree down, which tells an author
+* less than a behavior that simply did not happen.
+*/
+function runAction(node, action, paramThunk) {
+	if (typeof action !== "function") return;
+	let result;
+	let started = false;
+	effect(() => {
+		const param = paramThunk === void 0 ? void 0 : paramThunk();
+		if (!started) {
+			started = true;
+			result = action(node, param) ?? void 0;
+		} else result?.update?.(param);
+	});
+	own(() => {
+		result?.destroy?.();
+	});
+}
+export { createAction, runAction };
+
+//# sourceMappingURL=action.js.map

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

@@ -0,0 +1,43 @@
+import { ElementAction } from "./action.js";
+/**
+ * Position a floating node against an anchor, reporting the geometry the
+ * bag carries as custom properties.
+ *
+ * The platform owns the measurement: the anchor's rect against the
+ * positioner's offset parent, re-read on resize, scroll, and param change.
+ * The measurement reports through `onGeometry`, and the bag turns it into
+ * the style object the geometry channel owns (`--anchor-x/y/w`) — the
+ * action writes no styles itself, the same split the menu's anchor vars
+ * keep. The recipe's bracketed utilities decide what each var feeds, so
+ * the theme still owns appearance and the vars are data, not styles.
+ *
+ * Placement is a suggestion the viewport can veto: a panel below the
+ * anchor with no room below flips above, and the flip reports alongside
+ * the geometry so the origin utility can follow. Anything fancier
+ * (collision middleware, arrow centering) is a consumer decision, not
+ * this action's.
+ */
+export type AnchorPlacement = "top" | "bottom" | "left" | "right";
+export interface AnchorGeometry {
+  /** Anchor's left edge relative to the positioner's offset parent. */
+  readonly x: number;
+  /** Panel's top edge relative to the positioner's offset parent. */
+  readonly y: number;
+  /** Anchor width, for min-width matching. */
+  readonly w: number;
+  /** Anchor height, for a mask that frames it. */
+  readonly h: number;
+  /** The side the panel actually sits on, after the viewport's veto. */
+  readonly placement: AnchorPlacement;
+}
+export interface AnchorParam {
+  /** Element the panel positions against; the node's previous sibling when absent. */
+  readonly anchor?: Element | null;
+  /** Preferred side; flips when the preferred side has no room. */
+  readonly placement?: AnchorPlacement;
+  /** Gap between anchor and panel, in pixels. */
+  readonly offset?: number;
+  /** Fresh geometry; the bag turns this into custom properties. */
+  readonly onGeometry?: (geometry: AnchorGeometry) => void;
+}
+export declare const anchor: ElementAction<AnchorParam | undefined>;

package/dist/runtime/actions/anchor.js

@@ -0,0 +1,127 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/anchor.ts
+const anchor = createAction((node, param) => {
+	let current = param;
+	let last;
+	const resolveAnchor = () => current?.anchor instanceof Element ? current.anchor : node.previousElementSibling;
+	const resolveHost = () => node instanceof HTMLElement ? node.offsetParent ?? node.parentElement : null;
+	const measure = () => {
+		const anchorEl = resolveAnchor();
+		if (!(anchorEl instanceof HTMLElement)) return;
+		if (!(node instanceof HTMLElement)) return;
+		const topLayer = (() => {
+			try {
+				return node.matches(":popover-open");
+			} catch {
+				return false;
+			}
+		})();
+		const host = topLayer ? null : resolveHost();
+		if (!topLayer && host === null) return;
+		const gap = current?.offset ?? 8;
+		const want = current?.placement ?? "bottom";
+		const anchorRect = anchorEl.getBoundingClientRect();
+		const hostRect = host?.getBoundingClientRect();
+		const hostLeft = hostRect?.left ?? 0;
+		const hostTop = hostRect?.top ?? 0;
+		const hostBottom = hostRect?.bottom ?? globalThis.innerHeight ?? 0;
+		const panelHeight = node.offsetHeight;
+		const panelWidth = node.offsetWidth;
+		const viewportBottom = Number.isFinite(globalThis.innerHeight) ? globalThis.innerHeight : hostBottom;
+		const roomBelow = Math.max(hostBottom - anchorRect.bottom - gap, viewportBottom - anchorRect.bottom - gap);
+		const roomAbove = Math.max(anchorRect.top - hostTop - gap, anchorRect.top - gap);
+		const roomRight = (hostRect?.right ?? globalThis.innerWidth ?? 0) - anchorRect.right - gap;
+		const hostLeftEdge = hostRect?.left ?? 0;
+		const roomLeft = anchorRect.left - hostLeftEdge - gap;
+		const horizontal = want === "left" || want === "right";
+		const placement = horizontal ? want === "right" ? roomRight < panelWidth && roomLeft > roomRight ? "left" : "right" : roomLeft < panelWidth && roomRight > roomLeft ? "right" : "left" : want === "bottom" ? roomBelow < panelHeight && roomAbove > roomBelow ? "top" : "bottom" : roomAbove < panelHeight && roomBelow > roomAbove ? "bottom" : "top";
+		const viewportWidth = globalThis.innerWidth;
+		const shiftX = (x) => {
+			if (!Number.isFinite(viewportWidth) || !Number.isFinite(panelWidth)) return x;
+			const viewX = hostLeft + x;
+			const overflowRight = viewX + panelWidth + gap - viewportWidth;
+			if (overflowRight > 0) return Math.max(-hostLeft + gap, x - overflowRight);
+			const overflowLeft = gap - viewX;
+			if (overflowLeft > 0) return x + overflowLeft;
+			return x;
+		};
+		const geometry = horizontal ? {
+			x: placement === "right" ? anchorRect.right - hostLeft + gap : anchorRect.left - hostLeft - panelWidth - gap,
+			y: anchorRect.top - hostTop + (anchorRect.height - panelHeight) / 2,
+			w: anchorRect.width,
+			h: anchorRect.height,
+			placement
+		} : {
+			x: shiftX(anchorRect.left - hostLeft),
+			y: placement === "bottom" ? anchorRect.bottom - hostTop + gap : anchorRect.top - hostTop - panelHeight - gap,
+			w: anchorRect.width,
+			h: anchorRect.height,
+			placement
+		};
+		const key = `${geometry.x},${geometry.y},${geometry.w},${geometry.placement}`;
+		if (key === last) return;
+		last = key;
+		if (node instanceof HTMLElement) {
+			if (node.style.position === "") node.style.position = topLayer ? "fixed" : "absolute";
+			node.style.left = `${geometry.x}px`;
+			node.style.top = `${geometry.y}px`;
+			node.style.minWidth = `${geometry.w}px`;
+		}
+		current?.onGeometry?.(geometry);
+	};
+	const ro = typeof ResizeObserver === "function" ? new ResizeObserver(() => measure()) : void 0;
+	ro?.observe(node);
+	const scrollRoot = node.ownerDocument;
+	const onScroll = () => measure();
+	const onResize = () => measure();
+	const view = scrollRoot.defaultView;
+	scrollRoot.addEventListener("scroll", onScroll, {
+		capture: true,
+		passive: true
+	});
+	view?.addEventListener("resize", onResize);
+	measure();
+	const visibly = () => {
+		if (!(node instanceof HTMLElement)) return false;
+		if (node.hasAttribute("hidden")) return false;
+		try {
+			if (node.closest("[hidden]") !== null) return false;
+		} catch {
+			return false;
+		}
+		return true;
+	};
+	let shown = visibly();
+	const Mutation = (node.ownerDocument?.defaultView)?.MutationObserver ?? (typeof MutationObserver === "function" ? MutationObserver : void 0);
+	const watcher = Mutation !== void 0 ? new Mutation(() => {
+		const now = visibly();
+		if (now && !shown) measure();
+		shown = now;
+	}) : void 0;
+	if (watcher !== void 0 && node instanceof HTMLElement) {
+		watcher.observe(node, {
+			attributes: true,
+			attributeFilter: ["hidden"]
+		});
+		watcher.observe(node.parentElement ?? node.ownerDocument.documentElement, {
+			attributes: true,
+			attributeFilter: ["hidden"],
+			subtree: true
+		});
+	}
+	return {
+		update: (next) => {
+			current = next;
+			measure();
+		},
+		destroy: () => {
+			ro?.disconnect();
+			watcher?.disconnect();
+			scrollRoot.removeEventListener("scroll", onScroll, true);
+			view?.removeEventListener("resize", onResize);
+		}
+	};
+});
+export { anchor };
+
+//# sourceMappingURL=anchor.js.map

package/dist/runtime/actions/date-picker-focus.d.ts

@@ -0,0 +1,19 @@
+import { ElementAction } from "./action.js";
+/**
+ * date-picker-focus — move focus to the focused day when the panel opens.
+ *
+ * The `setInitialFocus` behaviour: a keyboard user who opened the calendar
+ * expects the arrow keys to move the focused day, and the trigger's own
+ * keys stop applying once the panel is up. The focused cell is the
+ * panel's tab stop, so opening hands it focus (unless focus already
+ * moved inside — a pointer that landed on a cell must not be yanked
+ * away).
+ *
+ * A reflex, so an action: it runs at attach and again whenever the
+ * open flag moves, and it focuses only the cell it is given.
+ */
+export interface DatePickerFocusParam {
+  readonly open: boolean;
+  readonly cellId: string;
+}
+export declare const datePickerFocus: ElementAction<DatePickerFocusParam | undefined>;

package/dist/runtime/actions/date-picker-focus.js

@@ -0,0 +1,16 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/date-picker-focus.ts
+const datePickerFocus = createAction((node, param) => {
+	if (param === void 0) return;
+	const apply = (current) => {
+		if (!current.open) return;
+		const active = document.activeElement;
+		if (active instanceof Node && node.contains(active)) return;
+		document.getElementById(current.cellId)?.focus?.();
+	};
+	apply(param);
+	return { update: apply };
+});
+export { datePickerFocus };
+
+//# sourceMappingURL=date-picker-focus.js.map

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

@@ -0,0 +1,66 @@
+import { ElementAction } from "./action.js";
+/**
+ * A pointer drag on a handle: pointerdown arms, pointermove reports the
+ * delta from the press point, pointerup ends, and Escape cancels back to
+ * the press point.
+ *
+ * The listeners live on the document once armed — the node is the handle,
+ * so the reports keep arriving even after the pointer leaves it. The
+ * machine sees three facts — START, MOVE (with the delta and the pressed
+ * modifiers), END — and decides what they mean; the gesture itself (the
+ * listeners, the escape hatch, the capture, the release) is all here.
+ *
+ * The pointer is CAPTURED on the handle for the gesture's life, so a
+ * release off the handle still ends the drag: the components that used to
+ * carry their own `setPointerCapture` helper now own the gesture through
+ * this action alone.
+ */
+export interface DragParam {
+  /** True while the gesture is legal (a maximized panel does not drag). */
+  readonly enabled?: boolean;
+  /** Capture the pointer on the handle for the gesture's life (default: true). */
+  readonly capture?: boolean;
+  /** Cancel the press's default (default: true). */
+  readonly preventDefault?: boolean;
+  /** Keep the press from reaching the handle's ancestors (default: false). */
+  readonly stopPropagation?: boolean;
+  /** Escape cancels the gesture (default: true). A handle whose gesture
+   * has no cancel path sets it false: Escape then does nothing. */
+  readonly cancelOnEscape?: boolean;
+  /** The press came down on the handle. */
+  readonly onStart?: (event: DragPress) => void;
+  /** The pointer moved; the delta is from the press point. */
+  readonly onMove?: (delta: DragDelta) => void;
+  /** The pointer came up or Escape arrived; `cancelled` reads which. */
+  readonly onEnd?: (end: {
+    readonly cancelled: boolean;
+  }) => void;
+}
+export interface DragPress {
+  readonly altKey: boolean;
+  readonly shiftKey: boolean;
+  /** The control key, when the press carried one. */
+  readonly ctrlKey?: boolean;
+  /** The meta key, when the press carried one. */
+  readonly metaKey?: boolean;
+  /** The press point, in client coordinates. */
+  readonly x: number;
+  /** The press point, in client coordinates. */
+  readonly y: number;
+  /** The pointer that owns the gesture. */
+  readonly pointerId: number;
+  /** The press's pressure: 0.5 for a mouse, the pen's force for a pen. */
+  readonly pressure: number;
+  /** What the press landed on: the handle, or something inside it. */
+  readonly target: EventTarget | null;
+  /** The handle's box, read where the gesture is reported. */
+  readonly rect: DOMRect | null;
+  /** The handle's direction at press time: mirroring math reads this,
+   * not a prop. */
+  readonly direction: "ltr" | "rtl";
+}
+export interface DragDelta extends DragPress {
+  readonly dx: number;
+  readonly dy: number;
+}
+export declare const drag: ElementAction<DragParam | undefined>;

package/dist/runtime/actions/drag.js

@@ -0,0 +1,118 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/drag.ts
+/** The handle's direction, read where the gesture is reported: direction
+* is platform truth (inherited, settable above the component), so it is
+* read at gesture time, never stored, never passed as a prop. */
+const directionOf = (node) => {
+	try {
+		return node.ownerDocument?.defaultView?.getComputedStyle(node).direction === "rtl" ? "rtl" : "ltr";
+	} catch {
+		return "ltr";
+	}
+};
+/** The handle's box, read where the gesture is reported: a handle that
+* measures itself is the action's job, not the caller's. */
+const boxOf = (node) => {
+	if (typeof node.getBoundingClientRect !== "function") return null;
+	try {
+		return node.getBoundingClientRect();
+	} catch {
+		return null;
+	}
+};
+const drag = createAction((node, param) => {
+	let originX = 0;
+	let originY = 0;
+	let pointerId = -1;
+	let captured = false;
+	let stop;
+	const end = (cancelled) => {
+		stop?.();
+		stop = void 0;
+		if (captured) {
+			captured = false;
+			const release = node.releasePointerCapture;
+			if (typeof release === "function") try {
+				release.call(node, pointerId);
+			} catch {}
+		}
+		param?.onEnd?.({ cancelled });
+	};
+	const arm = (event) => {
+		if (stop !== void 0) return;
+		if (param?.enabled === false) return;
+		if (event.button !== 0) return;
+		const target = event.target;
+		if (target instanceof Element && target !== node && target.closest("button, a, input, select, textarea") !== null) return;
+		if (param?.preventDefault !== false) event.preventDefault();
+		if (param?.stopPropagation === true) event.stopPropagation();
+		originX = event.clientX;
+		originY = event.clientY;
+		pointerId = event.pointerId;
+		const press = {
+			altKey: event.altKey,
+			shiftKey: event.shiftKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey,
+			x: event.clientX,
+			y: event.clientY,
+			pointerId: event.pointerId,
+			pressure: event.pressure,
+			target,
+			rect: boxOf(node),
+			direction: directionOf(node)
+		};
+		if (param?.capture !== false) {
+			const capture = node.setPointerCapture;
+			if (typeof capture === "function") try {
+				capture.call(node, event.pointerId);
+				captured = true;
+			} catch {}
+		}
+		param?.onStart?.(press);
+		const doc = node.ownerDocument;
+		const onMove = (moveEvent) => {
+			if (param?.preventDefault !== false) moveEvent.preventDefault();
+			param?.onMove?.({
+				altKey: moveEvent.altKey || press.altKey,
+				shiftKey: moveEvent.shiftKey || press.shiftKey,
+				x: moveEvent.clientX,
+				y: moveEvent.clientY,
+				pointerId: moveEvent.pointerId,
+				pressure: moveEvent.pressure,
+				target: moveEvent.target,
+				rect: boxOf(node),
+				direction: directionOf(node),
+				dx: moveEvent.clientX - originX,
+				dy: moveEvent.clientY - originY
+			});
+		};
+		const onUp = () => end(false);
+		const onKey = (keyEvent) => {
+			if (keyEvent.key !== "Escape") return;
+			if (param?.cancelOnEscape === false) return;
+			end(true);
+		};
+		doc.addEventListener("pointermove", onMove);
+		doc.addEventListener("pointerup", onUp);
+		doc.addEventListener("keydown", onKey);
+		stop = () => {
+			doc.removeEventListener("pointermove", onMove);
+			doc.removeEventListener("pointerup", onUp);
+			doc.removeEventListener("keydown", onKey);
+		};
+	};
+	node.addEventListener("pointerdown", arm);
+	return {
+		update: (next) => {
+			param = next;
+		},
+		destroy: () => {
+			end(true);
+			node.removeEventListener("pointerdown", arm);
+		}
+	};
+});
+export { drag };
+
+//# sourceMappingURL=drag.js.map

package/dist/runtime/actions/form-control.d.ts

@@ -0,0 +1,18 @@
+import { ElementAction } from "./action.js";
+/**
+ * formControl — report the ancestor fieldset's disabled state and the form's
+ * reset.
+ *
+ * Both are the FORM's state, not the widget's: a control inside a disabled
+ * fieldset is inert, and a reset returns it to its seeded value. The machine
+ * decides what either report means.
+ *
+ * Written for the rating-group port: a radio-shaped control inside a form
+ * participates in both reports, and nothing in the action catalog wires
+ * either.
+ */
+export interface FormControlParam {
+  onDisabledChange?: (disabled: boolean) => void;
+  onFormReset?: () => void;
+}
+export declare const formControl: ElementAction<FormControlParam | undefined>;

package/dist/runtime/actions/form-control.js

@@ -0,0 +1,41 @@
+import { createAction } from "./action.js";
+// src/runtime/actions/form-control.ts
+const formControl = createAction((node, param) => {
+	const stops = [];
+	let observer;
+	const reportFieldset = (fieldset) => {
+		param?.onDisabledChange?.(fieldset !== null && fieldset.disabled);
+	};
+	const onReset = (event) => {
+		event.preventDefault();
+		param?.onFormReset?.();
+	};
+	queueMicrotask(() => {
+		const fieldset = node.closest("fieldset");
+		const form = node.closest("form");
+		reportFieldset(fieldset);
+		if (fieldset !== null && typeof MutationObserver === "function") {
+			observer = new MutationObserver(() => reportFieldset(fieldset));
+			observer.observe(fieldset, {
+				attributes: true,
+				attributeFilter: ["disabled"]
+			});
+		}
+		if (form !== null) {
+			form.addEventListener("reset", onReset);
+			stops.push(() => form.removeEventListener("reset", onReset));
+		}
+	});
+	return {
+		update: (next) => {
+			param = next;
+		},
+		destroy: () => {
+			observer?.disconnect();
+			for (const stop of stops) stop();
+		}
+	};
+});
+export { formControl };
+
+//# sourceMappingURL=form-control.js.map

package/dist/runtime/actions/hover-delay.d.ts

@@ -0,0 +1,26 @@
+import { ElementAction } from "./action.js";
+/**
+ * The two dwell clocks a hover surface needs: open after resting on the
+ * trigger, close after leaving the surface.
+ *
+ * One action, not two, because the clocks share one invariant: leaving
+ * cancels a pending open, and re-entering cancels a pending close. Two
+ * timers with separate owners would race that handoff through the host.
+ * The timer is the action's, so a platform-owned surface (tooltip,
+ * hover-card) has no transitional state to hold — the attach maps the
+ * two reports onto `showPopover`/`hidePopover` directly.
+ *
+ * Touch never opens: a tooltip that opens on tap steals the tap the
+ * trigger itself wanted.
+ */
+export interface HoverDelayParam {
+  /** Rest on the trigger before `onOpen` fires, in milliseconds. */
+  readonly openDelay?: number;
+  /** Off the surface before `onClose` fires, in milliseconds. */
+  readonly closeDelay?: number;
+  /** The pointer rested long enough; the surface opens. */
+  readonly onOpen?: () => void;
+  /** The pointer stayed away long enough; the surface closes. */
+  readonly onClose?: () => void;
+}
+export declare const hoverDelay: ElementAction<HoverDelayParam | undefined>;