@hybridly/vue 0.10.0-beta.3 → 0.10.0-beta.30

package/dist/index.mjs

@@ -1,174 +1,14 @@
-import { t as __reExport } from "./_chunks/chunk.mjs";
-import { computed, createApp, defineComponent, getCurrentInstance, h, isRef, nextTick, onUnmounted, reactive, readonly, ref, shallowRef, toRaw, toValue, triggerRef, unref, watch } from "vue";
-import { can, createRouter, definePlugin, makeUrl, registerHook as registerHook$1, route, route as route$1, router, router as router$1 } from "@hybridly/core";
-import { clone, debounce, debug, merge, random, setValueAtPath, showViewComponentErrorModal, unsetPropertyAtPath } from "@hybridly/utils";
-import nprogress from "nprogress";
+import { n as __reExport, t as __exportAll } from "./_chunks/chunk.mjs";
+import { debug, merge, random, showViewComponentErrorModal, wrap } from "@hybridly/utils";
+import { computed, createApp, defineComponent, getCurrentInstance, h, isRef, nextTick, onMounted, onUnmounted, reactive, readonly, ref, shallowRef, toRaw, toValue, triggerRef, unref, watch } from "vue";
+import { createRouter, definePlugin, makeUrl, parseQueryString, registerHook as registerHook$1, route, route as route$1, router, router as router$1, stringifyQueryString } from "@hybridly/core";
+import { get, set, unset } from "es-toolkit/compat";
+import { debounce } from "es-toolkit/function";
+import { clone, cloneDeep } from "es-toolkit/object";
+import { isEqual } from "es-toolkit/predicate";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
-import qs from "qs";
-import { getByPath, setByPath } from "@clickbar/dot-diver";
-import isEqual from "lodash.isequal";
-
-//#region src/plugins/progress.ts
-/**
-* A plugin to display a progress bar.
-*/
-function progress(options) {
-	const resolved = {
-		delay: 250,
-		color: "#29d",
-		includeCSS: true,
-		spinner: false,
-		...options
-	};
-	let timeout;
-	function startProgress() {
-		nprogress.done();
-		nprogress.remove();
-		nprogress.start();
-	}
-	function finishProgress() {
-		if (nprogress.isStarted()) {
-			nprogress.done(true);
-			setTimeout(() => nprogress.remove(), 1e3);
-		}
-		clearTimeout(timeout);
-	}
-	return definePlugin({
-		name: "hybridly:progress",
-		initialized() {
-			nprogress.configure({ showSpinner: resolved.spinner });
-			if (resolved.includeCSS) injectCSS(resolved.color);
-		},
-		start: (context) => {
-			if (context.pendingNavigation?.options.progress === false) return;
-			clearTimeout(timeout);
-			timeout = setTimeout(() => startProgress(), resolved.delay);
-		},
-		progress: (progress) => {
-			if (nprogress.isStarted() && progress.percentage) nprogress.set(Math.max(nprogress.status, progress.percentage / 100 * .9));
-		},
-		after: () => finishProgress()
-	});
-}
-function injectCSS(color) {
-	const element = document.createElement("style");
-	element.textContent = `
-    #nprogress {
-      pointer-events: none;
-			--progress-color: ${color};
-    }
-    #nprogress .bar {
-      background: var(--progress-color);
-      position: fixed;
-      z-index: 1031;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 2px;
-    }
-    #nprogress .peg {
-      display: block;
-      position: absolute;
-      right: 0px;
-      width: 100px;
-      height: 100%;
-      box-shadow: 0 0 10px var(--progress-color), 0 0 5px var(--progress-color);
-      opacity: 1.0;
-      -webkit-transform: rotate(3deg) translate(0px, -4px);
-          -ms-transform: rotate(3deg) translate(0px, -4px);
-              transform: rotate(3deg) translate(0px, -4px);
-    }
-    #nprogress .spinner {
-      display: block;
-      position: fixed;
-      z-index: 1031;
-      top: 15px;
-      right: 15px;
-    }
-    #nprogress .spinner-icon {
-      width: 18px;
-      height: 18px;
-      box-sizing: border-box;
-      border: solid 2px transparent;
-      border-top-color: var(--progress-color);
-      border-left-color: var(--progress-color);
-      border-radius: 50%;
-      -webkit-animation: nprogress-spinner 400ms linear infinite;
-              animation: nprogress-spinner 400ms linear infinite;
-    }
-    .nprogress-custom-parent {
-      overflow: hidden;
-      position: relative;
-    }
-    .nprogress-custom-parent #nprogress .spinner,
-    .nprogress-custom-parent #nprogress .bar {
-      position: absolute;
-    }
-    @-webkit-keyframes nprogress-spinner {
-      0%   { -webkit-transform: rotate(0deg); }
-      100% { -webkit-transform: rotate(360deg); }
-    }
-    @keyframes nprogress-spinner {
-      0%   { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-  `;
-	document.head.appendChild(element);
-}
-
-//#endregion
-//#region src/stores/dialog.ts
-const DEBUG_KEY = "vue:state:dialog";
-const dialogStore = {
-	state: {
-		component: shallowRef(),
-		properties: ref(),
-		key: ref(),
-		show: ref()
-	},
-	removeComponent() {
-		if (dialogStore.state.component.value) {
-			debug.adapter(DEBUG_KEY, "Removing dialog.");
-			dialogStore.state.component.value = void 0;
-		}
-	},
-	setComponent(component) {
-		debug.adapter(DEBUG_KEY, "Setting dialog component:", component);
-		dialogStore.state.component.value = component;
-	},
-	setProperties(properties) {
-		debug.adapter(DEBUG_KEY, "Setting dialog properties:", properties);
-		dialogStore.state.properties.value = unref(properties);
-	},
-	setKey(key) {
-		debug.adapter(DEBUG_KEY, "Setting dialog key:", {
-			new: key,
-			previous: dialogStore.state.key.value
-		});
-		dialogStore.state.key.value = unref(key);
-	},
-	show() {
-		if (!dialogStore.state.show.value) {
-			debug.adapter(DEBUG_KEY, "Showing the dialog.");
-			dialogStore.state.show.value = true;
-		}
-	},
-	hide() {
-		if (dialogStore.state.show.value) {
-			debug.adapter(DEBUG_KEY, "Hiding the dialog.");
-			dialogStore.state.show.value = false;
-		}
-	}
-};
-
-//#endregion
-//#region src/stores/mount.ts
-/**
-* These callbacks are run on the first stick after the view component is mounted.
-*/
-const onMountedCallbacks = [];
-
-//#endregion
+import nprogress from "nprogress";
+import { getByPath } from "@clickbar/dot-diver";
 //#region src/stores/state.ts
 const state = {
 	context: shallowRef(),
@@ -193,204 +33,71 @@ const state = {
 		state.viewKey.value = unref(key);
 	}
 };
-
 //#endregion
