@eventcatalog/visualiser 4.1.0 → 4.1.1

package/dist/index.d.mts

@@ -733,10 +733,31 @@ declare const OwnerIndicator: react.NamedExoticComponent<{
     iconClass?: string;
 }>;
 
+declare const ENTITY_TARGET_HANDLE_ID = "__eventcatalog-entity-target";
+interface EntityProperty {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    references?: string;
+    referencesIdentifier?: string;
+    referenceTarget?: "entity";
+    relationType?: string;
+    enum?: string[];
+    properties?: EntityProperty[];
+    items?: {
+        type: string;
+        properties?: EntityProperty[];
+    };
+}
+declare const getPropertyTypeLabel: (property: any) => any;
+declare const getNestedEntityProperties: (property: EntityProperty) => EntityProperty[];
 declare const _default$c: react.NamedExoticComponent<any>;
 
 declare const _default$b: react.NamedExoticComponent<any>;
 
+declare const _default$a: react.NamedExoticComponent<any>;
+
 /**
  * A system rendered on the System Diagram.
  *
@@ -745,7 +766,7 @@ declare const _default$b: react.NamedExoticComponent<any>;
  * Left-clicking the node navigates to the system's architecture map.
  * Right-click (handled by the NodeGraph context-menu wrapper) offers docs / map / context.
  */
-declare const _default$a: react.NamedExoticComponent<any>;
+declare const _default$9: react.NamedExoticComponent<any>;
 
 /**
  * An actor (person/role) on the System Diagram.
@@ -754,11 +775,9 @@ declare const _default$a: react.NamedExoticComponent<any>;
  * card with the actor icon in a circular badge centered at the top and the actor
  * name centered below. This reads as "a person", not "a system", at a glance.
  */
-declare const _default$9: react.NamedExoticComponent<any>;
-
-declare const _default$8: react.NamedExoticComponent<NodeProps>;
+declare const _default$8: react.NamedExoticComponent<any>;
 
-declare const _default$7: react.NamedExoticComponent<any>;
+declare const _default$7: react.NamedExoticComponent<NodeProps>;
 
 declare const _default$6: react.NamedExoticComponent<any>;
 
@@ -907,4 +926,4 @@ declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], options?: {
     edges: Edge[];
 };
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$9 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$b as DomainNode, type DslGraph, EVENT, type EdgeType, _default$7 as EntityNode, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$8 as SystemGroupNode, _default$a as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNodesAndEdgesFromDagre, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };
+export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };

package/dist/index.d.ts

@@ -733,10 +733,31 @@ declare const OwnerIndicator: react.NamedExoticComponent<{
     iconClass?: string;
 }>;
 
+declare const ENTITY_TARGET_HANDLE_ID = "__eventcatalog-entity-target";
+interface EntityProperty {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    references?: string;
+    referencesIdentifier?: string;
+    referenceTarget?: "entity";
+    relationType?: string;
+    enum?: string[];
+    properties?: EntityProperty[];
+    items?: {
+        type: string;
+        properties?: EntityProperty[];
+    };
+}
+declare const getPropertyTypeLabel: (property: any) => any;
+declare const getNestedEntityProperties: (property: EntityProperty) => EntityProperty[];
 declare const _default$c: react.NamedExoticComponent<any>;
 
 declare const _default$b: react.NamedExoticComponent<any>;
 
+declare const _default$a: react.NamedExoticComponent<any>;
+
 /**
  * A system rendered on the System Diagram.
  *
@@ -745,7 +766,7 @@ declare const _default$b: react.NamedExoticComponent<any>;
  * Left-clicking the node navigates to the system's architecture map.
  * Right-click (handled by the NodeGraph context-menu wrapper) offers docs / map / context.
  */
-declare const _default$a: react.NamedExoticComponent<any>;
+declare const _default$9: react.NamedExoticComponent<any>;
 
 /**
  * An actor (person/role) on the System Diagram.
@@ -754,11 +775,9 @@ declare const _default$a: react.NamedExoticComponent<any>;
  * card with the actor icon in a circular badge centered at the top and the actor
  * name centered below. This reads as "a person", not "a system", at a glance.
  */
-declare const _default$9: react.NamedExoticComponent<any>;
-
-declare const _default$8: react.NamedExoticComponent<NodeProps>;
+declare const _default$8: react.NamedExoticComponent<any>;
 
