@agent-native/core 0.153.9 → 0.154.0

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

@@ -31,7 +31,6 @@ import {
   IconCode,
   IconCopy,
   IconFileTypePdf,
-  IconPlugConnected,
 } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -439,24 +438,14 @@ export default function EditorToolbar({
       },
     );
     if (onExportGoogleSlides) {
-      commands.push(
-        {
-          id: "connect-google",
-          group: "deck",
-          label: t("editorExport.connectGoogle"),
-          keywords: ["google", "drive", "connect"],
-          icon: IconPlugConnected,
-          run: () => void exportMenuRef.current?.connectGoogle(),
-        },
-        {
-          id: "open-in-google-slides",
-          group: "deck",
-          label: t("editorExport.openInGoogleSlides"),
-          keywords: ["google", "slides", "export"],
-          icon: IconBrandGoogle,
-          run: () => void exportMenuRef.current?.exportGoogleSlides(),
-        },
-      );
+      commands.push({
+        id: "export-to-google-slides",
+        group: "deck",
+        label: t("editorExport.openInGoogleSlides"),
+        keywords: ["google", "slides", "export"],
+        icon: IconBrandGoogle,
+        run: () => void exportMenuRef.current?.exportGoogleSlides(),
+      });
     }
     if (onDuplicateDeck) {
       commands.push({
@@ -632,7 +621,7 @@ export default function EditorToolbar({
         agentActive={agentActive}
         showAgentEditingDot={false}
         currentUserEmail={currentUserEmail}
-        className="flex-shrink-0 mr-0.5"
+        className="ml-auto flex-shrink-0 mr-0.5 pl-2"
       />
 
       {/* Consolidated editor menu */}
@@ -657,26 +646,8 @@ export default function EditorToolbar({
           </Tooltip>
           <DropdownMenuContent
             align="end"
-            className="max-h-[min(80vh,32rem)] w-64 overflow-y-auto"
+            className="max-h-[90vh] w-64 overflow-y-auto"
           >
-            {canEdit && (
-              <>
-                <DropdownMenuLabel>
-                  {t("editorToolbar.media")}
-                </DropdownMenuLabel>
-                <DropdownMenuGroup>
-                  <DropdownMenuItem onSelect={onGenerateImage}>
-                    <IconPhoto className="size-4" />
-                    {t("editorToolbar.generateImage")}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onSelect={onOpenAssetLibrary}>
-                    <IconFolderOpen className="size-4" />
-                    {t("editorToolbar.assetLibrary")}
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </>
-            )}
-
             {((canEdit &&
               (onToggleAnimations || onToggleTweaks || onToggleDrawMode)) ||
               (canComment && onTogglePinMode)) && (
@@ -742,12 +713,28 @@ export default function EditorToolbar({
               </>
             )}
 
-            {onToggleComments && (
+            {canEdit && (
               <>
                 <DropdownMenuSeparator />
                 <DropdownMenuLabel>
-                  {t("editorToolbar.comments")}
+                  {t("editorToolbar.media")}
                 </DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem onSelect={onGenerateImage}>
+                    <IconPhoto className="size-4" />
+                    {t("editorToolbar.generateImage")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={onOpenAssetLibrary}>
+                    <IconFolderOpen className="size-4" />
+                    {t("editorToolbar.assetLibrary")}
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </>
+            )}
+
+            {onToggleComments && (
+              <>
+                <DropdownMenuSeparator />
                 <DropdownMenuItem
                   onSelect={onToggleComments}
                   className={

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

@@ -11,7 +11,6 @@ import {
   IconCopy,
   IconShare2,
   IconBrandGoogle,
-  IconPlugConnected,
 } from "@tabler/icons-react";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -32,6 +31,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
 } from "@/components/ui/dropdown-menu";
 import type { GoogleSlidesExportResult } from "@/lib/export-google-slides-client";
 
@@ -53,7 +55,6 @@ interface ExportMenuProps {
 }
 
 export interface ExportMenuHandle {
-  connectGoogle: () => Promise<void>;
   exportGoogleSlides: () => Promise<void>;
   exportHtml: () => Promise<void>;
   exportPptx: () => Promise<void>;
@@ -121,44 +122,7 @@ export const ExportMenu = forwardRef<ExportMenuHandle, ExportMenuProps>(
       }
     };
 
-    const handleExportGoogleSlides = async () => {
-      if (!onExportGoogleSlides) return;
-      // 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"),
-          });
-          return;
-        }
-        if (target) target.location.href = GOOGLE_SLIDES_IMPORT_URL;
-        setGoogleSlidesImportOpen(true);
-        // The deck did not reach Drive. Saying "success" here is why users read
-        // the .pptx download as the intended result and never learn that their
-        // Google account is unconnected or that Drive rejected the upload.
-        toast.warning(t("editorExport.googleSlidesDownloaded"), {
-          description: `${result.reason} ${t("editorExport.googleSlidesImportHint")}`,
-        });
-      } catch (err) {
-        googleSlidesImportTarget.current = null;
-        target?.close();
-        console.error("Export failed:", err);
-        toast.error(t("editorExport.exportFailed"), {
-          description:
-            err instanceof Error
-              ? err.message
-              : t("editorExport.exportGoogleSlidesError"),
-        });
-      }
-    };
-
-    const handleConnectGoogle = async () => {
+    const handleConnectGoogle = async (target?: Window | null) => {
       const authUrl = new URL(
         agentNativePath("/_agent-native/google-docs/auth-url"),
         window.location.origin,
@@ -168,11 +132,9 @@ export const ExportMenu = forwardRef<ExportMenuHandle, ExportMenuProps>(
         window.location.pathname + window.location.search,
       );
 
-      const popup = window.open(
-        "",
-        "google-docs-oauth",
-        "popup,width=520,height=720",
-      );
+      const popup =
+        target ??
+        window.open("", "google-docs-oauth", "popup,width=520,height=720");
       if (!popup) {
         toast.error(t("editorExport.exportFailed"), {
           description: t("editorExport.exportGoogleSlidesError"),
@@ -209,6 +171,49 @@ export const ExportMenu = forwardRef<ExportMenuHandle, ExportMenuProps>(
       }
     };
 
+    const handleExportGoogleSlides = async () => {
+      if (!onExportGoogleSlides) return;
+      // Opened up-front: browsers only honour window.open() inside the click
+      // gesture, and building the PPTX is async. If the account is missing,
+      // the same tab becomes the OAuth popup so the export action owns setup.
+      const target = window.open("", "_blank");
+      googleSlidesImportTarget.current = target;
+      try {
+        const result = await onExportGoogleSlides();
+        if ("requiresConnection" in result && result.requiresConnection) {
+          googleSlidesImportTarget.current = null;
+          await handleConnectGoogle(target);
+          return;
+        }
+        if (result.url !== null) {
+          googleSlidesImportTarget.current = null;
+          if (target) target.location.href = result.url;
+          toast.success(t("editorExport.googleSlidesCreated"), {
+            description: t("editorExport.googleSlidesCreatedHint"),
+          });
+          return;
+        }
+        if (target) target.location.href = GOOGLE_SLIDES_IMPORT_URL;
+        setGoogleSlidesImportOpen(true);
+        // The deck did not reach Drive. Saying "success" here is why users read
+        // the .pptx download as the intended result and never learn that Drive
+        // rejected the upload.
+        toast.warning(t("editorExport.googleSlidesDownloaded"), {
+          description: `${result.reason} ${t("editorExport.googleSlidesImportHint")}`,
+        });
+      } catch (err) {
+        googleSlidesImportTarget.current = null;
+        target?.close();
+        console.error("Export failed:", err);
+        toast.error(t("editorExport.exportFailed"), {
+          description:
+            err instanceof Error
+              ? err.message
+              : t("editorExport.exportGoogleSlidesError"),
+        });
+      }
+    };
+
     const handleExportHtml = async () => {
       try {
         const res = await fetch(`${appBasePath()}/api/exports/html`, {
@@ -241,79 +246,102 @@ export const ExportMenu = forwardRef<ExportMenuHandle, ExportMenuProps>(
     useImperativeHandle(
       ref,
       () => ({
-        connectGoogle: handleConnectGoogle,
         exportGoogleSlides: handleExportGoogleSlides,
         exportHtml: handleExportHtml,
         exportPptx: handleExportPptx,
       }),
-      [
-        handleConnectGoogle,
-        handleExportGoogleSlides,
-        handleExportHtml,
-        handleExportPptx,
-      ],
+      [handleExportGoogleSlides, handleExportHtml, handleExportPptx],
     );
 
-    const menuContent = (
+    const exportActions = (
+      <>
+        <DropdownMenuItem onClick={handleExportHtml} className="cursor-pointer">
+          <IconCode className="size-4" />
+          {t("editorExport.downloadHtml")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onExportPdf} className="cursor-pointer">
+          <IconFileTypePdf className="size-4" />
+          {t("editorExport.exportPdf")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleExportPptx} className="cursor-pointer">
+          <IconDownload className="size-4" />
+          {t("editorExport.exportPptx")}
+        </DropdownMenuItem>
+        {onExportGoogleSlides && (
+          <DropdownMenuItem
+            onClick={handleExportGoogleSlides}
+            className="cursor-pointer"
+          >
+            <IconBrandGoogle className="size-4" />
+            {t("editorExport.openInGoogleSlides")}
+          </DropdownMenuItem>
+        )}
+      </>
+    );
+
+    const shareActions = (
       <>
-        <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" />
+            <IconShare2 className="size-4" />
             {t("editorExport.shareWithTeam")}
           </DropdownMenuItem>
         )}
         {onShareLink && (
           <DropdownMenuItem onClick={onShareLink} className="cursor-pointer">
-            <IconShare2 className="w-4 h-4 mr-2" />
+            <IconShare2 className="size-4" />
             {t("editorExport.publicShareLink")}
           </DropdownMenuItem>
         )}
+      </>
+    );
+
+    const duplicateAction = (
+      <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
+        <IconCopy className="size-4" />
+        {t("editorExport.duplicateDeck")}
+      </DropdownMenuItem>
+    );
+
+    const menuContent = (
+      <>
+        <DropdownMenuLabel className="text-[11px] text-muted-foreground">
+          {t("editorExport.exportAndDuplicate")}
+        </DropdownMenuLabel>
+        {shareActions}
         <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 && (
+        {exportActions}
+        <DropdownMenuSeparator />
+        {duplicateAction}
+      </>
+    );
+
+    const inlineMenuContent = (
+      <>
+        {onShareTeam || onShareLink ? (
           <>
-            <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>
+            {shareActions}
+            <DropdownMenuSeparator />
           </>
-        )}
+        ) : null}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="cursor-pointer gap-2">
+            <IconUpload className="size-4" />
+            {t("editorExport.export")}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="w-56">
+            {exportActions}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
         <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
-          <IconCopy className="w-4 h-4 mr-2" />
-          {t("editorExport.duplicateDeck")}
-        </DropdownMenuItem>
+        {duplicateAction}
       </>
     );
 
     return (
       <>
         {inline ? (
-          menuContent
+          inlineMenuContent
         ) : (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>

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

@@ -3,6 +3,7 @@ import {
   IconPhoto,
   IconFolderOpen,
   IconUpload,
+  IconDownload,
   IconMaximize,
   IconMinimize,
 } from "@tabler/icons-react";
@@ -11,20 +12,24 @@ import { createPortal } from "react-dom";
 
 interface ImageOverlayProps {
   anchorRect: DOMRect;
+  src: string;
   objectFit: "cover" | "contain";
   onGenerate: () => void;
   onLibrary: () => void;
   onUpload: () => void;
+  onDownload: () => void;
   onToggleObjectFit: () => void;
   onClose: () => void;
 }
 
 export default function ImageOverlay({
   anchorRect,
+  src,
   objectFit,
   onGenerate,
   onLibrary,
   onUpload,
+  onDownload,
   onToggleObjectFit,
   onClose,
 }: ImageOverlayProps) {
@@ -100,6 +105,17 @@ export default function ImageOverlay({
         <IconUpload className="w-3.5 h-3.5 text-muted-foreground" />
         Upload
       </button>
+      <button
+        onClick={() => {
+          onDownload();
+          onClose();
+        }}
+        className="image-overlay-btn"
+        disabled={!src}
+      >
+        <IconDownload className="w-3.5 h-3.5 text-muted-foreground" />
+        Download
+      </button>
       <div className="mx-1.5 border-t border-border" />
       <button onClick={onToggleObjectFit} className="image-overlay-btn">
         {objectFit === "cover" ? (