@delmaredigital/payload-experiments 0.1.0-rc.7 → 0.2.0-rc.2

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

@@ -0,0 +1,263 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { CheckboxInput, TextareaInput, TextInput } from '@payloadcms/ui';
+import { EDITABLE_BY_STATUS, isEditable } from '../../../collections/experiments/editability.js';
+import { coerceParam, paramIssue, paramsForArm, setParam } from '../../arms/params.model.js';
+import { SETTING_COPY } from '../../copy/setting.js';
+import { lockedReason } from '../../lockedNotice.model.js';
+import { bindSetting, displayParam, paramCheckMessage, paramControl } from './setting.model.js';
+import './setting.css';
+function Binding({ test, surface }) {
+    const id = useId();
+    const doc = test.doc;
+    if (!doc) return null;
+    const point = surface.flagPoints.find((point)=>point.id === doc.flagPoint);
+    const editable = surface.canManage && isEditable(doc.status, 'flagPoint');
+    const reason = lockedReason(doc.status, 'flagPoint', EDITABLE_BY_STATUS);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-setting-binding",
+        children: [
+            editable ? /*#__PURE__*/ _jsxs("label", {
+                htmlFor: id,
+                children: [
+                    SETTING_COPY.setting,
+                    /*#__PURE__*/ _jsxs("select", {
+                        id: id,
+                        value: point?.id ?? '',
+                        "aria-describedby": point ? `${id}-description` : undefined,
+                        onChange: (event)=>{
+                            const current = test.doc;
+                            if (!current || !surface.canManage || !isEditable(current.status, 'flagPoint') || event.target.value === current.flagPoint) return;
+                            const next = surface.flagPoints.find((point)=>point.id === event.target.value);
+                            if (!next) return;
+                            test.stage({
+                                flagPoint: next.id,
+                                arms: bindSetting(current.arms, next)
+                            });
+                            void test.commit();
+                        },
+                        children: [
+                            !point ? /*#__PURE__*/ _jsx("option", {
+                                value: "",
+                                children: SETTING_COPY.choose
+                            }) : null,
+                            surface.flagPoints.map((point)=>/*#__PURE__*/ _jsx("option", {
+                                    value: point.id,
+                                    children: point.label
+                                }, point.id))
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsxs("p", {
+                title: reason ?? undefined,
+                children: [
+                    SETTING_COPY.setting,
+                    ": ",
+                    point?.label ?? SETTING_COPY.choose
+                ]
+            }),
+            point ? /*#__PURE__*/ _jsx("p", {
+                id: `${id}-description`,
+                children: point.description ?? point.label
+            }) : null,
+            reason ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-setting-lock",
+                children: reason
+            }) : null,
+            test.errors.flagPoint ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: test.errors.flagPoint
+            }) : null
+        ]
+    });
+}
+function Parameter({ test, surface, armIndex, paramKey, field }) {
+    const id = useId();
+    // Only the edited scalar stays local; the complete group is rebuilt on commit.
+    const [draft, setDraft] = useState(null);
+    const [touched, setTouched] = useState(false);
+    const doc = test.doc;
+    const arm = doc?.arms[armIndex];
+    if (!doc || !arm) return null;
+    const point = surface.flagPoints.find((point)=>point.id === doc.flagPoint);
+    const value = draft ? draft.value : paramsForArm(arm, point)[paramKey];
+    const path = `arms.${armIndex}.params.${paramKey}`;
+    const editable = surface.canManage && isEditable(doc.status, 'arms');
+    const reason = lockedReason(doc.status, 'arms', EDITABLE_BY_STATUS);
+    const failed = test.preflight?.checks.find((check)=>check.code === 'flag-params-invalid' && !check.ok);
+    const error = test.errors[path] ?? test.errors[`arms.${armIndex}.params`];
+    const preflightIssue = paramCheckMessage(failed?.detail, arm.key, paramKey, field);
+    const issue = error ?? (touched || preflightIssue ? paramIssue(field, draft ? coerceParam(field, value) : value) : null) ?? preflightIssue;
+    const save = (next)=>{
+        const current = test.doc;
+        const currentArm = current?.arms[armIndex];
+        if (!current || currentArm?.kind !== 'variant' || currentArm.key !== arm.key || !surface.canManage || !isEditable(current.status, 'arms') || current.flagPoint !== point?.id) return;
+        setTouched(true);
+        const arms = current.arms.map((item, index)=>index === armIndex ? {
+                ...item,
+                params: setParam(paramsForArm(item, point), paramKey, field, next)
+            } : item);
+        test.stage({
+            arms
+        });
+        void test.commit();
+    };
+    const blur = ()=>{
+        if (draft) {
+            save(draft.value);
+            setDraft(null);
+        }
+    };
+    const control = paramControl(field);
+    const shared = {
+        path: id,
+        label: field.label,
+        required: field.required
+    };
+    const inlineError = issue ? /*#__PURE__*/ _jsx("p", {
+        id: `${id}-error`,
+        role: "alert",
+        children: issue
+    }) : null;
+    const editDraft = (value)=>{
+        setTouched(true);
+        setDraft({
+            value
+        });
+    };
+    const text = typeof value === 'string' ? value : '';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-setting-parameter",
+        onBlur: blur,
+        children: [
+            arm.kind === 'control' || !editable ? /*#__PURE__*/ _jsxs("div", {
+                title: reason ?? undefined,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "xp-setting-value",
+                        children: arm.kind === 'control' ? SETTING_COPY.current.replace('{value}', displayParam(field, point?.effectiveDefaults[paramKey])) : displayParam(field, value)
+                    }),
+                    reason ? /*#__PURE__*/ _jsx("p", {
+                        className: "xp-setting-lock",
+                        children: reason
+                    }) : null
+                ]
+            }) : control === 'checkbox' ? /*#__PURE__*/ _jsx(CheckboxInput, {
+                ...shared,
+                id: id,
+                name: id,
+                checked: value === true,
+                onToggle: (event)=>save(event.target.checked)
+            }) : control === 'segmented' ? /*#__PURE__*/ _jsxs("fieldset", {
+                "aria-describedby": issue ? `${id}-error` : undefined,
+                children: [
+                    /*#__PURE__*/ _jsx("legend", {
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "xp-setting-segments",
+                        children: field.options?.map((option)=>/*#__PURE__*/ _jsxs("label", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "radio",
+                                        name: id,
+                                        value: option.value,
+                                        checked: value === option.value,
+                                        required: field.required,
+                                        onChange: ()=>save(option.value)
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: option.label
+                                    })
+                                ]
+                            }, option.value))
+                    })
+                ]
+            }) : control === 'select' ? /*#__PURE__*/ _jsxs("label", {
+                htmlFor: id,
+                children: [
+                    field.label,
+                    /*#__PURE__*/ _jsxs("select", {
+                        id: id,
+                        value: text,
+                        required: field.required,
+                        "aria-invalid": !!issue,
+                        "aria-describedby": issue ? `${id}-error` : undefined,
+                        onChange: (event)=>save(event.target.value),
+                        children: [
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "",
+                                children: SETTING_COPY.empty
+                            }),
+                            field.options?.map((option)=>/*#__PURE__*/ _jsx("option", {
+                                    value: option.value,
+                                    children: option.label
+                                }, option.value))
+                        ]
+                    })
+                ]
+            }) : control === 'number' ? /*#__PURE__*/ _jsxs("label", {
+                htmlFor: id,
+                children: [
+                    field.label,
+                    /*#__PURE__*/ _jsx("input", {
+                        id: id,
+                        type: "number",
+                        min: field.min,
+                        max: field.max,
+                        step: "any",
+                        required: field.required,
+                        value: typeof value === 'number' && Number.isFinite(value) || typeof value === 'string' ? value : '',
+                        "aria-invalid": !!issue,
+                        "aria-describedby": issue ? `${id}-error` : undefined,
+                        onChange: (event)=>editDraft(event.target.value)
+                    })
+                ]
+            }) : control === 'textarea' ? /*#__PURE__*/ _jsx(TextareaInput, {
+                ...shared,
+                Error: inlineError,
+                showError: !!issue,
+                value: text,
+                onChange: (event)=>editDraft(event.target.value)
+            }) : /*#__PURE__*/ _jsx(TextInput, {
+                ...shared,
+                Error: inlineError,
+                showError: !!issue,
+                hasMany: false,
+                value: text,
+                onChange: (event)=>editDraft(event.target.value)
+            }),
+            arm.kind === 'control' || !editable || control !== 'text' && control !== 'textarea' ? inlineError : null
+        ]
+    });
+}
+function VersionContent({ test, surface, armIndex }) {
+    const doc = test.doc;
+    const arm = doc?.arms[armIndex];
+    if (!doc || !arm) return null;
+    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("p", {
+        children: SETTING_COPY.holdout
+    });
+    const point = surface.flagPoints.find((point)=>point.id === doc.flagPoint);
+    if (!point) return /*#__PURE__*/ _jsx("p", {
+        children: SETTING_COPY.choose
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: "xp-setting-values",
+        children: Object.entries(point.params).map(([key, field])=>/*#__PURE__*/ _jsx(Parameter, {
+                test: test,
+                surface: surface,
+                armIndex: armIndex,
+                paramKey: key,
+                field: field
+            }, `${doc.id}:${point.id}:${arm.key}:${key}:${doc.status}:${surface.canManage}`))
+    });
+}
+export const settingParts = {
+    Binding,
+    VersionContent
+};

