@threadlabs/looma 0.28.5 → 0.28.7

package/vue/UiEditable.vue

@@ -1,20 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 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>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 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'
 import { vBindControl } from './control'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -213,38 +208,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:edit': [value: boolean]
@@ -286,58 +250,10 @@ const inputElement = useTemplateRef<HTMLElement>('inputElement')
 const internalEdit = ref(false)
 const internalValue = ref('')
 const draft = ref('')
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalValue.value == null || typeof internalValue.value === 'string',
-      '$internalValue:internalValue',
-      './components/ui-editable/ui-editable.html: HR007: Reference internalValue does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = internalValue.value
-})
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      draft.value == null || typeof draft.value === 'string',
-      '$draft:draft',
-      './components/ui-editable/ui-editable.html: HR007: Reference draft does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = draft.value
-})
-let guardedBinding2Previous: any
-const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalEdit.value == null || typeof internalEdit.value === 'boolean',
-      '$disabled or not $internalEdit:internalEdit',
-      './components/ui-editable/ui-editable.html: HR007: Reference internalEdit does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
-  return guardedBinding2Previous = checkedProps.value.disabled || !internalEdit.value
-})
 provide('html-next:ui-editable:internalEdit', internalEdit)
 provide('html-next:ui-editable:internalValue', internalValue)
 provide('html-next:ui-editable:draft', draft)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-editable> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editable> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-editable')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -436,7 +352,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
 
 <template>
   <div
-    data-component="ui-editable"
+    class="ui-editable"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
@@ -460,7 +376,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
         :disabled="checkedProps.disabled ?? undefined"
         ref="previewElement"
       >
-        <span class="text">{{ guarded }}</span>
+        <span class="text">{{ internalValue }}</span>
         <span v-if="checkedProps.hint" class="hint" aria-hidden="true">{{
           checkedProps.hint
         }}</span>
@@ -472,7 +388,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
         :aria-label="checkedProps.label ?? undefined"
         :placeholder="checkedProps.placeholder ?? undefined"
         :required="checkedProps.required ?? undefined"
-        :disabled="guardedBinding2"
+        :disabled="checkedProps.disabled || !internalEdit"
         ref="inputElement"
       >
     </div>
@@ -484,132 +400,133 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
 </template>
 
 <style scoped>
-[data-component~="ui-editable"] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-}
-
 /* The value and the input share one grid cell with identical box metrics, so switching between
  * display and edit never changes the control's size or moves the text. */
-.field {
-  display: inline-grid;
-  min-inline-size: 8rem;
-  max-inline-size: 100%;
-}
 
