@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/graph/diagramFactory.esm.js

@@ -0,0 +1,151 @@
+import { parseInstanceId, parseComponentId } from '@massdriver/backstage-plugin-common';
+import { NODE_HEIGHT, NODE_WIDTH } from './DiagramNode.constants.esm.js';
+
+const BASE_EDGE_STYLE = {
+  strokeWidth: "3",
+  stroke: "#b7b7b7"
+};
+const DISCONNECTED_EDGE_STYLE = {
+  ...BASE_EDGE_STYLE,
+  strokeDasharray: "6 4"
+};
+const deriveHandleType = ({ resourceType, required }, showFieldStatus) => {
+  if (!resourceType) return "error";
+  if (showFieldStatus && required) return "required";
+  return "default";
+};
+const buildHandles = (slots = [], connectedNames, { showFieldStatus = true } = {}) => slots.filter(
+  (slot) => !slot.resourceType || slot.resourceType.connectionOrientation === "LINK"
+).map((slot) => ({
+  id: slot.name,
+  name: slot.name,
+  required: slot.required,
+  resourceTypeId: slot.resourceType?.id ?? null,
+  hasConnection: connectedNames.has(slot.name),
+  handleType: deriveHandleType(slot, showFieldStatus),
+  showFieldStatus
+}));
+const buildDiagram = ({
+  components = [],
+  links = [],
+  instances = [],
+  connections = [],
+  selectedComponentId = null
+} = {}) => {
+  const instancesByScopedComponentId = new Map(
+    instances.map((inst) => [parseInstanceId(inst.id).scopedComponentId, inst])
+  );
+  const connectionsByLinkId = new Map(
+    connections.map((conn) => [conn.link?.id, conn]).filter(([id]) => id != null)
+  );
+  const outgoingByInstanceId = /* @__PURE__ */ new Map();
+  const incomingByInstanceId = /* @__PURE__ */ new Map();
+  connections.forEach((conn) => {
+    const fromId = conn.fromInstance?.id;
+    const toId = conn.toInstance?.id;
+    if (fromId) {
+      if (!outgoingByInstanceId.has(fromId))
+        outgoingByInstanceId.set(fromId, /* @__PURE__ */ new Set());
+      outgoingByInstanceId.get(fromId).add(conn.fromField);
+    }
+    if (toId) {
+      if (!incomingByInstanceId.has(toId))
+        incomingByInstanceId.set(toId, /* @__PURE__ */ new Set());
+      incomingByInstanceId.get(toId).add(conn.toField);
+    }
+  });
+  const componentsWithInstance = components.map((component) => ({
+    component,
+    instance: instancesByScopedComponentId.get(
+      parseComponentId(component.id).scopedComponentId
+    ) ?? null
+  })).filter(
+    (entry) => entry.instance !== null
+  );
+  const instanceByComponentId = new Map(
+    componentsWithInstance.map(({ component, instance }) => [
+      component.id,
+      instance
+    ])
+  );
+  const resourceFieldsByComponentId = new Map(
+    componentsWithInstance.map(({ component, instance }) => [
+      component.id,
+      new Set((instance.bundle?.resources ?? []).map((slot) => slot.name))
+    ])
+  );
+  const dependencyFieldsByComponentId = new Map(
+    componentsWithInstance.map(({ component, instance }) => [
+      component.id,
+      new Set((instance.bundle?.dependencies ?? []).map((slot) => slot.name))
+    ])
+  );
+  const nodes = componentsWithInstance.map(
+    ({ component, instance }) => {
+      const incoming = incomingByInstanceId.get(instance.id) ?? /* @__PURE__ */ new Set();
+      const outgoing = outgoingByInstanceId.get(instance.id) ?? /* @__PURE__ */ new Set();
+      const { scopedComponentId } = parseComponentId(component.id);
+      return {
+        id: component.id,
+        position: component.position ?? { x: 0, y: 0 },
+        type: "DiagramNode",
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        data: {
+          id: scopedComponentId,
+          instanceId: scopedComponentId,
+          fullInstanceId: instance.id,
+          name: component.name,
+          ociRepoName: component.ociRepo?.name ?? null,
+          icon: instance.bundle?.icon ?? null,
+          version: instance.version ?? null,
+          status: instance.status ?? null,
+          isSelected: scopedComponentId === selectedComponentId,
+          dependencyHandles: buildHandles(
+            instance.bundle?.dependencies ?? [],
+            incoming
+          ),
+          resourceHandles: buildHandles(
+            instance.bundle?.resources ?? [],
+            outgoing,
+            {
+              showFieldStatus: false
+            }
+          )
+        }
+      };
+    }
+  );
+  const edges = links.map((link) => ({
+    link,
+    connection: connectionsByLinkId.get(link.id) ?? null
+  })).filter(({ link }) => {
+    const fromInstance = instanceByComponentId.get(link.fromComponent?.id);
+    const toInstance = instanceByComponentId.get(link.toComponent?.id);
+    if (!fromInstance || !toInstance) return false;
+    const resourceFields = resourceFieldsByComponentId.get(
+      link.fromComponent.id
+    );
+    const dependencyFields = dependencyFieldsByComponentId.get(
+      link.toComponent.id
+    );
+    return Boolean(
+      resourceFields?.has(link.fromField) && dependencyFields?.has(link.toField)
+    );
+  }).map(({ link, connection }) => {
+    const isConnection = connection !== null;
+    return {
+      id: link.id,
+      source: link.fromComponent.id,
+      sourceHandle: link.fromField,
+      target: link.toComponent.id,
+      targetHandle: link.toField,
+      style: isConnection ? BASE_EDGE_STYLE : DISCONNECTED_EDGE_STYLE,
+      data: { isConnection }
+    };
+  });
+  return { nodes, edges };
+};
+
+export { BASE_EDGE_STYLE, DISCONNECTED_EDGE_STYLE, buildDiagram };
+//# sourceMappingURL=diagramFactory.esm.js.map

