@awesome-flow/ecs 0.3.0 → 0.5.0

package/dist/index.js

@@ -35,80 +35,22 @@ var EcsFlowRepository = class {
   }
 };
 
-// src/flow/flow-ecs-state.tsx
-import { useEffect as useEffect7, useContext as useContext10, useState as useState3 } from "react";
-
-// src/flow/flow-ecs-auto-layout.tsx
-import { FlowContext } from "@awesome-flow/core/abstract";
-import Dagre from "@dagrejs/dagre";
-import { useReactFlow } from "@xyflow/react";
-import { useCallback, useContext, useEffect, useMemo } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-function FlowEcsAutoLayout(props) {
-  const { getNodes, getEdges } = useReactFlow();
-  const context = useContext(FlowContext);
-  const setNodes = context.useFlowStore((state) => state.setNodes);
-  const graph = useMemo(() => new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);
-  const getLayoutElements = useCallback(
-    (nodes, edges, options) => {
-      graph.setGraph(options);
-      edges.forEach((edge) => graph.setEdge(edge.source, edge.target));
-      nodes.forEach((node) => {
-        if (node.measured) {
-          graph.setNode(node.id, {
-            width: node.measured.width,
-            height: node.measured.height
-          });
-        }
-      });
-      Dagre.layout(graph);
-      return {
-        nodes: nodes.map((node) => {
-          const graphNode = graph.node(node.id);
-          if (graphNode) {
-            return { ...node, position: { x: graphNode.x, y: graphNode.y } };
-          }
-          return node;
-        }),
-        edges
-      };
-    },
-    [graph]
-  );
-  useEffect(() => {
-    if (props.needsLayout) {
-      const storeNodes = getNodes();
-      if (storeNodes?.length) {
-        const edges = getEdges();
-        const layout = getLayoutElements(storeNodes, edges, {
-          rankdir: "LR"
-        });
-        setNodes(layout.nodes);
-      }
-    }
-  }, [props.needsLayout]);
-  useEffect(() => {
-    if (props.needsLayout) {
-      props.setNeedsLayout(false);
-    }
-  });
-  return /* @__PURE__ */ jsx(Fragment, {});
-}
-var flow_ecs_auto_layout_default = FlowEcsAutoLayout;
-
-// src/flow/flow-ecs-entities.tsx
-import { FlowContext as FlowContext4 } from "@awesome-flow/core/abstract";
-import { useContext as useContext8, useEffect as useEffect5, useState as useState2 } from "react";
+// src/abstract/handle-types.ts
+var EcsHandleDataType = /* @__PURE__ */ ((EcsHandleDataType2) => {
+  EcsHandleDataType2["proxy"] = "proxy";
+  EcsHandleDataType2["module"] = "module";
+  return EcsHandleDataType2;
+})(EcsHandleDataType || {});
 
 // src/nodes/node-systems-module.tsx
 import { NodeContainer } from "@awesome-flow/core/layout";
-import { useContext as useContext2 } from "react";
+import { useContext } from "react";
 import { Badge as Badge3 } from "@mantine/core";
 
 // src/layout/systems-module-layout.tsx
 import { SystemType } from "@awesome-ecs/abstract/systems";
 import { Accordion as Accordion2, Text } from "@mantine/core";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/components/pipeline-middleware-list.tsx
 import { Accordion, Badge as Badge2, Stack } from "@mantine/core";
@@ -118,9 +60,9 @@ import { Badge } from "@mantine/core";
 import { memo as memo2 } from "react";
 
 // src/components/formatter-camel-case.tsx
