@delmaredigital/payload-experiments 0.3.0-rc.1 → 0.3.0-rc.4

package/dist/puck/editor/createTest.js

@@ -1,5 +1,5 @@
 import { editorCopy } from './copy.js';
-import { isSlugCollision, newTestBody, slugify, uniqueSlug } from './editor.model.js';
+import { isSlugCollision, newTestBody, slugify, slugCandidate } from './editor.model.js';
 /** Only a server refusal may supply editor-facing error text. */ export class CreateRefused extends Error {
 }
 function refusalMessage(body) {
@@ -7,20 +7,31 @@ function refusalMessage(body) {
     const message = error?.errors?.[0]?.data?.errors?.[0]?.message;
     return typeof message === 'string' && message.trim() ? message : editorCopy.createError;
 }
-/** Shared lookup, complete draft creation and one retry for a racing slug collision. */ export async function createTest(apiRoute, input) {
-    const api = apiRoute.replace(/\/$/, '');
+/** Shared lookup, complete draft creation and one retry for a racing slug collision. */ export async function createTest(api, input) {
     const base = slugify(input.name) || 'test';
+    let next = 1;
     for(let attempt = 0;; attempt++){
-        // Suffixes shorten a 64-character base; include those neighbouring slugs in the lookup.
-        const lookup = await fetch(`${api}/xp-experiments?where[slug][like]=${encodeURIComponent(base.slice(0, 60))}&depth=0&limit=200&select[slug]=true`, {
-            credentials: 'include'
-        });
-        const found = await lookup.json();
-        if (!lookup.ok) throw new CreateRefused(refusalMessage(found));
-        if (!Array.isArray(found?.docs)) throw new Error(editorCopy.createError);
-        const taken = found.docs.flatMap((doc)=>typeof doc.slug === 'string' ? [
-                doc.slug
-            ] : []);
+        let slug;
+        while(slug === undefined){
+            const candidates = Array.from({
+                length: 50
+            }, (_, offset)=>slugCandidate(base, next + offset));
+            const lookup = await fetch(`${api}/xp-experiments?where[slug][in]=${encodeURIComponent(candidates.join(','))}&limit=50&depth=0&select[slug]=true`, {
+                credentials: 'include'
+            });
+            const found = await lookup.json();
+            if (!lookup.ok) throw new CreateRefused(refusalMessage(found));
+            if (!Array.isArray(found?.docs)) throw new Error(editorCopy.createError);
+            const taken = new Set(found.docs.flatMap((doc)=>typeof doc.slug === 'string' ? [
+                    doc.slug
+                ] : []));
+            const free = candidates.findIndex((candidate)=>!taken.has(candidate));
+            if (free === -1) next += candidates.length;
+            else {
+                slug = candidates[free];
+                next += free + 1;
+            }
+        }
         const response = await fetch(`${api}/xp-experiments`, {
             method: 'POST',
             credentials: 'include',
@@ -29,7 +40,7 @@ function refusalMessage(body) {
             },
             body: JSON.stringify(newTestBody({
                 ...input,
-                slug: uniqueSlug(base, taken)
+                slug
             }))
         });
         const body = await response.json();

package/dist/puck/editor/editor.chrome.css

@@ -1,35 +1,28 @@
-/* These controls also render in the host's preflight-reset editor iframe. */
+/* Shared UI controls are assembled into editor.css for the isolated canvas. */
 .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 {
+.xp-slot-chrome {
+  display: grid;
+  gap: var(--xp-space-3);
+  padding: var(--xp-space-4);
+  background: var(--xp-surface);
+  border: 1px solid var(--xp-border);
+  border-radius: var(--xp-radius-card) var(--xp-radius-card) 0 0;
+}
+
+.xp-slot-header {
   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);
@@ -38,125 +31,14 @@
   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);
+.xp-slot-editor > .xp-ui-tabs > .xp-ui-tabs-header {
+  padding: var(--xp-space-2) var(--xp-space-4);
   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;
+  border-inline: 1px solid var(--xp-border);
 }
 
-.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-editor .xp-ui-tabpanel {
+  padding: 0;
 }
 
 .xp-slot-panel {
@@ -198,38 +80,42 @@
 
 .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);
+  gap: var(--xp-space-4);
 }
 
 .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);
 }
+
+/* Tailwind's preflight runs before these controls in the canvas document. */
+.xp-slot-editor .xp-ui-button,
+.xp-slot-editor .xp-ui-tab,
+.xp-slot-editor .xp-ui-input {
+  appearance: none;
+}
+
+/* Restore native modal centering after the host's universal margin reset. */
+.xp-slot-editor .xp-ui-dialog {
+  margin: auto;
+}
+
+.xp-slot-editor .xp-ui-tabs-header { display: flex; flex-wrap: wrap; align-items: stretch; }
+.xp-slot-version-actions { display: contents; }
+.xp-slot-version-anchor { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--xp-border); }
+.xp-slot-version-rename { flex: 1 0 100%; min-width: 0; padding-top: var(--xp-space-2); }
+.xp-slot-version-menu {
+  position: absolute; top: 100%; inset-inline-end: 0; z-index: 5;
+  display: grid; min-width: 180px; padding: var(--xp-space-2);
+  box-shadow: 0 8px 24px var(--xp-overlay);
+  background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius);
+}
+.xp-slot-version-menu .xp-ui-button { justify-content: start; }
+.xp-slot-weight-inputs, .xp-slot-people { display: flex; flex-wrap: wrap; gap: var(--xp-space-3); }
+.xp-slot-weight-inputs { align-items: flex-start; }
+.xp-slot-weight-inputs .xp-ui-field { flex: 1 1 120px; max-width: 200px; }
+.xp-slot-readout { display: grid; gap: var(--xp-space-2); }
+.xp-slot-readout > .xp-ui-button { justify-self: start; }
+.xp-slot-editor .xp-ui-tablist { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }

package/dist/puck/editor/editor.css

@@ -263,38 +263,31 @@
 .xp-ui-field-label { display: flex; align-items: center; justify-content: space-between; gap: var(--xp-space-3); }
 .xp-ui-field-label > label { font-weight: 500; }
 
-/* These controls also render in the host's preflight-reset editor iframe. */
+/* Shared UI controls are assembled into editor.css for the isolated canvas. */
 .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 {
+.xp-slot-chrome {
+  display: grid;
+  gap: var(--xp-space-3);
+  padding: var(--xp-space-4);
+  background: var(--xp-surface);
+  border: 1px solid var(--xp-border);
+  border-radius: var(--xp-radius-card) var(--xp-radius-card) 0 0;
+}
+
+.xp-slot-header {
   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);
@@ -303,125 +296,14 @@
   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);
+.xp-slot-editor > .xp-ui-tabs > .xp-ui-tabs-header {
+  padding: var(--xp-space-2) var(--xp-space-4);
   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;
+  border-inline: 1px solid var(--xp-border);
 }
 
-.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-editor .xp-ui-tabpanel {
+  padding: 0;
 }
 
 .xp-slot-panel {
@@ -463,38 +345,42 @@
 
 .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);
+  gap: var(--xp-space-4);
 }
 
 .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);
 }
