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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantheon-systems/create-p1-starter-kit",
-  "version": "0.4.4",
+  "version": "0.6.0",
   "description": "Scaffold a new P1 starter project",
   "type": "module",
   "bin": {

package/template/.env.example

@@ -14,3 +14,14 @@ CSS_API_KEY=your-api-key
 
 # Branch is auto-detected (defaults to main) unless specified:
 # NEXT_PUBLIC_CSS_BRANCH_ID=branch-456
+
+# --- Dev tools (disabled by default) ---
+# Show the RoleSwitcher dropdown in the P1 editor for local testing of
+# admin/editor/junior-editor permissions. Never enable this in production.
+# NEXT_PUBLIC_ENABLE_ROLE_SWITCHER=true
+
+# --- AI chatbot (optional) ---
+# LaunchDarkly client-side ID used to evaluate the `p1-chatbot` flag. It is
+# 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

package/template/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @pantheon-systems/p1-starter
 
+## 1.0.5
+
+### Patch Changes
+
+- @pantheon-systems/puck-css@0.6.0
+- @pantheon-systems/p1-next-sdk@0.6.0
+
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies [0bc7982]
+  - @pantheon-systems/puck-css@0.5.0
+  - @pantheon-systems/p1-next-sdk@0.5.0
+
 ## 1.0.3
 
 ### Patch Changes

package/template/__tests__/auth-route.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const appDir = resolve(__dirname, "..");
+
+describe("auth route does not force re-authentication on every login", () => {
+  const content = readFileSync(
+    resolve(appDir, "app/p1/auth/[...action]/route.ts"),
+    "utf-8",
+  );
+
+  it("does not hardcode an OAuth prompt override", () => {
+    // prompt: 'login' forces Google's full re-auth screen on every broker
+    // login, even with a live Google session — see PCC-3391.
+    expect(content).not.toMatch(/prompt\s*:\s*['"]login['"]/);
+  });
+
+  it("uses select_account so users can still switch Google accounts", () => {
+    // Omitting `prompt` entirely silently re-authenticates whichever Google
+    // account has a live session, with no way to pick a different one on
+    // logout/login. select_account shows a lightweight account chooser
+    // (one click if already signed in) without forcing full re-auth.
+    expect(content).toMatch(/prompt\s*:\s*['"]select_account['"]/);
+  });
+});

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

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { shouldShowChatbot, CHATBOT_FLAG_KEY } from "../lib/chatbot-flag/feature-gate";
+
+describe("shouldShowChatbot", () => {
+  it("is off when the flag is disabled, even with an agent URL", () => {
+    expect(shouldShowChatbot(false, "https://agent.example")).toBe(false);
+  });
+
+  it("is off when the agent URL is missing, even with the flag enabled", () => {
+    expect(shouldShowChatbot(true, undefined)).toBe(false);
+    expect(shouldShowChatbot(true, "")).toBe(false);
+  });
+
+  it("is on only when the flag is enabled AND the agent URL is set", () => {
+    expect(shouldShowChatbot(true, "https://agent.example")).toBe(true);
+  });
+
+  it("defaults off when the flag value is undefined (LD not yet resolved / offline)", () => {
+    expect(shouldShowChatbot(undefined, "https://agent.example")).toBe(false);
+  });
+
+  it("exposes the p1-chatbot flag key", () => {
+    expect(CHATBOT_FLAG_KEY).toBe("p1-chatbot");
+  });
+});

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

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+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"),
+    "utf-8",
+  );
+
+  it("reads LaunchDarkly flags via useFlags", () => {
+    expect(content).toContain("useFlags");
+  });
+
+  it("gates the AI plugin through shouldShowChatbot", () => {
+    expect(content).toContain("shouldShowChatbot");
+  });
+
+  it("wraps the editor in the chatbot flag provider", () => {
+    expect(content).toContain("ChatbotFlagProvider");
+  });
+
+  it("imports the plugin from the published @pantheon-systems/p1-ai-chat package", () => {
+    expect(content).toContain("@pantheon-systems/p1-ai-chat");
+  });
+});
+
+describe("chatbot flag provider is a client-side LaunchDarkly gate", () => {
+  const content = readFileSync(
+    resolve(appDir, "components/ChatbotFlagProvider.tsx"),
+    "utf-8",
+  );
+
+  it("initializes from the public client-side ID env var", () => {
+    expect(content).toContain("NEXT_PUBLIC_LD_CLIENT_ID");
+  });
+
+  it("uses the launchdarkly-react-client-sdk", () => {
+    expect(content).toContain("launchdarkly-react-client-sdk");
+  });
+});

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

@@ -27,6 +27,10 @@ describe("editor-client uses P1 plugins", () => {
   it("wraps with P1QueryProvider for TanStack React Query", () => {
     expect(content).toContain("P1QueryProvider");
   });
+
+  it("gates RoleSwitcher behind NEXT_PUBLIC_ENABLE_ROLE_SWITCHER", () => {
+    expect(content).toContain("NEXT_PUBLIC_ENABLE_ROLE_SWITCHER");
+  });
 });
 
 describe("API handler passes fetcher config", () => {

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

@@ -1,9 +1,183 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import type { Data } from "@puckeditor/core";
 import { RenderClient } from "@pantheon-systems/puck-css";
 import config from "../../puck.config";
 
+function EditIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={16} height={16} aria-hidden>
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+    </svg>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={14} height={14} aria-hidden>
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  );
+}
+
+function LogoutIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={16} height={16} aria-hidden>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" y1="12" x2="9" y2="12" />
+    </svg>
+  );
+}
+
+export function P1EditWidget({ route }: { route: string }) {
+  const [hasToken, setHasToken] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const flag = typeof localStorage !== "undefined"
+      ? localStorage.getItem("p1_logged_in")
+      : null;
+    setHasToken(!!flag);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: PointerEvent) => {
+      if (!(e.target as HTMLElement).closest("[data-p1-widget]")) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  if (!hasToken) return null;
+
+  const editHref = `/p1${route === "/" ? "" : route}`;
+
+  return (
+    <div
+      data-p1-widget
+      style={{
+        position: "fixed",
+        top: 16,
+        right: 16,
+        zIndex: 99999,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+      }}
+    >
+      <button
+        onClick={() => setOpen((o) => !o)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          height: 38,
+          padding: "4px 12px 4px 12px",
+          background: "#fff",
+          border: "1px solid #e0e0e0",
+          borderRadius: 999,
+          cursor: "pointer",
+          fontSize: 14,
+          fontWeight: 500,
+          color: "#1a1a1a",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06)",
+        }}
+      >
+        <span style={{ fontWeight: 600 }}>P1</span>
+        <span
+          style={{
+            display: "inline-flex",
+            color: "#888",
+            transition: "transform 200ms ease",
+            transform: open ? "rotate(180deg)" : "none",
+          }}
+        >
+          <ChevronIcon />
+        </span>
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          style={{
+            position: "absolute",
+            top: "calc(100% + 8px)",
+            right: 0,
+            minWidth: 200,
+            background: "#fff",
+            border: "1px solid #e0e0e0",
+            borderRadius: 8,
+            boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+            padding: 6,
+          }}
+        >
+          <a
+            href={editHref}
+            role="menuitem"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              width: "100%",
+              padding: "9px 10px",
+              borderRadius: 4,
+              fontSize: 14,
+              color: "#1a1a1a",
+              textDecoration: "none",
+            }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = "#f5f5f5"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
+          >
+            <span style={{ color: "#888", flex: "0 0 auto" }}><EditIcon /></span>
+            Edit this page
+          </a>
+          <div style={{ height: 1, background: "#e0e0e0", margin: "6px 4px" }} />
+          <button
+            role="menuitem"
+            onClick={() => {
+              localStorage.removeItem("p1_logged_in");
+              localStorage.removeItem("p1_auth_token");
+              localStorage.removeItem("css_broker_token");
+              window.location.reload();
+            }}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              width: "100%",
+              padding: "9px 10px",
+              borderRadius: 4,
+              fontSize: 14,
+              color: "#1a1a1a",
+              textDecoration: "none",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              fontFamily: "inherit",
+            }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = "#f5f5f5"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
+          >
+            <span style={{ color: "#888", flex: "0 0 auto" }}><LogoutIcon /></span>
+            Log out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function Client({
   data,
   pageMetadata,
@@ -18,6 +192,7 @@ export function Client({
   return (
     <>
       <RenderClient config={config} data={data} />
+      {pageMetadata && <P1EditWidget route={pageMetadata.route} />}
       {pageMetadata && (
         <footer className="mt-16 border-t border-gray-200 py-4 text-center text-sm text-gray-500">
           Rendered with{" "}

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

@@ -20,7 +20,9 @@ const initPromise = ensureInitialized({
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
   p1ApiKey: process.env.CSS_API_KEY,
   p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
-  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
+  // Default to "main" when unset: server components (no user token) need a
+  // branch to list/read documents (e.g. the /structure routes table).
+  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID ?? "main",
 });
 
 export async function generateMetadata({
@@ -110,7 +112,7 @@ export default async function Page({
               Open the Page Editor
             </a>
             <a
-              href="https://staging.content.pantheon.io/dashboard/sites"
+              href={`${process.env.NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL || "https://content.pantheon.io"}/dashboard/sites`}
               target="_blank"
               rel="noopener noreferrer"
               className="rounded-lg border border-gray-300 px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-100"

package/template/app/p1/[[...p1]]/editor-client.tsx

@@ -8,18 +8,56 @@ import {
   createNextConfig,
   useP1Editor,
   useP1Plugins,
+  useP1Auth,
   wrapConfigForEditorPreview,
   P1QueryProvider,
   editorPathHref,
 } from "@pantheon-systems/puck-css";
 import { P1NextRouterProvider } from "@pantheon-systems/p1-next-sdk";
+import { createAIChatPlugin } from "@pantheon-systems/p1-ai-chat";
+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 "@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";
+
+const DEFAULT_PAGE_DATA = {
+  root: { props: { title: "New page" } },
+  content: [],
+  zones: {},
+};
+
+const DEFAULT_ROOT_PAGE_DATA = {
+  root: { props: { title: "Welcome | P1 site" } },
+  content: [
+    {
+      type: "P1WelcomeBlock",
+      props: {
+        id: "seed-welcome",
+        heading: "Welcome to your new Pantheon P1 Site.",
+        description: "You just created this new site from Pantheon P1 starter kit, congrats! You'll need a Pantheon P1 user account to edit it and create new pages.",
+        ctaLabel: "Sign-in to P1",
+        ctaHref: "/p1",
+        footnote: "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
+        loggedInHeading: "Welcome to your new Pantheon P1 Site.",
+        loggedInDescription: "You just created this new site from Pantheon P1 starter kit, congrats! Start editing this page or visit the P1 dashboard to manage your site.",
+        loggedInCtaLabel: "Edit this page with P1 Visual Editor",
+        loggedInCtaHref: "/p1",
+        loggedInSecondaryLabel: "Go to P1 Dashboard",
+        loggedInFootnote: "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
+        showLogo: true,
+      },
+    },
+  ],
+  zones: {},
+};
 
 let p1Config: ReturnType<typeof createNextConfig> | null = null;
 let p1ConfigError: string | null = null;
@@ -34,6 +72,41 @@ const editorConfig = wrapConfigForEditorPreview(config);
 
 const ROLES: ContentRole[] = ['admin', 'editor', 'junior-editor'];
 
+function P1SignInPage() {
+  const { login, isLoading, error } = useP1Auth();
+
+  return (
+    <div className="w-full max-w-[620px] mx-auto flex flex-col items-center text-center px-8 py-16 font-['Inter',system-ui,sans-serif] text-[#1a1a2e] min-h-screen justify-center">
+      <P1Lockup />
+
+      <h1 className="text-[2.5rem] leading-[1.08] font-semibold m-0 mb-3" style={{ fontSize: '2.5rem' }}>
+        Your Collaborative Website Management Workspace.
+      </h1>
+      <p className="text-base leading-6 text-[#5a5a6e] max-w-[54ch] m-0">
+        Log in to your Pantheon P1 account to edit your P1 powered website.
+        If you don&apos;t have yet a Pantheon P1 account, contact us{" "}
+        <a href="https://pantheon.io/contact-us" className="text-blue-600 underline">here</a>.
+      </p>
+
+      <div className="flex gap-3 mt-8 justify-center">
+        <button
+          className="inline-flex items-center justify-center h-12 px-6 gap-2 rounded-full border border-[#1a1a2e] bg-[#1a1a2e] text-white font-['Inter',system-ui,sans-serif] text-lg font-medium leading-none whitespace-nowrap cursor-pointer transition-colors duration-200 hover:bg-[#2d2d44] hover:border-[#2d2d44] focus-visible:outline focus-visible:outline-1 focus-visible:outline-blue-600 focus-visible:outline-offset-1 disabled:opacity-40 disabled:cursor-not-allowed"
+          onClick={() => void login()}
+          disabled={isLoading}
+        >
+          {isLoading ? "Signing in..." : "Continue"}
+        </button>
+      </div>
+
+      {error && (
+        <p className="mt-4 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-md">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
 export function EditorClientWrapper({ path }: { path: string }) {
   const [userRole, setUserRole] = useState<ContentRole>('editor');
   const lastGoodStateRef = React.useRef<{ puckKey: string; puckProps: any } | null>(null);
@@ -58,11 +131,15 @@ export function EditorClientWrapper({ path }: { path: string }) {
       <P1NextRouterProvider>
         <P1App
           config={{ ...p1Config, userRole }}
-          loginPageProps={{ title: "P1 Starter", subtitle: "Sign in to edit" }}
+          loginFallback={<P1SignInPage />}
         >
-          <EditorContent path={path} lastGoodStateRef={lastGoodStateRef} />
+          <ChatbotFlagProvider>
+            <EditorContent path={path} lastGoodStateRef={lastGoodStateRef} />
+          </ChatbotFlagProvider>
         </P1App>
-        <RoleSwitcher currentRole={userRole} onRoleChange={setUserRole} />
+        {process.env.NEXT_PUBLIC_ENABLE_ROLE_SWITCHER === 'true' && (
+          <RoleSwitcher currentRole={userRole} onRoleChange={setUserRole} />
+        )}
       </P1NextRouterProvider>
     </P1QueryProvider>
   );
@@ -126,7 +203,33 @@ function EditorContent({
   lastGoodStateRef: React.MutableRefObject<{ puckKey: string; puckProps: any } | null>;
 }) {
   const router = useRouter();
+  const { getToken } = useP1Auth();
   const p1Plugins = useP1Plugins(path, config);
+  const flags = useFlags();
+  const agentUrl = process.env.NEXT_PUBLIC_AGENT_URL;
+  const chatbotEnabled = shouldShowChatbot(flags[CHATBOT_FLAG_KEY], agentUrl);
+  const aiPlugin = React.useMemo(
+    () =>
+      chatbotEnabled && agentUrl
+        ? createAIChatPlugin({ agentUrl })
+        : null,
+    [chatbotEnabled, agentUrl],
+  );
+  const additionalPlugins = React.useMemo(
+    () => (aiPlugin ? [...p1Plugins, aiPlugin] : p1Plugins),
+    [p1Plugins, aiPlugin],
+  ) as typeof p1Plugins;
+
+  const [redirecting, setRedirecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const returnTo = localStorage.getItem("p1_return_to");
+    if (returnTo) {
+      localStorage.removeItem("p1_return_to");
+      setRedirecting(true);
+      router.push(returnTo);
+    }
+  }, [router]);
 
   const handleDocumentSelect = useCallback(
     (docPath: string) => {
@@ -135,15 +238,33 @@ function EditorContent({
     [router],
   );
 
+  const handleDocumentNotFound = useCallback(
+    async (docPath: string, _error: Error) => {
+      const initialData = docPath === "/" ? DEFAULT_ROOT_PAGE_DATA : DEFAULT_PAGE_DATA;
+      const token = await getToken();
+      const headers: Record<string, string> = { "Content-Type": "application/json" };
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      const res = await fetch("/p1/api/structure/page", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ path: docPath, initialData }),
+      });
+      return res.ok;
+    },
+    [getToken],
+  );
+
   const { loading, error, puckKey, puckProps } = useP1Editor({
     documentPath: path,
     puckConfig: editorConfig,
-    additionalPlugins: p1Plugins,
+    additionalPlugins,
+    onDocumentNotFound: handleDocumentNotFound,
     pluginOptions: {
       onDocumentSelect: handleDocumentSelect,
       selectedDocumentPath: path,
       siteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
       dashboardUrl: process.env.NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL,
+      logoUrl: P1_ASSETS.LOGO_URL,
     },
     overrideOptions: {
       showDefaultPublish: false,
@@ -163,6 +284,14 @@ function EditorContent({
     }
   }, [loading, error, puckKey, puckProps]);
 
+  if (redirecting) {
+    return (
+      <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
+        Redirecting...
+      </div>
+    );
+  }
+
   // Show full loading screen only on first load (no previous state)
   if (loading && !lastGoodStateRef.current) {
     return (
@@ -230,7 +359,7 @@ function EditorContent({
         </div>
       )}
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-      <Puck key={displayState.puckKey} {...displayState.puckProps as any} _experimentalFullScreenCanvas={true} />
+      <Puck key={`${displayState.puckKey}-${chatbotEnabled ? "ai" : "no-ai"}`} {...displayState.puckProps as any} _experimentalFullScreenCanvas={true} />
     </div>
   );
 }

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

@@ -2,16 +2,16 @@ import "@puckeditor/core/puck.css";
 import { createP1Pages } from "@pantheon-systems/p1-next-sdk/server";
 import config from "../../../puck.config";
 import { EditorClientWrapper } from "./editor-client";
-import { RenderClientWrapper } from "./render-client";
 
 const pages = createP1Pages({
   config,
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
   p1ApiKey: process.env.CSS_API_KEY,
   p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
-  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
+  // Default to "main" when unset: server components (no user token) need a
+  // branch to list/read documents (e.g. the /p1/structure routes table).
+  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID ?? "main",
   EditorClient: EditorClientWrapper,
-  RenderClient: RenderClientWrapper,
 });
 
 export default pages.Page;

package/template/app/p1/auth/[...action]/route.ts

@@ -3,7 +3,7 @@ import { createP1AuthHandler } from "@pantheon-systems/p1-next-sdk/server";
 const handler = createP1AuthHandler({
   p1ApiKey: process.env.CSS_API_KEY,
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
-  prompt: 'login',
+  prompt: "select_account",
 });
 
 export const { POST } = handler;

package/template/app/page.tsx

@@ -1,6 +1,5 @@
-import Link from "next/link";
+import { WelcomeBlockRender } from "../components/puck/welcome-block-render";
 import {
-  listRoutes,
   ensureInitialized,
   getPage,
   listRouteTemplateKeysFromDatabase,
@@ -12,13 +11,14 @@ import {
 import type { Metadata } from "next";
 import { REMOTE_DATASOURCE_FETCHERS } from "../lib/remote-datasource-fetchers";
 import { Client } from "./[...puckPath]/client";
-import { CollectionNav } from "./collection-nav";
 
 const initPromise = ensureInitialized({
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
   p1ApiKey: process.env.CSS_API_KEY,
   p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
-  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
+  // Default to "main" when unset: server components (no user token) need a
+  // branch to list/read documents (e.g. the /structure routes table).
+  p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID ?? "main",
 });
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -76,63 +76,21 @@ export default async function HomePage() {
     );
   }
 
-  const routes = await listRoutes();
-
-  const staticPages = routes.filter((r) => r.kind === "static");
-  const templates = routes.filter((r) => r.kind === "template");
-
   return (
-    <main className="flex min-h-screen items-center justify-center bg-gray-50">
-      <div className="mx-auto max-w-lg px-6 py-16 text-center">
-        <h1 className="text-3xl font-bold tracking-tight text-gray-900">
-          Welcome to the P1 Starter Kit
-        </h1>
-        <p className="mt-4 text-gray-600">
-          Build and manage pages with the visual editor, or head to the
-          dashboard to manage your site.
-        </p>
-
-        <nav className="mt-10 flex flex-col gap-3">
-          <Link
-            href="/p1"
-            className="rounded-lg bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:bg-gray-700"
-          >
-            Open the Page Editor
-          </Link>
-          <a
-            href="https://staging.content.pantheon.io/dashboard/sites"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="rounded-lg border border-gray-300 px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-100"
-          >
-            P1 Dashboard &rarr;
-          </a>
-        </nav>
-
-        {(staticPages.length > 0 || templates.length > 0) && (
-          <div className="mt-10 text-left">
-            <h2 className="text-lg font-semibold text-gray-900 mb-4">Pages</h2>
-            <ul className="space-y-3">
-              {staticPages.map((route) => (
-                <li key={route.path}>
-                  <Link
-                    href={route.path}
-                    className="text-sm font-mono text-blue-600 hover:underline"
-                  >
-                    {route.path}
-                  </Link>
-                </li>
-              ))}
-              {templates.map((route) => (
-                <li key={route.path}>
-                  <CollectionNav templatePath={route.path} />
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-    </main>
+    <WelcomeBlockRender
+      heading="Welcome to your new Pantheon P1 Site."
+      description="You just created this new site from Pantheon P1 starter kit, congrats! You'll need a Pantheon P1 user account to edit it and create new pages."
+      ctaLabel="Sign-in to P1"
+      ctaHref="/p1"
+      footnote="Visit [P1 documentation](https://docs.pantheon.io) for more information."
+      loggedInHeading="Welcome to your new Pantheon P1 Site."
+      loggedInDescription="You just created this new site from Pantheon P1 starter kit, congrats! Start editing this page or visit the P1 dashboard to manage your site."
+      loggedInCtaLabel="Edit this page with P1 Visual Editor"
+      loggedInCtaHref="/p1"
+      loggedInSecondaryLabel="Go to P1 Dashboard"
+      loggedInFootnote="Visit [P1 documentation](https://docs.pantheon.io) for more information."
+      showLogo={true}
+    />
   );
 }
 

package/template/components/ChatbotFlagProvider.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+import { LDProvider } from "launchdarkly-react-client-sdk";
+import { useP1Auth } from "@pantheon-systems/puck-css";
+
+/**
+ * Wraps the editor with a LaunchDarkly client-side provider so the `p1-chatbot`
+ * flag can be evaluated at runtime. The client-side ID is public by design.
+ *
+ * When NEXT_PUBLIC_LD_CLIENT_ID is unset (local dev / offline), LaunchDarkly is
+ * not initialized and children render without a provider — `useFlags()` then
+ * returns no flags, so the chatbot defaults to hidden.
+ */
+export function ChatbotFlagProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const clientSideID = process.env.NEXT_PUBLIC_LD_CLIENT_ID;
+  const { user } = useP1Auth();
+
+  if (!clientSideID) {
+    return <>{children}</>;
+  }
+
+  // LaunchDarkly evaluates the flag for the context present at mount and does not
+  // re-identify on context change. This provider mounts inside <P1App> (after
+  // auth), so the authenticated user is available here; the anonymous fallback
+  // only applies if it ever renders pre-auth.
+  //
+  // Key on the always-present, stable user id — email is optional on AuthUser, so
+  // keying on it would silently drop emailless users into the anonymous branch and
+  // lose per-user rollout stickiness. (LaunchDarkly also favors a non-PII key.)
+  // Email is kept as a targeting attribute.
+  const context = user
+    ? { kind: "user" as const, key: user.id, email: user.email }
+    : { kind: "user" as const, key: "anonymous", anonymous: true };
+
+  return (
+    <LDProvider
+      clientSideID={clientSideID}
+      context={context}
+      reactOptions={{ useCamelCaseFlagKeys: false }}
+    >
+      {children}
+    </LDProvider>
+  );
+}

package/template/components/p1-lockup.tsx

@@ -0,0 +1,33 @@
+"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>
+  );
+}
+
+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>
+  );
+}

package/template/components/puck/welcome-block-render.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { P1Lockup } from "../p1-lockup";
+
+export interface WelcomeBlockRenderProps {
+  heading?: string;
+  description?: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+  footnote?: string;
+  loggedInHeading?: string;
+  loggedInDescription?: string;
+  loggedInCtaLabel?: string;
+  loggedInCtaHref?: string;
+  loggedInSecondaryLabel?: string;
+  loggedInFootnote?: string;
+  showLogo?: boolean;
+}
+
+const LOGGED_IN_DEFAULTS = {
+  heading: "Welcome to your new Pantheon P1 Site.",
+  description:
+    "You just created this new site from Pantheon P1 starter kit, congrats! Start editing this page or visit the P1 dashboard to manage your site.",
+  ctaLabel: "Edit this page with P1 Visual Editor",
+  ctaHref: "/p1",
+  secondaryLabel: "Go to P1 Dashboard",
+  secondaryHref: process.env.NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL || "https://content.pantheon.io",
+  footnote:
+    "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
+};
+
+const BTN_PRIMARY =
+  "inline-flex items-center justify-center h-12 px-6 gap-2 rounded-full border border-[#1a1a2e] bg-[#1a1a2e] text-white font-['Inter',system-ui,sans-serif] text-lg font-medium leading-none whitespace-nowrap cursor-pointer transition-colors duration-200 hover:bg-[#2d2d44] hover:border-[#2d2d44] focus-visible:outline focus-visible:outline-1 focus-visible:outline-blue-600 focus-visible:outline-offset-1 disabled:opacity-40 disabled:cursor-not-allowed";
+
+const BTN_SECONDARY =
+  "inline-flex items-center justify-center h-12 px-6 gap-2 rounded-full border border-[#d0d0d8] bg-transparent text-[#1a1a2e] font-['Inter',system-ui,sans-serif] text-lg font-medium leading-none whitespace-nowrap cursor-pointer transition-colors duration-200 hover:bg-[rgba(26,26,46,0.06)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-blue-600 focus-visible:outline-offset-1";
+
+export function WelcomeBlockRender(props: WelcomeBlockRenderProps) {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    setIsLoggedIn(!!localStorage.getItem("p1_logged_in"));
+  }, []);
+
+  const activeHeading = isLoggedIn
+    ? (props.loggedInHeading || LOGGED_IN_DEFAULTS.heading)
+    : props.heading;
+  const activeDescription = isLoggedIn
+    ? (props.loggedInDescription || LOGGED_IN_DEFAULTS.description)
+    : props.description;
+  const activeCtaLabel = isLoggedIn
+    ? (props.loggedInCtaLabel || LOGGED_IN_DEFAULTS.ctaLabel)
+    : props.ctaLabel;
+  const activeCtaHref = isLoggedIn
+    ? (props.loggedInCtaHref || LOGGED_IN_DEFAULTS.ctaHref)
+    : props.ctaHref;
+  const activeFootnote = isLoggedIn
+    ? (props.loggedInFootnote || LOGGED_IN_DEFAULTS.footnote)
+    : props.footnote;
+  const secondaryLabel = isLoggedIn
+    ? (props.loggedInSecondaryLabel || LOGGED_IN_DEFAULTS.secondaryLabel)
+    : null;
+
+  const footnoteHtml = (activeFootnote ?? "").replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">$1</a>',
+  );
+
+  return (
+    <div className="w-full max-w-[620px] mx-auto flex flex-col items-center text-center px-8 py-16 font-['Inter',system-ui,sans-serif] text-[#1a1a2e] min-h-screen justify-center">
+      {props.showLogo !== false && <P1Lockup />}
+      <h1 className="text-[2.5rem] leading-[1.08] font-semibold m-0 mb-4">
+        {activeHeading}
+      </h1>
+      <p className="text-base leading-6 text-[#5a5a6e] max-w-[54ch] m-0">
+        {activeDescription}
+      </p>
+      <div className="flex gap-3 mt-8 justify-center">
+        <button
+          className={BTN_PRIMARY}
+          onClick={() => {
+            if (!isLoggedIn) {
+              localStorage.setItem("p1_return_to", window.location.pathname);
+            }
+            window.location.href = activeCtaHref || "/";
+          }}
+        >
+          {activeCtaLabel}
+        </button>
+        {secondaryLabel && (
+          <button
+            className={BTN_SECONDARY}
+            onClick={() => {
+              window.open(LOGGED_IN_DEFAULTS.secondaryHref, "_blank", "noopener,noreferrer");
+            }}
+          >
+            {secondaryLabel}
+          </button>
+        )}
+      </div>
+      {activeFootnote && (
+        <p
+          className="mt-12 text-sm text-[#5a5a6e]"
+          dangerouslySetInnerHTML={{ __html: footnoteHtml }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { WelcomeBlockRender } from "./welcome-block-render";
+
+export const welcomeBlock = {
+  label: "P1 Welcome",
+  fields: {
+    heading: { type: "text" as const, label: "Heading (signed out)" },
+    description: { type: "textarea" as const, label: "Description (signed out)" },
+    ctaLabel: { type: "text" as const, label: "Primary button label (signed out)" },
+    ctaHref: { type: "text" as const, label: "Primary button link (signed out)" },
+    footnote: { type: "textarea" as const, label: "Footnote (signed out)" },
+    loggedInHeading: { type: "text" as const, label: "Heading (signed in)" },
+    loggedInDescription: { type: "textarea" as const, label: "Description (signed in)" },
+    loggedInCtaLabel: { type: "text" as const, label: "Primary button label (signed in)" },
+    loggedInCtaHref: { type: "text" as const, label: "Primary button link (signed in)" },
+    loggedInSecondaryLabel: { type: "text" as const, label: "Secondary button label (signed in)" },
+    loggedInFootnote: { type: "textarea" as const, label: "Footnote (signed in)" },
+    showLogo: {
+      type: "radio" as const,
+      label: "Show P1 logo",
+      options: [
+        { label: "Yes", value: true },
+        { label: "No", value: false },
+      ],
+    },
+  },
+  defaultProps: {
+    heading: "Welcome to your new Pantheon P1 Site.",
+    description:
+      "You just created this new site from Pantheon P1 starter kit, congrats! You'll need a Pantheon P1 user account to edit it and create new pages.",
+    ctaLabel: "Sign-in to P1",
+    ctaHref: "/p1",
+    footnote:
+      "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
+    loggedInHeading: "Welcome to your new Pantheon P1 Site.",
+    loggedInDescription:
+      "You just created this new site from Pantheon P1 starter kit, congrats! Start editing this page or visit the P1 dashboard to manage your site.",
+    loggedInCtaLabel: "Edit this page with P1 Visual Editor",
+    loggedInCtaHref: "/p1",
+    loggedInSecondaryLabel: "Go to P1 Dashboard",
+    loggedInFootnote:
+      "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
+    showLogo: true,
+  },
+  render: WelcomeBlockRender,
+};

package/template/constants/assets.ts

@@ -0,0 +1,3 @@
+export const P1_ASSETS = {
+  LOGO_URL: "/images/p1_logo.svg",
+} as const;

package/template/lib/chatbot-flag/feature-gate.ts

@@ -0,0 +1,17 @@
+/** LaunchDarkly flag that gates the AI chatbot. Short-lived — removed once the
+ *  chatbot ships to everyone in the alpha. */
+export const CHATBOT_FLAG_KEY = "p1-chatbot";
+
+/**
+ * Whether the AI chatbot plugin should be mounted in the editor.
+ *
+ * Requires both the `p1-chatbot` LaunchDarkly flag to be enabled and an agent
+ * URL to be configured. Defaults off when the flag is `undefined` (LD not yet
+ * resolved, unset client ID, or offline), so the chatbot stays hidden by default.
+ */
+export function shouldShowChatbot(
+  flagEnabled: boolean | undefined,
+  agentUrl: string | undefined,
+): boolean {
+  return Boolean(flagEnabled && agentUrl);
+}

package/template/package.json

@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "@pantheon-systems/cpub-react-sdk": "^5.2.1",
-    "@pantheon-systems/css-client": "^0.4.4",
-    "@pantheon-systems/p1-next-sdk": "^0.4.4",
-    "@pantheon-systems/puck-css": "^0.4.4",
+    "@pantheon-systems/p1-ai-chat": "^0.1.0",
+    "@pantheon-systems/p1-next-sdk": "^0.6.0",
+    "@pantheon-systems/pds-toolkit-react": "2.0.0-alpha.12",
+    "@pantheon-systems/puck-css": "^0.6.0",
     "@puckeditor/core": "^0.21.1",
     "@tailwindcss/postcss": "^4.2.2",
     "classnames": "^2.5.1",
+    "launchdarkly-react-client-sdk": "^3.9.2",
     "next": "^16.2.6",
     "postcss": "^8.5.12",
     "react": "^19.2.5",

package/template/public/images/p1_logo.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3C0 1.34315 1.34315 0 3 0H29C30.6569 0 32 1.34315 32 3V29C32 30.6569 30.6569 32 29 32H3C1.34315 32 0 30.6569 0 29V3Z" fill="#171717"/>
+<path d="M6 7H16.9111V8.82232H18.7335V17.9112H16.9111V19.7335H9.64464V25.189H6.01139V7H6ZM15.0888 10.6333H9.63325V16.0888H15.0888V10.6333Z" fill="#FFDC28"/>
+<path d="M20.5449 7H26.0005V25.1777H22.3672V10.6333H20.5449V7Z" fill="#FFDC28"/>
+</svg>

package/template/puck.config.tsx

@@ -10,6 +10,7 @@ import { paragraphBlock } from "./components/puck/paragraph-block";
 import { quoteBlock } from "./components/puck/quote-block";
 import { puckRoot } from "./components/puck/root";
 import { spacerBlock } from "./components/puck/spacer-block";
+import { welcomeBlock } from "./components/puck/welcome-block";
 
 export const config = {
   categories: {
@@ -33,6 +34,10 @@ export const config = {
       title: "Actions",
       components: ["ButtonBlock"],
     },
+    pages: {
+      title: "Page Sections",
+      components: ["P1WelcomeBlock"],
+    },
   },
   root: puckRoot,
   components: {
@@ -45,6 +50,7 @@ export const config = {
     DividerBlock: dividerBlock,
     SpacerBlock: spacerBlock,
     ButtonBlock: buttonBlock,
+    P1WelcomeBlock: welcomeBlock,
   },
 } as Config;
 

package/template/app/p1/[[...p1]]/render-client.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import type { Data } from "@puckeditor/core";
-import { RenderClient } from "@pantheon-systems/puck-css";
-import config from "../../../puck.config";
-
-export function RenderClientWrapper({ data }: { data: Data }) {
-  return <RenderClient config={config} data={data} />;
-}