@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/components/Connection/ConnectionNode/styles.esm.js

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+import { CIRCLE_WIDTH, LABEL_FONT_SIZE, LABEL_MAX_WIDTH, ICON_SCALE } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+import { Orientation } from './ConnectionModel.esm.js';
+
+const getConnectionHeadBorderColor = ({
+  theme,
+  isSelected,
+  isFocused
+}) => {
+  if (isSelected) {
+    return theme.colors.SECONDARY;
+  }
+  if (isFocused) {
+    return theme.colors.SECONDARY;
+  }
+  return theme.colors.OUTLINE;
+};
+const ConnectionNode = styled.div`
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  display: flex;
+  flex-direction: ${(props) => props.orientation === Orientation.VERTICAL ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 2px;
+  pointer-events: all;
+  cursor: ${(props) => props.previewMode ? "pointer" : "grab"};
+  &:active {
+    cursor: ${(props) => props.previewMode ? "pointer" : "grabbing"};
+  }
+`;
+const ConnectionHead = styled.div`
+  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.SECONDARY_CONTAINER : theme.colors.SURFACE};
+  border: ${({ theme, borderWidth, isSelected, isFocused }) => `${borderWidth}px solid ${getConnectionHeadBorderColor({
+  theme,
+  isSelected,
+  isFocused
+})}`};
+  border-radius: 50%;
+  height: ${CIRCLE_WIDTH}px;
+  width: ${CIRCLE_WIDTH}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ConnectionName = styled.span`
+  font-size: ${LABEL_FONT_SIZE}px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(props) => props.orientation === Orientation.VERTICAL ? LABEL_MAX_WIDTH : "unset"};
+`;
+const IconWrapper = styled.div`
+  height: 32px;
+  width: 32px;
+  svg {
+    fill: ${({ theme, isSelected }) => isSelected ? theme.colors.SECONDARY : theme.colors.OUTLINE};
+    transform: ${({ previewMode }) => previewMode ? `scale(${ICON_SCALE.PREVIEW})` : "none"};
+  }
+`;
+
+export { ConnectionHead, ConnectionName, ConnectionNode, IconWrapper };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Connection/ConnectionNode/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Connection/ConnectionNode/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Theme } from '@emotion/react';\nimport {\n  CIRCLE_WIDTH,\n  ICON_SCALE,\n  LABEL_FONT_SIZE,\n  LABEL_MAX_WIDTH,\n} from '../../../resources';\nimport { Orientation } from './ConnectionModel';\n\ninterface StyleProps {\n  isAnonymous?: boolean;\n  isSelected?: boolean;\n  isClickable?: boolean;\n  isCollapsed?: boolean;\n  isFocused?: boolean;\n  orientation?: Orientation;\n  borderWidth?: number;\n  previewMode?: boolean;\n}\n\nconst getConnectionHeadBorderColor = ({\n  theme,\n  isSelected,\n  isFocused,\n}: Pick<StyleProps, 'isSelected' | 'isFocused'> & { theme: Theme }) => {\n  if (isSelected) {\n    return theme.colors.SECONDARY;\n  }\n  if (isFocused) {\n    return theme.colors.SECONDARY;\n  }\n  return theme.colors.OUTLINE;\n};\n\nexport const ConnectionNode = styled.div<StyleProps>`\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  display: flex;\n  flex-direction: ${(props: StyleProps) =>\n    props.orientation === Orientation.VERTICAL ? 'column' : 'row'};\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 2px;\n  pointer-events: all;\n  cursor: ${(props: StyleProps) => (props.previewMode ? 'pointer' : 'grab')};\n  &:active {\n    cursor: ${(props: StyleProps) =>\n      props.previewMode ? 'pointer' : 'grabbing'};\n  }\n`;\n\nexport const ConnectionHead = styled.div<StyleProps>`\n  background-color: ${({ theme, isSelected }) =>\n    isSelected ? theme.colors.SECONDARY_CONTAINER : theme.colors.SURFACE};\n  border: ${({ theme, borderWidth, isSelected, isFocused }) =>\n    `${borderWidth}px solid ${getConnectionHeadBorderColor({\n      theme,\n      isSelected,\n      isFocused,\n    })}`};\n  border-radius: 50%;\n  height: ${CIRCLE_WIDTH}px;\n  width: ${CIRCLE_WIDTH}px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const ConnectionName = styled.span<StyleProps>`\n  font-size: ${LABEL_FONT_SIZE}px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: ${(props: StyleProps) =>\n    props.orientation === Orientation.VERTICAL ? LABEL_MAX_WIDTH : 'unset'};\n`;\n\ninterface IconWrapperStyleProps {\n  previewMode: boolean;\n  isSelected?: boolean;\n}\nexport const IconWrapper = styled.div<IconWrapperStyleProps>`\n  height: 32px;\n  width: 32px;\n  svg {\n    fill: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.SECONDARY : theme.colors.OUTLINE};\n    transform: ${({ previewMode }) =>\n      previewMode ? `scale(${ICON_SCALE.PREVIEW})` : 'none'};\n  }\n`;\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,+BAA+B,CAAC;AAAA,EACpC,KAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAuE;AACrE,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,MAAM,MAAA,CAAO,SAAA;AAAA,EACtB;AACA,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAO,MAAM,MAAA,CAAO,SAAA;AAAA,EACtB;AACA,EAAA,OAAO,MAAM,MAAA,CAAO,OAAA;AACtB,CAAA;AAEO,MAAM,iBAAiB,MAAA,CAAO,GAAA;AAAA,SAAA,EAC1B,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,kBAAkB,CAAA;AAAA;AAAA,kBAAA,EAErC,CAAC,KAAA,KACjB,KAAA,CAAM,gBAAgB,WAAA,CAAY,QAAA,GAAW,WAAW,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAMrD,CAAC,KAAA,KAAuB,KAAA,CAAM,WAAA,GAAc,YAAY,MAAO,CAAA;AAAA;AAAA,YAAA,EAE7D,CAAC,KAAA,KACT,KAAA,CAAM,WAAA,GAAc,YAAY,UAAU,CAAA;AAAA;AAAA;AAIzC,MAAM,iBAAiB,MAAA,CAAO,GAAA;AAAA,oBAAA,EACf,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,KACvC,UAAA,GAAa,KAAA,CAAM,MAAA,CAAO,mBAAA,GAAsB,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA,UAAA,EAC5D,CAAC,EAAE,KAAA,EAAO,WAAA,EAAa,UAAA,EAAY,WAAU,KACrD,CAAA,EAAG,WAAW,CAAA,SAAA,EAAY,4BAAA,CAA6B;AAAA,EACrD,KAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAC,CAAC,CAAA,CAAE,CAAA;AAAA;AAAA,UAAA,EAEI,YAAY,CAAA;AAAA,SAAA,EACb,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,MAAM,iBAAiB,MAAA,CAAO,IAAA;AAAA,aAAA,EACtB,eAAe,CAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAIf,CAAC,KAAA,KACZ,KAAA,CAAM,gBAAgB,WAAA,CAAY,QAAA,GAAW,kBAAkB,OAAO,CAAA;AAAA;AAOnE,MAAM,cAAc,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAItB,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,KAC3B,UAAA,GAAa,KAAA,CAAM,MAAA,CAAO,SAAA,GAAY,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA,eAAA,EAC/C,CAAC,EAAE,WAAA,EAAY,KAC1B,cAAc,CAAA,MAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAA,CAAA,GAAM,MAAM,CAAA;AAAA;AAAA;;;;"}

