@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/primitives/command/store.js

@@ -0,0 +1,205 @@
+function reorder(parent, entries) {
+  const current = [...parent.children].filter((child) => entries.includes(child));
+  if (current.every((child, index) => child === entries[index])) return;
+  const markers = current.map((child) => {
+    const marker = document.createComment("");
+    parent.insertBefore(marker, child);
+    return marker;
+  });
+  entries.forEach((entry, index) => {
+    parent.insertBefore(entry, markers[index] ?? null);
+  });
+  for (const marker of markers) marker.remove();
+}
+class CommandStore {
+  state = {
+    search: "",
+    value: "",
+    filtered: { count: 0, items: /* @__PURE__ */ new Map(), groups: /* @__PURE__ */ new Set() }
+  };
+  listeners = /* @__PURE__ */ new Set();
+  items = /* @__PURE__ */ new Map();
+  groups = /* @__PURE__ */ new Map();
+  rank = 0;
+  dirty = false;
+  searchDirty = false;
+  ordered = false;
+  revision = 0;
+  options;
+  constructor(options) {
+    this.options = options;
+  }
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  getState = () => this.state;
+  /** Bumps whenever filtering or items change; drives DOM sorting and selection repair. */
+  getRevision = () => this.revision;
+  emit() {
+    for (const listener of [...this.listeners]) listener();
+  }
+  isItemVisible(id) {
+    const item = this.items.get(id);
+    if (item?.forceMount) return true;
+    const { search, filtered } = this.state;
+    if (!search || !this.options.shouldFilter) return true;
+    return (filtered.items.get(id) ?? 0) > 0;
+  }
+  isGroupVisible(id, forceMount) {
+    if (forceMount) return true;
+    const { search, filtered } = this.state;
+    if (!search || !this.options.shouldFilter) return true;
+    return filtered.groups.has(id);
+  }
+  itemValue(id) {
+    return this.items.get(id)?.value;
+  }
+  upsertItem(id, entry, element) {
+    const existing = this.items.get(id);
+    this.items.set(id, {
+      ...entry,
+      rank: existing?.rank ?? this.rank++,
+      element: element ?? existing?.element ?? null
+    });
+    this.schedule();
+  }
+  removeItem(id) {
+    this.items.delete(id);
+    this.schedule();
+  }
+  /** Highlighted item's id, for `aria-activedescendant`. */
+  activeId() {
+    const { value } = this.state;
+    if (value === "") return void 0;
+    for (const [id, item] of this.items) {
+      if (item.value === value && item.element?.isConnected && this.isItemVisible(id)) return id;
+    }
+    return void 0;
+  }
+  setItemElement(id, element) {
+    const item = this.items.get(id);
+    if (item) item.element = element;
+  }
+  upsertGroup(id) {
+    if (!this.groups.has(id)) this.groups.set(id, { rank: this.rank++, element: null });
+  }
+  removeGroup(id) {
+    this.groups.delete(id);
+    this.schedule();
+  }
+  /** Runs the first filter pass; marks the store ready so `Empty` can tell "no items yet" from "no match". */
+  start() {
+    this.schedule();
+  }
+  /** Called from a ref callback, which runs before the group's layout effect: creates the entry. */
+  setGroupElement(id, element) {
+    const group = this.groups.get(id);
+    if (group) group.element = element;
+    else if (element) this.groups.set(id, { rank: this.rank++, element });
+  }
+  /** Coalesces a burst of (un)registrations into one filter pass. */
+  schedule() {
+    if (this.dirty) return;
+    this.dirty = true;
+    queueMicrotask(() => {
+      if (!this.dirty) return;
+      this.dirty = false;
+      this.refilter();
+      this.bump();
+    });
+  }
+  bump() {
+    this.revision++;
+    this.emit();
+  }
+  setSearch(search) {
+    if (search === this.state.search) return;
+    this.state = { ...this.state, search };
+    this.searchDirty = true;
+    this.refilter();
+    this.bump();
+  }
+  /** Refilters after `shouldFilter` or `filter` changed. */
+  refresh() {
+    this.refilter();
+    this.bump();
+  }
+  /** Highlights `value`. Controlled owners hear about it through `onValueChange` only. */
+  setValue(value) {
+    if (value === this.state.value) return;
+    if (this.options.controlledValue === void 0) this.state = { ...this.state, value };
+    this.options.onValueChange?.(value);
+    this.emit();
+  }
+  /** Mirrors a controlled `value` prop into the store. */
+  syncValue(value) {
+    if (value === this.state.value) return;
+    this.state = { ...this.state, value };
+    this.emit();
+  }
+  refilter() {
+    const { search } = this.state;
+    const { shouldFilter, filter } = this.options;
+    const scores = /* @__PURE__ */ new Map();
+    const groupBest = /* @__PURE__ */ new Map();
+    const filtering = shouldFilter && search !== "";
+    for (const [id, item] of this.items) {
+      const score = filtering ? filter(item.value, search, item.keywords) : 1;
+      if (score > 0) {
+        scores.set(id, score);
+        if (item.groupId !== void 0) {
+          groupBest.set(item.groupId, Math.max(groupBest.get(item.groupId) ?? 0, score));
+        }
+      }
+    }
+    this.state = {
+      ...this.state,
+      filtered: { count: scores.size, items: scores, groups: new Set(groupBest.keys()) }
+    };
+    this.groupBest = groupBest;
+  }
+  groupBest = /* @__PURE__ */ new Map();
+  /** Reorders the rendered items and groups by score, or back to registration order. */
+  sort() {
+    const { search, filtered } = this.state;
+    const ranking = this.options.shouldFilter && search !== "";
+    if (!ranking && !this.ordered) return;
+    this.ordered = ranking;
+    const buckets = /* @__PURE__ */ new Map();
+    const place = (element, score, rank) => {
+      const parent = element?.parentElement;
+      if (!element || !parent) return;
+      const list = buckets.get(parent);
+      if (list) list.push({ element, score, rank });
+      else buckets.set(parent, [{ element, score, rank }]);
+    };
+    for (const [id, item] of this.items) {
+      place(item.element, filtered.items.get(id) ?? 0, item.rank);
+    }
+    for (const [id, group] of this.groups) {
+      place(group.element, this.groupBest.get(id) ?? 0, group.rank);
+    }
+    for (const [parent, list] of buckets) {
+      list.sort((a, b) => (ranking ? b.score - a.score : 0) || a.rank - b.rank);
+      reorder(
+        parent,
+        list.map((entry) => entry.element)
+      );
+    }
+  }
+  /** True once after each search change, so the highlight can jump to the first result. */
+  consumeSearchChange() {
+    const changed = this.searchDirty;
+    this.searchDirty = false;
+    return changed;
+  }
+  select(id) {
+    this.items.get(id)?.onSelect?.();
+  }
+}
+export {
+  CommandStore
+};

