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

package/dist/admin/surface/surface.css

@@ -1,50 +1,64 @@
-.xp-tests-surface {
-  min-height: 100dvh;
-  width: 100%;
-  color: var(--xp-text);
-  background: var(--xp-bg);
+/* Full-screen shell shared by every Tests surface. */
+.xp-tests-surface { min-height: 100dvh; width: 100%; color: var(--xp-text); background: var(--xp-bg); font: var(--xp-text-body); }
+.xp-tests-surface a:not(.xp-ui-button) { color: var(--xp-text); }
+.xp-tests-surface a:not(.xp-ui-button):hover { text-decoration: underline; text-underline-offset: 3px; }
+.xp-tests-container { box-sizing: border-box; width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--xp-space-8); }
+.xp-tests-shell-header { background: var(--xp-surface); border-bottom: 1px solid var(--xp-border); }
+.xp-tests-shell-top { display: flex; align-items: center; justify-content: space-between; gap: var(--xp-space-4); min-height: 48px; }
+.xp-tests-shell-top .xp-ui-breadcrumb { min-width: 0; overflow-wrap: anywhere; }
+.xp-tests-shell-top > .xp-ui-button { flex-shrink: 0; }
+.xp-tests-shell-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--xp-space-6); padding-top: var(--xp-space-3); padding-bottom: var(--xp-space-6); }
+.xp-tests-shell-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
+.xp-tests-shell-title h1 { margin: 0; font: var(--xp-text-display); letter-spacing: -0.01em; }
+.xp-tests-shell-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--xp-space-2); min-width: 0; }
+.xp-tests-main { padding-block: var(--xp-space-8) 48px; }
+.xp-tests-search { position: relative; width: 260px; max-width: 100%; }
+.xp-tests-search label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.xp-tests-search svg { position: absolute; top: 10px; left: 10px; width: 16px; height: 16px; color: var(--xp-text-3); pointer-events: none; }
+.xp-tests-search input { padding-left: var(--xp-space-8); }
+.xp-tests-group { margin-top: var(--xp-space-8); }
+.xp-tests-group:first-child { margin-top: 0; }
+.xp-tests-group-head { display: flex; align-items: baseline; gap: var(--xp-space-2); padding-inline: 2px; margin-bottom: 10px; }
+.xp-tests-group-head h2, h2.xp-tests-group-head { margin: 0; font: 600 15px/22px var(--xp-font); }
+.xp-tests-group-head > span { color: var(--xp-text-3); font: var(--xp-text-small); font-variant-numeric: tabular-nums; }
+.xp-tests-list { border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); }
+.xp-tests-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--xp-space-2) var(--xp-space-6); padding: var(--xp-space-4) var(--xp-space-5); }
+.xp-tests-row + .xp-tests-row { border-top: 1px solid var(--xp-border); }
+.xp-tests-row-main { min-width: 0; overflow-wrap: anywhere; }
+.xp-tests-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+.xp-tests-row-name > a { color: var(--xp-text); font: 500 15px/22px var(--xp-font); text-decoration: none; border-radius: var(--xp-radius-chip); }
+.xp-tests-row-name > a:hover { text-decoration: underline; text-underline-offset: 3px; }
+.xp-tests-row-name > a:focus-visible, .xp-tests-group > summary:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-tests-kind { display: inline-flex; align-items: center; height: 22px; padding-inline: var(--xp-space-2); border: 1px solid var(--xp-border); border-radius: var(--xp-radius-chip); color: var(--xp-text-2); font: 500 12px/18px var(--xp-font); white-space: nowrap; }
+.xp-tests-row-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xp-space-1) 14px; margin-top: var(--xp-space-1); color: var(--xp-text-2); font: 400 14px/20px var(--xp-font); }
+.xp-tests-row-action { justify-self: end; }
+.xp-tests-health { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/18px var(--xp-font); }
+.xp-tests-health::before { content: ''; width: var(--xp-space-2); height: var(--xp-space-2); border-radius: 50%; flex: none; }
+.xp-tests-health--red::before { background: var(--xp-error); }
+.xp-tests-health--amber::before { background: var(--xp-warning); }
+.xp-tests-health--green::before { background: var(--xp-success); }
+.xp-tests-group > summary { display: inline-flex; align-items: baseline; gap: var(--xp-space-2); cursor: pointer; list-style: none; border-radius: var(--xp-radius-chip); }
+.xp-tests-group > summary::-webkit-details-marker { display: none; }
+.xp-tests-group > summary .xp-tests-group-head { margin-bottom: 0; }
+.xp-tests-group-chevron { align-self: center; color: var(--xp-text-3); }
+.xp-tests-group[open] .xp-tests-group-chevron { transform: rotate(90deg); }
+.xp-tests-group > summary + .xp-tests-list { margin-top: 10px; }
+.xp-tests-no-matches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xp-space-2); }
+.xp-tests-no-matches p { margin: 0; }
+@media (max-width: 720px) {
+  .xp-tests-container { padding-inline: var(--xp-space-4); }
+  .xp-tests-shell-main { flex-direction: column; align-items: stretch; gap: var(--xp-space-4); }
+  .xp-tests-shell-actions { justify-content: flex-start; }
+  .xp-tests-search { width: 100%; }
+  .xp-tests-row { grid-template-columns: minmax(0, 1fr); }
+  .xp-tests-row-action { justify-self: start; }
 }
