@abraca/nuxt 1.9.1 → 2.0.1

package/dist/runtime/components/aware/AMedia.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
+import { useAAUIState } from "../../composables/useAAUIState";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  tag: { type: String, required: false, default: "video" },
+  src: { type: String, required: false },
+  controls: { type: Boolean, required: false, default: true },
+  awareness: { type: Boolean, required: false, default: true },
+  live: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const liveState = useAAUIState(
+  () => `${props.fieldKey}:playback`,
+  { defaultValue: { playing: false, t: 0, rate: 1 } }
+);
+const elRef = ref(null);
+let suppress = false;
+const SYNC_TOLERANCE = 0.5;
+function publishLocal() {
+  if (!enableLive.value || suppress) return;
+  const el = elRef.value;
+  if (!el) return;
+  liveState.value = {
+    playing: !el.paused,
+    t: el.currentTime,
+    rate: el.playbackRate
+  };
+}
+function applyRemote() {
+  const remote = liveState.value;
+  const el = elRef.value;
+  if (!enableLive.value || !remote || !el) return;
+  suppress = true;
+  try {
+    if (Math.abs(el.currentTime - remote.t) > SYNC_TOLERANCE) el.currentTime = remote.t;
+    if (el.playbackRate !== remote.rate) el.playbackRate = remote.rate;
+    if (remote.playing && el.paused) el.play().catch(() => {
+    });
+    else if (!remote.playing && !el.paused) el.pause();
+  } finally {
+    queueMicrotask(() => {
+      suppress = false;
+    });
+  }
+}
+watch(liveState, applyRemote, { deep: true });
+onMounted(() => {
+  const el = elRef.value;
+  if (!el) return;
+  el.addEventListener("play", publishLocal);
+  el.addEventListener("pause", publishLocal);
+  el.addEventListener("seeked", publishLocal);
+  el.addEventListener("ratechange", publishLocal);
+  applyRemote();
+});
+onBeforeUnmount(() => {
+  const el = elRef.value;
+  if (!el) return;
+  el.removeEventListener("play", publishLocal);
+  el.removeEventListener("pause", publishLocal);
+  el.removeEventListener("seeked", publishLocal);
+  el.removeEventListener("ratechange", publishLocal);
+});
+</script>
+
+<template>
+  <video
+    v-if="tag === 'video'"
+    ref="elRef"
+    :src="src"
+    :controls="controls"
+    v-bind="attrs"
+  />
+  <audio
+    v-else
+    ref="elRef"
+    :src="src"
+    :controls="controls"
+    v-bind="attrs"
+  />
+</template>

package/dist/runtime/components/aware/AMedia.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    fieldKey: string;
+    /** 'video' (default) or 'audio'. */
+    tag?: 'video' | 'audio';
+    src?: string;
+    controls?: boolean;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    tag: "video" | "audio";
+    live: boolean;
+    total: boolean;
+    controls: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/AModal.d.vue.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_31: string, __VLS_32: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_31>]?: (props: typeof __VLS_32) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    header?: (props: typeof __VLS_11) => any;
+} & {
+    body?: (props: typeof __VLS_14) => any;
+} & {
+    footer?: (props: typeof __VLS_17) => any;
+} & {
+    content?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/dist/runtime/components/aware/AModal.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAUIState, useAAUIStateAuthor } from "../../composables/useAAUIState";
+import { useAwareness } from "../../composables/useAwareness";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  live: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
+const author = useAAUIStateAuthor(() => `${props.fieldKey}:open`);
+const { states } = useAwareness();
+const hasExternalOpen = computed(() => "open" in attrs || "onUpdate:open" in attrs);
+const local = ref(enableLive.value ? !!liveOpen.value : false);
+watch(liveOpen, (val) => {
+  if (!enableLive.value) return;
+  const next = !!val;
+  if (local.value !== next) local.value = next;
+});
+watch(local, (val) => {
+  if (!enableLive.value) return;
+  if (!!liveOpen.value !== val) liveOpen.value = val;
+});
+const openedByUser = computed(() => {
+  if (!enableLive.value || !local.value || author.value == null) return null;
+  const state = states.value.get(author.value);
+  return state?.user ?? null;
+});
+</script>
+
+<template>
+  <UModal
+    v-if="enableLive && !hasExternalOpen"
+    v-model:open="local"
+    v-bind="attrs"
+  >
+    <slot />
+
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
+
+    <template
+      v-if="$slots.body || openedByUser"
+      #body
+    >
+      <div
+        v-if="openedByUser"
+        class="aa-attribution"
+      >
+        <span
+          class="aa-attribution__dot"
+          :style="{ background: openedByUser.color ?? 'var(--ui-text-muted)' }"
+        />
+        Opened by {{ openedByUser.name }}
+      </div>
+      <slot name="body" />
+    </template>
+
+    <template
+      v-if="$slots.footer"
+      #footer
+    >
+      <slot name="footer" />
+    </template>
+
+    <template
+      v-if="$slots.content"
+      #content
+    >
+      <div
+        v-if="openedByUser"
+        class="aa-attribution"
+      >
+        <span
+          class="aa-attribution__dot"
+          :style="{ background: openedByUser.color ?? 'var(--ui-text-muted)' }"
+        />
+        Opened by {{ openedByUser.name }}
+      </div>
+      <slot name="content" />
+    </template>
+  </UModal>
+
+  <UModal
+    v-else
+    v-bind="attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData ?? {}"
+      />
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.aa-attribution{align-items:center;background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text-muted);display:inline-flex;font-size:.6875rem;font-weight:500;gap:.4rem;margin-bottom:.5rem;padding:.25rem .6rem}.aa-attribution__dot{border-radius:999px;height:.5rem;width:.5rem}
+</style>

