@open-slide/core 0.0.8 → 0.0.10

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

@@ -9,6 +9,42 @@ import { parse } from "@babel/parser";
 import fg from "fast-glob";
 import { loadConfigFromFile } from "vite";
 
+//#region src/vite/babel-walk.ts
+const SKIP_KEYS = new Set([
+	"loc",
+	"start",
+	"end",
+	"type",
+	"extra",
+	"leadingComments",
+	"trailingComments",
+	"innerComments"
+]);
+function walkJsx(ast, visit) {
+	let stopped = false;
+	const walk = (node) => {
+		if (stopped || !node || typeof node !== "object") return;
+		if (Array.isArray(node)) {
+			for (const c of node) walk(c);
+			return;
+		}
+		const n = node;
+		if (typeof n.type !== "string") return;
+		if (n.type === "JSXElement" || n.type === "JSXFragment") {
+			if (visit(n) === "stop") {
+				stopped = true;
+				return;
+			}
+		}
+		for (const key of Object.keys(n)) {
+			if (SKIP_KEYS.has(key)) continue;
+			walk(n[key]);
+		}
+	};
+	walk(ast);
+}
+
+//#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;
@@ -86,42 +122,19 @@ function lineIndent(source, lineNumber) {
 	const m = source.slice(start, start + 200).match(/^[ \t]*/);
 	return m?.[0] ?? "";
 }
-/**
-* Walk the AST, collect every JSXElement/JSXFragment whose location encloses
-* the click point, ordered innermost-first.
-*
-* "Encloses" here is inclusive at the start (so a click on the opening `<`
-* counts as inside) and exclusive at the end. We deliberately don't trust
-* Babel's `_debugSource` line/column to be exact — HMR or upstream transforms
-* can shift it slightly — so we treat the click as a probe and pick the
-* tightest JSX container around it.
-*/
 function findJsxAncestors(ast, line, column) {
 	const hits = [];
-	const walk = (node) => {
-		if (!node || typeof node !== "object") return;
-		if (Array.isArray(node)) {
-			for (const c of node) walk(c);
-			return;
-		}
-		const n = node;
-		if (typeof n.type !== "string") return;
-		if ((n.type === "JSXElement" || n.type === "JSXFragment") && n.loc) {
-			const s = n.loc.start;
-			const e = n.loc.end;
-			const afterStart = line > s.line || line === s.line && column >= s.column;
-			const beforeEnd = line < e.line || line === e.line && column < e.column;
-			if (afterStart && beforeEnd) hits.push({
-				node: n,
-				size: n.end - n.start
-			});
-		}
-		for (const key of Object.keys(n)) {
-			if (key === "loc" || key === "start" || key === "end" || key === "type" || key === "extra" || key === "leadingComments" || key === "trailingComments" || key === "innerComments") continue;
-			walk(n[key]);
-		}
-	};
-	walk(ast);
+	walkJsx(ast, (n) => {
+		if (!n.loc) return;
+		const s = n.loc.start;
+		const e = n.loc.end;
+		const afterStart = line > s.line || line === s.line && column >= s.column;
+		const beforeEnd = line < e.line || line === e.line && column < e.column;
+		if (afterStart && beforeEnd) hits.push({
+			node: n,
+			size: n.end - n.start
+		});
+	});
 	hits.sort((a, b) => a.size - b.size);
 	return hits.map((h) => h.node);
 }
@@ -146,16 +159,6 @@ function planInsertion(source, target) {
 	}
 	return null;
 }
