@pantheon-systems/create-p1-starter-kit 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantheon-systems/create-p1-starter-kit",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Scaffold a new P1 starter project",
   "type": "module",
   "bin": {
@@ -30,10 +30,15 @@
     "template"
   ],
   "engines": {
-    "node": ">=20.12.0"
+    "node": ">=24.0.0"
   },
   "devDependencies": {
-    "vitest": "^4.1.5"
+    "@vitejs/plugin-react": "^4.7.0",
+    "isomorphic-dompurify": "^3.18.0",
+    "react": "^19.2.5",
+    "vitest": "^4.1.5",
+    "@pantheon-systems/puck-css": "0.8.0",
+    "@pantheon-systems/css-client": "0.8.0"
   },
   "dependencies": {
     "@clack/prompts": "^1.5.1",

package/template/.env.example

@@ -25,3 +25,9 @@ CSS_API_KEY=your-api-key
 # public by design (safe to expose in the browser). When unset, the chatbot
 # stays hidden.
 # NEXT_PUBLIC_LD_CLIENT_ID=your-launchdarkly-client-side-id
+
+# --- Media library (on by default) ---
+# CDN image origin used to validate media URLs — NOT the Worker API URL.
+# Defaults to the production origin (https://media.p1.pantheon.io). Override
+# for staging, sandbox, or local dev.
+# NEXT_PUBLIC_MEDIA_BASE_URL=https://staging.media.p1.pantheon.io

package/template/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @pantheon-systems/p1-starter
 
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies [3ed945e]
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - @pantheon-systems/puck-css@0.8.0
+  - @pantheon-systems/p1-next-sdk@0.8.0
+  - @pantheon-systems/css-client@0.8.0
+
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies [b0254ff]
+- Updated dependencies
+- Updated dependencies [e937842]
+- Updated dependencies [e937842]
+  - @pantheon-systems/puck-css@0.7.0
+  - @pantheon-systems/css-client@0.7.0
+  - @pantheon-systems/p1-next-sdk@0.7.0
+
 ## 1.0.5
 
 ### Patch Changes

package/template/__tests__/chatbot-flag-wiring.test.ts

@@ -8,7 +8,7 @@ const appDir = resolve(__dirname, "..");
 
 describe("editor-client gates the chatbot behind the p1-chatbot flag", () => {
   const content = readFileSync(
-    resolve(appDir, "app/p1/[[...p1]]/editor-client.tsx"),
+    resolve(appDir, "app/p1/(editor)/[[...p1]]/editor-client.tsx"),
     "utf-8",
   );
 

package/template/__tests__/editor-integration.test.ts

@@ -8,7 +8,7 @@ const appDir = resolve(__dirname, "..");
 
 describe("editor-client uses P1 plugins", () => {
   const content = readFileSync(
-    resolve(appDir, "app/p1/[[...p1]]/editor-client.tsx"),
+    resolve(appDir, "app/p1/(editor)/[[...p1]]/editor-client.tsx"),
     "utf-8",
   );
 

package/template/__tests__/editor-route-group.test.ts

@@ -0,0 +1,44 @@
+/**
+ * The persistent editor is scoped to the `(editor)` route group so it wraps
+ * only the catch-all editor page — not sibling routes like /p1/merge (or a
+ * future /p1/settings). This structure replaces the old NON_EDITOR_ROUTES
+ * opt-out list: siblings stay editor-free by construction, not by enumeration.
+ */
+import { describe, expect, it } from "vitest";
+import { existsSync, readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const appDir = resolve(__dirname, "..");
+const p1 = resolve(appDir, "app/p1");
+
+describe("editor is scoped to the (editor) route group", () => {
+  it("mounts the persistent editor layout inside the group", () => {
+    const layout = resolve(p1, "(editor)/layout.tsx");
+    expect(existsSync(layout)).toBe(true);
+    expect(readFileSync(layout, "utf-8")).toContain("pages.Layout");
+  });
+
+  it("keeps the catch-all editor page inside the group", () => {
+    expect(existsSync(resolve(p1, "(editor)/[[...p1]]/page.tsx"))).toBe(true);
+    expect(existsSync(resolve(p1, "(editor)/[[...p1]]/editor-client.tsx"))).toBe(true);
+  });
+
+  it("does not mount a layout at /p1 that would wrap every sibling", () => {
+    expect(existsSync(resolve(p1, "layout.tsx"))).toBe(false);
+  });
+
+  it("keeps /p1/merge a sibling outside the group so the editor never wraps it", () => {
+    expect(existsSync(resolve(p1, "merge/page.tsx"))).toBe(true);
+    expect(existsSync(resolve(p1, "(editor)/merge/page.tsx"))).toBe(false);
+  });
+
+  it("no longer guards routes with a NON_EDITOR_ROUTES opt-out list", () => {
+    const editorClient = readFileSync(
+      resolve(p1, "(editor)/[[...p1]]/editor-client.tsx"),
+      "utf-8",
+    );
+    expect(editorClient).not.toContain("NON_EDITOR_ROUTES");
+  });
+});

package/template/__tests__/page-seo.test.ts

@@ -0,0 +1,127 @@
+import { afterEach, describe, expect, it, vi, beforeEach } from "vitest";
+
+// The datasource fetchers module pulls in the cpub SDK; stub it — the helper
+// only forwards it to loadRemoteDatasourceContext, which is mocked below.
+vi.mock("../lib/remote-datasource-fetchers", () => ({
+  REMOTE_DATASOURCE_FETCHERS: {},
+}));
+
+vi.mock("@pantheon-systems/puck-css/server", () => ({
+  listRouteTemplateKeysFromDatabase: vi.fn().mockResolvedValue([]),
+  extractReferencedDatasourceIds: vi.fn().mockReturnValue([]),
+  loadRemoteDatasourceContext: vi.fn().mockResolvedValue({}),
+  resolveStringTemplates: vi.fn(async (input: string) =>
+    input.replace(/\{\{\s*name\s*\}\}/g, "World"),
+  ),
+}));
+
+import * as puckServer from "@pantheon-systems/puck-css/server";
+import { resolvePageMetadata } from "../lib/page-seo";
+
+type PageData = Parameters<typeof resolvePageMetadata>[0]["pageData"];
+
+function pageWithRootProps(props: Record<string, unknown>): PageData {
+  return { root: { props }, content: [] } as unknown as PageData;
+}
+
+describe("resolvePageMetadata", () => {
+  beforeEach(() => vi.clearAllMocks());
+  afterEach(() => vi.unstubAllEnvs());
+
+  it("maps root props and _seo.siteName to metadata without touching datasources when no templates", async () => {
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({
+        title: "About Our Team",
+        description: "Meet the people behind the product.",
+        _seo: { siteName: "Acme Docs" },
+      }),
+      path: "/about/team",
+      searchParams: {},
+    });
+
+    expect(meta.title).toBe("About Our Team");
+    expect(meta.description).toBe("Meet the people behind the product.");
+    expect((meta.openGraph as { title?: string }).title).toBe(
+      "About Our Team",
+    );
+    expect((meta.openGraph as { siteName?: string }).siteName).toBe(
+      "Acme Docs",
+    );
+    // Callers never see the template step — and it's skipped entirely when the
+    // values contain no {{ }}.
+    expect(puckServer.loadRemoteDatasourceContext).not.toHaveBeenCalled();
+  });
+
+  it("treats the editor's default title boilerplate as absent", async () => {
+    // Untitled pages carry root.defaultProps.title ("My Puck Editor"); that
+    // boilerplate must not ship as <title>/og:title.
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({
+        title: "My Puck Editor",
+        description: "Real description.",
+        _seo: { siteName: "Acme Docs" },
+      }),
+      path: "/untitled",
+      searchParams: {},
+    });
+
+    expect(meta.title).toBeUndefined();
+    expect((meta.openGraph as { title?: string }).title).toBeUndefined();
+    // Other fields are unaffected.
+    expect(meta.description).toBe("Real description.");
+    expect((meta.openGraph as { siteName?: string }).siteName).toBe(
+      "Acme Docs",
+    );
+  });
+
+  it("resolves {{ }} templates in title/description via the datasource context", async () => {
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({
+        title: "Hello {{name}}",
+        description: "Welcome, {{name}}!",
+      }),
+      path: "/greet",
+      searchParams: {},
+    });
+
+    expect(meta.title).toBe("Hello World");
+    expect(meta.description).toBe("Welcome, World!");
+    expect(puckServer.loadRemoteDatasourceContext).toHaveBeenCalledOnce();
+  });
+
+  it("sources title/description from root props even when _seo carries legacy page fields", async () => {
+    // Guards the contract: _seo is site-level only; page-level values on it
+    // (e.g. from an older backend) are ignored in favor of root props.
+    const meta = await resolvePageMetadata({
+      pageData: pageWithRootProps({
+        title: "Root Title",
+        description: "Root description.",
+        _seo: {
+          title: "Stale backend title",
+          description: "Stale backend description.",
+          siteName: "Acme",
+        },
+      }),
+      path: "/untitled",
+      searchParams: {},
+    });
+
+    expect(meta.title).toBe("Root Title");
+    expect(meta.description).toBe("Root description.");
+    expect((meta.openGraph as { siteName?: string }).siteName).toBe("Acme");
+  });
+
+  it("falls back to the path canonical when pageData/_seo is absent and a site URL is configured", async () => {
+    vi.stubEnv("NEXT_PUBLIC_SITE_URL", "https://site.example");
+    const meta = await resolvePageMetadata({
+      pageData: null,
+      path: "/",
+      searchParams: {},
+    });
+
+    expect(meta.title).toBeUndefined();
+    expect(meta.description).toBeUndefined();
+    expect(meta.alternates?.canonical).toBe("/");
+    expect(puckServer.loadRemoteDatasourceContext).not.toHaveBeenCalled();
+  });
+});

package/template/__tests__/paragraph-block.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+
+describe("paragraphBlock", () => {
+  it("has a richtext field for text", async () => {
+    const { paragraphBlock } = await import("../components/puck/paragraph-block");
+    expect(paragraphBlock.fields.text.type).toBe("richtext");
+  });
+
+  it("enables inline canvas editing", async () => {
+    const { paragraphBlock } = await import("../components/puck/paragraph-block");
+    expect((paragraphBlock.fields.text as any).contentEditable).toBe(true);
+  });
+
+  it("includes ai instructions on the text field", async () => {
+    const { paragraphBlock } = await import("../components/puck/paragraph-block");
+    const ai = (paragraphBlock.fields.text as any).ai;
+    expect(ai).toBeDefined();
+    expect(typeof ai?.instructions).toBe("string");
+    expect(ai?.instructions.length).toBeGreaterThan(0);
+  });
+
+  it("provides a renderMenu function", async () => {
+    const { paragraphBlock } = await import("../components/puck/paragraph-block");
+    expect(typeof (paragraphBlock.fields.text as any).renderMenu).toBe("function");
+  });
+
+  it("has a default text prop", async () => {
+    const { paragraphBlock } = await import("../components/puck/paragraph-block");
+    expect(typeof paragraphBlock.defaultProps.text).toBe("string");
+    expect(paragraphBlock.defaultProps.text.length).toBeGreaterThan(0);
+  });
+
+  it("provides a render function", async () => {
+    const { paragraphBlock } = await import("../components/puck/paragraph-block");
+    expect(typeof paragraphBlock.render).toBe("function");
+  });
+});

