@abraca/nuxt 1.9.1 → 2.0.1

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

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

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

@@ -1,33 +1,65 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useAAField } from "../../composables/useAAField";
+import { awareRingStyle } from "../../utils/awareRingStyle";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  fieldKey: { type: String, required: true }
+  fieldKey: { type: String, required: true },
+  max: { type: Number, required: false, default: 3 }
 });
-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" };
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const ringStyle = computed(() => awareRingStyle({
+  hover: hoverers.value[0]?.user?.color,
+  focus: focusers.value[0]?.user?.color,
+  press: pressers.value[0]?.user?.color
+}));
+const overlayPeers = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of pressers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  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 pulseKey = ref(0);
+watch(isPressed, (val, prev) => {
+  if (val && !prev) pulseKey.value++;
+});
+const pulseColor = computed(
+  () => pressers.value[0]?.user?.color ?? focusers.value[0]?.user?.color ?? hoverers.value[0]?.user?.color ?? "currentColor"
+);
 </script>
 
 <template>
   <span
-    class="relative inline-flex"
-    :style="pressRingStyle"
+    class="aa-host aa-host--inline"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
     v-on="handlers"
   >
     <UButton v-bind="$attrs" />
+    <span
+      v-if="pulseKey > 0"
+      :key="pulseKey"
+      class="aa-press-pulse"
+      :style="{ '--aa-pulse-color': pulseColor }"
+    />
     <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"
+        v-if="overlayPeers.length"
+        class="aa-overlay"
       >
         <AAvatar
-          v-for="p in hoverers.slice(0, 3)"
+          v-for="p in overlayPeers.slice(0, max)"
           :key="p.clientId"
           :user="p"
           size="2xs"
@@ -40,5 +72,5 @@ const pressRingStyle = computed(() => {
 </template>
 
 <style scoped>
-.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--inline{display:inline-flex}.aa-host--pressed{filter:brightness(.88)}.aa-press-pulse{animation:aa-press-pulse .26s ease-out forwards;border-radius:inherit;inset:0;pointer-events:none;position:absolute}@keyframes aa-press-pulse{0%{box-shadow:0 0 0 0 var(--aa-pulse-color);opacity:.45}to{box-shadow:0 0 0 12px var(--aa-pulse-color);opacity:0}}.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/AButton.vue.d.ts

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

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    live?: boolean;
+    peers?: boolean;
+    total?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    peers: boolean;
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,145 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { CalendarDate, parseDate } from "@internationalized/date";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+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 },
+  sync: { type: Boolean, required: false, default: false },
+  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 enableSync = computed(() => props.sync || props.total);
+const enableLive = computed(() => props.live || props.total);
+const enablePeers = computed(() => props.peers || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, hoverHandlers } = useAAField(() => props.fieldKey);
+const liveView = useAAUIState(() => `${props.fieldKey}:view`, { defaultValue: null });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const synced = useAAFieldValue(() => props.fieldKey);
+function serializeDate(v) {
+  if (v == null) return null;
+  if (v instanceof CalendarDate) return v.toString();
+  if (typeof v === "object" && v !== null) {
+    const r = v;
+    return {
+      start: r.start instanceof CalendarDate ? r.start.toString() : void 0,
+      end: r.end instanceof CalendarDate ? r.end.toString() : void 0
+    };
+  }
+  return null;
+}
+function deserializeDate(s) {
+  if (s == null) return null;
+  if (typeof s === "string") {
+    try {
+      return parseDate(s);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof s === "object") {
+    const out = {};
+    try {
+      if (s.start) out.start = parseDate(s.start);
+    } catch {
+    }
+    try {
+      if (s.end) out.end = parseDate(s.end);
+    } catch {
+    }
+    return out;
+  }
+  return null;
+}
+const localDate = ref(enableSync.value ? deserializeDate(synced.value) : null);
+let suppress = false;
+watch(synced, (val) => {
+  if (!enableSync.value || suppress) return;
+  const next = deserializeDate(val);
+  if (JSON.stringify(serializeDate(localDate.value)) !== JSON.stringify(val)) {
+    suppress = true;
+    localDate.value = next;
+    queueMicrotask(() => {
+      suppress = false;
+    });
+  }
+});
+watch(localDate, (val) => {
+  if (!enableSync.value || suppress) return;
+  const next = serializeDate(val);
+  if (JSON.stringify(synced.value) !== JSON.stringify(next)) {
+    suppress = true;
+    synced.value = next;
+    queueMicrotask(() => {
+      suppress = false;
+    });
+  }
+}, { deep: true });
+const localView = ref(enableLive.value ? liveView.value ?? null : null);
+watch(liveView, (val) => {
+  if (enableLive.value && JSON.stringify(localView.value) !== JSON.stringify(val)) localView.value = val ?? null;
+});
+watch(localView, (val) => {
+  if (enableLive.value && JSON.stringify(liveView.value) !== JSON.stringify(val)) liveView.value = val;
+});
+const { peers: hoveredDayPeers, setLocal: setHoveredDay } = useAAEphemeral(() => `${props.fieldKey}:hoveredDay`);
+function onMouseover(e) {
+  if (!enablePeers.value) return;
+  const cell = e.target?.closest('[data-day], [aria-label][role="button"]');
+  const day = cell?.getAttribute("data-day") || cell?.getAttribute("aria-label");
+  if (day) setHoveredDay(day);
+}
+function onMouseleave() {
+  if (!enablePeers.value) return;
+  setHoveredDay(null);
+}
+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
+);
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--inline"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="enableAwareness ? hoverHandlers : {}"
+    @mouseover="onMouseover"
+    @mouseleave="onMouseleave"
+  >
+    <UCalendar
+      v-if="enableSync && !hasExternalModel"
+      v-model="localDate"
+      v-bind="attrs"
+    />
+    <UCalendar v-else v-bind="attrs" />
+
+    <div v-if="enablePeers && hoveredDayPeers.length" class="aa-cal-peers">
+      <span
+        v-for="p in hoveredDayPeers"
+        :key="p.clientId"
+        class="aa-cal-peer-chip"
+        :style="{ borderColor: p.user?.color ?? 'var(--ui-border)' }"
+      >
+        <span class="aa-cal-peer-dot" :style="{ background: p.user?.color ?? 'var(--ui-text-muted)' }" />
+        {{ p.user?.name || "Anonymous" }} · {{ p.value }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);padding:.25rem;position:relative;transition:filter .12s ease,box-shadow .1s ease}.aa-host--inline{display:inline-block}.aa-host--pressed{filter:brightness(.94)}.aa-cal-peers{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}.aa-cal-peer-chip{align-items:center;border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text-highlighted);display:inline-flex;font-size:.6875rem;font-weight:500;gap:.35rem;padding:.15rem .55rem}.aa-cal-peer-dot{border-radius:999px;height:.5rem;width:.5rem}
+</style>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    sync?: boolean;
+    live?: boolean;
+    peers?: boolean;
+    total?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sync: boolean;
+    peers: boolean;
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+<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 liveIndex = useAAUIState(() => `${props.fieldKey}:slide`, { defaultValue: 0 });
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const local = ref(enableLive.value ? liveIndex.value ?? 0 : 0);
+watch(liveIndex, (val) => {
+  if (enableLive.value && local.value !== (val ?? 0)) local.value = val ?? 0;
+});
+watch(local, (val) => {
+  if (enableLive.value && (liveIndex.value ?? 0) !== val) liveIndex.value = val;
+});
+</script>
+
+<template>
+  <UCarousel
+    v-if="enableLive && !hasExternalModel"
+    v-model="local"
+    v-bind="attrs"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData ?? {}" />
+    </template>
+  </UCarousel>
+  <UCarousel v-else v-bind="attrs">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData ?? {}" />
+    </template>
+  </UCarousel>
+</template>

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

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

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

