@abraca/nuxt 1.8.2 → 2.0.0

package/dist/runtime/theme/content/content-toc.js

@@ -0,0 +1,94 @@
+import { themeOptions } from "./_shared.js";
+const contentToc = (options) => ({
+  slots: {
+    root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
+    container: "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
+    top: "",
+    bottom: "hidden lg:flex lg:flex-col gap-6",
+    trigger: "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
+    title: "truncate",
+    trailing: "ms-auto inline-flex gap-1.5 items-center",
+    trailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
+    content: "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
+    list: "min-w-0",
+    listWithChildren: "ms-3",
+    item: "min-w-0",
+    itemWithChildren: "",
+    link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
+    linkText: "truncate",
+    indicator: "",
+    indicatorLine: "",
+    indicatorActive: ""
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    highlightColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        indicatorActive: `bg-${color}`
+      }])),
+      neutral: {
+        indicatorActive: "bg-inverted"
+      }
+    },
+    active: {
+      false: {
+        link: ["text-muted hover:text-default", options.theme.transitions && "transition-colors"]
+      }
+    },
+    highlight: {
+      true: ""
+    },
+    highlightVariant: {
+      straight: "",
+      circuit: ""
+    },
+    body: {
+      true: {
+        bottom: "mt-6"
+      }
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    active: true,
+    class: {
+      link: `text-${color}`
+    }
+  })), {
+    color: "neutral",
+    active: true,
+    class: {
+      link: "text-highlighted"
+    }
+  }, {
+    highlight: true,
+    highlightVariant: "straight",
+    class: {
+      list: "ms-2.5 ps-4 border-s border-default",
+      item: "-ms-px",
+      indicator: "absolute ms-2.5 transition-[translate,height] duration-200 h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full",
+      indicatorLine: "hidden",
+      indicatorActive: "w-full h-full"
+    }
+  }, {
+    highlight: true,
+    highlightVariant: "circuit",
+    class: {
+      list: "ps-6.5",
+      item: "-ms-px",
+      itemWithChildren: "ps-px",
+      indicator: "absolute ms-2.5 start-0 top-0 rtl:-scale-x-100",
+      indicatorLine: "absolute inset-0 bg-(--ui-border)",
+      indicatorActive: "absolute w-full h-(--indicator-size) translate-y-(--indicator-position) transition-[translate,height] duration-200 ease-out"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    highlightColor: "primary",
+    highlightVariant: "straight"
+  }
+});
+export default contentToc(themeOptions);

package/dist/runtime/theme/content/index.d.ts

@@ -0,0 +1,5 @@
+export { default as contentNavigation } from './content-navigation.js';
+export { default as contentSearch } from './content-search.js';
+export { default as contentSearchButton } from './content-search-button.js';
+export { default as contentSurround } from './content-surround.js';
+export { default as contentToc } from './content-toc.js';

package/dist/runtime/theme/content/index.js

@@ -0,0 +1,5 @@
+export { default as contentNavigation } from "./content-navigation.js";
+export { default as contentSearch } from "./content-search.js";
+export { default as contentSearchButton } from "./content-search-button.js";
+export { default as contentSurround } from "./content-surround.js";
+export { default as contentToc } from "./content-toc.js";

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

@@ -0,0 +1,19 @@
+export interface ContentNavigationItem {
+    title?: string;
+    path?: string;
+    icon?: string;
+    children?: ContentNavigationItem[];
+    [key: string]: any;
+}
+export interface MapContentNavigationItemOptions {
+    labelAttribute?: string;
+    deep?: number;
+}
+export declare function mapContentNavigationItem(item: ContentNavigationItem, options?: MapContentNavigationItemOptions, currentDepth?: number): Omit<ContentNavigationItem, 'title' | 'path'> & {
+    label?: string;
+    to?: string;
+};
+export declare function mapContentNavigation(navigation: ContentNavigationItem[], options?: MapContentNavigationItemOptions): (Omit<ContentNavigationItem, "title" | "path"> & {
+    label?: string;
+    to?: string;
+})[];

package/dist/runtime/utils/content.js

@@ -0,0 +1,23 @@
+export function mapContentNavigationItem(item, options, currentDepth = 0) {
+  const navMap = {
+    [options?.labelAttribute || "title"]: "label",
+    path: "to"
+  };
+  const link = Object.keys(item).reduce((acc, key) => {
+    if (item[key]) {
+      const mappedKey = navMap[key] || key;
+      acc[mappedKey] = item[key];
+    }
+    return acc;
+  }, {});
+  const shouldRecurse = typeof options?.deep === "undefined" || currentDepth < options.deep;
+  if (shouldRecurse && Array.isArray(item.children)) {
+    link.children = item.children.map((child) => mapContentNavigationItem(child, options, currentDepth + 1));
+  } else {
+    link.children = [];
+  }
+  return link;
+}
+export function mapContentNavigation(navigation, options) {
+  return navigation.map((item) => mapContentNavigationItem(item, options));
+}

package/dist/runtime/utils/docReferenceEdges.js

@@ -14,7 +14,7 @@ export function scanDocReferences(fragment) {
           }
         }
       } else if (child instanceof Y.XmlElement) {
-        if (child.nodeName === "docEmbed") {
+        if (child.nodeName === "docEmbed" || child.nodeName === "docLink") {
           const docId = child.getAttribute("docId");
           if (docId) refs.push(docId);
         }

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: [