package/dist/components/Connection/ConnectionPort/ConnectionPortFactory.esm.js

@@ -0,0 +1,17 @@
+import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
+import { ConnectionPortModel } from './ConnectionPortModel.esm.js';
+
+class ConnectionPortFactory extends AbstractModelFactory {
+  constructor() {
+    super("connectionPort");
+  }
+  generateModel(event) {
+    return new ConnectionPortModel(
+      event.initialConfig.id,
+      event.initialConfig.portType
+    );
+  }
+}
+
+export { ConnectionPortFactory };
+//# sourceMappingURL=ConnectionPortFactory.esm.js.map

package/dist/components/Connection/ConnectionPort/ConnectionPortFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionPortFactory.esm.js","sources":["../../../../src/components/Connection/ConnectionPort/ConnectionPortFactory.tsx"],"sourcesContent":["import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';\nimport { AbstractModelFactory } from '@projectstorm/react-canvas-core';\nimport { ConnectionPortModel } from './ConnectionPortModel';\n\nexport class ConnectionPortFactory extends AbstractModelFactory<\n  PortModel,\n  DiagramEngine\n> {\n  constructor() {\n    super('connectionPort');\n  }\n\n  generateModel(event: { initialConfig: any }): ConnectionPortModel {\n    return new ConnectionPortModel(\n      event.initialConfig.id,\n      event.initialConfig.portType,\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,8BAA8B,oBAAA,CAGzC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,gBAAgB,CAAA;AAAA,EACxB;AAAA,EAEA,cAAc,KAAA,EAAoD;AAChE,IAAA,OAAO,IAAI,mBAAA;AAAA,MACT,MAAM,aAAA,CAAc,EAAA;AAAA,MACpB,MAAM,aAAA,CAAc;AAAA,KACtB;AAAA,EACF;AACF;;;;"}

package/dist/components/Connection/ConnectionPort/ConnectionPortModel.esm.js

@@ -0,0 +1,18 @@
+import { PortModel } from '@projectstorm/react-diagrams';
+
+class ConnectionPortModel extends PortModel {
+  constructor(id, portType) {
+    super({
+      type: "connectionPort",
+      name: `${portType}-${id}`,
+      id: `${portType}-${id}`,
+      alignment: portType
+    });
+  }
+  isLocked() {
+    return true;
+  }
+}
+
+export { ConnectionPortModel };
+//# sourceMappingURL=ConnectionPortModel.esm.js.map

package/dist/components/Connection/ConnectionPort/ConnectionPortModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionPortModel.esm.js","sources":["../../../../src/components/Connection/ConnectionPort/ConnectionPortModel.ts"],"sourcesContent":["import { PortModel, PortModelAlignment } from '@projectstorm/react-diagrams';\n\nexport class ConnectionPortModel extends PortModel {\n  constructor(id: string, portType: PortModelAlignment) {\n    super({\n      type: 'connectionPort',\n      name: `${portType}-${id}`,\n      id: `${portType}-${id}`,\n      alignment: portType,\n    });\n  }\n\n  isLocked(): boolean {\n    return true;\n  }\n}\n"],"names":[],"mappings":";;AAEO,MAAM,4BAA4B,SAAA,CAAU;AAAA,EACjD,WAAA,CAAY,IAAY,QAAA,EAA8B;AACpD,IAAA,KAAA,CAAM;AAAA,MACJ,IAAA,EAAM,gBAAA;AAAA,MACN,IAAA,EAAM,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AAAA,MACvB,EAAA,EAAI,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AAAA,MACrB,SAAA,EAAW;AAAA,KACZ,CAAA;AAAA,EACH;AAAA,EAEA,QAAA,GAAoB;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AACF;;;;"}

