@abraca/nuxt 1.9.1 → 2.0.1

package/dist/runtime/composables/useDocSnapshots.js

@@ -0,0 +1,234 @@
+import { computed, ref } from "vue";
+import { useToast, useRouter } from "#imports";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { useAbraLocale } from "./useAbraLocale.js";
+export const DOC_SNAPSHOTS_KEY = Symbol("doc-snapshots");
+export function triggerBadgeColor(trigger) {
+  switch (trigger) {
+    case "manual":
+      return "primary";
+    case "unload":
+    case "shutdown":
+      return "warning";
+    default:
+      return "neutral";
+  }
+}
+export function triggerLabelKey(trigger) {
+  switch (trigger) {
+    case "manual":
+      return "docPanel.snapshots.triggerManual";
+    case "auto":
+      return "docPanel.snapshots.triggerAuto";
+    case "unload":
+      return "docPanel.snapshots.triggerUnload";
+    case "shutdown":
+      return "docPanel.snapshots.triggerShutdown";
+    default:
+      return "";
+  }
+}
+const PAGE_SIZE = 20;
+const CLUSTER_WINDOW_S = 30 * 60;
+function errMessage(e) {
+  return e instanceof Error ? e.message : String(e);
+}
+function applyTemplate(tmpl, vars) {
+  return tmpl.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? ""));
+}
+export function useDocSnapshots(docId, overrides) {
+  const { client } = useAbracadabra();
+  const locale = useAbraLocale("snapshots", overrides);
+  const toast = useToast();
+  const router = useRouter();
+  const snapshots = ref([]);
+  const loading = ref(false);
+  const error = ref(null);
+  const hasMore = ref(false);
+  const creating = ref(false);
+  const pending = ref({});
+  const displayItems = computed(() => {
+    const result = [];
+    const arr = snapshots.value;
+    let i = 0;
+    while (i < arr.length) {
+      const cur = arr[i];
+      if (cur.trigger !== "auto") {
+        result.push({ kind: "snap", snap: cur });
+        i++;
+        continue;
+      }
+      const cluster = [cur];
+      let j = i + 1;
+      while (j < arr.length) {
+        const nxt = arr[j];
+        if (nxt.trigger !== "auto") break;
+        if ((nxt.created_by ?? null) !== (cur.created_by ?? null)) break;
+        const last = cluster[cluster.length - 1];
+        if (Math.abs(last.created_at - nxt.created_at) > CLUSTER_WINDOW_S) break;
+        cluster.push(nxt);
+        j++;
+      }
+      if (cluster.length === 1) {
+        result.push({ kind: "snap", snap: cur });
+      } else {
+        const ts = cluster.map((c) => c.created_at);
+        result.push({
+          kind: "cluster",
+          items: cluster,
+          firstAt: Math.min(...ts),
+          lastAt: Math.max(...ts),
+          createdBy: cur.created_by ?? null
+        });
+      }
+      i = j;
+    }
+    return result;
+  });
+  async function fetchList() {
+    if (!docId.value) return;
+    if (!client.value) {
+      snapshots.value = [];
+      return;
+    }
+    loading.value = true;
+    error.value = null;
+    try {
+      const res = await client.value.listSnapshots(docId.value, { limit: PAGE_SIZE + 1 });
+      hasMore.value = res.length > PAGE_SIZE;
+      snapshots.value = res.slice(0, PAGE_SIZE);
+    } catch (e) {
+      error.value = errMessage(e);
+      snapshots.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function loadMore() {
+    if (!client.value || !docId.value || !hasMore.value || loading.value) return;
+    loading.value = true;
+    try {
+      const res = await client.value.listSnapshots(docId.value, {
+        limit: PAGE_SIZE + 1,
+        offset: snapshots.value.length
+      });
+      hasMore.value = res.length > PAGE_SIZE;
+      snapshots.value = [...snapshots.value, ...res.slice(0, PAGE_SIZE)];
+    } catch (e) {
+      toast.add({ title: locale.failed, description: errMessage(e), color: "error" });
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function create(label) {
+    if (!client.value || !docId.value) return;
+    creating.value = true;
+    try {
+      const res = await client.value.createSnapshot(docId.value, label ? { label } : void 0);
+      toast.add({
+        title: locale.createdTitle,
+        description: applyTemplate(locale.createdDesc, { version: res.version }),
+        color: "success"
+      });
+      await fetchList();
+    } catch (e) {
+      toast.add({
+        title: locale.createFailed,
+        description: errMessage(e),
+        color: "error"
+      });
+    } finally {
+      creating.value = false;
+    }
+  }
+  async function remove(version) {
+    if (!client.value || !docId.value) return;
+    pending.value[version] = "delete";
+    try {
+      await client.value.deleteSnapshot(docId.value, version);
+      toast.add({
+        title: locale.deletedTitle,
+        description: applyTemplate(locale.deletedDesc, { version }),
+        color: "success"
+      });
+      await fetchList();
+    } catch (e) {
+      toast.add({
+        title: locale.deleteFailed,
+        description: errMessage(e),
+        color: "error"
+      });
+    } finally {
+      pending.value[version] = void 0;
+    }
+  }
+  async function restore(version) {
+    if (!client.value || !docId.value) return;
+    pending.value[version] = "restore";
+    try {
+      const res = await client.value.restoreSnapshot(docId.value, version);
+      toast.add({
+        title: locale.restoredTitle,
+        description: applyTemplate(locale.restoredDesc, {
+          version: res.restored_from,
+          bytes: res.diff_bytes
+        }),
+        color: "success"
+      });
+    } catch (e) {
+      toast.add({
+        title: locale.restoreFailed,
+        description: errMessage(e),
+        color: "error"
+      });
+    } finally {
+      pending.value[version] = void 0;
+    }
+  }
+  async function fork(version) {
+    if (!client.value || !docId.value) return;
+    pending.value[version] = "fork";
+    try {
+      const res = await client.value.forkSnapshot(docId.value, version);
+      toast.add({
+        title: locale.forkedTitle,
+        description: applyTemplate(locale.forkedDesc, { version }),
+        color: "success",
+        actions: [{
+          label: locale.openFork,
+          color: "neutral",
+          variant: "outline",
+          onClick: (e) => {
+            e?.stopPropagation();
+            router.push(`/doc/${res.doc_id}`);
+          }
+        }]
+      });
+    } catch (e) {
+      toast.add({
+        title: locale.forkFailed,
+        description: errMessage(e),
+        color: "error"
+      });
+    } finally {
+      pending.value[version] = void 0;
+    }
+  }
+  return {
+    // State
+    snapshots,
+    displayItems,
+    loading,
+    error,
+    hasMore,
+    creating,
+    pending,
+    // Actions
+    fetchList,
+    loadMore,
+    create,
+    remove,
+    restore,
+    fork
+  };
+}

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

@@ -9,6 +9,13 @@ export declare function useEditorDragHandle(pageConfig?: {
     }>;
     onChangePageType?: (typeKey: string) => void;
     onInsertDocLink?: () => void;
+    /**
+     * Optional callback for "Create child document" — apps that own a doc-tree
+     * implement this to spawn a new child under the current node and (usually)
+     * link to it from the editor. Called with no args; the consumer reads the
+     * editor's current selection from its own state.
+     */
+    onCreateChildDoc?: () => void;
 }): {
     selectedNode: import("vue").Ref<{
         node: JSONContent | null;

package/dist/runtime/composables/useEditorDragHandle.js

@@ -29,6 +29,9 @@ export function useEditorDragHandle(pageConfig) {
             { label: "Heading 1", icon: "i-lucide-heading-1", onSelect: () => editor.chain().focus().toggleHeading({ level: 1 }).run() },
             { label: "Heading 2", icon: "i-lucide-heading-2", onSelect: () => editor.chain().focus().toggleHeading({ level: 2 }).run() },
             { label: "Heading 3", icon: "i-lucide-heading-3", onSelect: () => editor.chain().focus().toggleHeading({ level: 3 }).run() },
+            { label: "Heading 4", icon: "i-lucide-heading-4", onSelect: () => editor.chain().focus().toggleHeading({ level: 4 }).run() },
+            { label: "Heading 5", icon: "i-lucide-heading-5", onSelect: () => editor.chain().focus().toggleHeading({ level: 5 }).run() },
+            { label: "Heading 6", icon: "i-lucide-heading-6", onSelect: () => editor.chain().focus().toggleHeading({ level: 6 }).run() },
             { label: "Bullet List", icon: "i-lucide-list", onSelect: () => editor.chain().focus().toggleBulletList().run() },
             { label: "Ordered List", icon: "i-lucide-list-ordered", onSelect: () => editor.chain().focus().toggleOrderedList().run() },
             { label: "Task List", icon: "i-lucide-list-check", onSelect: () => editor.chain().focus().toggleTaskList().run() },
@@ -131,7 +134,22 @@ export function useEditorDragHandle(pageConfig) {
           label: "Insert doc link",
           icon: "i-lucide-file-symlink",
           onSelect: () => pageConfig.onInsertDocLink()
-        }] : []
+        }] : [],
+        ...pageConfig?.onCreateChildDoc ? [{
+          label: "Create child document",
+          icon: "i-lucide-file-plus",
+          onSelect: () => pageConfig.onCreateChildDoc()
+        }] : [],
+        {
+          label: "Reset formatting",
+          icon: "i-lucide-eraser",
+          onSelect: () => {
+            if (pos === void 0) return;
+            const node = editor.state.doc.nodeAt(pos);
+            if (!node) return;
+            editor.chain().focus().setTextSelection({ from: pos, to: pos + node.nodeSize }).clearNodes().unsetAllMarks().run();
+          }
+        }
       ],
       [
         {

package/dist/runtime/composables/useEditorSuggestions.js

@@ -1,8 +1,17 @@
 import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
 import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions.js";
 import { usePluginRegistry } from "./usePluginRegistry.js";
 export function useEditorSuggestions(options = {}) {
   const registry = usePluginRegistry();
+  const disabledBuiltins = computed(() => {
+    try {
+      return useRuntimeConfig().public?.abracadabra?.disabledBuiltins ?? [];
+    } catch {
+      return [];
+    }
+  });
+  const extEnabled = (name) => !disabledBuiltins.value.includes(name);
   const items = computed(() => {
     const ctx = { docId: options.docId ?? "" };
     const base = options.onlyPlugins ? [] : [
@@ -47,7 +56,24 @@ export function useEditorSuggestions(options = {}) {
         { kind: "codeGroup", label: "Code Group", icon: "i-lucide-folder-code", description: "Tabbed code blocks", keywords: ["code", "multi", "language"] },
         { kind: "codePreview", label: "Code Preview", icon: "i-lucide-eye", description: "Live code with preview", keywords: ["demo", "preview", "live"] },
         { kind: "codeTree", label: "Code Tree", icon: "i-lucide-folder-tree", description: "File tree visualization", keywords: ["files", "directory", "structure"] },
-        { kind: "fieldGroup", label: "Field Group", icon: "i-lucide-rows-3", description: "Group of form fields", keywords: ["form", "fields", "properties", "meta"] }
+        { kind: "fieldGroup", label: "Field Group", icon: "i-lucide-rows-3", description: "Group of form fields", keywords: ["form", "fields", "properties", "meta"] },
+        // Optional built-ins — filtered out when listed in disabledBuiltins.
+        ...extEnabled("divider") ? [{ kind: "divider", label: "Labelled Divider", icon: "i-lucide-separator-horizontal", description: "Section divider with optional label", keywords: ["line", "separator", "section"] }] : [],
+        ...extEnabled("quote") ? [{ kind: "quote", label: "Quote", icon: "i-lucide-quote", description: "Quoted text with author and avatar", keywords: ["blockquote", "citation", "testimonial"] }] : [],
+        ...extEnabled("figure") ? [{ kind: "figure", label: "Figure", icon: "i-lucide-image", description: "Image with caption", keywords: ["image", "picture", "photo", "caption"] }] : [],
+        ...extEnabled("embed") ? [{ kind: "embed", label: "Embed", icon: "i-lucide-code-xml", description: "iframe embed (CodePen, Figma, \u2026)", keywords: ["iframe", "codepen", "figma", "tweet"] }] : [],
+        ...extEnabled("video") ? [{ kind: "video", label: "Video", icon: "i-lucide-play-circle", description: "YouTube, Vimeo, or self-hosted video", keywords: ["youtube", "vimeo", "mp4", "movie"] }] : [],
+        ...extEnabled("stat") ? [{ kind: "stat", label: "Stat", icon: "i-lucide-chart-no-axes-column", description: "KPI display with label, value, and trend", keywords: ["metric", "kpi", "number", "dashboard"] }] : [],
+        ...extEnabled("statGroup") ? [{ kind: "statGroup", label: "Stat Group", icon: "i-lucide-grid-2x2", description: "Grid of three KPI stats", keywords: ["metrics", "kpi", "dashboard"] }] : [],
+        ...extEnabled("button") ? [{ kind: "button", label: "Button", icon: "i-lucide-mouse-pointer-click", description: "Call-to-action button with link", keywords: ["cta", "link", "action"] }] : [],
+        ...extEnabled("buttonGroup") ? [{ kind: "buttonGroup", label: "Button Group", icon: "i-lucide-square-mouse-pointer", description: "Two paired buttons", keywords: ["cta", "actions", "paired"] }] : [],
+        ...extEnabled("progress") ? [{ kind: "progress", label: "Progress Bar", icon: "i-lucide-bar-chart-horizontal", description: "Labeled progress bar", keywords: ["bar", "completion", "percent"] }] : [],
+        ...extEnabled("spoiler") ? [{ kind: "spoiler", label: "Spoiler", icon: "i-lucide-eye-off", description: "Hide-and-reveal block", keywords: ["hide", "collapse", "spoiler"] }] : [],
+        ...extEnabled("colorSwatch") ? [{ kind: "colorSwatch", label: "Color Swatch", icon: "i-lucide-palette", description: "Inline color chip with picker", keywords: ["color", "swatch", "token", "palette"] }] : [],
+        ...extEnabled("mathBlock") ? [{ kind: "mathBlock", label: "Math (block)", icon: "i-lucide-square-sigma", description: "Display-mode LaTeX equation", keywords: ["katex", "latex", "equation", "formula", "math"] }] : [],
+        ...extEnabled("mathInline") ? [{ kind: "mathInline", label: "Math (inline)", icon: "i-lucide-sigma", description: "Inline LaTeX expression", keywords: ["katex", "latex", "inline math"] }] : [],
+        ...extEnabled("diff") ? [{ kind: "diff", label: "Diff", icon: "i-lucide-git-compare", description: "Side-by-side text diff", keywords: ["compare", "changes", "git"] }] : [],
+        ...extEnabled("svgEmbed") ? [{ kind: "svgEmbed", label: "SVG embed", icon: "i-lucide-image", description: "Inline SVG (sanitized)", keywords: ["svg", "vector", "icon", "diagram"] }] : []
       ]
     ];
     try {

package/dist/runtime/composables/useEditorToolbar.js

@@ -43,7 +43,15 @@ export function useEditorToolbar(options = {}) {
       { kind: "mark", mark: "strike", icon: "i-lucide-strikethrough", tooltip: { text: "Strikethrough" } },
       { kind: "mark", mark: "code", icon: "i-lucide-code", tooltip: { text: "Inline code" } }
     ], [
-      { kind: "mark", mark: "link", icon: "i-lucide-link", tooltip: { text: "Link" } }
+      // Slot-based items — UEditorToolbar renders whatever the consumer
+      // supplies via <template #link>, <template #doc-link>, etc. AEditor
+      // provides defaults for `link` and `doc-link` (the popover primitives);
+      // `create-child-doc` and `send-to-chat` render nothing unless the
+      // consuming app fills the slot.
+      { slot: "link" },
+      { slot: "doc-link" },
+      { slot: "create-child-doc" },
+      { slot: "send-to-chat" }
     ]];
     try {
       const pluginGroups = registry.getAllToolbarItems(ctx);

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

@@ -0,0 +1,33 @@
+/**
+ * useEmailVerification
+ *
+ * Wraps the email-verification half of the auth lifecycle.
+ * - `request()` triggers a verification email (rate-limited 1/min, 10/day).
+ * - `confirm(token)` consumes the token from the email link; no auth needed.
+ *
+ * `verified` mirrors the most recent local result of `confirm()` — the
+ * server doesn't currently expose `email_verified_at` on `getMe()`, so
+ * the canonical signal is "did `confirm()` succeed in this session".
+ *
+ * Usage:
+ *   const { verified, isRequesting, isConfirming, error, request, confirm } = useEmailVerification()
+ */
+declare function request(): Promise<void>;
+declare function confirm(token: string): Promise<void>;
+export declare function useEmailVerification(): {
+    /** True after a successful `confirm()` in the current session. */
+    verified: import("vue").Ref<boolean, boolean>;
+    /** Whether a `request()` is in flight. */
+    isRequesting: import("vue").Ref<boolean, boolean>;
+    /** Whether a `confirm()` is in flight. */
+    isConfirming: import("vue").Ref<boolean, boolean>;
+    /** Last error message, or null. */
+    error: import("vue").Ref<string | null, string | null>;
+    /** Epoch ms of the last successful `request()`, or null. */
+    lastSentAt: import("vue").Ref<number | null, number | null>;
+    /** Send a verification email to the current user. Requires auth. */
+    request: typeof request;
+    /** Confirm a verification token from the email link. No auth required. */
+    confirm: typeof confirm;
+};
+export {};

package/dist/runtime/composables/useEmailVerification.js

@@ -0,0 +1,58 @@
+import { ref } from "vue";
+import { useAbracadabra } from "#imports";
+const verified = ref(false);
+const isRequesting = ref(false);
+const isConfirming = ref(false);
+const error = ref(null);
+const lastSentAt = ref(null);
+async function request() {
+  const abra = useAbracadabra();
+  const client = abra.client.value;
+  if (!client) throw new Error("Not connected");
+  isRequesting.value = true;
+  error.value = null;
+  try {
+    await client.requestEmailVerification();
+    lastSentAt.value = Date.now();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to send verification email";
+    throw e;
+  } finally {
+    isRequesting.value = false;
+  }
+}
+async function confirm(token) {
+  const abra = useAbracadabra();
+  const client = abra.client.value;
+  if (!client) throw new Error("Not connected");
+  isConfirming.value = true;
+  error.value = null;
+  try {
+    await client.confirmEmailVerification(token);
+    verified.value = true;
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Verification failed";
+    verified.value = false;
+    throw e;
+  } finally {
+    isConfirming.value = false;
+  }
+}
+export function useEmailVerification() {
+  return {
+    /** True after a successful `confirm()` in the current session. */
+    verified,
+    /** Whether a `request()` is in flight. */
+    isRequesting,
+    /** Whether a `confirm()` is in flight. */
+    isConfirming,
+    /** Last error message, or null. */
+    error,
+    /** Epoch ms of the last successful `request()`, or null. */
+    lastSentAt,
+    /** Send a verification email to the current user. Requires auth. */
+    request,
+    /** Confirm a verification token from the email link. No auth required. */
+    confirm
+  };
+}

package/dist/runtime/composables/useIdentityDoc.js

@@ -71,9 +71,7 @@ function _migrateFromLocalStorage(provider) {
           const { Y: YModule } = provider;
           const entry = new YModule.Map();
           entry.set("label", server.label);
-          if (server.hubDocId) entry.set("hubDocId", server.hubDocId);
           if (server.entryDocId) entry.set("entryDocId", server.entryDocId);
-          if (server.spacesEnabled) entry.set("spacesEnabled", server.spacesEnabled);
           entry.set("addedAt", Date.now());
           serversMap.set(server.url, entry);
         }
@@ -96,7 +94,6 @@ function _migrateFromLocalStorage(provider) {
           yMap.set("docId", space.docId);
           if (space.remoteSpaceId) yMap.set("remoteSpaceId", space.remoteSpaceId);
           yMap.set("visibility", space.visibility);
-          yMap.set("isHub", space.isHub);
           yMap.set("order", space.order);
           if (space.lastSyncedAt) yMap.set("lastSyncedAt", space.lastSyncedAt);
           yMap.set("createdAt", space.createdAt);

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

@@ -0,0 +1,47 @@
+import { type Ref, type MaybeRefOrGetter } from 'vue';
+export interface PresenceUser {
+    name: string;
+    color: string;
+    publicKey?: string;
+    clientId: number;
+}
+/**
+ * Renderer-facing helper for "who is currently viewing this item" indicators.
+ *
+ * Derives a `docId → users` map from awareness states (both `state.docId`
+ * for full-page navigation and `state.viewingDocId` for slideover-opened
+ * docs), so a user with a side panel open shows up on both the parent doc
+ * and the panel doc.
+ *
+ * Renderers iterate their items and call `getViewers(item.id)` to render
+ * avatars and a viewing-style accent. Hover-style accents remain
+ * renderer-local; viewing is always sourced from this shared map so it
+ * stays consistent across renderers.
+ *
+ * Ported from cou-sh/app/composables/useItemPresence.ts. The cou-sh version
+ * aggregates across all connected `useSpaceConnections` providers; this
+ * single-space port reads from the active provider only. Multi-space
+ * aggregation is deferred until `useAggregatedPresence` /
+ * `useSpaceConnections` are ported (~1200 LOC, see _NEXT_ROUND_BLOCKERS.md).
+ */
+export declare function useItemPresence(): {
+    getViewers: (itemId: string | undefined | null) => PresenceUser[];
+    viewingColor: (itemId: string | undefined | null) => string | null;
+    viewingBorderLeft: (itemId: string | undefined | null) => {
+        borderLeft: string;
+    } | undefined;
+    viewingRingStyle: (itemId: string | undefined | null) => {
+        boxShadow: string;
+        outline: string;
+    } | undefined;
+    docPresence: import("vue").ComputedRef<Map<string, PresenceUser[]>>;
+};
+/**
+ * Broadcasts "this user has a slideover open on `nodeId`" to the active
+ * provider's awareness, where it lands on `state.viewingDocId`. This is the
+ * write-side counterpart to `useItemPresence().getViewers()`.
+ *
+ * Single-space port: writes only to the current provider's awareness. The
+ * cou-sh version routes by `spaceId` lookup across multi-space connections.
+ */
+export declare function useViewingBroadcast(parentDocIdRef: MaybeRefOrGetter<string>, openNodeId: Ref<string | null>): void;

package/dist/runtime/composables/useItemPresence.js

@@ -0,0 +1,73 @@
+import { computed, watch, unref, onBeforeUnmount } from "vue";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { useAwareness } from "./useAwareness.js";
+export function useItemPresence() {
+  const { publicKeyB64, provider } = useAbracadabra();
+  const { states } = useAwareness();
+  const docPresence = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    const addToBucket = (docId, user) => {
+      const users = map.get(docId) ?? [];
+      if (user.publicKey && users.some((u) => u.publicKey === user.publicKey)) return;
+      users.push(user);
+      map.set(docId, users);
+    };
+    const selfPk = publicKeyB64.value;
+    const selfClientId = provider.value?.awareness?.clientID ?? null;
+    for (const [clientId, state] of states.value) {
+      if (selfClientId !== null && clientId === selfClientId) continue;
+      const userInfo = state.user;
+      const pk = userInfo?.publicKey;
+      if (pk && pk === selfPk) continue;
+      const docId = state.docId;
+      const viewingDocId = state.viewingDocId;
+      if (!docId && !viewingDocId) continue;
+      const user = {
+        name: userInfo?.name || "?",
+        color: userInfo?.color || "#888",
+        publicKey: pk,
+        clientId
+      };
+      if (docId) addToBucket(docId, user);
+      if (viewingDocId && viewingDocId !== docId) addToBucket(viewingDocId, user);
+    }
+    return map;
+  });
+  function getViewers(itemId) {
+    if (!itemId) return [];
+    return docPresence.value.get(itemId) ?? [];
+  }
+  function viewingColor(itemId) {
+    return getViewers(itemId)[0]?.color ?? null;
+  }
+  function viewingBorderLeft(itemId) {
+    const color = viewingColor(itemId);
+    if (!color) return void 0;
+    return { borderLeft: `4px solid ${color}` };
+  }
+  function viewingRingStyle(itemId) {
+    const color = viewingColor(itemId);
+    if (!color) return void 0;
+    return {
+      outline: `3px solid ${color}`,
+      boxShadow: `0 0 0 1px ${color}33`
+    };
+  }
+  return { getViewers, viewingColor, viewingBorderLeft, viewingRingStyle, docPresence };
+}
+export function useViewingBroadcast(parentDocIdRef, openNodeId) {
+  const { provider } = useAbracadabra();
+  function writeViewing(nodeId) {
+    const parentDocId = typeof parentDocIdRef === "function" ? parentDocIdRef() : unref(parentDocIdRef);
+    if (!parentDocId) return;
+    const awareness = provider.value?.awareness;
+    if (!awareness) return;
+    try {
+      const prev = awareness.getLocalState() ?? {};
+      awareness.setLocalState({ ...prev, viewingDocId: nodeId });
+    } catch {
+    }
+  }
+  watch(openNodeId, (id) => writeViewing(id ?? null));
+  onBeforeUnmount(() => writeViewing(null));
+}

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

@@ -0,0 +1,24 @@
+export interface UseResizableWidthOptions {
+    /** Initial width in pixels. Default: 672. */
+    defaultWidth?: number;
+    /** Minimum width in pixels. Default: 320. */
+    minWidth?: number;
+    /** Max as a fraction of viewport width. Default: 0.9. */
+    maxFraction?: number;
+    /** Cookie key to persist the width. Omit to disable persistence. */
+    cookieKey?: string;
+    /** Which edge holds the handle. 'left' grows when dragged left. Default: 'left'. */
+    direction?: 'left' | 'right';
+}
+export declare function useResizableWidth(options?: UseResizableWidthOptions): {
+    width: import("vue").Ref<number, number>;
+    isResizing: import("vue").Ref<boolean, boolean>;
+    style: import("vue").ComputedRef<{
+        maxWidth: string;
+        width: string;
+    }>;
+    onMouseDown: (e: MouseEvent) => void;
+    onTouchStart: (e: TouchEvent) => void;
+    onDoubleClick: () => void;
+    reset: () => void;
+};