package/dist/admin/surface/setting/setting.css

@@ -0,0 +1,29 @@
+.xp-setting-binding select,
+.xp-setting-parameter select,
+.xp-setting-parameter input[type='number'] {
+  display: block;
+  width: 100%;
+  padding: 0.65rem;
+  margin-top: 0.4rem;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s);
+  background: var(--theme-input-bg);
+  color: var(--theme-text);
+}
+.xp-setting-values { display: grid; gap: 1rem; }
+.xp-setting-value { white-space: pre-wrap; }
+.xp-setting-lock { color: var(--theme-elevation-600); }
+.xp-setting-parameter fieldset { border: 0; padding: 0; margin: 0; }
+.xp-setting-segments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
+.xp-setting-segments label { position: relative; }
+.xp-setting-segments input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
+.xp-setting-segments span {
+  display: block;
+  padding: 0.5rem 0.8rem;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s);
+  background: var(--theme-input-bg);
+  color: var(--theme-text);
+}
+.xp-setting-segments input:checked + span { background: var(--theme-elevation-150); border-color: var(--theme-text); }
+.xp-setting-segments input:focus-visible + span { outline: 2px solid var(--theme-text); outline-offset: 2px; }

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

@@ -0,0 +1,8 @@
+import type { Arm, ParamField } from '../../../types/contracts.js';
+import type { SerializedFlagPoint } from '../../../types/admin.js';
+export declare function paramControl(field: ParamField): ParamField['type'] | 'segmented';
+export declare function displayParam(field: ParamField, value: unknown): string;
+/** Bind against the current document, preserving every unrelated version field. */
+export declare function bindSetting(arms: Arm[], point?: SerializedFlagPoint): Arm[];
+/** Preflight identifies invalid values with { arm, field }, never editor-facing codes. */
+export declare function paramCheckMessage(detail: unknown, armKey: string, key: string, field: ParamField): string | null;

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

