@abraca/nuxt 2.11.0 → 2.14.0

package/dist/runtime/components/ADocViewToggle.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import { useSyncedMap } from "../composables/useYDoc";
+import { useAbraLocale } from "../composables/useAbraLocale";
+import { resolveDocType, getAvailableDocTypes } from "../utils/docTypes";
+const props = defineProps({
+  modelValue: { type: [String, null], required: false, default: null },
+  docId: { type: String, required: true },
+  docType: { type: String, required: false },
+  chatUnread: { type: Number, required: false, default: 0 },
+  editorDisabled: { type: Boolean, required: false, default: false },
+  pageTypeDisabled: { type: Boolean, required: false, default: false },
+  canChangeType: { type: Boolean, required: false, default: true },
+  showChat: { type: Boolean, required: false, default: true },
+  showSettings: { type: Boolean, required: false, default: true },
+  disableTooltips: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" }
+});
+const emit = defineEmits(["update:modelValue", "select"]);
+const locale = computed(() => useAbraLocale("nodePanel"));
+const { doc, registry } = useAbracadabra();
+const treeMap = useSyncedMap(doc, "doc-tree");
+const docTypeDef = computed(() => resolveDocType(props.docType, registry));
+const hasPageType = computed(() => !!(props.docType && props.docType !== "doc"));
+const docTypeItems = computed(
+  () => getAvailableDocTypes(registry).filter((dt) => dt.key !== props.docType).map((dt) => ({
+    label: dt.label,
+    icon: dt.icon,
+    onSelect() {
+      const entry = treeMap.get(props.docId);
+      if (!entry) return;
+      if (entry.type === dt.key) return;
+      treeMap.set(props.docId, { ...entry, type: dt.key, updatedAt: Date.now() });
+    }
+  }))
+);
+const visibleTabs = computed(() => {
+  const t = ["pageType", "editor"];
+  if (props.showChat) t.push("chat");
+  if (props.showSettings) t.push("settings");
+  return t;
+});
+function select(tab) {
+  emit("update:modelValue", tab);
+  emit("select", tab);
+}
+const typeMenuOpen = ref(false);
+let pressTimer = null;
+let longFired = false;
+function onTypePointerDown() {
+  longFired = false;
+  cancelTypePress();
+  pressTimer = setTimeout(() => {
+    longFired = true;
+    typeMenuOpen.value = true;
+  }, 400);
+}
+function cancelTypePress() {
+  if (pressTimer) {
+    clearTimeout(pressTimer);
+    pressTimer = null;
+  }
+}
+function onTypeClick() {
+  cancelTypePress();
+  if (longFired) {
+    longFired = false;
+    return;
+  }
+  select("pageType");
+}
+onBeforeUnmount(cancelTypePress);
+const activeIndex = computed(() => {
+  const v = props.modelValue;
+  if (!v) return -1;
+  if (v === "pageType" && !hasPageType.value) return -1;
+  return visibleTabs.value.indexOf(v);
+});
+const indicatorVisible = computed(() => activeIndex.value >= 0);
+const segPx = computed(() => props.size === "sm" ? 24 : 28);
+const iconClass = computed(() => props.size === "sm" ? "size-3" : "size-3.5");
+</script>
+
+<template>
+  <div
+    class="dvt"
+    :class="`dvt-${size}`"
+    :style="{ '--dvt-seg': segPx + 'px' }"
+  >
+    <!-- Sliding active pill — like Nuxt UI tabs. Equal-width segments make the
+         offset a simple multiple of the segment size, no DOM measuring. -->
+    <span
+      class="dvt-indicator"
+      :class="{ 'dvt-indicator-hidden': !indicatorVisible }"
+      :style="{ transform: `translateX(${Math.max(activeIndex, 0) * 100}%)` }"
+      aria-hidden="true"
+    />
+
+    <!-- Slot 1: page type (selectable tab) or + (assign-type dropdown) -->
+    <UDropdownMenu
+      v-if="!hasPageType"
+      :items="[docTypeItems]"
+      :disabled="!canChangeType"
+    >
+      <UTooltip
+        :text="locale.docType"
+        :content="{ side: 'bottom' }"
+        :disabled="disableTooltips"
+      >
+        <button
+          type="button"
+          class="dvt-seg"
+          :disabled="!canChangeType"
+        >
+          <UIcon
+            name="i-lucide-plus"
+            :class="iconClass"
+          />
+        </button>
+      </UTooltip>
+    </UDropdownMenu>
+    <div
+      v-else
+      class="dvt-seg-host"
+    >
+      <UTooltip
+        :text="docTypeDef.label"
+        :content="{ side: 'bottom' }"
+        :disabled="disableTooltips || typeMenuOpen"
+      >
+        <button
+          type="button"
+          class="dvt-seg"
+          :class="{ active: modelValue === 'pageType' }"
+          :disabled="pageTypeDisabled"
+          @pointerdown="onTypePointerDown"
+          @pointerup="onTypeClick"
+          @pointerleave="cancelTypePress"
+          @pointercancel="cancelTypePress"
+          @contextmenu.prevent="canChangeType && (typeMenuOpen = true)"
+        >
+          <UIcon
+            :name="docTypeDef.icon"
+            :class="iconClass"
+          />
+        </button>
+      </UTooltip>
+      <!-- Hidden anchor: the menu is opened programmatically by long-press so
+           the trigger never steals the click. -->
+      <UDropdownMenu
+        v-if="canChangeType"
+        v-model:open="typeMenuOpen"
+        :items="[docTypeItems]"
+        :content="{ side: 'bottom', align: 'center' }"
+      >
+        <span
+          class="dvt-anchor"
+          aria-hidden="true"
+        />
+      </UDropdownMenu>
+    </div>
+
+    <!-- Slot 2: editor -->
+    <UTooltip
+      :text="locale.editorTab"
+      :content="{ side: 'bottom' }"
+      :disabled="disableTooltips"
+    >
+      <button
+        type="button"
+        class="dvt-seg"
+        :class="{ active: modelValue === 'editor' }"
+        :disabled="editorDisabled"
+        @click="select('editor')"
+      >
+        <UIcon
+          name="i-lucide-text-cursor"
+          :class="iconClass"
+        />
+      </button>
+    </UTooltip>
+
+    <!-- Slot 3: chat (with unread badge) -->
+    <UTooltip
+      v-if="showChat"
+      :text="locale.chatTab"
+      :content="{ side: 'bottom' }"
+      :disabled="disableTooltips"
+    >
+      <button
+        type="button"
+        class="dvt-seg"
+        :class="{ active: modelValue === 'chat' }"
+        @click="select('chat')"
+      >
+        <span class="relative inline-flex">
+          <UIcon
+            name="i-lucide-message-circle"
+            :class="iconClass"
+          />
+          <span
+            v-if="chatUnread > 0 && modelValue !== 'chat'"
+            class="dvt-badge"
+          >{{ chatUnread > 99 ? "99+" : chatUnread }}</span>
+        </span>
+      </button>
+    </UTooltip>
+
+    <!-- Slot 4: settings -->
+    <UTooltip
+      v-if="showSettings"
+      :text="locale.settingsTab"
+      :content="{ side: 'bottom' }"
+      :disabled="disableTooltips"
+    >
+      <button
+        type="button"
+        class="dvt-seg"
+        :class="{ active: modelValue === 'settings' }"
+        @click="select('settings')"
+      >
+        <UIcon
+          name="i-lucide-settings-2"
+          :class="iconClass"
+        />
+      </button>
+    </UTooltip>
+  </div>
+</template>
+
+<style scoped>
+.dvt{align-items:center;background:var(--ui-bg-elevated);border-radius:calc(var(--ui-radius)*1.5);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-border-accented),#fff 25%);display:inline-flex;flex-shrink:0;padding:2px;position:relative}.dvt-indicator{background:var(--ui-bg);border-radius:var(--ui-radius);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px var(--ui-border-accented);height:calc(100% - 4px);left:2px;pointer-events:none;position:absolute;top:2px;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .15s ease;width:var(--dvt-seg)}.dvt-indicator-hidden{opacity:0}.dvt-seg-host{display:flex;position:relative}.dvt-anchor{bottom:0;height:0;left:50%;position:absolute;width:0}.dvt-seg{align-items:center;border-radius:var(--ui-radius);color:var(--ui-text-muted);cursor:pointer;display:flex;height:var(--dvt-seg);justify-content:center;position:relative;transition:color .15s ease;width:var(--dvt-seg);z-index:1}.dvt-seg:hover:not(:disabled){color:var(--ui-text)}.dvt-seg.active{color:var(--ui-text-highlighted)}.dvt-seg:disabled{cursor:default;opacity:.4}.dvt-badge{background:var(--ui-color-error-500);border-radius:999px;color:#fff;font-size:9px;font-weight:700;height:15px;line-height:15px;min-width:15px;padding:0 3px;pointer-events:none;position:absolute;right:-7px;text-align:center;top:-6px}
+</style>

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

