@xyo-network/react-chain-boundwitness 1.0.1

package/dist/browser/index.mjs

@@ -0,0 +1,1246 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/_shared/Actions/BWActions.tsx
+import { DataObject as DataObjectIcon } from "@mui/icons-material";
+import { ellipsize as ellipsize2 } from "@xylabs/eth-address";
+import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { QuickTipButton as QuickTipButton3 } from "@xylabs/react-quick-tip-button";
+import { usePayloadHash } from "@xyo-network/react-shared";
+import React6 from "react";
+
+// src/components/_shared/Actions/previous-hash/DialogContent.tsx
+import { ContentCopy } from "@mui/icons-material";
+import { Alert, AlertTitle, Collapse, DialogContent } from "@mui/material";
+import { FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import { EllipsizeBox } from "@xyo-network/react-shared";
+import React, { useState } from "react";
+var PreviousHashDialogContent = /* @__PURE__ */ __name(({ boundwitness, ...props }) => {
+  const [copied, setCopied] = useState(false);
+  const onCopy = /* @__PURE__ */ __name(async () => {
+    await navigator.clipboard.writeText(boundwitness?.previous_hashes[0] ?? "");
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 5e3);
+  }, "onCopy");
+  return /* @__PURE__ */ React.createElement(DialogContent, props, /* @__PURE__ */ React.createElement(FlexGrowRow, {
+    columnGap: 2
+  }, /* @__PURE__ */ React.createElement(ContentCopy, {
+    sx: {
+      cursor: "pointer"
+    },
+    onClick: /* @__PURE__ */ __name(() => void onCopy(), "onClick")
+  }), /* @__PURE__ */ React.createElement(EllipsizeBox, {
+    flexGrow: "1",
+    typographyProps: {
+      variant: "body1"
+    }
+  }, boundwitness?.previous_hashes.join(","))), /* @__PURE__ */ React.createElement(FlexRow, null, /* @__PURE__ */ React.createElement(Collapse, {
+    in: copied,
+    unmountOnExit: true
+  }, /* @__PURE__ */ React.createElement(Alert, null, /* @__PURE__ */ React.createElement(AlertTitle, null, "Previous hash copied to clipboard")))));
+}, "PreviousHashDialogContent");
+
+// src/components/_shared/Actions/previous-hash/MenuItem.tsx
+import { Link } from "@mui/icons-material";
+import { ListItemIcon, MenuItem } from "@mui/material";
+import React3, { useState as useState2 } from "react";
+
+// src/components/_shared/Actions/_shared/MenuItemDialog.tsx
+import { Button, Dialog, DialogActions, DialogContent as DialogContent2, DialogTitle } from "@mui/material";
+import React2 from "react";
+var MenuItemDialog = /* @__PURE__ */ __name(({ children, dialogTitle, open, onClose, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Dialog, {
+    open,
+    onClose,
+    sx: {
+      "& .MuiPaper-root": {
+        minWidth: "75%"
+      }
+    },
+    ...props
+  }, /* @__PURE__ */ React2.createElement(DialogTitle, null, dialogTitle), /* @__PURE__ */ React2.createElement(DialogContent2, null, children), /* @__PURE__ */ React2.createElement(DialogActions, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "end"
+    }
+  }, /* @__PURE__ */ React2.createElement(Button, {
+    variant: "contained",
+    onClick: /* @__PURE__ */ __name((e) => onClose?.(e, "escapeKeyDown"), "onClick")
+  }, "Close")));
+}, "MenuItemDialog");
+
+// src/components/_shared/Actions/previous-hash/MenuItem.tsx
+var BWPreviousHashMenuItem = /* @__PURE__ */ __name(({ boundwitness, onClick, onDialogClose, ...props }) => {
+  const [open, setOpen] = useState2(false);
+  const onClose = /* @__PURE__ */ __name(() => {
+    onDialogClose?.();
+    setOpen(false);
+  }, "onClose");
+  const handleMenuClick = /* @__PURE__ */ __name((e) => {
+    onClick?.(e);
+    setOpen(true);
+  }, "handleMenuClick");
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(MenuItem, {
+    onClick: handleMenuClick,
+    ...props
+  }, /* @__PURE__ */ React3.createElement(ListItemIcon, null, /* @__PURE__ */ React3.createElement(Link, null)), "Previous Hash"), /* @__PURE__ */ React3.createElement(MenuItemDialog, {
+    open,
+    onClose,
+    dialogTitle: "Previous Hash"
+  }, /* @__PURE__ */ React3.createElement(PreviousHashDialogContent, {
+    boundwitness
+  })));
+}, "BWPreviousHashMenuItem");
+
+// src/components/_shared/Actions/previous-hash/QuickTipButton.tsx
+import { LinkRounded as LinkRoundedIcon } from "@mui/icons-material";
+import { ellipsize } from "@xylabs/eth-address";
+import { QuickTipButton } from "@xylabs/react-quick-tip-button";
+import React4 from "react";
+var BWPreviousHashQuickTipButton = /* @__PURE__ */ __name(({ boundwitness, ...props }) => {
+  const previousHash = boundwitness?.previous_hashes[0] ?? null;
+  const formattedPreviousHash = previousHash === null ? "No Previous Hash" : `Previous Hash - ${ellipsize(previousHash, 8)}`;
+  return /* @__PURE__ */ React4.createElement(QuickTipButton, {
+    Icon: LinkRoundedIcon,
+    disabled: previousHash === null,
+    hoverText: formattedPreviousHash,
+    disableDialog: previousHash === null,
+    dialogProps: {
+      fullWidth: true,
+      maxWidth: "md"
+    },
+    ...props
+  }, previousHash === null ? null : /* @__PURE__ */ React4.createElement(PreviousHashDialogContent, {
+    boundwitness
+  }));
+}, "BWPreviousHashQuickTipButton");
+
+// src/components/_shared/Actions/Verification.tsx
+import { CancelRounded as CancelRoundedIcon, CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon } from "@mui/icons-material";
+import { Typography } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { usePromise } from "@xylabs/react-promise";
+import { QuickTipButton as QuickTipButton2 } from "@xylabs/react-quick-tip-button";
+import { BoundWitnessValidator } from "@xyo-network/boundwitness-validator";
+import React5, { forwardRef } from "react";
+var InvalidIcon = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ React5.createElement(CancelRoundedIcon, {
+  color: "error",
+  ref,
+  ...props
+}));
+InvalidIcon.displayName = "InvalidIcon";
+var BWVerification = /* @__PURE__ */ __name(({ boundwitness, iconColors }) => {
+  const [errors = []] = usePromise(async () => await (boundwitness ? new BoundWitnessValidator(boundwitness) : void 0)?.validate(), [
+    boundwitness
+  ]);
+  return /* @__PURE__ */ React5.createElement(QuickTipButton2, {
+    Icon: errors.length > 0 ? /* @__PURE__ */ forwardRef((props, ref) => {
+      return /* @__PURE__ */ React5.createElement(InvalidIcon, {
+        color: iconColors ? "error" : void 0,
+        ref,
+        ...props
+      });
+    }) : /* @__PURE__ */ forwardRef((props, ref) => {
+      return /* @__PURE__ */ React5.createElement(CheckCircleOutlineRoundedIcon, {
+        color: iconColors ? "success" : void 0,
+        ref,
+        ...props
+      });
+    }),
+    hoverText: errors.length > 0 ? "Invalid Bound Witness" : "Valid"
+  }, errors.length > 0 ? /* @__PURE__ */ React5.createElement(FlexCol, {
+    flexWrap: "wrap",
+    alignItems: "start"
+  }, errors.map((error, index) => {
+    return /* @__PURE__ */ React5.createElement(Typography, {
+      key: index
+    }, error.toString());
+  })) : /* @__PURE__ */ React5.createElement(Typography, null, "No Errors"));
+}, "BWVerification");
+
+// src/components/_shared/Actions/BWActions.tsx
+var BWActions = /* @__PURE__ */ __name(({ additionalActions, boundwitness, hideJSONButton, hideValidation, hidePreviousHash, priorActions, validationIconColors, ...props }) => {
+  const hash = usePayloadHash(boundwitness);
+  return /* @__PURE__ */ React6.createElement(FlexRow2, props, priorActions, hidePreviousHash || boundwitness?.previous_hashes.length === 0 ? null : /* @__PURE__ */ React6.createElement(BWPreviousHashQuickTipButton, {
+    boundwitness
+  }), hideValidation ? null : /* @__PURE__ */ React6.createElement(BWVerification, {
+    iconColors: validationIconColors,
+    boundwitness
+  }), hideJSONButton ? null : /* @__PURE__ */ React6.createElement(QuickTipButton3, {
+    Icon: DataObjectIcon,
+    title: `JSON for ${ellipsize2(hash ?? "", 8)}`,
+    dialogProps: {
+      fullWidth: true,
+      maxWidth: "md"
+    }
+  }, /* @__PURE__ */ React6.createElement("pre", {
+    style: {
+      wordBreak: "break-all"
+    }
+  }, boundwitness ? JSON.stringify(boundwitness, null, 2) : null)), additionalActions);
+}, "BWActions");
+
+// src/components/_shared/Actions/json/MenuItem.tsx
+import { Code } from "@mui/icons-material";
+import { ListItemIcon as ListItemIcon2, MenuItem as MenuItem2 } from "@mui/material";
+import { ellipsize as ellipsize3 } from "@xylabs/eth-address";
+import { JsonViewerEx } from "@xyo-network/react-payload-raw-info";
+import { usePayloadHash as usePayloadHash2 } from "@xyo-network/react-shared";
+import React7, { useState as useState3 } from "react";
+var BWJsonMenuItem = /* @__PURE__ */ __name(({ boundwitness, onClick, onDialogClose, ...props }) => {
+  const hash = usePayloadHash2(boundwitness);
+  const [open, setOpen] = useState3(false);
+  const onClose = /* @__PURE__ */ __name(() => {
+    onDialogClose?.();
+    setOpen(false);
+  }, "onClose");
+  const handleMenuClick = /* @__PURE__ */ __name((e) => {
+    onClick?.(e);
+    setOpen(true);
+  }, "handleMenuClick");
+  const title = hash ? `JSON for ${ellipsize3(hash, 5)}` : "JSON";
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(MenuItem2, {
+    onClick: handleMenuClick,
+    ...props
+  }, /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(Code, null)), "JSON"), /* @__PURE__ */ React7.createElement(MenuItemDialog, {
+    open,
+    onClose,
+    dialogTitle: title
+  }, /* @__PURE__ */ React7.createElement(JsonViewerEx, {
+    value: boundwitness
+  })));
+}, "BWJsonMenuItem");
+
+// src/components/_shared/Heading/HashHeadingPaper/HashHeadingPaper.tsx
+import { useTheme } from "@mui/material";
+import { Identicon } from "@xylabs/react-identicon";
+import React10, { forwardRef as forwardRef3 } from "react";
+
+// src/components/_shared/Heading/HeadingPaper/HeadingPaper.tsx
+import { Paper, styled } from "@mui/material";
+import React9, { forwardRef as forwardRef2 } from "react";
+
+// src/components/_shared/Heading/Heading.tsx
+import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
+import { EllipsizeBox as EllipsizeBox2 } from "@xyo-network/react-shared";
+import React8, { useRef } from "react";
+var BWHeading = /* @__PURE__ */ __name(({ AdornmentEnd, AdornmentStart, heading, headingProps, IconComponent, size = "medium", fallbackText = "No heading Provided", ...props }) => {
+  const ellipsizeRef = useRef(null);
+  const headingText = heading ?? fallbackText;
+  const sizeParser = /* @__PURE__ */ __name((size2) => {
+    const map = {
+      large: "h4",
+      medium: "body1",
+      small: "caption"
+    };
+    const mappedSize = map[size2];
+    if (mappedSize === void 0) {
+      throw new Error(`${size2} is not a recognized TextSize`);
+    }
+    return mappedSize;
+  }, "sizeParser");
+  return /* @__PURE__ */ React8.createElement(FlexGrowRow2, {
+    columnGap: 2,
+    ...props
+  }, AdornmentStart, IconComponent, /* @__PURE__ */ React8.createElement(EllipsizeBox2, {
+    title: headingText,
+    width: "100%",
+    typographyProps: {
+      variant: sizeParser(size),
+      ...headingProps
+    },
+    ref: ellipsizeRef
+  }, headingText), AdornmentEnd);
+}, "BWHeading");
+
+// src/components/_shared/Heading/HeadingPaper/HeadingPaper.tsx
+var HeadingPaper = /* @__PURE__ */ forwardRef2((props, ref) => {
+  const { AdornmentStart, AdornmentEnd, paperProps } = props;
+  const { paperProps: excludedPaperProps, ...bwHeadingProps } = props;
+  return /* @__PURE__ */ React9.createElement(StyledHeadingPaper, {
+    hasAdornmentStart: !!AdornmentStart,
+    hasAdornmentEnd: !!AdornmentEnd,
+    elevation: 4,
+    ref,
+    ...paperProps
+  }, /* @__PURE__ */ React9.createElement(BWHeading, bwHeadingProps));
+});
+HeadingPaper.displayName = "HeadingPaper";
+var StyledHeadingPaper = styled(Paper, {
+  name: "StyledHeadingPaper",
+  shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
+    "hasAdornmentEnd",
+    "hasAdornmentStart",
+    "paperProps"
+  ].includes(prop), "shouldForwardProp")
+})(({ hasAdornmentEnd, hasAdornmentStart, theme }) => ({
+  alignItems: "center",
+  columnGap: theme.spacing(2),
+  display: "flex",
+  flexDirection: "row",
+  overflow: "hidden",
+  padding: theme.spacing(1),
+  ...hasAdornmentStart && {
+    paddingLeft: 0
+  },
+  ...hasAdornmentEnd && {
+    paddingRight: 0
+  },
+  ...(hasAdornmentStart || hasAdornmentEnd) && {
+    paddingBottom: 0,
+    paddingTop: 0
+  },
+  paddingRight: theme.spacing(1)
+}));
+
+// src/components/_shared/Heading/HashHeadingPaper/HashHeadingPaper.tsx
+var HashHeadingPaper = /* @__PURE__ */ forwardRef3(({ hash, identiconProps, ...props }, ref) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React10.createElement(HeadingPaper, {
+    heading: hash,
+    fallbackText: "No hash provided",
+    ref,
+    IconComponent: hash ? /* @__PURE__ */ React10.createElement(Identicon, {
+      size: Number.parseInt(theme.spacing(3).replace("px", "")),
+      p: 0.25,
+      value: hash,
+      sx: {
+        background: theme.palette.background.paper
+      },
+      ...identiconProps
+    }) : null,
+    sx: {
+      columnGap: 1
+    },
+    ...props
+  });
+});
+HashHeadingPaper.displayName = "HashHeadingPaper";
+
+// src/components/_shared/Payloads/PayloadsPropertyGroup.tsx
+import { PropertyGroup } from "@xyo-network/react-property";
+import React15 from "react";
+
+// src/components/_shared/Payloads/PayloadsTable.tsx
+import { BoundWitnessSchema } from "@xyo-network/boundwitness-model";
+import { usePayloadHash as usePayloadHash3 } from "@xyo-network/react-shared";
+import { TableEx } from "@xyo-network/react-table";
+import React14 from "react";
+
+// src/components/_shared/Payloads/payloads-table/TableBody.tsx
+import { TableBody, TableCell, TableRow } from "@mui/material";
+import { useEvent } from "@xyo-network/react-event";
+import { TableRowNoData } from "@xyo-network/react-payload-table";
+import { HashTableCell } from "@xyo-network/react-shared";
+import { useTableHeight } from "@xyo-network/react-table";
+import React11, { useLayoutEffect, useRef as useRef2 } from "react";
+var BoundWitnessPayloadTableBody = /* @__PURE__ */ __name(({ boundwitnessHash, eventNoun = "payload", payloadHashes, payloadSchemas, ...props }) => {
+  const { payloads, archive, maxSchemaDepth, onRowClick, exploreDomain, emptyRows, noResults, NoResultRowComponent, ...tableProps } = props;
+  const ref = useRef2(null);
+  const [tableRef, dispatch] = useEvent(void 0, ref);
+  const { setRowHeight } = useTableHeight();
+  const tableRowRef = useRef2(null);
+  const handleOnClick = /* @__PURE__ */ __name((hash) => {
+    dispatch(eventNoun, "click", hash);
+  }, "handleOnClick");
+  useLayoutEffect(() => {
+    if (tableRowRef.current) {
+      setRowHeight?.(tableRowRef.current.offsetHeight);
+    }
+  });
+  return /* @__PURE__ */ React11.createElement(TableBody, {
+    ref: tableRef,
+    ...tableProps
+  }, noResults && NoResultRowComponent ? /* @__PURE__ */ React11.createElement(NoResultRowComponent, null) : null, payloadHashes && payloadSchemas && payloadHashes.length > 0 && payloadHashes?.map((hash, index) => {
+    return /* @__PURE__ */ React11.createElement(TableRow, {
+      ref: tableRowRef,
+      key: boundwitnessHash + hash,
+      onClick: /* @__PURE__ */ __name(() => handleOnClick(hash), "onClick"),
+      sx: {
+        cursor: "pointer"
+      }
+    }, /* @__PURE__ */ React11.createElement(TableCell, {
+      title: payloadSchemas[index]
+    }, payloadSchemas[index]), /* @__PURE__ */ React11.createElement(HashTableCell, {
+      title: hash
+    }, hash));
+  }) || /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(TableRowNoData, {
+    additionalCells: 1
+  })));
+}, "BoundWitnessPayloadTableBody");
+
+// src/components/_shared/Payloads/payloads-table/TableBodyFiltered.tsx
+import React12, { useMemo, useState as useState4 } from "react";
+var BoundWitnessFilteredPayloadTableBody = /* @__PURE__ */ __name(({ bwFilterType = "equal", eventNoun = "payload", payloadHashes, payloadSchemas, schemaFilter, ...props }) => {
+  const [bwPayloadHashes, setBWPayloadHashes] = useState4();
+  const [bwPayloadSchemas, setBWPayloadSchemas] = useState4();
+  useMemo(() => {
+    if (!schemaFilter) {
+      setBWPayloadHashes(payloadHashes);
+      setBWPayloadSchemas(payloadSchemas);
+    }
+  }, [
+    payloadHashes,
+    payloadSchemas,
+    schemaFilter
+  ]);
+  useMemo(() => {
+    if (payloadSchemas && schemaFilter) {
+      const filteredSchemas = payloadSchemas.filter((schema) => {
+        return bwFilterType === "equal" ? schema === schemaFilter : schema !== schemaFilter;
+      });
+      setBWPayloadSchemas(filteredSchemas);
+    }
+  }, [
+    bwFilterType,
+    payloadSchemas,
+    schemaFilter
+  ]);
+  useMemo(() => {
+    if (payloadHashes && payloadSchemas && schemaFilter) {
+      const filteredHashes = payloadSchemas.reduce((acc, schema, index) => {
+        if (bwFilterType === "equal" ? schema === schemaFilter : schema !== schemaFilter) {
+          acc.push(payloadHashes[index]);
+        }
+        return acc;
+      }, []);
+      setBWPayloadHashes(filteredHashes);
+    }
+  }, [
+    bwFilterType,
+    payloadHashes,
+    payloadSchemas,
+    schemaFilter
+  ]);
+  return /* @__PURE__ */ React12.createElement(BoundWitnessPayloadTableBody, {
+    payloadHashes: bwPayloadHashes,
+    payloadSchemas: bwPayloadSchemas,
+    eventNoun,
+    ...props
+  });
+}, "BoundWitnessFilteredPayloadTableBody");
+
+// src/components/_shared/Payloads/payloads-table/TableHead.tsx
+import { styled as styled2, TableHead, TableRow as TableRow2, Typography as Typography2 } from "@mui/material";
+import { TableCellEx } from "@xyo-network/react-table";
+import React13 from "react";
+var BoundWitnessPayloadTableHead = /* @__PURE__ */ __name((props) => {
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    columns,
+    ...tableHeadProps
+  } = props;
+  return /* @__PURE__ */ React13.createElement(TableHead, tableHeadProps, /* @__PURE__ */ React13.createElement(TableRow2, null, /* @__PURE__ */ React13.createElement(TableCellEx, null, /* @__PURE__ */ React13.createElement(TableCellTypography, {
+    variant: "caption"
+  }, "Schema")), /* @__PURE__ */ React13.createElement(TableCellEx, null, /* @__PURE__ */ React13.createElement(TableCellTypography, {
+    variant: "caption"
+  }, "Hash"))));
+}, "BoundWitnessPayloadTableHead");
+var TableCellTypography = styled2(Typography2, {
+  name: "TableCellTypography"
+})(() => ({
+  fontWeight: "bold"
+}));
+
+// src/components/_shared/Payloads/PayloadsTable.tsx
+var BoundWitnessPayloadsTable = /* @__PURE__ */ __name(({ boundwitness, ...props }) => {
+  const hash = usePayloadHash3(boundwitness);
+  return /* @__PURE__ */ React14.createElement(BoundWitnessPayloadsTableInner, props, /* @__PURE__ */ React14.createElement(BoundWitnessFilteredPayloadTableBody, {
+    eventNoun: "payload",
+    schemaFilter: BoundWitnessSchema,
+    bwFilterType: "notEqual",
+    noResults: boundwitness?.payload_hashes.length === 0,
+    payloadHashes: boundwitness?.payload_hashes,
+    payloadSchemas: boundwitness?.payload_schemas,
+    boundwitnessHash: boundwitness ? hash : ""
+  }));
+}, "BoundWitnessPayloadsTable");
+var BoundWitnessPayloadsTableForBWs = /* @__PURE__ */ __name(({ boundwitness, ...props }) => {
+  const hash = usePayloadHash3(boundwitness);
+  return /* @__PURE__ */ React14.createElement(BoundWitnessPayloadsTableInner, props, /* @__PURE__ */ React14.createElement(BoundWitnessFilteredPayloadTableBody, {
+    eventNoun: "boundwitness",
+    schemaFilter: BoundWitnessSchema,
+    noResults: boundwitness?.payload_hashes.length === 0,
+    payloadHashes: boundwitness?.payload_hashes,
+    payloadSchemas: boundwitness?.payload_schemas,
+    boundwitnessHash: boundwitness ? hash : ""
+  }));
+}, "BoundWitnessPayloadsTableForBWs");
+var BoundWitnessPayloadsTableInner = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ React14.createElement(TableEx, props, /* @__PURE__ */ React14.createElement(BoundWitnessPayloadTableHead, null), children), "BoundWitnessPayloadsTableInner");
+
+// src/components/_shared/Payloads/PayloadsPropertyGroup.tsx
+var BoundWitnessPayloads = /* @__PURE__ */ __name(({ payload: boundwitness, payloadTableProps, ...props }) => {
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  return /* @__PURE__ */ React15.createElement(PropertyGroup, {
+    titleProps: {
+      elevation
+    },
+    title: "Payloads",
+    tip: "The hash and schema for each payload witnessed",
+    ...props
+  }, /* @__PURE__ */ React15.createElement(BoundWitnessPayloadsTable, {
+    boundwitness,
+    ...payloadTableProps
+  }));
+}, "BoundWitnessPayloads");
+
+// src/components/_shared/Signatures/SignatureDetails.tsx
+import { PropertyGroup as PropertyGroup2 } from "@xyo-network/react-property";
+import React18 from "react";
+
+// src/components/_shared/Signatures/SignatureTable.tsx
+import { TableBody as TableBody2, TableHead as TableHead2, TableRow as TableRow4, Typography as Typography4 } from "@mui/material";
+import { TableRowNoData as TableRowNoData2 } from "@xyo-network/react-payload-table";
+import { usePayloadHash as usePayloadHash4 } from "@xyo-network/react-shared";
+import { TableCellEx as TableCellEx2, TableEx as TableEx2 } from "@xyo-network/react-table";
+import React17 from "react";
+
+// src/components/_shared/Signatures/SignatureTableRow.tsx
+import { Link as Link2, TableCell as TableCell2, TableRow as TableRow3, Typography as Typography3 } from "@mui/material";
+import { toUint8Array } from "@xylabs/arraybuffer";
+import { ellipsize as ellipsize4 } from "@xylabs/eth-address";
+import { usePromise as usePromise2 } from "@xylabs/react-promise";
+import { BoundWitnessValidator as BoundWitnessValidator2 } from "@xyo-network/boundwitness-validator";
+import { useEvent as useEvent2 } from "@xyo-network/react-event";
+import { AddressTableCell } from "@xyo-network/react-shared";
+import React16 from "react";
+import { MdClear, MdDone } from "react-icons/md";
+var BoundWitnessSignatureTableRow = /* @__PURE__ */ __name(({ address, archive, clickableFields, hash, previousHash, signature, ...props }) => {
+  const [errors] = usePromise2(async () => hash && address ? await BoundWitnessValidator2.validateSignature(toUint8Array(hash).buffer, toUint8Array(address).buffer, toUint8Array(signature)?.buffer) : [], [
+    hash,
+    address,
+    signature
+  ]);
+  const [addressRef, addressDispatch] = useEvent2();
+  const [signatureRef, signatureDispatch] = useEvent2();
+  const formattedHash = /* @__PURE__ */ __name((hash2) => hash2 ? ellipsize4(hash2, 8) : "-", "formattedHash");
+  return /* @__PURE__ */ React16.createElement(TableRow3, props, /* @__PURE__ */ React16.createElement(AddressTableCell, {
+    ref: addressRef,
+    archive,
+    value: address,
+    onClick: /* @__PURE__ */ __name(() => addressDispatch("address", "click", address), "onClick"),
+    link: clickableFields?.includes("address")
+  }), /* @__PURE__ */ React16.createElement(TableCell2, {
+    sx: {
+      display: {
+        md: "table-cell",
+        xs: "none"
+      }
+    },
+    align: "center"
+  }, /* @__PURE__ */ React16.createElement(Typography3, {
+    variant: "body2",
+    fontFamily: "monospace"
+  }, formattedHash(previousHash))), /* @__PURE__ */ React16.createElement(TableCell2, {
+    sx: {
+      display: {
+        sm: "table-cell",
+        xs: "none"
+      }
+    },
+    align: "center"
+  }, /* @__PURE__ */ React16.createElement(Typography3, {
+    variant: "body2",
+    fontFamily: "monospace",
+    ref: signatureRef,
+    onClick: /* @__PURE__ */ __name(() => signatureDispatch("signature", "click", signature), "onClick")
+  }, clickableFields?.includes("signature") ? /* @__PURE__ */ React16.createElement(Link2, null, formattedHash(signature)) : formattedHash(signature))), /* @__PURE__ */ React16.createElement(TableCell2, {
+    key: "valid",
+    align: "center"
+  }, errors === void 0 ? /* @__PURE__ */ React16.createElement(MdDone, {
+    fontSize: 18,
+    color: "gray"
+  }) : errors?.length === 0 ? /* @__PURE__ */ React16.createElement(MdDone, {
+    fontSize: 18,
+    color: "green"
+  }) : /* @__PURE__ */ React16.createElement(MdClear, {
+    color: "red",
+    fontSize: 18
+  })));
+}, "BoundWitnessSignatureTableRow");
+
+// src/components/_shared/Signatures/SignatureTable.tsx
+var signatureDataFromBoundWitness = /* @__PURE__ */ __name((boundWitness) => {
+  const result = [];
+  for (let i = 0; i < boundWitness.addresses.length; i++) {
+    result.push({
+      address: boundWitness.addresses[i],
+      previous_hash: boundWitness.previous_hashes?.[i],
+      signature: boundWitness.$signatures?.[i] ?? []
+    });
+  }
+  return result;
+}, "signatureDataFromBoundWitness");
+var BoundWitnessSignatureTable = /* @__PURE__ */ __name(({ block, ...props }) => {
+  const signatureData = block ? signatureDataFromBoundWitness(block) : [];
+  const hash = usePayloadHash4(block);
+  return /* @__PURE__ */ React17.createElement(TableEx2, props, /* @__PURE__ */ React17.createElement(TableHead2, null, /* @__PURE__ */ React17.createElement(TableRow4, null, /* @__PURE__ */ React17.createElement(TableCellEx2, {
+    align: "left"
+  }, /* @__PURE__ */ React17.createElement(Typography4, {
+    variant: "caption"
+  }, /* @__PURE__ */ React17.createElement("strong", null, "Address"))), /* @__PURE__ */ React17.createElement(TableCellEx2, {
+    sx: {
+      display: {
+        md: "table-cell",
+        xs: "none"
+      }
+    },
+    align: "center",
+    width: "10px"
+  }, /* @__PURE__ */ React17.createElement(Typography4, {
+    variant: "caption"
+  }, /* @__PURE__ */ React17.createElement("strong", null, "Previous"))), /* @__PURE__ */ React17.createElement(TableCellEx2, {
+    sx: {
+      display: {
+        sm: "table-cell",
+        xs: "none"
+      }
+    },
+    align: "center",
+    width: "10px"
+  }, /* @__PURE__ */ React17.createElement(Typography4, {
+    variant: "caption"
+  }, /* @__PURE__ */ React17.createElement("strong", null, "Signature"))), /* @__PURE__ */ React17.createElement(TableCellEx2, {
+    align: "center",
+    width: "10px"
+  }, /* @__PURE__ */ React17.createElement(Typography4, {
+    variant: "caption"
+  }, /* @__PURE__ */ React17.createElement("strong", null, "Valid"))))), /* @__PURE__ */ React17.createElement(TableBody2, null, !signatureData || signatureData.length === 0 ? /* @__PURE__ */ React17.createElement(TableRowNoData2, {
+    additionalCells: 3
+  }) : null, signatureData.map((data, index) => {
+    return /* @__PURE__ */ React17.createElement(BoundWitnessSignatureTableRow, {
+      key: `${data.signature}-${data.previous_hash}-${index}`,
+      address: data.address,
+      previousHash: data.previous_hash,
+      hash,
+      signature: data.signature,
+      clickableFields: [
+        "address"
+      ]
+    });
+  })));
+}, "BoundWitnessSignatureTable");
+
+// src/components/_shared/Signatures/SignatureDetails.tsx
+var BoundWitnessSignatureDetails = /* @__PURE__ */ __name(({ block, ...props }) => {
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  return /* @__PURE__ */ React18.createElement(PropertyGroup2, {
+    titleProps: {
+      elevation
+    },
+    title: "Signatures",
+    tip: "The list of signatures for this block",
+    ...props
+  }, /* @__PURE__ */ React18.createElement(BoundWitnessSignatureTable, {
+    block
+  }));
+}, "BoundWitnessSignatureDetails");
+
+// src/components/Card/Card.tsx
+import { Card } from "@mui/material";
+import React24 from "react";
+
+// src/components/Card/CardContent/CardContent.tsx
+import React22, { forwardRef as forwardRef4 } from "react";
+
+// src/components/Card/CardContent/AddressAvatarGroup.tsx
+import { Avatar, AvatarGroup } from "@mui/material";
+import { Identicon as Identicon2 } from "@xylabs/react-identicon";
+import React19, { useRef as useRef3 } from "react";
+var AddressAvatarGroup = /* @__PURE__ */ __name(({ addresses, maxAvatars = 4, ...props }) => {
+  const ref = useRef3(null);
+  const size = ref.current ? ref.current.clientWidth * 0.65 : void 0;
+  return /* @__PURE__ */ React19.createElement(AvatarGroup, {
+    max: maxAvatars,
+    total: addresses?.length,
+    ...props
+  }, addresses?.map((address, index) => /* @__PURE__ */ React19.createElement(Avatar, {
+    key: index + address,
+    title: address,
+    ref,
+    sx: {
+      bgcolor: "background.paper"
+    }
+  }, /* @__PURE__ */ React19.createElement(Identicon2, {
+    value: address,
+    position: "absolute",
+    p: 0.25,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    size
+  }))));
+}, "AddressAvatarGroup");
+
+// src/components/Card/CardContent/layout/CardColumnsFlex.tsx
+import { styled as styled3 } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+var CardColumnsFlex = styled3(FlexCol2, {
+  name: "CardColumnsFlex"
+})(({ theme }) => ({
+  ["@media only screen and (min-width: 333px)"]: {
+    minWidth: "50%"
+  },
+  minWidth: "100%",
+  rowGap: theme.spacing(1)
+}));
+
+// src/components/Card/CardContent/layout/CardColumnTitle.tsx
+import { styled as styled4, Typography as Typography5 } from "@mui/material";
+import React20 from "react";
+var CardColumnTitle = styled4(Typography5, {
+  name: "CardColumnTitle"
+})(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: 500
+}));
+var CardColumnTitleH2 = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React20.createElement(CardColumnTitle, props), "CardColumnTitleH2");
+
+// src/components/Card/CardContent/layout/CardContentFlex.tsx
+import { alpha, CardContent, styled as styled5 } from "@mui/material";
+var CardContentFlex = styled5(CardContent, {
+  name: "CardContentFlex",
+  shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "active", "shouldForwardProp")
+})(({ theme, active }) => ({
+  [":last-child"]: {
+    paddingBottom: theme.spacing(1)
+  },
+  ...active && {
+    background: alpha(theme.palette.secondary.dark, 0.33)
+  },
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  rowGap: theme.spacing(1)
+}));
+
+// src/components/Card/CardContent/SchemaAvatarGroup.tsx
+import { Avatar as Avatar2, AvatarGroup as AvatarGroup2 } from "@mui/material";
+import { BoundWitnessSchema as BoundWitnessSchema2 } from "@xyo-network/boundwitness-model";
+import { usePayloadRenderPluginResolver } from "@xyo-network/react-payload-plugin-resolver";
+import React21, { useCallback } from "react";
+import { VscSymbolMethod, VscSymbolNamespace } from "react-icons/vsc";
+var SchemaAvatarGroup = /* @__PURE__ */ __name(({ schemas, maxAvatars = 4, ...props }) => {
+  const { resolver } = usePayloadRenderPluginResolver();
+  const resolveSchemaToIcon = useCallback((schema, index) => {
+    const SchemaAvatar = resolver?.resolve({
+      schema
+    })?.components.avatar.image;
+    return SchemaAvatar ? /* @__PURE__ */ React21.createElement(SchemaAvatar, {
+      key: index + schema
+    }) : /* @__PURE__ */ React21.createElement(Avatar2, {
+      key: index + schema,
+      title: schema,
+      sx: {
+        bgcolor: "primary.main",
+        color: "primary.contrastText"
+      }
+    }, schema === BoundWitnessSchema2 ? /* @__PURE__ */ React21.createElement(VscSymbolMethod, null) : /* @__PURE__ */ React21.createElement(VscSymbolNamespace, null));
+  }, [
+    resolver
+  ]);
+  return /* @__PURE__ */ React21.createElement(AvatarGroup2, {
+    max: maxAvatars,
+    total: schemas?.length,
+    ...props
+  }, schemas?.map((schema, index) => resolveSchemaToIcon(schema, index)));
+}, "SchemaAvatarGroup");
+
+// src/components/Card/CardContent/CardContent.tsx
+var BoundWitnessCardContent = /* @__PURE__ */ forwardRef4(({ payload, active, ...props }, ref) => {
+  const boundwitness = payload;
+  return /* @__PURE__ */ React22.createElement(CardContentFlex, {
+    ref,
+    active,
+    ...props
+  }, /* @__PURE__ */ React22.createElement(CardColumnsFlex, null, /* @__PURE__ */ React22.createElement(CardColumnTitleH2, null, "Payloads"), /* @__PURE__ */ React22.createElement(SchemaAvatarGroup, {
+    schemas: boundwitness?.payload_schemas
+  })), /* @__PURE__ */ React22.createElement(CardColumnsFlex, null, /* @__PURE__ */ React22.createElement(CardColumnTitleH2, null, "Signers"), /* @__PURE__ */ React22.createElement(AddressAvatarGroup, {
+    addresses: boundwitness?.addresses
+  })));
+});
+BoundWitnessCardContent.displayName = "BoundWitnessCardContent";
+
+// src/components/Card/CardHeader/CardHeader.tsx
+import { CardHeader, styled as styled6, useTheme as useTheme2 } from "@mui/material";
+import { Identicon as Identicon3 } from "@xylabs/react-identicon";
+import { usePayloadHash as usePayloadHash5 } from "@xyo-network/react-shared";
+import React23, { forwardRef as forwardRef5 } from "react";
+var BoundWitnessCardHeader = /* @__PURE__ */ forwardRef5(({ active = false, activeBgColor = true, additionalActions, hideJSONButton, hidePreviousHash, hideValidation, payload, ...props }, ref) => {
+  const boundwitness = payload;
+  const theme = useTheme2();
+  const hash = usePayloadHash5(boundwitness);
+  return /* @__PURE__ */ React23.createElement(CardHeaderHash, {
+    ref,
+    active,
+    activeBgColor,
+    title: /* @__PURE__ */ React23.createElement(BWHeading, {
+      heading: hash,
+      IconComponent: /* @__PURE__ */ React23.createElement(Identicon3, {
+        size: Number.parseInt(theme.spacing(2.5).replace("px", "")),
+        p: 0.5,
+        value: hash,
+        sx: {
+          background: theme.palette.background.paper
+        }
+      })
+    }),
+    action: /* @__PURE__ */ React23.createElement(BWActions, {
+      hideJSONButton,
+      hideValidation,
+      hidePreviousHash,
+      boundwitness,
+      additionalActions
+    }),
+    ...props
+  });
+});
+BoundWitnessCardHeader.displayName = "BoundWitnessCardHeader";
+var CardHeaderHash = styled6(CardHeader, {
+  name: "CardHeaderHash",
+  shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
+    "active",
+    "activeBgColor"
+  ].includes(prop), "shouldForwardProp")
+})(({ theme, active, activeBgColor }) => ({
+  "& .MuiCardHeader-action": {
+    marginBottom: 0,
+    marginTop: 0
+  },
+  "& .MuiCardHeader-content": {
+    overflow: "visible"
+  },
+  "&.MuiCardHeader-root": {
+    ...active && activeBgColor && {
+      backgroundColor: theme.palette.info
+    },
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    paddingBottom: theme.spacing(1),
+    paddingTop: theme.spacing(1)
+  },
+  "padding": `${theme.spacing(0.5)} ${theme.spacing(2)}`
+}));
+
+// src/components/Card/Card.tsx
+var BoundWitnessRendererCard = /* @__PURE__ */ __name(({ payload, active, ...props }) => {
+  const boundwitness = payload;
+  return /* @__PURE__ */ React24.createElement(Card, props, /* @__PURE__ */ React24.createElement(BoundWitnessCardHeader, {
+    payload: boundwitness,
+    active,
+    hideJSONButton: true,
+    hidePreviousHash: true,
+    hideValidation: true
+  }), /* @__PURE__ */ React24.createElement(BoundWitnessCardContent, {
+    payload: boundwitness,
+    active
+  }));
+}, "BoundWitnessRendererCard");
+
+// src/components/Details/Box/DetailsBox.tsx
+import { Divider } from "@mui/material";
+import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
+import { BoundWitnessSchema as BoundWitnessSchema3 } from "@xyo-network/boundwitness-model";
+import { usePayloadHash as usePayloadHash6 } from "@xyo-network/react-shared";
+import { TableHeightProvider } from "@xyo-network/react-table";
+import React25, { useMemo as useMemo2 } from "react";
+import { FaSignature } from "react-icons/fa";
+import { VscSymbolMethod as VscSymbolMethod2, VscSymbolNamespace as VscSymbolNamespace2 } from "react-icons/vsc";
+var BoundWitnessDetailsBox = /* @__PURE__ */ __name(({ visibleRows, ...props }) => {
+  return /* @__PURE__ */ React25.createElement(TableHeightProvider, {
+    defaultVisibleRows: visibleRows,
+    additionalRows: 1
+  }, /* @__PURE__ */ React25.createElement(BoundWitnessDetailsBoxInner, props));
+}, "BoundWitnessDetailsBox");
+BoundWitnessDetailsBox.displayName = "BoundWitnessDetailsBox";
+var BoundWitnessDetailsBoxInner = /* @__PURE__ */ __name(({ payload, ...props }) => {
+  const boundWitness = payload;
+  const partialBoundWitness = boundWitness;
+  const hash = usePayloadHash6(payload);
+  const hasBWPayloads = useMemo2(() => partialBoundWitness ? partialBoundWitness.payload_schemas?.includes(BoundWitnessSchema3) : false, [
+    partialBoundWitness
+  ]);
+  return /* @__PURE__ */ React25.createElement(FlexCol3, {
+    alignItems: "stretch",
+    rowGap: 4,
+    ...props
+  }, /* @__PURE__ */ React25.createElement(HashHeadingPaper, {
+    hash,
+    paperProps: {
+      sx: {
+        p: 2
+      }
+    },
+    AdornmentEnd: /* @__PURE__ */ React25.createElement(BWActions, {
+      boundwitness: boundWitness
+    }),
+    identiconProps: {
+      p: 0.75,
+      size: 24
+    }
+  }), /* @__PURE__ */ React25.createElement(Divider, {
+    flexItem: true
+  }), /* @__PURE__ */ React25.createElement(FlexCol3, {
+    alignItems: "stretch",
+    rowGap: 1,
+    mb: 1
+  }, /* @__PURE__ */ React25.createElement(HeadingPaper, {
+    IconComponent: /* @__PURE__ */ React25.createElement(VscSymbolNamespace2, null),
+    heading: "Payloads"
+  }), /* @__PURE__ */ React25.createElement(BoundWitnessPayloadsTable, {
+    boundwitness: boundWitness
+  })), hasBWPayloads ? /* @__PURE__ */ React25.createElement(FlexCol3, {
+    alignItems: "stretch",
+    rowGap: 1,
+    mb: 1
+  }, /* @__PURE__ */ React25.createElement(HeadingPaper, {
+    IconComponent: /* @__PURE__ */ React25.createElement(VscSymbolMethod2, null),
+    heading: "Bound Witnesses"
+  }), /* @__PURE__ */ React25.createElement(BoundWitnessPayloadsTableForBWs, {
+    boundwitness: boundWitness
+  })) : null, /* @__PURE__ */ React25.createElement(FlexCol3, {
+    alignItems: "stretch",
+    rowGap: 1,
+    mb: 1
+  }, /* @__PURE__ */ React25.createElement(HeadingPaper, {
+    IconComponent: /* @__PURE__ */ React25.createElement(FaSignature, null),
+    heading: "Signatures"
+  }), /* @__PURE__ */ React25.createElement(BoundWitnessSignatureTable, {
+    block: boundWitness
+  })));
+}, "BoundWitnessDetailsBoxInner");
+BoundWitnessDetailsBoxInner.displayName = "BoundWitnessDetailsBoxInner";
+
+// src/components/Details/Card/DetailsCard.tsx
+import { TableHeightProvider as TableHeightProvider2 } from "@xyo-network/react-table";
+import React30, { forwardRef as forwardRef9 } from "react";
+
+// src/components/Details/Card/DetailsCardInner.tsx
+import { ExpandLessRounded as ExpandLessRoundedIcon, ExpandMoreRounded as ExpandMoreRoundedIcon } from "@mui/icons-material";
+import { Card as Card2, Divider as Divider2, IconButton } from "@mui/material";
+import { useResetState } from "@xylabs/react-hooks";
+import React29, { forwardRef as forwardRef8 } from "react";
+
+// src/components/Details/Card/DetailsCardContent.tsx
+import { Collapse as Collapse2 } from "@mui/material";
+import { FlexGrowCol, FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
+import { CardContentEx } from "@xyo-network/react-card";
+import { useTableHeight as useTableHeight2 } from "@xyo-network/react-table";
+import React28, { forwardRef as forwardRef7, useState as useState5 } from "react";
+
+// src/components/Details/Card/Navigation/BottomNavigation.tsx
+import { BottomNavigation, BottomNavigationAction, styled as styled7 } from "@mui/material";
+import { BoundWitnessSchema as BoundWitnessSchema4 } from "@xyo-network/boundwitness-model";
+import React26, { forwardRef as forwardRef6 } from "react";
+import { FaSignature as FaSignature2 } from "react-icons/fa";
+import { VscSymbolMethod as VscSymbolMethod3, VscSymbolNamespace as VscSymbolNamespace3 } from "react-icons/vsc";
+var BoundWitnessBottomNavigation = /* @__PURE__ */ forwardRef6(({ activeTab = 0, setActiveTab, boundWitness, ...props }, ref) => {
+  const payloadCount = boundWitness?.payload_schemas.filter((schema) => schema !== BoundWitnessSchema4).length ?? 0;
+  const boundWitnessCount = boundWitness?.payload_schemas.filter((schema) => schema === BoundWitnessSchema4).length ?? 0;
+  const signers = boundWitness?.addresses.length ?? 0;
+  return /* @__PURE__ */ React26.createElement(StyledBottomNavigation, {
+    showLabels: true,
+    value: activeTab,
+    onChange: /* @__PURE__ */ __name((_event, newValue) => {
+      setActiveTab?.(newValue);
+    }, "onChange"),
+    ref,
+    ...props
+  }, /* @__PURE__ */ React26.createElement(BottomNavigationAction, {
+    label: `Payloads - ${payloadCount}`,
+    icon: /* @__PURE__ */ React26.createElement(VscSymbolNamespace3, null)
+  }), /* @__PURE__ */ React26.createElement(BottomNavigationAction, {
+    label: `Bound Witnesses - ${boundWitnessCount}`,
+    icon: /* @__PURE__ */ React26.createElement(VscSymbolMethod3, null)
+  }), /* @__PURE__ */ React26.createElement(BottomNavigationAction, {
+    label: `Signatures - ${signers}`,
+    icon: /* @__PURE__ */ React26.createElement(FaSignature2, null)
+  }));
+});
+BoundWitnessBottomNavigation.displayName = "BoundWitnessBottomNavigation";
+var StyledBottomNavigation = styled7(BottomNavigation, {
+  name: "StyledBottomNavigation"
+})(() => ({
+  background: "inherit"
+}));
+
+// src/components/Details/Card/Navigation/NavigationTabs.tsx
+import { Paper as Paper2, Tab, Tabs, useTheme as useTheme3 } from "@mui/material";
+import { BoundWitnessSchema as BoundWitnessSchema5 } from "@xyo-network/boundwitness-model";
+import React27 from "react";
+import { FaSignature as FaSignature3 } from "react-icons/fa";
+import { VscSymbolMethod as VscSymbolMethod4, VscSymbolNamespace as VscSymbolNamespace4 } from "react-icons/vsc";
+var BWNavigationTabs = /* @__PURE__ */ __name(({ setValue, value, boundWitness, ...props }) => {
+  const payloadCount = boundWitness?.payload_schemas.filter((schema) => schema !== BoundWitnessSchema5).length ?? 0;
+  const boundWitnessCount = boundWitness?.payload_schemas.filter((schema) => schema === BoundWitnessSchema5).length ?? 0;
+  const signers = boundWitness?.addresses.length ?? 0;
+  const theme = useTheme3();
+  const handleChange = /* @__PURE__ */ __name((_event, newValue) => {
+    setValue?.(newValue);
+  }, "handleChange");
+  const tabProps = {
+    iconPosition: "start",
+    sx: {
+      boxShadow: "none",
+      fontSize: theme.spacing(1.75),
+      justifyContent: "start",
+      lineHeight: 3,
+      minHeight: 0,
+      overflow: "hidden"
+    }
+  };
+  return /* @__PURE__ */ React27.createElement(Tabs, {
+    orientation: "vertical",
+    value,
+    onChange: handleChange,
+    "aria-label": "BW Vertical tabs",
+    ...props
+  }, /* @__PURE__ */ React27.createElement(Tab, {
+    component: Paper2,
+    elevation: value === 0 ? 3 : 0,
+    ...tabProps,
+    label: `Payloads - ${payloadCount}`,
+    icon: /* @__PURE__ */ React27.createElement(VscSymbolNamespace4, null)
+  }), /* @__PURE__ */ React27.createElement(Tab, {
+    component: Paper2,
+    elevation: value === 1 ? 3 : 0,
+    ...tabProps,
+    label: `Bound Witnesses - ${boundWitnessCount}`,
+    icon: /* @__PURE__ */ React27.createElement(VscSymbolMethod4, null)
+  }), /* @__PURE__ */ React27.createElement(Tab, {
+    component: Paper2,
+    elevation: value === 2 ? 3 : 0,
+    ...tabProps,
+    label: `Signatures - ${signers}`,
+    icon: /* @__PURE__ */ React27.createElement(FaSignature3, null)
+  }));
+}, "BWNavigationTabs");
+
+// src/components/Details/Card/DetailsCardContent.tsx
+var DetailsCardContent = /* @__PURE__ */ forwardRef7(({ collapsed, boundwitness, setCollapsed, ...props }, ref) => {
+  const { height } = useTableHeight2();
+  const [activeTab, setActiveTab] = useState5(0);
+  return /* @__PURE__ */ React28.createElement(CardContentEx, {
+    removePadding: true
+  }, /* @__PURE__ */ React28.createElement(FlexGrowCol, {
+    alignItems: "stretch",
+    height: height !== void 0 && collapsed ? height : "auto",
+    justifyContent: "start",
+    ref
+  }, /* @__PURE__ */ React28.createElement(Collapse2, {
+    in: collapsed
+  }, /* @__PURE__ */ React28.createElement(FlexRow3, {
+    alignItems: "stretch",
+    height: height !== void 0 && collapsed ? height : "auto",
+    ...props
+  }, /* @__PURE__ */ React28.createElement(BWNavigationTabs, {
+    value: activeTab,
+    setValue: setActiveTab,
+    boundWitness: boundwitness
+  }), /* @__PURE__ */ React28.createElement(FlexGrowCol, {
+    justifyContent: "start",
+    overflow: "scroll",
+    sx: {
+      borderLeft: "1px solid",
+      borderLeftColor: "divider"
+    }
+  }, activeTab === 0 ? /* @__PURE__ */ React28.createElement(BoundWitnessPayloadsTable, {
+    boundwitness,
+    variant: "scrollable"
+  }) : null, activeTab === 1 ? /* @__PURE__ */ React28.createElement(BoundWitnessPayloadsTableForBWs, {
+    boundwitness,
+    variant: "scrollable"
+  }) : null, activeTab === 2 ? /* @__PURE__ */ React28.createElement(BoundWitnessSignatureTable, {
+    block: boundwitness,
+    variant: "scrollable"
+  }) : null)))), /* @__PURE__ */ React28.createElement(Collapse2, {
+    in: !collapsed,
+    unmountOnExit: true
+  }, /* @__PURE__ */ React28.createElement(BoundWitnessBottomNavigation, {
+    onClick: /* @__PURE__ */ __name(() => setCollapsed?.(true), "onClick"),
+    activeTab,
+    setActiveTab,
+    boundWitness: boundwitness
+  })));
+});
+DetailsCardContent.displayName = "DetailsCardContent";
+
+// src/components/Details/Card/DetailsCardInner.tsx
+var BoundWitnessDetailsCardInner = /* @__PURE__ */ forwardRef8(({ payload, active, ...props }, ref) => {
+  const boundwitness = payload;
+  const [collapsed, setCollapsed] = useResetState(!active);
+  return /* @__PURE__ */ React29.createElement(Card2, {
+    ref,
+    ...props
+  }, /* @__PURE__ */ React29.createElement(BoundWitnessCardHeader, {
+    payload,
+    active,
+    activeBgColor: false,
+    hideJSONButton: false,
+    hideValidation: false,
+    hidePreviousHash: false,
+    additionalActions: /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Divider2, {
+      flexItem: true,
+      orientation: "vertical",
+      sx: {
+        ml: 2,
+        mr: 1
+      }
+    }), /* @__PURE__ */ React29.createElement(IconButton, {
+      onClick: /* @__PURE__ */ __name(() => setCollapsed(!collapsed), "onClick")
+    }, collapsed ? /* @__PURE__ */ React29.createElement(ExpandMoreRoundedIcon, null) : /* @__PURE__ */ React29.createElement(ExpandLessRoundedIcon, null))),
+    sx: {
+      columnGap: 2
+    }
+  }), /* @__PURE__ */ React29.createElement(DetailsCardContent, {
+    boundwitness,
+    collapsed,
+    setCollapsed,
+    ref
+  }));
+});
+BoundWitnessDetailsCardInner.displayName = "BoundWitnessDetailsCardInner";
+
+// src/components/Details/Card/DetailsCard.tsx
+var BoundWitnessDetailsCard = /* @__PURE__ */ forwardRef9(({ visibleRows, ...props }, ref) => {
+  return /* @__PURE__ */ React30.createElement(TableHeightProvider2, {
+    defaultVisibleRows: visibleRows,
+    additionalRows: 1
+  }, /* @__PURE__ */ React30.createElement(BoundWitnessDetailsCardInner, {
+    ref,
+    ...props
+  }));
+});
+BoundWitnessDetailsCard.displayName = "BoundWitnessDetailsCard";
+
+// src/components/Details/Details.tsx
+import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
+import { PayloadDataDetails, PayloadJsonDetails } from "@xyo-network/react-payload-details";
+import React32, { forwardRef as forwardRef10 } from "react";
+
+// src/components/Details/ValidationDetails.tsx
+import { Typography as Typography6 } from "@mui/material";
+import { FlexCol as FlexCol4 } from "@xylabs/react-flexbox";
+import { usePromise as usePromise3 } from "@xylabs/react-promise";
+import { BoundWitnessValidator as BoundWitnessValidator3 } from "@xyo-network/boundwitness-validator";
+import { Property, PropertyGroup as PropertyGroup3 } from "@xyo-network/react-property";
+import React31 from "react";
+var BoundWitnessValidationDetails = /* @__PURE__ */ __name(({ value, ...props }) => {
+  const [errors = []] = usePromise3(async () => await (value ? new BoundWitnessValidator3(value).validate() : void 0), [
+    value
+  ]);
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  return /* @__PURE__ */ React31.createElement(PropertyGroup3, {
+    titleProps: {
+      elevation
+    },
+    title: "Validation",
+    tip: "The results from validating the block",
+    ...props
+  }, /* @__PURE__ */ React31.createElement(Property, {
+    titleProps: {
+      elevation
+    },
+    flexGrow: 1,
+    title: "Valid",
+    value: errors.length === 0 ? "True" : "False",
+    tip: errors.length > 0 ? /* @__PURE__ */ React31.createElement(FlexCol4, {
+      flexWrap: "wrap"
+    }, errors.map((error, index) => {
+      return /* @__PURE__ */ React31.createElement(Typography6, {
+        key: index
+      }, error.toString());
+    })) : /* @__PURE__ */ React31.createElement(Typography6, null, "No Errors")
+  }));
+}, "BoundWitnessValidationDetails");
+
+// src/components/Details/Details.tsx
+var BoundWitnessDetails = /* @__PURE__ */ forwardRef10(({ paper, payload, children, ...props }, ref) => {
+  const boundwitness = payload;
+  return /* @__PURE__ */ React32.createElement(FlexCol5, {
+    justifyContent: "flex-start",
+    alignItems: "stretch",
+    gap: 1,
+    ref,
+    ...props
+  }, /* @__PURE__ */ React32.createElement(PayloadDataDetails, {
+    paper,
+    payload: boundwitness,
+    size: "large",
+    badge: true
+  }), /* @__PURE__ */ React32.createElement(BoundWitnessPayloads, {
+    paper,
+    payload: boundwitness
+  }), /* @__PURE__ */ React32.createElement(BoundWitnessSignatureDetails, {
+    paper,
+    block: boundwitness
+  }), /* @__PURE__ */ React32.createElement(BoundWitnessValidationDetails, {
+    paper,
+    value: boundwitness
+  }), /* @__PURE__ */ React32.createElement(PayloadJsonDetails, {
+    paper,
+    payload: boundwitness
+  }), children);
+});
+BoundWitnessDetails.displayName = "BoundWitnessDetails [XYO]";
+
+// src/Plugin.ts
+import { createPayloadRenderPlugin } from "@xyo-network/react-payload-plugin";
+var BoundWitnessRenderPlugin = {
+  ...createPayloadRenderPlugin({
+    canRender: /* @__PURE__ */ __name((payload) => payload?.schema === "network.xyo.boundwitness", "canRender"),
+    components: {
+      box: {
+        detailsBox: BoundWitnessDetailsBox
+      },
+      card: {
+        content: BoundWitnessCardContent,
+        header: BoundWitnessCardHeader
+      }
+    },
+    name: "BoundWitness"
+  })
+};
+export {
+  BWActions,
+  BWHeading,
+  BWJsonMenuItem,
+  BWPreviousHashMenuItem,
+  BWPreviousHashQuickTipButton,
+  BWVerification,
+  BoundWitnessCardContent,
+  BoundWitnessCardHeader,
+  BoundWitnessDetails,
+  BoundWitnessDetailsBox,
+  BoundWitnessDetailsCard,
+  BoundWitnessPayloads,
+  BoundWitnessPayloadsTable,
+  BoundWitnessPayloadsTableForBWs,
+  BoundWitnessPayloadsTableInner,
+  BoundWitnessRenderPlugin,
+  BoundWitnessRendererCard,
+  BoundWitnessSignatureDetails,
+  BoundWitnessSignatureTable,
+  BoundWitnessValidationDetails,
+  CardColumnTitle,
+  CardColumnTitleH2,
+  CardColumnsFlex,
+  CardContentFlex,
+  HashHeadingPaper,
+  HeadingPaper,
+  PreviousHashDialogContent
+};
+//# sourceMappingURL=index.mjs.map