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

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

@@ -0,0 +1,235 @@
+/* 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/puck/editor/editor.css

@@ -1,70 +1,268 @@
-/* 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;
 }
 
+/* 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; }
+
 /* These controls also render in the host's preflight-reset editor iframe. */
 .xp-slot-editor {
   min-width: 0;

package/dist/results/aggregate.js

@@ -1,14 +1,15 @@
+import { XpAnalysisError } from '../errors.js';
 /** Accept Date, timestamp text, or epoch milliseconds; reject invalid dates. */ export function timestampMs(ts) {
     if (!(ts instanceof Date) && typeof ts !== 'string' && typeof ts !== 'number') {
-        throw new RangeError('Invalid timestamp');
+        throw new XpAnalysisError('invalid-timestamp');
     }
     const ms = ts instanceof Date ? ts.getTime() : new Date(ts).getTime();
-    if (!Number.isFinite(ms)) throw new RangeError('Invalid timestamp');
+    if (!Number.isFinite(ms)) throw new XpAnalysisError('invalid-timestamp');
     return ms;
 }
 /** Attribution windows must have a finite, positive length in hours. */ export function windowMs(windowHours) {
     if (!Number.isFinite(windowHours) || windowHours <= 0) {
-        throw new RangeError('windowHours must be a finite number greater than 0');
+        throw new XpAnalysisError('window-hours');
     }
     return windowHours * 3_600_000;
 }

package/dist/results/analyse.d.ts

@@ -1,4 +1,5 @@
 import type { GaussianPrior } from '@delmaredigital/experiments-stats';
+import type { MetricUnavailableReason } from '../types/reasons.js';
 import type { Arm, DocId, MetricSource } from '../types/contracts.js';
 import type { Snapshot } from '../types/snapshot.js';
 import type { ExposedUnit, Timestamp } from './aggregate.js';
@@ -55,10 +56,12 @@ export interface MetricUnitData {
     values: ReadonlyMap<string, number>;
     /** Host pre-period outcomes; absent entries in a supplied map mean zero. */
     covariates?: ReadonlyMap<string, number>;
-    unavailable?: string;
+    unavailable?: MetricUnavailableReason;
 }
 export type AnalysePhaseInput = {
     phase: AnalysisPhase;
+    /** The runner logs failures; injecting this keeps analysis free of I/O imports. */
+    onMetricError?: (error: unknown, metricId: DocId) => void;
     status: 'running' | 'stopped' | 'decided';
     now: Timestamp;
     /** CORE-14a firstExposures output; same-unit multi-arm units already excluded. */