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

package/README.md

@@ -466,6 +466,13 @@ for these patterns.
 
 ## Admin and client
 
+The sidebar includes a **Tests** group with **All tests** and **Goals**. The
+dashboard also includes **Tests** and **Goals** cards above its widgets. Goals
+appears only for users who can manage tests. Both additions follow the host's
+admin route and keep host-provided navigation and dashboard entries first.
+After upgrading, run `payload generate:importmap` to register the dashboard card
+component.
+
 ### Client assignments and exposure
 
 Read assignments on the server and pass them to `ExperimentsProvider` from
@@ -530,6 +537,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/PreviewLinks.js

@@ -6,6 +6,7 @@ import { armLabel } from './labels.js';
 import { useApi } from './useApi.js';
 import { REVIEW_COPY as C } from './copy/review.js';
 import { API_MESSAGES } from './copy/common.js';
+import { previewPages } from './previewLinks.model.js';
 export function PreviewLinks({ experimentId, placements, arms }) {
     const api = useApi();
     const inFlight = useRef(false);
@@ -39,10 +40,13 @@ export function PreviewLinks({ experimentId, placements, arms }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-preview-links",
         children: [
-            placements.map((placement)=>/*#__PURE__*/ _jsxs("div", {
+            previewPages(placements).map((placement)=>/*#__PURE__*/ _jsxs("div", {
                     children: [
-                        /*#__PURE__*/ _jsx("p", {
-                            children: placement.title
+                        /*#__PURE__*/ _jsxs("p", {
+                            children: [
+                                placement.title,
+                                placement.slotCount > 1 ? ` ${C.placedTimes(placement.slotCount)}` : null
+                            ]
                         }),
                         placement.url ? arms.filter((arm)=>arm.kind !== 'holdout' && arm.key !== 'holdout').map((arm)=>/*#__PURE__*/ _jsxs(Button, {
                                 disabled: busy,
@@ -59,7 +63,7 @@ export function PreviewLinks({ experimentId, placements, arms }) {
                             children: C.noPreview
                         })
                     ]
-                }, `${placement.collection}/${placement.id}`)),
+                }, placement.key)),
             error ? /*#__PURE__*/ _jsx("p", {
                 role: "alert",
                 children: error

package/dist/admin/TestsDashboardCards.d.ts

@@ -0,0 +1,3 @@
+import './theme.css';
+import './dashboard.css';
+export declare function TestsDashboardCards(): import("react").JSX.Element | null;

package/dist/admin/TestsDashboardCards.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './theme.css';
+import './dashboard.css';
+import { Card, useAuth, useConfig } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { SURFACE_COPY } from './copy/surface.js';
+export function TestsDashboardCards() {
+    const { config } = useConfig();
+    const { permissions } = useAuth();
+    const testPermissions = permissions?.collections?.['xp-experiments'];
+    const canManage = testPermissions?.update === true;
+    if (!canManage) return null;
+    const href = (path)=>formatAdminURL({
+            adminRoute: config.routes.admin,
+            path
+        });
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "xp-dash-group",
+        "aria-labelledby": "xp-dash-title",
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                className: "xp-dash-label",
+                id: "xp-dash-title",
+                children: SURFACE_COPY.title
+            }),
+            /*#__PURE__*/ _jsxs("ul", {
+                className: "xp-dash-card-list",
+                children: [
+                    /*#__PURE__*/ _jsx("li", {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: SURFACE_COPY.navAllTests,
+                            titleAs: "h3",
+                            buttonAriaLabel: SURFACE_COPY.dashShowTests,
+                            href: href('/experiments'),
+                            id: "card-xp-tests"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("li", {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: SURFACE_COPY.navGoals,
+                            titleAs: "h3",
+                            buttonAriaLabel: SURFACE_COPY.dashShowGoals,
+                            href: href('/experiments/goals'),
+                            id: "card-xp-goals"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/admin/TestsNavLink.d.ts

@@ -1 +1,3 @@
-export declare function TestsNavLink(): import("react").JSX.Element;
+import './theme.css';
+declare function TestsNav(): import("react").JSX.Element | null;
+export { TestsNav as TestsNavLink };

package/dist/admin/TestsNavLink.js

@@ -1,30 +1,74 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link, useConfig } from '@payloadcms/ui';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './theme.css';
+import { Link, NavGroup, useAuth, useConfig } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
 import { usePathname } from 'next/navigation.js';
 import { SURFACE_COPY } from './copy/surface.js';
-export function TestsNavLink() {
+function TestsNav() {
     const { config } = useConfig();
-    const path = usePathname();
+    const { permissions } = useAuth();
+    const pathname = usePathname();
     const href = formatAdminURL({
         adminRoute: config.routes.admin,
         path: '/experiments'
     });
+    const goalsHref = formatAdminURL({
+        adminRoute: config.routes.admin,
+        path: '/experiments/goals'
+    });
     const base = href.replace(/\/$/, '');
-    const active = path === base || path?.startsWith(`${base}/`);
-    return /*#__PURE__*/ _jsxs(Link, {
-        href: href,
-        className: "nav__link",
-        "aria-current": active ? 'page' : undefined,
-        children: [
-            active ? /*#__PURE__*/ _jsx("div", {
-                className: "nav__link-indicator"
-            }) : null,
-            /*#__PURE__*/ _jsx("span", {
-                className: "nav__link-label",
-                children: SURFACE_COPY.title
-            })
-        ]
+    const goalsBase = goalsHref.replace(/\/$/, '');
+    const goalsActive = pathname === goalsBase || Boolean(pathname?.startsWith(`${goalsBase}/`));
+    const testsActive = !goalsActive && (pathname === base || Boolean(pathname?.startsWith(`${base}/`)));
+    const testPermissions = permissions?.collections?.['xp-experiments'];
+    const canManage = testPermissions?.update === true;
+    if (!canManage) return null;
+    const entries = [
+        {
+            id: 'nav-xp-tests',
+            href,
+            label: SURFACE_COPY.navAllTests,
+            active: testsActive
+        },
+        {
+            id: 'nav-xp-goals',
+            href: goalsHref,
+            label: SURFACE_COPY.navGoals,
+            active: goalsActive
+        }
+    ];
+    // getPreference is async and can fetch; let NavGroup default to open.
+    return /*#__PURE__*/ _jsx(NavGroup, {
+        label: SURFACE_COPY.title,
+        children: entries.map((entry)=>{
+            const props = {
+                className: 'nav__link',
+                id: entry.id,
+                'aria-current': entry.active ? 'page' : undefined
+            };
+            const content = /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    entry.active ? /*#__PURE__*/ _jsx("div", {
+                        className: "nav__link-indicator"
+                    }) : null,
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "nav__link-label",
+                        children: entry.label
+                    })
+                ]
+            });
+            return pathname === entry.href ? /*#__PURE__*/ _jsx("div", {
+                ...props,
+                children: content
+            }, entry.id) : /*#__PURE__*/ _jsx(Link, {
+                ...props,
+                href: entry.href,
+                prefetch: false,
+                children: content
+            }, entry.id);
+        })
     });
 }
+// Preserve the existing import-map key.
+export { TestsNav as TestsNavLink };

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/copy/review.d.ts

@@ -1,6 +1,7 @@
 export declare const REVIEW_COPY: {
     readonly noBaseline: "No data yet for this metric.";
     readonly preview: "Preview";
+    readonly placedTimes: (n: number) => string;
     readonly noPreview: "Preview isn't set up for this page type";
     readonly raise: "Raise allocation";
     readonly addMetric: "Add a metric";

package/dist/admin/copy/review.js

@@ -1,6 +1,7 @@
 export const REVIEW_COPY = {
     noBaseline: 'No data yet for this metric.',
     preview: 'Preview',
+    placedTimes: (n)=>`(placed ${n} times on this page)`,
     noPreview: "Preview isn't set up for this page type",
     raise: 'Raise allocation',
     addMetric: 'Add a metric',

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

@@ -3,6 +3,10 @@ export declare const SURFACE_COPY: {
     readonly newTest: "New test";
     readonly goals: "Goals";
     readonly search: "Search tests";
+    readonly navAllTests: "All tests";
+    readonly navGoals: "Goals";
+    readonly dashShowTests: "Show all tests";
+    readonly dashShowGoals: "Show all goals";
     readonly backToAdmin: "Back to admin";
     readonly limitedList: "Showing the 200 most recent tests.";
     readonly notInstalled: "The Tests screen isn't installed yet. Run `payload generate:importmap` and reload.";

package/dist/admin/copy/surface.js

@@ -3,6 +3,10 @@ export const SURFACE_COPY = {
     newTest: 'New test',
     goals: 'Goals',
     search: 'Search tests',
+    navAllTests: 'All tests',
+    navGoals: 'Goals',
+    dashShowTests: 'Show all tests',
+    dashShowGoals: 'Show all goals',
     backToAdmin: 'Back to admin',
     limitedList: 'Showing the 200 most recent tests.',
     notInstalled: "The Tests screen isn't installed yet. Run `payload generate:importmap` and reload.",

package/dist/admin/dashboard.css

@@ -0,0 +1,35 @@
+.xp-dash-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xp-space-4);
+  margin-bottom: var(--xp-space-4);
+}
+
+.xp-dash-label { margin: 0; }
+
+.xp-dash-card-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--xp-dash-card-gap);
+}
+
+.xp-dash-card-list .card { height: 100%; }
+
+@media (max-width: 1440px) {
+  .xp-dash-card-list { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (max-width: 1024px) {
+  .xp-dash-card-list { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 768px) {
+  .xp-dash-card-list { gap: var(--xp-dash-card-gap-small); }
+}
+
+@media (max-width: 400px) {
+  .xp-dash-card-list { grid-template-columns: repeat(1, 1fr); }
+}

package/dist/admin/paths.d.ts

@@ -6,3 +6,4 @@ export declare const XP_TESTS_LIST_REDIRECT = "@delmaredigital/payload-experimen
 export declare const XP_TEST_EDIT_REDIRECT = "@delmaredigital/payload-experiments/admin/rsc#CollectionEditRedirect";
 export declare const XP_TESTS_NAV_LINK = "@delmaredigital/payload-experiments/admin/client#TestsNavLink";
 export declare const XP_TESTS_SURFACE = "@delmaredigital/payload-experiments/admin/client#TestsSurface";
+export declare const XP_TESTS_DASHBOARD_CARDS = "@delmaredigital/payload-experiments/admin/client#TestsDashboardCards";

package/dist/admin/paths.js

@@ -6,3 +6,4 @@ export const XP_TESTS_LIST_REDIRECT = '@delmaredigital/payload-experiments/admin
 export const XP_TEST_EDIT_REDIRECT = '@delmaredigital/payload-experiments/admin/rsc#CollectionEditRedirect';
 export const XP_TESTS_NAV_LINK = '@delmaredigital/payload-experiments/admin/client#TestsNavLink';
 export const XP_TESTS_SURFACE = '@delmaredigital/payload-experiments/admin/client#TestsSurface';
+export const XP_TESTS_DASHBOARD_CARDS = '@delmaredigital/payload-experiments/admin/client#TestsDashboardCards';

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

@@ -0,0 +1,9 @@
+import type { PreflightResult } from '../types/endpoints.js';
+type Placement = PreflightResult['placements'][number];
+type PreviewPage = Pick<Placement, 'collection' | 'id' | 'title' | 'url'> & {
+    key: string;
+    slotCount: number;
+};
+/** Preview URLs identify pages; counts use the most placements in any one version. */
+export declare function previewPages(placements: readonly Placement[]): PreviewPage[];
+export {};