@threadlabs/looma 0.30.2 → 0.30.3

package/vue/UiEditorImageToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -11,7 +11,21 @@ import {
   useReflectedProp,
 } from './host'
 import { acceptsControllerWrite } from './props'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  evaluateInput,
+  type InputBindings,
+  inputDefault,
+  inputRead,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiButton from './UiButton.vue'
 import UiCluster from './UiCluster.vue'
 import UiEditorToolbar from './UiEditorToolbar.vue'
@@ -54,37 +68,55 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  alt: { type: null as unknown as PropType<string | null>, default: '' },
+  alt: { type: null as unknown as PropType<string | null> },
   placement: {
     type: null as unknown as PropType<'block' | 'center' | 'wrap-left' | 'wrap-right' | null>,
-    default: 'block',
   },
-  target: { type: null as unknown as PropType<string | null>, default: '' },
+  target: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = { alt: '', placement: 'block', target: '' }
-const checkedProps = computed(() => ({
-  alt: checkedProp<string>(
-    props['alt'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'alt',
-    acceptedProps,
-  ) as string,
-  placement: checkedProp<'block' | 'center' | 'wrap-left' | 'wrap-right'>(
-    props['placement'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'placement',
-    acceptedProps,
-  ) as 'block' | 'center' | 'wrap-left' | 'wrap-right',
-  target: checkedProp<string>(
-    props['target'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'target',
-    acceptedProps,
-  ) as string,
-}))
+const inputTracking = vuePropInputs(
+  acceptedProps,
+  { alt: '', placement: 'block', target: '' },
+  (name, value, source, values) => {
+    switch (name) {
+      case 'alt':
+        return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+      case 'placement':
+        return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+      case 'target':
+        return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+      default:
+        return { ok: false }
+    }
+  },
+  () => {
+    void checkedProps.value
+  },
+)
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    alt: propInputs.value<string | null>('alt', props['alt'], props[BINDING_INPUTS_PROP]) as string,
+    placement: propInputs.value<'block' | 'center' | 'wrap-left' | 'wrap-right' | null>(
+      'placement',
+      props['placement'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'block' | 'center' | 'wrap-left' | 'wrap-right',
+    target: propInputs.value<string | null>(
+      'target',
+      props['target'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -115,154 +147,94 @@ const guarded = computed(() => {
 })
 let guardedBindingPrevious: any = null
 const guardedBinding = computed(() => {
-  const candidate: any = ((objectValue: any, indexValue: any) =>
-    objectValue === Symbol.for('html-next.invalid-result')
-      || indexValue === Symbol.for('html-next.invalid-result')
-      ? Symbol.for('html-next.invalid-result')
-      : objectValue[indexValue])(
-      { true: 'outline', false: 'ghost' },
-      concat(checkedProps.value.placement === 'block'),
-    )
-  if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedBindingPrevious
-  }
+  const candidate: any = concat(checkedProps.value.placement === 'block')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBindingPrevious
   return guardedBindingPrevious = candidate
 })
 let guardedBinding2Previous: any = null
 const guardedBinding2 = computed(() => {
-  const candidate: any = concat(checkedProps.value.placement === 'block')
+  const candidate: any = concat(base.value, '-center')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding2Previous
   return guardedBinding2Previous = candidate
 })
 let guardedBinding3Previous: any = null
 const guardedBinding3 = computed(() => {
-  const candidate: any = concat(base.value, '-center')
+  const candidate: any = concat(checkedProps.value.placement === 'center')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
   return guardedBinding3Previous = candidate
 })
 let guardedBinding4Previous: any = null
 const guardedBinding4 = computed(() => {
-  const candidate: any = ((objectValue: any, indexValue: any) =>
-    objectValue === Symbol.for('html-next.invalid-result')
-      || indexValue === Symbol.for('html-next.invalid-result')
-      ? Symbol.for('html-next.invalid-result')
-      : objectValue[indexValue])(
-      { true: 'outline', false: 'ghost' },
-      concat(checkedProps.value.placement === 'center'),
-    )
-  if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedBinding4Previous
-  }
+  const candidate: any = concat(base.value, '-wrap-left')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding4Previous
   return guardedBinding4Previous = candidate
 })
 let guardedBinding5Previous: any = null
 const guardedBinding5 = computed(() => {
-  const candidate: any = concat(checkedProps.value.placement === 'center')
+  const candidate: any = concat(checkedProps.value.placement === 'wrap-left')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding5Previous
   return guardedBinding5Previous = candidate
 })
 let guardedBinding6Previous: any = null
 const guardedBinding6 = computed(() => {
-  const candidate: any = concat(base.value, '-wrap-left')
+  const candidate: any = concat(base.value, '-wrap-right')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding6Previous
   return guardedBinding6Previous = candidate
 })
 let guardedBinding7Previous: any = null
 const guardedBinding7 = computed(() => {
-  const candidate: any = ((objectValue: any, indexValue: any) =>
-    objectValue === Symbol.for('html-next.invalid-result')
-      || indexValue === Symbol.for('html-next.invalid-result')
-      ? Symbol.for('html-next.invalid-result')
-      : objectValue[indexValue])(
-      { true: 'outline', false: 'ghost' },
-      concat(checkedProps.value.placement === 'wrap-left'),
-    )
-  if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedBinding7Previous
-  }
+  const candidate: any = concat(checkedProps.value.placement === 'wrap-right')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding7Previous
   return guardedBinding7Previous = candidate
 })
 let guardedBinding8Previous: any = null
 const guardedBinding8 = computed(() => {
-  const candidate: any = concat(checkedProps.value.placement === 'wrap-left')
+  const candidate: any = concat(base.value, '-delete')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding8Previous
   return guardedBinding8Previous = candidate
 })
 let guardedBinding9Previous: any = null
 const guardedBinding9 = computed(() => {
-  const candidate: any = concat(base.value, '-wrap-right')
+  const candidate: any = concat(base.value, '-block')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding9Previous
   return guardedBinding9Previous = candidate
 })
 let guardedBinding10Previous: any = null
 const guardedBinding10 = computed(() => {
-  const candidate: any = ((objectValue: any, indexValue: any) =>
-    objectValue === Symbol.for('html-next.invalid-result')
-      || indexValue === Symbol.for('html-next.invalid-result')
-      ? Symbol.for('html-next.invalid-result')
-      : objectValue[indexValue])(
-      { true: 'outline', false: 'ghost' },
-      concat(checkedProps.value.placement === 'wrap-right'),
-    )
-  if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedBinding10Previous
-  }
+  const candidate: any = concat(base.value, '-center')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding10Previous
   return guardedBinding10Previous = candidate
 })
 let guardedBinding11Previous: any = null
 const guardedBinding11 = computed(() => {
-  const candidate: any = concat(checkedProps.value.placement === 'wrap-right')
+  const candidate: any = concat(base.value, '-wrap-left')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding11Previous
   return guardedBinding11Previous = candidate
 })
 let guardedBinding12Previous: any = null
 const guardedBinding12 = computed(() => {
-  const candidate: any = concat(base.value, '-delete')
+  const candidate: any = concat(base.value, '-wrap-right')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding12Previous
   return guardedBinding12Previous = candidate
 })
 let guardedBinding13Previous: any = null
 const guardedBinding13 = computed(() => {
-  const candidate: any = concat(base.value, '-block')
+  const candidate: any = concat(base.value, '-delete')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding13Previous
   return guardedBinding13Previous = candidate
 })
 let guardedBinding14Previous: any = null
 const guardedBinding14 = computed(() => {
-  const candidate: any = concat(base.value, '-center')
+  const candidate: any = concat(base.value, '-alt')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding14Previous
   return guardedBinding14Previous = candidate
 })
 let guardedBinding15Previous: any = null
 const guardedBinding15 = computed(() => {
-  const candidate: any = concat(base.value, '-wrap-left')
+  const candidate: any = concat(base.value, '-alt')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding15Previous
   return guardedBinding15Previous = candidate
 })
-let guardedBinding16Previous: any = null
-const guardedBinding16 = computed(() => {
-  const candidate: any = concat(base.value, '-wrap-right')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding16Previous
-  return guardedBinding16Previous = candidate
-})
-let guardedBinding17Previous: any = null
-const guardedBinding17 = computed(() => {
-  const candidate: any = concat(base.value, '-delete')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding17Previous
-  return guardedBinding17Previous = candidate
-})
-let guardedBinding18Previous: any = null
-const guardedBinding18 = computed(() => {
-  const candidate: any = concat(base.value, '-alt')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding18Previous
-  return guardedBinding18Previous = candidate
-})
-let guardedBinding19Previous: any = null
-const guardedBinding19 = computed(() => {
-  const candidate: any = concat(base.value, '-alt')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding19Previous
-  return guardedBinding19Previous = candidate
-})
 provide('html-next:ui-editor-image-toolbar:base', base)
 provide('html-next:ui-editor-image-toolbar:describing', describing)
 provide('html-next:ui-editor-image-toolbar:draft', draft)
@@ -307,11 +279,14 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
       } as Record<string, any>)[name],
       keys,
     ),