@@ -0,0 +1,74 @@
+<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 },
+  sync: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+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(() => awareRingStyle({
+  hover: hoverers.value[0]?.user?.color,
+  focus: focusers.value[0]?.user?.color,
+  press: pressers.value[0]?.user?.color
+}));
+const overlayPeers = computed(() => {
+  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;
+});
+</script>
+
+<template>
+  <span
+    class="aa-host aa-host--inline"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="handlers"
+  >
+    <UCheckbox
+      v-if="props.sync && !hasExternalModel"
+      v-model="synced"
+      v-bind="attrs"
+    />
+    <UCheckbox
+      v-else
+      v-bind="attrs"
+    />
+    <Transition name="aa-peer">
+      <span
+        v-if="overlayPeers.length"
+        class="aa-overlay"
+      >
+        <AAvatar
+          v-for="p in overlayPeers.slice(0, max)"
+          :key="p.clientId"
+          :user="p"
+          size="2xs"
+          :show-status="false"
+          :show-tooltip="true"
+        />
+      </span>
+    </Transition>
+  </span>
+</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(.85)}.aa-overlay{display:flex;gap:0;pointer-events:none;position:absolute;right:0;top:-.625rem;z-index:10}.aa-overlay>*+*{margin-left:-.25rem}.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+</style>

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

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

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

@@ -0,0 +1,79 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+import { awareRingStyle } from "../../utils/awareRingStyle";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  sync: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: 3 }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableSync = computed(() => props.sync || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
+const synced = useAAFieldValue(() => props.fieldKey);
+const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
+const ringStyle = computed(
+  () => enableAwareness.value ? awareRingStyle({
+    hover: hoverers.value[0]?.user?.color,
+    focus: focusers.value[0]?.user?.color,
+    press: pressers.value[0]?.user?.color
+  }) : void 0
+);
+const overlayPeers = computed(() => {
+  if (!enableAwareness.value) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of focusers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  return out;
+});
+const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :class="{ 'aa-host--pressed': isPressed }"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <UCheckboxGroup
+      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>
+    </UCheckboxGroup>
+    <UCheckboxGroup
+      v-else
+      v-bind="attrs"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData ?? {}" />
+      </template>
+    </UCheckboxGroup>
+
+    <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/ACheckboxGroup.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/ACollapsible.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;
+    };
+};