-declare const _default$7: react.NamedExoticComponent<any>;
+declare const _default$7: react.NamedExoticComponent<NodeProps>;
 
 declare const _default$6: react.NamedExoticComponent<any>;
 
@@ -907,4 +926,4 @@ declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], options?: {
     edges: Edge[];
 };
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$9 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$b as DomainNode, type DslGraph, EVENT, type EdgeType, _default$7 as EntityNode, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$8 as SystemGroupNode, _default$a as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNodesAndEdgesFromDagre, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };
+export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };

package/dist/index.js

@@ -47,6 +47,7 @@ __export(index_exports, {
   Data: () => DataNode_default,
   DataProductNode: () => DataProduct_default,
   DomainNode: () => Domain_default,
+  ENTITY_TARGET_HANDLE_ID: () => ENTITY_TARGET_HANDLE_ID,
   EVENT: () => EVENT,
   EntityNode: () => Entity_default,
   Event: () => EventNode_default,
@@ -102,7 +103,9 @@ __export(index_exports, {
   getColorFromString: () => getColorFromString,
   getEdgeLabelForMessageAsSource: () => getEdgeLabelForMessageAsSource,
   getEdgeLabelForServiceAsTarget: () => getEdgeLabelForServiceAsTarget,
+  getNestedEntityProperties: () => getNestedEntityProperties,
   getNodesAndEdgesFromDagre: () => getNodesAndEdgesFromDagre,
+  getPropertyTypeLabel: () => getPropertyTypeLabel,
   layoutGraph: () => layoutGraph,
   nodeComponents: () => nodeComponents,
   nodeConfigs: () => nodeConfigs,
@@ -5280,7 +5283,9 @@ var FlowExpandedNode_default = (0, import_react44.memo)(function FlowExpandedNod
 var import_react45 = require("@xyflow/react");
 var ContextMenu2 = __toESM(require("@radix-ui/react-context-menu"));
 var import_react46 = require("react");
+var import_solid = require("@heroicons/react/20/solid");
 var import_jsx_runtime25 = require("react/jsx-runtime");
+var ENTITY_TARGET_HANDLE_ID = "__eventcatalog-entity-target";
 function classNames15(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -5290,12 +5295,27 @@ var getPropertyTypeLabel = (property) => {
   }
   return property.type;
 };
+var getNestedEntityProperties = (property) => {
+  if (property.properties?.length) return property.properties;
+  if (property.type === "array" && property.items?.properties?.length) {
+    return property.items.properties;
+  }
+  return [];
+};
 var Entity_default = (0, import_react46.memo)(function EntityNode({
+  id,
   data,
   sourcePosition,
   targetPosition
 }) {
-  const { mode, entity, externalToDomain, domainName } = data;
+  const {
+    mode,
+    entity,
+    externalToDomain,
+    domainName,
+    entityTargetHandle = ENTITY_TARGET_HANDLE_ID,
+    referencePropertyNames = EMPTY_ARRAY
+  } = data;
   const {
     name,
     version,
@@ -5310,7 +5330,123 @@ var Entity_default = (0, import_react46.memo)(function EntityNode({
   } = styles || {};
   const Icon = (0, import_react46.useMemo)(() => getIcon(icon), [icon]);
   const [hoveredProperty, setHoveredProperty] = (0, import_react46.useState)(null);
+  const [expandedProperties, setExpandedProperties] = (0, import_react46.useState)(
+    () => /* @__PURE__ */ new Set()
+  );
+  const previousExpandedProperties = (0, import_react46.useRef)(expandedProperties);
+  const updateNodeInternals = (0, import_react45.useUpdateNodeInternals)();
   const portalContainer = usePortalContainer();
+  const referenceProperties = (0, import_react46.useMemo)(
+    () => new Set(referencePropertyNames),
+    [referencePropertyNames]
+  );
+  const toggleProperty = (0, import_react46.useCallback)((propertyPath) => {
+    setExpandedProperties((current) => {
+      const next = new Set(current);
+      if (next.has(propertyPath)) {
+        next.delete(propertyPath);
+      } else {
+        next.add(propertyPath);
+      }
+      return next;
+    });
+  }, []);
+  (0, import_react46.useEffect)(() => {
+    if (previousExpandedProperties.current === expandedProperties) return;
+    previousExpandedProperties.current = expandedProperties;
+    updateNodeInternals(id);
+  }, [expandedProperties, id, updateNodeInternals]);
+  const renderPropertyRows = (entityProperties, depth = 0, parentPath = "") => entityProperties.map((property, index) => {
+    const propertyPath = parentPath ? `${parentPath}.${property.name}` : property.name;
+    const propertyKey = `${propertyPath}-${index}`;
+    const isHovered = hoveredProperty === propertyKey;
+    const nestedProperties = getNestedEntityProperties(property);
+    const isExpandable = nestedProperties.length > 0;
+    const isExpanded = expandedProperties.has(propertyPath);
+    const isTopLevel = depth === 0;
+    const referencedEntityId = property.references || (isTopLevel && referenceProperties.has(property.name) ? property.items?.type : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "div",
+        {
+          className: classNames15(
+            "relative flex items-center justify-between py-2 pr-4 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
+            isExpandable && "nodrag nopan cursor-pointer"
+          ),
+          style: { paddingLeft: `${16 + depth * 16}px` },
+          role: isExpandable ? "button" : void 0,
+          tabIndex: isExpandable ? 0 : void 0,
+          "aria-label": isExpandable ? `${isExpanded ? "Collapse" : "Expand"} ${property.name}` : void 0,
+          "aria-expanded": isExpandable ? isExpanded : void 0,
+          onClick: (event) => {
+            if (!isExpandable) return;
+            const target = event.target;
+            if (target.closest(".react-flow__handle")) return;
+            toggleProperty(propertyPath);
+          },
+          onKeyDown: (event) => {
+            if (!isExpandable || event.key !== "Enter" && event.key !== " ")
+              return;
+            event.preventDefault();
+            toggleProperty(propertyPath);
+          },
+          onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
+          onMouseLeave: () => setHoveredProperty(null),
+          children: [
+            isTopLevel && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_react45.Handle,
+                {
+                  type: "target",
+                  position: import_react45.Position.Left,
+                  id: `${property.name}-target`,
+                  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
+                  style: HANDLE_LEFT_OFFSET_STYLE
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_react45.Handle,
+                {
+                  type: "source",
+                  position: import_react45.Position.Right,
+                  id: `${property.name}-source`,
+                  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
+                  style: HANDLE_RIGHT_OFFSET_STYLE
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 flex items-center justify-between gap-3 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 min-w-0", children: [
+                isExpandable && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  "span",
+                  {
+                    className: "shrink-0 text-[rgb(var(--ec-page-text-muted))]",
+                    "aria-hidden": "true",
+                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_solid.ChevronDownIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_solid.ChevronRightIcon, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))] truncate", children: property.name }),
+                property.required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500 text-xs", children: "*" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono shrink-0", children: getPropertyTypeLabel(property) })
+            ] }),
+            referencedEntityId && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "div",
+              {
+                className: "w-2 h-2 bg-blue-500 rounded-full",
+                title: `References ${referencedEntityId}`
+              }
+            ) }),
+            isHovered && property.description && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
+            ] })
+          ]
+        }
+      ),
+      isExpandable && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover)/0.18)]", children: renderPropertyRows(nestedProperties, depth + 1, propertyPath) })
+    ] }, propertyKey);
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ContextMenu2.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ContextMenu2.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
@@ -5324,10 +5460,20 @@ var Entity_default = (0, import_react46.memo)(function EntityNode({
             "div",
             {
               className: classNames15(
-                "px-4 py-2 rounded-t-lg border-b border-[rgb(var(--ec-page-border))]",
+                "relative px-4 py-2 rounded-t-lg border-b border-[rgb(var(--ec-page-border))]",
                 externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
               ),
               children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  import_react45.Handle,
+                  {
+                    type: "target",
+                    position: import_react45.Position.Left,
+                    id: entityTargetHandle,
+                    className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
+                    style: HANDLE_LEFT_OFFSET_STYLE
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
                   Icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
                   /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -5353,59 +5499,7 @@ var Entity_default = (0, import_react46.memo)(function EntityNode({
               ]
             }
           ),
-          properties.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
-            const propertyKey = `${property.name}-${index}`;
-            const isHovered = hoveredProperty === propertyKey;
-            return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-              "div",
-              {
-                className: "relative flex items-center justify-between px-4 py-2 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
-                onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
-                onMouseLeave: () => setHoveredProperty(null),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    import_react45.Handle,
-                    {
-                      type: "target",
-                      position: import_react45.Position.Left,
-                      id: `${property.name}-target`,
-                      className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
-                      style: HANDLE_LEFT_OFFSET_STYLE
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    import_react45.Handle,
-                    {
-                      type: "source",
-                      position: import_react45.Position.Right,
-                      id: `${property.name}-source`,
-                      className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
-                      style: HANDLE_RIGHT_OFFSET_STYLE
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 flex items-center justify-between", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
-                      property.required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500 text-xs", children: "*" })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: getPropertyTypeLabel(property) })
-                  ] }),
-                  (property.references || property.type === "array" && property.items?.type) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    "div",
-                    {
-                      className: "w-2 h-2 bg-blue-500 rounded-full",
-                      title: `References ${property.references || property.items.type}`
-                    }
-                  ) }),
-                  isHovered && property.description && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
-                  ] })
-                ]
-              },
-              propertyKey
-            );
-          }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
+          properties.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: renderPropertyRows(properties) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
           properties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
             targetPosition && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react45.Handle, { type: "target", position: targetPosition }),
             sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react45.Handle, { type: "source", position: sourcePosition })
