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

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.3",
+  "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": [