@open-slide/core 1.0.6 → 1.2.0

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

@@ -0,0 +1,212 @@
+import { type SyntheticEvent, useEffect, useRef, useState } from 'react';
+import ReactCrop, { type Crop, type PercentCrop } from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useLocale } from '@/lib/use-locale';
+
+export type ImageCropRect = { x: number; y: number; width: number; height: number };
+
+export type ImageCropResult = { fit: 'contain' } | { fit: 'cover'; rect: ImageCropRect };
+
+export function ImageCropDialog({
+  src,
+  targetWidth,
+  targetHeight,
+  initialFit,
+  initialPosition,
+  initialRect,
+  onClose,
+  onApply,
+}: {
+  src: string;
+  targetWidth: number;
+  targetHeight: number;
+  initialFit: 'cover' | 'contain';
+  initialPosition: { x: number; y: number };
+  initialRect: ImageCropRect | null;
+  onClose: () => void;
+  onApply: (result: ImageCropResult) => void;
+}) {
+  const t = useLocale();
+  const [fit, setFit] = useState<'cover' | 'contain'>(initialFit);
+  const aspect = targetWidth > 0 && targetHeight > 0 ? targetWidth / targetHeight : 1;
+  const [crop, setCrop] = useState<Crop | undefined>(undefined);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const onImageLoad = (e: SyntheticEvent<HTMLImageElement>) => {
+    const im = e.currentTarget;
+    setCrop(initialCrop(im.naturalWidth, im.naturalHeight, aspect, initialRect, initialPosition));
+  };
+
+  useEffect(() => {
+    const im = imgRef.current;
+    if (!im?.complete || !im.naturalWidth || !im.naturalHeight) return;
+    setCrop((prev) => {
+      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, initialRect]);
+
+  const onApplyClick = () => {
+    if (fit === 'contain') {
+      onApply({ fit });
+      return;
+    }
+    const rect =
+      crop && crop.unit === '%'
+        ? roundRect(crop as PercentCrop)
+        : { x: 0, y: 0, width: 100, height: 100 };
+    onApply({ fit, rect });
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{t.inspector.cropDialogTitle}</DialogTitle>
+          <DialogDescription>{t.inspector.cropDialogDescription}</DialogDescription>
+        </DialogHeader>
+        <div className="flex justify-center">
+          <ToggleGroup
+            type="single"
+            value={fit}
+            onValueChange={(v) => {
+              if (v === 'cover' || v === 'contain') setFit(v);
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="cover" className="text-xs">
+              {t.inspector.cropFitCover}
+            </ToggleGroupItem>
+            <ToggleGroupItem value="contain" className="text-xs">
+              {t.inspector.cropFitContain}
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className="flex h-[420px] w-full items-center justify-center overflow-hidden rounded-md border bg-[repeating-conic-gradient(theme(colors.muted)_0_25%,transparent_0_50%)] bg-[length:12px_12px]">
+          {fit === 'cover' ? (
+            <ReactCrop
+              crop={crop}
+              onChange={(_, percentCrop) => setCrop(percentCrop)}
+              aspect={aspect}
+              keepSelection
+              className="max-h-full"
+            >
+              <img
+                ref={imgRef}
+                src={src}
+                alt=""
+                style={{ maxHeight: 420, maxWidth: '100%' }}
+                onLoad={onImageLoad}
+              />
+            </ReactCrop>
+          ) : (
+            <img src={src} alt="" className="max-h-full max-w-full object-contain" />
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t.common.cancel}
+          </Button>
+          <Button onClick={onApplyClick}>{t.inspector.cropApply}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+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,
+  aspect: number,
+  position: { x: number; y: number },
+): PercentCrop {
+  if (naturalW <= 0 || naturalH <= 0) {
+    return { unit: '%', x: 0, y: 0, width: 100, height: 100 };
+  }
+  const sourceAspect = naturalW / naturalH;
+  let width = 100;
+  let height = 100;
+  if (aspect >= sourceAspect) {
+    width = 100;
+    height = (sourceAspect / aspect) * 100;
+  } else {
+    height = 100;
+    width = (aspect / sourceAspect) * 100;
+  }
+  const slackX = 100 - width;
+  const slackY = 100 - height;
+  const x = clamp((position.x / 100) * slackX, 0, slackX);
+  const y = clamp((position.y / 100) * slackY, 0, slackY);
+  return { unit: '%', x, y, width, 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: round2(crop.x),
+    y: round2(crop.y),
+    width: round2(crop.width),
+    height: round2(crop.height),
+  };
+}
+
+function clamp(v: number, lo: number, hi: number) {
+  return v < lo ? lo : v > hi ? hi : v;
+}
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}

package/src/app/components/inspector/inspect-overlay.tsx

@@ -12,7 +12,7 @@ const FRAME_MORPH_MS = 180;
 const LAYOUT_TRACK_MS = PANEL_TRANSITION_MS + FRAME_MORPH_MS;
 
 export function InspectOverlay() {
-  const { active, slideId, selected, setSelected, cancel } = useInspector();
+  const { active, slideId, selected, setSelected, cancel, openCrop } = useInspector();
   const overlayRef = useRef<HTMLDivElement>(null);
   const [hover, setHover] = useState<Highlight | null>(null);
 
@@ -50,15 +50,30 @@ export function InspectOverlay() {
       setHover({ hit });
     };
 
+    const onDblClick = (e: MouseEvent) => {
+      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, { hostOnly: true });
+      if (!hit) return;
+      if (!(hit.anchor instanceof HTMLImageElement)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setSelected({ line: hit.line, column: hit.column, anchor: hit.anchor });
+      openCrop(hit.anchor);
+    };
+
     window.addEventListener('pointermove', onMove, true);
     window.addEventListener('click', onClick, true);
+    window.addEventListener('dblclick', onDblClick, true);
     window.addEventListener('keydown', onKey, true);
     return () => {
       window.removeEventListener('pointermove', onMove, true);
       window.removeEventListener('click', onClick, true);
+      window.removeEventListener('dblclick', onDblClick, true);
       window.removeEventListener('keydown', onKey, true);
     };
-  }, [active, slideId, setSelected, cancel]);
+  }, [active, slideId, setSelected, cancel, openCrop]);
 
   return (
     <FrameOverlay

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} />}
@@ -202,7 +207,12 @@ export function InspectorPanel() {
         <>
           <Separator />
           <Section title={t.inspector.imageSection}>
-            <ImageField slideId={slideId} src={pinSnapshot.imageSrc} apply={apply} />
+            <ImageField
+              slideId={slideId}
+              src={pinSnapshot.imageSrc}
+              anchor={pinSelected.anchor}
+              apply={apply}
+            />
           </Section>
         </>
       )}
