mechanica 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/chunks/{ImagePickerDialog-BfjNtRoR.js → ImagePickerDialog-CY-mn2UP.js}

@@ -1,4 +1,11 @@
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, shallowReactive, toDisplayString, unref, withCtx, withModifiers } from "vue";
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
 //#region \0svg-glob:C:\Users\Den\Desktop\CURVES\mechanica\packages\mechanica\src\editor\icons
 var contents = {
 	"align-center": `<path d="M4 6h16M7 12h10M6 18h12"/>`,
@@ -543,13 +550,6 @@ var VIcon_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region \0plugin-vue:export-helper
-var _plugin_vue_export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
-//#endregion
 //#region src/editor/ui/dialog.ts
 var dialogKey = Symbol("mech-dialog");
 /** Create the reactive dialog store (provided once by the editor shell). */
@@ -869,4 +869,4 @@ var ImagePickerDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 	}
 }), [["__scopeId", "data-v-4ef9dd0d"]]);
 //#endregion
-export { renderCrop as a, useDialog as c, contents as d, readImageSize as i, _plugin_vue_export_helper_default as l, VDialog_default as n, createDialogStore as o, analyzeImageFile as r, dialogKey as s, ImagePickerDialog_default as t, VIcon_default as u };
+export { renderCrop as a, useDialog as c, _plugin_vue_export_helper_default as d, readImageSize as i, VIcon_default as l, VDialog_default as n, createDialogStore as o, analyzeImageFile as r, dialogKey as s, ImagePickerDialog_default as t, contents as u };

package/dist/chunks/{editor-BYMvxQTM.js → editor-9tquvDcS.js}

@@ -1,4 +1,4 @@
-import { a as renderCrop, c as useDialog, i as readImageSize, l as _plugin_vue_export_helper_default, n as VDialog_default, r as analyzeImageFile, s as dialogKey, t as ImagePickerDialog_default, u as VIcon_default } from "./ImagePickerDialog-BfjNtRoR.js";
+import { a as renderCrop, c as useDialog, d as _plugin_vue_export_helper_default, i as readImageSize, l as VIcon_default, n as VDialog_default, r as analyzeImageFile, s as dialogKey, t as ImagePickerDialog_default } from "./ImagePickerDialog-CY-mn2UP.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { deepEqual, getDefaultValue } from "mechanica-shared";
 import { unfoldSchema } from "compact-json-schema";
@@ -19,9 +19,146 @@ function resolveFieldEditor(schema) {
 	if (schema.type && editors.has(schema.type)) return editors.get(schema.type);
 	return editors.get("string");
 }
+/**
+* The non-breaking character a keyboard event asks for, or `null`. Matches Word's
+* muscle memory: Ctrl/Cmd+Shift+Space → nbsp, Ctrl/Cmd+Shift+Minus → nb-hyphen.
+* Keyed off `event.code` (physical key) so it fires on any keyboard layout, the
+* same way the editor's other shortcuts stay layout-independent.
+*/
+function typographyCharForEvent(event) {
+	if (!(event.ctrlKey || event.metaKey) || !event.shiftKey || event.altKey) return null;
+	if (event.code === "Space") return "\xA0";
+	if (event.code === "Minus") return "‑";
+	return null;
+}
+/**
+* Insert `char` at the caret of an `<input>`/`<textarea>`, replacing any
+* selection, and leave the caret after it. Returns the field's new value so the
+* caller can emit it. `setRangeText` keeps native undo working.
+*/
+function insertAtCursor(el, char) {
+	const start = el.selectionStart ?? el.value.length;
+	const end = el.selectionEnd ?? start;
+	el.setRangeText(char, start, end, "end");
+	return el.value;
+}
+var HTML_ESCAPES = {
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;"
+};
+function escapeHtml(text) {
+	return text.replace(/[&<>]/g, (ch) => HTML_ESCAPES[ch] ?? ch);
+}
+/**
+* HTML that mirrors `text` for the plain-field marker overlay: every character
+* keeps its exact glyph advance (so the layer lines up with the real field), but
+* the two non-breaking characters are wrapped in marker spans the CSS lights up.
+* The characters themselves stay in the spans — that's what preserves the width.
+*/
+function highlightTypographyHtml(text) {
+	return escapeHtml(text).replaceAll("\xA0", `<span class="mech-typo__nbsp"> </span>`).replaceAll("‑", `<span class="mech-typo__nbhyphen">‑</span>`);
+}
+/**
+* vuewrite `parser`: scans a block's text and emits a one-character style span
+* over every non-breaking character. vuewrite merges these at *render* time only
+* — they never enter the stored model, so the Markdown on disk stays clean while
+* the editor still shows where the glue is.
+*/
+function typographyParser(text) {
+	const spans = [];
+	for (let i = 0; i < text.length; i++) if (text[i] === "\xA0") spans.push({
+		start: i,
+		end: i + 1,
+		style: "nbsp"
+	});
+	else if (text[i] === "‑") spans.push({
+		start: i,
+		end: i + 1,
+		style: "nbHyphen"
+	});
+	return spans;
+}
+//#endregion
+//#region src/editor/components/TypographyInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$19 = { class: "mech-typo" };
+var _hoisted_2$15 = [
+	"value",
+	"placeholder",
+	"rows"
+];
+var _hoisted_3$12 = ["value", "placeholder"];
+var _hoisted_4$9 = ["innerHTML"];
 //#endregion
