mechanica 2.0.0-alpha.3 → 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/{create-mechanica-CM_DrG9j.js → create-mechanica-CnBFiyfJ.js}

@@ -446,7 +446,7 @@ var Frame = defineComponent({
 		};
 	}
 });
-var TEXT_TAGS = new Set([
+var TEXT_TAGS = /* @__PURE__ */ new Set([
 	"h1",
 	"h2",
 	"h3",

package/dist/chunks/{editor-pyN0-GS5.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;
 	}
 };
@@ -1703,7 +1841,7 @@ var builtinWidgets = [
 	}
 ];
 /** Block types owned by the core renderer/codec — widgets can't claim them. */
-var RESERVED_TYPES = new Set([
+var RESERVED_TYPES = /* @__PURE__ */ new Set([
 	"h1",
 	"h2",
 	"h3",
@@ -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/chunks/{preview-Bxlqu_RP.js → preview-G5_AFI5P.js}

@@ -1,4 +1,4 @@
-import { i as renderBlocks, t as createMechanica } from "./create-mechanica-CM_DrG9j.js";
+import { i as renderBlocks, t as createMechanica } from "./create-mechanica-CnBFiyfJ.js";
 import { createApp, defineComponent, h } from "vue";
 import { areFieldSchemasRegistered, buildPreviewData, registerFieldSchemas } from "mechanica-shared";
 import { unfoldSchema } from "compact-json-schema";

package/dist/cli.js

@@ -363,7 +363,7 @@ async function exportProject(cwd, ssr, options = {}) {
 		force: true
 	});
 	await mkdir(exportDir, { recursive: true });
-	const DIST_PRIVATE = new Set([
+	const DIST_PRIVATE = /* @__PURE__ */ new Set([
 		"index.html",
 		"ssr.js",
 		"ssr.js.map",

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-CM_DrG9j.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-pyN0-GS5.js";
-import { d as contents, l as _plugin_vue_export_helper_default, u as VIcon_default } from "./chunks/ImagePickerDialog-BfjNtRoR.js";
+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-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";
@@ -2031,7 +2031,8 @@ var CanvasOverlay_default = /* @__PURE__ */ defineComponent({
 			};
 			gapRaf = requestAnimationFrame(loop);
 			const onMove = (e) => {
-				const raw = startGap + ((axis === "x" ? e.clientX : e.clientY) - startPos) / store.zoom;
+				const pos = axis === "x" ? e.clientX : e.clientY;
+				const raw = startGap + (pos - startPos) / store.zoom;
 				const gap = Math.max(0, e.shiftKey ? snapTo(raw, SNAP) : Math.round(raw));
 				store.setData(id, { gap }, { responsive: true });
 			};
@@ -2065,7 +2066,9 @@ var CanvasOverlay_default = /* @__PURE__ */ defineComponent({
 			const onKey = (e) => padAlt.value = e.altKey;
 			const onMove = (e) => {
 				padAlt.value = e.altKey;
-				const sides = computePaddingDrag(startSides, side, sign * ((axis === "x" ? e.clientX : e.clientY) - startPos) / store.zoom, {
+				const pos = axis === "x" ? e.clientX : e.clientY;
+				const delta = sign * (pos - startPos) / store.zoom;
+				const sides = computePaddingDrag(startSides, side, delta, {
 					symmetric: e.altKey,
 					snap: e.shiftKey ? SNAP : 0
 				});
@@ -2417,7 +2420,8 @@ var ComposerCanvas_default = /* @__PURE__ */ defineComponent({
 				hoverId.value = null;
 				return;
 			}
-			hoverId.value = (document.elementFromPoint(event.clientX, event.clientY)?.closest("[data-block-id]"))?.getAttribute("data-block-id") ?? null;
+			const el = document.elementFromPoint(event.clientX, event.clientY)?.closest("[data-block-id]");
+			hoverId.value = el?.getAttribute("data-block-id") ?? null;
 		}
 		function onCanvasDblClick(event) {
 			const el = event.target.closest("[data-block-id]");