diff --git a/examples/nextjs-ai-slideshow/README.md b/examples/nextjs-ai-slideshow/README.md
index b50d248f89..0215ea85b6 100644
--- a/examples/nextjs-ai-slideshow/README.md
+++ b/examples/nextjs-ai-slideshow/README.md
@@ -24,10 +24,10 @@ This example shows how to build a multiplayer AI slideshow builder with
 [Liveblocks Feeds](https://liveblocks.io/docs/collaboration-features/ai-collaboration),
 [Yjs](https://yjs.dev/), [CodeMirror](https://codemirror.net/),
 [Liveblocks Comments](https://liveblocks.io/docs/products/comments), and
-[Next.js](https://nextjs.org/). Chat with AI to generate slides with HTML, and
-it’ll create previews of new slides that you can apply. Alternatively,edit the
-HTML directly in the collaborative editor. You can also leave comments on
-slides.
+[Next.js](https://nextjs.org/). Chat with AI to generate and edit slides with
+HTML. You can drag-and-drop elements, edit the code, and leave comments for
+other users. As other users edit slides, you can see their presence in the
+preview and code editor.
 
 ## Getting started
 
diff --git a/examples/nextjs-ai-slideshow/app/api/ai-reply/html-proposals.ts b/examples/nextjs-ai-slideshow/app/api/ai-reply/html-proposals.ts
new file mode 100644
index 0000000000..69a7ef0c74
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/api/ai-reply/html-proposals.ts
@@ -0,0 +1,94 @@
+export type HtmlProposal = { slideId: string; html: string };
+
+const HTML_FENCE_OPEN_PATTERN =
+  /```html(?:[ \t]+(?:(?:id=([^\s`]+))|(new)))?[ \t]*(?:\r?\n|$)/gi;
+
+export function extractHtmlProposal(text: string, currentSlideId: string) {
+  return {
+    content: stripHtmlFencesForChat(text),
+    proposals: collectHtmlProposals(text, currentSlideId, false),
+  };
+}
+
+export function extractStreamingHtml(
+  text: string,
+  currentSlideId: string
+): HtmlProposal[] | undefined {
+  const proposals = collectHtmlProposals(text, currentSlideId, true);
+  return proposals.length > 0 ? proposals : undefined;
+}
+
+export function stripHtmlFencesForChat(text: string) {
+  const pattern = new RegExp(HTML_FENCE_OPEN_PATTERN);
+  let result = "";
+  let lastIndex = 0;
+  let match = pattern.exec(text);
+
+  while (match) {
+    result += text.slice(lastIndex, match.index);
+
+    const closeIndex = text.indexOf("```", pattern.lastIndex);
+    if (closeIndex === -1) {
+      return result.trim();
+    }
+
+    lastIndex = closeIndex + "```".length;
+    pattern.lastIndex = lastIndex;
+    match = pattern.exec(text);
+  }
+
+  return (result + text.slice(lastIndex)).trim();
+}
+
+function collectHtmlProposals(
+  text: string,
+  currentSlideId: string,
+  includeOpenFence: boolean
+) {
+  const proposals: HtmlProposal[] = [];
+  const pattern = new RegExp(HTML_FENCE_OPEN_PATTERN);
+  let searchIndex = 0;
+
+  while (searchIndex < text.length) {
+    pattern.lastIndex = searchIndex;
+    const match = pattern.exec(text);
+    if (!match) {
+      break;
+    }
+
+    const bodyStart = pattern.lastIndex;
+    const closeIndex = text.indexOf("```", bodyStart);
+    const slideId = match[2] === "new" ? "new" : (match[1] ?? currentSlideId);
+
+    if (closeIndex === -1) {
+      if (includeOpenFence) {
+        addProposal(proposals, {
+          slideId,
+          html: text.slice(bodyStart).trim(),
+        });
+      }
+      break;
+    }
+
+    addProposal(proposals, {
+      slideId,
+      html: text.slice(bodyStart, closeIndex).trim(),
+    });
+    searchIndex = closeIndex + "```".length;
+  }
+
+  return proposals.filter((proposal) => proposal.html.length > 0);
+}
+
+function addProposal(proposals: HtmlProposal[], proposal: HtmlProposal) {
+  if (proposal.slideId !== "new") {
+    const existingIndex = proposals.findIndex(
+      (item) => item.slideId === proposal.slideId
+    );
+    if (existingIndex !== -1) {
+      proposals.splice(existingIndex, 1);
+    }
+  }
+
+  proposals.push(proposal);
+}
diff --git a/examples/nextjs-ai-slideshow/app/api/ai-reply/route.ts b/examples/nextjs-ai-slideshow/app/api/ai-reply/route.ts
index a289a8d1d2..24f7efd0c3 100644
--- a/examples/nextjs-ai-slideshow/app/api/ai-reply/route.ts
+++ b/examples/nextjs-ai-slideshow/app/api/ai-reply/route.ts
@@ -1,7 +1,14 @@
 import { Liveblocks } from "@liveblocks/node";
 import { NextRequest, NextResponse } from "next/server";
 import { AI_USER_AVATAR, AI_USER_ID, AI_USER_NAME } from "@/app/database";
+import { INITIAL_SLIDE_ID } from "@/app/slide-doc";
 import { STARTER_SLIDE_HTML } from "@/app/slide-html";
+import {
+  extractHtmlProposal,
+  extractStreamingHtml,
+  stripHtmlFencesForChat,
+  type HtmlProposal,
+} from "./html-proposals";
 
 /**
  * Generates an assistant reply and streams it into the room's feed using
@@ -10,6 +17,7 @@ import { STARTER_SLIDE_HTML } from "@/app/slide-html";
  */
 
 type ChatMessage = { role: "user" | "assistant"; content: string };
