@threadlabs/looma 0.3.1 → 0.5.0

package/vue/editor/index.js

@@ -1,1171 +1,1032 @@
-import {
-  IconButton,
-  Popover,
-  UiEditorInsertTableGrid_default,
-  UiEditorMentionMenu_default,
-  UiEditorSlashMenu_default,
-  UiEditorTableContextMenu_default,
-  UiEditorTableOverlay_default,
-  UiEditorTableToolbar_default,
-  UiEditorToolbar_default,
-  createAdapterComponent,
-  toHTMLElement
-} from "../chunk-OX3EACZ7.js";
-
-// src/editor/index.ts
-import "@threadlabs/looma/editor";
-export * from "@threadlabs/looma/editor";
-
-// src/editor/primitives.ts
-import {
-  defineComponent,
-  h,
-  shallowRef,
-  watchEffect
-} from "vue";
-function createSuggestionMenuAdapter(name) {
-  const component = name === "EditorSlashMenu" ? UiEditorSlashMenu_default : UiEditorMentionMenu_default;
-  return defineComponent({
-    name,
-    inheritAttrs: false,
-    props: {
-      open: { type: Boolean, default: false },
-      query: { type: String, default: "" },
-      items: { type: Array, default: () => [] },
-      selectedIndex: { type: Number, default: 0 },
-      anchorRect: { type: Object, default: null },
-      loading: { type: Boolean, default: false }
-    },
-    setup(props, { attrs }) {
-      const elementRef = shallowRef(null);
-      watchEffect((onCleanup) => {
-        const element = elementRef.value;
-        if (!element) return;
-        const callbackAttrs = attrs;
-        const highlightCallback = callbackAttrs.onHighlight;
-        const selectCallback = callbackAttrs.onSelect;
-        const highlightHandler = typeof highlightCallback === "function" ? (event) => highlightCallback(event.detail) : void 0;
-        const selectHandler = typeof selectCallback === "function" ? (event) => selectCallback(event.detail) : void 0;
-        if (highlightHandler) element.addEventListener("highlight", highlightHandler);
-        if (selectHandler) element.addEventListener("select", selectHandler);
-        onCleanup(() => {
-          if (highlightHandler) element.removeEventListener("highlight", highlightHandler);
-          if (selectHandler) element.removeEventListener("select", selectHandler);
-        });
-      });
-      return () => {
-        const callbackAttrs = attrs;
-        const {
-          onHighlight,
-          onSelect,
-          ...forwardedAttrs
-        } = callbackAttrs;
-        void onHighlight;
-        void onSelect;
-        return h(component, {
-          ...props,
-          ...forwardedAttrs,
-          ref: (value) => {
-            elementRef.value = toHTMLElement(value);
-          }
-        });
-      };
-    }
-  });
-}
-var ACTION_EVENT_BINDINGS = [["action", "onAction"]];
-var INSERT_EVENT_BINDINGS = [["insert", "onInsert"]];
-var EditorSlashMenu = createSuggestionMenuAdapter(
-  "EditorSlashMenu"
-);
-var EditorMentionMenu = createSuggestionMenuAdapter(
-  "EditorMentionMenu"
-);
-var EditorToolbar = createAdapterComponent(UiEditorToolbar_default, "EditorToolbar");
-var EditorTableContextMenu = createAdapterComponent(UiEditorTableContextMenu_default, "EditorTableContextMenu", ACTION_EVENT_BINDINGS);
-var EditorTableToolbar = createAdapterComponent(UiEditorTableToolbar_default, "EditorTableToolbar", ACTION_EVENT_BINDINGS);
-var EditorInsertTableGrid = createAdapterComponent(UiEditorInsertTableGrid_default, "EditorInsertTableGrid", INSERT_EVENT_BINDINGS);
-var EditorTableOverlay = createAdapterComponent(
-  UiEditorTableOverlay_default,
-  "EditorTableOverlay",
-  ACTION_EVENT_BINDINGS,
-  "class",
-  ["geometry"]
-);
-var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
-  EditorToolbar: "ui-editor-toolbar",
-  EditorSlashMenu: "ui-editor-slash-menu",
-  EditorMentionMenu: "ui-editor-mention-menu",
-  EditorTableContextMenu: "ui-editor-table-context-menu",
-  EditorTableToolbar: "ui-editor-table-toolbar",
-  EditorInsertTableGrid: "ui-editor-insert-table-grid",
-  EditorTableOverlay: "ui-editor-table-overlay"
-};
-
-// src/editor/LoomaEditor.ts
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from "vue";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, resolveTableCellAt, shouldShowTextFormattingToolbar } from "@threadlabs/looma/editor";
+import { EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover } from "@threadlabs/looma/vue";
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
-import { TextSelection } from "@tiptap/pm/state";
-import {
-  defineComponent as defineComponent2,
-  h as h2,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  reactive,
-  ref,
-  useId,
-  watch
-} from "vue";
-import {
-  createLoomaSlashCommandExtension,
-  createLoomaMentionExtension,
-  DEFAULT_MENTION_RESULT_LIMIT,
-  getActiveTableUiState,
-  getDefaultEditorExtensions,
-  handleTableAction,
-  handleTableOverlayAction,
-  measureTableOverlayGeometry,
-  normalizeActiveTableColumnWidths,
-  resolveTableCellAt,
-  shouldShowTextFormattingToolbar
-} from "@threadlabs/looma/editor";
-import { getVisualViewportRect, LOOMA_ICONS } from "@threadlabs/looma/core";
-
-// src/editor/image-delivery.ts
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+export * from "@threadlabs/looma/editor";
+//#region src/vue/editor/primitives.ts
+/** Each Vue editor component's element tag, for tooling that enumerates them. */
+var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
+	EditorToolbar: "ui-editor-toolbar",
+	EditorSlashMenu: "ui-editor-slash-menu",
+	EditorMentionMenu: "ui-editor-mention-menu",
+	EditorTableContextMenu: "ui-editor-table-context-menu",
+	EditorTableToolbar: "ui-editor-table-toolbar",
+	EditorInsertTableGrid: "ui-editor-insert-table-grid",
+	EditorTableOverlay: "ui-editor-table-overlay"
+};
+//#endregion
+//#region src/vue/editor/image-delivery.ts
 function optionalString(value) {
-  return typeof value === "string" && value.length > 0 ? value : void 0;
+	return typeof value === "string" && value.length > 0 ? value : void 0;
 }
 function normalizeImageDimension(value) {
-  return typeof value === "number" && Number.isSafeInteger(value) && value > 0 ? value : void 0;
+	return typeof value === "number" && Number.isSafeInteger(value) && value > 0 ? value : void 0;
 }
 function imageDescriptorFromAttrs(attrs) {
-  const src = optionalString(attrs.src);
-  if (!src) return null;
-  const alt = typeof attrs.alt === "string" ? attrs.alt : void 0;
-  const width = normalizeImageDimension(attrs.width);
-  const height = normalizeImageDimension(attrs.height);
-  return {
-    src,
-    ...alt !== void 0 ? { alt } : {},
-    ...width ? { width } : {},
-    ...height ? { height } : {},
-    ...attrs.responsive === true ? { responsive: true } : {}
-  };
+	const src = optionalString(attrs.src);
+	if (!src) return null;
+	const alt = typeof attrs.alt === "string" ? attrs.alt : void 0;
+	const width = normalizeImageDimension(attrs.width);
+	const height = normalizeImageDimension(attrs.height);
+	return {
+		src,
+		...alt !== void 0 ? { alt } : {},
+		...width ? { width } : {},
+		...height ? { height } : {},
+		...attrs.responsive === true ? { responsive: true } : {}
+	};
 }
 function transientAttributes(resolver, image) {
-  const attributes = {
-    "aria-label": image.alt ? `Open image: ${image.alt}` : "Open image",
-    "data-looma-image": "",
-    role: "button",
-    src: image.src,
-    tabindex: "0"
-  };
-  if (!image.responsive || !resolver) return attributes;
-  let rendition;
-  try {
-    rendition = resolver(image);
-  } catch {
-    return attributes;
-  }
-  if (!rendition) return attributes;
-  const src = optionalString(rendition.src);
-  const srcset = optionalString(rendition.srcset);
-  const sizes = optionalString(rendition.sizes);
-  if (src) attributes.src = src;
-  if (srcset) attributes.srcset = srcset;
-  if (sizes) attributes.sizes = sizes;
-  if (rendition.loading === "eager" || rendition.loading === "lazy") {
-    attributes.loading = rendition.loading;
-  }
-  if (["async", "auto", "sync"].includes(rendition.decoding ?? "")) {
-    attributes.decoding = rendition.decoding;
-  }
-  if (["auto", "high", "low"].includes(rendition.fetchPriority ?? "")) {
-    attributes.fetchpriority = rendition.fetchPriority;
-  }
-  if (src && src !== image.src || srcset) attributes["data-looma-rendition"] = "true";
-  return attributes;
+	const attributes = {
+		"aria-label": image.alt ? `Open image: ${image.alt}` : "Open image",
+		"data-looma-image": "",
+		role: "button",
+		src: image.src,
+		tabindex: "0"
+	};
+	if (!image.responsive || !resolver) return attributes;
+	let rendition;
+	try {
+		rendition = resolver(image);
+	} catch {
+		return attributes;
+	}
+	if (!rendition) return attributes;
+	const src = optionalString(rendition.src);
+	const srcset = optionalString(rendition.srcset);
+	const sizes = optionalString(rendition.sizes);
+	if (src) attributes.src = src;
+	if (srcset) attributes.srcset = srcset;
+	if (sizes) attributes.sizes = sizes;
+	if (rendition.loading === "eager" || rendition.loading === "lazy") attributes.loading = rendition.loading;
+	if ([
+		"async",
+		"auto",
+		"sync"
+	].includes(rendition.decoding ?? "")) attributes.decoding = rendition.decoding;
+	if ([
+		"auto",
+		"high",
+		"low"
+	].includes(rendition.fetchPriority ?? "")) attributes.fetchpriority = rendition.fetchPriority;
+	if (src && src !== image.src || srcset) attributes["data-looma-rendition"] = "true";
+	return attributes;
 }
 function createDecorations(doc, resolver, failedRenditions) {
-  const decorations = [];
-  const currentSources = /* @__PURE__ */ new Set();
-  doc.descendants((node, position) => {
-    if (node.type.name !== "image") return;
-    const image = imageDescriptorFromAttrs(node.attrs);
-    if (!image) return;
-    currentSources.add(image.src);
-    decorations.push(Decoration.node(
-      position,
-      position + node.nodeSize,
-      transientAttributes(failedRenditions.has(image.src) ? void 0 : resolver, image)
-    ));
-  });
-  for (const src of failedRenditions) {
-    if (!currentSources.has(src)) failedRenditions.delete(src);
-  }
-  return DecorationSet.create(doc, decorations);
+	const decorations = [];
+	const currentSources = /* @__PURE__ */ new Set();
+	doc.descendants((node, position) => {
+		if (node.type.name !== "image") return;
+		const image = imageDescriptorFromAttrs(node.attrs);
+		if (!image) return;
+		currentSources.add(image.src);
+		decorations.push(Decoration.node(position, position + node.nodeSize, transientAttributes(failedRenditions.has(image.src) ? void 0 : resolver, image)));
+	});
+	for (const src of failedRenditions) if (!currentSources.has(src)) failedRenditions.delete(src);
+	return DecorationSet.create(doc, decorations);
 }
 function rangeContainsImage(doc, from, to) {
-  const start = Math.max(0, Math.min(from - 1, doc.content.size));
-  const end = Math.max(start, Math.min(to + 1, doc.content.size));
-  let found = false;
-  doc.nodesBetween(start, end, (node) => {
-    if (node.type.name !== "image") return !found;
-    found = true;
-    return false;
-  });
-  return found;
+	const start = Math.max(0, Math.min(from - 1, doc.content.size));
+	const end = Math.max(start, Math.min(to + 1, doc.content.size));
+	let found = false;
+	doc.nodesBetween(start, end, (node) => {
+		if (node.type.name !== "image") return !found;
+		found = true;
+		return false;
+	});
+	return found;
 }
 function transactionChangesImages(transaction) {
-  let changed = false;
-  transaction.mapping.maps.forEach((stepMap) => {
-    stepMap.forEach((oldStart, oldEnd, newStart, newEnd) => {
-      if (rangeContainsImage(transaction.before, oldStart, oldEnd) || rangeContainsImage(transaction.doc, newStart, newEnd)) changed = true;
-    });
-  });
-  return changed;
+	let changed = false;
+	transaction.mapping.maps.forEach((stepMap) => {
+		stepMap.forEach((oldStart, oldEnd, newStart, newEnd) => {
+			if (rangeContainsImage(transaction.before, oldStart, oldEnd) || rangeContainsImage(transaction.doc, newStart, newEnd)) changed = true;
+		});
+	});
+	return changed;
 }
 function createLoomaImageDeliveryController(options) {
-  const pluginKey = new PluginKey("looma-image-delivery");
-  const failedRenditions = /* @__PURE__ */ new Set();
-  const refresh = (editor) => {
-    editor.view.dispatch(editor.state.tr.setMeta(pluginKey, true));
-  };
-  const extension = Extension.create({
-    name: "loomaImageDelivery",
-    addGlobalAttributes() {
-      return [{
-        types: ["image"],
-        attributes: {
-          width: {
-            default: null,
-            parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("width"))) ?? null,
-            renderHTML: (attributes) => normalizeImageDimension(attributes.width) ? { width: normalizeImageDimension(attributes.width) } : {}
-          },
-          height: {
-            default: null,
-            parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("height"))) ?? null,
-            renderHTML: (attributes) => normalizeImageDimension(attributes.height) ? { height: normalizeImageDimension(attributes.height) } : {}
-          },
-          responsive: {
-            default: null,
-            parseHTML: (element) => element.hasAttribute("data-looma-responsive") || null,
-            renderHTML: (attributes) => attributes.responsive === true ? { "data-looma-responsive": "" } : {}
-          }
-        }
-      }];
-    },
-    addProseMirrorPlugins() {
-      return [new Plugin({
-        key: pluginKey,
-        state: {
-          init: (_, state) => createDecorations(
-            state.doc,
-            options.resolveAttributes(),
-            failedRenditions
-          ),
-          apply: (transaction, previous) => {
-            if (!transaction.getMeta(pluginKey) && !transactionChangesImages(transaction)) {
-              return previous.map(transaction.mapping, transaction.doc);
-            }
-            return createDecorations(
-              transaction.doc,
-              options.resolveAttributes(),
-              failedRenditions
-            );
-          }
-        },
-        props: {
-          decorations: (state) => pluginKey.getState(state)
-        }
-      })];
-    }
-  });
-  return {
-    extension,
-    markRenditionFailed: (editor, src) => {
-      if (failedRenditions.has(src)) return false;
-      failedRenditions.add(src);
-      refresh(editor);
-      return true;
-    },
-    reset: (editor) => {
-      failedRenditions.clear();
-      refresh(editor);
-    }
-  };
+	const pluginKey = new PluginKey("looma-image-delivery");
+	const failedRenditions = /* @__PURE__ */ new Set();
+	const refresh = (editor) => {
+		editor.view.dispatch(editor.state.tr.setMeta(pluginKey, true));
+	};
+	return {
+		extension: Extension.create({
+			name: "loomaImageDelivery",
+			addGlobalAttributes() {
+				return [{
+					types: ["image"],
+					attributes: {
+						width: {
+							default: null,
+							parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("width"))) ?? null,
+							renderHTML: (attributes) => normalizeImageDimension(attributes.width) ? { width: normalizeImageDimension(attributes.width) } : {}
+						},
+						height: {
+							default: null,
+							parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("height"))) ?? null,
+							renderHTML: (attributes) => normalizeImageDimension(attributes.height) ? { height: normalizeImageDimension(attributes.height) } : {}
+						},
+						responsive: {
+							default: null,
+							parseHTML: (element) => element.hasAttribute("data-looma-responsive") || null,
+							renderHTML: (attributes) => attributes.responsive === true ? { "data-looma-responsive": "" } : {}
+						}
+					}
+				}];
+			},
+			addProseMirrorPlugins() {
+				return [new Plugin({
+					key: pluginKey,
+					state: {
+						init: (_, state) => createDecorations(state.doc, options.resolveAttributes(), failedRenditions),
+						apply: (transaction, previous) => {
+							if (!transaction.getMeta(pluginKey) && !transactionChangesImages(transaction)) return previous.map(transaction.mapping, transaction.doc);
+							return createDecorations(transaction.doc, options.resolveAttributes(), failedRenditions);
+						}
+					},
+					props: { decorations: (state) => pluginKey.getState(state) }
+				})];
+			}
+		}),
+		markRenditionFailed: (editor, src) => {
+			if (failedRenditions.has(src)) return false;
+			failedRenditions.add(src);
+			refresh(editor);
+			return true;
+		},
+		reset: (editor) => {
+			failedRenditions.clear();
+			refresh(editor);
+		}
+	};
 }
 function imageUploadContent(image) {
-  return {
-    type: "image",
-    attrs: {
-      src: image.src,
-      alt: image.alt,
-      ...image.width ? { width: image.width } : {},
-      ...image.height ? { height: image.height } : {},
-      ...image.responsive === true ? { responsive: true } : {}
-    }
-  };
+	return {
+		type: "image",
+		attrs: {
+			src: image.src,
+			alt: image.alt,
+			...image.width ? { width: image.width } : {},
+			...image.height ? { height: image.height } : {},
+			...image.responsive === true ? { responsive: true } : {}
+		}
+	};
 }
