@agent-native/core 0.152.1 → 0.153.1

package/corpus/templates/slides/app/components/editor/slide-object-interactions.ts

@@ -821,6 +821,224 @@ export function applySlideObjectMoveDelta(
   }
 }
 
+export type SlideAlignmentGuideOrientation = "vertical" | "horizontal";
+
+export interface SlideAlignmentGuide {
+  orientation: SlideAlignmentGuideOrientation;
+  /** Position in the shared slide coordinate space. */
+  position: number;
+  /** Visible span in the shared slide coordinate space. */
+  start: number;
+  end: number;
+}
+
+export interface SlideObjectSnapResult {
+  deltaX: number;
+  deltaY: number;
+  guides: SlideAlignmentGuide[];
+}
+
+export type SlideObjectAlignment =
+  | "left"
+  | "center"
+  | "right"
+  | "top"
+  | "middle"
+  | "bottom";
+
+export type SlideObjectDistribution = "horizontal" | "vertical";
+
+export const SLIDE_OBJECT_SNAP_TOLERANCE = 8;
+
+function nearestSnapAdjustment(
+  movingStart: number,
+  movingSize: number,
+  proposedDelta: number,
+  targetPositions: number[],
+  tolerance: number,
+): { delta: number; position: number } | null {
+  const anchors = [0, movingSize / 2, movingSize];
+  let closest: { distance: number; delta: number; position: number } | null =
+    null;
+
+  for (const anchor of anchors) {
+    const proposedPosition = movingStart + proposedDelta + anchor;
+    for (const position of targetPositions) {
+      const adjustment = position - proposedPosition;
+      const distance = Math.abs(adjustment);
+      if (distance > tolerance) continue;
+      if (!closest || distance < closest.distance) {
+        closest = { distance, delta: proposedDelta + adjustment, position };
+      }
+    }
+  }
+
+  return closest ? { delta: closest.delta, position: closest.position } : null;
+}
+
+function uniquePositions(positions: number[]): number[] {
+  return Array.from(new Set(positions));
+}
+
+function objectAnchorPositions(
+  objects: readonly SlideObjectGeometry[],
+  axis: "x" | "y",
+): number[] {
+  return objects.flatMap((object) => {
+    const start = axis === "x" ? object.x : object.y;
+    const size = axis === "x" ? object.width : object.height;
+    return [start, start + size / 2, start + size];
+  });
+}
+
+/**
+ * Snap a proposed object/group delta to nearby peer or canvas anchors. The
+ * moving geometry is the object itself for a single drag and the union bounds
+ * for a group drag. The caller can bypass this transient behavior with the
+ * platform modifier used by Figma (Cmd/Ctrl) without changing persisted data.
+ */
+export function snapSlideObjectMove({
+  moving,
+  deltaX,
+  deltaY,
+  peers,
+  canvas,
+  tolerance = SLIDE_OBJECT_SNAP_TOLERANCE,
+  bypass = false,
+}: {
+  moving: SlideObjectGeometry;
+  deltaX: number;
+  deltaY: number;
+  peers: readonly SlideObjectGeometry[];
+  canvas?: { width: number; height: number };
+  tolerance?: number;
+  bypass?: boolean;
+}): SlideObjectSnapResult {
+  if (bypass) return { deltaX, deltaY, guides: [] };
+
+  const xTargets = objectAnchorPositions(peers, "x");
+  const yTargets = objectAnchorPositions(peers, "y");
+  if (canvas) {
+    xTargets.push(0, canvas.width / 2, canvas.width);
+    yTargets.push(0, canvas.height / 2, canvas.height);
+  }
+
+  const xSnap = nearestSnapAdjustment(
+    moving.x,
+    moving.width,
+    deltaX,
+    uniquePositions(xTargets),
+    tolerance,
+  );
+  const ySnap = nearestSnapAdjustment(
+    moving.y,
+    moving.height,
+    deltaY,
+    uniquePositions(yTargets),
+    tolerance,
+  );
+  const guides: SlideAlignmentGuide[] = [];
+  if (xSnap) {
+    guides.push({
+      orientation: "vertical",
+      position: xSnap.position,
+      start: 0,
+      end: canvas?.height ?? moving.y + moving.height,
+    });
+  }
+  if (ySnap) {
+    guides.push({
+      orientation: "horizontal",
+      position: ySnap.position,
+      start: 0,
+      end: canvas?.width ?? moving.x + moving.width,
+    });
+  }
+
+  return {
+    deltaX: xSnap?.delta ?? deltaX,
+    deltaY: ySnap?.delta ?? deltaY,
+    guides,
+  };
+}
+
+export function unionSlideObjectGeometries(
+  geometries: readonly SlideObjectGeometry[],
+): SlideObjectGeometry | null {
+  if (geometries.length === 0) return null;
+  const left = Math.min(...geometries.map((geometry) => geometry.x));
+  const top = Math.min(...geometries.map((geometry) => geometry.y));
+  const right = Math.max(
+    ...geometries.map((geometry) => geometry.x + geometry.width),
+  );
+  const bottom = Math.max(
+    ...geometries.map((geometry) => geometry.y + geometry.height),
+  );
+  return { x: left, y: top, width: right - left, height: bottom - top };
+}
+
+export function alignSlideObjectMembers(
+  members: readonly SlideObjectMoveMember[],
+  alignment: SlideObjectAlignment,
+): Map<string, SlideObjectGeometry> {
+  const bounds = unionSlideObjectGeometries(
+    members.map((member) => member.start),
+  );
+  if (!bounds) return new Map();
+
+  const plan = new Map<string, SlideObjectGeometry>();
+  for (const member of members) {
+    const geometry = { ...member.start };
+    if (alignment === "left") geometry.x = bounds.x;
+    if (alignment === "center") {
+      geometry.x = bounds.x + (bounds.width - geometry.width) / 2;
+    }
+    if (alignment === "right") {
+      geometry.x = bounds.x + bounds.width - geometry.width;
+    }
+    if (alignment === "top") geometry.y = bounds.y;
+    if (alignment === "middle") {
+      geometry.y = bounds.y + (bounds.height - geometry.height) / 2;
+    }
+    if (alignment === "bottom") {
+      geometry.y = bounds.y + bounds.height - geometry.height;
+    }
+    plan.set(member.objectId, geometry);
+  }
+  return plan;
+}
+
+export function distributeSlideObjectMembers(
+  members: readonly SlideObjectMoveMember[],
+  distribution: SlideObjectDistribution,
+): Map<string, SlideObjectGeometry> {
+  if (members.length < 3) return new Map();
+
+  const axis = distribution === "horizontal" ? "x" : "y";
+  const size = distribution === "horizontal" ? "width" : "height";
+  const sorted = [...members].sort((left, right) => {
+    const positionDelta = left.start[axis] - right.start[axis];
+    return positionDelta || left.objectId.localeCompare(right.objectId);
+  });
+  const first = sorted[0].start[axis];
+  const lastEnd = Math.max(
+    ...sorted.map((member) => member.start[axis] + member.start[size]),
+  );
+  const occupied = sorted.reduce((sum, member) => sum + member.start[size], 0);
+  const gap = (lastEnd - first - occupied) / (sorted.length - 1);
+  const plan = new Map<string, SlideObjectGeometry>();
+  let cursor = first;
+
+  for (const member of sorted) {
+    const geometry = { ...member.start };
+    geometry[axis] = cursor;
+    plan.set(member.objectId, geometry);
+    cursor += member.start[size] + gap;
+  }
+
+  return plan;
+}
+
 export interface CopiedSlideObjects {
   html: string[];
 }

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

