@threadlabs/looma 0.30.2 → 0.30.3

package/vue/UiEditorSlashMenuItem.vue

@@ -1,9 +1,19 @@
-<!-- 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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
-import { checkedProp, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -49,11 +59,12 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  description: { type: null as unknown as PropType<string | null>, default: '' },
-  disabled: { type: null as unknown as PropType<boolean | null>, default: false },
-  icon: { type: null as unknown as PropType<string | null>, default: '' },
-  keywords: { type: null as unknown as PropType<string | null>, default: '' },
-  value: { type: null as unknown as PropType<string | null>, default: '' },
+  description: { type: null as unknown as PropType<string | null> },
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  icon: { type: null as unknown as PropType<string | null> },
+  keywords: { type: null as unknown as PropType<string | null> },
+  value: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   description: '',
@@ -62,43 +73,66 @@ const acceptedProps: Record<string, unknown> = {
   keywords: '',
   value: '',
 }
-const checkedProps = computed(() => ({
-  description: checkedProp<string>(
-    props['description'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'description',
-    acceptedProps,
-  ) as string,
-  disabled: checkedProp<boolean>(
-    props['disabled'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'disabled',
-    acceptedProps,
-  ) as boolean,
-  icon: checkedProp<string>(
-    props['icon'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'icon',
-    acceptedProps,
-  ) as string,
-  keywords: checkedProp<string>(
-    props['keywords'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'keywords',
-    acceptedProps,
-  ) as string,
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    acceptedProps,
-  ) as string,
-}))
+const inputTracking = vuePropInputs(acceptedProps, {
+  description: '',
+  disabled: false,
+  icon: '',
+  keywords: '',
+  value: '',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'description':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'icon':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'keywords':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'value':
+      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 ({
+    description: propInputs.value<string | null>(
+      'description',
+      props['description'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    disabled: propInputs.value<boolean | null>(
+      'disabled',
+      props['disabled'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    icon: propInputs.value<string | null>(
+      'icon',
+      props['icon'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    keywords: propInputs.value<string | null>(
+      'keywords',
+      props['keywords'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    value: propInputs.value<string | null>(
+      'value',
+      props['value'],
+      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
@@ -131,10 +165,18 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
       class="icon"
       aria-hidden="true"
       data-hn-ui-editor-slash-menu-item
-    ><UiIcon class="ui-icon" :name="checkedProps.icon" /></span>{{ ' ' }}<span
-      class="body"
-      data-hn-ui-editor-slash-menu-item
-    ><span class="title" data-hn-ui-editor-slash-menu-item><slot /></span>
+    ><UiIcon
+        class="ui-icon"
+        :name="checkedProps.icon"
+        v-bind="{
+          [BINDING_INPUTS_PROP]: {
+            name: () => ({ value: checkedProps.icon, status: inputStatus('icon', true) }),
+          },
+        }"
+      /></span>{{ ' ' }}<span class="body" data-hn-ui-editor-slash-menu-item><span
+        class="title"
+        data-hn-ui-editor-slash-menu-item
+      ><slot /></span>
       <span v-if="checkedProps.description" class="description" data-hn-ui-editor-slash-menu-item>{{
         checkedProps.description
       }}</span></span>

package/vue/UiEditorSurface.d.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
@@ -6,16 +7,18 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
-        default: string;
     };
-}>> & Readonly<{}>, {
-    density: "comfortable" | "compact" | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorSurface.vue

@@ -1,9 +1,19 @@
-<!-- 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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
-import { checkedProp, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -21,21 +31,41 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  density: {
-    type: null as unknown as PropType<'comfortable' | 'compact' | null>,
-    default: 'comfortable',
-  },
+  density: { type: null as unknown as PropType<'comfortable' | 'compact' | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = { density: 'comfortable' }
-const checkedProps = computed(() => ({
-  density: checkedProp<'comfortable' | 'compact'>(
-    props['density'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'density',
-    acceptedProps,
-  ) as 'comfortable' | 'compact',
-}))
+const inputTracking = vuePropInputs(
+  acceptedProps,
+  { density: 'comfortable' },
+  (name, value, source, values) => {
+    switch (name) {
+      case 'density':
+        return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+      default:
+        return { ok: false }
+    }
+  },
+  () => {
+    void checkedProps.value
+  },
+)
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    density: propInputs.value<'comfortable' | 'compact' | null>(
+      'density',
+      props['density'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'comfortable' | 'compact',
+  })
+})
+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

package/vue/UiEditorTableContextMenu.d.ts

@@ -1,28 +1,26 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 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>;
-        default: null;
     };
     cellBackground: {
         type: PropType<string | null>;
-        default: string;
     };
     headerColumn: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     headerRow: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     open: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     scope: {
         type: PropType<"cell" | "row" | "column" | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: (event: CustomEvent<{
@@ -31,39 +29,29 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<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>;
-        default: null;
     };
     cellBackground: {
         type: PropType<string | null>;
-        default: string;
     };
     headerColumn: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     headerRow: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     open: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     scope: {
         type: PropType<"cell" | "row" | "column" | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onAction?: ((event: CustomEvent<{
         readonly action: "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";
     }>) => any) | undefined;
-}>, {
-    open: boolean | null;
-    actions: readonly ("align-center" | "align-left" | "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;
-    headerRow: boolean | null;
-    scope: "row" | "cell" | "column" | null;
-    cellBackground: string | null;
-    headerColumn: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorTableContextMenu.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, 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'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -129,13 +140,13 @@ const props = defineProps({
         | 'delete-table'
       )[] | null
     >,
-    default: null,
   },
-  cellBackground: { type: null as unknown as PropType<string | null>, default: '' },
-  headerColumn: { type: null as unknown as PropType<boolean | null>, default: false },
-  headerRow: { type: null as unknown as PropType<boolean | null>, default: false },
-  open: { type: null as unknown as PropType<boolean | null>, default: false },
-  scope: { type: null as unknown as PropType<'cell' | 'row' | 'column' | null>, default: 'cell' },
+  cellBackground: { type: null as unknown as PropType<string | null> },
+  headerColumn: { type: null as unknown as PropType<boolean | null> },
+  headerRow: { type: null as unknown as PropType<boolean | null> },
+  open: { type: null as unknown as PropType<boolean | null> },
+  scope: { type: null as unknown as PropType<'cell' | 'row' | 'column' | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   actions: null,
@@ -145,111 +156,135 @@ const acceptedProps: Record<string, unknown> = {
   open: false,
   scope: 'cell',
 }
-const checkedProps = computed(() => ({
-  actions: checkedProp<
-    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'
-    )[]
-  >(
-    props['actions'],
-    {
-      kind: 'list',
-      item: {
-        kind: 'constrained',
-        base: { kind: 'terminal', name: 'keyword' },
-        values: [
-          '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',
-        ],
-      },
-    },
-    false,
-    'actions',
-    acceptedProps,
-  ),
-  cellBackground: checkedProp<string>(
-    props['cellBackground'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'cellBackground',
-    acceptedProps,
-  ) as string,
-  headerColumn: checkedProp<boolean>(
-    props['headerColumn'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'headerColumn',
-    acceptedProps,
-  ) as boolean,
-  headerRow: checkedProp<boolean>(
-    props['headerRow'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'headerRow',
-    acceptedProps,
-  ) as boolean,
-  open: checkedProp<boolean>(
-    props['open'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'open',
-    acceptedProps,
-  ) as boolean,
-  scope: checkedProp<'cell' | 'row' | 'column'>(
-    props['scope'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'scope',
-    acceptedProps,
-  ) as 'cell' | 'row' | 'column',
-}))
+const inputTracking = vuePropInputs(acceptedProps, {
+  cellBackground: '',
+  headerColumn: false,
+  headerRow: false,
+  open: false,
+  scope: 'cell',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'actions':
+      return checkPropInput(
+        value,
+        {
+          kind: 'list',
+          item: {
+            kind: 'constrained',
+            base: { kind: 'terminal', name: 'keyword' },
+            values: [
+              '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',
+            ],
+          },
+        },
+        true,
+        true,
+      )
+    case 'cellBackground':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'headerColumn':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'headerRow':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'open':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'scope':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    actions: propInputs.value<
+      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
+    >('actions', props['actions'], props[BINDING_INPUTS_PROP]),
+    cellBackground: propInputs.value<string | null>(
+      'cellBackground',
+      props['cellBackground'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    headerColumn: propInputs.value<boolean | null>(
+      'headerColumn',
+      props['headerColumn'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    headerRow: propInputs.value<boolean | null>(
+      'headerRow',
+      props['headerRow'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    open: propInputs.value<boolean | null>(
+      'open',
+      props['open'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    scope: propInputs.value<'cell' | 'row' | 'column' | null>(
+      'scope',
+      props['scope'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'cell' | 'row' | 'column',
+  })
+})
+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
@@ -417,11 +452,14 @@ useComponentHost(
         } as Record<string, any>)[name],
         keys,
       ),
+    initials: { swatches: [], sections: [] },
     controllerSource: {
       specifier: '../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js',
       definition: './components/ui-editor-table-context-menu/ui-editor-table-context-menu.html',
     },
     props: checkedProps,
+    inputs: propInputs,
+    inputTracking,
     propInputs: (name: string) => {
       const incoming = hydrationInstance?.vnode.props
       const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())