feat(layout): plan 01 — tile engine + view registry

11 files changed, 561 insertions, 0 deletions

diff --git a/src/features/layout/ui/FallbackTile.svelte b/src/features/layout/ui/FallbackTile.svelte
new file mode 100644
index 0000000..8fafa7f
--- /dev/null
+++ b/src/features/layout/ui/FallbackTile.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  /**
+   * Shown when a leaf names a view this client has not registered — the tree
+   * is data and can arrive from a backend (plan 02) that knows views this
+   * build lacks. A titled placeholder, never a crash.
+   */
+  let { viewId }: { viewId: string } = $props();
+</script>
+
+<div class="flex flex-col gap-1 rounded-lg bg-base-200 p-3" data-testid="fallback-tile">
+  <h3 class="text-xs font-semibold uppercase opacity-60">{viewId}</h3>
+  <p class="text-sm opacity-60">View not registered.</p>
+</div>
diff --git a/src/features/layout/ui/TileLeaf.svelte b/src/features/layout/ui/TileLeaf.svelte
new file mode 100644
index 0000000..cd61b6b
--- /dev/null
+++ b/src/features/layout/ui/TileLeaf.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  /**
+   * Mounts a registered view for a leaf node. Resolution goes through the
+   * REACTIVE registry, so a late registration (plan 03) swaps the tile in
+   * without a tree change. An unknown view id renders a fallback tile —
+   * NEVER a crash (backend-owned trees can name views this client lacks).
+   */
+  import { viewRegistry, type RegisteredView } from "../logic/registry";
+  import FallbackTile from "./FallbackTile.svelte";
+
+  let { node, ports }: { node: { readonly view: string }; ports?: unknown } = $props();
+
+  const entry: RegisteredView | undefined = $derived(
+    $viewRegistry.find((v) => v.id === node.view),
+  );
+  const View = $derived(entry?.component);
+</script>
+
+{#if View}
+  <View {ports} />
+{:else}
+  <FallbackTile viewId={node.view} />
+{/if}
diff --git a/src/features/layout/ui/TileNode.svelte b/src/features/layout/ui/TileNode.svelte
new file mode 100644
index 0000000..5ed8a89
--- /dev/null
+++ b/src/features/layout/ui/TileNode.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  /**
+   * The recursive tile dispatcher: renders the node for its `kind` and recurses
+   * through the container components. Leaf nodes resolve through the view
+   * registry (TileLeaf).
+   */
+  import type { LayoutNode, LayoutOp, Path } from "@dispatch/layout-contract";
+  import type { CollapseStore } from "../logic/collapse";
+  import TileLeaf from "./TileLeaf.svelte";
+  import TilePanels from "./TilePanels.svelte";
+  import TileSplit from "./TileSplit.svelte";
+  import TileStack from "./TileStack.svelte";
+
+  let {
+    node,
+    path,
+    ports,
+    collapse,
+    onEdit,
+  }: {
+    node: LayoutNode;
+    path: Path;
+    ports?: unknown;
+    collapse: CollapseStore;
+    onEdit: (ops: readonly LayoutOp[]) => void;
+  } = $props();
+</script>
+
+{#if node.kind === "split"}
+  <TileSplit {node} {path} {ports} {collapse} {onEdit} />
+{:else if node.kind === "stack"}
+  <TileStack {node} {path} {ports} {collapse} {onEdit} />
+{:else if node.kind === "panels"}
+  <TilePanels {node} {path} {ports} {onEdit} />
+{:else if node.kind === "leaf"}
+  <TileLeaf {node} {ports} />
+{/if}
diff --git a/src/features/layout/ui/TilePanels.svelte b/src/features/layout/ui/TilePanels.svelte
new file mode 100644
index 0000000..ca597fe
--- /dev/null
+++ b/src/features/layout/ui/TilePanels.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  /**
+   * A scrolling stack of swappable panels — the generalized ViewSidebar. The
+   * panel list comes from the tree node; dropdown options from the (reactive)
+   * registry's panel-eligible views. Edits emit tree ops upward via `onEdit`;
+   * the OWNER (App today, the backend store in plan 02) applies them and
+   * decides persistence.
+   */
+  import type { LayoutOp, PanelsNode, Path } from "@dispatch/layout-contract";
+  import { viewRegistry } from "../logic/registry";
+  import { addPanelOp, firstPanelView, removePanelOp, swapPanelOp } from "../logic/panels-edit";
+  import TileLeaf from "./TileLeaf.svelte";
+
+  let {
+    node,
+    path,
+    ports,
+    onEdit,
+  }: {
+    node: PanelsNode;
+    path: Path;
+    ports?: unknown;
+    onEdit: (ops: readonly LayoutOp[]) => void;
+  } = $props();
+
+  // Panel-eligible views only (decision 5): chat/composer/message-queue never
+  // appear in the dropdowns. Reactive so late registrations re-render options.
+  const panelViews = $derived($viewRegistry.filter((v) => v.panelEligible));
+  const addView = $derived(firstPanelView(panelViews));
+</script>
+
+<div class="flex min-h-0 flex-col gap-2">
+  {#each node.panels as panel, idx (idx)}
+    <div class="flex flex-col rounded-lg bg-base-200 p-3">
+      <div class="flex items-center gap-1">
+        <select
+          class="select select-bordered select-sm flex-1"
+          aria-label="Select a view"
+          value={panel.view}
+          onchange={(e) => onEdit([swapPanelOp(path, idx, e.currentTarget.value)])}
+        >
+          <option value="" disabled>Select a view</option>
+          {#each panelViews as view (view.id)}
+            <option value={view.id}>{view.label}</option>
+          {/each}
+        </select>
+        {#if idx > 0}
+          <button
+            type="button"
+            class="btn btn-square btn-ghost btn-sm shrink-0"
+            aria-label="Remove view"
+            onclick={() => onEdit([removePanelOp(path, idx)])}
+          >
+            ✕
+          </button>
+        {/if}
+      </div>
+
+      <div class="mt-2">
+        <TileLeaf node={panel} {ports} />
+      </div>
+    </div>
+  {/each}
+
+  {#if addView !== null}
+    <button
+      type="button"
+      class="btn w-full border-none bg-base-200 text-lg hover:bg-base-300"
+      aria-label="Add view"
+      onclick={() => addView !== null && onEdit([addPanelOp(path, addView)])}
+    >
+      +
+    </button>
+  {/if}
+</div>
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} />
diff --git a/src/features/layout/ui/TileRoot.test.ts b/src/features/layout/ui/TileRoot.test.ts
new file mode 100644
index 0000000..27b8e0a
--- /dev/null
+++ b/src/features/layout/ui/TileRoot.test.ts
@@ -0,0 +1,228 @@
+import type { LayoutTree, SplitNode } from "@dispatch/layout-contract";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { createCollapseStore, registerView, unregisterView } from "../index";
+import FixtureA from "./fixtures/FixtureA.svelte";
+import FixtureB from "./fixtures/FixtureB.svelte";
+import FixtureC from "./fixtures/FixtureC.svelte";
+import TileRoot from "./TileRoot.svelte";
+
+// Fixture registry: two panel-eligible views + one content-only view (a THIRD
+// component, so every fixture testid is unique in the rendered tree).
+registerView({ id: "fix-a", label: "Alpha View", component: FixtureA });
+registerView({ id: "fix-b", label: "Beta View", component: FixtureB });
+registerView({ id: "fix-content", label: "Content", component: FixtureC, panelEligible: false });
+
+function leaf(view: string): { kind: "leaf"; view: string } {
+  return { kind: "leaf", view };
+}
+
+/** split[ stack[leaf a (grow), leaf content], collapsible panels[leaf b] ] */
+function defaultTestTree(): LayoutTree {
+  return {
+    version: 1,
+    root: {
+      kind: "split",
+      id: "root",
+      dir: "row",
+      children: [
+        {
+          size: 1,
+          node: {
+            kind: "stack",
+            id: "main",
+            children: [{ grow: 1, node: leaf("fix-a") }, { node: leaf("fix-content") }],
+          },
+        },
+        {
+          size: 0,
+          basis: 320,
+          collapsible: true,
+          node: { kind: "panels", id: "side", panels: [leaf("fix-b")] },
+        },
+      ],
+    },
+  };
+}
+
+/** A bare panels root — panel EDITS without the collapsible chrome in the way. */
+function panelsOnlyTree(...views: string[]): LayoutTree {
+  return { version: 1, root: { kind: "panels", id: "side", panels: views.map(leaf) } };
+}
+
+function sidePanelsOf(tree: LayoutTree | null): string[] {
+  if (tree === null) return [];
+  const side = (tree.root as SplitNode).children?.[1]?.node;
+  return side?.kind === "panels"
+    ? side.panels.map((p) => p.view)
+    : tree.root.kind === "panels"
+      ? tree.root.panels.map((p) => p.view)
+      : [];
+}
+
+describe("TileRoot", () => {
+  it("renders every node kind: split, stack, panels, leaf", () => {
+    // A FRESH collapse store per test — the store is stateful chrome.
+    render(TileRoot, {
+      props: { tree: defaultTestTree(), collapse: createCollapseStore({ viewportWidth: 1024 }) },
+    });
+    // Stack children mount their registered components.
+    expect(screen.getByTestId("fixture-a")).toBeInTheDocument();
+    expect(screen.getByTestId("fixture-c")).toBeInTheDocument();
+    // The panels node renders its panel leaf + the dropdown.
+    expect(screen.getByTestId("fixture-b")).toBeInTheDocument();
+    expect(screen.getByRole("combobox", { name: "Select a view" })).toBeInTheDocument();
+  });
+
+  it("shows a fallback tile (never a crash) for an unknown view id", () => {
+    const tree: LayoutTree = {
+      version: 1,
+      root: { kind: "leaf", view: "not-registered-anywhere" },
+    };
+    render(TileRoot, { props: { tree, collapse: createCollapseStore() } });
+    const fallback = screen.getByTestId("fallback-tile");
+    expect(fallback).toHaveTextContent("not-registered-anywhere");
+    expect(fallback).toHaveTextContent("View not registered.");
+  });
+
+  it("renders nothing for the titlebar slot while it is unset (D-L5)", () => {
+    const { container } = render(TileRoot, {
+      props: { tree: defaultTestTree(), collapse: createCollapseStore() },
+    });
+    expect(container.querySelectorAll("[data-testid='fallback-tile']")).toHaveLength(0);
+  });
+
+  it("a set titlebar renders its node (the slot works; nothing populates it today)", () => {
+    const tree: LayoutTree = {
+      version: 1,
+      titlebar: { kind: "leaf", view: "fix-a" },
+      root: { kind: "leaf", view: "fix-b" },
+    };
+    render(TileRoot, { props: { tree, collapse: createCollapseStore() } });
+    expect(screen.getByTestId("fixture-a")).toBeInTheDocument();
+    expect(screen.getByTestId("fixture-b")).toBeInTheDocument();
+  });
+
+  it("the collapsible child reflects the collapse store and toggles through it", async () => {
+    const collapse = createCollapseStore({ viewportWidth: 1024 });
+    const { container } = render(TileRoot, { props: { tree: defaultTestTree(), collapse } });
+    const aside = container.querySelector<HTMLElement>("[data-testid='collapsible-child']");
+    expect(aside).not.toBeNull();
+    // Wide viewport default: open → full basis width.
+    expect(aside).toHaveAttribute("data-open", "true");
+    expect(aside?.style.width).toBe("320px");
+
+    await collapse.toggle("side");
+    expect(aside).toHaveAttribute("data-open", "false");
+    expect(aside?.style.width).toBe("0px");
+  });
+
+  it("a dropdown swap emits replaceView and the owner receives the changed tree", async () => {
+    const user = userEvent.setup();
+    let changed: LayoutTree | null = null;
+    render(TileRoot, {
+      props: {
+        tree: panelsOnlyTree("fix-b"),
+        collapse: createCollapseStore(),
+        onTreeChange: (t) => (changed = t),
+      },
+    });
+
+    await user.selectOptions(screen.getByRole("combobox", { name: "Select a view" }), "fix-a");
+    expect(sidePanelsOf(changed)).toEqual(["fix-a"]);
+    // TileRoot is a CONTROLLED component: applying the op is the owner's job
+    // (App re-renders with the new tree; the test doesn't feed it back).
+  });
+
+  it("the + button emits insertPanel pre-selecting the first eligible view", async () => {
+    const user = userEvent.setup();
+    let changed: LayoutTree | null = null;
+    render(TileRoot, {
+      props: {
+        tree: panelsOnlyTree("fix-b"),
+        collapse: createCollapseStore(),
+        onTreeChange: (t) => (changed = t),
+      },
+    });
+
+    await user.click(screen.getByRole("button", { name: "Add view" }));
+    expect(sidePanelsOf(changed)).toEqual(["fix-b", "fix-a"]);
+  });
+
+  it("the ✕ button emits removeNode for that panel (absent on the first panel)", async () => {
+    const user = userEvent.setup();
+    let changed: LayoutTree | null = null;
+    render(TileRoot, {
+      props: {
+        tree: panelsOnlyTree("fix-b", "fix-a"),
+        collapse: createCollapseStore(),
+        onTreeChange: (t) => (changed = t),
+      },
+    });
+
+    // Only panels after the first can be removed — like ViewSidebar today.
+    const removeButtons = screen.getAllByRole("button", { name: "Remove view" });
+    expect(removeButtons).toHaveLength(1);
+    await user.click(removeButtons[0] as HTMLElement);
+    expect(sidePanelsOf(changed)).toEqual(["fix-b"]);
+  });
+
+  it("an invalid edit is refused: the first panel has no remove button", () => {
+    const tree = panelsOnlyTree("fix-b");
+    let changed: LayoutTree | null = null;
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      render(TileRoot, {
+        props: { tree, collapse: createCollapseStore(), onTreeChange: (t) => (changed = t) },
+      });
+      expect(screen.queryByRole("button", { name: "Remove view" })).toBeNull();
+      expect(changed).toBeNull();
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
+  it("a stack child with grow renders in a flex-grown wrapper; others natural", () => {
+    const { container } = render(TileRoot, {
+      props: { tree: defaultTestTree(), collapse: createCollapseStore() },
+    });
+    const grown = container.querySelector("[data-testid='fixture-a']")?.closest(".min-h-0");
+    expect(grown?.getAttribute("style")).toContain("flex: 1 1 0%");
+    const natural = container.querySelector("[data-testid='fixture-c']")?.closest(".min-h-0");
+    expect(natural?.getAttribute("style")).toContain("flex: 0 0 auto");
+  });
+
+  it("the dropdown lists panel-eligible views only (decision 5)", () => {
+    render(TileRoot, { props: { tree: panelsOnlyTree("fix-b"), collapse: createCollapseStore() } });
+    const select = screen.getByRole("combobox", { name: "Select a view" });
+    const labels = [...select.querySelectorAll("option")].map((o) => o.textContent);
+    expect(labels).toContain("Alpha View");
+    expect(labels).toContain("Beta View");
+    expect(labels).not.toContain("Content");
+  });
+
+  it("an unregistered view id inside a panel renders the fallback (not a crash)", () => {
+    render(TileRoot, {
+      props: { tree: panelsOnlyTree("ghost-view"), collapse: createCollapseStore() },
+    });
+    expect(screen.getByTestId("fallback-tile")).toBeInTheDocument();
+  });
+});
+
+describe("TileRoot registry cleanup", () => {
+  it("unregisters the fixture views (the registry is module-global per test file)", () => {
+    unregisterView("fix-a");
+    unregisterView("fix-b");
+    unregisterView("fix-content");
+    const tree: LayoutTree = { version: 1, root: { kind: "leaf", view: "fix-a" } };
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      render(TileRoot, { props: { tree, collapse: createCollapseStore() } });
+      // Unregistered → the fallback tile, not a crash.
+      expect(screen.getByTestId("fallback-tile")).toBeInTheDocument();
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+});
diff --git a/src/features/layout/ui/TileSplit.svelte b/src/features/layout/ui/TileSplit.svelte
new file mode 100644
index 0000000..1f0ec64
--- /dev/null
+++ b/src/features/layout/ui/TileSplit.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  /**
+   * A flex row/column of child subtrees. Child sizing comes from the tree:
+   * `size` → flex-grow (+ optional `basis`), and `collapsible` children get
+   * today's EXACT sidebar behavior — width/translate transition, `lg:relative`
+   * in-flow push vs `max-lg:absolute` overlay with a backdrop. Collapse state
+   * is chrome (per-node-id), owned by the injected collapse store.
+   */
+  import type { LayoutOp, Path, SplitNode } from "@dispatch/layout-contract";
+  import type { CollapseStore } from "../logic/collapse";
+  import TileNode from "./TileNode.svelte";
+
+  let {
+    node,
+    path,
+    ports,
+    collapse,
+    onEdit,
+  }: {
+    node: SplitNode;
+    path: Path;
+    ports?: unknown;
+    collapse: CollapseStore;
+    onEdit: (ops: readonly LayoutOp[]) => void;
+  } = $props();
+
+  const state = $derived($collapse);
+
+  /** Collapse state key: the node's id when present, else its path (stable enough for chrome). */
+  function keyOf(i: number, id: string | undefined): string {
+    return id ?? [...path, i].map((s) => String(s)).join(":");
+  }
+
+  function isOpen(i: number, id: string | undefined): boolean {
+    const key = keyOf(i, id);
+    return state.openByNode[key] ?? state.defaultOpen;
+  }
+</script>
+
+{#if node.dir === "col"}
+  <div class="flex min-h-0 w-full flex-col">
+    {#each node.children as child, i (i)}
+      {@const key = keyOf(i, child.node.id)}
+      <div
+        class="min-h-0 min-w-0"
+        style={"flex: " + child.size + " 1 " + (child.basis === undefined ? "0%" : child.basis + "px")}
+      >
+        <TileNode node={child.node} path={[...path, i]} {ports} {collapse} {onEdit} />
+      </div>
+    {/each}
+  </div>
+{:else}
+  <div class="flex min-h-0 h-full flex-row">
+    {#each node.children as child, i (i)}
+      {@const key = keyOf(i, child.node.id)}
+      {#if child.collapsible}
+        {@const open = isOpen(i, child.node.id)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <aside
+          class="flex shrink-0 flex-col overflow-x-hidden transition-[width] duration-300 ease-out max-lg:absolute max-lg:inset-y-0 max-lg:right-0 max-lg:z-30 lg:relative"
+          style="width: {open ? (child.basis ?? 320) : 0}px"
+          data-testid="collapsible-child"
+          data-open={open}
+        >
+          <div
+            class="flex h-full flex-col gap-2 overflow-y-auto bg-base-100 pt-3 pr-3 pb-3 transition-transform duration-300 ease-out"
+            style="width: {child.basis ?? 320}px; transform: translateX({open ? '0' : '100%'})"
+          >
+            <TileNode node={child.node} path={[...path, i]} {ports} {collapse} {onEdit} />
+          </div>
+        </aside>
+        {#if open}
+          <!-- Backdrop: only on narrow screens (overlay mode), click to close. -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            class="fixed inset-0 z-20 bg-black/30 lg:hidden"
+            role="button"
+            tabindex="0"
+            aria-label="Close sidebar"
+            onclick={() => collapse.setOpen(key, false)}
+            onkeydown={(e) => {
+              if (e.key === "Escape" || e.key === "Enter") collapse.setOpen(key, false);
+            }}
+          ></div>
+        {/if}
+      {:else}
+        <div
+          class="min-h-0 min-w-0"
+          style={"flex: " + child.size + " 1 " + (child.basis === undefined ? "0%" : child.basis + "px")}
+        >
+          <TileNode node={child.node} path={[...path, i]} {ports} {collapse} {onEdit} />
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}
diff --git a/src/features/layout/ui/TileStack.svelte b/src/features/layout/ui/TileStack.svelte
new file mode 100644
index 0000000..13dab09
--- /dev/null
+++ b/src/features/layout/ui/TileStack.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  /**
+   * A plain vertical container (today's left column). `grow` children flex
+   * (`flex: grow 1 0%` — the chat region scrolls internally, exactly like
+   * today's `flex-1`); children without grow take natural height.
+   */
+  import type { LayoutOp, Path, StackNode } from "@dispatch/layout-contract";
+  import type { CollapseStore } from "../logic/collapse";
+  import TileNode from "./TileNode.svelte";
+
+  let {
+    node,
+    path,
+    ports,
+    collapse,
+    onEdit,
+  }: {
+    node: StackNode;
+    path: Path;
+    ports?: unknown;
+    collapse: CollapseStore;
+    onEdit: (ops: readonly LayoutOp[]) => void;
+  } = $props();
+</script>
+
+<div class="flex min-h-0 min-w-0 flex-col overflow-hidden">
+  {#each node.children as child, i (i)}
+    <div class="min-h-0 min-w-0" style={"flex: " + (child.grow ?? 0) + (child.grow === undefined ? " 0 auto" : " 1 0%")}>
+      <TileNode node={child.node} path={[...path, i]} {ports} {collapse} {onEdit} />
+    </div>
+  {/each}
+</div>
diff --git a/src/features/layout/ui/fixtures/FixtureA.svelte b/src/features/layout/ui/fixtures/FixtureA.svelte
new file mode 100644
index 0000000..e55ba2a
--- /dev/null
+++ b/src/features/layout/ui/fixtures/FixtureA.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  // A fixture view for renderer tests — ignores any props it receives.
+  let { label = "Alpha" }: { label?: string } = $props();
+</script>
+
+<div data-testid="fixture-a">{label}</div>
diff --git a/src/features/layout/ui/fixtures/FixtureB.svelte b/src/features/layout/ui/fixtures/FixtureB.svelte
new file mode 100644
index 0000000..1c48584
--- /dev/null
+++ b/src/features/layout/ui/fixtures/FixtureB.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  // A fixture view for renderer tests — ignores any props it receives.
+  let { label = "Beta" }: { label?: string } = $props();
+</script>
+
+<div data-testid="fixture-b">{label}</div>
diff --git a/src/features/layout/ui/fixtures/FixtureC.svelte b/src/features/layout/ui/fixtures/FixtureC.svelte
new file mode 100644
index 0000000..2bceb67
--- /dev/null
+++ b/src/features/layout/ui/fixtures/FixtureC.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  // A fixture view for renderer tests — ignores any props it receives.
+  let { label = "Gamma" }: { label?: string } = $props();
+</script>
+
+<div data-testid="fixture-c">{label}</div>