@@ -0,0 +1,40 @@
+export type DocViewTab = 'pageType' | 'editor' | 'chat' | 'settings';
+type __VLS_Props = {
+    /** Active tab. `null` (or absent) = nothing highlighted (e.g. another tab is active). */
+    modelValue?: DocViewTab | null;
+    docId: string;
+    docType?: string;
+    chatUnread?: number;
+    /** Disable the editor segment (e.g. main view is already the editor). */
+    editorDisabled?: boolean;
+    /** Disable the page-type segment (e.g. provider not ready). */
+    pageTypeDisabled?: boolean;
+    /** Whether the user may assign/change the page type (gates the + dropdown). */
+    canChangeType?: boolean;
+    /** Render the chat slot. Off → omitted (e.g. features.chat disabled). */
+    showChat?: boolean;
+    /** Render the settings slot. Off → omitted. */
+    showSettings?: boolean;
+    /** Suppress tooltips (touch devices / during open animations). */
+    disableTooltips?: boolean;
+    size?: 'sm' | 'md';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (tab: DocViewTab) => any;
+    "update:modelValue": (tab: DocViewTab) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((tab: DocViewTab) => any) | undefined;
+    "onUpdate:modelValue"?: ((tab: DocViewTab) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    modelValue: DocViewTab | null;
+    chatUnread: number;
+    editorDisabled: boolean;
+    pageTypeDisabled: boolean;
+    canChangeType: boolean;
+    showChat: boolean;
+    showSettings: boolean;
+    disableTooltips: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ADocumentTree.vue

@@ -298,6 +298,45 @@ function deleteDoc(docId) {
   if (!docId || !isReady.value) return;
   moveToTrash(docId, userName.value);
 }
+const moveTargetId = ref(null);
+const movePickerOpen = ref(false);
+function openMovePicker(docId) {
+  moveTargetId.value = docId;
+  movePickerOpen.value = true;
+}
+function performMove(newParentId) {
+  const id = moveTargetId.value;
+  if (!id || !isReady.value) return;
+  const entry = treeMap.data[id];
+  if (!entry) return;
+  if ((entry.parentId ?? null) === newParentId) return;
+  treeMap.set(id, { ...entry, parentId: newParentId, order: Date.now() });
+  if (newParentId) {
+    client.value?.createChild(newParentId, { child_id: id, kind: "page" }).catch(() => {
+    });
+    expandedIds.value.add(newParentId);
+    expandedIds.value = new Set(expandedIds.value);
+  }
+  emit("navigate", id);
+}
+const tagsTargetId = ref(null);
+const tagsEditorOpen = ref(false);
+function openTagsEditor(docId) {
+  tagsTargetId.value = docId;
+  tagsEditorOpen.value = true;
+}
+const tagsTargetTags = computed(() => {
+  const id = tagsTargetId.value;
+  if (!id) return [];
+  return treeMap.data[id]?.meta?.tags ?? [];
+});
+function saveTags(tags) {
+  const id = tagsTargetId.value;
+  if (!id || !isReady.value) return;
+  const entry = treeMap.data[id];
+  if (!entry) return;
+  treeMap.set(id, { ...entry, meta: { ...entry.meta ?? {}, tags } });
+}
 const renameId = ref(null);
 const renameValue = ref("");
 const renameInputRef = ref(null);
@@ -385,7 +424,7 @@ function onDragStart(e, item) {
   if (!multiSelected.value.has(item.id)) multiSelected.value = /* @__PURE__ */ new Set();
   dragId.value = item.id;
   if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.effectAllowed = "all";
     e.dataTransfer.setData("text/plain", item.id);
     e.dataTransfer.setData(DOC_DRAG_MIME, JSON.stringify({ id: item.id, label: item.name }));
   }
@@ -770,6 +809,16 @@ function treeNodeMenuItems(item) {
         label: "Add child page",
         icon: "i-lucide-file-plus",
         onSelect: () => createDirectly(item.id)
+      },
+      {
+        label: "Move to\u2026",
+        icon: "i-lucide-corner-down-right",
+        onSelect: () => openMovePicker(item.id)
+      },
+      {
+        label: "Edit tags\u2026",
+        icon: "i-lucide-tags",
+        onSelect: () => openTagsEditor(item.id)
       }
     ],
     [
@@ -1517,6 +1566,22 @@ defineExpose({
       @close="closeOverlay"
     />
   </div>
+
+  <!-- Move-to reparent picker -->
+  <ADocPickerModal
+    v-model:open="movePickerOpen"
+    :exclude-id="moveTargetId"
+    title="Move to…"
+    confirm-label="Move here"
+    @select="performMove"
+  />
+
+  <!-- Edit-tags editor -->
+  <ATagsEditor
+    v-model:open="tagsEditorOpen"
+    :tags="tagsTargetTags"
+    @save="saveTags"
+  />
 </template>
 
 <style scoped>

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

@@ -35,12 +35,18 @@ type __VLS_Props = {
      * Useful for inspecting CRDT state during development. Default: false.
      */
     showSourceToggle?: boolean;
+    /**
+     * Show the in-canvas ancestor breadcrumb above the document (matching
+     * cou-sh's DocRenderer). Only renders when the doc actually has ancestors,
+     * so root/space docs show nothing. Set false for embeds/previews.
+     */
+    showBreadcrumb?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_42: {
+declare var __VLS_58: {
     editor: any;
     connectedUsers: {
         name: string;
@@ -49,25 +55,25 @@ declare var __VLS_42: {
         docId?: string | undefined;
     }[];
     ready: boolean;
-}, __VLS_51: {
+}, __VLS_67: {
     editor: any;
-}, __VLS_59: {
+}, __VLS_75: {
     editor: any;
-}, __VLS_67: {
+}, __VLS_83: {
     editor: any;
-}, __VLS_70: {
+}, __VLS_86: {
     editor: any;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_42) => any;
+    default?: (props: typeof __VLS_58) => any;
 } & {
-    link?: (props: typeof __VLS_51) => any;
+    link?: (props: typeof __VLS_67) => any;
 } & {
-    'doc-link'?: (props: typeof __VLS_59) => any;
+    'doc-link'?: (props: typeof __VLS_75) => any;
 } & {
-    'create-child-doc'?: (props: typeof __VLS_67) => any;
+    'create-child-doc'?: (props: typeof __VLS_83) => any;
 } & {
-    'send-to-chat'?: (props: typeof __VLS_70) => any;
+    'send-to-chat'?: (props: typeof __VLS_86) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     editor: import("vue").ComputedRef<any>;
@@ -91,6 +97,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     showDragHandle: boolean;
     variant: "doc" | "prose";
     showSourceToggle: boolean;
+    showBreadcrumb: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;