package/template/__tests__/sanitize-richtext.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { sanitizeRichtextHtml } from "../components/puck/sanitize-richtext";
+
+describe("sanitizeRichtextHtml", () => {
+  it("strips <script> tags", () => {
+    const out = sanitizeRichtextHtml('<p>hi</p><script>alert(1)</script>');
+    expect(out).not.toContain("<script");
+    expect(out).not.toContain("alert(1)");
+    expect(out).toContain("<p>hi</p>");
+  });
+
+  it("drops javascript: hrefs but keeps the link text", () => {
+    const out = sanitizeRichtextHtml('<a href="javascript:alert(1)">click</a>');
+    expect(out.toLowerCase()).not.toContain("javascript:");
+    expect(out).toContain("click");
+  });
+
+  it("drops data: hrefs", () => {
+    const out = sanitizeRichtextHtml(
+      '<a href="data:text/html,<script>alert(1)</script>">x</a>',
+    );
+    expect(out.toLowerCase()).not.toContain("data:");
+    expect(out.toLowerCase()).not.toContain("<script");
+  });
+
+  it("removes <img> and its onerror handler entirely", () => {
+    const out = sanitizeRichtextHtml('<img src="x" onerror="alert(1)">');
+    expect(out.toLowerCase()).not.toContain("<img");
+    expect(out.toLowerCase()).not.toContain("onerror");
+  });
+
+  it("strips inline event-handler attributes", () => {
+    const out = sanitizeRichtextHtml('<p onclick="steal()">text</p>');
+    expect(out.toLowerCase()).not.toContain("onclick");
+    expect(out).toContain("text");
+  });
+
+  it("preserves safe formatting, lists, and https links", () => {
+    const input =
+      '<p><strong>bold</strong> and <em>italic</em></p>' +
+      '<ul><li>one</li><li>two</li></ul>' +
+      '<a href="https://example.com">safe link</a>';
+    const out = sanitizeRichtextHtml(input);
+    expect(out).toContain("<strong>bold</strong>");
+    expect(out).toContain("<em>italic</em>");
+    expect(out).toContain("<li>one</li>");
+    expect(out).toContain('href="https://example.com"');
+  });
+
+  it("keeps relative and anchor hrefs", () => {
+    expect(sanitizeRichtextHtml('<a href="/about">a</a>')).toContain(
+      'href="/about"',
+    );
+    expect(sanitizeRichtextHtml('<a href="#section">a</a>')).toContain(
+      'href="#section"',
+    );
+  });
+});