package/dist/runtime/components/aware/AModal.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_31: string, __VLS_32: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_31>]?: (props: typeof __VLS_32) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    header?: (props: typeof __VLS_11) => any;
+} & {
+    body?: (props: typeof __VLS_14) => any;
+} & {
+    footer?: (props: typeof __VLS_17) => any;
+} & {
+    content?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/dist/runtime/components/aware/ANavigationMenu.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/dist/runtime/components/aware/ANavigationMenu.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAUIState } from "../../composables/useAAUIState";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+import AHoverItem from "./AHoverItem.vue";
+function itemId(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.value ?? item.id ?? item.label ?? "");
+}
+function itemLabel(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.label ?? item.value ?? item.id ?? "");
+}
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  live: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, hoverHandlers } = useAAField(() => props.fieldKey);
+const liveActive = useAAUIState(() => `${props.fieldKey}:active`, { defaultValue: "" });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const local = ref(enableLive.value ? liveActive.value ?? "" : "");
+watch(liveActive, (val) => {
+  if (enableLive.value && local.value !== (val ?? "")) local.value = val ?? "";
+});
+watch(local, (val) => {
+  if (enableLive.value && (liveActive.value ?? "") !== val) liveActive.value = val;
+});
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="enableAwareness ? hoverHandlers : {}"
+  >
+    <UNavigationMenu
+      v-if="enableLive && !hasExternalModel"
+      v-model="local"
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+      <template #item-label="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UNavigationMenu>
+    <UNavigationMenu v-else v-bind="attrs">
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+      <template #item-label="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UNavigationMenu>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.94)}
+</style>

package/dist/runtime/components/aware/ANavigationMenu.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/dist/runtime/components/aware/APagination.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/APagination.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAUIState } from "../../composables/useAAUIState";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  live: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, hoverHandlers } = useAAField(() => props.fieldKey);
+const livePage = useAAUIState(() => `${props.fieldKey}:page`, { defaultValue: 1 });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const local = ref(enableLive.value ? livePage.value ?? 1 : 1);
+watch(livePage, (val) => {
+  if (enableLive.value && local.value !== (val ?? 1)) local.value = val ?? 1;
+});
+watch(local, (val) => {
+  if (enableLive.value && (livePage.value ?? 1) !== val) livePage.value = val;
+});
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--inline"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="enableAwareness ? hoverHandlers : {}"
+  >
+    <UPagination
+      v-if="enableLive && !hasExternalModel"
+      v-model="local"
+      v-bind="attrs"
+    />
+    <UPagination v-else v-bind="attrs" />
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);padding:.25rem;position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--inline{display:inline-flex}.aa-host--pressed{filter:brightness(.94)}
+</style>

package/dist/runtime/components/aware/APagination.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/APeerCaretLayer.d.vue.ts

