@open-slide/core 1.6.0 → 1.7.0

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

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 { AssetPickerDialog } from './asset-picker-dialog';
 import { ImageCropDialog, type ImageCropRect } from './image-crop-dialog';
 
 export type SelectedTarget = {
@@ -263,6 +264,7 @@ type InspectorCtx = {
   cancelEdits: () => void;
   committing: boolean;
   openCrop: (anchor: HTMLImageElement) => void;
+  openReplace: (anchor: HTMLElement) => void;
 };
 
 const Ctx = createContext<InspectorCtx | null>(null);
@@ -273,7 +275,15 @@ export function useInspector(): InspectorCtx {
   return v;
 }
 
-export function InspectorProvider({ slideId, children }: { slideId: string; children: ReactNode }) {
+export function InspectorProvider({
+  slideId,
+  pageIndex,
+  children,
+}: {
+  slideId: string;
+  pageIndex: number;
+  children: ReactNode;
+}) {
   const [active, setActive] = useState(false);
   const [selected, setSelected] = useState<SelectedTarget | null>(null);
   const { comments, error, refetch, add, remove } = useComments(slideId);
@@ -296,6 +306,11 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     initialPosition: { x: number; y: number };
     initialRect: ImageCropRect | null;
   } | null>(null);
+  const [replaceTarget, setReplaceTarget] = useState<{
+    line: number;
+    column: number;
+    anchor: HTMLElement;
+  } | null>(null);
   const t = useLocale();
 
   const ensureInstanceId = useCallback((el: HTMLElement): string => {
@@ -871,6 +886,35 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     return () => observer?.disconnect();
   }, []);
 
+  useEffect(() => {
+    void pageIndex;
+    setSelected(null);
+  }, [pageIndex]);
+
+  // Never clear `selected` on a miss: the observer can fire between an
+  // "old removed" and "new added" mutation batch, and clearing then would
+  // drop a selection that's about to reattach on the next fire.
+  useEffect(() => {
+    if (!selected) return;
+    const root = document.querySelector<HTMLElement>('[data-inspector-root]');
+    if (!root) return;
+
+    const revalidate = () => {
+      if (selected.anchor.isConnected) return;
+      const next = root.querySelector<HTMLElement>(
+        `[data-slide-loc="${selected.line}:${selected.column}"]`,
+      );
+      if (next && next !== selected.anchor) {
+        setSelected({ ...selected, anchor: next });
+      }
+    };
+
+    revalidate();
+    const observer = new MutationObserver(revalidate);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [selected]);
+
   const toggle = useCallback(() => {
     setActive((a) => {
       if (a) setSelected(null);
@@ -883,6 +927,27 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     setSelected(null);
   }, []);
 
+  const openReplace = useCallback((anchor: HTMLElement) => {
+    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;
+    setReplaceTarget({ line, column, anchor });
+  }, []);
+
+  useEffect(() => {
+    if (import.meta.env.PROD) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLElement && e.target.matches('input, textarea')) return;
+      if (e.key !== 'i' && e.key !== 'I') return;
+      toggle();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [toggle]);
+
   const openCrop = useCallback((anchor: HTMLImageElement) => {
     const loc = anchor.dataset.slideLoc;
     if (!loc) return;
@@ -925,6 +990,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       cancelEdits,
       committing,
       openCrop,
+      openReplace,
     }),
     [
       slideId,
@@ -945,12 +1011,44 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       cancelEdits,
       committing,
       openCrop,
+      openReplace,
     ],
   );
 
   return (
     <Ctx.Provider value={value}>
       {children}
+      {replaceTarget && (
+        <AssetPickerDialog
+          slideId={slideId}
+          onClose={() => setReplaceTarget(null)}
+          onPick={(asset, scope) => {
+            const { line, column, anchor } = replaceTarget;
+            const assetPath =
+              scope === 'global' ? `@assets/${asset.name}` : `./assets/${asset.name}`;
+            const ops: EditOp[] = [
+              {
+                kind: 'set-attr-asset',
+                attr: 'src',
+                assetPath,
+                previewUrl: asset.url,
+              },
+            ];
+            if (anchor.tagName === 'IMG' && anchor.isConnected) {
+              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%' });
+              }
+            }
+            bufferOps(line, column, anchor, ops);
+            setReplaceTarget(null);
+          }}
+        />
+      )}
       {cropTarget && (
         <ImageCropDialog
           src={cropTarget.src}
@@ -1064,6 +1162,9 @@ export function InspectToggleButton() {
     >
       <Crosshair className="size-3.5" />
       <span className="hidden md:inline">{t.inspector.inspect}</span>
+      <kbd className="ml-1 hidden rounded-[3px] bg-foreground/10 px-1 font-mono text-[9.5px] tracking-[0.04em] md:inline">
+        I
+      </kbd>
     </Button>
   );
 }

package/src/app/components/panel/save-card.tsx

@@ -91,15 +91,15 @@ export function SaveCard({
           </div>
         )}
         {justSaved ? (
-          <span className="flex items-center gap-1.5 px-2.5 text-[12px] font-medium text-foreground">
-            <Check className="size-3.5 text-[oklch(0.55_0.13_165)]" strokeWidth={2.5} />
+          <span className="flex items-center gap-1.5 whitespace-nowrap px-2.5 text-[12px] font-medium text-foreground">
+            <Check className="size-3.5 shrink-0 text-[oklch(0.55_0.13_165)]" strokeWidth={2.5} />
             {resolvedSavedLabel}
           </span>
         ) : dirty || committing ? (
-          <span className="inline-flex items-center gap-1.5 px-2.5 text-[12px] font-medium text-foreground">
+          <span className="inline-flex items-center gap-1.5 whitespace-nowrap px-2.5 text-[12px] font-medium text-foreground">
             <span
               aria-hidden
-              className="size-1.5 rounded-full bg-brand shadow-[0_0_0_3px_var(--brand-soft)]"
+              className="size-1.5 shrink-0 rounded-full bg-brand shadow-[0_0_0_3px_var(--brand-soft)]"
             />
             <span className="nums">{unsavedLabel}</span>
           </span>

package/src/app/components/player.tsx

@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
-import { SlidePageProvider } from '../lib/page-context';
 import type { Page } from '../lib/sdk';
+import type { SlideTransition } from '../lib/transition';
+import { usePrefersReducedMotion } from '../lib/use-prefers-reduced-motion';
 import { PresentBlackoutOverlay } from './present/blackout-overlay';
 import { PresentControlBar } from './present/control-bar';
 import { PresentHelpOverlay } from './present/help-overlay';
@@ -20,6 +21,7 @@ import {
 } from './present/use-presenter-channel';
 import { useTouchSwipe } from './present/use-touch-swipe';
 import { SlideCanvas } from './slide-canvas';
+import { SlideTransitionLayer } from './slide-transition-layer';
 
 const IDLE_HIDE_MS = 2000;
 const BAR_HOTZONE_PX = 160;
@@ -27,6 +29,7 @@ const BAR_HOTZONE_PX = 160;
 type Props = {
   pages: Page[];
   design?: DesignSystem;
+  transition?: SlideTransition;
   index: number;
   onIndexChange: (index: number) => void;
   onExit: () => void;
@@ -44,6 +47,7 @@ type Props = {
 export function Player({
   pages,
   design,
+  transition,
   index,
   onIndexChange,
   onExit,
@@ -52,6 +56,7 @@ export function Player({
   slideId,
   fullscreen = true,
 }: Props) {
+  const prefersReducedMotion = usePrefersReducedMotion();
   const rootRef = useRef<HTMLDivElement | null>(null);
   // Mirrored as state so descendants portaling *into* the player subtree
   // (tooltips, popovers — the body is outside the fullscreen tree) re-render
@@ -284,8 +289,6 @@ export function Player({
   const hideCursor =
     controls && (laser || keyboardDriven || (idle && !overlayActive && !pointerNearBottom));
 
-  const PageComp = pages[index];
-
   return (
     <div
       ref={setRoot}
@@ -296,11 +299,13 @@ export function Player({
       )}
     >
       <SlideCanvas flat design={design}>
-        {PageComp ? (
-          <SlidePageProvider index={index} total={pages.length}>
-            <PageComp />
-          </SlidePageProvider>
-        ) : null}
+        <SlideTransitionLayer
+          pages={pages}
+          index={index}
+          total={pages.length}
+          moduleTransition={transition}
+          disabled={prefersReducedMotion}
+        />
       </SlideCanvas>
 
       <button