@threadlabs/looma 0.6.4 → 0.6.5

package/vue/chunks/UiCombobox.js

@@ -1,7 +1,8 @@
+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 { t as UiBadge_default } from "./UiBadge.js";
 import { t as UiTooltip_default } from "./UiTooltip.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef, withCtx } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-combobox/ui-combobox.js";
 //#region .build/vue/UiCombobox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-combobox-state"];
@@ -174,338 +175,126 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			`validationStatus=${encodeURIComponent(validationStatus.value)}`,
 			props.multiple && "multiple"
 		].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 = {
-				"query-change": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"value-change": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"free-entry": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"create-entry": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"validation-change": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"options-change": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"add-item": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"remove-item": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				"create-item": {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				}
-			};
-			const checks = {
-				"query-change": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && typeof detail["display"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"query",
-					"display",
-					"trigger"
-				].includes(key)),
-				"value-change": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && Object.keys(detail["option"]).every((key) => [
-					"id",
-					"value",
-					"label",
-					"group",
-					"disabled"
-				].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"value",
-					"query",
-					"option",
-					"kind",
-					"trigger"
-				].includes(key)) || Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && Object.keys(item).every((key) => [
-					"id",
-					"value",
-					"label",
-					"group",
-					"disabled"
-				].includes(key))),
-				"free-entry": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && Object.keys(detail["option"]).every((key) => [
-					"id",
-					"value",
-					"label",
-					"group",
-					"disabled"
-				].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"value",
-					"query",
-					"option",
-					"kind",
-					"trigger"
-				].includes(key)),
-				"create-entry": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && Object.keys(detail["option"]).every((key) => [
-					"id",
-					"value",
-					"label",
-					"group",
-					"disabled"
-				].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"value",
-					"query",
-					"option",
-					"kind",
-					"trigger"
-				].includes(key)),
-				"validation-change": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["status"] === "pristine" || detail["status"] === "pending" || detail["status"] === "valid" || detail["status"] === "warning" || detail["status"] === "error") && typeof detail["touched"] === "boolean" && typeof detail["dirty"] === "boolean" && Array.isArray(detail["issues"]) && detail["issues"].every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["message"] === "string" && (item["path"] === void 0 || Array.isArray(item["path"]) && item["path"].every((item) => true)) && (item["severity"] === void 0 || item["severity"] === "error" || item["severity"] === "warning") && Object.keys(item).every((key) => [
-					"message",
-					"path",
-					"severity"
-				].includes(key))) && (detail["output"] === void 0 || true) && Object.keys(detail).every((key) => [
-					"status",
-					"touched",
-					"dirty",
-					"issues",
-					"output"
-				].includes(key)),
-				"options-change": (detail) => Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && Object.keys(item).every((key) => [
-					"id",
-					"value",
-					"label",
-					"group",
-					"disabled"
-				].includes(key))),
-				"add-item": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["item"] !== null && typeof detail["item"] === "object" && !Array.isArray(detail["item"]) && typeof detail["item"]["id"] === "string" && typeof detail["item"]["value"] === "string" && typeof detail["item"]["label"] === "string" && (detail["item"]["group"] === void 0 || typeof detail["item"]["group"] === "string") && (detail["item"]["disabled"] === void 0 || typeof detail["item"]["disabled"] === "boolean") && Object.keys(detail["item"]).every((key) => [
-					"id",
-					"value",
-					"label",
-					"group",
-					"disabled"
-				].includes(key)) && Number.isInteger(detail["index"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"item",
-					"index",
-					"trigger"
-				].includes(key)),
-				"remove-item": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["item"] !== null && typeof detail["item"] === "object" && !Array.isArray(detail["item"]) && typeof detail["item"]["id"] === "string" && typeof detail["item"]["value"] === "string" && typeof detail["item"]["label"] === "string" && (detail["item"]["group"] === void 0 || typeof detail["item"]["group"] === "string") && (detail["item"]["disabled"] === void 0 || typeof detail["item"]["disabled"] === "boolean") && Object.keys(detail["item"]).every((key) => [
-					"id",
-					"value",
-					"label",
-					"group",
-					"disabled"
-				].includes(key)) && Number.isInteger(detail["index"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"item",
-					"index",
-					"trigger"
-				].includes(key)),
-				"create-item": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["query", "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" && "query" in detail) emitEvent("update:query", detail["query"]);
-			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 === "internalItems") return internalItems.value;
-			if (name === "raw") return raw.value;
-			if (name === "display") return display.value;
-			if (name === "selected") return selected.value;
-			if (name === "expanded") return expanded.value;
-			if (name === "rows") return rows.value;
-			if (name === "active") return active.value;
-			if (name === "loading") return loading.value;
-			if (name === "helpOpen") return helpOpen.value;
-			if (name === "lookupError") return lookupError.value;
-			if (name === "validation") return validation.value;
-			if (name === "uid") return uid.value;
-			if (name === "groups") return groups.value;
-			if (name === "creatable") return creatable.value;
-			if (name === "createIndex") return createIndex.value;
-			if (name === "message") return message.value;
-			if (name === "statusText") return statusText.value;
-			if (name === "validationStatus") return validationStatus.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalItems") {
-				internalItems.value = value;
-				return true;
-			}
-			if (name === "raw") {
-				raw.value = value;
-				return true;
-			}
-			if (name === "display") {
-				display.value = value;
-				return true;
-			}
-			if (name === "selected") {
-				selected.value = value;
-				return true;
-			}
-			if (name === "expanded") {
-				expanded.value = value;
-				return true;
-			}
-			if (name === "rows") {
-				rows.value = value;
-				return true;
-			}
-			if (name === "active") {
-				active.value = value;
-				return true;
-			}
-			if (name === "loading") {
-				loading.value = value;
-				return true;
-			}
-			if (name === "helpOpen") {
-				helpOpen.value = value;
-				return true;
-			}
-			if (name === "lookupError") {
-				lookupError.value = value;
-				return true;
-			}
-			if (name === "validation") {
-				validation.value = value;
-				return true;
-			}
-			if (name === "uid") {
-				uid.value = value;
-				return true;
-			}
-			if (name === "groups") {
-				groups.value = value;
-				return true;
-			}
-			if (name === "creatable") {
-				creatable.value = value;
-				return true;
-			}
-			if (name === "createIndex") {
-				createIndex.value = value;
-				return true;
-			}
-			if (name === "message") {
-				message.value = value;
-				return true;
-			}
-			if (name === "statusText") {
-				statusText.value = value;
-				return true;
-			}
-			if (name === "validationStatus") {
-				validationStatus.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 isQueryChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && typeof detail["display"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"query",
+			"display",
+			"trigger"
+		].includes(key));
+		const isValueChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && Object.keys(detail["option"]).every((key) => [
+			"id",
+			"value",
+			"label",
+			"group",
+			"disabled"
+		].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"value",
+			"query",
+			"option",
+			"kind",
+			"trigger"
+		].includes(key)) || Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && Object.keys(item).every((key) => [
+			"id",
+			"value",
+			"label",
+			"group",
+			"disabled"
+		].includes(key)));
+		const isFreeEntryDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && Object.keys(detail["option"]).every((key) => [
+			"id",
+			"value",
+			"label",
+			"group",
+			"disabled"
+		].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"value",
+			"query",
+			"option",
+			"kind",
+			"trigger"
+		].includes(key));
+		const isValidationChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["status"] === "pristine" || detail["status"] === "pending" || detail["status"] === "valid" || detail["status"] === "warning" || detail["status"] === "error") && typeof detail["touched"] === "boolean" && typeof detail["dirty"] === "boolean" && Array.isArray(detail["issues"]) && detail["issues"].every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["message"] === "string" && (item["path"] === void 0 || Array.isArray(item["path"]) && item["path"].every((item) => true)) && (item["severity"] === void 0 || item["severity"] === "error" || item["severity"] === "warning") && Object.keys(item).every((key) => [
+			"message",
+			"path",
+			"severity"
+		].includes(key))) && (detail["output"] === void 0 || true) && Object.keys(detail).every((key) => [
+			"status",
+			"touched",
+			"dirty",
+			"issues",
+			"output"
+		].includes(key));
+		const isOptionsChangeDetail = (detail) => Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && Object.keys(item).every((key) => [
+			"id",
+			"value",
+			"label",
+			"group",
+			"disabled"
+		].includes(key)));
+		const isAddItemDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["item"] !== null && typeof detail["item"] === "object" && !Array.isArray(detail["item"]) && typeof detail["item"]["id"] === "string" && typeof detail["item"]["value"] === "string" && typeof detail["item"]["label"] === "string" && (detail["item"]["group"] === void 0 || typeof detail["item"]["group"] === "string") && (detail["item"]["disabled"] === void 0 || typeof detail["item"]["disabled"] === "boolean") && Object.keys(detail["item"]).every((key) => [
+			"id",
+			"value",
+			"label",
+			"group",
+			"disabled"
+		].includes(key)) && Number.isInteger(detail["index"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"item",
+			"index",
+			"trigger"
+		].includes(key));
+		const isCreateItemDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["query", "trigger"].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				"query-change": isQueryChangeDetail,
+				"value-change": isValueChangeDetail,
+				"free-entry": isFreeEntryDetail,
+				"create-entry": isFreeEntryDetail,
+				"validation-change": isValidationChangeDetail,
+				"options-change": isOptionsChangeDetail,
+				"add-item": isAddItemDetail,
+				"remove-item": isAddItemDetail,
+				"create-item": isCreateItemDetail
 			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
