@open-slide/core 1.5.0 → 1.7.0

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

@@ -1,6 +1,10 @@
+import { Crop, ImageIcon } from 'lucide-react';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { PANEL_TRANSITION_MS } from '@/components/panel/panel-shell';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { findSlideSource, type SlideSourceHit } from '@/lib/inspector/fiber';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
 import { useInspector } from './inspector-provider';
 
 type Highlight = { hit: SlideSourceHit };
@@ -31,6 +35,9 @@ export function InspectOverlay() {
     };
 
     const onMove = (e: PointerEvent) => {
+      if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) {
+        return setHover(null);
+      }
       const el = pickInspectorTarget(pickElement(e.clientX, e.clientY));
       if (!el) return setHover(null);
       const hit = findSlideSource(el, slideId, { hostOnly: true });
@@ -75,37 +82,48 @@ export function InspectOverlay() {
     };
   }, [active, slideId, setSelected, cancel, openCrop]);
 
+  const hoverAnchor = hover?.hit.anchor.isConnected ? hover.hit.anchor : null;
+  const selectedAnchor = selected?.anchor.isConnected ? selected.anchor : null;
+  const dedupedHover = hoverAnchor && hoverAnchor !== selectedAnchor ? hoverAnchor : null;
+
+  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.
-      targetAnchor={selected?.anchor ?? hover?.hit.anchor ?? null}
-    />
+    <div ref={overlayRef} data-inspector-ui className="pointer-events-none absolute inset-0 z-30">
+      <Frame anchor={selectedAnchor} overlayRef={overlayRef} variant="selected" showImageActions />
+      <Frame anchor={dedupedHover} overlayRef={overlayRef} variant="hover" />
+    </div>
   );
 }
 
