@threadlabs/looma 0.24.0 → 0.25.0

package/vue/UiEditorTableOverlay.vue

@@ -1,4 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<script lang="ts">
+const htmlNextAuthoredCheck2Reported = new Set<string>()
+function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
+  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
+    htmlNextAuthoredCheck2Reported.add(location)
+    console.warn(message)
+  }
+  return accepted
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -11,6 +22,7 @@ import {
 } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
@@ -368,73 +380,113 @@ const active = ref<
 const activeKey = ref('')
 let guardedPrevious: any
 const guarded = computed(() => {
-  if (!(hovered.value?.['rowOffset'] == null || typeof hovered.value?.['rowOffset'] === 'string')) {
-    return guardedPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      hovered.value?.['rowOffset'] == null || typeof hovered.value?.['rowOffset'] === 'string',
+      'hovered.rowOffset:hovered.rowOffset',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.rowOffset does not satisfy its declared type.',
+    ))
+  ) return guardedPrevious
   return guardedPrevious = hovered.value?.rowOffset
 })
 let guardedBindingPrevious: any
 const guardedBinding = computed(() => {
-  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
-    return guardedBindingPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']),
+      'hovered.rowIndex:hovered.rowIndex',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.rowIndex does not satisfy its declared type.',
+    ))
+  ) return guardedBindingPrevious
   return guardedBindingPrevious = hovered.value?.rowIndex
 })
 let guardedBinding2Previous: any
 const guardedBinding2 = computed(() => {
   if (
-    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
+    !(htmlNextAuthoredCheck2(
+      hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']),
+      'hovered.columnIndex:hovered.columnIndex',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.columnIndex does not satisfy its declared type.',
+    ))
   ) return guardedBinding2Previous
   return guardedBinding2Previous = hovered.value?.columnIndex
 })
 let guardedBinding3Previous: any
 const guardedBinding3 = computed(() => {
   if (
-    !(hovered.value?.['columnOffset'] == null
-      || typeof hovered.value?.['columnOffset'] === 'string')
+    !(htmlNextAuthoredCheck2(
+      hovered.value?.['columnOffset'] == null
+      || typeof hovered.value?.['columnOffset'] === 'string',
+      'hovered.columnOffset:hovered.columnOffset',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.columnOffset does not satisfy its declared type.',
+    ))
   ) return guardedBinding3Previous
   return guardedBinding3Previous = hovered.value?.columnOffset
 })
 let guardedBinding4Previous: any
 const guardedBinding4 = computed(() => {
-  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
-    return guardedBinding4Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']),
+      'hovered.rowIndex:hovered.rowIndex',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.rowIndex does not satisfy its declared type.',
+    ))
+  ) return guardedBinding4Previous
   return guardedBinding4Previous = hovered.value?.rowIndex
 })
 let guardedBinding5Previous: any
 const guardedBinding5 = computed(() => {
   if (
-    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
+    !(htmlNextAuthoredCheck2(
+      hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']),
+      'hovered.columnIndex:hovered.columnIndex',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference hovered.columnIndex does not satisfy its declared type.',
+    ))
   ) return guardedBinding5Previous
   return guardedBinding5Previous = hovered.value?.columnIndex
 })
 let guardedBinding6Previous: any
 const guardedBinding6 = computed(() => {
-  if (!(active.value?.['menuLeft'] == null || typeof active.value?.['menuLeft'] === 'string')) {
-    return guardedBinding6Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      active.value?.['menuLeft'] == null || typeof active.value?.['menuLeft'] === 'string',
+      'active.menuLeft:active.menuLeft',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.menuLeft does not satisfy its declared type.',
+    ))
+  ) return guardedBinding6Previous
   return guardedBinding6Previous = active.value?.menuLeft
 })
 let guardedBinding7Previous: any
 const guardedBinding7 = computed(() => {
-  if (!(active.value?.['menuTop'] == null || typeof active.value?.['menuTop'] === 'string')) {
-    return guardedBinding7Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      active.value?.['menuTop'] == null || typeof active.value?.['menuTop'] === 'string',
+      'active.menuTop:active.menuTop',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.menuTop does not satisfy its declared type.',
+    ))
+  ) return guardedBinding7Previous
   return guardedBinding7Previous = active.value?.menuTop
 })
 let guardedBinding8Previous: any
 const guardedBinding8 = computed(() => {
-  if (!(active.value?.['rowIndex'] == null || Number.isInteger(active.value?.['rowIndex']))) {
-    return guardedBinding8Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      active.value?.['rowIndex'] == null || Number.isInteger(active.value?.['rowIndex']),
+      'active.rowIndex:active.rowIndex',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.rowIndex does not satisfy its declared type.',
+    ))
+  ) return guardedBinding8Previous
   return guardedBinding8Previous = active.value?.rowIndex
 })
 let guardedBinding9Previous: any
 const guardedBinding9 = computed(() => {
-  if (!(active.value?.['columnIndex'] == null || Number.isInteger(active.value?.['columnIndex']))) {
-    return guardedBinding9Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      active.value?.['columnIndex'] == null || Number.isInteger(active.value?.['columnIndex']),
+      'active.columnIndex:active.columnIndex',
+      './components/ui-editor-table-overlay/ui-editor-table-overlay.html: HR007: Reference active.columnIndex does not satisfy its declared type.',
+    ))
+  ) return guardedBinding9Previous
   return guardedBinding9Previous = active.value?.columnIndex
 })
 provide('html-next:ui-editor-table-overlay:rows', rows)
