@delmaredigital/payload-experiments 0.2.0-rc.2 → 0.2.0-rc.4

package/dist/admin/surface/goals/data.d.ts

@@ -0,0 +1,3 @@
+/** REST refusals remain the server's words, including nested field validation errors. */
+export declare function goalResponse(response: Response, fallback: string): Promise<unknown>;
+export declare function goalPages<T>(base: string, collection: 'xp-metrics' | 'xp-experiments', signal: AbortSignal): Promise<T[]>;

package/dist/admin/surface/goals/data.js

@@ -0,0 +1,24 @@
+import { GOALS_COPY as C } from '../../copy/goals.js';
+import { payloadFieldErrors } from '../testDocument.model.js';
+/** REST refusals remain the server's words, including nested field validation errors. */ export async function goalResponse(response, fallback) {
+    const body = await response.json().catch(()=>undefined);
+    if (!response.ok) {
+        const messages = Object.values(payloadFieldErrors(body, '_section', fallback));
+        throw new Error(messages.length ? messages.join(' ') : fallback);
+    }
+    if (body == null) throw new Error(fallback);
+    return body;
+}
+export async function goalPages(base, collection, signal) {
+    const all = [];
+    for(let page = 1;; page++){
+        const response = await fetch(`${base}/${collection}?depth=0&limit=100&page=${page}`, {
+            credentials: 'include',
+            signal
+        });
+        const body = await goalResponse(response, C.loadError);
+        if (!Array.isArray(body.docs)) throw new Error(C.loadError);
+        all.push(...body.docs);
+        if (!body.hasNextPage) return all;
+    }
+}

package/dist/admin/surface/goals/goals.css

@@ -0,0 +1,15 @@
+.xp-goals { display: grid; gap: var(--xp-space-4); }
+.xp-goals-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--xp-space-2); align-items: center; }
+.xp-goals-table { overflow-x: auto; }
+.xp-goals-table table { width: 100%; border-collapse: collapse; text-align: left; }
+.xp-goals-table th, .xp-goals-table td { padding: var(--xp-space-3); border-bottom: 1px solid var(--xp-border); }
+.xp-goal-form { max-width: 48rem; display: grid; gap: var(--xp-space-4); }
+.xp-goal-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--xp-space-3); }
+.xp-goal-form .xp-field { display: grid; gap: var(--xp-space-2); }
+.xp-goal-form input, .xp-goal-form select {
+  padding: var(--xp-space-3); color: var(--xp-text); background: var(--xp-input-bg); border: 1px solid var(--xp-input-border);
+}
+.xp-goal-form input[readonly] { background: var(--xp-surface); }
+.xp-goal-form details { padding: var(--xp-space-4); border: 1px solid var(--xp-border); }
+.xp-goal-form summary { cursor: pointer; margin-bottom: var(--xp-space-3); }
+.xp-goal-cancel { padding: var(--xp-space-2) var(--xp-space-4); color: var(--xp-text); }

package/dist/admin/surface/goals/goals.model.d.ts

@@ -0,0 +1,30 @@
+import type { DocId } from '../../../types/contracts.js';
+export interface Goal {
+    id: DocId;
+    name: string;
+    slug: string;
+    source: string;
+    direction: 'increase' | 'decrease';
+    attributionWindowHours?: number | null;
+    minSampleSize?: number | null;
+    guardrailThreshold?: number | null;
+    capping?: {
+        type?: 'percentile' | 'absolute' | null;
+        value?: number | null;
+    } | null;
+}
+type Reference = DocId | {
+    id: DocId;
+} | null;
+export interface GoalUsageTest {
+    id: DocId;
+    metrics?: {
+        primary?: Reference;
+        secondary?: Reference[] | null;
+        guardrails?: Reference[] | null;
+    } | null;
+}
+/** Count each experiment once per goal, retaining the API's id types. */
+export declare function goalUsage(tests: readonly GoalUsageTest[]): Map<DocId, number>;
+export declare function goalSlug(name: string): string;
+export {};

package/dist/admin/surface/goals/goals.model.js

