@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/AEditor.vue

@@ -1,9 +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 },
@@ -13,7 +19,9 @@ const props = defineProps({
   showToolbar: { type: Boolean, required: false, default: true },
   showSuggestionMenu: { type: Boolean, required: false, default: true },
   showDragHandle: { type: Boolean, required: false, default: true },
-  docMeta: { type: Object, required: false }
+  docMeta: { type: Object, required: false },
+  parentType: { type: String, required: false },
+  metaSchema: { type: Array, required: false }
 });
 const emit = defineEmits(["ready", "update", "rename", "updateMeta"]);
 const model = defineModel({ type: null });
@@ -37,7 +45,36 @@ watch(ready, (val) => {
 });
 const editorRef = ref(null);
 const { items: toolbarItems } = useEditorToolbar({ docId: props.docId });
-const { items: suggestionItems } = useEditorSuggestions({ docId: props.docId });
+const resolvedMetaSchema = computed(() => {
+  if (props.metaSchema) return props.metaSchema;
+  const geoType = props.docMeta?.geoType;
+  if (geoType && geoType in GEO_TYPE_META_SCHEMAS)
+    return GEO_TYPE_META_SCHEMAS[geoType];
+  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;
+  if (!ed || !ready.value) return;
+  const check = () => {
+    const { $head } = ed.state.selection;
+    let inMeta = false;
+    for (let d = $head.depth; d >= 0; d--) {
+      if ($head.node(d).type.name === "documentMeta") {
+        inMeta = true;
+        break;
+      }
+    }
+    isInDocumentMeta.value = inMeta;
+  };
+  ed.on("selectionUpdate", check);
+  onCleanup(() => ed.off("selectionUpdate", check));
+});
+const suggestionItems = computed(
+  () => isInDocumentMeta.value ? propertiesOnlyItems.value : allSuggestionItems.value
+);
 const dragHandle = useEditorDragHandle();
 watchEffect(() => {
   const isReady = ready.value;
@@ -48,7 +85,63 @@ 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) {
+  emit("updateMeta", patch);
+}
+function initDocumentMeta(ed) {
+  if (metaInitDone) return;
+  const doc2 = ed.state.doc;
+  let metaPos = -1;
+  let metaNode = null;
+  doc2.forEach((node, offset) => {
+    if (node.type.name === "documentMeta") {
+      metaPos = offset;
+      metaNode = node;
+    }
+  });
+  if (metaPos === -1 || !metaNode) return;
+  if (metaNode.childCount > 0) {
+    metaInitDone = true;
+    return;
+  }
+  const docMeta = props.docMeta;
+  if (!docMeta) return;
+  const schema = resolvedMetaSchema.value;
+  const userFields = docMeta._metaFields ?? [];
+  const wasAlreadyInitialized = !!docMeta._metaInitialized;
+  if (wasAlreadyInitialized && !schema.length) {
+    metaInitDone = true;
+    return;
+  }
+  if (!wasAlreadyInitialized) {
+    handleMetaUpdate({ _metaInitialized: true });
+  }
+  if (!schema.length && !userFields.length) {
+    metaInitDone = true;
+    return;
+  }
+  const metaFieldType = ed.schema.nodes.metaField;
+  if (!metaFieldType) return;
+  const nodesToInsert = wasAlreadyInitialized ? schema.map((f) => metaFieldType.create(schemaFieldToAttrs(f))) : [
+    ...schema.map((f) => metaFieldType.create(schemaFieldToAttrs(f))),
+    ...userFields.map((f) => metaFieldType.create(userFieldToAttrs(f)))
+  ];
+  const { tr } = ed.state;
+  const insertPos = metaPos + 1;
+  tr.insert(insertPos, Fragment.fromArray(nodesToInsert));
+  ed.view.dispatch(tr);
+  if (!wasAlreadyInitialized && userFields.length) {
+    handleMetaUpdate({ _metaFields: void 0 });
+  }
+  metaInitDone = true;
+}
 let syncingFromEditor = false;
 const _lastEmittedHeader = ref("");
 function getHeaderText(ed) {
@@ -106,8 +199,12 @@ watchEffect((onCleanup) => {
   }
   function onUpdate() {
     syncHeaderToTree(ed);
+    initDocumentMeta(ed);
   }
-  nextTick(() => doInitialSync());
+  nextTick(() => {
+    doInitialSync();
+    initDocumentMeta(ed);
+  });
   ed.on("update", onUpdate);
   onCleanup(() => ed.off("update", onUpdate));
 });
@@ -126,7 +223,7 @@ const editorHandlers = {
     isActive: () => false
   }
 };
