@xyo-network/react-chain-boundwitness 1.3.24 → 1.3.25

package/dist/browser/index.mjs

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-// src/components/BlockBoundWitnessDetails.tsx
+// src/components/block/BlockBoundWitnessDetails.tsx
 import { Divider } from "@mui/material";
 import { filterAs } from "@xylabs/array";
 import { ErrorRender } from "@xylabs/react-error";
@@ -18,6 +18,20 @@ import { FaSignature } from "react-icons/fa";
 import { GrTransaction } from "react-icons/gr";
 import { VscSymbolMethod as VscSymbolMethod2, VscSymbolNamespace } from "react-icons/vsc";
 
+// src/lib/formatPayloadsForTable.ts
+var formatPayloadsForTable = /* @__PURE__ */ __name((pairs) => {
+  let hashes = [];
+  let schemas = [];
+  for (const [bw, hash] of pairs ?? []) {
+    hashes.push(hash);
+    schemas.push(bw?.schema ?? "");
+  }
+  return {
+    hashes,
+    schemas
+  };
+}, "formatPayloadsForTable");
+
 // src/components/BwPayloadTable.tsx
 import { FlexCol } from "@xylabs/react-flexbox";
 import { BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper } from "@xyo-network/react-boundwitness-plugin";
@@ -40,25 +54,13 @@ var BWPayloadTableFlexbox = /* @__PURE__ */ __name(({ IconComponent, eventNoun,
   })));
 }, "BWPayloadTableFlexbox");
 
-// src/components/BlockBoundWitnessDetails.tsx
-var formatBwsForTable = /* @__PURE__ */ __name((pairs) => {
-  let hashes = [];
-  let schemas = [];
-  for (const [bw, hash] of pairs ?? []) {
-    hashes.push(hash);
-    schemas.push(bw?.schema ?? "");
-  }
-  return {
-    hashes,
-    schemas
-  };
-}, "formatBwsForTable");
+// src/components/block/BlockBoundWitnessDetails.tsx
 var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ block, paper, children, ...props }) => {
   const boundWitness = block?.[0];
   const payloads = block?.[1];
   const hash = usePayloadHash(boundWitness);
   const [transactions, txFromBlockError] = useTxsFromBlock(block);
-  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatBwsForTable(transactions ?? []), [
+  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatPayloadsForTable(transactions ?? []), [
     transactions
   ]);
   const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {
@@ -67,7 +69,7 @@ var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ block, paper, children,
   }, [
     payloads
   ]);
