@xylabs/react-pixel-debugger 3.0.4 → 3.0.6

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 (107) hide show
  1. package/dist/browser/PixelEvent.cjs +2 -0
  2. package/dist/browser/PixelEvent.cjs.map +1 -1
  3. package/dist/browser/PixelEvent.d.cts +5 -0
  4. package/dist/browser/PixelEvent.d.cts.map +1 -0
  5. package/dist/browser/components/PixelDebugger.cjs +35 -9
  6. package/dist/browser/components/PixelDebugger.cjs.map +1 -1
  7. package/dist/browser/components/PixelDebugger.d.cts +3 -0
  8. package/dist/browser/components/PixelDebugger.d.cts.map +1 -0
  9. package/dist/browser/components/PixelDebugger.js +33 -8
  10. package/dist/browser/components/PixelDebugger.js.map +1 -1
  11. package/dist/browser/components/PixelDebuggerProvider.cjs +4 -2
  12. package/dist/browser/components/PixelDebuggerProvider.cjs.map +1 -1
  13. package/dist/browser/components/PixelDebuggerProvider.d.cts +4 -0
  14. package/dist/browser/components/PixelDebuggerProvider.d.cts.map +1 -0
  15. package/dist/browser/components/PixelDebuggerProvider.js +3 -2
  16. package/dist/browser/components/PixelDebuggerProvider.js.map +1 -1
  17. package/dist/browser/components/PixelDebuggerToggle.cjs +4 -2
  18. package/dist/browser/components/PixelDebuggerToggle.cjs.map +1 -1
  19. package/dist/browser/components/PixelDebuggerToggle.d.cts +4 -0
  20. package/dist/browser/components/PixelDebuggerToggle.d.cts.map +1 -0
  21. package/dist/browser/components/PixelDebuggerToggle.js +3 -2
  22. package/dist/browser/components/PixelDebuggerToggle.js.map +1 -1
  23. package/dist/browser/components/index.cjs +115 -4
  24. package/dist/browser/components/index.cjs.map +1 -1
  25. package/dist/browser/components/index.d.cts +4 -0
  26. package/dist/browser/components/index.d.cts.map +1 -0
  27. package/dist/browser/components/index.js +108 -3
  28. package/dist/browser/components/index.js.map +1 -1
  29. package/dist/browser/hooks/index.cjs +32 -2
  30. package/dist/browser/hooks/index.cjs.map +1 -1
  31. package/dist/browser/hooks/index.d.cts +2 -0
  32. package/dist/browser/hooks/index.d.cts.map +1 -0
  33. package/dist/browser/hooks/index.js +25 -1
  34. package/dist/browser/hooks/index.js.map +1 -1
  35. package/dist/browser/hooks/usePixelAltSendHandler.cjs +3 -1
  36. package/dist/browser/hooks/usePixelAltSendHandler.cjs.map +1 -1
  37. package/dist/browser/hooks/usePixelAltSendHandler.d.cts +2 -0
  38. package/dist/browser/hooks/usePixelAltSendHandler.d.cts.map +1 -0
  39. package/dist/browser/hooks/usePixelAltSendHandler.js +2 -1
  40. package/dist/browser/hooks/usePixelAltSendHandler.js.map +1 -1
  41. package/dist/browser/index.cjs +116 -4
  42. package/dist/browser/index.cjs.map +1 -1
  43. package/dist/browser/index.d.cts +4 -0
  44. package/dist/browser/index.d.cts.map +1 -0
  45. package/dist/browser/index.js +109 -3
  46. package/dist/browser/index.js.map +1 -1
  47. package/dist/node/PixelEvent.cjs +19 -0
  48. package/dist/node/PixelEvent.cjs.map +1 -0
  49. package/dist/node/PixelEvent.d.cts +5 -0
  50. package/dist/node/PixelEvent.d.cts.map +1 -0
  51. package/dist/node/PixelEvent.js +0 -18
  52. package/dist/node/PixelEvent.js.map +1 -1
  53. package/dist/node/components/PixelDebugger.cjs +109 -0
  54. package/dist/node/components/{PixelDebugger.mjs.map → PixelDebugger.cjs.map} +1 -1
  55. package/dist/node/components/PixelDebugger.d.cts +3 -0
  56. package/dist/node/components/PixelDebugger.d.cts.map +1 -0
  57. package/dist/node/components/PixelDebugger.js +34 -59
  58. package/dist/node/components/PixelDebugger.js.map +1 -1
  59. package/dist/node/components/PixelDebuggerProvider.cjs +37 -0
  60. package/dist/node/components/{PixelDebuggerProvider.mjs.map → PixelDebuggerProvider.cjs.map} +1 -1
  61. package/dist/node/components/PixelDebuggerProvider.d.cts +4 -0
  62. package/dist/node/components/PixelDebuggerProvider.d.cts.map +1 -0
  63. package/dist/node/components/PixelDebuggerProvider.js +7 -32
  64. package/dist/node/components/PixelDebuggerProvider.js.map +1 -1
  65. package/dist/node/components/PixelDebuggerToggle.cjs +42 -0
  66. package/dist/node/components/{PixelDebuggerToggle.mjs.map → PixelDebuggerToggle.cjs.map} +1 -1
  67. package/dist/node/components/PixelDebuggerToggle.d.cts +4 -0
  68. package/dist/node/components/PixelDebuggerToggle.d.cts.map +1 -0
  69. package/dist/node/components/PixelDebuggerToggle.js +11 -36
  70. package/dist/node/components/PixelDebuggerToggle.js.map +1 -1
  71. package/dist/node/components/index.cjs +138 -0
  72. package/dist/node/components/index.cjs.map +1 -0
  73. package/dist/node/components/index.d.cts +4 -0
  74. package/dist/node/components/index.d.cts.map +1 -0
  75. package/dist/node/components/index.js +48 -77
  76. package/dist/node/components/index.js.map +1 -1
  77. package/dist/node/hooks/index.cjs +53 -0
  78. package/dist/node/hooks/index.cjs.map +1 -0
  79. package/dist/node/hooks/index.d.cts +2 -0
  80. package/dist/node/hooks/index.d.cts.map +1 -0
  81. package/dist/node/hooks/index.js +10 -37
  82. package/dist/node/hooks/index.js.map +1 -1
  83. package/dist/node/hooks/usePixelAltSendHandler.cjs +51 -0
  84. package/dist/node/hooks/{index.mjs.map → usePixelAltSendHandler.cjs.map} +1 -1
  85. package/dist/node/hooks/usePixelAltSendHandler.d.cts +2 -0
  86. package/dist/node/hooks/usePixelAltSendHandler.d.cts.map +1 -0
  87. package/dist/node/hooks/usePixelAltSendHandler.js +10 -35
  88. package/dist/node/hooks/usePixelAltSendHandler.js.map +1 -1
  89. package/dist/node/index.cjs +140 -0
  90. package/dist/node/index.cjs.map +1 -0
  91. package/dist/node/index.d.cts +4 -0
  92. package/dist/node/index.d.cts.map +1 -0
  93. package/dist/node/index.js +48 -78
  94. package/dist/node/index.js.map +1 -1
  95. package/package.json +15 -14
  96. package/dist/node/PixelEvent.mjs +0 -1
  97. package/dist/node/PixelEvent.mjs.map +0 -1
  98. package/dist/node/components/PixelDebugger.mjs +0 -84
  99. package/dist/node/components/PixelDebuggerProvider.mjs +0 -12
  100. package/dist/node/components/PixelDebuggerToggle.mjs +0 -17
  101. package/dist/node/components/index.mjs +0 -109
  102. package/dist/node/components/index.mjs.map +0 -1
  103. package/dist/node/hooks/index.mjs +0 -26
  104. package/dist/node/hooks/usePixelAltSendHandler.mjs +0 -26
  105. package/dist/node/hooks/usePixelAltSendHandler.mjs.map +0 -1
  106. package/dist/node/index.mjs +0 -110
  107. package/dist/node/index.mjs.map +0 -1
