@abraca/nuxt 0.1.0

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

@@ -0,0 +1,60 @@
+type __VLS_Props = {
+    /** Y.Doc ID to load as a child document */
+    docId: string;
+    /** Current document label from the doc-tree — used for header↔label sync */
+    docLabel?: string;
+    /** Content type: 'json' | 'html' | 'markdown'. Default: 'json' */
+    contentType?: 'json' | 'html' | 'markdown';
+    /** Whether the editor is editable. Default: true */
+    editable?: boolean;
+    /** Placeholder text shown in empty documents */
+    placeholder?: string;
+    /** Whether to show the bubble toolbar (appears on text selection). Set false to use slot. */
+    showToolbar?: boolean;
+    /** Whether to show the slash command suggestion menu. Set false to use slot. */
+    showSuggestionMenu?: boolean;
+    /** Whether to show the drag handle (plus + grip buttons). Set false to use slot. */
+    showDragHandle?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_18: {
+    editor: any;
+    connectedUsers: {
+        name: string;
+        color: string;
+        publicKey?: string | undefined;
+        docId?: string | undefined;
+    }[];
+    ready: boolean;
+};
+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;
+}, 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;
+}>, {
+    contentType: "json" | "html" | "markdown";
+    editable: boolean;
+    showToolbar: boolean;
+    showSuggestionMenu: boolean;
+    showDragHandle: boolean;
+}, {}, {}, {}, 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/AEditor.vue

