@agent-native/core 0.149.1 → 0.149.2

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

@@ -48,6 +48,8 @@ interface ExportMenuProps {
   onExportGoogleSlides?: () => Promise<GoogleSlidesExportResult>;
   onShareLink?: () => void;
   onShareTeam?: () => void;
+  /** Render the export actions inside an existing dropdown menu. */
+  inline?: boolean;
 }
 
 export function ExportMenu({
@@ -59,6 +61,7 @@ export function ExportMenu({
   onExportGoogleSlides,
   onShareLink,
   onShareTeam,
+  inline = false,
 }: ExportMenuProps) {
   const t = useT();
   const [googleSlidesImportOpen, setGoogleSlidesImportOpen] = useState(false);
@@ -224,75 +227,81 @@ export function ExportMenu({
     }
   };
 
-  return (
+  const menuContent = (
     <>
-      <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 />
+      <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>
+      <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={handleExportHtml}
+            onClick={handleConnectGoogle}
             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")}
+            <IconPlugConnected className="w-4 h-4 mr-2" />
+            {t("editorExport.connectGoogle")}
           </DropdownMenuItem>
           <DropdownMenuItem
-            onClick={handleExportPptx}
+            onClick={handleExportGoogleSlides}
             className="cursor-pointer"
           >
-            <IconDownload className="w-4 h-4 mr-2" />
-            {t("editorExport.exportPptx")}
+            <IconBrandGoogle className="w-4 h-4 mr-2" />
+            {t("editorExport.openInGoogleSlides")}
           </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>
+        </>
+      )}
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
+        <IconCopy className="w-4 h-4 mr-2" />
+        {t("editorExport.duplicateDeck")}
+      </DropdownMenuItem>
+    </>
+  );
+
+  return (
+    <>
+      {inline ? (
+        menuContent
+      ) : (
+        <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">
+            {menuContent}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
       <Dialog
         open={googleSlidesImportOpen}
         onOpenChange={setGoogleSlidesImportOpen}

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

@@ -69,7 +69,7 @@ export default function GeneratingSlidePreview({
         <span className="size-1.5 rounded-full bg-primary" aria-hidden="true" />
         {t("raw.aiEditing")}
       </div>
-      <div className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur">
+      <div className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5 text-muted-foreground shadow-sm">
         <IconLoader2 className="size-3.5 animate-spin" aria-hidden="true" />
       </div>
     </div>

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

@@ -5,6 +5,7 @@ import {
   IconBrandGoogleDrive,
   IconLoader2,
   IconPlugConnected,
+  IconX,
 } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 
@@ -65,6 +66,7 @@ export function GoogleDriveConnectionCta({
   const [loading, setLoading] = useState(true);
   const [connecting, setConnecting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [dismissed, setDismissed] = useState(false);
 
   const refreshStatus =
     useCallback(async (): Promise<GoogleDocsStatus | null> => {
@@ -165,7 +167,9 @@ export function GoogleDriveConnectionCta({
     }
   }, [connecting, onConnected, refreshStatus, requiresUrlImportAccess]);
 
-  if (loading || (status?.connected && !needsReconnect)) return null;
+  if (dismissed || loading || (status?.connected && !needsReconnect)) {
+    return null;
+  }
 
   const displayStatus = status ?? { configured: false, connected: false };
 
@@ -208,6 +212,14 @@ export function GoogleDriveConnectionCta({
             : t("editorExport.connectGoogle")}
         </Button>
       )}
+      <button
+        type="button"
+        onClick={() => setDismissed(true)}
+        className="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label={t("comments.close")}
+      >
+        <IconX className="size-3.5" />
+      </button>
     </div>
   );
 }

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

@@ -7,7 +7,6 @@ import {
   IconChevronDown,
   IconFileText,
   IconFileTypePdf,
-  IconPalette,
   IconPresentation,
   IconWorld,
 } from "@tabler/icons-react";
@@ -37,9 +36,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { Deck } from "@/context/DeckContext";
-import type { RecentReference } from "@/lib/recent-references";
+import { sortDecksByRecency } from "@/lib/deck-sorting";
 import { cn } from "@/lib/utils";
 
+import { GoogleDriveConnectionCta } from "./GoogleDriveConnectionCta";
+
 export interface NewDeckReferenceSelection {
   designSystemId?: string | null;
   referenceDeckId?: string | null;
@@ -71,7 +72,6 @@ interface NewDeckReferenceStepProps {
   decks: Deck[];
   defaultDesignSystemId: string | null;
   defaultReferenceDeckId: string | null;
-  recentReferences: RecentReference[];
   onSelect: (selection: NewDeckReferenceSelection) => void | Promise<void>;
   onImport: (files: File[]) => Promise<ImportedReference | null>;
   onImportSource: (
@@ -86,8 +86,6 @@ interface NewDeckReferenceStepProps {
   chooseDeckLabel: string;
   importingLabel: string;
   skipLabel: string;
-  starredLabel: string;
-  otherDecksLabel: string;
   searchDecksLabel: string;
   promptSummary?: string;
 }
@@ -98,7 +96,6 @@ export function NewDeckReferenceStep({
   decks,
   defaultDesignSystemId,
   defaultReferenceDeckId,
-  recentReferences,
   onSelect,
   onImport,
   onImportSource,
@@ -111,8 +108,6 @@ export function NewDeckReferenceStep({
   chooseDeckLabel,
   importingLabel,
   skipLabel,
-  starredLabel,
-  otherDecksLabel,
   searchDecksLabel,
   promptSummary,
 }: NewDeckReferenceStepProps) {
@@ -129,33 +124,8 @@ export function NewDeckReferenceStep({
     useState<NewDeckReferenceSelection["referenceSource"]>(null);
   const [referenceDeckSearchOpen, setReferenceDeckSearchOpen] = useState(false);
 
-  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 visibleRecentOptions = recentOptions.filter(({ reference }) =>
-    reference.kind === "design-system"
-      ? reference.id !== selectedDesignSystemId
-      : reference.id !== selectedReferenceDeckId,
-  );
-  const starredDecks = decks.filter((deck) => deck.starred);
-  const otherDecks = decks.filter((deck) => !deck.starred);
+  const sortedDecks = sortDecksByRecency(decks);
   const selectedReferenceDeck = selectedReferenceDeckId
     ? deckById.get(selectedReferenceDeckId)
     : undefined;
@@ -272,9 +242,9 @@ export function NewDeckReferenceStep({
                 )}
               </div>
               <Select
-                value={selectedDesignSystemId ?? undefined}
+                value={selectedDesignSystemId ?? "none"}
                 onValueChange={(value) => {
-                  setSelectedDesignSystemId(value);
+                  setSelectedDesignSystemId(value === "none" ? null : value);
                   setSelectedSource(null);
                 }}
               >
@@ -285,6 +255,7 @@ export function NewDeckReferenceStep({
                   <SelectValue placeholder={designSystemLabel} />
                 </SelectTrigger>
                 <SelectContent>
+                  <SelectItem value="none">{t("home.none")}</SelectItem>
                   {designSystems.map((designSystem) => (
                     <SelectItem key={designSystem.id} value={designSystem.id}>
                       {designSystem.title}
@@ -331,101 +302,55 @@ export function NewDeckReferenceStep({
                     <CommandInput placeholder={searchDecksLabel} />
                     <CommandList className="max-h-72">
                       <CommandEmpty>{t("home.noMatchingDecks")}</CommandEmpty>
-                      {starredDecks.length > 0 && (
-                        <CommandGroup heading={starredLabel}>
-                          {starredDecks.map((deck) => (
-                            <CommandItem
-                              key={deck.id}
-                              value={`${deck.title} ${deck.id}`}
-                              onSelect={() => {
-                                setSelectedReferenceDeckId(deck.id);
-                                setImportedReference(null);
-                                setSelectedSource(null);
-                                setReferenceDeckSearchOpen(false);
-                              }}
-                            >
-                              <IconCheck
-                                className={cn(
-                                  "me-2 size-4",
-                                  selectedReferenceDeckId === deck.id
-                                    ? "opacity-100"
-                                    : "opacity-0",
-                                )}
-                              />
-                              <span className="truncate">{deck.title}</span>
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      )}
-                      {otherDecks.length > 0 && (
-                        <CommandGroup heading={otherDecksLabel}>
-                          {otherDecks.map((deck) => (
-                            <CommandItem
-                              key={deck.id}
-                              value={`${deck.title} ${deck.id}`}
-                              onSelect={() => {
-                                setSelectedReferenceDeckId(deck.id);
-                                setImportedReference(null);
-                                setSelectedSource(null);
-                                setReferenceDeckSearchOpen(false);
-                              }}
-                            >
-                              <IconCheck
-                                className={cn(
-                                  "me-2 size-4",
-                                  selectedReferenceDeckId === deck.id
-                                    ? "opacity-100"
-                                    : "opacity-0",
-                                )}
-                              />
-                              <span className="truncate">{deck.title}</span>
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      )}
+                      <CommandGroup>
+                        <CommandItem
+                          value={`none ${t("home.none")}`}
+                          onSelect={() => {
+                            setSelectedReferenceDeckId(null);
+                            setImportedReference(null);
+                            setSelectedSource(null);
+                            setReferenceDeckSearchOpen(false);
+                          }}
+                        >
+                          <IconCheck
+                            className={cn(
+                              "me-2 size-4",
+                              selectedReferenceDeckId === null
+                                ? "opacity-100"
+                                : "opacity-0",
+                            )}
+                          />
+                          <span className="truncate">{t("home.none")}</span>
+                        </CommandItem>
+                        {sortedDecks.map((deck) => (
+                          <CommandItem
+                            key={deck.id}
+                            value={`${deck.title} ${deck.id}`}
+                            onSelect={() => {
+                              setSelectedReferenceDeckId(deck.id);
+                              setImportedReference(null);
+                              setSelectedSource(null);
+                              setReferenceDeckSearchOpen(false);
+                            }}
+                          >
+                            <IconCheck
+                              className={cn(
+                                "me-2 size-4",
+                                selectedReferenceDeckId === deck.id
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <span className="truncate">{deck.title}</span>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
                     </CommandList>
                   </Command>
                 </PopoverContent>
               </Popover>
             </div>
 
-            {visibleRecentOptions.length > 0 && (
-              <div className="border-t border-border pt-5">
-                <span className="text-xs font-medium text-muted-foreground">
-                  Recent
-                </span>
-                <div className="mt-2 space-y-2">
-                  {visibleRecentOptions.map(({ reference, item }) => (
-                    <ReferenceRow
-                      key={`${reference.kind}:${reference.id}`}
-                      compact
-                      icon={
-                        reference.kind === "design-system" ? (
-                          <IconPalette className="size-4" />
-                        ) : (
-                          <IconPresentation className="size-4" />
-                        )
-                      }
-                      label={item.title}
-                      meta={
-                        reference.kind === "design-system"
-                          ? designSystemLabel
-                          : referenceDeckLabel
-                      }
-                      onClick={() => {
-                        if (reference.kind === "design-system") {
-                          setSelectedDesignSystemId(reference.id);
-                        } else {
-                          setSelectedReferenceDeckId(reference.id);
-                        }
-                        setSelectedSource(null);
-                      }}
-                    />
-                  ))}
-                </div>
-              </div>
-            )}
-
             <div className="border-t border-border pt-5">
               <span className="text-xs font-medium text-muted-foreground">
                 {t("home.importFrom")}
@@ -463,7 +388,7 @@ export function NewDeckReferenceStep({
                 />
                 <ImportOption
                   icon={<IconBrandGoogle className="size-4" />}
-                  label={t("home.googleSlidesReferenceTitle")}
+                  label={t("home.googleSlidesImportLabel")}
                   confirmed={importedReference?.source === "google-slides"}
                   confirmedLabel={t("home.imported")}
                   selected={
@@ -502,6 +427,11 @@ export function NewDeckReferenceStep({
                   }
                 />
               )}
+              {selectedSource?.kind === "google-docs" && (
+                <div className="mt-3">
+                  <GoogleDriveConnectionCta />
+                </div>
+              )}
               {importedReference && (
                 <div
                   className="mt-3 flex items-start gap-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2.5 text-sm"
@@ -633,51 +563,3 @@ function ImportOption({
     </button>
   );
 }
-
-function ReferenceRow({
-  icon,
-  label,
-  meta,
-  selected = false,
-  compact = false,
-  onClick,
-}: {
-  icon: ReactNode;
-  label: string;
-  meta: string;
-  selected?: boolean;
-  compact?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        "flex w-full min-w-0 items-center gap-3 rounded-lg border px-4 text-start transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        compact ? "py-2.5" : "py-3.5",
-        selected
-          ? "border-primary/50 bg-primary/5"
-          : "border-border bg-card/40 hover:border-foreground/30 hover:bg-accent/40",
-      )}
-    >
-      <span
-        className={cn(
-          "flex size-8 shrink-0 items-center justify-center rounded-md",
-          selected
-            ? "bg-primary/10 text-primary"
-            : "bg-accent text-muted-foreground",
-        )}
-      >
-        {icon}
-      </span>
-      <span className="min-w-0 flex-1">
-        <span className="block truncate text-sm font-medium">{label}</span>
-        <span className="block truncate text-xs text-muted-foreground">
-          {meta}
-        </span>
-      </span>
-      {selected && <IconCheck className="size-4 shrink-0 text-primary" />}
-    </button>
-  );
-}