@abraca/nuxt 2.9.0 → 2.11.0

package/dist/runtime/components/AModalShell.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useSwipeGesture } from "../composables/useSwipeGesture";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  maxWidth: { type: String, required: false, default: "sm:max-w-xl" },
+  closeable: { type: Boolean, required: false, default: true },
+  title: { type: String, required: false },
+  subtitle: { type: String, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  swipeable: { type: Boolean, required: false, default: false },
+  canSwipeForward: { type: Boolean, required: false, default: false },
+  canSwipeBack: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:open", "swipe-forward", "swipe-back"]);
+const innerRef = ref();
+const contentHeight = ref(void 0);
+useResizeObserver(innerRef, (entries) => {
+  const entry = entries[0];
+  if (entry && entry.contentRect.height > 0) contentHeight.value = entry.contentRect.height;
+});
+const swipeRef = ref(null);
+const swipeDirection = ref(null);
+const { swipeOffset, isSwiping } = useSwipeGesture({
+  el: swipeRef,
+  axis: "x",
+  disabled: computed(() => !props.swipeable),
+  canSwipeLeft: computed(() => props.canSwipeForward),
+  canSwipeRight: computed(() => props.canSwipeBack),
+  onSwipeLeft() {
+    swipeDirection.value = "forward";
+    emit("swipe-forward");
+  },
+  onSwipeRight() {
+    swipeDirection.value = "back";
+    emit("swipe-back");
+  }
+});
+const transitionName = computed(
+  () => swipeDirection.value === "back" ? "ams-step-fade-reverse" : "ams-step-fade"
+);
+function onAfterLeave() {
+  swipeDirection.value = null;
+}
+</script>
+
+<template>
+  <UModal
+    :open="props.open"
+    :closeable="closeable"
+    :dismissible="dismissible"
+    :ui="{
+  content: `${maxWidth} divide-y-0`,
+  header: 'hidden'
+}"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <div class="flex flex-col gap-6 p-4 sm:p-6">
+        <div
+          v-if="title || subtitle"
+          class="flex flex-col gap-1"
+        >
+          <h2
+            v-if="title"
+            class="text-base font-semibold text-(--ui-text-highlighted)"
+          >
+            {{ title }}
+          </h2>
+          <p
+            v-if="subtitle"
+            class="text-sm text-(--ui-text-muted)"
+          >
+            {{ subtitle }}
+          </p>
+        </div>
+        <div
+          ref="swipeRef"
+          class="ams-height-wrap"
+          :style="{
+  ...contentHeight !== void 0 ? { height: contentHeight + 'px' } : {},
+  ...isSwiping ? { transform: `translateX(${swipeOffset.x}px)`, transition: 'none' } : {}
+}"
+        >
+          <div ref="innerRef">
+            <Transition
+              :name="transitionName"
+              mode="out-in"
+              @after-leave="onAfterLeave"
+            >
+              <slot />
+            </Transition>
+          </div>
+        </div>
+
+        <slot name="footer" />
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.ams-height-wrap{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),transform .3s ease}.ams-step-fade-enter-active{transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.ams-step-fade-leave-active{transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1)}.ams-step-fade-enter-from{opacity:0;transform:translateX(16px) scale(.97)}.ams-step-fade-leave-to{opacity:0;transform:translateX(-12px) scale(.98)}.ams-step-fade-reverse-enter-active{transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.ams-step-fade-reverse-leave-active{transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1)}.ams-step-fade-reverse-enter-from{opacity:0;transform:translateX(-16px) scale(.97)}.ams-step-fade-reverse-leave-to{opacity:0;transform:translateX(12px) scale(.98)}
+</style>

package/dist/runtime/components/AModalShell.vue.d.ts

