@xylabs/react-pixel-debugger 2.17.3 → 2.17.4

package/dist/cjs/components/PixelDebugger.js

@@ -21,16 +21,16 @@ const PixelDebugger = () => {
     if (!isDebugging) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ variant: "outlined", sx: {
+    return ((0, jsx_runtime_1.jsx)(react_portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { style: { bottom: 0, left: 0, position: 'fixed', width: 350 }, children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: events.length, color: "primary", sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [(0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: (0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" })) })), displayEvents && !!events.length && ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => ((0, jsx_runtime_1.jsx)(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }))), displayEvents && !events.length && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }))] })) })) })) })) }));
+                    }, color: theme.palette.primary.main, children: (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, { alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 }, children: [(0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, { alignItems: "stretch", sx: { flex: '0 1 auto' }, children: (0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }), displayEvents && !!events.length && ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, { alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }, children: events.map((e, index) => ((0, jsx_runtime_1.jsx)(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) })), displayEvents && !events.length && (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: "No Events" })] }) }) }) }) }));
 };
 exports.PixelDebugger = PixelDebugger;
 const PixelEventDetails = ({ event, fields, index, events }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: event })), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }))), events[index + 1] && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: event }), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) })), events[index + 1] && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }));
 };
 //# sourceMappingURL=PixelDebugger.js.map

package/dist/cjs/components/PixelDebugger.js.map

@@ -1 +1 @@
-{"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":";;;;AAAA,4CAA0E;AAC1E,uDAA+C;AAC/C,yDAA+C;AAC/C,qDAA4D;AAC5D,uDAA6C;AAC7C,iCAA4C;AAE5C,oCAAiD;AAG1C,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,oCAAsB,CAAC,CAAA;IAC1D,sHAAsH;IACtH,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAe,EAAE,CAAC,CAAA;IAEtD,IAAA,8BAAsB,EAAC,CAAC,KAAa,EAAE,MAAgC,EAAE,EAAE;QACzE,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,GAAG,MAAM,CAAC,CAAC,CAAA;IACvD,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,uBAAC,qBAAM,cACL,gCAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,YAC/D,uBAAC,gBAAK,IAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YACvE,uBAAC,eAAI,IACH,OAAO,EAAC,UAAU,EAClB,EAAE,EAAE;wBACF,cAAc,EAAE,2BAA2B;wBAC3C,eAAe,EAAE,uBAAuB;wBACxC,SAAS,EAAE,MAAM;wBACjB,KAAK,EAAE,MAAM;qBACd,EACD,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,YAEjC,wBAAC,uBAAO,IAAC,UAAU,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,aACtE,uBAAC,uBAAO,IAAC,UAAU,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,YACpD,uBAAC,uBAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,kCAE7D,GACH,EACT,aAAa,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CACnC,uBAAC,uBAAO,IACN,UAAU,EAAC,SAAS,EACpB,YAAY,EAAC,OAAO,EACpB,OAAO,EAAE,CAAC,EACV,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,YAEjF,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,uBAAC,iBAAiB,kBAA6B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAAM,CAAC,GAA1D,GAAG,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,CAAyC,CACvF,CAAC,GACM,CACX,EACA,aAAa,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,uBAAC,qBAAU,IAAC,OAAO,EAAC,WAAW,0BAAuB,IAClF,GACL,GACD,GACJ,GACC,CACV,CAAA;AACH,CAAC,CAAA;AAtDY,QAAA,aAAa,iBAsDzB;AAED,MAAM,iBAAiB,GAAmE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAC7H,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC3C,OAAO,CACL,wBAAC,uBAAO,IAAC,UAAU,EAAC,SAAS,EAAC,YAAY,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,aAChF,uBAAC,qBAAU,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,GAAc,EACnD,MAAM,IAAI,CACT,uBAAC,qBAAU,IAAC,YAAY,EAAE,GAAG,EAAE,OAAO,EAAC,SAAS,YAC7C,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GACrB,CACd,EACA,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,uBAAC,kBAAO,KAAG,IACzB,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/cjs/components/PixelDebuggerProvider.js

@@ -6,7 +6,7 @@ const react_pixel_1 = require("@xylabs/react-pixel");
 const react_shared_1 = require("@xylabs/react-shared");
 const PixelDebuggerProvider = ({ children }) => {
     const [isDebugging, setIsDebugging] = (0, react_shared_1.useLocalStorage)('isDebuggingPixel', false);
-    return (0, jsx_runtime_1.jsx)(react_pixel_1.DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }));
+    return (0, jsx_runtime_1.jsx)(react_pixel_1.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children: children });
 };
 exports.PixelDebuggerProvider = PixelDebuggerProvider;
 //# sourceMappingURL=PixelDebuggerProvider.js.map