package/template/__tests__/seo-metadata.test.ts

@@ -0,0 +1,105 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { buildPageMetadata } from "../lib/seo-metadata";
+
+/**
+ * PCC-3407: buildPageMetadata maps the head metadata inputs (client-derived
+ * title/description/canonical plus the backend-supplied siteName) onto the
+ * Next.js Metadata object that renders the per-page <head> tags. Next replaces
+ * (not deep-merges) a page's openGraph over the layout's, so og:type and the
+ * env og:site_name fallback are declared here rather than relying on the
+ * layout. A relative canonical is emitted only when NEXT_PUBLIC_SITE_URL is
+ * configured to resolve it — a wrong (localhost) canonical is worse than none.
+ */
+describe("buildPageMetadata", () => {
+  afterEach(() => vi.unstubAllEnvs());
+
+  it("maps a full SeoMetadata onto title/description/canonical/OG tags", () => {
+    const meta = buildPageMetadata({
+      seo: {
+        title: "About Our Team",
+        description: "Meet the people behind the product.",
+        canonicalUrl: "https://content.public.url/about/team",
+        siteName: "Acme Docs",
+      },
+      path: "/about/team",
+    });
+
+    expect(meta.title).toBe("About Our Team");
+    expect(meta.description).toBe("Meet the people behind the product.");
+    // Absolute canonicalUrl is used verbatim for canonical + og:url.
+    expect(meta.alternates?.canonical).toBe(
+      "https://content.public.url/about/team",
+    );
+    expect(meta.openGraph?.url).toBe("https://content.public.url/about/team");
+    expect(meta.openGraph?.title).toBe("About Our Team");
+    expect(meta.openGraph?.description).toBe(
+      "Meet the people behind the product.",
+    );
+    expect((meta.openGraph as { siteName?: string }).siteName).toBe(
+      "Acme Docs",
+    );
+    expect((meta.openGraph as { type?: string }).type).toBe("website");
+  });
+
+  it("falls back to the relative path when canonicalUrl is absent and a site URL is configured", () => {
+    vi.stubEnv("NEXT_PUBLIC_SITE_URL", "https://site.example");
+    const meta = buildPageMetadata({
+      seo: { title: "No Canonical" },
+      path: "/no-canonical",
+    });
+
+    expect(meta.alternates?.canonical).toBe("/no-canonical");
+    expect(meta.openGraph?.url).toBe("/no-canonical");
+  });
+
+  it("omits canonical and og:url when neither canonicalUrl nor a site URL exists", () => {
+    const meta = buildPageMetadata({
+      seo: { title: "No Canonical" },
+      path: "/no-canonical",
+    });
+
+    expect(meta.alternates).toBeUndefined();
+    expect((meta.openGraph as { url?: string }).url).toBeUndefined();
+  });
+
+  it("falls back to the env site name when siteName is absent", () => {
+    vi.stubEnv("NEXT_PUBLIC_SITE_NAME", "Env Site");
+    const meta = buildPageMetadata({
+      seo: { title: "No Site Name" },
+      path: "/x",
+    });
+
+    expect((meta.openGraph as { siteName?: string }).siteName).toBe(
+      "Env Site",
+    );
+  });
+
+  it("omits og:site_name when siteName and the env fallback are both absent", () => {
+    const meta = buildPageMetadata({
+      seo: { title: "No Site Name" },
+      path: "/x",
+    });
+
+    expect((meta.openGraph as { siteName?: string }).siteName).toBeUndefined();
+  });
+
+  it("treats an empty title as absent", () => {
+    const meta = buildPageMetadata({
+      seo: { title: "" },
+      path: "/x",
+    });
+
+    expect(meta.title).toBeUndefined();
+    expect((meta.openGraph as { title?: string }).title).toBeUndefined();
+  });
+
+  it("handles missing seo entirely (og:type still emitted, canonical omitted)", () => {
+    const meta = buildPageMetadata({ path: "/" });
+
+    expect(meta.title).toBeUndefined();
+    expect(meta.description).toBeUndefined();
+    expect(meta.alternates).toBeUndefined();
+    expect((meta.openGraph as { url?: string }).url).toBeUndefined();
+    expect((meta.openGraph as { type?: string }).type).toBe("website");
+  });
+});