@@ -313,17 +313,24 @@ const DECK_SAVE_RETRY_BASE_MS = 250;
 // Ops are appended by enqueueDeckOp and drained when the debounce fires.
 const pendingOpsQueue = new Map<string, GranularOp[]>();
 
-// Cached snapshot for useSyncExternalStore. MUST be stable when the boolean
+// Cached snapshot for useSyncExternalStore. MUST be stable when either value
 // is unchanged or React will infinite-loop (it compares snapshots with
 // Object.is — a fresh object literal every call schedules a new update,
 // which calls getSnapshot again, which returns a new object… etc).
-let cachedSnapshot: { saving: boolean } = { saving: false };
+let cachedSnapshot: { saving: boolean; hasUnsavedChanges: boolean } = {
+  saving: false,
+  hasUnsavedChanges: false,
+};
 
 function recomputeSnapshot() {
   const saving =
     pendingSaves.size > 0 || inFlightSaves.size > 0 || pendingOpsQueue.size > 0;
-  if (saving !== cachedSnapshot.saving) {
-    cachedSnapshot = { saving };
+  const hasUnsavedChanges = saving || failedSaveDecks.size > 0;
+  if (
+    saving !== cachedSnapshot.saving ||
+    hasUnsavedChanges !== cachedSnapshot.hasUnsavedChanges
+  ) {
+    cachedSnapshot = { saving, hasUnsavedChanges };
   }
 }
 
@@ -342,8 +349,24 @@ export function subscribeSaveState(listener: () => void): () => void {
   return () => saveStateListeners.delete(listener);
 }
 
+/**
+ * True when a deck still has a local write that has not been confirmed by the
+ * server, including a save that exhausted its retry budget.
+ */
+export function hasUnsavedDeckChanges(deckId: string): boolean {
+  return (
+    pendingSaves.has(deckId) ||
+    inFlightSaves.has(deckId) ||
+    pendingOpsQueue.has(deckId) ||
+    failedSaveDecks.has(deckId)
+  );
+}
+
 /** Snapshot of save state — true when anything is debounced or in flight. */
-export function getSaveSnapshot(): { saving: boolean } {
+export function getSaveSnapshot(): {
+  saving: boolean;
+  hasUnsavedChanges: boolean;
+} {
   return cachedSnapshot;
 }
 
@@ -1040,12 +1063,7 @@ export function hasUncommittedDeckChanges(
   deckId: string,
   dirtyDeckIds: Set<string>,
 ): boolean {
-  return (
-    dirtyDeckIds.has(deckId) ||
-    pendingSaves.has(deckId) ||
-    inFlightSaves.has(deckId) ||
-    failedSaveDecks.has(deckId)
-  );
+  return dirtyDeckIds.has(deckId) || hasUnsavedDeckChanges(deckId);
 }
 
 /**
@@ -1174,6 +1192,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
   const pendingDuplicateSourceIdsRef = useRef<Set<string>>(new Set());
   const dirtyDeckIdsRef = useRef<Set<string>>(new Set());
   const deckBaselineRequestIdRef = useRef(0);
+  const openDeckRequestIdByDeckRef = useRef<Map<string, number>>(new Map());
   // True only while the SSE channel is actually open. Stays false when SSE is
   // never started (embed auth), so the poll keeps its fast intervals there.
   const liveChannelConnectedRef = useRef(false);
@@ -1396,7 +1415,13 @@ export function DeckProvider({ children }: { children: ReactNode }) {
   //     agent-added slides without ever overwriting or dropping local slides.
   const refetchOpenDeckIfChanged = useCallback(
     async (currentOpenId: string): Promise<Deck | null> => {
+      const requestId =
+        (openDeckRequestIdByDeckRef.current.get(currentOpenId) ?? 0) + 1;
+      openDeckRequestIdByDeckRef.current.set(currentOpenId, requestId);
       const serverDeck = await fetchDeckFromAPI(currentOpenId);
+      if (openDeckRequestIdByDeckRef.current.get(currentOpenId) !== requestId) {
+        return null;
+      }
       // Null means 404 (row not created yet), a transient failure, or a
       // still-pending create — nothing authoritative to reconcile.
       if (!serverDeck) return null;
@@ -1693,21 +1718,16 @@ export function DeckProvider({ children }: { children: ReactNode }) {
             lastExternalUpdateRef.current = Date.now();
             setDecks((prev) => prev.filter((d) => d.id !== data.deckId));
           } else if (data.type === "deck-changed") {
-            // Skip if a save for this deck is pending or in flight — this
-            // event is most likely the echo of our own write and the server
-            // copy may be a few hundred ms behind what the user just typed.
-            // Polling and the next save's response will bring the canonical
-            // state once the local burst settles.
-            if (
-              hasUncommittedDeckChanges(data.deckId, dirtyDeckIdsRef.current)
-            ) {
-              continue;
-            }
-            // Refetch the changed deck from the shared action surface.
-            void fetchDeckFromAPI(data.deckId).then((updated) => {
-              if (stopped || !updated) return;
-              lastExternalUpdateRef.current = Date.now(); // Suppress save-back
-              applyRemoteDeckUpdate(updated);
+            // Do not drop the event while a local edit/save is pending. The
+            // event may be an own-write echo, but it may also be an agent
+            // write that arrived during the same local edit. The reconciler
+            // preserves local slide bodies and local-only slides while still
+            // surfacing server-added slides immediately.
+            void refetchOpenDeckIfChanged(data.deckId).catch((error) => {
+              console.error(
+                `Failed to refresh deck ${data.deckId} after sync event:`,
+                error,
+              );
             });
           }
         }
@@ -1732,7 +1752,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       liveChannelConnectedRef.current = false;
       unsubscribe();
     };
-  }, [applyRemoteDeckUpdate, resyncDeckState]);
+  }, [refetchOpenDeckIfChanged, resyncDeckState]);
 
   // Flush pending (debounced) saves before the tab is hidden or unloaded so the
   // last ~500ms of edits aren't lost on close/navigation. `pagehide` is the
@@ -2344,15 +2364,21 @@ export function useDecks() {
 }
 
 /**
- * Subscribe to deck save-state. Returns `{ saving: boolean }` — true while any
- * deck has a pending debounce timer or an in-flight PUT.
+ * Subscribe to deck save-state. `saving` is true while any deck has a pending
+ * debounce timer or an in-flight PUT. `hasUnsavedChanges` also stays true when
+ * a save has exhausted its retry budget, so navigation can warn before the
+ * user leaves work that is still only local.
  *
  * Used by SaveStatusIndicator in the toolbar so users always see whether
  * their work has been committed (Rochkind reported losing a full deck because
  * there was no save signal).
  */
-export function useSaveState(): { saving: boolean } {
+export function useSaveState(): {
+  saving: boolean;
+  hasUnsavedChanges: boolean;
+} {
   return useSyncExternalStore(subscribeSaveState, getSaveSnapshot, () => ({
     saving: false,
+    hasUnsavedChanges: false,
   }));
 }

package/corpus/templates/slides/app/hooks/use-deck-role.ts

@@ -1,6 +1,6 @@
 import { useActionQuery } from "@agent-native/core/client/hooks";
 
-type Role = "viewer" | "editor" | "admin";
+type Role = "viewer" | "commenter" | "editor" | "admin";
 
 interface SharesResponse {
   ownerEmail: string | null;
@@ -11,8 +11,8 @@ interface SharesResponse {
 
 /**
  * Resolve the signed-in user's role on a deck. Mirrors Google Slides:
- * `Viewer` = no edit affordances, but the editor shell is still navigable;
- * any other role (Owner / Editor / Admin) gets full editing.
+ * `Viewer` = read-only, `Commenter` = read-only with comment affordances;
+ * Owner / Editor / Admin get full editing.
  *
  * `assumeEditorWhileLoading` should only be true when a faster, already-known
  * signal (e.g. `deck.createdByMe`) confirms the caller is the owner — that
@@ -28,6 +28,7 @@ export function useDeckRole(
 ): {
   role: SharesResponse["role"] | undefined;
   canEdit: boolean;
+  canComment: boolean;
   isLoading: boolean;
 } {
   const query = useActionQuery<SharesResponse>(
@@ -39,6 +40,13 @@ export function useDeckRole(
   const canEdit =
     role === undefined
       ? assumeEditorWhileLoading
-      : role === "owner" || role !== "viewer";
-  return { role, canEdit, isLoading: query.isLoading };
+      : role === "owner" || role === "editor" || role === "admin";
+  const canComment =
+    role === undefined
+      ? assumeEditorWhileLoading
+      : role === "owner" ||
+        role === "commenter" ||
+        role === "editor" ||
+        role === "admin";
+  return { role, canEdit, canComment, isLoading: query.isLoading };
 }

package/corpus/templates/slides/app/hooks/use-design-systems.ts

@@ -7,7 +7,7 @@ type DesignSystemSummary = {
   data: string;
   isDefault: boolean;
   visibility?: "private" | "org" | "public" | null;
-  accessRole?: "owner" | "admin" | "editor" | "viewer";
+  accessRole?: "owner" | "admin" | "editor" | "commenter" | "viewer";
   canManage?: boolean;
   createdAt: string;
 };

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -385,6 +385,7 @@ const messages = {
     center: "Center",
     right: "Right",
     justify: "Justify",
+    distribute: "Distribute",
     fill: "Fill",
     tint: "Tint",
     transparent: "Transparent",
@@ -563,6 +564,11 @@ const messages = {
     dismissLayoutWarning: "Dismiss layout warning",
     slidesAdded_one: "{{count}} slide added",
     slidesAdded_other: "{{count}} slides added",
+    unsavedChangesTitle: "Unsaved changes",
+    unsavedChangesDescription:
+      "If you leave or reload now, you may lose changes that have not been saved yet. Are you sure you want to exit?",
+    keepEditing: "Keep editing",
+    leaveWithoutSaving: "Exit without saving",
   },
   designSystemSetup: {
     importedBrand: "Imported brand",
@@ -662,8 +668,6 @@ const messages = {
     all: "All",
     showMineDecks: "Show decks created by me",
     mine: "Mine",
-    deckCount_one: "deck",
-    deckCount_other: "decks",
     createDeckOrVisual: "Create a presentation",
     noMineDecks: "No decks created by you yet.",
     noDecksMatchSearch: "No decks match your search.",

package/corpus/templates/slides/app/lib/create-deck-generation.ts

@@ -396,6 +396,7 @@ export async function startDeckGeneration({
     sourceModeInstructions,
     "If the user asked for a specific slide count, keep going sequentially until that count is reached unless a tool error blocks you. If no explicit count was given (including when the guided slide-count question was skipped), infer the count from the distinct topics/sections implied by the request — one slide per section plus a title and closing slide — and add slides for every section before considering the deck done. Do not stop at an arbitrary round number (e.g. 10) if sections remain uncovered, and never call `generate-slides-ai` for this flow; it is a legacy single-shot helper capped at 10 slides.",
     "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels, with 740x380px available inside standard 80px 110px padding). Keep the main content within that fit budget; split dense source material across more slides instead of packing it tightly. Never use zoom, transform: scale(), clipping, or scroll overflow to hide content overflow, and keep body text at least 16px.",
+    "When no reference deck or hydrated design system is available, use a restrained, content-first visual language. Do not invent colorful cards, boxes, or decorative rectangles behind or over text; add a colored shape only when it has a clear semantic role and leaves the text unobscured. Prefer typography, spacing, alignment, and one restrained accent.",
     "Each slide's --content must be full HTML. Slide HTML templates are in your AGENTS.md.",
     "Do NOT use create-deck (the deck already exists). Do NOT call db-schema, the resources tool, or search-files.",
   ].join("\n");

package/corpus/templates/slides/app/lib/pending-deck-changes.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+
+export function preventPendingDeckUnload(event: BeforeUnloadEvent): void {
+  event.preventDefault();
+  event.returnValue = "";
+}
+
+/**
+ * Keep the browser's native reload/close confirmation attached only while a
+ * deck has local work that cannot be recovered from the server.
+ */
+export function usePendingDeckUnloadGuard(hasPendingEdits: boolean): void {
+  useEffect(() => {
+    if (!hasPendingEdits) return;
+    window.addEventListener("beforeunload", preventPendingDeckUnload, {
+      capture: true,
+    });
+    return () => {
+      window.removeEventListener("beforeunload", preventPendingDeckUnload, {
+        capture: true,
+      });
+    };
+  }, [hasPendingEdits]);
+}
+
+export function shouldBlockPendingDeckNavigation(args: {
+  hasPendingEdits: boolean;
+  currentPathname: string;
+  nextPathname: string;
+}): boolean {
+  return args.hasPendingEdits && args.currentPathname !== args.nextPathname;
+}

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -24,7 +24,12 @@ import {
 } from "@tabler/icons-react";
 import { nanoid } from "nanoid";
 import { useState, useCallback, useRef, useEffect } from "react";
-import { useParams, useSearchParams, useNavigate } from "react-router";
+import {
+  useBlocker,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router";
 import { toast } from "sonner";
 
 import { SlideCommentsPanel } from "@/components/comments/SlideCommentsPanel";
@@ -40,8 +45,23 @@ import ImageGenPanel from "@/components/editor/ImageGenPanel";
 import { QuestionFlow } from "@/components/editor/QuestionFlow";
 import SlideEditor from "@/components/editor/SlideEditor";
 import { TweaksPanel } from "@/components/editor/TweaksPanel";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import { deckIdFromPathname, useDecks } from "@/context/DeckContext";
+import {
+  deckIdFromPathname,
+  hasUnsavedDeckChanges,
+  useDecks,
+  useSaveState,
+} from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 import { useDeckPresence } from "@/hooks/use-deck-presence";
@@ -65,6 +85,10 @@ import {
   shouldShowNewDeckGeneratingProgress,
 } from "@/lib/generation-state";
 import { isMissingUploadProviderError } from "@/lib/image-drop-to-agent";
+import {
+  shouldBlockPendingDeckNavigation,
+  usePendingDeckUnloadGuard,
+} from "@/lib/pending-deck-changes";
 import { imageFileLooksSupported } from "@/lib/slide-image-replacement";
 import {
   insertDroppedImageIntoSlideHtml,
@@ -165,8 +189,34 @@ export default function DeckEditor() {
     loadError,
   } = useDecks();
   const [activeSlideId, setActiveSlideId] = useState<string | null>(null);
+  const [inlineEditActive, setInlineEditActive] = useState(false);
   const [addSlideGenerating, setAddSlideGenerating] = useState(false);
   const [generatingSlideSelected, setGeneratingSlideSelected] = useState(false);
+  const { hasUnsavedChanges: hasUnsavedSave } = useSaveState();
+  const hasPendingDeckEdits =
+    inlineEditActive || (id ? hasUnsavedDeckChanges(id) : hasUnsavedSave);
+  usePendingDeckUnloadGuard(hasPendingDeckEdits);
+  const pendingDeckNavigationBlocker = useBlocker(
+    useCallback(
+      ({ currentLocation, nextLocation }) =>
+        shouldBlockPendingDeckNavigation({
+          hasPendingEdits: hasPendingDeckEdits,
+          currentPathname: currentLocation.pathname,
+          nextPathname: nextLocation.pathname,
+        }),
+      [hasPendingDeckEdits],
+    ),
+  );
+  const pendingDeckNavigationWarningOpen =
+    pendingDeckNavigationBlocker.state === "blocked";
+  const keepEditingAfterNavigationAttempt = useCallback(() => {
+    if (pendingDeckNavigationBlocker.state !== "blocked") return;
+    pendingDeckNavigationBlocker.reset();
+  }, [pendingDeckNavigationBlocker]);
+  const leaveWithPendingDeckChanges = useCallback(() => {
+    if (pendingDeckNavigationBlocker.state !== "blocked") return;
+    pendingDeckNavigationBlocker.proceed();
+  }, [pendingDeckNavigationBlocker]);
   const { generating } = useAgentGenerating();
   // Generation intent can arrive after this route mounts because the user
   // answers pre-generation questions from the empty editor.
@@ -253,7 +303,7 @@ export default function DeckEditor() {
   // get the full editor. Only assume edit access while the role is still
   // loading when `createdByMe` already confirms ownership — otherwise a
   // viewer would briefly see (and could click) edit affordances.
-  const { canEdit } = useDeckRole(id, deck?.createdByMe === true);
+  const { canEdit, canComment } = useDeckRole(id, deck?.createdByMe === true);
   const isNewDeckGenerating = shouldShowNewDeckGeneratingProgress({
     generating,
     isNewDeckCreation: wasNewDeckCreation.current,
@@ -1005,6 +1055,7 @@ export default function DeckEditor() {
         deckId={id}
         deckTitle={deck.title}
         canEdit={canEdit}
+        canComment={canComment}
         onTitleChange={(title) => updateDeck(id, { title })}
         slideCount={deck.slides.length}
         currentSlideIndex={currentIndex >= 0 ? currentIndex : 0}
@@ -1228,7 +1279,11 @@ export default function DeckEditor() {
                 options,
               )
             }
-            onInlineEditStart={() => markDeckDirty(id)}
+            onInlineEditStart={() => {
+              setInlineEditActive(true);
+              markDeckDirty(id);
+            }}
+            onInlineEditEnd={() => setInlineEditActive(false)}
             onGenerateImage={() => setImageGenOpen(true)}
             onOpenAssetLibrary={(src) => {
               setReplaceImageSrc(src);
@@ -1257,6 +1312,7 @@ export default function DeckEditor() {
             }
             recentEdits={deckRecentEdits}
             onComment={(quotedText) => {
+              if (!canComment) return;
               setPendingComment({ quotedText });
               setSidePanel("comments");
             }}
@@ -1284,6 +1340,7 @@ export default function DeckEditor() {
           <SlideCommentsPanel
             deckId={id}
             slideId={currentSlide?.id ?? null}
+            canComment={canComment}
             pendingComment={pendingComment}
             onPendingDone={() => setPendingComment(null)}
             onClose={() => {
@@ -1365,6 +1422,30 @@ export default function DeckEditor() {
         canRestore={canEdit}
         anchorRef={historyButtonRef}
       />
+
+      <AlertDialog open={pendingDeckNavigationWarningOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("deckEditor.unsavedChangesTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("deckEditor.unsavedChangesDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={keepEditingAfterNavigationAttempt}>
+              {t("deckEditor.keepEditing")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={leaveWithPendingDeckChanges}
+            >
+              {t("deckEditor.leaveWithoutSaving")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }