@abraca/nuxt 1.8.2 → 2.0.0

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

@@ -0,0 +1,163 @@
+<script setup>
+import { ref, computed } from "vue";
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import ANodeInlineLabel from "../../components/editor/ANodeInlineLabel.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 before = computed(() => props.node.attrs.before || "");
+const after = computed(() => props.node.attrs.after || "");
+const language = computed(() => props.node.attrs.language || "text");
+const editMode = ref(false);
+function lineDiff(a, b) {
+  const aLines = a.split("\n");
+  const bLines = b.split("\n");
+  const m = aLines.length;
+  const n = bLines.length;
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i2 = m - 1; i2 >= 0; i2--) {
+    for (let j2 = n - 1; j2 >= 0; j2--) {
+      if (aLines[i2] === bLines[j2]) dp[i2][j2] = (dp[i2 + 1][j2 + 1] ?? 0) + 1;
+      else dp[i2][j2] = Math.max(dp[i2 + 1][j2] ?? 0, dp[i2][j2 + 1] ?? 0);
+    }
+  }
+  const result = [];
+  let i = 0;
+  let j = 0;
+  while (i < m && j < n) {
+    if (aLines[i] === bLines[j]) {
+      result.push({ op: "equal", line: aLines[i] });
+      i++;
+      j++;
+    } else if ((dp[i + 1][j] ?? 0) >= (dp[i][j + 1] ?? 0)) {
+      result.push({ op: "remove", line: aLines[i] });
+      i++;
+    } else {
+      result.push({ op: "add", line: bLines[j] });
+      j++;
+    }
+  }
+  while (i < m) result.push({ op: "remove", line: aLines[i++] });
+  while (j < n) result.push({ op: "add", line: bLines[j++] });
+  return result;
+}
+const diffLines = computed(() => lineDiff(before.value, after.value));
+const added = computed(() => diffLines.value.filter((d) => d.op === "add").length);
+const removed = computed(() => diffLines.value.filter((d) => d.op === "remove").length);
+function setBefore(v) {
+  props.updateAttributes({ before: v });
+}
+function setAfter(v) {
+  props.updateAttributes({ after: v });
+}
+function setLanguage(v) {
+  props.updateAttributes({ language: v.trim() || "text" });
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5 border border-(--ui-border) rounded-md overflow-hidden"
+    contenteditable="false"
+  >
+    <div class="flex items-center justify-between px-3 py-1.5 border-b border-(--ui-border-muted) bg-(--ui-bg-elevated)/40 text-sm gap-2">
+      <div class="flex items-center gap-2 font-mono text-xs text-(--ui-text-muted)">
+        <UIcon
+          name="i-lucide-git-compare"
+          class="size-3.5"
+        />
+        <ANodeInlineLabel
+          :model-value="language"
+          placeholder="text"
+          variant="label"
+          @update:model-value="setLanguage"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-xs tabular-nums">
+          <span class="text-(--ui-success)">+{{ added }}</span>
+          <span class="mx-1 text-(--ui-text-muted)">/</span>
+          <span class="text-(--ui-error)">−{{ removed }}</span>
+        </span>
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :icon="editMode ? 'i-lucide-check' : 'i-lucide-pencil'"
+          :label="editMode ? 'Done' : 'Edit'"
+          @click="editMode = !editMode"
+        />
+      </div>
+    </div>
+    <div
+      v-if="editMode"
+      class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-(--ui-border-muted)"
+    >
+      <div class="flex flex-col">
+        <div class="px-3 py-1 text-xs text-(--ui-text-muted) bg-(--ui-bg-elevated)/30 border-b border-(--ui-border-muted)">
+          Before
+        </div>
+        <textarea
+          :value="before"
+          class="flex-1 p-3 font-mono text-sm bg-transparent outline-none resize-none text-(--ui-text) min-h-[160px]"
+          placeholder="Original…"
+          spellcheck="false"
+          @input="(e) => setBefore(e.target.value)"
+        />
+      </div>
+      <div class="flex flex-col">
+        <div class="px-3 py-1 text-xs text-(--ui-text-muted) bg-(--ui-bg-elevated)/30 border-b border-(--ui-border-muted)">
+          After
+        </div>
+        <textarea
+          :value="after"
+          class="flex-1 p-3 font-mono text-sm bg-transparent outline-none resize-none text-(--ui-text) min-h-[160px]"
+          placeholder="Changed…"
+          spellcheck="false"
+          @input="(e) => setAfter(e.target.value)"
+        />
+      </div>
+    </div>
+    <div
+      v-else
+      class="font-mono text-sm overflow-x-auto"
+    >
+      <div
+        v-if="diffLines.length === 0"
+        class="px-3 py-4 text-(--ui-text-muted) text-center"
+      >
+        Empty — click Edit to add content
+      </div>
+      <div
+        v-for="(d, idx) in diffLines"
+        :key="idx"
+        class="flex items-start gap-2 px-3 py-0.5 whitespace-pre"
+        :class="{
+  'bg-green-500/10 text-(--ui-text-highlighted)': d.op === 'add',
+  'bg-red-500/10 text-(--ui-text-highlighted)': d.op === 'remove',
+  'text-(--ui-text)': d.op === 'equal'
+}"
+      >
+        <span
+          class="w-4 shrink-0 text-(--ui-text-muted)"
+          :class="{
+  'text-(--ui-success)': d.op === 'add',
+  'text-(--ui-error)': d.op === 'remove'
+}"
+        >{{ d.op === "add" ? "+" : d.op === "remove" ? "\u2212" : " " }}</span>
+        <span class="flex-1">{{ d.line || " " }}</span>
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from "vue";
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import ANodeInlineLabel from "../../components/editor/ANodeInlineLabel.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 label = computed(() => props.node.attrs.label || "");
+function setLabel(v) {
+  props.updateAttributes({ label: v });
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-6 flex items-center gap-3 text-(--ui-text-muted)"
+    contenteditable="false"
+  >
+    <div class="flex-1 h-px bg-(--ui-border)" />
+    <ANodeInlineLabel
+      :model-value="label"
+      placeholder="Add label"
+      variant="label"
+      class="text-xs uppercase tracking-wider"
+      @update:model-value="setLabel"
+    />
+    <div class="flex-1 h-px bg-(--ui-border)" />
+  </NodeViewWrapper>
+</template>

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

@@ -57,12 +57,16 @@ function navigate() {
 }
 const collapsed = computed(() => props.node.attrs.collapsed);
 const tall = computed(() => props.node.attrs.tall);
+const seamless = computed(() => props.node.attrs.seamless);
 function toggleCollapsed() {
   props.updateAttributes({ collapsed: !collapsed.value });
 }
 function toggleHeight() {
   props.updateAttributes({ tall: !tall.value });
 }
+function toggleSeamless() {
+  props.updateAttributes({ seamless: !seamless.value });
+}
 function removeEmbed() {
   props.deleteNode();
 }
@@ -73,6 +77,7 @@ function removeEmbed() {
     <div
       v-if="exists"
       class="de-container"
+      :class="{ 'de-seamless': seamless }"
       contenteditable="false"
     >
       <!-- Header -->
@@ -100,6 +105,7 @@ function removeEmbed() {
 
         <div class="de-controls">
           <button
+            v-if="!seamless"
             class="de-ctrl-btn de-ctrl-toggle"
             @click.stop="toggleCollapsed"
           >
@@ -109,7 +115,7 @@ function removeEmbed() {
             />
           </button>
           <button
-            v-if="!collapsed"
+            v-if="!seamless && !collapsed"
             class="de-ctrl-btn"
             @click.stop="toggleHeight"
           >
@@ -118,6 +124,15 @@ function removeEmbed() {
               class="size-3"
             />
           </button>
+          <button
+            class="de-ctrl-btn"
+            @click.stop="toggleSeamless"
+          >
+            <UIcon
+              :name="seamless ? 'i-lucide-frame' : 'i-lucide-square-dashed'"
+              class="size-3"
+            />
+          </button>
           <button
             class="de-ctrl-btn de-ctrl-expand"
             @click.stop="navigate"
@@ -142,7 +157,7 @@ function removeEmbed() {
       <!-- Body -->
       <div
         class="de-body"
-        :class="{ 'de-body-tall': tall, 'de-body-collapsed': collapsed }"
+        :class="{ 'de-body-tall': tall && !seamless, 'de-body-collapsed': collapsed && !seamless, 'de-body-seamless': seamless }"
       >
         <div
           v-if="isLoading"
@@ -194,5 +209,5 @@ function removeEmbed() {
 </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}
+.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-seamless{background:transparent;border:none;box-shadow:none}.de-seamless .de-header{background:transparent;border-bottom:none;height:26px;opacity:0;pointer-events:none;transition:opacity .15s ease}.de-seamless:focus-within .de-header,.de-seamless:hover .de-header{opacity:1;pointer-events:auto}.de-body-seamless{height:auto;min-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/DocLinkView.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/DocLinkView.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed } 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 } = 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");
+function navigate(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  if (!docId.value) return;
+  navigateTo(`/doc/${docId.value}`);
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="span"
+    class="inline-flex align-baseline"
+  >
+    <UBadge
+      v-if="exists"
+      :icon="docType.icon"
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      class="dl-badge rounded-full cursor-pointer"
+      :class="{ 'dl-badge-selected': props.selected }"
+      @click="navigate"
+    >
+      {{ label }}
+    </UBadge>
+    <UBadge
+      v-else
+      icon="i-lucide-file-x"
+      color="error"
+      variant="outline"
+      size="sm"
+      class="dl-badge rounded-full"
+    >
+      Missing document
+    </UBadge>
+  </NodeViewWrapper>
+</template>
+
+<style scoped>
+.dl-badge{transition:background-color .12s ease,box-shadow .12s ease;vertical-align:baseline}.dl-badge:hover{background:var(--ui-bg-accented)}.dl-badge-selected,:deep(.ProseMirror-selectednode) .dl-badge{box-shadow:0 0 0 2px var(--ui-primary)}
+</style>

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

@@ -0,0 +1,166 @@
+<script setup>
+import { ref, computed, watch } 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 }
+});
+const src = computed(() => props.node.attrs.src || "");
+const title = computed(() => props.node.attrs.title || "");
+const aspectRatio = computed(() => props.node.attrs.aspectRatio || "16/9");
+const isSafe = computed(() => /^https?:\/\//.test(src.value));
+const popoverOpen = ref(false);
+const srcDraft = ref("");
+const titleDraft = ref("");
+watch(popoverOpen, (open) => {
+  if (open) {
+    srcDraft.value = src.value;
+    titleDraft.value = title.value;
+  }
+});
+const ASPECTS = [
+  { key: "16/9", label: "16:9" },
+  { key: "4/3", label: "4:3" },
+  { key: "1/1", label: "1:1" },
+  { key: "3/4", label: "3:4" },
+  { key: "auto", label: "Auto" }
+];
+function saveSrc() {
+  const raw = srcDraft.value.trim();
+  const safe = /^https?:\/\//.test(raw) ? raw : "";
+  props.updateAttributes({
+    src: safe,
+    title: titleDraft.value.trim()
+  });
+  popoverOpen.value = false;
+}
+function setAspect(key) {
+  props.updateAttributes({ aspectRatio: key });
+}
+function onKeydown(e) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    saveSrc();
+  }
+}
+const aspectStyle = computed(() => {
+  if (aspectRatio.value === "auto") return { aspectRatio: void 0, minHeight: "240px" };
+  return { aspectRatio: aspectRatio.value.replace("/", " / ") };
+});
+</script>
+
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+    contenteditable="false"
+  >
+    <div class="group/embed relative w-full">
+      <div
+        class="w-full rounded-md overflow-hidden bg-(--ui-bg-elevated) border border-(--ui-border)"
+        :style="aspectStyle"
+      >
+        <iframe
+          v-if="isSafe"
+          :src="src"
+          :title="title || 'Embed'"
+          class="size-full border-0"
+          sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+          loading="lazy"
+          referrerpolicy="strict-origin-when-cross-origin"
+        />
+        <UPopover
+          v-else
+          v-model:open="popoverOpen"
+          :content="{ align: 'center' }"
+        >
+          <button
+            class="size-full flex flex-col items-center justify-center gap-2 text-(--ui-text-muted) hover:text-(--ui-text) hover:bg-(--ui-bg-elevated)/60 transition-colors"
+            type="button"
+          >
+            <UIcon
+              name="i-lucide-code-xml"
+              class="size-10"
+            />
+            <span class="text-sm">Click to add embed URL</span>
+          </button>
+          <template #content>
+            <div class="p-2 w-96 flex flex-col gap-2">
+              <UInput
+                v-model="srcDraft"
+                autofocus
+                size="sm"
+                placeholder="https://codepen.io/… or figma.com/…"
+                icon="i-lucide-link"
+                @keydown="onKeydown"
+              />
+              <UInput
+                v-model="titleDraft"
+                size="sm"
+                placeholder="Title (for accessibility)"
+                icon="i-lucide-text"
+                @keydown="onKeydown"
+              />
+              <div class="flex justify-end">
+                <UButton
+                  size="sm"
+                  @click="saveSrc"
+                >
+                  Save
+                </UButton>
+              </div>
+            </div>
+          </template>
+        </UPopover>
+      </div>
+      <div
+        v-if="isSafe"
+        class="absolute top-2 right-2 flex items-center gap-1 opacity-0 group-hover/embed:opacity-100 transition-opacity"
+      >
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="solid"
+          icon="i-lucide-pencil"
+          label="Replace"
+          @click="popoverOpen = true"
+        />
+        <UPopover>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="solid"
+            icon="i-lucide-ratio"
+            :label="aspectRatio === 'auto' ? 'Auto' : aspectRatio.replace('/', ':')"
+          />
+          <template #content>
+            <div class="p-1 flex flex-col gap-0.5 min-w-[100px]">
+              <button
+                v-for="a in ASPECTS"
+                :key="a.key"
+                class="px-2 py-1 text-sm rounded-sm hover:bg-(--ui-bg-elevated) transition-colors text-left flex items-center gap-2"
+                :class="aspectRatio === a.key ? 'text-(--ui-text-highlighted) bg-(--ui-bg-elevated)' : 'text-(--ui-text-muted)'"
+                @click="setAspect(a.key)"
+              >
+                <UIcon
+                  :name="aspectRatio === a.key ? 'i-lucide-check' : 'i-lucide-ratio'"
+                  class="size-3.5"
+                />
+                {{ a.label }}
+              </button>
+            </div>
+          </template>
+        </UPopover>
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>

package/dist/runtime/extensions/views/EmbedView.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/FigureView.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;