@abraca/nuxt 1.9.1 → 2.0.0

package/dist/runtime/extensions/views/MetaFieldView.vue

@@ -1,6 +1,16 @@
 <script setup>
-import { computed, ref, nextTick } from "vue";
+import { computed, ref, onMounted, watch, nextTick } from "vue";
 import { NodeViewWrapper } from "@tiptap/vue-3";
+import AColorPalettePopover from "../../components/editor/AColorPalettePopover.vue";
+import AIconPickerPopover from "../../components/editor/AIconPickerPopover.vue";
+import ALocationPickerPopover from "../../components/editor/ALocationPickerPopover.vue";
+import { useAbraLocale } from "../../composables/useAbraLocale";
+import {
+  DateFormatter,
+  getLocalTimeZone,
+  Time,
+  parseDate
+} from "@internationalized/date";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },
@@ -14,15 +24,19 @@ const props = defineProps({
   extension: { type: Object, required: true },
   HTMLAttributes: { type: Object, required: true }
 });
+const t = useAbraLocale("editor");
 function storage() {
   return props.editor.storage?.metaField;
 }
+const df = new DateFormatter("en-US", { dateStyle: "medium" });
 const fieldType = computed(() => props.node.attrs.fieldType);
 const fieldLabel = computed(() => props.node.attrs.fieldLabel);
 const metaKey = computed(() => props.node.attrs.metaKey);
 const startKey = computed(() => props.node.attrs.startKey);
 const endKey = computed(() => props.node.attrs.endKey);
 const allDayKey = computed(() => props.node.attrs.allDayKey);