package/dist/primitives/dialog/dialog.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { Portal } from "../portal.js";
+import { type FocusOutsideEvent, type InteractOutsideEvent, type PointerDownOutsideEvent } from "../use-dismissable-layer.js";
+export interface DialogRootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Traps focus, hides the page and locks scroll while open. Defaults to true. */
+    modal?: boolean;
+    children?: ReactNode;
+}
+export declare function Root({ open: openProp, defaultOpen, onOpenChange, modal, children, }: DialogRootProps): import("react").JSX.Element;
+type ButtonProps = ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+export declare function Trigger({ asChild, onClick, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Close({ asChild, onClick, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Title({ asChild, ...props }: ComponentProps<"h2"> & {
+    asChild?: boolean;
+}): import("react").JSX.Element;
+export declare function Description({ asChild, ...props }: ComponentProps<"p"> & {
+    asChild?: boolean;
+}): import("react").JSX.Element;
+export { Portal };
+export interface DialogOverlayProps extends ComponentProps<"div"> {
+    forceMount?: boolean;
+}
+export declare function Overlay({ forceMount, ref, ...props }: DialogOverlayProps): import("react").JSX.Element | null;
+export interface DialogContentProps extends Omit<ComponentProps<"div">, "onFocus"> {
+    forceMount?: boolean;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+export declare function Content({ forceMount, ref, ...props }: DialogContentProps): import("react").JSX.Element | null;

package/dist/primitives/dialog/dialog.js

@@ -0,0 +1,251 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef
+} from "react";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { Slot } from "../../utils/slot.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+import { hideOthers } from "../hide-others.js";
+import { useEnabledPointerEvents } from "../pointer-events-lock.js";
+import { Portal } from "../portal.js";
+import { lockBodyScroll } from "../scroll-lock.js";
+import {
+  useDismissableLayer
+} from "../use-dismissable-layer.js";
+import { useFocusScope } from "../use-focus-scope.js";
+import { useLayer } from "../use-layer.js";
+import { usePresence } from "../use-presence.js";
+const DialogContext = createContext(null);
+function useDialogContext(part) {
+  const context = useContext(DialogContext);
+  if (!context) throw new Error(`<${part}> must be rendered inside <Dialog>`);
+  return context;
+}
+function isProduction() {
+  return typeof process !== "undefined" && process.env?.NODE_ENV === "production";
+}
+const stateOf = (open) => open ? "open" : "closed";
+function Root({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  modal = true,
+  children
+}) {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const overlayRef = useRef(null);
+  const contentId = useId();
+  const titleId = useId();
+  const descriptionId = useId();
+  const value = useMemo(
+    () => ({
+      open,
+      modal,
+      setOpen,
+      triggerRef,
+      overlayRef,
+      contentId,
+      titleId,
+      descriptionId
+    }),
+    [open, modal, setOpen, contentId, titleId, descriptionId]
+  );
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value, children });
+}
+function Trigger({ asChild, onClick, ref, ...props }) {
+  const context = useDialogContext("DialogTrigger");
+  const composedRef = useComposedRefs(
+    ref,
+    context.triggerRef
+  );
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.open ? context.contentId : void 0,
+      "data-state": stateOf(context.open),
+      ...props,
+      ref: composedRef,
+      onClick: composeHandlers(onClick, () => context.setOpen(!context.open))
+    }
+  );
+}
+function Close({ asChild, onClick, ...props }) {
+  const context = useDialogContext("DialogClose");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      ...props,
+      onClick: composeHandlers(onClick, () => context.setOpen(false))
+    }
+  );
+}
+function Title({ asChild, ...props }) {
+  const { titleId } = useDialogContext("DialogTitle");
+  const Comp = asChild ? Slot : "h2";
+  return /* @__PURE__ */ jsx(Comp, { id: titleId, ...props });
+}
+function Description({ asChild, ...props }) {
+  const { descriptionId } = useDialogContext("DialogDescription");
+  const Comp = asChild ? Slot : "p";
+  return /* @__PURE__ */ jsx(Comp, { id: descriptionId, ...props });
+}
+function Overlay({ forceMount, ref, ...props }) {
+  const { open, modal, overlayRef } = useDialogContext("DialogOverlay");
+  const present = modal && (forceMount || open);
+  const composedRef = useComposedRefs(
+    ref,
+    overlayRef
+  );
+  const mounted = usePresence(present, overlayRef);
+  useEnabledPointerEvents(overlayRef, mounted);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx("div", { "data-state": stateOf(open), "aria-hidden": "true", ...props, ref: composedRef });
+}
+function Content({ forceMount, ref, ...props }) {
+  const context = useDialogContext("DialogContent");
+  const nodeRef = useRef(null);
+  const composedRef = useComposedRefs(ref, nodeRef);
+  const mounted = usePresence(forceMount || context.open, nodeRef);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(
+    ContentImpl,
+    {
+      ...props,
+      ref: composedRef,
+      nodeRef,
+      engaged: context.open || !forceMount
+    }
+  );
+}
+function ContentImpl({
+  nodeRef,
+  engaged,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onInteractOutside,
+  onPointerDownCapture,
+  onFocusCapture,
+  onBlurCapture,
+  ...props
+}) {
+  const context = useDialogContext("DialogContent");
+  const { open, modal, setOpen, triggerRef, overlayRef } = context;
+  const listening = open && engaged;
+  const isTop = useLayer(listening);
+  const interactedOutside = useRef(false);
+  const focusInTree = useRef(() => false);
+  useEffect(() => {
+    if (listening) interactedOutside.current = false;
+  }, [listening]);
+  useEffect(() => {
+    if (!engaged || !modal) return;
+    const unlock = lockBodyScroll();
+    const show = hideOthers([nodeRef.current, overlayRef.current]);
+    return () => {
+      show();
+      unlock();
+    };
+  }, [engaged, modal, nodeRef, overlayRef]);
+  useFocusScope({
+    ref: nodeRef,
+    active: engaged,
+    trapped: modal && open,
+    isTop,
+    // Portaled React children (menus, popovers) own focus while they are open.
+    allowFocus: () => focusInTree.current(),
+    onMountAutoFocus: onOpenAutoFocus,
+    onUnmountAutoFocus: (event) => {
+      onCloseAutoFocus?.(event);
+      if (event.defaultPrevented) return;
+      if (!modal && interactedOutside.current) {
+        event.preventDefault();
+        return;
+      }
+      const trigger = triggerRef.current;
+      if (trigger && document.contains(trigger)) {
+        event.preventDefault();
+        trigger.focus({ preventScroll: true });
+      }
+    }
+  });
+  const layerProps = useDismissableLayer({
+    ref: nodeRef,
+    active: listening,
+    isTop,
+    onEscapeKeyDown,
+    onPointerDownOutside: (event) => {
+      onPointerDownOutside?.(event);
+      const original = event.detail.originalEvent;
+      const contextClick = original.button === 2 || original.button === 0 && original.ctrlKey;
+      if (modal && contextClick) event.preventDefault();
+    },
+    onFocusOutside: (event) => {
+      onFocusOutside?.(event);
+      if (modal) event.preventDefault();
+    },
+    onInteractOutside: (event) => {
+      onInteractOutside?.(event);
+      const target = event.detail.originalEvent.target;
+      if (!modal && target && triggerRef.current?.contains(target)) event.preventDefault();
+      if (!event.defaultPrevented) interactedOutside.current = true;
+    },
+    onDismiss: () => setOpen(false)
+  });
+  focusInTree.current = layerProps.isFocusInTree;
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
+  useEffect(() => {
+    if (isProduction() || !engaged) return;
+    if (!ariaLabel && !ariaLabelledBy && !document.getElementById(context.titleId)) {
+      console.error(
+        "DialogContent requires a DialogTitle (or an aria-label) so screen readers can name the dialog."
+      );
+    }
+  }, [engaged, context.titleId, ariaLabel, ariaLabelledBy]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: context.contentId,
+      role: "dialog",
+      "aria-modal": modal ? true : void 0,
+      "aria-labelledby": context.titleId,
+      "aria-describedby": context.descriptionId,
+      "data-state": stateOf(open),
+      tabIndex: -1,
+      ...props,
+      onPointerDownCapture: composeHandlers(onPointerDownCapture, layerProps.onPointerDownCapture),
+      onFocusCapture: composeHandlers(onFocusCapture, layerProps.onFocusCapture),
+      onBlurCapture: composeHandlers(onBlurCapture, layerProps.onBlurCapture)
+    }
+  );
+}
+export {
+  Close,
+  Content,
+  Description,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger
+};

