@xylabs/react-pixel-debugger 4.0.2 → 4.0.4

package/dist/browser/PixelEvent.d.ts

@@ -0,0 +1,5 @@
+export interface PixelEvent {
+    event: string;
+    fields?: unknown;
+}
+//# sourceMappingURL=PixelEvent.d.ts.map

package/dist/browser/PixelEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelEvent.d.ts","sourceRoot":"","sources":["../../src/PixelEvent.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const PixelDebugger: React.FC;
+//# sourceMappingURL=PixelDebugger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PixelDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA+DjC,CAAA"}

package/dist/browser/components/PixelDebuggerProvider.d.ts

@@ -0,0 +1,4 @@
+import type { WithChildren } from '@xylabs/react-shared';
+import React from 'react';
+export declare const PixelDebuggerProvider: React.FC<WithChildren>;
+//# sourceMappingURL=PixelDebuggerProvider.d.ts.map

package/dist/browser/components/PixelDebuggerProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelDebuggerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAIxD,CAAA"}

package/dist/browser/components/PixelDebuggerToggle.d.ts

@@ -0,0 +1,4 @@
+import type { BusyBoxProps } from '@xylabs/react-flexbox';
+import React from 'react';
+export declare const PixelDebuggerToggle: React.FC<BusyBoxProps>;
+//# sourceMappingURL=PixelDebuggerToggle.d.ts.map

package/dist/browser/components/PixelDebuggerToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelDebuggerToggle.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAWtD,CAAA"}

package/dist/browser/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './PixelDebugger.tsx';
+export * from './PixelDebuggerProvider.tsx';
+export * from './PixelDebuggerToggle.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA"}

package/dist/browser/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePixelAltSendHandler.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA"}

package/dist/browser/hooks/usePixelAltSendHandler.d.ts

@@ -0,0 +1,2 @@
+export declare const usePixelAltSendHandler: (altHandler: (event: string, fields?: Record<string, unknown>) => void) => void;
+//# sourceMappingURL=usePixelAltSendHandler.d.ts.map

package/dist/browser/hooks/usePixelAltSendHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePixelAltSendHandler.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,eAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,SAmB3G,CAAA"}

package/dist/browser/index.d.ts

@@ -1,18 +1,4 @@
-import React from 'react';
-import { WithChildren } from '@xylabs/react-shared';
-import { BusyBoxProps } from '@xylabs/react-flexbox';
-
-declare const PixelDebugger: React.FC;
-
-declare const PixelDebuggerProvider: React.FC<WithChildren>;
-
-declare const PixelDebuggerToggle: React.FC<BusyBoxProps>;
-
-declare const usePixelAltSendHandler: (altHandler: (event: string, fields?: Record<string, unknown>) => void) => void;
-
-interface PixelEvent {
-    event: string;
-    fields?: unknown;
-}
-
-export { PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, type PixelEvent, usePixelAltSendHandler };
+export * from './components/index.ts';
+export * from './hooks/index.ts';
+export * from './PixelEvent.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA"}

package/dist/browser/index.mjs

