@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/Boxer/Boxer.svelte

@@ -1,605 +1,492 @@
-<script lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
-  import { untrack } from "svelte";
-  import {
-    createVirtualizer,
-    type SvelteVirtualizer,
-  } from "@tanstack/svelte-virtual";
-  import {
-    registerOverlay,
-  } from "../OverlayStack";
-  import Portal from "../Portal/Portal.svelte";
-  import type { BoxerItem, BoxerProps } from "./types";
-  import { createBoxerStore } from "./store";
-  import BoxerTarget from "./BoxerTarget.svelte";
-
-  let {
-    adapter,
-    clearable = true,
-    data = [],
-    dataSource: dataSourceProp = undefined,
-    debounceMs = 300,
-    disablePortal = false,
-    disabled,
-    error,
-    label,
-    leftSection,
-    mah = 200,
-    multiSelect,
-    onAPICall: onAPICallProp = undefined,
-    onBufferChange,
-    onChange,
-    onResolveValues: onResolveValuesProp = undefined,
-    openOnClear,
-    pageSize = 50,
-    placeholder,
-    rightSection,
-    searchColumns,
-    selectFirst,
-    showAll,
-    value = $bindable<any>(undefined),
-  }: BoxerProps = $props();
-
-  const instanceId = `boxer-${Math.random().toString(36).slice(2, 10)}`;
-  const inputId = `${instanceId}-input`;
-  const listboxId = `${instanceId}-listbox`;
-
-  // Derive effective dataSource, onAPICall, resolver from adapter when not explicitly provided.
-  const dataSource = dataSourceProp ?? (adapter ? "server" : "local");
-  const onAPICall =
-    onAPICallProp ??
-    (adapter
-      ? (params: {
-          page: number;
-          pageSize: number;
-          search?: string;
-          signal?: AbortSignal;
-        }) => adapter!.fetch(params)
-      : undefined);
-  const onResolveValues =
-    onResolveValuesProp ??
-    (adapter?.resolveByValue
-      ? (values: any[], signal?: AbortSignal) =>
-          adapter!.resolveByValue!(values, signal)
-      : undefined);
-
-  // Create store once with initial props
-  const store = createBoxerStore({
-    clearable,
-    data,
-    dataSource,
-    disabled,
-    error,
-    label,
-    mah,
-    multiSelect,
-    onAPICall,
-    onBufferChange,
-    onChange,
-    onResolveValues,
-    openOnClear,
-    pageSize,
-    placeholder,
-    searchColumns,
-    selectFirst,
-    showAll,
-    value,
-  });
-
-  // Fine-grained derived values so $effect blocks only re-run when the
-  // specific field they care about actually changes (not on every store update).
-  const storeSearch = $derived($store.search);
-  const storeOpened = $derived($store.opened);
-  const storeBoxerData = $derived($store.boxerData);
-  const storeSelectedItems = $derived($store.selectedItems);
-  const storeInput = $derived($store.input);
-  const boxerDataLength = $derived($store.boxerData.length);
-
-  // Sync value prop changes into store
-  $effect(() => {
-    store.updateProps({ value });
-  });
-
-  // Virtualizer
-  let parentEl = $state<HTMLDivElement | undefined>(undefined);
-  let targetRef = $state<{ focus: () => void } | undefined>(undefined);
-  let anchorEl = $state<HTMLDivElement | undefined>(undefined);
-  let dropdownEl = $state<HTMLDivElement | undefined>(undefined);
-  let popupTop = $state(0);
-  let popupLeft = $state(0);
-  let popupWidth = $state(0);
-  let activeOptionIndex = $state<number | null>(null);
-  let backdropZ = $state(1090);
-  let dropdownZ = $state(1100);
-  let pointerInteractingWithDropdown = $state(false);
-  let insideDialog = $state(false);
-  let suppressOpenOnFocus = $state(false);
-  const effectiveDisablePortal = $derived(disablePortal || insideDialog);
-  // Plain variable — NOT $state to avoid deep proxy on the complex virtualizer object.
-  let rawVirtualizer: SvelteVirtualizer<
-    HTMLDivElement,
-    HTMLDivElement
-  > | null = null;
-  // Virtualizer outputs as $state — updated directly by the subscribe callback.
-  let virtualItems = $state.raw<
-    ReturnType<
-      SvelteVirtualizer<HTMLDivElement, HTMLDivElement>["getVirtualItems"]
-    >
-  >([]);
-  let totalSize = $state(0);
-
-  // Create virtualizer only when parentEl changes (dropdown mount/unmount).
-  $effect(() => {
-    if (!parentEl) {
-      rawVirtualizer = null;
-      virtualItems = [];
-      totalSize = 0;
-      return;
-    }
-    const initialCount = untrack(() => boxerDataLength);
-    const v = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-      count: initialCount,
-      estimateSize: () => 36,
-      getScrollElement: () => parentEl!,
-    });
-    return v.subscribe((instance) => {
-      rawVirtualizer = instance;
-      virtualItems = instance.getVirtualItems();
-      totalSize = instance.getTotalSize();
-    });
-  });
-
-  // Update virtualizer count when data length actually changes (preserves scroll).
-  $effect(() => {
-    const count = boxerDataLength;
-    if (rawVirtualizer && parentEl) {
-      rawVirtualizer.setOptions({
-        count,
-        estimateSize: () => 36,
-        getScrollElement: () => parentEl!,
-      });
-    }
-  });
-
-  // Debounced search — only reacts to actual search text changes.
-  let searchTimeout: ReturnType<typeof setTimeout> | undefined;
-  let didInitialFetch = false;
-
-  $effect(() => {
-    const search = storeSearch;
-    // Skip the initial tick: the initial-fetch effect below handles first load.
-    if (!didInitialFetch) return;
-    clearTimeout(searchTimeout);
-    searchTimeout = setTimeout(() => {
-      if (search !== undefined && storeOpened) {
-        store.fetchData(search, true);
-        parentEl?.scrollTo?.({ top: 0 });
-      }
-    }, debounceMs);
-    return () => clearTimeout(searchTimeout);
-  });
-
-  // Initial data fetch + resolve labels for preloaded value(s).
-  $effect(() => {
-    didInitialFetch = true;
-    store.fetchData("", true);
-    resolvePreloadedValue(value);
-    return () => {
-      clearTimeout(searchTimeout);
-      store.cancel();
-    };
-  });
-
-  let lastResolvedKey: string | null = null;
-  async function resolvePreloadedValue(val: unknown) {
-    if (val == null || val === "" || (Array.isArray(val) && val.length === 0)) return;
-    if (!onResolveValues) return;
-
-    const values = Array.isArray(val) ? val : [val];
-    const key = JSON.stringify(values);
-    if (key === lastResolvedKey) return;
-    lastResolvedKey = key;
-
-    try {
-      const items = await onResolveValues(values);
-      if (!items || items.length === 0) return;
-      if (multiSelect) {
-        store.setSelectedItems(items);
-      } else {
-        store.setSelectedItems(items.slice(0, 1));
-      }
-    } catch (err) {
-      console.error("Boxer resolveByValue error:", err);
-    }
-  }
-
-  // When value prop changes from outside, resolve any new labels we don't yet have.
-  $effect(() => {
-    void value;
-    untrack(() => {
-      if (value == null) {
-        store.clearSelectedItems();
-        return;
-      }
-      const knownKeys = new Set(
-        $store.selectedItems.map((i) => JSON.stringify(i.value)),
-      );
-      const needed = (Array.isArray(value) ? value : [value]).filter(
-        (v) => !knownKeys.has(JSON.stringify(v)),
-      );
-      if (needed.length === 0) {
-        if (!multiSelect) {
-          // Keep the single-item list in sync with the chosen value.
-          const match = $store.selectedItems.find(
-            (i) => JSON.stringify(i.value) === JSON.stringify(value),
-          );
-          if (match) store.setSelectedItems([match]);
-        } else {
-          // Drop any selected items whose value is no longer in `value`.
-          const keep = new Set((value as any[]).map((v) => JSON.stringify(v)));
-          const filtered = $store.selectedItems.filter((i) =>
-            keep.has(JSON.stringify(i.value)),
-          );
-          if (filtered.length !== $store.selectedItems.length) {
-            store.setSelectedItems(filtered);
-          }
-        }
-        return;
-      }
-      // Fall back to boxerData, then to the resolver.
-      const fromBoxer = $store.boxerData.filter((i) =>
-        needed.some((v) => JSON.stringify(v) === JSON.stringify(i.value)),
-      );
-      fromBoxer.forEach((i) => store.addSelectedItem(i));
-      const stillMissing = needed.filter(
-        (v) => !fromBoxer.some((i) => JSON.stringify(i.value) === JSON.stringify(v)),
-      );
-      if (stillMissing.length > 0) resolvePreloadedValue(stillMissing);
-    });
-  });
-
-  // Sync displayed input + emit onBufferChange from selectedItems (single source of truth).
-  $effect(() => {
-    const selected = storeSelectedItems;
-    const opened = storeOpened;
-    const currentInput = storeInput;
-
-    if (multiSelect) {
-      const labels = selected.map((i) => i.label).join(", ");
-      if (!opened && currentInput !== labels) store.setInput(labels);
-      onBufferChange?.(selected);
-    } else {
-      const item = selected[0] ?? null;
-      if (item && currentInput !== item.label && !opened) {
-        store.setInput(item.label);
-      } else if (!item && !opened && currentInput !== "") {
-        store.setInput("");
-      }
-      onBufferChange?.(item);
-    }
-  });
-
-  // When data arrives, opportunistically enrich selectedItems for multiselect
-  // (adds labels for items that just loaded).
-  $effect(() => {
-    const boxerData = storeBoxerData;
-    if (!multiSelect || !Array.isArray(value) || value.length === 0) return;
-    untrack(() => {
-      const known = new Set(
-        $store.selectedItems.map((i) => JSON.stringify(i.value)),
-      );
-      for (const v of value as any[]) {
-        if (known.has(JSON.stringify(v))) continue;
-        const match = boxerData.find(
-          (i) => JSON.stringify(i.value) === JSON.stringify(v),
-        );
-        if (match) store.addSelectedItem(match);
-      }
-    });
-  });
-
-  // Select first
-  $effect(() => {
-    const boxerData = storeBoxerData;
-    if (selectFirst && boxerData.length > 0 && !multiSelect && !value) {
-      onOptionSubmit(0);
-    }
-  });
-
-  function onOptionSubmit(index: number) {
-    const option = $store.boxerData?.[index];
-    if (!option) return;
-
-    activeOptionIndex = index;
-
-    if (multiSelect) {
-      const currentValues = Array.isArray(value) ? value : [];
-      const isSelected = currentValues.includes(option.value);
-      if (isSelected) {
-        value = currentValues.filter((v: unknown) => v !== option.value);
-        store.removeSelectedItem(option.value);
-      } else {
-        value = [...currentValues, option.value];
-        store.addSelectedItem(option);
-      }
-      onChange?.(value);
-    } else {
-      value = option.value;
-      store.setSelectedItems([option]);
-      onChange?.(option.value);
-      store.setSearch("");
-      store.setInput(option.label);
-      store.setOpened(false);
-      activeOptionIndex = null;
-    }
-  }
-
-  function onClear() {
-    if (showAll && selectFirst) {
-      onOptionSubmit(0);
-    } else {
-      value = multiSelect ? [] : null;
-      store.clearSelectedItems();
-      onChange?.(value);
-      store.setSearch("");
-      store.setInput("");
-      activeOptionIndex = null;
-      targetRef?.focus();
-    }
-    if (openOnClear) {
-      store.setOpened(true);
-    }
-  }
-
-  function focusDropdownItem(index: number) {
-    const length = $store.boxerData.length;
-    if (length === 0) return;
-    const clamped = Math.max(0, Math.min(index, length - 1));
-    activeOptionIndex = clamped;
-    rawVirtualizer?.scrollToIndex(clamped, { align: "auto" });
-    requestAnimationFrame(() => {
-      const el = parentEl?.querySelector<HTMLDivElement>(
-        `[data-index="${clamped}"]`,
-      );
-      if (el) {
-        el.scrollIntoView({ block: "nearest" });
-        el.focus();
-      }
-    });
-  }
-
-  function onInputKeydown(e: KeyboardEvent) {
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        if (!$store.opened) store.setOpened(true);
-        requestAnimationFrame(() => {
-          if ($store.boxerData.length > 0) focusDropdownItem(0);
-        });
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (!$store.opened) {
-          store.setOpened(true);
-        } else if (!multiSelect) {
-          const selectedIndex = $store.boxerData.findIndex(
-            (item: BoxerItem) => item.value === value,
-          );
-          if (selectedIndex >= 0) {
-            store.setOpened(false);
-            activeOptionIndex = null;
-          } else {
-            onOptionSubmit(0);
-          }
-        } else {
-          store.setOpened(false);
-          activeOptionIndex = null;
-        }
-        break;
-      case "Escape":
-        if ($store.opened) {
-          e.preventDefault();
-          store.setOpened(false);
-          activeOptionIndex = null;
-        }
-        break;
-      case "Tab":
-        if (multiSelect && $store.opened && $store.boxerData.length > 0) {
-          e.preventDefault();
-          onOptionSubmit(0);
-        }
-        break;
-    }
-  }
-
-  function onDropdownItemKeydown(e: KeyboardEvent, index: number) {
-    const length = $store.boxerData.length;
-    const pageSizeNav = Math.max(1, Math.floor(mah / 36));
-
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        if (index < length - 1) focusDropdownItem(index + 1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (index === 0) {
-          activeOptionIndex = null;
-          targetRef?.focus();
-        } else {
-          focusDropdownItem(index - 1);
-        }
-        break;
-      case "Home":
-        e.preventDefault();
-        focusDropdownItem(0);
-        break;
-      case "End":
-        e.preventDefault();
-        focusDropdownItem(length - 1);
-        break;
-      case "PageDown":
-        e.preventDefault();
-        focusDropdownItem(Math.min(length - 1, index + pageSizeNav));
-        break;
-      case "PageUp":
-        e.preventDefault();
-        focusDropdownItem(Math.max(0, index - pageSizeNav));
-        break;
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        onOptionSubmit(index);
-        if (!multiSelect) targetRef?.focus();
-        break;
-      case "Escape":
-        e.preventDefault();
-        store.setOpened(false);
-        activeOptionIndex = null;
-        suppressOpenOnFocus = true;
-        targetRef?.focus();
-        break;
-    }
-  }
-
-  function updatePopoverPosition() {
-    if (!anchorEl) return;
-    const rect = anchorEl.getBoundingClientRect();
-    const viewportWidth = typeof window === "undefined" ? rect.width : window.innerWidth;
-    const horizontalPadding = 8;
-    const maxWidth = Math.max(160, viewportWidth - horizontalPadding * 2);
-    const nextWidth = Math.min(Math.max(220, rect.width), maxWidth);
-    const maxLeft = viewportWidth - nextWidth - horizontalPadding;
-
-    popupTop = rect.bottom + 4;
-    popupWidth = nextWidth;
-    popupLeft = Math.min(
-      Math.max(rect.left, horizontalPadding),
-      Math.max(horizontalPadding, maxLeft),
-    );
-  }
-
-  function markDropdownPointerInteraction() {
-    pointerInteractingWithDropdown = true;
-    setTimeout(() => {
-      pointerInteractingWithDropdown = false;
-    }, 0);
-  }
-
-  function onBackdropPointerDown(e: PointerEvent) {
-    // Consume the pointer sequence so it cannot activate elements behind the backdrop.
-    e.preventDefault();
-    e.stopPropagation();
-    store.setOpened(false);
-  }
-
-  function onOptionPointerDown(e: PointerEvent, index: number) {
-    // Commit selection before blur/focusout closes the popover on some browsers.
-    e.preventDefault();
-    e.stopPropagation();
-    onOptionSubmit(index);
-  }
-
-  function syncInsideDialogFlag() {
-    insideDialog = !!anchorEl?.closest('dialog, [role="dialog"]');
-  }
-
-  // Public API via bind:this
-  export function clear() {
-    onClear();
-  }
-  export function close() {
-    store.setOpened(false);
-    activeOptionIndex = null;
-  }
-  export function focus() {
-    suppressOpenOnFocus = false;
-    targetRef?.focus();
-  }
-  export function getValue() {
-    return value;
-  }
-  export function open() {
-    if (disabled) return;
-    store.setOpened(true);
-    activeOptionIndex = null;
-  }
-  export function refetch() {
-    return store.refetch();
-  }
-  export function setValue(val: unknown) {
-    value = val;
-    onChange?.(val);
-  }
-
-  $effect(() => {
-    if (!$store.opened || effectiveDisablePortal || disabled) {
-      return;
-    }
-
-    updatePopoverPosition();
-
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    const onWindowChange = () => {
-      updatePopoverPosition();
-    };
-
-    window.addEventListener("resize", onWindowChange);
-    window.addEventListener("scroll", onWindowChange, true);
-
-    return () => {
-      window.removeEventListener("resize", onWindowChange);
-      window.removeEventListener("scroll", onWindowChange, true);
-    };
-  });
-
-  $effect(() => {
-    if (!$store.opened || disabled) {
-      return;
-    }
-
-    const overlay = registerOverlay({
-      kind: "popover",
-      mount: effectiveDisablePortal ? "inline" : "portal",
-    });
-    backdropZ = overlay.layer.backdrop;
-    dropdownZ = overlay.layer.content;
-
-    return () => {
-      overlay.unregister();
-      backdropZ = 1090;
-      dropdownZ = 1100;
-    };
-  });
-
-  $effect(() => {
-    void anchorEl;
-    void storeOpened;
-    syncInsideDialogFlag();
-  });
-
-  $effect(() => {
-    if (!$store.opened || !effectiveDisablePortal || disabled || typeof window === "undefined") {
-      return;
-    }
-
-    const onDocumentPointerDown = (event: PointerEvent) => {
-      const target = event.target as Node | null;
-      if (!target) return;
-
-      const insideAnchor = !!anchorEl?.contains(target);
-      const insideDropdown = !!dropdownEl?.contains(target);
-      if (!insideAnchor && !insideDropdown) {
-        store.setOpened(false);
-      }
-    };
-
-    window.addEventListener("pointerdown", onDocumentPointerDown, true);
-    return () => window.removeEventListener("pointerdown", onDocumentPointerDown, true);
-  });
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
+import { untrack } from "svelte";
+import { createVirtualizer } from "@tanstack/svelte-virtual";
+import { registerOverlay } from "../OverlayStack";
+import Portal from "../Portal/Portal.svelte";
+import { createBoxerStore } from "./store";
+import BoxerTarget from "./BoxerTarget.svelte";
+let { adapter, clearable = true, data = [], dataSource: dataSourceProp = undefined, debounceMs = 300, disablePortal = false, disabled, error, id, label, leftSection, mah = 200, multiSelect, name, onAPICall: onAPICallProp = undefined, onBufferChange, onChange, onResolveValues: onResolveValuesProp = undefined, openOnClear, pageSize = 50, placeholder, rightSection, searchColumns, selectFirst, showAll, value = $bindable(undefined) } = $props();
+const instanceId = `boxer-${Math.random().toString(36).slice(2, 10)}`;
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- id is intentionally captured once for a stable inputId
+const inputId = id ?? `${instanceId}-input`;
+const listboxId = `${instanceId}-listbox`;
+// Derive effective dataSource, onAPICall, resolver from adapter when not explicitly provided.
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- adapter/dataSourceProp/onAPICallProp/onResolveValuesProp captured once at mount
+const dataSource = dataSourceProp ?? (adapter ? "server" : "local");
+// svelte-ignore state_referenced_locally
+const onAPICall = onAPICallProp ?? (adapter ? (params) => adapter.fetch(params) : undefined);
+// svelte-ignore state_referenced_locally
+const onResolveValues = onResolveValuesProp ?? (adapter?.resolveByValue ? (values, signal) => adapter.resolveByValue(values, signal) : undefined);
+// Create store once with initial props
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- all props captured at mount for store initialisation
+const store = createBoxerStore({
+	clearable,
+	data,
+	dataSource,
+	disabled,
+	error,
+	label,
+	mah,
+	multiSelect,
+	onAPICall,
+	onBufferChange,
+	onChange,
+	onResolveValues,
+	openOnClear,
+	pageSize,
+	placeholder,
+	searchColumns,
+	selectFirst,
+	showAll,
+	value
+});
+// Fine-grained derived values so $effect blocks only re-run when the
+// specific field they care about actually changes (not on every store update).
+const storeSearch = $derived($store.search);
+const storeOpened = $derived($store.opened);
+const storeBoxerData = $derived($store.boxerData);
+const storeSelectedItems = $derived($store.selectedItems);
+const storeInput = $derived($store.input);
+const boxerDataLength = $derived($store.boxerData.length);
+// Sync value prop changes into store
+$effect(() => {
+	store.updateProps({ value });
+});
+// Virtualizer
+let parentEl = $state(undefined);
+let targetRef = $state(undefined);
+let anchorEl = $state(undefined);
+let dropdownEl = $state(undefined);
+let popupTop = $state(0);
+let popupLeft = $state(0);
+let popupWidth = $state(0);
+let activeOptionIndex = $state(null);
+let backdropZ = $state(1090);
+let dropdownZ = $state(1100);
+let pointerInteractingWithDropdown = $state(false);
+let insideDialog = $state(false);
+let suppressOpenOnFocus = $state(false);
+const effectiveDisablePortal = $derived(disablePortal || insideDialog);
+// Plain variable — NOT $state to avoid deep proxy on the complex virtualizer object.
+let rawVirtualizer = null;
+// Virtualizer outputs as $state — updated directly by the subscribe callback.
+let virtualItems = $state.raw([]);
+let totalSize = $state(0);
+// Create virtualizer only when parentEl changes (dropdown mount/unmount).
+$effect(() => {
+	if (!parentEl) {
+		rawVirtualizer = null;
+		virtualItems = [];
+		totalSize = 0;
+		return;
+	}
+	const initialCount = untrack(() => boxerDataLength);
+	const v = createVirtualizer({
+		count: initialCount,
+		estimateSize: () => 36,
+		getScrollElement: () => parentEl
+	});
+	return v.subscribe((instance) => {
+		rawVirtualizer = instance;
+		virtualItems = instance.getVirtualItems();
+		totalSize = instance.getTotalSize();
+	});
+});
+// Update virtualizer count when data length actually changes (preserves scroll).
+$effect(() => {
+	const count = boxerDataLength;
+	if (rawVirtualizer && parentEl) {
+		rawVirtualizer.setOptions({
+			count,
+			estimateSize: () => 36,
+			getScrollElement: () => parentEl
+		});
+	}
+});
+// Debounced search — only reacts to actual search text changes.
+let searchTimeout;
+let didInitialFetch = false;
+$effect(() => {
+	const search = storeSearch;
+	// Skip the initial tick: the initial-fetch effect below handles first load.
+	if (!didInitialFetch) return;
+	clearTimeout(searchTimeout);
+	searchTimeout = setTimeout(() => {
+		if (search !== undefined && storeOpened) {
+			store.fetchData(search, true);
+			parentEl?.scrollTo?.({ top: 0 });
+		}
+	}, debounceMs);
+	return () => clearTimeout(searchTimeout);
+});
+// Initial data fetch + resolve labels for preloaded value(s).
+$effect(() => {
+	didInitialFetch = true;
+	store.fetchData("", true);
+	resolvePreloadedValue(value);
+	return () => {
+		clearTimeout(searchTimeout);
+		store.cancel();
+	};
+});
+let lastResolvedKey = null;
+async function resolvePreloadedValue(val) {
+	if (val == null || val === "" || Array.isArray(val) && val.length === 0) return;
+	if (!onResolveValues) return;
+	const values = Array.isArray(val) ? val : [val];
+	const key = JSON.stringify(values);
+	if (key === lastResolvedKey) return;
+	lastResolvedKey = key;
+	try {
+		const items = await onResolveValues(values);
+		if (!items || items.length === 0) return;
+		if (multiSelect) {
+			store.setSelectedItems(items);
+		} else {
+			store.setSelectedItems(items.slice(0, 1));
+		}
+	} catch (err) {
+		console.error("Boxer resolveByValue error:", err);
+	}
+}
+// When value prop changes from outside, resolve any new labels we don't yet have.
+$effect(() => {
+	void value;
+	untrack(() => {
+		if (value == null) {
+			store.clearSelectedItems();
+			return;
+		}
+		const knownKeys = new Set($store.selectedItems.map((i) => JSON.stringify(i.value)));
+		const needed = (Array.isArray(value) ? value : [value]).filter((v) => !knownKeys.has(JSON.stringify(v)));
+		if (needed.length === 0) {
+			if (!multiSelect) {
+				// Keep the single-item list in sync with the chosen value.
+				const match = $store.selectedItems.find((i) => JSON.stringify(i.value) === JSON.stringify(value));
+				if (match) store.setSelectedItems([match]);
+			} else {
+				// Drop any selected items whose value is no longer in `value`.
+				const keep = new Set(value.map((v) => JSON.stringify(v)));
+				const filtered = $store.selectedItems.filter((i) => keep.has(JSON.stringify(i.value)));
+				if (filtered.length !== $store.selectedItems.length) {
+					store.setSelectedItems(filtered);
+				}
+			}
+			return;
+		}
+		// Fall back to boxerData, then to the resolver.
+		const fromBoxer = $store.boxerData.filter((i) => needed.some((v) => JSON.stringify(v) === JSON.stringify(i.value)));
+		fromBoxer.forEach((i) => store.addSelectedItem(i));
+		const stillMissing = needed.filter((v) => !fromBoxer.some((i) => JSON.stringify(i.value) === JSON.stringify(v)));
+		if (stillMissing.length > 0) resolvePreloadedValue(stillMissing);
+	});
+});
+// Sync displayed input + emit onBufferChange from selectedItems (single source of truth).
+$effect(() => {
+	const selected = storeSelectedItems;
+	const opened = storeOpened;
+	const currentInput = storeInput;
+	if (multiSelect) {
+		const labels = selected.map((i) => i.label).join(", ");
+		if (!opened && currentInput !== labels) store.setInput(labels);
+		onBufferChange?.(selected);
+	} else {
+		const item = selected[0] ?? null;
+		if (item && currentInput !== item.label && !opened) {
+			store.setInput(item.label);
+		} else if (!item && !opened && currentInput !== "") {
+			store.setInput("");
+		}
+		onBufferChange?.(item);
+	}
+});
+// When data arrives, opportunistically enrich selectedItems for multiselect
+// (adds labels for items that just loaded).
+$effect(() => {
+	const boxerData = storeBoxerData;
+	if (!multiSelect || !Array.isArray(value) || value.length === 0) return;
+	untrack(() => {
+		const known = new Set($store.selectedItems.map((i) => JSON.stringify(i.value)));
+		for (const v of value) {
+			if (known.has(JSON.stringify(v))) continue;
+			const match = boxerData.find((i) => JSON.stringify(i.value) === JSON.stringify(v));
+			if (match) store.addSelectedItem(match);
+		}
+	});
+});
+// Select first
+// `value` is read via untrack() — this effect should react to boxerData becoming
+// ready, not to its own write (onOptionSubmit assigns `value`), which would
+// otherwise cause a spurious second fire whenever the first option's value is
+// falsy (0/"").
+$effect(() => {
+	const boxerData = storeBoxerData;
+	if (selectFirst && boxerData.length > 0 && !multiSelect && !untrack(() => value)) {
+		onOptionSubmit(0);
+	}
+});
+function onOptionSubmit(index) {
+	const option = $store.boxerData?.[index];
+	if (!option) return;
+	activeOptionIndex = index;
+	if (multiSelect) {
+		const currentValues = Array.isArray(value) ? value : [];
+		const isSelected = currentValues.includes(option.value);
+		if (isSelected) {
+			value = currentValues.filter((v) => v !== option.value);
+			store.removeSelectedItem(option.value);
+		} else {
+			value = [...currentValues, option.value];
+			store.addSelectedItem(option);
+		}
+		onChange?.(value);
+	} else {
+		value = option.value;
+		store.setSelectedItems([option]);
+		onChange?.(option.value);
+		store.setSearch("");
+		store.setInput(option.label);
+		store.setOpened(false);
+		activeOptionIndex = null;
+	}
+}
+function onClear() {
+	if (showAll && selectFirst) {
+		onOptionSubmit(0);
+	} else {
+		value = multiSelect ? [] : null;
+		store.clearSelectedItems();
+		onChange?.(value);
+		store.setSearch("");
+		store.setInput("");
+		activeOptionIndex = null;
+		targetRef?.focus();
+	}
+	if (openOnClear) {
+		store.setOpened(true);
+	}
+}
+function focusDropdownItem(index) {
+	const length = $store.boxerData.length;
+	if (length === 0) return;
+	const clamped = Math.max(0, Math.min(index, length - 1));
+	activeOptionIndex = clamped;
+	rawVirtualizer?.scrollToIndex(clamped, { align: "auto" });
+	requestAnimationFrame(() => {
+		const el = parentEl?.querySelector(`[data-index="${clamped}"]`);
+		if (el) {
+			el.scrollIntoView({ block: "nearest" });
+			el.focus();
+		}
+	});
+}
+function onInputKeydown(e) {
+	switch (e.key) {
+		case "ArrowDown":
+			e.preventDefault();
+			if (!$store.opened) store.setOpened(true);
+			requestAnimationFrame(() => {
+				if ($store.boxerData.length > 0) focusDropdownItem(0);
+			});
+			break;
+		case "Enter":
+			e.preventDefault();
+			if (!$store.opened) {
+				store.setOpened(true);
+			} else if (!multiSelect) {
+				const selectedIndex = $store.boxerData.findIndex((item) => item.value === value);
+				if (selectedIndex >= 0) {
+					store.setOpened(false);
+					activeOptionIndex = null;
+				} else {
+					onOptionSubmit(0);
+				}
+			} else {
+				store.setOpened(false);
+				activeOptionIndex = null;
+			}
+			break;
+		case "Escape":
+			if ($store.opened) {
+				e.preventDefault();
+				store.setOpened(false);
+				activeOptionIndex = null;
+			}
+			break;
+		case "Tab":
+			if (multiSelect && $store.opened && $store.boxerData.length > 0) {
+				e.preventDefault();
+				onOptionSubmit(0);
+			}
+			break;
+	}
+}
+function onDropdownItemKeydown(e, index) {
+	const length = $store.boxerData.length;
+	const pageSizeNav = Math.max(1, Math.floor(mah / 36));
+	switch (e.key) {
+		case "ArrowDown":
+			e.preventDefault();
+			if (index < length - 1) focusDropdownItem(index + 1);
+			break;
+		case "ArrowUp":
+			e.preventDefault();
+			if (index === 0) {
+				activeOptionIndex = null;
+				targetRef?.focus();
+			} else {
+				focusDropdownItem(index - 1);
+			}
+			break;
+		case "Home":
+			e.preventDefault();
+			focusDropdownItem(0);
+			break;
+		case "End":
+			e.preventDefault();
+			focusDropdownItem(length - 1);
+			break;
+		case "PageDown":
+			e.preventDefault();
+			focusDropdownItem(Math.min(length - 1, index + pageSizeNav));
+			break;
+		case "PageUp":
+			e.preventDefault();
+			focusDropdownItem(Math.max(0, index - pageSizeNav));
+			break;
+		case "Enter":
+		case " ":
+			e.preventDefault();
+			onOptionSubmit(index);
+			if (!multiSelect) targetRef?.focus();
+			break;
+		case "Escape":
+			e.preventDefault();
+			store.setOpened(false);
+			activeOptionIndex = null;
+			suppressOpenOnFocus = true;
+			targetRef?.focus();
+			break;
+	}
+}
+function updatePopoverPosition() {
+	if (!anchorEl) return;
+	const rect = anchorEl.getBoundingClientRect();
+	const viewportWidth = typeof window === "undefined" ? rect.width : window.innerWidth;
+	const horizontalPadding = 8;
+	const maxWidth = Math.max(160, viewportWidth - horizontalPadding * 2);
+	const nextWidth = Math.min(Math.max(220, rect.width), maxWidth);
+	const maxLeft = viewportWidth - nextWidth - horizontalPadding;
+	popupTop = rect.bottom + 4;
+	popupWidth = nextWidth;
+	popupLeft = Math.min(Math.max(rect.left, horizontalPadding), Math.max(horizontalPadding, maxLeft));
+}
+function markDropdownPointerInteraction() {
+	pointerInteractingWithDropdown = true;
+	setTimeout(() => {
+		pointerInteractingWithDropdown = false;
+	}, 0);
+}
+function onBackdropPointerDown(e) {
+	// Consume the pointer sequence so it cannot activate elements behind the backdrop.
+	e.preventDefault();
+	e.stopPropagation();
+	store.setOpened(false);
+}
+function onOptionPointerDown(e, index) {
+	// Commit selection before blur/focusout closes the popover on some browsers.
+	e.preventDefault();
+	e.stopPropagation();
+	onOptionSubmit(index);
+}
+function syncInsideDialogFlag() {
+	insideDialog = !!anchorEl?.closest("dialog, [role=\"dialog\"]");
+}
+// Public API via bind:this
+export function clear() {
+	onClear();
+}
+export function close() {
+	store.setOpened(false);
+	activeOptionIndex = null;
+}
+export function focus() {
+	suppressOpenOnFocus = false;
+	targetRef?.focus();
+}
+export function getValue() {
+	return value;
+}
+export function open() {
+	if (disabled) return;
+	store.setOpened(true);
+	activeOptionIndex = null;
+}
+export function refetch() {
+	return store.refetch();
+}
+export function setValue(val) {
+	value = val;
+	onChange?.(val);
+}
+$effect(() => {
+	if (!$store.opened || effectiveDisablePortal || disabled) {
+		return;
+	}
+	updatePopoverPosition();
+	if (typeof window === "undefined") {
+		return;
+	}
+	const onWindowChange = () => {
+		updatePopoverPosition();
+	};
+	window.addEventListener("resize", onWindowChange);
+	window.addEventListener("scroll", onWindowChange, true);
+	return () => {
+		window.removeEventListener("resize", onWindowChange);
+		window.removeEventListener("scroll", onWindowChange, true);
+	};
+});
+$effect(() => {
+	if (!$store.opened || disabled) {
+		return;
+	}
+	const overlay = registerOverlay({
+		kind: "popover",
+		mount: effectiveDisablePortal ? "inline" : "portal"
+	});
+	backdropZ = overlay.layer.backdrop;
+	dropdownZ = overlay.layer.content;
+	return () => {
+		overlay.unregister();
+		backdropZ = 1090;
+		dropdownZ = 1100;
+	};
+});
+$effect(() => {
+	void anchorEl;
+	void storeOpened;
+	syncInsideDialogFlag();
+});
+$effect(() => {
+	if (!$store.opened || !effectiveDisablePortal || disabled || typeof window === "undefined") {
+		return;
+	}
+	const onDocumentPointerDown = (event) => {
+		const target = event.target;
+		if (!target) return;
+		const insideAnchor = !!anchorEl?.contains(target);
+		const insideDropdown = !!dropdownEl?.contains(target);
+		if (!insideAnchor && !insideDropdown) {
+			store.setOpened(false);
+		}
+	};
+	window.addEventListener("pointerdown", onDocumentPointerDown, true);
+	return () => window.removeEventListener("pointerdown", onDocumentPointerDown, true);
+});
 </script>
 
 <div
@@ -631,6 +518,7 @@
     {inputId}
     {label}
     {leftSection}
+    {name}
     {placeholder}
     isFetching={$store.isFetching}
     search={$store.input}
@@ -657,6 +545,7 @@
         <div
           class="fixed inset-0"
           data-testid="boxer-backdrop"
+          role="presentation"
           onpointerdown={onBackdropPointerDown}
           style:z-index={backdropZ}
         ></div>
@@ -670,6 +559,7 @@
         data-testid="boxer-dropdown"
         id={listboxId}
         role="listbox"
+        tabindex="-1"
         aria-label={label ?? "Options"}
         onpointerdown={markDropdownPointerInteraction}
         style:z-index={dropdownZ}