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

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

@@ -1,6 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TEST_PAGE } from '../../copy/testPage.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ADVANCED_COPY as C } from '../../copy/advanced.js';
 import { exposureOptions } from './testPage.model.js';
 import { FieldErrors, positiveInteger, ReadOnly, reasonFor, save, SelectEdit, TextEdit } from './fields.js';
@@ -40,31 +39,33 @@ export function AdvancedSection({ test, surface }) {
     return /*#__PURE__*/ _jsx(Section, {
         test: test,
         sectionId: "advanced",
-        children: /*#__PURE__*/ _jsxs("details", {
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-field-grid",
             children: [
-                /*#__PURE__*/ _jsx("summary", {
-                    children: TEST_PAGE.sections.advanced
-                }),
-                /*#__PURE__*/ _jsx(SelectEdit, {
-                    label: C.exposurePolicy.label,
-                    value: doc.exposurePolicy,
-                    reason: reasonFor(test, 'exposurePolicy'),
-                    options: exposureOptions(doc.kind).map((value)=>({
-                            value,
-                            label: C.policies[value]
-                        })),
-                    onCommit: (value)=>save(test, 'exposurePolicy', ()=>({
-                                exposurePolicy: value
-                            }))
-                }),
-                /*#__PURE__*/ _jsx("p", {
-                    children: C.exposurePolicy.help
-                }),
-                /*#__PURE__*/ _jsx(FieldErrors, {
-                    test: test,
-                    path: "exposurePolicy"
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectEdit, {
+                            label: C.exposurePolicy.label,
+                            value: doc.exposurePolicy,
+                            reason: reasonFor(test, 'exposurePolicy'),
+                            options: exposureOptions(doc.kind).map((value)=>({
+                                    value,
+                                    label: C.policies[value]
+                                })),
+                            onCommit: (value)=>save(test, 'exposurePolicy', ()=>({
+                                        exposurePolicy: value
+                                    }))
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            children: C.exposurePolicy.help
+                        }),
+                        /*#__PURE__*/ _jsx(FieldErrors, {
+                            test: test,
+                            path: "exposurePolicy"
+                        })
+                    ]
                 }),
-                surface.isAdmin ? /*#__PURE__*/ _jsxs(_Fragment, {
+                surface.isAdmin ? /*#__PURE__*/ _jsxs("div", {
                     children: [
                         /*#__PURE__*/ _jsx(SelectEdit, {
                             label: C.method.label,
@@ -91,28 +92,32 @@ export function AdvancedSection({ test, surface }) {
                         })
                     ]
                 }) : null,
-                /*#__PURE__*/ _jsx(SelectEdit, {
-                    label: C.cuped.label,
-                    value: doc.analysis?.cuped ?? 'auto',
-                    reason: reason,
-                    options: [
-                        {
-                            value: 'auto',
-                            label: C.auto
-                        },
-                        {
-                            value: 'off',
-                            label: C.off
-                        }
-                    ],
-                    onCommit: (value)=>change('cuped', value)
-                }),
-                /*#__PURE__*/ _jsx("p", {
-                    children: C.cuped.help
-                }),
-                /*#__PURE__*/ _jsx(FieldErrors, {
-                    test: test,
-                    path: "analysis.cuped"
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectEdit, {
+                            label: C.cuped.label,
+                            value: doc.analysis?.cuped ?? 'auto',
+                            reason: reason,
+                            options: [
+                                {
+                                    value: 'auto',
+                                    label: C.auto
+                                },
+                                {
+                                    value: 'off',
+                                    label: C.off
+                                }
+                            ],
+                            onCommit: (value)=>change('cuped', value)
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            children: C.cuped.help
+                        }),
+                        /*#__PURE__*/ _jsx(FieldErrors, {
+                            test: test,
+                            path: "analysis.cuped"
+                        })
+                    ]
                 }),
                 numbers.map(([field, fallback, min])=>/*#__PURE__*/ _jsxs("div", {
                         children: [
@@ -139,7 +144,9 @@ export function AdvancedSection({ test, surface }) {
                         children: [
                             /*#__PURE__*/ _jsx(ReadOnly, {
                                 label: C[field].label,
-                                value: typeof doc[field] === 'string' || typeof doc[field] === 'number' ? String(doc[field]) : C.none,
+                                value: field === 'slug' ? /*#__PURE__*/ _jsx("code", {
+                                    children: String(doc.slug)
+                                }) : typeof doc[field] === 'string' || typeof doc[field] === 'number' ? String(doc[field]) : C.none,
                                 reason: reasonFor(test, field)
                             }),
                             /*#__PURE__*/ _jsx("p", {

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../ui/Button.js';
 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';
-import { CheckboxList, FieldErrors, reasonFor, save, SelectEdit, TextEdit } from './fields.js';
+import { CheckboxList, FieldErrors, reasonFor, save, SelectEdit } from './fields.js';
 import { Section } from './Section.js';
 export function GoalSection({ test, surface }) {
     const [metrics, setMetrics] = useState([]);
-    const [query, setQuery] = useState('');
     const [failed, setFailed] = useState(false);
     const [loaded, setLoaded] = useState(false);
     const [attempt, setAttempt] = useState(0);
@@ -17,6 +17,8 @@ export function GoalSection({ test, surface }) {
         const controller = new AbortController();
         void (async ()=>{
             try {
+                await Promise.resolve();
+                if (controller.signal.aborted) return;
                 const all = [];
                 let page = 1;
                 for(;;){
@@ -55,13 +57,13 @@ export function GoalSection({ test, surface }) {
         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) {
+        if (!reason && 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)
+                        guardrails: doc.metrics?.guardrails?.filter((id)=>String(id) !== goalId),
+                        secondary: doc.metrics?.secondary?.filter((id)=>String(id) !== goalId)
                     }
                 }));
         }
@@ -83,7 +85,9 @@ export function GoalSection({ test, surface }) {
         ...doc.metrics?.guardrails ?? [],
         ...doc.metrics?.secondary ?? []
     ].filter((id)=>id != null).map(String);
-    const visible = options.filter((option)=>chosen.includes(option.value) || option.label.toLowerCase().includes(query.toLowerCase()));
+    const visible = [
+        ...options
+    ];
     for (const id of chosen)if (!visible.some((option)=>option.value === id)) visible.push({
         value: id,
         label: unknownGoal
@@ -137,27 +141,37 @@ export function GoalSection({ test, surface }) {
         test: test,
         sectionId: "win",
         children: [
-            !reason ? /*#__PURE__*/ _jsx(TextEdit, {
-                label: C.searchGoals,
-                value: query,
-                onDraft: setQuery,
-                onCommit: setQuery
-            }) : null,
             failed ? /*#__PURE__*/ _jsxs("p", {
                 role: "alert",
                 children: [
                     C.goalsError,
                     " ",
-                    /*#__PURE__*/ _jsx("button", {
-                        type: "button",
-                        onClick: ()=>setAttempt((n)=>n + 1),
-                        children: C.retry
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "xp-ui-button-group",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            onClick: ()=>setAttempt((n)=>n + 1),
+                            children: C.retry
+                        })
                     })
                 ]
             }) : null,
             /*#__PURE__*/ _jsx(SelectEdit, {
+                labelAction: /*#__PURE__*/ _jsx("span", {
+                    className: "xp-ui-button-group",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        variant: "link",
+                        size: "sm",
+                        href: formatAdminURL({
+                            adminRoute: surface.adminRoute,
+                            path: `/experiments/goals${!reason ? `?${new URLSearchParams({
+                                return: String(doc.id)
+                            })}` : ''}`
+                        }),
+                        children: C.manageGoals
+                    })
+                }),
                 label: C.goal,
-                value: String(doc.metrics?.primary ?? ''),
+                value: loaded && !primary ? '' : String(doc.metrics?.primary ?? ''),
                 options: [
                     {
                         value: '',
@@ -174,20 +188,18 @@ export function GoalSection({ test, surface }) {
             /*#__PURE__*/ _jsx("p", {
                 children: C.goalHelp
             }),
-            /*#__PURE__*/ _jsx("a", {
-                href: formatAdminURL({
-                    adminRoute: surface.adminRoute,
-                    path: `/experiments/goals${!reason ? `?${new URLSearchParams({
-                        return: String(doc.id)
-                    })}` : ''}`
-                }),
-                children: C.manageGoals
-            }),
+            baseline ? /*#__PURE__*/ _jsxs("p", {
+                children: [
+                    primary?.name ? `${primary.name}: ` : '',
+                    baseline
+                ]
+            }) : null,
             /*#__PURE__*/ _jsx(FieldErrors, {
                 test: test,
                 path: "metrics.primary"
             }),
             /*#__PURE__*/ _jsx(CheckboxList, {
+                searchable: metrics.length > 8,
                 label: C.guardrails,
                 value: (doc.metrics?.guardrails ?? []).map(String),
                 options: roleOptions('guardrails'),
@@ -203,6 +215,7 @@ export function GoalSection({ test, surface }) {
                 path: "metrics.guardrails"
             }),
             /*#__PURE__*/ _jsx(CheckboxList, {
+                searchable: metrics.length > 8,
                 label: C.secondary,
                 value: (doc.metrics?.secondary ?? []).map(String),
                 options: roleOptions('secondary'),
@@ -214,12 +227,6 @@ export function GoalSection({ test, surface }) {
                 test: test,
                 path: "metrics.secondary"
             }),
-            baseline ? /*#__PURE__*/ _jsxs("p", {
-                children: [
-                    primary?.name ? `${primary.name}: ` : '',
-                    baseline
-                ]
-            }) : null,
             test.errors.metrics ? /*#__PURE__*/ _jsx("p", {
                 role: "alert",
                 children: test.errors.metrics

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../ui/Button.js';
 import { TEST_PAGE as C, suggestedWeeks, weeksHint } from '../../copy/testPage.js';
 import { durationSuggestion } from './testPage.model.js';
 import { FieldErrors, positiveInteger, reasonFor, save, TextEdit } from './fields.js';
@@ -22,30 +23,57 @@ export function LengthSection({ test }) {
         test: test,
         sectionId: "length",
         children: [
-            /*#__PURE__*/ _jsx(TextEdit, {
-                label: required ? `${C.reach} ${C.required}` : C.reach,
-                value: doc.analysis?.reachPerDay ?? '',
-                type: "number",
-                min: 1,
-                reason: reason,
-                required: required,
-                onCommit: (value)=>change('reachPerDay', value)
-            }),
-            /*#__PURE__*/ _jsx("p", {
-                children: C.reachHelp
-            }),
-            /*#__PURE__*/ _jsx(FieldErrors, {
-                test: test,
-                path: "analysis.reachPerDay"
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-field-grid",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextEdit, {
+                                label: required ? `${C.reach} ${C.required}` : C.reach,
+                                value: doc.analysis?.reachPerDay ?? '',
+                                type: "number",
+                                min: 1,
+                                reason: reason,
+                                required: required,
+                                onCommit: (value)=>change('reachPerDay', value)
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "xp-ui-help",
+                                children: C.reachHelp
+                            }),
+                            /*#__PURE__*/ _jsx(FieldErrors, {
+                                test: test,
+                                path: "analysis.reachPerDay"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextEdit, {
+                                label: C.duration,
+                                value: doc.analysis?.plannedDurationDays ?? 28,
+                                type: "number",
+                                min: 1,
+                                reason: reason,
+                                validate: positiveInteger,
+                                onCommit: (value)=>change('plannedDurationDays', value),
+                                help: weeksHint(doc.analysis?.plannedDurationDays ?? 28)
+                            }),
+                            /*#__PURE__*/ _jsx(FieldErrors, {
+                                test: test,
+                                path: "analysis.plannedDurationDays"
+                            })
+                        ]
+                    })
+                ]
             }),
             suggestion ? /*#__PURE__*/ _jsxs("div", {
-                className: "xp-duration-suggestion",
+                className: "xp-duration-suggestion xp-ui-button-group",
                 children: [
                     /*#__PURE__*/ _jsx("p", {
                         children: suggestedWeeks(suggestion.weeks)
                     }),
-                    !reason ? /*#__PURE__*/ _jsx("button", {
-                        type: "button",
+                    !reason ? /*#__PURE__*/ _jsx(Button, {
                         onClick: ()=>save(test, 'analysis', ()=>({
                                     analysis: {
                                         ...test.doc.analysis,
@@ -62,22 +90,6 @@ export function LengthSection({ test }) {
             }) : !test.preflight?.estimate ? /*#__PURE__*/ _jsx("p", {
                 children: doc.analysis?.reachPerDay == null ? C.noSuggestion : C.chooseGoalSuggestion
             }) : null,
-            /*#__PURE__*/ _jsx(TextEdit, {
-                label: C.duration,
-                value: doc.analysis?.plannedDurationDays ?? 28,
-                type: "number",
-                min: 1,
-                reason: reason,
-                validate: positiveInteger,
-                onCommit: (value)=>change('plannedDurationDays', value)
-            }),
-            /*#__PURE__*/ _jsx("p", {
-                children: weeksHint(doc.analysis?.plannedDurationDays ?? 28)
-            }),
-            /*#__PURE__*/ _jsx(FieldErrors, {
-                test: test,
-                path: "analysis.plannedDurationDays"
-            }),
             test.errors.analysis ? /*#__PURE__*/ _jsx("p", {
                 role: "alert",
                 children: test.errors.analysis

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

@@ -0,0 +1,4 @@
+import type { TestDocApi } from '../contracts.js';
+export declare function Rail({ test }: {
+    test: TestDocApi;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { SECTION_ORDER } from '../contracts.js';
+import { readinessParts } from '../readiness/parts.js';
+import { TEST_PAGE as C } from '../../copy/testPage.js';
+import { jumpToSection } from './jumpToSection.js';
+export function Rail({ test }) {
+    const [active, setActive] = useState('what');
+    const ref = useRef(null);
+    const done = readinessParts.sectionDone(test);
+    useEffect(()=>{
+        if (typeof IntersectionObserver === 'undefined') return;
+        const visible = new Map();
+        const observer = new IntersectionObserver((entries)=>{
+            for (const entry of entries)visible.set(entry.target.id.replace('section-', ''), entry.isIntersecting ? entry.intersectionRatio : 0);
+            const best = SECTION_ORDER.filter((id)=>(visible.get(id) ?? 0) > 0).sort((a, b)=>(visible.get(b) ?? 0) - (visible.get(a) ?? 0))[0];
+            // Retain the last clicked/visible item when nothing intersects.
+            if (best) setActive(best);
+        }, {
+            rootMargin: '-10% 0px -60% 0px',
+            threshold: [
+                0,
+                .1,
+                .25,
+                .5,
+                .75,
+                1
+            ]
+        });
+        for (const id of SECTION_ORDER){
+            const section = document.getElementById(`section-${id}`);
+            if (section) observer.observe(section);
+        }
+        return ()=>observer.disconnect();
+    }, []);
+    useEffect(()=>{
+        if (window.matchMedia?.('(max-width: 960px)').matches) {
+            ref.current?.querySelector('[aria-current]')?.scrollIntoView?.({
+                block: 'nearest',
+                inline: 'nearest'
+            });
+        }
+    }, [
+        active
+    ]);
+    return /*#__PURE__*/ _jsx("nav", {
+        ref: ref,
+        className: "xp-test-rail",
+        "aria-label": C.navigation,
+        children: /*#__PURE__*/ _jsx("ol", {
+            className: "xp-test-rail-list",
+            children: SECTION_ORDER.map((id)=>/*#__PURE__*/ _jsx("li", {
+                    children: /*#__PURE__*/ _jsxs("a", {
+                        href: `#section-${id}`,
+                        className: `xp-test-rail-item${id === 'advanced' ? ' xp-test-rail-item--advanced' : ''}${active === id ? ' is-active' : ''}`,
+                        "aria-current": active === id ? 'location' : undefined,
+                        onClick: (event)=>{
+                            event.preventDefault();
+                            setActive(id);
+                            jumpToSection(id);
+                        },
+                        children: [
+                            id !== 'advanced' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        "aria-hidden": "true",
+                                        className: done[id] ? 'xp-test-rail-mark xp-test-rail-mark--done' : 'xp-test-rail-mark',
+                                        children: done[id] ? C.completeMark : C.incompleteMark
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "xp-test-sr-only",
+                                        children: done[id] ? C.completePrefix : C.incompletePrefix
+                                    })
+                                ]
+                            }) : null,
+                            C.sections[id]
+                        ]
+                    })
+                }, id))
+        })
+    });
+}

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

@@ -0,0 +1,5 @@
+import type { SectionProps } from '../contracts.js';
+/** Measure wrapping actions/copy so the final section always clears the fixed bar. */
+export declare function ReadinessBar({ onHeightChange, ...props }: SectionProps & {
+    onHeightChange: (height: number) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { READINESS_COPY as C } from '../../copy/readiness.js';
+import { ReadinessContent } from '../readiness/Banner.js';
+/** Measure wrapping actions/copy so the final section always clears the fixed bar. */ export function ReadinessBar({ onHeightChange, ...props }) {
+    const ref = useRef(null);
+    useLayoutEffect(()=>{
+        const node = ref.current;
+        if (!node) return;
+        const measure = ()=>onHeightChange(node.getBoundingClientRect().height);
+        measure();
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+        observer?.observe(node);
+        window.addEventListener('resize', measure);
+        return ()=>{
+            observer?.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, [
+        onHeightChange
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        className: "xp-test-readiness-bar",
+        role: "region",
+        "aria-label": C.label,
+        children: props.test.doc ? /*#__PURE__*/ _jsx(ReadinessContent, {
+            ...props,
+            bar: true
+        }, `${props.test.doc.id}/${props.test.doc.status}`) : null
+    });
+}

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { SectionId, TestDocApi } from '../contracts.js';
 export declare function Section({ test, sectionId, children }: {
     test: TestDocApi;

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

@@ -1,27 +1,47 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { readinessParts } from '../readiness/parts.js';
+import { SectionCard } from '../../../ui/SectionCard.js';
+import { SECTION_ORDER } from '../contracts.js';
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 export function Section({ test, sectionId, children }) {
+    const disclosure = useRef(null);
+    const hasAdvancedError = Object.keys(test.errors).some((path)=>path.startsWith('analysis.') && ![
+            'analysis.reachPerDay',
+            'analysis.plannedDurationDays'
+        ].includes(path) || path === 'exposurePolicy');
+    useEffect(()=>{
+        if (hasAdvancedError && disclosure.current) disclosure.current.open = true;
+    }, [
+        hasAdvancedError
+    ]);
     const done = readinessParts.sectionDone(test)[sectionId];
-    return /*#__PURE__*/ _jsxs("section", {
-        className: "xp-test-section",
-        id: `section-${sectionId}`,
-        "aria-labelledby": `title-${sectionId}`,
+    if (sectionId === 'advanced') return /*#__PURE__*/ _jsxs("details", {
+        ref: disclosure,
+        className: "xp-test-advanced",
+        id: "section-advanced",
         children: [
-            /*#__PURE__*/ _jsxs("h2", {
-                id: `title-${sectionId}`,
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: done ? 'xp-section-check xp-section-check--done' : 'xp-section-check',
-                        "aria-label": done ? C.complete : C.incomplete,
-                        children: done ? C.completeMark : C.incompleteMark
-                    }),
-                    ' ',
-                    C.sections[sectionId]
-                ]
+            /*#__PURE__*/ _jsx("summary", {
+                children: /*#__PURE__*/ _jsx("h2", {
+                    id: "title-advanced",
+                    tabIndex: -1,
+                    children: C.sections.advanced
+                })
             }),
-            children
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-ui-section-body",
+                children: children
+            })
         ]
     });
+    return /*#__PURE__*/ _jsx(SectionCard, {
+        number: SECTION_ORDER.indexOf(sectionId) + 1,
+        title: C.sections[sectionId],
+        complete: done,
+        id: `section-${sectionId}`,
+        headingId: `title-${sectionId}`,
+        className: "xp-test-section",
+        children: children
+    });
 }