@@ -0,0 +1,25 @@
+import { SETTING_COPY } from '../../copy/setting.js';
+export function paramControl(field) {
+    return field.type === 'select' && field.options?.length && field.options.length <= 4 ? 'segmented' : field.type;
+}
+export function displayParam(field, value) {
+    if (value == null || value === '') return SETTING_COPY.empty;
+    if (field.type === 'checkbox') return value === true ? SETTING_COPY.yes : value === false ? SETTING_COPY.no : SETTING_COPY.empty;
+    if (field.type === 'select') return field.options?.find((option)=>option.value === value)?.label ?? SETTING_COPY.empty;
+    if (field.type === 'number') return typeof value === 'number' && Number.isFinite(value) ? String(value) : SETTING_COPY.empty;
+    return typeof value === 'string' ? value : SETTING_COPY.empty;
+}
+/** Bind against the current document, preserving every unrelated version field. */ export function bindSetting(arms, point) {
+    return arms.map((arm)=>{
+        const { params: _params, ...rest } = arm;
+        return arm.kind === 'holdout' ? rest : {
+            ...rest,
+            params: arm.kind === 'control' ? {
+                ...point?.effectiveDefaults
+            } : {}
+        };
+    });
+}
+/** Preflight identifies invalid values with { arm, field }, never editor-facing codes. */ export function paramCheckMessage(detail, armKey, key, field) {
+    return Array.isArray(detail) && detail.some((item)=>item && item.arm === armKey && item.field === key) ? SETTING_COPY.invalid.replace('{label}', field.label) : null;
+}

