@agent-native/core 0.137.0 → 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()}

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

@@ -0,0 +1,321 @@
+import {
+  IconArrowRight,
+  IconPalette,
+  IconPresentation,
+  IconUpload,
+} from "@tabler/icons-react";
+import type { ChangeEvent, ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { Deck } from "@/context/DeckContext";
+import type { RecentReference } from "@/lib/recent-references";
+import { cn } from "@/lib/utils";
+
+export interface NewDeckReferenceSelection {
+  designSystemId?: string | null;
+  referenceDeckId?: string | null;
+}
+
+interface DesignSystemOption {
+  id: string;
+  title: string;
+  isDefault?: boolean;
+}
+
+interface NewDeckReferenceStepProps {
+  open: boolean;
+  designSystems: DesignSystemOption[];
+  decks: Deck[];
+  defaultDesignSystemId: string | null;
+  defaultReferenceDeckId: string | null;
+  recentReferences: RecentReference[];
+  onSelect: (selection: NewDeckReferenceSelection) => void;
+  onImport: (files: File[]) => Promise<void>;
+  onSkip: () => void;
+  onOpenChange: (open: boolean) => void;
+  importing?: boolean;
+  title: string;
+  designSystemLabel: string;
+  referenceDeckLabel: string;
+  chooseDeckLabel: string;
+  importFileLabel: string;
+  importingLabel: string;
+  skipLabel: string;
+  defaultSuffix: string;
+  starredLabel: string;
+  otherDecksLabel: string;
+  description: string;
+  promptNote?: string;
+}
+
+export function NewDeckReferenceStep({
+  open,
+  designSystems,
+  decks,
+  defaultDesignSystemId,
+  defaultReferenceDeckId,
+  recentReferences,
+  onSelect,
+  onImport,
+  onSkip,
+  onOpenChange,
+  importing = false,
+  title,
+  designSystemLabel,
+  referenceDeckLabel,
+  chooseDeckLabel,
+  importFileLabel,
+  importingLabel,
+  skipLabel,
+  defaultSuffix,
+  starredLabel,
+  otherDecksLabel,
+  description,
+  promptNote,
+}: NewDeckReferenceStepProps) {
+  const designSystemById = new Map(
+    designSystems.map((designSystem) => [designSystem.id, designSystem]),
+  );
+  const deckById = new Map(decks.map((deck) => [deck.id, deck]));
+  const recentOptions = recentReferences
+    .map((reference) => {
+      const item =
+        reference.kind === "design-system"
+          ? designSystemById.get(reference.id)
+          : deckById.get(reference.id);
+      return item ? { reference, item } : null;
+    })
+    .filter(
+      (
+        value,
+      ): value is {
+        reference: RecentReference;
+        item: DesignSystemOption | Deck;
+      } => value !== null,
+    );
+  const defaultReferenceKeys = new Set(
+    [
+      defaultDesignSystemId ? `design-system:${defaultDesignSystemId}` : null,
+      defaultReferenceDeckId ? `deck:${defaultReferenceDeckId}` : null,
+    ].filter((value): value is string => value !== null),
+  );
+  const visibleRecentOptions = recentOptions.filter(
+    ({ reference }) =>
+      !defaultReferenceKeys.has(`${reference.kind}:${reference.id}`),
+  );
+  const starredDecks = decks.filter((deck) => deck.starred);
+  const otherDecks = decks.filter((deck) => !deck.starred);
+
+  const handleImport = async (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    if (files.length === 0) return;
+    await onImport(files);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[min(720px,calc(100vh-32px))] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          {(defaultDesignSystemId || defaultReferenceDeckId) && (
+            <div className="grid gap-2 sm:grid-cols-2">
+              {defaultDesignSystemId &&
+                designSystemById.has(defaultDesignSystemId) && (
+                  <ReferenceCard
+                    icon={<IconPalette className="size-4" />}
+                    label={
+                      designSystemById.get(defaultDesignSystemId)?.title ??
+                      designSystemLabel
+                    }
+                    meta={`${designSystemLabel}${defaultSuffix}`}
+                    onClick={() =>
+                      onSelect({
+                        designSystemId: defaultDesignSystemId,
+                        referenceDeckId: null,
+                      })
+                    }
+                  />
+                )}
+              {defaultReferenceDeckId &&
+                deckById.has(defaultReferenceDeckId) && (
+                  <ReferenceCard
+                    icon={<IconPresentation className="size-4" />}
+                    label={deckById.get(defaultReferenceDeckId)?.title ?? ""}
+                    meta={`${referenceDeckLabel}${defaultSuffix}`}
+                    onClick={() =>
+                      onSelect({
+                        designSystemId: null,
+                        referenceDeckId: defaultReferenceDeckId,
+                      })
+                    }
+                  />
+                )}
+            </div>
+          )}
+
+          {visibleRecentOptions.length > 0 && (
+            <div className="grid gap-2">
+              <div className="grid gap-2 sm:grid-cols-2">
+                {visibleRecentOptions.map(({ reference, item }) => (
+                  <ReferenceCard
+                    key={`${reference.kind}:${reference.id}`}
+                    icon={
+                      reference.kind === "design-system" ? (
+                        <IconPalette className="size-4" />
+                      ) : (
+                        <IconPresentation className="size-4" />
+                      )
+                    }
+                    label={item.title}
+                    meta={
+                      reference.kind === "design-system"
+                        ? designSystemLabel
+                        : referenceDeckLabel
+                    }
+                    onClick={() =>
+                      onSelect(
+                        reference.kind === "design-system"
+                          ? {
+                              designSystemId: reference.id,
+                              referenceDeckId: null,
+                            }
+                          : {
+                              designSystemId: null,
+                              referenceDeckId: reference.id,
+                            },
+                      )
+                    }
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {decks.length > 0 && (
+            <div className="grid gap-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                {referenceDeckLabel}
+              </span>
+              <Select
+                onValueChange={(value) =>
+                  onSelect({ designSystemId: null, referenceDeckId: value })
+                }
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={chooseDeckLabel} />
+                </SelectTrigger>
+                <SelectContent>
+                  {starredDecks.length > 0 && (
+                    <SelectGroup>
+                      <SelectLabel>{starredLabel}</SelectLabel>
+                      {starredDecks.map((deck) => (
+                        <SelectItem key={deck.id} value={deck.id}>
+                          {deck.title}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  )}
+                  {otherDecks.length > 0 && (
+                    <SelectGroup>
+                      <SelectLabel>{otherDecksLabel}</SelectLabel>
+                      {otherDecks.map((deck) => (
+                        <SelectItem key={deck.id} value={deck.id}>
+                          {deck.title}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
+            <label
+              className={cn(
+                "inline-flex cursor-pointer items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:bg-accent",
+                importing && "pointer-events-none opacity-60",
+              )}
+            >
+              <IconUpload className="size-4" />
+              {importing ? importingLabel : importFileLabel}
+              <input
+                type="file"
+                className="sr-only"
+                accept=".pptx,.pdf,.docx"
+                multiple
+                disabled={importing}
+                onChange={(event) => void handleImport(event)}
+              />
+            </label>
+          </div>
+        </div>
+
+        {promptNote && (
+          <p className="truncate border-t border-border pt-3 text-xs text-muted-foreground">
+            {promptNote}
+          </p>
+        )}
+
+        <div className="flex items-center justify-between border-t border-border pt-3">
+          <Button type="button" variant="ghost" onClick={onSkip}>
+            {skipLabel}
+          </Button>
+          <IconArrowRight className="size-4 text-muted-foreground" />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ReferenceCard({
+  icon,
+  label,
+  meta,
+  onClick,
+}: {
+  icon: ReactNode;
+  label: string;
+  meta: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex min-w-0 items-center gap-3 rounded-lg border border-border bg-card px-3 py-3 text-start transition-colors hover:border-foreground/30 hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-accent text-muted-foreground">
+        {icon}
+      </span>
+      <span className="min-w-0">
+        <span className="block truncate text-sm font-medium">{label}</span>
+        <span className="block truncate text-xs text-muted-foreground">
+          {meta}
+        </span>
+      </span>
+      <IconArrowRight className="ms-auto size-4 shrink-0 text-muted-foreground" />
+    </button>
+  );
+}

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

@@ -16,6 +16,37 @@ export interface UploadedFile {
   size: number;
 }
 
+export async function uploadPromptFiles(
+  files: File[],
+): Promise<UploadedFile[]> {
+  if (files.length === 0) return [];
+  const formData = new FormData();
+  files.forEach((file) => formData.append("files", file));
+  const response = await fetch(`${appBasePath()}/api/uploads`, {
+    method: "POST",
+    body: formData,
+  });
+  if (!response.ok) {
+    let message = "Upload failed";
+    try {
+      const data: unknown = await response.json();
+      if (
+        data &&
+        typeof data === "object" &&
+        "error" in data &&
+        typeof data.error === "string" &&
+        data.error.trim()
+      ) {
+        message = data.error;
+      }
+    } catch (error) {
+      throw new Error(`Upload failed (${response.status})`, { cause: error });
+    }
+    throw new Error(message);
+  }
+  return (await response.json()) as UploadedFile[];
+}
+
 /**
  * Radix popovers portal to `document.body`, so a mousedown inside the model
  * picker or attachment menu reads as "outside" any panel that hosts a composer.
@@ -137,17 +168,7 @@ export default function PromptPopover({
       if (files.length === 0) return [];
       setUploading(true);
       try {
-        const formData = new FormData();
-        files.forEach((f) => formData.append("files", f));
-        const res = await fetch(`${appBasePath()}/api/uploads`, {
-          method: "POST",
-          body: formData,
-        });
-        if (!res.ok) {
-          const data = await res.json().catch(() => null);
-          throw new Error(data?.error || "Upload failed");
-        }
-        return (await res.json()) as UploadedFile[];
+        return await uploadPromptFiles(files);
       } finally {
         setUploading(false);
       }