package/dist/primitives/focusable.d.ts

@@ -0,0 +1,21 @@
+/** Elements reachable with Tab inside `root`, in DOM order. */
+export declare function getTabbables(root: HTMLElement): HTMLElement[];
+/**
+ * Where Tab or Shift+Tab must be redirected to keep focus inside a trap, or `null`
+ * when the browser's own move stays inside. An `active` outside `items` (the
+ * container itself, or `body`) enters the list from the matching end.
+ */
+export declare function resolveTabWrap<T>(items: readonly T[], active: T | null, shift: boolean): T | null;
+/**
+ * Tab target when focus sits on a non-tabbable node inside the container (a
+ * `tabindex="-1"` region): the neighbouring tabbable in document order, wrapping
+ * at the ends. Mirrors the browser's own sequential navigation start point.
+ */
+export declare function resolveTabFromInside(items: readonly HTMLElement[], active: HTMLElement, shift: boolean): HTMLElement | null;
+/**
+ * Where focus goes when a portaled layer opened from `trigger` is left with Tab: the
+ * first tabbable after the trigger in document order, or with `backwards` the trigger
+ * itself when tabbable, else the closest tabbable before it. Elements inside `exclude`
+ * (the layer) or the trigger are skipped; `null` when nothing qualifies.
+ */
+export declare function resolveTabOut(trigger: HTMLElement, exclude: HTMLElement | null, backwards: boolean): HTMLElement | null;