@@ -0,0 +1,26 @@
+/** Count each experiment once per goal, retaining the API's id types. */ export function goalUsage(tests) {
+    const byGoal = new Map();
+    for (const test of tests){
+        const references = [
+            test.metrics?.primary,
+            ...test.metrics?.secondary ?? [],
+            ...test.metrics?.guardrails ?? []
+        ];
+        for (const reference of references){
+            const id = reference && typeof reference === 'object' ? reference.id : reference;
+            if (id == null) continue;
+            const used = byGoal.get(id) ?? new Set();
+            used.add(test.id);
+            byGoal.set(id, used);
+        }
+    }
+    return new Map([
+        ...byGoal
+    ].map(([id, tests])=>[
+            id,
+            tests.size
+        ]));
+}
+export function goalSlug(name) {
+    return name.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}

package/dist/admin/surface/newTest/newTest.css

@@ -1,9 +1,9 @@
-.xp-new-test { max-width: 60rem; padding: var(--base); color: var(--theme-text); }
-.xp-new-test-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--base); }
-.xp-new-test-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border: 1px solid var(--theme-elevation-200); border-radius: .5rem; background: var(--theme-elevation-50); color: var(--theme-text); text-align: left; cursor: pointer; font: inherit; }
+.xp-new-test { max-width: 60rem; padding: var(--xp-space-4); color: var(--xp-text); }
+.xp-new-test-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--xp-space-4); }
+.xp-new-test-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border: 1px solid var(--xp-border-strong); border-radius: .5rem; background: var(--xp-surface); color: var(--xp-text); text-align: left; cursor: pointer; font: inherit; }
 .xp-new-test-card strong { font-size: 1.25rem; }
-.xp-new-test-card:hover { background: var(--theme-elevation-100); }
+.xp-new-test-card:hover { background: var(--xp-surface-raised); }
 .xp-new-test label { display: block; margin-block: .75rem; }
-.xp-new-test input:not([type=radio]), .xp-new-test textarea, .xp-new-test select { display: block; width: 100%; max-width: 36rem; padding: .5rem; color: var(--theme-text); background: var(--theme-input-bg); border: 1px solid var(--theme-elevation-300); font: inherit; }
+.xp-new-test input:not([type=radio]), .xp-new-test textarea, .xp-new-test select { display: block; width: 100%; max-width: 36rem; padding: .5rem; color: var(--xp-text); background: var(--xp-input-bg); border: 1px solid var(--xp-input-border); font: inherit; }
 .xp-new-test-choice span { display: block; margin-left: 1.5rem; }
-.xp-new-test-actions { display: flex; gap: 1rem; margin-top: var(--base); }
+.xp-new-test-actions { display: flex; gap: 1rem; margin-top: var(--xp-space-4); }

package/dist/admin/surface/readiness/Banner.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../../theme.js';
 import { useEffect, useState } from 'react';
 import { Button } from '@payloadcms/ui';
 import { actionGroupLabel, availableActions } from '../../actions/actions.model.js';
