@threadlabs/looma 0.23.21 → 0.23.22

package/editor/chunks/extensions.js

@@ -1,12 +1,12 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "./table-backgrounds.js";
-import { Extension, Mark, Node as Node$1, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
+import { Extension, Mark, Node as Node$1, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, getText, getTextSerializersFromSchema, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { DOMParser, DOMSerializer, Fragment, Node as Node$2, Slice } from "@tiptap/pm/model";
 import { history, redo, undo } from "@tiptap/pm/history";
 import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
 import { createLowlight } from "lowlight";
-import { DOMParser, Node as Node$2, Slice } from "@tiptap/pm/model";
 import { Mapping } from "@tiptap/pm/transform";
 import MarkdownIt from "markdown-it";
 import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, moveTableColumn, moveTableRow, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
@@ -277,6 +277,391 @@ var LoomaChip = Node$1.create({
 	}
 });
 //#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);
+}
+/**
+* A block container whose summary and initial expansion survive serialization.
+* @ownership The document owns attributes/body; node views own reader toggles.
+* @lifecycle Default views unregister their editor subscriptions on destroy.
+*/
+var LoomaExpand = 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.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.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(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(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(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(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 });
+}
+/**
+* Automatic whole-document navigation with durable configuration only.
+* @ownership The schema owns configuration/anchors; node views derive entries.
+* @lifecycle Headless views subscribe to transactions and unsubscribe on destroy.
+*/
+var LoomaTableOfContents = 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({ format: element.getAttribute("data-format") }).format,
+				renderHTML: () => ({})
+			},
+			depth: {
+				default: 3,
+				parseHTML: (element) => normalizeTableOfContentsConfig({ 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(node.attrs));
+	},
+	addCommands() {
+		return { insertLoomaTableOfContents: (config = {}) => ({ commands }) => commands.insertContent({
+			type: this.name,
+			attrs: normalizeTableOfContentsConfig(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(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 ../../node_modules/.pnpm/@tiptap+extension-document@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-document/dist/index.js
 /**
 * The default document node which represents the top level node of the editor.
@@ -3104,6 +3489,45 @@ var Image = Node$1.create({
 	}
 });
 //#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";
+}
+/** Portable image attributes shared by every editor adapter.
+* @contract Keeps Tiptap's existing `image` name and insertion command. Delivery
+* attributes stay transient; dimensions and placement survive HTML and JSON.
+*/
+var LoomaImage = Image.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 ../../node_modules/.pnpm/@tiptap+extension-highlight@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-highlight/dist/index.js
 /**
 * Matches a highlight to a ==highlight== on input.
@@ -5550,6 +5974,33 @@ var TableRow = Node$1.create({
 	}
 });
 //#endregion
+//#region src/editor/extensions/block-selection.ts
+/** Selects atomic visual blocks by pointer and keeps text Tab input in the document.
+* @contract List and table keymaps run first; Shift-Tab outside a list remains
+* browser navigation so keyboard users can leave the editing surface.
+*/
+var LoomaBlockSelection = Extension.create({
+	name: "loomaBlockSelection",
+	priority: 50,
+	addKeyboardShortcuts() {
+		return { Tab: () => {
+			const editor = this.editor;
+			if (!editor.isEditable || !(editor.state.selection instanceof TextSelection)) return false;
+			if (editor.isActive("table")) return false;
+			if (editor.isActive("listItem") || editor.isActive("taskItem")) return true;
+			return editor.commands.insertContent("	");
+		} };
+	},
+	addProseMirrorPlugins() {
+		return [new Plugin({ props: { handleClickOn: (view, _position, node, nodePosition, _event, direct) => {
+			if (!view.editable || !direct || !["image", "horizontalRule"].includes(node.type.name)) return false;
+			view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePosition)));
+			view.focus();
+			return true;
+		} } })];
+	}
+});
+//#endregion
 //#region src/editor/extensions/list-behavior.ts
 /**
 * Looma list behavior extension:
@@ -9342,7 +9793,8 @@ function getLoomaTableExtensions() {
 * the code and explicit language stay in the document schema.
 */
 function getDefaultEditorExtensions(options = {}) {
-	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, linkBaseUrl, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeLowlight, codeBlockNodeView } = options;
+	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, linkBaseUrl, imageInline = false, imageNodeView, dividerNodeView, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeLowlight, codeBlockNodeView, tableOfContentsNodeView, expandNodeView } = options;
+	const image = LoomaImage.configure({ inline: imageInline });
 	const codeBlock = LoomaCodeBlock.configure({ lowlight: codeLowlight ?? createLowlight(codeLanguages) });
 	return [
 		Document,
@@ -9365,7 +9817,9 @@ function getDefaultEditorExtensions(options = {}) {
 		Blockquote,
 		LoomaCallout,
 		LoomaChip,
-		HorizontalRule,
+		LoomaExpand.configure({ nodeView: expandNodeView ?? null }),
+		LoomaTableOfContents.configure({ nodeView: tableOfContentsNodeView ?? null }),
+		dividerNodeView ? HorizontalRule.extend({ addNodeView: () => dividerNodeView }) : HorizontalRule,
 		HardBreak,
 		History,
 		Dropcursor,
@@ -9378,7 +9832,7 @@ function getDefaultEditorExtensions(options = {}) {
 			}
 		}),
 		...linkBaseUrl ? [createSiteRelativeLinks(linkBaseUrl)] : [],
-		Image.configure({ inline: imageInline }),
+		imageNodeView ? image.extend({ addNodeView: () => imageNodeView }) : image,
 		(disableHighlight ? StoredOnlyHighlight : Highlight).configure({ multicolor: false }),
 		Code,
 		LoomaSmartPaste,
@@ -9391,7 +9845,8 @@ function getDefaultEditorExtensions(options = {}) {
 		...mention ? [mention] : [],
 		LoomaTableKit,
 		LoomaListBehavior,
-		LoomaActiveBlock
+		LoomaActiveBlock,
+		LoomaBlockSelection
 	];
 }
 //#endregion
@@ -9833,7 +10288,8 @@ var CALLOUT_COMMANDS = [
 * Builds Looma's default command policy as fresh objects for one editor.
 * Image and link commands delegate their picker because Looma does not own
 * upload, persistence, or destination search. Link appears only when a picker
-* callback is supplied, so a headless default inventory has no dead action.
+* callback is supplied. Image follows the same rule, so a headless inventory
+* has no dead picker actions.
 *
 * @ownership Returned command objects belong to the caller and are recreated
 * per call so one editor cannot mutate another editor's command inventory.
@@ -9943,7 +10399,8 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 				"chip",
 				"label",
 				"badge",
-				"tag"
+				"tag",
+				"status"
 			],
 			command: ({ editor, range }) => {
 				if (editor.chain().focus().deleteRange(range).setTextSelection(range.from).insertLoomaChip({ label: "" }).run()) onOpenChipEditor?.(editor, range.from);
@@ -9990,6 +10447,34 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 				insertTableAtRange(editor, range);
 			}
 		},
+		{
+			title: "Table of contents",
+			description: "Automatic links to document headings",
+			icon: "list",
+			keywords: [
+				"toc",
+				"contents",
+				"tableofcontents",
+				"outline"
+			],
+			command: ({ editor, range }) => {
+				editor.chain().focus().deleteRange(range).insertLoomaTableOfContents().run();
+			}
+		},
+		{
+			title: "Expand",
+			description: "Collapsible section with a summary",
+			icon: "chevron-down",
+			keywords: [
+				"expand",
+				"toggle",
+				"details",
+				"collapse"
+			],
+			command: ({ editor, range }) => {
+				editor.chain().focus().deleteRange(range).insertLoomaExpand().run();
+			}
+		},
 		{
 			title: "Divider",
 			description: "Horizontal rule",
@@ -10018,7 +10503,7 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 				onOpenLinkEditor();
 			}
 		}] : [],
