@pantheon-systems/create-p1-starter-kit 0.7.0 → 0.10.0

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,
@@ -9,24 +9,31 @@ import {
   useP1Editor,
   useP1Plugins,
   useP1Auth,
+  useEditorContext,
+  useRemoteDatasourceContext,
   wrapConfigForEditorPreview,
   P1QueryProvider,
   editorPathHref,
 } from "@pantheon-systems/puck-css";
-import { P1NextRouterProvider } from "@pantheon-systems/p1-next-sdk";
+import { DatasourceRegistryProvider, DatasourceDataProvider } from "@pantheon-systems/puck-css/fields";
+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";
+import { createGenerateWithAIHandler } from "../../../../lib/chatbot-flag/ai-generate";
+import { getDraftRequestChannel } from "../../../../lib/chatbot-flag/draft-request-channel";
 
 const DEFAULT_PAGE_DATA = {
   root: { props: { title: "New page" } },
@@ -107,7 +114,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);
 
@@ -204,21 +215,36 @@ function EditorContent({
 }) {
   const router = useRouter();
   const { getToken } = useP1Auth();
+  const { data: editorCtx } = useEditorContext(path);
+  const {
+    context: remoteDatasourceContext,
+  } = useRemoteDatasourceContext(path, editorCtx?.remoteDatasourceRegistry ?? []);
   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);
+  // Singleton: survives the remount caused by navigating to the new page.
+  const draftRequests = getDraftRequestChannel();
+  // The agent creates the page it was asked for, so the editor follows it there. Also what
+  // keeps later turns aimed at the new page: their context is built from the open document.
+  const handlePageCreated = useCallback(
+    (createdPath: string) => {
+      router.push(editorPathHref(createdPath));
+    },
+    [router],
+  );
   const aiPlugin = React.useMemo(
     () =>
       chatbotEnabled && agentUrl
-        ? createAIChatPlugin({ agentUrl })
+        ? createAIChatPlugin({ agentUrl, draftRequests, onPageCreated: handlePageCreated })
         : null,
-    [chatbotEnabled, agentUrl],
+    [chatbotEnabled, agentUrl, draftRequests, handlePageCreated],
   );
   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);
 
