sheer-ui 0.4.2 → 0.5.0

package/dist/internal/table/table.svelte.js

@@ -0,0 +1,249 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { facetCounts, makeAccessor, resolveColumnId, sortRows } from './core.js';
+import { inferSortingFn } from './sorting-fns.js';
+import { includesString, shouldAutoRemoveFilter } from './filter-fns.js';
+export const createDataTable = (options) => new DataTable(options);
+export class DataTable {
+    #data;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #defs;
+    #paginated;
+    selectedRowIds = new SvelteSet();
+    // Raw so a change is always a reassignment: the page record below keys on their identity.
+    sorting = $state.raw([]);
+    columnFilters = $state.raw([]);
+    columnVisibility = $state({});
+    #pageSize = $state(10);
+    // A page index holds for the sorting and filters it was set under: a sort or filter change reads
+    // as page 0 without a write, while a data refetch underneath keeps the page.
+    #page = $state.raw({ index: 0, sorting: this.sorting, columnFilters: this.columnFilters });
+    constructor(options) {
+        this.#data = options.data;
+        const { columns } = options;
+        this.#defs = typeof columns === 'function' ? columns : () => columns;
+        this.#paginated = options.pageSize !== undefined;
+        if (options.pageSize !== undefined)
+            this.#pageSize = options.pageSize;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #columns = $derived.by(() => this.#defs().map((def) => new Column(this, def)));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #columnsById = $derived(new Map(this.#columns.map((column) => [column.id, column])));
+    #coreRows = $derived.by(() => this.#data().map((original, index) => new Row(this, this.selectedRowIds, original, index)));
+    #activeFilters = $derived(this.columnFilters.flatMap((filter) => {
+        const column = this.#columnsById.get(filter.id);
+        return column ? [{ id: filter.id, filterFn: column.filterFn, value: filter.value }] : [];
+    }));
+    // One row-id set per active filter, reused by both the filtered model and every facet.
+    #masks = $derived(this.#activeFilters.map((filter) => new Set(this.#coreRows.filter((row) => filter.filterFn(row, filter.id, filter.value)).map((row) => row.id))));
+    filteredRows = $derived(this.#masks.length === 0 ? this.#coreRows : this.#coreRows.filter((row) => this.#masks.every((mask) => mask.has(row.id))));
+    #sorted = $derived(sortRows(this.filteredRows, this.sorting, (columnId) => this.#columnsById.get(columnId)?.canSort ? inferSortingFn(this.filteredRows, columnId) : undefined));
+    pageCount = $derived.by(() => (this.#paginated ? Math.max(1, Math.ceil(this.#sorted.length / this.#pageSize)) : 1));
+    // Clamped on read, never written back: data shrinking under a stale index lands on the last page.
+    #safeIndex = $derived(this.#page.sorting === this.sorting && this.#page.columnFilters === this.columnFilters ? Math.min(this.#page.index, this.pageCount - 1) : 0);
+    rows = $derived.by(() => this.#paginated ? this.#sorted.slice(this.#safeIndex * this.#pageSize, (this.#safeIndex + 1) * this.#pageSize) : this.#sorted);
+    canPreviousPage = $derived(this.#safeIndex > 0);
+    canNextPage = $derived(this.#safeIndex < this.pageCount - 1);
+    get pagination() {
+        return { pageIndex: this.#safeIndex, pageSize: this.#pageSize };
+    }
+    setPageIndex(index) {
+        this.#page = { index: Math.min(Math.max(index, 0), this.pageCount - 1), sorting: this.sorting, columnFilters: this.columnFilters };
+    }
+    nextPage() {
+        this.setPageIndex(this.#safeIndex + 1);
+    }
+    previousPage() {
+        this.setPageIndex(this.#safeIndex - 1);
+    }
+    setPageSize(size) {
+        const next = Math.max(1, size);
+        // Keep the current top row visible, matching upstream's paging math.
+        this.#page = { index: Math.floor((this.#safeIndex * this.#pageSize) / next), sorting: this.sorting, columnFilters: this.columnFilters };
+        this.#pageSize = next;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get allColumns() {
+        return this.#columns;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    column(id) {
+        return this.#columnsById.get(id);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visibleColumns = $derived(this.#columns.filter((column) => column.isVisible));
+    headerGroups = $derived([
+        { id: '0', headers: this.visibleColumns.map((column) => new Header(this, column)) },
+    ]);
+    selectedRows = $derived(this.#coreRows.filter((row) => row.isSelected));
+    filteredSelectedRows = $derived(this.filteredRows.filter((row) => row.isSelected));
+    isAllPageRowsSelected = $derived(this.rows.length > 0 && this.rows.every((row) => row.isSelected));
+    isSomePageRowsSelected = $derived(this.isAllPageRowsSelected ? false : this.rows.some((row) => row.isSelected));
+    toggleAllPageRowsSelected(value) {
+        const resolved = value ?? !this.isAllPageRowsSelected;
+        for (const row of this.rows)
+            row.toggleSelected(resolved);
+    }
+    /** Core rows minus every active filter except `columnId`'s own, so a facet counts its remaining options. */
+    facetedRows(columnId) {
+        const masks = this.#activeFilters.flatMap((filter, index) => (filter.id === columnId ? [] : [this.#masks[index]]));
+        return masks.length === 0 ? this.#coreRows : this.#coreRows.filter((row) => masks.every((mask) => mask.has(row.id)));
+    }
+}
+export class Column {
+    id;
+    columnDef;
+    accessorFn;
+    filterFn;
+    #table;
+    constructor(table, def) {
+        this.#table = table;
+        this.columnDef = def;
+        this.id = resolveColumnId(def);
+        this.accessorFn = makeAccessor(def);
+        this.filterFn = def.filterFn ?? includesString;
+    }
+    get canSort() {
+        return (this.columnDef.enableSorting ?? true) && this.accessorFn !== undefined;
+    }
+    get isSorted() {
+        const entry = this.#table.sorting.find((sort) => sort.id === this.id);
+        return entry ? (entry.desc ? 'desc' : 'asc') : false;
+    }
+    // String columns start ascending, everything else descending (upstream's getAutoSortDir).
+    #firstSortDir() {
+        return typeof this.#table.filteredRows[0]?.getValue(this.id) === 'string' ? 'asc' : 'desc';
+    }
+    // Three-state cycle with removal: first direction → other direction → unsorted.
+    #nextSortingOrder() {
+        const first = this.#firstSortDir();
+        const isSorted = this.isSorted;
+        if (!isSorted)
+            return first;
+        if (isSorted !== first)
+            return false;
+        return isSorted === 'desc' ? 'asc' : 'desc';
+    }
+    toggleSorting(desc, multi = false) {
+        const nextOrder = this.#nextSortingOrder();
+        const hasManualValue = desc !== undefined;
+        const nextDesc = hasManualValue ? desc : nextOrder === 'desc';
+        const old = this.#table.sorting;
+        const existing = old.find((sort) => sort.id === this.id);
+        const existingIndex = old.findIndex((sort) => sort.id === this.id);
+        if (old.length > 0 && this.#canMultiSort && multi) {
+            this.#table.sorting = existing
+                ? !hasManualValue && nextOrder === false
+                    ? old.filter((sort) => sort.id !== this.id)
+                    : old.map((sort) => (sort.id === this.id ? { ...sort, desc: nextDesc } : sort))
+                : [...old, { id: this.id, desc: nextDesc }];
+            return;
+        }
+        // Single mode: only the most recently applied sort toggles through the cycle; anything else replaces.
+        if (existing !== undefined && existingIndex === old.length - 1) {
+            this.#table.sorting =
+                !hasManualValue && nextOrder === false
+                    ? old.filter((sort) => sort.id !== this.id)
+                    : old.map((sort) => (sort.id === this.id ? { ...sort, desc: nextDesc } : sort));
+            return;
+        }
+        this.#table.sorting = [{ id: this.id, desc: nextDesc }];
+    }
+    get #canMultiSort() {
+        return this.accessorFn !== undefined;
+    }
+    sortHandler = (event) => {
+        if (!this.canSort)
+            return;
+        this.toggleSorting(undefined, this.#canMultiSort && event.shiftKey);
+    };
+    get canHide() {
+        return this.columnDef.enableHiding ?? true;
+    }
+    get isVisible() {
+        return this.#table.columnVisibility[this.id] ?? true;
+    }
+    set isVisible(visible) {
+        if (!this.canHide || visible === this.isVisible)
+            return;
+        this.#table.columnVisibility = { ...this.#table.columnVisibility, [this.id]: visible };
+    }
+    get filterValue() {
+        return this.#table.columnFilters.find((filter) => filter.id === this.id)?.value;
+    }
+    set filterValue(value) {
+        const others = this.#table.columnFilters.filter((filter) => filter.id !== this.id);
+        this.#table.columnFilters = shouldAutoRemoveFilter(value) ? others : [...others, { id: this.id, value }];
+    }
+    get facetedUniqueValues() {
+        return facetCounts(this.#table.facetedRows(this.id), this.id);
+    }
+}
+export class Row {
+    id;
+    index;
+    original;
+    #table;
+    #selection;
+    // Plain Maps on purpose: both are written during $derived reads (sorting, templates), and a
+    // reactive container there is a write-inside-read loop (effect_update_depth_exceeded).
+    #values = new Map();
+    #cells = new Map();
+    constructor(table, selection, original, index) {
+        this.#table = table;
+        this.#selection = selection;
+        this.original = original;
+        this.index = index;
+        this.id = String(index);
+    }
+    getValue(columnId) {
+        if (this.#values.has(columnId))
+            return this.#values.get(columnId);
+        const value = this.#table.column(columnId)?.accessorFn?.(this.original, this.index);
+        this.#values.set(columnId, value);
+        return value;
+    }
+    get isSelected() {
+        return this.#selection.has(this.id);
+    }
+    toggleSelected(value) {
+        if (value ?? !this.isSelected)
+            this.#selection.add(this.id);
+        else
+            this.#selection.delete(this.id);
+    }
+    get visibleCells() {
+        return this.#table.visibleColumns.map((column) => {
+            let cell = this.#cells.get(column.id);
+            if (cell === undefined) {
+                cell = new Cell(this.#table, column, this);
+                this.#cells.set(column.id, cell);
+            }
+            return cell;
+        });
+    }
+}
+export class Cell {
+    id;
+    column;
+    row;
+    context;
+    constructor(table, column, row) {
+        this.id = `${row.id}_${column.id}`;
+        this.column = column;
+        this.row = row;
+        this.context = { table, column, row, cell: this };
+    }
+}
+export class Header {
+    id;
+    colSpan = 1;
+    isPlaceholder = false;
+    column;
+    context;
+    constructor(table, column) {
+        this.id = column.id;
+        this.column = column;
+        this.context = { table, column, header: this };
+    }
+}

package/dist/internal/table/types.d.ts

@@ -0,0 +1,35 @@
+import type { Cell, Column, DataTable, Header, Row } from './table.svelte.js';
+export type ColumnDefTemplate<TProps> = string | ((props: TProps) => unknown);
+export type FilterFn<TData> = (row: Row<TData>, columnId: string, value: unknown) => boolean;
+export interface ColumnDef<TData, TValue = unknown> {
+    id?: string;
+    accessorKey?: string;
+    accessorFn?: (original: TData, index: number) => TValue;
+    header?: ColumnDefTemplate<HeaderContext<TData, TValue>>;
+    cell?: ColumnDefTemplate<CellContext<TData, TValue>>;
+    filterFn?: FilterFn<TData>;
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+    meta?: {
+        class?: string;
+    };
+}
+export type ColumnSort = {
+    id: string;
+    desc: boolean;
+};
+export type ColumnFilter = {
+    id: string;
+    value: unknown;
+};
+export interface HeaderContext<TData, TValue = unknown> {
+    table: DataTable<TData>;
+    column: Column<TData, TValue>;
+    header: Header<TData, TValue>;
+}
+export interface CellContext<TData, TValue = unknown> {
+    table: DataTable<TData>;
+    column: Column<TData, TValue>;
+    row: Row<TData>;
+    cell: Cell<TData, TValue>;
+}

package/dist/internal/table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/timeout-fn.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { AnyFn } from './types.js';
+/**
+ * A self-cancelling timeout. `start()` (re)schedules `cb` after `getInterval()` ms,
+ * `stop()` clears it; auto-stops when the owning component/effect is destroyed.
+ */
+export declare function createEffectTimeout<T extends AnyFn>(cb: T, getDelay: () => number, getWindow?: () => typeof globalThis): {
+    start: (...args: Parameters<T>) => void;
+    stop: () => void;
+    readonly pending: boolean;
+};

package/dist/internal/timeout-fn.svelte.js

@@ -0,0 +1,31 @@
+/**
+ * A self-cancelling timeout. `start()` (re)schedules `cb` after `getInterval()` ms,
+ * `stop()` clears it; auto-stops when the owning component/effect is destroyed.
+ */
+export function createEffectTimeout(cb, getDelay, getWindow = () => globalThis) {
+    let timer;
+    let timerWindow;
+    const stop = () => {
+        if (timer === undefined)
+            return;
+        timerWindow.clearTimeout(timer);
+        timer = undefined;
+    };
+    const start = (...args) => {
+        stop();
+        timerWindow = getWindow();
+        timer = timerWindow.setTimeout(() => {
+            timer = undefined;
+            cb(...args);
+        }, getDelay());
+    };
+    $effect(() => stop);
+    return {
+        start,
+        stop,
+        // Not reactive: a plain `let`, only ever read from event handlers.
+        get pending() {
+            return timer !== undefined;
+        },
+    };
+}

package/dist/internal/tools/box.svelte.d.ts

@@ -0,0 +1,14 @@
+/** What a vendored engine reads a reactive option through. Any object with a `current` qualifies. */
+export type ReadableBox<T> = {
+    readonly current: T;
+};
+export type WritableBox<T> = {
+    current: T;
+};
+export declare function boxWith<T>(getter: () => T): ReadableBox<T>;
+export declare function boxWith<T>(getter: () => T, setter: (v: T) => void): WritableBox<T>;
+/**
+ * Repair a bindable value synchronously for setup/SSR, then repair it again
+ * before DOM updates whenever the tracked source changes.
+ */
+export declare function repairBindable(track: () => unknown, repair: () => void): void;

package/dist/internal/tools/box.svelte.js

@@ -0,0 +1,29 @@
+import { untrack } from 'svelte';
+export function boxWith(getter, setter) {
+    if (setter) {
+        return {
+            get current() {
+                return getter();
+            },
+            set current(v) {
+                setter(v);
+            },
+        };
+    }
+    return {
+        get current() {
+            return getter();
+        },
+    };
+}
+/**
+ * Repair a bindable value synchronously for setup/SSR, then repair it again
+ * before DOM updates whenever the tracked source changes.
+ */
+export function repairBindable(track, repair) {
+    repair();
+    $effect.pre(() => {
+        track();
+        untrack(repair);
+    });
+}

package/dist/internal/tools/index.d.ts

@@ -0,0 +1,3 @@
+export { boxWith, repairBindable, type WritableBox, type ReadableBox } from './box.svelte.js';
+export type { AnyFn, Box, Expand, Getter, ReadableBoxedValues, WithChildren, WithRefProps, WritableBoxedValues, } from './types.js';
+export * from './utils/index.js';

package/dist/internal/tools/index.js

@@ -0,0 +1,2 @@
+export { boxWith, repairBindable } from './box.svelte.js';
+export * from './utils/index.js';

package/dist/internal/tools/types.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { ReadableBox, WritableBox } from './box.svelte.js';
+export type Getter<T> = () => T;
+export type Box<T> = ReadableBox<T> | WritableBox<T>;
+export type Expand<T> = T extends infer U ? {
+    [K in keyof U]: U[K];
+} : never;
+/**
+ * Given a Record type T, returns a type that represents the same type, but with
+ * all values wrapped in a `ReadableBox`.
+ */
+export type ReadableBoxedValues<T> = {
+    [K in keyof T]: ReadableBox<T[K]>;
+};
+/**
+ * Given a Record type T, returns a type that represents the same type, but with
+ * all values wrapped in a `WritableBox`.
+ */
+export type WritableBoxedValues<T> = {
+    [K in keyof T]: WritableBox<T[K]>;
+};
+export type WithChildren<Props = {}> = Props & {
+    children?: Snippet | undefined;
+};
+export type WithRefProps<T = {}> = T & ReadableBoxedValues<{
+    id: string;
+}> & WritableBoxedValues<{
+    ref: HTMLElement | null;
+}>;
+/** camelCase CSS property names from the DOM lib, plus custom properties. Values are not typed per property: every
+ *  style object here ends up in overrule's `styleToString`, which takes strings anyway. */
+type CSSPropertyName = {
+    [K in keyof CSSStyleDeclaration]: K extends string ? (CSSStyleDeclaration[K] extends string ? K : never) : never;
+}[keyof CSSStyleDeclaration];
+export type StyleProperties = Partial<Record<CSSPropertyName, string | number>> & {
+    [custom: `--${string}`]: string | number;
+};
+export type AnyFn = (...args: any[]) => any;
+export {};

package/dist/internal/tools/types.js

@@ -0,0 +1 @@
+import { BROWSER } from 'esm-env';

package/dist/internal/tools/utils/attach-ref.d.ts

@@ -0,0 +1,31 @@
+import { type Attachment } from 'svelte/attachments';
+export type RefSetter<T> = (value: T) => void;
+export type WritableRef<T> = {
+    current: T;
+};
+export type RefAttachment<T extends EventTarget = Element> = {
+    [key: symbol]: Attachment<T>;
+};
+/**
+ * Creates a Svelte Attachment that attaches a DOM element to a ref.
+ * The ref can be either a writable ref object or a callback function.
+ *
+ * @param ref - Either a writable ref object to store the element in, or a callback function that receives the element
+ * @param onChange - Optional callback that fires when the ref changes
+ * @returns An object with a spreadable attachment key that should be spread onto the element
+ *
+ * @example
+ * // Using with a writable ref object
+ * const ref = box<HTMLDivElement | null>(null);
+ * <div {...attachRef(ref)}>Content</div>
+ *
+ * @example
+ * // Using with callback
+ * <div {...attachRef((node) => myNode = node)}>Content</div>
+ *
+ * @example
+ * // Using with onChange
+ * <div {...attachRef(ref, (node) => console.log(node))}>Content</div>
+ */
+export declare function attachRef<T extends EventTarget = Element>(ref: WritableRef<T | null> | RefSetter<T | null>, onChange?: (value: T | null) => void): RefAttachment<T>;
+export declare function mountedAttachment<T extends EventTarget = Element>(setMounted: (mounted: boolean) => void): RefAttachment<T>;

package/dist/internal/tools/utils/attach-ref.js

@@ -0,0 +1,58 @@
+import { untrack } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+const shouldClearRef = (node) => !('isConnected' in node && node.isConnected === true);
+/**
+ * Creates a Svelte Attachment that attaches a DOM element to a ref.
+ * The ref can be either a writable ref object or a callback function.
+ *
+ * @param ref - Either a writable ref object to store the element in, or a callback function that receives the element
+ * @param onChange - Optional callback that fires when the ref changes
+ * @returns An object with a spreadable attachment key that should be spread onto the element
+ *
+ * @example
+ * // Using with a writable ref object
+ * const ref = box<HTMLDivElement | null>(null);
+ * <div {...attachRef(ref)}>Content</div>
+ *
+ * @example
+ * // Using with callback
+ * <div {...attachRef((node) => myNode = node)}>Content</div>
+ *
+ * @example
+ * // Using with onChange
+ * <div {...attachRef(ref, (node) => console.log(node))}>Content</div>
+ */
+export function attachRef(ref, onChange) {
+    return {
+        [createAttachmentKey()]: (node) => {
+            if (typeof ref === 'function') {
+                ref(node);
+                untrack(() => onChange?.(node));
+                return () => {
+                    if (!shouldClearRef(node))
+                        return;
+                    ref(null);
+                    onChange?.(null);
+                };
+            }
+            ref.current = node;
+            untrack(() => onChange?.(node));
+            return () => {
+                if (!shouldClearRef(node))
+                    return;
+                ref.current = null;
+                onChange?.(null);
+            };
+        },
+    };
+}
+export function mountedAttachment(setMounted) {
+    return {
+        [createAttachmentKey()]: () => {
+            setMounted(true);
+            return () => {
+                setMounted(false);
+            };
+        },
+    };
+}

package/dist/internal/tools/utils/compose-handlers.d.ts

@@ -0,0 +1,16 @@
+import type { EventCallback } from './events.js';
+import type { ReadableBox } from '../box.svelte.js';
+/**
+ * Composes event handlers into a single function that can be called with an event.
+ * If the previous handler cancels the event using `event.preventDefault()`, the handlers
+ * that follow will not be called. Stays local rather than overrule's
+ * composeEventHandlers because handlers may arrive boxed.
+ */
+export declare function composeHandlers<E extends Event = Event, T extends Element = Element>(...handlers: Array<EventCallback<E> | ReadableBox<EventCallback<E>> | undefined>): (e: E) => void;
+/**
+ * Merges event handlers into one function that calls all of them with the same event, regardless
+ * of whether an earlier handler called `event.preventDefault()`. Use this instead of
+ * `composeHandlers` when every handler must run unconditionally — e.g. internal bookkeeping that
+ * has to stay correct even if some unrelated code already prevented default on the event.
+ */
+export declare function mergeHandlers<E extends Event = Event>(...handlers: Array<EventCallback<E> | null | undefined | false>): (e: E) => void;

package/dist/internal/tools/utils/compose-handlers.js

@@ -0,0 +1,32 @@
+import { chain } from 'overrule/props';
+/**
+ * Composes event handlers into a single function that can be called with an event.
+ * If the previous handler cancels the event using `event.preventDefault()`, the handlers
+ * that follow will not be called. Stays local rather than overrule's
+ * composeEventHandlers because handlers may arrive boxed.
+ */
+export function composeHandlers(...handlers) {
+    return function (e) {
+        for (const handler of handlers) {
+            if (!handler)
+                continue;
+            if (e.defaultPrevented)
+                return;
+            if (typeof handler === 'function') {
+                handler.call(this, e);
+            }
+            else {
+                handler.current?.call(this, e);
+            }
+        }
+    };
+}
+/**
+ * Merges event handlers into one function that calls all of them with the same event, regardless
+ * of whether an earlier handler called `event.preventDefault()`. Use this instead of
+ * `composeHandlers` when every handler must run unconditionally — e.g. internal bookkeeping that
+ * has to stay correct even if some unrelated code already prevented default on the event.
+ */
+export function mergeHandlers(...handlers) {
+    return chain(...handlers.filter((handler) => typeof handler === 'function'));
+}

package/dist/internal/tools/utils/dom-context.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Box } from '../types.js';
+export declare class DOMContext {
+    readonly element: Box<HTMLElement | null>;
+    readonly root: Document | ShadowRoot;
+    constructor(element: Box<HTMLElement | null> | (() => HTMLElement | null));
+    getDocument: () => Document;
+    getWindow: () => Window & typeof globalThis;
+    getActiveElement: () => HTMLElement | null;
+    getElementById<T extends Element = HTMLElement>(id: string): T | null;
+    querySelector: (selector: string) => Element | null;
+    querySelectorAll: (selector: string) => NodeListOf<Element>;
+    setTimeout: (callback: () => void, delay: number) => number;
+    clearTimeout: (timeoutId: number) => void;
+}

package/dist/internal/tools/utils/dom-context.svelte.js

@@ -0,0 +1,56 @@
+import { boxWith } from '../box.svelte.js';
+function getActiveElement(rootNode) {
+    let activeElement = rootNode.activeElement;
+    while (activeElement?.shadowRoot) {
+        const next = activeElement.shadowRoot.activeElement;
+        if (!next || next === activeElement)
+            break;
+        activeElement = next;
+    }
+    return activeElement;
+}
+export class DOMContext {
+    element;
+    root = $derived.by(() => {
+        if (!this.element.current)
+            return document;
+        const rootNode = this.element.current.getRootNode() ?? document;
+        return rootNode;
+    });
+    constructor(element) {
+        if (typeof element === 'function') {
+            this.element = boxWith(element);
+        }
+        else {
+            this.element = element;
+        }
+    }
+    getDocument = () => {
+        return this.element.current?.ownerDocument ?? document;
+    };
+    getWindow = () => {
+        return this.getDocument().defaultView ?? window;
+    };
+    getActiveElement = () => {
+        return getActiveElement(this.root);
+    };
+    getElementById(id) {
+        return this.root.getElementById(id);
+    }
+    querySelector = (selector) => {
+        if (!this.root)
+            return null;
+        return this.root.querySelector(selector);
+    };
+    querySelectorAll = (selector) => {
+        if (!this.root)
+            return [];
+        return this.root.querySelectorAll(selector);
+    };
+    setTimeout = (callback, delay) => {
+        return this.getWindow().setTimeout(callback, delay);
+    };
+    clearTimeout = (timeoutId) => {
+        return this.getWindow().clearTimeout(timeoutId);
+    };
+}

package/dist/internal/tools/utils/dom.d.ts

@@ -0,0 +1,13 @@
+export declare const isElement: (node: unknown) => node is Element;
+export declare const isHTMLElement: (node: unknown) => node is HTMLElement;
+export declare const isElementOrSVGElement: (node: unknown) => node is Element | SVGElement;
+export declare const isIOS: boolean;
+/**
+ * Yields `element` and then each of its ancestor elements, innermost first. The walk stays inside
+ * `element`'s own tree — a shadow root ends it rather than continuing through the host.
+ */
+export declare function selfAndAncestors(element: Element | null | undefined): Generator<Element>;
+type Target = Node | EventTarget | null | undefined;
+export declare function contains(parent: Target, child: Target): boolean;
+export declare function getWindow(node: Node | ShadowRoot | Document | null | undefined): Window & typeof globalThis;
+export {};