@open-slide/core 0.0.7 → 0.0.9

package/dist/{build-cUKUY4bh.js → build-pqF4W1Yi.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-DOcMmFJ7.js";
+import { createViteConfig } from "./config-CtwxMYv9.js";
 import path from "node:path";
 import { build as build$1, mergeConfig } from "vite";
 

package/dist/cli/bin.js

@@ -22,15 +22,15 @@ async function run(argv) {
 	const program = new Command();
 	program.name("open-slide").description("Author slides — we handle the Vite/React stack.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `open-slide --help` for usage)"));
 	program.command("dev").description("Start the dev server").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { dev } = await import("../dev-Brzmgu64.js");
+		const { dev } = await import("../dev-CJX97uiy.js");
 		await dev(flags);
 	});
 	program.command("build").description("Build a static site").option("--out-dir <dir>", "output directory (defaults to `dist`)").action(async (flags) => {
-		const { build } = await import("../build-cUKUY4bh.js");
+		const { build } = await import("../build-pqF4W1Yi.js");
 		await build(flags);
 	});
 	program.command("preview").description("Preview the production build").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { preview } = await import("../preview-Bf8iFXA-.js");
+		const { preview } = await import("../preview-IuLPcL5y.js");
 		await preview(flags);
 	});
 	await program.parseAsync(argv, { from: "user" });

package/dist/{config-DOcMmFJ7.js → config-CtwxMYv9.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,181 @@ 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 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);
+	}
+	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 +366,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";
@@ -564,6 +813,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 +1049,10 @@ async function createViteConfig(opts) {
 		root: APP_ROOT,
 		configFile: false,
 		plugins: [
+			locTagsPlugin({
+				userCwd,
+				slidesDir
+			}),
 			react(),
 			tailwindcss(),
 			openSlidePlugin({
@@ -758,7 +1079,16 @@ async function createViteConfig(opts) {
 				"tailwind-merge",
 				"class-variance-authority",
 				"emoji-picker-react"
-			]
+			],
+			esbuildOptions: { plugins: [{
+				name: "open-slide:virtual-externals",
+				setup(build$1) {
+					build$1.onResolve({ filter: /^virtual:open-slide\// }, (args) => ({
+						path: args.path,
+						external: true
+					}));
+				}
+			}] }
 		},
 		server: {
 			port: config.port ?? 5173,

package/dist/{dev-Brzmgu64.js → dev-CJX97uiy.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-DOcMmFJ7.js";
+import { createViteConfig } from "./config-CtwxMYv9.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/{preview-Bf8iFXA-.js → preview-IuLPcL5y.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-DOcMmFJ7.js";
+import { createViteConfig } from "./config-CtwxMYv9.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/vite/index.js

@@ -1,3 +1,3 @@
-import { createViteConfig } from "../config-DOcMmFJ7.js";
+import { createViteConfig } from "../config-CtwxMYv9.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -53,11 +53,13 @@
     "fast-glob": "^3.3.2",
     "fflate": "^0.8.2",
     "lucide-react": "^1.8.0",
+    "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
     "shadcn": "^4.3.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
     "tw-animate-css": "^1.4.0",

package/src/app/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import config from 'virtual:open-slide/config';
+import { Toaster } from './components/ui/sonner';
 import { Home } from './routes/Home';
 import { Slide } from './routes/Slide';
 
@@ -11,6 +12,7 @@ export function App() {
         <Route path="/s/:slideId" element={<Slide />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
+      <Toaster />
     </BrowserRouter>
   );
 }

package/src/app/components/PdfProgressToast.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import type { PdfExportProgress } from '../lib/export-pdf';
+import { Progress } from './ui/progress';
+
+export function PdfProgressToast({ progress }: { progress: PdfExportProgress }) {
+  const text =
+    progress.phase === 'processing'
+      ? `Processing slide ${progress.current} / ${progress.total}`
+      : progress.phase === 'printing'
+        ? 'Opening print dialog…'
+        : 'Done';
+
+  return (
+    <div className="flex w-80 items-start gap-3 rounded-md border bg-popover px-4 py-3 text-popover-foreground shadow-lg">
+      <Loader2 className="mt-0.5 size-4 shrink-0 animate-spin text-primary" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">Exporting PDF</p>
+        <p className="truncate text-xs text-muted-foreground">{text}</p>
+        <Progress value={Math.round(progress.percent)} className="mt-2 h-1.5" />
+      </div>
+    </div>
+  );
+}

package/src/app/components/Player.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { useWheelPageNavigation } from '@/lib/useWheelPageNavigation';
 import type { Page } from '../lib/sdk';
 import { SlideCanvas } from './SlideCanvas';
 
@@ -12,6 +13,20 @@ type Props = {
 
 export function Player({ pages, index, onIndexChange, onExit, allowExit = true }: Props) {
   const rootRef = useRef<HTMLDivElement>(null);
+  const goPrev = useCallback(() => {
+    if (index > 0) onIndexChange(index - 1);
+  }, [index, onIndexChange]);
+  const goNext = useCallback(() => {
+    if (index < pages.length - 1) onIndexChange(index + 1);
+  }, [index, pages.length, onIndexChange]);
+
+  useWheelPageNavigation({
+    ref: rootRef,
+    canPrev: index > 0,
+    canNext: index < pages.length - 1,
+    onPrev: goPrev,
+    onNext: goNext,
+  });
 
   useEffect(() => {
     const el = rootRef.current;
@@ -69,14 +84,14 @@ export function Player({ pages, index, onIndexChange, onExit, allowExit = true }
       <button
         type="button"
         aria-label="Previous page"
-        onClick={() => index > 0 && onIndexChange(index - 1)}
+        onClick={goPrev}
         disabled={index === 0}
         className="absolute inset-y-0 left-0 z-10 w-[30%]"
       />
       <button
         type="button"
         aria-label="Next page"
-        onClick={() => index < pages.length - 1 && onIndexChange(index + 1)}
+        onClick={goNext}
         disabled={index === pages.length - 1}
         className="absolute inset-y-0 right-0 z-10 w-[30%]"
       />

package/src/app/components/inspector/CommentWidget.tsx

@@ -8,7 +8,7 @@ export function CommentWidget() {
   const count = comments.length;
 
   return (
-    <div data-inspector-ui className="fixed right-4 bottom-4 z-40 flex flex-col items-end gap-2">
+    <div data-inspector-ui className="absolute right-4 bottom-4 z-20 flex flex-col items-end gap-2">
       {open && (
         <div className="w-80 rounded-md border bg-card shadow-xl animate-in fade-in-0 slide-in-from-bottom-2 duration-200">
           <div className="flex items-center justify-between border-b px-3 py-2">