-function FrameOverlay({
-  active,
+type FrameVariant = 'selected' | 'hover';
+
+const FRAME_STYLES: Record<FrameVariant, React.CSSProperties> = {
+  selected: { outline: '2px solid #3b82f6', background: 'rgba(59,130,246,0.1)' },
+  hover: { outline: '1.5px dashed #3b82f6', background: 'rgba(59,130,246,0.05)' },
+};
+
+function Frame({
+  anchor,
   overlayRef,
-  targetAnchor,
+  variant,
+  showImageActions = false,
 }: {
-  active: boolean;
+  anchor: HTMLElement | null;
   overlayRef: React.RefObject<HTMLDivElement>;
-  targetAnchor: HTMLElement | null;
+  variant: FrameVariant;
+  showImageActions?: boolean;
 }) {
   const [rect, setRect] = useState<RelRect | null>(null);
   const [hasTarget, setHasTarget] = useState(false);
 
   const measure = useCallback(() => {
     const overlay = overlayRef.current;
-    if (!active || !targetAnchor?.isConnected || !overlay) {
+    if (!anchor?.isConnected || !overlay) {
       setHasTarget(false);
       return;
     }
 
-    const targetRect = targetAnchor.getBoundingClientRect();
+    const targetRect = anchor.getBoundingClientRect();
     const overlayRect = overlay.getBoundingClientRect();
     const next = {
       left: targetRect.left - overlayRect.left,
@@ -116,14 +134,14 @@ function FrameOverlay({
 
     setHasTarget(true);
     setRect((prev) => (sameRect(prev, next) ? prev : next));
-  }, [active, overlayRef, targetAnchor]);
+  }, [overlayRef, anchor]);
 
   useLayoutEffect(() => {
     measure();
   }, [measure]);
 
   useEffect(() => {
-    if (!active) {
+    if (!anchor) {
       setHasTarget(false);
       return;
     }
@@ -139,7 +157,7 @@ function FrameOverlay({
     const root = document.querySelector<HTMLElement>('[data-inspector-root]');
     if (root) resizeObserver.observe(root);
     if (overlayRef.current) resizeObserver.observe(overlayRef.current);
-    if (targetAnchor) resizeObserver.observe(targetAnchor);
+    resizeObserver.observe(anchor);
 
     const stopAt = performance.now() + LAYOUT_TRACK_MS;
     const trackPanelTransition = () => {
@@ -157,9 +175,9 @@ function FrameOverlay({
       window.removeEventListener('resize', scheduleMeasure, true);
       window.removeEventListener('scroll', scheduleMeasure, true);
     };
-  }, [active, measure, overlayRef, targetAnchor]);
+  }, [measure, overlayRef, anchor]);
 
-  const visible = !!(active && hasTarget && rect);
+  const visible = !!(hasTarget && rect);
 
   // First render after appearing: snap to the new rect (no transition).
   // Subsequent rect changes in the same visible session: animate.
@@ -173,31 +191,110 @@ function FrameOverlay({
     return () => clearTimeout(t);
   }, [visible]);
 
-  if (!active) return null;
+  if (!rect) return null;
   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`;
 
+  const imageAnchor = anchor instanceof HTMLImageElement ? anchor : null;
+  const actionsVisible = showImageActions && visible && !!imageAnchor;
+
   return (
-    <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
+        className="absolute"
+        style={{
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          opacity: visible ? 1 : 0,
+          transition,
+          ...FRAME_STYLES[variant],
+        }}
+      />
+      {showImageActions && imageAnchor && (
+        <ImageActionPanel
+          anchor={imageAnchor}
+          rect={rect}
+          visible={actionsVisible}
+          transition={transition}
         />
       )}
-    </div>
+    </>
+  );
+}
+
+const FLOATING_PANEL_GAP = 8;
+
+function ImageActionPanel({
+  anchor,
+  rect,
+  visible,
+  transition,
+}: {
+  anchor: HTMLElement;
+  rect: RelRect;
+  visible: boolean;
+  transition: string;
+}) {
+  const { openCrop, openReplace } = useInspector();
+  const t = useLocale();
+  return (
+    <TooltipProvider delayDuration={200}>
+      <div
+        className={cn(
+          'absolute flex items-center gap-0.5 rounded-[8px] border border-border bg-popover p-1 text-popover-foreground shadow-floating',
+          visible ? 'pointer-events-auto' : 'pointer-events-none',
+        )}
+        style={{
+          left: rect.left + rect.width / 2,
+          top: rect.top + rect.height + FLOATING_PANEL_GAP,
+          transform: 'translateX(-50%)',
+          opacity: visible ? 1 : 0,
+          transition,
+        }}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              aria-label={t.inspector.replace}
+              onClick={(e) => {
+                e.stopPropagation();
+                openReplace(anchor);
+              }}
+              className="inline-flex size-7 items-center justify-center rounded-[5px] text-foreground/85 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            >
+              <ImageIcon className="size-3.5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" data-inspector-ui>
+            {t.inspector.replace}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              aria-label={t.inspector.crop}
+              onClick={(e) => {
+                e.stopPropagation();
+                openCrop(anchor as HTMLImageElement);
+              }}
+              className="inline-flex size-7 items-center justify-center rounded-[5px] text-foreground/85 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            >
+              <Crop className="size-3.5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" data-inspector-ui>
+            {t.inspector.crop}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
   );
 }
 

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

@@ -3,27 +3,17 @@ import {
   AlignJustify,
   AlignLeft,
   AlignRight,
-  ArrowDownToLine,
   Bold,
   Crop,
+  Crosshair,
   ImageIcon,
   Italic,
-  Loader2,
-  Upload,
   X,
 } from 'lucide-react';
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import { toast } from 'sonner';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PANEL_TRANSITION_MS, PanelShell, useAnimatedOpen } from '@/components/panel/panel-shell';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import {
   Select,
@@ -34,18 +24,16 @@ import {
 } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { Slider } from '@/components/ui/slider';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 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, uploadWithAutoRename, useAssets } from '@/lib/assets';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import type { EditOp } from '@/lib/inspector/use-editor';
 import { useAgentSocketConnected } from '@/lib/use-agent-socket';
-import { format, useLocale } from '@/lib/use-locale';
-import { cn } from '@/lib/utils';
+import { useLocale } from '@/lib/use-locale';
 import type { Locale } from '../../../locale/types';
+import { AssetPickerDialog } from './asset-picker-dialog';
 import { type SelectedTarget, useInspector } from './inspector-provider';
 
 type ElementSnapshot = {
@@ -249,6 +237,7 @@ export function InspectorPanel() {
       header={
         <>
           <div className="flex min-w-0 items-center gap-2">
+            <Crosshair className="size-3.5 text-muted-foreground" />
             <span className="font-heading text-[12px] font-semibold tracking-tight">
               {t.inspector.inspect}
             </span>
@@ -274,17 +263,18 @@ export function InspectorPanel() {
       footer={<CommentsSection selected={pinSelected} onAdd={add} />}
     >
       {pinSnapshot.text !== null && (
-        <Section title={t.inspector.contentSection}>
-          <ContentField
-            snapshot={pinSnapshot}
-            apply={apply}
-            onSelectionChange={setContentSelection}
-          />
-        </Section>
+        <>
+          <Section title={t.inspector.contentSection}>
+            <ContentField
+              snapshot={pinSnapshot}
+              apply={apply}
+              onSelectionChange={setContentSelection}
+            />
+          </Section>
+          <Separator />
+        </>
       )}
 
-      <Separator />
-
       <Section title={t.inspector.typographySection}>
         <FontSizeField snapshot={typographySnapshot} apply={applyTextStyle} />
         <FontWeightField snapshot={typographySnapshot} apply={applyTextStyle} />
@@ -317,12 +307,7 @@ export function InspectorPanel() {
         <>
           <Separator />
           <Section title={t.inspector.imageSection}>
-            <ImageField
-              slideId={slideId}
-              src={pinSnapshot.imageSrc}
-              anchor={pinSelected.anchor}
-              apply={apply}
-            />
+            <ImageField src={pinSnapshot.imageSrc} anchor={pinSelected.anchor} />
           </Section>
         </>
       )}
@@ -747,20 +732,9 @@ function ColorField({
   );
 }
 
-function ImageField({
-  slideId,
-  src,
-  anchor,
-  apply,
-}: {
-  slideId: string;
-  src: string;
-  anchor: HTMLElement;
-  apply: (ops: EditOp[]) => void;
-}) {
-  const [open, setOpen] = useState(false);
+function ImageField({ src, anchor }: { src: string; anchor: HTMLElement }) {
   const t = useLocale();
-  const { openCrop } = useInspector();
+  const { openCrop, openReplace } = useInspector();
   const isImage = anchor.tagName === 'IMG';
   return (
     <div className="space-y-2">
@@ -782,7 +756,7 @@ function ImageField({
             variant="outline"
             size="sm"
             className="flex-1"
-            onClick={() => setOpen(true)}
+            onClick={() => openReplace(anchor)}
           >
             <ImageIcon className="size-3.5" />
             {t.inspector.replace}
@@ -801,36 +775,6 @@ function ImageField({
           )}
         </div>
       </div>
-      {open && (
-        <AssetPickerDialog
-          slideId={slideId}
-          onClose={() => setOpen(false)}
-          onPick={(asset, scope) => {
-            setOpen(false);
-            const assetPath =
-              scope === 'global' ? `@assets/${asset.name}` : `./assets/${asset.name}`;
-            const ops: EditOp[] = [
-              {
-                kind: 'set-attr-asset',
-                attr: 'src',
-                assetPath,
-                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);
-          }}
-        />
-      )}
     </div>
   );
 }
@@ -894,187 +838,6 @@ function PlaceholderField({
   );
 }
 
-type PickerScope = 'slide' | 'global';
-const GLOBAL_PICKER_SLIDE_ID = '@global';
-
-function AssetPickerDialog({
-  slideId,
-  onClose,
-  onPick,
-}: {
-  slideId: string;
-  onClose: () => void;
-  onPick: (asset: AssetEntry, scope: PickerScope) => void;
-}) {
-  const [scope, setScope] = useState<PickerScope>('slide');
-  const effectiveSlideId = scope === 'global' ? GLOBAL_PICKER_SLIDE_ID : slideId;
-  const { assets, loading, refresh } = useAssets(effectiveSlideId);
-  const images = assets.filter((a) => a.mime.startsWith('image/'));
-  const t = useLocale();
-  const path = scope === 'global' ? 'assets/' : `slides/${slideId}/assets/`;
-  const [descPrefix, descSuffix] = t.inspector.replaceImageDescription.split('{path}');
-  const [uploading, setUploading] = useState(false);
-  const [dragActive, setDragActive] = useState(false);
-  const dragDepth = useRef(0);
-  const inputId = useId();
-
-  const handleFile = useCallback(
-    async (file: File) => {
-      if (!file.type.startsWith('image/')) return;
-      setUploading(true);
-      try {
-        const { ok, status, entry } = await uploadWithAutoRename(effectiveSlideId, file);
-        if (!ok || !entry) {
-          toast.error(format(t.asset.toastUploadFailed, { status }));
-          return;
-        }
-        await refresh().catch(() => {});
-        onPick(entry, scope);
-      } finally {
-        setUploading(false);
-      }
-    },
-    [effectiveSlideId, scope, refresh, onPick, t],
-  );
-
-  return (
-    <Dialog open onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="sm:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>{t.inspector.replaceImageDialogTitle}</DialogTitle>
-          <DialogDescription>
-            {descPrefix}
-            <span className="font-mono">{path}</span>
-            {descSuffix}
-          </DialogDescription>
-        </DialogHeader>
-        <Tabs value={scope} onValueChange={(next) => setScope(next as PickerScope)}>
-          <TabsList>
-            <TabsTrigger value="slide">{t.asset.scopeSlide}</TabsTrigger>
-            <TabsTrigger value="global">{t.asset.scopeGlobal}</TabsTrigger>
-          </TabsList>
-        </Tabs>
-        <label
-          htmlFor={inputId}
-          className={cn(
-            'absolute right-12 top-3.5 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[5px] border border-border bg-card px-2 text-[12px] font-medium transition-colors',
-            'hover:bg-muted/60 hover:border-foreground/20 active:translate-y-px',
-            uploading && 'pointer-events-none opacity-60',
-          )}
-        >
-          {uploading ? (
-            <Loader2 className="size-3.5 animate-spin" />
-          ) : (
-            <Upload className="size-3.5" />
-          )}
-          <span>{t.asset.upload}</span>
-        </label>
-        <input
-          id={inputId}
-          type="file"
-          accept="image/*"
-          className="sr-only"
-          disabled={uploading}
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            e.target.value = '';
-            if (file) handleFile(file).catch(() => {});
-          }}
-        />
-        <section
-          aria-label={t.inspector.replaceImageDialogTitle}
-          className="relative max-h-[60vh] overflow-y-auto"
-          onDragEnter={(e) => {
-            if (uploading || !hasFiles(e)) return;
-            e.preventDefault();
-            dragDepth.current += 1;
-            setDragActive(true);
-          }}
-          onDragOver={(e) => {
-            if (uploading || !hasFiles(e)) return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = 'copy';
-          }}
-          onDragLeave={() => {
-            dragDepth.current = Math.max(0, dragDepth.current - 1);
-            if (dragDepth.current === 0) setDragActive(false);
-          }}
-          onDrop={(e) => {
-            if (uploading || !hasFiles(e)) return;
-            e.preventDefault();
-            dragDepth.current = 0;
-            setDragActive(false);
-            const file = e.dataTransfer.files?.[0];
-            if (file) handleFile(file).catch(() => {});
-          }}
-        >
-          {loading ? (
-            <p className="px-1 py-6 text-center text-xs text-muted-foreground">
-              {t.inspector.pickerLoading}
-            </p>
-          ) : images.length === 0 ? (
-            <p className="px-1 py-6 text-center text-xs text-muted-foreground">
-              {t.inspector.pickerEmpty}
-            </p>
-          ) : (
-            <div className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-3">
-              {images.map((asset) => (
-                <button
-                  key={asset.name}
-                  type="button"
-                  onClick={() => onPick(asset, scope)}
-                  className={cn(
-                    'group flex flex-col overflow-hidden rounded-lg border bg-card text-left shadow-sm transition-all',
-                    'hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none',
-                  )}
-                >
-                  <div className="flex aspect-square w-full items-center justify-center overflow-hidden bg-[repeating-conic-gradient(theme(colors.muted)_0_25%,transparent_0_50%)] bg-[length:12px_12px]">
-                    <img
-                      src={asset.url}
-                      alt=""
-                      className="size-full object-contain"
-                      draggable={false}
-                    />
-                  </div>
-                  <div className="border-t px-2 py-1.5">
-                    <div className="truncate text-[11px] font-medium" title={asset.name}>
-                      {asset.name}
-                    </div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          )}
-          {dragActive && (
-            <div
-              className="pointer-events-none absolute inset-0 z-10 animate-in fade-in-0 duration-200"
-              aria-hidden
-            >
-              <div className="absolute inset-0 bg-brand/5" />
-              <div className="absolute inset-1 rounded-[8px] border border-dashed border-brand/40" />
-              <div className="absolute inset-x-0 bottom-4 flex justify-center">
-                <div className="flex items-center gap-2 rounded-[6px] border border-border bg-card px-3 py-1.5 text-[12px] font-medium shadow-floating">
-                  <ArrowDownToLine className="size-3.5 text-brand" />
-                  <span>{t.asset.dropToUpload}</span>
-                </div>
-              </div>
-            </div>
-          )}
-        </section>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function hasFiles(e: React.DragEvent): boolean {
-  const types = e.dataTransfer?.types;
-  if (!types) return false;
-  for (let i = 0; i < types.length; i++) {
-    if (types[i] === 'Files') return true;
-  }
-  return false;
-}
-
 function AgentWatchingBadge() {
   const t = useLocale();
   const connected = useAgentSocketConnected();