mechanica 2.0.0-alpha.0 → 2.0.0-alpha.10

package/README.md

@@ -9,8 +9,8 @@ Built for **Vite 8 / Vue 3.5 / Bun**.
 Works with plain Node ≥ 20.19 (npm/pnpm/yarn) or [Bun](https://bun.sh) — Bun installs run the TypeScript source directly, Node uses the compiled build. The fastest start is the scaffolder:
 
 ```bash
-npm create mechanica-app@latest my-site
-# or: bun create mechanica-app my-site
+npm create mechanica@latest my-site
+# or: bun create mechanica my-site
 ```
 
 Or add it to an existing Vite + Vue project:

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

@@ -1,38 +1,99 @@
 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"/>`,
+	"align-left": `<path d="M4 6h16M4 12h10M4 18h13"/>`,
+	"align-right": `<path d="M4 6h16M10 12h10M7 18h13"/>`,
 	"arrow-down": `<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>`,
 	"arrow-up": `<path d="M12 19V5"/><path d="m5 12 7-7 7 7"/>`,
 	"bold": `<path d="M6 4h7a4 4 0 0 1 0 8H6z"/><path d="M6 12h8a4 4 0 0 1 0 8H6z"/>`,
+	"bolt": `<path d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z"/>`,
 	"book": `<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>`,
+	"button": `<rect x="3" y="8" width="18" height="8" rx="4"/><path d="M8 12h8"/>`,
 	"check": `<polyline points="20 6 9 17 4 12"/>`,
 	"chevron-down": `<path d="m6 9 6 6 6-6"/>`,
 	"close": `<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`,
 	"code": `<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`,
+	"column": `<rect x="5" y="4" width="14" height="6.5" rx="1.6"/><rect x="5" y="13.5" width="14" height="6.5" rx="1.6"/>`,
+	"component": `<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>`,
 	"copy": `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`,
+	"corner": `<path d="M5 20v-9a6 6 0 0 1 6-6h9"/>`,
+	"desktop": `<rect x="3" y="4.5" width="18" height="12.5" rx="2"/><path d="M12 17v3"/><path d="M8.5 20.5h7"/>`,
 	"ellipsis": `<circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>`,
+	"fill": `<path d="M12 3.5c3.2 3.7 5.5 6.9 5.5 9.7a5.5 5.5 0 0 1-11 0c0-2.8 2.3-6 5.5-9.7z"/>`,
 	"folder": `<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>`,
+	"frame": `<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 9.5h16M9.5 9.5V20"/>`,
+	"gap": `<rect x="2.5" y="5" width="5" height="14" rx="1.5"/><rect x="16.5" y="5" width="5" height="14" rx="1.5"/><path d="M9 12h6"/><path d="m10.5 10-1.5 2 1.5 2"/><path d="m13.5 10 1.5 2-1.5 2"/>`,
+	"globe": `<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a13.5 13.5 0 0 1 0 18a13.5 13.5 0 0 1 0-18"/>`,
 	"grip": `<circle cx="9" cy="5" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="9" cy="19" r="1.6"/><circle cx="15" cy="5" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="15" cy="19" r="1.6"/>`,
+	"height": `<path d="M5 4h14"/><path d="M5 20h14"/><path d="M12 8v8"/><path d="m9.5 10.5 2.5-2.5 2.5 2.5"/><path d="m9.5 13.5 2.5 2.5 2.5-2.5"/>`,
 	"image": `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>`,
 	"info": `<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12.01" y2="8"/>`,
 	"italic": `<line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>`,
+	"limits": `<rect x="3" y="3" width="18" height="18" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1.5" stroke-dasharray="2.5 2.5"/>`,
+	"margin": `<rect x="8" y="8" width="8" height="8" rx="1"/><path d="M12 2.5v3"/><path d="M12 18.5v3"/><path d="M2.5 12h3"/><path d="M18.5 12h3"/>`,
 	"menu": `<path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/>`,
+	"mobile": `<rect x="7" y="2.5" width="10" height="19" rx="2.2"/><path d="M10.75 18.25h2.5"/>`,
 	"named-slots": `<rect x="4" y="4" width="16" height="16" rx="2.5" stroke-dasharray="3.5 3"/><path d="M12 4.5v15"/>`,
 	"pencil": `<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/>`,
 	"plus": `<path d="M12 5v14"/><path d="M5 12h14"/>`,
+	"position": `<circle cx="12" cy="12" r="5"/><path d="M12 2.5V5"/><path d="M12 19v2.5"/><path d="M2.5 12H5"/><path d="M19 12h2.5"/>`,
 	"redo": `<path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/>`,
+	"row": `<rect x="4" y="5" width="6.5" height="14" rx="1.6"/><rect x="13.5" y="5" width="6.5" height="14" rx="1.6"/>`,
 	"search": `<circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/>`,
+	"sides": `<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6" rx="1"/>`,
 	"sliders": `<line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/>`,
 	"slot": `<rect x="4" y="4" width="16" height="16" rx="2.5" stroke-dasharray="3.5 3"/>`,
 	"strikethrough": `<path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" y1="12" x2="20" y2="12"/>`,
 	"table": `<rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
 <path d="M3 9.5H21M9.5 9.5V20M15.5 9.5V20" stroke="currentColor" stroke-width="2"/>`,
+	"tablet": `<rect x="4.5" y="3" width="15" height="18" rx="2"/><path d="M10.5 17.75h3"/>`,
+	"text": `<path d="M5 6.5V5h14v1.5M12 5v14M9.5 19h5"/>`,
 	"trash": `<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/>`,
 	"underline": `<path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="21" x2="20" y2="21"/>`,
 	"undo": `<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>`,
-	"upload": `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>`
+	"upload": `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>`,
+	"width": `<path d="M4 5v14"/><path d="M20 5v14"/><path d="M8 12h8"/><path d="m10.5 9.5-2.5 2.5 2.5 2.5"/><path d="m13.5 9.5 2.5 2.5-2.5 2.5"/>`,
+	"wrap": `<path d="M4 7h16M4 17h5"/><path d="M4 12h13a3 3 0 0 1 0 6h-2m2 0-2-2m2 2-2 2"/>`
 };
 var attrs = {
+	"align-center": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"align-left": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"align-right": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"arrow-down": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -57,6 +118,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"bolt": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"book": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -65,6 +136,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"button": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"check": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -97,6 +178,26 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"column": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"component": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"copy": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -105,10 +206,40 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"corner": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"desktop": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"ellipsis": {
 		"viewBox": "0 0 24 24",
 		"fill": "currentColor"
 	},
+	"fill": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"folder": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -117,11 +248,51 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"frame": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"gap": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"globe": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.7",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"grip": {
 		"viewBox": "0 0 24 24",
 		"fill": "currentColor",
 		"stroke": "none"
 	},
