@abraca/nuxt 1.6.0 → 1.8.0

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

@@ -286,24 +286,33 @@ defineExpose({ connectedUsers });
                 {{ item.label || locale.empty }}
               </span>
 
-              <!-- Hover actions -->
+              <!-- Hover actions — absolute-positioned to avoid layout shift -->
               <div
                 v-if="editable"
-                class="hidden group-hover:flex items-center gap-0.5 shrink-0"
+                class="outline-row-actions opacity-0 group-hover:opacity-100 absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5 bg-(--ui-bg-elevated) rounded-(--ui-radius) px-0.5 transition-opacity"
               >
-                <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="() => {
+                <UTooltip
+                  :text="locale.openAsSlideover"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-external-link"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    @click.stop="openNode(item.id, item.label)"
+                  />
+                </UTooltip>
+                <UTooltip
+                  :text="locale.addChild"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-plus"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    @click.stop="() => {
   const id = tree.createChild(item.id, '');
   nextTick(() => {
     editingId = id;
@@ -311,14 +320,20 @@ defineExpose({ connectedUsers });
     nextTick(() => inputRefs[id]?.focus());
   });
 }"
-                />
-                <UButton
-                  icon="i-lucide-trash-2"
-                  size="xs"
-                  variant="ghost"
-                  color="error"
-                  @click.stop="tree.deleteEntry(item.id)"
-                />
+                  />
+                </UTooltip>
+                <UTooltip
+                  :text="locale.delete"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-trash-2"
+                    size="xs"
+                    variant="ghost"
+                    color="error"
+                    @click.stop="tree.deleteEntry(item.id)"
+                  />
+                </UTooltip>
               </div>
             </div>
           </UContextMenu>

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