-//#region src/editor/fields/editors/StringField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = ["value", "placeholder"];
+//#region src/editor/components/TypographyInput.vue
+var TypographyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "TypographyInput",
+	props: {
+		modelValue: {},
+		multiline: { type: Boolean },
+		placeholder: {},
+		rows: { default: 3 }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const fieldRef = ref();
+		const overlayRef = ref();
+		const highlighted = computed(() => highlightTypographyHtml(props.modelValue ?? ""));
+		function onInput(event) {
+			emit("update:modelValue", event.target.value);
+			nextTick(syncScroll);
+		}
+		function onKeyDown(event) {
+			const char = typographyCharForEvent(event);
+			if (!char) return;
+			event.preventDefault();
+			const el = fieldRef.value;
+			if (!el) return;
+			emit("update:modelValue", insertAtCursor(el, char));
+			nextTick(syncScroll);
+		}
+		function syncScroll() {
+			const el = fieldRef.value;
+			const overlay = overlayRef.value;
+			if (!el || !overlay) return;
+			overlay.scrollTop = el.scrollTop;
+			overlay.scrollLeft = el.scrollLeft;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$19, [__props.multiline ? (openBlock(), createElementBlock("textarea", {
+				key: 0,
+				ref_key: "fieldRef",
+				ref: fieldRef,
+				class: "mech-input mech-textarea",
+				value: __props.modelValue,
+				placeholder: __props.placeholder,
+				rows: __props.rows,
+				onInput,
+				onKeydown: onKeyDown,
+				onScroll: syncScroll
+			}, null, 40, _hoisted_2$15)) : (openBlock(), createElementBlock("input", {
+				key: 1,
+				ref_key: "fieldRef",
+				ref: fieldRef,
+				class: "mech-input",
+				type: "text",
+				value: __props.modelValue,
+				placeholder: __props.placeholder,
+				onInput,
+				onKeydown: onKeyDown,
+				onScroll: syncScroll
+			}, null, 40, _hoisted_3$12)), createElementVNode("div", {
+				ref_key: "overlayRef",
+				ref: overlayRef,
+				class: normalizeClass(["mech-typo__overlay", __props.multiline ? "is-multiline" : "is-single"]),
+				"aria-hidden": "true",
+				innerHTML: highlighted.value
+			}, null, 10, _hoisted_4$9)]);
+		};
+	}
+}), [["__scopeId", "data-v-0086c808"]]);
 //#endregion
 //#region src/editor/fields/editors/StringField.vue
 var StringField_default = /* @__PURE__ */ defineComponent({
@@ -33,22 +170,16 @@ var StringField_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const onInput = (event) => emit("update:modelValue", event.target.value);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("input", {
-				class: "mech-input",
-				type: "text",
-				value: __props.modelValue,
+			return openBlock(), createBlock(TypographyInput_default, {
+				"model-value": __props.modelValue,
 				placeholder: __props.schema.placeholder,
-				onInput
-			}, null, 40, _hoisted_1$20);
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
+			}, null, 8, ["model-value", "placeholder"]);
 		};
 	}
 });
 //#endregion
