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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/README.md +129 -11
  2. package/dist/admin/PreviewLinks.d.ts +2 -1
  3. package/dist/admin/PreviewLinks.js +24 -16
  4. package/dist/admin/actions/ConfirmDialog.d.ts +7 -4
  5. package/dist/admin/actions/ConfirmDialog.js +37 -82
  6. package/dist/admin/actions/DecideDialog.d.ts +3 -1
  7. package/dist/admin/actions/DecideDialog.js +30 -13
  8. package/dist/admin/actions/MakeContentResult.d.ts +13 -2
  9. package/dist/admin/actions/MakeContentResult.js +115 -16
  10. package/dist/admin/actions/actions.model.d.ts +2 -4
  11. package/dist/admin/actions/actions.model.js +2 -3
  12. package/dist/admin/allocation.model.js +3 -5
  13. package/dist/admin/api.d.ts +10 -4
  14. package/dist/admin/api.js +11 -7
  15. package/dist/admin/copy/actions.d.ts +39 -3
  16. package/dist/admin/copy/actions.js +40 -4
  17. package/dist/admin/copy/armSelect.js +5 -5
  18. package/dist/admin/copy/audience.d.ts +2 -1
  19. package/dist/admin/copy/audience.js +3 -2
  20. package/dist/admin/copy/common.d.ts +13 -6
  21. package/dist/admin/copy/common.js +14 -8
  22. package/dist/admin/copy/goals.d.ts +21 -6
  23. package/dist/admin/copy/goals.js +27 -6
  24. package/dist/admin/copy/readiness.d.ts +19 -0
  25. package/dist/admin/copy/readiness.js +19 -0
  26. package/dist/admin/copy/recommendation.d.ts +0 -3
  27. package/dist/admin/copy/recommendation.js +0 -3
  28. package/dist/admin/copy/results.d.ts +41 -2
  29. package/dist/admin/copy/results.js +42 -3
  30. package/dist/admin/copy/review.d.ts +1 -1
  31. package/dist/admin/copy/review.js +1 -1
  32. package/dist/admin/copy/setting.d.ts +2 -0
  33. package/dist/admin/copy/setting.js +2 -0
  34. package/dist/admin/copy/surface.d.ts +7 -4
  35. package/dist/admin/copy/surface.js +9 -4
  36. package/dist/admin/copy/testPage.d.ts +10 -0
  37. package/dist/admin/copy/testPage.js +10 -0
  38. package/dist/admin/format/date.d.ts +2 -0
  39. package/dist/admin/format/date.js +10 -0
  40. package/dist/admin/previewLinks.model.d.ts +2 -2
  41. package/dist/admin/previewLinks.model.js +5 -7
  42. package/dist/admin/results/CiChart.js +11 -21
  43. package/dist/admin/results/DataQualityPanel.d.ts +4 -2
  44. package/dist/admin/results/DataQualityPanel.js +30 -17
  45. package/dist/admin/results/DataTable.d.ts +16 -0
  46. package/dist/admin/results/DataTable.js +152 -0
  47. package/dist/admin/results/StatTile.d.ts +7 -0
  48. package/dist/admin/results/StatTile.js +22 -0
  49. package/dist/admin/results/VerdictHero.d.ts +13 -0
  50. package/dist/admin/results/{VerdictCard.js → VerdictHero.js} +15 -12
  51. package/dist/admin/results/releasePages.model.d.ts +17 -0
  52. package/dist/admin/results/releasePages.model.js +10 -0
  53. package/dist/admin/results/results.css +64 -0
  54. package/dist/admin/results/results.model.d.ts +5 -1
  55. package/dist/admin/results/results.model.js +10 -2
  56. package/dist/admin/surface/ResultsRoute.d.ts +1 -1
  57. package/dist/admin/surface/ResultsRoute.js +59 -34
  58. package/dist/admin/surface/SurfaceShell.d.ts +11 -2
  59. package/dist/admin/surface/SurfaceShell.js +49 -14
  60. package/dist/admin/surface/TestsHome.d.ts +6 -1
  61. package/dist/admin/surface/TestsHome.js +183 -112
  62. package/dist/admin/surface/TestsSurface.js +56 -16
  63. package/dist/admin/surface/goals/GoalForm.js +341 -308
  64. package/dist/admin/surface/goals/GoalsList.js +123 -89
  65. package/dist/admin/surface/goals/data.d.ts +8 -2
  66. package/dist/admin/surface/goals/data.js +11 -3
  67. package/dist/admin/surface/goals/goals.css +10 -13
  68. package/dist/admin/surface/home.model.d.ts +7 -8
  69. package/dist/admin/surface/home.model.js +23 -12
  70. package/dist/admin/surface/newTest/NewTest.js +5 -5
  71. package/dist/admin/surface/pageBlock/parts.js +31 -26
  72. package/dist/admin/surface/readiness/ActionDialogs.js +43 -14
  73. package/dist/admin/surface/readiness/Banner.d.ts +3 -0
  74. package/dist/admin/surface/readiness/Banner.js +58 -33
  75. package/dist/admin/surface/readiness/SaveStatus.d.ts +1 -0
  76. package/dist/admin/surface/readiness/SaveStatus.js +6 -3
  77. package/dist/admin/surface/readiness/readiness.model.d.ts +2 -0
  78. package/dist/admin/surface/readiness/readiness.model.js +18 -9
  79. package/dist/admin/surface/readiness/useTransition.d.ts +1 -0
  80. package/dist/admin/surface/readiness/useTransition.js +2 -1
  81. package/dist/admin/surface/results/ReleasePages.d.ts +14 -0
  82. package/dist/admin/surface/results/ReleasePages.js +116 -0
  83. package/dist/admin/surface/results/ResultsBody.d.ts +11 -1
  84. package/dist/admin/surface/results/ResultsBody.js +276 -105
  85. package/dist/admin/surface/results/ResultsHeader.d.ts +10 -0
  86. package/dist/admin/surface/results/ResultsHeader.js +177 -0
  87. package/dist/admin/surface/results/recommendation.model.js +2 -6
  88. package/dist/admin/surface/results/useResults.d.ts +21 -3
  89. package/dist/admin/surface/results/useResults.js +2 -1
  90. package/dist/admin/surface/setting/parts.js +75 -88
  91. package/dist/admin/surface/setting/setting.css +3 -15
  92. package/dist/admin/surface/surface.css +62 -47
  93. package/dist/admin/surface/test/AdvancedSection.js +55 -48
  94. package/dist/admin/surface/test/GoalSection.js +39 -32
  95. package/dist/admin/surface/test/LengthSection.js +46 -34
  96. package/dist/admin/surface/test/Rail.d.ts +4 -0
  97. package/dist/admin/surface/test/Rail.js +83 -0
  98. package/dist/admin/surface/test/ReadinessBar.d.ts +5 -0
  99. package/dist/admin/surface/test/ReadinessBar.js +33 -0
  100. package/dist/admin/surface/test/Section.d.ts +1 -1
  101. package/dist/admin/surface/test/Section.js +36 -16
  102. package/dist/admin/surface/test/TargetingSection.js +168 -142
  103. package/dist/admin/surface/test/TestPage.d.ts +2 -1
  104. package/dist/admin/surface/test/TestPage.js +146 -68
  105. package/dist/admin/surface/test/VersionsSection.js +151 -120
  106. package/dist/admin/surface/test/fields.d.ts +11 -4
  107. package/dist/admin/surface/test/fields.js +84 -85
  108. package/dist/admin/surface/test/jumpToSection.d.ts +3 -0
  109. package/dist/admin/surface/test/jumpToSection.js +10 -0
  110. package/dist/admin/surface/test/pageParts.js +9 -3
  111. package/dist/admin/surface/test/testPage.css +81 -14
  112. package/dist/admin/surface/useTestDocument.js +10 -4
  113. package/dist/admin/targeting/targeting.model.d.ts +1 -3
  114. package/dist/admin/targeting/targeting.model.js +3 -8
  115. package/dist/admin/theme.css +115 -36
  116. package/dist/admin/theme.d.ts +38 -0
  117. package/dist/admin/theme.js +38 -1
  118. package/dist/admin/useApi.d.ts +17 -2
  119. package/dist/admin/views/ExperimentsRootView.js +12 -2
  120. package/dist/collections/experiments/config.js +25 -0
  121. package/dist/collections/experiments/lockHook.js +3 -1
  122. package/dist/collections/identities.js +6 -1
  123. package/dist/collections/metrics.js +7 -0
  124. package/dist/collections/metricsGuards.d.ts +9 -0
  125. package/dist/collections/metricsGuards.js +33 -0
  126. package/dist/contentDone.d.ts +4 -0
  127. package/dist/contentDone.js +5 -0
  128. package/dist/db/identities.d.ts +8 -7
  129. package/dist/db/identities.js +9 -6
  130. package/dist/db/metricUsage.d.ts +19 -0
  131. package/dist/db/metricUsage.js +54 -0
  132. package/dist/db/names.d.ts +5 -0
  133. package/dist/db/names.js +5 -0
  134. package/dist/db/publishedContent.d.ts +10 -0
  135. package/dist/db/publishedContent.js +43 -0
  136. package/dist/db/results.d.ts +2 -0
  137. package/dist/db/results.js +6 -2
  138. package/dist/db/snapshots.d.ts +18 -6
  139. package/dist/db/snapshots.js +23 -7
  140. package/dist/db/sweep.js +11 -6
  141. package/dist/endpoints/index.js +19 -1
  142. package/dist/endpoints/results.js +5 -0
  143. package/dist/endpoints/sanitizeReadinessDetail.d.ts +1 -0
  144. package/dist/endpoints/sanitizeReadinessDetail.js +2 -0
  145. package/dist/endpoints/summary.js +20 -2
  146. package/dist/endpoints/transitions.d.ts +15 -0
  147. package/dist/endpoints/transitions.js +36 -0
  148. package/dist/errors.d.ts +8 -0
  149. package/dist/errors.js +28 -0
  150. package/dist/exports/index.d.ts +2 -1
  151. package/dist/exports/index.js +1 -0
  152. package/dist/exports/puckEditor.d.ts +1 -0
  153. package/dist/exports/puckEditor.js +1 -0
  154. package/dist/exports/rsc.d.ts +5 -1
  155. package/dist/exports/rsc.js +2 -0
  156. package/dist/hooks/pageGuard.d.ts +5 -0
  157. package/dist/hooks/pageGuard.js +121 -0
  158. package/dist/log.js +6 -3
  159. package/dist/manifest/compile.d.ts +5 -0
  160. package/dist/manifest/compile.js +5 -1
  161. package/dist/options.js +23 -0
  162. package/dist/plugin.js +26 -2
  163. package/dist/puck/copy.d.ts +1 -1
  164. package/dist/puck/copy.js +1 -1
  165. package/dist/puck/editor/editor.chrome.css +235 -0
  166. package/dist/puck/editor/editor.css +241 -43
  167. package/dist/results/aggregate.js +4 -3
  168. package/dist/results/analyse.d.ts +4 -1
  169. package/dist/results/analyse.js +27 -11
  170. package/dist/results/cuped.js +3 -2
  171. package/dist/results/identityCredit.d.ts +15 -7
  172. package/dist/results/identityCredit.js +32 -33
  173. package/dist/results/rolloutUnits.js +2 -1
  174. package/dist/results/snapshot.js +8 -2
  175. package/dist/results/srm.js +2 -1
  176. package/dist/sanitizeReadinessDetail.d.ts +7 -0
  177. package/dist/sanitizeReadinessDetail.js +54 -0
  178. package/dist/server/linkIdentity.d.ts +10 -1
  179. package/dist/server/linkIdentity.js +17 -15
  180. package/dist/server/metadata.d.ts +5 -0
  181. package/dist/server/metadata.js +9 -1
  182. package/dist/server/runResults.d.ts +3 -2
  183. package/dist/server/runResults.js +121 -31
  184. package/dist/targeting/values.d.ts +4 -0
  185. package/dist/targeting/values.js +10 -0
  186. package/dist/transitions/addMetric.js +8 -0
  187. package/dist/transitions/archive.js +2 -3
  188. package/dist/transitions/checkStart.d.ts +6 -3
  189. package/dist/transitions/checkStart.js +15 -0
  190. package/dist/transitions/contentFields.d.ts +7 -0
  191. package/dist/transitions/contentFields.js +20 -0
  192. package/dist/transitions/decide.js +6 -1
  193. package/dist/transitions/dismissContentEntry.d.ts +8 -0
  194. package/dist/transitions/dismissContentEntry.js +45 -0
  195. package/dist/transitions/makeContent.d.ts +5 -2
  196. package/dist/transitions/makeContent.js +217 -118
  197. package/dist/transitions/phaseRecord.d.ts +8 -2
  198. package/dist/transitions/placements.d.ts +1 -0
  199. package/dist/transitions/placements.js +4 -0
  200. package/dist/transitions/preflightData.d.ts +1 -1
  201. package/dist/transitions/preflightData.js +42 -4
  202. package/dist/transitions/releasePages.d.ts +8 -0
  203. package/dist/transitions/releasePages.js +26 -0
  204. package/dist/transitions/restoreContentEntry.d.ts +8 -0
  205. package/dist/transitions/restoreContentEntry.js +47 -0
  206. package/dist/transitions/start.js +30 -5
  207. package/dist/types/contracts.d.ts +14 -0
  208. package/dist/types/endpoints.d.ts +34 -3
  209. package/dist/types/index.d.ts +1 -0
  210. package/dist/types/index.js +1 -0
  211. package/dist/types/reasons.d.ts +3 -0
  212. package/dist/types/reasons.js +1 -0
  213. package/dist/types/snapshot.d.ts +6 -1
  214. package/dist/ui/Banner.d.ts +2 -0
  215. package/dist/ui/Banner.js +2 -0
  216. package/dist/ui/Breadcrumb.d.ts +7 -0
  217. package/dist/ui/Breadcrumb.js +25 -0
  218. package/dist/ui/Button.d.ts +15 -0
  219. package/dist/ui/Button.js +32 -0
  220. package/dist/ui/Card.d.ts +12 -0
  221. package/dist/ui/Card.js +40 -0
  222. package/dist/ui/Checkbox.d.ts +2 -0
  223. package/dist/ui/Checkbox.js +2 -0
  224. package/dist/{admin/components → ui}/ChipsInput.d.ts +4 -3
  225. package/dist/{admin/components → ui}/ChipsInput.js +20 -12
  226. package/dist/ui/Dialog.d.ts +13 -0
  227. package/dist/ui/Dialog.js +85 -0
  228. package/dist/ui/EmptyState.d.ts +2 -0
  229. package/dist/ui/EmptyState.js +2 -0
  230. package/dist/ui/Feedback.d.ts +24 -0
  231. package/dist/ui/Feedback.js +40 -0
  232. package/dist/ui/Inputs.d.ts +34 -0
  233. package/dist/ui/Inputs.js +225 -0
  234. package/dist/ui/NumberInput.d.ts +2 -0
  235. package/dist/ui/NumberInput.js +2 -0
  236. package/dist/ui/Range.d.ts +2 -0
  237. package/dist/ui/Range.js +2 -0
  238. package/dist/ui/SearchInput.d.ts +2 -0
  239. package/dist/ui/SearchInput.js +2 -0
  240. package/dist/ui/SectionCard.d.ts +2 -0
  241. package/dist/ui/SectionCard.js +2 -0
  242. package/dist/ui/Select.d.ts +2 -0
  243. package/dist/ui/Select.js +2 -0
  244. package/dist/ui/StatusChip.d.ts +2 -0
  245. package/dist/ui/StatusChip.js +2 -0
  246. package/dist/ui/Tabs.d.ts +14 -0
  247. package/dist/ui/Tabs.js +54 -0
  248. package/dist/ui/TextInput.d.ts +2 -0
  249. package/dist/ui/TextInput.js +2 -0
  250. package/dist/ui/Textarea.d.ts +2 -0
  251. package/dist/ui/Textarea.js +2 -0
  252. package/dist/ui/Toggle.d.ts +2 -0
  253. package/dist/ui/Toggle.js +2 -0
  254. package/dist/ui/accent.d.ts +21 -0
  255. package/dist/ui/accent.js +81 -0
  256. package/dist/ui/index.d.ts +9 -0
  257. package/dist/ui/index.js +9 -0
  258. package/dist/ui/ui.css +92 -0
  259. package/package.json +1 -1
  260. package/dist/admin/components/chipsInput.css +0 -11
  261. package/dist/admin/results/ArmTable.d.ts +0 -8
  262. package/dist/admin/results/ArmTable.js +0 -113
  263. package/dist/admin/results/VerdictCard.d.ts +0 -9
  264. package/dist/admin/surface/goals/GoalsBreadcrumb.d.ts +0 -5
  265. package/dist/admin/surface/goals/GoalsBreadcrumb.js +0 -47
  266. package/dist/admin/surface/test/TestHeader.d.ts +0 -4
  267. package/dist/admin/surface/test/TestHeader.js +0 -70