package/dist/features/environment/graph/diagramFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagramFactory.esm.js","sources":["../../../../src/features/environment/graph/diagramFactory.ts"],"sourcesContent":["import type { Edge, Node } from '@xyflow/react';\nimport {\n  parseComponentId,\n  parseInstanceId,\n} from '@massdriver/backstage-plugin-common';\nimport { NODE_WIDTH, NODE_HEIGHT } from './DiagramNode.constants';\n\n// Ported from apps/web/features/environments/utils/diagramFactory.js. Read-only:\n// edges use the default React Flow edge type (the app's `deletable` edge type\n// is dropped since links cannot be removed here).\n\nconst BASE_EDGE_STYLE = {\n  strokeWidth: '3',\n  stroke: '#b7b7b7',\n};\n\nconst DISCONNECTED_EDGE_STYLE = {\n  ...BASE_EDGE_STYLE,\n  strokeDasharray: '6 4',\n};\n\nexport interface ResourceType {\n  id: string;\n  connectionOrientation?: string | null;\n}\n\nexport interface Slot {\n  name: string;\n  required?: boolean | null;\n  resourceType?: ResourceType | null;\n}\n\nexport interface Bundle {\n  id?: string;\n  name?: string | null;\n  version?: string | null;\n  icon?: string | null;\n  dependencies?: Slot[] | null;\n  resources?: Slot[] | null;\n}\n\nexport interface Instance {\n  id: string;\n  name?: string | null;\n  status?: string | null;\n  version?: string | null;\n  bundle?: Bundle | null;\n}\n\nexport interface Component {\n  id: string;\n  name: string;\n  position?: { x: number; y: number } | null;\n  ociRepo?: { id: string; name?: string | null } | null;\n}\n\nexport interface Link {\n  id: string;\n  fromField: string;\n  toField: string;\n  fromComponent?: { id: string } | null;\n  toComponent?: { id: string } | null;\n}\n\nexport interface Connection {\n  id: string;\n  fromField: string;\n  toField: string;\n  fromInstance?: { id: string } | null;\n  toInstance?: { id: string } | null;\n  link?: { id: string } | null;\n}\n\nexport interface DiagramHandle {\n  id: string;\n  name: string;\n  required?: boolean | null;\n  resourceTypeId: string | null;\n  hasConnection: boolean;\n  handleType: string;\n  showFieldStatus: boolean;\n}\n\nexport interface DiagramNodeData {\n  id: string;\n  instanceId: string;\n  fullInstanceId: string;\n  name: string;\n  ociRepoName: string | null;\n  icon: string | null;\n  version: string | null;\n  status: string | null;\n  isSelected: boolean;\n  dependencyHandles: DiagramHandle[];\n  resourceHandles: DiagramHandle[];\n  [key: string]: unknown;\n}\n\nexport type DiagramNodeType = Node<DiagramNodeData>;\n\ninterface BuildDiagramArgs {\n  components?: Component[];\n  links?: Link[];\n  instances?: Instance[];\n  connections?: Connection[];\n  selectedComponentId?: string | null;\n}\n\nconst deriveHandleType = (\n  { resourceType, required }: Slot,\n  showFieldStatus: boolean,\n): string => {\n  if (!resourceType) return 'error';\n  if (showFieldStatus && required) return 'required';\n  return 'default';\n};\n\nconst buildHandles = (\n  slots: Slot[] = [],\n  connectedNames: Set<string>,\n  { showFieldStatus = true }: { showFieldStatus?: boolean } = {},\n): DiagramHandle[] =>\n  slots\n    .filter(\n      slot =>\n        !slot.resourceType ||\n        slot.resourceType.connectionOrientation === 'LINK',\n    )\n    .map(slot => ({\n      id: slot.name,\n      name: slot.name,\n      required: slot.required,\n      resourceTypeId: slot.resourceType?.id ?? null,\n      hasConnection: connectedNames.has(slot.name),\n      handleType: deriveHandleType(slot, showFieldStatus),\n      showFieldStatus,\n    }));\n\nconst buildDiagram = ({\n  components = [],\n  links = [],\n  instances = [],\n  connections = [],\n  selectedComponentId = null,\n}: BuildDiagramArgs = {}): { nodes: DiagramNodeType[]; edges: Edge[] } => {\n  const instancesByScopedComponentId = new Map(\n    instances.map(inst => [parseInstanceId(inst.id).scopedComponentId, inst]),\n  );\n\n  const connectionsByLinkId = new Map(\n    connections\n      .map(conn => [conn.link?.id, conn] as const)\n      .filter(([id]) => id != null),\n  );\n\n  const outgoingByInstanceId = new Map<string, Set<string>>();\n  const incomingByInstanceId = new Map<string, Set<string>>();\n  connections.forEach(conn => {\n    const fromId = conn.fromInstance?.id;\n    const toId = conn.toInstance?.id;\n    if (fromId) {\n      if (!outgoingByInstanceId.has(fromId))\n        outgoingByInstanceId.set(fromId, new Set());\n      outgoingByInstanceId.get(fromId)!.add(conn.fromField);\n    }\n    if (toId) {\n      if (!incomingByInstanceId.has(toId))\n        incomingByInstanceId.set(toId, new Set());\n      incomingByInstanceId.get(toId)!.add(conn.toField);\n    }\n  });\n\n  const componentsWithInstance = components\n    .map(component => ({\n      component,\n      instance:\n        instancesByScopedComponentId.get(\n          parseComponentId(component.id).scopedComponentId,\n        ) ?? null,\n    }))\n    .filter(\n      (entry): entry is { component: Component; instance: Instance } =>\n        entry.instance !== null,\n    );\n\n  const instanceByComponentId = new Map(\n    componentsWithInstance.map(({ component, instance }) => [\n      component.id,\n      instance,\n    ]),\n  );\n\n  const resourceFieldsByComponentId = new Map(\n    componentsWithInstance.map(({ component, instance }) => [\n      component.id,\n      new Set((instance.bundle?.resources ?? []).map(slot => slot.name)),\n    ]),\n  );\n\n  const dependencyFieldsByComponentId = new Map(\n    componentsWithInstance.map(({ component, instance }) => [\n      component.id,\n      new Set((instance.bundle?.dependencies ?? []).map(slot => slot.name)),\n    ]),\n  );\n\n  const nodes: DiagramNodeType[] = componentsWithInstance.map(\n    ({ component, instance }) => {\n      const incoming = incomingByInstanceId.get(instance.id) ?? new Set();\n      const outgoing = outgoingByInstanceId.get(instance.id) ?? new Set();\n      const { scopedComponentId } = parseComponentId(component.id);\n\n      return {\n        id: component.id,\n        position: component.position ?? { x: 0, y: 0 },\n        type: 'DiagramNode',\n        width: NODE_WIDTH,\n        height: NODE_HEIGHT,\n        data: {\n          id: scopedComponentId,\n          instanceId: scopedComponentId,\n          fullInstanceId: instance.id,\n          name: component.name,\n          ociRepoName: component.ociRepo?.name ?? null,\n          icon: instance.bundle?.icon ?? null,\n          version: instance.version ?? null,\n          status: instance.status ?? null,\n          isSelected: scopedComponentId === selectedComponentId,\n          dependencyHandles: buildHandles(\n            instance.bundle?.dependencies ?? [],\n            incoming,\n          ),\n          resourceHandles: buildHandles(\n            instance.bundle?.resources ?? [],\n            outgoing,\n            {\n              showFieldStatus: false,\n            },\n          ),\n        },\n      };\n    },\n  );\n\n  const edges: Edge[] = links\n    .map(link => ({\n      link,\n      connection: connectionsByLinkId.get(link.id) ?? null,\n    }))\n    .filter(({ link }) => {\n      const fromInstance = instanceByComponentId.get(link.fromComponent?.id!);\n      const toInstance = instanceByComponentId.get(link.toComponent?.id!);\n      if (!fromInstance || !toInstance) return false;\n      const resourceFields = resourceFieldsByComponentId.get(\n        link.fromComponent!.id,\n      );\n      const dependencyFields = dependencyFieldsByComponentId.get(\n        link.toComponent!.id,\n      );\n      return Boolean(\n        resourceFields?.has(link.fromField) &&\n          dependencyFields?.has(link.toField),\n      );\n    })\n    .map(({ link, connection }) => {\n      const isConnection = connection !== null;\n      return {\n        id: link.id,\n        source: link.fromComponent!.id,\n        sourceHandle: link.fromField,\n        target: link.toComponent!.id,\n        targetHandle: link.toField,\n        style: isConnection ? BASE_EDGE_STYLE : DISCONNECTED_EDGE_STYLE,\n        data: { isConnection },\n      };\n    });\n\n  return { nodes, edges };\n};\n\nexport { buildDiagram, BASE_EDGE_STYLE, DISCONNECTED_EDGE_STYLE };\n"],"names":[],"mappings":"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"}