-//#region src/editor/fields/editors/TextField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = ["value", "placeholder"];
-//#endregion
 //#region src/editor/fields/editors/TextField.vue
 var TextField_default = /* @__PURE__ */ defineComponent({
 	__name: "TextField",
@@ -59,15 +190,14 @@ var TextField_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const onInput = (event) => emit("update:modelValue", event.target.value);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("textarea", {
-				class: "mech-input mech-textarea",
-				value: __props.modelValue,
+			return openBlock(), createBlock(TypographyInput_default, {
+				multiline: "",
+				"model-value": __props.modelValue,
 				placeholder: __props.schema.placeholder,
-				rows: "3",
-				onInput
-			}, null, 40, _hoisted_1$19);
+				rows: 3,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
+			}, null, 8, ["model-value", "placeholder"]);
 		};
 	}
 });
@@ -1477,6 +1607,14 @@ var decorator = (style) => {
 			}
 		};
 		case "color": return { style: `color: ${style.meta?.color};` };
+		case "nbsp": return {
+			tag: "span",
+			class: "rt-nbsp"
+		};
+		case "nbHyphen": return {
+			tag: "span",
+			class: "rt-nbhyphen"
+		};
 		default: return;
 	}
 };
@@ -2065,9 +2203,28 @@ var RichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			autosizeMarkdown();
 			nextTick(() => fromMarkdown = false);
 		}
+		/** The nbsp / non-breaking-hyphen shortcuts in the raw Markdown view too. */
+		function onMarkdownKeyDown(event) {
+			const char = typographyCharForEvent(event);
+			if (!char || !markdownRef.value) return;
+			event.preventDefault();
+			const md = insertAtCursor(markdownRef.value, char);
+			markdown.value = md;
+			fromMarkdown = true;
+			model.value = markdownToBlocks(md, model.value, { softBreaks: true });
+			autosizeMarkdown();
+			nextTick(() => fromMarkdown = false);
+		}
 		function onKeyDown(event) {
 			const editor = editorRef.value;
 			if (!editor) return;
+			const nb = typographyCharForEvent(event);
+			if (nb) {
+				event.preventDefault();
+				editor.insertText(nb);
+				editor.pushHistory("insertText");
+				return;
+			}
 			if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
 				const style = {
 					KeyB: "bold",
@@ -2192,6 +2349,7 @@ var RichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				class: "mech-rte__surface",
 				renderer: unref(renderer),
 				decorator: unref(decorator),
+				parser: unref(typographyParser),
 				"html-parser": unref(htmlParser),
 				onKeydown: onKeyDown,
 				onContextmenu: onContextMenu
@@ -2213,6 +2371,7 @@ var RichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				"modelValue",
 				"renderer",
 				"decorator",
+				"parser",
 				"html-parser"
 			])) : (openBlock(), createElementBlock("textarea", {
 				key: 2,
@@ -2222,11 +2381,12 @@ var RichTextEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				value: markdown.value,
 				spellcheck: "false",
 				placeholder: __props.placeholder,
-				onInput: onMarkdownInput
+				onInput: onMarkdownInput,
+				onKeydown: onMarkdownKeyDown
 			}, null, 40, _hoisted_8))])], 2);
 		};
 	}