-import { memo, useMemo as useMemo2 } from "react";
+import { memo, useMemo } from "react";
 function CamelCaseFormatter(props) {
-  const value = useMemo2(
+  const value = useMemo(
     () => props.value?.toString().replace(/([a-z])([A-Z])/g, "$1 $2"),
     [props.value]
   );
@@ -129,16 +71,16 @@ function CamelCaseFormatter(props) {
 var formatter_camel_case_default = memo(CamelCaseFormatter);
 
 // src/components/badge-list.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function BadgeList(props) {
   return props.items.map((value, i) => {
-    return /* @__PURE__ */ jsx2(Badge, { ...props.badge || [], children: /* @__PURE__ */ jsx2(formatter_camel_case_default, { value }) }, i);
+    return /* @__PURE__ */ jsx(Badge, { ...props.badge || [], children: /* @__PURE__ */ jsx(formatter_camel_case_default, { value }) }, i);
   });
 }
 var badge_list_default = memo2(BadgeList);
 
 // src/components/pipeline-middleware-list.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function PipelineMiddlewareList(props) {
   let middleware = [];
   if (props.pipeline) {
@@ -148,54 +90,54 @@ function PipelineMiddlewareList(props) {
     return m.name || m.constructor.name;
   });
   return /* @__PURE__ */ jsxs(Accordion.Item, { value: props.label, children: [
-    /* @__PURE__ */ jsx3(Accordion.Control, { children: /* @__PURE__ */ jsx3(Badge2, { fullWidth: true, variant: "light", rightSection: components.length, children: props.label }) }),
-    /* @__PURE__ */ jsx3(Accordion.Panel, { children: /* @__PURE__ */ jsx3(Stack, { children: /* @__PURE__ */ jsx3(badge_list_default, { items: components, badge: { variant: "outline" } }) }) })
+    /* @__PURE__ */ jsx2(Accordion.Control, { children: /* @__PURE__ */ jsx2(Badge2, { fullWidth: true, variant: "light", rightSection: components.length, children: props.label }) }),
+    /* @__PURE__ */ jsx2(Accordion.Panel, { children: /* @__PURE__ */ jsx2(Stack, { children: /* @__PURE__ */ jsx2(badge_list_default, { items: components, badge: { variant: "outline" } }) }) })
   ] }, props.label);
 }
 var pipeline_middleware_list_default = PipelineMiddlewareList;
 
 // src/layout/systems-module-layout.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function SystemsModuleLayout(props) {
   const { module } = props;
   const runtimeContext = module["runtimeContext"];
   const { systemContext } = runtimeContext;
-  const { status } = useMemo3(() => {
+  const { status } = useMemo2(() => {
     return systemContext.runtime;
   }, [systemContext.runtime.status]);
   const init = runtimeContext.systemPipelines.get(SystemType.initialize);
   const update = runtimeContext.systemPipelines.get(SystemType.update);
   const render = runtimeContext.systemPipelines.get(SystemType.render);
   const sync = runtimeContext.systemPipelines.get(SystemType.sync);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsxs2(Text, { children: [
       "Status: ",
       status
     ] }),
     /* @__PURE__ */ jsxs2(Accordion2, { children: [
-      init && /* @__PURE__ */ jsx4(pipeline_middleware_list_default, { pipeline: init, label: "Initialize" }),
-      update && /* @__PURE__ */ jsx4(pipeline_middleware_list_default, { pipeline: update, label: "Update" }),
-      render && /* @__PURE__ */ jsx4(pipeline_middleware_list_default, { pipeline: render, label: "Render" }),
-      sync && /* @__PURE__ */ jsx4(pipeline_middleware_list_default, { pipeline: sync, label: "Sync" })
+      init && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: init, label: "Initialize" }),
+      update && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: update, label: "Update" }),
+      render && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: render, label: "Render" }),
+      sync && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: sync, label: "Sync" })
     ] })
   ] });
 }
 var systems_module_layout_default = SystemsModuleLayout;
 
 // src/nodes/node-systems-module.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function SystemsModuleNode({ id, data, selected, type }) {
-  const { systemsModuleRepository } = useContext2(EcsFlowContext);
+  const { systemsModuleRepository } = useContext(EcsFlowContext);
   const module = systemsModuleRepository.get(data.entityType);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     NodeContainer,
     {
       id,
       selected,
       data,
-      title: /* @__PURE__ */ jsx5(Badge3, { fullWidth: true, color: "indigo", variant: "transparent", children: /* @__PURE__ */ jsx5(formatter_camel_case_default, { value: data.entityType }) }),
+      title: /* @__PURE__ */ jsx4(Badge3, { fullWidth: true, color: "indigo", variant: "transparent", children: /* @__PURE__ */ jsx4(formatter_camel_case_default, { value: data.entityType }) }),
       type,
-      children: /* @__PURE__ */ jsx5(systems_module_layout_default, { type: data.entityType, module })
+      children: /* @__PURE__ */ jsx4(systems_module_layout_default, { type: data.entityType, module })
     }
   );
 }
