@xylabs/react-pixel-debugger 3.4.1 → 3.4.2

package/dist/node/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["export * from './components/index.js'\nexport * from './hooks/index.js'\nexport * from './PixelEvent.js'\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/index.js'\nimport { PixelEvent } from '../PixelEvent.js'\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 > 0 && (\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 === 0 && <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"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["export * from './components/index.ts'\nexport * from './hooks/index.ts'\nexport * from './PixelEvent.ts'\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 React, { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport { PixelEvent } from '../PixelEvent.ts'\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 > 0 && (\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 === 0 && <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'\nimport React, { useMemo } from 'react'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n  const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n  const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])\n  return <DebugUserEventsContext.Provider value={value}>{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 React, { 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","usePixelAltSendHandler","altHandler","pixelSend","setPixelSend","useState","useEffect","XyPixel","instance","send","oldHandler","bind","event","fields","eventId","PixelDebugger","isDebugging","useContext","DebugUserEventsContext","theme","useTheme","displayEvents","setDisplayEvents","useState","events","setEvents","usePixelAltSendHandler","event","fields","React","Portal","div","style","bottom","left","position","width","Badge","badgeContent","length","color","sx","Card","variant","backdropFilter","backgroundColor","overflowY","palette","primary","main","FlexCol","alignItems","flexFlow","maxHeight","flex","ButtonEx","onClick","alignContent","padding","cursor","userSelect","map","e","index","PixelEventDetails","key","Typography","isOpen","setIsOpen","marginBottom","JSON","stringify","Divider","import_react_pixel","import_react","PixelDebuggerProvider","children","isDebugging","setIsDebugging","useLocalStorage","value","useMemo","React","DebugUserEventsContext","Provider","import_material","import_react_flexbox","import_react_pixel","import_react","PixelDebuggerToggle","props","setIsDebugging","isDebugging","useContext","DebugUserEventsContext","React","FlexRow","FormControl","FormLabel","Switch","checked","onClick"]}

package/dist/node/index.d.cts

@@ -1,4 +1,4 @@
-export * from './components/index.js';
-export * from './hooks/index.js';
-export * from './PixelEvent.js';
+export * from './components/index.ts';
+export * from './hooks/index.ts';
+export * from './PixelEvent.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.mts

@@ -1,4 +1,4 @@
-export * from './components/index.js';
-export * from './hooks/index.js';
-export * from './PixelEvent.js';
+export * from './components/index.ts';
+export * from './hooks/index.ts';
+export * from './PixelEvent.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.ts

@@ -1,4 +1,4 @@
-export * from './components/index.js';
-export * from './hooks/index.js';
-export * from './PixelEvent.js';
+export * from './components/index.ts';
+export * from './hooks/index.ts';
+export * from './PixelEvent.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/index.mjs

