@uniformdev/context-devtools 17.7.1-alpha.34 → 18.0.1-alpha.3

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 (5) hide show
  1. package/LICENSE.txt +1 -1
  2. package/dist/esm/index.js +1924 -73
  3. package/dist/index.d.ts +9 -9
  4. package/dist/index.js +1952 -73
  5. package/package.json +8 -8
package/dist/index.js CHANGED
@@ -1,4 +1,190 @@
1
- "use strict";var to=Object.create;var me=Object.defineProperty;var oo=Object.getOwnPropertyDescriptor;var ro=Object.getOwnPropertyNames;var no=Object.getPrototypeOf,io=Object.prototype.hasOwnProperty;var so=(e,o)=>{for(var r in o)me(e,r,{get:o[r],enumerable:!0})},et=(e,o,r,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of ro(o))!io.call(e,n)&&n!==r&&me(e,n,{get:()=>o[n],enumerable:!(t=oo(o,n))||t.enumerable});return e};var F=(e,o,r)=>(r=e!=null?to(no(e)):{},et(o||!e||!e.__esModule?me(r,"default",{value:e,enumerable:!0}):r,e)),ao=e=>et(me({},"__esModule",{value:!0}),e);var Qo={};so(Qo,{ContextDevTools:()=>Ye,EmbeddedContextDevTools:()=>Xe,ToggleEmbeddedContextDevTools:()=>Bo});module.exports=ao(Qo);var u=require("@emotion/react"),y=F(require("react"));var We=require("@emotion/react"),Wt=require("@uniformdev/design-system");var K=require("@uniformdev/context/api"),tt=F(require("react")),ot=require("react-use");function rt({apiHost:e,apiKey:o,projectId:r},t){let{loading:n,error:s,value:l}=(0,ot.useAsync)(async()=>{if(!o||!r)return d;let m=(await new K.UncachedDimensionClient({projectId:r,apiKey:o,apiHost:e||void 0}).get()).dimensions,i={};return m.map(a=>{var c,f,g,h,C,T,D,G;if(i[a.dim]={...(0,K.computeDimensionDefinitionDisplayData)(a),cap:a.cap,str:(h=(g=(f=(c=t==null?void 0:t.project.pz)==null?void 0:c.sig)==null?void 0:f[a.dim])==null?void 0:g.str)!=null?h:50},i[a.dim].type==="Enrichment"){let $=a.dim.split("_")[0];i[a.dim].cap=(G=(D=(T=(C=t==null?void 0:t.project.pz)==null?void 0:C.enr)==null?void 0:T[$])==null?void 0:D.cap)!=null?G:100}}),i},[e,o,r]),d=tt.useMemo(()=>{var m,i,a,c;let p={};return t&&(Object.entries((i=(m=t==null?void 0:t.project.pz)==null?void 0:m.sig)!=null?i:{}).map(([f,g])=>{let h=(0,K.computeDimensionDisplayData)(f,t);h&&(p[f]={...g,...h})}),Object.entries((c=(a=t==null?void 0:t.project.pz)==null?void 0:a.enr)!=null?c:{}).map(([f,g])=>{var T;let h=(0,K.computeDimensionDisplayData)(f,t),C={cap:(T=g.cap)!=null?T:100,str:10};h&&(p[f]={...h,cap:C.cap,str:C.str})}),l&&Object.entries(l).map(([f,g])=>{p[f]={...p[f],...g}})),p},[t,l]);return{loading:n,error:s,index:d}}var nt=require("@uniformdev/context/api"),it=require("react"),st=require("react-use");function at({apiHost:e,apiKey:o,projectId:r},t){let{loading:n,error:s,value:l}=(0,st.useAsync)(async()=>{if(!o||!r)return{};let m=await new nt.UncachedQuirkClient({projectId:r,apiKey:o,apiHost:e||void 0}).get(),i={};return m.quirks.map(a=>{i[a.id]={...a,value:t[a.id]}}),i},[e,o,r]),d=(0,it.useMemo)(()=>{let p={};return Object.entries(t).map(([m,i])=>p[m]={value:i,id:m,name:m}),l&&Object.entries(l).map(([m,i])=>p[m]={...i,value:t[m]}),p},[t,l]);return{loading:n,error:s,index:d}}var ue=require("react"),co=require("@emotion/react/jsx-runtime"),ct=(0,ue.createContext)({settings:{},saveSettings:()=>{}}),ge=()=>(0,ue.useContext)(ct),lt=({children:e,settings:o,saveSettings:r})=>(0,co.jsx)(ct.Provider,{value:{settings:o,saveSettings:r},children:e});var lo=require("@emotion/react/jsx-runtime");function ve(){return(0,lo.jsx)("style",{children:`
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
24
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
25
+
26
+ // src/index.ts
27
+ var src_exports = {};
28
+ __export(src_exports, {
29
+ ContextDevTools: () => ContextDevTools,
30
+ EmbeddedContextDevTools: () => EmbeddedContextDevTools,
31
+ ToggleEmbeddedContextDevTools: () => ToggleEmbeddedContextDevTools
32
+ });
33
+ module.exports = __toCommonJS(src_exports);
34
+
35
+ // ../../scripts/emotion-jsx-shim.js
36
+ var import_react = require("@emotion/react");
37
+ var React = __toESM(require("react"));
38
+
39
+ // src/components/ContextDevTools.tsx
40
+ var import_react18 = require("@emotion/react");
41
+ var import_design_system14 = require("@uniformdev/design-system");
42
+
43
+ // src/hooks/useDimensionIndex.ts
44
+ var import_api = require("@uniformdev/context/api");
45
+ var React2 = __toESM(require("react"));
46
+ var import_react_use = require("react-use");
47
+ function useDimensionIndex({ apiHost, apiKey, projectId }, manifest) {
48
+ const { loading, error, value } = (0, import_react_use.useAsync)(async () => {
49
+ if (!apiKey || !projectId) {
50
+ return manifestData;
51
+ }
52
+ const client = new import_api.UncachedDimensionClient({
53
+ projectId,
54
+ apiKey,
55
+ apiHost: apiHost ? apiHost : void 0
56
+ });
57
+ const dimensions = (await client.get()).dimensions;
58
+ const result = {};
59
+ dimensions.map((dimension) => {
60
+ var _a, _b, _c, _d, _e, _f, _g, _h;
61
+ result[dimension.dim] = {
62
+ ...(0, import_api.computeDimensionDefinitionDisplayData)(dimension),
63
+ cap: dimension.cap,
64
+ str: (_d = (_c = (_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) == null ? void 0 : _b[dimension.dim]) == null ? void 0 : _c.str) != null ? _d : 50
65
+ };
66
+ if (result[dimension.dim].type === "Enrichment") {
67
+ const enrId = dimension.dim.split("_")[0];
68
+ result[dimension.dim].cap = (_h = (_g = (_f = (_e = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _e.enr) == null ? void 0 : _f[enrId]) == null ? void 0 : _g.cap) != null ? _h : 100;
69
+ }
70
+ });
71
+ return result;
72
+ }, [apiHost, apiKey, projectId]);
73
+ const manifestData = React2.useMemo(() => {
74
+ var _a, _b, _c, _d;
75
+ const data = {};
76
+ if (!manifest) {
77
+ return data;
78
+ }
79
+ Object.entries((_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) != null ? _b : {}).map(([dimensionId, dimension]) => {
80
+ const dim = (0, import_api.computeDimensionDisplayData)(dimensionId, manifest);
81
+ if (dim) {
82
+ data[dimensionId] = { ...dimension, ...dim };
83
+ }
84
+ });
85
+ Object.entries((_d = (_c = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _c.enr) != null ? _d : {}).map(([dimensionId, enr]) => {
86
+ var _a2;
87
+ const dim = (0, import_api.computeDimensionDisplayData)(dimensionId, manifest);
88
+ const signal = { cap: (_a2 = enr.cap) != null ? _a2 : 100, str: 10 };
89
+ if (dim) {
90
+ data[dimensionId] = { ...dim, cap: signal.cap, str: signal.str };
91
+ }
92
+ });
93
+ if (value) {
94
+ Object.entries(value).map(([dimensionId, dimension]) => {
95
+ data[dimensionId] = {
96
+ ...data[dimensionId],
97
+ ...dimension
98
+ };
99
+ });
100
+ }
101
+ return data;
102
+ }, [manifest, value]);
103
+ return {
104
+ loading,
105
+ error,
106
+ index: manifestData
107
+ };
108
+ }
109
+
110
+ // src/hooks/useQuirkIndex.ts
111
+ var import_api2 = require("@uniformdev/context/api");
112
+ var import_react2 = require("react");
113
+ var import_react_use2 = require("react-use");
114
+ function useQuirkIndex({ apiHost, apiKey, projectId }, quirksData) {
115
+ const { loading, error, value } = (0, import_react_use2.useAsync)(async () => {
116
+ if (!apiKey || !projectId) {
117
+ return {};
118
+ }
119
+ const client = new import_api2.UncachedQuirkClient({
120
+ projectId,
121
+ apiKey,
122
+ apiHost: apiHost ? apiHost : void 0
123
+ });
124
+ const quirksResponse = await client.get();
125
+ const quirksIndexData = {};
126
+ quirksResponse.quirks.map((quirkData) => {
127
+ quirksIndexData[quirkData.id] = { ...quirkData, value: quirksData[quirkData.id] };
128
+ });
129
+ return quirksIndexData;
130
+ }, [apiHost, apiKey, projectId]);
131
+ const contextStateQuirkData = (0, import_react2.useMemo)(() => {
132
+ const data = {};
133
+ Object.entries(quirksData).map(
134
+ ([quirkId, queryrValue]) => data[quirkId] = {
135
+ value: queryrValue,
136
+ id: quirkId,
137
+ name: quirkId
138
+ }
139
+ );
140
+ if (value) {
141
+ Object.entries(value).map(
142
+ ([quirkId, quirkValue]) => data[quirkId] = {
143
+ ...quirkValue,
144
+ value: quirksData[quirkId]
145
+ }
146
+ );
147
+ }
148
+ return data;
149
+ }, [quirksData, value]);
150
+ return {
151
+ loading,
152
+ error,
153
+ index: contextStateQuirkData
154
+ };
155
+ }
156
+
157
+ // src/lib/DevToolsSettingsContext.tsx
158
+ var import_react3 = require("react");
159
+ var import_jsx_runtime = require("@emotion/react/jsx-runtime");
160
+ var DevToolsSettingsContext = (0, import_react3.createContext)({
161
+ settings: {},
162
+ saveSettings: () => {
163
+ return;
164
+ }
165
+ });
166
+ var useDevToolsSettingsContext = () => (0, import_react3.useContext)(DevToolsSettingsContext);
167
+ var DevToolsSettingsContextProvider = ({
168
+ children,
169
+ settings,
170
+ saveSettings
171
+ }) => {
172
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
173
+ DevToolsSettingsContext.Provider,
174
+ {
175
+ value: {
176
+ settings,
177
+ saveSettings
178
+ },
179
+ children
180
+ }
181
+ );
182
+ };
183
+
184
+ // src/utils/Theme.tsx
185
+ var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
186
+ function Theme() {
187
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
2
188
  :root {
3
189
  --site-width: 700px;
4
190
 
@@ -8,7 +194,15 @@
8
194
 
9
195
  --min-height: 450px;
10
196
  }
11
- `})}var Ne=require("@uniformdev/design-system");var W=require("@emotion/react"),fe=W.css`
197
+ ` });
198
+ }
199
+
200
+ // src/components/CallToAction/ConnectApiKey.tsx
201
+ var import_design_system = require("@uniformdev/design-system");
202
+
203
+ // src/components/CallToAction/cta.styles.ts
204
+ var import_react4 = require("@emotion/react");
205
+ var cta = import_react4.css`
12
206
  background-color: var(--gray-100);
13
207
  padding: var(--spacing-base) var(--spacing-md);
14
208
  margin: var(--spacing-base) 0;
@@ -16,21 +210,25 @@
16
210
  &:first-of-type {
17
211
  margin: 0 0 var(--spacing-base);
18
212
  }
19
- `,dt=W.css`
213
+ `;
214
+ var ctaWithIcon = import_react4.css`
20
215
  background: var(--gray-100)
21
216
  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")
22
217
  no-repeat var(--spacing-sm) var(--spacing-base);
23
218
  padding: var(--spacing-base) var(--spacing-xl);
24
- `,he=W.css`
219
+ `;
220
+ var ctaTitle = import_react4.css`
25
221
  color: var(--brand-secondary-1);
26
222
  margin: 0;
27
223
  font-size: var(--fs-base);
28
224
  font-weight: var(--fw-bold);
29
- `,be=W.css`
225
+ `;
226
+ var ctaText = import_react4.css`
30
227
  color: var(--brand-secondary-1);
31
228
  margin: var(--spacing-xs) 0 0;
32
229
  font-size: var(--fs-sm);
33
- `,pt=W.css`
230
+ `;
231
+ var ctaClose = import_react4.css`
34
232
  align-items: center;
35
233
  border: none;
36
234
  background: transparent
@@ -50,17 +248,86 @@
50
248
  &:hover {
51
249
  opacity: 0.6;
52
250
  }
53
- `,xe=W.css`
251
+ `;
252
+ var ctaBtnGroup = import_react4.css`
54
253
  display: flex;
55
254
  margin: var(--spacing-sm) 0 0;
56
255
  gap: var(--spacing-base);
57
- `;var B=require("@emotion/react/jsx-runtime"),Ze=({settings:e,saveSettings:o})=>{let r=()=>{o({...e,route:"/connect"})},t=()=>{o({...e,ignoreApiKeyPrompt:!0})},n=e.route==="/connect",s=!(e!=null&&e.apiKey);return!e.ignoreApiKeyPrompt&&s&&!n?(0,B.jsxs)("div",{css:[fe,dt],children:[(0,B.jsx)("h2",{css:he,children:"Connect to a Uniform Project"}),(0,B.jsx)("p",{css:be,children:"This allows reading human-readable labels for the dimensions."}),(0,B.jsxs)("div",{css:xe,children:[(0,B.jsx)(Ne.Button,{buttonType:"secondary",onClick:r,children:"Connect this site"}),(0,B.jsx)(Ne.Button,{buttonType:"ghost",onClick:t,children:"Skip for now"})]}),(0,B.jsx)("button",{type:"button",css:pt,title:"close",onClick:t,children:(0,B.jsx)("span",{hidden:!0,children:"Close"})})]}):null};var E=require("@emotion/react");var mt=require("@emotion/react"),po=require("@emotion/react/jsx-runtime"),ut=()=>{var r;let e=typeof chrome!="undefined"&&typeof chrome.storage!="undefined"&&((r=chrome==null?void 0:chrome.runtime)==null?void 0:r.getManifest()),o=e?e==null?void 0:e.version:"DEV";return(0,po.jsx)("div",{css:mt.css`
256
+ `;
257
+
258
+ // src/components/CallToAction/ConnectApiKey.tsx
259
+ var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
260
+ var ConnectApiKey = ({ settings, saveSettings }) => {
261
+ const handleRedirect = () => {
262
+ saveSettings({ ...settings, route: "/connect" });
263
+ };
264
+ const dismissPrompt = () => {
265
+ saveSettings({ ...settings, ignoreApiKeyPrompt: true });
266
+ };
267
+ const isOnConnect = settings.route === "/connect";
268
+ const missingApiKey = !(settings == null ? void 0 : settings.apiKey);
269
+ return !settings.ignoreApiKeyPrompt && missingApiKey && !isOnConnect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { css: [cta, ctaWithIcon], children: [
270
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { css: ctaTitle, children: "Connect to a Uniform Project" }),
271
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { css: ctaText, children: "This allows reading human-readable labels for the dimensions." }),
272
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { css: ctaBtnGroup, children: [
273
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Button, { buttonType: "secondary", onClick: handleRedirect, children: "Connect this site" }),
274
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system.Button, { buttonType: "ghost", onClick: dismissPrompt, children: "Skip for now" })
275
+ ] }),
276
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", css: ctaClose, title: "close", onClick: dismissPrompt, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { hidden: true, children: "Close" }) })
277
+ ] }) : null;
278
+ };
279
+
280
+ // src/components/Navigation/Menu.tsx
281
+ var import_react6 = require("@emotion/react");
282
+
283
+ // src/components/ExtensionVersion.tsx
284
+ var import_react5 = require("@emotion/react");
285
+ var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
286
+ var ExtensionVersion = () => {
287
+ var _a;
288
+ const manifestData = typeof chrome !== "undefined" && typeof chrome.storage !== "undefined" && ((_a = chrome == null ? void 0 : chrome.runtime) == null ? void 0 : _a.getManifest());
289
+ const extensionVersion = manifestData ? manifestData == null ? void 0 : manifestData.version : "DEV";
290
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
291
+ "div",
292
+ {
293
+ css: import_react5.css`
58
294
  font-size: var(--fs-sm);
59
295
  color: var(--gray-400);
60
296
  position: absolute;
61
297
  bottom: 2px;
62
298
  right: 5px;
63
- `,children:`v${o}`})};var uo=require("@emotion/react/jsx-runtime"),mo=({route:e,children:o,className:r})=>{let{settings:t,saveSettings:n}=ge();return(0,uo.jsx)("a",{href:"",className:r,onClick:s=>{s.preventDefault(),n({...t,route:e})},children:o})},oe=mo;var w=require("@emotion/react/jsx-runtime"),go=[{title:"Dimensions",href:"/dimensions",icon:`<svg
299
+ `,
300
+ children: `v${extensionVersion}`
301
+ }
302
+ );
303
+ };
304
+
305
+ // src/components/Navigation/NavigationLink.tsx
306
+ var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
307
+ var NavigationLink = ({ route, children, className }) => {
308
+ const { settings, saveSettings } = useDevToolsSettingsContext();
309
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
310
+ "a",
311
+ {
312
+ href: "",
313
+ className,
314
+ onClick: (e) => {
315
+ e.preventDefault();
316
+ saveSettings({ ...settings, route });
317
+ },
318
+ children
319
+ }
320
+ );
321
+ };
322
+ var NavigationLink_default = NavigationLink;
323
+
324
+ // src/components/Navigation/Menu.tsx
325
+ var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
326
+ var links = [
327
+ {
328
+ title: "Dimensions",
329
+ href: "/dimensions",
330
+ icon: `<svg
64
331
  width="24"
65
332
  height="24"
66
333
  viewBox="0 0 24 24"
@@ -77,10 +344,20 @@
77
344
  fill="currentColor"
78
345
  />
79
346
  </svg>
80
- `},{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">
347
+ `
348
+ },
349
+ {
350
+ title: "What if?",
351
+ href: "/overrides",
352
+ icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
81
353
  <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"/>
82
354
  </svg>
83
- `},{title:"Quirks",href:"/quirks",icon:`<svg
355
+ `
356
+ },
357
+ {
358
+ title: "Quirks",
359
+ href: "/quirks",
360
+ icon: `<svg
84
361
  width="24"
85
362
  height="24"
86
363
  viewBox="0 0 24 24"
@@ -95,32 +372,124 @@
95
372
  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"
96
373
  fill="currentColor"
97
374
  />
98
- </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">
375
+ </svg>`
376
+ },
377
+ {
378
+ title: "Settings",
379
+ href: "/settings",
380
+ icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
99
381
  <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"/>
100
382
  </svg>
101
- `}],vo=`<svg width="24" height="24" fill="white" viewBox="0 0 122.88 116.67" xmlns="http://www.w3.org/2000/svg">
383
+ `
384
+ }
385
+ ];
386
+ var googleChromeExtensionSvg = `<svg width="24" height="24" fill="white" viewBox="0 0 122.88 116.67" xmlns="http://www.w3.org/2000/svg">
102
387
  <g>
103
388
  <path d="M84.55,116.66c2.49,0,4.53-1.99,4.53-4.41V88.08c1.55-13.03,7.27-9.16,14-5.13 c16.27,9.74,27.08-15.88,13.93-23.78c-10.32-6.2-14.79,4.46-22.35,3.36c-2.92-0.43-4.95-3.5-5.59-8.17V36.9 c0-2.43-2.04-4.41-4.53-4.41H63.73c-17.18-2.12-1.93-11.37-1.93-19.98C61.81,5.6,55.38,0,47.45,0c-7.92,0-15.19,5.6-15.19,12.51 c0,8.12,15.78,17.86-1.64,19.98H4.53C2.04,32.49,0,34.47,0,36.9v17.42c1.33,7.43,6.49,9.15,13.1,4.25 c2.23-1.66,5.99-3.59,8.71-3.59c7.09,0,12.85,6.25,12.85,13.96S28.91,84.6,21.81,84.6c-2.53,0-4.89-0.8-6.89-2.19 c0,0.59-12.4-10.85-14.92,3.15v26.71c0,2.43,2.04,4.41,4.53,4.41c13.97,0,27.92,0,41.88-0.01c0.55-2.55-1.24-5.47-2.92-8 c-13.22-19.93,38.21-21.92,24.99,0.62c-0.65,1.11-1.3,2.19-1.8,3.24c-0.63,1.31-1.05,2.91-0.96,4.14L84.55,116.66L84.55,116.66z"></path>
104
389
  </g>
105
- </svg>`,gt=({...e})=>{var t,n;let o=s=>{var d;let l="active";return!((d=e.settings)!=null&&d.route)&&s==="/dimensions"||e.settings.route===s?l:""},r=Boolean(typeof window!="undefined"&&((n=(t=window.chrome)==null?void 0:t.runtime)==null?void 0:n.id));return(0,w.jsxs)("nav",{css:E.css`
390
+ </svg>`;
391
+ var Menu = ({ ...props }) => {
392
+ var _a, _b;
393
+ const isActivePath = (href) => {
394
+ var _a2;
395
+ const cssName = "active";
396
+ if (!((_a2 = props.settings) == null ? void 0 : _a2.route) && href === "/dimensions") {
397
+ return cssName;
398
+ }
399
+ return props.settings.route === href ? cssName : "";
400
+ };
401
+ const isChromeExtension = Boolean(typeof window !== "undefined" && ((_b = (_a = window.chrome) == null ? void 0 : _a.runtime) == null ? void 0 : _b.id));
402
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
403
+ "nav",
404
+ {
405
+ css: import_react6.css`
106
406
  background: var(--brand-secondary-1);
107
407
  padding: var(--spacing-base) var(--spacing-base) var(--spacing-md);
108
408
  min-width: 200px;
109
409
  display: flex;
110
410
  flex-direction: column;
111
411
  position: relative;
112
- `,children:[(0,w.jsx)("a",{css:E.css`
412
+ `,
413
+ children: [
414
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
415
+ "a",
416
+ {
417
+ css: import_react6.css`
113
418
  flex-grow: 0;
114
419
  display: inline-block;
115
420
  margin: 0 var(--spacing-base);
116
- `,href:"https://uniform.dev/",children:(0,w.jsxs)("svg",{css:{display:"block"},width:"120",height:"38",viewBox:"0 0 120 38",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,w.jsxs)("g",{clipPath:"url(#clip0_41_612)",children:[(0,w.jsx)("path",{d:"M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",fill:"#83C6E1"}),(0,w.jsx)("path",{d:"M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",fill:"#438FD5"}),(0,w.jsx)("path",{d:"M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",fill:"#F4220B"}),(0,w.jsx)("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"})]}),(0,w.jsx)("defs",{children:(0,w.jsx)("clipPath",{id:"clip0_41_612",children:(0,w.jsx)("rect",{width:"120",height:"38",fill:"white"})})})]})}),(0,w.jsx)("ul",{css:E.css`
421
+ `,
422
+ href: "https://uniform.dev/",
423
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
424
+ "svg",
425
+ {
426
+ css: { display: "block" },
427
+ width: "120",
428
+ height: "38",
429
+ viewBox: "0 0 120 38",
430
+ fill: "none",
431
+ xmlns: "http://www.w3.org/2000/svg",
432
+ children: [
433
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { clipPath: "url(#clip0_41_612)", children: [
434
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
435
+ "path",
436
+ {
437
+ d: "M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",
438
+ fill: "#83C6E1"
439
+ }
440
+ ),
441
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
442
+ "path",
443
+ {
444
+ d: "M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",
445
+ fill: "#438FD5"
446
+ }
447
+ ),
448
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
449
+ "path",
450
+ {
451
+ d: "M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",
452
+ fill: "#F4220B"
453
+ }
454
+ ),
455
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
456
+ "path",
457
+ {
458
+ 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",
459
+ fill: "white"
460
+ }
461
+ )
462
+ ] }),
463
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("clipPath", { id: "clip0_41_612", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { width: "120", height: "38", fill: "white" }) }) })
464
+ ]
465
+ }
466
+ )
467
+ }
468
+ ),
469
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
470
+ "ul",
471
+ {
472
+ css: import_react6.css`
117
473
  display: flex;
118
474
  flex-flow: column nowrap;
119
475
  padding: 0;
120
476
  margin: 0;
121
477
  list-style-type: none;
122
478
  flex-grow: 1;
123
- `,children:go.map((s,l)=>{var p,m,i,a;let d=0;return s.href==="/overrides"&&Object.keys((p=e.settings.scoreOverrides)!=null?p:{}).length>0&&(d=Object.keys((m=e.settings.scoreOverrides)!=null?m:{}).length),s.href==="/quirks"&&Object.keys((i=e.settings.quirkOverrides)!=null?i:{}).length>0&&(d=Object.keys((a=e.settings.quirkOverrides)!=null?a:{}).length),(0,w.jsx)("li",{css:E.css`
479
+ `,
480
+ children: links.map((item, index) => {
481
+ var _a2, _b2, _c, _d;
482
+ let overrideCount = 0;
483
+ if (item.href === "/overrides" && Object.keys((_a2 = props.settings.scoreOverrides) != null ? _a2 : {}).length > 0) {
484
+ overrideCount = Object.keys((_b2 = props.settings.scoreOverrides) != null ? _b2 : {}).length;
485
+ }
486
+ if (item.href === "/quirks" && Object.keys((_c = props.settings.quirkOverrides) != null ? _c : {}).length > 0) {
487
+ overrideCount = Object.keys((_d = props.settings.quirkOverrides) != null ? _d : {}).length;
488
+ }
489
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
490
+ "li",
491
+ {
492
+ css: import_react6.css`
124
493
  padding: 0;
125
494
  margin: 0;
126
495
  list-style-type: none;
@@ -128,7 +497,11 @@
128
497
  &:last-of-type {
129
498
  margin-top: auto;
130
499
  }
131
- `,children:(0,w.jsxs)(oe,{css:E.css`
500
+ `,
501
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
502
+ NavigationLink_default,
503
+ {
504
+ css: import_react6.css`
132
505
  align-items: center;
133
506
  border-radius: var(--rounded-base);
134
507
  display: flex;
@@ -142,10 +515,25 @@
142
515
  &.active {
143
516
  background: var(--gray-700);
144
517
  }
145
- `,className:o(s.href),route:s.href,children:[(0,w.jsx)("i",{css:E.css`
518
+ `,
519
+ className: isActivePath(item.href),
520
+ route: item.href,
521
+ children: [
522
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
523
+ "i",
524
+ {
525
+ css: import_react6.css`
146
526
  align-items: center;
147
527
  display: flex;
148
- `,dangerouslySetInnerHTML:{__html:s.icon}}),s.title,d?(0,w.jsx)("span",{css:E.css`
528
+ `,
529
+ dangerouslySetInnerHTML: { __html: item.icon }
530
+ }
531
+ ),
532
+ item.title,
533
+ overrideCount ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
534
+ "span",
535
+ {
536
+ css: import_react6.css`
149
537
  font-size: var(--fs-xxs);
150
538
  display: inline-block;
151
539
  width: 12px;
@@ -154,7 +542,25 @@
154
542
  background-color: var(--red-tooltip);
155
543
  text-align: center;
156
544
  line-height: 12px;
157
- `,children:d}):null]})},l)})}),!r&&(0,w.jsxs)("a",{target:"_blank",href:"https://chrome.google.com/webstore/detail/uniform-context/dcmlokofjljnfjcknpmhjocogllfbhkg",css:E.css`
545
+ `,
546
+ children: overrideCount
547
+ }
548
+ ) : null
549
+ ]
550
+ }
551
+ )
552
+ },
553
+ index
554
+ );
555
+ })
556
+ }
557
+ ),
558
+ !isChromeExtension && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
559
+ "a",
560
+ {
561
+ target: "_blank",
562
+ href: "https://chrome.google.com/webstore/detail/uniform-context/dcmlokofjljnfjcknpmhjocogllfbhkg",
563
+ css: import_react6.css`
158
564
  align-items: center;
159
565
  border-radius: var(--rounded-base);
160
566
  display: flex;
@@ -169,14 +575,110 @@
169
575
  &.active {
170
576
  background: var(--gray-700);
171
577
  }
172
- `,rel:"noreferrer",children:[(0,w.jsx)("i",{css:E.css`
578
+ `,
579
+ rel: "noreferrer",
580
+ children: [
581
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
582
+ "i",
583
+ {
584
+ css: import_react6.css`
173
585
  align-items: center;
174
586
  display: flex;
175
- `,dangerouslySetInnerHTML:{__html:vo}}),"Install Chrome Extension"]}),(0,w.jsx)(ut,{})]})};var Ht=require("@uniformdev/design-system"),X=require("formik"),ie=F(require("yup"));function ce({scores:e,scoreOverrides:o}){let r=[];return o?(Object.entries(o).forEach(([t,n])=>{var d;let s=(d=e[t])!=null?d:0;if(s===n.override)return;let l=n.override-s;r.push({type:"modscoreS",data:{dimension:t,delta:l}})}),r):[]}function ye({quirks:e,quirkOverrides:o}){let r={};if(!!o)return Object.entries(o).forEach(([t,n])=>{e[t]!==n.override&&(r[t]=n.override)}),Object.keys(r).length>0?r:void 0}var Ce=require("@uniformdev/context");function vt({manifest:e,visitor:o,override:r}){let t=new Ce.Context({manifest:e,transitionStore:new ze({initialData:o})}),n={...t.scores};t.storage.updateData([r]);let l={...{...t.scores}};return Object.entries(l).forEach(([d,p])=>{n[d]===p&&delete l[d]}),l}var ze=class extends Ce.TransitionDataStore{async handleDelete(){}async handleUpdateData(){}};var Y=require("@emotion/react"),ft=F(require("react")),H=require("@emotion/react/jsx-runtime"),ht=(0,Y.css)({willChange:"height"}),fo=Y.css`
587
+ `,
588
+ dangerouslySetInnerHTML: { __html: googleChromeExtensionSvg }
589
+ }
590
+ ),
591
+ "Install Chrome Extension"
592
+ ]
593
+ }
594
+ ),
595
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExtensionVersion, {})
596
+ ]
597
+ }
598
+ );
599
+ };
600
+
601
+ // src/components/Personalization/AddOverride.tsx
602
+ var import_design_system4 = require("@uniformdev/design-system");
603
+ var import_formik = require("formik");
604
+ var yup = __toESM(require("yup"));
605
+
606
+ // src/lib/applyOverrides.ts
607
+ function applyScoreOverrides({
608
+ scores,
609
+ scoreOverrides
610
+ }) {
611
+ const commands = [];
612
+ if (!scoreOverrides)
613
+ return [];
614
+ Object.entries(scoreOverrides).forEach(([dim, override]) => {
615
+ var _a;
616
+ const score = (_a = scores[dim]) != null ? _a : 0;
617
+ if (score === override.override) {
618
+ return;
619
+ }
620
+ const delta = override.override - score;
621
+ commands.push({
622
+ type: "modscoreS",
623
+ data: { dimension: dim, delta }
624
+ });
625
+ });
626
+ return commands;
627
+ }
628
+ function applyQuirkOverrides({
629
+ quirks,
630
+ quirkOverrides
631
+ }) {
632
+ const quirkVector = {};
633
+ if (!quirkOverrides)
634
+ return void 0;
635
+ Object.entries(quirkOverrides).forEach(([quirk, override]) => {
636
+ const quirkValue = quirks[quirk];
637
+ if (quirkValue === override.override) {
638
+ return;
639
+ }
640
+ quirkVector[quirk] = override.override;
641
+ });
642
+ return Object.keys(quirkVector).length > 0 ? quirkVector : void 0;
643
+ }
644
+
645
+ // src/lib/computeOverrideEffects.ts
646
+ var import_context = require("@uniformdev/context");
647
+ function computeOverrideEffects({ manifest, visitor, override }) {
648
+ const contextCopy = new import_context.Context({
649
+ manifest,
650
+ transitionStore: new CopyTransitionDataStore({ initialData: visitor })
651
+ });
652
+ const currentScores = { ...contextCopy.scores };
653
+ contextCopy.storage.updateData([override]);
654
+ const newScores = { ...contextCopy.scores };
655
+ const changes = { ...newScores };
656
+ Object.entries(changes).forEach(([key, value]) => {
657
+ const oldScore = currentScores[key];
658
+ if (oldScore === value) {
659
+ delete changes[key];
660
+ }
661
+ });
662
+ return changes;
663
+ }
664
+ var CopyTransitionDataStore = class extends import_context.TransitionDataStore {
665
+ async handleDelete() {
666
+ }
667
+ async handleUpdateData() {
668
+ }
669
+ };
670
+
671
+ // src/components/Accordion/Accordion.tsx
672
+ var import_react7 = require("@emotion/react");
673
+ var React3 = __toESM(require("react"));
674
+ var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
675
+ var willChange = (0, import_react7.css)({ willChange: "height" });
676
+ var titleStyle = import_react7.css`
176
677
  border-bottom: 2px solid var(--brand-secondary-1);
177
678
  font-size: var(--fs-base);
178
679
  margin: 0;
179
- `,ho=Y.css`
680
+ `;
681
+ var btnStyle = import_react7.css`
180
682
  align-items: center;
181
683
  border: none;
182
684
  background: none;
@@ -186,24 +688,119 @@
186
688
  padding: var(--spacing-sm) 0;
187
689
  font-weight: var(--fw-bold);
188
690
  justify-content: space-between;
189
- `,bo=Y.css`
691
+ `;
692
+ var iconStyle = import_react7.css`
190
693
  align-self: center;
191
- `,xo=Y.css`
694
+ `;
695
+ var iconActiveStyle = import_react7.css`
192
696
  transform: rotate(-180deg);
193
- `,we=({children:e})=>(0,H.jsx)("div",{css:[ht],children:e}),ke=({title:e,children:o})=>{let[r,t]=ft.useState(!1),n=e.split(" ").join("-").toLocaleLowerCase();return(0,H.jsxs)(H.Fragment,{children:[(0,H.jsx)("h3",{css:fo,children:(0,H.jsxs)("button",{"aria-expanded":r,css:ho,title:e,id:n,"aria-controls":`${n}-section`,onClick:()=>t(s=>!s),type:"button",children:[e,(0,H.jsx)("i",{css:[bo,r?xo:void 0],children:(0,H.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,H.jsx)("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"})})})]})}),(0,H.jsx)("div",{id:`${n}-section`,css:[ht,Y.css`
697
+ `;
698
+ var Accordion = ({ children }) => {
699
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { css: [willChange], children });
700
+ };
701
+ var AccordionItem = ({ title, children }) => {
702
+ const [visibility, setVisibility] = React3.useState(false);
703
+ const id = title.split(" ").join("-").toLocaleLowerCase();
704
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
705
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { css: titleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
706
+ "button",
707
+ {
708
+ "aria-expanded": visibility,
709
+ css: btnStyle,
710
+ title,
711
+ id,
712
+ "aria-controls": `${id}-section`,
713
+ onClick: () => setVisibility((prev) => !prev),
714
+ type: "button",
715
+ children: [
716
+ title,
717
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { css: [iconStyle, visibility ? iconActiveStyle : void 0], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
718
+ "path",
719
+ {
720
+ d: "M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",
721
+ fill: "currentColor"
722
+ }
723
+ ) }) })
724
+ ]
725
+ }
726
+ ) }),
727
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
728
+ "div",
729
+ {
730
+ id: `${id}-section`,
731
+ css: [
732
+ willChange,
733
+ import_react7.css`
194
734
  padding: var(--spacing-sm) 0;
195
- `],role:"region","aria-labelledby":n,children:r?o:null})]})};var bt=require("@emotion/react"),yo=require("@emotion/react/jsx-runtime"),q=({children:e,...o})=>(0,yo.jsx)("fieldset",{css:bt.css`
735
+ `
736
+ ],
737
+ role: "region",
738
+ "aria-labelledby": id,
739
+ children: visibility ? children : null
740
+ }
741
+ )
742
+ ] });
743
+ };
744
+
745
+ // src/components/Form/Fieldset.tsx
746
+ var import_react8 = require("@emotion/react");
747
+ var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
748
+ var Fieldset = ({ children, ...props }) => {
749
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
750
+ "fieldset",
751
+ {
752
+ css: import_react8.css`
196
753
  border: none;
197
754
  padding: 0;
198
755
  & legend {
199
756
  margin-bottom: var(--spacing-base);
200
757
  }
201
- `,...o,children:e});var xt=require("@emotion/react"),Co=require("@emotion/react/jsx-runtime"),re=({children:e})=>(0,Co.jsx)("legend",{css:xt.css`
758
+ `,
759
+ ...props,
760
+ children
761
+ }
762
+ );
763
+ };
764
+
765
+ // src/components/Form/Legend.tsx
766
+ var import_react9 = require("@emotion/react");
767
+ var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
768
+ var Legend = ({ children }) => {
769
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
770
+ "legend",
771
+ {
772
+ css: import_react9.css`
202
773
  font-size: var(--fs-md);
203
774
  font-weight: var(--fw-bold);
204
775
  border-bottom: 1px solid var(--gray-400);
205
776
  width: 100%;
206
- `,children:e});var Te=require("@uniformdev/design-system");var wo=require("@emotion/react/jsx-runtime"),Ue=e=>({field:o,form:r,meta:t,...n})=>(0,wo.jsx)(e,{...o,...n,errorMessage:r.errors[o.name]});var De=Ue(Te.Input),yt=Ue(Te.InputSelect);var Se=require("@uniformdev/design-system");var N=require("@emotion/react"),Ct=N.css`
777
+ `,
778
+ children
779
+ }
780
+ );
781
+ };
782
+
783
+ // src/components/Inputs/FormikInputs.tsx
784
+ var import_design_system2 = require("@uniformdev/design-system");
785
+
786
+ // src/utils/withFormikField.tsx
787
+ var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
788
+ var withFormikField = (Component) => {
789
+ return ({ field, form, meta, ...rawProps }) => {
790
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { ...field, ...rawProps, errorMessage: form.errors[field.name] });
791
+ };
792
+ };
793
+
794
+ // src/components/Inputs/FormikInputs.tsx
795
+ var FormikInput = withFormikField(import_design_system2.Input);
796
+ var FormikInputSelect = withFormikField(import_design_system2.InputSelect);
797
+
798
+ // src/components/Inputs/FormikSliderInput.tsx
799
+ var import_design_system3 = require("@uniformdev/design-system");
800
+
801
+ // src/components/Inputs/inputs.styles.ts
802
+ var import_react10 = require("@emotion/react");
803
+ var textInput = import_react10.css`
207
804
  background: var(--white);
208
805
  border: 1px solid var(--gray-500);
209
806
  border-radius: var(--rounded-base);
@@ -214,26 +811,32 @@
214
811
  cursor: not-allowed;
215
812
  color: var(--gray-200);
216
813
  }
217
- `,yr=N.css`
814
+ `;
815
+ var inputWrapper = import_react10.css`
218
816
  margin: var(--spacing-base) 0;
219
- `,wt=N.css`
817
+ `;
818
+ var inputLabel = import_react10.css`
220
819
  color: var(--brand-secondary-1);
221
820
  display: flex;
222
821
  flex-direction: column;
223
822
  margin: 0 0 var(--spacing-sm);
224
- `,kt=N.css`
823
+ `;
824
+ var inputText = import_react10.css`
225
825
  color: var(--brand-secondary-1);
226
826
  display: block;
227
827
  flex: 1 100%;
228
828
  font-weight: var(--fw-bold);
229
829
  margin: 0 0 var(--spacing-sm);
230
- `,Cr=N.css`
830
+ `;
831
+ var inputCaption = import_react10.css`
231
832
  color: var(--gray-600);
232
833
  font-size: var(--fs-sm);
233
- `,wr=N.css`
834
+ `;
835
+ var errorMsg = import_react10.css`
234
836
  color: var(--brand-secondary-5);
235
837
  display: block;
236
- `,Tt=N.css`
838
+ `;
839
+ var rangeInput = import_react10.css`
237
840
  flex-direction: row;
238
841
  flex-wrap: wrap;
239
842
 
@@ -301,40 +904,96 @@
301
904
  flex: 1 0 20%;
302
905
  padding: 10px;
303
906
  }
