@aicayzer/inkkit 0.7.1 → 0.7.3

package/dist/chunks/{core-Bn6QiQSD.js → core-BI-sSLEL.js}

@@ -22786,7 +22786,7 @@ function nodeSize(node) {
 function isElt(node) {
 	return node.nodeType == 1;
 }
-function isText$1(node) {
+function isText$2(node) {
 	return node.nodeType == 3;
 }
 function contains(parent, child) {
@@ -22794,7 +22794,7 @@ function contains(parent, child) {
 }
 function textNodeBefore$1(node, offset) {
 	for (;;) {
-		if (isText$1(node) && offset) return node;
+		if (isText$2(node) && offset) return node;
 		if (isElt(node) && offset > 0) {
 			if (node.contentEditable == "false") return null;
 			node = node.childNodes[offset - 1];
@@ -22807,7 +22807,7 @@ function textNodeBefore$1(node, offset) {
 }
 function textNodeAfter$1(node, offset) {
 	for (;;) {
-		if (isText$1(node) && offset < node.nodeValue.length) return node;
+		if (isText$2(node) && offset < node.nodeValue.length) return node;
 		if (isElt(node) && offset < node.childNodes.length) {
 			if (node.contentEditable == "false") return null;
 			node = node.childNodes[offset];
@@ -23014,7 +23014,7 @@ function findOffsetInNode(node, coords) {
 	for (let child = node.firstChild, childIndex = 0; child; child = child.nextSibling, childIndex++) {
 		let rects;
 		if (isElt(child)) rects = child.getClientRects();
-		else if (isText$1(child)) rects = textRange$1(child).getClientRects();
+		else if (isText$2(child)) rects = textRange$1(child).getClientRects();
 		else continue;
 		for (let i = 0; i < rects.length; i++) {
 			let rect = rects[i];
@@ -23025,7 +23025,7 @@ function findOffsetInNode(node, coords) {
 				if (dx < dxClosest) {
 					closest = child;
 					dxClosest = dx;
-					coordsClosest = dx && isText$1(closest) ? {
+					coordsClosest = dx && isText$2(closest) ? {
 						left: rect.right < coords.left ? rect.right : rect.left,
 						top: coords.top
 					} : coords;
@@ -23047,7 +23047,7 @@ function findOffsetInNode(node, coords) {
 		coordsClosest = coordsBelow;
 		dxClosest = 0;
 	}
-	if (closest && isText$1(closest)) return findOffsetInText(closest, coordsClosest);
+	if (closest && isText$2(closest)) return findOffsetInText(closest, coordsClosest);
 	if (!closest || dxClosest) return {
 		node,
 		offset
@@ -23176,7 +23176,7 @@ var BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
 function coordsAtPos(view, pos, side) {
 	let { node, offset, atom } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
 	let supportEmptyRange = webkit || gecko;
-	if (isText$1(node)) {
+	if (isText$2(node)) {
 		if (supportEmptyRange && (BIDI.test(node.nodeValue) || (side < 0 ? !offset : offset == node.nodeValue.length))) {
 			let rect = singleRect(textRange$1(node, offset, offset), side);
 			if (gecko && offset && /\s/.test(node.nodeValue[offset - 1]) && offset < node.nodeValue.length) {
@@ -23213,16 +23213,16 @@ function coordsAtPos(view, pos, side) {
 	}
 	if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
 		let before = node.childNodes[offset - 1];
-		let target = isText$1(before) ? textRange$1(before, nodeSize(before) - (supportEmptyRange ? 0 : 1)) : isElt(before) && (before.nodeName != "BR" || !before.nextSibling) ? before : null;
+		let target = isText$2(before) ? textRange$1(before, nodeSize(before) - (supportEmptyRange ? 0 : 1)) : isElt(before) && (before.nodeName != "BR" || !before.nextSibling) ? before : null;
 		if (target) return flattenV(singleRect(target, 1), false);
 	}
 	if (atom == null && offset < nodeSize(node)) {
 		let after = node.childNodes[offset];
 		while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords) after = after.nextSibling;
-		let target = !after ? null : isText$1(after) ? textRange$1(after, 0, supportEmptyRange ? 0 : 1) : isElt(after) ? after : null;
+		let target = !after ? null : isText$2(after) ? textRange$1(after, 0, supportEmptyRange ? 0 : 1) : isElt(after) ? after : null;
 		if (target) return flattenV(singleRect(target, -1), true);
 	}
-	return flattenV(singleRect(isText$1(node) ? textRange$1(node) : node, -side), side >= 0);
+	return flattenV(singleRect(isText$2(node) ? textRange$1(node) : node, -side), side >= 0);
 }
 function flattenV(rect, left) {
 	if (rect.width == 0) return rect;
@@ -23273,7 +23273,7 @@ function endOfTextblockVertical(view, state, dir) {
 		for (let child = dom.firstChild; child; child = child.nextSibling) {
 			let boxes;
 			if (isElt(child)) boxes = child.getClientRects();
-			else if (isText$1(child)) boxes = textRange$1(child, 0, child.nodeValue.length).getClientRects();
+			else if (isText$2(child)) boxes = textRange$1(child, 0, child.nodeValue.length).getClientRects();
 			else continue;
 			for (let i = 0; i < boxes.length; i++) {
 				let box = boxes[i];
@@ -23574,7 +23574,7 @@ var ViewDesc = class {
 		let brKludge = false;
 		if ((gecko || safari$1) && anchor == head) {
 			let { node, offset } = anchorDOM;
-			if (isText$1(node)) {
+			if (isText$2(node)) {
 				brKludge = !!(offset && node.nodeValue[offset - 1] == "\n");
 				if (brKludge && offset == node.nodeValue.length) for (let scan = node, after; scan; scan = scan.parentNode) {
 					if (after = scan.nextSibling) {
@@ -23794,7 +23794,7 @@ var NodeViewDesc = class NodeViewDesc extends ViewDesc {
 		let dom = spec && spec.dom, contentDOM = spec && spec.contentDOM;
 		if (node.isText) {
 			if (!dom) dom = document.createTextNode(node.text);
-			else if (!isText$1(dom)) throw new RangeError("Text must be rendered as a DOM text node");
+			else if (!isText$2(dom)) throw new RangeError("Text must be rendered as a DOM text node");
 		} else if (!dom) {
 			let spec = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node), null, node.attrs);
 			({dom, contentDOM} = spec);
@@ -24698,7 +24698,7 @@ function skipIgnoredNodesBefore(view) {
 		if (isIgnorable(before, -1)) {
 			moveNode = node;
 			moveOffset = --offset;
-		} else if (isText$1(before)) {
+		} else if (isText$2(before)) {
 			node = before;
 			offset = node.nodeValue.length;
 		} else break;
@@ -24766,7 +24766,7 @@ function textNodeAfter(node, offset) {
 	}
 	while (node && offset < node.childNodes.length) {
 		let next = node.childNodes[offset];
-		if (isText$1(next)) return next;
+		if (isText$2(next)) return next;
 		if (isElt(next) && next.contentEditable == "false") break;
 		node = next;
 		offset = 0;
@@ -24779,14 +24779,14 @@ function textNodeBefore(node, offset) {
 	}
 	while (node && offset) {
 		let next = node.childNodes[offset - 1];
-		if (isText$1(next)) return next;
+		if (isText$2(next)) return next;
 		if (isElt(next) && next.contentEditable == "false") break;
 		node = next;
 		offset = node.childNodes.length;
 	}
 }
 function setSelFocus(view, node, offset) {
-	if (!isText$1(node)) {
+	if (!isText$2(node)) {
 		let before, after;
 		if (after = textNodeAfter(node, offset)) {
 			node = after;
@@ -25534,7 +25534,7 @@ editHandlers.compositionstart = editHandlers.compositionupdate = (view) => {
 				for (let node = sel.focusNode, offset = sel.focusOffset; node && isElt(node) && offset != 0;) {
 					let before = offset < 0 ? node.lastChild : node.childNodes[offset - 1];
 					if (!before) break;
-					if (isText$1(before)) {
+					if (isText$2(before)) {
 						let sel = view.domSelection();
 						if (sel) sel.collapse(before, before.nodeValue.length);
 						break;
@@ -26485,7 +26485,7 @@ var DOMObserver = class {
 		let desc = container && this.view.docView.nearestDesc(container);
 		if (desc && desc.ignoreMutation({
 			type: "selection",
-			target: isText$1(container) ? container.parentNode : container
+			target: isText$2(container) ? container.parentNode : container
 		})) {
 			this.setCurSelection();
 			return true;
@@ -26566,7 +26566,7 @@ var DOMObserver = class {
 			for (let i = 0; i < mut.addedNodes.length; i++) {
 				let node = mut.addedNodes[i];
 				added.push(node);
-				if (isText$1(node)) this.lastChangedTextNode = node;
+				if (isText$2(node)) this.lastChangedTextNode = node;
 			}
 			if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target)) return {
 				from: desc.posBefore,
@@ -27863,7 +27863,7 @@ function prepareViewDom(dom) {
 	dom.classList.add("editor");
 	dom.setAttribute("role", "textbox");
 }
-var key$3 = new PluginKey("MILKDOWN_VIEW_CLEAR");
+var key$4 = new PluginKey("MILKDOWN_VIEW_CLEAR");
 var editorView = (ctx) => {
 	ctx.inject(rootCtx, document.body).inject(editorViewCtx, {}).inject(editorViewOptionsCtx, {}).inject(rootDOMCtx, null).inject(rootAttrsCtx, {}).inject(editorViewTimerCtx, [EditorStateReady, PasteRulesReady]).record(EditorViewReady);
 	return async () => {
@@ -27871,7 +27871,7 @@ var editorView = (ctx) => {
 		const root = ctx.get(rootCtx) || document.body;
 		const el = typeof root === "string" ? document.querySelector(root) : root;
 		ctx.update(prosePluginsCtx, (xs) => [new Plugin({
-			key: key$3,
+			key: key$4,
 			view: (editorView) => {
 				const container = el ? createViewContainer(el, ctx) : void 0;
 				const handleDOM = () => {
@@ -28375,6 +28375,7 @@ var defaultLabels = {
 	copyCode: "Copy",
 	codeLanguage: "Code language",
 	codeLanguageSearch: "Search languages",
+	codeWrap: "Wrap code",
 	codeAuto: "Auto",
 	codePlainText: "Plain text",
 	expandCallout: "Expand",
@@ -35804,10 +35805,10 @@ var ie_edge = /Edge\/(\d+)/.exec(agent);
 var ie_upto10 = /MSIE \d/.exec(agent);
 var ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent);
 var safari = !!!(ie_upto10 || ie_11up || ie_edge) && !!nav && /Apple Computer/.test(nav.vendor);
-var key$2 = new PluginKey("safari-ime-span");
+var key$3 = new PluginKey("safari-ime-span");
 var isComposing = false;
 var spec = {
-	key: key$2,
+	key: key$3,
 	props: {
 		decorations: createDecorations,
 		handleDOMEvents: {
@@ -35835,7 +35836,7 @@ function createSpan(view) {
 	span.className = "ProseMirror-safari-ime-span";
 	return span;
 }
-var imeSpan = new Plugin(safari ? spec : { key: key$2 });
+var imeSpan = new Plugin(safari ? spec : { key: key$3 });
 //#endregion
 //#region node_modules/.pnpm/ccount@2.0.1/node_modules/ccount/index.js
 /**
@@ -39989,8 +39990,8 @@ var plugins = [
 var authoredSourcesCtx = $ctx(null, "inkkitAuthoredSources");
 /** The block types a conversion changes. Comment and literal blocks also hold code, but keep their own syntax. */
 var isCode$1 = (type) => type.name === "code_block";
-var isText = (type) => type.name === "paragraph" || type.name === "heading";
-var convertible = (type) => isCode$1(type) || isText(type);
+var isText$1 = (type) => type.name === "paragraph" || type.name === "heading";
+var convertible = (type) => isCode$1(type) || isText$1(type);
 var keepsSyntax = (type) => type.name === "comment_block" || type.name === "literal_markdown";
 /** The Markdown of a textblock's inline content, as InkKit writes it. */
 function writtenInlineSource(ctx, node) {
@@ -40141,7 +40142,7 @@ function joinKeepingSource(ctx, dir) {
 		const pair = [neighbour.type, $edge.parent.type];
 		if (!neighbour.isTextblock || !neighbour.content.size || !$edge.parent.content.size || dir < 0 && undoInputRule(state) || dir < 0 && $edge.parent.type.name === "heading") return false;
 		if (neighbour.type !== $edge.parent.type && pair.some(keepsSyntax)) return true;
-		if (!pair.some(isCode$1) || !pair.some(isText)) return false;
+		if (!pair.some(isCode$1) || !pair.some(isText$1)) return false;
 		const before = dir < 0 ? neighbour : $edge.parent;
 		const cut = dir < 0 ? $edge.before() : $edge.after();
 		if (!dispatch) return true;
@@ -40553,6 +40554,7 @@ function parseLinkedSyntax(raw, inTable = false) {
 	const prefix = embed ? "![[" : "[[";
 	if (!source.startsWith(prefix) || !source.endsWith("]]")) return void 0;
 	const content = source.slice(prefix.length, -2);
+	if (!embed) return wikiLinkParts(raw, content, inTable);
 	const parts = {
 		target: "",
 		fragment: "",
@@ -40561,7 +40563,7 @@ function parseLinkedSyntax(raw, inTable = false) {
 	let section = "target", hasFragment = false, hasAlias = false;
 	for (let index = 0; index < content.length; index++) {
 		const character = content[index];
-		if (character === "\\" && embed) {
+		if (character === "\\") {
 			const escaped = content[++index];
 			if (!escaped || !"[]|#\\".includes(escaped)) return void 0;
 			parts[section] += escaped;
@@ -40593,9 +40595,82 @@ function parseLinkedSyntax(raw, inTable = false) {
 		inTable
 	};
 }
+/**
+* A wiki link's parts, read as Marfa reads them (`device/link-parts-split`): the name is the text
+* before the first `|` or `#`; a `#` before any `|` starts the heading, which runs to the next
+* `|`; the alias is everything after that `|`, so it can hold `|`, `#` and brackets. An empty
+* heading or alias counts as none. A backslash is text (`device/link-backslash`).
+*/
+function wikiLinkParts(raw, content, inTable) {
+	if (content.includes("[[") || content.includes("]]") || content.endsWith("]")) return void 0;
+	for (const character of content) if (character.charCodeAt(0) < 32 && character !== "	" || character === "") return void 0;
+	let target = content;
+	let fragment = null;
+	let alias = null;
+	const at = content.search(/[|#]/);
+	if (at >= 0) {
+		target = content.slice(0, at);
+		if (content[at] === "|") alias = content.slice(at + 1);
+		else {
+			const rest = content.slice(at + 1);
+			const bar = rest.indexOf("|");
+			fragment = bar >= 0 ? rest.slice(0, bar) : rest;
+			if (bar >= 0) alias = rest.slice(bar + 1);
+		}
+	}
+	if (fragment != null && !fragment.trim()) fragment = null;
+	if (alias != null && !alias.trim()) alias = null;
+	if (!target.trim() && fragment == null || target.trimStart().startsWith("^") || fragment?.trimStart().startsWith("^")) return void 0;
+	return {
+		raw,
+		target,
+		fragment,
+		label: alias ?? target + (fragment != null ? `#${fragment}` : ""),
+		width: null,
+		embed: false,
+		inTable
+	};
+}
+/**
+* The `[[`…`]]` spans of a line-separated text, bounded as Marfa bounds them: `[` characters pair
+* from the start of each run, the last opening pair before a `]]` on the same line opens the
+* span, and a `[[` with no `]]` after it on its line opens nothing (`device/link-bounds`,
+* `device/link-bounds-pairs`). A span preceded by `!` is an embed. Code and comments should be
+* blanked by the caller, so a `]]` inside them closes nothing.
+*/
+function linkedSpans(text) {
+	const found = [];
+	let open = null;
+	for (let at = 0; at < text.length;) {
+		const character = text[at];
+		if (character === "[" && text[at + 1] === "[") {
+			open = at;
+			at += 2;
+		} else if (character === "]" && text[at + 1] === "]" && open != null) {
+			const embed = open > 0 && text[open - 1] === "!";
+			found.push({
+				from: embed ? open - 1 : open,
+				to: at + 2,
+				embed
+			});
+			open = null;
+			at += 2;
+		} else {
+			if (character === "\n" || character === "\r") open = null;
+			at++;
+		}
+	}
+	return found;
+}
+/**
+* The run of `[` each parse is in: where it began and the last offset tried, so openings pair
+* from the start of the run.
+*/
+var bracketRuns = /* @__PURE__ */ new WeakMap();
 function linkedTokenizer(embed) {
 	return function(effects, ok, nok) {
 		const prefix = embed ? "![[" : "[[";
+		const context = this;
 		let index = 0, raw = "";
 		return opening;
 		function consume(code) {
@@ -40604,24 +40679,43 @@ function linkedTokenizer(embed) {
 		}
 		function opening(code) {
 			if (code !== prefix.charCodeAt(index)) return nok(code);
+			if (!index && !embed) {
+				const offset = context.now().offset;
+				const run = bracketRuns.get(context.parser);
+				if (context.previous === 91 && run?.last === offset - 1) {
+					run.last = offset;
+					if ((offset - run.start) % 2) return nok(code);
+				} else {
+					bracketRuns.set(context.parser, {
+						start: offset,
+						last: offset
+					});
+					if (context.previous === 33) return nok(code);
+				}
+			}
 			if (!index) effects.enter("inkkitLinkedSyntax");
 			consume(code);
 			index++;
 			return index === prefix.length ? body : opening;
 		}
 		function body(code) {
-			if (code === null || code < 32 && code !== -2 && code !== -1 && code !== 9 || code === 91) return nok(code);
+			if (code === null || code < 32 && code !== -2 && code !== -1 && code !== 9 || code === 91 && embed) return nok(code);
 			consume(code);
 			if (code === 92 && embed) return escaped;
+			if (code === 91) return bracket;
 			return code === 93 ? closing : body;
 		}
+		function bracket(code) {
+			if (code === 91) return nok(code);
+			return body(code);
+		}
 		function escaped(code) {
 			if (code === null || code < 32) return nok(code);
 			consume(code);
 			return body;
 		}
 		function closing(code) {
-			if (code !== 93) return nok(code);
+			if (code !== 93) return embed ? nok(code) : body(code);
 			consume(code);
 			if (!parseLinkedSyntax(raw) && !parseLinkedSyntax(raw, true)) return nok(code);
 			effects.exit("inkkitLinkedSyntax");
@@ -40946,8 +41040,7 @@ function linkedSyntax(wikiLinks, files) {
 	const syntax = { text: {} };
 	if (wikiLinks) syntax.text[91] = {
 		name: "inkkitWikiLink",
-		tokenize: linkedTokenizer(false),
-		previous: (code) => code !== 33 && code !== 91
+		tokenize: linkedTokenizer(false)
 	};
 	if (wikiLinks) syntax.text[92] = backslashBeforeWikiLink;
 	if (files) syntax.text[33] = {
@@ -43115,6 +43208,7 @@ function containsUnsupportedLinked(node, source) {
 	const start = node.position?.start.offset, end = node.position?.end.offset;
 	if (start == null || end == null || node.type === "definition") return false;
 	const supported = [];
+	const text = source.slice(start, end).split("");
 	const visit = (child) => {
 		if ([
 			"inkkitWikiLink",
@@ -43126,21 +43220,31 @@ function containsUnsupportedLinked(node, source) {
 			"inkkitCommentBlock"
 		].includes(child.type)) {
 			const from = child.position?.start.offset, to = child.position?.end.offset;
-			if (from != null && to != null) supported.push({
-				from,
-				to
-			});
+			if (from != null && to != null) {
+				supported.push({
+					from,
+					to
+				});
+				if (![
+					"inkkitWikiLink",
+					"image",
+					"link"
+				].includes(child.type)) {
+					for (let at = Math.max(from, start); at < Math.min(to, end); at++) if (text[at - start] !== "\n" && text[at - start] !== "\r") text[at - start] = " ";
+				}
+			}
 			return;
 		}
 		if ("children" in child) child.children.forEach(visit);
 	};
 	visit(node);
-	for (const match of source.slice(start, end).matchAll(/!?\[\[[^\r\n]*?\]\]/g)) {
-		const from = start + match.index, to = from + match[0].length;
+	for (const span of linkedSpans(text.join(""))) {
+		const from = start + span.from, to = start + span.to;
 		let escapes = 0;
 		while (from - escapes > 0 && source[from - escapes - 1] === "\\") escapes++;
 		if (escapes % 2) continue;
-		if (!supported.some((span) => span.from <= from && span.to >= to)) return true;
+		if (!supported.some((covered) => covered.from <= from && covered.to >= to)) return true;
+		if (!span.embed && source[from - 1] === "[") return true;
 	}
 	return false;
 }
@@ -47521,7 +47625,7 @@ async function portableClipboard(content, schema, markdown, adapter, context, co
 }
 //#endregion
 //#region src/reference-clipboard.ts
-function key$1(node) {
+function key$2(node) {
 	if (node.type.name === "reference_definition") return `link:${node.attrs.identifier}`;
 	if (node.type.name === "footnote_definition") return `footnote:${node.attrs.identifier}`;
 }
@@ -47536,7 +47640,7 @@ function used(content) {
 function selectionContent(doc, content) {
 	const definitions = /* @__PURE__ */ new Map();
 	doc.descendants((node) => {
-		const id = key$1(node);
+		const id = key$2(node);
 		if (id && !definitions.has(id)) definitions.set(id, node);
 	});
 	const required = used(content);
@@ -47545,7 +47649,7 @@ function selectionContent(doc, content) {
 		if (definition) for (const dependency of used(definition.content)) required.add(dependency);
 	}
 	const complete = (node) => {
-		const id = key$1(node);
+		const id = key$2(node);
 		if (id && required.has(id) && definitions.has(id)) return definitions.get(id);
 		if (node.isText) return node;
 		const children = [];
@@ -47557,7 +47661,7 @@ function selectionContent(doc, content) {
 	content = Fragment.fromArray(selected);
 	const included = /* @__PURE__ */ new Set();
 	content.descendants((node) => {
-		const id = key$1(node);
+		const id = key$2(node);
 		if (id) included.add(id);
 	});
 	const extra = [];
@@ -47579,7 +47683,7 @@ function referenceMetadata(ctx, doc, content) {
 	content = shareableFragment(content);
 	let references = false, index = 0;
 	const rewrite = (node) => {
-		if (key$1(node) || node.type.name === "footnote_reference" || node.marks.some((mark) => mark.type.name === "link" && mark.attrs.identifier)) references = true;
+		if (key$2(node) || node.type.name === "footnote_reference" || node.marks.some((mark) => mark.type.name === "link" && mark.attrs.identifier)) references = true;
 		if (node.type.name === "image") return node.type.create({
 			...node.attrs,
 			src: `inkkit-clipboard-image:${index++}`
@@ -47597,7 +47701,7 @@ function allLabels(doc) {
 	const labels = /* @__PURE__ */ new Map([["link", /* @__PURE__ */ new Set()], ["footnote", /* @__PURE__ */ new Set()]]);
 	doc.descendants((node) => {
 		if (isCode(node)) return false;
-		const id = key$1(node);
+		const id = key$2(node);
 		if (id) {
 			const separator = id.indexOf(":");
 			labels.get(id.slice(0, separator)).add(id.slice(separator + 1));
@@ -56789,14 +56893,37 @@ var codeLanguages = [
 ];
 //#endregion
 //#region src/code-controls.ts
+var codeControlKey = new PluginKey("codeControls");
 var codeControlCtx = $ctx((operation) => operation(), "inkkitCodeControl");
 function codeControlsPlugin(visibleRect) {
 	return $prose((ctx) => new Plugin({
-		key: new PluginKey("codeControls"),
+		key: codeControlKey,
+		state: {
+			init: () => DecorationSet.empty,
+			apply(transaction, wrapped) {
+				let next = transaction.docChanged ? DecorationSet.create(transaction.doc, wrapped.find().flatMap((decoration) => {
+					const mapped = transaction.mapping.mapResult(decoration.from + 1, -1);
+					if (mapped.deletedAcross) return [];
+					const inside = mapped.pos;
+					const node = inside > 0 ? transaction.doc.nodeAt(inside - 1) : null;
+					return node?.type.name === "code_block" ? [Decoration.node(inside - 1, inside - 1 + node.nodeSize, { class: "inkkit-code-wrapped" })] : [];
+				})) : wrapped;
+				const toggle = transaction.getMeta(codeControlKey);
+				if (toggle) {
+					const node = transaction.doc.nodeAt(toggle.position);
+					if (node?.type.name === "code_block") {
+						next = next.remove(next.find(toggle.position, toggle.position + node.nodeSize).filter((decoration) => decoration.from === toggle.position));
+						if (toggle.wrapped) next = next.add(transaction.doc, [Decoration.node(toggle.position, toggle.position + node.nodeSize, { class: "inkkit-code-wrapped" })]);
+					}
+				}
+				return next;
+			}
+		},
 		props: { decorations(state) {
-			const widgets = [];
+			const widgets = [...codeControlKey.getState(state)?.find() ?? []];
 			state.doc.descendants((node, pos) => {
 				if (node.type.name !== "code_block") return true;
+				if (state.selection.$head.pos > pos && state.selection.$head.pos < pos + node.nodeSize) widgets.push(Decoration.node(pos, pos + node.nodeSize, { "data-inkkit-code-active": "" }));
 				const language = String(node.attrs.language ?? "");
 				widgets.push(Decoration.widget(pos + 1, (view, getPos) => {
 					const labels = editorLabels(ctx);
@@ -56848,7 +56975,32 @@ function codeControlsPlugin(visibleRect) {
 						search.setAttribute("aria-label", labels.codeLanguageSearch);
 						const list = document.createElement("span");
 						list.className = "inkkit-code-language-list";
-						popup.append(search, list);
+						const searchRow = document.createElement("span");
+						searchRow.className = "inkkit-code-language-search";
+						const wrap = document.createElement("button");
+						wrap.type = "button";
+						wrap.tabIndex = 0;
+						wrap.className = "inkkit-code-wrap";
+						wrap.setAttribute("aria-label", labels.codeWrap);
+						wrap.title = labels.codeWrap;
+						wrap.innerHTML = "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3 6h18M3 12h15a3 3 0 0 1 0 6h-4m2-2-2 2 2 2M3 18h4\"/></svg>";
+						const isWrapped = () => {
+							const at = getPos();
+							return at != null && Boolean(codeControlKey.getState(view.state)?.find(at - 1, at).some((decoration) => decoration.from === at - 1));
+						};
+						wrap.setAttribute("aria-pressed", String(isWrapped()));
+						wrap.addEventListener("click", () => {
+							if (view.composing || view.state.doc !== captured) return;
+							const at = getPos();
+							if (at == null) return;
+							view.dispatch(view.state.tr.setMeta(codeControlKey, {
+								position: at - 1,
+								wrapped: !isWrapped()
+							}).setMeta("addToHistory", false));
+							wrap.setAttribute("aria-pressed", String(isWrapped()));
+						});
+						searchRow.append(search, wrap);
+						popup.append(searchRow, list);
 						const choices = [
 							["", labels.codeAuto],
 							["text", labels.codePlainText],
@@ -56858,7 +57010,7 @@ function codeControlsPlugin(visibleRect) {
 						const render = () => {
 							list.replaceChildren();
 							for (const [value, name] of choices) {
-								if (!`${value} ${name}`.toLowerCase().includes(search.value.toLowerCase())) continue;
+								if (!`${value} ${name}`.toLowerCase().includes(search.value.trim().toLowerCase())) continue;
 								const option = document.createElement("button");
 								option.type = "button";
 								option.textContent = name;
@@ -56927,10 +57079,10 @@ function codeControlsPlugin(visibleRect) {
 						const bottom = Math.min(window.innerHeight - 8, safe.bottom - 4);
 						const below = Math.max(0, bottom - bounds.bottom - 4);
 						const above = Math.max(0, bounds.top - top - 4);
-						const height = Math.min(320, Math.max(below, above));
-						popup.style.width = `${Math.max(0, Math.min(220, right - left))}px`;
+						const height = Math.min(264, Math.max(below, above));
+						popup.style.width = `${Math.max(0, Math.min(200, right - left))}px`;
 						popup.style.maxHeight = `${height}px`;
-						popup.style.left = `${Math.max(left, Math.min(bounds.right - 220, right - 220))}px`;
+						popup.style.left = `${Math.max(left, Math.min(bounds.right - 200, right - 200))}px`;
 						const menuHeight = Math.min(height, popup.getBoundingClientRect().height);
 						popup.style.top = `${Math.max(top, Math.min(below >= menuHeight ? bounds.bottom + 4 : bounds.top - menuHeight - 4, bottom - menuHeight))}px`;
 						const outside = (event) => {
@@ -57860,9 +58012,9 @@ var dropIndicatorConfig = $ctx({
 	class: "milkdown-drop-indicator"
 }, "dropIndicatorConfig");
 withMeta(dropIndicatorConfig, { displayName: "Ctx<dropIndicatorConfig>" });
-var key = new PluginKey("MILKDOWN_DROP_INDICATOR_DOM");
+var key$1 = new PluginKey("MILKDOWN_DROP_INDICATOR_DOM");
 var dropIndicatorDOMPlugin = $prose((ctx) => new Plugin({
-	key,
+	key: key$1,
 	view: (view) => {
 		const config = ctx.get(dropIndicatorConfig.key);
 		const dom = document.createElement("div");
@@ -58186,6 +58338,197 @@ var placeholderPlugin = $prose((ctx) => new Plugin({
 	} }
 }));
 //#endregion
+//#region src/drawn-selection.ts
+var hostClass$1 = "inkkit-overlay-host";
+var layerClass = "inkkit-selection-layer";
+/** Every text node a range covers, clipped to the range. */
+function* textPieces(range) {
+	const root = range.commonAncestorContainer;
+	const doc = root.ownerDocument ?? root;
+	if (root.nodeType === Node.TEXT_NODE) {
+		yield range;
+		return;
+	}
+	const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+	let node = walker.nextNode();
+	while (node) {
+		if (range.intersectsNode(node)) {
+			const piece = doc.createRange();
+			piece.setStart(node, node === range.startContainer ? range.startOffset : 0);
+			piece.setEnd(node, node === range.endContainer ? range.endOffset : node.length);
+			if (!piece.collapsed) yield piece;
+		} else if (range.comparePoint(node, 0) > 0) return;
+		node = walker.nextNode();
+	}
+}
+/** Groups pieces by visual line within a block and gives each line one height. */
+function bars(pieces) {
+	const lines = [];
+	for (const piece of pieces) {
+		const line = lines.find((candidate) => candidate.block === piece.block && piece.textTop < candidate.textBottom && piece.textBottom > candidate.textTop);
+		if (line) {
+			line.top = Math.min(line.top, piece.top);
+			line.bottom = Math.max(line.bottom, piece.bottom);
+			line.textTop = Math.min(line.textTop, piece.textTop);
+			line.textBottom = Math.max(line.textBottom, piece.textBottom);
+			line.pieces.push(piece);
+		} else lines.push({
+			block: piece.block,
+			top: piece.top,
+			bottom: piece.bottom,
+			textTop: piece.textTop,
+			textBottom: piece.textBottom,
+			pieces: [piece]
+		});
+	}
+	const out = [];
+	for (const line of lines) {
+		line.pieces.sort((a, b) => a.left - b.left);
+		let current;
+		for (const piece of line.pieces) if (current && piece.left <= current.right + 1) current.right = Math.max(current.right, piece.right);
+		else {
+			current = {
+				left: piece.left,
+				right: piece.right,
+				top: line.top,
+				bottom: line.bottom
+			};
+			out.push(current);
+		}
+	}
+	return out;
+}
+/** Draws one view's selection, and redraws it as the view scrolls or resizes. */
+var SelectionLayer = class {
+	view;
+	layer;
+	ranges = [];
+	frame = 0;
+	resize;
+	doc;
+	constructor(view) {
+		this.view = view;
+		this.doc = view.dom.ownerDocument;
+		this.layer = this.doc.createElement("div");
+		this.layer.className = layerClass;
+		this.layer.setAttribute("aria-hidden", "true");
+		const host = view.dom.parentElement;
+		host?.classList.add(hostClass$1);
+		host?.insertBefore(this.layer, host.firstChild);
+		const win = this.doc.defaultView;
+		this.resize = win?.ResizeObserver ? new win.ResizeObserver(() => this.schedule()) : void 0;
+		this.resize?.observe(view.dom);
+		this.doc.addEventListener("scroll", this.schedule, true);
+	}
+	schedule = () => {
+		if (this.frame || !this.ranges.length) return;
+		const win = this.doc.defaultView;
+		if (!win) return;
+		this.frame = win.requestAnimationFrame(() => {
+			this.frame = 0;
+			this.render();
+		});
+	};
+	/**
+	* Draws the ranges. Text inside an element with an opaque background would hide a bar
+	* drawn behind it, so those pieces are returned for the caller to paint another way.
+	*/
+	draw(ranges) {
+		this.ranges = ranges;
+		return this.render();
+	}
+	clear() {
+		this.ranges = [];
+		this.layer.replaceChildren();
+	}
+	render() {
+		const host = this.layer.parentElement;
+		const win = this.doc.defaultView;
+		if (!host || !win || this.view.isDestroyed) return [];
+		const origin = host.getBoundingClientRect();
+		const margin = win.innerHeight;
+		const visibleTop = -margin;
+		const visibleBottom = win.innerHeight + margin;
+		const styles = /* @__PURE__ */ new Map();
+		const style = (element) => {
+			let found = styles.get(element);
+			if (!found) styles.set(element, found = win.getComputedStyle(element));
+			return found;
+		};
+		const opaque = /* @__PURE__ */ new Map();
+		const behindOpaque = (element) => {
+			const known = opaque.get(element);
+			if (known !== void 0) return known;
+			let result = false;
+			if (element !== this.view.dom && element.parentElement) result = backgroundAlpha(style(element).backgroundColor) >= .99 || behindOpaque(element.parentElement);
+			opaque.set(element, result);
+			return result;
+		};
+		const blockRects = /* @__PURE__ */ new Map();
+		const pieces = [];
+		const fallback = [];
+		for (const range of this.ranges) for (const piece of textPieces(range)) {
+			const parent = piece.startContainer.parentElement;
+			if (!parent) continue;
+			if (parent.closest(".ProseMirror-widget")) continue;
+			if (parent.closest("[contenteditable]")?.getAttribute("contenteditable") === "false") continue;
+			const block = parent.closest("p,h1,h2,h3,h4,h5,h6,pre,li,td,th") ?? this.view.dom;
+			let blockRect = blockRects.get(block);
+			if (!blockRect) blockRects.set(block, blockRect = block.getBoundingClientRect());
+			if (blockRect.bottom < visibleTop || blockRect.top > visibleBottom) continue;
+			if (behindOpaque(parent)) {
+				fallback.push(piece);
+				continue;
+			}
+			const lineHeight = Number.parseFloat(style(parent).lineHeight);
+			for (const rect of piece.getClientRects()) {
+				if (!rect.width) continue;
+				const spare = Number.isFinite(lineHeight) && lineHeight > rect.height ? (lineHeight - rect.height) / 2 : 0;
+				pieces.push({
+					block,
+					left: rect.left,
+					right: rect.right,
+					top: rect.top - spare,
+					bottom: rect.bottom + spare,
+					textTop: rect.top,
+					textBottom: rect.bottom
+				});
+			}
+		}
+		const drawn = bars(pieces);
+		const children = this.layer.children;
+		for (let i = 0; i < drawn.length; i++) {
+			const bar = drawn[i];
+			let element = children[i];
+			if (!element) {
+				element = this.doc.createElement("div");
+				this.layer.append(element);
+			}
+			element.style.left = `${bar.left - origin.left}px`;
+			element.style.top = `${bar.top - origin.top}px`;
+			element.style.width = `${bar.right - bar.left}px`;
+			element.style.height = `${bar.bottom - bar.top}px`;
+		}
+		while (children.length > drawn.length) children[children.length - 1].remove();
+		return fallback;
+	}
+	destroy() {
+		if (this.frame) this.doc.defaultView?.cancelAnimationFrame(this.frame);
+		this.resize?.disconnect();
+		this.doc.removeEventListener("scroll", this.schedule, true);
+		this.layer.remove();
+	}
+};
+function backgroundAlpha(color) {
+	if (!color || color === "transparent") return 0;
+	const match = /rgba?\(([^)]+)\)/.exec(color);
+	if (!match) return 1;
+	const parts = match[1].split(/[\s,/]+/).filter(Boolean);
+	if (parts.length < 4) return 1;
+	const alpha = parts[3];
+	return alpha.endsWith("%") ? Number.parseFloat(alpha) / 100 : Number(alpha);
+}
+//#endregion
 //#region src/selection.ts
 /** The stylesheet paints the selection under this name. */
 var name = "inkkit-selection";
@@ -58324,6 +58667,7 @@ var Painter = class Painter {
 	windowFocused;
 	hostActivation = /* @__PURE__ */ new WeakMap();
 	painted;
+	layers = /* @__PURE__ */ new Map();
 	hostActive(view, active) {
 		if (active === null) this.hostActivation.delete(view);
 		else this.hostActivation.set(view, active);
@@ -58339,14 +58683,17 @@ var Painter = class Painter {
 		this.win = doc.defaultView;
 		this.windowFocused = doc.hasFocus();
 	}
-	add(view) {
+	add(view, drawn) {
 		if (!this.views.size) this.listen("add");
 		this.views.set(view, rootOf(view));
+		if (drawn) this.layers.set(view, new SelectionLayer(view));
 		this.sync();
 	}
 	remove(view) {
 		this.views.get(view)?.classList.remove(activeClass);
 		this.views.delete(view);
+		this.layers.get(view)?.destroy();
+		this.layers.delete(view);
 		if (this.owner === view) this.owner = null;
 		this.sync();
 		if (!this.views.size) {
@@ -58391,16 +58738,19 @@ var Painter = class Painter {
 	}
 	sync() {
 		for (const [view, root] of this.views) root.classList.toggle(activeClass, (this.hostActivation.get(view) ?? this.windowFocused) && focused(view));
-		if (!this.custom) return;
+		if (!this.custom && !this.layers.size) return;
 		const { owner } = this;
 		if (owner && this.painted?.owner === owner && this.painted.doc === owner.state.doc && this.painted.selection.eq(owner.state.selection)) return;
+		for (const [view, layer] of this.layers) if (view !== owner) layer.clear();
 		const spans = owner ? covered(owner.state) : [];
 		if (!owner || !spans.length) {
-			CSS.highlights.delete(name);
+			if (this.custom) CSS.highlights.delete(name);
+			if (owner) this.layers.get(owner)?.clear();
 			this.painted = void 0;
 			return;
 		}
-		const highlight = new Highlight();
+		const ranges = [];
+		const highlight = { add: (range) => ranges.push(range) };
 		const contents = blockContents(owner);
 		let blocks = 0;
 		let mapped = true;
@@ -58412,7 +58762,15 @@ var Painter = class Painter {
 		});
 		if (mapped && contents.length === blocks) addBlockRanges(highlight, owner, spans, contents);
 		else for (const span of spans) highlight.add(domRange(owner, span));
-		CSS.highlights.set(name, highlight);
+		const layer = this.layers.get(owner);
+		const painted = layer ? layer.draw(ranges) : ranges;
+		if (this.custom) {
+			if (painted.length) {
+				const highlight = new Highlight();
+				for (const range of painted) highlight.add(range);
+				CSS.highlights.set(name, highlight);
+			} else CSS.highlights.delete(name);
+		}
 		this.painted = {
 			owner,
 			doc: owner.state.doc,
@@ -58420,7 +58778,11 @@ var Painter = class Painter {
 		};
 	}
 };
-var selectionPlugin = $prose(() => {
+/**
+* Paints the selection. With `drawn`, a layer draws it centred on each line of text, and only
+* text it can't draw behind falls back to a custom highlight.
+*/
+var selectionPlugin = (drawn) => $prose(() => {
 	const key = new PluginKey("selection");
 	return new Plugin({
 		key,
@@ -58428,10 +58790,10 @@ var selectionPlugin = $prose(() => {
 			init: () => 0,
 			apply: (tr, count) => tr.selectionSet ? count + 1 : count
 		},
-		props: paintable() ? { attributes: { class: "inkkit-painted-selection" } } : {},
+		props: drawn || paintable() ? { attributes: { class: "inkkit-painted-selection" } } : {},
 		view(view) {
 			const painter = Painter.of(view.dom.ownerDocument);
-			painter.add(view);
+			painter.add(view, drawn);
 			return {
 				update(view, previous) {
 					if (key.getState(view.state) !== key.getState(previous)) painter.take(view);
@@ -58443,6 +58805,238 @@ var selectionPlugin = $prose(() => {
 	});
 });
 //#endregion
+//#region src/drawn-caret.ts
+/** Set on the editable surface while the drawn bar replaces the native caret. */
+var drawnClass = "inkkit-drawn-caret";
+var barClass = "inkkit-caret";
+var hostClass = "inkkit-overlay-host";
+var lineEndKeys = /* @__PURE__ */ new Set(["End"]);
+var lineStartKeys = /* @__PURE__ */ new Set(["Home"]);
+function keyIntent(event, caretY) {
+	if (event.shiftKey || event.altKey) return null;
+	const { key, metaKey, ctrlKey } = event;
+	if (lineEndKeys.has(key) || metaKey && key === "ArrowRight") return { kind: "line-end" };
+	if (lineStartKeys.has(key) || metaKey && key === "ArrowLeft") return { kind: "line-start" };
+	if (ctrlKey && !metaKey && key === "e") return { kind: "line-end" };
+	if (ctrlKey && !metaKey && key === "a") return { kind: "line-start" };
+	if (!metaKey && !ctrlKey && (key === "ArrowUp" || key === "ArrowDown") && caretY !== null) return {
+		kind: "vertical",
+		y: caretY,
+		down: key === "ArrowDown"
+	};
+	return null;
+}
+var isText = (node) => !!node?.isText;
+var DrawnCaret = class {
+	view;
+	bar;
+	intent = null;
+	frame = 0;
+	blink = false;
+	drawn = null;
+	resize;
+	doc;
+	constructor(view) {
+		this.view = view;
+		this.doc = view.dom.ownerDocument;
+		this.bar = this.doc.createElement("div");
+		this.bar.className = barClass;
+		this.bar.setAttribute("aria-hidden", "true");
+		view.dom.parentElement?.classList.add(hostClass);
+		view.dom.parentElement?.appendChild(this.bar);
+		const win = this.doc.defaultView;
+		this.resize = win?.ResizeObserver ? new win.ResizeObserver(() => this.schedule()) : void 0;
+		this.resize?.observe(view.dom);
+		this.doc.addEventListener("selectionchange", this.schedule);
+		this.doc.addEventListener("scroll", this.schedule, true);
+		this.doc.fonts?.ready.then(this.schedule);
+		this.update();
+	}
+	schedule = () => {
+		if (this.frame || this.view.isDestroyed) return;
+		const win = this.doc.defaultView;
+		if (!win) return;
+		this.frame = win.requestAnimationFrame(() => {
+			this.frame = 0;
+			this.update();
+		});
+	};
+	keyDown(event) {
+		this.intent = keyIntent(event, this.drawn ? (this.drawn.top + this.drawn.bottom) / 2 : null);
+	}
+	pointerDown(event) {
+		this.intent = {
+			kind: "point",
+			y: event.clientY
+		};
+	}
+	/** Places the bar, or hands the caret back to the engine where the bar can't stand in. */
+	update() {
+		const { view } = this;
+		if (view.isDestroyed) return;
+		const rect = this.measure();
+		view.dom.classList.toggle(drawnClass, rect !== null);
+		if (!rect) {
+			this.drawn = null;
+			this.bar.style.display = "none";
+			return;
+		}
+		const container = this.bar.parentElement;
+		if (!container) return;
+		const origin = container.getBoundingClientRect();
+		const moved = !this.drawn || this.drawn.left !== rect.left || this.drawn.top !== rect.top || this.drawn.bottom !== rect.bottom;
+		this.drawn = rect;
+		const style = this.bar.style;
+		style.display = "";
+		style.left = `${rect.left - origin.left + container.scrollLeft}px`;
+		style.top = `${rect.top - origin.top + container.scrollTop}px`;
+		style.height = `${rect.bottom - rect.top}px`;
+		if (moved) {
+			this.blink = !this.blink;
+			this.bar.dataset.blink = this.blink ? "a" : "b";
+		}
+	}
+	/** The caret's text rectangle in the viewport, or null where the native caret applies. */
+	measure() {
+		const { view } = this;
+		const { selection } = view.state;
+		if (!view.editable || view.composing || !view.hasFocus() || !(selection instanceof TextSelection) || !selection.empty || !selection.$head.parent.inlineContent) return null;
+		const $head = selection.$head;
+		const before = isText($head.nodeBefore);
+		const after = isText($head.nodeAfter);
+		if (!before && !after) return null;
+		let rect;
+		try {
+			rect = this.coords($head.pos, before, after);
+		} catch {
+			return null;
+		}
+		if (!Number.isFinite(rect.top) || !Number.isFinite(rect.left) || !(rect.bottom > rect.top)) return null;
+		return this.visible($head.pos, rect) ? rect : null;
+	}
+	coords(pos, before, after) {
+		const { view } = this;
+		if (!before) return view.coordsAtPos(pos, 1);
+		if (!after) return view.coordsAtPos(pos, -1);
+		const end = view.coordsAtPos(pos, -1);
+		const start = view.coordsAtPos(pos, 1);
+		if (Math.abs(end.top - start.top) < (start.bottom - start.top) / 2) return start;
+		return this.side(end, start) === -1 ? end : start;
+	}
+	side(end, start) {
+		const intent = this.intent;
+		if (!intent) return 1;
+		switch (intent.kind) {
+			case "line-end": return -1;
+			case "line-start": return 1;
+			case "point": {
+				const distance = (rect) => Math.abs((rect.top + rect.bottom) / 2 - intent.y);
+				return distance(end) < distance(start) ? -1 : 1;
+			}
+			case "vertical": {
+				const middle = (rect) => (rect.top + rect.bottom) / 2;
+				const half = (start.bottom - start.top) / 2;
+				if (intent.down) return middle(end) > intent.y + half ? -1 : 1;
+				return middle(start) < intent.y - half ? 1 : -1;
+			}
+		}
+	}
+	/** Whether a scrolled table or code block shows the caret, as it would clip the native one. */
+	visible(pos, rect) {
+		const { view } = this;
+		let node = view.domAtPos(pos).node;
+		const win = this.doc.defaultView;
+		if (!win) return true;
+		while (node && node !== view.dom) {
+			if (node instanceof Element) {
+				const style = win.getComputedStyle(node);
+				if (style.overflowX !== "visible" || style.overflowY !== "visible") {
+					const box = node.getBoundingClientRect();
+					if (rect.left < box.left - 1 || rect.left > box.right + 1 || rect.bottom < box.top || rect.top > box.bottom) return false;
+				}
+			}
+			node = node.parentNode;
+		}
+		return true;
+	}
+	destroy() {
+		if (this.frame) this.doc.defaultView?.cancelAnimationFrame(this.frame);
+		this.resize?.disconnect();
+		this.doc.removeEventListener("selectionchange", this.schedule);
+		this.doc.removeEventListener("scroll", this.schedule, true);
+		this.view.dom.classList.remove(drawnClass);
+		this.bar.parentElement?.classList.remove(hostClass);
+		this.bar.remove();
+	}
+};
+var key = new PluginKey("inkkitDrawnCaret");
+/**
+* Draws the caret in formatted mode where a fine pointer is the primary input. On touch devices
+* the system draws the caret and the selection handles, so the native caret stays.
+*/
+var drawnCaretPlugin = $prose(() => {
+	let caret;
+	return new Plugin({
+		key,
+		view(view) {
+			caret = new DrawnCaret(view);
+			const current = caret;
+			return {
+				update: () => current.update(),
+				destroy: () => {
+					current.destroy();
+					if (caret === current) caret = void 0;
+				}
+			};
+		},
+		props: {
+			handleKeyDown(_view, event) {
+				caret?.keyDown(event);
+				return false;
+			},
+			handleDOMEvents: {
+				mousedown(_view, event) {
+					caret?.pointerDown(event);
+					return false;
+				},
+				mouseup() {
+					caret?.schedule();
+					return false;
+				},
+				keyup() {
+					caret?.schedule();
+					return false;
+				},
+				focus() {
+					caret?.schedule();
+					return false;
+				},
+				blur() {
+					caret?.schedule();
+					return false;
+				},
+				compositionstart() {
+					caret?.schedule();
+					return false;
+				},
+				compositionend() {
+					caret?.schedule();
+					return false;
+				}
+			}
+		}
+	});
+});
+/** The bar drawn for this surface while it replaces the native caret. */
+function drawnCaretBar(surface) {
+	if (!surface.classList.contains(drawnClass)) return null;
+	return surface.parentElement?.querySelector(`:scope > .${barClass}`) ?? null;
+}
+/** Whether the primary pointer is fine, so the page, not the system, draws the caret. */
+function drawsOverlays(win) {
+	return !!win?.matchMedia?.("(pointer: fine)").matches;
+}
+//#endregion
 //#region src/wiki-view.ts
 function wikiLinkView(adapter, runtime) {
 	return $view(wikiLinkSchema, () => (node, view) => {
@@ -58757,16 +59351,18 @@ var ImageView = class {
 		const text = document.createElement("span");
 		text.className = "inkkit-file-label";
 		text.textContent = label;
-		text.title = label;
-		name.append(text);
-		if (activation && this.runtime?.adapter.open) this.activateCard(label);
-		else if (this.runtime?.adapter.open) {
+		if (this.runtime?.adapter.open && !activation) {
 			const open = this.button("", this.activate);
 			open.classList.add("inkkit-file-open");
-			open.setAttribute("aria-label", `${this.runtime.labels.fileOpen} ${label}`);
-			open.title = this.runtime.labels.fileOpen;
-			open.append(openArrow());
+			const opening = `${this.runtime.labels.fileOpen} ${label}`;
+			open.setAttribute("aria-label", opening);
+			open.title = opening;
+			open.append(text, openArrow());
 			name.append(open);
+		} else {
+			text.title = label;
+			name.append(text);
+			if (activation && this.runtime?.adapter.open) this.activateCard(label);
 		}
 		footer.append(name);
 		if (status) {
@@ -58799,6 +59395,7 @@ var ImageView = class {
 		this.element.removeEventListener("click", this.cardClick);
 		this.element.removeEventListener("keydown", this.cardKey);
 		this.element.removeAttribute("tabindex");
+		this.element.removeAttribute("title");
 		this.element.removeAttribute("data-inkkit-file-activation");
 		this.element.removeAttribute("data-inkkit-file-layout");
 		this.cardKeys = false;
@@ -58836,8 +59433,8 @@ var ImageView = class {
 			if (presentation.kind === "missing") this.card(label, this.runtime.labels.fileMissing, true);
 			else if (presentation.kind === "error") this.card(label, presentation.message || this.runtime.labels.fileError, true);
 			else if (presentation.kind === "image") {
+				this.element.title = label;
 				this.renderImage(presentation.url, label, width);
-				this.card(label);
 			} else if (presentation.kind === "audio" || presentation.kind === "video") {
 				const media = document.createElement(presentation.kind);
 				media.controls = true;
@@ -59030,6 +59627,7 @@ function imageView(adapter, host, files, canMutate = () => true) {
 //#region src/editor-milkdown.ts
 /** Assemble plugins in their input and transaction precedence order. The facade owns mutation guards. */
 async function createMilkdownEditor(root, options, runtime) {
+	const drawn = options.rendering?.drawnSelection !== false && drawsOverlays(root.ownerDocument.defaultView);
 	return Editor.make().config((ctx) => {
 		ctx.set(rootCtx, root);
 		ctx.set(authoredSourcesCtx.key, (doc, positions) => runtime.authoredSources(doc, positions));
@@ -59084,7 +59682,7 @@ async function createMilkdownEditor(root, options, runtime) {
 				return true;
 			}
 		}));
-	}).use(labelsCtx).use(linkSchemesCtx).use(formatInputCtx).use(richTextGuard).use(runtime.plugins.paste).use(visibleClipboard).use(runtime.plugins.suggestions).use(runtime.plugins.keymap).use(createDialect(Boolean(options.images || options.files), Boolean(options.wikiLinks), Boolean(options.files))).use(codeControlCtx).use(codeControlsPlugin(() => runtime.visibleRect())).use(tablePlugins).use(tableBlock).use(runtime.plugins.change).use(runtime.plugins.historyInput).use(history).use(clipboard).use(cursor).use(taskListPlugin((operation) => runtime.mutate(operation))).use(undoTypedRule).use(quoteBackspace).use(calloutEnter).use(literalEnter).use(literalReread).use(listItemBackspace).use(nestedItemEnter).use(rejoinLists).use(movedListItems).use(textInputPolicy).use(runtime.copy ? codeCopyPlugin((text) => runtime.copy?.(text)) : []).use(placeholderPlugin).use(options.rendering?.codeHighlighting === false ? [] : (await import("./highlight-CVL-YhFo.js")).highlightPlugin).use(options.rendering?.diagramPreview === false || !diagramsAvailable() ? [] : mermaidPreview(runtime.diagrams, (error) => runtime.report(error))).use(selectionPlugin).use($prose(() => search())).use(runtime.plugins.policy).use(options.wikiLinks ? wikiLinkView(options.wikiLinks, {
+	}).use(labelsCtx).use(linkSchemesCtx).use(formatInputCtx).use(richTextGuard).use(runtime.plugins.paste).use(visibleClipboard).use(runtime.plugins.suggestions).use(runtime.plugins.keymap).use(createDialect(Boolean(options.images || options.files), Boolean(options.wikiLinks), Boolean(options.files))).use(codeControlCtx).use(codeControlsPlugin(() => runtime.visibleRect())).use(tablePlugins).use(tableBlock).use(runtime.plugins.change).use(runtime.plugins.historyInput).use(history).use(clipboard).use(cursor).use(taskListPlugin((operation) => runtime.mutate(operation))).use(undoTypedRule).use(quoteBackspace).use(calloutEnter).use(literalEnter).use(literalReread).use(listItemBackspace).use(nestedItemEnter).use(rejoinLists).use(movedListItems).use(textInputPolicy).use(runtime.copy ? codeCopyPlugin((text) => runtime.copy?.(text)) : []).use(placeholderPlugin).use(options.rendering?.codeHighlighting === false ? [] : (await import("./highlight-BF7N9czJ.js")).highlightPlugin).use(options.rendering?.diagramPreview === false || !diagramsAvailable() ? [] : mermaidPreview(runtime.diagrams, (error) => runtime.report(error))).use(selectionPlugin(drawn)).use(drawn ? drawnCaretPlugin : []).use($prose(() => search())).use(runtime.plugins.policy).use(options.wikiLinks ? wikiLinkView(options.wikiLinks, {
 		capture: () => runtime.capture(),
 		active: () => runtime.active(),
 		labels: {
@@ -60069,9 +60667,14 @@ function editorOptions(value) {
 	if (!isOmitted(options.textInput)) textInputPreferences(options.textInput, "options.textInput");
 	if (!isOmitted(options.keymap)) keymapBindings(options.keymap, "options.keymap");
 	const linkSchemes = isOmitted(options.linkSchemes) ? void 0 : extraLinkSchemes(options.linkSchemes, "options.linkSchemes");
-	const rendering = optionalRecord(options.rendering, "options.rendering", ["codeHighlighting", "diagramPreview"]);
+	const rendering = optionalRecord(options.rendering, "options.rendering", [
+		"codeHighlighting",
+		"diagramPreview",
+		"drawnSelection"
+	]);
 	optionalBoolean(rendering?.codeHighlighting, "options.rendering.codeHighlighting");
 	optionalBoolean(rendering?.diagramPreview, "options.rendering.diagramPreview");
+	optionalBoolean(rendering?.drawnSelection, "options.rendering.drawnSelection");
 	const labels = optionalRecord(options.labels, "options.labels", Object.keys(defaultLabels));
 	return {
 		...options,
@@ -60622,6 +61225,8 @@ var InkKitEditor = class InkKitEditor {
 			const element = dom.nodeType === 1 ? dom : dom.parentElement ?? view.dom;
 			const window = this.root.ownerDocument.defaultView;
 			const style = window.getComputedStyle(element);
+			const bar = literal ? null : drawnCaretBar(view.dom);
+			const caretColor = bar ? window.getComputedStyle(bar).backgroundColor : style.caretColor;
 			const fontFamily = style.fontFamily.slice(0, 160).replace(/[^\p{L}\p{N} ,"'_-]/gu, "");
 			const type = selection.$from.parent.type.name;
 			const block = literal ? "literal" : type === "paragraph" ? "paragraph" : type === "heading" ? "heading" : type === "code_block" ? "code" : "other";
@@ -60651,7 +61256,7 @@ var InkKitEditor = class InkKitEditor {
 				...style.lineHeight !== "normal" ? { lineHeight: diagnosticNumber(Number.parseFloat(style.lineHeight)) } : {},
 				block,
 				marks,
-				caretColor: /^(?:rgba?\([\d.,% ]+\)|#[\da-f]{3,8}|auto|transparent|currentcolor)$/i.test(style.caretColor) ? style.caretColor.slice(0, 80) : "other",
+				caretColor: /^(?:rgba?\([\d.,% ]+\)|#[\da-f]{3,8}|auto|transparent|currentcolor)$/i.test(caretColor) ? caretColor.slice(0, 80) : "other",
 				...bounds ? { caret: {
 					left: diagnosticNumber(bounds.left),
 					top: diagnosticNumber(bounds.top),