@abraca/nuxt 1.8.2 → 2.0.0

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

@@ -0,0 +1,48 @@
+<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 eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--inline"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <UPinInput
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    />
+    <UPinInput v-else v-bind="attrs" />
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);padding:.125rem;position:relative;transition:filter .12s ease}.aa-host--inline{display:inline-flex}.aa-host--pressed{filter:brightness(.9)}
+</style>

package/dist/runtime/components/aware/APinInput.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/APopover.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/APopover.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>
+  <UPopover
+    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>
+  </UPopover>
+  <UPopover
+    v-else
+    v-bind="attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData ?? {}"
+      />
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/aware/APopover.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/APresenceBlobs.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/APresenceBlobs.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useRoute } from "#imports";
+import { useAAEphemeral } from "../../composables/useAAEphemeral";
+import { elementFromPath } from "../../utils/domPath";
+const { peers } = useAAEphemeral("aa:focus");
+const route = useRoute();
+const tick = ref(0);
+const blobs = computed(() => {
+  tick.value;
+  if (typeof window === "undefined") return [];
+  const out = [];
+  for (const p of peers.value) {
+    const v = p.value;
+    if (!v) continue;
+    if (v.route && v.route !== route.path) continue;
+    if (!v.pointer) continue;
+    const el = elementFromPath(v.pointer.elementPath);
+    if (!el?.isConnected) continue;
+    const r = el.getBoundingClientRect();
+    const x = r.left + v.pointer.dx;
+    const y = r.top + v.pointer.dy;
+    const vw = window.innerWidth || document.documentElement.clientWidth;
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    if (x < -180 || y < -180 || x > vw + 180 || y > vh + 180) continue;
+    out.push({ clientId: p.clientId, user: p.user, x, y });
+  }
+  return out;
+});
+let raf = 0;
+function bump() {
+  tick.value++;
+  raf = requestAnimationFrame(bump);
+}
+function onScroll() {
+  tick.value++;
+}
+function onResize() {
+  tick.value++;
+}
+onMounted(() => {
+  document.addEventListener("scroll", onScroll, { passive: true, capture: true });
+  window.addEventListener("resize", onResize, { passive: true });
+});
+onBeforeUnmount(() => {
+  cancelAnimationFrame(raf);
+  document.removeEventListener("scroll", onScroll, { capture: true });
+  window.removeEventListener("resize", onResize);
+});
+</script>
+
+<template>
+  <div class="aa-presence-blobs" data-aa-skip-anchor aria-hidden="true">
+    <div
+      v-for="b in blobs"
+      :key="b.clientId"
+      class="aa-presence-blobs__blob"
+      :style="{
+  left: b.x + 'px',
+  top: b.y + 'px',
+  background: `radial-gradient(circle, ${b.user?.color ?? '#888'} 0%, transparent 70%)`
+}"
+    />
+  </div>
+</template>
+
+<style scoped>
+.aa-presence-blobs{inset:0;isolation:isolate;mix-blend-mode:screen;pointer-events:none;position:fixed;z-index:0}.aa-presence-blobs__blob{border-radius:999px;filter:blur(60px);height:360px;opacity:.35;pointer-events:none;position:fixed;transform:translate(-50%,-50%);transition:left .2s ease-out,top .2s ease-out;width:360px}@media (prefers-color-scheme:light){.aa-presence-blobs{mix-blend-mode:multiply}.aa-presence-blobs__blob{opacity:.22}}
+</style>

