@threadlabs/looma 0.6.4 → 0.7.0

package/vanilla/UiRadioGroup.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiRadioGroupEventMap {
   select: CustomEvent<{ readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiRadioGroup.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-radio-group/ui-radio-group.js";
 import "../styles/ui-radio-group.css";

package/vanilla/UiReel.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiReelEventMap {
 }
 export interface UiReelElement extends HTMLDivElement {

package/vanilla/UiReel.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-reel.css";
 

package/vanilla/UiSearchResultRow.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiSearchResultRowEventMap {
 }
 export interface UiSearchResultRowElement extends HTMLButtonElement {

package/vanilla/UiSearchResultRow.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-search-result-row.css";
 

package/vanilla/UiSearchShell.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiSearchShellEventMap {
   close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiSearchShell.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-search-shell/ui-search-shell.js";
 import "../styles/ui-search-shell.css";

package/vanilla/UiSelect.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiSelectEventMap {
 }
 export interface UiSelectElement extends HTMLSelectElement {
@@ -8,7 +8,6 @@ export interface UiSelectElement extends HTMLSelectElement {
 export interface UiSelectProps {
   disabled?: boolean | null;
   invalid?: boolean | null;
-  multiple?: boolean | null;
   required?: boolean | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiSelect.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-select/ui-select.js";
 import "../styles/ui-select.css";
 
-const definition = {...{"contract":{"tag":"ui-select","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"multiple":{"type":"boolean","required":false,"target":{"attribute":"multiple"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"select","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"select","choices":["select"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-select","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"select","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"select","choices":["select"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSelect(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -19,11 +19,8 @@ export function createUiSelect(options = {}) {
   const value1 = componentProps["required"] === undefined ? false : componentProps["required"];
   if (value1 === true) element.setAttribute("required", "");
   else element.removeAttribute("required");
-  const value2 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
-  if (value2 === true) element.setAttribute("multiple", "");
-  else element.removeAttribute("multiple");
-  const value3 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
-  if (typeof value3 === "boolean") element.setAttribute("aria-invalid", String(value3));
+  const value2 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
+  if (typeof value2 === "boolean") element.setAttribute("aria-invalid", String(value2));
   else element.removeAttribute("aria-invalid");
   element.setAttribute("data-component", "ui-select");
   if (children.length > 0) {

package/vanilla/UiSeparator.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiSeparatorEventMap {
 }
 export interface UiSeparatorElement extends HTMLHRElement {

package/vanilla/UiSeparator.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-separator.css";
 

package/vanilla/UiSidebar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiSidebarEventMap {
   resize: CustomEvent<{ readonly width: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   toggle: CustomEvent<{ readonly open: boolean; readonly mode: "docked" | "drawer"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiSidebar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-sidebar/ui-sidebar.js";
 import "../styles/ui-sidebar.css";

package/vanilla/UiStack.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiStackEventMap {
 }
 export interface UiStackElement extends HTMLDivElement {

package/vanilla/UiStack.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-stack.css";
 

package/vanilla/UiSwitch.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiSwitchEventMap {
   change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiSwitch.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-switch/ui-switch.js";
 import "../styles/ui-switch.css";

package/vanilla/UiSwitcher.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiSwitcherEventMap {
 }
 export interface UiSwitcherElement extends HTMLDivElement {

package/vanilla/UiSwitcher.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-switcher.css";
 

package/vanilla/UiTabs.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiTabsEventMap {
   select: CustomEvent<{ readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiTabs.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tabs/ui-tabs.js";
 import "../styles/ui-tabs.css";

package/vanilla/UiTextarea.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiTextareaEventMap {
 }
 export interface UiTextareaElement extends HTMLTextAreaElement {

package/vanilla/UiTextarea.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-textarea/ui-textarea.js";
 import "../styles/ui-textarea.css";

package/vanilla/UiToastRegion.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiToastRegionEventMap {
   close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "timeout" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiToastRegion.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-toast-region/ui-toast-region.js";
 import "../styles/ui-toast-region.css";

package/vanilla/UiTooltip.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiTooltipEventMap {
   open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTooltip.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";

package/vanilla/UiTopBar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiTopBarEventMap {
 }
 export interface UiTopBarElement extends HTMLElement {

package/vanilla/UiTopBar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import "../styles/ui-top-bar.css";
 
 export function createUiTopBar(options = {}) {

package/vanilla/UiTree.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiTreeEventMap {
   reorder: CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "reorder-rejected": CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTree.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";

package/vanilla/UiTreeItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 export interface UiTreeItemEventMap {
   expand: CustomEvent<{ readonly id: string; readonly expanded: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiTreeItem.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.2 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.3 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";

package/vue/UiAffordanceScope.vue

@@ -1,7 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import * as controllerModule from '../components/ui-affordance-scope/ui-affordance-scope.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -24,90 +25,13 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))
-    ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'engaged') return engaged.value
-  return (props as Record<string, unknown>)[name]
-}
+const dispatch = createDispatch(root)
 
-function write(name: string, value: unknown): boolean {
-  if (name === 'engaged') {
-    engaged.value = value as never
-    return true
-  }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
-
-const stops: Array<() => void> = []
-const host = {
-  get element(): Element {
-    return root.value as Element
-  },
-  state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === 'string' && write(name, value),
-  }),
-  refs: {} as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    get: (_target, name) => {
-      if (typeof name !== 'string' || root.value === null) return undefined
-      const form = root.value instanceof HTMLFormElement
-        ? root.value
-        : root.value.querySelector('form')
-      return form?.elements.namedItem(name)
-        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
-  },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    stops.push(stop)
-    return stop
-  },
-  on(event: string, listener: EventListener): () => void {
-    const element = root.value
-    element?.addEventListener(event, listener)
-    const off = (): void => element?.removeEventListener(event, listener)
-    stops.push(off)
-    return off
-  },
+useComponentHost(controllerModule.default, {
+  root,
   dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
-})
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+  props,
+  state: { engaged },
 })
 </script>
 

package/vue/UiAvatar.d.ts

@@ -9,9 +9,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string;
     alt: string;
     fallback: string;
-    name: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiAvatar.vue

@@ -1,15 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef,
-  useTemplateRef,
-  watchEffect,
-} from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-avatar/ui-avatar.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -33,104 +26,14 @@ const hasImage = ref(false)
 const hasAuthoredImage = ref(false)
 const initials = ref('?')
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))
-    ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'hasImage') return hasImage.value
-  if (name === 'hasAuthoredImage') return hasAuthoredImage.value
-  if (name === 'initials') return initials.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'hasImage') {
-    hasImage.value = value as never
-    return true
-  }
-  if (name === 'hasAuthoredImage') {
-    hasAuthoredImage.value = value as never
-    return true
-  }
-  if (name === 'initials') {
-    initials.value = value as never
-    return true
-  }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
+const dispatch = createDispatch(root)
 
-const stops: Array<() => void> = []
-const host = {
-  get element(): Element {
-    return root.value as Element
-  },
-  state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === 'string' && write(name, value),
-  }),
-  refs: {
-    get image(): Element {
-      return imageElement.value as Element
-    },
-  } as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    get: (_target, name) => {
-      if (typeof name !== 'string' || root.value === null) return undefined
-      const form = root.value instanceof HTMLFormElement
-        ? root.value
-        : root.value.querySelector('form')
-      return form?.elements.namedItem(name)
-        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
-  },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    stops.push(stop)
-    return stop
-  },
-  on(event: string, listener: EventListener): () => void {
-    const element = root.value
-    element?.addEventListener(event, listener)
-    const off = (): void => element?.removeEventListener(event, listener)
-    stops.push(off)
-    return off
-  },
+useComponentHost(controllerModule.default, {
+  root,
   dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
-})
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+  props,
+  refs: { image: imageElement },
+  state: { hasImage, hasAuthoredImage, initials },
 })
 </script>