@pantheon-systems/create-p1-starter-kit 0.4.1 → 0.4.3

package/lib/messages.js

@@ -13,8 +13,9 @@ export function showSuccess(projectName, projectPath, packageManager) {
   console.log(`  ${pc.dim('# Copy .env.example to .env and fill in your credentials:')}`);
   console.log(`  ${pc.cyan('cp')} .env.example .env`);
   console.log(`  ${pc.dim('# Edit .env with your PCC_SITE_ID and PCC_TOKEN')}\n`);
+  const devCmd = packageManager === 'npm' ? 'npm run dev' : `${packageManager} dev`;
   console.log(`  ${pc.dim('# Start the dev server:')}`);
-  console.log(`  ${pc.cyan(`${packageManager} dev`)}\n`);
+  console.log(`  ${pc.cyan(devCmd)}\n`);
   console.log(pc.bold('Happy building! 🚀\n'));
 }
 

package/lib/messages.test.js

@@ -0,0 +1,29 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { showSuccess } from './messages.js';
+
+describe('showSuccess', () => {
+  let output;
+
+  beforeEach(() => {
+    output = [];
+    vi.spyOn(console, 'log').mockImplementation((...args) => output.push(args.join(' ')));
+  });
+
+  it('shows "npm run dev" for npm users', () => {
+    showSuccess('my-app', '/tmp/my-app', 'npm');
+    const allOutput = output.join('\n');
+    expect(allOutput).toContain('npm run dev');
+  });
+
+  it('shows "pnpm dev" for pnpm users', () => {
+    showSuccess('my-app', '/tmp/my-app', 'pnpm');
+    const allOutput = output.join('\n');
+    expect(allOutput).toContain('pnpm dev');
+  });
+
+  it('shows "yarn dev" for yarn users', () => {
+    showSuccess('my-app', '/tmp/my-app', 'yarn');
+    const allOutput = output.join('\n');
+    expect(allOutput).toContain('yarn dev');
+  });
+});

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@pantheon-systems/create-p1-starter-kit",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Scaffold a new P1 starter project",
   "type": "module",
   "bin": {
     "create-p1-starter-kit": "./index.js"
   },
-  "scripts": {
-    "build": "node scripts/build-template.js",
-    "prepublishOnly": "npm run build"
-  },
   "files": [
     "index.js",
     "lib/",
@@ -36,9 +32,16 @@
   "engines": {
     "node": ">=20.12.0"
   },
+  "devDependencies": {
+    "vitest": "^4.1.5"
+  },
   "dependencies": {
     "@clack/prompts": "^1.5.1",
     "picocolors": "^1.1.1"
   },
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "build": "node scripts/build-template.js",
+    "test": "vitest run"
+  }
+}

package/template/.env.example

@@ -2,9 +2,15 @@ PCC_SITE_ID=your-site-id
 PCC_TOKEN=your-token
 
 # --- P1 backend ---
-NEXT_PUBLIC_CSS_BASE_URL=https://css.example.com
+# NEXT_PUBLIC_CSS_BASE_URL defaults to https://ccr.p1.pantheon for production.
+# Override for staging, local, or sandbox deployments:
+# NEXT_PUBLIC_CSS_BASE_URL=https://staging.example.com
 NEXT_PUBLIC_CSS_SITE_ID=site-123
-P1_CSS_API_KEY=your-api-key
+CSS_API_KEY=your-api-key
+
+# --- P1 Admin Dashboard (optional) ---
+# Override the default dashboard URL (https://content.pantheon.io)
+# NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL=https://staging.content.pantheon.io
 
 # Branch is auto-detected (defaults to main) unless specified:
 # NEXT_PUBLIC_CSS_BRANCH_ID=branch-456

