@threadlabs/looma 0.6.4 → 0.6.5

package/vue/chunks/UiDialog.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-dialog/ui-dialog.js";
 //#region .build/vue/UiDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -43,104 +44,24 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const closeElement = useTemplateRef("close");
 		const internalOpen = ref(false);
 		const accessibleLabel = ref("Dialog");
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = { close: {
-				bubbles: true,
-				composed: true,
-				cancelable: false
-			} };
-			const checks = { close: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-				"open",
-				"reason",
-				"trigger"
-			].includes(key)) };
-			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			const emitEvent = emit;
-			emitEvent(name, detail);
-			if (detail !== null && typeof detail === "object" && "open" in detail) emitEvent("update:open", detail["open"]);
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				...declared[name],
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "internalOpen") return internalOpen.value;
-			if (name === "accessibleLabel") return accessibleLabel.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalOpen") {
-				internalOpen.value = value;
-				return true;
-			}
-			if (name === "accessibleLabel") {
-				accessibleLabel.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			refs: { get close() {
-				return closeElement.value;
-			} },
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
+		const isCloseDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"open",
+			"reason",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { close: isCloseDetail },
+			modeled: ["open"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { close: closeElement },
+			state: {
+				internalOpen,
+				accessibleLabel
+			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("dialog", mergeProps({ "data-component": "ui-dialog" }, _ctx.$attrs, {
@@ -154,6 +75,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-05ac1756"]]);
+}), [["__scopeId", "data-v-cac753c9"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiDisclosure.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-disclosure/ui-disclosure.js";
 //#region .build/vue/UiDisclosure.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-disclosure-state"];
@@ -41,118 +42,27 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const contentId = ref("");
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.density && `density density=${props.density}`, internalOpen.value && "internalOpen"].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = {
-				open: {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				close: {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				}
-			};
-			const checks = {
-				open: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"open",
-					"reason",
-					"trigger"
-				].includes(key)),
-				close: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"open",
-					"reason",
-					"trigger"
-				].includes(key))
-			};
-			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			const emitEvent = emit;
-			emitEvent(name, detail);
-			if (detail !== null && typeof detail === "object" && "open" in detail) emitEvent("update:open", detail["open"]);
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				...declared[name],
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "internalOpen") return internalOpen.value;
-			if (name === "contentId") return contentId.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalOpen") {
-				internalOpen.value = value;
-				return true;
-			}
-			if (name === "contentId") {
-				contentId.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			refs: { get trigger() {
-				return triggerElement.value;
-			} },
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
+		const isOpenDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"open",
+			"reason",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				open: isOpenDetail,
+				close: isOpenDetail
 			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
+			modeled: ["open"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { trigger: triggerElement },
+			state: {
+				internalOpen,
+				contentId
+			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-disclosure" }, _ctx.$attrs, {
@@ -176,6 +86,6 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d9a330a8"]]);
+}), [["__scopeId", "data-v-20cbcb83"]]);
 //#endregion
 export { UiDisclosure_default as t };

package/vue/chunks/UiEditable.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-editable/ui-editable.js";
 //#region .build/vue/UiEditable.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-editable-state"];
