@drawnagency/primitives 0.1.113 → 0.1.114

package/src/components/sections/SectionSummary/SectionSummaryBlock.tsx

@@ -0,0 +1,476 @@
+import { useId, useState } from "react";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+import { EditableList } from "../../primitives/EditableList";
+import { LinkField } from "../../shared/LinkField";
+import { usePages } from "../../shared/PagesContext";
+import { DEFAULT_LINK, type LinkValue } from "../../../schemas/link";
+import type { OpenModal } from "../../../lib/registry";
+import type { SummaryNavLevel } from "../../../lib/nav";
+
+// End-of-section TL;DR plate, promoted from Siete's site-local section (#59)
+// with its look kept: every color and font is a theme token. A branded plate
+// (background = --color-primary) with a kicker top-left, a script accent ("tl;dr") top-right, numbered principle
+// items (bold headline + soft one-sentence explainer, hanging numeral so both
+// share a left edge), an inline jump-link trailing each explainer, and a
+// footer with a contextual note (left) and a "copy summary" action (right).
+//
+// The PUBLIC VIEWER never hydrates React — this renders as SSR HTML — so:
+//   - layout/hover states are pure CSS in a per-instance <style> scoped #<id>;
+//   - the copy button is wired by a tiny inline <script> (delegated click
+//     listener on the plate root),
+//     which has to read the copy text back out of the DOM. In the hydrated
+//     editor the button is an ordinary React onClick that builds the same text
+//     from props, and the inline <script> is not rendered at all.
+//
+// Escaping story: the only string interpolated into the <style>/<script> text
+// is the id prefix, sanitized to [a-z0-9-]. Free-form user text renders through
+// React children / EditablePlainText only. Jump-links come from the shared
+// LinkField picker: internal links are collapsed to a resolved, safe href by the
+// SSR resolveInternalLinks pass, and external hrefs pass the link schema's
+// isSafeHref guard — so no user href is ever interpolated into the markup here.
+
+export interface SummaryItem {
+  headline: string;
+  explainer: string;
+  link: LinkValue;
+  linkLabel: string;
+}
+
+export interface SectionSummaryOptions {
+  showAccent?: boolean;
+  showFooter?: boolean;
+  showCopy?: boolean;
+  numbered?: boolean;
+  nav?: SummaryNavLevel;
+  navLabel?: string;
+}
+
+interface SectionSummaryBlockProps {
+  sectionId?: string;
+  kicker: string;
+  accent: string;
+  footNote: string;
+  items: SummaryItem[];
+  options: SectionSummaryOptions;
+  isEditMode?: boolean;
+  openModal?: OpenModal;
+  onKickerChange?: (value: string) => void;
+  onAccentChange?: (value: string) => void;
+  onFootNoteChange?: (value: string) => void;
+  onItemsChange?: (items: SummaryItem[]) => void;
+  /** Page-unique nav anchor (see summaryNavAnchors), when nav is on. */
+  navAnchor?: string;
+  /** Editor-only note on why a nav-enabled plate is missing from the nav. */
+  navHint?: string;
+}
+
+// --font-label / --font-accent are optional site-defined hooks (Siete sets both);
+// without them the label and the script accent fall back to the heading font.
+const LABEL_FONT = "var(--font-label, var(--font-heading, system-ui))";
+const ACCENT_FONT = "var(--font-accent, var(--font-heading, cursive))";
+// Text on the primary-filled plate reads from --color-on-primary, the framework's
+// per-brand derived on-primary ink (black or white, whichever wins WCAG on
+// primaryColor). The #fff fallback covers package versions predating the token.
+// Deliberately NOT --color-primary-contrast: that is the decorative accent
+// (Siete's gold), used below for the kicker, numerals and hover states.
+const INK_SOFT = "color-mix(in srgb, var(--color-on-primary, #fff) 70%, var(--color-primary))";
+const PLATE_LINE = "color-mix(in srgb, var(--color-on-primary, #fff) 25%, var(--color-primary))";
+
+const sanitizeIdPart = (s: string) => s.toLowerCase().replace(/[^a-z0-9-]/g, "");
+
+// A link counts as "set" when it names a target. In the editor an internal link
+// carries a pageId but no resolved href yet (resolveInternalLinks runs SSR-side);
+// in the viewer it has already been collapsed to { kind: "external", href }.
+function linkIsSet(link: LinkValue): boolean {
+  return link.kind === "external" ? link.href.trim() !== "" : link.pageId !== "";
+}
+
+// The navigable href, only ever present for the viewer's resolved external form
+// (or an editor-side external link). Internal links have no href until the SSR
+// pass resolves them, so the editor renders a non-navigating label preview.
+function linkHref(link: LinkValue): { href: string; target?: string } {
+  if (link.kind === "external") return { href: link.href.trim(), target: link.target };
+  return { href: "" };
+}
+
+// Stored label wins; external links with no label fall back to the raw URL.
+function displayLabel(item: SummaryItem): string {
+  if (item.linkLabel.trim() !== "") return item.linkLabel.trim();
+  if (item.link.kind === "external") return item.link.href.trim();
+  return "";
+}
+
+// Modal body for setting an item's jump-link — the shared LinkField (external
+// URL / internal page + section), same picker the Button/Media settings use.
+// Opened via the section's openModal; changes apply live to the item (the modal
+// chrome owns closing) and the label is derived here, where the pages context
+// (only present inside the editor) is available.
+function JumpLinkModalBody({
+  initialLink,
+  onApply,
+  onRemove,
+}: {
+  initialLink: LinkValue;
+  onApply: (link: LinkValue, label: string) => void;
+  onRemove: () => void;
+}) {
+  const { pages, getPageHeadings } = usePages();
+  const [link, setLink] = useState<LinkValue>(initialLink);
+  const deriveLabel = (l: LinkValue): string => {
+    if (l.kind !== "internal" || !l.pageId) return "";
+    if (l.anchorSectionId) {
+      const h = getPageHeadings(l.pageId).find((x) => x.id === l.anchorSectionId);
+      if (h) return h.label;
+    }
+    return pages.find((pg) => pg.id === l.pageId)?.title ?? "";
+  };
+  const handle = (l: LinkValue) => {
+    setLink(l);
+    onApply(l, l.kind === "internal" ? deriveLabel(l) : "");
+  };
+  return (
+    <div className="flex flex-col gap-4">
+      <LinkField label="Jump-link target" value={link} onChange={handle} />
+      {linkIsSet(link) && (
+        <button
+          type="button"
+          className="cursor-pointer self-start text-sm text-base-contrast-light underline hover:text-base-contrast"
+          onClick={() => {
+            setLink(DEFAULT_LINK);
+            onRemove();
+          }}
+        >
+          Remove jump link
+        </button>
+      )}
+    </div>
+  );
+}
+
+// Radii follow the portal's corner-radius tokens (--radius-outer / --radius-inner).
+function buildCss(p: string, numbered: boolean): string {
+  return [
+    `#${p}{background:var(--color-primary);border-radius:var(--radius-outer, 18px);padding:1.4rem 1.4rem 1.1rem;color:var(--color-on-primary, #fff);}`,
+    `#${p} .ss-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;}`,
+    `#${p} .ss-kicker{font-family:${LABEL_FONT};font-weight:700;letter-spacing:.18em;font-size:.78rem;color:var(--color-primary-contrast);text-transform:uppercase;}`,
+    `#${p} .ss-accent{font-family:${ACCENT_FONT};font-size:1.45rem;color:var(--color-on-primary, #fff);opacity:.92;text-align:right;}`,
+    // The list: neutralize EditableList's utility gap so rhythm comes from item
+    // padding + rules (id-scoped, so it wins in both view and edit mode).
+    `#${p} .ss-list{margin-top:.5rem;gap:0;}`,
+    `#${p} .ss-item{display:grid;grid-template-columns:${numbered ? "max-content 1fr" : "1fr"};column-gap:.9rem;align-items:baseline;padding:.95rem 0;border-top:1px solid ${PLATE_LINE};}`,
+    `#${p} .ss-list > div:first-child .ss-item{border-top:0;padding-top:.6rem;}`,
+    `#${p} .ss-num{font-family:${LABEL_FONT};font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--color-primary-contrast);}`,
+    `#${p} .ss-h{font-weight:700;font-size:1.22rem;line-height:1.3;}`,
+    `#${p} .ss-x{color:${INK_SOFT};font-size:.98rem;line-height:1.45;margin-top:.25rem;}`,
+    // Jump-link trails each item on its own line. When no link is set the element
+    // is kept (visibility:hidden) so toggling a link never shifts the layout.
+    `#${p} .ss-jumprow{margin-top:.4rem;}`,
+    `#${p} .ss-arrow{margin-right:.4em;}`,
+    `#${p} .ss-jump{display:inline-block;font-family:${LABEL_FONT};font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:${INK_SOFT};text-decoration:none;white-space:nowrap;border-bottom:1px solid ${PLATE_LINE};transition:color .15s,border-color .15s;}`,
+    `#${p} a.ss-jump:hover{color:var(--color-primary-contrast);border-color:var(--color-primary-contrast);}`,
+    `#${p} .ss-foot{margin-top:.4rem;padding-top:.9rem;border-top:1px solid ${PLATE_LINE};display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:${LABEL_FONT};font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:${INK_SOFT};}`,
+    `#${p} .ss-copy{background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:${INK_SOFT};border-bottom:1px solid ${PLATE_LINE};transition:color .15s,border-color .15s;}`,
+    `#${p} .ss-copy:hover,#${p} .ss-copy.ss-copied{color:var(--color-primary-contrast);border-color:var(--color-primary-contrast);}`,
+    // Editor-only: the jump-link trigger (opens the picker modal) and the
+    // EditableList "Add row" button, both branded with --color-primary-contrast.
+    `#${p} .ss-jumpedit{display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer;font-family:${LABEL_FONT};font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:${INK_SOFT};transition:color .15s;}`,
+    `#${p} .ss-jumpedit:hover{color:var(--color-primary-contrast);}`,
+    `#${p} .ss-jumpedit.is-set{border-bottom:1px solid ${PLATE_LINE};}`,
+    `#${p} .ss-jumpedit-ic{margin-left:.4em;opacity:.7;}`,
+    `#${p} .ss-list > button{border-color:var(--color-primary-contrast);color:var(--color-primary-contrast);}`,
+    `#${p} .ss-list > button:hover{background:color-mix(in srgb, var(--color-primary-contrast) 12%, transparent);}`,
+    // EditableList's drag/drop chrome renders inside the primary-filled plate, so
+    // tint the drag handle and the drop-target indicator (a border-primary top
+    // rule that would otherwise vanish into the plate) to the same soft on-primary
+    // ink as the jump-link trigger.
+    `#${p} .ss-list button.cursor-grab{color:${INK_SOFT};}`,
+    `#${p} .ss-list .border-primary{border-color:${INK_SOFT};}`,
+    `#${p} [contenteditable]{outline:none;caret-color:var(--color-primary-contrast);}`,
+    `#${p} [contenteditable]:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary-contrast) 55%, transparent);border-radius:var(--radius-inner, 6px);}`,
+  ].join("\n");
+}
+
+// Copy wiring for the SSR viewer (no React hydration there). One delegated
+// `click` listener on the plate root; builds plain text from the rendered DOM
+// (kicker + "• headline — explainer" lines, jump-link text stripped). `P` is
+// the sanitized [a-z0-9-] prefix — the only value interpolated in.
+function copyScript(p: string): string {
+  return (
+    `(function(){var bind=function(){var c=document.getElementById("${p}");` +
+    `if(!c||c.dataset.ssBound)return;c.dataset.ssBound="1";` +
+    `c.addEventListener("click",function(e){var t=e.target&&e.target.closest?e.target.closest(".ss-copy"):null;` +
+    `if(!t||!c.contains(t)||t.classList.contains("ss-copied")||!(navigator.clipboard&&navigator.clipboard.writeText))return;` +
+    `var lines=[];var k=c.querySelector(".ss-kicker");` +
+    `if(k&&k.textContent&&k.textContent.trim())lines.push(k.textContent.trim().toUpperCase());` +
+    `var items=c.querySelectorAll(".ss-item");` +
+    `for(var i=0;i<items.length;i++){var h=items[i].querySelector(".ss-h");var x=items[i].querySelector(".ss-x");var xt="";` +
+    `if(x){var cl=x.cloneNode(true);var j=cl.querySelector(".ss-jump");if(j)j.remove();xt=(cl.textContent||"").trim();}` +
+    `var ht=((h&&h.textContent)||"").trim();if(ht||xt)lines.push("\\u2022 "+ht+(xt?" \\u2014 "+xt:""));}` +
+    `navigator.clipboard.writeText(lines.join("\\n")).then(function(){` +
+    `var o=t.textContent;t.classList.add("ss-copied");t.textContent="\\u2713 Copied";` +
+    `setTimeout(function(){t.classList.remove("ss-copied");t.textContent=o;},1400);},function(){});});};` +
+    `bind();if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",bind);}})();`
+  );
+}
+
+const pad2 = (n: number) => String(n).padStart(2, "0");
+
+export function SectionSummaryBlock({
+  sectionId,
+  kicker,
+  accent,
+  footNote,
+  items,
+  options,
+  isEditMode,
+  openModal,
+  onKickerChange,
+  onAccentChange,
+  onFootNoteChange,
+  onItemsChange,
+  navAnchor,
+  navHint,
+}: SectionSummaryBlockProps) {
+  // Stable, sanitized per-instance prefix (id from the content envelope; useId
+  // is only a fallback).
+  const reactId = useId();
+  const p = `ss-${sanitizeIdPart(sectionId ?? "") || sanitizeIdPart(reactId) || "x"}`;
+
+  const edit = !!isEditMode;
+  const numbered = options.numbered ?? true;
+
+  // View mode skips rows with no content at all (e.g. a forgotten starter
+  // row), so they don't render as blank ruled rows; the editor still shows
+  // them for filling in.
+  const visibleItems = items.filter(
+    (item) => item.headline.trim() !== "" || item.explainer.trim() !== "" || linkIsSet(item.link),
+  );
+  // Count what this mode actually renders, so an all-empty list doesn't leave
+  // the viewer with a footer rule and a copy button over no content.
+  const rowCount = edit ? items.length : visibleItems.length;
+
+  const showFooter = (options.showFooter ?? true) && (edit || footNote.trim() !== "" || rowCount > 0);
+  // Button and inline script share one gate so the viewer never ships a
+  // listener for a control that isn't rendered.
+  const showCopyButton = showFooter && (options.showCopy ?? true) && rowCount > 0;
+  const showAccent = (options.showAccent ?? true) && (edit ? !!onAccentChange : accent.trim() !== "");
+  const showKicker = edit ? !!onKickerChange : kicker.trim() !== "";
+
+  const css = buildCss(p, numbered);
+
+  // Editor-only copy handling: here the button is an ordinary React control, so
+  // the text comes straight from props. The SSR viewer has no React and gets the
+  // inline <script> instead (which reads the same text back out of the DOM).
+  const [copied, setCopied] = useState(false);
+  const onCopyClick = () => {
+    if (copied || !navigator.clipboard?.writeText) return;
+    const lines: string[] = [];
+    if (kicker.trim()) lines.push(kicker.trim().toUpperCase());
+    for (const item of items) {
+      const h = item.headline.trim();
+      const x = item.explainer.trim();
+      if (h || x) lines.push(`• ${h}${x ? ` — ${x}` : ""}`);
+    }
+    navigator.clipboard.writeText(lines.join("\n")).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      },
+      () => {
+        // Clipboard denied/unavailable: leave the label untouched rather than
+        // surface an unhandled rejection.
+      },
+    );
+  };
+
+  const renderViewItem = (item: SummaryItem, index: number) => {
+    const { href, target } = linkHref(item.link);
+    const hasLink = href !== "";
+    const label = displayLabel(item);
+    return (
+      <div className="ss-item">
+        {numbered && (
+          <span className="ss-num" aria-hidden="true">
+            {pad2(index + 1)}
+          </span>
+        )}
+        <div className="ss-body">
+          <div className="ss-h">{item.headline}</div>
+          {item.explainer.trim() !== "" && <div className="ss-x">{item.explainer}</div>}
+          <div className="ss-jumprow">
+            {hasLink ? (
+              <a className="ss-jump" href={href} target={target}>
+                <span className="ss-arrow" aria-hidden="true">{"↩"}</span>
+                {label}
+              </a>
+            ) : (
+              // Reserve the line so a row with/without a link keeps the same height.
+              <span className="ss-jump" style={{ visibility: "hidden" }} aria-hidden="true">
+                {"↩ Link"}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderEditItem = (item: SummaryItem, index: number) => {
+    const set = (patch: Partial<SummaryItem>) => {
+      const next = items.slice();
+      next[index] = { ...next[index], ...patch };
+      onItemsChange?.(next);
+    };
+    const label = displayLabel(item);
+    const isSet = linkIsSet(item.link);
+    // The picker opens in a modal (the shared link pattern); changes apply live.
+    const openLinkModal = () =>
+      openModal?.(
+        "Jump link",
+        <JumpLinkModalBody
+          initialLink={item.link}
+          onApply={(link, linkLabel) => set({ link, linkLabel })}
+          onRemove={() => set({ link: DEFAULT_LINK, linkLabel: "" })}
+        />,
+      );
+    return (
+      <div className="ss-item">
+        {numbered && <span className="ss-num">{pad2(index + 1)}</span>}
+        <div className="ss-body">
+          <EditablePlainText
+            tag="div"
+            className="ss-h"
+            value={item.headline}
+            onChange={(headline) => set({ headline })}
+            isEditMode={true}
+            placeholder="Headline"
+          />
+          <EditablePlainText
+            tag="div"
+            className="ss-x"
+            value={item.explainer}
+            onChange={(explainer) => set({ explainer })}
+            isEditMode={true}
+            placeholder="One-sentence explainer (optional)"
+          />
+          <div className="ss-jumprow">
+            <button
+              type="button"
+              className={isSet ? "ss-jumpedit is-set" : "ss-jumpedit"}
+              onClick={openLinkModal}
+            >
+              {isSet ? (
+                <>
+                  <span className="ss-arrow" aria-hidden="true">{"↩"}</span>
+                  {label || "Edit jump link"}
+                  <span className="ss-jumpedit-ic" aria-hidden="true">{" ✎"}</span>
+                </>
+              ) : (
+                "+ Add jump link"
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const autoNote = rowCount > 0 ? `${pad2(rowCount)} ${rowCount === 1 ? "principle" : "principles"}` : "";
+
+  const plate = (
+    <div id={p}>
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+
+      {(showKicker || showAccent) && (
+        <div className="ss-head">
+          {showKicker &&
+            (edit && onKickerChange ? (
+              <EditablePlainText
+                tag="span"
+                className="ss-kicker"
+                value={kicker}
+                onChange={onKickerChange}
+                isEditMode={true}
+                placeholder="Section — Summary"
+              />
+            ) : (
+              <span className="ss-kicker">{kicker}</span>
+            ))}
+          {showAccent &&
+            (edit && onAccentChange ? (
+              <EditablePlainText
+                tag="span"
+                className="ss-accent"
+                value={accent}
+                onChange={onAccentChange}
+                isEditMode={true}
+                placeholder="tl;dr"
+                style={{ marginLeft: "auto" }}
+              />
+            ) : (
+              <span className="ss-accent" style={{ marginLeft: "auto" }}>
+                {accent}
+              </span>
+            ))}
+        </div>
+      )}
+
+      {edit && onItemsChange ? (
+        <EditableList<SummaryItem>
+          className="ss-list"
+          items={items}
+          onChange={onItemsChange}
+          createItem={() => ({ headline: "", explainer: "", link: DEFAULT_LINK, linkLabel: "" })}
+          isEditMode={true}
+          renderItem={(item, { index }) => renderEditItem(item, index)}
+        />
+      ) : (
+        visibleItems.length > 0 && (
+          <div className="ss-list" style={{ display: "flex", flexDirection: "column" }}>
+            {visibleItems.map((item, index) => (
+              <div key={index}>{renderViewItem(item, index)}</div>
+            ))}
+          </div>
+        )
+      )}
+
+      {showFooter && (
+        <div className="ss-foot">
+          {edit && onFootNoteChange ? (
+            <EditablePlainText
+              tag="span"
+              value={footNote}
+              onChange={onFootNoteChange}
+              isEditMode={true}
+              placeholder={autoNote || "Footer note"}
+            />
+          ) : (
+            <span>{footNote.trim() || autoNote}</span>
+          )}
+          {showCopyButton && (
+            <button
+              type="button"
+              className={copied ? "ss-copy ss-copied" : "ss-copy"}
+              aria-live="polite"
+              onClick={edit ? onCopyClick : undefined}
+            >
+              {copied ? "✓ Copied" : "⧉ Copy summary"}
+            </button>
+          )}
+        </div>
+      )}
+
+      {!edit && showCopyButton && <script dangerouslySetInnerHTML={{ __html: copyScript(p) }} />}
+    </div>
+  );
+  const hint = edit && navHint ? <p className="mt-2 text-xs text-warning">{navHint}</p> : null;
+  if (!navAnchor && !hint) return plate;
+
+  return (
+    // The nav anchor sits on a wrapper: the plate's own id is the CSS/script scope.
+    <div id={navAnchor} className={navAnchor ? "scroll-mt-20" : undefined}>
+      {plate}
+      {hint}
+    </div>
+  );
+}

package/src/components/sections/SectionSummary/SectionSummarySettings.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { Input } from "../../shared/Input";
+import { Select } from "../../shared/Select";
+import { Checkbox } from "../../shared/Checkbox";
+import { Tabs } from "../../shared/Tabs";
+import type { SummaryNavLevel as NavLevel } from "../../../lib/nav";
+
+interface Values {
+  kicker: string;
+  accent: string;
+  footNote: string;
+  showAccent: boolean;
+  showFooter: boolean;
+  showCopy: boolean;
+  numbered: boolean;
+  nav: NavLevel;
+  navLabel: string;
+}
+
+const navOptions = [
+  { label: "Off", value: "off" },
+  { label: "Heading", value: "heading" },
+  { label: "Subheading", value: "subheading" },
+];
+
+// A custom form rather than declarative `settings`: turning nav on prefills the
+// label from the kicker, and the label is required while nav is on.
+export function SectionSummarySettings({
+  kicker = "",
+  accent = "",
+  footNote = "",
+  showAccent = true,
+  showFooter = true,
+  showCopy = true,
+  numbered = true,
+  nav = "off",
+  navLabel = "",
+  onChange,
+}: Partial<Values> & {
+  onChange: (result: { content: Record<string, unknown>; options: Record<string, unknown> }) => void;
+}) {
+  const [v, setV] = useState<Values>({ kicker, accent, footNote, showAccent, showFooter, showCopy, numbered, nav, navLabel });
+
+  const update = (patch: Partial<Values>) => {
+    const next = { ...v, ...patch };
+    setV(next);
+    onChange({
+      content: { kicker: next.kicker, accent: next.accent, footNote: next.footNote },
+      options: {
+        showAccent: next.showAccent,
+        showFooter: next.showFooter,
+        showCopy: next.showCopy,
+        numbered: next.numbered,
+        // Off is stored as an absent key; the label is kept so turning nav back
+        // on restores it.
+        nav: next.nav === "off" ? undefined : next.nav,
+        navLabel: next.navLabel,
+      },
+    });
+  };
+
+  const navOn = v.nav !== "off";
+  const panel = "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-px";
+
+  return (
+    <Tabs
+      fullBleedTabBar
+      tabs={[
+        {
+          id: "text",
+          label: "Text",
+          content: (
+            <div className={panel}>
+              <Input label="Kicker" value={v.kicker} placeholder="Brand Color — Summary" onChange={(kicker) => update({ kicker })} />
+              <Input label="Accent flourish" value={v.accent} placeholder="tl;dr" onChange={(accent) => update({ accent })} />
+              <Input label="Footer note" value={v.footNote} placeholder="Brand Color · 06 principles" onChange={(footNote) => update({ footNote })} />
+            </div>
+          ),
+        },
+        {
+          id: "display",
+          label: "Display",
+          content: (
+            <div className={panel}>
+              <Checkbox label="Show accent" checked={v.showAccent} onChange={(showAccent) => update({ showAccent })} />
+              <Checkbox label="Show footer" checked={v.showFooter} onChange={(showFooter) => update({ showFooter })} />
+              <Checkbox label="Show copy action" checked={v.showCopy} onChange={(showCopy) => update({ showCopy })} />
+              <Checkbox label="Number the items" checked={v.numbered} onChange={(numbered) => update({ numbered })} />
+            </div>
+          ),
+        },
+        {
+          id: "nav",
+          label: "Navigation",
+          content: (
+            <div className={panel}>
+              <Select
+                label="Nav"
+                value={v.nav}
+                options={navOptions}
+                onChange={(value) => {
+                  const level = value as NavLevel;
+                  const prefill = level !== "off" && !v.navLabel.trim();
+                  update(prefill ? { nav: level, navLabel: v.kicker } : { nav: level });
+                }}
+              />
+              {v.nav === "subheading" && (
+                <p className="-mt-2 text-xs text-base-contrast-light">
+                  Nests under the nearest Link Heading above this plate; with none above it, it is left out of the nav.
+                </p>
+              )}
+              {navOn && (
+                <Input
+                  label="Nav label"
+                  value={v.navLabel}
+                  onChange={(label) => update({ navLabel: label })}
+                  error={v.navLabel.trim() ? undefined : "Required while this plate is in the nav."}
+                />
+              )}
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}