@abraca/nuxt 0.1.0 → 0.2.0

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

@@ -0,0 +1,489 @@
+<script setup>
+import { computed, ref, nextTick } from "vue";
+import { NodeViewWrapper } from "@tiptap/vue-3";
+const props = defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+function storage() {
+  return props.editor.storage?.metaField;
+}
+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 presets = computed(() => {
+  try {
+    return JSON.parse(props.node.attrs.presets ?? "[]");
+  } catch {
+    return [];
+  }
+});
+const options = computed(() => {
+  try {
+    return JSON.parse(props.node.attrs.options ?? "[]");
+  } catch {
+    return [];
+  }
+});
+const sliderMin = computed(() => props.node.attrs.sliderMin ?? 0);
+const sliderMax = computed(() => props.node.attrs.sliderMax ?? 100);
+const sliderStep = computed(() => props.node.attrs.sliderStep ?? 1);
+const unit = computed(() => props.node.attrs.unit ?? "");
+function getStr(key) {
+  return storage()?.pageMeta?.[key] ?? "";
+}
+function getStrArr(key) {
+  const v = storage()?.pageMeta?.[key];
+  return Array.isArray(v) ? v : [];
+}
+function getNum(key, fallback = 0) {
+  return storage()?.pageMeta?.[key] ?? fallback;
+}
+function getBool(key) {
+  return Boolean(storage()?.pageMeta?.[key]);
+}
+function patch(update) {
+  storage()?.updateMeta?.(update);
+}
+const labelDraft = ref("");
+function commitLabel() {
+  if (labelDraft.value !== fieldLabel.value) {
+    props.updateAttributes({ fieldLabel: labelDraft.value });
+  }
+}
+function deleteChip() {
+  props.deleteNode();
+}
+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 toggleMultiSelect(opt) {
+  const current = getStrArr(metaKey.value);
+  const next = current.includes(opt) ? current.filter((x) => x !== opt) : [...current, opt];
+  patch({ [metaKey.value]: next });
+}
+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 fmtDate(iso) {
+  if (!iso) return "";
+  try {
+    return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  } catch {
+    return iso;
+  }
+}
+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;
+  }
+}
+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";
+  }
+  if (t === "textarea") {
+    const v = getStr(metaKey.value);
+    return v ? v.slice(0, 24) + (v.length > 24 ? "\u2026" : "") : "Add text";
+  }
+  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";
+  }
+  return getStr(metaKey.value) || "\u2014";
+});
+const chipColor = computed(() => {
+  const t = fieldType.value;
+  if (t === "colorPreset" || t === "colorPicker") return getStr(metaKey.value) || "";
+  return "";
+});
+const popoverOpen = ref(false);
+const editingText = ref(false);
+const textDraft = ref("");
+const newOption = ref("");
+function openEditor() {
+  labelDraft.value = fieldLabel.value;
+  popoverOpen.value = true;
+}
+function startTextEdit() {
+  textDraft.value = getStr(metaKey.value);
+  editingText.value = true;
+  nextTick(() => document.querySelector(".meta-text-input")?.focus());
+}
+function commitText() {
+  patch({ [metaKey.value]: textDraft.value });
+  editingText.value = false;
+}
+</script>
+
+<template>
+  <NodeViewWrapper as="span" class="inline-flex items-center">
+    <!-- ── Chip wrapper ─────────────────────────────────────────────────────── -->
+    <UPopover v-model:open="popoverOpen" :content="{ side: 'bottom', align: 'start' }">
+      <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
+              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>
+
+        <!-- Delete button -->
+        <UButton
+          icon="i-lucide-x"
+          size="xs"
+          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>
+
+          <!-- ── Toggle ──────────────────────────────────────────────────── -->
+          <div v-if="fieldType === 'toggle'" class="flex items-center justify-between">
+            <span class="text-xs text-muted">{{ getBool(metaKey) ? "On" : "Off" }}</span>
+            <USwitch
+              :model-value="getBool(metaKey)"
+              @update:model-value="(v) => patch({ [metaKey]: v })"
+            />
+          </div>
+
+          <!-- ── 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>
+
+          <!-- ── Color picker ────────────────────────────────────────────── -->
+          <div v-else-if="fieldType === 'colorPicker'" class="space-y-1">
+            <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>
+
+          <!-- ── 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>
+
+          <!-- ── Datetime range ─────────────────────────────────────────── -->
+          <div v-else-if="fieldType === 'datetimerange'" class="space-y-1">
+            <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 })" />
+              <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 })" />
+            </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"
+              @update:model-value="(v) => patch({ [metaKey]: v })"
+            />
+            <span v-if="unit" class="text-xs text-muted">{{ unit }}</span>
+          </div>
+
+          <!-- ── Rating ─────────────────────────────────────────────────── -->
+          <div v-else-if="fieldType === 'rating'" class="flex gap-1">
+            <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>
+
+          <!-- ── Select ─────────────────────────────────────────────────── -->
+          <div v-else-if="fieldType === 'select'" class="space-y-1">
+            <button
+              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)"
+            >
+              <UIcon v-if="getStr(metaKey) === opt" name="i-lucide-check" class="size-3" />
+              <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>
+
+          <!-- ── Multi select ───────────────────────────────────────────── -->
+          <div v-else-if="fieldType === 'multiselect'" class="space-y-1">
+            <button
+              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">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"
+              >
+                {{ tag }}
+                <button @click="toggleTag(tag)"><UIcon name="i-lucide-x" class="size-3" /></button>
+              </span>
+            </div>
+            <div class="flex gap-1">
+              <UInput v-model="newOption" size="xs" placeholder="Add tag…" class="flex-1" @keydown.enter.prevent="() => {
+  if (newOption.trim()) {
+    toggleTag(newOption.trim());
+    newOption = '';
+  }
+}" />
+              <UButton size="xs" icon="i-lucide-plus" @click="() => {
+  if (newOption.trim()) {
+    toggleTag(newOption.trim());
+    newOption = '';
+  }
+}" />
+            </div>
+          </div>
+
+          <!-- ── URL ────────────────────────────────────────────────────── -->
+          <div v-else-if="fieldType === 'url'" class="space-y-1">
+            <UInput
+              :model-value="getStr(metaKey)"
+              size="xs"
+              placeholder="https://…"
+              leading-icon="i-lucide-link"
+              @update:model-value="(v) => patch({ [metaKey]: v })"
+            />
+            <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>
+
+          <!-- ── 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 })"
+            />
+          </div>
+
+          <!-- ── 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>
+          </div>
+
+          <!-- ── Icon ───────────────────────────────────────────────────── -->
+          <div v-else-if="fieldType === 'icon'" class="space-y-1">
+            <AIconPicker
+              :model-value="getStr(metaKey)"
+              @update:model-value="(v) => patch({ [metaKey]: v })"
+            />
+          </div>
+
+          <!-- Fallback -->
+          <div v-else class="text-xs text-muted">{{ fieldType }}</div>
+        </div>
+      </template>
+    </UPopover>
+  </NodeViewWrapper>
+</template>

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

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/plugin-abracadabra.client.js

