@xyo-network/react-node 2.81.10 → 2.82.0

package/dist/browser/index.cjs

@@ -1,8 +1,11 @@
 "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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +19,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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
@@ -44,36 +55,50 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/components/Node.tsx
+var import_react10 = __toESM(require("react"), 1);
+
 // src/components/NodeDescriptionBox.tsx
 var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react9 = __toESM(require("react"), 1);
 
 // src/hooks/ModuleFromNodeConfig.ts
-var useModuleFromNodeConfigLogger = (config) => {
+var useModuleFromNodeConfigLogger = /* @__PURE__ */ __name((config) => {
   return config?.logger;
-};
+}, "useModuleFromNodeConfigLogger");
 
 // src/hooks/provided/useProvidedNode.tsx
 var import_react_node_context = require("@xyo-network/react-node-context");
 var import_react = require("react");
-var useProvidedNode = () => {
+var useProvidedNode = /* @__PURE__ */ __name(() => {
   const { node } = (0, import_react.useContext)(import_react_node_context.NodeContext);
-  return [node];
-};
+  return [
+    node
+  ];
+}, "useProvidedNode");
 
 // src/hooks/provided/useWeakProvidedNode.tsx
 var import_react_node_context2 = require("@xyo-network/react-node-context");
 var import_react2 = require("react");
-var useWeakProvidedNode = () => {
+var useWeakProvidedNode = /* @__PURE__ */ __name(() => {
   const { node } = (0, import_react2.useContext)(import_react_node_context2.NodeContext);
-  const weakNode = (0, import_react2.useMemo)(() => node ? new WeakRef(node) : null, [node]);
-  return [weakNode];
-};
+  const weakNode = (0, import_react2.useMemo)(() => node ? new WeakRef(node) : null, [
+    node
+  ]);
+  return [
+    weakNode
+  ];
+}, "useWeakProvidedNode");
 
 // src/hooks/useModuleFilterOptions.ts
-var useModuleFilterOptions = (config) => {
+var useModuleFilterOptions = /* @__PURE__ */ __name((config) => {
   const { direction, identity, maxDepth } = config ?? {};
-  return { direction, identity, maxDepth };
-};
+  return {
+    direction,
+    identity,
+    maxDepth
+  };
+}, "useModuleFilterOptions");
 
 // src/hooks/useModuleFromNode.ts
 var import_react_promise2 = require("@xylabs/react-promise");
@@ -86,26 +111,39 @@ var import_node_model = require("@xyo-network/node-model");
 
 // src/hooks/useNodeConfigNodeField.ts
 var import_react3 = require("react");
-var useNodeConfigNodeField = (config) => {
-  const nodeAddress = (0, import_react3.useMemo)(() => typeof config?.node === "string" ? config?.node : void 0, [config?.node]);
-  const nodeInstance = (0, import_react3.useMemo)(() => typeof config?.node === "object" ? config?.node : void 0, [config?.node]);
-  return [nodeAddress, nodeInstance];
-};
+var useNodeConfigNodeField = /* @__PURE__ */ __name((config) => {
+  const nodeAddress = (0, import_react3.useMemo)(() => typeof config?.node === "string" ? config?.node : void 0, [
+    config?.node
+  ]);
+  const nodeInstance = (0, import_react3.useMemo)(() => typeof config?.node === "object" ? config?.node : void 0, [
+    config?.node
+  ]);
+  return [
+    nodeAddress,
+    nodeInstance
+  ];
+}, "useNodeConfigNodeField");
 
 // src/hooks/useNode.ts
-var useNode = (config) => {
+var useNode = /* @__PURE__ */ __name((config) => {
   const [nodeAddress, nodeInstance] = useNodeConfigNodeField(config);
   const [providedNode] = useProvidedNode();
   const [nodeAddressNode, error] = (0, import_react_promise.usePromise)(async () => {
     if (providedNode && nodeAddress) {
       return (0, import_node_model.asNodeInstance)(await providedNode.resolve(nodeAddress), "Module is not a node");
     }
-  }, [providedNode, nodeAddress]);
-  return [nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0, error];
-};
+  }, [
+    providedNode,
+    nodeAddress
+  ]);
+  return [
+    nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0,
+    error
+  ];
+}, "useNode");
 
 // src/hooks/useModuleFromNode.ts
