@vuetify/v0 1.1.0 → 1.2.0

package/dist/{useRovingFocus-g6ifibLg.mjs → useRovingFocus-CkRnVmJ1.mjs}

@@ -1,16 +1,20 @@
-import { a as SUPPORTS_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, t as IN_BROWSER } from "./globals-CtaXlEOI.mjs";
-import { clamp, instanceExists, isArray, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isObject, isString, isUndefined, range, resolveIds, resolveIndexes, useId as useId$1 } from "./utilities/index.mjs";
-import { i as useContext, t as createTrinity } from "./createTrinity-z-3q9QWR.mjs";
-import { a as createPlugin, i as useLogger, o as createPluginContext } from "./useLogger-CbvzXCWb.mjs";
-import { t as createRegistry } from "./createRegistry-B9cOWny2.mjs";
-import { i as createModel, t as createSelection } from "./createSelection-CWE554_g.mjs";
-import { t as createSingle } from "./createSingle-Dz-1Iv7u.mjs";
-import { t as toArray } from "./toArray-C89ZaEuF.mjs";
-import { n as useEventListener, r as useWindowEventListener, t as useDocumentEventListener } from "./useEventListener-DSOeDtC-.mjs";
-import { t as createGroup } from "./createGroup-BXKKcb9-.mjs";
-import { c as useTimer } from "./useNotifications-Cqg3uDz0.mjs";
-import { i as createFilter } from "./createPagination-B5dfqY-a.mjs";
-import { a as useRules, o as isStandardSchema } from "./useRules-DEiHd_eY.mjs";
+import { a as SUPPORTS_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, t as IN_BROWSER } from "./globals-DaoKtIGF.mjs";
+import { clamp, getActiveElement, instanceExists, isArray, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isObject, isString, isUndefined, pxToNumber, range, resolveIds, resolveIndexes, useId as useId$1 } from "./utilities/index.mjs";
+import { i as useContext, n as createContext, t as createTrinity } from "./createTrinity-z-3q9QWR.mjs";
+import { n as createPluginContext, t as createPlugin } from "./createPlugin-Oo6t-vBw.mjs";
+import { i as useLogger } from "./useLogger-YyWuYvrH.mjs";
+import { t as createRegistry } from "./createRegistry-DVdvep0v.mjs";
+import { i as createModel, t as createSelection } from "./createSelection-BNdDz8oY.mjs";
+import { t as createSingle } from "./createSingle-DHyIQ9Cj.mjs";
+import { t as toArray } from "./toArray-MY9Kb1Qy.mjs";
+import { n as useEventListener, r as useWindowEventListener, t as useDocumentEventListener } from "./useEventListener-2eAMwUdw.mjs";
+import { p as useHydration } from "./useTheme-DkK6tPqY.mjs";
+import { i as useProxyRegistry, t as createGroup } from "./createGroup-B_LL7xRr.mjs";
+import { t as useTimer } from "./useTimer-CGVXk397.mjs";
+import { i as usePopover } from "./usePopover-BTo0AGIQ.mjs";
+import { a as createFilter } from "./adapter-BiQV5j8B.mjs";
+import { a as extractLeaves, t as createDataTable } from "./createDataTable-VmQEDn-7.mjs";
+import { a as useRules, o as isStandardSchema } from "./useRules-BuE5ffOJ.mjs";
 import { computed, effectScope, hasInjectionContext, isReadonly, isRef, nextTick, onScopeDispose, ref, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, watch } from "vue";
 //#region src/composables/useClickOutside/index.ts
 /**
@@ -254,7 +258,7 @@ function useClickOutside(target, handler, options = {}) {
 		if (isPaused.value) return;
 		if (event.defaultPrevented) return;
 		if (document.activeElement instanceof HTMLIFrameElement) {
-			const iframeIsOutside = getTargets().every((el) => !el.contains(document.activeElement));
+			const iframeIsOutside = getTargets().every((el) => !el.contains(/* @__PURE__ */ getActiveElement()));
 			const [selectors, elements] = resolveIgnoreTargets();
 			if (iframeIsOutside && !isIgnored(document.activeElement, selectors, elements)) handler(event);
 		}
@@ -409,7 +413,7 @@ function toElement(target) {
 * ```
 */
 function createStack(_options = {}) {
-	const { baseZIndex = 2e3, increment = 10, ...options } = _options;
+	const { baseZIndex = 2e3, increment = 10, default: defaultTeleport, ...options } = _options;
 	const selection = createSelection({
 		...options,
 		multiple: true
@@ -470,6 +474,7 @@ function createStack(_options = {}) {
 		}, true);
 		return ticket;
 	}
+	const defaultRef = toRef(() => defaultTeleport);
 	return {
 		...selection,
 		register,
@@ -478,6 +483,7 @@ function createStack(_options = {}) {
 		scrimZIndex,
 		isBlocking,
 		topElement,
+		default: defaultRef,
 		get size() {
 			return selection.size;
 		}
@@ -708,109 +714,6 @@ function useToggleScope(source, fn) {
 	return controls;
 }
 //#endregion
-//#region src/composables/useHydration/index.ts
-/**
-* @module useHydration
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
-*
-* @remarks
-* SSR hydration state management composable.
-*
-* Key features:
-* - Hydration state detection (browser vs SSR)
-* - Root component detection
-* - Readonly hydration state refs
-* - Plugin installation support
-* - Perfect for hydration-safe rendering
-*
-* Essential for composables that need to behave differently during SSR vs client-side.
-*
-* @example
-* ```ts
-* import { useHydration } from '@vuetify/v0'
-*
-* const { isHydrated } = useHydration()
-* if (isHydrated.value) {
-*   // safe for client-only logic
-* }
-* ```
-*/
-/**
-* Creates a new hydration instance.
-*
-* @returns A new hydration instance.
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
-*
-* @example
-* ```ts
-* import { createHydration } from '@vuetify/v0'
-*
-* const hydration = createHydration()
-* console.log(hydration.isHydrated.value) // false
-* hydration.hydrate()
-* console.log(hydration.isHydrated.value) // true
-* ```
-*/
-function createHydration() {
-	const isHydrated = shallowRef(false);
-	const isSettled = shallowRef(false);
-	function hydrate() {
-		isHydrated.value = true;
-	}
-	function settle() {
-		isSettled.value = true;
-	}
-	return {
-		isHydrated: shallowReadonly(isHydrated),
-		isSettled: shallowReadonly(isSettled),
-		hydrate,
-		settle
-	};
-}
-function createFallbackHydration() {
-	return {
-		isHydrated: shallowReadonly(shallowRef(true)),
-		isSettled: shallowReadonly(shallowRef(true)),
-		hydrate: () => {},
-		settle: () => {}
-	};
-}
-/**
-* Creates a new hydration context trinity.
-*
-* @param options Options for creating the hydration context.
-* @template E The type of the hydration context.
-* @returns A new hydration context trinity.
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
-*
-* @example
-* ```ts
-* import { createHydrationContext } from '@vuetify/v0'
-*
-* export const [useHydrationContext, provideHydrationContext, context] = createHydrationContext({
-*   namespace: 'app:hydration',
-* })
-* ```
-*/
-const [createHydrationContext, createHydrationPlugin, useHydration] = createPluginContext("v0:hydration", () => createHydration(), {
-	fallback: () => createFallbackHydration(),
-	setup: (context, app) => {
-		const { mount } = app;
-		app.mount = (...args) => {
-			const vm = mount(...args);
-			nextTick().then(() => {
-				context.hydrate();
-				nextTick().then(() => context.settle());
-			});
-			app.mount = mount;
-			return vm;
-		};
-	}
-});
-//#endregion
 //#region src/composables/createObserver/index.ts
 /**
 * @module createObserver
@@ -942,12 +845,6 @@ function createObserver(target, userCallback, config) {
 * })
 * ```
 */
-/* @__NO_SIDE_EFFECTS__ */
-function pxToNumber(value, fallback = 0) {
-	if (!/* @__PURE__ */ isString(value)) return fallback;
-	const parsed = Number.parseFloat(value);
-	return /* @__PURE__ */ isNaN(parsed) ? fallback : parsed;
-}
 /**
 * Synthesize the entry the observer would report for `el`, for the `immediate`
 * callback that fires before the observer's own first delivery.
@@ -1235,7 +1132,7 @@ function createOverflow(options = {}) {
 		/* v8 ignore start -- browser-only measurement code */
 		if (!IN_BROWSER) return;
 		const style = getComputedStyle(el);
-		const marginX = (Number.parseFloat(style.marginLeft) || 0) + (Number.parseFloat(style.marginRight) || 0);
+		const marginX = /* @__PURE__ */ pxToNumber(style.marginLeft) + /* @__PURE__ */ pxToNumber(style.marginRight);
 		const w = (el.offsetWidth || 0) + marginX;
 		if (widths.value.get(index) !== w) widths.value = new Map(widths.value).set(index, w);
 		/* v8 ignore stop */
@@ -1944,238 +1841,6 @@ function useStep(namespace = "v0:step") {
 	return useContext(namespace);
 }
 //#endregion
-//#region src/composables/useDelay/index.ts
-/**
-* @module useDelay
-*
-* @see https://0.vuetifyjs.com/composables/system/use-delay
-*
-* @remarks
-* Schedule open and close transitions with configurable delays.
-*
-* Composes `useTimer` for the underlying lifecycle (start / stop / pause / resume,
-* plus reactive `isActive`, `isPaused`, `remaining`) and adds direction tracking
-* (`isOpening`) and promise-based resolution.
-*
-* Key features:
-* - Reactive `openDelay` and `closeDelay` via `MaybeRefOrGetter`
-* - `start(isOpening)` returns a `Promise<boolean>` that resolves once the delay elapses
-* - Per-call `minDelay` floor enforces a minimum delay
-* - Automatic cleanup on scope disposal (timer cleared, pending promise settled with current direction)
-* - SSR-safe
-*
-* @example
-* ```ts
-* import { useDelay } from '@vuetify/v0'
-*
-* const delay = useDelay(isOpening => isVisible.value = isOpening, {
-*   openDelay: 300,
-*   closeDelay: 200,
-* })
-*
-* delay.start(true)
-* delay.start(false, { minDelay: 500 })
-* ```
-*/
-/**
-* Schedule open and close transitions with configurable delays.
-*
-* Composes `useTimer` for the lifecycle (`start` / `stop` / `pause` / `resume` plus
-* reactive `isActive`, `isPaused`, `remaining`) and adds direction tracking
-* (`isOpening`) and promise-based resolution.
-*
-* @param callback Optional callback invoked once a started delay elapses; receives the resolved direction.
-* @param options Reactive delay settings.
-* @returns Lifecycle controls and reactive state.
-*
-* @see https://0.vuetifyjs.com/composables/system/use-delay
-*
-* @example
-* ```ts
-* const delay = useDelay(isOpening => isVisible.value = isOpening, {
-*   openDelay: 300,
-*   closeDelay: 200,
-* })
-*
-* delay.start(true)
-* delay.start(false, { minDelay: 500 })
-* delay.pause()
-* delay.resume()
-* delay.stop()
-* ```
-*/
-function useDelay(callback, options = {}) {
-	const { openDelay, closeDelay } = options;
-	const isOpening = shallowRef(false);
-	let minDelay = 0;
-	let resolver;
-	function fire() {
-		const direction = isOpening.value;
-		const resolve = resolver;
-		resolver = void 0;
-		resolve?.(direction);
-		callback?.(direction);
-	}
-	function duration() {
-		const raw = isOpening.value ? toValue(openDelay) : toValue(closeDelay);
-		return Math.max(minDelay, raw ?? 0);
-	}
-	const timer = useTimer(fire, { duration });
-	function start(direction, options = {}) {
-		const previous = resolver;
-		resolver = void 0;
-		isOpening.value = direction;
-		minDelay = options.minDelay ?? 0;
-		previous?.(direction);
-		const ms = duration();
-		return new Promise((resolve) => {
-			resolver = resolve;
-			if (ms <= 0) {
-				timer.stop();
-				fire();
-				return;
-			}
-			timer.start();
-		});
-	}
-	function stop() {
-		const resolve = resolver;
-		resolver = void 0;
-		timer.stop();
-		resolve?.(isOpening.value);
-	}
-	onScopeDispose(() => {
-		const resolve = resolver;
-		resolver = void 0;
-		resolve?.(isOpening.value);
-	}, true);
-	return {
-		start,
-		stop,
-		pause: timer.pause,
-		resume: timer.resume,
-		isActive: shallowReadonly(timer.isActive),
-		isPaused: shallowReadonly(timer.isPaused),
-		remaining: shallowReadonly(timer.remaining),
-		isOpening: shallowReadonly(isOpening)
-	};
-}
-//#endregion
-//#region src/composables/usePopover/index.ts
-/**
-* @module usePopover
-*
-* @see https://0.vuetifyjs.com/composables/system/use-popover
-*
-* @remarks
-* Composable for native popover API behavior with CSS anchor positioning.
-* Manages open/close state, anchor styles, content attributes, bidirectional
-* sync between reactive state and native popover events, and configurable
-* open / close delays via `useDelay`.
-*
-* Key features:
-* - Native popover API (showPopover/hidePopover)
-* - CSS anchor positioning (position-area, position-try-fallbacks)
-* - Reactive open/close delays via `useDelay`
-* - Toggle event sync for native state changes
-* - SSR-safe (no DOM ops outside browser)
-* - Optional external isOpen ref for v-model integration
-*
-* @example
-* ```ts
-* import { usePopover } from '@vuetify/v0'
-*
-* const popover = usePopover({ openDelay: 200, closeDelay: 100 })
-* popover.open()
-* popover.toggle()
-* ```
-*/
-function usePopover(options = {}) {
-	const { id: _id, positionArea = "bottom", positionTry = "most-width bottom", openDelay, closeDelay } = options;
-	const id = _id ?? /* @__PURE__ */ useId$1();
-	const anchor = `--${String(id).replace(/[^a-zA-Z0-9_-]/g, "")}`;
-	const isOpen = options.isOpen ?? shallowRef(false);
-	const delay = useDelay((direction) => {
-		isOpen.value = direction;
-	}, {
-		openDelay,
-		closeDelay
-	});
-	function open() {
-		delay.start(true);
-	}
-	function close() {
-		delay.start(false);
-	}
-	function toggle() {
-		if (isOpen.value) close();
-		else open();
-	}
-	function cancel() {
-		delay.stop();
-	}
-	const anchorStyles = toRef(() => ({ anchorName: anchor }));
-	const contentAttrs = toRef(() => ({
-		id,
-		popover: ""
-	}));
-	const contentStyles = toRef(() => ({
-		"position": "fixed",
-		"margin": "unset",
-		"inset-area": positionArea,
-		"position-area": positionArea,
-		"position-anchor": anchor,
-		"position-try-fallbacks": positionTry
-	}));
-	function attach(el) {
-		let current;
-		function hide(element) {
-			if (!IN_BROWSER || /* @__PURE__ */ isNullOrUndefined(element)) return;
-			try {
-				if (element.matches?.(":popover-open") === false) return;
-				element.hidePopover?.();
-			} catch {}
-		}
-		function sync() {
-			if (!IN_BROWSER) return;
-			const element = toValue(el);
-			if (!/* @__PURE__ */ isNullOrUndefined(current) && current !== element) hide(current);
-			current = /* @__PURE__ */ isNullOrUndefined(element) ? void 0 : element;
-			if (/* @__PURE__ */ isNullOrUndefined(element)) return;
-			if (!isOpen.value) {
-				hide(element);
-				return;
-			}
-			if (!element.isConnected) return;
-			if (element.matches?.(":popover-open")) return;
-			element.showPopover?.();
-		}
-		watch([isOpen, () => toValue(el)], sync, {
-			immediate: true,
-			flush: "post"
-		});
-		onScopeDispose(() => {
-			hide(toValue(el) ?? current);
-		}, true);
-		useEventListener(el, "toggle", (e) => {
-			if (!toValue(el)?.isConnected) return;
-			isOpen.value = e.newState === "open";
-		});
-	}
-	return {
-		isOpen,
-		id,
-		open,
-		close,
-		toggle,
-		cancel,
-		anchorStyles,
-		contentAttrs,
-		contentStyles,
-		attach
-	};
-}
-//#endregion
 //#region src/composables/createFocusTraversal/index.ts
 /**
 * @module createFocusTraversal
@@ -2541,7 +2206,7 @@ var ClientComboboxAdapter = class extends ComboboxAdapter {
 * ```
 */
 function createCombobox(options = {}) {
-	const { multiple = false, mandatory = false, disabled = false, strict = false, error = false, errorMessages, adapter, displayValue = (v) => String(v ?? ""), id: _id, name, form } = options;
+	const { multiple = false, mandatory = false, disabled = false, strict = false, error = false, errorMessages, adapter, positionAdapter, displayValue = (v) => String(v ?? ""), id: _id, name, form } = options;
 	const id = _id ?? /* @__PURE__ */ useId$1();
 	const inputId = `${id}-input`;
 	const listboxId = `${id}-listbox`;
@@ -2582,7 +2247,11 @@ function createCombobox(options = {}) {
 		query,
 		items
 	});
-	const popover = usePopover({ id });
+	const popover = usePopover({
+		id,
+		adapter: positionAdapter
+	});
+	popover.attachAnchor(inputEl);
 	const isOpen = popover.isOpen;
 	const cursor = useVirtualFocus(() => selection.values().filter((ticket) => filtered.value.has(ticket.id) && !toValue(ticket.disabled)).map((ticket) => ({
 		id: ticket.id,
@@ -2811,126 +2480,1119 @@ function useLazy(active, options = {}) {
 	};
 }
 //#endregion
-//#region src/composables/createForm/index.ts
+//#region src/composables/createSortable/index.ts
 /**
-* @module createForm
+* @module createSortable
 *
-* @see https://0.vuetifyjs.com/composables/forms/create-form
+* @see https://0.vuetifyjs.com/composables/data/create-sortable
 *
 * @remarks
-* Form composable that coordinates validation across multiple fields.
-*
-* Key features:
-* - Pure registry of ValidationContext instances
-* - Validations auto-register via useForm() injection
-* - Form-level submit, reset, and aggregate state
-* - Exposes disabled/readonly refs for component consumption
-* - Trinity pattern for DI
+* Headless ordered-list primitive. Extends `createModel` with mutation primitives
+* (`swap`, `reorder`) and an enriched `move:ticket` event on the registry event
+* bus. Honors `disabled` as a real mutation gate at both root and per-ticket scope.
 *
-* Per-field validation logic lives in createValidation.
-* createForm is the mothership — it coordinates, not creates.
+* Pure logical composable — no DnD, no DOM, no keyboard. Drag-and-drop integration
+* composes with `useDragDrop`; keyboard reorder composes with `useVirtualFocus`.
 *
 * @example
 * ```ts
-* import { createForm } from '@vuetify/v0'
+* import { createSortable } from '@vuetify/v0'
+* import type { SortableTicketInput } from '@vuetify/v0'
 *
-* const form = createForm()
-* const isValid = await form.validate()
-* if (isValid) form.submit()
+* interface TaskTicket extends SortableTicketInput {
+*   value: { id: number; label: string }
+* }
+*
+* const sortable = createSortable<TaskTicket>()
+* const a = sortable.register({ value: { id: 1, label: 'A' } })
+* const b = sortable.register({ value: { id: 2, label: 'B' } })
+*
+* sortable.move(a.id, 1)
+* sortable.on('move:ticket', ({ ticket, from, to }) => {
+*   console.log(`${ticket.value.label} moved ${from} → ${to}`)
+* })
 * ```
 */
 /**
-* Creates a new form instance.
-*
-* A form is a pure registry of validation contexts. Validations register
-* themselves via `useForm()` injection. The form coordinates submit, reset,
-* and aggregate state across all registered validations.
-*
-* @param options The options for the form instance.
-* @returns A new form context.
+* Create an ordered-list state primitive.
 *
-* @see https://0.vuetifyjs.com/composables/forms/create-form
+* @param options Sortable options.
+* @returns A {@link SortableContext} that extends {@link ModelContext}.
 *
 * @example
 * ```ts
-* import { createForm, createValidation } from '@vuetify/v0'
-* import { shallowRef } from 'vue'
-*
-* const form = createForm()
-*
-* // Each validation is one input — form is just the coordinator
-* const email = shallowRef('')
-* const validation = createValidation({
-*   value: email,
-*   rules: ['required', 'email'],
-* })
-*
-* form.register({ value: validation })
-*
-* await form.submit()
-* form.reset()
+* const sortable = createSortable<Todo>()
+* sortable.onboard(todos.value.map(value => ({ value })))
 * ```
 */
-function createForm(_options = {}) {
-	const { disabled = false, readonly = false, ...options } = _options;
-	const registry = createRegistry({
+function createSortable(_options = {}) {
+	const { disabled, ...options } = _options;
+	const model = createModel({
 		...options,
-		reactive: true
-	});
-	const isValidating = computed(() => {
-		for (const ticket of registry.values()) if (ticket.value.isValidating.value) return true;
-		return false;
-	});
-	const isValid = computed(() => {
-		let hasNull = false;
-		let hasFields = false;
-		for (const ticket of registry.values()) {
-			hasFields = true;
-			if (ticket.value.isValid.value === false) return false;
-			if (/* @__PURE__ */ isNull(ticket.value.isValid.value)) hasNull = true;
-		}
-		if (!hasFields) return null;
-		return hasNull ? null : true;
+		events: true,
+		disabled
 	});
-	function register(registration) {
-		return registry.register(registration);
+	const logger = useLogger();
+	function move(id, toIndex) {
+		if (toValue(disabled)) return void 0;
+		const ticket = model.get(id);
+		if (!ticket) return void 0;
+		if (toValue(ticket.disabled)) return void 0;
+		const from = ticket.index;
+		const result = model.move(id, toIndex);
+		if (result && result.index !== from) model.emit("move:ticket", {
+			ticket: result,
+			from,
+			to: result.index
+		});
+		return result;
 	}
-	function reset() {
-		for (const ticket of registry.values()) ticket.value.reset();
+	function swap(a, b) {
+		if (toValue(disabled)) return;
+		if (a === b) return;
+		const ta = model.get(a);
+		const tb = model.get(b);
+		if (!ta || !tb) return;
+		if (toValue(ta.disabled) || toValue(tb.disabled)) return;
+		const indexA = ta.index;
+		const indexB = tb.index;
+		model.batch(() => {
+			const ra = model.move(a, indexB);
+			if (ra && ra.index !== indexA) model.emit("move:ticket", {
+				ticket: ra,
+				from: indexA,
+				to: ra.index
+			});
+			const rb = model.move(b, indexA);
+			if (rb && rb.index !== indexB) model.emit("move:ticket", {
+				ticket: rb,
+				from: indexB,
+				to: rb.index
+			});
+		});
 	}
-	async function submit(id) {
-		const ids = /* @__PURE__ */ isUndefined(id) ? [...registry.keys()] : /* @__PURE__ */ toArray(id);
-		return (await Promise.all(ids.map(async (key) => {
-			const ticket = registry.get(key);
-			if (!ticket) return true;
-			return ticket.value.validate();
-		}))).every(Boolean);
+	function reorder(ids) {
+		if (toValue(disabled)) return;
+		const currentSize = model.size;
+		if (ids.length !== currentSize) {
+			logger.warn(`Reorder expected ${currentSize} ids, got ${ids.length}.`);
+			return;
+		}
+		const known = new Set(model.keys());
+		const seen = /* @__PURE__ */ new Set();
+		for (const id of ids) {
+			if (!known.has(id)) {
+				logger.warn(`Reorder contains unknown id "${String(id)}".`);
+				return;
+			}
+			if (seen.has(id)) {
+				logger.warn(`Reorder contains duplicate id "${String(id)}".`);
+				return;
+			}
+			seen.add(id);
+		}
+		const froms = /* @__PURE__ */ new Map();
+		for (const id of ids) {
+			const ticket = model.get(id);
+			if (ticket) froms.set(id, ticket.index);
+		}
+		model.batch(() => {
+			model.reorder(ids);
+			for (const [index, id] of ids.entries()) {
+				const from = froms.get(id);
+				if (from === index) continue;
+				const ticket = model.get(id);
+				if (ticket) model.emit("move:ticket", {
+					ticket,
+					from,
+					to: index
+				});
+			}
+		});
 	}
 	return {
-		...registry,
-		register,
-		submit,
-		reset,
-		disabled,
-		readonly,
-		isValid,
-		isValidating,
+		...model,
+		move,
+		swap,
+		reorder,
 		get size() {
-			return registry.size;
+			return model.size;
 		}
 	};
 }
+//#endregion
+//#region src/composables/createDataGrid/editing.ts
 /**
-* Creates a new form context using the Trinity pattern.
+* @module createDataGrid/editing
 *
-* @param options The options for the form context.
-* @returns A Trinity tuple: [useFormContext, provideFormContext, formContext]
+* @remarks
+* Cell editing state management. Tracks active cell, validation errors,
+* and dirty (staged but uncommitted) edits. Does not mutate source data —
+* commit fires a callback for the consumer to handle.
+*
+* When a `registry` is provided, editing state for rows that get
+* unregistered (or wiped via `clear`) is pruned automatically so consumers
+* can never observe `active` pointing at a phantom row or stale entries
+* lingering in `dirty`.
+*
+* @internal Consumed only by `createDataGrid`. This is a fully decoupled 2D
+* cell-edit primitive — it imports nothing from `createDataGrid` /
+* `createDataTable` (only `#v0/utilities`, `#v0/types`, and Vue), so it is a
+* latent composable. It is parameterized over a row type `T` (defaulting to
+* `unknown`), but a type parameter is not an import — the primitive stays
+* fully decoupled from the grid's concrete ticket types and deliberately
+* row-agnostic: `T` is intentionally unconstrained, so do not narrow it to
+* the grid's `Record<string, unknown>` when promoting. Promote it to a
+* standalone `createCellEditing/`
+* composable the moment a second consumer appears (e.g. an editable
+* `createDataTable`). See `.claude/rules/composables.md` §"Sub-modules:
+* inline, private sibling, or promote".
+*/
+/**
+* Creates cell editing state for a data grid.
 *
-* @see https://0.vuetifyjs.com/composables/forms/create-form
+* @param options Cell editing configuration including columns and commit callback
+* @returns Cell editing state and controls
 *
 * @example
 * ```ts
-* import { createFormContext } from '@vuetify/v0'
+* const editing = createCellEditing({
+*   columns: [{ id: 'name', editable: true }],
+*   registry: table,
+*   onEdit (row, column, value) { ... },
+* })
+*
+* editing.edit(1, 'name')
+* editing.commit('Alice')
+* ```
+*/
+function createCellEditing(options) {
+	const { columns, onEdit, lookup, registry } = options;
+	function resolveColumn(column) {
+		for (const col of toValue(columns)) if (col.id === column) return col;
+	}
+	const active = shallowRef(null);
+	const error = shallowRef(null);
+	const dirty = shallowReactive(/* @__PURE__ */ new Map());
+	function edit(row, column) {
+		const col = resolveColumn(column);
+		if (!col) return;
+		if (/* @__PURE__ */ isFunction(col.editable)) {
+			const item = lookup?.(row);
+			if (/* @__PURE__ */ isUndefined(item) || !col.editable(item)) return;
+		} else if (col.editable !== true) return;
+		error.value = null;
+		active.value = {
+			row,
+			column
+		};
+	}
+	function commit(value) {
+		const cell = active.value;
+		if (!cell) return;
+		const col = resolveColumn(cell.column);
+		if (col?.validate) {
+			const result = col.validate(value, lookup?.(cell.row));
+			if (result !== true && /* @__PURE__ */ isString(result) && result.length > 0) {
+				error.value = result;
+				return;
+			}
+		}
+		const entry = dirty.get(cell.row);
+		if (entry) {
+			entry.delete(cell.column);
+			if (entry.size === 0) dirty.delete(cell.row);
+		}
+		error.value = null;
+		active.value = null;
+		onEdit?.(cell.row, cell.column, value);
+	}
+	function cancel() {
+		const cell = active.value;
+		if (cell) {
+			const entry = dirty.get(cell.row);
+			if (entry) {
+				entry.delete(cell.column);
+				if (entry.size === 0) dirty.delete(cell.row);
+			}
+		}
+		error.value = null;
+		active.value = null;
+	}
+	function onUnregister(data) {
+		const ticket = data;
+		if (active.value?.row === ticket.id) {
+			active.value = null;
+			error.value = null;
+		}
+		dirty.delete(ticket.id);
+	}
+	function onClear() {
+		active.value = null;
+		error.value = null;
+		dirty.clear();
+	}
+	if (registry) {
+		registry.on("unregister:ticket", onUnregister);
+		registry.on("clear:registry", onClear);
+		onScopeDispose(() => {
+			registry.off("unregister:ticket", onUnregister);
+			registry.off("clear:registry", onClear);
+		}, true);
+	}
+	return {
+		active,
+		edit,
+		commit,
+		cancel,
+		error,
+		dirty
+	};
+}
+//#endregion
+//#region src/composables/createDataGrid/layout.ts
+/**
+* @module createDataGrid/layout
+*
+* @remarks
+* Manages column layout state for data grids: sizing (percentages 0-100),
+* pinning (left/right/scrollable regions), delta-based resizing compatible
+* with the Splitter two-panel model, column reordering, and visibility.
+*
+* Column existence, display order, AND grid layout config (size, pin,
+* min/max, resizable, reorderable) all live on the table's columns registry
+* (passed in as the only argument). `createRegistry` preserves the extra
+* grid fields on each ticket, so layout reads its config straight off the
+* registered ticket — there is no separate defs array. Columns onboarded
+* before OR after the layout is built are picked up identically: an initial
+* loop seeds the already-registered set and a `register:ticket` handler seeds
+* the rest. Removed columns have their pin/size/visibility state pruned via
+* unregister events.
+*
+* Sizing uses percentages so it is compatible with the Splitter component.
+* Offsets are computed per-region (left, scrollable, right) independently
+* and over visible columns only — hidden columns are excluded from the
+* render set without auto-redistribution (headless: the consumer rebalances
+* via `distribute()` or CSS).
+*
+* @internal Private sibling of `createDataGrid`, and intentionally NOT a
+* promotion candidate: it is bound to the table's `DataTableColumnTicket`
+* types, so it is parent-specific glue rather than a reusable primitive. See
+* `.claude/rules/composables.md` §"Sub-modules: inline, private sibling, or
+* promote".
+*/
+const DEFAULT_EXTRAS = {
+	minSize: 2,
+	maxSize: 100,
+	resizable: true,
+	reorderable: true
+};
+function offsets(cols, reverse = false) {
+	let offset = 0;
+	const start = reverse ? cols.length - 1 : 0;
+	const step = reverse ? -1 : 1;
+	const end = reverse ? -1 : cols.length;
+	for (let i = start; i !== end; i += step) {
+		cols[i].offset = offset;
+		offset += cols[i].size;
+	}
+}
+/**
+* Creates a column layout manager for a data grid.
+*
+* Reads column existence, display order, AND grid layout config (size, pin,
+* min/max, resizable, reorderable) from the table's columns registry. The
+* grid fields ride on each ticket — `createRegistry` preserves them — so
+* there is no separate defs array. Visibility is layout-local view state
+* (not a ticket field) kept here and reconciled via register / unregister /
+* clear events.
+*
+* Generic over the registry's input/output ticket types so the caller's
+* concrete grid column ticket (`DataGridColumnTicket`) flows through. Layout
+* only ever reads from the registry (`values`, `keys`, `on`, `reorder`,
+* `move`, `lookup`) — it never registers — so the output ticket need only be
+* readable as a {@link GridColumnDef}.
+*
+* @param cols The table's columns registry — source of truth for which
+*             columns exist, in what order, and their layout config
+* @returns Column layout state and mutation methods
+*/
+function createColumnLayout(cols) {
+	const logger = useLogger();
+	const configs = /* @__PURE__ */ new Map();
+	const group = createGroup({ multiple: true });
+	const sizes = shallowReactive(/* @__PURE__ */ new Map());
+	const hidden = shallowReactive(/* @__PURE__ */ new Set());
+	const order = [];
+	function record(id) {
+		if (!order.includes(id)) order.push(id);
+	}
+	/** Even share over the currently-registered leaves: explicit sizes are
+	*  honored, unsized columns split the remaining percentage. */
+	function share(id) {
+		const leaves = /* @__PURE__ */ extractLeaves(cols.values());
+		let used = 0;
+		let unsized = 0;
+		for (const leaf of leaves) {
+			const size = configs.get(String(leaf.id))?.size;
+			if (/* @__PURE__ */ isUndefined(size)) unsized++;
+			else used += size;
+		}
+		const own = configs.get(id)?.size;
+		if (!/* @__PURE__ */ isUndefined(own)) return own;
+		const remainder = Math.max(0, 100 - used);
+		return unsized > 0 ? remainder / unsized : 0;
+	}
+	function seedLeaf(leaf) {
+		const id = String(leaf.id);
+		if (!configs.has(id)) configs.set(id, {
+			size: leaf.size,
+			minSize: leaf.minSize ?? DEFAULT_EXTRAS.minSize,
+			maxSize: leaf.maxSize ?? DEFAULT_EXTRAS.maxSize,
+			resizable: leaf.resizable ?? DEFAULT_EXTRAS.resizable,
+			reorderable: leaf.reorderable ?? DEFAULT_EXTRAS.reorderable,
+			pinned: leaf.pinned ?? false
+		});
+		if (!group.has(id)) group.register({
+			id,
+			value: id
+		});
+		if (!sizes.has(id)) sizes.set(id, share(id));
+		for (const other of /* @__PURE__ */ extractLeaves(cols.values())) {
+			const otherId = String(other.id);
+			if (configs.has(otherId) && /* @__PURE__ */ isUndefined(configs.get(otherId)?.size)) sizes.set(otherId, share(otherId));
+		}
+		const config = configs.get(id);
+		if (config.pinned === "left") group.select(id);
+		else if (config.pinned === "right") group.mix(id);
+	}
+	function dropLeaf(id) {
+		group.unregister(id);
+		configs.delete(id);
+		sizes.delete(id);
+		hidden.delete(id);
+	}
+	function leavesOf(ticket) {
+		return /* @__PURE__ */ extractLeaves([ticket]);
+	}
+	for (const ticket of cols.values()) {
+		record(String(ticket.id));
+		for (const leaf of leavesOf(ticket)) seedLeaf(leaf);
+	}
+	cols.on("register:ticket", (ticket) => {
+		record(String(ticket.id));
+		for (const leaf of leavesOf(ticket)) seedLeaf(leaf);
+	});
+	cols.on("unregister:ticket", (ticket) => {
+		const top = order.indexOf(String(ticket.id));
+		if (top !== -1) order.splice(top, 1);
+		for (const leaf of leavesOf(ticket)) dropLeaf(String(leaf.id));
+	});
+	cols.on("clear:registry", () => {
+		group.clear();
+		configs.clear();
+		sizes.clear();
+		hidden.clear();
+		order.length = 0;
+	});
+	function position(id) {
+		if (group.selectedIds.has(id)) return "left";
+		if (group.mixed(id)) return "right";
+		return false;
+	}
+	function resolve(includeHidden) {
+		const resolved = [];
+		let index = 0;
+		for (const ticket of /* @__PURE__ */ extractLeaves(cols.values())) {
+			const id = String(ticket.id);
+			const visible = !hidden.has(id);
+			if (!includeHidden && !visible) continue;
+			const meta = configs.get(id) ?? DEFAULT_EXTRAS;
+			resolved.push({
+				id,
+				index: index++,
+				size: sizes.get(id) ?? 0,
+				offset: 0,
+				pinned: position(id),
+				resizable: meta.resizable,
+				reorderable: meta.reorderable,
+				minSize: meta.minSize,
+				maxSize: meta.maxSize,
+				visible
+			});
+		}
+		return resolved;
+	}
+	function split(resolved) {
+		const left = [];
+		const scrollable = [];
+		const right = [];
+		for (const col of resolved) if (col.pinned === "left") left.push(col);
+		else if (col.pinned === "right") right.push(col);
+		else scrollable.push(col);
+		offsets(left);
+		offsets(scrollable);
+		offsets(right, true);
+		return {
+			left,
+			scrollable,
+			right
+		};
+	}
+	const pinned = computed(() => split(resolve(false)));
+	const columns = computed(() => {
+		const { left, scrollable, right } = pinned.value;
+		return [
+			...left,
+			...scrollable,
+			...right
+		];
+	});
+	const allColumns = computed(() => resolve(true));
+	function pin(id, pos) {
+		if (!group.has(id)) return;
+		group.unselect(id);
+		group.unmix(id);
+		if (pos === "left") group.select(id);
+		else if (pos === "right") group.mix(id);
+	}
+	function resize(id, delta) {
+		const { left, scrollable, right } = pinned.value;
+		const all = [
+			...left,
+			...scrollable,
+			...right
+		];
+		const target = all.find((c) => c.id === id);
+		if (!target || !target.resizable) return;
+		const allIndex = all.findIndex((c) => c.id === id);
+		if (allIndex === -1 || allIndex === all.length - 1) return;
+		const neighbor = all[allIndex + 1];
+		const total = target.size + neighbor.size;
+		const lower = Math.max(target.minSize, total - neighbor.maxSize);
+		const upper = Math.min(target.maxSize, total - neighbor.minSize);
+		const clamped = /* @__PURE__ */ clamp(target.size + delta, lower, upper);
+		sizes.set(id, clamped);
+		sizes.set(neighbor.id, total - clamped);
+	}
+	function reorder(from, to) {
+		if (from === to) return;
+		const tops = [...cols.values()];
+		const ids = [];
+		const leafToTop = [];
+		for (const [top, ticket] of tops.entries()) for (const leaf of /* @__PURE__ */ extractLeaves([ticket])) {
+			ids.push(String(leaf.id));
+			leafToTop.push(top);
+		}
+		const visible = ids.filter((id) => !hidden.has(id));
+		const fromId = visible[from];
+		const toId = visible[to];
+		if (/* @__PURE__ */ isUndefined(fromId) || /* @__PURE__ */ isUndefined(toId)) return;
+		const fromTop = leafToTop[ids.indexOf(fromId)];
+		const toTop = leafToTop[ids.indexOf(toId)];
+		if (/* @__PURE__ */ isUndefined(fromTop) || /* @__PURE__ */ isUndefined(toTop) || fromTop === toTop) return;
+		if (tops[fromTop]?.reorderable === false) return;
+		const id = cols.lookup(fromTop);
+		if (/* @__PURE__ */ isUndefined(id)) return;
+		cols.move(id, toTop);
+	}
+	function distribute(incoming) {
+		const visible = (/* @__PURE__ */ extractLeaves(cols.values())).filter((leaf) => !hidden.has(String(leaf.id)));
+		if (incoming.length !== visible.length) {
+			logger.warn(`createDataGrid: distribute() expected ${visible.length} sizes but received ${incoming.length}; ignoring.`);
+			return;
+		}
+		const sum = incoming.reduce((acc, value) => acc + value, 0);
+		if (sum <= 0) {
+			logger.warn(`createDataGrid: distribute() received sizes summing to ${sum}; expected a positive total.`);
+			return;
+		}
+		const metas = visible.map((col) => configs.get(String(col.id)) ?? DEFAULT_EXTRAS);
+		let current = incoming.map((value, i) => /* @__PURE__ */ clamp(value / sum * 100, metas[i].minSize, metas[i].maxSize));
+		let residual = 100 - current.reduce((acc, value) => acc + value, 0);
+		const max = visible.length * 2;
+		for (let pass = 0; pass < max && Math.abs(residual) >= 1e-6; pass++) {
+			const room = current.map((value, i) => residual > 0 ? metas[i].maxSize - value : value - metas[i].minSize);
+			const available = room.reduce((acc, value) => acc + Math.max(0, value), 0);
+			if (available <= 0) break;
+			current = current.map((value, i) => room[i] <= 0 ? value : value + residual * (room[i] / available));
+			residual = 100 - current.reduce((acc, value) => acc + value, 0);
+		}
+		if (Math.abs(residual) >= 1e-6) logger.warn(`createDataGrid: distribute() could not reach 100 within min/max constraints (off by ${residual.toFixed(2)})`);
+		for (const [i, col] of visible.entries()) sizes.set(String(col.id), current[i]);
+	}
+	function show(id) {
+		hidden.delete(id);
+	}
+	function hide(id) {
+		hidden.add(id);
+	}
+	function toggle(id) {
+		if (hidden.has(id)) hidden.delete(id);
+		else hidden.add(id);
+	}
+	function reset() {
+		for (const ticket of /* @__PURE__ */ extractLeaves(cols.values())) {
+			const id = String(ticket.id);
+			sizes.set(id, share(id));
+		}
+		cols.reorder([...order]);
+		hidden.clear();
+		for (const ticket of /* @__PURE__ */ extractLeaves(cols.values())) {
+			const id = String(ticket.id);
+			group.unselect(id);
+			group.unmix(id);
+		}
+		for (const [id, config] of configs) if (config.pinned === "left") group.select(id);
+		else if (config.pinned === "right") group.mix(id);
+	}
+	return {
+		pinned,
+		columns,
+		all: allColumns,
+		pin,
+		resize,
+		reorder,
+		distribute,
+		show,
+		hide,
+		toggle,
+		reset
+	};
+}
+//#endregion
+//#region src/composables/createDataGrid/spanning.ts
+/**
+* @module createDataGrid/spanning
+*
+* @remarks
+* Computes a row span map from visible items. For each cell, determines
+* rowSpan and whether it's hidden (covered by a span from a previous row).
+* Spans do not cross page boundaries. Each row is addressed by a key: either a
+* `key(item, index)` projection (the grid passes the registry ticket id) or,
+* absent that, the row's `itemKey` value. Rows whose resolved key is
+* `undefined` cannot be addressed in the resulting map and are skipped.
+*
+* @internal Consumed only by `createDataGrid`. Fully decoupled (items ref +
+* columns + key + span fn — no grid/table types), so it is a latent composable.
+* Promote it to a standalone `createRowSpanning/` composable on a second
+* consumer. See `.claude/rules/composables.md` §"Sub-modules: inline, private
+* sibling, or promote".
+*/
+/**
+* Computes a row span map from visible items.
+*
+* @param options Row spanning configuration
+* @returns A computed map of item ID to column to SpanEntry
+*
+* @example
+* ```ts
+* const spans = createRowSpanning({
+*   items: computed(() => grid.items.value),
+*   columns: ['group', 'ticker', 'value'],
+*   span: (item, column) => column === 'group' ? 3 : 1,
+* })
+*
+* spans.value.get(id)?.get('group') // { rowSpan: 3, hidden: false }
+* ```
+*/
+function createRowSpanning(options) {
+	const { items, columns, key, itemKey = "id", span } = options;
+	return computed(() => {
+		const result = /* @__PURE__ */ new Map();
+		if (!span) return result;
+		const list = items.value;
+		const resolved = toValue(columns);
+		const covered = Array.from({ length: resolved.length }).fill(0);
+		for (let row = 0; row < list.length; row++) {
+			const item = list[row];
+			const id = key ? key(item, row) : item[itemKey];
+			if (/* @__PURE__ */ isUndefined(id)) continue;
+			const cells = /* @__PURE__ */ new Map();
+			for (const [col, column] of resolved.entries()) if (covered[col] > 0) {
+				cells.set(column, {
+					rowSpan: 1,
+					hidden: true
+				});
+				covered[col]--;
+			} else {
+				const raw = span(item, column);
+				const rowSpan = Math.min(Math.max(1, /* @__PURE__ */ isNaN(raw) ? 1 : raw), list.length - row);
+				cells.set(column, {
+					rowSpan,
+					hidden: false
+				});
+				if (rowSpan > 1) covered[col] = rowSpan - 1;
+			}
+			result.set(id, cells);
+		}
+		return result;
+	});
+}
+//#endregion
+//#region src/composables/createDataGrid/index.ts
+/**
+* @module createDataGrid
+*
+* @see https://0.vuetifyjs.com/composables/data/create-data-grid
+*
+* @remarks
+* Main factory that wires together column layout, cell editing, row ordering,
+* and row spanning on top of a createDataTable pipeline. Row ordering is
+* provided by a createSortable instance synced to the table's row registry
+* via register / unregister events; the ordered ids are applied post-sort,
+* pre-pagination by overriding the `items` projection.
+*
+* Rows are registered through the inherited registry surface (`register`,
+* `onboard`, `unregister`, `clear`) — they are not passed as an `items`
+* option to the factory.
+*
+* Follows the trinity pattern for dependency injection.
+*
+* @example
+* ```ts
+* const grid = createDataGrid()
+*
+* grid.columns.onboard([
+*   { id: 'name', sortable: true },
+*   { id: 'progress', editable: true },
+* ])
+*
+* grid.onboard(rows.map(value => ({ id: value.id, value })))
+* grid.layout.pin('name', 'left')
+* grid.editing.edit(row.id, 'progress')
+* ```
+*/
+function recordId(row) {
+	return row.id;
+}
+/**
+* Creates a data grid instance with layout, editing, row ordering, and spanning
+* layered on top of the createDataTable pipeline.
+*
+* Rows live on the inherited registry surface — register them with
+* `grid.onboard(rows.map(value => ({ id: value.id, value })))` or
+* `grid.register({ id, value })`.
+*
+* @param options Data grid options
+* @returns Data grid context
+*
+* @example
+* ```ts
+* const grid = createDataGrid({ pagination: { page: 1 } })
+*
+* grid.columns.onboard([
+*   { id: 'name', sortable: true },
+*   { id: 'progress', editable: true, validate: v => Number(v) >= 0 || 'must be positive' },
+* ])
+*
+* grid.onboard(rows.map(value => ({ id: value.id, value })))
+* grid.layout.pin('name', 'left')
+* grid.rows.move(rowId, 0)
+* grid.editing.edit(row.id, 'progress')
+* ```
+*/
+function createDataGrid(_options = {}) {
+	const { editing: editingOptions, preserveRowOrder = false, rowSpanning, ...options } = _options;
+	const table = createDataTable(options);
+	const sortable = createSortable();
+	const sortableProxy = useProxyRegistry(sortable);
+	const dirty = shallowRef(false);
+	table.on("register:ticket", (ticket) => {
+		sortable.register({
+			id: ticket.id,
+			value: ticket.id
+		});
+	});
+	table.on("unregister:ticket", (ticket) => {
+		sortable.unregister(ticket.id);
+	});
+	table.on("clear:registry", () => {
+		sortable.clear();
+		dirty.value = false;
+	});
+	const order = toRef(() => sortableProxy.keys);
+	const sortedIds = computed(() => {
+		const buckets = /* @__PURE__ */ new Map();
+		for (const ticket of table.values()) {
+			const value = ticket.value;
+			const queue = buckets.get(value);
+			if (queue) queue.push(ticket.id);
+			else buckets.set(value, [ticket.id]);
+		}
+		const ids = [];
+		for (const value of table.sortedItems.value) {
+			const id = buckets.get(value)?.shift();
+			if (!/* @__PURE__ */ isUndefined(id)) ids.push(id);
+		}
+		return ids;
+	});
+	function move(id, toIndex) {
+		if (!dirty.value) {
+			const sorted = sortedIds.value;
+			const seen = new Set(sorted);
+			const rest = sortable.keys().filter((key) => !seen.has(key));
+			sortable.reorder([...sorted, ...rest]);
+		}
+		sortable.move(id, toIndex);
+		dirty.value = true;
+	}
+	function reset() {
+		if (!dirty.value) return;
+		if (sortable.size > 0) sortable.reorder(table.keys());
+		dirty.value = false;
+	}
+	useToggleScope(() => !toValue(preserveRowOrder), () => {
+		watch(table.sort.columns, reset, { flush: "sync" });
+	});
+	const ordered = computed(() => {
+		if (!dirty.value) return {
+			items: table.sortedItems.value,
+			ids: sortedIds.value
+		};
+		const sorted = table.sortedItems.value;
+		const ids = sortedIds.value;
+		const byId = /* @__PURE__ */ new Map();
+		for (let i = 0; i < sorted.length; i++) byId.set(ids[i], sorted[i]);
+		const seen = new Set(order.value);
+		const items = [];
+		const orderedIds = [];
+		for (const id of order.value) {
+			const value = byId.get(id);
+			if (!/* @__PURE__ */ isUndefined(value)) {
+				items.push(value);
+				orderedIds.push(id);
+			}
+		}
+		for (const [i, element] of sorted.entries()) {
+			const id = ids[i];
+			if (!seen.has(id)) {
+				items.push(element);
+				orderedIds.push(id);
+			}
+		}
+		return {
+			items,
+			ids: orderedIds
+		};
+	});
+	const page = computed(() => {
+		if (!dirty.value) {
+			const start = table.pagination.pageStart.value;
+			return {
+				items: table.items.value,
+				ids: table.total.value > table.sortedItems.value.length ? sortedIds.value : sortedIds.value.slice(start, start + table.items.value.length)
+			};
+		}
+		const full = ordered.value;
+		if (table.total.value > table.sortedItems.value.length) return full;
+		const start = table.pagination.pageStart.value;
+		const stop = table.pagination.pageStop.value;
+		return {
+			items: full.items.slice(start, stop),
+			ids: full.ids.slice(start, stop)
+		};
+	});
+	const pageOrderedItems = toRef(() => page.value.items);
+	const orderedItems = toRef(() => ordered.value.items);
+	function rank(source) {
+		const ranked = orderedItems.value;
+		const positions = /* @__PURE__ */ new Map();
+		for (const [index, row] of ranked.entries()) {
+			positions.set(row, index);
+			const id = recordId(row);
+			if (!/* @__PURE__ */ isNullOrUndefined(id)) positions.set(id, index);
+		}
+		return [...source].toSorted((a, b) => {
+			return (positions.get(a) ?? positions.get(recordId(a)) ?? Infinity) - (positions.get(b) ?? positions.get(recordId(b)) ?? Infinity);
+		});
+	}
+	const layout = createColumnLayout(table.columns);
+	function lookup(row) {
+		return table.get(row)?.value;
+	}
+	const editing = createCellEditing({
+		columns: () => table.leaves.value.filter((col) => col.editable === true || /* @__PURE__ */ isFunction(col.editable)).map((col) => ({
+			id: String(col.id),
+			editable: col.editable,
+			validate: col.validate
+		})),
+		lookup,
+		registry: table,
+		onEdit: editingOptions?.onEdit ? (row, column, value) => {
+			const item = lookup(row);
+			if (!/* @__PURE__ */ isUndefined(item)) editingOptions.onEdit(row, column, value, item);
+		} : void 0
+	});
+	const spans = createRowSpanning({
+		items: pageOrderedItems,
+		columns: () => table.leaves.value.map((col) => col.id),
+		key: (_item, index) => page.value.ids[index],
+		span(item, column) {
+			const col = table.leaves.value.find((leaf) => String(leaf.id) === column);
+			if (col && /* @__PURE__ */ isFunction(col.span)) return col.span(item);
+			return rowSpanning?.(item, column) ?? 1;
+		}
+	});
+	return {
+		...table,
+		items: pageOrderedItems,
+		orderedItems,
+		rank,
+		layout,
+		rows: {
+			order,
+			move,
+			reset
+		},
+		editing,
+		spans,
+		get size() {
+			return table.size;
+		}
+	};
+}
+/**
+* Creates a data grid context with dependency injection support.
+*
+* @param options Data grid context options including namespace
+* @returns A trinity tuple: [useDataGridContext, provideDataGridContext, defaultContext]
+*
+* @example
+* ```ts
+* const [useDataGrid, provideDataGrid, grid] = createDataGridContext({
+*   namespace: 'v0:projects',
+* })
+*
+* grid.columns.onboard(columns)
+* grid.onboard(rows.map(value => ({ id: value.id, value })))
+* provideDataGrid()
+* const ctx = useDataGrid()
+* ```
+*/
+function createDataGridContext(_options = {}) {
+	const { namespace = "v0:data-grid", ...options } = _options;
+	const [useDataGridContext, _provideDataGridContext] = createContext(namespace);
+	const context = createDataGrid(options);
+	function provideDataGridContext(_context = context, app) {
+		return _provideDataGridContext(_context, app);
+	}
+	return createTrinity(useDataGridContext, provideDataGridContext, context);
+}
+/**
+* Returns the current data grid context from dependency injection.
+*
+* @param namespace The namespace for the data grid context. @default 'v0:data-grid'
+* @returns The current data grid context
+*
+* @example
+* ```ts
+* const grid = useDataGrid<Project>()
+*
+* grid.layout.pin('id', 'left')
+* grid.rows.reset()
+* ```
+*/
+function useDataGrid(namespace = "v0:data-grid") {
+	return useContext(namespace);
+}
+//#endregion
+//#region src/composables/useRaf/index.ts
+/**
+* @module useRaf
+*
+* @see https://0.vuetifyjs.com/composables/system/use-raf
+*
+* @remarks
+* Scope-disposed safe requestAnimationFrame composable.
+*
+* Key features:
+* - Cancel-then-request pattern (deduplicates rapid calls)
+* - Automatic cleanup on scope disposal
+* - SSR-safe (no-op in non-browser environments)
+* - Callable function with cancel method
+*
+* Perfect for throttling updates to the next animation frame.
+*
+* @example
+* ```ts
+* import { useRaf } from '@vuetify/v0'
+*
+* const update = useRaf(timestamp => {
+*   // runs on next animation frame
+* })
+* update()
+* ```
+*/
+/**
+* Scope-disposed safe requestAnimationFrame.
+*
+* @param callback Function to call on animation frame.
+* @returns Callable that requests frame (canceling pending), with cancel method.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-raf
+*
+* @example
+* ```ts
+* // Basic usage
+* const update = useRaf((timestamp) => {
+*   // Runs on next animation frame
+* })
+*
+* update() // Request frame
+* update() // Cancels previous, requests new (deduplicated)
+*
+* // Manual cancel
+* update.cancel()
+*
+* // Check if pending
+* if (update.isActive.value) { ... }
+* ```
+*/
+function useRaf(callback) {
+	const id = shallowRef();
+	const isActive = toRef(() => !/* @__PURE__ */ isUndefined(id.value));
+	function cancel() {
+		if (!/* @__PURE__ */ isUndefined(id.value)) {
+			cancelAnimationFrame(id.value);
+			id.value = void 0;
+		}
+	}
+	function request() {
+		if (!IN_BROWSER) return;
+		cancel();
+		id.value = requestAnimationFrame((timestamp) => {
+			id.value = void 0;
+			callback(timestamp);
+		});
+	}
+	onScopeDispose(cancel, true);
+	return Object.assign(request, {
+		cancel,
+		isActive
+	});
+}
+//#endregion
+//#region src/composables/createForm/index.ts
+/**
+* @module createForm
+*
+* @see https://0.vuetifyjs.com/composables/forms/create-form
+*
+* @remarks
+* Form composable that coordinates validation across multiple fields.
+*
+* Key features:
+* - Pure registry of ValidationContext instances
+* - Validations auto-register via useForm() injection
+* - Form-level submit, reset, and aggregate state
+* - Exposes disabled/readonly refs for component consumption
+* - Trinity pattern for DI
+*
+* Per-field validation logic lives in createValidation.
+* createForm is the mothership — it coordinates, not creates.
+*
+* @example
+* ```ts
+* import { createForm } from '@vuetify/v0'
+*
+* const form = createForm()
+* const isValid = await form.validate()
+* if (isValid) form.submit()
+* ```
+*/
+/**
+* Creates a new form instance.
+*
+* A form is a pure registry of validation contexts. Validations register
+* themselves via `useForm()` injection. The form coordinates submit, reset,
+* and aggregate state across all registered validations.
+*
+* @param options The options for the form instance.
+* @returns A new form context.
+*
+* @see https://0.vuetifyjs.com/composables/forms/create-form
+*
+* @example
+* ```ts
+* import { createForm, createValidation } from '@vuetify/v0'
+* import { shallowRef } from 'vue'
+*
+* const form = createForm()
+*
+* // Each validation is one input — form is just the coordinator
+* const email = shallowRef('')
+* const validation = createValidation({
+*   value: email,
+*   rules: ['required', 'email'],
+* })
+*
+* form.register({ value: validation })
+*
+* await form.submit()
+* form.reset()
+* ```
+*/
+function createForm(_options = {}) {
+	const { disabled = false, readonly = false, ...options } = _options;
+	const registry = createRegistry({
+		...options,
+		reactive: true
+	});
+	const isValidating = computed(() => {
+		for (const ticket of registry.values()) if (ticket.value.isValidating.value) return true;
+		return false;
+	});
+	const isValid = computed(() => {
+		let hasNull = false;
+		let hasFields = false;
+		for (const ticket of registry.values()) {
+			hasFields = true;
+			if (ticket.value.isValid.value === false) return false;
+			if (/* @__PURE__ */ isNull(ticket.value.isValid.value)) hasNull = true;
+		}
+		if (!hasFields) return null;
+		return hasNull ? null : true;
+	});
+	function register(registration) {
+		return registry.register(registration);
+	}
+	function reset() {
+		for (const ticket of registry.values()) ticket.value.reset();
+	}
+	async function submit(id) {
+		const ids = /* @__PURE__ */ isUndefined(id) ? [...registry.keys()] : /* @__PURE__ */ toArray(id);
+		return (await Promise.all(ids.map(async (key) => {
+			const ticket = registry.get(key);
+			if (!ticket) return true;
+			return ticket.value.validate();
+		}))).every(Boolean);
+	}
+	return {
+		...registry,
+		register,
+		submit,
+		reset,
+		disabled,
+		readonly,
+		isValid,
+		isValidating,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new form context using the Trinity pattern.
+*
+* @param options The options for the form context.
+* @returns A Trinity tuple: [useFormContext, provideFormContext, formContext]
+*
+* @see https://0.vuetifyjs.com/composables/forms/create-form
+*
+* @example
+* ```ts
+* import { createFormContext } from '@vuetify/v0'
 *
 * export const [useMyForm, provideMyForm, myForm] = createFormContext()
 * ```
@@ -3511,7 +4173,7 @@ function createNumeric(options = {}) {
 * ```
 */
 function createNumberField(options = {}) {
-	const { value = ref(null), locale = "en-US", format: formatOptions, clamp: shouldClamp = true, disabled = false, readonly: _readonly = false, min, max, step, leap, wrap, id, label, name, rules, error, errorMessages } = options;
+	const { value = ref(null), locale = "en-US", format: formatOptions, clamp: shouldClamp = true, commitOn = "change", disabled = false, readonly: _readonly = false, min, max, step, leap, wrap, id, label, name, rules, error, errorMessages } = options;
 	const numeric = createNumeric({
 		min,
 		max,
@@ -3601,6 +4263,10 @@ function createNumberField(options = {}) {
 		}
 		value.value = numeric.snap(val);
 	}
+	function write(text) {
+		if (isLocked()) return;
+		value.value = parse(text);
+	}
 	return {
 		value,
 		display,
@@ -3614,86 +4280,12 @@ function createNumberField(options = {}) {
 		ceil,
 		formatValue,
 		parse,
-		commit
+		commit,
+		commitOn,
+		write
 	};
 }
 //#endregion
-//#region src/composables/useRaf/index.ts
-/**
-* @module useRaf
-*
-* @see https://0.vuetifyjs.com/composables/system/use-raf
-*
-* @remarks
-* Scope-disposed safe requestAnimationFrame composable.
-*
-* Key features:
-* - Cancel-then-request pattern (deduplicates rapid calls)
-* - Automatic cleanup on scope disposal
-* - SSR-safe (no-op in non-browser environments)
-* - Callable function with cancel method
-*
-* Perfect for throttling updates to the next animation frame.
-*
-* @example
-* ```ts
-* import { useRaf } from '@vuetify/v0'
-*
-* const update = useRaf(timestamp => {
-*   // runs on next animation frame
-* })
-* update()
-* ```
-*/
-/**
-* Scope-disposed safe requestAnimationFrame.
-*
-* @param callback Function to call on animation frame.
-* @returns Callable that requests frame (canceling pending), with cancel method.
-*
-* @see https://0.vuetifyjs.com/composables/system/use-raf
-*
-* @example
-* ```ts
-* // Basic usage
-* const update = useRaf((timestamp) => {
-*   // Runs on next animation frame
-* })
-*
-* update() // Request frame
-* update() // Cancels previous, requests new (deduplicated)
-*
-* // Manual cancel
-* update.cancel()
-*
-* // Check if pending
-* if (update.isActive.value) { ... }
-* ```
-*/
-function useRaf(callback) {
-	const id = shallowRef();
-	const isActive = toRef(() => !/* @__PURE__ */ isUndefined(id.value));
-	function cancel() {
-		if (!/* @__PURE__ */ isUndefined(id.value)) {
-			cancelAnimationFrame(id.value);
-			id.value = void 0;
-		}
-	}
-	function request() {
-		if (!IN_BROWSER) return;
-		cancel();
-		id.value = requestAnimationFrame((timestamp) => {
-			id.value = void 0;
-			callback(timestamp);
-		});
-	}
-	onScopeDispose(cancel, true);
-	return Object.assign(request, {
-		cancel,
-		isActive
-	});
-}
-//#endregion
 //#region src/composables/usePresence/index.ts
 /**
 * @module usePresence
@@ -3876,9 +4468,8 @@ function createProgress(options = {}) {
 		return (total.value - min) / extent * 100;
 	});
 	const isIndeterminate = toRef(() => {
-		if (_hasInitialValue) return false;
 		const segs = segments.value;
-		if (segs.length === 0) return true;
+		if (segs.length === 0) return !_hasInitialValue;
 		for (const seg of segs) if ((toValue(seg.value) ?? 0) > 0) return false;
 		return true;
 	});
@@ -3904,10 +4495,9 @@ function createProgress(options = {}) {
 			pending = clamped;
 			return;
 		}
-		for (const [index, element] of clamped.entries()) {
-			const ticket = segments.value[index];
-			if (!ticket || !isRef(ticket.value) || isReadonly(ticket.value)) continue;
-			ticket.value.value = element;
+		for (const [index, ticket] of segments.value.entries()) {
+			if (!isRef(ticket.value) || isReadonly(ticket.value)) continue;
+			ticket.value.value = clamped[index] ?? min;
 		}
 	}
 	return {
@@ -4347,7 +4937,8 @@ function createTooltip(options = {}) {
 		isAnyOpen,
 		shouldSkipOpenDelay,
 		register: registry.register,
-		unregister: registry.unregister
+		unregister: registry.unregister,
+		adapter: options.adapter
 	};
 }
 /**
@@ -5129,4 +5720,4 @@ function useRovingFocus(items, options = {}) {
 	};
 }
 //#endregion
-export { createHydrationPlugin as $, useCombobox as A, createBreadcrumbs as B, useIntersectionObserver as C, useLazy as D, useForm as E, useDelay as F, createOverflowContext as G, useBreadcrumbs as H, createStep as I, useResizeObserver as J, useOverflow as K, createStepContext as L, ComboboxAdapter as M, useVirtualFocus as N, createCombobox as O, usePopover as P, createHydrationContext as Q, useStep as R, useElementIntersection as S, createFormContext as T, useImage as U, createBreadcrumbsContext as V, createOverflow as W, createFallbackHydration as X, createObserver as Y, createHydration as Z, useRaf as _, createTooltipContext as a, useStack as at, createInput as b, useTooltip as c, createRatingContext as d, useHydration as et, useRating as f, usePresence as g, useProgress as h, useNested as i, createStackPlugin as it, ClientComboboxAdapter as j, createComboboxContext as k, createSlider as l, createProgressContext as m, createNested as n, createStack as nt, createTooltipFallback as o, toElement as ot, createProgress as p, useElementSize as q, createNestedContext as r, createStackContext as rt, createTooltipPlugin as s, useClickOutside as st, useRovingFocus as t, useToggleScope as tt, createRating as u, createNumberField as v, createForm as w, createValidation as x, createNumeric as y, useProxyModel as z };
+export { createStack as $, createSortable as A, useStep as B, createForm as C, createDataGrid as D, useRaf as E, ClientComboboxAdapter as F, useImage as G, createBreadcrumbs as H, ComboboxAdapter as I, useOverflow as J, createOverflow as K, useVirtualFocus as L, createCombobox as M, createComboboxContext as N, createDataGridContext as O, useCombobox as P, useToggleScope as Q, createStep as R, useIntersectionObserver as S, useForm as T, createBreadcrumbsContext as U, useProxyModel as V, useBreadcrumbs as W, useResizeObserver as X, useElementSize as Y, createObserver as Z, createNumberField as _, createTooltipContext as a, createValidation as b, useTooltip as c, createRatingContext as d, createStackContext as et, useRating as f, usePresence as g, useProgress as h, useNested as i, useClickOutside as it, useLazy as j, useDataGrid as k, createSlider as l, createProgressContext as m, createNested as n, useStack as nt, createTooltipFallback as o, createProgress as p, createOverflowContext as q, createNestedContext as r, toElement as rt, createTooltipPlugin as s, useRovingFocus as t, createStackPlugin as tt, createRating as u, createNumeric as v, createFormContext as w, useElementIntersection as x, createInput as y, createStepContext as z };