@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -1,3 +1,8 @@
+export declare function labelToFilename(label: string): string;
+export declare function replaceFileMarkers(content: string, docZipPath: string, filePathMap: Map<string, {
+    zipPath: string;
+    mimeType: string;
+}>, format: 'md' | 'html'): string;
 export declare function useDocExport(): {
     exportDoc: (id: string, format: "markdown" | "html" | "zip") => Promise<void>;
     exportDocs: (ids: string[], format?: "md" | "html") => Promise<void>;

package/dist/runtime/composables/useDocExport.js

@@ -1,6 +1,8 @@
 import * as Y from "yjs";
 import { yjsToMarkdown, yjsToHtml } from "../utils/yjsConvert.js";
-function labelToFilename(label) {
+import { useToast } from "#imports";
+import { useAbracadabra } from "./useAbracadabra.js";
+export function labelToFilename(label) {
   return label.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "") || "untitled";
 }
 function triggerDownload(blob, filename) {
@@ -27,7 +29,7 @@ function collectFileBlocks(el, sourceDocId) {
   }
   return files;
 }
-function replaceFileMarkers(content, docZipPath, filePathMap, format) {
+export function replaceFileMarkers(content, docZipPath, filePathMap, format) {
   return content.replace(/<!--fileblock:([^:]+):(.+?)-->/g, (_, uploadId, filename) => {
     const entry = filePathMap.get(uploadId);
     if (!entry) return `<!-- file: ${filename} -->`;

package/dist/runtime/composables/useDocImport.js

@@ -1,11 +1,13 @@
 import { ref } from "vue";
 import * as Y from "yjs";
+import { useToast, useAbracadabra, useOfflineUploadQueue, useDocSlugs, navigateTo } from "#imports";
 import { populateYDocFromMarkdown, filenameToLabel, parseFrontmatter } from "../utils/markdownToYjs.js";
 const TEXT_EXTENSIONS = ["md", "mdx", "txt", "html", "htm"];
 export function useDocImport() {
   const toast = useToast();
   const { provider, client, isReady } = useAbracadabra();
   const { enqueue } = useOfflineUploadQueue();
+  const { getDocUrl } = useDocSlugs();
   const externalDragActive = ref(false);
   let externalDragCounter = 0;
   function getTreeMap() {
@@ -46,7 +48,7 @@ export function useDocImport() {
       const id = await importEntry(entry, parentId);
       if (firstId === null && id !== null) firstId = id;
     }
-    if (firstId) navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${firstId}`);
+    if (firstId) navigateTo(getDocUrl(firstId));
   }
   function importFiles(parentId = null) {
     const input = document.createElement("input");
@@ -59,7 +61,7 @@ export function useDocImport() {
         const id = await importFile(file, parentId);
         if (firstId === null) firstId = id;
       }
-      if (firstId) navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${firstId}`);
+      if (firstId) navigateTo(getDocUrl(firstId));
     };
     input.click();
   }
@@ -96,7 +98,7 @@ export function useDocImport() {
         const id = await importFile(file, currentParent);
         if (firstId === null) firstId = id;
       }
-      if (firstId) navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${firstId}`);
+      if (firstId) navigateTo(getDocUrl(firstId));
     };
     input.click();
   }

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

@@ -0,0 +1,22 @@
+/**
+ * Reactive document label lookups from the root Y.Doc's "doc-tree" Y.Map.
+ *
+ * Provides getLabel(docId) and getEntry(docId) without needing a full
+ * useChildTree instance. Useful for components that only need label display
+ * (e.g. drag ghosts, chat doc links, backlink lists).
+ *
+ * Ported from cou-sh/app/composables/useDocLabels.ts.
+ */
+import type { ShallowRef } from 'vue';
+import type * as Y from 'yjs';
+interface TreeEntryData {
+    label: string;
+    type?: string;
+    meta?: Record<string, any>;
+}
+export declare function useDocLabels(rootDoc: ShallowRef<Y.Doc | null>): {
+    getLabel: (docId: string) => string;
+    getEntry: (docId: string) => TreeEntryData | null;
+    treeData: Record<string, TreeEntryData>;
+};
+export {};

package/dist/runtime/composables/useDocLabels.js

@@ -0,0 +1,11 @@
+import { useSyncedMap } from "./useYDoc.js";
+export function useDocLabels(rootDoc) {
+  const treeMap = useSyncedMap(rootDoc, "doc-tree");
+  function getLabel(docId) {
+    return treeMap.data[docId]?.label ?? `${docId.slice(0, 8)}\u2026`;
+  }
+  function getEntry(docId) {
+    return treeMap.data[docId] ?? null;
+  }
+  return { getLabel, getEntry, treeData: treeMap.data };
+}

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

@@ -0,0 +1,18 @@
+export interface DocLinkPickResult {
+    id: string;
+    label: string;
+}
+/**
+ * Manages the state for the document picker dialog.
+ * Used by doc-embed extension and inline link insertion.
+ *
+ * The module does not ship a modal component — the consuming app provides
+ * one and wires it up to the `pending` state. When the app calls `resolve()`
+ * or `cancel()`, the promise returned by `pickDoc()` settles.
+ */
+export declare function useDocLinkPick(): {
+    isOpen: import("vue").Ref<boolean, boolean>;
+    pickDoc: () => Promise<DocLinkPickResult | null>;
+    resolve: (result: DocLinkPickResult) => void;
+    cancel: () => void;
+};

package/dist/runtime/composables/useDocLinkPick.js

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+export function useDocLinkPick() {
+  const isOpen = ref(false);
+  let _resolve = null;
+  function pickDoc() {
+    return new Promise((resolve2) => {
+      _resolve = resolve2;
+      isOpen.value = true;
+    });
+  }
+  function resolve(result) {
+    isOpen.value = false;
+    _resolve?.(result);
+    _resolve = null;
+  }
+  function cancel() {
+    isOpen.value = false;
+    _resolve?.(null);
+    _resolve = null;
+  }
+  return { isOpen, pickDoc, resolve, cancel };
+}

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

@@ -0,0 +1,20 @@
+/**
+ * useDocSeo — reactive SEO meta for an Abracadabra document.
+ *
+ * Sets useHead() title and useSeoMeta() og/twitter tags reactively
+ * from the doc-tree metadata and optional SSR render data.
+ */
+import { type MaybeRef } from 'vue';
+export interface DocSeoOptions {
+    /** Site name for og:site_name */
+    siteName?: string;
+    /** Fallback description when none can be extracted */
+    fallbackDescription?: string;
+    /** Title template, e.g. '%s - My Site'. Uses Nuxt's titleTemplate. */
+    titleTemplate?: string | ((title?: string) => string);
+}
+export declare function useDocSeo(docId: MaybeRef<string | null>, options?: DocSeoOptions): {
+    title: import("vue").ComputedRef<any>;
+    description: import("vue").ComputedRef<any>;
+    ogImage: import("vue").ComputedRef<any>;
+};

package/dist/runtime/composables/useDocSeo.js

@@ -0,0 +1,45 @@
+import { computed, unref } from "vue";
+import { useAbracadabra, useSyncedMap, useFetch, useHead, useSeoMeta } from "#imports";
+function extractFirstParagraph(html) {
+  if (!html) return void 0;
+  const pMatch = html.match(/<p[^>]*>(.*?)<\/p>/is);
+  const raw = pMatch?.[1] ?? html;
+  const text = raw.replace(/<[^>]+>/g, "").replace(/&[a-z]+;/gi, " ").trim();
+  if (!text) return void 0;
+  return text.length > 160 ? text.slice(0, 157) + "..." : text;
+}
+function extractFirstImage(html) {
+  if (!html) return void 0;
+  const match = html.match(/<img[^>]+src=["']([^"']+)["']/i);
+  return match?.[1] ?? void 0;
+}
+export function useDocSeo(docId, options) {
+  const abra = useAbracadabra();
+  const treeMap = useSyncedMap(abra.doc, "doc-tree");
+  const resolvedId = computed(() => unref(docId) ?? "");
+  const entry = computed(() => resolvedId.value ? treeMap.data[resolvedId.value] : void 0);
+  const { data: renderData } = useFetch(
+    () => resolvedId.value ? `/api/_abracadabra/render/${resolvedId.value}` : "/api/_abracadabra/render/_none",
+    { key: `seo-${resolvedId.value}`, server: true, lazy: true, immediate: !!resolvedId.value }
+  );
+  const title = computed(() => entry.value?.label ?? "Untitled");
+  const description = computed(
+    () => entry.value?.meta?.note ?? entry.value?.meta?.description ?? renderData.value?.description ?? extractFirstParagraph(renderData.value?.html) ?? options?.fallbackDescription ?? ""
+  );
+  const ogImage = computed(
+    () => entry.value?.meta?.coverImage ?? renderData.value?.ogImage ?? extractFirstImage(renderData.value?.html) ?? void 0
+  );
+  useHead({
+    title,
+    ...options?.titleTemplate ? { titleTemplate: options.titleTemplate } : {}
+  });
+  useSeoMeta({
+    ogTitle: title,
+    ogDescription: description,
+    ...options?.siteName ? { ogSiteName: options.siteName } : {},
+    ogType: "article",
+    twitterCard: "summary",
+    ...ogImage.value ? { ogImage } : {}
+  });
+  return { title, description, ogImage };
+}

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

@@ -0,0 +1,7 @@
+import { type SlugMap } from '../utils/slugify.js';
+export declare function useDocSlugs(): {
+    slugMap: import("vue").ComputedRef<SlugMap>;
+    getSlug: (docId: string) => string;
+    getDocId: (slug: string) => string | null;
+    getDocUrl: (docId: string) => string;
+};

package/dist/runtime/composables/useDocSlugs.js

@@ -0,0 +1,23 @@
+import { computed } from "vue";
+import { buildSlugMap } from "../utils/slugify.js";
+import { useRuntimeConfig } from "#imports";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { useSyncedMap } from "./useYDoc.js";
+export function useDocSlugs() {
+  const abra = useAbracadabra();
+  const config = useRuntimeConfig();
+  const docBasePath = config.public?.abracadabra?.docBasePath ?? "/doc";
+  const treeMap = useSyncedMap(abra.doc, "doc-tree");
+  const entries = computed(
+    () => Object.entries(treeMap.data).map(([id, entry]) => ({ id, ...entry }))
+  );
+  const slugMap = computed(() => buildSlugMap(entries.value));
+  const getSlug = (docId) => slugMap.value.idToSlug[docId] ?? docId;
+  const getDocId = (slug) => slugMap.value.slugToId[slug] ?? null;
+  const getDocUrl = (docId) => {
+    const slug = slugMap.value.idToSlug[docId];
+    const path = slug ?? docId;
+    return docBasePath ? `${docBasePath}/${path}` : `/${path}`;
+  };
+  return { slugMap, getSlug, getDocId, getDocUrl };
+}

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

@@ -0,0 +1,35 @@
+/**
+ * useDocTree — reactive access to the Abracadabra document tree.
+ *
+ * Wraps useSyncedMap on the root Y.Doc's 'doc-tree' map and provides
+ * computed navigation helpers: topLevelDocs, firstDocId, navigationItems.
+ * Navigation items use human-readable slug URLs when available.
+ */
+import { type ComputedRef } from 'vue';
+import type { TreeEntry } from '../types.js';
+import { useSyncedMap } from './useYDoc.js';
+export interface DocTreeReturn {
+    /** All tree entries with `id` populated from map keys */
+    entries: ComputedRef<(TreeEntry & {
+        trashed?: boolean;
+    })[]>;
+    /** Top-level docs (no parent, not trashed), sorted by order */
+    topLevelDocs: ComputedRef<(TreeEntry & {
+        trashed?: boolean;
+    })[]>;
+    /** ID of the first top-level document, or null */
+    firstDocId: ComputedRef<string | null>;
+    /** Look up a single tree entry by ID */
+    getEntry: (id: string) => TreeEntry | undefined;
+    /** Navigation items with resolved doc-type icons and slug URLs */
+    navigationItems: ComputedRef<{
+        id: string;
+        label: string;
+        to: string;
+        icon: string;
+        type: string;
+    }[]>;
+    /** Raw useSyncedMap return for advanced usage */
+    raw: ReturnType<typeof useSyncedMap>;
+}
+export declare function useDocTree(): DocTreeReturn;

package/dist/runtime/composables/useDocTree.js

@@ -0,0 +1,39 @@
+import { computed } from "vue";
+import { resolveDocType } from "../utils/docTypes.js";
+import { buildSlugMap } from "../utils/slugify.js";
+import { useRuntimeConfig } from "#imports";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { useSyncedMap } from "./useYDoc.js";
+export function useDocTree() {
+  const abra = useAbracadabra();
+  const config = useRuntimeConfig();
+  const docBasePath = config.public?.abracadabra?.docBasePath ?? "/doc";
+  const treeMap = useSyncedMap(abra.doc, "doc-tree");
+  const spaceDocId = abra.spaceDocId;
+  const entries = computed(
+    () => Object.entries(treeMap.data).filter(([id]) => id !== spaceDocId.value).map(([id, entry]) => ({ id, ...entry }))
+  );
+  const topLevelDocs = computed(
+    () => entries.value.filter((e) => (!e.parentId || e.parentId === spaceDocId.value) && !e.trashed).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+  );
+  const firstDocId = computed(() => topLevelDocs.value[0]?.id ?? null);
+  const getEntry = (id) => {
+    const raw = treeMap.data[id];
+    return raw ? { id, ...raw } : void 0;
+  };
+  const slugMap = computed(() => buildSlugMap(entries.value));
+  const navigationItems = computed(
+    () => topLevelDocs.value.map((e) => {
+      const slug = slugMap.value.idToSlug[e.id];
+      const path = slug ?? e.id;
+      return {
+        id: e.id,
+        label: e.label || "Untitled",
+        to: docBasePath ? `${docBasePath}/${path}` : `/${path}`,
+        icon: resolveDocType(e.type).icon,
+        type: e.type ?? "doc"
+      };
+    })
+  );
+  return { entries, topLevelDocs, firstDocId, getEntry, navigationItems, raw: treeMap };
+}

package/dist/runtime/composables/useEditor.js

@@ -1,5 +1,6 @@
 import { ref, shallowRef, watch, onUnmounted } from "vue";
 import { XmlElement } from "yjs";
+import { useNuxtApp } from "#imports";
 export function useEditor(options) {
   const { childProvider, extraExtensions = [] } = options;
   const { userName, userColor, publicKeyB64, registry } = useNuxtApp().$abracadabra;

package/dist/runtime/composables/useEditorDragHandle.js

@@ -1,4 +1,6 @@
 import { ref } from "vue";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { useFileBlobStore } from "./useFileBlobStore.js";
 function upperFirst(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
@@ -55,7 +57,8 @@ export function useEditorDragHandle(pageConfig) {
               a.href = url;
               a.download = filename;
               a.click();
-            } catch {
+            } catch (e) {
+              if (import.meta.dev) console.warn("[abracadabra] drag-handle: failed to download file:", e);
             }
           }
         }

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

@@ -0,0 +1,22 @@
+/**
+ * Editor emoji composable — provides a filtered list of GitHub emoji items
+ * for use in suggestion menus or emoji pickers.
+ *
+ * Requires `@tiptap/extension-emoji` as a peer dependency. If the extension
+ * is not installed, returns an empty items array.
+ *
+ * Ported from cou-sh/app/composables/useEditorEmojis.ts.
+ */
+export interface EmojiItem {
+    name: string;
+    shortcodes: string[];
+    tags: string[];
+    emoji?: string;
+    fallbackImage?: string;
+}
+export declare function useEditorEmojis(): {
+    items: EmojiItem[];
+    search: (query: string, limit?: number) => EmojiItem[];
+    recentItems: () => EmojiItem[];
+    markUsed: (name: string) => void;
+};

package/dist/runtime/composables/useEditorEmojis.js

@@ -0,0 +1,57 @@
+let cachedItems = null;
+function loadEmojis() {
+  if (cachedItems) return cachedItems;
+  try {
+    const { gitHubEmojis } = require("@tiptap/extension-emoji");
+    cachedItems = gitHubEmojis.filter(
+      (emoji) => !emoji.name.startsWith("regional_indicator_")
+    );
+  } catch {
+    cachedItems = [];
+  }
+  return cachedItems;
+}
+const RECENT_KEY = "abracadabra_recent_emojis";
+const MAX_RECENT = 16;
+function getRecentNames() {
+  if (typeof localStorage === "undefined") return [];
+  try {
+    return JSON.parse(localStorage.getItem(RECENT_KEY) || "[]");
+  } catch {
+    return [];
+  }
+}
+function addRecent(name) {
+  if (typeof localStorage === "undefined") return;
+  const recent = getRecentNames().filter((n) => n !== name);
+  recent.unshift(name);
+  if (recent.length > MAX_RECENT) recent.length = MAX_RECENT;
+  localStorage.setItem(RECENT_KEY, JSON.stringify(recent));
+}
+export function useEditorEmojis() {
+  const items = loadEmojis();
+  const itemsByName = new Map(items.map((e) => [e.name, e]));
+  function recentItems() {
+    return getRecentNames().map((name) => itemsByName.get(name)).filter((e) => !!e);
+  }
+  function search(query, limit = 20) {
+    if (!query) {
+      const recent = recentItems();
+      if (recent.length) return recent.slice(0, limit);
+      return items.slice(0, limit);
+    }
+    const q = query.toLowerCase();
+    return items.filter(
+      (e) => e.name.includes(q) || e.shortcodes?.some((s) => s.includes(q)) || e.tags?.some((t) => t.includes(q))
+    ).slice(0, limit);
+  }
+  function markUsed(name) {
+    addRecent(name);
+  }
+  return {
+    items,
+    search,
+    recentItems,
+    markUsed
+  };
+}

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

@@ -2,27 +2,34 @@
  * useEditorMentions
  *
  * Returns mention items for UEditorMentionMenu.
- * Combines awareness users (currently online) with plugin mention providers.
+ * Combines awareness users (currently online), document names from the tree,
+ * and plugin mention providers.
  *
  * Usage:
- *   const { items } = useEditorMentions()
+ *   const { items, filteredItems } = useEditorMentions()
  *   <UEditorMentionMenu :editor="editor" :items="items" />
  */
 export interface MentionItem {
     label: string;
     value: string;
+    type?: 'user' | 'doc';
+    docId?: string;
     icon?: string;
     avatar?: {
         alt: string;
         style?: Record<string, string>;
     };
+    group?: string;
 }
 export interface UseEditorMentionsOptions {
     /** Additional static items */
     extraItems?: MentionItem[];
     /** Doc ID for provider context */
     docId?: string;
+    /** Include document mentions from tree (default: true) */
+    includeDocuments?: boolean;
 }
 export declare function useEditorMentions(options?: UseEditorMentionsOptions): {
-    items: any;
+    items: import("vue").ComputedRef<MentionItem[]>;
+    filteredItems: (query: string) => MentionItem[];
 };

package/dist/runtime/composables/useEditorMentions.js

@@ -1,17 +1,27 @@
+import { computed } from "vue";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { usePluginRegistry } from "./usePluginRegistry.js";
+import { useSyncedMap } from "./useYDoc.js";
 export function useEditorMentions(options = {}) {
-  const { provider } = useAbracadabra();
+  const { provider, doc } = useAbracadabra();
   const registry = usePluginRegistry();
+  const includeDocuments = options.includeDocuments !== false;
+  const treeMap = includeDocuments ? useSyncedMap(doc, "doc-tree") : null;
   const items = computed(() => {
     const result = [];
     if (provider.value) {
       try {
         const states = provider.value.awareness?.states ? [...provider.value.awareness.states.values()] : [];
+        const seen = /* @__PURE__ */ new Set();
         for (const state of states) {
           const user = state.user;
-          if (user?.name) {
+          if (user?.name && !seen.has(user.name)) {
+            seen.add(user.name);
             result.push({
               label: user.name,
               value: user.name,
+              type: "user",
+              group: "People",
               avatar: {
                 alt: user.name,
                 style: user.color ? { borderColor: user.color, borderWidth: "2px", borderStyle: "solid" } : void 0
@@ -19,7 +29,21 @@ export function useEditorMentions(options = {}) {
             });
           }
         }
-      } catch {
+      } catch (e) {
+        if (import.meta.dev) console.warn("[abracadabra] mentions: failed to read awareness states:", e);
+      }
+    }
+    if (treeMap) {
+      for (const [id, entry] of Object.entries(treeMap.data)) {
+        if (!entry.label) continue;
+        result.push({
+          label: entry.label,
+          value: id,
+          type: "doc",
+          docId: id,
+          group: "Documents",
+          icon: entry.meta?.icon ? `i-lucide-${entry.meta.icon}` : "i-lucide-file-text"
+        });
       }
     }
     try {
@@ -29,12 +53,18 @@ export function useEditorMentions(options = {}) {
           result.push(...p.staticItems);
         }
       }
-    } catch {
+    } catch (e) {
+      if (import.meta.dev) console.warn("[abracadabra] mentions: failed to load plugin mention providers:", e);
     }
     if (options.extraItems?.length) {
       result.push(...options.extraItems);
     }
     return result;
   });
-  return { items };
+  function filteredItems(query) {
+    if (!query) return items.value;
+    const q = query.toLowerCase();
+    return items.value.filter((item) => item.label.toLowerCase().includes(q));
+  }
+  return { items, filteredItems };
 }

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

@@ -14,5 +14,6 @@ export interface UseEditorSuggestionsOptions {
     onlyPlugins?: boolean;
 }
 export declare function useEditorSuggestions(options?: UseEditorSuggestionsOptions): {
-    items: any;
+    items: import("vue").ComputedRef<any[][]>;
+    propertiesOnlyItems: import("vue").ComputedRef<any[][]>;
 };

package/dist/runtime/composables/useEditorSuggestions.js

@@ -1,4 +1,6 @@
+import { computed } from "vue";
 import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions.js";
+import { usePluginRegistry } from "./usePluginRegistry.js";
 export function useEditorSuggestions(options = {}) {
   const registry = usePluginRegistry();
   const items = computed(() => {
@@ -6,21 +8,24 @@ export function useEditorSuggestions(options = {}) {
     const base = options.onlyPlugins ? [] : [
       [
         { type: "label", label: "Style" },
-        { kind: "paragraph", label: "Paragraph", icon: "i-lucide-type" },
-        { kind: "heading", level: 1, label: "Heading 1", icon: "i-lucide-heading-1" },
-        { kind: "heading", level: 2, label: "Heading 2", icon: "i-lucide-heading-2" },
-        { kind: "heading", level: 3, label: "Heading 3", icon: "i-lucide-heading-3" },
-        { kind: "bulletList", label: "Bullet List", icon: "i-lucide-list" },
-        { kind: "orderedList", label: "Numbered List", icon: "i-lucide-list-ordered" },
-        { kind: "taskList", label: "Task List", icon: "i-lucide-list-check" },
-        { kind: "blockquote", label: "Blockquote", icon: "i-lucide-text-quote" },
-        { kind: "codeBlock", label: "Code Block", icon: "i-lucide-square-code" }
+        { kind: "paragraph", label: "Paragraph", icon: "i-lucide-type", description: "Plain text block", keywords: ["text", "body"] },
+        { kind: "heading", level: 1, label: "Heading 1", icon: "i-lucide-heading-1", description: "Large section heading", keywords: ["h1", "title"] },
+        { kind: "heading", level: 2, label: "Heading 2", icon: "i-lucide-heading-2", description: "Medium section heading", keywords: ["h2", "subtitle"] },
+        { kind: "heading", level: 3, label: "Heading 3", icon: "i-lucide-heading-3", description: "Small section heading", keywords: ["h3"] },
+        { kind: "bulletList", label: "Bullet List", icon: "i-lucide-list", description: "Unordered list", keywords: ["ul", "bullets"] },
+        { kind: "orderedList", label: "Numbered List", icon: "i-lucide-list-ordered", description: "Numbered list", keywords: ["ol", "numbers"] },
+        { kind: "taskList", label: "Task List", icon: "i-lucide-list-check", description: "Checkable task list", keywords: ["todo", "checkbox", "checklist"] },
+        { kind: "blockquote", label: "Blockquote", icon: "i-lucide-text-quote", description: "Quoted text block", keywords: ["quote", "cite"] },
+        { kind: "codeBlock", label: "Code Block", icon: "i-lucide-square-code", description: "Code with syntax highlighting", keywords: ["code", "syntax", "pre"] }
       ],
       [
         { type: "label", label: "Insert" },
-        { kind: "mention", label: "Mention", icon: "i-lucide-at-sign" },
-        { kind: "table", label: "Table", icon: "i-lucide-table" },
-        { kind: "horizontalRule", label: "Divider", icon: "i-lucide-minus" }
+        { kind: "mention", label: "Mention", icon: "i-lucide-at-sign", description: "Mention a person or document", keywords: ["user", "people", "tag"] },
+        { kind: "table", label: "Table", icon: "i-lucide-table", description: "Insert a table", keywords: ["grid", "rows", "columns"] },
+        { kind: "horizontalRule", label: "Divider", icon: "i-lucide-minus", description: "Visual separator", keywords: ["line", "separator", "hr"] },
+        { kind: "docEmbed", label: "Document Embed", icon: "i-lucide-file-symlink", description: "Embed another document", keywords: ["embed", "include", "transclusion", "link"] },
+        { kind: "imageUpload", label: "Image", icon: "i-lucide-image", description: "Upload an image", keywords: ["picture", "photo", "upload", "img"] },
+        { kind: "fileUpload", label: "File", icon: "i-lucide-paperclip", description: "Upload a file attachment", keywords: ["attachment", "upload", "document"] }
       ],
       [
         { type: "label", label: "Properties" },
@@ -33,13 +38,16 @@ export function useEditorSuggestions(options = {}) {
       ],
       [
         { type: "label", label: "Components" },
-        { kind: "callout", label: "Callout", icon: "i-lucide-info" },
-        { kind: "collapsible", label: "Collapsible", icon: "i-lucide-chevron-down" },
-        { kind: "accordion", label: "Accordion", icon: "i-lucide-chevrons-down-up" },
-        { kind: "tabs", label: "Tabs", icon: "i-lucide-panel-top" },
-        { kind: "card", label: "Card", icon: "i-lucide-square" },
-        { kind: "steps", label: "Steps", icon: "i-lucide-list-ordered" },
-        { kind: "codeGroup", label: "Code Group", icon: "i-lucide-folder-code" }
+        { kind: "callout", label: "Callout", icon: "i-lucide-info", description: "Highlighted info box", keywords: ["alert", "note", "warning", "tip"] },
+        { kind: "collapsible", label: "Collapsible", icon: "i-lucide-chevron-down", description: "Expandable content section", keywords: ["toggle", "expand", "collapse", "details"] },
+        { kind: "accordion", label: "Accordion", icon: "i-lucide-chevrons-down-up", description: "Multiple collapsible sections", keywords: ["faq", "expand"] },
+        { kind: "tabs", label: "Tabs", icon: "i-lucide-panel-top", description: "Tabbed content panels", keywords: ["switch", "panels"] },
+        { kind: "card", label: "Card", icon: "i-lucide-square", description: "Bordered content card", keywords: ["box", "container", "panel"] },
+        { kind: "steps", label: "Steps", icon: "i-lucide-list-ordered", description: "Numbered step-by-step guide", keywords: ["guide", "tutorial", "process"] },
+        { kind: "codeGroup", label: "Code Group", icon: "i-lucide-folder-code", description: "Tabbed code blocks", keywords: ["code", "multi", "language"] },
+        { kind: "codePreview", label: "Code Preview", icon: "i-lucide-eye", description: "Live code with preview", keywords: ["demo", "preview", "live"] },
+        { kind: "codeTree", label: "Code Tree", icon: "i-lucide-folder-tree", description: "File tree visualization", keywords: ["files", "directory", "structure"] },
+        { kind: "fieldGroup", label: "Field Group", icon: "i-lucide-rows-3", description: "Group of form fields", keywords: ["form", "fields", "properties", "meta"] }
       ]
     ];
     try {
@@ -47,9 +55,16 @@ export function useEditorSuggestions(options = {}) {
       for (const group of pluginGroups) {
         if (group.items?.length) base.push(group.items);
       }
-    } catch {
+    } catch (e) {
+      if (import.meta.dev) console.warn("[abracadabra] suggestions: failed to load plugin suggestions:", e);
     }
     return base;
   });
-  return { items };
+  const propertiesOnlyItems = computed(() => {
+    const group = items.value.find(
+      (g) => g[0]?.type === "label" && g[0]?.label === "Properties"
+    );
+    return group ? [group] : [];
+  });
+  return { items, propertiesOnlyItems };
 }

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

@@ -18,5 +18,5 @@ export interface UseEditorToolbarOptions {
     extraItems?: any[][];
 }
 export declare function useEditorToolbar(options?: UseEditorToolbarOptions): {
-    items: any;
+    items: import("vue").ComputedRef<any[][]>;
 };