@agent-native/core 0.131.4 → 0.131.6

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -32,7 +32,6 @@ interface DeckCardProps {
   onRename: (id: string, newTitle: string) => void;
   onDuplicate: (id: string) => void;
   onToggleStar: (id: string, starred: boolean) => void;
-  isDuplicating?: boolean;
   designSystemTitle?: string | null;
   isWorkspaceDefault?: boolean;
   canSetWorkspaceDefault?: boolean;
@@ -45,7 +44,6 @@ export default function DeckCard({
   onRename,
   onDuplicate,
   onToggleStar,
-  isDuplicating = false,
   designSystemTitle,
   isWorkspaceDefault = false,
   canSetWorkspaceDefault = false,
@@ -230,15 +228,9 @@ export default function DeckCard({
               <IconPencil className="w-3.5 h-3.5 me-2" />
               Rename
             </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={() => {
-                if (isDuplicating) return;
-                onDuplicate(deck.id);
-              }}
-              disabled={isDuplicating}
-            >
+            <DropdownMenuItem onSelect={() => onDuplicate(deck.id)}>
               <IconCopy className="w-3.5 h-3.5 me-2" />
-              {isDuplicating ? "Duplicating..." : "Duplicate"}
+              Duplicate
             </DropdownMenuItem>
             <DropdownMenuItem
               onSelect={(event) => {

package/corpus/templates/slides/app/components/deck/MermaidRenderer.tsx

@@ -46,11 +46,13 @@ let idCounter = 0;
 interface MermaidRendererProps {
   definition: string;
   className?: string;
+  index?: number;
 }
 
 export function MermaidRenderer({
   definition,
   className,
+  index,
 }: MermaidRendererProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [svg, setSvg] = useState<string>("");
@@ -98,6 +100,7 @@ export function MermaidRenderer({
   if (error) {
     return (
       <div
+        data-mermaid-index={index}
         className={`flex items-center justify-center p-4 text-xs text-red-400/70 ${className || ""}`}
       >
         <pre className="whitespace-pre-wrap">{error}</pre>
@@ -105,11 +108,19 @@ export function MermaidRenderer({
     );
   }
 
-  if (!svg) return null;
+  if (!svg) {
+    // Mermaid's import + render is async, so this placeholder is the only
+    // thing in the DOM until it resolves. Without it, an edit to another
+    // element on the same slide made while the diagram is still loading
+    // would see zero `[data-mermaid-index]` nodes when serializing the
+    // slide, and silently drop the diagram from the saved content.
+    return <div data-mermaid-index={index} className={className} />;
+  }
 
   return (
     <div
       ref={containerRef}
+      data-mermaid-index={index}
       className={`flex items-center justify-center [&_svg]:max-w-full [&_svg]:max-h-full ${className || ""}`}
       dangerouslySetInnerHTML={{ __html: svg }}
     />

package/corpus/templates/slides/app/components/deck/SlideRenderer.tsx

@@ -14,6 +14,7 @@ import rehypeRaw from "rehype-raw";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { Slide } from "@/context/DeckContext";
 import { type AspectRatio, getAspectRatioDims } from "@/lib/aspect-ratios";
+import { extractMermaidBlocks } from "@/lib/mermaid-blocks";
 import {
   sanitizeCssValue,
   sanitizeSlideHtml,
@@ -37,6 +38,8 @@ interface SlideRendererProps {
    * The renderer no longer shrinks slides for vertical overflow — instead the
    * editor surfaces this so the agent can rewrite the slide to fit. */
   onOverflowChange?: (info: SlideOverflowInfo) => void;
+  /** Fires after AutoFit has applied its final transform for this render. */
+  onAutofitSettled?: () => void;
 }
 
 export const layoutClasses: Record<string, string> = {
@@ -311,9 +314,12 @@ function useSlideAutofit(
   canvasHeight: number,
   fitKey: string,
   onOverflowChange?: (info: SlideOverflowInfo) => void,
+  onAutofitSettled?: () => void,
 ) {
   const overflowCallbackRef = useRef(onOverflowChange);
   overflowCallbackRef.current = onOverflowChange;
+  const autofitSettledRef = useRef(onAutofitSettled);
+  autofitSettledRef.current = onAutofitSettled;
 
   useIsomorphicLayoutEffect(() => {
     const root = ref.current;
@@ -395,6 +401,7 @@ function useSlideAutofit(
             viewportHeight: 0,
           },
         );
+        autofitSettledRef.current?.();
       }
     };
 
@@ -437,6 +444,7 @@ function AutoFitContent({
   className = "",
   children,
   onOverflowChange,
+  onAutofitSettled,
 }: {
   canvasWidth: number;
   canvasHeight: number;
@@ -444,9 +452,17 @@ function AutoFitContent({
   className?: string;
   children: ReactNode;
   onOverflowChange?: (info: SlideOverflowInfo) => void;
+  onAutofitSettled?: () => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
-  useSlideAutofit(ref, canvasWidth, canvasHeight, fitKey, onOverflowChange);
+  useSlideAutofit(
+    ref,
+    canvasWidth,
+    canvasHeight,
+    fitKey,
+    onOverflowChange,
+    onAutofitSettled,
+  );
 
   return (
     <div
@@ -469,18 +485,9 @@ function BlankSlideContent({ content }: { content: string }) {
   // includes the per-block `contentEditable="true"` set by SlideEditor's
   // double-click-to-edit flow, which made inline text editing appear to do nothing.
   const { mermaidBlocks, htmlWithPlaceholders, dangerousHtml } = useMemo(() => {
-    // Extract mermaid blocks BEFORE sanitization. The sanitizer round-trips
-    // HTML through DOMParser + innerHTML, which HTML-escapes `>` in text
-    // nodes to `&gt;` — that mangles diagram arrows like `A --> B` into
-    // `A --&gt; B` and breaks the mermaid parser.
-    const blocks: string[] = [];
-    const contentWithPlaceholders = content.replace(
-      /<div\s+class="mermaid"[^>]*>([\s\S]*?)<\/div>/gi,
-      (_, definition) => {
-        blocks.push(String(definition).trim());
-        return `<div data-mermaid-index="${blocks.length - 1}"></div>`;
-      },
-    );
+    // Extract mermaid blocks BEFORE sanitization — see mermaid-blocks.ts for
+    // why (sanitizer HTML-escaping breaks the mermaid parser).
+    const { blocks, contentWithPlaceholders } = extractMermaidBlocks(content);
 
     // Apply white filter to all logo images (brandfetch, logo.dev, etc.) for dark backgrounds
     const processed = sanitizeSlideHtml(
@@ -547,6 +554,7 @@ function MermaidHtmlContent({
             <MermaidRenderer
               key={`mermaid-${i}`}
               definition={mermaidBlocks[idx]}
+              index={idx}
               className="my-4 w-full"
             />
           );
@@ -564,11 +572,13 @@ export function SlideInner({
   designSystem,
   aspectRatio,
   onOverflowChange,
+  onAutofitSettled,
 }: {
   slide: Slide;
   designSystem?: DesignSystemData;
   aspectRatio?: AspectRatio;
   onOverflowChange?: (info: SlideOverflowInfo) => void;
+  onAutofitSettled?: () => void;
 }) {
   const t = useT();
   const dims = getAspectRatioDims(aspectRatio);
@@ -651,6 +661,7 @@ export function SlideInner({
           fitKey={left}
           className="slide-content text-white/90"
           onOverflowChange={onOverflowChange}
+          onAutofitSettled={onAutofitSettled}
         >
           <ReactMarkdown
             components={markdownComponents}
@@ -664,6 +675,7 @@ export function SlideInner({
           canvasHeight={dims.height}
           fitKey={right}
           className="slide-content text-white/90"
+          onAutofitSettled={onAutofitSettled}
         >
           <ReactMarkdown
             components={markdownComponents}
@@ -689,6 +701,7 @@ export function SlideInner({
           fitKey={content}
           className="h-full w-full"
           onOverflowChange={onOverflowChange}
+          onAutofitSettled={onAutofitSettled}
         >
           <BlankSlideContent content={content} />
         </AutoFitContent>
@@ -714,6 +727,7 @@ export function SlideInner({
         fitKey={content}
         className="slide-content text-white/90 w-full"
         onOverflowChange={onOverflowChange}
+        onAutofitSettled={onAutofitSettled}
       >
         <ReactMarkdown
           components={markdownComponents}
@@ -733,6 +747,7 @@ export default function SlideRenderer({
   designSystem,
   aspectRatio,
   onOverflowChange,
+  onAutofitSettled,
 }: SlideRendererProps) {
   const dims = getAspectRatioDims(aspectRatio);
 
@@ -753,6 +768,7 @@ export default function SlideRenderer({
             designSystem={designSystem}
             aspectRatio={aspectRatio}
             onOverflowChange={onOverflowChange}
+            onAutofitSettled={onAutofitSettled}
           />
         </div>
         <ScaleHelper
@@ -783,6 +799,7 @@ export default function SlideRenderer({
           designSystem={designSystem}
           aspectRatio={aspectRatio}
           onOverflowChange={onOverflowChange}
+          onAutofitSettled={onAutofitSettled}
         />
       </div>
       <ScaleHelper targetWidth={dims.width} />

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>
   );
 }