Update create flow pages

tests/pages/cards.test.jsx

@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import CardsPage from "../../app/create/cards/page";
+import { CardsScreen } from "../../app/create/screens/card/CardsScreen";
 
 afterEach(() => {
   cleanup();
@@ -15,7 +15,7 @@ afterEach(() => {
 describe("Create flow cards page", () => {
   test("clicking a card opens the Create modal", async () => {
     const user = userEvent.setup();
-    render(<CardsPage />);
+    render(<CardsScreen />);
 
     const signalCards = screen.getAllByRole("button", {
       name: /Signal: Encrypted messaging/,
@@ -29,7 +29,7 @@ describe("Create flow cards page", () => {
   });
 
   test("renders without error", () => {
-    render(<CardsPage />);
+    render(<CardsScreen />);
 
     expect(
       screen.getByText(
@@ -39,7 +39,7 @@ describe("Create flow cards page", () => {
   });
 
   test("renders HeaderLockup and CardStack content", () => {
-    render(<CardsPage />);
+    render(<CardsScreen />);
 
     expect(
       screen.getByText(
@@ -53,7 +53,7 @@ describe("Create flow cards page", () => {
 
   test("toggle expands and shows Show less", async () => {
     const user = userEvent.setup();
-    render(<CardsPage />);
+    render(<CardsScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all communication approaches",

tests/pages/right-rail.test.jsx

@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import RightRailPage from "../../app/create/right-rail/page";
+import { RightRailScreen } from "../../app/create/screens/right-rail/RightRailScreen";
 
 afterEach(() => {
   cleanup();
@@ -14,7 +14,7 @@ afterEach(() => {
 
 describe("Create flow right-rail page", () => {
   test("renders without error", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     expect(
       screen.getByRole("heading", {
@@ -24,7 +24,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders sidebar description with add link", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const description = screen.getByText((content, element) => {
       if (element?.tagName !== "P") return false;
@@ -39,7 +39,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders message box with title and checkboxes", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const region = screen.getByRole("region", {
       name: "Consider defining approaches to steward key resources:",
@@ -65,7 +65,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders card stack with See all decision approaches toggle", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     expect(
       screen.getByRole("button", { name: "See all decision approaches" }),
@@ -73,7 +73,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders recommended approach cards", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     expect(
       screen.getByRole("button", {
@@ -94,7 +94,7 @@ describe("Create flow right-rail page", () => {
 
   test("toggle expands and shows Show less", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all decision approaches",
@@ -108,7 +108,7 @@ describe("Create flow right-rail page", () => {
 
   test("expanded view shows Label cards", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all decision approaches",
@@ -121,7 +121,7 @@ describe("Create flow right-rail page", () => {
 
   test("clicking a card toggles selection", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const mediationCard = screen.getByRole("button", {
       name: /Mediation: Collaborative work to reach a resolution/,
@@ -133,7 +133,7 @@ describe("Create flow right-rail page", () => {
 
   test("message box checkboxes are interactive", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const amendCheckbox = screen.getByRole("checkbox", {
       name: "Amend your CommunityRule",

tests/pages/templates.test.jsx

@@ -5,7 +5,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach, beforeEach } from "vitest";
-import TemplatesPage from "../../app/(marketing)/templates/page";
+import TemplatesPageClient from "../../app/(marketing)/templates/TemplatesPageClient";
 import { testRouter } from "../mocks/navigation";
 import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
 
@@ -19,7 +19,9 @@ afterEach(() => {
 
 describe("Templates page (/templates)", () => {
   test("renders title, intro, and full catalog", () => {
-    render(<TemplatesPage />);
+    render(
+      <TemplatesPageClient initialGridEntries={GOVERNANCE_TEMPLATE_CATALOG} />,
+    );
 
     expect(
       screen.getByRole("heading", { name: "Templates", level: 1 }),
@@ -35,7 +37,9 @@ describe("Templates page (/templates)", () => {
 
   test("each template card navigates to review flow for its slug", async () => {
     const user = userEvent.setup();
-    render(<TemplatesPage />);
+    render(
+      <TemplatesPageClient initialGridEntries={GOVERNANCE_TEMPLATE_CATALOG} />,
+    );
 
     const consensusCard = screen.getByText("Consensus").closest("div");
     await user.click(consensusCard);