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

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

@@ -1,20 +1,30 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Link, Pill } from '@payloadcms/ui';
+import { Link } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
-import { GOALS_COPY as C } from '../../copy/goals.js';
+import { Banner, EmptyState } from '../../../ui/Feedback.js';
+import { Button } from '../../../ui/Button.js';
+import { SearchInput } from '../../../ui/Inputs.js';
+import { SurfaceShell } from '../SurfaceShell.js';
+import { SURFACE_COPY } from '../../copy/surface.js';
+import { GOALS_COPY as C, goalsNoMatches, goalUsedBy } from '../../copy/goals.js';
+import { METRIC_KIND_LABELS } from '../../copy/metrics.js';
 import { goalUsage } from './goals.model.js';
 import { goalPages } from './data.js';
-import { GoalsBreadcrumb } from './GoalsBreadcrumb.js';
 import './goals.css';
 export function GoalsList({ surface, returnToTest }) {
     const [data, setData] = useState();
     const [error, setError] = useState('');
     const [attempt, setAttempt] = useState(0);
+    const [search, setSearch] = useState('');
     const returnQuery = returnToTest ? `?${new URLSearchParams({
         return: returnToTest
     })}` : '';
+    const url = (path)=>formatAdminURL({
+            adminRoute: surface.adminRoute,
+            path
+        });
     useEffect(()=>{
         const controller = new AbortController();
         setData(undefined);
@@ -37,99 +47,123 @@ export function GoalsList({ surface, returnToTest }) {
         attempt
     ]);
     const usage = goalUsage(data?.tests ?? []);
-    const newGoal = /*#__PURE__*/ _jsx(Link, {
-        className: "xp-tests-primary",
-        href: formatAdminURL({
-            adminRoute: surface.adminRoute,
-            path: `/experiments/goals/new${returnQuery}`
-        }),
+    const showSearch = (data?.goals.length ?? 0) > 8;
+    const goals = data?.goals.filter((goal)=>!showSearch || goal.name.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())) ?? [];
+    const newGoal = surface.canManage ? /*#__PURE__*/ _jsx(Button, {
+        variant: "primary",
+        href: url(`/experiments/goals/new${returnQuery}`),
         children: C.newGoal
-    });
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "xp-goals",
-        children: [
-            /*#__PURE__*/ _jsx(GoalsBreadcrumb, {
-                adminRoute: surface.adminRoute
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "xp-tests-toolbar",
-                children: [
-                    /*#__PURE__*/ _jsx("h1", {
-                        children: C.title
-                    }),
-                    newGoal
-                ]
-            }),
-            error ? /*#__PURE__*/ _jsxs("p", {
-                role: "alert",
-                children: [
-                    error,
-                    ' ',
-                    /*#__PURE__*/ _jsx("button", {
-                        type: "button",
+    }) : null;
+    return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: C.title,
+        crumbs: [
+            {
+                label: SURFACE_COPY.title,
+                href: url('/experiments')
+            },
+            {
+                label: C.title
+            }
+        ],
+        actions: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                returnToTest ? /*#__PURE__*/ _jsx(Button, {
+                    variant: "quiet",
+                    href: url(`/experiments/${encodeURIComponent(returnToTest)}`),
+                    children: C.backToTest
+                }) : null,
+                newGoal
+            ]
+        }),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-goals",
+            children: [
+                showSearch ? /*#__PURE__*/ _jsx(SearchInput, {
+                    id: "xp-goals-search",
+                    label: C.search,
+                    placeholder: C.search,
+                    value: search,
+                    onChange: (event)=>setSearch(event.target.value)
+                }) : null,
+                error ? /*#__PURE__*/ _jsx(Banner, {
+                    tone: "error",
+                    action: /*#__PURE__*/ _jsx(Button, {
+                        size: "sm",
                         onClick: ()=>setAttempt((n)=>n + 1),
                         children: C.retry
-                    })
-                ]
-            }) : !data ? /*#__PURE__*/ _jsx("p", {
-                role: "status",
-                children: C.loading
-            }) : !data.goals.length ? /*#__PURE__*/ _jsx("p", {
-                children: C.empty
-            }) : /*#__PURE__*/ _jsx("div", {
-                className: "xp-goals-table",
-                children: /*#__PURE__*/ _jsxs("table", {
-                    children: [
-                        /*#__PURE__*/ _jsx("thead", {
-                            children: /*#__PURE__*/ _jsx("tr", {
-                                children: [
-                                    C.name,
-                                    C.source,
-                                    C.directionColumn,
-                                    C.usedBy,
-                                    C.status
-                                ].map((label)=>/*#__PURE__*/ _jsx("th", {
-                                        scope: "col",
-                                        children: label
-                                    }, label))
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx("tbody", {
-                            children: data.goals.map((goal)=>{
-                                const count = usage.get(goal.id) ?? 0;
-                                return /*#__PURE__*/ _jsxs("tr", {
+                    }),
+                    children: error
+                }) : !data ? /*#__PURE__*/ _jsx("p", {
+                    role: "status",
+                    children: C.loading
+                }) : !data.goals.length ? /*#__PURE__*/ _jsx(EmptyState, {
+                    action: newGoal,
+                    children: C.empty
+                }) : !goals.length ? /*#__PURE__*/ _jsx(EmptyState, {
+                    action: /*#__PURE__*/ _jsx(Button, {
+                        variant: "quiet",
+                        onClick: ()=>setSearch(''),
+                        children: C.clearSearch
+                    }),
+                    children: goalsNoMatches(search)
+                }) : /*#__PURE__*/ _jsx("div", {
+                    className: "xp-tests-list",
+                    children: goals.map((goal)=>{
+                        const count = usage.get(goal.id) ?? 0;
+                        const kind = surface.metricSources.find((source)=>source.id === goal.source)?.kind;
+                        const label = kind && Object.hasOwn(METRIC_KIND_LABELS, kind) ? METRIC_KIND_LABELS[kind] : undefined;
+                        const href = url(`/experiments/goals/${encodeURIComponent(String(goal.id))}${returnQuery}`);
+                        return /*#__PURE__*/ _jsxs("article", {
+                            className: "xp-tests-row",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "xp-tests-row-main",
                                     children: [
-                                        /*#__PURE__*/ _jsx("th", {
-                                            scope: "row",
-                                            children: /*#__PURE__*/ _jsx(Link, {
-                                                href: formatAdminURL({
-                                                    adminRoute: surface.adminRoute,
-                                                    path: `/experiments/goals/${encodeURIComponent(String(goal.id))}${returnQuery}`
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "xp-tests-row-name",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Link, {
+                                                    href: href,
+                                                    children: goal.name
                                                 }),
-                                                children: goal.name
-                                            })
-                                        }),
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: surface.metricSources.find((source)=>source.id === goal.source)?.label ?? goal.source
-                                        }),
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: goal.direction === 'decrease' ? C.decrease : C.increase
+                                                label ? /*#__PURE__*/ _jsx("span", {
+                                                    className: "xp-tests-kind",
+                                                    children: label[0].toUpperCase() + label.slice(1)
+                                                }) : null
+                                            ]
                                         }),
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: count
-                                        }),
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: /*#__PURE__*/ _jsx(Pill, {
-                                                children: count ? C.inUse : C.unused
-                                            })
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "xp-tests-row-line",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: goal.direction === 'decrease' ? C.decrease : C.increase
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    "aria-hidden": "true",
+                                                    children: "·"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: count ? goalUsedBy(count) : C.unused
+                                                })
+                                            ]
                                         })
                                     ]
-                                }, `${typeof goal.id}:${goal.id}`);
-                            })
-                        })
-                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    className: "xp-tests-row-action",
+                                    variant: returnToTest ? 'primary' : 'secondary',
+                                    size: "sm",
+                                    href: returnToTest ? url(`/experiments/${encodeURIComponent(returnToTest)}?${new URLSearchParams({
+                                        goal: String(goal.id)
+                                    })}`) : href,
+                                    children: returnToTest ? C.useGoal : C.open
+                                })
+                            ]
+                        }, `${typeof goal.id}:${goal.id}`);
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
 }

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

