@pantheon-systems/create-p1-starter-kit 0.12.0 → 0.14.0

package/template/__tests__/widget-logout.test.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from "vitest";
+import type { LogoutOutcome } from "@pantheon-systems/puck-css";
+import { runWidgetLogout } from "../app/[...puckPath]/widget-logout";
+
+// Records the effects in order, so each test asserts the whole sequence a
+// logout attempt produces rather than one call in isolation.
+function recorder(logout: () => Promise<LogoutOutcome>) {
+  const calls: string[] = [];
+  return {
+    calls,
+    fx: {
+      logout,
+      navigate: (url: string) => calls.push(`navigate:${url}`),
+      reload: () => calls.push("reload"),
+      setBusy: (busy: boolean) => calls.push(`busy:${busy}`),
+      setError: (message: string | null) =>
+        calls.push(`error:${message ?? "cleared"}`),
+    },
+  };
+}
+
+const LOGOUT_URL = "https://example.auth0.com/v2/logout?client_id=abc";
+
+describe("runWidgetLogout", () => {
+  it("navigates to the Auth0 logout URL when the session ended", async () => {
+    const { calls, fx } = recorder(async () => ({
+      status: "signed_out",
+      logoutUrl: LOGOUT_URL,
+    }));
+
+    await runWidgetLogout(fx);
+
+    // Stays busy: the navigation replaces the page, so releasing the button
+    // would only flash it back to "Log out" on the way out.
+    expect(calls).toEqual([
+      "busy:true",
+      "error:cleared",
+      `navigate:${LOGOUT_URL}`,
+    ]);
+  });
+
+  it("keeps the menu open and shows why when logout failed", async () => {
+    const { calls, fx } = recorder(async () => ({
+      status: "error",
+      message: "Broker logout failed (503)",
+    }));
+
+    await runWidgetLogout(fx);
+
+    // Still signed in and retryable, so the button must come back.
+    expect(calls).toEqual([
+      "busy:true",
+      "error:cleared",
+      "error:Broker logout failed (503)",
+      "busy:false",
+    ]);
+  });
+
+  it("reloads when there was no session to end", async () => {
+    const { calls, fx } = recorder(async () => ({ status: "no_session" }));
+
+    await runWidgetLogout(fx);
+
+    expect(calls).toEqual(["busy:true", "error:cleared", "reload"]);
+  });
+
+  it("reports a thrown error instead of leaving the button stuck", async () => {
+    const { calls, fx } = recorder(async () => {
+      throw new Error("Failed to fetch");
+    });
+
+    await runWidgetLogout(fx);
+
+    expect(calls).toEqual([
+      "busy:true",
+      "error:cleared",
+      "error:Failed to fetch",
+      "busy:false",
+    ]);
+  });
+
+  it("falls back to a generic message when something non-Error is thrown", async () => {
+    const { calls, fx } = recorder(async () => {
+      throw "socket closed";
+    });
+
+    await runWidgetLogout(fx);
+
+    expect(calls).toEqual([
+      "busy:true",
+      "error:cleared",
+      "error:Logout failed",
+      "busy:false",
+    ]);
+  });
+
+  it("clears a previous failure before retrying", async () => {
+    const { calls, fx } = recorder(async () => ({
+      status: "signed_out",
+      logoutUrl: LOGOUT_URL,
+    }));
+
+    await runWidgetLogout(fx);
+    await runWidgetLogout(fx);
+
+    // The second attempt clears the slot again; a stale message must not sit
+    // under a logout that is now succeeding.
+    expect(calls.slice(3)).toEqual([
+      "busy:true",
+      "error:cleared",
+      `navigate:${LOGOUT_URL}`,
+    ]);
+  });
+});

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

@@ -2,8 +2,9 @@
 
 import { useEffect, useState } from "react";
 import type { Data } from "@puckeditor/core";
-import { RenderClient } from "@pantheon-systems/puck-css";
+import { RenderClient, performLogout, P1_LOGGED_IN_KEY } from "@pantheon-systems/puck-css";
 import config from "../../puck.config";