package/dist/features/environment/graph/handles/ExpandableHandleWrapper.esm.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { useConnection, Position } from '@xyflow/react';
+import Box from '@massdriver/ui/Box';
+import ExpandCircleDownOutlinedIcon from '@massdriver/ui/icons/ExpandCircleDownOutlinedIcon';
+import stylin from '@massdriver/ui/stylin';
+import NodeHandle from './NodeHandle.esm.js';
+import useRadialPositions from './useRadialPositions.esm.js';
+import useAnimationFrameSync from './useAnimationFrameSync.esm.js';
+import useTransitionLifecycle from './useTransitionLifecycle.esm.js';
+import { NODE_HEIGHT } from '../DiagramNode.constants.esm.js';
+
+const HOTSPOT_WIDTH = 200;
+const HOTSPOT_HEIGHT = 200;
+const RADIUS = 70;
+const START_ANGLE = 70;
+const END_ANGLE = -70;
+const TRANSITION_STAGGER_MS = 10;
+const OPEN_EASING = "cubic-bezier(0.4, 0.0, 0.2, 1)";
+const CLOSE_EASING = "cubic-bezier(0.0, 0.0, 0.2, 1)";
+const ORIGIN_X = HOTSPOT_WIDTH / 2;
+const ORIGIN_Y = (HOTSPOT_HEIGHT - NODE_HEIGHT) / 2 + NODE_HEIGHT / 2;
+const CLOSED_POSITION = { xPos: ORIGIN_X, yPos: ORIGIN_Y };
+const connectionSelector = ({ inProgress }) => inProgress;
+const transitionStyle = (isOpen, index) => ({
+  transition: isOpen ? `top 250ms ${OPEN_EASING} ${index * TRANSITION_STAGGER_MS}ms, left 250ms ${OPEN_EASING} ${index * TRANSITION_STAGGER_MS}ms, right 250ms ${OPEN_EASING} ${index * TRANSITION_STAGGER_MS}ms` : `top 200ms ${CLOSE_EASING}, left 200ms ${CLOSE_EASING}, right 200ms ${CLOSE_EASING}`,
+  willChange: isOpen ? "top, left, right" : "auto"
+});
+const ANIMATING_SAFETY_TIMEOUT_MS = 500;
+const ExpandableHandleWrapper = ({
+  type,
+  placement,
+  handles = [],
+  nodeId,
+  isOpen: isOpenProp
+}) => {
+  const inProgress = useConnection(connectionSelector);
+  const isOpen = Boolean(isOpenProp) || inProgress;
+  const showFan = handles.length > 1;
+  const openPositions = useRadialPositions(
+    {
+      startAngle: START_ANGLE,
+      endAngle: END_ANGLE,
+      radius: RADIUS,
+      numItems: handles.length,
+      originX: ORIGIN_X,
+      originY: ORIGIN_Y
+    },
+    { skip: !showFan }
+  );
+  const [isAnimating, setIsAnimating] = useState(false);
+  const onTransitionStart = useCallback((event) => {
+    if (event.propertyName !== "top") return;
+    setIsAnimating((prev) => prev ? prev : true);
+  }, []);
+  const onTransitionEnd = useCallback((event) => {
+    if (event.propertyName !== "top") return;
+    setIsAnimating((prev) => !prev ? prev : false);
+  }, []);
+  const onTransitionCancel = useCallback(() => {
+    setIsAnimating((prev) => !prev ? prev : false);
+  }, []);
+  const containerRef = useTransitionLifecycle(
+    onTransitionStart,
+    onTransitionCancel
+  );
+  useEffect(() => {
+    if (!isAnimating) return void 0;
+    const safety = setTimeout(
+      () => setIsAnimating(false),
+      ANIMATING_SAFETY_TIMEOUT_MS
+    );
+    return () => clearTimeout(safety);
+  }, [isAnimating]);
+  useAnimationFrameSync(nodeId, isAnimating);
+  if (handles.length === 0) return null;
+  const reactFlowPosition = placement === "left" ? Position.Left : Position.Right;
+  if (!showFan) {
+    const handle = handles[0];
+    return /* @__PURE__ */ jsx(
+      NodeHandle,
+      {
+        id: handle.id,
+        type,
+        position: reactFlowPosition,
+        placement,
+        handleType: handle.handleType,
+        hasConnection: handle.hasConnection,
+        resourceTypeId: handle.resourceTypeId,
+        fieldName: handle.name,
+        required: handle.required,
+        showFieldStatus: handle.showFieldStatus,
+        xPos: 0,
+        yPos: Math.round(NODE_HEIGHT / 2)
+      },
+      handle.id
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      HandleContainer,
+      {
+        className: "node-handle nodrag",
+        ref: containerRef,
+        placement,
+        children: handles.map((handle, index) => {
+          const { xPos, yPos } = isOpen ? openPositions?.[index] ?? CLOSED_POSITION : CLOSED_POSITION;
+          return /* @__PURE__ */ jsx(
+            NodeHandle,
+            {
+              id: handle.id,
+              type,
+              position: reactFlowPosition,
+              placement,
+              handleType: handle.handleType,
+              hasConnection: handle.hasConnection,
+              resourceTypeId: handle.resourceTypeId,
+              fieldName: handle.name,
+              required: handle.required,
+              showFieldStatus: handle.showFieldStatus,
+              xPos,
+              yPos,
+              onTransitionEnd,
+              sx: transitionStyle(isOpen, index)
+            },
+            handle.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NestedIcon,
+      {
+        className: "node-handle",
+        placement,
+        onClick: (event) => event.stopPropagation()
+      }
+    )
+  ] });
+};
+const HandleContainer = stylin(Box, ["placement"])(
+  ({ placement }) => ({
+    position: "absolute",
+    width: `${HOTSPOT_WIDTH}px`,
+    height: `${HOTSPOT_HEIGHT}px`,
+    top: `calc(50% - ${HOTSPOT_HEIGHT / 2}px)`,
+    borderRadius: "50%",
+    ...placement === "left" ? {
+      left: `-${HOTSPOT_WIDTH / 2}px`,
+      clipPath: "polygon(0 0, 50% 0, 50% 100%, 0 100%)"
+    } : {
+      right: `-${HOTSPOT_WIDTH / 2}px`,
+      clipPath: "polygon(50% 0, 100% 0, 100% 100%, 50% 100%)"
+    }
+  })
+);
+const NestedIcon = stylin(ExpandCircleDownOutlinedIcon, ["placement"])(
+  ({ theme, placement }) => ({
+    zIndex: 10,
+    position: "absolute",
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: "50%",
+    fontSize: "18px",
+    width: "27px",
+    height: "27px",
+    top: "50%",
+    left: placement === "left" ? "0%" : "100%",
+    transform: `translate(-50%, -50%) rotate(${placement === "left" ? 90 : 270}deg)`,
+    color: theme.palette.grey[600]
+  })
+);
+
+export { ExpandableHandleWrapper as default };
+//# sourceMappingURL=ExpandableHandleWrapper.esm.js.map

package/dist/features/environment/graph/handles/ExpandableHandleWrapper.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableHandleWrapper.esm.js","sources":["../../../../../src/features/environment/graph/handles/ExpandableHandleWrapper.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { Position, useConnection } from '@xyflow/react';\nimport Box from '@massdriver/ui/Box';\nimport ExpandCircleDownOutlinedIcon from '@massdriver/ui/icons/ExpandCircleDownOutlinedIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport NodeHandle from './NodeHandle';\nimport useRadialPositions from './useRadialPositions';\nimport useAnimationFrameSync from './useAnimationFrameSync';\nimport useTransitionLifecycle from './useTransitionLifecycle';\nimport type { DiagramHandle } from '../diagramFactory';\nimport { NODE_HEIGHT } from '../DiagramNode.constants';\n\nconst HOTSPOT_WIDTH = 200;\nconst HOTSPOT_HEIGHT = 200;\nconst RADIUS = 70;\nconst START_ANGLE = 70;\nconst END_ANGLE = -70;\nconst TRANSITION_STAGGER_MS = 10;\nconst OPEN_EASING = 'cubic-bezier(0.4, 0.0, 0.2, 1)';\nconst CLOSE_EASING = 'cubic-bezier(0.0, 0.0, 0.2, 1)';\n\nconst ORIGIN_X = HOTSPOT_WIDTH / 2;\nconst ORIGIN_Y = (HOTSPOT_HEIGHT - NODE_HEIGHT) / 2 + NODE_HEIGHT / 2;\nconst CLOSED_POSITION = { xPos: ORIGIN_X, yPos: ORIGIN_Y };\n\nconst connectionSelector = ({ inProgress }: { inProgress: boolean }) =>\n  inProgress;\n\nconst transitionStyle = (isOpen: boolean, index: number) => ({\n  transition: isOpen\n    ? `top 250ms ${OPEN_EASING} ${\n        index * TRANSITION_STAGGER_MS\n      }ms, left 250ms ${OPEN_EASING} ${\n        index * TRANSITION_STAGGER_MS\n      }ms, right 250ms ${OPEN_EASING} ${index * TRANSITION_STAGGER_MS}ms`\n    : `top 200ms ${CLOSE_EASING}, left 200ms ${CLOSE_EASING}, right 200ms ${CLOSE_EASING}`,\n  willChange: isOpen ? 'top, left, right' : 'auto',\n});\n\nconst ANIMATING_SAFETY_TIMEOUT_MS = 500;\n\nconst ExpandableHandleWrapper = ({\n  type,\n  placement,\n  handles = [],\n  nodeId,\n  isOpen: isOpenProp,\n}: {\n  type: 'source' | 'target';\n  placement: 'left' | 'right';\n  handles?: DiagramHandle[];\n  nodeId: string;\n  isOpen?: boolean;\n}) => {\n  const inProgress = useConnection(connectionSelector);\n  const isOpen = Boolean(isOpenProp) || inProgress;\n\n  const showFan = handles.length > 1;\n\n  const openPositions = useRadialPositions(\n    {\n      startAngle: START_ANGLE,\n      endAngle: END_ANGLE,\n      radius: RADIUS,\n      numItems: handles.length,\n      originX: ORIGIN_X,\n      originY: ORIGIN_Y,\n    },\n    { skip: !showFan },\n  );\n\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const onTransitionStart = useCallback((event: TransitionEvent) => {\n    if (event.propertyName !== 'top') return;\n    setIsAnimating(prev => (prev ? prev : true));\n  }, []);\n\n  const onTransitionEnd = useCallback((event: any) => {\n    if (event.propertyName !== 'top') return;\n    setIsAnimating(prev => (!prev ? prev : false));\n  }, []);\n\n  const onTransitionCancel = useCallback(() => {\n    setIsAnimating(prev => (!prev ? prev : false));\n  }, []);\n\n  const containerRef = useTransitionLifecycle(\n    onTransitionStart,\n    onTransitionCancel,\n  );\n\n  useEffect(() => {\n    if (!isAnimating) return undefined;\n    const safety = setTimeout(\n      () => setIsAnimating(false),\n      ANIMATING_SAFETY_TIMEOUT_MS,\n    );\n    return () => clearTimeout(safety);\n  }, [isAnimating]);\n\n  useAnimationFrameSync(nodeId, isAnimating);\n\n  if (handles.length === 0) return null;\n\n  const reactFlowPosition =\n    placement === 'left' ? Position.Left : Position.Right;\n\n  if (!showFan) {\n    const handle = handles[0];\n    return (\n      <NodeHandle\n        key={handle.id}\n        id={handle.id}\n        type={type}\n        position={reactFlowPosition}\n        placement={placement}\n        handleType={handle.handleType}\n        hasConnection={handle.hasConnection}\n        resourceTypeId={handle.resourceTypeId}\n        fieldName={handle.name}\n        required={handle.required}\n        showFieldStatus={handle.showFieldStatus}\n        xPos={0}\n        yPos={Math.round(NODE_HEIGHT / 2)}\n      />\n    );\n  }\n\n  return (\n    <>\n      <HandleContainer\n        className=\"node-handle nodrag\"\n        ref={containerRef}\n        placement={placement}\n      >\n        {handles.map((handle, index) => {\n          const { xPos, yPos } = isOpen\n            ? openPositions?.[index] ?? CLOSED_POSITION\n            : CLOSED_POSITION;\n\n          return (\n            <NodeHandle\n              key={handle.id}\n              id={handle.id}\n              type={type}\n              position={reactFlowPosition}\n              placement={placement}\n              handleType={handle.handleType}\n              hasConnection={handle.hasConnection}\n              resourceTypeId={handle.resourceTypeId}\n              fieldName={handle.name}\n              required={handle.required}\n              showFieldStatus={handle.showFieldStatus}\n              xPos={xPos}\n              yPos={yPos}\n              onTransitionEnd={onTransitionEnd}\n              sx={transitionStyle(isOpen, index)}\n            />\n          );\n        })}\n      </HandleContainer>\n      <NestedIcon\n        className=\"node-handle\"\n        placement={placement}\n        onClick={(event: any) => event.stopPropagation()}\n      />\n    </>\n  );\n};\n\nconst HandleContainer = stylin(Box, ['placement'])(\n  ({ placement }: { placement: 'left' | 'right' }) => ({\n    position: 'absolute',\n    width: `${HOTSPOT_WIDTH}px`,\n    height: `${HOTSPOT_HEIGHT}px`,\n    top: `calc(50% - ${HOTSPOT_HEIGHT / 2}px)`,\n    borderRadius: '50%',\n    ...(placement === 'left'\n      ? {\n          left: `-${HOTSPOT_WIDTH / 2}px`,\n          clipPath: 'polygon(0 0, 50% 0, 50% 100%, 0 100%)',\n        }\n      : {\n          right: `-${HOTSPOT_WIDTH / 2}px`,\n          clipPath: 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)',\n        }),\n  }),\n);\n\nconst NestedIcon = stylin(ExpandCircleDownOutlinedIcon, ['placement'])(\n  ({ theme, placement }: { theme: any; placement: 'left' | 'right' }) => ({\n    zIndex: 10,\n    position: 'absolute',\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: '50%',\n    fontSize: '18px',\n    width: '27px',\n    height: '27px',\n    top: '50%',\n    left: placement === 'left' ? '0%' : '100%',\n    transform: `translate(-50%, -50%) rotate(${\n      placement === 'left' ? 90 : 270\n    }deg)`,\n    color: theme.palette.grey[600],\n  }),\n);\n\nexport default ExpandableHandleWrapper;\n"],"names":[],"mappings":"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"}

