@delmaredigital/payload-experiments 0.2.0-rc.6 → 0.3.0-rc.1

package/dist/admin/surface/test/testPage.css

@@ -1,23 +1,90 @@
 .xp-test-page { color: var(--xp-text); background: var(--xp-bg); max-width: 90rem; margin: 0 auto; padding: 1.5rem; }
+.xp-test-page--setup { min-width: 0; padding: 0 0 160px; }
 .xp-test-header { position: sticky; top: 0; z-index: 10; background: var(--xp-bg); padding: 1rem 0; border-bottom: 1px solid var(--xp-border); }
 .xp-header-meta, .xp-section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: 1rem; }
-.xp-kind-chip, .xp-status-pill { border: 1px solid var(--xp-border-control); border-radius: 1rem; padding: .25rem .75rem; }
+.xp-kind-chip, .xp-status-pill { border: 1px solid var(--xp-border-strong); border-radius: 1rem; padding: .25rem .75rem; }
 .xp-status-pill--success, .xp-content-ready, .xp-section-check--done { color: var(--xp-success-text); }
 .xp-content-empty, .xp-status-pill--warning { color: var(--xp-warning-text); }
-.xp-test-section { padding-block: 1.5rem; border-bottom: 1px solid var(--xp-border); scroll-margin-top: 15rem; }
-.xp-version-rows { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
-.xp-version-row { border: 1px solid var(--xp-border); border-radius: var(--xp-radius); padding: 1rem; }
-.xp-version-colour { display: inline-block; width: .75rem; height: .75rem; margin-right: .5rem; border-radius: 50%; }
-.xp-traffic-bar { display: flex; height: 1.25rem; background: var(--xp-surface-raised); margin-block: 1.5rem; overflow: hidden; border-radius: var(--xp-radius); }
+.xp-test-section, .xp-test-advanced { scroll-margin-top: var(--xp-space-6); }
+.xp-version-rows { display: grid; grid-template-columns: minmax(0, 1.3fr) var(--xp-version-share-width) minmax(var(--xp-version-state-width), 1fr) var(--xp-version-remove-width); gap: var(--xp-space-3); align-items: center; }
+.xp-version-row, .xp-version-grid-head { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: var(--xp-space-3); align-items: center; }
+.xp-version-grid-head { margin-bottom: var(--xp-space-2); font: var(--xp-text-small); color: var(--xp-text-2); }
+.xp-version-row > .xp-field-error, .xp-version-row > [role=alert] { grid-column: 1 / -1; }
+.xp-version-remove { grid-column: 4; }
+.xp-grid-field .xp-ui-field { margin: 0; }
+.xp-grid-field .xp-ui-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.xp-version-content { display: flex; flex-wrap: nowrap; gap: var(--xp-space-2); align-items: center; min-width: 0; }
+.xp-version-content .xp-ui-button { white-space: nowrap; }
+.xp-content-chip { flex-shrink: 0; display: inline-flex; width: fit-content; border-radius: var(--xp-radius-chip); padding: var(--xp-space-half) var(--xp-space-2); font: var(--xp-text-small); background: var(--xp-surface-2); color: var(--xp-text-2); }
+.xp-content-chip.xp-content-ready { background: var(--xp-success-bg); color: var(--xp-success); }
+.xp-content-chip.xp-content-empty { background: var(--xp-warning-bg); color: var(--xp-warning); }
+.xp-traffic-bar { display: flex; height: var(--xp-space-2); gap: var(--xp-space-half); margin-block: var(--xp-space-5) var(--xp-space-3); overflow: hidden; border-radius: var(--xp-space-1); }
 .xp-traffic-bar > span { display: block; }
-.xp-field { display: flex; flex-direction: column; gap: .5rem; margin-block: 1rem; }
-.xp-field input, .xp-field textarea, .xp-field select { font: inherit; color: var(--xp-text); background: var(--xp-input-bg); border: 1px solid var(--xp-border-control); border-radius: var(--xp-radius); padding: .65rem; }
-.xp-field textarea { min-height: 6rem; resize: vertical; }
-.xp-field input[type=range] { padding: 0; }
+.xp-split-legend { display: flex; flex-wrap: wrap; gap: var(--xp-space-4); font: var(--xp-text-small); color: var(--xp-text-2); }
+.xp-split-legend i { display: inline-block; width: var(--xp-legend-key-size); height: var(--xp-legend-key-size); border-radius: var(--xp-legend-key-radius); margin-right: var(--xp-space-one-half); }
+.xp-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xp-space-4); }
+.xp-test-advanced .xp-field-grid { padding-top: var(--xp-space-4); }
+.xp-field-grid > div { min-width: 0; }
+.xp-field-grid p, .xp-page-binding p { color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-read-only code { font-family: var(--xp-mono); overflow-wrap: anywhere; }
+.xp-ui-checkbox-list { display: flex; flex-wrap: wrap; gap: var(--xp-space-2) var(--xp-space-4); }
+.xp-duration-suggestion { align-items: center; margin-top: var(--xp-space-4); }
 .xp-read-only { padding-block: .5rem; }
 .xp-read-only p { margin-block: .5rem; }
 .xp-field-error { color: var(--xp-error-text); }
-.xp-test-page button { cursor: pointer; color: var(--xp-text); background: var(--xp-surface-raised); border: 1px solid var(--xp-border-control); padding: .65rem 1rem; border-radius: var(--xp-radius); font: inherit; }
-.xp-test-page button:disabled { opacity: .5; cursor: default; }
-.xp-test-page summary { cursor: pointer; padding-block: .75rem; }
-.xp-targeting-row { border-bottom: 1px solid var(--xp-border); padding-bottom: 1rem; }
+
+.xp-targeting-row { display: grid; grid-template-columns: var(--xp-targeting-attribute-width) var(--xp-targeting-comparison-width) minmax(0, 1fr); align-items: start; gap: var(--xp-space-3); border: 1px solid var(--xp-border); border-radius: var(--xp-radius-control); padding: var(--xp-space-4); margin-bottom: var(--xp-space-4); }
+.xp-targeting-row > .xp-ui-button-group, .xp-targeting-row > p { grid-column: 1 / -1; }
+@media (max-width: 720px) {
+  .xp-version-rows { grid-template-columns: minmax(0, 1fr) var(--xp-version-share-width-mobile); }
+  .xp-version-content { flex-wrap: wrap; }
+  .xp-version-remove:empty { display: none; }
+  .xp-version-content, .xp-setting-values, .xp-version-remove { grid-column: 1 / -1; }
+  .xp-version-grid-head > :nth-child(n+3) { display: none; }
+  .xp-targeting-row, .xp-field-grid { grid-template-columns: 1fr; }
+}
+
+.xp-test-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: var(--xp-space-8); }
+.xp-test-content { display: grid; gap: var(--xp-space-8); min-width: 0; max-width: 760px; }
+.xp-test-rail { position: sticky; top: var(--xp-space-6); min-width: 0; }
+.xp-test-rail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--xp-space-1); }
+.xp-test-rail-item { display: flex; align-items: center; gap: var(--xp-space-2); padding: var(--xp-space-2); border-radius: var(--xp-radius-control); color: var(--xp-text-2); text-decoration: none; font: var(--xp-text-small); }
+.xp-test-rail-item:hover, .xp-test-rail-item.is-active { background: var(--xp-surface-2); color: var(--xp-text); }
+.xp-test-rail-item.is-active { font-weight: 600; }
+.xp-test-rail-item--advanced { margin-top: var(--xp-space-3); color: var(--xp-text-3); }
+.xp-test-rail-mark { flex: none; color: var(--xp-text-3); }
+.xp-test-rail-mark--done { color: var(--xp-success); }
+.xp-test-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.xp-test-rail-item:focus-visible, .xp-test-advanced > summary:focus-visible, .xp-test-content h2:focus { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-test-advanced { border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); }
+.xp-test-advanced > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--xp-space-3); padding: var(--xp-space-4) var(--xp-space-5); color: var(--xp-text-2); }
+.xp-test-advanced > summary h2 { margin: 0; font: var(--xp-text-body); }
+.xp-test-advanced[open] > summary { border-bottom: 1px solid var(--xp-border); }
+.xp-test-readiness-bar { position: fixed; bottom: 0; inset-inline: 0; z-index: 20; background: var(--xp-surface); border-top: 1px solid var(--xp-border); }
+.xp-readiness { color: var(--xp-text); background: var(--xp-surface); padding: var(--xp-space-4); border: 1px solid var(--xp-border-strong); border-radius: var(--xp-radius-control); }
+.xp-readiness--ready:not(.xp-readiness--bar) { background: var(--xp-success-bg); }
+.xp-readiness--bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--xp-space-2) var(--xp-space-4); padding-block: var(--xp-space-3); min-height: 64px; border: 0; border-radius: 0; }
+.xp-readiness__state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--xp-space-2); min-width: 0; }
+.xp-readiness__state p, .xp-readiness--bar > p { margin: 0; }
+.xp-readiness__state > p { font-weight: 500; }
+.xp-readiness--bar .xp-save-status, .xp-readiness__separator { color: var(--xp-text-3); font: var(--xp-text-small); }
+.xp-readiness__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xp-space-2); }
+.xp-readiness--bar > .xp-readiness__actions { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; }
+@media (max-width: 960px) {
+  .xp-test-layout { grid-template-columns: minmax(0, 1fr); gap: var(--xp-space-5); }
+  .xp-test-rail { top: 0; z-index: 2; background: var(--xp-bg); padding-block: var(--xp-space-2); border-bottom: 1px solid var(--xp-border); }
+  .xp-test-rail-list { flex-direction: row; overflow-x: auto; }
+  .xp-test-rail-item { white-space: nowrap; }
+  .xp-test-rail-item--advanced { margin-top: 0; }
+  .xp-test-content { max-width: none; }
+  .xp-test-section, .xp-test-advanced { scroll-margin-top: 64px; }
+}
+@media (max-width: 720px) {
+  .xp-readiness--bar { grid-template-columns: minmax(0, 1fr); }
+  /* The sentence wraps under the save state here, so a trailing separator would dangle. */
+  .xp-readiness--bar .xp-readiness__separator { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .xp-readiness--bar > .xp-readiness__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
+}
+
+.xp-ui-checkbox-list > .xp-ui-field:has(input[type="search"]) { flex-basis: 100%; }
+.xp-targeting-row .xp-ui-chips { margin-block: 0; }

package/dist/admin/surface/useTestDocument.d.ts

@@ -17,6 +17,7 @@ export declare function useTestDocument(id: DocId, { apiRoute }: {
     hasUnsaved: boolean;
     loadState: "loading" | "ready" | "forbidden" | "missing" | "error";
     saving: "idle" | "saving" | "saved" | "error";
+    stale: boolean;
     /** Path-specific validation errors; _section is the fallback for a section-wide refusal. */
     errors: Record<string, string>;
 };

package/dist/admin/surface/useTestDocument.js

@@ -1,6 +1,8 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { API_MESSAGES, refusalMessage } from '../copy/common.js';
+import { XP_IF_UPDATED_AT_HEADER } from '../../constants.js';
+import { TEST_PAGE } from '../copy/testPage.js';
 import { changedPatch, editablePatch, payloadFieldErrors } from './testDocument.model.js';
 // Saves outlive their mounted reader. Reopening the same document must wait for its queue.
 const drainingSaves = new Map();
@@ -12,6 +14,7 @@ const initialView = ()=>({
         hasUnsaved: false,
         loadState: 'loading',
         saving: 'idle',
+        stale: false,
         errors: {}
     });
 async function waitForDrain(draining, signal) {
@@ -49,7 +52,7 @@ function clearErrors(errors, patch) {
     return Object.fromEntries(Object.entries(errors).filter(([path])=>!Object.hasOwn(patch, path.split('.')[0])));
 }
 function stage(session, partial) {
-    if (!session.saved || session.reloading || session.view.loadState !== 'ready' || session.controller.signal.aborted) return;
+    if (!session.saved || session.view.stale || session.reloading || session.view.loadState !== 'ready' || session.controller.signal.aborted) return;
     const patch = editablePatch(session.saved.status, partial);
     if (!Object.keys(patch).length) return;
     session.pending = {
@@ -152,11 +155,13 @@ function stage(session, partial) {
             }
             session.publish();
         }
-        async function readDocument() {
+        async function readDocument(forSave = false) {
             const response = await fetch(url, {
                 method: 'GET',
                 credentials: 'include',
-                signal: controller.signal
+                ...forSave ? {} : {
+                    signal: controller.signal
+                }
             });
             if (!response.ok) throw new Error(API_MESSAGES.unreadable);
             const doc = await response.json();
@@ -165,32 +170,55 @@ function stage(session, partial) {
         }
         // Capture each commit now, then diff against the latest server document when its turn arrives.
         function commit() {
-            if (!session.saved || session.reloading || controller.signal.aborted || !Object.keys(session.pending).length) return session.tail;
+            if (!session.saved || session.view.stale || session.reloading || controller.signal.aborted || !Object.keys(session.pending).length) return session.tail;
             const queued = session.pending;
             session.pending = {};
             session.queue.push(queued);
             session.view.saving = 'saving';
             session.publish();
             const step = async ()=>{
+                if (session.view.stale) return;
                 let saved = false;
                 let changed = false;
                 let failed = false;
                 try {
                     if (!session.saved) return;
+                    if (typeof session.saved.updatedAt !== 'string' || !session.saved.updatedAt) {
+                        session.saved = await readDocument(true);
+                        if (typeof session.saved.updatedAt !== 'string' || !session.saved.updatedAt) throw new Error(API_MESSAGES.unreadable);
+                    }
                     const patch = changedPatch(session.saved, queued);
                     changed = Object.keys(patch).length > 0;
                     if (changed) {
+                        const headers = {
+                            'Content-Type': 'application/json'
+                        };
+                        if (typeof session.saved.updatedAt === 'string') headers[XP_IF_UPDATED_AT_HEADER] = session.saved.updatedAt;
                         const response = await fetch(url, {
                             // Submitted saves belong to the queue, not the mounted reader's lifetime.
                             method: 'PATCH',
                             credentials: 'include',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
+                            headers,
                             body: JSON.stringify(patch)
                         });
                         const body = await response.json().catch(()=>undefined);
-                        if (!response.ok) session.view.errors = {
+                        const errors = body?.errors;
+                        const staleError = response.status === 409 && Array.isArray(errors) ? errors.find((error)=>error?.code === 'stale-edit') : undefined;
+                        if (staleError) {
+                            session.view.stale = true;
+                            // Keep every typed value visible, but discard all queued sends until Reload.
+                            session.pending = [
+                                ...session.queue,
+                                session.pending
+                            ].reduce((draft, edit)=>({
+                                    ...draft,
+                                    ...edit
+                                }), {});
+                            session.queue = [];
+                            session.view.errors = {
+                                _section: staleError.message || TEST_PAGE.staleEdit
+                            };
+                        } else if (!response.ok) session.view.errors = {
                             ...session.view.errors,
                             ...payloadFieldErrors(body)
                         };
@@ -199,9 +227,12 @@ function stage(session, partial) {
                             const doc = body?.doc;
                             const readable = doc && doc.id != null && doc.status;
                             // A 2xx has applied even if its response body was lost. Preserve it while re-reading.
+                            // The old timestamp is no longer a valid baseline. The next queued save
+                            // must recover it with a GET before sending another PATCH.
                             session.saved = readable ? doc : {
                                 ...session.saved,
-                                ...patch
+                                ...patch,
+                                updatedAt: undefined
                             };
                             saved = true;
                             // Keep readiness pending even while recovering an unreadable successful PATCH body.

package/dist/admin/targeting/targeting.model.d.ts

@@ -1,6 +1,7 @@
 import type { TargetingRule } from '../../types/contracts.js';
 import type { SerializedAttributeKeys } from '../../types/admin.js';
 import type { TargetingOp } from '../../targeting/ops.js';
+export { readListValue } from '../../targeting/values.js';
 type Attribute = SerializedAttributeKeys[string];
 export type AttributeType = Attribute['type'];
 export declare function opsFor(type?: AttributeType): readonly TargetingOp[];
@@ -13,11 +14,8 @@ export declare function valueInput(attribute?: Attribute, op?: TargetingOp): {
     }[];
 };
 export declare function coerceValue(type: AttributeType, op: TargetingOp, raw: unknown): string | number | boolean | string[] | null;
-/** Only the read boundary accepts legacy comma-separated document values. */
-export declare function readListValue(raw: unknown): string[];
 /** Normalize the read boundary before any whole-group edit. */
 export declare function readTargetingRules(rules: TargetingRule[]): TargetingRule[];
 export declare function rowPath(path: string): string;
 export declare function emptyListHint(op: TargetingOp, value: unknown): string | undefined;
 export declare function humaniseAttribute(key: string): string;
-export {};

package/dist/admin/targeting/targeting.model.js

@@ -1,5 +1,7 @@
 import { TARGETING_OPS, isOpValid } from '../../targeting/ops.js';
+import { coerceListValue, readListValue } from '../../targeting/values.js';
 import { NUMBER_OP_LABELS, STRING_OP_LABELS, AUDIENCE_COPY } from '../copy/audience.js';
+export { readListValue } from '../../targeting/values.js';
 export function opsFor(type) {
     return type ? TARGETING_OPS[type] : [];
 }
@@ -27,11 +29,7 @@ export function valueInput(attribute, op = 'eq') {
 export function coerceValue(type, op, raw) {
     if (!isOpValid(type, op)) return null;
     if (type === 'string') {
-        if (op === 'in' || op === 'nin') return [
-            ...new Set((Array.isArray(raw) ? raw.map(String) : [
-                String(raw ?? '')
-            ]).map((value)=>value.trim()).filter(Boolean))
-        ];
+        if (op === 'in' || op === 'nin') return coerceListValue(raw);
         return raw == null ? '' : String(raw);
     }
     if (type === 'number') {
@@ -41,9 +39,6 @@ export function coerceValue(type, op, raw) {
     }
     return raw === true || raw === 'true' ? true : raw === false || raw === 'false' ? false : null;
 }
-/** Only the read boundary accepts legacy comma-separated document values. */ export function readListValue(raw) {
-    return coerceValue('string', 'in', typeof raw === 'string' ? raw.split(',') : raw);
-}
 /** Normalize the read boundary before any whole-group edit. */ export function readTargetingRules(rules) {
     return rules.map((rule)=>rule.op === 'in' || rule.op === 'nin' ? {
             ...rule,

package/dist/admin/theme.css

@@ -1,44 +1,123 @@
-/* The Payload token boundary. Recompute aliases for either admin theme. */
+/* The only Payload token boundary. Reference: Payload 3.90.2; nearest neutral
+   elevation by RGB distance to the approved mockup, advancing toward the mockup
+   on collision so all five surface steps stay distinct (light / dark):
+   bg 50/0; surface 0/50; surface-2 100/100; surface-3 150/150;
+   accent-subtle 200/200;
+   border 100/100; border-strong 250/200; text 850/800;
+   text-2 650/550; text-3 450/350; accent 800/800; hover 900/900;
+   accent-fg 0/0; focus 800/800; series-muted 300/250.
+   Semantic and series hues are fixed mockup literals; only neutrals use Payload. */
 :root, [data-theme] {
-  --xp-bg: var(--theme-bg);
-  --xp-text: var(--theme-text);
-  --xp-surface: var(--theme-elevation-50);
-  --xp-surface-raised: var(--theme-elevation-100);
-  --xp-border: var(--theme-elevation-150);
-  --xp-border-strong: var(--theme-elevation-200);
+  --xp-bg: var(--theme-elevation-50);
+  --xp-surface: var(--theme-elevation-0);
+  --xp-surface-2: var(--theme-elevation-100);
+  --xp-surface-3: var(--theme-elevation-150);
+  --xp-border: var(--theme-elevation-100);
+  --xp-border-strong: var(--theme-elevation-250);
+  --xp-text: var(--theme-elevation-850);
+  --xp-text-2: var(--theme-elevation-650);
+  --xp-text-3: var(--theme-elevation-450);
+  --xp-accent: var(--theme-elevation-800);
+  --xp-accent-hover: var(--theme-elevation-900);
+  --xp-accent-active: var(--theme-elevation-950);
+  --xp-accent-subtle: var(--theme-elevation-200);
+  --xp-accent-fg: var(--theme-elevation-0);
+  --xp-accent-text: var(--xp-text);
+  --xp-accent-text-decoration: none;
+  --xp-focus: var(--theme-elevation-800);
+  --xp-series-muted: var(--theme-elevation-300);
+  --xp-success: #1a6a3a;
+  --xp-success-bg: #e8f4ec;
+  --xp-success-border: #bddfc9;
+  --xp-warning: #8a5a0b;
+  --xp-warning-bg: #fbf3e1;
+  --xp-warning-border: #ecd6a2;
+  --xp-error: #a63030;
+  --xp-error-bg: #fbeaea;
+  --xp-error-border: #efc3c3;
+  --xp-series-a: #2a78d6;
+  --xp-series-b: #eb6834;
+  --xp-series-c: #8056b3;
+  --xp-radius-control: 8px;
+  --xp-radius-card: 12px;
+  --xp-radius-chip: 6px;
+  --xp-font: var(--font-body);
+  --xp-mono: var(--font-mono);
+  --xp-text-display: 600 28px/32px var(--xp-font);
+  --xp-text-title: 600 20px/28px var(--xp-font);
+  --xp-text-body: 400 15px/22px var(--xp-font);
+  --xp-text-small: 400 13px/18px var(--xp-font);
+  --xp-motion: 120ms;
+  --xp-space-half: 2px;
+  --xp-space-one-half: 6px;
+  --xp-version-share-width: 96px;
+  --xp-version-share-width-mobile: 84px;
+  --xp-version-state-width: 192px;
+  --xp-version-remove-width: 128px;
+  --xp-targeting-attribute-width: 150px;
+  --xp-targeting-comparison-width: 140px;
+  --xp-legend-key-size: 10px;
+  --xp-legend-key-radius: 3px;
+  --xp-space-1: 4px;
+  --xp-space-2: 8px;
+  --xp-space-3: 12px;
+  --xp-space-4: 16px;
+  --xp-space-5: 20px;
+  --xp-space-6: 24px;
+  --xp-space-7: 28px;
+  --xp-space-8: 32px;
+  --xp-surface-raised: var(--xp-surface-2);
   --xp-border-control: var(--theme-elevation-250);
   --xp-input-border: var(--theme-elevation-300);
   --xp-border-accent: var(--theme-elevation-400);
-  --xp-accent: var(--theme-elevation-500);
-  --xp-text-muted: var(--theme-elevation-600);
-  --xp-text-strong: var(--theme-elevation-800);
-  --xp-text-emphasis: var(--theme-elevation-900);
+  --xp-text-muted: var(--xp-text-2);
+  --xp-text-strong: var(--xp-text);
+  --xp-text-emphasis: var(--xp-text);
   --xp-input-bg: var(--theme-input-bg);
   --xp-overlay: var(--theme-overlay);
-  --xp-success-surface: var(--theme-success-100);
-  --xp-success-bg: var(--theme-success-150);
-  --xp-success: var(--theme-success-500);
-  --xp-success-text: var(--theme-success-600);
-  --xp-success-text-strong: var(--theme-success-850);
-  --xp-warning-surface: var(--theme-warning-100);
-  --xp-warning-bg: var(--theme-warning-150);
-  --xp-warning: var(--theme-warning-500);
-  --xp-warning-text: var(--theme-warning-600);
-  --xp-warning-text-strong: var(--theme-warning-850);
-  --xp-error-surface: var(--theme-error-100);
-  --xp-error: var(--theme-error-500);
-  --xp-error-text: var(--theme-error-600);
-  --xp-radius: var(--style-radius-s);
-  --xp-radius-large: var(--style-radius-m);
-  --xp-space-1: calc(var(--base) * 0.25);
-  --xp-space-2: calc(var(--base) * 0.5);
-  --xp-space-3: calc(var(--base) * 0.75);
-  --xp-space-4: calc(var(--base) * 1);
-  --xp-space-5: calc(var(--base) * 1.5);
-  --xp-space-6: calc(var(--base) * 2);
+  --xp-success-surface: var(--xp-success-bg);
+  --xp-success-text: var(--xp-success);
+  --xp-success-text-strong: var(--xp-success);
+  --xp-warning-surface: var(--xp-warning-bg);
+  --xp-warning-text: var(--xp-warning);
+  --xp-warning-text-strong: var(--xp-warning);
+  --xp-error-surface: var(--xp-error-bg);
+  --xp-error-text: var(--xp-error);
+  --xp-radius: var(--xp-radius-control);
+  --xp-radius-large: var(--xp-radius-card);
   --xp-dash-card-gap: 12px;
-  --xp-dash-card-gap-small: calc(var(--base) * 0.4);
-  --xp-font-body: var(--font-body);
-  --xp-font-size-small: calc(var(--base) * 0.65);
-  --xp-font-size-body: calc(var(--base) * 0.75);
+  --xp-dash-card-gap-small: 8px;
+  --xp-font-body: var(--xp-font);
+  --xp-font-size-small: 13px;
+  --xp-font-size-body: 15px;
+}
+[data-theme="dark"] {
+  --xp-bg: var(--theme-elevation-0);
+  --xp-surface: var(--theme-elevation-50);
+  --xp-surface-2: var(--theme-elevation-100);
+  --xp-surface-3: var(--theme-elevation-150);
+  --xp-border: var(--theme-elevation-100);
+  --xp-border-strong: var(--theme-elevation-200);
+  --xp-text: var(--theme-elevation-800);
+  --xp-text-2: var(--theme-elevation-550);
+  --xp-text-3: var(--theme-elevation-350);
+  --xp-accent: var(--theme-elevation-800);
+  --xp-accent-hover: var(--theme-elevation-900);
+  --xp-accent-active: var(--theme-elevation-1000);
+  --xp-accent-subtle: var(--theme-elevation-200);
+  --xp-accent-fg: var(--theme-elevation-0);
+  --xp-focus: var(--theme-elevation-800);
+  --xp-series-muted: var(--theme-elevation-250);
+  --xp-success: #7fd49c;
+  --xp-success-bg: #142b1d;
+  --xp-success-border: #23492f;
+  --xp-warning: #e7bd5c;
+  --xp-warning-bg: #2b2312;
+  --xp-warning-border: #4d3d17;
+  --xp-error: #f09494;
+  --xp-error-bg: #2f1717;
+  --xp-error-border: #5a2626;
+  --xp-series-a: #3987e5;
+  --xp-series-b: #d95926;
+  --xp-series-c: #b48ade;
 }

package/dist/admin/theme.d.ts

@@ -1,9 +1,33 @@
+/** Host accent rules (reference surfaces are defined by theme.css):
+ * (i) Foreground on accent, hover and active fills reaches 4.5:1 in both themes.
+ * (ii) Accent text moves toward the surface's opposite to reach 4.5:1; if the
+ * bounded search fails, use the neutral text token and underline it.
+ * (iii) Focus reaches 3:1 against the surface: darken on light, lighten on dark.
+ */
+export { deriveAccent } from '../ui/accent.js';
 /** every Payload token reference lives in theme.css; porting to Payload 4 edits that file only */
 export declare const theme: {
     readonly color: {
         readonly bg: "var(--xp-bg)";
         readonly text: "var(--xp-text)";
         readonly surface: "var(--xp-surface)";
+        readonly surface2: "var(--xp-surface-2)";
+        readonly surface3: "var(--xp-surface-3)";
+        readonly text2: "var(--xp-text-2)";
+        readonly text3: "var(--xp-text-3)";
+        readonly accentHover: "var(--xp-accent-hover)";
+        readonly accentActive: "var(--xp-accent-active)";
+        readonly accentText: "var(--xp-accent-text)";
+        readonly accentSubtle: "var(--xp-accent-subtle)";
+        readonly accentFg: "var(--xp-accent-fg)";
+        readonly focus: "var(--xp-focus)";
+        readonly successBorder: "var(--xp-success-border)";
+        readonly warningBorder: "var(--xp-warning-border)";
+        readonly errorBg: "var(--xp-error-bg)";
+        readonly errorBorder: "var(--xp-error-border)";
+        readonly seriesA: "var(--xp-series-a)";
+        readonly seriesB: "var(--xp-series-b)";
+        readonly seriesMuted: "var(--xp-series-muted)";
         readonly surfaceRaised: "var(--xp-surface-raised)";
         readonly border: "var(--xp-border)";
         readonly borderStrong: "var(--xp-border-strong)";
@@ -30,7 +54,17 @@ export declare const theme: {
         readonly error: "var(--xp-error)";
         readonly errorText: "var(--xp-error-text)";
     };
+    readonly motion: "var(--xp-motion)";
+    readonly type: {
+        readonly display: "var(--xp-text-display)";
+        readonly title: "var(--xp-text-title)";
+        readonly body: "var(--xp-text-body)";
+        readonly small: "var(--xp-text-small)";
+    };
     readonly radius: {
+        readonly control: "var(--xp-radius-control)";
+        readonly card: "var(--xp-radius-card)";
+        readonly chip: "var(--xp-radius-chip)";
         readonly small: "var(--xp-radius)";
         readonly large: "var(--xp-radius-large)";
     };
@@ -41,8 +75,12 @@ export declare const theme: {
         readonly 4: "var(--xp-space-4)";
         readonly 5: "var(--xp-space-5)";
         readonly 6: "var(--xp-space-6)";
+        readonly 7: "var(--xp-space-7)";
+        readonly 8: "var(--xp-space-8)";
     };
     readonly font: {
+        readonly mono: "var(--xp-mono)";
+        readonly family: "var(--xp-font)";
         readonly body: "var(--xp-font-body)";
         readonly small: "var(--xp-font-size-small)";
         readonly size: "var(--xp-font-size-body)";

package/dist/admin/theme.js

@@ -1,8 +1,31 @@
+/** Host accent rules (reference surfaces are defined by theme.css):
+ * (i) Foreground on accent, hover and active fills reaches 4.5:1 in both themes.
+ * (ii) Accent text moves toward the surface's opposite to reach 4.5:1; if the
+ * bounded search fails, use the neutral text token and underline it.
+ * (iii) Focus reaches 3:1 against the surface: darken on light, lighten on dark.
+ */ export { deriveAccent } from '../ui/accent.js';
 /** every Payload token reference lives in theme.css; porting to Payload 4 edits that file only */ export const theme = {
     color: {
         bg: 'var(--xp-bg)',
         text: 'var(--xp-text)',
         surface: 'var(--xp-surface)',
+        surface2: 'var(--xp-surface-2)',
+        surface3: 'var(--xp-surface-3)',
+        text2: 'var(--xp-text-2)',
+        text3: 'var(--xp-text-3)',
+        accentHover: 'var(--xp-accent-hover)',
+        accentActive: 'var(--xp-accent-active)',
+        accentText: 'var(--xp-accent-text)',
+        accentSubtle: 'var(--xp-accent-subtle)',
+        accentFg: 'var(--xp-accent-fg)',
+        focus: 'var(--xp-focus)',
+        successBorder: 'var(--xp-success-border)',
+        warningBorder: 'var(--xp-warning-border)',
+        errorBg: 'var(--xp-error-bg)',
+        errorBorder: 'var(--xp-error-border)',
+        seriesA: 'var(--xp-series-a)',
+        seriesB: 'var(--xp-series-b)',
+        seriesMuted: 'var(--xp-series-muted)',
         surfaceRaised: 'var(--xp-surface-raised)',
         border: 'var(--xp-border)',
         borderStrong: 'var(--xp-border-strong)',
@@ -29,7 +52,17 @@
         error: 'var(--xp-error)',
         errorText: 'var(--xp-error-text)'
     },
+    motion: 'var(--xp-motion)',
+    type: {
+        display: 'var(--xp-text-display)',
+        title: 'var(--xp-text-title)',
+        body: 'var(--xp-text-body)',
+        small: 'var(--xp-text-small)'
+    },
     radius: {
+        control: 'var(--xp-radius-control)',
+        card: 'var(--xp-radius-card)',
+        chip: 'var(--xp-radius-chip)',
         small: 'var(--xp-radius)',
         large: 'var(--xp-radius-large)'
     },
@@ -39,9 +72,13 @@
         3: 'var(--xp-space-3)',
         4: 'var(--xp-space-4)',
         5: 'var(--xp-space-5)',
-        6: 'var(--xp-space-6)'
+        6: 'var(--xp-space-6)',
+        7: 'var(--xp-space-7)',
+        8: 'var(--xp-space-8)'
     },
     font: {
+        mono: 'var(--xp-mono)',
+        family: 'var(--xp-font)',
         body: 'var(--xp-font-body)',
         small: 'var(--xp-font-size-small)',
         size: 'var(--xp-font-size-body)'

package/dist/admin/useApi.d.ts

@@ -1,17 +1,32 @@
 export declare function useApi(): {
     start: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
-    allocate: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").AllocateBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
-    addMetric: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").AddMetricBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    allocate: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").AllocateBody, options?: {
+        notFound?: string;
+        codes?: Readonly<Record<string, string>>;
+        fallback?: string;
+    }) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    addMetric: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").AddMetricBody, options?: {
+        notFound?: string;
+        codes?: Readonly<Record<string, string>>;
+        fallback?: string;
+    }) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
     stop: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
     decide: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").DecideBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
     releaseHoldout: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    releasePages: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
     makeContent: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").MakeContentResult>>;
+    dismissContentEntry: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").DismissContentEntryBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").DismissContentEntryResult>>;
+    restoreContentEntry: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").RestoreContentEntryBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").RestoreContentEntryResult>>;
     archive: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").ArchiveBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
     preflight: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").PreflightResult>>;
     previewToken: (id: import("../types/contracts.js").DocId, arm: string) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").PreviewTokenResult>>;
     results: (id: import("../types/contracts.js").DocId, options?: {
         phase?: number;
         series?: boolean;
+    } & {
+        notFound?: string;
+        codes?: Readonly<Record<string, string>>;
+        fallback?: string;
     }) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").ResultsResponse>>;
     recompute: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<{
         snapshotId: string;

package/dist/admin/views/ExperimentsRootView.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { accentStyles } from '../../ui/accent.js';
 import { formatAdminURL } from 'payload/shared';
 import { notFound, redirect } from 'next/navigation.js';
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
@@ -166,10 +167,19 @@ export async function ExperimentsRootView({ initPageResult, params, searchParams
             children: SURFACE_COPY.notInstalled
         });
     }
-    return RenderServerComponent({
+    const css = accentStyles(options.theme?.accent);
+    const surface = RenderServerComponent({
         Component: XP_TESTS_SURFACE,
         Fallback: TestsSurfaceFallback,
         importMap: req.payload.importMap,
         clientProps
     });
+    return css ? /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("style", {
+                children: css
+            }),
+            surface
+        ]
+    }) : surface;
 }