package/dist/components/Connection/ConnectionPort/ConnectionPortWidget.esm.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { PortWidget, PortModelAlignment } from '@projectstorm/react-diagrams';
+import { sidePortStyles, inclusionPortStyles } from './styles.esm.js';
+
+function getPortStyles(alignment) {
+  if (alignment === PortModelAlignment.LEFT) {
+    return { left: 0, ...sidePortStyles };
+  }
+  if (alignment === PortModelAlignment.RIGHT) {
+    return { right: 0, ...sidePortStyles };
+  }
+  if (alignment === PortModelAlignment.TOP) {
+    return { top: 0, ...inclusionPortStyles };
+  }
+  return { bottom: 0, ...inclusionPortStyles };
+}
+function ConnectionPortWidget(props) {
+  const { port, engine } = props;
+  const portStyles = getPortStyles(port.getOptions().alignment);
+  return /* @__PURE__ */ jsx(PortWidget, { engine, port, style: portStyles });
+}
+
+export { ConnectionPortWidget };
+//# sourceMappingURL=ConnectionPortWidget.esm.js.map

package/dist/components/Connection/ConnectionPort/ConnectionPortWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionPortWidget.esm.js","sources":["../../../../src/components/Connection/ConnectionPort/ConnectionPortWidget.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport {\n  DiagramEngine,\n  PortModelAlignment,\n  PortWidget,\n} from '@projectstorm/react-diagrams';\nimport { ConnectionPortModel } from './ConnectionPortModel';\nimport { inclusionPortStyles, sidePortStyles } from './styles';\n\ninterface CustomPortProps {\n  port: ConnectionPortModel;\n  engine: DiagramEngine;\n}\n\nfunction getPortStyles(\n  alignment: PortModelAlignment | undefined,\n): CSSProperties {\n  if (alignment === PortModelAlignment.LEFT) {\n    return { left: 0, ...sidePortStyles };\n  }\n  if (alignment === PortModelAlignment.RIGHT) {\n    return { right: 0, ...sidePortStyles };\n  }\n  if (alignment === PortModelAlignment.TOP) {\n    return { top: 0, ...inclusionPortStyles };\n  }\n  return { bottom: 0, ...inclusionPortStyles };\n}\n\nexport function ConnectionPortWidget(props: CustomPortProps) {\n  const { port, engine } = props;\n  const portStyles: CSSProperties = getPortStyles(port.getOptions().alignment);\n\n  return <PortWidget engine={engine} port={port} style={portStyles} />;\n}\n"],"names":[],"mappings":";;;;AAcA,SAAS,cACP,SAAA,EACe;AACf,EAAA,IAAI,SAAA,KAAc,mBAAmB,IAAA,EAAM;AACzC,IAAA,OAAO,EAAE,IAAA,EAAM,CAAA,EAAG,GAAG,cAAA,EAAe;AAAA,EACtC;AACA,EAAA,IAAI,SAAA,KAAc,mBAAmB,KAAA,EAAO;AAC1C,IAAA,OAAO,EAAE,KAAA,EAAO,CAAA,EAAG,GAAG,cAAA,EAAe;AAAA,EACvC;AACA,EAAA,IAAI,SAAA,KAAc,mBAAmB,GAAA,EAAK;AACxC,IAAA,OAAO,EAAE,GAAA,EAAK,CAAA,EAAG,GAAG,mBAAA,EAAoB;AAAA,EAC1C;AACA,EAAA,OAAO,EAAE,MAAA,EAAQ,CAAA,EAAG,GAAG,mBAAA,EAAoB;AAC7C;AAEO,SAAS,qBAAqB,KAAA,EAAwB;AAC3D,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAI,KAAA;AACzB,EAAA,MAAM,UAAA,GAA4B,aAAA,CAAc,IAAA,CAAK,UAAA,GAAa,SAAS,CAAA;AAE3E,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,MAAA,EAAgB,IAAA,EAAY,OAAO,UAAA,EAAY,CAAA;AACpE;;;;"}

package/dist/components/Connection/ConnectionPort/styles.esm.js

@@ -0,0 +1,13 @@
+const sidePortStyles = {
+  position: "absolute",
+  height: "16px",
+  width: "2px"
+};
+const inclusionPortStyles = {
+  position: "absolute",
+  height: "2px",
+  width: "2px"
+};
+
+export { inclusionPortStyles, sidePortStyles };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Connection/ConnectionPort/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Connection/ConnectionPort/styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport const sidePortStyles: CSSProperties = {\n  position: 'absolute',\n  height: '16px',\n  width: '2px',\n};\n\nexport const inclusionPortStyles: CSSProperties = {\n  position: 'absolute',\n  height: '2px',\n  width: '2px',\n};\n"],"names":[],"mappings":"AAEO,MAAM,cAAA,GAAgC;AAAA,EAC3C,QAAA,EAAU,UAAA;AAAA,EACV,MAAA,EAAQ,MAAA;AAAA,EACR,KAAA,EAAO;AACT;AAEO,MAAM,mBAAA,GAAqC;AAAA,EAChD,QAAA,EAAU,UAAA;AAAA,EACV,MAAA,EAAQ,KAAA;AAAA,EACR,KAAA,EAAO;AACT;;;;"}

package/dist/components/Connection/connection-node-util.esm.js

@@ -0,0 +1,12 @@
+import { CONNECTION_NODE, NAME_JOIN_CHAR } from '../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+function getConnectionName(connection) {
+  return getConnectionNameById(connection.id);
+}
+function getConnectionNameById(id) {
+  return `${CONNECTION_NODE}${NAME_JOIN_CHAR}${id}`;
+}
+
+export { getConnectionName, getConnectionNameById };
+//# sourceMappingURL=connection-node-util.esm.js.map

