@open-slide/core 0.0.8 → 0.0.10

package/src/app/components/ClickNavZones.tsx

@@ -19,7 +19,7 @@ export function ClickNavZones({ onPrev, onNext, canPrev, canNext }: Props) {
         onClick={onPrev}
         disabled={!canPrev}
         data-inspector-ui
-        className="absolute inset-y-0 left-0 z-20 w-[18%] min-w-12"
+        className="absolute inset-y-0 left-0 z-20 w-[18%] min-w-12 md:hidden"
       />
       <button
         type="button"
@@ -27,7 +27,7 @@ export function ClickNavZones({ onPrev, onNext, canPrev, canNext }: Props) {
         onClick={onNext}
         disabled={!canNext}
         data-inspector-ui
-        className="absolute inset-y-0 right-0 z-20 w-[18%] min-w-12"
+        className="absolute inset-y-0 right-0 z-20 w-[18%] min-w-12 md:hidden"
       />
     </>
   );

package/src/app/components/PdfProgressToast.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import type { PdfExportProgress } from '../lib/export-pdf';
+import { Progress } from './ui/progress';
+
+export function PdfProgressToast({ progress }: { progress: PdfExportProgress }) {
+  const text =
+    progress.phase === 'processing'
+      ? `Processing slide ${progress.current} / ${progress.total}`
+      : progress.phase === 'printing'
+        ? 'Opening print dialog…'
+        : 'Done';
+
+  return (
+    <div className="flex w-80 items-start gap-3 rounded-md border bg-popover px-4 py-3 text-popover-foreground shadow-lg">
+      <Loader2 className="mt-0.5 size-4 shrink-0 animate-spin text-primary" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">Exporting PDF</p>
+        <p className="truncate text-xs text-muted-foreground">{text}</p>
+        <Progress value={Math.round(progress.percent)} className="mt-2 h-1.5" />
+      </div>
+    </div>
+  );
+}

package/src/app/components/ThumbnailRail.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
-import { cn } from '@/lib/utils';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
 import type { Page } from '../lib/sdk';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 import { SlideCanvas } from './SlideCanvas';
-import { CANVAS_WIDTH, CANVAS_HEIGHT } from '../lib/sdk';
 
 type Props = {
   pages: Page[];

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

@@ -8,7 +8,7 @@ export function CommentWidget() {
   const count = comments.length;
 
   return (
-    <div data-inspector-ui className="fixed right-4 bottom-4 z-40 flex flex-col items-end gap-2">
+    <div data-inspector-ui className="absolute right-4 bottom-4 z-20 flex flex-col items-end gap-2">
       {open && (
         <div className="w-80 rounded-md border bg-card shadow-xl animate-in fade-in-0 slide-in-from-bottom-2 duration-200">
           <div className="flex items-center justify-between border-b px-3 py-2">

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

@@ -1,12 +1,16 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { findSlideSource, type SlideSourceHit } from '@/lib/inspector/fiber';
-import { CommentPopover } from './CommentPopover';
 import { useInspector } from './InspectorProvider';
 
 type Highlight = { rect: DOMRect; hit: SlideSourceHit };
 
+type RelRect = { left: number; top: number; width: number; height: number };
+
+const FRAME_FADE_MS = 150;
+const FRAME_MORPH_MS = 180;
+
 export function InspectOverlay() {
-  const { active, slideId, pending, setPending, cancel } = useInspector();
+  const { active, slideId, selected, setSelected, cancel } = useInspector();
   const overlayRef = useRef<HTMLDivElement>(null);
   const [hover, setHover] = useState<Highlight | null>(null);
 
@@ -25,32 +29,23 @@ export function InspectOverlay() {
     };
 
     const onMove = (e: PointerEvent) => {
-      if (pending) return;
       const el = pickElement(e.clientX, e.clientY);
       if (!el) return setHover(null);
-      const hit = findSlideSource(el, slideId);
+      const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return setHover(null);
       setHover({ rect: hit.anchor.getBoundingClientRect(), hit });
     };
 
     const onClick = (e: MouseEvent) => {
-      if (pending) return;
       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, slideId);
+      const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return;
       e.preventDefault();
       e.stopPropagation();
-      const anchorRect = hit.anchor.getBoundingClientRect();
-      setPending({
-        line: hit.line,
-        column: hit.column,
-        anchorRect,
-        clickX: e.clientX,
-        clickY: e.clientY,
-      });
-      setHover({ rect: anchorRect, hit });
+      setSelected({ line: hit.line, column: hit.column, anchor: hit.anchor });
+      setHover({ rect: hit.anchor.getBoundingClientRect(), hit });
     };
 
     window.addEventListener('pointermove', onMove, true);
@@ -61,36 +56,81 @@ export function InspectOverlay() {
       window.removeEventListener('click', onClick, true);
       window.removeEventListener('keydown', onKey, true);
     };
-  }, [active, slideId, pending, setPending, cancel]);
+  }, [active, slideId, setSelected, cancel]);
 
-  if (!active) return null;
+  return (
+    <FrameOverlay
+      active={active}
+      overlayRef={overlayRef}
+      // Pin to the selection so the highlight tracks what the panel
+      // is editing even after the cursor moves away.
+      targetRect={selected?.anchor.getBoundingClientRect() ?? hover?.rect ?? null}
+    />
+  );
+}
 
+function FrameOverlay({
+  active,
+  overlayRef,
+  targetRect,
+}: {
+  active: boolean;
+  overlayRef: React.RefObject<HTMLDivElement>;
+  targetRect: DOMRect | null;
+}) {
   const overlayRect = overlayRef.current?.getBoundingClientRect();
-  const show = hover && overlayRect;
+  const visible = !!(active && targetRect && overlayRect);
+
+  // Hold the last rect so the frame stays put during fade-out, when
+  // `targetRect` has already gone null.
+  const lastRectRef = useRef<RelRect | null>(null);
+  if (visible && targetRect && overlayRect) {
+    lastRectRef.current = {
+      left: targetRect.left - overlayRect.left,
+      top: targetRect.top - overlayRect.top,
+      width: targetRect.width,
+      height: targetRect.height,
+    };
+  }
+
+  // First render after appearing: snap to the new rect (no transition).
+  // Subsequent rect changes in the same visible session: animate.
+  const [morph, setMorph] = useState(false);
+  useLayoutEffect(() => {
+    if (visible) {
+      setMorph(true);
+      return;
+    }
+    const t = setTimeout(() => setMorph(false), FRAME_FADE_MS);
+    return () => clearTimeout(t);
+  }, [visible]);
+
+  if (!active) return null;
+  const rect = lastRectRef.current;
+  const transition = morph
+    ? `left ${FRAME_MORPH_MS}ms ease-out, top ${FRAME_MORPH_MS}ms ease-out, ` +
+      `width ${FRAME_MORPH_MS}ms ease-out, height ${FRAME_MORPH_MS}ms ease-out, ` +
+      `opacity ${FRAME_FADE_MS}ms ease-out`
+    : `opacity ${FRAME_FADE_MS}ms ease-out`;
 
   return (
-    <>
-      <div
-        ref={overlayRef}
-        className="pointer-events-none absolute inset-0 z-30"
-        style={{ cursor: 'crosshair' }}
-      >
-        {show && (
-          <div
-            className="absolute"
-            style={{
-              left: hover.rect.left - overlayRect.left,
-              top: hover.rect.top - overlayRect.top,
-              width: hover.rect.width,
-              height: hover.rect.height,
-              outline: '2px solid #3b82f6',
-              background: 'rgba(59,130,246,0.1)',
-            }}
-          />
-        )}
-      </div>
-      {pending && <CommentPopover />}
-    </>
+    <div ref={overlayRef} data-inspector-ui className="pointer-events-none absolute inset-0 z-30">
+      {rect && (
+        <div
+          className="absolute"
+          style={{
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            opacity: visible ? 1 : 0,
+            transition,
+            outline: '2px solid #3b82f6',
+            background: 'rgba(59,130,246,0.1)',
+          }}
+        />
+      )}
+    </div>
   );
 }