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

package/dist/admin/api.js

@@ -3,11 +3,14 @@ import { CONTENT_ENTRY_REFUSALS } from './copy/actions.js';
 export function createApi(apiBase) {
     const base = `${apiBase.replace(/\/$/, '')}/xp/experiments`;
     const route = (id, action)=>`${base}/${encodeURIComponent(id)}/${action}`;
-    async function request(path, method, body, options) {
+    async function request(path, method, body, options, signal) {
         try {
             const response = await fetch(path(), {
                 method,
                 credentials: 'include',
+                ...signal ? {
+                    signal
+                } : {},
                 ...body === undefined ? {} : {
                     headers: {
                         'Content-Type': 'application/json'
@@ -48,7 +51,7 @@ export function createApi(apiBase) {
                     code
                 } : {},
                 message: refusalMessage(code, response.status, typeof error?.message === 'string' ? error.message : undefined, options),
-                retryable: code === 'commit-unverified' || response.status >= 500 && response.status !== 501
+                retryable: code === 'page-busy' || code === 'commit-unverified' || response.status >= 500 && response.status !== 501
             };
         } catch  {
             return {
@@ -61,6 +64,20 @@ export function createApi(apiBase) {
     }
     const post = (id, action, body, options)=>request(()=>route(id, action), 'POST', body, options);
     return {
+        wrapBlock: (body)=>request(()=>`${apiBase.replace(/\/$/, '')}/xp/blocks/wrap`, 'POST', body),
+        pages: (query, signal)=>request(()=>`${apiBase.replace(/\/$/, '')}/xp/pages?${new URLSearchParams({
+                    collection: query.collection,
+                    ...query.q ? {
+                        q: query.q
+                    } : {},
+                    ...query.path !== undefined ? {
+                        path: query.path
+                    } : {},
+                    ...query.page ? {
+                        page: String(query.page)
+                    } : {}
+                })}`, 'GET', undefined, undefined, signal),
+        placementStatus: (body)=>request(()=>`${apiBase.replace(/\/$/, '')}/xp/placements/status`, 'POST', body),
         start: (id)=>post(id, 'start'),
         allocate: (id, body, options)=>post(id, 'allocate', body, options),
         addMetric: (id, body, options)=>post(id, 'add-metric', body, options),
@@ -72,6 +89,7 @@ export function createApi(apiBase) {
         dismissContentEntry: (id, body)=>post(id, 'content-report/dismiss', body, CONTENT_ENTRY_REFUSALS),
         restoreContentEntry: (id, body)=>post(id, 'content-report/restore', body, CONTENT_ENTRY_REFUSALS),
         archive: (id, body)=>post(id, 'archive', body),
+        clickKeys: (id)=>request(()=>route(id, 'click-keys'), 'GET'),
         preflight: (id)=>request(()=>route(id, 'preflight'), 'GET'),
         previewToken: (id, arm)=>request(()=>`${route(id, 'preview-token')}?arm=${encodeURIComponent(arm)}`, 'GET'),
         results: (id, options = {})=>request(()=>{

package/dist/admin/armSelect/ArmSelectField.js

@@ -1,9 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fetchAllDocs } from '../../lib/fetchAllDocs.js';
 import { Banner, Button, SelectInput, useConfig, useField } from '@payloadcms/ui';
 import { useEffect, useState } from 'react';
 import { bindArmSelect, experimentId } from './armSelect.model.js';
 import { ARM_SELECT_COPY } from '../copy/armSelect.js';
+/** Only authored copy reaches the field; transport or parse errors read as unavailable. */ const knownCopy = (reason)=>reason instanceof Error && Object.values(ARM_SELECT_COPY).includes(reason.message) ? reason.message : ARM_SELECT_COPY.unavailable;
 export function ArmSelectField({ path, field, readOnly }) {
     const { config } = useConfig();
     const api = config.routes.api;
@@ -26,27 +28,17 @@ export function ArmSelectField({ path, field, readOnly }) {
         if (!point) return;
         const controller = new AbortController();
         async function list(statuses) {
-            const docs = [];
-            let page = 1;
-            while(!controller.signal.aborted){
-                const query = new URLSearchParams({
-                    depth: '0',
-                    limit: '100',
-                    page: String(page),
-                    'where[flagPoint][equals]': point,
-                    'where[status][in]': statuses
-                });
-                const response = await fetch(`${api}/xp-experiments?${query}`, {
-                    credentials: 'include',
-                    signal: controller.signal
-                });
-                if (!response.ok) throw new Error(response.status === 403 ? ARM_SELECT_COPY.forbidden : ARM_SELECT_COPY.unavailable);
-                const data = await response.json();
-                docs.push(...data.docs);
-                if (!data.hasNextPage) break;
-                page++;
-            }
-            return docs;
+            const query = new URLSearchParams({
+                depth: '0',
+                'where[flagPoint][equals]': point,
+                'where[status][in]': statuses
+            });
+            const response = await fetchAllDocs(`${api}/xp-experiments?${query}`, {
+                credentials: 'include',
+                signal: controller.signal
+            });
+            if (!response.ok) throw new Error(response.status === 403 ? ARM_SELECT_COPY.forbidden : ARM_SELECT_COPY.unavailable);
+            return response.docs;
         }
         void Promise.all([
             list('running,decided'),
@@ -63,7 +55,7 @@ export function ArmSelectField({ path, field, readOnly }) {
         }).catch((reason)=>{
             if (!controller.signal.aborted) setError({
                 key,
-                message: reason instanceof Error ? reason.message : ARM_SELECT_COPY.unavailable
+                message: knownCopy(reason)
             });
         });
         return ()=>controller.abort();

package/dist/admin/arms/arms.model.d.ts

@@ -1,21 +1 @@
-import type { ArmIssue } from '../../collections/experiments/armInvariants.js';
-import type { Arm, ArmKey, ExperimentKind } from '../../types/contracts.js';
-export declare function defaultArms(kind?: ExperimentKind): Arm[];
-/** Keep content slots in step with the experiment kind, including an unset kind. */
-export declare function withSlotsFor(arms: Arm[], kind?: ExperimentKind): Arm[];
-export declare function totalWeight(arms: Arm[]): number;
-export declare function addVariant(arms: Arm[], kind?: ExperimentKind): Arm[];
-export declare function removeArm(arms: Arm[], key: ArmKey): Arm[];
-export declare function addHoldoutArm(arms: Arm[]): Arm[];
-export declare function removeHoldout(arms: Arm[]): Arm[];
-export declare function splitEvenly(arms: Arm[]): Arm[];
-export declare function setWeight(arms: Arm[], key: ArmKey, weight: number): Arm[];
-export declare function issuesByRow(arms: Arm[], kind?: ExperimentKind): {
-    rows: ArmIssue[][];
-    form: ArmIssue[];
-};
-export declare const ARM_FIELDS: readonly ["key", "label", "weight", "kind", "slot", "params", "pageTarget"];
-/** Payload arrays store each row's values at separate field paths. */
-export declare function readArms(fields: Record<string, {
-    value?: unknown;
-}>, path?: string): Arm[];
+export * from '../../arms/model.js';

package/dist/admin/arms/arms.model.js

@@ -1,153 +1 @@
-import { addHoldout, checkArms } from '../../collections/experiments/armInvariants.js';
-import { GROUP_LABELS } from '../copy/arms.js';
-const VARIANTS = [
-    'variantA',
-    'variantB',
-    'variantC'
-];
-export function defaultArms(kind) {
-    return withSlotsFor([
-        {
-            key: 'control',
-            kind: 'control',
-            label: GROUP_LABELS.control,
-            weight: 50
-        },
-        {
-            key: 'variantA',
-            kind: 'variant',
-            label: GROUP_LABELS.variantA,
-            weight: 50
-        }
-    ], kind);
-}
-/** Keep content slots in step with the experiment kind, including an unset kind. */ export function withSlotsFor(arms, kind) {
-    const next = arms.map((arm)=>{
-        if (kind === 'block' && arm.kind !== 'holdout') return arm.slot === arm.key ? arm : {
-            ...arm,
-            slot: arm.key
-        };
-        // Postgres returns null for unset columns; null counts as "no slot" so a loaded doc is not rewritten.
-        if (arm.slot == null) return arm;
-        const { slot: _slot, ...rest } = arm;
-        return rest;
-    });
-    return next.every((arm, index)=>arm === arms[index]) ? arms : next;
-}
-const finiteWeight = (weight)=>Number.isFinite(weight) ? weight : 0;
-export function totalWeight(arms) {
-    return arms.reduce((sum, arm)=>sum + finiteWeight(arm.weight), 0);
-}
-export function addVariant(arms, kind) {
-    if (!arms.some((arm)=>arm.kind === 'control')) return arms;
-    const key = VARIANTS.find((candidate)=>!arms.some((arm)=>arm.key === candidate));
-    if (!key || arms.filter((arm)=>arm.kind === 'variant').length >= 3) return arms;
-    const block = kind === 'block' || kind === undefined && arms.some((arm)=>arm.slot !== undefined);
-    const variant = {
-        key,
-        kind: 'variant',
-        label: GROUP_LABELS[key],
-        weight: 0,
-        ...block ? {
-            slot: key
-        } : {}
-    };
-    const index = arms.findIndex((arm)=>arm.kind === 'holdout');
-    const result = [
-        ...arms
-    ];
-    result.splice(index < 0 ? arms.length : index, 0, variant);
-    return result;
-}
-export function removeArm(arms, key) {
-    if (arms.some((arm)=>arm.key === key && arm.kind === 'control')) return arms;
-    if (key === 'holdout') return removeHoldout(arms);
-    return arms.filter((arm)=>arm.key !== key);
-}
-export function addHoldoutArm(arms) {
-    if (!arms.some((arm)=>arm.kind === 'control') || arms.some((arm)=>arm.kind === 'holdout' || arm.key === 'holdout')) return arms;
-    return addHoldout(arms.map((arm)=>Number.isFinite(arm.weight) ? arm : {
-            ...arm,
-            weight: 0
-        }));
-}
-// Largest remainder, with equal fractional remainders awarded to Original first.
-function distribute(arms, total, proportional) {
-    if (!arms.length) return arms;
-    const weightTotal = totalWeight(arms);
-    const useWeights = proportional && weightTotal > 0;
-    const denominator = useWeights ? weightTotal : arms.length;
-    const numerators = arms.map((arm)=>(useWeights ? finiteWeight(arm.weight) : 1) * total);
-    const weights = numerators.map((numerator)=>Math.floor(numerator / denominator));
-    const order = arms.map((_, i)=>i).sort((a, b)=>numerators[b] % denominator - numerators[a] % denominator || Number(arms[b].kind === 'control') - Number(arms[a].kind === 'control') || a - b);
-    const remainder = total - weights.reduce((sum, weight)=>sum + weight, 0);
-    for(let i = 0; i < remainder; i++)weights[order[i % order.length]]++;
-    return arms.map((arm, i)=>({
-            ...arm,
-            weight: weights[i]
-        }));
-}
-export function removeHoldout(arms) {
-    if (!arms.some((arm)=>arm.kind === 'holdout')) return arms;
-    return distribute(arms.filter((arm)=>arm.kind !== 'holdout'), totalWeight(arms), true);
-}
-export function splitEvenly(arms) {
-    const holdout = arms.find((arm)=>arm.kind === 'holdout');
-    const weight = finiteWeight(holdout?.weight ?? 0);
-    return [
-        ...distribute(arms.filter((arm)=>arm.kind !== 'holdout'), 100 - weight, false),
-        ...holdout ? [
-            {
-                ...holdout,
-                weight
-            }
-        ] : []
-    ];
-}
-export function setWeight(arms, key, weight) {
-    return arms.map((arm)=>arm.key === key ? {
-            ...arm,
-            weight
-        } : arm);
-}
-export function issuesByRow(arms, kind) {
-    const rows = arms.map(()=>[]);
-    const form = [];
-    for (const issue of checkArms(arms, kind)){
-        const index = issue.armIndex ?? arms.findIndex((arm)=>arm.key === issue.armKey);
-        if (index >= 0 && index < arms.length) rows[index].push(issue);
-        else form.push(issue);
-    }
-    return {
-        rows,
-        form
-    };
-}
-export const ARM_FIELDS = [
-    'key',
-    'label',
-    'weight',
-    'kind',
-    'slot',
-    'params',
-    'pageTarget'
-];
-/** Payload arrays store each row's values at separate field paths. */ export function readArms(fields, path = 'arms') {
-    const indices = new Set();
-    for (const name of Object.keys(fields)){
-        if (!name.startsWith(`${path}.`)) continue;
-        const [index, field] = name.slice(path.length + 1).split('.');
-        if (/^\d+$/.test(index) && field === 'key') indices.add(Number(index));
-    }
-    return [
-        ...indices
-    ].sort((a, b)=>a - b).map((index)=>Object.fromEntries(ARM_FIELDS.flatMap((field)=>{
-            const value = fields[`${path}.${index}.${field}`]?.value;
-            return value === undefined ? [] : [
-                [
-                    field,
-                    value
-                ]
-            ];
-        })));
-}
+export * from '../../arms/model.js';

package/dist/admin/blocks/BlockPanel.d.ts

@@ -0,0 +1,4 @@
+import type { UIFieldClientProps } from 'payload';
+export declare function BlockStatusField({ path }: UIFieldClientProps): import("react").JSX.Element | null;
+export declare function BlockSlotRowLabel(): import("react").JSX.Element;
+export declare function CopyOriginalField({ path }: UIFieldClientProps): import("react").JSX.Element | null;

package/dist/admin/blocks/BlockPanel.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner, Button, ConfirmationModal, useModal, useFormInitializing, useRowLabel } from '@payloadcms/ui';
+import { useEffect, useId, useRef, useState } from 'react';
+import { copyOriginalIntoVersion, syncExperimentSlots, unwrapExperimentBlock } from '../../blocks/formState.js';
+import { BLOCK_COPY, blockSyncNotice } from '../copy/blocks.js';
+import { API_MESSAGES } from '../copy/common.js';
+import { isOrphan, liveStatus, slotLabel, statusSentence } from './model.js';
+import { useBlockStatus } from './statusCache.js';
+import { useBlockForm } from './useBlockForm.js';
+export function BlockStatusField({ path }) {
+    const context = useBlockForm(path), { block, field, manager, config, collection, replace } = context;
+    const initializing = useFormInitializing();
+    const status = useBlockStatus(config.routes.api, block?.experiment, true);
+    const synced = useRef(false), syncing = useRef(false);
+    const [notice, setNotice] = useState(false), [error, setError] = useState(), [busy, setBusy] = useState(false);
+    const [syncFailed, setSyncFailed] = useState(false);
+    const canSync = !initializing && manager && block && field && liveStatus(status) && [
+        'draft',
+        'stopped'
+    ].includes(status.status);
+    async function sync() {
+        if (!canSync || syncing.current) return;
+        syncing.current = true;
+        setBusy(true);
+        setSyncFailed(false);
+        try {
+            const next = syncExperimentSlots(block, status.arms, field);
+            if (JSON.stringify(next.slots) !== JSON.stringify(block.slots)) {
+                await replace([
+                    next
+                ]);
+                setNotice(true);
+            }
+        } catch  {
+            setSyncFailed(true);
+        } finally{
+            syncing.current = false;
+            setBusy(false);
+        }
+    }
+    useEffect(()=>{
+        if (synced.current || !canSync) return;
+        synced.current = true;
+        void sync();
+    });
+    if (!status) return null;
+    async function unwrap() {
+        if (!block || !field || busy) return;
+        setBusy(true);
+        setError(undefined);
+        try {
+            await replace(unwrapExperimentBlock(block, field));
+        } catch  {
+            setError(API_MESSAGES.failed);
+        } finally{
+            setBusy(false);
+        }
+    }
+    const sentence = statusSentence(status);
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            liveStatus(status) && status.status === 'running' ? /*#__PURE__*/ _jsx(Banner, {
+                children: sentence
+            }) : /*#__PURE__*/ _jsx("p", {
+                children: sentence
+            }),
+            notice ? /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                children: blockSyncNotice(Boolean(collection?.versions?.drafts))
+            }) : null,
+            manager && isOrphan(status) ? /*#__PURE__*/ _jsx(Button, {
+                disabled: busy,
+                onClick: ()=>void unwrap(),
+                children: BLOCK_COPY.unwrap
+            }) : null,
+            error ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: error
+            }) : null,
+            syncFailed ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: API_MESSAGES.failed
+            }) : null,
+            syncFailed && canSync ? /*#__PURE__*/ _jsx(Button, {
+                disabled: busy,
+                onClick: ()=>void sync(),
+                children: BLOCK_COPY.retry
+            }) : null
+        ]
+    });
+}
+export function BlockSlotRowLabel() {
+    const { data, path } = useRowLabel();
+    const { config, block } = useBlockForm(path);
+    const status = useBlockStatus(config.routes.api, block?.experiment);
+    return /*#__PURE__*/ _jsx("span", {
+        children: slotLabel(data?.slot ?? '', status)
+    });
+}
+export function CopyOriginalField({ path }) {
+    const { block, field, form, manager, config, replace } = useBlockForm(path);
+    const status = useBlockStatus(config.routes.api, block?.experiment);
+    const rowPath = path.slice(0, path.lastIndexOf('.'));
+    const slot = form.getDataByPath(`${rowPath}.slot`);
+    const [busy, setBusy] = useState(false), [error, setError] = useState();
+    const { openModal } = useModal();
+    const modalSlug = `xp-copy-original-${useId()}`;
+    if (!manager || !field || !block || !slot || slot === 'control' || !liveStatus(status) || ![
+        'draft',
+        'stopped',
+        'running'
+    ].includes(status.status)) return null;
+    async function copy() {
+        if (!block || !field || busy || !slot) return;
+        setBusy(true);
+        setError(undefined);
+        try {
+            await replace([
+                copyOriginalIntoVersion(block, slot, field)
+            ]);
+        } catch  {
+            setError(API_MESSAGES.failed);
+        } finally{
+            setBusy(false);
+        }
+    }
+    function requestCopy() {
+        if (block?.slots.find((row)=>row.slot === slot)?.blocks?.length) openModal(modalSlug);
+        else void copy();
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                disabled: busy,
+                onClick: requestCopy,
+                children: BLOCK_COPY.copy
+            }),
+            /*#__PURE__*/ _jsx(ConfirmationModal, {
+                modalSlug: modalSlug,
+                heading: BLOCK_COPY.copy,
+                body: BLOCK_COPY.confirmCopy,
+                confirmLabel: BLOCK_COPY.replace,
+                cancelLabel: BLOCK_COPY.cancel,
+                onConfirm: copy
+            }),
+            error ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: error
+            }) : null
+        ]
+    });
+}