@@ -0,0 +1,81 @@
1
+ function rgb(hex) {
2
+ if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) throw new Error(`Invalid accent hex colour: ${hex}`);
3
+ const full = hex.length === 4 ? hex.slice(1).split('').map((c)=>c + c).join('') : hex.slice(1);
4
+ return [
5
+ 0,
6
+ 2,
7
+ 4
8
+ ].map((i)=>parseInt(full.slice(i, i + 2), 16));
9
+ }
10
+ const hexOf = (values)=>'#' + values.map((v)=>Math.round(v).toString(16).padStart(2, '0')).join('');
11
+ function luminance(hex) {
12
+ const channels = rgb(hex).map((v)=>{
13
+ const s = v / 255;
14
+ return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
15
+ });
16
+ return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
17
+ }
18
+ /** WCAG 2.x relative luminance contrast. */ export function contrast(a, b) {
19
+ const x = luminance(a), y = luminance(b);
20
+ return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
21
+ }
22
+ function mix(a, b, amount) {
23
+ const x = rgb(a), y = rgb(b);
24
+ return hexOf(x.map((v, i)=>v * (1 - amount) + y[i] * amount));
25
+ }
26
+ /** Raise HSL lightness with hue and saturation fixed, including achromatic inputs. */ function lighten(hex, amount) {
27
+ const channels = rgb(hex).map((v)=>v / 255);
28
+ const max = Math.max(...channels), min = Math.min(...channels), l = (max + min) / 2;
29
+ const next = l + (1 - l) * amount;
30
+ const scale = l === 1 ? 0 : (1 - Math.abs(2 * next - 1)) / (1 - Math.abs(2 * l - 1) || 1);
31
+ return hexOf(channels.map((v)=>(next + (v - l) * scale) * 255));
32
+ }
33
+ /** Bounded, quantised search toward the surface's opposite. */ function againstSurface(accent, surface, minimum) {
34
+ const opposite = luminance(surface) > 0.179 ? '#000000' : '#ffffff';
35
+ for(let step = 0; step <= 1000; step++){
36
+ const candidate = mix(accent, opposite, step / 1000);
37
+ if (contrast(candidate, surface) >= minimum) return candidate;
38
+ }
39
+ return undefined;
40
+ }
41
+ function set(accent, surface, dark = false) {
42
+ const fg = contrast(accent, '#ffffff') >= contrast(accent, '#141414') ? '#ffffff' : '#141414';
43
+ // Light fills with dark text lighten on interaction. Dark-theme fills follow
44
+ // the default dark tokens and also lighten. Clamp to preserve one foreground.
45
+ const target = dark || fg === '#141414' ? '#ffffff' : '#000000';
46
+ let low = 0, high = 0.24;
47
+ for(let i = 0; i < 24; i++){
48
+ const amount = (low + high) / 2;
49
+ if (contrast(mix(accent, target, amount), fg) >= 4.5) low = amount;
50
+ else high = amount;
51
+ }
52
+ const amount = contrast(mix(accent, target, 0.24), fg) >= 4.5 ? 0.24 : low;
53
+ const accentText = againstSurface(accent, surface, 4.5);
54
+ return {
55
+ accent,
56
+ hover: mix(accent, target, amount / 2),
57
+ active: mix(accent, target, amount),
58
+ subtle: mix(surface, accent, 0.08),
59
+ fg,
60
+ focus: againstSurface(accent, surface, 3) ?? 'var(--xp-text)',
61
+ accentText: accentText ?? 'var(--xp-text)',
62
+ accentTextDecoration: accentText ? 'none' : 'underline'
63
+ };
64
+ }
65
+ /** Pure shared host-accent derivation. Reference surfaces match theme.css's Payload
66
+ * 3.90.2 white / elevation-50 dark. Dark adjustment increases HSL lightness until
67
+ * the quantised hex reaches 3:1. Hover/active move up to 12/24% in the interaction direction, clamped to preserve text contrast; subtle is 8% tint. */ export function deriveAccent(input) {
68
+ const accent = hexOf(rgb(input));
69
+ let dark = accent;
70
+ for(let step = 1; contrast(dark, '#222222') < 3 && step <= 1000; step++)dark = lighten(accent, step / 1000);
71
+ return {
72
+ light: set(accent, '#ffffff'),
73
+ dark: set(dark, '#222222', true)
74
+ };
75
+ }
76
+ /** Validated hex values only; specificity exceeds theme.css regardless of load order. */ export function accentStyles(input) {
77
+ if (!input) return undefined;
78
+ const sets = deriveAccent(input);
79
+ const declarations = (s)=>Object.entries(s).map(([name, value])=>`--xp-${name === 'accentText' ? 'accent-text' : name === 'accentTextDecoration' ? 'accent-text-decoration' : name === 'focus' || name === 'accent' ? name : `accent-${name}`}:${value};`).join('');
80
+ return `:root:root, [data-theme="light"][data-theme="light"]{${declarations(sets.light)}}\n[data-theme="dark"][data-theme="dark"]{${declarations(sets.dark)}}`;
81
+ }
@@ -0,0 +1,9 @@
1
+ export * from './Button.js';
2
+ export * from './Inputs.js';
3
+ export * from './ChipsInput.js';
4
+ export * from './Card.js';
5
+ export * from './Tabs.js';
6
+ export * from './Feedback.js';
7
+ export * from './Dialog.js';
8
+ export * from './Breadcrumb.js';
9
+ export * from './accent.js';
@@ -0,0 +1,9 @@
1
+ export * from './Button.js';
2
+ export * from './Inputs.js';
3
+ export * from './ChipsInput.js';
4
+ export * from './Card.js';
5
+ export * from './Tabs.js';
6
+ export * from './Feedback.js';
7
+ export * from './Dialog.js';
8
+ export * from './Breadcrumb.js';
9
+ export * from './accent.js';
package/dist/ui/ui.css ADDED
@@ -0,0 +1,92 @@
1
+ /* Shared primitives: no host palette references, and no global element resets. */
2
+ .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; }
3
+ .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); }
4
+ .xp-ui-button--primary { background: var(--xp-accent); color: var(--xp-accent-fg); border-color: var(--xp-accent); }
5
+ .xp-ui-button--primary:hover { background: var(--xp-accent-hover); border-color: var(--xp-accent-hover); }
6
+ .xp-ui-button--primary:active { background: var(--xp-accent-active); border-color: var(--xp-accent-active); }
7
+ .xp-ui-button--secondary { background: var(--xp-surface); border-color: var(--xp-border-strong); }
8
+ .xp-ui-button--secondary:hover { background: var(--xp-surface-2); }
9
+ .xp-ui-button--quiet { color: var(--xp-text-2); }
10
+ .xp-ui-button--quiet:hover { background: var(--xp-surface-2); color: var(--xp-text); }
11
+ .xp-ui-button--danger { color: var(--xp-error); border-color: var(--xp-error-border); background: var(--xp-surface); }
12
+ .xp-ui-button--danger:hover { background: var(--xp-error-bg); }
13
+ .xp-ui-button--sm { height: 30px; padding: 0 10px; font-size: 13px; }
14
+ .xp-ui-button--link { height: auto; min-height: 0; padding-inline: 0; color: var(--xp-accent-text); text-decoration: var(--xp-accent-text-decoration); }
15
+ .xp-ui-button--link:hover { text-decoration: underline; }
16
+ .xp-ui-button:disabled, .xp-ui-button[aria-disabled='true'], .xp-ui-input:disabled, .xp-ui-toggle:disabled { opacity: .5; cursor: not-allowed; }
17
+ .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; }
18
+ .xp-ui-field { min-width: 0; max-width: 100%; display: grid; gap: 6px; color: var(--xp-text); font: var(--xp-text-body); }
19
+ .xp-ui-field > label { font-weight: 500; }
20
+ .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); }
21
+ .xp-ui-input::placeholder { color: var(--xp-text-3); }
22
+ .xp-ui-input:hover { border-color: var(--xp-text-3); }
23
+ .xp-ui-input[aria-invalid='true'] { border-color: var(--xp-error); }
24
+ .xp-ui-input--number { text-align: right; font-variant-numeric: tabular-nums; }
25
+ .xp-ui-select { cursor: pointer; appearance: auto; }
26
+ .xp-ui-help { margin: 0; color: var(--xp-text-2); font: var(--xp-text-small); }
27
+ .xp-ui-error { margin: 0; color: var(--xp-error); font: var(--xp-text-small); }
28
+ .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); }
29
+ .xp-ui-toggle::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--xp-surface); transition: transform var(--xp-motion); }
30
+ .xp-ui-toggle:checked { background: var(--xp-accent); border-color: var(--xp-accent); }
31
+ .xp-ui-toggle:checked::before { transform: translateX(12px); background: var(--xp-accent-fg); }
32
+ .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); }
33
+ .xp-ui-section { padding: 0; }
34
+ .xp-ui-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--xp-border); }
35
+ .xp-ui-section-head h2 { margin: 0; font: var(--xp-text-title); }
36
+ .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); }
37
+ .xp-ui-section-complete { margin-inline-start: auto; color: var(--xp-text-2); }
38
+ .xp-ui-section-body { padding: 20px; }
39
+ .xp-ui-tabs { color: var(--xp-text); font: var(--xp-text-body); }
40
+ .xp-ui-tablist { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--xp-border); }
41
+ .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; }
42
+ .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; }
43
+ .xp-ui-tab:disabled { opacity: .5; cursor: not-allowed; }
44
+ .xp-ui-tabpanel { padding-block: 16px; }
45
+ .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; }
46
+ .xp-ui-status--running, .xp-ui-status--ready { background: var(--xp-success-bg); color: var(--xp-success); border-color: var(--xp-success-border); }
47
+ .xp-ui-status--needs-attention { background: var(--xp-warning-bg); color: var(--xp-warning); border-color: var(--xp-warning-border); }
48
+ .xp-ui-status--decided { background: var(--xp-text); color: var(--xp-surface); border-color: var(--xp-text); }
49
+ .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); }
50
+ .xp-ui-banner p, .xp-ui-empty p { margin: 0; }
51
+ .xp-ui-banner--warning { background: var(--xp-warning-bg); color: var(--xp-warning); border-color: var(--xp-warning-border); }
52
+ .xp-ui-banner--error { background: var(--xp-error-bg); color: var(--xp-error); border-color: var(--xp-error-border); }
53
+ .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; }
54
+ .xp-ui-breadcrumb { color: var(--xp-text-2); font: var(--xp-text-small); }
55
+ .xp-ui-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
56
+ .xp-ui-breadcrumb li { display: flex; gap: 8px; min-width: 0; }
57
+ .xp-ui-breadcrumb a { color: var(--xp-text-2); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--xp-radius-chip); }
58
+ .xp-ui-breadcrumb a:hover { color: var(--xp-text); }
59
+ .xp-ui-breadcrumb [aria-current] { color: var(--xp-text); }
60
+ .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); }
61
+ .xp-ui-dialog h2 { margin: 0 0 16px; font: var(--xp-text-title); }
62
+ .xp-ui-dialog::backdrop { background: var(--xp-overlay); }
63
+ .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); }
64
+ .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); }
65
+ .xp-ui-chips-control--invalid { border-color: var(--xp-error); }
66
+ .xp-ui-chips-control:focus-within { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
67
+ .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%; }
68
+ .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; }
69
+ .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; }
70
+ .xp-ui-chips input:focus { outline: none; }
71
+ .xp-ui-chips button:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
72
+ .xp-ui-chips[aria-disabled='true'] { opacity: .5; }
73
+ .xp-ui-chips[aria-disabled='true'] button { cursor: default; }
74
+ .xp-ui-chips p:not(.xp-ui-error) { margin: 0; color: var(--xp-text-muted); font-size: var(--xp-font-size-small); }
75
+ /* Quiet actions and breadcrumb links stay neutral; only the selected tab takes the text accent. */
76
+ .xp-ui-button-group { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
77
+ @media (prefers-reduced-motion: reduce) {
78
+ .xp-ui-button, .xp-ui-input, .xp-ui-toggle, .xp-ui-toggle::before, .xp-ui-chips-control { transition: none; }
79
+ }
80
+
81
+ .xp-ui-textarea { height: auto; min-height: 96px; padding-block: var(--xp-space-2); resize: vertical; }
82
+ .xp-ui-checkbox-label { display: flex; align-items: baseline; gap: var(--xp-space-2); cursor: pointer; }
83
+ .xp-ui-checkbox { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--xp-accent); }
84
+ .xp-ui-checkbox-list { margin: 0; padding: 0; border: 0; }
85
+ .xp-ui-checkbox-list legend { padding: 0; margin-bottom: var(--xp-space-2); font-weight: 500; }
86
+ .xp-ui-range { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0; accent-color: var(--xp-accent); cursor: pointer; }
87
+ .xp-ui-checkbox:disabled, .xp-ui-range:disabled { opacity: .5; cursor: not-allowed; }
88
+ .xp-ui-checkbox:focus-visible, .xp-ui-range:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; }
89
+ .xp-ui-checkbox[aria-invalid='true'], .xp-ui-range[aria-invalid='true'] { outline: 1px solid var(--xp-error); }
90
+
91
+ .xp-ui-field-label { display: flex; align-items: center; justify-content: space-between; gap: var(--xp-space-3); }
92
+ .xp-ui-field-label > label { font-weight: 500; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@delmaredigital/payload-experiments",
3
- "version": "0.2.0-rc.7",
3
+ "version": "0.3.0-rc.1",
4
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",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -1,11 +0,0 @@
1
- .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); }
2
- .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); }
3
- .xp-chips-control:focus-within { outline: 2px solid var(--xp-text); outline-offset: 2px; }
4
- .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%; }
5
- .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; }
6
- .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; }
7
- .xp-chips input:focus { outline: none; }
8
- .xp-chips button:focus-visible { outline: 2px solid var(--xp-text); outline-offset: 2px; }
9
- .xp-chips[aria-disabled='true'] { opacity: .5; }
10
- .xp-chips[aria-disabled='true'] button { cursor: default; }
11
- .xp-chips p { margin: 0; color: var(--xp-text-muted); font-size: var(--xp-font-size-small); }
@@ -1,8 +0,0 @@
1
- import type { ArmRow } from './results.model.js';
2
- export interface ArmTableProps {
3
- rows: ArmRow[];
4
- caption: string;
5
- method: 'sequential' | 'bayesian';
6
- metricKind: 'binomial' | 'count' | 'revenue';
7
- }
8
- export declare function ArmTable({ rows, caption, method, metricKind }: ArmTableProps): import("react").JSX.Element;
@@ -1,113 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { theme } from '../theme.js';
4
- import { RESULTS_COPY } from '../copy/results.js';
5
- import { CappedCell } from './CappedCell.js';
6
- export function ArmTable({ rows, caption, method, metricKind }) {
7
- const sequential = method === 'sequential';
8
- const showAdjustedCI = sequential && rows.some((row)=>row.comparison?.method === 'sequential' && row.comparison.adjustedCI !== undefined);
9
- const showAdjustedPValue = sequential && rows.some((row)=>row.comparison?.method === 'sequential' && row.comparison.pValueAdjusted !== undefined);
10
- const columns = 4 + Number(showAdjustedCI) + Number(showAdjustedPValue);
11
- return /*#__PURE__*/ _jsx("div", {
12
- className: "xp-arm-table",
13
- style: {
14
- color: theme.color.text,
15
- overflowX: 'auto'
16
- },
17
- children: /*#__PURE__*/ _jsxs("table", {
18
- children: [
19
- /*#__PURE__*/ _jsx("caption", {
20
- children: caption
21
- }),
22
- /*#__PURE__*/ _jsx("thead", {
23
- children: /*#__PURE__*/ _jsxs("tr", {
24
- children: [
25
- /*#__PURE__*/ _jsx("th", {
26
- scope: "col",
27
- children: RESULTS_COPY.group
28
- }),
29
- /*#__PURE__*/ _jsx("th", {
30
- scope: "col",
31
- children: RESULTS_COPY.people
32
- }),
33
- /*#__PURE__*/ _jsx("th", {
34
- scope: "col",
35
- children: metricKind === 'binomial' ? RESULTS_COPY.conversions : RESULTS_COPY.mean
36
- }),
37
- /*#__PURE__*/ _jsx("th", {
38
- scope: "col",
39
- children: sequential ? RESULTS_COPY.lift : RESULTS_COPY.chanceToWin
40
- }),
41
- /*#__PURE__*/ _jsx("th", {
42
- scope: "col",
43
- children: RESULTS_COPY.ci
44
- }),
45
- showAdjustedCI ? /*#__PURE__*/ _jsx("th", {
46
- scope: "col",
47
- children: RESULTS_COPY.adjustedCI
48
- }) : null,
49
- /*#__PURE__*/ _jsx("th", {
50
- scope: "col",
51
- children: sequential ? RESULTS_COPY.pValue : RESULTS_COPY.risk
52
- }),
53
- showAdjustedPValue ? /*#__PURE__*/ _jsx("th", {
54
- scope: "col",
55
- children: RESULTS_COPY.adjustedPValue
56
- }) : null,
57
- /*#__PURE__*/ _jsx("th", {
58
- scope: "col",
59
- children: RESULTS_COPY.comparison
60
- })
61
- ]
62
- })
63
- }),
64
- /*#__PURE__*/ _jsx("tbody", {
65
- children: rows.map((row)=>/*#__PURE__*/ _jsxs("tr", {
66
- children: [
67
- /*#__PURE__*/ _jsx("th", {
68
- scope: "row",
69
- children: row.label
70
- }),
71
- /*#__PURE__*/ _jsx("td", {
72
- children: row.n
73
- }),
74
- /*#__PURE__*/ _jsx("td", {
75
- children: metricKind === 'revenue' ? /*#__PURE__*/ _jsx(CappedCell, {
76
- model: row.capped
77
- }) : row.value
78
- }),
79
- row.baseline ? /*#__PURE__*/ _jsx("td", {
80
- colSpan: columns,
81
- children: row.baseline
82
- }) : /*#__PURE__*/ _jsxs(_Fragment, {
83
- children: [
84
- /*#__PURE__*/ _jsx("td", {
85
- children: row.comparison?.method === 'sequential' ? row.comparison.lift : row.comparison?.chanceToWin ?? '—'
86
- }),
87
- /*#__PURE__*/ _jsx("td", {
88
- children: row.comparison?.ci ?? '—'
89
- }),
90
- showAdjustedCI ? /*#__PURE__*/ _jsx("td", {
91
- children: row.comparison?.method === 'sequential' ? row.comparison.adjustedCI ?? '—' : '—'
92
- }) : null,
93
- /*#__PURE__*/ _jsx("td", {
94
- children: row.comparison?.method === 'sequential' ? row.comparison.pValue : row.comparison?.risk ?? '—'
95
- }),
96
- showAdjustedPValue ? /*#__PURE__*/ _jsx("td", {
97
- children: row.comparison?.method === 'sequential' ? row.comparison.pValueAdjusted ?? '—' : '—'
98
- }) : null,
99
- /*#__PURE__*/ _jsx("td", {
100
- children: row.comparison ? /*#__PURE__*/ _jsx("span", {
101
- className: "xp-chip",
102
- children: row.comparison.significance
103
- }) : '—'
104
- })
105
- ]
106
- })
107
- ]
108
- }, row.key))
109
- })
110
- ]
111
- })
112
- });
113
- }
@@ -1,9 +0,0 @@
1
- import type { VerdictCardModel, guardrailChips } from './results.model.js';
2
- export interface VerdictCardProps {
3
- model: VerdictCardModel;
4
- guardrails?: ReturnType<typeof guardrailChips>;
5
- power?: string | null;
6
- collecting?: string | null;
7
- sinceShipping?: string | null;
8
- }
9
- export declare function VerdictCard({ model, guardrails, power, collecting, sinceShipping }: VerdictCardProps): import("react").JSX.Element;
@@ -1,5 +0,0 @@
1
- export declare function GoalsBreadcrumb({ adminRoute, name, returnQuery }: {
2
- adminRoute: string;
3
- name?: string;
4
- returnQuery?: string;
5
- }): import("react").JSX.Element;
@@ -1,47 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { Link } from '@payloadcms/ui';
4
- import { formatAdminURL } from 'payload/shared';
5
- import { GOALS_COPY as C } from '../../copy/goals.js';
6
- import { SURFACE_COPY } from '../../copy/surface.js';
7
- export function GoalsBreadcrumb({ adminRoute, name, returnQuery = '' }) {
8
- return /*#__PURE__*/ _jsxs("nav", {
9
- className: "xp-goals-breadcrumb",
10
- "aria-label": C.breadcrumb,
11
- children: [
12
- /*#__PURE__*/ _jsx(Link, {
13
- href: formatAdminURL({
14
- adminRoute,
15
- path: '/experiments'
16
- }),
17
- children: SURFACE_COPY.title
18
- }),
19
- /*#__PURE__*/ _jsx("span", {
20
- "aria-hidden": "true",
21
- children: "›"
22
- }),
23
- name ? /*#__PURE__*/ _jsxs(_Fragment, {
24
- children: [
25
- /*#__PURE__*/ _jsx(Link, {
26
- href: formatAdminURL({
27
- adminRoute,
28
- path: `/experiments/goals${returnQuery}`
29
- }),
30
- children: C.title
31
- }),
32
- /*#__PURE__*/ _jsx("span", {
33
- "aria-hidden": "true",
34
- children: "›"
35
- }),
36
- /*#__PURE__*/ _jsx("span", {
37
- "aria-current": "page",
38
- children: name
39
- })
40
- ]
41
- }) : /*#__PURE__*/ _jsx("span", {
42
- "aria-current": "page",
43
- children: C.title
44
- })
45
- ]
46
- });
47
- }
@@ -1,4 +0,0 @@
1
- import type { SectionProps } from '../contracts.js';
2
- export declare function TestHeader({ test, surface, resultsVersion, view }: SectionProps & {
3
- view?: 'setup' | 'results';
4
- }): import("react").JSX.Element | null;
@@ -1,70 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { formatAdminURL } from 'payload/shared';
4
- import { SURFACE_COPY } from '../../copy/surface.js';
5
- import { readinessParts } from '../readiness/parts.js';
6
- import { statusPill } from '../../status.model.js';
7
- import { TEST_PAGE as C } from '../../copy/testPage.js';
8
- import { FieldErrors, reasonFor, save, TextEdit } from './fields.js';
9
- export function TestHeader({ test, surface, resultsVersion, view = 'setup' }) {
10
- const doc = test.doc;
11
- if (!doc) return null;
12
- const pill = statusPill({
13
- status: doc.status,
14
- arms: doc.arms,
15
- decision: doc.decision
16
- });
17
- return /*#__PURE__*/ _jsxs("header", {
18
- className: "xp-test-header",
19
- children: [
20
- /*#__PURE__*/ _jsx(TextEdit, {
21
- label: C.name,
22
- value: doc.name,
23
- reason: reasonFor(test, 'name'),
24
- onCommit: (value)=>save(test, 'name', ()=>({
25
- name: value
26
- }))
27
- }),
28
- /*#__PURE__*/ _jsx(FieldErrors, {
29
- test: test,
30
- path: "name"
31
- }),
32
- /*#__PURE__*/ _jsxs("div", {
33
- className: "xp-header-meta",
34
- children: [
35
- /*#__PURE__*/ _jsx("span", {
36
- className: "xp-kind-chip",
37
- children: C.kinds[doc.kind]
38
- }),
39
- /*#__PURE__*/ _jsx("span", {
40
- className: `xp-status-pill xp-status-pill--${pill.tone}`,
41
- title: pill.tooltip,
42
- children: pill.label
43
- }),
44
- /*#__PURE__*/ _jsx(readinessParts.SaveStatus, {
45
- test: test
46
- }),
47
- view === 'results' ? /*#__PURE__*/ _jsx("a", {
48
- href: formatAdminURL({
49
- adminRoute: surface.adminRoute,
50
- path: `/experiments/${encodeURIComponent(String(doc.id))}`
51
- }),
52
- children: SURFACE_COPY.backToSetup
53
- }) : surface.canReadResults && [
54
- 'running',
55
- 'stopped',
56
- 'decided'
57
- ].includes(doc.status) ? /*#__PURE__*/ _jsx("a", {
58
- href: `${surface.adminRoute}/experiments/${encodeURIComponent(String(doc.id))}/results`,
59
- children: C.results
60
- }) : null
61
- ]
62
- }),
63
- /*#__PURE__*/ _jsx(readinessParts.Banner, {
64
- test: test,
65
- surface: surface,
66
- resultsVersion: resultsVersion
67
- })
68
- ]
69
- });
70
- }