mechanica 2.0.0-alpha.4 → 2.0.0-alpha.5

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/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;

package/dist/editor.js

@@ -1,8 +1,8 @@
 import './editor.css';
 import { f as createRouter, h as mechanicaKey, i as renderBlocks, n as pushStateUpdate, r as createComposedComponent, s as registerElements } from "./chunks/create-mechanica-CnBFiyfJ.js";
 import { i as getDataEntries, t as buildPreviewContent } from "./chunks/preview-G5_AFI5P.js";
-import { A as groupPagesByFolder, C as registerBuiltinFieldEditors, D as VSegmented_default, E as createContextMenu, M as pathFromName, O as fetchPages, P as VPopover_default, T as contextMenuKey, _ as findParentSlot, b as relocateBlock, c as compareBlocks, f as cloneBlock, h as findBlock, j as pageThumbUrl, k as filterPages, l as createContentBlock, n as createSaveQueue, o as shortcutChar, p as duplicateBlock, r as SchemaForm_default, s as blockAvailableIn, t as SaveConflictError, u as toBlockMeta, v as moveBlock, w as registerRichTextWidgets, x as removeBlock, y as placeBlock } from "./chunks/editor-BYMvxQTM.js";
-import { c as useDialog, l as _plugin_vue_export_helper_default, n as VDialog_default, o as createDialogStore, s as dialogKey, u as VIcon_default } from "./chunks/ImagePickerDialog-BfjNtRoR.js";
+import { A as groupPagesByFolder, C as registerBuiltinFieldEditors, D as VSegmented_default, E as createContextMenu, M as pathFromName, O as fetchPages, P as VPopover_default, T as contextMenuKey, _ as findParentSlot, b as relocateBlock, c as compareBlocks, f as cloneBlock, h as findBlock, j as pageThumbUrl, k as filterPages, l as createContentBlock, n as createSaveQueue, o as shortcutChar, p as duplicateBlock, r as SchemaForm_default, s as blockAvailableIn, t as SaveConflictError, u as toBlockMeta, v as moveBlock, w as registerRichTextWidgets, x as removeBlock, y as placeBlock } from "./chunks/editor-9tquvDcS.js";
+import { c as useDialog, d as _plugin_vue_export_helper_default, l as VIcon_default, n as VDialog_default, o as createDialogStore, s as dialogKey } from "./chunks/ImagePickerDialog-CY-mn2UP.js";
 import { Fragment, Teleport, Transition, TransitionGroup, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { getDefaultValue, localeLabel, localePath, parseLocalePath, registerFieldSchemas } from "mechanica-shared";
 import { blocksList } from "virtual:mechanica/blocks";

package/dist/types/editor/lib/typography.d.ts

@@ -0,0 +1,39 @@
+/** Non-breaking space — glues short words so a line never breaks between them. */
+export declare const NBSP = "\u00A0";
+/** Non-breaking hyphen — keeps hyphenated words (из-за, кто-то) on one line. */
+export declare const NB_HYPHEN = "\u2011";
+/**
+ * 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.
+ */
+export declare function typographyCharForEvent(event: KeyboardEvent): string | 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.
+ */
+export declare function insertAtCursor(el: HTMLInputElement | HTMLTextAreaElement, char: string): string;
+/** Whether the text carries any non-breaking character worth marking. */
+export declare function hasTypographyChar(text: string): boolean;
+/**
+ * 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.
+ */
+export declare function highlightTypographyHtml(text: string): string;
+/** A display-only style span (vuewrite's `Style` shape, structurally typed). */
+export interface TypographySpan {
+    start: number;
+    end: number;
+    style: string;
+}
+/**
+ * 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.
+ */
+export declare function typographyParser(text: string): TypographySpan[];

package/dist/widgets.js

@@ -1,4 +1,4 @@
-import { s as dialogKey, t as ImagePickerDialog_default } from "./chunks/ImagePickerDialog-BfjNtRoR.js";
+import { s as dialogKey, t as ImagePickerDialog_default } from "./chunks/ImagePickerDialog-CY-mn2UP.js";
 import { inject } from "vue";
 //#region src/editor/widget-api.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mechanica",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "Build Vue 3 websites with a visual block editor",
   "license": "MIT",
   "repository": {
@@ -63,7 +63,7 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "mechanica-shared": "2.0.0-alpha.4",
+    "mechanica-shared": "workspace:*",
     "@vue/compiler-sfc": "^3.5.38",
     "compact-json-schema": "^0.1.5",
     "estree-walker": "^3.0.3",

package/src/editor/components/TypographyInput.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="mech-typo">
+    <textarea
+      v-if="multiline"
+      ref="fieldRef"
+      class="mech-input mech-textarea"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :rows="rows"
+      @input="onInput"
+      @keydown="onKeyDown"
+      @scroll="syncScroll"
+    />
+    <input
+      v-else
+      ref="fieldRef"
+      class="mech-input"
+      type="text"
+      :value="modelValue"
+      :placeholder="placeholder"
+      @input="onInput"
+      @keydown="onKeyDown"
+      @scroll="syncScroll"
+    />
+    <!-- Marker layer: a transparent mirror of the text sitting exactly over the
+         field, lighting up the two invisible non-breaking characters. Metrics
+         mirror .mech-input so the glyphs line up; pointer-events:none keeps the
+         real field fully interactive underneath. -->
+    <div
+      ref="overlayRef"
+      class="mech-typo__overlay"
+      :class="multiline ? 'is-multiline' : 'is-single'"
+      aria-hidden="true"
+      v-html="highlighted"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+import { highlightTypographyHtml, insertAtCursor, typographyCharForEvent } from '../lib/typography'
+
+const props = withDefaults(
+  defineProps<{ modelValue?: string; multiline?: boolean; placeholder?: string; rows?: number }>(),
+  { rows: 3 },
+)
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const fieldRef = ref<HTMLInputElement | HTMLTextAreaElement>()
+const overlayRef = ref<HTMLElement>()
+
+const highlighted = computed(() => highlightTypographyHtml(props.modelValue ?? ''))
+
+function onInput(event: Event): void {
+  emit('update:modelValue', (event.target as HTMLInputElement | HTMLTextAreaElement).value)
+  nextTick(syncScroll)
+}
+
+// Ctrl/Cmd+Shift+Space → nbsp, Ctrl/Cmd+Shift+Minus → non-breaking hyphen.
+function onKeyDown(event: KeyboardEvent): void {
+  const char = typographyCharForEvent(event)
+  if (!char) return
+  event.preventDefault()
+  const el = fieldRef.value
+  if (!el) return
+  emit('update:modelValue', insertAtCursor(el, char))
+  nextTick(syncScroll)
+}
+
+// The overlay is a separate scroll box; keep it locked to the field's scroll so
+// the markers stay glued to their characters as the text scrolls.
+function syncScroll(): void {
+  const el = fieldRef.value
+  const overlay = overlayRef.value
+  if (!el || !overlay) return
+  overlay.scrollTop = el.scrollTop
+  overlay.scrollLeft = el.scrollLeft
+}
+</script>
+
+<style lang="scss" scoped>
+.mech-typo {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+// Transparent mirror layer. Its box metrics (border/padding/font) match
+// .mech-input so each character sits at the same x/y as in the real field.
+.mech-typo__overlay {
+  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;
+
+  &.is-single {
+    padding: 0 12px;
+    // Content-box height (38px field − 2×1px border) → the single line centers
+    // vertically the same way an <input> centers its text.
+    line-height: 36px;
+    white-space: pre;
+  }
+  &.is-multiline {
+    padding: 9px 12px;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  // The glue markers. A translucent tint (not a solid fill) so the real field's
+  // text — notably the non-breaking hyphen's glyph — stays visible underneath.
+  :deep(.mech-typo__nbsp),
+  :deep(.mech-typo__nbhyphen) {
+    border-radius: 3px;
+    background-color: color-mix(in srgb, var(--mech-accent) 15%, transparent);
+  }
+  // nbsp is a blank in the field, so also paint a small centered dot — the
+  // classic "visible whitespace" cue, saying "there's a space, and it's tied".
+  :deep(.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;
+  }
+}
+</style>

package/src/editor/fields/editors/StringField.vue

@@ -1,15 +1,13 @@
 <template>
-  <input
-    class="mech-input"
-    type="text"
-    :value="modelValue"
+  <TypographyInput
+    :model-value="modelValue"
     :placeholder="schema.placeholder"
-    @input="onInput"
+    @update:model-value="emit('update:modelValue', $event)"
   />
 </template>
 
 <script setup lang="ts">
+import TypographyInput from '../../components/TypographyInput.vue'
 defineProps<{ modelValue?: string; schema: Record<string, any> }>()
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
-const onInput = (event: Event) => emit('update:modelValue', (event.target as HTMLInputElement).value)
 </script>

package/src/editor/fields/editors/TextField.vue

@@ -1,15 +1,15 @@
 <template>
-  <textarea
-    class="mech-input mech-textarea"
-    :value="modelValue"
+  <TypographyInput
+    multiline
+    :model-value="modelValue"
     :placeholder="schema.placeholder"
-    rows="3"
-    @input="onInput"
+    :rows="3"
+    @update:model-value="emit('update:modelValue', $event)"
   />
 </template>
 
 <script setup lang="ts">
+import TypographyInput from '../../components/TypographyInput.vue'
 defineProps<{ modelValue?: string; schema: Record<string, any> }>()
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
-const onInput = (event: Event) => emit('update:modelValue', (event.target as HTMLTextAreaElement).value)
 </script>

package/src/editor/fields/richtext/RichTextEditor.vue

@@ -103,6 +103,7 @@
         class="mech-rte__surface"
         :renderer="renderer"
         :decorator="decorator"
+        :parser="typographyParser"
         :html-parser="htmlParser"
         @keydown="onKeyDown"
         @contextmenu="onContextMenu"
@@ -132,6 +133,7 @@
         spellcheck="false"
         :placeholder="placeholder"
         @input="onMarkdownInput"
+        @keydown="onMarkdownKeyDown"
       />
     </div>
   </div>
@@ -150,6 +152,7 @@ import WidgetBoundary from './WidgetBoundary.vue'
 import { allRichTextWidgets, type RichTextWidget } from './widgets'
 import { richTextEditorRefKey } from './keys'
 import { contextMenuKey, type ContextMenuItem } from '../../lib/context-menu'
+import { insertAtCursor, typographyCharForEvent, typographyParser } from '../../lib/typography'
 import { renderer, decorator, htmlParser, blockTypes } from './config'
 
 const props = withDefaults(
@@ -464,12 +467,35 @@ function onMarkdownInput(event: Event): void {
   nextTick(() => (fromMarkdown = false))
 }
 
+/** The nbsp / non-breaking-hyphen shortcuts in the raw Markdown view too. */
+function onMarkdownKeyDown(event: KeyboardEvent): void {
+  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))
+}
+
 // ── Keyboard: format shortcuts + Markdown prefixes + list continuation ────────────
 
 function onKeyDown(event: KeyboardEvent): void {
   const editor = editorRef.value
   if (!editor) return
 
+  // Ctrl/Cmd+Shift+Space → nbsp, Ctrl/Cmd+Shift+Minus → non-breaking hyphen.
+  // insertText applies pending styles, so glue typed inside a bold run stays bold.
+  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', KeyI: 'italic', KeyU: 'underline' } as Record<string, string>)[event.code]
     if (style) {
@@ -691,6 +717,18 @@ function onKeyDown(event: KeyboardEvent): void {
     border-radius: 4px;
     border: 1px solid var(--mech-border);
   }
+  // Non-breaking glue, made visible (editor-only — driven by typographyParser,
+  // never stored, never rendered on the published page).
+  :deep(.rt-nbsp),
+  :deep(.rt-nbhyphen) {
+    border-radius: 3px;
+    background-color: color-mix(in srgb, var(--mech-accent) 15%, transparent);
+  }
+  :deep(.rt-nbsp) {
+    background-image: radial-gradient(circle at center, var(--mech-accent) 0 1px, transparent 1.4px);
+    background-repeat: no-repeat;
+    background-position: center;
+  }
   :deep(.rt-callout) {
     margin: 0.6em 0;
     padding: 9px 13px;

package/src/editor/fields/richtext/config.ts

@@ -47,6 +47,12 @@ export const decorator = (style: Style): Record<string, unknown> | undefined =>
       return { tag: 'a', attrs: { href: style.meta?.href, target: '_blank', rel: 'noopener' } }
     case 'color':
       return { style: `color: ${style.meta?.color};` }
+    // Display-only markers for the non-breaking space / hyphen, produced by
+    // `typographyParser` at render time (never stored). See lib/typography.ts.
+    case 'nbsp':
+      return { tag: 'span', class: 'rt-nbsp' }
+    case 'nbHyphen':
+      return { tag: 'span', class: 'rt-nbhyphen' }
     default:
       return undefined
   }

package/src/editor/lib/typography.ts

@@ -0,0 +1,80 @@
+// Non-breaking typography: inserting and *seeing* the two invisible glue
+// characters that matter for good (especially Russian) typography — the
+// non-breaking space (U+00A0) and the non-breaking hyphen (U+2011). The pieces
+// here are DOM-light and pure so they're unit-testable; the plain-field overlay
+// (TypographyInput.vue) and the rich-text editor share them.
+
+/** Non-breaking space — glues short words so a line never breaks between them. */
+export const NBSP = ' '
+/** Non-breaking hyphen — keeps hyphenated words (из-за, кто-то) on one line. */
+export const NB_HYPHEN = '‑'
+
+/**
+ * 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.
+ */
+export function typographyCharForEvent(event: KeyboardEvent): string | null {
+  if (!(event.ctrlKey || event.metaKey) || !event.shiftKey || event.altKey) return null
+  if (event.code === 'Space') return NBSP
+  if (event.code === 'Minus') return NB_HYPHEN
+  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.
+ */
+export function insertAtCursor(el: HTMLInputElement | HTMLTextAreaElement, char: string): string {
+  const start = el.selectionStart ?? el.value.length
+  const end = el.selectionEnd ?? start
+  el.setRangeText(char, start, end, 'end')
+  return el.value
+}
+
+/** Whether the text carries any non-breaking character worth marking. */
+export function hasTypographyChar(text: string): boolean {
+  return text.includes(NBSP) || text.includes(NB_HYPHEN)
+}
+
+const HTML_ESCAPES: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;' }
+
+function escapeHtml(text: string): string {
+  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.
+ */
+export function highlightTypographyHtml(text: string): string {
+  return escapeHtml(text)
+    .replaceAll(NBSP, `<span class="mech-typo__nbsp">${NBSP}</span>`)
+    .replaceAll(NB_HYPHEN, `<span class="mech-typo__nbhyphen">${NB_HYPHEN}</span>`)
+}
+
+/** A display-only style span (vuewrite's `Style` shape, structurally typed). */
+export interface TypographySpan {
+  start: number
+  end: number
+  style: string
+}
+
+/**
+ * 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.
+ */
+export function typographyParser(text: string): TypographySpan[] {
+  const spans: TypographySpan[] = []
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === NBSP) spans.push({ start: i, end: i + 1, style: 'nbsp' })
+    else if (text[i] === NB_HYPHEN) spans.push({ start: i, end: i + 1, style: 'nbHyphen' })
+  }
+  return spans
+}