@abraca/nuxt 2.11.0 → 2.13.0

package/dist/runtime/components/ANodePanel.vue

@@ -1,20 +1,21 @@
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, defineAsyncComponent } from "vue";
 import { useAbracadabra } from "../composables/useAbracadabra";
 import { useSyncedMap } from "../composables/useYDoc";
-import { navigateTo } from "#imports";
+import { navigateTo, useRuntimeConfig } from "#imports";
 import { useChildTree } from "../composables/useChildTree";
 import { useAbraLocale } from "../composables/useAbraLocale";
+import { useDocSlugs } from "../composables/useDocSlugs";
 import { useResizableWidth } from "../composables/useResizableWidth";
-import ANodePanelHeader from "./ANodePanelHeader.vue";
-import { defineAsyncComponent } from "vue";
-import { useRuntimeConfig } from "#imports";
+import AConnectionBadge from "./AConnectionBadge.vue";
+import AEditorUndoButton from "./editor/AEditorUndoButton.vue";
+import AEditorRedoButton from "./editor/AEditorRedoButton.vue";
 import { useChat } from "../composables/useChat";
+import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions";
+import { resolveDocType } from "../utils/docTypes";
 const ANodeChatPanel = defineAsyncComponent(() => import("./chat/ANodeChatPanel.vue"));
 const ANodeSettingsPanel = defineAsyncComponent(() => import("./ANodeSettingsPanel.vue"));
 const ADocPanelServerSettings = defineAsyncComponent(() => import("./shell/ADocPanelServerSettings.vue"));