-}), [["__scopeId", "data-v-f118319c"]]);
+}), [["__scopeId", "data-v-6729e5a2"]]);
 //#endregion
 //#region src/editor/dialogs/RichTextDialog.vue
 var RichTextDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({

package/dist/cli.js

@@ -204,6 +204,34 @@ function breadcrumbsFor(path, names) {
 	}));
 }
 /**
+* Map a baked {@link VirtualPage} to an {@link ExportPage}. The provider emits
+* one per (logical page × locale) and self-declares `locale`/`locales`, so the
+* mapping just localizes the served `path` and carries the alternates — it never
+* goes through the file-based `readTranslation`.
+*/
+function virtualToExportPage(v, config) {
+	const isDefault = !config || !v.locale || v.locale === config.default;
+	const locale = config ? v.locale ?? config.default : void 0;
+	const path = isDefault ? v.path : localePath(v.path, v.locale, config);
+	const name = typeof v.meta?.title === "string" ? v.meta.title : void 0;
+	return {
+		path,
+		logicalPath: v.path,
+		locale,
+		translations: v.locales,
+		content: v.content ?? [],
+		data: v.data ?? {},
+		name,
+		lastmod: v.lastmod,
+		page: {
+			meta: v.meta ?? {},
+			locale,
+			locales: v.locales,
+			path: v.path
+		}
+	};
+}
+/**
 * Load the pieces needed to preload per-page block chunks: the client build's
 * Vite manifest and the plugin's block map. Older builds (or builds outside
 * `mechanica build`) may not have them — links are simply skipped then.
@@ -328,6 +356,15 @@ async function exportProject(cwd, ssr, options = {}) {
 		}
 		for (const [locale, paths] of Object.entries(missing)) if (paths.length) warn(`[mechanica] locale "${locale}" is missing ${paths.length} translation(s) (rendered only in ${config.default}): ${paths.join(", ")}`);
 	}
+	if (ssr.generatedPages?.length) {
+		const taken = new Set(pages.map((page) => page.path));
+		for (const vp of ssr.generatedPages) {
+			const generated = virtualToExportPage(vp, config);
+			if (taken.has(generated.path)) throw new Error(`[mechanica] generatePages produced "${generated.path}", but a page already exists there — change the generated path or remove the conflicting page.`);
+			taken.add(generated.path);
+			pages.push(generated);
+		}
+	}
 	setPageCodec(richText);
 	const querySource = {
 		listPages: (opts) => listPages(join(cwd, ".mech"), opts),
@@ -421,6 +458,7 @@ async function exportProject(cwd, ssr, options = {}) {
 	};
 	const templateHandlesPagination = index.includes("page.pagination");
 	const pageNames = new Map(defaultPages.map((page) => [page.logicalPath, page.name ?? (page.logicalPath === "/" ? "Home" : page.logicalPath.split("/").pop())]));
+	for (const vp of ssr.generatedPages ?? []) pageNames.set(vp.path, typeof vp.meta?.title === "string" ? vp.meta.title : vp.path.split("/").pop());
 	/** hreflang alternates for a translated page (each locale + x-default), at page N. */
 	const alternatesFor = (source, pageNum = 1) => {
 		if (!config || !source.translations || source.translations.length < 2) return void 0;

package/dist/composer.js

@@ -1,7 +1,7 @@
 import './editor.css';
 import { c as ANCHOR_H, i as renderBlocks, l as ANCHOR_V, t as createMechanica } from "./chunks/create-mechanica-CnBFiyfJ.js";
-import { C as registerBuiltinFieldEditors, N as VSelect_default, P as VPopover_default, S as uid, _ as findParentSlot, a as FieldControl_default, b as relocateBlock, d as humanize, f as cloneBlock, g as findParentList, h as findBlock, i as SchemaField_default, m as ensureSlotList, n as createSaveQueue, o as shortcutChar, p as duplicateBlock, t as SaveConflictError, u as toBlockMeta, v as moveBlock, x as removeBlock, y as placeBlock } from "./chunks/editor-BYMvxQTM.js";
-import { d as contents, l as _plugin_vue_export_helper_default, u as VIcon_default } from "./chunks/ImagePickerDialog-BfjNtRoR.js";
+import { C as registerBuiltinFieldEditors, N as VSelect_default, P as VPopover_default, S as uid, _ as findParentSlot, a as FieldControl_default, b as relocateBlock, d as humanize, f as cloneBlock, g as findParentList, h as findBlock, i as SchemaField_default, m as ensureSlotList, n as createSaveQueue, o as shortcutChar, p as duplicateBlock, t as SaveConflictError, u as toBlockMeta, v as moveBlock, x as removeBlock, y as placeBlock } from "./chunks/editor-9tquvDcS.js";
+import { d as _plugin_vue_export_helper_default, l as VIcon_default, u as contents } from "./chunks/ImagePickerDialog-CY-mn2UP.js";
 import { Fragment, Teleport, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, toDisplayString, unref, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { buildPreviewData, getDefaultValue, isBinding, registerFieldSchemas, resolveBindings, walkTree } from "mechanica-shared";
 import { unfoldSchema } from "compact-json-schema";

package/dist/editor.css

@@ -467,6 +467,43 @@
   padding: 8px 0;
   color: var(--mech-muted);
   font-size: 13px;
+}.mech-typo[data-v-0086c808] {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.mech-typo__overlay[data-v-0086c808] {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+  color: transparent;
+  font: inherit;
+  font-size: 13.5px;
+}
+.mech-typo__overlay.is-single[data-v-0086c808] {
+  padding: 0 12px;
+  line-height: 36px;
+  white-space: pre;
+}
+.mech-typo__overlay.is-multiline[data-v-0086c808] {
+  padding: 9px 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+.mech-typo__overlay[data-v-0086c808] .mech-typo__nbsp,
+.mech-typo__overlay[data-v-0086c808] .mech-typo__nbhyphen {
+  border-radius: 3px;
+  background-color: color-mix(in srgb, var(--mech-accent) 15%, transparent);
+}
+.mech-typo__overlay[data-v-0086c808] .mech-typo__nbsp {
+  background-image: radial-gradient(circle at center, var(--mech-accent) 0 1px, transparent 1.4px);
+  background-repeat: no-repeat;
+  background-position: center;
 }.mech-popover[data-v-4884cec4] {
   position: fixed;
   z-index: 2147483680;
@@ -1124,60 +1161,60 @@ from {
 }
 .mech-rt-table[data-v-0b304924] .vw-table-cell {
   font-size: 13.5px;
-}.mech-rte[data-v-f118319c] {
+}.mech-rte[data-v-6729e5a2] {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-.mech-rte__switchbar[data-v-f118319c] {
+.mech-rte__switchbar[data-v-6729e5a2] {
   display: flex;
   justify-content: flex-end;
   margin-top: -25px;
 }
-.mech-rte__box[data-v-f118319c] {
+.mech-rte__box[data-v-6729e5a2] {
   display: flex;
   flex-direction: column;
   border-radius: var(--mech-radius);
   transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
 }
-.mech-rte--full .mech-rte__box[data-v-f118319c] {
+.mech-rte--full .mech-rte__box[data-v-6729e5a2] {
   border: 1px solid var(--mech-input-border);
   background: var(--mech-bg);
   overflow: hidden;
 }
-.mech-rte--full .mech-rte__box[data-v-f118319c]:focus-within {
+.mech-rte--full .mech-rte__box[data-v-6729e5a2]:focus-within {
   border-color: var(--mech-accent);
   box-shadow: 0 0 0 3px var(--mech-ring);
 }
-.mech-rte--minimal .mech-rte__box[data-v-f118319c] {
+.mech-rte--minimal .mech-rte__box[data-v-6729e5a2] {
   border: 1px solid transparent;
   background: var(--mech-field-bg);
 }
-.mech-rte--minimal .mech-rte__box[data-v-f118319c]:hover {
+.mech-rte--minimal .mech-rte__box[data-v-6729e5a2]:hover {
   background: var(--mech-field-bg-hover);
 }
-.mech-rte--minimal .mech-rte__box[data-v-f118319c]:focus-within {
+.mech-rte--minimal .mech-rte__box[data-v-6729e5a2]:focus-within {
   background: var(--mech-bg);
   border-color: var(--mech-accent);
   box-shadow: 0 0 0 3px var(--mech-ring);
 }
-.mech-rte__bar[data-v-f118319c] {
+.mech-rte__bar[data-v-6729e5a2] {
   display: flex;
   align-items: center;
   gap: 2px;
   padding: 5px 6px;
   border-bottom: 1px solid var(--mech-border);
 }
-.mech-rte__toggle[data-v-f118319c] {
+.mech-rte__toggle[data-v-6729e5a2] {
   margin-left: auto;
 }
-.mech-rte__divider[data-v-f118319c] {
+.mech-rte__divider[data-v-6729e5a2] {
   width: 1px;
   align-self: stretch;
   margin: 4px 4px;
   background: var(--mech-border);
 }
-.mech-rte__insert-item[data-v-f118319c] {
+.mech-rte__insert-item[data-v-6729e5a2] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1194,26 +1231,26 @@ from {
   text-align: left;
   cursor: pointer;
 }
-.mech-rte__insert-item[data-v-f118319c]:hover {
+.mech-rte__insert-item[data-v-6729e5a2]:hover {
   background: var(--mech-hover);
 }
-.mech-rte__insert-icon[data-v-f118319c] {
+.mech-rte__insert-icon[data-v-6729e5a2] {
   width: 16px;
   height: 16px;
   flex: none;
   color: var(--mech-muted);
 }
-.mech-rte__insert-icon[data-v-f118319c] svg {
+.mech-rte__insert-icon[data-v-6729e5a2] svg {
   display: block;
   width: 100%;
   height: 100%;
 }
-.mech-rte__surface[data-v-f118319c] .mech-rte__menu-target {
+.mech-rte__surface[data-v-6729e5a2] .mech-rte__menu-target {
   border-radius: var(--mech-radius-sm);
   background: var(--mech-accent-soft);
   box-shadow: 0 0 0 3px var(--mech-accent-soft);
 }
-.mech-rte__surface[data-v-f118319c] {
+.mech-rte__surface[data-v-6729e5a2] {
   padding: 11px 13px;
   min-height: 64px;
   line-height: 1.6;
@@ -1223,56 +1260,56 @@ from {
   white-space: pre-wrap;
   overflow-y: auto;
 }
-.mech-rte__surface[data-v-f118319c] p {
+.mech-rte__surface[data-v-6729e5a2] p {
   margin: 0 0 0.6em;
 }
-.mech-rte__surface[data-v-f118319c] h1,
-.mech-rte__surface[data-v-f118319c] h2,
-.mech-rte__surface[data-v-f118319c] h3 {
+.mech-rte__surface[data-v-6729e5a2] h1,
+.mech-rte__surface[data-v-6729e5a2] h2,
+.mech-rte__surface[data-v-6729e5a2] h3 {
   font-weight: 700;
   margin: 0.85em 0 0.35em;
 }
-.mech-rte__surface[data-v-f118319c] h1 {
+.mech-rte__surface[data-v-6729e5a2] h1 {
   font-size: 1.5em;
 }
-.mech-rte__surface[data-v-f118319c] h2 {
+.mech-rte__surface[data-v-6729e5a2] h2 {
   font-size: 1.3em;
 }
-.mech-rte__surface[data-v-f118319c] h3 {
+.mech-rte__surface[data-v-6729e5a2] h3 {
   font-size: 1.1em;
 }
-.mech-rte__surface[data-v-f118319c] ul,
-.mech-rte__surface[data-v-f118319c] ol {
+.mech-rte__surface[data-v-6729e5a2] ul,
+.mech-rte__surface[data-v-6729e5a2] ol {
   margin: 0 0 0.6em;
   padding-left: 0;
 }
-.mech-rte__surface[data-v-f118319c] li {
+.mech-rte__surface[data-v-6729e5a2] li {
   margin: 0.15em 0 0.15em 1.7em;
   list-style: disc;
 }
-.mech-rte__surface[data-v-f118319c] li.ol {
+.mech-rte__surface[data-v-6729e5a2] li.ol {
   list-style: decimal;
 }
-.mech-rte__surface[data-v-f118319c] :last-child {
+.mech-rte__surface[data-v-6729e5a2] :last-child {
   margin-bottom: 0;
 }
-.mech-rte__surface[data-v-f118319c] b {
+.mech-rte__surface[data-v-6729e5a2] b {
   font-weight: 700;
 }
-.mech-rte__surface[data-v-f118319c] i {
+.mech-rte__surface[data-v-6729e5a2] i {
   font-style: italic;
 }
-.mech-rte__surface[data-v-f118319c] u {
+.mech-rte__surface[data-v-6729e5a2] u {
   text-decoration: underline;
 }
-.mech-rte__surface[data-v-f118319c] s {
+.mech-rte__surface[data-v-6729e5a2] s {
   text-decoration: line-through;
 }
-.mech-rte__surface[data-v-f118319c] a {
+.mech-rte__surface[data-v-6729e5a2] a {
   color: var(--mech-accent);
   text-decoration: underline;
 }
-.mech-rte__surface[data-v-f118319c] code {
+.mech-rte__surface[data-v-6729e5a2] code {
   font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
   font-size: 0.88em;
   background: var(--mech-field-bg);
@@ -1280,7 +1317,17 @@ from {
   border-radius: 4px;
   border: 1px solid var(--mech-border);
 }
-.mech-rte__surface[data-v-f118319c] .rt-callout {
+.mech-rte__surface[data-v-6729e5a2] .rt-nbsp,
+.mech-rte__surface[data-v-6729e5a2] .rt-nbhyphen {
+  border-radius: 3px;
+  background-color: color-mix(in srgb, var(--mech-accent) 15%, transparent);
+}
+.mech-rte__surface[data-v-6729e5a2] .rt-nbsp {
+  background-image: radial-gradient(circle at center, var(--mech-accent) 0 1px, transparent 1.4px);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.mech-rte__surface[data-v-6729e5a2] .rt-callout {
   margin: 0.6em 0;
   padding: 9px 13px;
   border: 1px solid var(--c-border);
@@ -1290,24 +1337,24 @@ from {
   --c-border: #b9c8f5;
   --c-soft: #eef2fe;
 }
-.mech-rte__surface[data-v-f118319c] .rt-callout--tip {
+.mech-rte__surface[data-v-6729e5a2] .rt-callout--tip {
   --c-border: #aee0c4;
   --c-soft: #eaf8f0;
 }
-.mech-rte__surface[data-v-f118319c] .rt-callout--warning {
+.mech-rte__surface[data-v-6729e5a2] .rt-callout--warning {
   --c-border: #f4d39a;
   --c-soft: #fdf4e3;
 }
-.mech-rte--minimal .mech-rte__surface[data-v-f118319c] {
+.mech-rte--minimal .mech-rte__surface[data-v-6729e5a2] {
   min-height: 52px;
   max-height: 220px;
 }
-.mech-rte--minimal .mech-rte__markdown[data-v-f118319c] {
+.mech-rte--minimal .mech-rte__markdown[data-v-6729e5a2] {
   min-height: 52px;
   max-height: 220px;
   resize: none;
 }
-.mech-rte__markdown[data-v-f118319c] {
+.mech-rte__markdown[data-v-6729e5a2] {
   border: none;
   resize: none;
   font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
@@ -1318,7 +1365,7 @@ from {
   width: 100%;
   box-sizing: border-box;
 }
-.mech-rte__code[data-v-f118319c] {
+.mech-rte__code[data-v-6729e5a2] {
   margin: 0.4em 0;
   padding: 10px 12px;
   background: var(--mech-field-bg);
@@ -1328,7 +1375,7 @@ from {
   font-size: 12.5px;
   overflow-x: auto;
 }
-.mech-rte__placeholder[data-v-f118319c] {
+.mech-rte__placeholder[data-v-6729e5a2] {
   position: absolute;
   color: var(--mech-placeholder);
   pointer-events: none;