@@ -0,0 +1,161 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/PixelDebugger.tsx
+import { Badge, Card, Divider, Typography, useTheme } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { DebugUserEventsContext } from "@xylabs/react-pixel";
+import { Portal } from "@xylabs/react-portal";
+import React, { useContext, useState as useState2 } from "react";
+
+// src/hooks/usePixelAltSendHandler.ts
+import { XyPixel } from "@xylabs/pixel";
+import { useEffect, useState } from "react";
+var usePixelAltSendHandler = /* @__PURE__ */ __name((altHandler) => {
+  const [pixelSend, setPixelSend] = useState();
+  useEffect(() => {
+    if (!pixelSend && XyPixel.instance.send) {
+      const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
+      setPixelSend(oldHandler);
+    } else {
+      XyPixel.instance.send = async (event, fields, eventId) => {
+        altHandler(event, fields);
+        return await (pixelSend == null ? void 0 : pixelSend(event, fields, eventId));
+      };
+    }
+    return () => {
+      if (pixelSend) {
+        XyPixel.instance.send = pixelSend;
+      }
+    };
+  }, [
+    pixelSend,
+    altHandler
+  ]);
+}, "usePixelAltSendHandler");
+
+// src/components/PixelDebugger.tsx
+var PixelDebugger = /* @__PURE__ */ __name(() => {
+  const { isDebugging } = useContext(DebugUserEventsContext);
+  const theme = useTheme();
+  const [displayEvents, setDisplayEvents] = useState2(false);
+  const [events, setEvents] = useState2([]);
+  usePixelAltSendHandler((event, fields) => {
+    setEvents((events2) => [
+      {
+        event,
+        fields
+      },
+      ...events2
+    ]);
+  });
+  if (!isDebugging) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement("div", {
+    style: {
+      bottom: 0,
+      left: 0,
+      position: "fixed",
+      width: 350
+    }
+  }, /* @__PURE__ */ React.createElement(Badge, {
+    badgeContent: events.length,
+    color: "primary",
+    sx: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */ React.createElement(Card, {
+    variant: "outlined",
+    sx: {
+      backdropFilter: "blur(16px) saturate(180%)",
+      backgroundColor: "rgba(18, 18, 18, .70)",
+      overflowY: "auto",
+      width: "100%"
+    },
+    color: theme.palette.primary.main
+  }, /* @__PURE__ */ React.createElement(FlexCol, {
+    alignItems: "stretch",
+    sx: {
+      flexFlow: "column",
+      maxHeight: 400
+    }
+  }, /* @__PURE__ */ React.createElement(FlexCol, {
+    alignItems: "stretch",
+    sx: {
+      flex: "0 1 auto"
+    }
+  }, /* @__PURE__ */ React.createElement(ButtonEx, {
+    variant: "text",
+    onClick: /* @__PURE__ */ __name(() => setDisplayEvents(!displayEvents), "onClick")
+  }, "XY Pixel Debugger")), displayEvents && events.length > 0 && /* @__PURE__ */ React.createElement(FlexCol, {
+    alignItems: "stretch",
+    alignContent: "start",
+    padding: 2,
+    sx: {
+      cursor: "pointer",
+      flex: "1 1 auto",
+      overflowY: "auto",
+      userSelect: "none"
+    }
+  }, events.map((e, index) => /* @__PURE__ */ React.createElement(PixelEventDetails, {
+    key: `${e.event}-${index}`,
+    events,
+    index,
+    ...e
+  }))), displayEvents && events.length === 0 && /* @__PURE__ */ React.createElement(Typography, {
+    variant: "subtitle2"
+  }, "No Events"))))));
+}, "PixelDebugger");
+var PixelEventDetails = /* @__PURE__ */ __name(({ event, fields, index, events }) => {
+  const [isOpen, setIsOpen] = useState2(false);
+  return /* @__PURE__ */ React.createElement(FlexCol, {
+    alignItems: "stretch",
+    marginBottom: 0.5,
+    onClick: /* @__PURE__ */ __name(() => setIsOpen(!isOpen), "onClick")
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "subtitle2"
+  }, event), isOpen && /* @__PURE__ */ React.createElement(Typography, {
+    marginBottom: 0.5,
+    variant: "caption"
+  }, JSON.stringify(fields, null, 2)), events[index + 1] && /* @__PURE__ */ React.createElement(Divider, null));
+}, "PixelEventDetails");
+
+// src/components/PixelDebuggerProvider.tsx
+import { DebugUserEventsContext as DebugUserEventsContext2 } from "@xylabs/react-pixel";
+import { useLocalStorage } from "@xylabs/react-shared";
+import React2, { useMemo } from "react";
+var PixelDebuggerProvider = /* @__PURE__ */ __name(({ children }) => {
+  const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
+  const value = useMemo(() => ({
+    isDebugging,
+    setIsDebugging
+  }), [
+    isDebugging,
+    setIsDebugging
+  ]);
+  return /* @__PURE__ */ React2.createElement(DebugUserEventsContext2.Provider, {
+    value
+  }, children);
+}, "PixelDebuggerProvider");
+
+// src/components/PixelDebuggerToggle.tsx
+import { FormControl, FormLabel, Switch } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { DebugUserEventsContext as DebugUserEventsContext3 } from "@xylabs/react-pixel";
+import React3, { useContext as useContext2 } from "react";
+var PixelDebuggerToggle = /* @__PURE__ */ __name(({ ...props }) => {
+  const { setIsDebugging, isDebugging } = useContext2(DebugUserEventsContext3);
+  return /* @__PURE__ */ React3.createElement(FlexRow, props, /* @__PURE__ */ React3.createElement(FormControl, null, /* @__PURE__ */ React3.createElement(FormLabel, null, "Enable Debugger"), /* @__PURE__ */ React3.createElement(Switch, {
+    checked: isDebugging,
+    onClick: /* @__PURE__ */ __name(() => setIsDebugging(!isDebugging), "onClick")
+  })));
+}, "PixelDebuggerToggle");
+export {
+  PixelDebugger,
+  PixelDebuggerProvider,
+  PixelDebuggerToggle,
+  usePixelAltSendHandler
+};
+//# sourceMappingURL=index.mjs.map