package/dist/admin/surface/surface.css

@@ -0,0 +1,50 @@
+.xp-tests-surface {
+  min-height: 100dvh;
+  width: 100%;
+  color: var(--theme-text);
+  background: var(--theme-bg);
+}
+.xp-tests-shell-header {
+  display: flex;
+  align-items: center;
+  gap: var(--base);
+  padding: calc(var(--base) * 1.5) calc(var(--base) * 2);
+  border-bottom: 1px solid var(--theme-elevation-150);
+}
+.xp-tests-main { padding: calc(var(--base) * 2); }
+.xp-tests-surface a { color: var(--theme-text); }
+.xp-tests-toolbar, .xp-tests-card-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--base);
+}
+.xp-tests-toolbar { margin-bottom: calc(var(--base) * 2); }
+.xp-tests-toolbar h1 { margin: 0; margin-right: auto; }
+.xp-tests-toolbar label { display: grid; gap: calc(var(--base) / 4); }
+.xp-tests-toolbar input, .xp-tests-surface button {
+  color: var(--theme-text);
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-300);
+  border-radius: var(--style-radius-s);
+  padding: calc(var(--base) / 2);
+}
+.xp-tests-primary {
+  padding: calc(var(--base) / 2) var(--base);
+  border: 1px solid var(--theme-elevation-500);
+  border-radius: var(--style-radius-s);
+}
+.xp-tests-group { margin-bottom: calc(var(--base) * 2); }
+.xp-tests-group summary { cursor: pointer; padding: var(--base) 0; }
+.xp-tests-cards { display: grid; gap: var(--base); }
+.xp-tests-card {
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-m);
+  padding: calc(var(--base) * 1.5);
+  background: var(--theme-elevation-50);
+}
+.xp-tests-card h3 { margin: 0; margin-right: auto; }
+.xp-tests-health { width: calc(var(--base) / 2); height: calc(var(--base) / 2); border-radius: 50%; }
+.xp-tests-health--red { background: var(--theme-error-500); }
+.xp-tests-health--amber { background: var(--theme-warning-500); }
+.xp-tests-health--green { background: var(--theme-success-500); }

package/dist/admin/surface/test/AdvancedSection.d.ts