304
- `;var Z=require("@emotion/react/jsx-runtime"),Dt=({field:e,form:o,meta:r,...t})=>{var m,i;let{label:n,caption:s,min:l=0,max:d=100,step:p}=t;return(0,Z.jsxs)("div",{children:[(0,Z.jsxs)("label",{css:[wt,Tt],children:[(0,Z.jsx)("span",{css:kt,children:n}),(0,Z.jsx)("input",{type:"range",min:l,max:d,step:p,...e,value:(m=e.value)!=null?m:0}),(0,Z.jsx)("span",{className:"value-display",children:(i=e.value)!=null?i:0})]}),s?(0,Z.jsx)(Se.Caption,{children:s}):null,o.touched[e.name]&&o.errors[e.name]?(0,Z.jsx)(Se.ErrorMessage,{message:o.errors[e.name]}):null]})};var Lt=require("@emotion/react"),Do=require("@emotion/react/jsx-runtime"),ko=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
907
+ `;
908
+
909
+ // src/components/Inputs/FormikSliderInput.tsx
910
+ var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
911
+ var FormikSliderInput = ({ field, form, meta, ...rawProps }) => {
912
+ var _a, _b;
913
+ const { label, caption, min = 0, max = 100, step } = rawProps;
914
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
915
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { css: [inputLabel, rangeInput], children: [
916
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { css: inputText, children: label }),
917
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "range", min, max, step, ...field, value: (_a = field.value) != null ? _a : 0 }),
918
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "value-display", children: (_b = field.value) != null ? _b : 0 })
919
+ ] }),
920
+ caption ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_design_system3.Caption, { children: caption }) : null,
921
+ form.touched[field.name] && form.errors[field.name] ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_design_system3.ErrorMessage, { message: form.errors[field.name] }) : null
922
+ ] });
923
+ };
924
+
925
+ // src/styles/icons.tsx
926
+ var import_react11 = require("@emotion/react");
927
+ var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
928
+ var audienceIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
305
929
  <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"/>