-.preview,
-.input {
-  grid-area: 1 / 1;
-  box-sizing: border-box;
-  min-block-size: var(--ui-control-size-sm);
-  margin: 0;
-  padding: var(--ui-space-1) var(--ui-space-2);
-  border: var(--ui-border-width) solid transparent;
-  border-radius: var(--ui-radius-md);
-  font: inherit;
-  line-height: var(--ui-line-height-md);
-  color: inherit;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
+/* Contained so it takes the value's width instead of its own default input width. */
 
-.preview {
-  display: inline-flex;
-  gap: var(--ui-space-2);
-  align-items: center;
-  background: transparent;
-  text-align: start;
-  cursor: pointer;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-.preview:hover:not(:disabled) {
-  background: var(--ui-surface-muted);
-}
+@scope (.ui-editable) {
+  :scope:where(:scope) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-2);
+    min-inline-size: 0;
+    color: var(--ui-text-primary);
+  }
+  .field {
+    display: inline-grid;
+    min-inline-size: 8rem;
+    max-inline-size: 100%;
+  }
 
-.preview:focus-visible {
-  outline: none;
-  box-shadow: var(--ui-focus-halo);
-}
+  .preview, .input {
+    grid-area: 1 / 1;
+    box-sizing: border-box;
+    min-block-size: var(--ui-control-size-sm);
+    margin: 0;
+    padding: var(--ui-space-1) var(--ui-space-2);
+    border: var(--ui-border-width) solid transparent;
+    border-radius: var(--ui-radius-md);
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    color: inherit;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-.hint {
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
-}
+  .preview {
+    display: inline-flex;
+    gap: var(--ui-space-2);
+    align-items: center;
+    background: transparent;
+    text-align: start;
+    cursor: pointer;
+  }
 
-/* Contained so it takes the value's width instead of its own default input width. */
-.input {
-  contain: inline-size;
-  inline-size: 100%;
-  min-inline-size: 0;
-  visibility: hidden;
-  background: var(--ui-control-surface, var(--ui-surface-elevated));
-}
+  .preview:hover:not(:disabled) {
+    background: var(--ui-surface-muted);
+  }
 
-.input:focus {
-  outline: none;
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
-  box-shadow:
-    var(--ui-control-inset),
-    var(--ui-control-focus-halo-shadow);
-}
+  .preview:focus-visible {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
+  }
 
-.input::selection {
-  background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-}
+  .hint {
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+  }
+  .input {
+    contain: inline-size;
+    inline-size: 100%;
+    min-inline-size: 0;
+    visibility: hidden;
+    background: var(--ui-control-surface, var(--ui-surface-elevated));
+  }
 
-[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview {
-  visibility: hidden;
-}
-[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input {
-  visibility: visible;
-}
+  .input:focus {
+    outline: none;
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
+  }
 
-.actions {
-  display: none;
-  gap: var(--ui-space-1);
-}
-[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions {
-  display: inline-flex;
-}
+  .input::selection {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+  }
 
-.actions button {
-  min-block-size: var(--ui-control-size-sm);
-  padding: 0 var(--ui-space-3);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-md);
-  background: var(--ui-surface-elevated);
-  background-image: var(--ui-raised-highlight);
-  box-shadow: var(--ui-raised);
-  color: inherit;
-  font: inherit;
-  font-size: var(--ui-font-size-sm);
-  cursor: pointer;
-}
+  :scope[data-ui-editable-state~="internalEdit"] .preview {
+    visibility: hidden;
+  }
+  :scope[data-ui-editable-state~="internalEdit"] .input {
+    visibility: visible;
+  }
 
-.actions .save {
-  border-color: var(--ui-accent-solid);
-  background: var(--ui-accent-solid);
-  color: var(--ui-text-on-accent);
-}
+  .actions {
+    display: none;
+    gap: var(--ui-space-1);
+  }
+  :scope[data-ui-editable-state~="internalEdit"] .actions {
+    display: inline-flex;
+  }
 
-.actions button:focus-visible {
-  outline: none;
-  box-shadow: var(--ui-focus-halo);
-}
+  .actions button {
+    min-block-size: var(--ui-control-size-sm);
+    padding: 0 var(--ui-space-3);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-md);
+    background: var(--ui-surface-elevated);
+    background-image: var(--ui-raised-highlight);
+    box-shadow: var(--ui-raised);
+    color: inherit;
+    font: inherit;
+    font-size: var(--ui-font-size-sm);
+    cursor: pointer;
+  }
 
-[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview {
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
+  .actions .save {
+    border-color: var(--ui-accent-solid);
+    background: var(--ui-accent-solid);
+    color: var(--ui-text-on-accent);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-editable"][hidden] {
-  display: none;
+  .actions button:focus-visible {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
+  }
+
+  :scope[data-ui-editable-state~="disabled"] .preview {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiEditorBlockActions.d.ts

@@ -0,0 +1,33 @@
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    for: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    placement: {
+        type: PropType<"bottom-start" | "top-start" | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: (event: CustomEvent<{
+        readonly action: "insert-below" | "duplicate" | "delete";
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    for: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    placement: {
+        type: PropType<"bottom-start" | "top-start" | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    onAction?: ((event: CustomEvent<{
+        readonly action: "insert-below" | "duplicate" | "delete";
+    }>) => any) | undefined;
+}>, {
+    for: string | null;
+    placement: "top-start" | "bottom-start" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorBlockActions.js

@@ -0,0 +1,2 @@
+import { t as UiEditorBlockActions_default } from "./chunks/UiEditorBlockActions.js";
+export { UiEditorBlockActions_default as default };

package/vue/UiEditorBlockActions.vue

@@ -0,0 +1,125 @@
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiMenu from './UiMenu.vue'
+import UiMenuItem from './UiMenuItem.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    for: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'for' },
+      description: 'The id of the button that opens the menu and anchors it.',
+      default: '',
+    },
+    placement: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'placement' },
+      description:
+        'Where the menu opens beside its button; top-start suits a toolbar docked at the bottom of the screen.',
+      values: ['bottom-start', 'top-start'],
+      default: 'bottom-start',
+    },
+  },
+} as const
+const props = defineProps({
+  for: { type: null as unknown as PropType<string | null>, default: '' },
+  placement: {
+    type: null as unknown as PropType<'bottom-start' | 'top-start' | null>,
+    default: 'bottom-start',
+  },
+})
+const acceptedProps: Record<string, unknown> = { for: '', placement: 'bottom-start' }
+const checkedProps = computed(() => ({
+  for: checkedProp<string>(
+    props['for'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'for',
+    acceptedProps,
+  ) as string,
+  placement: checkedProp<'bottom-start' | 'top-start'>(
+    props['placement'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'placement',
+    acceptedProps,
+  ) as 'bottom-start' | 'top-start',
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  action: [event: CustomEvent<{ readonly action: 'insert-below' | 'duplicate' | 'delete' }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+checkHydratedRoot('div', 'ui-editor-block-actions')
+
+const isActionDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && ((detail as Record<string, unknown>)['action'] === 'insert-below'
+    || (detail as Record<string, unknown>)['action'] === 'duplicate'
+    || (detail as Record<string, unknown>)['action'] === 'delete')
+  && Object.keys(detail as object).every((key) => ['action'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    action: isActionDetail,
+  },
+})
+
+useComponentHost(() => import('../components/ui-editor-block-actions/ui-editor-block-actions.js'), {
+  root,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-editor-block-actions/ui-editor-block-actions.js',
+    definition: './components/ui-editor-block-actions/ui-editor-block-actions.html',
+  },
+  props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['for', 'placement'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+})
+</script>
+
+<template>
+  <div
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    ref="root"
+  >
+    <UiMenu
+      aria-label="Block actions"
+      :for="checkedProps.for"
+      :placement="checkedProps.placement"
+    ><UiMenuItem value="insert-below">Insert paragraph below</UiMenuItem>
+      <UiMenuItem value="duplicate">Duplicate block</UiMenuItem>
+      <UiMenuItem value="delete">Delete block</UiMenuItem></UiMenu>
+  </div>
+</template>

package/vue/UiEditorImageToolbar.d.ts

@@ -1,6 +1,4 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     alt: {
         type: PropType<string | null>;
@@ -52,3 +50,5 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     target: string | null;
     placement: "center" | "block" | "wrap-left" | "wrap-right" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;