package/dist/node/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.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 React, { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport { PixelEvent } from '../PixelEvent.ts'\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 > 0 && (\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 === 0 && <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'\nimport React, { useMemo } from 'react'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n  const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n  const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])\n  return <DebugUserEventsContext.Provider value={value}>{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 React, { 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,SAASA,OAAOC,MAAMC,SAASC,YAAYC,gBAAgB;AAC3D,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,8BAA8B;AACvC,SAASC,cAAc;AACvB,OAAOC,SAASC,YAAYC,YAAAA,iBAAgB;;;ACL5C,SAASC,eAAe;AACxB,SAASC,WAAWC,gBAAgB;AAE7B,IAAMC,yBAAyB,wBAACC,eAAAA;AACrC,QAAM,CAACC,WAAWC,YAAAA,IAAgBC,SAAAA;AAClCC,YAAU,MAAA;AACR,QAAI,CAACH,aAAaI,QAAQC,SAASC,MAAM;AACvC,YAAMC,aAAaH,QAAQC,SAASC,KAAKE,KAAKJ,QAAQC,QAAQ;AAC9DJ,mBAAaM,UAAAA;IACf,OAAO;AACLH,cAAQC,SAASC,OAAO,OAAOG,OAAeC,QAAkCC,YAAAA;AAC9EZ,mBAAWU,OAAOC,MAAAA;AAClB,eAAO,OAAMV,uCAAYS,OAAOC,QAAQC;MAC1C;IACF;AACA,WAAO,MAAA;AAEL,UAAIX,WAAW;AACbI,gBAAQC,SAASC,OAAON;MAC1B;IACF;EACF,GAAG;IAACA;IAAWD;GAAW;AAC5B,GAnBsC;;;ADO/B,IAAMa,gBAA0B,6BAAA;AACrC,QAAM,EAAEC,YAAW,IAAKC,WAAWC,sBAAAA;AAEnC,QAAMC,QAAQC,SAAAA;AACd,QAAM,CAACC,eAAeC,gBAAAA,IAAoBC,UAAS,KAAA;AACnD,QAAM,CAACC,QAAQC,SAAAA,IAAaF,UAAuB,CAAA,CAAE;AAErDG,yBAAuB,CAACC,OAAeC,WAAAA;AACrCH,cAAUD,CAAAA,YAAU;MAAC;QAAEG;QAAOC;MAAO;SAAMJ;KAAO;EACpD,CAAA;AAEA,MAAI,CAACR,aAAa;AAChB,WAAO;EACT;AAEA,SACE,sBAAA,cAACa,QAAAA,MACC,sBAAA,cAACC,OAAAA;IAAIC,OAAO;MAAEC,QAAQ;MAAGC,MAAM;MAAGC,UAAU;MAASC,OAAO;IAAI;KAC9D,sBAAA,cAACC,OAAAA;IAAMC,cAAcb,OAAOc;IAAQC,OAAM;IAAUC,IAAI;MAAEL,OAAO;IAAO;KACtE,sBAAA,cAACM,MAAAA;IACCC,SAAQ;IACRF,IAAI;MACFG,gBAAgB;MAChBC,iBAAiB;MACjBC,WAAW;MACXV,OAAO;IACT;IACAI,OAAOpB,MAAM2B,QAAQC,QAAQC;KAE7B,sBAAA,cAACC,SAAAA;IAAQC,YAAW;IAAUV,IAAI;MAAEW,UAAU;MAAUC,WAAW;IAAI;KACrE,sBAAA,cAACH,SAAAA;IAAQC,YAAW;IAAUV,IAAI;MAAEa,MAAM;IAAW;KACnD,sBAAA,cAACC,UAAAA;IAASZ,SAAQ;IAAOa,SAAS,6BAAMjC,iBAAiB,CAACD,aAAAA,GAAxB;KAAwC,mBAAA,CAAA,GAI3EA,iBAAiBG,OAAOc,SAAS,KAChC,sBAAA,cAACW,SAAAA;IACCC,YAAW;IACXM,cAAa;IACbC,SAAS;IACTjB,IAAI;MAAEkB,QAAQ;MAAWL,MAAM;MAAYR,WAAW;MAAQc,YAAY;IAAO;KAEhFnC,OAAOoC,IAAI,CAACC,GAAGC,UACd,sBAAA,cAACC,mBAAAA;IAAkBC,KAAK,GAAGH,EAAElC,KAAK,IAAImC,KAAAA;IAAStC;IAAgBsC;IAAe,GAAGD;QAItFxC,iBAAiBG,OAAOc,WAAW,KAAK,sBAAA,cAAC2B,YAAAA;IAAWvB,SAAQ;KAAY,WAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAOvF,GAtDuC;AAwDvC,IAAMqB,oBAAoF,wBAAC,EAAEpC,OAAOC,QAAQkC,OAAOtC,OAAM,MAAE;AACzH,QAAM,CAAC0C,QAAQC,SAAAA,IAAa5C,UAAS,KAAA;AACrC,SACE,sBAAA,cAAC0B,SAAAA;IAAQC,YAAW;IAAUkB,cAAc;IAAKb,SAAS,6BAAMY,UAAU,CAACD,MAAAA,GAAjB;KACxD,sBAAA,cAACD,YAAAA;IAAWvB,SAAQ;KAAaf,KAAAA,GAChCuC,UACC,sBAAA,cAACD,YAAAA;IAAWG,cAAc;IAAK1B,SAAQ;KACpC2B,KAAKC,UAAU1C,QAAQ,MAAM,CAAA,CAAA,GAGjCJ,OAAOsC,QAAQ,CAAA,KAAM,sBAAA,cAACS,SAAAA,IAAAA,CAAAA;AAG7B,GAb0F;;;AElE1F,SAASC,0BAAAA,+BAA8B;AACvC,SAASC,uBAAqC;AAC9C,OAAOC,UAASC,eAAe;AAExB,IAAMC,wBAAgD,wBAAC,EAAEC,SAAQ,MAAE;AACxE,QAAM,CAACC,aAAaC,cAAAA,IAAkBC,gBAAyB,oBAAoB,KAAA;AACnF,QAAMC,QAAQC,QAAQ,OAAO;IAAEJ;IAAaC;EAAe,IAAI;IAACD;IAAaC;GAAe;AAC5F,SAAO,gBAAAI,OAAA,cAACC,wBAAuBC,UAAQ;IAACJ;KAAeJ,QAAAA;AACzD,GAJ6D;;;ACJ7D,SAASS,aAAaC,WAAWC,cAAc;AAC/C,SAAuBC,eAAe;AACtC,SAASC,0BAAAA,+BAA8B;AACvC,OAAOC,UAASC,cAAAA,mBAAkB;AAE3B,IAAMC,sBAA8C,wBAAC,EAAE,GAAGC,MAAAA,MAAO;AACtE,QAAM,EAAEC,gBAAgBC,YAAW,IAAKC,YAAWC,uBAAAA;AAEnD,SACE,gBAAAC,OAAA,cAACC,SAAYN,OACX,gBAAAK,OAAA,cAACE,aAAAA,MACC,gBAAAF,OAAA,cAACG,WAAAA,MAAU,iBAAA,GACX,gBAAAH,OAAA,cAACI,QAAAA;IAAOC,SAASR;IAAaS,SAAS,6BAAMV,eAAe,CAACC,WAAAA,GAAtB;;AAI/C,GAX2D;","names":["Badge","Card","Divider","Typography","useTheme","ButtonEx","FlexCol","DebugUserEventsContext","Portal","React","useContext","useState","XyPixel","useEffect","useState","usePixelAltSendHandler","altHandler","pixelSend","setPixelSend","useState","useEffect","XyPixel","instance","send","oldHandler","bind","event","fields","eventId","PixelDebugger","isDebugging","useContext","DebugUserEventsContext","theme","useTheme","displayEvents","setDisplayEvents","useState","events","setEvents","usePixelAltSendHandler","event","fields","Portal","div","style","bottom","left","position","width","Badge","badgeContent","length","color","sx","Card","variant","backdropFilter","backgroundColor","overflowY","palette","primary","main","FlexCol","alignItems","flexFlow","maxHeight","flex","ButtonEx","onClick","alignContent","padding","cursor","userSelect","map","e","index","PixelEventDetails","key","Typography","isOpen","setIsOpen","marginBottom","JSON","stringify","Divider","DebugUserEventsContext","useLocalStorage","React","useMemo","PixelDebuggerProvider","children","isDebugging","setIsDebugging","useLocalStorage","value","useMemo","React","DebugUserEventsContext","Provider","FormControl","FormLabel","Switch","FlexRow","DebugUserEventsContext","React","useContext","PixelDebuggerToggle","props","setIsDebugging","isDebugging","useContext","DebugUserEventsContext","React","FlexRow","FormControl","FormLabel","Switch","checked","onClick"]}

package/package.json

@@ -14,23 +14,22 @@
   ],
   "dependencies": {
     "@xylabs/pixel": "^1.6.0",
-    "@xylabs/react-button": "^3.4.1",
-    "@xylabs/react-flexbox": "^3.4.1",
-    "@xylabs/react-pixel": "^3.4.1",
-    "@xylabs/react-portal": "^3.4.1",
-    "@xylabs/react-shared": "^3.4.1",
-    "axios": "^1.7.2"
+    "@xylabs/react-button": "^3.4.2",
+    "@xylabs/react-flexbox": "^3.4.2",
+    "@xylabs/react-pixel": "^3.4.2",
+    "@xylabs/react-portal": "^3.4.2",
+    "@xylabs/react-shared": "^3.4.2",
+    "axios": "^1.7.3"
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
-    "@storybook/react": "^8.2.4",
+    "@storybook/react": "^8.2.7",
     "@types/react": "^18.3.3",
-    "@xylabs/pixel": "^1.6.0",
-    "@xylabs/ts-scripts-yarn3": "^3.12.1",
-    "@xylabs/tsconfig-react": "^3.12.1",
+    "@xylabs/ts-scripts-yarn3": "^3.15.16",
+    "@xylabs/tsconfig-react": "^3.15.16",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "@mui/material": "^5",
@@ -42,7 +41,7 @@
       "node": {
         "import": {
           "types": "./dist/node/index.d.mts",
-          "default": "./dist/node/index.js"
+          "default": "./dist/node/index.mjs"
         },
         "require": {
           "types": "./dist/node/index.d.cts",
@@ -52,20 +51,20 @@
       "browser": {
         "import": {
           "types": "./dist/browser/index.d.mts",
-          "default": "./dist/browser/index.js"
+          "default": "./dist/browser/index.mjs"
         },
         "require": {
           "types": "./dist/browser/index.d.cts",
           "default": "./dist/browser/index.cjs"
         }
       },
-      "default": "./dist/browser/index.js"
+      "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
   "types": "dist/browser/index.d.ts",
   "main": "./dist/browser/index.cjs",
-  "module": "./dist/browser/index.js",
+  "module": "./dist/browser/index.mjs",
   "homepage": "https://xylabs.com",
   "keywords": [
     "utility",
@@ -81,6 +80,6 @@
     "url": "https://github.com/xylabs/sdk-react.git"
   },
   "sideEffects": false,
-  "version": "3.4.1",
+  "version": "3.4.2",
   "type": "module"
 }

package/src/components/PixelDebugger.stories.tsx

@@ -1,8 +1,11 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { PixelApi, XyPixel } from '@xylabs/pixel'
 import { BusyBoxProps } from '@xylabs/react-flexbox'
-import { PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle } from '@xylabs/react-pixel-debugger'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+
+import { PixelDebugger } from './PixelDebugger.tsx'
+import { PixelDebuggerProvider } from './PixelDebuggerProvider.tsx'
+import { PixelDebuggerToggle } from './PixelDebuggerToggle.tsx'
 
 const StorybookEntry = {
   argTypes: {},
@@ -21,11 +24,13 @@ const Template: StoryFn<typeof PixelDebuggerToggle> = (args: BusyBoxProps) => {
     XyPixel.selectApi(new PixelApi('local'))
     setPixel(XyPixel.init('storybookPixel'))
   }, [])
-  return pixel ?
-      <PixelDebuggerProvider>
-        <PixelDebuggerToggle {...args} />
-        <PixelDebugger />
-      </PixelDebuggerProvider>
+  return pixel
+    ? (
+        <PixelDebuggerProvider>
+          <PixelDebuggerToggle {...args} />
+          <PixelDebugger />
+        </PixelDebuggerProvider>
+      )
     : <></>
 }
 
@@ -34,5 +39,4 @@ Default.args = {}
 
 export { Default }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/PixelDebugger.tsx

@@ -3,20 +3,20 @@ import { ButtonEx } from '@xylabs/react-button'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { DebugUserEventsContext } from '@xylabs/react-pixel'
 import { Portal } from '@xylabs/react-portal'
-import { useContext, useState } from 'react'
+import React, { useContext, useState } from 'react'
 
-import { usePixelAltSendHandler } from '../hooks/index.js'
-import { PixelEvent } from '../PixelEvent.js'
+import { usePixelAltSendHandler } from '../hooks/index.ts'
+import { PixelEvent } from '../PixelEvent.ts'
 
 export const PixelDebugger: React.FC = () => {
   const { isDebugging } = useContext(DebugUserEventsContext)
-  //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
+  // TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
   const theme = useTheme()
   const [displayEvents, setDisplayEvents] = useState(false)
   const [events, setEvents] = useState<PixelEvent[]>([])
 
   usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {
-    setEvents((events) => [{ event, fields }, ...events])
+    setEvents(events => [{ event, fields }, ...events])
   })
 
   if (!isDebugging) {

package/src/components/PixelDebuggerProvider.tsx

@@ -1,7 +1,9 @@
 import { DebugUserEventsContext } from '@xylabs/react-pixel'
 import { useLocalStorage, WithChildren } from '@xylabs/react-shared'
+import React, { useMemo } from 'react'
 
 export const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {
   const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)
-  return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>
+  const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])
+  return <DebugUserEventsContext.Provider value={value}>{children}</DebugUserEventsContext.Provider>
 }

