1 files changed, 39 insertions, 0 deletions
diff --git a/src/features/layout/ui/TileRoot.svelte b/src/features/layout/ui/TileRoot.svelte
new file mode 100644
index 0000000..82ad430
--- /dev/null
+++ b/src/features/layout/ui/TileRoot.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  /**
+   * The tile-tree root. Renders the tree (titlebar slot first — unset renders
+   * nothing, D-L5), applies panel edit ops to its `tree` prop, and forwards the
+   * new tree via `onTreeChange`. The OWNER decides what persistence means
+   * (App/localStorage today; the backend layout store in plan 02).
+   */
+  import { applyOps, type LayoutOp, type LayoutTree } from "@dispatch/layout-contract";
+  import type { CollapseStore } from "../logic/collapse";
+  import TileNode from "./TileNode.svelte";
+
+  let {
+    tree,
+    onTreeChange,
+    ports,
+    collapse,
+  }: {
+    tree: LayoutTree;
+    onTreeChange?: (tree: LayoutTree) => void;
+    ports?: unknown;
+    collapse: CollapseStore;
+  } = $props();
+
+  function handleEdit(ops: readonly LayoutOp[]): void {
+    const result = applyOps(tree, ops);
+    if (result.ok) {
+      onTreeChange?.(result.tree);
+    } else {
+      // A panel edit that fails validation (e.g. removing the last panel) is
+      // refused loudly in dev — the tree keeps its previous state.
+      console.error(`TileRoot: layout edit refused: ${result.error}`);
+    }
+  }
+</script>
+
+{#if tree.titlebar !== undefined}
+  <TileNode node={tree.titlebar} path={["titlebar"]} {ports} {collapse} onEdit={handleEdit} />
+{/if}
+<TileNode node={tree.root} path={[]} {ports} {collapse} onEdit={handleEdit} />