@maizzle/framework 6.0.0-rc.14 → 6.0.0-rc.16

package/dist/render/plugins/codeBlockExtract.mjs

@@ -0,0 +1,34 @@
+//#region src/render/plugins/codeBlockExtract.ts
+/**
+* Vite plugin that extracts raw slot content from <CodeBlock> tags
+* and passes it as a :code prop before Vue compiles the template.
+*
+* This lets users write HTML naturally inside CodeBlock slots without
+* Vue attempting to compile it as template syntax.
+*/
+function codeBlockExtract() {
+	const re = /<(CodeBlock|code-block)((?:\s[^>]*?)?)>([\s\S]*?)<\/\1>/g;
+	return {
+		name: "maizzle:code-block-extract",
+		enforce: "pre",
+		transform(code, id) {
+			if (!id.endsWith(".vue") && !id.endsWith(".md")) return;
+			if (!code.includes("CodeBlock") && !code.includes("code-block")) return;
+			const transformed = code.replace(re, (_match, tag, attrs, content) => {
+				if (/(?:^|\s):code\b/.test(attrs) || /v-bind:code\b/.test(attrs)) return _match;
+				const stripped = content.replace(/^\n+/, "").replace(/\s+$/, "");
+				if (!stripped) return _match;
+				const minIndent = stripped.match(/^[ \t]*(?=\S)/gm)?.reduce((min, ws) => Math.min(min, ws.length), Infinity) ?? 0;
+				return `<${tag}${attrs} code="${(minIndent > 0 ? stripped.replace(new RegExp(`^[ \\t]{${minIndent}}`, "gm"), "") : stripped).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}" />`;
+			});
+			if (transformed !== code) return {
+				code: transformed,
+				map: null
+			};
+		}
+	};
+}
+
+//#endregion
+export { codeBlockExtract };
+//# sourceMappingURL=codeBlockExtract.mjs.map

