@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/components/Project/ProjectNode/ProjectFactory.esm.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import { ProjectModel } from './ProjectModel.esm.js';
+import { ProjectWidget } from './ProjectWidget.esm.js';
+import { PROJECT_NODE } from '../../../resources/constants.esm.js';
+
+class ProjectFactory extends AbstractReactFactory {
+  constructor() {
+    super(PROJECT_NODE);
+  }
+  generateReactWidget(event) {
+    return /* @__PURE__ */ jsx(ProjectWidget, { engine: this.engine, node: event.model });
+  }
+  generateModel(event) {
+    return new ProjectModel(event.initialConfig.component);
+  }
+}
+
+export { ProjectFactory };
+//# sourceMappingURL=ProjectFactory.esm.js.map

package/dist/components/Project/ProjectNode/ProjectFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectFactory.esm.js","sources":["../../../../src/components/Project/ProjectNode/ProjectFactory.tsx"],"sourcesContent":["import { AbstractReactFactory } from '@projectstorm/react-canvas-core';\nimport { DiagramEngine } from '@projectstorm/react-diagrams-core';\nimport { ProjectModel } from './ProjectModel';\nimport { ProjectWidget } from './ProjectWidget';\nimport { PROJECT_NODE } from '../../../resources';\n\nexport class ProjectFactory extends AbstractReactFactory<\n  ProjectModel,\n  DiagramEngine\n> {\n  constructor() {\n    super(PROJECT_NODE);\n  }\n\n  generateReactWidget(event: { model: ProjectModel }): JSX.Element {\n    return <ProjectWidget engine={this.engine} node={event.model} />;\n  }\n\n  generateModel(event: { initialConfig: any }) {\n    return new ProjectModel(event.initialConfig.component);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,uBAAuB,oBAAA,CAGlC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,YAAY,CAAA;AAAA,EACpB;AAAA,EAEA,oBAAoB,KAAA,EAA6C;AAC/D,IAAA,2BAAQ,aAAA,EAAA,EAAc,MAAA,EAAQ,KAAK,MAAA,EAAQ,IAAA,EAAM,MAAM,KAAA,EAAO,CAAA;AAAA,EAChE;AAAA,EAEA,cAAc,KAAA,EAA+B;AAC3C,IAAA,OAAO,IAAI,YAAA,CAAa,KAAA,CAAM,aAAA,CAAc,SAAS,CAAA;AAAA,EACvD;AACF;;;;"}

package/dist/components/Project/ProjectNode/ProjectHeadWidget/ProjectHeadWidget.esm.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ProjectCellNode } from '../styles.esm.js';
+import { ProjectPortWidget } from '../../ProjectPort/ProjectPortWidget.esm.js';
+import { generateRoundedOctagonSVG } from '../../../Cell/CellNode/CellWidget.esm.js';
+import { CellBounds } from '../../../Cell/CellNode/CellModel.esm.js';
+import { CELL_LINE_MIN_WIDTH, COMPONENT_CIRCLE_WIDTH } from '../../../../resources/constants.esm.js';
+
+function ProjectHeadWidget(props) {
+  const { engine, node, isSelected, isFocused } = props;
+  const cellHeight = COMPONENT_CIRCLE_WIDTH;
+  const strokeWidth = CELL_LINE_MIN_WIDTH;
+  const isExposedToInternet = node.project.connections?.some(
+    (connection) => connection.source?.boundary === CellBounds.NorthBound
+  );
+  const hasExternalDependencies = node.project.connections?.some(
+    (connection) => connection.source?.boundary === CellBounds.SouthBound
+  );
+  const hasInternalDependencies = node.project.connections?.some(
+    (connection) => connection.source?.boundary === CellBounds.EastBound
+  );
+  return /* @__PURE__ */ jsxs(
+    ProjectCellNode,
+    {
+      id: node.project.id,
+      height: cellHeight,
+      borderWidth: strokeWidth,
+      isSelected: isSelected || isFocused,
+      children: [
+        generateRoundedOctagonSVG(cellHeight, 0.3),
+        isExposedToInternet && /* @__PURE__ */ jsx(
+          ProjectPortWidget,
+          {
+            port: node.getPort(`top-${node.getID()}`),
+            engine,
+            isSelected: isSelected || isFocused
+          }
+        ),
+        hasExternalDependencies && /* @__PURE__ */ jsx(
+          ProjectPortWidget,
+          {
+            port: node.getPort(`bottom-${node.getID()}`),
+            engine,
+            isSelected: isSelected || isFocused
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ProjectPortWidget,
+          {
+            port: node.getPort(`left-${node.getID()}`),
+            engine,
+            isSelected: isSelected || isFocused
+          }
+        ),
+        hasInternalDependencies && /* @__PURE__ */ jsx(
+          ProjectPortWidget,
+          {
+            port: node.getPort(`right-${node.getID()}`),
+            engine,
+            isSelected: isSelected || isFocused
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ProjectHeadWidget };
+//# sourceMappingURL=ProjectHeadWidget.esm.js.map

package/dist/components/Project/ProjectNode/ProjectHeadWidget/ProjectHeadWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectHeadWidget.esm.js","sources":["../../../../../src/components/Project/ProjectNode/ProjectHeadWidget/ProjectHeadWidget.tsx"],"sourcesContent":["import { DiagramEngine } from '@projectstorm/react-diagrams';\nimport { ProjectModel } from '../ProjectModel';\nimport { ProjectCellNode } from '../styles';\nimport { MoreVertMenuItem } from '../../../../types';\nimport { ProjectPortWidget } from '../../ProjectPort/ProjectPortWidget';\nimport { generateRoundedOctagonSVG } from '../../../Cell/CellNode/CellWidget';\nimport { CellBounds } from '../../../Cell/CellNode/CellModel';\nimport {\n  CELL_LINE_MIN_WIDTH,\n  COMPONENT_CIRCLE_WIDTH,\n} from '../../../../resources';\n\ninterface ServiceHeadProps {\n  engine: DiagramEngine;\n  node: ProjectModel;\n  isSelected: boolean;\n  isFocused: boolean;\n  menuItems?: MoreVertMenuItem[];\n}\n\nexport function ProjectHeadWidget(props: ServiceHeadProps) {\n  const { engine, node, isSelected, isFocused } = props;\n\n  const cellHeight = COMPONENT_CIRCLE_WIDTH;\n  const strokeWidth = CELL_LINE_MIN_WIDTH;\n  const isExposedToInternet = node.project.connections?.some(\n    connection => connection.source?.boundary === CellBounds.NorthBound,\n  );\n  const hasExternalDependencies = node.project.connections?.some(\n    connection => connection.source?.boundary === CellBounds.SouthBound,\n  );\n  const hasInternalDependencies = node.project.connections?.some(\n    connection => connection.source?.boundary === CellBounds.EastBound,\n  );\n\n  return (\n    <ProjectCellNode\n      id={node.project.id}\n      height={cellHeight}\n      borderWidth={strokeWidth}\n      isSelected={isSelected || isFocused}\n    >\n      {generateRoundedOctagonSVG(cellHeight, 0.3)}\n\n      {isExposedToInternet && (\n        <ProjectPortWidget\n          port={node.getPort(`top-${node.getID()}`)}\n          engine={engine}\n          isSelected={isSelected || isFocused}\n        />\n      )}\n      {hasExternalDependencies && (\n        <ProjectPortWidget\n          port={node.getPort(`bottom-${node.getID()}`)}\n          engine={engine}\n          isSelected={isSelected || isFocused}\n        />\n      )}\n      <ProjectPortWidget\n        port={node.getPort(`left-${node.getID()}`)}\n        engine={engine}\n        isSelected={isSelected || isFocused}\n      />\n      {hasInternalDependencies && (\n        <ProjectPortWidget\n          port={node.getPort(`right-${node.getID()}`)}\n          engine={engine}\n          isSelected={isSelected || isFocused}\n        />\n      )}\n    </ProjectCellNode>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAoBO,SAAS,kBAAkB,KAAA,EAAyB;AACzD,EAAA,MAAM,EAAE,MAAA,EAAQ,IAAA,EAAM,UAAA,EAAY,WAAU,GAAI,KAAA;AAEhD,EAAA,MAAM,UAAA,GAAa,sBAAA;AACnB,EAAA,MAAM,WAAA,GAAc,mBAAA;AACpB,EAAA,MAAM,mBAAA,GAAsB,IAAA,CAAK,OAAA,CAAQ,WAAA,EAAa,IAAA;AAAA,IACpD,CAAA,UAAA,KAAc,UAAA,CAAW,MAAA,EAAQ,QAAA,KAAa,UAAA,CAAW;AAAA,GAC3D;AACA,EAAA,MAAM,uBAAA,GAA0B,IAAA,CAAK,OAAA,CAAQ,WAAA,EAAa,IAAA;AAAA,IACxD,CAAA,UAAA,KAAc,UAAA,CAAW,MAAA,EAAQ,QAAA,KAAa,UAAA,CAAW;AAAA,GAC3D;AACA,EAAA,MAAM,uBAAA,GAA0B,IAAA,CAAK,OAAA,CAAQ,WAAA,EAAa,IAAA;AAAA,IACxD,CAAA,UAAA,KAAc,UAAA,CAAW,MAAA,EAAQ,QAAA,KAAa,UAAA,CAAW;AAAA,GAC3D;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,KAAK,OAAA,CAAQ,EAAA;AAAA,MACjB,MAAA,EAAQ,UAAA;AAAA,MACR,WAAA,EAAa,WAAA;AAAA,MACb,YAAY,UAAA,IAAc,SAAA;AAAA,MAEzB,QAAA,EAAA;AAAA,QAAA,yBAAA,CAA0B,YAAY,GAAG,CAAA;AAAA,QAEzC,mBAAA,oBACC,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,OAAA,CAAQ,OAAO,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,YACxC,MAAA;AAAA,YACA,YAAY,UAAA,IAAc;AAAA;AAAA,SAC5B;AAAA,QAED,uBAAA,oBACC,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,OAAA,CAAQ,UAAU,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,YAC3C,MAAA;AAAA,YACA,YAAY,UAAA,IAAc;AAAA;AAAA,SAC5B;AAAA,wBAEF,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,OAAA,CAAQ,QAAQ,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,YACzC,MAAA;AAAA,YACA,YAAY,UAAA,IAAc;AAAA;AAAA,SAC5B;AAAA,QACC,uBAAA,oBACC,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,OAAA,CAAQ,SAAS,IAAA,CAAK,KAAA,EAAO,CAAA,CAAE,CAAA;AAAA,YAC1C,MAAA;AAAA,YACA,YAAY,UAAA,IAAc;AAAA;AAAA;AAC5B;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/components/Project/ProjectNode/ProjectModel.esm.js

@@ -0,0 +1,56 @@
+import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { SharedNodeModel } from '../../SharedNode/SharedNode.esm.js';
+import { ProjectPortModel } from '../ProjectPort/ProjectPortModel.esm.js';
+import { PROJECT_NODE } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+import 'gsap';
+import '@projectstorm/react-canvas-core';
+import 'react';
+import '@mui/material/Fade';
+import '@mui/material/Box';
+import '@mui/material/Tooltip';
+import '@mui/icons-material/OpenInNewRounded';
+import './styles.esm.js';
+import '../ProjectPort/styles.esm.js';
+import '../../Cell/CellNode/styles.esm.js';
+import '../../DiagramContext/DiagramContext.esm.js';
+import '../../../theme/ThemeContext.esm.js';
+import '../../../theme/CellDiagramThemeProvider.esm.js';
+import '../../SharedLink/SharedLink.esm.js';
+import '../AdvancedLink/AdvancedLinkFactory.esm.js';
+import '../../Component/ComponentNode/styles.esm.js';
+import '../../MoreVertMenu/MoreVertMenu.esm.js';
+import '../../ObservationLabel/ObservationLabel.esm.js';
+import '../../TooltipLabel/TooltipLabel.esm.js';
+import '@mui/material/Popper';
+import '../../Connection/ConnectionNode/styles.esm.js';
+import '../../Cell/EmptyNode/styles.esm.js';
+import '../../External/ExternalNode/styles.esm.js';
+import '@projectstorm/geometry';
+import '../../OverlayLoader/OverlayLayerWidget.esm.js';
+import '../../PromptScreen/PromptScreen.esm.js';
+import '../../Header/Header.esm.js';
+import '../../Controls/DiagramControls.esm.js';
+import { getProjectNameById } from '../../../utils/orgUtils.esm.js';
+import '@projectstorm/react-diagrams-core';
+import 'dagre';
+import 'lodash';
+
+class ProjectModel extends SharedNodeModel {
+  project;
+  constructor(project) {
+    const name = getProjectNameById(project.id);
+    super(PROJECT_NODE, name);
+    this.project = project;
+    this.addPort(new ProjectPortModel(name, PortModelAlignment.LEFT));
+    this.addPort(new ProjectPortModel(name, PortModelAlignment.RIGHT));
+    this.addPort(new ProjectPortModel(name, PortModelAlignment.TOP));
+    this.addPort(new ProjectPortModel(name, PortModelAlignment.BOTTOM));
+  }
+  getPort(name) {
+    return this.getPorts()[name];
+  }
+}
+
+export { ProjectModel };
+//# sourceMappingURL=ProjectModel.esm.js.map

package/dist/components/Project/ProjectNode/ProjectModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectModel.esm.js","sources":["../../../../src/components/Project/ProjectNode/ProjectModel.ts"],"sourcesContent":["import { PortModelAlignment } from '@projectstorm/react-diagrams';\nimport { SharedNodeModel } from '../../SharedNode/SharedNode';\nimport { ProjectPortModel } from '../ProjectPort/ProjectPortModel';\nimport { Project } from '../../../types';\nimport { PROJECT_NODE } from '../../../resources';\nimport { getProjectNameById } from '../../../utils';\n\nexport class ProjectModel extends SharedNodeModel {\n  readonly project: Project;\n\n  constructor(project: Project) {\n    const name = getProjectNameById(project.id);\n    super(PROJECT_NODE, name);\n    this.project = project;\n    // this.setLocked(true);\n\n    this.addPort(new ProjectPortModel(name, PortModelAlignment.LEFT));\n    this.addPort(new ProjectPortModel(name, PortModelAlignment.RIGHT));\n\n    this.addPort(new ProjectPortModel(name, PortModelAlignment.TOP));\n    this.addPort(new ProjectPortModel(name, PortModelAlignment.BOTTOM));\n  }\n\n  getPort(name: string): ProjectPortModel {\n    return this.getPorts()[name] as ProjectPortModel;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,qBAAqB,eAAA,CAAgB;AAAA,EACvC,OAAA;AAAA,EAET,YAAY,OAAA,EAAkB;AAC5B,IAAA,MAAM,IAAA,GAAO,kBAAA,CAAmB,OAAA,CAAQ,EAAE,CAAA;AAC1C,IAAA,KAAA,CAAM,cAAc,IAAI,CAAA;AACxB,IAAA,IAAA,CAAK,OAAA,GAAU,OAAA;AAGf,IAAA,IAAA,CAAK,QAAQ,IAAI,gBAAA,CAAiB,IAAA,EAAM,kBAAA,CAAmB,IAAI,CAAC,CAAA;AAChE,IAAA,IAAA,CAAK,QAAQ,IAAI,gBAAA,CAAiB,IAAA,EAAM,kBAAA,CAAmB,KAAK,CAAC,CAAA;AAEjE,IAAA,IAAA,CAAK,QAAQ,IAAI,gBAAA,CAAiB,IAAA,EAAM,kBAAA,CAAmB,GAAG,CAAC,CAAA;AAC/D,IAAA,IAAA,CAAK,QAAQ,IAAI,gBAAA,CAAiB,IAAA,EAAM,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,EACpE;AAAA,EAEA,QAAQ,IAAA,EAAgC;AACtC,IAAA,OAAO,IAAA,CAAK,QAAA,EAAS,CAAE,IAAI,CAAA;AAAA,EAC7B;AACF;;;;"}

package/dist/components/Project/ProjectNode/ProjectWidget.esm.js

@@ -0,0 +1,111 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useContext, useState, useRef, useEffect } from 'react';
+import Fade from '@mui/material/Fade';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
+import { ProjectHeadWidget } from './ProjectHeadWidget/ProjectHeadWidget.esm.js';
+import { ProjectNode, ProjectName } from './styles.esm.js';
+import { DiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
+import { useColors } from '../../../theme/ThemeContext.esm.js';
+import '../../../theme/CellDiagramThemeProvider.esm.js';
+
+function ProjectWidget(props) {
+  const { node, engine } = props;
+  const colors = useColors();
+  const {
+    selectedNodeId,
+    focusedNodeId,
+    componentMenu,
+    onComponentDoubleClick
+  } = useContext(DiagramContext);
+  const [isHovered, setIsHovered] = useState(false);
+  const headPorts = useRef([]);
+  const displayName = node.project.name;
+  useEffect(() => {
+    headPorts.current.push(node.getPortFromID(`right-${node.getID()}`));
+  }, [node]);
+  const handleOnHover = (task) => {
+    setIsHovered(task === "SELECT" ? true : false);
+    node.handleHover(headPorts.current, task);
+  };
+  const handleOnWidgetDoubleClick = () => {
+    if (onComponentDoubleClick) {
+      onComponentDoubleClick(node.project.id);
+    }
+  };
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    handleOnHover("SELECT");
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    handleOnHover("UNSELECT");
+  };
+  const handleOnContextMenu = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    ProjectNode,
+    {
+      isSelected: node.getID() === selectedNodeId,
+      isFocused: node.getID() === focusedNodeId,
+      onMouseOver: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onDoubleClick: handleOnWidgetDoubleClick,
+      onContextMenu: handleOnContextMenu,
+      children: [
+        /* @__PURE__ */ jsx(
+          ProjectHeadWidget,
+          {
+            engine,
+            node,
+            isSelected: node.getID() === selectedNodeId,
+            isFocused: node.getID() === focusedNodeId || isHovered,
+            menuItems: componentMenu
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: displayName,
+            placement: "bottom",
+            enterNextDelay: 500,
+            arrow: true,
+            children: /* @__PURE__ */ jsx(ProjectName, { children: displayName })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              top: "26px",
+              padding: "8px",
+              cursor: "pointer"
+            },
+            onClick: handleOnWidgetDoubleClick,
+            children: /* @__PURE__ */ jsx(Fade, { in: isHovered, timeout: 350, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: "View Project",
+                placement: "bottom",
+                enterNextDelay: 1e3,
+                children: /* @__PURE__ */ jsx(
+                  OpenInNewRoundedIcon,
+                  {
+                    sx: { color: colors.OUTLINE_VARIANT, fontSize: 20 }
+                  }
+                )
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { ProjectWidget };
+//# sourceMappingURL=ProjectWidget.esm.js.map

package/dist/components/Project/ProjectNode/ProjectWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectWidget.esm.js","sources":["../../../../src/components/Project/ProjectNode/ProjectWidget.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport Fade from '@mui/material/Fade';\nimport Box from '@mui/material/Box';\nimport Tooltip from '@mui/material/Tooltip';\nimport OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';\nimport { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';\nimport { ProjectModel } from './ProjectModel';\nimport { ProjectHeadWidget } from './ProjectHeadWidget/ProjectHeadWidget';\nimport { ProjectName, ProjectNode } from './styles';\nimport { DiagramContext } from '../../DiagramContext/DiagramContext';\nimport { useColors } from '../../../theme';\n\ninterface ProjectWidgetProps {\n  node: ProjectModel;\n  engine: DiagramEngine;\n}\n\nexport function ProjectWidget(props: ProjectWidgetProps) {\n  const { node, engine } = props;\n  const colors = useColors();\n  const {\n    selectedNodeId,\n    focusedNodeId,\n    componentMenu,\n    onComponentDoubleClick,\n  } = useContext(DiagramContext);\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const headPorts = useRef<PortModel[]>([]);\n\n  const displayName: string = node.project.name;\n\n  useEffect(() => {\n    headPorts.current.push(node.getPortFromID(`right-${node.getID()}`)!);\n  }, [node]);\n\n  const handleOnHover = (task: string) => {\n    setIsHovered(task === 'SELECT' ? true : false);\n    node.handleHover(headPorts.current, task);\n  };\n\n  const handleOnWidgetDoubleClick = () => {\n    if (onComponentDoubleClick) {\n      onComponentDoubleClick(node.project.id);\n    }\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n    handleOnHover('SELECT');\n  };\n\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    handleOnHover('UNSELECT');\n  };\n\n  const handleOnContextMenu = (event: MouseEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  return (\n    <>\n      <ProjectNode\n        isSelected={node.getID() === selectedNodeId}\n        isFocused={node.getID() === focusedNodeId}\n        onMouseOver={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onDoubleClick={handleOnWidgetDoubleClick}\n        onContextMenu={handleOnContextMenu}\n      >\n        <ProjectHeadWidget\n          engine={engine}\n          node={node}\n          isSelected={node.getID() === selectedNodeId}\n          isFocused={node.getID() === focusedNodeId || isHovered}\n          menuItems={componentMenu}\n        />\n        <Tooltip\n          title={displayName}\n          placement=\"bottom\"\n          enterNextDelay={500}\n          arrow\n        >\n          <ProjectName>{displayName}</ProjectName>\n        </Tooltip>\n\n        <Box\n          sx={{\n            position: 'absolute',\n            top: '26px',\n            padding: '8px',\n            cursor: 'pointer',\n          }}\n          onClick={handleOnWidgetDoubleClick}\n        >\n          <Fade in={isHovered} timeout={350}>\n            <Tooltip\n              title=\"View Project\"\n              placement=\"bottom\"\n              enterNextDelay={1000}\n            >\n              <OpenInNewRoundedIcon\n                sx={{ color: colors.OUTLINE_VARIANT, fontSize: 20 }}\n              />\n            </Tooltip>\n          </Fade>\n        </Box>\n      </ProjectNode>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Project/ProjectNode/styles.esm.js

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import { LABEL_FONT_SIZE, LABEL_MAX_WIDTH } from '../../../resources/constants.esm.js';
+import 'react/jsx-runtime';
+
+const ProjectNode = styled.div`
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 2px;
+  pointer-events: all;
+  &:active {
+    cursor: grabbing;
+  }
+`;
+const ProjectCellNode = styled.div`
+  width: ${(props) => props.height}px;
+  height: ${(props) => props.height}px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  text-align: center;
+  position: relative;
+  overflow: visible;
+  pointer-events: none;
+
+  #mainCell svg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  #mainCell path {
+    stroke: ${({ theme, isSelected }) => isSelected ? theme.colors.SECONDARY : theme.colors.ON_SURFACE};
+    stroke-width: ${(props) => props.borderWidth};
+    fill: ${({ theme, isSelected }) => isSelected ? theme.colors.SECONDARY_CONTAINER : theme.colors.SURFACE};
+    pointer-events: none;
+  }
+`;
+const ProjectName = styled.span`
+  font-size: ${LABEL_FONT_SIZE}px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  /* max-width: ${LABEL_MAX_WIDTH}px; */
+  &:hover {
+    color: ${({ theme, isClickable }) => isClickable ? theme.colors.PRIMARY_HOVER : ``};
+    text-decoration: ${(props) => props.isClickable ? `underline` : ``};
+  }
+`;
+styled.div`
+  position: absolute;
+  top: 0;
+`;
+
+export { ProjectCellNode, ProjectName, ProjectNode };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Project/ProjectNode/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Project/ProjectNode/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { LABEL_FONT_SIZE, LABEL_MAX_WIDTH } from '../../../resources';\n\nexport const ProjectNode = styled.div<any>`\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  padding: 2px;\n  pointer-events: all;\n  &:active {\n    cursor: grabbing;\n  }\n`;\n\ninterface ProjectNodeStyleProps {\n  id: string;\n  height: number;\n  borderWidth: number;\n  isSelected?: boolean;\n}\n\nexport const ProjectCellNode = styled.div<ProjectNodeStyleProps>`\n  width: ${(props: ProjectNodeStyleProps) => props.height}px;\n  height: ${(props: ProjectNodeStyleProps) => props.height}px;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  text-align: center;\n  position: relative;\n  overflow: visible;\n  pointer-events: none;\n\n  #mainCell svg {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n\n  #mainCell path {\n    stroke: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.SECONDARY : theme.colors.ON_SURFACE};\n    stroke-width: ${(props: ProjectNodeStyleProps) => props.borderWidth};\n    fill: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.SECONDARY_CONTAINER : theme.colors.SURFACE};\n    pointer-events: none;\n  }\n`;\n\nexport const ProjectName: React.FC<any> = styled.span`\n  font-size: ${LABEL_FONT_SIZE}px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  /* max-width: ${LABEL_MAX_WIDTH}px; */\n  &:hover {\n    color: ${({ theme, isClickable }: { theme: any; isClickable?: boolean }) =>\n      isClickable ? theme.colors.PRIMARY_HOVER : ``};\n    text-decoration: ${(props: { isClickable?: boolean }) =>\n      props.isClickable ? `underline` : ``};\n  }\n`;\n\nexport const TopArrowContainer = styled.div`\n  position: absolute;\n  top: 0;\n`;\n"],"names":[],"mappings":";;;;AAGO,MAAM,cAAc,MAAA,CAAO,GAAA;AAAA,SAAA,EACvB,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,kBAAkB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,kBAAkB,MAAA,CAAO,GAAA;AAAA,SAAA,EAC3B,CAAC,KAAA,KAAiC,KAAA,CAAM,MAAM,CAAA;AAAA,UAAA,EAC7C,CAAC,KAAA,KAAiC,KAAA,CAAM,MAAM,CAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,YAAA,EAsB5C,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,KAC7B,UAAA,GAAa,KAAA,CAAM,MAAA,CAAO,SAAA,GAAY,KAAA,CAAM,MAAA,CAAO,UAAU,CAAA;AAAA,kBAAA,EAC/C,CAAC,KAAA,KAAiC,KAAA,CAAM,WAAW,CAAA;AAAA,UAAA,EAC3D,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,KAC3B,UAAA,GAAa,KAAA,CAAM,MAAA,CAAO,mBAAA,GAAsB,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAKnE,MAAM,cAA6B,MAAA,CAAO,IAAA;AAAA,aAAA,EAClC,eAAe,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAKZ,eAAe,CAAA;AAAA;AAAA,WAAA,EAEpB,CAAC,EAAE,KAAA,EAAO,WAAA,OACjB,WAAA,GAAc,KAAA,CAAM,MAAA,CAAO,aAAA,GAAgB,CAAA,CAAE,CAAA;AAAA,qBAAA,EAC5B,CAAC,KAAA,KAClB,KAAA,CAAM,WAAA,GAAc,cAAc,CAAA,CAAE,CAAA;AAAA;AAAA;AAIT,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/components/Project/ProjectPort/ProjectPortFactory.esm.js

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

package/dist/components/Project/ProjectPort/ProjectPortFactory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectPortFactory.esm.js","sources":["../../../../src/components/Project/ProjectPort/ProjectPortFactory.tsx"],"sourcesContent":["import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';\nimport { AbstractModelFactory } from '@projectstorm/react-canvas-core';\nimport { ProjectPortModel } from './ProjectPortModel';\n\nexport class ProjectPortFactory extends AbstractModelFactory<\n  PortModel,\n  DiagramEngine\n> {\n  constructor() {\n    super('projectPort');\n  }\n\n  generateModel(event: { initialConfig: any }): ProjectPortModel {\n    return new ProjectPortModel(\n      event.initialConfig.id,\n      event.initialConfig.portType,\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,2BAA2B,oBAAA,CAGtC;AAAA,EACA,WAAA,GAAc;AACZ,IAAA,KAAA,CAAM,aAAa,CAAA;AAAA,EACrB;AAAA,EAEA,cAAc,KAAA,EAAiD;AAC7D,IAAA,OAAO,IAAI,gBAAA;AAAA,MACT,MAAM,aAAA,CAAc,EAAA;AAAA,MACpB,MAAM,aAAA,CAAc;AAAA,KACtB;AAAA,EACF;AACF;;;;"}

package/dist/components/Project/ProjectPort/ProjectPortModel.esm.js

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

package/dist/components/Project/ProjectPort/ProjectPortModel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectPortModel.esm.js","sources":["../../../../src/components/Project/ProjectPort/ProjectPortModel.ts"],"sourcesContent":["import {\n  DefaultPortModel,\n  PortModelAlignment,\n} from '@projectstorm/react-diagrams';\n\nexport class ProjectPortModel extends DefaultPortModel {\n  constructor(id: string, portType: PortModelAlignment) {\n    super({\n      type: 'projectPort',\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":";;AAKO,MAAM,yBAAyB,gBAAA,CAAiB;AAAA,EACrD,WAAA,CAAY,IAAY,QAAA,EAA8B;AACpD,IAAA,KAAA,CAAM;AAAA,MACJ,IAAA,EAAM,aAAA;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/Project/ProjectPort/ProjectPortWidget.esm.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { PortModelAlignment, PortWidget } from '@projectstorm/react-diagrams';
+import { PortNode, BottomPortNode, TopPortNode, RightPortNode, LeftPortNode } from './styles.esm.js';
+
+function ProjectPortWidget(props) {
+  const { port, engine, isSelected } = props;
+  let DynamicPotNode = PortNode;
+  switch (port.getOptions().alignment) {
+    case PortModelAlignment.LEFT:
+      DynamicPotNode = LeftPortNode;
+      break;
+    case PortModelAlignment.RIGHT:
+      DynamicPotNode = RightPortNode;
+      break;
+    case PortModelAlignment.TOP:
+      DynamicPotNode = TopPortNode;
+      break;
+    case PortModelAlignment.BOTTOM:
+      DynamicPotNode = BottomPortNode;
+      break;
+  }
+  return /* @__PURE__ */ jsx(DynamicPotNode, { isSelected, children: /* @__PURE__ */ jsx(PortWidget, { engine, port }) });
+}
+
+export { ProjectPortWidget };
+//# sourceMappingURL=ProjectPortWidget.esm.js.map

package/dist/components/Project/ProjectPort/ProjectPortWidget.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectPortWidget.esm.js","sources":["../../../../src/components/Project/ProjectPort/ProjectPortWidget.tsx"],"sourcesContent":["import {\n  DiagramEngine,\n  PortModelAlignment,\n  PortWidget,\n} from '@projectstorm/react-diagrams';\nimport { ProjectPortModel } from './ProjectPortModel';\nimport {\n  BottomPortNode,\n  LeftPortNode,\n  PortNode,\n  RightPortNode,\n  TopPortNode,\n} from './styles';\n\ninterface CustomPortProps {\n  port: ProjectPortModel;\n  engine: DiagramEngine;\n  isSelected: boolean;\n}\n\nexport function ProjectPortWidget(props: CustomPortProps) {\n  const { port, engine, isSelected } = props;\n\n  let DynamicPotNode = PortNode;\n\n  switch (port.getOptions().alignment) {\n    case PortModelAlignment.LEFT:\n      DynamicPotNode = LeftPortNode;\n      break;\n    case PortModelAlignment.RIGHT:\n      DynamicPotNode = RightPortNode;\n      break;\n    case PortModelAlignment.TOP:\n      DynamicPotNode = TopPortNode;\n      break;\n    case PortModelAlignment.BOTTOM:\n      DynamicPotNode = BottomPortNode;\n      break;\n    default:\n      break;\n  }\n\n  return (\n    <DynamicPotNode isSelected={isSelected}>\n      <PortWidget engine={engine} port={port} />\n    </DynamicPotNode>\n  );\n}\n"],"names":[],"mappings":";;;;AAoBO,SAAS,kBAAkB,KAAA,EAAwB;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAA,EAAW,GAAI,KAAA;AAErC,EAAA,IAAI,cAAA,GAAiB,QAAA;AAErB,EAAA,QAAQ,IAAA,CAAK,UAAA,EAAW,CAAE,SAAA;AAAW,IACnC,KAAK,kBAAA,CAAmB,IAAA;AACtB,MAAA,cAAA,GAAiB,YAAA;AACjB,MAAA;AAAA,IACF,KAAK,kBAAA,CAAmB,KAAA;AACtB,MAAA,cAAA,GAAiB,aAAA;AACjB,MAAA;AAAA,IACF,KAAK,kBAAA,CAAmB,GAAA;AACtB,MAAA,cAAA,GAAiB,WAAA;AACjB,MAAA;AAAA,IACF,KAAK,kBAAA,CAAmB,MAAA;AACtB,MAAA,cAAA,GAAiB,cAAA;AACjB,MAAA;AAEA;AAGJ,EAAA,2BACG,cAAA,EAAA,EAAe,UAAA,EACd,8BAAC,UAAA,EAAA,EAAW,MAAA,EAAgB,MAAY,CAAA,EAC1C,CAAA;AAEJ;;;;"}

package/dist/components/Project/ProjectPort/styles.esm.js

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+
+const PortNode = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 10px;
+  width: 10px;
+  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.SECONDARY_CONTAINER : theme.colors.SURFACE_DIM};
+  border: 2px solid
+    ${({ theme, isSelected }) => isSelected ? theme.colors.OUTLINE_VARIANT : theme.colors.OUTLINE};
+  border-radius: 50%;
+  margin: -6px 0;
+`;
+const TopPortNode = styled(PortNode)`
+  top: 0;
+  margin: -6px 0;
+  align-items: flex-start;
+`;
+const BottomPortNode = styled(PortNode)`
+  bottom: 0;
+  margin: -6px 0;
+  align-items: flex-end;
+`;
+const LeftPortNode = styled(PortNode)`
+  left: 0;
+  margin: 0 -6px;
+  justify-content: flex-start;
+`;
+const RightPortNode = styled(PortNode)`
+  right: 0;
+  margin: 0 -6px;
+  justify-content: flex-end;
+`;
+
+export { BottomPortNode, LeftPortNode, PortNode, RightPortNode, TopPortNode };
+//# sourceMappingURL=styles.esm.js.map

package/dist/components/Project/ProjectPort/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/components/Project/ProjectPort/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\ninterface PortNodeStyleProps {\n  isSelected: boolean;\n}\nexport const PortNode = styled.div<PortNodeStyleProps>`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 10px;\n  width: 10px;\n  background-color: ${({ theme, isSelected }) =>\n    isSelected ? theme.colors.SECONDARY_CONTAINER : theme.colors.SURFACE_DIM};\n  border: 2px solid\n    ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.OUTLINE_VARIANT : theme.colors.OUTLINE};\n  border-radius: 50%;\n  margin: -6px 0;\n`;\n\nexport const TopPortNode = styled(PortNode)<PortNodeStyleProps>`\n  top: 0;\n  margin: -6px 0;\n  align-items: flex-start;\n`;\n\nexport const BottomPortNode = styled(PortNode)<PortNodeStyleProps>`\n  bottom: 0;\n  margin: -6px 0;\n  align-items: flex-end;\n`;\n\nexport const LeftPortNode = styled(PortNode)<PortNodeStyleProps>`\n  left: 0;\n  margin: 0 -6px;\n  justify-content: flex-start;\n`;\n\nexport const RightPortNode = styled(PortNode)<PortNodeStyleProps>`\n  right: 0;\n  margin: 0 -6px;\n  justify-content: flex-end;\n`;\n"],"names":[],"mappings":";;AAKO,MAAM,WAAW,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAOT,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,KACvC,UAAA,GAAa,KAAA,CAAM,MAAA,CAAO,mBAAA,GAAsB,KAAA,CAAM,MAAA,CAAO,WAAW,CAAA;AAAA;AAAA,IAAA,EAEtE,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,KACrB,UAAA,GAAa,KAAA,CAAM,MAAA,CAAO,eAAA,GAAkB,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAK/D,MAAM,WAAA,GAAc,OAAO,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,cAAA,GAAiB,OAAO,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAMtC,MAAM,YAAA,GAAe,OAAO,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,aAAA,GAAgB,OAAO,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/components/PromptScreen/PromptScreen.esm.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background-image: radial-gradient(
+    ${({ theme }) => theme.colors.SURFACE_CONTAINER} 10%,
+    transparent 0px
+  );
+  background-size: 16px 16px;
+  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};
+`;
+const MassageBox = styled.h3`
+  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};
+  font-family: GilmerRegular;
+  font-size: 16px;
+  padding: 10px;
+`;
+function PromptScreen(props) {
+  const { userMessage } = props;
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(MassageBox, { children: userMessage }) });
+}
+
+export { PromptScreen };
+//# sourceMappingURL=PromptScreen.esm.js.map

package/dist/components/PromptScreen/PromptScreen.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptScreen.esm.js","sources":["../../../src/components/PromptScreen/PromptScreen.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nconst Container = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  background-image: radial-gradient(\n    ${({ theme }) => theme.colors.SURFACE_CONTAINER} 10%,\n    transparent 0px\n  );\n  background-size: 16px 16px;\n  background-color: ${({ theme }) => theme.colors.SURFACE_BRIGHT};\n`;\n\nconst MassageBox = styled.h3`\n  color: ${({ theme }) => theme.colors.ON_SURFACE_VARIANT};\n  font-family: GilmerRegular;\n  font-size: 16px;\n  padding: 10px;\n`;\n\nexport interface PromptScreenProps {\n  userMessage: string;\n}\n\nexport function PromptScreen(props: PromptScreenProps) {\n  const { userMessage } = props;\n\n  return (\n    <Container>\n      <MassageBox>{userMessage}</MassageBox>\n    </Container>\n  );\n}\n"],"names":[],"mappings":";;;AAEA,MAAM,YAAY,MAAA,CAAO,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAQnB,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAI7B,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,cAAc,CAAA;AAAA,CAAA;AAGhE,MAAM,aAAa,MAAA,CAAO,EAAA;AAAA,SAAA,EACf,CAAC,EAAE,KAAA,EAAM,KAAM,KAAA,CAAM,OAAO,kBAAkB,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAUlD,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AAExB,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAY,uBAAY,CAAA,EAC3B,CAAA;AAEJ;;;;"}