1a:I[52397,["/_next/static/immutable/chunks/2igrrcde_vc4p.js","/_next/static/immutable/chunks/0n36v-3cexsuq.js","/_next/static/immutable/chunks/3-6-6opb2l_5p.js","/_next/static/immutable/chunks/41t6fga463v64.js"],"Workbench"] 1b:T12e2,import type { ComponentConfig } from "@puckeditor/core"; /** * Stats Band — a row of impact numbers with labels and optional footnotes, marked up as a * description list. Light or dark (near-black) style. * Register: `StatsBandBlock: statsBandBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type StatsBandProps = { heading: string; headingLevel: Heading; intro: string; stats: { value: string; label: string; note: string }[]; style: "light" | "dark"; }; const gridCols = (count: number) => { if (count <= 1) return ""; if (count === 2) return "sm:grid-cols-2"; if (count === 3) return "sm:grid-cols-3"; return "sm:grid-cols-2 lg:grid-cols-4"; }; export const statsBandBlock: ComponentConfig = { label: "Stats Band", fields: { heading: { type: "text", label: "Heading" }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." }, }, intro: { type: "textarea", label: "Intro" }, stats: { type: "array", label: "Stats", min: 1, max: 8, getItemSummary: (item) => [item?.value, item?.label].filter(Boolean).join(" · ").slice(0, 48) || "Stat", defaultItemProps: { value: "100+", label: "What this number counts", note: "" }, arrayFields: { value: { type: "text", label: "Number", metadata: { help: "Keep it short: 12,400 or 98% or $2.1M." } }, label: { type: "text", label: "Label", metadata: { help: "What the number counts, in a few words." } }, note: { type: "text", label: "Note", metadata: { help: "Optional source or time frame, like “Fiscal year 2025”. Leave blank to hide it." } }, }, }, style: { type: "radio", label: "Style", options: [ { label: "Light", value: "light" }, { label: "Dark", value: "dark" }, ], }, }, defaultProps: { heading: "A year of showing up for our neighbors", headingLevel: "h2", intro: "Every number below is a person, a meal or a morning someone didn't have to face alone.", stats: [ { value: "48,200", label: "Meals delivered to homebound seniors", note: "Fiscal year 2025" }, { value: "1,350", label: "Volunteers who gave their time", note: "Across 14 neighborhoods" }, { value: "96%", label: "Of families say they feel more connected", note: "Annual participant survey" }, { value: "$0.91", label: "Of every dollar spent on programs", note: "Audited financials" }, ], style: "light", }, render: ({ heading, headingLevel, intro, stats, style }) => { const H = headingLevel || "h2"; const dark = style === "dark"; const list = (stats ?? []).filter((s) => s?.value || s?.label); const hasHeader = Boolean(heading || intro); return (

{hasHeader ? (

{heading ? ( {heading} ) : null} {intro ?

{intro}

: null}

) : null} {list.length > 0 ? (

{stat.label}
Statistic: {stat.value}; {stat.note}

) : null}

); }, }; 1c:Ta274,

import type { ComponentConfig } from "@puckeditor/core";

/**
 * Stats Band — a row of impact numbers with labels and optional footnotes, marked up as a
 * description list. Light or dark (near-black) style.
 * Register: `StatsBandBlock: statsBandBlock` in puck.config.tsx.
 */

type Heading = "h1" | "h2" | "h3" | "h4";

export type StatsBandProps = {
  heading: string;
  headingLevel: Heading;
  intro: string;
  stats: { value: string; label: string; note: string }[];
  style: "light" | "dark";
};

const gridCols = (count: number) => {
  if (count <= 1) return "";
  if (count === 2) return "sm:grid-cols-2";
  if (count === 3) return "sm:grid-cols-3";
  return "sm:grid-cols-2 lg:grid-cols-4";
};

