@abraca/nuxt 0.1.1 → 0.3.0

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

@@ -16,7 +16,10 @@ defineProps({
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 [&>*]:my-0">
+  <NodeViewWrapper
+    as="div"
+    class="grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 [&>*]:my-0"
+  >
     <NodeViewContent />
   </NodeViewWrapper>
 </template>

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

@@ -18,9 +18,23 @@ const icon = computed(() => props.node.attrs.icon || "");
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="group relative block my-5 p-4 sm:p-6 border border-(--ui-border) rounded-md bg-(--ui-bg) transition-colors">
-    <UIcon v-if="icon" :name="icon" class="size-6 mb-2 block text-(--ui-text-highlighted)" contenteditable="false" />
-    <p v-if="title" class="text-(--ui-text-highlighted) font-semibold" contenteditable="false">{{ title }}</p>
+  <NodeViewWrapper
+    as="div"
+    class="group relative block my-5 p-4 sm:p-6 border border-(--ui-border) rounded-md bg-(--ui-bg) transition-colors"
+  >
+    <UIcon
+      v-if="icon"
+      :name="icon"
+      class="size-6 mb-2 block text-(--ui-text-highlighted)"
+      contenteditable="false"
+    />
+    <p
+      v-if="title"
+      class="text-(--ui-text-highlighted) font-semibold"
+      contenteditable="false"
+    >
+      {{ title }}
+    </p>
     <div :class="['text-[15px] text-(--ui-text-muted) [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*]:my-1', title ? 'mt-1' : '']">
       <NodeViewContent />
     </div>

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

@@ -30,7 +30,10 @@ watch(() => props.node.childCount, () => {
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="relative my-5 [&>*:not(:first-child)]:!my-0 [&>*:not(:first-child)]:!static">
+  <NodeViewWrapper
+    as="div"
+    class="relative my-5 [&>*:not(:first-child)]:!my-0 [&>*:not(:first-child)]:!static"
+  >
     <div
       class="relative flex items-center gap-1 border border-(--ui-border-muted) bg-(--ui-bg) border-b-0 rounded-t-md overflow-x-auto p-2"
       contenteditable="false"

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

@@ -22,7 +22,10 @@ const label = computed(() => props.node.attrs.label || "Details");
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="my-5">
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+  >
     <button
       contenteditable="false"
       class="group relative rounded-xs inline-flex items-center gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) text-sm transition-colors focus-visible:ring-2 focus-visible:ring-(--ui-primary) focus:outline-none"
@@ -35,7 +38,10 @@ const label = computed(() => props.node.attrs.label || "Details");
       />
       <span class="truncate">{{ open ? "Hide" : "Show" }} {{ label }}</span>
     </button>
-    <div v-show="open" class="[&>*:first-child]:mt-2.5 [&>*:last-child]:mb-0 [&>*]:my-1.5">
+    <div
+      v-show="open"
+      class="[&>*:first-child]:mt-2.5 [&>*:last-child]:mb-0 [&>*]:my-1.5"
+    >
       <NodeViewContent />
     </div>
   </NodeViewWrapper>

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

@@ -69,13 +69,25 @@ watch(client, (c) => {
   <NodeViewWrapper class="my-2">
     <div class="rounded-lg overflow-hidden border border-(--ui-border) bg-(--ui-bg-elevated)">
       <!-- Loading -->
-      <div v-if="loading" class="flex items-center justify-center h-20">
-        <UIcon name="i-lucide-loader-circle" class="animate-spin text-xl text-(--ui-text-muted)" />
+      <div
+        v-if="loading"
+        class="flex items-center justify-center h-20"
+      >
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="animate-spin text-xl text-(--ui-text-muted)"
+        />
       </div>
 
       <!-- Error -->
-      <div v-else-if="error" class="flex items-center gap-3 px-4 py-3">
-        <UIcon name="i-lucide-alert-circle" class="text-error shrink-0" />
+      <div
+        v-else-if="error"
+        class="flex items-center gap-3 px-4 py-3"
+      >
+        <UIcon
+          name="i-lucide-alert-circle"
+          class="text-error shrink-0"
+        />
         <div class="min-w-0">
           <p class="text-sm font-medium text-(--ui-text) truncate">
             {{ filename }}
@@ -105,8 +117,14 @@ watch(client, (c) => {
       />
 
       <!-- Audio -->
-      <div v-else-if="fileCategory === 'audio'" class="flex items-center gap-3 p-4">
-        <UIcon name="i-lucide-music-2" class="text-(--ui-primary) text-2xl shrink-0" />
+      <div
+        v-else-if="fileCategory === 'audio'"
+        class="flex items-center gap-3 p-4"
+      >
+        <UIcon
+          name="i-lucide-music-2"
+          class="text-(--ui-primary) text-2xl shrink-0"
+        />
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium text-(--ui-text) truncate mb-1.5">
             {{ filename }}
@@ -128,12 +146,18 @@ watch(client, (c) => {
         class="flex items-center gap-3 p-4 hover:bg-(--ui-bg-accented) transition-colors no-underline"
         @click.stop
       >
-        <UIcon :name="fileIcon" class="text-2xl text-(--ui-text-muted) shrink-0" />
+        <UIcon
+          :name="fileIcon"
+          class="text-2xl text-(--ui-text-muted) shrink-0"
+        />
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium text-(--ui-text) truncate">{{ filename }}</p>
           <p class="text-xs text-(--ui-text-muted)">Click to download</p>
         </div>
-        <UIcon name="i-lucide-download" class="text-(--ui-text-muted) shrink-0" />
+        <UIcon
+          name="i-lucide-download"
+          class="text-(--ui-text-muted) shrink-0"
+        />
       </a>
     </div>
   </NodeViewWrapper>

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

@@ -17,7 +17,13 @@ const value = computed(() => props.node.attrs.value || "");
 </script>
 
 <template>
-  <NodeViewWrapper as="span" class="inline">
-    <UKbd :value="value" class="align-text-top" />
+  <NodeViewWrapper
+    as="span"
+    class="inline"
+  >
+    <UKbd
+      :value="value"
+      class="align-text-top"
+    />
   </NodeViewWrapper>
 </template>

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

@@ -55,7 +55,10 @@ function getBool(key) {
   return Boolean(storage()?.pageMeta?.[key]);
 }
 function patch(update) {
-  storage()?.updateMeta?.(update);
+  const s = storage();
+  if (!s) return;
+  if (s.pageMeta) Object.assign(s.pageMeta, update);
+  s.updateMeta?.(update);
 }
 const labelDraft = ref("");
 function commitLabel() {
@@ -175,9 +178,15 @@ function commitText() {
 </script>
 
 <template>
-  <NodeViewWrapper as="span" class="inline-flex items-center">
+  <NodeViewWrapper
+    as="span"
+    class="inline-flex items-center"
+  >
     <!-- ── Chip wrapper ─────────────────────────────────────────────────────── -->
-    <UPopover v-model:open="popoverOpen" :content="{ side: 'bottom', align: 'start' }">
+    <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"
@@ -197,10 +206,16 @@ function commitText() {
         <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" />
+            <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">
+          <span
+            v-else-if="fieldType === 'rating'"
+            class="flex gap-0.5"
+          >
             <UIcon
               v-for="i in sliderMax"
               :key="i"
@@ -235,11 +250,14 @@ function commitText() {
               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">
+          <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)"
@@ -248,7 +266,10 @@ function commitText() {
           </div>
 
           <!-- ── Color presets ───────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'colorPreset'" class="flex flex-wrap gap-1.5">
+          <div
+            v-else-if="fieldType === 'colorPreset'"
+            class="flex flex-wrap gap-1.5"
+          >
             <button
               v-for="c in allPresets"
               :key="c"
@@ -263,18 +284,24 @@ function commitText() {
               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" />
+              <UIcon
+                name="i-lucide-x"
+                class="size-3"
+              />
             </button>
           </div>
 
           <!-- ── Color picker ────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'colorPicker'" class="space-y-1">
+          <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"
@@ -294,7 +321,7 @@ function commitText() {
               :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 ───────────────────────────────────────────────── -->
@@ -304,32 +331,85 @@ function commitText() {
               :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
+            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
+            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 })" />
+              <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
+            v-else-if="fieldType === 'slider'"
+            class="space-y-1"
+          >
             <div class="flex items-center gap-2">
               <USlider
                 :model-value="getNum(metaKey, sliderMin)"
@@ -347,7 +427,10 @@ function commitText() {
           </div>
 
           <!-- ── Number ─────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'number'" class="flex items-center gap-2">
+          <div
+            v-else-if="fieldType === 'number'"
+            class="flex items-center gap-2"
+          >
             <UInputNumber
               :model-value="getNum(metaKey)"
               :min="sliderMin"
@@ -357,11 +440,17 @@ function commitText() {
               size="xs"
               @update:model-value="(v) => patch({ [metaKey]: v })"
             />
-            <span v-if="unit" class="text-xs text-muted">{{ unit }}</span>
+            <span
+              v-if="unit"
+              class="text-xs text-muted"
+            >{{ unit }}</span>
           </div>
 
           <!-- ── Rating ─────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'rating'" class="flex gap-1">
+          <div
+            v-else-if="fieldType === 'rating'"
+            class="flex gap-1"
+          >
             <button
               v-for="i in sliderMax"
               :key="i"
@@ -377,7 +466,10 @@ function commitText() {
           </div>
 
           <!-- ── Select ─────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'select'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'select'"
+            class="space-y-1"
+          >
             <button
               v-for="opt in options"
               :key="opt"
@@ -385,14 +477,26 @@ function commitText() {
               :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" />
+              <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
+              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">
+          <div
+            v-else-if="fieldType === 'multiselect'"
+            class="space-y-1"
+          >
             <button
               v-for="opt in options"
               :key="opt"
@@ -400,14 +504,25 @@ function commitText() {
               :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" />
+              <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
+              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
+            v-else-if="fieldType === 'tags'"
+            class="space-y-2"
+          >
             <div class="flex flex-wrap gap-1">
               <span
                 v-for="tag in getStrArr(metaKey)"
@@ -415,27 +530,43 @@ function commitText() {
                 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>
+                <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="() => {
+              <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="() => {
+}"
+              />
+              <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">
+          <div
+            v-else-if="fieldType === 'url'"
+            class="space-y-1"
+          >
             <UInput
               :model-value="getStr(metaKey)"
               size="xs"
@@ -443,8 +574,16 @@ function commitText() {
               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" />
+            <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>
@@ -461,19 +600,37 @@ function commitText() {
           </div>
 
           <!-- ── Location ───────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'location'" class="space-y-1">
+          <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 })" />
+              <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 })" />
+              <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">
+          <div
+            v-else-if="fieldType === 'icon'"
+            class="space-y-1"
+          >
             <AIconPicker
               :model-value="getStr(metaKey)"
               @update:model-value="(v) => patch({ [metaKey]: v })"
@@ -481,7 +638,12 @@ function commitText() {
           </div>
 
           <!-- Fallback -->
-          <div v-else class="text-xs text-muted">{{ fieldType }}</div>
+          <div
+            v-else
+            class="text-xs text-muted"
+          >
+            {{ fieldType }}
+          </div>
         </div>
       </template>
     </UPopover>

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

@@ -17,7 +17,13 @@ const iconName = computed(() => props.node.attrs.name || "i-lucide-star");
 </script>
 
 <template>
-  <NodeViewWrapper as="span" class="inline">
-    <UIcon :name="iconName" class="size-4 shrink-0 align-sub" />
+  <NodeViewWrapper
+    as="span"
+    class="inline"
+  >
+    <UIcon
+      :name="iconName"
+      class="size-4 shrink-0 align-sub"
+    />
   </NodeViewWrapper>
 </template>

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

@@ -32,8 +32,14 @@ watch(() => props.node.childCount, () => {
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="my-5">
-    <div class="relative flex items-center border-b border-(--ui-border)" contenteditable="false">
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+  >
+    <div
+      class="relative flex items-center border-b border-(--ui-border)"
+      contenteditable="false"
+    >
       <button
         v-for="(tab, i) in tabs"
         :key="i"
@@ -41,9 +47,16 @@ watch(() => props.node.childCount, () => {
         :class="activeIndex === i ? 'text-(--ui-primary)' : 'text-(--ui-text-muted) hover:text-(--ui-text)'"
         @click="activeIndex = i"
       >
-        <UIcon v-if="tab.icon" :name="tab.icon" class="size-4 shrink-0 me-1.5 inline-block align-text-bottom" />
+        <UIcon
+          v-if="tab.icon"
+          :name="tab.icon"
+          class="size-4 shrink-0 me-1.5 inline-block align-text-bottom"
+        />
         <span>{{ tab.label }}</span>
-        <span v-if="activeIndex === i" class="absolute bottom-0 inset-x-0 h-0.5 bg-(--ui-primary) rounded-full" />
+        <span
+          v-if="activeIndex === i"
+          class="absolute bottom-0 inset-x-0 h-0.5 bg-(--ui-primary) rounded-full"
+        />
       </button>
     </div>
     <div class="mt-4">