+  initials: { base: 'ui-editor-image-toolbar', describing: false, draft: '' },
   controllerSource: {
     specifier: '../components/ui-editor-image-toolbar/ui-editor-image-toolbar.js',
     definition: './components/ui-editor-image-toolbar/ui-editor-image-toolbar.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
@@ -340,35 +315,91 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
     <UiText as="div" font="sans"><UiEditorToolbar
         :floating="true"
         aria-label="Image actions"
-      ><UiIconButton
-          label="Image in line"
-          size="sm"
-          data-placement="block"
-          :id="guarded"
-          :variant="guardedBinding"
-          :aria-pressed="guardedBinding2"
-        ><UiIcon name="panel-top" /></UiIconButton>{{ ' ' }}<UiIconButton
-          label="Center image"
-          size="sm"
-          data-placement="center"
-          :id="guardedBinding3"
-          :variant="guardedBinding4"
-          :aria-pressed="guardedBinding5"
-        ><UiIcon name="align-center" /></UiIconButton>{{ ' ' }}<UiIconButton
-          label="Wrap text to the right"
-          size="sm"
-          data-placement="wrap-left"
-          :id="guardedBinding6"
-          :variant="guardedBinding7"
-          :aria-pressed="guardedBinding8"
-        ><UiIcon name="panel-left" /></UiIconButton>{{ ' ' }}<UiIconButton
-          label="Wrap text to the left"
-          size="sm"
-          data-placement="wrap-right"
-          :id="guardedBinding9"
-          :variant="guardedBinding10"
-          :aria-pressed="guardedBinding11"
-        ><UiIcon name="panel-right" /></UiIconButton>{{ ' ' }}<UiIconButton
+      ><template
+          v-for="boundInput in [evaluateInput(
+            () =>
+              (((objectValue: any, indexValue: any) =>
+                objectValue === Symbol.for('html-next.invalid-result')
+                  || indexValue === Symbol.for('html-next.invalid-result')
+                  ? Symbol.for('html-next.invalid-result')
+                  : objectValue[indexValue])(
+                  { true: 'outline', false: 'ghost' },
+                  concat(inputRead(checkedProps.placement, inputStatus('placement', true)) === 'block'),
+                )) as any,
+            READY_INPUT,
+          )]"
+        ><UiIconButton
+            label="Image in line"
+            size="sm"
+            data-placement="block"
+            :id="guarded"
+            :variant="boundInput.value"
+            :aria-pressed="guardedBinding"
+            v-bind="{ [BINDING_INPUTS_PROP]: { variant: () => boundInput } }"
+          ><UiIcon name="panel-top" /></UiIconButton></template>{{ ' ' }}<template
+          v-for="boundInputSnapshot in [evaluateInput(
+            () =>
+              (((objectValue: any, indexValue: any) =>
+                objectValue === Symbol.for('html-next.invalid-result')
+                  || indexValue === Symbol.for('html-next.invalid-result')
+                  ? Symbol.for('html-next.invalid-result')
+                  : objectValue[indexValue])(
+                  { true: 'outline', false: 'ghost' },
+                  concat(inputRead(checkedProps.placement, inputStatus('placement', true)) === 'center'),
+                )) as any,
+            READY_INPUT,
+          )]"
+        ><UiIconButton
+            label="Center image"
+            size="sm"
+            data-placement="center"
+            :id="guardedBinding2"
+            :variant="boundInputSnapshot.value"
+            :aria-pressed="guardedBinding3"
+            v-bind="{ [BINDING_INPUTS_PROP]: { variant: () => boundInputSnapshot } }"
+          ><UiIcon name="align-center" /></UiIconButton></template>{{ ' ' }}<template
+          v-for="boundInputSnapshot2 in [evaluateInput(
+            () =>
+              (((objectValue: any, indexValue: any) =>
+                objectValue === Symbol.for('html-next.invalid-result')
+                  || indexValue === Symbol.for('html-next.invalid-result')
+                  ? Symbol.for('html-next.invalid-result')
+                  : objectValue[indexValue])(
+                  { true: 'outline', false: 'ghost' },
+                  concat(inputRead(checkedProps.placement, inputStatus('placement', true)) === 'wrap-left'),
+                )) as any,
+            READY_INPUT,
+          )]"
+        ><UiIconButton
+            label="Wrap text to the right"
+            size="sm"
+            data-placement="wrap-left"
+            :id="guardedBinding4"
+            :variant="boundInputSnapshot2.value"
+            :aria-pressed="guardedBinding5"
+            v-bind="{ [BINDING_INPUTS_PROP]: { variant: () => boundInputSnapshot2 } }"
+          ><UiIcon name="panel-left" /></UiIconButton></template>{{ ' ' }}<template
+          v-for="boundInputSnapshot3 in [evaluateInput(
+            () =>
+              (((objectValue: any, indexValue: any) =>
+                objectValue === Symbol.for('html-next.invalid-result')
+                  || indexValue === Symbol.for('html-next.invalid-result')
+                  ? Symbol.for('html-next.invalid-result')
+                  : objectValue[indexValue])(
+                  { true: 'outline', false: 'ghost' },
+                  concat(inputRead(checkedProps.placement, inputStatus('placement', true)) === 'wrap-right'),
+                )) as any,
+            READY_INPUT,
+          )]"
+        ><UiIconButton
+            label="Wrap text to the left"
+            size="sm"
+            data-placement="wrap-right"
+            :id="guardedBinding6"
+            :variant="boundInputSnapshot3.value"
+            :aria-pressed="guardedBinding7"
+            v-bind="{ [BINDING_INPUTS_PROP]: { variant: () => boundInputSnapshot3 } }"
+          ><UiIcon name="panel-right" /></UiIconButton></template>{{ ' ' }}<UiIconButton
           label="Image description"
           size="sm"
           variant="ghost"