+import { runWidgetLogout } from "./widget-logout";
 
 function EditIcon() {
   return (
@@ -35,10 +36,12 @@ function LogoutIcon() {
 export function P1EditWidget({ route }: { route: string }) {
   const [hasToken, setHasToken] = useState(false);
   const [open, setOpen] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [logoutError, setLogoutError] = useState<string | null>(null);
 
   useEffect(() => {
     const flag = typeof localStorage !== "undefined"
-      ? localStorage.getItem("p1_logged_in")
+      ? localStorage.getItem(P1_LOGGED_IN_KEY)
       : null;
     setHasToken(!!flag);
   }, []);
@@ -63,6 +66,22 @@ export function P1EditWidget({ route }: { route: string }) {
 
   const editHref = `/p1${route === "/" ? "" : route}`;
 
+  const handleLogout = () =>
+    runWidgetLogout({
+      logout: () =>
+        performLogout({
+          cssBaseUrl: process.env.NEXT_PUBLIC_CSS_BASE_URL ?? "http://localhost:8787",
+        }),
+      navigate: (url) => {
+        window.location.href = url;
+      },
+      reload: () => {
+        window.location.reload();
+      },
+      setBusy: setIsLoggingOut,
+      setError: setLogoutError,
+    });
+
   return (
     <div
       data-p1-widget
@@ -145,12 +164,8 @@ export function P1EditWidget({ route }: { route: string }) {
           <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();
-            }}
+            disabled={isLoggingOut}
+            onClick={handleLogout}
             style={{
               display: "flex",
               alignItems: "center",
@@ -163,15 +178,28 @@ export function P1EditWidget({ route }: { route: string }) {
               textDecoration: "none",
               background: "transparent",
               border: "none",
-              cursor: "pointer",
+              cursor: isLoggingOut ? "not-allowed" : "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
+            {isLoggingOut ? "Logging out…" : "Log out"}
           </button>
+          {logoutError && (
+            <p
+              role="alert"
+              style={{
+                margin: "2px 10px 6px",
+                fontSize: 12,
+                lineHeight: 1.4,
+                color: "#b3261e",
+              }}
+            >
+              {logoutError}
+            </p>
+          )}
         </div>
       )}
     </div>

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

@@ -1,130 +1,23 @@
 /**
  * Catch-all route that renders user-facing pages generated by Puck.
+ *
+ * The pipeline lives in the SDK — see createPublishedPage in
+ * app/published-pages.tsx for what this route is made of.
  */
 
-import { cache } from "react";
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import {
-  loadRemoteDatasourceContext,
-  extractReferencedDatasourceIds,
-  resolveDataTemplates,
-  pagePathFromCatchAllSegments,
-} from "@pantheon-systems/puck-css/server";
-import {
-  createCssQueryFetchers,
-  loadPublishedPage,
-  loadRouteTemplateKeys,
-} from "@pantheon-systems/p1-next-sdk/server";
-import { REMOTE_DATASOURCE_FETCHERS } from "../../lib/remote-datasource-fetchers";
-import { ContentUnavailable } from "../../components/content-unavailable";
-import { resolvePageMetadata } from "../../lib/page-seo";
-import { Client } from "./client";
-
-const getCssQueryFetchers = cache(() => createCssQueryFetchers());
-
-// Document namespaces that live alongside pages but are never routable.
-const INTERNAL_PATH_PREFIXES = ["/_registry", "/_redirects"];
-
-// Lowercased to match the server, which normalizes document paths to lower case
-// before looking them up — so /_Redirects/x resolves the same record as
-// /_redirects/x and must be refused just the same.
-function isInternalPath(path: string): boolean {
-  const normalized = path.toLowerCase();
-  return INTERNAL_PATH_PREFIXES.some(
-    (prefix) => normalized === prefix || normalized.startsWith(`${prefix}/`),
-  );
-}
+import { published } from "../published-pages";
 
 /**
  * Backstop only: publishing calls revalidatePath for the affected routes, so
  * cached pages normally refresh the moment their content changes. This bounds
  * how long an edit made outside that path (a direct API write, a restored
  * branch) can stay stale.
+ *
+ * Must stay a literal here: Next.js statically analyzes segment-config exports,
+ * so a value re-exported from the factory would go undetected.
  */
 export const revalidate = 300;
 
-/**
- * Empty on purpose. Routes are authored in P1, so there is nothing to enumerate
- * at build time — but declaring this is what marks the segment statically
- * renderable at all; without it every path here renders fully dynamically and
- * no response is ever cacheable. Unlisted paths render on first request and are
- * cached from then on (dynamicParams defaults to true).
- */
-export function generateStaticParams(): { puckPath: string[] }[] {
-  return [];
-}
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}): Promise<Metadata> {
-  const { puckPath = [] } = await params;
-  const path = pagePathFromCatchAllSegments(puckPath);
-
-  if (isInternalPath(path)) {
-    return { title: "Not Found" };
-  }
-
-  const result = await loadPublishedPage(path);
-  if (result.status === "missing") return { title: "Not Found" };
-  if (result.status === "unavailable") {
-    return { title: "Temporarily unavailable" };
-  }
-  return resolvePageMetadata({ pageData: result.data, path });
-}
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}) {
-  const { puckPath = [] } = await params;
-  const path = pagePathFromCatchAllSegments(puckPath);
-
-  if (isInternalPath(path)) {
-    notFound();
-  }
-
-  const result = await loadPublishedPage(path);
-
-  // A real 404, so misses are not cached as successes now that this route is
-  // statically renderable. An outage is deliberately not a 404 — that would
-  // deindex published pages over a transient blip.
-  if (result.status === "missing") {
-    notFound();
-  }
-  if (result.status === "unavailable") {
-    return <ContentUnavailable />;
-  }
-
-  const data = result.data;
-
-  const [routeTemplateKeys, cssQueryFetchers] = await Promise.all([
-    loadRouteTemplateKeys(),
-    getCssQueryFetchers(),
-  ]);
-  const builtinFetchers = [...REMOTE_DATASOURCE_FETCHERS, ...cssQueryFetchers];
-
-  const referencedDatasourceIds = extractReferencedDatasourceIds(data);
-  const context = await loadRemoteDatasourceContext({
-    fetchImpl: fetch,
-    pagePath: path,
-    routeTemplateKeys,
-    builtinFetchers,
-    referencedDatasourceIds,
-  });
-  const resolvedData = await resolveDataTemplates(data, context);
-
-  return (
-    <Client
-      data={resolvedData}
-      pageMetadata={{
-        route: path,
-        documentName: data.root.props?.title as string | undefined,
-        pageType: "page",
-      }}
-    />
-  );
-}
+export const generateStaticParams = published.generateStaticParams;
+export const generateMetadata = published.generateMetadata;
+export default published.Page;

package/template/app/[...puckPath]/widget-logout.ts

@@ -0,0 +1,36 @@
+import type { LogoutOutcome } from "@pantheon-systems/puck-css";
+
+export type WidgetLogoutEffects = {
+  logout: () => Promise<LogoutOutcome>;
+  navigate: (url: string) => void;
+  reload: () => void;
+  setBusy: (busy: boolean) => void;
+  setError: (message: string | null) => void;
+};
+
+/**
+ * Runs one logout attempt for the widget. Kept outside the component so each
+ * outcome — navigate away, stay and explain, reload — can be exercised without
+ * a browser.
+ */
+export async function runWidgetLogout(fx: WidgetLogoutEffects): Promise<void> {
+  fx.setBusy(true);
+  fx.setError(null);
+  try {
+    const outcome = await fx.logout();
+    if (outcome.status === "signed_out") {
+      fx.navigate(outcome.logoutUrl);
+      return; // navigation takes over
+    }
+    if (outcome.status === "error") {
+      // Still signed in and retryable — keep the menu open and say why.
+      fx.setError(outcome.message);
+      fx.setBusy(false);
+      return;
+    }
+    fx.reload(); // no_session: drop any stale widget state
+  } catch (err) {
+    fx.setError(err instanceof Error ? err.message : "Logout failed");
+    fx.setBusy(false);
+  }
+}

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

@@ -14,6 +14,7 @@ import {
   wrapConfigForEditorPreview,
   P1QueryProvider,
   editorPathHref,
+  EditorReloadOverlay,
 } from "@pantheon-systems/puck-css";
 import { DatasourceRegistryProvider, DatasourceDataProvider } from "@pantheon-systems/puck-css/fields";
 import { LoadingMessage } from "@pantheon-systems/puck-css/pds";
@@ -30,42 +31,12 @@ import "@pantheon-systems/puck-css/pds/styles.css";
 
 import { ChatbotFlagProvider } from "../../../../components/ChatbotFlagProvider";
 import { P1Lockup } from "../../../../components/p1-lockup";
+import styles from "../../../../components/welcome-block.module.css";
 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" } },
-  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;
 
@@ -83,33 +54,31 @@ 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 />
+    <div className={styles.surface}>
+      <div className={styles.inner}>
+        <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>
+        <h1 className={styles.heading}>
+          Your Collaborative Website Management Workspace.
+        </h1>
+        <p className={styles.description}>
+          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={styles.link}>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>
+        <div className={styles.actions}>
+          <button
+            className={styles.button}
+            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>
-      )}
+        {error && <p className={styles.error}>{error}</p>}
+      </div>
     </div>
   );
 }