@@ -204,7 +146,7 @@ var node_systems_module_default = SystemsModuleNode;
 // src/nodes/node-entity.tsx
 import { NodeContainer as NodeContainer2 } from "@awesome-flow/core/layout";
 import { Badge as Badge9 } from "@mantine/core";
-import { useContext as useContext5, useMemo as useMemo6 } from "react";
+import { useContext as useContext4, useMemo as useMemo5 } from "react";
 
 // src/layout/entity-layout.tsx
 import { Accordion as Accordion6, Badge as Badge8, Divider, Group } from "@mantine/core";
@@ -215,43 +157,43 @@ import { memo as memo5 } from "react";
 
 // src/components/entity-component-inspector.tsx
 import { Box, Button, Collapse } from "@mantine/core";
-import { memo as memo4, useMemo as useMemo5 } from "react";
+import { memo as memo4, useMemo as useMemo4 } from "react";
 import { useDisclosure } from "@mantine/hooks";
 
 // src/components/object-inspector.tsx
 import { useComputedColorScheme } from "@mantine/core";
-import { memo as memo3, useMemo as useMemo4 } from "react";
+import { memo as memo3, useMemo as useMemo3 } from "react";
 import { Inspector } from "react-inspector";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ObjectInspector(props) {
   const colorScheme = useComputedColorScheme();
-  const theme = useMemo4(
+  const theme = useMemo3(
     () => colorScheme === "dark" ? "chromeDark" : "chromeLight",
     [colorScheme]
   );
-  return /* @__PURE__ */ jsx6(Inspector, { table: false, theme, data: props.data });
+  return /* @__PURE__ */ jsx5(Inspector, { table: false, theme, data: props.data });
 }
 var object_inspector_default = memo3(ObjectInspector);
 
 // src/components/entity-component-inspector.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function EntityComponentInspector(props) {
   const [opened, { toggle }] = useDisclosure(false);
-  const buttonColor = useMemo5(() => opened ? "light" : "indigo", [opened]);
+  const buttonColor = useMemo4(() => opened ? "light" : "indigo", [opened]);
   return /* @__PURE__ */ jsxs3(Box, { children: [
-    /* @__PURE__ */ jsx7(Button, { variant: "outline", size: "xs", onClick: toggle, color: buttonColor, fullWidth: true, children: props.component.componentType }),
-    /* @__PURE__ */ jsx7(Collapse, { in: opened, children: opened && /* @__PURE__ */ jsx7(object_inspector_default, { data: props.component }) })
+    /* @__PURE__ */ jsx6(Button, { variant: "outline", size: "xs", onClick: toggle, color: buttonColor, fullWidth: true, children: props.component.componentType }),
+    /* @__PURE__ */ jsx6(Collapse, { in: opened, children: opened && /* @__PURE__ */ jsx6(object_inspector_default, { data: props.component }) })
   ] });
 }
 var entity_component_inspector_default = memo4(EntityComponentInspector);
 
 // src/components/entity-component-list.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function EntityComponentList(props) {
   const components = Array.from(props.entity.components.values());
   return /* @__PURE__ */ jsxs4(Accordion3.Item, { value: "components", children: [
-    /* @__PURE__ */ jsx8(Accordion3.Control, { children: /* @__PURE__ */ jsx8(Badge4, { fullWidth: true, variant: "light", rightSection: components.length, children: "Components" }) }),
-    /* @__PURE__ */ jsx8(Accordion3.Panel, { children: /* @__PURE__ */ jsx8(Stack2, { children: components.map((c, i) => /* @__PURE__ */ jsx8(entity_component_inspector_default, { component: c }, i)) }) })
+    /* @__PURE__ */ jsx7(Accordion3.Control, { children: /* @__PURE__ */ jsx7(Badge4, { fullWidth: true, variant: "light", rightSection: components.length, children: "Components" }) }),
+    /* @__PURE__ */ jsx7(Accordion3.Panel, { children: /* @__PURE__ */ jsx7(Stack2, { children: components.map((c, i) => /* @__PURE__ */ jsx7(entity_component_inspector_default, { component: c }, i)) }) })
   ] }, "components");
 }
 var entity_component_list_default = memo5(EntityComponentList);
