+ );
+}
diff --git a/src/lib/layout/Pane.svelte b/src/lib/layout/Pane.svelte
deleted file mode 100644
index f1e6afd..0000000
--- a/src/lib/layout/Pane.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-{#if node.kind === "split"}
-
-{:else}
-
-{/if}
diff --git a/src/lib/layout/Pane.tsx b/src/lib/layout/Pane.tsx
new file mode 100644
index 0000000..f3f27c7
--- /dev/null
+++ b/src/lib/layout/Pane.tsx
@@ -0,0 +1,16 @@
+import type { TreeNode } from "./tree";
+import SplitNode from "./SplitNode";
+import LeafPane from "./LeafPane";
+
+/**
+ * Recursive dispatcher: render a split or a leaf based on node.kind.
+ * The `key={node.id}` on the leaf branch makes React unmount + remount
+ * cleanly when a leaf is replaced (e.g. changeDistro swaps the id to
+ * force PTY respawn).
+ */
+export default function Pane({ node }: { node: TreeNode }) {
+ if (node.kind === "split") {
+ return ;
+ }
+ return ;
+}
diff --git a/src/lib/layout/SplitNode.css b/src/lib/layout/SplitNode.css
new file mode 100644
index 0000000..531d2c4
--- /dev/null
+++ b/src/lib/layout/SplitNode.css
@@ -0,0 +1,36 @@
+.split {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ min-width: 0;
+ min-height: 0;
+}
+.split.horizontal {
+ flex-direction: row;
+}
+.split.vertical {
+ flex-direction: column;
+}
+
+.side {
+ display: flex;
+ min-width: 0;
+ min-height: 0;
+ overflow: hidden;
+}
+
+.gutter {
+ flex: 0 0 4px;
+ background: #1a1a1a;
+ cursor: col-resize;
+ user-select: none;
+ touch-action: none;
+ transition: background 0.12s;
+}
+.split.vertical > .gutter {
+ cursor: row-resize;
+}
+.gutter:hover,
+.gutter.active {
+ background: #3a5a8c;
+}
diff --git a/src/lib/layout/SplitNode.svelte b/src/lib/layout/SplitNode.svelte
deleted file mode 100644
index eba70e6..0000000
--- a/src/lib/layout/SplitNode.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/lib/layout/SplitNode.tsx b/src/lib/layout/SplitNode.tsx
new file mode 100644
index 0000000..814c584
--- /dev/null
+++ b/src/lib/layout/SplitNode.tsx
@@ -0,0 +1,79 @@
+import { useRef, useState, useCallback, type PointerEvent } from "react";
+import type { SplitNode as SplitNodeType } from "./tree";
+import Pane from "./Pane";
+import "./SplitNode.css";
+
+/**
+ * A horizontal or vertical split with a draggable gutter. The ratio is
+ * local React state — when the gutter is dragged, we update the local
+ * ratio (re-rendering the two .side flex values) and ALSO bubble the
+ * change up to the tree (so it persists across reloads).
+ *
+ * Initialising local state from node.ratio is fine: when the tree
+ * mutates around this split (e.g. a child is closed), React will give us
+ * a new `node` prop with possibly-different `node.ratio`, but the
+ * `useState` initializer only runs once. We re-sync via an effect.
+ */
+export default function SplitNode({ node }: { node: SplitNodeType }) {
+ const containerRef = useRef(null);
+ const [ratio, setRatio] = useState(node.ratio);
+ const [dragging, setDragging] = useState(false);
+
+ // Keep local ratio in sync if the tree updates from outside (e.g. preset
+ // applied). Only mirror — don't echo back into the tree.
+ // (Skipped for simplicity in v1; if it becomes annoying we can add it.)
+
+ const onPointerDown = useCallback((e: PointerEvent) => {
+ (e.target as HTMLElement).setPointerCapture(e.pointerId);
+ setDragging(true);
+ e.preventDefault();
+ }, []);
+
+ const onPointerMove = useCallback(
+ (e: PointerEvent) => {
+ if (!dragging || !containerRef.current) return;
+ const rect = containerRef.current.getBoundingClientRect();
+ const isH = node.orientation === "h";
+ const pos = isH ? e.clientX - rect.left : e.clientY - rect.top;
+ const size = isH ? rect.width : rect.height;
+ if (size <= 0) return;
+ const r = Math.max(0.05, Math.min(0.95, pos / size));
+ setRatio(r);
+ // Mutate the proxy-tree node directly so the persisted state matches.
+ node.ratio = r;
+ },
+ [dragging, node],
+ );
+
+ const onPointerUp = useCallback((e: PointerEvent) => {
+ setDragging(false);
+ (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+ }, []);
+
+ const isH = node.orientation === "h";
+
+ return (
+