@@ -72,10 +73,10 @@ function BannerContent({ test, surface }) {
         className: `xp-readiness xp-readiness--${setup && ready ? 'ready' : 'neutral'}`,
         style: {
             padding: '1rem',
-            border: '1px solid var(--theme-elevation-200)',
-            borderRadius: 'var(--style-radius-s)',
-            background: setup && ready ? 'var(--theme-success-100)' : 'var(--theme-elevation-50)',
-            color: 'var(--theme-text)'
+            border: `1px solid ${theme.color.borderStrong}`,
+            borderRadius: theme.radius.small,
+            background: setup && ready ? theme.color.successSurface : theme.color.surface,
+            color: theme.color.text
         },
         children: [
             /*#__PURE__*/ _jsx("p", {

package/dist/admin/surface/results/ResultsBody.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { theme } from '../../theme.js';
 import '../../styles.js';
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '@payloadcms/ui';
@@ -106,7 +107,7 @@ function ResultsContent({ id, surface }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-results",
         style: {
-            color: 'var(--theme-text)'
+            color: theme.color.text
         },
         children: [
             phases.length > 0 ? /*#__PURE__*/ _jsxs("label", {
@@ -148,7 +149,7 @@ function ResultsContent({ id, surface }) {
                 children: [
                     /*#__PURE__*/ _jsxs("div", {
                         style: {
-                            background: 'var(--theme-elevation-50)',
+                            background: theme.color.surface,
                             paddingTop: '1rem'
                         },
                         children: [

package/dist/admin/surface/setting/setting.css

@@ -5,14 +5,14 @@
   width: 100%;
   padding: 0.65rem;
   margin-top: 0.4rem;
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-s);
-  background: var(--theme-input-bg);
-  color: var(--theme-text);
+  border: 1px solid var(--xp-border);
+  border-radius: var(--xp-radius);
+  background: var(--xp-input-bg);
+  color: var(--xp-text);
 }
 .xp-setting-values { display: grid; gap: 1rem; }
 .xp-setting-value { white-space: pre-wrap; }
-.xp-setting-lock { color: var(--theme-elevation-600); }
+.xp-setting-lock { color: var(--xp-text-muted); }
 .xp-setting-parameter fieldset { border: 0; padding: 0; margin: 0; }
 .xp-setting-segments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
 .xp-setting-segments label { position: relative; }
@@ -20,10 +20,10 @@
 .xp-setting-segments span {
   display: block;
   padding: 0.5rem 0.8rem;
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-s);
-  background: var(--theme-input-bg);
-  color: var(--theme-text);
+  border: 1px solid var(--xp-border);
+  border-radius: var(--xp-radius);
+  background: var(--xp-input-bg);
+  color: var(--xp-text);
 }
-.xp-setting-segments input:checked + span { background: var(--theme-elevation-150); border-color: var(--theme-text); }
-.xp-setting-segments input:focus-visible + span { outline: 2px solid var(--theme-text); outline-offset: 2px; }
+.xp-setting-segments input:checked + span { background: var(--xp-border); border-color: var(--xp-text); }
+.xp-setting-segments input:focus-visible + span { outline: 2px solid var(--xp-text); outline-offset: 2px; }

package/dist/admin/surface/surface.css

@@ -1,50 +1,50 @@
 .xp-tests-surface {
   min-height: 100dvh;
   width: 100%;
-  color: var(--theme-text);
-  background: var(--theme-bg);
+  color: var(--xp-text);
+  background: var(--xp-bg);
 }
 .xp-tests-shell-header {
   display: flex;
   align-items: center;
-  gap: var(--base);
-  padding: calc(var(--base) * 1.5) calc(var(--base) * 2);
-  border-bottom: 1px solid var(--theme-elevation-150);
+  gap: var(--xp-space-4);
+  padding: var(--xp-space-5) var(--xp-space-6);
+  border-bottom: 1px solid var(--xp-border);
 }
-.xp-tests-main { padding: calc(var(--base) * 2); }
-.xp-tests-surface a { color: var(--theme-text); }
+.xp-tests-main { padding: var(--xp-space-6); }
+.xp-tests-surface a { color: var(--xp-text); }
 .xp-tests-toolbar, .xp-tests-card-heading {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--base);
+  gap: var(--xp-space-4);
 }
-.xp-tests-toolbar { margin-bottom: calc(var(--base) * 2); }
+.xp-tests-toolbar { margin-bottom: var(--xp-space-6); }
 .xp-tests-toolbar h1 { margin: 0; margin-right: auto; }
-.xp-tests-toolbar label { display: grid; gap: calc(var(--base) / 4); }
+.xp-tests-toolbar label { display: grid; gap: var(--xp-space-1); }
 .xp-tests-toolbar input, .xp-tests-surface button {
-  color: var(--theme-text);
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-elevation-300);
-  border-radius: var(--style-radius-s);
-  padding: calc(var(--base) / 2);
+  color: var(--xp-text);
+  background: var(--xp-input-bg);
+  border: 1px solid var(--xp-input-border);
+  border-radius: var(--xp-radius);
+  padding: var(--xp-space-2);
 }
 .xp-tests-primary {
-  padding: calc(var(--base) / 2) var(--base);
-  border: 1px solid var(--theme-elevation-500);
-  border-radius: var(--style-radius-s);
+  padding: var(--xp-space-2) var(--xp-space-4);
+  border: 1px solid var(--xp-accent);
+  border-radius: var(--xp-radius);
 }
-.xp-tests-group { margin-bottom: calc(var(--base) * 2); }
-.xp-tests-group summary { cursor: pointer; padding: var(--base) 0; }
-.xp-tests-cards { display: grid; gap: var(--base); }
+.xp-tests-group { margin-bottom: var(--xp-space-6); }
+.xp-tests-group summary { cursor: pointer; padding: var(--xp-space-4) 0; }
+.xp-tests-cards { display: grid; gap: var(--xp-space-4); }
 .xp-tests-card {
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-m);
-  padding: calc(var(--base) * 1.5);
-  background: var(--theme-elevation-50);
+  border: 1px solid var(--xp-border);
+  border-radius: var(--xp-radius-large);
+  padding: var(--xp-space-5);
+  background: var(--xp-surface);
 }
 .xp-tests-card h3 { margin: 0; margin-right: auto; }
-.xp-tests-health { width: calc(var(--base) / 2); height: calc(var(--base) / 2); border-radius: 50%; }
-.xp-tests-health--red { background: var(--theme-error-500); }
-.xp-tests-health--amber { background: var(--theme-warning-500); }
-.xp-tests-health--green { background: var(--theme-success-500); }
+.xp-tests-health { width: var(--xp-space-2); height: var(--xp-space-2); border-radius: 50%; }
+.xp-tests-health--red { background: var(--xp-error); }
+.xp-tests-health--amber { background: var(--xp-warning); }
+.xp-tests-health--green { background: var(--xp-success); }

package/dist/admin/surface/test/GoalSection.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { formatAdminURL } from 'payload/shared';
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 import { metricSourceOptions } from '../../metricSource.model.js';
 import { reviewView } from '../../review/review.model.js';
@@ -46,6 +47,31 @@ export function GoalSection({ test, surface }) {
     ]);
     const doc = test.doc;
     const reason = reasonFor(test, 'metrics');
+    useEffect(()=>{
+        if (!loaded) return;
+        const url = new URL(window.location.href);
+        const goalId = url.searchParams.get('goal');
+        if (goalId == null) return;
+        url.searchParams.delete('goal');
+        window.history.replaceState(window.history.state, '', `${url.pathname}${url.search}${url.hash}`);
+        const goal = metrics.find((metric)=>String(metric.id) === goalId);
+        if (!reason && doc.metrics?.primary == null && goal) {
+            save(test, 'metrics', ()=>({
+                    metrics: {
+                        ...doc.metrics,
+                        primary: goal.id,
+                        guardrails: doc.metrics?.guardrails?.filter((id)=>id !== goal.id),
+                        secondary: doc.metrics?.secondary?.filter((id)=>id !== goal.id)
+                    }
+                }));
+        }
+    }, [
+        loaded,
+        metrics,
+        reason,
+        doc.metrics,
+        test
+    ]);
     const sources = metricSourceOptions(surface.metricSources);
     const unknownGoal = loaded ? C.missingGoal : C.goalUnavailable;
     const options = metrics.map((metric)=>({
@@ -149,7 +175,12 @@ export function GoalSection({ test, surface }) {
                 children: C.goalHelp
             }),
             /*#__PURE__*/ _jsx("a", {
-                href: `${surface.adminRoute}/collections/xp-metrics`,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: `/experiments/goals${!reason ? `?${new URLSearchParams({
+                        return: String(doc.id)
+                    })}` : ''}`
+                }),
                 children: C.manageGoals
             }),
             /*#__PURE__*/ _jsx(FieldErrors, {

package/dist/admin/surface/test/TargetingSection.js

@@ -1,15 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { coerceValue, emptyListHint, humaniseAttribute, opLabel, opsFor, valueInput } from '../../targeting/targeting.model.js';
+import { useId, useState } from 'react';
+import { ChipsInput } from '../../components/ChipsInput.js';
+import { AUDIENCE_COPY } from '../../copy/audience.js';
+import { coerceValue, emptyListHint, humaniseAttribute, opLabel, opsFor, readListValue, readTargetingRules, valueInput } from '../../targeting/targeting.model.js';
 import { TEST_PAGE as C, NUMBER_COMPARISONS } from '../../copy/testPage.js';
 import { CheckboxList, FieldErrors, reasonFor, save, SelectEdit, TextEdit } from './fields.js';
 import { Section } from './Section.js';
 export function TargetingSection({ test, surface }) {
+    const id = useId();
     const doc = test.doc;
-    const rules = doc.targeting ?? [];
+    const rules = readTargetingRules(doc.targeting ?? []);
+    // Removing a row invalidates index-based drafts, including unfinished chip text.
+    const [rowsRevision, setRowsRevision] = useState(0);
     const reason = reasonFor(test, 'targeting');
     const update = (transform)=>save(test, 'targeting', ()=>({
-                targeting: transform(test.doc.targeting ?? [])
+                targeting: transform(readTargetingRules(test.doc.targeting ?? []))
             }));
     const keys = Object.keys(surface.attributeKeys);
     return /*#__PURE__*/ _jsx(Section, {
@@ -73,20 +79,20 @@ export function TargetingSection({ test, surface }) {
                                     })),
                                 onCommit: (value)=>{
                                     const op = value;
+                                    const current = readTargetingRules(test.doc.targeting ?? [])[index];
                                     setRule({
                                         op,
-                                        value: coerceValue(attribute.type, op, test.doc.targeting?.[index]?.value) ?? ''
+                                        value: coerceValue(attribute.type, op, current?.value) ?? ''
                                     });
                                 }
                             }),
                             input.kind === 'multiselect' ? /*#__PURE__*/ _jsx(CheckboxList, {
                                 label: C.value,
                                 reason: reason,
-                                value: Array.isArray(rule.value) ? rule.value.map(String) : [],
+                                value: readListValue(rule.value),
                                 options: input.options ?? [],
                                 onToggle: (value, checked)=>{
-                                    const current = test.doc.targeting?.[index]?.value;
-                                    const values = Array.isArray(current) ? current.map(String) : [];
+                                    const values = readListValue(test.doc.targeting?.[index]?.value);
                                     changeValue(checked ? [
                                         ...new Set([
                                             ...values,
@@ -94,7 +100,15 @@ export function TargetingSection({ test, surface }) {
                                         ])
                                     ] : values.filter((saved)=>saved !== value));
                                 }
-                            }) : input.kind === 'select' ? /*#__PURE__*/ _jsx(SelectEdit, {
+                            }) : input.kind === 'chips' ? /*#__PURE__*/ _jsx(ChipsInput, {
+                                id: `${id}-${index}-value`,
+                                label: C.value,
+                                value: readListValue(rule.value),
+                                disabled: Boolean(reason),
+                                description: reason ?? AUDIENCE_COPY.listDescription,
+                                placeholder: AUDIENCE_COPY.listPlaceholder,
+                                onChange: changeValue
+                            }, `${rule.attribute}-${rule.op}`) : input.kind === 'select' ? /*#__PURE__*/ _jsx(SelectEdit, {
                                 label: C.value,
                                 reason: reason,
                                 value: String(rule.value),
@@ -131,11 +145,14 @@ export function TargetingSection({ test, surface }) {
                             }),
                             !reason ? /*#__PURE__*/ _jsx("button", {
                                 type: "button",
-                                onClick: ()=>update((current)=>current.filter((_, i)=>i !== index)),
+                                onClick: ()=>{
+                                    setRowsRevision((revision)=>revision + 1);
+                                    update((current)=>current.filter((_, i)=>i !== index));
+                                },
                                 children: C.removeRule
                             }) : null
                         ]
-                    }, index);
+                    }, `${rowsRevision}-${index}`);
                 }),
                 !reason ? /*#__PURE__*/ _jsx("button", {
                     type: "button",

package/dist/admin/surface/test/VersionsSection.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { theme } from '../../theme.js';
 import { useEffect, useRef, useState } from 'react';
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 import { ARMS_COPY, GROUP_LABELS, issueMessage } from '../../copy/arms.js';
@@ -9,11 +10,11 @@ import { balanceWeight, orderedVersions, trafficShares } from './testPage.model.
 import { FieldErrors, ReadOnly, reasonFor, save, TextEdit } from './fields.js';
 import { Section } from './Section.js';
 const COLOURS = [
-    'var(--theme-success-500)',
-    'var(--theme-elevation-500)',
-    'var(--theme-warning-500)',
-    'var(--theme-error-500)',
-    'var(--theme-elevation-300)'
+    theme.color.success,
+    theme.color.accent,
+    theme.color.warning,
+    theme.color.error,
+    theme.color.inputBorder
 ];
 export function VersionsSection({ test, surface, parts }) {
     const doc = test.doc;

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

@@ -1,23 +1,23 @@
-.xp-test-page { color: var(--theme-text); background: var(--theme-bg); max-width: 90rem; margin: 0 auto; padding: 1.5rem; }
-.xp-test-header { position: sticky; top: 0; z-index: 10; background: var(--theme-bg); padding: 1rem 0; border-bottom: 1px solid var(--theme-elevation-150); }
+.xp-test-page { color: var(--xp-text); background: var(--xp-bg); max-width: 90rem; margin: 0 auto; padding: 1.5rem; }
+.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(--theme-elevation-250); border-radius: 1rem; padding: .25rem .75rem; }
-.xp-status-pill--success, .xp-content-ready, .xp-section-check--done { color: var(--theme-success-600); }
-.xp-content-empty, .xp-status-pill--warning { color: var(--theme-warning-600); }
-.xp-test-section { padding-block: 1.5rem; border-bottom: 1px solid var(--theme-elevation-150); scroll-margin-top: 15rem; }
+.xp-kind-chip, .xp-status-pill { border: 1px solid var(--xp-border-control); 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(--theme-elevation-150); border-radius: var(--style-radius-s); padding: 1rem; }
+.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(--theme-elevation-100); margin-block: 1.5rem; overflow: hidden; border-radius: var(--style-radius-s); }
+.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-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(--theme-text); background: var(--theme-input-bg); border: 1px solid var(--theme-elevation-250); border-radius: var(--style-radius-s); padding: .65rem; }
+.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-read-only { padding-block: .5rem; }
 .xp-read-only p { margin-block: .5rem; }
-.xp-field-error { color: var(--theme-error-600); }
-.xp-test-page button { cursor: pointer; color: var(--theme-text); background: var(--theme-elevation-100); border: 1px solid var(--theme-elevation-250); padding: .65rem 1rem; border-radius: var(--style-radius-s); font: inherit; }
+.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(--theme-elevation-150); padding-bottom: 1rem; }
+.xp-targeting-row { border-bottom: 1px solid var(--xp-border); padding-bottom: 1rem; }

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

@@ -1,3 +1,4 @@
+import type { TargetingRule } from '../../types/contracts.js';
 import type { SerializedAttributeKeys } from '../../types/admin.js';
 import type { TargetingOp } from '../../targeting/ops.js';
 type Attribute = SerializedAttributeKeys[string];
@@ -5,13 +6,17 @@ export type AttributeType = Attribute['type'];
 export declare function opsFor(type?: AttributeType): readonly TargetingOp[];
 export declare function opLabel(type: AttributeType, op: TargetingOp): string;
 export declare function valueInput(attribute?: Attribute, op?: TargetingOp): {
-    kind: 'text' | 'number' | 'boolean' | 'select' | 'multiselect';
+    kind: 'text' | 'number' | 'boolean' | 'select' | 'multiselect' | 'chips';
     options?: {
         label: string;
         value: string;
     }[];
 };
 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;

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

@@ -17,6 +17,9 @@ export function valueInput(attribute, op = 'eq') {
                 value
             }))
     };