-
-// src/editor/LoomaEditor.ts
-var EMPTY_DOCUMENT = { type: "doc", content: [] };
+//#endregion
+//#region src/vue/editor/LoomaEditor.ts
+var EMPTY_DOCUMENT = {
+	type: "doc",
+	content: []
+};
 var editorInstanceSequence = 0;
 var EMPTY_CAPABILITIES = {
-  canAddRowBefore: false,
-  canAddRowAfter: false,
-  canAddColumnBefore: false,
-  canAddColumnAfter: false,
-  canDeleteRow: false,
-  canDeleteColumn: false,
-  canDeleteTable: false,
-  canMergeCells: false,
-  canSplitCell: false
+	canAddRowBefore: false,
+	canAddRowAfter: false,
+	canAddColumnBefore: false,
+	canAddColumnAfter: false,
+	canDeleteRow: false,
+	canDeleteColumn: false,
+	canDeleteTable: false,
+	canMergeCells: false,
+	canSplitCell: false
 };
 function sameDocument(left, right) {
-  return JSON.stringify(left) === JSON.stringify(right);
+	return JSON.stringify(left) === JSON.stringify(right);
 }
 function managedMenuAnchorRect(rect) {
-  if (!rect) return null;
-  return {
-    left: rect.left,
-    top: rect.top,
-    right: rect.right,
-    bottom: rect.bottom,
-    x: rect.x,
-    y: rect.y,
-    width: rect.width,
-    height: rect.height
-  };
+	if (!rect) return null;
+	return {
+		left: rect.left,
+		top: rect.top,
+		right: rect.right,
+		bottom: rect.bottom,
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height
+	};
 }
 function managedSlashMenuItems(items) {
-  return items.map(({ title, description, icon }) => ({
-    title,
-    description,
-    icon
-  }));
+	return items.map(({ title, description, icon }) => ({
+		title,
+		description,
+		icon
+	}));
 }
 function selectedTableElement(editor) {
-  const { node } = editor.view.domAtPos(editor.state.selection.from);
-  const element = node instanceof HTMLElement ? node : node.parentElement;
-  return element?.closest("table");
+	const { node } = editor.view.domAtPos(editor.state.selection.from);
+	return (node instanceof HTMLElement ? node : node.parentElement)?.closest("table");
 }
 function selectedTableCellElement(editor) {
-  const { node } = editor.view.domAtPos(editor.state.selection.from);
-  const element = node instanceof HTMLElement ? node : node.parentElement;
-  return element?.closest("td, th");
+	const { node } = editor.view.domAtPos(editor.state.selection.from);
+	return (node instanceof HTMLElement ? node : node.parentElement)?.closest("td, th");
 }
 function loomaIcon(name) {
-  return h2("svg", {
-    class: "looma-icon",
-    "data-looma-icon": name,
-    "aria-hidden": "true",
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    "stroke-width": 2,
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  }, LOOMA_ICONS[name].map(([tag, attributes]) => h2(tag, attributes)));
+	return h("svg", {
+		class: "looma-icon",
+		"data-looma-icon": name,
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": 2,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, LOOMA_ICONS[name].map(([tag, attributes]) => h(tag, attributes)));
 }
-var LoomaEditor = defineComponent2({
-  name: "LoomaEditor",
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({ ...EMPTY_DOCUMENT })
-    },
-    // Deliberate exception to Looma's opt-in boolean rule: an editor that is
-    // read-only unless configured would violate the primary UX promised by this wrapper.
-    editable: { type: Boolean, default: true },
-    placeholder: {
-      type: String,
-      default: "Type \u201C/\u201D for commands, or start writing\u2026"
-    },
-    extensions: {
-      type: Array,
-      default: () => []
-    },
-    mentionItems: {
-      type: Array,
-      default: () => []
-    },
-    mentionProvider: {
-      type: Function,
-      default: void 0
-    },
-    mentionLimit: {
-      type: Number,
-      default: DEFAULT_MENTION_RESULT_LIMIT
-    },
-    uploadImage: {
-      type: Function,
-      default: void 0
-    },
-    resolveImageAttributes: {
-      type: Function,
-      default: void 0
-    },
-    toolbarMode: {
-      type: String,
-      default: "bubble"
-    }
-  },
-  emits: {
-    "update:modelValue": (_value) => true,
-    update: (_value) => true,
-    ready: (_editor) => true,
-    uploadError: (_error, _file) => true,
-    imageActivate: (_detail) => true,
-    imageRenditionError: (_detail) => true
-  },
-  setup(props, { attrs, emit, expose }) {
-    const root = ref(null);
-    const fileInput = ref(null);
-    const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-    const tableToolbarShell = ref(null);
-    const tableOverlayShell = ref(null);
-    const tableMenuShell = ref(null);
-    const mobileToolbarShell = ref(null);
-    const dragOver = ref(false);
-    const uploading = ref(false);
-    const failedUpload = ref(null);
-    const tablePickerOpen = ref(false);
-    const mobileToolbarStyle = ref({});
-    const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
-    const editorFocused = ref(false);
-    const editorStateVersion = ref(0);
-    const mobileToolbarMode = ref("formatting");
-    let dragLeaveTimer = null;
-    let tableResizeActive = false;
-    let tableInteractionActive = false;
-    let mobileTableControlsDismissed = false;
-    let hoveredTableCell = null;
-    let overlayTableElement = null;
-    let tablePointerFrame = null;
-    const slash = reactive({
-      active: false,
-      items: [],
-      selectedIndex: 0,
-      query: "",
-      rect: null,
-      select: null
-    });
-    const mention = reactive({
-      active: false,
-      items: [],
-      selectedIndex: 0,
-      query: "",
-      rect: null,
-      loading: false,
-      highlight: null,
-      select: null
-    });
-    const tableUi = reactive({
-      toolbarOpen: false,
-      overlayOpen: false,
-      menuOpen: false,
-      alignment: "left",
-      background: null,
-      rows: 0,
-      cols: 0,
-      geometry: null,
-      toolbarStyle: {},
-      overlayStyle: {},
-      menuStyle: {},
-      capabilities: { ...EMPTY_CAPABILITIES }
-    });
-    const slashExtension = createLoomaSlashCommandExtension({
-      onOpenImagePicker: () => fileInput.value?.click(),
-      onStateChange: (state) => {
-        Object.assign(slash, state);
-      }
-    });
-    const mentionMenuId = `looma-editor-mention-menu-${++editorInstanceSequence}`;
-    const hasConsumerMention = props.extensions.some((extension) => extension.name === "mention");
-    const mentionExtension = hasConsumerMention ? null : createLoomaMentionExtension({
-      limit: props.mentionLimit,
-      menuId: mentionMenuId,
-      items: async (query, context) => {
-        if (props.mentionProvider) {
-          return await props.mentionProvider(query, context);
-        }
-        return props.mentionItems;
-      },
-      onStateChange: (state) => {
-        Object.assign(mention, state);
-      }
-    });
-    const imageDelivery = createLoomaImageDeliveryController({
-      resolveAttributes: () => props.resolveImageAttributes
-    });
-    let lastFocusedSelection = null;
-    const rememberSelection = (instance) => {
-      if (!instance.isFocused) return;
-      const selection = instance.view.state.selection;
-      lastFocusedSelection = {
-        bookmark: selection.getBookmark(),
-        from: selection.from,
-        to: selection.to,
-        text: selection instanceof TextSelection
-      };
-    };
-    const editor = useEditor({
-      extensions: [
-        ...getDefaultEditorExtensions({
-          placeholder: props.placeholder,
-          mention: mentionExtension ?? false
-        }),
-        imageDelivery.extension,
-        slashExtension,
-        ...props.extensions
-      ],
-      content: props.modelValue,
-      editable: props.editable,
-      onCreate: ({ editor: instance }) => emit("ready", instance),
-      onFocus: ({ editor: instance }) => rememberSelection(instance),
-      onSelectionUpdate: ({ editor: instance }) => rememberSelection(instance),
-      onTransaction: () => {
-        editorStateVersion.value += 1;
-      },
-      onUpdate: ({ editor: instance }) => {
-        const value = instance.getJSON();
-        emit("update:modelValue", value);
-        emit("update", value);
-      }
-    });
-    watch(() => props.editable, (editable) => editor.value?.setEditable(editable));
-    watch(() => props.resolveImageAttributes, () => {
-      const instance = editor.value;
-      if (instance) imageDelivery.reset(instance);
-    });
-    watch(() => props.modelValue, (value) => {
-      const instance = editor.value;
-      if (!instance || sameDocument(instance.getJSON(), value)) return;
-      const wasFocused = instance.isFocused;
-      const previousSelection = lastFocusedSelection ?? {
-        bookmark: instance.view.state.selection.getBookmark(),
-        from: instance.view.state.selection.from,
-        to: instance.view.state.selection.to,
-        text: instance.view.state.selection instanceof TextSelection
-      };
-      if (!wasFocused) {
-        instance.commands.setContent(value, false);
-        return;
-      }
-      instance.chain().setContent(value, false).command(({ tr }) => {
-        try {
-          tr.setSelection(previousSelection.text ? TextSelection.create(tr.doc, previousSelection.from, previousSelection.to) : previousSelection.bookmark.resolve(tr.doc));
-        } catch {
-          const max = tr.doc.content.size;
-          const from = Math.max(1, Math.min(previousSelection.from, max));
-          const to = Math.max(from, Math.min(previousSelection.to, max));
-          tr.setSelection(TextSelection.create(tr.doc, from, to));
-        }
-        return true;
-      }).run();
-      instance.view.focus();
-      rememberSelection(instance);
-    }, { deep: true });
-    const closeTableUi = () => {
-      tableUi.toolbarOpen = false;
-      tableUi.overlayOpen = false;
-      tableUi.menuOpen = false;
-      tableUi.alignment = "left";
-      tableUi.background = null;
-      tableUi.geometry = null;
-      tableUi.capabilities = { ...EMPTY_CAPABILITIES };
-      overlayTableElement = null;
-      mobileTableControlsDismissed = false;
-      mobileToolbarMode.value = "formatting";
-    };
-    const updateMobileViewport = () => {
-      mobile.value = window.innerWidth <= 767;
-      if (!mobile.value) {
-        mobileToolbarStyle.value = {};
-        return;
-      }
-      nextTick(() => {
-        const viewport = getVisualViewportRect(window);
-        const toolbarHeight = mobileToolbarShell.value?.getBoundingClientRect().height || 56;
-        mobileToolbarStyle.value = {
-          left: `${viewport.left}px`,
-          top: `${Math.max(viewport.top, viewport.bottom - toolbarHeight)}px`,
-          width: `${viewport.width}px`
-        };
-      });
-    };
-    const updateTableUi = () => {
-      const instance = editor.value;
-      if (!instance || !props.editable || !instance.isFocused && !tableInteractionActive && !hoveredTableCell) {
-        closeTableUi();
-        return;
-      }
-      const state = getActiveTableUiState(instance);
-      const selectedTable = selectedTableElement(instance);
-      const hoveredTable = hoveredTableCell?.closest("table") ?? null;
-      const table = hoveredTable ?? selectedTable;
-      if (!table) {
-        closeTableUi();
-        return;
-      }
-      const selectedTableIsActive = state.active && selectedTable === table;
-      overlayTableElement = table;
-      if (selectedTableIsActive && !mobileTableControlsDismissed) mobileToolbarMode.value = "table";
-      const rect = table.getBoundingClientRect();
-      const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
-      const toolbarLeft = Math.min(
-        Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2),
-        Math.max(12, window.innerWidth - maxToolbarWidth - 12)
-      );
-      tableUi.toolbarOpen = selectedTableIsActive && state.showToolbar && !mobile.value;
-      tableUi.overlayOpen = !mobile.value;
-      tableUi.alignment = selectedTableIsActive ? state.cellAlignment : "left";
-      tableUi.background = selectedTableIsActive ? state.cellBackground : null;
-      tableUi.capabilities = selectedTableIsActive ? state.capabilities : { ...EMPTY_CAPABILITIES };
-      const selectedCell = selectedTableIsActive ? selectedTableCellElement(instance) : null;
-      const geometry = measureTableOverlayGeometry(
-        table,
-        selectedCell,
-        hoveredTableCell && table.contains(hoveredTableCell) ? hoveredTableCell : null
-      );
-      tableUi.rows = Math.max(0, geometry.rowBoundaries.length - 1);
-      tableUi.cols = Math.max(0, geometry.columnBoundaries.length - 1);
-      tableUi.geometry = geometry;
-      tableUi.toolbarStyle = {
-        top: `${rect.top > 76 ? rect.top - 52 : rect.bottom + 12}px`,
-        left: `${toolbarLeft}px`,
-        maxWidth: `${maxToolbarWidth}px`
-      };
-      tableUi.overlayStyle = {
-        top: `${rect.top}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        height: `${rect.height}px`
-      };
-    };
-    const onEditorFocus = () => {
-      editorFocused.value = true;
-      updateTableUi();
-      updateMobileViewport();
-    };
-    const onEditorBlur = () => {
-      updateTableUi();
-      setTimeout(() => {
-        if (!tableInteractionActive && !editor.value?.isFocused) editorFocused.value = false;
-      }, 0);
-    };
-    const bindEditorUi = (instance) => {
-      if (!instance) return;
-      instance.on("selectionUpdate", updateTableUi);
-      instance.on("transaction", updateTableUi);
-      instance.on("focus", onEditorFocus);
-      instance.on("blur", onEditorBlur);
-      nextTick(updateTableUi);
-    };
-    const unbindEditorUi = (instance) => {
-      if (!instance) return;
-      instance.off("selectionUpdate", updateTableUi);
-      instance.off("transaction", updateTableUi);
-      instance.off("focus", onEditorFocus);
-      instance.off("blur", onEditorBlur);
-    };
-    watch(editor, (instance, previous) => {
-      unbindEditorUi(previous);
-      bindEditorUi(instance);
-    }, { immediate: true });
-    const onViewportChange = () => {
-      updateMobileViewport();
-      updateTableUi();
-      tableUi.menuOpen = false;
-    };
-    const onDocumentPointerDown = (event) => {
-      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
-      const inElement = (element) => Boolean(
-        element && (path.includes(element) || event.target instanceof Node && element.contains(event.target))
-      );
-      const inTableUi = inElement(tableToolbarShell.value) || inElement(tableOverlayShell.value) || inElement(tableMenuShell.value) || inElement(mobileToolbarShell.value);
-      tableInteractionActive = inTableUi;
-      if (inTableUi) setTimeout(() => {
-        tableInteractionActive = false;
-      }, 0);
-      if ((tableUi.toolbarOpen || tableUi.overlayOpen || tableUi.menuOpen) && !inElement(root.value) && !inTableUi) {
-        closeTableUi();
-      }
-    };
-    const onResizePointerDown = (event) => {
-      tableResizeActive = event.target instanceof HTMLElement && event.target.classList.contains("column-resize-handle");
-    };
-    const onResizePointerUp = () => {
-      if (!tableResizeActive) return;
-      tableResizeActive = false;
-      requestAnimationFrame(() => {
-        const instance = editor.value;
-        const table = instance ? selectedTableElement(instance) : null;
-        if (instance && table) normalizeActiveTableColumnWidths(instance, table);
-        nextTick(updateTableUi);
-      });
-    };
-    const imageForElement = (element) => {
-      const instance = editor.value;
-      if (!instance) return null;
-      try {
-        const position = instance.view.posAtDOM(element, 0);
-        const node = instance.state.doc.nodeAt(position);
-        return node?.type.name === "image" ? imageDescriptorFromAttrs(node.attrs) : null;
-      } catch {
-        return null;
-      }
-    };
-    const imageElementForEvent = (event) => {
-      const element = event.target instanceof Element ? event.target.closest("img[data-looma-image]") : null;
-      return element && root.value?.contains(element) ? element : null;
-    };
-    const activateImage = (element, trigger) => {
-      const image = imageForElement(element);
-      if (image) emit("imageActivate", { ...image, trigger });
-    };
-    const onImageClick = (event) => {
-      const element = imageElementForEvent(event);
-      if (element && !props.editable) activateImage(element, "pointer");
-    };
-    const onImageDoubleClick = (event) => {
-      const element = imageElementForEvent(event);
-      if (element && props.editable) activateImage(element, "pointer");
-    };
-    const onImageKeyDown = (event) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      const element = imageElementForEvent(event);
-      if (!element) return;
-      event.preventDefault();
-      activateImage(element, "keyboard");
-    };
-    const onImageError = (event) => {
-      const element = imageElementForEvent(event);
-      if (!element || element.dataset.loomaRendition !== "true") return;
-      const image = imageForElement(element);
-      if (!image) return;
-      const instance = editor.value;
-      if (!instance || !imageDelivery.markRenditionFailed(instance, image.src)) return;
-      emit("imageRenditionError", { ...image, trigger: "programmatic" });
-    };
-    onMounted(() => {
-      updateMobileViewport();
-      window.addEventListener("resize", onViewportChange);
-      window.addEventListener("scroll", onViewportChange, true);
-      window.visualViewport?.addEventListener("resize", onViewportChange);
-      window.visualViewport?.addEventListener("scroll", onViewportChange);
-      document.addEventListener("pointerdown", onDocumentPointerDown, true);
-      document.addEventListener("pointerdown", onResizePointerDown, true);
-      document.addEventListener("pointerup", onResizePointerUp, true);
-      root.value?.addEventListener("error", onImageError, true);
-    });
-    onBeforeUnmount(() => {
-      window.removeEventListener("resize", onViewportChange);
-      window.removeEventListener("scroll", onViewportChange, true);
-      window.visualViewport?.removeEventListener("resize", onViewportChange);
-      window.visualViewport?.removeEventListener("scroll", onViewportChange);
-      document.removeEventListener("pointerdown", onDocumentPointerDown, true);
-      document.removeEventListener("pointerdown", onResizePointerDown, true);
-      document.removeEventListener("pointerup", onResizePointerUp, true);
-      root.value?.removeEventListener("error", onImageError, true);
-      unbindEditorUi(editor.value);
-      if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
-      if (tablePointerFrame !== null) cancelAnimationFrame(tablePointerFrame);
-    });
-    const insertImage = async (file) => {
-      if (!props.uploadImage || !editor.value) return;
-      uploading.value = true;
-      try {
-        const result = await props.uploadImage(file);
-        const image = typeof result === "string" ? { url: result } : result;
-        const width = normalizeImageDimension(image.width);
-        const height = normalizeImageDimension(image.height);
-        editor.value.chain().focus().insertContent(imageUploadContent({
-          src: image.url,
-          alt: image.alt ?? file.name,
-          ...width ? { width } : {},
-          ...height ? { height } : {},
-          ...image.responsive === true ? { responsive: true } : {}
-        })).run();
-        failedUpload.value = null;
-      } catch (error) {
-        failedUpload.value = { file };
-        emit("uploadError", error, file);
-      } finally {
-        uploading.value = false;
-      }
-    };
-    const onFileChange = async (event) => {
-      const input = event.target;
-      const files = Array.from(input.files ?? []);
-      input.value = "";
-      for (const file of files) await insertImage(file);
-    };
-    const onDrop = async (event) => {
-      event.preventDefault();
-      dragOver.value = false;
-      if (!props.editable) return;
-      const files = Array.from(event.dataTransfer?.files ?? []).filter((file) => file.type.startsWith("image/"));
-      for (const file of files) await insertImage(file);
-    };
-    const onContextMenu = (event) => {
-      const instance = editor.value;
-      const cell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
-      if (!props.editable || !instance || !(cell instanceof HTMLElement)) {
-        tableUi.menuOpen = false;
-        return;
-      }
-      event.preventDefault();
-      const currentCell = selectedTableCellElement(instance);
-      if (currentCell !== cell && !cell.classList.contains("selectedCell")) {
-        instance.chain().focus().setTextSelection(instance.view.posAtDOM(cell, 0) + 1).run();
-      }
-      updateTableUi();
-      tableUi.menuOpen = true;
-      tableUi.menuStyle = { top: `${event.clientY}px`, left: `${event.clientX}px` };
-    };
-    const runTableAction = (detail) => {
-      if (!editor.value) return;
-      handleTableAction(editor.value, detail);
-      tableUi.menuOpen = false;
-      nextTick(updateTableUi);
-    };
-    const runOverlayAction = (detail) => {
-      const instance = editor.value;
-      if (!instance) return;
-      const table = overlayTableElement ?? selectedTableElement(instance);
-      if (!table) return;
-      const targetCell = "rowIndex" in detail ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) : resolveTableCellAt(
-        table,
-        detail.action.startsWith("add-row") ? Math.max(0, detail.boundaryIndex - 1) : 0,
-        detail.action.startsWith("add-column") ? Math.max(0, detail.boundaryIndex - 1) : 0
-      );
-      if (targetCell && selectedTableElement(instance) !== table) {
-        instance.chain().focus().setTextSelection(instance.view.posAtDOM(targetCell, 0) + 1).run();
-      }
-      if (detail.action === "open-cell-menu") {
-        const selectedCell = selectedTableCellElement(instance);
-        const cell = table ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) ?? selectedCell : selectedCell;
-        if (cell && selectedCell !== cell && !cell.classList.contains("selectedCell")) {
-          instance.chain().focus().setTextSelection(instance.view.posAtDOM(cell, 0) + 1).run();
-        } else {
-          instance.commands.focus();
-        }
-        updateTableUi();
-        tableUi.menuStyle = {
-          top: `${detail.anchor.bottom + 4}px`,
-          left: `${detail.anchor.right}px`
-        };
-        tableUi.menuOpen = true;
-        return;
-      }
-      handleTableOverlayAction(instance, detail);
-      nextTick(updateTableUi);
-    };
-    const onEditorPointerOver = (event) => {
-      const cell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
-      if (!cell) return;
-      if (cell === hoveredTableCell) return;
-      hoveredTableCell = cell;
-      if (tablePointerFrame !== null) return;
-      tablePointerFrame = requestAnimationFrame(() => {
-        tablePointerFrame = null;
-        updateTableUi();
-      });
-    };
-    const onEditorPointerOut = (event) => {
-      const fromCell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
-      if (!fromCell || fromCell !== hoveredTableCell) return;
-      const next = event.relatedTarget;
-      const toCell = next instanceof HTMLElement ? next.closest("td, th") : null;
-      if (toCell || next instanceof Node && tableOverlayShell.value?.contains(next)) return;
-      hoveredTableCell = null;
-      nextTick(updateTableUi);
-    };
-    const onEditorPointerLeave = (event) => {
-      const next = event.relatedTarget;
-      if (next instanceof Node && (tableOverlayShell.value?.contains(next) || tableToolbarShell.value?.contains(next) || tableMenuShell.value?.contains(next))) return;
-      if (!hoveredTableCell) return;
-      hoveredTableCell = null;
-      nextTick(updateTableUi);
-    };
-    const onTableOverlayPointerLeave = (event) => {
-      const next = event.relatedTarget;
-      if (next instanceof Node && (root.value?.contains(next) || tableToolbarShell.value?.contains(next) || tableMenuShell.value?.contains(next))) return;
-      if (!hoveredTableCell) return;
-      hoveredTableCell = null;
-      nextTick(updateTableUi);
-    };
-    const onTableOverlayMouseDown = (event) => {
-      const action = event.target instanceof Element ? event.target.closest("button[data-action]") : null;
-      if (action) event.preventDefault();
-    };
-    const commandButton = (label, icon, active, disabled, run) => {
-      const syncNativeDisabled = (vnode) => {
-        if (!(vnode.el instanceof Element)) return;
-        const button = vnode.el instanceof HTMLButtonElement ? vnode.el : vnode.el.querySelector("button");
-        if (button) button.disabled = disabled;
-      };
-      return h2(IconButton, {
-        class: "looma-editor__toolbar-button",
-        label,
-        title: label,
-        size: "sm",
-        variant: active ? "solid" : "ghost",
-        disabled,
-        "data-active": active ? "true" : "false",
-        onVnodeMounted: syncNativeDisabled,
-        onVnodeUpdated: syncNativeDisabled,
-        onClick: run
-      }, () => loomaIcon(icon));
-    };
-    const renderToolbar = (instance, floating = true) => {
-      const buttons = [
-        commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run()),
-        commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run()),
-        commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run()),
-        commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run()),
-        commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run()),
-        commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run()),
-        h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
-        commandButton("Heading 1", "heading-1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run()),
-        commandButton("Heading 2", "heading-2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run()),
-        commandButton("Heading 3", "heading-3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run()),
-        commandButton("Bullet list", "list", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run()),
-        commandButton("Numbered list", "list-ordered", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run()),
-        commandButton("Checklist", "list-todo", instance.isActive("taskList"), false, () => instance.chain().focus().toggleTaskList().run()),
-        commandButton("Blockquote", "quote", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run()),
-        commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run()),
-        commandButton("Divider", "minus", false, !instance.can().setHorizontalRule(), () => instance.chain().focus().setHorizontalRule().run()),
-        h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
-        h2(IconButton, {
-          id: tablePickerAnchorId,
-          class: "looma-editor__toolbar-button",
-          label: "Insert table",
-          title: "Insert table",
-          size: "sm",
-          variant: tablePickerOpen.value ? "solid" : "ghost",
-          "aria-expanded": tablePickerOpen.value ? "true" : "false",
-          onClick: () => {
-            tablePickerOpen.value = !tablePickerOpen.value;
-          }
-        }, () => loomaIcon("table")),
-        commandButton(uploading.value ? "Uploading image" : "Insert image", "image", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
-        h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
-        commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
-        commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run())
-      ];
-      return h2(EditorToolbar, floating ? { floating: "" } : {}, () => buttons);
-    };
-    const focus = (position = "start") => {
-      editor.value?.commands.focus(position);
-    };
-    expose({ editor, focus });
-    return () => {
-      const instance = editor.value;
-      void editorStateVersion.value;
-      const tableActions = [
-        "align-left",
-        "align-center",
-        "align-right",
-        "background-none",
-        "background-gray",
-        "background-yellow",
-        "background-blue",
-        "background-green",
-        "background-red",
-        "clear-cells",
-        ...tableUi.capabilities.canAddRowBefore ? ["add-row-before"] : [],
-        ...tableUi.capabilities.canAddRowAfter ? ["add-row-after"] : [],
-        ...tableUi.capabilities.canAddColumnBefore ? ["add-column-before"] : [],
-        ...tableUi.capabilities.canAddColumnAfter ? ["add-column-after"] : [],
-        ...tableUi.capabilities.canMergeCells ? ["merge-cells"] : [],
-        ...tableUi.capabilities.canSplitCell ? ["split-cell"] : [],
-        ...tableUi.capabilities.canDeleteRow ? ["delete-row"] : [],
-        ...tableUi.capabilities.canDeleteColumn ? ["delete-column"] : [],
-        ...tableUi.capabilities.canDeleteTable ? ["delete-table"] : []
-      ];
-      const tableProps = {
-        open: true,
-        "cell-alignment": tableUi.alignment,
-        "cell-background": tableUi.background ?? void 0,
-        actions: tableActions,
-        onAction: runTableAction
-      };
-      return h2("div", {
-        ...attrs,
-        ref: root,
-        class: ["looma-editor", attrs.class, { "looma-editor--readonly": !props.editable, "looma-editor--drag-over": dragOver.value }],
-        onContextmenu: onContextMenu,
-        onPointerover: onEditorPointerOver,
-        onPointerout: onEditorPointerOut,
-        onPointerleave: onEditorPointerLeave,
-        onDragover: (event) => {
-          event.preventDefault();
-          if (props.editable && Array.from(event.dataTransfer?.types ?? []).includes("Files")) dragOver.value = true;
-        },
-        onDragleave: () => {
-          if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
-          dragLeaveTimer = setTimeout(() => {
-            dragOver.value = false;
-          }, 100);
-        },
-        onDrop,
-        onClick: onImageClick,
-        onDblclick: onImageDoubleClick,
-        onKeydown: onImageKeyDown
-      }, [
-        instance && props.editable && !mobile.value && props.toolbarMode === "bubble" ? h2(BubbleMenu, {
-          editor: instance,
-          pluginKey: "looma-text-formatting-menu",
-          shouldShow: ({ editor: menuEditor, from, to }) => shouldShowTextFormattingToolbar(menuEditor, from, to),
-          tippyOptions: {
-            appendTo: () => root.value ?? document.body,
-            duration: 100,
-            maxWidth: "none",
-            placement: "top"
-          }
-        }, { default: () => renderToolbar(instance) }) : null,
-        instance && props.editable && !mobile.value && props.toolbarMode === "sticky" ? h2("div", {
-          class: "looma-editor__sticky-toolbar-shell",
-          role: "toolbar",
-          "aria-label": "Editor tools"
-        }, [renderToolbar(instance, false)]) : null,
-        instance ? h2(EditorContent, { editor: instance }) : null,
-        instance && props.editable && mobile.value && editorFocused.value ? h2("div", {
-          ref: mobileToolbarShell,
-          class: "looma-editor__mobile-toolbar-shell",
-          "data-mode": mobileToolbarMode.value,
-          style: mobileToolbarStyle.value,
-          role: "toolbar",
-          "aria-label": mobileToolbarMode.value === "table" ? "Table editing" : "Text formatting"
-        }, mobileToolbarMode.value === "table" ? [
-          h2("button", {
-            class: "looma-editor__mobile-toolbar-back",
-            type: "button",
-            "aria-label": "Formatting tools",
-            onClick: () => {
-              mobileTableControlsDismissed = true;
-              mobileToolbarMode.value = "formatting";
-              editor.value?.commands.focus();
-              nextTick(updateMobileViewport);
-            }
-          }, [loomaIcon("chevron-left"), h2("span", "Formatting")]),
-          h2(EditorTableToolbar, tableProps)
-        ] : [renderToolbar(instance)]) : null,
-        h2("input", {
-          ref: fileInput,
-          class: "looma-editor__file-input",
-          type: "file",
-          accept: "image/jpeg,image/png,image/gif,image/webp,image/svg+xml",
-          multiple: true,
-          tabindex: -1,
-          "aria-hidden": "true",
-          onChange: onFileChange
-        }),
-        failedUpload.value ? h2("div", {
-          class: "looma-editor__upload-error",
-          role: "alert"
-        }, [
-          h2("span", "Couldn\u2019t upload image."),
-          h2("button", {
-            type: "button",
-            disabled: uploading.value,
-            onClick: () => {
-              const attempt = failedUpload.value;
-              if (attempt) void insertImage(attempt.file);
-            }
-          }, uploading.value ? "Retrying\u2026" : "Retry")
-        ]) : null,
-        dragOver.value ? h2("div", { class: "looma-editor__drop-overlay", "aria-hidden": "true" }, [
-          loomaIcon("image"),
-          h2("span", "Drop image to upload")
-        ]) : null,
-        h2(Popover, {
-          class: "looma-editor__table-picker-popover",
-          open: tablePickerOpen.value,
-          for: tablePickerAnchorId,
-          placement: mobile.value ? "top-start" : "bottom-start",
-          onClose: () => {
-            tablePickerOpen.value = false;
-          }
-        }, () => [h2(EditorInsertTableGrid, {
-          open: true,
-          onInsert: (detail) => {
-            instance?.chain().focus().insertTable(detail).run();
-            tablePickerOpen.value = false;
-          }
-        })]),
-        slash.active && slash.items.length > 0 ? h2(EditorSlashMenu, {
-          open: true,
-          query: slash.query,
-          items: managedSlashMenuItems(slash.items),
-          selectedIndex: slash.selectedIndex,
-          anchorRect: managedMenuAnchorRect(slash.rect),
-          onHighlight: ({ index }) => {
-            slash.selectedIndex = index;
-          },
-          onSelect: ({ index }) => {
-            slash.select?.(index);
-          }
-        }) : null,
-        mention.active && (mention.loading || mention.items.length > 0) ? h2(EditorMentionMenu, {
-          id: mentionMenuId,
-          open: true,
-          query: mention.query,
-          items: mention.items,
-          selectedIndex: mention.selectedIndex,
-          anchorRect: managedMenuAnchorRect(mention.rect),
-          loading: mention.loading,
-          onHighlight: ({ index }) => {
-            mention.selectedIndex = index;
-            mention.highlight?.(index);
-          },
-          onSelect: ({ index }) => {
-            mention.select?.(index);
-          }
-        }) : null,
-        tableUi.toolbarOpen ? h2("div", {
-          ref: tableToolbarShell,
-          class: "looma-editor__table-toolbar-shell",
-          style: tableUi.toolbarStyle
-        }, [h2(EditorTableToolbar, tableProps)]) : null,
-        tableUi.overlayOpen ? h2("div", {
-          ref: tableOverlayShell,
-          class: "looma-editor__table-overlay-shell",
-          style: tableUi.overlayStyle,
-          onMousedown: onTableOverlayMouseDown,
-          onPointerleave: onTableOverlayPointerLeave
-        }, [h2(EditorTableOverlay, {
-          open: true,
-          rows: tableUi.rows,
-          cols: tableUi.cols,
-          geometry: tableUi.geometry,
-          onAction: runOverlayAction
-        })]) : null,
-        tableUi.menuOpen ? h2("div", {
-          ref: tableMenuShell,
-          class: "looma-editor__table-menu-shell",
-          style: tableUi.menuStyle
-        }, [h2(EditorTableContextMenu, tableProps)]) : null
-      ]);
-    };
-  }
+/**
+* Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
+* with declarative menus, image delivery, and table interaction chrome.
+*
+* @ownership The component owns its Tiptap instance and transient UI state;
+* callers own controlled `modelValue`, extension instances, and host services.
+* @lifecycle Mount creates one editor and browser listener set, prop watchers
+* synchronize external state, and unmount cancels frames/listeners and destroys
+* the editor-owned resources.
+* @failure Upload and responsive-rendition failures are emitted to the host;
+* durable document content is retained or left unchanged for recovery.
+*/
+var LoomaEditor = defineComponent({
+	name: "LoomaEditor",
+	inheritAttrs: false,
+	props: {
+		modelValue: {
+			type: Object,
+			default: () => ({ ...EMPTY_DOCUMENT })
+		},
+		editable: {
+			type: Boolean,
+			default: true
+		},
+		placeholder: {
+			type: String,
+			default: "Type “/” for commands, or start writing…"
+		},
+		extensions: {
+			type: Array,
+			default: () => []
+		},
+		mentionItems: {
+			type: Array,
+			default: () => []
+		},
+		mentionProvider: {
+			type: Function,
+			default: void 0
+		},
+		mentionLimit: {
+			type: Number,
+			default: DEFAULT_MENTION_RESULT_LIMIT
+		},
+		uploadImage: {
+			type: Function,
+			default: void 0
+		},
+		resolveImageAttributes: {
+			type: Function,
+			default: void 0
+		},
+		toolbarMode: {
+			type: String,
+			default: "bubble"
+		}
+	},
+	emits: {
+		"update:modelValue": (_value) => true,
+		update: (_value) => true,
+		ready: (_editor) => true,
+		uploadError: (_error, _file) => true,
+		imageActivate: (_detail) => true,
+		imageRenditionError: (_detail) => true
+	},
+	setup(props, { attrs, emit, expose }) {
+		const root = ref(null);
+		const fileInput = ref(null);
+		const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const tableToolbarShell = ref(null);
+		const tableOverlayShell = ref(null);
+		const tableMenuShell = ref(null);
+		const mobileToolbarShell = ref(null);
+		const dragOver = ref(false);
+		const uploading = ref(false);
+		const failedUpload = ref(null);
+		const tablePickerOpen = ref(false);
+		const mobileToolbarStyle = ref({});
+		const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
+		const editorFocused = ref(false);
+		const editorStateVersion = ref(0);
+		const mobileToolbarMode = ref("formatting");
+		let dragLeaveTimer = null;
+		let tableResizeActive = false;
+		let tableInteractionActive = false;
+		let mobileTableControlsDismissed = false;
+		let hoveredTableCell = null;
+		let overlayTableElement = null;
+		let tablePointerFrame = null;
+		const slash = reactive({
+			active: false,
+			items: [],
+			selectedIndex: 0,
+			query: "",
+			rect: null,
+			select: null
+		});
+		const mention = reactive({
+			active: false,
+			items: [],
+			selectedIndex: 0,
+			query: "",
+			rect: null,
+			loading: false,
+			highlight: null,
+			select: null
+		});
+		const tableUi = reactive({
+			toolbarOpen: false,
+			overlayOpen: false,
+			menuOpen: false,
+			alignment: "left",
+			background: null,
+			rows: 0,
+			cols: 0,
+			geometry: null,
+			toolbarStyle: {},
+			overlayStyle: {},
+			menuStyle: {},
+			capabilities: { ...EMPTY_CAPABILITIES }
+		});
+		const slashExtension = createLoomaSlashCommandExtension({
+			onOpenImagePicker: () => fileInput.value?.click(),
+			onStateChange: (state) => {
+				Object.assign(slash, state);
+			}
+		});
+		const mentionMenuId = `looma-editor-mention-menu-${++editorInstanceSequence}`;
+		const mentionExtension = props.extensions.some((extension) => extension.name === "mention") ? null : createLoomaMentionExtension({
+			limit: props.mentionLimit,
+			menuId: mentionMenuId,
+			items: async (query, context) => {
+				if (props.mentionProvider) return await props.mentionProvider(query, context);
+				return props.mentionItems;
+			},
+			onStateChange: (state) => {
+				Object.assign(mention, state);
+			}
+		});
+		const imageDelivery = createLoomaImageDeliveryController({ resolveAttributes: () => props.resolveImageAttributes });
+		let lastFocusedSelection = null;
+		const rememberSelection = (instance) => {
+			if (!instance.isFocused) return;
+			const selection = instance.view.state.selection;
+			lastFocusedSelection = {
+				bookmark: selection.getBookmark(),
+				from: selection.from,
+				to: selection.to,
+				text: selection instanceof TextSelection
+			};
+		};
+		const editor = useEditor({
+			extensions: [
+				...getDefaultEditorExtensions({
+					placeholder: props.placeholder,
+					mention: mentionExtension ?? false
+				}),
+				imageDelivery.extension,
+				slashExtension,
+				...props.extensions
+			],
+			content: props.modelValue,
+			editable: props.editable,
+			onCreate: ({ editor: instance }) => emit("ready", instance),
+			onFocus: ({ editor: instance }) => rememberSelection(instance),
+			onSelectionUpdate: ({ editor: instance }) => rememberSelection(instance),
+			onTransaction: () => {
+				editorStateVersion.value += 1;
+			},
+			onUpdate: ({ editor: instance }) => {
+				const value = instance.getJSON();
+				emit("update:modelValue", value);
+				emit("update", value);
+			}
+		});
+		watch(() => props.editable, (editable) => editor.value?.setEditable(editable));
+		watch(() => props.resolveImageAttributes, () => {
+			const instance = editor.value;
+			if (instance) imageDelivery.reset(instance);
+		});
+		watch(() => props.modelValue, (value) => {
+			const instance = editor.value;
+			if (!instance || sameDocument(instance.getJSON(), value)) return;
+			const wasFocused = instance.isFocused;
+			const previousSelection = lastFocusedSelection ?? {
+				bookmark: instance.view.state.selection.getBookmark(),
+				from: instance.view.state.selection.from,
+				to: instance.view.state.selection.to,
+				text: instance.view.state.selection instanceof TextSelection
+			};
+			if (!wasFocused) {
+				instance.commands.setContent(value, false);
+				return;
+			}
+			instance.chain().setContent(value, false).command(({ tr }) => {
+				try {
+					tr.setSelection(previousSelection.text ? TextSelection.create(tr.doc, previousSelection.from, previousSelection.to) : previousSelection.bookmark.resolve(tr.doc));
+				} catch {
+					const max = tr.doc.content.size;
+					const from = Math.max(1, Math.min(previousSelection.from, max));
+					const to = Math.max(from, Math.min(previousSelection.to, max));
+					tr.setSelection(TextSelection.create(tr.doc, from, to));
+				}
+				return true;
+			}).run();
+			instance.view.focus();
+			rememberSelection(instance);
+		}, { deep: true });
+		const closeTableUi = () => {
+			tableUi.toolbarOpen = false;
+			tableUi.overlayOpen = false;
+			tableUi.menuOpen = false;
+			tableUi.alignment = "left";
+			tableUi.background = null;
+			tableUi.geometry = null;
+			tableUi.capabilities = { ...EMPTY_CAPABILITIES };
+			overlayTableElement = null;
+			mobileTableControlsDismissed = false;
+			mobileToolbarMode.value = "formatting";
+		};
+		const updateMobileViewport = () => {
+			mobile.value = window.innerWidth <= 767;
+			if (!mobile.value) {
+				mobileToolbarStyle.value = {};
+				return;
+			}
+			nextTick(() => {
+				const viewport = getVisualViewportRect(window);
+				const toolbarHeight = mobileToolbarShell.value?.getBoundingClientRect().height || 56;
+				mobileToolbarStyle.value = {
+					left: `${viewport.left}px`,
+					top: `${Math.max(viewport.top, viewport.bottom - toolbarHeight)}px`,
+					width: `${viewport.width}px`
+				};
+			});
+		};
+		const updateTableUi = () => {
+			const instance = editor.value;
+			if (!instance || !props.editable || !instance.isFocused && !tableInteractionActive && !hoveredTableCell) {
+				closeTableUi();
+				return;
+			}
+			const state = getActiveTableUiState(instance);
+			const selectedTable = selectedTableElement(instance);
+			const table = hoveredTableCell?.closest("table") ?? null ?? selectedTable;
+			if (!table) {
+				closeTableUi();
+				return;
+			}
+			const selectedTableIsActive = state.active && selectedTable === table;
+			overlayTableElement = table;
+			if (selectedTableIsActive && !mobileTableControlsDismissed) mobileToolbarMode.value = "table";
+			const rect = table.getBoundingClientRect();
+			const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
+			const toolbarLeft = Math.min(Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2), Math.max(12, window.innerWidth - maxToolbarWidth - 12));
+			tableUi.toolbarOpen = selectedTableIsActive && state.showToolbar && !mobile.value;
+			tableUi.overlayOpen = !mobile.value;
+			tableUi.alignment = selectedTableIsActive ? state.cellAlignment : "left";
+			tableUi.background = selectedTableIsActive ? state.cellBackground : null;
+			tableUi.capabilities = selectedTableIsActive ? state.capabilities : { ...EMPTY_CAPABILITIES };
+			const selectedCell = selectedTableIsActive ? selectedTableCellElement(instance) : null;
+			const geometry = measureTableOverlayGeometry(table, selectedCell, hoveredTableCell && table.contains(hoveredTableCell) ? hoveredTableCell : null);
+			tableUi.rows = Math.max(0, geometry.rowBoundaries.length - 1);
+			tableUi.cols = Math.max(0, geometry.columnBoundaries.length - 1);
+			tableUi.geometry = geometry;
+			tableUi.toolbarStyle = {
+				top: `${rect.top > 76 ? rect.top - 52 : rect.bottom + 12}px`,
+				left: `${toolbarLeft}px`,
+				maxWidth: `${maxToolbarWidth}px`
+			};
+			tableUi.overlayStyle = {
+				top: `${rect.top}px`,
+				left: `${rect.left}px`,
+				width: `${rect.width}px`,
+				height: `${rect.height}px`
+			};
+		};
+		const onEditorFocus = () => {
+			editorFocused.value = true;
+			updateTableUi();
+			updateMobileViewport();
+		};
+		const onEditorBlur = () => {
+			updateTableUi();
+			setTimeout(() => {
+				if (!tableInteractionActive && !editor.value?.isFocused) editorFocused.value = false;
+			}, 0);
+		};
+		const bindEditorUi = (instance) => {
+			if (!instance) return;
+			instance.on("selectionUpdate", updateTableUi);
+			instance.on("transaction", updateTableUi);
+			instance.on("focus", onEditorFocus);
+			instance.on("blur", onEditorBlur);
+			nextTick(updateTableUi);
+		};
+		const unbindEditorUi = (instance) => {
+			if (!instance) return;
+			instance.off("selectionUpdate", updateTableUi);
+			instance.off("transaction", updateTableUi);
+			instance.off("focus", onEditorFocus);
+			instance.off("blur", onEditorBlur);
+		};
+		watch(editor, (instance, previous) => {
+			unbindEditorUi(previous);
+			bindEditorUi(instance);
+		}, { immediate: true });
+		const onViewportChange = () => {
+			updateMobileViewport();
+			updateTableUi();
+			tableUi.menuOpen = false;
+		};
+		const onDocumentPointerDown = (event) => {
+			const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+			const inElement = (element) => Boolean(element && (path.includes(element) || event.target instanceof Node && element.contains(event.target)));
+			const inTableUi = inElement(tableToolbarShell.value) || inElement(tableOverlayShell.value) || inElement(tableMenuShell.value) || inElement(mobileToolbarShell.value);
+			tableInteractionActive = inTableUi;
+			if (inTableUi) setTimeout(() => {
+				tableInteractionActive = false;
+			}, 0);
+			if ((tableUi.toolbarOpen || tableUi.overlayOpen || tableUi.menuOpen) && !inElement(root.value) && !inTableUi) closeTableUi();
+		};
+		const onResizePointerDown = (event) => {
+			tableResizeActive = event.target instanceof HTMLElement && event.target.classList.contains("column-resize-handle");
+		};
+		const onResizePointerUp = () => {
+			if (!tableResizeActive) return;
+			tableResizeActive = false;
+			requestAnimationFrame(() => {
+				const instance = editor.value;
+				const table = instance ? selectedTableElement(instance) : null;
+				if (instance && table) normalizeActiveTableColumnWidths(instance, table);
+				nextTick(updateTableUi);
+			});
+		};
+		const imageForElement = (element) => {
+			const instance = editor.value;
+			if (!instance) return null;
+			try {
+				const position = instance.view.posAtDOM(element, 0);
+				const node = instance.state.doc.nodeAt(position);
+				return node?.type.name === "image" ? imageDescriptorFromAttrs(node.attrs) : null;
+			} catch {
+				return null;
+			}
+		};
+		const imageElementForEvent = (event) => {
+			const element = event.target instanceof Element ? event.target.closest("img[data-looma-image]") : null;
+			return element && root.value?.contains(element) ? element : null;
+		};
+		const activateImage = (element, trigger) => {
+			const image = imageForElement(element);
+			if (image) emit("imageActivate", {
+				...image,
+				trigger
+			});
+		};
+		const onImageClick = (event) => {
+			const element = imageElementForEvent(event);
+			if (element && !props.editable) activateImage(element, "pointer");
+		};
+		const onImageDoubleClick = (event) => {
+			const element = imageElementForEvent(event);
+			if (element && props.editable) activateImage(element, "pointer");
+		};
+		const onImageKeyDown = (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			const element = imageElementForEvent(event);
+			if (!element) return;
+			event.preventDefault();
+			activateImage(element, "keyboard");
+		};
+		const onImageError = (event) => {
+			const element = imageElementForEvent(event);
+			if (!element || element.dataset.loomaRendition !== "true") return;
+			const image = imageForElement(element);
+			if (!image) return;
+			const instance = editor.value;
+			if (!instance || !imageDelivery.markRenditionFailed(instance, image.src)) return;
+			emit("imageRenditionError", {
+				...image,
+				trigger: "programmatic"
+			});
+		};
+		onMounted(() => {
+			updateMobileViewport();
+			window.addEventListener("resize", onViewportChange);
+			window.addEventListener("scroll", onViewportChange, true);
+			window.visualViewport?.addEventListener("resize", onViewportChange);
+			window.visualViewport?.addEventListener("scroll", onViewportChange);
+			document.addEventListener("pointerdown", onDocumentPointerDown, true);
+			document.addEventListener("pointerdown", onResizePointerDown, true);
+			document.addEventListener("pointerup", onResizePointerUp, true);
+			root.value?.addEventListener("error", onImageError, true);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", onViewportChange);
+			window.removeEventListener("scroll", onViewportChange, true);
+			window.visualViewport?.removeEventListener("resize", onViewportChange);
+			window.visualViewport?.removeEventListener("scroll", onViewportChange);
+			document.removeEventListener("pointerdown", onDocumentPointerDown, true);
+			document.removeEventListener("pointerdown", onResizePointerDown, true);
+			document.removeEventListener("pointerup", onResizePointerUp, true);
+			root.value?.removeEventListener("error", onImageError, true);
+			unbindEditorUi(editor.value);
+			if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
+			if (tablePointerFrame !== null) cancelAnimationFrame(tablePointerFrame);
+		});
+		const insertImage = async (file) => {
+			if (!props.uploadImage || !editor.value) return;
+			uploading.value = true;
+			try {
+				const result = await props.uploadImage(file);
+				const image = typeof result === "string" ? { url: result } : result;
+				const width = normalizeImageDimension(image.width);
+				const height = normalizeImageDimension(image.height);
+				editor.value.chain().focus().insertContent(imageUploadContent({
+					src: image.url,
+					alt: image.alt ?? file.name,
+					...width ? { width } : {},
+					...height ? { height } : {},
+					...image.responsive === true ? { responsive: true } : {}
+				})).run();
+				failedUpload.value = null;
+			} catch (error) {
+				failedUpload.value = { file };
+				emit("uploadError", error, file);
+			} finally {
+				uploading.value = false;
+			}
+		};
+		const onFileChange = async (event) => {
+			const input = event.target;
+			const files = Array.from(input.files ?? []);
+			input.value = "";
+			for (const file of files) await insertImage(file);
+		};
+		const onDrop = async (event) => {
+			event.preventDefault();
+			dragOver.value = false;
+			if (!props.editable) return;
+			const files = Array.from(event.dataTransfer?.files ?? []).filter((file) => file.type.startsWith("image/"));
+			for (const file of files) await insertImage(file);
+		};
+		const onContextMenu = (event) => {
+			const instance = editor.value;
+			const cell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
+			if (!props.editable || !instance || !(cell instanceof HTMLElement)) {
+				tableUi.menuOpen = false;
+				return;
+			}
+			event.preventDefault();
+			if (selectedTableCellElement(instance) !== cell && !cell.classList.contains("selectedCell")) instance.chain().focus().setTextSelection(instance.view.posAtDOM(cell, 0) + 1).run();
+			updateTableUi();
+			tableUi.menuOpen = true;
+			tableUi.menuStyle = {
+				top: `${event.clientY}px`,
+				left: `${event.clientX}px`
+			};
+		};
+		const runTableAction = (detail) => {
+			if (!editor.value) return;
+			handleTableAction(editor.value, detail);
+			tableUi.menuOpen = false;
+			nextTick(updateTableUi);
+		};
+		const runOverlayAction = (detail) => {
+			const instance = editor.value;
+			if (!instance) return;
+			const table = overlayTableElement ?? selectedTableElement(instance);
+			if (!table) return;
+			const targetCell = "rowIndex" in detail ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) : resolveTableCellAt(table, detail.action.startsWith("add-row") ? Math.max(0, detail.boundaryIndex - 1) : 0, detail.action.startsWith("add-column") ? Math.max(0, detail.boundaryIndex - 1) : 0);
+			if (targetCell && selectedTableElement(instance) !== table) instance.chain().focus().setTextSelection(instance.view.posAtDOM(targetCell, 0) + 1).run();
+			if (detail.action === "open-cell-menu") {
+				const selectedCell = selectedTableCellElement(instance);
+				const cell = table ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) ?? selectedCell : selectedCell;
+				if (cell && selectedCell !== cell && !cell.classList.contains("selectedCell")) instance.chain().focus().setTextSelection(instance.view.posAtDOM(cell, 0) + 1).run();
+				else instance.commands.focus();
+				updateTableUi();
+				tableUi.menuStyle = {
+					top: `${detail.anchor.bottom + 4}px`,
+					left: `${detail.anchor.right}px`
+				};
+				tableUi.menuOpen = true;
+				return;
+			}
+			handleTableOverlayAction(instance, detail);
+			nextTick(updateTableUi);
+		};
+		const onEditorPointerOver = (event) => {
+			const cell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
+			if (!cell) return;
+			if (cell === hoveredTableCell) return;
+			hoveredTableCell = cell;
+			if (tablePointerFrame !== null) return;
+			tablePointerFrame = requestAnimationFrame(() => {
+				tablePointerFrame = null;
+				updateTableUi();
+			});
+		};
+		const onEditorPointerOut = (event) => {
+			const fromCell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
+			if (!fromCell || fromCell !== hoveredTableCell) return;
+			const next = event.relatedTarget;
+			if ((next instanceof HTMLElement ? next.closest("td, th") : null) || next instanceof Node && tableOverlayShell.value?.contains(next)) return;
+			hoveredTableCell = null;
+			nextTick(updateTableUi);
+		};
+		const onEditorPointerLeave = (event) => {
+			const next = event.relatedTarget;
+			if (next instanceof Node && (tableOverlayShell.value?.contains(next) || tableToolbarShell.value?.contains(next) || tableMenuShell.value?.contains(next))) return;
+			if (!hoveredTableCell) return;
+			hoveredTableCell = null;
+			nextTick(updateTableUi);
+		};
+		const onTableOverlayPointerLeave = (event) => {
+			const next = event.relatedTarget;
+			if (next instanceof Node && (root.value?.contains(next) || tableToolbarShell.value?.contains(next) || tableMenuShell.value?.contains(next))) return;
+			if (!hoveredTableCell) return;
+			hoveredTableCell = null;
+			nextTick(updateTableUi);
+		};
+		const onTableOverlayMouseDown = (event) => {
+			if (event.target instanceof Element ? event.target.closest("button[data-action]") : null) event.preventDefault();
+		};
+		const commandButton = (label, icon, active, disabled, run) => {
+			const syncNativeDisabled = (vnode) => {
+				if (!(vnode.el instanceof Element)) return;
+				const button = vnode.el instanceof HTMLButtonElement ? vnode.el : vnode.el.querySelector("button");
+				if (button) button.disabled = disabled;
+			};
+			return h(IconButton, {
+				class: "looma-editor__toolbar-button",
+				label,
+				title: label,
+				size: "sm",
+				variant: active ? "solid" : "ghost",
+				disabled,
+				"data-active": active ? "true" : "false",
+				onVnodeMounted: syncNativeDisabled,
+				onVnodeUpdated: syncNativeDisabled,
+				onClick: run
+			}, () => loomaIcon(icon));
+		};
+		const renderToolbar = (instance, floating = true) => {
+			const buttons = [
+				commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run()),
+				commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run()),
+				commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run()),
+				commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run()),
+				commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run()),
+				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run()),
+				h("span", {
+					class: "divider",
+					"aria-hidden": "true"
+				}),
+				commandButton("Heading 1", "heading-1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run()),
+				commandButton("Heading 2", "heading-2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run()),
+				commandButton("Heading 3", "heading-3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run()),
+				commandButton("Bullet list", "list", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run()),
+				commandButton("Numbered list", "list-ordered", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run()),
+				commandButton("Checklist", "list-todo", instance.isActive("taskList"), false, () => instance.chain().focus().toggleTaskList().run()),
+				commandButton("Blockquote", "quote", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run()),
+				commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run()),
+				commandButton("Divider", "minus", false, !instance.can().setHorizontalRule(), () => instance.chain().focus().setHorizontalRule().run()),
+				h("span", {
+					class: "divider",
+					"aria-hidden": "true"
+				}),
+				h(IconButton, {
+					id: tablePickerAnchorId,
+					class: "looma-editor__toolbar-button",
+					label: "Insert table",
+					title: "Insert table",
+					size: "sm",
+					variant: tablePickerOpen.value ? "solid" : "ghost",
+					"aria-expanded": tablePickerOpen.value ? "true" : "false",
+					onClick: () => {
+						tablePickerOpen.value = !tablePickerOpen.value;
+					}
+				}, () => loomaIcon("table")),
+				commandButton(uploading.value ? "Uploading image" : "Insert image", "image", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
+				h("span", {
+					class: "divider",
+					"aria-hidden": "true"
+				}),
+				commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
+				commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run())
+			];
+			return h(EditorToolbar, { floating }, () => buttons);
+		};
+		const focus = (position = "start") => {
+			editor.value?.commands.focus(position);
+		};
+		expose({
+			editor,
+			focus
+		});
+		return () => {
+			const instance = editor.value;
+			editorStateVersion.value;
+			const tableActions = [
+				"align-left",
+				"align-center",
+				"align-right",
+				"background-none",
+				"background-gray",
+				"background-yellow",
+				"background-blue",
+				"background-green",
+				"background-red",
+				"clear-cells",
+				...tableUi.capabilities.canAddRowBefore ? ["add-row-before"] : [],
+				...tableUi.capabilities.canAddRowAfter ? ["add-row-after"] : [],
+				...tableUi.capabilities.canAddColumnBefore ? ["add-column-before"] : [],
+				...tableUi.capabilities.canAddColumnAfter ? ["add-column-after"] : [],
+				...tableUi.capabilities.canMergeCells ? ["merge-cells"] : [],
+				...tableUi.capabilities.canSplitCell ? ["split-cell"] : [],
+				...tableUi.capabilities.canDeleteRow ? ["delete-row"] : [],
+				...tableUi.capabilities.canDeleteColumn ? ["delete-column"] : [],
+				...tableUi.capabilities.canDeleteTable ? ["delete-table"] : []
+			];
+			const tableProps = {
+				open: true,
+				cellAlignment: tableUi.alignment,
+				cellBackground: tableUi.background ?? void 0,
+				actions: tableActions,
+				onAction: runTableAction
+			};
+			return h("div", {
+				...attrs,
+				ref: root,
+				class: [
+					"looma-editor",
+					attrs.class,
+					{
+						"looma-editor--readonly": !props.editable,
+						"looma-editor--drag-over": dragOver.value
+					}
+				],
+				onContextmenu: onContextMenu,
+				onPointerover: onEditorPointerOver,
+				onPointerout: onEditorPointerOut,
+				onPointerleave: onEditorPointerLeave,
+				onDragover: (event) => {
+					event.preventDefault();
+					if (props.editable && Array.from(event.dataTransfer?.types ?? []).includes("Files")) dragOver.value = true;
+				},
+				onDragleave: () => {
+					if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
+					dragLeaveTimer = setTimeout(() => {
+						dragOver.value = false;
+					}, 100);
+				},
+				onDrop,
+				onClick: onImageClick,
+				onDblclick: onImageDoubleClick,
+				onKeydown: onImageKeyDown
+			}, [
+				instance && props.editable && !mobile.value && props.toolbarMode === "bubble" ? h(BubbleMenu, {
+					editor: instance,
+					pluginKey: "looma-text-formatting-menu",
+					shouldShow: ({ editor: menuEditor, from, to }) => shouldShowTextFormattingToolbar(menuEditor, from, to),
+					tippyOptions: {
+						appendTo: () => root.value ?? document.body,
+						duration: 100,
+						maxWidth: "none",
+						placement: "top"
+					}
+				}, { default: () => renderToolbar(instance) }) : null,
+				instance && props.editable && !mobile.value && props.toolbarMode === "sticky" ? h("div", {
+					class: "looma-editor__sticky-toolbar-shell",
+					role: "toolbar",
+					"aria-label": "Editor tools"
+				}, [renderToolbar(instance, false)]) : null,
+				instance ? h(EditorContent, { editor: instance }) : null,
+				instance && props.editable && mobile.value && editorFocused.value ? h("div", {
+					ref: mobileToolbarShell,
+					class: "looma-editor__mobile-toolbar-shell",
+					"data-mode": mobileToolbarMode.value,
+					style: mobileToolbarStyle.value,
+					role: "toolbar",
+					"aria-label": mobileToolbarMode.value === "table" ? "Table editing" : "Text formatting"
+				}, mobileToolbarMode.value === "table" ? [h("button", {
+					class: "looma-editor__mobile-toolbar-back",
+					type: "button",
+					"aria-label": "Formatting tools",
+					onClick: () => {
+						mobileTableControlsDismissed = true;
+						mobileToolbarMode.value = "formatting";
+						editor.value?.commands.focus();
+						nextTick(updateMobileViewport);
+					}
+				}, [loomaIcon("chevron-left"), h("span", "Formatting")]), h(EditorTableToolbar, tableProps)] : [renderToolbar(instance)]) : null,
+				h("input", {
+					ref: fileInput,
+					class: "looma-editor__file-input",
+					type: "file",
+					accept: "image/jpeg,image/png,image/gif,image/webp,image/svg+xml",
+					multiple: true,
+					tabindex: -1,
+					"aria-hidden": "true",
+					onChange: onFileChange
+				}),
+				failedUpload.value ? h("div", {
+					class: "looma-editor__upload-error",
+					role: "alert"
+				}, [h("span", "Couldn’t upload image."), h("button", {
+					type: "button",
+					disabled: uploading.value,
+					onClick: () => {
+						const attempt = failedUpload.value;
+						if (attempt) insertImage(attempt.file);
+					}
+				}, uploading.value ? "Retrying…" : "Retry")]) : null,
+				dragOver.value ? h("div", {
+					class: "looma-editor__drop-overlay",
+					"aria-hidden": "true"
+				}, [loomaIcon("image"), h("span", "Drop image to upload")]) : null,
+				h(Popover, {
+					class: "looma-editor__table-picker-popover",
+					open: tablePickerOpen.value,
+					for: tablePickerAnchorId,
+					placement: mobile.value ? "top-start" : "bottom-start",
+					onClose: () => {
+						tablePickerOpen.value = false;
+					}
+				}, () => [h(EditorInsertTableGrid, {
+					open: true,
+					onInsert: (detail) => {
+						instance?.chain().focus().insertTable(detail).run();
+						tablePickerOpen.value = false;
+					}
+				})]),
+				slash.active && slash.items.length > 0 ? h(EditorSlashMenu, {
+					open: true,
+					query: slash.query,
+					items: managedSlashMenuItems(slash.items),
+					selectedIndex: slash.selectedIndex,
+					anchorRect: managedMenuAnchorRect(slash.rect),
+					onHighlight: ({ index }) => {
+						slash.selectedIndex = index;
+					},
+					onSelect: ({ index }) => {
+						slash.select?.(index);
+					}
+				}) : null,
+				mention.active && (mention.loading || mention.items.length > 0) ? h(EditorMentionMenu, {
+					id: mentionMenuId,
+					open: true,
+					query: mention.query,
+					items: mention.items,
+					selectedIndex: mention.selectedIndex,
+					anchorRect: managedMenuAnchorRect(mention.rect),
+					loading: mention.loading,
+					onHighlight: ({ index }) => {
+						mention.selectedIndex = index;
+						mention.highlight?.(index);
+					},
+					onSelect: ({ index }) => {
+						mention.select?.(index);
+					}
+				}) : null,
+				tableUi.toolbarOpen ? h("div", {
+					ref: tableToolbarShell,
+					class: "looma-editor__table-toolbar-shell",
+					style: tableUi.toolbarStyle
+				}, [h(EditorTableToolbar, tableProps)]) : null,
+				tableUi.overlayOpen ? h("div", {
+					ref: tableOverlayShell,
+					class: "looma-editor__table-overlay-shell",
+					style: tableUi.overlayStyle,
+					onMousedown: onTableOverlayMouseDown,
+					onPointerleave: onTableOverlayPointerLeave
+				}, [h(EditorTableOverlay, {
+					open: true,
+					geometry: tableUi.geometry,
+					onAction: runOverlayAction
+				})]) : null,
+				tableUi.menuOpen ? h("div", {
+					ref: tableMenuShell,
+					class: "looma-editor__table-menu-shell",
+					style: tableUi.menuStyle
+				}, [h(EditorTableContextMenu, tableProps)]) : null
+			]);
+		};
+	}
 });
-export {
-  EDITOR_ADAPTER_COMPONENT_TAG_MAP,
-  EditorInsertTableGrid,
-  EditorMentionMenu,
-  EditorSlashMenu,
-  EditorTableContextMenu,
-  EditorTableOverlay,
-  EditorTableToolbar,
-  EditorToolbar,
-  LoomaEditor
-};
+//#endregion
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };