@abraca/nuxt 2.10.0 → 2.13.0

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

@@ -87,6 +87,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "delete-snapshot": (version: number) => any;
     "restore-snapshot": (version: number) => any;
     "fork-snapshot": (version: number) => any;
+    "preview-snapshot": (version: number) => any;
     "load-more-snapshots": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate-meta"?: ((patch: Partial<DocPageMeta>) => any) | undefined;
@@ -105,6 +106,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onDelete-snapshot"?: ((version: number) => any) | undefined;
     "onRestore-snapshot"?: ((version: number) => any) | undefined;
     "onFork-snapshot"?: ((version: number) => any) | undefined;
+    "onPreview-snapshot"?: ((version: number) => any) | undefined;
     "onLoad-more-snapshots"?: (() => any) | undefined;
 }>, {
     snapshots: SnapshotMeta[];

package/dist/runtime/components/shell/ADocPanelSettings.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   pendingSnapshotVersion: { type: [Number, null], required: false, default: null },
   creatingSnapshot: { type: Boolean, required: false, default: false }
 });
-const emit = defineEmits(["grant-permission", "change-role", "revoke-permission", "create-invite", "sync-doc", "open-encryption", "user-context-menu", "update-meta", "create-snapshot", "delete-snapshot", "restore-snapshot", "fork-snapshot", "load-more-snapshots"]);
+const emit = defineEmits(["grant-permission", "change-role", "revoke-permission", "create-invite", "sync-doc", "open-encryption", "user-context-menu", "update-meta", "create-snapshot", "delete-snapshot", "restore-snapshot", "fork-snapshot", "preview-snapshot", "load-more-snapshots"]);
 const grantUserId = ref("");
 const grantRole = ref("editor");
 const showManualKeyInput = ref(false);