package/dist/admin/blocks/TestBlockField.d.ts

@@ -0,0 +1,5 @@
+import type { UIFieldClientProps } from 'payload';
+export declare function TestBlockField(props: UIFieldClientProps & {
+    blocksField: string;
+    blockSlug?: string;
+}): import("react").JSX.Element | null;

package/dist/admin/blocks/TestBlockField.js

@@ -0,0 +1,163 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, SelectInput, useAuth, useConfig, useDocumentInfo, useForm, useFormFields, useFormModified, useServerFunctions } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { useMemo, useRef, useState } from 'react';
+import { hostBlocks } from '../../blocks/model.js';
+import { wrapExperimentBlock } from '../../blocks/formState.js';
+import { CreateRefused, createTest } from '../../puck/editor/createTest.js';
+import { createApi } from '../api.js';
+import { BLOCK_COPY, blockSaveNotice, blockTestName } from '../copy/blocks.js';
+import { API_MESSAGES } from '../copy/common.js';
+import { adaptClientBlocksField, BlockChangedError, dataAt, experimentBlockSlug, findClientBlocksField, replaceBlockRow, wrapMode } from './formApi.js';
+import { blockChoices, labelText } from './model.js';
+export function TestBlockField(props) {
+    const { permissions } = useAuth();
+    const testPermissions = permissions?.collections?.['xp-experiments'];
+    return testPermissions?.update === true ? /*#__PURE__*/ _jsx(ManagedTestBlockField, {
+        ...props
+    }) : null;
+}
+function ManagedTestBlockField({ blocksField, blockSlug: suppliedSlug }) {
+    const form = useForm(), modified = useFormModified(), document = useDocumentInfo();
+    const { config, getEntityConfig } = useConfig(), { getFormState } = useServerFunctions();
+    useFormFields(([fields])=>fields);
+    const collection = document.collectionSlug ? getEntityConfig({
+        collectionSlug: document.collectionSlug
+    }) : undefined;
+    const clientField = collection ? findClientBlocksField(collection.fields, blocksField) : undefined;
+    const field = useMemo(()=>clientField ? adaptClientBlocksField(clientField, config) : undefined, [
+        clientField,
+        config
+    ]);
+    const [choice, setChoice] = useState(), [busy, setBusy] = useState(false), [error, setError] = useState();
+    const wrapping = useRef(false);
+    if (!field || !collection || !document.collectionSlug) return null;
+    const blockSlug = suppliedSlug ?? experimentBlockSlug(field);
+    const rows = hostBlocks(form.getDataByPath(blocksField)), choices = blockChoices(rows, field, blockSlug);
+    const wrappers = rows.filter((block)=>block.blockType === blockSlug && typeof block.experiment === 'string');
+    async function wrap() {
+        if (!field || wrapping.current || !document.collectionSlug || !collection) return;
+        setError(undefined);
+        if (wrapMode === 'fallback' && modified) {
+            setError(BLOCK_COPY.saveFirst);
+            return;
+        }
+        const selected = blockChoices(form.getDataByPath(blocksField), field, blockSlug).find((item)=>String(item.index) === choice);
+        if (!selected) return;
+        const title = collection.admin?.useAsTitle ? form.getDataByPath(collection.admin.useAsTitle) : undefined;
+        const name = blockTestName(typeof title === 'string' && title.trim() ? title : labelText(collection.labels.singular) ?? collection.slug, selected.label);
+        const beforeCreate = JSON.stringify(form.getData());
+        wrapping.current = true;
+        setBusy(true);
+        try {
+            const test = await createTest(config.routes.api, {
+                kind: 'block',
+                name,
+                unitType: 'visitor'
+            });
+            if (wrapMode === 'fallback') {
+                if (JSON.stringify(form.getData()) !== beforeCreate) {
+                    setError(BLOCK_COPY.saveFirst);
+                    return;
+                }
+                if (document.id == null || !selected.block.id) {
+                    setError(BLOCK_COPY.wrapRefusals['wrap-target-missing']);
+                    return;
+                }
+                const result = await createApi(config.routes.api).wrapBlock({
+                    collection: document.collectionSlug,
+                    id: document.id,
+                    field: blocksField,
+                    blockId: selected.block.id,
+                    experiment: test.slug
+                });
+                if (!result.ok) {
+                    setError(result.code && Object.hasOwn(BLOCK_COPY.wrapRefusals, result.code) ? BLOCK_COPY.wrapRefusals[result.code] : API_MESSAGES.failed);
+                    return;
+                }
+                window.location.reload();
+            } else {
+                await replaceBlockRow({
+                    form,
+                    getFormState,
+                    collectionSlug: document.collectionSlug,
+                    id: document.id,
+                    field: blocksField,
+                    index: selected.index,
+                    expectedBlock: selected.block,
+                    rows: [
+                        wrapExperimentBlock(selected.block, test.slug, field, {}, blockSlug)
+                    ],
+                    docPermissions: document.docPermissions,
+                    docPreferences: await document.getDocPreferences?.()
+                });
+            }
+            setChoice(undefined);
+        } catch (cause) {
+            setError(cause instanceof CreateRefused || cause instanceof BlockChangedError ? cause.message : API_MESSAGES.failed);
+        } finally{
+            wrapping.current = false;
+            setBusy(false);
+        }
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx("h3", {
+                children: BLOCK_COPY.testBlock
+            }),
+            choices.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(SelectInput, {
+                        name: "xpBlockChoice",
+                        path: "xpBlockChoice",
+                        label: BLOCK_COPY.pick,
+                        options: choices.map((item)=>({
+                                label: item.option,
+                                value: String(item.index)
+                            })),
+                        value: choice,
+                        readOnly: busy,
+                        onChange: (option)=>{
+                            if (!Array.isArray(option)) setChoice(option?.value);
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: busy || choice === undefined,
+                        onClick: ()=>void wrap(),
+                        children: BLOCK_COPY.testBlock
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx("p", {
+                children: BLOCK_COPY.empty
+            }),
+            error ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: error
+            }) : null,
+            wrappers.map((block)=>{
+                const slug = block.experiment;
+                const inSavedDocument = hostBlocks(dataAt(document.data, blocksField)).some((row)=>row.blockType === blockSlug && row.experiment === slug);
+                const saved = !modified && inSavedDocument;
+                return /*#__PURE__*/ _jsxs("p", {
+                    children: [
+                        !inSavedDocument ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                blockSaveNotice(Boolean(collection.versions?.drafts)),
+                                ' '
+                            ]
+                        }) : null,
+                        /*#__PURE__*/ _jsx("a", {
+                            "aria-disabled": !saved,
+                            href: saved ? formatAdminURL({
+                                adminRoute: config.routes.admin,
+                                path: `/experiments/by-slug/${encodeURIComponent(slug)}`
+                            }) : undefined,
+                            children: BLOCK_COPY.setup
+                        })
+                    ]
+                }, block.id ?? slug);
+            })
+        ]
+    });
+}