-/**
-* Resolve a click on the slide page (line/col from React fiber's
-* `_debugSource`) to an in-source offset where we can safely splice a
-* `@slide-comment` marker.
-*
-* Strategy: parse the file, find every JSX container around the click, and
-* walk innermost → outermost looking for the first one we can insert *inside*
-* (i.e. not self-closing). Self-closing elements like `<img/>` get hoisted to
-* their nearest non-self-closing ancestor.
-*/
 function findInsertion(source, line, column) {
 	let ast;
 	try {
@@ -181,6 +184,321 @@ function offsetToLine(source, offset) {
 	for (let i = 0; i < offset && i < source.length; i++) if (source[i] === "\n") line++;
 	return line;
 }
+function parseSource(source) {
+	try {
+		return parse(source, {
+			sourceType: "module",
+			plugins: ["typescript", "jsx"],
+			errorRecovery: true
+		});
+	} catch {
+		return null;
+	}
+}
+function findInnermostJsxElement(source, line, column) {
+	const ast = parseSource(source);
+	if (!ast) return null;
+	const exact = findJsxByStart(ast, line, column);
+	if (exact) return exact;
+	const ancestors = findJsxAncestors(ast, line, column);
+	for (const n of ancestors) if (n.type === "JSXElement") return n;
+	return null;
+}
+function findJsxByStart(ast, line, column) {
+	let hit = null;
+	walkJsx(ast, (n) => {
+		if (n.type !== "JSXElement" || !n.loc) return;
+		const s = n.loc.start;
+		if (s.line === line && s.column === column) {
+			hit = n;
+			return "stop";
+		}
+	});
+	return hit;
+}
+function jsString(s) {
+	return `'${s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n")}'`;
+}
+function findStyleAttr(opening) {
+	const attrs = opening.attributes ?? [];
+	for (const attr of attrs) {
+		if (attr.type !== "JSXAttribute") continue;
+		const name = attr.name;
+		if (name?.type === "JSXIdentifier" && name.name === "style") return attr;
+	}
+	return null;
+}
+function buildStyleSplice(source, element, ops) {
+	const opening = element.openingElement;
+	if (!opening) return { error: "no opening element" };
+	const existing = findStyleAttr(opening);
+	const style = new Map();
+	if (existing) {
+		const value = existing.value;
+		if (!value || value.type !== "JSXExpressionContainer") return { error: "style attribute has unsupported form" };
+		const expr = value.expression;
+		if (expr.type !== "ObjectExpression") return { error: "style is not a literal object" };
+		const properties = expr.properties;
+		for (const prop of properties) {
+			if (prop.type !== "ObjectProperty") return { error: "style contains spread or method" };
+			const p = prop;
+			if (p.computed) return { error: "style has computed key" };
+			let keyName = null;
+			if (p.key.type === "Identifier" && p.key.name) keyName = p.key.name;
+			else if (p.key.type === "StringLiteral" && typeof p.key.value === "string") keyName = p.key.value;
+			if (!keyName) return { error: "style has unsupported key" };
+			style.set(keyName, source.slice(p.value.start, p.value.end));
+		}
+	}
+	for (const op of ops) if (op.value === null) style.delete(op.key);
+	else style.set(op.key, jsString(op.value));
+	if (style.size === 0) {
+		if (!existing) return null;
+		let from = existing.start;
+		if (from > 0 && source[from - 1] === " ") from -= 1;
+		return {
+			from,
+			to: existing.end,
+			text: ""
+		};
+	}
+	const propsText = Array.from(style.entries()).map(([k, v]) => `${k}: ${v}`).join(", ");
+	const newAttr = `style={{ ${propsText} }}`;
+	if (existing) return {
+		from: existing.start,
+		to: existing.end,
+		text: newAttr
+	};
+	const name = opening.name;
+	return {
+		from: name.end,
+		to: name.end,
+		text: ` ${newAttr}`
+	};
+}
+function formatJsxText(value) {
+	if (/[{}<>]/.test(value) || /^\s|\s$/.test(value) || value === "") return `{${jsString(value)}}`;
+	return value;
+}
+function buildTextSplice(element, value) {
+	const children = element.children ?? [];
+	if (children.length === 0) return { error: "element has no children to edit" };
+	const meaningful = children.filter((c) => {
+		if (c.type === "JSXText") {
+			const v = c.value;
+			return v.trim() !== "";
+		}
+		return true;
+	});
+	if (meaningful.length !== 1) return { error: "element has complex children" };
+	const child = meaningful[0];
+	if (child.type === "JSXText") {
+		const first = children[0];
+		const last = children[children.length - 1];
+		return {
+			from: first.start,
+			to: last.end,
+			text: formatJsxText(value)
+		};
+	}
+	if (child.type === "JSXExpressionContainer") {
+		const expr = child.expression;
+		if (expr.type === "StringLiteral" || expr.type === "NumericLiteral") return {
+			from: child.start,
+			to: child.end,
+			text: `{${jsString(value)}}`
+		};
+		return { error: "element has dynamic expression child" };
+	}
+	return { error: "element has complex children" };
+}
+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 ?? [];
+		let def = null;
+		for (const spec of specs) if (spec.type === "ImportDefaultSpecifier") {
+			const local = spec.local?.name;
+			if (typeof local === "string") {
+				def = local;
+				break;
+			}
+		}
+		out.push({
+			node,
+			source: src,
+			defaultIdent: def
+		});
+	}
+	return out;
+}
+function collectTopLevelIdentifiers(ast) {
+	const names = new Set();
+	for (const imp of findImports(ast)) {
+		if (imp.defaultIdent) names.add(imp.defaultIdent);
+		const specs = imp.node.specifiers ?? [];
+		for (const spec of specs) if (spec.type !== "ImportDefaultSpecifier") {
+			const local = spec.local?.name;
+			if (typeof local === "string") names.add(local);
+		}
+	}
+	return names;
+}
+function safeAssetIdentifier(filename, taken) {
+	const stem = filename.replace(/\.[^.]+$/, "");
+	let camel = "";
+	let upper = false;
+	for (const ch of stem) if (/[A-Za-z0-9]/.test(ch)) {
+		camel += upper ? ch.toUpperCase() : ch;
+		upper = false;
+	} else upper = camel.length > 0;
+	let base = camel;
+	if (!base || !/^[A-Za-z_$]/.test(base)) base = `asset${base.charAt(0).toUpperCase()}${base.slice(1)}` || "asset";
+	base = base.charAt(0).toLowerCase() + base.slice(1);
+	let candidate = base;
+	let i = 2;
+	while (taken.has(candidate)) {
+		candidate = `${base}${i}`;
+		i += 1;
+	}
+	return candidate;
+}
+function findJsxAttr(opening, name) {
+	const attrs = opening.attributes ?? [];
+	for (const attr of attrs) {
+		if (attr.type !== "JSXAttribute") continue;
+		const n = attr.name;
+		if (n?.type === "JSXIdentifier" && n.name === name) return attr;
+	}
+	return null;
+}
+function planAssetAttr(ast, element, attr, assetPath) {
+	const opening = element.openingElement;
+	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);
+	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 newAttr = `${attr}={${identifier}}`;
+	const existing = findJsxAttr(opening, attr);
+	let attrSplice;
+	if (existing) attrSplice = {
+		from: existing.start,
+		to: existing.end,
+		text: newAttr
+	};
+	else {
+		const name = opening.name;
+		attrSplice = {
+			from: name.end,
+			to: name.end,
+			text: ` ${newAttr}`
+		};
+	}
+	return {
+		importSplice,
+		attrSplice
+	};
+}
+function applyEdit(source, line, column, ops) {
+	if (ops.length === 0) return {
+		ok: true,
+		source
+	};
+	const element = findInnermostJsxElement(source, line, column);
+	if (!element) return {
+		ok: false,
+		status: 422,
+		error: "no JSX element at location"
+	};
+	const splices = [];
+	const styleOps = ops.flatMap((op) => op.kind === "set-style" ? [{
+		key: op.key,
+		value: op.value
+	}] : []);
+	if (styleOps.length > 0) {
+		const result = buildStyleSplice(source, element, styleOps);
+		if (result && "error" in result) return {
+			ok: false,
+			status: 422,
+			error: result.error
+		};
+		if (result) splices.push(result);
+	}
+	for (const op of ops) {
+		if (op.kind !== "set-text") continue;
+		const result = buildTextSplice(element, op.value);
+		if ("error" in result) return {
+			ok: false,
+			status: 422,
+			error: result.error
+		};
+		splices.push(result);
+	}
+	const assetOps = ops.flatMap((op) => op.kind === "set-attr-asset" ? [op] : []);
+	if (assetOps.length > 0) {
+		const ast = parseSource(source);
+		if (!ast) return {
+			ok: false,
+			status: 422,
+			error: "could not parse source"
+		};
+		const importSplices = [];
+		for (const op of assetOps) {
+			const plan = planAssetAttr(ast, element, op.attr, op.assetPath);
+			if ("error" in plan) return {
+				ok: false,
+				status: 422,
+				error: plan.error
+			};
+			splices.push(plan.attrSplice);
+			if (plan.importSplice) importSplices.push(plan.importSplice);
+		}
+		if (importSplices.length > 0) {
+			const from = importSplices[0].from;
+			const to = importSplices[0].to;
+			const text = importSplices.map((s) => s.text).join("");
+			splices.push({
+				from,
+				to,
+				text
+			});
+		}
+	}
+	if (splices.length === 0) return {
+		ok: true,
+		source
+	};
+	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);
+	return {
+		ok: true,
+		source: next
+	};
+}
 function commentsPlugin(opts) {
 	const userCwd = opts.userCwd;
 	const slidesDir = opts.slidesDir ?? "slides";
@@ -188,6 +506,77 @@ function commentsPlugin(opts) {
 		name: "open-slide:comments",
 		apply: "serve",
 		configureServer(server) {
+			server.middlewares.use("/__edit", async (req, res, next) => {
+				const url = new URL(req.url ?? "/", "http://local");
+				const method = req.method ?? "GET";
+				if (method !== "POST") return next();
+				try {
+					if (url.pathname === "/") {
+						const body = await readBody$1(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" });
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json$1(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 });
+						const changed = result.source !== source;
+						if (changed) await fs.writeFile(file, result.source, "utf8");
+						return json$1(res, 200, {
+							ok: true,
+							changed
+						});
+					}
+					if (url.pathname === "/batch") {
+						const body = await readBody$1(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" });
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json$1(res, 404, { error: "slide not found" });
+						}
+						const original = source;
+						const results = [];
+						for (const edit of body.edits) {
+							if (!edit.line || edit.line < 1 || !Array.isArray(edit.ops)) {
+								results.push({
+									ok: false,
+									error: "invalid edit"
+								});
+								continue;
+							}
+							const r = applyEdit(source, edit.line, edit.column ?? 0, edit.ops);
+							if (r.ok) {
+								source = r.source;
+								results.push({ ok: true });
+							} else results.push({
+								ok: false,
+								error: r.error
+							});
+						}
+						const changed = source !== original;
+						if (changed) await fs.writeFile(file, source, "utf8");
+						return json$1(res, 200, {
+							ok: true,
+							changed,
+							results
+						});
+					}
+					return next();
+				} catch (err) {
+					json$1(res, 500, { error: String(err.message ?? err) });
+				}
+			});
 			server.middlewares.use("/__comments", async (req, res, next) => {
 				const url = new URL(req.url ?? "/", "http://local");
 				const method = req.method ?? "GET";
@@ -268,6 +657,45 @@ function commentsPlugin(opts) {
 const FOLDER_ID_RE = /^f-[a-f0-9]{8}$/;
 const SLIDE_ID_RE = /^[a-z0-9_-]+$/i;
 const COLOR_RE = /^#[0-9a-fA-F]{6}$/;
+const ASSET_FORBIDDEN_RE = /[\x00-\x1F\x7F/\\:*?"<>|]/;
+const ASSET_MAX_BYTES = 25 * 1024 * 1024;
+const MIME_BY_EXT = {
+	png: "image/png",
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	gif: "image/gif",
+	svg: "image/svg+xml",
+	webp: "image/webp",
+	avif: "image/avif",
+	ico: "image/x-icon",
+	mp4: "video/mp4",
+	webm: "video/webm",
+	mov: "video/quicktime",
+	woff: "font/woff",
+	woff2: "font/woff2",
+	ttf: "font/ttf",
+	otf: "font/otf",
+	json: "application/json",
+	txt: "text/plain; charset=utf-8",
+	md: "text/markdown; charset=utf-8"
+};
+function mimeForFilename(name) {
+	const dot = name.lastIndexOf(".");
+	if (dot < 0) return "application/octet-stream";
+	const ext = name.slice(dot + 1).toLowerCase();
+	return MIME_BY_EXT[ext] ?? "application/octet-stream";
+}
+function validateAssetName(v) {
+	if (typeof v !== "string") return null;
+	const trimmed = v.trim();
+	if (trimmed.length < 1 || trimmed.length > 120) return null;
+	if (ASSET_FORBIDDEN_RE.test(trimmed)) return null;
+	if (trimmed.startsWith(".") || trimmed.startsWith("~")) return null;
+	if (trimmed === ".." || trimmed.split(/[/\\]/).includes("..")) return null;
+	const dot = trimmed.lastIndexOf(".");
+	if (dot <= 0 || dot === trimmed.length - 1) return null;
+	return trimmed;
+}
 async function readBody(req) {
 	return await new Promise((resolve, reject) => {
 		const chunks = [];
@@ -341,6 +769,22 @@ async function rmSlideDir(slidesRoot, slideId) {
 		return false;
 	}
 }
+function resolveAssetsDir(slidesRoot, slideId) {
+	if (!SLIDE_ID_RE.test(slideId)) return null;
+	const slideDir = path.resolve(slidesRoot, slideId);
+	if (!slideDir.startsWith(slidesRoot + path.sep)) return null;
+	const assetsDir = path.resolve(slideDir, "assets");
+	if (assetsDir !== path.join(slideDir, "assets")) return null;
+	return assetsDir;
+}
+function resolveAssetFile(slidesRoot, slideId, filename) {
+	const assetsDir = resolveAssetsDir(slidesRoot, slideId);
+	if (!assetsDir) return null;
+	if (!validateAssetName(filename)) return null;
+	const file = path.resolve(assetsDir, filename);
+	if (!file.startsWith(assetsDir + path.sep)) return null;
+	return file;
+}
 function resolveSlideEntry(slidesRoot, slideId) {
 	if (!SLIDE_ID_RE.test(slideId)) return null;
 	const dir = path.resolve(slidesRoot, slideId);
@@ -441,6 +885,22 @@ function filesPlugin(opts) {
 					event: "open-slide:files-changed"
 				});
 			});
+			const onAssetChange = (p) => {
+				if (!p.startsWith(slidesRoot + path.sep)) return;
+				const rel = p.slice(slidesRoot.length + 1);
+				const parts = rel.split(path.sep);
+				if (parts.length < 3 || parts[1] !== "assets") return;
+				const slideId = parts[0];
+				if (!SLIDE_ID_RE.test(slideId)) return;
+				server.ws.send({
+					type: "custom",
+					event: "open-slide:assets-changed",
+					data: { slideId }
+				});
+			};
+			server.watcher.on("add", onAssetChange);
+			server.watcher.on("change", onAssetChange);
+			server.watcher.on("unlink", onAssetChange);
 			server.middlewares.use("/__slides", async (req, res, next) => {
 				const url = new URL(req.url ?? "/", "http://local");
 				const method = req.method ?? "GET";
@@ -484,6 +944,172 @@ function filesPlugin(opts) {
 					json(res, 500, { error: String(err.message ?? err) });
 				}
 			});
+			server.middlewares.use("/__assets", async (req, res, next) => {
+				const url = new URL(req.url ?? "/", "http://local");
+				const method = req.method ?? "GET";
+				try {
+					const listMatch = url.pathname.match(/^\/([^/]+)\/?$/);
+					const fileMatch = url.pathname.match(/^\/([^/]+)\/([^/]+)$/);
+					if (listMatch && method === "GET") {
+						const slideId = listMatch[1];
+						const assetsDir = resolveAssetsDir(slidesRoot, slideId);
+						if (!assetsDir) return json(res, 400, { error: "invalid slideId" });
+						let entries;
+						try {
+							entries = await fs.readdir(assetsDir);
+						} catch (err) {
+							if (err.code === "ENOENT") return json(res, 200, { assets: [] });
+							throw err;
+						}
+						const assets = [];
+						for (const name of entries) {
+							if (!validateAssetName(name)) continue;
+							const stat = await fs.stat(path.join(assetsDir, name));
+							if (!stat.isFile()) continue;
+							assets.push({
+								name,
+								size: stat.size,
+								mtime: stat.mtimeMs,
+								mime: mimeForFilename(name),
+								url: `/__assets/${slideId}/${encodeURIComponent(name)}`
+							});
+						}
+						assets.sort((a, b) => a.name.localeCompare(b.name));
+						return json(res, 200, { assets });
+					}
+					if (fileMatch) {
+						const slideId = fileMatch[1];
+						const filename = decodeURIComponent(fileMatch[2]);
+						const file = resolveAssetFile(slidesRoot, slideId, filename);
+						if (!file) return json(res, 400, { error: "invalid path" });
+						if (method === "GET") try {
+							const buf = await fs.readFile(file);
+							res.statusCode = 200;
+							res.setHeader("content-type", mimeForFilename(filename));
+							res.setHeader("cache-control", "no-store");
+							res.end(buf);
+							return;
+						} catch (err) {
+							if (err.code === "ENOENT") return json(res, 404, { error: "asset not found" });
+							throw err;
+						}
+						if (method === "POST") {
+							const overwrite = url.searchParams.get("overwrite") === "1";
+							const lenHeader = req.headers["content-length"];
+							const len = typeof lenHeader === "string" ? Number(lenHeader) : NaN;
+							if (Number.isFinite(len) && len > ASSET_MAX_BYTES) return json(res, 413, { error: "file too large" });
+							if (!overwrite) try {
+								await fs.access(file);
+								return json(res, 409, { error: "asset exists" });
+							} catch {}
+							const assetsDir = resolveAssetsDir(slidesRoot, slideId);
+							if (!assetsDir) return json(res, 400, { error: "invalid slideId" });
+							await fs.mkdir(assetsDir, { recursive: true });
+							const chunks = [];
+							let total = 0;
+							let oversized = false;
+							await new Promise((resolve, reject) => {
+								req.on("data", (c) => {
+									total += c.length;
+									if (total > ASSET_MAX_BYTES) {
+										oversized = true;
+										req.destroy();
+										return;
+									}
+									chunks.push(c);
+								});
+								req.on("end", () => resolve());
+								req.on("error", reject);
+							});
+							if (oversized) return json(res, 413, { error: "file too large" });
+							await fs.writeFile(file, Buffer.concat(chunks));
+							return json(res, 200, {
+								ok: true,
+								name: filename,
+								size: total,
+								mime: mimeForFilename(filename),
+								url: `/__assets/${slideId}/${encodeURIComponent(filename)}`
+							});
+						}
+						if (method === "PATCH") {
+							const body = await readBody(req);
+							const target = validateAssetName(body.name);
+							if (!target) return json(res, 400, { error: "invalid name" });
+							if (target === filename) return json(res, 200, {
+								ok: true,
+								name: filename
+							});
+							const dest = resolveAssetFile(slidesRoot, slideId, target);
+							if (!dest) return json(res, 400, { error: "invalid name" });
+							try {
+								await fs.access(dest);
+								return json(res, 409, { error: "target exists" });
+							} catch {}
+							try {
+								await fs.rename(file, dest);
+							} catch (err) {
+								if (err.code === "ENOENT") return json(res, 404, { error: "asset not found" });
+								throw err;
+							}
+							return json(res, 200, {
+								ok: true,
+								name: target
+							});
+						}
+						if (method === "DELETE") {
+							try {
+								await fs.unlink(file);
+							} catch (err) {
+								if (err.code === "ENOENT") return json(res, 404, { error: "asset not found" });
+								throw err;
+							}
+							return json(res, 200, { ok: true });
+						}
+					}
+					return next();
+				} catch (err) {
+					json(res, 500, { error: String(err.message ?? err) });
+				}
+			});
+			server.middlewares.use("/__svgl", async (req, res, next) => {
+				const reqUrl = new URL(req.url ?? "/", "http://local");
+				const method = req.method ?? "GET";
+				if (method !== "GET") return next();
+				try {
+					let target = null;
+					if (reqUrl.pathname === "/search") {
+						const params = new URLSearchParams();
+						const q = reqUrl.searchParams.get("q");
+						const limit = reqUrl.searchParams.get("limit");
+						if (q) params.set("search", q);
+						if (limit) params.set("limit", limit);
+						const qs = params.toString();
+						target = `https://api.svgl.app/${qs ? `?${qs}` : ""}`;
+					} else if (reqUrl.pathname === "/svg") {
+						const u = reqUrl.searchParams.get("u");
+						if (!u) return json(res, 400, { error: "missing u" });
+						let parsed;
+						try {
+							parsed = new URL(u);
+						} catch {
+							return json(res, 400, { error: "invalid u" });
+						}
+						if (parsed.protocol !== "https:") return json(res, 400, { error: "https only" });
+						const host = parsed.hostname.toLowerCase();
+						if (host !== "svgl.app" && !host.endsWith(".svgl.app")) return json(res, 400, { error: "host not allowed" });
+						target = parsed.toString();
+					} else return next();
+					const upstream = await fetch(target);
+					const ct = upstream.headers.get("content-type") ?? "application/octet-stream";
+					res.statusCode = upstream.status;
+					res.setHeader("content-type", ct);
+					res.setHeader("cache-control", "no-store");
+					const buf = Buffer.from(await upstream.arrayBuffer());
+					res.end(buf);
+				} catch (err) {
+					json(res, 502, { error: String(err.message ?? err) });
+				}
+			});
 			server.middlewares.use("/__folders", async (req, res, next) => {
 				const url = new URL(req.url ?? "/", "http://local");
 				const method = req.method ?? "GET";
@@ -564,6 +1190,74 @@ function filesPlugin(opts) {
 	};
 }
 
+//#endregion
+//#region src/vite/loc-tags-plugin.ts
+function isHostJsxName(name) {
+	if (!name || typeof name !== "object") return false;
+	const n = name;
+	return n.type === "JSXIdentifier" && typeof n.name === "string" && /^[a-z]/.test(n.name);
+}
+function alreadyTagged(opening) {
+	const attrs = opening.attributes ?? [];
+	for (const attr of attrs) {
+		if (attr.type !== "JSXAttribute") continue;
+		const name = attr.name;
+		if (name?.type === "JSXIdentifier" && name.name === "data-slide-loc") return true;
+	}
+	return false;
+}
+function injectLocTags(code) {
+	let ast;
+	try {
+		ast = parse(code, {
+			sourceType: "module",
+			plugins: ["typescript", "jsx"],
+			errorRecovery: true
+		});
+	} catch {
+		return null;
+	}
+	const insertions = [];
+	walkJsx(ast, (node) => {
+		if (node.type !== "JSXElement") return;
+		const opening = node.openingElement;
+		if (!opening) return;
+		const name = opening.name;
+		if (!isHostJsxName(name)) return;
+		if (alreadyTagged(opening)) return;
+		const loc = node.loc;
+		if (!loc) return;
+		insertions.push({
+			offset: name.end,
+			text: ` data-slide-loc="${loc.start.line}:${loc.start.column}"`
+		});
+	});
+	if (insertions.length === 0) return null;
+	insertions.sort((a, b) => b.offset - a.offset);
+	let next = code;
+	for (const ins of insertions) next = next.slice(0, ins.offset) + ins.text + next.slice(ins.offset);
+	return next;
+}
+function locTagsPlugin(opts) {
+	const slidesRoot = path.resolve(opts.userCwd, opts.slidesDir ?? "slides");
+	return {
+		name: "open-slide:loc-tags",
+		apply: "serve",
+		enforce: "pre",
+		transform(code, id) {
+			const filePath = id.split("?")[0];
+			if (!filePath.startsWith(slidesRoot + path.sep)) return null;
+			if (!filePath.endsWith(`${path.sep}index.tsx`)) return null;
+			const next = injectLocTags(code);
+			if (next === null) return null;
+			return {
+				code: next,
+				map: null
+			};
+		}
+	};
+}
+
 //#endregion
 //#region src/vite/open-slide-plugin.ts
 const CONFIG_FILE = "open-slide.config.ts";
@@ -732,6 +1426,10 @@ async function createViteConfig(opts) {
 		root: APP_ROOT,
 		configFile: false,
 		plugins: [
+			locTagsPlugin({
+				userCwd,
+				slidesDir
+			}),
 			react(),
 			tailwindcss(),
 			openSlidePlugin({