@abraca/nuxt 2.10.0 → 2.11.0

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

@@ -1,15 +1,87 @@
 <script setup>
+import { computed } from "vue";
 import { useDocBreadcrumb } from "../../composables/useDocBreadcrumb";
 const props = defineProps({
   docId: { type: null, required: true },
-  maxDepth: { type: Number, required: false, default: 8 }
+  maxDepth: { type: Number, required: false, default: 8 },
+  maxVisible: { type: Number, required: false, default: 0 }
 });
-const { items } = useDocBreadcrumb(() => props.docId, { maxDepth: props.maxDepth });
+const { items, collapsed } = useDocBreadcrumb(() => props.docId, {
+  maxDepth: props.maxDepth,
+  maxVisible: props.maxVisible
+});
+const overflowItems = computed(
+  () => collapsed.value.hidden.map((a) => ({ label: a.label, icon: a.icon, to: a.to }))
+);
 </script>
 
 <template>
+  <!-- Collapsed single-line variant (overflow menu for the hidden middle) -->
+  <nav
+    v-if="collapsed.overflowed"
+    aria-label="Breadcrumb"
+    class="flex items-center gap-0.5 min-w-0 text-(--ui-text-muted)"
+  >
+    <template
+      v-for="ancestor in collapsed.head"
+      :key="ancestor.id"
+    >
+      <ULink
+        :to="ancestor.to"
+        class="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text) transition-colors min-w-0"
+      >
+        <UIcon
+          :name="ancestor.icon"
+          class="size-3.5 shrink-0"
+        />
+        <span class="truncate max-w-[10ch]">{{ ancestor.label }}</span>
+      </ULink>
+      <UIcon
+        name="i-lucide-chevron-right"
+        class="size-3.5 shrink-0 opacity-60"
+      />
+    </template>
+
+    <UDropdownMenu :items="overflowItems">
+      <button
+        type="button"
+        class="flex items-center px-1 py-0.5 rounded text-xs hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text) transition-colors"
+        :aria-label="`Show ${collapsed.hidden.length} hidden`"
+      >
+        …
+      </button>
+    </UDropdownMenu>
+    <UIcon
+      name="i-lucide-chevron-right"
+      class="size-3.5 shrink-0 opacity-60"
+    />
+
+    <template
+      v-for="(ancestor, idx) in collapsed.tail"
+      :key="ancestor.id"
+    >
+      <ULink
+        :to="ancestor.to"
+        class="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text) transition-colors min-w-0"
+        :class="ancestor.to ? '' : 'pointer-events-none text-(--ui-text)'"
+      >
+        <UIcon
+          :name="ancestor.icon"
+          class="size-3.5 shrink-0"
+        />
+        <span class="truncate max-w-[10ch]">{{ ancestor.label }}</span>
+      </ULink>
+      <UIcon
+        v-if="idx < collapsed.tail.length - 1"
+        name="i-lucide-chevron-right"
+        class="size-3.5 shrink-0 opacity-60"
+      />
+    </template>
+  </nav>
+
+  <!-- Full-trail variant -->
   <UBreadcrumb
-    v-if="items.length > 0"
+    v-else-if="items.length > 0"
     :items="items"
     :ui="{ root: 'min-w-0', list: 'min-w-0 flex-nowrap', item: 'truncate', link: 'truncate' }"
   />

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