-		{
+		...onOpenImagePicker ? [{
 			title: "Image",
 			description: "Upload an image",
 			icon: "image",
@@ -10032,8 +10517,87 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 				editor.chain().focus().deleteRange(range).run();
 				onOpenImagePicker?.();
 			}
+		}] : []
+	].map((command) => ({
+		...command,
+		id: command.title.toLowerCase().replaceAll(" ", "-"),
+		group: CALLOUT_COMMANDS.some((callout) => callout.title === command.title) ? "Callouts" : [
+			"Chip",
+			"Inline code",
+			"Link",
+			"Image",
+			"Table",
+			"Table of contents",
+			"Expand"
+		].includes(command.title) ? "Insertions" : "Basic blocks",
+		isAvailable: (context) => canRunDefaultCommand(command.title, context)
+	})).sort((a, b) => [
+		"Basic blocks",
+		"Callouts",
+		"Insertions"
+	].indexOf(a.group) - [
+		"Basic blocks",
+		"Callouts",
+		"Insertions"
+	].indexOf(b.group));
+}
+function canRunDefaultCommand(title, { editor, range }) {
+	const chain = editor.can().chain().deleteRange(range);
+	switch (title) {
+		case "Text": return editor.isActive("paragraph") || chain.setParagraph().run();
+		case "Heading 1": return editor.isActive("heading", { level: 1 }) || chain.setHeading({ level: 1 }).run();
+		case "Heading 2": return editor.isActive("heading", { level: 2 }) || chain.setHeading({ level: 2 }).run();
+		case "Heading 3": return editor.isActive("heading", { level: 3 }) || chain.setHeading({ level: 3 }).run();
+		case "Bullet list": return chain.toggleBulletList().run();
+		case "Numbered list": return chain.toggleOrderedList().run();
+		case "Checklist": return chain.toggleTaskList().run();
+		case "Blockquote": return chain.toggleBlockquote().run();
+		case "Info": return chain.setLoomaCallout("info").run();
+		case "Note": return chain.setLoomaCallout("note").run();
+		case "Warning": return chain.setLoomaCallout("warning").run();
+		case "Chip": return chain.insertLoomaChip({ label: "" }).run();
+		case "Inline code": return chain.toggleCode().run();
+		case "Code block": return chain.toggleCodeBlock().run();
+		case "Table": return chain.insertTable({
+			rows: 3,
+			cols: 3,
+			withHeaderRow: true
+		}).run();
+		case "Table of contents": return chain.insertLoomaTableOfContents().run();
+		case "Expand": return chain.insertLoomaExpand().run();
+		case "Divider": return chain.setHorizontalRule().run();
+		default: return chain.run();
+	}
+}
+/**
+* Ranks exact names/aliases before partial matches, then matching categories.
+* Other ties retain inventory order.
+* @contract Capability checks run against the current range; a failing host
+* predicate omits that command rather than exposing an action that may destroy text.
+*/
+function filterLoomaSlashCommands(commands, query, context) {
+	const term = query.toLowerCase().trim();
+	return commands.map((command, index) => {
+		const names = [
+			command.title,
+			...command.keywords,
+			command.id ?? ""
+		].map((name) => name.toLowerCase());
+		const rank = !term || names.includes(term) ? 0 : names.some((name) => name.startsWith(term)) ? 1 : names.some((name) => name.includes(term)) ? 2 : 3;
+		let available = true;
+		if (context && command.isAvailable) try {
+			available = command.isAvailable(context);
+		} catch {
+			available = false;
 		}
-	];
+		return {
+			command,
+			index,
+			rank,
+			groupMatch: Boolean(term && command.group?.toLowerCase().startsWith(term)),
+			available
+		};
+	}).filter((item) => item.rank < 3 && item.available).sort((a, b) => a.rank - b.rank || Number(b.groupMatch) - Number(a.groupMatch) || a.index - b.index).map((item) => item.command);
 }
 var EMPTY_STATE = {
 	active: false,
@@ -10041,7 +10605,8 @@ var EMPTY_STATE = {
 	selectedIndex: 0,
 	query: "",
 	rect: null,
-	select: null
+	select: null,
+	highlight: null
 };
 /**
 * Framework-neutral slash-command extension used by the turnkey editor.
@@ -10058,10 +10623,25 @@ var LoomaSlashCommand = Extension.create({
 	addOptions() {
 		return { commands: getDefaultSlashCommands() };
 	},
+	addStorage: () => ({ dismiss: () => {} }),
+	addCommands() {
+		return { dismissLoomaSlashMenu: () => ({ dispatch }) => {
+			if (dispatch) this.storage.dismiss();
+			return true;
+		} };
+	},
 	addProseMirrorPlugins() {
 		let selectedIndex = 0;
 		let currentProps = null;
+		let generation = 0;
+		let dismissed = null;
+		const isCurrent = (props) => {
+			const state = SuggestionPluginKey.getState(this.editor.state);
+			return state?.active && state.query === props.query && state.range.from === props.range.from && state.range.to === props.range.to;
+		};
 		const publish = (props) => {
+			const revision = ++generation;
+			const document = this.editor.state.doc;
 			if (!props) {
 				this.options.onStateChange?.({ ...EMPTY_STATE });
 				return;
@@ -10073,23 +10653,55 @@ var LoomaSlashCommand = Extension.create({
 				query: props.query,
 				rect: props.clientRect?.() ?? null,
 				select: (index) => {
+					if (revision !== generation || props !== currentProps || document !== this.editor.state.doc || !this.editor.isEditable || !isCurrent(props)) return;
 					const item = props.items[index];
-					if (item) props.command(item);
+					if (item && filterLoomaSlashCommands([item], "", {
+						editor: this.editor,
+						range: props.range
+					}).length) props.command(item);
+				},
+				highlight: (index) => {
+					if (revision !== generation || props !== currentProps || index < 0 || index >= props.items.length) return;
+					selectedIndex = index;
+					publish(props);
 				}
 			});
 		};
+		this.storage.dismiss = () => {
+			const range = SuggestionPluginKey.getState(this.editor.state)?.range;
+			if (range) dismissed = {
+				...range,
+				document: this.editor.state.doc
+			};
+			currentProps = null;
+			publish(null);
+		};
 		return [Suggestion({
 			editor: this.editor,
 			char: "/",
 			allowSpaces: false,
 			startOfLine: false,
-			items: ({ query }) => {
-				const normalized = query.toLowerCase().trim();
-				const commands = this.options.commands.length > 0 ? this.options.commands : getDefaultSlashCommands(this.options.onOpenImagePicker, this.options.onOpenChipEditor);
-				if (!normalized) return commands;
-				return commands.filter((command) => command.title.toLowerCase().includes(normalized) || command.keywords.some((keyword) => keyword.includes(normalized)));
+			allow: ({ state, range }) => {
+				if (dismissed?.document === state.doc && dismissed.from === range.from && dismissed.to === range.to) return false;
+				const { $from } = state.selection;
+				for (let depth = $from.depth; depth >= 0; depth--) if ($from.node(depth).type.spec.code) return false;
+				return !state.schema.marks.code?.isInSet(state.storedMarks ?? $from.marks());
+			},
+			items: ({ query, editor }) => {
+				const range = SuggestionPluginKey.getState(editor.state)?.range ?? {
+					from: editor.state.selection.from,
+					to: editor.state.selection.to
+				};
+				return filterLoomaSlashCommands(this.options.commands, query, {
+					editor,
+					range
+				});
 			},
 			command: ({ editor, range, props }) => {
+				if (!editor.isEditable || !currentProps || !isCurrent(currentProps) || !this.options.commands.includes(props) || !filterLoomaSlashCommands([props], "", {
+					editor,
+					range
+				}).length) return;
 				props.command({
 					editor,
 					range
@@ -10097,11 +10709,13 @@ var LoomaSlashCommand = Extension.create({
 			},
 			render: () => ({
 				onStart: (props) => {
+					if (!isCurrent(props)) return;
 					currentProps = props;
 					selectedIndex = 0;
 					publish(props);
 				},
 				onUpdate: (props) => {
+					if (!isCurrent(props)) return;
 					currentProps = props;
 					if (selectedIndex >= props.items.length) selectedIndex = 0;
 					publish(props);
@@ -10124,8 +10738,7 @@ var LoomaSlashCommand = Extension.create({
 						return true;
 					}
 					if (event.key === "Escape") {
-						currentProps = null;
-						publish(null);
+						this.editor.commands.dismissLoomaSlashMenu();
 						return true;
 					}
 					return false;
@@ -10156,4 +10769,4 @@ function createLoomaSlashCommandExtension(options = {}) {
 	});
 }
 //#endregion
-export { LoomaChip as A, LoomaMentionSuggestionPluginKey as C, filterLoomaMentionItems as D, MAX_MENTION_RESULT_LIMIT as E, LOOMA_ACTIVE_BLOCK_CLASS as F, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS as I, LoomaActiveBlock as L, LOOMA_CALLOUT_TONES as M, LoomaCallout as N, normalizeMentionResultLimit as O, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS as P, LoomaActiveBlockPluginKey as R, siteRelativeHref as S, DEFAULT_MENTION_RESULT_LIMIT as T, getActiveTableCellBackground as _, handleTableAction as a, LoomaSmartPaste as b, normalizeActiveTableColumnWidths as c, getDefaultEditorExtensions as d, getLoomaTableExtensions as f, getActiveTableCellAlignment as g, LoomaTableHeader as h, getActiveTableUiState as i, normalizeLoomaChipColor as j, LOOMA_CHIP_COLORS as k, shouldShowTextFormattingToolbar as l, LoomaTableCell as m, createLoomaSlashCommandExtension as n, handleTableOverlayAction as o, LoomaTable as p, getDefaultSlashCommands as r, insertTableAtRange as s, LoomaSlashCommand as t, LoomaTableKit as u, setActiveTableCellAlignment as v, createLoomaMentionExtension as w, createSiteRelativeLinks as x, setActiveTableCellBackground as y };
+export { LoomaImage as A, normalizeLoomaChipColor as B, siteRelativeHref as C, MAX_MENTION_RESULT_LIMIT as D, DEFAULT_MENTION_RESULT_LIMIT as E, normalizeTableOfContentsConfig as F, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS as G, LoomaCallout as H, LoomaExpand as I, LoomaActiveBlock as K, revealLoomaExpandAt as L, normalizeImagePlacement as M, LoomaTableOfContents as N, filterLoomaMentionItems as O, getTableOfContentsEntries as P, LOOMA_CHIP_COLORS as R, createSiteRelativeLinks as S, createLoomaMentionExtension as T, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS as U, LOOMA_CALLOUT_TONES as V, LOOMA_ACTIVE_BLOCK_CLASS as W, getActiveTableCellAlignment as _, getActiveTableUiState as a, setActiveTableCellBackground as b, insertTableAtRange as c, LoomaTableKit as d, getDefaultEditorExtensions as f, LoomaTableHeader as g, LoomaTableCell as h, getDefaultSlashCommands as i, normalizeImageDimension as j, normalizeMentionResultLimit as k, normalizeActiveTableColumnWidths as l, LoomaTable as m, createLoomaSlashCommandExtension as n, handleTableAction as o, getLoomaTableExtensions as p, LoomaActiveBlockPluginKey as q, filterLoomaSlashCommands as r, handleTableOverlayAction as s, LoomaSlashCommand as t, shouldShowTextFormattingToolbar as u, getActiveTableCellBackground as v, LoomaMentionSuggestionPluginKey as w, LoomaSmartPaste as x, setActiveTableCellAlignment as y, LoomaChip as z };