package/dist/components/Connection/connection-node-util.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-node-util.esm.js","sources":["../../../src/components/Connection/connection-node-util.ts"],"sourcesContent":["import { CONNECTION_NODE, NAME_JOIN_CHAR } from '../../resources';\nimport { Connection } from '../../types';\n\nexport function getConnectionName(connection: Connection): string {\n  return getConnectionNameById(connection.id);\n}\n\nexport function getConnectionNameById(id: string): string {\n  return `${CONNECTION_NODE}${NAME_JOIN_CHAR}${id}`;\n}\n\nexport function getConnectionMetadataByName(name: string): {\n  type: string;\n  id: string;\n} {\n  const parts = name.split(NAME_JOIN_CHAR);\n  return { type: parts[0], id: parts[1] };\n}\n\nexport function getConnectionLinkName(source: string, target: string): string {\n  return `${CONNECTION_NODE}${NAME_JOIN_CHAR}${source}::${target}`;\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,kBAAkB,UAAA,EAAgC;AAChE,EAAA,OAAO,qBAAA,CAAsB,WAAW,EAAE,CAAA;AAC5C;AAEO,SAAS,sBAAsB,EAAA,EAAoB;AACxD,EAAA,OAAO,CAAA,EAAG,eAAe,CAAA,EAAG,cAAc,GAAG,EAAE,CAAA,CAAA;AACjD;;;;"}

package/dist/components/Controls/ControlButtons/ControlButton.esm.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import Tooltip from '@mui/material/Tooltip';
+import { ControlIconButton } from './style.esm.js';
+
+function CanvasControlButton(props) {
+  const {
+    children,
+    onClick,
+    tooltipTitle,
+    tooltipPlacement = "left-end"
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      arrow: true,
+      placement: tooltipPlacement,
+      title: tooltipTitle,
+      enterNextDelay: 200,
+      componentsProps: {
+        tooltip: {
+          sx: {
+            fontFamily: "GilmerRegular",
+            fontSize: "12px",
+            padding: "6px 10px"
+          }
+        }
+      },
+      PopperProps: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, -10]
+            }
+          }
+        ]
+      },
+      children: /* @__PURE__ */ jsx(
+        ControlIconButton,
+        {
+          size: "small",
+          onClick,
+          sx: {
+            cursor: "pointer"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+export { CanvasControlButton };
+//# sourceMappingURL=ControlButton.esm.js.map

package/dist/components/Controls/ControlButtons/ControlButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlButton.esm.js","sources":["../../../../src/components/Controls/ControlButtons/ControlButton.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport Tooltip from '@mui/material/Tooltip';\nimport { ControlIconButton } from './style';\n\ninterface ControlButtonProps {\n  children: ReactNode;\n  onClick: () => void;\n  tooltipTitle: string;\n  tooltipPlacement?: 'left-end' | 'right-end' | 'top-start';\n}\n\nexport function CanvasControlButton(props: ControlButtonProps) {\n  const {\n    children,\n    onClick,\n    tooltipTitle,\n    tooltipPlacement = 'left-end',\n  } = props;\n\n  return (\n    <Tooltip\n      arrow\n      placement={tooltipPlacement}\n      title={tooltipTitle}\n      enterNextDelay={200}\n      componentsProps={{\n        tooltip: {\n          sx: {\n            fontFamily: 'GilmerRegular',\n            fontSize: '12px',\n            padding: '6px 10px',\n          },\n        },\n      }}\n      PopperProps={{\n        modifiers: [\n          {\n            name: 'offset',\n            options: {\n              offset: [0, -10],\n            },\n          },\n        ],\n      }}\n    >\n      <ControlIconButton\n        size=\"small\"\n        onClick={onClick}\n        sx={{\n          cursor: 'pointer',\n        }}\n      >\n        {children}\n      </ControlIconButton>\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,oBAAoB,KAAA,EAA2B;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA,GAAmB;AAAA,GACrB,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAK,IAAA;AAAA,MACL,SAAA,EAAW,gBAAA;AAAA,MACX,KAAA,EAAO,YAAA;AAAA,MACP,cAAA,EAAgB,GAAA;AAAA,MAChB,eAAA,EAAiB;AAAA,QACf,OAAA,EAAS;AAAA,UACP,EAAA,EAAI;AAAA,YACF,UAAA,EAAY,eAAA;AAAA,YACZ,QAAA,EAAU,MAAA;AAAA,YACV,OAAA,EAAS;AAAA;AACX;AACF,OACF;AAAA,MACA,WAAA,EAAa;AAAA,QACX,SAAA,EAAW;AAAA,UACT;AAAA,YACE,IAAA,EAAM,QAAA;AAAA,YACN,OAAA,EAAS;AAAA,cACP,MAAA,EAAQ,CAAC,CAAA,EAAG,GAAG;AAAA;AACjB;AACF;AACF,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,OAAA;AAAA,UACL,OAAA;AAAA,UACA,EAAA,EAAI;AAAA,YACF,MAAA,EAAQ;AAAA,WACV;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Controls/ControlButtons/style.esm.js

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import IconButton from '@mui/material/IconButton';
+
+const ControlIconButton = styled(IconButton)`
+  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT} !important;
+  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM} !important;
+  border-radius: 2px !important;
+  height: 32px !important;
+  width: 32px !important;
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+
+  & svg {
+    height: 20px;
+    width: 20px;
+  }
+`;
+
+export { ControlIconButton };
+//# sourceMappingURL=style.esm.js.map

package/dist/components/Controls/ControlButtons/style.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.esm.js","sources":["../../../../src/components/Controls/ControlButtons/style.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport IconButton from '@mui/material/IconButton';\n\n/**\n * Themed IconButton used by `CanvasControlButton`. Background and border are\n * pulled from the active cell-diagram theme so the canvas controls match\n * dark mode automatically.\n */\nexport const ControlIconButton: React.FC<any> = styled(IconButton)`\n  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT} !important;\n  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM} !important;\n  border-radius: 2px !important;\n  height: 32px !important;\n  width: 32px !important;\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n\n  & svg {\n    height: 20px;\n    width: 20px;\n  }\n`;\n"],"names":[],"mappings":";;;AAQO,MAAM,iBAAA,GAAmC,OAAO,UAAU,CAAA;AAAA,oBAAA,EAC3C,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,cAAc,CAAA;AAAA,oBAAA,EAC1C,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EAIlD,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,kBAAkB,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/components/Controls/DiagramControls.esm.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { FullScreenIcon } from '../../resources/assets/icons/FullScreenIcon.esm.js';
+import { FitScreenIcon } from '../../resources/assets/icons/FitScreenIcon.esm.js';
+import { AddIcon } from '../../resources/assets/icons/AddIcon.esm.js';
+import { RemoveIcon } from '../../resources/assets/icons/RemoveIcon.esm.js';
+import { RefreshIcon } from '../../resources/assets/icons/RefreshIcon.esm.js';
+import styled from '@emotion/styled';
+import { CanvasControlButton } from './ControlButtons/ControlButton.esm.js';
+import gsap from 'gsap';
+
+const ControlPanel = styled.div`
+  bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  justify-content: space-between;
+  position: absolute;
+  right: 15px;
+  width: 32px;
+`;
+function DiagramControls(props) {
+  const { engine, animation = true, refreshDiagram } = props;
+  const controlPanelRef = useRef(null);
+  useEffect(() => {
+    if (animation) {
+      gsap.fromTo(
+        controlPanelRef.current,
+        { scale: 0 },
+        {
+          scale: 1,
+          duration: 1,
+          ease: "power3.out",
+          delay: 1
+        }
+      );
+    }
+  }, []);
+  const onZoom = (zoomIn) => {
+    const delta = zoomIn ? 5 : -5;
+    engine.getModel().setZoomLevel(engine.getModel().getZoomLevel() + delta);
+    engine.repaintCanvas();
+  };
+  const zoomToFit = () => {
+    engine.zoomToFitNodes({ margin: 10, maxZoom: 1 });
+  };
+  const zoomToActualSize = () => {
+    engine.getModel().setZoomLevel(100);
+    engine.repaintCanvas();
+  };
+  return /* @__PURE__ */ jsxs(ControlPanel, { ref: controlPanelRef, children: [
+    refreshDiagram && /* @__PURE__ */ jsx(CanvasControlButton, { onClick: refreshDiagram, tooltipTitle: "Refresh", children: /* @__PURE__ */ jsx(RefreshIcon, {}) }),
+    /* @__PURE__ */ jsx(CanvasControlButton, { onClick: zoomToFit, tooltipTitle: "Zoom to fit nodes", children: /* @__PURE__ */ jsx(FullScreenIcon, {}) }),
+    /* @__PURE__ */ jsx(
+      CanvasControlButton,
+      {
+        onClick: zoomToActualSize,
+        tooltipTitle: "Zoom to actual size",
+        children: /* @__PURE__ */ jsx(FitScreenIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        CanvasControlButton,
+        {
+          onClick: () => {
+            onZoom(true);
+          },
+          tooltipTitle: "Zoom in",
+          children: /* @__PURE__ */ jsx(AddIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CanvasControlButton,
+        {
+          onClick: () => {
+            onZoom(false);
+          },
+          tooltipTitle: "Zoom out",
+          children: /* @__PURE__ */ jsx(RemoveIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ControlPanel, DiagramControls };
+//# sourceMappingURL=DiagramControls.esm.js.map

package/dist/components/Controls/DiagramControls.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramControls.esm.js","sources":["../../../src/components/Controls/DiagramControls.tsx"],"sourcesContent":["import { FC, useEffect, useRef } from 'react';\nimport {\n  FullScreenIcon,\n  FitScreenIcon,\n  AddIcon,\n  RemoveIcon,\n  RefreshIcon,\n} from '../../resources/assets/icons';\nimport styled from '@emotion/styled';\nimport { DiagramEngine } from '@projectstorm/react-diagrams';\nimport { CanvasControlButton } from './ControlButtons/ControlButton';\nimport gsap from 'gsap';\n\ninterface ControlProps {\n  engine: DiagramEngine;\n  animation?: boolean;\n  refreshDiagram?: () => void;\n}\n\nexport const ControlPanel: FC<any> = styled.div`\n  bottom: 15px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  justify-content: space-between;\n  position: absolute;\n  right: 15px;\n  width: 32px;\n`;\n\nexport function DiagramControls(props: ControlProps) {\n  const { engine, animation = true, refreshDiagram } = props;\n  const controlPanelRef = useRef(null);\n\n  useEffect(() => {\n    if (animation) {\n      gsap.fromTo(\n        controlPanelRef.current,\n        { scale: 0 },\n        {\n          scale: 1,\n          duration: 1,\n          ease: 'power3.out',\n          delay: 1,\n        },\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onZoom = (zoomIn: boolean) => {\n    const delta: number = zoomIn ? +5 : -5;\n    engine.getModel().setZoomLevel(engine.getModel().getZoomLevel() + delta);\n    engine.repaintCanvas();\n  };\n\n  const zoomToFit = () => {\n    engine.zoomToFitNodes({ margin: 10, maxZoom: 1 });\n  };\n\n  const zoomToActualSize = () => {\n    engine.getModel().setZoomLevel(100);\n    engine.repaintCanvas();\n  };\n\n  return (\n    <ControlPanel ref={controlPanelRef}>\n      {refreshDiagram && (\n        <CanvasControlButton onClick={refreshDiagram} tooltipTitle=\"Refresh\">\n          <RefreshIcon />\n        </CanvasControlButton>\n      )}\n\n      <CanvasControlButton onClick={zoomToFit} tooltipTitle=\"Zoom to fit nodes\">\n        <FullScreenIcon />\n      </CanvasControlButton>\n\n      <CanvasControlButton\n        onClick={zoomToActualSize}\n        tooltipTitle=\"Zoom to actual size\"\n      >\n        <FitScreenIcon />\n      </CanvasControlButton>\n\n      <div>\n        <CanvasControlButton\n          onClick={() => {\n            onZoom(true);\n          }}\n          tooltipTitle=\"Zoom in\"\n        >\n          <AddIcon />\n        </CanvasControlButton>\n\n        <CanvasControlButton\n          onClick={() => {\n            onZoom(false);\n          }}\n          tooltipTitle=\"Zoom out\"\n        >\n          <RemoveIcon />\n        </CanvasControlButton>\n      </div>\n    </ControlPanel>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAmBO,MAAM,eAAwB,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrC,SAAS,gBAAgB,KAAA,EAAqB;AACnD,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAA,GAAY,IAAA,EAAM,gBAAe,GAAI,KAAA;AACrD,EAAA,MAAM,eAAA,GAAkB,OAAO,IAAI,CAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,IAAA,CAAK,MAAA;AAAA,QACH,eAAA,CAAgB,OAAA;AAAA,QAChB,EAAE,OAAO,CAAA,EAAE;AAAA,QACX;AAAA,UACE,KAAA,EAAO,CAAA;AAAA,UACP,QAAA,EAAU,CAAA;AAAA,UACV,IAAA,EAAM,YAAA;AAAA,UACN,KAAA,EAAO;AAAA;AACT,OACF;AAAA,IACF;AAAA,EAEF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,MAAA,GAAS,CAAC,MAAA,KAAoB;AAClC,IAAA,MAAM,KAAA,GAAgB,SAAS,CAAA,GAAK,EAAA;AACpC,IAAA,MAAA,CAAO,QAAA,GAAW,YAAA,CAAa,MAAA,CAAO,UAAS,CAAE,YAAA,KAAiB,KAAK,CAAA;AACvE,IAAA,MAAA,CAAO,aAAA,EAAc;AAAA,EACvB,CAAA;AAEA,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,MAAA,CAAO,eAAe,EAAE,MAAA,EAAQ,EAAA,EAAI,OAAA,EAAS,GAAG,CAAA;AAAA,EAClD,CAAA;AAEA,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAA,MAAA,CAAO,QAAA,EAAS,CAAE,YAAA,CAAa,GAAG,CAAA;AAClC,IAAA,MAAA,CAAO,aAAA,EAAc;AAAA,EACvB,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,GAAA,EAAK,eAAA,EAChB,QAAA,EAAA;AAAA,IAAA,cAAA,oBACC,GAAA,CAAC,uBAAoB,OAAA,EAAS,cAAA,EAAgB,cAAa,SAAA,EACzD,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,oBAGF,GAAA,CAAC,uBAAoB,OAAA,EAAS,SAAA,EAAW,cAAa,mBAAA,EACpD,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAAA,EAClB,CAAA;AAAA,oBAEA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,gBAAA;AAAA,QACT,YAAA,EAAa,qBAAA;AAAA,QAEb,8BAAC,aAAA,EAAA,EAAc;AAAA;AAAA,KACjB;AAAA,yBAEC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,mBAAA;AAAA,QAAA;AAAA,UACC,SAAS,MAAM;AACb,YAAA,MAAA,CAAO,IAAI,CAAA;AAAA,UACb,CAAA;AAAA,UACA,YAAA,EAAa,SAAA;AAAA,UAEb,8BAAC,OAAA,EAAA,EAAQ;AAAA;AAAA,OACX;AAAA,sBAEA,GAAA;AAAA,QAAC,mBAAA;AAAA,QAAA;AAAA,UACC,SAAS,MAAM;AACb,YAAA,MAAA,CAAO,KAAK,CAAA;AAAA,UACd,CAAA;AAAA,UACA,YAAA,EAAa,UAAA;AAAA,UAEb,8BAAC,UAAA,EAAA,EAAW;AAAA;AAAA;AACd,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Controls/DiagramLayers.esm.js

@@ -0,0 +1,166 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import styled from '@emotion/styled';
+import gsap from 'gsap';
+import { useDiagramContext } from '../DiagramContext/DiagramContext.esm.js';
+import { LayersIcon } from '../../resources/assets/icons/LayersIcon.esm.js';
+import { ObservationIcon } from '../../resources/assets/icons/ObservationIcon.esm.js';
+import { DiffIcon } from '../../resources/assets/icons/DiffIcon.esm.js';
+import { DiagramIcon } from '../../resources/assets/icons/DiagramIcon.esm.js';
+import { DiagramLayer } from '../../types.esm.js';
+import { CanvasControlButton } from './ControlButtons/ControlButton.esm.js';
+import { LayerButton } from './LayerButton.esm.js';
+
+const DiagramLayersPanel = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: end;
+  gap: 4px;
+  position: absolute;
+  bottom: 15px;
+  left: 15px;
+`;
+const LayersPanel = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 6px 4px;
+  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};
+  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM};
+`;
+styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM};
+  width: 34px;
+  height: 34px;
+  border-radius: 2px;
+  color: ${({ theme, selected }) => selected ? theme.colors.PRIMARY : theme.colors.OUTLINE_VARIANT};
+  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  padding: 5px;
+  cursor: pointer;
+  &:active {
+    background-color: ${({ theme }) => theme.colors.SURFACE_DIM};
+  }
+`;
+const LayerIcon = styled.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px;
+`;
+function DiagramLayers(props) {
+  const { animation = true, tooltips } = props;
+  const {
+    diagramLayers: { addLayer, removeLayer, hasLayer, activeLayers }
+  } = useDiagramContext();
+  const [hover, setHover] = useState(true);
+  const controlPanelRef = useRef(null);
+  const canRemoveLayer = activeLayers.length > 1;
+  useEffect(() => {
+    if (animation) {
+      gsap.fromTo(
+        controlPanelRef.current,
+        { scale: 0 },
+        {
+          scale: 1,
+          duration: 1,
+          ease: "power3.out",
+          delay: 1
+        }
+      );
+    }
+  }, []);
+  const toggleArchitectureLayer = () => {
+    if (hasLayer(DiagramLayer.ARCHITECTURE)) {
+      removeLayer(DiagramLayer.ARCHITECTURE);
+    } else {
+      addLayer(DiagramLayer.ARCHITECTURE);
+    }
+  };
+  const toggleObservabilityLayer = () => {
+    if (hasLayer(DiagramLayer.OBSERVABILITY)) {
+      removeLayer(DiagramLayer.OBSERVABILITY);
+    } else {
+      addLayer(DiagramLayer.OBSERVABILITY);
+    }
+  };
+  const toggleDiffLayer = () => {
+    if (hasLayer(DiagramLayer.DIFF)) {
+      removeLayer(DiagramLayer.DIFF);
+    } else {
+      addLayer(DiagramLayer.DIFF);
+    }
+  };
+  const toggleDiagramLayerPanel = () => {
+    setHover((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsxs(DiagramLayersPanel, { ref: controlPanelRef, children: [
+    /* @__PURE__ */ jsx(
+      CanvasControlButton,
+      {
+        onClick: toggleDiagramLayerPanel,
+        tooltipTitle: !hover ? "Toggle architecture layers" : "",
+        children: /* @__PURE__ */ jsx(LayersIcon, {})
+      }
+    ),
+    hover && /* @__PURE__ */ jsxs(LayersPanel, { children: [
+      /* @__PURE__ */ jsxs(
+        LayerButton,
+        {
+          onClick: toggleArchitectureLayer,
+          selected: hasLayer(DiagramLayer.ARCHITECTURE),
+          clickable: hasLayer(DiagramLayer.ARCHITECTURE) ? canRemoveLayer : true,
+          tooltipTitle: "Toggle static architecture layer",
+          tooltipDescription: tooltips?.staticLayer || "Visualize the static architecture defined in the component-config.yaml file. This layer represents the intended architecture of the system and shows the connections between components as specified by the user.",
+          children: [
+            /* @__PURE__ */ jsx(LayerIcon, { children: /* @__PURE__ */ jsx(DiagramIcon, { styles: { width: 24, height: 24 } }) }),
+            "Static"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        LayerButton,
+        {
+          onClick: toggleObservabilityLayer,
+          selected: hasLayer(DiagramLayer.OBSERVABILITY),
+          clickable: hasLayer(DiagramLayer.OBSERVABILITY) ? canRemoveLayer : true,
+          tooltipTitle: "Toggle runtime architecture layer",
+          tooltipDescription: tooltips?.runtimeLayer || "Visualize the runtime architecture of the system. This layer represents the actual runtime architecture of the system and shows the connections between components based on observability data.",
+          children: [
+            /* @__PURE__ */ jsx(LayerIcon, { children: /* @__PURE__ */ jsx(ObservationIcon, { styles: { width: 24, height: 24 } }) }),
+            "Runtime"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        LayerButton,
+        {
+          onClick: toggleDiffLayer,
+          selected: hasLayer(DiagramLayer.DIFF),
+          clickable: hasLayer(DiagramLayer.DIFF) ? canRemoveLayer : true,
+          tooltipTitle: "Toggle architectural drift layer",
+          tooltipDescription: tooltips?.diffLayer || "Detect architectural drift by comparing the static and runtime architecture layers. This layer highlights the differences between the static and runtime architecture layers, allowing you to identify architectural drift.",
+          children: [
+            /* @__PURE__ */ jsx(LayerIcon, { children: /* @__PURE__ */ jsx(DiffIcon, { styles: { width: 24, height: 24 } }) }),
+            "Diff"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+export { DiagramLayers, DiagramLayersPanel, LayerIcon, LayersPanel };
+//# sourceMappingURL=DiagramLayers.esm.js.map

package/dist/components/Controls/DiagramLayers.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramLayers.esm.js","sources":["../../../src/components/Controls/DiagramLayers.tsx"],"sourcesContent":["import { FC, useEffect, useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport gsap from 'gsap';\nimport { useDiagramContext } from '../DiagramContext/DiagramContext';\nimport {\n  DiagramIcon,\n  DiffIcon,\n  LayersIcon,\n  ObservationIcon,\n} from '../../resources';\nimport { DiagramLayer, DiagramLayerTooltips } from '../../types';\nimport { CanvasControlButton } from './ControlButtons/ControlButton';\nimport { LayerButton } from './LayerButton';\n\nexport const DiagramLayersPanel: FC<any> = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: end;\n  gap: 4px;\n  position: absolute;\n  bottom: 15px;\n  left: 15px;\n`;\n\nexport const LayersPanel: FC<any> = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 6px 4px;\n  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};\n  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM};\n`;\n\nexport const MainButton: FC<any> = styled.div`\n  border: 1px solid ${({ theme }) => theme.colors.SURFACE_DIM};\n  width: 34px;\n  height: 34px;\n  border-radius: 2px;\n  color: ${({ theme, selected }: { theme: any; selected?: boolean }) =>\n    selected ? theme.colors.PRIMARY : theme.colors.OUTLINE_VARIANT};\n  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  padding: 5px;\n  cursor: pointer;\n  &:active {\n    background-color: ${({ theme }) => theme.colors.SURFACE_DIM};\n  }\n`;\n\nexport const LayerIcon: FC<any> = styled.div`\n  width: 40px;\n  height: 40px;\n  border-radius: 2px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  padding: 4px;\n`;\n\ninterface DiagramLayersProps {\n  animation?: boolean;\n  tooltips?: DiagramLayerTooltips;\n}\n\nexport function DiagramLayers(props: DiagramLayersProps) {\n  const { animation = true, tooltips } = props;\n  const {\n    diagramLayers: { addLayer, removeLayer, hasLayer, activeLayers },\n  } = useDiagramContext();\n  const [hover, setHover] = useState(true);\n  const controlPanelRef = useRef(null);\n  const canRemoveLayer = activeLayers.length > 1;\n\n  useEffect(() => {\n    if (animation) {\n      gsap.fromTo(\n        controlPanelRef.current,\n        { scale: 0 },\n        {\n          scale: 1,\n          duration: 1,\n          ease: 'power3.out',\n          delay: 1,\n        },\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const toggleArchitectureLayer = () => {\n    if (hasLayer(DiagramLayer.ARCHITECTURE)) {\n      removeLayer(DiagramLayer.ARCHITECTURE);\n    } else {\n      addLayer(DiagramLayer.ARCHITECTURE);\n    }\n  };\n\n  const toggleObservabilityLayer = () => {\n    if (hasLayer(DiagramLayer.OBSERVABILITY)) {\n      removeLayer(DiagramLayer.OBSERVABILITY);\n    } else {\n      addLayer(DiagramLayer.OBSERVABILITY);\n    }\n  };\n\n  const toggleDiffLayer = () => {\n    if (hasLayer(DiagramLayer.DIFF)) {\n      removeLayer(DiagramLayer.DIFF);\n    } else {\n      addLayer(DiagramLayer.DIFF);\n    }\n  };\n\n  const toggleDiagramLayerPanel = () => {\n    setHover(prev => !prev);\n  };\n\n  return (\n    <DiagramLayersPanel ref={controlPanelRef}>\n      <CanvasControlButton\n        onClick={toggleDiagramLayerPanel}\n        tooltipTitle={!hover ? 'Toggle architecture layers' : ''}\n      >\n        <LayersIcon />\n      </CanvasControlButton>\n      {hover && (\n        <LayersPanel>\n          <LayerButton\n            onClick={toggleArchitectureLayer}\n            selected={hasLayer(DiagramLayer.ARCHITECTURE)}\n            clickable={\n              hasLayer(DiagramLayer.ARCHITECTURE) ? canRemoveLayer : true\n            }\n            tooltipTitle=\"Toggle static architecture layer\"\n            tooltipDescription={\n              tooltips?.staticLayer ||\n              'Visualize the static architecture defined in the component-config.yaml file. This layer represents the intended architecture of the system and shows the connections between components as specified by the user.'\n            }\n          >\n            <LayerIcon>\n              <DiagramIcon styles={{ width: 24, height: 24 }} />\n            </LayerIcon>\n            Static\n          </LayerButton>\n          <LayerButton\n            onClick={toggleObservabilityLayer}\n            selected={hasLayer(DiagramLayer.OBSERVABILITY)}\n            clickable={\n              hasLayer(DiagramLayer.OBSERVABILITY) ? canRemoveLayer : true\n            }\n            tooltipTitle=\"Toggle runtime architecture layer\"\n            tooltipDescription={\n              tooltips?.runtimeLayer ||\n              'Visualize the runtime architecture of the system. This layer represents the actual runtime architecture of the system and shows the connections between components based on observability data.'\n            }\n          >\n            <LayerIcon>\n              <ObservationIcon styles={{ width: 24, height: 24 }} />\n            </LayerIcon>\n            Runtime\n          </LayerButton>\n          <LayerButton\n            onClick={toggleDiffLayer}\n            selected={hasLayer(DiagramLayer.DIFF)}\n            clickable={hasLayer(DiagramLayer.DIFF) ? canRemoveLayer : true}\n            tooltipTitle=\"Toggle architectural drift layer\"\n            tooltipDescription={\n              tooltips?.diffLayer ||\n              'Detect architectural drift by comparing the static and runtime architecture layers. This layer highlights the differences between the static and runtime architecture layers, allowing you to identify architectural drift.'\n            }\n          >\n            <LayerIcon>\n              <DiffIcon styles={{ width: 24, height: 24 }} />\n            </LayerIcon>\n            Diff\n          </LayerButton>\n        </LayersPanel>\n      )}\n    </DiagramLayersPanel>\n  );\n}\n"],"names":[],"mappings":"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"}