package/dist/primitives/focusable.js

@@ -0,0 +1,59 @@
+const TABBABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "summary",
+  "[contenteditable]:not([contenteditable=false])",
+  "[tabindex]"
+].join(",");
+function isRendered(element) {
+  if (element.closest("[inert]")) return false;
+  if (typeof element.checkVisibility === "function") {
+    return element.checkVisibility({ visibilityProperty: true });
+  }
+  return element.getClientRects().length > 0;
+}
+function getTabbables(root) {
+  const found = root.querySelectorAll(TABBABLE_SELECTOR);
+  return Array.from(found).filter((element) => element.tabIndex >= 0 && isRendered(element));
+}
+function resolveTabWrap(items, active, shift) {
+  if (items.length === 0) return null;
+  const first = items[0];
+  const last = items[items.length - 1];
+  if (active === null || !items.includes(active)) return shift ? last : first;
+  if (!shift && active === last) return first;
+  if (shift && active === first) return last;
+  return null;
+}
+function resolveTabFromInside(items, active, shift) {
+  if (items.length === 0) return null;
+  const follows = (item) => Boolean(active.compareDocumentPosition(item) & Node.DOCUMENT_POSITION_FOLLOWING);
+  if (shift) {
+    const before = items.filter((item) => !follows(item));
+    return before[before.length - 1] ?? items[items.length - 1] ?? null;
+  }
+  return items.find((item) => follows(item)) ?? items[0] ?? null;
+}
+function resolveTabOut(trigger, exclude, backwards) {
+  const items = getTabbables(document.body).filter((element) => !exclude?.contains(element));
+  const follows = (element) => Boolean(trigger.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING);
+  if (!backwards) {
+    return items.find((element) => !trigger.contains(element) && follows(element)) ?? null;
+  }
+  if (items.includes(trigger)) return trigger;
+  const before = items.filter((element) => !trigger.contains(element) && !follows(element));
+  return before[before.length - 1] ?? null;
+}
+export {
+  getTabbables,
+  resolveTabFromInside,
+  resolveTabOut,
+  resolveTabWrap
+};

