@abraca/nuxt 2.26.0 → 2.27.0

package/dist/module.d.mts

@@ -32,6 +32,7 @@ declare module '@nuxt/schema' {
             entryDocId: string;
             pinServer: boolean;
             persistAuth: boolean;
+            deferConnect: boolean;
             authStorageKey: string;
             disabledBuiltins: string[];
             features: {
@@ -136,6 +137,20 @@ interface ModuleOptions {
      * Default: true.
      */
     persistAuth?: boolean;
+    /**
+     * Defer the SDK import + provider connection (auth challenge, WebSocket,
+     * initial sync) until after the app's first paint, instead of starting it
+     * during plugin setup. The heavy `@abraca/dabra` chunk and the network
+     * round-trips then stop competing with above-the-fold content for the main
+     * thread and the (often slow, mobile) network — a large LCP win on
+     * content-first sites that don't need live data above the fold.
+     *
+     * Live features (awareness, sync, chat) come online a beat after first
+     * paint rather than during it. Recommended for marketing / landing / docs
+     * sites; leave OFF for editor-first apps (dashboards) that want the provider
+     * connected as early as possible. Default: false.
+     */
+    deferConnect?: boolean;
     /**
      * localStorage key used by AbracadabraClient for token persistence.
      * Default: 'abracadabra:auth'

package/dist/module.json

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

package/dist/module.mjs

@@ -21,6 +21,7 @@ const module$1 = defineNuxtModule({
     url: process.env.ABRACADABRA_URL ?? "https://abra.cou.sh",
     pinServer: false,
     persistAuth: true,
+    deferConnect: false,
     authStorageKey: "abracadabra:auth",
     disabledBuiltins: [],
     features: {
@@ -90,6 +91,7 @@ const module$1 = defineNuxtModule({
           entryDocId: options.entryDocId ?? "",
           pinServer: options.pinServer ?? false,
           persistAuth: options.persistAuth,
+          deferConnect: options.deferConnect ?? false,
           authStorageKey: options.authStorageKey,
           disabledBuiltins: options.disabledBuiltins,
           features: options.features,

package/dist/runtime/components/ADocumentTree.vue

@@ -1189,36 +1189,40 @@ defineExpose({
 
     <ClientOnly>
       <template v-if="isReady">
-        <UEmpty
-          v-if="flatItems.length === 0"
-          icon="i-lucide-file-text"
-          title="No pages"
-          description="Create your first page."
-          size="sm"
-        />
-
-        <TransitionGroup
-          v-else
-          name="tree-item"
-          tag="div"
-          :class="['px-1', { 'is-dragging': dragId }]"
+        <div
+          ref="scrollParent"
+          class="flex-1 min-h-0 overflow-y-auto px-1"
+          :class="{ 'is-dragging': dragId }"
           @dragover.prevent
           @dragleave="onListDragLeave"
         >
+          <UEmpty
+            v-if="flatItems.length === 0"
+            icon="i-lucide-file-text"
+            title="No pages"
+            description="Create your first page."
+            size="sm"
+          />
+
           <div
-            v-for="(item, idx) in flatItems"
-            :key="item.id"
-            class="tree-item relative"
-            :class="[
+            v-else
+            :style="{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative', width: '100%' }"
+          >
+            <div
+              v-for="{ vRow, item, idx } in virtualRows"
+              :key="item.id"
+              class="tree-item absolute left-0 right-0"
+              :class="[
   dragId === item.id && !item.isTrashRoot ? 'opacity-30' : '',
   focusedIndex === idx ? 'ring-1 ring-inset ring-(--ui-primary)/50 rounded-sm' : ''
 ]"
-            :data-focused="focusedIndex === idx ? '' : void 0"
-            role="treeitem"
-            @dragover="onDragOver($event, item)"
-            @drop.stop="onDrop"
-            @click="focusedIndex = idx"
-          >
+              :data-focused="focusedIndex === idx ? '' : void 0"
+              :style="{ transform: `translateY(${vRow.start}px)`, height: `${vRow.size}px` }"
+              role="treeitem"
+              @dragover="onDragOver($event, item)"
+              @drop.stop="onDrop"
+              @click="focusedIndex = idx"
+            >
             <!-- Drop indicator: line BEFORE -->
             <div
               v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'before' && !item.isTrashRoot"
@@ -1541,8 +1545,9 @@ defineExpose({
                 />
               </UDropdownMenu>
             </div>
+            </div>
           </div>
-        </TransitionGroup>
+        </div>
 
         <!-- External drag hint bar -->
         <Transition name="drop-hint">

package/dist/runtime/components/aware/AMedia.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    total: boolean;
     controls: boolean;
+    total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/AMedia.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    total: boolean;
     controls: boolean;
+    total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/plugin-abracadabra.client.js

@@ -210,6 +210,7 @@ export default defineNuxtPlugin({
     const debug = abraConfig.debug ?? false;
     const configEntryDocId = abraConfig.entryDocId || void 0;
     const pinServer = abraConfig.pinServer ?? false;
+    const deferConnect = abraConfig.deferConnect ?? false;
     const registry = new PluginRegistry();
     const storedDisabledBuiltins = JSON.parse(
       localStorage.getItem(STORAGE_KEY_DISABLED_BUILTINS) ?? "[]"
@@ -1512,7 +1513,26 @@ export default defineNuxtPlugin({
       initialUrl = currentServerUrl.value || savedServers.value[0]?.url || defaultUrl;
     }
     if (initialUrl !== currentServerUrl.value) currentServerUrl.value = initialUrl;
-    _initPromise = init(initialUrl);
+    if (deferConnect) {
+      _initPromise = new Promise((resolve, reject) => {
+        let started = false;
+        const run = () => {
+          if (started) return;
+          started = true;
+          init(initialUrl).then(resolve, reject);
+        };
+        nuxtApp.hooks.hookOnce("app:suspense:resolve", () => {
+          if (typeof requestIdleCallback === "function") {
+            requestIdleCallback(run, { timeout: 2e3 });
+          } else {
+            setTimeout(run, 200);
+          }
+        });
+        setTimeout(run, 3e3);
+      });
+    } else {
+      _initPromise = init(initialUrl);
+    }
     if (!pinServer && deepLinkServer && !savedServers.value.some((s) => s.url === deepLinkServer)) {
       void addServer(deepLinkServer).catch(() => {
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abraca/nuxt",
-  "version": "2.26.0",
+  "version": "2.27.0",
   "description": "First-class Nuxt module for the Abracadabra CRDT collaboration platform",
   "repository": "abracadabra/abracadabra-nuxt",
   "license": "MIT",