ropav 0.12.3 → 0.14.0

package/dist/composables/use-menu-trigger-state.js

@@ -0,0 +1,90 @@
+import { useOverlayTriggerState } from "./use-overlay-trigger-state.js";
+import { computed, shallowRef, toValue } from "vue";
+//#region src/composables/use-menu-trigger-state.ts
+/**
+* Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
+*
+* Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
+* decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
+* focused on the menu itself. And the stack of open submenus, held here on the root rather
+* than in each submenu, which is what makes "only one path through the menu tree is open at a
+* time" true by construction — opening a submenu at level N truncates the stack to N.
+*
+* @example
+* ```ts
+* const state = useMenuTriggerState({isOpen: () => props.isOpen});
+* state.open("last"); // ArrowUp on the trigger
+* ```
+*/
+var useMenuTriggerState = (options = {}) => {
+	const overlay = useOverlayTriggerState(options);
+	const focusStrategy = shallowRef(null);
+	const expandedKeys = shallowRef([]);
+	return {
+		close: () => {
+			expandedKeys.value = [];
+			overlay.close();
+		},
+		closeSubmenu: (triggerKey, level) => {
+			if (expandedKeys.value[level] === triggerKey) expandedKeys.value = expandedKeys.value.slice(0, level);
+		},
+		expandedKeysStack: computed(() => expandedKeys.value),
+		focusStrategy: computed(() => focusStrategy.value),
+		isOpen: overlay.isOpen,
+		open: (strategy = null) => {
+			focusStrategy.value = strategy;
+			overlay.open();
+		},
+		openSubmenu: (triggerKey, level) => {
+			if (level > expandedKeys.value.length) return;
+			expandedKeys.value = [...expandedKeys.value.slice(0, level), triggerKey];
+		},
+		setOpen: overlay.setOpen,
+		toggle: (strategy = null) => {
+			focusStrategy.value = strategy;
+			overlay.toggle();
+		}
+	};
+};
+/**
+* Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
+*
+* Holds no open flag of its own — it derives one by asking the root whether its own trigger
+* key is the one expanded at its level. That is what makes opening a sibling submenu close
+* this one with no coordination between the two.
+*
+* The level is captured once, when the submenu trigger is created, and deliberately not
+* recomputed: it describes where this trigger sits in the tree, which does not change, whereas
+* the stack it was read from changes constantly.
+*/
+var useSubmenuTriggerState = (options, root) => {
+	const submenuLevel = root.expandedKeysStack.value.length;
+	const focusStrategy = shallowRef(null);
+	const triggerKey = computed(() => toValue(options.triggerKey));
+	const isOpen = computed(() => triggerKey.value !== null && root.expandedKeysStack.value[submenuLevel] === triggerKey.value);
+	const close = () => {
+		focusStrategy.value = null;
+		if (triggerKey.value === null) return;
+		root.closeSubmenu(triggerKey.value, submenuLevel);
+	};
+	const open = (strategy = null) => {
+		focusStrategy.value = strategy;
+		if (triggerKey.value === null) return;
+		root.openSubmenu(triggerKey.value, submenuLevel);
+	};
+	return {
+		close,
+		closeAll: root.close,
+		focusStrategy: computed(() => focusStrategy.value),
+		isOpen,
+		open,
+		setOpen: (next) => next ? open() : close(),
+		submenuLevel,
+		toggle: (strategy = null) => {
+			if (isOpen.value) close();
+			else open(strategy);
+		}
+	};
+};
+//#endregion
+export { useMenuTriggerState, useSubmenuTriggerState };

package/dist/composables/use-menu-trigger.d.ts

@@ -1,6 +1,7 @@
 import type { PressResponder } from "./press-responder.js";
+import type { MenuTriggerState } from "./use-menu-trigger-state.js";
 import type { OverlayType } from "./use-overlay-trigger.js";
-import type { FocusStrategy, MenuTriggerState } from "./use-overlay-trigger-state.js";
+import type { FocusStrategy } from "./use-overlay-trigger-state.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /** How the menu is opened. */
 export type MenuTriggerType = "press" | "longPress";

package/dist/composables/use-modal-overlay.d.ts