@@ -259,41 +201,41 @@ var entity_component_list_default = memo5(EntityComponentList);
 // src/components/entity-proxy-list.tsx
 import { Accordion as Accordion4, Badge as Badge5, Stack as Stack3 } from "@mantine/core";
 import { memo as memo6 } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function EntityProxyList(props) {
   const proxies = Array.from(props.entity.proxies.values()).map((c) => c.values());
   const items = proxies.map((p) => Array.from(p).map((k) => EcsIdGenerator.entityProxy(k))).flat();
   return /* @__PURE__ */ jsxs5(Accordion4.Item, { value: "proxies", children: [
-    /* @__PURE__ */ jsx9(Accordion4.Control, { children: /* @__PURE__ */ jsx9(Badge5, { fullWidth: true, variant: "light", rightSection: items.length, children: "Proxies" }) }),
-    /* @__PURE__ */ jsx9(Accordion4.Panel, { children: /* @__PURE__ */ jsx9(Stack3, { children: /* @__PURE__ */ jsx9(badge_list_default, { items, badge: { variant: "outline" } }) }) })
+    /* @__PURE__ */ jsx8(Accordion4.Control, { children: /* @__PURE__ */ jsx8(Badge5, { fullWidth: true, variant: "light", rightSection: items.length, children: "Proxies" }) }),
+    /* @__PURE__ */ jsx8(Accordion4.Panel, { children: /* @__PURE__ */ jsx8(Stack3, { children: /* @__PURE__ */ jsx8(badge_list_default, { items, badge: { variant: "outline" } }) }) })
   ] }, "proxies");
 }
 var entity_proxy_list_default = memo6(EntityProxyList);
 
 // src/components/entity-subscription-list.tsx
 import { Accordion as Accordion5, Badge as Badge6, Stack as Stack4 } from "@mantine/core";