package/dist/features/environment/graph/handles/NodeHandle.esm.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { HANDLE_TYPES, HANDLE_TYPE } from './handleTypes.esm.js';
+import NodeHandleTooltip from './NodeHandleTooltip.esm.js';
+
+const ERROR_MESSAGE = "Resource type not found";
+const NodeHandle = ({
+  handleType,
+  resourceTypeId,
+  fieldName,
+  required,
+  showFieldStatus = true,
+  hasConnection,
+  isValidConnectionTarget,
+  placement,
+  ...handleProps
+}) => {
+  const Component = HANDLE_TYPES[handleType] ?? HANDLE_TYPES[HANDLE_TYPE.DEFAULT];
+  const isError = handleType === HANDLE_TYPE.ERROR;
+  const isRemoteReference = handleType === HANDLE_TYPE.REMOTE_REFERENCE;
+  const handle = /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: "node-handle nodrag",
+      hasConnection,
+      isValidConnectionTarget,
+      ...handleProps
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    NodeHandleTooltip,
+    {
+      resourceTypeId: isError ? null : resourceTypeId,
+      errorMessage: isError ? ERROR_MESSAGE : null,
+      fieldName,
+      required,
+      isRemoteReference,
+      showFieldStatus,
+      placement,
+      children: handle
+    }
+  );
+};
+
+export { NodeHandle as default };
+//# sourceMappingURL=NodeHandle.esm.js.map

