@abraca/nuxt 0.1.0

package/dist/runtime/components/AVoiceBar.vue

@@ -0,0 +1,379 @@
+<script setup>
+import { avatarBorderStyle } from "../utils/avatarStyle";
+const props = defineProps({
+  docId: { type: String, required: true },
+  collapsed: { type: Boolean, required: false },
+  labels: { type: Object, required: false }
+});
+const emit = defineEmits(["open-stream"]);
+defineOptions({ inheritAttrs: false });
+const appConfig = useAppConfig();
+const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
+const locale = computed(() => useAbraLocale("voice", props.labels));
+const {
+  voiceStatus,
+  isMuted,
+  isVideoEnabled,
+  isScreenEnabled,
+  canScreenShare,
+  localAudioLevel,
+  audioLevels,
+  voiceError,
+  masterVolume,
+  peerList,
+  joinRoom,
+  leaveRoom,
+  toggleMute,
+  toggleVideo,
+  toggleScreen,
+  setMasterVolume,
+  setPeerVolume
+} = useVoice();
+const peerVolumes = ref(/* @__PURE__ */ new Map());
+function getPeerVolume(peerId) {
+  return peerVolumes.value.get(peerId) ?? 1;
+}
+function onPeerVolumeChange(peerId, value) {
+  peerVolumes.value = new Map(peerVolumes.value).set(peerId, value);
+  setPeerVolume(peerId, value);
+}
+const popoverOpen = ref(false);
+const isConnected = computed(() => voiceStatus.value === "connected");
+const isConnecting = computed(() => voiceStatus.value === "connecting");
+const isActive = computed(() => isConnected.value || isConnecting.value);
+const isSpeaking = computed(() => localAudioLevel.value > 0.04);
+const hasError = computed(() => !!voiceError.value);
+async function handleJoin() {
+  popoverOpen.value = false;
+  await joinRoom(props.docId);
+}
+function handleLeave() {
+  popoverOpen.value = false;
+  leaveRoom();
+}
+function goToStream() {
+  emit("open-stream", props.docId);
+}
+const peerCountText = computed(() => {
+  const n = peerList.value.length;
+  if (n === 0) return locale.value.alone;
+  return `${n} peer${n === 1 ? "" : "s"}`;
+});
+const triggerLabel = computed(() => {
+  if (hasError.value) return locale.value.error;
+  if (isConnecting.value) return locale.value.connecting;
+  if (isConnected.value) return peerCountText.value;
+  return locale.value.voice;
+});
+const micIcon = computed(() => {
+  if (hasError.value) return "i-lucide-alert-circle";
+  if (!isActive.value) return "i-lucide-mic-off";
+  return isMuted.value ? "i-lucide-mic-off" : "i-lucide-mic";
+});
+defineShortcuts({
+  "alt_m": {
+    handler: toggleMute,
+    whenever: [isActive]
+  },
+  "alt_v": {
+    handler: toggleVideo,
+    whenever: [isActive]
+  }
+});
+</script>
+
+<template>
+  <div v-bind="$attrs" class="w-full">
+    <ClientOnly>
+      <UPopover
+        v-model:open="popoverOpen"
+        :content="{ align: 'center', side: 'top', sideOffset: 6, collisionPadding: 12 }"
+      >
+        <!-- ─── Trigger row ─── -->
+        <div
+          class="flex items-center gap-1.5 w-full px-2 rounded-md cursor-pointer select-none transition-colors"
+          :class="[
+  props.collapsed ? 'justify-center h-8' : 'min-h-8 py-1',
+  popoverOpen ? 'bg-elevated' : 'hover:bg-elevated/60',
+  isActive ? '' : 'opacity-60 hover:opacity-100'
+]"
+        >
+          <!-- Mic icon + status dot -->
+          <div class="relative shrink-0 flex items-center justify-center size-4">
+            <UIcon
+              :name="micIcon"
+              class="size-4 transition-colors"
+              :class="{
+  'text-error animate-pulse': hasError,
+  'text-success': !hasError && isConnected && !isMuted,
+  'text-error': !hasError && isConnected && isMuted,
+  'text-warning': !hasError && isConnecting,
+  'text-dimmed': !hasError && !isActive
+}"
+            />
+            <span
+              v-if="isActive || hasError"
+              class="absolute -top-0.5 -right-1 size-1.5 rounded-full ring-1 ring-bg transition-colors"
+              :class="{
+  'bg-error animate-pulse': hasError,
+  'bg-success': !hasError && isConnected && !isSpeaking,
+  'bg-success scale-125': !hasError && isConnected && isSpeaking,
+  'bg-warning animate-pulse': !hasError && isConnecting
+}"
+            />
+          </div>
+
+          <!-- Expanded: label + peer avatars + quick actions -->
+          <template v-if="!props.collapsed">
+            <span
+              class="flex-1 text-xs font-medium truncate"
+              :class="isActive ? 'text-default' : 'text-muted'"
+            >
+              {{ triggerLabel }}
+            </span>
+
+            <UAvatarGroup
+              v-if="isConnected && peerList.length > 0"
+              :max="3"
+              size="2xs"
+            >
+              <UAvatar
+                v-for="peer in peerList"
+                :key="peer.userId"
+                :alt="peer.displayName || peer.userId.slice(0, 6)"
+                size="2xs"
+                :style="peer.color ? avatarBorderStyle(peer.color, neutral) : ''"
+              />
+            </UAvatarGroup>
+
+            <template v-if="isConnected">
+              <UTooltip :text="isMuted ? locale.unmute : locale.mute" :kbds="['Alt', 'M']">
+                <UButton
+                  :icon="isMuted ? 'i-lucide-mic-off' : 'i-lucide-mic'"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  :class="{ 'text-error!': isMuted }"
+                  @click.stop="toggleMute"
+                />
+              </UTooltip>
+              <UTooltip text="Toggle video" :kbds="['Alt', 'V']">
+                <UButton
+                  :icon="isVideoEnabled ? 'i-lucide-video' : 'i-lucide-video-off'"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  :class="{ 'text-primary!': isVideoEnabled }"
+                  @click.stop="toggleVideo"
+                />
+              </UTooltip>
+              <UTooltip v-if="canScreenShare" text="Screen share">
+                <UButton
+                  :icon="isScreenEnabled ? 'i-lucide-monitor-up' : 'i-lucide-monitor'"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  :class="{ 'text-primary!': isScreenEnabled }"
+                  @click.stop="toggleScreen"
+                />
+              </UTooltip>
+              <UTooltip :text="locale.openStream">
+                <UButton
+                  icon="i-lucide-maximize-2"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  @click.stop="goToStream"
+                />
+              </UTooltip>
+              <UTooltip :text="locale.leave">
+                <UButton
+                  icon="i-lucide-phone-off"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  class="text-error! hover:opacity-70"
+                  @click.stop="handleLeave"
+                />
+              </UTooltip>
+            </template>
+          </template>
+        </div>
+
+        <!-- ─── Popover panel ─── -->
+        <template #content>
+          <div class="p-3 w-52 flex flex-col gap-3">
+            <!-- Idle → join -->
+            <UButton
+              v-if="!isActive"
+              :label="locale.join"
+              icon="i-lucide-phone"
+              color="success"
+              block
+              @click="handleJoin"
+            />
+
+            <!-- Connecting -->
+            <template v-else-if="isConnecting">
+              <div class="flex items-center gap-2 py-0.5">
+                <UIcon name="i-lucide-loader-circle" class="size-4 text-warning animate-spin shrink-0" />
+                <span class="text-sm text-muted">{{ locale.connecting }}</span>
+              </div>
+              <UButton
+                :label="locale.cancel"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                block
+                @click="handleLeave"
+              />
+            </template>
+
+            <!-- Connected: controls + peers -->
+            <template v-else>
+              <div class="flex gap-1.5 flex-wrap">
+                <UButton
+                  :icon="isMuted ? 'i-lucide-mic-off' : 'i-lucide-mic'"
+                  :label="isMuted ? locale.unmute : locale.mute"
+                  size="sm"
+                  :color="isMuted ? 'error' : 'neutral'"
+                  :variant="isMuted ? 'subtle' : 'outline'"
+                  class="flex-1"
+                  @click="toggleMute"
+                />
+                <UButton
+                  :icon="isVideoEnabled ? 'i-lucide-video' : 'i-lucide-video-off'"
+                  size="sm"
+                  :color="isVideoEnabled ? 'primary' : 'neutral'"
+                  :variant="isVideoEnabled ? 'subtle' : 'outline'"
+                  class="flex-none"
+                  @click="toggleVideo"
+                />
+                <UButton
+                  v-if="canScreenShare"
+                  :icon="isScreenEnabled ? 'i-lucide-monitor-up' : 'i-lucide-monitor'"
+                  size="sm"
+                  :color="isScreenEnabled ? 'primary' : 'neutral'"
+                  :variant="isScreenEnabled ? 'subtle' : 'outline'"
+                  class="flex-none"
+                  @click="toggleScreen"
+                />
+                <UButton
+                  icon="i-lucide-phone-off"
+                  :label="locale.leave"
+                  size="sm"
+                  color="error"
+                  variant="ghost"
+                  class="flex-1"
+                  @click="handleLeave"
+                />
+              </div>
+
+              <UButton
+                icon="i-lucide-maximize-2"
+                :label="locale.openStream"
+                size="sm"
+                color="neutral"
+                variant="outline"
+                block
+                @click="goToStream"
+              />
+
+              <!-- Master volume -->
+              <div class="flex items-center gap-2">
+                <UIcon
+                  :name="masterVolume > 0 ? 'i-lucide-volume-2' : 'i-lucide-volume-x'"
+                  class="size-3.5 text-dimmed shrink-0"
+                />
+                <USlider
+                  :model-value="masterVolume"
+                  :min="0"
+                  :max="1"
+                  :step="0.01"
+                  size="xs"
+                  class="flex-1"
+                  @update:model-value="setMasterVolume"
+                />
+              </div>
+
+              <!-- Peer list -->
+              <template v-if="peerList.length">
+                <USeparator />
+                <div class="flex flex-col gap-2">
+                  <p class="text-[10px] font-semibold text-dimmed uppercase tracking-wider leading-none">
+                    {{ locale.peers }}
+                  </p>
+                  <div
+                    v-for="peer in peerList"
+                    :key="peer.id"
+                    class="flex flex-col gap-1"
+                  >
+                    <div class="flex items-center gap-2">
+                      <UAvatar
+                        :alt="peer.displayName || peer.userId.slice(0, 6)"
+                        size="2xs"
+                        :style="peer.color ? avatarBorderStyle(peer.color, neutral) : ''"
+                      />
+                      <span class="text-xs truncate flex-1">{{ peer.displayName || peer.userId.slice(0, 6) }}</span>
+                      <UIcon v-if="peer.remoteVideo" name="i-lucide-video" class="size-3 text-primary shrink-0" />
+                      <UIcon v-if="peer.remoteScreen" name="i-lucide-monitor-up" class="size-3 text-primary shrink-0" />
+                      <UIcon v-if="peer.remoteMuted" name="i-lucide-mic-off" class="size-3 text-error shrink-0" />
+                    </div>
+                    <!-- Audio level bar -->
+                    <div class="flex items-center gap-2 pl-7">
+                      <div class="flex-1 h-1 rounded-full bg-elevated overflow-hidden">
+                        <div
+                          class="h-full rounded-full transition-all duration-75"
+                          :class="peer.remoteMuted ? 'bg-error/40' : 'bg-success'"
+                          :style="{ width: `${Math.min((audioLevels.get(peer.id) ?? 0) * 500, 100)}%` }"
+                        />
+                      </div>
+                    </div>
+                    <!-- Per-peer volume -->
+                    <div class="flex items-center gap-2 pl-7">
+                      <UIcon
+                        :name="getPeerVolume(peer.id) > 0 ? 'i-lucide-volume-1' : 'i-lucide-volume-x'"
+                        class="size-3 text-dimmed shrink-0"
+                      />
+                      <USlider
+                        :model-value="getPeerVolume(peer.id)"
+                        :min="0"
+                        :max="1"
+                        :step="0.01"
+                        size="xs"
+                        class="flex-1"
+                        @update:model-value="(v) => onPeerVolumeChange(peer.id, v)"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <p v-else class="text-xs text-muted text-center py-0.5">
+                {{ locale.alone }}
+              </p>
+            </template>
+
+            <!-- Error -->
+            <div v-if="voiceError" class="flex items-start gap-1.5 text-error">
+              <UIcon name="i-lucide-alert-circle" class="size-3.5 shrink-0 mt-0.5" />
+              <p class="text-xs leading-tight">
+                {{ voiceError.message }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </UPopover>
+
+      <!-- SSR fallback -->
+      <template #fallback>
+        <div
+          class="flex items-center gap-1.5 w-full px-2 opacity-30 pointer-events-none"
+          :class="props.collapsed ? 'justify-center h-8' : 'min-h-8 py-1'"
+        >
+          <UIcon name="i-lucide-mic-off" class="size-4 text-dimmed" />
+          <span v-if="!props.collapsed" class="text-xs text-dimmed">{{ locale.voice }}</span>
+        </div>
+      </template>
+    </ClientOnly>
+  </div>
+</template>

package/dist/runtime/components/AVoiceBar.vue.d.ts

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../locale.js';
+type __VLS_Props = {
+    docId: string;
+    collapsed?: boolean;
+    labels?: Partial<AbracadabraLocale['voice']>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "open-stream": (docId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onOpen-stream"?: ((docId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/AVoiceTile.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    stream: MediaStream;
+    name: string;
+    color?: string | null;
+    kind: 'camera' | 'screen';
+    mirrored?: boolean;
+};
+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/AVoiceTile.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  stream: { type: null, required: true },
+  name: { type: String, required: true },
+  color: { type: [String, null], required: false },
+  kind: { type: String, required: true },
+  mirrored: { type: Boolean, required: false }
+});
+const videoRef = ref(null);
+watch(
+  () => props.stream,
+  (s) => {
+    if (videoRef.value) {
+      videoRef.value.srcObject = s ?? null;
+    }
+  }
+);
+onMounted(() => {
+  if (videoRef.value && props.stream) {
+    videoRef.value.srcObject = props.stream;
+  }
+});
+const borderColor = computed(() => props.color ?? "var(--color-neutral-400)");
+const kindIcon = computed(() => props.kind === "screen" ? "i-lucide-monitor-up" : "i-lucide-video");
+</script>
+
+<template>
+  <div
+    class="relative rounded-lg overflow-hidden bg-black"
+    :style="{
+  border: `2px solid ${borderColor}`,
+  boxShadow: `0 0 12px ${borderColor}40`
+}"
+  >
+    <video
+      ref="videoRef"
+      autoplay
+      playsinline
+      muted
+      class="w-full h-full object-contain"
+      :style="props.mirrored ? 'transform: scaleX(-1)' : ''"
+    />
+    <div class="absolute bottom-2 left-2 flex items-center gap-1.5 bg-black/60 backdrop-blur-sm rounded px-2 py-1">
+      <UIcon :name="kindIcon" class="size-3 text-white/70 shrink-0" />
+      <span class="text-xs text-white font-medium truncate max-w-32">{{ name }}</span>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/AVoiceTile.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    stream: MediaStream;
+    name: string;
+    color?: string | null;
+    kind: 'camera' | 'screen';
+    mirrored?: boolean;
+};
+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/AWindowLayer.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/AWindowLayer.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { computed } from "vue";
+const { windows } = useWindowManager();
+const windowIds = computed(() => [...windows.value.keys()]);
+</script>
+
+<template>
+  <ClientOnly>
+    <div class="fixed inset-0 pointer-events-none z-30 overflow-hidden">
+      <AFloatingWindow
+        v-for="id in windowIds"
+        :key="id"
+        :window-id="id"
+      />
+    </div>
+  </ClientOnly>
+</template>

