@awesome-flow/ecs 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -33,33 +33,29 @@ __export(src_exports, {
   EcsFlowRepository: () => EcsFlowRepository,
   EcsHandleDataType: () => EcsHandleDataType,
   EcsNodeType: () => EcsNodeType,
+  EcsTemplateGroup: () => EcsTemplateGroup,
   EntityNode: () => node_entity_default,
   EntityNodeTemplate: () => EntityNodeTemplate,
   FlowEcsState: () => flow_ecs_state_default,
   SystemsModuleNode: () => node_systems_module_default,
   SystemsModuleNodeTemplate: () => SystemsModuleNodeTemplate,
+  ecsNodeTemplates: () => ecsNodeTemplates,
   ecsNodeTypes: () => ecsNodeTypes
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/ecs/ecs-flow-context.ts
+// src/abstract/ecs-flow-context.ts
 var import_react = require("react");
-var EcsFlowContext = (0, import_react.createContext)({
-  ecsFlowRepository: null,
-  entityRepository: null,
-  entityEventsManager: null,
-  entityUpdateCounter: null,
-  systemsModuleRepository: null
-});
+var EcsFlowContext = (0, import_react.createContext)(null);
 
 // src/utils/id-generator.ts
-var IdGenerator = class {
+var EcsIdGenerator = class {
   static entityProxy(proxy) {
     return `${proxy.entityType}:${proxy.entityUid}`;
   }
 };
 
-// src/ecs/ecs-flow-repository.ts
+// src/abstract/ecs-flow-repository.ts
 var EcsFlowRepository = class {
   nodes;
   constructor() {
@@ -75,117 +71,62 @@ var EcsFlowRepository = class {
     return this.nodes.get(entityType.toString());
   }
   addEntityNode(node) {
-    this.nodes.set(IdGenerator.entityProxy(node.data.entity), node);
+    this.nodes.set(EcsIdGenerator.entityProxy(node.data.entity), node);
   }
   getEntityNode(entity) {
-    return this.nodes.get(IdGenerator.entityProxy(entity));
+    return this.nodes.get(EcsIdGenerator.entityProxy(entity));
   }
   listAllNodes() {
     return Array.from(this.nodes.values());
   }
 };
 
-// src/ecs/flow-ecs-state.tsx
-var import_react19 = require("react");
-
-// src/ecs/flow-ecs-auto-layout.tsx
-var import_abstract = require("@awesome-flow/core/abstract");
-var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react2 = require("@xyflow/react");
-var import_react3 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-function FlowEcsAutoLayout(props) {
-  const { getNodes, getEdges } = (0, import_react2.useReactFlow)();
-  const context = (0, import_react3.useContext)(import_abstract.FlowContext);
-  const setNodes = context.useFlowStore((state) => state.setNodes);
-  const graph = (0, import_react3.useMemo)(() => new import_dagre.default.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);
-  const getLayoutElements = (0, import_react3.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
-          });
-        }
-      });
-      import_dagre.default.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]
-  );
-  (0, import_react3.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]);
-  (0, import_react3.useEffect)(() => {
-    if (props.needsLayout) {
-      props.setNeedsLayout(false);
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
-}
-var flow_ecs_auto_layout_default = FlowEcsAutoLayout;
-
-// src/ecs/flow-ecs-entities.tsx
-var import_abstract4 = require("@awesome-flow/core/abstract");
-var import_react17 = require("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
 var import_layout = require("@awesome-flow/core/layout");
-var import_react7 = require("react");
+var import_react5 = require("react");
+var import_core4 = require("@mantine/core");
 
 // src/layout/systems-module-layout.tsx
 var import_systems = require("@awesome-ecs/abstract/systems");
 var import_core3 = require("@mantine/core");
-var import_react6 = require("react");
+var import_react4 = require("react");
+
+// src/components/pipeline-middleware-list.tsx
+var import_core2 = require("@mantine/core");
 
 // src/components/badge-list.tsx
 var import_core = require("@mantine/core");
-var import_react5 = require("react");
+var import_react3 = require("react");
 
 // src/components/formatter-camel-case.tsx
-var import_react4 = require("react");
+var import_react2 = require("react");
 function CamelCaseFormatter(props) {
-  const value = (0, import_react4.useMemo)(
+  const value = (0, import_react2.useMemo)(
     () => props.value?.toString().replace(/([a-z])([A-Z])/g, "$1 $2"),
     [props.value]
   );
   return value;
 }
-var formatter_camel_case_default = (0, import_react4.memo)(CamelCaseFormatter);
+var formatter_camel_case_default = (0, import_react2.memo)(CamelCaseFormatter);
 
 // src/components/badge-list.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function BadgeList(props) {
   return props.items.map((value, i) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.Badge, { ...props.badge || [], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(formatter_camel_case_default, { value }) }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Badge, { ...props.badge || [], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(formatter_camel_case_default, { value }) }, i);
   });
 }
-var badge_list_default = (0, import_react5.memo)(BadgeList);
+var badge_list_default = (0, import_react3.memo)(BadgeList);
 
 // src/components/pipeline-middleware-list.tsx
-var import_core2 = require("@mantine/core");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function PipelineMiddlewareList(props) {
   let middleware = [];
   if (props.pipeline) {
@@ -194,57 +135,55 @@ function PipelineMiddlewareList(props) {
   const components = middleware.map((m) => {
     return m.name || m.constructor.name;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core2.Accordion.Item, { value: props.label, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.Badge, { fullWidth: true, variant: "light", rightSection: components.length, children: props.label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.Stack, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(badge_list_default, { items: components, badge: { variant: "outline" } }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.Accordion.Item, { value: props.label, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Badge, { fullWidth: true, variant: "light", rightSection: components.length, children: props.label }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Stack, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(badge_list_default, { items: components, badge: { variant: "outline" } }) }) })
   ] }, props.label);
 }
 var pipeline_middleware_list_default = PipelineMiddlewareList;
 
 // src/layout/systems-module-layout.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function SystemsModuleLayout(props) {
   const { module: module2 } = props;
   const runtimeContext = module2["runtimeContext"];
-  const systemContext = runtimeContext.systemContext;
-  const { status } = (0, import_react6.useMemo)(() => {
+  const { systemContext } = runtimeContext;
+  const { status } = (0, import_react4.useMemo)(() => {
     return systemContext.runtime;
   }, [systemContext.runtime.status]);
   const init = runtimeContext.systemPipelines.get(import_systems.SystemType.initialize);
   const update = runtimeContext.systemPipelines.get(import_systems.SystemType.update);
   const render = runtimeContext.systemPipelines.get(import_systems.SystemType.render);
   const sync = runtimeContext.systemPipelines.get(import_systems.SystemType.sync);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core3.Text, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Text, { children: [
       "Status: ",
       status
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core3.Accordion, { children: [
-      init && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(pipeline_middleware_list_default, { pipeline: init, label: "Initialize" }),
-      update && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(pipeline_middleware_list_default, { pipeline: update, label: "Update" }),
-      render && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(pipeline_middleware_list_default, { pipeline: render, label: "Render" }),
-      sync && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(pipeline_middleware_list_default, { pipeline: sync, label: "Sync" })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Accordion, { children: [
+      init && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(pipeline_middleware_list_default, { pipeline: init, label: "Initialize" }),
+      update && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(pipeline_middleware_list_default, { pipeline: update, label: "Update" }),
+      render && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(pipeline_middleware_list_default, { pipeline: render, label: "Render" }),
+      sync && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(pipeline_middleware_list_default, { pipeline: sync, label: "Sync" })
     ] })
   ] });
 }
 var systems_module_layout_default = SystemsModuleLayout;
 
 // src/nodes/node-systems-module.tsx
-var import_core4 = require("@mantine/core");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function SystemsModuleNode({ id, data, selected, type }) {
-  const { systemsModuleRepository } = (0, import_react7.useContext)(EcsFlowContext);
+  const { systemsModuleRepository } = (0, import_react5.useContext)(EcsFlowContext);
   const module2 = systemsModuleRepository.get(data.entityType);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_layout.NodeContainer,
     {
       id,
       selected,
-      handles: data.handles,
-      title: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core4.Badge, { fullWidth: true, color: "indigo", variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(formatter_camel_case_default, { value: data.entityType }) }),
-      templateId: data.templateId,
+      data,
+      title: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Badge, { fullWidth: true, color: "indigo", variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(formatter_camel_case_default, { value: data.entityType }) }),
       type,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(systems_module_layout_default, { type: data.entityType, module: module2 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(systems_module_layout_default, { type: data.entityType, module: module2 })
     }
   );
 }
@@ -253,96 +192,96 @@ var node_systems_module_default = SystemsModuleNode;
 // src/nodes/node-entity.tsx
 var import_layout2 = require("@awesome-flow/core/layout");
 var import_core12 = require("@mantine/core");
-var import_react14 = require("react");
+var import_react12 = require("react");
 
 // src/layout/entity-layout.tsx
 var import_core11 = require("@mantine/core");
 
 // src/components/entity-component-list.tsx
 var import_core7 = require("@mantine/core");
-var import_react10 = require("react");
+var import_react8 = require("react");
 
 // src/components/entity-component-inspector.tsx
 var import_core6 = require("@mantine/core");
-var import_react9 = require("react");
+var import_react7 = require("react");
 var import_hooks = require("@mantine/hooks");
 
 // src/components/object-inspector.tsx
 var import_core5 = require("@mantine/core");
-var import_react8 = require("react");
+var import_react6 = require("react");
 var import_react_inspector = require("react-inspector");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ObjectInspector(props) {
   const colorScheme = (0, import_core5.useComputedColorScheme)();
-  const theme = (0, import_react8.useMemo)(
+  const theme = (0, import_react6.useMemo)(
     () => colorScheme === "dark" ? "chromeDark" : "chromeLight",
     [colorScheme]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_inspector.Inspector, { table: false, theme, data: props.data });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_inspector.Inspector, { table: false, theme, data: props.data });
 }
-var object_inspector_default = (0, import_react8.memo)(ObjectInspector);
+var object_inspector_default = (0, import_react6.memo)(ObjectInspector);
 
 // src/components/entity-component-inspector.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function EntityComponentInspector(props) {
   const [opened, { toggle }] = (0, import_hooks.useDisclosure)(false);
-  const buttonColor = (0, import_react9.useMemo)(() => opened ? "light" : "indigo", [opened]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core6.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Button, { variant: "outline", size: "xs", onClick: toggle, color: buttonColor, fullWidth: true, children: props.component.componentType }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Collapse, { in: opened, children: opened && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(object_inspector_default, { data: props.component }) })
+  const buttonColor = (0, import_react7.useMemo)(() => opened ? "light" : "indigo", [opened]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Button, { variant: "outline", size: "xs", onClick: toggle, color: buttonColor, fullWidth: true, children: props.component.componentType }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Collapse, { in: opened, children: opened && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(object_inspector_default, { data: props.component }) })
   ] });
 }
