npm - @pantheon-systems/create-p1-starter-kit - Versions diffs - 0.8.0 → 0.11.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/README.md +114 -0
package/lib/cli.js +1 -1
package/lib/messages.js +1 -1
package/package.json +11 -5
package/template/.env.example +27 -6
package/template/__tests__/ai-generate.test.ts +74 -0
package/template/__tests__/auth-route.test.ts +1 -1
package/template/__tests__/chatbot-flag-wiring.test.ts +21 -1
package/template/__tests__/editor-integration.test.ts +1 -1
package/template/__tests__/editor-route-group.test.ts +1 -1
package/template/__tests__/image-block.test.tsx +48 -0
package/template/__tests__/page-seo-meta-templates.test.ts +145 -0
package/template/__tests__/page-seo-meta.test.ts +97 -0
package/template/__tests__/page-seo.test.ts +4 -6
package/template/__tests__/paragraph-block.test.ts +24 -22
package/template/__tests__/paragraph-editor-text.test.ts +79 -0
package/template/__tests__/published-page-404.test.ts +65 -0
package/template/__tests__/puck-root-guidance.test.ts +109 -0
package/template/__tests__/puck-root-meta.test.ts +102 -0
package/template/__tests__/puck-root-selects.test.ts +86 -0
package/template/__tests__/remote-datasource-fetchers.test.ts +2 -2
package/template/__tests__/seo-metadata-meta.test.ts +180 -0
package/template/__tests__/seo-metadata-site-defaults.test.ts +80 -0
package/template/__tests__/styles-canvas-scope.test.ts +50 -0
package/template/app/[...puckPath]/page.tsx +67 -67
package/template/app/layout.tsx +11 -1
package/template/app/not-found.tsx +11 -0
package/template/app/p1/(editor)/[[...p1]]/editor-client.tsx +29 -4
package/template/app/page.tsx +20 -22
package/template/app/styles.css +18 -1
package/template/components/content-unavailable.tsx +22 -0
package/template/components/p1-lockup.tsx +6 -26
package/template/components/page-missing.tsx +49 -0
package/template/components/puck/data-list-block/data-list-block.tsx +8 -0
package/template/components/puck/data-list-block/index.ts +1 -0
package/template/components/puck/grid-block.tsx +1 -1
package/template/components/puck/image-block.tsx +22 -1
package/template/components/puck/paragraph-block.tsx +7 -2
package/template/components/puck/paragraph-editor-text.tsx +84 -0
package/template/components/puck/paragraph-markdown.tsx +15 -0
package/template/components/puck/root.tsx +185 -4
package/template/constants/assets.ts +1 -0
package/template/eslint.config.js +20 -4
package/template/lib/chatbot-flag/ai-generate.ts +23 -0
package/template/lib/chatbot-flag/draft-request-channel.ts +12 -0
package/template/lib/monsters-api.ts +14 -8
package/template/lib/page-seo.ts +46 -16
package/template/lib/remote-datasources.ts +26 -31
package/template/lib/seo-metadata.consts.ts +21 -0
package/template/lib/seo-metadata.ts +96 -15
package/template/lib/swapi.ts +5 -5
package/template/middleware.ts +15 -0
package/template/next.config.mjs +11 -0
package/template/package.json +15 -12
package/template/pnpm-workspace.yaml +3 -0
package/template/public/images/p1_logo.svg +5 -12
package/template/public/images/p1_logo_reverse.svg +5 -0
package/template/puck.config.tsx +3 -1
package/template/tsconfig/nextjs.json +1 -1
package/template/vitest.config.ts +20 -0
package/template/next-env.d.ts +0 -6

package/template/app/page.tsx CHANGED Viewed

@@ -1,44 +1,44 @@
 import {
-  ensureInitialized,
-  getPage,
-  listRouteTemplateKeysFromDatabase,
   resolveDataTemplates,
   extractReferencedDatasourceIds,
   loadRemoteDatasourceContext,
 } from "@pantheon-systems/puck-css/server";
