@delmaredigital/payload-experiments 0.2.0-rc.2 → 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/endpoints/preflight.js

@@ -1,7 +1,8 @@
 import { preflightData } from '../transitions/preflightData.js';
+import { routeId } from './routeId.js';
 export async function handlePreflight(req, ctx, dependencies) {
-    const id = req.routeParams?.id;
-    const result = typeof id === 'string' || typeof id === 'number' ? await preflightData(req, {
+    const id = routeId(req);
+    const result = id !== undefined ? await preflightData(req, {
         experimentId: id,
         options: ctx.options
     }, dependencies) : null;

package/dist/endpoints/previewToken.js

@@ -1,4 +1,5 @@
 import { signPreviewToken } from '../runtime/previewToken.js';
+import { routeId } from './routeId.js';
 export async function handlePreviewToken(req, { options }) {
     const headers = {
         'Cache-Control': 'no-store'
@@ -14,8 +15,8 @@ export async function handlePreviewToken(req, { options }) {
             status,
             headers
         });
-    const id = req.routeParams?.id;
-    if (typeof id !== 'string' && typeof id !== 'number') return refuse(404, 'not-found', 'Experiment not found');
+    const id = routeId(req);
+    if (id === undefined) return refuse(404, 'not-found', 'Experiment not found');
     const result = await req.payload.find({
         collection: 'xp-experiments',
         req,

package/dist/endpoints/recompute.js

@@ -1,8 +1,9 @@
 import { runResults } from '../server/runResults.js';
 import { readSnapshots, resultsError } from './results.js';
+import { routeId } from './routeId.js';
 export async function handleRecompute(req, _ctx) {
-    const id = req.routeParams?.id;
-    if (typeof id !== 'string' && typeof id !== 'number') return resultsError(404, 'not-found', 'Experiment not found');
+    const id = routeId(req);
+    if (id === undefined) return resultsError(404, 'not-found', 'Experiment not found');
     const { docs } = await req.payload.find({
         collection: 'xp-experiments',
         req,

package/dist/endpoints/results.js

@@ -1,5 +1,6 @@
 import { resultsMetadata, newestSnapshotIds } from '../db/snapshots.js';
 import { pooledExecutor } from '../db/executor.js';
+import { routeId } from './routeId.js';
 const headers = {
     'Cache-Control': 'no-store'
 };
@@ -52,8 +53,8 @@ export async function readSnapshots(req, ids, { per = 'phase', decisionId, serie
         }));
 }
 export async function handleResults(req, _ctx) {
-    const id = req.routeParams?.id;
-    if (typeof id !== 'string' && typeof id !== 'number') return resultsError(404, 'not-found', 'Experiment not found');
+    const id = routeId(req);
+    if (id === undefined) return resultsError(404, 'not-found', 'Experiment not found');
     const params = new URL(req.url ?? 'http://localhost').searchParams;
     const selected = params.get('phase');
     if (selected !== null && (!/^\d+$/.test(selected) || !Number.isSafeInteger(Number(selected)) || Number(selected) < 1)) return resultsError(400, 'invalid-body', 'Choose a valid round');

package/dist/endpoints/routeId.d.ts

@@ -0,0 +1,5 @@
+import type { PayloadRequest } from 'payload';
+import type { DocId } from '../types/contracts.js';
+/** Match Payload's relationship ID type before passing an HTTP ID to Local API or SQL. */
+export declare function experimentId(req: PayloadRequest, value: unknown): DocId | undefined;
+export declare function routeId(req: PayloadRequest): DocId | undefined;

package/dist/endpoints/routeId.js

@@ -0,0 +1,13 @@
+/** Match Payload's relationship ID type before passing an HTTP ID to Local API or SQL. */ export function experimentId(req, value) {
+    if (typeof value !== 'string' && typeof value !== 'number') return undefined;
+    const id = String(value);
+    const idType = req.payload.collections?.['xp-experiments']?.customIDType ?? req.payload.db.defaultIDType;
+    if (idType !== 'number') return id;
+    if (!/^\d+$/.test(id)) return undefined;
+    const number = Number(id);
+    // Payload's Postgres serial ids are int4; larger values would reach SQL and fail with 22003.
+    return Number.isSafeInteger(number) && number <= 2_147_483_647 ? number : undefined;
+}
+export function routeId(req) {
+    return experimentId(req, req.routeParams?.id);
+}

package/dist/endpoints/summary.js

@@ -1,27 +1,40 @@
 import { checkStart } from '../transitions/checkStart.js';
 import { loadStartInputsBatch } from '../transitions/preflightData.js';
 import { readSnapshots, resultsError } from './results.js';
+import { experimentId } from './routeId.js';
 export async function handleSummary(req, { options }) {
     let ids;
     try {
-        // Split before decoding: an opaque id can itself contain a comma.
-        const raw = new URL(req.url ?? 'http://localhost').search.slice(1).split('&').find((part)=>part.split('=')[0] === 'ids')?.slice(4);
-        if (raw === undefined) return resultsError(400, 'invalid-body', 'Provide experiment ids');
-        ids = raw.split(',').map((id)=>decodeURIComponent(id.replaceAll('+', ' ')));
+        const url = new URL(req.url ?? 'http://localhost');
+        // URLSearchParams tolerates malformed escapes; preserve the existing parse refusal.
+        decodeURIComponent(url.search.replaceAll('+', ' '));
+        const values = url.searchParams.getAll('ids');
+        if (values.length === 0) return resultsError(400, 'invalid-body', 'Provide experiment ids');
+        ids = values.flatMap((value)=>value.split(',')).map((id)=>id.trim()).filter(Boolean);
     } catch  {
         return resultsError(400, 'invalid-body', 'Could not parse experiment ids');
     }
     if (ids.length > 100) return resultsError(422, 'too-many-ids', 'Request at most 100 experiments');
-    if (ids.some((id)=>!id.trim())) return resultsError(422, 'invalid-ids', 'Experiment ids must be nonempty');
-    const snapshots = await readSnapshots(req, [
-        ...new Set(ids)
-    ], {
-        per: 'experiment'
+    if (ids.length === 0) return resultsError(422, 'invalid-ids', 'Experiment ids must be nonempty');
+    const requested = ids.flatMap((key)=>{
+        const id = experimentId(req, key);
+        return id === undefined ? [] : [
+            {
+                key,
+                id
+            }
+        ];
     });
+    const uniqueIds = [
+        ...new Set(requested.map(({ id })=>id))
+    ];
+    const snapshots = uniqueIds.length ? await readSnapshots(req, uniqueIds, {
+        per: 'experiment'
+    }) : [];
     const response = Object.create(null);
-    for (const id of ids){
-        const snapshot = snapshots.find((row)=>String(typeof row.experiment === 'object' ? row.experiment.id : row.experiment) === id)?.snapshot;
-        response[id] = snapshot ? {
+    for (const { key, id } of requested){
+        const snapshot = snapshots.find((row)=>String(typeof row.experiment === 'object' ? row.experiment.id : row.experiment) === String(id))?.snapshot;
+        response[key] = snapshot ? {
             exposures: snapshot.exposures.total,
             days: Math.max(0, (Date.parse(snapshot.window.to) - Date.parse(snapshot.window.from)) / 86_400_000),
             verdict: {
@@ -35,7 +48,7 @@ export async function handleSummary(req, { options }) {
         };
     }
     try {
-        if (await options.access.manage({
+        if (uniqueIds.length && await options.access.manage({
             req
         }) === true) {
             const found = await req.payload.find({
@@ -44,26 +57,24 @@ export async function handleSummary(req, { options }) {
                 overrideAccess: false,
                 depth: 0,
                 pagination: false,
-                limit: ids.length,
+                limit: uniqueIds.length,
                 where: {
                     id: {
-                        in: [
-                            ...new Set(ids)
-                        ]
+                        in: uniqueIds
                     }
                 }
             });
             const drafts = found.docs.filter((e)=>e.status === 'draft' || e.status === 'stopped');
             const inputs = await loadStartInputsBatch(req, options, drafts, true);
-            for (const id of ids){
+            for (const { key, id } of requested){
                 // Payload normalises numeric ids (for example 01 to 1); preserve the requested response key.
-                const experiment = drafts.find((e)=>String(e.id) === id || typeof e.id === 'number' && Number(id) === e.id);
+                const experiment = drafts.find((e)=>String(e.id) === String(id));
                 if (!experiment) continue;
                 const input = inputs.get(String(experiment.id));
                 try {
-                    response[id].ready = !!input && checkStart(input).every((check)=>check.ok);
+                    response[key].ready = !!input && checkStart(input).every((check)=>check.ok);
                 } catch  {
-                    response[id].ready = false;
+                    response[key].ready = false;
                 }
             }
         }

package/dist/endpoints/transitions.js

@@ -7,6 +7,7 @@ import { decide } from '../transitions/decide.js';
 import { releaseHoldout } from '../transitions/releaseHoldout.js';
 import { makeContent } from '../transitions/makeContent.js';
 import { archive } from '../transitions/archive.js';
+import { routeId } from './routeId.js';
 const invalidBody = ()=>Response.json({
         errors: [
             {
@@ -30,8 +31,8 @@ async function body(req) {
 }
 const only = (value, keys)=>Object.keys(value).every((key)=>keys.includes(key));
 async function respond(req, action) {
-    const id = req.routeParams?.id;
-    if (typeof id !== 'string' && typeof id !== 'number') return Response.json({
+    const id = routeId(req);
+    if (id === undefined) return Response.json({
         errors: [
             {
                 code: 'not-found',

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>;