@uniformdev/context-devtools 14.2.1-alpha.249 → 15.0.0

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 (4) hide show
  1. package/dist/esm/index.js +1637 -111
  2. package/dist/index.d.ts +11 -10
  3. package/dist/index.js +1668 -111
  4. package/package.json +5 -3
package/dist/esm/index.js CHANGED
@@ -1,4 +1,50 @@
1
- import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}from"@emotion/react";import{createContext as nt,useContext as it}from"react";var Ce=nt({settings:{},saveSettings:()=>null}),we=()=>it(Ce),xe=({children:t,settings:n,saveSettings:r})=>e(Ce.Provider,{value:{settings:n,saveSettings:r}},t);var at=({route:t,children:n,className:r})=>{let{settings:o,saveSettings:i}=we();return e("a",{href:"",className:r,onClick:a=>{a.preventDefault(),i({...o,route:t})}},n)},I=at;var st=[{title:"Dimensions",href:"/dimensions",icon:`<svg
1
+ // ../../scripts/emotion-jsx-shim.js
2
+ import { jsx } from "@emotion/react";
3
+ import * as React from "react";
4
+
5
+ // src/components/Navigation/Menu.tsx
6
+ import { css } from "@emotion/react";
7
+
8
+ // src/lib/DevToolsSettingsContext.tsx
9
+ import { createContext, useContext } from "react";
10
+ var DevToolsSettingsContext = createContext({
11
+ settings: {},
12
+ saveSettings: () => null
13
+ });
14
+ var useDevToolsSettingsContext = () => useContext(DevToolsSettingsContext);
15
+ var DevToolsSettingsContextProvider = ({
16
+ children,
17
+ settings,
18
+ saveSettings
19
+ }) => {
20
+ return /* @__PURE__ */ jsx(DevToolsSettingsContext.Provider, {
21
+ value: {
22
+ settings,
23
+ saveSettings
24
+ }
25
+ }, children);
26
+ };
27
+
28
+ // src/components/Navigation/NavigationLink.tsx
29
+ var NavigationLink = ({ route, children, className }) => {
30
+ const { settings, saveSettings } = useDevToolsSettingsContext();
31
+ return /* @__PURE__ */ jsx("a", {
32
+ href: "",
33
+ className,
34
+ onClick: (e) => {
35
+ e.preventDefault();
36
+ saveSettings({ ...settings, route });
37
+ }
38
+ }, children);
39
+ };
40
+ var NavigationLink_default = NavigationLink;
41
+
42
+ // src/components/Navigation/Menu.tsx
43
+ var links = [
44
+ {
45
+ title: "Dimensions",
46
+ href: "/dimensions",
47
+ icon: `<svg
2
48
  width="24"
3
49
  height="24"
4
50
  viewBox="0 0 24 24"
@@ -15,10 +61,20 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
15
61
  fill="currentColor"
16
62
  />
17
63
  </svg>
18
- `},{title:"What if?",href:"/overrides",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
64
+ `
65
+ },
66
+ {
67
+ title: "What if?",
68
+ href: "/overrides",
69
+ icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
19
70
  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5123 7.91666L14.5804 8.4343L13.9179 5.96175L11.3371 10.0021L11.3575 10.0143C11.1348 10.3854 10.8997 10.7125 10.6556 11.0003H18.7603L16.9135 9.15347L18.3277 7.73926L22.5703 11.9819L18.3276 16.2245L16.9134 14.8103L18.7235 13.0003H6.65606C6.89995 13.2879 7.13495 13.6148 7.35749 13.9857L7.33713 13.9979L9.9179 18.0382L10.5804 15.5657L12.5123 16.0833L10.9594 21.8789L5.16384 20.326L5.68147 18.3941L8.20425 19.0701C8.20425 19.0701 6.17064 16.0325 5.21659 14.398C4.70173 13.7544 4.17055 13.4257 3.70352 13.2461C3.10532 13.016 2.54358 13.0011 2.06154 13.0003H2V13.0002V11.0003V11.0002L2.02253 11.0002C2.05059 11.0002 2.07985 11.0002 2.11025 11.0003H6V10.9998C6.49549 10.9998 7.07968 10.9939 7.70352 10.7539C8.17055 10.5743 8.70173 10.2456 9.21659 9.60198C10.1706 7.96745 12.2043 4.92988 12.2043 4.92988L9.68147 5.60586L9.16384 3.67401L14.9594 2.12109L16.5123 7.91666Z" fill="white"/>
20
71
  </svg>
21
- `},{title:"Quirks",href:"/quirks",icon:`<svg
72
+ `
73
+ },
74
+ {
75
+ title: "Quirks",
76
+ href: "/quirks",
77
+ icon: `<svg
22
78
  width="24"
23
79
  height="24"
24
80
  viewBox="0 0 24 24"
@@ -33,61 +89,151 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
33
89
  d="M12 8.5C10.067 8.5 8.5 10.067 8.5 12C8.5 13.933 10.067 15.5 12 15.5C13.933 15.5 15.5 13.933 15.5 12C15.5 10.067 13.933 8.5 12 8.5Z"
34
90
  fill="currentColor"
35
91
  />
36
- </svg>`},{title:"Settings",href:"/settings",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
92
+ </svg>`
93
+ },
94
+ {
95
+ title: "Settings",
96
+ href: "/settings",
97
+ icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
37
98
  <path d="M19.1469 12.716C19.1986 12.2636 19.201 11.8069 19.1539 11.354L21.7429 9.474C21.8681 9.3822 21.9548 9.24723 21.9862 9.0952C22.0176 8.94316 21.9915 8.78489 21.9129 8.651L19.9939 5.399C19.9182 5.26986 19.7985 5.17231 19.6568 5.1242C19.515 5.07608 19.3606 5.08063 19.2219 5.137L16.3599 6.292C15.9237 5.9578 15.4502 5.67525 14.9489 5.45L14.5739 2.545C14.5547 2.39441 14.4813 2.25598 14.3673 2.15566C14.2534 2.05534 14.1068 1.99999 13.9549 2H10.0859C9.93402 1.99997 9.78728 2.05527 9.67317 2.15558C9.55906 2.25588 9.48539 2.39432 9.46595 2.545L9.09395 5.433C8.63957 5.63249 8.20723 5.87882 7.80395 6.168L5.00895 4.954C4.87173 4.89484 4.71787 4.88672 4.57519 4.9311C4.4325 4.97549 4.3104 5.06945 4.23095 5.196L2.22195 8.398C2.1396 8.52998 2.10934 8.68789 2.13707 8.84096C2.1648 8.99403 2.24854 9.1313 2.37195 9.226L4.86795 11.142C4.83172 11.4266 4.81302 11.7131 4.81195 12C4.81195 12.18 4.82095 12.362 4.83795 12.558L2.26495 14.375C2.13766 14.4647 2.04844 14.5987 2.01478 14.7508C1.98112 14.9028 2.00543 15.0619 2.08295 15.197L3.95695 18.474C4.11095 18.742 4.43695 18.857 4.72595 18.746L7.56095 17.644C8.00795 17.997 8.49195 18.294 9.00795 18.53L9.33795 21.396C9.37495 21.709 9.63795 21.946 9.95195 21.95L13.8169 22H13.8249C14.1349 22 14.3989 21.771 14.4439 21.463L14.8549 18.59C15.3703 18.3674 15.8579 18.0855 16.3079 17.75L19.1279 18.93C19.4129 19.05 19.7419 18.944 19.9029 18.679L21.8669 15.452C21.9477 15.319 21.976 15.1608 21.9464 15.0081C21.9168 14.8554 21.8315 14.7192 21.7069 14.626L19.1469 12.716ZM11.9999 15C10.3459 15 8.99995 13.655 8.99995 12C8.99995 10.346 10.3449 9 11.9999 9C13.6539 9 14.9999 10.345 14.9999 12C14.9999 13.654 13.6539 15 11.9999 15Z" fill="white"/>
38
99
  </svg>
39
- `}],ke=({...t})=>{let n=r=>{var i;let o="active";return!((i=t.settings)!=null&&i.route)&&r==="/dimensions"||t.settings.route===r?o:""};return e("nav",{css:P`
100
+ `
101
+ }
102
+ ];
103
+ var Menu = ({ ...props }) => {
104
+ const isActivePath = (href) => {
105
+ var _a;
106
+ const cssName = "active";
107
+ if (!((_a = props.settings) == null ? void 0 : _a.route) && href === "/dimensions") {
108
+ return cssName;
109
+ }
110
+ return props.settings.route === href ? cssName : "";
111
+ };
112
+ return /* @__PURE__ */ jsx("nav", {
113
+ css: css`
40
114
  background: var(--brand-secondary-1);
41
115
  padding: var(--spacing-base);
42
116
  min-width: 200px;
43
- `},e(I,{css:P`
117
+ `
118
+ }, /* @__PURE__ */ jsx(NavigationLink_default, {
119
+ css: css`
44
120
  display: inline-block;
45
121
  margin: 0 var(--spacing-base);
46
- `,route:"/settings"},e("svg",{css:{display:"block"},width:"120",height:"38",viewBox:"0 0 120 38",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{clipPath:"url(#clip0_41_612)"},e("path",{d:"M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",fill:"#83C6E1"}),e("path",{d:"M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",fill:"#438FD5"}),e("path",{d:"M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",fill:"#F4220B"}),e("path",{d:"M64.6069 13.9025H67.8036V25.5528H64.6069V13.9025ZM64.4902 8.5415H67.9181V11.7348H64.4902V8.5415ZM72.5153 10.1025V13.9025H70.3691V16.6272H72.5153V25.5528H75.7119V16.6272H78.2774V13.9025H75.7119V11.2684H78.2774V8.5415H75.2213L72.5153 10.1025ZM83.1059 13.7859L80.3999 15.3469V24.1084L83.1059 25.6694H88.0748L90.7808 24.1084V15.3469L88.0748 13.7859H83.1059ZM87.5842 22.9425H83.5943V16.5106H87.5842V22.9425ZM97.4723 14.8611L95.8103 13.9025H94.2779V25.5528H97.4745V16.6272H101.486V13.9025H99.1344L97.4723 14.8611ZM55.713 13.7859L53.8499 14.8611L51.9847 13.7859H50.7289V25.5528H53.9256V16.5106H57.9133V25.5528H61.1099V15.3469L58.4039 13.7859H55.713ZM44.0353 22.9425H40.0454V13.9025H36.851V24.1084L39.557 25.6694H42.3753L44.0309 24.7129L44.0331 24.7151L44.0353 24.7129V24.7151L45.6887 25.6694H47.2297V13.9025H44.0353V22.9425ZM117.51 13.7859H115.271L113.079 15.0425L110.909 13.7859H108.67L107.015 14.7402L105.359 13.7859H103.818V25.5528H107.015V16.5106H110.421V25.5528H113.615V16.5106H117.022V25.5528H120.216V15.3469L117.51 13.7859Z",fill:"white"})),e("defs",null,e("clipPath",{id:"clip0_41_612"},e("rect",{width:"120",height:"38",fill:"white"}))))),e("ul",{css:P`
122
+ `,
123
+ route: "/settings"
124
+ }, /* @__PURE__ */ jsx("svg", {
125
+ css: { display: "block" },
126
+ width: "120",
127
+ height: "38",
128
+ viewBox: "0 0 120 38",
129
+ fill: "none",
130
+ xmlns: "http://www.w3.org/2000/svg"
131
+ }, /* @__PURE__ */ jsx("g", {
132
+ clipPath: "url(#clip0_41_612)"
133
+ }, /* @__PURE__ */ jsx("path", {
134
+ d: "M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",
135
+ fill: "#83C6E1"
136
+ }), /* @__PURE__ */ jsx("path", {
137
+ d: "M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",
138
+ fill: "#438FD5"
139
+ }), /* @__PURE__ */ jsx("path", {
140
+ d: "M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",
141
+ fill: "#F4220B"
142
+ }), /* @__PURE__ */ jsx("path", {
143
+ d: "M64.6069 13.9025H67.8036V25.5528H64.6069V13.9025ZM64.4902 8.5415H67.9181V11.7348H64.4902V8.5415ZM72.5153 10.1025V13.9025H70.3691V16.6272H72.5153V25.5528H75.7119V16.6272H78.2774V13.9025H75.7119V11.2684H78.2774V8.5415H75.2213L72.5153 10.1025ZM83.1059 13.7859L80.3999 15.3469V24.1084L83.1059 25.6694H88.0748L90.7808 24.1084V15.3469L88.0748 13.7859H83.1059ZM87.5842 22.9425H83.5943V16.5106H87.5842V22.9425ZM97.4723 14.8611L95.8103 13.9025H94.2779V25.5528H97.4745V16.6272H101.486V13.9025H99.1344L97.4723 14.8611ZM55.713 13.7859L53.8499 14.8611L51.9847 13.7859H50.7289V25.5528H53.9256V16.5106H57.9133V25.5528H61.1099V15.3469L58.4039 13.7859H55.713ZM44.0353 22.9425H40.0454V13.9025H36.851V24.1084L39.557 25.6694H42.3753L44.0309 24.7129L44.0331 24.7151L44.0353 24.7129V24.7151L45.6887 25.6694H47.2297V13.9025H44.0353V22.9425ZM117.51 13.7859H115.271L113.079 15.0425L110.909 13.7859H108.67L107.015 14.7402L105.359 13.7859H103.818V25.5528H107.015V16.5106H110.421V25.5528H113.615V16.5106H117.022V25.5528H120.216V15.3469L117.51 13.7859Z",
144
+ fill: "white"
145
+ })), /* @__PURE__ */ jsx("defs", null, /* @__PURE__ */ jsx("clipPath", {
146
+ id: "clip0_41_612"
147
+ }, /* @__PURE__ */ jsx("rect", {
148
+ width: "120",
149
+ height: "38",
150
+ fill: "white"
151
+ }))))), /* @__PURE__ */ jsx("ul", {
152
+ css: css`
47
153
  display: flex;
48
154
  flex-flow: column nowrap;
49
155
  padding: 0;
50
156
  margin: 0;
51
157
  list-style-type: none;
52
158
  height: calc(100% - var(--spacing-base) * 2.5);
53
- `},st.map((r,o)=>e("li",{css:P`
54
- padding: 0;
55
- margin: 0;
56
- list-style-type: none;
57
-
58
- &:last-of-type {
59
- margin-top: auto;
60
- }
61
- `,key:o},e(I,{css:P`
62
- align-items: center;
63
- border-radius: var(--rounded-base);
64
- display: flex;
65
- color: var(--white);
66
- gap: var(--spacing-sm);
67
- padding: var(--spacing-sm) var(--spacing-base);
68
- text-decoration: none;
69
- transition: background-color 0.25s ease-in-out;
70
-
71
- &:hover,
72
- &.active {
73
- background: var(--gray-700);
159
+ `
160
+ }, links.map((item, index) => {
161
+ var _a, _b, _c, _d;
162
+ let overrideCount = 0;
163
+ if (item.href === "/overrides" && Object.keys((_a = props.settings.scoreOverrides) != null ? _a : {}).length > 0) {
164
+ overrideCount = Object.keys((_b = props.settings.scoreOverrides) != null ? _b : {}).length;
165
+ }
166
+ if (item.href === "/quirks" && Object.keys((_c = props.settings.quirkOverrides) != null ? _c : {}).length > 0) {
167
+ overrideCount = Object.keys((_d = props.settings.quirkOverrides) != null ? _d : {}).length;
168
+ }
169
+ return /* @__PURE__ */ jsx("li", {
170
+ css: css`
171
+ padding: 0;
172
+ margin: 0;
173
+ list-style-type: none;
174
+
175
+ &:last-of-type {
176
+ margin-top: auto;
74
177
  }
75
- `,className:n(r.href),route:r.href},e("i",{css:P`
178
+ `,
179
+ key: index
180
+ }, /* @__PURE__ */ jsx(NavigationLink_default, {
181
+ css: css`
76
182
  align-items: center;
183
+ border-radius: var(--rounded-base);
77
184
  display: flex;
78
- `,dangerouslySetInnerHTML:{__html:r.icon}}),r.title,r.href==="/overrides"&&Object.keys(t.overrides.scores).length>0&&e("span",{css:P`
79
- font-size: var(--font-xxs);
80
- display: inline-block;
81
- width: 12px;
82
- height: 12px;
83
- border-radius: 6px;
84
- background-color: var(--red-tooltip);
85
- text-align: center;
86
- `},Object.keys(t.overrides.scores).length))))))};var Le=()=>e("article",null,e("h1",null,"Something when wrong"),e("p",null,"We could not find the page you're looking for."));import*as te from"react";import{css as H}from"@emotion/react";import*as K from"react";var Te=H({willChange:"height"}),ct=H`
185
+ color: var(--white);
186
+ gap: var(--spacing-sm);
187
+ padding: var(--spacing-sm) var(--spacing-base);
188
+ text-decoration: none;
189
+ transition: background-color 0.25s ease-in-out;
190
+
191
+ &:hover,
192
+ &.active {
193
+ background: var(--gray-700);
194
+ }
195
+ `,
196
+ className: isActivePath(item.href),
197
+ route: item.href
198
+ }, /* @__PURE__ */ jsx("i", {
199
+ css: css`
200
+ align-items: center;
201
+ display: flex;
202
+ `,
203
+ dangerouslySetInnerHTML: { __html: item.icon }
204
+ }), item.title, overrideCount ? /* @__PURE__ */ jsx("span", {
205
+ css: css`
206
+ font-size: var(--font-xxs);
207
+ display: inline-block;
208
+ width: 12px;
209
+ height: 12px;
210
+ border-radius: 6px;
211
+ background-color: var(--red-tooltip);
212
+ text-align: center;
213
+ line-height: 12px;
214
+ `
215
+ }, overrideCount) : null));
216
+ })));
217
+ };
218
+
219
+ // src/components/StatusPages/NotFound.tsx
220
+ var NotFound = () => {
221
+ return /* @__PURE__ */ jsx("article", null, /* @__PURE__ */ jsx("h1", null, "Something when wrong"), /* @__PURE__ */ jsx("p", null, "We could not find the page you're looking for."));
222
+ };
223
+
224
+ // src/components/Personalization/Dimensions.tsx
225
+ import * as React4 from "react";
226
+
227
+ // src/components/Accordion/Accordion.tsx
228
+ import { css as css2 } from "@emotion/react";
229
+ import * as React2 from "react";
230
+ var willChange = css2({ willChange: "height" });
231
+ var titleStyle = css2`
87
232
  border-bottom: 2px solid var(--brand-secondary-1);
88
233
  font-size: var(--font-base);
89
234
  margin: 0;
90
- `,lt=H`
235
+ `;
236
+ var btnStyle = css2`
91
237
  align-items: center;
92
238
  border: none;
93
239
  background: none;
@@ -97,13 +243,59 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
97
243
  padding: var(--spacing-sm) 0;
98
244
  font-weight: var(--font-bold);
99
245
  justify-content: space-between;
100
- `,dt=H`
246
+ `;
247
+ var iconStyle = css2`
101
248
  align-self: center;
102
- `,pt=H`
249
+ `;
250
+ var iconActiveStyle = css2`
103
251
  transform: rotate(-180deg);
104
- `,A=({children:t})=>e("div",{css:[Te]},t),z=({title:t,children:n})=>{let[r,o]=K.useState(!1),i=t.split(" ").join("-").toLocaleLowerCase();return e(K.Fragment,null,e("h3",{css:ct},e("button",{"aria-expanded":r,css:lt,title:t,id:i,"aria-controls":`${i}-section`,onClick:()=>o(a=>!a),type:"button"},t,e("i",{css:[dt,r?pt:void 0]},e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"}))))),e("div",{id:`${i}-section`,css:[Te,H`
252
+ `;
253
+ var Accordion = ({ children }) => {
254
+ return /* @__PURE__ */ jsx("div", {
255
+ css: [willChange]
256
+ }, children);
257
+ };
258
+ var AccordionItem = ({ title, children }) => {
259
+ const [visibility, setVisibility] = React2.useState(false);
260
+ const id = title.split(" ").join("-").toLocaleLowerCase();
261
+ return /* @__PURE__ */ jsx(React2.Fragment, null, /* @__PURE__ */ jsx("h3", {
262
+ css: titleStyle
263
+ }, /* @__PURE__ */ jsx("button", {
264
+ "aria-expanded": visibility,
265
+ css: btnStyle,
266
+ title,
267
+ id,
268
+ "aria-controls": `${id}-section`,
269
+ onClick: () => setVisibility((prev) => !prev),
270
+ type: "button"
271
+ }, title, /* @__PURE__ */ jsx("i", {
272
+ css: [iconStyle, visibility ? iconActiveStyle : void 0]
273
+ }, /* @__PURE__ */ jsx("svg", {
274
+ width: "24",
275
+ height: "24",
276
+ viewBox: "0 0 24 24",
277
+ fill: "none",
278
+ xmlns: "http://www.w3.org/2000/svg"
279
+ }, /* @__PURE__ */ jsx("path", {
280
+ d: "M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",
281
+ fill: "currentColor"
282
+ }))))), /* @__PURE__ */ jsx("div", {
283
+ id: `${id}-section`,
284
+ css: [
285
+ willChange,
286
+ css2`
105
287
  padding: var(--spacing-sm) 0;
106
- `],role:"region","aria-labelledby":i},r?n:null))};import{css as R}from"@emotion/react";import*as De from"react";var mt=R`
288
+ `
289
+ ],
290
+ role: "region",
291
+ "aria-labelledby": id
292
+ }, visibility ? children : null));
293
+ };
294
+
295
+ // src/components/Buttons/Button.tsx
296
+ import { css as css3 } from "@emotion/react";
297
+ import * as React3 from "react";
298
+ var buttonStyle = css3`
107
299
  align-items: center;
108
300
  border: 1px solid transparent;
109
301
  cursor: pointer;
@@ -114,29 +306,55 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
114
306
  &:hover {
115
307
  opacity: 0.8;
116
308
  }
117
- `;function ut(t){let n=R`
309
+ `;
310
+ function buttonVariant(variant) {
311
+ const white = css3`
118
312
  color: var(--white);
119
- `,r=R`
313
+ `;
314
+ const bold = css3`
120
315
  font-weight: var(--font-bold);
121
- `;switch(t){case"primary":return R`
316
+ `;
317
+ switch (variant) {
318
+ case "primary":
319
+ return css3`
122
320
  background: var(--brand-secondary-1);
123
- ${n}
124
- ${r}
125
- `;case"secondary":return R`
321
+ ${white}
322
+ ${bold}
323
+ `;
324
+ case "secondary":
325
+ return css3`
126
326
  background: var(--brand-secondary-5);
127
- ${n}
128
- ${r}
129
- `;case"unimportant":return R`
327
+ ${white}
328
+ ${bold}
329
+ `;
330
+ case "unimportant":
331
+ return css3`
130
332
  background: var(--brand-secondary-3);
131
333
  color: var(--brand-secondary-1);
132
- ${r}
133
- `;case"ghost":return R`
334
+ ${bold}
335
+ `;
336
+ case "ghost":
337
+ return css3`
134
338
  background: transparent;
135
339
  color: var(--brand-secondary-5);
136
340
  &:hover {
137
341
  border: 1px solid var(--brand-secondary-5);
138
342
  }
139
- `}}var w=({buttonType:t="primary",children:n,className:r,...o})=>e(De.Fragment,null,e("button",{type:"button",css:[mt,ut(t)],className:r,...o},n));import{css as E}from"@emotion/react";var W=E`
343
+ `;
344
+ }
345
+ }
346
+ var Button = ({ buttonType = "primary", children, className, ...props }) => {
347
+ return /* @__PURE__ */ jsx(React3.Fragment, null, /* @__PURE__ */ jsx("button", {
348
+ type: "button",
349
+ css: [buttonStyle, buttonVariant(buttonType)],
350
+ className,
351
+ ...props
352
+ }, children));
353
+ };
354
+
355
+ // src/components/CallToAction/cta.styles.ts
356
+ import { css as css4 } from "@emotion/react";
357
+ var cta = css4`
140
358
  background-color: var(--gray-100);
141
359
  padding: var(--spacing-base) var(--spacing-md);
142
360
  margin: var(--spacing-base) 0;
@@ -144,21 +362,25 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
144
362
  &:first-of-type {
145
363
  margin: 0 0 var(--spacing-base);
146
364
  }
147
- `,Se=E`
365
+ `;
366
+ var ctaWithIcon = css4`
148
367
  background: var(--gray-100)
149
368
  url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 2C8.44771 2 8 2.44772 8 3V5C8 5.55228 8.44771 6 9 6C9.55229 6 10 5.55228 10 5V3C10 2.44772 9.55229 2 9 2ZM8 9H16V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V9ZM13 16.917C15.8377 16.441 18 13.973 18 11V7H6V11C6 13.973 8.16229 16.441 11 16.917V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V16.917ZM14 3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6C14.4477 6 14 5.55228 14 5V3Z' fill='%232ecdb4' /%3E%3C/svg%3E")
150
369
  no-repeat var(--spacing-sm) var(--spacing-base);
151
370
  padding: var(--spacing-base) var(--spacing-xl);
152
- `,q=E`
371
+ `;
372
+ var ctaTitle = css4`
153
373
  color: var(--brand-secondary-1);
154
374
  margin: 0;
155
375
  font-size: var(--font-base);
156
376
  font-weight: var(--font-bold);
157
- `,Y=E`
377
+ `;
378
+ var ctaText = css4`
158
379
  color: var(--brand-secondary-1);
159
380
  margin: var(--spacing-xs) 0 0;
160
381
  font-size: var(--font-sm);
161
- `,Ie=E`
382
+ `;
383
+ var ctaClose = css4`
162
384
  align-items: center;
163
385
  border: none;
164
386
  background: transparent
@@ -178,22 +400,43 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
178
400
  &:hover {
179
401
  opacity: 0.6;
180
402
  }
181
- `,X=E`
403
+ `;
404
+ var ctaBtnGroup = css4`
182
405
  display: flex;
183
406
  margin: var(--spacing-sm) 0 0;
184
407
  gap: var(--spacing-base);
185
- `;var B=({title:t,text:n,buttonGroup:r,children:o})=>e("div",{css:W},e("h2",{css:q},t),e("p",{css:Y},n),o,r?e("div",{css:X},r):null);import{css as Q}from"@emotion/react";var le=Q`
408
+ `;
409
+
410
+ // src/components/CallToAction/NoActiveDimensions.tsx
411
+ var NoActiveDimensions = ({ title, text, buttonGroup, children }) => {
412
+ return /* @__PURE__ */ jsx("div", {
413
+ css: cta
414
+ }, /* @__PURE__ */ jsx("h2", {
415
+ css: ctaTitle
416
+ }, title), /* @__PURE__ */ jsx("p", {
417
+ css: ctaText
418
+ }, text), children, buttonGroup ? /* @__PURE__ */ jsx("div", {
419
+ css: ctaBtnGroup
420
+ }, buttonGroup) : null);
421
+ };
422
+
423
+ // src/components/Inputs/input-switch.styles.ts
424
+ import { css as css5 } from "@emotion/react";
425
+ var inputSwitch = css5`
186
426
  align-items: center;
187
427
  cursor: pointer;
188
428
  display: flex;
189
429
  gap: var(--spacing-xs);
190
430
  margin-top: var(--spacing-base);
191
- `,de=Q`
431
+ `;
432
+ var inputSwitchLabel = css5`
192
433
  color: var(--gray-500);
193
434
  font-size: var(--font-sm);
194
- `,Io=Q`
435
+ `;
436
+ var inputSwitchControl = css5`
195
437
  background: var(--gray-600);
196
- `,pe=Q`
438
+ `;
439
+ var inputSwitchBtn = css5`
197
440
  display: block;
198
441
  background: var(--gray-400);
199
442
  border-radius: var(--rounded-full);
@@ -214,7 +457,8 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
214
457
  transform: translateX(2px);
215
458
  transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
216
459
  }
217
- `,me=Q`
460
+ `;
461
+ var inputSwitchCheckbox = css5`
218
462
  overflow: hidden;
219
463
  clip: rect(0, 0, 0, 0);
220
464
  height: 0;
@@ -228,21 +472,60 @@ import{jsx as e}from"@emotion/react";import*as v from"react";import{css as P}fro
228
472
  &:checked ~ span {
229
473
  background: var(--brand-secondary-5);
230
474
  }
231
- `;var Pe=({label:t,...n})=>e("label",{css:le},e("span",{css:de},t),e("input",{type:"checkbox",css:me,...n}),e("span",{css:pe})),ue=({field:t,form:n,meta:r,...o})=>{let{label:i}=o;return e("label",{css:le},e("span",{css:de},i),e("input",{type:"checkbox",css:me,checked:t.value,...t}),e("span",{css:pe}))};import{css as S,keyframes as gt}from"@emotion/react";var ft=gt`from {
475
+ `;
476
+
477
+ // src/components/Inputs/SwitchInput.tsx
478
+ var SwitchInput = ({ label, ...props }) => {
479
+ return /* @__PURE__ */ jsx("label", {
480
+ css: inputSwitch
481
+ }, /* @__PURE__ */ jsx("span", {
482
+ css: inputSwitchLabel
483
+ }, label), /* @__PURE__ */ jsx("input", {
484
+ type: "checkbox",
485
+ css: inputSwitchCheckbox,
486
+ ...props
487
+ }), /* @__PURE__ */ jsx("span", {
488
+ css: inputSwitchBtn
489
+ }));
490
+ };
491
+ var FormikSwitchInput = ({ field, form, meta, ...rawProps }) => {
492
+ const { label } = rawProps;
493
+ return /* @__PURE__ */ jsx("label", {
494
+ css: inputSwitch
495
+ }, /* @__PURE__ */ jsx("span", {
496
+ css: inputSwitchLabel
497
+ }, label), /* @__PURE__ */ jsx("input", {
498
+ type: "checkbox",
499
+ css: inputSwitchCheckbox,
500
+ checked: field.value,
501
+ ...field
502
+ }), /* @__PURE__ */ jsx("span", {
503
+ css: inputSwitchBtn
504
+ }));
505
+ };
506
+
507
+ // src/components/Personalization/page.styles.ts
508
+ import { css as css6, keyframes } from "@emotion/react";
509
+ var popIn = keyframes`from {
232
510
  transform: scale(1);
233
511
  }
234
512
  to {
235
513
  transform: scale(1.2);
236
514
  }
237
- `,h={page:S`
515
+ `;
516
+ var styles = {
517
+ page: css6`
238
518
  color: var(--brand-secondary-1);
239
- `,text:S`
519
+ `,
520
+ text: css6`
240
521
  margin: var(--spacing-sm) 0;
241
- `,reset:S`
522
+ `,
523
+ reset: css6`
242
524
  margin: 0 var(--spacing-md);
243
525
  font-size: var(--font-sm);
244
526
  color: var(--gray-500);
245
- `,title:S`
527
+ `,
528
+ title: css6`
246
529
  margin: 0 0 var(--spacing-sm);
247
530
  font-size: var(--font-md);
248
531
  & > small {
@@ -251,12 +534,14 @@ to {
251
534
  font-weight: var(--font-regular);
252
535
  margin: var(--spacing-xxs) 0 0;
253
536
  }
254
- `,headingGroup:S`
537
+ `,
538
+ headingGroup: css6`
255
539
  align-items: baseline;
256
540
  display: flex;
257
541
  justify-content: space-between;
258
542
  align-items: center;
259
- `,divider:S`
543
+ `,
544
+ divider: css6`
260
545
  background: var(--gray-300);
261
546
  display: block;
262
547
  width: 1px;
@@ -264,53 +549,117 @@ to {
264
549
  position: absolute;
265
550
  inset: 0 auto 0 0;
266
551
  margin: auto 0;
267
- `,submitButton:S`
552
+ `,
553
+ submitButton: css6`
268
554
  position: absolute;
269
555
  right: var(--spacing-base);
270
556
  bottom: var(--spacing-base);
271
- animation: 0.5s 2 alternate ${ft};
272
- `,error:S`
557
+ animation: 0.5s 2 alternate ${popIn};
558
+ `,
559
+ cancelButton: css6`
560
+ position: absolute;
561
+ left: calc(200px + var(--spacing-base));
562
+ bottom: var(--spacing-base);
563
+ background: white;
564
+ padding: var(--spacing-sm);
565
+ border: 1px solid var(--gray-300);
566
+ `,
567
+ error: css6`
273
568
  color: var(--brand-secondary-5);
274
569
  font-size: var(--font-sm);
275
- `};import{css as x}from"@emotion/react";var J=({children:t})=>e("table",{css:x`
570
+ `
571
+ };
572
+
573
+ // src/components/Table/Table.tsx
574
+ import { css as css7 } from "@emotion/react";
575
+ var Table = ({ children }) => {
576
+ return /* @__PURE__ */ jsx("table", {
577
+ css: css7`
276
578
  border-collapse: collapse;
277
579
  display: table;
278
580
  width: 100%;
279
581
  font-size: var(--font-sm);
280
- `},t),Re=({children:t})=>e("thead",{css:x`
582
+ `
583
+ }, children);
584
+ };
585
+ var THead = ({ children }) => {
586
+ return /* @__PURE__ */ jsx("thead", {
587
+ css: css7`
281
588
  background: var(--gray-50);
282
589
  text-align: left;
283
590
  & tr {
284
591
  border-bottom: 1px solid var(--gray-200);
285
592
  }
286
- `},t),j=({children:t})=>e("tbody",null,t),U=({border:t,children:n})=>e("tr",{css:t?x`
593
+ `
594
+ }, children);
595
+ };
596
+ var TBody = ({ children }) => {
597
+ return /* @__PURE__ */ jsx("tbody", null, children);
598
+ };
599
+ var TRow = ({ border, children }) => {
600
+ return /* @__PURE__ */ jsx("tr", {
601
+ css: border ? css7`
287
602
  border-bottom: 1px solid var(--gray-200);
288
603
  &:where(:last-child) {
289
604
  border: none;
290
605
  }
291
- `:void 0},n),ge=({children:t})=>e("th",{css:x`
606
+ ` : void 0
607
+ }, children);
608
+ };
609
+ var THeading = ({ children }) => {
610
+ return /* @__PURE__ */ jsx("th", {
611
+ css: css7`
292
612
  outline: none;
293
613
  padding: var(--spacing-sm);
294
- `},t);function bt(t){switch(t){case"light":return x`
614
+ `
615
+ }, children);
616
+ };
617
+ function colour(color) {
618
+ switch (color) {
619
+ case "light":
620
+ return css7`
295
621
  color: var(--gray-400);
296
- `;case"dark":return x`
622
+ `;
623
+ case "dark":
624
+ return css7`
297
625
  color: var(--brand-secondary-1);
298
- `}}function vt(t){return x`
299
- text-align: ${t};
300
- `}var k=({alignment:t="left",border:n,color:r="dark",children:o})=>e("td",{css:[x`
626
+ `;
627
+ }
628
+ }
629
+ function align(alignment) {
630
+ return css7`
631
+ text-align: ${alignment};
632
+ `;
633
+ }
634
+ var TData = ({ alignment = "left", border, color = "dark", children }) => {
635
+ return /* @__PURE__ */ jsx("td", {
636
+ css: [
637
+ css7`
301
638
  padding: var(--spacing-base);
302
639
  max-width: 180px;
303
640
  overflow-wrap: break-word;
304
641
  position: relative;
305
- `,bt(r),vt(t),n?x`
642
+ `,
643
+ colour(color),
644
+ align(alignment),
645
+ border ? css7`
306
646
  border-left: 1px solid var(--gray-200);
307
- `:void 0]},o);import{css as fe}from"@emotion/react";var Me=fe`
647
+ ` : void 0
648
+ ]
649
+ }, children);
650
+ };
651
+
652
+ // src/components/Table/table.styles.ts
653
+ import { css as css8 } from "@emotion/react";
654
+ var scoreTd = css8`
308
655
  position: relative;
309
656
  display: inline-block;
310
657
  font-size: var(--font-base);
311
- `,Ve=fe`
658
+ `;
659
+ var overriddenValue = css8`
312
660
  display: block;
313
- `,He=fe`
661
+ `;
662
+ var isOverriddenTooltip = css8`
314
663
  position: absolute;
315
664
  width: 6px;
316
665
  height: 6px;
@@ -318,26 +667,103 @@ to {
318
667
  top: 9px;
319
668
  background: var(--red-tooltip);
320
669
  border-radius: 3px;
321
- `;import{css as ht}from"@emotion/react";var yt=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
670
+ `;
671
+
672
+ // src/styles/icons.tsx
673
+ import { css as css9 } from "@emotion/react";
674
+ var audienceIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
322
675
  <path d="M4.2 7.2C4.53137 7.2 4.8 6.93137 4.8 6.6C4.8 6.26863 4.53137 6 4.2 6C3.86863 6 3.6 6.26863 3.6 6.6C3.6 6.93137 3.86863 7.2 4.2 7.2Z" fill="#828282"/>
323
676
  <path d="M8.4 6.6C8.4 6.93137 8.13137 7.2 7.8 7.2C7.46863 7.2 7.2 6.93137 7.2 6.6C7.2 6.26863 7.46863 6 7.8 6C8.13137 6 8.4 6.26863 8.4 6.6Z" fill="#828282"/>
324
677
  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 5.49824 10.723 5.01447 10.5802 4.55984C10.0795 4.69533 9.55274 4.76763 9.00913 4.76763C6.77526 4.76763 4.82652 3.54683 3.79366 1.73601C2.25282 2.53492 1.2 4.14451 1.2 6C1.2 8.65097 3.34903 10.8 6 10.8Z" fill="#828282"/>
325
- </svg>`,Ct=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
678
+ </svg>`;
679
+ var enrichmentIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
326
680
  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.59995 5.05775C4.9254 5.05775 5.99992 3.98325 5.99992 2.65778C5.99992 1.33232 4.9254 0.257812 3.59995 0.257812C2.27448 0.257812 1.19998 1.33232 1.19998 2.65778C1.19998 3.98325 2.27448 5.05775 3.59995 5.05775ZM3.59999 3.85777C4.26272 3.85777 4.79997 3.32052 4.79997 2.65778C4.79997 1.99505 4.26272 1.4578 3.59999 1.4578C2.93725 1.4578 2.4 1.99505 2.4 2.65778C2.4 3.32052 2.93725 3.85777 3.59999 3.85777Z" fill="#828282"/>
327
681
  <path d="M5.39993 6.8577C5.73131 6.8577 5.99993 7.12632 5.99993 7.45769V11.0576H7.19991V7.45769C7.19991 6.46356 6.39406 5.65771 5.39993 5.65771H1.79998C0.80588 5.65771 0 6.46356 0 7.45769V11.0576H1.19999V7.45769C1.19999 7.12632 1.46861 6.8577 1.79998 6.8577H5.39993Z" fill="#828282"/>
328
682
  <path d="M11.9999 5.05762H8.3999V6.2576H11.9999V5.05762Z" fill="#828282"/>
329
683
  <path d="M8.3999 7.45752H11.9999V8.6575H8.3999V7.45752Z" fill="#828282"/>
330
684
  <path d="M11.9999 2.65771H8.3999V3.8577H11.9999V2.65771Z" fill="#828282"/>
331
- </svg>`,Ae=`<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
685
+ </svg>`;
686
+ var signalIcon = `<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
332
687
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.113 3.12646C8.16729 3.12646 9.02195 3.98113 9.02195 5.03541C9.02195 5.86658 8.49075 6.57368 7.74932 6.83573V10.1259H6.47669V6.83573C5.73526 6.57368 5.20405 5.86658 5.20405 5.03541C5.20405 3.98113 6.05872 3.12646 7.113 3.12646ZM7.113 4.39909C7.46443 4.39909 7.74932 4.68398 7.74932 5.03541C7.74932 5.38684 7.46443 5.67172 7.113 5.67172C6.76158 5.67172 6.47669 5.38684 6.47669 5.03541C6.47669 4.68398 6.76158 4.39909 7.113 4.39909Z" fill="#828282"/>
333
688
  <path d="M3.96336 1.88578C3.15733 2.69183 2.65879 3.80537 2.65879 5.03535C2.65879 6.42093 3.29145 7.65875 4.28366 8.47569L5.1895 7.56984C4.42501 6.98876 3.93142 6.06969 3.93142 5.03535C3.93142 4.1568 4.28752 3.36142 4.86325 2.78567L3.96336 1.88578Z" fill="#828282"/>
334
689
  <path d="M9.36269 2.7856C9.93846 3.36136 10.2946 4.15676 10.2946 5.03535C10.2946 6.06973 9.80096 6.98882 9.03643 7.5699L9.94228 8.47575C10.9345 7.65881 11.5672 6.42096 11.5672 5.03535C11.5672 3.80533 11.0687 2.69177 10.2626 1.88571L9.36269 2.7856Z" fill="#828282"/>
335
690
  <path d="M0.113525 5.03534C0.113525 3.10251 0.896953 1.35266 2.16359 0.0860049L3.06347 0.985892C2.02714 2.02224 1.38616 3.45394 1.38616 5.03534C1.38616 6.61674 2.02714 8.04844 3.06347 9.08479L2.16358 9.98468C0.89695 8.71802 0.113525 6.96817 0.113525 5.03534Z" fill="#828282"/>
336
691
  <path d="M12.0624 9.98474C13.329 8.71809 14.1125 6.96821 14.1125 5.03534C14.1125 3.10248 13.329 1.3526 12.0624 0.0859375L11.1625 0.985824C12.1988 2.02218 12.8398 3.4539 12.8398 5.03534C12.8398 6.61678 12.1988 8.0485 11.1625 9.08486L12.0624 9.98474Z" fill="#828282"/>
337
- </svg>`,ze=({type:t})=>{let n="";switch(t){case"Audience":n=yt;break;case"Signal":n=Ae;break;case"Intent":n=Ae;break;case"Enrichment":n=Ct;break}return e("i",{css:ht`
692
+ </svg>`;
693
+ var Icon = ({ type }) => {
694
+ let iconHtml = "";
695
+ switch (type) {
696
+ case "Audience":
697
+ iconHtml = audienceIcon;
698
+ break;
699
+ case "Signal":
700
+ iconHtml = signalIcon;
701
+ break;
702
+ case "Intent":
703
+ iconHtml = signalIcon;
704
+ break;
705
+ case "Enrichment":
706
+ iconHtml = enrichmentIcon;
707
+ break;
708
+ }
709
+ return /* @__PURE__ */ jsx("i", {
710
+ css: css9`
338
711
  align-items: center;
339
712
  display: inline-block;
340
- `,dangerouslySetInnerHTML:{__html:n}})};var wt=({dimensionIndex:t,dimensions:n,overrides:r})=>e(J,null,e(j,null,Object.entries(n).map(([o,i])=>{var c;let{dim:a,name:u,type:g,category:s}=(c=t[o])!=null?c:{name:o,dim:o,type:void 0,category:void 0};return e(U,{key:a},e(k,null,r.scores[a]!==void 0&&e("s",{css:Ve},i-r.scores[a]),e("b",{css:Me},i,r.scores[a]!==void 0&&e("i",{css:He}))),e(k,null,e("span",{css:h.divider,role:"presentation"}),e("div",null,e(ze,{type:g})," ",g),e("strong",null,s?`${s}:`:""," ",u)),e(k,{alignment:"right",color:"light"},r.scores[a]!==void 0&&e(I,{route:`/overrides/${a}`},"Edit override")))}))),M=wt;import{css as xt}from"@emotion/react";var kt=xt`
713
+ `,
714
+ dangerouslySetInnerHTML: { __html: iconHtml }
715
+ });
716
+ };
717
+
718
+ // src/components/Table/DimensionsTable.tsx
719
+ var DimensionsTable = ({
720
+ dimensionIndex,
721
+ dimensions,
722
+ disableEditOverride,
723
+ onClick,
724
+ preemptiveOverrides
725
+ }) => {
726
+ var _a;
727
+ const { settings } = useDevToolsSettingsContext();
728
+ const overrides = (_a = preemptiveOverrides != null ? preemptiveOverrides : settings.scoreOverrides) != null ? _a : {};
729
+ return /* @__PURE__ */ jsx(Table, null, /* @__PURE__ */ jsx(TBody, null, Object.entries(dimensions).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => {
730
+ var _a2;
731
+ const { dim, name, type, category } = (_a2 = dimensionIndex[key]) != null ? _a2 : {
732
+ name: key,
733
+ dim: key,
734
+ type: void 0,
735
+ category: void 0
736
+ };
737
+ const override = overrides[dim];
738
+ return /* @__PURE__ */ jsx(TRow, {
739
+ key: dim
740
+ }, /* @__PURE__ */ jsx(TData, null, override !== void 0 ? /* @__PURE__ */ jsx("s", {
741
+ css: overriddenValue
742
+ }, override.initial) : null, /* @__PURE__ */ jsx("b", {
743
+ css: scoreTd
744
+ }, value, override !== void 0 && /* @__PURE__ */ jsx("i", {
745
+ css: isOverriddenTooltip
746
+ }))), /* @__PURE__ */ jsx(TData, null, /* @__PURE__ */ jsx("div", {
747
+ onClick: () => onClick == null ? void 0 : onClick(dim),
748
+ css: onClick ? { cursor: "pointer" } : void 0
749
+ }, /* @__PURE__ */ jsx("span", {
750
+ css: styles.divider,
751
+ role: "presentation"
752
+ }), /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx(Icon, {
753
+ type
754
+ }), " ", type), /* @__PURE__ */ jsx("strong", null, category ? `${category}:` : "", " ", name))), /* @__PURE__ */ jsx(TData, {
755
+ alignment: "right",
756
+ color: "light"
757
+ }, override !== void 0 && !disableEditOverride ? /* @__PURE__ */ jsx(NavigationLink_default, {
758
+ route: `/overrides/${dim}`
759
+ }, "Edit override") : null));
760
+ })));
761
+ };
762
+ var DimensionsTable_default = DimensionsTable;
763
+
764
+ // src/components/Buttons/LinkButton.tsx
765
+ import { css as css10 } from "@emotion/react";
766
+ var btnStyle2 = css10`
341
767
  background: none;
342
768
  border: none;
343
769
  color: var(--brand-secondary-3);
@@ -346,7 +772,122 @@ to {
346
772
  font-weight: var(--font-bold);
347
773
  margin-left: auto;
348
774
  font-size: var(--font-sm);
349
- `,ee=({children:t,...n})=>e("button",{type:"button",css:kt,...n},t);var Ee=({dimensionIndex:{index:t},state:{scores:n,data:r},overrides:o,actions:i})=>{let a=te.useMemo(()=>{let c={};return Object.keys(t).filter(l=>!n[l]).map(l=>{c[t[l].dim]=0}),c},[n,t]),u=Object.keys(n).length,g=u+Object.keys(a).length,s=()=>{i.rawUpdate([{type:"setcontrol",data:!r.controlGroup}])};return e(te.Fragment,null,e("article",{css:h.page},e("div",{css:h.headingGroup},e("h2",{css:h.title},"Dimensions",e("small",null,u," active of ",g)),e("div",{css:h.reset},e(ee,{onClick:()=>i.resetOverrides().then(i.forget)},"clear all dimensions")),e(Pe,{label:"Control Group",onChange:s,checked:r.controlGroup})),u>0?e(M,{dimensionIndex:t,dimensions:n,overrides:o}):e(B,{title:r.controlGroup?"In control group":"No active dimensions",text:r.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have score in any dimensions yet.",buttonGroup:r.controlGroup?e(w,{buttonType:"secondary",onClick:s},"Exit control group"):null}),e(A,null,e(z,{title:`Inactive Dimensions (${Object.keys(a).length})`},e(M,{dimensionIndex:t,dimensions:a,overrides:o})))))};import*as Be from"react";import{css as Lt}from"@emotion/react";function be({onClick:t}){return e("button",{css:Lt`
775
+ `;
776
+ var LinkButton = ({ children, ...props }) => {
777
+ return /* @__PURE__ */ jsx("button", {
778
+ type: "button",
779
+ css: btnStyle2,
780
+ ...props
781
+ }, children);
782
+ };
783
+
784
+ // src/lib/deleteOverride.ts
785
+ async function deleteScoreOverrides({
786
+ actions,
787
+ saveSettings,
788
+ scores,
789
+ settings
790
+ }) {
791
+ var _a, _b;
792
+ const scoreOverrides = (_a = settings.scoreOverrides) != null ? _a : {};
793
+ const newOverrides = { ...scoreOverrides };
794
+ const commands = [];
795
+ for (const dim of Object.keys(scoreOverrides)) {
796
+ const override = scoreOverrides == null ? void 0 : scoreOverrides[dim];
797
+ delete newOverrides[dim];
798
+ commands.push({
799
+ type: "modscoreS",
800
+ data: { dimension: dim, delta: override.initial - ((_b = scores[dim]) != null ? _b : 0) }
801
+ });
802
+ }
803
+ await saveSettings({
804
+ ...settings,
805
+ scoreOverrides: newOverrides
806
+ });
807
+ await actions.rawUpdate(commands);
808
+ }
809
+ async function deleteQuirkOverride({
810
+ quirk: dim,
811
+ settings,
812
+ saveSettings,
813
+ actions
814
+ }) {
815
+ var _a;
816
+ const override = (_a = settings.quirkOverrides) == null ? void 0 : _a[dim];
817
+ if (!override) {
818
+ return;
819
+ }
820
+ const newOverrides = { ...settings.quirkOverrides };
821
+ delete newOverrides[dim];
822
+ await saveSettings({
823
+ ...settings,
824
+ quirkOverrides: newOverrides
825
+ });
826
+ await actions.rawUpdate([{ type: "setquirk", data: { key: dim, value: override.initial } }]);
827
+ }
828
+
829
+ // src/components/Personalization/Dimensions.tsx
830
+ var Dimensions = ({
831
+ dimensionIndex: { index: dimensionIndex },
832
+ state: { scores, data },
833
+ actions,
834
+ saveSettings,
835
+ settings
836
+ }) => {
837
+ const remainingDimensions = React4.useMemo(() => {
838
+ const newRemainingDimensions = {};
839
+ Object.keys(dimensionIndex).filter((dimension) => !scores[dimension]).map((key) => {
840
+ newRemainingDimensions[dimensionIndex[key].dim] = 0;
841
+ });
842
+ return newRemainingDimensions;
843
+ }, [scores, dimensionIndex]);
844
+ const activeDims = Object.keys(scores).length;
845
+ const totalDims = activeDims + Object.keys(remainingDimensions).length;
846
+ const toggleControlGroup = () => {
847
+ actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
848
+ };
849
+ return /* @__PURE__ */ jsx(React4.Fragment, null, /* @__PURE__ */ jsx("article", {
850
+ css: styles.page
851
+ }, /* @__PURE__ */ jsx("div", {
852
+ css: styles.headingGroup
853
+ }, /* @__PURE__ */ jsx("h2", {
854
+ css: styles.title
855
+ }, "Dimensions", /* @__PURE__ */ jsx("small", null, activeDims, " active of ", totalDims)), /* @__PURE__ */ jsx("div", {
856
+ css: styles.reset
857
+ }, /* @__PURE__ */ jsx(LinkButton, {
858
+ onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget)
859
+ }, "clear all dimensions")), /* @__PURE__ */ jsx(SwitchInput, {
860
+ label: "Control Group",
861
+ onChange: toggleControlGroup,
862
+ checked: data.controlGroup
863
+ })), activeDims > 0 ? /* @__PURE__ */ jsx(DimensionsTable_default, {
864
+ dimensionIndex,
865
+ dimensions: scores
866
+ }) : /* @__PURE__ */ jsx(NoActiveDimensions, {
867
+ title: data.controlGroup ? "In control group" : "No active dimensions",
868
+ text: data.controlGroup ? "You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run." : "You do not have score in any dimensions yet.",
869
+ buttonGroup: data.controlGroup ? /* @__PURE__ */ jsx(Button, {
870
+ buttonType: "secondary",
871
+ onClick: toggleControlGroup
872
+ }, "Exit control group") : null
873
+ }), /* @__PURE__ */ jsx(Accordion, null, /* @__PURE__ */ jsx(AccordionItem, {
874
+ title: `Inactive Dimensions (${Object.keys(remainingDimensions).length})`
875
+ }, /* @__PURE__ */ jsx(DimensionsTable_default, {
876
+ dimensionIndex,
877
+ dimensions: remainingDimensions
878
+ })))));
879
+ };
880
+
881
+ // src/components/Personalization/Overrides.tsx
882
+ import * as React5 from "react";
883
+
884
+ // src/components/CallToAction/AddButton.tsx
885
+ import { css as css11 } from "@emotion/react";
886
+ function AddButton({
887
+ onClick
888
+ }) {
889
+ return /* @__PURE__ */ jsx("button", {
890
+ css: css11`
350
891
  width: 3.5rem;
351
892
  height: 3.5rem;
352
893
  display: flex;
@@ -359,7 +900,98 @@ to {
359
900
  svg {
360
901
  color: var(--red-button);
361
902
  }
362
- `,onClick:t,"aria-label":"Add new override",className:"text-secondary shadow-xl rounded-full flex items-center bg-secondary","data-test-id":"add-new-overrides-button"},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"66",height:"66",viewBox:"0 0 66 66"},e("g",{fill:"none",fillRule:"evenodd"},e("circle",{cx:"33",cy:"33",r:"33",fill:"currentColor"}),e("g",{fill:"#FFF",transform:"translate(19 19)"},e("rect",{width:"4",height:"28",x:"12",rx:"2"}),e("path",{d:"M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,26 C16,27.1045695 15.1045695,28 14,28 C12.8954305,28 12,27.1045695 12,26 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z",transform:"rotate(90 14 14)"})))))}var Oe=({dimensionIndex:{index:t},state:{data:n,scores:r},overrides:o,actions:i,settings:a,saveSettings:u})=>{let g=o.scores?Object.keys(o.scores).length:0,s=m=>(m.preventDefault(),u({...a,route:"/overrides/add"})),c=()=>{i.rawUpdate([{type:"setcontrol",data:!n.controlGroup}])},l={};return Object.entries(r).map(([m,f])=>{o.scores[m]!==void 0&&(l[m]=f)}),e(Be.Fragment,null,e("article",{css:h.page},e("div",{css:h.headingGroup},e("h2",{css:h.title},"What if?"),e("div",{css:h.reset},e(ee,{onClick:i.resetOverrides},"delete all overrides")),e(be,{onClick:s})),e("p",null,"Override dimension scores to test personalization"),g>0?e(M,{dimensionIndex:t,dimensions:l,overrides:o}):e(B,{title:n.controlGroup?"In control group":"No overrides",text:n.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have any dimension overrides yet.",buttonGroup:n.controlGroup?e(w,{buttonType:"secondary",onClick:c},"Exit control group"):null})))};import{Field as Mt,Form as Vt,Formik as Ht}from"formik";import*as Z from"yup";import{ErrorMessage as Tt}from"formik";import{css as L}from"@emotion/react";var oe=L`
903
+ `,
904
+ onClick,
905
+ "aria-label": "Add new override",
906
+ className: "text-secondary shadow-xl rounded-full flex items-center bg-secondary",
907
+ "data-test-id": "add-new-overrides-button"
908
+ }, /* @__PURE__ */ jsx("svg", {
909
+ xmlns: "http://www.w3.org/2000/svg",
910
+ width: "66",
911
+ height: "66",
912
+ viewBox: "0 0 66 66"
913
+ }, /* @__PURE__ */ jsx("g", {
914
+ fill: "none",
915
+ fillRule: "evenodd"
916
+ }, /* @__PURE__ */ jsx("circle", {
917
+ cx: "33",
918
+ cy: "33",
919
+ r: "33",
920
+ fill: "currentColor"
921
+ }), /* @__PURE__ */ jsx("g", {
922
+ fill: "#FFF",
923
+ transform: "translate(19 19)"
924
+ }, /* @__PURE__ */ jsx("rect", {
925
+ width: "4",
926
+ height: "28",
927
+ x: "12",
928
+ rx: "2"
929
+ }), /* @__PURE__ */ jsx("path", {
930
+ d: "M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,26 C16,27.1045695 15.1045695,28 14,28 C12.8954305,28 12,27.1045695 12,26 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z",
931
+ transform: "rotate(90 14 14)"
932
+ })))));
933
+ }
934
+
935
+ // src/components/Personalization/Overrides.tsx
936
+ var Overrides = ({
937
+ dimensionIndex: { index: dimensionIndex },
938
+ state: { data, scores },
939
+ actions,
940
+ settings,
941
+ saveSettings
942
+ }) => {
943
+ var _a;
944
+ const overrides = (_a = settings.scoreOverrides) != null ? _a : {};
945
+ const totalOverrides = Object.keys(overrides).length;
946
+ const addNewOverride = (e) => {
947
+ e.preventDefault();
948
+ return saveSettings({ ...settings, route: "/overrides/add" });
949
+ };
950
+ const toggleControlGroup = () => {
951
+ actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
952
+ };
953
+ const scoresAffectedByOverrides = {};
954
+ Object.entries(scores).map(([key, value]) => {
955
+ if (overrides[key] !== void 0) {
956
+ scoresAffectedByOverrides[key] = value;
957
+ }
958
+ });
959
+ return /* @__PURE__ */ jsx(React5.Fragment, null, /* @__PURE__ */ jsx("article", {
960
+ css: styles.page
961
+ }, /* @__PURE__ */ jsx("div", {
962
+ css: styles.headingGroup
963
+ }, /* @__PURE__ */ jsx("h2", {
964
+ css: styles.title
965
+ }, "What if?"), /* @__PURE__ */ jsx("div", {
966
+ css: styles.reset
967
+ }, /* @__PURE__ */ jsx(LinkButton, {
968
+ onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores })
969
+ }, "delete all overrides")), /* @__PURE__ */ jsx(AddButton, {
970
+ onClick: addNewOverride
971
+ })), /* @__PURE__ */ jsx("p", null, "Override dimension scores to test personalization"), totalOverrides > 0 ? /* @__PURE__ */ jsx(DimensionsTable_default, {
972
+ dimensionIndex,
973
+ dimensions: scoresAffectedByOverrides,
974
+ onClick: (dim) => saveSettings({ ...settings, route: `/overrides/${dim}` })
975
+ }) : /* @__PURE__ */ jsx(NoActiveDimensions, {
976
+ title: data.controlGroup ? "In control group" : "No overrides",
977
+ text: data.controlGroup ? "You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run." : "You do not have any dimension overrides yet.",
978
+ buttonGroup: data.controlGroup ? /* @__PURE__ */ jsx(Button, {
979
+ buttonType: "secondary",
980
+ onClick: toggleControlGroup
981
+ }, "Exit control group") : null
982
+ })));
983
+ };
984
+
985
+ // src/components/Personalization/AddOverride.tsx
986
+ import { Field as Field2, Form, Formik } from "formik";
987
+ import * as yup from "yup";
988
+
989
+ // src/components/Inputs/SelectInput.tsx
990
+ import { ErrorMessage } from "formik";
991
+
992
+ // src/components/Inputs/inputs.styles.ts
993
+ import { css as css12 } from "@emotion/react";
994
+ var textInput = css12`
363
995
  background: var(--white);
364
996
  border: 1px solid var(--gray-500);
365
997
  border-radius: var(--rounded-base);
@@ -370,7 +1002,8 @@ to {
370
1002
  cursor: not-allowed;
371
1003
  color: var(--gray-200);
372
1004
  }
373
- `,re=L`
1005
+ `;
1006
+ var selectInput = css12`
374
1007
  appearance: none;
375
1008
  background: var(--white)
376
1009
  url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNi4zNDMxNyA3Ljc1NzMyTDQuOTI4OTYgOS4xNzE1NEwxMiAxNi4yNDI2TDE5LjA3MTEgOS4xNzE1N0wxNy42NTY5IDcuNzU3MzVMMTIgMTMuNDE0Mkw2LjM0MzE3IDcuNzU3MzJaIgogICAgZmlsbD0iIzgyODI4MiIKICAvPgo8L3N2Zz4=')
@@ -383,29 +1016,36 @@ to {
383
1016
  cursor: not-allowed;
384
1017
  color: var(--gray-200);
385
1018
  }
386
- `,ne=L`
1019
+ `;
1020
+ var editableInput = css12`
387
1021
  padding: var(--spacing-sm);
388
1022
  max-width: 160px;
389
- `,ie=L`
1023
+ `;
1024
+ var inputWrapper = css12`
390
1025
  margin: var(--spacing-base) 0;
391
- `,O=L`
1026
+ `;
1027
+ var inputLabel = css12`
392
1028
  color: var(--brand-secondary-1);
393
1029
  display: flex;
394
1030
  flex-direction: column;
395
1031
  margin: 0 0 var(--spacing-sm);
396
- `,N=L`
1032
+ `;
1033
+ var inputText = css12`
397
1034
  color: var(--brand-secondary-1);
398
1035
  display: block;
399
1036
  flex: 1 100%;
400
1037
  font-weight: var(--font-bold);
401
1038
  margin: 0 0 var(--spacing-sm);
402
- `,F=L`
1039
+ `;
1040
+ var inputCaption = css12`
403
1041
  color: var(--gray-600);
404
1042
  font-size: var(--font-sm);
405
- `,ae=L`
1043
+ `;
1044
+ var errorMsg = css12`
406
1045
  color: var(--brand-secondary-5);
407
1046
  display: block;
408
- `,Ne=L`
1047
+ `;
1048
+ var rangeInput = css12`
409
1049
  flex-direction: row;
410
1050
  flex-wrap: wrap;
411
1051
 
@@ -473,15 +1113,683 @@ to {
473
1113
  flex: 1 0 20%;
474
1114
  padding: 10px;
475
1115
  }
476
- `;var Fe=({field:t,form:n,meta:r,...o})=>{let{label:i,options:a,caption:u,...g}=o;return e("div",{css:ie},e("label",{css:O},e("span",{css:N},i),e("select",{...t,...g,css:re},a.map((s,c)=>e("option",{value:s.value,key:c},s.text)))),u?e("span",{css:F},u):null,e(Tt,{component:"div",css:ae,name:t.name}))};import{Field as St}from"formik";var Dt=({field:t,form:n,meta:r,...o})=>{var c,l;let{label:i,caption:a,min:u=0,max:g=100,step:s}=o;return e("div",null,e("label",{css:[O,Ne]},e("span",{css:N},i),e("input",{type:"range",min:u,max:g,step:s,...t,value:(c=t.value)!=null?c:0}),e("span",{className:"value-display"},(l=t.value)!=null?l:0)),e("p",{css:F},a))},Ze=Dt;var It=({name:t,label:n,dimensionToOverride:r,isSubmitting:o})=>{let i={max:100,step:20};return r&&(i.max=r.cap,i.step=r.str),e(St,{component:Ze,label:n,caption:`Range: 0 - ${i.max} in increments of ${i.step}`,id:t,name:t,disabled:o,...i})},Qe=It;import{css as Pt}from"@emotion/react";var V=({children:t,...n})=>e("fieldset",{css:Pt`
1116
+ `;
1117
+
1118
+ // src/components/Inputs/SelectInput.tsx
1119
+ var SelectInput = ({ field, form, meta, ...rawProps }) => {
1120
+ const { label, options, caption, ...passThroughProps } = rawProps;
1121
+ return /* @__PURE__ */ jsx("div", {
1122
+ css: inputWrapper
1123
+ }, /* @__PURE__ */ jsx("label", {
1124
+ css: inputLabel
1125
+ }, /* @__PURE__ */ jsx("span", {
1126
+ css: inputText
1127
+ }, label), /* @__PURE__ */ jsx("select", {
1128
+ ...field,
1129
+ ...passThroughProps,
1130
+ css: selectInput
1131
+ }, options.map((o, index) => /* @__PURE__ */ jsx("option", {
1132
+ value: o.value,
1133
+ key: index
1134
+ }, o.text)))), caption ? /* @__PURE__ */ jsx("span", {
1135
+ css: inputCaption
1136
+ }, caption) : null, /* @__PURE__ */ jsx(ErrorMessage, {
1137
+ component: "div",
1138
+ css: errorMsg,
1139
+ name: field.name
1140
+ }));
1141
+ };
1142
+
1143
+ // src/components/Inputs/DependableSelectBox.tsx
1144
+ import { Field } from "formik";
1145
+
1146
+ // src/components/Inputs/SliderInput.tsx
1147
+ var SliderInput = ({ field, form, meta, ...rawProps }) => {
1148
+ var _a, _b;
1149
+ const { label, caption, min = 0, max = 100, step } = rawProps;
1150
+ return /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx("label", {
1151
+ css: [inputLabel, rangeInput]
1152
+ }, /* @__PURE__ */ jsx("span", {
1153
+ css: inputText
1154
+ }, label), /* @__PURE__ */ jsx("input", {
1155
+ type: "range",
1156
+ min,
1157
+ max,
1158
+ step,
1159
+ ...field,
1160
+ value: (_a = field.value) != null ? _a : 0
1161
+ }), /* @__PURE__ */ jsx("span", {
1162
+ className: "value-display"
1163
+ }, (_b = field.value) != null ? _b : 0)), /* @__PURE__ */ jsx("p", {
1164
+ css: inputCaption
1165
+ }, caption));
1166
+ };
1167
+ var SliderInput_default = SliderInput;
1168
+
1169
+ // src/components/Inputs/DependableSelectBox.tsx
1170
+ var DependableSelectBox = ({
1171
+ name,
1172
+ label,
1173
+ dimensionToOverride,
1174
+ isSubmitting
1175
+ }) => {
1176
+ const rangeProps = {
1177
+ max: 100,
1178
+ step: 20
1179
+ };
1180
+ if (dimensionToOverride) {
1181
+ rangeProps.max = dimensionToOverride.cap;
1182
+ rangeProps.step = dimensionToOverride.str;
1183
+ }
1184
+ return /* @__PURE__ */ jsx(Field, {
1185
+ component: SliderInput_default,
1186
+ label,
1187
+ caption: `Range: 0 - ${rangeProps.max} in increments of ${rangeProps.step}`,
1188
+ id: name,
1189
+ name,
1190
+ disabled: isSubmitting,
1191
+ ...rangeProps
1192
+ });
1193
+ };
1194
+ var DependableSelectBox_default = DependableSelectBox;
1195
+
1196
+ // src/components/Form/Fieldset.tsx
1197
+ import { css as css13 } from "@emotion/react";
1198
+ var Fieldset = ({ children, ...props }) => {
1199
+ return /* @__PURE__ */ jsx("fieldset", {
1200
+ css: css13`
477
1201
  border: none;
478
1202
  padding: 0;
479
- `,...n},t);import{css as Rt}from"@emotion/react";var _=({children:t})=>e("legend",{css:Rt`
1203
+ `,
1204
+ ...props
1205
+ }, children);
1206
+ };
1207
+
1208
+ // src/components/Form/Legend.tsx
1209
+ import { css as css14 } from "@emotion/react";
1210
+ var Legend = ({ children }) => {
1211
+ return /* @__PURE__ */ jsx("legend", {
1212
+ css: css14`
480
1213
  font-size: var(--font-md);
481
1214
  font-weight: var(--font-bold);
482
1215
  border-bottom: 1px solid var(--gray-400);
483
1216
  width: 100%;
484
- `},t);var At=Z.object({dimension:Z.string(),score:Z.number()}),ve=({settings:t,saveSettings:n,state:r,actions:o,dimensionIndex:{index:i}})=>{var s,c;let a=t.route?[...t.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)]:[],u=a[0]?a[0][1]:"";if(!((s=r.manifest.project.pz)!=null&&s.sig))return e("p",null,"Error, manifest is broken or there is no signal to override.");let g=Object.entries(i).filter(([,l])=>l.type!=="Audience"&&l.type!=="Intent").map(([l,m])=>{let f=m.type?`${m.type}: `:"",b=m.category?`${m.category} - `:"",y=`${f}${b}${m.name}`;return{value:l,text:y}});return g.unshift({value:"_none",text:"Choose your dimension"}),e(Ht,{initialValues:{dimension:u,score:(c=r.scores[u])!=null?c:0},validationSchema:At,enableReinitialize:!0,onSubmit:l=>{var f;let m=l.score-((f=r.scores[l.dimension])!=null?f:0);o.override([{type:"modscore",data:{dimension:l.dimension,delta:m}}]),n({...t,route:"/overrides"})}},({dirty:l,isValid:m,isSubmitting:f,values:b})=>{var y;return e(Vt,{css:h.page},e("h1",{css:h.title},"Override Dimension"),e(Mt,{component:Fe,label:"Dimension",id:"dimension",name:"dimension",options:g,disabled:f}),e("p",{css:h.text},e("small",null,"Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")),b.dimension?e(Qe,{name:"score",label:"Score",dimensionToOverride:i[b.dimension],isSubmitting:f}):e("span",null,"Dimensions is not selected yet"),e(V,{disabled:f},e(A,null,e(z,{title:"Impacted Dimensions"},b.score!==void 0&&e(M,{dimensionIndex:i,dimensions:{[b.dimension]:((y=r.scores[b.dimension])!=null?y:0)+b.score},overrides:{quirks:{},scores:{[b.dimension]:b.score}}}))),l?e(w,{type:"submit",css:h.submitButton,disabled:!m},"Save"):null,e(I,{route:"overrides"},"cancel")))})};import{useState as Zt}from"react";import{useEffect as zt,useState as Ue}from"react";import{useDebounce as Et}from"react-use";var Bt=({name:t,value:n,submit:r,editable:o,setEditable:i})=>{let[a,u]=Ue(!1),[g,s]=Ue(n!=null?n:"");Et(()=>{g!==n&&r(t,g)},400,[g,t]),zt(()=>{o&&u(o)},[o]);let c=m=>{s(m.target.value)},l=()=>{u(!1),i&&i("")};return a?e("input",{type:"text",css:[oe,ne],name:t,defaultValue:g,onBlur:l,onChange:c}):e(v.Fragment,null,n||"undefined")},_e=Bt;import{useEffect as Ot,useState as Nt}from"react";var Ft=({name:t,value:n,submit:r,editable:o,options:i})=>{let[a,u]=Nt(!1);Ot(()=>{o&&u(o)},[o]);let g=s=>{r(s.target.name,s.target.value)};return!a||!i?e(v.Fragment,null,n||"undefined"):e("select",{name:t,defaultValue:n,onChange:g,css:[re,ne]},e("option",{key:"_none",value:"_none"},"None"),i.map(s=>e("option",{key:s.value,value:s.value},s.name)))},Ge=Ft;var $e=({...t})=>{let{actions:n,quirksIndex:{index:r}}=t,[o,i]=Zt(""),a;o&&(a=r[o]);let u=(g,s)=>{i(""),n.override([{type:"setquirk",data:{key:g,value:s}}])};return e(v.Fragment,null,e("article",{css:h.page},e("h1",{css:h.title},"Quirks"),e("p",{css:h.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(r).length?e(J,null,e(Re,null,e(U,null,e(ge,null,"Key"),e(ge,null,"Value"),e(k,null,""))),e(j,null,Object.values(r).map(({name:g,value:s,id:c})=>e(U,{key:c,border:"bottom"},e(k,null,e("strong",null,g)),e(k,null,(!a||!a.options)&&e(_e,{name:c,value:s,submit:u,setEditable:i,editable:o===c}),a&&a.options&&e(Ge,{name:c,value:s,submit:u,editable:o===c,options:a.options})),e(k,null,e("a",{href:"#",onClick:l=>{l.preventDefault(),i(c)}},e("small",null,"Override"))))))):e(B,{title:"No quirks configured",text:"There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."})))};import{Field as G,Form as Ut,Formik as _t}from"formik";import{ErrorMessage as Qt}from"formik";var se=({field:t,form:n,meta:r,...o})=>{let{label:i,caption:a,...u}=o;return e("div",{css:ie},e("label",{css:O},e("span",{css:N},i),e("input",{type:"text",css:oe,...t,...u})),a?e("span",{css:F},a):null,e(Qt,{component:"div",css:ae,name:t.name}))};import*as T from"yup";var Gt=T.object({apiKey:T.string().matches(/^uf.+$/,"API keys start with `uf`, double check your API key"),apiHost:T.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/,"API host must be a Uniform domain."),logging:T.boolean(),projectId:T.string().uuid(),consentMode:T.boolean()}),Ke=({settings:t,saveSettings:n,actions:r,state:{data:o},dimensionIndex:{error:i,loading:a}})=>{var u,g,s;return e(_t,{initialValues:{apiHost:(u=t.apiHost)!=null?u:"",apiKey:(g=t.apiKey)!=null?g:"",projectId:(s=t.projectId)!=null?s:"",consentMode:!!o.consent,logging:t.logLevel!=="none"&&Boolean(t.logLevel)},validationSchema:Gt,enableReinitialize:!0,onSubmit:c=>{n({...t,apiHost:c.apiHost,apiKey:c.apiKey,projectId:c.projectId,logLevel:c.logging?"debug":"none",consentMode:c.consentMode}),r.rawUpdate([{type:"consent",data:c.consentMode}])}},({dirty:c,isValid:l,isSubmitting:m})=>e(Ut,{css:h.page},e("h1",{css:h.title},"Settings"),e(V,{disabled:m},e(_,null,"Data Connection"),!a&&i?e("p",{css:h.error},"Unable to fetch data from Uniform",e("br",null),e("em",null,i.message)):null,e("p",{css:h.text},e("small",null,"Adding an API key and project ID enables richer dimension data to be shown. You must have access to the Uniform project to do this.")),e(G,{component:se,label:"Uniform API key",caption:"Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",id:"api-key",name:"apiKey",autoComplete:"off"}),e(G,{component:se,label:"Uniform Project ID",caption:"Available to copy after generating an API key",id:"project-id",name:"projectId",autoComplete:"off"}),e(A,null,e(z,{title:"Advanced"},e(G,{component:se,label:"Alternative API Host",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option.",id:"api-host",name:"apiHost",autoComplete:"off"}))),e(V,null,e(_,null,"Storage Consent"),e(G,{component:ue,label:"Store visitor data",id:"consent-mode",name:"consentMode"}),e("p",null,"Defaults off to comply with CCPA and GDPR. Turning on consents to storing behavior in this browser for personalization across sessions. Only affects this browser. Personalization works with this disabled, but dimension scores are lost on refresh.")),e(V,null,e(_,null,"Logging"),e(G,{component:ue,label:"Write Uniform Context diagnostic logs to browser console",id:"logging",name:"logging"})),c?e(w,{type:"submit",css:h.submitButton,disabled:!l},"Save"):null)))};var he=({settings:t,saveSettings:n})=>{let r=()=>{n({...t,route:"/settings"})},o=()=>{n({...t,ignoreApiKeyPrompt:!0})},i=!(t!=null&&t.apiKey);return!t.ignoreApiKeyPrompt&&i?e("div",{css:[W,Se]},e("h2",{css:q},"Connect this site"),e("p",{css:Y},"Add a Uniform API key to get better data."),e("div",{css:X},e(w,{buttonType:"secondary",onClick:r},"Connect this site"),e(w,{buttonType:"ghost",onClick:o},"Skip for now")),e("button",{type:"button",css:Ie,title:"close",onClick:o},e("span",{hidden:!0},"Close"))):null};import{computeDimensionDefinitionDisplayData as $t,computeDimensionDisplayData as We,DimensionClient as Kt}from"@uniformdev/context/api";import{useAsync as Wt}from"react-use";import*as qe from"react";function Ye({apiHost:t,apiKey:n,projectId:r},o){let{loading:i,error:a,value:u}=Wt(async()=>{if(!n||!r)return g;let c=(await new Kt({projectId:r,apiKey:n,apiHost:t||void 0}).get()).dimensions,l={};return c.map(m=>{var f,b,y,C;if(l[m.dim]={...$t(m),cap:m.cap,str:10},l[m.dim].type==="Enrichment"){let $=m.dim.split("_")[0];l[m.dim].cap=(C=(y=(b=(f=o==null?void 0:o.project.pz)==null?void 0:f.enr)==null?void 0:b[$])==null?void 0:y.cap)!=null?C:100}}),l},[t,n,r]),g=qe.useMemo(()=>{var c,l,m,f;let s={};return o&&(Object.entries((l=(c=o==null?void 0:o.project.pz)==null?void 0:c.sig)!=null?l:{}).map(([b,y])=>{let C=We(b,o);C&&(s[b]={...y,...C})}),Object.entries((f=(m=o==null?void 0:o.project.pz)==null?void 0:m.enr)!=null?f:{}).map(([b,y])=>{var ye;let C=We(b,o),$={cap:(ye=y.cap)!=null?ye:100,str:10};C&&(s[b]={...C,cap:$.cap,str:$.str})}),u&&Object.entries(u).map(([b,y])=>{s[b]={...s[b],...y}})),s},[o,u]);return{loading:i,error:a,index:g}}import{useMemo as qt}from"react";import{QuirkClient as Yt}from"@uniformdev/context/api";import{useAsync as Xt}from"react-use";function Xe({apiHost:t,apiKey:n,projectId:r},o){let{loading:i,error:a,value:u}=Xt(async()=>{if(!n||!r)return{};let c=await new Yt({projectId:r,apiKey:n,apiHost:t||void 0}).get(),l={};return c.quirks.map(m=>{l[m.id]={...m,value:o[m.id]}}),l},[t,n,r]),g=qt(()=>{let s={};return Object.entries(o).map(([c,l])=>s[c]={value:l,id:c,name:c}),u&&Object.entries(u).map(([c,l])=>s[c]={...l,value:o[c]}),s},[o,u]);return{loading:i,error:a,index:g}}import{css as je}from"@emotion/react";function ce(){return e("style",null,`
1217
+ `
1218
+ }, children);
1219
+ };
1220
+
1221
+ // src/lib/computeOverrideEffects.ts
1222
+ import { Context, TransitionDataStore } from "@uniformdev/context";
1223
+ function computeOverrideEffects({ manifest, visitor, override }) {
1224
+ const contextCopy = new Context({
1225
+ manifest,
1226
+ transitionStore: new CopyTransitionDataStore({ initialData: visitor })
1227
+ });
1228
+ const currentScores = { ...contextCopy.scores };
1229
+ contextCopy.storage.updateData([override]);
1230
+ const newScores = { ...contextCopy.scores };
1231
+ const changes = { ...newScores };
1232
+ Object.entries(changes).forEach(([key, value]) => {
1233
+ const oldScore = currentScores[key];
1234
+ if (oldScore === value) {
1235
+ delete changes[key];
1236
+ }
1237
+ });
1238
+ return changes;
1239
+ }
1240
+ var CopyTransitionDataStore = class extends TransitionDataStore {
1241
+ async handleDelete() {
1242
+ }
1243
+ async handleUpdateData() {
1244
+ }
1245
+ };
1246
+
1247
+ // src/lib/applyOverrides.ts
1248
+ function applyScoreOverrides({
1249
+ scores,
1250
+ scoreOverrides
1251
+ }) {
1252
+ const commands = [];
1253
+ if (!scoreOverrides)
1254
+ return [];
1255
+ Object.entries(scoreOverrides).forEach(([dim, override]) => {
1256
+ var _a;
1257
+ const score = (_a = scores[dim]) != null ? _a : 0;
1258
+ if (score === override.override) {
1259
+ return;
1260
+ }
1261
+ const delta = override.override - score;
1262
+ commands.push({
1263
+ type: "modscoreS",
1264
+ data: { dimension: dim, delta }
1265
+ });
1266
+ });
1267
+ return commands;
1268
+ }
1269
+ function applyQuirkOverrides({
1270
+ quirks,
1271
+ quirkOverrides
1272
+ }) {
1273
+ const quirkVector = {};
1274
+ if (!quirkOverrides)
1275
+ return void 0;
1276
+ Object.entries(quirkOverrides).forEach(([quirk, override]) => {
1277
+ const quirkValue = quirks[quirk];
1278
+ if (quirkValue === override.override) {
1279
+ return;
1280
+ }
1281
+ quirkVector[quirk] = override.override;
1282
+ });
1283
+ return Object.keys(quirkVector).length > 0 ? quirkVector : void 0;
1284
+ }
1285
+
1286
+ // src/components/Personalization/AddOverride.tsx
1287
+ var overrideSettingsSchema = yup.object({
1288
+ dimension: yup.string(),
1289
+ score: yup.number()
1290
+ });
1291
+ var AddOverride = ({
1292
+ settings,
1293
+ saveSettings,
1294
+ state,
1295
+ actions,
1296
+ dimensionIndex: { index }
1297
+ }) => {
1298
+ var _a, _b;
1299
+ const routeParams = settings.route ? [...settings.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)] : [];
1300
+ const overriddenDimension = routeParams[0] ? routeParams[0][1] : "";
1301
+ if (!((_a = state.manifest.project.pz) == null ? void 0 : _a.sig)) {
1302
+ return /* @__PURE__ */ jsx("p", null, "Error, manifest is broken or there is no signal to override.");
1303
+ }
1304
+ const overridableDimensions = Object.entries(index).filter(([, value]) => value.type !== "Audience" && value.type !== "Intent").map(([key, value]) => {
1305
+ const type = value.type ? `${value.type}: ` : "";
1306
+ const category = value.category ? `${value.category} - ` : "";
1307
+ const text = `${type}${category}${value.name}`;
1308
+ return {
1309
+ value: key,
1310
+ text
1311
+ };
1312
+ });
1313
+ overridableDimensions.unshift({
1314
+ value: "_none",
1315
+ text: "Choose dimension to override"
1316
+ });
1317
+ return /* @__PURE__ */ jsx(Formik, {
1318
+ initialValues: {
1319
+ dimension: overriddenDimension,
1320
+ score: (_b = state.scores[overriddenDimension]) != null ? _b : 0
1321
+ },
1322
+ validationSchema: overrideSettingsSchema,
1323
+ enableReinitialize: true,
1324
+ onSubmit: async (values) => {
1325
+ var _a2, _b2, _c, _d, _e, _f;
1326
+ const cap = (_b2 = (_a2 = index[values.dimension]) == null ? void 0 : _a2.cap) != null ? _b2 : 0;
1327
+ const cappedOverrideScore = Math.min(values.score, cap);
1328
+ const newSettings = {
1329
+ ...settings,
1330
+ scoreOverrides: {
1331
+ ...settings.scoreOverrides,
1332
+ [values.dimension]: {
1333
+ initial: (_f = (_e = (_d = (_c = settings.scoreOverrides) == null ? void 0 : _c[values.dimension]) == null ? void 0 : _d.initial) != null ? _e : state.scores[values.dimension]) != null ? _f : 0,
1334
+ override: cappedOverrideScore
1335
+ }
1336
+ },
1337
+ route: "/overrides"
1338
+ };
1339
+ await saveSettings(newSettings);
1340
+ const applyCommands = applyScoreOverrides({
1341
+ scores: state.scores,
1342
+ scoreOverrides: newSettings.scoreOverrides
1343
+ });
1344
+ actions.rawUpdate(applyCommands);
1345
+ }
1346
+ }, ({ dirty, isValid, isSubmitting, values }) => {
1347
+ var _a2;
1348
+ const overrideEffects = computeOverrideEffects({
1349
+ manifest: state.manifest,
1350
+ visitor: state.data,
1351
+ override: {
1352
+ type: "modscore",
1353
+ data: {
1354
+ dimension: values.dimension,
1355
+ delta: values.score - ((_a2 = state.scores[values.dimension]) != null ? _a2 : 0)
1356
+ }
1357
+ }
1358
+ });
1359
+ const preemptiveOverrides = Object.entries(state.scores).reduce((acc, [key, value]) => {
1360
+ acc[key] = {
1361
+ initial: value,
1362
+ override: value
1363
+ };
1364
+ return acc;
1365
+ }, {});
1366
+ const hasScoreEffects = values.score && Object.keys(overrideEffects).length > 0;
1367
+ return /* @__PURE__ */ jsx(Form, {
1368
+ css: styles.page
1369
+ }, /* @__PURE__ */ jsx("h1", {
1370
+ css: styles.title
1371
+ }, "Override Dimension"), /* @__PURE__ */ jsx(Field2, {
1372
+ component: SelectInput,
1373
+ label: "Dimension",
1374
+ id: "dimension",
1375
+ name: "dimension",
1376
+ options: overridableDimensions,
1377
+ disabled: isSubmitting
1378
+ }), /* @__PURE__ */ jsx("p", {
1379
+ css: styles.text
1380
+ }, /* @__PURE__ */ jsx("small", null, "Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")), values.dimension ? /* @__PURE__ */ jsx(DependableSelectBox_default, {
1381
+ name: "score",
1382
+ label: "Score",
1383
+ dimensionToOverride: index[values.dimension],
1384
+ isSubmitting
1385
+ }) : null, /* @__PURE__ */ jsx(Fieldset, {
1386
+ disabled: isSubmitting,
1387
+ css: { marginBottom: "2rem" }
1388
+ }, hasScoreEffects ? /* @__PURE__ */ jsx(Accordion, null, /* @__PURE__ */ jsx(AccordionItem, {
1389
+ title: `Impacted Dimensions (${Object.keys(overrideEffects).length})`
1390
+ }, /* @__PURE__ */ jsx(DimensionsTable_default, {
1391
+ preemptiveOverrides,
1392
+ dimensionIndex: index,
1393
+ dimensions: overrideEffects,
1394
+ disableEditOverride: true
1395
+ }))) : null, dirty ? /* @__PURE__ */ jsx(Button, {
1396
+ type: "submit",
1397
+ css: styles.submitButton,
1398
+ disabled: !isValid
1399
+ }, "Save") : null, /* @__PURE__ */ jsx(NavigationLink_default, {
1400
+ route: "/overrides",
1401
+ css: styles.cancelButton
1402
+ }, "Cancel")));
1403
+ });
1404
+ };
1405
+
1406
+ // src/components/Personalization/Quirks.tsx
1407
+ import { useState as useState3 } from "react";
1408
+
1409
+ // src/components/Inputs/EditableText.tsx
1410
+ import { useState as useState2, useEffect } from "react";
1411
+ var EditableText = ({ name, value, submit }) => {
1412
+ const [inputValue, setInputValue] = useState2(value != null ? value : "");
1413
+ useEffect(() => {
1414
+ setInputValue(value != null ? value : "");
1415
+ }, [value]);
1416
+ const onChange = (e) => {
1417
+ setInputValue(e.target.value);
1418
+ };
1419
+ return /* @__PURE__ */ jsx("div", {
1420
+ css: { display: "flex", gap: "var(--spacing-sm)" }
1421
+ }, /* @__PURE__ */ jsx("input", {
1422
+ type: "text",
1423
+ css: [textInput, editableInput],
1424
+ name,
1425
+ value: inputValue,
1426
+ onChange
1427
+ }), /* @__PURE__ */ jsx(Button, {
1428
+ buttonType: "primary",
1429
+ onClick: () => submit(name, inputValue != null ? inputValue : "")
1430
+ }, "Save"));
1431
+ };
1432
+ var EditableText_default = EditableText;
1433
+
1434
+ // src/components/Inputs/EditableSelectBox.tsx
1435
+ var EditableSelectBox = ({ name, value, submit, options }) => {
1436
+ const onChange = (e) => submit(e.target.name, e.target.value);
1437
+ return /* @__PURE__ */ jsx("select", {
1438
+ name,
1439
+ defaultValue: value,
1440
+ onChange,
1441
+ css: [selectInput, editableInput]
1442
+ }, /* @__PURE__ */ jsx("option", {
1443
+ key: "_none",
1444
+ value: "_none"
1445
+ }, "None"), (options != null ? options : []).map((option) => /* @__PURE__ */ jsx("option", {
1446
+ key: option.value,
1447
+ value: option.value
1448
+ }, option.name)));
1449
+ };
1450
+ var EditableSelectBox_default = EditableSelectBox;
1451
+
1452
+ // src/components/Personalization/Quirks.tsx
1453
+ var Quirks = ({ ...props }) => {
1454
+ const {
1455
+ state: {
1456
+ data: { quirks }
1457
+ },
1458
+ quirksIndex: { index: quirksIndex },
1459
+ settings,
1460
+ saveSettings,
1461
+ actions
1462
+ } = props;
1463
+ const [editable, setEditable] = useState3("");
1464
+ let editableQuirkMetaData;
1465
+ if (editable) {
1466
+ editableQuirkMetaData = quirksIndex[editable];
1467
+ }
1468
+ const submitOverride = async (name, value) => {
1469
+ var _a, _b, _c;
1470
+ setEditable("");
1471
+ const newSettings = {
1472
+ ...settings,
1473
+ quirkOverrides: {
1474
+ ...settings.quirkOverrides,
1475
+ [name]: { initial: (_c = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial) != null ? _c : quirks[name], override: value }
1476
+ }
1477
+ };
1478
+ await saveSettings(newSettings);
1479
+ const quirkOverrides = applyQuirkOverrides({
1480
+ quirks,
1481
+ quirkOverrides: newSettings.quirkOverrides
1482
+ });
1483
+ actions.update({ quirks: quirkOverrides });
1484
+ };
1485
+ return /* @__PURE__ */ jsx(React.Fragment, null, /* @__PURE__ */ jsx("article", {
1486
+ css: styles.page
1487
+ }, /* @__PURE__ */ jsx("h1", {
1488
+ css: styles.title
1489
+ }, "Quirks"), /* @__PURE__ */ jsx("p", {
1490
+ css: styles.text
1491
+ }, "Keys defined in Uniform and their current, programmatically defined values for this visit."), Object.keys(quirksIndex).length ? /* @__PURE__ */ jsx(Table, null, /* @__PURE__ */ jsx(THead, null, /* @__PURE__ */ jsx(TRow, null, /* @__PURE__ */ jsx(THeading, null, "Key"), /* @__PURE__ */ jsx(THeading, null, "Value"), /* @__PURE__ */ jsx(TData, null, ""))), /* @__PURE__ */ jsx(TBody, null, Object.values(quirksIndex).map(({ name, value, id }) => {
1492
+ var _a, _b, _c;
1493
+ const initialValue = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial;
1494
+ return /* @__PURE__ */ jsx(TRow, {
1495
+ key: id,
1496
+ border: "bottom"
1497
+ }, /* @__PURE__ */ jsx(TData, null, /* @__PURE__ */ jsx("strong", null, name)), /* @__PURE__ */ jsx(TData, null, editable !== id ? /* @__PURE__ */ jsx("div", {
1498
+ onClick: () => {
1499
+ setEditable(id);
1500
+ }
1501
+ }, initialValue ? /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx("s", null, initialValue)) : null, value) : null, editable === id && editableQuirkMetaData && /* @__PURE__ */ jsx(React.Fragment, null, editableQuirkMetaData.options ? /* @__PURE__ */ jsx(EditableSelectBox_default, {
1502
+ name: id,
1503
+ value,
1504
+ submit: submitOverride,
1505
+ options: editableQuirkMetaData.options
1506
+ }) : /* @__PURE__ */ jsx(EditableText_default, {
1507
+ name: id,
1508
+ value,
1509
+ submit: submitOverride
1510
+ }))), /* @__PURE__ */ jsx(TData, null, editable ? null : ((_c = settings.quirkOverrides) == null ? void 0 : _c[id]) ? /* @__PURE__ */ jsx(LinkButton, {
1511
+ onClick: () => {
1512
+ deleteQuirkOverride({ quirk: id, settings, saveSettings, actions });
1513
+ }
1514
+ }, /* @__PURE__ */ jsx("small", null, "Clear Override")) : /* @__PURE__ */ jsx(LinkButton, {
1515
+ onClick: () => {
1516
+ setEditable(id);
1517
+ }
1518
+ }, /* @__PURE__ */ jsx("small", null, "Override"))));
1519
+ }))) : /* @__PURE__ */ jsx(NoActiveDimensions, {
1520
+ title: "No quirks configured",
1521
+ text: "There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."
1522
+ })));
1523
+ };
1524
+
1525
+ // src/components/Personalization/Settings.tsx
1526
+ import { Field as Field3, Form as Form2, Formik as Formik2 } from "formik";
1527
+
1528
+ // src/components/Inputs/InputText.tsx
1529
+ import { ErrorMessage as ErrorMessage2 } from "formik";
1530
+ var InputText = ({ field, form, meta, ...rawProps }) => {
1531
+ const { label, caption, ...passThroughProps } = rawProps;
1532
+ return /* @__PURE__ */ jsx("div", {
1533
+ css: inputWrapper
1534
+ }, /* @__PURE__ */ jsx("label", {
1535
+ css: inputLabel
1536
+ }, /* @__PURE__ */ jsx("span", {
1537
+ css: inputText
1538
+ }, label), /* @__PURE__ */ jsx("input", {
1539
+ type: "text",
1540
+ css: textInput,
1541
+ ...field,
1542
+ ...passThroughProps
1543
+ })), caption ? /* @__PURE__ */ jsx("span", {
1544
+ css: inputCaption
1545
+ }, caption) : null, /* @__PURE__ */ jsx(ErrorMessage2, {
1546
+ component: "div",
1547
+ css: errorMsg,
1548
+ name: field.name
1549
+ }));
1550
+ };
1551
+
1552
+ // src/components/Personalization/Settings.tsx
1553
+ import * as yup2 from "yup";
1554
+ var editableSettingsSchema = yup2.object({
1555
+ apiKey: yup2.string().matches(/^uf.+$/, "API keys start with `uf`, double check your API key"),
1556
+ apiHost: yup2.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/, "API host must be a Uniform domain."),
1557
+ logging: yup2.boolean(),
1558
+ projectId: yup2.string().uuid(),
1559
+ consentMode: yup2.boolean()
1560
+ });
1561
+ var Settings = ({
1562
+ settings,
1563
+ saveSettings,
1564
+ actions,
1565
+ state: { data },
1566
+ dimensionIndex: { error, loading }
1567
+ }) => {
1568
+ var _a, _b, _c;
1569
+ return /* @__PURE__ */ jsx(Formik2, {
1570
+ initialValues: {
1571
+ apiHost: (_a = settings.apiHost) != null ? _a : "",
1572
+ apiKey: (_b = settings.apiKey) != null ? _b : "",
1573
+ projectId: (_c = settings.projectId) != null ? _c : "",
1574
+ consentMode: !!data.consent,
1575
+ logging: settings.logLevel !== "none" && Boolean(settings.logLevel)
1576
+ },
1577
+ validationSchema: editableSettingsSchema,
1578
+ enableReinitialize: true,
1579
+ onSubmit: (values) => {
1580
+ saveSettings({
1581
+ ...settings,
1582
+ apiHost: values.apiHost,
1583
+ apiKey: values.apiKey,
1584
+ projectId: values.projectId,
1585
+ logLevel: values.logging ? "debug" : "none",
1586
+ consentMode: values.consentMode
1587
+ });
1588
+ actions.rawUpdate([{ type: "consent", data: values.consentMode }]);
1589
+ }
1590
+ }, ({ dirty, isValid, isSubmitting }) => /* @__PURE__ */ jsx(Form2, {
1591
+ css: styles.page
1592
+ }, /* @__PURE__ */ jsx("h1", {
1593
+ css: styles.title
1594
+ }, "Settings"), /* @__PURE__ */ jsx(Fieldset, {
1595
+ disabled: isSubmitting
1596
+ }, /* @__PURE__ */ jsx(Legend, null, "Data Connection"), !loading && error ? /* @__PURE__ */ jsx("p", {
1597
+ css: styles.error
1598
+ }, "Unable to fetch data from Uniform", /* @__PURE__ */ jsx("br", null), /* @__PURE__ */ jsx("em", null, error.message)) : null, /* @__PURE__ */ jsx("p", {
1599
+ css: styles.text
1600
+ }, /* @__PURE__ */ jsx("small", null, "Adding an API key and project ID enables richer dimension data to be shown. You must have access to the Uniform project to do this.")), /* @__PURE__ */ jsx(Field3, {
1601
+ component: InputText,
1602
+ label: "Uniform API key",
1603
+ caption: "Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",
1604
+ id: "api-key",
1605
+ name: "apiKey",
1606
+ autoComplete: "off"
1607
+ }), /* @__PURE__ */ jsx(Field3, {
1608
+ component: InputText,
1609
+ label: "Uniform Project ID",
1610
+ caption: "Available to copy after generating an API key",
1611
+ id: "project-id",
1612
+ name: "projectId",
1613
+ autoComplete: "off"
1614
+ }), /* @__PURE__ */ jsx(Accordion, null, /* @__PURE__ */ jsx(AccordionItem, {
1615
+ title: "Advanced"
1616
+ }, /* @__PURE__ */ jsx(Field3, {
1617
+ component: InputText,
1618
+ label: "Alternative API Host",
1619
+ caption: "Use a non-standard Uniform API endpoint. Most people will not not need this option.",
1620
+ id: "api-host",
1621
+ name: "apiHost",
1622
+ autoComplete: "off"
1623
+ }))), /* @__PURE__ */ jsx(Fieldset, null, /* @__PURE__ */ jsx(Legend, null, "Storage Consent"), /* @__PURE__ */ jsx(Field3, {
1624
+ component: FormikSwitchInput,
1625
+ label: "Store visitor data",
1626
+ id: "consent-mode",
1627
+ name: "consentMode"
1628
+ }), /* @__PURE__ */ jsx("p", null, /* @__PURE__ */ jsx("small", null, "Turning on consents to storing behavior in this browser for personalization across sessions. Only affects this browser. Personalization works with this disabled, but dimension scores are lost on refresh."))), /* @__PURE__ */ jsx(Fieldset, null, /* @__PURE__ */ jsx(Legend, null, "Logging"), /* @__PURE__ */ jsx(Field3, {
1629
+ component: FormikSwitchInput,
1630
+ label: "Write Uniform Context diagnostic logs to browser console",
1631
+ id: "logging",
1632
+ name: "logging"
1633
+ })), dirty ? /* @__PURE__ */ jsx(Button, {
1634
+ type: "submit",
1635
+ css: styles.submitButton,
1636
+ disabled: !isValid
1637
+ }, "Save") : null)));
1638
+ };
1639
+
1640
+ // src/components/CallToAction/ConnectApiKey.tsx
1641
+ var ConnectApiKey = ({ settings, saveSettings }) => {
1642
+ const handleRedirect = () => {
1643
+ saveSettings({ ...settings, route: "/settings" });
1644
+ };
1645
+ const dismissPrompt = () => {
1646
+ saveSettings({ ...settings, ignoreApiKeyPrompt: true });
1647
+ };
1648
+ const missingApiKey = !(settings == null ? void 0 : settings.apiKey);
1649
+ return !settings.ignoreApiKeyPrompt && missingApiKey ? /* @__PURE__ */ jsx("div", {
1650
+ css: [cta, ctaWithIcon]
1651
+ }, /* @__PURE__ */ jsx("h2", {
1652
+ css: ctaTitle
1653
+ }, "Connect this site"), /* @__PURE__ */ jsx("p", {
1654
+ css: ctaText
1655
+ }, "Add a Uniform API key to get better data."), /* @__PURE__ */ jsx("div", {
1656
+ css: ctaBtnGroup
1657
+ }, /* @__PURE__ */ jsx(Button, {
1658
+ buttonType: "secondary",
1659
+ onClick: handleRedirect
1660
+ }, "Connect this site"), /* @__PURE__ */ jsx(Button, {
1661
+ buttonType: "ghost",
1662
+ onClick: dismissPrompt
1663
+ }, "Skip for now")), /* @__PURE__ */ jsx("button", {
1664
+ type: "button",
1665
+ css: ctaClose,
1666
+ title: "close",
1667
+ onClick: dismissPrompt
1668
+ }, /* @__PURE__ */ jsx("span", {
1669
+ hidden: true
1670
+ }, "Close"))) : null;
1671
+ };
1672
+
1673
+ // src/hooks/useDimensionIndex.ts
1674
+ import {
1675
+ computeDimensionDefinitionDisplayData,
1676
+ computeDimensionDisplayData,
1677
+ DimensionClient
1678
+ } from "@uniformdev/context/api";
1679
+ import { useAsync } from "react-use";
1680
+ import * as React6 from "react";
1681
+ function useDimensionIndex({ apiHost, apiKey, projectId }, manifest) {
1682
+ const { loading, error, value } = useAsync(async () => {
1683
+ if (!apiKey || !projectId) {
1684
+ return manifestData;
1685
+ }
1686
+ const client = new DimensionClient({
1687
+ projectId,
1688
+ apiKey,
1689
+ apiHost: apiHost ? apiHost : void 0
1690
+ });
1691
+ const dimensions = (await client.get()).dimensions;
1692
+ const result = {};
1693
+ dimensions.map((dimension) => {
1694
+ var _a, _b, _c, _d;
1695
+ result[dimension.dim] = {
1696
+ ...computeDimensionDefinitionDisplayData(dimension),
1697
+ cap: dimension.cap,
1698
+ str: 10
1699
+ };
1700
+ if (result[dimension.dim].type === "Enrichment") {
1701
+ const enrId = dimension.dim.split("_")[0];
1702
+ result[dimension.dim].cap = (_d = (_c = (_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.enr) == null ? void 0 : _b[enrId]) == null ? void 0 : _c.cap) != null ? _d : 100;
1703
+ }
1704
+ });
1705
+ return result;
1706
+ }, [apiHost, apiKey, projectId]);
1707
+ const manifestData = React6.useMemo(() => {
1708
+ var _a, _b, _c, _d;
1709
+ const data = {};
1710
+ if (!manifest) {
1711
+ return data;
1712
+ }
1713
+ Object.entries((_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) != null ? _b : {}).map(([dimensionId, dimension]) => {
1714
+ const dim = computeDimensionDisplayData(dimensionId, manifest);
1715
+ if (dim) {
1716
+ data[dimensionId] = { ...dimension, ...dim };
1717
+ }
1718
+ });
1719
+ Object.entries((_d = (_c = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _c.enr) != null ? _d : {}).map(([dimensionId, enr]) => {
1720
+ var _a2;
1721
+ const dim = computeDimensionDisplayData(dimensionId, manifest);
1722
+ const signal = { cap: (_a2 = enr.cap) != null ? _a2 : 100, str: 10 };
1723
+ if (dim) {
1724
+ data[dimensionId] = { ...dim, cap: signal.cap, str: signal.str };
1725
+ }
1726
+ });
1727
+ if (value) {
1728
+ Object.entries(value).map(([dimensionId, dimension]) => {
1729
+ data[dimensionId] = {
1730
+ ...data[dimensionId],
1731
+ ...dimension
1732
+ };
1733
+ });
1734
+ }
1735
+ return data;
1736
+ }, [manifest, value]);
1737
+ return {
1738
+ loading,
1739
+ error,
1740
+ index: manifestData
1741
+ };
1742
+ }
1743
+
1744
+ // src/hooks/useQuirkIndex.ts
1745
+ import { useMemo as useMemo3 } from "react";
1746
+ import { QuirkClient } from "@uniformdev/context/api";
1747
+ import { useAsync as useAsync2 } from "react-use";
1748
+ function useQuirkIndex({ apiHost, apiKey, projectId }, quirksData) {
1749
+ const { loading, error, value } = useAsync2(async () => {
1750
+ if (!apiKey || !projectId) {
1751
+ return {};
1752
+ }
1753
+ const client = new QuirkClient({
1754
+ projectId,
1755
+ apiKey,
1756
+ apiHost: apiHost ? apiHost : void 0
1757
+ });
1758
+ const quirksResponse = await client.get();
1759
+ const quirksIndexData = {};
1760
+ quirksResponse.quirks.map((quirkData) => {
1761
+ quirksIndexData[quirkData.id] = { ...quirkData, value: quirksData[quirkData.id] };
1762
+ });
1763
+ return quirksIndexData;
1764
+ }, [apiHost, apiKey, projectId]);
1765
+ const contextStateQuirkData = useMemo3(() => {
1766
+ const data = {};
1767
+ Object.entries(quirksData).map(([quirkId, queryrValue]) => data[quirkId] = {
1768
+ value: queryrValue,
1769
+ id: quirkId,
1770
+ name: quirkId
1771
+ });
1772
+ if (value) {
1773
+ Object.entries(value).map(([quirkId, quirkValue]) => data[quirkId] = {
1774
+ ...quirkValue,
1775
+ value: quirksData[quirkId]
1776
+ });
1777
+ }
1778
+ return data;
1779
+ }, [quirksData, value]);
1780
+ return {
1781
+ loading,
1782
+ error,
1783
+ index: contextStateQuirkData
1784
+ };
1785
+ }
1786
+
1787
+ // src/components/ContextDevTools.tsx
1788
+ import { css as css15 } from "@emotion/react";
1789
+
1790
+ // src/styles/Theme.tsx
1791
+ function Theme() {
1792
+ return /* @__PURE__ */ jsx("style", null, `
485
1793
  :root {
486
1794
  --brand-primary-1: #438fd5; /* bright blue */
487
1795
  --brand-primary-2: #f4220b; /* red */
@@ -846,7 +2154,29 @@ Add the correct display in Chrome and Safari.
846
2154
 
847
2155
  summary {
848
2156
  display: list-item;
849
- }`)}import{useEffect as Jt,useState as jt}from"react";import{useMountedState as eo}from"react-use";var Je=()=>{let[t,n]=jt(!1),r=eo();return Jt(()=>{setTimeout(()=>{r()&&n(!0)},1e3)},[r]),t?e("article",{css:h.page},e("h1",null,"Loading..."),e("p",null,"Connecting to Uniform API for complete data.")):null};var to=je`
2157
+ }`);
2158
+ }
2159
+
2160
+ // src/components/StatusPages/AdditionalDataLoading.tsx
2161
+ import { useEffect as useEffect2, useState as useState4 } from "react";
2162
+ import { useMountedState } from "react-use";
2163
+ var AdditionalDataLoading = () => {
2164
+ const [viz, setViz] = useState4(false);
2165
+ const mounted = useMountedState();
2166
+ useEffect2(() => {
2167
+ setTimeout(() => {
2168
+ if (mounted()) {
2169
+ setViz(true);
2170
+ }
2171
+ }, 1e3);
2172
+ }, [mounted]);
2173
+ return viz ? /* @__PURE__ */ jsx("article", {
2174
+ css: styles.page
2175
+ }, /* @__PURE__ */ jsx("h1", null, "Loading..."), /* @__PURE__ */ jsx("p", null, "Connecting to Uniform API for complete data.")) : null;
2176
+ };
2177
+
2178
+ // src/components/ContextDevTools.tsx
2179
+ var mainLayoutStyle = css15`
850
2180
  background: var(--white);
851
2181
  padding: var(--spacing-base);
852
2182
  overflow-y: auto;
@@ -875,7 +2205,59 @@ summary {
875
2205
  &::-webkit-scrollbar-thumb:hover {
876
2206
  background: var(--gray-500);
877
2207
  }
878
- `;function et(t){let n=Ye(t.settings,t.state.manifest),r=Xe(t.settings,t.state.data.quirks),o={...t,dimensionIndex:n,quirksIndex:r},i=()=>{var a;if(n.loading||r.loading)return e(Je,null);if(t.settings.route&&t.settings.route.match(/overrides\/\w+/))return e(ve,{...o});switch((a=t.settings)==null?void 0:a.route){case void 0:case"/":case"/dimensions":return e(Ee,{...o});case"/overrides":return e(Oe,{...o});case"/overrides/add":return e(ve,{...o});case"/quirks":return e($e,{...o});case"/settings":return e(Ke,{...o});default:return e(Le,null)}};return e(xe,{settings:t.settings,saveSettings:t.saveSettings},e(ce,null),e("div",{css:je`
2208
+ `;
2209
+ function ContextDevTools(props) {
2210
+ const dimensionIndex = useDimensionIndex(props.settings, props.state.manifest);
2211
+ const quirksIndex = useQuirkIndex(props.settings, props.state.data.quirks);
2212
+ const routeProps = {
2213
+ ...props,
2214
+ dimensionIndex,
2215
+ quirksIndex
2216
+ };
2217
+ const component = () => {
2218
+ var _a;
2219
+ if (dimensionIndex.loading || quirksIndex.loading) {
2220
+ return /* @__PURE__ */ jsx(AdditionalDataLoading, null);
2221
+ }
2222
+ if (props.settings.route) {
2223
+ if (props.settings.route.match(/overrides\/\w+/)) {
2224
+ return /* @__PURE__ */ jsx(AddOverride, {
2225
+ ...routeProps
2226
+ });
2227
+ }
2228
+ }
2229
+ switch ((_a = props.settings) == null ? void 0 : _a.route) {
2230
+ case void 0:
2231
+ case "/":
2232
+ case "/dimensions":
2233
+ return /* @__PURE__ */ jsx(Dimensions, {
2234
+ ...routeProps
2235
+ });
2236
+ case "/overrides":
2237
+ return /* @__PURE__ */ jsx(Overrides, {
2238
+ ...routeProps
2239
+ });
2240
+ case "/overrides/add":
2241
+ return /* @__PURE__ */ jsx(AddOverride, {
2242
+ ...routeProps
2243
+ });
2244
+ case "/quirks":
2245
+ return /* @__PURE__ */ jsx(Quirks, {
2246
+ ...routeProps
2247
+ });
2248
+ case "/settings":
2249
+ return /* @__PURE__ */ jsx(Settings, {
2250
+ ...routeProps
2251
+ });
2252
+ default:
2253
+ return /* @__PURE__ */ jsx(NotFound, null);
2254
+ }
2255
+ };
2256
+ return /* @__PURE__ */ jsx(DevToolsSettingsContextProvider, {
2257
+ settings: props.settings,
2258
+ saveSettings: props.saveSettings
2259
+ }, /* @__PURE__ */ jsx(Theme, null), /* @__PURE__ */ jsx("div", {
2260
+ css: css15`
879
2261
  display: grid;
880
2262
  grid-template-columns: 200px auto;
881
2263
  font-weight: var(--font-regular);
@@ -884,7 +2266,108 @@ summary {
884
2266
  line-height: var(--base-line-height);
885
2267
  height: var(--min-height);
886
2268
  min-width: var(--site-width);
887
- `},e(ke,{...t}),e("main",{css:to},e(he,{...t}),i())))}import{Context as oo,createDebugConsoleLogDrain as ro}from"@uniformdev/context";import*as D from"react";function tt({context:t,initialSettings:n}){let r=t!=null?t:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=r!=null?r:new oo({manifest:{project:{}}}),[i,a]=D.useState({scores:{},quirks:{}}),[u,g]=D.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[s,c]=D.useState(n!=null?n:{});D.useEffect(()=>{var f;let m=ro((f=s.logLevel)!=null?f:"none");return o.events.on("log",m),()=>{o.events.off("log",m)}},[s,o]),D.useEffect(()=>{let m=()=>{g(y=>({...y,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},f=y=>{!y.changed||g(C=>({...C,personalizations:[...C.personalizations,y]}))},b=y=>{!y.variantAssigned||g(C=>({...C,tests:[...C.tests,y]}))};return o.events.on("personalizationResult",f),o.events.on("testResult",b),o.storage.events.on("*",m),()=>{o.storage.events.off("*",m),o.events.off("personalizationResult",f),o.events.off("testResult",b)}},[o,s]);let l=D.useMemo(()=>({update:f=>o.update(f),forget:()=>o.forget(!1),rawUpdate:f=>o.storage.updateData(f),resetOverrides:()=>{let f=[];return Object.entries(i.scores).map(([b,y])=>{f.push({type:"modscore",data:{dimension:b,delta:-y}})}),a({...i,scores:{}}),o.storage.updateData(f)},override:f=>{let b={},y={};return f.map(C=>{C.type==="modscore"&&(b[C.data.dimension]=C.data.delta),C.type==="setquirk"&&(y[C.data.key]=C.data.value)}),a({scores:{...i.scores,...b},quirks:{...i.quirks,...y}}),o.storage.updateData(f)}}),[o,i]);return r?e(et,{state:u,actions:l,overrides:i,settings:s,saveSettings:c}):e("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}import{css as ao}from"@emotion/react";import*as rt from"react";import{css as no}from"@emotion/react";var io=no`
2269
+ `
2270
+ }, /* @__PURE__ */ jsx(Menu, {
2271
+ ...props
2272
+ }), /* @__PURE__ */ jsx("main", {
2273
+ css: mainLayoutStyle
2274
+ }, /* @__PURE__ */ jsx(ConnectApiKey, {
2275
+ ...props
2276
+ }), component())));
2277
+ }
2278
+
2279
+ // src/components/EmbeddedContextDevTools.tsx
2280
+ import {
2281
+ Context as Context2,
2282
+ createDebugConsoleLogDrain
2283
+ } from "@uniformdev/context";
2284
+ import * as React7 from "react";
2285
+ function EmbeddedContextDevTools({ context, initialSettings }) {
2286
+ const contextValue = context != null ? context : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
2287
+ const contextInstance = contextValue != null ? contextValue : new Context2({ manifest: { project: {} } });
2288
+ const [state, setState] = React7.useState({
2289
+ data: contextInstance.storage.data,
2290
+ manifest: contextInstance.manifest.data,
2291
+ scores: contextInstance.scores,
2292
+ personalizations: [],
2293
+ tests: []
2294
+ });
2295
+ const [settings, setSettings] = React7.useState(initialSettings != null ? initialSettings : {});
2296
+ React7.useEffect(() => {
2297
+ var _a;
2298
+ const drain = createDebugConsoleLogDrain((_a = settings.logLevel) != null ? _a : "none");
2299
+ contextInstance.events.on("log", drain);
2300
+ return () => {
2301
+ contextInstance.events.off("log", drain);
2302
+ };
2303
+ }, [settings, contextInstance]);
2304
+ React7.useEffect(() => {
2305
+ const onContextDataUpdated = () => {
2306
+ const quirkOverrides = applyQuirkOverrides({
2307
+ quirks: contextInstance.storage.data.quirks,
2308
+ quirkOverrides: settings.quirkOverrides
2309
+ });
2310
+ if (quirkOverrides) {
2311
+ console.log("Applying overridden quirks:", quirkOverrides);
2312
+ contextInstance.update({ quirks: quirkOverrides });
2313
+ }
2314
+ const overrideCommands = applyScoreOverrides({
2315
+ scores: contextInstance.scores,
2316
+ scoreOverrides: settings.scoreOverrides
2317
+ });
2318
+ if (overrideCommands.length) {
2319
+ console.log("Applying overridden scores:", overrideCommands);
2320
+ contextInstance.storage.updateData(overrideCommands);
2321
+ }
2322
+ setState((old) => ({
2323
+ ...old,
2324
+ scores: contextInstance.scores,
2325
+ data: contextInstance.storage.data,
2326
+ manifest: contextInstance.manifest.data
2327
+ }));
2328
+ };
2329
+ const onPersonalizationResult = (e) => {
2330
+ if (!e.changed)
2331
+ return;
2332
+ setState((old) => ({ ...old, personalizations: [...old.personalizations, e] }));
2333
+ };
2334
+ const onTestResult = (e) => {
2335
+ if (!e.variantAssigned)
2336
+ return;
2337
+ setState((old) => ({ ...old, tests: [...old.tests, e] }));
2338
+ };
2339
+ contextInstance.events.on("personalizationResult", onPersonalizationResult);
2340
+ contextInstance.events.on("testResult", onTestResult);
2341
+ contextInstance.storage.events.on("*", onContextDataUpdated);
2342
+ return () => {
2343
+ contextInstance.storage.events.off("*", onContextDataUpdated);
2344
+ contextInstance.events.off("personalizationResult", onPersonalizationResult);
2345
+ contextInstance.events.off("testResult", onTestResult);
2346
+ };
2347
+ }, [contextInstance, settings]);
2348
+ const actions = React7.useMemo(() => {
2349
+ const actions2 = {
2350
+ update: (up) => contextInstance.update(up),
2351
+ forget: () => contextInstance.forget(false),
2352
+ rawUpdate: (commands) => contextInstance.storage.updateData(commands)
2353
+ };
2354
+ return actions2;
2355
+ }, [contextInstance]);
2356
+ return contextValue ? /* @__PURE__ */ jsx(ContextDevTools, {
2357
+ state,
2358
+ actions,
2359
+ settings,
2360
+ saveSettings: setSettings
2361
+ }) : /* @__PURE__ */ jsx("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
2362
+ }
2363
+
2364
+ // src/components/ToggleEmbeddedContextDevTools.tsx
2365
+ import { css as css17 } from "@emotion/react";
2366
+ import * as React8 from "react";
2367
+
2368
+ // src/components/Buttons/EmbedToggleButton.tsx
2369
+ import { css as css16 } from "@emotion/react";
2370
+ var btnStyle3 = css16`
888
2371
  align-items: center;
889
2372
  border-radius: var(--rounded-full);
890
2373
  background: var(--brand-secondary-5);
@@ -910,11 +2393,54 @@ summary {
910
2393
  max-width: 100%;
911
2394
  height: auto;
912
2395
  }
913
- `,ot=({...t})=>e("button",{type:"button",css:io,...t},e("span",{hidden:!0},"Uniform devtools"),e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),e("path",{d:"M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",fill:"currentColor"}),e("path",{d:"M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",fill:"currentColor"})));function ri(t){var i;let[n,r]=rt.useState(!1);return((i=t.context)!=null?i:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?e("div",null,e(ce,null),e(ot,{onClick:()=>r(a=>!a)}),n?e("div",{css:ao`
2396
+ `;
2397
+ var EmbedToggleButton = ({ ...props }) => {
2398
+ return /* @__PURE__ */ jsx("button", {
2399
+ type: "button",
2400
+ css: btnStyle3,
2401
+ ...props
2402
+ }, /* @__PURE__ */ jsx("span", {
2403
+ hidden: true
2404
+ }, "Uniform devtools"), /* @__PURE__ */ jsx("svg", {
2405
+ width: "24",
2406
+ height: "24",
2407
+ viewBox: "0 0 24 24",
2408
+ fill: "none",
2409
+ xmlns: "http://www.w3.org/2000/svg"
2410
+ }, /* @__PURE__ */ jsx("path", {
2411
+ d: "M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",
2412
+ fill: "currentColor"
2413
+ }), /* @__PURE__ */ jsx("path", {
2414
+ d: "M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",
2415
+ fill: "currentColor"
2416
+ }), /* @__PURE__ */ jsx("path", {
2417
+ d: "M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",
2418
+ fill: "currentColor"
2419
+ })));
2420
+ };
2421
+
2422
+ // src/components/ToggleEmbeddedContextDevTools.tsx
2423
+ function ToggleEmbeddedContextDevTools(props) {
2424
+ var _a;
2425
+ const [devtoolsOpen, setDevtoolsOpen] = React8.useState(false);
2426
+ const contextValue = (_a = props.context) != null ? _a : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
2427
+ return contextValue ? /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx(Theme, null), /* @__PURE__ */ jsx(EmbedToggleButton, {
2428
+ onClick: () => setDevtoolsOpen((prev) => !prev)
2429
+ }), devtoolsOpen ? /* @__PURE__ */ jsx("div", {
2430
+ css: css17`
914
2431
  box-shadow: var(--shadow-base);
915
2432
  position: fixed;
916
2433
  bottom: 82px;
917
2434
  right: var(--spacing-base);
918
2435
  z-index: var(--z-10);
919
2436
  max-width: var(--site-width);
920
- `},e(tt,{...t})):null):e("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}export{et as ContextDevTools,tt as EmbeddedContextDevTools,ri as ToggleEmbeddedContextDevTools};
2437
+ `
2438
+ }, /* @__PURE__ */ jsx(EmbeddedContextDevTools, {
2439
+ ...props
2440
+ })) : null) : /* @__PURE__ */ jsx("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
2441
+ }
2442
+ export {
2443
+ ContextDevTools,
2444
+ EmbeddedContextDevTools,
2445
+ ToggleEmbeddedContextDevTools
2446
+ };