-import { memo as memo7, useContext as useContext3 } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { memo as memo7, useContext as useContext2 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function EntitySubscriptionList(props) {
-  const { entityEventsManager } = useContext3(EcsFlowContext);
+  const { entityEventsManager } = useContext2(EcsFlowContext);
   const subscriptions = entityEventsManager.getSubscriptionsForEntity(props.entity.myProxy);
   return /* @__PURE__ */ jsxs6(Accordion5.Item, { value: "subscriptions", children: [
-    /* @__PURE__ */ jsx10(Accordion5.Control, { children: /* @__PURE__ */ jsx10(Badge6, { fullWidth: true, variant: "light", rightSection: subscriptions.length, children: "Events" }) }),
-    /* @__PURE__ */ jsx10(Accordion5.Panel, { children: /* @__PURE__ */ jsx10(Stack4, { children: /* @__PURE__ */ jsx10(badge_list_default, { items: subscriptions, badge: { variant: "outline" } }) }) })
+    /* @__PURE__ */ jsx9(Accordion5.Control, { children: /* @__PURE__ */ jsx9(Badge6, { fullWidth: true, variant: "light", rightSection: subscriptions.length, children: "Events" }) }),
+    /* @__PURE__ */ jsx9(Accordion5.Panel, { children: /* @__PURE__ */ jsx9(Stack4, { children: /* @__PURE__ */ jsx9(badge_list_default, { items: subscriptions, badge: { variant: "outline" } }) }) })
   ] }, "subscriptions");
 }
 var entity_subscription_list_default = memo7(EntitySubscriptionList);
 
 // src/components/entity-update-counter.tsx
 import { Badge as Badge7 } from "@mantine/core";
-import { memo as memo8, useContext as useContext4, useEffect as useEffect2, useState } from "react";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { memo as memo8, useContext as useContext3, useEffect, useState } from "react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function EntityUpdateCounter(props) {
   const [, setRefresh] = useState(0);
-  const { entityUpdateCounter } = useContext4(EcsFlowContext);
+  const { entityUpdateCounter } = useContext3(EcsFlowContext);
   const updates = entityUpdateCounter.getUpdateCount(props.entityUid) || 0;
   const removes = entityUpdateCounter.getRemoveCount(props.entityUid) || 0;
-  useEffect2(() => {
+  useEffect(() => {
     const interval = setInterval(() => {
       setRefresh((refresh) => refresh + 1);
     }, 1e3);
@@ -302,129 +244,104 @@ function EntityUpdateCounter(props) {
       clearInterval(interval);
     };
   }, []);
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx11(Badge7, { variant: "light", children: updates }),
-    /* @__PURE__ */ jsx11(Badge7, { variant: "light", color: "orange", children: removes })
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(Badge7, { variant: "light", children: updates }),
+    /* @__PURE__ */ jsx10(Badge7, { variant: "light", color: "orange", children: removes })
   ] });
 }
 var entity_update_counter_default = memo8(EntityUpdateCounter);
 
 // src/layout/entity-layout.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function EntityLayout({ entity }) {
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
     /* @__PURE__ */ jsxs8(Group, { children: [
-      /* @__PURE__ */ jsx12(Badge8, { variant: "outline", color: "orange", children: entity.myProxy.entityUid }),
-      /* @__PURE__ */ jsx12(entity_update_counter_default, { entityUid: entity.myProxy.entityUid })
+      /* @__PURE__ */ jsx11(Badge8, { variant: "outline", color: "orange", children: entity.myProxy.entityUid }),
+      /* @__PURE__ */ jsx11(entity_update_counter_default, { entityUid: entity.myProxy.entityUid })
     ] }),
-    /* @__PURE__ */ jsx12(Divider, { my: 5 }),
+    /* @__PURE__ */ jsx11(Divider, { my: 5 }),
     /* @__PURE__ */ jsxs8(Accordion6, { children: [
-      /* @__PURE__ */ jsx12(entity_component_list_default, { entity }),
-      /* @__PURE__ */ jsx12(entity_proxy_list_default, { entity }),
-      /* @__PURE__ */ jsx12(entity_subscription_list_default, { entity })
+      /* @__PURE__ */ jsx11(entity_component_list_default, { entity }),
+      /* @__PURE__ */ jsx11(entity_proxy_list_default, { entity }),
+      /* @__PURE__ */ jsx11(entity_subscription_list_default, { entity })
     ] })
   ] });
 }
 var entity_layout_default = EntityLayout;
 
 // src/nodes/node-entity.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function EntityNode({ id, data, selected, type }) {
-  const { entityRepository } = useContext5(EcsFlowContext);
-  const entity = useMemo6(() => entityRepository.get(data.entity), [data.entity]);
-  return /* @__PURE__ */ jsx13(
+  const { entityRepository } = useContext4(EcsFlowContext);
+  const entity = useMemo5(() => entityRepository.get(data.entity), [data.entity]);
+  return /* @__PURE__ */ jsx12(
     NodeContainer2,
     {
       id,
       selected,
       data,
-      title: /* @__PURE__ */ jsx13(Badge9, { fullWidth: true, variant: "transparent", children: /* @__PURE__ */ jsx13(formatter_camel_case_default, { value: entity.myProxy.entityType }) }),
+      title: /* @__PURE__ */ jsx12(Badge9, { fullWidth: true, variant: "transparent", children: /* @__PURE__ */ jsx12(formatter_camel_case_default, { value: entity.myProxy.entityType }) }),
       type,
-      children: /* @__PURE__ */ jsx13(entity_layout_default, { entity })
+      children: /* @__PURE__ */ jsx12(entity_layout_default, { entity })
     }
   );
 }
 var node_entity_default = EntityNode;
 
 // src/templates/template-entity-node.ts
