@open-slide/core 0.0.1

package/dist/build-0xQdMJb7.js

@@ -0,0 +1,14 @@
+import { createViteConfig } from "./config-Dk8ASJ8X.js";
+import { build as build$1 } from "vite";
+
+//#region src/cli/build.ts
+async function build() {
+	const config = await createViteConfig({
+		userCwd: process.cwd(),
+		mode: "build"
+	});
+	await build$1(config);
+}
+
+//#endregion
+export { build };

package/dist/cli/bin.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/cli/bin.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+//#region src/cli/run.ts
+const HELP = `open-slide — author decks, we handle the Vite/React stack
+
+Usage:
+  open-slide dev              Start dev server
+  open-slide build            Build a static deck 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;
+}
+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-BN2k5C-N.js");
+		await dev();
+		return;
+	}
+	if (cmd === "build") {
+		const { build } = await import("../build-0xQdMJb7.js");
+		await build();
+		return;
+	}
+	if (cmd === "preview") {
+		const { preview } = await import("../preview-B-xUqFKf.js");
+		await preview();
+		return;
+	}
+	process.stderr.write(`Unknown command: ${cmd}\n\n${HELP}`);
+	process.exit(1);
+}
+
+//#endregion
+//#region src/cli/bin.ts
+run(process.argv.slice(2)).catch((err) => {
+	process.stderr.write(`${err instanceof Error ? err.message : String(err)}\n`);
+	process.exit(1);
+});
+
+//#endregion

package/dist/config-Dk8ASJ8X.js

@@ -0,0 +1,324 @@
+import fs, { readFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { randomUUID } from "node:crypto";
+import fg from "fast-glob";
+
+//#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 DECK_ID_RE = /^[a-z0-9_-]+$/i;
+function b64urlEncode(s) {
+	return Buffer.from(s, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function b64urlDecode(s) {
+	const pad = s.length % 4 === 0 ? "" : "=".repeat(4 - s.length % 4);
+	return Buffer.from(s.replace(/-/g, "+").replace(/_/g, "/") + pad, "base64").toString("utf8");
+}
+async function readBody(req) {
+	return await new Promise((resolve, reject) => {
+		const chunks = [];
+		req.on("data", (c) => chunks.push(c));
+		req.on("end", () => {
+			const raw = Buffer.concat(chunks).toString("utf8");
+			if (!raw) return resolve({});
+			try {
+				resolve(JSON.parse(raw));
+			} catch (e) {
+				reject(e);
+			}
+		});
+		req.on("error", reject);
+	});
+}
+function json(res, status, body) {
+	res.statusCode = status;
+	res.setHeader("content-type", "application/json");
+	res.end(JSON.stringify(body));
+}
+function resolveSlidePath(userCwd, slidesDir, deckId) {
+	if (!DECK_ID_RE.test(deckId)) return null;
+	const slidesRoot = path.resolve(userCwd, slidesDir);
+	const full = path.resolve(slidesRoot, deckId, "index.tsx");
+	if (!full.startsWith(slidesRoot + path.sep)) return null;
+	return full;
+}
+function parseMarkers(source) {
+	const comments = [];
+	const lines = source.split("\n");
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		MARKER_RE.lastIndex = 0;
+		const m = MARKER_RE.exec(line);
+		if (!m) continue;
+		const [, id, ts, textB64] = m;
+		try {
+			const payload = JSON.parse(b64urlDecode(textB64));
+			comments.push({
+				id,
+				line: i + 1,
+				ts,
+				note: payload.note,
+				hint: payload.hint
+			});
+		} catch {}
+	}
+	return comments;
+}
+function newId() {
+	return `c-${randomUUID().replace(/-/g, "").slice(0, 8)}`;
+}
+function isJsxOpeningLine(line) {
+	const t = line.trimStart();
+	if (!t.startsWith("<")) return false;
+	if (t.startsWith("</")) return false;
+	if (t.startsWith("<!")) return false;
+	return true;
+}
+/**
+* Find the line index to insert a JSX comment above.
+*
+* Babel's `_debugSource.lineNumber/columnNumber` points at the `<` of a JSX
+* opening tag, but the value can go stale (HMR races) or, per reports, point
+* at a line that's not actually a JSX boundary — e.g. inside an inline style
+* object. Verify with the source of truth before committing.
+*/
+function findSafeInsertLine(lines, line, column) {
+	const idx = line - 1;
+	if (idx < 0 || idx >= lines.length) return null;
+	if (column !== void 0 && lines[idx].charAt(column) === "<") return idx;
+	if (isJsxOpeningLine(lines[idx])) return idx;
+	const WINDOW = 30;
+	for (let i = idx - 1; i >= Math.max(0, idx - WINDOW); i--) if (isJsxOpeningLine(lines[i])) return i;
+	for (let i = idx + 1; i < Math.min(lines.length, idx + WINDOW); i++) if (isJsxOpeningLine(lines[i])) return i;
+	return null;
+}
+function commentsPlugin(opts) {
+	const userCwd = opts.userCwd;
+	const slidesDir = opts.slidesDir ?? "slides";
+	return {
+		name: "open-slide:comments",
+		apply: "serve",
+		configureServer(server) {
+			server.middlewares.use("/__comments", async (req, res, next) => {
+				const url = new URL(req.url ?? "/", "http://local");
+				const method = req.method ?? "GET";
+				try {
+					if (method === "GET" && url.pathname === "/") {
+						const deckId = url.searchParams.get("deckId") ?? "";
+						const file = resolveSlidePath(userCwd, slidesDir, deckId);
+						if (!file) return json(res, 400, { error: "invalid deckId" });
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json(res, 404, { error: "deck not found" });
+						}
+						return json(res, 200, { comments: parseMarkers(source) });
+					}
+					if (method === "POST" && url.pathname === "/add") {
+						const body = await readBody(req);
+						const deckId = body.deckId ?? "";
+						const file = resolveSlidePath(userCwd, slidesDir, deckId);
+						if (!file) return json(res, 400, { error: "invalid deckId" });
+						if (!body.line || body.line < 1) return json(res, 400, { error: "invalid line" });
+						if (!body.text || typeof body.text !== "string") return json(res, 400, { error: "missing text" });
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json(res, 404, { error: "deck not found" });
+						}
+						const lines = source.split("\n");
+						const idx = findSafeInsertLine(lines, body.line, body.column);
+						if (idx === null) return json(res, 422, { error: `could not find a safe JSX boundary near line ${body.line}. Try clicking a different element.` });
+						const indent = lines[idx].match(/^\s*/)?.[0] ?? "";
+						const id = newId();
+						const ts = new Date().toISOString();
+						const payload = b64urlEncode(JSON.stringify({
+							note: body.text,
+							hint: body.hint
+						}));
+						const marker = `${indent}{/* @slide-comment id="${id}" ts="${ts}" text="${payload}" */}`;
+						lines.splice(idx, 0, marker);
+						await fs.writeFile(file, lines.join("\n"), "utf8");
+						return json(res, 200, {
+							id,
+							line: idx + 1
+						});
+					}
+					if (method === "DELETE" && url.pathname.startsWith("/")) {
+						const id = url.pathname.slice(1);
+						if (!/^c-[a-f0-9]+$/.test(id)) return json(res, 400, { error: "invalid id" });
+						const deckId = url.searchParams.get("deckId") ?? "";
+						const file = resolveSlidePath(userCwd, slidesDir, deckId);
+						if (!file) return json(res, 400, { error: "invalid deckId" });
+						let source;
+						try {
+							source = await fs.readFile(file, "utf8");
+						} catch {
+							return json(res, 404, { error: "deck not found" });
+						}
+						const lines = source.split("\n");
+						const idRe = new RegExp(`\\{\\/\\*\\s*@slide-comment\\s+id="${id}"\\s+ts="[^"]+"\\s+text="[A-Za-z0-9_\\-]+={0,2}"\\s*\\*\\/\\}`);
+						const hit = lines.findIndex((l) => idRe.test(l));
+						if (hit === -1) return json(res, 404, { error: "marker not found" });
+						lines.splice(hit, 1);
+						await fs.writeFile(file, lines.join("\n"), "utf8");
+						return json(res, 200, { ok: true });
+					}
+					next();
+				} catch (err) {
+					json(res, 500, { error: String(err.message ?? err) });
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/vite/open-slide-plugin.ts
+const DECKS_VMOD = "virtual:open-slide/decks";
+const CONFIG_VMOD = "virtual:open-slide/config";
+function resolved(id) {
+	return `\0${id}`;
+}
+async function findDecks(userCwd, slidesDir) {
+	const abs = path.resolve(userCwd, slidesDir);
+	if (!existsSync(abs)) return [];
+	const hits = await fg("*/index.{tsx,jsx,ts,js}", {
+		cwd: abs,
+		absolute: true,
+		onlyFiles: true
+	});
+	return hits.sort();
+}
+function toId(absFile, slidesRoot) {
+	const rel = path.relative(slidesRoot, absFile);
+	return rel.split(path.sep)[0];
+}
+function generateDecksModule(files, slidesRoot, isDev) {
+	const entries = files.map((abs) => {
+		const id = toId(abs, slidesRoot);
+		const importPath = isDev ? `/@fs${abs}` : abs;
+		return {
+			id,
+			importPath
+		};
+	});
+	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");
+	return `// virtual:open-slide/decks — generated
+export const deckIds = ${ids};
+
+export async function loadDeck(id) {
+  switch (id) {
+${cases}
+    default: throw new Error('Deck not found: ' + id);
+  }
+}
+`;
+}
+function openSlidePlugin(opts) {
+	const { userCwd, config } = opts;
+	const slidesDir = config.slidesDir ?? "slides";
+	const slidesRoot = path.resolve(userCwd, slidesDir);
+	let isDev = false;
+	return {
+		name: "open-slide",
+		config(_c, env) {
+			isDev = env.command === "serve";
+			return { server: { fs: { allow: [userCwd] } } };
+		},
+		resolveId(id) {
+			if (id === DECKS_VMOD) return resolved(DECKS_VMOD);
+			if (id === CONFIG_VMOD) return resolved(CONFIG_VMOD);
+			return null;
+		},
+		async load(id) {
+			if (id === resolved(DECKS_VMOD)) {
+				const files = await findDecks(userCwd, slidesDir);
+				return generateDecksModule(files, slidesRoot, isDev);
+			}
+			if (id === resolved(CONFIG_VMOD)) return `export default ${JSON.stringify(config)};\n`;
+			return null;
+		},
+		configureServer(server) {
+			const reload = () => {
+				const mod = server.moduleGraph.getModuleById(resolved(DECKS_VMOD));
+				if (mod) server.moduleGraph.invalidateModule(mod);
+				server.ws.send({ type: "full-reload" });
+			};
+			server.watcher.add(path.join(slidesRoot, "*"));
+			server.watcher.on("add", (p) => {
+				if (p.startsWith(slidesRoot)) reload();
+			});
+			server.watcher.on("unlink", (p) => {
+				if (p.startsWith(slidesRoot)) reload();
+			});
+			server.middlewares.use("/__open-slide/title", (_req, res) => {
+				res.setHeader("content-type", "application/json");
+				res.end(JSON.stringify({ title: config.title ?? null }));
+			});
+		}
+	};
+}
+async function loadUserConfig(userCwd) {
+	const file = path.join(userCwd, "open-slide.json");
+	if (!existsSync(file)) return {};
+	const raw = await readFile(file, "utf8");
+	return JSON.parse(raw);
+}
+
+//#endregion
+//#region src/vite/config.ts
+function findPackageRoot(fromFile) {
+	let dir = path.dirname(fromFile);
+	while (dir !== path.dirname(dir)) {
+		if (existsSync(path.join(dir, "package.json"))) return dir;
+		dir = path.dirname(dir);
+	}
+	throw new Error(`Could not find package.json walking up from ${fromFile}`);
+}
+const PKG_ROOT = findPackageRoot(fileURLToPath(import.meta.url));
+const APP_ROOT = path.join(PKG_ROOT, "src", "app");
+async function createViteConfig(opts) {
+	const userCwd = path.resolve(opts.userCwd);
+	const config = opts.config ?? await loadUserConfig(userCwd);
+	const slidesDir = config.slidesDir ?? "slides";
+	const slidesAbs = path.resolve(userCwd, slidesDir);
+	return {
+		root: APP_ROOT,
+		configFile: false,
+		plugins: [
+			react(),
+			tailwindcss(),
+			openSlidePlugin({
+				userCwd,
+				config
+			}),
+			commentsPlugin({
+				userCwd,
+				slidesDir
+			})
+		],
+		resolve: { alias: { "@": APP_ROOT } },
+		server: {
+			port: config.port ?? 5173,
+			fs: { allow: [
+				APP_ROOT,
+				userCwd,
+				slidesAbs
+			] }
+		},
+		build: {
+			outDir: path.resolve(userCwd, "dist"),
+			emptyOutDir: true
+		}
+	};
+}
+
+//#endregion
+export { createViteConfig };

package/dist/dev-BN2k5C-N.js

@@ -0,0 +1,14 @@
+import { createViteConfig } from "./config-Dk8ASJ8X.js";
+import { createServer } from "vite";
+
+//#region src/cli/dev.ts
+async function dev() {
+	const config = await createViteConfig({ userCwd: process.cwd() });
+	const server = await createServer(config);
+	await server.listen();
+	server.printUrls();
+	server.bindCLIShortcuts({ print: true });
+}
+
+//#endregion
+export { dev };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType } from "react";
+
+//#region src/app/lib/sdk.d.ts
+type SlidePage = ComponentType;
+type DeckMeta = {
+  title?: string;
+  theme?: 'light' | 'dark';
+};
+type DeckModule = {
+  default: SlidePage[];
+  meta?: DeckMeta;
+};
+declare const CANVAS_WIDTH = 1920;
+declare const CANVAS_HEIGHT = 1080;
+
+//#endregion
+export { CANVAS_HEIGHT, CANVAS_WIDTH, DeckMeta, DeckModule, SlidePage };