+const latKey = computed(() => props.node.attrs.latKey);
+const lngKey = computed(() => props.node.attrs.lngKey);
 const presets = computed(() => {
   try {
     return JSON.parse(props.node.attrs.presets ?? "[]");
@@ -30,6 +44,13 @@ const presets = computed(() => {
     return [];
   }
 });
+const iconOptions = computed(() => {
+  try {
+    return JSON.parse(props.node.attrs.iconOptions ?? "[]");
+  } catch {
+    return [];
+  }
+});
 const options = computed(() => {
   try {
     return JSON.parse(props.node.attrs.options ?? "[]");
@@ -46,130 +67,343 @@ function getStr(key) {
 }
 function getStrArr(key) {
   const v = storage()?.pageMeta?.[key];
-  return Array.isArray(v) ? v : [];
+  if (!v || !Array.isArray(v)) return [];
+  return v;
 }
 function getObjArr(key) {
   const v = storage()?.pageMeta?.[key];
-  return Array.isArray(v) ? v : [];
+  if (!v || !Array.isArray(v)) return [];
+  return v;
 }
 function getNum(key, fallback = 0) {
   return storage()?.pageMeta?.[key] ?? fallback;
 }
-function getBool(key) {
-  return Boolean(storage()?.pageMeta?.[key]);
+function getBool(key, fallback = false) {
+  const v = storage()?.pageMeta?.[key];
+  if (v === void 0 || v === null) return fallback;
+  return Boolean(v);
+}
+function getOptNum(key) {
+  const v = storage()?.pageMeta?.[key];
+  if (v === void 0 || v === null) return void 0;
+  return Number(v);
 }
 function patch(update) {
+  if (!props.editor?.isEditable) return;
   const s = storage();
   if (!s) return;
   if (s.pageMeta) Object.assign(s.pageMeta, update);
   s.updateMeta?.(update);
 }
-const labelDraft = ref("");
-function commitLabel() {
-  if (labelDraft.value !== fieldLabel.value) {
-    props.updateAttributes({ fieldLabel: labelDraft.value });
+function isoToCalendarDate(s) {
+  if (s.length < 10) return void 0;
+  try {
+    return parseDate(s.slice(0, 10));
+  } catch {
+    return void 0;
   }
 }
-function deleteChip() {
-  props.deleteNode();
+function dvToIso(d) {
+  return d.toString().slice(0, 10);
 }
-const defaultPresets = ["#6366f1", "#f97316", "#22c55e", "#ef4444", "#a855f7", "#06b6d4", "#f59e0b", "#ec4899"];
-const allPresets = computed(() => presets.value.length ? presets.value : defaultPresets);
-function toggleSelect(opt) {
-  patch({ [metaKey.value]: opt === getStr(metaKey.value) ? "" : opt });
+function isoToTime(hhmm) {
+  const [h = 0, m = 0] = hhmm.split(":").map(Number);
+  return new Time(isNaN(h) ? 0 : h, isNaN(m) ? 0 : m);
 }
-function toggleMultiSelect(opt) {
-  const current = getStrArr(metaKey.value);
-  const next = current.includes(opt) ? current.filter((x) => x !== opt) : [...current, opt];
-  patch({ [metaKey.value]: next });
+function timeToHHMM(t2) {
+  return `${String(t2.hour).padStart(2, "0")}:${String(t2.minute).padStart(2, "0")}`;
 }
-function toggleTag(tag) {
-  const current = getStrArr(metaKey.value);
-  const next = current.includes(tag) ? current.filter((x) => x !== tag) : [...current, tag];
-  patch({ [metaKey.value]: next });
+function getDateRange(sk, ek) {
+  const start = isoToCalendarDate(getStr(sk));
+  const end = isoToCalendarDate(getStr(ek));
+  return start && end ? { start, end } : void 0;
 }
-function fmtDate(iso) {
-  if (!iso) return "";
-  try {
-    return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-  } catch {
-    return iso;
-  }
+function formatDateRange(sk, ek) {
+  const startStr = getStr(sk).slice(0, 10);
+  const endStr = getStr(ek).slice(0, 10);
+  if (!startStr) return t.pickDate;
+  const sd = isoToCalendarDate(startStr);
+  if (!sd) return t.pickDate;
+  const startFmt = df.format(sd.toDate(getLocalTimeZone()));
+  if (!endStr) return startFmt;
+  const ed = isoToCalendarDate(endStr);
+  if (!ed || startStr === endStr) return startFmt;
+  return `${startFmt} \u2013 ${df.format(ed.toDate(getLocalTimeZone()))}`;
 }
-function fmtDatetime(iso) {
-  if (!iso) return "";
-  try {
-    return new Date(iso).toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
-  } catch {
-    return iso;
-  }
+function onDateTimeRange(range) {
+  if (!range?.start || !range?.end) return;
+  const allDay = getBool(allDayKey.value, true);
+  const st = allDay ? "00:00" : getStr(startKey.value).slice(11, 16) || "00:00";
+  const et = allDay ? "01:00" : getStr(endKey.value).slice(11, 16) || "01:00";
+  patch({
+    [startKey.value]: `${dvToIso(range.start)}T${st}:00.000Z`,
+    [endKey.value]: `${dvToIso(range.end)}T${et}:00.000Z`
+  });
 }
-const displayValue = computed(() => {
-  const t = fieldType.value;
-  if (t === "toggle") return getBool(metaKey.value) ? "Yes" : "No";
-  if (t === "colorPreset" || t === "colorPicker") return getStr(metaKey.value) ? "" : "None";
-  if (t === "date") return fmtDate(getStr(metaKey.value)) || "Set";
-  if (t === "datetime") return fmtDatetime(getStr(metaKey.value)) || "Set";
-  if (t === "daterange") {
-    const s = getStr(startKey.value);
-    const e = getStr(endKey.value);
-    return s && e ? `${fmtDate(s)} \u2013 ${fmtDate(e)}` : "Set";
-  }
-  if (t === "datetimerange") {
-    const s = getStr(startKey.value);
-    const e = getStr(endKey.value);
-    return s && e ? `${fmtDatetime(s)} \u2013 ${fmtDatetime(e)}` : "Set";
-  }
-  if (t === "timerange") {
-    const s = getStr(startKey.value);
-    const e = getStr(endKey.value);
-    return s && e ? `${s} \u2013 ${e}` : "Set";
-  }
-  if (t === "time") return getStr(metaKey.value) || "Set";
-  if (t === "slider" || t === "number") {
-    const v = getNum(metaKey.value, sliderMin.value);
-    return unit.value ? `${v} ${unit.value}` : String(v);
-  }
-  if (t === "rating") {
-    const v = getNum(metaKey.value);
-    return v ? `${v}/${sliderMax.value}` : "Rate";
-  }
-  if (t === "url") {
-    const v = getStr(metaKey.value);
-    return v ? new URL(v).hostname : "Add URL";
-  }
-  if (t === "select") return getStr(metaKey.value) || "Select";
-  if (t === "multiselect") {
-    const arr = getStrArr(metaKey.value);
-    return arr.length ? arr.join(", ") : "Select";
-  }
-  if (t === "tags") {
-    const arr = getStrArr(metaKey.value);
-    return arr.length ? arr.join(", ") : "Add tags";
+function onStartTime(t2) {
+  if (!t2) return;
+  const date = getStr(startKey.value).slice(0, 10) || (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  patch({ [startKey.value]: `${date}T${timeToHHMM(t2)}:00.000Z` });
+}
+function onEndTime(t2) {
+  if (!t2) return;
+  const date = getStr(endKey.value).slice(0, 10) || (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  patch({ [endKey.value]: `${date}T${timeToHHMM(t2)}:00.000Z` });
+}
+function toggleAllDay() {
+  patch({ [allDayKey.value]: !getBool(allDayKey.value, true) });
+}
+function onDateRange(range) {
+  if (!range?.start || !range?.end) return;
+  patch({ [startKey.value]: dvToIso(range.start), [endKey.value]: dvToIso(range.end) });
+}
+function onSlider(v) {
+  if (v == null) return;
+  patch({ [metaKey.value]: Array.isArray(v) ? v[0] : v });
+}
+function onColor(c) {
+  const update = { [metaKey.value]: c };
+  if (metaKey.value !== "color") update.color = c;
+  patch(update);
+  colorPopoverOpen.value = false;
+}
+function onLatLng(key, v) {
+  patch({ [key]: v != null ? Number(v) : void 0 });
+}
+function onIcon(name) {
+  const update = { [metaKey.value]: name };
+  if (metaKey.value !== "icon") update.icon = name;
+  patch(update);
+}
+function onToggle(v) {
+  patch({ [metaKey.value]: v });
+}
+function onNumber(v) {
+  patch({ [metaKey.value]: v != null && v !== "" ? Number(v) : void 0 });
+}
+function onSelect(v) {
+  patch({ [metaKey.value]: v });
+}
+function onMultiSelect(v) {
+  patch({ [metaKey.value]: v });
+}
+function onRating(v) {
+  const current = getNum(metaKey.value);
+  const next = current === v ? 0 : v;
+  const update = { [metaKey.value]: next };
+  if (metaKey.value !== "rating") update.rating = next;
+  patch(update);
+}
+function onRatingWheel(e) {
+  const delta = -Math.sign(e.deltaY);
+  if (!delta) return;
+  const current = getNum(metaKey.value);
+  const max = sliderMax.value || 5;
+  const next = Math.max(0, Math.min(max, current + delta));
+  if (next !== current) patch({ [metaKey.value]: next });
+}
+function onNumberWheel(e) {
+  const delta = -Math.sign(e.deltaY);
+  if (!delta) return;
+  const step = (sliderStep.value || 1) * (e.shiftKey ? 10 : 1);
+  const current = getNum(metaKey.value);
+  const min = sliderMin.value;
+  const max = sliderMax.value;
+  const next = Math.max(min, Math.min(max, current + delta * step));
+  if (next !== current) patch({ [metaKey.value]: next });
+}
+function onSliderWheel(e) {
+  const delta = -Math.sign(e.deltaY);
+  if (!delta) return;
+  const step = (sliderStep.value || 1) * (e.shiftKey ? 10 : 1);
+  const current = getNum(metaKey.value);
+  const min = sliderMin.value;
+  const max = sliderMax.value;
+  const next = Math.max(min, Math.min(max, current + delta * step));
+  if (next !== current) patch({ [metaKey.value]: next });
+}
+function onDateWheel(e, key) {
+  const delta = -Math.sign(e.deltaY);
+  if (!delta) return;
+  const current = getStr(key);
+  const base = current ? new Date(current) : /* @__PURE__ */ new Date();
+  if (Number.isNaN(base.getTime())) return;
+  base.setUTCDate(base.getUTCDate() + delta);
+  if (current.length <= 10 || !current.includes("T"))
+    patch({ [key]: base.toISOString().slice(0, 10) });
+  else
+    patch({ [key]: base.toISOString() });
+}
+function onTimeWheel(e, key) {
+  const delta = -Math.sign(e.deltaY);
+  if (!delta) return;
+  const current = getStr(key) || "00:00";
+  const [hStr, mStr] = current.slice(0, 5).split(":");
+  const total = parseInt(hStr ?? "0", 10) * 60 + parseInt(mStr ?? "0", 10) + delta * (e.shiftKey ? 60 : 15);
+  const clamped = (total % (24 * 60) + 24 * 60) % (24 * 60);
+  const h = Math.floor(clamped / 60).toString().padStart(2, "0");
+  const m = (clamped % 60).toString().padStart(2, "0");
+  patch({ [key]: `${h}:${m}` });
+}
+function onSingleDate(d) {
+  if (!d || typeof d.toString !== "function") return;
+  const dv = d;
+  patch({ [metaKey.value]: dvToIso(dv) });
+}
+function onSingleDatetimeDate(d) {
+  if (!d) return;
+  const dv = d;
+  const date = dvToIso(dv);
+  const time = getStr(metaKey.value).slice(11, 16) || "00:00";
+  patch({ [metaKey.value]: `${date}T${time}:00.000Z` });
+}
+function onSingleTime(t2) {
+  if (!t2) return;
+  patch({ [metaKey.value]: timeToHHMM(t2) });
+}
+function onTimeRangeStart(t2) {
+  if (!t2) return;
+  patch({ [startKey.value]: timeToHHMM(t2) });
+}
+function onTimeRangeEnd(t2) {
+  if (!t2) return;
+  patch({ [endKey.value]: timeToHHMM(t2) });
+}
+function deleteField() {
+  if (!props.editor?.isEditable) return;
+  const clearPatch = {};
+  if (metaKey.value) clearPatch[metaKey.value] = void 0;
+  if (startKey.value) clearPatch[startKey.value] = void 0;
+  if (endKey.value) clearPatch[endKey.value] = void 0;
+  if (allDayKey.value) clearPatch[allDayKey.value] = void 0;
+  if (latKey.value) clearPatch[latKey.value] = void 0;
+  if (lngKey.value) clearPatch[lngKey.value] = void 0;
+  if (Object.keys(clearPatch).length) patch(clearPatch);
+  const pos = props.getPos();
+  if (pos !== void 0) {
+    props.editor.chain().deleteRange({ from: pos, to: pos + props.node.nodeSize }).run();
   }
-  if (t === "textarea") {
-    const v = getStr(metaKey.value);
-    return v ? v.slice(0, 24) + (v.length > 24 ? "\u2026" : "") : "Add text";
+}
+const isDragging = ref(false);
+function onGripPointerDown(e) {
+  if (!props.editor?.isEditable) return;
+  e.preventDefault();
+  e.stopPropagation();
+  const startX = e.clientX;
+  const startY = e.clientY;
+  let activated = false;
+  const ACTIVATION_PX = 4;
+  function targetPosFromPoint(x, y) {
+    const el = document.elementFromPoint(x, y);
+    const chip = el?.closest(".meta-field-chip");
+    if (!chip) return null;
+    try {
+      const view = props.editor.view;
+      const coords = { left: x, top: y };
+      const posInfo = view.posAtCoords?.(coords);
+      if (posInfo && typeof posInfo.pos === "number") return posInfo.pos;
+    } catch {
+    }
+    return null;
   }
-  if (t === "location") {
-    const lat = getNum(metaKey.value);
-    return lat ? `${getNum(props.node.attrs.latKey)?.toFixed(2)}, ${getNum(props.node.attrs.lngKey)?.toFixed(2)}` : "Set";
+  function onMove(ev) {
+    const dx = ev.clientX - startX;
+    const dy = ev.clientY - startY;
+    if (!activated && Math.hypot(dx, dy) >= ACTIVATION_PX) {
+      activated = true;
+      isDragging.value = true;
+      document.body.style.cursor = "grabbing";
+    }
+    if (activated) ev.preventDefault();
   }
-  if (t === "members") {
-    const arr = getObjArr(metaKey.value);
-    return arr.length ? arr.map((m) => m.label).join(", ") : "Add members";
+  function onUp(ev) {
+    document.removeEventListener("pointermove", onMove, true);
+    document.removeEventListener("pointerup", onUp, true);
+    document.body.style.cursor = "";
+    if (!activated) {
+      isDragging.value = false;
+      return;
+    }
+    isDragging.value = false;
+    const fromPos = props.getPos();
+    if (fromPos === void 0) return;
+    const toPos = targetPosFromPoint(ev.clientX, ev.clientY);
+    if (toPos === null || toPos === fromPos) return;
+    props.editor.commands.moveMetaField(fromPos, toPos);
   }
-  return getStr(metaKey.value) || "\u2014";
+  document.addEventListener("pointermove", onMove, true);
+  document.addEventListener("pointerup", onUp, true);
+}
+const isEditable = computed(() => props.editor?.isEditable ?? false);
+const isHovered = ref(false);
+const colorPopoverOpen = ref(false);
+const iconPopoverOpen = ref(false);
+const locationPopoverOpen = ref(false);
+const selectPopoverOpen = ref(false);
+const multiSelectPopoverOpen = ref(false);
+const membersPopoverOpen = ref(false);
+const textareaPopoverOpen = ref(false);
+const datePopoverOpen = ref(false);
+const datetimePopoverOpen = ref(false);
+const timePopoverOpen = ref(false);
+const daterangePopoverOpen = ref(false);
+const datetimerangePopoverOpen = ref(false);
+onMounted(() => {
+  const s = storage();
+  if (!s?.pendingOpen) return;
+  const marker = metaKey.value || startKey.value || latKey.value;
+  const tag = `${fieldType.value}:${marker}`;
+  if (s.pendingOpen !== tag) return;
+  s.pendingOpen = "";
+  setTimeout(() => {
+    switch (fieldType.value) {
+      case "colorPreset":
+      case "colorPicker":
+        colorPopoverOpen.value = true;
+        break;
+      case "icon":
+        iconPopoverOpen.value = true;
+        break;
+      case "location":
+        locationPopoverOpen.value = true;
+        break;
+      case "select":
+        selectPopoverOpen.value = true;
+        break;
+      case "multiselect":
+        multiSelectPopoverOpen.value = true;
+        break;
+      case "members":
+        membersPopoverOpen.value = true;
+        break;
+      case "textarea":
+        textareaPopoverOpen.value = true;
+        break;
+      case "date":
+        datePopoverOpen.value = true;
+        break;
+      case "datetime":
+        datetimePopoverOpen.value = true;
+        break;
+      case "time":
+        timePopoverOpen.value = true;
+        break;
+      case "daterange":
+        daterangePopoverOpen.value = true;
+        break;
+      case "datetimerange":
+        datetimerangePopoverOpen.value = true;
+        break;
+    }
+  }, 150);
 });
-const chipColor = computed(() => {
-  const t = fieldType.value;
-  if (t === "colorPreset" || t === "colorPicker") return getStr(metaKey.value) || "";
-  return "";
+const textareaRef = ref(null);
+watch(textareaPopoverOpen, async (open) => {
+  if (open) {
+    await nextTick();
+    textareaRef.value?.textareaRef?.focus();
+  }
 });
-const popoverOpen = ref(false);
-const editingText = ref(false);
-const textDraft = ref("");
-const newOption = ref("");
 const memberSearch = ref("");
 const mentionItems = computed(
   () => props.editor.storage?.metaField?.mentionItems ?? []
@@ -183,535 +417,880 @@ function onToggleMember(user) {
   const exists = current.some((m) => m.id === user.id);
   patch({ [metaKey.value]: exists ? current.filter((m) => m.id !== user.id) : [...current, { id: user.id, label: user.label }] });
 }
-function openEditor() {
+const editingLabel = ref(false);
+const labelDraft = ref("");
+const labelInputEl = ref(null);
+function startEditLabel() {
   labelDraft.value = fieldLabel.value;
-  popoverOpen.value = true;
+  editingLabel.value = true;
+  nextTick(() => labelInputEl.value?.select());
+}
+function saveLabel() {
+  editingLabel.value = false;
+  if (labelDraft.value.trim() !== fieldLabel.value) {
+    props.updateAttributes({ fieldLabel: labelDraft.value.trim() });
+  }
 }
-function _startTextEdit() {
-  textDraft.value = getStr(metaKey.value);
-  editingText.value = true;
-  nextTick(() => document.querySelector(".meta-text-input")?.focus());
+const newOptionDraft = ref("");
+function addOption(_multi) {
+  const val = newOptionDraft.value.trim();
+  if (!val || options.value.includes(val)) return;
+  const updated = [...options.value, val];
+  props.updateAttributes({ options: JSON.stringify(updated) });
+  newOptionDraft.value = "";
 }
-function _commitText() {
-  patch({ [metaKey.value]: textDraft.value });
-  editingText.value = false;
+function removeOption(opt) {
+  const updated = options.value.filter((o) => o !== opt);
+  props.updateAttributes({ options: JSON.stringify(updated) });
 }
 </script>
 
 <template>
   <NodeViewWrapper
     as="span"
-    class="inline-flex items-center"
+    class="meta-field-chip"
+    contenteditable="false"
+    :data-field-type="fieldType"
+    :class="{ 'pointer-events-none': !isEditable, 'meta-field-chip--dragging': isDragging }"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
   >
-    <!-- ── Chip wrapper ─────────────────────────────────────────────────────── -->
-    <UPopover
-      v-model:open="popoverOpen"
-      :content="{ side: 'bottom', align: 'start' }"
+    <!-- Drag grip — visible on hover, top-left -->
+    <span
+      v-if="isHovered && isEditable"
+      class="meta-field-grip absolute -top-2 -left-2 size-4 flex items-center justify-center rounded-full bg-(--ui-bg-elevated) border border-(--ui-border) z-10 cursor-grab active:cursor-grabbing select-none"
+      :title="t.dragToReorder"
+      @pointerdown="onGripPointerDown"
+      @click.stop
     >
-      <button
-        type="button"
-        class="inline-flex items-center gap-1 rounded-md border border-default bg-muted px-2 py-0.5 text-xs font-medium text-default hover:bg-elevated cursor-pointer select-none mx-0.5"
-        @mousedown.prevent
-        @click="openEditor"
-      >
-        <!-- Color swatch for color fields -->
-        <span
-          v-if="chipColor"
-          class="size-3 rounded-full border border-white/20 shrink-0"
-          :style="`background: ${chipColor}`"
-        />
-
-        <!-- Label -->
-        <span class="text-muted">{{ fieldLabel || fieldType }}</span>
-
-        <span class="text-default">
-          <!-- Toggle shows a switch icon -->
-          <span v-if="fieldType === 'toggle'">
-            <UIcon
-              :name="getBool(metaKey) ? 'i-lucide-toggle-right' : 'i-lucide-toggle-left'"
-              class="size-3.5 align-middle"
-            />
-          </span>
-          <!-- Rating shows stars -->
-          <span
-            v-else-if="fieldType === 'rating'"
-            class="flex gap-0.5"
+      <UIcon
+        name="i-lucide-grip-vertical"
+        class="size-3 text-(--ui-text-muted)"
+      />
+    </span>
+    <!-- ── datetimerange ─────────────────────────────────────────────────── -->
+    <template v-if="fieldType === 'datetimerange'">
+      <div class="flex items-center gap-1">
+        <UPopover
+          v-model:open="datetimerangePopoverOpen"
+          :content="{ align: 'start' }"
+        >
+          <UButton
+            size="sm"
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-calendar"
+            class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) data-[state=open]:bg-(--ui-bg-elevated)"
           >
-            <UIcon
-              v-for="i in sliderMax"
-              :key="i"
-              :name="i <= getNum(metaKey) ? 'i-lucide-star' : 'i-lucide-star'"
-              :class="i <= getNum(metaKey) ? 'text-amber-400' : 'text-muted'"
-              class="size-3"
-            />
-          </span>
-          <!-- Everything else: text display -->
-          <span v-else>{{ displayValue }}</span>
-        </span>
+            {{ formatDateRange(startKey, endKey) }}
+          </UButton>
+          <template #content>
+            <div class="p-2">
+              <UCalendar
+                range
+                :model-value="getDateRange(startKey, endKey)"
+                @update:model-value="onDateTimeRange($event)"
+              />
+              <div
+                v-if="!getBool(allDayKey, true)"
+                class="flex items-center gap-2 pt-3 mt-3 border-t border-(--ui-border)"
+              >
+                <div class="flex-1">
+                  <p class="text-xs font-medium text-(--ui-text-muted) mb-1">
+                    {{ t.start }}
+                  </p>
+                  <UInputTime
+                    size="sm"
+                    :model-value="isoToTime(getStr(startKey).slice(11, 16) || '00:00')"
+                    @update:model-value="onStartTime($event)"
+                  />
+                </div>
+                <UIcon
+                  name="i-lucide-arrow-right"
+                  class="size-3 text-(--ui-text-dimmed) mt-4"
+                />
+                <div class="flex-1">
+                  <p class="text-xs font-medium text-(--ui-text-muted) mb-1">
+                    {{ t.end }}
+                  </p>
+                  <UInputTime
+                    size="sm"
+                    :model-value="isoToTime(getStr(endKey).slice(11, 16) || '01:00')"
+                    @update:model-value="onEndTime($event)"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+        </UPopover>
 
-        <!-- Delete button -->
         <UButton
-          icon="i-lucide-x"
-          size="xs"
+          size="sm"
+          :color="getBool(allDayKey, true) ? 'primary' : 'neutral'"
+          :variant="getBool(allDayKey, true) ? 'soft' : 'ghost'"
+          class="h-7 px-2.5 py-1 text-sm"
+          @click="toggleAllDay"
+        >
+          {{ t.allDay }}
+        </UButton>
+      </div>
+    </template>
+
+    <!-- ── daterange ─────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'daterange'">
+      <UPopover
+        v-model:open="daterangePopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          size="sm"
           color="neutral"
           variant="ghost"
-          class="size-3.5 p-0 opacity-50 hover:opacity-100 -mr-0.5"
-          @click.stop="deleteChip"
-        />
-      </button>
-
-      <!-- ── Popover content ─────────────────────────────────────────────── -->
-      <template #content>
-        <div class="p-2 min-w-48 max-w-xs space-y-2">
-          <!-- Field label editor -->
-          <div class="flex items-center gap-1 border-b border-default pb-2">
-            <input
-              v-model="labelDraft"
-              :placeholder="fieldType"
-              class="flex-1 text-xs font-medium bg-transparent border-none outline-none"
-              @blur="commitLabel"
-              @keydown.enter.prevent="commitLabel"
-            >
-          </div>
+          icon="i-lucide-calendar-range"
+          class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) data-[state=open]:bg-(--ui-bg-elevated)"
+        >
+          {{ formatDateRange(startKey, endKey) }}
+        </UButton>
+        <template #content>
+          <UCalendar
+            class="p-2"
+            range
+            :model-value="getDateRange(startKey, endKey)"
+            @update:model-value="onDateRange($event)"
+          />
+        </template>
+      </UPopover>
+    </template>
 
-          <!-- ── Toggle ──────────────────────────────────────────────────── -->
-          <div
-            v-if="fieldType === 'toggle'"
-            class="flex items-center justify-between"
+    <!-- ── slider ────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'slider'">
+      <!-- mousedown.stop prevents TipTap drag-handle from hijacking slider drags -->
+      <div
+        class="flex items-center gap-2 h-7 px-2.5 border border-(--ui-border) rounded-md text-sm"
+        @mousedown.stop
+        @touchstart.stop
+        @wheel.prevent="onSliderWheel"
+      >
+        <template v-if="fieldLabel">
+          <input
+            v-if="editingLabel"
+            ref="labelInputEl"
+            v-model="labelDraft"
+            class="text-(--ui-text-muted) shrink-0 text-xs bg-transparent border-b border-(--ui-border) outline-none w-20"
+            @blur="saveLabel"
+            @keydown.enter.prevent="saveLabel"
+            @keydown.escape.prevent="editingLabel = false"
+            @mousedown.stop
           >
-            <span class="text-xs text-muted">{{ getBool(metaKey) ? "On" : "Off" }}</span>
-            <USwitch
-              :model-value="getBool(metaKey)"
-              @update:model-value="(v) => patch({ [metaKey]: v })"
-            />
-          </div>
+          <span
+            v-else
+            class="text-(--ui-text-muted) shrink-0 text-xs cursor-text hover:text-(--ui-text)"
+            @click.stop="startEditLabel"
+          >{{ fieldLabel }}</span>
+        </template>
+        <USlider
+          size="sm"
+          class="w-24"
+          :min="sliderMin"
+          :max="sliderMax"
+          :model-value="getNum(metaKey)"
+          @update:model-value="onSlider($event)"
+        />
+        <span class="text-(--ui-text-muted) tabular-nums w-8 text-right shrink-0 text-xs">
+          {{ getNum(metaKey) }}%
+        </span>
+      </div>
+    </template>
 
-          <!-- ── Color presets ───────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'colorPreset'"
-            class="flex flex-wrap gap-1.5"
-          >
-            <button
-              v-for="c in allPresets"
-              :key="c"
-              class="size-5 rounded-full border-2 cursor-pointer"
-              :style="`background: ${c}; border-color: ${getStr(metaKey) === c ? c : 'transparent'}`"
-              :class="getStr(metaKey) === c ? 'ring-2 ring-offset-1 ring-current' : ''"
-              @click="patch({ [metaKey]: getStr(metaKey) === c ? '' : c })"
-            />
-            <!-- Clear -->
-            <button
-              v-if="getStr(metaKey)"
-              class="size-5 rounded-full border border-default flex items-center justify-center text-muted hover:bg-muted"
-              @click="patch({ [metaKey]: '' })"
-            >
-              <UIcon
-                name="i-lucide-x"
-                class="size-3"
-              />
-            </button>
-          </div>
+    <!-- ── colorPreset ───────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'colorPreset'">
+      <AColorPalettePopover
+        :model-value="getStr(metaKey)"
+        :open="colorPopoverOpen"
+        @update:model-value="onColor"
+        @update:open="colorPopoverOpen = $event"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) gap-1.5 data-[state=open]:bg-(--ui-bg-elevated)"
+        >
+          <span
+            class="size-3 rounded-full shrink-0 ring-1 ring-(--ui-border)"
+            :style="{ background: getStr(metaKey) || presets[0] }"
+          />
+          <span>{{ fieldLabel || t.color }}</span>
+        </UButton>
+      </AColorPalettePopover>
+    </template>
 
-          <!-- ── Color picker ────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'colorPicker'"
-            class="space-y-1"
+    <!-- ── location ──────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'location'">
+      <ALocationPickerPopover
+        :lat-value="getOptNum(latKey)"
+        :lng-value="getOptNum(lngKey)"
+        :open="locationPopoverOpen"
+        @update:lat="(v) => onLatLng(latKey, v)"
+        @update:lng="(v) => onLatLng(lngKey, v)"
+        @update:open="locationPopoverOpen = $event"
+        @clear="() => {
+  onLatLng(latKey, null);
+  onLatLng(lngKey, null);
+}"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          :icon="getOptNum(latKey) !== void 0 ? 'i-lucide-map-pin' : 'i-lucide-map-pin-off'"
+          class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) gap-1.5 data-[state=open]:bg-(--ui-bg-elevated)"
+        >
+          <span
+            v-if="fieldLabel && getOptNum(latKey) === void 0"
+            class="text-(--ui-text-muted)"
+          >{{ fieldLabel }}</span>
+          <span
+            v-if="getOptNum(latKey) !== void 0"
+            class="tabular-nums"
           >
-            <input
-              type="color"
-              :value="getStr(metaKey) || '#6366f1'"
-              class="w-full h-8 rounded cursor-pointer"
-              @input="(e) => patch({ [metaKey]: e.target.value })"
-            >
-            <UButton
-              v-if="getStr(metaKey)"
-              icon="i-lucide-x"
-              size="xs"
-              color="neutral"
-              variant="ghost"
-              label="Clear"
-              class="w-full justify-start"
-              @click="patch({ [metaKey]: '' })"
-            />
-          </div>
-
-          <!-- ── Date ───────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'date'">
-            <input
-              type="date"
-              :value="getStr(metaKey)"
-              class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-              @change="(e) => patch({ [metaKey]: e.target.value })"
-            >
-          </div>
-
-          <!-- ── Datetime ───────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'datetime'">
-            <input
-              type="datetime-local"
-              :value="getStr(metaKey)"
-              class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-              @change="(e) => patch({ [metaKey]: e.target.value })"
-            >
-          </div>
+            {{ getOptNum(latKey).toFixed(4) }}, {{ getOptNum(lngKey).toFixed(4) }}
+          </span>
+        </UButton>
+      </ALocationPickerPopover>
+    </template>
 
-          <!-- ── Date range ─────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'daterange'"
-            class="space-y-1"
-          >
-            <div class="flex items-center gap-1 text-xs text-muted">
-              <span class="w-8">Start</span><input
-                type="date"
-                :value="getStr(startKey)"
-                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-                @change="(e) => patch({ [startKey]: e.target.value })"
-              >
-            </div>
-            <div class="flex items-center gap-1 text-xs text-muted">
-              <span class="w-8">End</span><input
-                type="date"
-                :value="getStr(endKey)"
-                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-                @change="(e) => patch({ [endKey]: e.target.value })"
-              >
-            </div>
-          </div>
+    <!-- ── icon ──────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'icon'">
+      <AIconPickerPopover
+        :model-value="getStr(metaKey)"
+        :open="iconPopoverOpen"
+        :options="iconOptions.length ? iconOptions : void 0"
+        @update:model-value="onIcon"
+        @update:open="iconPopoverOpen = $event"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) gap-1.5"
+          :icon="getStr(metaKey) ? `i-lucide-${getStr(metaKey)}` : 'i-lucide-smile'"
+        >
+          <span
+            v-if="fieldLabel && !getStr(metaKey)"
+            class="text-(--ui-text-muted)"
+          >{{ fieldLabel }}</span>
+        </UButton>
+      </AIconPickerPopover>
+    </template>
 
-          <!-- ── Datetime range ─────────────────────────────────────────── -->
+    <!-- ── textarea ───────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'textarea'">
+      <UPopover
+        v-model:open="textareaPopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-text"
+          class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) gap-1.5 data-[state=open]:bg-(--ui-bg-elevated)"
+        >
+          <span
+            v-if="fieldLabel"
+            class="text-(--ui-text-muted) text-xs"
+          >{{ fieldLabel }}</span>
+          <span
+            v-if="getStr(metaKey)"
+            class="max-w-48 truncate"
+          >{{ getStr(metaKey) }}</span>
+        </UButton>
+        <template #content>
           <div
-            v-else-if="fieldType === 'datetimerange'"
-            class="space-y-1"
+            class="w-72 p-2 flex flex-col gap-2"
+            @mousedown.stop
           >
-            <div class="flex items-center gap-1 text-xs text-muted">
-              <span class="w-8">Start</span><input
-                type="datetime-local"
-                :value="getStr(startKey)"
-                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-                @change="(e) => patch({ [startKey]: e.target.value })"
-              >
-            </div>
-            <div class="flex items-center gap-1 text-xs text-muted">
-              <span class="w-8">End</span><input
-                type="datetime-local"
-                :value="getStr(endKey)"
-                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-                @change="(e) => patch({ [endKey]: e.target.value })"
-              >
-            </div>
-            <div class="flex items-center gap-2 text-xs">
-              <USwitch
-                :model-value="getBool(allDayKey)"
-                @update:model-value="(v) => patch({ [allDayKey]: v })"
-              /><span class="text-muted">All day</span>
-            </div>
-          </div>
-
-          <!-- ── Time ───────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'time' || fieldType === 'timerange'">
-            <div class="space-y-1">
-              <input
-                type="time"
-                :value="fieldType === 'time' ? getStr(metaKey) : getStr(startKey)"
-                class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-                @change="(e) => patch({ [fieldType === 'time' ? metaKey : startKey]: e.target.value })"
-              >
+            <template v-if="fieldLabel">
               <input
-                v-if="fieldType === 'timerange'"
-                type="time"
-                :value="getStr(endKey)"
-                class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
-                @change="(e) => patch({ [endKey]: e.target.value })"
+                v-if="editingLabel"
+                ref="labelInputEl"
+                v-model="labelDraft"
+                class="text-xs text-(--ui-text-muted) bg-transparent border-b border-(--ui-border) outline-none w-32"
+                @blur="saveLabel"
+                @keydown.enter.prevent="saveLabel"
+                @keydown.escape.prevent="editingLabel = false"
+                @mousedown.stop
               >
-            </div>
-          </div>
-
-          <!-- ── Slider ─────────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'slider'"
-            class="space-y-1"
-          >
-            <div class="flex items-center gap-2">
-              <USlider
-                :model-value="getNum(metaKey, sliderMin)"
-                :min="sliderMin"
-                :max="sliderMax"
-                :step="sliderStep"
-                class="flex-1"
-                @update:model-value="(v) => patch({ [metaKey]: v })"
-              />
-              <span class="text-xs w-10 text-right tabular-nums">{{ getNum(metaKey, sliderMin) }}</span>
-            </div>
-            <div class="flex justify-between text-xs text-muted">
-              <span>{{ sliderMin }}</span><span>{{ sliderMax }}</span>
-            </div>
-          </div>
-
-          <!-- ── Number ─────────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'number'"
-            class="flex items-center gap-2"
-          >
-            <UInputNumber
-              :model-value="getNum(metaKey)"
-              :min="sliderMin"
-              :max="sliderMax"
-              :step="sliderStep"
-              class="flex-1"
-              size="xs"
+              <span
+                v-else
+                class="text-xs text-(--ui-text-muted) cursor-text hover:text-(--ui-text)"
+                @click.stop="startEditLabel"
+              >{{ fieldLabel }}</span>
+            </template>
+            <UTextarea
+              ref="textareaRef"
+              size="sm"
+              :model-value="getStr(metaKey)"
+              :rows="3"
+              class="w-full"
               @update:model-value="(v) => patch({ [metaKey]: v })"
+              @mousedown.stop
             />
-            <span
-              v-if="unit"
-              class="text-xs text-muted"
-            >{{ unit }}</span>
           </div>
+        </template>
+      </UPopover>
+    </template>
 
-          <!-- ── Rating ─────────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'rating'"
-            class="flex gap-1"
+    <!-- ── number ─────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'number'">
+      <div
+        class="flex items-center gap-1.5 h-7 px-2.5 border border-(--ui-border) rounded-md text-sm"
+        @mousedown.stop
+        @touchstart.stop
+        @wheel.prevent="onNumberWheel"
+      >
+        <template v-if="fieldLabel">
+          <input
+            v-if="editingLabel"
+            ref="labelInputEl"
+            v-model="labelDraft"
+            class="text-(--ui-text-muted) shrink-0 text-xs bg-transparent border-b border-(--ui-border) outline-none w-20"
+            @blur="saveLabel"
+            @keydown.enter.prevent="saveLabel"
+            @keydown.escape.prevent="editingLabel = false"
+            @mousedown.stop
           >
-            <button
-              v-for="i in sliderMax"
-              :key="i"
-              class="p-0.5 hover:scale-110 transition-transform"
-              @click="patch({ [metaKey]: i === getNum(metaKey) ? 0 : i })"
-            >
-              <UIcon
-                name="i-lucide-star"
-                :class="i <= getNum(metaKey) ? 'text-amber-400' : 'text-muted'"
-                class="size-5"
-              />
-            </button>
-          </div>
+          <span
+            v-else
+            class="text-(--ui-text-muted) shrink-0 text-xs cursor-text hover:text-(--ui-text)"
+            @click.stop="startEditLabel"
+          >{{ fieldLabel }}</span>
+        </template>
+        <UInputNumber
+          size="xs"
+          :model-value="getOptNum(metaKey)"
+          :step="sliderStep"
+          class="max-w-32"
+          @update:model-value="onNumber"
+        />
+        <span
+          v-if="unit"
+          class="text-(--ui-text-muted) shrink-0 text-xs"
+        >{{ unit }}</span>
+      </div>
+    </template>
 
-          <!-- ── Select ─────────────────────────────────────────────────── -->
+    <!-- ── toggle ─────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'toggle'">
+      <div class="flex items-center gap-2 h-7 px-2.5 border border-(--ui-border) rounded-md text-sm">
+        <template v-if="fieldLabel">
+          <input
+            v-if="editingLabel"
+            ref="labelInputEl"
+            v-model="labelDraft"
+            class="text-(--ui-text-muted) text-xs bg-transparent border-b border-(--ui-border) outline-none w-20"
+            @blur="saveLabel"
+            @keydown.enter.prevent="saveLabel"
+            @keydown.escape.prevent="editingLabel = false"
+            @mousedown.stop
+          >
+          <span
+            v-else
+            class="text-(--ui-text-muted) text-xs cursor-text hover:text-(--ui-text)"
+            @click.stop="startEditLabel"
+          >{{ fieldLabel }}</span>
+        </template>
+        <USwitch
+          size="sm"
+          :model-value="getBool(metaKey)"
+          @update:model-value="onToggle"
+        />
+      </div>
+    </template>
+
+    <!-- ── select ─────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'select'">
+      <UPopover
+        v-model:open="selectPopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-chevron-down"
+          trailing
+          class="h-7 px-2.5 border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) data-[state=open]:bg-(--ui-bg-elevated) min-w-28"
+        >
+          <span :class="getStr(metaKey) ? '' : 'text-(--ui-text-dimmed)'">
+            {{ getStr(metaKey) || fieldLabel || t.select }}
+          </span>
+        </UButton>
+        <template #content>
           <div
-            v-else-if="fieldType === 'select'"
-            class="space-y-1"
+            class="flex flex-col w-52"
+            @mousedown.stop
           >
-            <button
+            <div
               v-for="opt in options"
               :key="opt"
-              class="flex items-center gap-2 w-full px-2 py-1 rounded text-xs hover:bg-muted text-left"
-              :class="getStr(metaKey) === opt ? 'bg-primary/10 text-primary' : ''"
-              @click="toggleSelect(opt)"
+              class="flex items-center justify-between px-3 py-1.5 hover:bg-(--ui-bg-elevated) cursor-pointer group"
+              @click="onSelect(opt);
+  selectPopoverOpen = false"
             >
-              <UIcon
-                v-if="getStr(metaKey) === opt"
-                name="i-lucide-check"
-                class="size-3"
+              <div class="flex items-center gap-2">
+                <UIcon
+                  v-if="getStr(metaKey) === opt"
+                  name="i-lucide-check"
+                  class="size-3.5 text-primary shrink-0"
+                />
+                <span
+                  v-else
+                  class="size-3.5 shrink-0"
+                />
+                <span class="text-sm">{{ opt }}</span>
+              </div>
+              <UTooltip
+                :text="t.removeOption"
+                :content="{ side: 'right' }"
+              >
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-x"
+                  class="size-5 p-0 opacity-0 group-hover:opacity-100 shrink-0"
+                  @click.stop="removeOption(opt)"
+                />
+              </UTooltip>
+            </div>
+            <USeparator
+              v-if="options.length"
+              class="my-1"
+            />
+            <div class="px-2 py-1.5">
+              <UInput
+                v-model="newOptionDraft"
+                size="xs"
+                variant="none"
+                :placeholder="t.addOption"
+                icon="i-lucide-plus"
+                class="w-full"
+                @keydown.enter.prevent="addOption(false)"
               />
-              <span :class="getStr(metaKey) === opt ? '' : 'ml-5'">{{ opt }}</span>
-            </button>
-            <div
-              v-if="!options.length"
-              class="text-xs text-muted px-2"
-            >
-              No options yet
             </div>
           </div>
+        </template>
+      </UPopover>
+    </template>
 
-          <!-- ── Multi select ───────────────────────────────────────────── -->
+    <!-- ── multiselect ────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'multiselect'">
+      <UPopover
+        v-model:open="multiSelectPopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-chevron-down"
+          trailing
+          class="h-7 px-2.5 border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) data-[state=open]:bg-(--ui-bg-elevated) min-w-28"
+        >
+          <span :class="getStrArr(metaKey).length ? '' : 'text-(--ui-text-dimmed)'">
+            {{ getStrArr(metaKey).length ? getStrArr(metaKey).join(", ") : fieldLabel || t.select }}
+          </span>
+        </UButton>
+        <template #content>
           <div
-            v-else-if="fieldType === 'multiselect'"
-            class="space-y-1"
+            class="flex flex-col w-52"
+            @mousedown.stop
           >
-            <button
+            <div
               v-for="opt in options"
               :key="opt"
-              class="flex items-center gap-2 w-full px-2 py-1 rounded text-xs hover:bg-muted text-left"
-              :class="getStrArr(metaKey).includes(opt) ? 'bg-primary/10 text-primary' : ''"
-              @click="toggleMultiSelect(opt)"
-            >
-              <UIcon
-                :name="getStrArr(metaKey).includes(opt) ? 'i-lucide-check-square' : 'i-lucide-square'"
-                class="size-3"
-              />
-              {{ opt }}
-            </button>
-            <div
-              v-if="!options.length"
-              class="text-xs text-muted px-2"
+              class="flex items-center justify-between px-3 py-1.5 hover:bg-(--ui-bg-elevated) cursor-pointer group"
+              @click="onMultiSelect(getStrArr(metaKey).includes(opt) ? getStrArr(metaKey).filter((v) => v !== opt) : [...getStrArr(metaKey), opt])"
             >
-              No options yet
-            </div>
-          </div>
-
-          <!-- ── Tags ───────────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'tags'"
-            class="space-y-2"
-          >
-            <div class="flex flex-wrap gap-1">
-              <span
-                v-for="tag in getStrArr(metaKey)"
-                :key="tag"
-                class="inline-flex items-center gap-0.5 rounded-full bg-primary/10 text-primary px-2 py-0.5 text-xs"
+              <div class="flex items-center gap-2">
+                <UIcon
+                  v-if="getStrArr(metaKey).includes(opt)"
+                  name="i-lucide-check"
+                  class="size-3.5 text-primary shrink-0"
+                />
+                <span
+                  v-else
+                  class="size-3.5 shrink-0"
+                />
+                <span class="text-sm">{{ opt }}</span>
+              </div>
+              <UTooltip
+                :text="t.removeOption"
+                :content="{ side: 'right' }"
               >
-                {{ tag }}
-                <button @click="toggleTag(tag)"><UIcon
-                  name="i-lucide-x"
-                  class="size-3"
-                /></button>
-              </span>
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-x"
+                  class="size-5 p-0 opacity-0 group-hover:opacity-100 shrink-0"
+                  @click.stop="removeOption(opt)"
+                />
+              </UTooltip>
             </div>
-            <div class="flex gap-1">
+            <USeparator
+              v-if="options.length"
+              class="my-1"
+            />
+            <div class="px-2 py-1.5">
               <UInput
-                v-model="newOption"
-                size="xs"
-                placeholder="Add tag…"
-                class="flex-1"
-                @keydown.enter.prevent="() => {
-  if (newOption.trim()) {
-    toggleTag(newOption.trim());
-    newOption = '';
-  }
-}"
-              />
-              <UButton
+                v-model="newOptionDraft"
                 size="xs"
+                variant="none"
+                :placeholder="t.addOption"
                 icon="i-lucide-plus"
-                @click="() => {
-  if (newOption.trim()) {
-    toggleTag(newOption.trim());
-    newOption = '';
-  }
-}"
+                class="w-full"
+                @keydown.enter.prevent="addOption(true)"
               />
             </div>
           </div>
+        </template>
+      </UPopover>
+    </template>
 
-          <!-- ── URL ────────────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'url'"
-            class="space-y-1"
+    <!-- ── url ────────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'url'">
+      <div
+        class="flex items-center gap-1 h-7 px-2.5 border border-(--ui-border) rounded-md text-sm"
+        @mousedown.stop
+      >
+        <UIcon
+          name="i-lucide-link"
+          class="size-3.5 shrink-0 text-(--ui-text-muted)"
+        />
+        <UInput
+          type="url"
+          size="xs"
+          variant="none"
+          class="flex-1 min-w-32"
+          :model-value="getStr(metaKey)"
+          :placeholder="fieldLabel || 'https://\u2026'"
+          @update:model-value="(v) => patch({ [metaKey]: v })"
+        />
+      </div>
+    </template>
+
+    <!-- ── rating ─────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'rating'">
+      <div class="inline-flex items-center gap-1.5 h-7 px-2">
+        <template v-if="fieldLabel">
+          <input
+            v-if="editingLabel"
+            ref="labelInputEl"
+            v-model="labelDraft"
+            class="text-(--ui-text-muted) text-xs bg-transparent border-b border-(--ui-border) outline-none w-20 leading-none"
+            @blur="saveLabel"
+            @keydown.enter.prevent="saveLabel"
+            @keydown.escape.prevent="editingLabel = false"
+            @mousedown.stop
           >
-            <UInput
-              :model-value="getStr(metaKey)"
-              size="xs"
-              placeholder="https://…"
-              leading-icon="i-lucide-link"
-              @update:model-value="(v) => patch({ [metaKey]: v })"
+          <span
+            v-else
+            class="text-(--ui-text-muted) text-xs leading-none cursor-text hover:text-(--ui-text)"
+            @click.stop="startEditLabel"
+          >{{ fieldLabel }}</span>
+        </template>
+        <div
+          class="inline-flex items-center gap-0.5"
+          @wheel.prevent="onRatingWheel"
+        >
+          <button
+            v-for="i in sliderMax"
+            :key="i"
+            type="button"
+            class="size-5 flex items-center justify-center rounded transition-colors hover:bg-(--ui-bg-elevated)"
+            :class="getNum(metaKey) >= i ? 'text-amber-400' : 'text-(--ui-text-dimmed) opacity-40 hover:opacity-70'"
+            @click="onRating(i)"
+          >
+            <UIcon
+              name="i-lucide-star"
+              class="size-3.5"
             />
-            <a
-              v-if="getStr(metaKey)"
-              :href="getStr(metaKey)"
-              target="_blank"
-              class="text-xs text-primary hover:underline flex items-center gap-1"
-            >
-              <UIcon
-                name="i-lucide-external-link"
-                class="size-3"
-              />
-              Open
-            </a>
-          </div>
+          </button>
+        </div>
+      </div>
+    </template>
 
-          <!-- ── Textarea ───────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'textarea'">
-            <UTextarea
-              :model-value="getStr(metaKey)"
-              size="xs"
-              :rows="3"
-              placeholder="Add text…"
-              @update:model-value="(v) => patch({ [metaKey]: v })"
+    <!-- ── tags ───────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'tags'">
+      <UInputTags
+        size="sm"
+        :model-value="getStrArr(metaKey)"
+        :placeholder="fieldLabel || t.addTag"
+        class="min-h-7"
+        @update:model-value="(v) => patch({ [metaKey]: v })"
+        @mousedown.stop
+      />
+    </template>
+
+    <!-- ── colorPicker ────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'colorPicker'">
+      <UPopover :content="{ align: 'start' }">
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          class="h-7 px-2.5 border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) gap-1.5 data-[state=open]:bg-(--ui-bg-elevated)"
+        >
+          <span
+            class="size-3 rounded-full shrink-0 ring-1 ring-(--ui-border)"
+            :style="{ background: getStr(metaKey) || '#6366f1' }"
+          />
+          <span class="text-(--ui-text-muted) text-xs font-mono">{{ getStr(metaKey) || fieldLabel || t.color }}</span>
+        </UButton>
+        <template #content>
+          <div class="p-3">
+            <UColorPicker
+              :model-value="getStr(metaKey) || '#6366f1'"
+              format="hex"
+              @update:model-value="(v) => {
+  if (v) patch({ [metaKey]: v });
+}"
             />
           </div>
+        </template>
+      </UPopover>
+    </template>
 
-          <!-- ── Location ───────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'location'"
-            class="space-y-1"
-          >
-            <div class="flex items-center gap-1">
-              <span class="text-xs text-muted w-7">Lat</span>
-              <UInputNumber
-                :model-value="getNum(props.node.attrs.latKey)"
-                size="xs"
-                class="flex-1"
-                :step="1e-4"
-                @update:model-value="(v) => patch({ [props.node.attrs.latKey]: v })"
-              />
-            </div>
-            <div class="flex items-center gap-1">
-              <span class="text-xs text-muted w-7">Lng</span>
-              <UInputNumber
-                :model-value="getNum(props.node.attrs.lngKey)"
-                size="xs"
-                class="flex-1"
-                :step="1e-4"
-                @update:model-value="(v) => patch({ [props.node.attrs.lngKey]: v })"
-              />
-            </div>
+    <!-- ── datetime ───────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'datetime'">
+      <UPopover
+        v-model:open="datetimePopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-calendar-clock"
+          class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) data-[state=open]:bg-(--ui-bg-elevated)"
+          @wheel.prevent="(e) => onDateWheel(e, metaKey)"
+        >
+          {{ getStr(metaKey) ? df.format(new Date(getStr(metaKey))) : fieldLabel || t.pickDatetime }}
+        </UButton>
+        <template #content>
+          <div class="p-2 flex flex-col gap-2">
+            <UCalendar
+              :model-value="isoToCalendarDate(getStr(metaKey))"
+              @update:model-value="onSingleDatetimeDate"
+            />
+            <UInputTime
+              size="sm"
+              :model-value="isoToTime(getStr(metaKey).slice(11, 16) || '00:00')"
+              @update:model-value="(t2) => t2 && patch({ [metaKey]: `${getStr(metaKey).slice(0, 10) || (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}T${timeToHHMM(t2)}:00.000Z` })"
+            />
           </div>
+        </template>
+      </UPopover>
+    </template>
 
-          <!-- ── Icon ───────────────────────────────────────────────────── -->
-          <div
-            v-else-if="fieldType === 'icon'"
-            class="space-y-1"
-          >
-            <AIconPicker
-              :model-value="getStr(metaKey)"
-              @update:model-value="(v) => patch({ [metaKey]: v })"
+    <!-- ── date ───────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'date'">
+      <UPopover
+        v-model:open="datePopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-calendar"
+          class="h-7 px-2.5 py-1 text-sm border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) data-[state=open]:bg-(--ui-bg-elevated)"
+          @wheel.prevent="(e) => onDateWheel(e, metaKey)"
+        >
+          {{ getStr(metaKey) ? df.format(isoToCalendarDate(getStr(metaKey)).toDate(getLocalTimeZone())) : fieldLabel || t.pickDate }}
+        </UButton>
+        <template #content>
+          <UCalendar
+            class="p-2"
+            :model-value="isoToCalendarDate(getStr(metaKey))"
+            @update:model-value="onSingleDate"
+          />
+        </template>
+      </UPopover>
+    </template>
+
+    <!-- ── time ───────────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'time'">
+      <UPopover
+        v-model:open="timePopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-clock"
+          class="h-7 px-2.5 border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated) data-[state=open]:bg-(--ui-bg-elevated)"
+          @wheel.prevent="(e) => onTimeWheel(e, metaKey)"
+        >
+          {{ getStr(metaKey) || fieldLabel || t.pickTime }}
+        </UButton>
+        <template #content>
+          <div class="p-3">
+            <UInputTime
+              size="sm"
+              :model-value="isoToTime(getStr(metaKey) || '00:00')"
+              @update:model-value="onSingleTime"
             />
           </div>
+        </template>
+      </UPopover>
+    </template>
+
+    <!-- ── timerange ──────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'timerange'">
+      <div
+        class="flex items-center gap-2 h-7 px-2"
+        @mousedown.stop
+        @touchstart.stop
+      >
+        <template v-if="fieldLabel">
+          <input
+            v-if="editingLabel"
+            ref="labelInputEl"
+            v-model="labelDraft"
+            class="text-(--ui-text-muted) text-xs shrink-0 bg-transparent border-b border-(--ui-border) outline-none w-20"
+            @blur="saveLabel"
+            @keydown.enter.prevent="saveLabel"
+            @keydown.escape.prevent="editingLabel = false"
+            @mousedown.stop
+          >
+          <span
+            v-else
+            class="text-(--ui-text-muted) text-xs shrink-0 cursor-text hover:text-(--ui-text)"
+            @click.stop="startEditLabel"
+          >{{ fieldLabel }}</span>
+        </template>
+        <UInputTime
+          size="sm"
+          :model-value="isoToTime(getStr(startKey) || '00:00')"
+          @update:model-value="onTimeRangeStart"
+        />
+        <UIcon
+          name="i-lucide-arrow-right"
+          class="size-3 text-(--ui-text-dimmed) shrink-0"
+        />
+        <UInputTime
+          size="sm"
+          :model-value="isoToTime(getStr(endKey) || '01:00')"
+          @update:model-value="onTimeRangeEnd"
+        />
+      </div>
+    </template>
 
-          <!-- ── Members ──────────────────────────────────────────────── -->
+    <!-- ── members ──────────────────────────────────────────────────────── -->
+    <template v-else-if="fieldType === 'members'">
+      <UPopover
+        v-model:open="membersPopoverOpen"
+        :content="{ align: 'start' }"
+      >
+        <div
+          class="flex items-center gap-1 min-h-7 px-1.5 border border-(--ui-border) rounded-md cursor-pointer hover:bg-(--ui-bg-elevated)"
+          @mousedown.stop
+        >
+          <template v-if="getObjArr(metaKey).length">
+            <UTooltip
+              v-for="m in getObjArr(metaKey)"
+              :key="m.id"
+              :text="m.label"
+            >
+              <UAvatar
+                :alt="m.label"
+                size="2xs"
+              />
+            </UTooltip>
+          </template>
+          <span
+            v-else
+            class="text-sm text-(--ui-text-dimmed) px-0.5"
+          >{{ fieldLabel || t.members }}</span>
+          <UIcon
+            name="i-lucide-chevron-down"
+            class="size-3.5 text-(--ui-text-dimmed) ml-1 shrink-0"
+          />
+        </div>
+        <template #content>
           <div
-            v-else-if="fieldType === 'members'"
-            class="space-y-1"
+            class="flex flex-col w-56"
+            @mousedown.stop
           >
             <UInput
               v-model="memberSearch"
               size="xs"
               variant="none"
-              placeholder="Search members…"
-              leading-icon="i-lucide-search"
+              :placeholder="t.searchMembers"
+              icon="i-lucide-search"
+              class="px-2 pt-2 pb-1"
             />
-            <USeparator />
-            <div class="max-h-48 overflow-y-auto">
-              <button
-                v-for="user in filteredMentionItems"
-                :key="user.id"
-                class="flex items-center gap-2 w-full px-2 py-1.5 rounded text-xs hover:bg-muted text-left"
-                @click="onToggleMember(user)"
-              >
-                <UIcon
-                  v-if="getObjArr(metaKey).some((m) => m.id === user.id)"
-                  name="i-lucide-check"
-                  class="size-3.5 text-primary shrink-0"
-                />
-                <span
-                  v-else
-                  class="size-3.5 shrink-0"
-                />
-                <UAvatar
-                  :alt="user.label"
-                  :style="user.avatar?.style"
-                  size="2xs"
-                />
-                <span class="truncate">{{ user.label }}</span>
-              </button>
-              <div
-                v-if="!filteredMentionItems.length"
-                class="px-2 py-2 text-xs text-muted"
-              >
-                No members found
-              </div>
+            <USeparator class="mb-1" />
+            <div
+              v-for="user in filteredMentionItems"
+              :key="user.id"
+              class="flex items-center gap-2 px-3 py-1.5 hover:bg-(--ui-bg-elevated) cursor-pointer"
+              @click="onToggleMember(user)"
+            >
+              <UIcon
+                v-if="getObjArr(metaKey).some((m2) => m2.id === user.id)"
+                name="i-lucide-check"
+                class="size-3.5 text-primary shrink-0"
+              />
+              <span
+                v-else
+                class="size-3.5 shrink-0"
+              />
+              <UAvatar
+                :alt="user.label"
+                :style="user.avatar?.style"
+                size="2xs"
+              />
+              <span class="text-sm truncate">{{ user.label }}</span>
+            </div>
+            <div
+              v-if="!filteredMentionItems.length"
+              class="px-3 py-2 text-sm text-(--ui-text-dimmed)"
+            >
+              {{ t.noMembersFound }}
             </div>
           </div>
+        </template>
+      </UPopover>
+    </template>
 
-          <!-- Fallback -->
-          <div
-            v-else
-            class="text-xs text-muted"
-          >
-            {{ fieldType }}
-          </div>
-        </div>
-      </template>
-    </UPopover>
+    <!-- ── Delete button ─────────────────────────────────────────────────── -->
+    <UTooltip
+      v-if="isHovered && isEditable"
+      :text="t.deleteField"
+      :content="{ side: 'top' }"
+    >
+      <UButton
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-x"
+        class="absolute -top-2 -right-2 size-4 p-0 rounded-full bg-(--ui-bg-elevated) border border-(--ui-border) z-10"
+        @click.stop="deleteField"
+      />
+    </UTooltip>
   </NodeViewWrapper>
 </template>
+
+<style scoped>
+.meta-field-chip{align-items:center;display:inline-flex;position:relative;vertical-align:middle}.meta-field-chip--dragging{opacity:.5}
+</style>
+
+<style>
+.meta-chip-flash{animation:meta-chip-flash .9s ease-out}@keyframes meta-chip-flash{0%,to{box-shadow:0 0 0 0 transparent}20%{box-shadow:0 0 0 3px var(--ui-primary,#6366f1)}}
+</style>