+	"height": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"image": {
 		"width": "24",
 		"height": "24",
@@ -148,6 +319,26 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"limits": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"margin": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"menu": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -156,6 +347,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"mobile": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"named-slots": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -180,6 +381,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"position": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"redo": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -188,6 +399,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"row": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"search": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -196,6 +417,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"sides": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"sliders": {
 		"width": "24",
 		"height": "24",
@@ -226,6 +457,26 @@ var attrs = {
 		"viewBox": "0 0 24 24",
 		"fill": "none"
 	},
+	"tablet": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"text": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"trash": {
 		"viewBox": "0 0 24 24",
 		"fill": "none",
@@ -259,6 +510,26 @@ var attrs = {
 		"stroke-width": "2",
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
+	},
+	"width": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"wrap": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
 	}
 };
 //#endregion
@@ -279,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). */
@@ -316,6 +580,127 @@ function useDialog() {
 	return store;
 }
 //#endregion
+//#region src/editor/lib/image-size.ts
+/** Largest dimension below which no LQIP is generated — icons stay as-is. */
+var LQIP_MIN_DIMENSION = 256;
+/** Pixel width of the generated LQIP preview. */
+var LQIP_WIDTH = 24;
+/**
+* Decode an image file locally: intrinsic dimensions plus — for images of
+* {@link LQIP_MIN_DIMENSION}+ — a tiny data-URI preview for `<Image>`'s
+* blur-up. Runs entirely in the browser (createImageBitmap + canvas), so no
+* server-side image library is needed. Resolves `null` when the file can't be
+* decoded (unsupported format, SVG, jsdom) — callers fall back gracefully.
+*/
+async function analyzeImageFile(file) {
+	try {
+		const bitmap = await createImageBitmap(file);
+		const { width, height } = bitmap;
+		const info = {
+			width,
+			height
+		};
+		if (Math.max(width, height) >= LQIP_MIN_DIMENSION) {
+			const canvas = document.createElement("canvas");
+			canvas.width = LQIP_WIDTH;
+			canvas.height = Math.max(1, Math.round(height / width * LQIP_WIDTH));
+			const context = canvas.getContext("2d");
+			if (context) {
+				context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+				const uri = canvas.toDataURL("image/webp", .6);
+				if (uri.startsWith("data:image/")) info.lqip = uri;
+			}
+		}
+		bitmap.close();
+		return info;
+	} catch {
+		return null;
+	}
+}
+/**
+* {@link analyzeImageFile} for an already-uploaded URL: fetch the file and
+* decode it locally. This is how *library picks* get dimensions + LQIP — there
+* is no `File` in hand, only the asset's src. Null on any failure.
+*/
+async function analyzeImageUrl(src) {
+	try {
+		const response = await fetch(src);
+		if (!response.ok) return null;
+		return await analyzeImageFile(await response.blob());
+	} catch {
+		return null;
+	}
+}
+/** Largest dimension a free (unsized) crop derivative is downscaled to. */
+var CROP_MAX_DIMENSION = 2560;
+/** WebP quality for cropped derivatives — the real rendered image, not an LQIP. */
+var CROP_QUALITY = .85;
+/**
+* Crop + downscale an image entirely in the browser (createImageBitmap + canvas):
+* take the {@link NormalizedRect} region of the source at `src`, scale it to fit
+* `target` (or capped at {@link CROP_MAX_DIMENSION} when no target), and encode a
+* WebP blob. Never upscales. Resolves `null` when the source can't be fetched or
+* decoded (SVG, CORS, jsdom) — the caller keeps the focal-only path. The blob is
+* uploaded as a derived asset; `width`/`height` are its intrinsic size.
+*/
+async function renderCrop(src, rect, target = {}) {
+	try {
+		const response = await fetch(src);
+		if (!response.ok) return null;
+		const bitmap = await createImageBitmap(await response.blob());
+		const sx = rect.x * bitmap.width;
+		const sy = rect.y * bitmap.height;
+		const sw = rect.width * bitmap.width;
+		const sh = rect.height * bitmap.height;
+		if (sw < 1 || sh < 1) {
+			bitmap.close();
+			return null;
+		}
+		const scale = target.width && target.height ? Math.min(1, target.width / sw, target.height / sh) : Math.min(1, CROP_MAX_DIMENSION / Math.max(sw, sh));
+		const outW = Math.max(1, Math.round(sw * scale));
+		const outH = Math.max(1, Math.round(sh * scale));
+		const canvas = document.createElement("canvas");
+		canvas.width = outW;
+		canvas.height = outH;
+		const context = canvas.getContext("2d");
+		if (!context) {
+			bitmap.close();
+			return null;
+		}
+		context.drawImage(bitmap, sx, sy, sw, sh, 0, 0, outW, outH);
+		bitmap.close();
+		const blob = await canvasToBlob(canvas, "image/webp", CROP_QUALITY);
+		return blob ? {
+			blob,
+			width: outW,
+			height: outH
+		} : null;
+	} catch {
+		return null;
+	}
+}
+/** Promisified `canvas.toBlob` (jsdom lacks it → null, caller falls back). */
+function canvasToBlob(canvas, type, quality) {
+	if (typeof canvas.toBlob !== "function") return Promise.resolve(null);
+	return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
+}
+/**
+* Intrinsic pixel size of an image URL, via the browser's image loader.
+* Resolves `null` when the image can't be loaded or reports no size — callers
+* simply skip the dimensions then, never fail.
+*/
+function readImageSize(src) {
+	return new Promise((resolve) => {
+		const image = new Image();
+		image.onload = () => resolve(image.naturalWidth > 0 ? {
+			width: image.naturalWidth,
+			height: image.naturalHeight
+		} : null);
+		image.onerror = () => resolve(null);
+		image.src = src;
+	});
+}
+//#endregion
 //#region src/editor/ui/VDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "mech-modal__header" };
 var _hoisted_2$1 = { class: "mech-modal__title" };