package/dist/features/environment/graph/handles/NodeHandle.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeHandle.esm.js","sources":["../../../../../src/features/environment/graph/handles/NodeHandle.tsx"],"sourcesContent":["import { HANDLE_TYPE, HANDLE_TYPES } from './handleTypes';\nimport NodeHandleTooltip from './NodeHandleTooltip';\n\nconst ERROR_MESSAGE = 'Resource type not found';\n\nconst NodeHandle = ({\n  handleType,\n  resourceTypeId,\n  fieldName,\n  required,\n  showFieldStatus = true,\n  hasConnection,\n  isValidConnectionTarget,\n  placement,\n  ...handleProps\n}: {\n  handleType: string;\n  resourceTypeId?: string | null;\n  fieldName?: string;\n  required?: boolean | null;\n  showFieldStatus?: boolean;\n  hasConnection?: boolean;\n  isValidConnectionTarget?: boolean;\n  placement?: string;\n  [key: string]: unknown;\n}) => {\n  const Component =\n    HANDLE_TYPES[handleType] ?? HANDLE_TYPES[HANDLE_TYPE.DEFAULT];\n  const isError = handleType === HANDLE_TYPE.ERROR;\n  const isRemoteReference = handleType === HANDLE_TYPE.REMOTE_REFERENCE;\n\n  const handle = (\n    <Component\n      className=\"node-handle nodrag\"\n      hasConnection={hasConnection}\n      isValidConnectionTarget={isValidConnectionTarget}\n      {...handleProps}\n    />\n  );\n\n  return (\n    <NodeHandleTooltip\n      resourceTypeId={isError ? null : resourceTypeId}\n      errorMessage={isError ? ERROR_MESSAGE : null}\n      fieldName={fieldName}\n      required={required}\n      isRemoteReference={isRemoteReference}\n      showFieldStatus={showFieldStatus}\n      placement={placement}\n    >\n      {handle}\n    </NodeHandleTooltip>\n  );\n};\n\nexport default NodeHandle;\n"],"names":[],"mappings":";;;;AAGA,MAAM,aAAA,GAAgB,yBAAA;AAEtB,MAAM,aAAa,CAAC;AAAA,EAClB,UAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA;AAAA,EACA,uBAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAUM;AACJ,EAAA,MAAM,YACJ,YAAA,CAAa,UAAU,CAAA,IAAK,YAAA,CAAa,YAAY,OAAO,CAAA;AAC9D,EAAA,MAAM,OAAA,GAAU,eAAe,WAAA,CAAY,KAAA;AAC3C,EAAA,MAAM,iBAAA,GAAoB,eAAe,WAAA,CAAY,gBAAA;AAErD,EAAA,MAAM,MAAA,mBACJ,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,oBAAA;AAAA,MACV,aAAA;AAAA,MACA,uBAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,uBACE,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAgB,UAAU,IAAA,GAAO,cAAA;AAAA,MACjC,YAAA,EAAc,UAAU,aAAA,GAAgB,IAAA;AAAA,MACxC,SAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/features/environment/graph/handles/NodeHandleTooltip.esm.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Chip from '@massdriver/ui/Chip';
+import stylin from '@massdriver/ui/stylin';
+import { chipClasses } from '@mui/material/Chip';
+import '@mui/material/Drawer';
+import '@mui/material/OutlinedInput';
+import '@mui/material/Select';
+import '@mui/material/ToggleButton';
+
+const TOOLTIP_BG = "rgba(34, 51, 84, 0.95)";
+const TOOLTIP_BORDER = "rgba(255, 255, 255, 0.1)";
+const TOOLTIP_TEXT_MUTED = "rgba(255, 255, 255, 0.7)";
+const TOOLTIP_TEXT_SUBTLE = "rgba(255, 255, 255, 0.6)";
+const NodeHandleTooltip = ({
+  resourceTypeId,
+  errorMessage,
+  fieldName,
+  required,
+  isRemoteReference = false,
+  showFieldStatus = true,
+  placement,
+  children
+}) => {
+  const title = errorMessage ? /* @__PURE__ */ jsxs(TooltipContent, { children: [
+    /* @__PURE__ */ jsx(ErrorText, { children: errorMessage }),
+    /* @__PURE__ */ jsx(FieldName, { as: "span", children: fieldName })
+  ] }) : /* @__PURE__ */ jsxs(TooltipContent, { children: [
+    /* @__PURE__ */ jsx(HeaderSection, { children: /* @__PURE__ */ jsxs(ContentSection, { children: [
+      /* @__PURE__ */ jsx(FieldName, { children: fieldName }),
+      /* @__PURE__ */ jsx(TypeText, { children: resourceTypeId })
+    ] }) }),
+    showFieldStatus ? /* @__PURE__ */ jsxs(MetaSection, { children: [
+      /* @__PURE__ */ jsx(FieldStatusLabel, { variant: "caption", children: "Field Status" }),
+      /* @__PURE__ */ jsx(
+        RequiredChip,
+        {
+          label: required ? "Required" : "Optional",
+          color: required ? isRemoteReference ? "success" : "error" : "info",
+          variant: "filled",
+          size: "small"
+        }
+      )
+    ] }) : null,
+    isRemoteReference ? /* @__PURE__ */ jsx(RemoteReferenceNote, { variant: "caption", children: "Fulfilled by a remote reference." }) : null
+  ] });
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title,
+      arrow: true,
+      enterDelay: 600,
+      placement,
+      componentsProps: TOOLTIP_COMPONENTS_PROPS,
+      children
+    }
+  );
+};
+const TOOLTIP_COMPONENTS_PROPS = {
+  tooltip: {
+    className: "node-handle",
+    sx: {
+      bgcolor: TOOLTIP_BG,
+      backdropFilter: "blur(8px)",
+      border: `1px solid ${TOOLTIP_BORDER}`,
+      boxShadow: (theme) => theme.shadows[8]
+    }
+  },
+  arrow: { sx: { color: TOOLTIP_BG } }
+};
+const TooltipContent = stylin(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: 1.5,
+  minWidth: 200,
+  maxWidth: 300
+});
+const HeaderSection = stylin(Box)({
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 1.5
+});
+const ContentSection = stylin(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: 0.5,
+  flex: 1,
+  minWidth: 0
+});
+const MetaSection = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(1),
+  paddingTop: theme.spacing(0.5),
+  borderTop: `1px solid ${TOOLTIP_BORDER}`
+}));
+const FieldStatusLabel = stylin(Typography)({
+  color: TOOLTIP_TEXT_SUBTLE
+});
+const RemoteReferenceNote = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.success.light,
+  fontSize: "0.7rem",
+  fontStyle: "italic",
+  textAlign: "center"
+}));
+const FieldName = stylin(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: "0.875rem",
+  color: theme.palette.common.white,
+  lineHeight: 1.2
+}));
+const TypeText = stylin(Typography)({
+  fontSize: "0.75rem",
+  color: TOOLTIP_TEXT_MUTED,
+  fontFamily: "monospace",
+  lineHeight: 1.2
+});
+const ErrorText = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.error.light,
+  fontWeight: 600,
+  fontSize: "0.875rem"
+}));
+const RequiredChip = stylin(Chip)({
+  height: 18,
+  fontSize: "0.625rem",
+  fontWeight: 600,
+  [`& .${chipClasses.label}`]: { px: 0.75 }
+});
+
+export { NodeHandleTooltip as default };
+//# sourceMappingURL=NodeHandleTooltip.esm.js.map

