ropav 0.2.0 → 0.3.0

package/dist/composables/use-spin-button.js

@@ -0,0 +1,202 @@
+import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
+import { spinbuttonStrings } from "../i18n/spinbutton.js";
+import { announce } from "../utils/live-announcer.js";
+import { computed, onScopeDispose, toValue, watch } from "vue";
+//#region src/composables/use-spin-button.ts
+/**
+* How long a held button waits before it starts repeating, and how fast it repeats after that.
+*
+* A finger gets longer than a cursor: a touch that turns into a scroll would otherwise fire a
+* step before the gesture is recognised.
+*/
+var INITIAL_DELAY_MOUSE = 400;
+var INITIAL_DELAY_TOUCH = 600;
+var REPEAT_DELAY = 60;
+/**
+* Behaviour and accessibility for a control that steps through numbers, ported from React Aria's
+* `packages/react-aria/src/spinbutton/useSpinButton.ts` (react-aria 3.51.0).
+*
+* Two things here are less obvious than they look. Holding a stepper button repeats, and the
+* repeat re-arms itself one step at a time rather than running on an interval, so it stops the
+* moment the value reaches the end of its range. And a touch does not step on the way down at
+* all: a finger that slides off was scrolling, not pressing, so the step waits for a release
+* that actually landed on the button.
+*
+* @example
+* ```ts
+* const spin = useSpinButton({value, minValue, maxValue, onIncrement, onDecrement});
+* // <input v-bind="spin.attrs" @keydown="spin.onKeydown" @focus="spin.onFocus" …>
+* ```
+*/
+var useSpinButton = (options = {}) => {
+	let timer;
+	let isSpinning = false;
+	let isUp = false;
+	let isFocused = false;
+	const clearAsync = () => {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		isSpinning = false;
+	};
+	onScopeDispose(clearAsync);
+	const stringFormatter = useLocalizedStringFormatter(spinbuttonStrings);
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)));
+	const isReadOnly = computed(() => Boolean(toValue(options.isReadOnly)));
+	const value = computed(() => toValue(options.value));
+	const minValue = computed(() => toValue(options.minValue));
+	const maxValue = computed(() => toValue(options.maxValue));
+	/**
+	* The value as assistive technology should hear it.
+	*
+	* The hyphen-minus a formatter writes is replaced with a real minus sign, because macOS
+	* VoiceOver reads U+002D as a hyphen and says nothing at all when a currency symbol sits
+	* between it and the digits. An empty field is given a word of its own, so iOS VoiceOver does
+	* not read the last value it saw.
+	*/
+	const ariaTextValue = computed(() => {
+		const text = toValue(options.textValue);
+		if (text === "") return stringFormatter.value.format("Empty");
+		return (text ?? String(value.value)).replace("-", "−");
+	});
+	watch(ariaTextValue, (next) => {
+		if (!isFocused) return;
+		announce("");
+		announce(next);
+	});
+	const canStepUp = () => {
+		const max = maxValue.value;
+		const current = value.value;
+		if (max === void 0 || Number.isNaN(max)) return true;
+		if (current === void 0 || Number.isNaN(current)) return true;
+		return current < max;
+	};
+	const canStepDown = () => {
+		const min = minValue.value;
+		const current = value.value;
+		if (min === void 0 || Number.isNaN(min)) return true;
+		if (current === void 0 || Number.isNaN(current)) return true;
+		return current > min;
+	};
+	const armUp = (delay) => {
+		clearAsync();
+		isSpinning = true;
+		timer = setTimeout(() => {
+			if (!canStepUp()) return;
+			options.onIncrement?.();
+			armUp(REPEAT_DELAY);
+		}, delay);
+	};
+	const armDown = (delay) => {
+		clearAsync();
+		isSpinning = true;
+		timer = setTimeout(() => {
+			if (!canStepDown()) return;
+			options.onDecrement?.();
+			armDown(REPEAT_DELAY);
+		}, delay);
+	};
+	const onFocus = () => {
+		isFocused = true;
+	};
+	const onBlur = () => {
+		isFocused = false;
+	};
+	const shortcuts = {
+		ArrowDown: () => {
+			if (!options.onDecrement) return false;
+			options.onDecrement();
+			return true;
+		},
+		ArrowUp: () => {
+			if (!options.onIncrement) return false;
+			options.onIncrement();
+			return true;
+		},
+		End: () => {
+			if (!options.onIncrementToMax) return false;
+			options.onIncrementToMax();
+			return true;
+		},
+		Home: () => {
+			if (!options.onDecrementToMin) return false;
+			options.onDecrementToMin();
+			return true;
+		},
+		PageDown: () => {
+			if (options.onDecrementPage) {
+				options.onDecrementPage();
+				return true;
+			}
+			if (options.onDecrement) {
+				options.onDecrement();
+				return true;
+			}
+			return false;
+		},
+		PageUp: () => {
+			if (options.onIncrementPage) {
+				options.onIncrementPage();
+				return true;
+			}
+			if (options.onIncrement) {
+				options.onIncrement();
+				return true;
+			}
+			return false;
+		}
+	};
+	const onKeydown = (event) => {
+		if (isDisabled.value || isReadOnly.value) return;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const shortcut = shortcuts[event.key];
+		if (!shortcut) return;
+		if (!shortcut()) return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const stepper = (step, arm) => ({
+		onPressEnd: (pointerType) => {
+			clearAsync();
+			if (pointerType === "touch" && !isSpinning && isUp) step()?.();
+			isUp = false;
+		},
+		onPressStart: (pointerType) => {
+			clearAsync();
+			if (pointerType === "touch") {
+				isUp = false;
+				arm(INITIAL_DELAY_TOUCH);
+				return;
+			}
+			step()?.();
+			arm(INITIAL_DELAY_MOUSE);
+		},
+		onPressUp: (pointerType) => {
+			clearAsync();
+			if (pointerType === "touch") isUp = true;
+		}
+	});
+	return {
+		attrs: computed(() => {
+			const current = value.value;
+			const all = {
+				"aria-disabled": isDisabled.value || void 0,
+				"aria-readonly": isReadOnly.value || void 0,
+				"aria-required": toValue(options.isRequired) || void 0,
+				"aria-valuemax": maxValue.value,
+				"aria-valuemin": minValue.value,
+				"aria-valuenow": current !== void 0 && !Number.isNaN(current) ? current : void 0,
+				"aria-valuetext": ariaTextValue.value,
+				role: "spinbutton"
+			};
+			for (const key of Object.keys(all)) if (all[key] === void 0) delete all[key];
+			return all;
+		}),
+		decrement: stepper(() => options.onDecrement, armDown),
+		increment: stepper(() => options.onIncrement, armUp),
+		onBlur,
+		onFocus,
+		onKeydown
+	};
+};
+//#endregion
+export { useSpinButton };