@@ -1,3 +1,9 @@
-/** REST refusals remain the server's words, including nested field validation errors. */
-export declare function goalResponse(response: Response, fallback: string): Promise<unknown>;
+export declare class GoalResponseError extends Error {
+    readonly fields: Record<string, string>;
+    constructor(message: string, fields: Record<string, string>);
+}
+/** Map REST refusals while retaining Payload's field validation details. */
+export declare function goalResponse(response: Response, fallback: string, options?: {
+    notFound?: string;
+}): Promise<unknown>;
 export declare function goalPages<T>(base: string, collection: 'xp-metrics' | 'xp-experiments', signal: AbortSignal): Promise<T[]>;

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

@@ -1,24 +1,32 @@
+import { DocsResponseError, fetchAllDocs } from '../../../lib/fetchAllDocs.js';
+import { refusalMessage } from '../../copy/common.js';
 import { GOALS_COPY as C } from '../../copy/goals.js';
 import { payloadFieldErrors } from '../testDocument.model.js';
-/** REST refusals remain the server's words, including nested field validation errors. */ export async function goalResponse(response, fallback) {
-    const body = await response.json().catch(()=>undefined);
-    if (!response.ok) {
-        const messages = Object.values(payloadFieldErrors(body, '_section', fallback));
-        throw new Error(messages.length ? messages.join(' ') : fallback);
+export class GoalResponseError extends Error {
+    fields;
+    constructor(message, fields){
+        super(message), this.fields = fields;
     }
+}
+/** Map REST refusals while retaining Payload's field validation details. */ export async function goalResponse(response, fallback, options) {
+    const body = await response.json().catch(()=>undefined);
+    if (!response.ok) goalRefusal(body, response.status, fallback, options);
     if (body == null) throw new Error(fallback);
     return body;
 }
+function goalRefusal(body, status, fallback, options) {
+    const fields = payloadFieldErrors(body, '_section', fallback);
+    const first = body?.errors?.[0];
+    throw new GoalResponseError(refusalMessage(first?.code, status, Object.values(fields).join(' ') || fallback, options), fields);
+}
 export async function goalPages(base, collection, signal) {
-    const all = [];
-    for(let page = 1;; page++){
-        const response = await fetch(`${base}/${collection}?depth=0&limit=100&page=${page}`, {
-            credentials: 'include',
-            signal
-        });
-        const body = await goalResponse(response, C.loadError);
-        if (!Array.isArray(body.docs)) throw new Error(C.loadError);
-        all.push(...body.docs);
-        if (!body.hasNextPage) return all;
-    }
+    const result = await fetchAllDocs(`${base}/${collection}?depth=0`, {
+        credentials: 'include',
+        signal
+    }).catch((cause)=>{
+        if (cause instanceof DocsResponseError) throw new Error(C.loadError);
+        throw cause;
+    });
+    if (!result.ok) goalRefusal(result.body, result.status, C.loadError);
+    return result.docs;
 }

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

@@ -1,15 +1,12 @@
+/* Compact rows reuse surface.css's xp-tests-list / xp-tests-row classes. */
 .xp-goals { display: grid; gap: var(--xp-space-4); }
-.xp-goals-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--xp-space-2); align-items: center; }
-.xp-goals-table { overflow-x: auto; }
-.xp-goals-table table { width: 100%; border-collapse: collapse; text-align: left; }
-.xp-goals-table th, .xp-goals-table td { padding: var(--xp-space-3); border-bottom: 1px solid var(--xp-border); }
+.xp-goals > .xp-ui-field { max-width: 20rem; }
 .xp-goal-form { max-width: 48rem; display: grid; gap: var(--xp-space-4); }