@@ -12,6 +12,8 @@ var __copyProps = (to, from, except, desc) => {
12
12
  return to;
13
13
  };
14
14
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+
16
+ // src/PixelEvent.ts
15
17
  var PixelEvent_exports = {};
16
18
  module.exports = __toCommonJS(PixelEvent_exports);
17
19
  //# sourceMappingURL=PixelEvent.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/PixelEvent.ts"],"sourcesContent":["export interface PixelEvent {\n event: string\n fields?: unknown\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
1
+ {"version":3,"sources":["../../src/PixelEvent.ts"],"sourcesContent":["export interface PixelEvent {\n event: string\n fields?: unknown\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
@@ -0,0 +1,5 @@
1
+ export interface PixelEvent {
2
+ event: string;
3
+ fields?: unknown;
4
+ }
5
+ //# sourceMappingURL=PixelEvent.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelEvent.d.ts","sourceRoot":"","sources":["../../src/PixelEvent.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB"}
@@ -16,25 +16,51 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebugger.tsx
19
21
  var PixelDebugger_exports = {};
20
22
  __export(PixelDebugger_exports, {
21
23
  PixelDebugger: () => PixelDebugger
22
24
  });
23
25
  module.exports = __toCommonJS(PixelDebugger_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
26
  var import_material = require("@mui/material");
26
27
  var import_react_button = require("@xylabs/react-button");
27
28
  var import_react_flexbox = require("@xylabs/react-flexbox");
28
29
  var import_react_pixel = require("@xylabs/react-pixel");
29
30
  var import_react_portal = require("@xylabs/react-portal");
31
+ var import_react2 = require("react");
32
+
33
+ // src/hooks/usePixelAltSendHandler.ts
34
+ var import_pixel = require("@xylabs/pixel");
30
35
  var import_react = require("react");
31
- var import_hooks = require("../hooks");
32
- const PixelDebugger = () => {
33
- const { isDebugging } = (0, import_react.useContext)(import_react_pixel.DebugUserEventsContext);
36
+ var usePixelAltSendHandler = (altHandler) => {
37
+ const [pixelSend, setPixelSend] = (0, import_react.useState)();
38
+ (0, import_react.useEffect)(() => {
39
+ if (!pixelSend && import_pixel.XyPixel.instance.send) {
40
+ const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
41
+ setPixelSend(oldHandler);
42
+ } else {
43
+ import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
44
+ altHandler(event, fields);
45
+ return await pixelSend?.(event, fields, eventId);
46
+ };
47
+ }
48
+ return () => {
49
+ if (pixelSend) {
50
+ import_pixel.XyPixel.instance.send = pixelSend;
51
+ }
52
+ };
53
+ }, [pixelSend, altHandler]);
54
+ };
55
+
56
+ // src/components/PixelDebugger.tsx
57
+ var import_jsx_runtime = require("react/jsx-runtime");
58
+ var PixelDebugger = () => {
59
+ const { isDebugging } = (0, import_react2.useContext)(import_react_pixel.DebugUserEventsContext);
34
60
  const theme = (0, import_material.useTheme)();
35
- const [displayEvents, setDisplayEvents] = (0, import_react.useState)(false);
36
- const [events, setEvents] = (0, import_react.useState)([]);
37
- (0, import_hooks.usePixelAltSendHandler)((event, fields) => {
61
+ const [displayEvents, setDisplayEvents] = (0, import_react2.useState)(false);
62
+ const [events, setEvents] = (0, import_react2.useState)([]);
63
+ usePixelAltSendHandler((event, fields) => {
38
64
  setEvents((events2) => [{ event, fields }, ...events2]);
39
65
  });
40
66
  if (!isDebugging) {
@@ -68,8 +94,8 @@ const PixelDebugger = () => {
68
94
  }
69
95
  ) }) }) });