package/dist/runtime/components/aware/APresenceBlobs.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/APresenceCursors.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    scope: string;
+    /** Max simultaneous peer cursors to render. */
+    max?: number;
+};
+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<{}>, {
+    max: number;
+}, {}, {}, {}, 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/APresenceCursors.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useAAPointer } from "../../composables/useAAPointer";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  scope: { type: String, required: true },
+  max: { type: Number, required: false, default: 8 }
+});
+const hostRef = ref(null);
+const { pointers } = useAAPointer(() => props.scope, hostRef);
+const visible = computed(() => pointers.value.slice(0, props.max));
+const overflow = computed(() => Math.max(0, pointers.value.length - visible.value.length));
+function colorFor(p) {
+  return p.user?.color || "var(--ui-text-muted)";
+}
+function nameFor(p) {
+  return p.user?.name || "Anonymous";
+}
+</script>
+
+<template>
+  <div ref="hostRef" class="aa-cursors-host">
+    <slot />
+    <div class="aa-cursors-layer" aria-hidden="true">
+      <div
+        v-for="p in visible"
+        :key="p.clientId"
+        class="aa-cursor"
+        :style="{
+  left: p.x * 100 + '%',
+  top: p.y * 100 + '%',
+  color: colorFor(p)
+}"
+      >
+        <svg width="18" height="20" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 0 L0 12 L3.5 8.5 L5.5 13.5 L7 13 L5 8 L9 8 Z" fill="currentColor" stroke="white" stroke-width="0.6" stroke-linejoin="round" />
+        </svg>
+        <span class="aa-cursor__label" :style="{ background: colorFor(p) }">{{ nameFor(p) }}</span>
+      </div>
+      <div v-if="overflow > 0" class="aa-cursors-overflow">+{{ overflow }} more</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aa-cursors-host{height:100%;position:relative;width:100%}.aa-cursors-layer{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:50}.aa-cursor{align-items:flex-start;display:flex;gap:.15rem;position:absolute;transform:translate(-2px,-2px);transition:top 60ms linear,left 60ms linear}.aa-cursor__label{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.6875rem;font-weight:500;line-height:1;margin-left:-2px;margin-top:11px;padding:.2rem .4rem;white-space:nowrap}.aa-cursors-overflow{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:999px;bottom:.5rem;color:var(--ui-text-muted);font-size:.6875rem;padding:.15rem .45rem;position:absolute;right:.5rem}
+</style>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    scope: string;
+    /** Max simultaneous peer cursors to render. */
+    max?: number;
+};
+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<{}>, {
+    max: number;
+}, {}, {}, {}, 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/ARadioGroup.d.vue.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_20: string, __VLS_21: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: 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 __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/ARadioGroup.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed, ref, useAttrs, watch } 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"
+  >
+    <URadioGroup
+      v-if="enableSync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+    </URadioGroup>
+    <URadioGroup
+      v-else
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+    </URadioGroup>
+
+    <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/ARadioGroup.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    total?: boolean;
+    max?: number;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_20: string, __VLS_21: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: 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 __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/AScroll.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    peers?: boolean;
+    total?: 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<{}>, {
+    peers: boolean;
+    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/AScroll.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAUIState } from "../../composables/useAAUIState";
+import { useAAEphemeral } from "../../composables/useAAEphemeral";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  live: { type: Boolean, required: false, default: false },
+  peers: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableLive = computed(() => props.live || props.total);
+const enablePeers = computed(() => props.peers || props.total);
+const { hoverers, focusers, pressers, isPressed, hoverHandlers } = useAAField(() => props.fieldKey);
+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 attrs = useAttrs();
+const liveScroll = useAAUIState(() => `${props.fieldKey}:scroll`, { defaultValue: { y: 0, x: 0 } });
+const { peers: scrollPeers, setLocal: setPeerScroll } = useAAEphemeral(() => `${props.fieldKey}:scroll`);
+const elRef = ref(null);
+let suppress = false;
+let raf = 0;
+function flush() {
+  raf = 0;
+  const el = elRef.value;
+  if (!el) return;
+  const payload = { y: el.scrollTop, x: el.scrollLeft };
+  if (enableLive.value && !suppress) liveScroll.value = payload;
+  if (enablePeers.value) setPeerScroll(payload);
+}
+function onScroll() {
+  if (!raf) raf = requestAnimationFrame(flush);
+}
+watch(liveScroll, (val) => {
+  if (!enableLive.value) return;
+  const el = elRef.value;
+  if (!el || !val) return;
+  if (Math.abs(el.scrollTop - val.y) < 2 && Math.abs(el.scrollLeft - val.x) < 2) return;
+  suppress = true;
+  el.scrollTo({ top: val.y, left: val.x, behavior: "instant" });
+  queueMicrotask(() => {
+    suppress = false;
+  });
+});
+onMounted(() => {
+  elRef.value?.addEventListener("scroll", onScroll, { passive: true });
+});
+onBeforeUnmount(() => {
+  if (raf) cancelAnimationFrame(raf);
+  elRef.value?.removeEventListener("scroll", onScroll);
+});
+</script>
+
+<template>
+  <div
+    ref="elRef"
+    class="aa-scroll-host aa-host"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="enableAwareness ? hoverHandlers : {}"
+    v-bind="attrs"
+  >
+    <slot />
+    <div v-if="enablePeers && scrollPeers.length" class="aa-scroll-peers" aria-hidden="true">
+      <span
+        v-for="p in scrollPeers"
+        :key="p.clientId"
+        class="aa-scroll-peer-chip"
+        :title="(p.user?.name || 'Anonymous') + ' \xB7 y=' + Math.round(p.value.y)"
+        :style="{ background: p.user?.color ?? 'var(--ui-text-muted)' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aa-scroll-host{overflow:auto;position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--pressed{filter:brightness(.94)}.aa-scroll-peers{display:flex;flex-direction:column;gap:.2rem;margin-left:auto;pointer-events:none;position:sticky;right:.5rem;top:.5rem;width:.4rem}.aa-scroll-peer-chip{border-radius:999px;box-shadow:0 0 0 2px var(--ui-bg-elevated);display:block;height:.4rem;width:.4rem}
+</style>

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

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