-var useModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
+var useModuleFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance = void 0, config) => {
   const [node, nodeError] = useNode(config);
   const logger = useModuleFromNodeConfigLogger(config);
   const filterOptions = useModuleFilterOptions(config);
@@ -137,14 +175,20 @@ var useModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
     }
     logger?.debug("Result: No Node");
     return;
-  }, [node, nameOrAddressOrInstance]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    nameOrAddressOrInstance
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useModuleFromNode");
 
 // src/hooks/useModulesFromNode.ts
 var import_react_promise3 = require("@xylabs/react-promise");
 var import_react5 = require("react");
-var useModulesFromNode = (filter, config) => {
+var useModulesFromNode = /* @__PURE__ */ __name((filter, config) => {
   const [node, nodeError] = useNode(config);
   const logger = config?.logger;
   const filterOptions = useModuleFilterOptions();
@@ -168,42 +212,62 @@ var useModulesFromNode = (filter, config) => {
     }
     console.log("Result: No Node");
     return;
-  }, [node, filter]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    filter
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useModulesFromNode");
 
 // src/hooks/useNodeDescription.ts
 var import_react_promise4 = require("@xylabs/react-promise");
 var import_module_model2 = require("@xyo-network/module-model");
 var import_payload_model = require("@xyo-network/payload-model");
-var useNodeDescription = (config) => {
+var useNodeDescription = /* @__PURE__ */ __name((config) => {
   const [activeNode, nodeError] = useNode(config);
   const [description, error] = (0, import_react_promise4.usePromise)(async () => {
     const state = await activeNode?.state();
     return state?.find((0, import_payload_model.isPayloadOfSchemaType)(import_module_model2.ModuleDescriptionSchema));
-  }, [activeNode]);
-  return [description, nodeError ?? error];
-};
+  }, [
+    activeNode
+  ]);
+  return [
+    description,
+    nodeError ?? error
+  ];
+}, "useNodeDescription");
 
 // src/hooks/useNodeFromNode.tsx
 var import_node_model2 = require("@xyo-network/node-model");
-var useNodeFromNode = (nameOrAddressOrInstance, config) => {
+var useNodeFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance, config) => {
   const [mod, error] = useModuleFromNode(nameOrAddressOrInstance, config);
   const instance = (0, import_node_model2.asNodeInstance)(mod);
   if (mod && !instance) {
     const error2 = new Error(`Resolved module is not a NodeInstance [${mod.config?.schema}:${mod.config?.name}:${mod.address}]`);
     console.error(error2.message);
-    return [void 0, error2];
+    return [
+      void 0,
+      error2
+    ];
   }
-  return [instance, error];
-};
+  return [
+    instance,
+    error
+  ];
+}, "useNodeFromNode");
 
 // src/hooks/useNodesFromNode.tsx
 var import_node_model3 = require("@xyo-network/node-model");
-var useNodesFromNode = (filter, config) => {
+var useNodesFromNode = /* @__PURE__ */ __name((filter, config) => {
   const [modules, error] = useModulesFromNode(filter, config);
   if (error) {
-    return [null, error];
+    return [
+      null,
+      error
+    ];
   }
   return modules ? [
     // eslint-disable-next-line unicorn/no-array-reduce
@@ -214,14 +278,21 @@ var useNodesFromNode = (filter, config) => {
       return prev;
     }, []),
     void 0
-  ] : [modules, error];
-};
+  ] : [
+    modules,
+    error
+  ];
+}, "useNodesFromNode");
 
 // src/hooks/useWeakModuleFilterOptions.ts
-var useWeakModuleFilterOptions = (config) => {
+var useWeakModuleFilterOptions = /* @__PURE__ */ __name((config) => {
   const { direction, identity, maxDepth } = config ?? {};
-  return { direction, identity, maxDepth };
-};
+  return {
+    direction,
+    identity,
+    maxDepth
+  };
+}, "useWeakModuleFilterOptions");
 
 // src/hooks/useWeakModuleFromNode.ts
 var import_react_promise6 = require("@xylabs/react-promise");
@@ -234,14 +305,21 @@ var import_node_model4 = require("@xyo-network/node-model");
 
 // src/hooks/useWeakNodeConfigNodeField.ts
 var import_react6 = require("react");
-var useWeakNodeConfigNodeField = (config) => {
-  const nodeAddress = (0, import_react6.useMemo)(() => typeof config?.node === "string" ? config?.node : void 0, [config?.node]);
-  const nodeInstance = (0, import_react6.useMemo)(() => typeof config?.node === "object" ? config?.node : void 0, [config?.node]);
-  return [nodeAddress, nodeInstance];
-};
+var useWeakNodeConfigNodeField = /* @__PURE__ */ __name((config) => {
+  const nodeAddress = (0, import_react6.useMemo)(() => typeof config?.node === "string" ? config?.node : void 0, [
+    config?.node
+  ]);
+  const nodeInstance = (0, import_react6.useMemo)(() => typeof config?.node === "object" ? config?.node : void 0, [
+    config?.node
+  ]);
+  return [
+    nodeAddress,
+    nodeInstance
+  ];
+}, "useWeakNodeConfigNodeField");
 
 // src/hooks/useWeakNode.ts
-var useWeakNode = (config) => {
+var useWeakNode = /* @__PURE__ */ __name((config) => {
   const [nodeAddress, nodeInstance] = useWeakNodeConfigNodeField(config);
   const [providedNode] = useWeakProvidedNode();
   const [nodeAddressNode, error] = (0, import_react_promise5.usePromise)(async () => {
@@ -249,17 +327,23 @@ var useWeakNode = (config) => {
     if (providedNodeInstance && nodeAddress) {
       return new WeakRef((0, import_node_model4.asNodeInstance)(await providedNodeInstance.resolve(nodeAddress), "Module is not a node"));
     }
-  }, [providedNode, nodeAddress]);
-  return [nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0, error];
-};
+  }, [
+    providedNode,
+    nodeAddress
+  ]);
+  return [
+    nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0,
+    error
+  ];
+}, "useWeakNode");
 
 // src/hooks/WeakModuleFromNodeConfig.ts
-var useWeakModuleFromNodeConfigLogger = (config) => {
+var useWeakModuleFromNodeConfigLogger = /* @__PURE__ */ __name((config) => {
   return config?.logger;
-};
+}, "useWeakModuleFromNodeConfigLogger");
 
 // src/hooks/useWeakModuleFromNode.ts
-var useWeakModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
+var useWeakModuleFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance = void 0, config) => {
   const [node, nodeError] = useWeakNode(config);
   const logger = useWeakModuleFromNodeConfigLogger(config);
   const filterOptions = useWeakModuleFilterOptions(config);
@@ -292,14 +376,20 @@ var useWeakModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
     }
     logger?.debug("Result: No Node");
     return;
-  }, [node, nameOrAddressOrInstance]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    nameOrAddressOrInstance
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useWeakModuleFromNode");
 
 // src/hooks/useWeakModulesFromNode.ts
 var import_react_promise7 = require("@xylabs/react-promise");
 var import_react8 = require("react");
-var useWeakModulesFromNode = (filter, config) => {
+var useWeakModulesFromNode = /* @__PURE__ */ __name((filter, config) => {
   const [node, nodeError] = useNode(config);
   const logger = config?.logger;
   const filterOptions = useModuleFilterOptions();
@@ -326,138 +416,194 @@ var useWeakModulesFromNode = (filter, config) => {
     }
     console.log("Result: No Node");
     return;
-  }, [node, filter]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    filter
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useWeakModulesFromNode");
 
 // src/hooks/useWeakNodeDescription.ts
 var import_react_promise8 = require("@xylabs/react-promise");
 var import_module_model4 = require("@xyo-network/module-model");
 var import_payload_model2 = require("@xyo-network/payload-model");
-var useWeakNodeDescription = (config) => {
+var useWeakNodeDescription = /* @__PURE__ */ __name((config) => {
   const [activeNode, nodeError] = useWeakNode(config);
   const [description, error] = (0, import_react_promise8.usePromise)(async () => {
     const state = await activeNode?.deref()?.state();
     return state?.find((0, import_payload_model2.isPayloadOfSchemaType)(import_module_model4.ModuleDescriptionSchema));
-  }, [activeNode]);
-  return [description, nodeError ?? error];
-};
+  }, [
+    activeNode
+  ]);
+  return [
+    description,
+    nodeError ?? error
+  ];
+}, "useWeakNodeDescription");
 
 // src/hooks/useWeakNodeFromNode.tsx
 var import_node_model5 = require("@xyo-network/node-model");
-var useWeakNodeFromNode = (nameOrAddressOrInstance, config) => {
-  return useWeakModuleFromNode(nameOrAddressOrInstance, { identity: import_node_model5.isNodeInstance, ...config });
-};
+var useWeakNodeFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance, config) => {
+  return useWeakModuleFromNode(nameOrAddressOrInstance, {
+    identity: import_node_model5.isNodeInstance,
+    ...config
+  });
+}, "useWeakNodeFromNode");
 
 // src/components/NodeDescriptionBox.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var NodeDescriptionBox = ({ node, ...props }) => {
-  const [description, error] = useWeakNodeDescription({ node });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { color: error ? "red" : void 0, children: error ? error.message : JSON.stringify(description, null, 2) }) });
-};
+var NodeDescriptionBox = /* @__PURE__ */ __name(({ node, ...props }) => {
+  const [description, error] = useWeakNodeDescription({
+    node
+  });
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_flexbox.FlexCol, props, /* @__PURE__ */ import_react9.default.createElement("code", {
+    color: error ? "red" : void 0
+  }, error ? error.message : JSON.stringify(description, null, 2)));
+}, "NodeDescriptionBox");
 
 // src/components/Node.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var NodeBox = ({ variant, ...props }) => {
+var NodeBox = /* @__PURE__ */ __name(({ variant, ...props }) => {
   switch (variant) {
     case "description":
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NodeDescriptionBox, { ...props });
+      return /* @__PURE__ */ import_react10.default.createElement(NodeDescriptionBox, props);
     }
   }
-};
+}, "NodeBox");
 
 // src/components/NodeDrawer.tsx
 var import_icons_material2 = require("@mui/icons-material");
 var import_material3 = require("@mui/material");
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
 var import_react_node_provider = require("@xyo-network/react-node-provider");
+var import_react13 = __toESM(require("react"), 1);
 
 // src/components/render/ModuleDescriptionBox.tsx
 var import_icons_material = require("@mui/icons-material");
 var import_material2 = require("@mui/material");
 var import_x_tree_view2 = require("@mui/x-tree-view");
-var import_react10 = require("react");
+var import_react12 = __toESM(require("react"), 1);
 
 // src/components/render/RenderModule.tsx
 var import_material = require("@mui/material");
 var import_x_tree_view = require("@mui/x-tree-view");
 var import_react_async_effect = require("@xylabs/react-async-effect");
-var import_react9 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var RenderModule = ({ mod, idRef }) => {
-  const [childModules, setChildModules] = (0, import_react9.useState)();
-  (0, import_react_async_effect.useAsyncEffect)(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      const moduleInstance2 = mod.deref();
-      const { address: address2 } = moduleInstance2 ?? {};
-      if (moduleInstance2) {
-        const children = (await moduleInstance2.resolve("*")).filter((childModule) => childModule.address !== address2);
-        if (mounted()) {
-          setChildModules(children.map((childModule) => new WeakRef(childModule)));
-        }
+var import_react11 = __toESM(require("react"), 1);
+var RenderModule = /* @__PURE__ */ __name(({ mod, idRef }) => {
+  const [childModules, setChildModules] = (0, import_react11.useState)();
+  (0, import_react_async_effect.useAsyncEffect)(async (mounted) => {
+    const moduleInstance2 = mod.deref();
+    const { address: address2 } = moduleInstance2 ?? {};
+    if (moduleInstance2) {
+      const children = (await moduleInstance2.resolve("*")).filter((childModule) => childModule.address !== address2);
+      if (mounted()) {
+        setChildModules(children.map((childModule) => new WeakRef(childModule)));
       }
-    },
-    [mod]
-  );
-  const increment = () => {
+    }
+  }, [
+    mod
+  ]);
+  const increment = /* @__PURE__ */ __name(() => {
     const newId = (idRef.current.idIncrementor++).toString();
     idRef.current.ids.push(newId);
     return newId;
-  };
+  }, "increment");
   const moduleInstance = mod.deref();
   const { queries, address } = moduleInstance ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(StyledAddressTreeItem, { nodeId: increment(), label: `address: ${address}`, children: [
-    queries?.map((query, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_x_tree_view.TreeItem, { nodeId: increment(), label: `query : ${query}`, sx: { mb: index === queries.length - 1 ? 1.5 : 0.5 } }, query);
-    }),
-    childModules && childModules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_x_tree_view.TreeItem, { nodeId: increment(), label: "children", sx: { mb: 0.5 }, children: childModules.map((childModuleRef) => {
-      const childModule = childModuleRef.deref();
-      return childModule ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderModule, { mod: childModuleRef, idRef }, childModule?.address) : null;
-    }) }) : null
-  ] });
-};
-var StyledAddressTreeItem = (0, import_material.styled)(import_x_tree_view.TreeItem, { name: "StyledAddressTreeItem" })(({ theme }) => ({
+  return /* @__PURE__ */ import_react11.default.createElement(StyledAddressTreeItem, {
+    nodeId: increment(),
+    label: `address: ${address}`
+  }, queries?.map((query, index) => {
+    return /* @__PURE__ */ import_react11.default.createElement(import_x_tree_view.TreeItem, {
+      key: query,
+      nodeId: increment(),
+      label: `query : ${query}`,
+      sx: {
+        mb: index === queries.length - 1 ? 1.5 : 0.5
+      }
+    });
+  }), childModules && childModules.length > 0 ? /* @__PURE__ */ import_react11.default.createElement(import_x_tree_view.TreeItem, {
+    nodeId: increment(),
+    label: "children",
+    sx: {
+      mb: 0.5
+    }
+  }, childModules.map((childModuleRef) => {
+    const childModule = childModuleRef.deref();
+    return childModule ? /* @__PURE__ */ import_react11.default.createElement(RenderModule, {
+      key: childModule?.address,
+      mod: childModuleRef,
+      idRef
+    }) : null;
+  })) : null);
+}, "RenderModule");
+var StyledAddressTreeItem = (0, import_material.styled)(import_x_tree_view.TreeItem, {
+  name: "StyledAddressTreeItem"
+})(({ theme }) => ({
   "& .MuiTreeItem-content": {
     marginBottom: theme.spacing(0.25)
   }
 }));
 
 // src/components/render/ModuleDescriptionBox.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ModuleDescriptionBox = ({ mod }) => {
-  const idRef = (0, import_react10.useRef)({ idIncrementor: 0, ids: [] });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: mod ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material2.Typography, { variant: "h4", children: "Node Configuration" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      StyledTreeView,
-      {
-        "aria-label": "file system navigator",
-        defaultCollapseIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_material.ExpandMore, {}),
-        defaultExpandIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_material.ChevronRight, {}),
-        sx: { flexGrow: 1 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RenderModule, { mod, idRef })
-      }
-    )
-  ] }) : mod === null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material2.Typography, { variant: "h4", children: "Node loading..." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material2.Typography, { variant: "h4", children: "Node not found" }) });
-};
-var StyledTreeView = (0, import_material2.styled)(import_x_tree_view2.TreeView, { name: "StyledTreeView" })(() => ({
+var ModuleDescriptionBox = /* @__PURE__ */ __name(({ mod }) => {
+  const idRef = (0, import_react12.useRef)({
+    idIncrementor: 0,
+    ids: []
+  });
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, mod ? /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_material2.Typography, {
+    variant: "h4"
+  }, "Node Configuration"), /* @__PURE__ */ import_react12.default.createElement(StyledTreeView, {
+    "aria-label": "file system navigator",
+    defaultCollapseIcon: /* @__PURE__ */ import_react12.default.createElement(import_icons_material.ExpandMore, null),
+    defaultExpandIcon: /* @__PURE__ */ import_react12.default.createElement(import_icons_material.ChevronRight, null),
+    sx: {
+      flexGrow: 1
+    }
+  }, /* @__PURE__ */ import_react12.default.createElement(RenderModule, {
+    mod,
+    idRef
+  }))) : mod === null ? /* @__PURE__ */ import_react12.default.createElement(import_material2.Typography, {
+    variant: "h4"
+  }, "Node loading...") : /* @__PURE__ */ import_react12.default.createElement(import_material2.Typography, {
+    variant: "h4"
+  }, "Node not found"));
+}, "ModuleDescriptionBox");
+var StyledTreeView = (0, import_material2.styled)(import_x_tree_view2.TreeView, {
+  name: "StyledTreeView"
+})(() => ({
   height: "auto",
   maxWidth: "auto"
 }));
 
 // src/components/NodeDrawer.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var NodeDrawer = ({ children, ...props }) => {
