@abraca/nuxt 1.9.1 → 2.0.0

package/dist/module.d.mts

@@ -8,6 +8,8 @@ export { DocSeoOptions } from '../dist/runtime/composables/useDocSeo.js';
 export { DocDragState } from '../dist/runtime/composables/useDocDragBus.js';
 export { ParsedMessage, TextSegment, parseMessageContent, previewMessageContent, renderMessageSegments } from '../dist/runtime/utils/chatContent.js';
 export { DupEntry, duplicateDocContent, duplicateDocTree } from '../dist/runtime/utils/duplicateDocContent.js';
+export { AuditLogEntry, AuditQueryOpts, AuditVerifyResult, DocSearchHit, ReadyzStatus } from '@abraca/dabra';
+export { ServerTrashEntry } from '../dist/runtime/composables/useServerTrash.js';
 export { SlugMap, SlugMapEntry, buildSlugMap, isUUID, slugify } from '../dist/runtime/utils/slugify.js';
 export { avatarBorderStyle, avatarGradient, avatarStyleFromName } from '../dist/runtime/utils/avatarStyle.js';
 export { COLOR_PALETTES, ColorPalette, ColorShade, findPaletteByHex } from '../dist/runtime/utils/colorPalettes.js';
@@ -87,11 +89,10 @@ interface ModuleOptions {
     /**
      * Root document ID to connect to on boot.
      * When set, skips server-info / spaces discovery and connects directly.
-     * Useful when your server uses spaces and you know the hub or space doc ID.
      * Can be overridden at runtime via NUXT_PUBLIC_ABRACADABRA_ENTRY_DOC_ID.
      *
      * Discovery priority (first non-empty wins):
-     *   entryDocId > hubDocId (from /spaces/hub) > first space > server index_doc_id
+     *   entryDocId > saved server entryDocId > first Space (kind="space" top-level doc)
      */
     entryDocId?: string;
     /**
@@ -267,7 +268,7 @@ interface ModuleOptions {
         publicKey?: string;
         /** Ed25519 private key (base64url). Stored in private runtime config only. */
         privateKey?: string;
-        /** Root document ID to connect to. Defaults to the server's index_doc_id. */
+        /** Root document ID to connect to. Defaults to the server's root_doc_id. */
         rootDocId?: string;
         /** Disable the service provider even if keys are present. Default: false. */
         disabled?: boolean;

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.9.1",
+  "version": "2.0.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -204,7 +204,11 @@ const module$1 = defineNuxtModule({
       "lowlight",
       // Yjs + provider deps (shared globals + client plugin)
       "yjs",
-      "@abraca/dabra",
+      // NOTE: `@abraca/dabra` deliberately NOT pre-bundled. esbuild treeshakes
+      // its `export {}` aggregate in dist/abracadabra-provider.esm.js so re-exports
+      // from internal modules (ChannelKeyResolver, decryptChatContent, foldRecords,
+      // recordFromYAny, isEncryptedContent) get dropped — useChat.ts then fails to
+      // import them. Excluding from optimizeDeps means Vite serves it native ESM.
       "@noble/ed25519",
       "@noble/hashes/sha512",
       // Composable + util deps
@@ -219,6 +223,10 @@ const module$1 = defineNuxtModule({
     nuxt.options.vite.optimizeDeps.include = [
       .../* @__PURE__ */ new Set([...includeList, ...prebundleDeps])
     ];
+    const existingExclude = nuxt.options.vite.optimizeDeps.exclude ?? [];
+    nuxt.options.vite.optimizeDeps.exclude = [
+      .../* @__PURE__ */ new Set([...existingExclude, "@abraca/dabra"])
+    ];
     if (options.features?.editor !== false) {
       nuxt.options.css.push(resolver.resolve("./runtime/assets/editor.css"));
     }

package/dist/runtime/components/ADocumentTree.vue

@@ -254,7 +254,7 @@ function createDirectly(parentId) {
   if (parentId) {
     expandedIds.value.add(parentId);
     expandedIds.value = new Set(expandedIds.value);
-    client.value?.createChild(parentId, { child_id: id }).catch(() => {
+    client.value?.createChild(parentId, { child_id: id, kind: "page" }).catch(() => {
     });
   }
   emit("navigate", id);

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

@@ -23,6 +23,12 @@ type __VLS_Props = {
     parentType?: string;
     /** Override metaSchema directly instead of resolving from parentType */
     metaSchema?: MetaField[];
+    /**
+     * Layout variant. 'doc' (default) is the standard rich-text layout.
+     * 'prose' switches to a narrow readable measure with serif typography
+     * for long-form writing. Same TipTap engine and extensions.
+     */
+    variant?: 'doc' | 'prose';
 };
 type __VLS_ModelProps = {
     modelValue?: any;
@@ -37,11 +43,29 @@ declare var __VLS_18: {
         docId?: string | undefined;
     }[];
     ready: boolean;
+}, __VLS_27: {
+    editor: any;
+}, __VLS_35: {
+    editor: any;
+}, __VLS_43: {
+    editor: any;
+}, __VLS_46: {
+    editor: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_18) => any;
+} & {
+    link?: (props: typeof __VLS_27) => any;
+} & {
+    'doc-link'?: (props: typeof __VLS_35) => any;
+} & {
+    'create-child-doc'?: (props: typeof __VLS_43) => any;
+} & {
+    'send-to-chat'?: (props: typeof __VLS_46) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    editor: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     rename: (label: string) => any;
     update: (content: any) => any;
     "update:modelValue": (value: any) => any;
@@ -54,6 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onUpdateMeta?: ((patch: Partial<DocPageMeta>) => any) | undefined;
     onReady?: (() => any) | undefined;
 }>, {
+    variant: "doc" | "prose";
     contentType: "json" | "html" | "markdown";
     editable: boolean;
     showToolbar: boolean;

package/dist/runtime/components/AEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { shallowRef, ref, watch, watchEffect, computed, nextTick } from "vue";
+import { shallowRef, ref, watch, watchEffect, computed, nextTick, onBeforeUnmount } from "vue";
 import { useNuxtApp } from "#imports";
 import { Fragment } from "@tiptap/pm/model";
 import { useSyncedMap } from "../composables/useYDoc";
@@ -10,6 +10,9 @@ import { useEditorToolbar } from "../composables/useEditorToolbar";
 import { useEditorSuggestions } from "../composables/useEditorSuggestions";
 import { useEditorDragHandle } from "../composables/useEditorDragHandle";
 import { useEditorEmojis } from "../composables/useEditorEmojis";
+import { useEditorMentions } from "../composables/useEditorMentions";
+import ALinkPopover from "./editor/ALinkPopover.vue";
+import ADocLinkPopover from "./editor/ADocLinkPopover.vue";
 const props = defineProps({
   docId: { type: String, required: true },
   docLabel: { type: String, required: false },
@@ -21,7 +24,8 @@ const props = defineProps({
   showDragHandle: { type: Boolean, required: false, default: true },
   docMeta: { type: Object, required: false },
   parentType: { type: String, required: false },
-  metaSchema: { type: Array, required: false }
+  metaSchema: { type: Array, required: false },
+  variant: { type: String, required: false, default: "doc" }
 });
 const emit = defineEmits(["ready", "update", "rename", "updateMeta"]);
 const model = defineModel({ type: null });
@@ -32,10 +36,14 @@ watch(provider, async (prov) => {
   if (!prov || !props.docId) return;
   try {
     childProvider.value = await prov.loadChild(props.docId);
+    prov.pinChild?.(props.docId);
   } catch (e) {
     console.error("[AEditor] Failed to load child provider:", e);
   }
 }, { immediate: true });
+onBeforeUnmount(() => {
+  provider.value?.unpinChild?.(props.docId);
+});
 const { extensions, connectedUsers, ready } = useEditor({
   childProvider,
   docId: props.docId
@@ -44,6 +52,8 @@ watch(ready, (val) => {
   if (val) emit("ready");
 });
 const editorRef = ref(null);
+const tiptapEditor = computed(() => editorRef.value?.editor ?? null);
+defineExpose({ editor: tiptapEditor });
 const { items: toolbarItems } = useEditorToolbar({ docId: props.docId });
 const resolvedMetaSchema = computed(() => {
   if (props.metaSchema) return props.metaSchema;
@@ -54,6 +64,7 @@ const resolvedMetaSchema = computed(() => {
 });
 const { items: allSuggestionItems, propertiesOnlyItems } = useEditorSuggestions({ docId: props.docId });
 const { items: emojiItems } = useEditorEmojis();
+const { items: mentionItems } = useEditorMentions({ docId: props.docId });
 const isInDocumentMeta = ref(false);
 watchEffect((onCleanup) => {
   const ed = editorRef.value?.editor;
@@ -216,11 +227,102 @@ watch(() => props.docLabel, (newLabel) => {
   if (!ed || !ready.value) return;
   setHeaderText(ed, newLabel || "");
 });
+function insertNode(editor, type, attrs, content) {
+  const node = { type, attrs };
+  if (content) node.content = content;
+  return editor.chain().focus().insertContent(node);
+}
 const editorHandlers = {
   insertMetaField: {
     canExecute: () => true,
     execute: (editor, item) => editor.chain().focus().insertMetaField(item.attrs),
     isActive: () => false
+  },
+  divider: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "divider", { label: "" }),
+    isActive: (editor) => editor.isActive("divider")
+  },
+  quote: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "quote", { author: "", role: "", avatar: "" }, [{ type: "paragraph" }]),
+    isActive: (editor) => editor.isActive("quote")
+  },
+  figure: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "figure", { src: "", alt: "", caption: "" }),
+    isActive: (editor) => editor.isActive("figure")
+  },
+  embed: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "embed", { src: "", title: "", aspectRatio: "16/9" }),
+    isActive: (editor) => editor.isActive("embed")
+  },
+  video: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "video", { src: "", aspectRatio: "16/9", caption: "" }),
+    isActive: (editor) => editor.isActive("video")
+  },
+  stat: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "stat", { label: "Users", value: "1.2k", trend: "up", trendValue: "+12%" }),
+    isActive: (editor) => editor.isActive("stat")
+  },
+  statGroup: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "statGroup", {}, [
+      { type: "stat", attrs: { label: "Users", value: "1.2k", trend: "up", trendValue: "+12%" } },
+      { type: "stat", attrs: { label: "Revenue", value: "$48k", trend: "up", trendValue: "+8%" } },
+      { type: "stat", attrs: { label: "Churn", value: "2.4%", trend: "down", trendValue: "-0.3%" } }
+    ]),
+    isActive: (editor) => editor.isActive("statGroup")
+  },
+  button: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "button", { label: "Get started", variant: "solid", color: "primary", to: "", icon: "" }),
+    isActive: (editor) => editor.isActive("button")
+  },
+  buttonGroup: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "buttonGroup", {}, [
+      { type: "button", attrs: { label: "Primary", variant: "solid", color: "primary", to: "", icon: "" } },
+      { type: "button", attrs: { label: "Secondary", variant: "outline", color: "neutral", to: "", icon: "" } }
+    ]),
+    isActive: (editor) => editor.isActive("buttonGroup")
+  },
+  progress: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "progress", { label: "Progress", value: 50, max: 100, color: "primary" }),
+    isActive: (editor) => editor.isActive("progress")
+  },
+  spoiler: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "spoiler", { label: "Spoiler", revealed: false }, [{ type: "paragraph" }]),
+    isActive: (editor) => editor.isActive("spoiler")
+  },
+  colorSwatch: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "colorSwatch", { color: "#6366f1" }),
+    isActive: (editor) => editor.isActive("colorSwatch")
+  },
+  mathBlock: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "mathBlock", { expression: "" }),
+    isActive: (editor) => editor.isActive("mathBlock")
+  },
+  mathInline: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "mathInline", { expression: "" }),
+    isActive: (editor) => editor.isActive("mathInline")
+  },
+  diff: {
+    canExecute: () => true,
+    execute: (editor) => insertNode(editor, "diff", {
+      before: 'function hello() {\n  return "world"\n}',
+      after: "function hello(name) {\n  return `hello ${name}`\n}",
+      language: "js"
+    }),
+    isActive: (editor) => editor.isActive("diff")
   }
 };
 const _mentionItems = computed(
@@ -241,6 +343,7 @@ function onPlusClick(e, onClick) {
     <div
       v-if="!extensions.length"
       class="p-6 space-y-3"
+      :class="{ 'prose-variant': variant === 'prose' }"
     >
       <div class="h-8 w-64 animate-pulse rounded bg-elevated" />
       <div class="h-4 w-full animate-pulse rounded bg-elevated" />
@@ -250,6 +353,7 @@ function onPlusClick(e, onClick) {
 
     <UEditor
       v-else
+      :class="{ 'prose-variant': variant === 'prose' }"
       ref="editorRef"
       v-slot="{ editor }"
       v-model="model"
@@ -268,13 +372,45 @@ function onPlusClick(e, onClick) {
         :ready="ready"
       >
         <!-- ── Bubble toolbar (appears when text is selected) ─────────────── -->
+        <!-- 4 named slots are forwarded to consumers:
+             #link / #doc-link — defaulted to ALinkPopover / ADocLinkPopover
+             #create-child-doc / #send-to-chat — empty by default; app-defined -->
         <UEditorToolbar
           v-if="showToolbar"
           :editor="editor"
           :items="toolbarItems"
           layout="bubble"
           :should-show="({ view, state }) => view.hasFocus() && !state.selection.empty"
-        />
+        >
+          <template #link>
+            <slot
+              name="link"
+              :editor="editor"
+            >
+              <ALinkPopover :editor="editor" />
+            </slot>
+          </template>
+          <template #doc-link>
+            <slot
+              name="doc-link"
+              :editor="editor"
+            >
+              <ADocLinkPopover :editor="editor" />
+            </slot>
+          </template>
+          <template #create-child-doc>
+            <slot
+              name="create-child-doc"
+              :editor="editor"
+            />
+          </template>
+          <template #send-to-chat>
+            <slot
+              name="send-to-chat"
+              :editor="editor"
+            />
+          </template>
+        </UEditorToolbar>
 
         <!-- ── Slash command menu ──────────────────────────────────────────── -->
         <UEditorSuggestionMenu
@@ -289,6 +425,12 @@ function onPlusClick(e, onClick) {
           :items="emojiItems"
         />
 
+        <!-- ── Mention menu (`@` trigger) — users + docs + plugin providers ── -->
+        <UEditorMentionMenu
+          :editor="editor"
+          :items="mentionItems"
+        />
+
         <!-- ── Drag handle — plus button + grip dropdown ───────────────────── -->
         <UEditorDragHandle
           v-if="showDragHandle"
@@ -330,7 +472,10 @@ function onPlusClick(e, onClick) {
     </UEditor>
 
     <template #fallback>
-      <div class="p-6 space-y-3">
+      <div
+        class="p-6 space-y-3"
+        :class="{ 'prose-variant': variant === 'prose' }"
+      >
         <div class="h-8 w-64 animate-pulse rounded bg-elevated" />
         <div class="h-4 w-full animate-pulse rounded bg-elevated" />
         <div class="h-4 w-3/4 animate-pulse rounded bg-elevated" />
@@ -338,3 +483,7 @@ function onPlusClick(e, onClick) {
     </template>
   </ClientOnly>
 </template>
+
+<style scoped>
+.prose-variant :deep(.tiptap){color:var(--ui-text);font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:1.0625rem;line-height:1.75}.prose-variant :deep(.tiptap p){margin-bottom:1em;margin-top:0}.prose-variant :deep(.tiptap h1),.prose-variant :deep(.tiptap h2),.prose-variant :deep(.tiptap h3),.prose-variant :deep(.tiptap h4){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;letter-spacing:-.01em;line-height:1.25;margin-bottom:.5em;margin-top:1.75em}.prose-variant :deep(.tiptap h1){font-size:2rem;font-weight:700}.prose-variant :deep(.tiptap h2){font-size:1.5rem;font-weight:700}.prose-variant :deep(.tiptap h3){font-size:1.25rem;font-weight:600}.prose-variant :deep(.tiptap blockquote){border-left:3px solid var(--ui-border);color:var(--ui-text-muted);font-style:italic;margin-left:0;padding-left:1em}.prose-variant :deep(.tiptap ol),.prose-variant :deep(.tiptap ul){margin-bottom:1em;padding-left:1.5em}.prose-variant :deep(.tiptap .document-header){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:2.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1.5rem}
+</style>

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

@@ -23,6 +23,12 @@ type __VLS_Props = {
     parentType?: string;
     /** Override metaSchema directly instead of resolving from parentType */
     metaSchema?: MetaField[];
+    /**
+     * Layout variant. 'doc' (default) is the standard rich-text layout.
+     * 'prose' switches to a narrow readable measure with serif typography
+     * for long-form writing. Same TipTap engine and extensions.
+     */
+    variant?: 'doc' | 'prose';
 };
 type __VLS_ModelProps = {
     modelValue?: any;
@@ -37,11 +43,29 @@ declare var __VLS_18: {
         docId?: string | undefined;
     }[];
     ready: boolean;
+}, __VLS_27: {
+    editor: any;
+}, __VLS_35: {
+    editor: any;
+}, __VLS_43: {
+    editor: any;
+}, __VLS_46: {
+    editor: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_18) => any;
+} & {
+    link?: (props: typeof __VLS_27) => any;
+} & {
+    'doc-link'?: (props: typeof __VLS_35) => any;
+} & {
+    'create-child-doc'?: (props: typeof __VLS_43) => any;
+} & {
+    'send-to-chat'?: (props: typeof __VLS_46) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    editor: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     rename: (label: string) => any;
     update: (content: any) => any;
     "update:modelValue": (value: any) => any;
@@ -54,6 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onUpdateMeta?: ((patch: Partial<DocPageMeta>) => any) | undefined;
     onReady?: (() => any) | undefined;
 }>, {
+    variant: "doc" | "prose";
     contentType: "json" | "html" | "markdown";
     editable: boolean;
     showToolbar: boolean;

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

@@ -0,0 +1,46 @@
+type __VLS_Props = {
+    /** Open state (v-model). */
+    open?: boolean;
+    /** Display name override. Defaults to useAbracadabra().userName. */
+    userName?: string;
+    /** Public key override. Defaults to useAbracadabra().publicKeyB64. */
+    publicKey?: string | null;
+    /** Color override (CSS color or named color). */
+    color?: string;
+    /** Modal title. */
+    title?: string;
+    /** Whether the user can edit their display name inline. Default: true. */
+    editable?: boolean;
+};
+declare var __VLS_30: {}, __VLS_39: {
+    publicKey: string | null;
+    userName: string;
+}, __VLS_42: {}, __VLS_51: {};
+type __VLS_Slots = {} & {
+    subtitle?: (props: typeof __VLS_30) => any;
+} & {
+    content?: (props: typeof __VLS_39) => any;
+} & {
+    'actions-left'?: (props: typeof __VLS_42) => any;
+} & {
+    'actions-right'?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    rename: (name: string) => any;
+    "update:open": (open: boolean) => any;
+    "sign-out": () => any;
+    "show-recovery": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRename?: ((name: string) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onSign-out"?: (() => any) | undefined;
+    "onShow-recovery"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/AIdentityModal.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  userName: { type: String, required: false },
+  publicKey: { type: [String, null], required: false },
+  color: { type: String, required: false },
+  title: { type: String, required: false },
+  editable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:open", "rename", "sign-out", "show-recovery"]);
+const _abra = useAbracadabra();
+const _name = computed(() => props.userName ?? _abra.userName?.value ?? "");
+const _publicKey = computed(() => {
+  if (props.publicKey !== void 0) return props.publicKey;
+  return _abra.publicKeyB64?.value ?? null;
+});
+const open = computed({
+  get: () => !!props.open,
+  set: (v) => emit("update:open", v)
+});
+const nameDraft = ref("");
+const editing = ref(false);
+function startRename() {
+  if (props.editable === false) return;
+  nameDraft.value = _name.value;
+  editing.value = true;
+}
+function commitRename() {
+  const v = nameDraft.value.trim();
+  editing.value = false;
+  if (v && v !== _name.value) emit("rename", v);
+}
+const shortKey = computed(() => {
+  const k = _publicKey.value;
+  if (!k) return "\u2014";
+  return k.length > 18 ? `${k.slice(0, 8)}\u2026${k.slice(-8)}` : k;
+});
+const copied = ref(false);
+async function copyKey() {
+  if (!_publicKey.value) return;
+  try {
+    await navigator.clipboard.writeText(_publicKey.value);
+    copied.value = true;
+    setTimeout(() => {
+      copied.value = false;
+    }, 1500);
+  } catch (e) {
+    if (import.meta.dev) console.warn("[abracadabra] identity-modal: copy failed:", e);
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="title ?? 'Identity'"
+    :ui="{ content: 'sm:max-w-md' }"
+  >
+    <template #body>
+      <div class="flex flex-col items-center gap-4">
+        <UAvatar
+          :alt="_name || 'Anonymous'"
+          size="xl"
+          :style="color ? `background: ${color}` : ''"
+        />
+
+        <div class="flex flex-col items-center gap-1 w-full">
+          <div
+            v-if="!editing"
+            class="flex items-center gap-1"
+          >
+            <span class="text-lg font-semibold text-(--ui-text-highlighted)">{{ _name || "Anonymous" }}</span>
+            <UButton
+              v-if="editable !== false"
+              icon="i-lucide-pencil"
+              size="2xs"
+              variant="ghost"
+              color="neutral"
+              @click="startRename"
+            />
+          </div>
+          <UInput
+            v-else
+            v-model="nameDraft"
+            autofocus
+            size="sm"
+            placeholder="Display name"
+            class="w-56"
+            @blur="commitRename"
+            @keydown.enter.prevent="commitRename"
+            @keydown.esc.prevent="editing = false"
+          />
+          <slot name="subtitle" />
+        </div>
+
+        <div class="w-full flex flex-col gap-1">
+          <label class="text-xs font-medium text-(--ui-text-muted)">Public key</label>
+          <div class="flex items-center gap-2 px-3 py-2 rounded-md bg-(--ui-bg-elevated) border border-(--ui-border)">
+            <span class="font-mono text-xs text-(--ui-text-highlighted) flex-1 truncate">{{ shortKey }}</span>
+            <UButton
+              :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              :disabled="!_publicKey"
+              @click="copyKey"
+            />
+          </div>
+        </div>
+
+        <slot
+          name="content"
+          :public-key="_publicKey"
+          :user-name="_name"
+        />
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex items-center justify-between gap-2 w-full">
+        <div class="flex items-center gap-2">
+          <slot name="actions-left">
+            <UButton
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              icon="i-lucide-key-round"
+              label="Show recovery phrase"
+              @click="emit('show-recovery')"
+            />
+          </slot>
+        </div>
+        <div class="flex items-center gap-2">
+          <slot name="actions-right">
+            <UButton
+              variant="outline"
+              color="error"
+              size="sm"
+              icon="i-lucide-log-out"
+              label="Sign out"
+              @click="emit('sign-out')"
+            />
+            <UButton
+              variant="solid"
+              color="primary"
+              size="sm"
+              label="Done"
+              @click="open = false"
+            />
+          </slot>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>