@@ -5451,7 +5545,7 @@ var Entity_default = (0, import_react46.memo)(function EntityNode({
 
 // src/nodes/User.tsx
 var import_react47 = require("react");
-var import_solid = require("@heroicons/react/20/solid");
+var import_solid2 = require("@heroicons/react/20/solid");
 var import_react48 = require("@xyflow/react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function classNames16(...classes) {
@@ -5487,7 +5581,7 @@ var User_default = (0, import_react47.memo)(function UserNode({
               `border-r-[1px] border-yellow-500`
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_solid.UserIcon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_solid2.UserIcon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
               mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "span",
                 {
@@ -11458,6 +11552,7 @@ var import_jsx_runtime52 = require("react/jsx-runtime");
 var POSITION_CHANGE_THRESHOLD = 1;
 var LARGE_GRAPH_NODE_THRESHOLD = 30;
 var NODE_ORIGIN = [0.1, 0.1];
+var INITIAL_FIT_VIEW_OPTIONS = { padding: 0.2, duration: 0 };
 var MINIMAP_STYLE = {
   backgroundColor: "rgb(var(--ec-page-bg))",
   border: "1px solid rgb(var(--ec-page-border))",
@@ -11717,7 +11812,19 @@ var NodeGraphBuilder = ({
   const [edges, setEdges, onEdgesChange] = (0, import_react93.useEdgesState)(initialEdges);
   const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = (0, import_react93.useReactFlow)();
   const storeApi = (0, import_react93.useStoreApi)();
+  const previousGraphInputRef = (0, import_react92.useRef)({
+    nodes: initialNodes,
+    edges: initialEdges
+  });
   (0, import_react92.useEffect)(() => {
+    const previousGraphInput = previousGraphInputRef.current;
+    previousGraphInputRef.current = {
+      nodes: initialNodes,
+      edges: initialEdges
+    };
+    if (previousGraphInput.nodes === initialNodes && previousGraphInput.edges === initialEdges) {
+      return;
+    }
     setNodes(initialNodes);
     setEdges(initialEdges);
     requestAnimationFrame(() => {
@@ -13099,6 +13206,7 @@ var NodeGraphBuilder = ({
             nodes,
             edges,
             fitView: true,
+            fitViewOptions: INITIAL_FIT_VIEW_OPTIONS,
             onNodesChange: handleNodesChange,
             onEdgesChange,
             onEdgeMouseEnter: handleEdgeMouseEnter,
@@ -13577,6 +13685,7 @@ var edgeTypes = {
   Data,
   DataProductNode,
   DomainNode,
+  ENTITY_TARGET_HANDLE_ID,
   EVENT,
   EntityNode,
   Event,
@@ -13632,7 +13741,9 @@ var edgeTypes = {
   getColorFromString,
   getEdgeLabelForMessageAsSource,
   getEdgeLabelForServiceAsTarget,
+  getNestedEntityProperties,
   getNodesAndEdgesFromDagre,
+  getPropertyTypeLabel,
   layoutGraph,
   nodeComponents,
   nodeConfigs,