@open-slide/core 1.2.0 → 1.4.0

package/dist/{config-AxZ5OE1u.js → config-XZJnC_fu.js}

@@ -1,4 +1,4 @@
-import { defaultDesign } from "./design-C13iz9_4.js";
+import { defaultDesign } from "./design-cpzS8aud.js";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -12,7 +12,7 @@ import * as t$1 from "@babel/types";
 import * as t from "@babel/types";
 import { isJSXElement, isJSXFragment } from "@babel/types";
 import fg from "fast-glob";
-import { loadConfigFromFile } from "vite";
+import { loadConfigFromFile, normalizePath } from "vite";
 
 //#region src/vite/babel-walk.ts
 const SKIP_KEYS = new Set([
@@ -187,11 +187,12 @@ function offsetToLine(source, offset) {
 }
 function parseSource$2(source) {
 	try {
-		return parse(source, {
+		const ast = parse(source, {
 			sourceType: "module",
 			plugins: ["typescript", "jsx"],
 			errorRecovery: true
 		});
+		return ast.errors && ast.errors.length > 0 ? null : ast;
 	} catch {
 		return null;
 	}
@@ -202,6 +203,51 @@ function findInnermostJsxElement(ast, line, column) {
 	for (const n of findJsxAncestors(ast, line, column)) if (t$2.isJSXElement(n)) return n;
 	return null;
 }
+function findUniqueElementByText(ast, prevText) {
+	const hits = [];
+	walkJsx(ast, (n) => {
+		if (!t$2.isJSXElement(n)) return;
+		const parts = [];
+		collectTextRangeParts(n, parts);
+		if (textRangeContent(parts) !== prevText) return;
+		hits.push({
+			node: n,
+			size: (n.end ?? 0) - (n.start ?? 0)
+		});
+	});
+	if (hits.length === 0) return null;
+	hits.sort((a, b) => a.size - b.size);
+	const best = hits[0];
+	const bestStart = best.node.start ?? 0;
+	const bestEnd = best.node.end ?? 0;
+	const hasSiblingMatch = hits.slice(1).some(({ node }) => (node.start ?? 0) > bestStart || (node.end ?? 0) < bestEnd);
+	return hasSiblingMatch ? null : best.node;
+}
+function fallbackTextForOps(ops) {
+	for (const op of ops) if ((op.kind === "set-style" || op.kind === "set-text" || op.kind === "set-text-range-style") && op.prevText !== void 0) return op.prevText;
+	return null;
+}
+function hasOnlyTextOps(ops) {
+	return ops.length > 0 && ops.every((op) => op.kind === "set-text");
+}
+function elementTextMatches(element, prevText) {
+	const parts = [];
+	collectTextRangeParts(element, parts);
+	return textRangeContent(parts) === prevText;
+}
+function elementHasTextCandidate(ast, element, prevText) {
+	const norm = prevText.trim();
+	return collectElementTextCandidates(ast, element).some((candidate) => candidate.current === norm);
+}
+function findElementForEdit(ast, line, column, ops) {
+	const element = findInnermostJsxElement(ast, line, column);
+	const prevText = fallbackTextForOps(ops);
+	if (prevText === null) return element;
+	if (hasOnlyTextOps(ops) && element && (elementTextMatches(element, prevText) || elementHasTextCandidate(ast, element, prevText))) return element;
+	const textMatch = findUniqueElementByText(ast, prevText);
+	if (element && elementTextMatches(element, prevText)) return textMatch ?? element;
+	return textMatch ?? element;
+}
 function findJsxByStart(ast, line, column) {
 	let hit = null;
 	walkJsx(ast, (n) => {
@@ -227,27 +273,60 @@ function findJsxAttr(opening, name) {
 function buildStyleSplice(source, element, ops) {
 	const opening = element.openingElement;
 	const existing = findJsxAttr(opening, "style");
-	const style = new Map();
+	const entries = [];
+	let hasRawEntry = false;
 	if (existing) {
 		const value = existing.value;
 		if (!value || !t$2.isJSXExpressionContainer(value)) return { error: "style attribute has unsupported form" };
 		const expr = value.expression;
-		if (!t$2.isObjectExpression(expr)) return { error: "style is not a literal object" };
-		for (const prop of expr.properties) {
-			if (!t$2.isObjectProperty(prop)) return { error: "style contains spread or method" };
-			if (prop.computed) return { error: "style has computed key" };
+		if (!t$2.isObjectExpression(expr)) {
+			if (typeof expr.start !== "number" || typeof expr.end !== "number") return { error: "style value missing source range" };
+			entries.push({
+				kind: "raw",
+				text: `...(${source.slice(expr.start, expr.end)})`
+			});
+			hasRawEntry = true;
+		} else for (const prop of expr.properties) if (t$2.isObjectProperty(prop) && !prop.computed) {
 			let keyName = null;
 			if (t$2.isIdentifier(prop.key)) keyName = prop.key.name;
 			else if (t$2.isStringLiteral(prop.key)) keyName = prop.key.value;
 			if (!keyName) return { error: "style has unsupported key" };
 			const v = prop.value;
-			if (typeof v.start !== "number" || typeof v.end !== "number") return { error: "style value missing source range" };
-			style.set(keyName, source.slice(v.start, v.end));
+			if (typeof prop.key.start !== "number" || typeof prop.key.end !== "number" || typeof v.start !== "number" || typeof v.end !== "number") return { error: "style value missing source range" };
+			entries.push({
+				kind: "prop",
+				key: keyName,
+				keyText: source.slice(prop.key.start, prop.key.end),
+				valueText: source.slice(v.start, v.end)
+			});
+		} else {
+			if (typeof prop.start !== "number" || typeof prop.end !== "number") return { error: "style value missing source range" };
+			entries.push({
+				kind: "raw",
+				text: source.slice(prop.start, prop.end)
+			});
+			hasRawEntry = true;
 		}
 	}
-	for (const op of ops) if (op.value === null) style.delete(op.key);
-	else style.set(op.key, jsString$1(op.value));
-	if (style.size === 0) {
+	for (const op of ops) {
+		const matching = entries.filter((entry) => entry.kind === "prop" && entry.key === op.key);
+		if (op.value === null) {
+			for (const entry of matching) entries.splice(entries.indexOf(entry), 1);
+			if (hasRawEntry) entries.push({
+				kind: "prop",
+				key: op.key,
+				keyText: op.key,
+				valueText: "undefined"
+			});
+		} else if (matching.length > 0) matching[matching.length - 1].valueText = jsString$1(op.value);
+		else entries.push({
+			kind: "prop",
+			key: op.key,
+			keyText: op.key,
+			valueText: jsString$1(op.value)
+		});
+	}
+	if (entries.length === 0) {
 		if (!existing) return null;
 		let from = existing.start ?? 0;
 		if (from > 0 && source[from - 1] === " ") from -= 1;
@@ -257,16 +336,29 @@ function buildStyleSplice(source, element, ops) {
 			text: ""
 		};
 	}
-	const propsText = Array.from(style.entries()).map(([k, v]) => `${k}: ${v}`).join(", ");
+	const propsText = entries.map((entry) => entry.kind === "prop" ? `${entry.keyText}: ${entry.valueText}` : entry.text).join(", ");
 	const newAttr = `style={{ ${propsText} }}`;
-	if (existing) return {
-		from: existing.start ?? 0,
-		to: existing.end ?? 0,
-		text: newAttr
-	};
+	if (existing) {
+		const lastAttr$1 = opening.attributes[opening.attributes.length - 1];
+		if (lastAttr$1 && lastAttr$1 !== existing && typeof lastAttr$1.end === "number") {
+			const attrsAfterStyle = source.slice(existing.end ?? 0, lastAttr$1.end).replace(/^[ \t]+/, "");
+			return {
+				from: existing.start ?? 0,
+				to: lastAttr$1.end,
+				text: `${attrsAfterStyle} ${newAttr}`
+			};
+		}
+		return {
+			from: existing.start ?? 0,
+			to: existing.end ?? 0,
+			text: newAttr
+		};
+	}
+	const lastAttr = opening.attributes[opening.attributes.length - 1];
+	const at = lastAttr?.end ?? opening.name.end ?? 0;
 	return {
-		from: opening.name.end ?? 0,
-		to: opening.name.end ?? 0,
+		from: at,
+		to: at,
 		text: ` ${newAttr}`
 	};
 }
@@ -280,6 +372,10 @@ function meaningfulChildren(parent) {
 		return true;
 	});
 }
+function isOnlyMeaningfulChild(parent, child) {
+	const meaningful = meaningfulChildren(parent);
+	return meaningful.length === 1 && meaningful[0] === child;
+}
 function wrapSplice(parent, text) {
 	const first = parent.children[0];
 	const last = parent.children[parent.children.length - 1];
@@ -289,6 +385,60 @@ function wrapSplice(parent, text) {
 		text
 	};
 }
+function splitLinesWithOffsets(value) {
+	const lines = [];
+	let start = 0;
+	for (let i = 0; i < value.length; i++) {
+		const ch = value[i];
+		if (ch !== "\n" && ch !== "\r") continue;
+		lines.push({
+			text: value.slice(start, i),
+			start
+		});
+		if (ch === "\r" && value[i + 1] === "\n") i += 1;
+		start = i + 1;
+	}
+	lines.push({
+		text: value.slice(start),
+		start
+	});
+	return lines;
+}
+function cleanJsxTextWithOffsets(value) {
+	const lines = splitLinesWithOffsets(value);
+	let lastNonEmptyLine = 0;
+	for (let i = 0; i < lines.length; i++) if (lines[i].text.trim()) lastNonEmptyLine = i;
+	let text = "";
+	const offsets = [];
+	for (let i = 0; i < lines.length; i++) {
+		const chars = Array.from(lines[i].text, (ch, j) => ({
+			ch: ch === "	" ? " " : ch,
+			offset: lines[i].start + j
+		}));
+		let from = 0;
+		let to = chars.length;
+		if (i !== 0) while (from < to && chars[from].ch === " ") from += 1;
+		if (i !== lines.length - 1) while (to > from && chars[to - 1].ch === " ") to -= 1;
+		if (from >= to) continue;
+		for (const item of chars.slice(from, to)) {
+			text += item.ch;
+			offsets.push(item.offset);
+		}
+		if (i !== lastNonEmptyLine) {
+			text += " ";
+			offsets.push(null);
+		}
+	}
+	return {
+		text,
+		offsets
+	};
+}
+function isJsxBrElement(node) {
+	if (!t$2.isJSXElement(node)) return false;
+	const name = node.openingElement.name;
+	return t$2.isJSXIdentifier(name) && name.name.toLowerCase() === "br";
+}
 function collectTextCandidates(element, out) {
 	const meaningful = meaningfulChildren(element);
 	const isSole = meaningful.length === 1;
@@ -318,6 +468,226 @@ function collectTextCandidates(element, out) {
 		}
 	} else if (t$2.isJSXElement(child) || t$2.isJSXFragment(child)) collectTextCandidates(child, out);
 }
+function collectTextRangeParts(element, out) {
+	const parts = [];
+	collectTextRangePartsRaw(element, parts);
+	out.push(...normalizeTextRangeParts(parts));
+}
+function collectTextRangePartsRaw(element, out) {
+	for (const child of element.children) if (t$2.isJSXText(child)) {
+		const { text: current, offsets } = cleanJsxTextWithOffsets(child.value);
+		if (current) out.push({
+			node: child,
+			parent: element,
+			current,
+			raw: child.value,
+			text: formatJsxText,
+			offsets
+		});
+	} else if (t$2.isJSXExpressionContainer(child)) {
+		const expression = child.expression;
+		if (t$2.isStringLiteral(expression) || t$2.isNumericLiteral(expression)) {
+			const raw = String(expression.value);
+			const current = raw;
+			if (current) out.push({
+				node: child,
+				parent: element,
+				current,
+				raw,
+				text: (value) => `{${jsString$1(value)}}`,
+				offsets: Array.from({ length: current.length }, (_, i) => i)
+			});
+		}
+	} else if (isJsxBrElement(child)) out.push({
+		node: child,
+		current: "\n"
+	});
+	else if (t$2.isJSXElement(child) || t$2.isJSXFragment(child)) collectTextRangePartsRaw(child, out);
+}
+function normalizeTextRangeParts(parts) {
+	return parts.flatMap((part, index) => {
+		if (!("raw" in part)) return [part];
+		let start = 0;
+		let end = part.current.length;
+		if (parts[index - 1]?.current === "\n") while (start < end && /\s/.test(part.current[start] ?? "")) start++;
+		if (parts[index + 1]?.current === "\n") while (end > start && /\s/.test(part.current[end - 1] ?? "")) end--;
+		if (start === 0 && end === part.current.length) return [part];
+		if (start >= end) return [];
+		return [{
+			...part,
+			current: part.current.slice(start, end),
+			offsets: part.offsets.slice(start, end)
+		}];
+	});
+}
+function resetValueForRangeStyle(key) {
+	if (key === "fontWeight") return "400";
+	if (key === "fontStyle") return "normal";
+	return null;
+}
+function styleSpanForText(text, key, value) {
+	const styleValue = value ?? resetValueForRangeStyle(key);
+	if (styleValue === null) return formatJsxText(text);
+	return `<span style={{ ${key}: ${jsString$1(styleValue)} }}>${formatJsxText(text)}</span>`;
+}
+function textRangeContent(parts) {
+	return parts.map((part) => part.current).join("");
+}
+function compactText(value) {
+	return value.replace(/\s+/g, "");
+}
+function textMatchesExpected(current, expected) {
+	return current === expected || compactText(current) === compactText(expected);
+}
+function formatRichText(value, formatText = formatJsxText) {
+	return value.split("\n").map((part) => formatText(part)).join("<br />");
+}
+function formatOptionalText(value, formatText = formatJsxText) {
+	return value ? formatText(value) : "";
+}
+function textDiff(prevText, nextText) {
+	let start = 0;
+	while (start < prevText.length && start < nextText.length && prevText[start] === nextText[start]) start += 1;
+	let prevEnd = prevText.length;
+	let nextEnd = nextText.length;
+	while (prevEnd > start && nextEnd > start && prevText[prevEnd - 1] === nextText[nextEnd - 1]) {
+		prevEnd -= 1;
+		nextEnd -= 1;
+	}
+	return {
+		start,
+		end: prevEnd,
+		value: nextText.slice(start, nextEnd)
+	};
+}
+function textLeafSplice(part, value) {
+	const rawRange = textLeafRawRange(part, 0, part.current.length);
+	if (!rawRange) return spliceRange(part.node, part.text(value));
+	const { rawStart, rawEnd } = rawRange;
+	return {
+		from: part.node.start ?? 0,
+		to: part.node.end ?? 0,
+		text: `${part.raw.slice(0, rawStart)}${formatRichText(value, part.text)}${part.raw.slice(rawEnd)}`
+	};
+}
+function textLeafRawRange(part, start, end) {
+	if (start >= end) return null;
+	let first = null;
+	let last = null;
+	for (let i = start; i < end; i++) {
+		const offset = part.offsets[i];
+		if (offset === void 0) return null;
+		if (offset === null) continue;
+		first ??= offset;
+		last = offset;
+	}
+	if (first === null || last === null) return null;
+	return {
+		rawStart: first,
+		rawEnd: last + 1
+	};
+}
+function buildTextRangeReplaceSplices(parts, start, end, value) {
+	const splices = [];
+	let offset = 0;
+	let inserted = false;
+	for (const part of parts) {
+		const partStart = offset;
+		const partEnd = partStart + part.current.length;
+		offset = partEnd;
+		const overlaps = start < partEnd && end > partStart;
+		const insertsHere = start === end && !inserted && start >= partStart && start <= partEnd;
+		if (!overlaps && !insertsHere) continue;
+		if ("raw" in part) {
+			const localStart = Math.max(start, partStart) - partStart;
+			const localEnd = overlaps ? Math.min(end, partEnd) - partStart : localStart;
+			const nextText = `${part.current.slice(0, localStart)}${inserted ? "" : value}${part.current.slice(localEnd)}`;
+			splices.push(textLeafSplice(part, nextText));
+		} else if (overlaps) splices.push(spliceRange(part.node, inserted ? "" : formatRichText(value)));
+		else if (insertsHere) {
+			const at = start === partStart ? part.node.start ?? 0 : part.node.end ?? 0;
+			splices.push({
+				from: at,
+				to: at,
+				text: formatRichText(value)
+			});
+		}
+		inserted = true;
+	}
+	if (!inserted && start === end && start === offset) {
+		const last = parts[parts.length - 1];
+		if (!last) return { error: "element has no editable text" };
+		if ("raw" in last) splices.push(textLeafSplice(last, `${last.current}${value}`));
+		else splices.push({
+			from: last.node.end ?? 0,
+			to: last.node.end ?? 0,
+			text: formatRichText(value)
+		});
+	}
+	return splices;
+}
+function buildTextContentSplices(element, value, prevText) {
+	const parts = [];
+	collectTextRangeParts(element, parts);
+	const current = textRangeContent(parts);
+	if (!textMatchesExpected(current, prevText)) return { error: "no text candidate matches the current value" };
+	const diff = textDiff(current, value);
+	if (diff.start === diff.end && diff.value === "") return [];
+	return buildTextRangeReplaceSplices(parts, diff.start, diff.end, diff.value);
+}
+function buildTextRangeStyleSplices(ast, source, element, start, end, op, prevText) {
+	if (!Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end <= start) return { error: "invalid text range" };
+	const parts = [];
+	collectTextRangeParts(element, parts);
+	const current = prevText ?? textRangeContent(parts);
+	if (!current) return { error: "element has no editable text" };
+	if (end > current.length) return { error: "text range is out of bounds" };
+	const renderedText = textRangeContent(parts);
+	if (prevText !== void 0 && renderedText !== prevText) {
+		if (elementTextCandidateMatches(ast, element, prevText)) {
+			const result = buildStyleSplice(source, element, [op]);
+			if (result && "error" in result) return result;
+			return result ? [result] : [];
+		}
+		return { error: "no text candidate matches the current value" };
+	}
+	const splices = [];
+	let leafStart = 0;
+	for (const leaf of parts) {
+		const leafEnd = leafStart + leaf.current.length;
+		if (!("raw" in leaf)) {
+			leafStart = leafEnd;
+			continue;
+		}
+		const selectedStart = Math.max(start, leafStart);
+		const selectedEnd = Math.min(end, leafEnd);
+		if (selectedStart >= selectedEnd) {
+			leafStart = leafEnd;
+			continue;
+		}
+		if (selectedStart === leafStart && selectedEnd === leafEnd && t$2.isJSXElement(leaf.parent) && leaf.parent !== element && isOnlyMeaningfulChild(leaf.parent, leaf.node)) {
+			const result = buildStyleSplice(source, leaf.parent, [op]);
+			if (result && "error" in result) return result;
+			if (result) splices.push(result);
+			leafStart = leafEnd;
+			continue;
+		}
+		const localStart = selectedStart - leafStart;
+		const localEnd = selectedEnd - leafStart;
+		const rawRange = textLeafRawRange(leaf, localStart, localEnd);
+		if (!rawRange) return { error: "text range source mismatch" };
+		const raw = leaf.raw;
+		const { rawStart, rawEnd } = rawRange;
+		const before = raw.slice(0, rawStart);
+		const selected = leaf.current.slice(localStart, localEnd);
+		const after = raw.slice(rawEnd);
+		const beforeText = t$2.isJSXText(leaf.node) ? before : formatOptionalText(before, leaf.text);
+		const afterText = t$2.isJSXText(leaf.node) ? after : formatOptionalText(after, leaf.text);
+		splices.push(spliceRange(leaf.node, `${beforeText}${styleSpanForText(selected, op.key, op.value)}${afterText}`));
+		leafStart = leafEnd;
+	}
+	return splices.length > 0 ? splices : null;
+}
 function propPassthroughName(element) {
 	const meaningful = meaningfulChildren(element);
 	if (meaningful.length !== 1) return null;
@@ -517,7 +887,7 @@ function collectArrayMapCandidates(ast, element) {
 	}
 	return out;
 }
-function buildTextSplice(ast, element, value, prevText) {
+function collectElementTextCandidates(ast, element) {
 	const candidates = [];
 	collectTextCandidates(element, candidates);
 	if (candidates.length === 0) {
@@ -527,6 +897,14 @@ function buildTextSplice(ast, element, value, prevText) {
 		else if (passthrough && enclosing && componentDestructuresProp(enclosing.fn, passthrough)) candidates.push(...collectPropCallSiteCandidates(ast, enclosing.name, passthrough));
 	}
 	if (candidates.length === 0) candidates.push(...collectArrayMapCandidates(ast, element));
+	return candidates;
+}
+function elementTextCandidateMatches(ast, element, prevText) {
+	const norm = prevText.trim();
+	return collectElementTextCandidates(ast, element).some((candidate) => candidate.current === norm);
+}
+function buildTextSplice(ast, element, value, prevText) {
+	const candidates = collectElementTextCandidates(ast, element);
 	if (candidates.length === 0) return { error: "element has no editable text" };
 	if (candidates.length === 1) return candidates[0].splice(value);
 	if (prevText === void 0) return { error: "element has multiple text candidates; missing prevText" };
@@ -603,7 +981,7 @@ function planAssetImport(ast, assetPath) {
 }
 function planAssetAttr(ast, element, attr, assetPath) {
 	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/" };
+	if (!assetPath.startsWith("./assets/") && !assetPath.startsWith("@assets/")) return { error: "asset path must start with ./assets/ or @assets/" };
 	const { identifier, importSplice } = planAssetImport(ast, assetPath);
 	const opening = element.openingElement;
 	const newAttr = `${attr}={${identifier}}`;
@@ -641,7 +1019,7 @@ function readJsxNumberAttr(opening, name) {
 function planReplacePlaceholder(ast, element, assetPath) {
 	const opening = element.openingElement;
 	if (!t$2.isJSXIdentifier(opening.name) || opening.name.name !== "ImagePlaceholder") return { error: "not a placeholder" };
-	if (!assetPath.startsWith("./assets/")) return { error: "asset path must start with ./assets/" };
+	if (!assetPath.startsWith("./assets/") && !assetPath.startsWith("@assets/")) return { error: "asset path must start with ./assets/ or @assets/" };
 	const hint = readJsxStringAttr(opening, "hint") ?? "";
 	const width = readJsxNumberAttr(opening, "width");
 	const height = readJsxNumberAttr(opening, "height");
@@ -670,7 +1048,7 @@ function applyEdit(source, line, column, ops) {
 		status: 422,
 		error: "could not parse source"
 	};
-	const element = findInnermostJsxElement(ast, line, column);
+	const element = findElementForEdit(ast, line, column, ops);
 	if (!element) return {
 		ok: false,
 		status: 422,
@@ -691,14 +1069,42 @@ function applyEdit(source, line, column, ops) {
 		if (result) splices.push(result);
 	}
 	for (const op of ops) {
-		if (op.kind !== "set-text") continue;
-		const result = buildTextSplice(ast, element, op.value, op.prevText);
-		if ("error" in result) return {
+		if (op.kind !== "set-text-range-style") continue;
+		const result = buildTextRangeStyleSplices(ast, source, element, op.start, op.end, {
+			key: op.key,
+			value: op.value
+		}, op.prevText);
+		if (result && "error" in result) return {
 			ok: false,
 			status: 422,
 			error: result.error
 		};
-		splices.push(result);
+		if (result) splices.push(...result);
+	}
+	for (const op of ops) {
+		if (op.kind !== "set-text") continue;
+		if (op.prevText !== void 0 && (op.value.includes("\n") || op.prevText.includes("\n"))) {
+			const richResult = buildTextContentSplices(element, op.value, op.prevText);
+			if (!("error" in richResult)) {
+				splices.push(...richResult);
+				continue;
+			}
+		}
+		const result = buildTextSplice(ast, element, op.value, op.prevText);
+		if ("error" in result) {
+			if (op.prevText === void 0) return {
+				ok: false,
+				status: 422,
+				error: result.error
+			};
+			const richResult = buildTextContentSplices(element, op.value, op.prevText);
+			if ("error" in richResult) return {
+				ok: false,
+				status: 422,
+				error: result.error
+			};
+			splices.push(...richResult);
+		} else splices.push(result);
 	}
 	const assetOps = ops.flatMap((op) => op.kind === "set-attr-asset" ? [op] : []);
 	const placeholderOps = ops.flatMap((op) => op.kind === "replace-placeholder-with-image" ? [op] : []);
@@ -742,6 +1148,11 @@ function applyEdit(source, line, column, ops) {
 	splices.sort((a, b) => b.from - a.from);
 	let next = source;
 	for (const sp of splices) next = next.slice(0, sp.from) + sp.text + next.slice(sp.to);
+	if (!parseSource$2(next)) return {
+		ok: false,
+		status: 422,
+		error: "edit would produce invalid source"
+	};
 	return {
 		ok: true,
 		source: next
@@ -1406,6 +1817,7 @@ function designPlugin(opts) {
 //#region src/vite/files-plugin.ts
 const FOLDER_ID_RE = /^f-[a-f0-9]{8}$/;
 const SLIDE_ID_RE$1 = /^[a-z0-9_-]+$/i;
+const GLOBAL_SCOPE = "@global";
 const COLOR_RE = /^#[0-9a-fA-F]{6}$/;
 const ASSET_FORBIDDEN_RE = /[\x00-\x1F\x7F/\\:*?"<>|]/;
 const ASSET_MAX_BYTES = 25 * 1024 * 1024;
@@ -1535,6 +1947,19 @@ function resolveAssetFile(slidesRoot, slideId, filename) {
 	if (!file.startsWith(assetsDir + path.sep)) return null;
 	return file;
 }
+function resolveScopedAssetsDir(slidesRoot, globalAssetsRoot, scope) {
+	if (scope === GLOBAL_SCOPE) return globalAssetsRoot;
+	return resolveAssetsDir(slidesRoot, scope);
+}
+function resolveScopedAssetFile(slidesRoot, globalAssetsRoot, scope, filename) {
+	if (scope === GLOBAL_SCOPE) {
+		if (!validateAssetName(filename)) return null;
+		const file = path.resolve(globalAssetsRoot, filename);
+		if (!file.startsWith(globalAssetsRoot + path.sep)) return null;
+		return file;
+	}
+	return resolveAssetFile(slidesRoot, scope, filename);
+}
 function resolveSlideEntry(slidesRoot, slideId) {
 	if (!SLIDE_ID_RE$1.test(slideId)) return null;
 	const dir = path.resolve(slidesRoot, slideId);
@@ -1852,7 +2277,9 @@ function validateIcon(v) {
 function filesPlugin(opts) {
 	const userCwd = opts.userCwd;
 	const slidesDir = opts.slidesDir ?? "slides";
+	const assetsDir = opts.assetsDir ?? "assets";
 	const slidesRoot = path.resolve(userCwd, slidesDir);
+	const globalAssetsRoot = path.resolve(userCwd, assetsDir);
 	const manifestPath = path.join(slidesRoot, ".folders.json");
 	return {
 		name: "open-slide:files",
@@ -1865,7 +2292,16 @@ function filesPlugin(opts) {
 					event: "open-slide:files-changed"
 				});
 			});
+			server.watcher.add(globalAssetsRoot);
 			const onAssetChange = (p) => {
+				if (p.startsWith(globalAssetsRoot + path.sep) || p === globalAssetsRoot) {
+					server.ws.send({
+						type: "custom",
+						event: "open-slide:assets-changed",
+						data: { slideId: GLOBAL_SCOPE }
+					});
+					return;
+				}
 				if (!p.startsWith(slidesRoot + path.sep)) return;
 				const rel = p.slice(slidesRoot.length + 1);
 				const parts = rel.split(path.sep);
@@ -1989,11 +2425,11 @@ function filesPlugin(opts) {
 					const fileMatch = url.pathname.match(/^\/([^/]+)\/([^/]+)$/);
 					if (listMatch && method === "GET") {
 						const slideId = listMatch[1];
-						const assetsDir = resolveAssetsDir(slidesRoot, slideId);
-						if (!assetsDir) return json$1(res, 400, { error: "invalid slideId" });
+						const assetsDir$1 = resolveScopedAssetsDir(slidesRoot, globalAssetsRoot, slideId);
+						if (!assetsDir$1) return json$1(res, 400, { error: "invalid slideId" });
 						let entries;
 						try {
-							entries = await fs.readdir(assetsDir);
+							entries = await fs.readdir(assetsDir$1);
 						} catch (err) {
 							if (err.code === "ENOENT") return json$1(res, 200, { assets: [] });
 							throw err;
@@ -2001,7 +2437,7 @@ function filesPlugin(opts) {
 						const assets = [];
 						for (const name of entries) {
 							if (!validateAssetName(name)) continue;
-							const stat = await fs.stat(path.join(assetsDir, name));
+							const stat = await fs.stat(path.join(assetsDir$1, name));
 							if (!stat.isFile()) continue;
 							assets.push({
 								name,
@@ -2017,7 +2453,7 @@ function filesPlugin(opts) {
 					if (fileMatch) {
 						const slideId = fileMatch[1];
 						const filename = decodeURIComponent(fileMatch[2]);
-						const file = resolveAssetFile(slidesRoot, slideId, filename);
+						const file = resolveScopedAssetFile(slidesRoot, globalAssetsRoot, slideId, filename);
 						if (!file) return json$1(res, 400, { error: "invalid path" });
 						if (method === "GET") try {
 							const buf = await fs.readFile(file);
@@ -2039,9 +2475,9 @@ function filesPlugin(opts) {
 								await fs.access(file);
 								return json$1(res, 409, { error: "asset exists" });
 							} catch {}
-							const assetsDir = resolveAssetsDir(slidesRoot, slideId);
-							if (!assetsDir) return json$1(res, 400, { error: "invalid slideId" });
-							await fs.mkdir(assetsDir, { recursive: true });
+							const assetsDir$1 = resolveScopedAssetsDir(slidesRoot, globalAssetsRoot, slideId);
+							if (!assetsDir$1) return json$1(res, 400, { error: "invalid slideId" });
+							await fs.mkdir(assetsDir$1, { recursive: true });
 							const chunks = [];
 							let total = 0;
 							let oversized = false;
@@ -2076,7 +2512,7 @@ function filesPlugin(opts) {
 								ok: true,
 								name: filename
 							});
-							const dest = resolveAssetFile(slidesRoot, slideId, target);
+							const dest = resolveScopedAssetFile(slidesRoot, globalAssetsRoot, slideId, target);
 							if (!dest) return json$1(res, 400, { error: "invalid name" });
 							try {
 								await fs.access(dest);
@@ -2505,7 +2941,7 @@ async function readFoldersManifest(file) {
 		throw err;
 	}
 }
-function resolved(id) {
+function resolved$1(id) {
 	return `\0${id}`;
 }
 async function findSlides(userCwd, slidesDir) {
@@ -2522,19 +2958,76 @@ function toId(absFile, slidesRoot) {
 	const rel = path.relative(slidesRoot, absFile);
 	return rel.split(path.sep)[0];
 }
-function generateSlidesModule(files, slidesRoot, isDev) {
-	const entries = files.map((abs) => {
+const META_THEME_RE = /(?:^|[\s,{])theme\s*:\s*['"]([^'"]+)['"]/;
+function extractMetaTheme(src) {
+	const metaStart = src.search(/export\s+const\s+meta\b/);
+	if (metaStart === -1) return null;
+	const eqIdx = src.indexOf("=", metaStart);
+	if (eqIdx === -1) return null;
+	const openBrace = src.indexOf("{", eqIdx);
+	if (openBrace === -1) return null;
+	let depth = 0;
+	let closeBrace = -1;
+	for (let i = openBrace; i < src.length; i++) {
+		const ch = src[i];
+		if (ch === "{") depth++;
+		else if (ch === "}") {
+			depth--;
+			if (depth === 0) {
+				closeBrace = i;
+				break;
+			}
+		}
+	}
+	if (closeBrace === -1) return null;
+	const body = src.slice(openBrace + 1, closeBrace);
+	const m = body.match(META_THEME_RE);
+	return m ? m[1] : null;
+}
+async function readSlideTheme(abs) {
+	try {
+		const src = await fs.readFile(abs, "utf8");
+		return extractMetaTheme(src);
+	} catch {
+		return null;
+	}
+}
+async function generateSlidesModule(files, slidesRoot, isDev) {
+	const entries = await Promise.all(files.map(async (abs) => {
 		const id = toId(abs, slidesRoot);
 		const importPath = isDev ? `/@fs/${abs.replace(/^\/+/, "")}` : abs;
+		const theme = await readSlideTheme(abs);
 		return {
 			id,
-			importPath
+			importPath,
+			theme
 		};
-	});
+	}));
 	const ids = JSON.stringify(entries.map((e) => e.id).sort());
-	const cases = entries.map((e) => `    case ${JSON.stringify(e.id)}: return import(${JSON.stringify(e.importPath)});`).join("\n");
+	const themesMap = {};
+	for (const e of entries) if (e.theme) themesMap[e.id] = e.theme;
+	const themesJson = JSON.stringify(themesMap);
+	const importTokens = JSON.stringify(Object.fromEntries(entries.map((e) => [e.id, 0])));
+	const devRuntime = isDev ? `
+const slideImportTokens = ${importTokens};
+if (import.meta.hot) {
+  import.meta.hot.on('open-slide:slide-changed', (data) => {
+    const ids = Array.isArray(data?.slideIds) ? data.slideIds : data?.slideId ? [data.slideId] : [];
+    const token = Date.now();
+    for (const id of ids) {
+      if (Object.prototype.hasOwnProperty.call(slideImportTokens, id)) slideImportTokens[id] = token;
+    }
+  });
+}
+` : "";
+	const cases = entries.map((e) => {
+		const importExpr = isDev ? `import(/* @vite-ignore */ ${JSON.stringify(`${e.importPath}?t=`)} + slideImportTokens[${JSON.stringify(e.id)}])` : `import(${JSON.stringify(e.importPath)})`;
+		return `    case ${JSON.stringify(e.id)}: return ${importExpr};`;
+	}).join("\n");
 	return `// virtual:open-slide/slides — generated
 export const slideIds = ${ids};
+export const slideThemes = ${themesJson};
+${devRuntime}
 
 export async function loadSlide(id) {
   switch (id) {
@@ -2550,6 +3043,32 @@ function openSlidePlugin(opts) {
 	const slidesRoot = path.resolve(userCwd, slidesDir);
 	const foldersManifestPath = path.join(slidesRoot, ".folders.json");
 	let isDev = false;
+	const slideIdForEntry = (p) => {
+		const rel = path.relative(slidesRoot, p);
+		if (rel.startsWith("..") || path.isAbsolute(rel)) return null;
+		const parts = rel.split(path.sep);
+		if (parts.length !== 2) return null;
+		if (!/^index\.(tsx|jsx|ts|js)$/.test(parts[1])) return null;
+		return parts[0];
+	};
+	let slideChangeTimer = null;
+	const pendingSlideChanges = new Set();
+	const queueSlideChanged = (server, id) => {
+		pendingSlideChanges.add(id);
+		if (slideChangeTimer) clearTimeout(slideChangeTimer);
+		slideChangeTimer = setTimeout(() => {
+			slideChangeTimer = null;
+			const mod = server.moduleGraph.getModuleById(resolved$1(SLIDES_VMOD));
+			if (mod) server.moduleGraph.invalidateModule(mod);
+			const slideIds = Array.from(pendingSlideChanges);
+			pendingSlideChanges.clear();
+			server.ws.send({
+				type: "custom",
+				event: "open-slide:slide-changed",
+				data: { slideIds }
+			});
+		}, 100);
+	};
 	return {
 		name: "open-slide",
 		config(_c, env) {
@@ -2557,17 +3076,17 @@ function openSlidePlugin(opts) {
 			return { server: { fs: { allow: [userCwd] } } };
 		},
 		resolveId(id) {
-			if (id === SLIDES_VMOD) return resolved(SLIDES_VMOD);
-			if (id === CONFIG_VMOD) return resolved(CONFIG_VMOD);
-			if (id === FOLDERS_VMOD) return resolved(FOLDERS_VMOD);
+			if (id === SLIDES_VMOD) return resolved$1(SLIDES_VMOD);
+			if (id === CONFIG_VMOD) return resolved$1(CONFIG_VMOD);
+			if (id === FOLDERS_VMOD) return resolved$1(FOLDERS_VMOD);
 			return null;
 		},
 		async load(id) {
-			if (id === resolved(SLIDES_VMOD)) {
+			if (id === resolved$1(SLIDES_VMOD)) {
 				const files = await findSlides(userCwd, slidesDir);
-				return generateSlidesModule(files, slidesRoot, isDev);
+				return await generateSlidesModule(files, slidesRoot, isDev);
 			}
-			if (id === resolved(CONFIG_VMOD)) {
+			if (id === resolved$1(CONFIG_VMOD)) {
 				const userBuild = config.build ?? {};
 				const buildResolved = isDev ? {
 					showSlideBrowser: true,
@@ -2584,31 +3103,31 @@ function openSlidePlugin(opts) {
 				};
 				return `export default ${JSON.stringify(resolvedConfig)};\n`;
 			}
-			if (id === resolved(FOLDERS_VMOD)) {
+			if (id === resolved$1(FOLDERS_VMOD)) {
 				const manifest = await readFoldersManifest(foldersManifestPath);
 				return `export default ${JSON.stringify(manifest)};\n`;
 			}
 			return null;
 		},
+		handleHotUpdate(ctx) {
+			const slideId = slideIdForEntry(ctx.file);
+			if (!slideId) return;
+			queueSlideChanged(ctx.server, slideId);
+			return [];
+		},
 		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]);
-			};
+			const isSlideEntry = (p) => slideIdForEntry(p) !== null;
 			let reloadTimer = null;
 			const reload = () => {
 				if (reloadTimer) clearTimeout(reloadTimer);
 				reloadTimer = setTimeout(() => {
 					reloadTimer = null;
-					const mod = server.moduleGraph.getModuleById(resolved(SLIDES_VMOD));
+					const mod = server.moduleGraph.getModuleById(resolved$1(SLIDES_VMOD));
 					if (mod) server.moduleGraph.invalidateModule(mod);
 					server.ws.send({ type: "full-reload" });
 				}, 150);
 			};
-			server.watcher.add(path.join(slidesRoot, "*/index.{tsx,jsx,ts,js}"));
+			if (existsSync(slidesRoot)) server.watcher.add(slidesRoot);
 			server.watcher.on("add", (p) => {
 				if (isSlideEntry(p)) reload();
 			});
@@ -2620,7 +3139,7 @@ function openSlidePlugin(opts) {
 				if (foldersTimer) clearTimeout(foldersTimer);
 				foldersTimer = setTimeout(() => {
 					foldersTimer = null;
-					const mod = server.moduleGraph.getModuleById(resolved(FOLDERS_VMOD));
+					const mod = server.moduleGraph.getModuleById(resolved$1(FOLDERS_VMOD));
 					if (mod) server.moduleGraph.invalidateModule(mod);
 				}, 100);
 			};
@@ -2647,6 +3166,144 @@ async function loadUserConfig(userCwd) {
 	return loaded?.config ?? {};
 }
 
+//#endregion
+//#region src/vite/themes-plugin.ts
+const THEMES_VMOD = "virtual:open-slide/themes";
+function resolved(id) {
+	return `\0${id}`;
+}
+const FM_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/;
+function parseFrontmatter(raw, themeId) {
+	const match = raw.match(FM_RE);
+	const fmText = match ? match[1] : "";
+	const body = match ? match[2] : raw;
+	const data = {};
+	for (const line of fmText.split(/\r?\n/)) {
+		const m = line.match(/^([A-Za-z0-9_-]+)\s*:\s*(.*)$/);
+		if (!m) continue;
+		let value = m[2].trim();
+		if (value.startsWith("\"") && value.endsWith("\"") || value.startsWith("'") && value.endsWith("'")) value = value.slice(1, -1);
+		data[m[1]] = value;
+	}
+	return {
+		fm: {
+			name: data.name || themeId,
+			description: data.description || ""
+		},
+		body: body.trim()
+	};
+}
+async function findThemes(userCwd, themesDir) {
+	const abs = path.resolve(userCwd, themesDir);
+	if (!existsSync(abs)) return [];
+	const hits = await fg("*.md", {
+		cwd: abs,
+		absolute: true,
+		onlyFiles: true
+	});
+	return hits.sort();
+}
+async function readTheme(mdAbs, themesRoot) {
+	const id = path.basename(mdAbs, ".md");
+	const raw = await fs.readFile(mdAbs, "utf8");
+	const { fm, body } = parseFrontmatter(raw, id);
+	const demoCandidates = [
+		`${id}.demo.tsx`,
+		`${id}.demo.jsx`,
+		`${id}.demo.ts`,
+		`${id}.demo.js`
+	];
+	let demoAbs = null;
+	for (const cand of demoCandidates) {
+		const p = path.join(themesRoot, cand);
+		if (existsSync(p)) {
+			demoAbs = p;
+			break;
+		}
+	}
+	return {
+		id,
+		frontmatter: fm,
+		body,
+		demoAbs
+	};
+}
+function generateThemesModule(themes, isDev) {
+	const meta = themes.map((t$3) => ({
+		id: t$3.id,
+		name: t$3.frontmatter.name,
+		description: t$3.frontmatter.description,
+		body: t$3.body,
+		hasDemo: t$3.demoAbs !== null
+	}));
+	const cases = themes.flatMap((t$3) => {
+		const abs = t$3.demoAbs;
+		if (!abs) return [];
+		const importPath = isDev ? `/@fs/${normalizePath(abs).replace(/^\/+/, "")}` : abs;
+		return [`    case ${JSON.stringify(t$3.id)}: return import(${JSON.stringify(importPath)});`];
+	}).join("\n");
+	return `// virtual:open-slide/themes — generated
+export const themes = ${JSON.stringify(meta)};
+
+export async function loadThemeDemo(id) {
+  switch (id) {
+${cases}
+    default: throw new Error('Theme demo not found: ' + id);
+  }
+}
+`;
+}
+function themesPlugin(opts) {
+	const { userCwd, config } = opts;
+	const themesDir = config.themesDir ?? "themes";
+	const themesRoot = path.resolve(userCwd, themesDir);
+	let isDev = false;
+	return {
+		name: "open-slide:themes",
+		config(_c, env) {
+			isDev = env.command === "serve";
+		},
+		resolveId(id) {
+			if (id === THEMES_VMOD) return resolved(THEMES_VMOD);
+			return null;
+		},
+		async load(id) {
+			if (id !== resolved(THEMES_VMOD)) return null;
+			const files = await findThemes(userCwd, themesDir);
+			const themes = await Promise.all(files.map((f) => readTheme(f, themesRoot)));
+			return generateThemesModule(themes, isDev);
+		},
+		configureServer(server) {
+			const isThemeFile = (p) => {
+				const rel = path.relative(themesRoot, p);
+				if (rel.startsWith("..") || path.isAbsolute(rel)) return false;
+				if (rel.includes(path.sep)) return false;
+				return /\.(md|demo\.(tsx|jsx|ts|js))$/.test(rel);
+			};
+			let reloadTimer = null;
+			const reload = () => {
+				if (reloadTimer) clearTimeout(reloadTimer);
+				reloadTimer = setTimeout(() => {
+					reloadTimer = null;
+					const mod = server.moduleGraph.getModuleById(resolved(THEMES_VMOD));
+					if (mod) server.moduleGraph.invalidateModule(mod);
+					server.ws.send({ type: "full-reload" });
+				}, 150);
+			};
+			if (existsSync(themesRoot)) server.watcher.add(themesRoot);
+			server.watcher.on("add", (p) => {
+				if (isThemeFile(p)) reload();
+			});
+			server.watcher.on("unlink", (p) => {
+				if (isThemeFile(p)) reload();
+			});
+			server.watcher.on("change", (p) => {
+				if (isThemeFile(p)) reload();
+			});
+		}
+	};
+}
+
 //#endregion
 //#region src/vite/config.ts
 function findPackageRoot(fromFile) {
@@ -2663,7 +3320,11 @@ async function createViteConfig(opts) {
 	const userCwd = path.resolve(opts.userCwd);
 	const config = opts.config ?? await loadUserConfig(userCwd);
 	const slidesDir = config.slidesDir ?? "slides";
+	const themesDir = config.themesDir ?? "themes";
+	const assetsDir = config.assetsDir ?? "assets";
 	const slidesAbs = path.resolve(userCwd, slidesDir);
+	const themesAbs = path.resolve(userCwd, themesDir);
+	const assetsAbs = path.resolve(userCwd, assetsDir);
 	return {
 		root: APP_ROOT,
 		configFile: false,
@@ -2679,6 +3340,10 @@ async function createViteConfig(opts) {
 				userCwd,
 				config
 			}),
+			themesPlugin({
+				userCwd,
+				config
+			}),
 			designPlugin({ userCwd }),
 			commentsPlugin({
 				userCwd,
@@ -2690,14 +3355,18 @@ async function createViteConfig(opts) {
 			}),
 			filesPlugin({
 				userCwd,
-				slidesDir
+				slidesDir,
+				assetsDir
 			}),
 			currentPlugin({
 				userCwd,
 				slidesDir
 			})
 		],
-		resolve: { alias: { "@": APP_ROOT } },
+		resolve: { alias: {
+			"@": APP_ROOT,
+			"@assets": assetsAbs
+		} },
 		optimizeDeps: {
 			entries: [path.join(APP_ROOT, "main.tsx")],
 			include: [
@@ -2728,7 +3397,9 @@ async function createViteConfig(opts) {
 			fs: { allow: [
 				APP_ROOT,
 				userCwd,
-				slidesAbs
+				slidesAbs,
+				themesAbs,
+				assetsAbs
 			] }
 		},
 		build: {