@agent-native/core 0.131.5 → 0.131.7

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

@@ -0,0 +1,35 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DeckEditorSkeleton({ label }: { label: string }) {
+  return (
+    <div
+      className="flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background"
+      role="status"
+      aria-label={label}
+      data-testid="deck-editor-loading"
+    >
+      <div className="flex h-11 shrink-0 items-center gap-3 border-b border-border px-3">
+        <Skeleton className="size-8 rounded-md" />
+        <Skeleton className="h-5 w-36" />
+        <div className="ml-auto flex items-center gap-2">
+          <Skeleton className="h-8 w-20 rounded-md" />
+          <Skeleton className="size-8 rounded-md" />
+          <Skeleton className="size-8 rounded-md" />
+        </div>
+      </div>
+      <div className="flex min-h-0 flex-1">
+        <div className="hidden w-56 shrink-0 flex-col gap-4 border-r border-border p-4 sm:w-64 md:flex">
+          {[0, 1, 2].map((index) => (
+            <div key={index} className="flex gap-3">
+              <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
+              <Skeleton className="aspect-video flex-1 rounded-md" />
+            </div>
+          ))}
+        </div>
+        <div className="flex min-w-0 flex-1 items-center justify-center bg-muted/20 p-6">
+          <Skeleton className="aspect-video w-full max-w-4xl rounded-md shadow-sm" />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -51,14 +51,14 @@ interface EditorSidebarProps {
   onDuplicateSlide: (id: string) => void;
   onDeleteSlide: (id: string) => void;
   onAddEmptySlide: () => void;
+  /** Viewer-role decks get thumbnails only: no add, duplicate, or delete. */
+  readOnly?: boolean;
   /** Presence map: slideId → list of users currently viewing that slide */
   slidePresence?: Map<string, CollabUser[]>;
   /** Lingering recent edits (e.g. agent edits) to highlight over thumbnails. */
   recentEdits?: AttributedRecentEdit[];
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
-  /** True while a newly-created deck is being populated slide by slide. */
-  deckGenerating?: boolean;
 }
 
 /** Extract the slide id from a `{kind:"paths",paths:["slides.<id>"]}` edit. */
@@ -183,6 +183,7 @@ function SortableSlideThumb({
   registerButtonRef,
   presenceUsers = [],
   aspectRatio,
+  readOnly = false,
 }: {
   slide: Slide;
   index: number;
@@ -190,6 +191,7 @@ function SortableSlideThumb({
   onSelect: () => void;
   onDuplicate: () => void;
   onDelete: () => void;
+  readOnly?: boolean;
   registerButtonRef: (slideId: string, node: HTMLButtonElement | null) => void;
   presenceUsers?: CollabUser[];
   aspectRatio?: AspectRatio;
@@ -204,6 +206,7 @@ function SortableSlideThumb({
     isDragging,
   } = useSortable({
     id: slide.id,
+    disabled: readOnly,
   });
 
   const style = {
@@ -270,38 +273,40 @@ function SortableSlideThumb({
       </button>
 
       {/* Actions - always visible on touch devices */}
-      <div className="absolute top-2 right-2 flex gap-0.5 sm:opacity-0 sm:group-hover:opacity-100">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onDuplicate();
-              }}
-              className="p-1.5 rounded bg-black/60 backdrop-blur-sm border border-white/10 hover:bg-black/80"
-              aria-label={t("editorSidebar.duplicateSlide")}
-            >
-              <IconCopy className="w-3 h-3 text-white/60" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("editorSidebar.duplicate")}</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete();
-              }}
-              className="p-1.5 rounded bg-black/60 backdrop-blur-sm border border-white/10 hover:bg-red-900/80"
-              aria-label={t("editorSidebar.deleteSlide")}
-            >
-              <IconTrash className="w-3 h-3 text-white/60" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("editorSidebar.delete")}</TooltipContent>
-        </Tooltip>
-      </div>
+      {!readOnly && (
+        <div className="absolute top-2 right-2 flex gap-0.5 sm:opacity-0 sm:group-hover:opacity-100">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDuplicate();
+                }}
+                className="p-1.5 rounded bg-black/60 backdrop-blur-sm border border-white/10 hover:bg-black/80"
+                aria-label={t("editorSidebar.duplicateSlide")}
+              >
+                <IconCopy className="w-3 h-3 text-white/60" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{t("editorSidebar.duplicate")}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}
+                className="p-1.5 rounded bg-black/60 backdrop-blur-sm border border-white/10 hover:bg-red-900/80"
+                aria-label={t("editorSidebar.deleteSlide")}
+              >
+                <IconTrash className="w-3 h-3 text-white/60" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{t("editorSidebar.delete")}</TooltipContent>
+          </Tooltip>
+        </div>
+      )}
     </div>
   );
 }
