@open-slide/core 1.1.0 → 1.2.0

package/src/app/components/inspector/image-crop-dialog.tsx

@@ -13,11 +13,9 @@ import {
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useLocale } from '@/lib/use-locale';
 
-export type ImageCropResult = {
-  fit: 'cover' | 'contain';
-  x: number;
-  y: number;
-};
+export type ImageCropRect = { x: number; y: number; width: number; height: number };
+
+export type ImageCropResult = { fit: 'contain' } | { fit: 'cover'; rect: ImageCropRect };
 
 export function ImageCropDialog({
   src,
@@ -25,6 +23,7 @@ export function ImageCropDialog({
   targetHeight,
   initialFit,
   initialPosition,
+  initialRect,
   onClose,
   onApply,
 }: {
@@ -33,6 +32,7 @@ export function ImageCropDialog({
   targetHeight: number;
   initialFit: 'cover' | 'contain';
   initialPosition: { x: number; y: number };
+  initialRect: ImageCropRect | null;
   onClose: () => void;
   onApply: (result: ImageCropResult) => void;
 }) {
@@ -44,26 +44,30 @@ export function ImageCropDialog({
 
   const onImageLoad = (e: SyntheticEvent<HTMLImageElement>) => {
     const im = e.currentTarget;
-    setCrop(makeMaxSizeCrop(im.naturalWidth, im.naturalHeight, aspect, initialPosition));
+    setCrop(initialCrop(im.naturalWidth, im.naturalHeight, aspect, initialRect, initialPosition));
   };
 
   useEffect(() => {
     const im = imgRef.current;
-    if (!im || !im.complete || !im.naturalWidth || !im.naturalHeight) return;
+    if (!im?.complete || !im.naturalWidth || !im.naturalHeight) return;
     setCrop((prev) => {
-      const pos = prev ? deriveObjectPosition(prev as PercentCrop) : initialPosition;
-      return makeMaxSizeCrop(im.naturalWidth, im.naturalHeight, aspect, pos);
+      if (prev && prev.unit === '%') {
+        return clampToAspect(prev as PercentCrop, aspect, im.naturalWidth, im.naturalHeight);
+      }
+      return initialCrop(im.naturalWidth, im.naturalHeight, aspect, initialRect, initialPosition);
     });
-  }, [aspect, initialPosition]);
+  }, [aspect, initialPosition, initialRect]);
 
   const onApplyClick = () => {
     if (fit === 'contain') {
-      onApply({ fit, x: 50, y: 50 });
+      onApply({ fit });
       return;
     }
-    const pos =
-      crop && crop.unit === '%' ? deriveObjectPosition(crop as PercentCrop) : { x: 50, y: 50 };
-    onApply({ fit, x: round2(pos.x), y: round2(pos.y) });
+    const rect =
+      crop && crop.unit === '%'
+        ? roundRect(crop as PercentCrop)
+        : { x: 0, y: 0, width: 100, height: 100 };
+    onApply({ fit, rect });
   };
 
   return (
@@ -98,7 +102,6 @@ export function ImageCropDialog({
               onChange={(_, percentCrop) => setCrop(percentCrop)}
               aspect={aspect}
               keepSelection
-              locked
               className="max-h-full"
             >
               <img
@@ -124,6 +127,19 @@ export function ImageCropDialog({
   );
 }
 
+function initialCrop(
+  naturalW: number,
+  naturalH: number,
+  aspect: number,
+  rect: ImageCropRect | null,
+  position: { x: number; y: number },
+): PercentCrop {
+  if (rect) {
+    return clampToAspect({ unit: '%', ...rect }, aspect, naturalW, naturalH);
+  }
+  return makeMaxSizeCrop(naturalW, naturalH, aspect, position);
+}
+
 function makeMaxSizeCrop(
   naturalW: number,
   naturalH: number,
@@ -150,12 +166,40 @@ function makeMaxSizeCrop(
   return { unit: '%', x, y, width, height };
 }
 
-function deriveObjectPosition(crop: PercentCrop): { x: number; y: number } {
-  const slackX = 100 - crop.width;
-  const slackY = 100 - crop.height;
+function clampToAspect(
+  crop: PercentCrop,
+  aspect: number,
+  naturalW: number,
+  naturalH: number,
+): PercentCrop {
+  const cx = crop.x + crop.width / 2;
+  const cy = crop.y + crop.height / 2;
+  let width = crop.width;
+  let height = crop.height;
+  const targetPctRatio = naturalW > 0 && naturalH > 0 ? (aspect * naturalH) / naturalW : aspect;
+  const currentRatio = height > 0 ? width / height : targetPctRatio;
+  if (Math.abs(currentRatio - targetPctRatio) > 0.0001) {
+    if (currentRatio > targetPctRatio) {
+      height = width / targetPctRatio;
+    } else {
+      width = height * targetPctRatio;
+    }
+  }
+  width = clamp(width, 1, 100);
+  height = clamp(height, 1, 100);
+  let x = cx - width / 2;
+  let y = cy - height / 2;
+  x = clamp(x, 0, 100 - width);
+  y = clamp(y, 0, 100 - height);
+  return { unit: '%', x, y, width, height };
+}
+
+function roundRect(crop: PercentCrop): ImageCropRect {
   return {
-    x: slackX > 0 ? clamp((crop.x / slackX) * 100, 0, 100) : 50,
-    y: slackY > 0 ? clamp((crop.y / slackY) * 100, 0, 100) : 50,
+    x: round2(crop.x),
+    y: round2(crop.y),
+    width: round2(crop.width),
+    height: round2(crop.height),
   };
 }
 

package/src/app/components/inspector/inspector-panel.tsx

@@ -4,6 +4,7 @@ import {
   AlignLeft,
   AlignRight,
   Bold,
+  Crop,
   ImageIcon,
   Italic,
   X,
@@ -32,6 +33,7 @@ import { Slider } from '@/components/ui/slider';
 import { Textarea } from '@/components/ui/textarea';
 import { Toggle } from '@/components/ui/toggle';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { type AssetEntry, useAssets } from '@/lib/assets';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import type { EditOp } from '@/lib/inspector/use-editor';
@@ -149,15 +151,18 @@ export function InspectorPanel() {
               <{pinSelected.anchor.tagName.toLowerCase()}>
             </span>
           </div>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="text-muted-foreground hover:text-foreground"
-            onClick={() => setSelected(null)}
-            aria-label={t.inspector.deselect}
-          >
-            <X className="size-3.5" />
-          </Button>
+          <div className="flex items-center gap-1.5">
+            <AgentWatchingBadge />
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={() => setSelected(null)}
+              aria-label={t.inspector.deselect}
+            >
+              <X className="size-3.5" />
+            </Button>
+          </div>
         </>
       }
       footer={<CommentsSection selected={pinSelected} onAdd={add} />}
@@ -637,6 +642,7 @@ function ImageField({
               className="flex-1"
               onClick={() => openCrop(anchor as HTMLImageElement)}
             >
+              <Crop className="size-3.5" />
               {t.inspector.crop}
             </Button>
           )}
@@ -800,6 +806,31 @@ function AssetPickerDialog({
   );
 }
 
+function AgentWatchingBadge() {
+  const t = useLocale();
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="flex shrink-0 cursor-help items-center gap-1.5 rounded-[3px] border border-hairline bg-card px-1.5 py-px text-[10.5px] text-foreground/85 outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+          >
+            <span aria-hidden className="relative flex size-1.5 items-center justify-center">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
+              <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
+            </span>
+            {t.inspector.agentWatching}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" align="end" className="max-w-[260px] leading-relaxed">
+          {t.inspector.agentWatchingTooltip}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 function CommentsSection({
   selected,
   onAdd,
@@ -824,7 +855,7 @@ function CommentsSection({
   };
 
   return (
-    <Section title={t.inspector.noteForAgent}>
+    <Section title={t.inspector.leaveComment}>
       <div className="flex flex-col gap-2">
         <div className="comment-cue rounded-[6px]">
           <Textarea
@@ -836,16 +867,16 @@ function CommentsSection({
                 submit();
               }
             }}
-            placeholder={t.inspector.noteAgentPlaceholder}
+            placeholder={t.inspector.commentPlaceholder}
             className="min-h-16 resize-none text-[12px]"
           />
         </div>
         <div className="flex items-center justify-between gap-2">
           <span className="font-mono text-[10.5px] text-muted-foreground/70">
-            {t.inspector.noteShortcutHint}
+            {t.inspector.commentShortcutHint}
           </span>
           <Button size="sm" variant="brand" disabled={submitting || !draft.trim()} onClick={submit}>
-            {t.inspector.addNote}
+            {t.inspector.addComment}
           </Button>
         </div>
       </div>

package/src/app/components/inspector/inspector-provider.tsx

@@ -15,7 +15,7 @@ import { Button } from '@/components/ui/button';
 import { type SlideComment, useComments } from '@/lib/inspector/use-comments';
 import { type Edit, type EditOp, type EditResult, useEditor } from '@/lib/inspector/use-editor';
 import { useLocale } from '@/lib/use-locale';
-import { ImageCropDialog } from './image-crop-dialog';
+import { ImageCropDialog, type ImageCropRect } from './image-crop-dialog';
 
 export type SelectedTarget = {
   line: number;
@@ -101,6 +101,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     targetHeight: number;
     initialFit: 'cover' | 'contain';
     initialPosition: { x: number; y: number };
+    initialRect: ImageCropRect | null;
   } | null>(null);
   const t = useLocale();
 
@@ -558,6 +559,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       targetHeight: anchor.offsetHeight || anchor.getBoundingClientRect().height,
       initialFit: cs.objectFit === 'contain' ? 'contain' : 'cover',
       initialPosition: parseObjectPosition(cs.objectPosition),
+      initialRect: parseObjectViewBox(cs.getPropertyValue('object-view-box')),
     });
   }, []);
 
@@ -615,18 +617,30 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
           targetHeight={cropTarget.targetHeight}
           initialFit={cropTarget.initialFit}
           initialPosition={cropTarget.initialPosition}
+          initialRect={cropTarget.initialRect}
           onClose={() => setCropTarget(null)}
           onApply={(result) => {
             const { line, column, anchor } = cropTarget;
             if (anchor.isConnected) {
-              bufferOps(line, column, anchor, [
+              const ops: EditOp[] = [
                 { kind: 'set-style', key: 'objectFit', value: result.fit },
-                {
+                { kind: 'set-style', key: 'objectPosition', value: '50% 50%' },
+              ];
+              if (result.fit === 'cover') {
+                const { x, y, width, height } = result.rect;
+                const top = round2(y);
+                const left = round2(x);
+                const right = round2(100 - x - width);
+                const bottom = round2(100 - y - height);
+                ops.push({
                   kind: 'set-style',
-                  key: 'objectPosition',
-                  value: `${round2(result.x)}% ${round2(result.y)}%`,
-                },
-              ]);
+                  key: 'objectViewBox',
+                  value: `inset(${top}% ${right}% ${bottom}% ${left}%)`,
+                });
+              } else {
+                ops.push({ kind: 'set-style', key: 'objectViewBox', value: null });
+              }
+              bufferOps(line, column, anchor, ops);
             }
             setCropTarget(null);
           }}
@@ -640,6 +654,45 @@ function round2(n: number): number {
   return Math.round(n * 100) / 100;
 }
 
+function parseObjectViewBox(value: string): ImageCropRect | null {
+  const v = value?.trim();
+  if (!v || v === 'none') return null;
+  const m = v.match(/^inset\(([^)]+)\)$/);
+  if (!m?.[1]) return null;
+  const nums = m[1]
+    .trim()
+    .split(/\s+/)
+    .map((p) => {
+      const n = p.match(/^(-?\d+(?:\.\d+)?)%$/);
+      return n?.[1] ? Number(n[1]) : null;
+    });
+  if (nums.some((n) => n === null)) return null;
+  let top: number, right: number, bottom: number, left: number;
+  if (nums.length === 1) {
+    top = right = bottom = left = nums[0] as number;
+  } else if (nums.length === 2) {
+    top = bottom = nums[0] as number;
+    right = left = nums[1] as number;
+  } else if (nums.length === 3) {
+    top = nums[0] as number;
+    right = left = nums[1] as number;
+    bottom = nums[2] as number;
+  } else if (nums.length === 4) {
+    top = nums[0] as number;
+    right = nums[1] as number;
+    bottom = nums[2] as number;
+    left = nums[3] as number;
+  } else {
+    return null;
+  }
+  const x = left;
+  const y = top;
+  const width = 100 - left - right;
+  const height = 100 - top - bottom;
+  if (width <= 0 || height <= 0) return null;
+  return { x, y, width, height };
+}
+
 function parseObjectPosition(value: string): { x: number; y: number } {
   const parts = value.trim().split(/\s+/);
   const xRaw = parts[0] ?? '50%';

package/src/app/components/notes-drawer.tsx

@@ -0,0 +1,117 @@
+import { ChevronDown, ChevronUp, NotebookPen } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { PANEL_TRANSITION_MS, usePanelMount } from '@/components/panel/panel-shell';
+import { useNotes } from '@/lib/inspector/use-notes';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+const STORAGE_KEY = 'open-slide:notes-drawer-open';
+const DRAWER_CONTENT_H = 166;
+
+type Props = {
+  slideId: string;
+  index: number;
+  total: number;
+  initial: string | undefined;
+};
+
+export function NotesDrawer({ slideId, index, total, initial }: Props) {
+  const t = useLocale();
+  const [open, setOpen] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.localStorage.getItem(STORAGE_KEY) === '1';
+  });
+  const { value, setValue, status, flush } = useNotes(slideId, index, initial);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const { mounted, animVisible } = usePanelMount(open);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.localStorage.setItem(STORAGE_KEY, open ? '1' : '0');
+  }, [open]);
+
+  const statusLabel = (() => {
+    switch (status.kind) {
+      case 'saving':
+        return t.notesDrawer.statusSaving;
+      case 'saved':
+        return t.notesDrawer.statusSaved;
+      case 'error':
+        return format(t.notesDrawer.statusError, { msg: status.message });
+      default:
+        return '';
+    }
+  })();
+
+  return (
+    <aside
+      data-notes-drawer
+      className="hidden shrink-0 border-t border-hairline bg-sidebar/85 backdrop-blur md:block"
+    >
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((o) => {
+            if (o) void flush();
+            return !o;
+          });
+        }}
+        className="flex h-9 w-full items-center gap-2 px-3 text-[12px] text-foreground/80 hover:bg-muted/40"
+        aria-expanded={open}
+      >
+        <NotebookPen className="size-3.5 text-muted-foreground" />
+        <span className="font-medium">{t.notesDrawer.toggle}</span>
+        <span className="font-mono text-[11px] text-muted-foreground">
+          {format(t.notesDrawer.pageLabel, { n: index + 1, total })}
+        </span>
+        <span
+          className={cn(
+            'ml-auto truncate text-[11px]',
+            status.kind === 'error' ? 'text-destructive' : 'text-muted-foreground',
+          )}
+          aria-live="polite"
+        >
+          {statusLabel}
+        </span>
+        {open ? (
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronUp className="size-3.5 text-muted-foreground" />
+        )}
+      </button>
+      {mounted && (
+        <div
+          className="overflow-hidden border-t border-hairline transition-[height] ease-out"
+          style={{
+            height: animVisible ? DRAWER_CONTENT_H : 0,
+            transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+          }}
+        >
+          <div className="px-3 py-2">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onBlur={() => {
+                void flush();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  e.preventDefault();
+                  textareaRef.current?.blur();
+                } else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                  e.preventDefault();
+                  void flush();
+                }
+              }}
+              placeholder={t.notesDrawer.placeholder}
+              rows={6}
+              spellCheck
+              className="block h-[150px] w-full resize-none rounded-[6px] border border-border bg-card px-3 py-2 text-[13px] leading-relaxed text-card-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+            />
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

package/src/app/components/player.tsx

@@ -61,6 +61,9 @@ export function Player({
   const [keyboardDriven, setKeyboardDriven] = useState(false);
   const [startedAt] = useState(() => Date.now());
 
+  const canPrev = index > 0;
+  const canNext = index < pages.length - 1;
+
   const goPrev = useCallback(() => {
     if (index > 0) onIndexChange(index - 1);
   }, [index, onIndexChange]);
@@ -73,8 +76,8 @@ export function Player({
   useWheelPageNavigation({
     ref: rootRef,
     enabled: !overlayActive,
-    canPrev: index > 0,
-    canNext: index < pages.length - 1,
+    canPrev,
+    canNext,
     onPrev: goPrev,
     onNext: goNext,
   });
@@ -269,7 +272,8 @@ export function Player({
       ref={setRoot}
       className={cn(
         'relative flex h-dvh w-screen items-center justify-center bg-black',
-        hideCursor && 'cursor-none',
+        controls && 'select-none',
+        controls && (hideCursor ? 'cursor-none' : 'cursor-default'),
       )}
     >
       <SlideCanvas flat design={design}>
@@ -280,15 +284,15 @@ export function Player({
         type="button"
         aria-label="Previous page"
         onClick={goPrev}
-        disabled={index === 0}
-        className="absolute inset-y-0 left-0 z-10 w-[30%]"
+        disabled={!canPrev}
+        className={cn('absolute inset-y-0 left-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
       />
       <button
         type="button"
         aria-label="Next page"
         onClick={goNext}
-        disabled={index === pages.length - 1}
-        className="absolute inset-y-0 right-0 z-10 w-[30%]"
+        disabled={!canNext}
+        className={cn('absolute inset-y-0 right-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
       />
 
       {controls && (

package/src/app/components/present/overview-grid.tsx

@@ -96,9 +96,9 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
       </div>
       <div ref={gridRef} className="min-h-0 flex-1 overflow-auto px-8 pb-8">
         <div
-          className="grid gap-5"
+          className="grid justify-center gap-5"
           style={{
-            gridTemplateColumns: `repeat(auto-fill, minmax(${THUMB_W}px, 1fr))`,
+            gridTemplateColumns: `repeat(auto-fill, ${THUMB_W}px)`,
           }}
         >
           {pages.map((PageComp, i) => {