package/template/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @pantheon-systems/p1-starter
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @pantheon-systems/puck-css@0.4.3
+  - @pantheon-systems/p1-next-sdk@0.4.3
+  - @pantheon-systems/css-client@0.4.3
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [6650602]
+- Updated dependencies [dc7cfd7]
+  - @pantheon-systems/puck-css@0.4.2
+  - @pantheon-systems/css-client@0.4.2
+  - @pantheon-systems/p1-next-sdk@0.4.2

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

@@ -4,6 +4,37 @@ import type { Data } from "@puckeditor/core";
 import { RenderClient } from "@pantheon-systems/puck-css";
 import config from "../../puck.config";
 
-export function Client({ data }: { data: Data }) {
-  return <RenderClient config={config} data={data} />;
+export function Client({
+  data,
+  pageMetadata,
+}: {
+  data: Data;
+  pageMetadata?: {
+    route: string;
+    documentName?: string;
+    pageType?: "page" | "template" | "override";
+  };
+}) {
+  return (
+    <>
+      <RenderClient config={config} data={data} />
+      {pageMetadata && (
+        <footer className="mt-16 border-t border-gray-200 py-4 text-center text-sm text-gray-500">
+          Rendered with{" "}
+          <span className="font-medium">
+            {pageMetadata.documentName || pageMetadata.route}
+          </span>{" "}
+          from{" "}
+          <span className="font-medium">
+            {pageMetadata.pageType === "page" && "page"}
+            {pageMetadata.pageType === "template" && "page template"}
+            {pageMetadata.pageType === "override" && "page template override"}
+            {!pageMetadata.pageType && "page"}
+          </span>{" "}
+          at route{" "}
+          <span className="font-mono text-xs">{pageMetadata.route}</span>
+        </footer>
+      )}
+    </>
+  );
 }

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

@@ -18,7 +18,7 @@ import { REMOTE_DATASOURCE_FETCHERS } from "../../lib/remote-datasource-fetchers
 
 const initPromise = ensureInitialized({
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
-  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1ApiKey: process.env.CSS_API_KEY,
   p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
   p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
 });
@@ -34,6 +34,10 @@ export async function generateMetadata({
   const { puckPath = [] } = await params;
   const path = pagePathFromCatchAllSegments(puckPath);
 
+  if (path.startsWith("/_registry/") || path === "/_registry") {
+    return { title: "Not Found" };
+  }
+
   const [pageData, sp, routeTemplateKeys] = await Promise.all([
     getPage(path),
     searchParams,
@@ -70,6 +74,11 @@ export default async function Page({
   const { puckPath = [] } = await params;
   const path = pagePathFromCatchAllSegments(puckPath);
 
+  if (path.startsWith("/_registry/") || path === "/_registry") {
+    const { notFound } = await import("next/navigation");
+    notFound();
+  }
+
   const [data, searchParamData, routeTemplateKeys] = await Promise.all([
     getPage(path),
     searchParams,
@@ -125,7 +134,16 @@ export default async function Page({
   });
   const resolvedData = await resolveDataTemplates(data, context);
 
-  return <Client data={resolvedData} />;
+  return (
+    <Client
+      data={resolvedData}
+      pageMetadata={{
+        route: path,
+        documentName: data.root.props?.title as string | undefined,
+        pageType: "page",
+      }}
+    />
+  );
 }
 
 export const dynamic = "force-dynamic";

package/template/app/layout.tsx

@@ -7,7 +7,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body data-rm-theme="light">{children}</body>
     </html>
   );
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Puck } from "@puckeditor/core";
 import {
@@ -13,6 +13,7 @@ import {
 } from "@pantheon-systems/puck-css";
 import { P1NextRouterProvider } from "@pantheon-systems/p1-next-sdk";
 import type { Checkpoint } from "@pantheon-systems/puck-css";
+import type { ContentRole } from "@pantheon-systems/puck-css";
 
 import "@pantheon-systems/puck-css/styles.css";
 import "@pantheon-systems/puck-css/pds/styles.css";
@@ -30,7 +31,12 @@ try {
 
 const editorConfig = wrapConfigForEditorPreview(config);
 
+const ROLES: ContentRole[] = ['admin', 'editor', 'junior-editor'];
+
 export function EditorClientWrapper({ path }: { path: string }) {
+  const [userRole, setUserRole] = useState<ContentRole>('editor');
+  const lastGoodStateRef = React.useRef<{ puckKey: string; puckProps: any } | null>(null);
+
   if (!p1Config) {
     return (
       <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
@@ -50,17 +56,74 @@ export function EditorClientWrapper({ path }: { path: string }) {
     <P1QueryProvider>
       <P1NextRouterProvider>
         <P1App
-          config={p1Config}
+          config={{ ...p1Config, userRole }}
           loginPageProps={{ title: "P1 Starter", subtitle: "Sign in to edit" }}
         >
-          <EditorContent path={path} />
+          <EditorContent path={path} lastGoodStateRef={lastGoodStateRef} />
         </P1App>
+        <RoleSwitcher currentRole={userRole} onRoleChange={setUserRole} />
       </P1NextRouterProvider>
     </P1QueryProvider>
   );
 }
 
-function EditorContent({ path }: { path: string }) {
+function RoleSwitcher({
+  currentRole,
+  onRoleChange,
+}: {
+  currentRole: ContentRole;
+  onRoleChange: (role: ContentRole) => void;
+}) {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 16,
+        right: 16,
+        zIndex: 99999,
+        background: "rgba(0,0,0,0.85)",
+        color: "#fff",
+        borderRadius: 8,
+        padding: "8px 12px",
+        fontFamily: "system-ui",
+        fontSize: 12,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+      }}
+    >
+      <span style={{ opacity: 0.7 }}>Role:</span>
+      <select
+        value={currentRole}
+        onChange={(e) => onRoleChange(e.target.value as ContentRole)}
+        style={{
+          background: "rgba(255,255,255,0.15)",
+          color: "#fff",
+          border: "1px solid rgba(255,255,255,0.3)",
+          borderRadius: 4,
+          padding: "2px 6px",
+          fontSize: 12,
+          cursor: "pointer",
+        }}
+      >
+        {ROLES.map((role) => (
+          <option key={role} value={role}>
+            {role}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function EditorContent({
+  path,
+  lastGoodStateRef,
+}: {
+  path: string;
+  lastGoodStateRef: React.MutableRefObject<{ puckKey: string; puckProps: any } | null>;
+}) {
   const router = useRouter();
   const p1Plugins = useP1Plugins(path, config);
 
@@ -78,6 +141,8 @@ function EditorContent({ path }: { path: string }) {
     pluginOptions: {
       onDocumentSelect: handleDocumentSelect,
       selectedDocumentPath: path,
+      siteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
+      dashboardUrl: process.env.NEXT_PUBLIC_P1_ADMIN_DASHBOARD_URL,
     },
     overrideOptions: {
       showDefaultPublish: false,
@@ -90,7 +155,15 @@ function EditorContent({ path }: { path: string }) {
     },
   });
 
-  if (loading) {
+  // Update last good state when loading completes successfully (ref passed from parent)
+  React.useEffect(() => {
+    if (!loading && !error) {
+      lastGoodStateRef.current = { puckKey, puckProps };
+    }
+  }, [loading, error, puckKey, puckProps]);
+
+  // 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...
@@ -98,7 +171,8 @@ function EditorContent({ path }: { path: string }) {
     );
   }
 
-  if (error) {
+  // Show error only if we have no previous state to fall back to
+  if (error && !lastGoodStateRef.current) {
     return (
       <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
         <h3>Error loading document</h3>
@@ -107,10 +181,55 @@ function EditorContent({ path }: { path: string }) {
     );
   }
 
+  // Use current state if loaded, otherwise keep showing last good state
+  const displayState = (!loading && !error)
+    ? { puckKey, puckProps }
+    : lastGoodStateRef.current ?? { puckKey, puckProps };
+
   return (
-    <div className="puck-editor-theme">
+    <div className="puck-editor-theme" style={{ position: "relative" }}>
+      {/* Loading overlay - shown during branch switch */}
+      {loading && lastGoodStateRef.current && (
+        <div
+          style={{
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            zIndex: 9999,
+            background: "rgba(255, 255, 255, 0.95)",
+            padding: "1rem 2rem",
+            borderRadius: "8px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            fontFamily: "system-ui",
+            fontSize: "14px",
+            color: "#333",
+            fontWeight: 500,
+            display: "flex",
+            alignItems: "center",
+            gap: "0.75rem",
+          }}
+        >
+          <div
+            style={{
+              width: "16px",
+              height: "16px",
+              border: "2px solid #e0e0e0",
+              borderTopColor: "#2563eb",
+              borderRadius: "50%",
+              animation: "spin 0.6s linear infinite",
+            }}
+          />
+          Switching workstream...
+          <style>{`
+            @keyframes spin {
+              to { transform: rotate(360deg); }
+            }
+          `}</style>
+        </div>
+      )}
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-      <Puck key={puckKey} {...puckProps as any} _experimentalFullScreenCanvas={true} />
+      <Puck key={displayState.puckKey} {...displayState.puckProps as any} _experimentalFullScreenCanvas={true} />
     </div>
   );
 }

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

@@ -7,7 +7,7 @@ import { RenderClientWrapper } from "./render-client";
 const pages = createP1Pages({
   config,
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
-  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1ApiKey: process.env.CSS_API_KEY,
   p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
   p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
   EditorClient: EditorClientWrapper,

package/template/app/p1/api/[...p1]/route.ts

@@ -6,7 +6,7 @@ import { REMOTE_DATASOURCE_REGISTRY } from "../../../../lib/remote-datasources";
 const handler = createP1Handler({
   config,
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
-  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1ApiKey: process.env.CSS_API_KEY,
   p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
   p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
   builtinFetchers: REMOTE_DATASOURCE_FETCHERS,

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

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

package/template/app/page.tsx

@@ -16,7 +16,7 @@ import { CollectionNav } from "./collection-nav";
 
 const initPromise = ensureInitialized({
   p1BaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL,
-  p1ApiKey: process.env.P1_CSS_API_KEY,
+  p1ApiKey: process.env.CSS_API_KEY,
   p1SiteId: process.env.NEXT_PUBLIC_CSS_SITE_ID,
   p1BranchId: process.env.NEXT_PUBLIC_CSS_BRANCH_ID,
 });
@@ -64,7 +64,16 @@ export default async function HomePage() {
       referencedDatasourceIds,
     });
     const resolvedData = await resolveDataTemplates(data, context);
-    return <Client data={resolvedData} />;
+    return (
+      <Client
+        data={resolvedData}
+        pageMetadata={{
+          route: "/",
+          documentName: data.root.props?.title as string | undefined,
+          pageType: "page",
+        }}
+      />
+    );
   }
 
   const routes = await listRoutes();

package/template/components/puck/root.tsx

@@ -9,10 +9,9 @@ export const puckRoot = {
     title: "My Puck Editor",
   },
   render: (props: { children?: ReactNode; title?: string }) => {
-    const { children, title } = props;
+    const { children } = props;
     return (
       <div className="font-sans antialiased">
-        <h1>{title}</h1>
         {children}
       </div>
     );

package/template/package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@pantheon-systems/cpub-react-sdk": "^5.2.1",
-    "@pantheon-systems/css-client": "^0.4.1",
-    "@pantheon-systems/p1-next-sdk": "^0.4.1",
-    "@pantheon-systems/puck-css": "^0.4.1",
+    "@pantheon-systems/css-client": "^0.4.3",
+    "@pantheon-systems/p1-next-sdk": "^0.4.3",
+    "@pantheon-systems/puck-css": "^0.4.3",
     "@puckeditor/core": "^0.21.1",
     "@tailwindcss/postcss": "^4.2.2",
     "classnames": "^2.5.1",