@abraca/nuxt 0.1.0

package/dist/runtime/components/ACommandPalette.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { useAbraLocale } from "../composables/useAbraLocale";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  labels: { type: Object, required: false }
+});
+const locale = useAbraLocale("commandPalette", props.labels);
+const emit = defineEmits(["update:open"]);
+const { isOpen, searchTerm, groups, toggle, close } = useCommandPalette();
+watch(() => props.open, (v) => {
+  if (v !== void 0) isOpen.value = v;
+});
+watch(isOpen, (v) => emit("update:open", v));
+defineShortcuts({ meta_k: toggle });
+</script>
+
+<template>
+  <ClientOnly>
+    <UModal v-model:open="isOpen" :ui="{ content: 'p-0' }">
+      <template #content>
+        <UCommandPalette
+          v-model="searchTerm"
+          :groups="groups"
+          :placeholder="placeholder ?? locale.placeholder"
+          @update:model-value="searchTerm = $event"
+        />
+      </template>
+    </UModal>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../locale.js';
+type __VLS_Props = {
+    open?: boolean;
+    placeholder?: string;
+    labels?: Partial<AbracadabraLocale['commandPalette']>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../locale.js';
+type ConnectionStatusValue = 'disconnected' | 'connecting' | 'connected' | 'offline';
+type __VLS_Props = {
+    status?: ConnectionStatusValue | string;
+    synced?: boolean;
+    variant?: 'badge' | 'chip' | 'dot';
+    labels?: Partial<AbracadabraLocale['connectionStatus']>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "badge" | "chip" | "dot";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/AConnectionStatus.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useConnectionStatus } from "../composables/useConnectionStatus";
+const props = defineProps({
+  status: { type: String, required: false },
+  synced: { type: Boolean, required: false },
+  variant: { type: String, required: false, default: "badge" },
+  labels: { type: Object, required: false }
+});
+const { label, color, icon } = useConnectionStatus(
+  props.status !== void 0 ? computed(() => props.status) : void 0,
+  props.synced !== void 0 ? computed(() => props.synced) : void 0
+);
+</script>
+
+<template>
+  <!-- Badge variant: shows icon + text -->
+  <UBadge
+    v-if="variant === 'badge'"
+    :color="color"
+    :icon="icon"
+    variant="soft"
+    size="sm"
+  >
+    {{ label }}
+  </UBadge>
+
+  <!-- Chip variant: icon chip with tooltip -->
+  <UTooltip
+    v-else-if="variant === 'chip'"
+    :text="label"
+  >
+    <UChip
+      :color="color"
+      :icon="icon"
+      size="sm"
+    />
+  </UTooltip>
+
+  <!-- Dot variant: small dot with tooltip -->
+  <UTooltip
+    v-else
+    :text="label"
+  >
+    <UChip
+      :color="color"
+      size="xs"
+      standalone
+    />
+  </UTooltip>
+</template>

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

@@ -0,0 +1,13 @@
+import type { AbracadabraLocale } from '../locale.js';
+type ConnectionStatusValue = 'disconnected' | 'connecting' | 'connected' | 'offline';
+type __VLS_Props = {
+    status?: ConnectionStatusValue | string;
+    synced?: boolean;
+    variant?: 'badge' | 'chip' | 'dot';
+    labels?: Partial<AbracadabraLocale['connectionStatus']>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "badge" | "chip" | "dot";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    modelValue: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ADocTypeSelect.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { getAvailableDocTypes } from "../utils/docTypes";
+const props = defineProps({
+  modelValue: { type: String, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const types = getAvailableDocTypes();
+const items = computed(
+  () => types.map((t) => ({
+    label: t.label,
+    icon: t.icon,
+    value: t.type,
+    onSelect: () => emit("update:modelValue", t.type)
+  }))
+);
+const current = computed(() => types.find((t) => t.type === props.modelValue));
+</script>
+
+<template>
+  <UDropdownMenu :items="items">
+    <button
+      type="button"
+      class="flex items-center gap-2 h-8 px-2 rounded-md border border-default hover:bg-elevated/60 transition-colors w-full"
+    >
+      <UIcon
+        v-if="current?.icon"
+        :name="current.icon"
+        class="size-4 text-muted shrink-0"
+      />
+      <span class="text-sm flex-1 text-left truncate">{{ current?.label ?? modelValue }}</span>
+      <UIcon name="i-lucide-chevron-down" class="size-3 text-muted shrink-0" />
+    </button>
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    modelValue: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,53 @@
+import type { AbracadabraLocale } from '../locale.js';
+type __VLS_Props = {
+    showTrash?: boolean;
+    allowFileDrop?: boolean;
+    draggable?: boolean;
+    selectedId?: string | null;
+    labels?: Partial<AbracadabraLocale['documentTree']>;
+};
+interface FlatItem {
+    id: string;
+    label: string;
+    type?: string;
+    meta?: Record<string, any>;
+    depth: number;
+    parentId: string | null;
+    order: number;
+    isExpanded: boolean;
+    hasChildren: boolean;
+}
+declare var __VLS_1: {}, __VLS_20: {
+    entry: FlatItem;
+    depth: number;
+    isExpanded: boolean;
+}, __VLS_42: {}, __VLS_85: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_20) => any;
+} & {
+    empty?: (props: typeof __VLS_42) => any;
+} & {
+    footer?: (props: typeof __VLS_85) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (docId: string) => any;
+    create: (parentId: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((docId: string) => any) | undefined;
+    onCreate?: ((parentId: string | null) => any) | undefined;
+}>, {
+    draggable: boolean;
+    showTrash: boolean;
+    allowFileDrop: boolean;
+    selectedId: string | null;
+}, {}, {}, {}, 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

@@ -0,0 +1,350 @@
+<script setup>
+import { ref, computed, shallowRef } from "vue";
+import { useSyncedMap } from "../composables/useYDoc";
+import { useDocImport } from "../composables/useDocImport";
+import { useTrash } from "../composables/useTrash";
+import { resolveDocType } from "../utils/docTypes";
+import { useAbraLocale } from "../composables/useAbraLocale";
+const props = defineProps({
+  showTrash: { type: Boolean, required: false, default: true },
+  allowFileDrop: { type: Boolean, required: false, default: true },
+  draggable: { type: Boolean, required: false, default: true },
+  selectedId: { type: [String, null], required: false, default: null },
+  labels: { type: Object, required: false }
+});
+const emit = defineEmits(["select", "create"]);
+const locale = computed(() => useAbraLocale("documentTree", props.labels));
+const { doc, registry } = useAbracadabra();
+const rootDoc = doc;
+const treeMap = useSyncedMap(rootDoc, "doc-tree");
+const { trashedItems, restoreFromTrash, permanentlyDelete, emptyTrash } = useTrash();
+const {
+  externalDragActive,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
+  onFileDrop
+} = useDocImport();
+const expandedIds = ref(/* @__PURE__ */ new Set());
+const renamingId = ref(null);
+const renameValue = ref("");
+const allEntries = computed(
+  () => Object.entries(treeMap.data).map(([id, v]) => ({
+    id,
+    label: v.label || locale.value.untitled,
+    parentId: v.parentId,
+    order: v.order ?? 0,
+    type: v.type,
+    meta: v.meta
+  }))
+);
+function childrenOf(parentId) {
+  return allEntries.value.filter((e) => e.parentId === parentId).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+function hasChildren(id) {
+  return allEntries.value.some((e) => e.parentId === id);
+}
+function buildFlat(parentId, depth) {
+  const result = [];
+  for (const entry of childrenOf(parentId)) {
+    const expanded = expandedIds.value.has(entry.id);
+    result.push({
+      id: entry.id,
+      label: entry.label,
+      type: entry.type,
+      meta: entry.meta,
+      depth,
+      parentId: entry.parentId,
+      order: entry.order,
+      isExpanded: expanded,
+      hasChildren: hasChildren(entry.id)
+    });
+    if (expanded) {
+      result.push(...buildFlat(entry.id, depth + 1));
+    }
+  }
+  return result;
+}
+const flatItems = computed(() => buildFlat(null, 0));
+function toggleExpand(id) {
+  const next = new Set(expandedIds.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  expandedIds.value = next;
+}
+function startRename(id, label) {
+  renamingId.value = id;
+  renameValue.value = label;
+  nextTick(() => {
+    const input = document.getElementById(`rename-${id}`);
+    input?.select();
+  });
+}
+function commitRename(id) {
+  const trimmed = renameValue.value.trim();
+  if (trimmed && trimmed !== treeMap.get(id)?.label) {
+    const entry = treeMap.get(id);
+    if (entry) treeMap.set(id, { ...entry, label: trimmed, updatedAt: Date.now() });
+  }
+  renamingId.value = null;
+}
+const DOC_DRAG_MIME = "application/x-abracadabra-doc";
+const draggingId = ref(null);
+const dragOverId = ref(null);
+function onItemDragStart(e, id) {
+  if (!props.draggable) return;
+  draggingId.value = id;
+  e.dataTransfer?.setData(DOC_DRAG_MIME, id);
+}
+function onItemDragOver(e, id) {
+  if (!props.draggable || !draggingId.value) return;
+  e.preventDefault();
+  dragOverId.value = id;
+}
+function onItemDrop(e, targetId) {
+  e.preventDefault();
+  dragOverId.value = null;
+  const srcId = e.dataTransfer?.getData(DOC_DRAG_MIME) || draggingId.value;
+  draggingId.value = null;
+  if (!srcId || srcId === targetId) return;
+  const targetEntry = treeMap.get(targetId);
+  if (!targetEntry) return;
+  const srcEntry = treeMap.get(srcId);
+  if (!srcEntry) return;
+  treeMap.set(srcId, {
+    ...srcEntry,
+    parentId: targetEntry.parentId,
+    order: (targetEntry.order ?? 0) - 0.5,
+    updatedAt: Date.now()
+  });
+  expandedIds.value = new Set(expandedIds.value);
+}
+function onItemDragEnd() {
+  draggingId.value = null;
+  dragOverId.value = null;
+}
+function getContextItems(item) {
+  return [
+    [
+      {
+        label: locale.value.rename,
+        icon: "i-lucide-pencil",
+        onSelect: () => startRename(item.id, item.label)
+      }
+    ],
+    [
+      {
+        label: locale.value.newChild,
+        icon: "i-lucide-file-plus",
+        onSelect: () => emit("create", item.id)
+      }
+    ],
+    [
+      {
+        label: locale.value.moveToTrash,
+        icon: "i-lucide-trash",
+        color: "error",
+        onSelect: () => {
+          const entry = treeMap.get(item.id);
+          if (!entry) return;
+          const { moveToTrash } = useTrash();
+          moveToTrash(item.id);
+        }
+      }
+    ]
+  ];
+}
+const showTrashExpanded = ref(false);
+</script>
+
+<template>
+  <div
+    class="flex flex-col h-full overflow-hidden"
+    :class="externalDragActive ? 'ring-2 ring-primary ring-inset' : ''"
+    @dragenter="allowFileDrop ? onDragEnter($event) : void 0"
+    @dragleave="allowFileDrop ? onDragLeave($event) : void 0"
+    @dragover="allowFileDrop ? onDragOver($event) : void 0"
+    @drop="allowFileDrop ? onFileDrop($event) : void 0"
+  >
+    <!-- Header slot -->
+    <slot name="header" />
+
+    <!-- File drop overlay -->
+    <div
+      v-if="externalDragActive"
+      class="absolute inset-0 z-10 bg-primary/10 flex items-center justify-center pointer-events-none rounded-lg"
+    >
+      <div class="text-center">
+        <UIcon name="i-lucide-upload" class="size-8 text-primary mb-2" />
+        <p class="text-sm text-primary font-medium">{{ locale.dropFilesHere }}</p>
+      </div>
+    </div>
+
+    <!-- Tree items -->
+    <div class="flex-1 overflow-y-auto py-1">
+      <template v-if="flatItems.length">
+        <div
+          v-for="item in flatItems"
+          :key="item.id"
+          :style="{ paddingLeft: `${item.depth * 16 + 8}px` }"
+          :draggable="draggable"
+          :class="[
+  'group flex items-center gap-1.5 pr-2 py-0.5 rounded-md cursor-pointer text-sm select-none',
+  selectedId === item.id ? 'bg-primary/10 text-primary' : 'hover:bg-muted text-default',
+  dragOverId === item.id ? 'bg-primary/20' : ''
+]"
+          @click="emit('select', item.id)"
+          @dblclick="startRename(item.id, item.label)"
+          @dragstart="onItemDragStart($event, item.id)"
+          @dragover="onItemDragOver($event, item.id)"
+          @drop="onItemDrop($event, item.id)"
+          @dragend="onItemDragEnd"
+        >
+          <!-- Expand toggle -->
+          <UButton
+            :icon="item.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            :class="item.hasChildren ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+            @click.stop="toggleExpand(item.id)"
+          />
+
+          <!-- Doc icon: custom meta.icon > doc type default -->
+          <UIcon
+            :name="item.meta?.icon ?? resolveDocType(item.type, registry).icon"
+            class="size-3.5 flex-shrink-0"
+            :style="item.meta?.color ? `color: ${item.meta.color}` : ''"
+            :class="item.meta?.color ? '' : 'text-muted'"
+          />
+          <!-- Color dot (shown only if color set but no custom icon) -->
+          <span
+            v-if="item.meta?.color && !item.meta?.icon"
+            class="size-1.5 rounded-full shrink-0 -ml-1"
+            :style="`background: ${item.meta.color}`"
+          />
+
+          <!-- Slot override or default label -->
+          <slot
+            name="item"
+            :entry="item"
+            :depth="item.depth"
+            :is-expanded="item.isExpanded"
+          >
+            <template v-if="renamingId === item.id">
+              <input
+                :id="`rename-${item.id}`"
+                v-model="renameValue"
+                class="flex-1 min-w-0 bg-transparent border-none outline-none text-sm"
+                @blur="commitRename(item.id)"
+                @keydown.enter.stop="commitRename(item.id)"
+                @keydown.escape.stop="renamingId = null"
+                @click.stop
+              >
+            </template>
+            <span
+              v-else
+              class="flex-1 min-w-0 truncate"
+            >{{ item.label }}</span>
+          </slot>
+
+          <!-- Context menu -->
+          <UDropdownMenu
+            :items="getContextItems(item)"
+            :content="{ align: 'end' }"
+          >
+            <UButton
+              icon="i-lucide-ellipsis"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              class="opacity-0 group-hover:opacity-100 flex-shrink-0"
+              @click.stop
+            />
+          </UDropdownMenu>
+        </div>
+      </template>
+
+      <!-- New doc button -->
+      <div class="px-2 py-1">
+        <UButton
+          icon="i-lucide-plus"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          :label="locale.newDocument"
+          class="w-full justify-start text-muted"
+          @click="emit('create', null)"
+        />
+      </div>
+
+      <!-- Empty state -->
+      <div
+        v-if="!flatItems.length"
+        class="px-4 py-8 text-center"
+      >
+        <slot name="empty">
+          <p class="text-sm text-muted">{{ locale.noDocuments }}</p>
+        </slot>
+      </div>
+
+      <!-- Trash section -->
+      <template v-if="showTrash && trashedItems.length">
+        <USeparator class="my-2" />
+        <div
+          class="flex items-center gap-1 px-2 py-1 cursor-pointer text-muted hover:text-default"
+          @click="showTrashExpanded = !showTrashExpanded"
+        >
+          <UIcon name="i-lucide-trash" class="size-4" />
+          <span class="text-xs font-medium flex-1">{{ locale.trash }} ({{ trashedItems.length }})</span>
+          <UIcon
+            :name="showTrashExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            class="size-3"
+          />
+        </div>
+
+        <template v-if="showTrashExpanded">
+          <div
+            v-for="item in trashedItems"
+            :key="item.id"
+            class="group flex items-center gap-1.5 pl-4 pr-2 py-0.5 text-sm text-muted"
+          >
+            <UIcon name="i-lucide-file-text" class="size-4 flex-shrink-0" />
+            <span class="flex-1 min-w-0 truncate">{{ item.label }}</span>
+            <UButton
+              icon="i-lucide-rotate-ccw"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              class="opacity-0 group-hover:opacity-100"
+              @click="restoreFromTrash(item.id)"
+            />
+            <UButton
+              icon="i-lucide-trash-2"
+              variant="ghost"
+              color="error"
+              size="xs"
+              class="opacity-0 group-hover:opacity-100"
+              @click="permanentlyDelete(item.id)"
+            />
+          </div>
+
+          <div class="px-2 py-1">
+            <UButton
+              icon="i-lucide-trash-2"
+              variant="ghost"
+              color="error"
+              size="xs"
+              :label="locale.emptyTrash"
+              class="w-full justify-start"
+              @click="emptyTrash()"
+            />
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- Footer slot -->
+    <slot name="footer" />
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+import type { AbracadabraLocale } from '../locale.js';
+type __VLS_Props = {
+    showTrash?: boolean;
+    allowFileDrop?: boolean;
+    draggable?: boolean;
+    selectedId?: string | null;
+    labels?: Partial<AbracadabraLocale['documentTree']>;
+};
+interface FlatItem {
+    id: string;
+    label: string;
+    type?: string;
+    meta?: Record<string, any>;
+    depth: number;
+    parentId: string | null;
+    order: number;
+    isExpanded: boolean;
+    hasChildren: boolean;
+}
+declare var __VLS_1: {}, __VLS_20: {
+    entry: FlatItem;
+    depth: number;
+    isExpanded: boolean;
+}, __VLS_42: {}, __VLS_85: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_20) => any;
+} & {
+    empty?: (props: typeof __VLS_42) => any;
+} & {
+    footer?: (props: typeof __VLS_85) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (docId: string) => any;
+    create: (parentId: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((docId: string) => any) | undefined;
+    onCreate?: ((parentId: string | null) => any) | undefined;
+}>, {
+    draggable: boolean;
+    showTrash: boolean;
+    allowFileDrop: boolean;
+    selectedId: string | null;
+}, {}, {}, {}, 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;
+    };
+};