@threadlabs/looma 0.6.4 → 0.7.0

package/vue/chunks/UiEditorTableOverlay.js

@@ -1,6 +1,7 @@
+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 UiIcon_default } from "./UiIcon.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, watchEffect } from "vue";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-editor-table-overlay/ui-editor-table-overlay.js";
 //#region .build/vue/UiEditorTableOverlay.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["hidden"];
@@ -55,125 +56,33 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		const hovered = ref(null);
 		const active = ref(null);
 		const activeKey = ref("");
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = { action: {
-				bubbles: true,
-				composed: true,
-				cancelable: false
-			} };
-			const checks = { action: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after") && Number.isInteger(detail["boundaryIndex"]) && Object.keys(detail).every((key) => ["action", "boundaryIndex"].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "select-row" || detail["action"] === "select-column") && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && Object.keys(detail).every((key) => [
-				"action",
-				"rowIndex",
-				"columnIndex"
-			].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["action"] === "open-cell-menu" && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && detail["anchor"] !== null && typeof detail["anchor"] === "object" && !Array.isArray(detail["anchor"]) && typeof detail["anchor"]["left"] === "number" && Number.isFinite(detail["anchor"]["left"]) && typeof detail["anchor"]["top"] === "number" && Number.isFinite(detail["anchor"]["top"]) && typeof detail["anchor"]["right"] === "number" && Number.isFinite(detail["anchor"]["right"]) && typeof detail["anchor"]["bottom"] === "number" && Number.isFinite(detail["anchor"]["bottom"]) && Object.keys(detail["anchor"]).every((key) => [
-				"left",
-				"top",
-				"right",
-				"bottom"
-			].includes(key)) && Object.keys(detail).every((key) => [
-				"action",
-				"rowIndex",
-				"columnIndex",
-				"anchor"
-			].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 === "rows") return rows.value;
-			if (name === "cols") return cols.value;
-			if (name === "hovered") return hovered.value;
-			if (name === "active") return active.value;
-			if (name === "activeKey") return activeKey.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "rows") {
-				rows.value = value;
-				return true;
-			}
-			if (name === "cols") {
-				cols.value = value;
-				return true;
-			}
-			if (name === "hovered") {
-				hovered.value = value;
-				return true;
-			}
-			if (name === "active") {
-				active.value = value;
-				return true;
+		const isActionDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after") && Number.isInteger(detail["boundaryIndex"]) && Object.keys(detail).every((key) => ["action", "boundaryIndex"].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "select-row" || detail["action"] === "select-column") && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && Object.keys(detail).every((key) => [
+			"action",
+			"rowIndex",
+			"columnIndex"
+		].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["action"] === "open-cell-menu" && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && detail["anchor"] !== null && typeof detail["anchor"] === "object" && !Array.isArray(detail["anchor"]) && typeof detail["anchor"]["left"] === "number" && Number.isFinite(detail["anchor"]["left"]) && typeof detail["anchor"]["top"] === "number" && Number.isFinite(detail["anchor"]["top"]) && typeof detail["anchor"]["right"] === "number" && Number.isFinite(detail["anchor"]["right"]) && typeof detail["anchor"]["bottom"] === "number" && Number.isFinite(detail["anchor"]["bottom"]) && Object.keys(detail["anchor"]).every((key) => [
+			"left",
+			"top",
+			"right",
+			"bottom"
+		].includes(key)) && Object.keys(detail).every((key) => [
+			"action",
+			"rowIndex",
+			"columnIndex",
+			"anchor"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, { checks: { action: isActionDetail } });
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			state: {
+				rows,
+				cols,
+				hovered,
+				active,
+				activeKey
 			}
-			if (name === "activeKey") {
-				activeKey.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: {},
-			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;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
@@ -272,6 +181,6 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d5963c35"]]);
+}), [["__scopeId", "data-v-61a70a30"]]);
 //#endregion
 export { UiEditorTableOverlay_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -1,6 +1,7 @@
+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 UiIcon_default } from "./UiIcon.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, watchEffect } from "vue";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js";
 //#region .build/vue/UiEditorTableToolbar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["hidden"];