-.xp-goal-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--xp-space-3); }
-.xp-goal-form .xp-field { display: grid; gap: var(--xp-space-2); }
-.xp-goal-form input, .xp-goal-form select {
-  padding: var(--xp-space-3); color: var(--xp-text); background: var(--xp-input-bg); border: 1px solid var(--xp-input-border);
-}
-.xp-goal-form input[readonly] { background: var(--xp-surface); }
-.xp-goal-form details { padding: var(--xp-space-4); border: 1px solid var(--xp-border); }
-.xp-goal-form summary { cursor: pointer; margin-bottom: var(--xp-space-3); }
-.xp-goal-cancel { padding: var(--xp-space-2) var(--xp-space-4); color: var(--xp-text); }
+.xp-goal-card { display: grid; gap: var(--xp-space-4); }
+.xp-goal-card > h2 { margin: 0; font: var(--xp-text-title); }
+.xp-goal-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--xp-space-4); }
+.xp-goal-form input[readonly] { background: var(--xp-surface-2); }
+.xp-goal-advanced { border: 1px solid var(--xp-border); border-radius: var(--xp-radius); }
+.xp-goal-advanced > summary { padding: var(--xp-space-4); cursor: pointer; font: var(--xp-text-body); }
+.xp-goal-advanced > summary:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-goal-advanced-fields { display: grid; gap: var(--xp-space-4); padding: 0 var(--xp-space-4) var(--xp-space-4); }

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

