@delmaredigital/payload-experiments 0.2.0-rc.3 → 0.2.0-rc.4

package/dist/admin/theme.d.ts

@@ -0,0 +1,50 @@
+/** every Payload token reference lives in theme.css; porting to Payload 4 edits that file only */
+export declare const theme: {
+    readonly color: {
+        readonly bg: "var(--xp-bg)";
+        readonly text: "var(--xp-text)";
+        readonly surface: "var(--xp-surface)";
+        readonly surfaceRaised: "var(--xp-surface-raised)";
+        readonly border: "var(--xp-border)";
+        readonly borderStrong: "var(--xp-border-strong)";
+        readonly borderControl: "var(--xp-border-control)";
+        readonly inputBorder: "var(--xp-input-border)";
+        readonly borderAccent: "var(--xp-border-accent)";
+        readonly accent: "var(--xp-accent)";
+        readonly textMuted: "var(--xp-text-muted)";
+        readonly textStrong: "var(--xp-text-strong)";
+        readonly textEmphasis: "var(--xp-text-emphasis)";
+        readonly inputBg: "var(--xp-input-bg)";
+        readonly overlay: "var(--xp-overlay)";
+        readonly successSurface: "var(--xp-success-surface)";
+        readonly successBg: "var(--xp-success-bg)";
+        readonly success: "var(--xp-success)";
+        readonly successText: "var(--xp-success-text)";
+        readonly successTextStrong: "var(--xp-success-text-strong)";
+        readonly warningSurface: "var(--xp-warning-surface)";
+        readonly warningBg: "var(--xp-warning-bg)";
+        readonly warning: "var(--xp-warning)";
+        readonly warningText: "var(--xp-warning-text)";
+        readonly warningTextStrong: "var(--xp-warning-text-strong)";
+        readonly errorSurface: "var(--xp-error-surface)";
+        readonly error: "var(--xp-error)";
+        readonly errorText: "var(--xp-error-text)";
+    };
+    readonly radius: {
+        readonly small: "var(--xp-radius)";
+        readonly large: "var(--xp-radius-large)";
+    };
+    readonly space: {
+        readonly 1: "var(--xp-space-1)";
+        readonly 2: "var(--xp-space-2)";
+        readonly 3: "var(--xp-space-3)";
+        readonly 4: "var(--xp-space-4)";
+        readonly 5: "var(--xp-space-5)";
+        readonly 6: "var(--xp-space-6)";
+    };
+    readonly font: {
+        readonly body: "var(--xp-font-body)";
+        readonly small: "var(--xp-font-size-small)";
+        readonly size: "var(--xp-font-size-body)";
+    };
+};

package/dist/admin/theme.js

@@ -0,0 +1,49 @@
+/** every Payload token reference lives in theme.css; porting to Payload 4 edits that file only */ export const theme = {
+    color: {
+        bg: 'var(--xp-bg)',
+        text: 'var(--xp-text)',
+        surface: 'var(--xp-surface)',
+        surfaceRaised: 'var(--xp-surface-raised)',
+        border: 'var(--xp-border)',
+        borderStrong: 'var(--xp-border-strong)',
+        borderControl: 'var(--xp-border-control)',
+        inputBorder: 'var(--xp-input-border)',
+        borderAccent: 'var(--xp-border-accent)',
+        accent: 'var(--xp-accent)',
+        textMuted: 'var(--xp-text-muted)',
+        textStrong: 'var(--xp-text-strong)',
+        textEmphasis: 'var(--xp-text-emphasis)',
+        inputBg: 'var(--xp-input-bg)',
+        overlay: 'var(--xp-overlay)',
+        successSurface: 'var(--xp-success-surface)',
+        successBg: 'var(--xp-success-bg)',
+        success: 'var(--xp-success)',
+        successText: 'var(--xp-success-text)',
+        successTextStrong: 'var(--xp-success-text-strong)',
+        warningSurface: 'var(--xp-warning-surface)',
+        warningBg: 'var(--xp-warning-bg)',
+        warning: 'var(--xp-warning)',
+        warningText: 'var(--xp-warning-text)',
+        warningTextStrong: 'var(--xp-warning-text-strong)',
+        errorSurface: 'var(--xp-error-surface)',
+        error: 'var(--xp-error)',
+        errorText: 'var(--xp-error-text)'
+    },
+    radius: {
+        small: 'var(--xp-radius)',
+        large: 'var(--xp-radius-large)'
+    },
+    space: {
+        1: 'var(--xp-space-1)',
+        2: 'var(--xp-space-2)',
+        3: 'var(--xp-space-3)',
+        4: 'var(--xp-space-4)',
+        5: 'var(--xp-space-5)',
+        6: 'var(--xp-space-6)'
+    },
+    font: {
+        body: 'var(--xp-font-body)',
+        small: 'var(--xp-font-size-small)',
+        size: 'var(--xp-font-size-body)'
+    }
+};

