@abraca/nuxt 1.9.1 → 2.0.1

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** Stable, unique field key for this item — usually `${parent}:item:${id}`. */
+    fieldKey: string;
+    /** Layout mode: 'inline' for chips, 'block' for full-row items. */
+    variant?: 'inline' | 'block';
+    /** Show a tiny peer-name flag at the top-right of the item when active. */
+    showFlag?: boolean;
+    /** Paint a peer-coloured backdrop tint when active. Default true. */
+    tinted?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "inline" | "block";
+    showFlag: boolean;
+    tinted: 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/AInput.d.vue.ts

@@ -1,7 +1,17 @@
 type __VLS_Props = {
-    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
     fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    peers?: 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;
+    peers: boolean;
+    awareness: boolean;
+    max: number;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,38 +1,91 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, ref, useAttrs, watch } from "vue";
 import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { useAACaret } from "../../composables/useAACaret";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+import APeerCaretLayer from "./APeerCaretLayer.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  fieldKey: { type: String, required: true }
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  peers: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
 });
-const { hoverers, focusers, handlers } = useAAField(props.fieldKey);
-const focusRingStyle = computed(() => {
-  if (focusers.value.length) {
-    const color = focusers.value[0]?.user?.color;
-    if (color) return { boxShadow: `0 0 0 2px ${color}`, borderRadius: "0.375rem" };
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const enablePeers = computed(() => props.peers || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const hasExternalModel = computed(
+  () => "modelValue" in attrs || "onUpdate:modelValue" in attrs
+);
+const hostRef = ref(null);
+const inputEl = ref(null);
+function resolveInput() {
+  inputEl.value = hostRef.value?.querySelector("input") ?? null;
+}
+onMounted(resolveInput);
+watch(() => props.fieldKey, resolveInput);
+const { carets } = useAACaret(() => props.fieldKey, inputEl);
+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
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
   }
-  if (hoverers.value.length) {
-    const color = hoverers.value[0]?.user?.color;
-    if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
   }
-  return {};
+  return out;
 });
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
 </script>
 
 <template>
   <div
-    class="relative w-full"
-    :style="focusRingStyle"
-    v-on="handlers"
+    ref="hostRef"
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
   >
-    <UInput v-bind="$attrs" />
+    <UInput
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    />
+    <UInput
+      v-else
+      v-bind="attrs"
+    />
+
+    <APeerCaretLayer
+      v-if="enablePeers"
+      :target="inputEl"
+      :carets="carets"
+    />
+
     <Transition name="aa-peer">
       <span
-        v-if="focusers.length"
-        class="absolute -top-2.5 right-0 flex -space-x-1 pointer-events-none z-10"
+        v-if="overlayPeers.length"
+        class="aa-overlay"
       >
         <AAvatar
-          v-for="p in focusers.slice(0, 2)"
+          v-for="p in overlayPeers.slice(0, max)"
           :key="p.clientId"
           :user="p"
           size="2xs"
@@ -45,5 +98,5 @@ const focusRingStyle = computed(() => {
 </template>
 
 <style scoped>
-.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.9)}.aa-overlay{display:flex;gap:0;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
 </style>

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

@@ -1,7 +1,17 @@
 type __VLS_Props = {
-    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
     fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    peers?: 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;
+    peers: boolean;
+    awareness: boolean;
+    max: number;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    live?: 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;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,138 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+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 },
+  sync: { type: Boolean, required: false, default: false },
+  live: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
+const liveQuery = useAAUIState(() => `${props.fieldKey}:query`, { defaultValue: "" });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const hasExternalOpen = computed(() => "open" in attrs || "onUpdate:open" in attrs);
+const localOpen = ref(enableLive.value ? !!liveOpen.value : false);
+watch(liveOpen, (val) => {
+  if (enableLive.value && localOpen.value !== !!val) localOpen.value = !!val;
+});
+watch(localOpen, (val) => {
+  if (enableLive.value && !!liveOpen.value !== val) liveOpen.value = val;
+});
+const localQuery = ref(enableLive.value ? liveQuery.value ?? "" : "");
+watch(liveQuery, (val) => {
+  if (enableLive.value && localQuery.value !== (val ?? "")) localQuery.value = val ?? "";
+});
+watch(localQuery, (val) => {
+  if (enableLive.value && (liveQuery.value ?? "") !== val) liveQuery.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
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  return out;
+});
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <UInputMenu
+      v-if="enableSync && !hasExternalModel && enableLive && !hasExternalOpen"
+      v-model="synced"
+      v-model:open="localOpen"
+      v-model:search-term="localQuery"
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UInputMenu>
+    <UInputMenu
+      v-else-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UInputMenu>
+    <UInputMenu
+      v-else-if="enableLive && !hasExternalOpen"
+      v-model:open="localOpen"
+      v-model:search-term="localQuery"
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UInputMenu>
+    <UInputMenu
+      v-else
+      v-bind="attrs"
+    >
+      <template #item="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UInputMenu>
+    <Transition name="aa-peer">
+      <span v-if="overlayPeers.length" class="aa-overlay">
+        <AAvatar v-for="p in overlayPeers.slice(0, max)" :key="p.clientId" :user="p" size="2xs" :show-status="false" :show-tooltip="true" />
+      </span>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.9)}.aa-overlay{display:flex;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+</style>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    live?: 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;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/AInputNumber.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;

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

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+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
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  return out;
+});
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <UInputNumber
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    />
+    <UInputNumber v-else v-bind="attrs" />
+    <Transition name="aa-peer">
+      <span v-if="overlayPeers.length" class="aa-overlay">
+        <AAvatar v-for="p in overlayPeers.slice(0, max)" :key="p.clientId" :user="p" size="2xs" :show-status="false" :show-tooltip="true" />
+      </span>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.9)}.aa-overlay{display:flex;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+</style>

package/dist/runtime/components/aware/AInputNumber.vue.d.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;

package/dist/runtime/components/aware/AInputTags.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;

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

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+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
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  return out;
+});
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <UInputTags
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    />
+    <UInputTags v-else v-bind="attrs" />
+    <Transition name="aa-peer">
+      <span v-if="overlayPeers.length" class="aa-overlay">
+        <AAvatar v-for="p in overlayPeers.slice(0, max)" :key="p.clientId" :user="p" size="2xs" :show-status="false" :show-tooltip="true" />
+      </span>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease}.aa-host--block{display:block}.aa-host--pressed{filter:brightness(.9)}.aa-overlay{display:flex;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+</style>

package/dist/runtime/components/aware/AInputTags.vue.d.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;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+<script setup>
+import { useAAKey } from "../../composables/useAAKey";
+defineOptions({ inheritAttrs: false });
+const { hints } = useAAKey();
+</script>
+
+<template>
+  <TransitionGroup name="aa-key" tag="div" class="aa-keyhint">
+    <span
+      v-for="h in hints"
+      :key="h.clientId"
+      class="aa-keyhint__chip"
+      :style="{ background: h.user?.color ?? 'var(--ui-text-muted)' }"
+    >
+      <UKbd :value="h.label" />
+      <span class="aa-keyhint__name">{{ h.user?.name || "Anonymous" }}</span>
+    </span>
+  </TransitionGroup>
+</template>
+
+<style scoped>
+.aa-keyhint{bottom:4rem;display:flex;flex-direction:column;gap:.4rem;pointer-events:none;position:fixed;right:1rem;z-index:70}.aa-keyhint__chip{align-items:center;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.18);color:#fff;display:inline-flex;font-size:.6875rem;font-weight:500;gap:.4rem;padding:.2rem .55rem .2rem .4rem}.aa-keyhint__name{white-space:nowrap}.aa-key-enter-active,.aa-key-leave-active{transition:opacity .2s ease,transform .2s ease}.aa-key-enter-from,.aa-key-leave-to{opacity:0;transform:translateY(4px)}
+</style>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/AMedia.d.vue.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;