@@ -60,135 +61,38 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const draft = ref("");
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [internalEdit.value && "internalEdit", props.disabled && "disabled"].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = {
-				input: {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				change: {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"edit-change": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				}
-			};
-			const checks = {
-				input: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["value", "trigger"].includes(key)),
-				change: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && typeof detail["previousValue"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"value",
-					"previousValue",
-					"trigger"
-				].includes(key)),
-				"edit-change": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["edit"] === "boolean" && (detail["reason"] === "activate" || detail["reason"] === "commit" || detail["reason"] === "cancel" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape" || detail["reason"] === "programmatic") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"edit",
-					"reason",
-					"trigger"
-				].includes(key))
-			};
-			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			const emitEvent = emit;
-			emitEvent(name, detail);
-			if (detail !== null && typeof detail === "object" && "edit" in detail) emitEvent("update:edit", detail["edit"]);
-			if (detail !== null && typeof detail === "object" && "value" in detail) emitEvent("update:value", detail["value"]);
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				...declared[name],
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "internalEdit") return internalEdit.value;
-			if (name === "internalValue") return internalValue.value;
-			if (name === "draft") return draft.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalEdit") {
-				internalEdit.value = value;
-				return true;
-			}
-			if (name === "internalValue") {
-				internalValue.value = value;
-				return true;
-			}
-			if (name === "draft") {
-				draft.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
+		const isInputDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["value", "trigger"].includes(key));
+		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && typeof detail["previousValue"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"value",
+			"previousValue",
+			"trigger"
+		].includes(key));
+		const isEditChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["edit"] === "boolean" && (detail["reason"] === "activate" || detail["reason"] === "commit" || detail["reason"] === "cancel" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape" || detail["reason"] === "programmatic") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"edit",
+			"reason",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				input: isInputDetail,
+				change: isChangeDetail,
+				"edit-change": isEditChangeDetail
 			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
+			modeled: ["edit", "value"]
+		});
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
 			refs: {
-				get preview() {
-					return previewElement.value;
-				},
-				get input() {
-					return inputElement.value;
-				}
-			},
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
+				preview: previewElement,
+				input: inputElement
 			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+			state: {
+				internalEdit,
+				internalValue,
+				draft
+			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-editable" }, _ctx.$attrs, {
@@ -216,6 +120,6 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, "Cancel", -1)])])) : createCommentVNode("v-if", true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3707d050"]]);
+}), [["__scopeId", "data-v-c1b523c6"]]);
 //#endregion
 export { UiEditable_default as t };

package/vue/chunks/UiEditorInsertTableGrid.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { Fragment, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js";
 //#region .build/vue/UiEditorInsertTableGrid.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["hidden"];
@@ -46,122 +47,27 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 		const cols = ref(8);
 		const hint = ref("");
 		const withHeaderRow = ref(false);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = { insert: {
-				bubbles: true,
-				composed: true,
-				cancelable: false
-			} };
-			const checks = { insert: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["rows"]) && Number.isInteger(detail["cols"]) && typeof detail["withHeaderRow"] === "boolean" && Object.keys(detail).every((key) => [
-				"rows",
-				"cols",
-				"withHeaderRow"
-			].includes(key)) };
-			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			emit(name, detail);
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				...declared[name],
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "cells") return cells.value;
-			if (name === "rows") return rows.value;
-			if (name === "cols") return cols.value;
-			if (name === "hint") return hint.value;
-			if (name === "withHeaderRow") return withHeaderRow.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "cells") {
-				cells.value = value;
-				return true;
-			}
-			if (name === "rows") {
-				rows.value = value;
-				return true;
-			}
-			if (name === "cols") {
-				cols.value = value;
-				return true;
-			}
-			if (name === "hint") {
-				hint.value = value;
-				return true;
-			}
-			if (name === "withHeaderRow") {
-				withHeaderRow.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
+		const isInsertDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["rows"]) && Number.isInteger(detail["cols"]) && typeof detail["withHeaderRow"] === "boolean" && Object.keys(detail).every((key) => [
+			"rows",
+			"cols",
+			"withHeaderRow"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, { checks: { insert: isInsertDetail } });
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
 			refs: {
-				get header() {
-					return headerElement.value;
-				},
-				get insert() {
-					return insertElement.value;
-				}
-			},
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
+				header: headerElement,
+				insert: insertElement
 			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+			state: {
+				cells,
+				rows,
+				cols,
+				hint,
+				withHeaderRow
+			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-editor-insert-table-grid" }, _ctx.$attrs, {
@@ -198,6 +104,6 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-00e6602a"]]);
+}), [["__scopeId", "data-v-7b1e476f"]]);
 //#endregion
 export { UiEditorInsertTableGrid_default as t };