diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2152eba3e6d..f3d59c88a55 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -721,6 +721,8 @@ jobs:
               handoff_dir="$(python3 .github/scripts/handoff.py dir comment "$handoff_id" --root "$handoff_root")"
               mkdir -p "$handoff_dir"
               marker="<!-- merge-queue-needs-validation -->"
+              # Markdown code spans are intentionally literal in these single-quoted strings.
+              # shellcheck disable=SC2016
               {
                 printf '%s\n' "$marker"
                 printf 'Ejected from the merge queue: this PR still carries the `needs-validation` label.\n\n'
diff --git a/.github/workflows/cut-patch-release.yml b/.github/workflows/cut-patch-release.yml
index a96e50ee283..159ce79143f 100644
--- a/.github/workflows/cut-patch-release.yml
+++ b/.github/workflows/cut-patch-release.yml
@@ -100,10 +100,12 @@ jobs:
           # (e.g. version=0.15.1 gates open-design-v0.15.0, not the latest 0.14.0).
           vmajor=${V%%.*}; vrest=${V#*.}; vminor=${vrest%%.*}
           MINOR_BASE="${vmajor}.${vminor}.0"
-          echo "version=$V"                          >> "$GITHUB_OUTPUT"
-          echo "branch=release/v$V"                  >> "$GITHUB_OUTPUT"
-          echo "minor_base=$MINOR_BASE"              >> "$GITHUB_OUTPUT"
-          echo "minor_tag=open-design-v$MINOR_BASE"  >> "$GITHUB_OUTPUT"
+          {
+            echo "version=$V"
+            echo "branch=release/v$V"
+            echo "minor_base=$MINOR_BASE"
+            echo "minor_tag=open-design-v$MINOR_BASE"
+          } >> "$GITHUB_OUTPUT"
           echo "Cutting patch v$V (branch release/v$V); gating on stable v$MINOR_BASE"
 
       # Guard: the minor this patch sits on (the Tuesday cut) must already be a
diff --git a/.github/workflows/release-branch-direct-pr-guard.yml b/.github/workflows/release-branch-direct-pr-guard.yml
index d67f20b796d..df311d18eaf 100644
--- a/.github/workflows/release-branch-direct-pr-guard.yml
+++ b/.github/workflows/release-branch-direct-pr-guard.yml
@@ -46,6 +46,8 @@ jobs:
             exit 0
           fi
           echo "Blocking direct release PR #$PR into $BASE by $AUTHOR"
+          # Markdown code spans are intentionally literal in these single-quoted strings.
+          # shellcheck disable=SC2016
           body="$(printf '%s\n' \
             '🚫 Direct PRs into release branches are not accepted.' \
             '' \
diff --git a/apps/daemon/src/routes/project/index.ts b/apps/daemon/src/routes/project/index.ts
index 2ba6b2521d1..46663aefaf5 100644
--- a/apps/daemon/src/routes/project/index.ts
+++ b/apps/daemon/src/routes/project/index.ts
@@ -712,6 +712,76 @@ const URL_PREVIEW_SELECTION_BRIDGE = `<script data-od-url-selection-bridge>
       postStroke('od:pod-stroke');
     });
   }
+  // The host switches a plain URL preview to a bridge-enabled srcDoc when
+  // Manual Edit opens. Capture only mutable UI state so the second document
+  // can show the same app page without copying or evaluating artifact code.
+  function runtimeStateAttributeAllowed(name){
+    return name === 'class' ||
+      name === 'style' ||
+      name === 'hidden' ||
+      name === 'open' ||
+      name.indexOf('aria-') === 0 ||
+      (name.indexOf('data-') === 0 && name.indexOf('data-od-') !== 0);
+  }
+  function runtimeStateAttributes(el){
+    var attrs = Object.create(null);
+    if (!el || !el.attributes) return attrs;
+    for (var i = 0; i < el.attributes.length; i++) {
+      var attr = el.attributes[i];
+      if (!attr || !runtimeStateAttributeAllowed(attr.name)) continue;
+      attrs[attr.name] = String(attr.value || '');
+    }
+    return attrs;
+  }
+  function runtimeStatePath(el){
+    var path = [];
+    var node = el;
+    while (node && node !== document.body) {
+      var parent = node.parentElement;
+      if (!parent) return null;
+      var index = Array.prototype.indexOf.call(parent.children, node);
+      if (index < 0) return null;
+      path.unshift(index);
+      node = parent;
+    }
+    return node === document.body ? path : null;
+  }
+  function captureRuntimeState(){
+    var entries = [];
+    var nodes = document.body ? document.body.querySelectorAll('*') : [];
+    var count = Math.min(nodes.length, 3500);
+    for (var i = 0; i < count; i++) {
+      var el = nodes[i];
+      var path = runtimeStatePath(el);
+      if (!path) continue;
+      var entry = {
+        path: path,
+        tag: String(el.tagName || '').toLowerCase(),
+        attrs: runtimeStateAttributes(el)
+      };
+      if (el.id) entry.id = String(el.id);
+      var odId = el.getAttribute && el.getAttribute('data-od-id');
+      if (odId) entry.odId = String(odId);
+      var tag = entry.tag;
+      if (tag === 'input' || tag === 'textarea' || tag === 'select') {
+        entry.value = String(el.value == null ? '' : el.value);
+      }
+      if (tag === 'input' && (el.type === 'checkbox' || el.type === 'radio')) {
+        entry.checked = !!el.checked;
+      }
+      if (tag === 'select') entry.selectedIndex = Number(el.selectedIndex);
+      if (el.scrollLeft) entry.scrollLeft = Number(el.scrollLeft);
+      if (el.scrollTop) entry.scrollTop = Number(el.scrollTop);
+      entries.push(entry);
+    }
+    return {
+      version: 1,
+      hash: String(window.location.hash || ''),
+      htmlAttrs: runtimeStateAttributes(document.documentElement),
+      bodyAttrs: runtimeStateAttributes(document.body),
+      entries: entries
+    };
+  }
   window.addEventListener('message', function(ev){
     var data = ev && ev.data;
     if (!data || !data.type) return;
@@ -719,6 +789,14 @@ const URL_PREVIEW_SELECTION_BRIDGE = `<script data-od-url-selection-bridge>
       window.parent.postMessage({ type: 'od:url-selection-bridge-ready' }, '*');
       return;
     }
+    if (data.type === 'od:preview-runtime-state-capture' && data.id) {
+      window.parent.postMessage({
+        type: 'od:preview-runtime-state-captured',
+        id: String(data.id),
+        state: captureRuntimeState()
+      }, '*');
+      return;
+    }
     if (data.type === 'od:comment-mode') {
       commentEnabled = !!data.enabled;
       mode = data.mode === 'pod' ? 'pod' : 'picker';
diff --git a/apps/daemon/tests/project-file-range.test.ts b/apps/daemon/tests/project-file-range.test.ts
index ef0150119bd..0a577f34327 100644
--- a/apps/daemon/tests/project-file-range.test.ts
+++ b/apps/daemon/tests/project-file-range.test.ts
@@ -370,6 +370,7 @@ describe('GET /api/projects/:id/raw/* range request route', () => {
     const html = await bridged.text();
     expect(html).toContain('data-od-url-selection-bridge');
     expect(html).toContain("type: 'od:comment-target'");
+    expect(html).toContain("type: 'od:preview-runtime-state-captured'");
     expect(html).not.toContain('data-od-url-scroll-bridge');
   });
 
diff --git a/apps/web/src/components/FileViewer.tsx b/apps/web/src/components/FileViewer.tsx
index 2bdcfd829e3..6d869ed9a0f 100644
--- a/apps/web/src/components/FileViewer.tsx
+++ b/apps/web/src/components/FileViewer.tsx
@@ -346,12 +346,78 @@ const POWERED_PREVIEW_SANDBOX =
 const POWERED_PREVIEW_ALLOW =
   'accelerometer; autoplay; camera; cross-origin-isolated; fullscreen; gamepad; gyroscope; microphone; xr-spatial-tracking';
 const PREVIEW_BRIDGE_QUERY = 'odPreviewBridge=scroll&odPreviewBridge=selection&odPreviewBridge=snapshot';
+// Generic runtime UI state carried across the URL-load -> srcDoc transport
+// switch. This preserves the current page of multi-page prototypes while
+// leaving artifact scripts and business state inside their sandboxed frames.
+const PREVIEW_RUNTIME_STATE_MAX_ELEMENTS = 3500;
+type PreviewRuntimeStateEntry = {
+  path: number[];
+  tag: string;
+  id?: string;
+  odId?: string;
+  attrs: Record<string, string>;
+  value?: string;
+  checked?: boolean;
+  selectedIndex?: number;
+  scrollLeft?: number;
+  scrollTop?: number;
+};
+type PreviewRuntimeState = {
+  version: 1;
+  hash: string;
+  htmlAttrs: Record<string, string>;
+  bodyAttrs: Record<string, string>;
+  entries: PreviewRuntimeStateEntry[];
+};
 const HTML_PASSIVE_PREVIEW_FULL_TEXT_LIMIT = 2 * 1024 * 1024;
 const HTML_ROUTING_TEXT_PREVIEW_LIMIT = 96 * 1024;
 const HTML_PREVIEW_ASSET_PREFLIGHT_LIMIT = 32;
 type HtmlSourceLoadMode = 'full' | 'routing-preview';
 type PreviewAssetWarning = { filePath: string };
 
+function isPreviewRuntimeAttributeMap(value: unknown): value is Record<string, string> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const entries = Object.entries(value);
+  return entries.length <= 64 && entries.every(([name, attrValue]) => (
+    name.length <= 128 &&
+    typeof attrValue === 'string' &&
+    attrValue.length <= 20_000
+  ));
+}
+
+function isPreviewRuntimeState(value: unknown): value is PreviewRuntimeState {
+  if (!value || typeof value !== 'object') return false;
+  const state = value as Partial<PreviewRuntimeState>;
+  if (
+    state.version !== 1 ||
+    typeof state.hash !== 'string' ||
+    state.hash.length > 4096 ||
+    !isPreviewRuntimeAttributeMap(state.htmlAttrs) ||
+    !isPreviewRuntimeAttributeMap(state.bodyAttrs) ||
+    !Array.isArray(state.entries) ||
+    state.entries.length > PREVIEW_RUNTIME_STATE_MAX_ELEMENTS
+  ) {
+    return false;
+  }
+  return state.entries.every((entry) => (
+    !!entry &&
+    typeof entry === 'object' &&
+    typeof entry.tag === 'string' &&
+    entry.tag.length <= 32 &&
+    Array.isArray(entry.path) &&
+    entry.path.length <= 64 &&
+    entry.path.every((index) => Number.isInteger(index) && index >= 0 && index <= 100_000) &&
+    (entry.id === undefined || (typeof entry.id === 'string' && entry.id.length <= 4096)) &&
+    (entry.odId === undefined || (typeof entry.odId === 'string' && entry.odId.length <= 4096)) &&
+    isPreviewRuntimeAttributeMap(entry.attrs) &&
+    (entry.value === undefined || (typeof entry.value === 'string' && entry.value.length <= 100_000)) &&
+    (entry.checked === undefined || typeof entry.checked === 'boolean') &&
+    (entry.selectedIndex === undefined || Number.isInteger(entry.selectedIndex)) &&
+    (entry.scrollLeft === undefined || Number.isFinite(entry.scrollLeft)) &&
+    (entry.scrollTop === undefined || Number.isFinite(entry.scrollTop))
+  ));
+}
+
 function previewTextNeedsFullSourceForSafeInline(source: string | null): boolean {
   if (!source) return false;
   return (
@@ -7240,6 +7306,11 @@ function HtmlViewer({
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const urlPreviewIframeRef = useRef<HTMLIFrameElement | null>(null);
   const srcDocPreviewIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const previewRuntimeStateRef = useRef<PreviewRuntimeState | null>(null);
+  const previewRuntimeStateRequestSequenceRef = useRef(0);
+  const manualEditActivationPendingRef = useRef(false);
+  const previewFileIdentityRef = useRef(`${projectId}\u0000${file.name}`);
+  previewFileIdentityRef.current = `${projectId}\u0000${file.name}`;
   const activatedSrcDocTransportHtmlRef = useRef<string | null>(null);
   // Tracks the iframe DOM node whose dedupe ref was last reset by the
   // srcDoc onLoad handler. We reset the dedupe exactly once per freshly
@@ -7259,6 +7330,54 @@ function HtmlViewer({
       source === srcDocPreviewIframeRef.current?.contentWindow
     );
   }, []);
+  const capturePreviewRuntimeState = useCallback((target: HTMLIFrameElement | null) => {
+    const source = target?.contentWindow;
+    if (!source) return Promise.resolve<PreviewRuntimeState | null>(null);
+    previewRuntimeStateRequestSequenceRef.current += 1;
+    const id = `runtime-state-${Date.now()}-${previewRuntimeStateRequestSequenceRef.current}`;
+    return new Promise<PreviewRuntimeState | null>((resolve) => {
+      let settled = false;
+      const finish = (state: PreviewRuntimeState | null) => {
+        if (settled) return;
+        settled = true;
+        window.clearTimeout(timeout);
+        window.removeEventListener('message', onMessage);
+        resolve(state);
+      };
+      const onMessage = (event: MessageEvent) => {
+        if (event.source !== source) return;
+        const data = event.data as { type?: unknown; id?: unknown; state?: unknown } | null;
+        if (
+          data?.type !== 'od:preview-runtime-state-captured' ||
+          data.id !== id
+        ) {
+          return;
+        }
+        finish(isPreviewRuntimeState(data.state) ? data.state : null);
+      };
+      const timeout = window.setTimeout(() => finish(null), 500);
+      window.addEventListener('message', onMessage);
+      source.postMessage({ type: 'od:preview-runtime-state-capture', id }, '*');
+    });
+  }, []);
+  const postAndConsumePreviewRuntimeState = useCallback((target: HTMLIFrameElement | null) => {
+    const runtimeState = previewRuntimeStateRef.current;
+    const win = target?.contentWindow;
+    if (
+      !runtimeState ||
+      !win ||
+      target !== srcDocPreviewIframeRef.current ||
+      target !== iframeRef.current
+    ) {
+      return false;
+    }
+    // This snapshot only bridges the first URL -> srcDoc handoff. Consume it
+    // before posting so later srcDoc reloads cannot overwrite newer source
+    // attributes or runtime navigation with stale transition state.
+    previewRuntimeStateRef.current = null;
+    win.postMessage({ type: 'od:preview-runtime-state-restore', state: runtimeState }, '*');
+    return true;
+  }, []);
   const setCommentComposerHostRef = useCallback((node: HTMLDivElement | null) => {
     setCommentComposerHost((current) => (current === node ? current : node));
   }, []);
@@ -7324,6 +7443,7 @@ function HtmlViewer({
   useEffect(() => {
     setManualEditSrcDocActive(false);
     setManualEditFrozenSource(null);
+    previewRuntimeStateRef.current = null;
     // Restore this file's last measured content width instead of forcing
     // `null` — this effect also fires on every HtmlViewer remount (tab-away
     // and back), not only on a genuine file change, and clearing here would
@@ -8346,8 +8466,12 @@ function HtmlViewer({
     setUrlSelectionBridgeReady(false);
   }, [effectiveBasePreviewSrcUrl]);
   useEffect(() => {
-    iframeRef.current = useUrlLoadPreview ? urlPreviewIframeRef.current : srcDocPreviewIframeRef.current;
-  }, [useUrlLoadPreview]);
+    const activeFrame = useUrlLoadPreview
+      ? urlPreviewIframeRef.current
+      : srcDocPreviewIframeRef.current;
+    iframeRef.current = activeFrame;
+    if (!useUrlLoadPreview) postAndConsumePreviewRuntimeState(activeFrame);
+  }, [postAndConsumePreviewRuntimeState, useUrlLoadPreview]);
   // Clear a redirect-loop park whenever the artifact changes or the user hits
   // reload (reloadKey bump): the previewed content is fresh, so give it a clean
   // run rather than staying pinned on the "loop detected" placeholder.
@@ -8892,6 +9016,7 @@ function HtmlViewer({
   function syncBridgeModes(target: HTMLIFrameElement | null = iframeRef.current) {
     const win = target?.contentWindow;
     if (!win) return;
+    postAndConsumePreviewRuntimeState(target);
     win.postMessage({
       type: 'od:comment-mode',
       enabled: boardMode,
@@ -11095,17 +11220,35 @@ function HtmlViewer({
     fireArtifactToolbarClick('edit');
     capturePreviewScrollPosition();
     if (!manualEditMode) {
-      setCommentPanelOpen(false);
-      setCommentCreateMode(false);
-      setBoardMode(false);
-      clearBoardComposer();
-      setInspectMode(false);
-      setDrawOverlayOpen(false);
-      setMode('preview');
-      setManualEditViewportWidth(previewBodyRef.current?.clientWidth ?? null);
-      setManualEditSrcDocActive(true);
-      setManualEditMode(true);
-      closeArtifactToolMenus();
+      if (manualEditActivationPendingRef.current) return;
+      const enterManualEditMode = () => {
+        setCommentPanelOpen(false);
+        setCommentCreateMode(false);
+        setBoardMode(false);
+        clearBoardComposer();
+        setInspectMode(false);
+        setDrawOverlayOpen(false);
+        setMode('preview');
+        setManualEditViewportWidth(previewBodyRef.current?.clientWidth ?? null);
+        setManualEditSrcDocActive(true);
+        setManualEditMode(true);
+        closeArtifactToolMenus();
+      };
+      if (!useUrlLoadPreview) {
+        enterManualEditMode();
+        return;
+      }
+      const activationFileIdentity = previewFileIdentityRef.current;
+      manualEditActivationPendingRef.current = true;
+      void capturePreviewRuntimeState(urlPreviewIframeRef.current)
+        .then((state) => {
+          if (previewFileIdentityRef.current !== activationFileIdentity) return;
+          if (state) previewRuntimeStateRef.current = state;
+          enterManualEditMode();
+        })
+        .finally(() => {
+          manualEditActivationPendingRef.current = false;
+        });
       return;
     }
     closeArtifactToolMenus();
diff --git a/apps/web/src/runtime/srcdoc.ts b/apps/web/src/runtime/srcdoc.ts
index 6179f05bf96..fef655cbceb 100644
--- a/apps/web/src/runtime/srcdoc.ts
+++ b/apps/web/src/runtime/srcdoc.ts
@@ -2141,9 +2141,133 @@ function meaningfulDomFallbackTarget(el) {
     rebuildStyleSheet();
     postOverrides();
   }
+  // Reapply the bounded UI state captured from the URL-loaded twin before
+  // Manual Edit became active. data-od-* stays owned by this srcDoc's bridges.
+  function runtimeStateAttributeAllowed(name){
+    return name === 'class' ||
+      name === 'style' ||
+      name === 'hidden' ||
+      name === 'open' ||
+      name.indexOf('aria-') === 0 ||
+      (name.indexOf('data-') === 0 && name.indexOf('data-od-') !== 0);
+  }
+  function applyRuntimeStateAttributes(el, attrs){
+    if (!el || !attrs || typeof attrs !== 'object') return;
+    var current = Array.prototype.slice.call(el.attributes || []);
+    for (var i = 0; i < current.length; i++) {
+      var currentName = current[i] && current[i].name;
+      if (
+        currentName &&
+        runtimeStateAttributeAllowed(currentName) &&
+        !Object.prototype.hasOwnProperty.call(attrs, currentName)
+      ) {
+        try { el.removeAttribute(currentName); } catch (_) {}
+      }
+    }
+    var names = Object.keys(attrs).slice(0, 64);
+    for (var a = 0; a < names.length; a++) {
+      var name = names[a];
+      var value = attrs[name];
+      if (!runtimeStateAttributeAllowed(name) || typeof value !== 'string' || value.length > 20000) continue;
+      try { el.setAttribute(name, value); } catch (_) {}
+    }
+  }
+  function runtimeStateElementAtPath(path){
+    if (!Array.isArray(path) || path.length > 64) return null;
+    var node = document.body;
+    for (var i = 0; node && i < path.length; i++) {
+      var index = Number(path[i]);
+      if (!Number.isInteger(index) || index < 0 || index > 100000) return null;
+      node = node.children && node.children[index];
+    }
+    return node || null;
+  }
+  function runtimeStateElement(entry){
+    var el = null;
+    if (entry && typeof entry.id === 'string' && entry.id.length <= 4096) {
+      try { el = document.getElementById(entry.id); } catch (_) { el = null; }
+    }
+    if (!el && entry && typeof entry.odId === 'string' && entry.odId.length <= 4096) {
+      try { el = document.querySelector('[data-od-id="' + esc(entry.odId) + '"]'); } catch (_) { el = null; }
+    }
+    if (!el) el = runtimeStateElementAtPath(entry && entry.path);
+    if (!el || String(el.tagName || '').toLowerCase() !== String(entry && entry.tag || '').toLowerCase()) return null;
+    return el;
+  }
+  function restoreRuntimeState(state){
+    if (
+      !state ||
+      state.version !== 1 ||
+      !Array.isArray(state.entries) ||
+      state.entries.length > 3500
+    ) return;
+    applyRuntimeStateAttributes(document.documentElement, state.htmlAttrs);
+    applyRuntimeStateAttributes(document.body, state.bodyAttrs);
+    for (var i = 0; i < state.entries.length; i++) {
+      var entry = state.entries[i];
+      if (!entry || typeof entry !== 'object') continue;
+      var el = runtimeStateElement(entry);
+      if (!el) continue;
+      applyRuntimeStateAttributes(el, entry.attrs);
+      var tag = String(el.tagName || '').toLowerCase();
+      if (
+        (tag === 'input' || tag === 'textarea' || tag === 'select') &&
+        typeof entry.value === 'string' &&
+        entry.value.length <= 100000
+      ) {
+        try { el.value = entry.value; } catch (_) {}
+      }
+      if (tag === 'input' && typeof entry.checked === 'boolean') {
+        try { el.checked = entry.checked; } catch (_) {}
+      }
+      if (tag === 'select' && Number.isInteger(entry.selectedIndex)) {
+        try { el.selectedIndex = entry.selectedIndex; } catch (_) {}
+      }
+      if (Number.isFinite(entry.scrollLeft)) {
+        try { el.scrollLeft = entry.scrollLeft; } catch (_) {}
+      }
+      if (Number.isFinite(entry.scrollTop)) {
+        try { el.scrollTop = entry.scrollTop; } catch (_) {}
+      }
+    }
+    if (typeof state.hash === 'string' && state.hash.length <= 4096 && state.hash !== window.location.hash) {
+      try { window.history.replaceState(null, '', state.hash || 'about:srcdoc'); } catch (_) {}
+    }
+    if (active()) setTimeout(postTargets, 0);
+  }
+  var runtimeStateRestoreSequence = 0;
+  function cancelScheduledRuntimeStateRestore(){
+    runtimeStateRestoreSequence += 1;
+  }
+  // Retried restores help state survive an asynchronous artifact boot, but
+  // after the user interacts the live document is authoritative. Invalidate
+  // the pending handoff before its rAF/timeout callbacks can replay stale state.
+  document.addEventListener('pointerdown', cancelScheduledRuntimeStateRestore, true);
+  document.addEventListener('click', cancelScheduledRuntimeStateRestore, true);
+  document.addEventListener('keydown', cancelScheduledRuntimeStateRestore, true);
+  document.addEventListener('input', cancelScheduledRuntimeStateRestore, true);
+  document.addEventListener('change', cancelScheduledRuntimeStateRestore, true);
+  document.addEventListener('scroll', cancelScheduledRuntimeStateRestore, true);
+  function scheduleRuntimeStateRestore(state){
+    runtimeStateRestoreSequence += 1;
+    var sequence = runtimeStateRestoreSequence;
+    function restoreIfCurrent(){
+      if (sequence !== runtimeStateRestoreSequence) return;
+      restoreRuntimeState(state);
+    }
+    restoreIfCurrent();
+    window.requestAnimationFrame(function(){
+      restoreIfCurrent();
+      window.setTimeout(restoreIfCurrent, 80);
+    });
+  }
   window.addEventListener('message', function(ev){
     var data = ev && ev.data;
     if (!data || !data.type) return;
+    if (data.type === 'od:preview-runtime-state-restore') {
+      scheduleRuntimeStateRestore(data.state);
+      return;
+    }
     if (data.type === 'od:comment-mode') {
       commentEnabled = !!data.enabled;
       mode = data.mode === 'pod' ? 'pod' : 'picker';
diff --git a/apps/web/tests/components/FileViewer.manual-edit-history.test.tsx b/apps/web/tests/components/FileViewer.manual-edit-history.test.tsx
index ea77d8cbf11..883f9d676a4 100644
--- a/apps/web/tests/components/FileViewer.manual-edit-history.test.tsx
+++ b/apps/web/tests/components/FileViewer.manual-edit-history.test.tsx
@@ -36,6 +36,50 @@ function clickAgentTool(testId: string) {
   fireEvent.click(screen.getByTestId(testId));
 }
 
+async function enterManualEditMode() {
+  const initialFrame = await waitFor(() => {
+    const node = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+    if (!node.contentWindow) throw new Error('Preview frame not ready');
+    return node;
+  });
+  const postMessageSpy = vi.spyOn(initialFrame.contentWindow!, 'postMessage');
+
+  clickManualTool('manual-edit-mode-toggle');
+
+  const captureRequest = postMessageSpy.mock.calls
+    .map(([value]) => value)
+    .find((value) => (
+      typeof value === 'object' &&
+      value !== null &&
+      (value as { type?: unknown }).type === 'od:preview-runtime-state-capture'
+    )) as { type: string; id: string } | undefined;
+  if (captureRequest) {
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'od:preview-runtime-state-captured',
+          id: captureRequest.id,
+          state: {
+            version: 1,
+            hash: '',
+            htmlAttrs: {},
+            bodyAttrs: {},
+            entries: [],
+          },
+        },
+        source: initialFrame.contentWindow,
+      }));
+    });
+  }
+
+  await waitFor(() => {
+    expect(screen.getByTestId('manual-edit-mode-toggle').getAttribute('aria-pressed')).toBe('true');
+    const activeFrame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+    expect(activeFrame.getAttribute('data-od-active')).toBe('true');
+    expect(activeFrame.getAttribute('data-od-render-mode')).toBe('srcdoc');
+  });
+}
+
 // Pins the inspector to a target. Hover no longer auto-selects, so selection
 // rides the explicit click path (od-edit-select), matching the bridge sending
 // it when the user clicks the hover affordance or a container/image body.
@@ -95,7 +139,7 @@ describe('FileViewer manual edit history regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
 
     act(() => {
@@ -133,7 +177,7 @@ describe('FileViewer manual edit history regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
 
     const editFrame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
@@ -187,7 +231,7 @@ describe('FileViewer manual edit history regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
 
     act(() => {
@@ -249,7 +293,7 @@ describe('FileViewer manual edit history regressions', () => {
       />,
     );
 
-    fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+    await enterManualEditMode();
     await selectManualEditTarget();
     const getActivePreviewFrame = () => screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
 
@@ -296,7 +340,7 @@ describe('FileViewer manual edit history regressions', () => {
       />,
     );
 
-    fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+    await enterManualEditMode();
     await selectManualEditTarget();
 
     expect(panelState.props?.resetAvailable).toBe(false);
@@ -350,7 +394,7 @@ describe('FileViewer manual edit history regressions', () => {
       />,
     );
 
-    fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+    await enterManualEditMode();
     await selectManualEditTarget();
     const frame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
     const postMessageSpy = vi.spyOn(frame.contentWindow!, 'postMessage');
diff --git a/apps/web/tests/components/FileViewer.manual-edit.test.tsx b/apps/web/tests/components/FileViewer.manual-edit.test.tsx
index 27c256dc8cf..674b09bdfd2 100644
--- a/apps/web/tests/components/FileViewer.manual-edit.test.tsx
+++ b/apps/web/tests/components/FileViewer.manual-edit.test.tsx
@@ -28,6 +28,46 @@ describe('FileViewer manual edit regressions', () => {
     });
   }
 
+  async function enterManualEditMode() {
+    const initialFrame = await previewFrame();
+    const postMessageSpy = vi.spyOn(initialFrame.contentWindow!, 'postMessage');
+
+    clickManualTool('manual-edit-mode-toggle');
+
+    const captureRequest = postMessageSpy.mock.calls
+      .map(([value]) => value)
+      .find((value) => (
+        typeof value === 'object' &&
+        value !== null &&
+        (value as { type?: unknown }).type === 'od:preview-runtime-state-capture'
+      )) as { type: string; id: string } | undefined;
+    if (captureRequest) {
+      act(() => {
+        window.dispatchEvent(new MessageEvent('message', {
+          data: {
+            type: 'od:preview-runtime-state-captured',
+            id: captureRequest.id,
+            state: {
+              version: 1,
+              hash: '',
+              htmlAttrs: {},
+              bodyAttrs: {},
+              entries: [],
+            },
+          },
+          source: initialFrame.contentWindow,
+        }));
+      });
+    }
+
+    await waitFor(() => {
+      expect(screen.getByTestId('manual-edit-mode-toggle').getAttribute('aria-pressed')).toBe('true');
+      const activeFrame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+      expect(activeFrame.getAttribute('data-od-active')).toBe('true');
+      expect(activeFrame.getAttribute('data-od-render-mode')).toBe('srcdoc');
+    });
+  }
+
   async function hoverManualEditTarget(target = heroTarget()) {
     const frame = await previewFrame();
     act(() => {
@@ -141,7 +181,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     // No panel auto-pops; the canvas stays clean.
     expect(document.querySelector('.manual-edit-right')).toBeNull();
     expect(screen.queryByText('PAGE')).toBeNull();
@@ -165,7 +205,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await clickManualEditBackground();
 
     expect(screen.getByText('PAGE')).toBeTruthy();
@@ -184,7 +224,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await hoverManualEditTarget();
     // No panel until the affordance is clicked.
     expect(document.querySelector('.manual-edit-right')).toBeNull();
@@ -218,7 +258,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+    await enterManualEditMode();
     await selectManualEditTarget();
     const baseSizeInput = await findStyleInput(FONT_SIZE_ROW);
     fireEvent.change(baseSizeInput, { target: { value: '18' } });
@@ -263,7 +303,7 @@ describe('FileViewer manual edit regressions', () => {
         expect.stringMatching(/^\/api\/projects\/project-1\/raw\/preview\.html(\?|$)/),
         {},
       ));
-      fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
+      await enterManualEditMode();
       await selectManualEditTarget();
       const baseSizeInput = await findStyleInput(FONT_SIZE_ROW);
       fireEvent.change(baseSizeInput, { target: { value: '18' } });
@@ -314,7 +354,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
     const baseSizeInput = await findStyleInput(FONT_SIZE_ROW);
 
@@ -344,7 +384,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
     const baseSizeInput = await findStyleInput(FONT_SIZE_ROW);
 
@@ -381,7 +421,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
     const baseSizeInput = await findStyleInput(FONT_SIZE_ROW);
 
@@ -418,7 +458,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
 
     // The host cannot read a sandboxed iframe's scroll directly; the bridge
@@ -503,7 +543,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
     await findStyleInput(FONT_SIZE_ROW);
     // Nothing is dirty before the drag, so no Reset is offered.
@@ -543,7 +583,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
     await findStyleInput(FONT_SIZE_ROW);
 
@@ -581,7 +621,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget();
     const frame = await previewFrame();
     act(() => {
@@ -634,7 +674,7 @@ describe('FileViewer manual edit regressions', () => {
       />,
     );
 
-    clickManualTool('manual-edit-mode-toggle');
+    await enterManualEditMode();
     await selectManualEditTarget({
       ...heroTarget(),
       id: 'app-root',
diff --git a/apps/web/tests/components/FileViewer.test.tsx b/apps/web/tests/components/FileViewer.test.tsx
index 9f498cc55c7..47f739c8379 100644
--- a/apps/web/tests/components/FileViewer.test.tsx
+++ b/apps/web/tests/components/FileViewer.test.tsx
@@ -1364,7 +1364,7 @@ describe('FileViewer SVG artifacts', () => {
     expect(screen.getByRole('menuitem', { name: /export as image/i })).toBeTruthy();
   });
 
-  it('keeps inactive HTML preview transports mounted without booting the artifact', async () => {
+  it('restores captured URL preview state once when activating a prewarmed edit transport', async () => {
     const file = baseFile({
       name: 'page.html',
       path: 'page.html',
@@ -1389,27 +1389,95 @@ describe('FileViewer SVG artifacts', () => {
       />,
     );
 
-    const urlFrame = container.querySelector('iframe[data-od-render-mode="url-load"]') as HTMLIFrameElement | null;
-    const srcDocFrame = container.querySelector('iframe[data-od-render-mode="srcdoc"]') as HTMLIFrameElement | null;
+    const initialUrlFrame = container.querySelector('iframe[data-od-render-mode="url-load"]') as HTMLIFrameElement | null;
+    const initialSrcDocFrame = container.querySelector('iframe[data-od-render-mode="srcdoc"]') as HTMLIFrameElement | null;
 
-    expect(urlFrame).toBeTruthy();
-    expect(srcDocFrame).toBeTruthy();
-    expect(urlFrame?.getAttribute('data-od-active')).toBe('true');
+    expect(initialUrlFrame).toBeTruthy();
+    expect(initialSrcDocFrame).toBeTruthy();
+    expect(initialUrlFrame?.getAttribute('data-od-active')).toBe('true');
+    expect(initialSrcDocFrame?.getAttribute('data-od-active')).toBe('false');
+    expect(initialSrcDocFrame?.srcdoc).toContain('data-od-lazy-srcdoc-transport');
+    expect(initialSrcDocFrame?.srcdoc).not.toContain('__odArtifactBootCount');
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Code' }));
+    expect(screen.getByRole('tab', { name: 'Code' }).getAttribute('aria-selected')).toBe('true');
+    fireEvent.click(screen.getByRole('tab', { name: 'Preview' }));
+
+    const urlFrame = await waitFor(() => {
+      const frame = container.querySelector('iframe[data-od-render-mode="url-load"]') as HTMLIFrameElement | null;
+      expect(frame?.getAttribute('data-od-active')).toBe('true');
+      return frame!;
+    });
+    const srcDocFrame = container.querySelector('iframe[data-od-render-mode="srcdoc"]') as HTMLIFrameElement | null;
     expect(srcDocFrame?.getAttribute('data-od-active')).toBe('false');
-    expect(srcDocFrame?.srcdoc).toContain('data-od-lazy-srcdoc-transport');
-    expect(srcDocFrame?.srcdoc).not.toContain('__odArtifactBootCount');
+    expect(srcDocFrame?.srcdoc).toContain('__odArtifactBootCount');
+    fireEvent.load(srcDocFrame!);
 
+    const urlPostSpy = vi.spyOn(urlFrame.contentWindow!, 'postMessage');
+    const srcDocPostSpy = vi.spyOn(srcDocFrame!.contentWindow!, 'postMessage');
     fireEvent.click(screen.getByTestId('manual-edit-mode-toggle'));
 
+    const captureRequest = await waitFor(() => {
+      const message = urlPostSpy.mock.calls
+        .map(([value]) => value)
+        .find((value) => (
+          typeof value === 'object' &&
+          value !== null &&
+          (value as { type?: unknown }).type === 'od:preview-runtime-state-capture'
+        )) as { type: string; id: string } | undefined;
+      expect(message?.id).toBeTruthy();
+      return message!;
+    });
+    const capturedState = {
+      version: 1 as const,
+      hash: '',
+      htmlAttrs: {},
+      bodyAttrs: {},
+      entries: [
+        {
+          path: [1],
+          tag: 'main',
+          odId: 'hero',
+          attrs: { class: 'profile-page' },
+        },
+      ],
+    };
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        source: urlFrame.contentWindow,
+        data: {
+          type: 'od:preview-runtime-state-captured',
+          id: captureRequest.id,
+          state: capturedState,
+        },
+      }));
+    });
+
     const urlFrameAfter = container.querySelector('iframe[data-od-render-mode="url-load"]') as HTMLIFrameElement | null;
-    const srcDocFrameAfter = container.querySelector('iframe[data-od-render-mode="srcdoc"]') as HTMLIFrameElement | null;
+    const srcDocFrameAfter = await waitFor(() => {
+      const frame = container.querySelector('iframe[data-od-render-mode="srcdoc"]') as HTMLIFrameElement | null;
+      expect(frame?.getAttribute('data-od-active')).toBe('true');
+      return frame;
+    });
 
     expect(urlFrameAfter).toBe(urlFrame);
     expect(urlFrameAfter?.getAttribute('data-od-active')).toBe('false');
     expect(urlFrameAfter?.getAttribute('src')).toBe('about:blank');
-    expect(srcDocFrameAfter?.getAttribute('data-od-active')).toBe('true');
+    expect(srcDocFrameAfter).toBe(srcDocFrame);
     expect(srcDocFrameAfter?.srcdoc).toContain('__odArtifactBootCount');
     expect(srcDocFrameAfter?.srcdoc).toContain('data-od-edit-bridge');
+    expect(srcDocPostSpy).toHaveBeenCalledWith(
+      { type: 'od:preview-runtime-state-restore', state: capturedState },
+      '*',
+    );
+
+    srcDocPostSpy.mockClear();
+    fireEvent.load(srcDocFrameAfter!);
+
+    expect(srcDocPostSpy).not.toHaveBeenCalledWith(
+      { type: 'od:preview-runtime-state-restore', state: capturedState },
+      '*',
+    );
   });
 
   it('keeps the srcDoc edit transport active after canceling manual edit', async () => {
diff --git a/apps/web/tests/runtime/srcdoc-bridge-empty-targets.test.ts b/apps/web/tests/runtime/srcdoc-bridge-empty-targets.test.ts
index ae76194fbbd..697a4d63a0b 100644
--- a/apps/web/tests/runtime/srcdoc-bridge-empty-targets.test.ts
+++ b/apps/web/tests/runtime/srcdoc-bridge-empty-targets.test.ts
@@ -467,6 +467,58 @@ describe('selection bridge — empty annotation surface (#890)', () => {
     expect(win.getComputedStyle(iframe).pointerEvents).toBe('auto');
   });
 
+  it('restores the active page state captured from the URL-loaded preview', async () => {
+    const { win } = setupBridgeDom(
+      '<main id="home" data-page="home"><h1>Home</h1></main>' +
+        '<main id="profile" data-page="profile" hidden><h1>Profile</h1></main>',
+      'inspect',
+    );
+
+    win.dispatchEvent(
+      new win.MessageEvent('message', {
+        data: {
+          type: 'od:preview-runtime-state-restore',
+          state: {
+            version: 1,
+            hash: '',
+            htmlAttrs: {},
+            bodyAttrs: {},
+            entries: [
+              {
+                path: [0],
+                tag: 'main',
+                id: 'home',
+                attrs: { 'data-page': 'home', hidden: '' },
+              },
+              {
+                path: [1],
+                tag: 'main',
+                id: 'profile',
+                attrs: { 'data-page': 'profile', class: 'active' },
+              },
+            ],
+          },
+        },
+      }),
+    );
+
+    expect(win.document.getElementById('home')?.hasAttribute('hidden')).toBe(true);
+    expect(win.document.getElementById('profile')?.hasAttribute('hidden')).toBe(false);
+    expect(win.document.getElementById('profile')?.className).toBe('active');
+
+    const home = win.document.getElementById('home')!;
+    const profile = win.document.getElementById('profile')!;
+    home.dispatchEvent(new win.Event('pointerdown', { bubbles: true }));
+    home.removeAttribute('hidden');
+    home.setAttribute('data-edit-revision', 'fresh');
+    profile.setAttribute('hidden', '');
+
+    await new Promise<void>((resolve) => win.setTimeout(resolve, 120));
+    expect(home.hasAttribute('hidden')).toBe(false);
+    expect(home.getAttribute('data-edit-revision')).toBe('fresh');
+    expect(profile.hasAttribute('hidden')).toBe(true);
+  });
+
   it('posts od:comment-target for the annotated card when the device-frame iframe is clicked', async () => {
     const { win, parentPostMessage } = setupBridgeDom(
       '<article data-od-id="tablet-card" class="frame-card"><div class="meta">Tablet edition</div><iframe id="f" class="tablet-frame" title="Tablet edition" src="about:blank"></iframe></article>',
diff --git a/e2e/ui/app-manual-edit.test.ts b/e2e/ui/app-manual-edit.test.ts
index d66f34521db..d479ce0590e 100644
--- a/e2e/ui/app-manual-edit.test.ts
+++ b/e2e/ui/app-manual-edit.test.ts
@@ -157,6 +157,71 @@ test('[P0] manual edit mode preserves preview actions after style edits', async
   await expect(actionMenu.getByRole('menuitem', { name: /Export as PDF/i })).toBeVisible();
 });
 
+test('[P0] manual edit mode preserves the current page in a multi-page mobile app', async ({ page }) => {
+  await routeMockAgents(page);
+  const projectId = await createEmptyProject(page, 'Multi-page mobile edit');
+  await seedHtmlArtifact(page, projectId, 'mobile-app.html', multiPageMobileHtml());
+  await page.goto(`/projects/${projectId}/files/mobile-app.html`);
+  await openDesignFile(page, 'mobile-app.html');
+
+  const preview = artifactPreviewFrame(page);
+  await expect(preview.getByTestId('mobile-page-home')).toBeVisible();
+
+  await page.getByRole('tab', { name: 'Code', exact: true }).click();
+  await expect(page.getByRole('tab', { name: 'Code', exact: true })).toHaveAttribute('aria-selected', 'true');
+  await page.getByRole('tab', { name: 'Preview', exact: true }).click();
+  await expect(page.getByRole('tab', { name: 'Preview', exact: true })).toHaveAttribute('aria-selected', 'true');
+  const prewarmedSrcDoc = page.frameLocator('iframe[data-testid="artifact-preview-frame-srcdoc"]');
+  await expect(prewarmedSrcDoc.getByTestId('mobile-page-home')).toBeAttached();
+
+  await preview.getByRole('button', { name: 'Profile' }).click();
+  await expect(preview.getByTestId('mobile-page-profile')).toBeVisible();
+  await expect(preview.getByTestId('mobile-page-home')).toBeHidden();
+
+  await page.getByTestId('manual-edit-mode-toggle').click();
+
+  await expect(page.getByTestId('manual-edit-mode-toggle')).toHaveAttribute('aria-pressed', 'true');
+  await expect(preview.getByTestId('mobile-page-profile')).toBeVisible();
+  await expect(preview.getByTestId('mobile-page-home')).toBeHidden();
+
+  await page.getByTestId('manual-edit-mode-toggle').click();
+  await expect(page.getByTestId('manual-edit-mode-toggle')).toHaveAttribute('aria-pressed', 'false');
+  await expect(preview.getByTestId('mobile-page-profile')).toBeVisible();
+  await preview.getByRole('button', { name: 'Home' }).click();
+  await expect(preview.getByTestId('mobile-page-home')).toBeVisible();
+  await expect(preview.getByTestId('mobile-page-profile')).toBeHidden();
+
+  await page.getByTestId('manual-edit-mode-toggle').click();
+  await expect(page.getByTestId('manual-edit-mode-toggle')).toHaveAttribute('aria-pressed', 'true');
+  await preview.locator('[data-od-id="mobile-page-home"]').evaluate((element) => {
+    element.dispatchEvent(new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    }));
+  });
+
+  const selectedHtml = page.locator('.manual-edit-modal label')
+    .filter({ hasText: 'Selected element HTML' })
+    .locator('textarea');
+  await expect(selectedHtml).toBeVisible();
+  const currentHtml = await selectedHtml.inputValue();
+  const editedHtml = currentHtml.replace(
+    'data-page="home"',
+    'data-page="home" data-edit-revision="fresh"',
+  );
+  expect(editedHtml).not.toBe(currentHtml);
+  await selectedHtml.fill(editedHtml);
+  await inspectSaveButton(page).click();
+
+  // Saving rebuilds the srcDoc transport. The consumed Profile snapshot must
+  // not replay over the newer Home navigation when that later load completes.
+  await expectFileSource(page, projectId, 'mobile-app.html', ['data-edit-revision="fresh"']);
+  await expect(preview.locator('[data-edit-revision="fresh"]')).toBeVisible();
+  await expect(preview.getByTestId('mobile-page-home')).toBeVisible();
+  await expect(preview.getByTestId('mobile-page-profile')).toBeHidden();
+});
+
 async function selectPreviewElementThroughBridge(
   page: Page,
   frame: ReturnType<Page['frameLocator']>,
@@ -1315,6 +1380,44 @@ function manualEditHtml(): string {
 </html>`;
 }
 
+function multiPageMobileHtml(): string {
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body { margin: 0; font-family: sans-serif; }
+      main { min-height: 480px; padding: 32px; }
+      nav { display: flex; gap: 12px; padding: 16px 32px; }
+      [hidden] { display: none !important; }
+    </style>
+  </head>
+  <body>
+    <main data-testid="mobile-page-home" data-od-id="mobile-page-home" data-page="home">
+      <h1>Home page</h1>
+    </main>
+    <main data-testid="mobile-page-profile" data-od-id="mobile-page-profile" data-page="profile" hidden>
+      <h1>Profile page</h1>
+    </main>
+    <nav aria-label="Mobile navigation">
+      <button type="button" data-target-page="home">Home</button>
+      <button type="button" data-target-page="profile">Profile</button>
+    </nav>
+    <script>
+      document.querySelectorAll('[data-target-page]').forEach((button) => {
+        button.addEventListener('click', () => {
+          const target = button.getAttribute('data-target-page');
+          document.querySelectorAll('[data-page]').forEach((page) => {
+            page.toggleAttribute('hidden', page.getAttribute('data-page') !== target);
+          });
+        });
+      });
+    </script>
+  </body>
+</html>`;
+}
+
 function deckHtml(): string {
   return `<!doctype html>
 <html>