@prenta/admin 2.6.1 → 2.7.0

package/src/components/NotificationBell.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
 
 import {
   type Notification,
@@ -14,6 +14,7 @@ import {
   subscribeNotificationStream as defaultSubscribeStream,
   unreadCount as defaultUnreadCount,
 } from '../lib/notifications-client.js'
+import { TOPBAR_ICON_BUTTON } from '../layout/topbar-classes.js'
 
 /**
  * Top-bar notification bell + dropdown panel. Slice 6 of Phase 3
@@ -97,6 +98,11 @@ export function NotificationBell({
   const [items, setItems] = useState<Notification[]>([])
   const [loading, setLoading] = useState(false)
   const mountedRef = useRef(true)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const panelId = useId()
+  const titleId = useId()
   // Set of notification IDs we've already rendered. The SSE handler
   // consults this synchronously so duplicate deliveries (REST refresh
   // + SSE push, or two SSE retries) don't double-bump the badge.
@@ -113,6 +119,9 @@ export function NotificationBell({
   // SSE and REST`.
   const seenIdsRef = useRef<Set<string>>(new Set())
   useEffect(() => {
+    // Set on mount too: StrictMode unmounts and remounts once in development,
+    // and a ref left false drops every later result (no dot, no rows).
+    mountedRef.current = true
     return () => {
       mountedRef.current = false
     }
@@ -198,6 +207,33 @@ export function NotificationBell({
     void refreshList(false)
   }, [open, refreshList])
 
+  // The panel is a non-modal dialog: it takes focus when it opens, and a
+  // pointerdown anywhere else closes it without moving focus.
+  useEffect(() => {
+    if (!open) return
+    panelRef.current?.focus()
+    const onPointerDown = (e: PointerEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown, true)
+    return () => document.removeEventListener('pointerdown', onPointerDown, true)
+  }, [open])
+
+  const onRootKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!open || e.key !== 'Escape' || e.defaultPrevented) return
+    e.preventDefault()
+    setOpen(false)
+    buttonRef.current?.focus()
+  }
+
+  // Tabbing past the panel (or back past the bell) closes it. A blur with no
+  // next element (a click on the page, the window losing focus) is left to
+  // the pointerdown listener.
+  const onRootBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    const next = e.relatedTarget as Node | null
+    if (open && next && !e.currentTarget.contains(next)) setOpen(false)
+  }
+
   const handleClickRow = useCallback(
     async (n: Notification) => {
       // Optimistic update: drop the unread count + tag the row read.
@@ -242,35 +278,56 @@ export function NotificationBell({
     }
   }, [api, items, onError, refreshUnread])
 
+  const unreadLabel = unread > 99 ? '99+' : String(unread)
+
   return (
-    <div className={`relative ${className ?? ''}`} data-testid="notification-bell">
+    <div
+      ref={rootRef}
+      className={`relative ${className ?? ''}`}
+      data-testid="notification-bell"
+      onKeyDown={onRootKeyDown}
+      onBlur={onRootBlur}
+    >
+      {/* The kit's `.icbtn`. The unread count is in the name; the dot only
+          says that something is unread (SHELL.md §3). */}
       <button
+        ref={buttonRef}
         type="button"
-        className="text-muted-foreground hover:bg-accent hover:text-foreground relative rounded p-1.5"
-        aria-label="Notifications"
-        aria-haspopup="menu"
+        className={`${TOPBAR_ICON_BUTTON} aria-expanded:bg-acc-l aria-expanded:text-acc`}
+        aria-label={unread > 0 ? `Notifications, ${unreadLabel} unread` : 'Notifications'}
+        aria-haspopup="dialog"
         aria-expanded={open}