-  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatBwsForTable(nonTxBoundWitnesses ?? []), [
+  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatPayloadsForTable(nonTxBoundWitnesses ?? []), [
     nonTxBoundWitnesses
   ]);
   const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0;

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/BlockBoundWitnessDetails.tsx","../../src/components/BwPayloadTable.tsx"],"sourcesContent":["import { Divider } from '@mui/material'\nimport { filterAs } from '@xylabs/array'\nimport type { Hash } from '@xylabs/hex'\nimport { ErrorRender } from '@xylabs/react-error'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport type { BoundWitness } from '@xyo-network/boundwitness-model'\nimport { isBoundWitness } from '@xyo-network/boundwitness-model'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport {\n  BoundWitnessPayloadsTable,\n  BoundWitnessSignatureTable,\n  BWActions,\n  HashHeadingPaper,\n  HeadingPaper,\n} from '@xyo-network/react-boundwitness-plugin'\nimport { useTxsFromBlock } from '@xyo-network/react-chain-blockchain'\nimport { useEvent } from '@xyo-network/react-event'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport { isTransactionBoundWitness, type SignedHydratedBlock } from '@xyo-network/xl1-protocol'\nimport React, { useMemo } from 'react'\nimport { FaSignature } from 'react-icons/fa'\nimport { GrTransaction } from 'react-icons/gr'\nimport { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'\n\nimport type { TransactionBoundWitnessEvents } from '../types/index.ts'\nimport { BWPayloadTableFlexbox } from './BwPayloadTable.tsx'\n\nconst formatBwsForTable = (pairs: [BoundWitness, Hash][]) => {\n  let hashes: Hash[] = []\n  let schemas: string[] = []\n  for (const [bw, hash] of pairs ?? []) {\n      hashes.push(hash)\n      schemas.push(bw?.schema ?? '')\n  }\n  return { hashes, schemas }\n}\n\nexport interface BoundWitnessDetailsProps extends FlexBoxProps {\n  block?: SignedHydratedBlock\n}\n\nexport const BlockBoundWitnessDetails = ({\n  block, paper, children, ...props\n}: BoundWitnessDetailsProps) => {\n  const boundWitness = block?.[0]\n  const payloads = block?.[1]\n\n  const hash = usePayloadHash(boundWitness)\n\n  const [transactions, txFromBlockError] = useTxsFromBlock(block)\n\n  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatBwsForTable(transactions ?? []), [transactions])\n\n  const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {\n    const bws = filterAs(payloads ?? [], payload =>\n      (!isTransactionBoundWitness(payload) && isBoundWitness(payload)) ? payload : undefined)\n    return await PayloadBuilder.hashPairs(bws)\n    }, [payloads])\n\n  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatBwsForTable(nonTxBoundWitnesses ?? []), [nonTxBoundWitnesses])\n  const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0\n\n  return (\n    <FlexCol alignItems=\"stretch\" rowGap={4} {...props}>\n      <ErrorRender error={txFromBlockError ?? bwsFromBlockError} scope=\"BlockBoundWitnessDetails.tsx\" />\n      <HashHeadingPaper\n        hash={hash}\n        paperProps={{ sx: { p: 2 } }}\n        AdornmentEnd={<BWActions boundwitness={boundWitness} />}\n        identiconProps={{ p: 0.75, size: 24 }}\n      />\n      <Divider flexItem />\n      {(transactions?.length ?? 0) > 0 && (\n        <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>\n          IconComponent={<GrTransaction />}\n          eventNoun=\"transaction\"\n          hashes={txHashes}\n          headingTitle=\"Transactions\"\n          schemas={txSchemas}\n          sx={{ mb: 1 }}\n        />\n      )}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<VscSymbolNamespace />} heading=\"Payloads\" />\n        <BoundWitnessPayloadsTable boundwitness={boundWitness} />\n      </FlexCol>\n      {hasNonTxBoundWitnesses\n        ? (\n          <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>\n            IconComponent={<VscSymbolMethod />}\n            eventNoun=\"boundwitness\"\n            hashes={nonTxBwHashes}\n            headingTitle=\"Bound Witnesses\"\n            schemas={nonTxBwSchemas}\n            sx={{ mb: 1 }}\n          />\n          )\n        : null}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<FaSignature />} heading=\"Signatures\" />\n        <BoundWitnessSignatureTable block={boundWitness} />\n      </FlexCol>\n    </FlexCol>\n  )\n}\n","import type { Hash } from '@xylabs/hex'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport {\n BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper,\n} from '@xyo-network/react-boundwitness-plugin'\nimport type { EventNoun, ExtendEventNoun } from '@xyo-network/react-event'\nimport { TableEx } from '@xyo-network/react-table'\nimport React from 'react'\nimport { VscSymbolMethod } from 'react-icons/vsc'\n\nexport interface BWPayloadTableFlexboxProps<TNoun extends ExtendEventNoun = EventNoun> extends FlexBoxProps {\n  IconComponent?: React.ReactNode\n  eventNoun?: TNoun\n  hashes?: Hash[]\n  headingTitle?: string\n  schemas?: string[]\n}\n\nexport const BWPayloadTableFlexbox = <TNoun extends ExtendEventNoun = EventNoun>({\n IconComponent,\n eventNoun,\n hashes,\n schemas,\n headingTitle,\n ...props\n}: BWPayloadTableFlexboxProps<TNoun>) => {\n  const resolvedIconComponent = IconComponent ?? <VscSymbolMethod />\n  return (\n    <FlexCol alignItems=\"stretch\" rowGap={1} {...props}>\n      <HeadingPaper IconComponent={resolvedIconComponent} heading={headingTitle} />\n      <TableEx>\n        <BoundWitnessPayloadTableHead />\n        <BoundWitnessPayloadTableBody<TNoun> payloadHashes={hashes} payloadSchemas={schemas} eventNoun={eventNoun} />\n      </TableEx>\n    </FlexCol>\n  )\n}\n"],"mappings":"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","names":["Divider","filterAs","ErrorRender","FlexCol","usePromise","isBoundWitness","PayloadBuilder","BoundWitnessPayloadsTable","BoundWitnessSignatureTable","BWActions","HashHeadingPaper","HeadingPaper","useTxsFromBlock","usePayloadHash","isTransactionBoundWitness","React","useMemo","FaSignature","GrTransaction","VscSymbolMethod","VscSymbolNamespace","FlexCol","BoundWitnessPayloadTableBody","BoundWitnessPayloadTableHead","HeadingPaper","TableEx","React","VscSymbolMethod","BWPayloadTableFlexbox","IconComponent","eventNoun","hashes","schemas","headingTitle","props","resolvedIconComponent","VscSymbolMethod","FlexCol","alignItems","rowGap","HeadingPaper","heading","TableEx","BoundWitnessPayloadTableHead","BoundWitnessPayloadTableBody","payloadHashes","payloadSchemas","formatBwsForTable","pairs","hashes","schemas","bw","hash","push","schema","BlockBoundWitnessDetails","block","paper","children","props","boundWitness","payloads","usePayloadHash","transactions","txFromBlockError","useTxsFromBlock","txHashes","txSchemas","useMemo","nonTxBoundWitnesses","bwsFromBlockError","usePromise","bws","filterAs","payload","isTransactionBoundWitness","isBoundWitness","undefined","PayloadBuilder","hashPairs","nonTxBwHashes","nonTxBwSchemas","hasNonTxBoundWitnesses","length","React","FlexCol","alignItems","rowGap","ErrorRender","error","scope","HashHeadingPaper","paperProps","sx","p","AdornmentEnd","BWActions","boundwitness","identiconProps","size","Divider","flexItem","BWPayloadTableFlexbox","IconComponent","GrTransaction","eventNoun","headingTitle","mb","HeadingPaper","VscSymbolNamespace","heading","BoundWitnessPayloadsTable","VscSymbolMethod","FaSignature","BoundWitnessSignatureTable"]}
+{"version":3,"sources":["../../src/components/block/BlockBoundWitnessDetails.tsx","../../src/lib/formatPayloadsForTable.ts","../../src/components/BwPayloadTable.tsx"],"sourcesContent":["import { Divider } from '@mui/material'\nimport { filterAs } from '@xylabs/array'\nimport { ErrorRender } from '@xylabs/react-error'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { isBoundWitness } from '@xyo-network/boundwitness-model'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport {\n  BoundWitnessPayloadsTable,\n  BoundWitnessSignatureTable,\n  BWActions,\n  HashHeadingPaper,\n  HeadingPaper,\n} from '@xyo-network/react-boundwitness-plugin'\nimport { useTxsFromBlock } from '@xyo-network/react-chain-blockchain'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport { isTransactionBoundWitness, type SignedHydratedBlock } from '@xyo-network/xl1-protocol'\nimport React, { useMemo } from 'react'\nimport { FaSignature } from 'react-icons/fa'\nimport { GrTransaction } from 'react-icons/gr'\nimport { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'\n\nimport { formatPayloadsForTable } from '../../lib/index.ts'\nimport type { TransactionBoundWitnessEvents } from '../../types/index.ts'\nimport { BWPayloadTableFlexbox } from '../BwPayloadTable.tsx'\n\nexport interface BoundWitnessDetailsProps extends FlexBoxProps {\n  block?: SignedHydratedBlock\n}\n\nexport const BlockBoundWitnessDetails = ({\n  block, paper, children, ...props\n}: BoundWitnessDetailsProps) => {\n  const boundWitness = block?.[0]\n  const payloads = block?.[1]\n\n  const hash = usePayloadHash(boundWitness)\n\n  const [transactions, txFromBlockError] = useTxsFromBlock(block)\n\n  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatPayloadsForTable(transactions ?? []), [transactions])\n\n  const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {\n    const bws = filterAs(payloads ?? [], payload =>\n      (!isTransactionBoundWitness(payload) && isBoundWitness(payload)) ? payload : undefined)\n    return await PayloadBuilder.hashPairs(bws)\n  }, [payloads])\n\n  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatPayloadsForTable(nonTxBoundWitnesses ?? []), [nonTxBoundWitnesses])\n  const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0\n\n  return (\n    <FlexCol alignItems=\"stretch\" rowGap={4} {...props}>\n      <ErrorRender error={txFromBlockError ?? bwsFromBlockError} scope=\"BlockBoundWitnessDetails.tsx\" />\n      <HashHeadingPaper\n        hash={hash}\n        paperProps={{ sx: { p: 2 } }}\n        AdornmentEnd={<BWActions boundwitness={boundWitness} />}\n        identiconProps={{ p: 0.75, size: 24 }}\n      />\n      <Divider flexItem />\n      {(transactions?.length ?? 0) > 0 && (\n        <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>\n          IconComponent={<GrTransaction />}\n          eventNoun=\"transaction\"\n          hashes={txHashes}\n          headingTitle=\"Transactions\"\n          schemas={txSchemas}\n          sx={{ mb: 1 }}\n        />\n      )}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<VscSymbolNamespace />} heading=\"Payloads\" />\n        <BoundWitnessPayloadsTable boundwitness={boundWitness} />\n      </FlexCol>\n      {hasNonTxBoundWitnesses\n        ? (\n            <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>\n              IconComponent={<VscSymbolMethod />}\n              eventNoun=\"boundwitness\"\n              hashes={nonTxBwHashes}\n              headingTitle=\"Bound Witnesses\"\n              schemas={nonTxBwSchemas}\n              sx={{ mb: 1 }}\n            />\n          )\n        : null}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<FaSignature />} heading=\"Signatures\" />\n        <BoundWitnessSignatureTable block={boundWitness} />\n      </FlexCol>\n    </FlexCol>\n  )\n}\n","import type { Hash } from '@xylabs/hex'\nimport type { Payload } from '@xyo-network/payload-model'\n\nexport const formatPayloadsForTable = (pairs: [Payload, Hash][]) => {\n  let hashes: Hash[] = []\n  let schemas: string[] = []\n  for (const [bw, hash] of pairs ?? []) {\n    hashes.push(hash)\n    schemas.push(bw?.schema ?? '')\n  }\n  return { hashes, schemas }\n}\n","import type { Hash } from '@xylabs/hex'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport {\n  BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper,\n} from '@xyo-network/react-boundwitness-plugin'\nimport type { EventNoun, ExtendEventNoun } from '@xyo-network/react-event'\nimport { TableEx } from '@xyo-network/react-table'\nimport React from 'react'\nimport { VscSymbolMethod } from 'react-icons/vsc'\n\nexport interface BWPayloadTableFlexboxProps<TNoun extends ExtendEventNoun = EventNoun> extends FlexBoxProps {\n  IconComponent?: React.ReactNode\n  eventNoun?: TNoun\n  hashes?: Hash[]\n  headingTitle?: string\n  schemas?: string[]\n}\n\nexport const BWPayloadTableFlexbox = <TNoun extends ExtendEventNoun = EventNoun>({\n  IconComponent,\n  eventNoun,\n  hashes,\n  schemas,\n  headingTitle,\n  ...props\n}: BWPayloadTableFlexboxProps<TNoun>) => {\n  const resolvedIconComponent = IconComponent ?? <VscSymbolMethod />\n  return (\n    <FlexCol alignItems=\"stretch\" rowGap={1} {...props}>\n      <HeadingPaper IconComponent={resolvedIconComponent} heading={headingTitle} />\n      <TableEx>\n        <BoundWitnessPayloadTableHead />\n        <BoundWitnessPayloadTableBody<TNoun> payloadHashes={hashes} payloadSchemas={schemas} eventNoun={eventNoun} />\n      </TableEx>\n    </FlexCol>\n  )\n}\n"],"mappings":"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","names":["Divider","filterAs","ErrorRender","FlexCol","usePromise","isBoundWitness","PayloadBuilder","BoundWitnessPayloadsTable","BoundWitnessSignatureTable","BWActions","HashHeadingPaper","HeadingPaper","useTxsFromBlock","usePayloadHash","isTransactionBoundWitness","React","useMemo","FaSignature","GrTransaction","VscSymbolMethod","VscSymbolNamespace","formatPayloadsForTable","pairs","hashes","schemas","bw","hash","push","schema","FlexCol","BoundWitnessPayloadTableBody","BoundWitnessPayloadTableHead","HeadingPaper","TableEx","React","VscSymbolMethod","BWPayloadTableFlexbox","IconComponent","eventNoun","hashes","schemas","headingTitle","props","resolvedIconComponent","VscSymbolMethod","FlexCol","alignItems","rowGap","HeadingPaper","heading","TableEx","BoundWitnessPayloadTableHead","BoundWitnessPayloadTableBody","payloadHashes","payloadSchemas","BlockBoundWitnessDetails","block","paper","children","props","boundWitness","payloads","hash","usePayloadHash","transactions","txFromBlockError","useTxsFromBlock","hashes","txHashes","schemas","txSchemas","useMemo","formatPayloadsForTable","nonTxBoundWitnesses","bwsFromBlockError","usePromise","bws","filterAs","payload","isTransactionBoundWitness","isBoundWitness","undefined","PayloadBuilder","hashPairs","nonTxBwHashes","nonTxBwSchemas","hasNonTxBoundWitnesses","length","React","FlexCol","alignItems","rowGap","ErrorRender","error","scope","HashHeadingPaper","paperProps","sx","p","AdornmentEnd","BWActions","boundwitness","identiconProps","size","Divider","flexItem","BWPayloadTableFlexbox","IconComponent","GrTransaction","eventNoun","headingTitle","mb","HeadingPaper","VscSymbolNamespace","heading","BoundWitnessPayloadsTable","VscSymbolMethod","FaSignature","BoundWitnessSignatureTable"]}

package/dist/types/components/block/BlockBoundWitnessDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockBoundWitnessDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/block/BlockBoundWitnessDetails.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAczD,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAU/F,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,KAAK,CAAC,EAAE,mBAAmB,CAAA;CAC5B;AAED,eAAO,MAAM,wBAAwB,GAAI,sCAEtC,wBAAwB,4CA6D1B,CAAA"}

package/dist/types/components/block/index.d.ts

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

package/dist/types/components/block/index.d.ts.map

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

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

@@ -1,3 +1,3 @@
-export * from './BlockBoundWitnessDetails.tsx';
+export * from './block/index.ts';
 export * from './BwPayloadTable.tsx';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA"}

package/dist/types/components/transactions/TransactionDetails.d.ts

@@ -0,0 +1,8 @@
+import { type FlexBoxProps } from '@xylabs/react-flexbox';
+import type { SignedHydratedTransaction } from '@xyo-network/xl1-protocol';
+import React from 'react';
+export interface TransactionBoundWitnessDetailsProps extends FlexBoxProps {
+    transaction?: SignedHydratedTransaction;
+}
+export declare const TransactionBoundWitnessDetails: React.FC<TransactionBoundWitnessDetailsProps>;
+//# sourceMappingURL=TransactionDetails.d.ts.map

package/dist/types/components/transactions/TransactionDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/transactions/TransactionDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAQlE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,WAAW,mCAAoC,SAAQ,YAAY;IACvE,WAAW,CAAC,EAAE,yBAAyB,CAAA;CACxC;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CA6CxF,CAAA"}

package/dist/types/components/transactions/card/Card.d.ts

@@ -0,0 +1,8 @@
+import type { CardProps } from '@mui/material';
+import type { SignedHydratedTransactionInstance } from '@xyo-network/xl1-protocol-sdk';
+import React from 'react';
+export interface TransactionBoundWitnessCardProps extends CardProps {
+    wrapper?: SignedHydratedTransactionInstance;
+}
+export declare const TransactionBoundWitnessCard: React.FC<TransactionBoundWitnessCardProps>;
+//# sourceMappingURL=Card.d.ts.map

package/dist/types/components/transactions/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/transactions/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAM9C,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,+BAA+B,CAAA;AACtF,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,MAAM,WAAW,gCAAiC,SAAQ,SAAS;IACjE,OAAO,CAAC,EAAE,iCAAiC,CAAA;CAC5C;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAsGlF,CAAA"}

package/dist/types/components/transactions/card/DetailsStack.d.ts

@@ -0,0 +1,9 @@
+import type { StackProps } from '@mui/material';
+import type { ComponentType, SVGAttributes } from 'react';
+import React from 'react';
+export interface DetailsStackProps extends StackProps {
+    IconComponent?: ComponentType<SVGAttributes<SVGElement>>;
+    heading?: string;
+}
+export declare const DetailsStack: React.FC<DetailsStackProps>;
+//# sourceMappingURL=DetailsStack.d.ts.map

package/dist/types/components/transactions/card/DetailsStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/transactions/card/DetailsStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAI/C,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,aAAa,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAA;IACxD,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAcpD,CAAA"}

package/dist/types/components/transactions/card/index.d.ts

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

package/dist/types/components/transactions/card/index.d.ts.map

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

package/dist/types/lib/formatPayloadsForTable.d.ts

@@ -0,0 +1,7 @@
+import type { Hash } from '@xylabs/hex';
+import type { Payload } from '@xyo-network/payload-model';
+export declare const formatPayloadsForTable: (pairs: [Payload, Hash][]) => {
+    hashes: Lowercase<string>[];
+    schemas: string[];
+};
+//# sourceMappingURL=formatPayloadsForTable.d.ts.map

package/dist/types/lib/formatPayloadsForTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatPayloadsForTable.d.ts","sourceRoot":"","sources":["../../../src/lib/formatPayloadsForTable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEzD,eAAO,MAAM,sBAAsB,GAAI,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE;;;CAQ9D,CAAA"}

package/dist/types/lib/index.d.ts

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

package/dist/types/lib/index.d.ts.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-boundwitness",
-  "version": "1.3.24",
+  "version": "1.3.25",
   "description": "XYO Layer One React SDK BoundWitness",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -35,17 +35,21 @@
   "types": "dist/types/index.d.ts",
   "dependencies": {
     "@xylabs/array": "^4.9.18",
+    "@xylabs/hex": "^4.9.18",
     "@xylabs/react-error": "^6.3.1",
     "@xylabs/react-flexbox": "^6.3.1",
     "@xylabs/react-promise": "^6.3.1",
-    "@xyo-network/boundwitness-model": "^3.15.8",
-    "@xyo-network/payload-builder": "^3.15.8",
+    "@xylabs/typeof": "^4.9.18",
+    "@xyo-network/boundwitness-model": "^3.15.10",
+    "@xyo-network/chain-utils": "^1.3.25",
+    "@xyo-network/chain-wrappers": "^1.3.25",
+    "@xyo-network/payload-builder": "^3.15.10",
     "@xyo-network/react-boundwitness-plugin": "^5.3.3",
-    "@xyo-network/react-chain-blockchain": "^1.3.24",
+    "@xyo-network/react-chain-blockchain": "^1.3.25",
     "@xyo-network/react-event": "^5.3.3",
     "@xyo-network/react-shared": "^5.3.3",
     "@xyo-network/react-table": "^5.3.3",
-    "@xyo-network/xl1-protocol": "^1.3.15",
+    "@xyo-network/xl1-protocol": "^1.3.17",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {
@@ -55,7 +59,7 @@
     "@mui/material": "^7.1.0",
     "@xylabs/ts-scripts-yarn3": "^6.5.6",
     "@xylabs/tsconfig-react": "^6.5.6",
-    "@xyo-network/react-chain-shared": "^1.3.24",
+    "@xyo-network/react-chain-shared": "^1.3.25",
     "knip": "^5.56.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/src/components/BwPayloadTable.tsx

@@ -2,7 +2,7 @@ import type { Hash } from '@xylabs/hex'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexCol } from '@xylabs/react-flexbox'
 import {
- BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper,
+  BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper,
 } from '@xyo-network/react-boundwitness-plugin'
 import type { EventNoun, ExtendEventNoun } from '@xyo-network/react-event'
 import { TableEx } from '@xyo-network/react-table'
@@ -18,12 +18,12 @@ export interface BWPayloadTableFlexboxProps<TNoun extends ExtendEventNoun = Even
 }
 
 export const BWPayloadTableFlexbox = <TNoun extends ExtendEventNoun = EventNoun>({
- IconComponent,
- eventNoun,
- hashes,
- schemas,
- headingTitle,
- ...props
+  IconComponent,
+  eventNoun,
+  hashes,
+  schemas,
+  headingTitle,
+  ...props
 }: BWPayloadTableFlexboxProps<TNoun>) => {
   const resolvedIconComponent = IconComponent ?? <VscSymbolMethod />
   return (

package/src/components/{BlockBoundWitnessDetails.tsx → block/BlockBoundWitnessDetails.tsx}

@@ -1,11 +1,9 @@
 import { Divider } from '@mui/material'
 import { filterAs } from '@xylabs/array'
-import type { Hash } from '@xylabs/hex'
 import { ErrorRender } from '@xylabs/react-error'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { usePromise } from '@xylabs/react-promise'
-import type { BoundWitness } from '@xyo-network/boundwitness-model'
 import { isBoundWitness } from '@xyo-network/boundwitness-model'
 import { PayloadBuilder } from '@xyo-network/payload-builder'
 import {
@@ -16,7 +14,6 @@ import {
   HeadingPaper,
 } from '@xyo-network/react-boundwitness-plugin'
 import { useTxsFromBlock } from '@xyo-network/react-chain-blockchain'
-import { useEvent } from '@xyo-network/react-event'
 import { usePayloadHash } from '@xyo-network/react-shared'
 import { isTransactionBoundWitness, type SignedHydratedBlock } from '@xyo-network/xl1-protocol'
 import React, { useMemo } from 'react'
@@ -24,18 +21,9 @@ import { FaSignature } from 'react-icons/fa'
 import { GrTransaction } from 'react-icons/gr'
 import { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'
 
-import type { TransactionBoundWitnessEvents } from '../types/index.ts'
-import { BWPayloadTableFlexbox } from './BwPayloadTable.tsx'
-
-const formatBwsForTable = (pairs: [BoundWitness, Hash][]) => {
-  let hashes: Hash[] = []
-  let schemas: string[] = []
-  for (const [bw, hash] of pairs ?? []) {
-      hashes.push(hash)
-      schemas.push(bw?.schema ?? '')
-  }
-  return { hashes, schemas }
-}
+import { formatPayloadsForTable } from '../../lib/index.ts'
+import type { TransactionBoundWitnessEvents } from '../../types/index.ts'
+import { BWPayloadTableFlexbox } from '../BwPayloadTable.tsx'
 
 export interface BoundWitnessDetailsProps extends FlexBoxProps {
   block?: SignedHydratedBlock
@@ -51,15 +39,15 @@ export const BlockBoundWitnessDetails = ({
 
   const [transactions, txFromBlockError] = useTxsFromBlock(block)
 
-  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatBwsForTable(transactions ?? []), [transactions])
+  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatPayloadsForTable(transactions ?? []), [transactions])
 
   const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {
     const bws = filterAs(payloads ?? [], payload =>
       (!isTransactionBoundWitness(payload) && isBoundWitness(payload)) ? payload : undefined)
     return await PayloadBuilder.hashPairs(bws)
-    }, [payloads])
+  }, [payloads])
 
-  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatBwsForTable(nonTxBoundWitnesses ?? []), [nonTxBoundWitnesses])
+  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatPayloadsForTable(nonTxBoundWitnesses ?? []), [nonTxBoundWitnesses])
   const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0
 
   return (
@@ -88,14 +76,14 @@ export const BlockBoundWitnessDetails = ({
       </FlexCol>
       {hasNonTxBoundWitnesses
         ? (
-          <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>
-            IconComponent={<VscSymbolMethod />}
-            eventNoun="boundwitness"
-            hashes={nonTxBwHashes}
-            headingTitle="Bound Witnesses"
-            schemas={nonTxBwSchemas}
-            sx={{ mb: 1 }}
-          />
+            <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>
+              IconComponent={<VscSymbolMethod />}
+              eventNoun="boundwitness"
+              hashes={nonTxBwHashes}
+              headingTitle="Bound Witnesses"
+              schemas={nonTxBwSchemas}
+              sx={{ mb: 1 }}
+            />
           )
         : null}
       <FlexCol alignItems="stretch" rowGap={1} mb={1}>

package/src/components/block/index.ts

@@ -0,0 +1 @@
+export * from './BlockBoundWitnessDetails.tsx'

package/src/components/index.ts

@@ -1,2 +1,2 @@
-export * from './BlockBoundWitnessDetails.tsx'
+export * from './block/index.ts'
 export * from './BwPayloadTable.tsx'

package/src/components/transactions/TransactionDetails.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { buildRandomTransaction } from '@xyo-network/chain-protocol'
+import React from 'react'
+
+import { TransactionBoundWitnessDetails } from './TransactionDetails.tsx'
+
+export default {
+  title: 'BoundWitness/Transaction/Details/Flexbox',
+  component: TransactionBoundWitnessDetails,
+} as Meta
+
+const tx = await buildRandomTransaction('0x123')
+
+const Template: StoryFn<typeof TransactionBoundWitnessDetails> = args => <TransactionBoundWitnessDetails {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+WithData.args = { transaction: tx }
+
+export { Default, WithData }

package/src/components/transactions/TransactionDetails.tsx

@@ -0,0 +1,69 @@
+import { Divider } from '@mui/material'
+import { ErrorRender } from '@xylabs/react-error'
+import { type FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { usePromise } from '@xylabs/react-promise'
+import { isDefined } from '@xylabs/typeof'
+import { SignedHydratedTransactionWrapper } from '@xyo-network/chain-wrappers'
+import { PayloadBuilder } from '@xyo-network/payload-builder'
+import {
+  BoundWitnessSignatureTable, BWActions, HashHeadingPaper, HeadingPaper,
+} from '@xyo-network/react-boundwitness-plugin'
+import type { SignedHydratedTransaction } from '@xyo-network/xl1-protocol'
+import React from 'react'
+import { FaSignature } from 'react-icons/fa'
+import { VscSymbolMethod } from 'react-icons/vsc'
+
+import { formatPayloadsForTable } from '../../lib/index.ts'
+import { BWPayloadTableFlexbox } from '../BwPayloadTable.tsx'
+import { TransactionBoundWitnessCard } from './card/index.ts'
+
+export interface TransactionBoundWitnessDetailsProps extends FlexBoxProps {
+  transaction?: SignedHydratedTransaction
+}
+
+export const TransactionBoundWitnessDetails: React.FC<TransactionBoundWitnessDetailsProps> = ({ transaction, ...props }) => {
+  const [wrapper, wrapperError] = usePromise(async () => {
+    if (transaction) {
+      return await SignedHydratedTransactionWrapper.parse(transaction)
+    }
+  }, [transaction])
+
+  const [elevatedPayloadSets, elevatedPayloadSetsError] = usePromise(async () => {
+    if (isDefined(wrapper)) {
+      const elevatedPayloads = wrapper.elevatedPayloads
+      const pairs = await PayloadBuilder.hashPairs(elevatedPayloads)
+      return formatPayloadsForTable(pairs)
+    } else {
+      return { hashes: [], schemas: [] }
+    }
+  }, [wrapper])
+
+  const { hashes: elevatedPayloadHashes, schemas: elevatedPayloadSchemas } = elevatedPayloadSets ?? {}
+
+  return (
+    <FlexCol alignItems="stretch" rowGap={4} {...props}>
+      <HashHeadingPaper
+        hash={wrapper?.boundWitness?._hash}
+        paperProps={{ sx: { p: 2 } }}
+        AdornmentEnd={<BWActions boundwitness={wrapper?.boundWitness} />}
+        identiconProps={{ p: 0.75, size: 24 }}
+      />
+      <ErrorRender error={wrapperError} scope="wrapperError:TransactionBoundWitnessDetails.tsx" />
+      <ErrorRender error={elevatedPayloadSetsError} scope="elevatedPayloadSetsError:TransactionBoundWitnessDetails.tsx" />
+      <Divider flexItem />
+      <TransactionBoundWitnessCard elevation={4} wrapper={wrapper} />
+      <Divider flexItem />
+      <BWPayloadTableFlexbox
+        IconComponent={<VscSymbolMethod />}
+        hashes={elevatedPayloadHashes}
+        headingTitle="Elevated Payloads"
+        schemas={elevatedPayloadSchemas}
+        sx={{ mb: 1 }}
+      />
+      <FlexCol alignItems="stretch" rowGap={1} mb={1}>
+        <HeadingPaper IconComponent={<FaSignature />} heading="Signatures" />
+        <BoundWitnessSignatureTable block={wrapper?.boundWitness} />
+      </FlexCol>
+    </FlexCol>
+  )
+}

package/src/components/transactions/card/Card.tsx

@@ -0,0 +1,121 @@
+import type { CardProps } from '@mui/material'
+import {
+  Card, CardContent, Grid, Typography,
+} from '@mui/material'
+import { isUndefined } from '@xylabs/typeof'
+import { bigIntToFixedPointString } from '@xyo-network/chain-utils'
+import type { SignedHydratedTransactionInstance } from '@xyo-network/xl1-protocol-sdk'
+import React, { useCallback } from 'react'
+import { GiReceiveMoney, GiSandsOfTime } from 'react-icons/gi'
+import { IoStatsChartOutline } from 'react-icons/io5'
+import { MdOutlineAlternateEmail } from 'react-icons/md'
+
+import { DetailsStack } from './DetailsStack.tsx'
+
+export interface TransactionBoundWitnessCardProps extends CardProps {
+  wrapper?: SignedHydratedTransactionInstance
+}
+
+export const TransactionBoundWitnessCard: React.FC<TransactionBoundWitnessCardProps> = ({ wrapper, ...props }) => {
+  if (!wrapper) return null
+
+  const formatFee = useCallback((fee?: bigint) => {
+    if (isUndefined(fee)) return
+    return bigIntToFixedPointString(fee, 12)
+  }, [])
+
+  return (
+    <Card {...props}>
+      <CardContent sx={{
+        display: 'flex', flexDirection: 'row', gap: 2, flexWrap: 'wrap',
+      }}
+      >
+        <Grid container spacing={3} sx={{ width: '100%' }}>
+          <Grid size={{ xs: 12 }}>
+            <DetailsStack IconComponent={MdOutlineAlternateEmail} heading="From:">
+              <Typography
+                variant="body2"
+                sx={{
+                  maxWidth: '100%', textOverflow: 'ellipsis', overflow: 'hidden',
+                }}
+              >
+                {wrapper?.boundWitness.from}
+              </Typography>
+            </DetailsStack>
+          </Grid>
+          <Grid size={{
+            xs: 12, sm: 6, md: 4,
+          }}
+          >
+            <DetailsStack IconComponent={IoStatsChartOutline} heading="Stats">
+              <Typography variant="body2">
+                Reward:
+                {' '}
+                {wrapper?.reward()}
+              </Typography>
+              <Typography variant="body2">
+                Elevated Payloads:
+                {' '}
+                {wrapper?.elevatedPayloadCount}
+              </Typography>
+              <Typography variant="body2">
+                Total Payloads:
+                {' '}
+                {wrapper?.payloadCount}
+              </Typography>
+              <Typography variant="body2">
+                Signatures:
+                {' '}
+                {wrapper?.signatureCount}
+              </Typography>
+            </DetailsStack>
+          </Grid>
+          <Grid size={{
+            xs: 12, sm: 6, md: 4,
+          }}
+          >
+            <DetailsStack IconComponent={GiReceiveMoney} heading="Fees">
+              <Typography variant="body2">
+                Base:
+                {' '}
+                {formatFee(wrapper?.fees.base)}
+              </Typography>
+              <Typography variant="body2">
+                Gas:
+                {' '}
+                {formatFee(wrapper?.fees.gasPrice)}
+              </Typography>
+              <Typography variant="body2">
+                Priority:
+                {' '}
+                {formatFee(wrapper?.fees.priority)}
+              </Typography>
+              <Typography variant="body2">
+                Gas Limit:
+                {' '}
+                {formatFee(wrapper?.fees.gasLimit)}
+              </Typography>
+            </DetailsStack>
+          </Grid>
+          <Grid size={{
+            xs: 12, sm: 6, md: 4,
+          }}
+          >
+            <DetailsStack IconComponent={GiSandsOfTime} heading="Block Duration">
+              <Typography variant="body2">
+                Expiration:
+                {' '}
+                {wrapper?.boundWitness.exp}
+              </Typography>
+              <Typography variant="body2">
+                Not Before:
+                {' '}
+                {wrapper?.boundWitness?.nbf}
+              </Typography>
+            </DetailsStack>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/transactions/card/DetailsStack.tsx

@@ -0,0 +1,35 @@
+import type { StackProps } from '@mui/material'
+import {
+  Icon, Stack, styled, Typography,
+} from '@mui/material'
+import type { ComponentType, SVGAttributes } from 'react'
+import React from 'react'
+
+export interface DetailsStackProps extends StackProps {
+  IconComponent?: ComponentType<SVGAttributes<SVGElement>>
+  heading?: string
+}
+
+export const DetailsStack: React.FC<DetailsStackProps> = ({
+  IconComponent, heading, children, ...props
+}) => {
+  return (
+    <Stack direction="row" mb={1} gap={1} {...props}>
+      {IconComponent && <Icon fontSize="small" sx={{ mr: 0.25 }}><IconComponent style={{ height: '0.7em' }} /></Icon>}
+      <Stack direction="column" flexWrap="wrap" mb={1}>
+        <SectionHeadingTypography>
+          {heading}
+        </SectionHeadingTypography>
+        {children}
+      </Stack>
+    </Stack>
+  )
+}
+
+const SectionHeadingTypography = styled(Typography, { name: 'SectionHeadingTypography' })(({ theme }) => ({
+  display: 'inline-flex',
+  alignItems: 'baseline',
+  fontFamily: 'monospace',
+  fontSize: 16,
+  marginBottom: theme.spacing(0.75),
+}))

package/src/components/transactions/card/index.ts

@@ -0,0 +1 @@
+export * from './Card.tsx'

package/src/lib/formatPayloadsForTable.ts

@@ -0,0 +1,12 @@
+import type { Hash } from '@xylabs/hex'
+import type { Payload } from '@xyo-network/payload-model'
+
+export const formatPayloadsForTable = (pairs: [Payload, Hash][]) => {
+  let hashes: Hash[] = []
+  let schemas: string[] = []
+  for (const [bw, hash] of pairs ?? []) {
+    hashes.push(hash)
+    schemas.push(bw?.schema ?? '')
+  }
+  return { hashes, schemas }
+}

package/src/lib/index.ts

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

package/dist/types/components/BlockBoundWitnessDetails.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockBoundWitnessDetails.d.ts","sourceRoot":"","sources":["../../../src/components/BlockBoundWitnessDetails.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAgBzD,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAmB/F,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,KAAK,CAAC,EAAE,mBAAmB,CAAA;CAC5B;AAED,eAAO,MAAM,wBAAwB,GAAI,sCAEtC,wBAAwB,4CA6D1B,CAAA"}