@xylabs/react-pixel-debugger 6.4.0 → 7.0.1

package/dist/browser/components/PixelDebugger.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
 import type { BusyBoxProps } from '@xylabs/react-flexbox';
 import { PixelDebuggerToggle } from './PixelDebuggerToggle.tsx';
 declare const StorybookEntry: Meta<typeof PixelDebuggerToggle>;
-declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, BusyBoxProps>;
+declare const Default: import(".store/storybook-virtual-ae2e92fa55/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, BusyBoxProps>;
 export { Default };
 export default StorybookEntry;
 //# sourceMappingURL=PixelDebugger.stories.d.ts.map

package/dist/browser/components/PixelDebugger.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixelDebugger.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAE/D,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAkBrC,QAAA,MAAM,OAAO,gHAAoB,CAAA;AAGjC,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,eAAe,cAAc,CAAA"}
+{"version":3,"file":"PixelDebugger.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAE/D,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAkBrC,QAAA,MAAM,OAAO,kJAAoB,CAAA;AAGjC,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,eAAe,cAAc,CAAA"}

package/dist/browser/index.mjs

@@ -1,18 +1,21 @@
-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 {
+  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, { use, useState as useState2 } from "react";
+import { use, useState as useState2 } from "react";
 
 // src/hooks/usePixelAltSendHandler.ts
 import { XyPixel } from "@xylabs/pixel";
 import { useEffect, useState } from "react";
-var usePixelAltSendHandler = /* @__PURE__ */ __name((altHandler) => {
+var usePixelAltSendHandler = (altHandler) => {
   const [pixelSend, setPixelSend] = useState();
   useEffect(() => {
     if (!pixelSend && XyPixel.instance.send) {
@@ -29,129 +32,115 @@ var usePixelAltSendHandler = /* @__PURE__ */ __name((altHandler) => {
         XyPixel.instance.send = pixelSend;
       }
     };
-  }, [
-    pixelSend,
-    altHandler
-  ]);
-}, "usePixelAltSendHandler");
+  }, [pixelSend, altHandler]);
+};
 
 // src/components/PixelDebugger.tsx
-var PixelDebugger = /* @__PURE__ */ __name(() => {
+import { jsx, jsxs } from "react/jsx-runtime";
+var PixelDebugger = () => {
   const { isDebugging } = use(DebugUserEventsContext);
   const theme = useTheme();
   const [displayEvents, setDisplayEvents] = useState2(false);
   const [events, setEvents] = useState2([]);
   usePixelAltSendHandler((event, fields) => {
-    setEvents((events2) => [
-      {
-        event,
-        fields
-      },
-      ...events2
-    ]);
+    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.vars.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"
+  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.vars.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" })
+              ]
+            }
+          )
+        }
+      ) })
     }
