@open-slide/core 0.0.3 → 0.0.5

package/dist/build-BCORlVF3.js

@@ -0,0 +1,16 @@
+import { createViteConfig } from "./config-DF58h0l4.js";
+import path from "node:path";
+import { build as build$1, mergeConfig } from "vite";
+
+//#region src/cli/build.ts
+async function build(opts = {}) {
+	const base = await createViteConfig({
+		userCwd: process.cwd(),
+		mode: "build"
+	});
+	const config = mergeConfig(base, { build: { ...opts.outDir !== void 0 ? { outDir: path.resolve(process.cwd(), opts.outDir) } : {} } });
+	await build$1(config);
+}
+
+//#endregion
+export { build };

package/dist/cli/bin.js

@@ -1,57 +1,46 @@
 #!/usr/bin/env node
+import chalk from "chalk";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { Command, Option } from "commander";
 
 //#region src/cli/run.ts
-const HELP = `open-slide — author slides, we handle the Vite/React stack
-
-Usage:
-  open-slide dev              Start dev server
-  open-slide build            Build a static site
-  open-slide preview          Preview the production build
-  open-slide --help           Show this message
-  open-slide --version        Print version
-`;
 async function readVersion() {
 	const here = path.dirname(fileURLToPath(import.meta.url));
 	const pkgPath = path.resolve(here, "..", "..", "package.json");
 	const raw = await readFile(pkgPath, "utf8");
 	return JSON.parse(raw).version;
 }
+function parsePort(value) {
+	const n = Number(value);
+	if (!Number.isInteger(n) || n < 0 || n > 65535) throw new Error(`Invalid port: ${value}`);
+	return n;
+}
 async function run(argv) {
-	const [cmd] = argv;
-	if (!cmd || cmd === "--help" || cmd === "-h" || cmd === "help") {
-		process.stdout.write(HELP);
-		return;
-	}
-	if (cmd === "--version" || cmd === "-v") {
-		process.stdout.write(`${await readVersion()}\n`);
-		return;
-	}
-	if (cmd === "dev") {
-		const { dev } = await import("../dev-CFmlBbLh.js");
-		await dev();
-		return;
-	}
-	if (cmd === "build") {
-		const { build } = await import("../build-Cav2jYyI.js");
-		await build();
-		return;
-	}
-	if (cmd === "preview") {
-		const { preview } = await import("../preview-CotwHU_d.js");
-		await preview();
-		return;
-	}
-	process.stderr.write(`Unknown command: ${cmd}\n\n${HELP}`);
-	process.exit(1);
+	const version = await readVersion();
+	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-h-rxb3xY.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-BCORlVF3.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-lskE0s8A.js");
+		await preview(flags);
+	});
+	await program.parseAsync(argv, { from: "user" });
 }
 
 //#endregion
 //#region src/cli/bin.ts
 run(process.argv.slice(2)).catch((err) => {
-	process.stderr.write(`${err instanceof Error ? err.message : String(err)}\n`);
+	const message = err instanceof Error ? err.message : String(err);
+	process.stderr.write(`${chalk.red("error:")} ${message}\n`);
 	process.exit(1);
 });
 

package/dist/{config-g-uy_P5U.js → config-DF58h0l4.js}

@@ -179,7 +179,7 @@ function commentsPlugin(opts) {
 }
 
 //#endregion
-//#region src/vite/folders-plugin.ts
+//#region src/vite/files-plugin.ts
 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}$/;
@@ -236,6 +236,90 @@ function validateName(v) {
 	if (trimmed.length < 1 || trimmed.length > 40) return null;
 	return trimmed;
 }
