@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/dist/_chunk/focus2.jsx

@@ -0,0 +1,870 @@
+import { g as isTabbable, p as isFocusable, s as getOwnerDocument, t as focusSafely } from "./focus.jsx";
+import { createContext, createEffect, createSignal, onCleanup, onMount, useContext } from "solid-js";
+import { isServer } from "solid-js/web";
+//#region src/focus/FocusScope.tsx
+/**
+* FocusScope component for managing focus containment, restoration, and auto-focus.
+* Based on @react-aria/focus FocusScope.
+*/
+const FocusScopeContext = createContext(null);
+/**
+* Returns a FocusManager interface for the parent FocusScope.
+* A FocusManager can be used to programmatically move focus within
+* a FocusScope, e.g. in response to user events like keyboard navigation.
+*/
+function useFocusManager() {
+	return useContext(FocusScopeContext)?.focusManager;
+}
+/**
+* Gets all focusable elements within a scope.
+*/
+function getFocusableElements(scope, tabbable = false) {
+	const elements = [];
+	const filter = tabbable ? isTabbable : isFocusable;
+	for (const scopeElement of scope) {
+		if (filter(scopeElement)) elements.push(scopeElement);
+		const descendants = scopeElement.querySelectorAll("*");
+		for (let i = 0; i < descendants.length; i++) {
+			const el = descendants[i];
+			if (filter(el)) elements.push(el);
+		}
+	}
+	return elements;
+}
+/**
+* Checks if an element is within a scope.
+*/
+function isElementInScope(element, scope) {
+	if (!element) return false;
+	return scope.some((node) => node.contains(element));
+}
+/**
+* Gets the active element, accounting for shadow DOM.
+*/
+function getActiveElement$1(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement;
+	return activeElement;
+}
+/**
+* A registry of the live FocusScopes and their parent/child relationships,
+* mirroring @react-aria/focus's `focusScopeTree`. The DOM tree alone can't
+* express scope nesting because a child scope (e.g. a menu opened from inside a
+* modal popover) is rendered in a portal, outside its parent scope's subtree.
+* The tree records that nesting so containment can recognize a portaled
+* descendant scope as "inside".
+*/
+var FocusScopeTree = class {
+	root;
+	fastMap = /* @__PURE__ */ new Map();
+	constructor() {
+		this.root = {
+			scopeRef: null,
+			parent: null,
+			children: /* @__PURE__ */ new Set()
+		};
+		this.fastMap.set(null, this.root);
+	}
+	getTreeNode(scopeRef) {
+		return this.fastMap.get(scopeRef);
+	}
+	addTreeNode(scopeRef, parent) {
+		const parentNode = this.fastMap.get(parent) ?? this.root;
+		const node = {
+			scopeRef,
+			parent: parentNode,
+			children: /* @__PURE__ */ new Set()
+		};
+		parentNode.children.add(node);
+		this.fastMap.set(scopeRef, node);
+	}
+	removeTreeNode(scopeRef) {
+		if (scopeRef === null) return;
+		const node = this.fastMap.get(scopeRef);
+		if (!node) return;
+		const parentNode = node.parent;
+		if (parentNode) {
+			parentNode.children.delete(node);
+			for (const child of node.children) {
+				child.parent = parentNode;
+				parentNode.children.add(child);
+			}
+		}
+		this.fastMap.delete(scopeRef);
+	}
+	*traverse(node = this.root) {
+		if (node.scopeRef != null) yield node;
+		for (const child of node.children) yield* this.traverse(child);
+	}
+};
+const focusScopeTree = new FocusScopeTree();
+/**
+* Whether the element is inside `scope` or any of its descendant scopes.
+*
+* `isElementInScope`'s `node.contains` already covers descendant scopes that
+* are DOM children, but not those rendered in a portal. Walking the scope
+* subtree closes that gap so focus moving into a portaled child scope still
+* counts as "inside". Mirrors @react-aria/focus's `isElementInChildScope`.
+*/
+function isElementInChildScope(element, scope = null) {
+	if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) return true;
+	for (const node of focusScopeTree.traverse(focusScopeTree.getTreeNode(scope))) if (node.scopeRef && isElementInScope(element, node.scopeRef())) return true;
+	return false;
+}
+/**
+* A FocusScope manages focus for its descendants. It supports containing focus inside
+* the scope, restoring focus to the previously focused element on unmount, and auto
+* focusing children on mount. It also acts as a container for a programmatic focus
+* management interface that can be used to move focus forward and back in response
+* to user events.
+*/
+const FocusScope = (props) => {
+	if (isServer) return <>{props.children}</>;
+	let startRef;
+	let endRef;
+	const [scopeElements, setScopeElements] = createSignal([]);
+	const parentScopeRef = useContext(FocusScopeContext)?.scopeRef ?? null;
+	let nodeToRestore = null;
+	const getRestorableElement = (element, doc) => {
+		if (!element || element === doc.body || element === doc.documentElement) return null;
+		return element;
+	};
+	const focusManager = {
+		focusNext(opts = {}) {
+			const scope = scopeElements();
+			if (scope.length === 0) return null;
+			const { from, tabbable = true, wrap = false, accept } = opts;
+			const elements = getFocusableElements(scope, tabbable).filter((el) => !accept || accept(el));
+			const doc = getOwnerDocument(scope[0]);
+			const current = from || getActiveElement$1(doc);
+			if (!current || elements.length === 0) return null;
+			let nextIndex = elements.indexOf(current) + 1;
+			if (nextIndex >= elements.length) if (wrap) nextIndex = 0;
+			else return null;
+			const nextElement = elements[nextIndex];
+			if (nextElement) {
+				focusSafely(nextElement);
+				return nextElement;
+			}
+			return null;
+		},
+		focusPrevious(opts = {}) {
+			const scope = scopeElements();
+			if (scope.length === 0) return null;
+			const { from, tabbable = true, wrap = false, accept } = opts;
+			const elements = getFocusableElements(scope, tabbable).filter((el) => !accept || accept(el));
+			const doc = getOwnerDocument(scope[0]);
+			const current = from || getActiveElement$1(doc);
+			if (!current || elements.length === 0) return null;
+			let prevIndex = elements.indexOf(current) - 1;
+			if (prevIndex < 0) if (wrap) prevIndex = elements.length - 1;
+			else return null;
+			const prevElement = elements[prevIndex];
+			if (prevElement) {
+				focusSafely(prevElement);
+				return prevElement;
+			}
+			return null;
+		},
+		focusFirst(opts = {}) {
+			const scope = scopeElements();
+			if (scope.length === 0) return null;
+			const { tabbable = true, accept } = opts;
+			const elements = getFocusableElements(scope, tabbable).filter((el) => !accept || accept(el));
+			if (elements.length > 0) {
+				focusSafely(elements[0]);
+				return elements[0];
+			}
+			return null;
+		},
+		focusLast(opts = {}) {
+			const scope = scopeElements();
+			if (scope.length === 0) return null;
+			const { tabbable = true, accept } = opts;
+			const elements = getFocusableElements(scope, tabbable).filter((el) => !accept || accept(el));
+			if (elements.length > 0) {
+				const lastElement = elements[elements.length - 1];
+				focusSafely(lastElement);
+				return lastElement;
+			}
+			return null;
+		}
+	};
+	onMount(() => {});
+	onMount(() => {
+		focusScopeTree.addTreeNode(scopeElements, parentScopeRef);
+	});
+	onCleanup(() => {
+		focusScopeTree.removeTreeNode(scopeElements);
+	});
+	onMount(() => {
+		if (!props.restoreFocus) return;
+		const scopeDoc = document;
+		const scopeActive = getActiveElement$1(scopeDoc);
+		const topActive = getActiveElement$1(document);
+		if (scopeDoc !== document && document.activeElement instanceof HTMLIFrameElement && document.activeElement.contentDocument === scopeDoc && scopeActive && scopeActive !== scopeDoc.body) {
+			nodeToRestore = getRestorableElement(scopeActive, scopeDoc);
+			return;
+		}
+		nodeToRestore = getRestorableElement(topActive, document);
+	});
+	createEffect(() => {
+		if (!props.autoFocus) return;
+		const scope = scopeElements();
+		if (scope.length === 0) return;
+		if (!isElementInScope(getActiveElement$1(getOwnerDocument(scope[0])), scope)) focusManager.focusFirst();
+	});
+	createEffect(() => {
+		if (!props.contain) return;
+		const scope = scopeElements();
+		if (scope.length === 0) return;
+		const doc = getOwnerDocument(scope[0]);
+		let focusedNode = null;
+		const onKeyDown = (e) => {
+			if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+			const scope = scopeElements();
+			const activeElement = getActiveElement$1(doc);
+			if (!isElementInScope(activeElement, scope)) return;
+			const elements = getFocusableElements(scope, true);
+			if (elements.length === 0) return;
+			const firstElement = elements[0];
+			const lastElement = elements[elements.length - 1];
+			if (e.shiftKey && activeElement === firstElement) {
+				e.preventDefault();
+				focusSafely(lastElement);
+			} else if (!e.shiftKey && activeElement === lastElement) {
+				e.preventDefault();
+				focusSafely(firstElement);
+			}
+		};
+		const onFocusIn = (e) => {
+			const scope = scopeElements();
+			const target = e.target;
+			if (isElementInScope(target, scope)) focusedNode = target;
+			else if (isElementInChildScope(target, scopeElements)) focusedNode = target;
+			else if (focusedNode) focusSafely(focusedNode);
+			else focusManager.focusFirst();
+		};
+		let restoreRaf = null;
+		const onFocusOut = (e) => {
+			const target = e.target;
+			if (!isElementInScope(target, scopeElements())) return;
+			const win = doc.defaultView ?? window;
+			if (restoreRaf != null) win.cancelAnimationFrame(restoreRaf);
+			restoreRaf = win.requestAnimationFrame(() => {
+				restoreRaf = null;
+				const scope = scopeElements();
+				const activeElement = getActiveElement$1(doc);
+				if (activeElement && (isElementInScope(activeElement, scope) || isElementInChildScope(activeElement, scopeElements))) return;
+				if (doc.body.contains(target)) {
+					focusedNode = target;
+					focusSafely(target);
+				} else focusManager.focusFirst();
+			});
+		};
+		doc.addEventListener("keydown", onKeyDown, true);
+		doc.addEventListener("focusin", onFocusIn, true);
+		doc.addEventListener("focusout", onFocusOut, true);
+		onCleanup(() => {
+			doc.removeEventListener("keydown", onKeyDown, true);
+			doc.removeEventListener("focusin", onFocusIn, true);
+			doc.removeEventListener("focusout", onFocusOut, true);
+			if (restoreRaf != null) (doc.defaultView ?? window).cancelAnimationFrame(restoreRaf);
+		});
+	});
+	onCleanup(() => {
+		if (props.restoreFocus && nodeToRestore && nodeToRestore.focus) {
+			const doc = getOwnerDocument(nodeToRestore);
+			(doc.defaultView ?? window).requestAnimationFrame(() => {
+				if (nodeToRestore && doc.body.contains(nodeToRestore)) nodeToRestore.focus();
+			});
+		}
+	});
+	return <FocusScopeContext.Provider value={{
+		focusManager,
+		scopeRef: scopeElements
+	}}>
+      <span data-focus-scope-start hidden ref={startRef} />
+      {props.children}
+      <span data-focus-scope-end hidden ref={endRef} />
+    </FocusScopeContext.Provider>;
+};
+//#endregion
+//#region src/focus/createFocusRestore.ts
+/**
+* Focus restoration utilities for solidaria
+*
+* Provides enhanced focus restoration with retry logic, cross-scope tracking,
+* and safe restoration patterns.
+*/
+const focusStack = [];
+/**
+* Push an element onto the focus stack.
+*/
+function pushFocusStack(element) {
+	focusStack.push(element);
+}
+/**
+* Pop the last element from the focus stack.
+*/
+function popFocusStack() {
+	return focusStack.pop();
+}
+/**
+* Get the current focus stack length.
+*/
+function getFocusStackLength() {
+	return focusStack.length;
+}
+/**
+* Clear the entire focus stack.
+*/
+function clearFocusStack() {
+	focusStack.length = 0;
+}
+/**
+* Gets the active element, accounting for shadow DOM.
+*/
+function getActiveElement(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement;
+	return activeElement;
+}
+/**
+* Checks if an element is still valid for focus restoration.
+*/
+function isValidForRestore(element) {
+	if (!element) return false;
+	if (!document.body.contains(element)) return false;
+	if (element.hasAttribute("disabled")) return false;
+	if (element.getAttribute("aria-disabled") === "true") return false;
+	if (element.getAttribute("aria-hidden") === "true") return false;
+	return true;
+}
+/**
+* Attempts to restore focus with retries.
+*/
+function tryRestoreFocus(element, options) {
+	const { maxRetries, retryDelay, preventScroll, onRestore, onRestoreFailed } = options;
+	let attempts = 0;
+	const attempt = () => {
+		if (!element) {
+			onRestoreFailed?.();
+			return;
+		}
+		if (isValidForRestore(element)) {
+			if (preventScroll) focusSafely(element);
+			else element.focus();
+			onRestore?.(element);
+			return;
+		}
+		attempts++;
+		if (attempts < maxRetries) setTimeout(attempt, retryDelay);
+		else onRestoreFailed?.();
+	};
+	requestAnimationFrame(attempt);
+}
+/**
+* Creates a focus restoration manager.
+*
+* This hook saves the currently focused element when mounted and provides
+* methods to restore focus later, with retry logic for reliability.
+*
+* @example
+* ```tsx
+* function Modal(props) {
+*   const focusRestore = createFocusRestore({
+*     restoreOnUnmount: true,
+*     onRestore: () => console.log('Focus restored'),
+*   });
+*
+*   return (
+*     <div role="dialog">
+*       {props.children}
+*       <button onClick={() => focusRestore.restore()}>
+*         Close
+*       </button>
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Manual focus management
+* function Dropdown() {
+*   const focusRestore = createFocusRestore({ restoreOnUnmount: false });
+*
+*   const onOpen = () => {
+*     focusRestore.saveCurrentFocus();
+*     // Focus dropdown content
+*   };
+*
+*   const onClose = () => {
+*     focusRestore.restore();
+*   };
+*
+*   return <div>...</div>;
+* }
+* ```
+*/
+function createFocusRestore(options = {}) {
+	const { restoreOnUnmount = true, maxRetries = 3, retryDelay = 50, onRestore, onRestoreFailed, preventScroll = true } = options;
+	if (isServer) return {
+		restore: () => false,
+		getSavedElement: () => null,
+		saveCurrentFocus: () => {},
+		clear: () => {}
+	};
+	let savedElement = null;
+	onMount(() => {
+		saveCurrentFocus();
+	});
+	onCleanup(() => {
+		if (restoreOnUnmount && savedElement) tryRestoreFocus(savedElement, {
+			maxRetries,
+			retryDelay,
+			preventScroll,
+			onRestore: onRestore ?? (() => {}),
+			onRestoreFailed: onRestoreFailed ?? (() => {})
+		});
+	});
+	function saveCurrentFocus() {
+		const doc = typeof document !== "undefined" ? document : null;
+		if (!doc) return;
+		const active = getActiveElement(doc);
+		if (active && active !== doc.body) {
+			savedElement = active;
+			pushFocusStack(active);
+		}
+	}
+	function restore() {
+		if (!savedElement) return false;
+		if (isValidForRestore(savedElement)) {
+			if (preventScroll) focusSafely(savedElement);
+			else savedElement.focus();
+			onRestore?.(savedElement);
+			return true;
+		}
+		while (focusStack.length > 0) {
+			const stackElement = popFocusStack();
+			if (stackElement && isValidForRestore(stackElement)) {
+				if (preventScroll) focusSafely(stackElement);
+				else stackElement.focus();
+				onRestore?.(stackElement);
+				return true;
+			}
+		}
+		onRestoreFailed?.();
+		return false;
+	}
+	function getSavedElement() {
+		return savedElement;
+	}
+	function clear() {
+		savedElement = null;
+	}
+	return {
+		restore,
+		getSavedElement,
+		saveCurrentFocus,
+		clear
+	};
+}
+//#endregion
+//#region src/focus/createVirtualFocus.ts
+/**
+* Virtual focus management for solidaria
+*
+* Provides virtual focus for large collections where tracking DOM focus
+* on every item is impractical. Instead, a single element receives real
+* focus while aria-activedescendant indicates the virtually focused item.
+*
+* This is commonly used in:
+* - Virtualized lists (where not all items are in the DOM)
+* - Large trees
+* - Autocomplete/combobox suggestions
+* - Grid/table navigation
+*/
+const DEFAULT_PAGE_SIZE = 10;
+/**
+* Creates virtual focus management for a collection.
+*
+* Virtual focus uses aria-activedescendant to indicate which item is
+* "focused" while keeping real DOM focus on a container element. This
+* is more performant for large collections and required for virtualized
+* lists where items may not be in the DOM.
+*
+* @example
+* ```tsx
+* function Listbox(props) {
+*   const virtualFocus = createVirtualFocus({
+*     items: () => props.items,
+*     getKey: (item) => item.id,
+*     isDisabled: (item) => item.disabled,
+*   });
+*
+*   return (
+*     <ul
+*       role="listbox"
+*       tabIndex={0}
+*       aria-activedescendant={virtualFocus.containerProps['aria-activedescendant']()}
+*       onKeyDown={virtualFocus.containerProps.onKeyDown}
+*     >
+*       <For each={props.items}>
+*         {(item) => (
+*           <li
+*             {...virtualFocus.getItemProps(item.id)}
+*             role="option"
+*             aria-selected={virtualFocus.isFocused(item.id)}
+*           >
+*             {item.name}
+*           </li>
+*         )}
+*       </For>
+*     </ul>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With controlled focus
+* function ControlledListbox() {
+*   const [focusedKey, setFocusedKey] = createSignal<string | null>(null);
+*
+*   const virtualFocus = createVirtualFocus({
+*     items: () => items,
+*     getKey: (item) => item.id,
+*     focusedKey: focusedKey,
+*     onFocusChange: setFocusedKey,
+*   });
+*
+*   return <ul>...</ul>;
+* }
+* ```
+*/
+function createVirtualFocus(options) {
+	const { items, getKey, isDisabled = () => false, defaultFocusedKey, focusedKey: controlledFocusedKey, onFocusChange, wrap = true, skipDisabled = true, orientation = "vertical" } = options;
+	if (isServer) {
+		const emptyAccessor = () => null;
+		return {
+			focusedKey: emptyAccessor,
+			focusedItem: emptyAccessor,
+			setFocusedKey: () => {},
+			focusNext: () => {},
+			focusPrevious: () => {},
+			focusFirst: () => {},
+			focusLast: () => {},
+			focusPageDown: () => {},
+			focusPageUp: () => {},
+			isFocused: () => false,
+			containerProps: {
+				"aria-activedescendant": () => void 0,
+				onKeyDown: () => {}
+			},
+			getItemProps: (key) => ({ id: `item-${key}` })
+		};
+	}
+	const [internalKey, setInternalKey] = createSignal(defaultFocusedKey ?? null);
+	const focusedKey = controlledFocusedKey ?? internalKey;
+	const setFocusedKey = (key) => {
+		if (controlledFocusedKey) onFocusChange?.(key);
+		else {
+			setInternalKey(key);
+			onFocusChange?.(key);
+		}
+	};
+	const focusedItem = () => {
+		const key = focusedKey();
+		if (!key) return null;
+		return items().find((item) => getKey(item) === key) ?? null;
+	};
+	const getValidItems = () => {
+		if (!skipDisabled) return items();
+		return items().filter((item) => !isDisabled(item));
+	};
+	const getKeyIndex = (key) => {
+		if (!key) return -1;
+		return getValidItems().findIndex((item) => getKey(item) === key);
+	};
+	const focusByIndex = (index) => {
+		const validItems = getValidItems();
+		if (validItems.length === 0) return;
+		let targetIndex = index;
+		if (wrap) targetIndex = (index % validItems.length + validItems.length) % validItems.length;
+		else targetIndex = Math.max(0, Math.min(index, validItems.length - 1));
+		const item = validItems[targetIndex];
+		if (item) setFocusedKey(getKey(item));
+	};
+	const focusNext = () => {
+		focusByIndex(getKeyIndex(focusedKey()) + 1);
+	};
+	const focusPrevious = () => {
+		const currentIndex = getKeyIndex(focusedKey());
+		if (currentIndex === -1) focusByIndex(getValidItems().length - 1);
+		else focusByIndex(currentIndex - 1);
+	};
+	const focusFirst = () => {
+		focusByIndex(0);
+	};
+	const focusLast = () => {
+		focusByIndex(getValidItems().length - 1);
+	};
+	const focusPageDown = (pageSize = DEFAULT_PAGE_SIZE) => {
+		focusByIndex(getKeyIndex(focusedKey()) + pageSize);
+	};
+	const focusPageUp = (pageSize = DEFAULT_PAGE_SIZE) => {
+		const currentIndex = getKeyIndex(focusedKey());
+		if (currentIndex === -1) focusByIndex(getValidItems().length - 1);
+		else focusByIndex(currentIndex - pageSize);
+	};
+	const isFocused = (key) => {
+		return focusedKey() === key;
+	};
+	const onKeyDown = (e) => {
+		const isVertical = orientation === "vertical" || orientation === "both";
+		const isHorizontal = orientation === "horizontal" || orientation === "both";
+		switch (e.key) {
+			case "ArrowDown":
+				if (isVertical) {
+					e.preventDefault();
+					focusNext();
+				}
+				break;
+			case "ArrowUp":
+				if (isVertical) {
+					e.preventDefault();
+					focusPrevious();
+				}
+				break;
+			case "ArrowRight":
+				if (isHorizontal) {
+					e.preventDefault();
+					focusNext();
+				}
+				break;
+			case "ArrowLeft":
+				if (isHorizontal) {
+					e.preventDefault();
+					focusPrevious();
+				}
+				break;
+			case "Home":
+				e.preventDefault();
+				focusFirst();
+				break;
+			case "End":
+				e.preventDefault();
+				focusLast();
+				break;
+			case "PageDown":
+				e.preventDefault();
+				focusPageDown();
+				break;
+			case "PageUp":
+				e.preventDefault();
+				focusPageUp();
+				break;
+		}
+	};
+	const containerProps = {
+		"aria-activedescendant": () => {
+			const key = focusedKey();
+			return key ? `item-${key}` : void 0;
+		},
+		onKeyDown
+	};
+	const getItemProps = (key) => ({ id: `item-${key}` });
+	return {
+		focusedKey,
+		focusedItem,
+		setFocusedKey,
+		focusNext,
+		focusPrevious,
+		focusFirst,
+		focusLast,
+		focusPageDown,
+		focusPageUp,
+		isFocused,
+		containerProps,
+		getItemProps
+	};
+}
+//#endregion
+//#region src/focus/createAutoFocus.ts
+/**
+* Auto-focus management for solidaria
+*
+* Provides priority-based auto-focus with deferred execution
+* and conflict resolution for multiple auto-focus elements.
+*/
+let autoFocusQueue = [];
+let processingTimeout = null;
+/**
+* Process the auto-focus queue and focus the highest priority element.
+*/
+function processAutoFocusQueue() {
+	if (processingTimeout) {
+		clearTimeout(processingTimeout);
+		processingTimeout = null;
+	}
+	if (autoFocusQueue.length === 0) return;
+	autoFocusQueue.sort((a, b) => b.priority - a.priority);
+	const winner = autoFocusQueue[0];
+	const losers = autoFocusQueue.slice(1);
+	autoFocusQueue = [];
+	for (const loser of losers) loser.onSkip?.();
+	const element = winner.ref();
+	if (!element) {
+		winner.onSkip?.();
+		return;
+	}
+	const activeElement = document.activeElement;
+	if (!(winner.force || !activeElement || activeElement === document.body || activeElement === document.documentElement)) {
+		winner.onSkip?.();
+		return;
+	}
+	if (winner.delay > 0) setTimeout(() => {
+		const el = winner.ref();
+		if (el && document.body.contains(el)) {
+			if (winner.preventScroll) focusSafely(el);
+			else el.focus();
+			winner.onFocus?.(el);
+		}
+	}, winner.delay);
+	else {
+		if (winner.preventScroll) focusSafely(element);
+		else element.focus();
+		winner.onFocus?.(element);
+	}
+}
+/**
+* Queue an element for auto-focus.
+*/
+function queueAutoFocus(item) {
+	autoFocusQueue.push(item);
+	if (processingTimeout === null) processingTimeout = setTimeout(processAutoFocusQueue, 0);
+}
+/**
+* Remove an item from the auto-focus queue.
+*/
+function removeFromQueue(ref) {
+	autoFocusQueue = autoFocusQueue.filter((item) => item.ref !== ref);
+}
+/**
+* Creates auto-focus behavior for an element.
+*
+* This hook registers the element for auto-focus when mounted. If multiple
+* elements request auto-focus, the one with the highest priority wins.
+*
+* @param ref - Accessor for the element to focus
+* @param options - Auto-focus options
+*
+* @example
+* ```tsx
+* function Dialog(props) {
+*   let contentRef: HTMLDivElement | undefined;
+*
+*   createAutoFocus(() => contentRef, {
+*     priority: 10, // High priority for dialogs
+*     onFocus: () => console.log('Dialog focused'),
+*   });
+*
+*   return (
+*     <div ref={contentRef} tabIndex={-1}>
+*       {props.children}
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With delay for animations
+* function AnimatedPanel() {
+*   let panelRef: HTMLDivElement | undefined;
+*
+*   createAutoFocus(() => panelRef, {
+*     delay: 300, // Wait for animation
+*   });
+*
+*   return <div ref={panelRef} class="animated-panel">...</div>;
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Conditional auto-focus
+* function Input(props) {
+*   let inputRef: HTMLInputElement | undefined;
+*
+*   createAutoFocus(() => inputRef, {
+*     isEnabled: props.autoFocus,
+*   });
+*
+*   return <input ref={inputRef} />;
+* }
+* ```
+*/
+function createAutoFocus(ref, options = {}) {
+	const { isEnabled = true, priority = 0, delay = 0, force = false, preventScroll = true, onFocus, onSkip } = options;
+	if (isServer) return {
+		focus: () => {},
+		cancel: () => {}
+	};
+	let canceled = false;
+	onMount(() => {
+		if (!isEnabled || canceled) return;
+		queueAutoFocus({
+			ref,
+			priority,
+			delay,
+			force,
+			preventScroll,
+			onFocus,
+			onSkip
+		});
+	});
+	onCleanup(() => {
+		removeFromQueue(ref);
+	});
+	const focus = () => {
+		if (canceled) return;
+		const element = ref();
+		if (!element) return;
+		if (preventScroll) focusSafely(element);
+		else element.focus();
+		onFocus?.(element);
+	};
+	const cancel = () => {
+		canceled = true;
+		removeFromQueue(ref);
+	};
+	return {
+		focus,
+		cancel
+	};
+}
+/**
+* Clears all pending auto-focus requests.
+* Useful for testing or when navigating away.
+*/
+function clearAutoFocusQueue() {
+	if (processingTimeout) {
+		clearTimeout(processingTimeout);
+		processingTimeout = null;
+	}
+	autoFocusQueue = [];
+}
+/**
+* Gets the current auto-focus queue length.
+* Useful for debugging.
+*/
+function getAutoFocusQueueLength() {
+	return autoFocusQueue.length;
+}
+//#endregion
+export { clearFocusStack as a, popFocusStack as c, useFocusManager as d, createVirtualFocus as i, pushFocusStack as l, createAutoFocus as n, createFocusRestore as o, getAutoFocusQueueLength as r, getFocusStackLength as s, clearAutoFocusQueue as t, FocusScope as u };
+
+//# sourceMappingURL=focus2.jsx.map