@abraca/nuxt 0.1.0

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

@@ -0,0 +1,86 @@
+<script setup>
+import { avatarBorderStyle } from "../../utils/avatarStyle";
+const props = defineProps({
+  user: { type: Object, required: true },
+  size: { type: String, required: false, default: "sm" },
+  idle: { type: Boolean, required: false },
+  showStatus: { type: Boolean, required: false, default: true },
+  showTooltip: { type: Boolean, required: false, default: true },
+  showPopover: { type: Boolean, required: false, default: false },
+  currentDocId: { type: String, required: false }
+});
+const emit = defineEmits(["follow"]);
+const appConfig = useAppConfig();
+const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
+const name = computed(() => props.user.user?.name || "Anonymous");
+const color = computed(() => props.user.user?.color);
+const avatarStyle = computed(
+  () => color.value ? avatarBorderStyle(color.value, neutral.value) : ""
+);
+const tooltipText = computed(() => {
+  if (props.idle) return `${name.value} \xB7 idle`;
+  return name.value;
+});
+const chipColor = computed(() => {
+  if (props.idle === void 0) return void 0;
+  return props.idle ? "warning" : "success";
+});
+const docContext = computed(() => {
+  if (!props.user.docId) return null;
+  if (props.currentDocId && props.user.docId === props.currentDocId) return "In this document";
+  return "In another document";
+});
+const popoverOpen = ref(false);
+</script>
+
+<template>
+  <!-- Popover variant (click to open details) -->
+  <UPopover v-if="showPopover" v-model:open="popoverOpen">
+    <UTooltip v-if="showTooltip" :text="tooltipText" :delay-duration="600">
+      <UChip v-if="showStatus && chipColor !== void 0" :color="chipColor" position="top-right" size="sm">
+        <UAvatar :alt="name" :size="size" :style="avatarStyle" />
+      </UChip>
+      <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+    </UTooltip>
+    <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+
+    <template #content>
+      <div class="p-3 w-52 flex flex-col gap-3">
+        <div class="flex items-center gap-3">
+          <UAvatar :alt="name" size="md" :style="avatarStyle" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-semibold text-default truncate">{{ name }}</p>
+            <p v-if="docContext" class="text-xs text-muted truncate">{{ docContext }}</p>
+          </div>
+        </div>
+        <USeparator />
+        <UButton
+          icon="i-lucide-navigation"
+          label="Follow"
+          size="sm"
+          color="neutral"
+          variant="outline"
+          block
+          @click="emit('follow', user);
+  popoverOpen = false"
+        />
+      </div>
+    </template>
+  </UPopover>
+
+  <!-- Tooltip-only variant -->
+  <UTooltip v-else-if="showTooltip" :text="tooltipText" :delay-duration="600">
+    <UChip v-if="showStatus && chipColor !== void 0" :color="chipColor" position="top-right" size="sm">
+      <UAvatar :alt="name" :size="size" :style="avatarStyle" />
+    </UChip>
+    <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+  </UTooltip>
+
+  <!-- Bare variant -->
+  <template v-else>
+    <UChip v-if="showStatus && chipColor !== void 0" :color="chipColor" position="top-right" size="sm">
+      <UAvatar :alt="name" :size="size" :style="avatarStyle" />
+    </UChip>
+    <UAvatar v-else :alt="name" :size="size" :style="avatarStyle" />
+  </template>
+</template>

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

@@ -0,0 +1,25 @@
+import type { AwarenessUser } from '../../types.js';
+type __VLS_Props = {
+    user: AwarenessUser;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    /** Whether the peer is idle — drives chip color. Omit to hide status dot. */
+    idle?: boolean;
+    showStatus?: boolean;
+    showTooltip?: boolean;
+    /** Click opens a popover with user details + Follow button */
+    showPopover?: boolean;
+    /** Current viewer's docId — used to show "In this document" vs "Elsewhere" */
+    currentDocId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    follow: (user: AwarenessUser) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFollow?: ((user: AwarenessUser) => any) | undefined;
+}>, {
+    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    showStatus: boolean;
+    showTooltip: boolean;
+    showPopover: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/AButton.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true }
+});
+const { hoverers, pressers, handlers } = useAAField(props.fieldKey);
+const pressRingStyle = computed(() => {
+  if (!pressers.value.length) return {};
+  const color = pressers.value[0].user?.color;
+  if (!color) return {};
+  return { outline: `2px solid ${color}`, outlineOffset: "2px", borderRadius: "0.375rem" };
+});
+</script>
+
+<template>
+  <span class="relative inline-flex" v-on="handlers" :style="pressRingStyle">
+    <UButton v-bind="$attrs" />
+    <Transition name="aa-peer">
+      <span
+        v-if="hoverers.length"
+        class="absolute -top-2.5 right-0 flex -space-x-1 pointer-events-none z-10"
+      >
+        <AAvatar
+          v-for="p in hoverers.slice(0, 3)"
+          :key="p.clientId"
+          :user="p"
+          size="2xs"
+          :show-status="false"
+          :show-tooltip="true"
+        />
+      </span>
+    </Transition>
+  </span>
+</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}
+</style>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/ACursorLabel.d.vue.ts

