@agent-native/core 0.153.10 → 0.154.1

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -6,6 +6,7 @@ import {
   type CollabUser,
 } from "@agent-native/core/client/collab";
 import {
+  readClientAppState,
   setClientAppState,
   usePinchZoom,
   useAvatarUrl,
@@ -17,15 +18,7 @@ import {
 } from "@agent-native/toolkit/collab-ui";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import { hashSlideContent } from "@shared/slide-fit";
-import {
-  IconBrush,
-  IconClipboard,
-  IconCopy,
-  IconStackBack,
-  IconStackFront,
-  IconTrash,
-  IconX,
-} from "@tabler/icons-react";
+import { IconX } from "@tabler/icons-react";
 import {
   useState,
   useCallback,
@@ -73,6 +66,7 @@ import {
   MAX_CANVAS_ZOOM,
   MIN_CANVAS_ZOOM,
 } from "@/lib/canvas-zoom";
+import { downloadImage } from "@/lib/image-download";
 import { extractMermaidBlocks } from "@/lib/mermaid-blocks";
 import { publishSlidesSelection } from "@/lib/slide-agent-context";
 import {
@@ -113,6 +107,7 @@ import {
   getInlineTextStyleSnapshot,
   getInlineTextStyleSnapshotForRange,
   restoreEditableTextRange,
+  selectAllEditableText,
   snapshotEditableTextRange,
   type InlineTextStylePatch,
   type InlineTextStyleSnapshot,
@@ -167,6 +162,7 @@ import { type SlideStylePatch, type SlideStyleSnapshot } from "./slide-style";
 import {
   findSmartBlock,
   isInlineTextElement,
+  isSlideTextEditingTarget,
   isTextLeaf,
   shouldStampBuilderId,
 } from "./slide-text-targets";
@@ -1064,6 +1060,13 @@ function syncOverflowToAppState(
   }
 }
 
+function layoutWarningDismissalStateKey(
+  deckId: string | undefined,
+  slideId: string,
+): string {
+  return `slides-layout-warning-dismissed:${deckId ?? "local"}:${slideId}`;
+}
+
 export default function SlideEditor({
   slide,
   onUpdateSlide,
@@ -1222,12 +1225,54 @@ export default function SlideEditor({
   const repairRequestTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
     null,
   );
-  const [dismissedOverflowWarningKey, setDismissedOverflowWarningKey] =
+  const overflowWarningStateKey = layoutWarningDismissalStateKey(
+    deckId,
+    slide.id,
+  );
+  const overflowContentHash = hashSlideContent(slide.content);
+  const [dismissedOverflowWarningHash, setDismissedOverflowWarningHash] =
     useState<string | null>(null);
-  const overflowWarningKey = `${slide.id}:${hashSlideContent(slide.content)}`;
-  const warningVisible = dismissedOverflowWarningKey !== overflowWarningKey;
-  const dismissWarning = () =>
-    setDismissedOverflowWarningKey(overflowWarningKey);
+  const [overflowWarningDismissalStatus, setOverflowWarningDismissalStatus] =
+    useState<"loading" | "loaded" | "error">("loading");
+  useEffect(() => {
+    let cancelled = false;
+    setDismissedOverflowWarningHash(null);
+    setOverflowWarningDismissalStatus("loading");
+    void readClientAppState<unknown>(overflowWarningStateKey)
+      .then((value) => {
+        if (cancelled) return;
+        setDismissedOverflowWarningHash(
+          typeof value === "string" ? value : null,
+        );
+        setOverflowWarningDismissalStatus("loaded");
+      })
+      .catch((error: unknown) => {
+        if (cancelled) return;
+        console.error("Could not read slide overflow warning dismissal", error);
+        setDismissedOverflowWarningHash(null);
+        setOverflowWarningDismissalStatus("error");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [overflowWarningStateKey]);
+  const warningVisible =
+    overflowWarningDismissalStatus === "error" ||
+    (overflowWarningDismissalStatus === "loaded" &&
+      dismissedOverflowWarningHash !== overflowContentHash);
+  const dismissWarning = useCallback(() => {
+    setDismissedOverflowWarningHash(overflowContentHash);
+    setOverflowWarningDismissalStatus("loaded");
+    void setClientAppState(overflowWarningStateKey, overflowContentHash, {
+      keepalive: true,
+      requestSource: TAB_ID,
+    }).catch((error: unknown) => {
+      console.error(
+        "Could not persist slide overflow warning dismissal",
+        error,
+      );
+    });
+  }, [overflowContentHash, overflowWarningStateKey]);
   const dims = getAspectRatioDims(aspectRatio);
   const [fitCanvasZoom, setFitCanvasZoom] = useState(100);
   const userSetCanvasZoomRef = useRef(false);
@@ -1930,6 +1975,17 @@ export default function SlideEditor({
     return () => editingEl.removeEventListener("input", handleInput);
   }, [captureInlineEditDraft, editingEl, slide.id]);
 
+  // Keep canvas gesture handlers from stealing the browser's native text
+  // selection stream once an inline edit has started.
+  useEffect(() => {
+    if (!editingEl) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (event.button === 0) event.stopPropagation();
+    };
+    editingEl.addEventListener("pointerdown", onPointerDown);
+    return () => editingEl.removeEventListener("pointerdown", onPointerDown);
+  }, [editingEl]);
+
   useEffect(() => {
     if (!editingEl) return;
 
@@ -1981,6 +2037,17 @@ export default function SlideEditor({
       (isTextLeaf(editingEl) && RICH_BLOCK_TAGS.has(editingEl.tagName)) ||
       isBulletList(editingEl);
     const onKey = (e: KeyboardEvent) => {
+      const isSelectAll =
+        (e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "a";
+      if (isSelectAll) {
+        const editing = editingElRef.current;
+        if (!editing || !editing.isConnected) return;
+        e.preventDefault();
+        e.stopPropagation();
+        selectAllEditableText(editing);
+        return;
+      }
+
       // Ignore keys from outside the slide (e.g. the style dock's font-size
       // input). Guard against the LIVE slide content, not `editingEl`, which a
       // re-render may have detached — a stale ref would wrongly bail here and
@@ -2036,6 +2103,7 @@ export default function SlideEditor({
     exitInlineEdit,
     editingEl,
     captureInlineEditDraft,
+    selectAllEditableText,
     slide.id,
     getSlideContent,
   ]);
@@ -4123,10 +4191,12 @@ export default function SlideEditor({
 
   useEffect(() => {
     if (readOnly || editingEl) return;
-    if (multiSelection.size === 0 && !selectedElementSelector) return;
+    if (multiSelection.size === 0 && !selectedElementSelector && !selectedImg)
+      return;
     const onKey = (e: KeyboardEvent) => {
       if (!e.key.startsWith("Arrow")) return;
       const active = document.activeElement;
+      if (isSlideTextEditingTarget(e.target, active, editingEl)) return;
       if (
         active?.tagName === "INPUT" ||
         active?.tagName === "TEXTAREA" ||
@@ -4139,7 +4209,7 @@ export default function SlideEditor({
       if (!nudge) return;
       const { x: dx, y: dy } = nudge.delta;
 
-      if (multiSelection.size > 0 && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+      if (multiSelection.size > 0 && !e.metaKey && !e.ctrlKey) {
         const slideContent = getSlideContent();
         if (!slideContent) return;
         const elements = Array.from(multiSelection)
@@ -4188,17 +4258,51 @@ export default function SlideEditor({
         return;
       }
 
-      const element = resolveSelectedElement();
-      if (!element || !isPersistedFreeformObject(element)) return;
+      const slideContent = getSlideContent();
+      const element =
+        resolveSelectedElement() ??
+        (selectedImg && slideContent
+          ? (findPersistedImageObject(selectedImg, slideContent) ?? selectedImg)
+          : null);
+      if (!element) return;
+
+      // Arrow nudging is also a first-class way to move flow-layout text and
+      // images. Promote those elements using the same reversible freeform
+      // boundary as a real drag, then persist the exact resulting HTML.
+      const frozen = isPersistedFreeformObject(element)
+        ? { element }
+        : freezeElementForFreeformSelection(element);
+      if (!frozen || !isPersistedFreeformObject(frozen.element)) {
+        frozen?.restoreMarkdownTree?.();
+        return;
+      }
       e.preventDefault();
-      const geometry = getObjectGeometry(element);
+      const geometry = getObjectGeometry(frozen.element);
       geometry.x += dx;
       geometry.y += dy;
-      applyObjectGeometry(element, geometry);
+      applyObjectGeometry(frozen.element, geometry);
       const html = readCurrentSlideContentHtml();
+
+      if (frozen.restoreMarkdownTree) {
+        const objectId = frozen.element.getAttribute("data-slide-object-id");
+        if (objectId) {
+          const owner =
+            frozen.element.parentElement ?? frozen.element.ownerDocument;
+          owner
+            .querySelectorAll<HTMLElement>("[data-slide-layout-spacer-for]")
+            .forEach((spacer) => {
+              if (
+                spacer.getAttribute("data-slide-layout-spacer-for") === objectId
+              ) {
+                spacer.remove();
+              }
+            });
+        }
+        frozen.restoreMarkdownTree();
+      }
       if (html !== null) onUpdateSlideRef.current({ content: html });
-      const selector = getBuilderSelector(element);
-      if (selector) selectElementForStyling(element, selector);
+      const selector = getBuilderSelector(frozen.element);
+      if (selector) selectElementForStyling(frozen.element, selector);
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -4206,6 +4310,8 @@ export default function SlideEditor({
     applyObjectGeometry,
     commitMultiObjectChange,
     editingEl,
+    findPersistedImageObject,
+    freezeElementForFreeformSelection,
     getObjectGeometry,
     getSlideContent,
     multiSelection,
@@ -4214,6 +4320,7 @@ export default function SlideEditor({
     refreshMultiSelectionRects,
     resolveSelectedElement,
     selectElementForStyling,
+    selectedImg,
     selectedElementSelector,
   ]);
 
@@ -4268,7 +4375,11 @@ export default function SlideEditor({
         onExitTextBoxMode?.();
         return;
       }
-      if (editingEl) return; // avoid interfering with an active inline edit
+      if (
+        isSlideTextEditingTarget(e.target, document.activeElement, editingEl)
+      ) {
+        return;
+      }
 
       // Pointer-down on a member of the current multi-selection drags the
       // whole group instead of the single-object flow below.
@@ -5185,6 +5296,28 @@ export default function SlideEditor({
                                 horizontalOverflow={
                                   overflowInfo.horizontalOverflow
                                 }
+                                warningLabel={t(
+                                  "deckEditor.layoutOverflowWarning",
+                                )}
+                                overflowDetails={[
+                                  overflowInfo.verticalOverflow > 0
+                                    ? t("deckEditor.layoutOverflowVertical", {
+                                        pixels: overflowInfo.verticalOverflow,
+                                      })
+                                    : null,
+                                  overflowInfo.horizontalOverflow > 0
+                                    ? t("deckEditor.layoutOverflowHorizontal", {
+                                        pixels: overflowInfo.horizontalOverflow,
+                                      })
+                                    : null,
+                                ]
+                                  .filter((detail): detail is string =>
+                                    Boolean(detail),
+                                  )
+                                  .join(" · ")}
+                                overflowDetailsLabel={t(
+                                  "deckEditor.layoutOverflowDetails",
+                                )}
                                 isAskingAgentToFix={isAskingAgentToFix}
                                 dismissLabel={t(
                                   "deckEditor.dismissLayoutWarning",
@@ -5200,7 +5333,6 @@ export default function SlideEditor({
                           disabled={!hasObjectSelection}
                           onSelect={copySelectedObjects}
                         >
-                          <IconCopy className="me-2 h-4 w-4" />
                           {t("styleInspector.copy")}
                           <ContextMenuShortcut>
                             {shortcutLabel("cmd+c")}
@@ -5210,7 +5342,6 @@ export default function SlideEditor({
                           disabled={!hasObjectSelection}
                           onSelect={pasteSelectedObjects}
                         >
-                          <IconClipboard className="me-2 h-4 w-4" />
                           {t("styleInspector.paste")}
                           <ContextMenuShortcut>
                             {shortcutLabel("cmd+v")}
@@ -5220,7 +5351,6 @@ export default function SlideEditor({
                           disabled={!hasObjectSelection}
                           onSelect={duplicateSelectedObjects}
                         >
-                          <IconCopy className="me-2 h-4 w-4" />
                           {t("editorSidebar.duplicate")}
                           <ContextMenuShortcut>
                             {shortcutLabel("cmd+d")}
@@ -5230,7 +5360,6 @@ export default function SlideEditor({
                           disabled={!hasObjectSelection}
                           onSelect={deleteSelectedElements}
                         >
-                          <IconTrash className="me-2 h-4 w-4" />
                           {t("editorSidebar.delete")}
                           <ContextMenuShortcut>⌫</ContextMenuShortcut>
                         </ContextMenuItem>
@@ -5239,7 +5368,6 @@ export default function SlideEditor({
                           disabled={getStyleTargets().length === 0}
                           onSelect={copySelectedElementStyle}
                         >
-                          <IconBrush className="me-2 h-4 w-4" />
                           {t("styleInspector.copyStyle")}
                           <ContextMenuShortcut>
                             {shortcutLabel("cmd+alt+c")}
@@ -5252,7 +5380,6 @@ export default function SlideEditor({
                           }
                           onSelect={pasteCopiedElementStyle}
                         >
-                          <IconBrush className="me-2 h-4 w-4" />
                           {t("styleInspector.pasteStyle")}
                           <ContextMenuShortcut>
                             {shortcutLabel("cmd+alt+v")}
@@ -5263,14 +5390,12 @@ export default function SlideEditor({
                           disabled={!selectedElementSelector}
                           onSelect={() => handleArrangeSelected("front")}
                         >
-                          <IconStackFront className="me-2 h-4 w-4" />
                           {t("styleInspector.bringToFront")}
                         </ContextMenuItem>
                         <ContextMenuItem
                           disabled={!selectedElementSelector}
                           onSelect={() => handleArrangeSelected("back")}
                         >
-                          <IconStackBack className="me-2 h-4 w-4" />
                           {t("styleInspector.sendToBack")}
                         </ContextMenuItem>
                       </ContextMenuContent>
@@ -5357,10 +5482,12 @@ export default function SlideEditor({
       {imageOverlay && (
         <ImageOverlay
           anchorRect={imageOverlay.rect}
+          src={imageOverlay.src}
           objectFit={imageOverlay.objectFit}
           onGenerate={onGenerateImage}
           onLibrary={() => onOpenAssetLibrary(imageOverlay.src)}
           onUpload={() => onUploadImage(imageOverlay.src)}
+          onDownload={() => void downloadImage(imageOverlay.src)}
           onToggleObjectFit={() => {
             const newFit =
               imageOverlay.objectFit === "cover" ? "contain" : "cover";

package/corpus/templates/slides/app/components/editor/SlideOverflowWarning.tsx

@@ -1,10 +1,19 @@
-import { IconAlertTriangle, IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconInfoCircle, IconX } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface SlideOverflowWarningProps {
   verticalOverflow: number;
   horizontalOverflow?: number;
+  warningLabel: string;
+  overflowDetails: string;
+  overflowDetailsLabel: string;
   isAskingAgentToFix: boolean;
   dismissLabel: string;
   onFix: () => void;
@@ -12,21 +21,14 @@ interface SlideOverflowWarningProps {
 }
 
 export function SlideOverflowWarning({
-  verticalOverflow,
-  horizontalOverflow = 0,
+  warningLabel,
+  overflowDetails,
+  overflowDetailsLabel,
   isAskingAgentToFix,
   dismissLabel,
   onFix,
   onDismiss,
 }: SlideOverflowWarningProps) {
-  const overflowLabel = [
-    verticalOverflow > 0 ? `vertical ${verticalOverflow}px` : "",
-    horizontalOverflow > 0 ? `horizontal ${horizontalOverflow}px` : "",
-  ]
-    .filter(Boolean)
-    .join(", ");
-  const visibleOverflowLabel =
-    horizontalOverflow > 0 ? overflowLabel : `${verticalOverflow}px`;
   return (
     <div
       role="status"
@@ -42,9 +44,23 @@ export function SlideOverflowWarning({
         className="h-3.5 w-3.5 flex-shrink-0 text-foreground"
         stroke={2}
       />
-      <span className="leading-tight">
-        Layout overflows by {visibleOverflowLabel}
-      </span>
+      <span className="leading-tight">{warningLabel}</span>
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              className="size-6 cursor-help text-muted-foreground hover:bg-transparent hover:text-foreground"
+              aria-label={overflowDetailsLabel}
+            >
+              <IconInfoCircle className="size-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="top">{overflowDetails}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <Button
         size="sm"
         variant="ghost"

package/corpus/templates/slides/app/components/editor/SpeakerNotesPanel.tsx

@@ -85,9 +85,9 @@ export function SpeakerNotesPanel({
       )}
       <button
         onClick={toggle}
-        className="flex w-full cursor-pointer items-center justify-between px-4 py-1.5"
+        className="group flex w-full cursor-pointer items-center justify-between px-4 py-1.5"
       >
-        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider transition-colors group-hover:text-foreground/80">
           {t("raw.speakerNotes")}
         </span>
         {expanded ? (

package/corpus/templates/slides/app/components/editor/canvas-interactions/slides-canvas-adapter.ts

@@ -151,8 +151,11 @@ export function resolveSlidesCanvasPointerIntent({
   ) {
     return "move-object-perimeter";
   }
+  // The interior of an editable text object belongs to native text selection.
+  // Only the measured outer edge is reserved for moving the selected object.
+  if (targetIsEditableText) return "edit-text";
   if (hasSelectedObject && targetWithinSelectedObject) {
     return "move-object-body";
   }
-  return targetIsEditableText ? "edit-text" : "none";
+  return "none";
 }

package/corpus/templates/slides/app/components/editor/rich-text-selection.ts

@@ -151,6 +151,20 @@ export function snapshotEditableTextRange(
   return getEditableTextRange(editable, selection)?.cloneRange() ?? null;
 }
 
+/** Selects the complete contents of one live slide text block. */
+export function selectAllEditableText(
+  editable: HTMLElement,
+  selection: Selection | null = window.getSelection(),
+) {
+  if (!selection) return false;
+  editable.focus({ preventScroll: true });
+  const range = document.createRange();
+  range.selectNodeContents(editable);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  return true;
+}
+
 /** Restores a captured range only while it is still safe to use in this block. */
 export function restoreEditableTextRange(
   editable: HTMLElement,

package/corpus/templates/slides/app/components/editor/slide-text-targets.ts

@@ -1,5 +1,7 @@
 import { findEnclosingList } from "./bullet-editing";
 
+type EditingTarget = EventTarget | Element | null;
+
 /** Inline markup changes presentation, but does not create a canvas target. */
 const INLINE_TEXT_TAGS = new Set([
   "SPAN",
@@ -23,6 +25,28 @@ export function isInlineTextElement(element: Element): boolean {
   return INLINE_TEXT_TAGS.has(element.tagName);
 }
 
+function isEditingTarget(target: EditingTarget): boolean {
+  if (!(target instanceof Element)) return false;
+  return (
+    (target instanceof HTMLElement && target.isContentEditable) ||
+    target.closest('[contenteditable="true"], [data-editing-block="true"]') !==
+      null
+  );
+}
+
+/** Whether a keyboard/pointer event belongs to an active slide text edit. */
+export function isSlideTextEditingTarget(
+  target: EditingTarget,
+  activeElement: Element | null = null,
+  editingElement: Element | null = null,
+): boolean {
+  return (
+    isEditingTarget(target) ||
+    isEditingTarget(activeElement) ||
+    isEditingTarget(editingElement)
+  );
+}
+
 export function shouldStampBuilderId(element: HTMLElement): boolean {
   return (
     !element.classList.contains("fmd-layout-spacer") &&

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -40,12 +40,10 @@ type GranularOp =
       op: "add-slide";
       slideId: string;
       afterSlideId?: string;
-      fields: {
-        content: string;
-        notes?: string;
-        layout?: string;
-        background?: string;
-      };
+      /** Everything but `id` and the transient `imageLoading` flag. A slide
+       * copied or restored through this op keeps its transition, animations,
+       * and image/Excalidraw data instead of silently losing them on reload. */
+      fields: Omit<Partial<Slide>, "id" | "imageLoading"> & { content: string };
     }
   | {
       op: "patch-deck-fields";
@@ -57,6 +55,16 @@ type GranularOp =
   | { op: "full-replace"; deck: Deck };
 
 export type PatchDeckOp = Exclude<GranularOp, { op: "full-replace" }>;
+
+/** Slide payload for an `add-slide` op. `imageLoading` is transient UI state
+ * and must not persist; everything else on the slide has to survive the round
+ * trip or a duplicated/restored slide comes back missing fields. */
+function addSlideFields(
+  slide: Slide,
+): Extract<GranularOp, { op: "add-slide" }>["fields"] {
+  const { id: _id, imageLoading: _imageLoading, ...fields } = slide;
+  return fields;
+}
 export type DeckReloadStatus = "loaded" | "failed" | "stale";
 export interface UpdateSlideOptions {
   persistence?: "debounced" | "immediate";
@@ -683,13 +691,11 @@ export function applyOpToDeck(deck: Deck, op: PatchDeckOp): Deck {
     case "add-slide": {
       if (deck.slides.some((s) => s.id === op.slideId)) return deck; // idempotent
       const newSlide: Slide = {
+        ...op.fields,
         id: op.slideId,
         content: op.fields.content,
         notes: op.fields.notes ?? "",
         layout: (op.fields.layout as SlideLayout) ?? "content",
-        ...(op.fields.background !== undefined
-          ? { background: op.fields.background }
-          : {}),
       };
       const slides = [...deck.slides];
       const afterIdx = op.afterSlideId
@@ -822,14 +828,7 @@ export function deriveInverseOp(
           op: "add-slide",
           slideId: prior.id,
           afterSlideId,
-          fields: {
-            content: prior.content,
-            notes: prior.notes,
-            layout: prior.layout,
-            ...(prior.background !== undefined
-              ? { background: prior.background }
-              : {}),
-          },
+          fields: addSlideFields(prior),
         },
         {
           op: "reorder-slides",
@@ -2127,12 +2126,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
         op: "add-slide",
         slideId: newSlide.id,
         afterSlideId,
-        fields: {
-          content: newSlide.content,
-          notes: newSlide.notes,
-          layout: newSlide.layout,
-          background: newSlide.background,
-        },
+        fields: addSlideFields(newSlide),
       };
       enqueueDeckOp(deckId, op);
       if (before) recordUndo(before, op, { label: "Add slide" });
@@ -2240,17 +2234,11 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       // Granular add-slide op — inserts the copy after the original. Build it
       // from the current deck before scheduling the React state update; the
       // functional updater runs later and cannot be used to produce the op.
-      const { id: newSlideId, ...rest } = copiedSlide;
       const op: PatchDeckOp = {
         op: "add-slide",
-        slideId: newSlideId,
+        slideId: copiedSlide.id,
         afterSlideId: slideId,
-        fields: {
-          content: rest.content,
-          notes: rest.notes,
-          layout: rest.layout,
-          background: rest.background,
-        },
+        fields: addSlideFields(copiedSlide),
       };
       enqueueDeckOp(deckId, op);
       recordUndo(before, op, { label: "Duplicate slide" });

package/corpus/templates/slides/app/global.css

@@ -69,6 +69,7 @@ button[title="Open agent sidebar"] {
   --sidebar-ring: 0 0% 50%;
 
   --accent-cyan: 187 100% 50%;
+  --slides-thumbnail-shadow: 0 0% 0%;
 }
 
 .light {
@@ -115,6 +116,29 @@ button[title="Open agent sidebar"] {
   --accent-cyan: 193 82% 31%;
 }
 
+[data-slides-thumbnail-scroll]::before {
+  position: absolute;
+  z-index: 20;
+  inset: 0.5rem 0.5rem auto;
+  height: 1rem;
+  pointer-events: none;
+  content: "";
+  opacity: 0;
+  background: radial-gradient(
+    ellipse 82% 125% at 50% 0%,
+    hsl(var(--slides-thumbnail-shadow) / 0.18) 0%,
+    hsl(var(--slides-thumbnail-shadow) / 0.08) 48%,
+    transparent 100%
+  );
+  box-shadow: 0 0.2rem 0.45rem -0.25rem
+    hsl(var(--slides-thumbnail-shadow) / 0.64);
+  transition: opacity 150ms ease-out;
+}
+
+[data-slides-thumbnail-scroll="scrolled"]::before {
+  opacity: 1;
+}
+
 /* Slides keeps the shared visual inspector behavior, but the dock and context toolbar need the
    flatter, filled-control treatment used by the slide editor. */
 .slide-style-inspector,