306
930
  <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"/>
307
931
  <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"/>
308
- </svg>`,To=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
932
+ </svg>`;
933
+ var enrichmentIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
309
934
  <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"/>
310
935
  <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"/>
311
936
  <path d="M11.9999 5.05762H8.3999V6.2576H11.9999V5.05762Z" fill="#828282"/>
312
937
  <path d="M8.3999 7.45752H11.9999V8.6575H8.3999V7.45752Z" fill="#828282"/>
313
938
  <path d="M11.9999 2.65771H8.3999V3.8577H11.9999V2.65771Z" fill="#828282"/>
314
- </svg>`,St=`<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
939
+ </svg>`;
940
+ var signalIcon = `<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
315
941
  <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"/>
316
942
  <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"/>
317
943
  <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"/>
318
944
  <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"/>
319
945
  <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"/>
320
- </svg>`,Ot=({type:e})=>{let o="";switch(e){case"Audience":o=ko;break;case"Signal":o=St;break;case"Intent":o=St;break;case"Enrichment":o=To;break}return(0,Do.jsx)("i",{css:Lt.css`
946
+ </svg>`;
947
+ var Icon = ({ type }) => {
948
+ let iconHtml = "";
949
+ switch (type) {
950
+ case "Audience":
951
+ iconHtml = audienceIcon;
952
+ break;
953
+ case "Signal":
954
+ iconHtml = signalIcon;
955
+ break;
956
+ case "Intent":
957
+ iconHtml = signalIcon;
958
+ break;
959
+ case "Enrichment":
960
+ iconHtml = enrichmentIcon;
961
+ break;
962
+ }
963
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
964
+ "i",
965
+ {
966
+ css: import_react11.css`
321
967
  align-items: center;
322
968
  display: inline-block;