@@ -0,0 +1,174 @@
+<script setup>
+import { shallowRef, ref, watch, computed, nextTick } from "vue";
+import { useEditor } from "../composables/useEditor";
+import { useEditorToolbar } from "../composables/useEditorToolbar";
+import { useEditorSuggestions } from "../composables/useEditorSuggestions";
+import { useEditorDragHandle } from "../composables/useEditorDragHandle";
+const props = defineProps({
+  docId: { type: String, required: true },
+  docLabel: { type: String, required: false },
+  contentType: { type: String, required: false, default: "json" },
+  editable: { type: Boolean, required: false, default: true },
+  placeholder: { type: String, required: false },
+  showToolbar: { type: Boolean, required: false, default: true },
+  showSuggestionMenu: { type: Boolean, required: false, default: true },
+  showDragHandle: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["ready", "update", "rename"]);
+const model = defineModel({ type: null });
+const { provider, registry } = useNuxtApp().$abracadabra;
+const childProvider = shallowRef(null);
+watch(provider, async (prov) => {
+  if (!prov || !props.docId) return;
+  try {
+    childProvider.value = await prov.loadChild(props.docId);
+  } catch (e) {
+    console.error("[AEditor] Failed to load child provider:", e);
+  }
+}, { immediate: true });
+const { extensions, connectedUsers, ready } = useEditor({
+  childProvider,
+  docId: props.docId
+});
+watch(ready, (val) => {
+  if (val) emit("ready");
+});
+const editorRef = ref(null);
+const currentEditor = shallowRef(null);
+const { items: toolbarItems } = useEditorToolbar({ docId: props.docId });
+const { items: suggestionItems } = useEditorSuggestions({ docId: props.docId });
+const dragHandle = useEditorDragHandle();
+const _syncingFromDocLabel = ref(false);
+const _lastEmittedHeader = ref("");
+watch(model, (val) => {
+  if (_syncingFromDocLabel.value) return;
+  if (!val || typeof val !== "object" || !val.content?.length) return;
+  const headerNode = val.content[0];
+  if (headerNode?.type !== "documentHeader") return;
+  const text = (headerNode.content ?? []).map((n) => n.text ?? "").join("");
+  if (text !== _lastEmittedHeader.value) {
+    _lastEmittedHeader.value = text;
+    emit("rename", text || "Untitled");
+  }
+});
+watch(() => props.docLabel, (newLabel) => {
+  if (!newLabel || _syncingFromDocLabel.value) return;
+  const editor = editorRef.value?.editor;
+  if (!editor) return;
+  const first = editor.state.doc.firstChild;
+  if (!first || first.type.name !== "documentHeader") return;
+  if (first.textContent === newLabel) return;
+  _syncingFromDocLabel.value = true;
+  const { tr, schema } = editor.state;
+  const to = 1 + first.content.size;
+  if (newLabel) {
+    tr.replaceWith(1, to, schema.text(newLabel));
+  } else {
+    tr.delete(1, to);
+  }
+  editor.view.dispatch(tr);
+  nextTick(() => {
+    _syncingFromDocLabel.value = false;
+  });
+});
+const mentionItems = computed(
+  () => registry.getAllMentionProviders().flatMap((p) => p.label ? [p] : [])
+);
+function onPlusClick(e, onClick) {
+  e.stopPropagation();
+  onClick();
+  const editor = editorRef.value?.editor;
+  if (!editor) return;
+  editor.chain().focus().insertContent("/").run();
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <!-- Loading skeleton while extensions and child provider are loading -->
+    <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" />
+      <div class="h-4 w-5/6 animate-pulse rounded bg-elevated" />
+    </div>
+
+    <UEditor
+      v-else
+      ref="editorRef"
+      v-model="model"
+      :content-type="contentType"
+      :editable="editable"
+      :extensions="extensions"
+      :starter-kit="{ undoRedo: false, codeBlock: false, document: false }"
+      :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">
+        <!-- ── Bubble toolbar (appears when text is selected) ─────────────── -->
+        <UEditorToolbar
+          v-if="showToolbar"
+          :editor="editor"
+          :items="toolbarItems"
+          layout="bubble"
+          :should-show="({ view, state }) => view.hasFocus() && !state.selection.empty"
+        />
+
+        <!-- ── Slash command menu ──────────────────────────────────────────── -->
+        <UEditorSuggestionMenu
+          v-if="showSuggestionMenu"
+          :editor="editor"
+          :items="suggestionItems"
+        />
+
+        <!-- ── Drag handle — plus button + grip dropdown ───────────────────── -->
+        <UEditorDragHandle
+          v-if="showDragHandle"
+          :editor="editor"
+          v-slot="{ ui, onClick }"
+          @node-change="dragHandle.onNodeChange"
+        >
+          <!-- Plus: insert block via slash menu -->
+          <UButton
+            icon="i-lucide-plus"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :class="ui.handle()"
+            @click="(e) => onPlusClick(e, onClick)"
+          />
+
+          <!-- Grip: block context menu -->
+          <UDropdownMenu
+            v-slot="{ open }"
+            :modal="false"
+            :items="dragHandle.getItems(editor)"
+            :content="{ side: 'left' }"
+            :ui="{ content: 'w-48', label: 'text-xs' }"
+            @update:open="(v) => editor.chain().setMeta('lockDragHandle', v).run()"
+          >
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :active-variant="'soft'"
+              size="sm"
+              icon="i-lucide-grip-vertical"
+              :active="open"
+              :class="ui.handle()"
+            />
+          </UDropdownMenu>
+        </UEditorDragHandle>
+      </slot>
+    </UEditor>
+
+    <template #fallback>
+      <div 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" />
+      </div>
+    </template>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,60 @@
+type __VLS_Props = {
+    /** Y.Doc ID to load as a child document */
+    docId: string;
+    /** Current document label from the doc-tree — used for header↔label sync */
+    docLabel?: string;
+    /** Content type: 'json' | 'html' | 'markdown'. Default: 'json' */
+    contentType?: 'json' | 'html' | 'markdown';
+    /** Whether the editor is editable. Default: true */
+    editable?: boolean;
+    /** Placeholder text shown in empty documents */
+    placeholder?: string;
+    /** Whether to show the bubble toolbar (appears on text selection). Set false to use slot. */
+    showToolbar?: boolean;
+    /** Whether to show the slash command suggestion menu. Set false to use slot. */
+    showSuggestionMenu?: boolean;
+    /** Whether to show the drag handle (plus + grip buttons). Set false to use slot. */
+    showDragHandle?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_18: {
+    editor: any;
+    connectedUsers: {
+        name: string;
+        color: string;
+        publicKey?: string | undefined;
+        docId?: string | undefined;
+    }[];
+    ready: boolean;
+};
+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;
+}, 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;
+}>, {
+    contentType: "json" | "html" | "markdown";
+    editable: boolean;
+    showToolbar: boolean;
+    showSuggestionMenu: boolean;
+    showDragHandle: boolean;
+}, {}, {}, {}, 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/AFloatingWindow.d.vue.ts

@@ -0,0 +1,24 @@
+import type { AbracadabraLocale } from '../locale.js';
+type __VLS_Props = {
+    windowId: string;
+    labels?: Partial<AbracadabraLocale['floatingWindow']>;
+};
+declare var __VLS_6: {
+    window: any;
+}, __VLS_29: {
+    window: any;
+};
+type __VLS_Slots = {} & {
+    'header-extra'?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: 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 __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/AFloatingWindow.vue

@@ -0,0 +1,232 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useAbraLocale } from "../composables/useAbraLocale";
+const props = defineProps({
+  windowId: { type: String, required: true },
+  labels: { type: Object, required: false }
+});
+const locale = useAbraLocale("floatingWindow", props.labels);
+const SNAP_THRESHOLD = 20;
+const MIN_WIDTH = 280;
+const MIN_HEIGHT = 180;
+const {
+  windows,
+  closeWindow,
+  focusWindow,
+  minimizeWindow,
+  restoreWindow,
+  toggleMaximize,
+  moveWindow,
+  resizeWindow
+} = useWindowManager();
+const win = computed(() => windows.value.get(props.windowId));
+const isAnimatingOut = ref(false);
+const animStyle = ref({});
+watch(() => win.value?.minimized, (minimized, wasMinimized) => {
+  if (minimized && !wasMinimized) {
+    const w = win.value;
+    if (!w) return;
+    const target = w.minimizeTarget;
+    if (target) {
+      animStyle.value = {
+        left: `${target.x}px`,
+        top: `${target.y}px`,
+        width: "40px",
+        height: "40px",
+        opacity: "0",
+        transition: "all 0.25s ease"
+      };
+    }
+  } else if (!minimized && wasMinimized) {
+    animStyle.value = {};
+  }
+});
+let dragStart = null;
+let wasMaximized = false;
+function onHeaderPointerDown(e) {
+  if (e.target.closest("[data-no-drag]")) return;
+  const w = win.value;
+  if (!w || w.minimized) return;
+  focusWindow(props.windowId);
+  e.currentTarget.setPointerCapture(e.pointerId);
+  wasMaximized = w.maximized;
+  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) {
+    const dx = Math.abs(e.clientX - dragStart.mx);
+    const dy = Math.abs(e.clientY - dragStart.my);
+    if (dx < 5 && dy < 5) return;
+    toggleMaximize(props.windowId);
+    dragStart.wx = e.clientX - (w.width ?? 600) * 0.5;
+    dragStart.wy = dragStart.my - 20;
+    wasMaximized = false;
+  }
+  let nx = dragStart.wx + (e.clientX - dragStart.mx);
+  let ny = dragStart.wy + (e.clientY - dragStart.my);
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const ww = w.width ?? 600;
+  const wh = w.height ?? 400;
+  if (Math.abs(nx) < SNAP_THRESHOLD) nx = 0;
+  if (Math.abs(ny) < SNAP_THRESHOLD) ny = 0;
+  if (Math.abs(nx + ww - vw) < SNAP_THRESHOLD) nx = vw - ww;
+  if (Math.abs(ny + wh - vh) < SNAP_THRESHOLD) ny = vh - wh;
+  moveWindow(props.windowId, nx, ny);
+}
+function onHeaderPointerUp() {
+  dragStart = null;
+}
+let resizeDir = null;
+let resizeStart = null;
+function onResizePointerDown(e, dir) {
+  const w = win.value;
+  if (!w || w.maximized) return;
+  e.preventDefault();
+  focusWindow(props.windowId);
+  e.target.setPointerCapture(e.pointerId);
+  resizeDir = dir;
+  resizeStart = { mx: e.clientX, my: e.clientY, wx: w.x, wy: w.y, ww: w.width ?? 600, wh: w.height ?? 400 };
+}
+function onResizePointerMove(e) {
+  if (!resizeDir || !resizeStart) return;
+  const dx = e.clientX - resizeStart.mx;
+  const dy = e.clientY - resizeStart.my;
+  let { wx, wy, ww, wh } = resizeStart;
+  if (resizeDir.includes("e")) ww = Math.max(MIN_WIDTH, ww + dx);
+  if (resizeDir.includes("s")) wh = Math.max(MIN_HEIGHT, wh + dy);
+  if (resizeDir.includes("w")) {
+    const nw = Math.max(MIN_WIDTH, ww - dx);
+    wx = wx + ww - nw;
+    ww = nw;
+  }
+  if (resizeDir.includes("n")) {
+    const nh = Math.max(MIN_HEIGHT, wh - dy);
+    wy = wy + wh - nh;
+    wh = nh;
+  }
+  moveWindow(props.windowId, wx, wy);
+  resizeWindow(props.windowId, ww, wh);
+}
+function onResizePointerUp() {
+  resizeDir = null;
+  resizeStart = null;
+}
+const resizeCursors = {
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  nw: "nwse-resize",
+  se: "nwse-resize"
+};
+const resizeDirs = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+const resizeEdgeClass = {
+  n: "absolute top-0 left-2 right-2 h-1",
+  s: "absolute bottom-0 left-2 right-2 h-1",
+  e: "absolute top-2 right-0 bottom-2 w-1",
+  w: "absolute top-2 left-0 bottom-2 w-1",
+  ne: "absolute top-0 right-0 w-3 h-3",
+  nw: "absolute top-0 left-0 w-3 h-3",
+  se: "absolute bottom-0 right-0 w-3 h-3",
+  sw: "absolute bottom-0 left-0 w-3 h-3"
+};
+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) };
+  return {
+    left: `${w.x}px`,
+    top: `${w.y}px`,
+    width: `${w.width ?? 600}px`,
+    height: `${w.height ?? 400}px`,
+    zIndex: String(w.zIndex),
+    ...animStyle.value
+  };
+});
+</script>
+
+<template>
+  <div
+    v-if="win && !win.minimized"
+    :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">
+      <div
+        v-for="dir in resizeDirs"
+        :key="dir"
+        :class="resizeEdgeClass[dir]"
+        :style="{ cursor: resizeCursors[dir] }"
+        class="z-10"
+        @pointerdown.stop="onResizePointerDown($event, dir)"
+        @pointermove="onResizePointerMove"
+        @pointerup="onResizePointerUp"
+      />
+    </template>
+
+    <!-- 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' }"
+      @pointerdown="onHeaderPointerDown"
+      @pointermove="onHeaderPointerMove"
+      @pointerup="onHeaderPointerUp"
+    >
+      <UIcon
+        v-if="win.icon"
+        :name="win.icon"
+        class="size-4 text-muted flex-shrink-0"
+      />
+      <span class="flex-1 text-sm font-medium text-default truncate">{{ win.title }}</span>
+
+      <slot
+        name="header-extra"
+        :window="win"
+      />
+
+      <div
+        class="flex items-center gap-0.5"
+        data-no-drag
+      >
+        <UButton
+          icon="i-lucide-minus"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :aria-label="locale.minimize"
+          @click.stop="minimizeWindow(windowId)"
+        />
+        <UButton
+          :icon="win.maximized ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :aria-label="win.maximized ? locale.restore : locale.maximize"
+          @click.stop="toggleMaximize(windowId)"
+        />
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :aria-label="locale.close"
+          @click.stop="closeWindow(windowId)"
+        />
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 min-h-0 overflow-auto">
+      <slot :window="win" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+import type { AbracadabraLocale } from '../locale.js';
+type __VLS_Props = {
+    windowId: string;
+    labels?: Partial<AbracadabraLocale['floatingWindow']>;
+};
+declare var __VLS_6: {
+    window: any;
+}, __VLS_29: {
+    window: any;
+};
+type __VLS_Slots = {} & {
+    'header-extra'?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: 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 __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/AIconPicker.d.vue.ts

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