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

package/dist/ui/NumberInput.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { NumberInput } from './Inputs.js';

package/dist/ui/Range.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Range } from './Inputs.js';

package/dist/ui/Range.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Range } from './Inputs.js';

package/dist/ui/SearchInput.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SearchInput } from './Inputs.js';

package/dist/ui/SearchInput.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SearchInput } from './Inputs.js';

package/dist/ui/SectionCard.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SectionCard } from './Card.js';

package/dist/ui/SectionCard.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SectionCard } from './Card.js';

package/dist/ui/Select.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Select } from './Inputs.js';

package/dist/ui/Select.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Select } from './Inputs.js';

package/dist/ui/StatusChip.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { StatusChip } from './Feedback.js';

package/dist/ui/StatusChip.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { StatusChip } from './Feedback.js';

package/dist/ui/Tabs.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode, Ref } from 'react';
+import './ui.css';
+export interface Tab {
+    id: string;
+    label: string;
+    content: ReactNode;
+    actions?: ReactNode;
+    disabled?: boolean;
+}
+export declare function Tabs({ items, label, value, onChange, tabListRef }: {
+    items: Tab[];
+    label: string;
+    value?: string;
+    onChange?: (id: string) => void;
+    tabListRef?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;

package/dist/ui/Tabs.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import './ui.css';
+export function Tabs({ items, label, value, onChange, tabListRef }) {
+    const prefix = useId();
+    const [local, setLocal] = useState(()=>items.find((item)=>!item.disabled)?.id);
+    const requested = value ?? local;
+    const selected = items.find((item)=>item.id === requested && !item.disabled)?.id ?? items.find((item)=>!item.disabled)?.id;
+    function select(id) {
+        setLocal(id);
+        onChange?.(id);
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-ui-tabs",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                ref: tabListRef,
+                className: "xp-ui-tabs-header",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        role: "tablist",
+                        "aria-label": label,
+                        className: "xp-ui-tablist",
+                        children: items.map((item)=>/*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                role: "tab",
+                                id: `${prefix}-tab-${item.id}`,
+                                "aria-controls": `${prefix}-panel-${item.id}`,
+                                "aria-selected": selected === item.id,
+                                tabIndex: selected === item.id ? 0 : -1,
+                                disabled: item.disabled,
+                                className: "xp-ui-tab",
+                                onClick: ()=>select(item.id),
+                                onKeyDown: (event)=>{
+                                    const enabled = items.filter((tab)=>!tab.disabled);
+                                    const index = enabled.findIndex((tab)=>tab.id === item.id);
+                                    const next = event.key === 'ArrowRight' ? enabled[(index + 1) % enabled.length] : event.key === 'ArrowLeft' ? enabled[(index - 1 + enabled.length) % enabled.length] : event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled.at(-1) : undefined;
+                                    if (!next) return;
+                                    event.preventDefault();
+                                    select(next.id);
+                                    event.currentTarget.ownerDocument.getElementById(`${prefix}-tab-${next.id}`)?.focus();
+                                },
+                                children: item.label
+                            }, item.id))
+                    }),
+                    items.find((item)=>item.id === selected)?.actions
+                ]
+            }),
+            items.map((item)=>/*#__PURE__*/ _jsx("div", {
+                    role: "tabpanel",
+                    id: `${prefix}-panel-${item.id}`,
+                    "aria-labelledby": `${prefix}-tab-${item.id}`,
+                    hidden: selected !== item.id,
+                    tabIndex: 0,
+                    className: "xp-ui-tabpanel",
+                    children: item.content
+                }, item.id))
+        ]
+    });
+}

package/dist/ui/TextInput.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { TextInput } from './Inputs.js';

package/dist/ui/TextInput.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { TextInput } from './Inputs.js';

package/dist/ui/Textarea.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Textarea } from './Inputs.js';

package/dist/ui/Textarea.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Textarea } from './Inputs.js';

package/dist/ui/Toggle.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Toggle } from './Inputs.js';

package/dist/ui/Toggle.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Toggle } from './Inputs.js';

package/dist/ui/accent.d.ts