+			modeled: ["query", "value"]
+		});
+		const { host, ready } = useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
 			refs: {
-				get field() {
-					return fieldElement.value;
-				},
-				get input() {
-					return inputElement.value;
-				},
-				get popup() {
-					return popupElement.value;
-				},
-				get listbox() {
-					return listboxElement.value;
-				},
-				get options() {
-					return optionsElement.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;
-					}
-				};
+				field: fieldElement,
+				input: inputElement,
+				popup: popupElement,
+				listbox: listboxElement,
+				options: optionsElement
 			},
-			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;
-		let ready;
-		onMounted(() => {
-			ready = Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+			state: {
+				internalItems,
+				raw,
+				display,
+				selected,
+				expanded,
+				rows,
+				active,
+				loading,
+				helpOpen,
+				lookupError,
+				validation,
+				uid,
+				groups,
+				creatable,
+				createIndex,
+				message,
+				statusText,
+				validationStatus
+			}
 		});
 		__expose({
 			validate: async (...args) => {
-				await ready;
+				await ready();
 				return controllerModule["validate"](host, ...args);
 			},
 			focusInput: async (...args) => {
-				await ready;
+				await ready();
 				return controllerModule["focusInput"](host, ...args);
 			}
 		});
@@ -662,6 +451,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f1d9bb8a"]]);
+}), [["__scopeId", "data-v-aef83c81"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiContainer.js

@@ -19,6 +19,6 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-container" }, _ctx.$attrs, { "data-ui-container-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4c7bb81d"]]);
+}), [["__scopeId", "data-v-89d8ad17"]]);
 //#endregion
 export { UiContainer_default as t };

package/vue/chunks/UiContextMenu.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, useTemplateRef, watchEffect } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-context-menu/ui-context-menu.js";
 //#region .build/vue/UiContextMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -32,119 +33,26 @@ var UiContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const root = ref(null);
 		const menuElement = useTemplateRef("menu");
 		const internalOpen = ref(false);
-		/** 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
-				},
-				select: {
-					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)),
-				select: (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))
-			};
-			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;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalOpen") {
-				internalOpen.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 menu() {
-				return menuElement.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;
-					}
-				};
+		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 isSelectDetail = (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 dispatch = createDispatch(root, emit, {
+			checks: {
+				open: isOpenDetail,
+				close: isOpenDetail,
+				select: isSelectDetail
 			},
-			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;
-			});
+			modeled: ["open"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { menu: menuElement },
+			state: { internalOpen }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-context-menu" }, _ctx.$attrs, {
@@ -153,6 +61,6 @@ var UiContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-39e418e5"]]);
+}), [["__scopeId", "data-v-607c2847"]]);
 //#endregion
 export { UiContextMenu_default as t };