@@ -0,0 +1,12 @@
+import type { AwarenessUser } from '../../types.js';
+type __VLS_Props = {
+    user: AwarenessUser;
+    x: number;
+    y: number;
+    visible?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    visible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+  user: { type: Object, required: true },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true },
+  visible: { type: Boolean, required: false, default: true }
+});
+const name = computed(() => props.user.user?.name || "Anonymous");
+const color = computed(() => props.user.user?.color || "#64748b");
+const labelStyle = computed(() => ({
+  position: "absolute",
+  left: `${props.x}px`,
+  top: `${props.y}px`,
+  transform: "translate(-50%, calc(-100% - 10px))",
+  transition: "left 75ms linear, top 75ms linear",
+  pointerEvents: "none",
+  userSelect: "none",
+  zIndex: 50
+}));
+const pillStyle = computed(() => ({
+  background: color.value
+}));
+const triangleStyle = computed(() => ({
+  borderTopColor: color.value
+}));
+</script>
+
+<template>
+  <div v-show="visible" :style="labelStyle" class="flex flex-col items-center">
+    <!-- Name pill -->
+    <span
+      class="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium text-white whitespace-nowrap shadow-sm"
+      :style="pillStyle"
+    >
+      {{ name }}
+    </span>
+    <!-- Downward triangle pointer -->
+    <span
+      class="w-0 h-0"
+      style="border-left: 5px solid transparent; border-right: 5px solid transparent; border-top-width: 5px; border-top-style: solid;"
+      :style="triangleStyle"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+import type { AwarenessUser } from '../../types.js';
+type __VLS_Props = {
+    user: AwarenessUser;
+    x: number;
+    y: number;
+    visible?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    visible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    docId: string;
+    max?: number;
+    size?: '2xs' | 'xs';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "2xs" | "xs";
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+<script setup>
+import { avatarBorderStyle } from "../../utils/avatarStyle";
+const props = defineProps({
+  docId: { type: String, required: true },
+  max: { type: Number, required: false, default: 3 },
+  size: { type: String, required: false, default: "2xs" }
+});
+const { peersInDoc } = useAwarenessPeers();
+const appConfig = useAppConfig();
+const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
+const docId = computed(() => props.docId);
+const peers = peersInDoc(docId);
+const visible = computed(() => peers.value.slice(0, props.max));
+</script>
+
+<template>
+  <div v-show="peers.length > 0" class="flex items-center -space-x-1">
+    <UAvatar
+      v-for="peer in visible"
+      :key="peer.clientId"
+      :alt="peer.user?.name || ''"
+      :size="size"
+      :style="peer.user?.color ? avatarBorderStyle(peer.user.color, neutral) : ''"
+      class="ring-1 ring-bg"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    docId: string;
+    max?: number;
+    size?: '2xs' | 'xs';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "2xs" | "xs";
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+import type { AwarenessUser } from '../../types.js';
+type __VLS_Props = {
+    /** Filter to users viewing this doc. Omit to show all connected peers. */
+    docId?: string;
+    max?: number;
+    size?: '2xs' | 'xs' | 'sm';
+    /** Show name labels beside each avatar */
+    showNames?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    follow: (user: AwarenessUser) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFollow?: ((user: AwarenessUser) => any) | undefined;
+}>, {
+    size: "2xs" | "xs" | "sm";
+    max: number;
+    showNames: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,92 @@
+<script setup>
+import { avatarBorderStyle } from "../../utils/avatarStyle";
+const props = defineProps({
+  docId: { type: String, required: false },
+  max: { type: Number, required: false, default: 5 },
+  size: { type: String, required: false, default: "xs" },
+  showNames: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["follow"]);
+const { peers, peersInDoc, isIdle } = useAwarenessPeers();
+const appConfig = useAppConfig();
+const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
+const allPeers = computed(
+  () => props.docId ? peersInDoc(computed(() => props.docId)).value : peers.value
+);
+const visible = computed(() => allPeers.value.slice(0, props.max));
+const hidden = computed(() => allPeers.value.slice(props.max));
+const overflow = computed(() => hidden.value.length);
+function avatarStyle(user) {
+  const c = user.user?.color;
+  return c ? avatarBorderStyle(c, neutral.value) : "";
+}
+const overflowOpen = ref(false);
+</script>
+
+<template>
+  <div v-if="allPeers.length > 0" class="flex items-center">
+    <!-- Stacked avatars -->
+    <div class="flex items-center -space-x-2">
+      <UTooltip
+        v-for="peer in visible"
+        :key="peer.clientId"
+        :text="peer.user?.name || 'Anonymous'"
+        :delay-duration="600"
+      >
+        <UAvatar
+          :alt="peer.user?.name || 'Anonymous'"
+          :size="size"
+          :style="avatarStyle(peer)"
+          :class="isIdle(peer.clientId) ? 'opacity-50' : ''"
+          class="ring-2 ring-bg"
+        />
+      </UTooltip>
+    </div>
+
+    <!-- Name labels (expanded mode) -->
+    <div v-if="showNames && visible.length > 0" class="ml-2 flex items-center gap-2">
+      <span
+        v-for="peer in visible"
+        :key="peer.clientId"
+        class="text-xs text-muted"
+        :class="isIdle(peer.clientId) ? 'opacity-50' : ''"
+      >{{ peer.user?.name || "Anonymous" }}</span>
+    </div>
+
+    <!-- Overflow badge + popover -->
+    <UPopover v-if="overflow > 0" v-model:open="overflowOpen" :content="{ side: 'bottom', align: 'start' }">
+      <UBadge
+        :label="`+${overflow}`"
+        color="neutral"
+        variant="soft"
+        class="ml-2 cursor-pointer select-none"
+      />
+
+      <template #content>
+        <div class="p-2 w-44 flex flex-col gap-1">
+          <div
+            v-for="peer in hidden"
+            :key="peer.clientId"
+            class="flex items-center gap-2 px-1 py-1 rounded-md hover:bg-elevated/60 transition-colors"
+          >
+            <UAvatar
+              :alt="peer.user?.name || 'Anonymous'"
+              size="2xs"
+              :style="avatarStyle(peer)"
+              :class="isIdle(peer.clientId) ? 'opacity-50' : ''"
+            />
+            <span class="text-xs text-default truncate flex-1">{{ peer.user?.name || "Anonymous" }}</span>
+            <UButton
+              icon="i-lucide-navigation"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              @click="emit('follow', peer);
+  overflowOpen = false"
+            />
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+import type { AwarenessUser } from '../../types.js';
+type __VLS_Props = {
+    /** Filter to users viewing this doc. Omit to show all connected peers. */
+    docId?: string;
+    max?: number;
+    size?: '2xs' | 'xs' | 'sm';
+    /** Show name labels beside each avatar */
+    showNames?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    follow: (user: AwarenessUser) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFollow?: ((user: AwarenessUser) => any) | undefined;
+}>, {
+    size: "2xs" | "xs" | "sm";
+    max: number;
+    showNames: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/AInput.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true }
+});
+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" };
+  }
+  if (hoverers.value.length) {
+    const color = hoverers.value[0].user?.color;
+    if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
+  }
+  return {};
+});
+</script>
+
+<template>
+  <div class="relative w-full" v-on="handlers" :style="focusRingStyle">
+    <UInput v-bind="$attrs" />
+    <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"
+      >
+        <AAvatar
+          v-for="p in focusers.slice(0, 2)"
+          :key="p.clientId"
+          :user="p"
+          size="2xs"
+          :show-status="false"
+          :show-tooltip="true"
+        />
+      </span>
+    </Transition>
+  </div>
+</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}
+</style>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/ASelect.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/ASelect.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true }
+});
+const { hoverers, focusers, onMouseenter, onMouseleave, onFocus, onBlur } = 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" };
+  }
+  if (hoverers.value.length) {
+    const color = hoverers.value[0].user?.color;
+    if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
+  }
+  return {};
+});
+</script>
+
+<template>
+  <div
+    class="relative w-full"
+    :style="focusRingStyle"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+    @focus.capture="onFocus"
+    @blur.capture="onBlur"
+  >
+    <USelect v-bind="$attrs" />
+    <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"
+      >
+        <AAvatar
+          v-for="p in focusers.slice(0, 2)"
+          :key="p.clientId"
+          :user="p"
+          size="2xs"
+          :show-status="false"
+          :show-tooltip="true"
+        />
+      </span>
+    </Transition>
+  </div>
+</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}
+</style>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/ATextarea.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/ATextarea.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true }
+});
+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" };
+  }
+  if (hoverers.value.length) {
+    const color = hoverers.value[0].user?.color;
+    if (color) return { boxShadow: `0 0 0 1px ${color}40`, borderRadius: "0.375rem" };
+  }
+  return {};
+});
+</script>
+
+<template>
+  <div class="relative w-full" v-on="handlers" :style="focusRingStyle">
+    <UTextarea v-bind="$attrs" />
+    <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"
+      >
+        <AAvatar
+          v-for="p in focusers.slice(0, 2)"
+          :key="p.clientId"
+          :user="p"
+          size="2xs"
+          :show-status="false"
+          :show-tooltip="true"
+        />
+      </span>
+    </Transition>
+  </div>
+</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}
+</style>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+};
+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/AUserList.d.vue.ts

@@ -0,0 +1,17 @@
+import type { AwarenessUser } from '../../types.js';
+type __VLS_Props = {
+    /** Filter to users in this document. Omit to show all connected peers. */
+    docId?: string;
+    showSelf?: boolean;
+    emptyLabel?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    follow: (user: AwarenessUser) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFollow?: ((user: AwarenessUser) => any) | undefined;
+}>, {
+    showSelf: boolean;
+    emptyLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;