@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/renderers/AOutlineRenderer.vue

@@ -1,13 +1,17 @@
 <script setup>
-import { ref, computed, nextTick } from "vue";
+import { ref, computed, nextTick, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
 import { useRendererBase } from "../../composables/useRendererBase";
+import { useTouchDrag } from "../../composables/useTouchDrag";
+import { useNodePanel } from "../../composables/useNodePanel";
 import { DEFAULT_LOCALE } from "../../locale";
 const props = defineProps({
   docId: { type: String, required: true },
   childProvider: { type: null, required: true },
   docLabel: { type: String, required: true },
   pageTypes: { type: Array, required: false },
-  labels: { type: Object, required: false }
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
 });
 const config = useRuntimeConfig();
 const locale = computed(() => ({
@@ -15,166 +19,323 @@ const locale = computed(() => ({
   ...config.public?.abracadabra?.locale?.renderers?.outline ?? {},
   ...props.labels ?? {}
 }));
-const { tree } = useRendererBase(props);
-const editingId = ref(null);
-const editValues = ref({});
-const expandedIds = ref(/* @__PURE__ */ new Set());
-function childrenOf(parentId) {
-  return tree.entries.value.filter((e) => e.parentId === (parentId === null ? props.docId : parentId)).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-}
-function buildFlat(parentId, depth) {
+const { tree, childProviderRef, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+const flatItems = computed(() => {
   const result = [];
-  for (const entry of childrenOf(parentId)) {
-    const expanded = expandedIds.value.has(entry.id);
-    const hc = tree.entries.value.some((e) => e.parentId === entry.id);
-    result.push({
-      id: entry.id,
-      label: entry.label,
-      depth,
-      parentId: entry.parentId,
-      order: entry.order,
-      hasChildren: hc,
-      isExpanded: expanded
-    });
-    if (expanded || !hc) {
-      result.push(...buildFlat(entry.id, depth + 1));
+  function walk(parentId, depth) {
+    for (const child of tree.childrenOf(parentId)) {
+      result.push({
+        id: child.id,
+        label: child.label,
+        parentId: child.parentId,
+        depth,
+        hasChildren: tree.childrenOf(child.id).length > 0
+      });
+      walk(child.id, depth + 1);
     }
   }
+  walk(null, 0);
   return result;
-}
-const flatItems = computed(() => buildFlat(null, 0));
+});
+const editingId = ref(null);
+const editingValue = ref("");
+const inputRefs = ref({});
 function startEdit(id, label) {
+  if (!props.editable) return;
   editingId.value = id;
-  editValues.value[id] = label;
+  editingValue.value = label;
+  setLocalState({ "outline:editing": id });
+}
+function commitEdit() {
+  if (!props.editable) return;
+  if (editingId.value && editingValue.value.trim()) {
+    tree.renameEntry(editingId.value, editingValue.value.trim());
+  } else if (editingId.value && !editingValue.value.trim()) {
+    tree.deleteEntry(editingId.value);
+  }
+  editingId.value = null;
+  setLocalState({ "outline:editing": null });
+}
+function createSiblingAfter(item) {
+  if (!props.editable) return;
+  const id = tree.createChild(item.parentId, "");
   nextTick(() => {
-    const el = document.getElementById(`outline-${id}`);
-    el?.focus();
-    el?.select();
+    editingId.value = id;
+    editingValue.value = "";
+    nextTick(() => inputRefs.value[id]?.focus());
   });
 }
-function commitEdit(id) {
-  const val = (editValues.value[id] ?? "").trim();
-  if (val) {
-    const entry = tree.treeMap.get(id);
-    if (entry) tree.treeMap.set(id, { ...entry, label: val, updatedAt: Date.now() });
+function onEnter(item, e) {
+  e.preventDefault();
+  if (!props.editable) return;
+  if (editingValue.value.trim()) {
+    tree.renameEntry(item.id, editingValue.value.trim());
   }
   editingId.value = null;
+  createSiblingAfter(item);
 }
-function onKeydown(e, item, idx) {
-  if (e.key === "Enter") {
-    e.preventDefault();
-    commitEdit(item.id);
-    const newId = tree.createChild(item.parentId === props.docId ? null : item.parentId, "");
-    nextTick(() => startEdit(newId, ""));
-  } else if (e.key === "Tab") {
-    e.preventDefault();
-    const val = (editValues.value[item.id] ?? "").trim();
-    if (val) {
-      const entry = tree.treeMap.get(item.id);
-      if (entry) tree.treeMap.set(item.id, { ...entry, label: val, updatedAt: Date.now() });
-    }
-    if (!e.shiftKey) {
-      const prev = flatItems.value[idx - 1];
-      if (prev && prev.depth <= item.depth) {
-        const entry = tree.treeMap.get(item.id);
-        if (entry) tree.treeMap.set(item.id, { ...entry, parentId: prev.id, order: Date.now(), updatedAt: Date.now() });
-        expandedIds.value.add(prev.id);
-        expandedIds.value = new Set(expandedIds.value);
-      }
-    } else {
-      if (item.depth > 0) {
-        const parentEntry = tree.treeMap.get(item.parentId);
-        const grandParentId = parentEntry?.parentId ?? props.docId;
-        const entry = tree.treeMap.get(item.id);
-        if (entry) tree.treeMap.set(item.id, { ...entry, parentId: grandParentId, order: Date.now(), updatedAt: Date.now() });
-      }
-    }
-  } else if (e.key === "Backspace" && !(editValues.value[item.id] ?? "").length) {
-    e.preventDefault();
-    tree.treeMap.remove(item.id);
+function onTab(item, e) {
+  e.preventDefault();
+  if (!props.editable) return;
+  if (e.shiftKey) {
+    if (!item.parentId) return;
+    const parent = tree.entries.value.find((en) => en.id === item.parentId);
+    if (!parent) return;
+    const grandparentId = parent.parentId;
+    const uncles = tree.childrenOf(grandparentId);
+    const parentIdx = uncles.findIndex((u) => u.id === item.parentId);
+    const newOrder = parentIdx >= 0 ? (uncles[parentIdx]?.order ?? Date.now()) + 0.5 : Date.now();
+    tree.moveEntry(item.id, grandparentId, newOrder);
+  } else {
+    const siblings = tree.childrenOf(item.parentId);
+    const idx = siblings.findIndex((s) => s.id === item.id);
+    if (idx <= 0) return;
+    const prevSibling = siblings[idx - 1];
+    tree.moveEntry(item.id, prevSibling.id, Date.now());
+  }
+}
+function onKeydown(item, e) {
+  if (e.key === "Enter") onEnter(item, e);
+  else if (e.key === "Tab") onTab(item, e);
+  else if (e.key === "Escape") {
     editingId.value = null;
-    const prev = flatItems.value[idx - 1];
-    if (prev) nextTick(() => startEdit(prev.id, prev.label));
-  } else if (e.key === "ArrowUp") {
+  } else if (e.key === "Backspace" && editingValue.value === "" && props.editable) {
     e.preventDefault();
-    commitEdit(item.id);
-    const prev = flatItems.value[idx - 1];
-    if (prev) nextTick(() => startEdit(prev.id, prev.label));
-  } else if (e.key === "ArrowDown") {
-    e.preventDefault();
-    commitEdit(item.id);
-    const next = flatItems.value[idx + 1];
-    if (next) nextTick(() => startEdit(next.id, next.label));
+    tree.deleteEntry(item.id);
+    editingId.value = null;
   }
 }
+function itemMenuItems(item) {
+  return [
+    [
+      { label: "Open as doc", icon: "i-lucide-external-link", onSelect: () => openNode(item.id, item.label) },
+      { label: "Rename", icon: "i-lucide-pencil", onSelect: () => startEdit(item.id, item.label) },
+      {
+        label: "Add child",
+        icon: "i-lucide-plus",
+        onSelect: () => {
+          const id = tree.createChild(item.id, "");
+          nextTick(() => {
+            editingId.value = id;
+            editingValue.value = "";
+            nextTick(() => inputRefs.value[id]?.focus());
+          });
+        }
+      },
+      { label: "Duplicate", icon: "i-lucide-copy", onSelect: () => tree.duplicateEntry(item.id) }
+    ],
+    [
+      { label: "Delete", icon: "i-lucide-trash-2", color: "error", onSelect: () => tree.deleteEntry(item.id) }
+    ]
+  ];
+}
+function orderBetween(list, targetIdx) {
+  const prev = list[targetIdx - 1];
+  const next = list[targetIdx];
+  if (!prev && !next) return Date.now();
+  if (!prev) return next.order - 1e3;
+  if (!next) return prev.order + 1e3;
+  return (prev.order + next.order) / 2;
+}
+const { dragId, dragOverId, handlePointerDown } = useTouchDrag({
+  onDrop: (srcId, targetId) => {
+    if (!props.editable) return;
+    const targetItem = flatItems.value.find((i) => i.id === targetId);
+    if (!targetItem) return;
+    const siblings = tree.childrenOf(targetItem.parentId);
+    const targetIdx = siblings.findIndex((s) => s.id === targetId);
+    const newOrder = orderBetween(siblings, targetIdx);
+    tree.moveEntry(srcId, targetItem.parentId, newOrder);
+  }
+});
 function addRoot() {
-  const newId = tree.createChild(null, locale.value.addItem);
-  nextTick(() => startEdit(newId, locale.value.addItem));
+  if (!props.editable) return;
+  const id = tree.createChild(null, "");
+  nextTick(() => {
+    editingId.value = id;
+    editingValue.value = "";
+    nextTick(() => inputRefs.value[id]?.focus());
+  });
+}
+function nodeEditors(nodeId) {
+  return states.value.filter(
+    (s) => s.clientId !== myClientId.value && s["outline:editing"] === nodeId
+  );
+}
+function nodeSelectors(nodeId) {
+  return states.value.filter(
+    (s) => s.clientId !== myClientId.value && s["outline:selected"] === nodeId
+  );
+}
+function onItemPointerEnter(itemId) {
+  if (editingId.value !== itemId) {
+    setLocalState({ "outline:selected": itemId });
+  }
+}
+function onItemPointerLeave() {
+  setLocalState({ "outline:selected": null });
 }
+onBeforeUnmount(() => {
+  setLocalState({ "outline:editing": null, "outline:selected": null });
+});
+defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div class="p-4 max-w-2xl">
-    <div class="space-y-0.5">
-      <div
-        v-for="(item, idx) in flatItems"
-        :key="item.id"
-        :style="{ paddingLeft: `${item.depth * 24}px` }"
-        class="flex items-center gap-2 group py-0.5"
-      >
-        <!-- Expand toggle -->
-        <UButton
-          :icon="item.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-          variant="ghost"
-          color="neutral"
-          size="xs"
-          :class="item.hasChildren ? 'opacity-100' : 'opacity-0 pointer-events-none'"
-          @click="() => {
-  const s = new Set(expandedIds);
-  s.has(item.id) ? s.delete(item.id) : s.add(item.id);
-  expandedIds = s;
-}"
-        />
-
-        <UIcon name="i-lucide-circle-dot" class="size-3 text-muted flex-shrink-0" />
-
-        <template v-if="editingId === item.id">
-          <input
-            :id="`outline-${item.id}`"
-            v-model="editValues[item.id]"
-            class="flex-1 bg-transparent border-none outline-none text-sm"
-            @blur="commitEdit(item.id)"
-            @keydown="onKeydown($event, item, idx)"
-          >
-        </template>
-        <span
-          v-else
-          class="flex-1 text-sm cursor-text"
-          :class="!item.label ? 'text-muted italic' : ''"
-          @click="startEdit(item.id, item.label)"
-        >{{ item.label || locale.empty }}</span>
-
-        <UButton
-          icon="i-lucide-trash"
-          variant="ghost"
-          color="error"
-          size="xs"
-          class="opacity-0 group-hover:opacity-100"
-          @click="tree.treeMap.remove(item.id)"
-        />
-      </div>
-    </div>
-
-    <!-- Add root item -->
-    <div class="mt-2">
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
+      <span class="text-xs text-(--ui-text-muted)">Outline</span>
       <UButton
+        v-if="editable"
         icon="i-lucide-plus"
+        size="xs"
         variant="ghost"
         color="neutral"
-        size="sm"
         :label="locale.addItem"
         @click="addRoot"
       />
     </div>
+
+    <div class="flex-1 min-h-0 overflow-y-auto">
+      <div class="p-4 max-w-3xl mx-auto w-full">
+        <!-- Empty state -->
+        <div
+          v-if="flatItems.length === 0"
+          class="flex flex-col items-center justify-center py-16 gap-3 text-center"
+        >
+          <UIcon
+            name="i-lucide-list-tree"
+            class="size-10 text-(--ui-text-dimmed)"
+          />
+          <p class="text-sm text-(--ui-text-muted)">
+            Start your outline. Press Enter to add items.
+          </p>
+          <UButton
+            v-if="editable"
+            icon="i-lucide-plus"
+            :label="locale.addItem"
+            size="sm"
+            @click="addRoot"
+          />
+        </div>
+
+        <TransitionGroup
+          v-else
+          name="outline"
+          tag="div"
+          class="space-y-0.5"
+        >
+          <UContextMenu
+            v-for="item in flatItems"
+            :key="item.id"
+            :items="editable ? itemMenuItems(item) : []"
+          >
+            <div
+              class="group flex items-center gap-1.5 py-1 rounded-(--ui-radius) hover:bg-(--ui-bg-elevated) relative"
+              :class="{
+  'border-t-2 border-(--ui-primary)': dragOverId === item.id,
+  'opacity-30': dragId === item.id
+}"
+              :style="[
+  { paddingLeft: `${item.depth * 20 + 4}px` },
+  nodeSelectors(item.id).length ? { backgroundColor: nodeSelectors(item.id)[0].user?.color + '18' } : {}
+]"
+              :data-drag-id="item.id"
+              @pointerdown="editable && handlePointerDown($event, item.id)"
+              @pointerenter="onItemPointerEnter(item.id)"
+              @pointerleave="onItemPointerLeave"
+            >
+              <!-- Remote editing indicator -->
+              <div
+                v-if="nodeEditors(item.id).length"
+                class="absolute left-0 top-0 bottom-0 w-0.5 rounded-full"
+                :style="{ background: nodeEditors(item.id)[0].user?.color }"
+              />
+
+              <span class="size-4 flex items-center justify-center text-(--ui-text-dimmed) shrink-0">
+                <UIcon
+                  :name="item.hasChildren ? 'i-lucide-chevron-right' : 'i-lucide-dot'"
+                  class="size-3"
+                />
+              </span>
+
+              <input
+                v-if="editable && editingId === item.id"
+                :ref="(el) => inputRefs[item.id] = el"
+                v-model="editingValue"
+                class="flex-1 bg-transparent outline-none text-sm text-(--ui-text-highlighted) py-0.5"
+                autofocus
+                @keydown="onKeydown(item, $event)"
+                @blur="commitEdit"
+              >
+              <span
+                v-else
+                class="flex-1 text-sm py-0.5 cursor-text"
+                :class="item.label && item.label !== 'Untitled' ? 'text-(--ui-text-highlighted)' : 'text-(--ui-text-dimmed) italic'"
+                @click="editable && startEdit(item.id, item.label)"
+              >
+                {{ item.label || locale.empty }}
+              </span>
+
+              <!-- Hover actions -->
+              <div
+                v-if="editable"
+                class="hidden group-hover:flex items-center gap-0.5 shrink-0"
+              >
+                <UButton
+                  icon="i-lucide-external-link"
+                  size="xs"
+                  variant="ghost"
+                  color="neutral"
+                  @click.stop="openNode(item.id, item.label)"
+                />
+                <UButton
+                  icon="i-lucide-plus"
+                  size="xs"
+                  variant="ghost"
+                  color="neutral"
+                  @click.stop="() => {
+  const id = tree.createChild(item.id, '');
+  nextTick(() => {
+    editingId = id;
+    editingValue = '';
+    nextTick(() => inputRefs[id]?.focus());
+  });
+}"
+                />
+                <UButton
+                  icon="i-lucide-trash-2"
+                  size="xs"
+                  variant="ghost"
+                  color="error"
+                  @click.stop="tree.deleteEntry(item.id)"
+                />
+              </div>
+            </div>
+          </UContextMenu>
+        </TransitionGroup>
+      </div>
+    </div>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
   </div>
 </template>
+
+<style scoped>
+.outline-move{transition:transform .25s ease}.outline-enter-active{transition:opacity .18s ease,transform .18s ease}.outline-enter-from{opacity:0;transform:translateY(-6px) scale(.97)}.outline-leave-active{transition:opacity .15s ease}.outline-leave-to{opacity:0}
+</style>

package/dist/runtime/components/renderers/AOutlineRenderer.vue.d.ts

@@ -2,7 +2,18 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['outline']>;
+    editable?: boolean;
 };
-declare const __VLS_export: 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: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/renderers/ASpatialRenderer.d.vue.ts

@@ -0,0 +1,19 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;