@@ -114,6 +114,13 @@ function runSnapConfirm() {
   else emit("restore-snapshot", c.version);
 }
 function snapshotMenu(version) {
+  const view = [
+    {
+      label: "View / compare",
+      icon: "i-lucide-eye",
+      onSelect: () => emit("preview-snapshot", version)
+    }
+  ];
   const manage = [
     {
       label: "Restore",
@@ -134,7 +141,7 @@ function snapshotMenu(version) {
       onSelect: () => askSnapDelete(version)
     }
   ];
-  return props.isOwner ? [manage, destructive] : [manage];
+  return props.isOwner ? [view, manage, destructive] : [view, manage];
 }
 function triggerColor(trigger) {
   switch (trigger) {
@@ -728,7 +735,11 @@ function patchMeta(key, value) {
           :key="snap.version"
           class="flex items-center gap-2.5 p-3 rounded-lg bg-(--ui-bg-elevated)"
         >
-          <div class="flex-1 min-w-0">
+          <button
+            type="button"
+            class="flex-1 min-w-0 text-left cursor-pointer"
+            @click="emit('preview-snapshot', snap.version)"
+          >
             <div class="flex items-center gap-2">
               <span class="text-sm font-medium text-(--ui-text-highlighted) tabular-nums">
                 v{{ snap.version }}
@@ -749,7 +760,7 @@ function patchMeta(key, value) {
             <p class="text-xs text-(--ui-text-dimmed) mt-0.5">
               {{ formatSnapTime(snap.created_at) }} · {{ formatSnapSize(snap.size_bytes) }}
             </p>
-          </div>
+          </button>
           <UDropdownMenu
             :items="snapshotMenu(snap.version)"
             :content="{ align: 'end' }"

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

@@ -87,6 +87,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "delete-snapshot": (version: number) => any;
     "restore-snapshot": (version: number) => any;
     "fork-snapshot": (version: number) => any;
+    "preview-snapshot": (version: number) => any;
     "load-more-snapshots": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate-meta"?: ((patch: Partial<DocPageMeta>) => any) | undefined;
@@ -105,6 +106,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onDelete-snapshot"?: ((version: number) => any) | undefined;
     "onRestore-snapshot"?: ((version: number) => any) | undefined;
     "onFork-snapshot"?: ((version: number) => any) | undefined;
+    "onPreview-snapshot"?: ((version: number) => any) | undefined;
     "onLoad-more-snapshots"?: (() => any) | undefined;
 }>, {
     snapshots: SnapshotMeta[];

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

@@ -37,8 +37,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     name: string;
     online: boolean | null;
     currentDocId: string | null;
-    avatarStyle: string;
     isSelf: boolean;
+    avatarStyle: string;
     isFollowing: boolean;
     showFollow: boolean;
     currentDocLabel: string | null;

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

@@ -37,8 +37,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     name: string;
     online: boolean | null;
     currentDocId: string | null;
-    avatarStyle: string;
     isSelf: boolean;
+    avatarStyle: string;
     isFollowing: boolean;
     showFollow: boolean;
     currentDocLabel: string | null;

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

@@ -16,6 +16,8 @@ export interface ChatMessage {
     senderName: string;
     content: string;
     createdAt: number;
+    /** Id of the message this one replies to, if any (threaded reply). */
+    replyTo?: string;
 }
 export interface ChatChannel {
     id: string;
@@ -25,6 +27,12 @@ export interface ChatChannel {
     unreadCount: number;
 }
 export declare function buildDmChannelId(a: string, b: string): string;
+declare function setMuted(id: string, on: boolean): void;
+declare function setPinned(id: string, on: boolean): void;
+declare function setHidden(id: string, on: boolean): void;
+declare function isMuted(id: string): boolean;
+declare function isPinned(id: string): boolean;
+declare function isHidden(id: string): boolean;
 declare let _publicKeyB64: import("vue").Ref<string, string>;
 declare let _userName: import("vue").Ref<string, string>;
 export declare function _initChat(publicKeyB64Ref: typeof _publicKeyB64, userNameRef: typeof _userName): void;
@@ -53,6 +61,7 @@ declare function sendTyping(channelId: string): void;
 declare function setActiveChannel(channelId: string | null): void;
 export declare function useChat(): {
     channels: import("vue").Ref<Record<string, ChatChannel>, Record<string, ChatChannel>>;
+    channelList: import("vue").ComputedRef<ChatChannel[]>;
     activeChannel: import("vue").Ref<string | null, string | null>;
     messagesByChannel: import("vue").Ref<Record<string, ChatMessage[]>, Record<string, ChatMessage[]>>;
     typingByChannel: import("vue").Ref<Record<string, Map<string, string>>, Record<string, Map<string, string>>>;
@@ -62,13 +71,25 @@ export declare function useChat(): {
     sendTyping: typeof sendTyping;
     setActiveChannel: typeof setActiveChannel;
     buildDmChannelId: typeof buildDmChannelId;
+    mutedChannels: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    pinnedChannels: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    hiddenChannels: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    setMuted: typeof setMuted;
+    setPinned: typeof setPinned;
+    setHidden: typeof setHidden;
+    isMuted: typeof isMuted;
+    isPinned: typeof isPinned;
+    isHidden: typeof isHidden;
 };
 export declare function useChatChannel(channelId: string): {
     messages: import("vue").ComputedRef<ChatMessage[]>;
     channel: import("vue").ComputedRef<ChatChannel | undefined>;
     typingUsers: import("vue").ComputedRef<string[]>;
     unreadCount: import("vue").ComputedRef<number>;
-    send: (content: string) => void;
+    send: (content: string, opts?: {
+        mentions?: string[];
+        replyTo?: string;
+    }) => void;
     loadHistory: (opts?: {
         before?: number;
         limit?: number;

package/dist/runtime/composables/useChat.js

@@ -33,6 +33,58 @@ const channels = ref({});
 const typingByChannel = ref({});
 const activeChannel = ref(null);
 const typingTimers = /* @__PURE__ */ new Map();
+function _loadIdSet(key) {
+  if (typeof localStorage === "undefined") return /* @__PURE__ */ new Set();
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? new Set(JSON.parse(raw)) : /* @__PURE__ */ new Set();
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function _saveIdSet(key, set) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(key, JSON.stringify([...set]));
+  } catch {
+  }
+}
+const mutedChannels = ref(_loadIdSet("abracadabra_chat_muted"));
+const pinnedChannels = ref(_loadIdSet("abracadabra_chat_pinned"));
+const hiddenChannels = ref(_loadIdSet("abracadabra_chat_hidden"));
+function _setPref(ref_, key, id, on) {
+  const next = new Set(ref_.value);
+  if (on) next.add(id);
+  else next.delete(id);
+  ref_.value = next;
+  _saveIdSet(key, next);
+}
+function setMuted(id, on) {
+  _setPref(mutedChannels, "abracadabra_chat_muted", id, on);
+}
+function setPinned(id, on) {
+  _setPref(pinnedChannels, "abracadabra_chat_pinned", id, on);
+}
+function setHidden(id, on) {
+  _setPref(hiddenChannels, "abracadabra_chat_hidden", id, on);
+}
+function isMuted(id) {
+  return mutedChannels.value.has(id);
+}
+function isPinned(id) {
+  return pinnedChannels.value.has(id);
+}
+function isHidden(id) {
+  return hiddenChannels.value.has(id);
+}
+const channelList = computed(
+  () => Object.values(channels.value).filter((c) => !hiddenChannels.value.has(c.id)).sort((a, b) => {
+    const pa = pinnedChannels.value.has(a.id) ? 1 : 0;
+    const pb = pinnedChannels.value.has(b.id) ? 1 : 0;
+    if (pa !== pb) return pb - pa;
+    return (b.lastMessage?.createdAt ?? 0) - (a.lastMessage?.createdAt ?? 0);
+  })
+);
 let _publicKeyB64 = ref("");
 let _userName = ref("");
 export function _initChat(publicKeyB64Ref, userNameRef) {
@@ -112,12 +164,13 @@ function addMessage(msg) {
   if (chan) {
     const isActive = activeChannel.value === msg.channel;
     const isOwn = msg.senderId === _publicKeyB64.value;
+    const suppress = isActive || isOwn || mutedChannels.value.has(msg.channel);
     channels.value = {
       ...channels.value,
       [msg.channel]: {
         ...chan,
         lastMessage: msg,
-        unreadCount: isActive || isOwn ? chan.unreadCount : chan.unreadCount + 1
+        unreadCount: suppress ? chan.unreadCount : chan.unreadCount + 1
       }
     };
   }
@@ -148,7 +201,8 @@ export function _handleStatelessChat(payload) {
           // as "chat is broken / messages aren't syncing".
           senderName: rec.sender_name ?? resolveSenderName(senderId),
           content: rec.content ?? "",
-          createdAt: tsMs
+          createdAt: tsMs,
+          ...rec.reply_to ? { replyTo: rec.reply_to } : {}
         };
         ensureChannel(msg.channel, resolveChannelLabel(msg.channel, msg.senderName, msg.senderId));
         addMessage(msg);
@@ -234,7 +288,8 @@ function sendMessage(channelId, content, opts) {
     senderId: _publicKeyB64.value,
     senderName: userName?.value ?? _userName.value,
     content: trimmed,
-    createdAt: Date.now()
+    createdAt: Date.now(),
+    ...opts?.replyTo ? { replyTo: opts.replyTo } : {}
   });
   provider.value.sendStateless(JSON.stringify({
     type: "messages:send",
@@ -284,7 +339,9 @@ async function _attachPeriodProvider(channel, rootProv, periodId) {
           senderId: f.senderId,
           senderName: "",
           content,
-          createdAt: f.createdAt
+          createdAt: f.createdAt,
+          // Best-effort: the SDK's folded record may carry reply linkage.
+          ...f.reply_to || f.replyTo ? { replyTo: f.reply_to ?? f.replyTo } : {}
         });
       }
     };
@@ -360,11 +417,15 @@ function setActiveChannel(channelId) {
   }
 }
 const totalUnreadCount = computed(
-  () => Object.values(channels.value).reduce((sum, ch) => sum + ch.unreadCount, 0)
+  () => Object.values(channels.value).reduce(
+    (sum, ch) => sum + (mutedChannels.value.has(ch.id) ? 0 : ch.unreadCount),
+    0
+  )
 );
 export function useChat() {
   return {
     channels,
+    channelList,
     activeChannel,
     messagesByChannel,
     typingByChannel,
@@ -373,7 +434,17 @@ export function useChat() {
     fetchHistory,
     sendTyping,
     setActiveChannel,
-    buildDmChannelId
+    buildDmChannelId,
+    // Channel preferences
+    mutedChannels,
+    pinnedChannels,
+    hiddenChannels,
+    setMuted,
+    setPinned,
+    setHidden,
+    isMuted,
+    isPinned,
+    isHidden
   };
 }
 export function useChatChannel(channelId) {
@@ -392,8 +463,8 @@ export function useChatChannel(channelId) {
       stop();
     });
   }
-  function send(content) {
-    sendMessage(key, content);
+  function send(content, opts) {
+    sendMessage(key, content, opts);
   }
   function loadHistory(opts) {
     fetchHistory(key, opts);

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

@@ -6,7 +6,7 @@
  * Caps depth at `maxDepth` (default 8) to handle malformed cycles
  * defensively. The last item is the current doc and has no `to`.
  */
-import { type ComputedRef, type MaybeRef } from 'vue';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
 export interface DocBreadcrumbItem {
     id: string;
     label: string;
@@ -14,8 +14,23 @@ export interface DocBreadcrumbItem {
     /** Navigation target — undefined for the current doc */
     to?: string;
 }
-export declare function useDocBreadcrumb(docId: MaybeRef<string | null | undefined>, options?: {
+/**
+ * The trail split for single-line rendering: when the full trail is longer
+ * than `maxVisible`, the middle collapses into `hidden` (shown behind a "…"
+ * overflow menu), keeping the first crumb (`head`) and the last
+ * `maxVisible - 2` crumbs (`tail`). `overflowed` is false when no collapse is
+ * needed — then `head` holds the whole trail and `hidden`/`tail` are empty.
+ */
+export interface DocBreadcrumbCollapsed {
+    head: DocBreadcrumbItem[];
+    hidden: DocBreadcrumbItem[];
+    tail: DocBreadcrumbItem[];
+    overflowed: boolean;
+}
+export declare function useDocBreadcrumb(docId: MaybeRefOrGetter<string | null | undefined>, options?: {
     maxDepth?: number;
+    maxVisible?: number;
 }): {
     items: ComputedRef<DocBreadcrumbItem[]>;
+    collapsed: ComputedRef<DocBreadcrumbCollapsed>;
 };

package/dist/runtime/composables/useDocBreadcrumb.js

@@ -1,14 +1,15 @@
-import { computed, unref } from "vue";
+import { computed, toValue } from "vue";
 import { resolveDocType } from "../utils/docTypes.js";
 import { useRuntimeConfig } from "#imports";
 import { useDocTree } from "./useDocTree.js";
 export function useDocBreadcrumb(docId, options = {}) {
   const maxDepth = options.maxDepth ?? 8;
+  const maxVisible = options.maxVisible ?? 0;
   const config = useRuntimeConfig();
   const docBasePath = config.public?.abracadabra?.docBasePath ?? "/doc";
   const tree = useDocTree();
   const items = computed(() => {
-    const startId = unref(docId);
+    const startId = toValue(docId);
     if (!startId) return [];
     const trail = [];
     let id = startId;
@@ -29,5 +30,18 @@ export function useDocBreadcrumb(docId, options = {}) {
     }
     return trail;
   });
-  return { items };
+  const collapsed = computed(() => {
+    const all = items.value;
+    if (maxVisible <= 0 || all.length <= maxVisible) {
+      return { head: all, hidden: [], tail: [], overflowed: false };
+    }
+    const tailCount = Math.max(1, maxVisible - 2);
+    return {
+      head: all.slice(0, 1),
+      hidden: all.slice(1, all.length - tailCount),
+      tail: all.slice(all.length - tailCount),
+      overflowed: true
+    };
+  });
+  return { items, collapsed };
 }

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

@@ -19,7 +19,7 @@
  *   onMounted(() => snaps.fetchList())
  */
 import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
-import type { SnapshotMeta } from '@abraca/dabra';
+import type { SnapshotData, SnapshotMeta } from '@abraca/dabra';
 import type { AbracadabraLocale } from '../locale.js';
 export type DocSnapshotsCtx = ReturnType<typeof useDocSnapshots>;
 export declare const DOC_SNAPSHOTS_KEY: InjectionKey<DocSnapshotsCtx>;
@@ -72,6 +72,7 @@ export declare function useDocSnapshots(docId: Ref<string> | ComputedRef<string>
     pending: Ref<Record<number, "delete" | "restore" | "fork" | undefined>, Record<number, "delete" | "restore" | "fork" | undefined>>;
     fetchList: () => Promise<void>;
     loadMore: () => Promise<void>;
+    getSnapshot: (version: number) => Promise<SnapshotData | null>;
     create: (label?: string) => Promise<void>;
     remove: (version: number) => Promise<void>;
     restore: (version: number) => Promise<void>;

package/dist/runtime/composables/useDocSnapshots.js

@@ -120,6 +120,10 @@ export function useDocSnapshots(docId, overrides) {
       loading.value = false;
     }
   }
+  async function getSnapshot(version) {
+    if (!client.value || !docId.value) return null;
+    return client.value.getSnapshot(docId.value, version, { include: "files" });
+  }
   async function create(label) {
     if (!client.value || !docId.value) return;
     creating.value = true;
@@ -226,6 +230,7 @@ export function useDocSnapshots(docId, overrides) {
     // Actions
     fetchList,
     loadMore,
+    getSnapshot,
     create,
     remove,
     restore,

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

@@ -15,7 +15,7 @@
  * Ported from cou-sh/app/composables/useEditorCollaboration.ts.
  */
 import { type Ref, type ShallowRef } from 'vue';
-import type { Extensions } from '@tiptap/core';
+import { type Extensions } from '@tiptap/core';
 import type { CollaborationUser } from '../types.js';
 export { type CollaborationUser } from '../types.js';
 export interface UseEditorOptions {

package/dist/runtime/composables/useEditor.js

@@ -1,4 +1,5 @@
 import { ref, shallowRef, watch, onUnmounted } from "vue";
+import { Extension } from "@tiptap/core";
 import { XmlElement } from "yjs";
 import { useNuxtApp } from "#imports";
 export function useEditor(options) {
@@ -7,10 +8,21 @@ export function useEditor(options) {
   const connectedUsers = ref([]);
   const extensions = shallowRef([]);
   const ready = ref(false);
+  const activeColors = ref(/* @__PURE__ */ new Set());
+  const colorTimeouts = /* @__PURE__ */ new Map();
+  const CARET_ACTIVITY_TIMEOUT = 3e3;
   let cleanup = null;
+  let cursorBroadcastTimer = null;
   watch(childProvider, async (prov) => {
     cleanup?.();
     cleanup = null;
+    if (cursorBroadcastTimer) {
+      clearTimeout(cursorBroadcastTimer);
+      cursorBroadcastTimer = null;
+    }
+    colorTimeouts.forEach((t) => clearTimeout(t));
+    colorTimeouts.clear();
+    activeColors.value = /* @__PURE__ */ new Set();
     if (!prov) {
       ready.value = false;
       extensions.value = [];
@@ -34,6 +46,23 @@ export function useEditor(options) {
       CollaborationCaret.configure({
         provider: prov,
         user,
+        // Custom caret element: a thin coloured bar with a floating name label.
+        // Visibility is activity-gated — the `.is-active` class (added here when
+        // the author is in activeColors, and toggled live by the watcher below)
+        // is what makes the caret visible (editor.css defaults it to opacity:0).
+        render: (u) => {
+          const cursor = document.createElement("span");
+          cursor.classList.add("collaboration-carets__caret");
+          cursor.setAttribute("style", `border-color: ${u.color}`);
+          cursor.dataset.userColor = u.color;
+          const label = document.createElement("div");
+          label.classList.add("collaboration-carets__label");
+          label.setAttribute("style", `background-color: ${u.color}`);
+          label.insertBefore(document.createTextNode(u.name), null);
+          cursor.insertBefore(label, null);
+          if (activeColors.value.has(u.color)) cursor.classList.add("is-active");
+          return cursor;
+        },
         selectionRender: (u) => {
           const color = u.color || "#999";
           const selectionColor = color.startsWith("hsl") ? color.replace("hsl", "hsla").replace(")", ", 0.4)") : `${color}66`;
@@ -43,6 +72,20 @@ export function useEditor(options) {
           };
         }
       }),
+      // Broadcast the local cursor position to child awareness (throttled,
+      // 150ms trailing) so presence/follow consumers can track the caret
+      // without coupling to the CollaborationCaret extension internals.
+      Extension.create({
+        name: "cursor-position-broadcast",
+        onSelectionUpdate() {
+          const { from, to } = this.editor.state.selection;
+          if (cursorBroadcastTimer) clearTimeout(cursorBroadcastTimer);
+          cursorBroadcastTimer = setTimeout(() => {
+            cursorBroadcastTimer = null;
+            prov.awareness?.setLocalStateField("cursorPos", { from, to });
+          }, 150);
+        }
+      }),
       ...extraExtensions
     ];
     const ydoc = prov.document;
@@ -92,6 +135,13 @@ export function useEditor(options) {
       dedupeDocumentMeta();
       ensureDocumentMeta();
     }
+    const onProviderSynced = () => {
+      dedupeHeaders();
+      dedupeDocumentMeta();
+      ensureDocumentMeta();
+    };
+    prov.on?.("synced", onProviderSynced);
+    if (prov.isSynced) Promise.resolve().then(onProviderSynced);
     ready.value = true;
     const updateUsers = () => {
       const states = prov.awareness?.getStates() ?? /* @__PURE__ */ new Map();
@@ -104,14 +154,84 @@ export function useEditor(options) {
       });
       connectedUsers.value = users;
     };
+    const markActive = (color) => {
+      activeColors.value.add(color);
+      activeColors.value = new Set(activeColors.value);
+      if (colorTimeouts.has(color)) clearTimeout(colorTimeouts.get(color));
+      colorTimeouts.set(color, setTimeout(() => {
+        activeColors.value.delete(color);
+        activeColors.value = new Set(activeColors.value);
+        colorTimeouts.delete(color);
+      }, CARET_ACTIVITY_TIMEOUT));
+    };
+    const onDocUpdate = (_update, _origin, _doc, transaction) => {
+      const beforeState = transaction.beforeState;
+      const afterState = transaction.afterState;
+      if (!beforeState || !afterState) return;
+      const localClientId = ydoc.clientID;
+      const states = prov.awareness?.getStates() ?? /* @__PURE__ */ new Map();
+      for (const [clientId, clock] of afterState) {
+        if (clientId === localClientId) continue;
+        const beforeClock = beforeState.get(clientId) ?? 0;
+        if (clock > beforeClock) {
+          const state = states.get(clientId);
+          const color = state?.user?.color;
+          if (color) markActive(color);
+        }
+      }
+    };
+    ydoc?.on?.("update", onDocUpdate);
     prov.awareness?.on("change", updateUsers);
     updateUsers();
+    const fadeOutTimeouts = /* @__PURE__ */ new Map();
+    let caretSyncTimer = null;
+    const stopActiveWatch = watch(activeColors, (colors) => {
+      if (caretSyncTimer) clearTimeout(caretSyncTimer);
+      caretSyncTimer = setTimeout(() => {
+        caretSyncTimer = null;
+        const carets = document.querySelectorAll(".collaboration-carets__caret[data-user-color]");
+        carets.forEach((el) => {
+          const color = el.dataset.userColor;
+          if (!color) return;
+          if (colors.has(color)) {
+            if (fadeOutTimeouts.has(color)) {
+              clearTimeout(fadeOutTimeouts.get(color));
+              fadeOutTimeouts.delete(color);
+            }
+            el.classList.remove("is-hidden");
+            requestAnimationFrame(() => el.classList.add("is-active"));
+          } else {
+            el.classList.remove("is-active");
+            if (!fadeOutTimeouts.has(color)) {
+              fadeOutTimeouts.set(color, setTimeout(() => {
+                el.classList.add("is-hidden");
+                fadeOutTimeouts.delete(color);
+              }, 300));
+            }
+          }
+        });
+      }, 100);
+    });
     cleanup = () => {
+      ydoc?.off?.("update", onDocUpdate);
+      prov.off?.("synced", onProviderSynced);
       prov.awareness?.off("change", updateUsers);
+      stopActiveWatch();
+      if (caretSyncTimer) {
+        clearTimeout(caretSyncTimer);
+        caretSyncTimer = null;
+      }
+      fadeOutTimeouts.forEach((t) => clearTimeout(t));
+      fadeOutTimeouts.clear();
       if (fragment) {
         fragment.unobserve(dedupeHeaders);
         fragment.unobserve(dedupeDocumentMeta);
       }
+      if (cursorBroadcastTimer) {
+        clearTimeout(cursorBroadcastTimer);
+        cursorBroadcastTimer = null;
+      }
+      prov.awareness?.setLocalStateField("cursorPos", null);
     };
   }, { immediate: true });
   onUnmounted(() => cleanup?.());

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

@@ -1,12 +1,18 @@
 /**
  * useEditorToolbar
  *
- * Returns pre-built toolbar item groups for UEditorToolbar,
- * merging the plugin registry's contributions with standard formatting items.
+ * Returns pre-built toolbar item groups for UEditorToolbar, merging the plugin
+ * registry's contributions with standard formatting items.
+ *
+ * Three building blocks, all individually usable:
+ *   - `items`        full toolbar incl. undo/redo — for a docked/main toolbar.
+ *   - `bubbleItems`  selection bubble — same formatting groups WITHOUT undo/redo
+ *                    (undo/redo belongs in the panel header, not a text bubble).
+ *   - `getTableToolbarItems(editor)` table-context actions (row/column/table ops).
  *
  * Usage:
- *   const { items } = useEditorToolbar()
- *   <UEditorToolbar :editor="editor" :items="items" />
+ *   const { bubbleItems } = useEditorToolbar({ editor, docId })
+ *   <UEditorToolbar :editor="editor" :items="bubbleItems" layout="bubble" />
  */
 import type { Editor } from '@tiptap/vue-3';
 export interface UseEditorToolbarOptions {
@@ -19,4 +25,6 @@ export interface UseEditorToolbarOptions {
 }
 export declare function useEditorToolbar(options?: UseEditorToolbarOptions): {
     items: import("vue").ComputedRef<any[][]>;
+    bubbleItems: import("vue").ComputedRef<any[][]>;
+    getTableToolbarItems: (editor: Editor) => any[][];
 };