-import { IDGenerator } from "@awesome-flow/core/utils";
 import { Position } from "@xyflow/react";
 
-// src/abstract/handle-types.ts
-var EcsHandleDataType = /* @__PURE__ */ ((EcsHandleDataType2) => {
-  EcsHandleDataType2[EcsHandleDataType2["proxy"] = 1] = "proxy";
-  EcsHandleDataType2[EcsHandleDataType2["module"] = 2] = "module";
-  return EcsHandleDataType2;
-})(EcsHandleDataType || {});
+// src/abstract/templates.ts
+var EcsTemplateGroup = /* @__PURE__ */ ((EcsTemplateGroup2) => {
+  EcsTemplateGroup2["ecs"] = "ECS";
+  return EcsTemplateGroup2;
+})(EcsTemplateGroup || {});
 
 // src/templates/template-entity-node.ts
 var EntityNodeTemplate = class {
-  create() {
-    const data = {
+  template = {
+    type: "entity-node" /* entity */,
+    group: "ECS" /* ecs */,
+    data: {
       title: "Entity",
       entity: null
-    };
-    return {
-      id: IDGenerator.template(),
-      removable: false,
-      type: "entity-node" /* entity */,
-      data,
-      handles: [
-        {
-          dataType: 1 /* proxy */,
-          position: Position.Left,
-          connection: "target",
-          disabled: true
-        },
-        {
-          dataType: 1 /* proxy */,
-          position: Position.Right,
-          connection: "source",
-          disabled: true
-        }
-      ]
-    };
-  }
-  isHandleAllowed() {
-    return false;
-  }
-  getHandleAllowedDataType() {
-    return 1 /* proxy */;
-  }
+    },
+    handles: [
+      {
+        dataType: "proxy" /* proxy */,
+        position: Position.Left,
+        connection: "target",
+        disabled: true
+      },
+      {
+        dataType: "proxy" /* proxy */,
+        position: Position.Right,
+        connection: "source",
+        disabled: true
+      }
+    ]
+  };
 };
 
 // src/templates/template-systems-module.ts
-import { IDGenerator as IDGenerator2 } from "@awesome-flow/core/utils";
 import { Position as Position2 } from "@xyflow/react";
 var SystemsModuleNodeTemplate = class {
-  create() {
-    const data = {
+  template = {
+    type: "systems-module-node" /* systemsModule */,
+    group: "ECS" /* ecs */,
+    data: {
       title: "Systems Module",
-      entityType: null,
-      handles: null,
-      templateId: null
-    };
-    return {
-      id: IDGenerator2.template(),
-      removable: false,
-      type: "systems-module-node" /* systemsModule */,
-      data,
-      handles: [
-        {
-          dataType: 2 /* module */,
-          position: Position2.Left,
-          connection: "target",
-          disabled: true
-        }
-      ]
-    };
-  }
-  isHandleAllowed() {
-    return false;
-  }
-  getHandleAllowedDataType() {
-    return 2 /* module */;
-  }
+      entityType: null
+    },
+    handles: [
+      {
+        dataType: "module" /* module */,
+        position: Position2.Left,
+        connection: "target",
+        disabled: true
+      }
+    ]
+  };
 };
 
 // src/abstract/node-types.ts
@@ -442,14 +359,79 @@ var ecsNodeTemplates = {
   ["systems-module-node" /* systemsModule */]: new SystemsModuleNodeTemplate()
 };
 
