@abraca/nuxt 1.9.1 → 2.0.0

package/dist/runtime/server/utils/rpcHandler.js

@@ -0,0 +1,74 @@
+import { RpcError as RpcErrorClass } from "@abraca/dabra";
+export function defineRpcHandler(def) {
+  return def;
+}
+export function defineRpcRunner(options) {
+  const name = options.name ?? "abracadabra:rpc";
+  return {
+    name,
+    async start(ctx) {
+      await options.onStart?.(ctx);
+      const unregisters = [];
+      const rpc = ctx.rootProvider.rpc;
+      for (const def of options.handlers) {
+        const wrapped = wrapHandler(def, name);
+        unregisters.push(rpc.handle(def.method, wrapped));
+        console.log(`[${name}] handler registered: ${def.method}`);
+      }
+      await rpc.ready();
+      return () => {
+        for (const u of unregisters) {
+          try {
+            u();
+          } catch {
+          }
+        }
+        console.log(`[${name}] unregistered ${options.handlers.length} handler(s)`);
+      };
+    }
+  };
+}
+function wrapHandler(def, runnerName) {
+  return function(rawArgs, ctx) {
+    let args = rawArgs;
+    if (def.schema) {
+      try {
+        args = def.schema.parse(rawArgs);
+      } catch (err) {
+        console.warn(`[${runnerName}] ${def.method} schema rejected:`, err instanceof Error ? err.message : err);
+        return Promise.reject(
+          new RpcErrorClass("SCHEMA", err instanceof Error ? err.message : "invalid args")
+        );
+      }
+    }
+    const t0 = Date.now();
+    const result = def.handler(args, ctx);
+    const r = result;
+    if (r && typeof r.next === "function" && typeof r[Symbol.asyncIterator] === "function") {
+      return wrapGeneratorLogging(r, t0, def.method, runnerName, ctx.id);
+    }
+    return Promise.resolve(result).then(
+      (out) => {
+        console.log(`[${runnerName}] ${def.method} ok in ${Date.now() - t0}ms (id=${ctx.id})`);
+        return out;
+      },
+      (err) => {
+        const code = err instanceof RpcErrorClass ? err.code : "INTERNAL";
+        console.warn(`[${runnerName}] ${def.method} failed (${code}, ${Date.now() - t0}ms): ${err instanceof Error ? err.message : err}`);
+        throw err;
+      }
+    );
+  };
+}
+async function* wrapGeneratorLogging(gen, t0, method, runnerName, id) {
+  try {
+    const final = yield* gen;
+    console.log(`[${runnerName}] ${method} ok in ${Date.now() - t0}ms (id=${id})`);
+    return final;
+  } catch (err) {
+    const code = err instanceof RpcErrorClass ? err.code : "INTERNAL";
+    console.warn(`[${runnerName}] ${method} failed (${code}, ${Date.now() - t0}ms): ${err instanceof Error ? err.message : err}`);
+    throw err;
+  }
+}
+export { RpcErrorClass as RpcError };

package/dist/runtime/server/utils/spaceManager.js