+        aria-controls={open ? panelId : undefined}
         onClick={() => setOpen((v) => !v)}
         data-testid="bell-button"
       >
         <BellIcon />
         {unread > 0 && (
           <span
-            className="bg-destructive absolute -top-0.5 -right-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium text-white"
+            aria-hidden
+            className="border-sb bg-notify-dot pointer-events-none absolute top-[5px] right-[5px] h-[7px] w-[7px] rounded-full border-[1.5px] forced-colors:bg-[CanvasText] forced-colors:[forced-color-adjust:none]"
             data-testid="bell-badge"
-          >
-            {unread > 99 ? '99+' : unread}
-          </span>
+          />
         )}
       </button>
       {open && (
+        // Not role="menu": it holds a title, a button and a list of rows, not
+        // menu items.
         <div
-          role="menu"
-          className="border-border bg-card absolute right-0 z-50 mt-1 w-80 rounded border shadow-lg"
+          ref={panelRef}
+          id={panelId}
+          role="dialog"
+          aria-labelledby={titleId}
+          tabIndex={-1}
+          className="rounded-10 border-bdr bg-card shadow-shd2 absolute right-0 z-50 mt-1 w-80 border"
           data-testid="bell-dropdown"
         >
-          <header className="flex items-center justify-between border-b border-gray-100 px-3 py-2">
-            <span className="text-foreground text-sm font-medium">Notifications</span>
+          {/* A div, not <header>: the panel sits inside the topbar's
+              <header>, which may not contain another. */}
+          <div className="border-bdr flex items-center justify-between border-b px-3 py-2">
+            <span id={titleId} className="text-foreground text-sm font-medium">
+              Notifications
+            </span>
             <button
               type="button"
               className="text-muted-foreground hover:text-foreground text-xs disabled:opacity-50"
@@ -280,7 +337,7 @@ export function NotificationBell({
             >
               Mark all read
             </button>
-          </header>
+          </div>
           <div className="max-h-80 overflow-y-auto" aria-busy={loading} data-testid="bell-list">
             {loading ? (
               <p className="text-muted-foreground px-3 py-2 text-xs">Loading…</p>
@@ -292,7 +349,6 @@ export function NotificationBell({
                   <li key={n.id}>
                     <button
                       type="button"
-                      role="menuitem"
                       className={`hover:bg-accent block w-full px-3 py-2 text-left text-xs ${
                         n.readAt ? 'text-muted-foreground' : 'text-foreground font-medium'
                       }`}
@@ -318,12 +374,12 @@ function BellIcon(): React.JSX.Element {
   return (
     <svg
       aria-hidden="true"
-      width="18"
-      height="18"
+      width="16"
+      height="16"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.75"
       strokeLinecap="round"
       strokeLinejoin="round"
     >

package/src/components/OfflineStatus.tsx

@@ -52,7 +52,7 @@ export type OfflineTone = 'good' | 'warn' | 'info' | 'bad'
 
 const TONE_CLASSES: Record<OfflineTone, string> = {
   good: 'bg-success/10 text-emerald-700',
-  warn: 'bg-warning/10 text-warning',
+  warn: 'bg-warn-l text-warning',
   info: 'bg-info/10 text-info',
   bad: 'bg-destructive/10 text-destructive',
 }

package/src/components/PresenceIndicator.tsx

@@ -13,7 +13,8 @@ interface PresenceIndicatorProps {
   currentUserId?: string
 }
 
-const COLORS = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899']
+/** The avatar palette (tokens.json `--avatar-*`): white initials clear 4.5:1 on each. */
+const COLORS = Array.from({ length: 8 }, (_, i) => `var(--avatar-${i + 1})`)
 
 export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicatorProps) {
   const [users, setUsers] = useState<PresenceUser[]>([])

package/src/components/ReflowMeter.tsx

@@ -16,7 +16,7 @@ export interface ReflowMeterProps {
 
 const DOT_TONE: Record<string, string> = {
   same: 'bg-success/12 text-success',
-  grew: 'bg-warning/15 text-warning',
+  grew: 'bg-warn-l text-warning',
   'grew-badly': 'bg-destructive/12 text-destructive',
 }
 
@@ -104,7 +104,7 @@ export function ReflowMeter({ guard, length, device, onProof }: ReflowMeterProps
       </div>
 
       {worst && (
-        <div className="bg-warning/10 border-warning/30 mt-1.5 grid grid-cols-[auto_1fr] gap-x-2.5 gap-y-1 rounded-lg border p-2.5">
+        <div className="bg-warn-l border-warning/30 mt-1.5 grid grid-cols-[auto_1fr] gap-x-2.5 gap-y-1 rounded-lg border p-2.5">
           <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
           <p className="text-[11.5px] leading-normal">
             Wrapping changed on <b className="text-warning font-bold">{scope}</b> —{' '}
@@ -114,7 +114,7 @@ export function ReflowMeter({ guard, length, device, onProof }: ReflowMeterProps
           <button
             type="button"
             onClick={() => onProof(worst.id)}
-            className="border-warning text-warning hover:bg-warning/15 col-start-2 mt-0.5 justify-self-start rounded-md border px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap transition-colors"
+            className="border-warning text-warning hover:bg-warn-l col-start-2 mt-0.5 justify-self-start rounded-md border px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap transition-colors"
           >
             Proof on {getBreakpoint(worst.id).name}
           </button>

package/src/components/SEOPanel.tsx

@@ -400,7 +400,7 @@ function ScoreRing({ score }: { score: number }) {
   const radius = 28
   const circumference = 2 * Math.PI * radius
   const offset = circumference - (score / 100) * circumference
-  const color = score >= 70 ? '#22c55e' : score >= 40 ? '#f59e0b' : '#ef4444'
+  const color = score >= 70 ? 'var(--suc)' : score >= 40 ? 'var(--warn)' : 'var(--err)'
 
   return (
     <div className="relative inline-flex items-center justify-center">
@@ -965,7 +965,7 @@ export function SEOPanel({
               onChange={(v) => update({ isCornerstone: v })}
             />
             {seoData.isCornerstone && (
-              <div className="text-warning bg-warning/10 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs">
+              <div className="text-warning bg-warn-l flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs">
                 <Star className="h-3.5 w-3.5" />
                 Cornerstone content is held to stricter SEO standards
               </div>

package/src/components/ThemeProvider.tsx

@@ -1,12 +1,22 @@
 'use client'
 
 import {
-  accentTokensToCssVars,
+  accentPickCssVars,
   generateAdminThemeTokens,
+  validateAccentColor,
   type ColorMode,
+  type LightBase,
   type SidebarDensity,
 } from '@prenta/core/appearance'
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  type ReactNode,
+} from 'react'
 
 import { getAdminRootElement } from '../lib/admin-root-element.js'
 
@@ -14,8 +24,10 @@ import { getAdminRootElement } from '../lib/admin-root-element.js'
  * Admin appearance engine.
  *
  * Owns the live, DOM-applied admin theme: color mode (light/dark/system),
- * accent color, sidebar density, content font, reduced motion, and the
- * resolved admin brand logos used by the sidebar. State is mirrored to
+ * light base (Porcelain/Linen), accent color, sidebar density, content font,
+ * reduced motion, and the resolved admin brand logos used by the sidebar.
+ * Together, color mode and light base are the October 2026 kit's three bases:
+ * Graphite is dark mode, and light mode paints Porcelain or Linen. State is mirrored to
  * localStorage so a reload paints instantly without a render-blocking fetch;
  * the Appearance tab pushes the DB-backed values in via `applyAppearance` on
  * load and save, making the database the source of truth and localStorage the
@@ -33,10 +45,17 @@ export interface AdminBrandCache {
   initials: string
 }
 
+/** The kit's base names. Graphite whenever the admin resolves to dark. */
+export type ThemeBase = LightBase | 'graphite'
+
 interface ThemeContextValue {
   theme: ColorMode
   resolvedTheme: 'light' | 'dark'
   setTheme: (theme: ColorMode) => void
+  lightBase: LightBase
+  setLightBase: (base: LightBase) => void
+  /** The base on screen right now. */
+  base: ThemeBase
   accent: string
   setAccent: (accent: string) => void
   density: SidebarDensity
@@ -53,6 +72,7 @@ interface ThemeContextValue {
 
 export interface AppearanceSnapshot {
   theme?: ColorMode
+  lightBase?: LightBase
   accent?: string
   density?: SidebarDensity
   font?: string
@@ -87,11 +107,14 @@ const ThemeContext = createContext<ThemeContextValue>({
   theme: 'system',
   resolvedTheme: 'light',
   setTheme: () => {},
-  accent: 'purple',
+  lightBase: 'porcelain',
+  setLightBase: () => {},
+  base: 'porcelain',
+  accent: 'cobalt',
   setAccent: () => {},
   density: 'default',
   setDensity: () => {},
-  font: 'System UI',
+  font: 'DM Sans',
   setFont: () => {},
   reduceMotion: false,
   setReduceMotion: () => {},
@@ -114,6 +137,7 @@ function resolveTheme(theme: ColorMode): 'light' | 'dark' {
 }
 
 const KEY_THEME = 'prenta-theme'
+const KEY_LIGHT = 'prenta-light'
 const KEY_ACCENT = 'prenta-accent'
 const KEY_DENSITY = 'prenta-density'
 const KEY_FONT = 'prenta-font'
@@ -132,12 +156,22 @@ function applyColorMode(resolved: 'light' | 'dark') {
   el.setAttribute('data-theme', resolved)
 }
 
+function readLightBase(): LightBase {
+  return localStorage.getItem(KEY_LIGHT) === 'linen' ? 'linen' : 'porcelain'
+}
+
+function applyLightBase(base: LightBase) {
+  const el = adminRootEl()
+  if (!el) return
+  // Linen's token block matches `[data-light='linen']` unless the root is dark.
+  el.setAttribute('data-light', base)
+}
+
+/** Writes --acc-base, --acc-lt and --acc-dk; the token CSS derives the rest per base. */
 function applyAccent(accent: string, resolved: 'light' | 'dark') {
   const el = adminRootEl()
   if (!el) return
-  const vars = accentTokensToCssVars(
-    generateAdminThemeTokens({ adminAccentColor: accent }, resolved),
-  )
+  const vars = accentPickCssVars(generateAdminThemeTokens({ adminAccentColor: accent }, resolved))
   for (const [name, value] of Object.entries(vars)) el.style.setProperty(name, value)
 }
 
@@ -163,16 +197,46 @@ interface ThemeProviderProps {
   children: ReactNode
   /** When true, default to dark mode if the user hasn't explicitly chosen one. */
   defaultDarkMode?: boolean
+  /**
+   * Config-managed accent (`admin.branding.primaryColor`). While set, it wins
+   * over the cached and saved accent and is contrast-tuned like any pick.
+   */
+  accentOverride?: string
 }
 
-export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps) {
+/**
+ * A config accent must be a preset name or a color `tuneAccent` reads (hex,
+ * `rgb()`, `hsl()`, `oklch()`). Anything else is ignored, with a warning, and
+ * Settings keeps the accent editable (see useAppearanceSettings).
+ */
+export function usableAccentOverride(value: unknown): string | undefined {
+  return typeof value === 'string' && validateAccentColor(value).valid ? value : undefined
+}
+
+export function ThemeProvider({ children, defaultDarkMode, accentOverride }: ThemeProviderProps) {
+  const override = usableAccentOverride(accentOverride)
+  useEffect(() => {
+    if (accentOverride && !override) {
+      console.warn(
+        `[Prenta CMS] admin.branding.primaryColor ${JSON.stringify(accentOverride)} isn't a color the admin can use (hex, rgb(), hsl() or oklch()). Using the saved accent instead.`,
+      )
+    }
+  }, [accentOverride, override])
   const [theme, setThemeState] = useState<ColorMode>('system')
   const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light')
-  const [accent, setAccentState] = useState('purple')
+  const [lightBase, setLightBaseState] = useState<LightBase>('porcelain')
+  const [accent, setAccentState] = useState('cobalt')
   const [density, setDensityState] = useState<SidebarDensity>('default')
-  const [font, setFontState] = useState('System UI')
+  const [font, setFontState] = useState('DM Sans')
   const [reduceMotion, setReduceMotionState] = useState(false)
   const [adminBrand, setAdminBrandState] = useState<AdminBrandCache>(DEFAULT_BRAND)
+  // The setters read these instead of closing over state, so every setter and
+  // `applyAppearance` keep one identity. Consumers load data in effects keyed
+  // on them; a new identity per change would refetch and undo the change.
+  const themeRef = useRef<ColorMode>('system')
+  const accentRef = useRef('cobalt')
+  const overrideRef = useRef(override)
+  overrideRef.current = override
 
   // Hydrate from localStorage on mount and apply everything to the DOM.
   useEffect(() => {
@@ -189,9 +253,10 @@ export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps)
     }
     const resolved = resolveTheme(initialTheme)
 
-    const storedAccent = localStorage.getItem(KEY_ACCENT) || 'purple'
+    const storedLightBase = readLightBase()
+    const storedAccent = localStorage.getItem(KEY_ACCENT) || 'cobalt'
     const storedDensity = (localStorage.getItem(KEY_DENSITY) as SidebarDensity | null) || 'default'
-    const storedFont = localStorage.getItem(KEY_FONT) || 'System UI'
+    const storedFont = localStorage.getItem(KEY_FONT) || 'DM Sans'
     const storedMotion = localStorage.getItem(KEY_MOTION) === 'true'
     let storedBrand = DEFAULT_BRAND
     try {
@@ -201,8 +266,11 @@ export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps)
       // Ignore malformed cache.
     }
 
+    themeRef.current = initialTheme
+    accentRef.current = storedAccent
     setThemeState(initialTheme)
     setResolvedTheme(resolved)
+    setLightBaseState(storedLightBase)
     setAccentState(storedAccent)
     setDensityState(storedDensity)
     setFontState(storedFont)
@@ -210,48 +278,56 @@ export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps)
     setAdminBrandState(storedBrand)
 
     applyColorMode(resolved)
-    applyAccent(storedAccent, resolved)
+    applyLightBase(storedLightBase)
+    applyAccent(overrideRef.current ?? storedAccent, resolved)
     applyDensity(storedDensity)
     applyFont(storedFont)
     applyReduceMotion(storedMotion)
   }, [defaultDarkMode])
 
-  // Follow the OS color scheme while in `system` mode (re-applies accent too,
-  // since presets differ between light and dark).
+  // A config accent arriving or changing after mount.
+  useEffect(() => {
+    applyAccent(override ?? accentRef.current, resolveTheme(themeRef.current))
+  }, [override])
+
+  // Follow the OS color scheme while in `system` mode.
   useEffect(() => {
     const mq = window.matchMedia('(prefers-color-scheme: dark)')
     const handler = () => {
-      if (theme === 'system') {
+      if (themeRef.current === 'system') {
         const resolved = getSystemTheme()
         setResolvedTheme(resolved)
         applyColorMode(resolved)
-        applyAccent(accent, resolved)
+        applyAccent(overrideRef.current ?? accentRef.current, resolved)
       }
     }
     mq.addEventListener('change', handler)
     return () => mq.removeEventListener('change', handler)
-  }, [theme, accent])
-
-  const setTheme = useCallback(
-    (next: ColorMode) => {
-      setThemeState(next)
-      localStorage.setItem(KEY_THEME, next)
-      const resolved = resolveTheme(next)
-      setResolvedTheme(resolved)
-      applyColorMode(resolved)
-      applyAccent(accent, resolved)
-    },
-    [accent],
-  )
+  }, [])
 
-  const setAccent = useCallback(
-    (next: string) => {
-      setAccentState(next)
-      localStorage.setItem(KEY_ACCENT, next)
-      applyAccent(next, resolvedTheme)
-    },
-    [resolvedTheme],
-  )
+  const setTheme = useCallback((next: ColorMode) => {
+    themeRef.current = next
+    setThemeState(next)
+    localStorage.setItem(KEY_THEME, next)
+    const resolved = resolveTheme(next)
+    setResolvedTheme(resolved)
+    applyColorMode(resolved)
+    applyAccent(overrideRef.current ?? accentRef.current, resolved)
+  }, [])
+
+  const setLightBase = useCallback((next: LightBase) => {
+    setLightBaseState(next)
+    localStorage.setItem(KEY_LIGHT, next)
+    applyLightBase(next)
+  }, [])
+
+  // The pick is still remembered; a config accent just keeps winning on screen.
+  const setAccent = useCallback((next: string) => {
+    accentRef.current = next
+    setAccentState(next)
+    localStorage.setItem(KEY_ACCENT, next)
+    applyAccent(overrideRef.current ?? next, resolveTheme(themeRef.current))
+  }, [])
 
   const setDensity = useCallback((next: SidebarDensity) => {
     setDensityState(next)
@@ -281,13 +357,14 @@ export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps)
   const applyAppearance = useCallback(
     (snapshot: AppearanceSnapshot) => {
       if (snapshot.theme !== undefined) setTheme(snapshot.theme)
+      if (snapshot.lightBase !== undefined) setLightBase(snapshot.lightBase)
       if (snapshot.accent !== undefined) setAccent(snapshot.accent)
       if (snapshot.density !== undefined) setDensity(snapshot.density)
       if (snapshot.font !== undefined) setFont(snapshot.font)
       if (snapshot.reduceMotion !== undefined) setReduceMotion(snapshot.reduceMotion)
       if (snapshot.adminBrand !== undefined) setAdminBrand(snapshot.adminBrand)
     },
-    [setTheme, setAccent, setDensity, setFont, setReduceMotion, setAdminBrand],
+    [setTheme, setLightBase, setAccent, setDensity, setFont, setReduceMotion, setAdminBrand],
   )
 
   return (
@@ -296,7 +373,10 @@ export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps)
         theme,
         resolvedTheme,
         setTheme,
-        accent,
+        lightBase,
+        setLightBase,
+        base: resolvedTheme === 'dark' ? 'graphite' : lightBase,
+        accent: override ?? accent,
         setAccent,
         density,
         setDensity,

package/src/components/TipTapEditor.tsx

@@ -175,11 +175,10 @@ const editorStyles = `
   margin: 1rem 0;
   color: var(--sub);
 }
-/* Code blocks use a fixed dark slate theme in both light and dark modes
-   (standard "dark editor chrome" convention; no theme token maps to it). */
+/* Code blocks use the kit's code surface, the same in every base. */
 .ProseMirror pre {
-  background: #1e293b;
-  color: #e2e8f0;
+  background: var(--code-bg);
+  color: var(--code-txt);
   padding: 1rem;
   border-radius: 0.5rem;
   overflow-x: auto;

package/src/components/forms/EmbedPanel.tsx

@@ -85,7 +85,7 @@ export function EmbedPanel({
   return (
     <div className="space-y-5">
       {status !== 'active' && (
-        <p className="border-warning/30 bg-warning/10 text-warning rounded-md border px-3 py-2 text-sm">
+        <p className="border-warning/30 bg-warn-l text-warning rounded-md border px-3 py-2 text-sm">
           This form is <span className="font-medium">{status}</span> and won&apos;t accept public
           submissions until it&apos;s set to Active.
         </p>

package/src/components/forms/FormEntryDetailPane.tsx

@@ -367,7 +367,13 @@ export function FormEntryDetailPane({
 function FieldValues({ entry, fields }: { entry: FormSubmission; fields: FormField[] }) {
   // Prefer the schema order; fall back to whatever keys exist on the data.
   const inputFields = fields.filter(
-    (f) => f.type !== 'divider' && f.type !== 'richtext' && f.type !== 'honeypot',
+    (f) =>
+      f.type !== 'divider' &&
+      f.type !== 'richtext' &&
+      f.type !== 'honeypot' &&
+      f.type !== 'heading' &&
+      f.type !== 'content' &&
+      f.type !== 'pagebreak',
   )
   const rows: { key: string; label: string }[] = inputFields.length
     ? inputFields.map((f) => ({ key: f.key, label: f.label }))

package/src/components/forms/ShortcodeGlossary.tsx

@@ -40,7 +40,13 @@ async function copyText(value: string, label: string) {
 
 export function ShortcodeGlossary({ fields = [] }: { fields?: FormField[] }) {
   const fieldTokens = fields.filter(
-    (f) => f.type !== 'honeypot' && f.type !== 'divider' && f.type !== 'richtext',
+    (f) =>
+      f.type !== 'honeypot' &&
+      f.type !== 'divider' &&
+      f.type !== 'richtext' &&
+      f.type !== 'heading' &&
+      f.type !== 'content' &&
+      f.type !== 'pagebreak',
   )
 
   const allTokens = [