@open-slide/core 0.0.8 → 0.0.10

package/src/app/lib/inspector/useEditor.ts

@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+
+export type EditOp =
+  | { kind: 'set-style'; key: string; value: string | null }
+  | { kind: 'set-text'; value: string }
+  | { kind: 'set-attr-asset'; attr: string; assetPath: string; previewUrl: string };
+
+export type Edit = { line: number; column: number; ops: EditOp[] };
+
+export class NoOpEditError extends Error {
+  constructor() {
+    super(
+      'Edit completed but the source file did not change — the target JSX may already match, or the target element may not be directly editable here.',
+    );
+    this.name = 'NoOpEditError';
+  }
+}
+
+export function useEditor(slideId: string) {
+  const applyEdit = useCallback(
+    async (line: number, column: number, ops: EditOp[]) => {
+      const res = await fetch('/__edit', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId, line, column, ops }),
+      });
+      const body = (await res.json().catch(() => ({}))) as { error?: string; changed?: boolean };
+      if (!res.ok) {
+        throw new Error(body.error ?? `POST /__edit → ${res.status}`);
+      }
+      if (body.changed === false) {
+        throw new NoOpEditError();
+      }
+    },
+    [slideId],
+  );
+
+  // Batch many element edits into one file write and one HMR tick.
+  const applyEdits = useCallback(
+    async (edits: Edit[]) => {
+      if (edits.length === 0) return;
+      const res = await fetch('/__edit/batch', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId, edits }),
+      });
+      const body = (await res.json().catch(() => ({}))) as {
+        error?: string;
+        changed?: boolean;
+        results?: Array<{ ok: boolean; error?: string }>;
+      };
+      if (!res.ok) {
+        throw new Error(body.error ?? `POST /__edit/batch → ${res.status}`);
+      }
+      const failed = body.results?.find((r) => !r.ok);
+      if (failed?.error) throw new Error(failed.error);
+    },
+    [slideId],
+  );
+
+  return { applyEdit, applyEdits };
+}

package/src/app/lib/print-ready.ts

@@ -0,0 +1,58 @@
+// Helpers used by the PDF export flow to wait for the page to settle before
+// invoking window.print(). Browser-only — no Node / headless dependency.
+
+const DEFAULT_WAITFOR_TIMEOUT_MS = 10_000;
+
+export async function waitForFonts(): Promise<void> {
+  if (!('fonts' in document)) return;
+  await document.fonts.ready;
+  const pending: Promise<unknown>[] = [];
+  for (const face of document.fonts) {
+    if (face.status !== 'loaded') pending.push(face.load());
+  }
+  if (pending.length) {
+    await Promise.all(pending.map((p) => p.catch(() => undefined)));
+  }
+}
+
+export async function waitForDataWaitfor(
+  root: HTMLElement,
+  timeoutMs = DEFAULT_WAITFOR_TIMEOUT_MS,
+): Promise<void> {
+  const targets = Array.from(root.querySelectorAll<HTMLElement>('[data-waitfor]'));
+  if (targets.length === 0) return;
+  const deadline = performance.now() + timeoutMs;
+  await Promise.all(
+    targets.map(async (el) => {
+      const selector = el.getAttribute('data-waitfor');
+      if (!selector) return;
+      while (performance.now() < deadline) {
+        try {
+          if (el.querySelector(selector)) return;
+        } catch {
+          return; // invalid selector — skip rather than hang
+        }
+        await nextFrame();
+      }
+    }),
+  );
+}
+
+/** Returns true if `frame` has no running finite-iteration animations. */
+export function isFrameAnimationSettled(frame: Element): boolean {
+  if (typeof document.getAnimations !== 'function') return true;
+  for (const anim of document.getAnimations()) {
+    const effect = anim.effect as KeyframeEffect | null;
+    if (!effect) continue;
+    const target = effect.target;
+    if (!target || !frame.contains(target)) continue;
+    const timing = effect.getComputedTiming();
+    if (timing.iterations === Infinity) continue;
+    if (anim.playState !== 'finished') return false;
+  }
+  return true;
+}
+
+function nextFrame(): Promise<void> {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}

package/src/app/routes/Slide.tsx

@@ -1,14 +1,18 @@
 import config from 'virtual:open-slide/config';
-import { ChevronLeft, Download, FileCode2, Loader2, Pencil, Play } from 'lucide-react';
+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 { AssetView } from '@/components/AssetView';
 import { CommentWidget } from '@/components/inspector/CommentWidget';
 import { InspectOverlay } from '@/components/inspector/InspectOverlay';
+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,
@@ -16,15 +20,17 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 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';
 
@@ -60,6 +66,7 @@ export function 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 view = searchParams.get('view') === 'assets' ? 'assets' : 'slides';
 
   const goTo = useCallback(
     (i: number) => {
@@ -166,15 +173,50 @@ export function Slide() {
         <header className="relative flex shrink-0 items-center justify-between border-b bg-card px-3 py-2 md:px-5 md:py-3">
           <div className="flex items-center gap-2 md:gap-3">
             {showSlideBrowser && (
-              <>
-                <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" />
-              </>
+              <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>
+            )}
+            {import.meta.env.DEV && (
+              <Tabs
+                value={view}
+                onValueChange={(next) => {
+                  setSearchParams(
+                    (prev) => {
+                      const params = new URLSearchParams(prev);
+                      if (next === 'assets') params.set('view', 'assets');
+                      else params.delete('view');
+                      return params;
+                    },
+                    { replace: true },
+                  );
+                }}
+              >
+                <TabsList className="relative h-7 rounded-md p-0.5 group-data-[orientation=horizontal]/tabs:h-7">
+                  <div
+                    aria-hidden
+                    className="pointer-events-none absolute top-0.5 bottom-0.5 left-0.5 w-[calc(50%-2px)] rounded-[5px] bg-background shadow-sm transition-transform duration-200 ease-out"
+                    style={{
+                      transform: view === 'assets' ? 'translateX(100%)' : 'translateX(0)',
+                    }}
+                  />
+                  <TabsTrigger
+                    value="slides"
+                    className="relative z-10 h-6 px-3 text-xs data-[state=active]:bg-transparent data-[state=active]:shadow-none dark:data-[state=active]:bg-transparent"
+                  >
+                    Slides
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="assets"
+                    className="relative z-10 h-6 px-3 text-xs data-[state=active]:bg-transparent data-[state=active]:shadow-none dark:data-[state=active]:bg-transparent"
+                  >
+                    Assets
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
             )}
           </div>
 
@@ -185,7 +227,7 @@ export function Slide() {
           </div>
 
           <div className="flex items-center gap-1.5">
-            {allowHtmlDownload && (
+            {view === 'slides' && allowHtmlDownload && (
               <DropdownMenu>
                 <DropdownMenuTrigger
                   type="button"
@@ -218,53 +260,100 @@ 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>
             )}
-            <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>
+            {view === 'slides' && <InspectToggleButton />}
+            {view === 'slides' && (
+              <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>
+            )}
           </div>
         </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} />
+        {view === 'assets' ? (
+          <div className="min-h-0 flex-1">
+            <AssetView slideId={slideId} />
           </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>
-            <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 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>
-        </div>
-
-        <CommentWidget />
+            <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>
+              <ClickNavZones
+                onPrev={() => goTo(index - 1)}
+                onNext={() => goTo(index + 1)}
+                canPrev={index > 0}
+                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>
+        )}
       </div>
     </InspectorProvider>
   );

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));
-}