@abraca/nuxt 1.8.2 → 2.0.0

package/dist/runtime/components/ANodePanel.vue

@@ -1,17 +1,27 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useAbracadabra } from "../composables/useAbracadabra";
 import { useSyncedMap } from "../composables/useYDoc";
 import { navigateTo } from "#imports";
 import { useChildTree } from "../composables/useChildTree";
 import { useAbraLocale } from "../composables/useAbraLocale";
+import { useResizableWidth } from "../composables/useResizableWidth";
+import ANodePanelHeader from "./ANodePanelHeader.vue";
+import { defineAsyncComponent } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useChat } from "../composables/useChat";
+const ANodeChatPanel = defineAsyncComponent(() => import("./chat/ANodeChatPanel.vue"));
+const ANodeSettingsPanel = defineAsyncComponent(() => import("./ANodeSettingsPanel.vue"));
 import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions";
+import { resolveDocType } from "../utils/docTypes";
 const props = defineProps({
   nodeId: { type: [String, null], required: true },
   nodeLabel: { type: String, required: false },
   childProvider: { type: null, required: false },
   docType: { type: String, required: false },
-  labels: { type: Object, required: false }
+  labels: { type: Object, required: false },
+  initialTab: { type: String, required: false, default: "editor" },
+  tabs: { type: Array, required: false }
 });
 const emit = defineEmits(["close"]);
 const open = computed({
@@ -49,7 +59,41 @@ function patchType(type) {
   const e = treeMap.data[props.nodeId];
   if (e) treeMap.set(props.nodeId, { ...e, type, updatedAt: Date.now() });
 }
-const activeTab = ref("editor");
+const activeTab = ref(props.initialTab);
+watch(() => props.nodeId, (id) => {
+  if (id) activeTab.value = props.initialTab;
+});
+const docTypeDef = computed(() => resolveDocType(currentType.value, registry));
+const usesPageRenderer = computed(
+  () => docTypeDef.value.key !== "doc" && !!docTypeDef.value.component
+);
+const editorRef = ref(null);
+const tiptapEditor = computed(() => editorRef.value?.editor ?? null);
+const resize = useResizableWidth({
+  defaultWidth: 672,
+  minWidth: 320,
+  cookieKey: "abraca-node-panel-width",
+  direction: "left"
+});
+const _runtimeFeatures = computed(() => {
+  try {
+    return useRuntimeConfig().public?.abracadabra?.features ?? {};
+  } catch {
+    return {};
+  }
+});
+const showChatTab = computed(() => {
+  if (props.tabs && !props.tabs.includes("chat")) return false;
+  return !!_runtimeFeatures.value?.chat;
+});
+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 _chat = useChat();
+const chatUnread = computed(() => {
+  if (!props.nodeId) return 0;
+  return _chat.channels.value[props.nodeId]?.unreadCount ?? 0;
+});
 const pluginSlots = computed(() => {
   return registry.getAllNodePanelSlots().filter((slot) => {
     if (!props.nodeId || !tree.value) return false;
@@ -138,37 +182,48 @@ const addFieldMenuItems = computed(
     v-model:open="open"
     side="right"
     :title="nodeLabel || 'Document'"
-    :ui="{ content: 'sm:max-w-2xl' }"
+    :content="{ style: resize.style.value }"
     @update:open="(v) => !v && emit('close')"
   >
     <template #header>
-      <div class="flex items-center gap-2 min-w-0 flex-1">
-        <UIcon
-          :name="meta.icon ?? 'i-lucide-file-text'"
-          class="size-4 shrink-0"
-          :style="meta.color ? `color: ${meta.color}` : ''"
-          :class="meta.color ? '' : 'text-muted'"
+      <!-- Default header uses <ANodePanelHeader>. Consumers can replace the
+           whole header via the #header slot, or replace individual pieces
+           (presence, actions-right, etc.) by importing <ANodePanelHeader>
+           and supplying its own slots. -->
+      <slot
+        name="header"
+        :node-id="nodeId"
+        :node-label="nodeLabel"
+        :editor="tiptapEditor"
+        :meta="meta"
+        :doc-type-def="docTypeDef"
+      >
+        <ANodePanelHeader
+          :node-id="nodeId"
+          :node-label="nodeLabel"
+          :icon="meta.icon ?? docTypeDef.icon"
+          :icon-color="meta.color"
+          :editor="activeTab === 'editor' && !usesPageRenderer ? tiptapEditor : null"
+          @expand="navigateTo(`/app/${nodeId}`)"
         />
-        <span class="font-medium truncate flex-1">{{ nodeLabel || "Document" }}</span>
-        <UTooltip
-          text="Open as full page"
-          :content="{ side: 'bottom' }"
-        >
-          <UButton
-            icon="i-lucide-expand"
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            @click="navigateTo(`/app/${nodeId}`)"
-          />
-        </UTooltip>
-      </div>
+      </slot>
     </template>
 
     <template #body>
-      <!-- Tab bar -->
+      <!-- Resize handle: left edge of slideover, desktop only -->
+      <div
+        class="absolute left-0 top-0 bottom-0 w-1.5 z-10 cursor-col-resize hidden sm:block group"
+        :class="resize.isResizing.value ? 'bg-(--ui-primary)/20' : 'hover:bg-(--ui-primary)/10'"
+        @mousedown.stop.prevent="resize.onMouseDown"
+        @touchstart.stop.prevent="resize.onTouchStart"
+        @dblclick="resize.onDoubleClick"
+      />
+
+      <!-- Tab bar — built-in tabs are individually toggleable via the
+           `tabs` prop; plugin-registered tabs always render. -->
       <div class="flex items-center gap-1 border-b border-(--ui-border) mb-4 -mt-2">
         <UButton
+          v-if="showEditorTab"
           icon="i-lucide-file-text"
           :label="locale.editorTab"
           size="sm"
@@ -177,6 +232,7 @@ const addFieldMenuItems = computed(
           @click="activeTab = 'editor'"
         />
         <UButton
+          v-if="showPropertiesTab"
           icon="i-lucide-sliders-horizontal"
           :label="locale.propertiesTab"
           size="sm"
@@ -184,6 +240,32 @@ const addFieldMenuItems = computed(
           :variant="activeTab === 'properties' ? 'soft' : 'ghost'"
           @click="activeTab = 'properties'"
         />
+        <UChip
+          v-if="showChatTab"
+          :text="chatUnread > 0 && activeTab !== 'chat' ? String(chatUnread) : void 0"
+          color="error"
+          size="lg"
+          :show="chatUnread > 0 && activeTab !== 'chat'"
+          :inset="true"
+        >
+          <UButton
+            icon="i-lucide-message-circle"
+            label="Chat"
+            size="sm"
+            :color="activeTab === 'chat' ? 'primary' : 'neutral'"
+            :variant="activeTab === 'chat' ? 'soft' : 'ghost'"
+            @click="activeTab = 'chat'"
+          />
+        </UChip>
+        <UButton
+          v-if="showSettingsTab"
+          icon="i-lucide-settings-2"
+          label="Settings"
+          size="sm"
+          :color="activeTab === 'settings' ? 'primary' : 'neutral'"
+          :variant="activeTab === 'settings' ? 'soft' : 'ghost'"
+          @click="activeTab = 'settings'"
+        />
         <UButton
           v-for="slot in pluginSlots"
           :key="slot.id"
@@ -196,13 +278,23 @@ const addFieldMenuItems = computed(
         />
       </div>
 
-      <!-- Editor tab -->
+      <!-- Editor tab — swaps to the registered page-type renderer when the
+           doc has a non-'doc' type (kanban / table / calendar / etc.). -->
       <div
         v-show="activeTab === 'editor'"
         class="min-h-[60vh]"
       >
+        <component
+          :is="docTypeDef.component"
+          v-if="nodeId && usesPageRenderer"
+          :key="`${nodeId}-${currentType}`"
+          :doc-id="nodeId"
+          :doc-label="nodeLabel || ''"
+          :child-provider="childProvider"
+        />
         <AEditor
-          v-if="nodeId"
+          v-else-if="nodeId"
+          ref="editorRef"
           :doc-id="nodeId"
           :child-provider="childProvider"
           :parent-type="docType"
@@ -212,6 +304,35 @@ const addFieldMenuItems = computed(
         />
       </div>
 
+      <!-- Chat tab -->
+      <div
+        v-if="showChatTab"
+        v-show="activeTab === 'chat'"
+        class="min-h-[60vh] -mx-4 -mb-4 sm:-mx-6"
+      >
+        <ANodeChatPanel
+          v-if="nodeId"
+          :doc-id="nodeId"
+          :label="nodeLabel || 'Chat'"
+        />
+      </div>
+
+      <!-- Settings tab — snapshots wired by default; permissions and
+           encryption are app-supplied via slots. -->
+      <div
+        v-if="showSettingsTab"
+        v-show="activeTab === 'settings'"
+        class="min-h-[60vh]"
+      >
+        <ANodeSettingsPanel
+          v-if="nodeId"
+          :doc-id="nodeId"
+          :doc-type-key="currentType"
+          :doc-meta="meta"
+          @update-meta="patchMeta"
+        />
+      </div>
+
       <!-- Properties tab -->
       <div
         v-show="activeTab === 'properties'"

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

@@ -1,15 +1,42 @@
 import type { AbracadabraLocale } from '../locale.js';
+import type { DocPageMeta } from '../types.js';
 type __VLS_Props = {
     nodeId: string | null;
     nodeLabel?: string;
     childProvider?: any;
     docType?: string;
     labels?: Partial<AbracadabraLocale['nodePanel']>;
+    /** Tab to open initially. Defaults to 'editor'. */
+    initialTab?: 'editor' | 'properties' | 'chat' | 'settings' | 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.
+     */
+    tabs?: Array<'editor' | 'properties' | 'chat' | 'settings'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_11: {
+    nodeId: string | null;
+    nodeLabel: string | undefined;
+    editor: any;
+    meta: DocPageMeta;
+    docTypeDef: import("../utils/docTypes.js").DocTypeDefinition;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    initialTab: "editor" | "properties" | "chat" | "settings" | string;
+}, {}, {}, {}, 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/ANodePanelHeader.d.vue.ts

@@ -0,0 +1,64 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    /** Document ID — passed through to default presence/expand handlers */
+    nodeId?: string | null;
+    /** Display label */
+    nodeLabel?: string;
+    /** Lucide icon name (with `i-lucide-` prefix or just the suffix) */
+    icon?: string;
+    /** Optional inline CSS color for the icon */
+    iconColor?: string;
+    /** TipTap editor — when passed, default undo/redo buttons render */
+    editor?: Editor | null;
+    /** 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;
+    /** Tooltip text for the expand button */
+    expandTooltip?: string;
+};
+declare var __VLS_1: {
+    icon: string;
+    color: string | undefined;
+}, __VLS_8: {
+    label: string | undefined;
+}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {
+    editor: Editor | null | undefined;
+}, __VLS_31: {}, __VLS_33: {
+    expand: () => void;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_8) => any;
+} & {
+    'actions-left'?: (props: typeof __VLS_10) => any;
+} & {
+    presence?: (props: typeof __VLS_12) => any;
+} & {
+    'undo-redo'?: (props: typeof __VLS_19) => any;
+} & {
+    'actions-right'?: (props: typeof __VLS_31) => any;
+} & {
+    expand?: (props: typeof __VLS_33) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExpand?: (() => any) | undefined;
+}>, {
+    showUndoRedo: boolean;
+    showExpand: boolean;
+    showPresence: boolean;
+    expandTooltip: string;
+}, {}, {}, {}, 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/ANodePanelHeader.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed } from "vue";
+import AFacepile from "./aware/AFacepile.vue";
+import AEditorUndoButton from "./editor/AEditorUndoButton.vue";
+import AEditorRedoButton from "./editor/AEditorRedoButton.vue";
+const props = defineProps({
+  nodeId: { type: [String, null], required: false },
+  nodeLabel: { type: String, required: false },
+  icon: { type: String, required: false },
+  iconColor: { type: String, required: false },
+  editor: { type: [Object, 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 },
+  expandTooltip: { type: String, required: false, default: "Open as full page" }
+});
+const emit = defineEmits(["expand"]);
+const resolvedIcon = computed(() => {
+  const i = props.icon;
+  if (!i) return "i-lucide-file-text";
+  return i.startsWith("i-") ? i : `i-lucide-${i}`;
+});
+const undoRedoEnabled = computed(
+  () => props.showUndoRedo === void 0 ? !!props.editor : props.showUndoRedo
+);
+const expandEnabled = computed(
+  () => props.showExpand === void 0 ? !!props.nodeId : props.showExpand
+);
+const presenceEnabled = computed(
+  () => props.showPresence === void 0 ? !!props.nodeId : props.showPresence
+);
+</script>
+
+<template>
+  <div class="flex items-center gap-2 min-w-0 flex-1">
+    <!-- icon slot -->
+    <slot
+      name="icon"
+      :icon="resolvedIcon"
+      :color="iconColor"
+    >
+      <UIcon
+        :name="resolvedIcon"
+        class="size-4 shrink-0"
+        :style="iconColor ? `color: ${iconColor}` : ''"
+        :class="iconColor ? '' : 'text-muted'"
+      />
+    </slot>
+
+    <!-- title slot -->
+    <slot
+      name="title"
+      :label="nodeLabel"
+    >
+      <span class="font-medium truncate flex-1">{{ nodeLabel || "Document" }}</span>
+    </slot>
+
+    <!-- left-of-presence actions (badges, status indicators, etc.) -->
+    <slot name="actions-left" />
+
+    <!-- presence -->
+    <slot name="presence">
+      <AFacepile
+        v-if="presenceEnabled && nodeId"
+        :doc-id="nodeId"
+        size="2xs"
+        :max="3"
+      />
+    </slot>
+
+    <!-- editor-coupled actions: undo/redo -->
+    <slot
+      name="undo-redo"
+      :editor="editor"
+    >
+      <template v-if="undoRedoEnabled && editor">
+        <AEditorUndoButton :editor="editor" />
+        <AEditorRedoButton :editor="editor" />
+      </template>
+    </slot>
+
+    <!-- right-of-undo extension actions -->
+    <slot name="actions-right" />
+
+    <!-- expand to full page -->
+    <slot
+      name="expand"
+      :expand="() => emit('expand')"
+    >
+      <UTooltip
+        v-if="expandEnabled"
+        :text="expandTooltip"
+        :content="{ side: 'bottom' }"
+      >
+        <UButton
+          icon="i-lucide-expand"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="emit('expand')"
+        />
+      </UTooltip>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,64 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    /** Document ID — passed through to default presence/expand handlers */
+    nodeId?: string | null;
+    /** Display label */
+    nodeLabel?: string;
+    /** Lucide icon name (with `i-lucide-` prefix or just the suffix) */
+    icon?: string;
+    /** Optional inline CSS color for the icon */
+    iconColor?: string;
+    /** TipTap editor — when passed, default undo/redo buttons render */
+    editor?: Editor | null;
+    /** 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;
+    /** Tooltip text for the expand button */
+    expandTooltip?: string;
+};
+declare var __VLS_1: {
+    icon: string;
+    color: string | undefined;
+}, __VLS_8: {
+    label: string | undefined;
+}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {
+    editor: Editor | null | undefined;
+}, __VLS_31: {}, __VLS_33: {
+    expand: () => void;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_8) => any;
+} & {
+    'actions-left'?: (props: typeof __VLS_10) => any;
+} & {
+    presence?: (props: typeof __VLS_12) => any;
+} & {
+    'undo-redo'?: (props: typeof __VLS_19) => any;
+} & {
+    'actions-right'?: (props: typeof __VLS_31) => any;
+} & {
+    expand?: (props: typeof __VLS_33) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExpand?: (() => any) | undefined;
+}>, {
+    showUndoRedo: boolean;
+    showExpand: boolean;
+    showPresence: boolean;
+    expandTooltip: string;
+}, {}, {}, {}, 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/ANodeSettingsPanel.d.vue.ts

@@ -0,0 +1,49 @@
+import type { PermissionEntry, OnlineUser } from './shell/ADocPanelSettings.vue.js';
+import type { DocPageMeta } from '../types.js';
+type __VLS_Props = {
+    docId: string;
+    /** Document type key (drives metaSchema form). */
+    docTypeKey?: string;
+    /** Document meta to read/write. */
+    docMeta?: DocPageMeta | null;
+    /** Permission entries — left to the consumer (varies per backend). */
+    permissions?: PermissionEntry[];
+    /** Loading flag for permissions. */
+    loadingPermissions?: boolean;
+    /** Online users not yet in permission list. */
+    onlineNotGranted?: OnlineUser[];
+    /** Whether the current user is owner. */
+    isOwner?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update-meta": (patch: Partial<DocPageMeta>) => any;
+    "grant-permission": (userId: string, role: string) => any;
+    "change-role": (userId: string, role: string) => any;
+    "revoke-permission": (userId: string) => any;
+    "create-invite": (options: {
+        role: string;
+        maxUses?: number;
+        expiresIn?: number;
+    }) => any;
+    "sync-doc": () => any;
+    "open-encryption": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate-meta"?: ((patch: Partial<DocPageMeta>) => any) | undefined;
+    "onGrant-permission"?: ((userId: string, role: string) => any) | undefined;
+    "onChange-role"?: ((userId: string, role: string) => any) | undefined;
+    "onRevoke-permission"?: ((userId: string) => any) | undefined;
+    "onCreate-invite"?: ((options: {
+        role: string;
+        maxUses?: number;
+        expiresIn?: number;
+    }) => any) | undefined;
+    "onSync-doc"?: (() => any) | undefined;
+    "onOpen-encryption"?: (() => any) | undefined;
+}>, {
+    isOwner: boolean;
+    permissions: PermissionEntry[];
+    loadingPermissions: boolean;
+    onlineNotGranted: OnlineUser[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ANodeSettingsPanel.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, toRef } from "vue";
+import { useDocSnapshots } from "../composables/useDocSnapshots";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import ADocPanelSettings from "./shell/ADocPanelSettings.vue";
+const props = defineProps({
+  docId: { type: String, required: true },
+  docTypeKey: { type: String, required: false },
+  docMeta: { type: [Object, null], required: false },
+  permissions: { type: Array, required: false, default: () => [] },
+  loadingPermissions: { type: Boolean, required: false, default: false },
+  onlineNotGranted: { type: Array, required: false, default: () => [] },
+  isOwner: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["grant-permission", "change-role", "revoke-permission", "create-invite", "sync-doc", "open-encryption", "update-meta"]);
+const abra = useAbracadabra();
+const docIdRef = toRef(props, "docId");
+const snaps = useDocSnapshots(docIdRef);
+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");
+const syncStatusColor = computed(() => abra.provider.value ? "text-success" : "text-muted");
+const syncStatusLabel = computed(() => abra.provider.value ? "Connected" : "Disconnected");
+</script>
+
+<template>
+  <ADocPanelSettings
+    :doc-id="docId"
+    :effective-role="effectiveRole"
+    :user-name="userName"
+    :is-owner="isOwner"
+    :permissions="permissions"
+    :loading-permissions="loadingPermissions"
+    :online-not-granted="onlineNotGranted"
+    :sync-status-icon="syncStatusIcon"
+    :sync-status-color="syncStatusColor"
+    :sync-status-label="syncStatusLabel"
+    :doc-type-key="docTypeKey"
+    :doc-meta="docMeta"
+    :snapshots="snaps.snapshots.value"
+    :loading-snapshots="snaps.loading.value"
+    :snapshots-error="snaps.error.value"
+    :has-more-snapshots="snaps.hasMore.value"
+    :pending-snapshot-version="null"
+    :is-creating-snapshot="snaps.creating.value"
+    @grant-permission="(u, r) => emit('grant-permission', u, r)"
+    @change-role="(u, r) => emit('change-role', u, r)"
+    @revoke-permission="(u) => emit('revoke-permission', u)"
+    @create-invite="(o) => emit('create-invite', o)"
+    @sync-doc="emit('sync-doc')"
+    @open-encryption="emit('open-encryption')"
+    @update-meta="(p) => emit('update-meta', p)"
+    @create-snapshot="(label) => snaps.create(label)"
+    @delete-snapshot="(v) => snaps.remove(v)"
+    @restore-snapshot="(v) => snaps.restore(v)"
+    @fork-snapshot="(v) => snaps.fork(v)"
+    @load-more-snapshots="snaps.loadMore"
+  />
+</template>