@abraca/nuxt 1.6.0 → 1.8.0

package/dist/module.d.mts

@@ -40,6 +40,7 @@ declare module '@nuxt/schema' {
                 chat?: boolean;
                 spatial?: boolean;
                 media?: boolean;
+                slides?: boolean;
             };
             locale: AbracadabraLocale;
             auth: {
@@ -161,6 +162,11 @@ interface ModuleOptions {
          * Default: false.
          */
         media?: boolean;
+        /**
+         * Register slides presentation renderer with two-axis navigation.
+         * Default: true (lightweight, no extra deps).
+         */
+        slides?: boolean;
     };
     /**
      * Automatically add Vite resolve.dedupe entries for ProseMirror, TipTap, and Yjs.

package/dist/module.json

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

package/dist/module.mjs

@@ -31,7 +31,8 @@ const module$1 = defineNuxtModule({
       webrtc: false,
       chat: false,
       spatial: false,
-      media: false
+      media: false,
+      slides: true
     },
     addViteDedupe: true,
     prefix: "",
@@ -241,7 +242,20 @@ const module$1 = defineNuxtModule({
       addComponentsDir({
         path: resolver.resolve("./runtime/components/renderers"),
         prefix: options.prefix ?? "",
-        pathPrefix: false
+        pathPrefix: false,
+        // Subfolders contain internal sub-components that should NOT be auto-imported —
+        // they're imported explicitly by their parent renderer via relative paths.
+        ignore: [
+          "**/calendar/**",
+          "**/table/**",
+          "**/timeline/**",
+          "**/media/**",
+          "**/spatial/**",
+          "**/gallery/**",
+          "**/sheets/**",
+          "**/slides/**",
+          "**/chart/**"
+        ]
       });
     }
     addComponentsDir({

package/dist/runtime/assets/sources.css

@@ -0,0 +1 @@
+@source "../components/**/*.{vue,js,ts,mjs}";@source "../extensions/**/*.{vue,js,ts,mjs}";

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

@@ -3,7 +3,11 @@ type __VLS_Props = {
     editable?: boolean;
     selectedId?: string | null;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+declare var __VLS_39: {};
+type __VLS_Slots = {} & {
+    'toolbar-start'?: (props: typeof __VLS_39) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     handleExternalDrop: (e: DragEvent, parentId?: string | null) => Promise<void>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     create: (parentId: string | null) => any;
@@ -14,5 +18,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     editable: boolean;
 }, {}, {}, {}, 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/ADocumentTree.vue

@@ -1031,10 +1031,9 @@ defineExpose({
     </div>
   </div>
 
-  <UContextMenu
+  <div
     v-else-if="!collapsed"
-    :items="treeAreaMenuItems()"
-    class="relative transition-colors duration-150 outline-none"
+    class="flex flex-col min-h-0"
     :class="externalDragActive ? 'ring-2 ring-inset ring-(--ui-primary)/30 rounded-(--ui-radius) bg-(--ui-primary)/3' : ''"
     tabindex="0"
     role="tree"
@@ -1045,9 +1044,14 @@ defineExpose({
     @dragover="onTreeDragOver"
     @drop.prevent="onOuterDrop"
   >
+    <UContextMenu :items="treeAreaMenuItems()">
+      <div class="flex flex-col flex-1 min-h-0 overflow-hidden relative transition-colors duration-150 outline-none">
     <!-- Header -->
-    <div class="flex items-center justify-between px-3 py-1">
-      <span class="text-[11px] font-medium text-(--ui-text-dimmed) uppercase tracking-wider">Pages</span>
+    <div class="flex items-center justify-between px-3 py-1 gap-1">
+      <div class="flex items-center gap-1 min-w-0">
+        <slot name="toolbar-start" />
+        <span class="text-[11px] font-medium text-(--ui-text-dimmed) uppercase tracking-wider truncate">Pages</span>
+      </div>
       <div class="flex items-center gap-0">
         <UTooltip :text="allExpanded ? 'Collapse all' : 'Expand all'">
           <UButton
@@ -1466,6 +1470,9 @@ defineExpose({
       </template>
     </ClientOnly>
 
+      </div>
+    </UContextMenu>
+
     <!-- Overlay slideover -->
     <ANodePanel
       :node-id="overlayNodeId"
@@ -1474,7 +1481,7 @@ defineExpose({
       :doc-type="treeMap.get(overlayNodeId ?? '')?.type"
       @close="closeOverlay"
     />
-  </UContextMenu>
+  </div>
 </template>
 
 <style scoped>

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

@@ -3,7 +3,11 @@ type __VLS_Props = {
     editable?: boolean;
     selectedId?: string | null;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+declare var __VLS_39: {};
+type __VLS_Slots = {} & {
+    'toolbar-start'?: (props: typeof __VLS_39) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     handleExternalDrop: (e: DragEvent, parentId?: string | null) => Promise<void>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     create: (parentId: string | null) => any;
@@ -14,5 +18,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     editable: boolean;
 }, {}, {}, {}, 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/renderers/AChecklistRenderer.vue

@@ -49,8 +49,14 @@ const flatItems = computed(() => {
   walk(null, 0);
   return result;
 });
-const filterMode = ref("all");
-const sortMode = ref("manual");
+const filterMode = computed({
+  get: () => tree.treeMap.data?.[props.docId]?.meta?.checklistFilter ?? "all",
+  set: (v) => tree.updateMeta(props.docId, { checklistFilter: v })
+});
+const sortMode = computed({
+  get: () => tree.treeMap.data?.[props.docId]?.meta?.checklistSort ?? "manual",
+  set: (v) => tree.updateMeta(props.docId, { checklistSort: v })
+});
 function isDescendantOf(item, ancestorId) {
   let current = item;
   while (current) {
@@ -88,6 +94,13 @@ const visibleItems = computed(() => {
 });
 const totalCount = computed(() => flatItems.value.length);
 const checkedCount = computed(() => flatItems.value.filter((i) => i.checked).length);
+function isIndeterminate(item) {
+  if (!item.hasChildren) return false;
+  if (item.checked) return false;
+  const descendants = flatItems.value.filter((i) => isDescendantOf(i, item.id));
+  if (descendants.length === 0) return false;
+  return descendants.some((d) => d.checked);
+}
 const percent = computed(
   () => totalCount.value === 0 ? 0 : Math.round(checkedCount.value / totalCount.value * 100)
 );
@@ -465,10 +478,10 @@ defineExpose({ connectedUsers });
                 />
               </span>
 
-              <!-- Checkbox -->
+              <!-- Checkbox (supports indeterminate state for parents with partial completion) -->
               <button
                 class="shrink-0 size-4 rounded border flex items-center justify-center transition-colors"
-                :class="item.checked ? 'bg-(--ui-primary) border-(--ui-primary)' : 'border-(--ui-border) hover:border-(--ui-primary)'"
+                :class="item.checked ? 'bg-(--ui-primary) border-(--ui-primary)' : isIndeterminate(item) ? 'bg-(--ui-primary)/40 border-(--ui-primary)/60' : 'border-(--ui-border) hover:border-(--ui-primary)'"
                 :disabled="!editable"
                 @click.stop="editable && tree.updateMeta(item.id, { checked: !item.checked })"
               >
@@ -477,6 +490,11 @@ defineExpose({ connectedUsers });
                   name="i-lucide-check"
                   class="size-2.5 text-white"
                 />
+                <UIcon
+                  v-else-if="isIndeterminate(item)"
+                  name="i-lucide-minus"
+                  class="size-2.5 text-white"
+                />
               </button>
 
               <!-- Label / inline edit -->

package/dist/runtime/components/renderers/ADashboardRenderer.vue

@@ -88,6 +88,7 @@ const widgetLoadingIds = ref(/* @__PURE__ */ new Set());
 const widgetErrors = reactive({});
 async function loadWidgetProvider(childId) {
   if (widgetProviders[childId] || widgetLoadingIds.value.has(childId)) return;
+  if (!childProviderRef.value) return;
   widgetLoadingIds.value.add(childId);
   delete widgetErrors[childId];
   try {
@@ -118,8 +119,9 @@ onErrorCaptured((err) => {
   }
 });
 watch(
-  children,
-  (items) => {
+  [children, childProviderRef],
+  ([items]) => {
+    if (!childProviderRef.value) return;
     items.forEach((item) => {
       const mode = item.meta?.deskMode;
       if ((mode === "widget-sm" || mode === "widget-lg") && !widgetProviders[item.id]) {

package/dist/runtime/components/renderers/AGalleryRenderer.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { ref, computed, onBeforeUnmount } from "vue";
+import { ref, computed, onBeforeUnmount, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
 import { useRuntimeConfig } from "#imports";
 import { useRendererBase } from "../../composables/useRendererBase";
 import { useTouchDrag } from "../../composables/useTouchDrag";
 import { useNodePanel } from "../../composables/useNodePanel";
 import { getMetaColor } from "../../utils/getMetaColor";
 import { DEFAULT_LOCALE } from "../../locale";
+import AGalleryItemCard from "./gallery/AGalleryItemCard.vue";
 const props = defineProps({
   docId: { type: String, required: true },
   childProvider: { type: null, required: true },
@@ -29,7 +31,27 @@ const {
   closePanel
 } = useNodePanel(childProviderRef);
 const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
-const items = computed(() => tree.childrenOf(null));
+const rawItems = computed(() => tree.childrenOf(null));
+const items = computed(() => {
+  const raw = rawItems.value;
+  const mode = gallerySortBy.value;
+  if (mode === "manual") return raw;
+  const arr = [...raw];
+  if (mode === "name") {
+    return arr.sort((a, b) => (a.label ?? "").localeCompare(b.label ?? ""));
+  }
+  if (mode === "rating") {
+    return arr.sort((a, b) => (b.meta?.rating ?? 0) - (a.meta?.rating ?? 0));
+  }
+  return arr.sort((a, b) => {
+    const da = a.meta?.datetimeStart ?? a.meta?.dateStart ?? a.meta?.dateTaken;
+    const db = b.meta?.datetimeStart ?? b.meta?.dateStart ?? b.meta?.dateTaken;
+    if (!da && !db) return 0;
+    if (!da) return 1;
+    if (!db) return -1;
+    return new Date(da).getTime() - new Date(db).getTime();
+  });
+});
 const renameId = ref(null);
 const renameValue = ref("");
 let renameCooldown = false;
@@ -109,6 +131,30 @@ const gridClass = computed(() => {
       return "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4";
   }
 });
+const docMeta = computed(() => tree.treeMap.data?.[props.docId]?.meta);
+const ASPECT_MAP = {
+  square: "1 / 1",
+  "4:3": "4 / 3",
+  "3:2": "3 / 2",
+  "16:9": "16 / 9",
+  free: "auto"
+};
+const galleryAspect = computed(() => {
+  const v = docMeta.value?.galleryAspect ?? "4:3";
+  return ASPECT_MAP[v] ?? ASPECT_MAP["4:3"];
+});
+const cardStyle = computed(() => docMeta.value?.galleryCardStyle ?? "default");
+const showLabels = computed(() => docMeta.value?.galleryShowLabels ?? true);
+const galleryColumns = computed(() => {
+  const v = docMeta.value?.galleryColumns;
+  return typeof v === "number" && v >= 1 && v <= 6 ? v : null;
+});
+const gridStyle = computed(
+  () => galleryColumns.value ? { gridTemplateColumns: `repeat(${galleryColumns.value}, minmax(0, 1fr))` } : void 0
+);
+const gallerySortBy = computed(
+  () => docMeta.value?.gallerySortBy ?? "manual"
+);
 const gridSizeItems = computed(() => [
   [
     { label: "Small", icon: "i-lucide-grid-3x3", onSelect: () => {
@@ -139,6 +185,35 @@ function openLightbox(item) {
 function closeLightbox() {
   lightboxItem.value = null;
 }
+function lightboxNavigate(direction) {
+  if (!lightboxItem.value) return;
+  const list = items.value.filter((i) => i.meta?.coverUploadId);
+  const idx = list.findIndex((i) => i.id === lightboxItem.value.id);
+  if (idx === -1) return;
+  const next = list[(idx + direction + list.length) % list.length];
+  lightboxItem.value = {
+    id: next.id,
+    label: next.label,
+    uploadId: next.meta.coverUploadId,
+    mimeType: next.meta.coverMimeType
+  };
+}
+watch(lightboxItem, (v) => {
+  if (v) return;
+});
+useEventListener(typeof window !== "undefined" ? window : null, "keydown", (e) => {
+  if (!lightboxItem.value) return;
+  if (e.key === "ArrowLeft") {
+    e.preventDefault();
+    lightboxNavigate(-1);
+  } else if (e.key === "ArrowRight") {
+    e.preventDefault();
+    lightboxNavigate(1);
+  } else if (e.key === "Escape") {
+    e.preventDefault();
+    closeLightbox();
+  }
+});
 function itemBorderColor(item) {
   const c = getMetaColor(item.meta);
   return c ? `border-color: ${c}` : void 0;
@@ -205,84 +280,36 @@ defineExpose({ connectedUsers });
         name="gallery"
         tag="div"
         class="grid gap-3"
-        :class="gridClass"
+        :class="galleryColumns ? '' : gridClass"
+        :style="gridStyle"
       >
         <UContextMenu
           v-for="item in items"
           :key="item.id"
           :items="editable ? itemMenuItems(item) : []"
         >
-          <div
-            class="group relative rounded-lg border border-(--ui-border) hover:border-(--ui-primary) transition-colors overflow-hidden cursor-pointer"
-            :class="{
-  'opacity-40 scale-95': dragId === item.id,
-  'ring-2 ring-(--ui-primary)/40': dragOverId === item.id
-}"
-            :style="[
-  itemFocusers(item.id).length ? `box-shadow: 0 0 0 2px ${itemFocusers(item.id)[0].user?.color ?? '#888'}` : void 0,
-  itemBorderColor(item)
-]"
+          <AGalleryItemCard
+            :item="item"
+            :gallery-aspect="galleryAspect"
+            :card-style="cardStyle"
+            :show-labels="showLabels"
+            :is-dragging="dragId === item.id"
+            :is-drag-over="dragOverId === item.id"
+            :focusers="itemFocusers(item.id)"
+            :can-write="editable"
+            :rename-id="renameId"
+            :rename-value="renameValue"
             :data-drag-id="item.id"
+            @update:rename-value="renameValue = $event"
+            @commit-rename="commitRename"
+            @cancel-rename="renameId = null"
             @pointerdown="editable && handlePointerDown($event, item.id)"
             @pointerenter="onItemPointerEnter(item.id)"
             @pointerleave="onItemPointerLeave"
             @click="openLightbox(item)"
+            @dblclick.stop="editable && startRename(item.id, item.label)"
           >
-            <!-- Remote user badge -->
-            <div
-              v-if="itemFocusers(item.id).length"
-              class="absolute top-1 right-1 z-10 flex gap-0.5"
-            >
-              <span
-                v-for="f in itemFocusers(item.id)"
-                :key="f.clientId"
-                class="text-[10px] leading-none px-1.5 py-0.5 rounded-full text-white truncate max-w-20"
-                :style="{ backgroundColor: f.user?.color ?? '#888' }"
-              >
-                {{ f.user?.name ?? "User" }}
-              </span>
-            </div>
-
-            <!-- Cover or placeholder -->
-            <div
-              class="aspect-[4/3] bg-(--ui-bg-elevated) flex items-center justify-center overflow-hidden"
-              :style="item.meta?.color ? { backgroundColor: item.meta.color + '22' } : {}"
-            >
-              <AGalleryCoverImage
-                v-if="item.meta?.coverUploadId"
-                :upload-id="item.meta.coverUploadId"
-                :doc-id="item.id"
-                :mime-type="item.meta.coverMimeType"
-              />
-              <UIcon
-                v-else
-                :name="item.meta?.icon || 'i-lucide-file-text'"
-                class="size-8 text-(--ui-text-dimmed) opacity-40"
-              />
-            </div>
-
-            <!-- Label -->
-            <div class="p-2 border-t border-(--ui-border) flex items-center justify-between gap-1">
-              <UInput
-                v-if="editable && renameId === item.id"
-                v-model="renameValue"
-                size="xs"
-                variant="none"
-                class="flex-1 -mx-1"
-                autofocus
-                @keydown.enter="commitRename"
-                @keydown.escape="renameId = null"
-                @blur="commitRename"
-                @click.stop
-              />
-              <p
-                v-else
-                class="text-xs font-medium truncate"
-                @dblclick.stop="editable && startRename(item.id, item.label)"
-              >
-                {{ item.label }}
-              </p>
-
+            <template #actions>
               <UDropdownMenu
                 v-if="editable"
                 :items="itemMenuItems(item)"
@@ -297,8 +324,8 @@ defineExpose({ connectedUsers });
                   @click.stop
                 />
               </UDropdownMenu>
-            </div>
-          </div>
+            </template>
+          </AGalleryItemCard>
         </UContextMenu>
       </TransitionGroup>
     </div>