-  }, 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 }) => {
+  ) });
+};
+var PixelEventDetails = ({
+  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");
+  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 React2, { useMemo } from "react";
-var PixelDebuggerProvider = /* @__PURE__ */ __name(({ children }) => {
+import { useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PixelDebuggerProvider = ({ children }) => {
   const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
-  const value = useMemo(() => ({
-    isDebugging,
-    setIsDebugging
-  }), [
-    isDebugging,
-    setIsDebugging
-  ]);
-  return /* @__PURE__ */ React2.createElement(DebugUserEventsContext2, {
-    value
-  }, children);
-}, "PixelDebuggerProvider");
+  const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging]);
+  return /* @__PURE__ */ jsx2(DebugUserEventsContext2, { value, children });
+};
 
 // src/components/PixelDebuggerToggle.tsx
-import { FormControl, FormLabel, Switch } from "@mui/material";
+import {
+  FormControl,
+  FormLabel,
+  Switch
+} from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
 import { DebugUserEventsContext as DebugUserEventsContext3 } from "@xylabs/react-pixel";
-import React3, { use as use2 } from "react";
-var PixelDebuggerToggle = /* @__PURE__ */ __name(({ ...props }) => {
+import { use as use2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PixelDebuggerToggle = ({ ...props }) => {
   const { setIsDebugging, isDebugging } = use2(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");
+  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,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import {\n  Badge, Card, Divider, Typography, useTheme,\n} 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, { use, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport type { PixelEvent } from '../PixelEvent.ts'\n\nexport const PixelDebugger: React.FC = () => {\n  const { isDebugging } = use(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={{\n        bottom: 0, left: 0, position: 'fixed', width: 350,\n      }}\n      >\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.vars.palette.primary.main}\n          >\n            <FlexCol\n              alignItems=\"stretch\"\n              sx={{ flexFlow: 'column', maxHeight: 400 }}\n            >\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={{\n                    cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',\n                  }}\n                >\n                  {events.map((e, index) => (\n\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 }> = ({\n  event, fields, index, events,\n}) => {\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 type { JsonObject } from '@xylabs/object'\nimport { 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      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setPixelSend(oldHandler)\n    } else {\n      XyPixel.instance.send = async (event: string, fields?: JsonObject, 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 type { WithChildren } from '@xylabs/react-shared'\nimport { useLocalStorage } 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 value={value}>{children}</DebugUserEventsContext>\n}\n","import {\n  FormControl, FormLabel, Switch,\n} from '@mui/material'\nimport type { BusyBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport React, { use } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n  const { setIsDebugging, isDebugging } = use(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":["Badge","Card","Divider","Typography","useTheme","ButtonEx","FlexCol","DebugUserEventsContext","Portal","React","use","useState","XyPixel","useEffect","useState","usePixelAltSendHandler","altHandler","pixelSend","setPixelSend","useState","useEffect","XyPixel","instance","send","oldHandler","bind","event","fields","eventId","PixelDebugger","isDebugging","use","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","vars","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","FormControl","FormLabel","Switch","FlexRow","DebugUserEventsContext","React","use","PixelDebuggerToggle","props","setIsDebugging","isDebugging","use","DebugUserEventsContext","React","FlexRow","FormControl","FormLabel","Switch","checked","onClick"]}
+{"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import {\n  Badge, Card, Divider, Typography, useTheme,\n} 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, { use, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport type { PixelEvent } from '../PixelEvent.ts'\n\nexport const PixelDebugger: React.FC = () => {\n  const { isDebugging } = use(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={{\n        bottom: 0, left: 0, position: 'fixed', width: 350,\n      }}\n      >\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.vars.palette.primary.main}\n          >\n            <FlexCol\n              alignItems=\"stretch\"\n              sx={{ flexFlow: 'column', maxHeight: 400 }}\n            >\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={{\n                    cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',\n                  }}\n                >\n                  {events.map((e, index) => (\n\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 }> = ({\n  event, fields, index, events,\n}) => {\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 type { JsonObject } from '@xylabs/object'\nimport { 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      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setPixelSend(oldHandler)\n    } else {\n      XyPixel.instance.send = async (event: string, fields?: JsonObject, 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 type { WithChildren } from '@xylabs/react-shared'\nimport { useLocalStorage } 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 value={value}>{children}</DebugUserEventsContext>\n}\n","import {\n  FormControl, FormLabel, Switch,\n} from '@mui/material'\nimport type { BusyBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport React, { use } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n  const { setIsDebugging, isDebugging } = use(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","use","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylabs/react-pixel-debugger",
-  "version": "6.4.0",
+  "version": "7.0.1",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -33,34 +33,40 @@
   },
   "module": "./dist/browser/index.mjs",
   "types": "dist/browser/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "workspaces": [
     "packages/*"
   ],
   "dependencies": {
-    "@xylabs/pixel": "^4.15.0",
-    "@xylabs/react-button": "^6.4.0",
-    "@xylabs/react-flexbox": "^6.4.0",
-    "@xylabs/react-pixel": "^6.4.0",
-    "@xylabs/react-portal": "^6.4.0",
-    "@xylabs/react-shared": "^6.4.0"
+    "@xylabs/pixel": "~5.0.8",
+    "@xylabs/react-button": "~7.0.1",
+    "@xylabs/react-flexbox": "~7.0.1",
+    "@xylabs/react-pixel": "~7.0.1",
+    "@xylabs/react-portal": "~7.0.1",
+    "@xylabs/react-shared": "~7.0.1"
   },
   "devDependencies": {
-    "@mui/material": "^7.2.0",
-    "@storybook/react-vite": "^9.0.18",
-    "@types/react": "^19.1.8",
-    "@xylabs/object": "^4.15.0",
-    "@xylabs/ts-scripts-yarn3": "^7.0.1",
-    "@xylabs/tsconfig-react": "^7.0.1",
-    "knip": "^5.62.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "storybook": "^9.0.18",
-    "typescript": "^5.8.3"
+    "@mui/material": "~7.3.1",
+    "@storybook/react-vite": "~9.1.2",
+    "@types/react": "~19.1.10",
+    "@xylabs/object": "~5.0.8",
+    "@xylabs/ts-scripts-yarn3": "~7.1.1",
+    "@xylabs/tsconfig": "~7.1.1",
+    "@xylabs/tsconfig-dom": "~7.1.1",
+    "@xylabs/tsconfig-react": "~7.1.1",
+    "react": "~19.1.1",
+    "react-dom": "~19.1.1",
+    "storybook": "~9.1.2",
+    "typescript": "~5.9.2",
+    "vite": "~7.1.2"
   },
   "peerDependencies": {
     "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19"
+    "react": "~19",
+    "react-dom": "~19"
   },
   "publishConfig": {
     "access": "public"

package/knip.config.ts

@@ -1,16 +0,0 @@
-import type { KnipConfig } from 'knip'
-
-const config: KnipConfig = {
-  entry: [
-    'src/index.ts',
-  ],
-  ignore: ['packages/**'],
-  project: ['src/**/*.ts*'],
-  typescript: {
-    config: [
-      'tsconfig.json',
-    ],
-  },
-}
-
-export default config

package/xy.config.ts

@@ -1,10 +0,0 @@
-import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
-const config: XyTsupConfig = {
-  compile: {
-    browser: { src: {} },
-    node: {},
-    neutral: {},
-  },
-}
-
-export default config