+var NodeDrawer = /* @__PURE__ */ __name(({ children, ...props }) => {
   const { open, setOpen } = (0, import_react_node_provider.useNodeDrawer)();
   const [node] = useWeakProvidedNode();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Drawer, { open: open ?? false, anchor: "right", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.ClickAwayListener, { onClickAway: () => setOpen?.(false), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox2.FlexGrowCol, { role: "presentation", justifyContent: "start", p: 2, rowGap: 2, minWidth: "33vw", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox2.FlexRow, { alignContent: "start", justifyContent: "start", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.IconButton, { onClick: () => setOpen?.(false), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_material2.Close, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModuleDescriptionBox, { mod: node }),
-    children
-  ] }) }) });
-};
+  return /* @__PURE__ */ import_react13.default.createElement(import_material3.Drawer, {
+    open: open ?? false,
+    anchor: "right",
+    ...props
+  }, /* @__PURE__ */ import_react13.default.createElement(import_material3.ClickAwayListener, {
+    onClickAway: /* @__PURE__ */ __name(() => setOpen?.(false), "onClickAway")
+  }, /* @__PURE__ */ import_react13.default.createElement(import_react_flexbox2.FlexGrowCol, {
+    role: "presentation",
+    justifyContent: "start",
+    p: 2,
+    rowGap: 2,
+    minWidth: "33vw"
+  }, /* @__PURE__ */ import_react13.default.createElement(import_react_flexbox2.FlexRow, {
+    alignContent: "start",
+    justifyContent: "start",
+    width: "100%"
+  }, /* @__PURE__ */ import_react13.default.createElement(import_material3.IconButton, {
+    onClick: /* @__PURE__ */ __name(() => setOpen?.(false), "onClick")
+  }, /* @__PURE__ */ import_react13.default.createElement(import_icons_material2.Close, null))), /* @__PURE__ */ import_react13.default.createElement(ModuleDescriptionBox, {
+    mod: node
+  }), children)));
+}, "NodeDrawer");
 
 // src/index.ts
 __reExport(src_exports, require("@xyo-network/react-node-context"), module.exports);