@abraca/nuxt 0.3.0 → 1.6.0

package/dist/runtime/components/AEditor.vue

@@ -1,12 +1,15 @@
 <script setup>
 import { shallowRef, ref, watch, watchEffect, computed, nextTick } from "vue";
+import { useNuxtApp } from "#imports";
 import { Fragment } from "@tiptap/pm/model";
+import { useSyncedMap } from "../composables/useYDoc";
 import { resolveDocType, GEO_TYPE_META_SCHEMAS } from "../utils/docTypes";
 import { schemaFieldToAttrs, userFieldToAttrs } from "../extensions/meta-field";
 import { useEditor } from "../composables/useEditor";
 import { useEditorToolbar } from "../composables/useEditorToolbar";
 import { useEditorSuggestions } from "../composables/useEditorSuggestions";
 import { useEditorDragHandle } from "../composables/useEditorDragHandle";
+import { useEditorEmojis } from "../composables/useEditorEmojis";
 const props = defineProps({
   docId: { type: String, required: true },
   docLabel: { type: String, required: false },
@@ -50,6 +53,7 @@ const resolvedMetaSchema = computed(() => {
   return resolveDocType(props.parentType, registry).metaSchema ?? [];
 });
 const { items: allSuggestionItems, propertiesOnlyItems } = useEditorSuggestions({ docId: props.docId });
+const { items: emojiItems } = useEditorEmojis();
 const isInDocumentMeta = ref(false);
 watchEffect((onCleanup) => {
   const ed = editorRef.value?.editor;
@@ -81,6 +85,11 @@ watchEffect(() => {
   if (!storage) return;
   storage.pageMeta = docMeta ?? null;
   storage.updateMeta = (patch) => emit("updateMeta", patch);
+  storage.mentionItems = (connectedUsers.value ?? []).map((u) => ({
+    id: u.publicKey || u.name,
+    label: u.name,
+    avatar: u.color ? { alt: u.name, style: { borderColor: u.color, borderWidth: "2px", borderStyle: "solid" } } : { alt: u.name }
+  }));
 });
 let metaInitDone = false;
 function handleMetaUpdate(patch) {
@@ -214,7 +223,7 @@ const editorHandlers = {
     isActive: () => false
   }
 };
-const mentionItems = computed(
+const _mentionItems = computed(
   () => registry.getAllMentionProviders().flatMap((p) => p.label ? [p] : [])
 );
 function onPlusClick(e, onClick) {
@@ -274,6 +283,12 @@ function onPlusClick(e, onClick) {
           :items="suggestionItems"
         />
 
+        <!-- ── Emoji menu (`:` trigger) ───────────────────────────────────── -->
+        <UEditorEmojiMenu
+          :editor="editor"
+          :items="emojiItems"
+        />
+
         <!-- ── Drag handle — plus button + grip dropdown ───────────────────── -->
         <UEditorDragHandle
           v-if="showDragHandle"

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

@@ -42,16 +42,16 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
     rename: (label: string) => any;
-    updateMeta: (patch: Partial<DocPageMeta>) => any;
     update: (content: any) => any;
+    "update:modelValue": (value: any) => any;
+    updateMeta: (patch: Partial<DocPageMeta>) => any;
     ready: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onRename?: ((label: string) => any) | undefined;
-    onUpdateMeta?: ((patch: Partial<DocPageMeta>) => any) | undefined;
     onUpdate?: ((content: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    onUpdateMeta?: ((patch: Partial<DocPageMeta>) => any) | undefined;
     onReady?: (() => any) | undefined;
 }>, {
     contentType: "json" | "html" | "markdown";

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

@@ -4,9 +4,61 @@ type __VLS_Props = {
     labels?: Partial<AbracadabraLocale['floatingWindow']>;
 };
 declare var __VLS_6: {
-    window: any;
+    window: {
+        id: string;
+        title: string;
+        icon?: string | undefined;
+        docId: string;
+        docType?: string | undefined;
+        channelId?: string | undefined;
+        provider: any;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        zIndex: number;
+        isMinimized: boolean;
+        isMaximized: boolean;
+        isFocused: boolean;
+        prevX: number;
+        prevY: number;
+        prevWidth: number;
+        prevHeight: number;
+        minimizeTarget?: {
+            x: number;
+            y: number;
+        } | undefined;
+        initialTab?: "editor" | "chat" | undefined;
+        meta?: Record<string, any> | undefined;
+    };
 }, __VLS_29: {
-    window: any;
+    window: {
+        id: string;
+        title: string;
+        icon?: string | undefined;
+        docId: string;
+        docType?: string | undefined;
+        channelId?: string | undefined;
+        provider: any;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        zIndex: number;
+        isMinimized: boolean;
+        isMaximized: boolean;
+        isFocused: boolean;
+        prevX: number;
+        prevY: number;
+        prevWidth: number;
+        prevHeight: number;
+        minimizeTarget?: {
+            x: number;
+            y: number;
+        } | undefined;
+        initialTab?: "editor" | "chat" | undefined;
+        meta?: Record<string, any> | undefined;
+    };
 };
 type __VLS_Slots = {} & {
     'header-extra'?: (props: typeof __VLS_6) => any;

package/dist/runtime/components/AFloatingWindow.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { useAbraLocale } from "../composables/useAbraLocale";
+import { useWindowManager } from "../composables/useWindowManager";
 const props = defineProps({
   windowId: { type: String, required: true },
   labels: { type: Object, required: false }
@@ -14,15 +15,15 @@ const {
   closeWindow,
   focusWindow,
   minimizeWindow,
-  restoreWindow,
+  restoreWindow: _restoreWindow,
   toggleMaximize,
   moveWindow,
   resizeWindow
 } = useWindowManager();
 const win = computed(() => windows.get(props.windowId));
-const isAnimatingOut = ref(false);
+const _isAnimatingOut = ref(false);
 const animStyle = ref({});
-watch(() => win.value?.minimized, (minimized, wasMinimized) => {
+watch(() => win.value?.isMinimized, (minimized, wasMinimized) => {
   if (minimized && !wasMinimized) {
     const w = win.value;
     if (!w) return;
@@ -46,17 +47,17 @@ let wasMaximized = false;
 function onHeaderPointerDown(e) {
   if (e.target.closest("[data-no-drag]")) return;
   const w = win.value;
-  if (!w || w.minimized) return;
+  if (!w || w.isMinimized) return;
   focusWindow(props.windowId);
   e.currentTarget.setPointerCapture(e.pointerId);
-  wasMaximized = w.maximized;
+  wasMaximized = w.isMaximized;
   dragStart = { mx: e.clientX, my: e.clientY, wx: w.x, wy: w.y };
 }
 function onHeaderPointerMove(e) {
   if (!dragStart) return;
   const w = win.value;
   if (!w) return;
-  if (wasMaximized && w.maximized) {
+  if (wasMaximized && w.isMaximized) {
     const dx = Math.abs(e.clientX - dragStart.mx);
     const dy = Math.abs(e.clientY - dragStart.my);
     if (dx < 5 && dy < 5) return;
@@ -84,7 +85,7 @@ let resizeDir = null;
 let resizeStart = null;
 function onResizePointerDown(e, dir) {
   const w = win.value;
-  if (!w || w.maximized) return;
+  if (!w || w.isMaximized) return;
   e.preventDefault();
   focusWindow(props.windowId);
   e.target.setPointerCapture(e.pointerId);
@@ -139,8 +140,8 @@ const resizeEdgeClass = {
 const windowStyle = computed(() => {
   const w = win.value;
   if (!w) return {};
-  if (w.minimized) return animStyle.value;
-  if (w.maximized) return { left: "0", top: "0", width: "100vw", height: "100vh", zIndex: String(w.zIndex) };
+  if (w.isMinimized) return animStyle.value;
+  if (w.isMaximized) return { left: "0", top: "0", width: "100vw", height: "100vh", zIndex: String(w.zIndex) };
   return {
     left: `${w.x}px`,
     top: `${w.y}px`,
@@ -154,13 +155,13 @@ const windowStyle = computed(() => {
 
 <template>
   <div
-    v-if="win && !win.minimized"
+    v-if="win && !win.isMinimized"
     :style="windowStyle"
     class="absolute pointer-events-auto flex flex-col bg-elevated border border-muted rounded-xl shadow-xl overflow-hidden backdrop-blur-sm"
     @pointerdown="focusWindow(windowId)"
   >
     <!-- Resize handles -->
-    <template v-if="!win.maximized">
+    <template v-if="!win.isMaximized">
       <div
         v-for="dir in resizeDirs"
         :key="dir"
@@ -176,7 +177,7 @@ const windowStyle = computed(() => {
     <!-- Header -->
     <div
       class="flex items-center gap-2 px-3 py-2 border-b border-muted select-none bg-muted/30"
-      :style="{ cursor: win.maximized ? 'default' : 'grab' }"
+      :style="{ cursor: win.isMaximized ? 'default' : 'grab' }"
       @pointerdown="onHeaderPointerDown"
       @pointermove="onHeaderPointerMove"
       @pointerup="onHeaderPointerUp"
@@ -206,11 +207,11 @@ const windowStyle = computed(() => {
           @click.stop="minimizeWindow(windowId)"
         />
         <UButton
-          :icon="win.maximized ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
+          :icon="win.isMaximized ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
           color="neutral"
           variant="ghost"
           size="xs"
-          :aria-label="win.maximized ? locale.restore : locale.maximize"
+          :aria-label="win.isMaximized ? locale.restore : locale.maximize"
           @click.stop="toggleMaximize(windowId)"
         />
         <UButton

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

@@ -4,9 +4,61 @@ type __VLS_Props = {
     labels?: Partial<AbracadabraLocale['floatingWindow']>;
 };
 declare var __VLS_6: {
-    window: any;
+    window: {
+        id: string;
+        title: string;
+        icon?: string | undefined;
+        docId: string;
+        docType?: string | undefined;
+        channelId?: string | undefined;
+        provider: any;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        zIndex: number;
+        isMinimized: boolean;
+        isMaximized: boolean;
+        isFocused: boolean;
+        prevX: number;
+        prevY: number;
+        prevWidth: number;
+        prevHeight: number;
+        minimizeTarget?: {
+            x: number;
+            y: number;
+        } | undefined;
+        initialTab?: "editor" | "chat" | undefined;
+        meta?: Record<string, any> | undefined;
+    };
 }, __VLS_29: {
-    window: any;
+    window: {
+        id: string;
+        title: string;
+        icon?: string | undefined;
+        docId: string;
+        docType?: string | undefined;
+        channelId?: string | undefined;
+        provider: any;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        zIndex: number;
+        isMinimized: boolean;
+        isMaximized: boolean;
+        isFocused: boolean;
+        prevX: number;
+        prevY: number;
+        prevWidth: number;
+        prevHeight: number;
+        minimizeTarget?: {
+            x: number;
+            y: number;
+        } | undefined;
+        initialTab?: "editor" | "chat" | undefined;
+        meta?: Record<string, any> | undefined;
+    };
 };
 type __VLS_Slots = {} & {
     'header-extra'?: (props: typeof __VLS_6) => any;

package/dist/runtime/components/AIconPicker.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref } from "vue";
+import { useAbraLocale } from "#imports";
 const props = defineProps({
   modelValue: { type: String, required: false },
   placeholder: { type: String, required: false },

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

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

package/dist/runtime/components/AInviteRedeemModal.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useInvites } from "../composables/useInvites";
+import { useAbracadabra } from "../composables/useAbracadabra";
+const props = defineProps({
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:open"]);
+const { redeem } = useInvites();
+const { currentServerUrl } = useAbracadabra();
+const code = ref("");
+const isLoading = ref(false);
+const error = ref(null);
+watch(() => props.open, (open) => {
+  if (!open) return;
+  code.value = "";
+  error.value = null;
+});
+function onInput(e) {
+  const raw = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+  const parts = raw.match(/.{1,4}/g) ?? [];
+  code.value = parts.join("-").slice(0, 14);
+}
+async function handleRedeem() {
+  const trimmed = code.value.trim();
+  if (!trimmed) return;
+  isLoading.value = true;
+  error.value = null;
+  try {
+    await redeem(trimmed);
+    emit("update:open", false);
+  } catch (e) {
+    error.value = e?.message ?? "Failed to redeem invite";
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :open="props.open"
+    :ui="{
+  content: 'sm:max-w-md',
+  header: 'hidden',
+  footer: 'hidden'
+}"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <div class="flex flex-col gap-5 p-6">
+        <!-- Header -->
+        <div class="flex flex-col items-center text-center gap-3 pt-4">
+          <div class="w-12 h-12 rounded-2xl bg-(--ui-bg-elevated) flex items-center justify-center">
+            <UIcon
+              name="i-lucide-ticket"
+              class="size-6 text-(--color-primary-500)"
+            />
+          </div>
+          <div>
+            <h2 class="text-xl font-bold text-(--ui-text-highlighted) tracking-tight">
+              Redeem Invite
+            </h2>
+            <p class="text-sm text-(--ui-text-muted)">
+              Enter your invite code to join.
+            </p>
+            <p
+              v-if="currentServerUrl"
+              class="text-xs text-(--ui-text-dimmed) flex items-center gap-1 justify-center mt-1"
+            >
+              <UIcon
+                name="i-lucide-server"
+                class="size-3"
+              />
+              {{ currentServerUrl }}
+            </p>
+          </div>
+        </div>
+
+        <UInput
+          :model-value="code"
+          placeholder="XXXX-XXXX-XXXX"
+          class="font-mono tracking-widest"
+          size="lg"
+          autofocus
+          :disabled="isLoading"
+          @input="onInput"
+          @keydown.enter="handleRedeem"
+        />
+
+        <UAlert
+          v-if="error"
+          color="error"
+          variant="soft"
+          icon="i-lucide-triangle-alert"
+          :description="error"
+        />
+
+        <UButton
+          icon="i-lucide-ticket-check"
+          :loading="isLoading"
+          :disabled="code.replace(/-/g, '').length < 12"
+          size="lg"
+          block
+          @click="handleRedeem"
+        >
+          Redeem
+        </UButton>
+
+        <UButton
+          label="Cancel"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          block
+          :disabled="isLoading"
+          @click="emit('update:open', false)"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

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

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

package/dist/runtime/components/ANodePanel.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { ref, computed } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import { useSyncedMap } from "../composables/useYDoc";
+import { navigateTo } from "#imports";
 import { useChildTree } from "../composables/useChildTree";
 import { useAbraLocale } from "../composables/useAbraLocale";
 import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions";
@@ -135,7 +138,7 @@ const addFieldMenuItems = computed(
     v-model:open="open"
     side="right"
     :title="nodeLabel || 'Document'"
-    :ui="{ width: 'sm:max-w-2xl' }"
+    :ui="{ content: 'sm:max-w-2xl' }"
     @update:open="(v) => !v && emit('close')"
   >
     <template #header>
@@ -352,7 +355,12 @@ const addFieldMenuItems = computed(
             placeholder="Add tag…"
             size="sm"
             @keydown.enter.prevent="addTag"
-            @keydown.comma.prevent="addTag"
+            @keydown="($event2) => {
+  if ($event2.key === ',') {
+    $event2.preventDefault();
+    addTag();
+  }
+}"
           />
         </div>
 

package/dist/runtime/components/ANotifications.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { useAbraLocale } from "../composables/useAbraLocale";
+import { useNotifications } from "../composables/useNotifications";
 const notifProps = defineProps({
   labels: { type: Object, required: false }
 });
@@ -41,7 +43,7 @@ function openAndMarkFetched() {
         v-model:open="isOpen"
         :title="locale.title"
         side="right"
-        :ui="{ width: 'max-w-sm' }"
+        :ui="{ content: 'max-w-sm' }"
       >
         <template #header>
           <div class="flex items-center justify-between w-full">

package/dist/runtime/components/APermissionGuard.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 import { useDocumentPermissions } from "../composables/useDocumentPermissions";
 import { useAbraLocale } from "../composables/useAbraLocale";
 const props = defineProps({

package/dist/runtime/components/APresence.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { useNuxtApp, useAppConfig } from "#imports";
 import { useAwarenessOf } from "../composables/useYDoc";
 import { avatarBorderStyle } from "../utils/avatarStyle";
 const props = defineProps({

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

@@ -1,4 +1,3 @@
-export declare const ABRA_DOC_KEY: unique symbol;
 type __VLS_Props = {
     docId: string;
     /** Wrapper element tag. Default: 'div'. Use 'template' for a renderless wrapper. */

package/dist/runtime/components/AProvider.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { shallowRef, ref, watch, provide } from "vue";
-export const ABRA_DOC_KEY = /* @__PURE__ */ Symbol("abracadabra:doc-context");
+import { useNuxtApp } from "#imports";
+const ABRA_DOC_KEY = /* @__PURE__ */ Symbol("abracadabra:doc-context");
 const props = defineProps({
   docId: { type: String, required: true },
   tag: { type: String, required: false, default: "div" }
@@ -10,22 +11,34 @@ const childProvider = shallowRef(null);
 const childDoc = shallowRef(null);
 const synced = ref(false);
 const error = ref(null);
-watch(rootProvider, async (prov) => {
+let _currentCp = null;
+let _currentHandler = null;
+watch(rootProvider, async (prov, _, onCleanup) => {
+  if (_currentCp && _currentHandler) _currentCp.off("synced", _currentHandler);
+  _currentCp = null;
+  _currentHandler = null;
   if (!prov || !props.docId) return;
   try {
     const cp = await prov.loadChild(props.docId);
     childProvider.value = cp;
     childDoc.value = cp?.document ?? null;
     if (cp) {
-      cp.on("synced", ({ state }) => {
+      _currentHandler = ({ state }) => {
         synced.value = state;
-      });
+      };
+      cp.on("synced", _currentHandler);
+      _currentCp = cp;
       synced.value = cp.synced ?? false;
     }
   } catch (e) {
     error.value = e?.message ?? String(e);
     console.error("[AbracadabraProvider] Failed to load child provider:", e);
   }
+  onCleanup(() => {
+    if (_currentCp && _currentHandler) _currentCp.off("synced", _currentHandler);
+    _currentCp = null;
+    _currentHandler = null;
+  });
 }, { immediate: true });
 provide(ABRA_DOC_KEY, {
   childProvider,

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

@@ -1,4 +1,3 @@
-export declare const ABRA_DOC_KEY: unique symbol;
 type __VLS_Props = {
     docId: string;
     /** Wrapper element tag. Default: 'div'. Use 'template' for a renderless wrapper. */

package/dist/runtime/components/ARoleBadge.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 import { useAbraLocale } from "../composables/useAbraLocale";
 const props = defineProps({
   role: { type: String, required: true },

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    created: (args_0: {
+        id: string;
+    }) => any;
+    "update:open": (v: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCreated?: ((args_0: {
+        id: string;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;