@agent-native/core 0.141.6 → 0.144.0

package/corpus/templates/slides/actions/import-pptx.ts

@@ -1,6 +1,5 @@
 import { defineAction } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
-import { uploadFile } from "@agent-native/core/file-upload";
 import {
   getRequestUserEmail,
   getRequestOrgId,
@@ -13,51 +12,70 @@ import { z } from "zod";
 import { getDb, schema } from "../server/db/index.js";
 import { notifyClients } from "../server/handlers/decks.js";
 import { convertToSlideHtml } from "../server/handlers/import/html-converter.js";
+import { uploadPptxSlideImages } from "../server/handlers/import/pptx-assets.js";
 import {
   parsePptx,
-  type ParsedSlide,
+  type ParsedElement,
+  type ParsedImage,
+  type ParsedPresentation,
 } from "../server/handlers/import/pptx-parser.js";
 import { getDeckUrl } from "./_app-url.js";
 import { readUserUploadedFile } from "./_uploaded-files.js";
 
-// EMF/WMF (Windows metafiles) and TIFF are valid PPTX embed formats but
-// browsers can't render them in an <img> tag — uploading and linking one
-// would just produce a broken image icon.
-const BROWSER_RENDERABLE_IMAGE_MIME_TYPES = new Set([
-  "image/png",
-  "image/jpeg",
-  "image/gif",
-  "image/webp",
-  "image/svg+xml",
-  "image/bmp",
-]);
-
-async function uploadFirstSlideImage(
-  slide: ParsedSlide,
-  slideIndex: number,
-  ownerEmail: string,
-): Promise<string | undefined> {
-  const image = slide.images[0];
-  if (!image || !BROWSER_RENDERABLE_IMAGE_MIME_TYPES.has(image.mimeType)) {
-    return undefined;
-  }
-  const filename =
-    "pptx-import-" + Date.now() + "-s" + slideIndex + "-" + image.name;
-  try {
-    const result = await uploadFile({
-      data: Buffer.from(image.data),
-      filename,
-      mimeType: image.mimeType,
-      ownerEmail,
-      recordAsset: false,
-    });
-    return result?.url;
-  } catch {
-    // A single slide's upload failing (network/API/rate-limit) shouldn't
-    // abort the whole deck import — that slide's text still imports fine,
-    // it just falls back to a placeholder like an unsupported format would.
-    return undefined;
+export interface ImportedImageFallback {
+  slideIndex: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  data: Uint8Array;
+  mimeType: string;
+  name: string;
+  crop?: ParsedImage["crop"];
+}
+
+/** Add source-native image objects that a Google Slides PPTX export omitted. */
+export function applyImageFallbacks(
+  presentation: Awaited<ReturnType<typeof parsePptx>>,
+  fallbacks: ImportedImageFallback[] = [],
+): number {
+  let added = 0;
+  for (const [fallbackIndex, fallback] of fallbacks.entries()) {
+    const slide = presentation.slides[fallback.slideIndex];
+    if (!slide || fallback.width <= 0 || fallback.height <= 0) continue;
+
+    const duplicate = slide.elements.some(
+      (element) =>
+        element.kind === "image" &&
+        Math.abs(element.x - fallback.x) < 1000 &&
+        Math.abs(element.y - fallback.y) < 1000 &&
+        Math.abs(element.width - fallback.width) < 1000 &&
+        Math.abs(element.height - fallback.height) < 1000,
+    );
+    if (duplicate) continue;
+
+    const image: ParsedImage = {
+      data: fallback.data,
+      mimeType: fallback.mimeType,
+      name: fallback.name,
+      aspectRatio: fallback.width / fallback.height,
+      ...(fallback.crop ? { crop: fallback.crop } : {}),
+    };
+    const element: ParsedElement = {
+      id: `image-fallback-${fallback.slideIndex}-${fallbackIndex}`,
+      name: fallback.name,
+      kind: "image",
+      x: fallback.x,
+      y: fallback.y,
+      width: fallback.width,
+      height: fallback.height,
+      image,
+    };
+    slide.images.push(image);
+    slide.elements.push(element);
+    added++;
   }
+  return added;
 }
 
 export async function importPptxBufferToDeck(args: {
@@ -65,6 +83,8 @@ export async function importPptxBufferToDeck(args: {
   title?: string;
   deckId?: string;
   source?: string;
+  imageFallbacks?: ImportedImageFallback[];
+  parsedPresentation?: ParsedPresentation;
 }): Promise<{
   id: string;
   title: string;
@@ -74,8 +94,16 @@ export async function importPptxBufferToDeck(args: {
   url: string;
   imagesSkipped?: number;
 }> {
-  const { fileBuffer, title, deckId, source = "import-pptx" } = args;
-  const presentation = await parsePptx(fileBuffer);
+  const {
+    fileBuffer,
+    title,
+    deckId,
+    source = "import-pptx",
+    imageFallbacks,
+    parsedPresentation,
+  } = args;
+  const presentation = parsedPresentation ?? (await parsePptx(fileBuffer));
+  applyImageFallbacks(presentation, imageFallbacks);
   const deckTitle = title || presentation.title || "Imported Presentation";
   const ownerEmail = getRequestUserEmail();
   if (!ownerEmail) throw new Error("no authenticated user");
@@ -88,38 +116,35 @@ export async function importPptxBufferToDeck(args: {
     await assertAccess("deck", deckId, "editor");
   }
 
-  // Convert each parsed slide to our HTML format, uploading the first
-  // embedded image (if any) so it renders as a real image instead of a
-  // text placeholder. Concurrency is capped so a large deck doesn't fire
-  // one outbound upload per slide at once. An image can end up unused
-  // (unsupported format, or upload storage not configured) without
-  // failing the whole import — the slide's text still imports fine — but
-  // that shouldn't be a silent, invisible degradation, so it's counted
-  // and returned to the caller.
+  // Convert each parsed slide to its positioned scene graph, uploading every
+  // browser-renderable image so the imported deck keeps the source layering
+  // and media instead of collapsing to a one-image approximation.
   const uploadLimit = pLimit(4);
   const results = await Promise.all(
     presentation.slides.map((parsedSlide, i) =>
       uploadLimit(async () => {
-        const imageUrl = await uploadFirstSlideImage(
-          parsedSlide,
-          i,
+        const uploadedImages = await uploadPptxSlideImages({
+          slide: parsedSlide,
+          slideIndex: i,
           ownerEmail,
+        });
+        const html = convertToSlideHtml(
+          parsedSlide,
+          uploadedImages.urls,
+          themeFont,
         );
-        const html = convertToSlideHtml(parsedSlide, imageUrl, themeFont);
         return {
           slide: {
             id: `slide-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
             content: html,
             layout: parsedSlide.layoutHint ?? "content",
             notes: parsedSlide.notes,
+            ...(parsedSlide.transition
+              ? { transition: parsedSlide.transition }
+              : {}),
+            ...(parsedSlide.splitByParagraph ? { splitByParagraph: true } : {}),
           },
-          // Only the first image on a slide is ever uploaded, so every
-          // other image on that slide is unconditionally dropped too —
-          // not just the first one when it's unsupported.
-          imageSkippedCount: Math.max(
-            0,
-            parsedSlide.images.length - (imageUrl ? 1 : 0),
-          ),
+          imageSkippedCount: uploadedImages.imageSkippedCount,
         };
       }),
     ),

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -23,7 +23,7 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import type { Deck } from "@/context/DeckContext";
-import { getAspectRatioDims } from "@/lib/aspect-ratios";
+import { getDeckListingPreviewFrameStyle } from "@/lib/deck-preview-frame";
 
 import SlideRenderer from "./SlideRenderer";
 
@@ -52,7 +52,7 @@ export default function DeckCard({
 }: DeckCardProps) {
   const t = useT();
   const firstSlide = deck.slides?.[0];
-  const previewDims = getAspectRatioDims(deck.aspectRatio);
+  const previewFrameStyle = getDeckListingPreviewFrameStyle(deck.aspectRatio);
   const [isRenaming, setIsRenaming] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const [renameValue, setRenameValue] = useState(deck.title);
@@ -106,18 +106,15 @@ export default function DeckCard({
         }}
       >
         {/* Slide Preview */}
-        <div
-          className="relative overflow-hidden bg-muted/30"
-          style={{
-            aspectRatio: `${previewDims.width} / ${previewDims.height}`,
-          }}
-        >
+        <div className="relative flex aspect-video items-center justify-center overflow-hidden bg-muted/30">
           {firstSlide && (
-            <SlideRenderer
-              slide={firstSlide}
-              className="rounded-none"
-              aspectRatio={deck.aspectRatio}
-            />
+            <div className="relative overflow-hidden" style={previewFrameStyle}>
+              <SlideRenderer
+                slide={firstSlide}
+                className="rounded-none"
+                aspectRatio={deck.aspectRatio}
+              />
+            </div>
           )}
           <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[hsl(240,5%,8%)] via-transparent to-transparent opacity-60" />
         </div>

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -479,7 +479,7 @@ export function DesignSystemSetup({
 
     if (websiteUrls.length > 0) {
       parts.push(
-        `\n## Website URLs\nAnalyze these websites for design tokens. Call \`import-from-url\` for each:\n${websiteUrls.map((u) => `- ${u}`).join("\n")}`,
+        `\n## Website URLs\nAnalyze these websites for design tokens. Call \`import-from-url\` for each:\n${websiteUrls.map((u) => `- ${u}`).join("\n")}\n\nThe shared action uses the layered real-browser renderer so hydrated React, CSS-in-JS, Tailwind, SPA content, loaded fonts, computed colors, component styles, CSS variables, and desktop/mobile screenshot evidence are captured consistently. It falls back explicitly to SSRF-safe static extraction only when a browser is unavailable. Use its design.md-style result as the source of truth for the deck style.`,
       );
     }
 

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

@@ -13,6 +13,8 @@ import {
 } from "@/components/editor/PromptDialog";
 import { addSlideAgentMessage } from "@/lib/agent-visible-message";
 
+import { MAX_REFERENCE_FILE_BYTES } from "../../../shared/upload-types";
+
 const MAX_SOURCE_CONTEXT_CHARS = 60_000;
 
 function truncateSourceForContext(prompt: string): {
@@ -46,7 +48,7 @@ function describeUploadedFilesForAgent(
     "",
     "File handling rules:",
     `- PPTX files: call \`import-pptx --filePath "<path>" --deckId ${deckId}\` when the user wants the deck/slides imported, or to extract slide source from a presentation.`,
-    `- PDF and DOCX files: call \`import-file --filePath "<path>" --format auto --deckId ${deckId}\` and use the returned extracted text as source material. The returned text is capped for reliability; re-run with maxChars only if more context is needed.`,
+    `- PDF and DOCX files: call \`import-file --filePath "<path>" --format auto --deckId ${deckId}\` and use the returned extracted text as source material. For a visual PDF whose original layout should be preserved, pass \`--importIntoDeck true\` instead of rebuilding the pages from extracted text.`,
     "- Text-like files: use the uploaded-text-file blocks already included in the prompt; do not call import-file for them.",
     '- Image files with an embeddable URL can be inserted directly into slide HTML as `<img src="...">` or used as visual references.',
     "- Image files without a URL are visual/reference assets only; do not claim to have processed a PPTX/PDF/DOCX unless the relevant import action succeeds.",
@@ -241,6 +243,8 @@ export function AddSlidePopover({
       )}
       <PromptComposer
         autoFocus
+        maxDocumentAttachmentBytes={MAX_REFERENCE_FILE_BYTES}
+        documentAttachmentLimitLabel="Slides reference files"
         placeholder={t("editorSidebar.promptPlaceholder")}
         draftScope={`slides:add-slide:${deckId}`}
         onSubmit={handleSubmit}

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

@@ -67,6 +67,7 @@ import {
   type AspectRatio,
   DEFAULT_ASPECT_RATIO,
 } from "@/lib/aspect-ratios";
+import { getDeckShareLinkOrder } from "@/lib/deck-share-links";
 import type { GoogleSlidesExportResult } from "@/lib/export-google-slides-client";
 import { parseUploadResponse } from "@/lib/upload-response";
 import { shortcutLabel } from "@/lib/utils";
@@ -288,10 +289,9 @@ export default function EditorToolbar({
   canEdit = true,
 }: EditorToolbarProps) {
   const t = useT();
-  // Mirror Google Slides: the share dialog exposes both the editor URL
-  // (primary) and the presentation URL (secondary). Access is enforced on
-  // the deck, not the URL shape — anyone with at least viewer access can
-  // open either link.
+  // Public decks default to the read-only presentation URL so recipients do
+  // not get sent through the editor's auth gate. Restricted decks keep the
+  // editor URL primary, where auth resolves viewer access.
   const editorUrl =
     typeof window === "undefined"
       ? `/deck/${deckId}`
@@ -300,6 +300,21 @@ export default function EditorToolbar({
     typeof window === "undefined"
       ? `/p/${deckId}`
       : `${window.location.origin}${appPath(`/p/${deckId}`)}`;
+  const shareLinks = {
+    editor: {
+      url: editorUrl,
+      label: t("editorToolbar.editorLink"),
+      description: t("editorToolbar.editorLinkDescription"),
+    },
+    presentation: {
+      url: presentationUrl,
+      label: t("editorToolbar.presentationLink"),
+      description: t("editorToolbar.presentationLinkDescription"),
+    },
+  };
+  const shareLinkOrder = getDeckShareLinkOrder(deck.visibility);
+  const primaryShareLink = shareLinks[shareLinkOrder.primary];
+  const secondaryShareLink = shareLinks[shareLinkOrder.secondary];
 
   // Live save state for the toolbar indicator, so users always see whether
   // their work has committed (a lost-deck report motivated surfacing this).
@@ -940,14 +955,12 @@ graph TD
           resourceType="deck"
           resourceId={deckId}
           resourceTitle={deckTitle}
-          shareUrl={editorUrl}
-          shareUrlLabel={t("editorToolbar.editorLink")}
-          shareUrlDescription={t("editorToolbar.editorLinkDescription")}
-          secondaryShareUrl={presentationUrl}
-          secondaryShareUrlLabel={t("editorToolbar.presentationLink")}
-          secondaryShareUrlDescription={t(
-            "editorToolbar.presentationLinkDescription",
-          )}
+          shareUrl={primaryShareLink.url}
+          shareUrlLabel={primaryShareLink.label}
+          shareUrlDescription={primaryShareLink.description}
+          secondaryShareUrl={secondaryShareLink.url}
+          secondaryShareUrlLabel={secondaryShareLink.label}
+          secondaryShareUrlDescription={secondaryShareLink.description}
           shareTabs={{
             tabs: [
               {

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

@@ -13,8 +13,18 @@ import {
   IconBrandGoogle,
   IconPlugConnected,
 } from "@tabler/icons-react";
+import { useRef, useState } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -51,6 +61,8 @@ export function ExportMenu({
   onShareTeam,
 }: ExportMenuProps) {
   const t = useT();
+  const [googleSlidesImportOpen, setGoogleSlidesImportOpen] = useState(false);
+  const googleSlidesImportTarget = useRef<Window | null>(null);
   const triggerBlobDownload = (blob: Blob, filename: string) => {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -100,9 +112,11 @@ export function ExportMenu({
     // Opened up-front: browsers only honour window.open() inside the click
     // gesture, and building the PPTX is async.
     const target = window.open("", "_blank");
+    googleSlidesImportTarget.current = target;
     try {
       const result = await onExportGoogleSlides();
       if (result.url !== null) {
+        googleSlidesImportTarget.current = null;
         if (target) target.location.href = result.url;
         toast.success(t("editorExport.googleSlidesCreated"), {
           description: t("editorExport.googleSlidesCreatedHint"),
@@ -111,10 +125,12 @@ export function ExportMenu({
       }
       console.warn("Google Slides upload unavailable:", result.reason);
       if (target) target.location.href = GOOGLE_SLIDES_IMPORT_URL;
+      setGoogleSlidesImportOpen(true);
       toast.success(t("editorExport.googleSlidesDownloaded"), {
         description: t("editorExport.googleSlidesImportHint"),
       });
     } catch (err) {
+      googleSlidesImportTarget.current = null;
       target?.close();
       console.error("Export failed:", err);
       toast.error(t("editorExport.exportFailed"), {
@@ -207,66 +223,105 @@ export function ExportMenu({
   };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent text-xs cursor-pointer whitespace-nowrap">
-          <IconUpload className="w-3.5 h-3.5" />
-          <span className="hidden md:inline">{t("editorExport.export")}</span>
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-52">
-        <DropdownMenuLabel className="text-[11px] text-muted-foreground">
-          {t("editorExport.exportAndDuplicate")}
-        </DropdownMenuLabel>
-        {onShareTeam && (
-          <DropdownMenuItem onClick={onShareTeam} className="cursor-pointer">
-            <IconShare2 className="w-4 h-4 mr-2" />
-            {t("editorExport.shareWithTeam")}
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent text-xs cursor-pointer whitespace-nowrap">
+            <IconUpload className="w-3.5 h-3.5" />
+            <span className="hidden md:inline">{t("editorExport.export")}</span>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-52">
+          <DropdownMenuLabel className="text-[11px] text-muted-foreground">
+            {t("editorExport.exportAndDuplicate")}
+          </DropdownMenuLabel>
+          {onShareTeam && (
+            <DropdownMenuItem onClick={onShareTeam} className="cursor-pointer">
+              <IconShare2 className="w-4 h-4 mr-2" />
+              {t("editorExport.shareWithTeam")}
+            </DropdownMenuItem>
+          )}
+          {onShareLink && (
+            <DropdownMenuItem onClick={onShareLink} className="cursor-pointer">
+              <IconShare2 className="w-4 h-4 mr-2" />
+              {t("editorExport.publicShareLink")}
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={handleExportHtml}
+            className="cursor-pointer"
+          >
+            <IconCode className="w-4 h-4 mr-2" />
+            {t("editorExport.downloadHtml")}
           </DropdownMenuItem>
-        )}
-        {onShareLink && (
-          <DropdownMenuItem onClick={onShareLink} className="cursor-pointer">
-            <IconShare2 className="w-4 h-4 mr-2" />
-            {t("editorExport.publicShareLink")}
+          <DropdownMenuItem onClick={onExportPdf} className="cursor-pointer">
+            <IconFileTypePdf className="w-4 h-4 mr-2" />
+            {t("editorExport.exportPdf")}
           </DropdownMenuItem>
-        )}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={handleExportHtml} className="cursor-pointer">
-          <IconCode className="w-4 h-4 mr-2" />
-          {t("editorExport.downloadHtml")}
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={onExportPdf} className="cursor-pointer">
-          <IconFileTypePdf className="w-4 h-4 mr-2" />
-          {t("editorExport.exportPdf")}
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={handleExportPptx} className="cursor-pointer">
-          <IconDownload className="w-4 h-4 mr-2" />
-          {t("editorExport.exportPptx")}
-        </DropdownMenuItem>
-        {onExportGoogleSlides && (
-          <>
-            <DropdownMenuItem
-              onClick={handleConnectGoogle}
-              className="cursor-pointer"
-            >
-              <IconPlugConnected className="w-4 h-4 mr-2" />
-              {t("editorExport.connectGoogle")}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={handleExportGoogleSlides}
-              className="cursor-pointer"
+          <DropdownMenuItem
+            onClick={handleExportPptx}
+            className="cursor-pointer"
+          >
+            <IconDownload className="w-4 h-4 mr-2" />
+            {t("editorExport.exportPptx")}
+          </DropdownMenuItem>
+          {onExportGoogleSlides && (
+            <>
+              <DropdownMenuItem
+                onClick={handleConnectGoogle}
+                className="cursor-pointer"
+              >
+                <IconPlugConnected className="w-4 h-4 mr-2" />
+                {t("editorExport.connectGoogle")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={handleExportGoogleSlides}
+                className="cursor-pointer"
+              >
+                <IconBrandGoogle className="w-4 h-4 mr-2" />
+                {t("editorExport.openInGoogleSlides")}
+              </DropdownMenuItem>
+            </>
+          )}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
+            <IconCopy className="w-4 h-4 mr-2" />
+            {t("editorExport.duplicateDeck")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Dialog
+        open={googleSlidesImportOpen}
+        onOpenChange={setGoogleSlidesImportOpen}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {t("editorExport.googleSlidesDownloaded")}
+            </DialogTitle>
+            <DialogDescription>
+              {t("editorExport.googleSlidesImportHint")}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              onClick={() => {
+                const target = googleSlidesImportTarget.current;
+                if (target && !target.closed) {
+                  target.focus?.();
+                } else {
+                  window.open(GOOGLE_SLIDES_IMPORT_URL, "_blank");
+                }
+                setGoogleSlidesImportOpen(false);
+              }}
             >
-              <IconBrandGoogle className="w-4 h-4 mr-2" />
               {t("editorExport.openInGoogleSlides")}
-            </DropdownMenuItem>
-          </>
-        )}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
-          <IconCopy className="w-4 h-4 mr-2" />
-          {t("editorExport.duplicateDeck")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }