@xyo-network/react-witness 2.65.4 → 2.65.5

package/dist/node/components/Card/CardHeader.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAoB,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,GAAG,eAAe,CAE5F,CAAA"}

package/dist/node/components/Card/CardHeader.d.mts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CardHeaderProps } from '@mui/material';
+import { ModuleRenderProps } from '@xyo-network/react-module';
+import { WitnessInstance } from '@xyo-network/witness-model';
+export declare const WitnessCardHeader: React.FC<ModuleRenderProps<WitnessInstance> & CardHeaderProps>;
+//# sourceMappingURL=CardHeader.d.ts.map

package/dist/node/components/Card/CardHeader.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAoB,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,GAAG,eAAe,CAE5F,CAAA"}

package/dist/node/components/Card/CardHeader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CardHeaderProps } from '@mui/material';
+import { ModuleRenderProps } from '@xyo-network/react-module';
+import { WitnessInstance } from '@xyo-network/witness-model';
+export declare const WitnessCardHeader: React.FC<ModuleRenderProps<WitnessInstance> & CardHeaderProps>;
+//# sourceMappingURL=CardHeader.d.ts.map

package/dist/node/components/Card/CardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAoB,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,GAAG,eAAe,CAE5F,CAAA"}

package/dist/node/components/Card/index.d.cts

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

package/dist/node/components/Card/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}

package/dist/node/components/Card/index.d.mts

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

package/dist/node/components/Card/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}

package/dist/node/components/Card/index.d.ts

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

package/dist/node/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}

package/dist/node/components/index.d.cts

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

package/dist/node/components/index.d.cts.map

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

package/dist/node/components/index.d.mts

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

package/dist/node/components/index.d.mts.map

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

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

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

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

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

package/dist/node/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,16 +17,76 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  WitnessCard: () => WitnessCard,
+  WitnessCardContent: () => WitnessCardContent,
+  WitnessCardHeader: () => WitnessCardHeader,
   useWitnessFromNode: () => useWitnessFromNode,
   useWitnessesFromNode: () => useWitnessesFromNode
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/components/Card/Card.tsx
+var import_material = require("@mui/material");
+var import_react_promise = require("@xylabs/react-promise");
+var import_react = require("react");
+
+// src/components/Card/CardActions.tsx
+var import_react_button = require("@xylabs/react-button");
+var import_react_module = require("@xyo-network/react-module");
+var import_jsx_runtime = require("react/jsx-runtime");
+var WitnessCardActions = ({ onObserve, module: module2, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.ModuleCardActions, { module: module2, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_button.ButtonEx, { onClick: () => onObserve == null ? void 0 : onObserve(module2), size: "small", variant: "outlined", children: "Observe" }) });
+};
+
+// src/components/Card/CardContent.tsx
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_module2 = require("@xyo-network/react-module");
+var import_react_json_view = __toESM(require("react-json-view"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var WitnessCardContent = ({ children, observation, module: module2, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_module2.ModuleCardContent, { module: module2, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexGrowRow, { flexWrap: "wrap", justifyContent: "start", gap: 2, children: [
+    observation ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_json_view.default, { src: observation }) : null,
+    children
+  ] }) });
+};
+
+// src/components/Card/CardHeader.tsx
+var import_react_module3 = require("@xyo-network/react-module");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var WitnessCardHeader = ({ title, module: module2, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_module3.ModuleCardHeader, { module: module2, title: title ?? (module2 == null ? void 0 : module2.config.name) ?? "Witness", ...props });
+};
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var WitnessCard = ({ children, module: module2, ...props }) => {
+  const [retry, setRetry] = (0, import_react.useState)(-1);
+  const [observation] = (0, import_react_promise.usePromise)(async () => {
+    if (retry >= 0) {
+      return await (module2 == null ? void 0 : module2.observe());
+    }
+  }, [module2, retry]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material.Card, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WitnessCardHeader, { module: module2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WitnessCardContent, { module: module2, observation }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WitnessCardActions, { module: module2, onObserve: () => setRetry(retry + 1) })
+  ] });
+};
+
 // src/hooks/node/useWitnessesFromNode.tsx
 var import_react_node = require("@xyo-network/react-node");
 var import_witness = require("@xyo-network/witness");
@@ -64,6 +126,9 @@ var useWitnessFromNode = (nameOrAddressOrInstance, config) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  WitnessCard,
+  WitnessCardContent,
+  WitnessCardHeader,
   useWitnessFromNode,
   useWitnessesFromNode
 });

package/dist/node/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/hooks/node/useWitnessesFromNode.tsx","../../src/hooks/node/useWitnessFromNode.tsx"],"sourcesContent":["export * from './hooks'\n","import { ModuleFilter } from '@xyo-network/module-model'\nimport { ModuleFromNodeConfig, useModulesFromNode } from '@xyo-network/react-node'\nimport { isWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessesFromNode = (\n  filter?: ModuleFilter,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance[] | null | undefined, Error | undefined] => {\n  const [modules, error] = useModulesFromNode(filter, config)\n  if (error) {\n    return [null, error]\n  }\n  if (modules) {\n    return [\n      modules.reduce<WitnessInstance[]>((prev, module) => {\n        if (isWitnessInstance(module)) {\n          prev.push(module)\n        }\n        return prev\n      }, []),\n      undefined,\n    ]\n  } else {\n    return [modules, error]\n  }\n}\n","import { ModuleFromNodeConfig, useModuleFromNode } from '@xyo-network/react-node'\nimport { asWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessFromNode = (\n  nameOrAddressOrInstance?: string | WitnessInstance,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance | undefined, Error | undefined] => {\n  const [module, error] = useModuleFromNode(nameOrAddressOrInstance, config)\n  const instance = asWitnessInstance(module)\n  if (module && !instance) {\n    const error = Error(`Resolved module is not a WitnessInstance [${module.config?.schema}:${module.config?.name}:${module.address}]`)\n    console.error(error.message)\n    return [undefined, error]\n  }\n  return [instance, error]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,wBAAyD;AACzD,qBAAmD;AAE5C,IAAM,uBAAuB,CAClC,QACA,WAC8D;AAC9D,QAAM,CAAC,SAAS,KAAK,QAAI,sCAAmB,QAAQ,MAAM;AAC1D,MAAI,OAAO;AACT,WAAO,CAAC,MAAM,KAAK;AAAA,EACrB;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,QAAQ,OAA0B,CAAC,MAAMA,YAAW;AAClD,gBAAI,kCAAkBA,OAAM,GAAG;AAC7B,eAAK,KAAKA,OAAM;AAAA,QAClB;AACA,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,IACF;AAAA,EACF,OAAO;AACL,WAAO,CAAC,SAAS,KAAK;AAAA,EACxB;AACF;;;ACzBA,IAAAC,qBAAwD;AACxD,IAAAC,kBAAmD;AAE5C,IAAM,qBAAqB,CAChC,yBACA,WACqD;AANvD;AAOE,QAAM,CAACC,SAAQ,KAAK,QAAI,sCAAkB,yBAAyB,MAAM;AACzE,QAAM,eAAW,mCAAkBA,OAAM;AACzC,MAAIA,WAAU,CAAC,UAAU;AACvB,UAAMC,SAAQ,MAAM,8CAA6C,KAAAD,QAAO,WAAP,mBAAe,MAAM,KAAI,KAAAA,QAAO,WAAP,mBAAe,IAAI,IAAIA,QAAO,OAAO,GAAG;AAClI,YAAQ,MAAMC,OAAM,OAAO;AAC3B,WAAO,CAAC,QAAWA,MAAK;AAAA,EAC1B;AACA,SAAO,CAAC,UAAU,KAAK;AACzB;","names":["module","import_react_node","import_witness","module","error"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/Card/Card.tsx","../../src/components/Card/CardActions.tsx","../../src/components/Card/CardContent.tsx","../../src/components/Card/CardHeader.tsx","../../src/hooks/node/useWitnessesFromNode.tsx","../../src/hooks/node/useWitnessFromNode.tsx"],"sourcesContent":["export * from './components'\nexport * from './hooks'\n","import { Card, CardProps } from '@mui/material'\nimport { usePromise } from '@xylabs/react-promise'\nimport { ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\nimport { useState } from 'react'\n\nimport { WitnessCardActions } from './CardActions'\nimport { WitnessCardContent } from './CardContent'\nimport { WitnessCardHeader } from './CardHeader'\n\nexport const WitnessCard: React.FC<CardProps & ModuleRenderProps<WitnessInstance>> = ({ children, module, ...props }) => {\n  const [retry, setRetry] = useState(-1)\n  const [observation] = usePromise(async () => {\n    if (retry >= 0) {\n      return await module?.observe()\n    }\n  }, [module, retry])\n  return (\n    <Card {...props}>\n      <WitnessCardHeader module={module} />\n      <WitnessCardContent module={module} observation={observation} />\n      {children}\n      <WitnessCardActions module={module} onObserve={() => setRetry(retry + 1)} />\n    </Card>\n  )\n}\n","import { CardActionsProps } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { ModuleCardActions, ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\n\nexport type WitnessCardActionsProps = ModuleRenderProps<WitnessInstance> &\n  CardActionsProps & {\n    onObserve?: (module?: WitnessInstance) => void\n  }\n\nexport const WitnessCardActions: React.FC<WitnessCardActionsProps> = ({ onObserve, module, ...props }) => {\n  return (\n    <ModuleCardActions module={module} {...props}>\n      <ButtonEx onClick={() => onObserve?.(module)} size={'small'} variant={'outlined'}>\n        Observe\n      </ButtonEx>\n    </ModuleCardActions>\n  )\n}\n","import { CardContentProps } from '@mui/material'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { Payload } from '@xyo-network/payload-model'\nimport { ModuleCardContent, ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\nimport React from 'react'\nimport JsonView from 'react-json-view'\n\nexport type WitnessCardContentProps = ModuleRenderProps<WitnessInstance> &\n  CardContentProps & {\n    observation?: Payload[]\n  }\n\nexport const WitnessCardContent: React.FC<WitnessCardContentProps> = ({ children, observation, module, ...props }) => {\n  return (\n    <ModuleCardContent module={module} {...props}>\n      <FlexGrowRow flexWrap=\"wrap\" justifyContent=\"start\" gap={2}>\n        {observation ? <JsonView src={observation} /> : null}\n        {children}\n      </FlexGrowRow>\n    </ModuleCardContent>\n  )\n}\n","import { CardHeaderProps } from '@mui/material'\nimport { ModuleCardHeader, ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\n\nexport const WitnessCardHeader: React.FC<ModuleRenderProps<WitnessInstance> & CardHeaderProps> = ({ title, module, ...props }) => {\n  return <ModuleCardHeader module={module} title={title ?? module?.config.name ?? 'Witness'} {...props} />\n}\n","import { ModuleFilter } from '@xyo-network/module-model'\nimport { ModuleFromNodeConfig, useModulesFromNode } from '@xyo-network/react-node'\nimport { isWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessesFromNode = (\n  filter?: ModuleFilter,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance[] | null | undefined, Error | undefined] => {\n  const [modules, error] = useModulesFromNode(filter, config)\n  if (error) {\n    return [null, error]\n  }\n  if (modules) {\n    return [\n      modules.reduce<WitnessInstance[]>((prev, module) => {\n        if (isWitnessInstance(module)) {\n          prev.push(module)\n        }\n        return prev\n      }, []),\n      undefined,\n    ]\n  } else {\n    return [modules, error]\n  }\n}\n","import { ModuleFromNodeConfig, useModuleFromNode } from '@xyo-network/react-node'\nimport { asWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessFromNode = (\n  nameOrAddressOrInstance?: string | WitnessInstance,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance | undefined, Error | undefined] => {\n  const [module, error] = useModuleFromNode(nameOrAddressOrInstance, config)\n  const instance = asWitnessInstance(module)\n  if (module && !instance) {\n    const error = Error(`Resolved module is not a WitnessInstance [${module.config?.schema}:${module.config?.name}:${module.address}]`)\n    console.error(error.message)\n    return [undefined, error]\n  }\n  return [instance, error]\n}\n"],"mappings":"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","names":["module","import_react_module","import_jsx_runtime","module","JsonView","import_react_module","import_jsx_runtime","module","import_jsx_runtime","module","module","import_react_node","import_witness","module","error"]}

package/dist/node/index.d.cts

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

package/dist/node/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/node/index.d.mts

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

package/dist/node/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/node/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/node/index.js

@@ -1,3 +1,52 @@
+// src/components/Card/Card.tsx
+import { Card } from "@mui/material";
+import { usePromise } from "@xylabs/react-promise";
+import { useState } from "react";
+
+// src/components/Card/CardActions.tsx
+import { ButtonEx } from "@xylabs/react-button";
+import { ModuleCardActions } from "@xyo-network/react-module";
+import { jsx } from "react/jsx-runtime";
+var WitnessCardActions = ({ onObserve, module, ...props }) => {
+  return /* @__PURE__ */ jsx(ModuleCardActions, { module, ...props, children: /* @__PURE__ */ jsx(ButtonEx, { onClick: () => onObserve == null ? void 0 : onObserve(module), size: "small", variant: "outlined", children: "Observe" }) });
+};
+
+// src/components/Card/CardContent.tsx
+import { FlexGrowRow } from "@xylabs/react-flexbox";
+import { ModuleCardContent } from "@xyo-network/react-module";
+import JsonView from "react-json-view";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var WitnessCardContent = ({ children, observation, module, ...props }) => {
+  return /* @__PURE__ */ jsx2(ModuleCardContent, { module, ...props, children: /* @__PURE__ */ jsxs(FlexGrowRow, { flexWrap: "wrap", justifyContent: "start", gap: 2, children: [
+    observation ? /* @__PURE__ */ jsx2(JsonView, { src: observation }) : null,
+    children
+  ] }) });
+};
+
+// src/components/Card/CardHeader.tsx
+import { ModuleCardHeader } from "@xyo-network/react-module";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var WitnessCardHeader = ({ title, module, ...props }) => {
+  return /* @__PURE__ */ jsx3(ModuleCardHeader, { module, title: title ?? (module == null ? void 0 : module.config.name) ?? "Witness", ...props });
+};
+
+// src/components/Card/Card.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var WitnessCard = ({ children, module, ...props }) => {
+  const [retry, setRetry] = useState(-1);
+  const [observation] = usePromise(async () => {
+    if (retry >= 0) {
+      return await (module == null ? void 0 : module.observe());
+    }
+  }, [module, retry]);
+  return /* @__PURE__ */ jsxs2(Card, { ...props, children: [
+    /* @__PURE__ */ jsx4(WitnessCardHeader, { module }),
+    /* @__PURE__ */ jsx4(WitnessCardContent, { module, observation }),
+    children,
+    /* @__PURE__ */ jsx4(WitnessCardActions, { module, onObserve: () => setRetry(retry + 1) })
+  ] });
+};
+
 // src/hooks/node/useWitnessesFromNode.tsx
 import { useModulesFromNode } from "@xyo-network/react-node";
 import { isWitnessInstance } from "@xyo-network/witness";