-var entity_component_inspector_default = (0, import_react9.memo)(EntityComponentInspector);
+var entity_component_inspector_default = (0, import_react7.memo)(EntityComponentInspector);
 
 // src/components/entity-component-list.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function EntityComponentList(props) {
   const components = Array.from(props.entity.components.values());
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Accordion.Item, { value: "components", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Badge, { fullWidth: true, variant: "light", rightSection: components.length, children: "Components" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Stack, { children: components.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(entity_component_inspector_default, { component: c }, i)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Accordion.Item, { value: "components", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Badge, { fullWidth: true, variant: "light", rightSection: components.length, children: "Components" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Stack, { children: components.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(entity_component_inspector_default, { component: c }, i)) }) })
   ] }, "components");
 }
-var entity_component_list_default = (0, import_react10.memo)(EntityComponentList);
+var entity_component_list_default = (0, import_react8.memo)(EntityComponentList);
 
 // src/components/entity-proxy-list.tsx
 var import_core8 = require("@mantine/core");
-var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("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) => IdGenerator.entityProxy(k))).flat();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Accordion.Item, { value: "proxies", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Badge, { fullWidth: true, variant: "light", rightSection: items.length, children: "Proxies" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Stack, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(badge_list_default, { items, badge: { variant: "outline" } }) }) })
+  const items = proxies.map((p) => Array.from(p).map((k) => EcsIdGenerator.entityProxy(k))).flat();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Accordion.Item, { value: "proxies", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Badge, { fullWidth: true, variant: "light", rightSection: items.length, children: "Proxies" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Stack, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(badge_list_default, { items, badge: { variant: "outline" } }) }) })
   ] }, "proxies");
 }
