@abraca/nuxt 2.0.11 → 2.4.0

package/dist/runtime/composables/useWebRTC.js

@@ -18,18 +18,41 @@ function _wireEvents(rtc) {
     rtc.on(event, handler);
     _unbinds.push(() => rtc.off(event, handler));
   };
+  function normalizePeer(p) {
+    const peerId = p?.peerId ?? p?.peer_id;
+    return {
+      ...p,
+      peerId,
+      peer_id: peerId,
+      displayName: p?.displayName ?? p?.name,
+      color: p?.color
+    };
+  }
   on("connected", () => {
     isConnected.value = true;
     webrtcStatus.value = "connected";
-    localPeerId.value = rtc.localPeerId;
+    const newLocalId = rtc.localPeerId;
+    localPeerId.value = newLocalId;
+    const next = /* @__PURE__ */ new Map();
+    const sdkPeers = rtc.peers instanceof Map ? rtc.peers : null;
+    if (sdkPeers) {
+      for (const [pid, p] of sdkPeers.entries()) {
+        if (!pid || pid === newLocalId) continue;
+        next.set(pid, normalizePeer(p));
+      }
+    }
+    peers.value = next;
   });
   on("disconnected", () => {
     isConnected.value = false;
     webrtcStatus.value = "disconnected";
   });
   on("peerJoined", (peer) => {
+    const norm = normalizePeer(peer);
+    if (!norm.peerId) return;
+    if (norm.peerId === localPeerId.value) return;
     const next = new Map(peers.value);
-    next.set(peer.peerId, peer);
+    next.set(norm.peerId, norm);
     peers.value = next;
   });
   on("peerLeft", ({ peerId }) => {
@@ -40,6 +63,13 @@ function _wireEvents(rtc) {
     nextE2ee.delete(peerId);
     e2eeEstablishedPeers.value = nextE2ee;
   });
+  on("peerProfile", ({ peerId, name, color }) => {
+    const existing = peers.value.get(peerId);
+    if (!existing) return;
+    const next = new Map(peers.value);
+    next.set(peerId, { ...existing, displayName: name, name, color });
+    peers.value = next;
+  });
   on("peerConnectionState", ({ peerId, state }) => {
     const existing = peers.value.get(peerId);
     if (existing) {
@@ -100,7 +130,7 @@ function fromBase64Url(str) {
 }
 async function connect(options) {
   if (_rtc && isConnected.value) return;
-  const { provider, keystore, isClaimed } = useAbracadabra();
+  const { provider, keystore, isClaimed, userName, userColor } = useAbracadabra();
   if (!provider.value) return;
   const config = useRuntimeConfig();
   const webrtcConfig = config.public.abracadabra?.webrtc ?? {};
@@ -138,8 +168,17 @@ async function connect(options) {
   }
   const rtc = AbracadabraWebRTC.fromProvider(provider.value, {
     iceServers: resolvedIceServers,
-    enableFileTransfer: webrtcConfig.fileTransfer ?? false,
-    e2ee: e2eeIdentity
+    // Default file-transfer ON. The SDK's default (false) means
+    // `useFileTransfer().sendFile()` queues bytes onto a data channel that
+    // never gets created → silent 0 % stuck transfer. Apps that explicitly
+    // want to disable can pass `webrtc.fileTransfer: false` in nuxt.config.
+    enableFileTransfer: webrtcConfig.fileTransfer ?? true,
+    e2ee: e2eeIdentity,
+    // Pass identity through so peers can label each other in the mesh.
+    // Without these the SDK's `peerProfile` event never fires and the UI
+    // shows opaque peer IDs ("peer-jl0z7m" etc.) instead of usernames.
+    displayName: userName.value || void 0,
+    color: userColor.value || void 0
   });
   _initWebRTC(rtc);
   await rtc.connect();

package/dist/runtime/extensions/document-meta.js

@@ -1,5 +1,7 @@
 import { Node } from "@tiptap/core";
 import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import DocumentMetaView from "./views/DocumentMetaView.vue";
 export const DocumentMeta = Node.create({
   name: "documentMeta",
   content: "inline*",
@@ -10,6 +12,9 @@ export const DocumentMeta = Node.create({
   renderHTML() {
     return ["div", { "data-type": "document-meta" }, 0];
   },
+  addNodeView() {
+    return VueNodeViewRenderer(DocumentMetaView);
+  },
   addKeyboardShortcuts() {
     return {
       Backspace: ({ editor }) => {

package/dist/runtime/extensions/timeline.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Timeline + TimelineItem TipTap nodes.
+ *
+ * Vertical event timeline with per-item icon, label, and freeform date.
+ * Optional builtin — disabled via `abracadabra.disabledBuiltins: ['timeline']`.
+ *
+ * Ported 1:1 from cou-sh/app/extensions/timeline.ts.
+ */
+import { Node } from '@tiptap/core';
+export declare const TimelineItem: Node<any, any>;
+export declare const Timeline: Node<any, any>;

package/dist/runtime/extensions/timeline.js

@@ -0,0 +1,52 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import TimelineView from "./views/TimelineView.vue";
+import TimelineItemView from "./views/TimelineItemView.vue";
+export const TimelineItem = Node.create({
+  name: "timelineItem",
+  content: "block+",
+  addAttributes() {
+    return {
+      date: { default: "" },
+      label: { default: "Event" },
+      icon: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-timeline-item]",
+        getAttrs: (el) => ({
+          date: el.getAttribute("data-date") || "",
+          label: el.getAttribute("data-label") || "Event",
+          icon: el.getAttribute("data-icon") || ""
+        })
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({
+      "data-timeline-item": "",
+      "data-date": HTMLAttributes.date,
+      "data-label": HTMLAttributes.label,
+      "data-icon": HTMLAttributes.icon
+    }), 0];
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(TimelineItemView);
+  }
+});
+export const Timeline = Node.create({
+  name: "timeline",
+  group: "block",
+  content: "timelineItem+",
+  parseHTML() {
+    return [{ tag: "div[data-timeline]" }];
+  },
+  renderHTML() {
+    return ["div", { "data-timeline": "" }, 0];
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(TimelineView);
+  }
+});

package/dist/runtime/extensions/views/DocumentMetaView.d.vue.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/DocumentMetaView.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from "vue";
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { buildMetaMenuItems } from "../../composables/useMetaMenuItems";
+const props = defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+const items = computed(() => {
+  void props.node.content.size;
+  return buildMetaMenuItems(props.editor);
+});
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    data-type="document-meta"
+    class="group/meta"
+    :class="{ 'meta-empty': node.content.size === 0 && !props.editor.isEditable }"
+    draggable="false"
+    @dragstart.prevent.stop
+  >
+    <NodeViewContent
+      as="span"
+      style="display: contents"
+    />
+    <span
+      v-show="props.editor.isEditable"
+      contenteditable="false"
+      class="inline-flex items-center"
+    >
+      <UDropdownMenu
+        :items="items"
+        :content="{ side: 'bottom', align: 'start' }"
+        :ui="{ content: 'w-48' }"
+      >
+        <UButton
+          icon="i-lucide-plus"
+          size="2xs"
+          color="neutral"
+          variant="ghost"
+          class="opacity-0 group-hover/meta:opacity-40 hover:!opacity-100 transition-opacity"
+        />
+      </UDropdownMenu>
+    </span>
+    <span
+      v-if="node.content.size === 0 && props.editor.isEditable"
+      class="text-sm text-(--ui-text-muted) pointer-events-none opacity-60"
+    >
+      Type '/' to add a property…
+    </span>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/DocumentMetaView.vue.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/TimelineItemView.d.vue.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/TimelineItemView.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import ANodeInlineLabel from "../../components/editor/ANodeInlineLabel.vue";
+import AIconPickerPopover from "../../components/editor/AIconPickerPopover.vue";
+const props = defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+const date = computed(() => props.node.attrs.date || "");
+const label = computed(() => props.node.attrs.label || "");
+const icon = computed(() => props.node.attrs.icon || "");
+const iconShort = computed(() => icon.value.replace(/^i-lucide-/, ""));
+const iconPopoverOpen = ref(false);
+const datePopoverOpen = ref(false);
+const dateDraft = ref("");
+watch(datePopoverOpen, (open) => {
+  if (open) dateDraft.value = date.value;
+});
+function setLabel(v) {
+  props.updateAttributes({ label: v });
+}
+function setIcon(name) {
+  props.updateAttributes({ icon: name ? `i-lucide-${name}` : "" });
+  iconPopoverOpen.value = false;
+}
+function commitDate() {
+  props.updateAttributes({ date: dateDraft.value.trim() });
+  datePopoverOpen.value = false;
+}
+function onDateKeydown(e) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    commitDate();
+  }
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="group/item relative ps-8 pb-5 last:pb-0"
+  >
+    <div
+      class="absolute left-0 top-1.5 size-4 rounded-full bg-(--ui-bg) border-2 border-(--ui-border-accented) flex items-center justify-center"
+      contenteditable="false"
+    >
+      <UIcon
+        v-if="icon"
+        :name="icon"
+        class="size-2.5 text-(--ui-primary)"
+      />
+      <div
+        v-else
+        class="size-1.5 rounded-full bg-(--ui-primary)"
+      />
+    </div>
+    <div
+      class="flex items-center gap-2 text-sm"
+      contenteditable="false"
+    >
+      <AIconPickerPopover
+        :model-value="iconShort"
+        :open="iconPopoverOpen"
+        @update:model-value="setIcon"
+        @update:open="iconPopoverOpen = $event"
+      >
+        <button
+          class="shrink-0 size-5 flex items-center justify-center rounded-sm hover:bg-(--ui-bg-elevated)/60 text-(--ui-text-muted)"
+          :title="icon ? 'Change icon' : 'Add icon'"
+          @click.stop="iconPopoverOpen = true"
+        >
+          <UIcon
+            :name="icon || 'i-lucide-plus'"
+            class="size-4"
+            :class="!icon ? 'opacity-0 group-hover/item:opacity-60 transition-opacity' : ''"
+          />
+        </button>
+      </AIconPickerPopover>
+      <ANodeInlineLabel
+        :model-value="label"
+        placeholder="Event"
+        variant="title"
+        @update:model-value="setLabel"
+      />
+      <UPopover
+        v-model:open="datePopoverOpen"
+        :content="{ align: 'end' }"
+      >
+        <button
+          class="text-xs text-(--ui-text-muted) hover:text-(--ui-text) rounded-sm hover:bg-(--ui-bg-elevated)/60 px-1.5 py-0.5 inline-flex items-center gap-1"
+          type="button"
+        >
+          <UIcon
+            name="i-lucide-calendar"
+            class="size-3"
+          />
+          <span v-if="date">{{ date }}</span>
+          <span
+            v-else
+            class="italic"
+          >Add date</span>
+        </button>
+        <template #content>
+          <div class="p-2 w-56 flex flex-col gap-1">
+            <UInput
+              v-model="dateDraft"
+              autofocus
+              size="sm"
+              placeholder="e.g. 2026-04-20 or April 2026"
+              @keydown="onDateKeydown"
+              @blur="commitDate"
+            />
+          </div>
+        </template>
+      </UPopover>
+    </div>
+    <div class="mt-1 text-sm text-(--ui-text-muted)">
+      <NodeViewContent class="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*]:my-1" />
+    </div>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/TimelineItemView.vue.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/TimelineView.d.vue.ts

@@ -0,0 +1,9 @@
+/**
+ * NodeView for the `timeline` block — renders the vertical guide line.
+ *
+ * Ported 1:1 from cou-sh/app/components/editor/TimelineView.vue.
+ */
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/extensions/views/TimelineView.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5 ms-2 relative"
+  >
+    <div
+      class="absolute left-2 top-2 bottom-2 w-px bg-(--ui-border)"
+      contenteditable="false"
+    />
+    <NodeViewContent />
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/TimelineView.vue.d.ts

@@ -0,0 +1,9 @@
+/**
+ * NodeView for the `timeline` block — renders the vertical guide line.
+ *
+ * Ported 1:1 from cou-sh/app/components/editor/TimelineView.vue.
+ */
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/locale.d.ts

@@ -232,6 +232,8 @@ export interface AbracadabraLocale {
         graph: {
             addNode: string;
             empty: string;
+            loading: string;
+            untitled: string;
             pin: string;
             unpin: string;
             openAsDoc: string;

package/dist/runtime/locale.js

@@ -218,6 +218,8 @@ export const DEFAULT_LOCALE = {
     graph: {
       addNode: "Add node",
       empty: "No nodes yet",
+      loading: "Loading graph\u2026",
+      untitled: "New node",
       pin: "Pin position",
       unpin: "Unpin",
       openAsDoc: "Open as document",