export const statsBandBlock: ComponentConfig<StatsBandProps> = {
  label: "Stats Band",
  fields: {
    heading: { type: "text", label: "Heading" },
    headingLevel: {
      type: "select",
      label: "Heading level",
      options: [
        { label: "H1", value: "h1" },
        { label: "H2", value: "h2" },
        { label: "H3", value: "h3" },
        { label: "H4", value: "h4" },
      ],
      metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." },
    },
    intro: { type: "textarea", label: "Intro" },
    stats: {
      type: "array",
      label: "Stats",
      min: 1,
      max: 8,
      getItemSummary: (item) => [item?.value, item?.label].filter(Boolean).join(" · ").slice(0, 48) || "Stat",
      defaultItemProps: { value: "100+", label: "What this number counts", note: "" },
      arrayFields: {
        value: { type: "text", label: "Number", metadata: { help: "Keep it short: 12,400 or 98% or $2.1M." } },
        label: { type: "text", label: "Label", metadata: { help: "What the number counts, in a few words." } },
        note: { type: "text", label: "Note", metadata: { help: "Optional source or time frame, like “Fiscal year 2025”. Leave blank to hide it." } },
      },
    },
    style: {
      type: "radio",
      label: "Style",
      options: [
        { label: "Light", value: "light" },
        { label: "Dark", value: "dark" },
      ],
    },
  },
  defaultProps: {
    heading: "A year of showing up for our neighbors",
    headingLevel: "h2",
    intro: "Every number below is a person, a meal or a morning someone didn't have to face alone.",
    stats: [
      { value: "48,200", label: "Meals delivered to homebound seniors", note: "Fiscal year 2025" },
      { value: "1,350", label: "Volunteers who gave their time", note: "Across 14 neighborhoods" },
      { value: "96%", label: "Of families say they feel more connected", note: "Annual participant survey" },
      { value: "$0.91", label: "Of every dollar spent on programs", note: "Audited financials" },
    ],
    style: "light",
  },
  render: ({ heading, headingLevel, intro, stats, style }) => {
    const H = headingLevel || "h2";
    const dark = style === "dark";
    const list = (stats ?? []).filter((s) => s?.value || s?.label);
    const hasHeader = Boolean(heading || intro);
    return (
      <section className={`${dark ? "bg-neutral-950" : "bg-white"} px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24`}>
        <div className="mx-auto max-w-7xl">
          {hasHeader ? (
            <div className="max-w-2xl">
              {heading ? (
                <H className={`text-3xl font-semibold tracking-tight text-balance sm:text-4xl ${dark ? "text-white" : "text-neutral-950"}`}>{heading}</H>
              ) : null}
              {intro ? <p className={`mt-4 text-lg leading-8 text-pretty ${dark ? "text-neutral-300" : "text-neutral-600"}`}>{intro}</p> : null}
            </div>
          ) : null}

          {list.length > 0 ? (
            <dl className={`${hasHeader ? "mt-12 sm:mt-16" : ""} grid grid-cols-1 gap-x-8 gap-y-10 ${gridCols(list.length)}`}>
              {list.map((stat, i) => (
                <div key={`${stat.label}-${i}`} className={`flex flex-col border-l-2 pl-5 ${dark ? "border-indigo-400" : "border-indigo-600"}`}>
                  {stat.label ? (
                    <dt className={`order-2 mt-3 text-base leading-6 font-medium text-pretty ${dark ? "text-neutral-200" : "text-neutral-800"}`}>{stat.label}</dt>
                  ) : (
                    <dt className="sr-only">Statistic</dt>
                  )}
                  {stat.value ? (
                    <dd className={`order-1 text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl ${dark ? "text-white" : "text-neutral-950"}`}>{stat.value}</dd>
                  ) : null}
                  {stat.note ? <dd className={`order-3 mt-1 text-sm leading-6 ${dark ? "text-neutral-400" : "text-neutral-600"}`}>{stat.note}</dd> : null}
                </div>
              ))}
            </dl>
          ) : null}
        </div>
      </section>
    );
  },
};