-var entity_proxy_list_default = (0, import_react11.memo)(EntityProxyList);
+var entity_proxy_list_default = (0, import_react9.memo)(EntityProxyList);
 
 // src/components/entity-subscription-list.tsx
 var import_core9 = require("@mantine/core");
-var import_react12 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function EntitySubscriptionList(props) {
-  const { entityEventsManager } = (0, import_react12.useContext)(EcsFlowContext);
+  const { entityEventsManager } = (0, import_react10.useContext)(EcsFlowContext);
   const subscriptions = entityEventsManager.getSubscriptionsForEntity(props.entity.myProxy);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Accordion.Item, { value: "subscriptions", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Badge, { fullWidth: true, variant: "light", rightSection: subscriptions.length, children: "Events" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Stack, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(badge_list_default, { items: subscriptions, badge: { variant: "outline" } }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Accordion.Item, { value: "subscriptions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Badge, { fullWidth: true, variant: "light", rightSection: subscriptions.length, children: "Events" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Stack, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(badge_list_default, { items: subscriptions, badge: { variant: "outline" } }) }) })
   ] }, "subscriptions");
 }
-var entity_subscription_list_default = (0, import_react12.memo)(EntitySubscriptionList);
+var entity_subscription_list_default = (0, import_react10.memo)(EntitySubscriptionList);
 
 // src/components/entity-update-counter.tsx
 var import_core10 = require("@mantine/core");
-var import_react13 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function EntityUpdateCounter(props) {
-  const [, setRefresh] = (0, import_react13.useState)(0);
-  const { entityUpdateCounter } = (0, import_react13.useContext)(EcsFlowContext);
+  const [, setRefresh] = (0, import_react11.useState)(0);
+  const { entityUpdateCounter } = (0, import_react11.useContext)(EcsFlowContext);
   const updates = entityUpdateCounter.getUpdateCount(props.entityUid) || 0;
   const removes = entityUpdateCounter.getRemoveCount(props.entityUid) || 0;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const interval = setInterval(() => {
       setRefresh((refresh) => refresh + 1);
     }, 1e3);
@@ -351,52 +290,107 @@ function EntityUpdateCounter(props) {
       clearInterval(interval);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.Badge, { variant: "light", children: updates }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.Badge, { variant: "light", color: "orange", children: removes })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Badge, { variant: "light", children: updates }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Badge, { variant: "light", color: "orange", children: removes })
   ] });
 }