package/dist/runtime/components/AWindowLayer.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/AArea.d.vue.ts

@@ -0,0 +1,42 @@
+/**
+ * <AArea>
+ *
+ * Generic hover-aware wrapper. Adds real-time peer hover indicators to any
+ * slotted content — cards, panels, nav rows, table rows, sidebar sections.
+ *
+ * Usage:
+ *   <AArea field-key="doc:card:intro">
+ *     <UCard>…</UCard>
+ *   </AArea>
+ *
+ *   <AArea field-key="nav:settings" tag="li">
+ *     <NuxtLink to="/settings">Settings</NuxtLink>
+ *   </AArea>
+ *
+ * Peer indicators:
+ *   - Hover: colored 1px box-shadow ring + floating AAvatar cluster (top-right)
+ */
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+    /** HTML tag for the wrapper element. Default: 'div' */
+    tag?: string;
+    /** Max peer avatars to show. Default: 3 */
+    max?: number;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    max: number;
+    tag: string;
+}, {}, {}, {}, 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/AArea.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  tag: { type: String, required: false, default: "div" },
+  max: { type: Number, required: false, default: 3 }
+});
+const { hoverers, hoverHandlers } = useAAField(props.fieldKey);
+const hoverRingStyle = computed(() => {
+  if (!hoverers.value.length) return {};
+  const color = hoverers.value[0].user?.color;
+  if (!color) return {};
+  return { boxShadow: `0 0 0 1px ${color}`, borderRadius: "0.375rem" };
+});
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="relative"
+    v-on="hoverHandlers"
+    :style="hoverRingStyle"
+  >
+    <slot />
+    <Transition name="aa-peer">
+      <span
+        v-if="hoverers.length"
+        class="absolute -top-2 right-1 flex -space-x-1 pointer-events-none z-10"
+      >
+        <AAvatar
+          v-for="p in hoverers.slice(0, max)"
+          :key="p.clientId"
+          :user="p"
+          size="2xs"
+          :show-status="false"
+          :show-tooltip="true"
+        />
+      </span>
+    </Transition>
+  </component>
+</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/AArea.vue.d.ts

@@ -0,0 +1,42 @@
+/**
+ * <AArea>
+ *
+ * Generic hover-aware wrapper. Adds real-time peer hover indicators to any
+ * slotted content — cards, panels, nav rows, table rows, sidebar sections.
+ *
+ * Usage:
+ *   <AArea field-key="doc:card:intro">
+ *     <UCard>…</UCard>
+ *   </AArea>
+ *
+ *   <AArea field-key="nav:settings" tag="li">
+ *     <NuxtLink to="/settings">Settings</NuxtLink>
+ *   </AArea>
+ *
+ * Peer indicators:
+ *   - Hover: colored 1px box-shadow ring + floating AAvatar cluster (top-right)
+ */
+type __VLS_Props = {
+    /** Unique field key for awareness broadcasting. Convention: "{scope}:{id}" */
+    fieldKey: string;
+    /** HTML tag for the wrapper element. Default: 'div' */
+    tag?: string;
+    /** Max peer avatars to show. Default: 3 */
+    max?: number;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    max: number;
+    tag: string;
+}, {}, {}, {}, 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/AAvatar.d.vue.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;