@open-slide/core 0.0.2 → 0.0.4

package/dist/index.d.ts

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

package/dist/{preview-61Aawrlg.js → preview-DCrD9X36.js}

@@ -1,4 +1,4 @@
-import { createViteConfig } from "./config-Opp2R1Jf.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-Opp2R1Jf.js";
+import { createViteConfig } from "../config-DF58h0l4.js";
 
 export { createViteConfig };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-slide/core",
-  "version": "0.0.2",
-  "description": "Runtime and CLI for open-slide — write decks in slides/, we handle the rest.",
+  "version": "0.0.4",
+  "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
     ".": {
@@ -14,16 +14,17 @@
     }
   },
   "bin": {
-    "open-slide": "./dist/cli/bin.js"
+    "open-slide": "./bin.js"
   },
   "files": [
+    "bin.js",
     "dist",
     "src/app",
     "README.md"
   ],
   "scripts": {
     "build": "tsdown",
-    "check": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
     "prepack": "pnpm build"
   },
   "engines": {
@@ -45,7 +46,9 @@
     "@vitejs/plugin-react": "^4.3.3",
     "class-variance-authority": "^0.7.1",
     "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/App.tsx

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

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

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
-import type { SlidePage } from '../lib/sdk';
+import type { Page } from '../lib/sdk';
 import { SlideCanvas } from './SlideCanvas';
 
 type Props = {
-  pages: SlidePage[];
+  pages: Page[];
   index: number;
   onIndexChange: (index: number) => void;
   onExit: () => void;
@@ -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') {
@@ -51,11 +56,25 @@ export function Player({ pages, index, onIndexChange, onExit }: Props) {
     return () => window.removeEventListener('keydown', onKey);
   }, [index, pages.length, onIndexChange, onExit]);
 
-  const Page = pages[index];
+  const PageComp = 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 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,11 +1,11 @@
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import type { SlidePage } from '../lib/sdk';
+import type { Page } from '../lib/sdk';
 import { SlideCanvas } from './SlideCanvas';
 import { CANVAS_WIDTH, CANVAS_HEIGHT } from '../lib/sdk';
 
 type Props = {
-  pages: SlidePage[];
+  pages: Page[];
   current: number;
   onSelect: (index: number) => void;
 };
@@ -18,13 +18,13 @@ export function ThumbnailRail({ pages, current, onSelect }: Props) {
   return (
     <ScrollArea className="h-full border-r bg-card">
       <aside className="flex flex-col gap-2.5 p-3">
-        {pages.map((Page, i) => {
+        {pages.map((PageComp, i) => {
           const active = i === current;
           return (
             <button
               key={i}
               onClick={() => onSelect(i)}
-              aria-label={`Go to slide ${i + 1}`}
+              aria-label={`Go to page ${i + 1}`}
               aria-current={active ? 'true' : undefined}
               className={cn(
                 'flex items-center gap-2.5 rounded-lg border-2 border-transparent p-1.5 text-left transition-colors',
@@ -45,7 +45,7 @@ export function ThumbnailRail({ pages, current, onSelect }: Props) {
                 style={{ width: THUMB_WIDTH, height: THUMB_HEIGHT }}
               >
                 <SlideCanvas scale={THUMB_SCALE} center={false} flat>
-                  <Page />
+                  <PageComp />
                 </SlideCanvas>
               </div>
             </button>

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, deckId, pending, setPending } = useInspector();
+  const { active, slideId, pending, setPending, cancel } = useInspector();
   const overlayRef = useRef<HTMLDivElement>(null);
   const [hover, setHover] = useState<Highlight | null>(null);
 
@@ -16,11 +16,19 @@ 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);
       if (!el) return setHover(null);
-      const hit = findSlideSource(el, deckId);
+      const hit = findSlideSource(el, slideId);
       if (!hit) return setHover(null);
       setHover({ rect: hit.anchor.getBoundingClientRect(), hit });
     };
@@ -30,7 +38,7 @@ export function InspectOverlay() {
       if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) return;
       const el = pickElement(e.clientX, e.clientY);
       if (!el) return;
-      const hit = findSlideSource(el, deckId);
+      const hit = findSlideSource(el, slideId);
       if (!hit) return;
       e.preventDefault();
       e.stopPropagation();
@@ -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, deckId, 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

@@ -12,9 +12,10 @@ export type PendingTarget = {
 };
 
 type InspectorCtx = {
-  deckId: string;
+  slideId: string;
   active: boolean;
   toggle: () => void;
+  cancel: () => void;
   comments: SlideComment[];
   error: string | null;
   refetch: () => Promise<void>;
@@ -32,10 +33,10 @@ export function useInspector(): InspectorCtx {
   return v;
 }
 
-export function InspectorProvider({ deckId, children }: { deckId: string; children: ReactNode }) {
+export function InspectorProvider({ slideId, children }: { slideId: string; children: ReactNode }) {
   const [active, setActive] = useState(false);
   const [pending, setPending] = useState<PendingTarget | null>(null);
-  const { comments, error, refetch, add, remove } = useComments(deckId);
+  const { comments, error, refetch, add, remove } = useComments(slideId);
 
   const toggle = useCallback(() => {
     setActive((a) => {
@@ -44,11 +45,17 @@ export function InspectorProvider({ deckId, children }: { deckId: string; childr
     });
   }, []);
 
+  const cancel = useCallback(() => {
+    setActive(false);
+    setPending(null);
+  }, []);
+
   const value = useMemo<InspectorCtx>(
     () => ({
-      deckId,
+      slideId,
       active,
       toggle,
+      cancel,
       comments,
       error,
       refetch,
@@ -57,7 +64,7 @@ export function InspectorProvider({ deckId, children }: { deckId: string; childr
       pending,
       setPending,
     }),
-    [deckId, 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

@@ -0,0 +1,188 @@
+import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import type { Folder, FolderIcon } from '@/lib/sdk';
+import { cn } from '@/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { IconPicker } from './IconPicker';
+
+export const SLIDE_DND_MIME = 'application/x-slide-id';
+
+export function FolderIconChip({ icon, className }: { icon: FolderIcon; className?: string }) {
+  if (icon.type === 'emoji') {
+    return (
+      <span
+        className={cn(
+          'inline-flex size-5 items-center justify-center text-base leading-none',
+          className,
+        )}
+      >
+        {icon.value}
+      </span>
+    );
+  }
+  return (
+    <span
+      className={cn('inline-block size-4 rounded-[4px] ring-1 ring-black/10', className)}
+      style={{ background: icon.value }}
+    />
+  );
+}
+
+type Row =
+  | {
+      kind: 'folder';
+      folder: Folder;
+      onRename: (name: string) => void;
+      onChangeIcon: (icon: FolderIcon) => void;
+      onDelete: () => void;
+    }
+  | {
+      kind: 'draft';
+    };
+
+export function FolderItem({
+  row,
+  count,
+  selected,
+  onSelect,
+  onDropSlide,
+}: {
+  row: Row;
+  count: number;
+  selected: boolean;
+  onSelect: () => void;
+  onDropSlide: (slideId: string) => void;
+}) {
+  const [renaming, setRenaming] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [draftName, setDraftName] = useState(row.kind === 'folder' ? row.folder.name : '');
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (e.dataTransfer.types.includes(SLIDE_DND_MIME)) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      setDragOver(true);
+    }
+  };
+  const handleDragLeave = () => setDragOver(false);
+  const handleDrop = (e: React.DragEvent) => {
+    const slideId = e.dataTransfer.getData(SLIDE_DND_MIME);
+    setDragOver(false);
+    if (!slideId) return;
+    e.preventDefault();
+    onDropSlide(slideId);
+  };
+
+  const icon =
+    row.kind === 'draft' ? ({ type: 'emoji', value: '📝' } satisfies FolderIcon) : row.folder.icon;
+  const label = row.kind === 'draft' ? 'Draft' : row.folder.name;
+
+  const commitRename = () => {
+    if (row.kind !== 'folder') return;
+    const trimmed = draftName.trim();
+    if (trimmed && trimmed !== row.folder.name) row.onRename(trimmed);
+    setRenaming(false);
+  };
+
+  return (
+    <div
+      className={cn(
+        'group relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+        selected ? 'bg-muted text-foreground' : 'text-foreground/80 hover:bg-muted/60',
+        dragOver && 'ring-2 ring-primary ring-offset-1 ring-offset-background',
+      )}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {row.kind === 'folder' ? (
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
+              aria-label="Change icon"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <FolderIconChip icon={icon} />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent side="right" align="start" className="w-auto p-2">
+            <IconPicker value={row.folder.icon} onChange={(next) => row.onChangeIcon(next)} />
+          </PopoverContent>
+        </Popover>
+      ) : (
+        <span className="flex size-5 shrink-0 items-center justify-center">
+          <FolderIconChip icon={icon} />
+        </span>
+      )}
+
+      {renaming && row.kind === 'folder' ? (
+        <input
+          autoFocus
+          value={draftName}
+          onChange={(e) => setDraftName(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') commitRename();
+            if (e.key === 'Escape') {
+              setDraftName(row.folder.name);
+              setRenaming(false);
+            }
+          }}
+          maxLength={40}
+          className="min-w-0 flex-1 rounded-sm bg-background px-1 text-sm outline-none ring-1 ring-ring/40"
+        />
+      ) : (
+        <button type="button" onClick={onSelect} className="min-w-0 flex-1 truncate text-left">
+          {label}
+        </button>
+      )}
+
+      <span
+        className={cn(
+          'shrink-0 text-xs tabular-nums text-muted-foreground',
+          count === 0 && 'opacity-0 group-hover:opacity-100',
+        )}
+      >
+        {count}
+      </span>
+
+      {row.kind === 'folder' && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              onClick={(e) => e.stopPropagation()}
+              className="size-5 shrink-0 rounded opacity-0 transition-opacity hover:bg-muted-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
+              aria-label="Folder actions"
+            >
+              <MoreHorizontal className="mx-auto size-3.5" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-[140px]">
+            <DropdownMenuItem
+              onSelect={() => {
+                setDraftName(row.folder.name);
+                setRenaming(true);
+              }}
+            >
+              <Pencil />
+              Rename
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" onSelect={() => row.onDelete()}>
+              <Trash2 />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+import EmojiPicker, { EmojiStyle, Theme } from 'emoji-picker-react';
+import type { FolderIcon } from '@/lib/sdk';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export const PRESET_COLORS = [
+  '#8b5cf6',
+  '#6366f1',
+  '#3b82f6',
+  '#10b981',
+  '#f59e0b',
+  '#ef4444',
+  '#ec4899',
+  '#64748b',
+];
+
+export function IconPicker({
+  value,
+  onChange,
+}: {
+  value: FolderIcon;
+  onChange: (icon: FolderIcon) => void;
+}) {
+  return (
+    <Tabs defaultValue={value.type} className="w-[320px]">
+      <TabsList className="w-full">
+        <TabsTrigger value="emoji">Emoji</TabsTrigger>
+        <TabsTrigger value="color">Color</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="emoji">
+        <EmojiPicker
+          lazyLoadEmojis
+          emojiStyle={EmojiStyle.NATIVE}
+          theme={Theme.AUTO}
+          width="100%"
+          height={360}
+          onEmojiClick={(data) => onChange({ type: 'emoji', value: data.emoji })}
+          previewConfig={{ showPreview: false }}
+          skinTonesDisabled
+        />
+      </TabsContent>
+
+      <TabsContent value="color">
+        <div className="grid grid-cols-8 gap-1.5 py-2">
+          {PRESET_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => onChange({ type: 'color', value: c })}
+              className="size-6 rounded-md ring-1 ring-black/10 transition-transform hover:scale-110"
+              style={{ background: c }}
+              aria-label={c}
+            />
+          ))}
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}