-var entity_update_counter_default = (0, import_react13.memo)(EntityUpdateCounter);
+var entity_update_counter_default = (0, import_react11.memo)(EntityUpdateCounter);
 
 // src/layout/entity-layout.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function EntityLayout({ entity }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Badge, { variant: "outline", color: "orange", children: entity.myProxy.entityUid }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(entity_update_counter_default, { entityUid: entity.myProxy.entityUid })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core11.Group, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core11.Badge, { variant: "outline", color: "orange", children: entity.myProxy.entityUid }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(entity_update_counter_default, { entityUid: entity.myProxy.entityUid })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Divider, { my: 5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Accordion, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(entity_component_list_default, { entity }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(entity_proxy_list_default, { entity }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(entity_subscription_list_default, { entity })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core11.Divider, { my: 5 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core11.Accordion, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(entity_component_list_default, { entity }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(entity_proxy_list_default, { entity }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(entity_subscription_list_default, { entity })
     ] })
   ] });
 }
 var entity_layout_default = EntityLayout;
 
 // src/nodes/node-entity.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function EntityNode({ id, data, selected, type }) {
-  const { entityRepository } = (0, import_react14.useContext)(EcsFlowContext);
-  const entity = (0, import_react14.useMemo)(() => entityRepository.get(data.entity), [data.entity]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const { entityRepository } = (0, import_react12.useContext)(EcsFlowContext);
+  const entity = (0, import_react12.useMemo)(() => entityRepository.get(data.entity), [data.entity]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_layout2.NodeContainer,
     {
       id,
       selected,
-      handles: data.handles,
-      title: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Badge, { fullWidth: true, variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(formatter_camel_case_default, { value: entity.myProxy.entityType }) }),
-      templateId: data.templateId,
+      data,
+      title: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core12.Badge, { fullWidth: true, variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(formatter_camel_case_default, { value: entity.myProxy.entityType }) }),
       type,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(entity_layout_default, { entity })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(entity_layout_default, { entity })
     }
   );
 }
 var node_entity_default = EntityNode;
 