package/dist/index.js

@@ -0,0 +1,6 @@
+//#region src/app/lib/sdk.ts
+const CANVAS_WIDTH = 1920;
+const CANVAS_HEIGHT = 1080;
+
+//#endregion
+export { CANVAS_HEIGHT, CANVAS_WIDTH };

package/dist/preview-B-xUqFKf.js

@@ -0,0 +1,12 @@
+import { createViteConfig } from "./config-Dk8ASJ8X.js";
+import { preview as preview$1 } from "vite";
+
+//#region src/cli/preview.ts
+async function preview() {
+	const config = await createViteConfig({ userCwd: process.cwd() });
+	const server = await preview$1(config);
+	server.printUrls();
+}
+
+//#endregion
+export { preview };

package/dist/vite/index.d.ts

@@ -0,0 +1,18 @@
+import { InlineConfig } from "vite";
+
+//#region src/vite/open-slide-plugin.d.ts
+type OpenSlideConfig = {
+  title?: string;
+  slidesDir?: string;
+  port?: number;
+}; //#endregion
+//#region src/vite/config.d.ts
+type CreateViteConfigOptions = {
+  userCwd: string;
+  config?: OpenSlideConfig;
+  mode?: 'serve' | 'build';
+};
+declare function createViteConfig(opts: CreateViteConfigOptions): Promise<InlineConfig>;
+
+//#endregion
+export { OpenSlideConfig, createViteConfig };