1d:T19ad,# Add the "Impact Stats" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/stats-band) to this Pantheon Content Publisher (P1) Next.js project. Headline numbers in a light or dark band, marked up as a description list. ## Steps 1. Create `components/puck/stats-band-block.tsx` with the exact file contents below. If `components/puck/` doesn't exist, find the folder where this project keeps its Puck components (look at the imports in `puck.config.tsx`) and put it there. 2. In `puck.config.tsx`, import it: `import { statsBandBlock } from "./components/puck/stats-band-block";` 3. Register it under `components` as `StatsBandBlock: statsBandBlock`. 4. Add `"StatsBandBlock"` to the best-fitting entry in `categories` (this block's library category is "Social proof"). Create a category only if none fits. 5. Run the project's type check (usually `pnpm typecheck`) and resolve anything project-specific. 6. If `package.json` has a `sync:registry` script, tell the user it must run (or that CI will run it) before the new component appears in the P1 editor. ## Rules - Do not add dependencies. The block is self-contained by design: one type-only import from `@puckeditor/core`, Tailwind v4 classes, no client JavaScript. - Keep the files as-is unless the user asks for changes. The accent color is `indigo-*`; if the project has brand colors, offer to swap them with a find-and-replace on `indigo-`. - Images are plain `imageUrl` + `imageAlt` text fields. If this project defines a P1 media-library field (search for `"p1-media"`), offer to switch to it. - Don't change prop names in `defaultProps`. Content editors' saved pages depend on them. ## File: `components/puck/stats-band-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * Stats Band — a row of impact numbers with labels and optional footnotes, marked up as a * description list. Light or dark (near-black) style. * Register: `StatsBandBlock: statsBandBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type StatsBandProps = { heading: string; headingLevel: Heading; intro: string; stats: { value: string; label: string; note: string }[]; style: "light" | "dark"; }; const gridCols = (count: number) => { if (count <= 1) return ""; if (count === 2) return "sm:grid-cols-2"; if (count === 3) return "sm:grid-cols-3"; return "sm:grid-cols-2 lg:grid-cols-4"; }; export const statsBandBlock: ComponentConfig = { label: "Stats Band", fields: { heading: { type: "text", label: "Heading" }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." }, }, intro: { type: "textarea", label: "Intro" }, stats: { type: "array", label: "Stats", min: 1, max: 8, getItemSummary: (item) => [item?.value, item?.label].filter(Boolean).join(" · ").slice(0, 48) || "Stat", defaultItemProps: { value: "100+", label: "What this number counts", note: "" }, arrayFields: { value: { type: "text", label: "Number", metadata: { help: "Keep it short: 12,400 or 98% or $2.1M." } }, label: { type: "text", label: "Label", metadata: { help: "What the number counts, in a few words." } }, note: { type: "text", label: "Note", metadata: { help: "Optional source or time frame, like “Fiscal year 2025”. Leave blank to hide it." } }, }, }, style: { type: "radio", label: "Style", options: [ { label: "Light", value: "light" }, { label: "Dark", value: "dark" }, ], }, }, defaultProps: { heading: "A year of showing up for our neighbors", headingLevel: "h2", intro: "Every number below is a person, a meal or a morning someone didn't have to face alone.", stats: [ { value: "48,200", label: "Meals delivered to homebound seniors", note: "Fiscal year 2025" }, { value: "1,350", label: "Volunteers who gave their time", note: "Across 14 neighborhoods" }, { value: "96%", label: "Of families say they feel more connected", note: "Annual participant survey" }, { value: "$0.91", label: "Of every dollar spent on programs", note: "Audited financials" }, ], style: "light", }, render: ({ heading, headingLevel, intro, stats, style }) => { const H = headingLevel || "h2"; const dark = style === "dark"; const list = (stats ?? []).filter((s) => s?.value || s?.label); const hasHeader = Boolean(heading || intro); return (

