@abraca/nuxt 0.1.0

package/dist/runtime/components/aware/AUserList.vue

@@ -0,0 +1,72 @@
+<script setup>
+const props = defineProps({
+  docId: { type: String, required: false },
+  showSelf: { type: Boolean, required: false, default: false },
+  emptyLabel: { type: String, required: false, default: "No one else is here" }
+});
+const emit = defineEmits(["follow"]);
+const { peers, peersInDoc, isIdle } = useAwarenessPeers();
+const displayed = computed(
+  () => props.docId ? peersInDoc(computed(() => props.docId)).value : peers.value
+);
+function docContext(user) {
+  if (!user.docId) return "";
+  if (props.docId && user.docId === props.docId) return "In this document";
+  return "In another document";
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <!-- Empty state -->
+    <p v-if="displayed.length === 0" class="text-sm text-muted text-center py-4">
+      {{ emptyLabel }}
+    </p>
+
+    <template v-else>
+      <div
+        v-for="(peer, i) in displayed"
+        :key="peer.clientId"
+      >
+        <USeparator v-if="i > 0" />
+        <div class="flex items-center gap-3 py-2 px-1">
+          <!-- Avatar (no tooltip/status here — list provides the context) -->
+          <AAvatar
+            :user="peer"
+            size="xs"
+            :idle="isIdle(peer.clientId)"
+            :show-tooltip="false"
+            :show-status="false"
+          />
+
+          <!-- Name + doc context -->
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-default truncate">
+              {{ peer.user?.name || "Anonymous" }}
+            </p>
+            <p v-if="docContext(peer)" class="text-xs text-muted truncate">
+              {{ docContext(peer) }}
+            </p>
+          </div>
+
+          <!-- Status badge -->
+          <UBadge
+            :label="isIdle(peer.clientId) ? 'idle' : 'active'"
+            :color="isIdle(peer.clientId) ? 'neutral' : 'success'"
+            variant="subtle"
+            size="xs"
+          />
+
+          <!-- Follow button -->
+          <UButton
+            icon="i-lucide-navigation"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            @click="emit('follow', peer)"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { AwarenessUser } from '../../types.js';
+type __VLS_Props = {
+    /** Filter to users in this document. Omit to show all connected peers. */
+    docId?: string;
+    showSelf?: boolean;
+    emptyLabel?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    follow: (user: AwarenessUser) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFollow?: ((user: AwarenessUser) => any) | undefined;
+}>, {
+    showSelf: boolean;
+    emptyLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['calendar']>;
+};
+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/ACalendarRenderer.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+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 }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.calendar,
+  ...config.public?.abracadabra?.locale?.renderers?.calendar ?? {},
+  ...props.labels ?? {}
+}));
+const { tree } = useRendererBase(props);
+const today = /* @__PURE__ */ new Date();
+const viewYear = ref(today.getFullYear());
+const viewMonth = ref(today.getMonth());
+const monthName = computed(
+  () => new Date(viewYear.value, viewMonth.value, 1).toLocaleString("default", { month: "long", year: "numeric" })
+);
+function prevMonth() {
+  if (viewMonth.value === 0) {
+    viewMonth.value = 11;
+    viewYear.value--;
+  } else viewMonth.value--;
+}
+function nextMonth() {
+  if (viewMonth.value === 11) {
+    viewMonth.value = 0;
+    viewYear.value++;
+  } else viewMonth.value++;
+}
+const events = computed(() => tree.childrenOf(null));
+function eventsOnDay(year, month, day) {
+  const dayStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+  return events.value.filter((e) => {
+    const start = e.meta?.datetimeStart ?? e.meta?.dateStart;
+    if (!start) return false;
+    return start.startsWith(dayStr);
+  });
+}
+const calendarDays = computed(
+  () => {
+    const firstDay = new Date(viewYear.value, viewMonth.value, 1).getDay();
+    const daysInMonth = new Date(viewYear.value, viewMonth.value + 1, 0).getDate();
+    const days = [];
+    for (let i = 0; i < firstDay; i++) days.push({ day: null });
+    for (let d = 1; d <= daysInMonth; d++) days.push({ day: d });
+    return days;
+  }
+);
+function isToday(day) {
+  return day === today.getDate() && viewMonth.value === today.getMonth() && viewYear.value === today.getFullYear();
+}
+function addEvent(day) {
+  const dateStr = `${viewYear.value}-${String(viewMonth.value + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}T09:00`;
+  const id = tree.createChild(null, locale.value.newEvent);
+  const entry = tree.treeMap.get(id);
+  if (entry) {
+    tree.treeMap.set(id, {
+      ...entry,
+      meta: { datetimeStart: dateStr, datetimeEnd: dateStr },
+      updatedAt: Date.now()
+    });
+  }
+}
+const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+</script>
+
+<template>
+  <div class="p-4 max-w-3xl">
+    <!-- Navigation -->
+    <div class="flex items-center gap-4 mb-4">
+      <UButton
+        icon="i-lucide-chevron-left"
+        variant="ghost"
+        color="neutral"
+        @click="prevMonth"
+      />
+      <h2 class="text-lg font-semibold flex-1 text-center">{{ monthName }}</h2>
+      <UButton
+        icon="i-lucide-chevron-right"
+        variant="ghost"
+        color="neutral"
+        @click="nextMonth"
+      />
+      <UButton
+        icon="i-lucide-today"
+        variant="soft"
+        color="neutral"
+        size="sm"
+        :label="locale.today"
+        @click="() => {
+  viewYear = today.getFullYear();
+  viewMonth = today.getMonth();
+}"
+      />
+    </div>
+
+    <!-- Day headers -->
+    <div class="grid grid-cols-7 gap-px mb-1">
+      <div
+        v-for="name in dayNames"
+        :key="name"
+        class="text-center text-xs font-medium text-muted py-1"
+      >
+        {{ name }}
+      </div>
+    </div>
+
+    <!-- Calendar grid -->
+    <div class="grid grid-cols-7 gap-px bg-muted rounded-lg overflow-hidden">
+      <div
+        v-for="(cell, idx) in calendarDays"
+        :key="idx"
+        class="bg-elevated min-h-[80px] p-1 text-sm"
+        :class="cell.day && isToday(cell.day) ? 'bg-primary/5' : ''"
+      >
+        <template v-if="cell.day !== null">
+          <div
+            class="flex items-center justify-between"
+          >
+            <span
+              class="text-xs font-medium"
+              :class="isToday(cell.day) ? 'text-primary font-bold' : 'text-muted'"
+            >{{ cell.day }}</span>
+            <UButton
+              icon="i-lucide-plus"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              class="opacity-0 hover:opacity-100 h-4 w-4"
+              @click="addEvent(cell.day)"
+            />
+          </div>
+          <div class="space-y-0.5 mt-0.5">
+            <div
+              v-for="ev in eventsOnDay(viewYear, viewMonth, cell.day)"
+              :key="ev.id"
+              class="text-xs px-1 py-0.5 rounded truncate"
+              :style="ev.meta?.color ? { backgroundColor: ev.meta.color + '33', color: ev.meta.color } : { backgroundColor: 'var(--color-primary-100)', color: 'var(--color-primary-700)' }"
+            >
+              {{ ev.label }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['calendar']>;
+};
+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

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['gallery']>;
+};
+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.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+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 }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.gallery,
+  ...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)));
+function addItem() {
+  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;
+  }
+}
+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;
+  }
+  return result;
+});
+</script>
+
+<template>
+  <div class="p-4">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+      <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"
+      >
+        <!-- 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>
+
+        <!-- Label -->
+        <div class="p-2">
+          <p class="text-sm font-medium truncate">{{ item.label }}</p>
+          <div
+            v-if="item.meta?.tags?.length"
+            class="flex flex-wrap gap-1 mt-1"
+          >
+            <UBadge
+              v-for="tag in item.meta.tags"
+              :key="tag"
+              variant="soft"
+              size="xs"
+            >{{ tag }}</UBadge>
+          </div>
+        </div>
+      </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['gallery']>;
+};
+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/AKanbanRenderer.d.vue.ts

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['kanban']>;
+};
+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/AKanbanRenderer.vue