package/template/app/[...puckPath]/page.tsx

@@ -2,19 +2,19 @@
  * Catch-all route that renders user-facing pages generated by Puck.
  */
 
-import { Client } from "./client";
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import {
   loadRemoteDatasourceContext,
   extractReferencedDatasourceIds,
   getPage,
   listRouteTemplateKeysFromDatabase,
   resolveDataTemplates,
-  resolveStringTemplates,
   ensureInitialized,
   pagePathFromCatchAllSegments,
 } from "@pantheon-systems/puck-css/server";
 import { REMOTE_DATASOURCE_FETCHERS } from "../../lib/remote-datasource-fetchers";
+import { resolvePageMetadata } from "../../lib/page-seo";
+import { Client } from "./client";
 
 const initPromise = ensureInitialized({
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
@@ -40,29 +40,8 @@ export async function generateMetadata({
     return { title: "Not Found" };
   }
 
-  const [pageData, sp, routeTemplateKeys] = await Promise.all([
-    getPage(path),
-    searchParams,
-    listRouteTemplateKeysFromDatabase(),
-  ]);
-
-  const rawTitle = pageData?.root.props?.title;
-  if (typeof rawTitle !== "string") {
-    return { title: rawTitle };
-  }
-  if (!rawTitle.includes("{{")) {
-    return { title: rawTitle };
-  }
-  const referencedDatasourceIds = extractReferencedDatasourceIds(pageData);
-  const context = await loadRemoteDatasourceContext({
-    searchParams: sp,
-    fetchImpl: fetch,
-    pagePath: path,
-    routeTemplateKeys,
-    builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
-    referencedDatasourceIds,
-  });
-  return { title: await resolveStringTemplates(rawTitle, context) };
+  const [pageData, sp] = await Promise.all([getPage(path), searchParams]);
+  return resolvePageMetadata({ pageData, path, searchParams: sp });
 }
 
 export default async function Page({

package/template/app/layout.tsx

@@ -1,4 +1,18 @@
 import "./styles.css";
+import type { Metadata } from "next";
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
+
+// A page-level openGraph replaces (not merges) this one, so buildPageMetadata
+// re-declares og:type and the env site-name fallback; this covers routes that
+// return no openGraph (e.g. not-found early returns).
+export const metadata: Metadata = {
+  ...(siteUrl ? { metadataBase: new URL(siteUrl) } : {}),
+  openGraph: {
+    type: "website",
+    siteName: process.env.NEXT_PUBLIC_SITE_NAME,
+  },
+};
 
 export default function RootLayout({
   children,

package/template/app/p1/{[[...p1]] → (editor)/[[...p1]]}/editor-client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useCallback, useState } from "react";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { Puck } from "@puckeditor/core";
 import {
   P1App,
@@ -13,20 +13,22 @@ import {
   P1QueryProvider,
   editorPathHref,
 } from "@pantheon-systems/puck-css";
-import { P1NextRouterProvider } from "@pantheon-systems/p1-next-sdk";
+import { LoadingMessage } from "@pantheon-systems/puck-css/pds";
+import { P1NextRouterProvider, editorPagePathFromUrlPath } from "@pantheon-systems/p1-next-sdk";
 import { createAIChatPlugin } from "@pantheon-systems/p1-ai-chat";
+import { createMediaPlugin } from "@pantheon-systems/p1-media";
 import { useFlags } from "launchdarkly-react-client-sdk";
 import type { Checkpoint } from "@pantheon-systems/puck-css";
 import type { ContentRole } from "@pantheon-systems/puck-css";
-import { P1_ASSETS } from "../../../constants/assets";
+import { P1_ASSETS } from "../../../../constants/assets";
 
 import "@pantheon-systems/puck-css/styles.css";
 import "@pantheon-systems/puck-css/pds/styles.css";
 
-import { ChatbotFlagProvider } from "../../../components/ChatbotFlagProvider";
-import { P1Lockup } from "../../../components/p1-lockup";
-import config from "../../../puck.config";
-import { shouldShowChatbot, CHATBOT_FLAG_KEY } from "../../../lib/chatbot-flag/feature-gate";
+import { ChatbotFlagProvider } from "../../../../components/ChatbotFlagProvider";
+import { P1Lockup } from "../../../../components/p1-lockup";
+import config from "../../../../puck.config";
+import { shouldShowChatbot, CHATBOT_FLAG_KEY } from "../../../../lib/chatbot-flag/feature-gate";
 
 const DEFAULT_PAGE_DATA = {
   root: { props: { title: "New page" } },
@@ -107,7 +109,11 @@ function P1SignInPage() {
   );
 }
 
-export function EditorClientWrapper({ path }: { path: string }) {
+export function EditorClientWrapper() {
+  // Rendered from the persistent (editor) layout, so this survives page
+  // switches; the edited page is derived from the URL instead of route params.
+  const pathname = usePathname();
+  const path = editorPagePathFromUrlPath(pathname);
   const [userRole, setUserRole] = useState<ContentRole>('editor');
   const lastGoodStateRef = React.useRef<{ puckKey: string; puckProps: any } | null>(null);
 
@@ -205,6 +211,7 @@ function EditorContent({
   const router = useRouter();
   const { getToken } = useP1Auth();
   const p1Plugins = useP1Plugins(path, config);
+  const mediaPlugin = React.useMemo(() => createMediaPlugin({}), []);
   const flags = useFlags();
   const agentUrl = process.env.NEXT_PUBLIC_AGENT_URL;
   const chatbotEnabled = shouldShowChatbot(flags[CHATBOT_FLAG_KEY], agentUrl);
@@ -216,9 +223,9 @@ function EditorContent({
     [chatbotEnabled, agentUrl],
   );
   const additionalPlugins = React.useMemo(
-    () => (aiPlugin ? [...p1Plugins, aiPlugin] : p1Plugins),
-    [p1Plugins, aiPlugin],
-  ) as typeof p1Plugins;
+    () => (aiPlugin ? [...p1Plugins, mediaPlugin, aiPlugin] : [...p1Plugins, mediaPlugin]),
+    [p1Plugins, mediaPlugin, aiPlugin],
+  );
 
   const [redirecting, setRedirecting] = React.useState(false);
 
@@ -285,20 +292,12 @@ function EditorContent({
   }, [loading, error, puckKey, puckProps]);
 
   if (redirecting) {
-    return (
-      <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
-        Redirecting...
-      </div>
-    );
+    return <LoadingMessage message="Redirecting" data-testid="editor-redirecting" />;
   }
 
   // Show full loading screen only on first load (no previous state)
   if (loading && !lastGoodStateRef.current) {
-    return (
-      <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
-        Loading editor...
-      </div>
-    );
+    return <LoadingMessage message="Loading document" data-testid="editor-loading" />;
   }
 
   // Show error only if we have no previous state to fall back to

package/template/app/p1/{[[...p1]]/page.tsx → (editor)/[[...p1]]/p1-pages.tsx}

@@ -1,9 +1,8 @@
-import "@puckeditor/core/puck.css";
 import { createP1Pages } from "@pantheon-systems/p1-next-sdk/server";
-import config from "../../../puck.config";
+import config from "../../../../puck.config";
 import { EditorClientWrapper } from "./editor-client";
 
-const pages = createP1Pages({
+export const pages = createP1Pages({
   config,
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
   p1ApiKey: process.env.CSS_API_KEY,
@@ -13,7 +12,3 @@ const pages = createP1Pages({
   p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID ?? "main",
   EditorClient: EditorClientWrapper,
 });
-
-export default pages.Page;
-export const generateMetadata = pages.generateMetadata;
-export const dynamic = "force-dynamic";

package/template/app/p1/(editor)/[[...p1]]/page.tsx

@@ -0,0 +1,5 @@
+import { pages } from "./p1-pages";
+
+export default pages.Page;
+export const generateMetadata = pages.generateMetadata;
+export const dynamic = "force-dynamic";