@@ -0,0 +1,40 @@
+export interface AccentSet {
+    accent: string;
+    hover: string;
+    active: string;
+    subtle: string;
+    fg: string;
+    focus: string;
+    accentText: string;
+    accentTextDecoration: 'none' | 'underline';
+}
+/** WCAG 2.x relative luminance contrast. */
+export declare function contrast(a: string, b: string): number;
+/** Contrast floors for accent text and focus rings. Black or white always clears them on a real
+ * surface, so the fallbacks below are defensive; tests raise the floors to exercise them. */
+type Floors = {
+    text: number;
+    focus: number;
+};
+/** Pure shared host-accent derivation using theme.css's reference surfaces. */
+export declare function deriveAccent(input: string): {
+    light: AccentSet;
+    dark: AccentSet;
+};
+/** Module-only surface injection; not a package API. Dark adjustment raises HSL
+ * lightness to 3:1. Interaction steps preserve the foreground and prefer the
+ * original direction when both steps reach 1.1:1; subtle remains an 8% tint. */
+export declare function deriveAccentFor(input: string, surfaces: {
+    light: string;
+    dark: string;
+}, floors?: Floors): {
+    light: AccentSet;
+    dark: AccentSet;
+};
+/** Validated hex values only; specificity exceeds theme.css regardless of load order. */
+export declare function accentStyles(input?: string): string | undefined;
+/** The plugin and Puck factory accept exactly the same host accent. */
+export declare function validateAccent(accent: unknown): void;
+/** Inline variables use the same names as the admin accent stylesheet. */
+export declare function accentVariables(set: AccentSet): Record<string, string>;
+export {};

package/dist/ui/accent.js

