@open-slide/core 0.0.7 → 0.0.9

package/src/app/routes/Slide.tsx

@@ -1,10 +1,17 @@
-import { ChevronLeft, Download, FileCode2, Loader2, Pencil, Play } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Link, useParams, useSearchParams } from 'react-router-dom';
 import config from 'virtual:open-slide/config';
+import { ChevronLeft, Download, FileCode2, FileText, Loader2, Pencil, Play } from 'lucide-react';
+import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
 import { CommentWidget } from '@/components/inspector/CommentWidget';
 import { InspectOverlay } from '@/components/inspector/InspectOverlay';
-import { InspectorProvider, InspectToggleButton } from '@/components/inspector/InspectorProvider';
+import { InspectorPanel } from '@/components/inspector/InspectorPanel';
+import {
+  InspectorProvider,
+  InspectToggleButton,
+  useInspector,
+} from '@/components/inspector/InspectorProvider';
+import { SaveBar } from '@/components/inspector/SaveBar';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -14,12 +21,15 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Separator } from '@/components/ui/separator';
 import { useFolders } from '@/lib/folders';
+import { useWheelPageNavigation } from '@/lib/useWheelPageNavigation';
 import { cn } from '@/lib/utils';
 import { ClickNavZones } from '../components/ClickNavZones';
+import { PdfProgressToast } from '../components/PdfProgressToast';
 import { Player } from '../components/Player';
 import { SlideCanvas } from '../components/SlideCanvas';
 import { ThumbnailRail } from '../components/ThumbnailRail';
 import { exportSlideAsHtml } from '../lib/export-html';
+import { exportSlideAsPdf } from '../lib/export-pdf';
 import type { SlideModule } from '../lib/sdk';
 import { loadSlide } from '../lib/slides';
 
@@ -33,6 +43,7 @@ export function Slide() {
   const [playing, setPlaying] = useState(false);
   const [exporting, setExporting] = useState(false);
   const { renameSlide } = useFolders();
+  const slideViewportRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -212,6 +223,44 @@ export function Slide() {
                     <FileCode2 />
                     Download HTML
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    disabled={exporting}
+                    onSelect={async () => {
+                      if (!slide || exporting) return;
+                      setExporting(true);
+                      const toastId = `pdf-export-${slideId}`;
+                      toast.custom(
+                        () => (
+                          <PdfProgressToast
+                            progress={{
+                              phase: 'processing',
+                              current: 0,
+                              total: pages.length,
+                              percent: 0,
+                            }}
+                          />
+                        ),
+                        { id: toastId, duration: Infinity },
+                      );
+                      try {
+                        await exportSlideAsPdf(slide, slideId, (p) => {
+                          toast.custom(() => <PdfProgressToast progress={p} />, {
+                            id: toastId,
+                            duration: Infinity,
+                          });
+                        });
+                      } catch (err) {
+                        console.error('[open-slide] pdf export failed', err);
+                        toast.error('PDF export failed', { id: toastId, duration: 4000 });
+                      } finally {
+                        setExporting(false);
+                        toast.dismiss(toastId);
+                      }
+                    }}
+                  >
+                    <FileText />
+                    Download PDF
+                  </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             )}
@@ -231,9 +280,17 @@ export function Slide() {
             <ThumbnailRail pages={pages} current={index} onSelect={goTo} />
           </div>
           <main
+            ref={slideViewportRef}
             data-inspector-root
             className="relative min-h-0 min-w-0 flex-1 bg-background p-2 md:p-8"
           >
+            <SlideWheelNavigation
+              targetRef={slideViewportRef}
+              onPrev={() => goTo(index - 1)}
+              onNext={() => goTo(index + 1)}
+              canPrev={index > 0}
+              canNext={index < pageCount - 1}
+            />
             <SlideCanvas>
               <CurrentPage />
             </SlideCanvas>
@@ -244,18 +301,46 @@ export function Slide() {
               canNext={index < pageCount - 1}
             />
             <InspectOverlay />
+            <SaveBar />
+            <CommentWidget />
             <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>
+          <InspectorPanel />
         </div>
-
-        <CommentWidget />
       </div>
     </InspectorProvider>
   );
 }
 
+function SlideWheelNavigation({
+  targetRef,
+  onPrev,
+  onNext,
+  canPrev,
+  canNext,
+}: {
+  targetRef: RefObject<HTMLElement>;
+  onPrev: () => void;
+  onNext: () => void;
+  canPrev: boolean;
+  canNext: boolean;
+}) {
+  const { active } = useInspector();
+
+  useWheelPageNavigation({
+    ref: targetRef,
+    enabled: !active,
+    canPrev,
+    canNext,
+    onPrev,
+    onNext,
+  });
+
+  return null;
+}
+
 function InlineTitleEditor({
   title,
   onSubmit,

package/src/app/components/inspector/CommentPopover.tsx

@@ -1,94 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useInspector } from './InspectorProvider';
-
-const POPOVER_W = 320;
-const POPOVER_H = 180;
-
-export function CommentPopover() {
-  const { pending, setPending, add, cancel } = useInspector();
-  const [text, setText] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const taRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    taRef.current?.focus();
-  }, []);
-
-  if (!pending) return null;
-
-  const left = clamp(pending.clickX + 12, 8, window.innerWidth - POPOVER_W - 8);
-  const top = clamp(pending.clickY + 12, 8, window.innerHeight - POPOVER_H - 8);
-
-  const onSubmit = async () => {
-    const trimmed = text.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      await add(pending.line, pending.column, trimmed);
-      setPending(null);
-    } catch (e) {
-      setError(String((e as Error).message ?? e));
-      setSubmitting(false);
-    }
-  };
-
-  return createPortal(
-    <div
-      data-inspector-ui
-      className="fixed z-50 rounded-md border bg-card p-3 shadow-xl"
-      style={{ left, top, width: POPOVER_W }}
-    >
-      <div className="mb-2 flex items-center justify-between">
-        <span className="text-xs font-medium text-muted-foreground">
-          Line {pending.line} · Comment
-        </span>
-        <button
-          type="button"
-          className="text-xs text-muted-foreground hover:text-foreground"
-          onClick={cancel}
-        >
-          ✕
-        </button>
-      </div>
-      <textarea
-        ref={taRef}
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        placeholder="Describe the change…"
-        className="h-20 w-full resize-none rounded border bg-background p-2 text-sm outline-none focus:ring-2 focus:ring-primary/40"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault();
-            onSubmit();
-          }
-        }}
-      />
-      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
-      <div className="mt-2 flex items-center justify-end gap-2">
-        <button
-          type="button"
-          onClick={cancel}
-          className="rounded border px-2 py-1 text-xs hover:bg-muted"
-        >
-          Cancel
-        </button>
-        <button
-          type="button"
-          disabled={submitting || !text.trim()}
-          onClick={onSubmit}
-          className="rounded bg-primary px-3 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50"
-        >
-          {submitting ? 'Saving…' : 'Submit'}
-        </button>
-      </div>
-      <p className="mt-2 text-[10px] text-muted-foreground">⌘/Ctrl + Enter to submit</p>
-    </div>,
-    document.body,
-  );
-}
-
-function clamp(n: number, lo: number, hi: number): number {
-  return Math.max(lo, Math.min(hi, n));
-}