@@ -0,0 +1,2 @@
+import type { SectionProps } from '../contracts.js';
+export declare function AdvancedSection({ test, surface }: SectionProps): import("react").JSX.Element;

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

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TEST_PAGE } from '../../copy/testPage.js';
+import { ADVANCED_COPY as C } from '../../copy/advanced.js';
+import { exposureOptions } from './testPage.model.js';
+import { FieldErrors, positiveInteger, ReadOnly, reasonFor, save, SelectEdit, TextEdit } from './fields.js';
+import { Section } from './Section.js';
+const readOnlyFields = [
+    'layer',
+    'slug',
+    'kind',
+    'unitType'
+];
+export function AdvancedSection({ test, surface }) {
+    const doc = test.doc;
+    const reason = reasonFor(test, 'analysis');
+    const change = (field, value)=>save(test, 'analysis', ()=>({
+                analysis: {
+                    ...test.doc.analysis,
+                    [field]: value
+                }
+            }));
+    const numbers = [
+        [
+            'minExposuresPerArm',
+            200,
+            1
+        ],
+        [
+            'attributionWindowHours',
+            '',
+            1
+        ],
+        [
+            'sequentialTuningParameter',
+            '',
+            0
+        ]
+    ];
+    return /*#__PURE__*/ _jsx(Section, {
+        test: test,
+        sectionId: "advanced",
+        children: /*#__PURE__*/ _jsxs("details", {
+            children: [
+                /*#__PURE__*/ _jsx("summary", {
+                    children: TEST_PAGE.sections.advanced
+                }),
+                /*#__PURE__*/ _jsx(SelectEdit, {
+                    label: C.exposurePolicy.label,
+                    value: doc.exposurePolicy,
+                    reason: reasonFor(test, 'exposurePolicy'),
+                    options: exposureOptions(doc.kind).map((value)=>({
+                            value,
+                            label: C.policies[value]
+                        })),
+                    onCommit: (value)=>save(test, 'exposurePolicy', ()=>({
+                                exposurePolicy: value
+                            }))
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    children: C.exposurePolicy.help
+                }),
+                /*#__PURE__*/ _jsx(FieldErrors, {
+                    test: test,
+                    path: "exposurePolicy"
+                }),
+                surface.isAdmin ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectEdit, {
+                            label: C.method.label,
+                            value: doc.analysis?.method ?? 'sequential',
+                            reason: reason,
+                            options: [
+                                {
+                                    value: 'sequential',
+                                    label: C.sequential
+                                },
+                                {
+                                    value: 'bayesian',
+                                    label: C.bayesian
+                                }
+                            ],
+                            onCommit: (value)=>change('method', value)
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            children: C.method.help
+                        }),
+                        /*#__PURE__*/ _jsx(FieldErrors, {
+                            test: test,
+                            path: "analysis.method"
+                        })
+                    ]
+                }) : null,
+                /*#__PURE__*/ _jsx(SelectEdit, {
+                    label: C.cuped.label,
+                    value: doc.analysis?.cuped ?? 'auto',
+                    reason: reason,
+                    options: [
+                        {
+                            value: 'auto',
+                            label: C.auto
+                        },
+                        {
+                            value: 'off',
+                            label: C.off
+                        }
+                    ],
+                    onCommit: (value)=>change('cuped', value)
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    children: C.cuped.help
+                }),
+                /*#__PURE__*/ _jsx(FieldErrors, {
+                    test: test,
+                    path: "analysis.cuped"
+                }),
+                numbers.map(([field, fallback, min])=>/*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextEdit, {
+                                label: C[field].label,
+                                value: doc.analysis?.[field] ?? fallback,
+                                placeholder: field === 'attributionWindowHours' ? C.inheritedWindow : field === 'sequentialTuningParameter' ? C.automaticTuning : undefined,
+                                type: "number",
+                                min: min,
+                                reason: reason,
+                                validate: field === 'minExposuresPerArm' ? positiveInteger : undefined,
+                                onCommit: (raw)=>change(field, raw.trim() ? Number(raw) : null)
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                children: C[field].help
+                            }),
+                            /*#__PURE__*/ _jsx(FieldErrors, {
+                                test: test,
+                                path: `analysis.${field}`
+                            })
+                        ]
+                    }, field)),
+                readOnlyFields.map((field)=>/*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(ReadOnly, {
+                                label: C[field].label,
+                                value: typeof doc[field] === 'string' || typeof doc[field] === 'number' ? String(doc[field]) : C.none,
+                                reason: reasonFor(test, field)
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                children: C[field].help
+                            })
+                        ]
+                    }, field))
+            ]
+        })
+    });
+}

package/dist/admin/surface/test/GoalSection.d.ts

@@ -0,0 +1,2 @@
+import type { SectionProps } from '../contracts.js';
+export declare function GoalSection({ test, surface }: SectionProps): import("react").JSX.Element;