package/dist/vite/index.js

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

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@open-slide/core",
+  "version": "0.0.1",
+  "description": "Runtime and CLI for open-slide — write decks in slides/, we handle the rest.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js"
+    }
+  },
+  "bin": {
+    "open-slide": "./dist/cli/bin.js"
+  },
+  "files": [
+    "dist",
+    "src/app",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "check": "tsc --noEmit",
+    "prepack": "pnpm build"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "slides",
+    "presentation",
+    "react",
+    "vite"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.2.8",
+    "@tailwindcss/vite": "^4.2.2",
+    "@vitejs/plugin-react": "^4.3.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "fast-glob": "^3.3.2",
+    "lucide-react": "^1.8.0",
+    "radix-ui": "^1.4.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "shadcn": "^4.3.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
+    "vite": "^5.4.10"
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.17",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "tsdown": "^0.9.9",
+    "typescript": "^5.9.3"
+  }
+}

package/src/app/App.tsx

@@ -0,0 +1,14 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Home } from './routes/Home';
+import { Deck } from './routes/Deck';
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/d/:deckId" element={<Deck />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}

package/src/app/components/Player.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react';
+import type { SlidePage } from '../lib/sdk';
+import { SlideCanvas } from './SlideCanvas';
+
+type Props = {
+  pages: SlidePage[];
+  index: number;
+  onIndexChange: (index: number) => void;
+  onExit: () => void;
+};
+
+export function Player({ pages, index, onIndexChange, onExit }: Props) {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    if (document.fullscreenElement !== el) {
+      el.requestFullscreen?.().catch(() => {});
+    }
+    return () => {
+      if (document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
+    };
+  }, []);
+
+  useEffect(() => {
+    const onFsChange = () => {
+      if (!document.fullscreenElement) onExit();
+    };
+    document.addEventListener('fullscreenchange', onFsChange);
+    return () => document.removeEventListener('fullscreenchange', onFsChange);
+  }, [onExit]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
+        e.preventDefault();
+        if (index < pages.length - 1) onIndexChange(index + 1);
+      } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
+        e.preventDefault();
+        if (index > 0) onIndexChange(index - 1);
+      } else if (e.key === 'Escape') {
+        onExit();
+      } else if (e.key === 'Home') {
+        onIndexChange(0);
+      } else if (e.key === 'End') {
+        onIndexChange(pages.length - 1);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [index, pages.length, onIndexChange, onExit]);
+
+  const Page = pages[index];
+
+  return (
+    <div ref={rootRef} className="flex h-screen w-screen items-center justify-center bg-black">
+      <SlideCanvas flat>{Page ? <Page /> : null}</SlideCanvas>
+    </div>
+  );
+}

