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

package/README.md

@@ -530,6 +530,21 @@ components: { ExperimentSlot }
 components: { ExperimentSlot: ExperimentSlotEditor }
 ```
 
+Load the editor stylesheet inside the Puck iframe. With Tailwind v4, add the
+package import **after** Tailwind in the CSS that builds your editor iframe
+stylesheet (the stylesheet listed in payload-puck's `editorStylesheets`):
+
+```css
+@import "tailwindcss";
+@import "@delmaredigital/payload-experiments/puck/editor.css";
+```
+
+Alternatively, serve the exported `puck/editor.css` file from a public URL and
+append that URL to payload-puck's `editorStylesheets`, after the host stylesheet.
+The editor CSS includes its own light and dark palette, selected by
+`data-theme="dark"` or the `dark` class on the iframe's `<html>`. The client component's CSS import alone
+does not reach an iframe configured with `syncHostStyles: false`.
+
 Resolve the Puck data on the server with `resolveExperimentData` before
 rendering it. The render component shows only the selected group's slot. The
 editor lets you select a block experiment, edit each group's content, copy the

package/dist/admin/TestsNavLink.d.ts

@@ -1 +1,2 @@
+import './theme.css';
 export declare function TestsNavLink(): import("react").JSX.Element;

package/dist/admin/TestsNavLink.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './theme.css';
 import { Link, useConfig } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
 import { usePathname } from 'next/navigation.js';

package/dist/admin/actions/ConfirmDialog.d.ts

@@ -1,3 +1,4 @@
+import '../theme.css';
 import type { ReactNode } from 'react';
 import type { DocId } from '../../types/contracts.js';
 import type { ExperimentAction } from './actions.model.js';

package/dist/admin/actions/ConfirmDialog.js

@@ -1,5 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '../theme.css';
+import { theme } from '../theme.js';
 import { useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button, TextInput } from '@payloadcms/ui';
@@ -24,7 +26,7 @@ export function DialogFrame({ title, onClose, children }) {
             position: 'fixed',
             inset: 0,
             zIndex: 1000,
-            background: 'var(--theme-overlay)',
+            background: theme.color.overlay,
             display: 'grid',
             placeItems: 'center'
         },
@@ -35,14 +37,14 @@ export function DialogFrame({ title, onClose, children }) {
             "aria-labelledby": heading,
             tabIndex: -1,
             style: {
-                background: 'var(--theme-bg)',
-                color: 'var(--theme-text)',
-                border: '1px solid var(--theme-elevation-200)',
+                background: theme.color.bg,
+                color: theme.color.text,
+                border: `1px solid ${theme.color.borderStrong}`,
                 padding: '2rem',
                 width: 'min(36rem, 90vw)',
                 maxHeight: '90vh',
                 overflow: 'auto',
-                borderRadius: 'var(--style-radius-s)'
+                borderRadius: theme.radius.small
             },
             onKeyDown: (event)=>{
                 if (event.defaultPrevented) return;

package/dist/admin/components/ChipsInput.d.ts

@@ -0,0 +1,12 @@
+import '../theme.css';
+import './chipsInput.css';
+export interface ChipsInputProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    label: string;
+    description?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    id: string;
+}
+export declare function ChipsInput({ value, onChange, label, description, placeholder, disabled, id }: ChipsInputProps): import("react").JSX.Element;

package/dist/admin/components/ChipsInput.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { AUDIENCE_COPY } from '../copy/audience.js';
+import '../theme.css';
+import './chipsInput.css';
+export function ChipsInput({ value, onChange, label, description, placeholder, disabled = false, id }) {
+    const [draft, setDraft] = useState('');
+    const input = useRef(null);
+    const commit = (text)=>{
+        if (disabled) return;
+        const next = [
+            ...new Set([
+                ...value,
+                ...text.split(',')
+            ].map((item)=>item.trim()).filter(Boolean))
+        ];
+        if (next.length !== value.length || next.some((item, index)=>item !== value[index])) onChange(next);
+        setDraft('');
+    };
+    const remove = (index)=>{
+        if (disabled) return;
+        onChange(value.filter((_, i)=>i !== index));
+        input.current?.focus();
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-chips",
+        role: "group",
+        "aria-labelledby": `${id}-label`,
+        "aria-disabled": disabled,
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                id: `${id}-label`,
+                htmlFor: id,
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-chips-control",
+                children: [
+                    value.map((item, index)=>/*#__PURE__*/ _jsxs("span", {
+                            className: "xp-chips-item",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    children: item
+                                }),
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    disabled: disabled,
+                                    "aria-label": AUDIENCE_COPY.removeValue(item),
+                                    onClick: ()=>remove(index),
+                                    children: AUDIENCE_COPY.removeSymbol
+                                })
+                            ]
+                        }, item)),
+                    /*#__PURE__*/ _jsx("input", {
+                        ref: input,
+                        id: id,
+                        type: "text",
+                        value: draft,
+                        disabled: disabled,
+                        placeholder: placeholder,
+                        "aria-describedby": description ? `${id}-description` : undefined,
+                        onChange: (event)=>setDraft(event.target.value),
+                        onBlur: ()=>{
+                            if (draft.trim()) commit(draft);
+                        },
+                        onKeyDown: (event)=>{
+                            if (disabled || event.nativeEvent.isComposing) return;
+                            if (event.key === 'Enter' || event.key === ',') {
+                                event.preventDefault();
+                                commit(draft);
+                            } else if (event.key === 'Tab' && draft.trim()) commit(draft);
+                            else if (event.key === 'Backspace' && !draft && value.length) {
+                                event.preventDefault();
+                                remove(value.length - 1);
+                            }
+                        },
+                        onPaste: (event)=>{
+                            if (disabled) return;
+                            const pasted = event.clipboardData.getData('text');
+                            if (!pasted.includes(',')) return;
+                            event.preventDefault();
+                            const start = event.currentTarget.selectionStart ?? draft.length;
+                            const end = event.currentTarget.selectionEnd ?? start;
+                            commit(draft.slice(0, start) + pasted + draft.slice(end));
+                        }
+                    })
+                ]
+            }),
+            description ? /*#__PURE__*/ _jsx("p", {
+                id: `${id}-description`,
+                children: description
+            }) : null
+        ]
+    });
+}

package/dist/admin/components/RootViewMessage.d.ts

@@ -0,0 +1,5 @@
+import '../theme.css';
+export declare function RootViewMessage({ children, alert }: {
+    children: string;
+    alert?: boolean;
+}): import("react").JSX.Element;

package/dist/admin/components/RootViewMessage.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import '../theme.css';
+import { theme } from '../theme.js';
+export function RootViewMessage({ children, alert = false }) {
+    return /*#__PURE__*/ _jsx("div", {
+        role: alert ? 'alert' : undefined,
+        style: {
+            padding: theme.space[4],
+            color: theme.color.text,
+            background: theme.color.bg
+        },
+        children: children
+    });
+}

package/dist/admin/components/chipsInput.css

@@ -0,0 +1,11 @@
+.xp-chips { display: grid; gap: var(--xp-space-2); margin-block: var(--xp-space-4); color: var(--xp-text); font-family: var(--xp-font-body); }
+.xp-chips-control { display: flex; align-items: center; flex-wrap: wrap; gap: var(--xp-space-1); padding: var(--xp-space-2); border: 1px solid var(--xp-border-control); border-radius: var(--xp-radius); background: var(--xp-input-bg); }
+.xp-chips-control:focus-within { outline: 2px solid var(--xp-text); outline-offset: 2px; }
+.xp-chips-item { display: inline-flex; align-items: center; gap: var(--xp-space-1); padding-inline-start: var(--xp-space-2); border-radius: var(--xp-radius); background: var(--xp-surface-raised); overflow-wrap: anywhere; max-width: 100%; }
+.xp-chips .xp-chips-item button { padding: var(--xp-space-1) var(--xp-space-2); border: 0; background: transparent; color: var(--xp-text); font: inherit; cursor: pointer; }
+.xp-chips .xp-chips-control input { flex: 1; min-width: 8rem; width: 0; border: 0; padding: var(--xp-space-1); background: transparent; color: var(--xp-text); font: inherit; }
+.xp-chips input:focus { outline: none; }
+.xp-chips button:focus-visible { outline: 2px solid var(--xp-text); outline-offset: 2px; }
+.xp-chips[aria-disabled='true'] { opacity: .5; }
+.xp-chips[aria-disabled='true'] button { cursor: default; }
+.xp-chips p { margin: 0; color: var(--xp-text-muted); font-size: var(--xp-font-size-small); }

package/dist/admin/copy/audience.d.ts

@@ -1,4 +1,8 @@
 export declare const AUDIENCE_COPY: {
+    readonly listPlaceholder: "Type a value and press Enter";
+    readonly listDescription: "Add one value per chip, for example each page path.";
+    readonly removeValue: (value: string) => string;
+    readonly removeSymbol: "×";
     readonly emptyListNote: "Add at least one value — an empty list can't be saved.";
 };
 export declare const STRING_OP_LABELS: {

package/dist/admin/copy/audience.js

@@ -1,4 +1,8 @@
 export const AUDIENCE_COPY = {
+    listPlaceholder: 'Type a value and press Enter',
+    listDescription: 'Add one value per chip, for example each page path.',
+    removeValue: (value)=>`Remove ${value}`,
+    removeSymbol: '×',
     emptyListNote: "Add at least one value — an empty list can't be saved."
 };
 export const STRING_OP_LABELS = {

package/dist/admin/copy/goals.d.ts

@@ -0,0 +1,44 @@
+export declare const GOALS_COPY: {
+    readonly title: "Goals";
+    readonly newGoal: "New goal";
+    readonly name: "Name";
+    readonly source: "Measured by";
+    readonly directionColumn: "Better when";
+    readonly direction: "Better when it goes";
+    readonly increase: "Goes up";
+    readonly decrease: "Goes down";
+    readonly usedBy: "Used by";
+    readonly status: "Status";
+    readonly inUse: "In use";
+    readonly unused: "Not used";
+    readonly empty: "A goal is an outcome you want a test to improve, such as a registration or a gift.";
+    readonly loading: "Loading goals…";
+    readonly loadError: "Couldn't load goals. Try again.";
+    readonly retry: "Try again";
+    readonly slug: "Short name";
+    readonly slugHelp: "A unique short name for this goal.";
+    readonly slugLocked: "The short name stays the same once a test uses this goal.";
+    readonly chooseSource: "Choose an outcome";
+    readonly window: "Count results for (hours)";
+    readonly minimum: "Minimum completions before deciding";
+    readonly advanced: "Advanced";
+    readonly capping: "Limit very large values";
+    readonly capType: "Limit by";
+    readonly capValue: "Limit value";
+    readonly noCap: "No limit";
+    readonly percentile: "Based on past amounts";
+    readonly absolute: "Fixed amount";
+    readonly capHelp: "For past amounts, enter a number such as 0.99 to limit only the largest 1%; or enter a fixed amount.";
+    readonly threshold: "Warn when it gets worse by (%)";
+    readonly save: "Save";
+    readonly saving: "Saving…";
+    readonly cancel: "Cancel";
+    readonly remove: "Delete";
+    readonly thresholdError: "Enter a percentage of zero or more, or leave blank for 5%.";
+    readonly deleting: "Deleting…";
+    readonly saveError: "Couldn't save the goal. Try again.";
+    readonly deleteError: "Couldn't delete the goal. Try again.";
+    readonly breadcrumb: "Breadcrumb";
+    readonly missing: "This goal could not be found.";
+};
+export declare function goalUsedBy(count: number): string;

package/dist/admin/copy/goals.js

@@ -0,0 +1,46 @@
+export const GOALS_COPY = {
+    title: 'Goals',
+    newGoal: 'New goal',
+    name: 'Name',
+    source: 'Measured by',
+    directionColumn: 'Better when',
+    direction: 'Better when it goes',
+    increase: 'Goes up',
+    decrease: 'Goes down',
+    usedBy: 'Used by',
+    status: 'Status',
+    inUse: 'In use',
+    unused: 'Not used',
+    empty: 'A goal is an outcome you want a test to improve, such as a registration or a gift.',
+    loading: 'Loading goals…',
+    loadError: "Couldn't load goals. Try again.",
+    retry: 'Try again',
+    slug: 'Short name',
+    slugHelp: 'A unique short name for this goal.',
+    slugLocked: 'The short name stays the same once a test uses this goal.',
+    chooseSource: 'Choose an outcome',
+    window: 'Count results for (hours)',
+    minimum: 'Minimum completions before deciding',
+    advanced: 'Advanced',
+    capping: 'Limit very large values',
+    capType: 'Limit by',
+    capValue: 'Limit value',
+    noCap: 'No limit',
+    percentile: 'Based on past amounts',
+    absolute: 'Fixed amount',
+    capHelp: 'For past amounts, enter a number such as 0.99 to limit only the largest 1%; or enter a fixed amount.',
+    threshold: 'Warn when it gets worse by (%)',
+    save: 'Save',
+    saving: 'Saving…',
+    cancel: 'Cancel',
+    remove: 'Delete',
+    thresholdError: 'Enter a percentage of zero or more, or leave blank for 5%.',
+    deleting: 'Deleting…',
+    saveError: "Couldn't save the goal. Try again.",
+    deleteError: "Couldn't delete the goal. Try again.",
+    breadcrumb: 'Breadcrumb',
+    missing: 'This goal could not be found.'
+};
+export function goalUsedBy(count) {
+    return `Used by ${count} ${count === 1 ? 'test' : 'tests'}`;
+}

package/dist/admin/results/ArmTable.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { theme } from '../theme.js';
 import { RESULTS_COPY } from '../copy/results.js';
 import { CappedCell } from './CappedCell.js';
 export function ArmTable({ rows, caption, method, metricKind }) {
@@ -10,7 +11,7 @@ export function ArmTable({ rows, caption, method, metricKind }) {
     return /*#__PURE__*/ _jsx("div", {
         className: "xp-arm-table",
         style: {
-            color: 'var(--theme-text)',
+            color: theme.color.text,
             overflowX: 'auto'
         },
         children: /*#__PURE__*/ _jsxs("table", {

package/dist/admin/results/CappedCell.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../theme.js';
 export function CappedCell({ model }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-capped-cell",
         style: {
-            color: 'var(--theme-text)'
+            color: theme.color.text
         },
         children: [
             /*#__PURE__*/ _jsx("span", {

package/dist/admin/results/CiChart.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../theme.js';
 import { RESULTS_COPY as C, chartSummary, contentChangeTitle } from '../copy/results.js';
 import { chartModel } from './chart.model.js';
 import { formatPercent } from './format.js';
 const colors = [
-    'var(--theme-elevation-800)',
-    'var(--theme-elevation-600)',
-    'var(--theme-elevation-400)'
+    theme.color.textStrong,
+    theme.color.textMuted,
+    theme.color.borderAccent
 ];
 const date = (t)=>new Intl.DateTimeFormat('en-US', {
         dateStyle: 'medium',
@@ -28,7 +29,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
     return /*#__PURE__*/ _jsxs("section", {
         className: "xp-ci-chart",
         style: {
-            color: 'var(--theme-text)'
+            color: theme.color.text
         },
         children: [
             /*#__PURE__*/ _jsx("h2", {
@@ -50,7 +51,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                         x2: 680,
                         y1: y(0),
                         y2: y(0),
-                        stroke: "var(--theme-elevation-500)",
+                        stroke: theme.color.accent,
                         strokeDasharray: "4 4"
                     }),
                     [
@@ -146,7 +147,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
                                     x2: x(marker.t),
                                     y1: 20,
                                     y2: 230,
-                                    stroke: "var(--theme-text)",
+                                    stroke: theme.color.text,
                                     strokeDasharray: "2 4"
                                 })
                             ]
@@ -156,7 +157,7 @@ export function CiChart({ series, metricId, metricName, phase, contentChanges })
             /*#__PURE__*/ _jsx("ul", {
                 children: model.variants.map((variant, index)=>/*#__PURE__*/ _jsxs("li", {
                         style: {
-                            color: 'var(--theme-text)'
+                            color: theme.color.text
                         },
                         children: [
                             /*#__PURE__*/ _jsx("span", {

package/dist/admin/results/DataQualityPanel.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../theme.js';
 import { RESULTS_COPY } from '../copy/results.js';
 export function DataQualityPanel({ items }) {
     if (items.length === 0) return null;
@@ -7,8 +8,8 @@ export function DataQualityPanel({ items }) {
         className: "xp-data-quality",
         "aria-label": RESULTS_COPY.quality,
         style: {
-            color: 'var(--theme-text)',
-            background: 'var(--theme-elevation-50)',
+            color: theme.color.text,
+            background: theme.color.surface,
             padding: '1rem'
         },
         children: [

package/dist/admin/results/VerdictCard.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../theme.js';
 export function VerdictCard({ model, guardrails = [], power, collecting, sinceShipping }) {
     return /*#__PURE__*/ _jsxs("section", {
         className: "xp-verdict-card",
         style: {
-            color: 'var(--theme-text)',
-            background: 'var(--theme-elevation-50)',
+            color: theme.color.text,
+            background: theme.color.surface,
             padding: '1rem'
         },
         children: [

package/dist/admin/styles.css

@@ -1,10 +1,10 @@
 /* Admin styles for the experiments plugin; loaded by src/admin/styles.ts. */
 .xp-status-pill { font-weight: 600; }
-.xp-status-pill--neutral { background: var(--theme-elevation-150); color: var(--theme-elevation-800); }
-.xp-status-pill--success { background: var(--theme-success-150); color: var(--theme-success-850); }
-.xp-status-pill--warning { background: var(--theme-warning-150); color: var(--theme-warning-850); }
-.xp-status-pill--info { background: var(--theme-elevation-200); color: var(--theme-elevation-900); }
-.xp-status-pill--muted { background: var(--theme-elevation-100); color: var(--theme-elevation-600); }
-.xp-locked-notice, .xp-notice { padding: 0.75rem; border-inline-start: 3px solid var(--theme-elevation-400); background: var(--theme-elevation-50); color: var(--theme-elevation-800); }
-.xp-notice--warning { border-color: var(--theme-warning-500); background: var(--theme-warning-100); }
-.xp-notice--error { border-color: var(--theme-error-500); background: var(--theme-error-100); }
+.xp-status-pill--neutral { background: var(--xp-border); color: var(--xp-text-strong); }
+.xp-status-pill--success { background: var(--xp-success-bg); color: var(--xp-success-text-strong); }
+.xp-status-pill--warning { background: var(--xp-warning-bg); color: var(--xp-warning-text-strong); }
+.xp-status-pill--info { background: var(--xp-border-strong); color: var(--xp-text-emphasis); }
+.xp-status-pill--muted { background: var(--xp-surface-raised); color: var(--xp-text-muted); }
+.xp-locked-notice, .xp-notice { padding: 0.75rem; border-inline-start: 3px solid var(--xp-border-accent); background: var(--xp-surface); color: var(--xp-text-strong); }
+.xp-notice--warning { border-color: var(--xp-warning); background: var(--xp-warning-surface); }
+.xp-notice--error { border-color: var(--xp-error); background: var(--xp-error-surface); }

package/dist/admin/styles.d.ts

@@ -1 +1,2 @@
+import './theme.css';
 import './styles.css';

package/dist/admin/styles.js

@@ -1,2 +1,3 @@
 // Load admin styles from mounted components so barrels stay free of side effects.
+import './theme.css';
 import './styles.css';

package/dist/admin/surface/SurfaceShell.d.ts

@@ -1,3 +1,4 @@
+import '../theme.css';
 import type { ReactNode } from 'react';
 import './surface.css';
 export declare function SurfaceShell({ adminRoute, children }: {

package/dist/admin/surface/SurfaceShell.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../theme.css';
 import { Link } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
 import { SURFACE_COPY } from '../copy/surface.js';

package/dist/admin/surface/TestsHome.js

@@ -91,7 +91,7 @@ export function TestsHome({ adminRoute, apiRoute }) {
                     /*#__PURE__*/ _jsx(Link, {
                         href: formatAdminURL({
                             adminRoute,
-                            path: '/collections/xp-metrics'
+                            path: '/experiments/goals'
                         }),
                         children: SURFACE_COPY.goals
                     })

package/dist/admin/surface/TestsSurface.js

@@ -4,6 +4,8 @@ import { NewTest } from './newTest/NewTest.js';
 import { TestPage } from './test/TestPage.js';
 import { ResultsRoute } from './ResultsRoute.js';
 import { SurfaceShell } from './SurfaceShell.js';
+import { GoalForm } from './goals/GoalForm.js';
+import { GoalsList } from './goals/GoalsList.js';
 import { TestsHome } from './TestsHome.js';
 export function TestsSurface(props) {
     const surface = {
@@ -22,7 +24,14 @@ export function TestsSurface(props) {
         children: props.route === 'home' ? /*#__PURE__*/ _jsx(TestsHome, {
             adminRoute: props.adminRoute,
             apiRoute: props.apiRoute
-        }) : props.route === 'new' ? /*#__PURE__*/ _jsx(NewTest, {
+        }) : props.route === 'goals' ? /*#__PURE__*/ _jsx(GoalsList, {
+            surface: surface,
+            returnToTest: props.returnToTest
+        }) : props.route === 'goalNew' || props.route === 'goal' ? /*#__PURE__*/ _jsx(GoalForm, {
+            surface: surface,
+            id: props.route === 'goal' ? props.id : undefined,
+            returnToTest: props.returnToTest
+        }, props.route === 'goalNew' ? 'new' : props.id) : props.route === 'new' ? /*#__PURE__*/ _jsx(NewTest, {
             surface: surface,
             pages: props.pages
         }) : props.id === undefined ? null : props.route === 'test' ? /*#__PURE__*/ _jsx(TestPage, {

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

@@ -0,0 +1,7 @@
+import type { SurfaceProps } from '../contracts.js';
+import './goals.css';
+export declare function GoalForm({ surface, id, returnToTest }: {
+    surface: SurfaceProps;
+    id?: string;
+    returnToTest?: string;
+}): import("react").JSX.Element;