@delmaredigital/payload-experiments 0.4.0-rc.1 → 0.4.0-rc.2

package/dist/admin/surface/pagePicker/PageCombobox.js

@@ -0,0 +1,395 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createApi } from '../../api.js';
+import { PAGE_COPY as C, pageFieldCopy, pageNotFoundCopy } from '../../copy/pages.js';
+import { TextInput } from '../../../ui/TextInput.js';
+import { normalisePath } from '../../../runtime/normalisePath.js';
+import { reasonFor } from '../test/fields.js';
+import { disabledPageReason, isLatestPageRequest } from './pagePicker.model.js';
+import './pagePicker.css';
+const display = (row)=>`${row.title ? `${row.title} · ` : ''}${row.path ?? ''}${row.published === false ? ` · ${C.draft}` : ''}`;
+/** One input owns focus; list options are navigated through aria-activedescendant. */ export function PageCombobox({ collection, test, armKey, apiRoute }) {
+    const api = useMemo(()=>createApi(apiRoute), [
+        apiRoute
+    ]);
+    const id = useId();
+    const root = useRef(null);
+    const arm = test.doc?.arms.find((item)=>item.key === armKey);
+    const target = arm?.pageTarget || '';
+    const matches = (path)=>Boolean(target && path != null && normalisePath(path) === normalisePath(target));
+    const remembered = arm && test.chosenPages[arm.key];
+    const chosen = remembered && matches(remembered.path) ? remembered : undefined;
+    const placement = test.preflight?.pagePlacements?.find((entry)=>entry.arm === armKey && entry.collection === collection.slug && entry.id != null && matches(entry.path));
+    const resolved = chosen ?? placement;
+    const needsLookup = Boolean(target && !resolved);
+    const lookupKey = JSON.stringify([
+        collection.slug,
+        target
+    ]);
+    const lookups = useRef({});
+    const [, updateLookup] = useState(0);
+    const lookupRevision = useRef(0);
+    useEffect(()=>{
+        if (!needsLookup || lookups.current[lookupKey]) return;
+        const controller = new AbortController();
+        const request = ++lookupRevision.current;
+        const pending = {};
+        const discardPending = ()=>{
+            if (lookups.current[lookupKey] === pending) delete lookups.current[lookupKey];
+        };
+        // Defer dispatch so StrictMode's discarded effect cannot cache an aborted attempt.
+        void Promise.resolve().then(async ()=>{
+            if (controller.signal.aborted) return;
+            lookups.current[lookupKey] = pending;
+            const result = await api.pages({
+                collection: collection.slug,
+                path: target
+            }, controller.signal);
+            if (controller.signal.aborted || !isLatestPageRequest(request, lookupRevision.current)) {
+                discardPending();
+                return;
+            }
+            lookups.current[lookupKey] = result.ok && result.data ? {
+                row: result.data.docs[0],
+                missing: result.data.docs.length === 0
+            } : {};
+            updateLookup((value)=>value + 1);
+        });
+        return ()=>{
+            controller.abort();
+            discardPending();
+        };
+    }, [
+        api,
+        collection.slug,
+        target,
+        lookupKey,
+        needsLookup
+    ]);
+    const lookup = lookups.current[lookupKey];
+    const value = resolved ? display(resolved) : !target ? '' : lookup?.missing ? pageNotFoundCopy(target, collection.label) : lookup?.row ? lookup.row.title ? display(lookup.row) : target : target;
+    const currentId = resolved?.id ?? lookup?.row?.id;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [q, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const [refresh, setRefresh] = useState(0);
+    const [rows, setRows] = useState([]);
+    const [more, setMore] = useState(false);
+    const [reveal, setReveal] = useState(8);
+    const [active, setActive] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const revision = useRef(0);
+    const firstNew = useRef(null);
+    const locked = reasonFor(test, 'arms');
+    const saving = test.saving === 'saving';
+    const blocked = Boolean(locked || saving);
+    const reset = ()=>{
+        setPage(1);
+        setReveal(8);
+        setActive(null);
+        firstNew.current = null;
+        setRefresh((value)=>value + 1);
+    };
+    const close = ()=>{
+        setOpen(false);
+        setActive(null);
+    };
+    const show = (query = '')=>{
+        if (blocked || open) return;
+        setSearch(query);
+        setQuery(query);
+        setRows([]);
+        setMore(false);
+        setActive(null);
+        reset();
+        setOpen(true);
+    };
+    useEffect(()=>{
+        if (search === q) return;
+        const timer = setTimeout(()=>{
+            setQuery(search);
+            setPage(1);
+            setReveal(8);
+        }, 250);
+        return ()=>clearTimeout(timer);
+    }, [
+        search,
+        q
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        let lastReturn = -Infinity;
+        const focus = ()=>{
+            if (document.visibilityState !== 'visible' || Date.now() - lastReturn < 100) return;
+            lastReturn = Date.now();
+            reset();
+        };
+        const visible = ()=>{
+            if (document.visibilityState === 'visible') focus();
+        };
+        const outside = (event)=>{
+            if (!root.current?.contains(event.target)) close();
+        };
+        window.addEventListener('focus', focus);
+        document.addEventListener('visibilitychange', visible);
+        document.addEventListener('pointerdown', outside);
+        document.addEventListener('click', outside);
+        return ()=>{
+            window.removeEventListener('focus', focus);
+            document.removeEventListener('visibilitychange', visible);
+            document.removeEventListener('pointerdown', outside);
+            document.removeEventListener('click', outside);
+        };
+    }, [
+        open
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const controller = new AbortController();
+        const request = ++revision.current;
+        setLoading(true);
+        setError('');
+        void api.pages({
+            collection: collection.slug,
+            q,
+            page
+        }, controller.signal).then((result)=>{
+            if (controller.signal.aborted || !isLatestPageRequest(request, revision.current)) return;
+            if (result.ok && result.data) {
+                // These rows belong to this request; a reset/search aborts it. Commit the
+                // pending highlight with the rows, before a final page can remove More.
+                const combined = page === 1 ? result.data.docs : [
+                    ...rows,
+                    ...result.data.docs
+                ];
+                const nextRows = combined.filter((row, index)=>combined.findIndex((item)=>item.id === row.id) === index);
+                setRows(nextRows);
+                if (firstNew.current != null) {
+                    const row = nextRows[firstNew.current];
+                    setActive(row ? String(row.id) : null);
+                    firstNew.current = null;
+                }
+                setMore(result.data.hasNextPage);
+            } else {
+                setMore(false);
+                setError(C.error);
+                firstNew.current = null;
+            }
+            setLoading(false);
+        });
+        return ()=>controller.abort();
+    }, [
+        api,
+        collection.slug,
+        q,
+        page,
+        refresh,
+        open
+    ]);
+    const visibleRows = rows.slice(0, reveal);
+    const hasMore = rows.length > reveal || more;
+    const optionKeys = [
+        ...visibleRows.map((row)=>String(row.id)),
+        ...hasMore ? [
+            'more'
+        ] : []
+    ];
+    const activeKey = active != null && optionKeys.includes(active) ? active : undefined;
+    useEffect(()=>{
+        if (open && activeKey) root.current?.ownerDocument.getElementById(`${id}-option-${activeKey}`)?.scrollIntoView?.({
+            block: 'nearest'
+        });
+    }, [
+        open,
+        activeKey,
+        id
+    ]);
+    const disabled = (row)=>disabledPageReason(row, armKey, test.doc?.arms ?? [], test.preflight?.pagePlacements, test.chosenPages, collection.label, collection.slug);
+    const choose = (key)=>{
+        if (blocked) return;
+        if (key === 'more') {
+            if (loading) return;
+            const offset = visibleRows.length;
+            const nextReveal = offset + 8;
+            setReveal(nextReveal);
+            if (rows[offset]) setActive(String(rows[offset].id));
+            else firstNew.current = offset;
+            if (more && rows.length < nextReveal) {
+                setLoading(true);
+                setPage((count)=>count + 1);
+            }
+            return;
+        }
+        const row = rows.find((item)=>String(item.id) === key);
+        if (!arm || !row || row.path === null || disabled(row)) return;
+        void test.choosePage(arm.key, {
+            id: row.id,
+            path: row.path,
+            title: row.title,
+            published: row.published
+        });
+        close();
+        root.current?.querySelector('input')?.focus();
+    };
+    const label = pageFieldCopy(arm?.label ?? armKey);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: root,
+        className: "xp-page-combobox",
+        children: [
+            /*#__PURE__*/ _jsx(TextInput, {
+                id: id,
+                label: label,
+                role: "combobox",
+                "aria-autocomplete": "list",
+                autoComplete: "off",
+                "aria-expanded": open,
+                "aria-controls": `${id}-list`,
+                "aria-activedescendant": open && activeKey ? `${id}-option-${activeKey}` : undefined,
+                placeholder: C.choose,
+                value: open ? search : value,
+                disabled: Boolean(locked),
+                readOnly: saving,
+                "aria-disabled": saving || undefined,
+                onClick: ()=>show(),
+                onBlur: (event)=>{
+                    if (!root.current?.contains(event.relatedTarget)) close();
+                },
+                onPaste: (event)=>{
+                    if (blocked || open) return;
+                    event.preventDefault();
+                    show(event.clipboardData.getData('text/plain'));
+                },
+                onChange: (event)=>{
+                    if (blocked) return;
+                    if (!open) {
+                        show(event.nativeEvent.data ?? '');
+                        return;
+                    }
+                    const query = event.currentTarget.value;
+                    if (query === q) reset();
+                    setSearch(query);
+                    setRows([]);
+                    setMore(false);
+                    setActive(null);
+                    setReveal(8);
+                    setLoading(true);
+                    setError('');
+                    firstNew.current = null;
+                    revision.current++;
+                },
+                onKeyDown: (event)=>{
+                    if (event.key === 'Escape' || event.key === 'Tab' || event.altKey && event.key === 'ArrowUp') {
+                        if (open) {
+                            if (event.key !== 'Tab') event.preventDefault();
+                            close();
+                        }
+                        return;
+                    }
+                    if (blocked) return;
+                    if (!open && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                        event.preventDefault();
+                        show(event.key);
+                        return;
+                    }
+                    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                        event.preventDefault();
+                        if (!open) {
+                            show();
+                            return;
+                        }
+                        const index = activeKey ? optionKeys.indexOf(activeKey) : event.key === 'ArrowDown' ? -1 : optionKeys.length;
+                        setActive(optionKeys[Math.max(0, Math.min(optionKeys.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)))] ?? null);
+                    } else if (open && activeKey && (event.key === 'Home' || event.key === 'End')) {
+                        event.preventDefault();
+                        setActive(optionKeys[event.key === 'Home' ? 0 : optionKeys.length - 1] ?? null);
+                    } else if (open && activeKey && event.key === 'Enter' && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229) {
+                        event.preventDefault();
+                        choose(activeKey);
+                    }
+                }
+            }),
+            open ? /*#__PURE__*/ _jsxs("div", {
+                className: "xp-page-combobox-popup",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        id: `${id}-list`,
+                        role: "listbox",
+                        "aria-label": label,
+                        children: [
+                            visibleRows.map((row)=>{
+                                const reason = disabled(row);
+                                const selected = currentId != null ? String(row.id) === String(currentId) : matches(row.path);
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    role: "option",
+                                    id: `${id}-option-${row.id}`,
+                                    "aria-selected": selected,
+                                    "aria-disabled": Boolean(reason) || undefined,
+                                    "data-active": activeKey === String(row.id) || undefined,
+                                    className: "xp-page-option",
+                                    onMouseDown: (event)=>event.preventDefault(),
+                                    onClick: ()=>choose(String(row.id)),
+                                    children: [
+                                        /*#__PURE__*/ _jsx("strong", {
+                                            children: row.title
+                                        }),
+                                        selected ? /*#__PURE__*/ _jsx("span", {
+                                            className: "xp-page-option-check",
+                                            "aria-hidden": "true",
+                                            children: "✓"
+                                        }) : null,
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            className: "xp-page-option-detail",
+                                            children: [
+                                                row.path,
+                                                row.published === false ? ` · ${C.draft}` : '',
+                                                reason ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("br", {}),
+                                                        reason
+                                                    ]
+                                                }) : null
+                                            ]
+                                        })
+                                    ]
+                                }, row.id);
+                            }),
+                            hasMore ? /*#__PURE__*/ _jsx("div", {
+                                role: "option",
+                                id: `${id}-option-more`,
+                                className: "xp-page-option",
+                                "data-active": activeKey === 'more' || undefined,
+                                "aria-disabled": loading || undefined,
+                                onMouseDown: (event)=>event.preventDefault(),
+                                onClick: ()=>choose('more'),
+                                children: C.more
+                            }) : null
+                        ]
+                    }),
+                    loading && !rows.length ? /*#__PURE__*/ _jsx("p", {
+                        role: "status",
+                        children: C.loading
+                    }) : null,
+                    !loading && !error && !rows.length ? /*#__PURE__*/ _jsx("p", {
+                        role: "status",
+                        children: C.empty
+                    }) : null,
+                    error ? /*#__PURE__*/ _jsxs("div", {
+                        role: "alert",
+                        children: [
+                            error,
+                            " ",
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: reset,
+                                children: C.retry
+                            })
+                        ]
+                    }) : null
+                ]
+            }) : null
+        ]
+    });
+}

package/dist/admin/surface/pagePicker/pagePicker.css

@@ -0,0 +1,10 @@
+.xp-page-combobox { position: relative; width: 100%; min-width: 0; }
+.xp-page-combobox input { width: 100%; }
+.xp-page-combobox-popup { position: absolute; inset-inline: 0; z-index: 5; max-height: 24rem; overflow-y: auto; background: var(--xp-surface); color: var(--xp-text); border: 1px solid var(--xp-border-strong); border-radius: var(--xp-radius-control); padding: var(--xp-space-1); }
+.xp-page-option { position: relative; display: block; width: 100%; box-sizing: border-box; text-align: left; padding: var(--xp-space-3); padding-inline-end: var(--xp-space-6); border: 2px solid transparent; border-radius: var(--xp-radius-control); cursor: pointer; color: var(--xp-text); background: var(--xp-surface); overflow-wrap: anywhere; }
+.xp-page-option-detail { display: block; color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-page-option[aria-selected='true'] { border-color: var(--xp-accent); }
+.xp-page-option-check { position: absolute; inset-inline-end: var(--xp-space-2); top: var(--xp-space-3); color: var(--xp-accent); }
+.xp-page-option[data-active='true'] { background: var(--xp-surface-2); outline: 2px solid var(--xp-focus); outline-offset: -4px; }
+.xp-page-option[aria-disabled='true'] { cursor: not-allowed; border-color: var(--xp-text-2); border-style: dashed; }
+.xp-page-option[aria-disabled='true'] strong { font-weight: 400; }

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

@@ -6,6 +6,8 @@ export type PageCollection = NonNullable<TestsSurfaceProps['pageCollections']>[n
 export type PageSelections = Partial<Record<Arm['key'], {
     id: DocId;
     path: string;
+    title?: string;
+    published?: boolean;
 }>>;
 /** The server resolves legacy collections; the client consumes its placements verbatim. */
 export declare function testPageCollection(collections: readonly PageCollection[] | undefined, doc: {

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

@@ -30,6 +30,7 @@ const versions = row('versions', (detail)=>versionsNext(detailText(detail, C.ver
     },
     'invalid-status': row('header', ()=>null),
     'no-placements': row('what', (detail)=>detail === undefined ? C.noPlacements : placementFailureCopy(detail)),
+    'placement-removed': row('what', ()=>C.placementRemoved),
     'placement-unpublished': {
         ...row('versions', (detail)=>(Array.isArray(detail) && detail.length ? detail : [
                 detail

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { surfaceUrls } from '../../surfaceUrls.js';
 import { useEffect, useState } from 'react';
 import { formatAdminURL } from 'payload/shared';
 import { SurfaceShell } from '../SurfaceShell.js';
@@ -69,10 +70,7 @@ export function ResultsHeader({ test, surface, resultsVersion, children, actions
         crumbs: [
             {
                 label: C.tests,
-                href: formatAdminURL({
-                    adminRoute: surface.adminRoute,
-                    path: '/experiments'
-                })
+                href: surface.canManage ? surfaceUrls.home(surface.adminRoute) : undefined
             },
             {
                 label: doc.name,
@@ -157,10 +155,7 @@ export function ReaderResultsShell({ surface, children, data }) {
         crumbs: [
             {
                 label: C.tests,
-                href: formatAdminURL({
-                    adminRoute: surface.adminRoute,
-                    path: '/experiments'
-                })
+                href: surface.canManage ? surfaceUrls.home(surface.adminRoute) : undefined
             },
             {
                 label: title

package/dist/admin/surface/results/useResults.d.ts

@@ -29,6 +29,13 @@ export declare function useResults(id: DocId, { apiRoute, canReadResults, canMan
     canManage?: boolean;
 }): {
     api: {
+        findTestIdBySlug: (slug: string) => Promise<Extract<ApiResult<DocId>, {
+            ok: false;
+        }> | {
+            ok: true;
+            data: DocId;
+        }>;
+        deleteTest: (id: DocId) => Promise<ApiResult<unknown>>;
         wrapBlock: (body: import("../../../types/endpoints.js").WrapBlockBody) => Promise<ApiResult<Record<string, unknown>>>;
         pages: (query: {
             collection: string;
@@ -40,11 +47,13 @@ export declare function useResults(id: DocId, { apiRoute, canReadResults, canMan
         start: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         allocate: (id: DocId, body: import("../../../types/endpoints.js").AllocateBody, options?: {
             notFound?: string;
+            forbidden?: string;
             codes?: Readonly<Record<string, string>>;
             fallback?: string;
         }) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         addMetric: (id: DocId, body: import("../../../types/endpoints.js").AddMetricBody, options?: {
             notFound?: string;
+            forbidden?: string;
             codes?: Readonly<Record<string, string>>;
             fallback?: string;
         }) => Promise<ApiResult<import("../../../types/endpoints.js").AddMetricResult>>;
@@ -64,6 +73,7 @@ export declare function useResults(id: DocId, { apiRoute, canReadResults, canMan
             series?: boolean;
         } & {
             notFound?: string;
+            forbidden?: string;
             codes?: Readonly<Record<string, string>>;
             fallback?: string;
         }) => Promise<ApiResult<ResultsResponse>>;

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

@@ -3,7 +3,7 @@ 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, useMemo, useState } from 'react';
-import { formatAdminURL } from 'payload/shared';
+import { surfaceUrls } from '../../surfaceUrls.js';
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 import { METRIC_KIND_LABELS } from '../../copy/metrics.js';
 import { isClickSource } from '../../../goals/key.js';
@@ -217,12 +217,9 @@ export function GoalSection({ test, surface }) {
                     children: /*#__PURE__*/ _jsx(Button, {
                         variant: "link",
                         size: "sm",
-                        href: formatAdminURL({
-                            adminRoute: surface.adminRoute,
-                            path: `/experiments/goals${!reason ? `?${new URLSearchParams({
-                                return: String(doc.id)
-                            })}` : ''}`
-                        }),
+                        href: surfaceUrls.goals(surface.adminRoute, !reason ? {
+                            return: String(doc.id)
+                        } : undefined),
                         children: C.manageGoals
                     })
                 }),

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { surfaceUrls } from '../../surfaceUrls.js';
 import { useEffect, useState } from 'react';
 import { formatAdminURL } from 'payload/shared';
 import { useTestDocument } from '../useTestDocument.js';
@@ -38,10 +39,7 @@ export function TestPage({ id, surface, onTitleChange }) {
         crumbs: [
             {
                 label: C.tests,
-                href: formatAdminURL({
-                    adminRoute: surface.adminRoute,
-                    path: '/experiments'
-                })
+                href: surfaceUrls.home(surface.adminRoute)
             },
             {
                 label: C.test
@@ -72,10 +70,7 @@ export function TestPage({ id, surface, onTitleChange }) {
         crumbs: [
             {
                 label: C.tests,
-                href: formatAdminURL({
-                    adminRoute: surface.adminRoute,
-                    path: '/experiments'
-                })
+                href: surfaceUrls.home(surface.adminRoute)
             },
             {
                 label: test.doc.name

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

@@ -1,15 +1,14 @@
 '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 { useState } from 'react';
+import { normalisePath } from '../../../runtime/normalisePath.js';
 import { CopyRoute } from '../pagePicker/CopyRoute.js';
-import { PagePicker } from '../pagePicker/PagePicker.js';
+import { PageCombobox } from '../pagePicker/PageCombobox.js';
 import { testPageCollection } from '../pagePicker/pagePicker.model.js';
 import { PAGE_COPY as P } from '../../copy/pages.js';
 import { FieldErrors, reasonFor, save, TextEdit } from './fields.js';
 export function VersionContent({ test, surface, armIndex }) {
-    const [open, setOpen] = useState(false);
     const arm = test.doc?.arms[armIndex];
     if (!arm || !test.doc) return null;
     if (!showsPageTarget(test.doc.kind, arm.kind)) return /*#__PURE__*/ _jsx("span", {
@@ -17,14 +16,13 @@ export function VersionContent({ test, surface, armIndex }) {
         children: C.holdoutContent
     });
     const collection = testPageCollection(surface.pageCollections, test.doc, test.preflight?.pagePlacements);
-    const placement = test.preflight?.pagePlacements?.find((entry)=>entry.arm === arm.key);
+    const placement = test.preflight?.pagePlacements?.find((entry)=>entry.arm === arm.key && entry.collection === collection?.slug && entry.id != null && arm.pageTarget && normalisePath(entry.path) === normalisePath(arm.pageTarget));
     if (collection) {
-        const picker = /*#__PURE__*/ _jsx(PagePicker, {
+        const picker = /*#__PURE__*/ _jsx(PageCombobox, {
             collection: collection,
             test: test,
             armKey: arm.key,
-            apiRoute: surface.apiRoute,
-            onChoose: ()=>setOpen(false)
+            apiRoute: surface.apiRoute
         });
         return /*#__PURE__*/ _jsxs("div", {
             className: "xp-version-content xp-version-content--page",
@@ -32,27 +30,6 @@ export function VersionContent({ test, surface, armIndex }) {
                 /*#__PURE__*/ _jsx("strong", {
                     children: P.where
                 }),
-                /*#__PURE__*/ _jsx("p", {
-                    children: placement?.id != null ? /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            placement.title,
-                            " · ",
-                            placement.path,
-                            !placement.published ? /*#__PURE__*/ _jsxs(_Fragment, {
-                                children: [
-                                    " · ",
-                                    P.draft
-                                ]
-                            }) : null
-                        ]
-                    }) : arm.pageTarget ? /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            arm.pageTarget,
-                            " · ",
-                            P.draft
-                        ]
-                    }) : P.noPage
-                }),
                 placement?.id != null ? /*#__PURE__*/ _jsxs("div", {
                     children: [
                         placement.editorUrl ? /*#__PURE__*/ _jsx("a", {
@@ -70,16 +47,10 @@ export function VersionContent({ test, surface, armIndex }) {
                         }) : null
                     ]
                 }) : null,
-                /*#__PURE__*/ _jsx("button", {
-                    type: "button",
-                    disabled: !!reasonFor(test, 'arms'),
-                    onClick: ()=>setOpen((value)=>!value),
-                    children: open ? P.close : arm.pageTarget ? P.change : P.choose
-                }),
-                open ? arm.kind === 'variant' ? /*#__PURE__*/ _jsx(CopyRoute, {
-                    collection: collection,
-                    children: picker
-                }) : picker : null,
+                arm.kind === 'variant' ? /*#__PURE__*/ _jsx(CopyRoute, {
+                    collection: collection
+                }) : null,
+                picker,
                 /*#__PURE__*/ _jsx(FieldErrors, {
                     test: test,
                     path: `arms.${armIndex}.pageTarget`

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

@@ -16,11 +16,6 @@
 .xp-version-content { display: flex; flex-wrap: nowrap; gap: var(--xp-space-2); align-items: center; min-width: 0; }
 .xp-version-content .xp-ui-button { white-space: nowrap; }
 .xp-version-content--page { flex-direction: column; align-items: stretch; gap: var(--xp-space-3); }
-.xp-version-content--page > button { align-self: flex-start; }
-.xp-page-picker input[type="search"] { width: 100%; }
-.xp-page-picker ul { list-style: none; padding: 0; margin-block: var(--xp-space-3); }
-.xp-page-picker li > button { display: block; width: 100%; text-align: left; }
-.xp-page-picker li > p { color: var(--xp-text-2); font: var(--xp-text-small); }
 .xp-copy-route ol { list-style: decimal; padding-inline-start: var(--xp-space-6); }
 .xp-content-chip { flex-shrink: 0; display: inline-flex; width: fit-content; border-radius: var(--xp-radius-chip); padding: var(--xp-space-half) var(--xp-space-2); font: var(--xp-text-small); background: var(--xp-surface-2); color: var(--xp-text-2); }
 .xp-content-chip.xp-content-ready { background: var(--xp-success-bg); color: var(--xp-success); }

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

@@ -13,10 +13,14 @@ export declare function useTestDocument(id: DocId, { apiRoute, refetchPreflightO
     choosePage: (arm: Arm["key"], page: {
         id: DocId;
         path: string;
+        title?: string;
+        published?: boolean;
     }) => Promise<void>;
     chosenPages: Partial<Record<Arm["key"], {
         id: DocId;
         path: string;
+        title?: string;
+        published?: boolean;
     }>>;
     doc: TestDocument | null;
     preflight: PreflightResult | null;