@agent-native/core 0.137.1 → 0.137.2

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

@@ -27,14 +27,14 @@ import {
   IconAdjustments,
   IconPencilPlus,
   IconPin,
-  IconLetterT,
   IconTool,
   IconDownload,
   IconSun,
   IconMoon,
   IconDotsVertical,
-  IconPalette,
   IconLoader2,
+  IconArrowBackUp,
+  IconArrowForwardUp,
 } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 import { useState, useRef, useEffect } from "react";
@@ -57,7 +57,11 @@ import {
 } from "@/components/ui/tooltip";
 import { SaveStatusIndicator } from "@/components/visual-editor";
 import type { Deck, Slide, SlideLayout } from "@/context/DeckContext";
-import { defaultSlideContent, useSaveState } from "@/context/DeckContext";
+import {
+  defaultSlideContent,
+  useDecks,
+  useSaveState,
+} from "@/context/DeckContext";
 import {
   ASPECT_RATIO_VALUES,
   type AspectRatio,
@@ -65,7 +69,10 @@ import {
 } from "@/lib/aspect-ratios";
 import type { GoogleSlidesExportResult } from "@/lib/export-google-slides-client";
 import { parseUploadResponse } from "@/lib/upload-response";
+import { shortcutLabel } from "@/lib/utils";
 
+import { commitActiveEditThenRun } from "./commit-active-edit";
+import { EditorActionCluster } from "./EditorActionCluster";
 import { ExportMenu } from "./ExportMenu";
 interface EditorToolbarProps {
   deck: Deck;
@@ -99,10 +106,6 @@ interface EditorToolbarProps {
   commentsOpen?: boolean;
   /** Toggle the comments panel */
   onToggleComments?: () => void;
-  /** Whether the style panel is open */
-  styleOpen?: boolean;
-  /** Toggle the style panel */
-  onToggleStyle?: () => void;
   /** Number of unresolved comments on the current slide */
   unresolvedCommentCount?: number;
   /** Current user email for avatar display */
@@ -139,6 +142,16 @@ interface EditorToolbarProps {
   aspectRatio?: AspectRatio;
   /** Change the deck's aspect ratio */
   onSetAspectRatio?: (ratio: AspectRatio) => void;
+  /** Insert a blank slide after the current one */
+  onAddEmptySlide?: () => void;
+  /** Duplicate the current slide */
+  onDuplicateCurrentSlide?: () => void;
+  /** Id of the current slide, so an agent add-slide lands in the right place */
+  currentSlideId?: string;
+  /** True while an agent add-slide request is in flight */
+  addSlideGenerating?: boolean;
+  /** Called when an agent add-slide request is submitted */
+  onAddSlideGeneratingChange?: (generating: boolean) => void;
 }
 
 const slideLayoutOptions: { value: SlideLayout; labelKey: string }[] = [
@@ -249,8 +262,6 @@ export default function EditorToolbar({
   agentActive,
   commentsOpen,
   onToggleComments,
-  styleOpen,
-  onToggleStyle,
   unresolvedCommentCount = 0,
   currentUserEmail,
   animationsOpen,
@@ -269,6 +280,11 @@ export default function EditorToolbar({
   onExportGoogleSlides,
   aspectRatio,
   onSetAspectRatio,
+  onAddEmptySlide,
+  onDuplicateCurrentSlide,
+  currentSlideId,
+  addSlideGenerating = false,
+  onAddSlideGeneratingChange,
   canEdit = true,
 }: EditorToolbarProps) {
   const t = useT();
@@ -317,6 +333,11 @@ export default function EditorToolbar({
     setLayoutOpen(false);
   };
   const [toolsOpen, setToolsOpen] = useState(false);
+  // The contextual toolbar hosts the action cluster whenever it is on screen.
+  // That row rides on SlideEditor, which only mounts for a real slide, so an
+  // empty deck must keep this fallback or it has no way to add one.
+  const contextToolbarVisible = canEdit && Boolean(currentSlide);
+  const { undo, redo, canUndo, canRedo } = useDecks();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [importing, setImporting] = useState(false);
   const { setTheme, resolvedTheme } = useTheme();
@@ -442,6 +463,26 @@ export default function EditorToolbar({
         <TooltipContent>{t("editorToolbar.toggleSlideList")}</TooltipContent>
       </Tooltip>
 
+      {/* Add slide and the text-box tool live at the head of the contextual
+       * toolbar below. That row is desktop-only and needs a slide to mount on,
+       * so keep a fallback here for narrow screens and empty decks. */}
+      {canEdit && (
+        <EditorActionCluster
+          className={contextToolbarVisible ? "lg:hidden" : undefined}
+          deckId={deckId}
+          deckTitle={deckTitle}
+          currentSlideId={currentSlideId}
+          slideCount={slideCount}
+          currentSlideIndex={currentSlideIndex}
+          addSlideGenerating={addSlideGenerating}
+          onAddSlideGeneratingChange={onAddSlideGeneratingChange}
+          onAddEmptySlide={onAddEmptySlide}
+          onDuplicateCurrentSlide={onDuplicateCurrentSlide}
+          textBoxMode={textBoxMode}
+          onToggleTextBoxMode={onToggleTextBoxMode}
+        />
+      )}
+
       {/* Deck title */}
       <input
         type="text"
@@ -745,29 +786,6 @@ graph TD
         </>
       )}
 
-      {canEdit && onToggleTextBoxMode && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={onToggleTextBoxMode}
-              data-toolbar-textbox-button
-              aria-label={t("editorToolbar.addTextBox")}
-              aria-pressed={textBoxMode}
-              aria-keyshortcuts="T"
-              className={`${TOOLBAR_ICON_BUTTON_CLASS} ${
-                textBoxMode
-                  ? "bg-accent text-foreground"
-                  : "text-muted-foreground hover:bg-accent hover:text-foreground/70"
-              }`}
-            >
-              <IconLetterT className="size-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("editorToolbar.addTextBox")} (T)</TooltipContent>
-        </Tooltip>
-      )}
-
       {/* Slide tools palette — animations, tweaks, draw, comment-pin all live
        * inside one popover so the toolbar doesn't drown in icons. Hidden in
        * view-only mode since none of these affordances apply. */}
@@ -879,27 +897,6 @@ graph TD
         className="flex-shrink-0 mr-0.5"
       />
 
-      {/* Style toggle */}
-      {canEdit && currentSlide && onToggleStyle && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={onToggleStyle}
-              data-slide-style-trigger="true"
-              className={`${TOOLBAR_ICON_BUTTON_CLASS} relative ${
-                styleOpen
-                  ? "bg-accent text-foreground"
-                  : "text-muted-foreground hover:bg-accent hover:text-foreground/70"
-              }`}
-              aria-label={t("styleInspector.title")}
-            >
-              <IconPalette className="size-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("styleInspector.title")}</TooltipContent>
-        </Tooltip>
-      )}
-
       {/* Comments toggle */}
       {onToggleComments && (
         <Tooltip>
@@ -1008,6 +1005,29 @@ graph TD
           <TooltipContent>{t("editorToolbar.more")}</TooltipContent>
         </Tooltip>
         <DropdownMenuContent align="end" className="w-48">
+          {canEdit && (
+            <>
+              <DropdownMenuItem
+                disabled={!canUndo}
+                onSelect={() => commitActiveEditThenRun(undo)}
+              >
+                <IconArrowBackUp className="w-4 h-4 mr-2" />
+                {t("editorToolbar.undoWithShortcut", {
+                  shortcut: shortcutLabel("Cmd+Z"),
+                })}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={!canRedo}
+                onSelect={() => commitActiveEditThenRun(redo)}
+              >
+                <IconArrowForwardUp className="w-4 h-4 mr-2" />
+                {t("editorToolbar.redoWithShortcut", {
+                  shortcut: shortcutLabel("Cmd+Shift+Z"),
+                })}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
           <DropdownMenuItem
             disabled={importing}
             onSelect={() => fileInputRef.current?.click()}