-//#region src/components/wrapper.ts
-const wrapper = defineComponent({
-	name: "Hybridly",
-	setup() {
-		function renderLayout(view) {
-			debug.adapter("vue:render:layout", "Rendering layout.");
-			if (typeof state.view.value?.layout === "function") return state.view.value.layout(h, view, renderDialog(), {
-				...state.view.value?.properties ?? {},
-				...state.properties.value
-			});
-			if (Array.isArray(state.view.value?.layout)) return [state.view.value.layout.concat(view).reverse().reduce((child, layout) => {
-				layout.inheritAttrs = !!layout.inheritAttrs;
-				return h(layout, {
-					...state.view.value?.properties ?? {},
-					...state.properties.value
-				}, () => child);
-			}), renderDialog()];
-			return [h(state.view.value?.layout, {
-				...state.view.value?.properties ?? {},
-				...state.properties.value
-			}, () => view), renderDialog()];
-		}
-		function hijackOnMounted(component, type) {
-			if (!component) return;
-			const actual = component?.mounted;
-			component.mounted = () => {
-				actual?.();
-				nextTick(() => {
-					debug.adapter(`vue:render:${type}`, "Calling mounted callbacks.");
-					while (onMountedCallbacks.length) onMountedCallbacks.shift()?.();
-				});
-			};
-		}
-		function renderView() {
-			debug.adapter("vue:render:view", "Rendering view.");
-			state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-			hijackOnMounted(state.view.value, "view");
-			return h(state.view.value, {
-				...state.properties.value,
-				key: state.viewKey.value
-			});
-		}
-		function renderDialog() {
-			if (dialogStore.state.component.value && dialogStore.state.properties.value) {
-				debug.adapter("vue:render:dialog", "Rendering dialog.");
-				hijackOnMounted(dialogStore.state.component.value, "dialog");
-				return h(dialogStore.state.component.value, {
-					...dialogStore.state.properties.value,
-					key: dialogStore.state.key.value
-				});
+//#region src/components/load-state.ts
+function keysAreBeingReloaded(only, except, keys) {
+	only = wrap(only);
+	except = wrap(except);
+	if (only.length > 0) return keys.some((key) => only.includes(key));
+	if (except.length > 0) return !keys.some((key) => except.includes(key));
+	return true;
+}
+function useLoadState(getKeys) {
+	const hasLoadedOnce = ref(getKeys().every((key) => get(state.properties.value, key) !== void 0));
+	const reloading = ref(false);
+	const activeReloads = /* @__PURE__ */ new Set();
+	let removeStartListener = null;
+	let removeFinishListener = null;
+	onMounted(() => {
+		removeStartListener = registerHook$1("start", (request) => {
+			if (hasLoadedOnce.value === false) return;
+			if (request.options.preserveState !== true) return;
+			const keys = getKeys();
+			if (!keysAreBeingReloaded(request.options.only, request.options.except, keys)) return;
+			activeReloads.add(request.id);
+			reloading.value = true;
+		});
+		removeFinishListener = registerHook$1("after", (request) => {
+			if (activeReloads.has(request.id)) {
+				activeReloads.delete(request.id);
+				reloading.value = activeReloads.size > 0;
 			}
-		}
-		return (...a) => {
-			if (!state.view.value) return;
-			debug.adapter("vue:render:wrapper", "Rendering wrapper component.", a.map(toRaw));
-			const view = renderView();
-			if (state.view.value.layout) return renderLayout(view);
-			return [view, renderDialog()];
+		});
+	});
+	onUnmounted(() => {
+		removeStartListener?.();
+		removeFinishListener?.();
+		activeReloads.clear();
+	});
+	function getSlotProps() {
+		const loaded = getKeys().every((key) => get(state.properties.value, key) !== void 0);
+		if (loaded) hasLoadedOnce.value = true;
+		return {
+			reloading: reloading.value,
+			loading: !loaded || reloading.value,
+			loaded
+		};
+	}
+	return { getSlotProps };
+}
+//#endregion
+//#region src/components/deferred.ts
+const Deferred = defineComponent({
+	name: "Deferred",
+	props: { data: {
+		type: [String, Array],
+		required: true
+	} },
+	slots: Object,
+	setup(props, { slots }) {
+		const { getSlotProps } = useLoadState(() => wrap(props.data));
+		return () => {
+			const slotProps = getSlotProps();
+			if (!slotProps.loaded && !!slots.fallback) return slots.fallback(slotProps);
+			return slots.default?.(slotProps);
 		};
 	}
 });
-
-//#endregion
-//#region src/devtools.ts
-const hybridlyStateType = "hybridly";
-const hybridlyEventsTimelineLayerId = "Hybridly";
-function setupDevtools(app) {
-	setupDevtoolsPlugin({
-		id: "hybridly",
-		label: "Hybridly",
-		packageName: "@hybridly/vue",
-		homepage: "https://github.com/hybridly",
-		app,
-		enableEarlyProxy: true,
-		componentStateTypes: [hybridlyStateType]
-	}, (api) => {
-		api.on.inspectComponent((payload) => {
-			payload.instanceData.state.push({
-				type: hybridlyStateType,
-				key: "properties",
-				value: state.context.value?.view.properties,
-				editable: true
-			});
-			payload.instanceData.state.push({
-				type: hybridlyStateType,
-				key: "component",
-				value: state.context.value?.view.component
-			});
-			payload.instanceData.state.push({
-				type: hybridlyStateType,
-				key: "deferred",
-				value: state.context.value?.view.deferred
-			});
-			payload.instanceData.state.push({
-				type: hybridlyStateType,
-				key: "dialog",
-				value: state.context.value?.dialog
-			});
-			payload.instanceData.state.push({
-				type: hybridlyStateType,
-				key: "version",
-				value: state.context.value?.version
-			});
-			payload.instanceData.state.push({
-				type: hybridlyStateType,
-				key: "url",
-				value: state.context.value?.url
-			});
-			payload.instanceData.state.push({
-				type: hybridlyStateType,
-				key: "routing",
-				value: state.context.value?.routing
-			});
-		});
-		api.on.editComponentState((payload) => {
-			if (payload.type === hybridlyStateType) payload.set(state.context.value?.view);
-		});
-		api.addTimelineLayer({
-			id: hybridlyEventsTimelineLayerId,
-			color: 16501221,
-			label: "Hybridly"
-		});
-		const listen = [
-			"start",
-			"ready",
-			"data",
-			"navigating",
-			"navigated",
-			"progress",
-			"error",
-			"abort",
-			"success",
-			"invalid",
-			"exception",
-			"fail",
-			"after",
-			"backForward",
-			"success"
-		];
-		registerHook$1("before", (options) => {
-			const groupId = (Math.random() + 1).toString(36).substring(7);
-			api.addTimelineEvent({
-				layerId: hybridlyEventsTimelineLayerId,
-				event: {
-					groupId,
-					title: "before",
-					time: api.now(),
-					data: options
-				}
-			});
-			listen.forEach((event) => registerHook$1(event, (data) => {
-				api.addTimelineEvent({
-					layerId: hybridlyEventsTimelineLayerId,
-					event: {
-						groupId,
-						title: event,
-						time: api.now(),
-						data
-					}
-				});
-				if (event === "after") setTimeout(() => {
-					api.notifyComponentUpdate();
-				}, 100);
-			}, { once: true }));
-		});
-	});
-}
-const devtools = { install(app) {
-	if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) setupDevtools(app);
-} };
-
-//#endregion
-//#region src/plugins/view-transition.ts
-function viewTransition() {
-	if (!document.startViewTransition) return { name: "view-transition" };
-	let domUpdated;
-	return {
-		name: "view-transition",
-		navigating: async ({ type, hasDialog }) => {
-			if (type === "initial" || hasDialog) return;
-			return new Promise((confirmTransitionStarted) => document.startViewTransition(() => {
-				confirmTransitionStarted(true);
-				return new Promise((resolve) => domUpdated = resolve);
-			}));
-		},
-		mounted: () => {
-			domUpdated?.();
-			domUpdated = void 0;
-		},
-		navigated: () => {
-			domUpdated?.();
-			domUpdated = void 0;
-		}
-	};
-}
-
 //#endregion
 //#region src/stores/form.ts
 const formStore = {
@@ -402,230 +109,1489 @@ const formStore = {
 		return clone(formStore.defaultConfig);
 	}
 };
-
 //#endregion
-//#region src/initialize.ts
-/**
-* Initializes Hybridly's router and context.
-*/
-async function initializeHybridly(options = {}) {
-	const resolved = options;
-	const { element, payload, resolve } = prepare(resolved);
-	if (!element) throw new Error("Could not find an HTML element to initialize Vue on.");
-	state.setContext(await createRouter({
-		axios: resolved.axios,
-		plugins: resolved.plugins,
-		serializer: resolved.serializer,
-		responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
-		routing: resolved.routing,
-		adapter: {
-			resolveComponent: resolve,
-			executeOnMounted: (callback) => {
-				onMountedCallbacks.push(callback);
-			},
-			onDialogClose: async () => {
-				dialogStore.hide();
-			},
-			onContextUpdate: (context) => {
-				state.setContext(context);
-			},
-			onViewSwap: async (options) => {
-				if (options.component) {
-					onMountedCallbacks.push(() => options.onMounted?.({ isDialog: false }));
-					state.setView(options.component);
-				}
-				state.setProperties(options.properties);
-				if (!options.preserveState && !options.dialog) state.setViewKey(random());
-				if (options.dialog) {
-					onMountedCallbacks.push(() => options.onMounted?.({ isDialog: true }));
-					dialogStore.setComponent(await resolve(options.dialog.component));
-					dialogStore.setProperties(options.dialog.properties);
-					dialogStore.setKey(options.dialog.key);
-					dialogStore.show();
-				} else dialogStore.hide();
-			}
-		},
-		payload
-	}));
-	const render = () => h(wrapper);
-	if (options.setup) return await options.setup({
-		element,
-		wrapper,
-		render,
-		hybridly: devtools,
-		props: { context: state.context.value },
-		payload
-	});
-	const app = createApp({ render });
-	if (resolved.devtools !== false) app.use(devtools);
-	await options.enhanceVue?.(app, payload);
-	return app.mount(element);
+//#region src/composables/form.ts
+function deepCloneRaw(obj) {
+	return cloneDeep(toRaw(obj));
 }
-function prepare(options) {
-	debug.adapter("vue", "Preparing Hybridly with options:", options);
-	const isServer = typeof window === "undefined";
-	const id = options.id ?? "root";
-	const element = document?.getElementById(id) ?? void 0;
-	debug.adapter("vue", `Element "${id}" is:`, element);
-	const payload = element?.dataset.payload ? JSON.parse(element.dataset.payload) : void 0;
-	if (!payload) throw new Error("No payload found. Are you using the `@hybridly` directive?");
-	if (options.cleanup !== false) delete element.dataset.payload;
-	debug.adapter("vue", "Resolved:", {
-		isServer,
-		element,
-		payload
-	});
-	const resolve = async (name) => {
-		debug.adapter("vue", "Resolving component", name);
-		if (!options.imported) throw new Error("No component loaded. Did you initialize Hybridly? Does `php artisan hybridly:config` return an error?");
-		return await resolveViewComponent(name, options);
-	};
-	options.plugins ??= [];
-	if (options.progress !== false) options.plugins.push(progress(typeof options.progress === "object" ? options.progress : {}));
-	if (options.viewTransition !== false) options.plugins.push(viewTransition());
-	if (options.defaultFormOptions) formStore.setDefaultConfig(options.defaultFormOptions);
-	return {
-		isServer,
-		element,
-		payload,
-		resolve
+function useForm(options) {
+	const shouldRemember = !!options.key;
+	const historyKey = options.key ?? "form:default";
+	const historyData = shouldRemember ? router$1.history.get(historyKey) : void 0;
+	const timeoutIds = {
+		recentlyFailed: void 0,
+		recentlySuccessful: void 0
 	};
-}
-/**
-* Resolves a view by its name.
-*/
-async function resolveViewComponent(name, options) {
-	const components = options.imported;
-	const result = options.components.views.find((view) => name === view.identifier);
-	const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path) => result ? path.endsWith(result?.path) : false);
-	if (!result || !path) {
-		console.warn(`View component [${name}] not found. Available components: `, options.components.views.map(({ identifier }) => identifier));
-		showViewComponentErrorModal(name);
-		return;
+	/** Fields that were initially set up. */
+	const defaults = ref(deepCloneRaw(options.fields));
+	/** Fields as they were when loaded. */
+	const loaded = deepCloneRaw(historyData?.fields ?? options.fields);
+	/** Current fields. */
+	const fields = reactive(deepCloneRaw(loaded));
+	/** Validation errors for each field. */
+	const errors = ref(historyData?.errors ?? {});
+	/** Whether the form is dirty. */
+	const isDirty = ref(false);
+	/** Whether the submission was recently successful. */
+	const recentlySuccessful = ref(false);
+	/** Whether the submission is successful. */
+	const successful = ref(false);
+	/** Whether the submission was recently failed. */
+	const recentlyFailed = ref(false);
+	/** Whether the submission is failed. */
+	const failed = ref(false);
+	/** Whether the submission is being processed. */
+	const processing = ref(false);
+	/** The current request's progress. */
+	const progress = ref();
+	/** The current request. */
+	const request = shallowRef();
+	/** Abort controller for the current request. */
+	let abortController;
+	/**
+	* Sets new default values for the form, so subsequent resets will use these values.
+	*/
+	function setDefault(newDefault) {
+		Object.entries(newDefault).forEach(([key, value]) => {
+			set(defaults.value, key, deepCloneRaw(value));
+		});
 	}
-	let component = typeof components[path] === "function" ? await components[path]() : components[path];
-	component = component.default ?? component;
-	return component;
-}
-
-//#endregion
-//#region src/components/link.ts
-const RouterLink = defineComponent({
-	name: "RouterLink",
-	setup(_, { slots, attrs }) {
-		return (props) => {
-			let data = props.data ?? {};
-			const preloads = props.preload ?? false;
-			const preserveScroll = props.preserveScroll;
-			const preserveState = props.preserveState;
-			const url = makeUrl(props.href ?? "");
-			const method = props.method?.toUpperCase() ?? "GET";
-			const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
-			if (method === "GET") {
-				debug.adapter("vue", "Moving data object to URL parameters.");
-				url.search = qs.stringify(merge(data, qs.parse(url.search, { ignoreQueryPrefix: true })), {
-					encodeValuesOnly: true,
-					arrayFormat: "indices"
-				});
-				data = {};
-			}
-			if (as === "a" && method !== "GET") debug.adapter("vue", `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<RouterLink href="${url}" method="${method}" as="button">...</RouterLink>`);
-			function performPreload(type) {
-				if (!preloads) return;
-				if (props.external) return;
-				if (method !== "GET") return;
-				if (type !== "mount" && props.disabled) return;
-				if (type === "hover" && preloads === "mount") return;
-				if (type === "mount" && preloads !== "mount") return;
-				router$1.preload(url, {
-					data,
-					preserveScroll,
-					preserveState,
-					...props.options
-				});
-			}
-			performPreload("mount");
-			return h(props.as, {
-				...attrs,
-				...as === "a" ? { href: url } : {},
-				...props.disabled ? { disabled: props.disabled } : {},
-				onMouseenter: () => performPreload("hover"),
-				onAuxclick: (event) => {
-					if (props.disabled) event.preventDefault();
-				},
-				onClick: (event) => {
-					if (props.disabled) {
-						event.preventDefault();
-						return;
-					}
-					if (props.external) return;
-					if (!shouldIntercept(event)) return;
-					event.preventDefault();
-					router$1.navigate({
-						url,
-						data,
-						method,
-						preserveState: method !== "GET",
-						...props.options
-					});
+	function resolveFieldBehaviorKeys(option, fallback) {
+		if (option === false) return;
+		if (Array.isArray(option)) return option.length > 0 ? option : void 0;
+		if (option === true) return Object.keys(fields);
+		return fallback ? Object.keys(fields) : void 0;
+	}
+	function setDefaultFromFields(option) {
+		const keys = resolveFieldBehaviorKeys(option, false);
+		if (!keys) return;
+		keys.forEach((key) => {
+			set(defaults.value, key, deepCloneRaw(get(fields, key)));
+		});
+	}
+	function resetFieldsFromBehavior(option, fallback) {
+		const keys = resolveFieldBehaviorKeys(option, fallback);
+		if (!keys) return;
+		resetFields(...keys);
+	}
+	/**
+	* Resets the form's failed and successful flags.
+	*/
+	function resetSubmissionState() {
+		successful.value = false;
+		failed.value = false;
+		recentlyFailed.value = false;
+		recentlySuccessful.value = false;
+		clearTimeout(timeoutIds.recentlySuccessful);
+		clearTimeout(timeoutIds.recentlyFailed);
+		progress.value = void 0;
+	}
+	/**
+	* Resets the fields, errors and submission state.
+	*/
+	function reset() {
+		resetSubmissionState();
+		clearErrors();
+		resetFields();
+	}
+	/**
+	* Resets the fields to their default values.
+	*/
+	function resetFields(...keys) {
+		if (keys.length === 0) keys = Object.keys(fields);
+		keys.forEach((key) => {
+			set(fields, key, deepCloneRaw(get(defaults.value, key)));
+		});
+	}
+	/**
+	* Clear the form fields.
+	*/
+	function clear(...keys) {
+		if (keys.length === 0) keys = Object.keys(fields);
+		keys.forEach((key) => {
+			delete fields[key];
+		});
+	}
+	/**
+	* Submits the form.
+	*/
+	function submit(optionsOverrides) {
+		const { fields: _f, key: _k, automaticallySubmit: _as, ...optionsWithoutFields } = options;
+		const resolvedOptions = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
+		const { timeout, resetOnSuccess, resetOnError, setDefaultOnSuccess, transform, ...requestOptions } = merge(formStore.getDefaultConfig(), resolvedOptions, { mergePlainObjects: true });
+		const url = typeof requestOptions.url === "function" ? requestOptions.url() : requestOptions.url;
+		const data = typeof transform === "function" ? transform(fields) : fields;
+		const preserveState = requestOptions.preserveState ?? requestOptions.method !== "GET";
+		const hooks = requestOptions.hooks ?? {};
+		abortController = requestOptions.abortController ?? new AbortController();
+		return router$1.navigate({
+			...requestOptions,
+			abortController,
+			url: url ?? state.context.value?.url,
+			method: requestOptions.method ?? "POST",
+			data: deepCloneRaw(data),
+			preserveState,
+			hooks: {
+				before: (_request, context) => {
+					request.value = _request;
+					resetSubmissionState();
+					return hooks.before?.(_request, context);
+				},
+				start: (request, context) => {
+					processing.value = true;
+					return hooks.start?.(request, context);
+				},
+				progress: (incoming, request, context) => {
+					progress.value = {
+						event: incoming,
+						percentage: incoming.percentage
+					};
+					return hooks.progress?.(incoming, request, context);
+				},
+				"validation-error": (incoming, request, context) => {
+					setErrors(incoming);
+					resetFieldsFromBehavior(resetOnError, false);
+					failed.value = true;
+					recentlyFailed.value = true;
+					timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, timeout ?? 5e3);
+					return hooks["validation-error"]?.(incoming, request, context);
+				},
+				success: (payload, request, response, context) => {
+					clearErrors();
+					setDefaultFromFields(setDefaultOnSuccess);
+					resetFieldsFromBehavior(resetOnSuccess, true);
+					successful.value = true;
+					recentlySuccessful.value = true;
+					timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, timeout ?? 5e3);
+					return hooks.success?.(payload, request, response, context);
+				},
+				after: (_request, context) => {
+					request.value = void 0;
+					progress.value = void 0;
+					processing.value = false;
+					return hooks.after?.(_request, context);
 				}
-			}, slots.default ? slots : props.text);
-		};
-	},
+			}
+		});
+	}
+	if (options.automaticallySubmit) {
+		const submitOptions = options.automaticallySubmit === true ? void 0 : (() => {
+			const { debounce: _debounce, ...submitOptions } = options.automaticallySubmit;
+			return submitOptions;
+		})();
+		const automaticallySubmitOptions = options.automaticallySubmit === true ? {
+			debounce: 100,
+			immediate: true
+		} : options.automaticallySubmit;
+		watch(() => fields, debounce(() => {
+			if (!isDirty.value) return;
+			submit(submitOptions);
+		}, automaticallySubmitOptions.debounce ?? 100), {
+			deep: true,
+			immediate: automaticallySubmitOptions.immediate ?? true
+		});
+	}
+	/**
+	* Clears all errors.
+	*/
+	function clearErrors(...keys) {
+		if (keys.length === 0) keys = Object.keys(fields);
+		keys.forEach((key) => {
+			clearError(key);
+		});
+	}
+	/**
+	* Checks if the given keys are dirty in the form.
+	*/
+	function hasDirty(...keys) {
+		if (keys.length === 0) return isDirty.value;
+		return keys.some((key) => !isEqual(toRaw(get(fields, key)), toRaw(get(defaults.value, key))));
+	}
+	/**
+	* Clears the given field's error.
+	*/
+	function clearError(key) {
+		unset(errors.value, key);
+	}
+	/**
+	* Sets current errors.
+	*/
+	function setErrors(incoming) {
+		clearErrors();
+		Object.entries(incoming).forEach(([path, value]) => {
+			set(errors.value, path, value);
+		});
+	}
+	/**
+	* Aborts the submission.
+	*/
+	function abort() {
+		abortController?.abort();
+	}
+	watch([
+		fields,
+		processing,
+		errors
+	], () => {
+		isDirty.value = !isEqual(toRaw(defaults.value), toRaw(fields));
+		if (shouldRemember) router$1.history.remember(historyKey, {
+			fields: toRaw(fields),
+			errors: toRaw(errors.value)
+		});
+	}, {
+		deep: true,
+		immediate: true
+	});
+	return reactive({
+		resetFields,
+		reset,
+		resetSubmissionState,
+		clear,
+		fields,
+		abort,
+		setErrors,
+		clearErrors,
+		clearError,
+		setDefault,
+		hasDirty,
+		submit,
+		hasErrors: computed(() => Object.values(errors.value ?? {}).length > 0),
+		defaults,
+		loaded,
+		progress,
+		isDirty,
+		errors,
+		processing,
+		successful,
+		failed,
+		recentlySuccessful,
+		recentlyFailed
+	});
+}
+//#endregion
+//#region src/components/form.ts
+function isSubmitterElement(value) {
+	if (value instanceof HTMLButtonElement) return true;
+	if (value instanceof HTMLInputElement) return value.type === "submit" || value.type === "image";
+	return false;
+}
+function normalizeFieldName(name) {
+	const appendToArray = name.endsWith("[]");
+	return {
+		path: (appendToArray ? name.slice(0, -2) : name).replace(/\[([^\]]+)\]/g, ".$1").replace(/^\./, ""),
+		appendToArray
+	};
+}
+function appendFieldValue(target, path, value, forceArray) {
+	const existing = get(target, path);
+	if (existing === void 0) {
+		set(target, path, forceArray ? [value] : value);
+		return;
+	}
+	if (Array.isArray(existing)) {
+		existing.push(value);
+		return;
+	}
+	set(target, path, [existing, value]);
+}
+function isFormControl(control) {
+	return control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement || control instanceof HTMLSelectElement;
+}
+function getControlFieldInfo(control) {
+	if (!isFormControl(control) || !control.name) return;
+	const { path, appendToArray } = normalizeFieldName(control.name);
+	if (!path.length) return;
+	return {
+		control,
+		path,
+		appendToArray
+	};
+}
+function setCurrentValuesAsDefaults(form, keys) {
+	for (const element of Array.from(form.elements)) {
+		const field = getControlFieldInfo(element);
+		if (keys && (!field || !keys.has(field.path))) continue;
+		if (element instanceof HTMLInputElement) {
+			if (element.type === "checkbox" || element.type === "radio") {
+				element.defaultChecked = element.checked;
+				continue;
+			}
+			if (element.type === "file") continue;
+			element.defaultValue = element.value;
+			continue;
+		}
+		if (element instanceof HTMLTextAreaElement) {
+			element.defaultValue = element.value;
+			continue;
+		}
+		if (element instanceof HTMLSelectElement) for (const option of Array.from(element.options)) option.defaultSelected = option.selected;
+	}
+}
+function resetControlToDefault(control) {
+	if (control instanceof HTMLInputElement) {
+		if (control.type === "checkbox" || control.type === "radio") {
+			control.checked = control.defaultChecked;
+			return;
+		}
+		if (control.type === "file") {
+			control.value = "";
+			return;
+		}
+		control.value = control.defaultValue;
+		return;
+	}
+	if (control instanceof HTMLTextAreaElement) {
+		control.value = control.defaultValue;
+		return;
+	}
+	if (control instanceof HTMLSelectElement) for (const option of Array.from(control.options)) option.selected = option.defaultSelected;
+}
+function applyFieldValueToControl(control, fieldValue) {
+	if (control instanceof HTMLInputElement) {
+		if (control.type === "file") return;
+		if (control.type === "checkbox") {
+			if (Array.isArray(fieldValue)) {
+				control.checked = fieldValue.map(String).includes(control.value);
+				return;
+			}
+			if (typeof fieldValue === "boolean") {
+				control.checked = fieldValue;
+				return;
+			}
+			control.checked = String(fieldValue ?? "") === control.value;
+			return;
+		}
+		if (control.type === "radio") {
+			control.checked = String(fieldValue ?? "") === control.value;
+			return;
+		}
+		control.value = fieldValue == null ? "" : String(fieldValue);
+		return;
+	}
+	if (control instanceof HTMLTextAreaElement) {
+		control.value = fieldValue == null ? "" : String(fieldValue);
+		return;
+	}
+	if (control instanceof HTMLSelectElement) {
+		if (control.multiple && Array.isArray(fieldValue)) {
+			const values = new Set(fieldValue.map((value) => String(value)));
+			for (const option of Array.from(control.options)) option.selected = values.has(option.value);
+			return;
+		}
+		control.value = fieldValue == null ? "" : String(fieldValue);
+	}
+}
+function syncControlsFromFields(form, fields) {
+	const pathIndexes = /* @__PURE__ */ new Map();
+	for (const control of Array.from(form.elements)) {
+		const field = getControlFieldInfo(control);
+		if (!field) continue;
+		const value = get(fields, field.path);
+		if (field.appendToArray && Array.isArray(value)) {
+			const currentIndex = pathIndexes.get(field.path) ?? 0;
+			applyFieldValueToControl(control, value[currentIndex]);
+			pathIndexes.set(field.path, currentIndex + 1);
+			continue;
+		}
+		applyFieldValueToControl(control, value);
+	}
+}
+const Form = defineComponent({
+	name: "Form",
+	inheritAttrs: false,
 	props: {
-		href: {
+		action: {
 			type: String,
 			required: false,
 			default: void 0
 		},
-		as: {
-			type: [String, Object],
-			default: "a"
-		},
 		method: {
 			type: String,
-			default: "GET"
-		},
-		data: {
-			type: Object,
-			default: () => ({})
-		},
-		external: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
+			default: "POST"
 		},
 		options: {
 			type: Object,
 			default: () => ({})
 		},
-		text: {
+		errorBag: {
 			type: String,
 			required: false,
 			default: void 0
 		},
-		preload: {
-			type: [Boolean, String],
-			default: false
-		},
-		preserveScroll: {
+		showProgress: {
 			type: Boolean,
+			required: false,
 			default: void 0
 		},
-		preserveState: {
+		disableWhileProcessing: {
 			type: Boolean,
-			default: void 0
+			default: false
+		},
+		resetOnSuccess: {
+			type: [Boolean, Array],
+			default: true
+		},
+		resetOnError: {
+			type: [Boolean, Array],
+			default: false
+		},
+		setDefaultOnSuccess: {
+			type: [Boolean, Array],
+			default: false
+		}
+	},
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const element = ref();
+		const form = useForm({
+			fields: {},
+			url: () => props.action ?? element.value?.action ?? window.location.href,
+			method: props.method,
+			errorBag: props.errorBag,
+			progress: props.showProgress,
+			resetOnSuccess: props.resetOnSuccess,
+			resetOnError: props.resetOnError,
+			setDefaultOnSuccess: props.setDefaultOnSuccess
+		});
+		function collectFormFields(submitter) {
+			if (!element.value) return {};
+			const formData = submitter ? new FormData(element.value, submitter) : new FormData(element.value);
+			const fields = {};
+			for (const [name, value] of formData.entries()) {
+				const { path, appendToArray } = normalizeFieldName(name);
+				if (!path.length) continue;
+				appendFieldValue(fields, path, value, appendToArray);
+			}
+			return fields;
+		}
+		function collectDefaultFormFields() {
+			if (!element.value) return {};
+			const fields = {};
+			for (const control of Array.from(element.value.elements)) {
+				const field = getControlFieldInfo(control);
+				if (!field) continue;
+				if (control instanceof HTMLInputElement) {
+					if (control.type === "file") continue;
+					if (control.type === "checkbox" || control.type === "radio") {
+						if (control.defaultChecked) appendFieldValue(fields, field.path, control.value, field.appendToArray);
+						continue;
+					}
+					appendFieldValue(fields, field.path, control.defaultValue, field.appendToArray);
+					continue;
+				}
+				if (control instanceof HTMLTextAreaElement) {
+					appendFieldValue(fields, field.path, control.defaultValue, field.appendToArray);
+					continue;
+				}
+				if (control instanceof HTMLSelectElement) {
+					if (control.multiple) {
+						for (const option of Array.from(control.options)) if (option.defaultSelected) appendFieldValue(fields, field.path, option.value, field.appendToArray);
+						continue;
+					}
+					const defaultOption = Array.from(control.options).find((option) => option.defaultSelected) ?? control.options.item(0);
+					if (defaultOption) appendFieldValue(fields, field.path, defaultOption.value, field.appendToArray);
+				}
+			}
+			return fields;
+		}
+		function syncDefaultsFromNativeControls() {
+			if (!element.value) return;
+			const defaultFields = collectDefaultFormFields();
+			const nextDefaults = {};
+			for (const control of Array.from(element.value.elements)) {
+				const field = getControlFieldInfo(control);
+				if (!field) continue;
+				nextDefaults[field.path] = get(defaultFields, field.path);
+			}
+			form.setDefault(nextDefaults);
+		}
+		function syncFields(fields) {
+			const target = form.fields;
+			Object.keys(target).forEach((key) => {
+				delete target[key];
+			});
+			Object.entries(fields).forEach(([key, value]) => {
+				target[key] = value;
+			});
+		}
+		function resetFields(...keys) {
+			if (!element.value) return;
+			if (keys.length === 0) element.value.reset();
+			else {
+				const keySet = new Set(keys);
+				for (const control of Array.from(element.value.elements)) {
+					const field = getControlFieldInfo(control);
+					if (!field || !keySet.has(field.path)) continue;
+					resetControlToDefault(control);
+				}
+			}
+			syncFields(collectFormFields());
+		}
+		function reset() {
+			form.resetSubmissionState();
+			form.clearErrors();
+			resetFields();
+		}
+		function submit(options, submitter) {
+			syncFields(collectFormFields(submitter));
+			syncDefaultsFromNativeControls();
+			const { hooks, ...rest } = merge({
+				errorBag: props.errorBag,
+				progress: props.showProgress,
+				resetOnSuccess: props.resetOnSuccess,
+				resetOnError: props.resetOnError,
+				setDefaultOnSuccess: props.setDefaultOnSuccess
+			}, {
+				...props.options,
+				...options
+			}, { mergePlainObjects: true });
+			const submitOptions = {
+				...rest,
+				hooks: {
+					...hooks,
+					"validation-error": (incoming, request, context) => {
+						nextTick(() => {
+							if (!element.value) return;
+							syncControlsFromFields(element.value, form.fields);
+						});
+						return hooks?.["validation-error"]?.(incoming, request, context);
+					},
+					success: (payload, request, response, context) => {
+						if (element.value && rest.setDefaultOnSuccess !== false) {
+							const selectedKeys = Array.isArray(rest.setDefaultOnSuccess) ? new Set(rest.setDefaultOnSuccess) : void 0;
+							setCurrentValuesAsDefaults(element.value, selectedKeys);
+							syncDefaultsFromNativeControls();
+						}
+						nextTick(() => {
+							if (!element.value) return;
+							syncControlsFromFields(element.value, form.fields);
+						});
+						return hooks?.success?.(payload, request, response, context);
+					}
+				}
+			};
+			return form.submit(submitOptions);
+		}
+		function onSubmit(event) {
+			event.preventDefault();
+			return submit(void 0, isSubmitterElement(event.submitter) ? event.submitter : void 0);
+		}
+		return () => h("form", {
+			...attrs,
+			ref: element,
+			action: props.action,
+			method: props.method,
+			inert: props.disableWhileProcessing && form.processing ? "" : void 0,
+			onSubmit
+		}, slots.default?.({
+			...form,
+			errors: form.errors,
+			getError: (key) => get(form.errors, key),
+			submit,
+			resetFields,
+			reset
+		}));
+	}
+});
+//#endregion
+//#region src/components/link.ts
+const RouterLink = defineComponent({
+	name: "RouterLink",
+	setup(_, { slots, attrs }) {
+		return (props) => {
+			let data = props.data ?? {};
+			const mode = props.mode;
+			const preserveScroll = props.preserveScroll;
+			const preserveState = props.preserveState;
+			const url = makeUrl(props.href ?? "");
+			const method = props.method?.toUpperCase() ?? "GET";
+			const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
+			if (method === "GET") {
+				debug.adapter("vue", "Moving data object to URL parameters.");
+				url.search = stringifyQueryString(merge(data, parseQueryString(url.search)), { arrayFormat: "indices" });
+				data = {};
+			}
+			if (as === "a" && method !== "GET") debug.adapter("vue", `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<RouterLink href="${url}" method="${method}" as="button">...</RouterLink>`);
+			return h(props.as, {
+				...attrs,
+				...as === "a" ? { href: url } : {},
+				...props.disabled ? { disabled: props.disabled } : {},
+				onAuxclick: (event) => {
+					if (props.disabled) event.preventDefault();
+				},
+				onClick: (event) => {
+					if (props.disabled) {
+						event.preventDefault();
+						return;
+					}
+					if (props.external) return;
+					if (!shouldIntercept(event)) return;
+					event.preventDefault();
+					router$1.navigate({
+						url,
+						data,
+						method,
+						mode,
+						preserveState: preserveState ?? (method !== "GET" ? true : void 0),
+						preserveScroll,
+						...props.options
+					});
+				}
+			}, slots.default ? slots : props.text);
+		};
+	},
+	props: {
+		href: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		as: {
+			type: [String, Object],
+			default: "a"
+		},
+		method: {
+			type: String,
+			default: "GET"
+		},
+		data: {
+			type: Object,
+			default: () => ({})
+		},
+		external: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		},
+		text: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		preload: {
+			type: [Boolean, String],
+			default: false
+		},
+		preserveScroll: {
+			type: Boolean,
+			default: void 0
+		},
+		preserveState: {
+			type: Boolean,
+			default: void 0
+		},
+		mode: {
+			type: String,
+			default: void 0
+		}
+	}
+});
+function shouldIntercept(event) {
+	const isLink = event.currentTarget.tagName.toLowerCase() === "a";
+	return !(event.target && (event?.target).isContentEditable || event.defaultPrevented || isLink && event.which > 1 || isLink && event.altKey || isLink && event.ctrlKey || isLink && event.metaKey || isLink && event.shiftKey);
+}
+//#endregion
+//#region src/components/when-visible.ts
+const WhenVisible = defineComponent({
+	name: "WhenVisible",
+	emits: { loading: (_state) => true },
+	props: {
+		as: {
+			type: String,
+			default: "div"
+		},
+		data: {
+			type: [String, Array],
+			required: true
+		},
+		buffer: {
+			type: Number,
+			default: 0
+		},
+		root: {
+			type: [String, Object],
+			default: null
+		},
+		once: {
+			type: Boolean,
+			default: true
+		},
+		fallbackOnHidden: {
+			type: Boolean,
+			default: false
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	slots: Object,
+	setup(properties, { emit, slots }) {
+		const isVisible = ref(false);
+		const element = ref(null);
+		const hasRan = ref(false);
+		let observer;
+		const { getSlotProps } = useLoadState(() => wrap(properties.data));
+		function registerObserver() {
+			observer?.disconnect();
+			const root = typeof properties.root === "string" ? document.querySelector(properties.root) : properties.root;
+			observer = new IntersectionObserver(([entry]) => isVisible.value = entry.isIntersecting, {
+				root,
+				rootMargin: `${properties.buffer}px 0px ${properties.buffer}px 0px`
+			});
+			if (element.value) observer.observe(element.value);
+		}
+		onMounted(() => {
+			registerObserver();
+			watch(() => [properties.buffer, properties.root], () => {
+				registerObserver();
+			});
+		});
+		onUnmounted(() => {
+			observer?.disconnect();
+		});
+		watch(isVisible, (visible) => {
+			if (hasRan.value && properties.once) return;
+			if (visible) {
+				emit("loading", getSlotProps());
+				router$1.reload({
+					...properties.options,
+					only: properties.data
+				});
+				hasRan.value = true;
+			}
+		});
+		return () => {
+			const slotProperties = getSlotProps();
+			const shouldRender = slotProperties.loaded && (isVisible.value || !properties.fallbackOnHidden);
+			return h(properties.as, { ref: element }, [shouldRender ? slots.default?.(slotProperties) : slots.fallback?.(slotProperties)]);
+		};
+	}
+});
+//#endregion
+//#region src/stores/dialog.ts
+const DEBUG_KEY = "vue:state:dialog";
+const dialogStore = {
+	state: {
+		component: shallowRef(),
+		properties: ref(),
+		key: ref(),
+		show: ref()
+	},
+	removeComponent() {
+		if (dialogStore.state.component.value) {
+			debug.adapter(DEBUG_KEY, "Removing dialog.");
+			dialogStore.state.component.value = void 0;
+		}
+	},
+	setComponent(component) {
+		debug.adapter(DEBUG_KEY, "Setting dialog component:", component);
+		dialogStore.state.component.value = component;
+	},
+	setProperties(properties) {
+		debug.adapter(DEBUG_KEY, "Setting dialog properties:", properties);
+		dialogStore.state.properties.value = unref(properties);
+	},
+	setKey(key) {
+		debug.adapter(DEBUG_KEY, "Setting dialog key:", {
+			new: key,
+			previous: dialogStore.state.key.value
+		});
+		dialogStore.state.key.value = unref(key);
+	},
+	show() {
+		if (!dialogStore.state.show.value) {
+			debug.adapter(DEBUG_KEY, "Showing the dialog.");
+			dialogStore.state.show.value = true;
+		}
+	},
+	hide() {
+		if (dialogStore.state.show.value) {
+			debug.adapter(DEBUG_KEY, "Hiding the dialog.");
+			dialogStore.state.show.value = false;
+		}
+	}
+};
+//#endregion
+//#region src/stores/mount.ts
+/**
+* These callbacks are run on the first stick after the view component is mounted.
+*/
+const onMountedCallbacks = [];
+//#endregion
+//#region src/components/wrapper.ts
+const wrapper = defineComponent({
+	name: "Hybridly",
+	setup() {
+		function renderLayout(view) {
+			debug.adapter("vue:render:layout", "Rendering layout.");
+			if (typeof state.view.value?.layout === "function") return state.view.value.layout(h, view, renderDialog(), {
+				...state.view.value?.properties ?? {},
+				...state.properties.value
+			});
+			if (Array.isArray(state.view.value?.layout)) return [state.view.value.layout.concat(view).reverse().reduce((child, layout) => {
+				layout.inheritAttrs = !!layout.inheritAttrs;
+				return h(layout, {
+					...state.view.value?.properties ?? {},
+					...state.properties.value
+				}, () => child);
+			}), renderDialog()];
+			return [h(state.view.value?.layout, {
+				...state.view.value?.properties ?? {},
+				...state.properties.value
+			}, () => view), renderDialog()];
+		}
+		function hijackOnMounted(component, type) {
+			if (!component) return;
+			const actual = component?.mounted;
+			component.mounted = () => {
+				actual?.();
+				nextTick(() => {
+					debug.adapter(`vue:render:${type}`, "Calling mounted callbacks.");
+					while (onMountedCallbacks.length) onMountedCallbacks.shift()?.();
+				});
+			};
+		}
+		function renderView() {
+			debug.adapter("vue:render:view", "Rendering view.");
+			state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
+			hijackOnMounted(state.view.value, "view");
+			return h(state.view.value, {
+				...state.properties.value,
+				key: state.viewKey.value
+			});
+		}
+		function renderDialog() {
+			if (dialogStore.state.component.value && dialogStore.state.properties.value) {
+				debug.adapter("vue:render:dialog", "Rendering dialog.");
+				hijackOnMounted(dialogStore.state.component.value, "dialog");
+				return h(dialogStore.state.component.value, {
+					...dialogStore.state.properties.value,
+					key: dialogStore.state.key.value
+				});
+			}
+		}
+		return (...a) => {
+			if (!state.view.value) return;
+			debug.adapter("vue:render:wrapper", "Rendering wrapper component.", a.map(toRaw));
+			const view = renderView();
+			if (state.view.value.layout) return renderLayout(view);
+			return [view, renderDialog()];
+		};
+	}
+});
+//#endregion
+//#region src/default-layout.ts
+function resolveDefaultLayout(layout) {
+	if (!layout) return;
+	if (Array.isArray(layout)) return layout;
+	if (typeof layout === "function" && layout.length === 0) return layout();
+	return layout;
+}
+function applyDefaultLayout(component, layout) {
+	if (!layout) return component;
+	const resolved = component;
+	if (resolved.layout === void 0) resolved.layout = layout;
+	return component;
+}
+//#endregion
+//#region src/devtools.ts
+const hybridlyStateType = "hybridly";
+const hybridlyEventsTimelineLayerId = "Hybridly";
+function setupDevtools(app) {
+	setupDevtoolsPlugin({
+		id: "hybridly",
+		label: "Hybridly",
+		packageName: "@hybridly/vue",
+		homepage: "https://github.com/hybridly",
+		app,
+		enableEarlyProxy: true,
+		componentStateTypes: [hybridlyStateType]
+	}, (api) => {
+		api.on.inspectComponent((payload) => {
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "properties",
+				value: state.context.value?.view.properties,
+				editable: true
+			});
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "validation",
+				value: state.context.value?.validation
+			});
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "component",
+				value: state.context.value?.view.component
+			});
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "deferred",
+				value: state.context.value?.view.deferred
+			});
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "dialog",
+				value: state.context.value?.dialog
+			});
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "version",
+				value: state.context.value?.version
+			});
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "url",
+				value: state.context.value?.url
+			});
+			payload.instanceData.state.push({
+				type: hybridlyStateType,
+				key: "routing",
+				value: state.context.value?.routing
+			});
+		});
+		api.on.editComponentState((payload) => {
+			if (payload.type === hybridlyStateType) payload.set(state.context.value?.view);
+		});
+		api.addTimelineLayer({
+			id: hybridlyEventsTimelineLayerId,
+			color: 16501221,
+			label: "Hybridly"
+		});
+		const listen = [
+			"start",
+			"ready",
+			"data",
+			"navigating",
+			"navigated",
+			"progress",
+			"validation-error",
+			"abort",
+			"success",
+			"invalid",
+			"exception",
+			"fail",
+			"after",
+			"backForward",
+			"success"
+		];
+		registerHook$1("before", (options) => {
+			const groupId = (Math.random() + 1).toString(36).substring(7);
+			api.addTimelineEvent({
+				layerId: hybridlyEventsTimelineLayerId,
+				event: {
+					groupId,
+					title: "before",
+					time: api.now(),
+					data: options
+				}
+			});
+			listen.forEach((event) => registerHook$1(event, (data) => {
+				api.addTimelineEvent({
+					layerId: hybridlyEventsTimelineLayerId,
+					event: {
+						groupId,
+						title: event,
+						time: api.now(),
+						data
+					}
+				});
+				if (event === "after") setTimeout(() => {
+					api.notifyComponentUpdate();
+				}, 100);
+			}, { once: true }));
+		});
+	});
+}
+const devtools = { install(app) {
+	if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) setupDevtools(app);
+} };
+//#endregion
+//#region src/plugins/progress.ts
+/**
+* A plugin to display a progress bar.
+*/
+function progress(options) {
+	const resolved = {
+		delay: 250,
+		color: "#29d",
+		includeCSS: true,
+		spinner: false,
+		...options
+	};
+	let timeout;
+	function startProgress() {
+		nprogress.done();
+		nprogress.remove();
+		nprogress.start();
+	}
+	function finishProgress() {
+		if (nprogress.isStarted()) {
+			nprogress.done(true);
+			setTimeout(() => nprogress.remove(), 1e3);
+		}
+		clearTimeout(timeout);
+	}
+	return definePlugin({
+		name: "hybridly:progress",
+		initialized() {
+			nprogress.configure({ showSpinner: resolved.spinner });
+			if (resolved.includeCSS) injectCSS(resolved.color);
+		},
+		start: (request) => {
+			if (request.options.progress === false) return;
+			clearTimeout(timeout);
+			timeout = setTimeout(() => startProgress(), resolved.delay);
+		},
+		progress: (progress) => {
+			if (nprogress.isStarted() && progress.percentage) nprogress.set(Math.max(nprogress.status, progress.percentage / 100 * .9));
+		},
+		after: () => finishProgress()
+	});
+}
+function injectCSS(color) {
+	const element = document.createElement("style");
+	element.textContent = `
+    #nprogress {
+      pointer-events: none;
+			--progress-color: ${color};
+    }
+    #nprogress .bar {
+      background: var(--progress-color);
+      position: fixed;
+      z-index: 1031;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+    #nprogress .peg {
+      display: block;
+      position: absolute;
+      right: 0px;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px var(--progress-color), 0 0 5px var(--progress-color);
+      opacity: 1.0;
+      -webkit-transform: rotate(3deg) translate(0px, -4px);
+          -ms-transform: rotate(3deg) translate(0px, -4px);
+              transform: rotate(3deg) translate(0px, -4px);
+    }
+    #nprogress .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+    #nprogress .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: var(--progress-color);
+      border-left-color: var(--progress-color);
+      border-radius: 50%;
+      -webkit-animation: nprogress-spinner 400ms linear infinite;
+              animation: nprogress-spinner 400ms linear infinite;
+    }
+    .nprogress-custom-parent {
+      overflow: hidden;
+      position: relative;
+    }
+    .nprogress-custom-parent #nprogress .spinner,
+    .nprogress-custom-parent #nprogress .bar {
+      position: absolute;
+    }
+    @-webkit-keyframes nprogress-spinner {
+      0%   { -webkit-transform: rotate(0deg); }
+      100% { -webkit-transform: rotate(360deg); }
+    }
+    @keyframes nprogress-spinner {
+      0%   { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+	document.head.appendChild(element);
+}
+//#endregion
+//#region src/plugins/view-transition.ts
+function viewTransition() {
+	if (!document.startViewTransition) return { name: "view-transition" };
+	let domUpdated;
+	return {
+		name: "view-transition",
+		navigating: async ({ type, hasDialog, viewTransition }) => {
+			if (type === "initial" || hasDialog || viewTransition === false) return;
+			return new Promise((confirmTransitionStarted) => document.startViewTransition({
+				update: () => {
+					confirmTransitionStarted(true);
+					return new Promise((resolve) => domUpdated = resolve);
+				},
+				types: getViewTransitionType(viewTransition)
+			}));
+		},
+		mounted: () => {
+			domUpdated?.();
+			domUpdated = void 0;
+		},
+		navigated: () => {
+			domUpdated?.();
+			domUpdated = void 0;
+		}
+	};
+}
+function getViewTransitionType(viewTransition) {
+	if (viewTransition === false || viewTransition === void 0 || viewTransition === true) return null;
+	if (Array.isArray(viewTransition)) return viewTransition;
+	return [viewTransition];
+}
+//#endregion
+//#region src/initialize.ts
+/**
+* Initializes Hybridly's router and context.
+*/
+async function initializeHybridly(options = {}) {
+	const resolved = options;
+	const { element, payload, resolve } = prepare(resolved);
+	if (!element) throw new Error("Could not find an HTML element to initialize Vue on.");
+	state.setContext(await createRouter({
+		http: resolved.http,
+		plugins: resolved.plugins,
+		serializer: resolved.serializer,
+		responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
+		routing: resolved.routing,
+		adapter: {
+			resolveComponent: resolve,
+			executeOnMounted: (callback) => {
+				onMountedCallbacks.push(callback);
+			},
+			onDialogClose: async () => {
+				dialogStore.hide();
+			},
+			onContextUpdate: (context) => {
+				state.setContext(context);
+			},
+			onPropertiesUpdate: (properties) => {
+				state.setProperties(properties);
+			},
+			onViewSwap: async (options) => {
+				if (options.component) {
+					onMountedCallbacks.push(() => options.onMounted?.({ isDialog: false }));
+					state.setView(options.component);
+				}
+				state.setProperties(options.properties);
+				if (!options.preserveState && !options.dialog) state.setViewKey(random());
+				if (options.dialog) {
+					onMountedCallbacks.push(() => options.onMounted?.({ isDialog: true }));
+					dialogStore.setComponent(await resolve(options.dialog.component));
+					dialogStore.setProperties(options.dialog.properties);
+					dialogStore.setKey(options.dialog.key);
+					dialogStore.show();
+				} else dialogStore.hide();
+			}
+		},
+		payload
+	}));
+	const render = () => h(wrapper);
+	if (options.setup) return await options.setup({
+		element,
+		wrapper,
+		render,
+		hybridly: devtools,
+		props: { context: state.context.value },
+		payload
+	});
+	const app = createApp({ render });
+	if (resolved.devtools !== false) app.use(devtools);
+	await options.enhanceVue?.(app, payload);
+	return app.mount(element);
+}
+function prepare(options) {
+	debug.adapter("vue", "Preparing Hybridly with options:", options);
+	const isServer = typeof window === "undefined";
+	const id = options.id ?? "root";
+	const element = document?.getElementById(id) ?? void 0;
+	debug.adapter("vue", `Element "${id}" is:`, element);
+	const payload = element?.dataset.payload ? JSON.parse(element.dataset.payload) : void 0;
+	if (!payload) throw new Error("No payload found. Are you using the `@hybridly` directive?");
+	if (options.cleanup !== false) delete element.dataset.payload;
+	debug.adapter("vue", "Resolved:", {
+		isServer,
+		element,
+		payload
+	});
+	const resolve = async (name) => {
+		debug.adapter("vue", "Resolving component", name);
+		if (!options.imported) throw new Error("No component loaded. Did you initialize Hybridly? Does `php artisan hybridly:config` return an error?");
+		return await resolveViewComponent(name, options);
+	};
+	options.plugins ??= [];
+	if (options.progress !== false) options.plugins.push(progress(typeof options.progress === "object" ? options.progress : {}));
+	if (options.viewTransition !== false) options.plugins.push(viewTransition());
+	if (options.defaultFormOptions) formStore.setDefaultConfig(options.defaultFormOptions);
+	options.layout = resolveDefaultLayout(options.layout);
+	return {
+		isServer,
+		element,
+		payload,
+		resolve
+	};
+}
+/**
+* Resolves a view by its name.
+*/
+async function resolveViewComponent(name, options) {
+	const components = options.imported;
+	const result = options.components.views.find((view) => name === view.identifier);
+	const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path) => result ? path.endsWith(result?.path) : false);
+	if (!result || !path) {
+		console.warn(`View component [${name}] not found. Available components: `, options.components.views.map(({ identifier }) => identifier));
+		showViewComponentErrorModal(name);
+		return;
+	}
+	let component = typeof components[path] === "function" ? await components[path]() : components[path];
+	component = component.default ?? component;
+	component = applyDefaultLayout(component, options.layout);
+	return component;
+}
+//#endregion
+//#region src/composables/back-forward.ts
+function useBackForward(options) {
+	const callbacks = [];
+	registerHook$1("navigated", (options) => {
+		if (options.type === "back-forward") {
+			callbacks.forEach((fn) => fn(state.context.value));
+			callbacks.splice(0, callbacks.length);
+		}
+	});
+	/**
+	* Applies the given callback on back-forward navigations.
+	*/
+	function onBackForward(fn) {
+		callbacks.push(fn);
+	}
+	/**
+	* Reloads the page on back-forward navigations.
+	*/
+	function reloadOnBackForward(options) {
+		onBackForward(() => router$1.reload(options));
+	}
+	if (options?.reload) reloadOnBackForward(options.reload === true ? void 0 : options.reload);
+	return {
+		onBackForward,
+		reloadOnBackForward
+	};
+}
+//#endregion
+//#region src/composables/bulk-select.ts
+/**
+* Returns the inclusive range between two records in the given order.
+*
+* This is useful for implementing shift-click bulk selection: keep track of the last selected anchor,
+* then pass the currently visible record identifiers and the clicked target identifier to this helper.
+* If the target is not in the list, an empty range is returned. If the anchor is missing, only the target is returned.
+*/
+function getBulkSelectionRange(records, anchor, target) {
+	const targetIndex = records.indexOf(target);
+	if (targetIndex === -1) return [];
+	if (anchor === void 0) return [target];
+	const anchorIndex = records.indexOf(anchor);
+	if (anchorIndex === -1) return [target];
+	return records.slice(Math.min(anchorIndex, targetIndex), Math.max(anchorIndex, targetIndex) + 1);
+}
+function useBulkSelect() {
+	const selection = ref({
+		all: false,
+		only: /* @__PURE__ */ new Set(),
+		except: /* @__PURE__ */ new Set()
+	});
+	/**
+	* Toggles selection for all records.
+	*/
+	function toggleAll(force) {
+		if (!selection.value.all || force === true) selectAll();
+		else deselectAll();
+	}
+	/**
+	* Selects all records.
+	*/
+	function selectAll() {
+		selection.value.all = true;
+		selection.value.only.clear();
+		selection.value.except.clear();
+	}
+	/**
+	* Deselects all records.
+	*/
+	function deselectAll() {
+		selection.value.all = false;
+		selection.value.only.clear();
+		selection.value.except.clear();
+	}
+	/**
+	* Selects the given records.
+	*/
+	function select(...records) {
+		records.forEach((record) => selection.value.except.delete(record));
+		records.forEach((record) => selection.value.only.add(record));
+	}
+	/**
+	* Deselects the given records.
+	*/
+	function deselect(...records) {
+		records.forEach((record) => selection.value.except.add(record));
+		records.forEach((record) => selection.value.only.delete(record));
+	}
+	/**
+	* Toggles selection for the given records.
+	*/
+	function toggle(record, force) {
+		if (selected(record) || force === false) return deselect(record);
+		if (!selected(record) || force === true) return select(record);
+	}
+	/**
+	* Checks whether the given record is selected.
+	*/
+	function selected(record) {
+		if (selection.value.all) return !selection.value.except.has(record);
+		return selection.value.only.has(record);
+	}
+	/**
+	* Checks whether all records are selected.
+	*/
+	const allSelected = computed(() => {
+		return selection.value.all && selection.value.except.size === 0;
+	});
+	/**
+	* Checks whether any record is selected.
+	*/
+	const anySelected = computed(() => {
+		return selection.value.all || selection.value.only.size > 0;
+	});
+	/**
+	* Binds a checkbox's properties.
+	*/
+	function bindCheckbox(key) {
+		return {
+			onChange: (event) => {
+				const target = event.target;
+				if (target.checked) select(target.value);
+				else deselect(target.value);
+			},
+			checked: selected(key),
+			value: key
+		};
+	}
+	return {
+		allSelected,
+		anySelected,
+		toggleAll,
+		selectAll,
+		deselectAll,
+		select,
+		deselect,
+		toggle,
+		selected,
+		selection,
+		bindCheckbox
+	};
+}
+//#endregion
+//#region src/composables/register-hook.ts
+/**
+* Registers a global hook.
+* If called inside a component, unregisters after the component is unmounted.
+*/
+const registerHook = (hook, fn, options) => {
+	const unregister = registerHook$1(hook, fn, options);
+	if (getCurrentInstance()) onUnmounted(() => unregister());
+	return unregister;
+};
+//#endregion
+//#region src/composables/current-route.ts
+const isNavigating = ref(false);
+function useRoute() {
+	const current = ref(router$1.current());
+	function matches(name, parameters) {
+		return router$1.matches(toValue(name), parameters);
+	}
+	registerHook("before", () => isNavigating.value = true);
+	registerHook("after", () => isNavigating.value = false);
+	registerHook("navigated", () => {
+		current.value = router$1.current();
+	});
+	return {
+		isNavigating: readonly(isNavigating),
+		current: readonly(current),
+		matches
+	};
+}
+//#endregion
+//#region src/composables/dialog.ts
+/**
+* Exposes utilities related to the dialogs.
+*/
+function useDialog() {
+	return {
+		close: () => router$1.dialog.close(),
+		closeLocally: () => router$1.dialog.close({ local: true }),
+		unmount: () => dialogStore.removeComponent(),
+		show: computed({
+			get: () => dialogStore.state.show.value,
+			set: (v) => !v ? router$1.dialog.close({ local: true }) : null
+		}),
+		properties: computed(() => state.context.value?.dialog?.properties)
+	};
+}
+//#endregion
+//#region src/composables/history.ts
+/**
+* Returns a ref with a value saved in the history state through Hybridly.
+* The state is linked to a specific browser history entry.
+*/
+function useHistoryState(key, initial) {
+	const value = ref(router$1.history.get(key) ?? initial);
+	watch(value, (value) => {
+		router$1.history.remember(key, toRaw(value));
+	}, {
+		immediate: true,
+		deep: true
+	});
+	return value;
+}
+//#endregion
+//#region ../hybridly/src/index.ts
+var src_exports = /* @__PURE__ */ __exportAll({});
+import * as import__hybridly_core from "@hybridly/core";
+__reExport(src_exports, import__hybridly_core);
+//#endregion
+//#region src/composables/paginator.ts
+function createPaginator(paginator, defaultOptions) {
+	const isPaginator = (p) => {
+		return "links" in p && "meta" in p && "last_page" in p.meta;
+	};
+	if (isPaginator(paginator)) return {
+		...paginator,
+		to: (page, options) => {
+			const link = paginator.links.find((l) => l.page === page);
+			if (link?.url) return src_exports.router.get(link.url, {
+				preserveState: true,
+				...defaultOptions,
+				...options
+			});
 		}
-	}
-});
-function shouldIntercept(event) {
-	const isLink = event.currentTarget.tagName.toLowerCase() === "a";
-	return !(event.target && (event?.target).isContentEditable || event.defaultPrevented || isLink && event.which > 1 || isLink && event.altKey || isLink && event.ctrlKey || isLink && event.metaKey || isLink && event.shiftKey);
+	};
+	return paginator;
 }
-
 //#endregion
 //#region src/utils.ts
 /**
@@ -662,7 +1628,6 @@ function toReactive(objectRef) {
 		}
 	}));
 }
-
 //#endregion
 //#region src/composables/property.ts
 /** Accesses all current properties. */
@@ -671,7 +1636,7 @@ function useProperties() {
 }
 /** Accesses a property with a dot notation. */
 function useProperty(path) {
-	return computed(() => getByPath(state.properties.value, path));
+	return computed(() => get(state.properties.value, path));
 }
 /**
 * Sets the property at the given path to the given value.
@@ -679,338 +1644,144 @@ function useProperty(path) {
 */
 function setProperty(path, value) {
 	if (!state.properties.value) return;
-	setByPath(state.properties.value, path, toValue(value));
-	if (state.context.value?.view.properties) setByPath(state.context.value.view.properties, path, toValue(value));
-}
-
-//#endregion
-//#region src/composables/form.ts
-function safeClone(obj) {
-	return clone(toRaw(obj));
-}
-function useForm(options) {
-	const shouldRemember = !!options.key;
-	const historyKey = options.key ?? "form:default";
-	const historyData = shouldRemember ? router$1.history.get(historyKey) : void 0;
-	const timeoutIds = {
-		recentlyFailed: void 0,
-		recentlySuccessful: void 0
-	};
-	/** Fields that were initially set up. */
-	const initial = safeClone(options.fields);
-	/** Fields as they were when loaded. */
-	const loaded = safeClone(historyData?.fields ?? options.fields);
-	/** Current fields. */
-	const fields = reactive(safeClone(loaded));
-	/** Validation errors for each field. */
-	const errors = ref(historyData?.errors ?? {});
-	/** Whether the form is dirty. */
-	const isDirty = ref(false);
-	/** Whether the submission was recently successful. */
-	const recentlySuccessful = ref(false);
-	/** Whether the submission is successful. */
-	const successful = ref(false);
-	/** Whether the submission was recently failed. */
-	const recentlyFailed = ref(false);
-	/** Whether the submission is failed. */
-	const failed = ref(false);
-	/** Whether the submission is being processed. */
-	const processing = ref(false);
-	/** The current request's progress. */
-	const progress = ref();
-	/**
-	* Sets new initial values for the form, so subsequent resets will use thse values.
-	*/
-	function setInitial(newInitial) {
-		Object.entries(newInitial).forEach(([key, value]) => {
-			Reflect.set(initial, key, safeClone(value));
-		});
-	}
-	/**
-	* Resets the form's failed and successful flags.
-	*/
-	function resetSubmissionState() {
-		successful.value = false;
-		failed.value = false;
-		recentlyFailed.value = false;
-		recentlySuccessful.value = false;
-		clearTimeout(timeoutIds.recentlySuccessful);
-		clearTimeout(timeoutIds.recentlyFailed);
-		progress.value = void 0;
-	}
-	/**
-	* Resets the fields, errors and submission state.
-	*/
-	function reset() {
-		resetSubmissionState();
-		clearErrors();
-		resetFields();
-	}
-	/**
-	* Resets the fields to their initial values.
-	*/
-	function resetFields(...keys) {
-		if (keys.length === 0) keys = Object.keys(fields);
-		keys.forEach((key) => {
-			Reflect.set(fields, key, safeClone(Reflect.get(initial, key)));
-		});
-	}
-	/**
-	* Clear the form fields.
-	*/
-	function clear(...keys) {
-		if (keys.length === 0) keys = Object.keys(fields);
-		keys.forEach((key) => {
-			delete fields[key];
-		});
-	}
-	/**
-	* Submits the form.
-	*/
-	function submit(optionsOverrides) {
-		const { fields: _f, key: _k, ...optionsWithoutFields } = options;
-		const resolvedOptions = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
-		const optionsWithOverrides = merge(formStore.getDefaultConfig(), resolvedOptions, { mergePlainObjects: true });
-		const url = typeof optionsWithOverrides.url === "function" ? optionsWithOverrides.url() : optionsWithOverrides.url;
-		const data = typeof optionsWithOverrides.transform === "function" ? optionsWithOverrides.transform(fields) : fields;
-		const preserveState = optionsWithOverrides.preserveState ?? optionsWithOverrides.method !== "GET";
-		const hooks = optionsWithOverrides.hooks ?? {};
-		return router$1.navigate({
-			...optionsWithOverrides,
-			url: url ?? state.context.value?.url,
-			method: optionsWithOverrides.method ?? "POST",
-			data: safeClone(data),
-			preserveState,
-			hooks: {
-				before: (navigation, context) => {
-					resetSubmissionState();
-					return hooks.before?.(navigation, context);
-				},
-				start: (context) => {
-					processing.value = true;
-					return hooks.start?.(context);
-				},
-				progress: (incoming, context) => {
-					progress.value = incoming;
-					return hooks.progress?.(incoming, context);
-				},
-				error: (incoming, context) => {
-					setErrors(incoming);
-					failed.value = true;
-					recentlyFailed.value = true;
-					timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, optionsWithOverrides.timeout ?? 5e3);
-					return hooks.error?.(incoming, context);
-				},
-				success: (payload, context) => {
-					clearErrors();
-					if (optionsWithOverrides.updateInitials) setInitial(fields);
-					if (optionsWithOverrides.reset !== false) resetFields();
-					successful.value = true;
-					recentlySuccessful.value = true;
-					timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, optionsWithOverrides.timeout ?? 5e3);
-					return hooks.success?.(payload, context);
-				},
-				after: (context) => {
-					progress.value = void 0;
-					processing.value = false;
-					return hooks.after?.(context);
-				}
-			}
-		});
-	}
-	/**
-	* Clears all errors.
-	*/
-	function clearErrors(...keys) {
-		if (keys.length === 0) keys = Object.keys(fields);
-		keys.forEach((key) => {
-			clearError(key);
-		});
-	}
-	/**
-	* Checks if the given keys are dirty in the form.
-	*/
-	function hasDirty(...keys) {
-		if (keys.length === 0) return isDirty.value;
-		return keys.some((key) => !isEqual(toRaw(getByPath(fields, key)), toRaw(getByPath(initial, key))));
-	}
-	/**
-	* Clears the given field's error.
-	*/
-	function clearError(key) {
-		unsetPropertyAtPath(errors.value, key);
-	}
-	/**
-	* Sets current errors.
-	*/
-	function setErrors(incoming) {
-		clearErrors();
-		Object.entries(incoming).forEach(([path, value]) => {
-			setValueAtPath(errors.value, path, value);
-		});
-	}
-	/**
-	* Aborts the submission.
-	*/
-	function abort() {
-		router$1.abort();
-	}
-	watch([
-		fields,
-		processing,
-		errors
-	], () => {
-		isDirty.value = !isEqual(toRaw(initial), toRaw(fields));
-		if (shouldRemember) router$1.history.remember(historyKey, {
-			fields: toRaw(fields),
-			errors: toRaw(errors.value)
-		});
-	}, {
-		deep: true,
-		immediate: true
-	});
-	return reactive({
-		resetFields,
-		reset,
-		resetSubmissionState,
-		clear,
-		fields,
-		abort,
-		setErrors,
-		clearErrors,
-		clearError,
-		setInitial,
-		hasDirty,
-		submitWith: submit,
-		submitWithOptions: submit,
-		submit: () => submit(),
-		hasErrors: computed(() => Object.values(errors.value ?? {}).length > 0),
-		initial,
-		loaded,
-		progress,
-		isDirty,
-		errors,
-		processing,
-		successful,
-		failed,
-		recentlySuccessful,
-		recentlyFailed
-	});
+	set(state.properties.value, path, toValue(value));
+	if (state.context.value?.view.properties) set(state.context.value.view.properties, path, toValue(value));
 }
-
 //#endregion
-//#region src/composables/history.ts
+//#region src/composables/query-parameters.ts
 /**
-* Returns a ref with a value saved in the history state through Hybridly.
-* The state is linked to a specific browser history entry.
+* Access reactive query parameters.
+*
+* @see https://hybridly.dev/api/utils/use-query-parameters.html
 */
-function useHistoryState(key, initial) {
-	const value = ref(router$1.history.get(key) ?? initial);
-	watch(value, (value) => {
-		router$1.history.remember(key, toRaw(value));
-	}, {
-		immediate: true,
-		deep: true
-	});
-	return value;
-}
-
-//#endregion
-//#region src/composables/back-forward.ts
-function useBackForward(options) {
-	const callbacks = [];
-	registerHook$1("navigated", (options) => {
-		if (options.type === "back-forward") {
-			callbacks.forEach((fn) => fn(state.context.value));
-			callbacks.splice(0, callbacks.length);
+function useQueryParameters() {
+	const state = reactive({});
+	function updateState() {
+		const params = parseQueryString(window.location.search);
+		const unusedKeys = new Set(Object.keys(state));
+		for (const [key, value] of Object.entries(params)) {
+			state[key] = value;
+			unusedKeys.delete(key);
 		}
-	});
-	/**
-	* Applies the given callback on back-forward navigations.
-	*/
-	function onBackForward(fn) {
-		callbacks.push(fn);
-	}
-	/**
-	* Reloads the page on back-forward navigations.
-	*/
-	function reloadOnBackForward(options) {
-		onBackForward(() => router$1.reload(options));
+		Array.from(unusedKeys).forEach((key) => delete state[key]);
 	}
-	if (options?.reload) reloadOnBackForward(options.reload === true ? void 0 : options.reload);
-	return {
-		onBackForward,
-		reloadOnBackForward
-	};
+	updateState();
+	registerHook$1("navigated", updateState);
+	return state;
 }
-
-//#endregion
-//#region ../hybridly/src/index.ts
-var src_exports = {};
-import * as import__hybridly_core from "@hybridly/core";
-__reExport(src_exports, import__hybridly_core);
-
-//#endregion
-//#region src/composables/paginator.ts
-function createPaginator(paginator, options) {
-	const isPaginator = (p) => {
-		return "links" in p && "meta" in p && "last_page" in p.meta;
-	};
-	if (isPaginator(paginator)) return {
-		...paginator,
-		to: (page) => {
-			const link = paginator.links.find((l) => l.page === page);
-			if (link?.url) return src_exports.router.get(link.url, options);
-		}
+/**
+* Makes the specified query parameter reactive.
+*
+* @see https://hybridly.dev/api/utils/use-query-parameter.html
+*/
+function useQueryParameter(name, options = {}) {
+	const query = useQueryParameters();
+	const transform = (value) => {
+		if (options.transform === "bool") return value === true || value === "true" || value === "1" || value === "yes";
+		else if (options.transform === "number") return Number(value);
+		else if (options.transform === "string") return String(value);
+		else if (options.transform === "date") return new Date(value);
+		else if (typeof options.transform === "function") return options.transform(value);
+		return value;
 	};
-	return paginator;
+	const value = ref();
+	watch(query, () => {
+		value.value = transform(query[name] ?? toValue(options.defaultValue));
+	}, {
+		deep: true,
+		immediate: true
+	});
+	return value;
 }
-
 //#endregion
-//#region src/composables/register-hook.ts
+//#region src/composables/refinements.ts
 /**
-* Registers a global hook.
-* If called inside a component, unregisters after the component is unmounted.
+* Checks whether the given filter is a text filter, and narrows its type.
 */
-const registerHook = (hook, fn, options) => {
-	const unregister = registerHook$1(hook, fn, options);
-	if (getCurrentInstance()) onUnmounted(() => unregister());
-	return unregister;
-};
-
-//#endregion
-//#region src/composables/dialog.ts
+function isTextFilter(filter) {
+	return filter.type === "text";
+}
 /**
-* Exposes utilities related to the dialogs.
+* Checks whether the given filter is a date filter, and narrows its type.
 */
-function useDialog() {
-	return {
-		close: () => router$1.dialog.close(),
-		closeLocally: () => router$1.dialog.close({ local: true }),
-		unmount: () => dialogStore.removeComponent(),
-		show: computed({
-			get: () => dialogStore.state.show.value,
-			set: (v) => !v ? router$1.dialog.close({ local: true }) : null
-		}),
-		properties: computed(() => state.context.value?.dialog?.properties)
-	};
+function isDateFilter(filter) {
+	return filter.type === "date";
 }
-
-//#endregion
-//#region src/composables/refinements.ts
-function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
-	const refinements = computed(() => properties[refinementsKeys]);
+/**
+* Checks whether the given filter is a select filter, and narrows its type.
+*/
+function isSelectFilter(filter) {
+	return filter.type === "select";
+}
+/**
+* Checks whether the given filter is a ternary filter, and narrows its type.
+*/
+function isTernaryFilter(filter) {
+	return filter.type === "ternary";
+}
+/**
+* Checks whether the given filter is a boolean filter, and narrows its type.
+*/
+function isBooleanFilter(filter) {
+	return filter.type === "boolean";
+}
+/**
+* Checks whether the given filter is a trashed filter, and narrows its type.
+*/
+function isTrashedFilter(filter) {
+	return filter.type === "trashed";
+}
+/**
+* Checks whether the given filter is a callback filter, and narrows its type.
+*/
+function isCallbackFilter(filter) {
+	return filter.type === "callback" || ![
+		"text",
+		"select",
+		"ternary",
+		"boolean",
+		"trashed"
+	].includes(filter.type);
+}
+function useRefinements(input, defaultOptions = {}) {
+	const refinements = computed(() => toValue(input));
 	const sortsKey = computed(() => refinements.value.keys.sorts);
 	const filtersKey = computed(() => refinements.value.keys.filters);
 	defaultOptions = {
 		replace: false,
+		group: "refining",
+		interruptAsyncOnStart: "same-group",
+		reset: "*",
 		...defaultOptions
 	};
+	const sorts = computed(() => {
+		return refinements.value.sorts.map((sort) => ({
+			...sort,
+			toggle: (options) => toggleSort(sort.name, options),
+			isSorting: (direction) => isSorting(sort.name, direction),
+			clear: (options) => clearSorts(options)
+		}));
+	});
+	const filters = computed(() => {
+		return refinements.value.filters.map((filter) => ({
+			...filter,
+			apply: (value, options) => applyFilter(filter.name, value, options),
+			clear: (options) => clearFilter(filter.name, options),
+			search: (query, options) => searchFilter(filter.name, query, options),
+			isSelectFilter: () => isSelectFilter(filter),
+			isDateFilter: () => isDateFilter(filter),
+			isSearchFilter: () => isTextFilter(filter),
+			isTernaryFilter: () => isTernaryFilter(filter),
+			isBooleanFilter: () => isBooleanFilter(filter),
+			isTrashedFilter: () => isTrashedFilter(filter),
+			isCallbackFilter: () => isCallbackFilter(filter)
+		}));
+	});
 	function getSort(name) {
-		return refinements.value.sorts.find((sort) => sort.name === name);
+		return sorts.value.find((sort) => sort.name === name);
 	}
 	function getFilter(name) {
-		return refinements.value.filters.find((sort) => sort.name === name);
+		return filters.value.find((sort) => sort.name === name);
 	}
 	async function reset(options = {}) {
 		return await router$1.reload({
@@ -1036,17 +1807,40 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 			data: { [filtersKey.value]: { [filter]: void 0 } }
 		});
 	}
+	async function searchFilter(name, query, options = {}) {
+		if (!getFilter(name)) {
+			console.warn(`[Refinement] Filter "${name}" does not exist.`);
+			return;
+		}
+		if (["", null].includes(query?.toString() || null)) query = void 0;
+		return await router$1.reload({
+			...defaultOptions,
+			...options,
+			data: { [filtersKey.value]: { [name]: { search: query } } }
+		});
+	}
 	async function applyFilter(name, value, options = {}) {
 		const filter = getFilter(name);
 		if (!filter) {
 			console.warn(`[Refinement] Filter "${name}" does not exist.`);
 			return;
 		}
-		if (["", null].includes(value) || value === filter.default) value = void 0;
+		if (["", null].includes(value) || filter.has_default && isEqual(value, filter.default)) value = void 0;
+		const operator = (() => {
+			const operator = options.operator ?? filter.operator;
+			if (operator === filter.default_operator) return;
+			return operator;
+		})();
 		return await router$1.reload({
+			progress: true,
 			...defaultOptions,
 			...options,
-			data: { [filtersKey.value]: { [name]: value } }
+			data: { [filtersKey.value]: { [name]: {
+				value,
+				search: void 0,
+				operator,
+				options: options.options ?? void 0
+			} } }
 		});
 	}
 	async function clearSorts(options = {}) {
@@ -1094,15 +1888,15 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 		const _proxy = ref(getFilterValue());
 		let filterIsBeingApplied = false;
 		let proxyIsBeingUpdated = false;
-		const debouncedApplyFilter = debounce(options.debounce ?? 250, async (value) => {
+		const debouncedApplyFilter = debounce(async (value) => {
 			await applyFilter(name, transform(value), options);
 			nextTick(() => filterIsBeingApplied = false);
-		});
-		const debounceUpdateProxyValue = debounce(options.syncDebounce ?? 250, () => {
+		}, options.debounce ?? 250);
+		const debounceUpdateProxyValue = debounce(() => {
 			const filter = refinements.value.filters.find((f) => f.name === name);
 			if (filter) _proxy.value = transform(filter?.value);
 			nextTick(() => proxyIsBeingUpdated = false);
-		}, { atBegin: true });
+		}, options.syncDebounce ?? 250, { edges: ["leading"] });
 		watch(() => refinements.value.filters.find((f) => f.name === name)?.value, () => {
 			if (filterIsBeingApplied === true) return;
 			proxyIsBeingUpdated = true;
@@ -1117,18 +1911,10 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 	}
 	return {
 		bindFilter,
-		filters: toReactive(refinements.value.filters.map((filter) => ({
-			...filter,
-			apply: (value, options) => applyFilter(filter.name, value, options),
-			clear: (options) => clearFilter(filter.name, options)
-		}))),
-		sorts: toReactive(refinements.value.sorts.map((sort) => ({
-			...sort,
-			toggle: (options) => toggleSort(sort.name, options),
-			isSorting: (direction) => isSorting(sort.name, direction),
-			clear: (options) => clearSorts(options)
-		}))),
+		filters,
+		sorts,
 		filtersKey,
+		sortsKey,
 		getFilter,
 		getSort,
 		reset,
@@ -1143,176 +1929,26 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 		applyFilter
 	};
 }
-
-//#endregion
-//#region src/composables/current-route.ts
-const isNavigating = ref(false);
-function useRoute() {
-	const current = ref(router$1.current());
-	function matches(name, parameters) {
-		return router$1.matches(toValue(name), parameters);
-	}
-	registerHook("before", () => isNavigating.value = true);
-	registerHook("after", () => isNavigating.value = false);
-	registerHook("navigated", () => {
-		current.value = router$1.current();
-	});
-	return {
-		isNavigating: readonly(isNavigating),
-		current: readonly(current),
-		matches
-	};
-}
-
-//#endregion
-//#region src/composables/bulk-select.ts
-function useBulkSelect() {
-	const selection = ref({
-		all: false,
-		only: /* @__PURE__ */ new Set(),
-		except: /* @__PURE__ */ new Set()
-	});
-	/**
-	* Selects all records.
-	*/
-	function selectAll() {
-		selection.value.all = true;
-		selection.value.only.clear();
-		selection.value.except.clear();
-	}
-	/**
-	* Deselects all records.
-	*/
-	function deselectAll() {
-		selection.value.all = false;
-		selection.value.only.clear();
-		selection.value.except.clear();
-	}
-	/**
-	* Selects the given records.
-	*/
-	function select(...records) {
-		records.forEach((record) => selection.value.except.delete(record));
-		records.forEach((record) => selection.value.only.add(record));
-	}
-	/**
-	* Deselects the given records.
-	*/
-	function deselect(...records) {
-		records.forEach((record) => selection.value.except.add(record));
-		records.forEach((record) => selection.value.only.delete(record));
-	}
-	/**
-	* Toggles selection for the given records.
-	*/
-	function toggle(record, force) {
-		if (selected(record) || force === false) return deselect(record);
-		if (!selected(record) || force === true) return select(record);
-	}
-	/**
-	* Checks whether the given record is selected.
-	*/
-	function selected(record) {
-		if (selection.value.all) return !selection.value.except.has(record);
-		return selection.value.only.has(record);
-	}
-	/**
-	* Checks whether all records are selected.
-	*/
-	const allSelected = computed(() => {
-		return selection.value.all && selection.value.except.size === 0;
-	});
-	/**
-	* Binds a checkbox's properties.
-	*/
-	function bindCheckbox(key) {
-		return {
-			onChange: (event) => {
-				const target = event.target;
-				if (target.checked) select(target.value);
-				else deselect(target.value);
-			},
-			checked: selected(key),
-			value: key
-		};
-	}
-	return {
-		allSelected,
-		selectAll,
-		deselectAll,
-		select,
-		deselect,
-		toggle,
-		selected,
-		selection,
-		bindCheckbox
-	};
-}
-
-//#endregion
-//#region src/composables/query-parameters.ts
-/**
-* Access reactive query parameters.
-*
-* @see https://hybridly.dev/api/utils/use-query-parameters.html
-*/
-function useQueryParameters() {
-	const state = reactive({});
-	function updateState() {
-		const params = new URLSearchParams(window.location.search);
-		const unusedKeys = new Set(Object.keys(state));
-		for (const key of params.keys()) {
-			const paramsForKey = params.getAll(key);
-			state[key] = paramsForKey.length > 1 ? paramsForKey : params.get(key) || "";
-			unusedKeys.delete(key);
-		}
-		Array.from(unusedKeys).forEach((key) => delete state[key]);
-	}
-	updateState();
-	registerHook$1("navigated", updateState);
-	return state;
-}
-/**
-* Makes the specified query parameter reactive.
-*
-* @see https://hybridly.dev/api/utils/use-query-parameter.html
-*/
-function useQueryParameter(name, options = {}) {
-	const query = useQueryParameters();
-	const transform = (value) => {
-		if (options.transform === "bool") return value === true || value === "true" || value === "1" || value === "yes";
-		else if (options.transform === "number") return Number(value);
-		else if (options.transform === "string") return String(value);
-		else if (options.transform === "date") return new Date(value);
-		else if (typeof options.transform === "function") return options.transform(value);
-		return value;
-	};
-	const value = ref();
-	watch(query, () => {
-		value.value = transform(query[name] ?? toValue(options.defaultValue));
-	}, {
-		deep: true,
-		immediate: true
-	});
-	return value;
-}
-
 //#endregion
 //#region src/composables/table.ts
 /**
 * Provides utilities for working with tables.
 */
-function useTable(props, key, defaultOptions = {}) {
-	const table = computed(() => props[key]);
+function useTable(input, defaultOptions = {}) {
+	const table = computed(() => toValue(input));
 	const bulk = useBulkSelect();
-	const refinements = useRefinements(toReactive(table), "refinements", defaultOptions);
+	const refinements = useRefinements(() => toValue(input).refinements, defaultOptions);
 	/**
 	* Gets additionnal data to send with the request.
 	*/
-	function getAdditionnalData() {
+	function getAdditionnalData(options) {
 		const data = {};
+		options = {
+			...defaultOptions,
+			...options
+		};
 		if (defaultOptions?.includeQueryParameters !== false) Object.assign(data, structuredClone(toRaw(useQueryParameters())));
-		if (defaultOptions?.data) Object.assign(data, defaultOptions.data);
+		if (options?.data) Object.assign(data, options.data);
 		return data;
 	}
 	/**
@@ -1320,34 +1956,73 @@ function useTable(props, key, defaultOptions = {}) {
 	*/
 	function getRecordKey(record) {
 		if (typeof record !== "object") return record;
-		if (Reflect.has(record, "__hybridId")) return Reflect.get(record, "__hybridId");
-		return Reflect.get(record, table.value.keyName).value;
+		if (!table.value.keyName) return;
+		const value = Reflect.get(record, table.value.keyName);
+		if (typeof value === "string" || typeof value === "number") return value;
 	}
-	function getActionName(action) {
-		return typeof action === "string" ? action : action.name;
+	function getPageRecordKeys() {
+		return table.value.records.map((record) => getRecordKey(record)).filter((key) => key !== void 0);
+	}
+	function warnMissingRecordKey(action) {
+		console.warn(`Cannot ${action} because this table record has no key.`);
+	}
+	function getColumnName(column) {
+		return typeof column === "string" ? column : column.name;
+	}
+	function getCell(index, column) {
+		return table.value.cells[index]?.columns[getColumnName(column)] ?? {
+			value: void 0,
+			extra: {}
+		};
+	}
+	function resolveInlineAction(action) {
+		if (typeof action !== "string") return action;
+		return table.value.inlineActions.find(({ name }) => name === action);
+	}
+	function resolveBulkAction(action) {
+		if (typeof action !== "string") return action;
+		return table.value.bulkActions.find(({ name }) => name === action);
+	}
+	function getActionUrl(action, table) {
+		if (action.url) return action.url;
+		return route$1(table.endpoint);
 	}
 	/**
 	* Executes the given inline action by name.
 	*/
-	async function executeInlineAction(action, record) {
+	async function executeInlineAction(action, options) {
+		const resolvedAction = resolveInlineAction(action);
+		const recordKey = getRecordKey(options.record);
+		if (!resolvedAction) {
+			console.warn(`Action [${action}] is not defined`);
+			return;
+		}
+		if (recordKey === void 0) {
+			warnMissingRecordKey("execute an inline action");
+			return;
+		}
 		return await router$1.navigate({
 			method: "post",
-			url: route$1(table.value.endpoint),
+			url: getActionUrl(resolvedAction, table.value),
 			preserveState: true,
 			data: {
-				...getAdditionnalData(),
+				...getAdditionnalData(options),
 				type: "action:inline",
-				action: getActionName(action),
+				action: resolvedAction.name,
 				tableId: table.value.id,
-				recordId: getRecordKey(record)
+				recordId: recordKey
 			}
 		});
 	}
 	/**
 	* Executes the given bulk action for the given records.
 	*/
-	async function executeBulkAction(action, options) {
-		const actionName = getActionName(action);
+	async function executeBulkAction(action, options = {}) {
+		const resolvedAction = resolveBulkAction(action);
+		if (!resolvedAction) {
+			console.warn(`Action [${action}] is not defined`);
+			return;
+		}
 		const filterParameters = refinements.currentFilters().reduce((carry, filter) => {
 			return {
 				...carry,
@@ -1356,12 +2031,12 @@ function useTable(props, key, defaultOptions = {}) {
 		}, {});
 		return await router$1.navigate({
 			method: "post",
-			url: route$1(table.value.endpoint),
+			url: getActionUrl(resolvedAction, table.value),
 			preserveState: true,
 			data: {
-				...getAdditionnalData(),
+				...getAdditionnalData(options),
 				type: "action:bulk",
-				action: actionName,
+				action: resolvedAction.name,
 				tableId: table.value.id,
 				all: bulk.selection.value.all,
 				only: [...bulk.selection.value.only],
@@ -1369,29 +2044,46 @@ function useTable(props, key, defaultOptions = {}) {
 				[refinements.filtersKey.value]: filterParameters
 			},
 			hooks: { after: () => {
-				if (options?.deselect === true || table.value.bulkActions.find(({ name }) => name === actionName)?.deselect !== false) bulk.deselectAll();
+				if (options?.deselect === true || resolvedAction.deselect !== false) bulk.deselectAll();
 			} }
 		});
 	}
 	return reactive({
-		selectAll: bulk.selectAll,
+		selectAll: () => table.value.keyName ? bulk.selectAll() : warnMissingRecordKey("select all records"),
 		deselectAll: bulk.deselectAll,
-		selectPage: () => bulk.select(...table.value.records.map((record) => getRecordKey(record))),
-		deselectPage: () => bulk.deselect(...table.value.records.map((record) => getRecordKey(record))),
-		isPageSelected: computed(() => table.value.records.length > 0 && table.value.records.every((record) => bulk.selected(getRecordKey(record)))),
-		isSelected: (record) => bulk.selected(getRecordKey(record)),
+		selectPage: () => bulk.select(...getPageRecordKeys()),
+		deselectPage: () => bulk.deselect(...getPageRecordKeys()),
+		isPageSelected: computed(() => {
+			const keys = getPageRecordKeys();
+			return keys.length > 0 && keys.every((key) => bulk.selected(key));
+		}),
+		isSelected: (record) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? false : bulk.selected(key);
+		},
 		allSelected: bulk.allSelected,
+		anySelected: bulk.anySelected,
 		selection: bulk.selection,
 		bindCheckbox: (key) => bulk.bindCheckbox(key),
-		toggle: (record) => bulk.toggle(getRecordKey(record)),
-		select: (record) => bulk.select(getRecordKey(record)),
-		deselect: (record) => bulk.deselect(getRecordKey(record)),
+		toggle: (record, force) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? warnMissingRecordKey("toggle record selection") : bulk.toggle(key, force);
+		},
+		toggleAll: (force) => table.value.keyName ? bulk.toggleAll(force) : warnMissingRecordKey("toggle all records"),
+		select: (record) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? warnMissingRecordKey("select this record") : bulk.select(key);
+		},
+		deselect: (record) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? warnMissingRecordKey("deselect this record") : bulk.deselect(key);
+		},
 		inlineActions: computed(() => table.value.inlineActions.map((action) => ({
-			execute: (record) => executeInlineAction(action.name, record),
+			execute: (record) => executeInlineAction(action, { record }),
 			...action
 		}))),
 		bulkActions: computed(() => table.value.bulkActions.map((action) => ({
-			execute: (options) => executeBulkAction(action.name, options),
+			execute: (options) => executeBulkAction(action, options),
 			...action
 		}))),
 		executeInlineAction,
@@ -1402,31 +2094,45 @@ function useTable(props, key, defaultOptions = {}) {
 			isSorting: (direction) => refinements.isSorting(column.name, direction),
 			applyFilter: (value, options) => refinements.applyFilter(column.name, value, options),
 			clearFilter: (options) => refinements.clearFilter(column.name, options),
-			isSortable: !!refinements.sorts.find((sort) => sort.name === column.name),
-			isFilterable: !!refinements.filters.find((filters) => filters.name === column.name)
+			isSortable: !!refinements.sorts.value.find((sort) => sort.name === column.name),
+			isFilterable: !!refinements.filters.value.find((filters) => filters.name === column.name)
 		}))),
-		data: computed(() => table.value.records.map((record) => {
-			return Object.fromEntries(Object.entries(record).map(([key, value]) => [key, value.value]).filter(([key]) => key === "__hybridId"));
+		data: computed(() => table.value.records),
+		records: computed(() => table.value.records.map((record, index) => {
+			const recordKey = getRecordKey(record);
+			const localKey = recordKey ?? `row-${index}`;
+			const selected = recordKey === void 0 ? false : bulk.selected(recordKey);
+			return {
+				record,
+				key: localKey,
+				recordKey,
+				hasKey: recordKey !== void 0,
+				execute: (action) => executeInlineAction(action, { record }),
+				actions: table.value.inlineActions.map((action) => ({
+					...action,
+					execute: () => executeInlineAction(action.name, { record })
+				})),
+				select: () => recordKey === void 0 ? warnMissingRecordKey("select this record") : bulk.select(recordKey),
+				deselect: () => recordKey === void 0 ? warnMissingRecordKey("deselect this record") : bulk.deselect(recordKey),
+				toggle: (force) => recordKey === void 0 ? warnMissingRecordKey("toggle record selection") : bulk.toggle(recordKey, force),
+				selected,
+				value: (column) => getCell(index, column).value,
+				extra: (column, path) => getByPath(getCell(index, column).extra, path)
+			};
 		})),
-		records: computed(() => table.value.records.map((record) => ({
-			record: Object.values(record).map((record) => record.value),
-			key: getRecordKey(record),
-			execute: (action) => executeInlineAction(getActionName(action), getRecordKey(record)),
-			actions: table.value.inlineActions.map((action) => ({
-				...action,
-				execute: () => executeInlineAction(action.name, getRecordKey(record))
-			})),
-			select: () => bulk.select(getRecordKey(record)),
-			deselect: () => bulk.deselect(getRecordKey(record)),
-			toggle: (force) => bulk.toggle(getRecordKey(record), force),
-			selected: bulk.selected(getRecordKey(record)),
-			value: (column) => record[typeof column === "string" ? column : column.name].value,
-			extra: (column, path) => getByPath(record[typeof column === "string" ? column : column.name].extra, path)
-		}))),
-		paginator: computed(() => createPaginator(table.value.paginator)),
+		paginator: computed(() => createPaginator(table.value.paginator, defaultOptions)),
 		...refinements
 	});
 }
-
 //#endregion
-export { RouterLink, can, createPaginator, initializeHybridly, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };
+//#region src/composables/validation.ts
+/** Accesses all validation errors grouped by bag name. */
+function useValidation() {
+	return readonly(toReactive(computed(() => state.context.value?.validation ?? {})));
+}
+/** Accesses validation errors for a single bag. */
+function useValidationBag(bag = "default") {
+	return readonly(toReactive(computed(() => state.context.value?.validation?.[bag] ?? {})));
+}
+//#endregion
+export { Deferred, Form, RouterLink, WhenVisible, createPaginator, getBulkSelectionRange, initializeHybridly, isBooleanFilter, isCallbackFilter, isDateFilter, isSelectFilter, isTernaryFilter, isTextFilter, isTrashedFilter, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable, useValidation, useValidationBag };