@@ -0,0 +1,10 @@
+import type { PeerCaret } from '../../composables/useAACaret.js';
+type __VLS_Props = {
+    /** The DOM input/textarea we're decorating. Must be mounted. */
+    target: HTMLInputElement | HTMLTextAreaElement | null | undefined;
+    /** Caret entries from `useAACaret().carets`. */
+    carets: PeerCaret[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/APeerCaretLayer.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { getCaretCoordinates, getSelectionRects } from "../../utils/caretCoordinates";
+const props = defineProps({
+  target: { type: null, required: true },
+  carets: { type: Array, required: true }
+});
+const positioned = ref([]);
+const box = ref(null);
+let raf = 0;
+function recompute() {
+  cancelAnimationFrame(raf);
+  raf = requestAnimationFrame(() => {
+    const t = props.target;
+    if (!t) {
+      positioned.value = [];
+      box.value = null;
+      return;
+    }
+    box.value = {
+      top: t.offsetTop,
+      left: t.offsetLeft,
+      width: t.offsetWidth,
+      height: t.offsetHeight
+    };
+    const len = t.value.length;
+    const out = [];
+    for (const c of props.carets) {
+      const start = Math.max(0, Math.min(c.start, len));
+      const end = Math.max(0, Math.min(c.end, len));
+      const caret = getCaretCoordinates(t, end);
+      const selection = start === end ? [] : getSelectionRects(t, start, end);
+      out.push({ clientId: c.clientId, user: c.user, caret, selection });
+    }
+    positioned.value = out;
+  });
+}
+watch(() => [props.target, props.carets, props.target?.value], recompute, { deep: true, flush: "post" });
+let ro = null;
+onMounted(() => {
+  recompute();
+  if (props.target) {
+    ro = new ResizeObserver(recompute);
+    ro.observe(props.target);
+    props.target.addEventListener("scroll", recompute, { passive: true });
+    window.addEventListener("resize", recompute, { passive: true });
+  }
+});
+onBeforeUnmount(() => {
+  cancelAnimationFrame(raf);
+  ro?.disconnect();
+  window.removeEventListener("resize", recompute);
+  if (props.target) props.target.removeEventListener("scroll", recompute);
+});
+function colorFor(p) {
+  return p.user?.color || "var(--ui-text-muted, #999)";
+}
+function selectionFillFor(p) {
+  return colorMix(p.user?.color, 0.35);
+}
+function colorMix(color, alpha) {
+  if (!color) return `rgba(127, 127, 127, ${alpha})`;
+  if (color.startsWith("hsl(")) {
+    return color.replace("hsl(", "hsla(").replace(")", `, ${alpha})`);
+  }
+  if (color.startsWith("rgb(")) {
+    return color.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
+  }
+  if (color.startsWith("#") && (color.length === 7 || color.length === 4)) {
+    const a = Math.round(alpha * 255).toString(16).padStart(2, "0");
+    return `${color}${a}`;
+  }
+  return color;
+}
+function nameFor(p) {
+  return p.user?.name || "Anonymous";
+}
+const layerVisible = computed(() => positioned.value.length > 0 && !!box.value);
+const layerStyle = computed(
+  () => box.value ? {
+    top: box.value.top + "px",
+    left: box.value.left + "px",
+    width: box.value.width + "px",
+    height: box.value.height + "px"
+  } : void 0
+);
+</script>
+
+<template>
+  <div
+    v-if="layerVisible"
+    class="aa-caret-layer"
+    :style="layerStyle"
+    aria-hidden="true"
+  >
+    <template v-for="p in positioned" :key="p.clientId">
+      <!-- Selection highlight rectangles (one per visual line of the range). -->
+      <div
+        v-for="(rect, idx) in p.selection"
+        :key="`sel-${p.clientId}-${idx}`"
+        class="aa-selection"
+        :style="{
+  top: rect.top + 'px',
+  left: rect.left + 'px',
+  width: rect.width + 'px',
+  height: rect.height + 'px',
+  background: selectionFillFor(p)
+}"
+      />
+      <!-- Caret bar at the active end. -->
+      <div
+        class="aa-caret"
+        :style="{
+  top: p.caret.top + 'px',
+  left: p.caret.left + 'px',
+  height: p.caret.height + 'px',
+  background: colorFor(p)
+}"
+      />
+      <!-- Name flag — anchored to the *layer top edge* (= input top edge),
+           so it always sits just above the input box regardless of where the
+           caret bar lands vertically inside. -->
+      <span
+        class="aa-caret__flag"
+        :style="{ left: p.caret.left + 'px', background: colorFor(p) }"
+      >{{ nameFor(p) }}</span>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.aa-caret-layer{overflow:visible;pointer-events:none;position:absolute;z-index:2}.aa-selection{border-radius:2px;position:absolute;z-index:1}.aa-caret{border-radius:1px;position:absolute;width:2px;z-index:2}.aa-caret__flag{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.625rem;font-weight:500;line-height:1;padding:.16rem .35rem;pointer-events:none;position:absolute;top:-2px;transform:translate(-1px,-100%);white-space:nowrap;z-index:3}
+</style>

package/dist/runtime/components/aware/APeerCaretLayer.vue.d.ts

@@ -0,0 +1,10 @@
+import type { PeerCaret } from '../../composables/useAACaret.js';
+type __VLS_Props = {
+    /** The DOM input/textarea we're decorating. Must be mounted. */
+    target: HTMLInputElement | HTMLTextAreaElement | null | undefined;
+    /** Caret entries from `useAACaret().carets`. */
+    carets: PeerCaret[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/APinInput.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    awareness: boolean;
+    max: number;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;