@xylabs/react-pixel-debugger 7.1.17 → 7.1.20

package/README.md

@@ -1,67 +1,27 @@
-[![logo][]](https://xylabs.com)
-
 # @xylabs/react-pixel-debugger
 
-[![npm-badge][]][npm-link]
-[![npm-downloads-badge][]][npm-link]
-[![jsdelivr-badge][]][jsdelivr-link]
-[![npm-license-badge][]](LICENSE)
-
-> XY Labs generalized React library 
-
-## Table of Contents
+[![npm][npm-badge]][npm-link]
 
--   [Description](#description)
--   [Install](#install)
--   [Maintainers](#maintainers)
--   [License](#license)
--   [Credits](#credits)
-
-## Description
-
-Common React code that is used throughout XYO projects that use React.
+> Common React library for all XY Labs projects that use React
 
 ## Install
 
-Using npm:
-
 ```sh
-npm i --save @xylabs/react-pixel-debugger
+npm install {{name}}
 ```
 
-Using yarn:
+or
 
 ```sh
-yarn add @xylabs/react-pixel-debugger
+yarn add {{name}}
 ```
 
-## Documentation
-[Developer Reference](https://xylabs.github.io/sdk-react)
-
-[Storybook](https://xylabs.github.io/sdk-react/storybook)
-
-## Maintainers
-
--   [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
--   [Matt Jones](https://github.com/jonesmac)
--   [Joel Carter](https://github.com/JoelBCarter)
--   [Jordan Trouw](https://github.com/jordantrouw)
 
 ## License
 
-See the [LICENSE](LICENSE) file for license details
+See the [LICENSE](LICENSE) file for license rights and limitations (LGPL-3.0-only).
 
-## Credits
 
-[Made with 🔥and ❄️ by XY Labs](https://xylabs.com)
-
-[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
 
 [npm-badge]: https://img.shields.io/npm/v/@xylabs/react-pixel-debugger.svg
 [npm-link]: https://www.npmjs.com/package/@xylabs/react-pixel-debugger
-
-[npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-pixel-debugger
-[npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-pixel-debugger
-
-[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-pixel-debugger/badge
-[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-pixel-debugger

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}`} 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 { XyPixel } from '@xylabs/pixel'\nimport type { JsonObject } from '@xylabs/sdk-js'\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 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 { useLocalStorage } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nexport const PixelDebuggerProvider: React.FC<PropsWithChildren> = ({ 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"]}
+{"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}`} 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 { XyPixel } from '@xylabs/pixel'\nimport type { JsonObject } from '@xylabs/sdk-js'\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 react-hooks/set-state-in-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 { useLocalStorage } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nexport const PixelDebuggerProvider: React.FC<PropsWithChildren> = ({ 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": "7.1.17",
+  "version": "7.1.20",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -27,52 +27,60 @@
   "exports": {
     ".": {
       "types": "./dist/browser/index.d.ts",
+      "import": "./dist/browser/index.mjs",
       "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
-  "module": "./dist/browser/index.mjs",
   "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "workspaces": [
     "packages/*"
   ],
   "dependencies": {
-    "@xylabs/pixel": "~5.0.80",
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/react-portal": "~7.1.17",
-    "@xylabs/react-shared": "~7.1.17"
+    "@mui/material": "~7.3.9",
+    "@xylabs/pixel": "~5.0.95",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-pixel": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20"
   },
   "devDependencies": {
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.2.16",
+    "@opentelemetry/api": "^1.9.1",
+    "@storybook/react-vite": "~10.3.4",
+    "@types/node": "~25.5.2",
     "@types/react": "^19.2.14",
-    "@xylabs/sdk-js": "~5.0.80",
-    "@xylabs/ts-scripts-yarn3": "~7.4.9",
-    "@xylabs/tsconfig": "~7.4.9",
-    "@xylabs/tsconfig-dom": "~7.4.9",
-    "@xylabs/tsconfig-react": "~7.4.9",
-    "axios": "^1.13.6",
+    "@xylabs/sdk-js": "~5.0.95",
+    "@xylabs/ts-scripts-common": "~7.8.5",
+    "@xylabs/ts-scripts-pnpm": "~7.8.5",
+    "@xylabs/tsconfig": "~7.8",
+    "@xylabs/tsconfig-dom": "~7.8.5",
+    "@xylabs/tsconfig-react": "~7.8.5",
+    "@xylabs/zod": "~5.0.95",
+    "axios": "^1.14.0",
+    "esbuild": "^0.28.0",
+    "pako": "~2.1.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "~10.2.16",
+    "storybook": "~10.3.4",
     "typescript": "^5.9.3",
-    "vite": "~7.3.1",
-    "zod": "^4.3.6"
+    "vite": "~8.0.5",
+    "zod": "^4.3.6",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-portal": "~7.1.20"
   },
   "peerDependencies": {
-    "@mui/material": ">=6 <8",
-    "axios": "^1",
+    "@xylabs/zod": "~5.0.95",
+    "pako": "~2.1.0",
     "react": "^19",
-    "react-dom": "^19",
-    "zod": "^4"
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-portal": "~7.1.20"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/PixelEvent.ts

@@ -1,4 +0,0 @@
-export interface PixelEvent {
-  event: string
-  fields?: unknown
-}

package/src/components/PixelDebugger.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { PixelApi, XyPixel } from '@xylabs/pixel'
-import type { BusyBoxProps } from '@xylabs/react-flexbox'
-import React, { useMemo, useState } from 'react'
-
-import { PixelDebugger } from './PixelDebugger.tsx'
-import { PixelDebuggerProvider } from './PixelDebuggerProvider.tsx'
-import { PixelDebuggerToggle } from './PixelDebuggerToggle.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PixelDebuggerToggle,
-  parameters: { docs: { page: null } },
-  title: 'pixel-debugger/PixelDebuggerToggle',
-} as Meta<typeof PixelDebuggerToggle>
-
-const Template: StoryFn<typeof PixelDebuggerToggle> = (args: BusyBoxProps) => {
-  const [pixel, setPixel] = useState<XyPixel>()
-  useMemo(() => {
-    XyPixel.selectApi(new PixelApi('local'))
-    setPixel(XyPixel.init('storybookPixel'))
-  }, [])
-  return pixel
-    ? (
-        <PixelDebuggerProvider>
-          <PixelDebuggerToggle {...args} />
-          <PixelDebugger />
-        </PixelDebuggerProvider>
-      )
-    : <div>Loading Pixel...</div>
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-export default StorybookEntry

package/src/components/PixelDebugger.tsx

@@ -1,93 +0,0 @@
-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 } from 'react'
-
-import { usePixelAltSendHandler } from '../hooks/index.ts'
-import type { PixelEvent } from '../PixelEvent.ts'
-
-export const PixelDebugger: React.FC = () => {
-  const { isDebugging } = use(DebugUserEventsContext)
-  // 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])
-  })
-
-  if (!isDebugging) {
-    return null
-  }
-
-  return (
-    <Portal>
-      <div style={{
-        bottom: 0, left: 0, position: 'fixed', width: 350,
-      }}
-      >
-        <Badge badgeContent={events.length} color="primary" sx={{ width: '100%' }}>
-          <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}
-          >
-            <FlexCol
-              alignItems="stretch"
-              sx={{ flexFlow: 'column', maxHeight: 400 }}
-            >
-              <FlexCol alignItems="stretch" sx={{ flex: '0 1 auto' }}>
-                <ButtonEx variant="text" onClick={() => setDisplayEvents(!displayEvents)}>
-                  XY Pixel Debugger
-                </ButtonEx>
-              </FlexCol>
-              {displayEvents && events.length > 0 && (
-                <FlexCol
-                  alignItems="stretch"
-                  alignContent="start"
-                  padding={2}
-                  sx={{
-                    cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',
-                  }}
-                >
-                  {events.map((e, index) => (
-
-                    <PixelEventDetails key={`${e.event}`} events={events} index={index} {...e} />
-                  ))}
-                </FlexCol>
-              )}
-              {displayEvents && events.length === 0 && <Typography variant="subtitle2">No Events</Typography>}
-            </FlexCol>
-          </Card>
-        </Badge>
-      </div>
-    </Portal>
-  )
-}
-
-const PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({
-  event, fields, index, events,
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  return (
-    <FlexCol alignItems="stretch" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>
-      <Typography variant="subtitle2">{event}</Typography>
-      {isOpen && (
-        <Typography marginBottom={0.5} variant="caption">
-          {JSON.stringify(fields, null, 2)}
-        </Typography>
-      )}
-      {events[index + 1] && <Divider />}
-    </FlexCol>
-  )
-}

package/src/components/PixelDebuggerProvider.tsx

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

package/src/components/PixelDebuggerToggle.tsx

@@ -1,20 +0,0 @@
-import {
-  FormControl, FormLabel, Switch,
-} from '@mui/material'
-import type { BusyBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { DebugUserEventsContext } from '@xylabs/react-pixel'
-import React, { use } from 'react'
-
-export const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {
-  const { setIsDebugging, isDebugging } = use(DebugUserEventsContext)
-
-  return (
-    <FlexRow {...props}>
-      <FormControl>
-        <FormLabel>Enable Debugger</FormLabel>
-        <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />
-      </FormControl>
-    </FlexRow>
-  )
-}

package/src/components/index.ts

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

package/src/global.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

package/src/hooks/index.ts

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

package/src/hooks/usePixelAltSendHandler.ts

@@ -1,25 +0,0 @@
-import { XyPixel } from '@xylabs/pixel'
-import type { JsonObject } from '@xylabs/sdk-js'
-import { useEffect, useState } from 'react'
-
-export const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {
-  const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()
-  useEffect(() => {
-    if (!pixelSend && XyPixel.instance.send) {
-      const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
-      setPixelSend(oldHandler)
-    } else {
-      XyPixel.instance.send = async (event: string, fields?: JsonObject, eventId?: string) => {
-        altHandler(event, fields)
-        return await pixelSend?.(event, fields, eventId)
-      }
-    }
-    return () => {
-      // restore send on unmount
-      if (pixelSend) {
-        XyPixel.instance.send = pixelSend
-      }
-    }
-  }, [pixelSend, altHandler])
-}

package/src/index.ts

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