-.xp-tests-shell-header {
-  display: flex;
-  align-items: center;
-  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: 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(--xp-space-4);
-}
-.xp-tests-toolbar { margin-bottom: var(--xp-space-6); }
+/* Existing screens retain their controls until their design-system lanes. */
+.xp-tests-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xp-space-4); margin-bottom: var(--xp-space-6); }
 .xp-tests-toolbar h1 { margin: 0; margin-right: auto; }
 .xp-tests-toolbar label { display: grid; gap: var(--xp-space-1); }
-.xp-tests-toolbar input, .xp-tests-surface button {
-  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: var(--xp-space-2) var(--xp-space-4);
-  border: 1px solid var(--xp-accent);
-  border-radius: var(--xp-radius);
-}
-.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(--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: 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); }
+.xp-tests-toolbar input, .xp-tests-toolbar button:not(.xp-ui-button) { 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 { color: var(--xp-text); padding: var(--xp-space-2) var(--xp-space-4); border: 1px solid var(--xp-accent); border-radius: var(--xp-radius); }
+.xp-tests-shell-heading { min-width: 0; }
+.xp-tests-shell-subtitle { margin-top: var(--xp-space-2); color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-tests-shell-subtitle p { margin: 0; }

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,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fetchAllDocs } from '../../../lib/fetchAllDocs.js';
+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,22 +18,15 @@ export function GoalSection({ test, surface }) {
         const controller = new AbortController();
         void (async ()=>{
             try {
-                const all = [];
-                let page = 1;
-                for(;;){
-                    const response = await fetch(`${surface.apiRoute.replace(/\/$/, '')}/xp-metrics?depth=0&limit=100&page=${page}`, {
-                        credentials: 'include',
-                        signal: controller.signal
-                    });
-                    if (!response.ok) throw new Error();
-                    const body = await response.json();
-                    if (!Array.isArray(body.docs)) throw new Error();
-                    all.push(...body.docs);
-                    if (!body.hasNextPage) break;
-                    page++;
-                }
+                await Promise.resolve();
+                if (controller.signal.aborted) return;
+                const response = await fetchAllDocs(`${surface.apiRoute.replace(/\/$/, '')}/xp-metrics?depth=0`, {
+                    credentials: 'include',
+                    signal: controller.signal
+                });
+                if (!response.ok) throw new Error();
                 if (!controller.signal.aborted) {
-                    setMetrics(all);
+                    setMetrics(response.docs);
                     setFailed(false);
                     setLoaded(true);
                 }
@@ -55,13 +49,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 +77,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 +133,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 +180,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 +207,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 +219,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;