@open-slide/core 0.0.2 → 0.0.4

package/src/app/routes/Slide.tsx

@@ -0,0 +1,298 @@
+import { ChevronLeft, Download, Loader2, Pencil, Play } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { CommentWidget } from '@/components/inspector/CommentWidget';
+import { InspectOverlay } from '@/components/inspector/InspectOverlay';
+import { InspectorProvider, InspectToggleButton } from '@/components/inspector/InspectorProvider';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useFolders } from '@/lib/folders';
+import { cn } from '@/lib/utils';
+import { ClickNavZones } from '../components/ClickNavZones';
+import { Player } from '../components/Player';
+import { SlideCanvas } from '../components/SlideCanvas';
+import { ThumbnailRail } from '../components/ThumbnailRail';
+import { exportSlideAsHtml } from '../lib/export-html';
+import type { SlideModule } from '../lib/sdk';
+import { loadSlide } from '../lib/slides';
+
+export function Slide() {
+  const { slideId = '' } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const { renameSlide } = useFolders();
+
+  useEffect(() => {
+    let cancelled = false;
+    setSlide(null);
+    setError(null);
+    loadSlide(slideId)
+      .then((mod) => {
+        if (!cancelled) setSlide(mod);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(String(e?.message ?? e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slideId]);
+
+  const pages = useMemo(() => slide?.default ?? [], [slide]);
+  const pageCount = pages.length;
+  const rawIndex = Number(searchParams.get('p') ?? '1') - 1;
+  const index = Number.isFinite(rawIndex) ? Math.max(0, Math.min(pageCount - 1, rawIndex)) : 0;
+
+  const goTo = useCallback(
+    (i: number) => {
+      const clamped = Math.max(0, Math.min(pageCount - 1, i));
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set('p', String(clamped + 1));
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [pageCount, setSearchParams],
+  );
+
+  useEffect(() => {
+    if (playing) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLElement && e.target.matches('input, textarea')) return;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown') {
+        e.preventDefault();
+        goTo(index + 1);
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
+        e.preventDefault();
+        goTo(index - 1);
+      } else if (e.key === 'f' || e.key === 'F') {
+        setPlaying(true);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [index, goTo, playing]);
+
+  if (error) {
+    return (
+      <div className="mx-auto max-w-3xl px-8 py-16 text-muted-foreground">
+        <Link to="/" className="text-sm font-medium text-primary hover:underline">
+          ← Home
+        </Link>
+        <h2 className="mt-4 text-xl font-semibold text-foreground">Failed to load slide</h2>
+        <pre className="mt-4 overflow-auto rounded-md border bg-card p-4 text-xs whitespace-pre-wrap shadow-sm">
+          {error}
+        </pre>
+      </div>
+    );
+  }
+
+  if (!slide) {
+    return (
+      <div className="mx-auto max-w-3xl px-8 py-16 text-sm text-muted-foreground">
+        Loading {slideId}…
+      </div>
+    );
+  }
+
+  if (pageCount === 0) {
+    return (
+      <div className="mx-auto max-w-3xl px-8 py-16 text-muted-foreground">
+        <Link to="/" className="text-sm font-medium text-primary hover:underline">
+          ← Home
+        </Link>
+        <h2 className="mt-4 text-xl font-semibold text-foreground">Empty slide</h2>
+        <p className="mt-2 text-sm">
+          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+            slides/{slideId}/index.tsx
+          </code>{' '}
+          must{' '}
+          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">export default</code> a
+          non-empty array of components.
+        </p>
+      </div>
+    );
+  }
+
+  if (playing) {
+    return (
+      <Player pages={pages} index={index} onIndexChange={goTo} onExit={() => setPlaying(false)} />
+    );
+  }
+
+  const CurrentPage = pages[index];
+  const title = slide.meta?.title ?? slideId;
+
+  return (
+    <InspectorProvider slideId={slideId}>
+      <div className="flex h-screen flex-col overflow-hidden bg-background">
+        <header className="flex shrink-0 items-center gap-2 border-b bg-card px-3 py-2 md:gap-4 md:px-5 md:py-3">
+          <Button asChild variant="ghost" size="sm" className="px-2 md:px-3">
+            <Link to="/">
+              <ChevronLeft className="size-4" />
+              <span className="hidden md:inline">Home</span>
+            </Link>
+          </Button>
+          <Separator orientation="vertical" className="hidden h-5 md:block" />
+          <InlineTitleEditor title={title} onSubmit={(next) => renameSlide(slideId, next)} />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="px-2 md:px-3"
+            disabled={exporting}
+            onClick={async () => {
+              if (!slide || exporting) return;
+              setExporting(true);
+              try {
+                await exportSlideAsHtml(slide, slideId);
+              } catch (err) {
+                console.error('[open-slide] export failed', err);
+              } finally {
+                setExporting(false);
+              }
+            }}
+            title="Download as HTML"
+          >
+            {exporting ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Download className="size-4" />
+            )}
+            <span className="hidden md:inline">Download</span>
+          </Button>
+          <InspectToggleButton />
+          <Button size="sm" onClick={() => setPlaying(true)} className="px-2 md:px-3">
+            <Play className="size-4" />
+            <span className="hidden md:inline">Play</span>
+            <kbd className="ml-1 hidden rounded bg-primary-foreground/20 px-1 text-[10px] md:inline">
+              F
+            </kbd>
+          </Button>
+        </header>
+
+        <div className="flex min-h-0 flex-1">
+          <div className="hidden w-[17rem] shrink-0 md:block">
+            <ThumbnailRail pages={pages} current={index} onSelect={goTo} />
+          </div>
+          <main
+            data-inspector-root
+            className="relative min-h-0 min-w-0 flex-1 bg-background p-2 md:p-8"
+          >
+            <SlideCanvas>
+              <CurrentPage />
+            </SlideCanvas>
+            <ClickNavZones
+              onPrev={() => goTo(index - 1)}
+              onNext={() => goTo(index + 1)}
+              canPrev={index > 0}
+              canNext={index < pageCount - 1}
+            />
+            <InspectOverlay />
+            <div className="pointer-events-none absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/50 px-2.5 py-0.5 text-[11px] font-medium tabular-nums text-white backdrop-blur md:hidden">
+              {index + 1} / {pageCount}
+            </div>
+          </main>
+        </div>
+
+        <CommentWidget />
+      </div>
+    </InspectorProvider>
+  );
+}
+
+function InlineTitleEditor({
+  title,
+  onSubmit,
+}: {
+  title: string;
+  onSubmit: (name: string) => Promise<void> | void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(title);
+  const [saving, setSaving] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (!editing) setValue(title);
+  }, [title, editing]);
+
+  useEffect(() => {
+    if (editing) {
+      queueMicrotask(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [editing]);
+
+  const commit = async () => {
+    const trimmed = value.trim();
+    if (!trimmed || trimmed === title) {
+      setValue(title);
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    try {
+      await onSubmit(trimmed);
+      setEditing(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancel = () => {
+    setValue(title);
+    setEditing(false);
+  };
+
+  if (editing) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <input
+          ref={inputRef}
+          value={value}
+          disabled={saving}
+          onChange={(e) => setValue(e.target.value)}
+          onBlur={() => {
+            if (!saving) commit();
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              commit();
+            } else if (e.key === 'Escape') {
+              e.preventDefault();
+              cancel();
+            }
+          }}
+          maxLength={80}
+          className="min-w-0 max-w-[min(32rem,90%)] rounded-md border bg-background px-2 py-0.5 text-center text-xs font-semibold tracking-tight outline-none ring-ring/40 focus:ring-2 md:text-sm"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="group/title flex flex-1 items-center justify-center gap-1.5 min-w-0">
+      <h1 className="truncate text-xs font-semibold tracking-tight md:text-sm">{title}</h1>
+      <button
+        type="button"
+        onClick={() => setEditing(true)}
+        aria-label="Rename slide"
+        className={cn(
+          'flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-opacity hover:bg-muted hover:text-foreground',
+          'opacity-0 group-hover/title:opacity-100 focus-visible:opacity-100',
+        )}
+      >
+        <Pencil className="size-3.5" />
+      </button>
+    </div>
+  );
+}

package/src/app/virtual.d.ts

@@ -1,7 +1,7 @@
-declare module 'virtual:open-slide/decks' {
-  import type { DeckModule } from './lib/sdk';
-  export const deckIds: string[];
-  export function loadDeck(id: string): Promise<DeckModule>;
+declare module 'virtual:open-slide/slides' {
+  import type { SlideModule } from './lib/sdk';
+  export const slideIds: string[];
+  export function loadSlide(id: string): Promise<SlideModule>;
 }
 
 declare module 'virtual:open-slide/config' {

package/dist/config-Opp2R1Jf.js

@@ -1,335 +0,0 @@
-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 } },
-		optimizeDeps: {
-			entries: [path.join(APP_ROOT, "main.tsx")],
-			include: [
-				"react-router-dom",
-				"radix-ui",
-				"lucide-react",
-				"clsx",
-				"tailwind-merge",
-				"class-variance-authority"
-			]
-		},
-		server: {
-			port: config.port ?? 5173,
-			fs: { allow: [
-				APP_ROOT,
-				userCwd,
-				slidesAbs
-			] }
-		},
-		build: {
-			outDir: path.resolve(userCwd, "dist"),
-			emptyOutDir: true
-		}
-	};
-}
-
-//#endregion
-export { createViteConfig };

package/src/app/lib/decks.ts

@@ -1,8 +0,0 @@
-import type { DeckModule } from './sdk';
-import { deckIds as ids, loadDeck as load } from 'virtual:open-slide/decks';
-
-export const deckIds: string[] = ids;
-
-export async function loadDeck(id: string): Promise<DeckModule> {
-  return load(id);
-}