@threadlabs/looma 0.23.20 → 0.23.22

package/vue/editor/index.js

@@ -1,12 +1,13 @@
-import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from "vue";
-import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, resolveTableCellAt, shouldShowTextFormattingToolbar, siteRelativeHref } from "@threadlabs/looma/editor";
-import { Button, Card, Checkbox, Cluster, Combobox, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, IconButton, Input, InputGroup, Menu, MenuItem, Popover, ScrollArea, SearchResultRow, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
+import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt, shouldShowTextFormattingToolbar, siteRelativeHref } from "@threadlabs/looma/editor";
+import { Button, Card, Checkbox, Cluster, Combobox, Disclosure, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, EditorToolbar as EditorToolbar$1, FormField, Icon, IconButton, Image, Input, InputGroup, List, Menu, MenuItem, Popover, ScrollArea, SearchResultRow, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
 import { createLowlight } from "lowlight";
-import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
-import { Extension } from "@tiptap/core";
+import { NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { Extension, Node as Node$1, getText, getTextSerializersFromSchema, mergeAttributes, nodeInputRule } from "@tiptap/core";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 export * from "@threadlabs/looma/editor";
 //#region src/vue/editor/primitives.ts
 /** Each Vue editor component's element tag, for tooling that enumerates them. */
@@ -28,13 +29,107 @@ function announceOverlayOpen(document, id) {
 	document.dispatchEvent(new CustomEvent("ui-overlay-open", { detail: { id } }));
 }
 //#endregion
+//#region ../../node_modules/.pnpm/@tiptap+extension-image@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-image/dist/index.js
+/**
+* Matches an image to a ![image](src "title") on input.
+*/
+var inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+/**
+* This extension allows you to insert images.
+* @see https://www.tiptap.dev/api/nodes/image
+*/
+var Image$1 = Node$1.create({
+	name: "image",
+	addOptions() {
+		return {
+			inline: false,
+			allowBase64: false,
+			HTMLAttributes: {}
+		};
+	},
+	inline() {
+		return this.options.inline;
+	},
+	group() {
+		return this.options.inline ? "inline" : "block";
+	},
+	draggable: true,
+	addAttributes() {
+		return {
+			src: { default: null },
+			alt: { default: null },
+			title: { default: null }
+		};
+	},
+	parseHTML() {
+		return [{ tag: this.options.allowBase64 ? "img[src]" : "img[src]:not([src^=\"data:\"])" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return ["img", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+	},
+	addCommands() {
+		return { setImage: (options) => ({ commands }) => {
+			return commands.insertContent({
+				type: this.name,
+				attrs: options
+			});
+		} };
+	},
+	addInputRules() {
+		return [nodeInputRule({
+			find: inputRegex,
+			type: this.type,
+			getAttributes: (match) => {
+				const [, , alt, src, title] = match;
+				return {
+					src,
+					alt,
+					title
+				};
+			}
+		})];
+	}
+});
+//#endregion
+//#region src/editor/extensions/image.ts
+/** Accepts only positive, integral CSS-pixel dimensions. */
+function normalizeImageDimension(value) {
+	return typeof value === "number" && Number.isSafeInteger(value) && value > 0 ? value : void 0;
+}
+/** Unknown legacy values retain ordinary block placement. */
+function normalizeImagePlacement(value) {
+	return value === "center" || value === "wrap-left" || value === "wrap-right" ? value : "block";
+}
+Image$1.extend({ addAttributes() {
+	return {
+		...this.parent?.(),
+		width: {
+			default: null,
+			parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("width"))) ?? null,
+			renderHTML: (attrs) => normalizeImageDimension(attrs.width) ? { width: attrs.width } : {}
+		},
+		height: {
+			default: null,
+			parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("height"))) ?? null,
+			renderHTML: (attrs) => normalizeImageDimension(attrs.height) ? { height: attrs.height } : {}
+		},
+		responsive: {
+			default: null,
+			parseHTML: (element) => element.hasAttribute("data-looma-responsive") || null,
+			renderHTML: (attrs) => attrs.responsive === true ? { "data-looma-responsive": "" } : {}
+		},
+		placement: {
+			default: "block",
+			parseHTML: (element) => normalizeImagePlacement(element.getAttribute("data-placement")),
+			renderHTML: (attrs) => normalizeImagePlacement(attrs.placement) === "block" ? {} : { "data-placement": normalizeImagePlacement(attrs.placement) }
+		}
+	};
+} });
+//#endregion
 //#region src/vue/editor/image-delivery.ts
 function optionalString(value) {
 	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;
-}
 function imageDescriptorFromAttrs(attrs) {
 	const src = optionalString(attrs.src);
 	if (!src) return null;
@@ -49,13 +144,15 @@ function imageDescriptorFromAttrs(attrs) {
 		...attrs.responsive === true ? { responsive: true } : {}
 	};
 }
-function transientAttributes(resolver, image) {
+function transientAttributes(resolver, image, editable) {
 	const attributes = {
-		"aria-label": image.alt ? `Open image: ${image.alt}` : "Open image",
+		...editable ? {} : {
+			"aria-label": image.alt ? `Open image: ${image.alt}` : "Open image",
+			role: "button"
+		},
 		"data-looma-image": "",
-		role: "button",
 		src: image.src,
-		tabindex: "0"
+		tabindex: editable ? "-1" : "0"
 	};
 	if (!image.responsive || !resolver) return attributes;
 	let rendition;
@@ -85,7 +182,7 @@ function transientAttributes(resolver, image) {
 	if (src && src !== image.src || srcset) attributes["data-looma-rendition"] = "true";
 	return attributes;
 }
-function createDecorations(doc, resolver, failedRenditions) {
+function createDecorations(doc, resolver, failedRenditions, editable) {
 	const decorations = [];
 	const currentSources = /* @__PURE__ */ new Set();
 	doc.descendants((node, position) => {
@@ -93,7 +190,7 @@ function createDecorations(doc, resolver, failedRenditions) {
 		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)));
+		decorations.push(Decoration.node(position, position + node.nodeSize, {}, { loomaImageAttributes: transientAttributes(failedRenditions.has(image.src) ? void 0 : resolver, image, editable) }));
 	});
 	for (const src of failedRenditions) if (!currentSources.has(src)) failedRenditions.delete(src);
 	return DecorationSet.create(doc, decorations);
@@ -127,36 +224,14 @@ function createLoomaImageDeliveryController(options) {
 	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),
+						init: (_, state) => createDecorations(state.doc, options.resolveAttributes(), failedRenditions, options.isEditable()),
 						apply: (transaction, previous) => {
 							if (!transaction.getMeta(pluginKey) && !transactionChangesImages(transaction)) return previous.map(transaction.mapping, transaction.doc);
-							return createDecorations(transaction.doc, options.resolveAttributes(), failedRenditions);
+							return createDecorations(transaction.doc, options.resolveAttributes(), failedRenditions, options.isEditable());
 						}
 					},
 					props: { decorations: (state) => pluginKey.getState(state) }
@@ -407,6 +482,1010 @@ var autoCodeLanguageNames = [
 	"yaml"
 ];
 //#endregion
+//#region src/editor/extensions/expand.ts
+/**
+* Reveals collapsed ancestors before a host navigates to a document position.
+* @contract Navigation changes presentation only, including in read-only mode.
+*/
+async function revealLoomaExpandAt(editor, position) {
+	const { node } = editor.view.domAtPos(position);
+	const target = node instanceof Element ? node : node.parentElement;
+	const pending = [];
+	target?.dispatchEvent(new CustomEvent("looma-editor-reveal", {
+		bubbles: true,
+		detail: { pending }
+	}));
+	await Promise.all(pending);
+}
+Node$1.create({
+	name: "loomaExpand",
+	group: "block",
+	content: "block+",
+	defining: true,
+	isolating: true,
+	addOptions: () => ({ nodeView: null }),
+	addAttributes() {
+		return {
+			summary: {
+				default: "Details",
+				parseHTML: (element) => element.querySelector(":scope > summary")?.textContent ?? "Details",
+				renderHTML: () => ({})
+			},
+			open: {
+				default: false,
+				parseHTML: (element) => element.hasAttribute("open"),
+				renderHTML: () => ({})
+			}
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "details",
+			getContent: (element, schema) => {
+				if (!(element instanceof Element)) return Fragment$1.from(schema.nodes.paragraph.create());
+				const body = element.ownerDocument.createElement("div");
+				const authoredBody = element.querySelector(":scope > [data-looma-expand-body]");
+				for (const child of (authoredBody ?? element).childNodes) {
+					if (child instanceof Element && child.localName === "summary") continue;
+					body.append(child.cloneNode(true));
+				}
+				const content = DOMParser.fromSchema(schema).parse(body).content;
+				return content.size ? content : Fragment$1.from(schema.nodes.paragraph.create());
+			}
+		}];
+	},
+	renderHTML({ node }) {
+		return [
+			"details",
+			{
+				"data-looma-expand": "",
+				...node.attrs.open ? { open: "" } : {}
+			},
+			[
+				"summary",
+				{},
+				String(node.attrs.summary)
+			],
+			[
+				"div",
+				{ "data-looma-expand-body": "" },
+				0
+			]
+		];
+	},
+	renderText({ node }) {
+		return `${node.attrs.summary}\n${getText(node, { textSerializers: getTextSerializersFromSchema(node.type.schema) })}`;
+	},
+	addCommands() {
+		return {
+			insertLoomaExpand: (attributes = {}) => ({ chain, state, dispatch }) => {
+				const from = state.selection.from;
+				const content = {
+					type: this.name,
+					attrs: {
+						summary: attributes.summary ?? "Details",
+						open: attributes.open === true
+					},
+					content: [{ type: "paragraph" }]
+				};
+				if (!dispatch) return chain().insertContent(content).run();
+				return chain().insertContent(content).command(({ tr, commands }) => {
+					let body = -1;
+					tr.doc.descendants((node, position) => {
+						if (node.type.name === this.name && position >= from - 1 && body < 0) body = position + 2;
+					});
+					return body >= 0 && commands.setTextSelection(body);
+				}).run();
+			},
+			exitLoomaExpand: () => ({ state, chain }) => {
+				const { $from } = state.selection;
+				for (let depth = $from.depth; depth > 0; depth--) {
+					if ($from.node(depth).type.name !== this.name) continue;
+					const after = $from.after(depth);
+					return chain().insertContentAt(after, { type: "paragraph" }).setTextSelection(after + 1).run();
+				}
+				return false;
+			}
+		};
+	},
+	addExtensions() {
+		return [Extension.create({
+			name: "loomaExpandExit",
+			priority: 110,
+			addKeyboardShortcuts() {
+				return { "Mod-Enter": () => this.editor.commands.exitLoomaExpand() };
+			}
+		})];
+	},
+	addNodeView() {
+		if (this.options.nodeView) return this.options.nodeView;
+		return ({ editor, node }) => {
+			const dom = document.createElement("details");
+			dom.dataset.loomaExpand = "";
+			const summary = document.createElement("summary");
+			summary.contentEditable = "false";
+			const contentDOM = document.createElement("div");
+			contentDOM.dataset.loomaExpandBody = "";
+			dom.append(summary, contentDOM);
+			let current = node;
+			let editable = editor.isEditable;
+			dom.open = editable || Boolean(node.attrs.open);
+			summary.textContent = node.attrs.summary;
+			const reveal = () => {
+				dom.open = true;
+			};
+			const refresh = () => {
+				if (editable !== editor.isEditable) {
+					editable = editor.isEditable;
+					dom.open = editable || Boolean(current.attrs.open);
+				}
+			};
+			dom.addEventListener("looma-editor-reveal", reveal);
+			editor.on("update", refresh);
+			return {
+				dom,
+				contentDOM,
+				update(next) {
+					if (next.type !== current.type) return false;
+					if (next.attrs.open !== current.attrs.open) dom.open = editor.isEditable || Boolean(next.attrs.open);
+					current = next;
+					summary.textContent = next.attrs.summary;
+					refresh();
+					return true;
+				},
+				stopEvent: (event) => summary.contains(event.target),
+				ignoreMutation: (mutation) => mutation.type !== "selection" && !contentDOM.contains(mutation.target),
+				destroy() {
+					dom.removeEventListener("looma-editor-reveal", reveal);
+					editor.off("update", refresh);
+				}
+			};
+		};
+	}
+});
+//#endregion
+//#region src/editor/extensions/table-of-contents.ts
+/** Normalize loaded configuration without persisting unsupported presentation values. */
+function normalizeTableOfContentsConfig$1(attributes) {
+	return {
+		format: attributes.format === "bulleted" || attributes.format === "numbered" ? attributes.format : "plain",
+		depth: attributes.depth === 1 || attributes.depth === 2 ? attributes.depth : 3
+	};
+}
+/**
+* Derives nonempty headings throughout the document, independent of TOC placement.
+* @contract Depth is a maximum heading level. Relative nesting follows existing
+* ancestors rather than inserting artificial entries for skipped levels.
+*/
+function getTableOfContentsEntries$1(doc, depth = 3) {
+	const entries = [];
+	const ancestors = [];
+	doc.descendants((node, position) => {
+		if (node.type.name !== "heading" || node.attrs.level > depth || !node.textContent.trim()) return;
+		const level = Number(node.attrs.level);
+		while (ancestors.length && ancestors[ancestors.length - 1] >= level) ancestors.pop();
+		entries.push({
+			id: String(node.attrs.id ?? ""),
+			text: node.textContent.trim(),
+			level,
+			depth: ancestors.length,
+			position
+		});
+		ancestors.push(level);
+	});
+	return entries;
+}
+/** Shared nesting for semantic HTML and the adapter's component composition. */
+function tableOfContentsTree(entries) {
+	const roots = [];
+	const parents = [];
+	for (const entry of entries) {
+		const branch = {
+			entry,
+			children: []
+		};
+		parents.length = entry.depth;
+		(parents[entry.depth - 1]?.children ?? roots).push(branch);
+		parents.push(branch);
+	}
+	return roots;
+}
+function anchorTransaction(state) {
+	let hasToc = false;
+	const headings = [];
+	state.doc.descendants((node, position) => {
+		if (node.type.name === "loomaTableOfContents") hasToc = true;
+		if (node.type.name === "heading") headings.push({
+			node,
+			position
+		});
+	});
+	if (!hasToc) return null;
+	const reserved = new Set(headings.map(({ node }) => String(node.attrs.id ?? "")).filter(Boolean));
+	const used = /* @__PURE__ */ new Set();
+	const transaction = state.tr;
+	let sequence = 1;
+	for (const { node, position } of headings) {
+		let id = typeof node.attrs.id === "string" ? node.attrs.id : "";
+		if (!id || /\s/.test(id) || used.has(id)) {
+			do
+				id = `looma-heading-${sequence++}`;
+			while (reserved.has(id) || used.has(id));
+			transaction.setNodeMarkup(position, void 0, {
+				...node.attrs,
+				id
+			});
+		}
+		used.add(id);
+	}
+	return transaction.docChanged ? transaction : null;
+}
+var LoomaHeadingAnchors = Extension.create({
+	name: "loomaHeadingAnchors",
+	addGlobalAttributes() {
+		return [{
+			types: ["heading"],
+			attributes: { id: { default: null } }
+		}];
+	},
+	onCreate() {
+		const transaction = anchorTransaction(this.editor.state);
+		if (transaction) this.editor.view.dispatch(transaction.setMeta("addToHistory", false));
+	},
+	addProseMirrorPlugins() {
+		return [new Plugin({ appendTransaction: (transactions, _oldState, state) => transactions.some((transaction) => transaction.docChanged) ? anchorTransaction(state) : null })];
+	}
+});
+function contentsHtml(doc, config) {
+	const branches = tableOfContentsTree(getTableOfContentsEntries$1(doc, config.depth));
+	const list = (items) => [
+		config.format === "plain" ? "div" : config.format === "numbered" ? "ol" : "ul",
+		{ role: "list" },
+		...items.map(({ entry, children }) => [
+			config.format === "plain" ? "div" : "li",
+			{ role: "listitem" },
+			[
+				"a",
+				{ href: `#${entry.id}` },
+				entry.text
+			],
+			...children.length ? [list(children)] : []
+		])
+	];
+	return [
+		"nav",
+		{
+			"data-looma-toc": "",
+			"data-format": config.format,
+			"data-depth": config.depth,
+			"aria-label": "Table of contents"
+		},
+		[
+			"strong",
+			{},
+			"Table of contents"
+		],
+		branches.length ? list(branches) : [
+			"p",
+			{},
+			"Add headings to build your table of contents."
+		]
+	];
+}
+/**
+* Scrolls within this editor so multiple documents cannot cross-navigate by ID.
+* @contract Reader navigation does not edit content or invoke link-editing UI.
+*/
+async function navigateTableOfContents(editor, id) {
+	const target = [...editor.view.dom.querySelectorAll("h1[id], h2[id], h3[id]")].find((heading) => heading.id === id);
+	if (!target) return;
+	const entry = getTableOfContentsEntries$1(editor.state.doc).find((heading) => heading.id === id);
+	if (entry) await revealLoomaExpandAt(editor, entry.position + 1);
+	if (!target.isConnected || editor.isDestroyed) return;
+	target.scrollIntoView({
+		block: "start",
+		behavior: "auto"
+	});
+	target.tabIndex = -1;
+	target.focus({ preventScroll: true });
+}
+Node$1.create({
+	name: "loomaTableOfContents",
+	group: "block",
+	atom: true,
+	selectable: true,
+	isolating: true,
+	addOptions: () => ({ nodeView: null }),
+	addExtensions: () => [LoomaHeadingAnchors],
+	addAttributes() {
+		return {
+			format: {
+				default: "plain",
+				parseHTML: (element) => normalizeTableOfContentsConfig$1({ format: element.getAttribute("data-format") }).format,
+				renderHTML: () => ({})
+			},
+			depth: {
+				default: 3,
+				parseHTML: (element) => normalizeTableOfContentsConfig$1({ depth: Number(element.getAttribute("data-depth")) }).depth,
+				renderHTML: () => ({})
+			}
+		};
+	},
+	parseHTML: () => [{ tag: "nav[data-looma-toc]" }],
+	renderHTML({ node }) {
+		return contentsHtml(this.editor?.view?.state.doc ?? node, normalizeTableOfContentsConfig$1(node.attrs));
+	},
+	addCommands() {
+		return { insertLoomaTableOfContents: (config = {}) => ({ commands }) => commands.insertContent({
+			type: this.name,
+			attrs: normalizeTableOfContentsConfig$1(config)
+		}) };
+	},
+	addNodeView() {
+		if (this.options.nodeView) return this.options.nodeView;
+		return ({ editor, node }) => {
+			const dom = document.createElement("div");
+			dom.contentEditable = "false";
+			let current = node;
+			const render = () => {
+				const { dom: content } = DOMSerializer.renderSpec(document, contentsHtml(editor.state.doc, normalizeTableOfContentsConfig$1(current.attrs)));
+				dom.replaceChildren(content);
+			};
+			dom.addEventListener("click", (event) => {
+				const anchor = event.target.closest("a");
+				if (!anchor) return;
+				event.preventDefault();
+				navigateTableOfContents(editor, anchor.getAttribute("href").slice(1));
+			});
+			editor.on("transaction", render);
+			render();
+			return {
+				dom,
+				update(next) {
+					if (next.type !== current.type) return false;
+					current = next;
+					render();
+					return true;
+				},
+				stopEvent: () => true,
+				ignoreMutation: () => true,
+				destroy: () => {
+					editor.off("transaction", render);
+				}
+			};
+		};
+	}
+});
+//#endregion
+//#region src/vue/editor/table-of-contents.ts
+var tocSequence = 0;
+/**
+* Composes TOC presentation and settings from the same controls as link editing.
+* @lifecycle Each node owns a Vue app and document subscriptions, all released
+* by its node-view destroy callback. Only configuration enters editor state.
+*/
+var tableOfContentsNodeView = ({ editor, node, getPos }) => {
+	const dom = document.createElement("div");
+	dom.contentEditable = "false";
+	const current = shallowRef(node);
+	const doc = shallowRef(editor.state.doc);
+	const editable = ref(editor.isEditable);
+	const refresh = () => {
+		doc.value = editor.state.doc;
+		editable.value = editor.isEditable;
+	};
+	const app = createApp({ setup() {
+		const id = `looma-toc-${++tocSequence}`;
+		const open = ref(false);
+		const draft = ref(normalizeTableOfContentsConfig(current.value.attrs));
+		const config = computed(() => normalizeTableOfContentsConfig(current.value.attrs));
+		const branches = computed(() => tableOfContentsTree(getTableOfContentsEntries(doc.value, config.value.depth)));
+		const begin = () => {
+			draft.value = { ...config.value };
+			open.value = true;
+		};
+		const cancel = () => {
+			open.value = false;
+		};
+		const save = () => {
+			const position = getPos();
+			if (typeof position !== "number" || !editor.isEditable) return;
+			if (editor.state.doc.nodeAt(position)?.type.name !== "loomaTableOfContents") return;
+			editor.view.dispatch(editor.state.tr.setNodeMarkup(position, void 0, normalizeTableOfContentsConfig(draft.value)));
+			open.value = false;
+			editor.commands.focus();
+		};
+		const list = (items) => h(List, {
+			as: config.value.format === "numbered" ? "ol" : "ul",
+			markers: config.value.format === "bulleted" ? "disc" : "none",
+			density: "compact"
+		}, () => items.map(({ entry, children }) => h("li", { key: entry.id }, [h(Button, {
+			as: "a",
+			href: `#${entry.id}`,
+			variant: "link",
+			tone: "neutral",
+			size: "sm",
+			onClick: (event) => {
+				event.preventDefault();
+				navigateTableOfContents(editor, entry.id);
+			}
+		}, () => h(Text, {
+			as: "span",
+			wrap: "anywhere"
+		}, () => entry.text)), children.length ? list(children) : null])));
+		const formatLabels = {
+			plain: "Plain",
+			bulleted: "Bulleted",
+			numbered: "Numbered"
+		};
+		const dropdown = (field) => {
+			const label = field === "format" ? "Formatting" : "Heading depth";
+			const trigger = `${id}-${field}`;
+			const options = field === "format" ? Object.entries(formatLabels).map(([value, text]) => ({
+				value,
+				text
+			})) : [
+				1,
+				2,
+				3
+			].map((value) => ({
+				value: String(value),
+				text: `Through heading ${value}`
+			}));
+			return h(FormField, {}, {
+				label: () => h("label", { for: trigger }, label),
+				default: () => [h(Button, {
+					id: trigger,
+					variant: "outline",
+					tone: "neutral",
+					size: "sm",
+					stretch: true,
+					align: "start",
+					"aria-label": label
+				}, () => h(Cluster, {
+					justify: "between",
+					gap: "s"
+				}, () => [field === "format" ? formatLabels[draft.value.format] : `Through heading ${draft.value.depth}`, h(Icon, {
+					name: "chevron-down",
+					size: "sm"
+				})])), h(Menu, {
+					for: trigger,
+					size: "sm",
+					"aria-label": label,
+					onSelect: (event) => {
+						draft.value = normalizeTableOfContentsConfig({
+							...draft.value,
+							[field]: field === "depth" ? Number(event.detail.value) : event.detail.value
+						});
+					}
+				}, () => options.map((option) => h(MenuItem, {
+					value: option.value,
+					type: "radio",
+					checked: String(draft.value[field]) === option.value
+				}, () => option.text)))]
+			});
+		};
+		return () => h("nav", {
+			"data-looma-toc": "",
+			"data-format": config.value.format,
+			"data-depth": config.value.depth,
+			"aria-label": "Table of contents"
+		}, [h(Stack, { gap: "s" }, () => [
+			h(Cluster, {
+				justify: "between",
+				gap: "s"
+			}, () => [h(Text, {
+				as: "strong",
+				size: "sm",
+				weight: "semibold"
+			}, () => "Table of contents"), editable.value ? h(IconButton, {
+				id,
+				label: "Table of contents settings",
+				variant: "ghost",
+				size: "sm"
+			}, () => h(Icon, {
+				name: "settings",
+				size: "sm"
+			})) : null]),
+			branches.value.length ? list(branches.value) : h(Text, {
+				size: "sm",
+				tone: "secondary"
+			}, () => "Add headings to build your table of contents."),
+			editable.value ? h(Popover, {
+				for: id,
+				open: open.value,
+				size: "sm",
+				"aria-label": "Table of contents settings",
+				onOpen: begin,
+				onClose: cancel
+			}, () => h(Stack, { gap: "s" }, () => [
+				h(Text, {
+					as: "strong",
+					size: "sm",
+					weight: "semibold"
+				}, () => "Table of contents"),
+				dropdown("format"),
+				dropdown("depth"),
+				h(Cluster, {
+					justify: "end",
+					gap: "xs"
+				}, () => [h(Button, {
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					onClick: cancel
+				}, () => "Cancel"), h(Button, {
+					variant: "solid",
+					size: "sm",
+					onClick: save
+				}, () => "Save")])
+			])) : null,
+			editable.value ? h(Tooltip, { for: id }, () => "Table of contents settings") : null
+		])]);
+	} });
+	editor.on("transaction", refresh);
+	editor.on("update", refresh);
+	app.mount(dom);
+	return {
+		dom,
+		update(next) {
+			if (next.type !== current.value.type) return false;
+			current.value = next;
+			refresh();
+			return true;
+		},
+		stopEvent: () => true,
+		ignoreMutation: () => true,
+		destroy() {
+			editor.off("transaction", refresh);
+			editor.off("update", refresh);
+			app.unmount();
+		}
+	};
+};
+//#endregion
+//#region src/vue/editor/expand.ts
+var expandSequence = 0;
+/**
+* Composes a section's transient disclosure and saved settings from shared controls.
+* @lifecycle The content DOM remains owned by ProseMirror; Vue owns surrounding
+* controls. Unmount removes the app, listeners, and editor subscription.
+*/
+var expandNodeView = ({ editor, node, getPos }) => {
+	const dom = document.createElement("div");
+	dom.dataset.loomaExpand = "";
+	const current = shallowRef(node);
+	const editable = ref(editor.isEditable);
+	const expanded = ref(editor.isEditable || Boolean(node.attrs.open));
+	let contentDOM;
+	const refresh = () => {
+		if (editable.value !== editor.isEditable) expanded.value = editor.isEditable || Boolean(current.value.attrs.open);
+		editable.value = editor.isEditable;
+	};
+	const reveal = (event) => {
+		expanded.value = true;
+		event.detail.pending.push(nextTick().then(async () => {
+			await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+			const panel = dom.querySelector("[data-component='ui-disclosure'] .panel");
+			await Promise.all((panel?.getAnimations() ?? []).map((animation) => animation.finished.catch(() => {})));
+		}));
+	};
+	const app = createApp({ setup() {
+		const id = `looma-expand-${++expandSequence}`;
+		const settings = ref(false);
+		const title = ref(String(current.value.attrs.summary));
+		const defaultOpen = ref(Boolean(current.value.attrs.open));
+		const begin = () => {
+			title.value = current.value.attrs.summary;
+			defaultOpen.value = Boolean(current.value.attrs.open);
+			settings.value = true;
+		};
+		const save = () => {
+			const position = getPos();
+			if (typeof position !== "number" || !editor.isEditable || editor.state.doc.nodeAt(position)?.type.name !== "loomaExpand") return;
+			editor.view.dispatch(editor.state.tr.setNodeMarkup(position, void 0, {
+				summary: title.value.trim() || "Details",
+				open: defaultOpen.value
+			}));
+			settings.value = false;
+			editor.commands.focus();
+		};
+		return () => h(Stack, { gap: "xs" }, () => [
+			editable.value ? h(Cluster, {
+				justify: "end",
+				gap: "xs"
+			}, () => h(IconButton, {
+				id,
+				label: "Section settings",
+				variant: "ghost",
+				size: "sm"
+			}, () => h(Icon, {
+				name: "settings",
+				size: "sm"
+			}))) : null,
+			editable.value ? h(Tooltip, { for: id }, () => "Section settings") : null,
+			h(Disclosure, {
+				summary: current.value.attrs.summary,
+				open: expanded.value,
+				density: "compact",
+				onOpen: () => {
+					expanded.value = true;
+				},
+				onClose: () => {
+					expanded.value = false;
+				}
+			}, () => h("div", {
+				"data-looma-expand-body": "",
+				ref: (element) => {
+					if (element) contentDOM = element;
+				}
+			})),
+			editable.value ? h(Popover, {
+				for: id,
+				open: settings.value,
+				size: "sm",
+				"aria-label": "Section settings",
+				onOpen: begin,
+				onClose: () => {
+					settings.value = false;
+				}
+			}, () => h(Stack, { gap: "s" }, () => [
+				h(Text, {
+					as: "strong",
+					size: "sm",
+					weight: "semibold"
+				}, () => "Section settings"),
+				h(FormField, {}, {
+					label: () => h("label", { for: `${id}-summary` }, "Summary"),
+					default: () => h(Input, {
+						id: `${id}-summary`,
+						value: title.value,
+						size: "sm",
+						onInput: (event) => {
+							title.value = event.target.value;
+						}
+					})
+				}),
+				h(Checkbox, {
+					checked: defaultOpen.value,
+					onChange: (event) => {
+						defaultOpen.value = event.detail.checked;
+					}
+				}, () => "Initially expanded"),
+				h(Cluster, {
+					justify: "end",
+					gap: "xs"
+				}, () => [h(Button, {
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					onClick: () => {
+						settings.value = false;
+					}
+				}, () => "Cancel"), h(Button, {
+					variant: "solid",
+					size: "sm",
+					onClick: save
+				}, () => "Save")])
+			])) : null
+		]);
+	} });
+	dom.addEventListener("looma-editor-reveal", reveal);
+	editor.on("update", refresh);
+	app.mount(dom);
+	return {
+		dom,
+		contentDOM,
+		update(next) {
+			if (next.type !== current.value.type) return false;
+			if (next.attrs.open !== current.value.attrs.open) expanded.value = editor.isEditable || Boolean(next.attrs.open);
+			current.value = next;
+			refresh();
+			return true;
+		},
+		stopEvent: (event) => !contentDOM.contains(event.target),
+		ignoreMutation: (mutation) => mutation.type !== "selection" && !contentDOM.contains(mutation.target),
+		destroy() {
+			dom.removeEventListener("looma-editor-reveal", reveal);
+			editor.off("update", refresh);
+			app.unmount();
+		}
+	};
+};
+//#endregion
+//#region src/vue/editor/divider.ts
+/** A pointer-sized document divider using the shared separator's selected state.
+* @lifecycle The editor owns the node and deletion; destroying the view releases
+* its Vue app and editability subscription.
+*/
+var dividerNodeView = ({ editor, getPos }) => {
+	const mount = document.createElement("div");
+	const selected = ref(false);
+	const editable = ref(editor.isEditable);
+	const refresh = () => {
+		editable.value = editor.isEditable;
+	};
+	const app = createApp({ render: () => h(Separator, {
+		selectable: editable.value,
+		selected: editable.value && selected.value,
+		contenteditable: "false",
+		onClick: () => {
+			const position = getPos();
+			if (!editor.isEditable || typeof position !== "number") return;
+			editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, position)));
+			editor.view.focus();
+		}
+	}) });
+	app.mount(mount);
+	const dom = mount.firstElementChild;
+	editor.on("update", refresh);
+	return {
+		dom,
+		selectNode() {
+			selected.value = true;
+		},
+		deselectNode() {
+			selected.value = false;
+		},
+		stopEvent: () => false,
+		ignoreMutation: (mutation) => mutation.type !== "selection",
+		destroy() {
+			editor.off("update", refresh);
+			app.unmount();
+		}
+	};
+};
+//#endregion
+//#region src/vue/editor/image-controls.ts
+var placements = [
+	{
+		value: "block",
+		label: "Image in line",
+		icon: "panel-top"
+	},
+	{
+		value: "center",
+		label: "Center image",
+		icon: "align-center"
+	},
+	{
+		value: "wrap-left",
+		label: "Wrap text to the right",
+		icon: "panel-left"
+	},
+	{
+		value: "wrap-right",
+		label: "Wrap text to the left",
+		icon: "panel-right"
+	}
+];
+/** One contextual editing bar; sizing belongs to the image's corner handles.
+* @contract Placement applies immediately. Alt text is a secondary draft with
+* Save/Cancel; editing another node cancels it rather than changing that node.
+*/
+var ImageControls = defineComponent({
+	props: { editor: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const id = `looma-image-${useId()}`;
+		const open = ref(false);
+		const alt = ref("");
+		const placement = ref("block");
+		let target = null;
+		const selected = () => props.editor.state.selection instanceof NodeSelection && props.editor.state.selection.node.type.name === "image" ? props.editor.state.selection : null;
+		const refresh = () => {
+			const selection = selected();
+			placement.value = normalizeImagePlacement(selection?.node.attrs.placement);
+			if (open.value && selection?.node !== target) open.value = false;
+		};
+		props.editor.on("transaction", refresh);
+		onBeforeUnmount(() => props.editor.off("transaction", refresh));
+		const begin = () => {
+			const selection = selected();
+			if (!selection) return;
+			target = selection.node;
+			alt.value = selection.node.attrs.alt ?? "";
+			open.value = true;
+		};
+		const update = (attrs) => {
+			const selection = selected();
+			if (!selection || !props.editor.isEditable) return;
+			props.editor.view.dispatch(props.editor.state.tr.setNodeMarkup(selection.from, void 0, {
+				...selection.node.attrs,
+				...attrs
+			}));
+			props.editor.view.focus();
+		};
+		return () => h(Text, {
+			as: "div",
+			font: "sans"
+		}, () => [
+			h(EditorToolbar$1, {
+				floating: true,
+				"aria-label": "Image actions"
+			}, () => [
+				...placements.map((option) => h(IconButton, {
+					id: `${id}-${option.value}`,
+					label: option.label,
+					size: "sm",
+					variant: placement.value === option.value ? "outline" : "ghost",
+					"aria-pressed": placement.value === option.value,
+					onClick: () => update({
+						placement: option.value,
+						...option.value.startsWith("wrap-") ? {
+							width: null,
+							height: null
+						} : {}
+					})
+				}, () => h(Icon, {
+					name: option.icon,
+					size: "sm"
+				}))),
+				h(IconButton, {
+					id,
+					label: "Image description",
+					size: "sm",
+					variant: "ghost"
+				}, () => h(Icon, {
+					name: "file-text",
+					size: "sm"
+				})),
+				h(IconButton, {
+					id: `${id}-delete`,
+					label: "Delete image",
+					size: "sm",
+					variant: "ghost",
+					onClick: () => {
+						if (selected() && props.editor.isEditable) props.editor.chain().focus().deleteSelection().run();
+					}
+				}, () => h(Icon, {
+					name: "trash",
+					size: "sm"
+				}))
+			]),
+			...placements.map((option) => h(Tooltip, { for: `${id}-${option.value}` }, () => option.label)),
+			h(Tooltip, { for: id }, () => "Image description"),
+			h(Tooltip, { for: `${id}-delete` }, () => "Delete image"),
+			h(Popover, {
+				for: id,
+				open: open.value,
+				size: "sm",
+				"aria-label": "Image description",
+				onOpen: begin,
+				onClose: () => {
+					open.value = false;
+				}
+			}, () => h("form", {
+				"aria-label": "Image description",
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (selected()?.node !== target) return;
+					open.value = false;
+					update({ alt: alt.value });
+				}
+			}, [h(Stack, { gap: "s" }, () => [
+				h(FormField, {}, {
+					label: () => h("label", { for: `${id}-alt` }, "Alt text"),
+					default: () => h(Input, {
+						id: `${id}-alt`,
+						size: "sm",
+						value: alt.value,
+						onInput: (event) => {
+							alt.value = event.target.value;
+						}
+					})
+				}),
+				h(Text, {
+					size: "xs",
+					tone: "secondary"
+				}, () => "Describe the image for people using a screen reader."),
+				h(Cluster, {
+					justify: "end",
+					gap: "xs"
+				}, () => [h(Button, {
+					type: "button",
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					onClick: () => {
+						open.value = false;
+					}
+				}, () => "Cancel"), h(Button, {
+					type: "submit",
+					variant: "solid",
+					size: "sm"
+				}, () => "Save")])
+			])]))
+		]);
+	}
+});
+//#endregion
+//#region src/vue/editor/image.ts
+/** Projects the shared image's resize intent into a single document transaction.
+* @ownership Delivery decorations belong to the inner image, never the figure;
+* persisted attributes remain independent of host renditions and drag previews.
+* @lifecycle Each atom owns a Vue app and an editability subscription.
+*/
+var imageNodeView = ({ editor, node, getPos, decorations }) => {
+	const mount = document.createElement("div");
+	const current = shallowRef(node);
+	const delivery = shallowRef(decorations);
+	const selected = ref(false);
+	const editable = ref(editor.isEditable);
+	const refresh = () => {
+		editable.value = editor.isEditable;
+	};
+	const app = createApp({ render: () => {
+		const attrs = current.value.attrs;
+		const transient = Object.assign({}, ...delivery.value.map((decoration) => decoration.spec.loomaImageAttributes ?? {}));
+		return h(Image, {
+			src: attrs.src,
+			alt: attrs.alt ?? "",
+			width: attrs.width,
+			height: attrs.height,
+			placement: normalizeImagePlacement(attrs.placement),
+			selected: editable.value && selected.value,
+			resizable: editable.value,
+			contenteditable: "false",
+			"data-looma-image-node": "",
+			onClick: (event) => {
+				if (event.target.closest("button")) return;
+				const position = getPos();
+				if (!editor.isEditable || typeof position !== "number") return;
+				editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, position)));
+				editor.view.focus();
+			},
+			onResize: (event) => {
+				if (event.detail.phase !== "commit" || !editor.isEditable) return;
+				const position = getPos();
+				if (typeof position !== "number" || editor.state.doc.nodeAt(position) !== current.value) return;
+				const { width, height } = event.detail;
+				if (width === current.value.attrs.width && height === current.value.attrs.height) return;
+				editor.view.dispatch(closeHistory(editor.state.tr).setNodeMarkup(position, void 0, {
+					...current.value.attrs,
+					width,
+					height
+				}));
+				editor.view.dispatch(closeHistory(editor.state.tr));
+			}
+		}, { media: () => h("img", {
+			src: attrs.src,
+			alt: attrs.alt ?? "",
+			title: attrs.title,
+			width: attrs.width,
+			height: attrs.height,
+			...transient
+		}) });
+	} });
+	app.mount(mount);
+	const dom = mount.firstElementChild;
+	editor.on("update", refresh);
+	return {
+		dom,
+		update(next, nextDecorations) {
+			if (next.type !== current.value.type) return false;
+			current.value = next;
+			delivery.value = nextDecorations;
+			refresh();
+			return true;
+		},
+		selectNode() {
+			selected.value = true;
+		},
+		deselectNode() {
+			selected.value = false;
+		},
+		stopEvent: (event) => event.target instanceof Element && Boolean(event.target.closest("[data-corner]")),
+		ignoreMutation: (mutation) => mutation.type !== "selection",
+		destroy() {
+			editor.off("update", refresh);
+			app.unmount();
+		}
+	};
+};
+//#endregion
 //#region src/vue/editor/LoomaEditor.ts
 /**
 * Shows a key binding in ProseMirror notation ("Mod-Shift-8") the way the reader's platform writes
@@ -479,12 +1558,25 @@ function managedMenuAnchorRect(rect) {
 		height: rect.height
 	};
 }
-function managedSlashMenuItems(items) {
-	return items.map(({ title, description, icon }) => ({
-		title,
-		description,
-		icon
-	}));
+function slashMenuRows(items) {
+	const groups = [];
+	for (const [index, item] of items.entries()) {
+		if (!groups.length || groups.at(-1).label !== item.group) groups.push({
+			label: item.group,
+			rows: []
+		});
+		groups.at(-1).rows.push(h(EditorSlashMenuItem, {
+			key: item.id ?? `${item.title}-${index}`,
+			value: item.id ?? item.title,
+			description: item.description,
+			icon: item.icon,
+			keywords: [...item.keywords, item.id ?? ""].join(" ")
+		}, () => item.title));
+	}
+	return groups.flatMap(({ label, rows }, index) => label ? [h(EditorSlashMenuGroup, {
+		key: `${label}-${index}`,
+		label
+	}, () => rows)] : rows);
 }
 function selectedTableElement(editor) {
 	const { node } = editor.view.domAtPos(editor.state.selection.from);
@@ -547,6 +1639,11 @@ var LoomaEditor = defineComponent({
 			type: Array,
 			default: () => []
 		},
+		/** One inventory for the existing slash extension; an empty array intentionally supplies no commands. */
+		slashCommands: {
+			type: [Array, Function],
+			default: void 0
+		},
 		/** Override the lazy built-in catalog with application-owned code grammars. An empty object disables highlighting. */
 		codeLanguages: {
 			type: Object,
@@ -774,7 +1871,12 @@ var LoomaEditor = defineComponent({
 			chipOpen.value = false;
 			if (focusChip) root.value?.querySelector(`#${chipAnchorId}`)?.focus();
 		};
+		const resolveSlashCommands = () => {
+			const defaults = getDefaultSlashCommands(props.uploadImage ? () => fileInput.value?.click() : void 0, openChipEditor, () => openLinkEditor());
+			return typeof props.slashCommands === "function" ? props.slashCommands(defaults) : props.slashCommands ?? defaults;
+		};
 		const slashExtension = createLoomaSlashCommandExtension({
+			commands: resolveSlashCommands(),
 			onOpenImagePicker: () => fileInput.value?.click(),
 			onOpenChipEditor: openChipEditor,
 			onOpenLinkEditor: () => openLinkEditor(),
@@ -794,7 +1896,10 @@ var LoomaEditor = defineComponent({
 				Object.assign(mention, state);
 			}
 		});
-		const imageDelivery = createLoomaImageDeliveryController({ resolveAttributes: () => props.resolveImageAttributes });
+		const imageDelivery = createLoomaImageDeliveryController({
+			resolveAttributes: () => props.resolveImageAttributes,
+			isEditable: () => props.editable
+		});
 		let lastFocusedSelection = null;
 		let linkPressedSelection = null;
 		const rememberSelection = (instance) => {
@@ -862,7 +1967,11 @@ var LoomaEditor = defineComponent({
 					mention: mentionExtension ?? false,
 					disableHighlight: props.disableHighlight,
 					codeLanguages: props.codeLanguages ?? void 0,
-					codeLowlight: codeHighlightLowlight
+					codeLowlight: codeHighlightLowlight,
+					tableOfContentsNodeView,
+					expandNodeView,
+					dividerNodeView,
+					imageNodeView
 				}),
 				imageDelivery.extension,
 				slashExtension,
@@ -1326,8 +2435,13 @@ var LoomaEditor = defineComponent({
 			instance.view.dispatch(transaction);
 			instance.commands.focus();
 		};
+		watch([() => props.slashCommands, () => props.uploadImage], () => {
+			slashExtension.options.commands = resolveSlashCommands();
+			editor.value?.commands.dismissLoomaSlashMenu();
+		});
 		watch(() => props.editable, (editable) => {
 			editor.value?.setEditable(editable);
+			if (editor.value) imageDelivery.reset(editor.value);
 			root.value?.querySelectorAll("[data-looma-chip]").forEach((chip) => {
 				chip.setAttribute("aria-disabled", String(!editable));
 			});
@@ -1583,7 +2697,8 @@ var LoomaEditor = defineComponent({
 			const instance = editor.value;
 			if (!instance) return null;
 			try {
-				const position = instance.view.posAtDOM(element, 0);
+				const frame = element.closest("[data-looma-image-node]");
+				const position = frame?.parentNode ? instance.view.posAtDOM(frame.parentNode, Array.from(frame.parentNode.childNodes).indexOf(frame)) : instance.view.posAtDOM(element, 0);
 				const node = instance.state.doc.nodeAt(position);
 				return node?.type.name === "image" ? imageDescriptorFromAttrs(node.attrs) : null;
 			} catch {
@@ -1630,7 +2745,7 @@ var LoomaEditor = defineComponent({
 				return;
 			}
 			const element = imageElementForEvent(event);
-			if (!element) return;
+			if (!element || props.editable) return;
 			event.preventDefault();
 			activateImage(element, "keyboard");
 		};
@@ -2045,7 +3160,22 @@ var LoomaEditor = defineComponent({
 					role: "toolbar",
 					"aria-label": "Editor tools"
 				}, [renderToolbar(instance, false)]) : null,
-				instance ? h(EditorContent, { editor: instance }) : null,
+				instance && props.editable ? h(BubbleMenu, {
+					editor: instance,
+					pluginKey: "looma-image-actions",
+					shouldShow: ({ editor: menuEditor }) => menuEditor.isEditable && menuEditor.state.selection instanceof NodeSelection && menuEditor.state.selection.node.type.name === "image",
+					tippyOptions: {
+						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
+						placement: "top",
+						duration: 100,
+						maxWidth: window.innerWidth - 24,
+						getReferenceClientRect: () => {
+							const dom = instance.view.nodeDOM(instance.state.selection.from);
+							return (dom instanceof Element ? dom.querySelector("img") ?? dom : instance.view.dom).getBoundingClientRect();
+						}
+					}
+				}, { default: () => h(ImageControls, { editor: instance }) }) : null,
+				instance ? h(Stack, { gap: "none" }, () => h(EditorContent, { editor: instance })) : null,
 				codeUi.open ? h("div", {
 					ref: codeLanguageShell,
 					class: "looma-editor__code-language",
@@ -2193,18 +3323,24 @@ var LoomaEditor = defineComponent({
 						tablePickerOpen.value = false;
 					}
 				})]),
-				slash.active && slash.items.length > 0 ? h(EditorSlashMenu, {
+				slash.active ? h(EditorSlashMenu, {
 					open: true,
 					query: slash.query,
-					items: managedSlashMenuItems(slash.items),
 					selectedIndex: slash.selectedIndex,
 					anchorRect: managedMenuAnchorRect(slash.rect),
 					onHighlight: (event) => {
-						slash.selectedIndex = event.detail.index;
+						slash.highlight?.(event.detail.index);
 					},
 					onSelect: (event) => {
 						slash.select?.(event.detail.index);
 					}
+				}, {
+					default: () => slashMenuRows(slash.items),
+					empty: () => h(Text, {
+						role: "status",
+						size: "sm",
+						tone: "muted"
+					}, () => "No commands found.")
 				}) : null,
 				mention.active && (mention.loading || mention.items.length > 0) ? h(EditorMentionMenu, {
 					id: mentionMenuId,