@@ -1,17 +1,18 @@
-import type { DocId, ExperimentKind, Status } from '../../types/contracts.js';
+import type { Arm, DocId, ExperimentKind, Status, UnitType } from '../../types/contracts.js';
 import type { SummaryResponse } from '../../types/endpoints.js';
+import type { ReadinessContext } from './readiness/readiness.model.js';
 export interface HomeTest {
     id: DocId;
     name: string;
     kind: ExperimentKind;
     status: Status;
+    unitType: UnitType;
+    updatedAt?: string | null;
+    flagPoint?: string | null;
     analysis?: {
         plannedDurationDays?: number | null;
     } | null;
-    arms?: Array<{
-        key: string;
-        label?: string;
-    }> | null;
+    arms?: Arm[] | null;
     decidedAt?: string | null;
     decision?: {
         winnerArm?: string | null;
@@ -22,10 +23,10 @@ type Summary = SummaryResponse[DocId] | undefined;
 export type Health = 'red' | 'amber' | 'green';
 export declare function healthDot(test: HomeTest, summary: Summary): Health | undefined;
 export declare function groupTests(tests: readonly HomeTest[], summaries: SummaryResponse, search?: string): {
-    label: "Draft" | "Running" | "Decided" | "Archived" | "Needs attention" | "Ready to start";
+    label: "Needs attention" | "Running" | "Decided" | "Draft" | "Archived" | "Ready to start";
     tests: HomeTest[];
 }[];
-export declare function homeCard(test: HomeTest, summary: Summary, adminRoute: string): {
+export declare function homeCard(test: HomeTest, summary: Summary, adminRoute: string, flagPoints?: ReadinessContext['flagPoints']): {
     kind: "Whole page" | "Page block" | "Setting";
     pill: {
         label: string;
@@ -33,7 +34,6 @@ export declare function homeCard(test: HomeTest, summary: Summary, adminRoute: s
         tooltip: string;
     };
     line: string;
-    headline: string | undefined;
     health: Health | undefined;
     href: string;
     action: "Continue setup" | "View results" | "Open";

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

@@ -1,13 +1,16 @@
 import { formatAdminURL } from 'payload/shared';
+import { formatDate } from '../format/date.js';
 import { armLabel } from '../labels.js';
 import { statusPill } from '../status.model.js';
 import { decidedLine, runningLine, SURFACE_COPY } from '../copy/surface.js';
+import { nextCopy } from '../copy/readiness.js';
+import { READINESS } from './readiness/readiness.model.js';
+import { sanitizeReadinessDetail } from '../../sanitizeReadinessDetail.js';
 export function healthDot(test, summary) {
     const code = summary?.verdict?.code;
-    if (!code) return undefined;
-    if (code === 'data-problem' || code === 'guardrail-failing') return 'red';
-    if (code === 'unavailable' || code === 'collecting' && test.analysis?.plannedDurationDays != null && summary.days > test.analysis.plannedDurationDays) return 'amber';
-    return 'green';
+    if (summary?.health?.some((item)=>item.code === 'version-page-unavailable') || code === 'data-problem' || code === 'guardrail-failing') return 'red';
+    if (summary?.health?.length || code === 'unavailable' || code === 'collecting' && test.analysis?.plannedDurationDays != null && summary.days > test.analysis.plannedDurationDays) return 'amber';
+    return code ? 'green' : undefined;
 }
 export function groupTests(tests, summaries, search = '') {
     const groups = SURFACE_COPY.groups.map((label)=>({
@@ -27,31 +30,39 @@ export function groupTests(tests, summaries, search = '') {
 const number = (value)=>value != null && Number.isFinite(value) ? new Intl.NumberFormat('en-US', {
         maximumFractionDigits: 0
     }).format(value) : '—';
-export function homeCard(test, summary, adminRoute) {
+export function homeCard(test, summary, adminRoute, flagPoints) {
     const results = [
         'running',
         'stopped',
-        'decided'
+        'decided',
+        'archived'
     ].includes(test.status);
     const href = formatAdminURL({
         adminRoute,
         path: `/experiments/${encodeURIComponent(test.id)}${results ? '/results' : ''}`
     });
-    let line = summary?.ready ? SURFACE_COPY.ready : SURFACE_COPY.next;
+    let line = summary?.ready === true ? SURFACE_COPY.ready : nextCopy(SURFACE_COPY.next);
+    const next = summary?.next;
+    if ((test.status === 'draft' || test.status === 'stopped') && summary?.ready !== true && next && Object.hasOwn(READINESS, next.code)) {
+        // Keep unexpected text out of authored copy, including responses from older servers.
+        const sentence = READINESS[next.code].next(sanitizeReadinessDetail(next.code, next.detail), {
+            ...test,
+            arms: test.arms ?? [],
+            flagPoints
+        });
+        if (sentence) line = nextCopy(sentence);
+    }
     if (test.status === 'running') line = runningLine(number(summary?.days), number(test.analysis?.plannedDurationDays), number(summary?.exposures));
     if (test.status === 'decided') {
-        const date = test.decidedAt ? new Date(test.decidedAt) : undefined;
         const winner = test.decision?.winnerArm;
-        line = decidedLine(date && Number.isFinite(date.valueOf()) ? date.toLocaleDateString('en-US', {
-            timeZone: 'UTC'
-        }) : '—', winner ? armLabel(winner, test.arms?.find((arm)=>arm.key === winner)?.label) : '—');
+        const winnerLabel = test.arms?.find((arm)=>arm.key === winner)?.label?.trim();
+        line = decidedLine(formatDate(test.decidedAt), winner ? winnerLabel || armLabel(winner) : '—');
     }
     if (test.status === 'archived') line = statusPill(test).label;
     return {
         kind: SURFACE_COPY.kinds[test.kind],
         pill: statusPill(test),
         line,
-        headline: test.status === 'running' ? summary?.verdict?.headline : undefined,
         health: healthDot(test, summary),
         href,
         action: results ? SURFACE_COPY.results : test.status === 'draft' || test.status === 'stopped' ? SURFACE_COPY.continue : SURFACE_COPY.open

package/dist/admin/surface/newTest/NewTest.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { fetchAllDocs } from '../../../lib/fetchAllDocs.js';
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation.js';
 import { formatAdminURL } from 'payload/shared';
@@ -28,14 +29,13 @@ export function NewTest({ surface, pages }) {
         setLayerState('loading');
         void (async ()=>{
             try {
-                const response = await fetch(`${surface.apiRoute.replace(/\/$/, '')}/xp-layers?depth=0&limit=100`, {
+                const response = await fetchAllDocs(`${surface.apiRoute.replace(/\/$/, '')}/xp-layers?depth=0`, {
                     credentials: 'include',
                     signal: controller.signal
                 });
-                const body = await response.json();
-                if (!response.ok || !Array.isArray(body?.docs)) throw new Error('groups');
+                if (!response.ok) throw new Error('groups');
                 if (!controller.signal.aborted) {
-                    setLayers(body.docs);
+                    setLayers(response.docs);
                     setLayerState('ready');
                 }
             } catch  {
@@ -80,12 +80,12 @@ export function NewTest({ surface, pages }) {
     const collections = [
         ...new Set(pages?.map((page)=>page.collection))
     ];
-    return /*#__PURE__*/ _jsxs("main", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: "xp-new-test",
         children: [
             step === 'kind' ? /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx("h1", {
+                    /*#__PURE__*/ _jsx("h2", {
                         children: C.question
                     }),
                     /*#__PURE__*/ _jsxs("div", {
@@ -131,7 +131,7 @@ export function NewTest({ surface, pages }) {
                 ]
             }) : step === 'block' ? /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx("h1", {
+                    /*#__PURE__*/ _jsx("h2", {
                         children: C.block
                     }),
                     /*#__PURE__*/ _jsx("p", {
@@ -169,7 +169,7 @@ export function NewTest({ surface, pages }) {
                 ]
             }) : step === 'setting' ? /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx("h1", {
+                    /*#__PURE__*/ _jsx("h2", {
                         children: C.chooseSetting
                     }),
                     /*#__PURE__*/ _jsxs("fieldset", {
@@ -289,7 +289,7 @@ export function NewTest({ surface, pages }) {
                     void submit();
                 },
                 children: [
-                    /*#__PURE__*/ _jsx("h1", {
+                    /*#__PURE__*/ _jsx("h2", {
                         children: C.nameQuestion
                     }),
                     /*#__PURE__*/ _jsxs("label", {

package/dist/admin/surface/pageBlock/parts.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TEST_PAGE as C } from '../../copy/testPage.js';
+import { Button } from '../../../ui/Button.js';
+import { previewPages } from '../../previewLinks.model.js';
+import { TEST_PAGE as C, placementCount } from '../../copy/testPage.js';
 import { placementLine, slotReady } from './pageBlock.model.js';
 function Binding({ test }) {
     const placements = test.preflight?.placements ?? [];
@@ -8,16 +10,20 @@ function Binding({ test }) {
         className: "xp-page-binding",
         children: placements.length ? /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                placements.map((placement, index)=>/*#__PURE__*/ _jsxs("p", {
+                previewPages(placements).map((placement)=>/*#__PURE__*/ _jsxs("p", {
+                        className: "xp-ui-button-group",
                         children: [
                             placementLine(placement),
+                            placement.slotCount > 1 ? placementCount(placement.slotCount) : null,
                             ' ',
-                            placement.editorUrl ? /*#__PURE__*/ _jsx("a", {
+                            placement.editorUrl ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "link",
+                                size: "sm",
                                 href: placement.editorUrl,
                                 children: C.openPage
                             }) : null
                         ]
-                    }, index)),
+                    }, placement.key)),
                 /*#__PURE__*/ _jsx("p", {
                     children: C.editedOnPage
                 })
@@ -30,32 +36,31 @@ function Binding({ test }) {
 function VersionContent({ test, armIndex }) {
     const arm = test.doc?.arms[armIndex];
     if (!arm) return null;
-    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("p", {
+    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("span", {
+        className: "xp-content-chip",
         children: C.holdoutContent
     });
     const placements = test.preflight?.placements ?? [];
-    return /*#__PURE__*/ _jsx("div", {
-        children: placements.length ? placements.map((placement, index)=>/*#__PURE__*/ _jsxs("p", {
-                children: [
-                    /*#__PURE__*/ _jsxs("span", {
-                        children: [
-                            placement.title,
-                            ": "
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: slotReady(placement, arm) ? 'xp-content-ready' : 'xp-content-empty',
-                        children: slotReady(placement, arm) ? C.ready : C.emptySlot
-                    }),
-                    ' ',
-                    placement.editorUrl ? /*#__PURE__*/ _jsx("a", {
-                        href: placement.editorUrl,
+    const pages = previewPages(placements);
+    const ready = placements.length > 0 && placements.every((placement)=>slotReady(placement, arm));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-version-content",
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: `xp-content-chip ${ready ? 'xp-content-ready' : 'xp-content-empty'}`,
+                children: ready ? C.ready : C.empty
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-ui-button-group",
+                children: pages.filter((page)=>page.editorUrl).map((page)=>/*#__PURE__*/ _jsx(Button, {
+                        variant: "link",
+                        size: "sm",
+                        href: page.editorUrl,
+                        "aria-label": pages.length > 1 ? `${C.editOnPage}: ${page.title}` : undefined,
                         children: C.editOnPage
-                    }) : null
-                ]
-            }, index)) : /*#__PURE__*/ _jsx("p", {
-            children: C.emptySlot
-        })
+                    }, page.key))
+            })
+        ]
     });
 }
 export const pageBlockParts = {