@agent-native/core 0.149.0 → 0.149.2

package/corpus/templates/slides/app/lib/export-pdf-client.ts

@@ -10,9 +10,16 @@
  * largest rendered element so a thumbnail's transform: scale(0.25)
  * doesn't shrink the captured pixels.
  */
+import { appBasePath } from "@agent-native/core/client/api-path";
+
 import { type AspectRatio, getAspectRatioDims } from "./aspect-ratios";
 import { importExportModule } from "./dynamic-import";
 
+/** Same-origin URL that re-serves a remote image, bypassing its missing CORS. */
+export function imageProxyUrl(src: string): string {
+  return `${appBasePath()}/api/image-proxy?url=${encodeURIComponent(src)}`;
+}
+
 /**
  * Cross-origin <img> elements without an explicit `crossOrigin="anonymous"`
  * attribute taint the canvas when rasterized via <foreignObject>, producing
@@ -21,8 +28,15 @@ import { importExportModule } from "./dynamic-import";
  * setting the attribute and re-assigning the same src. This is the root
  * cause of the "blank images in exported PDF" bug Rochkind reported.
  */
-export async function preloadImagesWithCors(root: HTMLElement): Promise<void> {
+export async function preloadImagesWithCors(
+  root: HTMLElement,
+): Promise<() => void> {
   const imgs = Array.from(root.querySelectorAll<HTMLImageElement>("img"));
+  // The slide DOM is the live editor canvas. Anything rewritten here would
+  // otherwise be picked up by the next save and persisted into the deck, so
+  // every mutation is recorded and undone once the capture is done.
+  const restores: Array<() => void> = [];
+
   await Promise.all(
     imgs.map(async (img) => {
       const src = img.currentSrc || img.src;
@@ -35,30 +49,59 @@ export async function preloadImagesWithCors(root: HTMLElement): Promise<void> {
         isCrossOrigin = false;
       }
       if (!isCrossOrigin) return;
+
+      const originalCrossOrigin = img.getAttribute("crossorigin");
+      const originalSrc = img.getAttribute("src");
+      const restore = () => {
+        if (originalCrossOrigin === null) img.removeAttribute("crossorigin");
+        else img.setAttribute("crossorigin", originalCrossOrigin);
+        if (originalSrc === null) img.removeAttribute("src");
+        else img.setAttribute("src", originalSrc);
+      };
+
       if (img.crossOrigin === "anonymous") {
         // Already CORS-enabled; just make sure it's decoded.
         try {
           await img.decode();
+          return;
         } catch {
-          /* ignore */
+          // coercion-ok: a failed direct load is the signal to try the proxy,
+          // and the proxy attempt below reports its own failure.
+        }
+      } else {
+        img.crossOrigin = "anonymous";
+        // Re-set src to retrigger the load with the new CORS attribute.
+        img.src = src;
+        restores.push(restore);
+        try {
+          await img.decode();
+          return;
+        } catch {
+          // coercion-ok: same as above — this is the CORS probe, not the
+          // final outcome.
         }
-        return;
       }
+
+      // The host does not send Access-Control-Allow-Origin, and no client-side
+      // flag can override that. Re-serve the image from our own origin so the
+      // canvas stays clean instead of rasterizing a blank rect.
+      if (!restores.includes(restore)) restores.push(restore);
       img.crossOrigin = "anonymous";
-      // Re-set src to retrigger the load with the new CORS attribute.
-      img.src = src;
+      img.src = imageProxyUrl(src);
       try {
         await img.decode();
       } catch (err) {
-        // Server didn't return Access-Control-Allow-Origin. The screenshot
-        // will be blank for this image — log so the user can swap the host.
         console.warn(
-          `[export-pdf] CORS-tainted image likely caused blank render: ${src}`,
+          `[export-pdf] image could not be loaded for export: ${src}`,
           err,
         );
       }
     }),
   );
+
+  return () => {
+    for (const restore of restores) restore();
+  };
 }
 
 export function findSlideExportSource(
@@ -132,23 +175,39 @@ export async function exportDeckAsPdf(
     // Force CORS-enabled re-fetch on every cross-origin <img> before
     // capture — otherwise the canvas tainting check inside modern-screenshot
     // produces a blank rect for the image.
-    await preloadImagesWithCors(source);
-
-    const dataUrl = await domToJpeg(source, {
-      width: dims.width,
-      height: dims.height,
-      scale: 2, // 2x for crisp text
-      backgroundColor: "#000000",
-      quality: 0.92,
-      // Pair with the in-DOM CORS preload above. modern-screenshot's
-      // internal image fetcher needs no-cache so re-issued requests don't
-      // get served the original tainted (no-CORS) response from the HTTP
-      // cache, and an anonymous-CORS request mode so the response itself
-      // is usable on a clean canvas.
-      fetch: {
-        requestInit: { cache: "no-cache", mode: "cors", credentials: "omit" },
-      },
-    });
+    const restoreImages = await preloadImagesWithCors(source);
+
+    let dataUrl: string;
+    try {
+      dataUrl = await domToJpeg(source, {
+        width: dims.width,
+        height: dims.height,
+        scale: 2, // 2x for crisp text
+        // guard:allow-raw-color — a PDF page has no theme to follow.
+        backgroundColor: "#000000",
+        quality: 0.92,
+        // Pair with the in-DOM CORS preload above. modern-screenshot's
+        // internal image fetcher needs no-cache so re-issued requests don't
+        // get served the original tainted (no-CORS) response from the HTTP
+        // cache, and an anonymous-CORS request mode so the response itself
+        // is usable on a clean canvas.
+        //
+        // `same-origin` rather than `omit`: images the preload rewrote to
+        // /api/image-proxy are same-origin and that route needs the session
+        // cookie, so omitting credentials would 401 exactly the images this
+        // is meant to rescue. Cross-origin requests still go out anonymously,
+        // which is what CORS mode requires.
+        fetch: {
+          requestInit: {
+            cache: "no-cache",
+            mode: "cors",
+            credentials: "same-origin",
+          },
+        },
+      });
+    } finally {
+      restoreImages();
+    }
 
     if (i > 0) pdf.addPage([dims.width, dims.height], orientation);
     pdf.addImage(dataUrl, "JPEG", 0, 0, dims.width, dims.height);

package/corpus/templates/slides/app/lib/import-uploaded-deck.ts

@@ -9,6 +9,16 @@ export type ImportedSourceDeck = {
   imagesSkipped: number;
 };
 
+/**
+ * PDF/PPTX import renders every page (image extraction, per-page fidelity
+ * parsing) and can run well past the client's default 60s action timeout on
+ * large or image-heavy files. A timeout here only aborts the client's wait —
+ * the server keeps importing and the deck still ends up with slides — so the
+ * default made the editor silently fail on a deck that had, or was about to
+ * have, real content.
+ */
+export const IMPORT_ACTION_TIMEOUT_MS = 5 * 60 * 1000;
+
 function sourceFormat(file: UploadedFile): "pdf" | "pptx" | null {
   const name = file.originalName.toLowerCase();
   if (name.endsWith(".pptx")) return "pptx";
@@ -57,6 +67,7 @@ export async function importUploadedDeckIntoDeck(
             deckId,
             importIntoDeck: true,
           },
+      { timeoutMs: IMPORT_ACTION_TIMEOUT_MS },
     ),
   );
   if (result.imported !== true || result.deckId !== deckId) {

package/corpus/templates/slides/app/lib/recent-references.ts

@@ -48,7 +48,10 @@ export function readRecentReferences(
     const parsed: unknown = JSON.parse(raw);
     if (!Array.isArray(parsed)) return { items: [], readable: false };
     return {
-      items: parsed.filter(isRecentReference).slice(0, MAX_RECENT_REFERENCES),
+      items: parsed
+        .filter(isRecentReference)
+        .sort((first, second) => second.lastUsedAt - first.lastUsedAt)
+        .slice(0, MAX_RECENT_REFERENCES),
       readable: true,
     };
   } catch {
@@ -56,6 +59,25 @@ export function readRecentReferences(
   }
 }
 
+export function forgetRecentReference(
+  kind: RecentReferenceKind,
+  storage:
+    | Pick<Storage, "getItem" | "setItem">
+    | null
+    | undefined = typeof window === "undefined" ? null : window.localStorage,
+): RecentReferencesResult {
+  const current = readRecentReferences(storage);
+  if (!storage || !current.readable) return current;
+
+  const next = current.items.filter((item) => item.kind !== kind);
+  try {
+    storage.setItem(RECENT_REFERENCES_STORAGE_KEY, JSON.stringify(next));
+    return { items: next, readable: true };
+  } catch {
+    return { items: current.items, readable: false };
+  }
+}
+
 export function rememberRecentReference(
   reference: Omit<RecentReference, "lastUsedAt">,
   storage:

package/corpus/templates/slides/app/lib/slide-animation-elements.ts

@@ -9,6 +9,14 @@ export interface AnimationTarget {
   elementPath?: number[];
 }
 
+export interface ResolvedAnimationTarget<
+  T extends AnimationTarget = AnimationTarget,
+> {
+  target: T;
+  element: Element;
+  key: string;
+}
+
 const INLINE_TAGS = new Set([
   "a",
   "abbr",
@@ -192,15 +200,45 @@ export function resolveSlideAnimationElement(
   root: Element,
   target: AnimationTarget,
 ): Element | null {
-  if (Array.isArray(target.elementPath) && target.elementPath.length > 0) {
-    const pathTarget = resolveElementPath(root, target.elementPath);
-    if (pathTarget) return pathTarget;
+  if (Array.isArray(target.elementPath)) {
+    // A supplied path is the identity of the target. Falling back to a
+    // legacy index after it goes stale can animate a different element while
+    // leaving the intended element visible.
+    return target.elementPath.length > 0
+      ? resolveElementPath(root, target.elementPath)
+      : null;
   }
 
   const legacyContainer = findLegacyAnimationContainer(root);
   return legacyContainer?.children.item(target.elementIndex) ?? null;
 }
 
+/**
+ * Resolve an ordered animation list as one validated unit. A null result
+ * means the list cannot be rendered faithfully - a missing or duplicate
+ * target must not become a phantom click step in the presentation player.
+ */
+export function resolveSlideAnimationTargets<T extends AnimationTarget>(
+  root: Element,
+  targets: readonly T[],
+): ResolvedAnimationTarget<T>[] | null {
+  const seen = new Set<string>();
+  const resolved: ResolvedAnimationTarget<T>[] = [];
+
+  for (const target of targets) {
+    const element = resolveSlideAnimationElement(root, target);
+    if (!element) return null;
+    const path = getElementPath(root, element);
+    if (!path) return null;
+    const key = animationElementKey(path);
+    if (seen.has(key)) return null;
+    seen.add(key);
+    resolved.push({ target, element, key });
+  }
+
+  return resolved;
+}
+
 export function getSlideAnimationTargetKey(
   html: string,
   target: AnimationTarget,

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -5,7 +5,7 @@ import {
   emailToColor,
   emailToName,
 } from "@agent-native/core/client/collab";
-import { useSession, callAction } from "@agent-native/core/client/hooks";
+import { useSession } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { useOrg } from "@agent-native/core/client/org";
 import {
@@ -54,7 +54,7 @@ import {
   useSlideComments,
   type CommentThread,
 } from "@/hooks/use-slide-comments";
-import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
+import { getAspectRatioDims } from "@/lib/aspect-ratios";
 import {
   deckAccessCheckKey,
   shouldShowDeckEditorSkeleton,
@@ -238,9 +238,6 @@ export default function DeckEditor() {
   const [pendingComment, setPendingComment] = useState<{
     quotedText: string;
   } | null>(null);
-  const imageGenButtonRef = useRef<HTMLButtonElement>(null);
-  const assetsButtonRef = useRef<HTMLButtonElement>(null);
-
   // Track which image src to replace
   const [replaceImageSrc, setReplaceImageSrc] = useState<string | null>(null);
 
@@ -345,6 +342,18 @@ export default function DeckEditor() {
     if (!generating) setAddSlideGenerating(false);
   }, [generating]);
 
+  // Below `md` the rail is a drawer behind a full-viewport dimming scrim; at
+  // `md` and up it's docked with no scrim. `sidebarOpen` is seeded from the
+  // width at mount only, so a window that starts wide and is then narrowed
+  // (or an editor opened in a resizable preview pane) keeps `sidebarOpen`
+  // true while the scrim stops being `md:hidden` — dimming the whole editor
+  // with no way to dismiss it.
+  useEffect(() => {
+    const onResize = () => setSidebarOpen(window.innerWidth >= 768);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
   const previousSlideIdsRef = useRef<string[]>([]);
   useEffect(() => {
     const currentSlideIds = deck?.slides.map((slide) => slide.id) ?? [];
@@ -1023,16 +1032,9 @@ export default function DeckEditor() {
           setReplaceImageSrc(null);
           setAssetLibraryOpen(true);
         }}
-        imageGenButtonRef={imageGenButtonRef}
-        assetsButtonRef={assetsButtonRef}
-        historyOpen={historyOpen}
         onShowHistory={() => setHistoryOpen(!historyOpen)}
         historyButtonRef={historyButtonRef}
         currentSlide={currentSlide}
-        onUpdateSlide={(updates, slideIdOverride) => {
-          const targetId = slideIdOverride ?? currentSlide?.id;
-          if (targetId) updateSlide(id, targetId, updates);
-        }}
         activeUsers={slideActiveUsers.filter((u) => u.email !== session?.email)}
         agentPresent={agentPresent}
         agentActive={agentActive}
@@ -1106,19 +1108,6 @@ export default function DeckEditor() {
           }
           return exportDeckToGoogleSlides(deck.title, slides, deck.aspectRatio);
         }}
-        aspectRatio={deck.aspectRatio}
-        onSetAspectRatio={(ratio: AspectRatio) => {
-          const previous = deck.aspectRatio;
-          // Optimistic UI: update local cache immediately so canvas resizes.
-          updateDeck(id, { aspectRatio: ratio });
-          callAction("update-deck-aspect-ratio", {
-            deckId: id,
-            aspectRatio: ratio,
-          }).catch((err) => {
-            console.error("Failed to set aspect ratio:", err);
-            updateDeck(id, { aspectRatio: previous });
-          });
-        }}
         currentSlideId={currentSlide?.id}
         addSlideGenerating={addSlideGenerating}
         onAddSlideGeneratingChange={setAddSlideGenerating}
@@ -1364,7 +1353,7 @@ export default function DeckEditor() {
       <ImageGenPanel
         open={imageGenOpen}
         onOpenChange={setImageGenOpen}
-        anchorRef={imageGenButtonRef}
+        anchorRef={historyButtonRef}
         referenceImageUrls={imageStyleReferenceUrls}
         slideContext={
           currentSlide
@@ -1382,7 +1371,7 @@ export default function DeckEditor() {
       <AssetLibraryPanel
         open={assetLibraryOpen}
         onOpenChange={setAssetLibraryOpen}
-        anchorRef={assetsButtonRef}
+        anchorRef={historyButtonRef}
         onSelectAsset={
           replaceImageSrc
             ? (newUrl) => {