@@ -0,0 +1,179 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+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 }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.kanban,
+  ...config.public?.abracadabra?.locale?.renderers?.kanban ?? {},
+  ...props.labels ?? {}
+}));
+const { tree, childDoc } = useRendererBase(props);
+const columns = computed(() => tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+function cardsOf(colId) {
+  return tree.childrenOf(colId).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+const CARD_MIME = "application/x-abracadabra-card";
+const COL_MIME = "application/x-abracadabra-col";
+const draggingCardId = ref(null);
+const draggingColId = ref(null);
+const dragOverColId = ref(null);
+const dragOverCardId = ref(null);
+function onColDragStart(e, colId) {
+  draggingColId.value = colId;
+  e.dataTransfer?.setData(COL_MIME, colId);
+}
+function onColDragOver(e, colId) {
+  if (!draggingColId.value) return;
+  e.preventDefault();
+  dragOverColId.value = colId;
+}
+function onColDrop(e, targetColId) {
+  e.preventDefault();
+  const srcId = e.dataTransfer?.getData(COL_MIME) || draggingColId.value;
+  draggingColId.value = null;
+  dragOverColId.value = null;
+  if (!srcId || srcId === targetColId) return;
+  const targetCol = columns.value.find((c) => c.id === targetColId);
+  if (!targetCol) return;
+  const srcEntry = tree.treeMap.get(srcId);
+  if (!srcEntry) return;
+  tree.treeMap.set(srcId, { ...srcEntry, order: (targetCol.order ?? 0) - 0.5, updatedAt: Date.now() });
+}
+function onCardDragStart(e, cardId) {
+  draggingCardId.value = cardId;
+  e.dataTransfer?.setData(CARD_MIME, cardId);
+  e.stopPropagation();
+}
+function onCardDragOver(e, cardId) {
+  if (!draggingCardId.value) return;
+  e.preventDefault();
+  e.stopPropagation();
+  dragOverCardId.value = cardId;
+}
+function onCardDropOnCard(e, targetCardId) {
+  e.preventDefault();
+  e.stopPropagation();
+  const srcId = e.dataTransfer?.getData(CARD_MIME) || draggingCardId.value;
+  draggingCardId.value = null;
+  dragOverCardId.value = null;
+  if (!srcId || srcId === targetCardId) return;
+  const targetEntry = tree.treeMap.get(targetCardId);
+  const srcEntry = tree.treeMap.get(srcId);
+  if (!targetEntry || !srcEntry) return;
+  tree.treeMap.set(srcId, {
+    ...srcEntry,
+    parentId: targetEntry.parentId,
+    order: (targetEntry.order ?? 0) - 0.5,
+    updatedAt: Date.now()
+  });
+}
+function onCardDropOnColumn(e, colId) {
+  e.preventDefault();
+  const srcId = e.dataTransfer?.getData(CARD_MIME) || draggingCardId.value;
+  draggingCardId.value = null;
+  dragOverCardId.value = null;
+  dragOverColId.value = null;
+  if (!srcId) return;
+  const srcEntry = tree.treeMap.get(srcId);
+  if (!srcEntry) return;
+  const existingCards = cardsOf(colId);
+  const maxOrder = existingCards.length ? Math.max(...existingCards.map((c) => c.order ?? 0)) : 0;
+  tree.treeMap.set(srcId, {
+    ...srcEntry,
+    parentId: colId,
+    order: maxOrder + 1,
+    updatedAt: Date.now()
+  });
+}
+function addColumn() {
+  tree.createChild(null, `${locale.value.newColumn} ${columns.value.length + 1}`);
+}
+function addCard(colId) {
+  tree.createChild(colId, locale.value.newCard);
+}
+</script>
+
+<template>
+  <div class="flex gap-4 p-4 overflow-x-auto h-full items-start">
+    <!-- Columns -->
+    <div
+      v-for="col in columns"
+      :key="col.id"
+      class="flex-shrink-0 w-64 bg-muted/50 rounded-lg p-2 flex flex-col gap-2 min-h-[200px]"
+      :class="dragOverColId === col.id ? 'ring-2 ring-primary' : ''"
+      draggable="true"
+      @dragstart="onColDragStart($event, col.id)"
+      @dragover="onColDragOver($event, col.id)"
+      @drop="onCardDropOnColumn($event, col.id)"
+      @dragleave="dragOverColId = null"
+    >
+      <!-- Column header -->
+      <div class="flex items-center gap-2 px-1">
+        <span class="font-medium text-sm flex-1 truncate">{{ col.label }}</span>
+        <UBadge
+          variant="soft"
+          size="xs"
+        >{{ cardsOf(col.id).length }}</UBadge>
+      </div>
+
+      <!-- Cards -->
+      <div class="flex flex-col gap-1.5">
+        <div
+          v-for="card in cardsOf(col.id)"
+          :key="card.id"
+          class="bg-elevated border border-muted rounded-md p-2.5 text-sm cursor-grab active:cursor-grabbing select-none"
+          :class="dragOverCardId === card.id ? 'ring-2 ring-primary' : ''"
+          :style="card.meta?.color ? { borderLeftColor: card.meta.color, borderLeftWidth: '3px' } : {}"
+          draggable="true"
+          @dragstart="onCardDragStart($event, card.id)"
+          @dragover="onCardDragOver($event, card.id)"
+          @drop="onCardDropOnCard($event, card.id)"
+        >
+          <p class="font-medium">{{ card.label }}</p>
+          <div
+            v-if="card.meta?.tags?.length"
+            class="flex flex-wrap gap-1 mt-1"
+          >
+            <UBadge
+              v-for="tag in card.meta.tags"
+              :key="tag"
+              variant="soft"
+              size="xs"
+            >{{ tag }}</UBadge>
+          </div>
+        </div>
+      </div>
+
+      <!-- Add card button -->
+      <UButton
+        icon="i-lucide-plus"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        :label="locale.newCard"
+        class="w-full justify-start mt-auto"
+        @click="addCard(col.id)"
+      />
+    </div>
+
+    <!-- Add column button -->
+    <div class="flex-shrink-0">
+      <UButton
+        icon="i-lucide-plus"
+        variant="soft"
+        color="neutral"
+        size="sm"
+        :label="locale.addColumn"
+        @click="addColumn"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['kanban']>;
+};
+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/AOutlineRenderer.d.vue.ts

@@ -0,0 +1,8 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['outline']>;
+};
+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;