package/dist/composables/use-tab-list-state.d.ts

@@ -0,0 +1,45 @@
+import type { CollectionKey, UseCollectionReturn } from "./use-collection";
+import type { UseSelectionManagerReturn } from "./use-selection-manager";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseTabListStateOptions {
+    /** The selected tab, when the caller drives it. */
+    selectedKey?: MaybeRefOrGetter<CollectionKey | undefined>;
+    /** The initially selected tab. Falls back to the first tab that is not disabled. */
+    defaultSelectedKey?: CollectionKey;
+    onSelectionChange?: (key: CollectionKey) => void;
+    disabledKeys?: MaybeRefOrGetter<Iterable<CollectionKey> | undefined>;
+    /** Whether the whole tab list is disabled: a selection that exists but cannot be changed. */
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** A base the tab and panel ids are derived from. Generated when absent. */
+    id?: MaybeRefOrGetter<string | undefined>;
+}
+export interface UseTabListStateReturn {
+    collection: UseCollectionReturn;
+    selection: UseSelectionManagerReturn;
+    /** The selected tab, with the default resolved against the collection. */
+    selectedKey: ComputedRef<CollectionKey | null>;
+    setSelectedKey: (key: CollectionKey) => void;
+    isDisabled: ComputedRef<boolean>;
+    /** The tab list's own id, which the tab and panel ids hang off. */
+    tabsId: ComputedRef<string>;
+    /** `undefined` for a key that does not exist, so no attribute points at nothing. */
+    tabId: (key: CollectionKey | null | undefined) => string | undefined;
+    tabPanelId: (key: CollectionKey | null | undefined) => string | undefined;
+}
+/**
+ * Which tab is selected, and the ids that tie each tab to its panel.
+ *
+ * Ported from React Stately's `useTabListState` and the `useSingleSelectListState` layer beneath
+ * it (`react-stately/src/tabs/useTabListState.ts`, react-stately 3.49.0), together with the id
+ * scheme from `react-aria/src/tabs/utils.ts` (react-aria 3.51.0).
+ *
+ * A tab list always has exactly one tab selected, which is `disallowEmptySelection` plus a
+ * fallback for the case where nothing says which. The selection behaviour is deliberately left at
+ * toggle: whether the arrow keys choose is a question about how activation works, asked by the
+ * caller through `selectOnFocus`, not a question about what a press means.
+ *
+ * The three pieces have to be built in one order — the collection, then the fallback that reads
+ * it, then the selection manager the fallback feeds — which is the reason this is a composable
+ * rather than a few lines in the root component.
+ */
+export declare const useTabListState: (options?: UseTabListStateOptions) => UseTabListStateReturn;