@@ -459,22 +511,26 @@ if (
   )
 }
 
-const isAddRowBeforeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isAddRowBeforeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && Number.isInteger((detail as Record<string, unknown>)['boundaryIndex'])
-  && Object.keys(detail as object).every((key) => ['boundaryIndex'].includes(key))
-const isSelectRowDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['boundaryIndex'].includes(key)))
+const isSelectRowDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
   && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
-  && Object.keys(detail as object).every((key) => ['rowIndex', 'columnIndex'].includes(key))
-const isReorderRowDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['rowIndex', 'columnIndex'].includes(key)))
+const isReorderRowDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && Number.isInteger((detail as Record<string, unknown>)['fromIndex'])
   && Number.isInteger((detail as Record<string, unknown>)['toIndex'])
-  && Object.keys(detail as object).every((key) => ['fromIndex', 'toIndex'].includes(key))
-const isOpenCellMenuDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['fromIndex', 'toIndex'].includes(key)))
+const isOpenCellMenuDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
   && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
   && ((detail as Record<string, unknown>)['anchor'] !== null
@@ -505,7 +561,7 @@ const isOpenCellMenuDetail = (detail: unknown): boolean =>
     ))
   && Object.keys(detail as object).every((key) =>
     ['rowIndex', 'columnIndex', 'anchor'].includes(key)
-  )
+  ))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     'add-row-before': isAddRowBeforeDetail,
@@ -525,6 +581,114 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-table-overlay.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        rows: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'key', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'index', type: { kind: 'terminal', name: 'integer' }, optional: false },
+              { name: 'offset', type: { kind: 'terminal', name: 'string' }, optional: false },
+              {
+                name: 'affordance',
+                type: {
+                  kind: 'constrained',
+                  base: { kind: 'terminal', name: 'keyword' },
+                  values: ['insert-row', 'insert-column'],
+                },
+                optional: false,
+              },
+              {
+                name: 'action',
+                type: {
+                  kind: 'constrained',
+                  base: { kind: 'terminal', name: 'keyword' },
+                  values: [
+                    'add-row-before',
+                    'add-row-after',
+                    'add-column-before',
+                    'add-column-after',
+                  ],
+                },
+                optional: false,
+              },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+            ],
+            open: false,
+          },
+        },
+        cols: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'key', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'index', type: { kind: 'terminal', name: 'integer' }, optional: false },
+              { name: 'offset', type: { kind: 'terminal', name: 'string' }, optional: false },
+              {
+                name: 'affordance',
+                type: {
+                  kind: 'constrained',
+                  base: { kind: 'terminal', name: 'keyword' },
+                  values: ['insert-row', 'insert-column'],
+                },
+                optional: false,
+              },
+              {
+                name: 'action',
+                type: {
+                  kind: 'constrained',
+                  base: { kind: 'terminal', name: 'keyword' },
+                  values: [
+                    'add-row-before',
+                    'add-row-after',
+                    'add-column-before',
+                    'add-column-after',
+                  ],
+                },
+                optional: false,
+              },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+            ],
+            open: false,
+          },
+        },
+        hovered: {
+          kind: 'object',
+          fields: [
+            { name: 'left', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'top', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'width', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'height', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'rowIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+            { name: 'columnIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+            { name: 'rowOffset', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'columnOffset', type: { kind: 'terminal', name: 'string' }, optional: false },
+          ],
+          open: false,
+        },
+        active: {
+          kind: 'object',
+          fields: [
+            { name: 'left', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'top', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'width', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'height', type: { kind: 'terminal', name: 'number' }, optional: false },
+            { name: 'rowIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+            { name: 'columnIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+            { name: 'menuLeft', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'menuTop', type: { kind: 'terminal', name: 'string' }, optional: false },
+          ],
+          open: false,
+        },
+        activeKey: { kind: 'terminal', name: 'string' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-editor-table-overlay/ui-editor-table-overlay.js',
     definition: './components/ui-editor-table-overlay/ui-editor-table-overlay.html',

package/vue/UiEditorTableToolbar.d.ts

@@ -1,4 +1,6 @@
 import type { PropType } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     actions: {
         type: PropType<readonly ("align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null>;
@@ -65,5 +67,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     headerColumn: boolean | null;
     cellAlignment: "left" | "right" | "center" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/vue/UiEditorTableToolbar.vue

@@ -1,4 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<script lang="ts">
+const htmlNextAuthoredCheck2Reported = new Set<string>()
+function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
+  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
+    htmlNextAuthoredCheck2Reported.add(location)
+    console.warn(message)
+  }
+  return accepted
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -11,6 +22,7 @@ import {
 } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
@@ -373,9 +385,13 @@ const hasOverflow = ref(false)
 const overflowOpen = ref(false)
 let guardedPrevious: any
 const guarded = computed(() => {
-  if (!(overflowOpen.value == null || typeof overflowOpen.value === 'boolean')) {
-    return guardedPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      overflowOpen.value == null || typeof overflowOpen.value === 'boolean',
+      'overflowOpen:overflowOpen',
+      './components/ui-editor-table-toolbar/ui-editor-table-toolbar.html: HR007: Reference overflowOpen does not satisfy its declared type.',
+    ))
+  ) return guardedPrevious
   return guardedPrevious = overflowOpen.value
 })
 provide('html-next:ui-editor-table-toolbar:alignments', alignments)
@@ -401,8 +417,9 @@ if (
   )
 }
 
-const isActionDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isActionDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && ((detail as Record<string, unknown>)['action'] === 'align-left'
     || (detail as Record<string, unknown>)['action'] === 'align-center'
     || (detail as Record<string, unknown>)['action'] === 'align-right'
@@ -428,7 +445,7 @@ const isActionDetail = (detail: unknown): boolean =>
     || (detail as Record<string, unknown>)['action'] === 'delete-row'
     || (detail as Record<string, unknown>)['action'] === 'delete-column'
     || (detail as Record<string, unknown>)['action'] === 'delete-table')
-  && Object.keys(detail as object).every((key) => ['action'].includes(key))
+  && Object.keys(detail as object).every((key) => ['action'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     action: isActionDetail,
@@ -438,6 +455,110 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        alignments: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              {
+                name: 'action',
+                type: {
+                  kind: 'constrained',
+                  base: { kind: 'terminal', name: 'keyword' },
+                  values: ['align-left', 'align-center', 'align-right'],
+                },
+                optional: false,
+              },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'active', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+            ],
+            open: false,
+          },
+        },
+        structure: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              {
+                name: 'action',
+                type: {
+                  kind: 'constrained',
+                  base: { kind: 'terminal', name: 'keyword' },
+                  values: ['add-row-after', 'add-column-after'],
+                },
+                optional: false,
+              },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'icon', type: { kind: 'terminal', name: 'string' }, optional: false },
+            ],
+            open: false,
+          },
+        },
+        swatches: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'action', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'color', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'selected', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+            ],
+            open: false,
+          },
+        },
+        sections: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [{
+              name: 'heading',
+              type: { kind: 'terminal', name: 'string' },
+              optional: false,
+            }, {
+              name: 'items',
+              type: {
+                kind: 'list',
+                item: {
+                  kind: 'object',
+                  fields: [
+                    { name: 'action', type: { kind: 'terminal', name: 'string' }, optional: false },
+                    { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+                    { name: 'icon', type: { kind: 'terminal', name: 'string' }, optional: false },
+                    {
+                      name: 'danger',
+                      type: { kind: 'terminal', name: 'boolean' },
+                      optional: false,
+                    },
+                    {
+                      name: 'checkable',
+                      type: { kind: 'terminal', name: 'boolean' },
+                      optional: false,
+                    },
+                    {
+                      name: 'checked',
+                      type: { kind: 'terminal', name: 'boolean' },
+                      optional: false,
+                    },
+                  ],
+                  open: false,
+                },
+              },
+              optional: false,
+            }],
+            open: false,
+          },
+        },
+        hasOverflow: { kind: 'terminal', name: 'boolean' },
+        overflowOpen: { kind: 'terminal', name: 'boolean' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js',
     definition: './components/ui-editor-table-toolbar/ui-editor-table-toolbar.html',

package/vue/UiEditorToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -71,7 +71,7 @@ function reflectedProp(
 const hydrationInstance = getCurrentInstance()
 
 const root = ref<HTMLElement | null>(null)
-const stripElement = useTemplateRef<HTMLElement>('strip')
+const stripElement = useTemplateRef<HTMLElement>('stripElement')
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -131,7 +131,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     :data-ui-editor-toolbar-state="hostState || undefined"
     ref="root"
   >
-    <div class="strip" ref="strip"><slot /></div>
+    <div class="strip" ref="stripElement"><slot /></div>
   </div>
 </template>
 

package/vue/UiFloatingActionButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiFormField.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiIcon.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiIconButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiImage.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -187,7 +187,7 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const frameElement = useTemplateRef<HTMLElement>('frame')
+const frameElement = useTemplateRef<HTMLElement>('frameElement')
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -212,8 +212,9 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isResizeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isResizeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && Number.isInteger((detail as Record<string, unknown>)['width'])
   && Number.isInteger((detail as Record<string, unknown>)['height'])
   && ((detail as Record<string, unknown>)['phase'] === 'preview'
@@ -223,7 +224,7 @@ const isResizeDetail = (detail: unknown): boolean =>
     || (detail as Record<string, unknown>)['trigger'] === 'keyboard')
   && Object.keys(detail as object).every((key) =>
     ['width', 'height', 'phase', 'trigger'].includes(key)
-  )
+  ))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     resize: isResizeDetail,
@@ -268,7 +269,7 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
     :data-ui-image-state="hostState || undefined"
     ref="root"
   >
-    <div class="frame" ref="frame">
+    <div class="frame" ref="frameElement">
       <slot name="media"><img
           :src="checkedProps.src ?? undefined"
           :alt="checkedProps.alt ?? undefined"