{hasHeader ? (

{heading ? ( {heading} ) : null} {intro ?

{intro}

: null}

) : null} {list.length > 0 ? (

{stat.label}
Statistic: {stat.value}; {stat.note}

) : null}

); }, }; ``` 1e:Te4f,/** * Stats Band — a row of impact numbers with labels and optional footnotes, marked up as a * description list. Light or dark (near-black) style. * Usage: ``, or pass your own props. Every prop is optional. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type StatsBandProps = { /** Heading */ heading: string; /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */ headingLevel: Heading; /** Intro */ intro: string; /** Stats */ stats: { value: string; label: string; note: string }[]; /** Style */ style: "light" | "dark"; }; const gridCols = (count: number) => { if (count <= 1) return ""; if (count === 2) return "sm:grid-cols-2"; if (count === 3) return "sm:grid-cols-3"; return "sm:grid-cols-2 lg:grid-cols-4"; }; /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const statsBandExample: StatsBandProps = { heading: "A year of showing up for our neighbors", headingLevel: "h2", intro: "Every number below is a person, a meal or a morning someone didn't have to face alone.", stats: [ { value: "48,200", label: "Meals delivered to homebound seniors", note: "Fiscal year 2025" }, { value: "1,350", label: "Volunteers who gave their time", note: "Across 14 neighborhoods" }, { value: "96%", label: "Of families say they feel more connected", note: "Annual participant survey" }, { value: "$0.91", label: "Of every dollar spent on programs", note: "Audited financials" }, ], style: "light", }; export function StatsBand(props: Partial) { const { heading, headingLevel, intro, stats, style } = props as StatsBandProps; const H = headingLevel || "h2"; const dark = style === "dark"; const list = (stats ?? []).filter((s) => s?.value || s?.label); const hasHeader = Boolean(heading || intro); return (

{hasHeader ? (

{heading ? ( {heading} ) : null} {intro ?

{intro}

: null}

) : null} {list.length > 0 ? (

{stat.label}
Statistic: {stat.value}; {stat.note}

) : null}

); } 1f:T6dfd,

/**
 * Stats Band — a row of impact numbers with labels and optional footnotes, marked up as a
 * description list. Light or dark (near-black) style.
 * Usage: `<StatsBand {...statsBandExample} />`, or pass your own props. Every prop is optional.
 */

type Heading = "h1" | "h2" | "h3" | "h4";

export type StatsBandProps = {
  /** Heading */
  heading: string;
  /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */
  headingLevel: Heading;
  /** Intro */
  intro: string;
  /** Stats */
  stats: { value: string; label: string; note: string }[];
  /** Style */
  style: "light" | "dark";
};

const gridCols = (count: number) => {
  if (count <= 1) return "";
  if (count === 2) return "sm:grid-cols-2";
  if (count === 3) return "sm:grid-cols-3";
  return "sm:grid-cols-2 lg:grid-cols-4";
};

/** Sample content: `<StatsBand {...statsBandExample} />` renders the block as previewed. Replace it with your own. */
export const statsBandExample: StatsBandProps = {
  heading: "A year of showing up for our neighbors",
  headingLevel: "h2",
  intro: "Every number below is a person, a meal or a morning someone didn't have to face alone.",
  stats: [
    { value: "48,200", label: "Meals delivered to homebound seniors", note: "Fiscal year 2025" },
    { value: "1,350", label: "Volunteers who gave their time", note: "Across 14 neighborhoods" },
    { value: "96%", label: "Of families say they feel more connected", note: "Annual participant survey" },
    { value: "$0.91", label: "Of every dollar spent on programs", note: "Audited financials" },
  ],
  style: "light",
};

export function StatsBand(props: Partial<StatsBandProps>) {
  const { heading, headingLevel, intro, stats, style } = props as StatsBandProps;
  const H = headingLevel || "h2";
  const dark = style === "dark";
  const list = (stats ?? []).filter((s) => s?.value || s?.label);
  const hasHeader = Boolean(heading || intro);
  return (
    <section className={`${dark ? "bg-neutral-950" : "bg-white"} px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24`}>
      <div className="mx-auto max-w-7xl">
        {hasHeader ? (
          <div className="max-w-2xl">
            {heading ? (
              <H className={`text-3xl font-semibold tracking-tight text-balance sm:text-4xl ${dark ? "text-white" : "text-neutral-950"}`}>{heading}</H>
            ) : null}
            {intro ? <p className={`mt-4 text-lg leading-8 text-pretty ${dark ? "text-neutral-300" : "text-neutral-600"}`}>{intro}</p> : null}
          </div>
        ) : null}

        {list.length > 0 ? (
          <dl className={`${hasHeader ? "mt-12 sm:mt-16" : ""} grid grid-cols-1 gap-x-8 gap-y-10 ${gridCols(list.length)}`}>
            {list.map((stat, i) => (
              <div key={`${stat.label}-${i}`} className={`flex flex-col border-l-2 pl-5 ${dark ? "border-indigo-400" : "border-indigo-600"}`}>
                {stat.label ? (
                  <dt className={`order-2 mt-3 text-base leading-6 font-medium text-pretty ${dark ? "text-neutral-200" : "text-neutral-800"}`}>{stat.label}</dt>
                ) : (
                  <dt className="sr-only">Statistic</dt>
                )}
                {stat.value ? (
                  <dd className={`order-1 text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl ${dark ? "text-white" : "text-neutral-950"}`}>{stat.value}</dd>
                ) : null}
                {stat.note ? <dd className={`order-3 mt-1 text-sm leading-6 ${dark ? "text-neutral-400" : "text-neutral-600"}`}>{stat.note}</dd> : null}
              </div>
            ))}
          </dl>
        ) : null}
      </div>
    </section>
  );
}

20:T1349,

Editor fields