+function validateSlideName(v) {
+	if (typeof v !== "string") return null;
+	const trimmed = v.trim();
+	if (trimmed.length < 1 || trimmed.length > 80) return null;
+	return trimmed;
+}
+async function rmSlideDir(slidesRoot, slideId) {
+	if (!SLIDE_ID_RE.test(slideId)) return false;
+	const dir = path.resolve(slidesRoot, slideId);
+	if (!dir.startsWith(slidesRoot + path.sep)) return false;
+	try {
+		await fs.rm(dir, {
+			recursive: true,
+			force: true
+		});
+		return true;
+	} catch {
+		return false;
+	}
+}
+function resolveSlideEntry(slidesRoot, slideId) {
+	if (!SLIDE_ID_RE.test(slideId)) return null;
+	const dir = path.resolve(slidesRoot, slideId);
+	if (!dir.startsWith(slidesRoot + path.sep)) return null;
+	return path.join(dir, "index.tsx");
+}
+function escapeSingleQuoted(s) {
+	return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+/**
+* Rewrite (or insert) the `title` field in the slide module's `export const meta`.
+*
+* Strategy:
+*   1. Find `export const meta` and brace-match its object literal.
+*   2. If the object already has a `title: '...'` entry, replace the literal.
+*   3. If the object exists but has no title, inject a new `title: '...'` line
+*      as the first property (preserving the author's surrounding indentation).
+*   4. If there is no `meta` export at all, insert a fresh one right before
+*      `export default`.
+*
+* Returns the rewritten source, or `null` if the file shape was too surprising
+* to touch safely (e.g. `export default` missing when we'd need to inject meta).
+*/
+function updateMetaTitleInSource(source, title) {
+	const newLiteral = `'${escapeSingleQuoted(title)}'`;
+	const metaStart = source.search(/export\s+const\s+meta\b/);
+	if (metaStart !== -1) {
+		const eqIdx = source.indexOf("=", metaStart);
+		if (eqIdx === -1) return null;
+		const openBrace = source.indexOf("{", eqIdx);
+		if (openBrace === -1) return null;
+		let depth = 0;
+		let closeBrace = -1;
+		for (let i = openBrace; i < source.length; i++) {
+			const ch = source[i];
+			if (ch === "{") depth++;
+			else if (ch === "}") {
+				depth--;
+				if (depth === 0) {
+					closeBrace = i;
+					break;
+				}
+			}
+		}
+		if (closeBrace === -1) return null;
+		const body = source.slice(openBrace + 1, closeBrace);
+		const titleRe = /(^|[\s,{])(title\s*:\s*)(['"`])((?:\\.|(?!\3).)*)\3/;
+		const match = body.match(titleRe);
+		if (match) {
+			const newBody = body.replace(titleRe, `${match[1]}${match[2]}${newLiteral}`);
+			return source.slice(0, openBrace + 1) + newBody + source.slice(closeBrace);
+		}
+		const firstIndentMatch = body.match(/\n([ \t]+)\S/);
+		const indent = firstIndentMatch ? firstIndentMatch[1] : "  ";
+		const trimmedBody = body.replace(/^\s*\n?/, "");
+		const needsSeparator = trimmedBody.trim().length > 0;
+		const insertion$1 = `\n${indent}title: ${newLiteral}${needsSeparator ? "," : ""}`;
+		return source.slice(0, openBrace + 1) + insertion$1 + body + source.slice(closeBrace);
+	}
+	const exportDefaultIdx = source.search(/export\s+default\b/);
+	if (exportDefaultIdx === -1) return null;
+	const insertion = `export const meta: SlideMeta = { title: ${newLiteral} };\n\n`;
+	return source.slice(0, exportDefaultIdx) + insertion + source.slice(exportDefaultIdx);
+}
 function validateIcon(v) {
 	if (!v || typeof v !== "object") return null;
 	const icon = v;
@@ -256,22 +340,65 @@ function validateIcon(v) {
 	}
 	return null;
 }
-function foldersPlugin(opts) {
+function filesPlugin(opts) {
 	const userCwd = opts.userCwd;
 	const slidesDir = opts.slidesDir ?? "slides";
 	const slidesRoot = path.resolve(userCwd, slidesDir);
 	const manifestPath = path.join(slidesRoot, ".folders.json");
 	return {
-		name: "open-slide:folders",
+		name: "open-slide:files",
 		apply: "serve",
 		configureServer(server) {
 			server.watcher.add(manifestPath);
 			server.watcher.on("change", (p) => {
 				if (p === manifestPath) server.ws.send({
 					type: "custom",
-					event: "open-slide:folders-changed"
+					event: "open-slide:files-changed"
 				});
 			});
+			server.middlewares.use("/__slides", async (req, res, next) => {
+				const url = new URL(req.url ?? "/", "http://local");
+				const method = req.method ?? "GET";
+				try {
+					const idMatch = url.pathname.match(/^\/([^/]+)$/);
+					if (!idMatch) return next();
+					const slideId = idMatch[1];
+					if (!SLIDE_ID_RE.test(slideId)) return json(res, 400, { error: "invalid slideId" });
+					if (method === "PATCH") {
+						const body = await readBody(req);
+						const name = validateSlideName(body.name);
+						if (!name) return json(res, 400, { error: "invalid name" });
+						const entry = resolveSlideEntry(slidesRoot, slideId);
+						if (!entry) return json(res, 400, { error: "invalid slideId" });
+						let source;
+						try {
+							source = await fs.readFile(entry, "utf8");
+						} catch {
+							return json(res, 404, { error: "slide not found" });
+						}
+						const updated = updateMetaTitleInSource(source, name);
+						if (updated === null) return json(res, 422, { error: "could not locate a safe place to write meta.title in index.tsx" });
+						if (updated !== source) await fs.writeFile(entry, updated, "utf8");
+						server.ws.send({ type: "full-reload" });
+						return json(res, 200, {
+							ok: true,
+							slideId,
+							name
+						});
+					}
+					if (method === "DELETE") {
+						const removed = await rmSlideDir(slidesRoot, slideId);
+						if (!removed) return json(res, 404, { error: "slide not found" });
+						const manifest = await readManifest(manifestPath);
+						delete manifest.assignments[slideId];
+						await writeManifest(manifestPath, manifest);
+						return json(res, 200, { ok: true });
+					}
+					return next();
+				} catch (err) {
+					json(res, 500, { 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";
@@ -477,7 +604,7 @@ async function createViteConfig(opts) {
 				userCwd,
 				slidesDir
 			}),
-			foldersPlugin({
+			filesPlugin({
 				userCwd,
 				slidesDir
 			})

package/dist/dev-h-rxb3xY.js

@@ -0,0 +1,19 @@
+import { createViteConfig } from "./config-DF58h0l4.js";
+import { createServer, mergeConfig } from "vite";
+
+//#region src/cli/dev.ts
+async function dev(opts = {}) {
+	const base = await createViteConfig({ userCwd: process.cwd() });
+	const config = mergeConfig(base, { server: {
+		...opts.port !== void 0 ? { port: opts.port } : {},
+		...opts.host !== void 0 ? { host: opts.host } : {},
+		...opts.open !== void 0 ? { open: opts.open } : {}
+	} });
+	const server = await createServer(config);
+	await server.listen();
+	server.printUrls();
+	server.bindCLIShortcuts({ print: true });
+}
+
+//#endregion
+export { dev };

package/dist/preview-lskE0s8A.js

@@ -0,0 +1,17 @@
+import { createViteConfig } from "./config-DF58h0l4.js";
+import { mergeConfig, preview as preview$1 } from "vite";
+
+//#region src/cli/preview.ts
+async function preview(opts = {}) {
+	const base = await createViteConfig({ userCwd: process.cwd() });
+	const config = mergeConfig(base, { preview: {
+		...opts.port !== void 0 ? { port: opts.port } : {},
+		...opts.host !== void 0 ? { host: opts.host } : {},
+		...opts.open !== void 0 ? { open: opts.open } : {}
+	} });
+	const server = await preview$1(config);
+	server.printUrls();
+}
+
+//#endregion
+export { preview };

package/dist/vite/index.js

@@ -1,3 +1,3 @@
-import { createViteConfig } from "../config-g-uy_P5U.js";
+import { createViteConfig } from "../config-DF58h0l4.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "build": "tsdown",
-    "check": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
     "prepack": "pnpm build"
   },
   "engines": {
@@ -44,10 +44,13 @@
     "@fontsource-variable/geist": "^5.2.8",
     "@tailwindcss/vite": "^4.2.2",
     "@vitejs/plugin-react": "^4.3.3",
+    "chalk": "^5.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "commander": "^12.1.0",
     "emoji-picker-react": "^4.18.0",
     "fast-glob": "^3.3.2",
+    "fflate": "^0.8.2",
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
     "react": "^18.3.1",

package/src/app/components/ClickNavZones.tsx

@@ -0,0 +1,34 @@
+import { useInspector } from './inspector/InspectorProvider';
+
+type Props = {
+  onPrev: () => void;
+  onNext: () => void;
+  canPrev: boolean;
+  canNext: boolean;
+};
+
+export function ClickNavZones({ onPrev, onNext, canPrev, canNext }: Props) {
+  const { active } = useInspector();
+  if (active) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Previous page"
+        onClick={onPrev}
+        disabled={!canPrev}
+        data-inspector-ui
+        className="absolute inset-y-0 left-0 z-20 w-[18%] min-w-12"
+      />
+      <button
+        type="button"
+        aria-label="Next page"
+        onClick={onNext}
+        disabled={!canNext}
+        data-inspector-ui
+        className="absolute inset-y-0 right-0 z-20 w-[18%] min-w-12"
+      />
+    </>
+  );
+}

package/src/app/components/Player.tsx

@@ -33,10 +33,15 @@ export function Player({ pages, index, onIndexChange, onExit }: Props) {
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
+      if (
+        e.key === 'ArrowRight' ||
+        e.key === 'ArrowDown' ||
+        e.key === ' ' ||
+        e.key === 'PageDown'
+      ) {
         e.preventDefault();
         if (index < pages.length - 1) onIndexChange(index + 1);
-      } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
         e.preventDefault();
         if (index > 0) onIndexChange(index - 1);
       } else if (e.key === 'Escape') {
@@ -54,8 +59,25 @@ export function Player({ pages, index, onIndexChange, onExit }: Props) {
   const PageComp = pages[index];
 
   return (
-    <div ref={rootRef} className="flex h-screen w-screen items-center justify-center bg-black">
+    <div
+      ref={rootRef}
+      className="relative flex h-screen w-screen items-center justify-center bg-black"
+    >
       <SlideCanvas flat>{PageComp ? <PageComp /> : null}</SlideCanvas>
+      <button
+        type="button"
+        aria-label="Previous page"
+        onClick={() => index > 0 && onIndexChange(index - 1)}
+        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)}
+        disabled={index === pages.length - 1}
+        className="absolute inset-y-0 right-0 z-10 w-[30%]"
+      />
     </div>
   );
 }

package/src/app/components/ThumbnailRail.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import type { Page } from '../lib/sdk';
@@ -15,6 +16,12 @@ const THUMB_SCALE = THUMB_WIDTH / CANVAS_WIDTH;
 const THUMB_HEIGHT = CANVAS_HEIGHT * THUMB_SCALE;
 
 export function ThumbnailRail({ pages, current, onSelect }: Props) {
+  const activeRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    activeRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, [current]);
+
   return (
     <ScrollArea className="h-full border-r bg-card">
       <aside className="flex flex-col gap-2.5 p-3">
@@ -23,6 +30,7 @@ export function ThumbnailRail({ pages, current, onSelect }: Props) {
           return (
             <button
               key={i}
+              ref={active ? activeRef : undefined}
               onClick={() => onSelect(i)}
               aria-label={`Go to page ${i + 1}`}
               aria-current={active ? 'true' : undefined}

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

@@ -6,7 +6,7 @@ const POPOVER_W = 320;
 const POPOVER_H = 180;
 
 export function CommentPopover() {
-  const { pending, setPending, add } = useInspector();
+  const { pending, setPending, add, cancel } = useInspector();
   const [text, setText] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -16,14 +16,6 @@ export function CommentPopover() {
     taRef.current?.focus();
   }, []);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setPending(null);
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [setPending]);
-
   if (!pending) return null;
 
   const left = clamp(pending.clickX + 12, 8, window.innerWidth - POPOVER_W - 8);
@@ -55,7 +47,7 @@ export function CommentPopover() {
         <button
           type="button"
           className="text-xs text-muted-foreground hover:text-foreground"
-          onClick={() => setPending(null)}
+          onClick={cancel}
         >
           ✕
         </button>
@@ -77,7 +69,7 @@ export function CommentPopover() {
       <div className="mt-2 flex items-center justify-end gap-2">
         <button
           type="button"
-          onClick={() => setPending(null)}
+          onClick={cancel}
           className="rounded border px-2 py-1 text-xs hover:bg-muted"
         >
           Cancel

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

@@ -6,7 +6,7 @@ import { useInspector } from './InspectorProvider';
 type Highlight = { rect: DOMRect; hit: SlideSourceHit };
 
 export function InspectOverlay() {
-  const { active, slideId, pending, setPending } = useInspector();
+  const { active, slideId, pending, setPending, cancel } = useInspector();
   const overlayRef = useRef<HTMLDivElement>(null);
   const [hover, setHover] = useState<Highlight | null>(null);
 
@@ -16,6 +16,14 @@ export function InspectOverlay() {
       return;
     }
 
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        cancel();
+      }
+    };
+
     const onMove = (e: PointerEvent) => {
       if (pending) return;
       const el = pickElement(e.clientX, e.clientY);
@@ -34,23 +42,26 @@ export function InspectOverlay() {
       if (!hit) return;
       e.preventDefault();
       e.stopPropagation();
+      const anchorRect = hit.anchor.getBoundingClientRect();
       setPending({
         line: hit.line,
         column: hit.column,
-        anchorRect: hit.anchor.getBoundingClientRect(),
+        anchorRect,
         clickX: e.clientX,
         clickY: e.clientY,
       });
-      setHover(null);
+      setHover({ rect: anchorRect, hit });
     };
 
     window.addEventListener('pointermove', onMove, true);
     window.addEventListener('click', onClick, true);
+    window.addEventListener('keydown', onKey, true);
     return () => {
       window.removeEventListener('pointermove', onMove, true);
       window.removeEventListener('click', onClick, true);
+      window.removeEventListener('keydown', onKey, true);
     };
-  }, [active, slideId, pending, setPending]);
+  }, [active, slideId, pending, setPending, cancel]);
 
   if (!active) return null;
 
@@ -88,6 +99,7 @@ function pickElement(x: number, y: number): HTMLElement | null {
   for (const el of stack) {
     if (!(el instanceof HTMLElement)) continue;
     if (el.closest('[data-inspector-ui]')) continue;
+    if (!el.closest('[data-inspector-root]')) continue;
     return el;
   }
   return null;

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

@@ -15,6 +15,7 @@ type InspectorCtx = {
   slideId: string;
   active: boolean;
   toggle: () => void;
+  cancel: () => void;
   comments: SlideComment[];
   error: string | null;
   refetch: () => Promise<void>;
@@ -44,11 +45,17 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     });
   }, []);
 
+  const cancel = useCallback(() => {
+    setActive(false);
+    setPending(null);
+  }, []);
+
   const value = useMemo<InspectorCtx>(
     () => ({
       slideId,
       active,
       toggle,
+      cancel,
       comments,
       error,
       refetch,
@@ -57,7 +64,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       pending,
       setPending,
     }),
-    [slideId, active, toggle, comments, error, refetch, add, remove, pending],
+    [slideId, active, toggle, cancel, comments, error, refetch, add, remove, pending],
   );
 
   return <Ctx.Provider value={value}>{children}</Ctx.Provider>;

package/src/app/components/sidebar/FolderItem.tsx

@@ -114,10 +114,7 @@ export function FolderItem({
             </button>
           </PopoverTrigger>
           <PopoverContent side="right" align="start" className="w-auto p-2">
-            <IconPicker
-              value={row.folder.icon}
-              onChange={(next) => row.onChangeIcon(next)}
-            />
+            <IconPicker value={row.folder.icon} onChange={(next) => row.onChangeIcon(next)} />
           </PopoverContent>
         </Popover>
       ) : (