@delmaredigital/payload-experiments 0.2.0-rc.7 → 0.3.0-rc.4

package/dist/puck/editor/editor.css

@@ -1,102 +1,293 @@
-/* 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. */
+/* generated — do not edit. Run pnpm generate:editor-css. Reference: Payload 3.90.2. */
 .xp-slot-root {
-  --xp-bg: rgb(255, 255, 255);
-  --xp-text: rgb(47, 47, 47);
-  --xp-surface: rgb(245, 245, 245);
+  --xp-bg: rgb(245, 245, 245);
+  --xp-surface: rgb(255, 255, 255);
+  --xp-surface-2: rgb(235, 235, 235);
+  --xp-surface-3: rgb(221, 221, 221);
+  --xp-border: rgb(235, 235, 235);
+  --xp-border-strong: rgb(195, 195, 195);
+  --xp-text: rgb(34, 34, 34);
+  --xp-text-2: rgb(87, 87, 87);
+  --xp-text-3: rgb(141, 141, 141);
+  --xp-accent: rgb(47, 47, 47);
+  --xp-accent-hover: rgb(20, 20, 20);
+  --xp-accent-active: rgb(7, 7, 7);
+  --xp-accent-subtle: rgb(208, 208, 208);
+  --xp-accent-fg: rgb(255, 255, 255);
+  --xp-accent-text: rgb(34, 34, 34);
+  --xp-accent-text-decoration: none;
+  --xp-focus: rgb(47, 47, 47);
+  --xp-series-muted: rgb(181, 181, 181);
+  --xp-success: #1a6a3a;
+  --xp-success-bg: #e8f4ec;
+  --xp-success-border: #bddfc9;
+  --xp-warning: #8a5a0b;
+  --xp-warning-bg: #fbf3e1;
+  --xp-warning-border: #ecd6a2;
+  --xp-error: #a63030;
+  --xp-error-bg: #fbeaea;
+  --xp-error-border: #efc3c3;
+  --xp-series-a: #2a78d6;
+  --xp-series-b: #eb6834;
+  --xp-series-c: #8056b3;
+  --xp-radius-control: 8px;
+  --xp-radius-card: 12px;
+  --xp-radius-chip: 6px;
+  --xp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+  --xp-text-display: 600 28px/32px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-text-title: 600 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-text-body: 400 15px/22px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-text-small: 400 13px/18px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-motion: 120ms;
+  --xp-space-half: 2px;
+  --xp-space-one-half: 6px;
+  --xp-version-share-width: 96px;
+  --xp-version-share-width-mobile: 84px;
+  --xp-version-state-width: 192px;
+  --xp-version-remove-width: 128px;
+  --xp-targeting-attribute-width: 150px;
+  --xp-targeting-comparison-width: 140px;
+  --xp-legend-key-size: 10px;
+  --xp-legend-key-radius: 3px;
+  --xp-space-1: 4px;
+  --xp-space-2: 8px;
+  --xp-space-3: 12px;
+  --xp-space-4: 16px;
+  --xp-space-5: 20px;
+  --xp-space-6: 24px;
+  --xp-space-7: 28px;
+  --xp-space-8: 32px;
   --xp-surface-raised: rgb(235, 235, 235);
-  --xp-border: rgb(221, 221, 221);
-  --xp-border-strong: rgb(208, 208, 208);
+  --xp-border-control: rgb(195, 195, 195);
   --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-text-muted: rgb(87, 87, 87);
+  --xp-text-strong: rgb(34, 34, 34);
+  --xp-text-emphasis: rgb(34, 34, 34);
   --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-overlay: rgba(5, 5, 5, 0.5);
+  --xp-success-surface: #e8f4ec;
+  --xp-success-text: #1a6a3a;
+  --xp-success-text-strong: #1a6a3a;
+  --xp-warning-surface: #fbf3e1;
+  --xp-warning-text: #8a5a0b;
+  --xp-warning-text-strong: #8a5a0b;
+  --xp-error-surface: #fbeaea;
+  --xp-error-text: #a63030;
+  --xp-radius: 8px;
+  --xp-radius-large: 12px;
+  --xp-dash-card-gap: 12px;
+  --xp-dash-card-gap-small: 8px;
   --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-surface-2: rgb(47, 47, 47);
+  --xp-surface-3: rgb(60, 60, 60);
+  --xp-border: rgb(47, 47, 47);
   --xp-border-strong: rgb(74, 74, 74);
+  --xp-text: rgb(235, 235, 235);
+  --xp-text-2: rgb(168, 168, 168);
+  --xp-text-3: rgb(114, 114, 114);
+  --xp-accent: rgb(235, 235, 235);
+  --xp-accent-hover: rgb(255, 255, 255);
+  --xp-accent-active: rgb(255, 255, 255);
+  --xp-accent-subtle: rgb(74, 74, 74);
+  --xp-accent-fg: rgb(20, 20, 20);
+  --xp-accent-text: rgb(235, 235, 235);
+  --xp-accent-text-decoration: none;
+  --xp-focus: rgb(235, 235, 235);
+  --xp-series-muted: rgb(87, 87, 87);
+  --xp-success: #7fd49c;
+  --xp-success-bg: #142b1d;
+  --xp-success-border: #23492f;
+  --xp-warning: #e7bd5c;
+  --xp-warning-bg: #2b2312;
+  --xp-warning-border: #4d3d17;
+  --xp-error: #f09494;
+  --xp-error-bg: #2f1717;
+  --xp-error-border: #5a2626;
+  --xp-series-a: #3987e5;
+  --xp-series-b: #d95926;
+  --xp-series-c: #b48ade;
+  --xp-radius-control: 8px;
+  --xp-radius-card: 12px;
+  --xp-radius-chip: 6px;
+  --xp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+  --xp-text-display: 600 28px/32px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-text-title: 600 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-text-body: 400 15px/22px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-text-small: 400 13px/18px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --xp-motion: 120ms;
+  --xp-space-half: 2px;
+  --xp-space-one-half: 6px;
+  --xp-version-share-width: 96px;
+  --xp-version-share-width-mobile: 84px;
+  --xp-version-state-width: 192px;
+  --xp-version-remove-width: 128px;
+  --xp-targeting-attribute-width: 150px;
+  --xp-targeting-comparison-width: 140px;
+  --xp-legend-key-size: 10px;
+  --xp-legend-key-radius: 3px;
+  --xp-space-1: 4px;
+  --xp-space-2: 8px;
+  --xp-space-3: 12px;
+  --xp-space-4: 16px;
+  --xp-space-5: 20px;
+  --xp-space-6: 24px;
+  --xp-space-7: 28px;
+  --xp-space-8: 32px;
+  --xp-surface-raised: rgb(47, 47, 47);
+  --xp-border-control: rgb(87, 87, 87);
   --xp-input-border: rgb(101, 101, 101);
   --xp-border-accent: rgb(141, 141, 141);
-  --xp-text-muted: rgb(181, 181, 181);
+  --xp-text-muted: rgb(168, 168, 168);
   --xp-text-strong: rgb(235, 235, 235);
-  --xp-text-emphasis: rgb(255, 255, 255);
+  --xp-text-emphasis: rgb(235, 235, 235);
   --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-overlay: rgba(5, 5, 5, 0.75);
+  --xp-success-surface: #142b1d;
+  --xp-success-text: #7fd49c;
+  --xp-success-text-strong: #7fd49c;
+  --xp-warning-surface: #2b2312;
+  --xp-warning-text: #e7bd5c;
+  --xp-warning-text-strong: #e7bd5c;
+  --xp-error-surface: #2f1717;
+  --xp-error-text: #f09494;
+  --xp-radius: 8px;
+  --xp-radius-large: 12px;
+  --xp-dash-card-gap: 12px;
+  --xp-dash-card-gap-small: 8px;
   --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. */
+/* Shared primitives: no host palette references, and no global element resets. */
+.xp-ui-chips, .xp-ui-chips-control, .xp-ui-chips-item, .xp-ui-button, .xp-ui-input, .xp-ui-toggle, .xp-ui-tab, .xp-ui-dialog, .xp-ui-card { box-sizing: border-box; }
+.xp-ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 14px; border-radius: var(--xp-radius-control); border: 1px solid transparent; font: 500 14px/20px var(--xp-font); color: var(--xp-text); background: transparent; cursor: pointer; white-space: normal; overflow-wrap: anywhere; max-width: 100%; min-width: 0; text-decoration: none; transition: background-color var(--xp-motion), border-color var(--xp-motion), color var(--xp-motion); }
+.xp-ui-button--primary { background: var(--xp-accent); color: var(--xp-accent-fg); border-color: var(--xp-accent); }
+.xp-ui-button--primary:hover { background: var(--xp-accent-hover); border-color: var(--xp-accent-hover); }
+.xp-ui-button--primary:active { background: var(--xp-accent-active); border-color: var(--xp-accent-active); }
+.xp-ui-button--secondary { background: var(--xp-surface); border-color: var(--xp-border-strong); }
+.xp-ui-button--secondary:hover { background: var(--xp-surface-2); }
+.xp-ui-button--quiet { color: var(--xp-text-2); }
+.xp-ui-button--quiet:hover { background: var(--xp-surface-2); color: var(--xp-text); }
+.xp-ui-button--danger { color: var(--xp-error); border-color: var(--xp-error-border); background: var(--xp-surface); }
+.xp-ui-button--danger:hover { background: var(--xp-error-bg); }
+.xp-ui-button--sm { height: 30px; padding: 0 10px; font-size: 13px; }
+.xp-ui-button--link { height: auto; min-height: 0; padding-inline: 0; color: var(--xp-accent-text); text-decoration: var(--xp-accent-text-decoration); }
+.xp-ui-button--link:hover { text-decoration: underline; }
+.xp-ui-button:disabled, .xp-ui-button[aria-disabled='true'], .xp-ui-input:disabled, .xp-ui-toggle:disabled { opacity: .5; cursor: not-allowed; }
+.xp-ui-button:focus-visible, .xp-ui-input:focus-visible, .xp-ui-toggle:focus-visible, .xp-ui-tab:focus-visible, .xp-ui-tabpanel:focus-visible, .xp-ui-breadcrumb a:focus-visible, .xp-ui-dialog:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-ui-field { min-width: 0; max-width: 100%; display: grid; gap: 6px; color: var(--xp-text); font: var(--xp-text-body); }
+.xp-ui-field > label { font-weight: 500; }
+.xp-ui-input { display: block; width: 100%; max-width: 100%; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--xp-border-strong); border-radius: var(--xp-radius-control); background: var(--xp-surface); color: var(--xp-text); font: var(--xp-text-body); transition: border-color var(--xp-motion); }
+.xp-ui-input::placeholder { color: var(--xp-text-3); }
+.xp-ui-input:hover { border-color: var(--xp-text-3); }
+.xp-ui-input[aria-invalid='true'] { border-color: var(--xp-error); }
+.xp-ui-input--number { text-align: right; font-variant-numeric: tabular-nums; }
+.xp-ui-select { cursor: pointer; appearance: auto; }
+.xp-ui-help { margin: 0; color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-ui-error { margin: 0; color: var(--xp-error); font: var(--xp-text-small); }
+.xp-ui-toggle { appearance: none; display: inline-block; width: 32px; height: 20px; margin: 0; padding: 2px; border-radius: 20px; border: 1px solid var(--xp-border-strong); background: var(--xp-surface-3); cursor: pointer; transition: background-color var(--xp-motion); }
+.xp-ui-toggle::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--xp-surface); transition: transform var(--xp-motion); }
+.xp-ui-toggle:checked { background: var(--xp-accent); border-color: var(--xp-accent); }
+.xp-ui-toggle:checked::before { transform: translateX(12px); background: var(--xp-accent-fg); }
+.xp-ui-card { min-width: 0; padding: 20px; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); color: var(--xp-text); font: var(--xp-text-body); }
+.xp-ui-section { padding: 0; }
+.xp-ui-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--xp-border); }
+.xp-ui-section-head h2 { margin: 0; font: var(--xp-text-title); }
+.xp-ui-section-number { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-chip); font: var(--xp-text-small); color: var(--xp-text-2); }
+.xp-ui-section-complete { margin-inline-start: auto; color: var(--xp-text-2); }
+.xp-ui-section-body { padding: 20px; }
+.xp-ui-tabs { color: var(--xp-text); font: var(--xp-text-body); }
+.xp-ui-tablist { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--xp-border); }
+.xp-ui-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 12px; background: transparent; color: var(--xp-text-2); font: var(--xp-text-body); cursor: pointer; }
+.xp-ui-tab[aria-selected='true'] { color: var(--xp-accent-text); text-decoration: var(--xp-accent-text-decoration); border-bottom-color: var(--xp-accent-text); font-weight: 600; }
+.xp-ui-tab:disabled { opacity: .5; cursor: not-allowed; }
+.xp-ui-tabpanel { padding-block: 16px; }
+.xp-ui-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--xp-radius-chip); border: 1px solid var(--xp-border-strong); background: var(--xp-surface-2); color: var(--xp-text-2); font: 500 12px/18px var(--xp-font); white-space: nowrap; }
+.xp-ui-status--running, .xp-ui-status--ready { background: var(--xp-success-bg); color: var(--xp-success); border-color: var(--xp-success-border); }
+.xp-ui-status--needs-attention { background: var(--xp-warning-bg); color: var(--xp-warning); border-color: var(--xp-warning-border); }
+.xp-ui-status--decided { background: var(--xp-text); color: var(--xp-surface); border-color: var(--xp-text); }
+.xp-ui-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-control); background: var(--xp-surface-2); color: var(--xp-text); font: var(--xp-text-body); }
+.xp-ui-banner p, .xp-ui-empty p { margin: 0; }
+.xp-ui-banner--warning { background: var(--xp-warning-bg); color: var(--xp-warning); border-color: var(--xp-warning-border); }
+.xp-ui-banner--error { background: var(--xp-error-bg); color: var(--xp-error); border-color: var(--xp-error-border); }
+.xp-ui-empty { display: grid; justify-items: center; gap: 16px; padding: 32px 20px; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); color: var(--xp-text-2); background: var(--xp-surface); font: var(--xp-text-body); text-align: center; }
+.xp-ui-breadcrumb { color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-ui-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
+.xp-ui-breadcrumb li { display: flex; gap: 8px; min-width: 0; }
+.xp-ui-breadcrumb a { color: var(--xp-text-2); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--xp-radius-chip); }
+.xp-ui-breadcrumb a:hover { color: var(--xp-text); }
+.xp-ui-breadcrumb [aria-current] { color: var(--xp-text); }
+.xp-ui-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 24px; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-card); background: var(--xp-surface); color: var(--xp-text); font: var(--xp-text-body); box-shadow: 0 16px 48px var(--xp-overlay); }
+.xp-ui-dialog h2 { margin: 0 0 16px; font: var(--xp-text-title); }
+.xp-ui-dialog::backdrop { background: var(--xp-overlay); }
+.xp-ui-chips { width: 100%; max-width: 100%; min-width: 0; display: grid; gap: var(--xp-space-2); margin-block: var(--xp-space-4); color: var(--xp-text); font-family: var(--xp-font-body); }
+.xp-ui-chips-control { width: 100%; max-width: 100%; min-width: 0; 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-ui-chips-control--invalid { border-color: var(--xp-error); }
+.xp-ui-chips-control:focus-within { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-ui-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-ui-chips .xp-ui-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-ui-chips .xp-ui-chips-control input { flex: 1 1 28ch; min-width: min(100%, 28ch); width: 100%; max-width: 100%; box-sizing: border-box; border: 0; padding: var(--xp-space-1); background: transparent; color: var(--xp-text); font: inherit; }
+.xp-ui-chips input:focus { outline: none; }
+.xp-ui-chips button:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-ui-chips[aria-disabled='true'] { opacity: .5; }
+.xp-ui-chips[aria-disabled='true'] button { cursor: default; }
+.xp-ui-chips p:not(.xp-ui-error) { margin: 0; color: var(--xp-text-muted); font-size: var(--xp-font-size-small); }
+/* Quiet actions and breadcrumb links stay neutral; only the selected tab takes the text accent. */
+.xp-ui-button-group { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
+@media (prefers-reduced-motion: reduce) {
+  .xp-ui-button, .xp-ui-input, .xp-ui-toggle, .xp-ui-toggle::before, .xp-ui-chips-control { transition: none; }
+}
+
+.xp-ui-textarea { height: auto; min-height: 96px; padding-block: var(--xp-space-2); resize: vertical; }
+.xp-ui-checkbox-label { display: flex; align-items: baseline; gap: var(--xp-space-2); cursor: pointer; }
+.xp-ui-checkbox { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--xp-accent); }
+.xp-ui-checkbox-list { margin: 0; padding: 0; border: 0; }
+.xp-ui-checkbox-list legend { padding: 0; margin-bottom: var(--xp-space-2); font-weight: 500; }
+.xp-ui-range { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0; accent-color: var(--xp-accent); cursor: pointer; }
+.xp-ui-checkbox:disabled, .xp-ui-range:disabled { opacity: .5; cursor: not-allowed; }
+.xp-ui-checkbox:focus-visible, .xp-ui-range:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
+.xp-ui-checkbox[aria-invalid='true'], .xp-ui-range[aria-invalid='true'] { outline: 1px solid var(--xp-error); }
+
+.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; }
+
+/* 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);
@@ -105,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);
+  border-inline: 1px solid var(--xp-border);
 }
 
-.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-editor .xp-ui-tabpanel {
+  padding: 0;
 }
 
 .xp-slot-panel {
@@ -265,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;