package/dist/composables/use-tab-list-state.js

@@ -0,0 +1,118 @@
+import { useId as useId$1 } from "./use-id.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { useCollection } from "./use-collection.js";
+import { useSelectionManager } from "./use-selection-manager.js";
+import { computed, toValue, watch } from "vue";
+//#region src/composables/use-tab-list-state.ts
+/**
+* Which tab is selected, and the ids that tie each tab to its panel.
+*
+* Ported from React Stately's `useTabListState` and the `useSingleSelectListState` layer beneath
+* it (`react-stately/src/tabs/useTabListState.ts`, react-stately 3.49.0), together with the id
+* scheme from `react-aria/src/tabs/utils.ts` (react-aria 3.51.0).
+*
+* A tab list always has exactly one tab selected, which is `disallowEmptySelection` plus a
+* fallback for the case where nothing says which. The selection behaviour is deliberately left at
+* toggle: whether the arrow keys choose is a question about how activation works, asked by the
+* caller through `selectOnFocus`, not a question about what a press means.
+*
+* The three pieces have to be built in one order — the collection, then the fallback that reads
+* it, then the selection manager the fallback feeds — which is the reason this is a composable
+* rather than a few lines in the root component.
+*/
+var useTabListState = (options = {}) => {
+	const collection = useCollection();
+	const disabledKeySet = computed(() => new Set(toValue(options.disabledKeys) ?? []));
+	/**
+	* Whether a tab can be selected, asked of the collection rather than of the selection manager.
+	*
+	* Two reasons, and either alone would be enough: the fallback below runs before the manager
+	* exists, and React Stately asks the same question the same way — an item's own disabled state
+	* or the group's disabled keys, with no `disabledBehavior` in it.
+	*/
+	const isKeyDisabled = (key) => disabledKeySet.value.has(key) || Boolean(collection.getItem(key)?.isDisabled());
+	/** The first tab that can be selected, or the first tab when none of them can. */
+	const findDefaultSelectedKey = () => {
+		let key = collection.getFirstKey();
+		while (key != null && isKeyDisabled(key) && key !== collection.getLastKey()) key = collection.getKeyAfter(key);
+		if (key != null && isKeyDisabled(key) && key === collection.getLastKey()) key = collection.getFirstKey();
+		return key;
+	};
+	const stored = useControllableState({
+		defaultValue: options.defaultSelectedKey ?? null,
+		onValueChange: (key) => {
+			if (key != null) options.onSelectionChange?.(key);
+		},
+		value: () => toValue(options.selectedKey)
+	});
+	/**
+	* The selected tab, with the fallback resolved as a read rather than written back.
+	*
+	* React Stately can resolve it before the first render, because the collection is built by a
+	* pass that runs before it. Rendering is what creates the collection here, so writing the
+	* fallback into the selection would report a selection change nobody made, on every mount of
+	* every uncontrolled tab list.
+	*
+	* `collection.size` is read for its own sake: the fallback walks the collection through
+	* calls that stay outside reactivity on purpose, so without it this would resolve against the
+	* empty collection of the first render and keep that answer.
+	*/
+	const selectedKey = computed(() => {
+		const key = stored.state.value;
+		if (stored.isControlled.value) return key ?? null;
+		if (key != null && collection.getItem(key)) return key;
+		return findDefaultSelectedKey();
+	});
+	const selection = useSelectionManager({
+		collection,
+		disabledKeys: () => toValue(options.disabledKeys),
+		disallowEmptySelection: true,
+		onSelectionChange: (keys) => {
+			if (keys === "all") return;
+			const [key] = [...keys];
+			if (key != null) stored.setState(key);
+		},
+		selectedKeys: () => selectedKey.value != null ? [selectedKey.value] : [],
+		selectionMode: "single"
+	});
+	let lastSelectedKey = selectedKey.value;
+	/**
+	* The selection places focus, because on a tab list it is the only thing that can.
+	*
+	* React Aria's tab list element ends up with no tab index of its own, so the roving index on
+	* the selected tab is the only way in — and with no focused key nothing inside is tabbable
+	* either, which would put the whole tab list out of the tab order.
+	*
+	* Post-flush and keyed on the collection's size, because setting a focused key the collection
+	* does not hold is refused: the first attempt runs before the tabs have registered, and the
+	* registration is what makes the retry land.
+	*/
+	watch([
+		selectedKey,
+		collection.size,
+		() => selection.focusedKey.value == null
+	], () => {
+		const key = selectedKey.value;
+		if (key == null) return;
+		if (selection.focusedKey.value == null || !selection.isFocused.value && key !== lastSelectedKey) selection.setFocusedKey(key);
+		lastSelectedKey = key;
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	const tabsId = useId$1(() => toValue(options.id));
+	/** React Aria strips whitespace out of a string key so the id stays a single token. */
+	const idFor = (key, role) => key == null ? void 0 : `${tabsId.value}-${role}-${String(key).replace(/\s+/g, "")}`;
+	return {
+		collection,
+		isDisabled: computed(() => Boolean(toValue(options.isDisabled))),
+		selectedKey,
+		selection,
+		setSelectedKey: (key) => stored.setState(key),
+		tabId: (key) => idFor(key, "tab"),
+		tabPanelId: (key) => idFor(key, "tabpanel"),
+		tabsId
+	};
+};
+//#endregion
+export { useTabListState };

package/dist/composables/use-table-collection.d.ts

@@ -0,0 +1,148 @@
+import type { VirtualizerTableCollection } from "../utils/virtualizer-collection";
+import type { CollectionKey, UseCollectionReturn } from "./use-collection";
+import type { TableColumnSize } from "./use-table-column-layout";
+import type { ComputedRef } from "vue";
+/** The least a registry needs from an entry: where it sits in the document. */
+export interface TableRegistryMeta {
+    /** The entry's element, or `null` before it mounts and after it goes away. */
+    element: () => HTMLElement | null;
+}
+export interface TableColumnMeta extends TableRegistryMeta {
+    /** Whether cells under this column name their row. */
+    isRowHeader: () => boolean;
+    /** The column's own text, which is how a sort is announced by name. */
+    textValue: () => string;
+    /** A width the caller controls, which a resize never writes to. */
+    width: () => TableColumnSize | null | undefined;
+    /** The width the column starts at while the caller is not controlling it. */
+    defaultWidth: () => TableColumnSize | null | undefined;
+    minWidth: () => TableColumnSize | null | undefined;
+    maxWidth: () => TableColumnSize | null | undefined;
+}
+export interface TableCellMeta extends TableRegistryMeta {
+    /** Text this cell contributes to its row's text value. */
+    textValue: () => string;
+}
+export interface TableRegistry<M extends TableRegistryMeta> {
+    /** Register an entry and return the call that unregisters it. */
+    register: (key: CollectionKey, meta: M) => () => void;
+    getItem: (key: CollectionKey) => M | undefined;
+    /** Registered keys in document order. */
+    orderedKeys: ComputedRef<CollectionKey[]>;
+    /** Where a key sits, or `-1` while it is not registered. */
+    indexOf: (key: CollectionKey) => number;
+    keyAt: (index: number) => CollectionKey | null;
+    size: ComputedRef<number>;
+}
+/**
+ * A registry of table parts that need to know **where they sit**, not just that they exist.
+ *
+ * This is the sibling of `useCollection`, and it differs in one deliberate way: the order is a
+ * `computed` rather than a function. A column renders `aria-colindex` and a cell renders
+ * `data-column-index` and its `role`, so position is read **during render** and has to be
+ * reactive — unlike a listbox, where order is only ever read on a keypress.
+ *
+ * The cost of that choice: order is recomputed when a registration changes, so moving entries
+ * that are already registered — reordering a `v-for` over columns with stable keys, which moves
+ * DOM nodes without remounting anything — would leave the indices stale. Rows are safe because
+ * nothing in their markup is derived from their order; sorting a table renders no index at all.
+ */
+export declare const createTableRegistry: <M extends TableRegistryMeta>() => TableRegistry<M>;
+/** Where a row sits in a tree, for the rows of a tree grid. */
+export interface TableRowNodeMeta extends TableRegistryMeta {
+    /** Depth from the body, counted from zero. */
+    level: () => number;
+    /** The row this one hangs off, or `null` for a top-level row. */
+    parentKey: () => CollectionKey | null;
+    /** Whether the row has children at all, which is what decides if it reports expansion. */
+    hasChildRows: () => boolean;
+}
+export interface TableTree extends TableRegistry<TableRowNodeMeta> {
+    /** Where the row sits among its siblings, both one-based, as a treegrid reports it. */
+    position: (key: CollectionKey) => {
+        posinset: number;
+        setsize: number;
+    };
+}
+/**
+ * The nesting of a tree grid's rows, held beside the row collection rather than inside it.
+ *
+ * The row collection stays a plain `useCollection` — that is what lets the selection manager and
+ * the typeahead take it unchanged — so depth lives here. It is a `createTableRegistry` rather than
+ * another `useCollection` for the same reason the columns are: `aria-posinset` and `aria-setsize`
+ * are read **during render**, so the order has to be a `computed` and not a function.
+ */
+export declare const createTableTree: () => TableTree;
+export interface TableCollectionItems {
+    items: readonly unknown[];
+    /** A row's key. Defaults to the item's own `id`, then `key`, then its index. */
+    getKey?: (item: unknown, index: number) => CollectionKey;
+    /** Text a row is matched on by typeahead, for a row that has not rendered. */
+    getTextValue?: (item: unknown) => string | undefined;
+}
+export interface UseTableCollectionOptions {
+    /**
+     * The rows' data, for a virtualized table.
+     *
+     * Given, the rows come from the data rather than from the DOM — which is the only source that
+     * knows about a row nobody has scrolled to. Absent, the registry answers as it always has.
+     */
+    items?: () => TableCollectionItems | null | undefined;
+    /** Whether a loading sentinel follows the last row. */
+    hasLoader?: () => boolean;
+    /** Prefix for the keys of the nodes the data does not name. Scope it to the table. */
+    idPrefix?: () => string;
+}
+export interface UseTableCollectionReturn {
+    /** Column headers, in document order. */
+    columns: TableRegistry<TableColumnMeta>;
+    /**
+     * Body rows. A plain `useCollection`, which is what lets the selection manager take this
+     * table's rows without knowing a table is involved.
+     */
+    rows: UseCollectionReturn;
+    /** Columns whose cells carry `role="rowheader"` and name their row. */
+    rowHeaderColumnKeys: ComputedRef<Set<CollectionKey>>;
+    /** How the rows nest, for a tree grid. Empty for a flat table. */
+    tree: TableTree;
+    /**
+     * The two-dimensional collection a virtualizer's layout walks, or `null` when the table's rows
+     * come from the DOM. Built here because it is built out of the columns, which are registered
+     * here.
+     */
+    virtualized: ComputedRef<VirtualizerTableCollection> | null;
+}
+/**
+ * The two-dimensional shape a table navigates and labels: columns across, rows down, and one
+ * cell registry per row.
+ *
+ * React Aria builds all three by rendering the children into a hidden tree and reading the
+ * result back. That is not possible here — rendering a slot is what creates its DOM — so the
+ * flow is inverted the same way it is for a listbox: each part registers itself and the parent
+ * asks the DOM for the order. A cell therefore learns which column it belongs to from **where
+ * it sits among its siblings**, exactly as React Aria pairs the nth cell with the nth column.
+ */
+export declare const useTableCollection: (options?: UseTableCollectionOptions) => UseTableCollectionReturn;
+/**
+ * Strip whitespace out of a key before it goes into an id.
+ *
+ * Ported from react-aria's table `utils`. Ids built from a caller's keys end up in
+ * `aria-labelledby`, which is a space-separated list — so a key with a space in it would read
+ * as two references.
+ */
+export declare const normalizeIdKey: (key: CollectionKey) => string;
+/** The id a column header carries, and that a cell's own id is built on top of. */
+export declare const tableColumnHeaderId: (tableId: string, columnKey: CollectionKey) => string;
+/** The id a row header cell carries, which is what `aria-labelledby` on the row points at. */
+export declare const tableCellId: (tableId: string, rowKey: CollectionKey, columnKey: CollectionKey) => string;
+/**
+ * Whether an event landed on a control inside a cell rather than on a part of the grid.
+ *
+ * React Aria never has to ask: its press hook stops propagation, so a button or a checkbox in a
+ * cell never lets the row or the grid see the interaction. Nothing stops propagation here, so both
+ * the row's click handler and the grid's key handler have to recognise the case themselves.
+ *
+ * The grid's own parts are told apart by their collection marker — a cell holding the roving tab
+ * stop matches the focusable selector without being content.
+ */
+export declare const isTableCellControl: (target: EventTarget | null) => boolean;

package/dist/composables/use-table-collection.js

@@ -0,0 +1,132 @@
+import { FOCUSABLE_SELECTOR } from "../utils/focus.js";
+import { useCollection } from "./use-collection.js";
+import { createTableCollection } from "../utils/virtualizer-collection.js";
+import { computed, shallowRef } from "vue";
+//#region src/composables/use-table-collection.ts
+/**
+* A registry of table parts that need to know **where they sit**, not just that they exist.
+*
+* This is the sibling of `useCollection`, and it differs in one deliberate way: the order is a
+* `computed` rather than a function. A column renders `aria-colindex` and a cell renders
+* `data-column-index` and its `role`, so position is read **during render** and has to be
+* reactive — unlike a listbox, where order is only ever read on a keypress.
+*
+* The cost of that choice: order is recomputed when a registration changes, so moving entries
+* that are already registered — reordering a `v-for` over columns with stable keys, which moves
+* DOM nodes without remounting anything — would leave the indices stale. Rows are safe because
+* nothing in their markup is derived from their order; sorting a table renders no index at all.
+*/
+var createTableRegistry = () => {
+	const items = /* @__PURE__ */ new Map();
+	const version = shallowRef(0);
+	const orderedKeys = computed(() => {
+		return [...items.entries()].filter(([, meta]) => meta.element()?.isConnected).sort(([, a], [, b]) => a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([key]) => key);
+	});
+	return {
+		getItem: (key) => {
+			return items.get(key);
+		},
+		indexOf: (key) => orderedKeys.value.indexOf(key),
+		keyAt: (index) => orderedKeys.value[index] ?? null,
+		orderedKeys,
+		register: (key, meta) => {
+			items.set(key, meta);
+			version.value += 1;
+			return () => {
+				if (items.get(key) === meta) {
+					items.delete(key);
+					version.value += 1;
+				}
+			};
+		},
+		size: computed(() => {
+			return orderedKeys.value.length;
+		})
+	};
+};
+/**
+* The nesting of a tree grid's rows, held beside the row collection rather than inside it.
+*
+* The row collection stays a plain `useCollection` — that is what lets the selection manager and
+* the typeahead take it unchanged — so depth lives here. It is a `createTableRegistry` rather than
+* another `useCollection` for the same reason the columns are: `aria-posinset` and `aria-setsize`
+* are read **during render**, so the order has to be a `computed` and not a function.
+*/
+var createTableTree = () => {
+	const registry = createTableRegistry();
+	const siblingsOf = (parentKey) => registry.orderedKeys.value.filter((key) => (registry.getItem(key)?.parentKey() ?? null) === parentKey);
+	return {
+		...registry,
+		position: (key) => {
+			const siblings = siblingsOf(registry.getItem(key)?.parentKey() ?? null);
+			return {
+				posinset: siblings.indexOf(key) + 1,
+				setsize: siblings.length
+			};
+		}
+	};
+};
+/**
+* The two-dimensional shape a table navigates and labels: columns across, rows down, and one
+* cell registry per row.
+*
+* React Aria builds all three by rendering the children into a hidden tree and reading the
+* result back. That is not possible here — rendering a slot is what creates its DOM — so the
+* flow is inverted the same way it is for a listbox: each part registers itself and the parent
+* asks the DOM for the order. A cell therefore learns which column it belongs to from **where
+* it sits among its siblings**, exactly as React Aria pairs the nth cell with the nth column.
+*/
+var useTableCollection = (options = {}) => {
+	const columns = createTableRegistry();
+	const items = options.items;
+	const virtualized = items ? computed(() => createTableCollection({
+		columnKeys: columns.orderedKeys.value,
+		getKey: items()?.getKey,
+		getTextValue: items()?.getTextValue,
+		hasLoader: options.hasLoader?.() ?? false,
+		idPrefix: options.idPrefix?.() ?? "table",
+		items: items()?.items ?? []
+	})) : null;
+	const rows = useCollection({ source: () => virtualized?.value.rows });
+	return {
+		columns,
+		rowHeaderColumnKeys: computed(() => {
+			const declared = columns.orderedKeys.value.filter((key) => columns.getItem(key)?.isRowHeader());
+			if (declared.length > 0) return new Set(declared);
+			const first = columns.orderedKeys.value[0];
+			return new Set(first == null ? [] : [first]);
+		}),
+		rows,
+		tree: createTableTree(),
+		virtualized
+	};
+};
+/**
+* Strip whitespace out of a key before it goes into an id.
+*
+* Ported from react-aria's table `utils`. Ids built from a caller's keys end up in
+* `aria-labelledby`, which is a space-separated list — so a key with a space in it would read
+* as two references.
+*/
+var normalizeIdKey = (key) => typeof key === "string" ? key.replace(/\s*/g, "") : String(key);
+/** The id a column header carries, and that a cell's own id is built on top of. */
+var tableColumnHeaderId = (tableId, columnKey) => `${tableId}-${normalizeIdKey(columnKey)}`;
+/** The id a row header cell carries, which is what `aria-labelledby` on the row points at. */
+var tableCellId = (tableId, rowKey, columnKey) => `${tableId}-${normalizeIdKey(rowKey)}-${normalizeIdKey(columnKey)}`;
+/**
+* Whether an event landed on a control inside a cell rather than on a part of the grid.
+*
+* React Aria never has to ask: its press hook stops propagation, so a button or a checkbox in a
+* cell never lets the row or the grid see the interaction. Nothing stops propagation here, so both
+* the row's click handler and the grid's key handler have to recognise the case themselves.
+*
+* The grid's own parts are told apart by their collection marker — a cell holding the roving tab
+* stop matches the focusable selector without being content.
+*/
+var isTableCellControl = (target) => {
+	if (!(target instanceof Element)) return false;
+	const control = target.closest(FOCUSABLE_SELECTOR);
+	return control != null && !control.hasAttribute("data-collection");
+};
+//#endregion
+export { createTableRegistry, createTableTree, isTableCellControl, normalizeIdKey, tableCellId, tableColumnHeaderId, useTableCollection };