70
96
  };
71
- const PixelEventDetails = ({ event, fields, index, events }) => {
72
- const [isOpen, setIsOpen] = (0, import_react.useState)(false);
97
+ var PixelEventDetails = ({ event, fields, index, events }) => {
98
+ const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
73
99
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
74
100
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: event }),
75
101
  isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebugger.tsx"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCY;AAvCZ,sBAA2D;AAC3D,0BAAyB;AACzB,2BAAwB;AACxB,yBAAuC;AACvC,0BAAuB;AACvB,mBAAqC;AAErC,mBAAuC;AAGhC,MAAM,gBAA0B,MAAM;AAC3C,QAAM,EAAE,YAAY,QAAI,yBAAW,yCAAsB;AAEzD,QAAM,YAAQ,0BAAS;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAuB,CAAC,CAAC;AAErD,2CAAuB,CAAC,OAAe,WAAqC;AAC1E,cAAU,CAACA,YAAW,CAAC,EAAE,OAAO,OAAO,GAAG,GAAGA,OAAM,CAAC;AAAA,EACtD,CAAC;AAED,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,8BACC,sDAAC,SAAI,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,SAAS,OAAO,IAAI,GAC9D,sDAAC,yBAAM,cAAc,OAAO,QAAQ,OAAM,WAAU,IAAI,EAAE,OAAO,OAAO,GACtE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,IAAI;AAAA,QACF,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,MACA,OAAO,MAAM,QAAQ,QAAQ;AAAA,MAE7B,uDAAC,gCAAQ,YAAW,WAAU,IAAI,EAAE,UAAU,UAAU,WAAW,IAAI,GACrE;AAAA,oDAAC,gCAAQ,YAAW,WAAU,IAAI,EAAE,MAAM,WAAW,GACnD,sDAAC,gCAAS,SAAQ,QAAO,SAAS,MAAM,iBAAiB,CAAC,aAAa,GAAG,+BAE1E,GACF;AAAA,QACC,iBAAiB,CAAC,CAAC,OAAO,UACzB;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,cAAa;AAAA,YACb,SAAS;AAAA,YACT,IAAI,EAAE,QAAQ,WAAW,MAAM,YAAY,WAAW,QAAQ,YAAY,OAAO;AAAA,YAEhF,iBAAO,IAAI,CAAC,GAAG,UACd,4CAAC,qBAA8C,QAAgB,OAAe,GAAG,KAAzD,GAAG,EAAE,KAAK,IAAI,KAAK,EAAyC,CACrF;AAAA;AAAA,QACH;AAAA,QAED,iBAAiB,CAAC,OAAO,UAAU,4CAAC,8BAAW,SAAQ,aAAY,uBAAS;AAAA,SAC/E;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,oBAAoF,CAAC,EAAE,OAAO,QAAQ,OAAO,OAAO,MAAM;AAC9H,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,SACE,6CAAC,gCAAQ,YAAW,WAAU,cAAc,KAAK,SAAS,MAAM,UAAU,CAAC,MAAM,GAC/E;AAAA,gDAAC,8BAAW,SAAQ,aAAa,iBAAM;AAAA,IACtC,UACC,4CAAC,8BAAW,cAAc,KAAK,SAAQ,WACpC,eAAK,UAAU,QAAQ,MAAM,CAAC,GACjC;AAAA,IAED,OAAO,QAAQ,CAAC,KAAK,4CAAC,2BAAQ;AAAA,KACjC;AAEJ;","names":["events"]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":"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","names":["import_react","events"]}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const PixelDebugger: React.FC;
