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

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

@@ -1,6 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { theme } from '../../theme.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Button } from '../../../ui/Button.js';
+import { Range } from '../../../ui/Inputs.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,14 +11,15 @@ import { allocationSentence } from '../../allocation.model.js';
 import { balanceWeight, orderedVersions, trafficShares } from './testPage.model.js';
 import { FieldErrors, ReadOnly, reasonFor, save, TextEdit } from './fields.js';
 import { Section } from './Section.js';
-const COLOURS = [
-    theme.color.success,
-    theme.color.accent,
-    theme.color.warning,
-    theme.color.error,
-    theme.color.inputBorder
-];
+const COLOURS = {
+    control: 'var(--xp-series-muted)',
+    variantA: 'var(--xp-series-a)',
+    variantB: 'var(--xp-series-b)',
+    variantC: 'var(--xp-series-c)',
+    holdout: 'var(--xp-series-muted)'
+};
 export function VersionsSection({ test, surface, parts }) {
+    const id = useId();
     const doc = test.doc;
     const [weightEdit, setWeightEdit] = useState(null);
     const releasedAllocation = useRef(null);
@@ -46,66 +49,85 @@ export function VersionsSection({ test, surface, parts }) {
         test: test,
         sectionId: "versions",
         children: [
-            /*#__PURE__*/ _jsx("div", {
+            reason ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: reason
+            }) : null,
+            /*#__PURE__*/ _jsxs("div", {
                 className: "xp-version-rows",
-                children: ordered.map(({ arm, index }, position)=>/*#__PURE__*/ _jsxs("article", {
-                        className: "xp-version-row",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-version-grid-head",
+                        "aria-hidden": "true",
                         children: [
-                            /*#__PURE__*/ _jsxs("h3", {
-                                children: [
-                                    /*#__PURE__*/ _jsx("span", {
-                                        style: {
-                                            background: COLOURS[position]
-                                        },
-                                        className: "xp-version-colour"
-                                    }),
-                                    GROUP_LABELS[arm.key]
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(TextEdit, {
-                                label: `${GROUP_LABELS[arm.key]}: ${C.label}`,
-                                value: arm.label,
-                                reason: reason,
-                                onCommit: (label)=>update((arms)=>arms.map((current)=>current.key === arm.key ? {
-                                                ...current,
-                                                label
-                                            } : current))
-                            }),
-                            /*#__PURE__*/ _jsx(TextEdit, {
-                                label: `${GROUP_LABELS[arm.key]}: ${C.weight}`,
-                                type: "number",
-                                min: 0,
-                                max: 100,
-                                value: doc.arms[index].weight,
-                                reason: reason,
-                                validate: (raw)=>raw.trim() !== '' && Number.isInteger(Number(raw)) && Number(raw) >= 0 && Number(raw) <= 100,
-                                invalidMessage: C.invalidShare,
-                                onDraft: (value)=>setWeightEdit({
-                                        key: arm.key,
-                                        weight: Number(value)
-                                    }),
-                                onCommit: (value)=>update((arms)=>balanceWeight(arms, arm.key, Number(value)))
-                            }),
-                            /*#__PURE__*/ _jsx(parts.VersionContent, {
-                                test: test,
-                                surface: surface,
-                                armIndex: index
+                            /*#__PURE__*/ _jsx("span", {
+                                children: C.label
                             }),
-                            issues.rows[index]?.map((issue, i)=>/*#__PURE__*/ _jsx("p", {
-                                    role: "alert",
-                                    children: issueMessage(issue, totalWeight(live))
-                                }, i)),
-                            /*#__PURE__*/ _jsx(FieldErrors, {
-                                test: test,
-                                path: `arms.${index}`
+                            /*#__PURE__*/ _jsx("span", {
+                                children: C.weight
                             }),
-                            !reason && arm.kind !== 'control' ? /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>update((arms)=>splitEvenly(removeArm(arms, arm.key))),
-                                children: C.remove
-                            }) : null
+                            /*#__PURE__*/ _jsx("span", {}),
+                            /*#__PURE__*/ _jsx("span", {})
                         ]
-                    }, arm.key))
+                    }),
+                    ordered.map(({ arm, index })=>/*#__PURE__*/ _jsxs("article", {
+                            className: "xp-version-row",
+                            children: [
+                                /*#__PURE__*/ _jsx(TextEdit, {
+                                    label: `${GROUP_LABELS[arm.key]}: ${C.label}`,
+                                    value: arm.label,
+                                    reason: reason,
+                                    hideLabel: true,
+                                    disabled: Boolean(reason),
+                                    onCommit: (label)=>update((arms)=>arms.map((current)=>current.key === arm.key ? {
+                                                    ...current,
+                                                    label
+                                                } : current))
+                                }),
+                                /*#__PURE__*/ _jsx(TextEdit, {
+                                    label: `${GROUP_LABELS[arm.key]}: ${C.weight}`,
+                                    type: "number",
+                                    min: 0,
+                                    max: 100,
+                                    value: doc.arms[index].weight,
+                                    reason: reason,
+                                    hideLabel: true,
+                                    disabled: Boolean(reason),
+                                    validate: (raw)=>raw.trim() !== '' && Number.isInteger(Number(raw)) && Number(raw) >= 0 && Number(raw) <= 100,
+                                    invalidMessage: C.invalidShare,
+                                    onDraft: (value)=>setWeightEdit({
+                                            key: arm.key,
+                                            weight: Number(value)
+                                        }),
+                                    onCommit: (value)=>update((arms)=>balanceWeight(arms, arm.key, Number(value)))
+                                }),
+                                /*#__PURE__*/ _jsx(parts.VersionContent, {
+                                    test: test,
+                                    surface: surface,
+                                    armIndex: index
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "xp-ui-button-group xp-version-remove",
+                                    children: arm.kind !== 'control' ? /*#__PURE__*/ _jsx(Button, {
+                                        variant: "quiet",
+                                        size: "sm",
+                                        disabled: Boolean(reason),
+                                        title: reason ?? undefined,
+                                        onClick: ()=>update((arms)=>splitEvenly(removeArm(arms, arm.key))),
+                                        children: C.remove
+                                    }) : null
+                                }),
+                                issues.rows[index]?.map((issue, i)=>/*#__PURE__*/ _jsx("p", {
+                                        role: "alert",
+                                        children: issueMessage(issue, totalWeight(live))
+                                    }, i)),
+                                /*#__PURE__*/ _jsx(FieldErrors, {
+                                    test: test,
+                                    path: `arms.${index}`
+                                })
+                            ]
+                        }, arm.key))
+                ]
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: "xp-traffic-bar",
@@ -114,10 +136,30 @@ export function VersionsSection({ test, surface, parts }) {
                 children: ordered.map(({ arm }, i)=>/*#__PURE__*/ _jsx("span", {
                         style: {
                             width: `${shares[i]}%`,
-                            background: COLOURS[i]
+                            background: COLOURS[arm.key]
                         }
                     }, arm.key))
             }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-split-legend",
+                children: ordered.map(({ arm })=>/*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            /*#__PURE__*/ _jsx("i", {
+                                style: {
+                                    background: COLOURS[arm.key]
+                                }
+                            }),
+                            arm.label,
+                            " ",
+                            arm.weight,
+                            "%"
+                        ]
+                    }, arm.key))
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: C.balanceHelp
+            }),
             issues.form.map((issue, i)=>/*#__PURE__*/ _jsx("p", {
                     role: "alert",
                     children: issueMessage(issue, totalWeight(live))
@@ -126,71 +168,60 @@ export function VersionsSection({ test, surface, parts }) {
                 role: "alert",
                 children: test.errors.arms
             }) : null,
-            !reason ? /*#__PURE__*/ _jsxs(_Fragment, {
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-section-actions xp-ui-button-group",
+                title: reason ?? undefined,
                 children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "xp-section-actions",
-                        children: [
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                disabled: doc.arms.filter((arm)=>arm.kind === 'variant').length >= 3,
-                                onClick: ()=>update((arms)=>addVariant(arms, doc.kind)),
-                                children: C.addVersion
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                disabled: doc.arms.some((arm)=>arm.kind === 'holdout'),
-                                onClick: ()=>update(addHoldoutArm),
-                                children: C.addHoldout
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>update(splitEvenly),
-                                children: C.split
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: Boolean(reason) || doc.arms.filter((arm)=>arm.kind === 'variant').length >= 3,
+                        onClick: ()=>update((arms)=>addVariant(arms, doc.kind)),
+                        children: C.addVersion
                     }),
-                    /*#__PURE__*/ _jsx("p", {
-                        children: ARMS_COPY.holdout
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: Boolean(reason) || doc.arms.some((arm)=>arm.kind === 'holdout'),
+                        onClick: ()=>update(addHoldoutArm),
+                        children: C.addHoldout
                     }),
-                    /*#__PURE__*/ _jsx("p", {
-                        children: C.balanceHelp
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: Boolean(reason),
+                        onClick: ()=>update(splitEvenly),
+                        children: C.split
                     })
                 ]
+            }),
+            doc.arms.some((arm)=>arm.kind === 'holdout') ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: ARMS_COPY.holdout
             }) : null,
             reasonFor(test, 'allocation') ? /*#__PURE__*/ _jsx(ReadOnly, {
                 label: C.allocation,
                 value: `${doc.allocation}%`,
                 reason: reasonFor(test, 'allocation')
-            }) : /*#__PURE__*/ _jsxs("label", {
-                className: "xp-field",
-                children: [
-                    C.allocation,
-                    /*#__PURE__*/ _jsx("input", {
-                        type: "range",
-                        min: 1,
-                        max: 100,
-                        value: allocation,
-                        onChange: (e)=>{
-                            releasedAllocation.current = null;
-                            setAllocation(Number(e.target.value));
-                        },
-                        onPointerUp: commitAllocation,
-                        onKeyUp: (e)=>{
-                            if ([
-                                'ArrowLeft',
-                                'ArrowRight',
-                                'ArrowUp',
-                                'ArrowDown',
-                                'Home',
-                                'End',
-                                'PageUp',
-                                'PageDown'
-                            ].includes(e.key)) commitAllocation();
-                        },
-                        onBlur: commitAllocation
-                    })
-                ]
+            }) : /*#__PURE__*/ _jsx(Range, {
+                id: id,
+                label: C.allocation,
+                help: `${allocation}%`,
+                min: 1,
+                max: 100,
+                value: allocation,
+                onChange: (e)=>{
+                    releasedAllocation.current = null;
+                    setAllocation(Number(e.target.value));
+                },
+                onPointerUp: commitAllocation,
+                onKeyUp: (e)=>{
+                    if ([
+                        'ArrowLeft',
+                        'ArrowRight',
+                        'ArrowUp',
+                        'ArrowDown',
+                        'Home',
+                        'End',
+                        'PageUp',
+                        'PageDown'
+                    ].includes(e.key)) commitAllocation();
+                },
+                onBlur: commitAllocation
             }),
             /*#__PURE__*/ _jsx("p", {
                 children: allocationSentence({

package/dist/admin/surface/test/fields.d.ts

@@ -8,13 +8,14 @@ export declare function FieldErrors({ test, path }: {
     test: TestDocApi;
     path: string;
 }): import("react").JSX.Element;
-export declare function ReadOnly({ label, value, reason }: {
+export declare function ReadOnly({ label, value, reason, labelAction }: {
     label: string;
     value: ReactNode;
     reason: string | null;
+    labelAction?: ReactNode;
 }): import("react").JSX.Element;
 /** Local typing is intentionally separate from staging: build the current group on commit. */
-export declare function TextEdit({ label, value, onCommit, reason, multiline, placeholder, type, min, max, required, onDraft, validate, invalidMessage }: {
+export declare function TextEdit({ label, value, onCommit, reason, multiline, placeholder, type, min, max, required, onDraft, validate, invalidMessage, hideLabel, disabled, help }: {
     label: string;
     value: string | number;
     onCommit: (value: string) => void;
@@ -28,9 +29,12 @@ export declare function TextEdit({ label, value, onCommit, reason, multiline, pl
     required?: boolean;
     validate?: (value: string) => boolean;
     invalidMessage?: string;
+    hideLabel?: boolean;
+    disabled?: boolean;
+    help?: string;
 }): import("react").JSX.Element;
 export declare const positiveInteger: (raw: string) => boolean;
-export declare function SelectEdit({ label, value, options, reason, onCommit, readOnlyValue }: {
+export declare function SelectEdit({ label, value, options, reason, onCommit, readOnlyValue, labelAction }: {
     label: string;
     value: string;
     options: readonly {
@@ -40,8 +44,9 @@ export declare function SelectEdit({ label, value, options, reason, onCommit, re
     reason?: string | null;
     onCommit: (value: string) => void;
     readOnlyValue?: string;
+    labelAction?: ReactNode;
 }): import("react").JSX.Element;
-export declare function CheckboxList({ label, value, options, reason, onToggle, readOnlyValue }: {
+export declare function CheckboxList({ label, value, options, reason, onToggle, readOnlyValue, searchable }: {
     label: string;
     value: string[];
     options: readonly {
@@ -51,5 +56,7 @@ export declare function CheckboxList({ label, value, options, reason, onToggle,
     reason?: string | null;
     onToggle: (value: string, checked: boolean) => void;
     readOnlyValue?: string;
+    searchable?: boolean;
 }): import("react").JSX.Element;
+export declare function TestName({ test }: SectionProps): import("react").JSX.Element;
 export declare function Hypothesis({ test }: SectionProps): import("react").JSX.Element;

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useState } from 'react';
+import { TextInput, NumberInput, Textarea, Select, SearchInput, CheckboxList as UICheckboxList } from '../../../ui/Inputs.js';
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 import { EDITABLE_BY_STATUS } from '../../../collections/experiments/editability.js';
 import { lockedReason } from '../../lockedNotice.model.js';
@@ -21,13 +22,19 @@ export function FieldErrors({ test, path }) {
             }, key))
     });
 }
-export function ReadOnly({ label, value, reason }) {
+export function ReadOnly({ label, value, reason, labelAction }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-read-only",
         title: reason ?? undefined,
         children: [
-            /*#__PURE__*/ _jsx("strong", {
-                children: label
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-ui-field-label",
+                children: [
+                    /*#__PURE__*/ _jsx("strong", {
+                        children: label
+                    }),
+                    labelAction
+                ]
             }),
             /*#__PURE__*/ _jsx("p", {
                 children: value
@@ -38,7 +45,7 @@ export function ReadOnly({ label, value, reason }) {
         ]
     });
 }
-/** Local typing is intentionally separate from staging: build the current group on commit. */ export function TextEdit({ label, value, onCommit, reason, multiline, placeholder, type = 'text', min, max, required, onDraft, validate, invalidMessage }) {
+/** Local typing is intentionally separate from staging: build the current group on commit. */ export function TextEdit({ label, value, onCommit, reason, multiline, placeholder, type = 'text', min, max, required, onDraft, validate, invalidMessage, hideLabel = false, disabled = false, help }) {
     const id = useId();
     const [draft, setDraft] = useState(String(value));
     const [error, setError] = useState(null);
@@ -55,111 +62,103 @@ export function ReadOnly({ label, value, reason }) {
         }
         onCommit(draft);
     };
-    if (reason) return /*#__PURE__*/ _jsx(ReadOnly, {
+    if (reason && !disabled) return /*#__PURE__*/ _jsx(ReadOnly, {
         label: label,
         value: value === '' && placeholder ? placeholder : value,
         reason: reason
     });
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsxs("label", {
-                className: "xp-field",
-                htmlFor: id,
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        children: label
-                    }),
-                    multiline ? /*#__PURE__*/ _jsx("textarea", {
-                        id: id,
-                        value: draft,
-                        placeholder: placeholder,
-                        onChange: (e)=>{
-                            setDraft(e.target.value);
-                            onDraft?.(e.target.value);
-                        },
-                        onBlur: commit
-                    }) : /*#__PURE__*/ _jsx("input", {
-                        id: id,
-                        type: type,
-                        value: draft,
-                        min: min,
-                        max: max,
-                        required: required,
-                        placeholder: placeholder,
-                        "aria-invalid": error ? true : undefined,
-                        "aria-describedby": error ? `${id}-error` : undefined,
-                        onChange: (e)=>{
-                            setError(null);
-                            setDraft(e.target.value);
-                            onDraft?.(e.target.value);
-                        },
-                        onBlur: commit,
-                        onKeyDown: (e)=>{
-                            if (e.key === 'Enter') e.currentTarget.blur();
-                        }
-                    })
-                ]
-            }),
-            error ? /*#__PURE__*/ _jsx("p", {
-                className: "xp-field-error",
-                id: `${id}-error`,
-                role: "alert",
-                children: error
-            }) : null
-        ]
+    const Input = multiline ? Textarea : type === 'number' ? NumberInput : TextInput;
+    return /*#__PURE__*/ _jsx("div", {
+        className: hideLabel ? 'xp-grid-field' : undefined,
+        title: reason ?? undefined,
+        children: /*#__PURE__*/ _jsx(Input, {
+            id: id,
+            label: label,
+            "aria-label": label,
+            value: draft,
+            disabled: disabled,
+            placeholder: placeholder,
+            min: min,
+            max: max,
+            required: required,
+            help: help,
+            error: error ?? undefined,
+            onChange: (e)=>{
+                setError(null);
+                setDraft(e.target.value);
+                onDraft?.(e.target.value);
+            },
+            onBlur: commit,
+            onKeyDown: (e)=>{
+                if (!multiline && e.key === 'Enter') e.currentTarget.blur();
+            }
+        })
     });
 }
 export const positiveInteger = (raw)=>raw.trim() !== '' && Number.isInteger(Number(raw)) && Number(raw) > 0;
-export function SelectEdit({ label, value, options, reason, onCommit, readOnlyValue }) {
+export function SelectEdit({ label, value, options, reason, onCommit, readOnlyValue, labelAction }) {
     const id = useId();
     if (reason) {
         return /*#__PURE__*/ _jsx(ReadOnly, {
             label: label,
             reason: reason,
+            labelAction: labelAction,
             value: readOnlyValue ?? options.find((o)=>o.value === value)?.label ?? value
         });
     }
-    return /*#__PURE__*/ _jsxs("label", {
-        className: "xp-field",
-        htmlFor: id,
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                children: label
-            }),
-            /*#__PURE__*/ _jsx("select", {
-                id: id,
-                value: value,
-                onChange: (e)=>onCommit(e.target.value),
-                children: options.map((option)=>/*#__PURE__*/ _jsx("option", {
-                        value: option.value,
-                        children: option.label
-                    }, option.value))
-            })
-        ]
+    return /*#__PURE__*/ _jsx(Select, {
+        id: id,
+        label: label,
+        labelAction: labelAction,
+        value: value,
+        onChange: (e)=>onCommit(e.target.value),
+        children: options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                value: option.value,
+                children: option.label
+            }, option.value))
     });
 }
-export function CheckboxList({ label, value, options, reason, onToggle, readOnlyValue }) {
+export function CheckboxList({ label, value, options, reason, onToggle, readOnlyValue, searchable = false }) {
+    const id = useId();
+    const [query, setQuery] = useState('');
+    const visible = searchable ? options.filter((option)=>value.includes(option.value) || option.label.toLowerCase().includes(query.toLowerCase())) : options;
     if (reason) return /*#__PURE__*/ _jsx(ReadOnly, {
         label: label,
         reason: reason,
         value: readOnlyValue ?? value.map((v)=>options.find((o)=>o.value === v)?.label ?? v).join(', ')
     });
-    return /*#__PURE__*/ _jsxs("fieldset", {
-        className: "xp-field",
+    return /*#__PURE__*/ _jsx(UICheckboxList, {
+        id: id,
+        label: label,
+        value: value,
+        options: visible,
+        onChange: (next)=>{
+            const changed = options.find((option)=>next.includes(option.value) !== value.includes(option.value));
+            if (changed) onToggle(changed.value, next.includes(changed.value));
+        },
+        children: searchable ? /*#__PURE__*/ _jsx(SearchInput, {
+            id: `${id}-search`,
+            label: C.searchGoals,
+            value: query,
+            onChange: (event)=>setQuery(event.target.value)
+        }) : null
+    });
+}
+export function TestName({ test }) {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx("legend", {
-                children: label
+            /*#__PURE__*/ _jsx(TextEdit, {
+                label: C.name,
+                value: test.doc?.name ?? '',
+                reason: reasonFor(test, 'name'),
+                onCommit: (value)=>save(test, 'name', ()=>({
+                            name: value
+                        }))
             }),
-            options.map((option)=>/*#__PURE__*/ _jsxs("label", {
-                    children: [
-                        /*#__PURE__*/ _jsx("input", {
-                            type: "checkbox",
-                            checked: value.includes(option.value),
-                            onChange: (e)=>onToggle(option.value, e.target.checked)
-                        }),
-                        option.label
-                    ]
-                }, option.value))
+            /*#__PURE__*/ _jsx(FieldErrors, {
+                test: test,
+                path: "name"
+            })
         ]
     });
 }

package/dist/admin/surface/test/jumpToSection.d.ts

@@ -0,0 +1,3 @@
+import type { SectionId } from '../contracts.js';
+/** Open disclosures before scrolling, then give keyboard users a meaningful landing. */
+export declare function jumpToSection(section: SectionId): void;

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

@@ -0,0 +1,10 @@
+/** Open disclosures before scrolling, then give keyboard users a meaningful landing. */ export function jumpToSection(section) {
+    const target = document.getElementById(`section-${section}`);
+    if (target instanceof HTMLDetailsElement) target.open = true;
+    target?.scrollIntoView?.({
+        block: 'start'
+    });
+    document.getElementById(`title-${section}`)?.focus({
+        preventScroll: true
+    });
+}

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

@@ -1,17 +1,23 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 import { pageTargetIssue, setPageTarget, showsPageTarget } from '../../arms/pageTarget.model.js';
 import { FieldErrors, reasonFor, save, TextEdit } from './fields.js';
 function VersionContent({ test, armIndex }) {
     const arm = test.doc?.arms[armIndex];
     if (!arm || !test.doc) return null;
-    if (!showsPageTarget(test.doc.kind, arm.kind)) return /*#__PURE__*/ _jsx("p", {
+    if (!showsPageTarget(test.doc.kind, arm.kind)) return /*#__PURE__*/ _jsx("span", {
+        className: "xp-content-chip",
         children: C.holdoutContent
     });
     const issue = pageTargetIssue(arm.pageTarget, arm.kind);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-version-content",
         children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: `xp-content-chip ${issue ? 'xp-content-empty' : 'xp-content-ready'}`,
+                children: issue ? C.addPageAddress : C.pageReady
+            }),
             /*#__PURE__*/ _jsx(TextEdit, {
                 label: `${arm.label}: ${C.pageAddress}`,
                 value: arm.pageTarget ?? '',