@@ -550,10 +555,10 @@ export default function EditorSidebar({
   onDuplicateSlide,
   onDeleteSlide,
   onAddEmptySlide,
+  readOnly = false,
   slidePresence,
   recentEdits,
   aspectRatio,
-  deckGenerating = false,
 }: EditorSidebarProps) {
   const t = useT();
   const activeIndex = slides.findIndex((s) => s.id === activeSlideId);
@@ -577,7 +582,6 @@ export default function EditorSidebar({
     [],
   );
   const { generating, submit: agentSubmit } = useAgentGenerating();
-  const showGeneratingSlide = deckGenerating || addSlideGenerating;
 
   const registerSlideButton = useCallback(
     (slideId: string, node: HTMLButtonElement | null) => {
@@ -638,7 +642,7 @@ export default function EditorSidebar({
         <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
           {t("editorSidebar.slides")}
         </span>
-        {showGeneratingSlide ? (
+        {readOnly ? null : addSlideGenerating ? (
           <IconLoader2 className="w-4 h-4 text-muted-foreground animate-spin" />
         ) : (
           <Tooltip>
@@ -674,13 +678,14 @@ export default function EditorSidebar({
               onSelect={() => onSelectSlide(slide.id)}
               onDuplicate={() => onDuplicateSlide(slide.id)}
               onDelete={() => onDeleteSlide(slide.id)}
+              readOnly={readOnly}
               registerButtonRef={registerSlideButton}
               presenceUsers={slidePresence?.get(slide.id) ?? []}
               aspectRatio={aspectRatio}
             />
           ))}
         </SortableContext>
-        {showGeneratingSlide && (
+        {addSlideGenerating && (
           <GeneratingSlideSkeleton
             index={slides.length}
             aspectRatio={aspectRatio}
@@ -697,24 +702,26 @@ export default function EditorSidebar({
         )}
       </div>
 
-      <AddSlidePopover
-        open={addOpen}
-        onOpenChange={setAddOpen}
-        anchorRef={headerAddRef}
-        deckId={deckId}
-        deckTitle={deckTitle}
-        activeSlideId={activeSlideId}
-        slideCount={slides.length}
-        activeSlideIndex={activeIndex >= 0 ? activeIndex : 0}
-        agentSubmit={(msg, ctx) => {
-          setAddSlideGenerating(true);
-          agentSubmit(msg, ctx);
-        }}
-        onDuplicateCurrent={
-          activeSlideId ? () => onDuplicateSlide(activeSlideId) : undefined
-        }
-        onAddEmpty={onAddEmptySlide}
-      />
+      {!readOnly && (
+        <AddSlidePopover
+          open={addOpen}
+          onOpenChange={setAddOpen}
+          anchorRef={headerAddRef}
+          deckId={deckId}
+          deckTitle={deckTitle}
+          activeSlideId={activeSlideId}
+          slideCount={slides.length}
+          activeSlideIndex={activeIndex >= 0 ? activeIndex : 0}
+          agentSubmit={(msg, ctx) => {
+            setAddSlideGenerating(true);
+            agentSubmit(msg, ctx);
+          }}
+          onDuplicateCurrent={
+            activeSlideId ? () => onDuplicateSlide(activeSlideId) : undefined
+          }
+          onAddEmpty={onAddEmptySlide}
+        />
+      )}
     </div>
   );
 }

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

@@ -17,8 +17,6 @@ import {
   IconLayoutSidebar,
   IconPhoto,
   IconHistory,
-  IconArrowBackUp,
-  IconArrowForwardUp,
   IconFolderOpen,
   IconSettings,
   IconSchema,
@@ -67,7 +65,6 @@ 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 { ExportMenu } from "./ExportMenu";
 interface EditorToolbarProps {
@@ -90,10 +87,6 @@ interface EditorToolbarProps {
   historyOpen: boolean;
   onShowHistory: () => void;
   historyButtonRef: React.RefObject<HTMLButtonElement | null>;
-  onUndo: () => void;
-  onRedo: () => void;
-  canUndo: boolean;
-  canRedo: boolean;
   currentSlide?: Slide;
   onUpdateSlide?: (updates: Partial<Omit<Slide, "id">>) => void;
   /** Active users on the current slide (from collab awareness) */
@@ -171,6 +164,8 @@ const backgroundOptions = [
 ];
 
 const HEX_COLOR_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const TOOLBAR_ICON_BUTTON_CLASS =
+  "inline-flex size-8 flex-shrink-0 items-center justify-center rounded-md transition-colors";
 
 /** Native <input type="color"> only accepts 3/6-digit hex — fall back to
  * black for gradients or other raw CSS values so the picker still opens. */
@@ -247,10 +242,6 @@ export default function EditorToolbar({
   assetsButtonRef,
   onShowHistory,
   historyButtonRef,
-  onUndo,
-  onRedo,
-  canUndo,
-  canRedo,
   currentSlide,
   onUpdateSlide,
   activeUsers,
@@ -426,10 +417,10 @@ export default function EditorToolbar({
         <TooltipTrigger asChild>
           <Link
             to="/"
-            className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent transition-colors flex-shrink-0"
+            className={`${TOOLBAR_ICON_BUTTON_CLASS} hover:bg-accent`}
             aria-label={t("editorToolbar.backToDecks")}
           >
-            <IconArrowLeft className="w-4 h-4 text-muted-foreground" />
+            <IconArrowLeft className="size-4 text-muted-foreground" />
           </Link>
         </TooltipTrigger>
         <TooltipContent>{t("editorToolbar.backToDecks")}</TooltipContent>
@@ -440,12 +431,12 @@ export default function EditorToolbar({
         <TooltipTrigger asChild>
           <button
             onClick={onToggleSidebar}
-            className={`md:hidden p-2.5 sm:p-1.5 rounded-md hover:bg-accent transition-colors flex-shrink-0 ${
+            className={`${TOOLBAR_ICON_BUTTON_CLASS} md:hidden hover:bg-accent ${
               sidebarOpen ? "text-muted-foreground" : "text-muted-foreground/70"
             }`}
             aria-label={t("editorToolbar.toggleSlideList")}
           >
-            <IconLayoutSidebar className="w-4 h-4" />
+            <IconLayoutSidebar className="size-4" />
           </button>
         </TooltipTrigger>
         <TooltipContent>{t("editorToolbar.toggleSlideList")}</TooltipContent>
@@ -486,14 +477,14 @@ export default function EditorToolbar({
                   closeAll();
                   setLayoutOpen(!layoutOpen);
                 }}
-                className={`flex items-center gap-1 p-2.5 sm:px-2 sm:py-1.5 rounded-md text-xs transition-colors flex-shrink-0 ${
+                className={`${TOOLBAR_ICON_BUTTON_CLASS} ${
                   layoutOpen
                     ? "text-foreground/90 bg-accent"
                     : "text-muted-foreground hover:text-foreground/70 hover:bg-accent"
                 }`}
                 aria-label={t("editorToolbar.slideSettings")}
               >
-                <IconSettings className="w-3.5 h-3.5" />
+                <IconSettings className="size-4" />
               </button>
             </TooltipTrigger>
             <TooltipContent>{t("editorToolbar.slideSettings")}</TooltipContent>
@@ -665,7 +656,7 @@ graph TD
                         console.error("Mermaid to Excalidraw failed:", err);
                       }
                     }}
-                    className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[#00E5FF]/80 hover:text-[#00E5FF] hover:bg-accent/50 transition-colors"
+                    className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[hsl(var(--accent-cyan))]/80 hover:text-[hsl(var(--accent-cyan))] hover:bg-accent/50 transition-colors"
                   >
                     <IconTransform className="w-3 h-3" />
                     {t("editorToolbar.convertMermaidToExcalidraw")}
@@ -719,8 +710,8 @@ graph TD
               {/* Aspect Ratio section (deck-level) */}
               {onSetAspectRatio && (
                 <>
-                  <div className="mx-2 my-1.5 border-t border-white/[0.06]" />
-                  <div className="px-3 py-1.5 text-[10px] font-medium text-white/30 uppercase tracking-wider">
+                  <div className="mx-2 my-1.5 border-t border-border" />
+                  <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
                     {t("editorToolbar.aspectRatio")}
                   </div>
                   <div className="px-3 pb-2.5 grid grid-cols-4 gap-1">
@@ -734,7 +725,7 @@ graph TD
                               className={`px-1.5 py-1 rounded text-[10px] font-medium border ${
                                 active
                                   ? "bg-[#609FF8]/20 text-[#609FF8] border-[#609FF8]/30"
-                                  : "text-white/40 hover:text-white/70 hover:bg-white/[0.04] border-transparent"
+                                  : "text-muted-foreground hover:text-foreground hover:bg-accent/50 border-transparent"
                               }`}
                             >
                               {r}
@@ -764,7 +755,7 @@ graph TD
               aria-label={t("editorToolbar.addTextBox")}
               aria-pressed={textBoxMode}
               aria-keyshortcuts="T"
-              className={`flex-shrink-0 rounded p-1.5 ${
+              className={`${TOOLBAR_ICON_BUTTON_CLASS} ${
                 textBoxMode
                   ? "bg-accent text-foreground"
                   : "text-muted-foreground hover:bg-accent hover:text-foreground/70"
@@ -796,14 +787,14 @@ graph TD
               <TooltipTrigger asChild>
                 <DropdownMenuTrigger asChild>
                   <button
-                    className={`relative p-1.5 rounded cursor-pointer flex-shrink-0 ${
+                    className={`${TOOLBAR_ICON_BUTTON_CLASS} relative cursor-pointer ${
                       anyToolActive || toolsOpen
                         ? "bg-accent text-foreground"
                         : "text-muted-foreground hover:text-foreground/70 hover:bg-accent"
                     }`}
                     aria-label={t("editorToolbar.slideTools")}
                   >
-                    <IconTool className="w-4 h-4" />
+                    <IconTool className="size-4" />
                     {anyToolActive && !toolsOpen && (
                       <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-[#609FF8]" />
                     )}
@@ -869,52 +860,6 @@ graph TD
           </DropdownMenu>
         )}
 
-      {/* Edit-only cluster — undo/redo */}
-      {canEdit && (
-        <>
-          {/* Separator */}
-          <div className="hidden h-5 w-px flex-shrink-0 bg-border/70 sm:block" />
-
-          {/* Undo/Redo */}
-          <div className="flex items-center flex-shrink-0">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onUndo}
-                  disabled={!canUndo}
-                  className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent disabled:opacity-20 transition-colors"
-                  aria-label={t("editorToolbar.undo")}
-                >
-                  <IconArrowBackUp className="w-3.5 h-3.5 text-muted-foreground" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {t("editorToolbar.undoWithShortcut", {
-                  shortcut: shortcutLabel("cmd+z"),
-                })}
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onRedo}
-                  disabled={!canRedo}
-                  className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent disabled:opacity-20 transition-colors"
-                  aria-label={t("editorToolbar.redo")}
-                >
-                  <IconArrowForwardUp className="w-3.5 h-3.5 text-muted-foreground" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {t("editorToolbar.redoWithShortcut", {
-                  shortcut: shortcutLabel("cmd+shift+z"),
-                })}
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </>
-      )}
-
       {/* Save status — subtle "Saving…" / "Saved" / offline pill. Renders
           nothing when idle. Only meaningful for editors. */}
       {canEdit && (
@@ -941,14 +886,14 @@ graph TD
             <button
               onClick={onToggleStyle}
               data-slide-style-trigger="true"
-              className={`relative flex-shrink-0 rounded-md p-2.5 transition-colors sm:p-1.5 ${
+              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="h-3.5 w-3.5" />
+              <IconPalette className="size-4" />
             </button>
           </TooltipTrigger>
           <TooltipContent>{t("styleInspector.title")}</TooltipContent>
@@ -961,14 +906,14 @@ graph TD
           <TooltipTrigger asChild>
             <button
               onClick={onToggleComments}
-              className={`relative p-2.5 sm:p-1.5 rounded-md transition-colors flex-shrink-0 ${
+              className={`${TOOLBAR_ICON_BUTTON_CLASS} relative ${
                 commentsOpen
                   ? "text-foreground bg-accent"
                   : "text-muted-foreground hover:text-foreground/70 hover:bg-accent"
               }`}
               aria-label={t("editorToolbar.comments")}
             >
-              <IconMessage className="w-3.5 h-3.5" />
+              <IconMessage className="size-4" />
               {unresolvedCommentCount > 0 && (
                 <span className="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-[#609FF8] text-[8px] font-bold text-black flex items-center justify-center leading-none">
                   {unresolvedCommentCount > 9 ? "9+" : unresolvedCommentCount}
@@ -1053,10 +998,10 @@ graph TD
             <DropdownMenuTrigger asChild>
               <button
                 ref={historyButtonRef}
-                className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent transition-colors flex-shrink-0 text-muted-foreground hover:text-foreground/70 cursor-pointer"
+                className={`${TOOLBAR_ICON_BUTTON_CLASS} cursor-pointer text-muted-foreground hover:bg-accent hover:text-foreground/70`}
                 aria-label={t("editorToolbar.more")}
               >
-                <IconDotsVertical className="w-4 h-4" />
+                <IconDotsVertical className="size-4" />
               </button>
             </DropdownMenuTrigger>
           </TooltipTrigger>