+
+/* Tailwind's preflight runs before these controls in the canvas document. */
+.xp-slot-editor .xp-ui-button,
+.xp-slot-editor .xp-ui-tab,
+.xp-slot-editor .xp-ui-input {
+  appearance: none;
+}
+
+/* Restore native modal centering after the host's universal margin reset. */
+.xp-slot-editor .xp-ui-dialog {
+  margin: auto;
+}
+
+.xp-slot-editor .xp-ui-tabs-header { display: flex; flex-wrap: wrap; align-items: stretch; }
+.xp-slot-version-actions { display: contents; }
+.xp-slot-version-anchor { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--xp-border); }
+.xp-slot-version-rename { flex: 1 0 100%; min-width: 0; padding-top: var(--xp-space-2); }
+.xp-slot-version-menu {
+  position: absolute; top: 100%; inset-inline-end: 0; z-index: 5;
+  display: grid; min-width: 180px; padding: var(--xp-space-2);
+  box-shadow: 0 8px 24px var(--xp-overlay);
+  background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius);
+}
+.xp-slot-version-menu .xp-ui-button { justify-content: start; }
+.xp-slot-weight-inputs, .xp-slot-people { display: flex; flex-wrap: wrap; gap: var(--xp-space-3); }
+.xp-slot-weight-inputs { align-items: flex-start; }
+.xp-slot-weight-inputs .xp-ui-field { flex: 1 1 120px; max-width: 200px; }
+.xp-slot-readout { display: grid; gap: var(--xp-space-2); }
+.xp-slot-readout > .xp-ui-button { justify-self: start; }
+.xp-slot-editor .xp-ui-tablist { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }

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

@@ -2,8 +2,9 @@ import type { Arm, DocId, Status, UnitType } from '../../types/contracts.js';
 import type { ArmSlot } from '../../types/puck.js';
 export type EditorExperiment = {
     name: string;
+    updatedAt?: string;
     status: Status;
-    arms: Array<Pick<Arm, 'key' | 'kind' | 'label'>>;
+    arms: Array<Pick<Arm, 'key' | 'kind' | 'label'> & Partial<Arm>>;
     decision?: {
         winnerArm?: string;
     } | null;
@@ -38,6 +39,8 @@ export declare function newTestBody(input: {
         plannedDurationDays: number;
     };
 };
+/** Candidate order shared by local naming and the bounded REST slug probes. */
+export declare function slugCandidate(base: string, index: number): string;
 export declare function uniqueSlug(base: string, taken: readonly string[]): string;
 /** Payload nests field validation errors under data.errors. Only a unique slug refusal is retryable. */
 export declare function isSlugCollision(status: number, body: unknown): boolean;

package/dist/puck/editor/editor.model.js

@@ -9,9 +9,9 @@ export function tabsFor(experiment) {
     return experiment.arms.flatMap((arm)=>arm.kind === 'holdout' || arm.key === 'holdout' ? [] : [
             {
                 slot: arm.key,
-                label: arm.label?.trim() ? arm.label : editorCopy.labels[arm.key]
+                label: arm.label.trim() || editorCopy.labels[arm.key]
             }
-        ]);
+        ]).sort((a, b)=>Number(b.slot === 'control') - Number(a.slot === 'control'));
 }
 export function bannerFor(status, winner = editorCopy.labels.control) {
     switch(status){
@@ -75,13 +75,16 @@ export function slugify(name) {
         }
     };
 }
-export function uniqueSlug(base, taken) {
+/** Candidate order shared by local naming and the bounded REST slug probes. */ export function slugCandidate(base, index) {
     const root = base.slice(0, 64).replace(/-+$/g, '') || 'test';
+    if (index === 1) return root;
+    const suffix = `-${index}`;
+    return root.slice(0, 64 - suffix.length).replace(/-+$/g, '') + suffix;
+}
+export function uniqueSlug(base, taken) {
     const used = new Set(taken);
-    if (!used.has(root)) return root;
-    for(let index = 2;; index++){
-        const suffix = `-${index}`;
-        const candidate = root.slice(0, 64 - suffix.length).replace(/-+$/g, '') + suffix;
+    for(let index = 1;; index++){
+        const candidate = slugCandidate(base, index);
         if (!used.has(candidate)) return candidate;
     }
 }

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

@@ -0,0 +1,3 @@
+import { type Plugin } from '@puckeditor/core';
+/** Add to Puck's plugins so its outline wrapper composes with the host's overrides. */
+export declare function experimentOutlinePlugin(): Plugin;