@@ -86,116 +87,20 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		const sections = ref([]);
 		const hasOverflow = ref(false);
 		const overflowOpen = ref(false);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = { action: {
-				bubbles: true,
-				composed: true,
-				cancelable: false
-			} };
-			const checks = { action: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "align-left" || detail["action"] === "align-center" || detail["action"] === "align-right" || detail["action"] === "background-none" || detail["action"] === "background-gray" || detail["action"] === "background-yellow" || detail["action"] === "background-blue" || detail["action"] === "background-green" || detail["action"] === "background-red" || detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after" || detail["action"] === "clear-cells" || detail["action"] === "merge-cells" || detail["action"] === "split-cell" || detail["action"] === "delete-row" || detail["action"] === "delete-column" || detail["action"] === "delete-table") && Object.keys(detail).every((key) => ["action"].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 === "alignments") return alignments.value;
-			if (name === "structure") return structure.value;
-			if (name === "swatches") return swatches.value;
-			if (name === "sections") return sections.value;
-			if (name === "hasOverflow") return hasOverflow.value;
-			if (name === "overflowOpen") return overflowOpen.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "alignments") {
-				alignments.value = value;
-				return true;
-			}
-			if (name === "structure") {
-				structure.value = value;
-				return true;
-			}
-			if (name === "swatches") {
-				swatches.value = value;
-				return true;
-			}
-			if (name === "sections") {
-				sections.value = value;
-				return true;
+		const isActionDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "align-left" || detail["action"] === "align-center" || detail["action"] === "align-right" || detail["action"] === "background-none" || detail["action"] === "background-gray" || detail["action"] === "background-yellow" || detail["action"] === "background-blue" || detail["action"] === "background-green" || detail["action"] === "background-red" || detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after" || detail["action"] === "clear-cells" || detail["action"] === "merge-cells" || detail["action"] === "split-cell" || detail["action"] === "delete-row" || detail["action"] === "delete-column" || detail["action"] === "delete-table") && Object.keys(detail).every((key) => ["action"].includes(key));
+		const dispatch = createDispatch(root, emit, { checks: { action: isActionDetail } });
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			state: {
+				alignments,
+				structure,
+				swatches,
+				sections,
+				hasOverflow,
+				overflowOpen
 			}
-			if (name === "hasOverflow") {
-				hasOverflow.value = value;
-				return true;
-			}
-			if (name === "overflowOpen") {
-				overflowOpen.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: {},
-			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;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
@@ -270,6 +175,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-1066cfb2"]]);
+}), [["__scopeId", "data-v-31b70e7c"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiEditorToolbar.js

@@ -23,6 +23,6 @@ var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}, _ctx.$attrs, { "data-ui-editor-toolbar-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0da1a114"]]);
+}), [["__scopeId", "data-v-b71db5ba"]]);
 //#endregion
 export { UiEditorToolbar_default as t };

package/vue/chunks/UiFloatingActionButton.js

@@ -37,6 +37,6 @@ var UiFloatingActionButton_default = /*#__PURE__*/ _plugin_vue_export_helper_def
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-b66a2428"]]);
+}), [["__scopeId", "data-v-62b77471"]]);
 //#endregion
 export { UiFloatingActionButton_default as t };

package/vue/chunks/UiFormField.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, watchEffect } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-form-field/ui-form-field.js";
 //#region .build/vue/UiFormField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "label" };
@@ -27,77 +28,11 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	setup(__props) {
 		const props = __props;
 		const root = ref(null);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			return props[name];
-		}
-		function write(name, value) {
-			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: {},
-			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;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-form-field" }, _ctx.$attrs, {
@@ -111,6 +46,6 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-ae3bcdfb"]]);
+}), [["__scopeId", "data-v-605db5c0"]]);
 //#endregion
 export { UiFormField_default as t };

package/vue/chunks/UiGrid.js

@@ -19,6 +19,6 @@ var UiGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-grid" }, _ctx.$attrs, { "data-ui-grid-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-356b2957"]]);
+}), [["__scopeId", "data-v-9635be0b"]]);
 //#endregion
 export { UiGrid_default as t };

package/vue/chunks/UiIcon.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, createCommentVNode, createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, watchEffect } from "vue";
+import { Fragment, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderList } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-icon/ui-icon.js";
 //#region .build/vue/UiIcon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -34,82 +35,12 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const props = __props;
 		const root = ref(null);
 		const shapes = ref([]);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "shapes") return shapes.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "shapes") {
-				shapes.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: {},
-			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;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			state: { shapes }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({
@@ -142,6 +73,6 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), 128))]))], 16);
 		};
 	}
-}), [["__scopeId", "data-v-b2b50d17"]]);
+}), [["__scopeId", "data-v-7b1048a0"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/chunks/UiIconButton.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, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, watchEffect } from "vue";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-icon-button/ui-icon-button.js";
 //#region .build/vue/UiIconButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -39,77 +40,11 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			props.size && `size size=${props.size}`,
 			props.round && "round"
 		].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			return props[name];
-		}
-		function write(name, value) {
-			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: {},
-			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;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", mergeProps({
@@ -124,6 +59,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-80722d12"]]);
+}), [["__scopeId", "data-v-23aa723d"]]);
 //#endregion
 export { UiIconButton_default as t };