package/dist/cjs/components/PixelDebuggerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,uDAAoE;AAE7D,MAAM,qBAAqB,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,8BAAe,EAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,uBAAC,oCAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAG,QAAQ,IAAmC,CAAA;AAC9H,CAAC,CAAA;AAHY,QAAA,qBAAqB,yBAGjC"}
+{"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,uDAAoE;AAE7D,MAAM,qBAAqB,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,8BAAe,EAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,uBAAC,oCAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,YAAG,QAAQ,GAAmC,CAAA;AAC9H,CAAC,CAAA;AAHY,QAAA,qBAAqB,yBAGjC"}

package/dist/docs.json

@@ -1,30 +1,29 @@
 {
 	"id": 0,
 	"name": "@xylabs/react-pixel-debugger",
+	"variant": "project",
 	"kind": 1,
-	"kindString": "Project",
 	"flags": {},
-	"originalName": "",
 	"children": [
 		{
 			"id": 21,
 			"name": "PixelEvent",
+			"variant": "declaration",
 			"kind": 256,
-			"kindString": "Interface",
 			"flags": {},
 			"children": [
 				{
 					"id": 22,
 					"name": "event",
+					"variant": "declaration",
 					"kind": 1024,
-					"kindString": "Property",
 					"flags": {},
 					"sources": [
 						{
 							"fileName": "packages/pixel-debugger/src/PixelEvent.ts",
 							"line": 2,
 							"character": 2,
-							"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/PixelEvent.ts#L2"
+							"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/PixelEvent.ts#L2"
 						}
 					],
 					"type": {
@@ -35,8 +34,8 @@
 				{
 					"id": 23,
 					"name": "fields",
+					"variant": "declaration",
 					"kind": 1024,
-					"kindString": "Property",
 					"flags": {
 						"isOptional": true
 					},
@@ -45,7 +44,7 @@
 							"fileName": "packages/pixel-debugger/src/PixelEvent.ts",
 							"line": 3,
 							"character": 2,
-							"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/PixelEvent.ts#L3"
+							"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/PixelEvent.ts#L3"
 						}
 					],
 					"type": {
@@ -68,45 +67,52 @@
 					"fileName": "packages/pixel-debugger/src/PixelEvent.ts",
 					"line": 1,
 					"character": 17,
-					"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/PixelEvent.ts#L1"
+					"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/PixelEvent.ts#L1"
 				}
 			]
 		},
 		{
 			"id": 1,
 			"name": "PixelDebugger",
+			"variant": "declaration",
 			"kind": 64,
-			"kindString": "Function",
 			"flags": {},
 			"sources": [
 				{
 					"fileName": "packages/pixel-debugger/src/components/PixelDebugger.tsx",
 					"line": 11,
 					"character": 13,
-					"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/components/PixelDebugger.tsx#L11"
+					"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/components/PixelDebugger.tsx#L11"
 				}
 			],
 			"signatures": [
 				{
 					"id": 2,
 					"name": "PixelDebugger",
+					"variant": "signature",
 					"kind": 4096,
-					"kindString": "Call signature",
 					"flags": {},
+					"sources": [
+						{
+							"fileName": "node_modules/@types/react/index.d.ts",
+							"line": 531,
+							"character": 8
+						}
+					],
 					"parameters": [
 						{
 							"id": 3,
 							"name": "props",
+							"variant": "param",
 							"kind": 32768,
-							"kindString": "Parameter",
 							"flags": {},
 							"type": {
 								"type": "reflection",
 								"declaration": {
 									"id": 4,
 									"name": "__type",
+									"variant": "declaration",
 									"kind": 65536,
-									"kindString": "Type literal",
 									"flags": {}
 								}
 							}
@@ -114,8 +120,8 @@
 						{
 							"id": 5,
 							"name": "context",
+							"variant": "param",
 							"kind": 32768,
-							"kindString": "Parameter",
 							"flags": {
 								"isOptional": true
 							},
@@ -134,6 +140,10 @@
 							},
 							{
 								"type": "reference",
+								"target": {
+									"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+									"qualifiedName": "React.ReactElement"
+								},
 								"typeArguments": [
 									{
 										"type": "intrinsic",
@@ -145,8 +155,8 @@
 									}
 								],
 								"name": "ReactElement",
-								"qualifiedName": "React.ReactElement",
-								"package": "@types/react"
+								"package": "@types/react",
+								"qualifiedName": "React.ReactElement"
 							}
 						]
 					}
@@ -156,41 +166,53 @@
 		{
 			"id": 6,
 			"name": "PixelDebuggerProvider",
+			"variant": "declaration",
 			"kind": 64,
-			"kindString": "Function",
 			"flags": {},
 			"sources": [
 				{
 					"fileName": "packages/pixel-debugger/src/components/PixelDebuggerProvider.tsx",
 					"line": 4,
 					"character": 13,
-					"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/components/PixelDebuggerProvider.tsx#L4"
+					"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/components/PixelDebuggerProvider.tsx#L4"
 				}
 			],
 			"signatures": [
 				{
 					"id": 7,
 					"name": "PixelDebuggerProvider",
+					"variant": "signature",
 					"kind": 4096,
-					"kindString": "Call signature",
 					"flags": {},
+					"sources": [
+						{
+							"fileName": "node_modules/@types/react/index.d.ts",
+							"line": 531,
+							"character": 8
+						}
+					],
 					"parameters": [
 						{
 							"id": 8,
 							"name": "props",
+							"variant": "param",
 							"kind": 32768,
-							"kindString": "Parameter",
 							"flags": {},
 							"type": {
 								"type": "reference",
-								"name": "WithChildren"
+								"target": {
+									"sourceFileName": "../shared/src/WithChildren.ts",
+									"qualifiedName": "WithChildren"
+								},
+								"name": "WithChildren",
+								"package": "@xylabs/react-shared"
 							}
 						},
 						{
 							"id": 9,
 							"name": "context",
+							"variant": "param",
 							"kind": 32768,
-							"kindString": "Parameter",
 							"flags": {
 								"isOptional": true
 							},
@@ -209,6 +231,10 @@
 							},
 							{
 								"type": "reference",
+								"target": {
+									"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+									"qualifiedName": "React.ReactElement"
+								},
 								"typeArguments": [
 									{
 										"type": "intrinsic",
@@ -220,8 +246,8 @@
 									}
 								],
 								"name": "ReactElement",
-								"qualifiedName": "React.ReactElement",
-								"package": "@types/react"
+								"package": "@types/react",
+								"qualifiedName": "React.ReactElement"
 							}
 						]
 					}
@@ -231,41 +257,53 @@
 		{
 			"id": 10,
 			"name": "PixelDebuggerToggle",
+			"variant": "declaration",
 			"kind": 64,
-			"kindString": "Function",
 			"flags": {},
 			"sources": [
 				{
 					"fileName": "packages/pixel-debugger/src/components/PixelDebuggerToggle.tsx",
 					"line": 6,
 					"character": 13,
-					"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/components/PixelDebuggerToggle.tsx#L6"
+					"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/components/PixelDebuggerToggle.tsx#L6"
 				}
 			],
 			"signatures": [
 				{
 					"id": 11,
 					"name": "PixelDebuggerToggle",
+					"variant": "signature",
 					"kind": 4096,
-					"kindString": "Call signature",
 					"flags": {},
+					"sources": [
+						{
+							"fileName": "node_modules/@types/react/index.d.ts",
+							"line": 531,
+							"character": 8
+						}
+					],
 					"parameters": [
 						{
 							"id": 12,
 							"name": "props",
+							"variant": "param",
 							"kind": 32768,
-							"kindString": "Parameter",
 							"flags": {},
 							"type": {
 								"type": "reference",
-								"name": "BusyBoxProps"
+								"target": {
+									"sourceFileName": "../flexbox/src/components/BusyBox/BusyBox.tsx",
+									"qualifiedName": "BusyBoxProps"
+								},
+								"name": "BusyBoxProps",
+								"package": "@xylabs/react-flexbox"
 							}
 						},
 						{
 							"id": 13,
 							"name": "context",
+							"variant": "param",
 							"kind": 32768,
-							"kindString": "Parameter",
 							"flags": {
 								"isOptional": true
 							},
@@ -284,6 +322,10 @@
 							},
 							{
 								"type": "reference",
+								"target": {
+									"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+									"qualifiedName": "React.ReactElement"
+								},
 								"typeArguments": [
 									{
 										"type": "intrinsic",
@@ -295,8 +337,8 @@
 									}
 								],
 								"name": "ReactElement",
-								"qualifiedName": "React.ReactElement",
-								"package": "@types/react"
+								"package": "@types/react",
+								"qualifiedName": "React.ReactElement"
 							}
 						]
 					}
@@ -306,60 +348,76 @@
 		{
 			"id": 14,
 			"name": "usePixelAltSendHandler",
+			"variant": "declaration",
 			"kind": 64,
-			"kindString": "Function",
 			"flags": {},
 			"sources": [
 				{
 					"fileName": "packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts",
 					"line": 4,
 					"character": 13,
-					"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts#L4"
+					"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts#L4"
 				}
 			],
 			"signatures": [
 				{
 					"id": 15,
 					"name": "usePixelAltSendHandler",
+					"variant": "signature",
 					"kind": 4096,
-					"kindString": "Call signature",
 					"flags": {},
+					"sources": [
+						{
+							"fileName": "packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts",
+							"line": 4,
+							"character": 38,
+							"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts#L4"
+						}
+					],
 					"parameters": [
 						{
 							"id": 16,
 							"name": "altHandler",
+							"variant": "param",
 							"kind": 32768,
-							"kindString": "Parameter",
 							"flags": {},
 							"type": {
 								"type": "reflection",
 								"declaration": {
 									"id": 17,
 									"name": "__type",
+									"variant": "declaration",
 									"kind": 65536,
-									"kindString": "Type literal",
 									"flags": {},
 									"sources": [
 										{
 											"fileName": "packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts",
 											"line": 4,
 											"character": 51,
-											"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts#L4"
+											"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts#L4"
 										}
 									],
 									"signatures": [
 										{
 											"id": 18,
 											"name": "__type",
+											"variant": "signature",
 											"kind": 4096,
-											"kindString": "Call signature",
 											"flags": {},
+											"sources": [
+												{
+													"fileName": "packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts",
+													"line": 4,
+													"character": 51,
+													"url": "https://github.com/xylabs/sdk-react/blob/1668f76/packages/pixel-debugger/src/hooks/usePixelAltSendHandler.ts#L4"
+												}
+											],
 											"parameters": [
 												{
 													"id": 19,
 													"name": "event",
+													"variant": "param",
 													"kind": 32768,
-													"kindString": "Parameter",
 													"flags": {},
 													"type": {
 														"type": "intrinsic",
@@ -369,13 +427,17 @@
 												{
 													"id": 20,
 													"name": "fields",
+													"variant": "param",
 													"kind": 32768,
-													"kindString": "Parameter",
 													"flags": {
 														"isOptional": true
 													},
 													"type": {
 														"type": "reference",
+														"target": {
+															"sourceFileName": "../../node_modules/typescript/lib/lib.es5.d.ts",
+															"qualifiedName": "Record"
+														},
 														"typeArguments": [
 															{
 																"type": "intrinsic",
@@ -387,7 +449,6 @@
 															}
 														],
 														"name": "Record",
-														"qualifiedName": "Record",
 														"package": "typescript"
 													}
 												}
@@ -427,12 +488,141 @@
 			]
 		}
 	],
-	"sources": [
+	"packageName": "@xylabs/react-pixel-debugger",
+	"readme": [
+		{
+			"kind": "text",
+			"text": "[![logo][]](https://xylabs.com)\n\n# @xylabs/sdk-react\n\n[![main-build][]][main-build-link]\n[![beta-build][]][beta-build-link]\n[![npm-badge][]][npm-link]\n[![bch-badge][]][bch-link]\n[![codacy-badge][]][codacy-link]\n[![codeclimate-badge][]][codeclimate-link]\n[![snyk-badge][]][snyk-link]\n\n> XY Labs generalized React library \n\n## Table of Contents\n\n-   [Description](#description)\n-   [Install](#install)\n-   [Scripts](#scripts)\n-   [Maintainers](#maintainers)\n-   [License](#license)\n-   [Credits](#credits)\n\n## Description\n\nCommon React code that is used throughtout XYO projects that use React.\n\n## Install\n\nUsing npm:\n\n"
+		},
+		{
+			"kind": "code",
+			"text": "```sh\nnpm i --save @xylabs/sdk-react\n```"
+		},
+		{
+			"kind": "text",
+			"text": "\n\nUsing yarn:\n\n"
+		},
+		{
+			"kind": "code",
+			"text": "```sh\nyarn add @xylabs/sdk-react\n```"
+		},
+		{
+			"kind": "text",
+			"text": "\n\n## Scripts\n\nSee [ts-scripts-yarn3](https://github.com/xylabs/ts-scripts-yarn3/blob/main/README.md) for\nlist of shared scripts. The below scripts are custom scripts for this repo.\n\n### Build (Storybook)\n\nBuild the static Storybook site\n\n"
+		},
+		{
+			"kind": "code",
+			"text": "```sh\nyarn build-storybook\n```"
+		},
+		{
+			"kind": "text",
+			"text": "\n\n### Start\n\nStarts the project in the browser for testing, with auto reload using Storybook\n\n"
+		},
+		{
+			"kind": "code",
+			"text": "```sh\nyarn start\n```"
+		},
 		{
-			"fileName": "packages/pixel-debugger/src/index.ts",
-			"line": 1,
-			"character": 0,
-			"url": "https://github.com/xylabs/sdk-react/blob/77e7b7ab/packages/pixel-debugger/src/index.ts#L1"
+			"kind": "text",
+			"text": "\n\n## Maintainers\n\n-   [Arie Trouw](https://github.com/arietrouw) [arietrouw.com](https://arietrouw.com)\n\n## License\n\nSee the [LICENSE](LICENSE) file for license details\n\n## Credits\n\n[Made with 🔥and ❄️ by XY Labs](https://xylabs.com)\n\n[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg\n\n[main-build]: https://github.com/xylabs/sdk-react/actions/workflows/build-main.yml/badge.svg\n[main-build-link]: https://github.com/xylabs/sdk-react/actions/workflows/build-main.yml\n\n[beta-build]: https://github.com/xylabs/sdk-react/actions/workflows/build-beta.yml/badge.svg\n[beta-build-link]: https://github.com/xylabs/sdk-react/actions/workflows/build-beta.yml\n\n[npm-badge]: https://img.shields.io/npm/v/@xylabs/sdk-react.svg\n[npm-link]: https://www.npmjs.com/package/@xylabs/sdk-react\n\n[bch-badge]: https://bettercodehub.com/edge/badge/xylabs/sdk-react?branch=main\n[bch-link]: https://bettercodehub.com/results/xylabs/sdk-react\n\n[codacy-badge]: https://app.codacy.com/project/badge/Grade/c2a69d4530ed4b7da6ddb070169dd339\n[codacy-link]: https://www.codacy.com/gh/xylabs/sdk-react/dashboard?utm_source=github.com&utm_medium=referral&utm_content=xylabs/sdk-react&utm_campaign=Badge_Grade\n\n[codeclimate-badge]: https://api.codeclimate.com/v1/badges/c461e0bc2b00c0b01ac0/maintainability\n[codeclimate-link]: https://codeclimate.com/github/xylabs/sdk-react/maintainability\n\n[snyk-badge]: https://snyk.io/test/github/xylabs/sdk-react/badge.svg?targetFile=package.json\n[snyk-link]: https://snyk.io/test/github/xylabs/sdk-react?targetFile=package.json"
+		}
+	],
+	"symbolIdMap": {
+		"0": {
+			"sourceFileName": "src/index.ts",
+			"qualifiedName": ""
+		},
+		"1": {
+			"sourceFileName": "src/components/PixelDebugger.tsx",
+			"qualifiedName": "PixelDebugger"
+		},
+		"2": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "PixelDebugger"
+		},
+		"3": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "props"
+		},
+		"4": {
+			"sourceFileName": "\u0000",
+			"qualifiedName": "__type"
+		},
+		"5": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "context"
+		},
+		"6": {
+			"sourceFileName": "src/components/PixelDebuggerProvider.tsx",
+			"qualifiedName": "PixelDebuggerProvider"
+		},
+		"7": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "PixelDebuggerProvider"
+		},
+		"8": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "props"
+		},
+		"9": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "context"
+		},
+		"10": {
+			"sourceFileName": "src/components/PixelDebuggerToggle.tsx",
+			"qualifiedName": "PixelDebuggerToggle"
+		},
+		"11": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "PixelDebuggerToggle"
+		},
+		"12": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "props"
+		},
+		"13": {
+			"sourceFileName": "../../node_modules/@types/react/index.d.ts",
+			"qualifiedName": "context"
+		},
+		"14": {
+			"sourceFileName": "src/hooks/usePixelAltSendHandler.ts",
+			"qualifiedName": "usePixelAltSendHandler"
+		},
+		"15": {
+			"sourceFileName": "src/hooks/usePixelAltSendHandler.ts",
+			"qualifiedName": "usePixelAltSendHandler"
+		},
+		"16": {
+			"sourceFileName": "src/hooks/usePixelAltSendHandler.ts",
+			"qualifiedName": "altHandler"
+		},
+		"17": {
+			"sourceFileName": "src/hooks/usePixelAltSendHandler.ts",
+			"qualifiedName": "__type"
+		},
+		"18": {
+			"sourceFileName": "src/hooks/usePixelAltSendHandler.ts",
+			"qualifiedName": "__type"
+		},
+		"19": {
+			"sourceFileName": "src/hooks/usePixelAltSendHandler.ts",
+			"qualifiedName": "event"
+		},
+		"20": {
+			"sourceFileName": "src/hooks/usePixelAltSendHandler.ts",
+			"qualifiedName": "fields"
+		},
+		"21": {
+			"sourceFileName": "src/PixelEvent.ts",
+			"qualifiedName": "PixelEvent"
+		},
+		"22": {
+			"sourceFileName": "src/PixelEvent.ts",
+			"qualifiedName": "PixelEvent.event"
+		},
+		"23": {
+			"sourceFileName": "src/PixelEvent.ts",
+			"qualifiedName": "PixelEvent.fields"
 		}
-	]
+	}
 }

package/docs/assets/highlight.css

@@ -0,0 +1,50 @@
+:root {
+    --light-hl-0: #795E26;
+    --dark-hl-0: #DCDCAA;
+    --light-hl-1: #000000;
+    --dark-hl-1: #D4D4D4;
+    --light-hl-2: #A31515;
+    --dark-hl-2: #CE9178;
+    --light-hl-3: #0000FF;
+    --dark-hl-3: #569CD6;
+    --light-code-background: #FFFFFF;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --code-background: var(--dark-code-background);
+} }
+
+:root[data-theme='light'] {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --code-background: var(--light-code-background);
+}
+
+:root[data-theme='dark'] {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+pre, code { background: var(--code-background); }