+type SlideContext = { id: string; html: string };
 type Source = { title: string; url: string };
 type ChainStep = {
   label: string;
@@ -30,7 +38,7 @@ type AssistantUpdate = {
   suggestions?: string[];
   chainOfThought?: ChainStep[];
   tool?: ToolCall;
-  proposedHtml?: string;
+  proposals?: HtmlProposal[];
   proposalStatus?: "pending" | "applied" | "rejected";
   usedTokens?: number;
   maxTokens?: number;
@@ -48,12 +56,17 @@ const AUTHOR = {
 
 const SYSTEM_PROMPT = [
   "You are an expert slide designer inside a multiplayer slideshow builder.",
-  "Reply with a SHORT conversational message plus the COMPLETE slide HTML document in a single fenced ```html code block.",
+  "Reply with a SHORT conversational message.",
   "The HTML must be a full self-contained document with inline <style>, designed for a 1280x720 16:9 slide.",
   // External resources don't survive the client-side PPTX snapshot (CORS), so
   // the slide must be renderable entirely offline.
   "Strictly no external resources: no <link> stylesheets or font imports, no <img> or background images from URLs. Use system font stacks (e.g. Inter, ui-sans-serif, system-ui) and CSS gradients/shapes for visuals.",
-  "Create or edit only ONE slide. Keep the design polished, readable, and presentation-ready.",
+  "Keep the design polished, readable, and presentation-ready.",
+  "You may edit any existing slides and/or add new slides.",
+  "For each existing slide you want to change, output the COMPLETE HTML document in a fenced code block whose info string is ```html id=<slideId>.",
+  "For each new slide you want to append, output the COMPLETE HTML document in a fenced code block whose info string is ```html new.",
+  "A plain ```html fenced block targets the slide currently viewed by the user.",
+  "Only output fenced HTML blocks for slides you want to change.",
 ].join("\n");
 
 export async function POST(request: NextRequest) {
@@ -65,14 +78,31 @@ export async function POST(request: NextRequest) {
     secret: process.env.LIVEBLOCKS_SECRET_KEY,
   });
 
-  const { roomId, feedId, messages, model, currentSlideHtml } =
-    (await request.json()) as {
-      roomId: string;
-      feedId: string;
-      messages: ChatMessage[];
-      model?: string;
-      currentSlideHtml?: string;
-    };
+  const body: unknown = await request.json();
+  if (!isRecord(body)) {
+    return new NextResponse("Invalid request", { status: 400 });
+  }
+
+  const roomId = typeof body.roomId === "string" ? body.roomId : "";
+  const feedId = typeof body.feedId === "string" ? body.feedId : "";
+  const model = typeof body.model === "string" ? body.model : undefined;
+  const messages = isChatMessages(body.messages) ? body.messages : [];
+  const slides = parseSlides(body.slides);
+  const currentSlideId =
+    typeof body.currentSlideId === "string" ? body.currentSlideId : undefined;
+
+  if (!slides) {
+    return new NextResponse("Invalid slides", { status: 400 });
+  }
+
+  const deckSlides =
+    slides.length > 0
+      ? slides
+      : [{ id: currentSlideId ?? INITIAL_SLIDE_ID, html: STARTER_SLIDE_HTML }];
+  const effectiveCurrentSlideId =
+    currentSlideId && deckSlides.some((slide) => slide.id === currentSlideId)
+      ? currentSlideId
+      : deckSlides[0].id;
 
   // Only allow writing into this example's rooms.
   if (!roomId?.startsWith(ROOM_ID_PREFIX) || !feedId) {
@@ -112,12 +142,13 @@ export async function POST(request: NextRequest) {
     if (process.env.AI_GATEWAY_API_KEY) {
       await streamRealReply(
         messages,
-        currentSlideHtml ?? STARTER_SLIDE_HTML,
+        deckSlides,
+        effectiveCurrentSlideId,
         model,
         update
       );
     } else {
-      await streamMockReply(messages, update);
+      await streamMockReply(messages, effectiveCurrentSlideId, update);
     }
   } catch (error) {
     const reason = error instanceof Error ? error.message : "Unknown error";
@@ -135,7 +166,8 @@ type UpdateFn = (data: AssistantUpdate) => Promise<unknown>;
 
 async function streamRealReply(
   messages: ChatMessage[],
-  currentSlideHtml: string,
+  slides: SlideContext[],
+  currentSlideId: string,
   model: string | undefined,
   update: UpdateFn
 ) {
@@ -144,7 +176,7 @@ async function streamRealReply(
 
   const result = streamText({
     model: model ?? "openai/gpt-5.4-mini",
-    system: `${SYSTEM_PROMPT}\n\nCurrent slide HTML:\n\`\`\`html\n${currentSlideHtml}\n\`\`\``,
+    system: `${SYSTEM_PROMPT}\n\nCurrent deck:\n${formatDeckContext(slides, currentSlideId)}`,
     messages,
     providerOptions: {
       openai: { reasoningEffort: "low", reasoningSummary: "auto" },
@@ -168,7 +200,7 @@ async function streamRealReply(
       reasoning: reasoning || undefined,
       // Stream the partial HTML too, so the proposal card shows up (in a
       // loading state) as soon as the model starts writing the fenced block.
-      proposedHtml: extractStreamingHtml(rawContent),
+      proposals: extractStreamingHtml(rawContent, currentSlideId),
       streaming: true,
     });
   };
@@ -192,21 +224,25 @@ async function streamRealReply(
     .map((source) => ({ title: source.title || source.url, url: source.url }));
 
   const usage = await result.usage;
-  const proposal = extractHtmlProposal(rawContent);
+  const proposal = extractHtmlProposal(rawContent, currentSlideId);
 
   await update({
     content: proposal.content || stripHtmlFencesForChat(rawContent),
     reasoning: reasoning || undefined,
     sources: sources.length > 0 ? sources : undefined,
-    proposedHtml: proposal.html,
-    proposalStatus: proposal.html ? "pending" : undefined,
+    proposals: proposal.proposals.length > 0 ? proposal.proposals : undefined,
+    proposalStatus: proposal.proposals.length > 0 ? "pending" : undefined,
     usedTokens: usage.totalTokens ?? 0,
     maxTokens: MAX_TOKENS,
     streaming: false,
   });
 }
 
-async function streamMockReply(messages: ChatMessage[], update: UpdateFn) {
+async function streamMockReply(
+  messages: ChatMessage[],
+  currentSlideId: string,
+  update: UpdateFn
+) {
   const lastUserMessage =
     [...messages].reverse().find((message) => message.role === "user")
       ?.content ?? "your request";
@@ -215,7 +251,7 @@ async function streamMockReply(messages: ChatMessage[], update: UpdateFn) {
   const contentText = [
     `I drafted a slide proposal for **"${lastUserMessage}"**.`,
     "",
-    "Review the HTML below, then apply it to the shared CodeMirror document when you are ready.",
+    "Review the HTML below, then apply it to the shared deck when you are ready.",
   ].join("\n");
 
   let content = "";
@@ -229,7 +265,12 @@ async function streamMockReply(messages: ChatMessage[], update: UpdateFn) {
   for (let i = 1; i <= 20; i++) {
     await update({
       content,
-      proposedHtml: slide.slice(0, Math.ceil((slide.length * i) / 20)),
+      proposals: [
+        {
+          slideId: currentSlideId,
+          html: slide.slice(0, Math.ceil((slide.length * i) / 20)),
+        },
+      ],
       maxTokens: MAX_TOKENS,
       streaming: true,
     });
@@ -238,7 +279,7 @@ async function streamMockReply(messages: ChatMessage[], update: UpdateFn) {
 
   await update({
     content,
-    proposedHtml: slide,
+    proposals: [{ slideId: currentSlideId, html: slide }],
     proposalStatus: "pending",
     usedTokens: Math.round(content.length / 4) + 280,
     suggestions: [
@@ -250,38 +291,57 @@ async function streamMockReply(messages: ChatMessage[], update: UpdateFn) {
   });
 }
 
-function extractHtmlProposal(text: string) {
-  let html: string | undefined;
-  const fencePattern = /```html\s*([\s\S]*?)```/gi;
-  for (const match of text.matchAll(fencePattern)) {
-    html = match[1]?.trim();
-  }
-
-  return {
-    content: stripHtmlFencesForChat(text),
-    html,
-  };
+function formatDeckContext(slides: SlideContext[], currentSlideId: string) {
+  return slides
+    .map((slide, index) => {
+      const current =
+        slide.id === currentSlideId ? ", currently viewed by the user" : "";
+      return [
+        `Slide ${index + 1} of ${slides.length} (id: ${slide.id})${current}`,
+        "```",
+        slide.html,
+        "```",
+      ].join("\n");
+    })
+    .join("\n\n");
 }
 
-/**
- * The HTML generated so far: the content of the last ```html fence, whether
- * or not it has been closed yet. Undefined until the fence starts.
- */
-function extractStreamingHtml(text: string): string | undefined {
-  const start = text.lastIndexOf("```html");
-  if (start === -1) {
+function parseSlides(value: unknown): SlideContext[] | undefined {
+  if (value === undefined) {
+    return [];
+  }
+  if (!Array.isArray(value)) {
     return undefined;
   }
-  const body = text.slice(start + "```html".length);
-  const end = body.indexOf("```");
-  return (end === -1 ? body : body.slice(0, end)).trim() || undefined;
+
+  const slides: SlideContext[] = [];
+  for (const item of value) {
+    if (!isRecord(item)) {
+      return undefined;
+    }
+    if (typeof item.id !== "string" || typeof item.html !== "string") {
+      return undefined;
+    }
+    slides.push({ id: item.id, html: item.html });
+  }
+
+  return slides;
+}
+
+function isChatMessages(value: unknown): value is ChatMessage[] {
+  return (
+    Array.isArray(value) &&
+    value.every(
+      (item) =>
+        isRecord(item) &&
+        (item.role === "user" || item.role === "assistant") &&
+        typeof item.content === "string"
+    )
+  );
 }
 
-function stripHtmlFencesForChat(text: string) {
-  return text
-    .replace(/```html\s*[\s\S]*?```/gi, "")
-    .replace(/```html\s*[\s\S]*$/i, "")
-    .trim();
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
 }
 
 function chunkText(text: string): string[] {
diff --git a/examples/nextjs-ai-slideshow/app/api/apply-slide/route.ts b/examples/nextjs-ai-slideshow/app/api/apply-slide/route.ts
index 8e52ae3ced..686e47599c 100644
--- a/examples/nextjs-ai-slideshow/app/api/apply-slide/route.ts
+++ b/examples/nextjs-ai-slideshow/app/api/apply-slide/route.ts
@@ -1,7 +1,11 @@
 import diff from "fast-diff";
 import { Liveblocks } from "@liveblocks/node";
+import { nanoid } from "nanoid";
 import { NextRequest, NextResponse } from "next/server";
 import * as Y from "yjs";
+import { getSlideIds, getSlideText, SLIDES_ARRAY_KEY } from "@/app/slide-doc";
+
+type SlideProposal = { slideId: string; html: string };
 
 type FeedMessageData = {
   role: "user" | "assistant";
@@ -13,7 +17,7 @@ type FeedMessageData = {
   reasoning?: string;
   sources?: { title: string; url: string }[];
   suggestions?: string[];
-  proposedHtml?: string;
+  proposals?: SlideProposal[];
   proposalStatus?: "pending" | "applied" | "rejected";
   chainOfThought?: {
     label: string;
@@ -50,7 +54,6 @@ export async function POST(request: NextRequest) {
     body.action === "apply" || body.action === "reject"
       ? body.action
       : undefined;
-  const html = typeof body.html === "string" ? body.html : undefined;
 
   if (!roomId.startsWith(ROOM_ID_PREFIX) || !feedId || !messageId || !action) {
     return new NextResponse("Invalid room, feed, message, or action", {
@@ -58,10 +61,6 @@ export async function POST(request: NextRequest) {
     });
   }
 
-  if (action === "apply" && !html) {
-    return new NextResponse("Missing slide HTML", { status: 400 });
-  }
-
   const liveblocks = new Liveblocks({
     secret: process.env.LIVEBLOCKS_SECRET_KEY,
   });
@@ -75,8 +74,14 @@ export async function POST(request: NextRequest) {
     return new NextResponse("Feed message not found", { status: 404 });
   }
 
-  if (action === "apply" && html) {
-    await applyHtmlToYjsDocument(liveblocks, roomId, html);
+  let newSlideIds: string[] = [];
+  if (action === "apply") {
+    const proposals = message.data.proposals;
+    if (!proposals || proposals.length === 0) {
+      return new NextResponse("Slide proposals not found", { status: 404 });
+    }
+
+    newSlideIds = await applyProposalsToYjsDocument(liveblocks, roomId, proposals);
   }
 
   await liveblocks.updateFeedMessage<FeedMessageData>({
@@ -89,44 +94,79 @@ export async function POST(request: NextRequest) {
     },
   });
 
-  return NextResponse.json({ ok: true });
+  return NextResponse.json({ ok: true, newSlideIds });
 }
 
-async function applyHtmlToYjsDocument(
+async function applyProposalsToYjsDocument(
   liveblocks: Liveblocks,
   roomId: string,
-  nextHtml: string
-) {
+  proposals: SlideProposal[]
+): Promise<string[]> {
   const binaryUpdate = await liveblocks.getYjsDocumentAsBinaryUpdate(roomId);
   const ydoc = new Y.Doc();
   Y.applyUpdate(ydoc, new Uint8Array(binaryUpdate));
 
-  const ytext = ydoc.getText("codemirror");
-  const currentHtml = ytext.toString();
-  if (currentHtml === nextHtml) {
-    return;
-  }
-
   const stateVectorBefore = Y.encodeStateVector(ydoc);
-  const changes = diff(currentHtml, nextHtml);
+  const slides = ydoc.getArray<string>(SLIDES_ARRAY_KEY);
+  const slideIds = getSlideIds(ydoc);
+  const newSlideIds: string[] = [];
 
   ydoc.transact(() => {
-    let index = 0;
-
-    for (const [operation, text] of changes) {
-      if (operation === 0) {
-        index += text.length;
-      } else if (operation === -1) {
-        ytext.delete(index, text.length);
-      } else if (operation === 1) {
-        ytext.insert(index, text);
-        index += text.length;
+    if (slideIds.length === 0) {
+      for (const proposal of proposals) {
+        newSlideIds.push(appendSlide(ydoc, slides, proposal.html));
+      }
+      return;
+    }
+
+    for (const proposal of proposals) {
+      if (proposal.slideId === "new") {
+        newSlideIds.push(appendSlide(ydoc, slides, proposal.html));
+        continue;
+      }
+
+      if (!slideIds.includes(proposal.slideId)) {
+        continue;
       }
+
+      applyHtmlDiff(getSlideText(ydoc, proposal.slideId), proposal.html);
     }
   });
 
   const incrementalUpdate = Y.encodeStateAsUpdate(ydoc, stateVectorBefore);
   await liveblocks.sendYjsBinaryUpdate(roomId, incrementalUpdate);
+
+  return newSlideIds;
+}
+
+function appendSlide(
+  ydoc: Y.Doc,
+  slides: Y.Array<string>,
+  html: string
+): string {
+  const id = nanoid(8);
+  slides.push([id]);
+  getSlideText(ydoc, id).insert(0, html);
+  return id;
+}
+
+function applyHtmlDiff(ytext: Y.Text, nextHtml: string) {
+  const currentHtml = ytext.toString();
+  if (currentHtml === nextHtml) {
+    return;
+  }
+
+  let index = 0;
+  for (const [operation, text] of diff(currentHtml, nextHtml)) {
+    if (operation === 0) {
+      index += text.length;
+    } else if (operation === -1) {
+      ytext.delete(index, text.length);
+    } else if (operation === 1) {
+      ytext.insert(index, text);
+      index += text.length;
+    }
+  }
 }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
diff --git a/examples/nextjs-ai-slideshow/app/api/replace-room-html/route.ts b/examples/nextjs-ai-slideshow/app/api/replace-room-html/route.ts
new file mode 100644
index 0000000000..e669497273
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/api/replace-room-html/route.ts
@@ -0,0 +1,96 @@
+import { Liveblocks } from "@liveblocks/node";
+import { nanoid } from "nanoid";
+import { NextRequest, NextResponse } from "next/server";
+import * as Y from "yjs";
+import { getSlideText, SLIDES_ARRAY_KEY } from "@/app/slide-doc";
+
+/**
+ * Replaces a room's entire deck with submitted slide HTML.
+ *
+ * Example:
+ * curl -X POST http://localhost:3000/api/replace-room-html \
+ *   -H 'Content-Type: application/json' \
+ *   -d '{"roomId":"liveblocks:examples:nextjs-ai-slideshow:demo","slides":["<!doctype html><html><body>Slide</body></html>"]}'
+ */
+
+const ROOM_ID_PREFIX = "liveblocks:examples:nextjs-ai-slideshow";
+
+export async function POST(request: NextRequest) {
+  if (!process.env.LIVEBLOCKS_SECRET_KEY) {
+    return new NextResponse("Missing LIVEBLOCKS_SECRET_KEY", { status: 403 });
+  }
+
+  const body: unknown = await request.json();
+  if (!isRecord(body)) {
+    return new NextResponse("Invalid request", { status: 400 });
+  }
+
+  const roomId = typeof body.roomId === "string" ? body.roomId : "";
+  const slides = parseSlides(body.slides);
+
+  if (!roomId.startsWith(ROOM_ID_PREFIX)) {
+    return new NextResponse("Invalid room", { status: 400 });
+  }
+  if (!slides) {
+    return new NextResponse("Invalid slides", { status: 400 });
+  }
+
+  const liveblocks = new Liveblocks({
+    secret: process.env.LIVEBLOCKS_SECRET_KEY,
+  });
+
+  const slideIds = await replaceRoomDeck(liveblocks, roomId, slides);
+  return NextResponse.json({ ok: true, slideIds });
+}
+
+async function replaceRoomDeck(
+  liveblocks: Liveblocks,
+  roomId: string,
+  slideHtml: string[]
+) {
+  const binaryUpdate = await liveblocks.getYjsDocumentAsBinaryUpdate(roomId);
+  const ydoc = new Y.Doc();
+  Y.applyUpdate(ydoc, new Uint8Array(binaryUpdate));
+
+  const stateVectorBefore = Y.encodeStateVector(ydoc);
+  const slides = ydoc.getArray<string>(SLIDES_ARRAY_KEY);
+  const slideIds: string[] = [];
+
+  ydoc.transact(() => {
+    if (slides.length > 0) {
+      slides.delete(0, slides.length);
+    }
+
+    for (const html of slideHtml) {
+      const id = nanoid(8);
+      slideIds.push(id);
+      slides.push([id]);
+      getSlideText(ydoc, id).insert(0, html);
+    }
+  });
+
+  const incrementalUpdate = Y.encodeStateAsUpdate(ydoc, stateVectorBefore);
+  await liveblocks.sendYjsBinaryUpdate(roomId, incrementalUpdate);
+
+  return slideIds;
+}
+
+function parseSlides(value: unknown): string[] | undefined {
+  if (!Array.isArray(value) || value.length === 0) {
+    return undefined;
+  }
+
+  const slides: string[] = [];
+  for (const item of value) {
+    if (typeof item !== "string" || item.length === 0) {
+      return undefined;
+    }
+    slides.push(item);
+  }
+
+  return slides;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
diff --git a/examples/nextjs-ai-slideshow/app/api/users/search/route.ts b/examples/nextjs-ai-slideshow/app/api/users/search/route.ts
new file mode 100644
index 0000000000..911e4f427a
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/api/users/search/route.ts
@@ -0,0 +1,26 @@
+import { getUsers } from "@/app/database";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * Returns a list of user IDs from a partial search input.
+ * For `resolveMentionSuggestions` in LiveblocksProvider.
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const text = searchParams.get("text") ?? "";
+  const query = text.trim().toLowerCase();
+
+  const userIds = getUsers()
+    .filter((user) => {
+      if (!query) {
+        return true;
+      }
+
+      const name = user.info.name.toLowerCase();
+      const id = user.id.toLowerCase();
+      return name.includes(query) || id.includes(query);
+    })
+    .map((user) => user.id);
+
+  return NextResponse.json(userIds);
+}
diff --git a/examples/nextjs-ai-slideshow/app/chat.tsx b/examples/nextjs-ai-slideshow/app/chat.tsx
index 8401391d9e..1b22b86207 100644
--- a/examples/nextjs-ai-slideshow/app/chat.tsx
+++ b/examples/nextjs-ai-slideshow/app/chat.tsx
@@ -10,10 +10,12 @@ import {
   useFeedMessages,
   useFeeds,
   useOthers,
+  useRoom,
   useSelf,
   useUpdateMyPresence,
 } from "@liveblocks/react/suspense";
 import { Avatar } from "@liveblocks/react-ui";
+import { getYjsProviderForRoom } from "@liveblocks/yjs";
 import {
   CopyIcon,
   EyeIcon,
@@ -91,7 +93,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { Shimmer } from "@/components/ai-elements/shimmer";
 import { HelpButton } from "@/components/help-button";
 import { resolveProposal, type SlideProposal } from "./proposal-actions";
-import { useSlideHtml } from "./use-slide-html";
+import { getSlideIds, getSlideText } from "./slide-doc";
 
 // Each chat is a feed in the room. Everyone connected reads and writes to the
 // selected feed, so messages (and the AI's replies) appear live for all users.
@@ -114,12 +116,18 @@ const STARTER_PROMPTS = [
 
 export function Chat({
   roomId,
+  slideId,
+  slideIds,
   previewedProposal,
   onPreviewProposal,
+  onProposalApplied,
 }: {
   roomId: string;
+  slideId: string;
+  slideIds: string[];
   previewedProposal: SlideProposal | null;
   onPreviewProposal: (proposal: SlideProposal | null) => void;
+  onProposalApplied: (newSlideIds: string[]) => void;
 }) {
   const { feeds } = useFeeds();
 
@@ -199,11 +207,14 @@ export function Chat({
           <ChatWindow
             key={feedId}
             roomId={roomId}
+            slideId={slideId}
+            slideIds={slideIds}
             feedId={feedId}
             model={model}
             setModel={setModel}
             previewedProposal={previewedProposal}
             onPreviewProposal={onPreviewProposal}
+            onProposalApplied={onProposalApplied}
           />
         </ClientSideSuspense>
       </div>
@@ -213,26 +224,32 @@ export function Chat({
 
 function ChatWindow({
   roomId,
+  slideId,
+  slideIds,
   feedId,
   model,
   setModel,
   previewedProposal,
   onPreviewProposal,
+  onProposalApplied,
 }: {
   roomId: string;
+  slideId: string;
+  slideIds: string[];
   feedId: string;
   model: string;
   setModel: (model: string) => void;
   previewedProposal: SlideProposal | null;
   onPreviewProposal: (proposal: SlideProposal | null) => void;
+  onProposalApplied: (newSlideIds: string[]) => void;
 }) {
+  const room = useRoom();
   const { messages } = useFeedMessages(feedId);
   const createFeed = useCreateFeed();
   const createFeedMessage = useCreateFeedMessage();
   const deleteFeedMessage = useDeleteFeedMessage();
   const self = useSelf();
   const updateMyPresence = useUpdateMyPresence();
-  const currentSlideHtml = useSlideHtml();
 
   // The AI "thinking" status is shared via presence (scoped to this chat), so
   // everyone viewing this chat sees it — not just whoever triggered the reply.
@@ -274,11 +291,13 @@ function ChatWindow({
       .find(
         (message) =>
           message.data.role === "assistant" &&
-          message.data.proposedHtml &&
+          message.data.proposals &&
+          message.data.proposals.length > 0 &&
           !message.data.streaming
       );
     if (
-      latestProposal?.data.proposedHtml &&
+      latestProposal?.data.proposals &&
+      latestProposal.data.proposals.length > 0 &&
       latestProposal.data.proposalStatus === "pending" &&
       !autoPreviewedIds.current.has(latestProposal.id)
     ) {
@@ -286,7 +305,7 @@ function ChatWindow({
       onPreviewProposal({
         feedId,
         messageId: latestProposal.id,
-        html: latestProposal.data.proposedHtml,
+        proposals: latestProposal.data.proposals,
       });
     }
   }, [sorted, feedId, onPreviewProposal]);
@@ -307,6 +326,13 @@ function ChatWindow({
 
   const postReply = useCallback(
     async (history: { role: "user" | "assistant"; content: string }[]) => {
+      const provider = getYjsProviderForRoom(room);
+      const ydoc = provider.getYDoc();
+      const slides = getSlideIds(ydoc).map((id) => ({
+        id,
+        html: getSlideText(ydoc, id).toString(),
+      }));
+
       await fetch("/api/ai-reply", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -315,11 +341,12 @@ function ChatWindow({
           feedId,
           model,
           messages: history,
-          currentSlideHtml,
+          slides,
+          currentSlideId: slideId,
         }),
       });
     },
-    [roomId, feedId, model, currentSlideHtml]
+    [room, roomId, feedId, model, slideId]
   );
 
   const send = useCallback(
@@ -441,7 +468,7 @@ function ChatWindow({
                 streaming,
                 chainOfThought,
                 tool,
-                proposedHtml,
+                proposals,
                 proposalStatus,
               } = message.data;
               const isAssistant = role === "assistant";
@@ -549,12 +576,13 @@ function ChatWindow({
                       ) : null}
                     </div>
 
-                    {isAssistant && proposedHtml ? (
+                    {isAssistant && proposals && proposals.length > 0 ? (
                       <ProposalCard
                         roomId={roomId}
                         feedId={feedId}
                         messageId={message.id}
-                        html={proposedHtml}
+                        proposals={proposals}
+                        slideIds={slideIds}
                         status={proposalStatus}
                         generating={!!streaming}
                         previewing={
@@ -562,6 +590,7 @@ function ChatWindow({
                           previewedProposal?.feedId === feedId
                         }
                         onPreview={onPreviewProposal}
+                        onApplied={onProposalApplied}
                       />
                     ) : null}
 
@@ -648,20 +677,24 @@ function ProposalCard({
   roomId,
   feedId,
   messageId,
-  html,
+  proposals,
+  slideIds,
   status = "pending",
   generating,
   previewing,
   onPreview,
+  onApplied,
 }: {
   roomId: string;
   feedId: string;
   messageId: string;
-  html: string;
+  proposals: { slideId: string; html: string }[];
+  slideIds: string[];
   status?: "pending" | "applied" | "rejected";
   generating: boolean;
   previewing: boolean;
   onPreview: (proposal: SlideProposal) => void;
+  onApplied: (newSlideIds: string[]) => void;
 }) {
   const [submitting, setSubmitting] = useState<"apply" | "reject" | null>(null);
 
@@ -672,7 +705,7 @@ function ProposalCard({
     if (generating && preRef.current) {
       preRef.current.scrollTop = preRef.current.scrollHeight;
     }
-  }, [generating, html]);
+  }, [generating, proposals]);
 
   const updateProposal = useCallback(
     async (action: "apply" | "reject") => {
@@ -682,39 +715,68 @@ function ProposalCard({
 
       setSubmitting(action);
       try {
-        await resolveProposal(roomId, { feedId, messageId, html }, action);
+        const { newSlideIds } = await resolveProposal(
+          roomId,
+          { feedId, messageId, proposals },
+          action
+        );
+        if (action === "apply") {
+          onApplied(newSlideIds);
+        }
       } finally {
         setSubmitting(null);
       }
     },
-    [feedId, html, messageId, roomId, submitting]
+    [feedId, messageId, onApplied, proposals, roomId, submitting]
   );
 
   return (
     <div className="mt-3 overflow-hidden rounded-md border border-neutral-950/10 bg-white shadow-xs">
-      <div className="flex items-center justify-between border-b border-neutral-950/5 px-3 py-2">
-        <span className="text-xs font-medium text-neutral-700">Changes</span>
-        {generating ? (
-          <Shimmer className="text-xs font-medium">Generating…</Shimmer>
-        ) : status !== "pending" ? (
-          <span className="text-xs font-medium text-neutral-400">
-            {status === "applied" ? "Applied" : "Rejected"}
-          </span>
-        ) : null}
-      </div>
-      <pre
-        ref={preRef}
-        className="max-h-48 overflow-auto bg-neutral-50 p-3 font-mono text-[11px] leading-relaxed text-neutral-700"
-      >
-        <code>{html}</code>
-      </pre>
+      {proposals.map((proposal, index) => {
+        const slideIndex = slideIds.indexOf(proposal.slideId);
+        const label =
+          proposal.slideId === "new"
+            ? "New slide"
+            : slideIndex === -1
+              ? "Deleted slide"
+              : `Slide ${slideIndex + 1}`;
+
+        return (
+          <section key={`${proposal.slideId}-${index}`}>
+            <div
+              className={`flex items-center justify-between border-neutral-950/5 px-3 py-2 ${
+                index === 0 ? "border-b" : "border-y"
+              }`}
+            >
+              <span className="text-xs font-medium text-neutral-700">
+                {label}
+              </span>
+              {index === 0 ? (
+                generating ? (
+                  <Shimmer className="text-xs font-medium">Generating…</Shimmer>
+                ) : status !== "pending" ? (
+                  <span className="text-xs font-medium text-neutral-400">
+                    {status === "applied" ? "Applied" : "Rejected"}
+                  </span>
+                ) : null
+              ) : null}
+            </div>
+            <pre
+              ref={index === proposals.length - 1 ? preRef : undefined}
+              className="max-h-48 overflow-auto bg-neutral-50 p-3 font-mono text-[11px] leading-relaxed text-neutral-700"
+            >
+              <code>{proposal.html}</code>
+            </pre>
+          </section>
+        );
+      })}
       {!generating && status === "pending" ? (
         <div className="flex items-center justify-end gap-2 border-t border-neutral-950/5 p-2">
           <Button
             variant="outline"
             size="sm"
             className="mr-auto"
-            onClick={() => onPreview({ feedId, messageId, html })}
+            onClick={() => onPreview({ feedId, messageId, proposals })}
             disabled={previewing}
           >
             <EyeIcon className="size-4" />
@@ -730,11 +792,14 @@ function ProposalCard({
           </Button>
           <Button
             size="sm"
-            className="bg-rose-600 text-white hover:bg-rose-700"
             onClick={() => updateProposal("apply")}
             disabled={submitting !== null}
           >
-            {submitting === "apply" ? "Applying..." : "Apply to slide"}
+            {submitting === "apply"
+              ? "Applying..."
+              : proposals.length === 1
+                ? "Apply to slide"
+                : "Apply to slides"}
           </Button>
         </div>
       ) : null}
diff --git a/examples/nextjs-ai-slideshow/app/collaborative-editor.tsx b/examples/nextjs-ai-slideshow/app/collaborative-editor.tsx
index 09d7e3da00..ad31ed44f1 100644
--- a/examples/nextjs-ai-slideshow/app/collaborative-editor.tsx
+++ b/examples/nextjs-ai-slideshow/app/collaborative-editor.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
 import { html } from "@codemirror/lang-html";
 import { EditorState } from "@codemirror/state";
 import { basicSetup, EditorView } from "codemirror";
@@ -8,7 +9,17 @@ import { getYjsProviderForRoom } from "@liveblocks/yjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { yCollab } from "y-codemirror.next";
 import * as Y from "yjs";
-import { STARTER_SLIDE_HTML } from "./slide-html";
+import { getSlideText } from "./slide-doc";
+
+// The code editor's undo/redo state and actions, mirroring exactly what the
+// editor's own Mod-z/Mod-y keybindings do. Exposed so the header undo/redo
+// buttons can drive the editor history while the Code tab is open.
+export type EditorHistory = {
+  undo: () => void;
+  redo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+};
 
 const editorTheme = EditorView.theme({
   "&": {
@@ -34,11 +45,21 @@ const editorTheme = EditorView.theme({
   },
 });
 
-export function CollaborativeEditor() {
+export function CollaborativeEditor({
+  slideId,
+  onHistoryChange,
+}: {
+  slideId: string;
+  onHistoryChange?: (history: EditorHistory | null) => void;
+}) {
   const room = useRoom();
   const userInfo = useSelf((me) => me.info);
   const [element, setElement] = useState<HTMLDivElement | null>(null);
-  const seeded = useRef(false);
+  const onHistoryChangeRef = useRef(onHistoryChange);
+
+  useEffect(() => {
+    onHistoryChangeRef.current = onHistoryChange;
+  }, [onHistoryChange]);
 
   const ref = useCallback((node: HTMLDivElement | null) => {
     setElement(node);
@@ -51,7 +72,7 @@ export function CollaborativeEditor() {
 
     const provider = getYjsProviderForRoom(room);
     const ydoc = provider.getYDoc();
-    const ytext = ydoc.getText("codemirror");
+    const ytext = getSlideText(ydoc, slideId);
     const undoManager = new Y.UndoManager(ytext);
 
     provider.awareness.setLocalStateField("user", {
@@ -60,22 +81,21 @@ export function CollaborativeEditor() {
       colorLight: `${userInfo.color}80`,
     });
 
-    const seedAfterSync = (isSynced: boolean) => {
-      if (!isSynced || seeded.current) {
-        return;
-      }
-
-      seeded.current = true;
-      if (ytext.length === 0) {
-        ytext.insert(0, STARTER_SLIDE_HTML);
-      }
+    const notifyHistory = (view: EditorView) => {
+      onHistoryChangeRef.current?.({
+        undo: () => {
+          undo(view);
+          view.focus();
+        },
+        redo: () => {
+          redo(view);
+          view.focus();
+        },
+        canUndo: undoDepth(view.state) > 0,
+        canRedo: redoDepth(view.state) > 0,
+      });
     };
 
-    provider.on("sync", seedAfterSync);
-    // The provider is cached per room, so it may already be synced by the
-    // time this effect runs (e.g. after a remount) and "sync" won't re-fire.
-    seedAfterSync(provider.synced);
-
     const state = EditorState.create({
       doc: ytext.toString(),
       extensions: [
@@ -84,6 +104,11 @@ export function CollaborativeEditor() {
         EditorView.lineWrapping,
         editorTheme,
         yCollab(ytext, provider.awareness, { undoManager }),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            notifyHistory(update.view);
+          }
+        }),
       ],
     });
 
@@ -91,13 +116,14 @@ export function CollaborativeEditor() {
       state,
       parent: element,
     });
+    notifyHistory(view);
 
     return () => {
-      provider.off("sync", seedAfterSync);
+      onHistoryChangeRef.current?.(null);
       undoManager.destroy();
       view.destroy();
     };
-  }, [element, room, userInfo]);
+  }, [element, room, slideId, userInfo]);
 
   return <div ref={ref} className="h-full min-h-0 overflow-hidden" />;
 }
diff --git a/examples/nextjs-ai-slideshow/app/database.ts b/examples/nextjs-ai-slideshow/app/database.ts
index 56870d7bd0..a06ae7aab8 100644
--- a/examples/nextjs-ai-slideshow/app/database.ts
+++ b/examples/nextjs-ai-slideshow/app/database.ts
@@ -45,19 +45,10 @@ const USER_INFO: Liveblocks["UserMeta"][] = [
       avatar: "https://liveblocks.io/avatars/avatar-8.png",
     },
   },
-  {
-    id: AI_USER_ID,
-    info: {
-      name: AI_USER_NAME,
-      color: "#000000",
-      avatar: AI_USER_AVATAR,
-    },
-  },
 ];
 
 export function getRandomUser() {
-  const humans = USER_INFO.filter((user) => user.id !== AI_USER_ID);
-  return humans[Math.floor(Math.random() * humans.length)];
+  return USER_INFO[Math.floor(Math.random() * USER_INFO.length)];
 }
 
 export function getUser(id: string) {
diff --git a/examples/nextjs-ai-slideshow/app/globals.css b/examples/nextjs-ai-slideshow/app/globals.css
index b964294726..2c1dd70271 100644
--- a/examples/nextjs-ai-slideshow/app/globals.css
+++ b/examples/nextjs-ai-slideshow/app/globals.css
@@ -12,7 +12,7 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: rgb(253 81 8);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -23,7 +23,7 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: rgb(253 81 8 / 50%);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -31,7 +31,7 @@
   --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: rgb(253 81 8);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
@@ -46,8 +46,8 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary: rgb(253 81 8);
+  --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
@@ -122,6 +122,11 @@
   }
 }
 
+/* Align Liveblocks UI (comment composer, threads) with the app's primary color. */
+.lb-root {
+  --lb-accent: rgb(253 81 8);
+}
+
 .cm-editor {
   height: 100%;
 }
diff --git a/examples/nextjs-ai-slideshow/app/html-source-map.ts b/examples/nextjs-ai-slideshow/app/html-source-map.ts
new file mode 100644
index 0000000000..a6e745e2d6
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/html-source-map.ts
@@ -0,0 +1,130 @@
+import { parse, type DefaultTreeAdapterTypes } from "parse5";
+
+export type ElementSourceRange = {
+  start: number;
+  end: number;
+};
+
+function isElementNode(
+  node: DefaultTreeAdapterTypes.ChildNode
+): node is DefaultTreeAdapterTypes.Element {
+  return "tagName" in node;
+}
+
+function findElementChild(
+  parent: DefaultTreeAdapterTypes.ParentNode,
+  index: number
+): DefaultTreeAdapterTypes.Element | null {
+  let elementIndex = 0;
+
+  for (const child of parent.childNodes) {
+    if (!isElementNode(child)) {
+      continue;
+    }
+
+    if (elementIndex === index) {
+      return child;
+    }
+    elementIndex++;
+  }
+
+  return null;
+}
+
+function findElementByTagName(
+  parent: DefaultTreeAdapterTypes.ParentNode,
+  tagName: string
+): DefaultTreeAdapterTypes.Element | null {
+  for (const child of parent.childNodes) {
+    if (isElementNode(child) && child.tagName === tagName) {
+      return child;
+    }
+  }
+
+  return null;
+}
+
+export function findElementSourceRange(
+  html: string,
+  path: number[]
+): ElementSourceRange | null {
+  const document = parse(html, { sourceCodeLocationInfo: true });
+  const htmlElement = findElementByTagName(document, "html");
+  if (!htmlElement) {
+    return null;
+  }
+
+  let element = findElementByTagName(htmlElement, "body");
+  if (!element) {
+    return null;
+  }
+
+  for (const index of path) {
+    if (!Number.isInteger(index) || index < 0 || element.tagName === "template") {
+      return null;
+    }
+
+    element = findElementChild(element, index);
+    if (!element) {
+      return null;
+    }
+  }
+
+  const location = element.sourceCodeLocation;
+  if (!location) {
+    return null;
+  }
+
+  return {
+    start: location.startOffset,
+    end: location.endOffset,
+  };
+}
+
+export function getElementPath(element: Element, root: Element): number[] | null {
+  if (element === root) {
+    return [];
+  }
+
+  if (!root.contains(element)) {
+    return null;
+  }
+
+  const path: number[] = [];
+  let current: Element | null = element;
+
+  while (current && current !== root) {
+    const parent: Element | null = current.parentElement;
+    if (!parent) {
+      return null;
+    }
+
+    let index = 0;
+    for (
+      let sibling = current.previousElementSibling;
+      sibling;
+      sibling = sibling.previousElementSibling
+    ) {
+      index++;
+    }
+
+    path.unshift(index);
+    current = parent;
+  }
+
+  return current === root ? path : null;
+}
+
+export function getElementByPath(root: Element, path: number[]): Element | null {
+  let element: Element = root;
+
+  for (const index of path) {
+    const child = element.children.item(index);
+    if (!child) {
+      return null;
+    }
+    element = child;
+  }
+
+  return element === root ? null : element;
+}
diff --git a/examples/nextjs-ai-slideshow/app/iframe-html.ts b/examples/nextjs-ai-slideshow/app/iframe-html.ts
new file mode 100644
index 0000000000..9a3f6f127c
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/iframe-html.ts
@@ -0,0 +1,187 @@
+"use client";
+
+import { makeCursorSpring } from "@liveblocks/react-ui/_private";
+
+type TransformSnapshot = {
+  tagName: string;
+  transform: string;
+  rect: DOMRect;
+};
+
+// Updates an already-loaded iframe's document in place instead of swapping
+// `srcDoc`, which would trigger a full document reload (white flash, lost
+// document-level event listeners). A synthetic "load" event is dispatched so
+// consumers that re-attach on load (e.g. the visual editor) get notified.
+export function patchIframeHtml(iframe: HTMLIFrameElement | null, html: string) {
+  if (!iframe) {
+    return;
+  }
+
+  const document = iframe.contentDocument;
+  if (!document) {
+    iframe.srcdoc = html;
+    return;
+  }
+
+  const parsed = new DOMParser().parseFromString(html, "text/html");
+  const sourceElement = parsed.documentElement;
+  const targetElement = document.documentElement;
+  const transforms = captureTransformSnapshots(targetElement);
+
+  copyAttributes(targetElement, sourceElement);
+  targetElement.replaceChildren(
+    ...Array.from(sourceElement.childNodes).map((node) =>
+      document.importNode(node, true)
+    )
+  );
+  interpolateTransformChanges(targetElement, transforms);
+  iframe.dispatchEvent(new Event("load"));
+}
+
+function copyAttributes(target: Element, source: Element) {
+  for (const attribute of Array.from(target.attributes)) {
+    if (!source.hasAttribute(attribute.name)) {
+      target.removeAttribute(attribute.name);
+    }
+  }
+
+  for (const attribute of Array.from(source.attributes)) {
+    target.setAttribute(attribute.name, attribute.value);
+  }
+}
+
+function captureTransformSnapshots(root: Element) {
+  const snapshots = new Map<string, TransformSnapshot>();
+
+  walkElements(root, [], (element, path) => {
+    snapshots.set(path.join("."), {
+      tagName: element.tagName,
+      transform: getInlineTransform(element),
+      rect: element.getBoundingClientRect(),
+    });
+  });
+
+  return snapshots;
+}
+
+function interpolateTransformChanges(
+  root: Element,
+  snapshots: Map<string, TransformSnapshot>
+) {
+  walkElements(root, [], (element, path) => {
+    const snapshot = snapshots.get(path.join("."));
+    if (!snapshot || snapshot.tagName !== element.tagName) {
+      return;
+    }
+
+    const transform = getInlineTransform(element);
+    if (!transform || transform === snapshot.transform) {
+      return;
+    }
+
+    const rect = element.getBoundingClientRect();
+    const deltaX = snapshot.rect.left - rect.left;
+    const deltaY = snapshot.rect.top - rect.top;
+    if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) {
+      return;
+    }
+
+    interpolateTransform(element, deltaX, deltaY, transform);
+  });
+}
+
+function walkElements(
+  root: Element,
+  path: number[],
+  visit: (element: Element, path: number[]) => void
+) {
+  visit(root, path);
+
+  const children = Array.from(root.children);
+  children.forEach((child, index) => {
+    walkElements(child, [...path, index], visit);
+  });
+}
+
+function getInlineTransform(element: Element) {
+  const view = element.ownerDocument.defaultView;
+  if (!view || !(element instanceof view.HTMLElement)) {
+    return "";
+  }
+
+  return element.style.transform;
+}
+
+function interpolateTransform(
+  element: Element,
+  deltaX: number,
+  deltaY: number,
+  transform: string
+) {
+  const view = element.ownerDocument.defaultView;
+  if (!view || !(element instanceof view.HTMLElement)) {
+    return;
+  }
+
+  const spring = makeCursorSpring();
+  let animation: Animation | null = null;
+
+  const cleanup = () => {
+    animation?.cancel();
+    unsubscribe();
+    spring.dispose();
+  };
+
+  const unsubscribe = spring.subscribe((point) => {
+    if (!point) {
+      cleanup();
+      return;
+    }
+
+    if (Math.abs(point.x) < 0.5 && Math.abs(point.y) < 0.5) {
+      cleanup();
+      return;
+    }
+
+    const interpolatedTransform = `translate(${formatPx(point.x)}, ${formatPx(
+      point.y
+    )}) ${transform}`;
+
+    if (!animation) {
+      animation = createTransformAnimation(element, interpolatedTransform);
+      return;
+    }
+
+    const effect = animation.effect;
+    if (
+      typeof view.KeyframeEffect === "function" &&
+      effect instanceof view.KeyframeEffect
+    ) {
+      effect.setKeyframes([
+        { transform: interpolatedTransform },
+        { transform: interpolatedTransform },
+      ]);
+      animation.currentTime = 1;
+    } else {
+      animation.cancel();
+      animation = createTransformAnimation(element, interpolatedTransform);
+    }
+  });
+
+  spring.set({ x: deltaX, y: deltaY });
+  spring.set({ x: 0, y: 0 });
+}
+
+function createTransformAnimation(element: Element, transform: string) {
+  const animation = element.animate(
+    [{ transform }, { transform }],
+    { duration: 1, fill: "forwards" }
+  );
+  animation.pause();
+  animation.currentTime = 1;
+  return animation;
+}
+
+function formatPx(value: number) {
+  return `${Math.round(value * 100) / 100}px`;
+}
diff --git a/examples/nextjs-ai-slideshow/app/page.tsx b/examples/nextjs-ai-slideshow/app/page.tsx
index 92c9d63d3e..1d46afbd84 100644
--- a/examples/nextjs-ai-slideshow/app/page.tsx
+++ b/examples/nextjs-ai-slideshow/app/page.tsx
@@ -1,26 +1,45 @@
 "use client";
 
 import { ClientSideSuspense, RoomProvider } from "@liveblocks/react/suspense";
+import { useRoom } from "@liveblocks/react/suspense";
 import { AvatarStack } from "@liveblocks/react-ui";
+import { getYjsProviderForRoom } from "@liveblocks/yjs";
 import {
   DownloadIcon,
   EyeIcon,
   Loader2Icon,
   MessageSquarePlusIcon,
+  Redo2Icon,
+  Undo2Icon,
 } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Loader } from "@/components/ai-elements/loader";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useExampleRoomId } from "@/hooks/use-example-room-id";
 import { Chat } from "./chat";
-import { CollaborativeEditor } from "./collaborative-editor";
+import {
+  CollaborativeEditor,
+  type EditorHistory,
+} from "./collaborative-editor";
 import { resolveProposal, type SlideProposal } from "./proposal-actions";
-import { SLIDE_HEIGHT, SLIDE_WIDTH } from "./slide-html";
+import { getSlideIds, getSlideText } from "./slide-doc";
+import { SLIDE_HEIGHT, SLIDE_WIDTH, STARTER_SLIDE_HTML } from "./slide-html";
 import { SlidePreview } from "./slide-preview";
+import { SlideSidebar } from "./slide-sidebar";
+import { useSlideUndo } from "./slide-undo";
+import { useSlides } from "./slides";
+import { matchUndoRedoShortcut } from "./visual-editor";
 
 type Panel = "slide" | "code";
 
+type DisplaySlide = {
+  id: string;
+  proposalHtml?: string;
+  isNewProposal?: boolean;
+  hasProposal?: boolean;
+};
+
 function waitForPaint() {
   return new Promise<void>((resolve) => {
     requestAnimationFrame(() => {
@@ -29,11 +48,37 @@ function waitForPaint() {
   });
 }
 
+function createOffscreenIframe(html: string) {
+  return new Promise<HTMLIFrameElement>((resolve) => {
+    const iframe = document.createElement("iframe");
+    iframe.addEventListener("load", () => resolve(iframe), { once: true });
+    iframe.setAttribute("sandbox", "allow-same-origin");
+    iframe.width = String(SLIDE_WIDTH);
+    iframe.height = String(SLIDE_HEIGHT);
+    iframe.style.position = "fixed";
+    iframe.style.left = "-10000px";
+    iframe.style.top = "0";
+    iframe.style.width = `${SLIDE_WIDTH}px`;
+    iframe.style.height = `${SLIDE_HEIGHT}px`;
+    iframe.style.border = "0";
+    document.body.appendChild(iframe);
+    iframe.srcdoc = html;
+  });
+}
+
 export default function Page() {
   const roomId = useExampleRoomId();
 
   return (
-    <RoomProvider id={roomId} initialPresence={{ promptingFeedId: null }}>
+    <RoomProvider
+      id={roomId}
+      initialPresence={{
+        promptingFeedId: null,
+        cursor: null,
+        cursorSlideId: null,
+        selection: null,
+      }}
+    >
       <ClientSideSuspense
         fallback={
           <div className="flex h-dvh items-center justify-center text-muted-foreground">
@@ -48,11 +93,15 @@ export default function Page() {
 }
 
 function SlideshowApp({ roomId }: { roomId: string }) {
+  const room = useRoom();
+  const { slideIds, addSlide, deleteSlide, moveSlide } = useSlides();
+  const { undo, redo, canUndo, canRedo } = useSlideUndo();
   const [panel, setPanel] = useState<Panel>("slide");
+  const [codeHistory, setCodeHistory] = useState<EditorHistory | null>(null);
   const [placingComment, setPlacingComment] = useState(false);
   const [exporting, setExporting] = useState(false);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
+  const [selectedSlideId, setSelectedSlideId] = useState<string | null>(null);
+  const previousSelectedIndex = useRef(0);
   // The proposal currently shown in the Slide tab instead of the shared
   // document. Local to this user; accept/reject resolves it for everyone.
   const [previewedProposal, setPreviewedProposal] =
@@ -61,6 +110,111 @@ function SlideshowApp({ roomId }: { roomId: string }) {
     "apply" | "reject" | null
   >(null);
 
+  // Mod-z / Mod-y on the Preview tab, for keystrokes landing OUTSIDE the
+  // slide iframe (the visual editor handles the ones inside it). Skips text
+  // fields so the chat/comment composers keep their native undo. CodeMirror
+  // handles its own keymap on the Code tab.
+  const undoRef = useRef({ undo, redo, active: false });
+  undoRef.current = {
+    undo,
+    redo,
+    active: panel === "slide" && previewedProposal === null,
+  };
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!undoRef.current.active) {
+        return;
+      }
+      const target = event.target;
+      if (
+        target instanceof HTMLElement &&
+        (target.isContentEditable ||
+          target.closest("input, textarea, [contenteditable]"))
+      ) {
+        return;
+      }
+      const action = matchUndoRedoShortcut(event);
+      if (!action) {
+        return;
+      }
+      event.preventDefault();
+      if (action === "undo") {
+        undoRef.current.undo();
+      } else {
+        undoRef.current.redo();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  const displaySlides = useMemo<DisplaySlide[]>(() => {
+    const proposalHtmlBySlideId = new Map<string, string>();
+    const newProposalHtml: string[] = [];
+
+    for (const proposal of previewedProposal?.proposals ?? []) {
+      if (proposal.slideId === "new") {
+        newProposalHtml.push(proposal.html);
+      } else {
+        proposalHtmlBySlideId.set(proposal.slideId, proposal.html);
+      }
+    }
+
+    return [
+      ...slideIds.map((id) => ({
+        id,
+        proposalHtml: proposalHtmlBySlideId.get(id),
+        hasProposal: proposalHtmlBySlideId.has(id),
+      })),
+      ...newProposalHtml.map((proposalHtml, index) => ({
+        id: `proposal-new-${index}`,
+        proposalHtml,
+        isNewProposal: true,
+        hasProposal: true,
+      })),
+    ];
+  }, [previewedProposal, slideIds]);
+  const displaySlideIds = useMemo(
+    () => displaySlides.map((slide) => slide.id),
+    [displaySlides]
+  );
+
+  const selectedIndex = selectedSlideId
+    ? displaySlideIds.indexOf(selectedSlideId)
+    : -1;
+  const fallbackIndex =
+    slideIds.length === 0
+      ? -1
+      : Math.min(previousSelectedIndex.current, slideIds.length - 1);
+  const slideId =
+    selectedIndex === -1 ? (slideIds[fallbackIndex] ?? null) : selectedSlideId;
+
+  useEffect(() => {
+    if (slideIds.length === 0) {
+      return;
+    }
+
+    if (selectedSlideId) {
+      const index = slideIds.indexOf(selectedSlideId);
+      if (index !== -1) {
+        previousSelectedIndex.current = index;
+        return;
+      }
+      if (displaySlideIds.includes(selectedSlideId)) {
+        return;
+      }
+    }
+
+    const nextIndex = Math.min(
+      previousSelectedIndex.current,
+      slideIds.length - 1
+    );
+    setSelectedSlideId(slideIds[nextIndex]);
+  }, [displaySlideIds, slideIds, selectedSlideId]);
+
   const previewProposal = useCallback((proposal: SlideProposal | null) => {
     setPreviewedProposal(proposal);
     if (proposal) {
@@ -69,6 +223,18 @@ function SlideshowApp({ roomId }: { roomId: string }) {
     }
   }, []);
 
+  // When applying a proposal creates new slides, switch this user to the last
+  // one. The server returns the created ids, but the Yjs update carrying them
+  // may arrive slightly later, so selection is deferred until the id shows up
+  // in the slide list.
+  const [pendingSlideId, setPendingSlideId] = useState<string | null>(null);
+  const handleProposalApplied = useCallback((newSlideIds: string[]) => {
+    const lastNewSlideId = newSlideIds.at(-1);
+    if (lastNewSlideId) {
+      setPendingSlideId(lastNewSlideId);
+    }
+  }, []);
+
   const resolvePreviewedProposal = useCallback(
     async (action: "apply" | "reject") => {
       if (!previewedProposal || resolvingProposal) {
@@ -76,13 +242,55 @@ function SlideshowApp({ roomId }: { roomId: string }) {
       }
       setResolvingProposal(action);
       try {
-        await resolveProposal(roomId, previewedProposal, action);
+        const { newSlideIds } = await resolveProposal(
+          roomId,
+          previewedProposal,
+          action
+        );
         setPreviewedProposal(null);
+        if (action === "apply") {
+          handleProposalApplied(newSlideIds);
+        }
       } finally {
         setResolvingProposal(null);
       }
     },
-    [previewedProposal, resolvingProposal, roomId]
+    [handleProposalApplied, previewedProposal, resolvingProposal, roomId]
+  );
+
+  const selectSlide = useCallback(
+    (id: string) => {
+      const index = slideIds.indexOf(id);
+      if (index !== -1) {
+        previousSelectedIndex.current = index;
+      }
+      setSelectedSlideId(id);
+    },
+    [slideIds]
+  );
+
+  useEffect(() => {
+    if (pendingSlideId && slideIds.includes(pendingSlideId)) {
+      selectSlide(pendingSlideId);
+      setPendingSlideId(null);
+    }
+  }, [pendingSlideId, selectSlide, slideIds]);
+
+  const addAndSelectSlide = useCallback(() => {
+    const id = addSlide();
+    previousSelectedIndex.current = slideIds.length;
+    setSelectedSlideId(id);
+  }, [addSlide, slideIds.length]);
+
+  const deleteAndSelectNearestSlide = useCallback(
+    (id: string) => {
+      const index = slideIds.indexOf(id);
+      if (index !== -1 && id === slideId) {
+        previousSelectedIndex.current = Math.min(index, slideIds.length - 2);
+      }
+      deleteSlide(id);
+    },
+    [deleteSlide, slideId, slideIds]
   );
 
   const exportPptx = useCallback(async () => {
@@ -92,67 +300,136 @@ function SlideshowApp({ roomId }: { roomId: string }) {
 
     setExporting(true);
     try {
-      if (panel !== "slide") {
-        setPanel("slide");
-        await waitForPaint();
-      }
-
-      const document = iframeRef.current?.contentDocument;
-      const element = document?.body ?? document?.documentElement;
-      if (!element) {
-        throw new Error("Slide preview is not ready yet.");
-      }
-
       const [{ toPng }, { default: PptxGenJS }] = await Promise.all([
         import("html-to-image"),
         import("pptxgenjs"),
       ]);
 
-      const dataUrl = await toPng(element, {
-        width: SLIDE_WIDTH,
-        height: SLIDE_HEIGHT,
-        pixelRatio: 10,
-        cacheBust: true,
-        style: {
-          width: `${SLIDE_WIDTH}px`,
-          height: `${SLIDE_HEIGHT}px`,
-          margin: "0",
-        },
-      });
+      const provider = getYjsProviderForRoom(room);
+      const ydoc = provider.getYDoc();
+      const exportedSlideIds = getSlideIds(ydoc);
+      if (exportedSlideIds.length === 0) {
+        throw new Error("No slides are ready to export yet.");
+      }
 
       const pptx = new PptxGenJS();
       pptx.defineLayout({ name: "LIVEBLOCKS_16_9", width: 10, height: 5.625 });
       pptx.layout = "LIVEBLOCKS_16_9";
-      const slide = pptx.addSlide();
-      slide.addImage({ data: dataUrl, x: 0, y: 0, w: 10, h: 5.625 });
-      await pptx.writeFile({ fileName: "slide.pptx" });
+
+      for (const id of exportedSlideIds) {
+        const html = getSlideText(ydoc, id).toString() || STARTER_SLIDE_HTML;
+        const iframe = await createOffscreenIframe(html);
+
+        try {
+          await waitForPaint();
+          const document = iframe.contentDocument;
+          const element = document?.body ?? document?.documentElement;
+          if (!element) {
+            throw new Error("Slide preview is not ready yet.");
+          }
+
+          const dataUrl = await toPng(element, {
+            width: SLIDE_WIDTH,
+            height: SLIDE_HEIGHT,
+            pixelRatio: 10,
+            cacheBust: true,
+            style: {
+              width: `${SLIDE_WIDTH}px`,
+              height: `${SLIDE_HEIGHT}px`,
+              margin: "0",
+            },
+          });
+
+          const slide = pptx.addSlide();
+          slide.addImage({ data: dataUrl, x: 0, y: 0, w: 10, h: 5.625 });
+        } finally {
+          iframe.remove();
+        }
+      }
+
+      await pptx.writeFile({ fileName: "slides.pptx" });
     } finally {
       setExporting(false);
     }
-  }, [exporting, panel]);
+  }, [exporting, room]);
+
+  const selectedDisplaySlide = displaySlides.find(
+    (slide) => slide.id === slideId
+  );
+  const selectedProposalHtml = selectedDisplaySlide?.proposalHtml;
+  const selectedSlideIsReal = slideId ? slideIds.includes(slideId) : false;
+
+  if (!slideId) {
+    return (
+      <div className="flex h-dvh w-full items-center justify-center bg-neutral-50 text-muted-foreground">
+        <Loader size={20} />
+      </div>
+    );
+  }
 
   return (
     <div className="flex h-dvh w-full gap-2.5 overflow-hidden bg-neutral-50 p-2.5">
+      <SlideSidebar
+        slideIds={slideIds}
+        displaySlides={displaySlides}
+        selectedSlideId={slideId}
+        onSelectSlide={selectSlide}
+        onAddSlide={addAndSelectSlide}
+        onDeleteSlide={deleteAndSelectNearestSlide}
+        onMoveSlide={moveSlide}
+      />
+
       <main className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-lg bg-white shadow ring-1 ring-neutral-950/5">
-        <header className="flex items-center justify-between border-b border-neutral-950/5 px-2.5 py-2">
-          <Tabs
-            value={panel}
-            onValueChange={(value) => {
-              if (value === "code") {
-                setPlacingComment(false);
-                setPanel("code");
-              } else {
-                setPanel("slide");
-              }
-            }}
-          >
-            <TabsList>
-              <TabsTrigger value="slide">Preview</TabsTrigger>
-              <TabsTrigger value="code">Code</TabsTrigger>
-            </TabsList>
-          </Tabs>
+        <header className="flex flex-wrap items-center justify-between gap-2 border-b border-neutral-950/5 px-2.5 py-2">
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            <Tabs
+              value={panel}
+              onValueChange={(value) => {
+                if (value === "code") {
+                  setPlacingComment(false);
+                  setPanel("code");
+                } else {
+                  setPanel("slide");
+                }
+              }}
+            >
+              <TabsList>
+                <TabsTrigger value="slide">Preview</TabsTrigger>
+                <TabsTrigger value="code">Code</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <div className="flex items-center">
+              {/* On the Preview tab these drive the visual-edit history; on
+                  the Code tab they drive the editor's own history, like
+                  Mod-z. */}
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={panel === "code" ? codeHistory?.undo : undo}
+                disabled={
+                  previewedProposal !== null ||
+                  (panel === "code" ? !codeHistory?.canUndo : !canUndo)
+                }
+                aria-label="Undo"
+              >
+                <Undo2Icon className="size-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={panel === "code" ? codeHistory?.redo : redo}
+                disabled={
+                  previewedProposal !== null ||
+                  (panel === "code" ? !codeHistory?.canRedo : !canRedo)
+                }
+                aria-label="Redo"
+              >
+                <Redo2Icon className="size-4" />
+              </Button>
+            </div>
+          </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center justify-end gap-2">
             <AvatarStack size={28} />
             {panel === "slide" ? (
               <Button
@@ -188,10 +465,12 @@ function SlideshowApp({ roomId }: { roomId: string }) {
             style={{ display: panel === "slide" ? "block" : "none" }}
           >
             <SlidePreview
-              iframeRef={iframeRef}
+              slideId={slideId}
               placingComment={placingComment}
               onPlacingDone={() => setPlacingComment(false)}
               proposal={previewedProposal}
+              proposalHtml={selectedProposalHtml}
+              isNewProposal={!!selectedDisplaySlide?.isNewProposal}
               resolvingProposal={resolvingProposal}
               onResolveProposal={resolvePreviewedProposal}
             />
@@ -200,14 +479,22 @@ function SlideshowApp({ roomId }: { roomId: string }) {
             className="absolute inset-0"
             style={{ display: panel === "code" ? "block" : "none" }}
           >
-            {previewedProposal ? (
+            {previewedProposal && selectedProposalHtml !== undefined ? (
               <ProposalCodePreview
-                proposal={previewedProposal}
+                html={selectedProposalHtml}
                 resolvingProposal={resolvingProposal}
                 onResolveProposal={resolvePreviewedProposal}
               />
+            ) : selectedSlideIsReal ? (
+              <CollaborativeEditor
+                key={slideId}
+                slideId={slideId}
+                onHistoryChange={setCodeHistory}
+              />
             ) : (
-              <CollaborativeEditor />
+              <div className="flex h-full items-center justify-center text-muted-foreground">
+                <Loader size={20} />
+              </div>
             )}
           </div>
         </div>
@@ -216,8 +503,11 @@ function SlideshowApp({ roomId }: { roomId: string }) {
       <aside className="flex w-[380px] shrink-0 overflow-hidden rounded-lg bg-white shadow ring-1 ring-neutral-950/5">
         <Chat
           roomId={roomId}
+          slideId={slideId}
+          slideIds={slideIds}
           previewedProposal={previewedProposal}
           onPreviewProposal={previewProposal}
+          onProposalApplied={handleProposalApplied}
         />
       </aside>
     </div>
@@ -225,19 +515,19 @@ function SlideshowApp({ roomId }: { roomId: string }) {
 }
 
 function ProposalCodePreview({
-  proposal,
+  html,
   resolvingProposal,
   onResolveProposal,
 }: {
-  proposal: SlideProposal;
+  html: string;
   resolvingProposal: "apply" | "reject" | null;
   onResolveProposal: (action: "apply" | "reject") => void;
 }) {
   return (
     <div className="relative h-full min-h-0 bg-white">
-      <div className="absolute left-1/2 top-3 z-40 flex -translate-x-1/2 items-center gap-3 rounded-full border border-rose-200 bg-white py-1.5 pl-4 pr-1.5 shadow-md">
+      <div className="absolute left-1/2 top-3 z-40 flex -translate-x-1/2 items-center gap-3 rounded-full border border-primary/30 bg-white py-1.5 pl-4 pr-1.5 shadow-md">
         <span className="flex items-center gap-1.5 whitespace-nowrap text-sm font-medium text-neutral-700">
-          <EyeIcon className="size-4 text-rose-600" />
+          <EyeIcon className="size-4 text-primary" />
           Previewing proposed code
         </span>
         <div className="flex items-center gap-1">
@@ -255,7 +545,7 @@ function ProposalCodePreview({
           </Button>
           <Button
             size="sm"
-            className="rounded-full bg-rose-600 text-white hover:bg-rose-700"
+            className="rounded-full"
             onClick={() => onResolveProposal("apply")}
             disabled={resolvingProposal !== null}
           >
@@ -268,7 +558,7 @@ function ProposalCodePreview({
       </div>
 
       <pre className="h-full overflow-auto bg-white px-4 pb-4 pt-16 font-mono text-[13px] leading-5 text-neutral-900">
-        <code>{proposal.html}</code>
+        <code>{html}</code>
       </pre>
     </div>
   );
diff --git a/examples/nextjs-ai-slideshow/app/proposal-actions.ts b/examples/nextjs-ai-slideshow/app/proposal-actions.ts
index 9181a641ca..68f58d1ca9 100644
--- a/examples/nextjs-ai-slideshow/app/proposal-actions.ts
+++ b/examples/nextjs-ai-slideshow/app/proposal-actions.ts
@@ -4,15 +4,18 @@
 export type SlideProposal = {
   feedId: string;
   messageId: string;
-  html: string;
+  proposals: { slideId: string; html: string }[];
 };
 
+// Resolves to the ids of slides the apply created (empty when rejecting or
+// when the proposal only edited existing slides), so the caller can switch
+// the user to the newly created slide.
 export async function resolveProposal(
   roomId: string,
   proposal: SlideProposal,
   action: "apply" | "reject"
-) {
-  await fetch("/api/apply-slide", {
+): Promise<{ newSlideIds: string[] }> {
+  const response = await fetch("/api/apply-slide", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
@@ -20,7 +23,15 @@ export async function resolveProposal(
       roomId,
       feedId: proposal.feedId,
       messageId: proposal.messageId,
-      html: action === "apply" ? proposal.html : undefined,
     }),
   });
+
+  if (!response.ok) {
+    return { newSlideIds: [] };
+  }
+
+  const data = (await response.json().catch(() => null)) as {
+    newSlideIds?: string[];
+  } | null;
+  return { newSlideIds: data?.newSlideIds ?? [] };
 }
diff --git a/examples/nextjs-ai-slideshow/app/providers.tsx b/examples/nextjs-ai-slideshow/app/providers.tsx
index e24ae49634..317e5926fb 100644
--- a/examples/nextjs-ai-slideshow/app/providers.tsx
+++ b/examples/nextjs-ai-slideshow/app/providers.tsx
@@ -23,6 +23,7 @@ function authWithRandomUser(endpoint: string) {
 export function Providers({ children }: PropsWithChildren) {
   return (
     <LiveblocksProvider
+      throttle={16}
       authEndpoint={authWithRandomUser("/api/liveblocks-auth")}
       // Resolve user info (name, avatar) from their id. Used by AvatarStack and
       // any other presence UI to show who's currently in the room.
@@ -36,6 +37,18 @@ export function Providers({ children }: PropsWithChildren) {
         }
         return await response.json();
       }}
+      // Find a list of users that match the current search term.
+      resolveMentionSuggestions={async ({ text }) => {
+        const response = await fetch(
+          `/api/users/search?text=${encodeURIComponent(text)}`
+        );
+
+        if (!response.ok) {
+          throw new Error("Problem resolving mention suggestions");
+        }
+
+        return await response.json();
+      }}
     >
       {children}
     </LiveblocksProvider>
diff --git a/examples/nextjs-ai-slideshow/app/slide-doc.ts b/examples/nextjs-ai-slideshow/app/slide-doc.ts
new file mode 100644
index 0000000000..70d2b74182
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/slide-doc.ts
@@ -0,0 +1,26 @@
+import * as Y from "yjs";
+
+export const SLIDES_ARRAY_KEY = "slides";
+export const INITIAL_SLIDE_ID = "initial";
+
+export function slideTextKey(id: string): string {
+  return `slide:${id}`;
+}
+
+export function getSlideIds(ydoc: Y.Doc): string[] {
+  const seen = new Set<string>();
+  const slideIds: string[] = [];
+
+  for (const id of ydoc.getArray<string>(SLIDES_ARRAY_KEY).toArray()) {
+    if (!seen.has(id)) {
+      seen.add(id);
+      slideIds.push(id);
+    }
+  }
+
+  return slideIds;
+}
+
+export function getSlideText(ydoc: Y.Doc, id: string): Y.Text {
+  return ydoc.getText(slideTextKey(id));
+}
diff --git a/examples/nextjs-ai-slideshow/app/slide-html.ts b/examples/nextjs-ai-slideshow/app/slide-html.ts
index 4f028ea40f..9980f4c148 100644
--- a/examples/nextjs-ai-slideshow/app/slide-html.ts
+++ b/examples/nextjs-ai-slideshow/app/slide-html.ts
@@ -1,11 +1,30 @@
 export const SLIDE_WIDTH = 1280;
 export const SLIDE_HEIGHT = 720;
 
-export const STARTER_SLIDE_HTML = `<!doctype html>
+const STARTER_BODY = `
+  <section class="card">
+    <div class="eyebrow">Collaborative editing</div>
+    <h1>Move elements, edit code, chat to AI.</h1>
+    <p>Each user’s live presence is shown as they drag elements, edit code, and leave comments for others. Double-click on text to make changes.</p>
+  </section>
+`;
+
+const EMPTY_BODY = `
+  <section class="card">
+    <div class="eyebrow">Collaborative editing</div>
+    <h1>Get started by chatting to AI</h1>
+    <p>It’ll generate initial designs for you, and you can take it from there. Or dive into the code if you’d prefer.</p>
+  </section>
+`;
+
+const CREATE_BODY = (slideContent: string) => `<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=1280, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
     <style>
       * { box-sizing: border-box; }
       html, body {
@@ -13,7 +32,7 @@ export const STARTER_SLIDE_HTML = `<!doctype html>
         width: 1280px;
         height: 720px;
         overflow: hidden;
-        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font-family: "Helvetica Neue", Helvetica, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         color: #111827;
         background: #fff7ed;
       }
@@ -25,8 +44,8 @@ export const STARTER_SLIDE_HTML = `<!doctype html>
         height: 720px;
         padding: 80px;
         background:
-          radial-gradient(circle at 18% 18%, rgba(244, 63, 94, 0.26), transparent 28%),
-          radial-gradient(circle at 82% 72%, rgba(251, 146, 60, 0.3), transparent 30%),
+          radial-gradient(circle at 18% 18%, rgba(253, 81, 8, 0.22), transparent 28%),
+          radial-gradient(circle at 82% 72%, rgba(255, 138, 76, 0.28), transparent 30%),
           linear-gradient(135deg, #fff7ed 0%, #fff1f2 52%, #ffffff 100%);
       }
       .card {
@@ -39,8 +58,8 @@ export const STARTER_SLIDE_HTML = `<!doctype html>
         text-align: center;
       }
       .eyebrow {
-        margin: 0 0 20px;
-        color: #e11d48;
+        margin: 0 0 30px;
+        color: #fd5108;
         font-size: 22px;
         font-weight: 800;
         letter-spacing: 0.18em;
@@ -48,26 +67,27 @@ export const STARTER_SLIDE_HTML = `<!doctype html>
       }
       h1 {
         margin: 0;
-        font-size: 82px;
+        font-size: 78px;
         line-height: 0.98;
-        letter-spacing: -0.06em;
+        letter-spacing: -0.01em;
+        font-family: "Merriweather", Georgia, serif;
+        font-weight: 600;
       }
       p {
         max-width: 680px;
         margin: 28px auto 0;
         color: #475569;
-        font-size: 30px;
+        font-size: 28px;
         line-height: 1.35;
       }
     </style>
   </head>
   <body>
     <main class="slide">
-      <section class="card">
-        <p class="eyebrow">Liveblocks AI Slideshow</p>
-        <h1>Design together, present faster.</h1>
-        <p>Prompt the AI, apply its slide HTML into a shared Yjs document, and leave multiplayer comments right on the preview.</p>
-      </section>
+      ${slideContent}
     </main>
   </body>
 </html>`;
+
+export const STARTER_SLIDE_HTML = CREATE_BODY(STARTER_BODY);
+export const EMPTY_SLIDE_HTML = CREATE_BODY(EMPTY_BODY);
diff --git a/examples/nextjs-ai-slideshow/app/slide-preview.tsx b/examples/nextjs-ai-slideshow/app/slide-preview.tsx
index d32b66f7ae..e1d779b011 100644
--- a/examples/nextjs-ai-slideshow/app/slide-preview.tsx
+++ b/examples/nextjs-ai-slideshow/app/slide-preview.tsx
@@ -12,21 +12,38 @@ import {
 } from "@dnd-kit/core";
 import {
   useEditThreadMetadata,
+  useOther,
+  useOthers,
   useSelf,
   useThreads,
+  useUpdateMyPresence,
 } from "@liveblocks/react/suspense";
 import {
   CommentPin,
+  Cursor,
+  Cursors,
+  type CursorsCursorProps,
   FloatingComposer,
   FloatingThread,
 } from "@liveblocks/react-ui";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import type { MouseEvent, ReactNode, RefObject } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { MouseEvent, ReactNode } from "react";
 import { EyeIcon, Loader2Icon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { getElementByPath } from "./html-source-map";
+import { patchIframeHtml } from "./iframe-html";
 import type { SlideProposal } from "./proposal-actions";
 import { SLIDE_HEIGHT, SLIDE_WIDTH } from "./slide-html";
-import { useSlideHtml } from "./use-slide-html";
+import { useSlideUndo } from "./slide-undo";
+import { useSlideHtml } from "./slides";
+import { useVisualEditor } from "./visual-editor";
 
 type Coords = { x: number; y: number };
 
@@ -80,31 +97,145 @@ function useMaxZIndex(threads: readonly ThreadData[]) {
 }
 
 export function SlidePreview({
-  iframeRef,
+  slideId,
   placingComment,
   onPlacingDone,
   proposal,
+  proposalHtml,
+  isNewProposal = false,
   resolvingProposal,
   onResolveProposal,
 }: {
-  iframeRef: RefObject<HTMLIFrameElement | null>;
+  slideId: string;
   placingComment: boolean;
   onPlacingDone: () => void;
   proposal: SlideProposal | null;
+  proposalHtml?: string;
+  isNewProposal?: boolean;
   resolvingProposal: "apply" | "reject" | null;
   onResolveProposal: (action: "apply" | "reject") => void;
 }) {
-  const documentHtml = useSlideHtml();
-  // While previewing a proposal, the slide shows the proposed HTML instead of
-  // the shared document, and comment pins are hidden (they belong to the
-  // shared slide, not to an unapplied proposal).
-  const html = proposal ? proposal.html : documentHtml;
+  const documentHtml = useSlideHtml(slideId, !isNewProposal);
+  // While previewing, pins stay hidden even on slides unaffected by the proposal
+  // set because accept/reject resolves the whole set.
+  const html = proposalHtml ?? documentHtml;
+  const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null);
+  const [visualGestureActive, setVisualGestureActive] = useState(false);
+  const [expectedVisualHtml, setExpectedVisualHtml] = useState<string | null>(
+    null
+  );
+  const initialSrcDocRef = useRef({ slideId, html });
+  const appliedHtmlRef = useRef(html);
+  const latestHtmlRef = useRef(html);
+  const pendingHtmlRef = useRef<string | null>(null);
+  const expectedBaseHtmlRef = useRef<string | null>(null);
+  const updateMyPresence = useUpdateMyPresence();
+  const { undo, redo, stopCapturing } = useSlideUndo();
   const { threads } = useThreads();
+  const slideThreads = useMemo(
+    () => threads.filter((thread) => thread.metadata.slideId === slideId),
+    [slideId, threads]
+  );
   const editThreadMetadata = useEditThreadMetadata();
-  const maxZIndex = useMaxZIndex(threads);
+  const maxZIndex = useMaxZIndex(slideThreads);
   const { ref: wrapperRef, size: wrapperSize } = useElementSize();
   const [placedCoords, setPlacedCoords] = useState<Coords | null>(null);
 
+  if (initialSrcDocRef.current.slideId !== slideId) {
+    initialSrcDocRef.current = { slideId, html };
+    appliedHtmlRef.current = html;
+    pendingHtmlRef.current = null;
+    expectedBaseHtmlRef.current = null;
+  }
+
+  useEffect(() => {
+    latestHtmlRef.current = html;
+  }, [html]);
+
+  const handleVisualCommit = useCallback((expectedHtml: string) => {
+    expectedBaseHtmlRef.current = latestHtmlRef.current;
+    setExpectedVisualHtml(expectedHtml);
+  }, []);
+
+  const handleCursorMove = useCallback(
+    (cursor: Coords | null) => {
+      updateMyPresence({
+        cursor,
+        cursorSlideId: cursor ? slideId : null,
+      });
+    },
+    [slideId, updateMyPresence]
+  );
+
+  const handleSelectionChange = useCallback(
+    (path: number[] | null) => {
+      updateMyPresence({
+        selection: path ? { slideId, path } : null,
+      });
+    },
+    [slideId, updateMyPresence]
+  );
+
+  useVisualEditor({
+    iframe: proposal ? null : iframe,
+    slideId,
+    onGestureActiveChange: setVisualGestureActive,
+    onCommit: handleVisualCommit,
+    onCursorMove: handleCursorMove,
+    onSelectionChange: handleSelectionChange,
+    stopCapturing,
+    onUndo: undo,
+    onRedo: redo,
+  });
+
+  useEffect(() => {
+    return () => {
+      updateMyPresence({
+        cursor: null,
+        cursorSlideId: null,
+        selection: null,
+      });
+    };
+  }, [slideId, updateMyPresence]);
+
+  useEffect(() => {
+    if (proposal) {
+      updateMyPresence({
+        cursor: null,
+        cursorSlideId: null,
+        selection: null,
+      });
+    }
+  }, [proposal, updateMyPresence]);
+
+  useEffect(() => {
+    if (!iframe || html === appliedHtmlRef.current) {
+      return;
+    }
+
+    if (visualGestureActive) {
+      pendingHtmlRef.current = html;
+      return;
+    }
+
+    if (expectedVisualHtml !== null && html === expectedVisualHtml) {
+      setExpectedVisualHtml(null);
+      expectedBaseHtmlRef.current = null;
+      appliedHtmlRef.current = html;
+      return;
+    }
+
+    if (expectedVisualHtml !== null && html === expectedBaseHtmlRef.current) {
+      return;
+    }
+
+    patchIframeHtml(iframe, html);
+    pendingHtmlRef.current = null;
+    appliedHtmlRef.current = html;
+    setExpectedVisualHtml(null);
+    expectedBaseHtmlRef.current = null;
+  }, [expectedVisualHtml, html, iframe, visualGestureActive]);
+
   // Leave room around the slide so the shadow and proposal ring are visible
   // even when the slide would otherwise fit exactly edge-to-edge.
   const availableWidth = Math.max(1, wrapperSize.width - PREVIEW_INSET * 2);
@@ -114,6 +245,14 @@ export function SlidePreview({
     availableHeight / SLIDE_HEIGHT
   );
   const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+  const cursorComponents = useMemo(
+    () => ({
+      Cursor: function SlideCursorComponent(props: CursorsCursorProps) {
+        return <SlideCursor {...props} slideId={slideId} scale={safeScale} />;
+      },
+    }),
+    [safeScale, slideId]
+  );
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -131,7 +270,7 @@ export function SlidePreview({
 
   const handleDragEnd = useCallback(
     ({ active, delta }: DragEndEvent) => {
-      const thread = threads.find((item) => item.id === String(active.id));
+      const thread = slideThreads.find((item) => item.id === String(active.id));
       if (!thread) {
         return;
       }
@@ -149,10 +288,11 @@ export function SlidePreview({
           x: nextX,
           y: nextY,
           zIndex: maxZIndex + 1,
+          slideId,
         },
       });
     },
-    [editThreadMetadata, maxZIndex, safeScale, threads]
+    [editThreadMetadata, maxZIndex, safeScale, slideId, slideThreads]
   );
 
   return (
@@ -160,10 +300,10 @@ export function SlidePreview({
       ref={wrapperRef}
       className="relative h-full w-full overflow-hidden bg-neutral-50"
     >
-      {proposal ? (
-        <div className="absolute left-1/2 top-3 z-40 flex -translate-x-1/2 items-center gap-3 rounded-full border border-rose-200 bg-white py-1.5 pl-4 pr-1.5 shadow-md">
+      {proposal && proposalHtml !== undefined ? (
+        <div className="absolute left-1/2 top-3 z-40 flex -translate-x-1/2 items-center gap-3 rounded-full border border-primary/10 bg-white py-1.5 pl-4 pr-1.5 shadow-md">
           <span className="flex items-center gap-1.5 whitespace-nowrap text-sm font-medium text-neutral-700">
-            <EyeIcon className="size-4 text-rose-600" />
+            <EyeIcon className="size-4 text-primary" />
             Previewing proposed slide
           </span>
           <div className="flex items-center gap-1">
@@ -181,7 +321,7 @@ export function SlidePreview({
             </Button>
             <Button
               size="sm"
-              className="bg-rose-600 text-white hover:bg-rose-700 rounded-full"
+              className="rounded-full"
               onClick={() => onResolveProposal("apply")}
               disabled={resolvingProposal !== null}
             >
@@ -195,7 +335,9 @@ export function SlidePreview({
       ) : null}
       <div
         className={`absolute left-1/2 top-1/2 overflow-visible bg-white shadow-2xl ${
-          proposal ? "ring-2 ring-rose-400" : "ring-1 ring-neutral-950/10"
+          proposal && proposalHtml !== undefined
+            ? "ring-2 ring-primary/60"
+            : "ring-1 ring-neutral-950/10"
         }`}
         style={{
           width: SLIDE_WIDTH,
@@ -205,19 +347,44 @@ export function SlidePreview({
         }}
       >
         <iframe
-          ref={iframeRef}
+          key={slideId}
+          ref={setIframe}
           title="Slide preview"
           width={SLIDE_WIDTH}
           height={SLIDE_HEIGHT}
-          srcDoc={html}
+          srcDoc={initialSrcDocRef.current.html}
           sandbox="allow-same-origin"
-          className="absolute inset-0 h-full w-full border-0 bg-white pointer-events-none"
+          className={cn(
+            "absolute inset-0 h-full w-full border-0 bg-white",
+            proposal ? "pointer-events-none" : "pointer-events-auto"
+          )}
         />
 
+        {!proposal ? (
+          <>
+            {/* `Cursors` must not be positioned absolute itself: its own
+                `.lb-cursors` class sets `position: relative`, and it measures
+                its OWN size to scale the normalized cursor coordinates — so
+                it needs a full-size wrapper instead. */}
+            <div className="pointer-events-none absolute inset-0 z-10">
+              <Cursors
+                className="h-full w-full"
+                components={cursorComponents}
+              />
+            </div>
+
+            <RemoteSelections
+              iframe={iframe}
+              slideId={slideId}
+              scale={safeScale}
+            />
+          </>
+        ) : null}
+
         {proposal ? null : (
-          <div className="absolute inset-0 isolate">
+          <div className="pointer-events-none absolute inset-0 z-20 isolate">
             <DndContext onDragEnd={handleDragEnd} sensors={sensors}>
-              {threads.map((thread) => (
+              {slideThreads.map((thread) => (
                 <DraggableSlideThread
                   key={thread.id}
                   thread={thread}
@@ -257,6 +424,8 @@ export function SlidePreview({
           <ThreadComposer
             coords={placedCoords}
             scale={safeScale}
+            slideId={slideId}
+            maxZIndex={maxZIndex}
             onSubmit={resetPlacement}
           />
         ) : null}
@@ -265,6 +434,204 @@ export function SlidePreview({
   );
 }
 
+type CursorInfo = {
+  cursorSlideId: string | null;
+  name: string;
+  color: string;
+};
+
+type RemoteSelectionRect = {
+  connectionId: number;
+  name: string;
+  color: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+function SlideCursor({
+  connectionId,
+  slideId,
+  scale,
+}: CursorsCursorProps & {
+  slideId: string;
+  scale: number;
+}) {
+  const info = useOther(
+    connectionId,
+    (other): CursorInfo => ({
+      cursorSlideId: other.presence.cursorSlideId,
+      name: other.info.name,
+      color: other.info.color,
+    }),
+    cursorInfoEqual
+  );
+
+  if (info.cursorSlideId !== slideId) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        transform: `scale(${1 / scale})`,
+        transformOrigin: "top left",
+      }}
+    >
+      <Cursor color={info.color} label={info.name} />
+    </div>
+  );
+}
+
+function cursorInfoEqual(left: CursorInfo, right: CursorInfo): boolean {
+  return (
+    left.cursorSlideId === right.cursorSlideId &&
+    left.name === right.name &&
+    left.color === right.color
+  );
+}
+
+function RemoteSelections({
+  iframe,
+  slideId,
+  scale,
+}: {
+  iframe: HTMLIFrameElement | null;
+  slideId: string;
+  scale: number;
+}) {
+  const others = useOthers();
+  const [rects, setRects] = useState<RemoteSelectionRect[]>([]);
+  const visibleSelections = useMemo(
+    () =>
+      others.filter((other) => other.presence.selection?.slideId === slideId),
+    [others, slideId]
+  );
+
+  const recomputeRects = useCallback(() => {
+    const document = iframe?.contentDocument;
+    const body = document?.body;
+    if (!document || !body || visibleSelections.length === 0) {
+      setRects([]);
+      return;
+    }
+
+    const nextRects: RemoteSelectionRect[] = [];
+    for (const other of visibleSelections) {
+      const selection = other.presence.selection;
+      if (!selection || selection.slideId !== slideId) {
+        continue;
+      }
+
+      const element = getElementByPath(body, selection.path);
+      if (!element) {
+        continue;
+      }
+
+      const rect = element.getBoundingClientRect();
+      nextRects.push({
+        connectionId: other.connectionId,
+        name: other.info.name,
+        color: other.info.color,
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+      });
+    }
+
+    setRects((previousRects) =>
+      remoteSelectionRectsEqual(previousRects, nextRects)
+        ? previousRects
+        : nextRects
+    );
+  }, [iframe, slideId, visibleSelections]);
+
+  useEffect(() => {
+    recomputeRects();
+    if (!iframe) {
+      return;
+    }
+
+    iframe.addEventListener("load", recomputeRects);
+    return () => {
+      iframe.removeEventListener("load", recomputeRects);
+    };
+  }, [iframe, recomputeRects]);
+
+  useEffect(() => {
+    if (visibleSelections.length === 0) {
+      setRects([]);
+      return;
+    }
+
+    let frameId: number;
+    const update = () => {
+      recomputeRects();
+      frameId = window.requestAnimationFrame(update);
+    };
+
+    update();
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [recomputeRects, visibleSelections.length]);
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-10">
+      {rects.map((rect) => (
+        <div
+          key={rect.connectionId}
+          className="absolute"
+          style={{
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height,
+            outline: `2px solid ${rect.color}`,
+            outlineOffset: 2,
+          }}
+        >
+          <div
+            className="absolute -left-1 -top-1 rounded-t-sm px-1.5 py-0.5 pb-0 text-xs font-medium text-white"
+            style={{
+              backgroundColor: rect.color,
+              transform: `translateY(-100%) scale(${1 / scale})`,
+              transformOrigin: "bottom left",
+            }}
+          >
+            {rect.name}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function remoteSelectionRectsEqual(
+  left: RemoteSelectionRect[],
+  right: RemoteSelectionRect[]
+) {
+  if (left.length !== right.length) {
+    return false;
+  }
+
+  return left.every((leftRect, index) => {
+    const rightRect = right[index];
+    return (
+      rightRect !== undefined &&
+      leftRect.connectionId === rightRect.connectionId &&
+      leftRect.name === rightRect.name &&
+      leftRect.color === rightRect.color &&
+      Math.abs(leftRect.x - rightRect.x) < 0.1 &&
+      Math.abs(leftRect.y - rightRect.y) < 0.1 &&
+      Math.abs(leftRect.width - rightRect.width) < 0.1 &&
+      Math.abs(leftRect.height - rightRect.height) < 0.1
+    );
+  });
+}
+
 function DraggableSlideThread({
   thread,
   maxZIndex,
@@ -297,7 +664,7 @@ function DraggableSlideThread({
     >
       <div
         ref={setNodeRef}
-        className="absolute"
+        className="pointer-events-auto absolute"
         style={{
           left: `${thread.metadata.x}%`,
           top: `${thread.metadata.y}%`,
@@ -321,20 +688,27 @@ function DraggableSlideThread({
 function ThreadComposer({
   coords,
   scale,
+  slideId,
+  maxZIndex,
   onSubmit,
 }: {
   coords: Coords;
   scale: number;
+  slideId: string;
+  maxZIndex: number;
   onSubmit: () => void;
 }) {
   const creatorId = useSelf((me) => me.id);
-  const { threads } = useThreads();
-  const maxZIndex = useMaxZIndex(threads);
 
   return (
     <FloatingComposer
       defaultOpen={true}
-      metadata={{ x: coords.x, y: coords.y, zIndex: maxZIndex + 1 }}
+      metadata={{
+        x: coords.x,
+        y: coords.y,
+        zIndex: maxZIndex + 1,
+        slideId,
+      }}
       onComposerSubmit={onSubmit}
     >
       <div
diff --git a/examples/nextjs-ai-slideshow/app/slide-sidebar.tsx b/examples/nextjs-ai-slideshow/app/slide-sidebar.tsx
new file mode 100644
index 0000000000..dff1870155
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/slide-sidebar.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { PlusIcon, XIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { patchIframeHtml } from "./iframe-html";
+import { SLIDE_HEIGHT, SLIDE_WIDTH } from "./slide-html";
+import { useSlideHtml } from "./slides";
+
+const THUMBNAIL_WIDTH = 144;
+const THUMBNAIL_HEIGHT = 81;
+const THUMBNAIL_SCALE = THUMBNAIL_WIDTH / SLIDE_WIDTH;
+
+type DisplaySlide = {
+  id: string;
+  proposalHtml?: string;
+  isNewProposal?: boolean;
+  hasProposal?: boolean;
+};
+
+export function SlideSidebar({
+  slideIds,
+  displaySlides,
+  selectedSlideId,
+  onSelectSlide,
+  onAddSlide,
+  onDeleteSlide,
+  onMoveSlide,
+}: {
+  slideIds: string[];
+  displaySlides: DisplaySlide[];
+  selectedSlideId: string;
+  onSelectSlide: (id: string) => void;
+  onAddSlide: () => void;
+  onDeleteSlide: (id: string) => void;
+  onMoveSlide: (fromIndex: number, toIndex: number) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 },
+    })
+  );
+
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const fromIndex = slideIds.indexOf(String(active.id));
+    const toIndex = slideIds.indexOf(String(over.id));
+    onMoveSlide(fromIndex, toIndex);
+  };
+
+  return (
+    <aside className="flex w-48 shrink-0 flex-col overflow-hidden rounded-lg bg-white shadow ring-1 ring-neutral-950/5">
+      <div className="border-b border-neutral-950/5 px-3 py-2">
+        <h2 className="text-sm font-medium text-neutral-900">Slides</h2>
+      </div>
+
+      <DndContext
+        collisionDetection={closestCenter}
+        sensors={sensors}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={slideIds}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="min-h-0 flex-1 space-y-2 overflow-auto p-3">
+            {displaySlides.map((slide, index) =>
+              slide.isNewProposal ? (
+                <StaticSlideThumbnail
+                  key={slide.id}
+                  index={index}
+                  html={slide.proposalHtml ?? ""}
+                  selected={slide.id === selectedSlideId}
+                  hasProposal={!!slide.hasProposal}
+                  onSelect={() => onSelectSlide(slide.id)}
+                />
+              ) : (
+                <SortableSlideThumbnail
+                  key={slide.id}
+                  id={slide.id}
+                  index={index}
+                  htmlOverride={slide.proposalHtml}
+                  selected={slide.id === selectedSlideId}
+                  canDelete={slideIds.length > 1}
+                  hasProposal={!!slide.hasProposal}
+                  onSelect={() => onSelectSlide(slide.id)}
+                  onDelete={() => onDeleteSlide(slide.id)}
+                />
+              )
+            )}
+          </div>
+        </SortableContext>
+      </DndContext>
+
+      <div className="border-t border-neutral-950/5 p-3">
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full"
+          onClick={onAddSlide}
+        >
+          <PlusIcon className="size-4" />
+          Add slide
+        </Button>
+      </div>
+    </aside>
+  );
+}
+
+function SortableSlideThumbnail({
+  id,
+  index,
+  htmlOverride,
+  selected,
+  canDelete,
+  hasProposal,
+  onSelect,
+  onDelete,
+}: {
+  id: string;
+  index: number;
+  htmlOverride?: string;
+  selected: boolean;
+  canDelete: boolean;
+  hasProposal: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+}) {
+  const sharedHtml = useSlideHtml(id);
+  const html = htmlOverride ?? sharedHtml;
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      className={cn("group relative", isDragging && "z-10 opacity-60")}
+    >
+      <button
+        type="button"
+        className={cn(
+          "block w-full rounded-lg border border-neutral-950/10 bg-white p-2 text-left shadow-xs transition hover:border-neutral-950/20",
+          selected && "border-primary/30 ring-2 ring-primary/60"
+        )}
+        onClick={onSelect}
+        {...attributes}
+        {...listeners}
+      >
+        <ThumbnailFrame
+          title={`Slide ${index + 1} thumbnail`}
+          html={html}
+          hasProposal={hasProposal}
+        />
+        <span className="mt-2 block text-xs font-medium text-neutral-700">
+          Slide {index + 1}
+        </span>
+      </button>
+
+      <Button
+        type="button"
+        variant="secondary"
+        size="icon-xs"
+        className={cn(
+          "absolute right-1.5 top-1.5 opacity-0 shadow-sm transition group-hover:opacity-100",
+          !canDelete && "hidden"
+        )}
+        onClick={(event) => {
+          event.stopPropagation();
+          onDelete();
+        }}
+        disabled={!canDelete}
+        aria-label={`Delete slide ${index + 1}`}
+      >
+        <XIcon className="size-3" />
+      </Button>
+    </div>
+  );
+}
+
+function StaticSlideThumbnail({
+  index,
+  html,
+  selected,
+  hasProposal,
+  onSelect,
+}: {
+  index: number;
+  html: string;
+  selected: boolean;
+  hasProposal: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <div className="group relative">
+      <button
+        type="button"
+        className={cn(
+          "block w-full rounded-lg border border-neutral-950/10 bg-white p-2 text-left shadow-xs transition hover:border-neutral-950/20",
+          selected && "border-primary/30 ring-2 ring-primary/60"
+        )}
+        onClick={onSelect}
+      >
+        <ThumbnailFrame
+          title={`New slide proposal ${index + 1} thumbnail`}
+          html={html}
+          hasProposal={hasProposal}
+        />
+        <span className="mt-2 flex items-center justify-between text-xs font-medium text-neutral-700">
+          <span>Slide {index + 1}</span>
+          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
+            New
+          </span>
+        </span>
+      </button>
+    </div>
+  );
+}
+
+function ThumbnailFrame({
+  title,
+  html,
+  hasProposal,
+}: {
+  title: string;
+  html: string;
+  hasProposal: boolean;
+}) {
+  const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null);
+  // srcDoc is latched to the first value; later updates are patched into the
+  // live document in place, so streaming edits don't reload (flash) the
+  // thumbnail on every change.
+  const initialHtmlRef = useRef(html);
+  const appliedHtmlRef = useRef(html);
+
+  useEffect(() => {
+    if (iframe && html !== appliedHtmlRef.current) {
+      patchIframeHtml(iframe, html);
+      appliedHtmlRef.current = html;
+    }
+  }, [html, iframe]);
+
+  return (
+    <span
+      className="relative block overflow-hidden rounded-md bg-white ring-1 ring-neutral-950/10"
+      style={{ width: THUMBNAIL_WIDTH, height: THUMBNAIL_HEIGHT }}
+    >
+      <iframe
+        ref={setIframe}
+        title={title}
+        width={SLIDE_WIDTH}
+        height={SLIDE_HEIGHT}
+        srcDoc={initialHtmlRef.current}
+        sandbox="allow-same-origin"
+        className="pointer-events-none absolute left-0 top-0 border-0 bg-white"
+        style={{
+          width: SLIDE_WIDTH,
+          height: SLIDE_HEIGHT,
+          transform: `scale(${THUMBNAIL_SCALE})`,
+          transformOrigin: "top left",
+        }}
+      />
+      {hasProposal ? (
+        <span className="absolute right-1.5 top-1.5 size-2.5 rounded-full bg-primary shadow-sm ring-2 ring-white" />
+      ) : null}
+    </span>
+  );
+}
diff --git a/examples/nextjs-ai-slideshow/app/slide-undo.ts b/examples/nextjs-ai-slideshow/app/slide-undo.ts
new file mode 100644
index 0000000000..abb1f93544
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/slide-undo.ts
@@ -0,0 +1,117 @@
+"use client";
+
+import { useRoom } from "@liveblocks/react/suspense";
+import { getYjsProviderForRoom } from "@liveblocks/yjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import * as Y from "yjs";
+import { getSlideIds, getSlideText, slideTextKey, SLIDES_ARRAY_KEY } from "./slide-doc";
+
+export const VISUAL_EDIT_ORIGIN = "visual-edit";
+
+type UndoState = {
+  canUndo: boolean;
+  canRedo: boolean;
+};
+
+type UndoCache = {
+  undoManager: Y.UndoManager;
+  addedSlideKeys: Set<string>;
+};
+
+const undoManagers = new WeakMap<Y.Doc, UndoCache>();
+
+function getUndoCache(ydoc: Y.Doc): UndoCache {
+  const existing = undoManagers.get(ydoc);
+  if (existing) {
+    return existing;
+  }
+
+  const undoManager = new Y.UndoManager([], {
+    doc: ydoc,
+    trackedOrigins: new Set([VISUAL_EDIT_ORIGIN]),
+    captureTimeout: Number.MAX_SAFE_INTEGER,
+  });
+  const cache = { undoManager, addedSlideKeys: new Set<string>() };
+  undoManagers.set(ydoc, cache);
+  return cache;
+}
+
+function addSlidesToScope(ydoc: Y.Doc, cache: UndoCache) {
+  for (const id of getSlideIds(ydoc)) {
+    const key = slideTextKey(id);
+    if (cache.addedSlideKeys.has(key)) {
+      continue;
+    }
+
+    cache.undoManager.addToScope(getSlideText(ydoc, id));
+    cache.addedSlideKeys.add(key);
+  }
+}
+
+function getUndoState(undoManager: Y.UndoManager): UndoState {
+  return {
+    canUndo: undoManager.canUndo(),
+    canRedo: undoManager.canRedo(),
+  };
+}
+
+export function useSlideUndo(): {
+  undo: () => void;
+  redo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  stopCapturing: () => void;
+} {
+  const room = useRoom();
+  const provider = getYjsProviderForRoom(room);
+  const ydoc = provider.getYDoc();
+  const cache = useMemo(() => getUndoCache(ydoc), [ydoc]);
+  const { undoManager } = cache;
+  const [state, setState] = useState(() => getUndoState(undoManager));
+
+  useEffect(() => {
+    const slides = ydoc.getArray<string>(SLIDES_ARRAY_KEY);
+    const updateScope = () => {
+      addSlidesToScope(ydoc, cache);
+    };
+    const updateState = () => {
+      setState(getUndoState(undoManager));
+    };
+
+    updateScope();
+    updateState();
+    slides.observe(updateScope);
+    undoManager.on("stack-item-added", updateState);
+    undoManager.on("stack-item-popped", updateState);
+    undoManager.on("stack-cleared", updateState);
+
+    return () => {
+      slides.unobserve(updateScope);
+      undoManager.off("stack-item-added", updateState);
+      undoManager.off("stack-item-popped", updateState);
+      undoManager.off("stack-cleared", updateState);
+    };
+  }, [cache, undoManager, ydoc]);
+
+  const undo = useCallback(() => {
+    undoManager.undo();
+    setState(getUndoState(undoManager));
+  }, [undoManager]);
+
+  const redo = useCallback(() => {
+    undoManager.redo();
+    setState(getUndoState(undoManager));
+  }, [undoManager]);
+
+  const stopCapturing = useCallback(() => {
+    undoManager.stopCapturing();
+  }, [undoManager]);
+
+  return {
+    undo,
+    redo,
+    canUndo: state.canUndo,
+    canRedo: state.canRedo,
+    stopCapturing,
+  };
+}
diff --git a/examples/nextjs-ai-slideshow/app/slides.ts b/examples/nextjs-ai-slideshow/app/slides.ts
new file mode 100644
index 0000000000..ea3c0e8543
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/slides.ts
@@ -0,0 +1,192 @@
+"use client";
+
+import { useRoom } from "@liveblocks/react/suspense";
+import { getYjsProviderForRoom } from "@liveblocks/yjs";
+import { nanoid } from "nanoid";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  getSlideIds,
+  getSlideText,
+  INITIAL_SLIDE_ID,
+  SLIDES_ARRAY_KEY,
+} from "./slide-doc";
+import { EMPTY_SLIDE_HTML, STARTER_SLIDE_HTML } from "./slide-html";
+
+export function useSlides(): {
+  slideIds: string[];
+  addSlide: () => string;
+  deleteSlide: (id: string) => void;
+  moveSlide: (fromIndex: number, toIndex: number) => void;
+} {
+  const room = useRoom();
+  const [slideIds, setSlideIds] = useState<string[]>([]);
+  const seeded = useRef(false);
+
+  useEffect(() => {
+    const provider = getYjsProviderForRoom(room);
+    const ydoc = provider.getYDoc();
+    const slides = ydoc.getArray<string>(SLIDES_ARRAY_KEY);
+
+    const updateSlideIds = () => {
+      setSlideIds(getSlideIds(ydoc));
+    };
+
+    const seedAfterSync = (isSynced: boolean) => {
+      if (!isSynced || seeded.current) {
+        return;
+      }
+
+      seeded.current = true;
+      if (slides.length === 0) {
+        ydoc.transact(() => {
+          slides.push([INITIAL_SLIDE_ID]);
+          const initialSlide = getSlideText(ydoc, INITIAL_SLIDE_ID);
+          if (initialSlide.length === 0) {
+            initialSlide.insert(0, STARTER_SLIDE_HTML);
+          }
+        });
+      }
+      updateSlideIds();
+    };
+
+    updateSlideIds();
+    slides.observe(updateSlideIds);
+    provider.on("sync", seedAfterSync);
+    seedAfterSync(provider.synced);
+
+    return () => {
+      slides.unobserve(updateSlideIds);
+      provider.off("sync", seedAfterSync);
+    };
+  }, [room]);
+
+  const addSlide = useCallback(() => {
+    const provider = getYjsProviderForRoom(room);
+    const ydoc = provider.getYDoc();
+    const slides = ydoc.getArray<string>(SLIDES_ARRAY_KEY);
+    const id = nanoid(8);
+
+    ydoc.transact(() => {
+      slides.push([id]);
+      const ytext = getSlideText(ydoc, id);
+      if (ytext.length === 0) {
+        ytext.insert(0, EMPTY_SLIDE_HTML);
+      }
+    });
+
+    return id;
+  }, [room]);
+
+  const deleteSlide = useCallback(
+    (id: string) => {
+      const provider = getYjsProviderForRoom(room);
+      const ydoc = provider.getYDoc();
+      const currentSlideIds = getSlideIds(ydoc);
+      if (currentSlideIds.length <= 1) {
+        return;
+      }
+
+      const slides = ydoc.getArray<string>(SLIDES_ARRAY_KEY);
+      ydoc.transact(() => {
+        const rawSlideIds = slides.toArray();
+        for (let index = rawSlideIds.length - 1; index >= 0; index--) {
+          if (rawSlideIds[index] === id) {
+            slides.delete(index, 1);
+          }
+        }
+      });
+    },
+    [room]
+  );
+
+  const moveSlide = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      const provider = getYjsProviderForRoom(room);
+      const ydoc = provider.getYDoc();
+      const currentSlideIds = getSlideIds(ydoc);
+      if (
+        fromIndex === toIndex ||
+        fromIndex < 0 ||
+        toIndex < 0 ||
+        fromIndex >= currentSlideIds.length ||
+        toIndex >= currentSlideIds.length
+      ) {
+        return;
+      }
+
+      const movedId = currentSlideIds[fromIndex];
+      const targetId = currentSlideIds[toIndex];
+      const slides = ydoc.getArray<string>(SLIDES_ARRAY_KEY);
+
+      ydoc.transact(() => {
+        const sourceIndex = slides.toArray().indexOf(movedId);
+        if (sourceIndex === -1) {
+          return;
+        }
+
+        slides.delete(sourceIndex, 1);
+
+        const rawSlideIds = slides.toArray();
+        const targetIndex = rawSlideIds.indexOf(targetId);
+        const insertIndex =
+          targetIndex === -1
+            ? rawSlideIds.length
+            : fromIndex < toIndex
+              ? targetIndex + 1
+              : targetIndex;
+
+        slides.insert(insertIndex, [movedId]);
+      });
+    },
+    [room]
+  );
+
+  return { slideIds, addSlide, deleteSlide, moveSlide };
+}
+
+export function useSlideHtml(slideId: string, enabled = true): string {
+  const room = useRoom();
+
+  const readHtml = useCallback(() => {
+    if (!enabled) {
+      return STARTER_SLIDE_HTML;
+    }
+    const ydoc = getYjsProviderForRoom(room).getYDoc();
+    return getSlideText(ydoc, slideId).toString() || STARTER_SLIDE_HTML;
+  }, [enabled, room, slideId]);
+
+  const [state, setState] = useState(() => ({ slideId, html: readHtml() }));
+
+  // Recompute synchronously when the slide changes so consumers never render
+  // one frame of the previous slide's HTML (the iframe srcDoc is set once per
+  // slide, so a stale first value would stick). The fresh value must also be
+  // returned from THIS render: a render-phase setState only applies on the
+  // re-render, and this very render's value is what gets latched.
+  let html = state.html;
+  if (state.slideId !== slideId) {
+    html = readHtml();
+    setState({ slideId, html });
+  }
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const ydoc = getYjsProviderForRoom(room).getYDoc();
+    const ytext = getSlideText(ydoc, slideId);
+
+    const updateHtml = () => {
+      setState({ slideId, html: ytext.toString() || STARTER_SLIDE_HTML });
+    };
+
+    updateHtml();
+    ytext.observe(updateHtml);
+
+    return () => {
+      ytext.unobserve(updateHtml);
+    };
+  }, [enabled, room, slideId]);
+
+  return html;
+}
diff --git a/examples/nextjs-ai-slideshow/app/use-slide-html.ts b/examples/nextjs-ai-slideshow/app/use-slide-html.ts
deleted file mode 100644
index 43caa24679..0000000000
--- a/examples/nextjs-ai-slideshow/app/use-slide-html.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRoom } from "@liveblocks/react/suspense";
-import { getYjsProviderForRoom } from "@liveblocks/yjs";
-import { STARTER_SLIDE_HTML } from "./slide-html";
-
-export function useSlideHtml() {
-  const room = useRoom();
-  const [html, setHtml] = useState(STARTER_SLIDE_HTML);
-
-  useEffect(() => {
-    const provider = getYjsProviderForRoom(room);
-    const ydoc = provider.getYDoc();
-    const ytext = ydoc.getText("codemirror");
-
-    const updateHtml = () => {
-      const value = ytext.toString();
-      setHtml(value || STARTER_SLIDE_HTML);
-    };
-
-    updateHtml();
-    ytext.observe(updateHtml);
-
-    return () => {
-      ytext.unobserve(updateHtml);
-    };
-  }, [room]);
-
-  return html;
-}
diff --git a/examples/nextjs-ai-slideshow/app/visual-editor.tsx b/examples/nextjs-ai-slideshow/app/visual-editor.tsx
new file mode 100644
index 0000000000..07ed869275
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/app/visual-editor.tsx
@@ -0,0 +1,978 @@
+"use client";
+
+import { useRoom } from "@liveblocks/react/suspense";
+import { getYjsProviderForRoom } from "@liveblocks/yjs";
+import diff from "fast-diff";
+import { useEffect, useRef } from "react";
+import * as Y from "yjs";
+import {
+  findElementSourceRange,
+  getElementByPath,
+  getElementPath,
+} from "./html-source-map";
+import { getSlideText } from "./slide-doc";
+import { SLIDE_HEIGHT, SLIDE_WIDTH } from "./slide-html";
+import { VISUAL_EDIT_ORIGIN } from "./slide-undo";
+
+const HOVER_ATTR = "data-lb-hover";
+const SELECTED_ATTR = "data-lb-selected";
+const STYLE_ATTR = "data-lb-visual-editor-style";
+const DRAG_THRESHOLD = 3;
+const STREAM_COMMIT_INTERVAL = 100;
+const CURSOR_PRESENCE_INTERVAL = 50;
+
+const INLINE_TEXT_TAGS = new Set([
+  "a",
+  "abbr",
+  "b",
+  "br",
+  "button",
+  "cite",
+  "code",
+  "em",
+  "i",
+  "kbd",
+  "mark",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "time",
+  "u",
+  "s",
+]);
+
+type RelativeAnchor = ReturnType<typeof Y.createRelativePositionFromTypeIndex>;
+
+type GestureContext = {
+  ydoc: Y.Doc;
+  ytext: Y.Text;
+  startAnchor: RelativeAnchor | null;
+  endAnchor: RelativeAnchor | null;
+  tagName: string;
+  fallbackToWholeDocument: boolean;
+  lastCommittedOuterHtml: string;
+  dropped: boolean;
+};
+
+type ThrottledAction = {
+  schedule: () => void;
+  flush: () => void;
+  cancel: () => void;
+};
+
+type PointerGesture = {
+  context: GestureContext;
+  element: Element;
+  pointerId: number;
+  startX: number;
+  startY: number;
+  initialTransform: string;
+  initialTranslate: Coords;
+  dragStarted: boolean;
+  streamCommit: ThrottledAction | null;
+};
+
+type TextEditGesture = {
+  context: GestureContext;
+  element: HTMLElement;
+  originalInnerHtml: string;
+  finishing: boolean;
+  streamCommit: ThrottledAction | null;
+  removeListeners: () => void;
+};
+
+type Coords = { x: number; y: number };
+
+export type VisualEditorOptions = {
+  iframe: HTMLIFrameElement | null;
+  slideId: string;
+  onGestureActiveChange: (active: boolean) => void;
+  onCommit: (expectedHtml: string) => void;
+  onCursorMove: (coords: Coords | null) => void;
+  onSelectionChange: (path: number[] | null) => void;
+  stopCapturing: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+};
+
+// True for Mod-z / Mod-Shift-z / Mod-y. Returns the action or null.
+export function matchUndoRedoShortcut(
+  event: KeyboardEvent
+): "undo" | "redo" | null {
+  if (!event.metaKey && !event.ctrlKey) {
+    return null;
+  }
+  const key = event.key.toLowerCase();
+  if (key === "z") {
+    return event.shiftKey ? "redo" : "undo";
+  }
+  if (key === "y") {
+    return "redo";
+  }
+  return null;
+}
+
+export function useVisualEditor({
+  iframe,
+  slideId,
+  onGestureActiveChange,
+  onCommit,
+  onCursorMove,
+  onSelectionChange,
+  stopCapturing,
+  onUndo,
+  onRedo,
+}: VisualEditorOptions) {
+  const room = useRoom();
+  const hoveredElementRef = useRef<Element | null>(null);
+  const selectedElementRef = useRef<Element | null>(null);
+  const selectedPathRef = useRef<number[] | null>(null);
+  const pointerGestureRef = useRef<PointerGesture | null>(null);
+  const textEditRef = useRef<TextEditGesture | null>(null);
+  const documentCleanupRef = useRef<(() => void) | null>(null);
+  const gestureActiveRef = useRef(false);
+  const latestCursorCoordsRef = useRef<Coords | null>(null);
+  const callbacksRef = useRef({
+    onGestureActiveChange,
+    onCommit,
+    onCursorMove,
+    onSelectionChange,
+    stopCapturing,
+    onUndo,
+    onRedo,
+  });
+
+  useEffect(() => {
+    callbacksRef.current = {
+      onGestureActiveChange,
+      onCommit,
+      onCursorMove,
+      onSelectionChange,
+      stopCapturing,
+      onUndo,
+      onRedo,
+    };
+  }, [
+    onCommit,
+    onCursorMove,
+    onGestureActiveChange,
+    onRedo,
+    onSelectionChange,
+    onUndo,
+    stopCapturing,
+  ]);
+
+  useEffect(() => {
+    selectedElementRef.current = null;
+    hoveredElementRef.current = null;
+    selectedPathRef.current = null;
+    pointerGestureRef.current = null;
+    finishTextEdit("cancel");
+    callbacksRef.current.onCursorMove(null);
+    setGestureActive(false);
+  }, [slideId]);
+
+  useEffect(() => {
+    if (!iframe) {
+      clearHover();
+      clearSelection();
+      pointerGestureRef.current = null;
+      finishTextEdit("cancel");
+      callbacksRef.current.onCursorMove(null);
+      setGestureActive(false);
+      return;
+    }
+
+    const attach = () => {
+      documentCleanupRef.current?.();
+      documentCleanupRef.current = null;
+
+      const document = iframe.contentDocument;
+      if (!document) {
+        return;
+      }
+
+      injectEditorStyle(document);
+      reapplySelection(document);
+      const cursorMove = createThrottledAction(CURSOR_PRESENCE_INTERVAL, () => {
+        const coords = latestCursorCoordsRef.current;
+        callbacksRef.current.onCursorMove(coords);
+      });
+
+      const handlePointerMove = (event: PointerEvent) => {
+        latestCursorCoordsRef.current = {
+          x: clamp01(event.clientX / SLIDE_WIDTH),
+          y: clamp01(event.clientY / SLIDE_HEIGHT),
+        };
+        cursorMove.schedule();
+        updateHoverFromEvent(document, event);
+        updatePointerGesture(event);
+      };
+
+      const handlePointerDown = (event: PointerEvent) => {
+        startPointerGesture(document, event);
+      };
+
+      const handlePointerUp = (event: PointerEvent) => {
+        finishPointerGesture(event, "commit");
+      };
+
+      const handlePointerCancel = (event: PointerEvent) => {
+        finishPointerGesture(event, "cancel");
+      };
+
+      const handleDoubleClick = (event: MouseEvent) => {
+        startTextEdit(document, event);
+      };
+
+      const handlePointerLeave = () => {
+        latestCursorCoordsRef.current = null;
+        cursorMove.cancel();
+        callbacksRef.current.onCursorMove(null);
+        clearHover();
+      };
+
+      // Mod-z / Mod-y while focus is inside the slide iframe. Disabled during
+      // inline text editing, where the browser's native contentEditable undo
+      // should keep handling the keystrokes.
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (textEditRef.current) {
+          return;
+        }
+        const action = matchUndoRedoShortcut(event);
+        if (!action) {
+          return;
+        }
+        event.preventDefault();
+        if (action === "undo") {
+          callbacksRef.current.onUndo();
+        } else {
+          callbacksRef.current.onRedo();
+        }
+      };
+
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerleave", handlePointerLeave);
+      document.addEventListener("pointerdown", handlePointerDown);
+      document.addEventListener("pointerup", handlePointerUp);
+      document.addEventListener("pointercancel", handlePointerCancel);
+      document.addEventListener("dblclick", handleDoubleClick);
+      document.addEventListener("keydown", handleKeyDown);
+
+      documentCleanupRef.current = () => {
+        cursorMove.cancel();
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerleave", handlePointerLeave);
+        document.removeEventListener("pointerdown", handlePointerDown);
+        document.removeEventListener("pointerup", handlePointerUp);
+        document.removeEventListener("pointercancel", handlePointerCancel);
+        document.removeEventListener("dblclick", handleDoubleClick);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    };
+
+    iframe.addEventListener("load", attach);
+    attach();
+
+    return () => {
+      iframe.removeEventListener("load", attach);
+      documentCleanupRef.current?.();
+      documentCleanupRef.current = null;
+    };
+  }, [iframe, room, slideId]);
+
+  function setGestureActive(active: boolean) {
+    if (gestureActiveRef.current === active) {
+      return;
+    }
+
+    gestureActiveRef.current = active;
+    callbacksRef.current.onGestureActiveChange(active);
+  }
+
+  function createGestureContext(element: Element): GestureContext | null {
+    const document = element.ownerDocument;
+    const body = document.body;
+    if (!body) {
+      return null;
+    }
+
+    const provider = getYjsProviderForRoom(room);
+    const ydoc = provider.getYDoc();
+    const ytext = getSlideText(ydoc, slideId);
+    const snapshotHtml = ytext.toString();
+    const path = getElementPath(element, body);
+    const range = path ? findElementSourceRange(snapshotHtml, path) : null;
+
+    return {
+      ydoc,
+      ytext,
+      startAnchor: range
+        ? Y.createRelativePositionFromTypeIndex(ytext, range.start, 0)
+        : null,
+      endAnchor: range
+        ? Y.createRelativePositionFromTypeIndex(ytext, range.end, -1)
+        : null,
+      tagName: element.tagName.toLowerCase(),
+      fallbackToWholeDocument: !range,
+      lastCommittedOuterHtml: serializeElement(element),
+      dropped: false,
+    };
+  }
+
+  function startPointerGesture(document: Document, event: PointerEvent) {
+    if (event.button !== 0 || textEditRef.current) {
+      return;
+    }
+
+    const target = getTargetElement(document, event);
+    if (!target) {
+      clearSelection();
+      return;
+    }
+
+    const context = createGestureContext(target);
+    if (!context) {
+      return;
+    }
+
+    event.preventDefault();
+    selectElement(target);
+    try {
+      target.setPointerCapture(event.pointerId);
+    } catch {
+      // Pointer capture can fail if the iframe loses the pointer mid-gesture.
+    }
+    const initialTransform = isHtmlElement(target) ? target.style.transform : "";
+
+    pointerGestureRef.current = {
+      context,
+      element: target,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      initialTransform,
+      initialTranslate: parseTranslate(initialTransform),
+      dragStarted: false,
+      streamCommit: context.fallbackToWholeDocument
+        ? null
+        : createThrottledAction(STREAM_COMMIT_INTERVAL, () => {
+            commitElementGesture(context, target);
+          }),
+    };
+    setGestureActive(true);
+  }
+
+  function updatePointerGesture(event: PointerEvent) {
+    const gesture = pointerGestureRef.current;
+    if (!gesture || gesture.pointerId !== event.pointerId) {
+      return;
+    }
+
+    const deltaX = event.clientX - gesture.startX;
+    const deltaY = event.clientY - gesture.startY;
+    const distance = Math.hypot(deltaX, deltaY);
+    if (!gesture.dragStarted && distance < DRAG_THRESHOLD) {
+      return;
+    }
+
+    if (!gesture.dragStarted) {
+      gesture.dragStarted = true;
+      callbacksRef.current.stopCapturing();
+    }
+    event.preventDefault();
+
+    const nextX = gesture.initialTranslate.x + deltaX;
+    const nextY = gesture.initialTranslate.y + deltaY;
+    if (isHtmlElement(gesture.element)) {
+      gesture.element.style.transform = updateTranslate(
+        gesture.initialTransform,
+        nextX,
+        nextY
+      );
+    }
+    gesture.streamCommit?.schedule();
+  }
+
+  function finishPointerGesture(
+    event: PointerEvent,
+    action: "commit" | "cancel"
+  ) {
+    const gesture = pointerGestureRef.current;
+    if (!gesture || gesture.pointerId !== event.pointerId) {
+      return;
+    }
+
+    pointerGestureRef.current = null;
+    try {
+      gesture.element.releasePointerCapture(event.pointerId);
+    } catch {
+      // The browser may already have released capture on pointer cancel.
+    }
+
+    if (action === "cancel" && isHtmlElement(gesture.element)) {
+      gesture.streamCommit?.cancel();
+      gesture.element.style.transform = gesture.initialTransform;
+    }
+
+    if (action === "commit" && gesture.dragStarted) {
+      gesture.streamCommit?.flush();
+      commitElementGesture(gesture.context, gesture.element);
+    }
+
+    setGestureActive(false);
+  }
+
+  function startTextEdit(document: Document, event: MouseEvent) {
+    const target = getTargetElement(document, event);
+    if (!target || !isHtmlElement(target) || !isInlineOnlyElement(target)) {
+      return;
+    }
+
+    const context = createGestureContext(target);
+    if (!context) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    pointerGestureRef.current = null;
+    selectElement(target);
+    callbacksRef.current.stopCapturing();
+    setGestureActive(true);
+
+    target.contentEditable = "true";
+    target.focus({ preventScroll: true });
+    selectElementContents(target);
+
+    const handleBlur = () => {
+      finishTextEdit("commit");
+    };
+
+    const handleKeyDown = (keyboardEvent: KeyboardEvent) => {
+      if (keyboardEvent.key === "Escape") {
+        keyboardEvent.preventDefault();
+        finishTextEdit("cancel");
+        return;
+      }
+
+      if (keyboardEvent.key === "Enter") {
+        keyboardEvent.preventDefault();
+        if (keyboardEvent.metaKey || keyboardEvent.ctrlKey) {
+          finishTextEdit("commit");
+          return;
+        }
+        // The browser's default Enter behavior wraps lines in nested <div>s
+        // (breaking the element's markup); insert a plain <br> instead.
+        insertLineBreak(target);
+        streamCommit?.schedule();
+      }
+    };
+
+    const streamCommit = context.fallbackToWholeDocument
+      ? null
+      : createThrottledAction(STREAM_COMMIT_INTERVAL, () => {
+          commitElementGesture(context, target);
+        });
+
+    const handleInput = () => {
+      streamCommit?.schedule();
+    };
+
+    target.addEventListener("blur", handleBlur);
+    target.addEventListener("keydown", handleKeyDown);
+    target.addEventListener("input", handleInput);
+
+    textEditRef.current = {
+      context,
+      element: target,
+      originalInnerHtml: target.innerHTML,
+      finishing: false,
+      streamCommit,
+      removeListeners: () => {
+        target.removeEventListener("blur", handleBlur);
+        target.removeEventListener("keydown", handleKeyDown);
+        target.removeEventListener("input", handleInput);
+      },
+    };
+  }
+
+  function finishTextEdit(action: "commit" | "cancel") {
+    const edit = textEditRef.current;
+    if (!edit || edit.finishing) {
+      return;
+    }
+
+    edit.finishing = true;
+    textEditRef.current = null;
+    edit.removeListeners();
+
+    if (action === "cancel") {
+      edit.streamCommit?.cancel();
+      edit.element.innerHTML = edit.originalInnerHtml;
+    } else {
+      edit.streamCommit?.flush();
+    }
+
+    edit.element.removeAttribute("contenteditable");
+
+    if (action === "commit" || action === "cancel") {
+      const nextOuterHtml = serializeElement(edit.element);
+      if (nextOuterHtml !== edit.context.lastCommittedOuterHtml) {
+        commitElementGesture(edit.context, edit.element);
+      }
+    }
+
+    setGestureActive(false);
+  }
+
+  function commitElementGesture(context: GestureContext, element: Element) {
+    if (context.dropped) {
+      return;
+    }
+
+    const nextOuterHtml = serializeElement(element);
+    if (nextOuterHtml === context.lastCommittedOuterHtml) {
+      return;
+    }
+
+    if (context.fallbackToWholeDocument) {
+      commitWholeDocument(context, element.ownerDocument);
+      return;
+    }
+
+    if (!context.startAnchor || !context.endAnchor) {
+      return;
+    }
+
+    const start = Y.createAbsolutePositionFromRelativePosition(
+      context.startAnchor,
+      context.ydoc
+    );
+    const end = Y.createAbsolutePositionFromRelativePosition(
+      context.endAnchor,
+      context.ydoc
+    );
+
+    if (
+      !start ||
+      !end ||
+      start.type !== context.ytext ||
+      end.type !== context.ytext ||
+      end.index <= start.index
+    ) {
+      context.dropped = true;
+      return;
+    }
+
+    const currentHtml = context.ytext.toString();
+    if (!startsWithTagName(currentHtml.slice(start.index, end.index), context.tagName)) {
+      context.dropped = true;
+      return;
+    }
+
+    const expectedHtml =
+      currentHtml.slice(0, start.index) +
+      nextOuterHtml +
+      currentHtml.slice(end.index);
+    if (expectedHtml === currentHtml) {
+      context.lastCommittedOuterHtml = nextOuterHtml;
+      return;
+    }
+
+    context.ydoc.transact(() => {
+      context.ytext.delete(start.index, end.index - start.index);
+      context.ytext.insert(start.index, nextOuterHtml);
+    }, VISUAL_EDIT_ORIGIN);
+    context.startAnchor = Y.createRelativePositionFromTypeIndex(
+      context.ytext,
+      start.index,
+      0
+    );
+    context.endAnchor = Y.createRelativePositionFromTypeIndex(
+      context.ytext,
+      start.index + nextOuterHtml.length,
+      -1
+    );
+    context.lastCommittedOuterHtml = nextOuterHtml;
+    callbacksRef.current.onCommit(expectedHtml);
+  }
+
+  function commitWholeDocument(context: GestureContext, document: Document) {
+    const nextHtml = serializeDocument(document);
+    const currentHtml = context.ytext.toString();
+    if (nextHtml === currentHtml) {
+      return;
+    }
+
+    context.ydoc.transact(() => {
+      applyHtmlDiff(context.ytext, nextHtml);
+    }, VISUAL_EDIT_ORIGIN);
+    context.lastCommittedOuterHtml = serializeElement(document.documentElement);
+    callbacksRef.current.onCommit(nextHtml);
+  }
+
+  function selectElement(element: Element) {
+    if (selectedElementRef.current === element) {
+      return;
+    }
+
+    selectedElementRef.current?.removeAttribute(SELECTED_ATTR);
+    selectedElementRef.current = element;
+    selectedElementRef.current.setAttribute(SELECTED_ATTR, "");
+
+    const body = element.ownerDocument.body;
+    const path = body ? getElementPath(element, body) : null;
+    if (!pathsEqual(selectedPathRef.current, path)) {
+      callbacksRef.current.onSelectionChange(path);
+    }
+    selectedPathRef.current = path;
+  }
+
+  function clearSelection() {
+    selectedElementRef.current?.removeAttribute(SELECTED_ATTR);
+    selectedElementRef.current = null;
+    if (selectedPathRef.current) {
+      callbacksRef.current.onSelectionChange(null);
+    }
+    selectedPathRef.current = null;
+  }
+
+  function clearHover() {
+    hoveredElementRef.current?.removeAttribute(HOVER_ATTR);
+    hoveredElementRef.current = null;
+  }
+
+  function updateHoverFromEvent(document: Document, event: PointerEvent) {
+    if (pointerGestureRef.current || textEditRef.current) {
+      return;
+    }
+
+    const target = getTargetElement(document, event);
+    if (hoveredElementRef.current === target) {
+      return;
+    }
+
+    hoveredElementRef.current?.removeAttribute(HOVER_ATTR);
+    hoveredElementRef.current = target;
+    hoveredElementRef.current?.setAttribute(HOVER_ATTR, "");
+  }
+
+  function reapplySelection(document: Document) {
+    selectedElementRef.current = null;
+    hoveredElementRef.current = null;
+
+    const path = selectedPathRef.current;
+    if (!path || !document.body) {
+      clearSelection();
+      return;
+    }
+
+    const element = getElementByPath(document.body, path);
+    if (element) {
+      selectElement(element);
+    } else {
+      clearSelection();
+    }
+  }
+}
+
+function injectEditorStyle(document: Document) {
+  if (document.querySelector(`style[${STYLE_ATTR}]`)) {
+    return;
+  }
+
+  const style = document.createElement("style");
+  style.setAttribute(STYLE_ATTR, "");
+  style.textContent = `
+    [${HOVER_ATTR}] {
+      outline: 2px solid rgba(253, 81, 8, 0.35) !important;
+      outline-offset: 2px !important;
+      cursor: move;
+    }
+    [${SELECTED_ATTR}] {
+      outline: 3px solid rgb(253 81 8) !important;
+      outline-offset: 2px !important;
+    }
+    [contenteditable="true"] {
+      cursor: text;
+      user-select: text;
+    }
+  `;
+
+  (document.head ?? document.documentElement).appendChild(style);
+}
+
+function getTargetElement(document: Document, event: Event): Element | null {
+  const view = document.defaultView;
+  const target = event.target;
+  if (!view || !target) {
+    return null;
+  }
+
+  let element: Element | null = null;
+  if (target instanceof view.Element) {
+    element = target;
+  } else if (target instanceof view.Text) {
+    element = target.parentElement;
+  }
+
+  if (
+    !element ||
+    element === document.documentElement ||
+    element === document.body ||
+    !document.body?.contains(element)
+  ) {
+    return null;
+  }
+
+  return element;
+}
+
+function isHtmlElement(element: Element): element is HTMLElement {
+  const view = element.ownerDocument.defaultView;
+  return !!view && element instanceof view.HTMLElement;
+}
+
+function isInlineOnlyElement(element: Element): boolean {
+  for (const child of element.children) {
+    if (!INLINE_TEXT_TAGS.has(child.tagName.toLowerCase())) {
+      return false;
+    }
+
+    if (!isInlineOnlyElement(child)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+const ZERO_WIDTH_SPACE = "\u200B";
+
+function insertLineBreak(element: HTMLElement) {
+  const document = element.ownerDocument;
+  const selection = document.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return;
+  }
+
+  const range = selection.getRangeAt(0);
+  if (!element.contains(range.startContainer)) {
+    return;
+  }
+  range.deleteContents();
+
+  const br = document.createElement("br");
+  range.insertNode(br);
+
+  // Anchor the caret in a zero-width-space text node AFTER the break:
+  // placing it directly between the <br> and a preceding text node makes the
+  // browser normalize it back into that text node, so typing would land
+  // before the break. The marker also keeps the new line rendered while
+  // empty. Zero-width spaces are stripped again at serialization time.
+  const marker = document.createTextNode(ZERO_WIDTH_SPACE);
+  br.after(marker);
+
+  range.setStart(marker, marker.length);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function stripZeroWidthSpaces(root: Element) {
+  const walker = root.ownerDocument.createTreeWalker(
+    root,
+    NodeFilter.SHOW_TEXT
+  );
+  const emptied: Node[] = [];
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    if (node.nodeValue?.includes(ZERO_WIDTH_SPACE)) {
+      node.nodeValue = node.nodeValue.replaceAll(ZERO_WIDTH_SPACE, "");
+      if (node.nodeValue === "") {
+        emptied.push(node);
+      }
+    }
+  }
+  for (const node of emptied) {
+    node.parentNode?.removeChild(node);
+  }
+}
+
+function selectElementContents(element: Element) {
+  const document = element.ownerDocument;
+  const selection = document.getSelection();
+  if (!selection) {
+    return;
+  }
+
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function parseTranslate(transform: string): Coords {
+  const match = transform.match(
+    /translate\(\s*(-?\d+(?:\.\d+)?)px(?:\s*,\s*|\s+)(-?\d+(?:\.\d+)?)px\s*\)/i
+  );
+  if (!match) {
+    return { x: 0, y: 0 };
+  }
+
+  return {
+    x: Number(match[1]),
+    y: Number(match[2]),
+  };
+}
+
+function updateTranslate(transform: string, x: number, y: number): string {
+  const nextTranslate = `translate(${formatPx(x)}, ${formatPx(y)})`;
+  if (
+    /translate\(\s*-?\d+(?:\.\d+)?px(?:\s*,\s*|\s+)-?\d+(?:\.\d+)?px\s*\)/i.test(
+      transform
+    )
+  ) {
+    return transform.replace(
+      /translate\(\s*-?\d+(?:\.\d+)?px(?:\s*,\s*|\s+)-?\d+(?:\.\d+)?px\s*\)/i,
+      nextTranslate
+    );
+  }
+
+  return transform ? `${transform} ${nextTranslate}` : nextTranslate;
+}
+
+function formatPx(value: number): string {
+  const rounded = Math.round(value * 100) / 100;
+  return `${Object.is(rounded, -0) ? 0 : rounded}px`;
+}
+
+function serializeElement(element: Element): string {
+  const clone = element.cloneNode(true);
+  const view = element.ownerDocument.defaultView;
+  if (!view || !(clone instanceof view.Element)) {
+    return "";
+  }
+
+  stripEditorArtifacts(clone);
+  stripZeroWidthSpaces(clone);
+  return clone.outerHTML;
+}
+
+function serializeDocument(document: Document): string {
+  const clone = document.documentElement.cloneNode(true);
+  const view = document.defaultView;
+  if (!view || !(clone instanceof view.Element)) {
+    return "";
+  }
+
+  stripEditorArtifacts(clone);
+  stripZeroWidthSpaces(clone);
+  return `<!doctype html>\n${clone.outerHTML}`;
+}
+
+function stripEditorArtifacts(root: Element) {
+  if (root.matches(`style[${STYLE_ATTR}]`)) {
+    root.remove();
+    return;
+  }
+
+  for (const style of root.querySelectorAll(`style[${STYLE_ATTR}]`)) {
+    style.remove();
+  }
+
+  const selector = `[${HOVER_ATTR}], [${SELECTED_ATTR}], [contenteditable]`;
+  if (root.matches(selector)) {
+    removeEditorAttributes(root);
+  }
+
+  for (const element of root.querySelectorAll(selector)) {
+    removeEditorAttributes(element);
+  }
+}
+
+function removeEditorAttributes(element: Element) {
+  element.removeAttribute(HOVER_ATTR);
+  element.removeAttribute(SELECTED_ATTR);
+  element.removeAttribute("contenteditable");
+}
+
+function startsWithTagName(html: string, tagName: string): boolean {
+  return new RegExp(`^\\s*<${escapeRegExp(tagName)}(?:\\s|>|/)`, "i").test(html);
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function applyHtmlDiff(ytext: Y.Text, nextHtml: string) {
+  let index = 0;
+  for (const [operation, text] of diff(ytext.toString(), nextHtml)) {
+    if (operation === diff.EQUAL) {
+      index += text.length;
+    } else if (operation === diff.DELETE) {
+      ytext.delete(index, text.length);
+    } else if (operation === diff.INSERT) {
+      ytext.insert(index, text);
+      index += text.length;
+    }
+  }
+}
+
+function createThrottledAction(delay: number, callback: () => void): ThrottledAction {
+  let timer: number | null = null;
+  let pending = false;
+
+  const run = () => {
+    timer = null;
+    if (!pending) {
+      return;
+    }
+
+    pending = false;
+    callback();
+  };
+
+  return {
+    schedule: () => {
+      pending = true;
+      if (timer !== null) {
+        return;
+      }
+      timer = window.setTimeout(run, delay);
+    },
+    flush: () => {
+      if (timer !== null) {
+        window.clearTimeout(timer);
+        timer = null;
+      }
+      run();
+    },
+    cancel: () => {
+      if (timer !== null) {
+        window.clearTimeout(timer);
+        timer = null;
+      }
+      pending = false;
+    },
+  };
+}
+
+function clamp01(value: number) {
+  return Math.min(1, Math.max(0, value));
+}
+
+function pathsEqual(left: number[] | null, right: number[] | null): boolean {
+  if (left === right) {
+    return true;
+  }
+
+  if (!left || !right || left.length !== right.length) {
+    return false;
+  }
+
+  return left.every((value, index) => value === right[index]);
+}
diff --git a/examples/nextjs-ai-slideshow/components/help-button.tsx b/examples/nextjs-ai-slideshow/components/help-button.tsx
index f6484f4779..5bf56b750f 100644
--- a/examples/nextjs-ai-slideshow/components/help-button.tsx
+++ b/examples/nextjs-ai-slideshow/components/help-button.tsx
@@ -25,23 +25,21 @@ const FEATURES: Feature[] = [
     icon: <UsersIcon />,
     title: "Shared across users",
     description:
-      "Open this example in two tabs to see chat, Yjs code edits, and comment pins sync live.",
+      "Open this example in two tabs to see presence, chat, code edits, and comment pins sync live.",
   },
   {
     icon: <ZapIcon />,
-    title: "Yjs-powered code",
+    title: "Drag and drop elements",
     description:
-      "Applied proposals are written into the shared CodeMirror document with a minimal Yjs diff.",
+      "Drag and drop elements in the slide to move them around. Double-click on text to edit them.",
   },
   {
     icon: <CommentIcon />,
     title: "Comments and export",
-    description: (
-      <>
-        Place multiplayer comment pins on the slide preview, then export the
-        current slide as a PowerPoint file.
-      </>
-    ),
+    description: `
+      Place multiplayer comment pins on the slide preview, then export the
+      current slide as a PowerPoint file.
+    `,
   },
 ];
 
diff --git a/examples/nextjs-ai-slideshow/liveblocks.config.ts b/examples/nextjs-ai-slideshow/liveblocks.config.ts
index 02dafdb4d7..249f4a9b56 100644
--- a/examples/nextjs-ai-slideshow/liveblocks.config.ts
+++ b/examples/nextjs-ai-slideshow/liveblocks.config.ts
@@ -16,6 +16,9 @@ declare global {
     // "AI is thinking..." status shows in the right chat for everyone.
     Presence: {
       promptingFeedId: string | null;
+      cursor: { x: number; y: number } | null;
+      cursorSlideId: string | null;
+      selection: { slideId: string; path: number[] } | null;
     };
 
     // Comment pins are positioned as percentages of the 16:9 slide surface so
@@ -24,10 +27,11 @@ declare global {
       x: number;
       y: number;
       zIndex: number;
+      slideId: string;
     };
 
     // The shape of every message stored in a feed. Assistant replies can include
-    // a complete slide HTML proposal that anyone in the room can apply or reject.
+    // complete slide HTML proposals that anyone in the room can apply or reject.
     FeedMessageData: {
       role: "user" | "assistant";
       content: string;
@@ -38,7 +42,9 @@ declare global {
       reasoning?: string;
       sources?: { title: string; url: string }[];
       suggestions?: string[];
-      proposedHtml?: string;
+      // Slide edits proposed by the assistant. `slideId` is an existing slide's id,
+      // or "new" to append a new slide to the deck.
+      proposals?: { slideId: string; html: string }[];
       proposalStatus?: "pending" | "applied" | "rejected";
       // Step-by-step plan, rendered with the AI Elements `ChainOfThought`.
       chainOfThought?: {
diff --git a/examples/nextjs-ai-slideshow/package-lock.json b/examples/nextjs-ai-slideshow/package-lock.json
index 99df6de400..f5ff6babaa 100644
--- a/examples/nextjs-ai-slideshow/package-lock.json
+++ b/examples/nextjs-ai-slideshow/package-lock.json
@@ -7,8 +7,11 @@
       "name": "@liveblocks-examples/nextjs-ai-slideshow",
       "license": "Apache-2.0",
       "dependencies": {
+        "@codemirror/commands": "^6.10.4",
         "@codemirror/lang-html": "^6.4.11",
         "@dnd-kit/core": "^6",
+        "@dnd-kit/sortable": "^7.0.2",
+        "@dnd-kit/utilities": "^3.2.2",
         "@liveblocks/node": "^3.21.0",
         "@liveblocks/react": "^3.21.0",
         "@liveblocks/react-ui": "^3.21.0",
@@ -25,6 +28,7 @@
         "motion": "^12.40.0",
         "nanoid": "^5.1.11",
         "next": "16.2.1",
+        "parse5": "^8.0.1",
         "pptxgenjs": "^4",
         "radix-ui": "^1.5.0",
         "react": "19.2.4",
@@ -284,6 +288,20 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
+      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.0.7",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@dnd-kit/utilities": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
@@ -4382,12 +4400,12 @@
       }
     },
     "node_modules/entities": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
       "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=0.12"
+        "node": ">=20.19.0"
       },
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
@@ -4582,6 +4600,30 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-from-html/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/hast-util-from-parse5": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
@@ -4653,6 +4695,30 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-raw/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-raw/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/hast-util-sanitize": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-5.0.2.tgz",
@@ -6613,12 +6679,12 @@
       "license": "MIT"
     },
     "node_modules/parse5": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
-      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
       "license": "MIT",
       "dependencies": {
-        "entities": "^6.0.0"
+        "entities": "^8.0.0"
       },
       "funding": {
         "url": "https://github.com/inikulin/parse5?sponsor=1"
diff --git a/examples/nextjs-ai-slideshow/package.json b/examples/nextjs-ai-slideshow/package.json
index dcd030cc85..dd390c18bc 100644
--- a/examples/nextjs-ai-slideshow/package.json
+++ b/examples/nextjs-ai-slideshow/package.json
@@ -9,8 +9,11 @@
     "start": "next start"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.10.4",
     "@codemirror/lang-html": "^6.4.11",
     "@dnd-kit/core": "^6",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.2",
     "@liveblocks/node": "^3.21.0",
     "@liveblocks/react": "^3.21.0",
     "@liveblocks/react-ui": "^3.21.0",
@@ -27,6 +30,7 @@
     "motion": "^12.40.0",
     "nanoid": "^5.1.11",
     "next": "16.2.1",
+    "parse5": "^8.0.1",
     "pptxgenjs": "^4",
     "radix-ui": "^1.5.0",
     "react": "19.2.4",
diff --git a/examples/nextjs-ai-slideshow/scripts/test-source-map.mjs b/examples/nextjs-ai-slideshow/scripts/test-source-map.mjs
new file mode 100644
index 0000000000..cf3025bcbd
--- /dev/null
+++ b/examples/nextjs-ai-slideshow/scripts/test-source-map.mjs
@@ -0,0 +1,268 @@
+import assert from "node:assert/strict";
+import { readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import ts from "typescript";
+import * as Y from "yjs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const projectRoot = join(__dirname, "..");
+const sourcePath = join(projectRoot, "app/html-source-map.ts");
+const compiledPath = join(__dirname, ".tmp-html-source-map.mjs");
+
+async function importSourceMapModule() {
+  const source = await readFile(sourcePath, "utf8");
+  const compiled = ts.transpileModule(source, {
+    compilerOptions: {
+      module: ts.ModuleKind.ES2022,
+      target: ts.ScriptTarget.ES2022,
+    },
+    fileName: sourcePath,
+  });
+
+  await writeFile(compiledPath, compiled.outputText);
+  return import(`${pathToFileURL(compiledPath).href}?t=${Date.now()}`);
+}
+
+function assertRange(html, range, expected) {
+  assert.ok(range, "Expected source range to be found");
+  assert.equal(html.slice(range.start, range.end), expected);
+}
+
+function resolveRange(ydoc, ytext, startAnchor, endAnchor) {
+  const start = Y.createAbsolutePositionFromRelativePosition(startAnchor, ydoc);
+  const end = Y.createAbsolutePositionFromRelativePosition(endAnchor, ydoc);
+  assert.ok(start, "Expected start anchor to resolve");
+  assert.ok(end, "Expected end anchor to resolve");
+  assert.equal(start.type, ytext);
+  assert.equal(end.type, ytext);
+  return { start: start.index, end: end.index };
+}
+
+function syncUpdate(fromDoc, toDoc) {
+  Y.applyUpdate(toDoc, Y.encodeStateAsUpdate(fromDoc, Y.encodeStateVector(toDoc)));
+}
+
+function replaceAndReanchor(ydoc, ytext, startAnchor, endAnchor, replacement) {
+  const range = resolveRange(ydoc, ytext, startAnchor, endAnchor);
+  ydoc.transact(() => {
+    ytext.delete(range.start, range.end - range.start);
+    ytext.insert(range.start, replacement);
+  });
+
+  return {
+    startAnchor: Y.createRelativePositionFromTypeIndex(ytext, range.start, 0),
+    endAnchor: Y.createRelativePositionFromTypeIndex(
+      ytext,
+      range.start + replacement.length,
+      -1
+    ),
+  };
+}
+
+try {
+  const { findElementSourceRange } = await importSourceMapModule();
+
+  const html = `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body { margin: 0; }
+      .slide { display: grid; }
+    </style>
+  </head>
+  <body>
+    <header class="brand">Liveblocks</header>
+    <main class="slide">
+      <section class="hero">
+        <h1>Build slides together</h1>
+        <p><strong>Multiplayer</strong> AI editing.</p>
+        <div class="actions"><button>Try it</button><a href="#">Learn more</a></div>
+      </section>
+      <section class="notes">
+        <p>Speaker note</p>
+      </section>
+    </main>
+    <footer>Page 1</footer>
+  </body>
+</html>`;
+
+  const header = `<header class="brand">Liveblocks</header>`;
+  const hero = `<section class="hero">
+        <h1>Build slides together</h1>
+        <p><strong>Multiplayer</strong> AI editing.</p>
+        <div class="actions"><button>Try it</button><a href="#">Learn more</a></div>
+      </section>`;
+  const paragraph = `<p><strong>Multiplayer</strong> AI editing.</p>`;
+  const button = `<button>Try it</button>`;
+  const footer = `<footer>Page 1</footer>`;
+
+  assertRange(html, findElementSourceRange(html, [0]), header);
+  assertRange(html, findElementSourceRange(html, [1, 0]), hero);
+  assertRange(html, findElementSourceRange(html, [1, 0, 1]), paragraph);
+  assertRange(html, findElementSourceRange(html, [1, 0, 2, 0]), button);
+  assertRange(html, findElementSourceRange(html, [2]), footer);
+  assert.equal(findElementSourceRange(html, [9]), null);
+
+  const docA = new Y.Doc();
+  const docB = new Y.Doc();
+  const textA = docA.getText("slide:sample");
+  textA.insert(0, html);
+  syncUpdate(docA, docB);
+
+  const textB = docB.getText("slide:sample");
+  const heroRange = findElementSourceRange(textA.toString(), [1, 0]);
+  assert.ok(heroRange, "Expected hero source range");
+
+  const startAnchor = Y.createRelativePositionFromTypeIndex(
+    textA,
+    heroRange.start,
+    0
+  );
+  const endAnchor = Y.createRelativePositionFromTypeIndex(
+    textA,
+    heroRange.end,
+    -1
+  );
+
+  const remoteInsertion = `\n      <p data-remote="true">Remote CodeMirror edit</p>`;
+  textB.insert(heroRange.start, remoteInsertion);
+  syncUpdate(docB, docA);
+
+  const shiftedRange = resolveRange(docA, textA, startAnchor, endAnchor);
+  assert.equal(
+    textA.toString().slice(shiftedRange.start, shiftedRange.end),
+    hero
+  );
+
+  const replacement = `<section class="hero" style="transform: translate(24px, 12px);">
+        <h1>Build slides visually</h1>
+        <p><strong>Multiplayer</strong> AI editing.</p>
+        <div class="actions"><button>Try it</button><a href="#">Learn more</a></div>
+      </section>`;
+
+  docA.transact(() => {
+    textA.delete(shiftedRange.start, shiftedRange.end - shiftedRange.start);
+    textA.insert(shiftedRange.start, replacement);
+  });
+
+  const finalHtml = textA.toString();
+  assert.ok(finalHtml.includes(remoteInsertion));
+  assert.ok(finalHtml.includes(replacement));
+  assert.ok(!finalHtml.includes(`<h1>Build slides together</h1>`));
+
+  const streamDocA = new Y.Doc();
+  const streamDocB = new Y.Doc();
+  const streamTextA = streamDocA.getText("slide:sample");
+  streamTextA.insert(0, html);
+  syncUpdate(streamDocA, streamDocB);
+  const streamTextB = streamDocB.getText("slide:sample");
+  const streamRange = findElementSourceRange(streamTextA.toString(), [1, 0]);
+  assert.ok(streamRange, "Expected streaming source range");
+  let streamStartAnchor = Y.createRelativePositionFromTypeIndex(
+    streamTextA,
+    streamRange.start,
+    0
+  );
+  let streamEndAnchor = Y.createRelativePositionFromTypeIndex(
+    streamTextA,
+    streamRange.end,
+    -1
+  );
+
+  const streamReplacement1 = `<section class="hero" style="transform: translate(10px, 5px);">
+        <h1>Build slides together</h1>
+        <p><strong>Multiplayer</strong> AI editing.</p>
+        <div class="actions"><button>Try it</button><a href="#">Learn more</a></div>
+      </section>`;
+  ({ startAnchor: streamStartAnchor, endAnchor: streamEndAnchor } =
+    replaceAndReanchor(
+      streamDocA,
+      streamTextA,
+      streamStartAnchor,
+      streamEndAnchor,
+      streamReplacement1
+    ));
+  syncUpdate(streamDocA, streamDocB);
+
+  const streamingRemoteInsertion = `\n    <aside data-remote="true">Remote edit during drag</aside>`;
+  streamTextB.insert(streamRange.start, streamingRemoteInsertion);
+  syncUpdate(streamDocB, streamDocA);
+
+  const streamReplacement2 = `<section class="hero" style="transform: translate(20px, 10px);">
+        <h1>Build slides visually</h1>
+        <p><strong>Multiplayer</strong> AI editing.</p>
+        <div class="actions"><button>Try it</button><a href="#">Learn more</a></div>
+      </section>`;
+  ({ startAnchor: streamStartAnchor, endAnchor: streamEndAnchor } =
+    replaceAndReanchor(
+      streamDocA,
+      streamTextA,
+      streamStartAnchor,
+      streamEndAnchor,
+      streamReplacement2
+    ));
+
+  const streamReplacement3 = `<section class="hero" style="transform: translate(30px, 15px);">
+        <h1>Build slides visually</h1>
+        <p><strong>Multiplayer</strong> AI editing.</p>
+        <div class="actions"><button>Try it</button><a href="#">Learn more</a></div>
+      </section>`;
+  ({ startAnchor: streamStartAnchor, endAnchor: streamEndAnchor } =
+    replaceAndReanchor(
+      streamDocA,
+      streamTextA,
+      streamStartAnchor,
+      streamEndAnchor,
+      streamReplacement3
+    ));
+
+  const streamingHtml = streamTextA.toString();
+  assert.ok(streamingHtml.includes(streamingRemoteInsertion));
+  assert.equal(
+    streamingHtml.split(streamReplacement3).length - 1,
+    1,
+    "Expected the final streamed element exactly once"
+  );
+  assert.ok(!streamingHtml.includes(streamReplacement1));
+  assert.ok(!streamingHtml.includes(streamReplacement2));
+
+  const deleteDocA = new Y.Doc();
+  const deleteDocB = new Y.Doc();
+  const deleteTextA = deleteDocA.getText("slide:sample");
+  deleteTextA.insert(0, html);
+  syncUpdate(deleteDocA, deleteDocB);
+  const deleteTextB = deleteDocB.getText("slide:sample");
+  const deleteRange = findElementSourceRange(deleteTextA.toString(), [1, 0]);
+  assert.ok(deleteRange, "Expected deletion source range");
+
+  const deleteStartAnchor = Y.createRelativePositionFromTypeIndex(
+    deleteTextA,
+    deleteRange.start,
+    0
+  );
+  const deleteEndAnchor = Y.createRelativePositionFromTypeIndex(
+    deleteTextA,
+    deleteRange.end,
+    -1
+  );
+
+  deleteTextB.delete(deleteRange.start, deleteRange.end - deleteRange.start);
+  syncUpdate(deleteDocB, deleteDocA);
+
+  const deletedRange = resolveRange(
+    deleteDocA,
+    deleteTextA,
+    deleteStartAnchor,
+    deleteEndAnchor
+  );
+  assert.ok(
+    deletedRange.end <= deletedRange.start,
+    "Expected remotely deleted element range to collapse or become invalid"
+  );
+
+  console.log("source-map and Yjs relative-position tests passed");
+} finally {
+  await rm(compiledPath, { force: true });
+}