@@ -1,4 +1,5 @@
-import type { PageSize, ViewportSize } from "./use-viewport-size.js";
+import type { PageSize } from "./use-page-size.js";
+import type { ViewportSize } from "./use-viewport-size.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 export interface UseModalOverlayOptions {
     /**

package/dist/composables/use-modal-overlay.js

@@ -1,8 +1,9 @@
 import { ariaHideOutside } from "../utils/aria-hide-outside.js";
-import { useFocusScope } from "./use-focus-scope.js";
 import { useDismissable } from "./use-dismissable.js";
+import { useFocusScope } from "./use-focus-scope.js";
+import { usePageSize } from "./use-page-size.js";
 import { usePreventScroll } from "./use-prevent-scroll.js";
-import { usePageSize, useViewportSize } from "./use-viewport-size.js";
+import { useViewportSize } from "./use-viewport-size.js";
 import { computed, toValue, watch } from "vue";
 //#region src/composables/use-modal-overlay.ts
 /**

package/dist/composables/use-overlay-trigger-state.d.ts

@@ -1,4 +1,3 @@
-import type { CollectionKey } from "./use-collection.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /** Which end of a collection receives focus when an overlay opens. */
 export type FocusStrategy = "first" | "last";
@@ -26,64 +25,3 @@ export interface OverlayTriggerState {
  * ```
  */
 export declare const useOverlayTriggerState: (options?: UseOverlayTriggerStateOptions) => OverlayTriggerState;
-export interface MenuTriggerState extends OverlayTriggerState {
-    /** Which item the menu focuses when it opens, or `null` to focus the menu itself. */
-    focusStrategy: ComputedRef<FocusStrategy | null>;
-    open: (focusStrategy?: FocusStrategy | null) => void;
-    toggle: (focusStrategy?: FocusStrategy | null) => void;
-}
-export interface RootMenuTriggerState extends MenuTriggerState {
-    /**
-     * The open submenu trigger keys, one per level: index 0 is the submenu opened from the root
-     * menu, index 1 the submenu opened from that one, and so on.
-     */
-    expandedKeysStack: ComputedRef<CollectionKey[]>;
-    openSubmenu: (triggerKey: CollectionKey, level: number) => void;
-    closeSubmenu: (triggerKey: CollectionKey, level: number) => void;
-}
-/**
- * Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
- *
- * Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
- * decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
- * focused on the menu itself. And the stack of open submenus, held here on the root rather
- * than in each submenu, which is what makes "only one path through the menu tree is open at a
- * time" true by construction — opening a submenu at level N truncates the stack to N.
- *
- * @example
- * ```ts
- * const state = useMenuTriggerState({isOpen: () => props.isOpen});
- * state.open("last"); // ArrowUp on the trigger
- * ```
- */
-export declare const useMenuTriggerState: (options?: UseOverlayTriggerStateOptions) => RootMenuTriggerState;
-export interface SubmenuTriggerState extends OverlayTriggerState {
-    focusStrategy: ComputedRef<FocusStrategy | null>;
-    open: (focusStrategy?: FocusStrategy | null) => void;
-    toggle: (focusStrategy?: FocusStrategy | null) => void;
-    /** Closes every menu in the tree, which is what selecting an item does. */
-    closeAll: () => void;
-    /** How deep this submenu sits, counting the root menu as level 0. */
-    submenuLevel: number;
-}
-export interface UseSubmenuTriggerStateOptions {
-    /**
-     * The key of the item that opens this submenu.
-     *
-     * Read reactively, because the item is declared beside the submenu rather than around it: the
-     * submenu exists before it has been told which item it belongs to, and is closed until it has.
-     */
-    triggerKey: MaybeRefOrGetter<CollectionKey | null>;
-}
-/**
- * Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
- *
- * Holds no open flag of its own — it derives one by asking the root whether its own trigger
- * key is the one expanded at its level. That is what makes opening a sibling submenu close
- * this one with no coordination between the two.
- *
- * The level is captured once, when the submenu trigger is created, and deliberately not
- * recomputed: it describes where this trigger sits in the tree, which does not change, whereas
- * the stack it was read from changes constantly.
- */
-export declare const useSubmenuTriggerState: (options: UseSubmenuTriggerStateOptions, root: RootMenuTriggerState) => SubmenuTriggerState;

package/dist/composables/use-overlay-trigger-state.js

@@ -1,5 +1,5 @@
 import { useControllableState } from "./use-controllable-state.js";
-import { computed, shallowRef, toValue } from "vue";
+import { computed } from "vue";
 //#region src/composables/use-overlay-trigger-state.ts
 /**
 * Open state for an overlay trigger, ported from React Stately's `useOverlayTriggerState`.
@@ -26,90 +26,5 @@ var useOverlayTriggerState = (options = {}) => {
 		toggle: () => setState(!state.value)
 	};
 };
-/**
-* Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
-*
-* Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
-* decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
-* focused on the menu itself. And the stack of open submenus, held here on the root rather
-* than in each submenu, which is what makes "only one path through the menu tree is open at a
-* time" true by construction — opening a submenu at level N truncates the stack to N.
-*
-* @example
-* ```ts
-* const state = useMenuTriggerState({isOpen: () => props.isOpen});
-* state.open("last"); // ArrowUp on the trigger
-* ```
-*/
-var useMenuTriggerState = (options = {}) => {
-	const overlay = useOverlayTriggerState(options);
-	const focusStrategy = shallowRef(null);
-	const expandedKeys = shallowRef([]);
-	return {
-		close: () => {
-			expandedKeys.value = [];
-			overlay.close();
-		},
-		closeSubmenu: (triggerKey, level) => {
-			if (expandedKeys.value[level] === triggerKey) expandedKeys.value = expandedKeys.value.slice(0, level);
-		},
-		expandedKeysStack: computed(() => expandedKeys.value),
-		focusStrategy: computed(() => focusStrategy.value),
-		isOpen: overlay.isOpen,
-		open: (strategy = null) => {
-			focusStrategy.value = strategy;
-			overlay.open();
-		},
-		openSubmenu: (triggerKey, level) => {
-			if (level > expandedKeys.value.length) return;
-			expandedKeys.value = [...expandedKeys.value.slice(0, level), triggerKey];
-		},
-		setOpen: overlay.setOpen,
-		toggle: (strategy = null) => {
-			focusStrategy.value = strategy;
-			overlay.toggle();
-		}
-	};
-};
-/**
-* Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
-*
-* Holds no open flag of its own — it derives one by asking the root whether its own trigger
-* key is the one expanded at its level. That is what makes opening a sibling submenu close
-* this one with no coordination between the two.
-*
-* The level is captured once, when the submenu trigger is created, and deliberately not
-* recomputed: it describes where this trigger sits in the tree, which does not change, whereas
-* the stack it was read from changes constantly.
-*/
-var useSubmenuTriggerState = (options, root) => {
-	const submenuLevel = root.expandedKeysStack.value.length;
-	const focusStrategy = shallowRef(null);
-	const triggerKey = computed(() => toValue(options.triggerKey));
-	const isOpen = computed(() => triggerKey.value !== null && root.expandedKeysStack.value[submenuLevel] === triggerKey.value);
-	const close = () => {
-		focusStrategy.value = null;
-		if (triggerKey.value === null) return;
-		root.closeSubmenu(triggerKey.value, submenuLevel);
-	};
-	const open = (strategy = null) => {
-		focusStrategy.value = strategy;
-		if (triggerKey.value === null) return;
-		root.openSubmenu(triggerKey.value, submenuLevel);
-	};
-	return {
-		close,
-		closeAll: root.close,
-		focusStrategy: computed(() => focusStrategy.value),
-		isOpen,
-		open,
-		setOpen: (next) => next ? open() : close(),
-		submenuLevel,
-		toggle: (strategy = null) => {
-			if (isOpen.value) close();
-			else open(strategy);
-		}
-	};
-};
 //#endregion
-export { useMenuTriggerState, useOverlayTriggerState, useSubmenuTriggerState };
+export { useOverlayTriggerState };

package/dist/composables/use-page-size.d.ts

@@ -0,0 +1,14 @@
+import type { ShallowRef } from "vue";
+export interface PageSize {
+    /** Absent on the server, and while there is no document to measure. */
+    width: number | undefined;
+    height: number | undefined;
+}
+/**
+ * Track the size of the whole scrollable page.
+ *
+ * Ported from the block React Aria computes inline in `ModalOverlayInner`. Published as
+ * `--page-width` / `--page-height` for a backdrop that has to cover a page taller than the
+ * viewport rather than only the part currently on screen.
+ */
+export declare const usePageSize: () => ShallowRef<PageSize>;

package/dist/composables/use-page-size.js

@@ -0,0 +1,42 @@
+import { isScrollable } from "../utils/focus.js";
+import { onScopeDispose, shallowRef } from "vue";
+//#region src/composables/use-page-size.ts
+var getVisualViewport = () => typeof document === "undefined" ? null : window.visualViewport ?? null;
+var measurePage = () => {
+	if (typeof document === "undefined") return {
+		height: void 0,
+		width: void 0
+	};
+	const scrolling = isScrollable(document.body) ? document.body : document.scrollingElement ?? document.documentElement;
+	const rect = scrolling.getBoundingClientRect();
+	return {
+		height: scrolling.scrollHeight - rect.height % 1,
+		width: scrolling.scrollWidth - rect.width % 1
+	};
+};
+/**
+* Track the size of the whole scrollable page.
+*
+* Ported from the block React Aria computes inline in `ModalOverlayInner`. Published as
+* `--page-width` / `--page-height` for a backdrop that has to cover a page taller than the
+* viewport rather than only the part currently on screen.
+*/
+var usePageSize = () => {
+	const size = shallowRef(measurePage());
+	if (typeof document === "undefined") return size;
+	const onResize = () => {
+		const next = measurePage();
+		if (next.width === size.value.width && next.height === size.value.height) return;
+		size.value = next;
+	};
+	const viewport = getVisualViewport();
+	window.addEventListener("resize", onResize);
+	viewport?.addEventListener("resize", onResize);
+	onScopeDispose(() => {
+		window.removeEventListener("resize", onResize);
+		viewport?.removeEventListener("resize", onResize);
+	}, true);
+	return size;
+};
+//#endregion
+export { usePageSize };

package/dist/composables/use-press.d.ts

@@ -64,26 +64,6 @@ export interface UsePressReturn {
      */
     handlers: UsePressHandlers;
 }
-/**
- * Whether a click came from something other than a pointer.
- *
- * Ported from React Aria's `isVirtualClick`. A screen reader and `element.click()` both
- * produce a click with no pointer data behind it, which is the only way to tell them apart
- * from a real one.
- */
-export declare const isVirtualClick: (event: MouseEvent) => boolean;
-/**
- * Whether a pointer event was synthesised by assistive technology.
- *
- * A screen reader activating an element reports a zero-sized pointer. Safari on iOS gives
- * such events the wrong coordinates and target, so they have to be left to the click handler.
- *
- * Android needs a shape of its own, and the zero-size test is turned off there rather than left
- * to miss: TalkBack's double tap reports a one-by-one pointer claiming to be a mouse. Every part
- * of that is load-bearing — pressure alone would catch real presses in Safari, which reports zero
- * for those too, and the mouse claim is what separates the double tap from a touch screen press.
- */
-export declare const isVirtualPointerEvent: (event: PointerEvent) => boolean;
 /**
  * Press interactions across mouse, touch, keyboard and assistive technology, ported from
  * React Aria's `usePress`.

package/dist/composables/use-press.js

@@ -1,31 +1,8 @@
-import { isAndroid, isMac } from "../utils/platform.js";
+import { isMac } from "../utils/platform.js";
+import { isVirtualClick, isVirtualPointerEvent } from "./virtual-event.js";
 import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 //#region src/composables/use-press.ts
 /**
-* Whether a click came from something other than a pointer.
-*
-* Ported from React Aria's `isVirtualClick`. A screen reader and `element.click()` both
-* produce a click with no pointer data behind it, which is the only way to tell them apart
-* from a real one.
-*/
-var isVirtualClick = (event) => {
-	if (event.pointerType === "" && event.isTrusted) return true;
-	if (isAndroid() && event.pointerType) return event.type === "click" && event.buttons === 1;
-	return event.detail === 0 && !event.pointerType;
-};
-/**
-* Whether a pointer event was synthesised by assistive technology.
-*
-* A screen reader activating an element reports a zero-sized pointer. Safari on iOS gives
-* such events the wrong coordinates and target, so they have to be left to the click handler.
-*
-* Android needs a shape of its own, and the zero-size test is turned off there rather than left
-* to miss: TalkBack's double tap reports a one-by-one pointer claiming to be a mouse. Every part
-* of that is load-bearing — pressure alone would catch real presses in Safari, which reports zero
-* for those too, and the mouse claim is what separates the double tap from a touch screen press.
-*/
-var isVirtualPointerEvent = (event) => !isAndroid() && event.width === 0 && event.height === 0 || isAndroid() && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "mouse";
-/**
 * Whether an enter or a leave came from a pointer with no hover to report.
 *
 * A touch pointer is created where the finger lands and destroyed where it lifts, and the browser
@@ -385,4 +362,4 @@ var usePress = (options = {}) => {
 	};
 };
 //#endregion
-export { isVirtualClick, isVirtualPointerEvent, usePress };
+export { usePress };

package/dist/composables/use-range-calendar.js

@@ -1,4 +1,4 @@
-import { isVirtualPointerEvent } from "./use-press.js";
+import { isVirtualPointerEvent } from "./virtual-event.js";
 import { useCalendar } from "./use-calendar.js";
 import { onScopeDispose, toValue, watch } from "vue";
 //#region src/composables/use-range-calendar.ts

package/dist/composables/use-select-state.d.ts

@@ -1,6 +1,6 @@
 import type { CollectionKey, UseCollectionReturn } from "./use-collection.js";
 import type { FormValidationState, ValidationBehavior, ValidationFunction } from "./use-form-validation-state.js";
-import type { MenuTriggerState } from "./use-overlay-trigger-state.js";
+import type { MenuTriggerState } from "./use-menu-trigger-state.js";
 import type { DisabledBehavior, UseSelectionManagerReturn } from "./use-selection-manager.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /** Whether one or several options can be chosen. */

package/dist/composables/use-select-state.js

@@ -1,8 +1,8 @@
 import { useControllableState } from "./use-controllable-state.js";
-import { useMenuTriggerState } from "./use-overlay-trigger-state.js";
 import { useCollection } from "./use-collection.js";
 import { createListCollection } from "../utils/virtualizer-collection.js";
 import { useFormValidationState } from "./use-form-validation-state.js";
+import { useMenuTriggerState } from "./use-menu-trigger-state.js";
 import { useSelectionManager } from "./use-selection-manager.js";
 import { computed, shallowRef, toValue } from "vue";
 //#region src/composables/use-select-state.ts

package/dist/composables/use-slider.js

@@ -1,4 +1,4 @@
-import { setInteractionModality } from "./use-interaction-states.js";
+import { setInteractionModality } from "./interaction-modality.js";
 import { useMove } from "./use-move.js";
 import { clamp } from "../utils/number.js";
 import { computed, onScopeDispose, toValue } from "vue";

package/dist/composables/use-toast-region.js

@@ -1,4 +1,5 @@
-import { getInteractionModality, retainInteractionModality, useInteractionStates } from "./use-interaction-states.js";
+import { getInteractionModality, retainInteractionModality } from "./interaction-modality.js";
+import { useInteractionStates } from "./use-interaction-states.js";
 import { TOP_LAYER_ATTRIBUTE } from "../utils/top-layer.js";
 import { willOpenKeyboard } from "../utils/platform.js";
 import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";

package/dist/composables/use-tooltip-trigger-state.js

@@ -27,20 +27,6 @@ var clearCooldownTimeout = () => {
 	globalCooldownTimeout = null;
 };
 /**
-* Forget the shared warmup state.
-*
-* For a test: the registry and both timers outlive any one component, so a case that leaves a
-* tooltip warm would make the next one open with no delay and read as a bug in that test instead.
-*/
-var resetTooltipWarmup = () => {
-	tooltips.clear();
-	clearWarmUpTimeout();
-	clearCooldownTimeout();
-	globalWarmedUp = false;
-};
-/** How many tooltips are registered. For a test proving a disposed trigger left nothing behind. */
-var getRegisteredTooltipCount = () => tooltips.size;
-/**
 * Open state for a tooltip trigger, ported from React Stately's `useTooltipTriggerState`.
 *
 * Two things beyond a plain overlay trigger, and both are about time rather than state. A tooltip
@@ -138,4 +124,4 @@ var useTooltipTriggerState = (options = {}) => {
 	};
 };
 //#endregion
-export { getRegisteredTooltipCount, resetTooltipWarmup, useTooltipTriggerState };
+export { useTooltipTriggerState };

package/dist/composables/use-tooltip-trigger.js

@@ -1,5 +1,5 @@
 import { useId as useId$1 } from "./use-id.js";
-import { getInteractionModality, isFocusVisible, retainInteractionModality } from "./use-interaction-states.js";
+import { getInteractionModality, isFocusVisible, retainInteractionModality } from "./interaction-modality.js";
 import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 //#region src/composables/use-tooltip-trigger.ts
 /**

package/dist/composables/use-viewport-size.d.ts

@@ -3,11 +3,6 @@ export interface ViewportSize {
     width: number;
     height: number;
 }
-export interface PageSize {
-    /** Absent on the server, and while there is no document to measure. */
-    width: number | undefined;
-    height: number | undefined;
-}
 /**
  * Track the visual viewport, ported from React Aria's `useViewportSize`.
  *
@@ -21,11 +16,3 @@ export interface PageSize {
  * ```
  */
 export declare const useViewportSize: () => ShallowRef<ViewportSize>;
-/**
- * Track the size of the whole scrollable page.
- *
- * Ported from the block React Aria computes inline in `ModalOverlayInner`. Published as
- * `--page-width` / `--page-height` for a backdrop that has to cover a page taller than the
- * viewport rather than only the part currently on screen.
- */
-export declare const usePageSize: () => ShallowRef<PageSize>;

package/dist/composables/use-viewport-size.js

@@ -1,4 +1,3 @@
-import { isScrollable } from "../utils/focus.js";
 import { isIOS, isWebKit, willOpenKeyboard } from "../utils/platform.js";
 import { onScopeDispose, shallowRef } from "vue";
 //#region src/composables/use-viewport-size.ts
@@ -81,41 +80,5 @@ var useViewportSize = () => {
 	}, true);
 	return size;
 };
-var measurePage = () => {
-	if (typeof document === "undefined") return {
-		height: void 0,
-		width: void 0
-	};
-	const scrolling = isScrollable(document.body) ? document.body : document.scrollingElement ?? document.documentElement;
-	const rect = scrolling.getBoundingClientRect();
-	return {
-		height: scrolling.scrollHeight - rect.height % 1,
-		width: scrolling.scrollWidth - rect.width % 1
-	};
-};
-/**
-* Track the size of the whole scrollable page.
-*
-* Ported from the block React Aria computes inline in `ModalOverlayInner`. Published as
-* `--page-width` / `--page-height` for a backdrop that has to cover a page taller than the
-* viewport rather than only the part currently on screen.
-*/
-var usePageSize = () => {
-	const size = shallowRef(measurePage());
-	if (typeof document === "undefined") return size;
-	const onResize = () => {
-		const next = measurePage();
-		if (next.width === size.value.width && next.height === size.value.height) return;
-		size.value = next;
-	};
-	const viewport = getVisualViewport();
-	window.addEventListener("resize", onResize);
-	viewport?.addEventListener("resize", onResize);
-	onScopeDispose(() => {
-		window.removeEventListener("resize", onResize);
-		viewport?.removeEventListener("resize", onResize);
-	}, true);
-	return size;
-};
 //#endregion
-export { usePageSize, useViewportSize };
+export { useViewportSize };

package/dist/composables/validation-result.d.ts

@@ -0,0 +1,37 @@
+import type { ValidationDetails, ValidationResult, RequiredControl } from "./use-form-validation-state.js";
+export declare const VALID_VALIDITY_STATE: ValidationDetails;
+/** Failure that came from a prop, a `validate` function or the server rather than the browser. */
+export declare const CUSTOM_VALIDITY_STATE: ValidationDetails;
+/** A required field with nothing in it. What the browser reports under `"native"`. */
+export declare const MISSING_VALIDITY_STATE: ValidationDetails;
+export declare const DEFAULT_VALIDATION_RESULT: ValidationResult;
+/**
+ * One verdict out of several, for a control whose value has more than one part.
+ *
+ * Invalid if any part is, with the messages collected in order and deduplicated — two ends of a
+ * range that are both out of bounds say the same thing, and saying it twice is not more helpful.
+ */
+export declare const mergeValidation: (...results: ValidationResult[]) => ValidationResult;
+/** Form controls that take part in constraint validation. */
+export type ValidatableElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+/** Freeze an element's live validity into a result the state layer can hold. */
+export declare const getNativeValidation: (element: ValidatableElement) => ValidationResult;
+/**
+ * What the browser would say about an empty control of this kind.
+ *
+ * Read off a detached probe rather than translated here. The platform already holds the sentence,
+ * in the *browser's* locale — which is the locale a validation message belongs in, since it sits
+ * beside the browser's own — and it is the one the same field would report under `"native"`.
+ *
+ * Empty on a server, where the field cannot have been revealed yet and so has nothing to say.
+ */
+export declare const missingValueMessage: (kind: RequiredControl) => string;
+/** Whether a value counts as nothing. Covers every shape a field holds when it is empty. */
+export declare const isValueMissing: (value: unknown) => boolean;
+/**
+ * Whether two results say the same thing.
+ *
+ * Not an optimisation: the results live in `shallowRef`s, and assigning an equal-but-new
+ * object still retriggers every computed reading them.
+ */
+export declare const isEqualValidation: (a: ValidationResult | null, b: ValidationResult | null) => boolean;