@@ -36,6 +85,9 @@ var useWitnessFromNode = (nameOrAddressOrInstance, config) => {
   return [instance, error];
 };
 export {
+  WitnessCard,
+  WitnessCardContent,
+  WitnessCardHeader,
   useWitnessFromNode,
   useWitnessesFromNode
 };

package/dist/node/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/node/useWitnessesFromNode.tsx","../../src/hooks/node/useWitnessFromNode.tsx"],"sourcesContent":["import { ModuleFilter } from '@xyo-network/module-model'\nimport { ModuleFromNodeConfig, useModulesFromNode } from '@xyo-network/react-node'\nimport { isWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessesFromNode = (\n  filter?: ModuleFilter,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance[] | null | undefined, Error | undefined] => {\n  const [modules, error] = useModulesFromNode(filter, config)\n  if (error) {\n    return [null, error]\n  }\n  if (modules) {\n    return [\n      modules.reduce<WitnessInstance[]>((prev, module) => {\n        if (isWitnessInstance(module)) {\n          prev.push(module)\n        }\n        return prev\n      }, []),\n      undefined,\n    ]\n  } else {\n    return [modules, error]\n  }\n}\n","import { ModuleFromNodeConfig, useModuleFromNode } from '@xyo-network/react-node'\nimport { asWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessFromNode = (\n  nameOrAddressOrInstance?: string | WitnessInstance,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance | undefined, Error | undefined] => {\n  const [module, error] = useModuleFromNode(nameOrAddressOrInstance, config)\n  const instance = asWitnessInstance(module)\n  if (module && !instance) {\n    const error = Error(`Resolved module is not a WitnessInstance [${module.config?.schema}:${module.config?.name}:${module.address}]`)\n    console.error(error.message)\n    return [undefined, error]\n  }\n  return [instance, error]\n}\n"],"mappings":";AACA,SAA+B,0BAA0B;AACzD,SAAS,yBAA0C;AAE5C,IAAM,uBAAuB,CAClC,QACA,WAC8D;AAC9D,QAAM,CAAC,SAAS,KAAK,IAAI,mBAAmB,QAAQ,MAAM;AAC1D,MAAI,OAAO;AACT,WAAO,CAAC,MAAM,KAAK;AAAA,EACrB;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,QAAQ,OAA0B,CAAC,MAAM,WAAW;AAClD,YAAI,kBAAkB,MAAM,GAAG;AAC7B,eAAK,KAAK,MAAM;AAAA,QAClB;AACA,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,IACF;AAAA,EACF,OAAO;AACL,WAAO,CAAC,SAAS,KAAK;AAAA,EACxB;AACF;;;ACzBA,SAA+B,yBAAyB;AACxD,SAAS,yBAA0C;AAE5C,IAAM,qBAAqB,CAChC,yBACA,WACqD;AANvD;AAOE,QAAM,CAAC,QAAQ,KAAK,IAAI,kBAAkB,yBAAyB,MAAM;AACzE,QAAM,WAAW,kBAAkB,MAAM;AACzC,MAAI,UAAU,CAAC,UAAU;AACvB,UAAMA,SAAQ,MAAM,8CAA6C,YAAO,WAAP,mBAAe,MAAM,KAAI,YAAO,WAAP,mBAAe,IAAI,IAAI,OAAO,OAAO,GAAG;AAClI,YAAQ,MAAMA,OAAM,OAAO;AAC3B,WAAO,CAAC,QAAWA,MAAK;AAAA,EAC1B;AACA,SAAO,CAAC,UAAU,KAAK;AACzB;","names":["error"]}
+{"version":3,"sources":["../../src/components/Card/Card.tsx","../../src/components/Card/CardActions.tsx","../../src/components/Card/CardContent.tsx","../../src/components/Card/CardHeader.tsx","../../src/hooks/node/useWitnessesFromNode.tsx","../../src/hooks/node/useWitnessFromNode.tsx"],"sourcesContent":["import { Card, CardProps } from '@mui/material'\nimport { usePromise } from '@xylabs/react-promise'\nimport { ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\nimport { useState } from 'react'\n\nimport { WitnessCardActions } from './CardActions'\nimport { WitnessCardContent } from './CardContent'\nimport { WitnessCardHeader } from './CardHeader'\n\nexport const WitnessCard: React.FC<CardProps & ModuleRenderProps<WitnessInstance>> = ({ children, module, ...props }) => {\n  const [retry, setRetry] = useState(-1)\n  const [observation] = usePromise(async () => {\n    if (retry >= 0) {\n      return await module?.observe()\n    }\n  }, [module, retry])\n  return (\n    <Card {...props}>\n      <WitnessCardHeader module={module} />\n      <WitnessCardContent module={module} observation={observation} />\n      {children}\n      <WitnessCardActions module={module} onObserve={() => setRetry(retry + 1)} />\n    </Card>\n  )\n}\n","import { CardActionsProps } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { ModuleCardActions, ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\n\nexport type WitnessCardActionsProps = ModuleRenderProps<WitnessInstance> &\n  CardActionsProps & {\n    onObserve?: (module?: WitnessInstance) => void\n  }\n\nexport const WitnessCardActions: React.FC<WitnessCardActionsProps> = ({ onObserve, module, ...props }) => {\n  return (\n    <ModuleCardActions module={module} {...props}>\n      <ButtonEx onClick={() => onObserve?.(module)} size={'small'} variant={'outlined'}>\n        Observe\n      </ButtonEx>\n    </ModuleCardActions>\n  )\n}\n","import { CardContentProps } from '@mui/material'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { Payload } from '@xyo-network/payload-model'\nimport { ModuleCardContent, ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\nimport React from 'react'\nimport JsonView from 'react-json-view'\n\nexport type WitnessCardContentProps = ModuleRenderProps<WitnessInstance> &\n  CardContentProps & {\n    observation?: Payload[]\n  }\n\nexport const WitnessCardContent: React.FC<WitnessCardContentProps> = ({ children, observation, module, ...props }) => {\n  return (\n    <ModuleCardContent module={module} {...props}>\n      <FlexGrowRow flexWrap=\"wrap\" justifyContent=\"start\" gap={2}>\n        {observation ? <JsonView src={observation} /> : null}\n        {children}\n      </FlexGrowRow>\n    </ModuleCardContent>\n  )\n}\n","import { CardHeaderProps } from '@mui/material'\nimport { ModuleCardHeader, ModuleRenderProps } from '@xyo-network/react-module'\nimport { WitnessInstance } from '@xyo-network/witness-model'\n\nexport const WitnessCardHeader: React.FC<ModuleRenderProps<WitnessInstance> & CardHeaderProps> = ({ title, module, ...props }) => {\n  return <ModuleCardHeader module={module} title={title ?? module?.config.name ?? 'Witness'} {...props} />\n}\n","import { ModuleFilter } from '@xyo-network/module-model'\nimport { ModuleFromNodeConfig, useModulesFromNode } from '@xyo-network/react-node'\nimport { isWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessesFromNode = (\n  filter?: ModuleFilter,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance[] | null | undefined, Error | undefined] => {\n  const [modules, error] = useModulesFromNode(filter, config)\n  if (error) {\n    return [null, error]\n  }\n  if (modules) {\n    return [\n      modules.reduce<WitnessInstance[]>((prev, module) => {\n        if (isWitnessInstance(module)) {\n          prev.push(module)\n        }\n        return prev\n      }, []),\n      undefined,\n    ]\n  } else {\n    return [modules, error]\n  }\n}\n","import { ModuleFromNodeConfig, useModuleFromNode } from '@xyo-network/react-node'\nimport { asWitnessInstance, WitnessInstance } from '@xyo-network/witness'\n\nexport const useWitnessFromNode = (\n  nameOrAddressOrInstance?: string | WitnessInstance,\n  config?: ModuleFromNodeConfig,\n): [WitnessInstance | undefined, Error | undefined] => {\n  const [module, error] = useModuleFromNode(nameOrAddressOrInstance, config)\n  const instance = asWitnessInstance(module)\n  if (module && !instance) {\n    const error = Error(`Resolved module is not a WitnessInstance [${module.config?.schema}:${module.config?.name}:${module.address}]`)\n    console.error(error.message)\n    return [undefined, error]\n  }\n  return [instance, error]\n}\n"],"mappings":";AAAA,SAAS,YAAuB;AAChC,SAAS,kBAAkB;AAG3B,SAAS,gBAAgB;;;ACHzB,SAAS,gBAAgB;AACzB,SAAS,yBAA4C;AAW/C;AAHC,IAAM,qBAAwD,CAAC,EAAE,WAAW,QAAQ,GAAG,MAAM,MAAM;AACxG,SACE,oBAAC,qBAAkB,QAAiB,GAAG,OACrC,8BAAC,YAAS,SAAS,MAAM,uCAAY,SAAS,MAAM,SAAS,SAAS,YAAY,qBAElF,GACF;AAEJ;;;ACjBA,SAAS,mBAAmB;AAE5B,SAAS,yBAA4C;AAGrD,OAAO,cAAc;AAUf,SACiB,OAAAA,MADjB;AAHC,IAAM,qBAAwD,CAAC,EAAE,UAAU,aAAa,QAAQ,GAAG,MAAM,MAAM;AACpH,SACE,gBAAAA,KAAC,qBAAkB,QAAiB,GAAG,OACrC,+BAAC,eAAY,UAAS,QAAO,gBAAe,SAAQ,KAAK,GACtD;AAAA,kBAAc,gBAAAA,KAAC,YAAS,KAAK,aAAa,IAAK;AAAA,IAC/C;AAAA,KACH,GACF;AAEJ;;;ACrBA,SAAS,wBAA2C;AAI3C,gBAAAC,YAAA;AADF,IAAM,oBAAoF,CAAC,EAAE,OAAO,QAAQ,GAAG,MAAM,MAAM;AAChI,SAAO,gBAAAA,KAAC,oBAAiB,QAAgB,OAAO,UAAS,iCAAQ,OAAO,SAAQ,WAAY,GAAG,OAAO;AACxG;;;AHYI,SACE,OAAAC,MADF,QAAAC,aAAA;AARG,IAAM,cAAwE,CAAC,EAAE,UAAU,QAAQ,GAAG,MAAM,MAAM;AACvH,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,WAAW,IAAI,WAAW,YAAY;AAC3C,QAAI,SAAS,GAAG;AACd,aAAO,OAAM,iCAAQ;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAClB,SACE,gBAAAA,MAAC,QAAM,GAAG,OACR;AAAA,oBAAAD,KAAC,qBAAkB,QAAgB;AAAA,IACnC,gBAAAA,KAAC,sBAAmB,QAAgB,aAA0B;AAAA,IAC7D;AAAA,IACD,gBAAAA,KAAC,sBAAmB,QAAgB,WAAW,MAAM,SAAS,QAAQ,CAAC,GAAG;AAAA,KAC5E;AAEJ;;;AIxBA,SAA+B,0BAA0B;AACzD,SAAS,yBAA0C;AAE5C,IAAM,uBAAuB,CAClC,QACA,WAC8D;AAC9D,QAAM,CAAC,SAAS,KAAK,IAAI,mBAAmB,QAAQ,MAAM;AAC1D,MAAI,OAAO;AACT,WAAO,CAAC,MAAM,KAAK;AAAA,EACrB;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,QAAQ,OAA0B,CAAC,MAAM,WAAW;AAClD,YAAI,kBAAkB,MAAM,GAAG;AAC7B,eAAK,KAAK,MAAM;AAAA,QAClB;AACA,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,IACF;AAAA,EACF,OAAO;AACL,WAAO,CAAC,SAAS,KAAK;AAAA,EACxB;AACF;;;ACzBA,SAA+B,yBAAyB;AACxD,SAAS,yBAA0C;AAE5C,IAAM,qBAAqB,CAChC,yBACA,WACqD;AANvD;AAOE,QAAM,CAAC,QAAQ,KAAK,IAAI,kBAAkB,yBAAyB,MAAM;AACzE,QAAM,WAAW,kBAAkB,MAAM;AACzC,MAAI,UAAU,CAAC,UAAU;AACvB,UAAME,SAAQ,MAAM,8CAA6C,YAAO,WAAP,mBAAe,MAAM,KAAI,YAAO,WAAP,mBAAe,IAAI,IAAI,OAAO,OAAO,GAAG;AAClI,YAAQ,MAAMA,OAAM,OAAO;AAC3B,WAAO,CAAC,QAAWA,MAAK;AAAA,EAC1B;AACA,SAAO,CAAC,UAAU,KAAK;AACzB;","names":["jsx","jsx","jsx","jsxs","error"]}

package/package.json

@@ -10,9 +10,9 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xyo-network/module-model": "^2.77.7",
-    "@xyo-network/react-node": "~2.65.4",
-    "@xyo-network/witness": "^2.77.7"
+    "@xyo-network/module-model": "^2.77.19",
+    "@xyo-network/react-node": "~2.65.5",
+    "@xyo-network/witness": "^2.77.19"
   },
   "devDependencies": {
     "@xylabs/ts-scripts-yarn3": "^3.1.13",
@@ -77,6 +77,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.65.4",
+  "version": "2.65.5",
   "type": "module"
 }

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { usePromise } from '@xylabs/react-promise'
+import { IdWitness } from '@xyo-network/id-plugin'
+
+import { WitnessCard } from './Card'
+
+const StorybookEntry = {
+  component: WitnessCard,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'modules/witness/WitnessCard',
+} as Meta<typeof WitnessCard>
+
+const IdWitnessTemplate: StoryFn<typeof WitnessCard> = () => {
+  const [witness] = usePromise(async () => {
+    return await IdWitness.create()
+  }, [])
+
+  return (
+    <FlexCol gap={2}>
+      <WitnessCard module={witness} />
+    </FlexCol>
+  )
+}
+
+const IdWitnessCard = IdWitnessTemplate.bind({})
+
+export { IdWitnessCard }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Card/Card.tsx

@@ -0,0 +1,26 @@
+import { Card, CardProps } from '@mui/material'
+import { usePromise } from '@xylabs/react-promise'
+import { ModuleRenderProps } from '@xyo-network/react-module'
+import { WitnessInstance } from '@xyo-network/witness-model'
+import { useState } from 'react'
+
+import { WitnessCardActions } from './CardActions'
+import { WitnessCardContent } from './CardContent'
+import { WitnessCardHeader } from './CardHeader'
+
+export const WitnessCard: React.FC<CardProps & ModuleRenderProps<WitnessInstance>> = ({ children, module, ...props }) => {
+  const [retry, setRetry] = useState(-1)
+  const [observation] = usePromise(async () => {
+    if (retry >= 0) {
+      return await module?.observe()
+    }
+  }, [module, retry])
+  return (
+    <Card {...props}>
+      <WitnessCardHeader module={module} />
+      <WitnessCardContent module={module} observation={observation} />
+      {children}
+      <WitnessCardActions module={module} onObserve={() => setRetry(retry + 1)} />
+    </Card>
+  )
+}

package/src/components/Card/CardActions.tsx

@@ -0,0 +1,19 @@
+import { CardActionsProps } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { ModuleCardActions, ModuleRenderProps } from '@xyo-network/react-module'
+import { WitnessInstance } from '@xyo-network/witness-model'
+
+export type WitnessCardActionsProps = ModuleRenderProps<WitnessInstance> &
+  CardActionsProps & {
+    onObserve?: (module?: WitnessInstance) => void
+  }
+
+export const WitnessCardActions: React.FC<WitnessCardActionsProps> = ({ onObserve, module, ...props }) => {
+  return (
+    <ModuleCardActions module={module} {...props}>
+      <ButtonEx onClick={() => onObserve?.(module)} size={'small'} variant={'outlined'}>
+        Observe
+      </ButtonEx>
+    </ModuleCardActions>
+  )
+}

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,23 @@
+import { CardContentProps } from '@mui/material'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { Payload } from '@xyo-network/payload-model'
+import { ModuleCardContent, ModuleRenderProps } from '@xyo-network/react-module'
+import { WitnessInstance } from '@xyo-network/witness-model'
+import React from 'react'
+import JsonView from 'react-json-view'
+
+export type WitnessCardContentProps = ModuleRenderProps<WitnessInstance> &
+  CardContentProps & {
+    observation?: Payload[]
+  }
+
+export const WitnessCardContent: React.FC<WitnessCardContentProps> = ({ children, observation, module, ...props }) => {
+  return (
+    <ModuleCardContent module={module} {...props}>
+      <FlexGrowRow flexWrap="wrap" justifyContent="start" gap={2}>
+        {observation ? <JsonView src={observation} /> : null}
+        {children}
+      </FlexGrowRow>
+    </ModuleCardContent>
+  )
+}

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,7 @@
+import { CardHeaderProps } from '@mui/material'
+import { ModuleCardHeader, ModuleRenderProps } from '@xyo-network/react-module'
+import { WitnessInstance } from '@xyo-network/witness-model'
+
+export const WitnessCardHeader: React.FC<ModuleRenderProps<WitnessInstance> & CardHeaderProps> = ({ title, module, ...props }) => {
+  return <ModuleCardHeader module={module} title={title ?? module?.config.name ?? 'Witness'} {...props} />
+}

package/src/components/Card/index.ts

@@ -0,0 +1,3 @@
+export * from './Card'
+export * from './CardContent'
+export * from './CardHeader'

package/src/components/index.ts

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

package/src/index.ts

@@ -1 +1,2 @@
+export * from './components'
 export * from './hooks'