@@ -378,14 +409,14 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
           size="sm"
           variant="ghost"
           data-action="delete"
-          :id="guardedBinding12"
+          :id="guardedBinding8"
         ><UiIcon name="trash" /></UiIconButton></UiEditorToolbar>{{ ' ' }}<UiTooltip
-        :for="guardedBinding13"
-      >Image in line</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding14"
-      >Center image</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding15"
-      >Wrap text to the right</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding16"
+        :for="guardedBinding9"
+      >Image in line</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding10"
+      >Center image</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding11"
+      >Wrap text to the right</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding12"
       >Wrap text to the left</UiTooltip>{{ ' ' }}<UiTooltip :for="base"
-      >Image description</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding17"
+      >Image description</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding13"
       >Delete image</UiTooltip>{{ ' ' }}<UiPopover
         size="sm"
         aria-label="Image description"
@@ -395,11 +426,11 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
       ><form aria-label="Image description">
           <UiStack gap="s"><UiFormField><UiInput
                 size="sm"
-                :id="guardedBinding19"
+                :id="guardedBinding15"
                 :value="draft"
                 ref="altElement"
               />
-              <template #label><label slot="label" :for="guardedBinding18"
+              <template #label><label slot="label" :for="guardedBinding14"
                 >Alt text</label></template></UiFormField>{{ ' ' }}<UiText
               size="xs"
               tone="secondary"

