diff --git a/package-lock.json b/package-lock.json
index a48b7d92..1de861ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "stacki",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "stacki",
-      "version": "0.1.33",
+      "version": "0.1.34",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 555fa95a..de3a650f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stacki",
   "productName": "Stacki",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "Stacki — a visual builder for Astro projects — pages, layouts, components, props, live preview, and GitHub publishing.",
   "main": "dist/electron/main.js",
   "author": "Timothy Ricks <hello@timothyricks.com>",
@@ -32,6 +32,7 @@
     "test:bridge": "node test/bridge.js",
     "test:outlines": "node test/outlines.js",
     "test:navigator": "node test/navigator.js",
+    "test:navigatoropencode": "node test/navigator-open-code.js",
     "test:classattr": "node test/class-attr.js",
     "test:gridtracks": "node test/grid-tracks.js",
     "test:windowbounds": "node test/window-bounds.js",
diff --git a/src/App.tsx b/src/App.tsx
index 07c1a1b3..b1816b07 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -100,12 +100,19 @@ import { toRecord } from '../shared/record';
 import { projectRelativePath } from './projectPath.js';
 import { currentDesktopPlatform, shortcutLabel } from './shortcutLabel.js';
 import { sourceNodeAtOffset } from './codePanelModel.js'
+import {
+  codeWindowFor,
+  FRONTMATTER_SUBJECT,
+  type CodeSubject,
+  type FrontmatterSubject,
+} from './codeWindowTarget';
 import {
   cloneEditorModel,
   findEditorNodeById as findNodeById,
   findEditorParentList as findParentList,
   nodeId,
   toEditorPageState,
+  adoptParsedModel,
   type AppHistory,
   type AssetPick,
   type CodeWindowState,
@@ -935,7 +942,11 @@ export default function App() {
       write: async (pagePath, state) => {
         if (state.editable) {
           const written = await writeProjectPage(pagePath, state.model);
-          return written ? toEditorPageState(written) : undefined;
+          // The write returns the file re-parsed (current structure and source
+          // ranges for the code panel), with node ids the parser regenerated.
+          // Re-key it onto the session ids, or every editor keyed by node id
+          // remounts after each save and drops focus mid-typing (issue #29).
+          return written ? toEditorPageState(adoptParsedModel(state, written)) : undefined;
         }
         const written = await writeProjectPageRaw(pagePath, state.source);
         return written ? toEditorPageState(written) : undefined;
@@ -1547,23 +1558,29 @@ export default function App() {
       const version = codeEditVersionRef.current + 1;
       codeEditVersionRef.current = version;
       try {
-        const parsed = toEditorPageState(await parseSourcePage(open.path, source));
+        const parsed = await parseSourcePage(open.path, source);
         if (version !== codeEditVersionRef.current) {
           return;
         }
         if (pageStateRef.current.currentPage?.path !== open.path) {
           return;
         }
+        // The parse reflects the typed source (fresh structure and offsets);
+        // re-key it onto the session ids so the editors it feeds don't remount
+        // per keystroke (issue #29).
+        const result = toEditorPageState(
+          adoptParsedModel(pageStateRef.current.pageState, parsed),
+        );
         pushHistory('code-source');
-        if (parsed.editable) {
+        if (result.editable) {
           const inFrontmatter =
-            parsed.model.bodyStart !== undefined && position < parsed.model.bodyStart;
-          const selected = sourceNodeAtOffset(parsed.model.nodes, position);
+            result.model.bodyStart !== undefined && position < result.model.bodyStart;
+          const selected = sourceNodeAtOffset(result.model.nodes, position);
           setSelectedId(inFrontmatter ? 'frontmatter' : selected?.id ?? null);
         } else {
           setSelectedId(null);
         }
-        setPageState({ ...parsed, dirty: true });
+        setPageState({ ...result, dirty: true });
         scheduleSave('live');
       } catch (error: unknown) {
         if (version === codeEditVersionRef.current) {
@@ -1621,7 +1638,12 @@ export default function App() {
 
       let result: EditorPageState;
       try {
-        result = toEditorPageState(await readPage(page.path));
+        const parsed = await readPage(page.path);
+        // The disk snapshot arrives with regenerated parser ids; re-key it
+        // onto the session ids so aligned nodes keep their identity and the
+        // trail remap below only has to cover genuinely changed regions
+        // (issue #29).
+        result = toEditorPageState(adoptParsedModel(state, parsed));
       } catch {
         return;
       }
@@ -1633,7 +1655,9 @@ export default function App() {
       pendingFiles.clear();
       if (latest.currentPage?.path !== page.path || latest.pageState !== state) {return;}
 
-      // Re-select the node at the same tree position (ids regenerate).
+      // Re-select the node at the same tree position — the fallback for
+      // regions whose ids genuinely regenerated (nodes added or removed
+      // externally); aligned regions kept their session ids above.
       const selId = selectedIdRef.current;
       let nextSelected = selId;
       if (selId && selId !== 'layout' && selId !== 'frontmatter') {
@@ -3592,7 +3616,7 @@ export default function App() {
   };
 
   const selectedNode:
-    | EditorNode | { readonly id: 'frontmatter'; readonly kind: 'frontmatter'; readonly value: string } | null =
+    | EditorNode | (FrontmatterSubject & { readonly value: string }) | null =
     model && selectedId
       ? selectedId === 'frontmatter'
         ? { id: 'frontmatter', kind: 'frontmatter', value: frontmatterCode }
@@ -3944,29 +3968,22 @@ export default function App() {
     ? codeWinNode.inner
     : null;
 
-  // Returns whether the selection actually has a code editor, so the Enter
+  // Returns whether the subject actually has a code editor, so the Enter
   // shortcut below knows whether it handled the key.
-  const openCodeWindow = () => {
-    if (!selectedNode) {
+  const openCodeWindowFor = (subject: CodeSubject | null): boolean => {
+    const codeWindow = subject === null ? undefined : codeWindowFor(subject);
+    if (codeWindow === undefined) {
       return false;
     }
-    if (selectedNode.kind === 'frontmatter') {
-      setCodeWin({
-        targetId: 'frontmatter',
-        title: 'Frontmatter',
-        language: 'javascript',
-      });
-      return true;
-    }
-    if (selectedNode.kind === 'raw') {
-      setCodeWin({
-        targetId: selectedNode.id,
-        title: `<${selectedNode.name}>`,
-        language: selectedNode.name === 'style' ? 'css' : 'javascript',
-      });
-      return true;
-    }
-    return false;
+    setCodeWin(codeWindow);
+    return true;
+  };
+  const openCodeWindow = (): boolean => openCodeWindowFor(selectedNode);
+  // A navigator double-click names its row instead of reading `selectedNode`
+  // (see `openCode` in StructureTree). An id the tree no longer holds, a row
+  // removed between the click and the render, opens nothing.
+  const openCodeWindowById = (id: string): void => {
+    openCodeWindowFor(id === 'frontmatter' ? FRONTMATTER_SUBJECT : tree.node(id));
   };
   // Read by the keydown effect, which is set up long before this exists.
   openCodeWindowRef.current = openCodeWindow;
@@ -4619,6 +4636,7 @@ export default function App() {
                 onSelect={setSelectedId}
                 onHoverNode={setHoverNodeId}
                 onOpenComponent={(name, id) => openComponent(name, pathFor(id))}
+                onOpenCode={openCodeWindowById}
                 onChangeLayout={changeLayout}
                 onDropComponent={addComponent}
                 onMoveNode={moveNode}
diff --git a/src/appTypes.ts b/src/appTypes.ts
index 6b1deebb..3b5bc41a 100644
--- a/src/appTypes.ts
+++ b/src/appTypes.ts
@@ -4,6 +4,7 @@ import type { IpcResults, WireGitInfo, WireInjectedRoute } from '../shared/ipc-r
 import type { ParsePageResult } from '../shared/page-node';
 import type { ScanResult } from '../shared/scan';
 import type { AssetRequest } from './assetPick';
+import { adoptNodeIds } from './modelAdoption';
 import type { VariableSelection } from './variablesBridge';
 import {
   cloneEditorModel,
@@ -213,6 +214,24 @@ export function toEditorPageState(
   return { ...input, model: cloneEditorModel(input.model), dirty: false };
 }
 
+/** Re-key a freshly parsed page onto the session's node ids (see
+ * modelAdoption.ts). The parser regenerates every id on each parse, and the UI
+ * keys editors by node id, so installing a fresh parse wholesale re-keyed
+ * every editor and dropped field focus mid-typing (issue #29). Returns
+ * `parsed` unchanged when either side lacks an editable page model. */
+export function adoptParsedModel(
+  local: EditorPageState | null,
+  parsed: ParsePageResult & { readonly source: string },
+): ParsePageResult & { readonly source: string } {
+  if (!isEditableState(local) || !parsed.editable) {
+    return parsed;
+  }
+  return {
+    ...parsed,
+    model: { ...parsed.model, nodes: adoptNodeIds(local.model.nodes, parsed.model.nodes) },
+  };
+}
+
 export function isOpenFile(page: CurrentPage | null): page is OpenFile {
   return page?.kind === 'page' || page?.kind === 'component';
 }
diff --git a/src/codeWindowTarget.ts b/src/codeWindowTarget.ts
new file mode 100644
index 00000000..5317c476
--- /dev/null
+++ b/src/codeWindowTarget.ts
@@ -0,0 +1,38 @@
+import { assert } from '../shared/assert';
+import type { CodeWindowState, EditorNode } from './appTypes';
+
+/** The page frontmatter: selectable like a node, but it is not one. */
+export interface FrontmatterSubject {
+  readonly id: 'frontmatter';
+  readonly kind: 'frontmatter';
+}
+
+export type CodeSubject = EditorNode | FrontmatterSubject;
+
+export const FRONTMATTER_SUBJECT: FrontmatterSubject = { id: 'frontmatter', kind: 'frontmatter' };
+
+// What the floating code editor opens for a subject. Enter, the "Edit code"
+// button and a navigator double-click all ask this one rule, so they cannot
+// disagree on the title or the language. Markup has no editor of its own: the
+// answer is `undefined`, and Enter is left unhandled.
+export function codeWindowFor(subject: CodeSubject): CodeWindowState | undefined {
+  if (subject.kind === 'frontmatter') {
+    return { targetId: 'frontmatter', title: 'Frontmatter', language: 'javascript' };
+  }
+  if (subject.kind === 'raw') {
+    assert(subject.id.length > 0, 'raw node has an id');
+    // The parser matches the tag case-insensitively but keeps it as written,
+    // so `<STYLE>` arrives here as "STYLE".
+    const language = RAW_CODE_LANGUAGES[subject.name.toLowerCase()];
+    assert(language !== undefined, `raw node <${subject.name}> has no code language`);
+    return { targetId: subject.id, title: `<${subject.name}>`, language };
+  }
+  return undefined;
+}
+
+// The parser keeps exactly these elements raw (`RAW_ELEMENTS` in
+// electron/astroParser.ts), so they are the only ones with a code language.
+const RAW_CODE_LANGUAGES: Readonly<Record<string, string>> = {
+  script: 'javascript',
+  style: 'css',
+};
diff --git a/src/modelAdoption.ts b/src/modelAdoption.ts
new file mode 100644
index 00000000..038bbf30
--- /dev/null
+++ b/src/modelAdoption.ts
@@ -0,0 +1,243 @@
+// Keep a session's node ids stable when a freshly parsed page replaces the
+// local model. The parser regenerates every id on each parse, and the UI keys
+// editors by node id (panel fields, style rules, the floating code window) —
+// installing a fresh parse wholesale re-keyed every editor after each save and
+// dropped field focus mid-typing (issue #29).
+//
+// The fresh parse stays the authority for structure and source ranges; only
+// ids are adopted, and only where the two trees agree the node is "the same
+// slot". Where they disagree (a node added or removed in the source, an
+// externally edited file), the fresh subtree keeps its fresh ids — a one-time
+// re-key of the restructured region, never a stale id attached to a different
+// node.
+
+import { assert } from '../shared/assert';
+import type { NodeId } from '../shared/brand';
+import { LIMITS } from '../shared/limits';
+import type { BranchNode, PageNode, PageNodeList } from '../shared/page-node';
+
+export function adoptNodeIds(
+  localNodes: readonly PageNode[],
+  freshNodes: PageNodeList,
+): PageNodeList {
+  assert(
+    localNodes.length <= LIMITS.treeNodesMax,
+    'modelAdoption: local tree exceeds LIMITS.treeNodesMax',
+  );
+  assert(
+    freshNodes.length <= LIMITS.treeNodesMax,
+    'modelAdoption: fresh tree exceeds LIMITS.treeNodesMax',
+  );
+  // The fresh list is the authority for list-level metadata (markdown's
+  // mdTrailingBlanks) — but only that: Object.assign would also copy the
+  // fresh elements' index properties over the adopted ones. PageNodeList's
+  // only extra property is mdTrailingBlanks, so it is carried explicitly.
+  const adopted = adoptNodeList(localNodes, freshNodes, 0);
+  const trailingBlanks = freshNodes.mdTrailingBlanks;
+  if (trailingBlanks === undefined) {
+    return adopted;
+  }
+  return Object.assign(adopted, { mdTrailingBlanks: trailingBlanks });
+}
+
+/** Pair both lists by position: aligned nodes adopt the local id, a longer
+ * fresh tail keeps its fresh ids (genuinely new nodes). */
+function adoptNodeList(
+  localNodes: readonly PageNode[],
+  freshNodes: readonly PageNode[],
+  depth: number,
+): PageNode[] {
+  assert(depth <= LIMITS.treeDepthMax, 'modelAdoption: tree depth exceeds LIMITS.treeDepthMax');
+  const shared = Math.min(localNodes.length, freshNodes.length);
+  const adopted: PageNode[] = [];
+  for (let index = 0; index < shared; index += 1) {
+    const localNode = localNodes[index];
+    const freshNode = freshNodes[index];
+    assert(localNode !== undefined, 'modelAdoption: paired local node missing');
+    assert(freshNode !== undefined, 'modelAdoption: paired fresh node missing');
+    adopted.push(adoptNode(localNode, freshNode, depth + 1));
+  }
+  for (let index = shared; index < freshNodes.length; index += 1) {
+    const freshNode = freshNodes[index];
+    assert(freshNode !== undefined, 'modelAdoption: fresh tail node missing');
+    adopted.push(freshNode);
+  }
+  return adopted;
+}
+
+/** A fresh node adopts the local id when both trees say it is the same slot:
+ * same kind, same name where a name exists, and the same children shape. The
+ * name check is what keeps an externally inserted element from borrowing the
+ * id of the element it displaced. */
+function adoptNode(local: PageNode, fresh: PageNode, depth: number): PageNode {
+  assert(depth <= LIMITS.treeDepthMax, 'modelAdoption: tree depth exceeds LIMITS.treeDepthMax');
+  if (!sameSlot(local, fresh)) {
+    return fresh;
+  }
+  // sameSlot just proved the kinds equal; the assert narrows the local side
+  // to match before adoptSameKind reads the local children.
+  assert(local.kind === fresh.kind, 'modelAdoption: same-slot nodes share a kind');
+  return adoptSameKind(local, fresh, depth);
+}
+
+function adoptSameKind(local: PageNode, fresh: PageNode, depth: number): PageNode {
+  switch (fresh.kind) {
+    case 'cond': {
+      assert(local.kind === 'cond', 'modelAdoption: cond pairs with cond');
+      return {
+        ...fresh,
+        id: local.id,
+        children: adoptBranchList(local.children, fresh.children, depth),
+      };
+    }
+    case 'component':
+    case 'element': {
+      const localChildren = childListOf(local);
+      const freshChildren = fresh.children;
+      if (freshChildren === null) {
+        if (localChildren === null) {
+          // Both self-closing: the id transfers, nothing to walk.
+          return replaceId(fresh, local.id);
+        }
+        // The source changed the node's shape, so this is not provably the
+        // same slot — the fresh subtree keeps its own ids.
+        return fresh;
+      }
+      if (localChildren === null) {
+        return fresh;
+      }
+      return {
+        ...fresh,
+        id: local.id,
+        children: adoptNodeList(localChildren, freshChildren, depth),
+      };
+    }
+    case 'map':
+    case 'branch':
+    case 'chunk-group': {
+      // Kinds are equal (asserted by the caller), so the local side carries
+      // children here as well — these kinds always do.
+      const localChildren = childListOf(local);
+      assert(localChildren !== null, 'modelAdoption: child-bearing kinds pair with children');
+      return {
+        ...fresh,
+        id: local.id,
+        children: adoptNodeList(localChildren, fresh.children, depth),
+      };
+    }
+    case 'text':
+    case 'expr':
+    case 'raw-line':
+    case 'comment':
+    case 'raw':
+      // Leaves: the id transfers, the fresh payload stays.
+      return replaceId(fresh, local.id);
+    default: {
+      const _exhaustive: never = fresh;
+      return _exhaustive;
+    }
+  }
+}
+
+/** Branches (a cond's `then`/`else` arms) are positional: a branch always
+ * pairs with the branch at the same index, its arms pairing like any other
+ * child list. Kept apart from adoptNodeList because a cond's children are
+ * BranchNode[], which the PageNode-typed walker cannot return. */
+function adoptBranchList(
+  localBranches: readonly BranchNode[],
+  freshBranches: readonly BranchNode[],
+  depth: number,
+): BranchNode[] {
+  assert(depth <= LIMITS.treeDepthMax, 'modelAdoption: tree depth exceeds LIMITS.treeDepthMax');
+  const shared = Math.min(localBranches.length, freshBranches.length);
+  const adopted: BranchNode[] = [];
+  for (let index = 0; index < shared; index += 1) {
+    const localBranch = localBranches[index];
+    const freshBranch = freshBranches[index];
+    assert(localBranch !== undefined, 'modelAdoption: paired local branch missing');
+    assert(freshBranch !== undefined, 'modelAdoption: paired fresh branch missing');
+    adopted.push({
+      ...freshBranch,
+      id: localBranch.id,
+      children: adoptNodeList(localBranch.children, freshBranch.children, depth + 1),
+    });
+  }
+  for (let index = shared; index < freshBranches.length; index += 1) {
+    const freshBranch = freshBranches[index];
+    assert(freshBranch !== undefined, 'modelAdoption: fresh tail branch missing');
+    adopted.push(freshBranch);
+  }
+  return adopted;
+}
+
+function sameSlot(local: PageNode, fresh: PageNode): boolean {
+  if (local.kind !== fresh.kind) {
+    return false;
+  }
+  return namesMatch(nodeName(local), nodeName(fresh));
+}
+
+/** Names must agree where both exist; a node without a name (text, expr, map
+ * loop, comment) pairs on kind alone. For one well-formed kind the name
+ * presence always agrees, so a mixed pair is treated as a mismatch. */
+function namesMatch(localName: string | undefined, freshName: string | undefined): boolean {
+  if (localName === undefined) {
+    return freshName === undefined;
+  }
+  if (freshName === undefined) {
+    return false;
+  }
+  return localName === freshName;
+}
+
+function nodeName(node: PageNode): string | undefined {
+  switch (node.kind) {
+    case 'component':
+    case 'element':
+    case 'raw':
+    case 'branch':
+    case 'chunk-group':
+      return node.name;
+    case 'text':
+    case 'expr':
+    case 'raw-line':
+    case 'comment':
+    case 'map':
+    case 'cond':
+      return undefined;
+    default: {
+      const _exhaustive: never = node;
+      return _exhaustive;
+    }
+  }
+}
+
+/** Local-side children reader; the fresh side reads `children` directly from
+ * its narrowed node. Null for the leaf kinds. */
+function childListOf(node: PageNode): readonly PageNode[] | null {
+  switch (node.kind) {
+    case 'component':
+    case 'element':
+    case 'map':
+    case 'cond':
+    case 'branch':
+    case 'chunk-group':
+      return node.children;
+    case 'text':
+    case 'expr':
+    case 'raw-line':
+    case 'comment':
+    case 'raw':
+      return null;
+    default: {
+      const _exhaustive: never = node;
+      return _exhaustive;
+    }
+  }
+}
+
+// Object spread distributes over the PageNode union, so every member keeps
+// its own shape with only the id replaced.
+function replaceId(node: PageNode, id: NodeId): PageNode {
+  return { ...node, id };
+}
\ No newline at end of file
diff --git a/src/panels/StructurePanel.tsx b/src/panels/StructurePanel.tsx
index f07c62ef..4b3fa0ed 100644
--- a/src/panels/StructurePanel.tsx
+++ b/src/panels/StructurePanel.tsx
@@ -34,6 +34,8 @@ interface StructurePanelProps {
   readonly onSelect: (id: string) => void;
   readonly onHoverNode?: (id: string | null) => void;
   readonly onOpenComponent?: (name: string, id: string) => void;
+  /** A row holding code (frontmatter, <style>, <script>) was double-clicked. */
+  readonly onOpenCode?: (id: string) => void;
   readonly onChangeLayout: (name: string) => void;
   readonly onDropComponent: (name: string, target: DropLocation) => void;
   readonly onMoveNode: (id: string, target: DropLocation) => void;
@@ -342,6 +344,7 @@ function treeContextOf(props: EditableProps, state: TreeState): StructureTreeCon
     onSelect: props.onSelect,
     ...(props.onHoverNode === undefined ? {} : { onHoverNode: props.onHoverNode }),
     ...(props.onOpenComponent === undefined ? {} : { onOpenComponent: props.onOpenComponent }),
+    ...(props.onOpenCode === undefined ? {} : { onOpenCode: props.onOpenCode }),
     toggleCollapse: (node) => {
       state.setToggled((previous) =>
         new Map(previous).set(node.id, !collapsedState(node, previous)),
@@ -445,6 +448,7 @@ function FrontmatterRow({ props }: { readonly props: EditableProps }) {
       className={`structure-node frontmatter-node ${props.selectedId === 'frontmatter' ? 'selected' : ''}`}
       style={{ paddingLeft: 6 }}
       onClick={() => props.onSelect('frontmatter')}
+      onDoubleClick={() => props.onOpenCode?.('frontmatter')}
     >
       <span className="drag-handle" style={{ visibility: 'hidden' }}>
         <DragIcon size={11} />
diff --git a/src/panels/StructureTree.tsx b/src/panels/StructureTree.tsx
index 329f31fc..ecd7876e 100644
--- a/src/panels/StructureTree.tsx
+++ b/src/panels/StructureTree.tsx
@@ -50,6 +50,7 @@ export interface StructureTreeContext {
   readonly onSelect: (id: string) => void;
   readonly onHoverNode?: (id: string | null) => void;
   readonly onOpenComponent?: (name: string, id: string) => void;
+  readonly onOpenCode?: (id: string) => void;
   readonly toggleCollapse: (node: NavigatorNode) => void;
   readonly openContextMenu: (left: number, top: number, nodeId: string) => void;
 }
@@ -194,6 +195,7 @@ function treeContextFromRow(props: TreeNodeProps): StructureTreeContext {
     onSelect: props.onSelect,
     ...(props.onHoverNode === undefined ? {} : { onHoverNode: props.onHoverNode }),
     ...(props.onOpenComponent === undefined ? {} : { onOpenComponent: props.onOpenComponent }),
+    ...(props.onOpenCode === undefined ? {} : { onOpenCode: props.onOpenCode }),
     toggleCollapse: props.toggleCollapse,
     openContextMenu: props.openContextMenu,
   };
@@ -323,7 +325,12 @@ function treeRowHandlers(props: TreeRowProps) {
       props.onSelect(node.id);
     },
     onDoubleClick: (event: React.MouseEvent<HTMLDivElement>): void => {
-      openComponent(event, props);
+      // A <script> or <style> is code, not markup: it opens in the code editor.
+      if (node.kind === 'raw') {
+        openCode(event, props);
+      } else {
+        openComponent(event, props);
+      }
     },
     onMouseEnter: (): void => props.onHoverNode?.(node.id),
     onMouseLeave: (): void => props.onHoverNode?.(null),
@@ -335,6 +342,16 @@ function treeRowHandlers(props: TreeRowProps) {
   };
 }
 
+// The row's own id is passed on: its click has only just asked for the
+// selection, which still names the previous row when the double-click lands.
+function openCode(event: React.MouseEvent<HTMLDivElement>, props: TreeRowProps): void {
+  if (!props.onOpenCode) {
+    return;
+  }
+  event.stopPropagation();
+  props.onOpenCode(props.node.id);
+}
+
 function openComponent(event: React.MouseEvent<HTMLDivElement>, props: TreeRowProps): void {
   const { node } = props;
   if (!props.component || (node.kind === 'component' && node.astroAsset)) {
diff --git a/test/model-adoption.test.js b/test/model-adoption.test.js
new file mode 100644
index 00000000..ea2b0e02
--- /dev/null
+++ b/test/model-adoption.test.js
@@ -0,0 +1,196 @@
+// Goal: pin the id-adoption contract that keeps editor focus stable across
+// saves (issue #29) — a fresh parse keeps its structure and source ranges but
+// borrows the session's ids wherever the two trees agree on the same slot.
+//
+// Methodology: unit cases over hand-built trees cover the pairing rule and its
+// negative space (kind, name, children-shape mismatches, tails, bounds); a
+// parser round trip covers the real save path end to end. Inputs must never be
+// mutated.
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const loadRenderer = require('./renderer-module');
+
+const { adoptNodeIds } = loadRenderer('modelAdoption.ts');
+const { parsePage, serializePage } = require('../dist/electron/astroParser.js');
+
+function text(id, value) {
+  return { kind: 'text', id, value };
+}
+
+function element(id, name, children, props) {
+  const node = { kind: 'element', id, name, children };
+  if (props !== undefined) {
+    node.props = props;
+  }
+  return node;
+}
+
+function ids(nodes) {
+  const found = [];
+  const walk = (list) => {
+    for (const node of list) {
+      found.push(node.id);
+      if (Array.isArray(node.children)) {
+        walk(node.children);
+      }
+    }
+  };
+  walk(nodes);
+  return found;
+}
+
+function deepClone(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+
+function nest(depth, baseId) {
+  let node = text(`${baseId}-leaf`, 'deep');
+  for (let level = 0; level < depth; level += 1) {
+    node = element(`${baseId}-${level}`, 'div', [node]);
+  }
+  return [node];
+}
+
+test('identical trees adopt every local id without mutating the inputs', () => {
+  const local = [element('n1', 'div', [text('n2', 'hi'), element('n3', 'p', [text('n4', 'x')])])];
+  const fresh = [element('n7', 'div', [text('n8', 'hi'), element('n9', 'p', [text('n10', 'x')])])];
+  const localBefore = deepClone(local);
+  const freshBefore = deepClone(fresh);
+  const adopted = adoptNodeIds(local, fresh);
+  assert.deepEqual(ids(adopted), ['n1', 'n2', 'n3', 'n4']);
+  assert.deepEqual(deepClone(local), localBefore, 'local input mutated');
+  assert.deepEqual(deepClone(fresh), freshBefore, 'fresh input mutated');
+});
+
+test('the per-keystroke case: changed text adopts the session id and keeps the typed content', () => {
+  const local = [element('n1', 'h1', [text('n2', 'Hel')])];
+  const fresh = [element('n5', 'h1', [text('n6', 'Hello')])];
+  const adopted = adoptNodeIds(local, fresh);
+  assert.equal(adopted.length, 1);
+  assert.equal(adopted[0].id, 'n1');
+  assert.equal(adopted[0].children[0].id, 'n2');
+  assert.equal(adopted[0].children[0].value, 'Hello');
+});
+
+test('a kind mismatch keeps fresh ids there while aligned siblings still adopt', () => {
+  const local = [element('n1', 'div', []), element('n2', 'p', [text('n3', 'keep')])];
+  const fresh = [text('n8', 'new'), element('n9', 'p', [text('n10', 'keep')])];
+  // Position 1 pairs element-with-element (same kind, same name), so it adopts
+  // the session id; only the mismatched slot keeps its fresh id.
+  const adopted = adoptNodeIds(local, fresh);
+  assert.deepEqual(ids(adopted), ['n8', 'n2', 'n3']);
+  assert.equal(adopted[1].children[0].value, 'keep');
+});
+
+test('a name mismatch keeps fresh ids so an inserted element cannot borrow a displaced id', () => {
+  const local = [element('n1', 'h1', [text('n2', 'title')])];
+  const fresh = [element('n5', 'div', [text('n6', 'title')])];
+  assert.deepEqual(ids(adoptNodeIds(local, fresh)), ['n5', 'n6']);
+});
+
+test('a children-shape mismatch (self-closing vs paired) is not the same slot', () => {
+  const local = [element('n1', 'br', [text('n2', 'was paired')])];
+  const fresh = [element('n5', 'br', null)];
+  assert.deepEqual(ids(adoptNodeIds(local, fresh)), ['n5']);
+});
+
+test('components pair by name like elements', () => {
+  const card = [{ kind: 'component', id: 'n1', name: 'Card', children: null }];
+  assert.deepEqual(ids(adoptNodeIds(card, [{ kind: 'component', id: 'n5', name: 'Card', children: null }])), ['n1']);
+  assert.deepEqual(ids(adoptNodeIds(card, [{ kind: 'component', id: 'n5', name: 'Tabs', children: null }])), ['n5']);
+});
+
+test('a longer fresh list is genuinely new nodes: the tail keeps fresh ids', () => {
+  const local = [element('n1', 'div', [text('n2', 'a')])];
+  const fresh = [element('n5', 'div', [text('n6', 'a')]), element('n7', 'p', [text('n8', 'b')])];
+  assert.deepEqual(ids(adoptNodeIds(local, fresh)), ['n1', 'n2', 'n7', 'n8']);
+});
+
+test('a longer local list means removed nodes: the shared prefix adopts without crashing', () => {
+  const local = [element('n1', 'div', [text('n2', 'a')]), element('n3', 'p', [text('n4', 'b')])];
+  const fresh = [element('n5', 'div', [text('n6', 'a')])];
+  assert.deepEqual(ids(adoptNodeIds(local, fresh)), ['n1', 'n2']);
+});
+
+test('deep trees adopt at every level below the contract depth bound', () => {
+  const local = nest(30, 'n1');
+  const fresh = nest(30, 'n8');
+  assert.deepEqual(ids(adoptNodeIds(local, fresh)), ids(local));
+});
+
+test('a tree deeper than LIMITS.treeDepthMax asserts', () => {
+  assert.throws(() => adoptNodeIds(nest(64, 'n1'), nest(64, 'n8')), /tree depth/);
+});
+
+test('a list longer than LIMITS.treeNodesMax asserts', () => {
+  const huge = Array.from({ length: 20_001 }, (_, index) => text(`n${index + 1}`, 'x'));
+  assert.throws(() => adoptNodeIds(huge, [text('n1', 'x')]), /treeNodesMax/);
+});
+
+test('nameless kinds (map loops) pair on kind alone, like text', () => {
+  const local = [{ kind: 'map', id: 'n1', head: 'project of projects', children: [text('n2', 'x')] }];
+  const fresh = [{ kind: 'map', id: 'n5', head: 'post of posts', children: [text('n6', 'y')] }];
+  const adopted = adoptNodeIds(local, fresh);
+  assert.deepEqual(ids(adopted), ['n1', 'n2']);
+  assert.equal(adopted[0].head, 'post of posts');
+});
+
+test('list-level markdown metadata survives adoption from the fresh list', () => {
+  // A fresh markdown parse carries mdTrailingBlanks on the top-level list;
+  // adopting must not drop it or serialization round trips would drift.
+  const local = [text('n1', 'body')];
+  const fresh = Object.assign([text('n2', 'body')], { mdTrailingBlanks: 1 });
+  const adopted = adoptNodeIds(local, fresh);
+  assert.deepEqual(ids(adopted), ['n1']);
+  assert.equal(adopted.mdTrailingBlanks, 1);
+});
+
+test('a parser round trip with a panel edit keeps every session id', () => {
+  // The real save path: parse → panel edit (text value only) → serialize →
+  // re-parse → adopt. Every node keeps the session id, and the typed content
+  // is what the adopted tree carries.
+  const source = [
+    '---',
+    "import Card from '../components/Card.astro';",
+    '---',
+    '<section class="wrap">',
+    '  <h1>Hello</h1>',
+    '  <Card>',
+    '    <p>Body text</p>',
+    '  </Card>',
+    '  <img src="a.png" />',
+    '</section>',
+    '',
+  ].join('\n');
+  const parsed = parsePage(source);
+  assert.equal(parsed.editable, true, 'fixture page must parse');
+  const local = parsed.model;
+  const walk = (nodes, visit) => {
+    for (const node of nodes) {
+      visit(node);
+      if (Array.isArray(node.children)) {
+        walk(node.children, visit);
+      }
+    }
+  };
+  walk(local.nodes, (node) => {
+    if (node.kind === 'text' && node.value === 'Hello') {
+      node.value = 'Hello!';
+    }
+  });
+
+  const fresh = parsePage(serializePage(local));
+  assert.equal(fresh.editable, true, 'round-tripped page must parse');
+  assert.notDeepEqual(ids(fresh.model.nodes), ids(local.nodes), 'parser ids must regenerate');
+
+  const adopted = adoptNodeIds(local.nodes, fresh.model.nodes);
+  assert.deepEqual(ids(adopted), ids(local.nodes));
+  const titles = [];
+  walk(adopted, (node) => {
+    if (node.kind === 'text') {
+      titles.push(node.value);
+    }
+  });
+  assert.ok(titles.includes('Hello!'), 'adopted tree carries the fresh content');
+});
\ No newline at end of file
diff --git a/test/navigator-open-code.js b/test/navigator-open-code.js
new file mode 100644
index 00000000..4db50c67
--- /dev/null
+++ b/test/navigator-open-code.js
@@ -0,0 +1,169 @@
+// Goal: a double-click on a navigator row that holds code opens that code in the
+// floating editor — the one Enter and the "Edit code" button already open.
+//
+// Methodology: two layers, each checked on its own.
+// 1. `codeWindowFor`, the pure rule shared by Enter, the button and the
+//    double-click: which subject opens which editor, and what has none.
+// 2. The navigator itself, rendered in JSDOM: a double-click on the Frontmatter,
+//    a <style> or a <script> row reports that row's id — not the selection,
+//    which the row's own click has only just asked for — while element and
+//    component rows keep the behaviour they had.
+//
+//   node test/navigator-open-code.js
+
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const esbuild = require('esbuild');
+
+const buildDir = path.join(__dirname, '..', 'node_modules', '.stacki-test');
+const settle = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const bundle = async (entry, name) => {
+  const outfile = path.join(buildDir, name);
+  await esbuild.build({
+    entryPoints: [path.join(__dirname, '..', 'src', ...entry)],
+    outfile,
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    jsx: 'automatic',
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
+    logLevel: 'silent',
+  });
+  return require(outfile);
+};
+
+const raw = (id, name) => ({ id, kind: 'raw', name, inner: 'a {}' });
+const element = (id, name, children = []) => ({
+  id,
+  kind: 'element',
+  name,
+  props: { class: id },
+  children,
+});
+const component = (id, name) => ({ id, kind: 'component', name, props: {}, children: [] });
+
+function checkCodeWindowRule({ codeWindowFor }) {
+  assert.deepEqual(codeWindowFor({ id: 'frontmatter', kind: 'frontmatter' }), {
+    targetId: 'frontmatter',
+    title: 'Frontmatter',
+    language: 'javascript',
+  });
+  assert.deepEqual(codeWindowFor(raw('s1', 'style')), {
+    targetId: 's1',
+    title: '<style>',
+    language: 'css',
+  });
+  assert.deepEqual(codeWindowFor(raw('j1', 'script')), {
+    targetId: 'j1',
+    title: '<script>',
+    language: 'javascript',
+  });
+  // The parser keeps a tag as written, so a capitalised one must still open.
+  assert.deepEqual(codeWindowFor(raw('s2', 'STYLE')), {
+    targetId: 's2',
+    title: '<STYLE>',
+    language: 'css',
+  });
+  // Markup has no code editor of its own: Enter on it must stay unhandled.
+  assert.equal(codeWindowFor(element('e1', 'div')), undefined);
+  assert.equal(codeWindowFor(component('c1', 'Card')), undefined);
+  // The parser only ever makes <style> and <script> raw. Any other name is a
+  // broken invariant, not a language to guess.
+  assert.throws(
+    () => codeWindowFor(raw('t1', 'template')),
+    /Assertion failed: raw node <template> has no code language/,
+  );
+  assert.throws(() => codeWindowFor(raw('', 'style')), /Assertion failed: raw node has an id/);
+}
+
+function installDom() {
+  const { JSDOM } = require('jsdom');
+  const dom = new JSDOM('<!doctype html><div id="root"></div>', { pretendToBeVisual: true });
+  global.window = dom.window;
+  global.document = dom.window.document;
+  global.navigator = dom.window.navigator;
+  global.Element = dom.window.Element;
+  global.HTMLElement = dom.window.HTMLElement;
+  global.Node = dom.window.Node;
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+  dom.window.Element.prototype.scrollIntoView = function scrollIntoView() {};
+  return dom;
+}
+
+async function checkNavigator(StructurePanel) {
+  const dom = installDom();
+  const React = require('react');
+  const { act } = require('react');
+  const { createRoot } = require('react-dom/client');
+  const container = dom.window.document.getElementById('root');
+  const reactRoot = createRoot(container);
+  const opened = { code: [], component: [] };
+  const nodes = [
+    element('page', 'main', [raw('s1', 'style'), element('e1', 'div'), component('c1', 'Card')]),
+    raw('j1', 'script'),
+  ];
+  await act(async () => {
+    reactRoot.render(
+      React.createElement(StructurePanel, {
+        pageState: { editable: true, model: { nodes, imports: [] } },
+        layouts: [],
+        currentLayoutName: '',
+        selectedId: null,
+        onSelect: () => {},
+        onOpenCode: (id) => opened.code.push(id),
+        onOpenComponent: (name, id) => opened.component.push(`${name}:${id}`),
+        onChangeLayout: () => {},
+        onDropComponent: () => {},
+        onMoveNode: () => {},
+        onRemoveNode: () => {},
+        onCopyNode: () => {},
+        onDuplicateNode: () => {},
+        onPasteNode: () => {},
+        onRawChange: () => {},
+        hasClipboard: false,
+      }),
+    );
+    await settle(20);
+  });
+  // Everything starts collapsed; the header button opens it all.
+  await act(async () => {
+    container.querySelector('.panel-header button').click();
+    await settle(20);
+  });
+  const doubleClick = async (row) => {
+    assert.ok(row, 'the row to double-click is drawn');
+    opened.code.length = 0;
+    opened.component.length = 0;
+    await act(async () => {
+      row.dispatchEvent(new dom.window.MouseEvent('dblclick', { bubbles: true }));
+      await settle(10);
+    });
+    return { code: [...opened.code], component: [...opened.component] };
+  };
+  const rowFor = (id) => container.querySelector(`.structure-node[data-node-id="${id}"]`);
+
+  const frontmatter = await doubleClick(container.querySelector('.frontmatter-node'));
+  assert.deepEqual(frontmatter, { code: ['frontmatter'], component: [] });
+  assert.deepEqual(await doubleClick(rowFor('s1')), { code: ['s1'], component: [] });
+  assert.deepEqual(await doubleClick(rowFor('j1')), { code: ['j1'], component: [] });
+  // Rows without code keep what they did before: nothing, or open the component.
+  assert.deepEqual(await doubleClick(rowFor('e1')), { code: [], component: [] });
+  assert.deepEqual(await doubleClick(rowFor('c1')), { code: [], component: ['Card:c1'] });
+  await act(async () => reactRoot.unmount());
+}
+
+(async () => {
+  fs.mkdirSync(buildDir, { recursive: true });
+  checkCodeWindowRule(await bundle(['codeWindowTarget.ts'], 'code-window-target.cjs'));
+  const { default: StructurePanel } = await bundle(
+    ['panels', 'StructurePanel.tsx'],
+    'navigator-open-code.cjs',
+  );
+  await checkNavigator(StructurePanel);
+  console.log('navigator-open-code: all checks passed');
+})().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/test/page-navigation.test.js b/test/page-navigation.test.js
index b936988d..0255ec62 100644
--- a/test/page-navigation.test.js
+++ b/test/page-navigation.test.js
@@ -132,14 +132,16 @@ test('out-of-order page reads and external reads cannot replace the current edit
   await act(async () => { reads[3].resolve(pageState('older-disk')); await olderReload; await tick(); });
   assert.equal(__panels.PropsPanel.node.id, nodeId('third'));
   await act(async () => { reads[4].resolve(pageState('latest-disk')); await newerReload; await tick(); });
-  assert.equal(__panels.PropsPanel.node.id, nodeId('latest-disk'));
+  // An external read is re-keyed onto the session's node ids (issue #29), so
+  // the node at the same trail keeps the id the editor already knows.
+  assert.equal(__panels.PropsPanel.node.id, nodeId('third'));
   // Begin an external reload, then edit while it is waiting on disk.
   let external;
   await act(async () => { external = onFsChanged({ files: [pages[2].path] }); await tick(); });
   assert.equal(reads.length, 6);
   await act(async () => { __panels.PropsPanel.onSetProp('title', { type: 'string', value: 'keep this' }); await tick(); });
   await act(async () => { reads[5].resolve(pageState('stale-disk')); await external; await tick(); });
-  assert.equal(__panels.PropsPanel.node.id, nodeId('latest-disk'));
+  assert.equal(__panels.PropsPanel.node.id, nodeId('third'));
   assert.equal(__panels.PropsPanel.node.props.title.value, 'keep this');
   await act(async () => { await new Promise((resolve) => setTimeout(resolve, 350)); });
   assert.equal(writes.at(-1).pagePath, pages[2].path);
@@ -152,7 +154,7 @@ test('out-of-order page reads and external reads cannot replace the current edit
   await act(async () => { componentReload = onFsChanged({ files: [scan.components[0].path] }); await tick(); });
   assert.equal(reads[7].path, scan.components[0].path, 'an open component is reloaded, not treated as deleted');
   await act(async () => { reads[7].resolve(pageState('card-updated')); await componentReload; await tick(); });
-  assert.equal(__panels.PropsPanel.node.id, nodeId('card-updated'));
+  assert.equal(__panels.PropsPanel.node.id, nodeId('card'));
   assert.equal(__panels.PropsPanel.filePath, scan.components[0].path);
   writeError = new Error('disk full');
   await act(async () => { __panels.PropsPanel.onSetProp('title', { type: 'string', value: 'unsaved card' }); await tick(); });
@@ -177,7 +179,7 @@ test('out-of-order page reads and external reads cannot replace the current edit
   await act(async () => { scans[1].resolve(latestScan); await tick(); });
   assert.equal(reads[9].path, pages[1].path, 'the unrelated later event keeps the earlier page change');
   await act(async () => { reads[9].resolve(pageState('after-newest-scan')); await laterScanEvent; await tick(); });
-  assert.equal(__panels.PropsPanel.node.id, nodeId('after-newest-scan'));
+  assert.equal(__panels.PropsPanel.node.id, nodeId('second-retry'));
   // The earlier snapshot says the page was deleted. It must neither replace
   // the panel lists nor clear the recreated page the newer scan already read.
   await act(async () => {
@@ -186,7 +188,7 @@ test('out-of-order page reads and external reads cannot replace the current edit
     await tick();
   });
   assert.equal(__panels.StructurePanel.currentPage.path, pages[1].path);
-  assert.equal(__panels.PropsPanel.node.id, nodeId('after-newest-scan'));
+  assert.equal(__panels.PropsPanel.node.id, nodeId('second-retry'));
   assert.deepEqual(__panels.StructurePanel.layouts, latestScan.layouts);
 
   // The same accumulation must span a pending READ, not only its scan.
@@ -197,9 +199,9 @@ test('out-of-order page reads and external reads cannot replace the current edit
   assert.equal(reads[10].path, pages[1].path);
   assert.equal(reads[11].path, pages[1].path);
   await act(async () => { reads[10].resolve(pageState('stale-before-unrelated')); await pendingReadEvent; await tick(); });
-  assert.equal(__panels.PropsPanel.node.id, nodeId('after-newest-scan'));
+  assert.equal(__panels.PropsPanel.node.id, nodeId('second-retry'));
   await act(async () => { reads[11].resolve(pageState('latest-after-unrelated')); await unrelatedEvent; await tick(); });
-  assert.equal(__panels.PropsPanel.node.id, nodeId('latest-after-unrelated'));
+  assert.equal(__panels.PropsPanel.node.id, nodeId('second-retry'));
   await act(async () => root.unmount());
   dom.window.close();
 });