package/dist/features/environment/graph/handles/NodeHandleTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeHandleTooltip.esm.js","sources":["../../../../../src/features/environment/graph/handles/NodeHandleTooltip.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Chip from '@massdriver/ui/Chip';\nimport stylin from '@massdriver/ui/stylin';\nimport { chipClasses } from '../../../../theme/muiClasses';\n\n// Read-only port of NodeHandleTooltip. The web app fetches the resource type\n// (for its icon) lazily on hover; that query is dropped here — the tooltip\n// shows the field name, resource-type id, and required/optional status only.\n\nconst TOOLTIP_BG = 'rgba(34, 51, 84, 0.95)';\nconst TOOLTIP_BORDER = 'rgba(255, 255, 255, 0.1)';\nconst TOOLTIP_TEXT_MUTED = 'rgba(255, 255, 255, 0.7)';\nconst TOOLTIP_TEXT_SUBTLE = 'rgba(255, 255, 255, 0.6)';\n\nconst NodeHandleTooltip = ({\n  resourceTypeId,\n  errorMessage,\n  fieldName,\n  required,\n  isRemoteReference = false,\n  showFieldStatus = true,\n  placement,\n  children,\n}: {\n  resourceTypeId?: string | null;\n  errorMessage?: string | null;\n  fieldName?: string;\n  required?: boolean | null;\n  isRemoteReference?: boolean;\n  showFieldStatus?: boolean;\n  placement?: string;\n  children: ReactNode;\n}) => {\n  const title = errorMessage ? (\n    <TooltipContent>\n      <ErrorText>{errorMessage}</ErrorText>\n      <FieldName as=\"span\">{fieldName}</FieldName>\n    </TooltipContent>\n  ) : (\n    <TooltipContent>\n      <HeaderSection>\n        <ContentSection>\n          <FieldName>{fieldName}</FieldName>\n          <TypeText>{resourceTypeId}</TypeText>\n        </ContentSection>\n      </HeaderSection>\n      {showFieldStatus ? (\n        <MetaSection>\n          <FieldStatusLabel variant=\"caption\">Field Status</FieldStatusLabel>\n          <RequiredChip\n            label={required ? 'Required' : 'Optional'}\n            color={\n              required ? (isRemoteReference ? 'success' : 'error') : 'info'\n            }\n            variant=\"filled\"\n            size=\"small\"\n          />\n        </MetaSection>\n      ) : null}\n      {isRemoteReference ? (\n        <RemoteReferenceNote variant=\"caption\">\n          Fulfilled by a remote reference.\n        </RemoteReferenceNote>\n      ) : null}\n    </TooltipContent>\n  );\n\n  return (\n    <Tooltip\n      title={title}\n      arrow\n      enterDelay={600}\n      placement={placement}\n      componentsProps={TOOLTIP_COMPONENTS_PROPS}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\nexport default NodeHandleTooltip;\n\nconst TOOLTIP_COMPONENTS_PROPS = {\n  tooltip: {\n    className: 'node-handle',\n    sx: {\n      bgcolor: TOOLTIP_BG,\n      backdropFilter: 'blur(8px)',\n      border: `1px solid ${TOOLTIP_BORDER}`,\n      boxShadow: (theme: any) => theme.shadows[8],\n    },\n  },\n  arrow: { sx: { color: TOOLTIP_BG } },\n};\n\nconst TooltipContent = stylin(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n  minWidth: 200,\n  maxWidth: 300,\n});\n\nconst HeaderSection = stylin(Box)({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: 1.5,\n});\n\nconst ContentSection = stylin(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 0.5,\n  flex: 1,\n  minWidth: 0,\n});\n\nconst MetaSection = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(1),\n  paddingTop: theme.spacing(0.5),\n  borderTop: `1px solid ${TOOLTIP_BORDER}`,\n}));\n\nconst FieldStatusLabel = stylin(Typography)({\n  color: TOOLTIP_TEXT_SUBTLE,\n});\n\nconst RemoteReferenceNote = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.success.light,\n  fontSize: '0.7rem',\n  fontStyle: 'italic',\n  textAlign: 'center',\n}));\n\nconst FieldName = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontWeight: 600,\n  fontSize: '0.875rem',\n  color: theme.palette.common.white,\n  lineHeight: 1.2,\n}));\n\nconst TypeText = stylin(Typography)({\n  fontSize: '0.75rem',\n  color: TOOLTIP_TEXT_MUTED,\n  fontFamily: 'monospace',\n  lineHeight: 1.2,\n});\n\nconst ErrorText = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.error.light,\n  fontWeight: 600,\n  fontSize: '0.875rem',\n}));\n\nconst RequiredChip = stylin(Chip)({\n  height: 18,\n  fontSize: '0.625rem',\n  fontWeight: 600,\n  [`& .${chipClasses.label}`]: { px: 0.75 },\n});\n"],"names":[],"mappings":"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"}