@@ -34,6 +34,57 @@ import {
   _initFileIndex,
   _destroyFileIndex
 } from "./composables/useFileIndex.js";
+const NUXT_UI_PRIMARY_COLORS = /* @__PURE__ */ new Set([
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+]);
+const NUXT_UI_NEUTRAL_COLORS = /* @__PURE__ */ new Set(["slate", "gray", "zinc", "neutral", "stone"]);
+const CUSTOM_TO_NUXT_UI_PRIMARY = {
+  grass: "green",
+  diamond: "cyan",
+  gold: "amber",
+  redstone: "red",
+  lapis: "blue",
+  wood: "orange",
+  discord: "indigo",
+  steam: "lime",
+  oxidized: "teal"
+};
+const CUSTOM_TO_NUXT_UI_NEUTRAL = {
+  cobblestone: "stone",
+  bedrock: "zinc",
+  cream: "stone",
+  sage: "slate",
+  lavender: "slate",
+  blush: "gray",
+  copper: "stone",
+  oxidized: "slate",
+  mint: "slate",
+  peach: "stone",
+  mist: "gray",
+  mauve: "gray"
+};
+function toNuxtUIPrimary(name) {
+  return NUXT_UI_PRIMARY_COLORS.has(name) ? name : CUSTOM_TO_NUXT_UI_PRIMARY[name] ?? "blue";
+}
+function toNuxtUINeutral(name) {
+  return NUXT_UI_NEUTRAL_COLORS.has(name) ? name : CUSTOM_TO_NUXT_UI_NEUTRAL[name] ?? "zinc";
+}
 const STORAGE_KEY_EXTERNAL_PLUGINS = "abracadabra_external_plugins";
 const STORAGE_KEY_DISABLED_BUILTINS = "abracadabra_disabled_builtins";
 const CLAIMED_FLAG_KEY = "abracadabra_was_claimed";