-// src/node-types.ts
+// src/templates/template-entity-node.ts
+var import_react13 = require("@xyflow/react");
+
+// src/abstract/templates.ts
+var EcsTemplateGroup = /* @__PURE__ */ ((EcsTemplateGroup2) => {
+  EcsTemplateGroup2["ecs"] = "ECS";
+  return EcsTemplateGroup2;
+})(EcsTemplateGroup || {});
+
+// src/templates/template-entity-node.ts
+var EntityNodeTemplate = class {
+  template = {
+    type: "entity-node" /* entity */,
+    group: "ECS" /* ecs */,
+    data: {
+      title: "Entity",
+      entity: null
+    },
+    handles: [
+      {
+        dataType: "proxy" /* proxy */,
+        position: import_react13.Position.Left,
+        connection: "target",
+        disabled: true
+      },
+      {
+        dataType: "proxy" /* proxy */,
+        position: import_react13.Position.Right,
+        connection: "source",
+        disabled: true
+      }
+    ]
+  };
+};
+
+// src/templates/template-systems-module.ts
+var import_react14 = require("@xyflow/react");
+var SystemsModuleNodeTemplate = class {
+  template = {
+    type: "systems-module-node" /* systemsModule */,
+    group: "ECS" /* ecs */,
+    data: {
+      title: "Systems Module",
+      entityType: null
+    },
+    handles: [
+      {
+        dataType: "module" /* module */,
+        position: import_react14.Position.Left,
+        connection: "target",
+        disabled: true
+      }
+    ]
+  };
+};
+
+// src/abstract/node-types.ts
 var EcsNodeType = /* @__PURE__ */ ((EcsNodeType2) => {
   EcsNodeType2["systemsModule"] = "systems-module-node";
   EcsNodeType2["entity"] = "entity-node";
@@ -406,17 +400,86 @@ var ecsNodeTypes = {
   ["systems-module-node" /* systemsModule */]: node_systems_module_default,
   ["entity-node" /* entity */]: node_entity_default
 };
+var ecsNodeTemplates = {
+  ["entity-node" /* entity */]: new EntityNodeTemplate(),
+  ["systems-module-node" /* systemsModule */]: new SystemsModuleNodeTemplate()
+};
+
+// src/flow/flow-ecs-state.tsx
+var import_react21 = require("react");
+
+// src/flow/flow-ecs-auto-layout.tsx
+var import_abstract = require("@awesome-flow/core/abstract");
+var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
+var import_react15 = require("@xyflow/react");
+var import_react16 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function FlowEcsAutoLayout(props) {
+  const { getNodes, getEdges } = (0, import_react15.useReactFlow)();
+  const context = (0, import_react16.useContext)(import_abstract.FlowContext);
+  const setNodes = context.useFlowStore((state) => state.setNodes);
+  const graph = (0, import_react16.useMemo)(() => new import_dagre.default.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);
+  const getLayoutElements = (0, import_react16.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
+          });
+        }
+      });
+      import_dagre.default.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]
+  );
+  (0, import_react16.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]);
+  (0, import_react16.useEffect)(() => {
+    if (props.needsLayout) {
+      props.setNeedsLayout(false);
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
+}
+var flow_ecs_auto_layout_default = FlowEcsAutoLayout;
+
+// src/flow/flow-ecs-entities.tsx
+var import_abstract4 = require("@awesome-flow/core/abstract");
+var import_react19 = require("react");
 
-// src/ecs/flow-ecs-edge-proxies.tsx
-var import_react15 = require("react");
+// src/flow/flow-ecs-edge-proxies.tsx
+var import_react17 = require("react");
 var import_abstract2 = require("@awesome-flow/core/abstract");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function FlowEcsEdgeProxies(props) {
   const { nodesToConnect } = props;
-  const context = (0, import_react15.useContext)(import_abstract2.FlowContext);
+  const context = (0, import_react17.useContext)(import_abstract2.FlowContext);
   const onConnect = context.useFlowStore((state) => state.onConnect);
-  const { ecsFlowRepository, entityRepository } = (0, import_react15.useContext)(EcsFlowContext);
-  (0, import_react15.useEffect)(() => {
+  const { ecsFlowRepository, entityRepository } = (0, import_react17.useContext)(EcsFlowContext);
+  (0, import_react17.useEffect)(() => {
     for (const node of nodesToConnect) {
       const sourceHandle = node.data.handles.find((h) => h.connection === "source");
       const entity = entityRepository.get(node.data.entity);
@@ -440,16 +503,16 @@ function FlowEcsEdgeProxies(props) {
 }
 var flow_ecs_edge_proxies_default = FlowEcsEdgeProxies;
 
-// src/ecs/flow-ecs-edge-modules.tsx
-var import_react16 = require("react");
+// src/flow/flow-ecs-edge-modules.tsx
+var import_react18 = require("react");
 var import_abstract3 = require("@awesome-flow/core/abstract");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function FlowEcsEdgeModules(props) {
   const { nodesToConnect } = props;
-  const context = (0, import_react16.useContext)(import_abstract3.FlowContext);
+  const context = (0, import_react18.useContext)(import_abstract3.FlowContext);
   const onConnect = context.useFlowStore((state) => state.onConnect);
-  const { ecsFlowRepository, entityRepository } = (0, import_react16.useContext)(EcsFlowContext);
-  (0, import_react16.useEffect)(() => {
+  const { ecsFlowRepository, entityRepository } = (0, import_react18.useContext)(EcsFlowContext);
+  (0, import_react18.useEffect)(() => {
     for (const node of nodesToConnect) {
       const sourceHandle = node.data.handles.find((h) => h.connection === "source");
       const entity = entityRepository.get(node.data.entity);
@@ -469,14 +532,14 @@ function FlowEcsEdgeModules(props) {
 }
 var flow_ecs_edge_modules_default = FlowEcsEdgeModules;
 
-// src/ecs/flow-ecs-entities.tsx
+// src/flow/flow-ecs-entities.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function FlowEcsEntities() {
-  const context = (0, import_react17.useContext)(import_abstract4.FlowContext);
+  const context = (0, import_react19.useContext)(import_abstract4.FlowContext);
   const addNodes = context.useFlowStore((state) => state.addNodes);
-  const { ecsFlowRepository, entityRepository } = (0, import_react17.useContext)(EcsFlowContext);
-  const [entityNodes, setEntityNodes] = (0, import_react17.useState)([]);
-  (0, import_react17.useEffect)(() => {
+  const { ecsFlowRepository, entityRepository } = (0, import_react19.useContext)(EcsFlowContext);
+  const [entityNodes, setEntityNodes] = (0, import_react19.useState)([]);
+  (0, import_react19.useEffect)(() => {
     const entities = entityRepository.listAll();
     const nodes = [];
     for (const entity of entities) {
@@ -499,15 +562,15 @@ function FlowEcsEntities() {
 }
 var flow_ecs_entities_default = FlowEcsEntities;
 
-// src/ecs/flow-ecs-modules.tsx
-var import_react18 = require("react");
+// src/flow/flow-ecs-modules.tsx
+var import_react20 = require("react");
 var import_abstract5 = require("@awesome-flow/core/abstract");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function FlowEcsModules() {
-  const context = (0, import_react18.useContext)(import_abstract5.FlowContext);
+  const context = (0, import_react20.useContext)(import_abstract5.FlowContext);
   const addNodes = context.useFlowStore((state) => state.addNodes);
-  const { ecsFlowRepository, systemsModuleRepository } = (0, import_react18.useContext)(EcsFlowContext);
-  (0, import_react18.useEffect)(() => {
+  const { ecsFlowRepository, systemsModuleRepository } = (0, import_react20.useContext)(EcsFlowContext);
+  (0, import_react20.useEffect)(() => {
     const modules = Array.from(systemsModuleRepository.list()).filter((m) => !!m);
     const keys = Array.from(modules.values()).map((v) => v[0]);
     const nodesToAdd = [];
@@ -531,16 +594,16 @@ function FlowEcsModules() {
 }
 var flow_ecs_modules_default = FlowEcsModules;
 
-// src/ecs/flow-ecs-state.tsx
+// src/flow/flow-ecs-state.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function FlowEcsState(props) {
-  const [, setUpdates] = (0, import_react19.useState)(0);
-  const [needsLayout, setNeedsLayout] = (0, import_react19.useState)(false);
-  const { ecsFlowRepository } = (0, import_react19.useContext)(EcsFlowContext);
-  (0, import_react19.useEffect)(() => {
+  const [, setUpdates] = (0, import_react21.useState)(0);
+  const [needsLayout, setNeedsLayout] = (0, import_react21.useState)(false);
+  const { ecsFlowRepository } = (0, import_react21.useContext)(EcsFlowContext);
+  (0, import_react21.useEffect)(() => {
     setNeedsLayout(true);
   }, [ecsFlowRepository.sizeNodes]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setInterval(() => {
       setUpdates((updates) => updates + 1);
     }, 1e3);
@@ -552,98 +615,19 @@ function FlowEcsState(props) {
   ] });
 }
 var flow_ecs_state_default = FlowEcsState;
-
-// src/templates/template-entity-node.ts
-var import_utils = require("@awesome-flow/core/utils");
-
-// src/handle-types.ts
-var EcsHandleDataType = /* @__PURE__ */ ((EcsHandleDataType2) => {
-  EcsHandleDataType2[EcsHandleDataType2["proxy"] = 1] = "proxy";
-  EcsHandleDataType2[EcsHandleDataType2["module"] = 2] = "module";
-  return EcsHandleDataType2;
-})(EcsHandleDataType || {});
-
-// src/templates/template-entity-node.ts
-var import_react20 = require("@xyflow/react");
-var EntityNodeTemplate = class {
-  create() {
-    const data = {
-      title: "Entity",
-      entity: null
-    };
-    return {
-      id: import_utils.IDGenerator.template(),
-      removable: false,
-      type: "entity-node" /* entity */,
-      data,
-      handles: [
-        {
-          dataType: 1 /* proxy */,
-          position: import_react20.Position.Left,
-          connection: "target",
-          disabled: true
-        },
-        {
-          dataType: 1 /* proxy */,
-          position: import_react20.Position.Right,
-          connection: "source",
-          disabled: true
-        }
-      ]
-    };
-  }
-  isHandleAllowed() {
-    return false;
-  }
-  getHandleAllowedDataType() {
-    return 1 /* proxy */;
-  }
-};
-
-// src/templates/template-systems-module.ts
-var import_utils2 = require("@awesome-flow/core/utils");
-var import_react21 = require("@xyflow/react");
-var SystemsModuleNodeTemplate = class {
-  create() {
-    const data = {
-      title: "Systems Module",
-      entityType: null,
-      handles: null,
-      templateId: null
-    };
-    return {
-      id: import_utils2.IDGenerator.template(),
-      removable: false,
-      type: "systems-module-node" /* systemsModule */,
-      data,
-      handles: [
-        {
-          dataType: 2 /* module */,
-          position: import_react21.Position.Left,
-          connection: "target",
-          disabled: true
-        }
-      ]
-    };
-  }
-  isHandleAllowed() {
-    return false;
-  }
-  getHandleAllowedDataType() {
-    return 2 /* module */;
-  }
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EcsFlowContext,
   EcsFlowRepository,
   EcsHandleDataType,
   EcsNodeType,
+  EcsTemplateGroup,
   EntityNode,
   EntityNodeTemplate,
   FlowEcsState,
   SystemsModuleNode,
   SystemsModuleNodeTemplate,
+  ecsNodeTemplates,
   ecsNodeTypes
 });
 //# sourceMappingURL=index.cjs.map