@@ -0,0 +1,139 @@
+function rgb(hex) {
+    if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) throw new Error(`Invalid accent hex colour: ${hex}`);
+    const full = hex.length === 4 ? hex.slice(1).split('').map((c)=>c + c).join('') : hex.slice(1);
+    return [
+        0,
+        2,
+        4
+    ].map((i)=>parseInt(full.slice(i, i + 2), 16));
+}
+const hexOf = (values)=>'#' + values.map((v)=>Math.round(v).toString(16).padStart(2, '0')).join('');
+function luminance(hex) {
+    const channels = rgb(hex).map((v)=>{
+        const s = v / 255;
+        return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+}
+/** WCAG 2.x relative luminance contrast. */ export function contrast(a, b) {
+    const x = luminance(a), y = luminance(b);
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+function mix(a, b, amount) {
+    const x = rgb(a), y = rgb(b);
+    return hexOf(x.map((v, i)=>v * (1 - amount) + y[i] * amount));
+}
+/** Raise HSL lightness with hue and saturation fixed, including achromatic inputs. */ function lighten(hex, amount) {
+    const channels = rgb(hex).map((v)=>v / 255);
+    const max = Math.max(...channels), min = Math.min(...channels), l = (max + min) / 2;
+    const next = l + (1 - l) * amount;
+    const scale = l === 1 ? 0 : (1 - Math.abs(2 * next - 1)) / (1 - Math.abs(2 * l - 1) || 1);
+    return hexOf(channels.map((v)=>(next + (v - l) * scale) * 255));
+}
+/** Bounded, quantised search toward the surface's opposite. */ function againstSurface(accent, surface, minimum) {
+    const opposite = luminance(surface) > 0.179 ? '#000000' : '#ffffff';
+    for(let step = 0; step <= 1000; step++){
+        const candidate = mix(accent, opposite, step / 1000);
+        if (contrast(candidate, surface) >= minimum) return candidate;
+    }
+    return undefined;
+}
+const interactionStep = (accent, states)=>Math.min(contrast(accent, states.hover), contrast(states.hover, states.active));
+/** Keep the old 12/24% steps when visible, otherwise search the full direction. */ function interaction(accent, fg, target) {
+    let low = 0, high = 0.24;
+    for(let i = 0; i < 24; i++){
+        const amount = (low + high) / 2;
+        if (contrast(mix(accent, target, amount), fg) >= 4.5) low = amount;
+        else high = amount;
+    }
+    const amount = contrast(mix(accent, target, 0.24), fg) >= 4.5 ? 0.24 : low;
+    const original = {
+        hover: mix(accent, target, amount / 2),
+        active: mix(accent, target, amount)
+    };
+    if (interactionStep(accent, original) >= 1.1) return original;
+    const candidates = [
+        accent
+    ];
+    let hover;
+    for(let step = 1; step <= 1000; step++){
+        const candidate = mix(accent, target, step / 1000);
+        if (contrast(candidate, fg) < 4.5) break;
+        candidates.push(candidate);
+        if (!hover && contrast(accent, candidate) >= 1.1) hover = candidate;
+        else if (hover && contrast(hover, candidate) >= 1.1) return {
+            hover,
+            active: candidate
+        };
+    }
+    // If two full steps cannot fit, maximise the smaller step to the last safe fill.
+    const active = candidates[candidates.length - 1];
+    return candidates.reduce((best, candidate)=>{
+        const next = {
+            hover: candidate,
+            active
+        };
+        return interactionStep(accent, next) > interactionStep(accent, best) ? next : best;
+    }, {
+        hover: accent,
+        active
+    });
+}
+const FLOORS = {
+    text: 4.5,
+    focus: 3
+};
+function set(accent, surface, dark = false, floors = FLOORS) {
+    const fg = contrast(accent, '#ffffff') >= contrast(accent, '#141414') ? '#ffffff' : '#141414';
+    const target = dark || fg === '#141414' ? '#ffffff' : '#000000';
+    const preferred = interaction(accent, fg, target);
+    const other = interaction(accent, fg, target === '#ffffff' ? '#000000' : '#ffffff');
+    const states = interactionStep(accent, preferred) >= 1.1 || interactionStep(accent, preferred) >= interactionStep(accent, other) ? preferred : other;
+    const accentText = againstSurface(accent, surface, floors.text);
+    return {
+        accent,
+        ...states,
+        subtle: mix(surface, accent, 0.08),
+        fg,
+        focus: againstSurface(accent, surface, floors.focus) ?? 'var(--xp-text)',
+        accentText: accentText ?? 'var(--xp-text)',
+        accentTextDecoration: accentText ? 'none' : 'underline'
+    };
+}
+/** Pure shared host-accent derivation using theme.css's reference surfaces. */ export function deriveAccent(input) {
+    return deriveAccentFor(input, {
+        light: '#ffffff',
+        dark: '#222222'
+    });
+}
+/** Module-only surface injection; not a package API. Dark adjustment raises HSL
+ * lightness to 3:1. Interaction steps preserve the foreground and prefer the
+ * original direction when both steps reach 1.1:1; subtle remains an 8% tint. */ export function deriveAccentFor(input, surfaces, floors = FLOORS) {
+    const accent = hexOf(rgb(input));
+    let dark = accent;
+    for(let step = 1; contrast(dark, surfaces.dark) < 3 && step <= 1000; step++)dark = lighten(accent, step / 1000);
+    return {
+        light: set(accent, surfaces.light, false, floors),
+        dark: set(dark, surfaces.dark, true, floors)
+    };
+}
+/** Validated hex values only; specificity exceeds theme.css regardless of load order. */ export function accentStyles(input) {
+    if (!input) return undefined;
+    const sets = deriveAccent(input);
+    const declarations = (s)=>Object.entries(accentVariables(s)).map(([name, value])=>`${name}:${value};`).join('');
+    return `:root:root, [data-theme="light"][data-theme="light"]{${declarations(sets.light)}}\n[data-theme="dark"][data-theme="dark"]{${declarations(sets.dark)}}`;
+}
+/** The plugin and Puck factory accept exactly the same host accent. */ export function validateAccent(accent) {
+    if (accent === undefined || accent === '') return;
+    if (typeof accent !== 'string' || !/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(accent)) throw new Error('Experiments theme.accent must be a CSS hex colour (#rgb or #rrggbb)');
+    for (const [mode, set] of Object.entries(deriveAccent(accent))){
+        const ratio = contrast(set.accent, set.fg);
+        if (ratio < 4.5) throw new Error(`Experiments theme.accent ${accent}: ${mode} foreground contrast ${ratio.toFixed(2)}:1 is below 4.5:1`);
+    }
+}
+/** Inline variables use the same names as the admin accent stylesheet. */ export function accentVariables(set) {
+    return Object.fromEntries(Object.entries(set).map(([name, value])=>[
+            `--xp-${name === 'accentText' ? 'accent-text' : name === 'accentTextDecoration' ? 'accent-text-decoration' : name === 'focus' || name === 'accent' ? name : `accent-${name}`}`,
+            value
+        ]));
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Button.js';
+export * from './Inputs.js';
+export * from './ChipsInput.js';
+export * from './Card.js';
+export * from './Tabs.js';
+export * from './Feedback.js';
+export * from './Dialog.js';
+export * from './Breadcrumb.js';
+export * from './accent.js';

package/dist/ui/index.js

@@ -0,0 +1,9 @@
+export * from './Button.js';
+export * from './Inputs.js';
+export * from './ChipsInput.js';
+export * from './Card.js';
+export * from './Tabs.js';
+export * from './Feedback.js';
+export * from './Dialog.js';
+export * from './Breadcrumb.js';
+export * from './accent.js';

package/dist/ui/ui.css

@@ -0,0 +1,92 @@
+/* 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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-experiments",
-  "version": "0.2.0-rc.7",
+  "version": "0.3.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",
@@ -68,6 +68,8 @@
       "default": "./dist/exports/puckEditor.js"
     },
     "./puck/editor.css": "./dist/puck/editor/editor.css",
+    "./admin/theme.css": "./dist/admin/theme.css",
+    "./admin/ui.css": "./dist/ui/ui.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -135,7 +137,8 @@
     "@electric-sql/pglite": "^0.5.13",
     "@puckeditor/core": "^0.24.0",
     "drizzle-orm": "0.45.2",
-    "drizzle-kit": "0.31.7"
+    "drizzle-kit": "0.31.7",
+    "yaml": "2.9.1"
   },
   "scripts": {
     "build": "swc ./src -d ./dist --strip-leading-paths --config-file ../../.swcrc && tsc -p tsconfig.build.json && copyfiles -u 1 \"src/**/*.css\" dist",

package/dist/admin/components/chipsInput.css

@@ -1,11 +0,0 @@
-.xp-chips { display: grid; gap: var(--xp-space-2); margin-block: var(--xp-space-4); color: var(--xp-text); font-family: var(--xp-font-body); }
-.xp-chips-control { 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-chips-control:focus-within { outline: 2px solid var(--xp-text); outline-offset: 2px; }
-.xp-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-chips .xp-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-chips .xp-chips-control input { flex: 1; min-width: 8rem; width: 0; border: 0; padding: var(--xp-space-1); background: transparent; color: var(--xp-text); font: inherit; }
-.xp-chips input:focus { outline: none; }
-.xp-chips button:focus-visible { outline: 2px solid var(--xp-text); outline-offset: 2px; }
-.xp-chips[aria-disabled='true'] { opacity: .5; }
-.xp-chips[aria-disabled='true'] button { cursor: default; }
-.xp-chips p { margin: 0; color: var(--xp-text-muted); font-size: var(--xp-font-size-small); }

package/dist/admin/results/ArmTable.d.ts

@@ -1,8 +0,0 @@
-import type { ArmRow } from './results.model.js';
-export interface ArmTableProps {
-    rows: ArmRow[];
-    caption: string;
-    method: 'sequential' | 'bayesian';
-    metricKind: 'binomial' | 'count' | 'revenue';
-}
-export declare function ArmTable({ rows, caption, method, metricKind }: ArmTableProps): import("react").JSX.Element;

package/dist/admin/results/ArmTable.js

@@ -1,113 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { theme } from '../theme.js';
-import { RESULTS_COPY } from '../copy/results.js';
-import { CappedCell } from './CappedCell.js';
-export function ArmTable({ rows, caption, method, metricKind }) {
-    const sequential = method === 'sequential';
-    const showAdjustedCI = sequential && rows.some((row)=>row.comparison?.method === 'sequential' && row.comparison.adjustedCI !== undefined);
-    const showAdjustedPValue = sequential && rows.some((row)=>row.comparison?.method === 'sequential' && row.comparison.pValueAdjusted !== undefined);
-    const columns = 4 + Number(showAdjustedCI) + Number(showAdjustedPValue);
-    return /*#__PURE__*/ _jsx("div", {
-        className: "xp-arm-table",
-        style: {
-            color: theme.color.text,
-            overflowX: 'auto'
-        },
-        children: /*#__PURE__*/ _jsxs("table", {
-            children: [
-                /*#__PURE__*/ _jsx("caption", {
-                    children: caption
-                }),
-                /*#__PURE__*/ _jsx("thead", {
-                    children: /*#__PURE__*/ _jsxs("tr", {
-                        children: [
-                            /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: RESULTS_COPY.group
-                            }),
-                            /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: RESULTS_COPY.people
-                            }),
-                            /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: metricKind === 'binomial' ? RESULTS_COPY.conversions : RESULTS_COPY.mean
-                            }),
-                            /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: sequential ? RESULTS_COPY.lift : RESULTS_COPY.chanceToWin
-                            }),
-                            /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: RESULTS_COPY.ci
-                            }),
-                            showAdjustedCI ? /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: RESULTS_COPY.adjustedCI
-                            }) : null,
-                            /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: sequential ? RESULTS_COPY.pValue : RESULTS_COPY.risk
-                            }),
-                            showAdjustedPValue ? /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: RESULTS_COPY.adjustedPValue
-                            }) : null,
-                            /*#__PURE__*/ _jsx("th", {
-                                scope: "col",
-                                children: RESULTS_COPY.comparison
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ _jsx("tbody", {
-                    children: rows.map((row)=>/*#__PURE__*/ _jsxs("tr", {
-                            children: [
-                                /*#__PURE__*/ _jsx("th", {
-                                    scope: "row",
-                                    children: row.label
-                                }),
-                                /*#__PURE__*/ _jsx("td", {
-                                    children: row.n
-                                }),
-                                /*#__PURE__*/ _jsx("td", {
-                                    children: metricKind === 'revenue' ? /*#__PURE__*/ _jsx(CappedCell, {
-                                        model: row.capped
-                                    }) : row.value
-                                }),
-                                row.baseline ? /*#__PURE__*/ _jsx("td", {
-                                    colSpan: columns,
-                                    children: row.baseline
-                                }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: row.comparison?.method === 'sequential' ? row.comparison.lift : row.comparison?.chanceToWin ?? '—'
-                                        }),
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: row.comparison?.ci ?? '—'
-                                        }),
-                                        showAdjustedCI ? /*#__PURE__*/ _jsx("td", {
-                                            children: row.comparison?.method === 'sequential' ? row.comparison.adjustedCI ?? '—' : '—'
-                                        }) : null,
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: row.comparison?.method === 'sequential' ? row.comparison.pValue : row.comparison?.risk ?? '—'
-                                        }),
-                                        showAdjustedPValue ? /*#__PURE__*/ _jsx("td", {
-                                            children: row.comparison?.method === 'sequential' ? row.comparison.pValueAdjusted ?? '—' : '—'
-                                        }) : null,
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: row.comparison ? /*#__PURE__*/ _jsx("span", {
-                                                className: "xp-chip",
-                                                children: row.comparison.significance
-                                            }) : '—'
-                                        })
-                                    ]
-                                })
-                            ]
-                        }, row.key))
-                })
-            ]
-        })
-    });
-}

package/dist/admin/results/VerdictCard.d.ts

@@ -1,9 +0,0 @@
-import type { VerdictCardModel, guardrailChips } from './results.model.js';
-export interface VerdictCardProps {
-    model: VerdictCardModel;
-    guardrails?: ReturnType<typeof guardrailChips>;
-    power?: string | null;
-    collecting?: string | null;
-    sinceShipping?: string | null;
-}
-export declare function VerdictCard({ model, guardrails, power, collecting, sinceShipping }: VerdictCardProps): import("react").JSX.Element;

package/dist/admin/surface/goals/GoalsBreadcrumb.d.ts

@@ -1,5 +0,0 @@
-export declare function GoalsBreadcrumb({ adminRoute, name, returnQuery }: {
-    adminRoute: string;
-    name?: string;
-    returnQuery?: string;
-}): import("react").JSX.Element;