@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -0,0 +1,19 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['dashboard']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/AGalleryCoverImage.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    uploadId: string;
+    docId: string;
+    mimeType?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, watchEffect } from "vue";
+import { useFileBlobStore } from "../../composables/useFileBlobStore";
+const props = defineProps({
+  uploadId: { type: String, required: true },
+  docId: { type: String, required: true },
+  mimeType: { type: String, required: false }
+});
+const { getBlobUrl } = useFileBlobStore();
+const blobUrl = ref("");
+const loading = ref(true);
+const errored = ref(false);
+watchEffect(async () => {
+  if (!props.uploadId || !props.docId) return;
+  loading.value = true;
+  errored.value = false;
+  try {
+    const url = await getBlobUrl(props.docId, props.uploadId);
+    if (url) {
+      blobUrl.value = url;
+    } else {
+      errored.value = true;
+    }
+  } catch {
+    errored.value = true;
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center">
+    <div
+      v-if="loading"
+      class="size-6 text-(--ui-text-dimmed) opacity-40 animate-spin"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-6"
+      />
+    </div>
+    <template v-else-if="!errored && blobUrl">
+      <video
+        v-if="mimeType?.startsWith('video/')"
+        :src="blobUrl"
+        class="w-full h-full object-cover"
+        muted
+        playsinline
+        preload="metadata"
+      />
+      <img
+        v-else
+        :src="blobUrl"
+        class="w-full h-full object-cover"
+        draggable="false"
+      >
+    </template>
+  </div>
+</template>

package/dist/runtime/components/renderers/AGalleryCoverImage.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    uploadId: string;
+    docId: string;
+    mimeType?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -2,7 +2,18 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['gallery']>;
+    editable?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,13 +1,18 @@
 <script setup>
-import { computed } from "vue";
+import { ref, computed, onBeforeUnmount } from "vue";
+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";
 const props = defineProps({
   docId: { type: String, required: true },
   childProvider: { type: null, required: true },
   docLabel: { type: String, required: true },
   pageTypes: { type: Array, required: false },
-  labels: { type: Object, required: false }
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
 });
 const config = useRuntimeConfig();
 const locale = computed(() => ({
@@ -15,74 +20,343 @@ const locale = computed(() => ({
   ...config.public?.abracadabra?.locale?.renderers?.gallery ?? {},
   ...props.labels ?? {}
 }));
-const { tree } = useRendererBase(props);
-const { client } = useAbracadabra();
-const items = computed(() => tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+const { tree, childProviderRef, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+const items = computed(() => tree.childrenOf(null));
+const renameId = ref(null);
+const renameValue = ref("");
+let renameCooldown = false;
+function startRename(id, label) {
+  if (!props.editable) return;
+  renameId.value = id;
+  renameValue.value = label;
+  renameCooldown = true;
+  setTimeout(() => {
+    renameCooldown = false;
+  }, 200);
+}
+function commitRename() {
+  if (!props.editable) return;
+  if (renameCooldown) return;
+  if (renameId.value && renameValue.value.trim()) {
+    tree.renameEntry(renameId.value, renameValue.value.trim());
+  }
+  renameId.value = null;
+}
 function addItem() {
+  if (!props.editable) return;
   tree.createChild(null, locale.value.untitled);
 }
-async function getCoverUrl(item) {
-  if (!item.meta?.coverUploadId || !item.meta?.coverDocId) return null;
-  const { getBlobUrl } = useFileBlobStore();
-  try {
-    return await getBlobUrl(item.meta.coverDocId, item.meta.coverUploadId);
-  } catch {
-    return null;
+function duplicateItem(id) {
+  if (!props.editable) return;
+  tree.duplicateEntry(id);
+}
+function itemMenuItems(item) {
+  return [
+    [
+      { label: "Open", icon: "i-lucide-external-link", onSelect: () => openNode(item.id, item.label) },
+      { label: "Rename", icon: "i-lucide-pencil", onSelect: () => startRename(item.id, item.label) },
+      { label: "Duplicate", icon: "i-lucide-copy", onSelect: () => duplicateItem(item.id) }
+    ],
+    [
+      { label: "Delete", icon: "i-lucide-trash-2", color: "error", onSelect: () => tree.deleteEntry(item.id) }
+    ]
+  ];
+}
+function orderBetween(list, targetIdx) {
+  const prev = list[targetIdx - 1];
+  const next = list[targetIdx];
+  if (!prev && !next) return Date.now();
+  if (!prev) return next.order - 1e3;
+  if (!next) return prev.order + 1e3;
+  return (prev.order + next.order) / 2;
+}
+const { dragId, dragOverId, handlePointerDown } = useTouchDrag({
+  onDrop: (srcId, targetId) => {
+    if (!props.editable) return;
+    const targetIdx = items.value.findIndex((i) => i.id === targetId);
+    const newOrder = orderBetween(items.value, targetIdx);
+    tree.moveEntry(srcId, null, newOrder);
   }
+});
+function itemFocusers(itemId) {
+  return states.value.filter(
+    (s) => s.clientId !== myClientId.value && s["gallery:focused"] === itemId
+  );
+}
+function onItemPointerEnter(itemId) {
+  setLocalState({ "gallery:focused": itemId });
 }
-const colorMap = computed(() => {
-  const result = {};
-  for (const item of items.value) {
-    if (item.meta?.color) result[item.id] = item.meta.color;
-    else result[item.id] = null;
+function onItemPointerLeave() {
+  setLocalState({ "gallery:focused": null });
+}
+onBeforeUnmount(() => setLocalState({ "gallery:focused": null }));
+const gridSize = ref("md");
+const gridClass = computed(() => {
+  switch (gridSize.value) {
+    case "sm":
+      return "grid-cols-3 sm:grid-cols-4 lg:grid-cols-6";
+    case "lg":
+      return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+    default:
+      return "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4";
   }
-  return result;
 });
+const gridSizeItems = computed(() => [
+  [
+    { label: "Small", icon: "i-lucide-grid-3x3", onSelect: () => {
+      gridSize.value = "sm";
+    } },
+    { label: "Medium", icon: "i-lucide-grid-2x2", onSelect: () => {
+      gridSize.value = "md";
+    } },
+    { label: "Large", icon: "i-lucide-layout-grid", onSelect: () => {
+      gridSize.value = "lg";
+    } }
+  ]
+]);
+const lightboxItem = ref(null);
+function openLightbox(item) {
+  const uploadId = item.meta?.coverUploadId;
+  if (!uploadId) {
+    openNode(item.id, item.label);
+    return;
+  }
+  lightboxItem.value = {
+    id: item.id,
+    label: item.label,
+    uploadId,
+    mimeType: item.meta?.coverMimeType
+  };
+}
+function closeLightbox() {
+  lightboxItem.value = null;
+}
+function itemBorderColor(item) {
+  const c = getMetaColor(item.meta);
+  return c ? `border-color: ${c}` : void 0;
+}
+defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div class="p-4">
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
+      <span class="text-xs text-(--ui-text-muted)">
+        {{ items.length }} item{{ items.length !== 1 ? "s" : "" }}
+      </span>
+      <div class="flex items-center gap-1">
+        <UDropdownMenu
+          :items="gridSizeItems"
+          :content="{ align: 'end' }"
+        >
+          <UButton
+            icon="i-lucide-layout-grid"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+          />
+        </UDropdownMenu>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :label="locale.addItem"
+          @click="addItem"
+        />
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto p-4">
+      <!-- Empty state -->
       <div
-        v-for="item in items"
-        :key="item.id"
-        class="group bg-elevated border border-muted rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
+        v-if="items.length === 0"
+        class="flex flex-col items-center justify-center h-full gap-3 text-center"
       >
-        <!-- Cover -->
-        <div
-          class="h-32 bg-muted flex items-center justify-center"
-          :style="item.meta?.color ? { backgroundColor: item.meta.color } : {}"
-        >
-          <UIcon name="i-lucide-image" class="size-8 text-muted/50" />
-        </div>
+        <UIcon
+          name="i-lucide-images"
+          class="size-10 text-(--ui-text-dimmed)"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          {{ locale.noItems }}
+        </p>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          :label="locale.addItem"
+          size="sm"
+          @click="addItem"
+        />
+      </div>
 
-        <!-- Label -->
-        <div class="p-2">
-          <p class="text-sm font-medium truncate">{{ item.label }}</p>
+      <TransitionGroup
+        v-else
+        name="gallery"
+        tag="div"
+        class="grid gap-3"
+        :class="gridClass"
+      >
+        <UContextMenu
+          v-for="item in items"
+          :key="item.id"
+          :items="editable ? itemMenuItems(item) : []"
+        >
           <div
-            v-if="item.meta?.tags?.length"
-            class="flex flex-wrap gap-1 mt-1"
+            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)
+]"
+            :data-drag-id="item.id"
+            @pointerdown="editable && handlePointerDown($event, item.id)"
+            @pointerenter="onItemPointerEnter(item.id)"
+            @pointerleave="onItemPointerLeave"
+            @click="openLightbox(item)"
           >
-            <UBadge
-              v-for="tag in item.meta.tags"
-              :key="tag"
-              variant="soft"
-              size="xs"
-            >{{ tag }}</UBadge>
+            <!-- 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>
+
+              <UDropdownMenu
+                v-if="editable"
+                :items="itemMenuItems(item)"
+                :content="{ align: 'start' }"
+              >
+                <UButton
+                  icon="i-lucide-ellipsis"
+                  size="xs"
+                  variant="ghost"
+                  color="neutral"
+                  class="opacity-0 group-hover:opacity-100 shrink-0"
+                  @click.stop
+                />
+              </UDropdownMenu>
+            </div>
           </div>
-        </div>
-      </div>
+        </UContextMenu>
+      </TransitionGroup>
+    </div>
 
-      <!-- Add item tile -->
-      <div
-        class="h-[168px] border-2 border-dashed border-muted rounded-lg flex items-center justify-center cursor-pointer hover:border-primary transition-colors"
-        @click="addItem"
-      >
-        <div class="text-center text-muted">
-          <UIcon name="i-lucide-plus" class="size-6 mb-1" />
-          <p class="text-xs">{{ locale.addItem }}</p>
+    <!-- Lightbox -->
+    <UModal
+      :open="!!lightboxItem"
+      @update:open="(v) => {
+  if (!v) closeLightbox();
+}"
+    >
+      <template #content>
+        <div
+          v-if="lightboxItem"
+          class="flex flex-col items-center"
+        >
+          <div class="flex items-center justify-between w-full p-3 border-b border-(--ui-border)">
+            <span class="text-sm font-medium truncate">{{ lightboxItem.label }}</span>
+            <div class="flex items-center gap-1">
+              <UButton
+                icon="i-lucide-external-link"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                @click="openNode(lightboxItem.id, lightboxItem.label);
+  closeLightbox()"
+              />
+              <UButton
+                icon="i-lucide-x"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                @click="closeLightbox"
+              />
+            </div>
+          </div>
+          <div class="p-4 flex items-center justify-center max-h-[80vh] overflow-auto">
+            <AGalleryCoverImage
+              :upload-id="lightboxItem.uploadId"
+              :doc-id="lightboxItem.id"
+              :mime-type="lightboxItem.mimeType"
+              class="max-w-full max-h-[70vh] object-contain rounded"
+            />
+          </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </UModal>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
   </div>
 </template>
+
+<style scoped>
+.gallery-move{transition:transform .25s ease}.gallery-enter-active{transition:opacity .18s ease,transform .18s ease}.gallery-enter-from{opacity:0;transform:translateY(-6px) scale(.97)}.gallery-leave-active{transition:opacity .15s ease}.gallery-leave-to{opacity:0}
+</style>

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

@@ -2,7 +2,18 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['gallery']>;
+    editable?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/renderers/AGraphRenderer.d.vue.ts

@@ -0,0 +1,19 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['graph']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;