@open-slide/core 0.0.3 → 0.0.5

package/src/app/routes/Slide.tsx

@@ -1,16 +1,20 @@
-import { ChevronLeft, ChevronRight, Play } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+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 { loadSlide } from '../lib/slides';
+import { exportSlideAsHtml } from '../lib/export-html';
 import type { SlideModule } from '../lib/sdk';
+import { loadSlide } from '../lib/slides';
 
 export function Slide() {
   const { slideId = '' } = useParams();
@@ -18,6 +22,8 @@ export function Slide() {
   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;
@@ -59,10 +65,10 @@ export function Slide() {
     if (playing) return;
     const onKey = (e: KeyboardEvent) => {
       if (e.target instanceof HTMLElement && e.target.matches('input, textarea')) return;
-      if (e.key === 'ArrowRight' || e.key === 'PageDown') {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown') {
         e.preventDefault();
         goTo(index + 1);
-      } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
         e.preventDefault();
         goTo(index - 1);
       } else if (e.key === 'f' || e.key === 'F') {
@@ -126,60 +132,167 @@ export function Slide() {
   return (
     <InspectorProvider slideId={slideId}>
       <div className="flex h-screen flex-col overflow-hidden bg-background">
-        <header className="flex shrink-0 items-center gap-4 border-b bg-card px-5 py-3">
-          <Button asChild variant="ghost" size="sm">
+        <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" />
-              Home
+              <span className="hidden md:inline">Home</span>
             </Link>
           </Button>
-          <Separator orientation="vertical" className="h-5" />
-          <h1 className="flex-1 text-center text-sm font-semibold tracking-tight">{title}</h1>
+          <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)}>
+          <Button size="sm" onClick={() => setPlaying(true)} className="px-2 md:px-3">
             <Play className="size-4" />
-            Play <kbd className="ml-1 rounded bg-primary-foreground/20 px-1 text-[10px]">F</kbd>
+            <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="w-[17rem] shrink-0">
+          <div className="hidden w-[17rem] shrink-0 md:block">
             <ThumbnailRail pages={pages} current={index} onSelect={goTo} />
           </div>
-          <main className="relative min-h-0 min-w-0 flex-1 bg-background p-8">
+          <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>
 
-        <footer className="flex shrink-0 items-center justify-center gap-4 border-t bg-card p-3">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => goTo(index - 1)}
-            disabled={index === 0}
-          >
-            <ChevronLeft className="size-4" />
-            Prev
-          </Button>
-          <span className="min-w-16 text-center text-sm text-muted-foreground tabular-nums">
-            {index + 1} / {pageCount}
-          </span>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => goTo(index + 1)}
-            disabled={index === pageCount - 1}
-          >
-            Next
-            <ChevronRight className="size-4" />
-          </Button>
-        </footer>
-
         <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/dist/build-Cav2jYyI.js

@@ -1,14 +0,0 @@
-import { createViteConfig } from "./config-g-uy_P5U.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/dev-CFmlBbLh.js

@@ -1,14 +0,0 @@
-import { createViteConfig } from "./config-g-uy_P5U.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/preview-CotwHU_d.js

@@ -1,12 +0,0 @@
-import { createViteConfig } from "./config-g-uy_P5U.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 };