@agent-native/core 0.148.1 → 0.149.1

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

@@ -119,6 +119,8 @@ import {
   getSlideTextBoxDefaultColor,
   getSlideSelectionIdentity,
   getSlideSelectionMode,
+  findPersistedImageObject,
+  isDeletableFlowImage,
   removeSlideObjectAndLayoutSpacer,
   resolveSlideObjectContainingBlock,
   type CopiedSlideObjects,
@@ -2404,9 +2406,24 @@ export default function SlideEditor({
         clearMultiSelection();
       } else {
         const element = resolveSelectedElement();
-        if (!element || !isPersistedFreeformObject(element)) return;
-        e.preventDefault();
-        removeSlideObjectAndLayoutSpacer(element);
+        if (!element) return;
+        if (isPersistedFreeformObject(element)) {
+          e.preventDefault();
+          removeSlideObjectAndLayoutSpacer(element);
+        } else if (isDeletableFlowImage(element)) {
+          e.preventDefault();
+          // An imported PPTX/PDF image is an <img> (or placeholder) nested in
+          // an absolutely positioned wrapper that carries the persisted object
+          // id. Removing only the inner node would leave that wrapper and its
+          // durable metadata behind as an invisible ghost object.
+          const owner = findPersistedImageObject(element, slideContent);
+          if (owner) removeSlideObjectAndLayoutSpacer(owner);
+          else element.remove();
+          setSelectedImg(null);
+          setImageOverlay(null);
+        } else {
+          return;
+        }
         clearSelectedElement();
       }
 
@@ -4328,6 +4345,7 @@ export default function SlideEditor({
                           edits={activeSlideEdits}
                           resolveRect={resolveCanvasRect}
                           containerRef={slideCanvasRef}
+                          outlineOnly
                         />
                       )}
                       {(agentActive || passivePresentUsers.length > 0) && (
@@ -4412,7 +4430,12 @@ export default function SlideEditor({
         onSendToAgent={sendSelectionToAgent}
       />
 
-      <BlockBubbleMenu editingEl={editingEl} />
+      <BlockBubbleMenu
+        editingEl={editingEl}
+        slideId={slide.id}
+        deckId={deckId}
+        onCommitInlineEdit={exitInlineEdit}
+      />
 
       {pendingUpdateCount > 0 && (
         <div className="absolute top-4 right-4 z-50">

package/corpus/templates/slides/app/components/editor/slide-object-interactions.ts

@@ -521,6 +521,51 @@ export function removeSlideObjectAndLayoutSpacer(element: HTMLElement): void {
   element.remove();
 }
 
+/**
+ * Whether Delete should remove `element` even though it is not a freeform
+ * canvas object.
+ *
+ * Flow-layout nodes are deliberately excluded from object operations, because
+ * deleting an arbitrary one collapses the layout around it. An image is the
+ * exception: it is a leaf, users select it directly, and removing it leaves
+ * the surrounding grid or card intact. Without this, selecting a picture in a
+ * card grid and pressing Delete silently did nothing.
+ */
+export function isDeletableFlowImage(element: HTMLElement): boolean {
+  return (
+    element.tagName === "IMG" ||
+    element.classList.contains("fmd-img-placeholder")
+  );
+}
+
+/**
+ * The persisted image object that owns `element`, if any.
+ *
+ * PPTX/PDF import wraps each picture in an absolutely positioned
+ * `.fmd-pptx-image` div carrying the durable `data-slide-object-id`, with the
+ * `<img>` (or an empty placeholder) inside it. Deleting the inner node alone
+ * leaves that wrapper behind as an invisible object that still occupies its
+ * slot and still round-trips through save. Matching on the image wrapper
+ * specifically — rather than any positioned ancestor — keeps this from
+ * swallowing a whole card or column that merely contains a picture.
+ */
+export function findPersistedImageObject(
+  element: HTMLElement,
+  root: HTMLElement,
+): HTMLElement | null {
+  let current: HTMLElement | null = element;
+  while (current && current !== root && root.contains(current)) {
+    const isImageWrapper =
+      current.classList.contains("fmd-pptx-image") ||
+      current.getAttribute("data-pptx-element-kind") === "image";
+    if (isImageWrapper && current.getAttribute("data-slide-object-id")) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
 /** Convert a viewport click into the unscaled fmd-slide coordinate system. */
 export function clientPointToSlideCoordinates(
   clientX: number,

package/corpus/templates/slides/app/components/onboarding/FirstDeckOnboardingFlow.tsx

@@ -9,7 +9,9 @@ import { toast } from "sonner";
 
 import {
   NewDeckReferenceStep,
+  type ImportedReference,
   type NewDeckReferenceSelection,
+  type NewDeckReferenceSource,
 } from "@/components/editor/NewDeckReferenceStep";
 import {
   uploadPromptFiles,
@@ -204,37 +206,159 @@ export function FirstDeckOnboardingFlow({
   );
 
   const handleReferenceImport = useCallback(
-    async (files: File[]) => {
+    async (files: File[]): Promise<ImportedReference | null> => {
       setReferenceImporting(true);
       try {
         const uploaded = await uploadPromptFiles(files);
         const pptxReference = uploaded.find((file) =>
           file.originalName.toLowerCase().endsWith(".pptx"),
         );
-        let referenceSelection: NewDeckReferenceSelection = {
-          designSystemId: null,
-          referenceDeckId: null,
-        };
+        const pdfReference = uploaded.find((file) =>
+          file.originalName.toLowerCase().endsWith(".pdf"),
+        );
+        let importedReference: ImportedReference | null = null;
         let generationFiles = uploaded;
         if (pptxReference) {
           const imported = (await callAction("import-pptx", {
             filePath: pptxReference.path,
-          })) as { id?: unknown };
-          if (typeof imported.id !== "string" || !imported.id) {
+          })) as {
+            id?: unknown;
+            imported?: unknown;
+            slideCount?: unknown;
+            title?: unknown;
+          };
+          if (
+            typeof imported.id !== "string" ||
+            !imported.id ||
+            imported.imported !== true ||
+            typeof imported.slideCount !== "number" ||
+            imported.slideCount < 1
+          ) {
             throw new Error("The imported presentation did not create a deck.");
           }
-          await reloadDecks();
-          rememberReference({ id: imported.id, kind: "deck" });
-          referenceSelection = {
-            designSystemId: null,
-            referenceDeckId: imported.id,
+          importedReference = {
+            id: imported.id,
+            title:
+              typeof imported.title === "string" && imported.title
+                ? imported.title
+                : t("home.importedReferenceDeck"),
+            source: "pptx",
           };
           generationFiles = uploaded.filter((file) => file !== pptxReference);
+        } else if (pdfReference) {
+          const referenceDeck = createDeck(undefined, {
+            noDefaultSlides: true,
+          });
+          const persisted = await ensureDeckPersisted(referenceDeck.id);
+          if (!persisted.persisted) {
+            deleteDeck(referenceDeck.id);
+            throw new Error(
+              describeDeckPersistenceFailure(
+                persisted,
+                "The PDF reference deck could not be saved.",
+              ),
+            );
+          }
+          try {
+            const imported = (await callAction("import-file", {
+              filePath: pdfReference.path,
+              format: "pdf",
+              deckId: referenceDeck.id,
+              importIntoDeck: true,
+            })) as {
+              imported?: unknown;
+              deckId?: unknown;
+              pageCount?: unknown;
+              title?: unknown;
+            };
+            if (
+              imported.imported !== true ||
+              imported.deckId !== referenceDeck.id ||
+              typeof imported.pageCount !== "number" ||
+              imported.pageCount < 1
+            ) {
+              throw new Error("The PDF reference deck could not be imported.");
+            }
+            importedReference = {
+              id: referenceDeck.id,
+              title:
+                typeof imported.title === "string" && imported.title
+                  ? imported.title
+                  : t("home.importedReferenceDeck"),
+              source: "pdf",
+            };
+            generationFiles = uploaded.filter((file) => file !== pdfReference);
+          } catch (error) {
+            deleteDeck(referenceDeck.id);
+            throw error;
+          }
         }
-        await startGeneration(
-          [...promptFiles, ...generationFiles],
-          referenceSelection,
-        );
+        setPromptFiles((current) => [...current, ...generationFiles]);
+        if (importedReference) {
+          await reloadDecks();
+          rememberReference({ id: importedReference.id, kind: "deck" });
+        }
+        return importedReference;
+      } catch (error) {
+        toast.error(t("editorToolbar.uploadFailed"), {
+          description:
+            error instanceof Error
+              ? error.message
+              : t("editorToolbar.importFailedDescription"),
+        });
+        return null;
+      } finally {
+        setReferenceImporting(false);
+      }
+    },
+    [
+      callAction,
+      createDeck,
+      deleteDeck,
+      ensureDeckPersisted,
+      reloadDecks,
+      rememberReference,
+      t,
+    ],
+  );
+
+  const handleReferenceSourceImport = useCallback(
+    async (
+      source: NewDeckReferenceSource,
+    ): Promise<ImportedReference | null> => {
+      if (source.kind !== "google-docs") return null;
+      setReferenceImporting(true);
+      try {
+        const imported = (await callAction("import-google-slides-reference", {
+          presentationUrl: source.value,
+        })) as {
+          id?: unknown;
+          imported?: unknown;
+          slideCount?: unknown;
+          title?: unknown;
+        };
+        if (
+          typeof imported.id !== "string" ||
+          !imported.id ||
+          imported.imported !== true ||
+          typeof imported.slideCount !== "number" ||
+          imported.slideCount < 1
+        ) {
+          throw new Error(
+            "The Google Slides presentation did not create a deck.",
+          );
+        }
+        const importedReference: ImportedReference = {
+          id: imported.id,
+          title:
+            typeof imported.title === "string" && imported.title
+              ? imported.title
+              : t("home.importedReferenceDeck"),
+          source: "google-slides",
+        };
+        await reloadDecks();
+        rememberReference({ id: importedReference.id, kind: "deck" });
+        return importedReference;
       } catch (error) {
         toast.error(t("editorToolbar.uploadFailed"), {
           description:
@@ -242,11 +366,12 @@ export function FirstDeckOnboardingFlow({
               ? error.message
               : t("editorToolbar.importFailedDescription"),
         });
+        return null;
       } finally {
         setReferenceImporting(false);
       }
     },
-    [promptFiles, reloadDecks, rememberReference, startGeneration, t],
+    [callAction, reloadDecks, rememberReference, t],
   );
 
   const handleReferenceSkip = useCallback(() => {
@@ -267,6 +392,7 @@ export function FirstDeckOnboardingFlow({
         recentReferences={recentReferences}
         onSelect={handleReferenceSelect}
         onImport={handleReferenceImport}
+        onImportSource={handleReferenceSourceImport}
         onSkip={handleReferenceSkip}
         onOpenChange={(open) => {
           if (!open) setStep("prompt");
@@ -278,7 +404,6 @@ export function FirstDeckOnboardingFlow({
         chooseDeckLabel={t("home.referenceDeckPlaceholder")}
         importingLabel={t("raw.uploading")}
         skipLabel={t("home.referenceDeckNone")}
-        defaultSuffix={t("home.defaultSuffix")}
         starredLabel={t("home.referenceDeckStarredGroup")}
         otherDecksLabel={t("home.referenceDeckOtherGroup")}
         searchDecksLabel={t("root.searchDecks")}

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -672,6 +672,12 @@ const messages = {
     chooseReferences: "Choose references",
     addDesignSystem: "+ Design system",
     importFrom: "Import from",
+    imported: "Imported",
+    importedReferenceDeck: "Imported reference deck",
+    referenceImportSuccess: "Imported successfully",
+    referenceImportSelected: '"{{title}}" is now the reference deck.',
+    continue: "Continue",
+    continueToGenerate: "Continue to generate",
     designSystem: "Design system",
     referenceDeck: "Reference deck",
     referenceDeckPlaceholder: "Match the style of an existing deck",

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/generation-state.ts

@@ -2,12 +2,18 @@ export function shouldShowNewDeckGeneratingOverlay({
   generating,
   isNewDeckCreation,
   slideCount,
+  generationStarted,
 }: {
   generating: boolean;
   isNewDeckCreation: boolean;
   slideCount?: number | null;
+  generationStarted: boolean;
 }): boolean {
-  return generating && isNewDeckCreation && (slideCount ?? 0) === 0;
+  return (
+    isNewDeckCreation &&
+    (slideCount ?? 0) === 0 &&
+    (generating || !generationStarted)
+  );
 }
 
 export function shouldShowNewDeckGeneratingProgress({

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/pages/DeckEditor.tsx

@@ -287,6 +287,7 @@ export default function DeckEditor() {
     generating,
     isNewDeckCreation: wasNewDeckCreation.current,
     slideCount,
+    generationStarted: newDeckGenerationStarted.current,
   });
   const { designSystem, imageStyleReferenceUrls } = useDeckDesignSystem(
     deck?.designSystemId,
@@ -326,7 +327,9 @@ export default function DeckEditor() {
 
   const showQuestionFlow = Boolean(questionFlowQuestions?.length);
   const generatingSlideVisible =
-    canEdit && !showQuestionFlow && (isNewDeckGenerating || addSlideGenerating);
+    canEdit &&
+    !showQuestionFlow &&
+    (isNewDeckGenerating || addSlideGenerating || showNewDeckGeneratingOverlay);
   const showCurrentSlideEditor =
     !generatingSlideSelected &&
     !showNewDeckGeneratingOverlay &&
@@ -342,12 +345,47 @@ export default function DeckEditor() {
     if (!generating) setAddSlideGenerating(false);
   }, [generating]);
 
-  const previousSlideCountRef = useRef(slideCount);
+  // 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(() => {
-    if (previousSlideCountRef.current === slideCount) return;
-    previousSlideCountRef.current = slideCount;
-    setGeneratingSlideSelected(false);
-  }, [slideCount]);
+    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) ?? [];
+    const previousSlideIds = previousSlideIdsRef.current;
+    const addedSlide = deck?.slides.find(
+      (slide) => !previousSlideIds.includes(slide.id),
+    );
+    const slideWasAdded = currentSlideIds.length > previousSlideIds.length;
+
+    if (
+      slideWasAdded &&
+      addedSlide &&
+      (generating ||
+        isNewDeckGenerating ||
+        addSlideGenerating ||
+        generatingSlideSelected)
+    ) {
+      setActiveSlideId(addedSlide.id);
+    }
+
+    previousSlideIdsRef.current = currentSlideIds;
+    if (slideWasAdded) setGeneratingSlideSelected(false);
+  }, [
+    addSlideGenerating,
+    deck,
+    generating,
+    generatingSlideSelected,
+    isNewDeckGenerating,
+  ]);
 
   useEffect(() => {
     if (
@@ -1128,14 +1166,6 @@ export default function DeckEditor() {
                     setActiveSlideId(slideId);
                     if (window.innerWidth < 768) setSidebarOpen(false);
                   }}
-                  onDuplicateSlide={(slideId) => duplicateSlide(id, slideId)}
-                  onDeleteSlide={(slideId) => {
-                    const idx = deck.slides.findIndex((s) => s.id === slideId);
-                    const nextSlide =
-                      deck.slides[idx + 1] || deck.slides[idx - 1];
-                    deleteSlideWithUndo(id, slideId);
-                    if (nextSlide) setActiveSlideId(nextSlide.id);
-                  }}
                   readOnly={!canEdit}
                   slidePresence={slidePresence}
                   recentEdits={deckRecentEdits}