3
+ //# sourceMappingURL=PixelDebugger.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":";AAUA,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAsDjC,CAAA"}
@@ -1,16 +1,41 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/PixelDebugger.tsx
2
2
  import { Badge, Card, Divider, Typography, useTheme } from "@mui/material";
3
3
  import { ButtonEx } from "@xylabs/react-button";
4
4
  import { FlexCol } from "@xylabs/react-flexbox";
5
5
  import { DebugUserEventsContext } from "@xylabs/react-pixel";
6
6
  import { Portal } from "@xylabs/react-portal";
7
- import { useContext, useState } from "react";
8
- import { usePixelAltSendHandler } from "../hooks";
9
- const PixelDebugger = () => {
7
+ import { useContext, useState as useState2 } from "react";
8
+
9
+ // src/hooks/usePixelAltSendHandler.ts
10
+ import { XyPixel } from "@xylabs/pixel";
11
+ import { useEffect, useState } from "react";
12
+ var usePixelAltSendHandler = (altHandler) => {
13
+ const [pixelSend, setPixelSend] = useState();
14
+ useEffect(() => {
15
+ if (!pixelSend && XyPixel.instance.send) {
16
+ const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
17
+ setPixelSend(oldHandler);
18
+ } else {
19
+ XyPixel.instance.send = async (event, fields, eventId) => {
20
+ altHandler(event, fields);
21
+ return await pixelSend?.(event, fields, eventId);
22
+ };
23
+ }
24
+ return () => {
25
+ if (pixelSend) {
26
+ XyPixel.instance.send = pixelSend;
27
+ }
28
+ };
29
+ }, [pixelSend, altHandler]);
30
+ };
31
+
32
+ // src/components/PixelDebugger.tsx
33
+ import { jsx, jsxs } from "react/jsx-runtime";
34
+ var PixelDebugger = () => {
10
35
  const { isDebugging } = useContext(DebugUserEventsContext);
11
36
  const theme = useTheme();
12
- const [displayEvents, setDisplayEvents] = useState(false);
13
- const [events, setEvents] = useState([]);
37
+ const [displayEvents, setDisplayEvents] = useState2(false);
38
+ const [events, setEvents] = useState2([]);
14
39
  usePixelAltSendHandler((event, fields) => {
15
40
  setEvents((events2) => [{ event, fields }, ...events2]);
16
41
  });
@@ -45,8 +70,8 @@ const PixelDebugger = () => {
45
70
  }
46
71
  ) }) }) });
