@xyo-network/react-node-renderer 2.64.0 → 2.64.1

package/dist/browser/components/index.js

@@ -1,5 +1,382 @@
-export * from "./lib";
-export * from "./ModuleCardParser";
-export * from "./ProvidedNodeRenderer";
-export * from "./RelationalGraph";
+// src/components/ModuleCardParser.tsx
+import { asArchivistInstance } from "@xyo-network/archivist-model";
+import { asDivinerInstance } from "@xyo-network/diviner-model";
+import { ArchivistCard } from "@xyo-network/react-archivist";
+import { DivinerCard, ModuleCard } from "@xyo-network/react-module";
+import { jsx } from "react/jsx-runtime";
+var ModuleCardParser = ({ module }) => {
+  switch (true) {
+    case module?.config.schema.includes("archivist"):
+      return /* @__PURE__ */ jsx(ArchivistCard, { module: asArchivistInstance(module) });
+    case module?.config.schema.includes("diviner"):
+      return /* @__PURE__ */ jsx(DivinerCard, { module: asDivinerInstance(module) });
+    default:
+      return /* @__PURE__ */ jsx(ModuleCard, { module });
+  }
+};
+
+// src/components/ProvidedNodeRenderer.tsx
+import { useProvidedNode } from "@xyo-network/react-node";
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/Cytoscape/CytoscapeElements.ts
+import { isNodeInstance as isNodeInstance2 } from "@xyo-network/node-model";
+
+// src/Cytoscape/lib/encodeSvg.ts
+import { renderToStaticMarkup } from "react-dom/server";
+var dataUri = "data:image/svg+xml,";
+var encodeSvg = (reactElement, color) => {
+  const svgString = renderToStaticMarkup(reactElement);
+  const doc = new DOMParser().parseFromString(svgString, "text/html");
+  const svgElement = doc.getElementsByTagName("svg")[0];
+  if (svgElement) {
+    svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgElement.setAttribute("height", "100");
+    svgElement.style.fill = color ?? "black";
+  }
+  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`;
+};
+
+// src/Cytoscape/lib/iconMap.ts
+var generateIconMap = () => ({
+  archivist: "",
+  bridge: "",
+  diviner: "",
+  module: "",
+  node: "",
+  sentinel: "",
+  witness: ""
+});
+
+// src/Cytoscape/lib/layout/ConcentricLayout.ts
+var ConcentricLayout = {
+  concentric: function(node) {
+    return node.degree();
+  },
+  levelWidth: function() {
+    return 2;
+  },
+  minNodeSpacing: 75,
+  name: "concentric"
+};
+
+// src/Cytoscape/lib/parseModuleType.ts
+import { isArchivistInstance } from "@xyo-network/archivist-model";
+import { isBridgeInstance } from "@xyo-network/bridge-model";
+import { isDivinerInstance } from "@xyo-network/diviner-model";
+import { isNodeInstance } from "@xyo-network/node-model";
+import { isSentinelInstance } from "@xyo-network/sentinel";
+import { isWitnessModule } from "@xyo-network/witness";
+var parseModuleType = (module) => {
+  let type = "module";
+  if (module) {
+    if (isArchivistInstance(module)) {
+      type = "archivist";
+    } else if (isBridgeInstance(module)) {
+      type = "bridge";
+    } else if (isDivinerInstance(module)) {
+      type = "diviner";
+    } else if (isNodeInstance(module)) {
+      type = "node";
+    } else if (isSentinelInstance(module)) {
+      type = "sentinel";
+    } else if (isWitnessModule(module)) {
+      type = "witness";
+    } else {
+      type = "module";
+    }
+  }
+  return type;
+};
+
+// src/Cytoscape/CytoscapeElements.ts
+var CytoscapeElements = class _CytoscapeElements {
+  static MaxNameLength = 20;
+  static buildEdge(rootNode, newNode) {
+    return {
+      data: {
+        id: `${rootNode.data.id}/${newNode.data.id}`,
+        source: rootNode.data.id,
+        target: newNode.data.id
+      }
+    };
+  }
+  static async buildElements(module) {
+    const newRootNode = _CytoscapeElements.buildRootNode(module);
+    const newElements = [newRootNode];
+    try {
+      const childElements = await _CytoscapeElements.recurseNodes(module);
+      childElements?.forEach((module2) => {
+        const newNode = _CytoscapeElements.buildNode(module2, newRootNode.data.id);
+        newElements.push(newNode);
+        const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
+        newElements.push(newEdge);
+      });
+      return newElements;
+    } catch (e) {
+      console.error("error resolving modules", e);
+      return [];
+    }
+  }
+  static buildNode(module, rootNodeId) {
+    const { address, config } = module;
+    const normalizedName = config.name ?? address.substring(0, 8);
+    return {
+      data: {
+        address,
+        id: address,
+        name: normalizedName,
+        rootNodeId,
+        type: parseModuleType(module)
+      }
+    };
+  }
+  static buildRootNode = (module) => {
+    return _CytoscapeElements.buildNode(module);
+  };
+  static normalizeName(name) {
+    if (!name)
+      return;
+    if (name.length > this.MaxNameLength)
+      return `${name.substring(0, 20)}...`;
+    return name;
+  }
+  static async recurseNodes(module, maxTraversals = 1) {
+    let localDepth = 0;
+    const childModules = [];
+    const traverse = async (nestedNode) => {
+      if (localDepth < maxTraversals) {
+        const modules = await nestedNode.resolve(void 0, { direction: "down", maxDepth: 2 });
+        await Promise.all(
+          modules.map(async (child) => {
+            if (child !== nestedNode && isNodeInstance2(child)) {
+              localDepth++;
+              await traverse(child);
+            } else if (child !== module) {
+              childModules.push(child);
+            }
+          })
+        );
+      }
+    };
+    await traverse(module);
+    return childModules;
+  }
+};
+
+// src/Cytoscape/CytoscapeIcons.tsx
+import {
+  BubbleChartRounded as BubbleChartRoundedIcon,
+  Hub as HubIcon,
+  InsertLinkRounded as InsertLinkRoundedIcon,
+  Inventory2Rounded as Inventory2RoundedIcon,
+  QuestionMarkRounded as QuestionMarkRoundedIcon,
+  TimerRounded as TimerRoundedIcon,
+  VisibilityRounded as VisibilityRoundedIcon
+} from "@mui/icons-material";
+var CyIconSet = {
+  archivist: Inventory2RoundedIcon,
+  bridge: InsertLinkRoundedIcon,
+  diviner: BubbleChartRoundedIcon,
+  module: QuestionMarkRoundedIcon,
+  node: HubIcon,
+  sentinel: TimerRoundedIcon,
+  witness: VisibilityRoundedIcon
+};
+
+// src/Cytoscape/CytoscapeStyles.ts
+var NodeIdStyles = (color, outlineColor) => ({
+  selector: "node[name]",
+  style: {
+    color,
+    "font-family": "Lexend Deca, Helvetica, sans-serif",
+    "font-size": 12,
+    "overlay-padding": "6px",
+    "text-halign": "center",
+    "text-outline-color": outlineColor,
+    "text-outline-width": "1px",
+    "text-valign": "top"
+  }
+});
+var NodeStyled = (icons, bgColor, hideLabels = false) => ({
+  selector: "node",
+  style: {
+    "background-color": bgColor,
+    "background-height": "75%",
+    "background-image": (elem) => icons[elem.data("type")],
+    "background-width": "24",
+    label: hideLabels ? void 0 : "data(name)",
+    shape: "round-rectangle"
+  }
+});
+var EdgeStyled = (lineColor, targetArrowColor) => ({
+  selector: "edge",
+  style: {
+    "curve-style": "bezier",
+    "line-color": lineColor,
+    "line-opacity": 0.1,
+    "target-arrow-color": targetArrowColor,
+    "target-arrow-shape": "triangle",
+    width: 3
+  }
+});
+
+// src/hooks/cytoscape/useCytoscapeElements.ts
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { isNodeInstance as isNodeInstance3 } from "@xyo-network/node-model";
+import { useEffect, useState } from "react";
+var useCytoscapeElements = (module) => {
+  const [elements, setElements] = useState([]);
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      if (module) {
+        const newElements = await CytoscapeElements.buildElements(module) ?? [];
+        setElements(newElements);
+      }
+    },
+    [module]
+  );
+  useEffect(() => {
+    let attachedListener = void 0;
+    let detachedListener = void 0;
+    if (module && isNodeInstance3(module)) {
+      attachedListener = module.on("moduleAttached", async () => {
+        const newElements = await CytoscapeElements.buildElements(module) ?? [];
+        setElements(newElements);
+      });
+      detachedListener = module.on("moduleDetached", async () => {
+        const newElements = await CytoscapeElements.buildElements(module) ?? [];
+        setElements(newElements);
+      });
+    }
+    return () => {
+      attachedListener?.();
+      detachedListener?.();
+    };
+  }, [module]);
+  return elements;
+};
+
+// src/hooks/cytoscape/useCytoscapeOptions.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/hooks/cytoscape/useCytoscapeStyle.tsx
+import { useTheme as useTheme2 } from "@mui/material";
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/cytoscape/useIcons.tsx
+import { useTheme } from "@mui/material";
+import { useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var useIcons = () => {
+  const theme = useTheme();
+  const icons = useMemo(() => {
+    const iconMap = generateIconMap();
+    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
+      const icon = /* @__PURE__ */ jsx2(IconComponent, { fontSize: "small" });
+      acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
+      return acc;
+    }, iconMap);
+  }, [theme.palette]);
+  return icons;
+};
+
+// src/hooks/cytoscape/useCytoscapeStyle.tsx
+var useCytoscapeStyle = (hideLabels = false) => {
+  const theme = useTheme2();
+  const icons = useIcons();
+  const style = useMemo2(
+    () => [
+      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
+      NodeStyled(icons, theme.palette.primary.main, hideLabels),
+      EdgeStyled(theme.palette.divider, theme.palette.divider)
+    ],
+    [icons, hideLabels, theme]
+  );
+  return style;
+};
+
+// src/hooks/cytoscape/useCytoscapeOptions.ts
+var useCytoscapeOptions = (elements, style, layout) => {
+  const defaultStyle = useCytoscapeStyle();
+  const options = useMemo3(() => {
+    if (elements && layout && style) {
+      return {
+        elements,
+        layout: layout ?? ConcentricLayout,
+        style: style ?? defaultStyle
+      };
+    }
+  }, [elements, layout, style]);
+  return options;
+};
+
+// src/components/RelationalGraph.tsx
+import { Button, ButtonGroup, styled } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { useShareForwardedRef } from "@xyo-network/react-shared";
+import cytoscape from "cytoscape";
+import { forwardRef, useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var NodeRelationalGraphFlexBox = forwardRef(({ actions, options, ...props }, ref) => {
+  const [cy, setCy] = useState2();
+  const { setCy: setCyContext } = useCytoscapeInstance();
+  const sharedRef = useShareForwardedRef(ref);
+  const handleReset = () => {
+    cy?.reset();
+    cy?.fit(void 0, 20);
+  };
+  useEffect2(() => {
+    if (sharedRef) {
+      const newCy = cytoscape({
+        container: sharedRef.current,
+        ...options
+      });
+      setCy(newCy);
+    }
+  }, [options, sharedRef]);
+  useEffect2(() => {
+    setCyContext?.(cy);
+  }, [cy, setCyContext]);
+  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
+    /* @__PURE__ */ jsx3(ActionsContainer, { children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+      actions,
+      /* @__PURE__ */ jsx3(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
+    ] }) }),
+    /* @__PURE__ */ jsx3(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" })
+  ] });
+});
+NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
+var ActionsContainer = styled(FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
+  flexWrap: "wrap",
+  gap: theme.spacing(1),
+  position: "absolute",
+  right: "10px",
+  top: "10px",
+  zIndex: 2
+}));
+var NodeRelationalGraph = NodeRelationalGraphFlexBox;
+
+// src/components/ProvidedNodeRenderer.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ProvidedNodeRenderer = ({ node, ...props }) => {
+  const [providedNode] = useProvidedNode();
+  const elements = useCytoscapeElements(node ?? providedNode);
+  const options = useCytoscapeOptions(elements);
+  return /* @__PURE__ */ jsx4(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
+};
+export {
+  ModuleCardParser,
+  NodeRelationalGraph,
+  NodeRelationalGraphFlexBox,
+  ProvidedNodeRenderer
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './lib'\nexport * from './ModuleCardParser'\nexport * from './ProvidedNodeRenderer'\nexport * from './RelationalGraph'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ModuleCardParser.tsx","../../../src/components/ProvidedNodeRenderer.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/components/RelationalGraph.tsx"],"sourcesContent":["import { asArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n  module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n  switch (true) {\n    case module?.config.schema.includes('archivist'):\n      return <ArchivistCard module={asArchivistInstance(module)} />\n    case module?.config.schema.includes('diviner'):\n      return <DivinerCard module={asDivinerInstance(module)} />\n    default:\n      return <ModuleCard module={module} />\n  }\n}\n","import { AccountInstance } from '@xyo-network/account-model'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { useProvidedNode } from '@xyo-network/react-node'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../hooks'\nimport { NodeRelationalGraphProps } from './lib'\nimport { NodeRelationalGraphFlexBox } from './RelationalGraph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n  account?: AccountInstance\n  node?: NodeInstance\n}\n\nexport const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {\n  const [providedNode] = useProvidedNode()\n  const elements = useCytoscapeElements(node ?? providedNode)\n  const options = useCytoscapeOptions(elements)\n\n  return <NodeRelationalGraphFlexBox alignItems=\"stretch\" flexGrow={1} height=\"100%\" options={options} {...props} />\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n  static MaxNameLength = 20\n\n  static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n    return {\n      data: {\n        id: `${rootNode.data.id}/${newNode.data.id}`,\n        source: rootNode.data.id,\n        target: newNode.data.id,\n      },\n    }\n  }\n\n  static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n    const newRootNode = CytoscapeElements.buildRootNode(module)\n    const newElements: ElementDefinition[] = [newRootNode]\n\n    try {\n      const childElements = await CytoscapeElements.recurseNodes(module)\n      childElements?.forEach((module) => {\n        const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)\n        newElements.push(newNode)\n\n        const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n        newElements.push(newEdge)\n      })\n\n      return newElements\n    } catch (e) {\n      console.error('error resolving modules', e)\n      return []\n    }\n  }\n\n  static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {\n    const { address, config } = module\n    const normalizedName = config.name ?? address.substring(0, 8)\n    return {\n      data: {\n        address,\n        id: address,\n        name: normalizedName,\n        rootNodeId,\n        type: parseModuleType(module),\n      },\n    }\n  }\n\n  static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n    return CytoscapeElements.buildNode(module)\n  }\n\n  static normalizeName(name?: string) {\n    if (!name) return\n    if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n    return name\n  }\n\n  static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n    let localDepth = 0\n    const childModules: ModuleInstance[] = []\n\n    const traverse = async (nestedNode: ModuleInstance) => {\n      if (localDepth < maxTraversals) {\n        const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n        await Promise.all(\n          modules.map(async (child) => {\n            if (child !== nestedNode && isNodeInstance(child)) {\n              localDepth++\n              await traverse(child)\n              // don't re add the root module that was passed in\n            } else if (child !== module) {\n              childModules.push(child)\n            }\n          }),\n        )\n      }\n    }\n\n    await traverse(module)\n\n    return childModules\n  }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n  const svgString = renderToStaticMarkup(reactElement)\n\n  const doc = new DOMParser().parseFromString(svgString, 'text/html')\n  const svgElement = doc.getElementsByTagName('svg')[0]\n  if (svgElement) {\n    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n    svgElement.setAttribute('height', '100')\n    svgElement.style.fill = color ?? 'black'\n  }\n\n  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n  archivist: '',\n  bridge: '',\n  diviner: '',\n  module: '',\n  node: '',\n  sentinel: '',\n  witness: '',\n})\n","import { CytoscapeOptions } from 'cytoscape'\n\nexport const ConcentricLayout: CytoscapeOptions['layout'] = {\n  concentric: function (node) {\n    return node.degree()\n  },\n  levelWidth: function () {\n    return 2\n  },\n  minNodeSpacing: 75,\n  name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n  let type: CyNodeModuleTypes = 'module'\n  if (module) {\n    if (isArchivistInstance(module)) {\n      type = 'archivist'\n    } else if (isBridgeInstance(module)) {\n      type = 'bridge'\n    } else if (isDivinerInstance(module)) {\n      type = 'diviner'\n    } else if (isNodeInstance(module)) {\n      type = 'node'\n    } else if (isSentinelInstance(module)) {\n      type = 'sentinel'\n    } else if (isWitnessModule(module)) {\n      type = 'witness'\n    } else {\n      type = 'module'\n    }\n  }\n  return type\n}\n","import {\n  BubbleChartRounded as BubbleChartRoundedIcon,\n  Hub as HubIcon,\n  InsertLinkRounded as InsertLinkRoundedIcon,\n  Inventory2Rounded as Inventory2RoundedIcon,\n  QuestionMarkRounded as QuestionMarkRoundedIcon,\n  TimerRounded as TimerRoundedIcon,\n  VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n  archivist: Inventory2RoundedIcon,\n  bridge: InsertLinkRoundedIcon,\n  diviner: BubbleChartRoundedIcon,\n  module: QuestionMarkRoundedIcon,\n  node: HubIcon,\n  sentinel: TimerRoundedIcon,\n  witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n  const [elements, setElements] = useState<ElementDefinition[]>([])\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      if (module) {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      }\n    },\n    [module],\n  )\n\n  useEffect(() => {\n    let attachedListener: EventUnsubscribeFunction | undefined = undefined\n    let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n    if (module && isNodeInstance(module)) {\n      attachedListener = module.on('moduleAttached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n      detachedListener = module.on('moduleDetached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n    }\n\n    return () => {\n      attachedListener?.()\n      detachedListener?.()\n    }\n  }, [module])\n\n  return elements\n}\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n  elements: CytoscapeOptions['elements'],\n  style?: CytoscapeOptions['style'],\n  layout?: CytoscapeOptions['layout'],\n) => {\n  const defaultStyle = useCytoscapeStyle()\n\n  const options = useMemo<CytoscapeOptions | undefined>(() => {\n    if (elements && layout && style) {\n      return {\n        elements,\n        layout: layout ?? ConcentricLayout,\n        style: style ?? defaultStyle,\n      }\n    }\n  }, [elements, layout, style])\n\n  return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n  const theme = useTheme()\n  const icons = useIcons()\n\n  const style: CytoscapeOptions['style'] = useMemo(\n    () => [\n      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n      NodeStyled(icons, theme.palette.primary.main, hideLabels),\n      EdgeStyled(theme.palette.divider, theme.palette.divider),\n    ],\n    [icons, hideLabels, theme],\n  )\n\n  return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n  const theme = useTheme()\n  const icons = useMemo(() => {\n    const iconMap = generateIconMap()\n    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n      const icon = <IconComponent fontSize=\"small\" />\n      acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n      return acc\n    }, iconMap)\n  }, [theme.palette])\n\n  return icons\n}\n","import { Button, ButtonGroup, styled } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../contexts'\nimport { NodeRelationalGraphProps } from './lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, options, ...props }, ref) => {\n  const [cy, setCy] = useState<Core>()\n  const { setCy: setCyContext } = useCytoscapeInstance()\n  const sharedRef = useShareForwardedRef(ref)\n\n  const handleReset = () => {\n    cy?.reset()\n    cy?.fit(undefined, 20)\n  }\n\n  useEffect(() => {\n    if (sharedRef) {\n      const newCy = cytoscape({\n        container: sharedRef.current,\n        ...options,\n      })\n      setCy(newCy)\n    }\n  }, [options, sharedRef])\n\n  useEffect(() => {\n    setCyContext?.(cy)\n  }, [cy, setCyContext])\n\n  return (\n    <FlexCol {...props}>\n      <ActionsContainer>\n        <ButtonGroup>\n          {actions}\n          <Button size={'small'} variant={'contained'} onClick={handleReset}>\n            Reset\n          </Button>\n        </ButtonGroup>\n      </ActionsContainer>\n      {/* Cytoscape Element */}\n      <FlexCol alignItems=\"stretch\" height=\"100%\" position=\"absolute\" ref={sharedRef} width=\"100%\"></FlexCol>\n    </FlexCol>\n  )\n})\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\nconst ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({\n  flexWrap: 'wrap',\n  gap: theme.spacing(1),\n  position: 'absolute',\n  right: '10px',\n  top: '10px',\n  zIndex: 2,\n}))\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n"],"mappings":"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","names":["isNodeInstance","module","isNodeInstance","isNodeInstance","isNodeInstance","useMemo","useTheme","useMemo","jsx","useTheme","useMemo","useMemo","useEffect","useState","jsx","useState","useEffect","jsx"]}

package/dist/browser/components/lib/index.js

@@ -1,2 +1 @@
-export * from "./RelationalGraphProps";
 //# sourceMappingURL=index.js.map

package/dist/browser/components/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/lib/index.ts"],"sourcesContent":["export * from './RelationalGraphProps'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/browser/components/story/TestData.js

@@ -1,4 +1,5 @@
-const elements = [
+// src/components/story/TestData.tsx
+var elements = [
   {
     // node a
     data: { id: "a", name: "element a" }
@@ -20,7 +21,7 @@ const elements = [
     data: { id: "ac", source: "a", target: "c" }
   }
 ];
-const style = [
+var style = [
   {
     selector: "node",
     style: {
@@ -38,7 +39,7 @@ const style = [
     }
   }
 ];
-const options = {
+var options = {
   elements,
   style
 };

package/dist/browser/components/story/TestData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/story/TestData.tsx"],"sourcesContent":["import { CytoscapeOptions } from 'cytoscape'\n\nconst elements: CytoscapeOptions['elements'] = [\n  {\n    // node a\n    data: { id: 'a', name: 'element a' },\n  },\n  {\n    // node b\n    data: { id: 'b', name: 'element b' },\n  },\n  {\n    // node c\n    data: { id: 'c', name: 'element c' },\n  },\n  {\n    // edge ab\n    data: { id: 'ab', source: 'a', target: 'b' },\n  },\n  {\n    // edge ac\n    data: { id: 'ac', source: 'a', target: 'c' },\n  },\n]\n\nconst style: CytoscapeOptions['style'] = [\n  {\n    selector: 'node',\n    style: {\n      label: 'data(id)',\n    },\n  },\n\n  {\n    selector: 'edge',\n    style: {\n      'curve-style': 'bezier',\n      'line-color': '#ccc',\n      'target-arrow-color': '#ccc',\n      'target-arrow-shape': 'triangle',\n      width: 3,\n    },\n  },\n]\n\nexport const options: CytoscapeOptions = {\n  elements,\n  style,\n}\n"],"mappings":"AAEA,MAAM,WAAyC;AAAA,EAC7C;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AACF;AAEA,MAAM,QAAmC;AAAA,EACvC;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,eAAe;AAAA,MACf,cAAc;AAAA,MACd,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,UAA4B;AAAA,EACvC;AAAA,EACA;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/story/TestData.tsx"],"sourcesContent":["import { CytoscapeOptions } from 'cytoscape'\n\nconst elements: CytoscapeOptions['elements'] = [\n  {\n    // node a\n    data: { id: 'a', name: 'element a' },\n  },\n  {\n    // node b\n    data: { id: 'b', name: 'element b' },\n  },\n  {\n    // node c\n    data: { id: 'c', name: 'element c' },\n  },\n  {\n    // edge ab\n    data: { id: 'ab', source: 'a', target: 'b' },\n  },\n  {\n    // edge ac\n    data: { id: 'ac', source: 'a', target: 'c' },\n  },\n]\n\nconst style: CytoscapeOptions['style'] = [\n  {\n    selector: 'node',\n    style: {\n      label: 'data(id)',\n    },\n  },\n\n  {\n    selector: 'edge',\n    style: {\n      'curve-style': 'bezier',\n      'line-color': '#ccc',\n      'target-arrow-color': '#ccc',\n      'target-arrow-shape': 'triangle',\n      width: 3,\n    },\n  },\n]\n\nexport const options: CytoscapeOptions = {\n  elements,\n  style,\n}\n"],"mappings":";AAEA,IAAM,WAAyC;AAAA,EAC7C;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AACF;AAEA,IAAM,QAAmC;AAAA,EACvC;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,eAAe;AAAA,MACf,cAAc;AAAA,MACd,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,IAAM,UAA4B;AAAA,EACvC;AAAA,EACA;AACF;","names":[]}

package/dist/browser/components/story/index.js

@@ -1,2 +1,49 @@
-export * from "./TestData";
+// src/components/story/TestData.tsx
+var elements = [
+  {
+    // node a
+    data: { id: "a", name: "element a" }
+  },
+  {
+    // node b
+    data: { id: "b", name: "element b" }
+  },
+  {
+    // node c
+    data: { id: "c", name: "element c" }
+  },
+  {
+    // edge ab
+    data: { id: "ab", source: "a", target: "b" }
+  },
+  {
+    // edge ac
+    data: { id: "ac", source: "a", target: "c" }
+  }
+];
+var style = [
+  {
+    selector: "node",
+    style: {
+      label: "data(id)"
+    }
+  },
+  {
+    selector: "edge",
+    style: {
+      "curve-style": "bezier",
+      "line-color": "#ccc",
+      "target-arrow-color": "#ccc",
+      "target-arrow-shape": "triangle",
+      width: 3
+    }
+  }
+];
+var options = {
+  elements,
+  style
+};
+export {
+  options
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/story/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/story/index.ts"],"sourcesContent":["export * from './TestData'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/story/TestData.tsx"],"sourcesContent":["import { CytoscapeOptions } from 'cytoscape'\n\nconst elements: CytoscapeOptions['elements'] = [\n  {\n    // node a\n    data: { id: 'a', name: 'element a' },\n  },\n  {\n    // node b\n    data: { id: 'b', name: 'element b' },\n  },\n  {\n    // node c\n    data: { id: 'c', name: 'element c' },\n  },\n  {\n    // edge ab\n    data: { id: 'ab', source: 'a', target: 'b' },\n  },\n  {\n    // edge ac\n    data: { id: 'ac', source: 'a', target: 'c' },\n  },\n]\n\nconst style: CytoscapeOptions['style'] = [\n  {\n    selector: 'node',\n    style: {\n      label: 'data(id)',\n    },\n  },\n\n  {\n    selector: 'edge',\n    style: {\n      'curve-style': 'bezier',\n      'line-color': '#ccc',\n      'target-arrow-color': '#ccc',\n      'target-arrow-shape': 'triangle',\n      width: 3,\n    },\n  },\n]\n\nexport const options: CytoscapeOptions = {\n  elements,\n  style,\n}\n"],"mappings":";AAEA,IAAM,WAAyC;AAAA,EAC7C;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AACF;AAEA,IAAM,QAAmC;AAAA,EACvC;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,eAAe;AAAA,MACf,cAAc;AAAA,MACd,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,IAAM,UAA4B;AAAA,EACvC;AAAA,EACA;AACF;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/Context.js

@@ -1,5 +1,6 @@
+// src/contexts/CytoscapeInstance/Context.ts
 import { createContextEx } from "@xyo-network/react-shared";
-const CytoscapeInstanceContext = createContextEx();
+var CytoscapeInstanceContext = createContextEx();
 export {
   CytoscapeInstanceContext
 };

package/dist/browser/contexts/CytoscapeInstance/Context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/Context.ts"],"sourcesContent":["import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n"],"mappings":"AAAA,SAAS,uBAAuB;AAIzB,MAAM,2BAA2B,gBAAwC;","names":[]}
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/Context.ts"],"sourcesContent":["import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n"],"mappings":";AAAA,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/Provider.js

@@ -1,7 +1,13 @@
-import { jsx } from "react/jsx-runtime";
+// src/contexts/CytoscapeInstance/Provider.tsx
 import { useEffect, useState } from "react";
-import { CytoscapeInstanceContext } from "./Context";
-const CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/Provider.tsx
+import { jsx } from "react/jsx-runtime";
+var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
   const [cy, setCy] = useState(defaultInstance);
   useEffect(() => {
     setCy(defaultInstance);

package/dist/browser/contexts/CytoscapeInstance/Provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/Provider.tsx"],"sourcesContent":["import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n  defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n  const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n  useEffect(() => {\n    setCy(defaultInstance)\n  }, [defaultInstance])\n\n  return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n"],"mappings":"AAgBS;AAdT,SAAS,WAAW,gBAAgB;AAEpC,SAAS,gCAAgC;AAMlC,MAAM,4BAAsE,CAAC,EAAE,UAAU,gBAAgB,MAAM;AACpH,QAAM,CAAC,IAAI,KAAK,IAAI,SAA2B,eAAe;AAC9D,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,eAAe,CAAC;AAEpB,SAAO,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,EAAE,IAAI,UAAU,MAAM,MAAM,GAAI,UAAS;AAC5F;","names":[]}
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/Provider.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts"],"sourcesContent":["import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n  defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n  const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n  useEffect(() => {\n    setCy(defaultInstance)\n  }, [defaultInstance])\n\n  return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;;;ACFpC,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ADYvE;AANF,IAAM,4BAAsE,CAAC,EAAE,UAAU,gBAAgB,MAAM;AACpH,QAAM,CAAC,IAAI,KAAK,IAAI,SAA2B,eAAe;AAC9D,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,eAAe,CAAC;AAEpB,SAAO,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,EAAE,IAAI,UAAU,MAAM,MAAM,GAAI,UAAS;AAC5F;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/index.js

@@ -1,5 +1,24 @@
-export * from "./Context";
-export * from "./Provider";
-export * from "./State";
-export * from "./use";
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/Provider.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+  const [cy, setCy] = useState(defaultInstance);
+  useEffect(() => {
+    setCy(defaultInstance);
+  }, [defaultInstance]);
+  return /* @__PURE__ */ jsx(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
+};
+
+// src/contexts/CytoscapeInstance/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+export {
+  CytoscapeInstanceContext,
+  CytoscapeInstanceProvider,
+  useCytoscapeInstance
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/contexts/CytoscapeInstance/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/index.ts"],"sourcesContent":["export * from './Context'\nexport * from './Provider'\nexport * from './State'\nexport * from './use'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/Provider.tsx","../../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n  defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n  const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n  useEffect(() => {\n    setCy(defaultInstance)\n  }, [defaultInstance])\n\n  return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":";AAAA,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACFhF,SAAS,WAAW,gBAAgB;AAc3B;AANF,IAAM,4BAAsE,CAAC,EAAE,UAAU,gBAAgB,MAAM;AACpH,QAAM,CAAC,IAAI,KAAK,IAAI,SAA2B,eAAe;AAC9D,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,eAAe,CAAC;AAEpB,SAAO,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,EAAE,IAAI,UAAU,MAAM,MAAM,GAAI,UAAS;AAC5F;;;ACjBA,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/use.js

@@ -1,6 +1,12 @@
+// src/contexts/CytoscapeInstance/use.ts
 import { useContextEx } from "@xyo-network/react-shared";
-import { CytoscapeInstanceContext } from "./Context";
-const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/use.ts
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
 export {
   useCytoscapeInstance
 };

package/dist/browser/contexts/CytoscapeInstance/use.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":"AAAA,SAAS,oBAAoB;AAE7B,SAAS,gCAAgC;AAElC,MAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/contexts/CytoscapeInstance/Context.ts"],"sourcesContent":["import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n"],"mappings":";AAAA,SAAS,oBAAoB;;;ACA7B,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ADAzE,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;","names":[]}