+    if (many) return {
+        kind: 'chips'
+    };
     return {
         kind: attribute?.type === 'number' ? 'number' : attribute?.type === 'boolean' ? 'boolean' : 'text'
     };
@@ -24,7 +27,11 @@ 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 (Array.isArray(raw) ? raw.map(String) : String(raw ?? '').split(',')).map((value)=>value.trim()).filter(Boolean);
+        if (op === 'in' || op === 'nin') return [
+            ...new Set((Array.isArray(raw) ? raw.map(String) : [
+                String(raw ?? '')
+            ]).map((value)=>value.trim()).filter(Boolean))
+        ];
         return raw == null ? '' : String(raw);
     }
     if (type === 'number') {
@@ -34,12 +41,21 @@ 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,
+            value: readListValue(rule.value)
+        } : rule);
+}
 export function rowPath(path) {
     return path.slice(0, Math.max(0, path.lastIndexOf('.')));
 }
 export function emptyListHint(op, value) {
     if (op !== 'in' && op !== 'nin') return undefined;
-    const list = coerceValue('string', op, value);
+    const list = readListValue(value);
     return Array.isArray(list) && list.length === 0 ? AUDIENCE_COPY.emptyListNote : undefined;
 }
 export function humaniseAttribute(key) {

package/dist/admin/theme.css

@@ -0,0 +1,42 @@
+/* The Payload token boundary. Recompute aliases for either admin theme. */
+: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-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-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-font-body: var(--font-body);
+  --xp-font-size-small: calc(var(--base) * 0.65);
+  --xp-font-size-body: calc(var(--base) * 0.75);
+}