@@ -389,7 +774,20 @@ var ImagePickerDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 				loaded.value = true;
 			}
 		}
-		function select(value) {
+		async function select(value) {
+			const missingPreview = !value.previewSrc || value.previewSrc === value.src;
+			if (!value.width || !value.height || missingPreview) {
+				const info = await analyzeImageUrl(value.src);
+				const size = info ?? await readImageSize(value.src);
+				value = {
+					...value,
+					...size ? {
+						width: size.width,
+						height: size.height
+					} : {},
+					...info?.lqip && missingPreview ? { previewSrc: info.lqip } : {}
+				};
+			}
 			props.onSelect(value);
 			dialog.back();
 		}
@@ -397,10 +795,16 @@ var ImagePickerDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			if (!uploader || busy.value) return;
 			busy.value = true;
 			try {
-				const result = await uploader(file);
-				select({
+				const [result, info] = await Promise.all([uploader(file), analyzeImageFile(file)]);
+				const width = result.width ?? info?.width;
+				const height = result.height ?? info?.height;
+				await select({
 					src: result.src,
-					previewSrc: result.previewSrc ?? result.src
+					previewSrc: result.previewSrc ?? info?.lqip ?? result.src,
+					...width && height ? {
+						width,
+						height
+					} : {}
 				});
 			} finally {
 				busy.value = false;
@@ -463,6 +867,6 @@ var ImagePickerDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			});
 		};
 	}
-}), [["__scopeId", "data-v-ce3974a0"]]);
+}), [["__scopeId", "data-v-4ef9dd0d"]]);
 //#endregion
-export { useDialog as a, dialogKey as i, VDialog_default as n, _plugin_vue_export_helper_default as o, createDialogStore as r, VIcon_default as s, ImagePickerDialog_default as t };
+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 };