@@ -587,14 +597,18 @@ function ColorField({
 function ImageField({
   slideId,
   src,
+  anchor,
   apply,
 }: {
   slideId: string;
   src: string;
+  anchor: HTMLElement;
   apply: (ops: EditOp[]) => void;
 }) {
   const [open, setOpen] = useState(false);
   const t = useLocale();
+  const { openCrop } = useInspector();
+  const isImage = anchor.tagName === 'IMG';
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-3">
@@ -609,16 +623,30 @@ function ImageField({
             }}
           />
         </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="flex-1"
-          onClick={() => setOpen(true)}
-        >
-          <ImageIcon className="size-3.5" />
-          {t.inspector.replace}
-        </Button>
+        <div className="flex flex-1 gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => setOpen(true)}
+          >
+            <ImageIcon className="size-3.5" />
+            {t.inspector.replace}
+          </Button>
+          {isImage && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="flex-1"
+              onClick={() => openCrop(anchor as HTMLImageElement)}
+            >
+              <Crop className="size-3.5" />
+              {t.inspector.crop}
+            </Button>
+          )}
+        </div>
       </div>
       {open && (
         <AssetPickerDialog
@@ -626,14 +654,25 @@ function ImageField({
           onClose={() => setOpen(false)}
           onPick={(asset) => {
             setOpen(false);
-            apply([
+            const ops: EditOp[] = [
               {
                 kind: 'set-attr-asset',
                 attr: 'src',
                 assetPath: `./assets/${asset.name}`,
                 previewUrl: asset.url,
               },
-            ]);
+            ];
+            if (isImage) {
+              const cs = window.getComputedStyle(anchor);
+              if (cs.objectFit !== 'cover' && cs.objectFit !== 'contain') {
+                ops.push({ kind: 'set-style', key: 'objectFit', value: 'cover' });
+              }
+              const op = cs.objectPosition.trim();
+              if (!op || op === '0% 0%' || op === 'auto') {
+                ops.push({ kind: 'set-style', key: 'objectPosition', value: '50% 50%' });
+              }
+            }
+            apply(ops);
           }}
         />
       )}
@@ -767,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,
@@ -791,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
@@ -803,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,6 +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, type ImageCropRect } from './image-crop-dialog';
 
 export type SelectedTarget = {
   line: number;
@@ -69,6 +70,7 @@ type InspectorCtx = {
   commitEdits: () => Promise<void>;
   cancelEdits: () => void;
   committing: boolean;
+  openCrop: (anchor: HTMLImageElement) => void;
 };
 
 const Ctx = createContext<InspectorCtx | null>(null);
@@ -90,6 +92,17 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   const instanceCounterRef = useRef(0);
   const [pendingCount, setPendingCount] = useState(0);
   const [committing, setCommitting] = useState(false);
+  const [cropTarget, setCropTarget] = useState<{
+    line: number;
+    column: number;
+    anchor: HTMLImageElement;
+    src: string;
+    targetWidth: number;
+    targetHeight: number;
+    initialFit: 'cover' | 'contain';
+    initialPosition: { x: number; y: number };
+    initialRect: ImageCropRect | null;
+  } | null>(null);
   const t = useLocale();
 
   const ensureInstanceId = useCallback((el: HTMLElement): string => {
@@ -529,6 +542,27 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     setSelected(null);
   }, []);
 
+  const openCrop = useCallback((anchor: HTMLImageElement) => {
+    const loc = anchor.dataset.slideLoc;
+    if (!loc) return;
+    const [lineStr, columnStr] = loc.split(':');
+    const line = Number(lineStr);
+    const column = Number(columnStr);
+    if (!Number.isFinite(line) || !Number.isFinite(column)) return;
+    const cs = window.getComputedStyle(anchor);
+    setCropTarget({
+      line,
+      column,
+      anchor,
+      src: anchor.currentSrc || anchor.src,
+      targetWidth: anchor.offsetWidth || anchor.getBoundingClientRect().width,
+      targetHeight: anchor.offsetHeight || anchor.getBoundingClientRect().height,
+      initialFit: cs.objectFit === 'contain' ? 'contain' : 'cover',
+      initialPosition: parseObjectPosition(cs.objectPosition),
+      initialRect: parseObjectViewBox(cs.getPropertyValue('object-view-box')),
+    });
+  }, []);
+
   const value = useMemo<InspectorCtx>(
     () => ({
       slideId,
@@ -549,6 +583,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       commitEdits,
       cancelEdits,
       committing,
+      openCrop,
     }),
     [
       slideId,
@@ -568,10 +603,110 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       commitEdits,
       cancelEdits,
       committing,
+      openCrop,
     ],
   );
 
-  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+  return (
+    <Ctx.Provider value={value}>
+      {children}
+      {cropTarget && (
+        <ImageCropDialog
+          src={cropTarget.src}
+          targetWidth={cropTarget.targetWidth}
+          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) {
+              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: 'objectViewBox',
+                  value: `inset(${top}% ${right}% ${bottom}% ${left}%)`,
+                });
+              } else {
+                ops.push({ kind: 'set-style', key: 'objectViewBox', value: null });
+              }
+              bufferOps(line, column, anchor, ops);
+            }
+            setCropTarget(null);
+          }}
+        />
+      )}
+    </Ctx.Provider>
+  );
+}
+
+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%';
+  const yRaw = parts[1] ?? xRaw;
+  return { x: parsePercent(xRaw, 50), y: parsePercent(yRaw, 50) };
+}
+
+function parsePercent(s: string, fallback: number): number {
+  if (s === 'center') return 50;
+  if (s === 'left' || s === 'top') return 0;
+  if (s === 'right' || s === 'bottom') return 100;
+  const m = s.match(/(-?\d+(?:\.\d+)?)%/);
+  if (m?.[1]) return Number(m[1]);
+  return fallback;
 }
 
 export function InspectToggleButton() {