@xyo-network/react-payload-details 7.6.3 → 8.0.1

package/dist/browser/components/Details/DataDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/DataDetails.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAEhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0DhE,CAAA"}
+{"version":3,"file":"DataDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/DataDetails.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAEhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgEhE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,IAAI,CAAA;CAAE,CAAA;AAC9C,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEnD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAA"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,IAAI,CAAA;CAAE,CAAA;AAC9C,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEnD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmBxD,CAAA"}

package/dist/browser/components/Details/HashSourceDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HashSourceDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAMzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,6BAA8B,SAAQ,YAAY;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA0C5E,CAAA"}
+{"version":3,"file":"HashSourceDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAMzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,6BAA8B,SAAQ,YAAY;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAiE5E,CAAA"}

package/dist/browser/components/Details/ValidationDetails/ValidationDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationDetails.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAA;AAEhF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAmC5E,CAAA"}
+{"version":3,"file":"ValidationDetails.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAA;AAEhF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAyC5E,CAAA"}

package/dist/browser/index.mjs

@@ -35,26 +35,65 @@ var PayloadHashSourceDetails = ({
 }) => {
   const theme = useTheme();
   const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : "";
-  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", ...props, children: [
-    noTitle ? null : /* @__PURE__ */ jsxs(FlexRow, { margin: 1, justifyContent: "flex-start", children: [
-      /* @__PURE__ */ jsx(Typography, { children: "Hash Source" }),
-      /* @__PURE__ */ jsx(QuickTipButton, { title: "Hash Source", children: "The actual string used to generate the hash (SHA256)" })
-    ] }),
-    /* @__PURE__ */ jsxs(FlexRow, { children: [
-      /* @__PURE__ */ jsx(FlexGrowRow, { background: true, border: 1, borderColor: theme.vars.palette.divider, justifyContent: "start", children: /* @__PURE__ */ jsx(
-        Typography,
-        {
-          padding: 2,
-          fontFamily: "monospace",
-          variant: "body1",
-          sx: { overflowWrap: "break-word", wordBreak: "break-all" },
-          children: payloadString
-        }
-      ) }),
-      /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(ContentCopyIcon, {}) })
-    ] }),
-    noTitle ? /* @__PURE__ */ jsx(FlexRow, { margin: 1, justifyContent: "flex-start", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." }) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    FlexCol,
+    {
+      ...props,
+      sx: [{ alignItems: "stretch" }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: [
+        noTitle ? null : /* @__PURE__ */ jsxs(
+          FlexRow,
+          {
+            sx: {
+              margin: 1,
+              justifyContent: "flex-start"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { children: "Hash Source" }),
+              /* @__PURE__ */ jsx(QuickTipButton, { title: "Hash Source", children: "The actual string used to generate the hash (SHA256)" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(FlexRow, { children: [
+          /* @__PURE__ */ jsx(
+            FlexGrowRow,
+            {
+              background: true,
+              sx: {
+                border: 1,
+                borderColor: theme.vars.palette.divider,
+                justifyContent: "start"
+              },
+              children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body1",
+                  sx: {
+                    padding: 2,
+                    fontFamily: "monospace",
+                    overflowWrap: "break-word",
+                    wordBreak: "break-all"
+                  },
+                  children: payloadString
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(ContentCopyIcon, {}) })
+        ] }),
+        noTitle ? /* @__PURE__ */ jsx(
+          FlexRow,
+          {
+            sx: {
+              margin: 1,
+              justifyContent: "flex-start"
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 
 // src/components/Details/DataDetails.tsx
@@ -105,8 +144,22 @@ var PayloadDataDetails = ({
       /* @__PURE__ */ jsx2(DialogTitle, { children: "Hash Source" }),
       /* @__PURE__ */ jsx2(DialogContent, { children: /* @__PURE__ */ jsx2(PayloadHashSourceDetails, { noTitle: true, payload }) }),
       /* @__PURE__ */ jsxs2(DialogActions, { children: [
-        /* @__PURE__ */ jsx2(ButtonEx, { color: "secondary", onClick: onCopy, children: "Copy" }),
-        /* @__PURE__ */ jsx2(ButtonEx, { color: "secondary", onClick: () => setViewSourceOpen(false), children: "Close" })
+        /* @__PURE__ */ jsx2(
+          ButtonEx,
+          {
+            onClick: onCopy,
+            sx: { color: "secondary" },
+            children: "Copy"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ButtonEx,
+          {
+            onClick: () => setViewSourceOpen(false),
+            sx: { color: "secondary" },
+            children: "Close"
+          }
+        )
       ] })
     ] })
   ] });
@@ -185,15 +238,22 @@ var PayloadValidationDetails = ({
       Property2,
       {
         titleProps: { elevation },
-        flexGrow: 1,
         title: "Valid",
         value: errors.length === 0 ? "True" : "False",
         tip: errors.length > 0 ? /* @__PURE__ */ jsx4(FlexCol2, { children: errors.map((error) => {
           return /* @__PURE__ */ jsx4(Typography2, { children: error.toString() }, error.message);
-        }) }) : /* @__PURE__ */ jsx4(Typography2, { children: "No Errors" })
+        }) }) : /* @__PURE__ */ jsx4(Typography2, { children: "No Errors" }),
+        sx: { flexGrow: 1 }
       }
     ),
-    value?.schema && /* @__PURE__ */ jsx4(SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+    value?.schema && /* @__PURE__ */ jsx4(
+      SchemaProperty,
+      {
+        titleProps: { elevation },
+        value: value.schema,
+        sx: { flexGrow: 1 }
+      }
+    )
   ] });
 };
 
@@ -204,11 +264,24 @@ var PayloadDetails = ({
   payload,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs4(FlexCol3, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ...props, children: [
-    /* @__PURE__ */ jsx5(PayloadDataDetails, { paper, size: "large", badge: true, payload }),
-    /* @__PURE__ */ jsx5(PayloadValidationDetails, { paper, value: payload }),
-    /* @__PURE__ */ jsx5(PayloadJsonDetails, { paper, payload })
-  ] });
+  return /* @__PURE__ */ jsxs4(
+    FlexCol3,
+    {
+      ...props,
+      sx: [{
+        gap: 1,
+        justifyContent: "flex-start",
+        alignItems: "stretch",
+        marginTop: 2,
+        marginBottom: 8
+      }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: [
+        /* @__PURE__ */ jsx5(PayloadDataDetails, { paper, size: "large", badge: true, payload }),
+        /* @__PURE__ */ jsx5(PayloadValidationDetails, { paper, value: payload }),
+        /* @__PURE__ */ jsx5(PayloadJsonDetails, { paper, payload })
+      ]
+    }
+  );
 };
 PayloadDetails.displayName = "PayloadDetails";
 export {
@@ -217,4 +290,4 @@ export {
   PayloadJsonDetails,
   PayloadValidationDetails
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/components/Details/DataDetails.tsx","../../src/components/Details/HashSourceDetails.tsx","../../src/components/Details/Details.tsx","../../src/components/Details/JsonDetails.tsx","../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'\nimport {\n  Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { forget } from '@xylabs/sdk-js'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { Property } from '@xyo-network/react-property'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport React, { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails.tsx'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({\n  size, badge, payload, ...props\n}) => {\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: () => forget(navigator.clipboard.writeText(hash ?? '')),\n    },\n  ]\n\n  const onCopy = () => {\n    forget(navigator.clipboard.writeText(payloadString))\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx color=\"secondary\" onClick={onCopy}>\n            Copy\n          </ButtonEx>\n          <ButtonEx color=\"secondary\" onClick={() => setViewSourceOpen(false)}>\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n","import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport {\n  IconButton, Typography, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({\n  noTitle = false, payload, ...props\n}) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle\n        ? null\n        : (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography>Hash Source</Typography>\n              <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n            </FlexRow>\n          )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.vars.palette.divider} justifyContent=\"start\">\n          <Typography\n            padding={2}\n            fontFamily=\"monospace\"\n            variant=\"body1\"\n            sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}\n          >\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle\n        ? (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography variant=\"body2\">\n                The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n              </Typography>\n            </FlexRow>\n          )\n        : null}\n    </FlexCol>\n  )\n}\n","import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nimport { PayloadDataDetails } from './DataDetails.tsx'\nimport { PayloadJsonDetails } from './JsonDetails.tsx'\nimport { PayloadValidationDetails } from './ValidationDetails/index.ts'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails: React.FC<PayloadDetailsProps> = ({\n  paper, payload, ...props\n}) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n}\n\nPayloadDetails.displayName = 'PayloadDetails'\n","import {\n  Paper, useMediaQuery, useTheme,\n} from '@mui/material'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { JsonViewerExProps } from '@xyo-network/react-payload-raw-info'\nimport { JsonViewerEx } from '@xyo-network/react-payload-raw-info'\nimport type { PropertyGroupProps } from '@xyo-network/react-property'\nimport { PropertyGroup } from '@xyo-network/react-property'\nimport React from 'react'\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: JsonViewerExProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({\n  jsonViewProps, payload, ...props\n}) => {\n  const { breakpoints } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper\n        square\n        variant=\"elevation\"\n        style={{\n          overflow: 'hidden', padding: '16px', width: '100%',\n        }}\n      >\n        <JsonViewerEx\n          groupArraysAfterLength={20}\n          style={{ overflow: 'hidden' }}\n          value={payload}\n          enableClipboard\n          collapseStringsAfterLength={belowSm ? 24 : 32}\n          {...jsonViewProps}\n        />\n      </Paper>\n    </PropertyGroup>\n  )\n}\n","import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { Property, PropertyGroup } from '@xyo-network/react-property'\nimport { SchemaProperty } from '@xyo-network/react-schema'\nimport React from 'react'\n\nimport type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({\n  skipBody = false, value, ...props\n}) => {\n  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])\n\n  const bodyErrors = skipBody ? [] : (validateErrors ?? [])\n  const errors: Error[] = [...bodyErrors]\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"Validation\" tip=\"The results from validating the payload\" {...props}>\n      <Property\n        titleProps={{ elevation }}\n        flexGrow={1}\n        title=\"Valid\"\n        value={errors.length === 0 ? 'True' : 'False'}\n        tip={\n          errors.length > 0\n            ? (\n                <FlexCol>\n                  {errors.map((error) => {\n                    return <Typography key={error.message}>{error.toString()}</Typography>\n                  })}\n                </FlexCol>\n              )\n            : <Typography>No Errors</Typography>\n        }\n      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":";AAAA,SAAS,eAAeA,kBAAiB,cAAc,sBAAsB;AAC7E;AAAA,EACE;AAAA,EAAQ;AAAA,EAAe;AAAA,EAAe;AAAA,OACjC;AACP,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAAC,uBAAsB;AAG/B,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAC/B,SAAgB,gBAAgB;;;ACZhC,SAAS,eAAe,uBAAuB;AAC/C;AAAA,EACE;AAAA,EAAY;AAAA,EAAY;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EAAS;AAAA,EAAa;AAAA,OACjB;AACP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAoBnB,SACE,KADF;AAXL,IAAM,2BAAoE,CAAC;AAAA,EAChF,UAAU;AAAA,EAAO;AAAA,EAAS,GAAG;AAC/B,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,gBAAgB,UAAU,KAAK,UAAU,eAAe,eAAe,OAAO,GAAG,MAAM,CAAC,IAAI;AAElG,SACE,qBAAC,WAAQ,YAAW,WAAW,GAAG,OAC/B;AAAA,cACG,OAEE,qBAAC,WAAQ,QAAQ,GAAG,gBAAe,cACjC;AAAA,0BAAC,cAAW,yBAAW;AAAA,MACvB,oBAAC,kBAAe,OAAM,eAAc,kEAAoD;AAAA,OAC1F;AAAA,IAEN,qBAAC,WACC;AAAA,0BAAC,eAAY,YAAU,MAAC,QAAQ,GAAG,aAAa,MAAM,KAAK,QAAQ,SAAS,gBAAe,SACzF;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,YAAW;AAAA,UACX,SAAQ;AAAA,UACR,IAAI,EAAE,cAAc,cAAc,WAAW,YAAY;AAAA,UAExD;AAAA;AAAA,MACH,GACF;AAAA,MACA,oBAAC,cACC,8BAAC,mBAAgB,GACnB;AAAA,OACF;AAAA,IACC,UAEK,oBAAC,WAAQ,QAAQ,GAAG,gBAAe,cACjC,8BAAC,cAAW,SAAQ,SAAQ,mHAE5B,GACF,IAEF;AAAA,KACN;AAEJ;;;ADvBY,SAgBR,UAhBQ,OAAAC,MAgCJ,QAAAC,aAhCI;AAfL,IAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EAAM;AAAA,EAAO;AAAA,EAAS,GAAG;AAC3B,MAAM;AACJ,QAAM,gBAAgB,UAAU,KAAK,UAAUC,gBAAe,eAAe,OAAO,GAAG,MAAM,CAAC,IAAI;AAElG,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,OAAO,eAAe,OAAO;AAEnC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,QAAM,UAA4B;AAAA,IAChC;AAAA,MACE,MAAM,gBAAAF,KAAC,kBAAe;AAAA,MACtB,MAAM;AAAA,MACN,SAAS,MAAM,kBAAkB,IAAI;AAAA,IACvC;AAAA,IACA;AAAA,MACE,MAAM,gBAAAA,KAACG,kBAAA,EAAgB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS,MAAM,OAAO,UAAU,UAAU,UAAU,QAAQ,EAAE,CAAC;AAAA,IACjE;AAAA,EACF;AAEA,QAAM,SAAS,MAAM;AACnB,WAAO,UAAU,UAAU,UAAU,aAAa,CAAC;AAAA,EACrD;AAEA,SACE,gBAAAF,MAAA,YACE;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAM;AAAA,QACN,OAAO,QAAQ;AAAA,QACf,KAAI;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,IACA,gBAAAC,MAAC,UAAO,MAAM,gBAAgB,SAAS,MAAM,kBAAkB,KAAK,GAClE;AAAA,sBAAAD,KAAC,eAAY,yBAAW;AAAA,MACxB,gBAAAA,KAAC,iBACC,0BAAAA,KAAC,4BAAyB,SAAO,MAAC,SAAkB,GACtD;AAAA,MACA,gBAAAC,MAAC,iBACC;AAAA,wBAAAD,KAAC,YAAS,OAAM,aAAY,SAAS,QAAQ,kBAE7C;AAAA,QACA,gBAAAA,KAAC,YAAS,OAAM,aAAY,SAAS,MAAM,kBAAkB,KAAK,GAAG,mBAErE;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;;;AE/EA,SAAS,WAAAI,gBAAe;;;ACDxB;AAAA,EACE;AAAA,EAAO;AAAA,EAAe,YAAAC;AAAA,OACjB;AAGP,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AA4BtB,gBAAAC,YAAA;AApBD,IAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EAAe;AAAA,EAAS,GAAG;AAC7B,MAAM;AACJ,QAAM,EAAE,YAAY,IAAID,UAAS;AACjC,QAAM,UAAU,cAAc,YAAY,KAAK,IAAI,CAAC;AAEpD,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,SACE,gBAAAC,KAAC,iBAAc,YAAY,EAAE,UAAU,GAAG,OAAM,QAAO,KAAI,+BAA+B,GAAG,OAC3F,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAM;AAAA,MACN,SAAQ;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QAAU,SAAS;AAAA,QAAQ,OAAO;AAAA,MAC9C;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC,wBAAwB;AAAA,UACxB,OAAO,EAAE,UAAU,SAAS;AAAA,UAC5B,OAAO;AAAA,UACP,iBAAe;AAAA,UACf,4BAA4B,UAAU,KAAK;AAAA,UAC1C,GAAG;AAAA;AAAA,MACN;AAAA;AAAA,EACF,GACF;AAEJ;;;AC9CA,SAAS,cAAAC,mBAAkB;AAC3B,SAAS,WAAAC,gBAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,YAAAC,WAAU,iBAAAC,sBAAqB;AACxC,SAAS,sBAAsB;AAmB3B,SAWuB,OAAAC,MAXvB,QAAAC,aAAA;AAdG,IAAM,2BAAoE,CAAC;AAAA,EAChF,WAAW;AAAA,EAAO;AAAA,EAAO,GAAG;AAC9B,MAAM;AACJ,QAAM,CAAC,cAAc,IAAI,WAAW,YAAa,QAAQ,MAAM,IAAI,iBAAiB,KAAK,EAAE,SAAS,IAAI,QAAY,CAAC,KAAK,CAAC;AAE3H,QAAM,aAAa,WAAW,CAAC,IAAK,kBAAkB,CAAC;AACvD,QAAM,SAAkB,CAAC,GAAG,UAAU;AAEtC,MAAI,YAAY;AAChB,MAAI,MAAM,OAAO;AACf,iBAAa,MAAM,aAAa;AAAA,EAClC;AAEA,SACE,gBAAAA,MAACF,gBAAA,EAAc,YAAY,EAAE,UAAU,GAAG,OAAM,cAAa,KAAI,2CAA2C,GAAG,OAC7G;AAAA,oBAAAC;AAAA,MAACF;AAAA,MAAA;AAAA,QACC,YAAY,EAAE,UAAU;AAAA,QACxB,UAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAO,OAAO,WAAW,IAAI,SAAS;AAAA,QACtC,KACE,OAAO,SAAS,IAEV,gBAAAE,KAACH,UAAA,EACE,iBAAO,IAAI,CAAC,UAAU;AACrB,iBAAO,gBAAAG,KAACJ,aAAA,EAAgC,gBAAM,SAAS,KAA/B,MAAM,OAA2B;AAAA,QAC3D,CAAC,GACH,IAEF,gBAAAI,KAACJ,aAAA,EAAW,uBAAS;AAAA;AAAA,IAE7B;AAAA,IACC,OAAO,UAAU,gBAAAI,KAAC,kBAAe,UAAU,GAAG,YAAY,EAAE,UAAU,GAAG,OAAO,MAAM,QAAQ;AAAA,KACjG;AAEJ;;;AFxBI,SACE,OAAAE,MADF,QAAAC,aAAA;AAJG,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EAAO;AAAA,EAAS,GAAG;AACrB,MAAM;AACJ,SACE,gBAAAA,MAACC,UAAA,EAAQ,KAAK,GAAG,gBAAe,cAAa,YAAW,WAAU,WAAW,GAAG,cAAc,GAAI,GAAG,OACnG;AAAA,oBAAAF,KAAC,sBAAmB,OAAc,MAAK,SAAQ,OAAK,MAAC,SAAkB;AAAA,IACvE,gBAAAA,KAAC,4BAAyB,OAAc,OAAO,SAAS;AAAA,IACxD,gBAAAA,KAAC,sBAAmB,OAAc,SAAkB;AAAA,KACtD;AAEJ;AAEA,eAAe,cAAc;","names":["ContentCopyIcon","PayloadBuilder","jsx","jsxs","PayloadBuilder","ContentCopyIcon","FlexCol","useTheme","jsx","Typography","FlexCol","Property","PropertyGroup","jsx","jsxs","jsx","jsxs","FlexCol"]}
+{
+  "version": 3,
+  "sources": ["../../src/components/Details/DataDetails.tsx", "../../src/components/Details/HashSourceDetails.tsx", "../../src/components/Details/Details.tsx", "../../src/components/Details/JsonDetails.tsx", "../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],
+  "sourcesContent": ["import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'\nimport {\n  Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { forget } from '@xylabs/sdk-js'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { Property } from '@xyo-network/react-property'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport React, { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails.tsx'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({\n  size, badge, payload, ...props\n}) => {\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: () => forget(navigator.clipboard.writeText(hash ?? '')),\n    },\n  ]\n\n  const onCopy = () => {\n    forget(navigator.clipboard.writeText(payloadString))\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx\n            onClick={onCopy}\n            sx={{ color: 'secondary' }}\n          >\n            Copy\n          </ButtonEx>\n          <ButtonEx\n            onClick={() => setViewSourceOpen(false)}\n            sx={{ color: 'secondary' }}\n          >\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n", "import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport {\n  IconButton, Typography, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({\n  noTitle = false, payload, ...props\n}) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadBuilder.hashableFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol\n      {...props}\n      sx={[{ alignItems: 'stretch' }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n    >\n      {noTitle\n        ? null\n        : (\n            <FlexRow\n              sx={{\n                margin: 1,\n                justifyContent: 'flex-start',\n              }}\n            >\n              <Typography>Hash Source</Typography>\n              <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n            </FlexRow>\n          )}\n      <FlexRow>\n        <FlexGrowRow\n          background\n          sx={{\n            border: 1,\n            borderColor: theme.vars.palette.divider,\n            justifyContent: 'start',\n          }}\n        >\n          <Typography\n            variant=\"body1\"\n            sx={{\n              padding: 2,\n              fontFamily: 'monospace',\n              overflowWrap: 'break-word',\n              wordBreak: 'break-all',\n            }}\n          >\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle\n        ? (\n            <FlexRow\n              sx={{\n                margin: 1,\n                justifyContent: 'flex-start',\n              }}\n            >\n              <Typography variant=\"body2\">\n                The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n              </Typography>\n            </FlexRow>\n          )\n        : null}\n    </FlexCol>\n  )\n}\n", "import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nimport { PayloadDataDetails } from './DataDetails.tsx'\nimport { PayloadJsonDetails } from './JsonDetails.tsx'\nimport { PayloadValidationDetails } from './ValidationDetails/index.ts'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails: React.FC<PayloadDetailsProps> = ({\n  paper, payload, ...props\n}) => {\n  return (\n    <FlexCol\n      {...props}\n      sx={[{\n        gap: 1,\n        justifyContent: 'flex-start',\n        alignItems: 'stretch',\n        marginTop: 2,\n        marginBottom: 8,\n      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n    >\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n}\n\nPayloadDetails.displayName = 'PayloadDetails'\n", "import {\n  Paper, useMediaQuery, useTheme,\n} from '@mui/material'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { JsonViewerExProps } from '@xyo-network/react-payload-raw-info'\nimport { JsonViewerEx } from '@xyo-network/react-payload-raw-info'\nimport type { PropertyGroupProps } from '@xyo-network/react-property'\nimport { PropertyGroup } from '@xyo-network/react-property'\nimport React from 'react'\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: JsonViewerExProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({\n  jsonViewProps, payload, ...props\n}) => {\n  const { breakpoints } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper\n        square\n        variant=\"elevation\"\n        style={{\n          overflow: 'hidden', padding: '16px', width: '100%',\n        }}\n      >\n        <JsonViewerEx\n          groupArraysAfterLength={20}\n          style={{ overflow: 'hidden' }}\n          value={payload}\n          enableClipboard\n          collapseStringsAfterLength={belowSm ? 24 : 32}\n          {...jsonViewProps}\n        />\n      </Paper>\n    </PropertyGroup>\n  )\n}\n", "import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { Property, PropertyGroup } from '@xyo-network/react-property'\nimport { SchemaProperty } from '@xyo-network/react-schema'\nimport React from 'react'\n\nimport type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({\n  skipBody = false, value, ...props\n}) => {\n  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])\n\n  const bodyErrors = skipBody ? [] : (validateErrors ?? [])\n  const errors: Error[] = [...bodyErrors]\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"Validation\" tip=\"The results from validating the payload\" {...props}>\n      <Property\n        titleProps={{ elevation }}\n        title=\"Valid\"\n        value={errors.length === 0 ? 'True' : 'False'}\n        tip={\n          errors.length > 0\n            ? (\n                <FlexCol>\n                  {errors.map((error) => {\n                    return <Typography key={error.message}>{error.toString()}</Typography>\n                  })}\n                </FlexCol>\n              )\n            : <Typography>No Errors</Typography>\n        }\n        sx={{ flexGrow: 1 }}\n      />\n      {value?.schema && (\n        <SchemaProperty\n          titleProps={{ elevation }}\n          value={value.schema}\n          sx={{ flexGrow: 1 }}\n        />\n      )}\n    </PropertyGroup>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["ContentCopyIcon", "PayloadBuilder", "jsx", "jsxs", "PayloadBuilder", "ContentCopyIcon", "FlexCol", "useTheme", "jsx", "Typography", "FlexCol", "Property", "PropertyGroup", "jsx", "jsxs", "jsx", "jsxs", "FlexCol"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-payload-details",
-  "version": "7.6.3",
+  "version": "8.0.1",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -41,44 +41,42 @@
     "README.md"
   ],
   "dependencies": {
-    "@xyo-network/react-property": "~7.6.3",
-    "@xyo-network/react-schema": "~7.6.3",
-    "@xyo-network/react-payload-raw-info": "~7.6.3",
-    "@xyo-network/react-shared": "~7.6.3"
+    "@xyo-network/react-payload-raw-info": "~8.0.1",
+    "@xyo-network/react-property": "~8.0.1",
+    "@xyo-network/react-shared": "~8.0.1",
+    "@xyo-network/react-schema": "~8.0.1"
   },
   "devDependencies": {
     "@bitauth/libauth": "~3.0.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
-    "@mui/system": "^7.3.11",
-    "@mui/x-tree-view": "~8.27.2",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "@mui/system": "^9.0.1",
+    "@mui/x-tree-view": "~9.1.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/sdk-trace-base": "^2.7.1",
     "@react-spring/web": "~10.0.3",
     "@scure/base": "~2.2.0",
-    "@storybook/react-vite": "~10.3.6",
-    "@textea/json-viewer": "~4.0.1",
+    "@storybook/react-vite": "~10.4.0",
     "@types/react": "^19.2.14",
-    "@xylabs/pixel": "~5.1.2",
-    "@xylabs/react-async-effect": "~7.2.4",
-    "@xylabs/react-button": "~7.2.4",
-    "@xylabs/react-flexbox": "~7.2.4",
-    "@xylabs/react-hooks": "~7.2.4",
-    "@xylabs/react-identicon": "~7.2.4",
-    "@xylabs/react-link": "~7.2.4",
-    "@xylabs/react-promise": "~7.2.4",
-    "@xylabs/react-quick-tip-button": "~7.2.4",
-    "@xylabs/react-select": "~7.2.4",
-    "@xylabs/react-shared": "~7.2.4",
-    "@xylabs/react-theme": "~7.2.4",
-    "@xylabs/sdk-js": "^5.1.2",
-    "@xylabs/threads": "~5.1.2",
-    "@xylabs/toolchain": "~7.13.15",
-    "@xylabs/tsconfig": "^7.13.15",
-    "@xylabs/tsconfig-dom": "^7.13.15",
-    "@xylabs/tsconfig-react": "~7.13.15",
+    "@xylabs/pixel": "~5.1.3",
+    "@xylabs/react-async-effect": "~8.0.3",
+    "@xylabs/react-button": "~8.0.3",
+    "@xylabs/react-flexbox": "~8.0.3",
+    "@xylabs/react-hooks": "~8.0.3",
+    "@xylabs/react-identicon": "~8.0.3",
+    "@xylabs/react-link": "~8.0.3",
+    "@xylabs/react-promise": "~8.0.3",
+    "@xylabs/react-quick-tip-button": "~8.0.3",
+    "@xylabs/react-select": "~8.0.3",
+    "@xylabs/react-shared": "~8.0.3",
+    "@xylabs/react-theme": "~8.0.3",
+    "@xylabs/sdk-js": "^5.1.3",
+    "@xylabs/sdk-react": "~8.0.3",
+    "@xylabs/threads": "~5.1.3",
+    "@xylabs/toolchain": "~8.0.6",
+    "@xylabs/tsconfig": "^8.0.6",
+    "@xylabs/tsconfig-dom": "^8.0.6",
+    "@xylabs/tsconfig-react": "~8.0.6",
     "@xyo-network/account": "~5.6.2",
     "@xyo-network/account-model": "^5.6.3",
     "@xyo-network/boundwitness-builder": "^5.6.2",
@@ -91,7 +89,7 @@
     "@xyo-network/diviner-schema-stats": "~5.6.4",
     "@xyo-network/manifest-model": "~5.6.3",
     "@xyo-network/module-model": "^5.6.4",
-    "@xyo-network/node-core-types": "~4.2.1",
+    "@xyo-network/node-core-types": "~4.2.2",
     "@xyo-network/node-memory": "~5.6.4",
     "@xyo-network/node-model": "^5.6.4",
     "@xyo-network/payload-builder": "^5.6.2",
@@ -108,57 +106,59 @@
     "bowser": "^2.14.1",
     "buffer": "^6.0.3",
     "chalk": "^5.6.2",
+    "clsx": "~2.1.1",
     "debug": "~4.4.3",
-    "eslint": "^10.3.0",
+    "eslint": "^10.4.0",
     "ethers": "^6.16.0",
     "fast-deep-equal": "~3.1.3",
     "hash-wasm": "~4.12.0",
-    "js-cookie": "~3.0.5",
+    "js-cookie": "~3.0.6",
     "lru-cache": "^11.3.6",
     "md5": "~2.3.0",
-    "mixpanel-browser": "~2.78.0",
+    "mixpanel-browser": "~2.79.0",
+    "numeral": "~2.0.6",
     "observable-fns": "~0.6.1",
     "pako": "^2.1.0",
     "query-string": "~9.3.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-is": "^19.2.6",
-    "react-router-dom": "^7.15.0",
+    "react-router-dom": "^7.15.1",
     "recharts": "~3.8.1",
     "spark-md5": "~3.0.2",
-    "storybook": "^10.3.6",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.10",
+    "storybook": "^10.4.0",
+    "typescript": "^6.0.3",
+    "viem": "^2.49.3",
+    "vite": "^8.0.13",
     "wasm-feature-detect": "~1.8.0",
     "zod": "^4.4.3",
-    "@xyo-network/react-storybook": "~7.6.3"
+    "zustand": "~5.0.13",
+    "@xyo-network/react-storybook": "~8.0.1"
   },
   "peerDependencies": {
     "@bitauth/libauth": "~3.0",
-    "@emotion/react": "^11.14",
-    "@emotion/styled": "^11.14",
-    "@mui/icons-material": "^7.3",
-    "@mui/material": "^7.3",
-    "@mui/system": "^7.3",
-    "@mui/x-tree-view": "~8.27",
+    "@mui/icons-material": "^9.0",
+    "@mui/material": "^9.0",
+    "@mui/system": "^9.0",
+    "@mui/x-tree-view": "~9.1",
     "@opentelemetry/api": "^1.9",
     "@opentelemetry/sdk-trace-base": "^2.7",
     "@react-spring/web": "~10.0",
     "@scure/base": "~2.2",
-    "@textea/json-viewer": "~4.0",
     "@xylabs/pixel": "~5.1",
-    "@xylabs/react-async-effect": "~7.2",
-    "@xylabs/react-button": "~7.2",
-    "@xylabs/react-flexbox": "~7.2",
-    "@xylabs/react-hooks": "~7.2",
-    "@xylabs/react-identicon": "~7.2",
-    "@xylabs/react-link": "~7.2",
-    "@xylabs/react-promise": "~7.2",
-    "@xylabs/react-quick-tip-button": "~7.2",
-    "@xylabs/react-select": "~7.2",
-    "@xylabs/react-shared": "~7.2",
-    "@xylabs/react-theme": "~7.2",
+    "@xylabs/react-async-effect": "~8.0",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-hooks": "~8.0",
+    "@xylabs/react-identicon": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-promise": "~8.0",
+    "@xylabs/react-quick-tip-button": "~8.0",
+    "@xylabs/react-select": "~8.0",
+    "@xylabs/react-shared": "~8.0",
+    "@xylabs/react-theme": "~8.0",
     "@xylabs/sdk-js": "^5.1",
+    "@xylabs/sdk-react": "~8.0",
     "@xylabs/threads": "~5.1",
     "@xyo-network/account": "~5.6",
     "@xyo-network/account-model": "^5.6",
@@ -189,6 +189,7 @@
     "bowser": "^2.14",
     "buffer": "^6.0",
     "chalk": "^5.6",
+    "clsx": "~2.1",
     "debug": "~4.4",
     "ethers": "^6.16",
     "fast-deep-equal": "~3.1",
@@ -196,7 +197,8 @@
     "js-cookie": "~3.0",
     "lru-cache": "^11.3",
     "md5": "~2.3",
-    "mixpanel-browser": "~2.78",
+    "mixpanel-browser": "~2.79",
+    "numeral": "~2.0",
     "observable-fns": "~0.6",
     "pako": "^2.1",
     "query-string": "~9.3",
@@ -206,8 +208,10 @@
     "react-router-dom": "^7.15",
     "recharts": "~3.8",
     "spark-md5": "~3.0",
+    "viem": "^2.48",
     "wasm-feature-detect": "~1.8",
-    "zod": "^4.4"
+    "zod": "^4.4",
+    "zustand": "~5.0"
   },
   "publishConfig": {
     "access": "public"