@abraca/nuxt 1.9.1 → 2.0.0

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

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    liveOpen?: boolean;
+    liveQuery?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any, __VLS_45: string, __VLS_46: any, __VLS_63: string, __VLS_64: 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;
+} & {
+    [K in NonNullable<typeof __VLS_45>]?: (props: typeof __VLS_46) => any;
+} & {
+    [K in NonNullable<typeof __VLS_63>]?: (props: typeof __VLS_64) => 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;
+    liveOpen: boolean;
+    liveQuery: 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/AContextMenu.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_10: string, __VLS_11: any, __VLS_29: string, __VLS_30: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => 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/AContextMenu.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAUIState } from "../../composables/useAAUIState";
+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 enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
+const hasExternalOpen = computed(() => "open" in attrs || "onUpdate:open" in attrs);
+const local = ref(enableLive.value ? !!liveOpen.value : false);
+watch(liveOpen, (val) => {
+  if (enableLive.value && local.value !== !!val) local.value = !!val;
+});
+watch(local, (val) => {
+  if (enableLive.value && !!liveOpen.value !== val) liveOpen.value = val;
+});
+</script>
+
+<template>
+  <UContextMenu
+    v-if="enableLive && !hasExternalOpen"
+    v-model:open="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>
+  </UContextMenu>
+  <UContextMenu
+    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>
+  </UContextMenu>
+</template>

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_10: string, __VLS_11: any, __VLS_29: string, __VLS_30: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => 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/ADrawer.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_10: string, __VLS_11: any, __VLS_22: string, __VLS_23: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_22>]?: (props: typeof __VLS_23) => 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/ADrawer.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAUIState } from "../../composables/useAAUIState";
+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 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;
+});
+</script>
+
+<template>
+  <UDrawer
+    v-if="enableLive && !hasExternalOpen"
+    v-model:open="local"
+    v-bind="attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData ?? {}"
+      />
+    </template>
+  </UDrawer>
+  <UDrawer
+    v-else
+    v-bind="attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData ?? {}"
+      />
+    </template>
+  </UDrawer>
+</template>

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_10: string, __VLS_11: any, __VLS_22: string, __VLS_23: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_22>]?: (props: typeof __VLS_23) => 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/ADropdownMenu.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_10: string, __VLS_11: any, __VLS_29: string, __VLS_30: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => 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/ADropdownMenu.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAUIState } from "../../composables/useAAUIState";
+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 enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
+const hasExternalOpen = computed(() => "open" in attrs || "onUpdate:open" in attrs);
+const local = ref(enableLive.value ? !!liveOpen.value : false);
+watch(liveOpen, (val) => {
+  if (enableLive.value && local.value !== !!val) local.value = !!val;
+});
+watch(local, (val) => {
+  if (enableLive.value && !!liveOpen.value !== val) liveOpen.value = val;
+});
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="enableLive && !hasExternalOpen"
+    v-model:open="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>
+  </UDropdownMenu>
+  <UDropdownMenu
+    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>
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_10: string, __VLS_11: any, __VLS_29: string, __VLS_30: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => 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/AFileUpload.d.vue.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    peers?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare var __VLS_9: string, __VLS_10: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    peers: boolean;
+    awareness: boolean;
+    max: number;
+    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/AFileUpload.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAUIState } from "../../composables/useAAUIState";
+import { useAAEphemeral } from "../../composables/useAAEphemeral";
+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 },
+  peers: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+const enableLive = computed(() => props.live || props.total);
+const enablePeers = computed(() => props.peers || props.total);
+const attrs = useAttrs();
+const liveDragOver = useAAUIState(() => `${props.fieldKey}:dragOver`, { defaultValue: false });
+const { peers: dragPeers, setLocal: setDragLocal } = useAAEphemeral(() => `${props.fieldKey}:dragOver`);
+const localDragOver = ref(false);
+function onDragEnter() {
+  localDragOver.value = true;
+  if (enableLive.value) liveDragOver.value = true;
+  if (enablePeers.value) setDragLocal(true);
+}
+function onDragLeave() {
+  localDragOver.value = false;
+  if (enableLive.value) liveDragOver.value = false;
+  if (enablePeers.value) setDragLocal(false);
+}
+watch(liveDragOver, (val) => {
+  if (!enableLive.value) return;
+  if (localDragOver.value !== !!val) localDragOver.value = !!val;
+});
+</script>
+
+<template>
+  <div
+    class="aa-fileupload-host"
+    :class="{ 'aa-fileupload-host--dragover': localDragOver }"
+    @dragenter="onDragEnter"
+    @dragleave="onDragLeave"
+    @drop="onDragLeave"
+  >
+    <UFileUpload v-bind="attrs">
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+    </UFileUpload>
+
+    <Transition name="aa-peer">
+      <span v-if="enablePeers && dragPeers.length" class="aa-overlay">
+        <AAvatar
+          v-for="p in dragPeers.slice(0, max)"
+          :key="p.clientId"
+          :user="{ clientId: p.clientId, user: p.user }"
+          size="2xs"
+          :show-status="false"
+          :show-tooltip="true"
+        />
+      </span>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.aa-fileupload-host{border-radius:var(--ui-radius,.5rem);position:relative;transition:filter .12s ease,background .12s ease}.aa-fileupload-host--dragover{background:color-mix(in srgb,var(--ui-color-primary,#4169e1) 8%,transparent);filter:brightness(1.05)}.aa-overlay{display:flex;pointer-events:none;position:absolute;right:-.5rem;top:-.5rem;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/AFileUpload.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    peers?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare var __VLS_9: string, __VLS_10: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    peers: boolean;
+    awareness: boolean;
+    max: number;
+    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/AFollowBar.d.vue.ts

@@ -0,0 +1,21 @@
+/**
+ * <AFollowBar>
+ *
+ * Floating UI bar that lists current peers and lets the local user click
+ * "Follow" to (a) mirror that peer's `aware-ui` state and (b) auto-navigate
+ * to whatever route they are currently on.
+ *
+ * The local route is continuously broadcast via awareness `route` field so
+ * every peer can be followed across pages. When following: any time the
+ * leader's `route` changes, the follower's `router.push()` runs. Local
+ * interaction (click/keypress/scroll) breaks follow via `useAAFollowPeer`.
+ */
+type __VLS_Props = {
+    keyPrefix?: string;
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    position: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,62 @@
+<script setup>
+import { computed, watch } from "vue";
+import { useRoute, useRouter } from "#imports";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
+import { useAwareness } from "../../composables/useAwareness";
+import { useAwarenessPeers } from "../../composables/useAwarenessPeers";
+const props = defineProps({
+  keyPrefix: { type: String, required: false },
+  position: { type: String, required: false, default: "bottom-right" }
+});
+const route = useRoute();
+const router = useRouter();
+const { setField, states } = useAwareness();
+const { peers } = useAwarenessPeers();
+const { follow, unfollow, followingClientId, followingUser } = useAAFollowPeer({ keyPrefix: props.keyPrefix });
+watch(() => route.fullPath, (path) => {
+  setField("route", path);
+}, { immediate: true });
+const leaderRoute = computed(() => {
+  if (followingClientId.value == null) return void 0;
+  const state = states.value.get(followingClientId.value);
+  return state?.route;
+});
+watch(leaderRoute, (path) => {
+  if (path && path !== route.fullPath) router.push(path);
+});
+const visiblePeers = computed(() => peers.value.filter((p) => p.user?.name));
+function onFollow(clientId) {
+  if (followingClientId.value === clientId) {
+    unfollow();
+    return;
+  }
+  follow(clientId);
+  const state = states.value.get(clientId);
+  if (state?.route && state.route !== route.fullPath) router.push(state.route);
+}
+const positionClass = computed(() => `aa-follow-bar--${props.position}`);
+</script>
+
+<template>
+  <div v-if="visiblePeers.length" class="aa-follow-bar" :class="positionClass">
+    <span class="aa-follow-bar__label">{{ followingUser ? `Following ${followingUser.name}` : "Follow" }}</span>
+    <button
+      v-for="p in visiblePeers"
+      :key="p.clientId"
+      class="aa-follow-bar__btn"
+      :class="{ 'aa-follow-bar__btn--active': followingClientId === p.clientId }"
+      :style="{ borderColor: p.user?.color ?? 'var(--ui-border)' }"
+      @click="onFollow(p.clientId)"
+    >
+      <span class="aa-follow-bar__dot" :style="{ background: p.user?.color ?? 'var(--ui-text-muted)' }" />
+      {{ p.user?.name }}
+    </button>
+    <button v-if="followingClientId !== null" class="aa-follow-bar__btn aa-follow-bar__btn--break" @click="unfollow()">
+      Stop
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.aa-follow-bar{align-items:center;background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.12);display:flex;font-size:.75rem;gap:.4rem;padding:.4rem .6rem;position:fixed;z-index:60}.aa-follow-bar--bottom-right{bottom:1rem;right:1rem}.aa-follow-bar--bottom-left{bottom:1rem;left:1rem}.aa-follow-bar--top-right{right:1rem;top:1rem}.aa-follow-bar--top-left{left:1rem;top:1rem}.aa-follow-bar__label{border-right:1px solid var(--ui-border);color:var(--ui-text-muted);font-weight:500;padding-right:.25rem}.aa-follow-bar__btn{align-items:center;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text);cursor:pointer;display:inline-flex;font-size:.6875rem;gap:.3rem;padding:.2rem .55rem;transition:filter .12s ease}.aa-follow-bar__btn:hover{filter:brightness(1.06)}.aa-follow-bar__btn--active{background:color-mix(in srgb,currentColor 8%,var(--ui-bg));font-weight:600}.aa-follow-bar__btn--break{background:var(--ui-color-error,#f43f5e);border-color:transparent;color:#fff}.aa-follow-bar__dot{border-radius:999px;height:.5rem;width:.5rem}
+</style>

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

@@ -0,0 +1,21 @@
+/**
+ * <AFollowBar>
+ *
+ * Floating UI bar that lists current peers and lets the local user click
+ * "Follow" to (a) mirror that peer's `aware-ui` state and (b) auto-navigate
+ * to whatever route they are currently on.
+ *
+ * The local route is continuously broadcast via awareness `route` field so
+ * every peer can be followed across pages. When following: any time the
+ * leader's `route` changes, the follower's `router.push()` runs. Local
+ * interaction (click/keypress/scroll) breaks follow via `useAAFollowPeer`.
+ */
+type __VLS_Props = {
+    keyPrefix?: string;
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    position: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Optional namespace prefix for the underlying follow keys. */
+    keyPrefix?: 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/AFollowScroll.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { computed } from "vue";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
+import { useAAFocus } from "../../composables/useAAFocus";
+import { useAAFollowAnchor } from "../../composables/useAAFollowAnchor";
+const props = defineProps({
+  keyPrefix: { type: String, required: false }
+});
+const { followingClientId } = useAAFollowPeer({ keyPrefix: props.keyPrefix });
+useAAFocus();
+const leaderId = computed(() => followingClientId.value);
+useAAFollowAnchor(leaderId);
+</script>
+
+<template>
+  <span data-aa-skip-anchor style="display:none" />
+</template>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** Optional namespace prefix for the underlying follow keys. */
+    keyPrefix?: 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;