@@ -0,0 +1,48 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Tailwind max-width class for the modal content (e.g. `sm:max-w-3xl`). */
+    maxWidth?: string;
+    closeable?: boolean;
+    /** Standard modal heading — guarantees the canonical look every modal shares. */
+    title?: string;
+    /** Optional muted line under the title (e.g. a short description). */
+    subtitle?: string;
+    /** When false, Esc / overlay-click cannot dismiss the modal (forced choice). */
+    dismissible?: boolean;
+    /** Enable horizontal swipe gestures for multi-step navigation. */
+    swipeable?: boolean;
+    /** Whether forward (swipe left) navigation is available. */
+    canSwipeForward?: boolean;
+    /** Whether backward (swipe right) navigation is available. */
+    canSwipeBack?: boolean;
+};
+declare var __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+} & {
+    footer?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (v: boolean) => any;
+    "swipe-forward": () => any;
+    "swipe-back": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+    "onSwipe-forward"?: (() => any) | undefined;
+    "onSwipe-back"?: (() => any) | undefined;
+}>, {
+    maxWidth: string;
+    closeable: boolean;
+    dismissible: boolean;
+    swipeable: boolean;
+    canSwipeForward: boolean;
+    canSwipeBack: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ANodePanel.d.vue.ts

@@ -7,13 +7,15 @@ type __VLS_Props = {
     docType?: string;
     labels?: Partial<AbracadabraLocale['nodePanel']>;
     /** Tab to open initially. Defaults to 'editor'. */
-    initialTab?: 'editor' | 'properties' | 'chat' | 'settings' | string;
+    initialTab?: 'editor' | 'properties' | 'chat' | 'settings' | 'serverSettings' | string;
     /**
-     * Built-in tabs to render. Defaults to all-on; pass an array to limit which
-     * tabs appear (useful when a developer wants only properties + chat).
-     * Plugin-registered tab slots are unaffected.
+     * Built-in tabs to render. Defaults to editor/properties/chat/settings on;
+     * pass an array to limit which tabs appear (useful when a developer wants
+     * only properties + chat). `serverSettings` is OPT-IN — only rendered when
+     * explicitly included (it targets a server hub doc). Plugin-registered tab
+     * slots are unaffected.
      */
-    tabs?: Array<'editor' | 'properties' | 'chat' | 'settings'>;
+    tabs?: Array<'editor' | 'properties' | 'chat' | 'settings' | 'serverSettings'>;
 };
 declare var __VLS_11: {
     nodeId: string | null;
@@ -30,7 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {
-    initialTab: "editor" | "properties" | "chat" | "settings" | string;
+    initialTab: "editor" | "properties" | "chat" | "settings" | "serverSettings" | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ANodePanel.vue

@@ -12,6 +12,7 @@ import { useRuntimeConfig } from "#imports";
 import { useChat } from "../composables/useChat";
 const ANodeChatPanel = defineAsyncComponent(() => import("./chat/ANodeChatPanel.vue"));
 const ANodeSettingsPanel = defineAsyncComponent(() => import("./ANodeSettingsPanel.vue"));
+const ADocPanelServerSettings = defineAsyncComponent(() => import("./shell/ADocPanelServerSettings.vue"));
 import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions";
 import { resolveDocType } from "../utils/docTypes";
 const props = defineProps({
@@ -89,6 +90,7 @@ const showChatTab = computed(() => {
 const showEditorTab = computed(() => !props.tabs || props.tabs.includes("editor"));
 const showPropertiesTab = computed(() => !props.tabs || props.tabs.includes("properties"));
 const showSettingsTab = computed(() => !props.tabs || props.tabs.includes("settings"));
+const showServerSettingsTab = computed(() => !!props.tabs && props.tabs.includes("serverSettings"));
 const _chat = useChat();
 const chatUnread = computed(() => {
   if (!props.nodeId) return 0;
@@ -204,6 +206,7 @@ const addFieldMenuItems = computed(
           :node-label="nodeLabel"
           :icon="meta.icon ?? docTypeDef.icon"
           :icon-color="meta.color"
+          :provider="childProvider"
           :editor="activeTab === 'editor' && !usesPageRenderer ? tiptapEditor : null"
           @expand="navigateTo(`/app/${nodeId}`)"
         >
@@ -256,6 +259,15 @@ const addFieldMenuItems = computed(
                 :variant="activeTab === 'settings' ? 'soft' : 'ghost'"
                 @click="activeTab = 'settings'"
               />
+              <UButton
+                v-if="showServerSettingsTab"
+                icon="i-lucide-server-cog"
+                label="Server"
+                size="xs"
+                :color="activeTab === 'serverSettings' ? 'primary' : 'neutral'"
+                :variant="activeTab === 'serverSettings' ? 'soft' : 'ghost'"
+                @click="activeTab = 'serverSettings'"
+              />
               <UButton
                 v-for="slot in pluginSlots"
                 :key="slot.id"
@@ -332,11 +344,24 @@ const addFieldMenuItems = computed(
           v-if="nodeId"
           :doc-id="nodeId"
           :doc-type-key="currentType"
+          :doc-label="nodeLabel"
           :doc-meta="meta"
           @update-meta="patchMeta"
         />
       </div>
 
+      <!-- Server-settings tab (opt-in via `tabs`) — hub-doc server status. -->
+      <div
+        v-if="showServerSettingsTab"
+        v-show="activeTab === 'serverSettings'"
+        class="min-h-[60vh] -mx-4 -mb-4 sm:-mx-6"
+      >
+        <ADocPanelServerSettings
+          v-if="nodeId"
+          :doc-id="nodeId"
+        />
+      </div>
+
       <!-- Properties tab -->
       <div
         v-show="activeTab === 'properties'"

package/dist/runtime/components/ANodePanel.vue.d.ts

@@ -7,13 +7,15 @@ type __VLS_Props = {
     docType?: string;
     labels?: Partial<AbracadabraLocale['nodePanel']>;
     /** Tab to open initially. Defaults to 'editor'. */
-    initialTab?: 'editor' | 'properties' | 'chat' | 'settings' | string;
+    initialTab?: 'editor' | 'properties' | 'chat' | 'settings' | 'serverSettings' | string;
     /**
-     * Built-in tabs to render. Defaults to all-on; pass an array to limit which
-     * tabs appear (useful when a developer wants only properties + chat).
-     * Plugin-registered tab slots are unaffected.
+     * Built-in tabs to render. Defaults to editor/properties/chat/settings on;
+     * pass an array to limit which tabs appear (useful when a developer wants
+     * only properties + chat). `serverSettings` is OPT-IN — only rendered when
+     * explicitly included (it targets a server hub doc). Plugin-registered tab
+     * slots are unaffected.
      */
-    tabs?: Array<'editor' | 'properties' | 'chat' | 'settings'>;
+    tabs?: Array<'editor' | 'properties' | 'chat' | 'settings' | 'serverSettings'>;
 };
 declare var __VLS_11: {
     nodeId: string | null;
@@ -30,7 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {
-    initialTab: "editor" | "properties" | "chat" | "settings" | string;
+    initialTab: "editor" | "properties" | "chat" | "settings" | "serverSettings" | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ANodePanelHeader.d.vue.ts

@@ -10,12 +10,19 @@ type __VLS_Props = {
     iconColor?: string;
     /** TipTap editor — when passed, default undo/redo buttons render */
     editor?: Editor | null;
+    /**
+     * The doc's child provider. When passed, the default `#status` slot renders
+     * an <AConnectionBadge> so an offline / auth-rejected doc shows a status dot.
+     */
+    provider?: any;
     /** Show undo/redo buttons in default slot. Default: true when editor passed */
     showUndoRedo?: boolean;
     /** Show expand-to-full-page button. Default: true when nodeId passed */
     showExpand?: boolean;
     /** Show presence facepile in default presence slot. Default: true when nodeId passed */
     showPresence?: boolean;
+    /** Show the connection badge in default `#status` slot. Default: true when provider passed */
+    showConnectionBadge?: boolean;
     /** Tooltip text for the expand button */
     expandTooltip?: string;
 };
@@ -24,34 +31,37 @@ declare var __VLS_1: {
     color: string | undefined;
 }, __VLS_8: {
     label: string | undefined;
-}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {
+}, __VLS_10: {}, __VLS_17: {}, __VLS_19: {}, __VLS_26: {
     editor: Editor | null | undefined;
-}, __VLS_31: {}, __VLS_33: {
-    expand: () => void;
+}, __VLS_38: {}, __VLS_40: {
+    expand: (e?: MouseEvent) => void;
 };
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
     title?: (props: typeof __VLS_8) => any;
 } & {
-    'actions-left'?: (props: typeof __VLS_10) => any;
+    status?: (props: typeof __VLS_10) => any;
 } & {
-    presence?: (props: typeof __VLS_12) => any;
+    'actions-left'?: (props: typeof __VLS_17) => any;
 } & {
-    'undo-redo'?: (props: typeof __VLS_19) => any;
+    presence?: (props: typeof __VLS_19) => any;
 } & {
-    'actions-right'?: (props: typeof __VLS_31) => any;
+    'undo-redo'?: (props: typeof __VLS_26) => any;
 } & {
-    expand?: (props: typeof __VLS_33) => any;
+    'actions-right'?: (props: typeof __VLS_38) => any;
+} & {
+    expand?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    expand: () => any;
+    expand: (event?: MouseEvent | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onExpand?: (() => any) | undefined;
+    onExpand?: ((event?: MouseEvent | undefined) => any) | undefined;
 }>, {
     showUndoRedo: boolean;
     showExpand: boolean;
     showPresence: boolean;
+    showConnectionBadge: boolean;
     expandTooltip: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ANodePanelHeader.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import AFacepile from "./aware/AFacepile.vue";
+import AConnectionBadge from "./AConnectionBadge.vue";
 import AEditorUndoButton from "./editor/AEditorUndoButton.vue";
 import AEditorRedoButton from "./editor/AEditorRedoButton.vue";
 const props = defineProps({
@@ -9,9 +10,11 @@ const props = defineProps({
   icon: { type: String, required: false },
   iconColor: { type: String, required: false },
   editor: { type: [Object, null], required: false },
+  provider: { type: null, required: false },
   showUndoRedo: { type: Boolean, required: false, default: void 0 },
   showExpand: { type: Boolean, required: false, default: void 0 },
   showPresence: { type: Boolean, required: false, default: void 0 },
+  showConnectionBadge: { type: Boolean, required: false, default: void 0 },
   expandTooltip: { type: String, required: false, default: "Open as full page" }
 });
 const emit = defineEmits(["expand"]);
@@ -29,6 +32,9 @@ const expandEnabled = computed(
 const presenceEnabled = computed(
   () => props.showPresence === void 0 ? !!props.nodeId : props.showPresence
 );
+const connectionBadgeEnabled = computed(
+  () => props.showConnectionBadge === void 0 ? !!props.provider : props.showConnectionBadge
+);
 </script>
 
 <template>
@@ -55,6 +61,14 @@ const presenceEnabled = computed(
       <span class="font-medium truncate flex-1">{{ nodeLabel || "Document" }}</span>
     </slot>
 
+    <!-- connection status dot (offline / auth-rejected) for this doc's provider -->
+    <slot name="status">
+      <AConnectionBadge
+        v-if="connectionBadgeEnabled"
+        :provider="provider"
+      />
+    </slot>
+
     <!-- left-of-presence actions (badges, status indicators, etc.) -->
     <slot name="actions-left" />
 
@@ -82,10 +96,10 @@ const presenceEnabled = computed(
     <!-- right-of-undo extension actions -->
     <slot name="actions-right" />
 
-    <!-- expand to full page -->
+    <!-- expand to full page (modifier-aware: see the `expand` emit docs) -->
     <slot
       name="expand"
-      :expand="() => emit('expand')"
+      :expand="(e) => emit('expand', e)"
     >
       <UTooltip
         v-if="expandEnabled"
@@ -97,7 +111,7 @@ const presenceEnabled = computed(
           size="xs"
           variant="ghost"
           color="neutral"
-          @click="emit('expand')"
+          @click="(e) => emit('expand', e)"
         />
       </UTooltip>
     </slot>

package/dist/runtime/components/ANodePanelHeader.vue.d.ts

@@ -10,12 +10,19 @@ type __VLS_Props = {
     iconColor?: string;
     /** TipTap editor — when passed, default undo/redo buttons render */
     editor?: Editor | null;
+    /**
+     * The doc's child provider. When passed, the default `#status` slot renders
+     * an <AConnectionBadge> so an offline / auth-rejected doc shows a status dot.
+     */
+    provider?: any;
     /** Show undo/redo buttons in default slot. Default: true when editor passed */
     showUndoRedo?: boolean;
     /** Show expand-to-full-page button. Default: true when nodeId passed */
     showExpand?: boolean;
     /** Show presence facepile in default presence slot. Default: true when nodeId passed */
     showPresence?: boolean;
+    /** Show the connection badge in default `#status` slot. Default: true when provider passed */
+    showConnectionBadge?: boolean;
     /** Tooltip text for the expand button */
     expandTooltip?: string;
 };
@@ -24,34 +31,37 @@ declare var __VLS_1: {
     color: string | undefined;
 }, __VLS_8: {
     label: string | undefined;
-}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {
+}, __VLS_10: {}, __VLS_17: {}, __VLS_19: {}, __VLS_26: {
     editor: Editor | null | undefined;
-}, __VLS_31: {}, __VLS_33: {
-    expand: () => void;
+}, __VLS_38: {}, __VLS_40: {
+    expand: (e?: MouseEvent) => void;
 };
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
     title?: (props: typeof __VLS_8) => any;
 } & {
-    'actions-left'?: (props: typeof __VLS_10) => any;
+    status?: (props: typeof __VLS_10) => any;
 } & {
-    presence?: (props: typeof __VLS_12) => any;
+    'actions-left'?: (props: typeof __VLS_17) => any;
 } & {
-    'undo-redo'?: (props: typeof __VLS_19) => any;
+    presence?: (props: typeof __VLS_19) => any;
 } & {
-    'actions-right'?: (props: typeof __VLS_31) => any;
+    'undo-redo'?: (props: typeof __VLS_26) => any;
 } & {
-    expand?: (props: typeof __VLS_33) => any;
+    'actions-right'?: (props: typeof __VLS_38) => any;
+} & {
+    expand?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    expand: () => any;
+    expand: (event?: MouseEvent | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onExpand?: (() => any) | undefined;
+    onExpand?: ((event?: MouseEvent | undefined) => any) | undefined;
 }>, {
     showUndoRedo: boolean;
     showExpand: boolean;
     showPresence: boolean;
+    showConnectionBadge: boolean;
     expandTooltip: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ANodeSettingsPanel.d.vue.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     docId: string;
     /** Document type key (drives metaSchema form). */
     docTypeKey?: string;
+    /** Document label — used as the title when serializing a snapshot preview. */
+    docLabel?: string;
     /** Document meta to read/write. */
     docMeta?: DocPageMeta | null;
     /** Permission entries — left to the consumer (varies per backend). */

package/dist/runtime/components/ANodeSettingsPanel.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { computed, toRef } from "vue";
+import { computed, ref, toRef, watch } from "vue";
 import { useDocSnapshots } from "../composables/useDocSnapshots";
 import { useAbracadabra } from "../composables/useAbracadabra";
 import ADocPanelSettings from "./shell/ADocPanelSettings.vue";
+import ASnapshotPreviewModal from "./ASnapshotPreviewModal.vue";
 const props = defineProps({
   docId: { type: String, required: true },
   docTypeKey: { type: String, required: false },
+  docLabel: { type: String, required: false },
   docMeta: { type: [Object, null], required: false },
   permissions: { type: Array, required: false, default: () => [] },
   loadingPermissions: { type: Boolean, required: false, default: false },
@@ -16,6 +18,10 @@ const emit = defineEmits(["grant-permission", "change-role", "revoke-permission"
 const abra = useAbracadabra();
 const docIdRef = toRef(props, "docId");
 const snaps = useDocSnapshots(docIdRef);
+watch(docIdRef, (id) => {
+  if (id) snaps.fetchList();
+}, { immediate: true });
+const previewVersion = ref(null);
 const effectiveRole = computed(() => abra.provider.value?.effectiveRole ?? null);
 const userName = computed(() => abra.userName?.value ?? "");
 const syncStatusIcon = computed(() => abra.provider.value ? "i-lucide-cloud" : "i-lucide-cloud-off");
@@ -54,6 +60,20 @@ const syncStatusLabel = computed(() => abra.provider.value ? "Connected" : "Disc
     @delete-snapshot="(v) => snaps.remove(v)"
     @restore-snapshot="(v) => snaps.restore(v)"
     @fork-snapshot="(v) => snaps.fork(v)"
+    @preview-snapshot="(v) => previewVersion = v"
     @load-more-snapshots="snaps.loadMore"
   />
+
+  <ASnapshotPreviewModal
+    v-model:version="previewVersion"
+    :snapshots="snaps.snapshots.value"
+    :get-snapshot="snaps.getSnapshot"
+    :doc-label="docLabel"
+    :doc-type="docTypeKey"
+    :doc-meta="docMeta"
+    :is-owner="isOwner"
+    @restore="(v) => snaps.restore(v)"
+    @fork="(v) => snaps.fork(v)"
+    @delete="(v) => snaps.remove(v)"
+  />
 </template>

package/dist/runtime/components/ANodeSettingsPanel.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     docId: string;
     /** Document type key (drives metaSchema form). */
     docTypeKey?: string;
+    /** Document label — used as the title when serializing a snapshot preview. */
+    docLabel?: string;
     /** Document meta to read/write. */
     docMeta?: DocPageMeta | null;
     /** Permission entries — left to the consumer (varies per backend). */

package/dist/runtime/components/ASnapshotPreviewModal.d.vue.ts

@@ -0,0 +1,33 @@
+import type { SnapshotData, SnapshotMeta } from '@abraca/dabra';
+import type { DocPageMeta } from '../types.js';
+type __VLS_Props = {
+    /** Selected version — null closes the modal. The parent owns this. */
+    version: number | null;
+    /** The loaded snapshot metadata list (compare-baseline candidates). */
+    snapshots?: SnapshotMeta[];
+    /** Fetch a single snapshot's data blob (e.g. `useDocSnapshots().getSnapshot`). */
+    getSnapshot: (version: number) => Promise<SnapshotData | null>;
+    /** Document label — used as the title when serializing. */
+    docLabel?: string;
+    /** Document page type — passed to the markdown serializer. */
+    docType?: string;
+    /** Document meta — passed to the markdown serializer. */
+    docMeta?: DocPageMeta | null;
+    /** Whether the current user may delete snapshots. */
+    isOwner?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (version: number) => any;
+    restore: (version: number) => any;
+    fork: (version: number) => any;
+    "update:version": (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((version: number) => any) | undefined;
+    onRestore?: ((version: number) => any) | undefined;
+    onFork?: ((version: number) => any) | undefined;
+    "onUpdate:version"?: ((value: number | null) => any) | undefined;
+}>, {
+    snapshots: SnapshotMeta[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;