@@ -3,9 +3,15 @@ type __VLS_Props = {
     docId: string | null | undefined;
     /** Maximum ancestors to walk (default 8) */
     maxDepth?: number;
+    /**
+     * Collapse the middle into a "…" overflow menu once the trail exceeds this
+     * many crumbs. 0 (default) renders the full trail with no collapsing.
+     */
+    maxVisible?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     maxDepth: number;
+    maxVisible: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** Hub document id (informational — the panel reflects the active server). */
+    docId?: string;
+};
+declare var __VLS_96: "storage" | "users" | "members" | "invites", __VLS_97: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_96>]?: (props: typeof __VLS_97) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __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/shell/ADocPanelServerSettings.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { computed, onMounted, reactive, ref, useSlots, watch } from "vue";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+defineProps({
+  docId: { type: String, required: false }
+});
+const slots = useSlots();
+const { client, status, synced, effectiveRole, currentServerUrl, reconnect } = useAbracadabra();
+const ROLE_LEVELS = {
+  observer: 0,
+  viewer: 1,
+  editor: 2,
+  owner: 3,
+  admin: 4,
+  service: 5
+};
+const roleLevel = computed(() => ROLE_LEVELS[effectiveRole.value ?? ""] ?? 0);
+const canEdit = computed(() => roleLevel.value >= 2);
+const isAdmin = computed(() => roleLevel.value >= 4);
+const roleBadgeColor = computed(() => {
+  const r = effectiveRole.value;
+  if (r === "admin" || r === "service") return "warning";
+  if (r === "owner") return "primary";
+  if (r === "editor") return "success";
+  return "neutral";
+});
+const statusDotClass = computed(() => {
+  if (status.value === "connected") return "bg-(--ui-success)";
+  if (status.value === "connecting") return "bg-(--ui-warning)";
+  return "bg-(--ui-error)";
+});
+const serverInfo = ref(null);
+async function loadServerInfo() {
+  if (!client.value) return;
+  try {
+    serverInfo.value = await client.value.serverInfo();
+  } catch {
+  }
+}
+watch(client, loadServerInfo, { immediate: true });
+const healthData = ref(null);
+const healthLoading = ref(false);
+async function checkHealth() {
+  if (!client.value) return;
+  healthLoading.value = true;
+  try {
+    healthData.value = await client.value.health();
+  } catch {
+  } finally {
+    healthLoading.value = false;
+  }
+}
+const expanded = reactive({ members: false, users: false, invites: false, storage: false });
+const adminSections = computed(() => [
+  { key: "members", label: "Members", icon: "i-lucide-users", show: canEdit.value && !!slots.members },
+  { key: "users", label: "Users", icon: "i-lucide-shield-alert", show: isAdmin.value && !!slots.users },
+  { key: "invites", label: "Invites", icon: "i-lucide-ticket", show: isAdmin.value && !!slots.invites },
+  { key: "storage", label: "Storage", icon: "i-lucide-hard-drive", show: isAdmin.value && !!slots.storage }
+].filter((s) => s.show));
+onMounted(loadServerInfo);
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto px-4 py-3 space-y-3">
+    <!-- Connection — read-only URL (single-server) -->
+    <div class="rounded-lg bg-(--ui-bg-elevated) overflow-hidden">
+      <div class="flex items-center gap-1.5 px-3 py-2 border-b border-(--ui-border)">
+        <UIcon
+          name="i-lucide-plug"
+          class="size-3.5 text-(--ui-text-muted) shrink-0"
+        />
+        <span class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted)">Connection</span>
+      </div>
+      <div class="px-3 py-3 space-y-1.5">
+        <div class="flex items-center gap-2">
+          <UIcon
+            name="i-lucide-server"
+            class="size-3.5 text-(--ui-text-dimmed) shrink-0"
+          />
+          <span class="text-sm truncate flex-1 min-w-0 text-(--ui-text)">{{ currentServerUrl || "\u2014" }}</span>
+          <UButton
+            v-if="status !== 'connected'"
+            icon="i-lucide-refresh-cw"
+            size="xs"
+            variant="ghost"
+            color="primary"
+            @click="reconnect"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Status -->
+    <div class="rounded-lg bg-(--ui-bg-elevated) overflow-hidden">
+      <div class="flex items-center gap-1.5 px-3 py-2 border-b border-(--ui-border)">
+        <UIcon
+          name="i-lucide-info"
+          class="size-3.5 text-(--ui-text-muted) shrink-0"
+        />
+        <span class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted)">Status</span>
+      </div>
+      <div class="divide-y divide-(--ui-border)">
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-activity"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Connection</span>
+          </div>
+          <div class="flex items-center gap-1.5 shrink-0">
+            <span :class="['size-1.5 rounded-full', statusDotClass]" />
+            <span class="text-sm capitalize">{{ status }}</span>
+          </div>
+        </div>
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-shield"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Your role</span>
+          </div>
+          <UBadge
+            v-if="effectiveRole"
+            :color="roleBadgeColor"
+            variant="subtle"
+            :label="effectiveRole"
+            size="sm"
+            class="capitalize shrink-0"
+          />
+          <span
+            v-else
+            class="text-sm text-(--ui-text-dimmed)"
+          >—</span>
+        </div>
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-refresh-ccw"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Synced</span>
+          </div>
+          <UBadge
+            :color="synced ? 'success' : 'neutral'"
+            variant="subtle"
+            :label="synced ? 'Yes' : 'No'"
+            :icon="synced ? 'i-lucide-check' : 'i-lucide-circle'"
+            size="sm"
+            class="shrink-0"
+          />
+        </div>
+        <div
+          v-if="serverInfo?.version"
+          class="flex items-center justify-between gap-2 px-3 py-2"
+        >
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-tag"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Version</span>
+          </div>
+          <div class="flex items-center gap-1 shrink-0">
+            <UBadge
+              color="neutral"
+              variant="subtle"
+              :label="`v${serverInfo.version}`"
+              size="sm"
+            />
+            <UBadge
+              v-if="serverInfo.protocol_version"
+              color="neutral"
+              variant="outline"
+              :label="`p${serverInfo.protocol_version}`"
+              size="sm"
+            />
+          </div>
+        </div>
+        <div
+          v-if="serverInfo?.invite_only !== void 0"
+          class="flex items-center justify-between gap-2 px-3 py-2"
+        >
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              :name="serverInfo.invite_only ? 'i-lucide-lock' : 'i-lucide-globe'"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Invite only</span>
+          </div>
+          <UBadge
+            :color="serverInfo.invite_only ? 'warning' : 'success'"
+            variant="subtle"
+            :label="serverInfo.invite_only ? 'Yes' : 'No'"
+            size="sm"
+            class="shrink-0"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-2 px-3 py-2">
+          <div class="flex items-center gap-2 text-sm text-(--ui-text-muted) min-w-0">
+            <UIcon
+              name="i-lucide-heart-pulse"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">Health</span>
+          </div>
+          <UButton
+            :label="healthData ? `v${healthData.version}` : 'Check'"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            class="shrink-0"
+            :loading="healthLoading"
+            @click="checkHealth"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Admin surfaces — opt-in via slots, gated by role -->
+    <div
+      v-for="section in adminSections"
+      :key="section.key"
+      class="rounded-lg bg-(--ui-bg-elevated) overflow-hidden"
+    >
+      <button
+        type="button"
+        class="w-full flex items-center gap-1.5 px-3 py-2 border-b border-(--ui-border) hover:bg-(--ui-bg-accented)/40 transition-colors"
+        :class="{ 'border-b-0': !expanded[section.key] }"
+        @click="expanded[section.key] = !expanded[section.key]"
+      >
+        <UIcon
+          :name="section.icon"
+          class="size-3.5 text-(--ui-text-muted) shrink-0"
+        />
+        <span class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted) flex-1 text-left">
+          {{ section.label }}
+        </span>
+        <UIcon
+          :name="expanded[section.key] ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="size-3.5 text-(--ui-text-dimmed)"
+        />
+      </button>
+      <div
+        v-if="expanded[section.key]"
+        class="px-3 py-3"
+      >
+        <slot :name="section.key" />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** Hub document id (informational — the panel reflects the active server). */
+    docId?: string;
+};
+declare var __VLS_96: "storage" | "users" | "members" | "invites", __VLS_97: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_96>]?: (props: typeof __VLS_97) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __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/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/AUserMenu.d.vue.ts

@@ -14,13 +14,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

@@ -14,13 +14,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/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 {