323
- `,dangerouslySetInnerHTML:{__html:o}})};var P=require("@emotion/react"),So=P.keyframes`from {
969
+ `,
970
+ dangerouslySetInnerHTML: { __html: iconHtml }
971
+ }
972
+ );
973
+ };
974
+
975
+ // src/components/Personalization/page.styles.ts
976
+ var import_react12 = require("@emotion/react");
977
+ var popIn = import_react12.keyframes`from {
324
978
  transform: scale(1);
325
979
  }
326
980
  to {
327
981
  transform: scale(1.2);
328
982
  }
329
- `,b={page:P.css`
983
+ `;
984
+ var styles = {
985
+ page: import_react12.css`
330
986
  color: var(--brand-secondary-1);
331
- `,text:P.css`
987
+ `,
988
+ text: import_react12.css`
332
989
  margin: var(--spacing-sm) 0;
333
- `,reset:P.css`
990
+ `,
991
+ reset: import_react12.css`
334
992
  margin: 0 var(--spacing-md);
335
993
  font-size: var(--fs-sm);
336
994
  color: var(--gray-500);
337
- `,title:P.css`
995
+ `,
996
+ title: import_react12.css`
338
997
  margin: 0 0 var(--spacing-sm);
339
998
  font-size: var(--fs-md);
340
999
  & > small {
@@ -343,12 +1002,14 @@ to {
343
1002
  font-weight: var(--fw-regular);
344
1003
  margin: var(--spacing-xxs) 0 0;
345
1004
  }
346
- `,headingGroup:P.css`
1005
+ `,
1006
+ headingGroup: import_react12.css`
347
1007
  align-items: baseline;
348
1008
  display: flex;
349
1009
  justify-content: space-between;
350
1010
  align-items: center;
351
- `,divider:P.css`
1011
+ `,
1012
+ divider: import_react12.css`
352
1013
  background: var(--gray-300);
353
1014
  display: block;
354
1015
  width: 1px;
@@ -356,67 +1017,146 @@ to {
356
1017
  position: absolute;
357
1018
  inset: 0 auto 0 0;
358
1019
  margin: auto 0;
359
- `,submitButton:P.css`
1020
+ `,
1021
+ submitButton: import_react12.css`
360
1022
  position: absolute;
361
1023
  right: var(--spacing-base);
362
1024
  bottom: var(--spacing-base);
363
- animation: 0.5s 2 alternate ${So};
364
- `,cancelButton:P.css`
1025
+ animation: 0.5s 2 alternate ${popIn};
1026
+ `,
1027
+ cancelButton: import_react12.css`
365
1028
  position: absolute;
366
1029
  left: calc(200px + var(--spacing-base));
367
1030
  bottom: var(--spacing-base);
368
1031
  background: white;
369
1032
  padding: var(--spacing-sm);
370
1033
  border: 1px solid var(--gray-300);
371
- `,error:P.css`
1034
+ `,
1035
+ error: import_react12.css`
372
1036
  color: var(--brand-secondary-5);
373
1037
  font-size: var(--fs-sm);
374
- `,quirks:P.css`
1038
+ `,
1039
+ quirks: import_react12.css`
375
1040
  .uniform-input-select,
376
1041
  input {
377
1042
  padding: var(--spacing-sm);
378
1043
  }
379
- `};var A=require("@emotion/react"),ne=require("@emotion/react/jsx-runtime"),Le=({children:e})=>(0,ne.jsx)("table",{css:A.css`
1044
+ `
1045
+ };
1046
+
1047
+ // src/components/Table/Table.tsx
1048
+ var import_react13 = require("@emotion/react");
1049
+ var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
1050
+ var Table = ({ children }) => {
1051
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1052
+ "table",
1053
+ {
1054
+ css: import_react13.css`
380
1055
  border-collapse: collapse;
381
1056
  display: table;
382
1057
  width: 100%;
383
1058
  font-size: var(--fs-sm);
384
- `,children:e}),Rt=({children:e})=>(0,ne.jsx)("thead",{css:A.css`
1059
+ `,
1060
+ children
1061
+ }
1062
+ );
1063
+ };
1064
+ var THead = ({ children }) => {
1065
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1066
+ "thead",
1067
+ {
1068
+ css: import_react13.css`
385
1069
  background: var(--gray-50);
386
1070
  text-align: left;
387
1071
  & tr {
388
1072
  border-bottom: 1px solid var(--gray-200);
389
1073
  }
390
- `,children:e}),Oe=({children:e})=>(0,ne.jsx)("tbody",{children:e}),le=({border:e,children:o})=>(0,ne.jsx)("tr",{css:e?A.css`
1074
+ `,
1075
+ children
1076
+ }
1077
+ );
1078
+ };
1079
+ var TBody = ({ children }) => {
1080
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children });
1081
+ };
1082
+ var TRow = ({ border, children }) => {
1083
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1084
+ "tr",
1085
+ {
1086
+ css: border ? import_react13.css`
391
1087
  border-bottom: 1px solid var(--gray-200);
392
1088
  &:where(:last-child) {
393
1089
  border: none;
394
1090
  }
395
- `:void 0,children:o}),Re=({children:e,width:o})=>(0,ne.jsx)("th",{css:A.css`
1091
+ ` : void 0,
1092
+ children
1093
+ }
1094
+ );
1095
+ };
1096
+ var THeading = ({ children, width }) => {
1097
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1098
+ "th",
1099
+ {
1100
+ css: import_react13.css`
396
1101
  outline: none;
397
1102
  padding: var(--spacing-sm);
398
- width: ${o!=null?o:"auto"};
399
- `,children:e});function Lo(e){switch(e){case"light":return A.css`
1103
+ width: ${width != null ? width : "auto"};
1104
+ `,
1105
+ children
1106
+ }
1107
+ );
1108
+ };
1109
+ function colour(color) {
1110
+ switch (color) {
1111
+ case "light":
1112
+ return import_react13.css`
400
1113
  color: var(--gray-400);
401
- `;case"dark":return A.css`
1114
+ `;
1115
+ case "dark":
1116
+ return import_react13.css`
402
1117
  color: var(--brand-secondary-1);
403
- `}}function Oo(e){return A.css`
404
- text-align: ${e};
405
- `}var z=({alignment:e="left",border:o,color:r="dark",children:t})=>(0,ne.jsx)("td",{css:[A.css`
1118
+ `;
1119
+ }
1120
+ }
1121
+ function align(alignment) {
1122
+ return import_react13.css`
1123
+ text-align: ${alignment};
1124
+ `;
1125
+ }
1126
+ var TData = ({ alignment = "left", border, color = "dark", children }) => {
1127
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1128
+ "td",
1129
+ {
1130
+ css: [
1131
+ import_react13.css`
406
1132
  padding: var(--spacing-base);
407
1133
  max-width: 180px;
408
1134
  overflow-wrap: break-word;
409
1135
  position: relative;
410
- `,Lo(r),Oo(e),o?A.css`
1136
+ `,
1137
+ colour(color),
1138
+ align(alignment),
1139
+ border ? import_react13.css`
411
1140
  border-left: 1px solid var(--gray-200);
412
- `:void 0],children:t});var Ve=require("@emotion/react"),Vt=Ve.css`
1141
+ ` : void 0
1142
+ ],
1143
+ children
1144
+ }
1145
+ );
1146
+ };
1147
+
1148
+ // src/components/Table/table.styles.ts
1149
+ var import_react14 = require("@emotion/react");
1150
+ var scoreTd = import_react14.css`
413
1151
  position: relative;
414
1152
  display: inline-block;
415
1153
  font-size: var(--fs-base);
416
- `,Pt=Ve.css`
1154
+ `;
1155
+ var overriddenValue = import_react14.css`
417
1156
  display: block;
418
1157
  text-decoration: line-through;
419
- `,It=Ve.css`
1158
+ `;
1159
+ var isOverriddenTooltip = import_react14.css`
420
1160
  position: absolute;
421
1161
  width: 6px;
422
1162
  height: 6px;
@@ -424,7 +1164,863 @@ to {
424
1164
  top: 9px;
425
1165
  background: var(--red-tooltip);
426
1166
  border-radius: 3px;
427
- `;var O=require("@emotion/react/jsx-runtime"),Ro=({dimensionIndex:e,dimensions:o,disableEditOverride:r,onClick:t,preemptiveOverrides:n})=>{var d;let{settings:s}=ge(),l=(d=n!=null?n:s.scoreOverrides)!=null?d:{};return(0,O.jsx)(Le,{children:(0,O.jsx)(Oe,{children:Object.entries(o).sort(([p],[m])=>p.localeCompare(m)).map(([p,m])=>{var h;let{dim:i,name:a,type:c,category:f}=(h=e[p])!=null?h:{name:p,dim:p,type:void 0,category:void 0},g=l[i];return(0,O.jsxs)(le,{children:[(0,O.jsxs)(z,{children:[g!==void 0?(0,O.jsx)("s",{css:Pt,children:g.initial}):null,(0,O.jsxs)("b",{css:Vt,children:[m,g!==void 0&&(0,O.jsx)("i",{css:It})]})]}),(0,O.jsx)(z,{children:(0,O.jsxs)("div",{onClick:()=>t==null?void 0:t(i),css:t?{cursor:"pointer"}:void 0,children:[(0,O.jsx)("span",{css:b.divider,role:"presentation"}),(0,O.jsxs)("div",{children:[(0,O.jsx)(Ot,{type:c})," ",c]}),(0,O.jsxs)("strong",{children:[f?`${f}:`:""," ",a]})]})}),(0,O.jsx)(z,{alignment:"right",color:"light",children:g!==void 0&&!r?(0,O.jsx)(oe,{route:`/overrides/${i}`,children:"Edit override"}):null})]},i)})})})},J=Ro;var R=require("@emotion/react/jsx-runtime"),Vo=ie.object({dimension:ie.string(),score:ie.number()}),je=({settings:e,saveSettings:o,state:r,actions:t,dimensionIndex:{index:n}})=>{var p,m;let s=e.route?[...e.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)]:[],l=s[0]?s[0][1]:"";if(!((p=r.manifest.project.pz)!=null&&p.sig))return(0,R.jsx)("p",{children:"Error, manifest is broken or there is no signal to override."});let d=Object.entries(n).filter(([,i])=>i.type!=="Audience"&&i.type!=="Intent").map(([i,a])=>{let c=a.type?`${a.type}: `:"",f=a.category?`${a.category} - `:"",g=`${c}${f}${a.name}`;return{value:i,label:g}});return d.unshift({value:"",label:"Choose dimension to override"}),(0,R.jsx)(X.Formik,{initialValues:{dimension:l,score:(m=r.scores[l])!=null?m:0},validate:i=>{let a={};return(i.score===r.scores[i.dimension]||i.score===0&&!r.scores[l])&&(a.score="You have to modify current score value"),a},validationSchema:Vo,enableReinitialize:!0,validateOnChange:!1,validateOnBlur:!1,onSubmit:async i=>{var h,C,T,D,G,$;let a=(C=(h=n[i.dimension])==null?void 0:h.cap)!=null?C:0,c=Math.min(i.score,a),f={...e,scoreOverrides:{...e.scoreOverrides,[i.dimension]:{initial:($=(G=(D=(T=e.scoreOverrides)==null?void 0:T[i.dimension])==null?void 0:D.initial)!=null?G:r.scores[i.dimension])!=null?$:0,override:c}},route:"/overrides"};await o(f);let g=ce({scores:r.scores,scoreOverrides:f.scoreOverrides});t.rawUpdate(g)},children:({isSubmitting:i,values:a,setFieldValue:c})=>{var T;let f=vt({manifest:r.manifest,visitor:r.data,override:{type:"modscore",data:{dimension:a.dimension,delta:a.score-((T=r.scores[a.dimension])!=null?T:0)}}}),g=Object.entries(r.scores).reduce((D,[G,$])=>(D[G]={initial:$,override:$},D),{}),h={max:100,step:50};n[a.dimension]&&(h.max=n[a.dimension].cap,h.step=n[a.dimension].str);let C=a.score&&Object.keys(f).length>0;return(0,R.jsxs)(X.Form,{css:b.page,children:[(0,R.jsx)("h1",{css:b.title,children:"Override Dimension"}),(0,R.jsx)(X.Field,{component:yt,label:"Dimension",id:"dimension",name:"dimension",options:d,disabled:i,onChange:D=>{c("score",0,!1),c("dimension",D.target.value)}}),(0,R.jsx)("p",{css:b.text,children:(0,R.jsx)("small",{children:"Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly."})}),a.dimension?(0,R.jsx)(X.Field,{component:Dt,name:"score",label:"Score",disabled:i,max:h.max,step:h.step,caption:`Range: 0 - ${h.max} in increments of ${h.step}`}):null,(0,R.jsxs)(q,{disabled:i,css:{marginBottom:"2rem"},children:[C?(0,R.jsx)(we,{children:(0,R.jsx)(ke,{title:`Impacted Dimensions (${Object.keys(f).length})`,children:(0,R.jsx)(J,{preemptiveOverrides:g,dimensionIndex:n,dimensions:f,disableEditOverride:!0})})}):null,(0,R.jsx)(Ht.Button,{type:"submit",css:b.submitButton,disabled:i,children:"Save"}),(0,R.jsx)(oe,{route:"/overrides",css:b.cancelButton,children:"Cancel"})]})]})}})};var _e=require("@uniformdev/design-system"),Et=require("@uniformdev/design-system"),At=F(require("react"));async function Pe({actions:e,saveSettings:o,scores:r,settings:t}){var d,p;let n=(d=t.scoreOverrides)!=null?d:{},s={...n},l=[];for(let m of Object.keys(n)){let i=n==null?void 0:n[m];delete s[m],l.push({type:"modscoreS",data:{dimension:m,delta:i.initial-((p=r[m])!=null?p:0)}})}await o({...t,scoreOverrides:s}),await e.rawUpdate(l)}async function Mt({quirk:e,settings:o,saveSettings:r,actions:t}){var l;let n=(l=o.quirkOverrides)==null?void 0:l[e];if(!n)return;let s={...o.quirkOverrides};delete s[e],await r({...o,quirkOverrides:s}),await t.rawUpdate([{type:"setquirk",data:{key:e,value:n.initial}}])}var de=require("@emotion/react/jsx-runtime"),se=({title:e,text:o,buttonGroup:r,children:t})=>(0,de.jsxs)("div",{css:fe,children:[(0,de.jsx)("h2",{css:he,children:e}),(0,de.jsx)("p",{css:be,children:o}),t,r?(0,de.jsx)("div",{css:xe,children:r}):null]});var S=require("@emotion/react/jsx-runtime"),Bt=({dimensionIndex:{index:e},state:{scores:o,data:r},actions:t,saveSettings:n,settings:s})=>{let l=At.useMemo(()=>{let i={};return Object.keys(e).filter(a=>!o[a]).map(a=>{i[e[a].dim]=0}),i},[o,e]),d=Object.keys(o).length,p=d+Object.keys(l).length,m=()=>{t.rawUpdate([{type:"setcontrol",data:!r.controlGroup}])};return(0,S.jsx)(S.Fragment,{children:(0,S.jsxs)("article",{css:b.page,children:[(0,S.jsxs)("div",{css:b.headingGroup,children:[(0,S.jsxs)("h2",{css:b.title,children:["Dimensions",(0,S.jsxs)("small",{children:[d," active of ",p]})]}),(0,S.jsx)("div",{css:b.reset,children:(0,S.jsx)(_e.Button,{buttonType:"ghost",onClick:()=>Pe({actions:t,saveSettings:n,scores:o,settings:s}).then(t.forget),children:"clear all dimensions"})}),(0,S.jsx)(Et.Switch,{name:"controlGroup",label:"Control Group",onChange:m,checked:r.controlGroup})]}),d>0?(0,S.jsx)(J,{dimensionIndex:e,dimensions:o}):(0,S.jsx)(se,{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?(0,S.jsx)(_e.Button,{buttonType:"secondary",onClick:m,children:"Exit control group"}):null}),(0,S.jsx)(we,{children:(0,S.jsx)(ke,{title:`Inactive Dimensions (${Object.keys(l).length})`,children:(0,S.jsx)(J,{dimensionIndex:e,dimensions:l})})})]})})};var Qt=require("@uniformdev/design-system"),Ge=require("@uniformdev/design-system");var V=require("@emotion/react/jsx-runtime"),Ft=({dimensionIndex:{index:e},state:{data:o,scores:r},actions:t,settings:n,saveSettings:s})=>{var a;let l=(a=n.scoreOverrides)!=null?a:{},d=Object.keys(l).length,p=c=>(c==null||c.preventDefault(),s({...n,route:"/overrides/add"})),m=()=>{t.rawUpdate([{type:"setcontrol",data:!o.controlGroup}])},i={};return Object.entries(r).map(([c,f])=>{l[c]!==void 0&&(i[c]=f)}),(0,V.jsx)(V.Fragment,{children:(0,V.jsxs)("article",{css:b.page,children:[(0,V.jsxs)("div",{css:b.headingGroup,children:[(0,V.jsx)("h2",{css:b.title,children:"What if?"}),(0,V.jsx)("div",{css:b.reset,children:(0,V.jsx)(Ge.Button,{buttonType:"ghost",onClick:()=>Pe({actions:t,settings:n,saveSettings:s,scores:r}),children:"delete all overrides"})}),(0,V.jsx)(Qt.AddButton,{onClick:p})]}),(0,V.jsx)("p",{children:"Override dimension scores to test personalization"}),d>0?(0,V.jsx)(J,{dimensionIndex:e,dimensions:i,onClick:c=>s({...n,route:`/overrides/${c}`})}):(0,V.jsx)(se,{title:o.controlGroup?"In control group":"No overrides",text:o.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:o.controlGroup?(0,V.jsx)(Ge.Button,{buttonType:"secondary",onClick:m,children:"Exit control group"}):null})]})})};var pe=require("@uniformdev/design-system"),Nt=require("react");var He=require("@uniformdev/design-system"),Me=require("react");var Ie=require("@emotion/react/jsx-runtime"),Po=({name:e,value:o,submit:r})=>{let[t,n]=(0,Me.useState)(o!=null?o:"");return(0,Me.useEffect)(()=>{n(o!=null?o:"")},[o]),(0,Ie.jsxs)("div",{css:{display:"flex",gap:"var(--spacing-sm)"},children:[(0,Ie.jsx)(He.Input,{type:"text",css:[Ct],name:e,value:t,onChange:d=>{n(d.target.value)}}),(0,Ie.jsx)(He.Button,{buttonType:"primary",disabled:t===o,size:"sm",onClick:()=>r(e,t!=null?t:""),children:"Save"})]})},qt=Po;var x=require("@emotion/react/jsx-runtime"),Zt=({...e})=>{let{state:{data:{quirks:o}},quirksIndex:{index:r},settings:t,saveSettings:n,actions:s}=e,[l,d]=(0,Nt.useState)(""),p;l&&(p=r[l]);let m=async(i,a)=>{var g,h,C;d("");let c={...t,quirkOverrides:{...t.quirkOverrides,[i]:{initial:(C=(h=(g=t.quirkOverrides)==null?void 0:g[i])==null?void 0:h.initial)!=null?C:o[i],override:a}}};await n(c);let f=ye({quirks:o,quirkOverrides:c.quirkOverrides});await s.update({quirks:f})};return(0,x.jsx)(x.Fragment,{children:(0,x.jsxs)("article",{css:[b.page,b.quirks],children:[(0,x.jsx)("h1",{css:b.title,children:"Quirks"}),(0,x.jsx)("p",{css:b.text,children:"Keys defined in Uniform and their current, programmatically defined values for this visit."}),Object.keys(r).length?(0,x.jsxs)(Le,{children:[(0,x.jsx)(Rt,{children:(0,x.jsxs)(le,{children:[(0,x.jsx)(Re,{width:"30%",children:"Key"}),(0,x.jsx)(Re,{width:"50%",children:"Value"}),(0,x.jsx)(Re,{width:"20%",children:""})]})}),(0,x.jsx)(Oe,{children:Object.values(r).map(({name:i,value:a,id:c})=>{var h,C,T;let f=(C=(h=t.quirkOverrides)==null?void 0:h[i])==null?void 0:C.initial,g=[];return p&&p.options&&(g=p.options.map(D=>({value:D.value,label:D.name}))),(0,x.jsxs)(le,{border:"bottom",children:[(0,x.jsx)(z,{children:(0,x.jsx)("strong",{children:i})}),(0,x.jsxs)(z,{children:[l!==c?(0,x.jsxs)("div",{onClick:()=>{d(c)},children:[f?(0,x.jsx)("div",{children:(0,x.jsx)("s",{children:f})}):null,a]}):null,l===c&&p&&(0,x.jsx)(x.Fragment,{children:p.options?(0,x.jsx)(pe.InputSelect,{showLabel:!1,label:`Change ${i}`,defaultOption:`Change ${i}`,name:c,onChange:D=>m(D.target.name,D.target.value),options:g}):(0,x.jsx)(qt,{name:c,value:a,submit:m})})]}),(0,x.jsx)(z,{children:l?null:(T=t.quirkOverrides)!=null&&T[c]?(0,x.jsx)(pe.Button,{buttonType:"ghost",onClick:()=>{Mt({quirk:c,settings:t,saveSettings:n,actions:s})},children:(0,x.jsx)("small",{children:"Clear Override"})}):(0,x.jsx)(pe.Button,{buttonType:"ghost",onClick:()=>{d(c)},children:(0,x.jsx)("small",{children:"Override"})})})]},c)})})]}):(0,x.jsx)(se,{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."})]})})};var $e=require("@uniformdev/design-system"),Ke=require("@uniformdev/design-system");var k=require("@emotion/react/jsx-runtime"),zt=({settings:e,saveSettings:o,actions:r,state:{data:t},clearAllExtensionData:n})=>(0,k.jsxs)("article",{css:[b.page,{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}],children:[(0,k.jsx)("h1",{css:b.title,children:"Settings"}),(0,k.jsxs)(q,{children:[(0,k.jsx)(re,{children:"Data Connection"}),(0,k.jsx)($e.Button,{buttonType:"tertiary",onClick:()=>{o({...e,route:"/connect"})},children:"Manage Connection to Uniform"})]}),(0,k.jsxs)(q,{children:[(0,k.jsx)(re,{children:"Storage Consent"}),(0,k.jsx)(Ke.Switch,{label:"Store visitor data",id:"consent-mode",name:"consentMode",checked:t.consent,onChange:s=>{r.rawUpdate([{type:"consent",data:s.currentTarget.checked}]),o({...e,consentMode:s.currentTarget.checked})}}),(0,k.jsx)("p",{children:(0,k.jsx)("small",{children:"Enabling storage consent allows 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."})})]}),(0,k.jsxs)(q,{children:[(0,k.jsx)(re,{children:"Logging"}),(0,k.jsx)(Ke.Switch,{label:"Write Uniform Context diagnostic logs to browser console",id:"logging",name:"logging",checked:e.logLevel==="debug",onChange:s=>o({...e,logLevel:s.currentTarget.checked?"debug":"none"})})]}),(0,k.jsxs)(q,{children:[(0,k.jsx)(re,{children:"Clear extension storage"}),(0,k.jsx)($e.Button,{onClick:()=>{n()},children:"Clear"}),(0,k.jsx)("p",{children:(0,k.jsx)("small",{children:"May be necessary when you have multiple different sites on the same domain name (e.g. http://localhost:3000) and there are some conflicts or other unexpected behaviour."})})]})]});var Ut=require("@uniformdev/context"),Ee=require("@uniformdev/context/api"),M=require("@uniformdev/design-system"),U=require("formik"),j=F(require("react"));var v=require("@emotion/react/jsx-runtime");function jt(e){let[o,r]=j.useState(e.currentData?"c":"qc"),[t,n]=j.useState(void 0),[s,l]=j.useState(void 0),d=j.useCallback(async i=>{let a=new Ee.UncachedManifestClient(i);n(void 0);try{let c=await a.get({preview:!0});return l({manifest:c,target:i}),c}catch(c){if(c instanceof Ee.ApiClientError){c.statusCode===403?n("API key is valid but does not have Context > Read Drafts permission, or the API key does not have permissions to the project, or the project does not exist."):n(c.errorMessage);return}if("message"in c){c.message==="Failed to fetch"?n("A network error occurred. Ensure the API host is valid."):n(c.message);return}n(JSON.stringify(c,null,2));return}},[]);j.useEffect(()=>{!e.currentData||d(e.currentData)},[d,e.currentData]);let p=async i=>{await d(i)&&(r("c"),await e.onConnect(i))},m=()=>{confirm("Disconnect from Uniform? Make sure to save your API key if you want to reconnect.")&&(r("qc"),l(void 0),n(void 0),e.onConnect(null))};return(0,v.jsxs)("div",{children:[t?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(M.ErrorMessage,{message:t}),(0,v.jsx)(M.Button,{buttonType:"secondary",type:"button",onClick:m,children:"Clear old/broken settings"})]}):null,o==="qc"||o==="mc"?(0,v.jsx)(Io,{...e,state:o,setState:r,onConnect:p}):(0,v.jsx)("div",{children:s?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)("p",{children:["Connected to"," ",(0,v.jsx)("a",{href:`${s==null?void 0:s.target.apiHost}/projects/${s==null?void 0:s.target.projectId}`,target:"_blank",rel:"noopener noreferrer",css:{textDecoration:"underline"},children:(0,v.jsx)("strong",{children:s==null?void 0:s.manifest.project.name})})," ",(0,v.jsxs)("small",{children:["(",s==null?void 0:s.manifest.project.id,")"]})]}),(0,v.jsx)(M.Button,{buttonType:"secondary",type:"button",onClick:m,children:"Disconnect"})]}):null})]})}function Io({setState:e,state:o,currentData:r,onConnect:t}){var n,s,l;return(0,v.jsx)("div",{children:(0,v.jsx)(U.Formik,{initialValues:{apiHost:(n=r==null?void 0:r.apiHost)!=null?n:"https://uniform.app",apiKey:(s=r==null?void 0:r.apiKey)!=null?s:"",projectId:(l=r==null?void 0:r.projectId)!=null?l:"",qc:""},onSubmit:t,children:({setFieldValue:d,setFieldError:p,errors:{qc:m},isSubmitting:i})=>(0,v.jsx)(U.Form,{children:(0,v.jsx)("fieldset",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"},children:o==="qc"?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)("div",{children:(0,v.jsx)(M.Input,{placeholder:"Paste Quick Connect Code Here",caption:"Copy the Quick Connect code after creating an API key in Uniform.",errorMessage:m,onChange:a=>{try{let c=(0,Ut.parseQuickConnect)(a.currentTarget.value);d("apiHost",c.apiHost),d("apiKey",c.apiKey),d("projectId",c.projectId)}catch(c){p("qc",c.message)}}})}),(0,v.jsxs)("section",{css:{display:"flex",gap:"var(--spacing-sm)"},children:[(0,v.jsx)(M.Button,{type:"submit",buttonType:"primary",disabled:i,children:i?"Verifying...":"Connect"}),(0,v.jsx)(M.Button,{type:"button",buttonType:"ghost",onClick:()=>e("mc"),disabled:i,children:"Connect Manually"})]})]}):(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)("div",{children:(0,v.jsx)(U.Field,{component:De,label:"API Key",name:"apiKey",caption:"Generate an API key in your Uniform team settings."})}),(0,v.jsx)("div",{children:(0,v.jsx)(U.Field,{component:De,label:"Project ID",name:"projectId",caption:"Available to copy after generating an API key"})}),(0,v.jsx)("div",{children:(0,v.jsx)(U.Field,{component:De,label:"API Host",name:"apiHost",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option."})}),(0,v.jsxs)("section",{css:{display:"flex",gap:"var(--spacing-sm)"},children:[(0,v.jsx)(M.Button,{type:"submit",buttonType:"primary",disabled:i,children:i?"Verifying...":"Connect"}),(0,v.jsx)(M.Button,{type:"button",buttonType:"ghost",onClick:()=>e("qc"),disabled:i,children:"Use Quick Connect"})]})]})})})})})}var ae=require("@emotion/react/jsx-runtime"),_t=({settings:e,saveSettings:o})=>{let r=e.apiKey&&e.projectId?{apiKey:e.apiKey,projectId:e.projectId,apiHost:e.apiHost}:void 0;return(0,ae.jsxs)("article",{css:b.page,children:[(0,ae.jsx)("h1",{css:b.title,children:"Connect to a Uniform Project"}),(0,ae.jsx)("p",{css:b.text,children:(0,ae.jsx)("small",{children:"Adding an API key and project ID enables human-readable dimension labels to be shown. You must have access to the Uniform project to do this."})}),(0,ae.jsx)(jt,{onConnect:async t=>{t?await o({...e,apiKey:t.apiKey,projectId:t.projectId,apiHost:t.apiHost}):await o({...e,apiKey:void 0,projectId:void 0,apiHost:void 0})},currentData:r})]})};var Be=require("react"),Gt=require("react-use");var Ae=require("@emotion/react/jsx-runtime"),$t=()=>{let[e,o]=(0,Be.useState)(!1),r=(0,Gt.useMountedState)();return(0,Be.useEffect)(()=>{setTimeout(()=>{r()&&o(!0)},1e3)},[r]),e?(0,Ae.jsxs)("article",{css:b.page,children:[(0,Ae.jsx)("h1",{children:"Loading..."}),(0,Ae.jsx)("p",{children:"Connecting to Uniform API for complete data."})]}):null};var Qe=require("@emotion/react/jsx-runtime"),Kt=()=>(0,Qe.jsxs)("article",{children:[(0,Qe.jsx)("h1",{children:"Something when wrong"}),(0,Qe.jsx)("p",{children:"We could not find the page you're looking for."})]});var L=require("@emotion/react/jsx-runtime"),Ho=We.css`
1167
+ `;
1168
+
1169
+ // src/components/Table/DimensionsTable.tsx
1170
+ var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
1171
+ var DimensionsTable = ({
1172
+ dimensionIndex,
1173
+ dimensions,
1174
+ disableEditOverride,
1175
+ onClick,
1176
+ preemptiveOverrides
1177
+ }) => {
1178
+ var _a;
1179
+ const { settings } = useDevToolsSettingsContext();
1180
+ const overrides = (_a = preemptiveOverrides != null ? preemptiveOverrides : settings.scoreOverrides) != null ? _a : {};
1181
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Table, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TBody, { children: Object.entries(dimensions).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => {
1182
+ var _a2;
1183
+ const { dim, name, type, category } = (_a2 = dimensionIndex[key]) != null ? _a2 : {
1184
+ name: key,
1185
+ dim: key,
1186
+ type: void 0,
1187
+ category: void 0
1188
+ };
1189
+ const override = overrides[dim];
1190
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(TRow, { children: [
1191
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(TData, { children: [
1192
+ override !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("s", { css: overriddenValue, children: override.initial }) : null,
1193
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("b", { css: scoreTd, children: [
1194
+ value,
1195
+ override !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("i", { css: isOverriddenTooltip })
1196
+ ] })
1197
+ ] }),
1198
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TData, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { onClick: () => onClick == null ? void 0 : onClick(dim), css: onClick ? { cursor: "pointer" } : void 0, children: [
1199
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { css: styles.divider, role: "presentation" }),
1200
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
1201
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { type }),
1202
+ " ",
1203
+ type
1204
+ ] }),
1205
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("strong", { children: [
1206
+ category ? `${category}:` : "",
1207
+ " ",
1208
+ name
1209
+ ] })
1210
+ ] }) }),
1211
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TData, { alignment: "right", color: "light", children: override !== void 0 && !disableEditOverride ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavigationLink_default, { route: `/overrides/${dim}`, children: "Edit override" }) : null })
1212
+ ] }, dim);
1213
+ }) }) });
1214
+ };
1215
+ var DimensionsTable_default = DimensionsTable;
1216
+
1217
+ // src/components/Personalization/AddOverride.tsx
1218
+ var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
1219
+ var overrideSettingsSchema = yup.object({
1220
+ dimension: yup.string(),
1221
+ score: yup.number()
1222
+ });
1223
+ var AddOverride = ({
1224
+ settings,
1225
+ saveSettings,
1226
+ state,
1227
+ actions,
1228
+ dimensionIndex: { index }
1229
+ }) => {
1230
+ var _a, _b;
1231
+ const routeParams = settings.route ? [...settings.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)] : [];
1232
+ const overriddenDimension = routeParams[0] ? routeParams[0][1] : "";
1233
+ if (!((_a = state.manifest.project.pz) == null ? void 0 : _a.sig)) {
1234
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "Error, manifest is broken or there is no signal to override." });
1235
+ }
1236
+ const overridableDimensions = Object.entries(index).filter(([, value]) => value.type !== "Audience" && value.type !== "Intent").map(([key, value]) => {
1237
+ const type = value.type ? `${value.type}: ` : "";
1238
+ const category = value.category ? `${value.category} - ` : "";
1239
+ const label = `${type}${category}${value.name}`;
1240
+ return {
1241
+ value: key,
1242
+ label
1243
+ };
1244
+ });
1245
+ overridableDimensions.unshift({
1246
+ value: "",
1247
+ label: "Choose dimension to override"
1248
+ });
1249
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1250
+ import_formik.Formik,
1251
+ {
1252
+ initialValues: {
1253
+ dimension: overriddenDimension,
1254
+ score: (_b = state.scores[overriddenDimension]) != null ? _b : 0
1255
+ },
1256
+ validate: (values) => {
1257
+ const errors = {};
1258
+ if (values.score === state.scores[values.dimension] || values.score === 0 && !state.scores[overriddenDimension]) {
1259
+ errors.score = "You have to modify current score value";
1260
+ }
1261
+ return errors;
1262
+ },
1263
+ validationSchema: overrideSettingsSchema,
1264
+ enableReinitialize: true,
1265
+ validateOnChange: false,
1266
+ validateOnBlur: false,
1267
+ onSubmit: async (values) => {
1268
+ var _a2, _b2, _c, _d, _e, _f;
1269
+ const cap = (_b2 = (_a2 = index[values.dimension]) == null ? void 0 : _a2.cap) != null ? _b2 : 0;
1270
+ const cappedOverrideScore = Math.min(values.score, cap);
1271
+ const newSettings = {
1272
+ ...settings,
1273
+ scoreOverrides: {
1274
+ ...settings.scoreOverrides,
1275
+ [values.dimension]: {
1276
+ 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,
1277
+ override: cappedOverrideScore
1278
+ }
1279
+ },
1280
+ route: "/overrides"
1281
+ };
1282
+ await saveSettings(newSettings);
1283
+ const applyCommands = applyScoreOverrides({
1284
+ scores: state.scores,
1285
+ scoreOverrides: newSettings.scoreOverrides
1286
+ });
1287
+ actions.rawUpdate(applyCommands);
1288
+ },
1289
+ children: ({ isSubmitting, values, setFieldValue }) => {
1290
+ var _a2;
1291
+ const overrideEffects = computeOverrideEffects({
1292
+ manifest: state.manifest,
1293
+ visitor: state.data,
1294
+ override: {
1295
+ type: "modscore",
1296
+ data: {
1297
+ dimension: values.dimension,
1298
+ delta: values.score - ((_a2 = state.scores[values.dimension]) != null ? _a2 : 0)
1299
+ }
1300
+ }
1301
+ });
1302
+ const preemptiveOverrides = Object.entries(state.scores).reduce(
1303
+ (acc, [key, value]) => {
1304
+ acc[key] = {
1305
+ initial: value,
1306
+ override: value
1307
+ };
1308
+ return acc;
1309
+ },
1310
+ {}
1311
+ );
1312
+ const rangeProps = {
1313
+ max: 100,
1314
+ step: 50
1315
+ };
1316
+ if (index[values.dimension]) {
1317
+ rangeProps.max = index[values.dimension].cap;
1318
+ rangeProps.step = index[values.dimension].str;
1319
+ }
1320
+ const hasScoreEffects = values.score && Object.keys(overrideEffects).length > 0;
1321
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_formik.Form, { css: styles.page, children: [
1322
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { css: styles.title, children: "Override Dimension" }),
1323
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1324
+ import_formik.Field,
1325
+ {
1326
+ component: FormikInputSelect,
1327
+ label: "Dimension",
1328
+ id: "dimension",
1329
+ name: "dimension",
1330
+ options: overridableDimensions,
1331
+ disabled: isSubmitting,
1332
+ onChange: (e) => {
1333
+ setFieldValue("score", 0, false);
1334
+ setFieldValue("dimension", e.target.value);
1335
+ }
1336
+ }
1337
+ ),
1338
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { css: styles.text, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: "Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly." }) }),
1339
+ values.dimension ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1340
+ import_formik.Field,
1341
+ {
1342
+ component: FormikSliderInput,
1343
+ name: "score",
1344
+ label: "Score",
1345
+ disabled: isSubmitting,
1346
+ max: rangeProps.max,
1347
+ step: rangeProps.step,
1348
+ caption: `Range: 0 - ${rangeProps.max} in increments of ${rangeProps.step}`
1349
+ }
1350
+ ) : null,
1351
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Fieldset, { disabled: isSubmitting, css: { marginBottom: "2rem" }, children: [
1352
+ hasScoreEffects ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Accordion, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AccordionItem, { title: `Impacted Dimensions (${Object.keys(overrideEffects).length})`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1353
+ DimensionsTable_default,
1354
+ {
1355
+ preemptiveOverrides,
1356
+ dimensionIndex: index,
1357
+ dimensions: overrideEffects,
1358
+ disableEditOverride: true
1359
+ }
1360
+ ) }) }) : null,
1361
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system4.Button, { type: "submit", css: styles.submitButton, disabled: isSubmitting, children: "Save" }),
1362
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NavigationLink_default, { route: "/overrides", css: styles.cancelButton, children: "Cancel" })
1363
+ ] })
1364
+ ] });
1365
+ }
1366
+ }
1367
+ );
1368
+ };
1369
+
1370
+ // src/components/Personalization/Dimensions.tsx
1371
+ var import_design_system5 = require("@uniformdev/design-system");
1372
+ var import_design_system6 = require("@uniformdev/design-system");
1373
+ var React4 = __toESM(require("react"));
1374
+
1375
+ // src/lib/deleteOverride.ts
1376
+ async function deleteScoreOverrides({
1377
+ actions,
1378
+ saveSettings,
1379
+ scores,
1380
+ settings
1381
+ }) {
1382
+ var _a, _b;
1383
+ const scoreOverrides = (_a = settings.scoreOverrides) != null ? _a : {};
1384
+ const newOverrides = { ...scoreOverrides };
1385
+ const commands = [];
1386
+ for (const dim of Object.keys(scoreOverrides)) {
1387
+ const override = scoreOverrides == null ? void 0 : scoreOverrides[dim];
1388
+ delete newOverrides[dim];
1389
+ commands.push({
1390
+ type: "modscoreS",
1391
+ data: { dimension: dim, delta: override.initial - ((_b = scores[dim]) != null ? _b : 0) }
1392
+ });
1393
+ }
1394
+ await saveSettings({
1395
+ ...settings,
1396
+ scoreOverrides: newOverrides
1397
+ });
1398
+ await actions.rawUpdate(commands);
1399
+ }
1400
+ async function deleteQuirkOverride({
1401
+ quirk: dim,
1402
+ settings,
1403
+ saveSettings,
1404
+ actions
1405
+ }) {
1406
+ var _a;
1407
+ const override = (_a = settings.quirkOverrides) == null ? void 0 : _a[dim];
1408
+ if (!override) {
1409
+ return;
1410
+ }
1411
+ const newOverrides = { ...settings.quirkOverrides };
1412
+ delete newOverrides[dim];
1413
+ await saveSettings({
1414
+ ...settings,
1415
+ quirkOverrides: newOverrides
1416
+ });
1417
+ await actions.rawUpdate([{ type: "setquirk", data: { key: dim, value: override.initial } }]);
1418
+ }
1419
+
1420
+ // src/components/CallToAction/NoActiveDimensions.tsx
1421
+ var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
1422
+ var NoActiveDimensions = ({ title, text, buttonGroup, children }) => {
1423
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { css: cta, children: [
1424
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { css: ctaTitle, children: title }),
1425
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { css: ctaText, children: text }),
1426
+ children,
1427
+ buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { css: ctaBtnGroup, children: buttonGroup }) : null
1428
+ ] });
1429
+ };
1430
+
1431
+ // src/components/Personalization/Dimensions.tsx
1432
+ var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
1433
+ var Dimensions = ({
1434
+ dimensionIndex: { index: dimensionIndex },
1435
+ state: { scores, data },
1436
+ actions,
1437
+ saveSettings,
1438
+ settings
1439
+ }) => {
1440
+ const remainingDimensions = React4.useMemo(() => {
1441
+ const newRemainingDimensions = {};
1442
+ Object.keys(dimensionIndex).filter((dimension) => !scores[dimension]).map((key) => {
1443
+ newRemainingDimensions[dimensionIndex[key].dim] = 0;
1444
+ });
1445
+ return newRemainingDimensions;
1446
+ }, [scores, dimensionIndex]);
1447
+ const activeDims = Object.keys(scores).length;
1448
+ const totalDims = activeDims + Object.keys(remainingDimensions).length;
1449
+ const toggleControlGroup = () => {
1450
+ actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
1451
+ };
1452
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("article", { css: styles.page, children: [
1453
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { css: styles.headingGroup, children: [
1454
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("h2", { css: styles.title, children: [
1455
+ "Dimensions",
1456
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("small", { children: [
1457
+ activeDims,
1458
+ " active of ",
1459
+ totalDims
1460
+ ] })
1461
+ ] }),
1462
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { css: styles.reset, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1463
+ import_design_system5.Button,
1464
+ {
1465
+ buttonType: "ghost",
1466
+ onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget),
1467
+ children: "clear all dimensions"
1468
+ }
1469
+ ) }),
1470
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1471
+ import_design_system6.Switch,
1472
+ {
1473
+ name: "controlGroup",
1474
+ label: "Control Group",
1475
+ onChange: toggleControlGroup,
1476
+ checked: data.controlGroup
1477
+ }
1478
+ )
1479
+ ] }),
1480
+ activeDims > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DimensionsTable_default, { dimensionIndex, dimensions: scores }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1481
+ NoActiveDimensions,
1482
+ {
1483
+ title: data.controlGroup ? "In control group" : "No active dimensions",
1484
+ 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.",
1485
+ buttonGroup: data.controlGroup ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system5.Button, { buttonType: "secondary", onClick: toggleControlGroup, children: "Exit control group" }) : null
1486
+ }
1487
+ ),
1488
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Accordion, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AccordionItem, { title: `Inactive Dimensions (${Object.keys(remainingDimensions).length})`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DimensionsTable_default, { dimensionIndex, dimensions: remainingDimensions }) }) })
1489
+ ] }) });
1490
+ };
1491
+
1492
+ // src/components/Personalization/Overrides.tsx
1493
+ var import_design_system7 = require("@uniformdev/design-system");
1494
+ var import_design_system8 = require("@uniformdev/design-system");
1495
+ var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
1496
+ var Overrides = ({
1497
+ dimensionIndex: { index: dimensionIndex },
1498
+ state: { data, scores },
1499
+ actions,
1500
+ settings,
1501
+ saveSettings
1502
+ }) => {
1503
+ var _a;
1504
+ const overrides = (_a = settings.scoreOverrides) != null ? _a : {};
1505
+ const totalOverrides = Object.keys(overrides).length;
1506
+ const addNewOverride = (e) => {
1507
+ e == null ? void 0 : e.preventDefault();
1508
+ return saveSettings({ ...settings, route: "/overrides/add" });
1509
+ };
1510
+ const toggleControlGroup = () => {
1511
+ actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
1512
+ };
1513
+ const scoresAffectedByOverrides = {};
1514
+ Object.entries(scores).map(([key, value]) => {
1515
+ if (overrides[key] !== void 0) {
1516
+ scoresAffectedByOverrides[key] = value;
1517
+ }
1518
+ });
1519
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("article", { css: styles.page, children: [
1520
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { css: styles.headingGroup, children: [
1521
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { css: styles.title, children: "What if?" }),
1522
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { css: styles.reset, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1523
+ import_design_system8.Button,
1524
+ {
1525
+ buttonType: "ghost",
1526
+ onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores }),
1527
+ children: "delete all overrides"
1528
+ }
1529
+ ) }),
1530
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system7.AddButton, { onClick: addNewOverride })
1531
+ ] }),
1532
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: "Override dimension scores to test personalization" }),
1533
+ totalOverrides > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1534
+ DimensionsTable_default,
1535
+ {
1536
+ dimensionIndex,
1537
+ dimensions: scoresAffectedByOverrides,
1538
+ onClick: (dim) => saveSettings({ ...settings, route: `/overrides/${dim}` })
1539
+ }
1540
+ ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1541
+ NoActiveDimensions,
1542
+ {
1543
+ title: data.controlGroup ? "In control group" : "No overrides",
1544
+ 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.",
1545
+ buttonGroup: data.controlGroup ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system8.Button, { buttonType: "secondary", onClick: toggleControlGroup, children: "Exit control group" }) : null
1546
+ }
1547
+ )
1548
+ ] }) });
1549
+ };
1550
+
1551
+ // src/components/Personalization/Quirks.tsx
1552
+ var import_design_system10 = require("@uniformdev/design-system");
1553
+ var import_react16 = require("react");
1554
+
1555
+ // src/components/Inputs/EditableText.tsx
1556
+ var import_design_system9 = require("@uniformdev/design-system");
1557
+ var import_react15 = require("react");
1558
+ var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
1559
+ var EditableText = ({ name, value, submit }) => {
1560
+ const [inputValue, setInputValue] = (0, import_react15.useState)(value != null ? value : "");
1561
+ (0, import_react15.useEffect)(() => {
1562
+ setInputValue(value != null ? value : "");
1563
+ }, [value]);
1564
+ const onChange = (e) => {
1565
+ setInputValue(e.target.value);
1566
+ };
1567
+ const isSameValue = inputValue === value;
1568
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
1569
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_design_system9.Input, { type: "text", css: [textInput], name, value: inputValue, onChange }),
1570
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1571
+ import_design_system9.Button,
1572
+ {
1573
+ buttonType: "primary",
1574
+ disabled: isSameValue,
1575
+ size: "sm",
1576
+ onClick: () => submit(name, inputValue != null ? inputValue : ""),
1577
+ children: "Save"
1578
+ }
1579
+ )
1580
+ ] });
1581
+ };
1582
+ var EditableText_default = EditableText;
1583
+
1584
+ // src/components/Personalization/Quirks.tsx
1585
+ var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
1586
+ var Quirks = ({ ...props }) => {
1587
+ const {
1588
+ state: {
1589
+ data: { quirks }
1590
+ },
1591
+ quirksIndex: { index: quirksIndex },
1592
+ settings,
1593
+ saveSettings,
1594
+ actions
1595
+ } = props;
1596
+ const [editable, setEditable] = (0, import_react16.useState)("");
1597
+ let editableQuirkMetaData;
1598
+ if (editable) {
1599
+ editableQuirkMetaData = quirksIndex[editable];
1600
+ }
1601
+ const submitOverride = async (name, value) => {
1602
+ var _a, _b, _c;
1603
+ setEditable("");
1604
+ const newSettings = {
1605
+ ...settings,
1606
+ quirkOverrides: {
1607
+ ...settings.quirkOverrides,
1608
+ [name]: { initial: (_c = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial) != null ? _c : quirks[name], override: value }
1609
+ }
1610
+ };
1611
+ await saveSettings(newSettings);
1612
+ const quirkOverrides = applyQuirkOverrides({
1613
+ quirks,
1614
+ quirkOverrides: newSettings.quirkOverrides
1615
+ });
1616
+ await actions.update({ quirks: quirkOverrides });
1617
+ };
1618
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("article", { css: [styles.page, styles.quirks], children: [
1619
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h1", { css: styles.title, children: "Quirks" }),
1620
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { css: styles.text, children: "Keys defined in Uniform and their current, programmatically defined values for this visit." }),
1621
+ Object.keys(quirksIndex).length ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Table, { children: [
1622
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(THead, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TRow, { children: [
1623
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(THeading, { width: "30%", children: "Key" }),
1624
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(THeading, { width: "50%", children: "Value" }),
1625
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(THeading, { width: "20%", children: "" })
1626
+ ] }) }),
1627
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TBody, { children: Object.values(quirksIndex).map(({ name, value, id }) => {
1628
+ var _a, _b, _c;
1629
+ const initialValue = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial;
1630
+ let quirkOptions = [];
1631
+ if (editableQuirkMetaData && editableQuirkMetaData.options) {
1632
+ quirkOptions = editableQuirkMetaData.options.map((option) => ({
1633
+ value: option.value,
1634
+ label: option.name
1635
+ }));
1636
+ }
1637
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TRow, { border: "bottom", children: [
1638
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TData, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("strong", { children: name }) }),
1639
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TData, { children: [
1640
+ editable !== id ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
1641
+ "div",
1642
+ {
1643
+ onClick: () => {
1644
+ setEditable(id);
1645
+ },
1646
+ children: [
1647
+ initialValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("s", { children: initialValue }) }) : null,
1648
+ value
1649
+ ]
1650
+ }
1651
+ ) : null,
1652
+ editable === id && editableQuirkMetaData && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: editableQuirkMetaData.options ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1653
+ import_design_system10.InputSelect,
1654
+ {
1655
+ showLabel: false,
1656
+ label: `Change ${name}`,
1657
+ defaultOption: `Change ${name}`,
1658
+ name: id,
1659
+ onChange: (e) => submitOverride(e.target.name, e.target.value),
1660
+ options: quirkOptions
1661
+ }
1662
+ ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EditableText_default, { name: id, value, submit: submitOverride }) })
1663
+ ] }),
1664
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TData, { children: editable ? null : ((_c = settings.quirkOverrides) == null ? void 0 : _c[id]) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1665
+ import_design_system10.Button,
1666
+ {
1667
+ buttonType: "ghost",
1668
+ onClick: () => {
1669
+ deleteQuirkOverride({ quirk: id, settings, saveSettings, actions });
1670
+ },
1671
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("small", { children: "Clear Override" })
1672
+ }
1673
+ ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1674
+ import_design_system10.Button,
1675
+ {
1676
+ buttonType: "ghost",
1677
+ onClick: () => {
1678
+ setEditable(id);
1679
+ },
1680
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("small", { children: "Override" })
1681
+ }
1682
+ ) })
1683
+ ] }, id);
1684
+ }) })
1685
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1686
+ NoActiveDimensions,
1687
+ {
1688
+ title: "No quirks configured",
1689
+ text: "There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."
1690
+ }
1691
+ )
1692
+ ] }) });
1693
+ };
1694
+
1695
+ // src/components/Personalization/Settings.tsx
1696
+ var import_design_system11 = require("@uniformdev/design-system");
1697
+ var import_design_system12 = require("@uniformdev/design-system");
1698
+ var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
1699
+ var Settings = ({
1700
+ settings,
1701
+ saveSettings,
1702
+ actions,
1703
+ state: { data },
1704
+ clearAllExtensionData
1705
+ }) => {
1706
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("article", { css: [styles.page, { display: "flex", flexDirection: "column", gap: "var(--spacing-base)" }], children: [
1707
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h1", { css: styles.title, children: "Settings" }),
1708
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
1709
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Data Connection" }),
1710
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1711
+ import_design_system11.Button,
1712
+ {
1713
+ buttonType: "tertiary",
1714
+ onClick: () => {
1715
+ saveSettings({ ...settings, route: "/connect" });
1716
+ },
1717
+ children: "Manage Connection to Uniform"
1718
+ }
1719
+ )
1720
+ ] }),
1721
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
1722
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Storage Consent" }),
1723
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1724
+ import_design_system12.Switch,
1725
+ {
1726
+ label: "Store visitor data",
1727
+ id: "consent-mode",
1728
+ name: "consentMode",
1729
+ checked: data.consent,
1730
+ onChange: (e) => {
1731
+ actions.rawUpdate([{ type: "consent", data: e.currentTarget.checked }]);
1732
+ saveSettings({
1733
+ ...settings,
1734
+ consentMode: e.currentTarget.checked
1735
+ });
1736
+ }
1737
+ }
1738
+ ),
1739
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("small", { children: "Enabling storage consent allows 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." }) })
1740
+ ] }),
1741
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
1742
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Logging" }),
1743
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1744
+ import_design_system12.Switch,
1745
+ {
1746
+ label: "Write Uniform Context diagnostic logs to browser console",
1747
+ id: "logging",
1748
+ name: "logging",
1749
+ checked: settings.logLevel === "debug",
1750
+ onChange: (e) => saveSettings({
1751
+ ...settings,
1752
+ logLevel: e.currentTarget.checked ? "debug" : "none"
1753
+ })
1754
+ }
1755
+ )
1756
+ ] }),
1757
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
1758
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Clear extension storage" }),
1759
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1760
+ import_design_system11.Button,
1761
+ {
1762
+ onClick: () => {
1763
+ clearAllExtensionData();
1764
+ },
1765
+ children: "Clear"
1766
+ }
1767
+ ),
1768
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("small", { children: "May be necessary when you have multiple different sites on the same domain name (e.g. http://localhost:3000) and there are some conflicts or other unexpected behaviour." }) })
1769
+ ] })
1770
+ ] });
1771
+ };
1772
+
1773
+ // src/components/QuickConnect/QuickConnect.tsx
1774
+ var import_context2 = require("@uniformdev/context");
1775
+ var import_api3 = require("@uniformdev/context/api");
1776
+ var import_design_system13 = require("@uniformdev/design-system");
1777
+ var import_formik2 = require("formik");
1778
+ var React5 = __toESM(require("react"));
1779
+ var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
1780
+ function QuickConnect(props) {
1781
+ const [state, setState] = React5.useState(props.currentData ? "c" : "qc");
1782
+ const [error, setError] = React5.useState(void 0);
1783
+ const [manifest, setManifest] = React5.useState(void 0);
1784
+ const fetchManifest = React5.useCallback(async (data) => {
1785
+ const client = new import_api3.UncachedManifestClient(data);
1786
+ setError(void 0);
1787
+ try {
1788
+ const manifest2 = await client.get({ preview: true });
1789
+ setManifest({ manifest: manifest2, target: data });
1790
+ return manifest2;
1791
+ } catch (e) {
1792
+ if (e instanceof import_api3.ApiClientError) {
1793
+ if (e.statusCode === 403) {
1794
+ setError(
1795
+ "API key is valid but does not have Context > Read Drafts permission, or the API key does not have permissions to the project, or the project does not exist."
1796
+ );
1797
+ } else {
1798
+ setError(e.errorMessage);
1799
+ }
1800
+ return;
1801
+ }
1802
+ if ("message" in e) {
1803
+ if (e.message === "Failed to fetch") {
1804
+ setError("A network error occurred. Ensure the API host is valid.");
1805
+ } else {
1806
+ setError(e.message);
1807
+ }
1808
+ return;
1809
+ }
1810
+ setError(JSON.stringify(e, null, 2));
1811
+ return;
1812
+ }
1813
+ }, []);
1814
+ React5.useEffect(() => {
1815
+ if (!props.currentData)
1816
+ return;
1817
+ fetchManifest(props.currentData);
1818
+ }, [fetchManifest, props.currentData]);
1819
+ const onConnect = async (data) => {
1820
+ const manifest2 = await fetchManifest(data);
1821
+ if (manifest2) {
1822
+ setState("c");
1823
+ await props.onConnect(data);
1824
+ }
1825
+ };
1826
+ const onDisconnect = () => {
1827
+ if (confirm("Disconnect from Uniform? Make sure to save your API key if you want to reconnect.")) {
1828
+ setState("qc");
1829
+ setManifest(void 0);
1830
+ setError(void 0);
1831
+ props.onConnect(null);
1832
+ }
1833
+ };
1834
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
1835
+ error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
1836
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.ErrorMessage, { message: error }),
1837
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { buttonType: "secondary", type: "button", onClick: onDisconnect, children: "Clear old/broken settings" })
1838
+ ] }) : null,
1839
+ state === "qc" || state === "mc" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ConnectForm, { ...props, state, setState, onConnect }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: manifest ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
1840
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
1841
+ "Connected to",
1842
+ " ",
1843
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1844
+ "a",
1845
+ {
1846
+ href: `${manifest == null ? void 0 : manifest.target.apiHost}/projects/${manifest == null ? void 0 : manifest.target.projectId}`,
1847
+ target: "_blank",
1848
+ rel: "noopener noreferrer",
1849
+ css: { textDecoration: "underline" },
1850
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: manifest == null ? void 0 : manifest.manifest.project.name })
1851
+ }
1852
+ ),
1853
+ " ",
1854
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("small", { children: [
1855
+ "(",
1856
+ manifest == null ? void 0 : manifest.manifest.project.id,
1857
+ ")"
1858
+ ] })
1859
+ ] }),
1860
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { buttonType: "secondary", type: "button", onClick: onDisconnect, children: "Disconnect" })
1861
+ ] }) : null })
1862
+ ] });
1863
+ }
1864
+ function ConnectForm({
1865
+ setState,
1866
+ state,
1867
+ currentData,
1868
+ onConnect
1869
+ }) {
1870
+ var _a, _b, _c;
1871
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1872
+ import_formik2.Formik,
1873
+ {
1874
+ initialValues: {
1875
+ apiHost: (_a = currentData == null ? void 0 : currentData.apiHost) != null ? _a : "https://uniform.app",
1876
+ apiKey: (_b = currentData == null ? void 0 : currentData.apiKey) != null ? _b : "",
1877
+ projectId: (_c = currentData == null ? void 0 : currentData.projectId) != null ? _c : "",
1878
+ qc: ""
1879
+ },
1880
+ onSubmit: onConnect,
1881
+ children: ({ setFieldValue, setFieldError, errors: { qc }, isSubmitting }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_formik2.Form, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("fieldset", { css: { display: "flex", flexDirection: "column", gap: "var(--spacing-base)" }, children: state === "qc" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
1882
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1883
+ import_design_system13.Input,
1884
+ {
1885
+ placeholder: "Paste Quick Connect Code Here",
1886
+ caption: "Copy the Quick Connect code after creating an API key in Uniform.",
1887
+ errorMessage: qc,
1888
+ onChange: (e) => {
1889
+ try {
1890
+ const qc2 = (0, import_context2.parseQuickConnect)(e.currentTarget.value);
1891
+ setFieldValue("apiHost", qc2.apiHost);
1892
+ setFieldValue("apiKey", qc2.apiKey);
1893
+ setFieldValue("projectId", qc2.projectId);
1894
+ } catch (e2) {
1895
+ setFieldError("qc", e2.message);
1896
+ }
1897
+ }
1898
+ }
1899
+ ) }),
1900
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
1901
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
1902
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1903
+ import_design_system13.Button,
1904
+ {
1905
+ type: "button",
1906
+ buttonType: "ghost",
1907
+ onClick: () => setState("mc"),
1908
+ disabled: isSubmitting,
1909
+ children: "Connect Manually"
1910
+ }
1911
+ )
1912
+ ] })
1913
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
1914
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1915
+ import_formik2.Field,
1916
+ {
1917
+ component: FormikInput,
1918
+ label: "API Key",
1919
+ name: "apiKey",
1920
+ caption: "Generate an API key in your Uniform team settings."
1921
+ }
1922
+ ) }),
1923
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1924
+ import_formik2.Field,
1925
+ {
1926
+ component: FormikInput,
1927
+ label: "Project ID",
1928
+ name: "projectId",
1929
+ caption: "Available to copy after generating an API key"
1930
+ }
1931
+ ) }),
1932
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1933
+ import_formik2.Field,
1934
+ {
1935
+ component: FormikInput,
1936
+ label: "API Host",
1937
+ name: "apiHost",
1938
+ caption: "Use a non-standard Uniform API endpoint. Most people will not not need this option."
1939
+ }
1940
+ ) }),
1941
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
1942
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
1943
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1944
+ import_design_system13.Button,
1945
+ {
1946
+ type: "button",
1947
+ buttonType: "ghost",
1948
+ onClick: () => setState("qc"),
1949
+ disabled: isSubmitting,
1950
+ children: "Use Quick Connect"
1951
+ }
1952
+ )
1953
+ ] })
1954
+ ] }) }) })
1955
+ }
1956
+ ) });
1957
+ }
1958
+
1959
+ // src/components/QuickConnect/ConnectRoute.tsx
1960
+ var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
1961
+ var ConnectRoute = ({ settings, saveSettings }) => {
1962
+ const currentData = settings.apiKey && settings.projectId ? { apiKey: settings.apiKey, projectId: settings.projectId, apiHost: settings.apiHost } : void 0;
1963
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("article", { css: styles.page, children: [
1964
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h1", { css: styles.title, children: "Connect to a Uniform Project" }),
1965
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { css: styles.text, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("small", { children: "Adding an API key and project ID enables human-readable dimension labels to be shown. You must have access to the Uniform project to do this." }) }),
1966
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1967
+ QuickConnect,
1968
+ {
1969
+ onConnect: async (data) => {
1970
+ if (data) {
1971
+ await saveSettings({
1972
+ ...settings,
1973
+ apiKey: data.apiKey,
1974
+ projectId: data.projectId,
1975
+ apiHost: data.apiHost
1976
+ });
1977
+ } else {
1978
+ await saveSettings({
1979
+ ...settings,
1980
+ apiKey: void 0,
1981
+ projectId: void 0,
1982
+ apiHost: void 0
1983
+ });
1984
+ }
1985
+ },
1986
+ currentData
1987
+ }
1988
+ )
1989
+ ] });
1990
+ };
1991
+
1992
+ // src/components/StatusPages/AdditionalDataLoading.tsx
1993
+ var import_react17 = require("react");
1994
+ var import_react_use3 = require("react-use");
1995
+ var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
1996
+ var AdditionalDataLoading = () => {
1997
+ const [viz, setViz] = (0, import_react17.useState)(false);
1998
+ const mounted = (0, import_react_use3.useMountedState)();
1999
+ (0, import_react17.useEffect)(() => {
2000
+ setTimeout(() => {
2001
+ if (mounted()) {
2002
+ setViz(true);
2003
+ }
2004
+ }, 1e3);
2005
+ }, [mounted]);
2006
+ return viz ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("article", { css: styles.page, children: [
2007
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { children: "Loading..." }),
2008
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "Connecting to Uniform API for complete data." })
2009
+ ] }) : null;
2010
+ };
2011
+
2012
+ // src/components/StatusPages/NotFound.tsx
2013
+ var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
2014
+ var NotFound = () => {
2015
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("article", { children: [
2016
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { children: "Something when wrong" }),
2017
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { children: "We could not find the page you're looking for." })
2018
+ ] });
2019
+ };
2020
+
2021
+ // src/components/ContextDevTools.tsx
2022
+ var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
2023
+ var mainLayoutStyle = import_react18.css`
428
2024
  background: var(--white);
429
2025
  padding: var(--spacing-base);
430
2026
  overflow-y: auto;
@@ -453,7 +2049,51 @@ to {
453
2049
  &::-webkit-scrollbar-thumb:hover {
454
2050
  background: var(--gray-500);
455
2051
  }
456
- `;function Ye(e){let o=rt(e.settings,e.state.manifest),r=at(e.settings,e.state.data.quirks),t={...e,dimensionIndex:o,quirksIndex:r},n=()=>{var s;if(o.loading||r.loading)return(0,L.jsx)($t,{});if(e.settings.route&&e.settings.route.match(/overrides\/\w+/))return(0,L.jsx)(je,{...t});switch((s=e.settings)==null?void 0:s.route){case void 0:case"/":case"/dimensions":return(0,L.jsx)(Bt,{...t});case"/overrides":return(0,L.jsx)(Ft,{...t});case"/overrides/add":return(0,L.jsx)(je,{...t});case"/quirks":return(0,L.jsx)(Zt,{...t});case"/settings":return(0,L.jsx)(zt,{...t});case"/connect":return(0,L.jsx)(_t,{...t});default:return(0,L.jsx)(Kt,{})}};return(0,L.jsxs)(lt,{settings:e.settings,saveSettings:e.saveSettings,children:[(0,L.jsx)(Wt.Theme,{}),(0,L.jsx)(ve,{}),(0,L.jsxs)("div",{css:We.css`
2052
+ `;
2053
+ function ContextDevTools(props) {
2054
+ const dimensionIndex = useDimensionIndex(props.settings, props.state.manifest);
2055
+ const quirksIndex = useQuirkIndex(props.settings, props.state.data.quirks);
2056
+ const routeProps = {
2057
+ ...props,
2058
+ dimensionIndex,
2059
+ quirksIndex
2060
+ };
2061
+ const component = () => {
2062
+ var _a;
2063
+ if (dimensionIndex.loading || quirksIndex.loading) {
2064
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AdditionalDataLoading, {});
2065
+ }
2066
+ if (props.settings.route) {
2067
+ if (props.settings.route.match(/overrides\/\w+/)) {
2068
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AddOverride, { ...routeProps });
2069
+ }
2070
+ }
2071
+ switch ((_a = props.settings) == null ? void 0 : _a.route) {
2072
+ case void 0:
2073
+ case "/":
2074
+ case "/dimensions":
2075
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Dimensions, { ...routeProps });
2076
+ case "/overrides":
2077
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Overrides, { ...routeProps });
2078
+ case "/overrides/add":
2079
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AddOverride, { ...routeProps });
2080
+ case "/quirks":
2081
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Quirks, { ...routeProps });
2082
+ case "/settings":
2083
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Settings, { ...routeProps });
2084
+ case "/connect":
2085
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ConnectRoute, { ...routeProps });
2086
+ default:
2087
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NotFound, {});
2088
+ }
2089
+ };
2090
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DevToolsSettingsContextProvider, { settings: props.settings, saveSettings: props.saveSettings, children: [
2091
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_design_system14.Theme, {}),
2092
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Theme, {}),
2093
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
2094
+ "div",
2095
+ {
2096
+ css: import_react18.css`
457
2097
  display: grid;
458
2098
  grid-template-columns: 200px auto;
459
2099
  font-weight: var(--fs-base);
@@ -462,7 +2102,154 @@ to {
462
2102
  line-height: var(--base-line-height);
463
2103
  height: var(--min-height);
464
2104
  min-width: var(--site-width);
465
- `,children:[(0,L.jsx)(gt,{...e}),(0,L.jsxs)("main",{css:Ho,children:[(0,L.jsx)(Ze,{...e}),n()]})]})]})}var Fe=require("@uniformdev/context"),Q=F(require("react"));var Yt=require("@emotion/react/jsx-runtime"),Je="embeddedUniformDevToolsSettings";function Xe({context:e,initialSettings:o}){let r=e!=null?e:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,t=r!=null?r:new Fe.Context({manifest:{project:{}}}),[n,s]=Q.useState({data:t.storage.data,manifest:t.manifest.data,scores:t.scores,personalizations:[],tests:[]}),[l,d]=Q.useState(o!=null?o:{});Q.useEffect(()=>{var c;let a=(0,Fe.createDebugConsoleLogDrain)((c=l.logLevel)!=null?c:"none");return t.events.on("log",a),()=>{t.events.off("log",a)}},[l,t]),Q.useEffect(()=>{let a=()=>{let g=window.localStorage.getItem(Je)||"{}",h=JSON.parse(g),C=ye({quirks:t.storage.data.quirks,quirkOverrides:h.quirkOverrides});C&&(console.log("Applying overridden quirks:",C),t.update({quirks:C}));let T=ce({scores:t.scores,scoreOverrides:h.scoreOverrides});T.length&&(console.log("Applying overridden scores:",T),t.storage.updateData(T)),s(D=>({...D,scores:t.scores,data:t.storage.data,manifest:t.manifest.data}))},c=g=>{!g.changed||s(h=>({...h,personalizations:[...h.personalizations,g]}))},f=g=>{!g.variantAssigned||s(h=>({...h,tests:[...h.tests,g]}))};return t.events.on("personalizationResult",c),t.events.on("testResult",f),t.storage.events.on("*",a),()=>{t.storage.events.off("*",a),t.events.off("personalizationResult",c),t.events.off("testResult",f)}},[t]),Q.useEffect(()=>{if(window.localStorage){let a=window.localStorage.getItem(Je);if(a)try{let c=JSON.parse(a),f={...o,...c};d(f);let g=ce({scores:n.scores,scoreOverrides:f.scoreOverrides});p.rawUpdate(g)}catch(c){window.localStorage.removeItem(Je),console.error("Failed to parse settings from localStorage: ",c.message)}}},[]);let{actions:p,saveSettings:m,clearAllExtensionData:i}=Q.useMemo(()=>({actions:{update:g=>t.update(g),forget:()=>t.forget(!1),rawUpdate:g=>t.storage.updateData(g)},saveSettings:async g=>{d(g),window.localStorage&&window.localStorage.setItem("embeddedUniformDevToolsSettings",JSON.stringify(g))},clearAllExtensionData:async()=>{d({route:"/"}),window.localStorage&&(window.localStorage.removeItem("embeddedUniformDevToolsSettings"),window.location.reload())}}),[t]);return r?(0,Yt.jsx)(Ye,{state:n,actions:p,settings:l,saveSettings:m,clearAllExtensionData:i}):(0,Yt.jsx)("p",{children:"Unable to find Uniform Context. Ensure the devtools plugin is activated."})}var qe=require("@emotion/react"),_=require("@uniformdev/design-system"),te=F(require("react")),eo=require("react-use");var Jt=require("@emotion/react"),ee=require("@emotion/react/jsx-runtime"),Mo=Jt.css`
2105
+ `,
2106
+ children: [
2107
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Menu, { ...props }),
2108
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("main", { css: mainLayoutStyle, children: [
2109
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ConnectApiKey, { ...props }),
2110
+ component()
2111
+ ] })
2112
+ ]
2113
+ }
2114
+ )
2115
+ ] });
2116
+ }
2117
+
2118
+ // src/components/EmbeddedContextDevTools.tsx
2119
+ var import_context3 = require("@uniformdev/context");
2120
+ var React6 = __toESM(require("react"));
2121
+ var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
2122
+ var LOCAL_STORAGE_SETTINGS_KEY = "embeddedUniformDevToolsSettings";
2123
+ function EmbeddedContextDevTools({ context, initialSettings }) {
2124
+ const contextValue = context != null ? context : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
2125
+ const contextInstance = contextValue != null ? contextValue : new import_context3.Context({ manifest: { project: {} } });
2126
+ const [state, setState] = React6.useState({
2127
+ data: contextInstance.storage.data,
2128
+ manifest: contextInstance.manifest.data,
2129
+ scores: contextInstance.scores,
2130
+ personalizations: [],
2131
+ tests: []
2132
+ });
2133
+ const [settings, setSettings] = React6.useState(initialSettings != null ? initialSettings : {});
2134
+ React6.useEffect(() => {
2135
+ var _a;
2136
+ const drain = (0, import_context3.createDebugConsoleLogDrain)((_a = settings.logLevel) != null ? _a : "none");
2137
+ contextInstance.events.on("log", drain);
2138
+ return () => {
2139
+ contextInstance.events.off("log", drain);
2140
+ };
2141
+ }, [settings, contextInstance]);
2142
+ React6.useEffect(() => {
2143
+ const onContextDataUpdated = () => {
2144
+ const settingsJson = window.localStorage.getItem(LOCAL_STORAGE_SETTINGS_KEY) || "{}";
2145
+ const currentSettings = JSON.parse(settingsJson);
2146
+ const quirkOverrides = applyQuirkOverrides({
2147
+ quirks: contextInstance.storage.data.quirks,
2148
+ quirkOverrides: currentSettings.quirkOverrides
2149
+ });
2150
+ if (quirkOverrides) {
2151
+ console.log("Applying overridden quirks:", quirkOverrides);
2152
+ contextInstance.update({ quirks: quirkOverrides });
2153
+ }
2154
+ const overrideCommands = applyScoreOverrides({
2155
+ scores: contextInstance.scores,
2156
+ scoreOverrides: currentSettings.scoreOverrides
2157
+ });
2158
+ if (overrideCommands.length) {
2159
+ console.log("Applying overridden scores:", overrideCommands);
2160
+ contextInstance.storage.updateData(overrideCommands);
2161
+ }
2162
+ setState((old) => ({
2163
+ ...old,
2164
+ scores: contextInstance.scores,
2165
+ data: contextInstance.storage.data,
2166
+ manifest: contextInstance.manifest.data
2167
+ }));
2168
+ };
2169
+ const onPersonalizationResult = (e) => {
2170
+ if (!e.changed)
2171
+ return;
2172
+ setState((old) => ({ ...old, personalizations: [...old.personalizations, e] }));
2173
+ };
2174
+ const onTestResult = (e) => {
2175
+ if (!e.variantAssigned)
2176
+ return;
2177
+ setState((old) => ({ ...old, tests: [...old.tests, e] }));
2178
+ };
2179
+ contextInstance.events.on("personalizationResult", onPersonalizationResult);
2180
+ contextInstance.events.on("testResult", onTestResult);
2181
+ contextInstance.storage.events.on("*", onContextDataUpdated);
2182
+ return () => {
2183
+ contextInstance.storage.events.off("*", onContextDataUpdated);
2184
+ contextInstance.events.off("personalizationResult", onPersonalizationResult);
2185
+ contextInstance.events.off("testResult", onTestResult);
2186
+ };
2187
+ }, [contextInstance]);
2188
+ React6.useEffect(() => {
2189
+ if (window.localStorage) {
2190
+ const settingsJson = window.localStorage.getItem(LOCAL_STORAGE_SETTINGS_KEY);
2191
+ if (settingsJson) {
2192
+ try {
2193
+ const parsedSettings = JSON.parse(settingsJson);
2194
+ const newSettings = { ...initialSettings, ...parsedSettings };
2195
+ setSettings(newSettings);
2196
+ const applyCommands = applyScoreOverrides({
2197
+ scores: state.scores,
2198
+ scoreOverrides: newSettings.scoreOverrides
2199
+ });
2200
+ actions.rawUpdate(applyCommands);
2201
+ } catch (e) {
2202
+ window.localStorage.removeItem(LOCAL_STORAGE_SETTINGS_KEY);
2203
+ console.error("Failed to parse settings from localStorage: ", e.message);
2204
+ }
2205
+ }
2206
+ }
2207
+ }, []);
2208
+ const { actions, saveSettings, clearAllExtensionData } = React6.useMemo(() => {
2209
+ const actions2 = {
2210
+ update: (up) => contextInstance.update(up),
2211
+ forget: () => contextInstance.forget(false),
2212
+ rawUpdate: (commands) => contextInstance.storage.updateData(commands)
2213
+ };
2214
+ const saveSettings2 = async (settings2) => {
2215
+ setSettings(settings2);
2216
+ if (window.localStorage) {
2217
+ window.localStorage.setItem("embeddedUniformDevToolsSettings", JSON.stringify(settings2));
2218
+ }
2219
+ };
2220
+ const clearAllExtensionData2 = async () => {
2221
+ setSettings({
2222
+ route: "/"
2223
+ });
2224
+ if (window.localStorage) {
2225
+ window.localStorage.removeItem("embeddedUniformDevToolsSettings");
2226
+ window.location.reload();
2227
+ }
2228
+ };
2229
+ return { actions: actions2, saveSettings: saveSettings2, clearAllExtensionData: clearAllExtensionData2 };
2230
+ }, [contextInstance]);
2231
+ return contextValue ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2232
+ ContextDevTools,
2233
+ {
2234
+ state,
2235
+ actions,
2236
+ settings,
2237
+ saveSettings,
2238
+ clearAllExtensionData
2239
+ }
2240
+ ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { children: "Unable to find Uniform Context. Ensure the devtools plugin is activated." });
2241
+ }
2242
+
2243
+ // src/components/ToggleEmbeddedContextDevTools.tsx
2244
+ var import_react20 = require("@emotion/react");
2245
+ var import_design_system15 = require("@uniformdev/design-system");
2246
+ var React7 = __toESM(require("react"));
2247
+ var import_react_use4 = require("react-use");
2248
+
2249
+ // src/components/EmbedToggleButton/EmbedToggleButton.tsx
2250
+ var import_react19 = require("@emotion/react");
2251
+ var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
2252
+ var btnStyle2 = import_react19.css`
466
2253
  align-items: center;
467
2254
  border-radius: var(--rounded-full);
468
2255
  background: var(--brand-secondary-5);
@@ -488,15 +2275,107 @@ to {
488
2275
  max-width: 100%;
489
2276
  height: auto;
490
2277
  }
491
- `,Xt=({...e})=>(0,ee.jsxs)("button",{type:"button",css:Mo,...e,children:[(0,ee.jsx)("span",{hidden:!0,children:"Uniform devtools"}),(0,ee.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,ee.jsx)("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),(0,ee.jsx)("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"}),(0,ee.jsx)("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"})]})]});var I=require("@emotion/react/jsx-runtime"),Eo="dblgnkbknchechcibdojfdoeeodhmgbd",Ao="dcmlokofjljnfjcknpmhjocogllfbhkg";function Bo(e){let[o,r]=te.useState(!1),[t,n]=te.useState(e.context),[s,l]=te.useState(!1),[d,p]=(0,eo.useLocalStorage)("isUniformInlineDevtoolsDisabled",!1);return te.useEffect(()=>{!e.context&&typeof document!="undefined"&&n(window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__)},[e.context]),te.useEffect(()=>{[Ao,Eo].map(m=>{let i=new Image;i.src=`chrome-extension://${m}/icons/uniform-logo.png`,i.onload=()=>l(!0)})},[]),d?null:t?(0,I.jsxs)("div",{children:[(0,I.jsx)(_.Theme,{}),(0,I.jsx)(ve,{}),(0,I.jsx)(Xt,{onClick:()=>r(m=>!m)}),o?(0,I.jsx)("div",{css:qe.css`
2278
+ `;
2279
+ var EmbedToggleButton = ({ ...props }) => {
2280
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("button", { type: "button", css: btnStyle2, ...props, children: [
2281
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { hidden: true, children: "Uniform devtools" }),
2282
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2283
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
2284
+ "path",
2285
+ {
2286
+ d: "M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",
2287
+ fill: "currentColor"
2288
+ }
2289
+ ),
2290
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
2291
+ "path",
2292
+ {
2293
+ 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",
2294
+ fill: "currentColor"
2295
+ }
2296
+ ),
2297
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
2298
+ "path",
2299
+ {
2300
+ 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",
2301
+ fill: "currentColor"
2302
+ }
2303
+ )
2304
+ ] })
2305
+ ] });
2306
+ };
2307
+
2308
+ // src/components/ToggleEmbeddedContextDevTools.tsx
2309
+ var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
2310
+ var localChromex = "dblgnkbknchechcibdojfdoeeodhmgbd";
2311
+ var prodChromex = "dcmlokofjljnfjcknpmhjocogllfbhkg";
2312
+ function ToggleEmbeddedContextDevTools(props) {
2313
+ const [devtoolsOpen, setDevtoolsOpen] = React7.useState(false);
2314
+ const [contextValue, setContextValue] = React7.useState(props.context);
2315
+ const [extensionExists, setExtensionExists] = React7.useState(false);
2316
+ const [isUniformInlineDevtoolsDisabled, setUniformInlineDevtoolsDisabled] = (0, import_react_use4.useLocalStorage)(
2317
+ "isUniformInlineDevtoolsDisabled",
2318
+ false
2319
+ );
2320
+ React7.useEffect(() => {
2321
+ if (!props.context && typeof document !== "undefined") {
2322
+ setContextValue(window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__);
2323
+ }
2324
+ }, [props.context]);
2325
+ React7.useEffect(() => {
2326
+ [prodChromex, localChromex].map((extensionId) => {
2327
+ const img = new Image();
2328
+ img.src = `chrome-extension://${extensionId}/icons/uniform-logo.png`;
2329
+ img.onload = () => setExtensionExists(true);
2330
+ });
2331
+ }, []);
2332
+ if (isUniformInlineDevtoolsDisabled) {
2333
+ return null;
2334
+ }
2335
+ return contextValue ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
2336
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_design_system15.Theme, {}),
2337
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Theme, {}),
2338
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmbedToggleButton, { onClick: () => setDevtoolsOpen((prev) => !prev) }),
2339
+ devtoolsOpen ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
2340
+ "div",
2341
+ {
2342
+ css: import_react20.css`
492
2343
  box-shadow: var(--shadow-base);
493
2344
  position: fixed;
494
2345
  bottom: 82px;
495
2346
  right: var(--spacing-base);
496
2347
  z-index: var(--z-10);
497
2348
  max-width: var(--site-width);
498
- `,children:s?(0,I.jsx)("div",{css:qe.css`
2349
+ `,
2350
+ children: extensionExists ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
2351
+ "div",
2352
+ {
2353
+ css: import_react20.css`
499
2354
  padding: var(--spacing-md);
500
- `,children:(0,I.jsxs)(_.Callout,{type:"danger",title:"This functionality is disabled.",children:[(0,I.jsx)(_.Paragraph,{children:"We detected you already use the Uniform Context browser extension. Using both tools is not supported. Please use the functionality of the browser extension instead."}),(0,I.jsx)(_.Button,{css:qe.css`
2355
+ `,
2356
+ children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_design_system15.Callout, { type: "danger", title: "This functionality is disabled.", children: [
2357
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_design_system15.Paragraph, { children: "We detected you already use the Uniform Context browser extension. Using both tools is not supported. Please use the functionality of the browser extension instead." }),
2358
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
2359
+ import_design_system15.Button,
2360
+ {
2361
+ css: import_react20.css`
501
2362
  margin-top: var(--spacing-md);
502
- `,buttonType:"secondary",onClick:()=>p(!0),children:"Disabled inline tools"})]})}):(0,I.jsx)(Xe,{...e})}):null]}):(0,I.jsx)("p",{children:"Unable to find Uniform Context. Ensure the devtools plugin is activated."})}0&&(module.exports={ContextDevTools,EmbeddedContextDevTools,ToggleEmbeddedContextDevTools});
2363
+ `,
2364
+ buttonType: "secondary",
2365
+ onClick: () => setUniformInlineDevtoolsDisabled(true),
2366
+ children: "Disabled inline tools"
2367
+ }
2368
+ )
2369
+ ] })
2370
+ }
2371
+ ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmbeddedContextDevTools, { ...props })
2372
+ }
2373
+ ) : null
2374
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: "Unable to find Uniform Context. Ensure the devtools plugin is activated." });
2375
+ }
2376
+ // Annotate the CommonJS export names for ESM import in node:
2377
+ 0 && (module.exports = {
2378
+ ContextDevTools,
2379
+ EmbeddedContextDevTools,
2380
+ ToggleEmbeddedContextDevTools
2381
+ });