package/src/components/PixelDebuggerToggle.tsx

@@ -1,7 +1,7 @@
 import { FormControl, FormLabel, Switch } from '@mui/material'
 import { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'
 import { DebugUserEventsContext } from '@xylabs/react-pixel'
-import { useContext } from 'react'
+import React, { useContext } from 'react'
 
 export const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {
   const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)

package/src/components/index.ts

@@ -1,3 +1,3 @@
-export * from './PixelDebugger.jsx'
-export * from './PixelDebuggerProvider.jsx'
-export * from './PixelDebuggerToggle.jsx'
+export * from './PixelDebugger.tsx'
+export * from './PixelDebuggerProvider.tsx'
+export * from './PixelDebuggerToggle.tsx'

package/src/hooks/index.ts

@@ -1 +1 @@
-export * from './usePixelAltSendHandler.js'
+export * from './usePixelAltSendHandler.ts'

package/src/hooks/usePixelAltSendHandler.ts

@@ -14,7 +14,7 @@ export const usePixelAltSendHandler = (altHandler: (event: string, fields?: Reco
       }
     }
     return () => {
-      //restore send on unmount
+      // restore send on unmount
       if (pixelSend) {
         XyPixel.instance.send = pixelSend
       }

package/src/index.ts

@@ -1,3 +1,3 @@
-export * from './components/index.js'
-export * from './hooks/index.js'
-export * from './PixelEvent.js'
+export * from './components/index.ts'
+export * from './hooks/index.ts'
+export * from './PixelEvent.ts'

package/dist/browser/index.js

@@ -1,110 +0,0 @@
-// src/components/PixelDebugger.tsx
-import { Badge, Card, Divider, Typography, useTheme } from "@mui/material";
-import { ButtonEx } from "@xylabs/react-button";
-import { FlexCol } from "@xylabs/react-flexbox";
-import { DebugUserEventsContext } from "@xylabs/react-pixel";
-import { Portal } from "@xylabs/react-portal";
-import { useContext, useState as useState2 } from "react";
-
-// src/hooks/usePixelAltSendHandler.ts
-import { XyPixel } from "@xylabs/pixel";
-import { useEffect, useState } from "react";
-var usePixelAltSendHandler = (altHandler) => {
-  const [pixelSend, setPixelSend] = useState();
-  useEffect(() => {
-    if (!pixelSend && XyPixel.instance.send) {
-      const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
-      setPixelSend(oldHandler);
-    } else {
-      XyPixel.instance.send = async (event, fields, eventId) => {
-        altHandler(event, fields);
-        return await pixelSend?.(event, fields, eventId);
-      };
-    }
-    return () => {
-      if (pixelSend) {
-        XyPixel.instance.send = pixelSend;
-      }
-    };
-  }, [pixelSend, altHandler]);
-};
-
-// src/components/PixelDebugger.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var PixelDebugger = () => {
-  const { isDebugging } = useContext(DebugUserEventsContext);
-  const theme = useTheme();
-  const [displayEvents, setDisplayEvents] = useState2(false);
-  const [events, setEvents] = useState2([]);
-  usePixelAltSendHandler((event, fields) => {
-    setEvents((events2) => [{ event, fields }, ...events2]);
-  });
-  if (!isDebugging) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { style: { bottom: 0, left: 0, position: "fixed", width: 350 }, children: /* @__PURE__ */ jsx(Badge, { badgeContent: events.length, color: "primary", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
-    Card,
-    {
-      variant: "outlined",
-      sx: {
-        backdropFilter: "blur(16px) saturate(180%)",
-        backgroundColor: "rgba(18, 18, 18, .70)",
-        overflowY: "auto",
-        width: "100%"
-      },
-      color: theme.palette.primary.main,
-      children: /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
-        /* @__PURE__ */ jsx(FlexCol, { alignItems: "stretch", sx: { flex: "0 1 auto" }, children: /* @__PURE__ */ jsx(ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }),
-        displayEvents && events.length > 0 && /* @__PURE__ */ jsx(
-          FlexCol,
-          {
-            alignItems: "stretch",
-            alignContent: "start",
-            padding: 2,
-            sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
-            children: events.map((e, index) => /* @__PURE__ */ jsx(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
-          }
-        ),
-        displayEvents && events.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "No Events" })
-      ] })
-    }
-  ) }) }) });
-};
-var PixelEventDetails = ({ event, fields, index, events }) => {
-  const [isOpen, setIsOpen] = useState2(false);
-  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: event }),
-    isOpen && /* @__PURE__ */ jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
-    events[index + 1] && /* @__PURE__ */ jsx(Divider, {})
-  ] });
-};
-
-// src/components/PixelDebuggerProvider.tsx
-import { DebugUserEventsContext as DebugUserEventsContext2 } from "@xylabs/react-pixel";
-import { useLocalStorage } from "@xylabs/react-shared";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var PixelDebuggerProvider = ({ children }) => {
-  const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
-  return /* @__PURE__ */ jsx2(DebugUserEventsContext2.Provider, { value: { isDebugging, setIsDebugging }, children });
-};
-
-// src/components/PixelDebuggerToggle.tsx
-import { FormControl, FormLabel, Switch } from "@mui/material";
-import { FlexRow } from "@xylabs/react-flexbox";
-import { DebugUserEventsContext as DebugUserEventsContext3 } from "@xylabs/react-pixel";
-import { useContext as useContext2 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var PixelDebuggerToggle = ({ ...props }) => {
-  const { setIsDebugging, isDebugging } = useContext2(DebugUserEventsContext3);
-  return /* @__PURE__ */ jsx3(FlexRow, { ...props, children: /* @__PURE__ */ jsxs2(FormControl, { children: [
-    /* @__PURE__ */ jsx3(FormLabel, { children: "Enable Debugger" }),
-    /* @__PURE__ */ jsx3(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
-  ] }) });
-};
-export {
-  PixelDebugger,
-  PixelDebuggerProvider,
-  PixelDebuggerToggle,
-  usePixelAltSendHandler
-};
-//# sourceMappingURL=index.js.map

package/dist/browser/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.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/index.js'\nimport { PixelEvent } from '../PixelEvent.js'\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 > 0 && (\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 === 0 && <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":["useState","useState","events","DebugUserEventsContext","jsx","DebugUserEventsContext","useContext","jsx","jsxs"]}