package/vue/UiEditorInsertTableGrid.d.ts

@@ -1,20 +1,20 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     headerRow: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     maxCols: {
         type: PropType<number | null>;
-        default: number;
     };
     maxRows: {
         type: PropType<number | null>;
-        default: number;
     };
     open: {
         type: PropType<boolean | null>;
-        default: boolean;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     insert: (event: CustomEvent<{
@@ -25,19 +25,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     headerRow: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     maxCols: {
         type: PropType<number | null>;
-        default: number;
     };
     maxRows: {
         type: PropType<number | null>;
-        default: number;
     };
     open: {
         type: PropType<boolean | null>;
-        default: boolean;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onInsert?: ((event: CustomEvent<{
@@ -45,11 +44,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly cols: number;
         readonly withHeaderRow: boolean;
     }>) => any) | undefined;
-}>, {
-    open: boolean | null;
-    headerRow: boolean | null;
-    maxCols: number | null;
-    maxRows: number | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorInsertTableGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -14,7 +14,18 @@ import {
   useReflectedProp,
 } from './host'
 import { acceptsControllerWrite } from './props'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -51,10 +62,11 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  headerRow: { type: null as unknown as PropType<boolean | null>, default: false },
-  maxCols: { type: null as unknown as PropType<number | null>, default: 8 },
-  maxRows: { type: null as unknown as PropType<number | null>, default: 8 },
-  open: { type: null as unknown as PropType<boolean | null>, default: false },
+  headerRow: { type: null as unknown as PropType<boolean | null> },
+  maxCols: { type: null as unknown as PropType<number | null> },
+  maxRows: { type: null as unknown as PropType<number | null> },
+  open: { type: null as unknown as PropType<boolean | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   headerRow: false,
@@ -62,36 +74,58 @@ const acceptedProps: Record<string, unknown> = {
   maxRows: 8,
   open: false,
 }
-const checkedProps = computed(() => ({
-  headerRow: checkedProp<boolean>(
-    props['headerRow'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'headerRow',
-    acceptedProps,
-  ) as boolean,
-  maxCols: checkedProp<number>(
-    props['maxCols'],
-    { kind: 'terminal', name: 'integer' },
-    false,
-    'maxCols',
-    acceptedProps,
-  ) as number,
-  maxRows: checkedProp<number>(
-    props['maxRows'],
-    { kind: 'terminal', name: 'integer' },
-    false,
-    'maxRows',
-    acceptedProps,
-  ) as number,
-  open: checkedProp<boolean>(
-    props['open'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'open',
-    acceptedProps,
-  ) as boolean,
-}))
+const inputTracking = vuePropInputs(acceptedProps, {
+  headerRow: false,
+  maxCols: 8,
+  maxRows: 8,
+  open: false,
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'headerRow':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'maxCols':
+      return checkPropInput(value, { kind: 'terminal', name: 'integer' }, true, true)
+    case 'maxRows':
+      return checkPropInput(value, { kind: 'terminal', name: 'integer' }, true, true)
+    case 'open':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    headerRow: propInputs.value<boolean | null>(
+      'headerRow',
+      props['headerRow'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    maxCols: propInputs.value<number | null>(
+      'maxCols',
+      props['maxCols'],
+      props[BINDING_INPUTS_PROP],
+    ) as number,
+    maxRows: propInputs.value<number | null>(
+      'maxRows',
+      props['maxRows'],
+      props[BINDING_INPUTS_PROP],
+    ) as number,
+    open: propInputs.value<boolean | null>(
+      'open',
+      props['open'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -167,11 +201,14 @@ useComponentHost(
         } as Record<string, any>)[name],
         keys,
       ),
+    initials: { cells: [], rows: 8, cols: 8, hint: '', withHeaderRow: false },
     controllerSource: {
       specifier: '../components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js',
       definition: './components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html',
     },
     props: checkedProps,
+    inputs: propInputs,
+    inputTracking,
     propInputs: (name: string) => {
       const incoming = hydrationInstance?.vnode.props
       const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())