@open-slide/core 0.0.11 → 0.0.12

package/dist/{config-LZM903FE.js → config-CVqRAagl.js}

@@ -1,10 +1,11 @@
+import { defaultDesign } from "./design-CROQh0AA.js";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { randomUUID } from "node:crypto";
 import { existsSync } from "node:fs";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { randomUUID } from "node:crypto";
 import { parse } from "@babel/parser";
 import fg from "fast-glob";
 import { loadConfigFromFile } from "vite";
@@ -47,7 +48,7 @@ function walkJsx(ast, visit) {
 //#endregion
 //#region src/vite/comments-plugin.ts
 const MARKER_RE = /\{\/\*\s*@slide-comment\s+id="(c-[a-f0-9]+)"\s+ts="([^"]+)"\s+text="([A-Za-z0-9_-]+={0,2})"\s*\*\/\}/g;
-const SLIDE_ID_RE$1 = /^[a-z0-9_-]+$/i;
+const SLIDE_ID_RE$2 = /^[a-z0-9_-]+$/i;
 function b64urlEncode(s) {
 	return Buffer.from(s, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
@@ -55,7 +56,7 @@ function b64urlDecode(s) {
 	const pad = s.length % 4 === 0 ? "" : "=".repeat(4 - s.length % 4);
 	return Buffer.from(s.replace(/-/g, "+").replace(/_/g, "/") + pad, "base64").toString("utf8");
 }
-async function readBody$1(req) {
+async function readBody$2(req) {
 	return await new Promise((resolve, reject) => {
 		const chunks = [];
 		req.on("data", (c) => chunks.push(c));
@@ -71,13 +72,13 @@ async function readBody$1(req) {
 		req.on("error", reject);
 	});
 }
-function json$1(res, status, body) {
+function json$2(res, status, body) {
 	res.statusCode = status;
 	res.setHeader("content-type", "application/json");
 	res.end(JSON.stringify(body));
 }
-function resolveSlidePath(userCwd, slidesDir, slideId) {
-	if (!SLIDE_ID_RE$1.test(slideId)) return null;
+function resolveSlidePath$1(userCwd, slidesDir, slideId) {
+	if (!SLIDE_ID_RE$2.test(slideId)) return null;
 	const slidesRoot = path.resolve(userCwd, slidesDir);
 	const full = path.resolve(slidesRoot, slideId, "index.tsx");
 	if (!full.startsWith(slidesRoot + path.sep)) return null;
@@ -184,7 +185,7 @@ function offsetToLine(source, offset) {
 	for (let i = 0; i < offset && i < source.length; i++) if (source[i] === "\n") line++;
 	return line;
 }
-function parseSource(source) {
+function parseSource$1(source) {
 	try {
 		return parse(source, {
 			sourceType: "module",
@@ -196,7 +197,7 @@ function parseSource(source) {
 	}
 }
 function findInnermostJsxElement(source, line, column) {
-	const ast = parseSource(source);
+	const ast = parseSource$1(source);
 	if (!ast) return null;
 	const exact = findJsxByStart(ast, line, column);
 	if (exact) return exact;
@@ -216,7 +217,7 @@ function findJsxByStart(ast, line, column) {
 	});
 	return hit;
 }
-function jsString(s) {
+function jsString$1(s) {
 	return `'${s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n")}'`;
 }
 function findStyleAttr(opening) {
@@ -251,7 +252,7 @@ function buildStyleSplice(source, element, ops) {
 		}
 	}
 	for (const op of ops) if (op.value === null) style.delete(op.key);
-	else style.set(op.key, jsString(op.value));
+	else style.set(op.key, jsString$1(op.value));
 	if (style.size === 0) {
 		if (!existing) return null;
 		let from = existing.start;
@@ -277,7 +278,7 @@ function buildStyleSplice(source, element, ops) {
 	};
 }
 function formatJsxText(value) {
-	if (/[{}<>]/.test(value) || /^\s|\s$/.test(value) || value === "") return `{${jsString(value)}}`;
+	if (/[{}<>]/.test(value) || /^\s|\s$/.test(value) || value === "") return `{${jsString$1(value)}}`;
 	return value;
 }
 function buildTextSplice(element, value) {
@@ -306,13 +307,13 @@ function buildTextSplice(element, value) {
 		if (expr.type === "StringLiteral" || expr.type === "NumericLiteral") return {
 			from: child.start,
 			to: child.end,
-			text: `{${jsString(value)}}`
+			text: `{${jsString$1(value)}}`
 		};
 		return { error: "element has dynamic expression child" };
 	}
 	return { error: "element has complex children" };
 }
-function findImports(ast) {
+function findImports$1(ast) {
 	const body = ast.program?.body ?? [];
 	const out = [];
 	for (const node of body) {
@@ -338,7 +339,7 @@ function findImports(ast) {
 }
 function collectTopLevelIdentifiers(ast) {
 	const names = new Set();
-	for (const imp of findImports(ast)) {
+	for (const imp of findImports$1(ast)) {
 		if (imp.defaultIdent) names.add(imp.defaultIdent);
 		const specs = imp.node.specifiers ?? [];
 		for (const spec of specs) if (spec.type !== "ImportDefaultSpecifier") {
@@ -381,7 +382,7 @@ function planAssetAttr(ast, element, attr, assetPath) {
 	if (!opening) return { error: "no opening element" };
 	if (!attr || !/^[A-Za-z_][A-Za-z0-9_]*$/.test(attr)) return { error: "invalid attribute name" };
 	if (!assetPath.startsWith("./assets/")) return { error: "asset path must start with ./assets/" };
-	const imports = findImports(ast);
+	const imports = findImports$1(ast);
 	let identifier = null;
 	for (const imp of imports) if (imp.source === assetPath && imp.defaultIdent) {
 		identifier = imp.defaultIdent;
@@ -422,6 +423,75 @@ function planAssetAttr(ast, element, attr, assetPath) {
 		attrSplice
 	};
 }
+function readJsxStringAttr(opening, name) {
+	const attr = findJsxAttr(opening, name);
+	if (!attr) return null;
+	const value = attr.value ?? null;
+	if (!value) return null;
+	if (value.type === "StringLiteral") return value.value;
+	if (value.type === "JSXExpressionContainer") {
+		const expr = value.expression;
+		if (expr.type === "StringLiteral") return expr.value;
+	}
+	return null;
+}
+function readJsxNumberAttr(opening, name) {
+	const attr = findJsxAttr(opening, name);
+	if (!attr) return null;
+	const value = attr.value ?? null;
+	if (!value || value.type !== "JSXExpressionContainer") return null;
+	const expr = value.expression;
+	if (expr.type === "NumericLiteral") {
+		const n = expr.value;
+		return Number.isFinite(n) ? n : null;
+	}
+	return null;
+}
+function planReplacePlaceholder(ast, element, assetPath) {
+	const opening = element.openingElement;
+	if (!opening) return { error: "no opening element" };
+	const elName = opening.name;
+	if (elName?.type !== "JSXIdentifier" || elName.name !== "ImagePlaceholder") return { error: "not a placeholder" };
+	if (!assetPath.startsWith("./assets/")) return { error: "asset path must start with ./assets/" };
+	const hint = readJsxStringAttr(opening, "hint") ?? "";
+	const width = readJsxNumberAttr(opening, "width");
+	const height = readJsxNumberAttr(opening, "height");
+	const imports = findImports$1(ast);
+	let identifier = null;
+	for (const imp of imports) if (imp.source === assetPath && imp.defaultIdent) {
+		identifier = imp.defaultIdent;
+		break;
+	}
+	let importSplice = null;
+	if (!identifier) {
+		const filename = assetPath.slice(assetPath.lastIndexOf("/") + 1);
+		const taken = collectTopLevelIdentifiers(ast);
+		identifier = safeAssetIdentifier(filename, taken);
+		const importStmt = `import ${identifier} from '${assetPath.replace(/'/g, "\\'")}';\n`;
+		const insertAt = imports.length > 0 ? imports[imports.length - 1].node.end : 0;
+		const prefix = imports.length > 0 ? "\n" : "";
+		importSplice = {
+			from: insertAt,
+			to: insertAt,
+			text: prefix + importStmt
+		};
+	}
+	const styleParts = [];
+	if (width != null) styleParts.push(`width: ${width}`);
+	if (height != null) styleParts.push(`height: ${height}`);
+	styleParts.push(`objectFit: 'cover'`);
+	const styleAttr = ` style={{ ${styleParts.join(", ")} }}`;
+	const altAttr = ` alt=${jsString$1(hint)}`;
+	const replacement = `<img src={${identifier}}${altAttr}${styleAttr} />`;
+	return {
+		importSplice,
+		elementSplice: {
+			from: element.start,
+			to: element.end,
+			text: replacement
+		}
+	};
+}
 function applyEdit(source, line, column, ops) {
 	if (ops.length === 0) return {
 		ok: true,
@@ -458,8 +528,9 @@ function applyEdit(source, line, column, ops) {
 		splices.push(result);
 	}
 	const assetOps = ops.flatMap((op) => op.kind === "set-attr-asset" ? [op] : []);
-	if (assetOps.length > 0) {
-		const ast = parseSource(source);
+	const placeholderOps = ops.flatMap((op) => op.kind === "replace-placeholder-with-image" ? [op] : []);
+	if (assetOps.length > 0 || placeholderOps.length > 0) {
+		const ast = parseSource$1(source);
 		if (!ast) return {
 			ok: false,
 			status: 422,
@@ -476,6 +547,16 @@ function applyEdit(source, line, column, ops) {
 			splices.push(plan.attrSplice);
 			if (plan.importSplice) importSplices.push(plan.importSplice);
 		}
+		for (const op of placeholderOps) {
+			const plan = planReplacePlaceholder(ast, element, op.assetPath);
+			if ("error" in plan) return {
+				ok: false,
+				status: 422,
+				error: plan.error
+			};
+			splices.push(plan.elementSplice);
+			if (plan.importSplice) importSplices.push(plan.importSplice);
+		}
 		if (importSplices.length > 0) {
 			const from = importSplices[0].from;
 			const to = importSplices[0].to;
@@ -512,38 +593,38 @@ function commentsPlugin(opts) {
 				if (method !== "POST") return next();
 				try {
 					if (url.pathname === "/") {
-						const body = await readBody$1(req);
+						const body = await readBody$2(req);
 						const slideId = body.slideId ?? "";
-						const file = resolveSlidePath(userCwd, slidesDir, slideId);
-						if (!file) return json$1(res, 400, { error: "invalid slideId" });
-						if (!body.line || body.line < 1) return json$1(res, 400, { error: "invalid line" });
-						if (!Array.isArray(body.ops)) return json$1(res, 400, { error: "missing ops" });
+						const file = resolveSlidePath$1(userCwd, slidesDir, slideId);
+						if (!file) return json$2(res, 400, { error: "invalid slideId" });
+						if (!body.line || body.line < 1) return json$2(res, 400, { error: "invalid line" });
+						if (!Array.isArray(body.ops)) return json$2(res, 400, { error: "missing ops" });
 						let source;
 						try {
 							source = await fs.readFile(file, "utf8");
 						} catch {
-							return json$1(res, 404, { error: "slide not found" });
+							return json$2(res, 404, { error: "slide not found" });
 						}
 						const result = applyEdit(source, body.line, body.column ?? 0, body.ops);
-						if (!result.ok) return json$1(res, result.status, { error: result.error });
+						if (!result.ok) return json$2(res, result.status, { error: result.error });
 						const changed = result.source !== source;
 						if (changed) await fs.writeFile(file, result.source, "utf8");
-						return json$1(res, 200, {
+						return json$2(res, 200, {
 							ok: true,
 							changed
 						});
 					}
 					if (url.pathname === "/batch") {
-						const body = await readBody$1(req);
+						const body = await readBody$2(req);
 						const slideId = body.slideId ?? "";
-						const file = resolveSlidePath(userCwd, slidesDir, slideId);
-						if (!file) return json$1(res, 400, { error: "invalid slideId" });
-						if (!Array.isArray(body.edits)) return json$1(res, 400, { error: "missing edits" });
+						const file = resolveSlidePath$1(userCwd, slidesDir, slideId);
+						if (!file) return json$2(res, 400, { error: "invalid slideId" });
+						if (!Array.isArray(body.edits)) return json$2(res, 400, { error: "missing edits" });
 						let source;
 						try {
 							source = await fs.readFile(file, "utf8");
 						} catch {
-							return json$1(res, 404, { error: "slide not found" });
+							return json$2(res, 404, { error: "slide not found" });
 						}
 						const original = source;
 						const results = [];
@@ -566,7 +647,7 @@ function commentsPlugin(opts) {
 						}
 						const changed = source !== original;
 						if (changed) await fs.writeFile(file, source, "utf8");
-						return json$1(res, 200, {
+						return json$2(res, 200, {
 							ok: true,
 							changed,
 							results
@@ -574,7 +655,7 @@ function commentsPlugin(opts) {
 					}
 					return next();
 				} catch (err) {
-					json$1(res, 500, { error: String(err.message ?? err) });
+					json$2(res, 500, { error: String(err.message ?? err) });
 				}
 			});
 			server.middlewares.use("/__comments", async (req, res, next) => {
@@ -583,31 +664,31 @@ function commentsPlugin(opts) {
 				try {
 					if (method === "GET" && url.pathname === "/") {
 						const slideId = url.searchParams.get("slideId") ?? "";
-						const file = resolveSlidePath(userCwd, slidesDir, slideId);
-						if (!file) return json$1(res, 400, { error: "invalid slideId" });
+						const file = resolveSlidePath$1(userCwd, slidesDir, slideId);
+						if (!file) return json$2(res, 400, { error: "invalid slideId" });
 						let source;
 						try {
 							source = await fs.readFile(file, "utf8");
 						} catch {
-							return json$1(res, 404, { error: "slide not found" });
+							return json$2(res, 404, { error: "slide not found" });
 						}
-						return json$1(res, 200, { comments: parseMarkers(source) });
+						return json$2(res, 200, { comments: parseMarkers(source) });
 					}
 					if (method === "POST" && url.pathname === "/add") {
-						const body = await readBody$1(req);
+						const body = await readBody$2(req);
 						const slideId = body.slideId ?? "";
-						const file = resolveSlidePath(userCwd, slidesDir, slideId);
-						if (!file) return json$1(res, 400, { error: "invalid slideId" });
-						if (!body.line || body.line < 1) return json$1(res, 400, { error: "invalid line" });
-						if (!body.text || typeof body.text !== "string") return json$1(res, 400, { error: "missing text" });
+						const file = resolveSlidePath$1(userCwd, slidesDir, slideId);
+						if (!file) return json$2(res, 400, { error: "invalid slideId" });
+						if (!body.line || body.line < 1) return json$2(res, 400, { error: "invalid line" });
+						if (!body.text || typeof body.text !== "string") return json$2(res, 400, { error: "missing text" });
 						let source;
 						try {
 							source = await fs.readFile(file, "utf8");
 						} catch {
-							return json$1(res, 404, { error: "slide not found" });
+							return json$2(res, 404, { error: "slide not found" });
 						}
 						const plan = findInsertion(source, body.line, body.column);
-						if (!plan) return json$1(res, 422, { error: `could not find a JSX container around line ${body.line}. Try clicking a different element.` });
+						if (!plan) return json$2(res, 422, { error: `could not find a JSX container around line ${body.line}. Try clicking a different element.` });
 						const id = newId();
 						const ts = new Date().toISOString();
 						const payload = b64urlEncode(JSON.stringify({
@@ -618,32 +699,460 @@ function commentsPlugin(opts) {
 						const next$1 = source.slice(0, plan.offset) + marker + source.slice(plan.offset);
 						await fs.writeFile(file, next$1, "utf8");
 						const markerLine = offsetToLine(next$1, plan.offset + 1);
-						return json$1(res, 200, {
+						return json$2(res, 200, {
 							id,
 							line: markerLine
 						});
 					}
 					if (method === "DELETE" && url.pathname.startsWith("/")) {
 						const id = url.pathname.slice(1);
-						if (!/^c-[a-f0-9]+$/.test(id)) return json$1(res, 400, { error: "invalid id" });
+						if (!/^c-[a-f0-9]+$/.test(id)) return json$2(res, 400, { error: "invalid id" });
 						const slideId = url.searchParams.get("slideId") ?? "";
-						const file = resolveSlidePath(userCwd, slidesDir, slideId);
-						if (!file) return json$1(res, 400, { error: "invalid slideId" });
+						const file = resolveSlidePath$1(userCwd, slidesDir, slideId);
+						if (!file) return json$2(res, 400, { error: "invalid slideId" });
 						let source;
 						try {
 							source = await fs.readFile(file, "utf8");
 						} catch {
-							return json$1(res, 404, { error: "slide not found" });
+							return json$2(res, 404, { error: "slide not found" });
 						}
 						const lines = source.split("\n");
 						const idRe = new RegExp(`\\{\\/\\*\\s*@slide-comment\\s+id="${id}"\\s+ts="[^"]+"\\s+text="[A-Za-z0-9_\\-]+={0,2}"\\s*\\*\\/\\}`);
 						const hit = lines.findIndex((l) => idRe.test(l));
-						if (hit === -1) return json$1(res, 404, { error: "marker not found" });
+						if (hit === -1) return json$2(res, 404, { error: "marker not found" });
 						lines.splice(hit, 1);
 						await fs.writeFile(file, lines.join("\n"), "utf8");
-						return json$1(res, 200, { ok: true });
+						return json$2(res, 200, { ok: true });
 					}
 					next();
+				} catch (err) {
+					json$2(res, 500, { error: String(err.message ?? err) });
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/vite/design-plugin.ts
+const SLIDE_ID_RE$1 = /^[a-z0-9_-]+$/i;
+async function readBody$1(req) {
+	return await new Promise((resolve, reject) => {
+		const chunks = [];
+		req.on("data", (c) => chunks.push(c));
+		req.on("end", () => {
+			const raw = Buffer.concat(chunks).toString("utf8");
+			if (!raw) return resolve({});
+			try {
+				resolve(JSON.parse(raw));
+			} catch (e) {
+				reject(e);
+			}
+		});
+		req.on("error", reject);
+	});
+}
+function json$1(res, status, body) {
+	res.statusCode = status;
+	res.setHeader("content-type", "application/json");
+	res.end(JSON.stringify(body));
+}
+function resolveSlidePath(userCwd, slidesDir, slideId) {
+	if (!SLIDE_ID_RE$1.test(slideId)) return null;
+	const slidesRoot = path.resolve(userCwd, slidesDir);
+	const full = path.resolve(slidesRoot, slideId, "index.tsx");
+	if (!full.startsWith(`${slidesRoot}${path.sep}`)) return null;
+	return full;
+}
+function parseSource(source) {
+	try {
+		return parse(source, {
+			sourceType: "module",
+			plugins: ["typescript", "jsx"],
+			errorRecovery: true
+		});
+	} catch {
+		return null;
+	}
+}
+function findDesignDecl(ast) {
+	const body = ast.program?.body ?? [];
+	for (const node of body) {
+		let varDecl = null;
+		if (node.type === "VariableDeclaration") varDecl = node;
+		else if (node.type === "ExportNamedDeclaration") {
+			const decl = node.declaration;
+			if (decl?.type === "VariableDeclaration") varDecl = decl;
+		}
+		if (!varDecl) continue;
+		const declarations = varDecl.declarations ?? [];
+		for (const d of declarations) {
+			const id = d.id;
+			if (!id || id.type !== "Identifier" || id.name !== "design") continue;
+			const init = d.init;
+			if (!init) return null;
+			let inner = init;
+			if (inner.type === "TSSatisfiesExpression" || inner.type === "TSAsExpression") {
+				const expr = inner.expression;
+				if (expr) inner = expr;
+			}
+			if (inner.type !== "ObjectExpression") return null;
+			return {
+				declStart: node.start,
+				declEnd: node.end,
+				objectStart: inner.start,
+				objectEnd: inner.end
+			};
+		}
+	}
+	return null;
+}
+function literalToValue(node) {
+	switch (node.type) {
+		case "StringLiteral": return node.value;
+		case "NumericLiteral": return node.value;
+		case "BooleanLiteral": return node.value;
+		case "NullLiteral": return null;
+		case "UnaryExpression": {
+			const op = node.operator;
+			const arg = node.argument;
+			const v = literalToValue(arg);
+			if (op === "-" && typeof v === "number") return -v;
+			if (op === "+" && typeof v === "number") return v;
+			throw new Error(`unsupported unary operator ${op}`);
+		}
+		case "TemplateLiteral": {
+			const quasis = node.quasis;
+			const expressions = node.expressions;
+			if (expressions.length > 0) throw new Error("template literal has expressions");
+			return quasis[0].value.cooked ?? quasis[0].value.raw;
+		}
+		case "ArrayExpression": {
+			const elements = node.elements;
+			return elements.map((el) => {
+				if (!el) throw new Error("array has hole");
+				return literalToValue(el);
+			});
+		}
+		case "ObjectExpression": {
+			const properties = node.properties;
+			const out = {};
+			for (const prop of properties) {
+				if (prop.type !== "ObjectProperty") throw new Error("object has spread or method");
+				const p = prop;
+				if (p.computed) throw new Error("object has computed key");
+				let key;
+				if (p.key.type === "Identifier" && typeof p.key.name === "string") key = p.key.name;
+				else if (p.key.type === "StringLiteral" && typeof p.key.value === "string") key = p.key.value;
+				else throw new Error("unsupported object key");
+				out[key] = literalToValue(p.value);
+			}
+			return out;
+		}
+		default: throw new Error(`unsupported node type ${node.type}`);
+	}
+}
+function isPlainObject(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function mergeDesign(base, patch) {
+	const out = JSON.parse(JSON.stringify(base));
+	const apply = (target, src) => {
+		for (const [k, v] of Object.entries(src)) if (isPlainObject(v) && isPlainObject(target[k])) apply(target[k], v);
+		else target[k] = v;
+	};
+	if (isPlainObject(patch)) apply(out, patch);
+	return out;
+}
+function indent(level) {
+	return "  ".repeat(level);
+}
+function jsString(s) {
+	return `'${s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n")}'`;
+}
+function isValidIdentifier(name) {
+	return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
+}
+function serializeValue(value, level) {
+	if (value === null) return "null";
+	if (typeof value === "string") return jsString(value);
+	if (typeof value === "number") {
+		if (!Number.isFinite(value)) throw new Error("non-finite number");
+		return String(value);
+	}
+	if (typeof value === "boolean") return value ? "true" : "false";
+	if (Array.isArray(value)) {
+		if (value.length === 0) return "[]";
+		const inner = value.map((el) => serializeValue(el, level + 1)).join(", ");
+		return `[${inner}]`;
+	}
+	if (isPlainObject(value)) {
+		const entries = Object.entries(value);
+		if (entries.length === 0) return "{}";
+		const childIndent = indent(level + 1);
+		const lines = entries.map(([k, v]) => {
+			const key = isValidIdentifier(k) ? k : jsString(k);
+			return `${childIndent}${key}: ${serializeValue(v, level + 1)},`;
+		});
+		return `{\n${lines.join("\n")}\n${indent(level)}}`;
+	}
+	throw new Error(`unsupported value type ${typeof value}`);
+}
+function serializeDesign(design) {
+	return serializeValue(design, 0);
+}
+function parseSlideDesign(source) {
+	const ast = parseSource(source);
+	if (!ast) return {
+		ok: false,
+		exists: true,
+		error: "could not parse slide source"
+	};
+	const loc = findDesignDecl(ast);
+	if (!loc) return {
+		ok: false,
+		exists: false
+	};
+	const objectNode = findDesignObjectNode(ast);
+	if (!objectNode) return {
+		ok: false,
+		exists: true,
+		error: "design has unsupported initializer"
+	};
+	let value;
+	try {
+		value = literalToValue(objectNode);
+	} catch (err) {
+		return {
+			ok: false,
+			exists: true,
+			error: err.message
+		};
+	}
+	const merged = mergeDesign(defaultDesign, value);
+	return {
+		ok: true,
+		design: merged,
+		loc
+	};
+}
+function findDesignObjectNode(ast) {
+	const body = ast.program?.body ?? [];
+	for (const node of body) {
+		let varDecl = null;
+		if (node.type === "VariableDeclaration") varDecl = node;
+		else if (node.type === "ExportNamedDeclaration") {
+			const decl = node.declaration;
+			if (decl?.type === "VariableDeclaration") varDecl = decl;
+		}
+		if (!varDecl) continue;
+		const declarations = varDecl.declarations ?? [];
+		for (const d of declarations) {
+			const id = d.id;
+			if (!id || id.type !== "Identifier" || id.name !== "design") continue;
+			const init = d.init;
+			if (!init) return null;
+			let inner = init;
+			if (inner.type === "TSSatisfiesExpression" || inner.type === "TSAsExpression") {
+				const expr = inner.expression;
+				if (expr) inner = expr;
+			}
+			if (inner.type !== "ObjectExpression") return null;
+			return inner;
+		}
+	}
+	return null;
+}
+function findImports(ast) {
+	const body = ast.program?.body ?? [];
+	const out = [];
+	for (const node of body) {
+		if (node.type !== "ImportDeclaration") continue;
+		const src = node.source?.value;
+		if (typeof src !== "string") continue;
+		const specs = node.specifiers ?? [];
+		out.push({
+			node,
+			source: src,
+			specifiers: specs
+		});
+	}
+	return out;
+}
+function ensureDesignSystemImport(source, ast) {
+	const imports = findImports(ast);
+	const coreImport = imports.find((imp) => imp.source === "@open-slide/core");
+	if (coreImport) {
+		const hasDesignSystem = coreImport.specifiers.some((spec) => {
+			if (spec.type !== "ImportSpecifier") return false;
+			const imported = spec.imported;
+			return imported?.name === "DesignSystem";
+		});
+		if (hasDesignSystem) return {
+			source,
+			offsetShift: 0
+		};
+		const node = coreImport.node;
+		const importText = source.slice(node.start, node.end);
+		const braceClose = importText.lastIndexOf("}");
+		if (braceClose === -1) return {
+			source,
+			offsetShift: 0
+		};
+		const absoluteBrace = node.start + braceClose;
+		const insertText = coreImport.specifiers.length > 0 ? ", type DesignSystem" : "type DesignSystem";
+		const next$1 = `${source.slice(0, absoluteBrace)}${insertText}${source.slice(absoluteBrace)}`;
+		return {
+			source: next$1,
+			offsetShift: insertText.length
+		};
+	}
+	const stmt = `import type { DesignSystem } from '@open-slide/core';\n`;
+	if (imports.length > 0) {
+		const last = imports[imports.length - 1];
+		const insertAt = last.node.end;
+		const trail = source[insertAt] === "\n" ? "" : "\n";
+		const next$1 = `${source.slice(0, insertAt)}\n${stmt.slice(0, -1)}${trail}${source.slice(insertAt)}`;
+		return {
+			source: next$1,
+			offsetShift: 1 + stmt.length - (trail ? 0 : 1)
+		};
+	}
+	const next = `${stmt}\n${source}`;
+	return {
+		source: next,
+		offsetShift: stmt.length + 1
+	};
+}
+function findInsertionPoint(source, ast) {
+	const imports = findImports(ast);
+	if (imports.length === 0) return 0;
+	const last = imports[imports.length - 1];
+	let off = last.node.end;
+	while (off < source.length && source[off] !== "\n") off++;
+	if (off < source.length) off++;
+	return off;
+}
+function applyDesignWrite(source, next) {
+	let body;
+	try {
+		body = serializeDesign(next);
+	} catch (err) {
+		return {
+			ok: false,
+			status: 422,
+			error: `serialize failed: ${err.message}`
+		};
+	}
+	const ast = parseSource(source);
+	if (!ast) return {
+		ok: false,
+		status: 422,
+		error: "could not parse slide source"
+	};
+	const loc = findDesignDecl(ast);
+	if (loc) {
+		const out$1 = source.slice(0, loc.objectStart) + body + source.slice(loc.objectEnd);
+		return {
+			ok: true,
+			source: out$1,
+			created: false
+		};
+	}
+	const withImport = ensureDesignSystemImport(source, ast);
+	const ast2 = parseSource(withImport.source);
+	if (!ast2) return {
+		ok: false,
+		status: 422,
+		error: "failed to re-parse after adding import"
+	};
+	const insertAt = findInsertionPoint(withImport.source, ast2);
+	const block = `\nconst design: DesignSystem = ${body};\n`;
+	const out = withImport.source.slice(0, insertAt) + block + withImport.source.slice(insertAt);
+	return {
+		ok: true,
+		source: out,
+		created: true
+	};
+}
+function designPlugin(opts) {
+	const userCwd = opts.userCwd;
+	const slidesDir = opts.slidesDir ?? "slides";
+	return {
+		name: "open-slide:design",
+		apply: "serve",
+		configureServer(server) {
+			server.middlewares.use("/__design", async (req, res, next) => {
+				const url = new URL(req.url ?? "/", "http://local");
+				const method = req.method ?? "GET";
+				const slideId = url.searchParams.get("slideId") ?? "";
+				const file = resolveSlidePath(userCwd, slidesDir, slideId);
+				if (!file) return json$1(res, 400, { error: "invalid slideId" });
+				try {
+					if (method === "GET" && url.pathname === "/") {
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json$1(res, 404, { error: "slide not found" });
+						}
+						const parsed = parseSlideDesign(source);
+						if (parsed.ok) return json$1(res, 200, {
+							design: parsed.design,
+							exists: true,
+							warning: null
+						});
+						if (parsed.exists === false) return json$1(res, 200, {
+							design: defaultDesign,
+							exists: false,
+							warning: null
+						});
+						return json$1(res, 200, {
+							design: defaultDesign,
+							exists: true,
+							warning: parsed.error
+						});
+					}
+					if (method === "PUT" && url.pathname === "/") {
+						const body = await readBody$1(req);
+						const patch = body.patch;
+						if (!patch || typeof patch !== "object") return json$1(res, 400, { error: "missing patch object" });
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json$1(res, 404, { error: "slide not found" });
+						}
+						const parsed = parseSlideDesign(source);
+						const baseDesign = parsed.ok ? parsed.design : defaultDesign;
+						if (!parsed.ok && parsed.exists) return json$1(res, 422, { error: parsed.error });
+						const merged = mergeDesign(baseDesign, patch);
+						const written = applyDesignWrite(source, merged);
+						if (!written.ok) return json$1(res, written.status, { error: written.error });
+						if (written.source !== source) await fs.writeFile(file, written.source, "utf8");
+						return json$1(res, 200, {
+							ok: true,
+							design: merged,
+							created: written.created
+						});
+					}
+					if (method === "POST" && url.pathname === "/reset") {
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json$1(res, 404, { error: "slide not found" });
+						}
+						const written = applyDesignWrite(source, defaultDesign);
+						if (!written.ok) return json$1(res, written.status, { error: written.error });
+						if (written.source !== source) await fs.writeFile(file, written.source, "utf8");
+						return json$1(res, 200, {
+							ok: true,
+							design: defaultDesign,
+							created: written.created
+						});
+					}
+					return next();
 				} catch (err) {
 					json$1(res, 500, { error: String(err.message ?? err) });
 				}
@@ -838,10 +1347,10 @@ function updateMetaTitleInSource(source, title) {
 			return source.slice(0, openBrace + 1) + newBody + source.slice(closeBrace);
 		}
 		const firstIndentMatch = body.match(/\n([ \t]+)\S/);
-		const indent = firstIndentMatch ? firstIndentMatch[1] : "  ";
+		const indent$1 = firstIndentMatch ? firstIndentMatch[1] : "  ";
 		const trimmedBody = body.replace(/^\s*\n?/, "");
 		const needsSeparator = trimmedBody.trim().length > 0;
-		const insertion$1 = `\n${indent}title: ${newLiteral}${needsSeparator ? "," : ""}`;
+		const insertion$1 = `\n${indent$1}title: ${newLiteral}${needsSeparator ? "," : ""}`;
 		return source.slice(0, openBrace + 1) + insertion$1 + body + source.slice(closeBrace);
 	}
 	const exportDefaultIdx = source.search(/export\s+default\b/);
@@ -1192,10 +1701,12 @@ function filesPlugin(opts) {
 
 //#endregion
 //#region src/vite/loc-tags-plugin.ts
-function isHostJsxName(name) {
+const FORWARDING_COMPONENTS = new Set(["ImagePlaceholder"]);
+function isTaggableJsxName(name) {
 	if (!name || typeof name !== "object") return false;
 	const n = name;
-	return n.type === "JSXIdentifier" && typeof n.name === "string" && /^[a-z]/.test(n.name);
+	if (n.type !== "JSXIdentifier" || typeof n.name !== "string") return false;
+	return /^[a-z]/.test(n.name) || FORWARDING_COMPONENTS.has(n.name);
 }
 function alreadyTagged(opening) {
 	const attrs = opening.attributes ?? [];
@@ -1223,7 +1734,7 @@ function injectLocTags(code) {
 		const opening = node.openingElement;
 		if (!opening) return;
 		const name = opening.name;
-		if (!isHostJsxName(name)) return;
+		if (!isTaggableJsxName(name)) return;
 		if (alreadyTagged(opening)) return;
 		const loc = node.loc;
 		if (!loc) return;
@@ -1366,21 +1877,38 @@ function openSlidePlugin(opts) {
 			return null;
 		},
 		configureServer(server) {
+			const isSlideEntry = (p) => {
+				const rel = path.relative(slidesRoot, p);
+				if (rel.startsWith("..") || path.isAbsolute(rel)) return false;
+				const parts = rel.split(path.sep);
+				if (parts.length !== 2) return false;
+				return /^index\.(tsx|jsx|ts|js)$/.test(parts[1]);
+			};
+			let reloadTimer = null;
 			const reload = () => {
-				const mod = server.moduleGraph.getModuleById(resolved(SLIDES_VMOD));
-				if (mod) server.moduleGraph.invalidateModule(mod);
-				server.ws.send({ type: "full-reload" });
+				if (reloadTimer) clearTimeout(reloadTimer);
+				reloadTimer = setTimeout(() => {
+					reloadTimer = null;
+					const mod = server.moduleGraph.getModuleById(resolved(SLIDES_VMOD));
+					if (mod) server.moduleGraph.invalidateModule(mod);
+					server.ws.send({ type: "full-reload" });
+				}, 150);
 			};
-			server.watcher.add(path.join(slidesRoot, "*"));
+			server.watcher.add(path.join(slidesRoot, "*/index.{tsx,jsx,ts,js}"));
 			server.watcher.on("add", (p) => {
-				if (p.startsWith(slidesRoot)) reload();
+				if (isSlideEntry(p)) reload();
 			});
 			server.watcher.on("unlink", (p) => {
-				if (p.startsWith(slidesRoot)) reload();
+				if (isSlideEntry(p)) reload();
 			});
+			let foldersTimer = null;
 			const invalidateFolders = () => {
-				const mod = server.moduleGraph.getModuleById(resolved(FOLDERS_VMOD));
-				if (mod) server.moduleGraph.invalidateModule(mod);
+				if (foldersTimer) clearTimeout(foldersTimer);
+				foldersTimer = setTimeout(() => {
+					foldersTimer = null;
+					const mod = server.moduleGraph.getModuleById(resolved(FOLDERS_VMOD));
+					if (mod) server.moduleGraph.invalidateModule(mod);
+				}, 100);
 			};
 			server.watcher.add(foldersManifestPath);
 			server.watcher.on("change", (p) => {
@@ -1436,6 +1964,7 @@ async function createViteConfig(opts) {
 				userCwd,
 				config
 			}),
+			designPlugin({ userCwd }),
 			commentsPlugin({
 				userCwd,
 				slidesDir