@abraca/nuxt 1.8.2 → 2.0.0

package/dist/runtime/components/shell/ASyncStatus.d.vue.ts

@@ -15,8 +15,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
-    syncing: boolean;
     progress: number;
+    syncing: boolean;
     collapsed: boolean;
     errorCount: number;
     pendingUploads: number;

package/dist/runtime/components/shell/ASyncStatus.vue.d.ts

@@ -15,8 +15,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
-    syncing: boolean;
     progress: number;
+    syncing: boolean;
     collapsed: boolean;
     errorCount: number;
     pendingUploads: number;

package/dist/runtime/components/shell/AUserMenu.d.vue.ts

@@ -12,13 +12,13 @@ type __VLS_Props = {
     extraItems?: DropdownMenuItem[][];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: () => any;
     "open-settings": () => any;
     "open-account": () => any;
+    logout: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onLogout?: (() => any) | undefined;
     "onOpen-settings"?: (() => any) | undefined;
     "onOpen-account"?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
 }>, {
     color: string;
     collapsed: boolean;

package/dist/runtime/components/shell/AUserMenu.vue.d.ts

@@ -12,13 +12,13 @@ type __VLS_Props = {
     extraItems?: DropdownMenuItem[][];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: () => any;
     "open-settings": () => any;
     "open-account": () => any;
+    logout: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onLogout?: (() => any) | undefined;
     "onOpen-settings"?: (() => any) | undefined;
     "onOpen-account"?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
 }>, {
     color: string;
     collapsed: boolean;

package/dist/runtime/components/shell/AWelcomeScreen.d.vue.ts

@@ -78,10 +78,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     currentColor: string;
     isClaimed: boolean;
     avatarStyle: string;
+    connectionError: string;
     colors: string[];
     neutrals: string[];
     currentNeutral: string;
-    connectionError: string;
     claimLoading: boolean;
     claimError: string | null;
     claimSuccess: boolean;

package/dist/runtime/components/shell/AWelcomeScreen.vue.d.ts

@@ -78,10 +78,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     currentColor: string;
     isClaimed: boolean;
     avatarStyle: string;
+    connectionError: string;
     colors: string[];
     neutrals: string[];
     currentNeutral: string;
-    connectionError: string;
     claimLoading: boolean;
     claimError: string | null;
     claimSuccess: boolean;

package/dist/runtime/composables/useAACaret.d.ts

@@ -0,0 +1,29 @@
+import { type Ref } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+/**
+ * Per-peer text-input caret ranges — the building block under the `peers`
+ * prop on `<AInput>` / `<ATextarea>`.
+ *
+ * Built on top of `useAAEphemeral`. The local element's `selectionStart`
+ * and `selectionEnd` are written into the awareness slot whenever the
+ * element gains focus or its selection changes; clear on blur. Every other
+ * peer's caret is exposed as a typed list ready to render as a coloured
+ * label inside the input.
+ *
+ * Awareness already RAF-throttles emitted updates downstream; we additionally
+ * coalesce write-side via the natural `selectionchange` cadence so a fast
+ * cursor still produces at most one frame of work per render cycle.
+ */
+export interface PeerCaret {
+    clientId: number;
+    start: number;
+    end: number;
+    user?: {
+        name?: string;
+        color?: string;
+        publicKey?: string;
+    };
+}
+export declare function useAACaret(fieldKey: MaybeRefOrGetter<string>, elementRef: Ref<HTMLInputElement | HTMLTextAreaElement | null | undefined>): {
+    carets: import("vue").ComputedRef<PeerCaret[]>;
+};

package/dist/runtime/composables/useAACaret.js

@@ -0,0 +1,64 @@
+import { computed, onScopeDispose, watch } from "vue";
+import { useAAEphemeral } from "./useAAEphemeral.js";
+export function useAACaret(fieldKey, elementRef) {
+  const { peers, setLocal } = useAAEphemeral(fieldKey);
+  let attached = null;
+  function publish() {
+    if (!attached) return;
+    const start = attached.selectionStart;
+    const end = attached.selectionEnd;
+    if (start == null || end == null) return;
+    setLocal({ start, end });
+  }
+  function clear() {
+    setLocal(null);
+  }
+  function onSelectionChange() {
+    if (!attached) return;
+    if (document.activeElement !== attached) return;
+    publish();
+  }
+  function publishSoon() {
+    queueMicrotask(publish);
+  }
+  function attach(el) {
+    if (attached === el) return;
+    detach();
+    attached = el;
+    el.addEventListener("focus", publish);
+    el.addEventListener("blur", clear);
+    el.addEventListener("keydown", publishSoon);
+    el.addEventListener("keyup", publish);
+    el.addEventListener("mouseup", publish);
+    el.addEventListener("mousedown", publishSoon);
+    el.addEventListener("input", publish);
+    document.addEventListener("selectionchange", onSelectionChange);
+  }
+  function detach() {
+    if (!attached) return;
+    attached.removeEventListener("focus", publish);
+    attached.removeEventListener("blur", clear);
+    attached.removeEventListener("keydown", publishSoon);
+    attached.removeEventListener("keyup", publish);
+    attached.removeEventListener("mouseup", publish);
+    attached.removeEventListener("mousedown", publishSoon);
+    attached.removeEventListener("input", publish);
+    document.removeEventListener("selectionchange", onSelectionChange);
+    attached = null;
+    clear();
+  }
+  watch(elementRef, (el) => {
+    if (el) attach(el);
+    else detach();
+  }, { immediate: true, flush: "post" });
+  onScopeDispose(detach);
+  const carets = computed(
+    () => peers.value.map((p) => ({
+      clientId: p.clientId,
+      start: p.value.start,
+      end: p.value.end,
+      user: p.user
+    }))
+  );
+  return { carets };
+}

package/dist/runtime/composables/useAAEphemeral.d.ts

@@ -0,0 +1,32 @@
+import type { MaybeRefOrGetter } from 'vue';
+/**
+ * Per-peer ephemeral UI state — the building block under the `peers` prop on
+ * every aware component.
+ *
+ * Each peer writes its value into a *namespaced slot* on its own awareness
+ * record (`peer:<fieldKey>`), so writes never collide across peers. Reads
+ * return every peer's current value, excluding the local user, with their
+ * `user` info already attached.
+ *
+ * Use cases:
+ *   - text input caret ranges (one per peer)
+ *   - currently-highlighted dropdown option (one per peer)
+ *   - drag delta on a slider thumb (one per peer)
+ *   - free-floating mouse cursor coords (one per peer)
+ *
+ * Awareness already RAF-throttles its `change` event in `useAwareness`, so
+ * even a 60Hz writer doesn't storm Vue render.
+ */
+export interface PeerValue<T> {
+    clientId: number;
+    value: T;
+    user?: {
+        name?: string;
+        color?: string;
+        publicKey?: string;
+    };
+}
+export declare function useAAEphemeral<T = unknown>(fieldKey: MaybeRefOrGetter<string>): {
+    peers: import("vue").ComputedRef<PeerValue<T>[]>;
+    setLocal: (value: T | null) => void;
+};

package/dist/runtime/composables/useAAEphemeral.js

@@ -0,0 +1,33 @@
+import { computed } from "vue";
+import { useAwareness } from "./useAwareness.js";
+import { useAbracadabra } from "./useAbracadabra.js";
+function resolveKey(fieldKey) {
+  if (typeof fieldKey === "function") return fieldKey();
+  if (fieldKey && typeof fieldKey === "object" && "value" in fieldKey) return fieldKey.value;
+  return fieldKey;
+}
+export function useAAEphemeral(fieldKey) {
+  const { states, setField } = useAwareness();
+  const { provider } = useAbracadabra();
+  const slot = computed(() => `peer:${resolveKey(fieldKey)}`);
+  function setLocal(value) {
+    setField(slot.value, value);
+  }
+  const peers = computed(() => {
+    const out = [];
+    const key = slot.value;
+    const localId = provider.value?.awareness?.clientID;
+    for (const [clientId, state] of states.value.entries()) {
+      if (clientId === localId) continue;
+      const v = state[key];
+      if (v === null || v === void 0) continue;
+      out.push({
+        clientId,
+        value: v,
+        user: state.user
+      });
+    }
+    return out;
+  });
+  return { peers, setLocal };
+}

package/dist/runtime/composables/useAAField.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
 import type { AwarenessPeer } from '../types.js';
 /**
  * Per-element interaction awareness.
@@ -16,11 +16,13 @@ import type { AwarenessPeer } from '../types.js';
  *
  * Field convention: "{scope}:{element-id}", e.g. "doc:toolbar:bold", "settings:save-btn"
  */
-export declare function useAAField(key: MaybeRef<string>): {
+export declare function useAAField(key: MaybeRefOrGetter<string>): {
     hoverers: import("vue").ComputedRef<AwarenessPeer[]>;
     pressers: import("vue").ComputedRef<AwarenessPeer[]>;
     focusers: import("vue").ComputedRef<AwarenessPeer[]>;
     hasRemoteActivity: import("vue").ComputedRef<boolean>;
+    localPress: import("vue").Ref<boolean, boolean>;
+    isPressed: import("vue").ComputedRef<boolean>;
     handlers: {
         mouseenter: () => void;
         mouseleave: () => void;
@@ -33,6 +35,12 @@ export declare function useAAField(key: MaybeRef<string>): {
         mouseenter: () => void;
         mouseleave: () => void;
     };
+    hoverPressHandlers: {
+        mouseenter: () => void;
+        mouseleave: () => void;
+        mousedown: () => void;
+        mouseup: () => void;
+    };
     onMouseenter: () => void;
     onMouseleave: () => void;
     onMousedown: () => void;

package/dist/runtime/composables/useAAField.js

@@ -1,10 +1,12 @@
-import { computed, isRef } from "vue";
+import { computed, isRef, onScopeDispose, ref } from "vue";
 import { useAwareness } from "./useAwareness.js";
 import { useAwarenessPeers } from "./useAwarenessPeers.js";
 export function useAAField(key) {
   const { setField } = useAwareness();
   const { peers } = useAwarenessPeers();
-  const fieldKey = computed(() => isRef(key) ? key.value : key);
+  const fieldKey = computed(
+    () => typeof key === "function" ? key() : isRef(key) ? key.value : key
+  );
   const hoverers = computed(
     () => peers.value.filter((p) => p.hover === fieldKey.value)
   );
@@ -17,6 +19,21 @@ export function useAAField(key) {
   const hasRemoteActivity = computed(
     () => hoverers.value.length > 0 || pressers.value.length > 0 || focusers.value.length > 0
   );
+  const localPress = ref(false);
+  function releaseLocalPress() {
+    if (!localPress.value) return;
+    localPress.value = false;
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("pointerup", releaseLocalPress);
+    window.addEventListener("pointercancel", releaseLocalPress);
+    window.addEventListener("blur", releaseLocalPress);
+    onScopeDispose(() => {
+      window.removeEventListener("pointerup", releaseLocalPress);
+      window.removeEventListener("pointercancel", releaseLocalPress);
+      window.removeEventListener("blur", releaseLocalPress);
+    });
+  }
   function onMouseenter() {
     setField("hover", fieldKey.value);
   }
@@ -24,9 +41,11 @@ export function useAAField(key) {
     setField("hover", null);
   }
   function onMousedown() {
+    localPress.value = true;
     setField("press", fieldKey.value);
   }
   function onMouseup() {
+    localPress.value = false;
     setField("press", null);
   }
   function onFocus() {
@@ -35,6 +54,7 @@ export function useAAField(key) {
   function onBlur() {
     setField("focus", null);
   }
+  const isPressed = computed(() => localPress.value || pressers.value.length > 0);
   const handlers = {
     mouseenter: onMouseenter,
     mouseleave: onMouseleave,
@@ -47,13 +67,22 @@ export function useAAField(key) {
     mouseenter: onMouseenter,
     mouseleave: onMouseleave
   };
+  const hoverPressHandlers = {
+    mouseenter: onMouseenter,
+    mouseleave: onMouseleave,
+    mousedown: onMousedown,
+    mouseup: onMouseup
+  };
   return {
     hoverers,
     pressers,
     focusers,
     hasRemoteActivity,
+    localPress,
+    isPressed,
     handlers,
     hoverHandlers,
+    hoverPressHandlers,
     onMouseenter,
     onMouseleave,
     onMousedown,

package/dist/runtime/composables/useAAFieldValue.d.ts

@@ -0,0 +1,26 @@
+import { type WritableComputedRef } from 'vue';
+/**
+ * Optional collaborative value-sync layer for <AInput>, <ATextarea>, <ASelect>,
+ * and other Aware form components.
+ *
+ * Stores a single value keyed by `fieldKey` on a shared Y.Map called
+ * `aware-fields` on the root Y.Doc. All connected peers see edits in real time.
+ *
+ * Usage policy inside Aware components:
+ *   - If consumer passes their own `v-model`, that takes precedence — sync is
+ *     skipped unless `sync` is explicitly true.
+ *   - When `sync` is true (or no v-model is provided), the composable produces
+ *     a writable computed that reads/writes the Y.Map.
+ *
+ * Writes are debounced ~120ms to avoid storming the doc with every keystroke
+ * while still feeling immediate.
+ */
+export declare function useAAFieldValue<T = unknown>(fieldKey: () => string, options?: {
+    debounceMs?: number;
+    defaultValue?: T;
+}): WritableComputedRef<T | undefined>;
+/**
+ * Marker watcher: when `fieldKey` changes (rare), flush immediately
+ * to avoid writing the new value to the OLD key.
+ */
+export declare function watchFieldKey(fieldKey: () => string, onChange: (key: string, prev: string) => void): void;

package/dist/runtime/composables/useAAFieldValue.js

@@ -0,0 +1,32 @@
+import { computed, watch } from "vue";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { useSyncedMap } from "./useYDoc.js";
+export function useAAFieldValue(fieldKey, options = {}) {
+  const { doc } = useAbracadabra();
+  const { data, set } = useSyncedMap(doc, "aware-fields");
+  const debounceMs = options.debounceMs ?? 120;
+  let timer = null;
+  let pending;
+  const flush = () => {
+    timer = null;
+    if (pending !== void 0) {
+      set(fieldKey(), pending);
+    } else {
+      set(fieldKey(), "");
+    }
+  };
+  return computed({
+    get() {
+      const v = data[fieldKey()];
+      return v === void 0 ? options.defaultValue : v;
+    },
+    set(value) {
+      pending = value;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(flush, debounceMs);
+    }
+  });
+}
+export function watchFieldKey(fieldKey, onChange) {
+  watch(() => fieldKey(), (k, prev) => onChange(k, prev));
+}

package/dist/runtime/composables/useAAFocus.d.ts

@@ -0,0 +1,68 @@
+import { type DomPath } from '../utils/domPath.js';
+/**
+ * App-wide "focus" broadcast for collaborative awareness.
+ *
+ * Emits a single per-peer `peer:aa:focus` slot describing where the local
+ * user is currently looking. Two payload shapes share the same slot so
+ * downstream consumers (text-selection layer, smart scroll-follow) can pick
+ * the one they care about:
+ *
+ *   { kind: 'selection', route, start: DomPath, end: DomPath }
+ *   { kind: 'anchor',    route, anchor: DomPath }
+ *
+ * Selection takes precedence: if the user has a non-empty Selection the
+ * payload describes its endpoints; otherwise the payload anchors on the
+ * topmost scroll-visible element near the viewport top edge so that smart
+ * follow can centre the same conceptual region on a different-sized screen.
+ *
+ * The `route` discriminator scopes the payload — peers on different pages
+ * don't try to interpret each other's anchors. Other tabs only honour
+ * payloads whose route matches their own.
+ */
+/** Per-scroller anchor: identifies WHICH scroll container the anchor lives
+ *  inside (by its DOM path, or omitted for window) plus the element that's
+ *  currently top-visible inside that container and where it sits vertically.
+ *  Each scrollable container the leader has — main viewport, sidebar,
+ *  modal body, etc. — gets its own entry, so the follower can re-scroll
+ *  each local container independently. */
+export interface AAScrollAnchor {
+    /** Path to the scroll container element. Omitted = window/document. */
+    containerPath?: number[];
+    /** Path to the topmost-visible element inside that container. */
+    elementPath: number[];
+    /** Vertical position of the element relative to its container's viewport
+     *  (0 = top edge of container, 1 = bottom edge). */
+    ratio: number;
+}
+/** Element-anchored pointer: stores WHICH element the cursor is over plus
+ *  the offset within its bounding box. Receivers reconstruct the absolute
+ *  viewport position by looking up the same element in their own DOM and
+ *  adding the offset. Survives different scroll positions and viewport
+ *  sizes without falling out of sync. */
+export interface AAPointerAnchor {
+    elementPath: number[];
+    /** Offset from the element's top-left, in CSS pixels. */
+    dx: number;
+    dy: number;
+}
+export interface AAFocusPayload {
+    kind: 'selection' | 'anchor';
+    route: string;
+    start?: DomPath;
+    end?: DomPath;
+    /** Legacy single-anchor field (main viewport). Retained for backwards
+     *  compatibility with older follower clients; prefer reading `scrollers`. */
+    anchor?: DomPath;
+    anchorRatio?: number;
+    /** All scrollable containers the leader has, with their top-visible
+     *  anchor each. Lets the follower drive every scroller (main, sidebar,
+     *  modal, etc.) in step instead of just the main viewport. */
+    scrollers?: AAScrollAnchor[];
+    /** Element-anchored pointer position (path + offset within element). The
+     *  blob layer uses this to render the peer's mouse glow at the same
+     *  *content* position regardless of either tab's scroll state. */
+    pointer?: AAPointerAnchor;
+}
+export declare function useAAFocus(): {
+    snapshot: () => void;
+};

package/dist/runtime/composables/useAAFocus.js

@@ -0,0 +1,174 @@
+import { onMounted, onScopeDispose } from "vue";
+import { useRoute } from "#imports";
+import { useAAEphemeral } from "./useAAEphemeral.js";
+import { serializeRangeEndpoint, pathFromElement } from "../utils/domPath.js";
+export function useAAFocus() {
+  const { setLocal } = useAAEphemeral("aa:focus");
+  const route = useRoute();
+  let raf = 0;
+  let lastSerialized = null;
+  const pointer = { clientX: 0, clientY: 0, fresh: false };
+  function publish(payload) {
+    if (pointer.fresh) {
+      const anchor = serializePointer(pointer.clientX, pointer.clientY);
+      if (anchor) payload.pointer = anchor;
+    }
+    payload.scrollers = collectScrollers();
+    const json = JSON.stringify(payload);
+    if (json === lastSerialized) return;
+    lastSerialized = json;
+    setLocal(payload);
+  }
+  function clear() {
+    if (lastSerialized === null) return;
+    lastSerialized = null;
+    setLocal(null);
+  }
+  function isAnchorable(el) {
+    if (!el) return false;
+    if (el.closest?.("[data-aa-skip-anchor]")) return false;
+    if (el.id?.startsWith("reka-")) return false;
+    if (el.classList?.contains("aa-global-focus-layer")) return false;
+    if (el.classList?.contains("aa-presence-blobs")) return false;
+    if (el.classList?.contains("aa-follow-bar")) return false;
+    return true;
+  }
+  function pickAnchorElement() {
+    const viewportH = window.innerHeight || document.documentElement.clientHeight;
+    const targetY = viewportH * 0.25;
+    const candidates = document.elementsFromPoint(window.innerWidth / 2, targetY);
+    for (const el of candidates) {
+      if (!isAnchorable(el)) continue;
+      const rect = el.getBoundingClientRect();
+      return { el, ratio: rect.top / viewportH };
+    }
+    return null;
+  }
+  function collectScrollers() {
+    const out = [];
+    const winPick = pickElementInside(null);
+    if (winPick) out.push(winPick);
+    const all = document.querySelectorAll("*");
+    const seen = /* @__PURE__ */ new Set();
+    for (const el of all) {
+      if (seen.has(el)) continue;
+      seen.add(el);
+      if (!isAnchorable(el)) continue;
+      const style = getComputedStyle(el);
+      const oy = style.overflowY;
+      if (oy !== "auto" && oy !== "scroll" || el.scrollHeight <= el.clientHeight + 4) continue;
+      const containerPath = pathFromElement(el);
+      if (!containerPath) continue;
+      const pick = pickElementInside(el);
+      if (pick) out.push({ ...pick, containerPath });
+      if (out.length > 6) break;
+    }
+    return out;
+  }
+  function pickElementInside(container) {
+    let probeX, probeY, viewportTop, viewportH;
+    if (container) {
+      const r = container.getBoundingClientRect();
+      probeX = r.left + Math.min(r.width * 0.5, 80);
+      probeY = r.top + 6;
+      viewportTop = r.top;
+      viewportH = r.height;
+    } else {
+      const vh = window.innerHeight || document.documentElement.clientHeight;
+      probeX = window.innerWidth / 2;
+      probeY = vh * 0.05;
+      viewportTop = 0;
+      viewportH = vh;
+    }
+    const candidates = document.elementsFromPoint(probeX, probeY);
+    for (const el of candidates) {
+      if (!isAnchorable(el)) continue;
+      if (container && !container.contains(el)) continue;
+      if (container && el === container) continue;
+      const elPath = pathFromElement(el);
+      if (!elPath) continue;
+      const r = el.getBoundingClientRect();
+      const ratio = (r.top - viewportTop) / Math.max(1, viewportH);
+      return { elementPath: elPath, ratio };
+    }
+    return null;
+  }
+  function serializePointer(clientX, clientY) {
+    const candidates = document.elementsFromPoint(clientX, clientY);
+    for (const el of candidates) {
+      if (!isAnchorable(el)) continue;
+      const path = pathFromElement(el);
+      if (!path) continue;
+      const r = el.getBoundingClientRect();
+      return { elementPath: path, dx: clientX - r.left, dy: clientY - r.top };
+    }
+    return null;
+  }
+  function snapshot() {
+    cancelAnimationFrame(raf);
+    raf = requestAnimationFrame(() => {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+        const range = sel.getRangeAt(0);
+        const anchor = range.startContainer instanceof Element ? range.startContainer : range.startContainer.parentElement;
+        if (anchor?.closest?.("input, textarea")) return;
+        if (anchor?.closest?.(".aa-caret-layer")) return;
+        if (anchor?.closest?.(".aa-global-focus-layer")) return;
+        const start = serializeRangeEndpoint(range.startContainer, range.startOffset);
+        const end = serializeRangeEndpoint(range.endContainer, range.endOffset);
+        if (start && end) {
+          publish({ kind: "selection", route: route.path, start, end });
+          return;
+        }
+      }
+      const picked = pickAnchorElement();
+      if (!picked) {
+        clear();
+        return;
+      }
+      const path = pathFromElement(picked.el);
+      if (!path) {
+        clear();
+        return;
+      }
+      publish({ kind: "anchor", route: route.path, anchor: { elementPath: path }, anchorRatio: picked.ratio });
+    });
+  }
+  function onSelectionChange() {
+    snapshot();
+  }
+  function onScroll() {
+    snapshot();
+  }
+  function onResize() {
+    snapshot();
+  }
+  function onPointerMove(e) {
+    pointer.clientX = e.clientX;
+    pointer.clientY = e.clientY;
+    pointer.fresh = true;
+    snapshot();
+  }
+  function onPointerLeave() {
+    pointer.fresh = false;
+    snapshot();
+  }
+  onMounted(() => {
+    document.addEventListener("selectionchange", onSelectionChange);
+    document.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    document.addEventListener("pointermove", onPointerMove, { passive: true });
+    document.addEventListener("pointerleave", onPointerLeave);
+    window.addEventListener("resize", onResize, { passive: true });
+    snapshot();
+  });
+  onScopeDispose(() => {
+    cancelAnimationFrame(raf);
+    document.removeEventListener("selectionchange", onSelectionChange);
+    document.removeEventListener("scroll", onScroll, { capture: true });
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerleave", onPointerLeave);
+    window.removeEventListener("resize", onResize);
+    clear();
+  });
+  return { snapshot };
+}