@open-slide/core 0.0.3 → 0.0.4

package/dist/{build-Cav2jYyI.js → build-CuoESF2g.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-g-uy_P5U.js";
+import { createViteConfig } from "./config-DF58h0l4.js";
 import { build as build$1 } from "vite";
 
 //#region src/cli/build.ts

package/dist/cli/bin.js

@@ -30,17 +30,17 @@ async function run(argv) {
 		return;
 	}
 	if (cmd === "dev") {
-		const { dev } = await import("../dev-CFmlBbLh.js");
+		const { dev } = await import("../dev-rlOZacWo.js");
 		await dev();
 		return;
 	}
 	if (cmd === "build") {
-		const { build } = await import("../build-Cav2jYyI.js");
+		const { build } = await import("../build-CuoESF2g.js");
 		await build();
 		return;
 	}
 	if (cmd === "preview") {
-		const { preview } = await import("../preview-CotwHU_d.js");
+		const { preview } = await import("../preview-DCrD9X36.js");
 		await preview();
 		return;
 	}

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-CFmlBbLh.js → dev-rlOZacWo.js}

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

package/dist/{preview-CotwHU_d.js → preview-DCrD9X36.js}

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

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.4",
   "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": {
@@ -48,6 +48,7 @@
     "clsx": "^2.1.1",
     "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,22 @@ 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/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);
@@ -46,11 +54,13 @@ export function InspectOverlay() {
 
     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 +98,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>
       ) : (

package/src/app/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import { XIcon } from 'lucide-react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import type * as React from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};