@@ -264,14 +315,14 @@ export default defineNuxtPlugin({
       userColorName.value = colorName;
       localStorage.setItem("abracadabra_usercolor", colorName);
       const appConfig = useAppConfig();
-      if (appConfig.ui?.colors) appConfig.ui.colors.primary = colorName;
+      if (appConfig.ui?.colors) appConfig.ui.colors.primary = toNuxtUIPrimary(colorName);
       provider.value?.setAwarenessField("user", { name: userName.value, color: hsl, publicKey: publicKeyB64.value });
     }
     function setNeutralColor(colorName) {
       userNeutralColorName.value = colorName;
       localStorage.setItem("abracadabra_neutralcolor", colorName);
       const appConfig = useAppConfig();
-      if (appConfig.ui?.colors) appConfig.ui.colors.neutral = colorName;
+      if (appConfig.ui?.colors) appConfig.ui.colors.neutral = toNuxtUINeutral(colorName);
     }
     function setRequirePasskey(enabled) {
       requirePasskeyOnLogin.value = enabled;
@@ -544,8 +595,8 @@ export default defineNuxtPlugin({
         try {
           const appConfig = useAppConfig();
           if (appConfig.ui?.colors) {
-            appConfig.ui.colors.primary = userColorName.value;
-            appConfig.ui.colors.neutral = userNeutralColorName.value;
+            appConfig.ui.colors.primary = toNuxtUIPrimary(userColorName.value);
+            appConfig.ui.colors.neutral = toNuxtUINeutral(userNeutralColorName.value);
           }
         } catch {
         }

package/dist/runtime/plugins/core.plugin.js

@@ -32,7 +32,8 @@ async function loadClientExtensions() {
     { Badge },
     { Kbd },
     { ProseIcon },
-    { FileBlock }
+    { FileBlock },
+    { MetaField }
   ] = await Promise.all([
     import("@tiptap/extension-task-list"),
     import("@tiptap/extension-task-item"),
@@ -65,7 +66,8 @@ async function loadClientExtensions() {
     import("../extensions/badge.js"),
     import("../extensions/kbd.js"),
     import("../extensions/prose-icon.js"),
-    import("../extensions/file-block.js")
+    import("../extensions/file-block.js"),
+    import("../extensions/meta-field.js")
   ]);
   const lowlight = createLowlight(common);
   return [
@@ -108,7 +110,9 @@ async function loadClientExtensions() {
     Kbd,
     ProseIcon,
     // File block
-    FileBlock
+    FileBlock,
+    // Meta field chips (inline properties in documentMeta)
+    MetaField
   ];
 }
 async function loadServerExtensions() {

package/dist/runtime/server/plugins/abracadabra-service.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("nitropack").NitroAppPlugin;
 export default _default;

package/dist/runtime/server/plugins/abracadabra-service.js

@@ -1,3 +1,6 @@
+import { defineNitroPlugin } from "nitropack/runtime/plugin";
+import { useRuntimeConfig } from "nitropack/runtime/config";
+import { useStorage } from "nitropack/runtime/storage";
 import { registerServerPlugin, bootRunners, shutdownAllRunners } from "../utils/serverRunner.js";
 import { createDocCacheAPI } from "../utils/docCache.js";
 import { docTreeCacheRunner } from "../runners/doc-tree-cache.js";

package/dist/runtime/utils/docDragDrop.d.ts

@@ -0,0 +1,13 @@
+export declare const DOC_DRAG_MIME = "application/x-abracadabra-doc";
+export interface DocDragPayload {
+    id: string;
+    label: string;
+}
+/** Check if a drag event carries a doc drag payload (works during dragover) */
+export declare function isDocDrag(e: DragEvent): boolean;
+/** Read the doc drag payload (only works during drop — getData is blocked during dragover) */
+export declare function parseDocDragPayload(e: DragEvent): DocDragPayload | null;
+/** Walk tree-map data to check if `nodeId` is a descendant of `ancestorId` */
+export declare function isDescendantInMap(data: Record<string, {
+    parentId: string | null;
+}>, ancestorId: string, nodeId: string): boolean;

package/dist/runtime/utils/docDragDrop.js

@@ -0,0 +1,26 @@
+export const DOC_DRAG_MIME = "application/x-abracadabra-doc";
+export function isDocDrag(e) {
+  return !!e.dataTransfer?.types.includes(DOC_DRAG_MIME);
+}
+export function parseDocDragPayload(e) {
+  const raw = e.dataTransfer?.getData(DOC_DRAG_MIME);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+export function isDescendantInMap(data, ancestorId, nodeId) {
+  let current = nodeId;
+  const visited = /* @__PURE__ */ new Set();
+  while (current) {
+    if (current === ancestorId) return true;
+    if (visited.has(current)) break;
+    visited.add(current);
+    const entry = data[current];
+    if (!entry?.parentId) break;
+    current = entry.parentId;
+  }
+  return false;
+}