package/dist/admin/blocks/formApi.d.ts

@@ -0,0 +1,43 @@
+import type { ClientConfig, ClientField, Field } from 'payload';
+import type { useForm, useServerFunctions } from '@payloadcms/ui';
+import { type HostBlock } from '../../blocks/model.js';
+/** The only form-state failure with block-specific editor copy. */
+export declare class BlockChangedError extends Error {
+    constructor();
+}
+export type RowsField = Extract<Field, {
+    type: 'blocks';
+}>;
+export declare const wrapMode: 'form-api' | 'fallback';
+/** Client twin: unnamed layout containers do not contribute to a data path. */
+export declare function findClientBlocksField(fields: readonly ClientField[], name: string): Extract<ClientField, {
+    type: 'blocks';
+}> | undefined;
+/** Only schema structure is needed by the pure helpers, never server validators.
+ * Resolve references at every depth, including inside the Experiment slots field.
+ */
+export declare function adaptClientBlocksField(field: Extract<ClientField, {
+    type: 'blocks';
+}>, config: Pick<ClientConfig, 'blocks'>): RowsField;
+export declare function experimentBlockSlug(field: RowsField): string;
+export declare function rowLocation(path: string): {
+    field: string;
+    index: number;
+} | undefined;
+export declare function dataAt(data: unknown, path: string): unknown;
+/** Payload 3.90.2 and 4 beta.6 use the same row APIs. Sync replaces the whole
+ * wrapper so add/drop/reorder and the server-rendered component slots stay together.
+ * N=0 needs UPDATE: removeFieldRow alone serializes the empty field as number 0.
+ */
+export declare function replaceBlockRow(args: {
+    form: ReturnType<typeof useForm>;
+    getFormState: ReturnType<typeof useServerFunctions>['getFormState'];
+    collectionSlug: string;
+    id?: string | number;
+    field: string;
+    index: number;
+    rows: HostBlock[];
+    expectedBlock?: HostBlock;
+    docPermissions?: Parameters<ReturnType<typeof useServerFunctions>['getFormState']>[0]['docPermissions'];
+    docPreferences?: Parameters<ReturnType<typeof useServerFunctions>['getFormState']>[0]['docPreferences'];
+}): Promise<void>;