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

package/dist/puck/editor/ExperimentSlotEditor.js

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

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

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

package/dist/puck/editor/copy.js

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

package/dist/puck/editor/editor.css

@@ -0,0 +1,302 @@
+/* Payload 3.90 defaults from @payloadcms/ui dist/scss/colors.scss and app.scss,
+   mapped as in admin/theme.css; radii from scss/vars.scss. Literal values keep
+   the editor independent of the parent admin's styles and sizing. */
+.xp-slot-root {
+  --xp-bg: rgb(255, 255, 255);
+  --xp-text: rgb(47, 47, 47);
+  --xp-surface: rgb(245, 245, 245);
+  --xp-surface-raised: rgb(235, 235, 235);
+  --xp-border: rgb(221, 221, 221);
+  --xp-border-strong: rgb(208, 208, 208);
+  --xp-input-border: rgb(181, 181, 181);
+  --xp-border-accent: rgb(154, 154, 154);
+  --xp-text-muted: rgb(101, 101, 101);
+  --xp-text-strong: rgb(47, 47, 47);
+  --xp-text-emphasis: rgb(20, 20, 20);
+  --xp-input-bg: rgb(255, 255, 255);
+  --xp-success-surface: rgb(218, 237, 248);
+  --xp-success: rgb(21, 135, 186);
+  --xp-success-text-strong: rgb(18, 56, 76);
+  --xp-warning-surface: rgb(248, 232, 219);
+  --xp-warning: rgb(185, 108, 13);
+  --xp-warning-text-strong: rgb(73, 47, 21);
+  --xp-error-text: rgb(182, 54, 54);
+  --xp-radius: 3px;
+  --xp-radius-large: 4px;
+  --xp-space-1: 5px;
+  --xp-space-2: 10px;
+  --xp-space-3: 15px;
+  --xp-space-4: 20px;
+  --xp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-font-size-small: 13px;
+  --xp-font-size-body: 15px;
+}
+
+/* payload-puck's IframeWrapper sets both class="dark" and data-theme="dark" on the canvas <html>. */
+[data-theme='dark'] .xp-slot-root,
+.dark .xp-slot-root {
+  --xp-bg: rgb(20, 20, 20);
+  --xp-text: rgb(255, 255, 255);
+  --xp-surface: rgb(34, 34, 34);
+  --xp-surface-raised: rgb(47, 47, 47);
+  --xp-border: rgb(60, 60, 60);
+  --xp-border-strong: rgb(74, 74, 74);
+  --xp-input-border: rgb(101, 101, 101);
+  --xp-border-accent: rgb(141, 141, 141);
+  --xp-text-muted: rgb(181, 181, 181);
+  --xp-text-strong: rgb(235, 235, 235);
+  --xp-text-emphasis: rgb(255, 255, 255);
+  --xp-input-bg: rgb(34, 34, 34);
+  --xp-success-surface: rgb(19, 44, 58);
+  --xp-success: rgb(21, 135, 186);
+  --xp-success-text-strong: rgb(188, 225, 248);
+  --xp-warning-surface: rgb(56, 38, 20);
+  --xp-warning: rgb(185, 108, 13);
+  --xp-warning-text-strong: rgb(243, 212, 186);
+  --xp-error-text: rgb(246, 109, 103);
+  --xp-radius: 3px;
+  --xp-radius-large: 4px;
+  --xp-space-1: 5px;
+  --xp-space-2: 10px;
+  --xp-space-3: 15px;
+  --xp-space-4: 20px;
+  --xp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-font-size-small: 13px;
+  --xp-font-size-body: 15px;
+}
+
+/* These controls also render in the host's preflight-reset editor iframe. */
+.xp-slot-editor {
+  min-width: 0;
+}
+
+.xp-slot-chrome,
+.xp-slot-drawer {
+  box-sizing: border-box;
+  background: var(--xp-bg);
+  color: var(--xp-text);
+  border: 1px solid var(--xp-border);
+  border-radius: var(--xp-radius-large);
+  padding: var(--xp-space-3);
+  font-family: var(--xp-font-body);
+  font-size: var(--xp-font-size-body);
+  line-height: 1.5;
+}
+
+.xp-slot-header,
+.xp-slot-toolbar,
+.xp-slot-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--xp-space-2);
+}
+
+.xp-slot-header > .xp-slot-actions,
+.xp-slot-toolbar > .xp-slot-actions {
+  margin-inline-start: auto;
+}
+
+.xp-slot-title {
+  margin: 0;
+  color: var(--xp-text);
+  font: inherit;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.xp-slot-status {
+  display: inline-flex;
+  padding: var(--xp-space-1) var(--xp-space-2);
+  border: 1px solid var(--xp-border-strong);
+  border-radius: var(--xp-radius-large);
+  background: var(--xp-surface);
+  color: var(--xp-text-strong);
+  font-size: var(--xp-font-size-small);
+  line-height: 1.2;
+}
+
+.xp-slot-status[data-status='running'] {
+  background: var(--xp-success-surface);
+  border-color: var(--xp-success);
+  color: var(--xp-success-text-strong);
+}
+
+.xp-slot-notice {
+  margin: var(--xp-space-3) 0;
+  color: var(--xp-text-muted);
+}
+
+.xp-slot-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--xp-space-2);
+  border: 1px solid var(--xp-warning);
+  border-radius: var(--xp-radius);
+  padding: var(--xp-space-2) var(--xp-space-3);
+  background: var(--xp-warning-surface);
+  color: var(--xp-warning-text-strong);
+}
+
+.xp-slot-warning-icon {
+  flex: 0 0 auto;
+  width: var(--xp-space-4);
+  height: var(--xp-space-4);
+}
+
+.xp-slot-button,
+.xp-slot-tab,
+.xp-slot-input {
+  box-sizing: border-box;
+  appearance: none;
+  background: var(--xp-bg);
+  border: 1px solid var(--xp-input-border);
+  padding: var(--xp-space-2) var(--xp-space-3);
+  border-radius: var(--xp-radius);
+  font: inherit;
+  font-size: var(--xp-font-size-body);
+  color: var(--xp-text);
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.xp-slot-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--xp-space-1);
+  text-decoration: none;
+  text-align: center;
+}
+
+.xp-slot-button:hover:not(:disabled),
+.xp-slot-tab:hover:not(:disabled) {
+  background: var(--xp-surface-raised);
+  border-color: var(--xp-border-accent);
+}
+
+.xp-slot-button-primary {
+  background: var(--xp-text-emphasis);
+  border-color: var(--xp-text-emphasis);
+  color: var(--xp-bg);
+  font-weight: 600;
+}
+
+.xp-slot-button-primary:hover:not(:disabled) {
+  background: var(--xp-text-strong);
+  border-color: var(--xp-text-strong);
+}
+
+.xp-slot-button:focus-visible,
+.xp-slot-tab:focus-visible,
+.xp-slot-input:focus-visible {
+  outline: 2px solid var(--xp-text);
+  outline-offset: 2px;
+}
+
+.xp-slot-button:disabled,
+.xp-slot-tab:disabled,
+.xp-slot-input:disabled {
+  background: var(--xp-surface);
+  border-color: var(--xp-border);
+  color: var(--xp-text-muted);
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.xp-slot-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--xp-space-1);
+  padding: var(--xp-space-1);
+  border-radius: var(--xp-radius-large);
+  background: var(--xp-surface);
+}
+
+.xp-slot-tab {
+  background: transparent;
+  border-color: transparent;
+}
+
+.xp-slot-tab[aria-selected='true'] {
+  background: var(--xp-bg);
+  border-color: var(--xp-border-accent);
+  color: var(--xp-text-emphasis);
+  font-weight: 600;
+  box-shadow: 0 2px 0 var(--xp-text-emphasis);
+}
+
+.xp-slot-panel {
+  position: relative;
+  border: 0;
+  padding: 0;
+}
+
+.xp-slot-panel-empty {
+  margin-top: var(--xp-space-2);
+  border: 2px dashed var(--xp-border-accent);
+  border-radius: var(--xp-radius-large);
+  background: var(--xp-surface);
+}
+
+.xp-slot-drop-target {
+  border: 0;
+  padding: 0;
+}
+
+.xp-slot-panel-empty > .xp-slot-drop-target {
+  min-height: 160px;
+}
+
+.xp-slot-drop-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--xp-space-4);
+  color: var(--xp-text-muted);
+  font-family: var(--xp-font-body);
+  font-size: var(--xp-font-size-body);
+  line-height: 1.5;
+  text-align: center;
+  pointer-events: none;
+}
+
+.xp-slot-drawer {
+  display: grid;
+  gap: var(--xp-space-3);
+  margin-block: var(--xp-space-3);
+  padding: var(--xp-space-4);
+  border-color: var(--xp-border-accent);
+  background: var(--xp-surface);
+}
+
+.xp-slot-field {
+  display: grid;
+  gap: var(--xp-space-1);
+}
+
+.xp-slot-label {
+  font-weight: 600;
+}
+
+.xp-slot-input {
+  width: 100%;
+  min-width: 0;
+  background: var(--xp-input-bg);
+  cursor: text;
+}
+
+.xp-slot-error {
+  margin: 0;
+  color: var(--xp-error-text);
+}
+
+.xp-slot-confirm {
+  padding: var(--xp-space-2) var(--xp-space-3);
+  margin-block: var(--xp-space-3);
+  border: 1px solid var(--xp-warning);
+  border-radius: var(--xp-radius);
+  background: var(--xp-warning-surface);
+}

package/dist/types/surface.d.ts

@@ -1,9 +1,10 @@
 import type { DocId } from './contracts.js';
 import type { SerializedAttributeKeys, SerializedFlagPoint, SerializedMetricSource } from './admin.js';
-export type TestsRoute = 'home' | 'new' | 'test' | 'results';
+export type TestsRoute = 'home' | 'new' | 'test' | 'results' | 'goals' | 'goalNew' | 'goal';
 export interface TestsSurfaceProps {
     route: TestsRoute;
     id?: string;
+    returnToTest?: string;
     adminRoute: string;
     apiRoute: string;
     isAdmin: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-experiments",
-  "version": "0.2.0-rc.2",
+  "version": "0.2.0-rc.4",
   "description": "No-code A/B testing for Payload CMS and Next.js: block, page and flag experiments with holdouts, layers, exposure logging and honest statistics inside the admin — no vendor",
   "type": "module",
   "license": "MIT",
@@ -67,6 +67,7 @@
       "import": "./dist/exports/puckEditor.js",
       "default": "./dist/exports/puckEditor.js"
     },
+    "./puck/editor.css": "./dist/puck/editor/editor.css",
     "./package.json": "./package.json"
   },
   "files": [