@agent-native/core 0.149.1 → 0.149.3

package/corpus/templates/slides/app/components/editor/editor-command-model.ts

@@ -0,0 +1,35 @@
+import type { ComponentType } from "react";
+
+export type EditorCommandGroup =
+  | "media"
+  | "slideTools"
+  | "comments"
+  | "deck"
+  | "other";
+
+export interface EditorCommand {
+  id: string;
+  group: EditorCommandGroup;
+  label: string;
+  keywords?: string[];
+  icon?: ComponentType<{ className?: string; size?: number }>;
+  active?: boolean;
+  run: () => void;
+}
+
+const EMPTY_COMMANDS: readonly EditorCommand[] = [];
+type EditorCommandSource = () => readonly EditorCommand[];
+
+let activeCommandSource: EditorCommandSource | null = null;
+
+export function registerEditorCommands(source: EditorCommandSource) {
+  activeCommandSource = source;
+
+  return () => {
+    if (activeCommandSource === source) activeCommandSource = null;
+  };
+}
+
+export function getEditorCommands(): readonly EditorCommand[] {
+  return activeCommandSource?.() ?? EMPTY_COMMANDS;
+}

package/corpus/templates/slides/app/components/layout/AgentWorkIndicator.tsx

@@ -87,7 +87,7 @@ export function AgentWorkIndicator() {
 
   return (
     <div className="pointer-events-none fixed bottom-4 left-1/2 z-50 w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 md:bottom-5">
-      <div className="pointer-events-auto flex items-center justify-between gap-3 rounded-lg border border-border bg-popover/95 px-3 py-2 text-popover-foreground shadow-xl shadow-black/20 backdrop-blur">
+      <div className="pointer-events-auto flex items-center justify-between gap-3 rounded-lg border border-border bg-popover/95 px-3 py-2 text-popover-foreground shadow-xl shadow-black/20">
         <div className="flex min-w-0 items-center gap-2">
           <IconLoader2 className="h-4 w-4 shrink-0 animate-spin text-[#609FF8]" />
           <span className="truncate text-sm font-medium">

package/corpus/templates/slides/app/components/layout/Layout.tsx

@@ -12,13 +12,12 @@ import { useSidebarCollapsed } from "@/hooks/use-sidebar-collapsed";
 import { TAB_ID } from "@/lib/tab-id";
 import { cn } from "@/lib/utils";
 
-import { GoogleDriveConnectionCta } from "../editor/GoogleDriveConnectionCta";
 import { AgentWorkIndicator } from "./AgentWorkIndicator";
 import { Header } from "./Header";
 import {
-  getDeckChatScopeLabel,
   getEffectiveSlidesSidebarCollapsed,
   isSlidesEditorRoute,
+  shouldShowSlidesAppSidebar,
 } from "./layout-route-policy";
 import { Sidebar } from "./Sidebar";
 
@@ -50,26 +49,24 @@ export function Layout({ children }: LayoutProps) {
     useState<EditorSidebarOverride | null>(null);
   const { collapsed: sidebarCollapsed, setCollapsed: setSidebarCollapsed } =
     useSidebarCollapsed();
-  const { decks, getDeck, loading: decksLoading } = useDecks();
+  const { decks, loading: decksLoading } = useDecks();
   const isEmptyDecksState =
     location.pathname === "/" && !decksLoading && decks.length === 0;
 
   // Scope new chats to the deck the user is currently editing. The route
   // is `/deck/:id`; everywhere else (list, presentation) leaves
-  // scope null so chats stay in the general pool. Falling back to the
-  // raw deck id keeps the chat bound even before the deck object has
-  // streamed in — once the title arrives the badge updates in place.
+  // scope null so chats stay in the general pool. Keep the visible label
+  // semantic so an imported deck id never leaks into the composer chip.
   const deckScope = useMemo(() => {
     const match = location.pathname.match(/^\/deck\/([^/]+)/);
     const deckId = match?.[1];
     if (!deckId) return null;
-    const deck = getDeck(deckId);
     return {
       type: "deck" as const,
       id: deckId,
-      label: getDeckChatScopeLabel(deck?.title, t("agent.thisDeck")),
+      label: t("agent.thisDeck"),
     };
-  }, [location.pathname, getDeck, t]);
+  }, [location.pathname, t]);
 
   useEffect(() => {
     setSidebarOpen(false);
@@ -84,6 +81,7 @@ export function Layout({ children }: LayoutProps) {
   }, []);
 
   const ownToolbar = pageHasOwnToolbar(location.pathname);
+  const showAppSidebar = shouldShowSlidesAppSidebar(location.pathname);
   const editorSidebarOverrideForLocation =
     editorSidebarOverride?.locationKey === location.key
       ? editorSidebarOverride.collapsed
@@ -120,35 +118,36 @@ export function Layout({ children }: LayoutProps) {
         agentPageHref="/settings/agent"
         suppressFirstRunOnboarding={isSlidesEditorRoute(location.pathname)}
         composerSlot={<CreativeContextComposerChip />}
-        threadFooterSlot={<GoogleDriveConnectionCta />}
       >
         <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
-          {sidebarOpen && (
-            <div
-              className="fixed inset-0 z-40 bg-black/50 md:hidden"
-              onClick={() => setSidebarOpen(false)}
-            />
-          )}
-          {!isEmptyDecksState && (
-            <div
-              className={cn(
-                "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none",
-                sidebarOpen
-                  ? "translate-x-0"
-                  : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",
+          {!isEmptyDecksState && showAppSidebar && (
+            <>
+              {sidebarOpen && (
+                <div
+                  className="fixed inset-0 z-40 bg-foreground/50 md:hidden"
+                  onClick={() => setSidebarOpen(false)}
+                />
               )}
-            >
-              <Sidebar
-                collapsed={effectiveSidebarCollapsed && !sidebarOpen}
-                // In the mobile drawer the sidebar is forced expanded, so the
-                // desktop collapse toggle would be a silent no-op (worse: it'd
-                // mutate the desktop preference). Hide it while the drawer is
-                // open.
-                onToggleCollapsed={
-                  sidebarOpen ? undefined : toggleSidebarCollapsed
-                }
-              />
-            </div>
+              <div
+                className={cn(
+                  "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none",
+                  sidebarOpen
+                    ? "translate-x-0"
+                    : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",
+                )}
+              >
+                <Sidebar
+                  collapsed={effectiveSidebarCollapsed && !sidebarOpen}
+                  // In the mobile drawer the sidebar is forced expanded, so the
+                  // desktop collapse toggle would be a silent no-op (worse: it'd
+                  // mutate the desktop preference). Hide it while the drawer is
+                  // open.
+                  onToggleCollapsed={
+                    sidebarOpen ? undefined : toggleSidebarCollapsed
+                  }
+                />
+              </div>
+            </>
           )}
           <div className="agent-layout-main-surface flex h-full min-w-0 flex-1 flex-col overflow-hidden">
             {/* Mobile-only nav strip with hamburger — only when there's no page toolbar */}

package/corpus/templates/slides/app/components/layout/Sidebar.tsx

@@ -6,8 +6,8 @@ import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
 import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
-  IconStack2,
-  IconPalette,
+  IconLayoutGrid,
+  IconComponents,
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
@@ -23,9 +23,9 @@ import {
 import { cn } from "@/lib/utils";
 
 const navItems = [
-  { icon: IconStack2, labelKey: "navigation.decks", href: "/" },
+  { icon: IconLayoutGrid, labelKey: "navigation.decks", href: "/" },
   {
-    icon: IconPalette,
+    icon: IconComponents,
     labelKey: "navigation.designSystems",
     href: "/design-systems",
   },
@@ -161,8 +161,8 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
 
   if (collapsed) {
     return (
-      <aside className="flex h-full w-12 shrink-0 flex-col items-center overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
-        <div className="flex h-12 w-full shrink-0 items-center justify-center border-b border-border">
+      <aside className="flex h-full w-12 shrink-0 flex-col items-center overflow-hidden bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
+        <div className="flex h-12 w-full shrink-0 items-center justify-center">
           {brandControl}
         </div>
         <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto pt-1">
@@ -224,10 +224,8 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
   }
 
   return (
-    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
-      <div className="flex h-12 shrink-0 items-center border-b border-border px-4">
-        {brandControl}
-      </div>
+    <aside className="flex h-full w-56 min-w-0 shrink-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out">
+      <div className="flex h-12 shrink-0 items-center px-4">{brandControl}</div>
 
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
         <nav className="space-y-1 px-2 py-2">

package/corpus/templates/slides/app/components/layout/layout-route-policy.ts

@@ -2,11 +2,8 @@ export function isSlidesEditorRoute(pathname: string): boolean {
   return /^\/deck\/[^/]+\/?$/.test(pathname);
 }
 
-export function getDeckChatScopeLabel(
-  deckTitle: string | undefined,
-  untitledDeckLabel: string,
-): string {
-  return deckTitle === "Untitled Deck" ? untitledDeckLabel : deckTitle || "";
+export function shouldShowSlidesAppSidebar(pathname: string): boolean {
+  return !isSlidesEditorRoute(pathname);
 }
 
 export function getEffectiveSlidesSidebarCollapsed({

package/corpus/templates/slides/app/components/onboarding/FirstDeckOnboardingFlow.tsx

@@ -26,6 +26,7 @@ import { useDesignSystems } from "@/hooks/use-design-systems";
 import { useWorkspaceDefaults } from "@/hooks/use-workspace-defaults";
 import { startDeckGeneration } from "@/lib/create-deck-generation";
 import {
+  forgetRecentReference,
   readRecentReferences,
   rememberRecentReference,
   type RecentReference,
@@ -45,11 +46,8 @@ export function FirstDeckOnboardingFlow({
   const { session } = useSession();
   const { decks, createDeck, ensureDeckPersisted, deleteDeck, reloadDecks } =
     useDecks();
-  const { designSystems, defaultSystem } = useDesignSystems();
-  const {
-    referenceDeck: workspaceReferenceDeck,
-    designSystem: workspaceDesignSystem,
-  } = useWorkspaceDefaults();
+  const { designSystems } = useDesignSystems();
+  const { designSystem: workspaceDesignSystem } = useWorkspaceDefaults();
   const { submit: agentSubmit } = useAgentGenerating();
   const [step, setStep] = useState<FirstDeckStep>("prompt");
   const [prompt, setPrompt] = useState("");
@@ -63,19 +61,25 @@ export function FirstDeckOnboardingFlow({
   );
 
   const initialPrompt = searchParams.get("initialPrompt")?.trim() ?? "";
-  const workspaceReferenceDeckId =
-    workspaceReferenceDeck && !workspaceReferenceDeck.unavailable
-      ? workspaceReferenceDeck.id
-      : null;
   const workspaceDesignSystemId =
     workspaceDesignSystem && !workspaceDesignSystem.unavailable
       ? workspaceDesignSystem.id
       : null;
+  const lastUsedDesignSystemId =
+    recentReferences.find(
+      (reference) =>
+        reference.kind === "design-system" &&
+        designSystems.some((designSystem) => designSystem.id === reference.id),
+    )?.id ?? null;
+  const lastUsedReferenceDeckId =
+    recentReferences.find(
+      (reference) =>
+        reference.kind === "deck" &&
+        decks.some((deck) => deck.id === reference.id),
+    )?.id ?? null;
   const initialDesignSystemId =
-    designSystems.find((designSystem) => designSystem.isDefault)?.id ??
-    workspaceDesignSystemId ??
-    defaultSystem?.id ??
-    null;
+    lastUsedDesignSystemId ?? workspaceDesignSystemId;
+  const initialReferenceDeckId = lastUsedReferenceDeckId;
 
   useEffect(() => {
     const result = readRecentReferences();
@@ -103,6 +107,10 @@ export function FirstDeckOnboardingFlow({
     },
     [],
   );
+  const forgetReference = useCallback((kind: RecentReference["kind"]) => {
+    const result = forgetRecentReference(kind);
+    if (result.readable) setRecentReferences(result.items);
+  }, []);
 
   const handlePromptSubmit = useCallback(
     async (text: string, files: File[]) => {
@@ -137,7 +145,7 @@ export function FirstDeckOnboardingFlow({
         files,
         referenceSelection: selection,
         selectedDesignSystemId: initialDesignSystemId,
-        selectedReferenceDeckId: workspaceReferenceDeckId,
+        selectedReferenceDeckId: initialReferenceDeckId,
         designSystems,
         createDeck,
         ensureDeckPersisted,
@@ -185,24 +193,32 @@ export function FirstDeckOnboardingFlow({
       prompt,
       session,
       t,
-      workspaceReferenceDeckId,
+      initialReferenceDeckId,
     ],
   );
 
   const handleReferenceSelect = useCallback(
     async (selection: NewDeckReferenceSelection) => {
-      if (selection.designSystemId) {
-        rememberReference({
-          id: selection.designSystemId,
-          kind: "design-system",
-        });
+      if (selection.designSystemId !== undefined) {
+        if (selection.designSystemId) {
+          rememberReference({
+            id: selection.designSystemId,
+            kind: "design-system",
+          });
+        } else {
+          forgetReference("design-system");
+        }
       }
-      if (selection.referenceDeckId) {
-        rememberReference({ id: selection.referenceDeckId, kind: "deck" });
+      if (selection.referenceDeckId !== undefined) {
+        if (selection.referenceDeckId) {
+          rememberReference({ id: selection.referenceDeckId, kind: "deck" });
+        } else {
+          forgetReference("deck");
+        }
       }
       await startGeneration(promptFiles, selection);
     },
-    [promptFiles, rememberReference, startGeneration],
+    [forgetReference, promptFiles, rememberReference, startGeneration],
   );
 
   const handleReferenceImport = useCallback(
@@ -296,7 +312,6 @@ export function FirstDeckOnboardingFlow({
         setPromptFiles((current) => [...current, ...generationFiles]);
         if (importedReference) {
           await reloadDecks();
-          rememberReference({ id: importedReference.id, kind: "deck" });
         }
         return importedReference;
       } catch (error) {
@@ -311,15 +326,7 @@ export function FirstDeckOnboardingFlow({
         setReferenceImporting(false);
       }
     },
-    [
-      callAction,
-      createDeck,
-      deleteDeck,
-      ensureDeckPersisted,
-      reloadDecks,
-      rememberReference,
-      t,
-    ],
+    [callAction, createDeck, deleteDeck, ensureDeckPersisted, reloadDecks, t],
   );
 
   const handleReferenceSourceImport = useCallback(
@@ -357,7 +364,6 @@ export function FirstDeckOnboardingFlow({
           source: "google-slides",
         };
         await reloadDecks();
-        rememberReference({ id: importedReference.id, kind: "deck" });
         return importedReference;
       } catch (error) {
         toast.error(t("editorToolbar.uploadFailed"), {
@@ -371,15 +377,17 @@ export function FirstDeckOnboardingFlow({
         setReferenceImporting(false);
       }
     },
-    [callAction, reloadDecks, rememberReference, t],
+    [callAction, reloadDecks, t],
   );
 
   const handleReferenceSkip = useCallback(() => {
+    forgetReference("design-system");
+    forgetReference("deck");
     void startGeneration(promptFiles, {
       designSystemId: null,
       referenceDeckId: null,
     });
-  }, [promptFiles, startGeneration]);
+  }, [forgetReference, promptFiles, startGeneration]);
 
   if (step === "references") {
     return (
@@ -388,8 +396,7 @@ export function FirstDeckOnboardingFlow({
         decks={decks}
         designSystems={designSystems}
         defaultDesignSystemId={initialDesignSystemId}
-        defaultReferenceDeckId={workspaceReferenceDeckId}
-        recentReferences={recentReferences}
+        defaultReferenceDeckId={initialReferenceDeckId}
         onSelect={handleReferenceSelect}
         onImport={handleReferenceImport}
         onImportSource={handleReferenceSourceImport}
@@ -404,8 +411,6 @@ export function FirstDeckOnboardingFlow({
         chooseDeckLabel={t("home.referenceDeckPlaceholder")}
         importingLabel={t("raw.uploading")}
         skipLabel={t("home.referenceDeckNone")}
-        starredLabel={t("home.referenceDeckStarredGroup")}
-        otherDecksLabel={t("home.referenceDeckOtherGroup")}
         searchDecksLabel={t("root.searchDecks")}
         promptSummary={prompt}
       />

package/corpus/templates/slides/app/components/presentation/PresentationView.tsx

@@ -19,7 +19,7 @@ import type { AspectRatio } from "@/lib/aspect-ratios";
 import {
   findLegacyAnimationContainer,
   getElementPath,
-  resolveSlideAnimationElement,
+  resolveSlideAnimationTargets,
 } from "@/lib/slide-animation-elements";
 
 import type { DesignSystemData } from "../../../shared/api";
@@ -40,7 +40,17 @@ interface PresentationViewProps {
  * Uses slide.animations if defined, falls back to splitByParagraph auto-detection.
  */
 function getAnimationSteps(slide: Slide): SlideAnimation[] | null {
-  if (slide.animations && slide.animations.length > 0) return slide.animations;
+  if (slide.animations && slide.animations.length > 0) {
+    const doc = new DOMParser().parseFromString(slide.content, "text/html");
+    const root = doc.querySelector(".fmd-slide");
+    // Explicit metadata is authoritative only when every target still points
+    // at a unique element in the final HTML. Otherwise disable the reveal
+    // layer for this slide instead of counting invisible phantom steps while
+    // leaving the rest of the content visible.
+    return root && resolveSlideAnimationTargets(root, slide.animations)
+      ? slide.animations
+      : null;
+  }
   // Legacy splitByParagraph: auto-detect and create steps
   if (slide.splitByParagraph) {
     const doc = new DOMParser().parseFromString(slide.content, "text/html");
@@ -111,14 +121,16 @@ function annotateStepsForPresentation(
   const root = doc.querySelector(".fmd-slide");
   if (!root) return html;
 
-  // Annotate each step element with data-pstep
-  steps.forEach((anim, stepIdx) => {
-    const el = resolveSlideAnimationElement(root, anim);
-    if (el) el.setAttribute("data-pstep", String(stepIdx));
+  const resolvedSteps = resolveSlideAnimationTargets(root, steps);
+  if (!resolvedSteps) return html;
+
+  // Annotate each resolved step element with data-pstep.
+  resolvedSteps.forEach(({ element }, stepIdx) => {
+    element.setAttribute("data-pstep", String(stepIdx));
   });
 
-  const styleLines = steps
-    .map((anim, stepIdx) => {
+  const styleLines = resolvedSteps
+    .map(({ target }, stepIdx) => {
       if (stepIdx >= currentStep) {
         return `[data-pstep="${stepIdx}"] { opacity: 0; pointer-events: none; }`;
       } else if (stepIdx < currentStep - 1) {
@@ -126,7 +138,7 @@ function annotateStepsForPresentation(
         return `[data-pstep="${stepIdx}"] { opacity: 1; pointer-events: auto; animation: elem-appear 1ms both; }`;
       } else {
         // Newly revealed — animate with its type
-        return `[data-pstep="${stepIdx}"] { opacity: 1; pointer-events: auto; ${getElemAnimCss(anim.type)} }`;
+        return `[data-pstep="${stepIdx}"] { opacity: 1; pointer-events: auto; ${getElemAnimCss(target.type)} }`;
       }
     })
     .join("\n");
@@ -219,6 +231,10 @@ export default function PresentationView({
   const [cursorVisible, setCursorVisible] = useState(true);
   const [needsFullscreenGesture, setNeedsFullscreenGesture] = useState(false);
   const enteredFullscreenRef = useRef(false);
+  const transitionTimerRef = useRef<number | null>(null);
+  const queuedNavigationRef = useRef<"next" | "prev" | null>(null);
+  const goNextRef = useRef<() => void>(() => {});
+  const goPrevRef = useRef<() => void>(() => {});
   const navigate = useNavigate();
 
   const isShared = deckId.startsWith("__shared__/");
@@ -230,9 +246,23 @@ export default function PresentationView({
     );
   }, [clampIndex, safeSlides.length]);
 
+  const clearTransitionTimer = useCallback(() => {
+    if (transitionTimerRef.current !== null) {
+      window.clearTimeout(transitionTimerRef.current);
+      transitionTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => clearTransitionTimer, [clearTransitionTimer]);
+
   useEffect(() => {
+    clearTransitionTimer();
+    queuedNavigationRef.current = null;
     setCurrentIndex(clampIndex(startIndex));
-  }, [clampIndex, startIndex]);
+    setCurrentStep(0);
+    setPrevIndex(null);
+    setAnimating(false);
+  }, [clearTransitionTimer, clampIndex, startIndex]);
 
   const currentSlide = safeSlides[currentIndex];
   const animSteps = currentSlide ? getAnimationSteps(currentSlide) : null;
@@ -247,7 +277,11 @@ export default function PresentationView({
       const initialStep =
         dir === "prev" ? (incomingSteps ? incomingSteps.length : 0) : 0;
 
+      clearTransitionTimer();
+      queuedNavigationRef.current = null;
       if (isInstant(t)) {
+        setPrevIndex(null);
+        setAnimating(false);
         setCurrentIndex(newIndex);
         setCurrentStep(initialStep);
         return;
@@ -259,16 +293,28 @@ export default function PresentationView({
       setCurrentIndex(newIndex);
       setCurrentStep(initialStep);
 
-      setTimeout(() => {
+      transitionTimerRef.current = window.setTimeout(() => {
+        transitionTimerRef.current = null;
         setPrevIndex(null);
         setAnimating(false);
+        const queued = queuedNavigationRef.current;
+        queuedNavigationRef.current = null;
+        if (queued) {
+          window.setTimeout(() => {
+            if (queued === "next") goNextRef.current();
+            else goPrevRef.current();
+          }, 0);
+        }
       }, 400);
     },
-    [currentIndex, safeSlides],
+    [clearTransitionTimer, currentIndex, safeSlides],
   );
 
   const goNext = useCallback(() => {
-    if (animating) return;
+    if (animating) {
+      queuedNavigationRef.current = "next";
+      return;
+    }
     // Reveal next paragraph step if enabled
     if (maxSteps > 0 && currentStep < maxSteps /* i18n-ignore */) {
       setCurrentStep((prev) => prev + 1);
@@ -286,7 +332,10 @@ export default function PresentationView({
   ]);
 
   const goPrev = useCallback(() => {
-    if (animating) return;
+    if (animating) {
+      queuedNavigationRef.current = "prev";
+      return;
+    }
     if (currentIndex <= 0) return;
     startTransition(currentIndex - 1, "prev");
   }, [animating, currentIndex, startTransition]);
@@ -307,8 +356,6 @@ export default function PresentationView({
   // commands and mirrors whatever we echo back — so build steps stay
   // authoritative here.
   const channelRef = useRef<BroadcastChannel | null>(null);
-  const goNextRef = useRef(goNext);
-  const goPrevRef = useRef(goPrev);
   goNextRef.current = goNext;
   goPrevRef.current = goPrev;
 

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -8,6 +8,7 @@ import { callAction } from "@agent-native/core/client/hooks";
 import { isEmbedAuthActive } from "@agent-native/core/client/host";
 import { useOrg } from "@agent-native/core/client/org";
 import { subscribeSyncEvents } from "@agent-native/core/client/use-db-sync";
+import { DEFAULT_DECK_TITLE } from "@shared/deck-title";
 import { nanoid } from "nanoid";
 import {
   createContext,
@@ -1760,7 +1761,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       const insertIndex = decksRef.current.length;
       const newDeck: Deck = {
         id: nanoid(10),
-        title: title || "Untitled Deck",
+        title: title?.trim() || DEFAULT_DECK_TITLE,
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
         createdByMe: true,

package/corpus/templates/slides/app/global.css

@@ -143,7 +143,7 @@ button[title="Open agent sidebar"] {
 }
 
 .slide-style-inspector .slides-inspector-section {
-  border-bottom: 1px solid var(--slides-inspector-divider);
+  border-bottom: 0;
   border-radius: 0;
   padding: 0.625rem 0.75rem;
 }
@@ -239,6 +239,81 @@ button[title="Open agent sidebar"] {
   container-type: inline-size;
 }
 
+.deck-editor-shell {
+  --slides-editor-surface: hsl(var(--background));
+  container-type: inline-size;
+  container-name: deck-editor;
+}
+
+@supports (background: color-mix(in srgb, white, black)) {
+  .deck-editor-shell {
+    --slides-editor-surface: color-mix(
+      in srgb,
+      hsl(var(--background)) 35%,
+      var(--agent-native-lower-surface, hsl(var(--background))) 65%
+    );
+  }
+}
+
+.deck-editor-context-toolbar-host {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.deck-editor-context-toolbar-host--wide {
+  display: none;
+}
+
+.deck-editor-context-toolbar-host--narrow {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.deck-editor-context-toolbar-host--narrow
+  > [data-slide-inline-edit-surface="true"] {
+  min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  flex: 0 1 auto;
+}
+
+@container deck-editor (max-width: 1149px) {
+  .deck-editor-context-toolbar-host--wide {
+    display: none;
+  }
+
+  .deck-editor-context-toolbar-host--narrow {
+    display: flex;
+  }
+}
+
+@container deck-editor (min-width: 1150px) {
+  .deck-editor-context-toolbar-host--narrow {
+    display: none;
+  }
+
+  .deck-editor-context-toolbar-host--wide[data-context-toolbar-visible="true"] {
+    display: flex;
+    flex: 1 1 0%;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .deck-editor-context-toolbar-host--wide
+    > [data-slide-inline-edit-surface="true"] {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .deck-editor-context-toolbar-host--wide .slide-context-toolbar--top-row {
+    height: 2.75rem;
+    justify-content: flex-end;
+    border: 0;
+    background: transparent;
+    padding-inline: 0;
+  }
+}
+
 @container (max-width: 36rem) {
   .deck-grid {
     grid-template-columns: minmax(0, 1fr);