@abraca/nuxt 1.8.2 → 2.0.0

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;

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    fieldKey: string;
+    state: Record<string, unknown>;
+    /** Keys to skip when mirroring (e.g. password fields). */
+    skip?: string[];
+};
+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<{}>, {
+    skip: 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/AFormSync.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, watch } from "vue";
+import { useAAFieldValue } from "../../composables/useAAFieldValue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  state: { type: Object, required: true },
+  skip: { type: Array, required: false, default: () => [] }
+});
+const skipSet = computed(() => new Set(props.skip));
+const stateKeys = computed(() => Object.keys(props.state).filter((k) => !skipSet.value.has(k)));
+const sync = {};
+for (const k of stateKeys.value) {
+  sync[k] = useAAFieldValue(() => `${props.fieldKey}:${k}`);
+}
+let suppress = false;
+const stops = [];
+onMounted(() => {
+  for (const key of stateKeys.value) {
+    stops.push(watch(
+      () => props.state[key],
+      (v) => {
+        if (suppress) return;
+        if (sync[key].value !== v) sync[key].value = v;
+      },
+      { deep: true }
+    ));
+  }
+  for (const key of stateKeys.value) {
+    stops.push(watch(
+      () => sync[key].value,
+      (v) => {
+        if (v === void 0) return;
+        if (props.state[key] === v) return;
+        suppress = true;
+        props.state[key] = v;
+        queueMicrotask(() => {
+          suppress = false;
+        });
+      },
+      { immediate: true }
+    ));
+  }
+});
+onBeforeUnmount(() => {
+  for (const s of stops) s();
+});
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    fieldKey: string;
+    state: Record<string, unknown>;
+    /** Keys to skip when mirroring (e.g. password fields). */
+    skip?: string[];
+};
+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<{}>, {
+    skip: 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/AGlobalFocusLayer.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/AGlobalFocusLayer.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useRoute } from "#imports";
+import { useAAEphemeral } from "../../composables/useAAEphemeral";
+import { rangeFromPaths } from "../../utils/domPath";
+const { peers } = useAAEphemeral("aa:focus");
+const route = useRoute();
+const selections = ref([]);
+let raf = 0;
+let mo = null;
+function recompute() {
+  cancelAnimationFrame(raf);
+  raf = requestAnimationFrame(() => {
+    const out = [];
+    for (const p of peers.value) {
+      const v = p.value;
+      if (!v || v.kind !== "selection" || v.route !== route.path || !v.start || !v.end) continue;
+      const range = rangeFromPaths(v.start, v.end);
+      if (!range || range.collapsed) continue;
+      const rects = Array.from(range.getClientRects()).filter((r) => r.width > 0 && r.height > 0).map((r) => ({ top: r.top, left: r.left, width: r.width, height: r.height }));
+      if (rects.length === 0) continue;
+      out.push({ clientId: p.clientId, user: p.user, rects });
+    }
+    selections.value = out;
+  });
+}
+function onScroll() {
+  recompute();
+}
+function onResize() {
+  recompute();
+}
+onMounted(() => {
+  recompute();
+  document.addEventListener("scroll", onScroll, { passive: true, capture: true });
+  window.addEventListener("resize", onResize, { passive: true });
+  mo = new MutationObserver(recompute);
+  mo.observe(document.body, { childList: true, subtree: true, characterData: true });
+});
+onBeforeUnmount(() => {
+  cancelAnimationFrame(raf);
+  document.removeEventListener("scroll", onScroll, { capture: true });
+  window.removeEventListener("resize", onResize);
+  mo?.disconnect();
+});
+import { watch } from "vue";
+watch(peers, recompute, { deep: true, flush: "post" });
+watch(() => route.path, recompute);
+function tintFor(p) {
+  return p.user?.color ?? "#888";
+}
+function colorFor(p) {
+  return p.user?.color ?? "#888";
+}
+function nameFor(p) {
+  return p.user?.name || "Anonymous";
+}
+</script>
+
+<template>
+  <div class="aa-global-focus-layer" data-aa-skip-anchor aria-hidden="true">
+    <template v-for="p in selections" :key="p.clientId">
+      <div
+        v-for="(r, idx) in p.rects"
+        :key="`sel-${p.clientId}-${idx}`"
+        class="aa-global-focus-layer__rect"
+        :style="{
+  top: r.top + 'px',
+  left: r.left + 'px',
+  width: r.width + 'px',
+  height: r.height + 'px',
+  background: tintFor(p)
+}"
+      />
+      <span
+        v-if="p.rects.length"
+        class="aa-global-focus-layer__flag"
+        :style="{
+  top: p.rects[0].top + 'px',
+  left: p.rects[0].left + 'px',
+  background: colorFor(p)
+}"
+      >{{ nameFor(p) }}</span>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.aa-global-focus-layer{inset:0;pointer-events:none;position:fixed;z-index:40}.aa-global-focus-layer__rect{border-radius:2px;opacity:.2;pointer-events:none;position:fixed}.aa-global-focus-layer__flag{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.55rem;font-weight:500;line-height:1;margin-top:-2px;padding:.18rem .35rem;pointer-events:none;position:fixed;transform:translateY(-100%);white-space:nowrap}
+</style>

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** Stable, unique field key for this item — usually `${parent}:item:${id}`. */
+    fieldKey: string;
+    /** Layout mode: 'inline' for chips, 'block' for full-row items. */
+    variant?: 'inline' | 'block';
+    /** Show a tiny peer-name flag at the top-right of the item when active. */
+    showFlag?: boolean;
+    /** Paint a peer-coloured backdrop tint when active. Default true. */
+    tinted?: 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<{}>, {
+    variant: "inline" | "block";
+    showFlag: boolean;
+    tinted: 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/AHoverItem.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  variant: { type: String, required: false, default: "block" },
+  showFlag: { type: Boolean, required: false, default: true },
+  tinted: { type: Boolean, required: false, default: true }
+});
+const { hoverers, focusers, pressers, isPressed, onMouseenter, onMouseleave, onMousedown, onMouseup } = useAAField(() => props.fieldKey);
+const wrapperRef = ref(null);
+const rowEl = ref(null);
+const ROW_SELECTOR = [
+  '[role="option"]',
+  '[role="menuitem"]',
+  '[role="menuitemcheckbox"]',
+  '[role="menuitemradio"]',
+  '[role="tab"]',
+  '[role="treeitem"]',
+  '[data-slot="item"]',
+  '[data-slot="trigger"]',
+  ".aa-row-target"
+].join(", ");
+let savedStyle = { background: "", boxShadow: "", position: "" };
+function attachToRow() {
+  const wrapper = wrapperRef.value;
+  if (!wrapper) return;
+  const row = wrapper.closest(ROW_SELECTOR);
+  if (!row || row === rowEl.value) return;
+  detachFromRow();
+  rowEl.value = row;
+  savedStyle = {
+    background: row.style.backgroundColor,
+    boxShadow: row.style.boxShadow,
+    position: row.style.position
+  };
+  row.addEventListener("mouseenter", onMouseenter);
+  row.addEventListener("mouseleave", onMouseleave);
+  row.addEventListener("mousedown", onMousedown);
+  row.addEventListener("mouseup", onMouseup);
+}
+function detachFromRow() {
+  const row = rowEl.value;
+  if (!row) return;
+  row.removeEventListener("mouseenter", onMouseenter);
+  row.removeEventListener("mouseleave", onMouseleave);
+  row.removeEventListener("mousedown", onMousedown);
+  row.removeEventListener("mouseup", onMouseup);
+  row.style.backgroundColor = savedStyle.background;
+  row.style.boxShadow = savedStyle.boxShadow;
+  rowEl.value = null;
+}
+onMounted(attachToRow);
+onBeforeUnmount(detachFromRow);
+const backdropTint = computed(() => {
+  if (!props.tinted) return null;
+  const color = pressers.value[0]?.user?.color ?? focusers.value[0]?.user?.color ?? hoverers.value[0]?.user?.color;
+  if (!color) return null;
+  const alpha = pressers.value.length ? 0.32 : focusers.value.length ? 0.26 : 0.18;
+  return colorMix(color, alpha);
+});
+const ringShadow = computed(() => {
+  const layers = [];
+  const hover = hoverers.value[0]?.user?.color;
+  const focus = focusers.value[0]?.user?.color;
+  const press = pressers.value[0]?.user?.color;
+  if (press) layers.push(`inset 0 0 0 2px ${press}`);
+  else if (focus) layers.push(`inset 0 0 0 2px ${focus}`);
+  else if (hover) layers.push(`inset 0 0 0 1px ${hover}`);
+  return layers.join(", ");
+});
+function colorMix(color, alpha) {
+  if (color.startsWith("#") && color.length === 7) {
+    const a = Math.round(alpha * 255).toString(16).padStart(2, "0");
+    return `${color}${a}`;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
+  if (color.startsWith("hsl(")) return color.replace("hsl(", "hsla(").replace(")", `, ${alpha})`);
+  return color;
+}
+watch([backdropTint, ringShadow, rowEl], () => {
+  const row = rowEl.value;
+  if (!row) return;
+  row.style.backgroundColor = backdropTint.value || savedStyle.background;
+  row.style.boxShadow = ringShadow.value || savedStyle.boxShadow;
+  if (!row.style.position) row.style.position = "relative";
+}, { flush: "post" });
+const flagPeer = computed(
+  () => pressers.value[0] ?? focusers.value[0] ?? hoverers.value[0]
+);
+const pulseKey = ref(0);
+watch(isPressed, (val, prev) => {
+  if (val && !prev) pulseKey.value++;
+});
+const pulseColor = computed(() => pressers.value[0]?.user?.color ?? "currentColor");
+</script>
+
+<template>
+  <span
+    ref="wrapperRef"
+    class="aa-item"
+    :class="[`aa-item--${variant}`]"
+  >
+    <slot />
+    <span
+      v-if="pulseKey > 0"
+      :key="pulseKey"
+      class="aa-item__pulse"
+      :style="{ '--aa-pulse-color': pulseColor }"
+    />
+    <Transition name="aa-flag">
+      <span
+        v-if="showFlag && flagPeer"
+        class="aa-item__flag"
+        :style="{ background: flagPeer.user?.color ?? 'var(--ui-text-muted)' }"
+      >{{ flagPeer.user?.name || "Anonymous" }}</span>
+    </Transition>
+  </span>
+</template>
+
+<style scoped>
+.aa-item{border-radius:inherit;display:contents;position:relative}.aa-item--inline{align-items:center;display:inline-flex}.aa-item__pulse{animation:aa-item-pulse .35s ease-out forwards;border-radius:inherit;inset:0;pointer-events:none;position:absolute}@keyframes aa-item-pulse{0%{box-shadow:0 0 0 0 var(--aa-pulse-color);opacity:.5}to{box-shadow:0 0 0 14px var(--aa-pulse-color);opacity:0}}.aa-item__flag{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.55rem;font-weight:500;line-height:1;padding:.18rem .35rem;pointer-events:none;position:absolute;right:.25rem;top:-.55rem;white-space:nowrap;z-index:5}.aa-flag-enter-active,.aa-flag-leave-active{transition:opacity .12s ease,transform .12s ease}.aa-flag-enter-from,.aa-flag-leave-to{opacity:0;transform:translateY(2px)}
+</style>