@@ -43,7 +43,6 @@ async function discoverSpaces() {
   }
   const currentIds = new Set(spaces.map((s) => s.id));
   for (const meta of spaces) {
-    if (meta.is_hub) continue;
     if (!_spaces.has(meta.id)) {
       await connectSpace(meta);
     }
@@ -57,14 +56,15 @@ async function discoverSpaces() {
 }
 async function connectSpace(meta) {
   if (!_baseCtx || _spaces.has(meta.id)) return;
-  console.log(`[space-manager] Connecting space: ${meta.name} (${meta.id})`);
+  const label = meta.label ?? "(unnamed)";
+  console.log(`[space-manager] Connecting space: ${label} (${meta.id})`);
   const Y = await import("yjs");
   const doc = new Y.Doc();
   const { AbracadabraProvider } = await import("@abraca/dabra");
   const provider = new AbracadabraProvider({
     client: _baseCtx.client,
     document: doc,
-    name: meta.doc_id,
+    name: meta.id,
     websocketProvider: _baseCtx.wsp,
     disableOfflineStore: true
   });
@@ -79,7 +79,7 @@ async function connectSpace(meta) {
   });
   const conn = {
     spaceId: meta.id,
-    docId: meta.doc_id,
+    docId: meta.id,
     meta,
     provider,
     doc,
@@ -87,15 +87,16 @@ async function connectSpace(meta) {
     loadedPlugins: /* @__PURE__ */ new Map()
   };
   _spaces.set(meta.id, conn);
-  console.log(`[space-manager] Space synced: ${meta.name}`);
+  console.log(`[space-manager] Space synced: ${label}`);
   const spaceCtx = buildSpaceContext(conn);
-  await startRunner(docTreeCacheRunner, spaceCtx, meta.doc_id);
+  await startRunner(docTreeCacheRunner, spaceCtx, meta.id);
   observeSpacePlugins(conn);
 }
 async function disconnectSpace(spaceId) {
   const conn = _spaces.get(spaceId);
   if (!conn) return;
-  console.log(`[space-manager] Disconnecting space: ${conn.meta.name} (${spaceId})`);
+  const label = conn.meta.label ?? "(unnamed)";
+  console.log(`[space-manager] Disconnecting space: ${label} (${spaceId})`);
   if (conn.pluginObserver) {
     try {
       const pluginsMap = conn.doc.getMap("space-plugins");
@@ -162,7 +163,7 @@ async function loadAndStartPlugin(conn, pluginName, url) {
       runnerKeys.push(key);
     }
     conn.loadedPlugins.set(pluginName, runnerKeys);
-    console.log(`[space-manager] Started plugin "${pluginName}" in space "${conn.meta.name}" (${plugin.serverRunners.length} runners)`);
+    console.log(`[space-manager] Started plugin "${pluginName}" in space "${conn.meta.label ?? "(unnamed)"}" (${plugin.serverRunners.length} runners)`);
   } catch (err) {
     console.error(`[space-manager] Failed to load plugin "${pluginName}" from ${url}:`, err);
   }
@@ -174,7 +175,7 @@ async function stopPluginRunners(conn, pluginName) {
     await stopRunner(key);
   }
   conn.loadedPlugins.delete(pluginName);
-  console.log(`[space-manager] Stopped plugin "${pluginName}" in space "${conn.meta.name}"`);
+  console.log(`[space-manager] Stopped plugin "${pluginName}" in space "${conn.meta.label ?? "(unnamed)"}"`);
 }
 function buildSpaceContext(conn) {
   return {

package/dist/runtime/types.d.ts

@@ -327,6 +327,13 @@ export interface AwarenessUser {
         name?: string;
         color?: string;
         avatar?: string;
+        /** Lucide icon name without the `i-lucide-` prefix (e.g. `coffee`).
+         *  Drives <AAvatar>'s status overlay and optional status-as-avatar
+         *  rendering. Empty / undefined = no status icon. */
+        statusIcon?: string;
+        /** Free-form short status text (≤ 80 chars). */
+        statusText?: string;
+        publicKey?: string;
     };
     /** Which document this user is currently viewing */
     docId?: string;
@@ -342,14 +349,11 @@ export interface AwarenessPeer extends AwarenessUser {
 }
 export interface SpaceMeta {
     id: string;
-    doc_id: string;
     name: string;
     description: string | null;
-    visibility: 'public' | 'private' | 'invite';
-    is_hub: boolean;
+    visibility: 'public' | 'private';
     owner_id: string | null;
-    created_at: number;
-    updated_at: number;
+    public_access?: string | null;
 }
 export interface InviteInfo {
     code: string;
@@ -364,14 +368,16 @@ export interface SavedServer {
     url: string;
     label: string;
     entryDocId?: string;
-    spacesEnabled?: boolean;
     cachedSpaces?: SpaceMeta[];
-    hubDocId?: string;
 }
 export interface ServerInfo {
     name?: string;
     version?: string;
-    index_doc_id?: string;
+    root_doc_id?: string;
+    access?: {
+        anonymous?: 'none' | 'observer';
+        authenticated?: 'none' | 'observer' | 'viewer' | 'editor';
+    };
 }
 export interface LogEntry {
     time: string;
@@ -418,6 +424,14 @@ export interface AbracadabraState {
     userColorName: Ref<string>;
     userNeutralColorName: Ref<string>;
     userCount: Ref<number>;
+    /** Lucide icon name (no `i-lucide-` prefix) for the user's status, or
+     *  empty string when no status is set. Broadcast via awareness. */
+    userStatusIcon: Ref<string>;
+    /** Free-form short status text (≤ 80 chars). Broadcast via awareness. */
+    userStatusText: Ref<string>;
+    /** Local-only preference: when true, <AAvatar> renders the status icon
+     *  in place of the avatar initials for the current user. */
+    userStatusAsAvatar: Ref<boolean>;
     publicKeyB64: Ref<string>;
     connectionError: Ref<string | null>;
     /** Explicit identity state machine — prefer over individual booleans. */
@@ -436,17 +450,56 @@ export interface AbracadabraState {
     currentServerUrl: Ref<string>;
     savedServers: Ref<SavedServer[]>;
     currentServerSpaces: Ref<SpaceMeta[]>;
-    currentServerSpacesEnabled: Ref<boolean>;
     pendingInviteCode: Ref<string | null>;
     registry: import('./plugin-registry').PluginRegistry;
     addLog: (message: string, type?: LogEntry['type']) => void;
     setUserName: (name: string) => void;
     setUserColor: (colorName: string) => void;
     setNeutralColor: (colorName: string) => void;
+    /** Set the Lucide icon used as the user's status (without the
+     *  `i-lucide-` prefix). Pass an empty string to clear. */
+    setUserStatusIcon: (icon: string) => void;
+    /** Set the user's status text. Pass empty string to clear. */
+    setUserStatusText: (text: string) => void;
+    /** Toggle whether the local user's status icon replaces their avatar. */
+    setUserStatusAsAvatar: (enabled: boolean) => void;
     setRequirePasskey: (enabled: boolean) => void;
     claimAccount: () => Promise<boolean | undefined>;
     loginWithHardware: (credentialIdHint?: string) => Promise<boolean>;
+    /** Sign in with username + password. Bounces the WS so the JWT picks up. */
+    loginWithPassword: (opts: {
+        username: string;
+        password: string;
+    }) => Promise<void>;
+    /** Register + auto-login with username + password. Optional invite code. */
+    registerWithPassword: (opts: {
+        username: string;
+        password: string;
+        email?: string;
+        displayName?: string;
+        inviteCode?: string;
+    }) => Promise<void>;
     logout: () => Promise<void>;
+    /** Revoke the current JWT server-side, then clear local identity. */
+    logoutServer: () => Promise<void>;
+    /** Revoke every JWT for this user, then clear local identity. */
+    logoutAll: () => Promise<void>;
+    /** Trigger a password-reset email. The endpoint always 202s to avoid leaking identifier existence. */
+    requestPasswordReset: (opts: {
+        identifier: string;
+    }) => Promise<void>;
+    /** Complete a password reset using the token from the reset email. */
+    confirmPasswordReset: (opts: {
+        token: string;
+        newPassword: string;
+    }) => Promise<void>;
+    /** Change the current user's password (requires the current one). */
+    changePassword: (opts: {
+        currentPassword: string;
+        newPassword: string;
+    }) => Promise<void>;
+    /** Add a password to a key-only account. 409s if one is already set. */
+    setPassword: (newPassword: string) => Promise<void>;
     reconnect: () => void;
     addServer: (url: string) => Promise<void>;
     removeServer: (url: string) => void;
@@ -459,7 +512,7 @@ export interface AbracadabraState {
         visibility?: SpaceMeta['visibility'];
         id?: string;
     }) => Promise<SpaceMeta>;
-    updateSpace: (id: string, opts: Partial<Pick<SpaceMeta, 'name' | 'description' | 'visibility' | 'is_hub'>>) => Promise<SpaceMeta>;
+    updateSpace: (id: string, opts: Partial<Pick<SpaceMeta, 'name' | 'description' | 'visibility'>>) => Promise<void>;
     deleteSpace: (id: string) => Promise<void>;
     redeemInvite: (code: string) => Promise<void>;
     createInvite: (opts?: {

package/dist/runtime/utils/awareRingStyle.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Single source of truth for the hover / focus / press box-shadow halo on
+ * every aware-* component wrapper. Applied to the host element via
+ * `:style="awareRingStyle({ hover, focus, press })"`.
+ *
+ * Returns `undefined` when no peer is interacting so the host doesn't paint
+ * an empty `box-shadow: none` (which would still defeat any inherent
+ * box-shadow on the underlying U* component).
+ *
+ * Layered intent:
+ *   - hover : 2 px solid at 50% alpha + outer 4 px wash at 18% alpha → readable on any background
+ *   - focus : 2 px solid full alpha → strong cursor-attention indicator
+ *   - press : 3 px solid + 6 px wash + 18 px outer glow → unmistakable tactile signal
+ */
+export interface AwareRingInput {
+    hover?: string | undefined;
+    focus?: string | undefined;
+    press?: string | undefined;
+    /** Override the wrapper's border-radius. Defaults to var(--ui-radius). */
+    radius?: string;
+}
+export declare function awareRingStyle(input: AwareRingInput): Record<string, string> | undefined;

package/dist/runtime/utils/awareRingStyle.js

@@ -0,0 +1,16 @@
+function withAlpha(color, pct) {
+  return `color-mix(in srgb, ${color} ${pct}%, transparent)`;
+}
+export function awareRingStyle(input) {
+  const { hover, focus, press, radius } = input;
+  if (!hover && !focus && !press) return void 0;
+  const layers = [];
+  if (hover) layers.push(`0 0 0 2px ${withAlpha(hover, 50)}`, `0 0 0 4px ${withAlpha(hover, 18)}`);
+  if (focus) layers.push(`0 0 0 2px ${focus}`);
+  if (press) layers.push(`0 0 0 3px ${press}`, `0 0 0 6px ${withAlpha(press, 33)}`, `0 0 18px 4px ${withAlpha(press, 33)}`);
+  return {
+    boxShadow: layers.join(", "),
+    borderRadius: radius ?? "var(--ui-radius, 0.375rem)",
+    transition: "box-shadow 100ms ease, filter 120ms ease"
+  };
+}

package/dist/runtime/utils/caretCoordinates.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Compute the pixel coordinates of a character offset inside an `<input>`
+ * or `<textarea>`, relative to the element's own padding box.
+ *
+ * Used to render per-peer caret labels at the right place inside text
+ * inputs (the `peers` mode of `<AInput>` / `<ATextarea>`).
+ *
+ * Implementation uses the well-known "mirror div" technique: copy every
+ * text-affecting style from the source element onto a hidden absolutely-
+ * positioned div, fill it with the input's text up to the caret position,
+ * then measure a 0-width marker that follows. This is the same approach
+ * used by `textarea-caret-position` and by every collaborative form
+ * library — it stays accurate across font, padding, line-height, RTL,
+ * wrapping, and tab characters.
+ */
+export interface CaretCoordinates {
+    top: number;
+    left: number;
+    height: number;
+}
+export declare function getCaretCoordinates(el: HTMLInputElement | HTMLTextAreaElement, position: number): CaretCoordinates;
+export interface SelectionRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/**
+ * Compute one or more pixel-aligned rectangles covering a character range
+ * inside an `<input>` or `<textarea>`. Used by `<APeerCaretLayer>` to
+ * highlight remote peers' selections (`start !== end`) the way Google Docs
+ * renders remote selections.
+ *
+ * Returns:
+ *   - empty array when start === end (caller renders the caret bar instead)
+ *   - one rect when the range fits on a single line
+ *   - up to three rects when the range wraps across multiple textarea lines
+ *     (first-line tail, full middle block, last-line head — same model used
+ *     by every browser's native selection painter)
+ */
+export declare function getSelectionRects(el: HTMLInputElement | HTMLTextAreaElement, start: number, end: number): SelectionRect[];

package/dist/runtime/utils/caretCoordinates.js

@@ -0,0 +1,126 @@
+const PROPERTIES = [
+  "direction",
+  "boxSizing",
+  "width",
+  "height",
+  "overflowX",
+  "overflowY",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderStyle",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "fontStretch",
+  "fontSize",
+  "fontSizeAdjust",
+  "lineHeight",
+  "fontFamily",
+  "textAlign",
+  "textTransform",
+  "textIndent",
+  "textDecoration",
+  "letterSpacing",
+  "wordSpacing",
+  "tabSize",
+  "MozTabSize"
+];
+export function getCaretCoordinates(el, position) {
+  const isInput = el.tagName === "INPUT";
+  const div = document.createElement("div");
+  div.id = "aa-caret-mirror";
+  document.body.appendChild(div);
+  const style = div.style;
+  const computed = window.getComputedStyle(el);
+  style.whiteSpace = isInput ? "nowrap" : "pre-wrap";
+  if (!isInput) style.wordWrap = "break-word";
+  style.position = "absolute";
+  style.visibility = "hidden";
+  style.top = "0";
+  style.left = "0";
+  style.overflow = "hidden";
+  for (const prop of PROPERTIES) {
+    style[prop] = computed[prop];
+  }
+  if (isInput) {
+    style.lineHeight = computed.height;
+    style.overflowX = "hidden";
+    style.overflowY = "hidden";
+  }
+  const value = el.value;
+  div.textContent = value.substring(0, position);
+  if (isInput) div.textContent = (div.textContent || "").replace(/\s/g, "\xA0");
+  const span = document.createElement("span");
+  span.textContent = value.substring(position) || ".";
+  div.appendChild(span);
+  const fontSize = parseInt(computed.fontSize || "14", 10);
+  const lineHeightParsed = parseInt(computed.lineHeight || "", 10);
+  const lineHeight = Number.isFinite(lineHeightParsed) && lineHeightParsed > 0 ? lineHeightParsed : Math.round(fontSize * 1.4);
+  const coords = {
+    top: span.offsetTop + parseInt(computed.borderTopWidth || "0", 10),
+    left: span.offsetLeft + parseInt(computed.borderLeftWidth || "0", 10),
+    height: lineHeight
+  };
+  if (isInput) {
+    const padTop = parseInt(computed.paddingTop || "0", 10);
+    const padBottom = parseInt(computed.paddingBottom || "0", 10);
+    const inner = el.clientHeight - padTop - padBottom;
+    const yOffset = padTop + Math.max(0, (inner - lineHeight) / 2);
+    coords.top = yOffset + parseInt(computed.borderTopWidth || "0", 10);
+  }
+  coords.left -= el.scrollLeft;
+  coords.top -= el.scrollTop;
+  document.body.removeChild(div);
+  return coords;
+}
+export function getSelectionRects(el, start, end) {
+  if (start === end) return [];
+  const lo = Math.min(start, end);
+  const hi = Math.max(start, end);
+  const a = getCaretCoordinates(el, lo);
+  const b = getCaretCoordinates(el, hi);
+  const computed = window.getComputedStyle(el);
+  const padL = parseInt(computed.paddingLeft || "0", 10);
+  const padR = parseInt(computed.paddingRight || "0", 10);
+  const borderL = parseInt(computed.borderLeftWidth || "0", 10);
+  const borderR = parseInt(computed.borderRightWidth || "0", 10);
+  const innerLeft = borderL + padL;
+  const innerRight = el.clientWidth - padR + borderL;
+  if (a.top === b.top) {
+    return [{
+      top: a.top,
+      left: a.left,
+      width: Math.max(0, b.left - a.left),
+      height: a.height
+    }];
+  }
+  const rects = [];
+  rects.push({
+    top: a.top,
+    left: a.left,
+    width: Math.max(0, innerRight - a.left),
+    height: a.height
+  });
+  const middleTop = a.top + a.height;
+  if (b.top > middleTop) {
+    rects.push({
+      top: middleTop,
+      left: innerLeft,
+      width: Math.max(0, innerRight - innerLeft),
+      height: b.top - middleTop
+    });
+  }
+  rects.push({
+    top: b.top,
+    left: innerLeft,
+    width: Math.max(0, b.left - innerLeft),
+    height: b.height
+  });
+  return rects;
+}

package/dist/runtime/utils/content.d.ts

@@ -13,7 +13,7 @@ export declare function mapContentNavigationItem(item: ContentNavigationItem, op
     label?: string;
     to?: string;
 };
-export declare function mapContentNavigation(navigation: ContentNavigationItem[], options?: MapContentNavigationItemOptions): (Omit<ContentNavigationItem, "path" | "title"> & {
+export declare function mapContentNavigation(navigation: ContentNavigationItem[], options?: MapContentNavigationItemOptions): (Omit<ContentNavigationItem, "title" | "path"> & {
     label?: string;
     to?: string;
 })[];

package/dist/runtime/utils/docTypes.js

@@ -1,4 +1,21 @@
 import { defineAsyncComponent } from "vue";
+import ADocLoadingSkeleton from "../components/renderers/ADocLoadingSkeleton.vue";
+import ADocLoadError from "../components/renderers/ADocLoadError.vue";
+function defineDocComponent(loader) {
+  return defineAsyncComponent({
+    loader,
+    loadingComponent: ADocLoadingSkeleton,
+    errorComponent: ADocLoadError,
+    delay: 200,
+    onError(_error, retry, fail, attempts) {
+      if (attempts <= 5) {
+        setTimeout(retry, attempts * 500);
+      } else {
+        fail();
+      }
+    }
+  });
+}
 const GEO_COLOR_PRESETS = ["#3b82f6", "#f97316", "#22c55e", "#ef4444", "#a855f7"];
 const GEO_ICON_OPTIONS = [
   "map-pin",
@@ -46,10 +63,24 @@ export const DOC_TYPES = {
     available: true,
     hasEditor: true,
     supportsChildren: true,
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/AEditor.vue")
     )
   },
+  prose: {
+    key: "prose",
+    label: "Prose",
+    icon: "i-lucide-pen-tool",
+    description: "Long-form prose with serif typography and a narrow readable measure",
+    available: true,
+    hasEditor: true,
+    supportsChildren: true,
+    childLabel: "Item",
+    defaultDepth: -1,
+    component: defineDocComponent(
+      () => import("../components/renderers/AProseRenderer.vue")
+    )
+  },
   kanban: {
     key: "kanban",
     label: "Kanban",
@@ -59,7 +90,7 @@ export const DOC_TYPES = {
     supportsChildren: true,
     childLabel: "Column",
     grandchildLabel: "Card",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/AKanbanRenderer.vue")
     )
   },
@@ -71,7 +102,7 @@ export const DOC_TYPES = {
     available: true,
     supportsChildren: true,
     childLabel: "Item",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/AGalleryRenderer.vue")
     )
   },
@@ -83,7 +114,7 @@ export const DOC_TYPES = {
     available: true,
     supportsChildren: true,
     childLabel: "Row",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/ATableRenderer.vue")
     )
   },
@@ -96,7 +127,7 @@ export const DOC_TYPES = {
     supportsChildren: true,
     childLabel: "Item",
     defaultDepth: -1,
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/AOutlineRenderer.vue")
     )
   },
@@ -108,7 +139,7 @@ export const DOC_TYPES = {
     available: true,
     supportsChildren: true,
     childLabel: "Event",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/ACalendarRenderer.vue")
     ),
     metaSchema: [
@@ -125,7 +156,7 @@ export const DOC_TYPES = {
     supportsChildren: true,
     childLabel: "Task",
     defaultDepth: -1,
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/AChecklistRenderer.vue")
     ),
     metaSchema: [
@@ -143,7 +174,7 @@ export const DOC_TYPES = {
     supportsChildren: true,
     childLabel: "Epic",
     grandchildLabel: "Task",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/ATimelineRenderer.vue")
     ),
     metaSchema: [
@@ -159,7 +190,7 @@ export const DOC_TYPES = {
     description: "Video call room with real-time audio and video",
     available: true,
     supportsChildren: false,
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/ACallRenderer.vue")
     )
   },
@@ -171,7 +202,7 @@ export const DOC_TYPES = {
     available: true,
     supportsChildren: true,
     childLabel: "Node",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/AGraphRenderer.vue")
     )
   },
@@ -183,7 +214,7 @@ export const DOC_TYPES = {
     available: true,
     supportsChildren: true,
     childLabel: "Item",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/ADashboardRenderer.vue")
     )
   },
@@ -195,7 +226,7 @@ export const DOC_TYPES = {
     available: true,
     supportsChildren: true,
     childLabel: "Location",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/AMapRenderer.vue")
     ),
     metaSchema: [
@@ -213,7 +244,7 @@ export const DOC_TYPES = {
     supportsChildren: true,
     childLabel: "Slide",
     grandchildLabel: "Sub-slide",
-    component: defineAsyncComponent(
+    component: defineDocComponent(
       () => import("../components/renderers/ASlidesRenderer.vue")
     ),
     metaSchema: [