package/dist/primitives/global-singleton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * One instance per `key` across every copy of this module on the page (duplicate
+ * package installs, split bundles), so layer, scroll-lock and hide state stay shared.
+ */
+export declare function globalSingleton<T>(key: string, create: () => T): T;

package/dist/primitives/global-singleton.js

@@ -0,0 +1,9 @@
+function globalSingleton(key, create) {
+  const store = globalThis;
+  const symbol = Symbol.for(key);
+  if (!(symbol in store)) store[symbol] = create();
+  return store[symbol];
+}
+export {
+  globalSingleton
+};

package/dist/primitives/hide-others.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Makes everything outside `keep` unreachable (`aria-hidden` + `inert`) by hiding,
+ * at every level on the way to `body`, the siblings of each kept node. Live
+ * regions and `[data-ui-overlay-ignore]` elements stay reachable even when nested
+ * inside an otherwise hidden subtree. The most recent call wins, so a nested modal
+ * portaled into a container that an outer modal hid is still usable, and releases
+ * can happen in any order.
+ *
+ * Only attributes written here are released, and only while they still hold our
+ * value; an element already `aria-hidden="true"` or `inert` from elsewhere is left
+ * alone. Like Radix, nodes appended to `body` after a modal opens (and not kept)
+ * are not hidden until the modal is reopened.
+ */
+export declare function hideOthers(keep: ReadonlyArray<Element | null | undefined>): () => void;