@@ -120,7 +89,6 @@ export function EditorClientWrapper() {
   const pathname = usePathname();
   const path = editorPagePathFromUrlPath(pathname);
   const [userRole, setUserRole] = useState<ContentRole>('editor');
-  const lastGoodStateRef = React.useRef<{ puckKey: string; puckProps: any } | null>(null);
 
   if (!p1Config) {
     return (
@@ -145,7 +113,7 @@ export function EditorClientWrapper() {
           loginFallback={<P1SignInPage />}
         >
           <ChatbotFlagProvider>
-            <EditorContent path={path} lastGoodStateRef={lastGoodStateRef} />
+            <EditorContent path={path} />
           </ChatbotFlagProvider>
         </P1App>
         {process.env.NEXT_PUBLIC_ENABLE_ROLE_SWITCHER === 'true' && (
@@ -206,15 +174,8 @@ function RoleSwitcher({
   );
 }
 
-function EditorContent({
-  path,
-  lastGoodStateRef,
-}: {
-  path: string;
-  lastGoodStateRef: React.MutableRefObject<{ puckKey: string; puckProps: any } | null>;
-}) {
+function EditorContent({ path }: { path: string }) {
   const router = useRouter();
-  const { getToken } = useP1Auth();
   const { data: editorCtx } = useEditorContext(path);
   const {
     context: remoteDatasourceContext,
@@ -264,27 +225,10 @@ 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({
+  const { loading, reloading, hasContent, error, puckKey, puckProps } = useP1Editor({
     documentPath: path,
     puckConfig: editorConfig,
     additionalPlugins,
-    onDocumentNotFound: handleDocumentNotFound,
     pluginOptions: {
       onDocumentSelect: handleDocumentSelect,
       onGenerateWithAI: createGenerateWithAIHandler(draftRequests, chatbotEnabled),
@@ -305,24 +249,17 @@ function EditorContent({
     },
   });
 
-  // 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]);
-
   if (redirecting) {
     return <LoadingMessage message="Redirecting" data-testid="editor-redirecting" />;
   }
 
-  // Show full loading screen only on first load (no previous state)
-  if (loading && !lastGoodStateRef.current) {
+  if (loading) {
     return <LoadingMessage message="Loading document" data-testid="editor-loading" />;
   }
 
-  // Show error only if we have no previous state to fall back to
-  if (error && !lastGoodStateRef.current) {
+  // A failed load with a document already on screen keeps that document; only a
+  // failure with nothing to fall back on takes over the view.
+  if (error && !hasContent) {
     return (
       <div style={{ textAlign: "center", padding: "4rem", fontFamily: "system-ui" }}>
         <h3>Error loading document</h3>
@@ -331,57 +268,13 @@ function EditorContent({
     );
   }
 
-  // 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" 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>
-      )}
+      <EditorReloadOverlay reloading={reloading} />
       <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} />
+          <Puck key={`${puckKey}-${chatbotEnabled ? "ai" : "no-ai"}`} {...puckProps as any} _experimentalFullScreenCanvas={true} />
         </DatasourceDataProvider>
       </DatasourceRegistryProvider>
     </div>