@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -0,0 +1,48 @@
+<script setup>
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref } from "vue";
+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 }
+});
+const showCode = ref(true);
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+  >
+    <div
+      class="flex justify-center border border-(--ui-border-muted) relative p-4 rounded-md"
+      :class="showCode ? 'border-b-0 rounded-b-none' : ''"
+      contenteditable="false"
+    >
+      <span class="text-sm text-(--ui-text-muted)">Preview</span>
+      <div class="absolute top-2 right-2">
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :label="showCode ? 'Hide code' : 'Show code'"
+          @click="showCode = !showCode"
+        />
+      </div>
+    </div>
+    <div
+      v-show="showCode"
+      class="[&>*]:my-0 [&_pre]:rounded-t-none"
+    >
+      <NodeViewContent class="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0" />
+    </div>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/CodePreviewView.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/extensions/views/CodeTreeView.d.vue.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/extensions/views/CodeTreeView.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed, ref } from "vue";
+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 }
+});
+const files = computed(() => {
+  try {
+    return JSON.parse(props.node.attrs.files || "[]");
+  } catch {
+    return [];
+  }
+});
+const selected = ref("");
+function isFolder(entry) {
+  return Array.isArray(entry.children);
+}
+function getIcon(entry) {
+  if (isFolder(entry)) return "i-lucide-folder";
+  const ext = entry.name.split(".").pop();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "i-lucide-file-code";
+    case "js":
+    case "jsx":
+      return "i-lucide-file-code";
+    case "vue":
+      return "i-lucide-file-code";
+    case "json":
+      return "i-lucide-file-json";
+    case "md":
+      return "i-lucide-file-text";
+    case "css":
+    case "scss":
+      return "i-lucide-file-code";
+    default:
+      return "i-lucide-file";
+  }
+}
+function flatEntries(entries, depth = 0) {
+  const result = [];
+  for (const entry of entries) {
+    result.push({ entry, depth });
+    if (isFolder(entry) && entry.children) {
+      result.push(...flatEntries(entry.children, depth + 1));
+    }
+  }
+  return result;
+}
+const flatFiles = computed(() => flatEntries(files.value));
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-(--ui-border-muted) rounded-md"
+    contenteditable="false"
+  >
+    <div class="isolate relative p-2 border-b lg:border-b-0 lg:border-e border-(--ui-border-muted) overflow-y-auto">
+      <button
+        v-for="{ entry, depth } in flatFiles"
+        :key="entry.name + depth"
+        class="relative w-full px-2.5 py-1.5 flex items-center gap-1.5 text-sm rounded-md text-left transition-colors"
+        :class="selected === entry.name ? 'text-(--ui-text-highlighted) bg-(--ui-bg-elevated)' : 'text-(--ui-text) hover:text-(--ui-text-highlighted) hover:bg-(--ui-bg-elevated)/50'"
+        :style="{ paddingLeft: `${depth * 18 + 10}px` }"
+        @click="selected = entry.name"
+      >
+        <UIcon
+          :name="getIcon(entry)"
+          class="size-4 shrink-0"
+        />
+        <span class="truncate">{{ entry.name }}</span>
+      </button>
+    </div>
+    <div class="lg:col-span-2 overflow-hidden flex flex-col" />
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/CodeTreeView.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/extensions/views/CollapsibleView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref, computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },
@@ -22,7 +23,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 +39,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/DocEmbedView.d.vue.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/extensions/views/DocEmbedView.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed, ref, shallowRef, watch } from "vue";
+import { navigateTo } from "#imports";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { useSyncedMap } from "../../composables/useYDoc";
+import { resolveDocType } from "../../utils/docTypes";
+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 }
+});
+const { doc: rootDoc, provider } = useAbracadabra();
+const treeMap = useSyncedMap(
+  rootDoc,
+  "doc-tree"
+);
+const docId = computed(() => props.node.attrs.docId);
+const treeEntry = computed(() => treeMap.data[docId.value]);
+const exists = computed(() => !!treeEntry.value);
+const docType = computed(() => resolveDocType(treeEntry.value?.type));
+const label = computed(() => treeEntry.value?.label || "Untitled");
+const childProvider = shallowRef(null);
+const isLoading = ref(false);
+const loadError = ref(false);
+async function loadChild(id) {
+  if (!provider.value || !id) return;
+  isLoading.value = true;
+  loadError.value = false;
+  childProvider.value = null;
+  try {
+    const childProv = await provider.value.loadChild(id);
+    childProvider.value = childProv;
+  } catch {
+    loadError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+}
+watch(
+  [() => provider.value, docId],
+  ([p, id]) => {
+    if (p && id) loadChild(id);
+  },
+  { immediate: true }
+);
+function navigate() {
+  navigateTo(`/doc/${docId.value}`);
+}
+const collapsed = computed(() => props.node.attrs.collapsed);
+const tall = computed(() => props.node.attrs.tall);
+function toggleCollapsed() {
+  props.updateAttributes({ collapsed: !collapsed.value });
+}
+function toggleHeight() {
+  props.updateAttributes({ tall: !tall.value });
+}
+function removeEmbed() {
+  props.deleteNode();
+}
+</script>
+
+<template>
+  <NodeViewWrapper class="my-2">
+    <div
+      v-if="exists"
+      class="de-container"
+      contenteditable="false"
+    >
+      <!-- Header -->
+      <div
+        data-drag-handle
+        class="de-header"
+        :class="{ 'de-header-collapsed': collapsed }"
+      >
+        <div
+          class="de-title"
+          :class="{ 'de-title-link': collapsed }"
+          @click.stop="collapsed && navigate()"
+        >
+          <button
+            class="de-type-btn"
+            @click.stop="navigate"
+          >
+            <UIcon
+              :name="docType.icon"
+              class="size-3.5"
+            />
+          </button>
+          <span class="de-title-text">{{ label }}</span>
+        </div>
+
+        <div class="de-controls">
+          <button
+            class="de-ctrl-btn de-ctrl-toggle"
+            @click.stop="toggleCollapsed"
+          >
+            <UIcon
+              :name="collapsed ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+              class="size-3"
+            />
+          </button>
+          <button
+            v-if="!collapsed"
+            class="de-ctrl-btn"
+            @click.stop="toggleHeight"
+          >
+            <UIcon
+              :name="tall ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
+              class="size-3"
+            />
+          </button>
+          <button
+            class="de-ctrl-btn de-ctrl-expand"
+            @click.stop="navigate"
+          >
+            <UIcon
+              name="i-lucide-expand"
+              class="size-3"
+            />
+          </button>
+          <button
+            class="de-ctrl-btn de-ctrl-close"
+            @click.stop="removeEmbed"
+          >
+            <UIcon
+              name="i-lucide-x"
+              class="size-3"
+            />
+          </button>
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div
+        class="de-body"
+        :class="{ 'de-body-tall': tall, 'de-body-collapsed': collapsed }"
+      >
+        <div
+          v-if="isLoading"
+          class="flex-1 flex items-center justify-center text-(--ui-text-dimmed)"
+        >
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="size-5 animate-spin"
+          />
+        </div>
+        <div
+          v-else-if="loadError"
+          class="flex-1 flex items-center justify-center gap-2 text-(--ui-text-dimmed) text-sm"
+        >
+          <UIcon
+            name="i-lucide-triangle-alert"
+            class="size-4"
+          />
+          <span>Failed to load</span>
+        </div>
+        <component
+          :is="docType.component"
+          v-else-if="childProvider"
+          :doc-id="docId"
+          :child-provider="childProvider"
+          :doc-label="label"
+          class="flex-1 min-h-0"
+        />
+      </div>
+    </div>
+
+    <!-- Missing document -->
+    <div
+      v-else
+      class="flex items-center gap-3 px-4 py-3 rounded-lg border border-dashed border-(--ui-border) bg-(--ui-bg) select-none"
+      contenteditable="false"
+    >
+      <UIcon
+        name="i-lucide-file-x"
+        class="text-xl text-(--ui-text-dimmed) shrink-0"
+      />
+      <div class="min-w-0 flex-1">
+        <p class="text-sm text-(--ui-text-muted) truncate">
+          Document not found
+        </p>
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>
+
+<style scoped>
+.de-container{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);overflow:hidden;transition:box-shadow .28s ease}.de-container:has(.de-body-collapsed){box-shadow:0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04)}.de-header{align-items:center;background:var(--ui-bg-elevated);border-bottom:1px solid var(--ui-border);cursor:grab;display:flex;flex-shrink:0;gap:6px;height:34px;padding:0 4px 0 10px;transition:border-color .28s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.de-header:active{cursor:grabbing}.de-header-collapsed{border-bottom-color:transparent}.de-body{display:flex;flex-direction:column;height:400px;overflow:hidden;transition:height .28s cubic-bezier(.4,0,.2,1),border-color .28s ease}.de-body-tall{height:700px}.de-body-collapsed{height:0}.de-title{align-items:center;display:flex;flex:1;gap:4px;min-width:0;overflow:hidden;pointer-events:none}.de-title button,.de-title-link{pointer-events:auto}.de-title-link{cursor:pointer}.de-title-link .de-title-text{color:var(--ui-primary);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .12s}.de-title-link:hover .de-title-text{text-decoration-color:var(--ui-primary)}.de-title-text{color:var(--ui-text-muted);font-size:12px;font-weight:500;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}.de-type-btn{align-items:center;border-radius:var(--ui-radius);color:var(--ui-text-muted);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;transition:background .1s,color .1s;width:22px}.de-type-btn:hover{background:var(--ui-bg-accented);color:var(--ui-text)}.de-controls{flex-shrink:0;gap:2px}.de-controls,.de-ctrl-btn{align-items:center;display:flex}.de-ctrl-btn{border-radius:50%;color:var(--ui-text-dimmed);cursor:pointer;height:22px;justify-content:center;transition:background .12s,color .12s;width:22px}.de-ctrl-btn:hover{background:var(--ui-bg-accented);color:var(--ui-text)}.de-ctrl-expand:hover{background:rgba(34,197,94,.15);color:#148f3e}.de-ctrl-close:hover{background:rgba(239,68,68,.15);color:#dc2626}
+</style>

package/dist/runtime/extensions/views/DocEmbedView.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/extensions/views/FieldGroupView.d.vue.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/extensions/views/FieldGroupView.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+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 }
+});
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5 divide-y divide-(--ui-border) [&>*:not(:last-child)]:pb-5"
+  >
+    <NodeViewContent />
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/FieldGroupView.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/extensions/views/FieldView.d.vue.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/extensions/views/FieldView.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { computed } from "vue";
+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 }
+});
+const name = computed(() => props.node.attrs.name || "field");
+const fieldType = computed(() => props.node.attrs.type || "string");
+const required = computed(() => props.node.attrs.required);
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+  >
+    <div
+      class="flex items-center gap-3 font-mono text-sm"
+      contenteditable="false"
+    >
+      <span
+        v-if="name"
+        class="font-semibold text-(--ui-primary)"
+      >{{ name }}</span>
+      <div
+        v-if="fieldType || required"
+        class="flex-1 flex items-center gap-1.5 text-xs"
+      >
+        <span
+          v-if="fieldType"
+          class="rounded-sm bg-(--ui-bg-elevated) text-(--ui-text-toned) px-1.5 py-0.5"
+        >{{ fieldType }}</span>
+        <span
+          v-if="required"
+          class="rounded-sm bg-red-500/10 text-(--ui-error) px-1.5 py-0.5"
+        >required</span>
+      </div>
+    </div>
+    <div class="mt-3 text-(--ui-text-muted) text-sm [&_code]:text-xs/4">
+      <NodeViewContent class="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0" />
+    </div>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/FieldView.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/extensions/views/FileNodeView.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref, watch, onMounted } from "vue";
+import { useAbracadabra, useFileBlobStore } from "#imports";
 import { NodeViewWrapper } from "@tiptap/vue-3";
 const props = defineProps({
   decorations: { type: Array, required: true },
@@ -69,13 +71,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 +119,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 +148,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

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },
@@ -17,7 +18,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>