47
72
  };
48
- const PixelEventDetails = ({ event, fields, index, events }) => {
49
- const [isOpen, setIsOpen] = useState(false);
73
+ var PixelEventDetails = ({ event, fields, index, events }) => {
74
+ const [isOpen, setIsOpen] = useState2(false);
50
75
  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
51
76
  /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: event }),
52
77
  isOpen && /* @__PURE__ */ jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebugger.tsx"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n"],"mappings":"AAuCY,SAEI,KAFJ;AAvCZ,SAAS,OAAO,MAAM,SAAS,YAAY,gBAAgB;AAC3D,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,YAAY,gBAAgB;AAErC,SAAS,8BAA8B;AAGhC,MAAM,gBAA0B,MAAM;AAC3C,QAAM,EAAE,YAAY,IAAI,WAAW,sBAAsB;AAEzD,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,CAAC,CAAC;AAErD,yBAAuB,CAAC,OAAe,WAAqC;AAC1E,cAAU,CAACA,YAAW,CAAC,EAAE,OAAO,OAAO,GAAG,GAAGA,OAAM,CAAC;AAAA,EACtD,CAAC;AAED,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,UACC,8BAAC,SAAI,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,SAAS,OAAO,IAAI,GAC9D,8BAAC,SAAM,cAAc,OAAO,QAAQ,OAAM,WAAU,IAAI,EAAE,OAAO,OAAO,GACtE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,IAAI;AAAA,QACF,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,MACA,OAAO,MAAM,QAAQ,QAAQ;AAAA,MAE7B,+BAAC,WAAQ,YAAW,WAAU,IAAI,EAAE,UAAU,UAAU,WAAW,IAAI,GACrE;AAAA,4BAAC,WAAQ,YAAW,WAAU,IAAI,EAAE,MAAM,WAAW,GACnD,8BAAC,YAAS,SAAQ,QAAO,SAAS,MAAM,iBAAiB,CAAC,aAAa,GAAG,+BAE1E,GACF;AAAA,QACC,iBAAiB,CAAC,CAAC,OAAO,UACzB;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,cAAa;AAAA,YACb,SAAS;AAAA,YACT,IAAI,EAAE,QAAQ,WAAW,MAAM,YAAY,WAAW,QAAQ,YAAY,OAAO;AAAA,YAEhF,iBAAO,IAAI,CAAC,GAAG,UACd,oBAAC,qBAA8C,QAAgB,OAAe,GAAG,KAAzD,GAAG,EAAE,KAAK,IAAI,KAAK,EAAyC,CACrF;AAAA;AAAA,QACH;AAAA,QAED,iBAAiB,CAAC,OAAO,UAAU,oBAAC,cAAW,SAAQ,aAAY,uBAAS;AAAA,SAC/E;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,oBAAoF,CAAC,EAAE,OAAO,QAAQ,OAAO,OAAO,MAAM;AAC9H,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,SACE,qBAAC,WAAQ,YAAW,WAAU,cAAc,KAAK,SAAS,MAAM,UAAU,CAAC,MAAM,GAC/E;AAAA,wBAAC,cAAW,SAAQ,aAAa,iBAAM;AAAA,IACtC,UACC,oBAAC,cAAW,cAAc,KAAK,SAAQ,WACpC,eAAK,UAAU,QAAQ,MAAM,CAAC,GACjC;AAAA,IAED,OAAO,QAAQ,CAAC,KAAK,oBAAC,WAAQ;AAAA,KACjC;AAEJ;","names":["events"]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":"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","names":["useState","useState","events"]}