package/src/app/components/SlideCanvas.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+import { CANVAS_WIDTH, CANVAS_HEIGHT } from '../lib/sdk';
+
+type Props = {
+  children: ReactNode;
+  /** If set, use this scale directly (e.g., thumbnails). Otherwise fit to container. */
+  scale?: number;
+  /** Center the canvas within the container (default true). */
+  center?: boolean;
+  /** Flat mode: no rounded corners or drop shadow. */
+  flat?: boolean;
+  className?: string;
+};
+
+export function SlideCanvas({ children, scale, center = true, flat = false, className }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [fitScale, setFitScale] = useState(1);
+
+  useEffect(() => {
+    if (scale !== undefined) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width === 0 || height === 0) return;
+      setFitScale(Math.min(width / CANVAS_WIDTH, height / CANVAS_HEIGHT));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [scale]);
+
+  const s = scale ?? fitScale;
+  const scaledW = CANVAS_WIDTH * s;
+  const scaledH = CANVAS_HEIGHT * s;
+
+  return (
+    <div ref={containerRef} className={cn('relative h-full w-full overflow-hidden', className)}>
+      <div
+        className={cn(
+          'overflow-hidden bg-white text-black',
+          !flat && 'rounded-md shadow-xl ring-1 ring-black/5',
+        )}
+        style={{
+          width: scaledW,
+          height: scaledH,
+          ...(center
+            ? {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: `translate(-50%, -50%)`,
+              }
+            : {}),
+        }}
+      >
+        <div
+          style={{
+            width: CANVAS_WIDTH,
+            height: CANVAS_HEIGHT,
+            transform: `scale(${s})`,
+            transformOrigin: 'top left',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}