package/dist/admin/views/ExperimentsRootView.js

@@ -18,7 +18,11 @@ export async function ExperimentsRootView({ initPageResult, params, searchParams
     let id;
     if (tail.length === 0) route = 'home';
     else if (tail.length === 1 && tail[0] === 'new') route = 'new';
-    else if (tail.length === 1) {
+    else if (tail.length === 1 && tail[0] === 'goals') route = 'goals';
+    else if (tail.length === 2 && tail[0] === 'goals') {
+        route = tail[1] === 'new' ? 'goalNew' : 'goal';
+        if (route === 'goal') id = tail[1];
+    } else if (tail.length === 1) {
         route = 'test';
         id = tail[0];
     } else if (tail.length === 2 && tail[1] === 'results') {
@@ -41,6 +45,8 @@ export async function ExperimentsRootView({ initPageResult, params, searchParams
             path: `${login}?redirect=${encodeURIComponent(currentPath)}`
         }));
     }
+    // Keep the server export importable in plain Node; Next loads the CSS-bearing client boundary when this view renders.
+    const { RootViewMessage } = await import('../components/RootViewMessage.js');
     const options = xpOptionsFromReq(req);
     async function permits(access) {
         try {
@@ -60,12 +66,7 @@ export async function ExperimentsRootView({ initPageResult, params, searchParams
         canManage,
         canReadResults
     }) !== 'ok') {
-        return /*#__PURE__*/ _jsx("div", {
-            style: {
-                padding: 'var(--base)',
-                color: 'var(--theme-text)',
-                background: 'var(--theme-bg)'
-            },
+        return /*#__PURE__*/ _jsx(RootViewMessage, {
             children: SURFACE_COPY.noAccess
         });
     }
@@ -131,7 +132,11 @@ export async function ExperimentsRootView({ initPageResult, params, searchParams
         }
     }))).flat() : undefined;
     const descriptions = options.admin?.descriptions;
+    const returnToTest = (await searchParams)?.return;
     const clientProps = {
+        ...typeof returnToTest === 'string' && /^[\w-]+$/.test(returnToTest) ? {
+            returnToTest
+        } : {},
         route,
         ...id === undefined ? {} : {
             id
@@ -155,6 +160,12 @@ export async function ExperimentsRootView({ initPageResult, params, searchParams
             }
         } : {}
     };
+    function TestsSurfaceFallback() {
+        return /*#__PURE__*/ _jsx(RootViewMessage, {
+            alert: true,
+            children: SURFACE_COPY.notInstalled
+        });
+    }
     return RenderServerComponent({
         Component: XP_TESTS_SURFACE,
         Fallback: TestsSurfaceFallback,
@@ -162,14 +173,3 @@ export async function ExperimentsRootView({ initPageResult, params, searchParams
         clientProps
     });
 }
-function TestsSurfaceFallback() {
-    return /*#__PURE__*/ _jsx("div", {
-        role: "alert",
-        style: {
-            padding: 'var(--base)',
-            color: 'var(--theme-text)',
-            background: 'var(--theme-bg)'
-        },
-        children: SURFACE_COPY.notInstalled
-    });
-}

package/dist/collections/metricValidation.d.ts

@@ -0,0 +1,3 @@
+/** Shared with the goals form; preserve Payload's field validation messages. */
+export declare function validateCappingType(value: unknown, capValue: unknown, sourceKind?: string): true | string;
+export declare function validateCappingValue(value: unknown, type: unknown): true | string;

package/dist/collections/metricValidation.js

@@ -0,0 +1,9 @@
+/** Shared with the goals form; preserve Payload's field validation messages. */ export function validateCappingType(value, capValue, sourceKind) {
+    const hasCapping = value != null || capValue != null;
+    if (hasCapping && sourceKind && sourceKind !== 'revenue') return 'Count and yes-or-no goals cannot use a limit.';
+    return !hasCapping || value === 'percentile' || value === 'absolute' || 'Choose how to set the limit.';
+}
+export function validateCappingValue(value, type) {
+    if (value == null && !type) return true;
+    return typeof value === 'number' && Number.isFinite(value) && value >= 0 && (type === 'absolute' || type === 'percentile' && value > 0 && value <= 1) || 'Enter a valid limit (for past amounts, use a number greater than 0 and at most 1).';
+}

package/dist/collections/metrics.js

@@ -1,6 +1,7 @@
 import { XP_METRIC_SOURCE_SELECT } from '../admin/paths.js';
 import { managedAccess } from './access.js';
 import { serializeMetricSources } from './serialize.js';
+import { validateCappingType, validateCappingValue } from './metricValidation.js';
 export function metricsCollection(options) {
     const sources = serializeMetricSources(options);
     return {
@@ -125,10 +126,8 @@ export function metricsCollection(options) {
                             description: 'Choose whether the limit comes from past amounts or a fixed amount.'
                         },
                         validate: (value, { data, siblingData })=>{
-                            const hasCapping = value != null || siblingData?.value != null;
                             const source = sources.find((source)=>source.id === data?.source);
-                            if (hasCapping && source && source.kind !== 'revenue') return 'Count and yes-or-no goals cannot use a limit.';
-                            return !hasCapping || value === 'percentile' || value === 'absolute' || 'Choose how to set the limit.';
+                            return validateCappingType(value, siblingData?.value, source?.kind);
                         }
                     },
                     {
@@ -140,8 +139,7 @@ export function metricsCollection(options) {
                             description: 'For past amounts, enter how much of the usual range to keep, such as 0.99 to limit only the largest 1%; or enter a fixed amount.'
                         },
                         validate: (value, { siblingData })=>{
-                            if (value == null && !siblingData?.type) return true;
-                            return typeof value === 'number' && Number.isFinite(value) && value >= 0 && (siblingData?.type === 'absolute' || siblingData?.type === 'percentile' && value > 0 && value <= 1) || 'Enter a valid limit (for past amounts, use a number greater than 0 and at most 1).';
+                            return validateCappingValue(value, siblingData?.type);
                         }
                     }
                 ]

package/dist/plugin.js

@@ -35,8 +35,8 @@ export function createExperimentsPlugin(input) {
                             path: '/experiments/:segments*'
                         }
                     },
-                    afterNavLinks: [
-                        ...config.admin?.components?.afterNavLinks ?? [],
+                    beforeNavLinks: [
+                        ...config.admin?.components?.beforeNavLinks ?? [],
                         paths.XP_TESTS_NAV_LINK
                     ]
                 }

package/dist/puck/editor/CreateExperimentDrawer.d.ts

@@ -1,4 +1,5 @@
 import type { ExperimentRef } from '../../types/puck.js';
+import './editor.css';
 export declare function CreateExperimentDrawer({ onCreate, onClose, initialName }: {
     initialName?: string;
     onCreate: (experiment: ExperimentRef) => void;

package/dist/puck/editor/CreateExperimentDrawer.js

@@ -3,8 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from 'react';
 import { CreateRefused, createTest } from './createTest.js';
 import { editorCopy } from './copy.js';
+import './editor.css';
 export function CreateExperimentDrawer({ onCreate, onClose, initialName = '' }) {
     const titleId = useId();
+    const nameId = useId();
     const [name, setName] = useState(initialName);
     const inFlight = useRef(false);
     const [pending, setPending] = useState(false);
@@ -30,27 +32,26 @@ export function CreateExperimentDrawer({ onCreate, onClose, initialName = '' })
         }
     }
     return /*#__PURE__*/ _jsxs("aside", {
+        className: "xp-slot-root xp-slot-drawer",
         role: "dialog",
         "aria-labelledby": titleId,
-        style: {
-            padding: 16,
-            border: '1px solid #aaa',
-            background: 'Canvas',
-            color: 'CanvasText'
-        },
         children: [
             /*#__PURE__*/ _jsx("h3", {
+                className: "xp-slot-title",
                 id: titleId,
                 children: editorCopy.createLabel
             }),
-            /*#__PURE__*/ _jsxs("label", {
-                style: {
-                    display: 'block',
-                    marginBottom: 8
-                },
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-slot-field",
                 children: [
-                    editorCopy.name,
+                    /*#__PURE__*/ _jsx("label", {
+                        className: "xp-slot-label",
+                        htmlFor: nameId,
+                        children: editorCopy.name
+                    }),
                     /*#__PURE__*/ _jsx("input", {
+                        className: "xp-slot-input",
+                        id: nameId,
                         value: name,
                         disabled: pending,
                         onChange: (event)=>setName(event.currentTarget.value)
@@ -58,22 +59,30 @@ export function CreateExperimentDrawer({ onCreate, onClose, initialName = '' })
                 ]
             }),
             error ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-slot-error",
                 role: "alert",
                 children: error
             }) : null,
-            /*#__PURE__*/ _jsx("button", {
-                type: "button",
-                disabled: pending || !name.trim(),
-                onClick: ()=>{
-                    void submitNew();
-                },
-                children: pending ? editorCopy.creating : editorCopy.createLabel
-            }),
-            /*#__PURE__*/ _jsx("button", {
-                type: "button",
-                disabled: pending,
-                onClick: onClose,
-                children: editorCopy.cancel
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-slot-actions",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        className: "xp-slot-button xp-slot-button-primary",
+                        type: "button",
+                        disabled: pending || !name.trim(),
+                        onClick: ()=>{
+                            void submitNew();
+                        },
+                        children: pending ? editorCopy.creating : editorCopy.createLabel
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: "xp-slot-button",
+                        type: "button",
+                        disabled: pending,
+                        onClick: onClose,
+                        children: editorCopy.cancel
+                    })
+                ]
             })
         ]
     });

package/dist/puck/editor/ExperimentSlotEditor.d.ts

@@ -1,3 +1,4 @@
 import { type ComponentConfig } from '@puckeditor/core';
 import type { ExperimentSlotProps } from '../../types/puck.js';
+import './editor.css';
 export declare const ExperimentSlotEditor: ComponentConfig<ExperimentSlotProps>;

package/dist/puck/editor/ExperimentSlotEditor.js

@@ -8,6 +8,7 @@ import { bannerFor, tabsFor } from './editor.model.js';
 import { cloneSlot } from './cloneSlot.js';
 import { CreateExperimentDrawer } from './CreateExperimentDrawer.js';
 import { editorCopy } from './copy.js';
+import './editor.css';
 const usePuckSelector = createUsePuck();
 // Public Puck registration enables native controls inside the editor canvas.
 const registerControls = (element)=>registerOverlayPortal(element, {
@@ -34,8 +35,8 @@ function EditorRender(props) {
     const pageTitle = usePuckSelector((state)=>typeof state.appState.data.root.props?.title === 'string' ? state.appState.data.root.props.title : '');
     const selected = usePuckSelector((state)=>state.selectedItem?.props.id === props.id);
     const originalEmpty = usePuckSelector((state)=>{
-        const content = state.selectedItem?.props.control;
-        return state.selectedItem?.props.id !== props.id || !Array.isArray(content) || content.length === 0;
+        const content = state.getItemById(props.id)?.props.control;
+        return !Array.isArray(content) || content.length === 0;
     });
     useEffect(()=>{
         if (experimentId === undefined) return;
@@ -74,6 +75,10 @@ function EditorRender(props) {
     const tabs = tabsFor(experiment);
     const activeSlot = active && active.id === experimentId ? active.slot : undefined;
     const slot = tabs.find((tab)=>tab.slot === activeSlot)?.slot ?? tabs[0]?.slot ?? 'control';
+    const slotEmpty = usePuckSelector((state)=>{
+        const content = state.getItemById(props.id)?.props[slot];
+        return !Array.isArray(content) || content.length === 0;
+    });
     const Slot = props[slot];
     const winnerKey = experiment?.decision?.winnerArm;
     const winner = tabs.find((tab)=>tab.slot === winnerKey)?.label;
@@ -120,105 +125,159 @@ function EditorRender(props) {
         });
     }
     return /*#__PURE__*/ _jsxs("section", {
-        style: {
-            border: '1px solid #aaa',
-            padding: 12
-        },
+        className: "xp-slot-root xp-slot-editor",
         children: [
             /*#__PURE__*/ _jsxs("div", {
+                className: "xp-slot-chrome",
                 ref: registerControls,
                 children: [
-                    /*#__PURE__*/ _jsx("p", {
-                        role: "status",
-                        children: experimentId === undefined ? bannerFor() : result?.error ? editorCopy.loadError : experiment ? bannerFor(experiment.status, winner) : editorCopy.loading
+                    /*#__PURE__*/ _jsxs("header", {
+                        className: "xp-slot-header",
+                        children: [
+                            /*#__PURE__*/ _jsx("h3", {
+                                className: "xp-slot-title",
+                                children: experiment?.name ?? pickerCopy.label
+                            }),
+                            experiment ? /*#__PURE__*/ _jsx("span", {
+                                className: "xp-slot-status",
+                                "data-status": experiment.status,
+                                children: pickerCopy.statuses[experiment.status]
+                            }) : null,
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "xp-slot-actions",
+                                children: [
+                                    experimentId === undefined ? /*#__PURE__*/ _jsx("button", {
+                                        className: "xp-slot-button xp-slot-button-primary",
+                                        type: "button",
+                                        disabled: !selected,
+                                        onClick: ()=>setCreating(true),
+                                        children: editorCopy.createLabel
+                                    }) : null,
+                                    experiment ? /*#__PURE__*/ _jsx("a", {
+                                        className: "xp-slot-button xp-slot-button-primary",
+                                        href: `/admin/experiments/${encodeURIComponent(String(experimentId))}${experiment.status === 'draft' ? '' : '/results'}`,
+                                        children: experiment.status === 'draft' ? editorCopy.setup : editorCopy.viewResults
+                                    }) : null
+                                ]
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ _jsx("button", {
-                        type: "button",
-                        disabled: !selected,
-                        onClick: ()=>setCreating(true),
-                        children: editorCopy.createLabel
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: experiment?.status === 'running' ? 'xp-slot-notice xp-slot-warning' : 'xp-slot-notice',
+                        role: "status",
+                        children: [
+                            experiment?.status === 'running' ? /*#__PURE__*/ _jsxs("svg", {
+                                className: "xp-slot-warning-icon",
+                                "aria-hidden": "true",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "2",
+                                children: [
+                                    /*#__PURE__*/ _jsx("path", {
+                                        d: "M12 3 2 21h20L12 3Z"
+                                    }),
+                                    /*#__PURE__*/ _jsx("path", {
+                                        d: "M12 9v5m0 3v1"
+                                    })
+                                ]
+                            }) : null,
+                            experimentId === undefined ? bannerFor() : result?.error ? editorCopy.loadError : experiment ? bannerFor(experiment.status, winner) : editorCopy.loading
+                        ]
                     }),
                     creating ? /*#__PURE__*/ _jsx(CreateExperimentDrawer, {
                         initialName: pageTitle,
                         onCreate: bind,
                         onClose: ()=>setCreating(false)
                     }) : null,
-                    experiment?.status === 'draft' ? /*#__PURE__*/ _jsx("a", {
-                        href: `/admin/experiments/${encodeURIComponent(String(experimentId))}`,
-                        children: editorCopy.setup
-                    }) : null,
-                    /*#__PURE__*/ _jsx("div", {
-                        style: {
-                            display: 'flex',
-                            flexWrap: 'wrap',
-                            gap: 8,
-                            marginBlock: 8
-                        },
-                        children: tabs.filter((tab)=>tab.slot !== 'control').map((tab)=>/*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                disabled: originalEmpty,
-                                onClick: ()=>requestCopy(tab.slot),
-                                children: editorCopy.copy(tab.label)
-                            }, tab.slot))
-                    }),
-                    confirming ? /*#__PURE__*/ _jsxs("p", {
+                    confirming ? /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-slot-confirm",
                         role: "alert",
                         children: [
-                            editorCopy.replaceConfirm(tabs.find((tab)=>tab.slot === confirming)?.label ?? confirming),
-                            ' ',
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>copyTo(confirming),
-                                children: editorCopy.replace
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "xp-slot-notice",
+                                children: editorCopy.replaceConfirm(tabs.find((tab)=>tab.slot === confirming)?.label ?? confirming)
                             }),
-                            ' ',
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>setConfirming(null),
-                                children: editorCopy.cancel
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "xp-slot-actions",
+                                children: [
+                                    /*#__PURE__*/ _jsx("button", {
+                                        className: "xp-slot-button xp-slot-button-primary",
+                                        type: "button",
+                                        onClick: ()=>copyTo(confirming),
+                                        children: editorCopy.replace
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        className: "xp-slot-button",
+                                        type: "button",
+                                        onClick: ()=>setConfirming(null),
+                                        children: editorCopy.cancel
+                                    })
+                                ]
                             })
                         ]
                     }) : null,
-                    /*#__PURE__*/ _jsx("div", {
-                        role: "tablist",
-                        "aria-label": editorCopy.tabs,
-                        style: {
-                            display: 'flex',
-                            gap: 8,
-                            marginBottom: 8
-                        },
-                        children: tabs.map((tab, index)=>/*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                role: "tab",
-                                id: `${tabId}-${tab.slot}`,
-                                "aria-selected": tab.slot === slot,
-                                tabIndex: tab.slot === slot ? 0 : -1,
-                                "aria-controls": `${tabId}-panel`,
-                                onClick: ()=>setActive({
-                                        id: experimentId,
-                                        slot: tab.slot
-                                    }),
-                                onKeyDown: (event)=>{
-                                    const next = event.key === 'ArrowRight' ? (index + 1) % tabs.length : event.key === 'ArrowLeft' ? (index + tabs.length - 1) % tabs.length : event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : undefined;
-                                    if (next === undefined) return;
-                                    event.preventDefault();
-                                    setActive({
-                                        id: experimentId,
-                                        slot: tabs[next].slot
-                                    });
-                                    const buttons = event.currentTarget.parentElement?.querySelectorAll('[role="tab"]');
-                                    buttons?.[next]?.focus();
-                                },
-                                children: tab.label
-                            }, tab.slot))
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-slot-toolbar",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "xp-slot-tabs",
+                                role: "tablist",
+                                "aria-label": editorCopy.tabs,
+                                children: tabs.map((tab, index)=>/*#__PURE__*/ _jsx("button", {
+                                        className: "xp-slot-tab",
+                                        type: "button",
+                                        role: "tab",
+                                        id: `${tabId}-${tab.slot}`,
+                                        "aria-selected": tab.slot === slot,
+                                        tabIndex: tab.slot === slot ? 0 : -1,
+                                        "aria-controls": `${tabId}-panel`,
+                                        onClick: ()=>setActive({
+                                                id: experimentId,
+                                                slot: tab.slot
+                                            }),
+                                        onKeyDown: (event)=>{
+                                            const next = event.key === 'ArrowRight' ? (index + 1) % tabs.length : event.key === 'ArrowLeft' ? (index + tabs.length - 1) % tabs.length : event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : undefined;
+                                            if (next === undefined) return;
+                                            event.preventDefault();
+                                            setActive({
+                                                id: experimentId,
+                                                slot: tabs[next].slot
+                                            });
+                                            const buttons = event.currentTarget.parentElement?.querySelectorAll('[role="tab"]');
+                                            buttons?.[next]?.focus();
+                                        },
+                                        children: tab.label
+                                    }, tab.slot))
+                            }),
+                            slot !== 'control' ? /*#__PURE__*/ _jsx("div", {
+                                className: "xp-slot-actions",
+                                children: /*#__PURE__*/ _jsx("button", {
+                                    className: "xp-slot-button",
+                                    type: "button",
+                                    disabled: !selected || originalEmpty,
+                                    onClick: ()=>requestCopy(slot),
+                                    children: editorCopy.copy
+                                })
+                            }) : null
+                        ]
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsxs("div", {
+                className: slotEmpty ? 'xp-slot-panel xp-slot-panel-empty' : 'xp-slot-panel',
                 role: "tabpanel",
                 id: `${tabId}-panel`,
                 "aria-labelledby": `${tabId}-${slot}`,
-                children: /*#__PURE__*/ _jsx(Slot, {})
+                children: [
+                    /*#__PURE__*/ _jsx(Slot, {
+                        className: "xp-slot-drop-target"
+                    }),
+                    slotEmpty ? /*#__PURE__*/ _jsx("span", {
+                        className: "xp-slot-drop-label",
+                        children: editorCopy.dropZone(slot)
+                    }) : null
+                ]
             })
         ]
     });

package/dist/puck/editor/copy.d.ts

@@ -10,7 +10,8 @@ export declare const editorCopy: {
     readonly running: "Changing this content mid-test mixes two versions in one result";
     readonly decided: (winner: string) => string;
     readonly archived: "This test is archived; the winning content is shown to everyone.";
-    readonly copy: (label: string) => string;
+    readonly copy: "Copy Original to this version";
+    readonly dropZone: (slot: "control" | "variantA" | "variantB" | "variantC") => string;
     readonly replaceConfirm: (label: string) => string;
     readonly replace: "Replace";
     readonly createLabel: "Test this block";
@@ -18,6 +19,7 @@ export declare const editorCopy: {
     readonly cancel: "Cancel";
     readonly name: "Name";
     readonly setup: "Set up the test";
+    readonly viewResults: "View results";
     readonly nameExists: "This name is too close to an existing test. Choose a different name.";
     readonly createError: "Couldn't create the test. Try again.";
     readonly loading: "Loading test…";

package/dist/puck/editor/copy.js

@@ -10,7 +10,8 @@ export const editorCopy = {
     running: 'Changing this content mid-test mixes two versions in one result',
     decided: (winner)=>`Decided: ${winner}. Use 'Make it the content' on the test to finish.`,
     archived: 'This test is archived; the winning content is shown to everyone.',
-    copy: (label)=>`Copy Original → ${label}`,
+    copy: 'Copy Original to this version',
+    dropZone: (slot)=>slot === 'control' ? 'Drop the original content here' : `Drop ${editorCopy.labels[slot]} content here`,
     replaceConfirm: (label)=>`${label} already has content. Replace it with a copy of the Original?`,
     replace: 'Replace',
     createLabel: 'Test this block',
@@ -18,6 +19,7 @@ export const editorCopy = {
     cancel: 'Cancel',
     name: 'Name',
     setup: 'Set up the test',
+    viewResults: 'View results',
     nameExists: "This name is too close to an existing test. Choose a different name.",
     createError: "Couldn't create the test. Try again.",
     loading: 'Loading test…',