+import {
+  loadPublishedPage,
+  loadRouteTemplateKeys,
+} from "@pantheon-systems/p1-next-sdk/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";
-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,
-  // 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",
-});
+/**
+ * Backstop only: publishing calls revalidatePath("/"), so the home page
+ * normally refreshes the moment its content changes. This bounds how long an
+ * edit made outside that path can stay stale.
+ */
+export const revalidate = 300;
 export async function generateMetadata(): Promise<Metadata> {
-  await initPromise;
-  const pageData = await getPage("/");
-  if (!pageData) {
+  const result = await loadPublishedPage("/");
+  if (result.status !== "ok") {
     return { title: "P1 Starter Kit" };
   }
-  return resolvePageMetadata({ pageData, path: "/", searchParams: {} });
+  return resolvePageMetadata({ pageData: result.data, path: "/" });
 }
 export default async function HomePage() {
-  await initPromise;
-  const data = await getPage("/");
+  const result = await loadPublishedPage("/");
-  if (data) {
-    const routeTemplateKeys = await listRouteTemplateKeysFromDatabase();
+  // Unlike the catch-all, "/" never 404s: it is a single fixed URL rather than
+  // an unbounded crawler surface, and the welcome block is the correct state for
+  // a freshly scaffolded site — including one with no backend configured yet.
+  if (result.status === "ok") {
+    const data = result.data;
+    const routeTemplateKeys = await loadRouteTemplateKeys();
     const referencedDatasourceIds = extractReferencedDatasourceIds(data);
     const context = await loadRemoteDatasourceContext({
-      searchParams: {},
       fetchImpl: fetch,
       pagePath: "/",
       routeTemplateKeys,
@@ -75,5 +75,3 @@ export default async function HomePage() {
     />
   );
 }
-export const dynamic = "force-dynamic";

package/template/app/styles.css CHANGED Viewed

@@ -1,7 +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/components/content-unavailable.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * Shown when the content backend could not be reached, as distinct from a path
+ * with no page. A published page must not 404 because of a backend blip — that
+ * would deindex live content — so this renders a 200 holding page instead, on a
+ * render the SDK has already made uncacheable via connection().
+ */
+export function ContentUnavailable() {
+  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">
+          This page is temporarily unavailable
+        </h1>
+        <p className="mt-4 text-gray-600">
+          We couldn&apos;t load this content just now. Please try again in a
+          moment.
+        </p>
+      </div>
+    </main>
+  );
+}

package/template/components/p1-lockup.tsx CHANGED Viewed

@@ -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/page-missing.tsx ADDED Viewed

@@ -0,0 +1,49 @@
+"use client";
+/**
+ * Shown for a path with no published page. Client-side because it renders from
+ * the not-found boundary, which receives no params — usePathname is the only
+ * way to point "Edit this page" at the path the visitor actually asked for.
+ */
+import { usePathname } from "next/navigation";
+export function PageMissing() {
+  const pathname = usePathname() || "/";
+  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">
+          404 &ndash; This page doesn&apos;t exist yet
+        </h1>
+        <p className="mt-4 text-gray-600">
+          This page hasn&apos;t been created. Use the editor to build it.
+        </p>
+        <nav className="mt-10 flex flex-col gap-3">
+          <a
+            href={`/p1${pathname}`}
+            className="rounded-lg bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:bg-gray-700"
+          >
+            Edit this page
+          </a>
+          <a
+            href="/p1"
+            className="rounded-lg border border-gray-300 px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-100"
+          >
+            Open the Page Editor
+          </a>
+          <a
+            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"
+          >
+            P1 Dashboard &rarr;
+          </a>
+        </nav>
+      </div>
+    </main>
+  );
+}

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

@@ -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 ADDED Viewed

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

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

@@ -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/image-block.tsx CHANGED Viewed

@@ -6,18 +6,39 @@ export const imageBlock = {
     src: { type: "text" as const, label: "Image URL" },
     alt: { type: "text" as const, label: "Alt text" },
     caption: { type: "textarea" as const, label: "Caption (optional)" },
+    loading: {
+      type: "radio" as const,
+      label: "Loading",
+      options: [
+        { label: "Lazy", value: "lazy" },
+        { label: "Eager", value: "eager" },
+      ],
+    },
   },
   defaultProps: {
     src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80",
     alt: "Mountain landscape",
     caption: "",
+    loading: "lazy",
   },
-  render: ({ src, alt, caption }: { src?: string; alt?: string; caption?: string }) => (
+  render: ({
+    src,
+    alt,
+    caption,
+    loading,
+  }: {
+    src?: string;
+    alt?: string;
+    caption?: string;
+    loading?: "lazy" | "eager";
+  }) => (
     <figure className={`m-0 ${blockPaddingClass}`}>
       {src ? (
         <img
           src={src}
           alt={alt || ""}
+          loading={loading === "eager" ? "eager" : "lazy"}
+          decoding="async"
           className="block h-auto max-h-[400px] w-full max-w-4xl rounded-lg object-contain"
         />
       ) : (

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

@@ -2,6 +2,7 @@
 import { type ReactNode, isValidElement } from "react";
 import { richtextField } from "@pantheon-systems/puck-css/fields";
 import { blockPaddingClass } from "./block-padding";
+import { ParagraphEditorText } from "./paragraph-editor-text";
 import { sanitizeRichtextHtml } from "./sanitize-richtext";
 export const paragraphBlock = {
@@ -12,9 +13,13 @@ export const paragraphBlock = {
   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>
+      );
     }
     return (
       <div

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

@@ -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 ADDED Viewed

@@ -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>
+  ),
+};

package/template/components/puck/root.tsx CHANGED Viewed

@@ -1,12 +1,193 @@
 import type { ReactNode } from "react";
+import { OG_TYPES, TWITTER_CARDS } from "../../lib/seo-metadata.consts";
+/**
+ * Fixed-vocabulary fields are dropdowns built from the lists buildPageMetadata
+ * validates against, so an option cannot drift from what reaches the tag.
+ *
+ * The default option's value is empty rather than the default itself. Storing it
+ * would freeze a value into every page, and a page carrying an explicit `website`
+ * can never pick up a template default later — so the label states the outcome
+ * while the data stays uncommitted.
+ */
+const OG_TYPE_LABELS: Record<(typeof OG_TYPES)[number], string> = {
+  website: "Website",
+  article: "Article",
+  book: "Book",
+  profile: "Profile",
+};
+const TWITTER_CARD_LABELS: Record<(typeof TWITTER_CARDS)[number], string> = {
+  summary: "Summary",
+  summary_large_image: "Summary with large image",
+  player: "Player",
+  app: "App",
+};
+const optionsWithDefault = <T extends string>(
+  values: readonly T[],
+  labels: Record<T, string>,
+  defaultLabel: string,
+) => [
+  { label: `${defaultLabel} (default)`, value: "" },
+  ...values.map((value) => ({ label: labels[value], value: value as string })),
+];
+// buildPageMetadata picks the large card when there is an image, so the default
+// option names whichever one an empty field will actually get.
+const twitterCardOptions = (defaultLabel: string) =>
+  optionsWithDefault(TWITTER_CARDS, TWITTER_CARD_LABELS, defaultLabel);
+/**
+ * Page metadata values are stored at `root.props._meta`, so they are
+ * branch-scoped and versioned like any other authored content. A page created
+ * from a template starts with that template's `_meta` copied in, the same way
+ * its content is; anything still empty after that inherits at render time.
+ *
+ * Labels are the tag names themselves, not friendly rewrites. Someone editing
+ * these is working from an SEO or social checklist that names the tags, and a
+ * label like "Social title" makes them guess which tag it writes.
+ */
+const metadataFields = {
+  ogTitle: {
+    type: "text" as const,
+    label: "og:title",
+    metadata: {
+      help: "The headline shown when this page is shared.",
+      helpWhenEmpty: "Inherited from title. Edit to override.",
+    },
+  },
+  ogDescription: {
+    type: "textarea" as const,
+    label: "og:description",
+    metadata: {
+      help: "The summary shown beneath the headline when this page is shared.",
+      helpWhenEmpty: "Inherited from description. Edit to override.",
+    },
+  },
+  ogType: {
+    type: "select" as const,
+    label: "og:type",
+    options: optionsWithDefault(OG_TYPES, OG_TYPE_LABELS, "Website"),
+    metadata: { help: "How this page is described when shared. Most pages are a website." },
+  },
+  ogImage: {
+    type: "text" as const,
+    label: "og:image",
+    metadata: {
+      help: "Full URL to the preview image. A relative path resolves against the site URL.",
+    },
+  },
+  ogLocale: {
+    type: "text" as const,
+    label: "og:locale",
+    metadata: { help: "Language and region of this page, such as en_US." },
+  },
+  // Without twitter:card, X renders no card at all and the two fields below are inert.
+  twitterCard: {
+    type: "select" as const,
+    label: "twitter:card",
+    options: twitterCardOptions("Summary"),
+    metadata: {
+      help: "How the card is laid out on X. Player and app cards need tags this site does not render.",
+    },
+  },
+  twitterTitle: {
+    type: "text" as const,
+    label: "twitter:title",
+    metadata: {
+      help: "The headline shown on X.",
+      helpWhenEmpty: "Inherited from og:title, then title. Edit to override.",
+    },
+  },
+  twitterImage: {
+    type: "text" as const,
+    label: "twitter:image",
+    metadata: {
+      help: "Full URL to the image shown on X.",
+      helpWhenEmpty: "Inherited from og:image. Edit to override.",
+    },
+  },
+};
+// Boilerplate from defaultProps: never offered as an inherited value, matching
+// the head tags, which refuse to ship it.
+const DEFAULT_EDITOR_TITLE = "My Puck Editor";
+const inheritedFrom = (value: unknown): string | undefined => {
+  const text = typeof value === "string" ? value.trim() : "";
+  return text && text !== DEFAULT_EDITOR_TITLE ? text : undefined;
+};
+const withPlaceholder = <T extends object>(field: T, placeholder?: string): T =>
+  placeholder ? { ...field, placeholder } : field;
+interface InheritedValues {
+  ogTitle?: string;
+  ogDescription?: string;
+  twitterTitle?: string;
+  twitterImage?: string;
+  twitterCardDefault?: string;
+}
+const buildFields = (inherited: InheritedValues = {}) => ({
+  title: { type: "text" as const },
+  description: { type: "textarea" as const },
+  _meta: {
+    type: "object" as const,
+    label: "Social & sharing",
+    metadata: { collapsible: true, defaultCollapsed: true },
+    objectFields: {
+      ...metadataFields,
+      ogTitle: withPlaceholder(metadataFields.ogTitle, inherited.ogTitle),
+      ogDescription: withPlaceholder(metadataFields.ogDescription, inherited.ogDescription),
+      twitterTitle: withPlaceholder(metadataFields.twitterTitle, inherited.twitterTitle),
+      twitterImage: withPlaceholder(metadataFields.twitterImage, inherited.twitterImage),
+      twitterCard: inherited.twitterCardDefault
+        ? {
+            ...metadataFields.twitterCard,
+            options: twitterCardOptions(inherited.twitterCardDefault),
+          }
+        : metadataFields.twitterCard,
+    },
+  },
+});
 export const puckRoot = {
-  fields: {
-    title: { type: "text" as const },
-    description: { type: "textarea" as const },
+  fields: buildFields(),
+  /**
+   * Shows what an empty field will inherit, as a placeholder. It has to be a
+   * placeholder and not a value: autosave persists the whole snapshot, so a
+   * derived value written into the field would be saved and the field would stop
+   * inheriting for good.
+   *
+   * Reading the source from root props is what makes this track edits — the
+   * fields slice subscribes to the root node, so changing the title re-resolves.
+   * The same is not true of Puck's `metadata`, which is why the site and
+   * template default tiers cannot be shown this way.
+   *
+   * The chains mirror buildPageMetadata in lib/seo-metadata.ts. A placeholder
+   * that disagreed with what the head actually emits would be worse than none.
+   */
+  resolveFields: (data: { props?: Record<string, unknown> }) => {
+    const props = data.props ?? {};
+    const meta = (props._meta ?? {}) as Record<string, unknown>;
+    const title = inheritedFrom(props.title);
+    const ogTitle = inheritedFrom(meta.ogTitle) ?? title;
+    const image = inheritedFrom(meta.twitterImage) ?? inheritedFrom(meta.ogImage);
+    return buildFields({
+      ogTitle: title,
+      ogDescription: inheritedFrom(props.description),
+      twitterTitle: ogTitle,
+      twitterImage: inheritedFrom(meta.ogImage),
+      twitterCardDefault: image
+        ? TWITTER_CARD_LABELS.summary_large_image
+        : TWITTER_CARD_LABELS.summary,
+    });
   },
   defaultProps: {
-    title: "My Puck Editor",
+    title: DEFAULT_EDITOR_TITLE,
   },
   render: (props: { children?: ReactNode; title?: string }) => {
     const { children } = props;

package/template/constants/assets.ts CHANGED Viewed

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

package/template/eslint.config.js CHANGED Viewed

@@ -81,7 +81,11 @@ export default tseslint.config(
       '@typescript-eslint/no-shadow': 'warn',
       '@typescript-eslint/no-require-imports': 'warn',
       'no-async-promise-executor': 'warn',
-      '@typescript-eslint/consistent-type-definitions': 'warn',
+      // Off deliberately. The rule's `interface` default is unsafe: interfaces have
+      // no implicit index signature, so autofixing `type X = {...}` to an interface
+      // silently breaks assignability to Record<string, unknown>. Both spellings are
+      // fine; this is not worth a footgun.
+      '@typescript-eslint/consistent-type-definitions': 'off',
       'no-useless-escape': 'warn',
       'no-useless-catch': 'warn',
       '@typescript-eslint/no-inferrable-types': 'warn',
@@ -90,7 +94,10 @@ export default tseslint.config(
       '@typescript-eslint/ban-ts-comment': 'warn',
       '@typescript-eslint/no-unused-expressions': 'warn',
       '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
-      '@typescript-eslint/no-empty-function': 'warn',
+      // A no-op default for an optional callback is idiomatic here
+      // (`onLogout ?? (() => {})`), and the rule cannot tell it from an
+      // accidentally empty body. Still catches empty function declarations.
+      '@typescript-eslint/no-empty-function': ['warn', { allow: ['arrowFunctions', 'methods'] }],
       '@typescript-eslint/no-empty-object-type': 'warn',
       '@typescript-eslint/no-wrapper-object-types': 'warn',
       'no-constant-binary-expression': 'warn',
@@ -99,14 +106,20 @@ export default tseslint.config(
       '@typescript-eslint/no-redeclare': 'warn',
       'no-case-declarations': 'warn',
       'no-empty': 'warn',
-      '@typescript-eslint/no-dynamic-delete': 'warn',
+      // Off: `delete record[computedKey]` is the normal way to drop a cache
+      // entry or a patch path segment. The rule's alternative is switching the
+      // structure to a Map, which is a design change, not a lint fix.
+      '@typescript-eslint/no-dynamic-delete': 'off',
       'no-constant-condition': 'warn',
       'no-empty-pattern': 'warn',
       'no-var': 'warn',
       '@typescript-eslint/no-namespace': 'warn',
       '@typescript-eslint/no-extraneous-class': 'warn',
       '@typescript-eslint/unified-signatures': 'warn',
-      '@typescript-eslint/no-invalid-void-type': 'warn',
+      // Off: `request<void>(...)` for an endpoint that returns no body is the
+      // normal spelling in css-client, and that is a generic type argument —
+      // which the rule's own message calls valid.
+      '@typescript-eslint/no-invalid-void-type': 'off',
       '@typescript-eslint/no-this-alias': 'warn',
     },
   },
@@ -127,6 +140,9 @@ export default tseslint.config(
       'coverage/**',
       '**/*.d.ts',
       '**/generated/**',
+      // Vendored snapshots and test data. Linting these rewrites them, which
+      // silently breaks any test asserting byte-identical output against them.
+      '**/fixtures/**',
       '**/.puppeteerrc.cjs',
     ],
   },