@@ -261,6 +287,8 @@ function EditorContent({
     onDocumentNotFound: handleDocumentNotFound,
     pluginOptions: {
       onDocumentSelect: handleDocumentSelect,
+      onGenerateWithAI: createGenerateWithAIHandler(draftRequests, chatbotEnabled),
+      showAIPanelToggle: chatbotEnabled,
       selectedDocumentPath: path,
       siteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
       dashboardUrl: process.env.NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL,
@@ -285,20 +313,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
@@ -358,8 +378,12 @@ function EditorContent({
           `}</style>
         </div>
       )}
-      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-      <Puck key={`${displayState.puckKey}-${chatbotEnabled ? "ai" : "no-ai"}`} {...displayState.puckProps as any} _experimentalFullScreenCanvas={true} />
+      <DatasourceRegistryProvider registry={editorCtx?.remoteDatasourceRegistry ?? []}>
+        <DatasourceDataProvider context={remoteDatasourceContext}>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <Puck key={`${displayState.puckKey}-${chatbotEnabled ? "ai" : "no-ai"}`} {...displayState.puckProps as any} _experimentalFullScreenCanvas={true} />
+        </DatasourceDataProvider>
+      </DatasourceRegistryProvider>
     </div>
   );
 }

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";

package/template/app/p1/(editor)/layout.tsx

@@ -0,0 +1,13 @@
+import "@puckeditor/core/puck.css";
+import { pages } from "./[[...p1]]/p1-pages";
+
+// The editor renders from this layout, NOT the page. The (editor) group is a
+// static segment, so this layout survives navigation between /p1/<pageA> and
+// /p1/<pageB> — a layout inside [[...p1]] would remount on every switch, since
+// Next keys segment cache nodes by param value.
+//
+// Scoping the layout to the (editor) group (instead of app/p1/layout.tsx) is
+// what keeps the editor off sibling routes: /p1/merge and future pages like
+// /p1/settings live outside the group and never render the editor. Add such
+// pages as siblings of (editor), not inside it.
+export default pages.Layout;

package/template/app/page.tsx

@@ -1,14 +1,14 @@
-import { WelcomeBlockRender } from "../components/puck/welcome-block-render";
 import {
   ensureInitialized,
   getPage,
   listRouteTemplateKeysFromDatabase,
   resolveDataTemplates,
-  resolveStringTemplates,
   extractReferencedDatasourceIds,
   loadRemoteDatasourceContext,
 } from "@pantheon-systems/puck-css/server";
 import type { Metadata } from "next";
+import { WelcomeBlockRender } from "../components/puck/welcome-block-render";
+import { resolvePageMetadata } from "../lib/page-seo";
 import { REMOTE_DATASOURCE_FETCHERS } from "../lib/remote-datasource-fetchers";
 import { Client } from "./[...puckPath]/client";
 
@@ -27,25 +27,7 @@ export async function generateMetadata(): Promise<Metadata> {
   if (!pageData) {
     return { title: "P1 Starter Kit" };
   }
-
-  const rawTitle = pageData.root.props?.title;
-  if (typeof rawTitle !== "string") {
-    return { title: rawTitle };
-  }
-  if (!rawTitle.includes("{{")) {
-    return { title: rawTitle };
-  }
-  const routeTemplateKeys = await listRouteTemplateKeysFromDatabase();
-  const referencedDatasourceIds = extractReferencedDatasourceIds(pageData);
-  const context = await loadRemoteDatasourceContext({
-    searchParams: {},
-    fetchImpl: fetch,
-    pagePath: "/",
-    routeTemplateKeys,
-    builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
-    referencedDatasourceIds,
-  });
-  return { title: await resolveStringTemplates(rawTitle, context) };
+  return resolvePageMetadata({ pageData, path: "/", searchParams: {} });
 }
 
 export default async function HomePage() {

package/template/app/styles.css

@@ -1,6 +1,24 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@source "../../../packages/puck-css/src";
 
-body {
+/* Scoped via :has() rather than a bare `body {...}` selector so this reset
+   stays out of Puck's canvas-preview iframe (PCC-3499 / PCC-3513).
+   Puck's collectStyles() copies every parent <style>/<link> into the canvas
+   iframe verbatim (querySelectorAll('style, link[rel="stylesheet"]'), no
+   exclusion API) — so a bare `body {...}` rule here would also match inside
+   the iframe and can override the canvas's own design-token-based body
+   styling (e.g. `color: var(--color-text-inherited); background:
+   var(--color-surface);`), as seen on the Teamworks dev site.
+   A class on <body> itself doesn't help: Puck's CopyHostStyles syncs this
+   document's <body> attributes (including class) onto the iframe's own
+   <body>, so `body.some-class` would still match there too. `.p1-app-shell`
+   (see app/layout.tsx) is a *child* of <body> instead — attributes aren't
+   synced onto descendants, and Puck's canvas iframe never renders this
+   layout's tree at all (only the Puck root/block tree, into its own
+   #frame-root) — so `body:has(> .p1-app-shell)` matches on every real
+   page/editor render but never inside the canvas iframe. */
+body:has(> .p1-app-shell) {
   margin: 0;
 }
 

package/template/ci-examples/github-actions-sync-puck-registry.yml

@@ -12,10 +12,15 @@
 #   3. Copy this file to .github/workflows/sync-puck-registry.yml.
 #
 # Triggers on push to any branch that touches puck.config.tsx or
-# components/puck/** — the sync script resolves the CSS branch by matching
-# the pushed git branch's name (falling back to the site's main branch when
-# no CSS_BRANCH_ID is given). A push on a branch with no matching CSS branch
+# components/puck/**. The sync script resolves the CSS branch from the pushed
+# git branch's name: the repo's default branch always targets the site's main
+# CSS branch (whatever the git branch is called), any other ref matches a CSS
+# branch by name. A push on a non-default branch with no matching CSS branch
 # is not an error: the script logs a skip and exits 0.
+#
+# CSS_DEFAULT_BRANCH defaults to "main" if omitted — repos whose default
+# branch has another name (master, trunk) need the line below (or must set
+# the variable themselves) for default-branch pushes to sync at all.
 name: Sync Puck Component Registry
 
 on:
@@ -49,3 +54,4 @@ jobs:
           CSS_SITE_ID: ${{ secrets.CSS_SITE_ID }}
           CSS_REGISTRY_API_KEY: ${{ secrets.CSS_REGISTRY_API_KEY }}
           CSS_BRANCH_ID: ${{ github.event.inputs.branch_id || github.ref_name }}
+          CSS_DEFAULT_BRANCH: ${{ github.event.repository.default_branch }}

package/template/components/p1-lockup.tsx

@@ -1,33 +1,13 @@
 "use client";
 
-export function PantheonMark() {
-  return (
-    <svg
-      className="h-7 w-auto block"
-      viewBox="0 0 105 230"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <polygon fill="#FFDC28" points="17.8,13.4 35.7,56.4 13,56.4 20.5,75.4 66.6,75.4" />
-      <polygon fill="#FFDC28" points="78.4,170.1 70.8,151.2 60.3,151.2 38.3,97.9 28.9,97.9 50.8,151.2 24,151.2 73.6,213.2 55.7,170.1" />
-      <path fill="#23232D" d="M84.6,94.3c0.6,0,1.9-0.7,1.9-7.3s-1.3-7.3-1.9-7.3H52.8l6,14.6C58.8,94.3,84.6,94.3,84.6,94.3z" />
-      <path fill="#23232D" d="M66.1,111.8l21.3,0c0.6,0,1.9-0.7,1.9-7.3s-1.3-7.3-1.9-7.3l-27.4,0L66.1,111.8z" />
-      <path fill="#23232D" d="M84.6,132.2H55.9l6,14.6h22.7c0.6,0,1.9-0.7,1.9-7.3S85.1,132.2,84.6,132.2z" />
-      <path fill="#23232D" d="M87.4,114.7H48.7l6,14.6h32.7c0.6,0,1.9-0.7,1.9-7.3S88,114.7,87.4,114.7L87.4,114.7z" />
-      <path fill="#23232D" d="M31.1,111.9l-6.8-17.6h15.9l7.4,17.6l15.2-0.1L49.5,79.7H16.5c-2.5,0-3.9,0-5.1,3.8c-1.4,4.5-1.5,13.1-1.5,29.7s0.2,25.2,1.5,29.7c1.1,3.8,2.5,3.8,5.1,3.8l29,0l-14.4-35L31.1,111.9L31.1,111.9z" />
-      <path fill="#23232D" d="M91.7,143h-1.2v-0.8h3.4v0.8h-1.2v3.5h-1L91.7,143L91.7,143z M96.3,146.5l-1.1-3.3v3.3h-0.9v-4.3h1.3l1.1,3.3l1.1-3.3H99v4.3h-0.9v-3.3l-1,3.3H96.3L96.3,146.5z" />
-    </svg>
-  );
-}
+import { P1_ASSETS } from "../constants/assets";
 
 export function P1Lockup() {
   return (
-    <div className="inline-flex items-center gap-2.5 mb-6 px-2 -mx-2 rounded-full">
-      <PantheonMark />
-      <span className="w-px h-5 bg-gray-200" />
-      <span className="font-['Inter_Tight','Inter',system-ui,sans-serif] font-semibold text-[19px] tracking-[0.01em] text-[#1a1a2e] leading-none">
-        P1
-      </span>
-    </div>
+    <img
+      src={P1_ASSETS.LOGO_URL}
+      alt="Pantheon P1"
+      className="h-7 w-auto block mb-6"
+    />
   );
 }

package/template/components/puck/data-list-block/data-list-block.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { createDataListBlock } from "@pantheon-systems/puck-css/fields";
+import { blockPaddingClass } from "../block-padding";
+
+export const dataListBlock = createDataListBlock({
+  wrapperClassName: blockPaddingClass,
+});

package/template/components/puck/data-list-block/index.ts

@@ -0,0 +1 @@
+export { dataListBlock } from "./data-list-block";

package/template/components/puck/grid-block.tsx

@@ -1,5 +1,5 @@
-import { blockPaddingClass } from "./block-padding";
 import { Connectable, type ConnectedItem } from "@pantheon-systems/puck-css/connectable";
+import { blockPaddingClass } from "./block-padding";
 
 function CardGrid({
   title,

package/template/components/puck/media-figure-block.tsx

@@ -0,0 +1,12 @@
+import { createMediaFigureBlock } from "@pantheon-systems/p1-media/server";
+import { blockPaddingClass } from "./block-padding";
+
+// CDN origin, not the Worker API URL; defaults to production when unset.
+const MEDIA_BASE = process.env.NEXT_PUBLIC_MEDIA_BASE_URL;
+
+export const mediaFigureBlock = createMediaFigureBlock({
+  mediaBaseUrl: MEDIA_BASE,
+  transform: { width: 1200, height: 630, format: "webp" },
+  className: `m-0 ${blockPaddingClass} [&>img]:block [&>img]:h-auto [&>img]:max-h-[400px] [&>img]:w-full [&>img]:max-w-4xl [&>img]:rounded-lg [&>img]:object-contain`,
+  captionClassName: "mt-3 max-w-4xl text-sm text-neutral-600",
+});

package/template/components/puck/paragraph-block.tsx

@@ -1,48 +1,33 @@
-import { isValidElement, type ReactNode } from "react";
+"use client";
+import { type ReactNode, isValidElement } from "react";
+import { richtextField } from "@pantheon-systems/puck-css/fields";
 import { blockPaddingClass } from "./block-padding";
-import ReactMarkdown from "react-markdown";
-
-function asMarkdownText(value: unknown): string {
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  return "";
-}
+import { ParagraphEditorText } from "./paragraph-editor-text";
+import { sanitizeRichtextHtml } from "./sanitize-richtext";
 
 export const paragraphBlock = {
   label: "Paragraph",
   fields: {
-    text: {
-      type: "textarea" as const,
-      label: "Text",
-      contentEditable: true,
-    },
+    text: richtextField,
   },
   defaultProps: {
     text: "Add your copy here. You can use multiple lines.",
   },
-  render: ({ text }: { text?: string | ReactNode }) => {
+  render: ({ text, id }: { text?: string | ReactNode; id: string }) => {
     if (isValidElement(text)) {
-      return <div className={blockPaddingClass}>{text}</div>;
+      return (
+        <div className={blockPaddingClass}>
+          <ParagraphEditorText text={text} id={id} />
+        </div>
+      );
     }
-    const markdown = asMarkdownText(text);
     return (
-      <div className={blockPaddingClass}>
-        <ReactMarkdown
-          components={{
-            p: ({ children }) => <p className="m-0 max-w-prose leading-relaxed">{children}</p>,
-            a: ({ href, children }) => (
-              <a
-                href={href}
-                className="text-blue-700 underline decoration-blue-700/40 underline-offset-2 hover:decoration-blue-700"
-              >
-                {children}
-              </a>
-            ),
-          }}
-        >
-          {markdown}
-        </ReactMarkdown>
-      </div>
+      <div
+        className={`${blockPaddingClass} prose max-w-prose`}
+        dangerouslySetInnerHTML={{
+          __html: typeof text === "string" ? sanitizeRichtextHtml(text) : "",
+        }}
+      />
     );
   },
 };

package/template/components/puck/paragraph-editor-text.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { isValidElement, useEffect, useState, useRef, type ReactNode } from "react";
+import {
+  useResolvedPreviewState,
+  getBlockPropsById,
+} from "@pantheon-systems/puck-css";
+import { sanitizeRichtextHtml } from "./sanitize-richtext";
+
+const TEMPLATE_TOKEN_RE = /\{\{[^{}]+\}\}/;
+
+function extractRawText(element: ReactNode): string | null {
+  if (!isValidElement(element)) return null;
+  const props = element.props as Record<string, unknown>;
+  return typeof props.value === "string" ? props.value : null;
+}
+
+export function ParagraphEditorText({
+  text,
+  id,
+}: {
+  text: ReactNode;
+  id: string;
+}) {
+  const { data: resolved } = useResolvedPreviewState();
+  const [isFocused, setFocused] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleMouseDown(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setFocused(false);
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, []);
+
+  const rawText = extractRawText(text);
+  const hasTemplates = rawText != null && TEMPLATE_TOKEN_RE.test(rawText);
+
+  const resolvedProps = resolved ? getBlockPropsById(resolved, id) : null;
+  const resolvedText =
+    typeof resolvedProps?.text === "string" ? resolvedProps.text : null;
+
+  const showResolved = hasTemplates && !isFocused && resolvedText != null;
+
+  if (!hasTemplates) return <>{text}</>;
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ position: "relative" }}
+      onFocus={() => setFocused(true)}
+      onBlur={(e) => {
+        if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+          setFocused(false);
+        }
+      }}
+    >
+      <div style={showResolved ? { color: "transparent" } : undefined}>
+        {text}
+      </div>
+      {showResolved && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            pointerEvents: "none",
+          }}
+        >
+          <div
+            className="prose max-w-prose"
+            dangerouslySetInnerHTML={{
+              __html: sanitizeRichtextHtml(resolvedText),
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/template/components/puck/paragraph-markdown.tsx

@@ -0,0 +1,15 @@
+import type { Components } from "react-markdown";
+
+export const markdownComponents: Components = {
+  p: ({ children }) => (
+    <p className="m-0 max-w-prose leading-relaxed">{children}</p>
+  ),
+  a: ({ href, children }) => (
+    <a
+      href={href}
+      className="text-blue-700 underline decoration-blue-700/40 underline-offset-2 hover:decoration-blue-700"
+    >
+      {children}
+    </a>
+  ),
+};