@threadlabs/looma 0.23.21 → 0.23.22

package/vue/UiImage.d.ts

@@ -0,0 +1,100 @@
+import type { PropType } from 'vue';
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    media?: (props: typeof __VLS_1) => any;
+} & {
+    controls?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    alt: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    height: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    placement: {
+        type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
+        default: string;
+    };
+    resizable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    src: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    width: {
+        type: PropType<number | null>;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resize: (event: CustomEvent<{
+        readonly width: number;
+        readonly height: number;
+        readonly phase: "preview" | "commit" | "cancel";
+        readonly trigger: "pointer" | "keyboard";
+    }>) => any;
+    "update:height": (value: number) => any;
+    "update:width": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    alt: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    height: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    placement: {
+        type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
+        default: string;
+    };
+    resizable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    src: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    width: {
+        type: PropType<number | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    onResize?: ((event: CustomEvent<{
+        readonly width: number;
+        readonly height: number;
+        readonly phase: "preview" | "commit" | "cancel";
+        readonly trigger: "pointer" | "keyboard";
+    }>) => any) | undefined;
+    "onUpdate:height"?: ((value: number) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
+}>, {
+    alt: string | null;
+    selected: boolean | null;
+    width: number | null;
+    height: number | null;
+    src: string | null;
+    placement: "center" | "block" | "wrap-left" | "wrap-right" | null;
+    resizable: boolean | null;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiImage.js

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

package/vue/UiImage.vue

@@ -0,0 +1,463 @@
+<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import { createDispatch, useComponentHost } from './host'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    alt: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'alt' },
+      description: 'A text alternative for the image.',
+      default: '',
+    },
+    height: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'height' },
+      description: 'Image height in CSS pixels; resizing preserves the intrinsic aspect ratio.',
+    },
+    placement: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'placement' },
+      description:
+        'Block keeps text below; center centers the image; wrap-left and wrap-right let following text flow beside it.',
+      values: ['block', 'center', 'wrap-left', 'wrap-right'],
+      default: 'block',
+    },
+    resizable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'resizable' },
+      description:
+        'Shows four corner handles while selected. Drag to resize, or focus a handle and use arrow keys; Shift uses a larger increment.',
+      default: false,
+    },
+    selected: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'selected' },
+      description: 'Outlines the media as the current selection.',
+      default: false,
+    },
+    src: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'src' },
+      description: 'The image source, used by the default media.',
+      default: '',
+    },
+    width: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'width' },
+      description:
+        'Image width in CSS pixels; omitted uses intrinsic size in block/center placement or responsive sizing when wrapping.',
+    },
+  },
+} as const
+const props = defineProps({
+  alt: { type: null as unknown as PropType<string | null>, default: '' },
+  height: { type: null as unknown as PropType<number | null>, default: null },
+  placement: {
+    type: null as unknown as PropType<'block' | 'center' | 'wrap-left' | 'wrap-right' | null>,
+    default: 'block',
+  },
+  resizable: { type: null as unknown as PropType<boolean | null>, default: false },
+  selected: { type: null as unknown as PropType<boolean | null>, default: false },
+  src: { type: null as unknown as PropType<string | null>, default: '' },
+  width: { type: null as unknown as PropType<number | null>, default: null },
+})
+const acceptedProps: Record<string, unknown> = {
+  alt: '',
+  height: null,
+  placement: 'block',
+  resizable: false,
+  selected: false,
+  src: '',
+  width: null,
+}
+const checkedProps = computed(() => ({
+  alt: checkedProp<string>(
+    props['alt'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'alt',
+    acceptedProps,
+  ) as string,
+  height: checkedProp<number>(
+    props['height'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'height',
+    acceptedProps,
+  ),
+  placement: checkedProp<'block' | 'center' | 'wrap-left' | 'wrap-right'>(
+    props['placement'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'placement',
+    acceptedProps,
+  ) as 'block' | 'center' | 'wrap-left' | 'wrap-right',
+  resizable: checkedProp<boolean>(
+    props['resizable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'resizable',
+    acceptedProps,
+  ) as boolean,
+  selected: checkedProp<boolean>(
+    props['selected'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'selected',
+    acceptedProps,
+  ) as boolean,
+  src: checkedProp<string>(
+    props['src'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'src',
+    acceptedProps,
+  ) as string,
+  width: checkedProp<number>(
+    props['width'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'width',
+    acceptedProps,
+  ),
+}))
+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 hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:height': [value: number]
+  'update:width': [value: number]
+  resize: [
+    event: CustomEvent<
+      {
+        readonly width: number
+        readonly height: number
+        readonly phase: 'preview' | 'commit' | 'cancel'
+        readonly trigger: 'pointer' | 'keyboard'
+      }
+    >,
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const frameElement = useTemplateRef<HTMLElement>('frame')
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('figure'))
+) {
+  throw Object.assign(new Error('HR005: Server markup for <ui-image> has an incompatible root.'), {
+    name: 'HtmlDiagnosticError',
+    diagnostic: Object.freeze({
+      code: 'HR005',
+      message: 'Server markup for <ui-image> has an incompatible root.',
+    }),
+  })
+}
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.placement && 'placement',
+    checkedProps.value.placement != null
+    && `placement=${encodeURIComponent(checkedProps.value.placement)}`,
+    checkedProps.value.selected && 'selected',
+  ].filter(Boolean).join(' ')
+)
+
+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'
+    || (detail as Record<string, unknown>)['phase'] === 'commit'
+    || (detail as Record<string, unknown>)['phase'] === 'cancel')
+  && ((detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (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,
+  },
+  modeled: ['height', 'width'],
+})
+
+useComponentHost(() => import('../components/ui-image/ui-image.js'), {
+  root,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-image/ui-image.js',
+    definition: './components/ui-image/ui-image.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: ['alt', 'height', 'placement', 'resizable', 'selected', 'src', 'width'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  refs: { frame: frameElement },
+})
+</script>
+
+<template>
+  <figure
+    data-component="ui-image"
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
+    :data-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
+    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-resizable="reflectedProp('resizable', 'resizable', checkedProps.resizable, undefined, false)"
+    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-src="reflectedProp('src', 'src', checkedProps.src, undefined, false)"
+    :data-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
+    :data-ui-image-state="hostState || undefined"
+    ref="root"
+  >
+    <div class="frame" ref="frame">
+      <slot name="media"><img
+          :src="checkedProps.src ?? undefined"
+          :alt="checkedProps.alt ?? undefined"
+          :width="checkedProps.width ?? undefined"
+          :height="checkedProps.height ?? undefined"
+        ></slot>
+      <div class="handles" :hidden="!(checkedProps.selected && checkedProps.resizable)">
+        <button
+          type="button"
+          class="handle"
+          data-corner="top-left"
+          aria-label="Resize image from top left"
+        >
+        </button>
+        <button
+          type="button"
+          class="handle"
+          data-corner="top-right"
+          aria-label="Resize image from top right"
+        >
+        </button>
+        <button
+          type="button"
+          class="handle"
+          data-corner="bottom-left"
+          aria-label="Resize image from bottom left"
+        >
+        </button>
+        <button
+          type="button"
+          class="handle"
+          data-corner="bottom-right"
+          aria-label="Resize image from bottom right"
+        >
+        </button>
+      </div>
+      <slot name="controls" />
+    </div>
+  </figure>
+</template>
+
+<style scoped>
+[data-component~="ui-image"] {
+  display: flex;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--ui-space-3) 0;
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=center"] {
+  justify-content: center;
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"] {
+  float: left;
+  padding-inline-end: var(--ui-space-4);
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"] {
+  float: right;
+  padding-inline-start: var(--ui-space-4);
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
+  inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame {
+  inline-size: 100%;
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame
+  img,
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame
+  :slotted(img) {
+  inline-size: 100%;
+}
+.frame {
+  position: relative;
+  flex: 0 1 auto;
+  inline-size: var(--_ui-image-width, fit-content);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  align-self: flex-start;
+  border-radius: var(--ui-radius-md);
+}
+.frame img, .frame :slotted(img) {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+  margin: 0;
+  border-radius: inherit;
+}
+[data-component~="ui-image"][data-resizing] .frame img,
+[data-component~="ui-image"][data-resizing] .frame :slotted(img) {
+  inline-size: 100%;
+}
+[data-component~="ui-image"][data-ui-image-state~="selected"] .frame {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-border-width);
+}
+.handle {
+  position: absolute;
+  z-index: 1;
+  inline-size: 24px;
+  block-size: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  touch-action: none;
+}
+.handle::after {
+  content: "";
+  position: absolute;
+  inset: 8px;
+  background: var(--ui-surface);
+  border: var(--ui-border-width) solid var(--ui-focus-ring);
+  border-radius: var(--ui-radius-sm);
+}
+.handle:focus-visible {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  border-radius: var(--ui-radius-sm);
+}
+.handle[data-corner="top-left"] {
+  top: -12px;
+  left: -12px;
+  cursor: nwse-resize;
+}
+.handle[data-corner="top-right"] {
+  top: -12px;
+  right: -12px;
+  cursor: nesw-resize;
+}
+.handle[data-corner="bottom-left"] {
+  bottom: -12px;
+  left: -12px;
+  cursor: nesw-resize;
+}
+.handle[data-corner="bottom-right"] {
+  bottom: -12px;
+  right: -12px;
+  cursor: nwse-resize;
+}
+.handles[hidden], [data-component~="ui-image"][hidden] {
+  display: none;
+}
+@media (max-width: 767px) {
+  [data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
+    float: none;
+    inline-size: 100%;
+    padding-inline: 0;
+  }
+  [data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+    .handles {
+    display: none;
+  }
+}
+@media (pointer: coarse) {
+  .handle {
+    inline-size: 44px;
+    block-size: 44px;
+  }
+  .handle::after {
+    inset: 18px;
+  }
+  .handle[data-corner="top-left"] {
+    top: -22px;
+    left: -22px;
+  }
+  .handle[data-corner="top-right"] {
+    top: -22px;
+    right: -22px;
+  }
+  .handle[data-corner="bottom-left"] {
+    bottom: -22px;
+    left: -22px;
+  }
+  .handle[data-corner="bottom-right"] {
+    bottom: -22px;
+    right: -22px;
+  }
+}
+@media (forced-colors: active) {
+  [data-component~="ui-image"][data-ui-image-state~="selected"] .frame, .handle:focus-visible {
+    outline-color: Highlight;
+  }
+  .handle::after {
+    border-color: Highlight;
+    background: Canvas;
+  }
+}
+</style>

package/vue/UiSeparator.d.ts

@@ -4,13 +4,31 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<"horizontal" | "vertical" | null>;
         default: string;
     };
+    selectable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     orientation: {
         type: PropType<"horizontal" | "vertical" | null>;
         default: string;
     };
+    selectable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
+    selected: boolean | null;
     orientation: "vertical" | "horizontal" | null;
+    selectable: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiSeparator.vue

@@ -17,6 +17,22 @@ const propValidityContract = {
       values: ['horizontal', 'vertical'],
       default: 'horizontal',
     },
+    selectable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'selectable' },
+      description:
+        'Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.',
+      default: false,
+    },
+    selected: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'selected' },
+      description:
+        'Shows the selected document divider. Selection does not change separator semantics.',
+      default: false,
+    },
   },
 } as const
 const props = defineProps({
@@ -24,8 +40,14 @@ const props = defineProps({
     type: null as unknown as PropType<'horizontal' | 'vertical' | null>,
     default: 'horizontal',
   },
+  selectable: { type: null as unknown as PropType<boolean | null>, default: false },
+  selected: { type: null as unknown as PropType<boolean | null>, default: false },
 })
-const acceptedProps: Record<string, unknown> = { orientation: 'horizontal' }
+const acceptedProps: Record<string, unknown> = {
+  orientation: 'horizontal',
+  selectable: false,
+  selected: false,
+}
 const checkedProps = computed(() => ({
   orientation: checkedProp<'horizontal' | 'vertical'>(
     props['orientation'],
@@ -34,6 +56,20 @@ const checkedProps = computed(() => ({
     'orientation',
     acceptedProps,
   ) as 'horizontal' | 'vertical',
+  selectable: checkedProp<boolean>(
+    props['selectable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'selectable',
+    acceptedProps,
+  ) as boolean,
+  selected: checkedProp<boolean>(
+    props['selected'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'selected',
+    acceptedProps,
+  ) as boolean,
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -89,6 +125,14 @@ if (
     },
   )
 }
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.selectable && 'selectable',
+    checkedProps.value.selected && 'selected',
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
@@ -98,6 +142,9 @@ if (
     :aria-orientation="checkedProps.orientation ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-selectable="reflectedProp('selectable', 'selectable', checkedProps.selectable, undefined, false)"
+    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-ui-separator-state="hostState || undefined"
   >
 </template>
 
@@ -124,4 +171,22 @@ if (
   border-inline-start: var(--ui-border-width) solid
     var(--ui-separator-color, var(--ui-border-divider));
 }
+
+[data-component~="ui-separator"][data-ui-separator-state~="selectable"] {
+  min-block-size: var(--ui-control-size-sm);
+  border: 0;
+  background: linear-gradient(
+    var(--ui-separator-color, var(--ui-border-divider)),
+    var(--ui-separator-color, var(--ui-border-divider))
+  ) center / 100% var(--ui-border-width) no-repeat;
+  cursor: pointer;
+}
+[data-component~="ui-separator"][data-ui-separator-state~="selectable"]:hover {
+  background-color: var(--ui-surface-hover);
+}
+[data-component~="ui-separator"][data-ui-separator-state~="selected"] {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
+  border-radius: var(--ui-radius-sm);
+}
 </style>