+// src/flow/flow-ecs-state.tsx
+import { useEffect as useEffect7, useState as useState4, memo as memo9 } from "react";
+
+// src/flow/flow-ecs-auto-layout.tsx
+import { useFlowStore } from "@awesome-flow/core/hooks";
+import Dagre from "@dagrejs/dagre";
+import { useReactFlow } from "@xyflow/react";
+import { useCallback, useContext as useContext5, useEffect as useEffect2, useMemo as useMemo6, useState as useState2 } from "react";
+import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
+function FlowEcsAutoLayout() {
+  const [needsLayout, setNeedsLayout] = useState2(false);
+  const { ecsFlowRepository } = useContext5(EcsFlowContext);
+  useEffect2(() => {
+    setNeedsLayout(true);
+  }, [ecsFlowRepository.sizeNodes]);
+  const { getNodes, getEdges } = useReactFlow();
+  const setNodes = useFlowStore((state) => state.setNodes);
+  const graph = useMemo6(() => new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);
+  const getLayoutElements = useCallback(
+    (nodes, edges, options) => {
+      graph.setGraph(options);
+      edges.forEach((edge) => graph.setEdge(edge.source, edge.target));
+      nodes.forEach((node) => {
+        if (node.measured) {
+          graph.setNode(node.id, {
+            width: node.measured.width,
+            height: node.measured.height
+          });
+        }
+      });
+      Dagre.layout(graph);
+      return {
+        nodes: nodes.map((node) => {
+          const graphNode = graph.node(node.id);
+          if (graphNode) {
+            return { ...node, position: { x: graphNode.x, y: graphNode.y } };
+          }
+          return node;
+        }),
+        edges
+      };
+    },
+    [graph]
+  );
+  useEffect2(() => {
+    if (needsLayout) {
+      const storeNodes = getNodes();
+      if (storeNodes?.length && !storeNodes.some((n) => !n.measured?.width || !n.measured?.height)) {
+        const edges = getEdges();
+        const layout = getLayoutElements(storeNodes, edges, {
+          rankdir: "LR"
+        });
+        setNodes(layout.nodes);
+        setNeedsLayout(false);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx13(Fragment4, {});
+}
+var flow_ecs_auto_layout_default = FlowEcsAutoLayout;
+
+// src/flow/flow-ecs-entities.tsx
+import { FlowContext } from "@awesome-flow/core/abstract";
+import { useContext as useContext8, useEffect as useEffect5, useState as useState3 } from "react";
+import { useFlowStore as useFlowStore4 } from "@awesome-flow/core/hooks";
+
 // src/flow/flow-ecs-edge-proxies.tsx
 import { useContext as useContext6, useEffect as useEffect3 } from "react";
-import { FlowContext as FlowContext2 } from "@awesome-flow/core/abstract";
+import { useFlowStore as useFlowStore2 } from "@awesome-flow/core/hooks";
 import { Fragment as Fragment5, jsx as jsx14 } from "react/jsx-runtime";
 function FlowEcsEdgeProxies(props) {
   const { nodesToConnect } = props;
-  const context = useContext6(FlowContext2);
-  const onConnect = context.useFlowStore((state) => state.onConnect);
+  const onConnect = useFlowStore2((state) => state.onConnect);
   const { ecsFlowRepository, entityRepository } = useContext6(EcsFlowContext);
   useEffect3(() => {
     for (const node of nodesToConnect) {
@@ -477,12 +459,11 @@ var flow_ecs_edge_proxies_default = FlowEcsEdgeProxies;
 
 // src/flow/flow-ecs-edge-modules.tsx
 import { useContext as useContext7, useEffect as useEffect4 } from "react";
-import { FlowContext as FlowContext3 } from "@awesome-flow/core/abstract";
+import { useFlowStore as useFlowStore3 } from "@awesome-flow/core/hooks";
 import { Fragment as Fragment6, jsx as jsx15 } from "react/jsx-runtime";
 function FlowEcsEdgeModules(props) {
   const { nodesToConnect } = props;
-  const context = useContext7(FlowContext3);
-  const onConnect = context.useFlowStore((state) => state.onConnect);
+  const onConnect = useFlowStore3((state) => state.onConnect);
   const { ecsFlowRepository, entityRepository } = useContext7(EcsFlowContext);
   useEffect4(() => {
     for (const node of nodesToConnect) {
@@ -507,10 +488,10 @@ var flow_ecs_edge_modules_default = FlowEcsEdgeModules;
 // src/flow/flow-ecs-entities.tsx
 import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function FlowEcsEntities() {
-  const context = useContext8(FlowContext4);
-  const addNodes = context.useFlowStore((state) => state.addNodes);
+  const { nodeFactory } = useContext8(FlowContext);
+  const addNodes = useFlowStore4((state) => state.addNodes);
   const { ecsFlowRepository, entityRepository } = useContext8(EcsFlowContext);
-  const [entityNodes, setEntityNodes] = useState2([]);
+  const [entityNodes, setEntityNodes] = useState3([]);
   useEffect5(() => {
     const entities = entityRepository.listAll();
     const nodes = [];
@@ -518,7 +499,7 @@ function FlowEcsEntities() {
       if (ecsFlowRepository.getEntityNode(entity.myProxy)) {
         continue;
       }
-      const node = context.nodeFactory.createNodeFromType("entity-node" /* entity */);
+      const node = nodeFactory.createNodeFromType("entity-node" /* entity */);
       node.data.entity = entity.myProxy;
       node.position = { x: 0, y: 0 };
       ecsFlowRepository.addEntityNode(node);
@@ -536,11 +517,12 @@ var flow_ecs_entities_default = FlowEcsEntities;
 
 // src/flow/flow-ecs-modules.tsx
 import { useEffect as useEffect6, useContext as useContext9 } from "react";
-import { FlowContext as FlowContext5 } from "@awesome-flow/core/abstract";
+import { FlowContext as FlowContext2 } from "@awesome-flow/core/abstract";
+import { useFlowStore as useFlowStore5 } from "@awesome-flow/core/hooks";
 import { Fragment as Fragment8, jsx as jsx17 } from "react/jsx-runtime";
 function FlowEcsModules() {
-  const context = useContext9(FlowContext5);
-  const addNodes = context.useFlowStore((state) => state.addNodes);
+  const { nodeFactory } = useContext9(FlowContext2);
+  const addNodes = useFlowStore5((state) => state.addNodes);
   const { ecsFlowRepository, systemsModuleRepository } = useContext9(EcsFlowContext);
   useEffect6(() => {
     const modules = Array.from(systemsModuleRepository.list()).filter((m) => !!m);
@@ -550,9 +532,7 @@ function FlowEcsModules() {
       if (ecsFlowRepository.getSystemModuleNode(element)) {
         continue;
       }
-      const node = context.nodeFactory.createNodeFromType(
-        "systems-module-node" /* systemsModule */
-      );
+      const node = nodeFactory.createNodeFromType("systems-module-node" /* systemsModule */);
       node.data.entityType = element;
       node.position = { x: 0, y: 0 };
       ecsFlowRepository.addSystemModuleNode(node);
@@ -569,12 +549,7 @@ var flow_ecs_modules_default = FlowEcsModules;
 // src/flow/flow-ecs-state.tsx
 import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function FlowEcsState(props) {
-  const [, setUpdates] = useState3(0);
-  const [needsLayout, setNeedsLayout] = useState3(false);
-  const { ecsFlowRepository } = useContext10(EcsFlowContext);
-  useEffect7(() => {
-    setNeedsLayout(true);
-  }, [ecsFlowRepository.sizeNodes]);
+  const [, setUpdates] = useState4(0);
   useEffect7(() => {
     setInterval(() => {
       setUpdates((updates) => updates + 1);
@@ -583,15 +558,16 @@ function FlowEcsState(props) {
   return /* @__PURE__ */ jsxs10(Fragment9, { children: [
     props.showSystemModules && /* @__PURE__ */ jsx18(flow_ecs_modules_default, {}),
     props.showEntities && /* @__PURE__ */ jsx18(flow_ecs_entities_default, {}),
-    props.autoLayout && /* @__PURE__ */ jsx18(flow_ecs_auto_layout_default, { needsLayout, setNeedsLayout })
+    props.autoLayout && /* @__PURE__ */ jsx18(flow_ecs_auto_layout_default, {})
   ] });
 }
-var flow_ecs_state_default = FlowEcsState;
+var flow_ecs_state_default = memo9(FlowEcsState);
 export {
   EcsFlowContext,
   EcsFlowRepository,
   EcsHandleDataType,
   EcsNodeType,
+  EcsTemplateGroup,
   node_entity_default as EntityNode,
   EntityNodeTemplate,
   flow_ecs_state_default as FlowEcsState,