-const mentionItems = computed(
+const _mentionItems = computed(
   () => registry.getAllMentionProviders().flatMap((p) => p.label ? [p] : [])
 );
 function onPlusClick(e, onClick) {
@@ -141,7 +238,10 @@ function onPlusClick(e, onClick) {
 <template>
   <ClientOnly>
     <!-- Loading skeleton while extensions and child provider are loading -->
-    <div v-if="!extensions.length" class="p-6 space-y-3">
+    <div
+      v-if="!extensions.length"
+      class="p-6 space-y-3"
+    >
       <div class="h-8 w-64 animate-pulse rounded bg-elevated" />
       <div class="h-4 w-full animate-pulse rounded bg-elevated" />
       <div class="h-4 w-3/4 animate-pulse rounded bg-elevated" />
@@ -151,6 +251,7 @@ function onPlusClick(e, onClick) {
     <UEditor
       v-else
       ref="editorRef"
+      v-slot="{ editor }"
       v-model="model"
       :content-type="contentType"
       :editable="editable"
@@ -158,11 +259,14 @@ function onPlusClick(e, onClick) {
       :starter-kit="{ undoRedo: false, codeBlock: false, document: false }"
       :handlers="editorHandlers"
       :placeholder="placeholder"
-      v-slot="{ editor }"
       @update:model-value="emit('update', $event)"
     >
       <!-- Default slot: app can override entire editor content -->
-      <slot :editor="editor" :connected-users="connectedUsers" :ready="ready">
+      <slot
+        :editor="editor"
+        :connected-users="connectedUsers"
+        :ready="ready"
+      >
         <!-- ── Bubble toolbar (appears when text is selected) ─────────────── -->
         <UEditorToolbar
           v-if="showToolbar"
@@ -179,11 +283,17 @@ function onPlusClick(e, onClick) {
           :items="suggestionItems"
         />
 
+        <!-- ── Emoji menu (`:` trigger) ───────────────────────────────────── -->
+        <UEditorEmojiMenu
+          :editor="editor"
+          :items="emojiItems"
+        />
+
         <!-- ── Drag handle — plus button + grip dropdown ───────────────────── -->
         <UEditorDragHandle
           v-if="showDragHandle"
-          :editor="editor"
           v-slot="{ ui, onClick }"
+          :editor="editor"
           @node-change="dragHandle.onNodeChange"
         >
           <!-- Plus: insert block via slash menu -->

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

@@ -1,4 +1,5 @@
 import type { DocPageMeta } from '../types.js';
+import type { MetaField } from '../utils/docTypes.js';
 type __VLS_Props = {
     /** Y.Doc ID to load as a child document */
     docId: string;
@@ -18,6 +19,10 @@ type __VLS_Props = {
     showDragHandle?: boolean;
     /** Current document metadata from the doc-tree — written into MetaField storage */
     docMeta?: DocPageMeta;
+    /** Parent document's type key — used to resolve metaSchema for auto-inserting chips */
+    parentType?: string;
+    /** Override metaSchema directly instead of resolving from parentType */
+    metaSchema?: MetaField[];
 };
 type __VLS_ModelProps = {
     modelValue?: any;
@@ -37,17 +42,17 @@ 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;
-    ready: () => 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;
-    onReady?: (() => 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";
     editable: boolean;

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 },
@@ -207,7 +209,10 @@ function onOpen(v) {
 </script>
 
 <template>
-  <UPopover v-model:open="open" @update:open="onOpen">
+  <UPopover
+    v-model:open="open"
+    @update:open="onOpen"
+  >
     <button
       type="button"
       class="flex items-center gap-2 h-8 px-2 rounded-md border border-default hover:bg-elevated/60 transition-colors"
@@ -241,7 +246,10 @@ function onOpen(v) {
             :title="name"
             @click="select(name)"
           >
-            <UIcon :name="`i-lucide-${name}`" class="size-4" />
+            <UIcon
+              :name="`i-lucide-${name}`"
+              class="size-4"
+            />
           </button>
         </div>
         <button

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;