@@ -99,12 +99,15 @@ var PixelDebugger = /* @__PURE__ */ __name(() => {
       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, {
+  }, events.map((e, index) => (
+    // eslint-disable-next-line @eslint-react/no-duplicate-key
+    /* @__PURE__ */ React.createElement(PixelEventDetails, {
+      key: `${e.event}-${index}`,
+      events,
+      index,
+      ...e
+    })
+  ))), displayEvents && events.length === 0 && /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2"
   }, "No Events"))))));
 }, "PixelDebugger");

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 { 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":["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"]}
+{"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, { useContext, 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 } = 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={{\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.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                    // eslint-disable-next-line @eslint-react/no-duplicate-key\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 { 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 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.Provider value={value}>{children}</DebugUserEventsContext.Provider>\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, { 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":["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

@@ -1,34 +1,59 @@
 {
   "name": "@xylabs/react-pixel-debugger",
+  "version": "4.0.4",
+  "description": "Common React library for all XY Labs projects that use React",
+  "keywords": [
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "homepage": "https://xylabs.com",
+  "bugs": {
+    "url": "git+https://github.com/xylabs/sdk-react/issues",
+    "email": "support@xylabs.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xylabs/sdk-react.git"
+  },
+  "license": "LGPL-3.0-only",
   "author": {
-    "email": "support@xylabs.com",
     "name": "XY Labs Development Team",
+    "email": "support@xylabs.com",
     "url": "https://xylabs.com"
   },
-  "bugs": {
-    "email": "support@xylabs.com",
-    "url": "https://github.com/xylabs/sdk-react/issues"
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./package.json": "./package.json"
   },
+  "module": "./dist/browser/index.mjs",
+  "types": "dist/browser/index.d.ts",
   "workspaces": [
     "packages/*"
   ],
   "dependencies": {
     "@xylabs/pixel": "^2.0.1",
-    "@xylabs/react-button": "^4.0.2",
-    "@xylabs/react-flexbox": "^4.0.2",
-    "@xylabs/react-pixel": "^4.0.2",
-    "@xylabs/react-portal": "^4.0.2",
-    "@xylabs/react-shared": "^4.0.2",
-    "axios": "^1.7.4"
+    "@xylabs/react-button": "^4.0.4",
+    "@xylabs/react-flexbox": "^4.0.4",
+    "@xylabs/react-pixel": "^4.0.4",
+    "@xylabs/react-portal": "^4.0.4",
+    "@xylabs/react-shared": "^4.0.4",
+    "axios": "^1.7.5"
   },
-  "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
+    "@mui/material": "^5.16.7",
     "@storybook/react": "^8.2.9",
-    "@types/react": "^18.3.3",
-    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.15",
-    "@xylabs/tsconfig-react": "^4.0.0-rc.15",
+    "@types/react": "^18.3.4",
+    "@xylabs/ts-scripts-yarn3": "^4.0.7",
+    "@xylabs/tsconfig-react": "^4.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "storybook": "^8.2.9",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
@@ -36,30 +61,7 @@
     "react": "^18",
     "react-dom": "^18"
   },
-  "exports": {
-    ".": {
-      "types": "./dist/browser/index.d.ts",
-      "default": "./dist/browser/index.mjs"
-    },
-    "./package.json": "./package.json"
-  },
-  "types": "dist/browser/index.d.ts",
-  "module": "./dist/browser/index.mjs",
-  "homepage": "https://xylabs.com",
-  "keywords": [
-    "utility",
-    "typescript",
-    "react"
-  ],
-  "license": "LGPL-3.0-only",
   "publishConfig": {
     "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/xylabs/sdk-react.git"
-  },
-  "sideEffects": false,
-  "version": "4.0.2",
-  "type": "module"
+  }
 }

package/src/components/PixelDebugger.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import { PixelApi, XyPixel } from '@xylabs/pixel'
-import { BusyBoxProps } from '@xylabs/react-flexbox'
+import type { BusyBoxProps } from '@xylabs/react-flexbox'
 import React, { useEffect, useState } from 'react'
 
 import { PixelDebugger } from './PixelDebugger.tsx'
@@ -10,11 +10,7 @@ import { PixelDebuggerToggle } from './PixelDebuggerToggle.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: PixelDebuggerToggle,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'pixel-debugger/PixelDebuggerToggle',
 } as Meta<typeof PixelDebuggerToggle>
 

package/src/components/PixelDebugger.tsx

@@ -1,4 +1,6 @@
-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'
@@ -6,7 +8,7 @@ import { Portal } from '@xylabs/react-portal'
 import React, { useContext, useState } from 'react'
 
 import { usePixelAltSendHandler } from '../hooks/index.ts'
-import { PixelEvent } from '../PixelEvent.ts'
+import type { PixelEvent } from '../PixelEvent.ts'
 
 export const PixelDebugger: React.FC = () => {
   const { isDebugging } = useContext(DebugUserEventsContext)
@@ -25,7 +27,10 @@ export const PixelDebugger: React.FC = () => {
 
   return (
     <Portal>
-      <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>
+      <div style={{
+        bottom: 0, left: 0, position: 'fixed', width: 350,
+      }}
+      >
         <Badge badgeContent={events.length} color="primary" sx={{ width: '100%' }}>
           <Card
             variant="outlined"
@@ -37,7 +42,10 @@ export const PixelDebugger: React.FC = () => {
             }}
             color={theme.palette.primary.main}
           >
-            <FlexCol alignItems="stretch" sx={{ flexFlow: 'column', maxHeight: 400 }}>
+            <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
@@ -48,9 +56,12 @@ export const PixelDebugger: React.FC = () => {
                   alignItems="stretch"
                   alignContent="start"
                   padding={2}
-                  sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}
+                  sx={{
+                    cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',
+                  }}
                 >
                   {events.map((e, index) => (
+                    // eslint-disable-next-line @eslint-react/no-duplicate-key
                     <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />
                   ))}
                 </FlexCol>
@@ -64,7 +75,9 @@ export const PixelDebugger: React.FC = () => {
   )
 }
 
-const PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {
+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)}>

package/src/components/PixelDebuggerProvider.tsx

@@ -1,5 +1,6 @@
 import { DebugUserEventsContext } from '@xylabs/react-pixel'
-import { useLocalStorage, WithChildren } from '@xylabs/react-shared'
+import type { WithChildren } from '@xylabs/react-shared'
+import { useLocalStorage } from '@xylabs/react-shared'
 import React, { useMemo } from 'react'
 
 export const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {

package/src/components/PixelDebuggerToggle.tsx

@@ -1,5 +1,8 @@
-import { FormControl, FormLabel, Switch } from '@mui/material'
-import { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'
+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, { useContext } from 'react'
 

package/xy.config.ts

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