@@ -16,15 +16,17 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebuggerProvider.tsx
19
21
  var PixelDebuggerProvider_exports = {};
20
22
  __export(PixelDebuggerProvider_exports, {
21
23
  PixelDebuggerProvider: () => PixelDebuggerProvider
22
24
  });
23
25
  module.exports = __toCommonJS(PixelDebuggerProvider_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
26
  var import_react_pixel = require("@xylabs/react-pixel");
26
27
  var import_react_shared = require("@xylabs/react-shared");
27
- const PixelDebuggerProvider = ({ children }) => {
28
+ var import_jsx_runtime = require("react/jsx-runtime");
29
+ var PixelDebuggerProvider = ({ children }) => {
28
30
  const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
29
31
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_pixel.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
30
32
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKS;AALT,yBAAuC;AACvC,0BAA8C;AAEvC,MAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,QAAI,qCAAyB,oBAAoB,KAAK;AACxF,SAAO,4CAAC,0CAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuC;AACvC,0BAA8C;AAIrC;AAFF,IAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,QAAI,qCAAyB,oBAAoB,KAAK;AACxF,SAAO,4CAAC,0CAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { WithChildren } from '@xylabs/react-shared';
3
+ export declare const PixelDebuggerProvider: React.FC<WithChildren>;
4
+ //# sourceMappingURL=PixelDebuggerProvider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebuggerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEpE,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAGxD,CAAA"}
@@ -1,7 +1,8 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ // src/components/PixelDebuggerProvider.tsx
2
2
  import { DebugUserEventsContext } from "@xylabs/react-pixel";
3
3
  import { useLocalStorage } from "@xylabs/react-shared";
4
- const PixelDebuggerProvider = ({ children }) => {
4
+ import { jsx } from "react/jsx-runtime";
5
+ var PixelDebuggerProvider = ({ children }) => {
5
6
  const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
6
7
  return /* @__PURE__ */ jsx(DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
7
8
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":"AAKS;AALT,SAAS,8BAA8B;AACvC,SAAS,uBAAqC;AAEvC,MAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,gBAAyB,oBAAoB,KAAK;AACxF,SAAO,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":";AAAA,SAAS,8BAA8B;AACvC,SAAS,uBAAqC;AAIrC;AAFF,IAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,gBAAyB,oBAAoB,KAAK;AACxF,SAAO,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
@@ -16,17 +16,19 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebuggerToggle.tsx
19
21
  var PixelDebuggerToggle_exports = {};
20
22
  __export(PixelDebuggerToggle_exports, {
21
23
  PixelDebuggerToggle: () => PixelDebuggerToggle
22
24
  });
23
25
  module.exports = __toCommonJS(PixelDebuggerToggle_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
26
  var import_material = require("@mui/material");
26
27
  var import_react_flexbox = require("@xylabs/react-flexbox");
27
28
  var import_react_pixel = require("@xylabs/react-pixel");
28
29
  var import_react = require("react");
29
- const PixelDebuggerToggle = ({ ...props }) => {
30
+ var import_jsx_runtime = require("react/jsx-runtime");
31
+ var PixelDebuggerToggle = ({ ...props }) => {
30
32
  const { setIsDebugging, isDebugging } = (0, import_react.useContext)(import_react_pixel.DebugUserEventsContext);
31
33
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.FormControl, { children: [
32
34
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormLabel, { children: "Enable Debugger" }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM;AAVN,sBAA+C;AAC/C,2BAAsC;AACtC,yBAAuC;AACvC,mBAA2B;AAEpB,MAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,QAAI,yBAAW,yCAAsB;AAEzE,SACE,4CAAC,gCAAS,GAAG,OACX,uDAAC,+BACC;AAAA,gDAAC,6BAAU,6BAAe;AAAA,IAC1B,4CAAC,0BAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA+C;AAC/C,2BAAsC;AACtC,yBAAuC;AACvC,mBAA2B;AAOrB;AALC,IAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,QAAI,yBAAW,yCAAsB;AAEzE,SACE,4CAAC,gCAAS,GAAG,OACX,uDAAC,+BACC;AAAA,gDAAC,6BAAU,6BAAe;AAAA,IAC1B,4CAAC,0BAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { BusyBoxProps } from '@xylabs/react-flexbox';
3
+ export declare const PixelDebuggerToggle: React.FC<BusyBoxProps>;
4
+ //# sourceMappingURL=PixelDebuggerToggle.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebuggerToggle.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAWtD,CAAA"}
@@ -1,9 +1,10 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/PixelDebuggerToggle.tsx
2
2
  import { FormControl, FormLabel, Switch } from "@mui/material";
3
3
  import { FlexRow } from "@xylabs/react-flexbox";
4
4
  import { DebugUserEventsContext } from "@xylabs/react-pixel";
5
5
  import { useContext } from "react";
6
- const PixelDebuggerToggle = ({ ...props }) => {
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ var PixelDebuggerToggle = ({ ...props }) => {
7
8
  const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
8
9
  return /* @__PURE__ */ jsx(FlexRow, { ...props, children: /* @__PURE__ */ jsxs(FormControl, { children: [
9
10
  /* @__PURE__ */ jsx(FormLabel, { children: "Enable Debugger" }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"AAUM,SACE,KADF;AAVN,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAuB,eAAe;AACtC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAEpB,MAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,IAAI,WAAW,sBAAsB;AAEzE,SACE,oBAAC,WAAS,GAAG,OACX,+BAAC,eACC;AAAA,wBAAC,aAAU,6BAAe;AAAA,IAC1B,oBAAC,UAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAuB,eAAe;AACtC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAOrB,SACE,KADF;AALC,IAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,IAAI,WAAW,sBAAsB;AAEzE,SACE,oBAAC,WAAS,GAAG,OACX,+BAAC,eACC;AAAA,wBAAC,aAAU,6BAAe;AAAA,IAC1B,oBAAC,UAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
6
10
  var __copyProps = (to, from, except, desc) => {
7
11
  if (from && typeof from === "object" || typeof from === "function") {
8
12
  for (let key of __getOwnPropNames(from))
@@ -11,11 +15,118 @@ var __copyProps = (to, from, except, desc) => {
11
15
  }
12
16
  return to;
13
17
  };
14
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/index.ts
16
21
  var components_exports = {};
22
+ __export(components_exports, {
23
+ PixelDebugger: () => PixelDebugger,
24
+ PixelDebuggerProvider: () => PixelDebuggerProvider,
25
+ PixelDebuggerToggle: () => PixelDebuggerToggle
26
+ });
17
27
  module.exports = __toCommonJS(components_exports);
18
- __reExport(components_exports, require("./PixelDebugger"), module.exports);
19
- __reExport(components_exports, require("./PixelDebuggerProvider"), module.exports);
20
- __reExport(components_exports, require("./PixelDebuggerToggle"), module.exports);
28
+
29
+ // src/components/PixelDebugger.tsx
30
+ var import_material = require("@mui/material");
31
+ var import_react_button = require("@xylabs/react-button");
32
+ var import_react_flexbox = require("@xylabs/react-flexbox");
33
+ var import_react_pixel = require("@xylabs/react-pixel");
34
+ var import_react_portal = require("@xylabs/react-portal");
35
+ var import_react2 = require("react");
36
+
37
+ // src/hooks/usePixelAltSendHandler.ts
38
+ var import_pixel = require("@xylabs/pixel");
39
+ var import_react = require("react");
40
+ var usePixelAltSendHandler = (altHandler) => {
41
+ const [pixelSend, setPixelSend] = (0, import_react.useState)();
42
+ (0, import_react.useEffect)(() => {
43
+ if (!pixelSend && import_pixel.XyPixel.instance.send) {
44
+ const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
45
+ setPixelSend(oldHandler);
46
+ } else {
47
+ import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
48
+ altHandler(event, fields);
49
+ return await pixelSend?.(event, fields, eventId);
50
+ };
51
+ }
52
+ return () => {
53
+ if (pixelSend) {
54
+ import_pixel.XyPixel.instance.send = pixelSend;
55
+ }
56
+ };
57
+ }, [pixelSend, altHandler]);
58
+ };
59
+
60
+ // src/components/PixelDebugger.tsx
61
+ var import_jsx_runtime = require("react/jsx-runtime");
62
+ var PixelDebugger = () => {
63
+ const { isDebugging } = (0, import_react2.useContext)(import_react_pixel.DebugUserEventsContext);
64
+ const theme = (0, import_material.useTheme)();
65
+ const [displayEvents, setDisplayEvents] = (0, import_react2.useState)(false);
66
+ const [events, setEvents] = (0, import_react2.useState)([]);
67
+ usePixelAltSendHandler((event, fields) => {
68
+ setEvents((events2) => [{ event, fields }, ...events2]);
69
+ });
70
+ if (!isDebugging) {
71
+ return null;
72
+ }
73
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { bottom: 0, left: 0, position: "fixed", width: 350 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Badge, { badgeContent: events.length, color: "primary", sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_material.Card,
75
+ {
76
+ variant: "outlined",
77
+ sx: {
78
+ backdropFilter: "blur(16px) saturate(180%)",
79
+ backgroundColor: "rgba(18, 18, 18, .70)",
80
+ overflowY: "auto",
81
+ width: "100%"
82
+ },
83
+ color: theme.palette.primary.main,
84
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flex: "0 1 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_button.ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }),
86
+ displayEvents && !!events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
+ import_react_flexbox.FlexCol,
88
+ {
89
+ alignItems: "stretch",
90
+ alignContent: "start",
91
+ padding: 2,
92
+ sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
93
+ children: events.map((e, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
94
+ }
95
+ ),
96
+ displayEvents && !events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: "No Events" })
97
+ ] })
98
+ }
99
+ ) }) }) });
100
+ };
101
+ var PixelEventDetails = ({ event, fields, index, events }) => {
102
+ const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
103
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: event }),
105
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
106
+ events[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, {})
107
+ ] });
108
+ };
109
+
110
+ // src/components/PixelDebuggerProvider.tsx
111
+ var import_react_pixel2 = require("@xylabs/react-pixel");
112
+ var import_react_shared = require("@xylabs/react-shared");
113
+ var import_jsx_runtime2 = require("react/jsx-runtime");
114
+ var PixelDebuggerProvider = ({ children }) => {
115
+ const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
116
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_pixel2.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
117
+ };
118
+
119
+ // src/components/PixelDebuggerToggle.tsx
120
+ var import_material2 = require("@mui/material");
121
+ var import_react_flexbox2 = require("@xylabs/react-flexbox");
122
+ var import_react_pixel3 = require("@xylabs/react-pixel");
123
+ var import_react3 = require("react");
124
+ var import_jsx_runtime3 = require("react/jsx-runtime");
125
+ var PixelDebuggerToggle = ({ ...props }) => {
126
+ const { setIsDebugging, isDebugging } = (0, import_react3.useContext)(import_react_pixel3.DebugUserEventsContext);
127
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox2.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material2.FormControl, { children: [
128
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.FormLabel, { children: "Enable Debugger" }),
129
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
130
+ ] }) });
131
+ };
21
132
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './PixelDebugger'\nexport * from './PixelDebuggerProvider'\nexport * from './PixelDebuggerToggle'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,4BAAd;AACA,+BAAc,oCADd;AAEA,+BAAc,kCAFd;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/index.ts","../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts","../../../src/components/PixelDebuggerProvider.tsx","../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["export * from './PixelDebugger'\nexport * from './PixelDebuggerProvider'\nexport * from './PixelDebuggerToggle'\n","import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n","import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n","import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"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","names":["import_react","events","import_react_pixel","import_jsx_runtime","import_material","import_react_flexbox","import_react_pixel","import_react","import_jsx_runtime"]}
@@ -0,0 +1,4 @@
1
+ export * from './PixelDebugger';
2
+ export * from './PixelDebuggerProvider';
3
+ export * from './PixelDebuggerToggle';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA"}