-import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions";
-import { resolveDocType } from "../utils/docTypes";
 const props = defineProps({
   nodeId: { type: [String, null], required: true },
   nodeLabel: { type: String, required: false },
@@ -22,7 +23,8 @@ const props = defineProps({
   docType: { type: String, required: false },
   labels: { type: Object, required: false },
   initialTab: { type: String, required: false, default: "editor" },
-  tabs: { type: Array, required: false }
+  tabs: { type: Array, required: false },
+  docHref: { type: Function, required: false }
 });
 const emit = defineEmits(["close"]);
 const open = computed({
@@ -43,7 +45,12 @@ const entry = computed(() => {
   return treeMap.data[props.nodeId] ?? null;
 });
 const meta = computed(() => entry.value?.meta ?? {});
+const resolvedLabel = computed(() => entry.value?.label || props.nodeLabel || "");
 const currentType = computed(() => entry.value?.type ?? "doc");
+const { getDocUrl } = useDocSlugs();
+function hrefFor(id) {
+  return props.docHref ? props.docHref(id) : getDocUrl(id);
+}
 function patchMeta(patch) {
   if (!props.nodeId) return;
   const e = treeMap.data[props.nodeId];
@@ -183,56 +190,109 @@ const addFieldMenuItems = computed(
   <USlideover
     v-model:open="open"
     side="right"
-    :title="nodeLabel || 'Document'"
+    :title="resolvedLabel || 'Document'"
+    :close="false"
     :content="{ style: resize.style.value }"
-    :ui="{ body: 'p-0' }"
     @update:open="(v) => !v && emit('close')"
   >
-    <template #header>
-      <!-- Default header uses <ANodePanelHeader>. Consumers can replace the
-           whole header via the #header slot, or replace individual pieces
-           (presence, actions-right, etc.) by importing <ANodePanelHeader>
-           and supplying its own slots. -->
-      <slot
-        name="header"
-        :node-id="nodeId"
-        :node-label="nodeLabel"
-        :editor="tiptapEditor"
-        :meta="meta"
-        :doc-type-def="docTypeDef"
-      >
-        <ANodePanelHeader
+    <!-- We take full control of the panel chrome via #content (rather than
+         USlideover's default header/body slots) so the layout matches cou-sh's
+         DocSlideover: a tight 40px control bar with icon-only tabs, then a
+         flush content area. -->
+    <template #content>
+      <div class="flex flex-col h-full relative">
+        <!-- Resize handle: left edge of slideover, desktop only -->
+        <div
+          class="absolute left-0 top-0 bottom-0 w-1.5 z-10 cursor-col-resize hidden sm:block"
+          :class="resize.isResizing.value ? 'bg-(--ui-primary)/20' : 'hover:bg-(--ui-primary)/10'"
+          @mousedown.stop.prevent="resize.onMouseDown"
+          @touchstart.stop.prevent="resize.onTouchStart"
+          @dblclick="resize.onDoubleClick"
+        />
+
+        <!-- Header bar — close + expand on the left, icon-only tab controls on
+             the right (cou-sh DocSlideover parity). Consumers can replace the
+             whole bar via the #header slot. -->
+        <slot
+          name="header"
           :node-id="nodeId"
-          :node-label="nodeLabel"
-          :icon="meta.icon ?? docTypeDef.icon"
-          :icon-color="meta.color"
-          :provider="childProvider"
-          :editor="activeTab === 'editor' && !usesPageRenderer ? tiptapEditor : null"
-          @expand="navigateTo(`/app/${nodeId}`)"
+          :node-label="resolvedLabel"
+          :editor="tiptapEditor"
+          :meta="meta"
+          :active-tab="activeTab"
+          :doc-type-def="docTypeDef"
         >
-          <!-- Tabs inline with the title — single-row header layout.
-               Built-in tabs honour the `tabs` prop; plugin-registered tabs
-               always render. -->
-          <template #actions-left>
-            <div class="flex items-center gap-1 ml-2">
-              <UButton
-                v-if="showEditorTab"
-                icon="i-lucide-file-text"
-                :label="locale.editorTab"
-                size="xs"
-                :color="activeTab === 'editor' ? 'primary' : 'neutral'"
-                :variant="activeTab === 'editor' ? 'soft' : 'ghost'"
-                @click="activeTab = 'editor'"
+          <div class="flex items-center justify-between gap-2 px-3 h-10 border-b border-(--ui-border) shrink-0 bg-elevated/75 select-none">
+            <!-- Left: close · expand · connection badge -->
+            <div class="flex items-center gap-0.5">
+              <UTooltip
+                :text="locale.close"
+                :content="{ side: 'bottom' }"
+              >
+                <UButton
+                  icon="i-lucide-x"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  @click="emit('close')"
+                />
+              </UTooltip>
+              <UTooltip
+                :text="locale.openAsFullPage"
+                :content="{ side: 'bottom' }"
+              >
+                <UButton
+                  icon="i-lucide-expand"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  @click="nodeId && navigateTo(hrefFor(nodeId))"
+                />
+              </UTooltip>
+              <AConnectionBadge
+                v-if="childProvider"
+                :provider="childProvider"
+                class="ml-1"
               />
-              <UButton
+            </div>
+
+            <!-- Right: undo/redo (editor tab) · icon-only tab buttons -->
+            <div class="flex items-center gap-0.5">
+              <template v-if="activeTab === 'editor' && !usesPageRenderer && tiptapEditor">
+                <AEditorUndoButton :editor="tiptapEditor" />
+                <AEditorRedoButton :editor="tiptapEditor" />
+                <USeparator
+                  orientation="vertical"
+                  class="h-4 mx-0.5"
+                />
+              </template>
+
+              <UTooltip
+                v-if="showEditorTab"
+                :text="locale.editorTab"
+                :content="{ side: 'bottom' }"
+              >
+                <UButton
+                  :icon="usesPageRenderer ? docTypeDef.icon : 'i-lucide-file-text'"
+                  size="xs"
+                  :color="activeTab === 'editor' ? 'primary' : 'neutral'"
+                  :variant="activeTab === 'editor' ? 'soft' : 'ghost'"
+                  @click="activeTab = 'editor'"
+                />
+              </UTooltip>
+              <UTooltip
                 v-if="showPropertiesTab"
-                icon="i-lucide-sliders-horizontal"
-                :label="locale.propertiesTab"
-                size="xs"
-                :color="activeTab === 'properties' ? 'primary' : 'neutral'"
-                :variant="activeTab === 'properties' ? 'soft' : 'ghost'"
-                @click="activeTab = 'properties'"
-              />
+                :text="locale.propertiesTab"
+                :content="{ side: 'bottom' }"
+              >
+                <UButton
+                  icon="i-lucide-sliders-horizontal"
+                  size="xs"
+                  :color="activeTab === 'properties' ? 'primary' : 'neutral'"
+                  :variant="activeTab === 'properties' ? 'soft' : 'ghost'"
+                  @click="activeTab = 'properties'"
+                />
+              </UTooltip>
               <UChip
                 v-if="showChatTab"
                 :text="chatUnread > 0 && activeTab !== 'chat' ? String(chatUnread) : void 0"
@@ -240,501 +300,515 @@ const addFieldMenuItems = computed(
                 size="lg"
                 :show="chatUnread > 0 && activeTab !== 'chat'"
                 :inset="true"
+              >
+                <UTooltip
+                  :text="locale.chatTab"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-message-circle"
+                    size="xs"
+                    :color="activeTab === 'chat' ? 'primary' : 'neutral'"
+                    :variant="activeTab === 'chat' ? 'soft' : 'ghost'"
+                    @click="activeTab = 'chat'"
+                  />
+                </UTooltip>
+              </UChip>
+              <UTooltip
+                v-if="showSettingsTab"
+                :text="locale.settingsTab"
+                :content="{ side: 'bottom' }"
               >
                 <UButton
-                  icon="i-lucide-message-circle"
-                  label="Chat"
+                  icon="i-lucide-settings-2"
                   size="xs"
-                  :color="activeTab === 'chat' ? 'primary' : 'neutral'"
-                  :variant="activeTab === 'chat' ? 'soft' : 'ghost'"
-                  @click="activeTab = 'chat'"
+                  :color="activeTab === 'settings' ? 'primary' : 'neutral'"
+                  :variant="activeTab === 'settings' ? 'soft' : 'ghost'"
+                  @click="activeTab = 'settings'"
                 />
-              </UChip>
-              <UButton
-                v-if="showSettingsTab"
-                icon="i-lucide-settings-2"
-                label="Settings"
-                size="xs"
-                :color="activeTab === 'settings' ? 'primary' : 'neutral'"
-                :variant="activeTab === 'settings' ? 'soft' : 'ghost'"
-                @click="activeTab = 'settings'"
-              />
-              <UButton
+              </UTooltip>
+              <UTooltip
                 v-if="showServerSettingsTab"
-                icon="i-lucide-server-cog"
-                label="Server"
-                size="xs"
-                :color="activeTab === 'serverSettings' ? 'primary' : 'neutral'"
-                :variant="activeTab === 'serverSettings' ? 'soft' : 'ghost'"
-                @click="activeTab = 'serverSettings'"
-              />
-              <UButton
+                :text="locale.serverTab"
+                :content="{ side: 'bottom' }"
+              >
+                <UButton
+                  icon="i-lucide-bolt"
+                  size="xs"
+                  :color="activeTab === 'serverSettings' ? 'primary' : 'neutral'"
+                  :variant="activeTab === 'serverSettings' ? 'soft' : 'ghost'"
+                  @click="activeTab = 'serverSettings'"
+                />
+              </UTooltip>
+              <UTooltip
                 v-for="slot in pluginSlots"
                 :key="slot.id"
-                :icon="slot.icon"
-                :label="slot.label"
-                size="xs"
-                :color="activeTab === slot.id ? 'primary' : 'neutral'"
-                :variant="activeTab === slot.id ? 'soft' : 'ghost'"
-                @click="activeTab = slot.id"
-              />
+                :text="slot.label"
+                :content="{ side: 'bottom' }"
+              >
+                <UButton
+                  :icon="slot.icon"
+                  size="xs"
+                  :color="activeTab === slot.id ? 'primary' : 'neutral'"
+                  :variant="activeTab === slot.id ? 'soft' : 'ghost'"
+                  @click="activeTab = slot.id"
+                />
+              </UTooltip>
             </div>
-          </template>
-        </ANodePanelHeader>
-      </slot>
-    </template>
-
-    <template #body>
-      <!-- Resize handle: left edge of slideover, desktop only -->
-      <div
-        class="absolute left-0 top-0 bottom-0 w-1.5 z-10 cursor-col-resize hidden sm:block group"
-        :class="resize.isResizing.value ? 'bg-(--ui-primary)/20' : 'hover:bg-(--ui-primary)/10'"
-        @mousedown.stop.prevent="resize.onMouseDown"
-        @touchstart.stop.prevent="resize.onTouchStart"
-        @dblclick="resize.onDoubleClick"
-      />
-
-      <!-- Editor tab — swaps to the registered page-type renderer when the
-           doc has a non-'doc' type (kanban / table / calendar / etc.). -->
-      <div
-        v-show="activeTab === 'editor'"
-        class="min-h-[60vh]"
-      >
-        <component
-          :is="docTypeDef.component"
-          v-if="nodeId && usesPageRenderer"
-          :key="`${nodeId}-${currentType}`"
-          :doc-id="nodeId"
-          :doc-label="nodeLabel || ''"
-          :child-provider="childProvider"
-        />
-        <AEditor
-          v-else-if="nodeId"
-          ref="editorRef"
-          :doc-id="nodeId"
-          :child-provider="childProvider"
-          :parent-type="docType"
-          :doc-meta="meta"
-          class="h-full overflow-auto"
-          @update-meta="patchMeta"
-        />
-      </div>
-
-      <!-- Chat tab -->
-      <div
-        v-if="showChatTab"
-        v-show="activeTab === 'chat'"
-        class="min-h-[60vh] -mx-4 -mb-4 sm:-mx-6"
-      >
-        <ANodeChatPanel
-          v-if="nodeId"
-          :doc-id="nodeId"
-          :label="nodeLabel || 'Chat'"
-        />
-      </div>
-
-      <!-- Settings tab — snapshots wired by default; permissions and
-           encryption are app-supplied via slots. -->
-      <div
-        v-if="showSettingsTab"
-        v-show="activeTab === 'settings'"
-        class="min-h-[60vh]"
-      >
-        <ANodeSettingsPanel
-          v-if="nodeId"
-          :doc-id="nodeId"
-          :doc-type-key="currentType"
-          :doc-label="nodeLabel"
-          :doc-meta="meta"
-          @update-meta="patchMeta"
-        />
-      </div>
-
-      <!-- Server-settings tab (opt-in via `tabs`) — hub-doc server status. -->
-      <div
-        v-if="showServerSettingsTab"
-        v-show="activeTab === 'serverSettings'"
-        class="min-h-[60vh] -mx-4 -mb-4 sm:-mx-6"
-      >
-        <ADocPanelServerSettings
-          v-if="nodeId"
-          :doc-id="nodeId"
-        />
-      </div>
-
-      <!-- Properties tab -->
-      <div
-        v-show="activeTab === 'properties'"
-        class="space-y-4"
-      >
-        <!-- Document type -->
-        <div class="space-y-1">
-          <label class="text-xs font-medium text-muted">{{ locale.docType }}</label>
-          <ADocTypeSelect
-            :model-value="currentType"
-            @update:model-value="patchType"
-          />
-        </div>
-
-        <!-- Icon + Color (row) -->
-        <div class="grid grid-cols-2 gap-3">
-          <div class="space-y-1">
-            <label class="text-xs font-medium text-muted">{{ locale.icon }}</label>
-            <AIconPicker
-              :model-value="meta.icon"
-              @update:model-value="patchMeta({ icon: $event })"
-            />
           </div>
-          <div class="space-y-1">
-            <label class="text-xs font-medium text-muted">{{ locale.color }}</label>
-            <AColorPicker
-              :field-key="`node-panel:meta:color:${props.nodeId}`"
-              :model-value="meta.color"
-              @update:model-value="patchMeta({ color: $event })"
-            />
-          </div>
-        </div>
+        </slot>
 
-        <!-- Status + Priority (row) -->
-        <div class="grid grid-cols-2 gap-3">
-          <div class="space-y-1">
-            <label class="text-xs font-medium text-muted">{{ locale.status }}</label>
-            <USelect
-              :model-value="meta.status || 'none'"
-              :items="statusOptions"
-              value-key="value"
-              label-key="label"
-              size="sm"
-              @update:model-value="patchMeta({ status: $event === 'none' ? void 0 : $event })"
+        <!-- Content area -->
+        <div class="flex flex-col flex-1 min-h-0 overflow-hidden">
+          <!-- Editor tab — swaps to the registered page-type renderer when the
+               doc has a non-'doc' type (kanban / table / calendar / etc.). -->
+          <div
+            v-show="activeTab === 'editor'"
+            class="flex flex-col flex-1 min-h-0"
+          >
+            <component
+              :is="docTypeDef.component"
+              v-if="nodeId && usesPageRenderer"
+              :key="`${nodeId}-${currentType}`"
+              :doc-id="nodeId"
+              :doc-label="resolvedLabel"
+              :child-provider="childProvider"
+              class="flex-1 overflow-hidden"
             />
-          </div>
-          <div class="space-y-1">
-            <label class="text-xs font-medium text-muted">{{ locale.priority }}</label>
-            <USelect
-              :model-value="meta.priority ? String(meta.priority) : 'none'"
-              :items="priorityOptions"
-              value-key="value"
-              label-key="label"
-              size="sm"
-              @update:model-value="patchMeta({ priority: $event === 'none' ? void 0 : Number($event) })"
+            <AEditor
+              v-else-if="nodeId"
+              ref="editorRef"
+              :doc-id="nodeId"
+              :doc-label="resolvedLabel"
+              :child-provider="childProvider"
+              :parent-type="docType"
+              :doc-meta="meta"
+              class="flex-1 overflow-y-auto"
+              @update-meta="patchMeta"
             />
           </div>
-        </div>
 
-        <!-- Rating -->
-        <div class="space-y-1">
-          <label class="text-xs font-medium text-muted">{{ locale.rating }}</label>
-          <div class="flex items-center gap-1">
-            <button
-              v-for="n in 5"
-              :key="n"
-              type="button"
-              class="transition-colors focus:outline-none"
-              @click="patchMeta({ rating: meta.rating === n ? void 0 : n })"
-            >
-              <UIcon
-                name="i-lucide-star"
-                class="size-5"
-                :class="(meta.rating ?? 0) >= n ? 'text-warning' : 'text-muted'"
-              />
-            </button>
-            <button
-              v-if="meta.rating"
-              type="button"
-              class="ml-1 text-xs text-muted hover:text-default"
-              @click="patchMeta({ rating: void 0 })"
-            >
-              <UIcon
-                name="i-lucide-x"
-                class="size-3"
-              />
-            </button>
-          </div>
-        </div>
-
-        <!-- URL -->
-        <div class="space-y-1">
-          <label class="text-xs font-medium text-muted">{{ locale.url }}</label>
-          <UInput
-            type="url"
-            :model-value="meta.url ?? ''"
-            placeholder="https://…"
-            size="sm"
-            @update:model-value="patchMeta({ url: $event || void 0 })"
-          />
-        </div>
-
-        <!-- Dates -->
-        <div class="space-y-1">
-          <label class="text-xs font-medium text-muted">{{ locale.dates }}</label>
-          <div class="grid grid-cols-2 gap-2">
-            <UInput
-              type="date"
-              :model-value="meta.dateStart ?? ''"
-              size="sm"
-              @update:model-value="patchMeta({ dateStart: $event || void 0 })"
-            />
-            <UInput
-              type="date"
-              :model-value="meta.dateEnd ?? ''"
-              size="sm"
-              @update:model-value="patchMeta({ dateEnd: $event || void 0 })"
+          <!-- Chat tab -->
+          <div
+            v-if="showChatTab"
+            v-show="activeTab === 'chat'"
+            class="flex flex-col flex-1 min-h-0"
+          >
+            <ANodeChatPanel
+              v-if="nodeId"
+              :doc-id="nodeId"
+              :label="resolvedLabel || 'Chat'"
+              class="flex-1 min-h-0"
             />
           </div>
-        </div>
 
-        <!-- Tags -->
-        <div class="space-y-1">
-          <label class="text-xs font-medium text-muted">Tags</label>
-          <div class="flex flex-wrap gap-1 mb-1">
-            <UBadge
-              v-for="tag in tags"
-              :key="tag"
-              variant="soft"
-              class="cursor-pointer"
-              @click="removeTag(tag)"
-            >
-              {{ tag }}
-              <UIcon
-                name="i-lucide-x"
-                class="size-3 ml-1"
-              />
-            </UBadge>
-          </div>
-          <UInput
-            v-model="tagInput"
-            placeholder="Add tag…"
-            size="sm"
-            @keydown.enter.prevent="addTag"
-            @keydown="($event2) => {
-  if ($event2.key === ',') {
-    $event2.preventDefault();
-    addTag();
-  }
-}"
-          />
-        </div>
-
-        <!-- Cover image -->
-        <div
-          v-if="meta.coverUploadId || meta.coverDocId"
-          class="space-y-1"
-        >
-          <label class="text-xs font-medium text-muted">{{ locale.cover }}</label>
-          <div class="flex items-center gap-2 text-xs text-muted">
-            <UIcon
-              name="i-lucide-image"
-              class="size-4 shrink-0"
-            />
-            <span class="truncate">{{ meta.coverUploadId ?? meta.coverDocId }}</span>
-            <UButton
-              icon="i-lucide-x"
-              size="xs"
-              variant="ghost"
-              color="neutral"
-              @click="patchMeta({ coverUploadId: void 0, coverDocId: void 0, coverMimeType: void 0 })"
+          <!-- Settings tab — snapshots wired by default; permissions and
+           encryption are app-supplied via slots. -->
+          <div
+            v-if="showSettingsTab"
+            v-show="activeTab === 'settings'"
+            class="flex-1 min-h-0 overflow-y-auto"
+          >
+            <ANodeSettingsPanel
+              v-if="nodeId"
+              :doc-id="nodeId"
+              :doc-type-key="currentType"
+              :doc-label="resolvedLabel"
+              :doc-meta="meta"
+              @update-meta="patchMeta"
             />
           </div>
-        </div>
 
-        <!-- Custom fields -->
-        <div class="space-y-2">
-          <div class="flex items-center justify-between">
-            <label class="text-xs font-medium text-muted">{{ locale.customFields }}</label>
-            <UDropdownMenu :items="addFieldMenuItems">
-              <UButton
-                :label="locale.addField"
-                icon="i-lucide-plus"
-                size="xs"
-                variant="ghost"
-                color="neutral"
-              />
-            </UDropdownMenu>
+          <!-- Server-settings tab (opt-in via `tabs`) — hub-doc server status. -->
+          <div
+            v-if="showServerSettingsTab"
+            v-show="activeTab === 'serverSettings'"
+            class="flex-1 min-h-0 overflow-y-auto"
+          >
+            <ADocPanelServerSettings
+              v-if="nodeId"
+              :doc-id="nodeId"
+            />
           </div>
 
+          <!-- Properties tab -->
           <div
-            v-for="field in customFields"
-            :key="field.id"
-            class="space-y-1"
+            v-show="activeTab === 'properties'"
+            class="flex-1 min-h-0 overflow-y-auto p-4 space-y-4"
           >
-            <div class="flex items-center justify-between">
-              <label class="text-xs font-medium text-muted">{{ field.label || field.type }}</label>
-              <UButton
-                icon="i-lucide-trash-2"
-                size="xs"
-                variant="ghost"
-                color="neutral"
-                class="opacity-40 hover:opacity-100"
-                @click="removeCustomField(field.id)"
+            <!-- Document type -->
+            <div class="space-y-1">
+              <label class="text-xs font-medium text-muted">{{ locale.docType }}</label>
+              <ADocTypeSelect
+                :model-value="currentType"
+                @update:model-value="patchType"
               />
             </div>
 
-            <!-- Toggle -->
-            <template v-if="field.type === 'toggle'">
-              <USwitch
-                :model-value="!!getCustomFieldValue(field)"
-                @update:model-value="setCustomFieldValue(field, $event)"
-              />
-            </template>
-
-            <!-- Number -->
-            <template v-else-if="field.type === 'number'">
-              <UInput
-                type="number"
-                :model-value="String(getCustomFieldValue(field) ?? '')"
-                size="sm"
-                @update:model-value="setCustomFieldValue(field, $event ? Number($event) : void 0)"
-              />
-            </template>
+            <!-- Icon + Color (row) -->
+            <div class="grid grid-cols-2 gap-3">
+              <div class="space-y-1">
+                <label class="text-xs font-medium text-muted">{{ locale.icon }}</label>
+                <AIconPicker
+                  :model-value="meta.icon"
+                  @update:model-value="patchMeta({ icon: $event })"
+                />
+              </div>
+              <div class="space-y-1">
+                <label class="text-xs font-medium text-muted">{{ locale.color }}</label>
+                <AColorPicker
+                  :field-key="`node-panel:meta:color:${props.nodeId}`"
+                  :model-value="meta.color"
+                  @update:model-value="patchMeta({ color: $event })"
+                />
+              </div>
+            </div>
 
-            <!-- Slider / Progress -->
-            <template v-else-if="field.type === 'slider'">
-              <div class="flex items-center gap-2">
-                <USlider
-                  :model-value="Number(getCustomFieldValue(field) ?? field.min ?? 0)"
-                  :min="field.min ?? 0"
-                  :max="field.max ?? 100"
+            <!-- Status + Priority (row) -->
+            <div class="grid grid-cols-2 gap-3">
+              <div class="space-y-1">
+                <label class="text-xs font-medium text-muted">{{ locale.status }}</label>
+                <USelect
+                  :model-value="meta.status || 'none'"
+                  :items="statusOptions"
+                  value-key="value"
+                  label-key="label"
                   size="sm"
-                  class="flex-1"
-                  @update:model-value="setCustomFieldValue(field, $event)"
+                  @update:model-value="patchMeta({ status: $event === 'none' ? void 0 : $event })"
                 />
-                <span class="text-xs text-muted w-8 text-right">{{ getCustomFieldValue(field) ?? field.min ?? 0 }}</span>
               </div>
-            </template>
+              <div class="space-y-1">
+                <label class="text-xs font-medium text-muted">{{ locale.priority }}</label>
+                <USelect
+                  :model-value="meta.priority ? String(meta.priority) : 'none'"
+                  :items="priorityOptions"
+                  value-key="value"
+                  label-key="label"
+                  size="sm"
+                  @update:model-value="patchMeta({ priority: $event === 'none' ? void 0 : Number($event) })"
+                />
+              </div>
+            </div>
 
             <!-- Rating -->
-            <template v-else-if="field.type === 'rating'">
+            <div class="space-y-1">
+              <label class="text-xs font-medium text-muted">{{ locale.rating }}</label>
               <div class="flex items-center gap-1">
                 <button
-                  v-for="n in field.max ?? 5"
+                  v-for="n in 5"
                   :key="n"
                   type="button"
-                  class="focus:outline-none"
-                  @click="setCustomFieldValue(field, getCustomFieldValue(field) === n ? void 0 : n)"
+                  class="transition-colors focus:outline-none"
+                  @click="patchMeta({ rating: meta.rating === n ? void 0 : n })"
                 >
                   <UIcon
                     name="i-lucide-star"
-                    class="size-4"
-                    :class="Number(getCustomFieldValue(field) ?? 0) >= n ? 'text-warning' : 'text-muted'"
+                    class="size-5"
+                    :class="(meta.rating ?? 0) >= n ? 'text-warning' : 'text-muted'"
+                  />
+                </button>
+                <button
+                  v-if="meta.rating"
+                  type="button"
+                  class="ml-1 text-xs text-muted hover:text-default"
+                  @click="patchMeta({ rating: void 0 })"
+                >
+                  <UIcon
+                    name="i-lucide-x"
+                    class="size-3"
                   />
                 </button>
               </div>
-            </template>
+            </div>
 
-            <!-- Date / Datetime / Time (single) -->
-            <template v-else-if="['date', 'datetime', 'time'].includes(field.type)">
+            <!-- URL -->
+            <div class="space-y-1">
+              <label class="text-xs font-medium text-muted">{{ locale.url }}</label>
               <UInput
-                :type="field.type === 'datetime' ? 'datetime-local' : field.type"
-                :model-value="String(getCustomFieldValue(field) ?? '')"
+                type="url"
+                :model-value="meta.url ?? ''"
+                placeholder="https://…"
                 size="sm"
-                @update:model-value="setCustomFieldValue(field, $event || void 0)"
+                @update:model-value="patchMeta({ url: $event || void 0 })"
               />
-            </template>
+            </div>
 
-            <!-- Date range / Time range / Datetime range -->
-            <template v-else-if="['daterange', 'timerange', 'datetimerange'].includes(field.type)">
+            <!-- Dates -->
+            <div class="space-y-1">
+              <label class="text-xs font-medium text-muted">{{ locale.dates }}</label>
               <div class="grid grid-cols-2 gap-2">
                 <UInput
-                  :type="field.type === 'datetimerange' ? 'datetime-local' : field.type === 'timerange' ? 'time' : 'date'"
-                  :model-value="field.startKey ? String(meta[field.startKey] ?? '') : ''"
+                  type="date"
+                  :model-value="meta.dateStart ?? ''"
                   size="sm"
-                  @update:model-value="field.startKey && patchMeta({ [field.startKey]: $event || void 0 })"
+                  @update:model-value="patchMeta({ dateStart: $event || void 0 })"
                 />
                 <UInput
-                  :type="field.type === 'datetimerange' ? 'datetime-local' : field.type === 'timerange' ? 'time' : 'date'"
-                  :model-value="field.endKey ? String(meta[field.endKey] ?? '') : ''"
+                  type="date"
+                  :model-value="meta.dateEnd ?? ''"
                   size="sm"
-                  @update:model-value="field.endKey && patchMeta({ [field.endKey]: $event || void 0 })"
+                  @update:model-value="patchMeta({ dateEnd: $event || void 0 })"
                 />
               </div>
-            </template>
-
-            <!-- Textarea -->
-            <template v-else-if="field.type === 'textarea'">
-              <UTextarea
-                :model-value="String(getCustomFieldValue(field) ?? '')"
-                :rows="3"
-                size="sm"
-                @update:model-value="setCustomFieldValue(field, $event || void 0)"
-              />
-            </template>
-
-            <!-- URL -->
-            <template v-else-if="field.type === 'url'">
-              <UInput
-                type="url"
-                :model-value="String(getCustomFieldValue(field) ?? '')"
-                placeholder="https://…"
-                size="sm"
-                @update:model-value="setCustomFieldValue(field, $event || void 0)"
-              />
-            </template>
+            </div>
 
             <!-- Tags -->
-            <template v-else-if="field.type === 'tags'">
-              <div class="flex flex-wrap gap-1">
+            <div class="space-y-1">
+              <label class="text-xs font-medium text-muted">Tags</label>
+              <div class="flex flex-wrap gap-1 mb-1">
                 <UBadge
-                  v-for="t in Array.isArray(getCustomFieldValue(field)) ? getCustomFieldValue(field) : []"
-                  :key="t"
+                  v-for="tag in tags"
+                  :key="tag"
                   variant="soft"
                   class="cursor-pointer"
-                  @click="setCustomFieldValue(field, getCustomFieldValue(field).filter((x) => x !== t))"
+                  @click="removeTag(tag)"
                 >
-                  {{ t }}<UIcon
+                  {{ tag }}
+                  <UIcon
                     name="i-lucide-x"
                     class="size-3 ml-1"
                   />
                 </UBadge>
               </div>
-            </template>
-
-            <!-- Icon -->
-            <template v-else-if="field.type === 'icon'">
-              <AIconPicker
-                :model-value="String(getCustomFieldValue(field) ?? '')"
-                @update:model-value="setCustomFieldValue(field, $event)"
-              />
-            </template>
-
-            <!-- Color Preset / Color Picker -->
-            <template v-else-if="['colorPreset', 'colorPicker'].includes(field.type)">
-              <AColorPicker
-                :field-key="`node-panel:custom:${props.nodeId}:${field.key}`"
-                :model-value="String(getCustomFieldValue(field) ?? '')"
-                @update:model-value="setCustomFieldValue(field, $event)"
-              />
-            </template>
-
-            <!-- Fallback: text input -->
-            <template v-else>
               <UInput
-                :model-value="String(getCustomFieldValue(field) ?? '')"
+                v-model="tagInput"
+                placeholder="Add tag…"
                 size="sm"
-                @update:model-value="setCustomFieldValue(field, $event || void 0)"
+                @keydown.enter.prevent="addTag"
+                @keydown="($event2) => {
+  if ($event2.key === ',') {
+    $event2.preventDefault();
+    addTag();
+  }
+}"
               />
-            </template>
+            </div>
+
+            <!-- Cover image -->
+            <div
+              v-if="meta.coverUploadId || meta.coverDocId"
+              class="space-y-1"
+            >
+              <label class="text-xs font-medium text-muted">{{ locale.cover }}</label>
+              <div class="flex items-center gap-2 text-xs text-muted">
+                <UIcon
+                  name="i-lucide-image"
+                  class="size-4 shrink-0"
+                />
+                <span class="truncate">{{ meta.coverUploadId ?? meta.coverDocId }}</span>
+                <UButton
+                  icon="i-lucide-x"
+                  size="xs"
+                  variant="ghost"
+                  color="neutral"
+                  @click="patchMeta({ coverUploadId: void 0, coverDocId: void 0, coverMimeType: void 0 })"
+                />
+              </div>
+            </div>
+
+            <!-- Custom fields -->
+            <div class="space-y-2">
+              <div class="flex items-center justify-between">
+                <label class="text-xs font-medium text-muted">{{ locale.customFields }}</label>
+                <UDropdownMenu :items="addFieldMenuItems">
+                  <UButton
+                    :label="locale.addField"
+                    icon="i-lucide-plus"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                  />
+                </UDropdownMenu>
+              </div>
+
+              <div
+                v-for="field in customFields"
+                :key="field.id"
+                class="space-y-1"
+              >
+                <div class="flex items-center justify-between">
+                  <label class="text-xs font-medium text-muted">{{ field.label || field.type }}</label>
+                  <UButton
+                    icon="i-lucide-trash-2"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    class="opacity-40 hover:opacity-100"
+                    @click="removeCustomField(field.id)"
+                  />
+                </div>
+
+                <!-- Toggle -->
+                <template v-if="field.type === 'toggle'">
+                  <USwitch
+                    :model-value="!!getCustomFieldValue(field)"
+                    @update:model-value="setCustomFieldValue(field, $event)"
+                  />
+                </template>
+
+                <!-- Number -->
+                <template v-else-if="field.type === 'number'">
+                  <UInput
+                    type="number"
+                    :model-value="String(getCustomFieldValue(field) ?? '')"
+                    size="sm"
+                    @update:model-value="setCustomFieldValue(field, $event ? Number($event) : void 0)"
+                  />
+                </template>
+
+                <!-- Slider / Progress -->
+                <template v-else-if="field.type === 'slider'">
+                  <div class="flex items-center gap-2">
+                    <USlider
+                      :model-value="Number(getCustomFieldValue(field) ?? field.min ?? 0)"
+                      :min="field.min ?? 0"
+                      :max="field.max ?? 100"
+                      size="sm"
+                      class="flex-1"
+                      @update:model-value="setCustomFieldValue(field, $event)"
+                    />
+                    <span class="text-xs text-muted w-8 text-right">{{ getCustomFieldValue(field) ?? field.min ?? 0 }}</span>
+                  </div>
+                </template>
+
+                <!-- Rating -->
+                <template v-else-if="field.type === 'rating'">
+                  <div class="flex items-center gap-1">
+                    <button
+                      v-for="n in field.max ?? 5"
+                      :key="n"
+                      type="button"
+                      class="focus:outline-none"
+                      @click="setCustomFieldValue(field, getCustomFieldValue(field) === n ? void 0 : n)"
+                    >
+                      <UIcon
+                        name="i-lucide-star"
+                        class="size-4"
+                        :class="Number(getCustomFieldValue(field) ?? 0) >= n ? 'text-warning' : 'text-muted'"
+                      />
+                    </button>
+                  </div>
+                </template>
+
+                <!-- Date / Datetime / Time (single) -->
+                <template v-else-if="['date', 'datetime', 'time'].includes(field.type)">
+                  <UInput
+                    :type="field.type === 'datetime' ? 'datetime-local' : field.type"
+                    :model-value="String(getCustomFieldValue(field) ?? '')"
+                    size="sm"
+                    @update:model-value="setCustomFieldValue(field, $event || void 0)"
+                  />
+                </template>
+
+                <!-- Date range / Time range / Datetime range -->
+                <template v-else-if="['daterange', 'timerange', 'datetimerange'].includes(field.type)">
+                  <div class="grid grid-cols-2 gap-2">
+                    <UInput
+                      :type="field.type === 'datetimerange' ? 'datetime-local' : field.type === 'timerange' ? 'time' : 'date'"
+                      :model-value="field.startKey ? String(meta[field.startKey] ?? '') : ''"
+                      size="sm"
+                      @update:model-value="field.startKey && patchMeta({ [field.startKey]: $event || void 0 })"
+                    />
+                    <UInput
+                      :type="field.type === 'datetimerange' ? 'datetime-local' : field.type === 'timerange' ? 'time' : 'date'"
+                      :model-value="field.endKey ? String(meta[field.endKey] ?? '') : ''"
+                      size="sm"
+                      @update:model-value="field.endKey && patchMeta({ [field.endKey]: $event || void 0 })"
+                    />
+                  </div>
+                </template>
+
+                <!-- Textarea -->
+                <template v-else-if="field.type === 'textarea'">
+                  <UTextarea
+                    :model-value="String(getCustomFieldValue(field) ?? '')"
+                    :rows="3"
+                    size="sm"
+                    @update:model-value="setCustomFieldValue(field, $event || void 0)"
+                  />
+                </template>
+
+                <!-- URL -->
+                <template v-else-if="field.type === 'url'">
+                  <UInput
+                    type="url"
+                    :model-value="String(getCustomFieldValue(field) ?? '')"
+                    placeholder="https://…"
+                    size="sm"
+                    @update:model-value="setCustomFieldValue(field, $event || void 0)"
+                  />
+                </template>
+
+                <!-- Tags -->
+                <template v-else-if="field.type === 'tags'">
+                  <div class="flex flex-wrap gap-1">
+                    <UBadge
+                      v-for="t in Array.isArray(getCustomFieldValue(field)) ? getCustomFieldValue(field) : []"
+                      :key="t"
+                      variant="soft"
+                      class="cursor-pointer"
+                      @click="setCustomFieldValue(field, getCustomFieldValue(field).filter((x) => x !== t))"
+                    >
+                      {{ t }}<UIcon
+                        name="i-lucide-x"
+                        class="size-3 ml-1"
+                      />
+                    </UBadge>
+                  </div>
+                </template>
+
+                <!-- Icon -->
+                <template v-else-if="field.type === 'icon'">
+                  <AIconPicker
+                    :model-value="String(getCustomFieldValue(field) ?? '')"
+                    @update:model-value="setCustomFieldValue(field, $event)"
+                  />
+                </template>
+
+                <!-- Color Preset / Color Picker -->
+                <template v-else-if="['colorPreset', 'colorPicker'].includes(field.type)">
+                  <AColorPicker
+                    :field-key="`node-panel:custom:${props.nodeId}:${field.key}`"
+                    :model-value="String(getCustomFieldValue(field) ?? '')"
+                    @update:model-value="setCustomFieldValue(field, $event)"
+                  />
+                </template>
+
+                <!-- Fallback: text input -->
+                <template v-else>
+                  <UInput
+                    :model-value="String(getCustomFieldValue(field) ?? '')"
+                    size="sm"
+                    @update:model-value="setCustomFieldValue(field, $event || void 0)"
+                  />
+                </template>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <!-- Plugin slots -->
-      <template
-        v-for="slot in pluginSlots"
-        :key="slot.id"
-      >
-        <div v-show="activeTab === slot.id">
-          <component
-            :is="slot.component"
-            v-if="nodeId"
-            :child-id="nodeId"
-            :child-doc="childProvider?.document ?? null"
-            :parent-doc-id="nodeId"
-            :parent-type="docType"
-            :meta="meta"
-            :tree="tree"
-          />
+          <!-- Plugin slots -->
+          <template
+            v-for="slot in pluginSlots"
+            :key="slot.id"
+          >
+            <div
+              v-show="activeTab === slot.id"
+              class="flex-1 min-h-0 overflow-y-auto p-4"
+            >
+              <component
+                :is="slot.component"
+                v-if="nodeId"
+                :child-id="nodeId"
+                :child-doc="childProvider?.document ?? null"
+                :parent-doc-id="nodeId"
+                :parent-type="docType"
+                :meta="meta"
+                :tree="tree"
+              />
+            </div>
+          </template>
         </div>
-      </template>
+      </div>
     </template>
   </USlideover>
 </template>