package/dist/primitives/hide-others.js

@@ -0,0 +1,79 @@
+import { globalSingleton } from "./global-singleton.js";
+const IGNORED = '[aria-live]:not([aria-live="off"]), [data-ui-overlay-ignore]';
+const SKIP = `script, style, template, ${IGNORED}`;
+const state = globalSingleton("@jcsoftdev/ui/hide-others", () => ({
+  instances: [],
+  applied: /* @__PURE__ */ new Map()
+}));
+function put(element, name, previous) {
+  if (previous === null) element.removeAttribute(name);
+  else element.setAttribute(name, previous);
+}
+function release(element, owned) {
+  if (owned.ariaHidden && element.getAttribute("aria-hidden") === "true") {
+    put(element, "aria-hidden", owned.ariaHidden.previous);
+  }
+  if (owned.inert && element.hasAttribute("inert")) {
+    put(element, "inert", owned.inert.previous);
+  }
+}
+function reconcile() {
+  for (const [element, owned] of state.applied) release(element, owned);
+  state.applied.clear();
+  const top = state.instances[state.instances.length - 1];
+  if (!top) return;
+  for (const element of top.hide) {
+    if (!element.isConnected) continue;
+    const owned = {};
+    if (element.getAttribute("aria-hidden") !== "true") {
+      owned.ariaHidden = { previous: element.getAttribute("aria-hidden") };
+      element.setAttribute("aria-hidden", "true");
+    }
+    if (!element.hasAttribute("inert")) {
+      owned.inert = { previous: null };
+      element.setAttribute("inert", "");
+    }
+    if (owned.ariaHidden || owned.inert) state.applied.set(element, owned);
+  }
+}
+function withinKept(node, kept) {
+  return kept.some((keep) => keep.contains(node));
+}
+function computeHidden(kept) {
+  const leaves = new Set(kept);
+  for (const ignored of document.querySelectorAll(IGNORED)) {
+    if (!withinKept(ignored, kept)) leaves.add(ignored);
+  }
+  const ancestors = /* @__PURE__ */ new Set();
+  for (const leaf of leaves) {
+    for (let current = leaf.parentElement; current; current = current.parentElement) {
+      ancestors.add(current);
+      if (current === document.body) break;
+    }
+  }
+  const hide = /* @__PURE__ */ new Set();
+  for (const ancestor of ancestors) {
+    for (const child of Array.from(ancestor.children)) {
+      if (leaves.has(child) || ancestors.has(child) || child.matches(SKIP)) continue;
+      hide.add(child);
+    }
+  }
+  return hide;
+}
+function hideOthers(keep) {
+  const kept = keep.filter((node) => Boolean(node));
+  const instance = { hide: computeHidden(kept) };
+  state.instances.push(instance);
+  reconcile();
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const index = state.instances.indexOf(instance);
+    if (index !== -1) state.instances.splice(index, 1);
+    reconcile();
+  };
+}
+export {
+  hideOthers
+};