@@ -0,0 +1,21 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['slides']>;
+    editable?: boolean;
+    followingUser?: string | null;
+};
+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;
+    followingUser: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,591 @@
+<script setup>
+import { ref, computed, watch, watchEffect, nextTick, shallowRef, markRaw, onMounted } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { useNodePanelFollow } from "../../composables/useNodePanelFollow";
+import { useSlidesNavigation } from "../../composables/useSlidesNavigation";
+import { resolveDocType } from "../../utils/docTypes";
+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 },
+  editable: { type: Boolean, required: false, default: true },
+  followingUser: { type: [String, null], required: false, default: null }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.slides,
+  ...config.public?.abracadabra?.locale?.renderers?.slides ?? {},
+  ...props.labels ?? {}
+}));
+const { tree, childProviderRef, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+useNodePanelFollow(openNodeId, openNodeLabel, openNode, closePanel, () => props.followingUser, states, setLocalState);
+const {
+  position,
+  currentSlideId,
+  currentSlide,
+  canGoLeft,
+  canGoRight,
+  canGoUp,
+  canGoDown,
+  goLeft,
+  goRight,
+  goUp,
+  goDown,
+  goTo,
+  goNext,
+  goPrev,
+  groups,
+  subSlidesOf,
+  currentNumber,
+  totalSlides,
+  currentTransition,
+  lastDirection,
+  adjacentSlideIds
+} = useSlidesNavigation({
+  tree,
+  docId: props.docId,
+  setLocalState,
+  followingUser: () => props.followingUser,
+  states
+});
+const slidesTheme = computed(() => {
+  const v = tree.treeMap.data?.[props.docId]?.meta?.slidesTheme;
+  return v ?? "dark";
+});
+const currentSlideTypeKey = computed(() => currentSlide.value?.type);
+const currentSlideTypeDef = computed(() => resolveDocType(currentSlideTypeKey.value));
+const slideEditing = ref(false);
+const slideProvider = shallowRef(null);
+const slideLoading = ref(false);
+watch(currentSlideId, async (id) => {
+  slideEditing.value = false;
+  slideProvider.value = null;
+  if (!id || !childProviderRef.value) return;
+  slideLoading.value = true;
+  try {
+    const prov = await childProviderRef.value.loadChild(id);
+    if (!prov.isSynced) {
+      await new Promise((resolve) => {
+        const done = () => {
+          prov.off("synced", done);
+          resolve();
+        };
+        prov.on("synced", done);
+        setTimeout(resolve, 6e3);
+      });
+    }
+    const frag = prov.document.getXmlFragment("default");
+    if (!frag._item) {
+      prov.document.transact(() => void frag.length, "system");
+    }
+    if (currentSlideId.value === id) {
+      slideProvider.value = markRaw(prov);
+    }
+  } finally {
+    slideLoading.value = false;
+  }
+}, { immediate: true });
+const preloadedIds = /* @__PURE__ */ new Set();
+watchEffect(() => {
+  for (const id of adjacentSlideIds.value) {
+    if (!preloadedIds.has(id) && childProviderRef.value) {
+      preloadedIds.add(id);
+      childProviderRef.value.loadChild(id).catch(() => {
+        preloadedIds.delete(id);
+      });
+    }
+  }
+});
+const transitionName = computed(() => {
+  const t = currentTransition.value;
+  if (t === "none") return "slides-none";
+  if (t === "slide") return lastDirection.value === "left" || lastDirection.value === "up" ? "slides-slide-reverse" : "slides-slide";
+  return "slides-fade";
+});
+const showHelp = ref(false);
+const rootRef = ref(null);
+function isInsidePanel(el) {
+  while (el) {
+    if (el.hasAttribute?.("data-doc-slideover") || el.hasAttribute?.("data-doc-panel")) return true;
+    el = el.parentElement;
+  }
+  return false;
+}
+function onKeydown(e) {
+  const active = document.activeElement;
+  if (active && isInsidePanel(active)) return;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    if (slideEditing.value) {
+      slideEditing.value = false;
+      rootRef.value?.focus();
+    } else if (showHelp.value) {
+      showHelp.value = false;
+    } else if (openNodeId.value) {
+      closePanel();
+    }
+    return;
+  }
+  if (slideEditing.value) return;
+  switch (e.key) {
+    case "ArrowLeft":
+      e.preventDefault();
+      goLeft();
+      break;
+    case "ArrowRight":
+      e.preventDefault();
+      goRight();
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      goUp();
+      break;
+    case "ArrowDown":
+      e.preventDefault();
+      goDown();
+      break;
+    case " ":
+    case "PageDown":
+      e.preventDefault();
+      goNext();
+      break;
+    case "PageUp":
+      e.preventDefault();
+      goPrev();
+      break;
+    case "?":
+      e.preventDefault();
+      showHelp.value = !showHelp.value;
+      break;
+  }
+}
+function addSlide() {
+  if (!props.editable) return;
+  const id = tree.createChild(null, locale.value.newSlide);
+  nextTick(() => {
+    const idx = groups.value.findIndex((g) => g.id === id);
+    if (idx >= 0) goTo({ groupIndex: idx, subIndex: 0 });
+  });
+}
+function addSubSlide() {
+  if (!props.editable) return;
+  const group = groups.value[position.value.groupIndex];
+  if (!group) return;
+  const id = tree.createChild(group.id, locale.value.newSubSlide);
+  nextTick(() => {
+    const subs = subSlidesOf(group.id);
+    const idx = subs.findIndex((s) => s.id === id);
+    if (idx >= 0) goTo({ groupIndex: position.value.groupIndex, subIndex: idx + 1 });
+  });
+}
+function editCurrentSlide() {
+  const id = currentSlideId.value;
+  const slide = currentSlide.value;
+  if (id && slide) openNode(id, slide.label);
+}
+function deleteCurrentSlide() {
+  if (!props.editable) return;
+  const id = currentSlideId.value;
+  if (!id) return;
+  tree.deleteEntry(id);
+}
+function slideMenuItems() {
+  return [
+    [
+      { label: locale.value.editSlide, icon: "i-lucide-pencil", onSelect: editCurrentSlide },
+      { label: locale.value.addSlide, icon: "i-lucide-plus", onSelect: addSlide },
+      ...groups.value.length > 0 ? [{ label: locale.value.addSubSlide, icon: "i-lucide-arrow-down-to-line", onSelect: addSubSlide }] : []
+    ],
+    [
+      { label: locale.value.delete, icon: "i-lucide-trash-2", color: "error", onSelect: deleteCurrentSlide }
+    ]
+  ];
+}
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+function remoteUsersOnGroup(groupIndex) {
+  return states.value.filter((s) => {
+    if (s.clientId === myClientId.value) return false;
+    const pos = s["slides:position"];
+    return pos && pos.groupIndex === groupIndex;
+  });
+}
+const stageRef = ref(null);
+const swipeOffset = ref({ x: 0, y: 0 });
+const isSwiping = ref(false);
+let touchStartX = 0;
+let touchStartY = 0;
+let touchAxis = null;
+function onStageTouchStart(e) {
+  if (slideEditing.value) return;
+  const touch = e.touches[0];
+  touchStartX = touch.clientX;
+  touchStartY = touch.clientY;
+  touchAxis = null;
+  isSwiping.value = false;
+  swipeOffset.value = { x: 0, y: 0 };
+}
+function onStageTouchMove(e) {
+  if (slideEditing.value) return;
+  const touch = e.touches[0];
+  const dx = touch.clientX - touchStartX;
+  const dy = touch.clientY - touchStartY;
+  if (!touchAxis) {
+    if (Math.abs(dx) < 10 && Math.abs(dy) < 10) return;
+    touchAxis = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
+  }
+  isSwiping.value = true;
+  if (touchAxis === "x") {
+    const valid = dx < 0 && canGoRight.value || dx > 0 && canGoLeft.value;
+    swipeOffset.value = { x: dx * (valid ? 0.4 : 0.1), y: 0 };
+  } else {
+    const valid = dy < 0 && canGoDown.value || dy > 0 && canGoUp.value;
+    swipeOffset.value = { x: 0, y: dy * (valid ? 0.4 : 0.1) };
+  }
+  e.preventDefault();
+}
+function onStageTouchEnd() {
+  if (slideEditing.value) return;
+  const SWIPE_TRIGGER = 24;
+  if (touchAxis === "x" && Math.abs(swipeOffset.value.x) > SWIPE_TRIGGER) {
+    if (swipeOffset.value.x < 0 && canGoRight.value) goRight();
+    else if (swipeOffset.value.x > 0 && canGoLeft.value) goLeft();
+  } else if (touchAxis === "y" && Math.abs(swipeOffset.value.y) > SWIPE_TRIGGER) {
+    if (swipeOffset.value.y < 0 && canGoDown.value) goDown();
+    else if (swipeOffset.value.y > 0 && canGoUp.value) goUp();
+  }
+  swipeOffset.value = { x: 0, y: 0 };
+  isSwiping.value = false;
+  touchAxis = null;
+}
+onMounted(() => {
+  rootRef.value?.focus();
+});
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="flex-1 min-h-0 flex flex-col relative outline-none"
+    tabindex="0"
+    @keydown="onKeydown"
+  >
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-(--ui-text-muted) tabular-nums">
+          {{ currentNumber }} / {{ totalSlides }}
+        </span>
+      </div>
+      <div class="flex items-center gap-1">
+        <UTooltip
+          :text="locale.keyboardHelp"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-keyboard"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="showHelp = !showHelp"
+          />
+        </UTooltip>
+        <UDropdownMenu
+          v-if="editable"
+          :items="slideMenuItems()"
+          :content="{ align: 'end' }"
+        >
+          <UButton
+            icon="i-lucide-ellipsis"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+          />
+        </UDropdownMenu>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :label="locale.addSlide"
+          @click="addSlide"
+        />
+      </div>
+    </div>
+
+    <!-- Stage -->
+    <div
+      ref="stageRef"
+      data-swipe-ignore
+      class="flex-1 flex items-center justify-center relative overflow-hidden select-none"
+      :class="slidesTheme === 'dark' ? 'bg-neutral-950' : 'bg-neutral-100'"
+      @touchstart.passive="onStageTouchStart"
+      @touchmove="onStageTouchMove"
+      @touchend.passive="onStageTouchEnd"
+      @touchcancel.passive="onStageTouchEnd"
+    >
+      <!-- Empty state -->
+      <div
+        v-if="groups.length === 0"
+        class="flex flex-col items-center justify-center h-full gap-3 text-center"
+      >
+        <UIcon
+          name="i-lucide-presentation"
+          class="size-10 text-(--ui-text-dimmed)"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          {{ locale.empty }}
+        </p>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          :label="locale.addSlide"
+          size="sm"
+          @click="addSlide"
+        />
+      </div>
+
+      <template v-else>
+        <!-- Left indicator -->
+        <Transition name="slides-indicator">
+          <button
+            v-if="canGoLeft"
+            class="absolute left-3 z-10 flex items-center justify-center size-10 rounded-full bg-(--ui-bg-elevated)/60 backdrop-blur-sm border border-(--ui-border)/50 hover:bg-(--ui-bg-elevated) hover:scale-110 transition-all duration-150 cursor-pointer"
+            :class="slidesTheme === 'dark' ? 'text-white/60 hover:text-white' : 'text-neutral-500 hover:text-neutral-800'"
+            @click="goLeft"
+          >
+            <UIcon
+              name="i-lucide-chevron-left"
+              class="size-5"
+            />
+          </button>
+        </Transition>
+
+        <!-- Up indicator -->
+        <Transition name="slides-indicator">
+          <button
+            v-if="canGoUp"
+            class="absolute top-3 z-10 flex items-center justify-center size-10 rounded-full bg-(--ui-bg-elevated)/60 backdrop-blur-sm border border-(--ui-border)/50 hover:bg-(--ui-bg-elevated) hover:scale-110 transition-all duration-150 cursor-pointer"
+            :class="slidesTheme === 'dark' ? 'text-white/60 hover:text-white' : 'text-neutral-500 hover:text-neutral-800'"
+            @click="goUp"
+          >
+            <UIcon
+              name="i-lucide-chevron-up"
+              class="size-5"
+            />
+          </button>
+        </Transition>
+
+        <!-- Slide frame -->
+        <Transition
+          :name="isSwiping ? 'slides-none' : transitionName"
+          mode="out-in"
+        >
+          <div
+            :key="currentSlideId ?? 'empty'"
+            class="w-[90%] max-w-5xl max-h-[90%] rounded-xl shadow-2xl ring-1 relative"
+            :class="[
+  slideEditing ? 'overflow-y-auto' : 'overflow-hidden',
+  slidesTheme === 'dark' ? 'bg-neutral-900 ring-white/10' : 'bg-white ring-neutral-200'
+]"
+            :style="isSwiping ? { transform: `translate(${swipeOffset.x}px, ${swipeOffset.y}px)`, transition: 'none' } : { transition: 'transform 300ms ease' }"
+          >
+            <!-- Slide content (renders the slide's actual page type) -->
+            <div
+              v-if="slideProvider && currentSlideId"
+              class="w-full h-full overflow-hidden"
+              :class="!slideEditing ? 'pointer-events-none' : ''"
+            >
+              <component
+                :is="currentSlideTypeDef.component"
+                :key="`${currentSlideId}-${currentSlideTypeKey ?? 'doc'}`"
+                :doc-id="currentSlideId"
+                :child-provider="slideProvider"
+                :doc-label="currentSlide?.label ?? ''"
+              />
+            </div>
+
+            <!-- Loading -->
+            <div
+              v-else-if="slideLoading"
+              class="w-full h-full flex items-center justify-center"
+            >
+              <UIcon
+                name="i-lucide-loader-2"
+                class="size-6 animate-spin text-(--ui-text-muted)"
+              />
+            </div>
+
+            <!-- Fallback: label only -->
+            <div
+              v-else-if="currentSlide"
+              class="w-full h-full flex items-center justify-center p-8"
+            >
+              <h2
+                class="text-2xl font-semibold text-center"
+                :class="slidesTheme === 'dark' ? 'text-white' : 'text-neutral-900'"
+              >
+                {{ currentSlide.label }}
+              </h2>
+            </div>
+
+            <!-- Click-to-edit overlay -->
+            <div
+              v-if="editable && slideProvider && !slideEditing"
+              class="absolute inset-0 z-10 cursor-pointer"
+              @click="slideEditing = true"
+            />
+
+            <!-- Editing indicator -->
+            <Transition name="slides-indicator">
+              <div
+                v-if="slideEditing"
+                class="absolute top-2 right-2 z-10 flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs bg-black/50 text-white/80 backdrop-blur-sm"
+              >
+                <UIcon
+                  name="i-lucide-pencil"
+                  class="size-3"
+                />
+                <span>{{ locale.editing }}</span>
+                <span class="text-white/50 ml-1">{{ locale.escToExit }}</span>
+              </div>
+            </Transition>
+          </div>
+        </Transition>
+
+        <!-- Right indicator -->
+        <Transition name="slides-indicator">
+          <button
+            v-if="canGoRight"
+            class="absolute right-3 z-10 flex items-center justify-center size-10 rounded-full bg-(--ui-bg-elevated)/60 backdrop-blur-sm border border-(--ui-border)/50 hover:bg-(--ui-bg-elevated) hover:scale-110 transition-all duration-150 cursor-pointer"
+            :class="slidesTheme === 'dark' ? 'text-white/60 hover:text-white' : 'text-neutral-500 hover:text-neutral-800'"
+            @click="goRight"
+          >
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="size-5"
+            />
+          </button>
+        </Transition>
+
+        <!-- Down indicator -->
+        <Transition name="slides-indicator">
+          <button
+            v-if="canGoDown"
+            class="absolute bottom-14 z-10 flex items-center justify-center size-10 rounded-full bg-(--ui-bg-elevated)/60 backdrop-blur-sm border border-(--ui-border)/50 hover:bg-(--ui-bg-elevated) hover:scale-110 transition-all duration-150 cursor-pointer"
+            :class="slidesTheme === 'dark' ? 'text-white/60 hover:text-white' : 'text-neutral-500 hover:text-neutral-800'"
+            @click="goDown"
+          >
+            <UIcon
+              name="i-lucide-chevron-down"
+              class="size-5"
+            />
+          </button>
+        </Transition>
+
+        <!-- Position dots -->
+        <div class="absolute bottom-4 z-10 flex items-center gap-1.5">
+          <button
+            v-for="(group, i) in groups"
+            :key="group.id"
+            class="rounded-full transition-all duration-200 cursor-pointer relative"
+            :class="[
+  i === position.groupIndex ? 'size-2.5 bg-(--ui-primary)' : slidesTheme === 'dark' ? 'size-2 bg-white/30 hover:bg-white/50' : 'size-2 bg-neutral-400/40 hover:bg-neutral-400/60'
+]"
+            @click="goTo({ groupIndex: i, subIndex: 0 })"
+          >
+            <span
+              v-if="subSlidesOf(group.id).length > 0"
+              class="absolute -top-1.5 left-1/2 -translate-x-1/2 size-1 rounded-full"
+              :class="slidesTheme === 'dark' ? 'bg-white/20' : 'bg-neutral-400/30'"
+            />
+            <span
+              v-for="u in remoteUsersOnGroup(i)"
+              :key="u.clientId"
+              class="absolute -bottom-2.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full"
+              :style="{ backgroundColor: u.user?.color ?? '#888' }"
+            />
+          </button>
+        </div>
+
+        <!-- Vertical position indicator -->
+        <div
+          v-if="subSlidesOf(groups[position.groupIndex]?.id ?? '').length > 0"
+          class="absolute right-5 top-1/2 -translate-y-1/2 z-10 flex flex-col items-center gap-1.5"
+        >
+          <button
+            v-for="si in subSlidesOf(groups[position.groupIndex]?.id ?? '').length + 1"
+            :key="si"
+            class="rounded-full transition-all duration-200 cursor-pointer"
+            :class="[
+  si - 1 === position.subIndex ? 'size-2.5 bg-(--ui-primary)' : slidesTheme === 'dark' ? 'size-1.5 bg-white/30 hover:bg-white/50' : 'size-1.5 bg-neutral-400/40 hover:bg-neutral-400/60'
+]"
+            @click="goTo({ groupIndex: position.groupIndex, subIndex: si - 1 })"
+          />
+        </div>
+      </template>
+    </div>
+
+    <!-- Keyboard help overlay -->
+    <Transition name="slides-fade">
+      <div
+        v-if="showHelp"
+        class="absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
+        @click="showHelp = false"
+      >
+        <div
+          class="bg-(--ui-bg-elevated) rounded-xl p-6 shadow-2xl max-w-sm w-full mx-4 ring-1 ring-(--ui-border)"
+          @click.stop
+        >
+          <h3 class="text-sm font-semibold text-(--ui-text) mb-4">
+            {{ locale.keyboardHelp }}
+          </h3>
+          <div class="space-y-2 text-sm text-(--ui-text-muted)">
+            <div class="flex items-center justify-between">
+              <span>{{ locale.helpArrows }}</span>
+              <div class="flex gap-1">
+                <kbd class="px-1.5 py-0.5 rounded bg-(--ui-bg) text-xs font-mono border border-(--ui-border)">←</kbd>
+                <kbd class="px-1.5 py-0.5 rounded bg-(--ui-bg) text-xs font-mono border border-(--ui-border)">→</kbd>
+                <kbd class="px-1.5 py-0.5 rounded bg-(--ui-bg) text-xs font-mono border border-(--ui-border)">↑</kbd>
+                <kbd class="px-1.5 py-0.5 rounded bg-(--ui-bg) text-xs font-mono border border-(--ui-border)">↓</kbd>
+              </div>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>{{ locale.helpSpace }}</span>
+              <kbd class="px-1.5 py-0.5 rounded bg-(--ui-bg) text-xs font-mono border border-(--ui-border)">Space</kbd>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>{{ locale.helpDblClick }}</span>
+              <span class="text-xs">2× click</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
+  </div>
+</template>
+
+<style scoped>
+.slides-fade-enter-active,.slides-fade-leave-active{transition:opacity .3s ease}.slides-fade-enter-from,.slides-fade-leave-to{opacity:0}.slides-slide-enter-active,.slides-slide-leave-active{transition:opacity .3s ease,transform .3s ease}.slides-slide-enter-from{opacity:0;transform:translateX(60px)}.slides-slide-leave-to{opacity:0;transform:translateX(-60px)}.slides-slide-reverse-enter-active,.slides-slide-reverse-leave-active{transition:opacity .3s ease,transform .3s ease}.slides-slide-reverse-enter-from{opacity:0;transform:translateX(-60px)}.slides-slide-reverse-leave-to{opacity:0;transform:translateX(60px)}.slides-none-enter-active,.slides-none-leave-active{transition:none}.slides-indicator-enter-active,.slides-indicator-leave-active{transition:opacity .2s ease}.slides-indicator-enter-from,.slides-indicator-leave-to{opacity:0}
+</style>