@threadlabs/looma 0.30.2 → 0.30.4

package/vue/UiEditorLinkCard.d.ts

@@ -1,24 +1,23 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     detail: {
         type: PropType<string | null>;
-        default: string;
     };
     href: {
         type: PropType<string | null>;
-        default: string;
     };
     label: {
         type: PropType<string | null>;
-        default: string;
     };
     openHref: {
         type: PropType<string | null>;
-        default: string;
     };
     targetLabel: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     edit: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
@@ -26,33 +25,25 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     detail: {
         type: PropType<string | null>;
-        default: string;
     };
     href: {
         type: PropType<string | null>;
-        default: string;
     };
     label: {
         type: PropType<string | null>;
-        default: string;
     };
     openHref: {
         type: PropType<string | null>;
-        default: string;
     };
     targetLabel: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onEdit?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
     onRemove?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
-}>, {
-    detail: string | null;
-    label: string | null;
-    href: string | null;
-    openHref: string | null;
-    targetLabel: string | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorLinkCard.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.64 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -13,7 +13,22 @@ import {
   useReflectedProp,
 } from './host'
 import { acceptsControllerWrite } from './props'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  evaluateInput,
+  type InputBindings,
+  inputComputed,
+  inputDefault,
+  inputRead,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiButton from './UiButton.vue'
 import UiCard from './UiCard.vue'
 import UiCluster from './UiCluster.vue'
@@ -68,11 +83,12 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  detail: { type: null as unknown as PropType<string | null>, default: '' },
-  href: { type: null as unknown as PropType<string | null>, default: '' },
-  label: { type: null as unknown as PropType<string | null>, default: '' },
-  openHref: { type: null as unknown as PropType<string | null>, default: '' },
-  targetLabel: { type: null as unknown as PropType<string | null>, default: 'Item' },
+  detail: { type: null as unknown as PropType<string | null> },
+  href: { type: null as unknown as PropType<string | null> },
+  label: { type: null as unknown as PropType<string | null> },
+  openHref: { type: null as unknown as PropType<string | null> },
+  targetLabel: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   detail: '',
@@ -81,43 +97,66 @@ const acceptedProps: Record<string, unknown> = {
   openHref: '',
   targetLabel: 'Item',
 }
-const checkedProps = computed(() => ({
-  detail: checkedProp<string>(
-    props['detail'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'detail',
-    acceptedProps,
-  ) as string,
-  href: checkedProp<string>(
-    props['href'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'href',
-    acceptedProps,
-  ) as string,
-  label: checkedProp<string>(
-    props['label'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'label',
-    acceptedProps,
-  ) as string,
-  openHref: checkedProp<string>(
-    props['openHref'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'openHref',
-    acceptedProps,
-  ) as string,
-  targetLabel: checkedProp<string>(
-    props['targetLabel'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'targetLabel',
-    acceptedProps,
-  ) as string,
-}))
+const inputTracking = vuePropInputs(acceptedProps, {
+  detail: '',
+  href: '',
+  label: '',
+  openHref: '',
+  targetLabel: 'Item',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'detail':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'href':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'label':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'openHref':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'targetLabel':
+      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 ({
+    detail: propInputs.value<string | null>(
+      'detail',
+      props['detail'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    href: propInputs.value<string | null>(
+      'href',
+      props['href'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    openHref: propInputs.value<string | null>(
+      'openHref',
+      props['openHref'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    targetLabel: propInputs.value<string | null>(
+      'targetLabel',
+      props['targetLabel'],
+      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,36 +170,39 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const base = ref('ui-editor-link-card')
-const resolved = cycleCheckedComputed(() => checkedProps.value.label !== '')
+const resolved: ReturnType<typeof inputComputed<boolean | null>> = inputComputed<boolean | null>(
+  () => inputRead(checkedProps.value.label, propInputs.status('label')) !== '' as any,
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+)
 let shownPrevious: any = null
-const shown = cycleCheckedComputed(() => {
-  const next: 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: checkedProps.value.label, false: checkedProps.value.href },
-      concat(resolved.value),
-    )
-  if (next === Symbol.for('html-next.invalid-result')) {
-    return shownPrevious
-  }
-  return shownPrevious = next
-})
+const shown: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
+  () => {
+    return ((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: inputRead(checkedProps.value.label, propInputs.status('label')),
+          false: inputRead(checkedProps.value.href, propInputs.status('href')),
+        },
+        concat(inputRead(resolved.get(), resolved.status())),
+      ) as any
+  },
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+  next =>
+    (next as unknown) === Symbol.for('html-next.invalid-result')
+      ? shownPrevious
+      : (shownPrevious = next),
+)
 let guardedPrevious: any = null
 const guarded = 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: 'file-text', false: 'link' }, concat(resolved.value))
-  if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedPrevious
-  }
-  return guardedPrevious = candidate
-})
-let guardedBindingPrevious: any = null
-const guardedBinding = computed(() => {
   const candidate: any = concat(
     ((objectValue: any, indexValue: any) =>
       objectValue === Symbol.for('html-next.invalid-result')
@@ -168,11 +210,17 @@ const guardedBinding = computed(() => {
         ? Symbol.for('html-next.invalid-result')
         : objectValue[indexValue])(
         { true: checkedProps.value.targetLabel, false: 'URL' },
-        concat(resolved.value),
+        concat(resolved.get()),
       ),
     ': ',
-    shown.value,
+    shown.get(),
   )
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedPrevious
+  return guardedPrevious = candidate
+})
+let guardedBindingPrevious: any = null
+const guardedBinding = computed(() => {
+  const candidate: any = concat(base.value, '-open')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBindingPrevious
   return guardedBindingPrevious = candidate
 })
@@ -184,7 +232,7 @@ const guardedBinding2 = computed(() => {
 })
 let guardedBinding3Previous: any = null
 const guardedBinding3 = computed(() => {
-  const candidate: any = concat(base.value, '-open')
+  const candidate: any = concat(base.value, '-edit')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
   return guardedBinding3Previous = candidate
 })
@@ -196,7 +244,7 @@ const guardedBinding4 = computed(() => {
 })
 let guardedBinding5Previous: any = null
 const guardedBinding5 = computed(() => {
-  const candidate: any = concat(base.value, '-edit')
+  const candidate: any = concat(base.value, '-remove')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding5Previous
   return guardedBinding5Previous = candidate
 })
@@ -206,12 +254,6 @@ const guardedBinding6 = computed(() => {
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding6Previous
   return guardedBinding6Previous = candidate
 })
-let guardedBinding7Previous: any = null
-const guardedBinding7 = computed(() => {
-  const candidate: any = concat(base.value, '-remove')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding7Previous
-  return guardedBinding7Previous = candidate
-})
 provide('html-next:ui-editor-link-card:base', base)
 checkHydratedRoot('div', 'ui-editor-link-card')
 
@@ -235,11 +277,14 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
       ({ base: { kind: 'terminal', name: 'string' } } as Record<string, any>)[name],
       keys,
     ),
+  initials: { base: 'ui-editor-link-card' },
   controllerSource: {
     specifier: '../components/ui-editor-link-card/ui-editor-link-card.js',
     definition: './components/ui-editor-link-card/ui-editor-link-card.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
@@ -252,6 +297,7 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { base },
   computed: { resolved, shown },
+  availability: { resolved: () => resolved.status(), shown: () => shown.status() },
 })
 </script>
 
@@ -272,13 +318,29 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
         wrap="nowrap"
         role="group"
         aria-label="Link actions"
-      ><UiIcon :name="guarded" />{{ ' ' }}<UiStack
+      ><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: 'file-text', false: 'link' },
+                  concat(inputRead(resolved.get(), resolved.status())),
+                )) as any,
+            READY_INPUT,
+          )]"
+        ><UiIcon
+            :name="boundInput.value"
+            v-bind="{ [BINDING_INPUTS_PROP]: { name: () => boundInput } }"
+          /></template>{{ ' ' }}<UiStack
           gap="none"
           :fill="true"
           :title="checkedProps.href"
-          :aria-label="guardedBinding"
+          :aria-label="guarded"
         ><UiText as="strong" size="sm" weight="medium" font="sans" :truncate="true">{{
-            text(shown)
+            text(shown.get())
           }}</UiText>{{ ' ' }}<UiText
             v-if="checkedProps.detail !== ''"
             as="small"
@@ -296,23 +358,28 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
             target="_blank"
             rel="noopener noreferrer"
             aria-label="Open link"
-            :id="guardedBinding2"
+            :id="guardedBinding"
             :href="checkedProps.openHref"
-          ><UiIcon name="external-link" /></UiButton>{{ ' ' }}<UiTooltip :for="guardedBinding3"
+            v-bind="{
+              [BINDING_INPUTS_PROP]: {
+                href: () => ({ value: checkedProps.openHref, status: inputStatus('openHref', true) }),
+              },
+            }"
+          ><UiIcon name="external-link" /></UiButton>{{ ' ' }}<UiTooltip :for="guardedBinding2"
           >Open link</UiTooltip>{{ ' ' }}</template>{{ ' ' }}<UiIconButton
           label="Edit link"
           variant="ghost"
           size="sm"
           data-link-action="edit"
-          :id="guardedBinding4"
-        ><UiIcon name="pencil" /></UiIconButton>{{ ' ' }}<UiTooltip :for="guardedBinding5"
+          :id="guardedBinding3"
+        ><UiIcon name="pencil" /></UiIconButton>{{ ' ' }}<UiTooltip :for="guardedBinding4"
         >Edit link</UiTooltip>{{ ' ' }}<UiIconButton
           label="Remove link"
           variant="ghost"
           size="sm"
           data-link-action="remove"
-          :id="guardedBinding6"
-        ><UiIcon name="unlink" /></UiIconButton>{{ ' ' }}<UiTooltip :for="guardedBinding7"
+          :id="guardedBinding5"
+        ><UiIcon name="unlink" /></UiIconButton>{{ ' ' }}<UiTooltip :for="guardedBinding6"
         >Remove link</UiTooltip></UiCluster></UiCard>
   </div>
 </template>

package/vue/UiEditorLinkForm.d.ts

@@ -1,56 +1,48 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     error: {
         type: PropType<string | null>;
-        default: string;
     };
     existing: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     mode: {
         type: PropType<"url" | "target" | null>;
-        default: string;
     };
     newTab: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     placeholder: {
         type: PropType<string | null>;
-        default: string;
     };
     results: {
         type: PropType<readonly ({
             readonly id: string;
             readonly label: string;
-            readonly detail?: string;
+            readonly detail?: string | null;
         })[] | null>;
-        default: null;
     };
     searchable: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     selected: {
         type: PropType<string | null>;
-        default: string;
     };
     status: {
         type: PropType<string | null>;
-        default: string;
     };
     text: {
         type: PropType<string | null>;
-        default: string;
     };
     textEditable: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     value: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
@@ -74,55 +66,46 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     error: {
         type: PropType<string | null>;
-        default: string;
     };
     existing: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     mode: {
         type: PropType<"url" | "target" | null>;
-        default: string;
     };
     newTab: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     placeholder: {
         type: PropType<string | null>;
-        default: string;
     };
     results: {
         type: PropType<readonly ({
             readonly id: string;
             readonly label: string;
-            readonly detail?: string;
+            readonly detail?: string | null;
         })[] | null>;
-        default: null;
     };
     searchable: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     selected: {
         type: PropType<string | null>;
-        default: string;
     };
     status: {
         type: PropType<string | null>;
-        default: string;
     };
     text: {
         type: PropType<string | null>;
-        default: string;
     };
     textEditable: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     value: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onClear?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
@@ -143,23 +126,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly id: string;
     }>) => any) | undefined;
     onDismiss?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
-}>, {
-    value: string | null;
-    error: string | null;
-    mode: "url" | "target" | null;
-    text: string | null;
-    selected: string | null;
-    status: string | null;
-    placeholder: string | null;
-    existing: boolean | null;
-    results: readonly {
-        readonly id: string;
-        readonly label: string;
-        readonly detail?: string;
-    }[] | null;
-    searchable: boolean | null;
-    newTab: boolean | null;
-    textEditable: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;