package/dist/render/plugins/codeBlockExtract.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeBlockExtract.mjs","names":[],"sources":["../../../src/render/plugins/codeBlockExtract.ts"],"sourcesContent":["import type { Plugin } from 'vite'\n\n/**\n * Vite plugin that extracts raw slot content from <CodeBlock> tags\n * and passes it as a :code prop before Vue compiles the template.\n *\n * This lets users write HTML naturally inside CodeBlock slots without\n * Vue attempting to compile it as template syntax.\n */\nexport function codeBlockExtract(): Plugin {\n  // Matches <CodeBlock ...>content</CodeBlock> (and kebab-case <code-block>)\n  const re = /<(CodeBlock|code-block)((?:\\s[^>]*?)?)>([\\s\\S]*?)<\\/\\1>/g\n\n  return {\n    name: 'maizzle:code-block-extract',\n    enforce: 'pre',\n    transform(code: string, id: string) {\n      if (!id.endsWith('.vue') && !id.endsWith('.md')) return\n      if (!code.includes('CodeBlock') && !code.includes('code-block')) return\n\n      const transformed = code.replace(re, (_match, tag, attrs, content) => {\n        // Skip if already has a :code or v-bind:code prop\n        if (/(?:^|\\s):code\\b/.test(attrs) || /v-bind:code\\b/.test(attrs)) return _match\n\n        // Strip leading/trailing blank lines, then dedent based on\n        // the minimum indent of non-empty lines (à la min-indent)\n        const stripped = content.replace(/^\\n+/, '').replace(/\\s+$/, '')\n        if (!stripped) return _match\n\n        const minIndent = stripped.match(/^[ \\t]*(?=\\S)/gm)\n          ?.reduce((min: number, ws: string) => Math.min(min, ws.length), Infinity) ?? 0\n\n        const dedented = minIndent > 0\n          ? stripped.replace(new RegExp(`^[ \\\\t]{${minIndent}}`, 'gm'), '')\n          : stripped\n\n        // HTML-escape for safe embedding in a static attribute value.\n        const escaped = dedented\n          .replace(/&/g, '&amp;')\n          .replace(/\"/g, '&quot;')\n          .replace(/</g, '&lt;')\n          .replace(/>/g, '&gt;')\n\n        return `<${tag}${attrs} code=\"${escaped}\" />`\n      })\n\n      if (transformed !== code) {\n        return { code: transformed, map: null }\n      }\n    },\n  }\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,mBAA2B;CAEzC,MAAM,KAAK;AAEX,QAAO;EACL,MAAM;EACN,SAAS;EACT,UAAU,MAAc,IAAY;AAClC,OAAI,CAAC,GAAG,SAAS,OAAO,IAAI,CAAC,GAAG,SAAS,MAAM,CAAE;AACjD,OAAI,CAAC,KAAK,SAAS,YAAY,IAAI,CAAC,KAAK,SAAS,aAAa,CAAE;GAEjE,MAAM,cAAc,KAAK,QAAQ,KAAK,QAAQ,KAAK,OAAO,YAAY;AAEpE,QAAI,kBAAkB,KAAK,MAAM,IAAI,gBAAgB,KAAK,MAAM,CAAE,QAAO;IAIzE,MAAM,WAAW,QAAQ,QAAQ,QAAQ,GAAG,CAAC,QAAQ,QAAQ,GAAG;AAChE,QAAI,CAAC,SAAU,QAAO;IAEtB,MAAM,YAAY,SAAS,MAAM,kBAAkB,EAC/C,QAAQ,KAAa,OAAe,KAAK,IAAI,KAAK,GAAG,OAAO,EAAE,SAAS,IAAI;AAa/E,WAAO,IAAI,MAAM,MAAM,UAXN,YAAY,IACzB,SAAS,QAAQ,IAAI,OAAO,WAAW,UAAU,IAAI,KAAK,EAAE,GAAG,GAC/D,UAID,QAAQ,MAAM,QAAQ,CACtB,QAAQ,MAAM,SAAS,CACvB,QAAQ,MAAM,OAAO,CACrB,QAAQ,MAAM,OAAO,CAEgB;KACxC;AAEF,OAAI,gBAAgB,KAClB,QAAO;IAAE,MAAM;IAAa,KAAK;IAAM;;EAG5C"}

package/dist/render/plugins/markdownExtract.d.mts

@@ -0,0 +1,12 @@
+import { Plugin } from "vite";
+
+//#region src/render/plugins/markdownExtract.d.ts
+/**
+ * Vite plugin that pre-processes <Markdown> tags:
+ * - Extracts slot content, dedents it, and passes as :content prop
+ * - Resolves `src` prop to read file contents at build time
+ */
+declare function markdownExtract(): Plugin;
+//#endregion
+export { markdownExtract };
+//# sourceMappingURL=markdownExtract.d.mts.map

package/dist/render/plugins/markdownExtract.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownExtract.d.mts","names":[],"sources":["../../../src/render/plugins/markdownExtract.ts"],"mappings":";;;;;AASA;;;iBAAgB,eAAA,CAAA,GAAmB,MAAA"}

package/dist/render/plugins/markdownExtract.mjs

@@ -0,0 +1,50 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+
+//#region src/render/plugins/markdownExtract.ts
+/**
+* Vite plugin that pre-processes <Markdown> tags:
+* - Extracts slot content, dedents it, and passes as :content prop
+* - Resolves `src` prop to read file contents at build time
+*/
+function markdownExtract() {
+	const re = /<(Markdown|markdown)((?:\s[^>]*?)?)>([\s\S]*?)<\/\1>/g;
+	const selfClosingRe = /<(Markdown|markdown)((?:\s[^>]*?\bsrc\s*=\s*"[^"]*"[^>]*?))\/>/g;
+	return {
+		name: "maizzle:markdown-extract",
+		enforce: "pre",
+		transform(code, id) {
+			if (!id.endsWith(".vue") && !id.endsWith(".md")) return;
+			if (!code.includes("Markdown") && !code.includes("markdown")) return;
+			let transformed = code;
+			transformed = transformed.replace(re, (_match, tag, attrs, content) => {
+				if (/(?:^|\s):content\b/.test(attrs) || /v-bind:content\b/.test(attrs)) return _match;
+				const stripped = content.replace(/^\n+/, "").replace(/\s+$/, "");
+				if (!stripped) return _match;
+				const minIndent = stripped.match(/^[ \t]*(?=\S)/gm)?.reduce((min, ws) => Math.min(min, ws.length), Infinity) ?? 0;
+				return `<${tag}${attrs} content="${(minIndent > 0 ? stripped.replace(new RegExp(`^[ \\t]{${minIndent}}`, "gm"), "") : stripped).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}" />`;
+			});
+			transformed = transformed.replace(selfClosingRe, (_match, tag, attrs) => {
+				const srcMatch = attrs.match(/\bsrc\s*=\s*"([^"]*)"/);
+				if (!srcMatch) return _match;
+				const srcPath = srcMatch[1];
+				const resolvedPath = resolve(dirname(id), srcPath);
+				let fileContent;
+				try {
+					fileContent = readFileSync(resolvedPath, "utf-8").trim();
+				} catch {
+					return _match;
+				}
+				return `<${tag}${attrs.replace(/\s*\bsrc\s*=\s*"[^"]*"/, "")} content="${fileContent.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}" />`;
+			});
+			if (transformed !== code) return {
+				code: transformed,
+				map: null
+			};
+		}
+	};
+}
+
+//#endregion
+export { markdownExtract };
+//# sourceMappingURL=markdownExtract.mjs.map

package/dist/render/plugins/markdownExtract.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownExtract.mjs","names":[],"sources":["../../../src/render/plugins/markdownExtract.ts"],"sourcesContent":["import { dirname, resolve } from 'node:path'\nimport { readFileSync } from 'node:fs'\nimport type { Plugin } from 'vite'\n\n/**\n * Vite plugin that pre-processes <Markdown> tags:\n * - Extracts slot content, dedents it, and passes as :content prop\n * - Resolves `src` prop to read file contents at build time\n */\nexport function markdownExtract(): Plugin {\n  const re = /<(Markdown|markdown)((?:\\s[^>]*?)?)>([\\s\\S]*?)<\\/\\1>/g\n  const selfClosingRe = /<(Markdown|markdown)((?:\\s[^>]*?\\bsrc\\s*=\\s*\"[^\"]*\"[^>]*?))\\/>/g\n\n  return {\n    name: 'maizzle:markdown-extract',\n    enforce: 'pre',\n    transform(code: string, id: string) {\n      if (!id.endsWith('.vue') && !id.endsWith('.md')) return\n      if (!code.includes('Markdown') && !code.includes('markdown')) return\n\n      let transformed = code\n\n      // Handle <Markdown>content</Markdown>\n      transformed = transformed.replace(re, (_match, tag, attrs, content) => {\n        if (/(?:^|\\s):content\\b/.test(attrs) || /v-bind:content\\b/.test(attrs)) return _match\n\n        const stripped = content.replace(/^\\n+/, '').replace(/\\s+$/, '')\n        if (!stripped) return _match\n\n        const minIndent = stripped.match(/^[ \\t]*(?=\\S)/gm)\n          ?.reduce((min: number, ws: string) => Math.min(min, ws.length), Infinity) ?? 0\n\n        const dedented = minIndent > 0\n          ? stripped.replace(new RegExp(`^[ \\\\t]{${minIndent}}`, 'gm'), '')\n          : stripped\n\n        const escaped = dedented\n          .replace(/&/g, '&amp;')\n          .replace(/\"/g, '&quot;')\n          .replace(/</g, '&lt;')\n          .replace(/>/g, '&gt;')\n\n        return `<${tag}${attrs} content=\"${escaped}\" />`\n      })\n\n      // Handle <Markdown src=\"./file.md\" /> — resolve and inline file content\n      transformed = transformed.replace(selfClosingRe, (_match, tag, attrs) => {\n        const srcMatch = attrs.match(/\\bsrc\\s*=\\s*\"([^\"]*)\"/)\n        if (!srcMatch) return _match\n\n        const srcPath = srcMatch[1]\n        const resolvedPath = resolve(dirname(id), srcPath)\n\n        let fileContent: string\n        try {\n          fileContent = readFileSync(resolvedPath, 'utf-8').trim()\n        } catch {\n          return _match\n        }\n\n        // Remove src prop, add content prop\n        const cleanAttrs = attrs.replace(/\\s*\\bsrc\\s*=\\s*\"[^\"]*\"/, '')\n        const escaped = fileContent\n          .replace(/&/g, '&amp;')\n          .replace(/\"/g, '&quot;')\n          .replace(/</g, '&lt;')\n          .replace(/>/g, '&gt;')\n\n        return `<${tag}${cleanAttrs} content=\"${escaped}\" />`\n      })\n\n      if (transformed !== code) {\n        return { code: transformed, map: null }\n      }\n    },\n  }\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,kBAA0B;CACxC,MAAM,KAAK;CACX,MAAM,gBAAgB;AAEtB,QAAO;EACL,MAAM;EACN,SAAS;EACT,UAAU,MAAc,IAAY;AAClC,OAAI,CAAC,GAAG,SAAS,OAAO,IAAI,CAAC,GAAG,SAAS,MAAM,CAAE;AACjD,OAAI,CAAC,KAAK,SAAS,WAAW,IAAI,CAAC,KAAK,SAAS,WAAW,CAAE;GAE9D,IAAI,cAAc;AAGlB,iBAAc,YAAY,QAAQ,KAAK,QAAQ,KAAK,OAAO,YAAY;AACrE,QAAI,qBAAqB,KAAK,MAAM,IAAI,mBAAmB,KAAK,MAAM,CAAE,QAAO;IAE/E,MAAM,WAAW,QAAQ,QAAQ,QAAQ,GAAG,CAAC,QAAQ,QAAQ,GAAG;AAChE,QAAI,CAAC,SAAU,QAAO;IAEtB,MAAM,YAAY,SAAS,MAAM,kBAAkB,EAC/C,QAAQ,KAAa,OAAe,KAAK,IAAI,KAAK,GAAG,OAAO,EAAE,SAAS,IAAI;AAY/E,WAAO,IAAI,MAAM,MAAM,aAVN,YAAY,IACzB,SAAS,QAAQ,IAAI,OAAO,WAAW,UAAU,IAAI,KAAK,EAAE,GAAG,GAC/D,UAGD,QAAQ,MAAM,QAAQ,CACtB,QAAQ,MAAM,SAAS,CACvB,QAAQ,MAAM,OAAO,CACrB,QAAQ,MAAM,OAAO,CAEmB;KAC3C;AAGF,iBAAc,YAAY,QAAQ,gBAAgB,QAAQ,KAAK,UAAU;IACvE,MAAM,WAAW,MAAM,MAAM,wBAAwB;AACrD,QAAI,CAAC,SAAU,QAAO;IAEtB,MAAM,UAAU,SAAS;IACzB,MAAM,eAAe,QAAQ,QAAQ,GAAG,EAAE,QAAQ;IAElD,IAAI;AACJ,QAAI;AACF,mBAAc,aAAa,cAAc,QAAQ,CAAC,MAAM;YAClD;AACN,YAAO;;AAWT,WAAO,IAAI,MAPQ,MAAM,QAAQ,0BAA0B,GAAG,CAOlC,YANZ,YACb,QAAQ,MAAM,QAAQ,CACtB,QAAQ,MAAM,SAAS,CACvB,QAAQ,MAAM,OAAO,CACrB,QAAQ,MAAM,OAAO,CAEwB;KAChD;AAEF,OAAI,gBAAgB,KAClB,QAAO;IAAE,MAAM;IAAa,KAAK;IAAM;;EAG5C"}

package/dist/render/plugins/rawExtract.d.mts

@@ -0,0 +1,14 @@
+import { Plugin } from "vite";
+
+//#region src/render/plugins/rawExtract.d.ts
+/**
+ * Vite plugin that extracts raw slot content from <Raw> tags
+ * and passes it as a :content prop before Vue compiles the template.
+ *
+ * Lets users write content (including `{{ }}` interpolation syntax used
+ * by ESPs / Handlebars / Liquid) inside <Raw> without Vue parsing it.
+ */
+declare function rawExtract(): Plugin;
+//#endregion
+export { rawExtract };
+//# sourceMappingURL=rawExtract.d.mts.map

package/dist/render/plugins/rawExtract.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rawExtract.d.mts","names":[],"sources":["../../../src/render/plugins/rawExtract.ts"],"mappings":";;;;;AASA;;;;;iBAAgB,UAAA,CAAA,GAAc,MAAA"}

package/dist/render/plugins/rawExtract.mjs

@@ -0,0 +1,34 @@
+//#region src/render/plugins/rawExtract.ts
+/**
+* Vite plugin that extracts raw slot content from <Raw> tags
+* and passes it as a :content prop before Vue compiles the template.
+*
+* Lets users write content (including `{{ }}` interpolation syntax used
+* by ESPs / Handlebars / Liquid) inside <Raw> without Vue parsing it.
+*/
+function rawExtract() {
+	const re = /<(Raw)((?:\s[^>]*?)?)>([\s\S]*?)<\/\1>/g;
+	return {
+		name: "maizzle:raw-extract",
+		enforce: "pre",
+		transform(code, id) {
+			if (!id.endsWith(".vue") && !id.endsWith(".md")) return;
+			if (!code.includes("Raw")) return;
+			const transformed = code.replace(re, (_match, tag, attrs, content) => {
+				if (/(?:^|\s):content\b/.test(attrs) || /v-bind:content\b/.test(attrs)) return _match;
+				const stripped = content.replace(/^\n+/, "").replace(/\s+$/, "");
+				if (!stripped) return _match;
+				const minIndent = stripped.match(/^[ \t]*(?=\S)/gm)?.reduce((min, ws) => Math.min(min, ws.length), Infinity) ?? 0;
+				return `<${tag}${attrs} content="${(minIndent > 0 ? stripped.replace(new RegExp(`^[ \\t]{${minIndent}}`, "gm"), "") : stripped).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}" />`;
+			});
+			if (transformed !== code) return {
+				code: transformed,
+				map: null
+			};
+		}
+	};
+}
+
+//#endregion
+export { rawExtract };
+//# sourceMappingURL=rawExtract.mjs.map

package/dist/render/plugins/rawExtract.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rawExtract.mjs","names":[],"sources":["../../../src/render/plugins/rawExtract.ts"],"sourcesContent":["import type { Plugin } from 'vite'\n\n/**\n * Vite plugin that extracts raw slot content from <Raw> tags\n * and passes it as a :content prop before Vue compiles the template.\n *\n * Lets users write content (including `{{ }}` interpolation syntax used\n * by ESPs / Handlebars / Liquid) inside <Raw> without Vue parsing it.\n */\nexport function rawExtract(): Plugin {\n  const re = /<(Raw)((?:\\s[^>]*?)?)>([\\s\\S]*?)<\\/\\1>/g\n\n  return {\n    name: 'maizzle:raw-extract',\n    enforce: 'pre',\n    transform(code: string, id: string) {\n      if (!id.endsWith('.vue') && !id.endsWith('.md')) return\n      if (!code.includes('Raw')) return\n\n      const transformed = code.replace(re, (_match, tag, attrs, content) => {\n        if (/(?:^|\\s):content\\b/.test(attrs) || /v-bind:content\\b/.test(attrs)) return _match\n\n        const stripped = content.replace(/^\\n+/, '').replace(/\\s+$/, '')\n        if (!stripped) return _match\n\n        const minIndent = stripped.match(/^[ \\t]*(?=\\S)/gm)\n          ?.reduce((min: number, ws: string) => Math.min(min, ws.length), Infinity) ?? 0\n\n        const dedented = minIndent > 0\n          ? stripped.replace(new RegExp(`^[ \\\\t]{${minIndent}}`, 'gm'), '')\n          : stripped\n\n        const escaped = dedented\n          .replace(/&/g, '&amp;')\n          .replace(/\"/g, '&quot;')\n          .replace(/</g, '&lt;')\n          .replace(/>/g, '&gt;')\n\n        return `<${tag}${attrs} content=\"${escaped}\" />`\n      })\n\n      if (transformed !== code) {\n        return { code: transformed, map: null }\n      }\n    },\n  }\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,aAAqB;CACnC,MAAM,KAAK;AAEX,QAAO;EACL,MAAM;EACN,SAAS;EACT,UAAU,MAAc,IAAY;AAClC,OAAI,CAAC,GAAG,SAAS,OAAO,IAAI,CAAC,GAAG,SAAS,MAAM,CAAE;AACjD,OAAI,CAAC,KAAK,SAAS,MAAM,CAAE;GAE3B,MAAM,cAAc,KAAK,QAAQ,KAAK,QAAQ,KAAK,OAAO,YAAY;AACpE,QAAI,qBAAqB,KAAK,MAAM,IAAI,mBAAmB,KAAK,MAAM,CAAE,QAAO;IAE/E,MAAM,WAAW,QAAQ,QAAQ,QAAQ,GAAG,CAAC,QAAQ,QAAQ,GAAG;AAChE,QAAI,CAAC,SAAU,QAAO;IAEtB,MAAM,YAAY,SAAS,MAAM,kBAAkB,EAC/C,QAAQ,KAAa,OAAe,KAAK,IAAI,KAAK,GAAG,OAAO,EAAE,SAAS,IAAI;AAY/E,WAAO,IAAI,MAAM,MAAM,aAVN,YAAY,IACzB,SAAS,QAAQ,IAAI,OAAO,WAAW,UAAU,IAAI,KAAK,EAAE,GAAG,GAC/D,UAGD,QAAQ,MAAM,QAAQ,CACtB,QAAQ,MAAM,SAAS,CACvB,QAAQ,MAAM,OAAO,CACrB,QAAQ,MAAM,OAAO,CAEmB;KAC3C;AAEF,OAAI,gBAAgB,KAClB,QAAO;IAAE,MAAM;IAAa,KAAK;IAAM;;EAG5C"}

package/dist/render/plugins/rowSourceLocation.d.mts

@@ -0,0 +1,18 @@
+import { Plugin } from "vite";
+
+//#region src/render/plugins/rowSourceLocation.d.ts
+/**
+ * Vite plugin that injects `data-maizzle-loc="<file>:<line>"` into every
+ * `<Row>`/`<row>` opening tag in user templates.
+ *
+ * Used by Row.vue's runtime to point the user at the exact line in their
+ * template when they misuse Row (e.g. without a Column child).
+ *
+ * Only transforms inside `<template>` blocks of SFCs (or the entire file
+ * for `.md` templates) so `<Row>` mentions in `<script>` blocks (e.g. in
+ * string literals or comments) are left untouched.
+ */
+declare function rowSourceLocation(): Plugin;
+//#endregion
+export { rowSourceLocation };
+//# sourceMappingURL=rowSourceLocation.d.mts.map

package/dist/render/plugins/rowSourceLocation.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowSourceLocation.d.mts","names":[],"sources":["../../../src/render/plugins/rowSourceLocation.ts"],"mappings":";;;;;AAaA;;;;;;;;;iBAAgB,iBAAA,CAAA,GAAqB,MAAA"}

package/dist/render/plugins/rowSourceLocation.mjs

@@ -0,0 +1,45 @@
+//#region src/render/plugins/rowSourceLocation.ts
+/**
+* Vite plugin that injects `data-maizzle-loc="<file>:<line>"` into every
+* `<Row>`/`<row>` opening tag in user templates.
+*
+* Used by Row.vue's runtime to point the user at the exact line in their
+* template when they misuse Row (e.g. without a Column child).
+*
+* Only transforms inside `<template>` blocks of SFCs (or the entire file
+* for `.md` templates) so `<Row>` mentions in `<script>` blocks (e.g. in
+* string literals or comments) are left untouched.
+*/
+function rowSourceLocation() {
+	const tagRe = /(<(?:Row|row))(\b[^>]*?)(\/?>)/g;
+	function injectLoc(html, htmlOffset, fullCode, id) {
+		return html.replace(tagRe, (match, tag, attrs, end, localOffset) => {
+			if (/\bdata-maizzle-loc\s*=/.test(attrs)) return match;
+			const absoluteOffset = htmlOffset + localOffset;
+			return `${tag}${attrs} data-maizzle-loc="${id}:${fullCode.slice(0, absoluteOffset).split("\n").length}"${end}`;
+		});
+	}
+	return {
+		name: "maizzle:row-loc",
+		enforce: "pre",
+		transform(code, id) {
+			const isVue = id.endsWith(".vue");
+			const isMd = id.endsWith(".md");
+			if (!isVue && !isMd) return;
+			if (!code.includes("<Row") && !code.includes("<row")) return;
+			let transformed;
+			if (isVue) transformed = code.replace(/(<template\b[^>]*>)([\s\S]*?)(<\/template>)/g, (_match, open, inner, close, offset) => {
+				return open + injectLoc(inner, offset + open.length, code, id) + close;
+			});
+			else transformed = injectLoc(code, 0, code, id);
+			if (transformed !== code) return {
+				code: transformed,
+				map: null
+			};
+		}
+	};
+}
+
+//#endregion
+export { rowSourceLocation };
+//# sourceMappingURL=rowSourceLocation.mjs.map

package/dist/render/plugins/rowSourceLocation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowSourceLocation.mjs","names":[],"sources":["../../../src/render/plugins/rowSourceLocation.ts"],"sourcesContent":["import type { Plugin } from 'vite'\n\n/**\n * Vite plugin that injects `data-maizzle-loc=\"<file>:<line>\"` into every\n * `<Row>`/`<row>` opening tag in user templates.\n *\n * Used by Row.vue's runtime to point the user at the exact line in their\n * template when they misuse Row (e.g. without a Column child).\n *\n * Only transforms inside `<template>` blocks of SFCs (or the entire file\n * for `.md` templates) so `<Row>` mentions in `<script>` blocks (e.g. in\n * string literals or comments) are left untouched.\n */\nexport function rowSourceLocation(): Plugin {\n  const tagRe = /(<(?:Row|row))(\\b[^>]*?)(\\/?>)/g\n\n  function injectLoc(html: string, htmlOffset: number, fullCode: string, id: string): string {\n    return html.replace(tagRe, (match, tag, attrs, end, localOffset: number) => {\n      if (/\\bdata-maizzle-loc\\s*=/.test(attrs)) return match\n      const absoluteOffset = htmlOffset + localOffset\n      const line = fullCode.slice(0, absoluteOffset).split('\\n').length\n      return `${tag}${attrs} data-maizzle-loc=\"${id}:${line}\"${end}`\n    })\n  }\n\n  return {\n    name: 'maizzle:row-loc',\n    enforce: 'pre',\n    transform(code, id) {\n      const isVue = id.endsWith('.vue')\n      const isMd = id.endsWith('.md')\n      if (!isVue && !isMd) return\n      if (!code.includes('<Row') && !code.includes('<row')) return\n\n      let transformed: string\n\n      if (isVue) {\n        // Replace inside every <template>...</template> block, leaving\n        // <script> and <style> blocks alone.\n        const templateBlock = /(<template\\b[^>]*>)([\\s\\S]*?)(<\\/template>)/g\n        transformed = code.replace(templateBlock, (_match, open, inner, close, offset: number) => {\n          const innerOffset = offset + open.length\n          return open + injectLoc(inner, innerOffset, code, id) + close\n        })\n      } else {\n        transformed = injectLoc(code, 0, code, id)\n      }\n\n      if (transformed !== code) {\n        return { code: transformed, map: null }\n      }\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,oBAA4B;CAC1C,MAAM,QAAQ;CAEd,SAAS,UAAU,MAAc,YAAoB,UAAkB,IAAoB;AACzF,SAAO,KAAK,QAAQ,QAAQ,OAAO,KAAK,OAAO,KAAK,gBAAwB;AAC1E,OAAI,yBAAyB,KAAK,MAAM,CAAE,QAAO;GACjD,MAAM,iBAAiB,aAAa;AAEpC,UAAO,GAAG,MAAM,MAAM,qBAAqB,GAAG,GADjC,SAAS,MAAM,GAAG,eAAe,CAAC,MAAM,KAAK,CAAC,OACL,GAAG;IACzD;;AAGJ,QAAO;EACL,MAAM;EACN,SAAS;EACT,UAAU,MAAM,IAAI;GAClB,MAAM,QAAQ,GAAG,SAAS,OAAO;GACjC,MAAM,OAAO,GAAG,SAAS,MAAM;AAC/B,OAAI,CAAC,SAAS,CAAC,KAAM;AACrB,OAAI,CAAC,KAAK,SAAS,OAAO,IAAI,CAAC,KAAK,SAAS,OAAO,CAAE;GAEtD,IAAI;AAEJ,OAAI,MAIF,eAAc,KAAK,QADG,iDACqB,QAAQ,MAAM,OAAO,OAAO,WAAmB;AAExF,WAAO,OAAO,UAAU,OADJ,SAAS,KAAK,QACU,MAAM,GAAG,GAAG;KACxD;OAEF,eAAc,UAAU,MAAM,GAAG,MAAM,GAAG;AAG5C,OAAI,gBAAgB,KAClB,QAAO;IAAE,MAAM;IAAa,KAAK;IAAM;;EAG5C"}

package/dist/server/ui/App.vue

@@ -80,6 +80,10 @@ const deviceMenuOpen = ref(false)
 const darkMode = ref(false)
 const panelWidth = ref(0)
 const panelHeight = ref(0)
+const iframeWidth = ref<number | null>(null)
+const iframeHeight = ref<number | null>(null)
+const maxIframeWidth = ref(0)
+const maxIframeHeight = ref(0)
 const isDragging = ref(false)
 const isFullSize = ref(true)
 const resetKey = ref(0)
@@ -89,6 +93,31 @@ function selectDevice(device: DevicePreset) {
   viewMode.value = 'preview'
 }
 
+/**
+ * Writable proxies for the toolbar's size-indicator inputs. Display falls back
+ * to the measured panel size when the iframe dimension is null (the axis
+ * hasn't been explicitly set yet — e.g. user only dragged one axis).
+ * Setter rejects non-finite/non-positive values and clamps to
+ * [200, maxIframeWidth] / [100, maxIframeHeight] so users
+ * can't push the drag handles off-screen via the input.
+ */
+const widthInput = computed<number>({
+  get: () => Math.round(iframeWidth.value ?? panelWidth.value),
+  set: (v) => {
+    if (typeof v !== 'number' || !Number.isFinite(v) || v <= 0) return
+    const max = maxIframeWidth.value || v
+    iframeWidth.value = Math.max(200, Math.min(max, Math.round(v)))
+  },
+})
+const heightInput = computed<number>({
+  get: () => Math.round(iframeHeight.value ?? panelHeight.value),
+  set: (v) => {
+    if (typeof v !== 'number' || !Number.isFinite(v) || v <= 0) return
+    const max = maxIframeHeight.value || v
+    iframeHeight.value = Math.max(100, Math.min(max, Math.round(v)))
+  },
+})
+
 watch(sidebarOpen, (open) => {
   localStorage.setItem('maizzle:sidebar', open ? 'open' : 'closed')
 })
@@ -332,7 +361,23 @@ onUnmounted(() => {
             v-if="isPreviewRoute && (!isFullSize || selectedDevice) && panelWidth"
             class="hidden min-[430px]:inline text-xs font-medium tabular-nums text-gray-500 dark:text-gray-400 select-none"
           >
-            {{ panelWidth }} <button class="hover:text-gray-700 dark:hover:text-gray-300" @click="selectedDevice = null; isFullSize = true; viewMode = 'preview'; resetKey++">&times;</button> {{ panelHeight }}
+            <input
+              v-model.number="widthInput"
+              type="number"
+              min="200"
+              :max="maxIframeWidth || undefined"
+              aria-label="Preview width"
+              class="bg-transparent border-0 outline-none p-0 m-0 text-inherit font-inherit text-center tabular-nums w-[4.5ch] focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            >
+            <button class="hover:text-gray-700 dark:hover:text-gray-300" @click="selectedDevice = null; isFullSize = true; viewMode = 'preview'; resetKey++">&times;</button>
+            <input
+              v-model.number="heightInput"
+              type="number"
+              min="100"
+              :max="maxIframeHeight || undefined"
+              aria-label="Preview height"
+              class="bg-transparent border-0 outline-none p-0 m-0 text-inherit font-inherit text-center tabular-nums w-[4.5ch] focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            >
           </span>
           <div v-if="isPreviewRoute" class="flex items-center gap-1">
             <DropdownMenu v-model:open="deviceMenuOpen" :modal="false">
@@ -367,7 +412,7 @@ onUnmounted(() => {
       <!-- Main content -->
       <div class="flex-1 overflow-hidden">
         <RouterView v-slot="{ Component }">
-          <component :is="Component" v-model:view-mode="viewMode" :device="selectedDevice" :reset-key="resetKey" :templates="templates" v-model:panel-width="panelWidth" v-model:panel-height="panelHeight" v-model:is-dragging="isDragging" v-model:is-full-size="isFullSize" v-model:dark-mode="darkMode" @clear-device="selectedDevice = null; isFullSize = false" />
+          <component :is="Component" v-model:view-mode="viewMode" :device="selectedDevice" :reset-key="resetKey" :templates="templates" v-model:panel-width="panelWidth" v-model:panel-height="panelHeight" v-model:iframe-width="iframeWidth" v-model:iframe-height="iframeHeight" v-model:max-iframe-width="maxIframeWidth" v-model:max-iframe-height="maxIframeHeight" v-model:is-dragging="isDragging" v-model:is-full-size="isFullSize" v-model:dark-mode="darkMode" @clear-device="selectedDevice = null; isFullSize = false" />
         </RouterView>
       </div>
     </SidebarInset>

package/dist/server/ui/pages/Preview.vue

@@ -61,12 +61,23 @@ const wrapperEl = ref<HTMLElement>()
 
 const panelWidth = defineModel<number>('panelWidth', { default: 0 })
 const panelHeight = defineModel<number>('panelHeight', { default: 0 })
+/**
+ * Container's available area, exposed to the toolbar so size inputs can
+ * clamp typed values without paying a layout-recalc cost on
+ * every drag tick. Kept in sync via a ResizeObserver.
+ */
+const maxIframeWidth = defineModel<number>('maxIframeWidth', { default: 0 })
+const maxIframeHeight = defineModel<number>('maxIframeHeight', { default: 0 })
 const isDragging = defineModel<boolean>('isDragging', { default: false })
 const isFullSize = defineModel<boolean>('isFullSize', { default: true })
 
-// Custom resizable: width/height of the iframe wrapper (null = fill container)
-const iframeWidth = ref<number | null>(null)
-const iframeHeight = ref<number | null>(null)
+/**
+ * Custom resizable: width/height of the iframe wrapper (null = fill the
+ * container). Exposed as v-models so the toolbar's size indicator
+ * can drive these too, alongside the drag handles.
+ */
+const iframeWidth = defineModel<number | null>('iframeWidth', { default: null })
+const iframeHeight = defineModel<number | null>('iframeHeight', { default: null })
 const iframeContentHeight = ref<number | null>(null)
 
 function copySource() {
@@ -508,6 +519,7 @@ function updateFullSize() {
     && (iframeHeight.value === null || iframeHeight.value >= rect.height - gutter - 2)
 }
 
+
 function applyDeviceSize(device: Device | null | undefined) {
   if (!device) {
     iframeWidth.value = null
@@ -544,6 +556,7 @@ watch(viewMode, async (mode) => {
 })
 
 let observer: ResizeObserver | null = null
+let containerObserver: ResizeObserver | null = null
 
 function forwardIframeKeys(iframe: HTMLIFrameElement) {
   try {
@@ -580,6 +593,21 @@ onMounted(() => {
     observer.observe(wrapper)
   }
 
+  const container = containerEl.value
+  if (container) {
+    const gutter = 40
+    const rect = container.getBoundingClientRect()
+    maxIframeWidth.value = Math.max(0, Math.round(rect.width - gutter))
+    maxIframeHeight.value = Math.max(0, Math.round(rect.height - gutter))
+    containerObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        maxIframeWidth.value = Math.max(0, Math.round(entry.contentRect.width - gutter))
+        maxIframeHeight.value = Math.max(0, Math.round(entry.contentRect.height - gutter))
+      }
+    })
+    containerObserver.observe(container)
+  }
+
   const el = iframeEl.value
   if (el) {
     el.addEventListener('load', () => forwardIframeKeys(el))
@@ -588,6 +616,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   observer?.disconnect()
+  containerObserver?.disconnect()
 })
 
 const bottomPanelOpen = ref(false)

package/dist/transformers/columnWidth.d.mts

@@ -5,14 +5,14 @@ import { ChildNode } from "domhandler";
  * Resolve `__MAIZZLE_COLW_{id}__` and `__MAIZZLE_OH_{id}__` placeholders.
  *
  * COLW (column width) — emitted by `<Column>` and `<Overlap>`. Walks up to
- * the nearest ancestor marked with `data-maizzle-cw` (Container/Section/
- * Row/another Column already resolved) and divides by `data-maizzle-cw-count`.
- * If `data-maizzle-cw-self` is present, reads from the element's own inlined
- * `max-width`/`width`/`min-width` instead of walking up — used by `<Overlap>`
- * when it has its own width class/inline style.
+ * the nearest ancestor marked `data-maizzle-cw` (Container, Section,
+ * Row, or another Column already resolved) and divides the source
+ * width by `data-maizzle-cw-count`. With `data-maizzle-cw-self`,
+ * reads from the element's own inlined max/width/min-width
+ * instead — used by `<Overlap>` with its own width class.
  *
- * OH (overlap height) — emitted by `<Overlap>`. Reads `max-height`/`height`/
- * `min-height` from the element's own inlined style.
+ * OH (overlap height) — emitted by `<Overlap>`. Reads max-height, height,
+ * or min-height from the element's own inlined style.
  *
  * Resolution rules:
  * - Style placeholders for `min-width`: replaced when resolvable, otherwise
@@ -22,8 +22,8 @@ import { ChildNode } from "domhandler";
  * - Comment placeholders: same fallback chain.
  *
  * Resolved column widths are written back to `data-maizzle-cw` so nested
- * rows cascade. All `data-maizzle-cw*` and `data-maizzle-oh-*` attrs are
- * stripped at the end.
+ * rows cascade. All `data-maizzle-cw*` and `data-maizzle-oh-*` are
+ * stripped at the end of the second walk pass.
  */
 declare function columnWidth(dom: ChildNode[]): ChildNode[];
 //#endregion

package/dist/transformers/columnWidth.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"columnWidth.d.mts","names":[],"sources":["../../src/transformers/columnWidth.ts"],"mappings":";;;;;AA4FA;;;;;;;;;;;;;;;;;;;;;;iBAAgB,WAAA,CAAY,GAAA,EAAK,SAAA,KAAc,SAAA"}
+{"version":3,"file":"columnWidth.d.mts","names":[],"sources":["../../src/transformers/columnWidth.ts"],"mappings":";;;;;AAwTA;;;;;;;;;;;;;;;;;;;;;;iBAAgB,WAAA,CAAY,GAAA,EAAK,SAAA,KAAc,SAAA"}