@likec4/diagram 1.19.2 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/LikeC4Diagram.css.d.ts +0 -1
- package/dist/LikeC4Diagram.css.js +1 -5
- package/dist/LikeC4Diagram.d.ts +1 -4
- package/dist/LikeC4Diagram.js +102 -147
- package/dist/LikeC4Diagram.props.d.ts +10 -16
- package/dist/LikeC4Search.js +7 -15
- package/dist/StaticLikeC4Diagram.d.ts +1 -1
- package/dist/base/Background.d.ts +7 -0
- package/dist/{xyflow/XYFlowBackground.js → base/Background.js} +5 -6
- package/dist/base/BaseXYFlow.d.ts +14 -0
- package/dist/base/BaseXYFlow.js +146 -0
- package/dist/base/example/RelationshipsBrowser.d.ts +6 -0
- package/dist/base/example/_types.d.ts +20 -0
- package/dist/base/example/custom.d.ts +71 -0
- package/dist/base/example/useViewToNodesEdges.d.ts +6 -0
- package/dist/base/index.d.ts +2 -0
- package/dist/base/primitives/NodeHandles.d.ts +4 -0
- package/dist/base/primitives/NodeHandles.js +14 -0
- package/dist/base/primitives/compound/CompoundActionButton.css.d.ts +3 -0
- package/dist/base/primitives/compound/CompoundActionButton.css.js +9 -0
- package/dist/base/primitives/compound/CompoundActionButton.d.ts +7 -0
- package/dist/base/primitives/compound/CompoundActionButton.js +48 -0
- package/dist/base/primitives/compound/CompoundDetailsButton.css.d.ts +3 -0
- package/dist/base/primitives/compound/CompoundDetailsButton.css.js +9 -0
- package/dist/base/primitives/compound/CompoundDetailsButton.d.ts +7 -0
- package/dist/base/primitives/compound/CompoundDetailsButton.js +50 -0
- package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts +9 -0
- package/dist/base/primitives/compound/CompoundNodeContainer.css.js +17 -0
- package/dist/base/primitives/compound/CompoundNodeContainer.d.ts +26 -0
- package/dist/base/primitives/compound/CompoundNodeContainer.js +86 -0
- package/dist/base/primitives/compound/CompoundTitle.css.d.ts +2 -0
- package/dist/base/primitives/compound/CompoundTitle.css.js +7 -0
- package/dist/base/primitives/compound/CompoundTitle.d.ts +6 -0
- package/dist/base/primitives/compound/CompoundTitle.js +20 -0
- package/dist/base/primitives/customEdge.d.ts +41 -0
- package/dist/base/primitives/customEdge.js +13 -0
- package/dist/base/primitives/customNode.d.ts +7 -0
- package/dist/base/primitives/customNode.js +10 -0
- package/dist/base/primitives/edge/EdgeActionButton.d.ts +7 -0
- package/dist/base/primitives/edge/EdgeActionButton.js +24 -0
- package/dist/base/primitives/edge/EdgeContainer.d.ts +10 -0
- package/dist/base/primitives/edge/EdgeContainer.js +35 -0
- package/dist/{xyflow/edges/edges.css.d.ts → base/primitives/edge/EdgeLabel.css.d.ts} +5 -9
- package/dist/base/primitives/edge/EdgeLabel.css.js +25 -0
- package/dist/base/primitives/edge/EdgeLabel.d.ts +51 -0
- package/dist/base/primitives/edge/EdgeLabel.js +90 -0
- package/dist/{xyflow → base/primitives/edge}/EdgeMarkers.d.ts +2 -0
- package/dist/{xyflow → base/primitives/edge}/EdgeMarkers.js +29 -1
- package/dist/base/primitives/edge/EdgePath.d.ts +44 -0
- package/dist/base/primitives/edge/EdgePath.js +77 -0
- package/dist/base/primitives/edge/edge.css.d.ts +6 -0
- package/dist/base/primitives/edge/edge.css.js +14 -0
- package/dist/base/primitives/element/ElementActionButtons.css.d.ts +3 -0
- package/dist/base/primitives/element/ElementActionButtons.css.js +9 -0
- package/dist/base/primitives/element/ElementActionButtons.d.ts +13 -0
- package/dist/base/primitives/element/ElementActionButtons.js +62 -0
- package/dist/base/primitives/element/ElementDetailsButton.css.d.ts +3 -0
- package/dist/base/primitives/element/ElementDetailsButton.css.js +9 -0
- package/dist/base/primitives/element/ElementDetailsButton.d.ts +7 -0
- package/dist/base/primitives/element/ElementDetailsButton.js +54 -0
- package/dist/base/primitives/element/ElementNodeContainer.css.d.ts +3 -0
- package/dist/base/primitives/element/ElementNodeContainer.css.js +7 -0
- package/dist/base/primitives/element/ElementNodeContainer.d.ts +26 -0
- package/dist/base/primitives/element/ElementNodeContainer.js +60 -0
- package/dist/base/primitives/element/ElementShape.css.d.ts +6 -0
- package/dist/base/primitives/element/ElementShape.css.js +14 -0
- package/dist/base/primitives/element/ElementShape.d.ts +28 -0
- package/dist/{xyflow/nodes/element/ElementShapeSvg.js → base/primitives/element/ElementShape.js} +23 -7
- package/dist/base/primitives/element/ElementTitle.css.d.ts +8 -0
- package/dist/base/primitives/element/ElementTitle.css.js +19 -0
- package/dist/base/primitives/element/ElementTitle.d.ts +10 -0
- package/dist/base/primitives/element/ElementTitle.js +66 -0
- package/dist/base/primitives/index.d.ts +17 -0
- package/dist/base/types.d.ts +90 -0
- package/dist/base/types.js +54 -0
- package/dist/base/updateEdges.d.ts +3 -0
- package/dist/base/updateEdges.js +31 -0
- package/dist/base/updateNodes.d.ts +3 -0
- package/dist/base/updateNodes.js +36 -0
- package/dist/base/xyflowMachine.d.ts +212 -0
- package/dist/context/DiagramEventHandlers.d.ts +10 -0
- package/dist/context/DiagramEventHandlers.js +49 -0
- package/dist/context/DiagramFeatures.d.ts +31 -0
- package/dist/context/DiagramFeatures.js +140 -0
- package/dist/{ui → context}/FramerMotionConfig.js +2 -4
- package/dist/context/IconRenderer.d.ts +11 -0
- package/dist/{xyflow/nodes/shared/ElementIcon.js → context/IconRenderer.js} +14 -14
- package/dist/context/RootContainer.d.ts +9 -0
- package/dist/context/RootContainer.js +20 -0
- package/dist/context/index.d.ts +7 -0
- package/dist/globals.css.js +0 -86
- package/dist/hooks/index.d.ts +7 -5
- package/dist/hooks/useCurrentViewId.d.ts +2 -0
- package/dist/hooks/useCurrentViewId.js +8 -0
- package/dist/hooks/useDiagram.d.ts +10725 -0
- package/dist/hooks/useDiagram.js +119 -0
- package/dist/hooks/useDiagramActor.d.ts +5 -0
- package/dist/hooks/useDiagramActor.js +21 -0
- package/dist/hooks/useDiagramContext.d.ts +3 -0
- package/dist/hooks/useDiagramContext.js +10 -0
- package/dist/hooks/useMantinePortalProps.js +2 -2
- package/dist/hooks/useXYFlow.d.ts +195 -37
- package/dist/hooks/useXYFlow.js +4 -6
- package/dist/index.d.ts +3 -2
- package/dist/index.js +5 -6
- package/dist/likec4diagram/DiagramActor.d.ts +7 -0
- package/dist/likec4diagram/DiagramActor.js +71 -0
- package/dist/likec4diagram/DiagramUI.d.ts +2 -0
- package/dist/likec4diagram/DiagramUI.js +22 -0
- package/dist/likec4diagram/XYFlow.d.ts +6 -0
- package/dist/likec4diagram/XYFlow.js +122 -0
- package/dist/likec4diagram/custom/edges/NotePopover.css.d.ts +2 -0
- package/dist/likec4diagram/custom/edges/NotePopover.css.js +7 -0
- package/dist/likec4diagram/custom/edges/NotePopover.d.ts +4 -0
- package/dist/likec4diagram/custom/edges/NotePopover.js +101 -0
- package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts +55 -0
- package/dist/likec4diagram/custom/edges/RelationshipEdge.js +307 -0
- package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.js +4 -4
- package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.d.ts +5 -5
- package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.js +51 -53
- package/dist/likec4diagram/custom/edges/edges.css.d.ts +2 -0
- package/dist/likec4diagram/custom/edges/edges.css.js +7 -0
- package/dist/likec4diagram/custom/edges/utils.d.ts +22 -0
- package/dist/likec4diagram/custom/edges/utils.js +25 -0
- package/dist/likec4diagram/custom/index.d.ts +57 -0
- package/dist/likec4diagram/custom/index.js +7 -0
- package/dist/likec4diagram/custom/nodes/CompoundActions.d.ts +5 -0
- package/dist/likec4diagram/custom/nodes/CompoundActions.js +25 -0
- package/dist/likec4diagram/custom/nodes/ElementActions.d.ts +7 -0
- package/dist/likec4diagram/custom/nodes/ElementActions.js +69 -0
- package/dist/likec4diagram/custom/nodes/nodeTypes.d.ts +10 -0
- package/dist/likec4diagram/custom/nodes/nodeTypes.js +94 -0
- package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.d.ts +21 -0
- package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +159 -0
- package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.ts +7 -0
- package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js +128 -0
- package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts +7 -0
- package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js +149 -0
- package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts +8 -0
- package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +66 -0
- package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts +40 -0
- package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +131 -0
- package/dist/likec4diagram/custom/nodes/toolbar/styles.css.d.ts +1 -0
- package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js +5 -0
- package/dist/likec4diagram/state/actorContext.d.ts +50849 -0
- package/dist/likec4diagram/state/actorContext.js +12 -0
- package/dist/{state → likec4diagram/state}/aligners.d.ts +4 -1
- package/dist/{state → likec4diagram/state}/aligners.js +31 -5
- package/dist/likec4diagram/state/assign.d.ts +18 -0
- package/dist/likec4diagram/state/assign.js +343 -0
- package/dist/likec4diagram/state/hotkeyActor.d.ts +5 -0
- package/dist/likec4diagram/state/hotkeyActor.js +18 -0
- package/dist/likec4diagram/state/inspector.d.ts +5 -0
- package/dist/likec4diagram/state/machine.d.ts +10751 -0
- package/dist/likec4diagram/state/machine.js +783 -0
- package/dist/likec4diagram/state/syncManualLayoutActor.d.ts +113 -0
- package/dist/likec4diagram/state/syncManualLayoutActor.js +178 -0
- package/dist/likec4diagram/state/utils.d.ts +8 -0
- package/dist/likec4diagram/state/utils.js +48 -0
- package/dist/likec4diagram/types.d.ts +74 -0
- package/dist/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.js +11 -10
- package/dist/likec4diagram/ui/controls/Controls.d.ts +2 -0
- package/dist/likec4diagram/ui/controls/Controls.js +102 -0
- package/dist/likec4diagram/ui/controls/LayoutDriftNotification.d.ts +2 -0
- package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js +43 -0
- package/dist/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.js +11 -11
- package/dist/likec4diagram/ui/controls/NavigationButtons.d.ts +1 -0
- package/dist/likec4diagram/ui/controls/NavigationButtons.js +92 -0
- package/dist/{ui/top-left → likec4diagram/ui/controls}/_shared.js +2 -1
- package/dist/{ui/top-left → likec4diagram/ui/controls}/styles.css.d.ts +1 -1
- package/dist/likec4diagram/ui/controls/styles.css.js +17 -0
- package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.js +11 -0
- package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.d.ts +1 -0
- package/dist/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.js +3 -3
- package/dist/likec4diagram/ui/diagram-title/Link.d.ts +4 -0
- package/dist/likec4diagram/ui/index.d.ts +2 -0
- package/dist/likec4diagram/ui/notation/NotationPanel.css.js +13 -0
- package/dist/likec4diagram/ui/notation/NotationPanel.d.ts +2 -0
- package/dist/{ui → likec4diagram/ui}/notation/NotationPanel.js +23 -31
- package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.js +4 -4
- package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.js +19 -44
- package/dist/{xyflow → likec4diagram}/useLayoutConstraints.d.ts +11 -6
- package/dist/{xyflow → likec4diagram}/useLayoutConstraints.js +17 -12
- package/dist/likec4diagram/useViewToNodesEdges.d.ts +11 -0
- package/dist/likec4diagram/useViewToNodesEdges.js +245 -0
- package/dist/likec4model/index.d.ts +1 -1
- package/dist/likec4model/useLikeC4Model.d.ts +1 -11
- package/dist/likec4model/useLikeC4Model.js +1 -39
- package/dist/overlays/Overlays.js +61 -105
- package/dist/overlays/element-details/ElementDetailsCard.js +111 -116
- package/dist/overlays/element-details/TabPanelDeployments.js +4 -7
- package/dist/overlays/element-details/TabPanelRelationships.css.js +0 -2
- package/dist/overlays/element-details/TabPanelRelationships.d.ts +1 -1
- package/dist/overlays/element-details/TabPanelRelationships.js +35 -64
- package/dist/overlays/element-details/TabPanelStructure.d.ts +2 -2
- package/dist/overlays/element-details/TabPanelStructure.js +1 -1
- package/dist/overlays/overlay/Overlay.css.d.ts +2 -0
- package/dist/overlays/overlay/Overlay.css.js +93 -0
- package/dist/overlays/overlay/Overlay.d.ts +8 -0
- package/dist/overlays/overlay/Overlay.js +86 -0
- package/dist/overlays/relationship-details/RelationshipDetails.d.ts +5 -0
- package/dist/overlays/relationship-details/RelationshipDetails.js +189 -0
- package/dist/overlays/{edge-details → relationship-details}/SelectEdge.css.d.ts +1 -0
- package/dist/overlays/relationship-details/SelectEdge.css.js +17 -0
- package/dist/overlays/{edge-details → relationship-details}/SelectEdge.d.ts +1 -1
- package/dist/overlays/{edge-details → relationship-details}/SelectEdge.js +8 -8
- package/dist/overlays/relationship-details/_types.d.ts +36 -0
- package/dist/overlays/relationship-details/actor.d.ts +41 -0
- package/dist/overlays/relationship-details/actor.js +113 -0
- package/dist/overlays/relationship-details/custom/ElementActions.d.ts +5 -0
- package/dist/overlays/relationship-details/custom/ElementActions.js +33 -0
- package/dist/overlays/relationship-details/custom/edgeTypes.d.ts +49 -0
- package/dist/overlays/relationship-details/custom/edgeTypes.js +51 -0
- package/dist/overlays/relationship-details/custom/index.d.ts +2 -0
- package/dist/overlays/relationship-details/custom/nodeTypes.d.ts +39 -0
- package/dist/overlays/relationship-details/custom/nodeTypes.js +89 -0
- package/dist/overlays/relationship-details/custom/styles.css.d.ts +1 -0
- package/dist/overlays/relationship-details/hooks.d.ts +59 -0
- package/dist/overlays/relationship-details/hooks.js +46 -0
- package/dist/overlays/{edge-details/use-layouted-edge-details.d.ts → relationship-details/useLayoutedDetails.d.ts} +4 -6
- package/dist/overlays/{edge-details/use-layouted-edge-details.js → relationship-details/useLayoutedDetails.js} +68 -64
- package/dist/overlays/relationships-browser/-useRelationshipsView.d.ts +39 -0
- package/dist/overlays/relationships-browser/-useRelationshipsView.js +488 -0
- package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +5 -0
- package/dist/overlays/relationships-browser/RelationshipsBrowser.js +209 -0
- package/dist/overlays/{relationships-of → relationships-browser}/SelectElement.css.d.ts +1 -0
- package/dist/overlays/relationships-browser/SelectElement.css.js +9 -0
- package/dist/overlays/relationships-browser/SelectElement.d.ts +7 -0
- package/dist/overlays/{relationships-of → relationships-browser}/SelectElement.js +11 -7
- package/dist/overlays/relationships-browser/_types.d.ts +40 -0
- package/dist/overlays/relationships-browser/actor.d.ts +66 -0
- package/dist/overlays/relationships-browser/actor.js +159 -0
- package/dist/overlays/relationships-browser/custom/ElementActions.d.ts +5 -0
- package/dist/overlays/relationships-browser/custom/ElementActions.js +43 -0
- package/dist/overlays/relationships-browser/custom/EmptyNode.d.ts +5 -0
- package/dist/overlays/{relationships-of/xyflow → relationships-browser/custom}/EmptyNode.js +1 -3
- package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts +46 -0
- package/dist/overlays/relationships-browser/custom/edgeTypes.js +51 -0
- package/dist/overlays/relationships-browser/custom/index.d.ts +2 -0
- package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts +45 -0
- package/dist/overlays/relationships-browser/custom/nodeTypes.js +93 -0
- package/dist/overlays/relationships-browser/custom/styles.css.d.ts +1 -0
- package/dist/overlays/relationships-browser/custom/styles.css.js +5 -0
- package/dist/overlays/relationships-browser/hooks.d.ts +62 -0
- package/dist/overlays/relationships-browser/hooks.js +46 -0
- package/dist/overlays/relationships-browser/useViewToNodesEdges.d.ts +10 -0
- package/dist/overlays/relationships-browser/useViewToNodesEdges.js +160 -0
- package/dist/style.css +1 -1
- package/dist/utils/index.d.ts +4 -0
- package/dist/{xyflow/utils.d.ts → utils/xyflow.d.ts} +4 -4
- package/dist/{xyflow/utils.js → utils/xyflow.js} +14 -20
- package/package.json +23 -20
- package/src/LikeC4Diagram.css.ts +21 -15
- package/src/LikeC4Diagram.props.ts +14 -21
- package/src/LikeC4Diagram.tsx +105 -150
- package/src/LikeC4Search.tsx +21 -28
- package/src/StaticLikeC4Diagram.tsx +0 -1
- package/src/{xyflow/XYFlowBackground.tsx → base/Background.tsx} +8 -8
- package/src/base/BaseXYFlow.tsx +200 -0
- package/src/{xyflow → base}/const.ts +1 -1
- package/src/base/example/RelationshipsBrowser.tsx +62 -0
- package/src/base/example/_types.ts +71 -0
- package/src/base/example/custom.tsx +58 -0
- package/src/base/example/useViewToNodesEdges.ts +193 -0
- package/src/base/index.ts +10 -0
- package/src/base/primitives/NodeHandles.tsx +18 -0
- package/src/base/primitives/compound/CompoundActionButton.css.ts +55 -0
- package/src/base/primitives/compound/CompoundActionButton.tsx +52 -0
- package/src/base/primitives/compound/CompoundDetailsButton.css.ts +56 -0
- package/src/base/primitives/compound/CompoundDetailsButton.tsx +54 -0
- package/src/base/primitives/compound/CompoundNodeContainer.css.ts +161 -0
- package/src/base/primitives/compound/CompoundNodeContainer.tsx +95 -0
- package/src/base/primitives/compound/CompoundTitle.css.ts +43 -0
- package/src/base/primitives/compound/CompoundTitle.tsx +29 -0
- package/src/base/primitives/customEdge.ts +32 -0
- package/src/base/primitives/customNode.ts +21 -0
- package/src/base/primitives/edge/EdgeActionButton.tsx +27 -0
- package/src/base/primitives/edge/EdgeContainer.tsx +48 -0
- package/src/base/primitives/edge/EdgeLabel.css.ts +196 -0
- package/src/base/primitives/edge/EdgeLabel.tsx +136 -0
- package/src/{xyflow → base/primitives/edge}/EdgeMarkers.tsx +29 -1
- package/src/base/primitives/edge/EdgePath.tsx +89 -0
- package/src/base/primitives/edge/edge.css.ts +122 -0
- package/src/base/primitives/element/ElementActionButtons.css.ts +48 -0
- package/src/base/primitives/element/ElementActionButtons.tsx +73 -0
- package/src/base/primitives/element/ElementDetailsButton.css.ts +54 -0
- package/src/base/primitives/element/ElementDetailsButton.tsx +59 -0
- package/src/base/primitives/element/ElementNodeContainer.css.ts +47 -0
- package/src/base/primitives/element/ElementNodeContainer.tsx +72 -0
- package/src/base/primitives/element/ElementShape.css.ts +134 -0
- package/src/{xyflow/nodes/element/ElementShapeSvg.tsx → base/primitives/element/ElementShape.tsx} +64 -19
- package/src/base/primitives/element/ElementTitle.css.ts +156 -0
- package/src/base/primitives/element/ElementTitle.tsx +76 -0
- package/src/base/primitives/index.ts +17 -0
- package/src/base/types.ts +169 -0
- package/src/base/updateEdges.ts +40 -0
- package/src/base/updateNodes.ts +46 -0
- package/src/base/xyflowMachine.ts +75 -0
- package/src/context/DiagramEventHandlers.tsx +53 -0
- package/src/context/DiagramFeatures.tsx +162 -0
- package/src/{ui → context}/FramerMotionConfig.tsx +2 -6
- package/src/context/IconRenderer.tsx +45 -0
- package/src/context/RootContainer.tsx +31 -0
- package/src/context/index.ts +14 -0
- package/src/globals.css.ts +32 -32
- package/src/hooks/index.ts +7 -5
- package/src/hooks/useCurrentViewId.ts +8 -0
- package/src/hooks/useDiagram.ts +129 -0
- package/src/hooks/useDiagramActor.ts +25 -0
- package/src/hooks/useDiagramContext.ts +11 -0
- package/src/hooks/useMantinePortalProps.ts +2 -2
- package/src/hooks/useXYFlow.ts +12 -38
- package/src/index.ts +3 -7
- package/src/likec4diagram/DiagramActor.tsx +79 -0
- package/src/likec4diagram/DiagramUI.tsx +28 -0
- package/src/likec4diagram/XYFlow.tsx +137 -0
- package/src/likec4diagram/custom/edges/NotePopover.css.ts +27 -0
- package/src/likec4diagram/custom/edges/NotePopover.tsx +96 -0
- package/src/likec4diagram/custom/edges/RelationshipEdge.tsx +355 -0
- package/src/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.ts +7 -7
- package/src/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.tsx +91 -70
- package/src/likec4diagram/custom/edges/edges.css.ts +39 -0
- package/src/likec4diagram/custom/edges/utils.ts +126 -0
- package/src/likec4diagram/custom/index.tsx +8 -0
- package/src/likec4diagram/custom/nodes/CompoundActions.tsx +27 -0
- package/src/likec4diagram/custom/nodes/ElementActions.tsx +74 -0
- package/src/likec4diagram/custom/nodes/nodeTypes.tsx +107 -0
- package/src/likec4diagram/custom/nodes/toolbar/ColorButton.tsx +175 -0
- package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx +122 -0
- package/src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx +140 -0
- package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx +77 -0
- package/src/likec4diagram/custom/nodes/toolbar/_shared.tsx +143 -0
- package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts +9 -0
- package/src/likec4diagram/state/actorContext.ts +8 -0
- package/src/{state → likec4diagram/state}/aligners.ts +67 -40
- package/src/likec4diagram/state/assign.ts +384 -0
- package/src/likec4diagram/state/hotkeyActor.ts +20 -0
- package/src/likec4diagram/state/inspector.ts +23 -0
- package/src/likec4diagram/state/machine.ts +946 -0
- package/src/likec4diagram/state/syncManualLayoutActor.ts +219 -0
- package/src/likec4diagram/state/utils.ts +52 -0
- package/src/likec4diagram/types.ts +144 -0
- package/src/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.tsx +32 -28
- package/src/likec4diagram/ui/controls/Controls.tsx +107 -0
- package/src/likec4diagram/ui/controls/LayoutDriftNotification.tsx +46 -0
- package/src/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.tsx +16 -16
- package/src/likec4diagram/ui/controls/NavigationButtons.tsx +83 -0
- package/src/{ui/top-left → likec4diagram/ui/controls}/_shared.ts +4 -3
- package/src/{ui/top-left → likec4diagram/ui/controls}/styles.css.ts +17 -17
- package/src/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.css.ts +11 -11
- package/src/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.tsx +6 -5
- package/src/likec4diagram/ui/diagram-title/Link.tsx +40 -0
- package/src/likec4diagram/ui/index.ts +2 -0
- package/src/{ui → likec4diagram/ui}/notation/NotationPanel.css.ts +18 -18
- package/src/{ui → likec4diagram/ui}/notation/NotationPanel.tsx +44 -44
- package/src/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.ts +16 -16
- package/src/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.tsx +29 -49
- package/src/{xyflow → likec4diagram}/useLayoutConstraints.ts +54 -43
- package/src/likec4diagram/useViewToNodesEdges.ts +297 -0
- package/src/likec4model/index.ts +0 -6
- package/src/likec4model/useLikeC4Model.ts +1 -43
- package/src/overlays/Overlays.tsx +201 -147
- package/src/overlays/element-details/ElementDetailsCard.css.ts +58 -58
- package/src/overlays/element-details/ElementDetailsCard.tsx +143 -128
- package/src/overlays/element-details/TabPanelDeployments.css.ts +14 -14
- package/src/overlays/element-details/TabPanelDeployments.tsx +22 -22
- package/src/overlays/element-details/TabPanelRelationships.css.ts +19 -19
- package/src/overlays/element-details/TabPanelRelationships.tsx +45 -28
- package/src/overlays/element-details/TabPanelStructure.css.ts +7 -7
- package/src/overlays/element-details/TabPanelStructure.tsx +11 -11
- package/src/overlays/overlay/Overlay.css.ts +73 -0
- package/src/overlays/overlay/Overlay.tsx +99 -0
- package/src/overlays/relationship-details/RelationshipDetails.tsx +234 -0
- package/src/overlays/{edge-details → relationship-details}/SelectEdge.css.ts +20 -13
- package/src/overlays/{edge-details → relationship-details}/SelectEdge.tsx +14 -14
- package/src/overlays/relationship-details/_types.ts +73 -0
- package/src/overlays/relationship-details/actor.ts +162 -0
- package/src/overlays/relationship-details/custom/ElementActions.tsx +45 -0
- package/src/overlays/relationship-details/custom/edgeTypes.tsx +49 -0
- package/src/overlays/relationship-details/custom/index.tsx +2 -0
- package/src/overlays/relationship-details/custom/nodeTypes.tsx +108 -0
- package/src/overlays/relationship-details/custom/styles.css.ts +13 -0
- package/src/overlays/relationship-details/hooks.ts +48 -0
- package/src/overlays/{edge-details/use-layouted-edge-details.ts → relationship-details/useLayoutedDetails.ts} +128 -114
- package/src/overlays/relationships-browser/-useRelationshipsView.ts +642 -0
- package/src/overlays/relationships-browser/RelationshipsBrowser.tsx +247 -0
- package/src/overlays/{relationships-of → relationships-browser}/SelectElement.css.ts +12 -5
- package/src/overlays/{relationships-of → relationships-browser}/SelectElement.tsx +19 -17
- package/src/overlays/relationships-browser/_types.ts +89 -0
- package/src/overlays/relationships-browser/actor.ts +224 -0
- package/src/overlays/relationships-browser/custom/ElementActions.tsx +44 -0
- package/src/overlays/relationships-browser/custom/EmptyNode.tsx +18 -0
- package/src/overlays/relationships-browser/custom/edgeTypes.tsx +49 -0
- package/src/overlays/relationships-browser/custom/index.tsx +2 -0
- package/src/overlays/relationships-browser/custom/nodeTypes.tsx +109 -0
- package/src/overlays/relationships-browser/custom/styles.css.ts +13 -0
- package/src/overlays/relationships-browser/hooks.ts +48 -0
- package/src/overlays/relationships-browser/useViewToNodesEdges.ts +209 -0
- package/src/utils/index.ts +15 -0
- package/src/{xyflow/utils.ts → utils/xyflow.ts} +22 -8
- package/dist/_virtual/_commonjsHelpers.js +0 -6
- package/dist/controls/Text.d.ts +0 -2
- package/dist/controls/Text.js +0 -7
- package/dist/controls/action-button-bar/ActionButtonBar.css.d.ts +0 -1
- package/dist/controls/action-button-bar/ActionButtonBar.css.js +0 -5
- package/dist/controls/action-button-bar/ActionButtonBar.d.ts +0 -9
- package/dist/controls/action-button-bar/ActionButtonBar.js +0 -100
- package/dist/controls/action-button-bar/useActionButtonBarCtx.d.ts +0 -10
- package/dist/controls/action-button-bar/useActionButtonBarCtx.js +0 -9
- package/dist/controls/action-buttons/ActionButton.css.d.ts +0 -1
- package/dist/controls/action-buttons/ActionButton.css.js +0 -5
- package/dist/controls/action-buttons/ActionButton.d.ts +0 -9
- package/dist/controls/action-buttons/ActionButton.js +0 -66
- package/dist/controls/action-buttons/ActionButtons.d.ts +0 -12
- package/dist/controls/action-buttons/ActionButtons.js +0 -99
- package/dist/hooks/useDiagramState.d.ts +0 -6
- package/dist/hooks/useDiagramState.js +0 -27
- package/dist/overlays/OverlayContext.d.ts +0 -10
- package/dist/overlays/OverlayContext.js +0 -9
- package/dist/overlays/Overlays.css.d.ts +0 -3
- package/dist/overlays/Overlays.css.js +0 -7
- package/dist/overlays/edge-details/EdgeDetailsXYFlow.d.ts +0 -5
- package/dist/overlays/edge-details/EdgeDetailsXYFlow.js +0 -185
- package/dist/overlays/edge-details/SelectEdge.css.js +0 -17
- package/dist/overlays/edge-details/_types.d.ts +0 -14
- package/dist/overlays/edge-details/xyflow/CompoundNode.d.ts +0 -5
- package/dist/overlays/edge-details/xyflow/CompoundNode.js +0 -76
- package/dist/overlays/edge-details/xyflow/ElementNode.d.ts +0 -5
- package/dist/overlays/edge-details/xyflow/ElementNode.js +0 -159
- package/dist/overlays/edge-details/xyflow/RelationshipEdge.d.ts +0 -3
- package/dist/overlays/edge-details/xyflow/RelationshipEdge.js +0 -84
- package/dist/overlays/edge-details/xyflow/styles.css.d.ts +0 -9
- package/dist/overlays/edge-details/xyflow/styles.css.js +0 -21
- package/dist/overlays/index.d.ts +0 -1
- package/dist/overlays/relationships-of/RelationshipsOverlay.d.ts +0 -5
- package/dist/overlays/relationships-of/RelationshipsOverlay.js +0 -193
- package/dist/overlays/relationships-of/RelationshipsXYFlow.d.ts +0 -19
- package/dist/overlays/relationships-of/RelationshipsXYFlow.js +0 -290
- package/dist/overlays/relationships-of/SelectElement.css.js +0 -7
- package/dist/overlays/relationships-of/SelectElement.d.ts +0 -7
- package/dist/overlays/relationships-of/_types.d.ts +0 -28
- package/dist/overlays/relationships-of/use-layouted-relationships.d.ts +0 -22
- package/dist/overlays/relationships-of/use-layouted-relationships.js +0 -496
- package/dist/overlays/relationships-of/xyflow/CompoundNode.d.ts +0 -6
- package/dist/overlays/relationships-of/xyflow/CompoundNode.js +0 -120
- package/dist/overlays/relationships-of/xyflow/ElementNode.d.ts +0 -6
- package/dist/overlays/relationships-of/xyflow/ElementNode.js +0 -194
- package/dist/overlays/relationships-of/xyflow/EmptyNode.d.ts +0 -5
- package/dist/overlays/relationships-of/xyflow/RelationshipEdge.d.ts +0 -3
- package/dist/overlays/relationships-of/xyflow/RelationshipEdge.js +0 -123
- package/dist/overlays/relationships-of/xyflow/styles.css.d.ts +0 -14
- package/dist/overlays/relationships-of/xyflow/styles.css.js +0 -24
- package/dist/overlays/shared/xyflow/RelationshipEdge.css.d.ts +0 -4
- package/dist/overlays/shared/xyflow/RelationshipEdge.css.js +0 -12
- package/dist/overlays/shared/xyflow/_types.d.ts +0 -77
- package/dist/state/DiagramContext.d.ts +0 -1609
- package/dist/state/DiagramContext.js +0 -101
- package/dist/state/diagram-to-xyflow.d.ts +0 -11
- package/dist/state/diagram-to-xyflow.js +0 -113
- package/dist/state/diagramStore.d.ts +0 -1705
- package/dist/state/diagramStore.js +0 -808
- package/dist/state/diagramStore.layout.d.ts +0 -4
- package/dist/state/diagramStore.layout.js +0 -56
- package/dist/ui/DiagramTitlePanel.css.js +0 -11
- package/dist/ui/DiagramTitlePanel.d.ts +0 -1
- package/dist/ui/notation/NotationPanel.css.js +0 -16
- package/dist/ui/notation/NotationPanel.d.ts +0 -1
- package/dist/ui/top-left/TopLeftPanel.d.ts +0 -4
- package/dist/ui/top-left/TopLeftPanel.js +0 -211
- package/dist/ui/top-left/styles.css.js +0 -17
- package/dist/xyflow/FitviewOnDiagramChange.d.ts +0 -4
- package/dist/xyflow/FitviewOnDiagramChange.js +0 -72
- package/dist/xyflow/SelectEdgesOnNodeFocus.d.ts +0 -1
- package/dist/xyflow/SelectEdgesOnNodeFocus.js +0 -96
- package/dist/xyflow/XYFlow.d.ts +0 -8
- package/dist/xyflow/XYFlow.js +0 -145
- package/dist/xyflow/XYFlowBackground.d.ts +0 -10
- package/dist/xyflow/XYFlowInner.d.ts +0 -8
- package/dist/xyflow/XYFlowInner.js +0 -41
- package/dist/xyflow/edges/EdgeLabel.d.ts +0 -7
- package/dist/xyflow/edges/EdgeLabel.js +0 -160
- package/dist/xyflow/edges/RelationshipEdge.d.ts +0 -6
- package/dist/xyflow/edges/RelationshipEdge.js +0 -443
- package/dist/xyflow/edges/edges.css.js +0 -37
- package/dist/xyflow/edges/utils.d.ts +0 -16
- package/dist/xyflow/edges/utils.js +0 -24
- package/dist/xyflow/nodes/AnimateVariants.d.ts +0 -1313
- package/dist/xyflow/nodes/AnimateVariants.js +0 -123
- package/dist/xyflow/nodes/Node.css.d.ts +0 -3
- package/dist/xyflow/nodes/Node.css.js +0 -9
- package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +0 -14
- package/dist/xyflow/nodes/compound/CompoundNode.css.js +0 -27
- package/dist/xyflow/nodes/compound/CompoundNode.d.ts +0 -6
- package/dist/xyflow/nodes/compound/CompoundNode.js +0 -216
- package/dist/xyflow/nodes/compound/index.d.ts +0 -1
- package/dist/xyflow/nodes/element/ElementLink.css.d.ts +0 -3
- package/dist/xyflow/nodes/element/ElementLink.d.ts +0 -6
- package/dist/xyflow/nodes/element/ElementNode.d.ts +0 -6
- package/dist/xyflow/nodes/element/ElementNode.js +0 -190
- package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts +0 -17
- package/dist/xyflow/nodes/element/element.css.d.ts +0 -18
- package/dist/xyflow/nodes/element/element.css.js +0 -31
- package/dist/xyflow/nodes/element/index.d.ts +0 -1
- package/dist/xyflow/nodes/shared/ElementIcon.d.ts +0 -8
- package/dist/xyflow/nodes/shared/Toolbar.d.ts +0 -9
- package/dist/xyflow/nodes/shared/Toolbar.js +0 -436
- package/dist/xyflow/types.d.ts +0 -36
- package/dist/xyflow/useXYFlowEvents.d.ts +0 -160
- package/dist/xyflow/useXYFlowEvents.js +0 -275
- package/src/controls/Text.ts +0 -5
- package/src/controls/action-button-bar/ActionButtonBar.css.ts +0 -13
- package/src/controls/action-button-bar/ActionButtonBar.tsx +0 -138
- package/src/controls/action-button-bar/useActionButtonBarCtx.ts +0 -13
- package/src/controls/action-buttons/ActionButton.css.ts +0 -29
- package/src/controls/action-buttons/ActionButton.tsx +0 -66
- package/src/controls/action-buttons/ActionButtons.tsx +0 -138
- package/src/hooks/useDiagramState.ts +0 -36
- package/src/overlays/OverlayContext.tsx +0 -11
- package/src/overlays/Overlays.css.ts +0 -136
- package/src/overlays/edge-details/EdgeDetailsXYFlow.tsx +0 -255
- package/src/overlays/edge-details/_types.ts +0 -18
- package/src/overlays/edge-details/xyflow/CompoundNode.tsx +0 -72
- package/src/overlays/edge-details/xyflow/ElementNode.tsx +0 -152
- package/src/overlays/edge-details/xyflow/RelationshipEdge.tsx +0 -85
- package/src/overlays/edge-details/xyflow/styles.css.ts +0 -144
- package/src/overlays/index.tsx +0 -1
- package/src/overlays/relationships-of/RelationshipsOverlay.tsx +0 -185
- package/src/overlays/relationships-of/RelationshipsXYFlow.tsx +0 -378
- package/src/overlays/relationships-of/_types.ts +0 -40
- package/src/overlays/relationships-of/use-layouted-relationships.ts +0 -699
- package/src/overlays/relationships-of/xyflow/CompoundNode.tsx +0 -124
- package/src/overlays/relationships-of/xyflow/ElementNode.tsx +0 -194
- package/src/overlays/relationships-of/xyflow/EmptyNode.tsx +0 -19
- package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx +0 -127
- package/src/overlays/relationships-of/xyflow/styles.css.ts +0 -214
- package/src/overlays/shared/xyflow/RelationshipEdge.css.ts +0 -60
- package/src/overlays/shared/xyflow/_types.ts +0 -87
- package/src/state/DiagramContext.tsx +0 -107
- package/src/state/diagram-to-xyflow.ts +0 -150
- package/src/state/diagramStore.layout.ts +0 -66
- package/src/state/diagramStore.ts +0 -1099
- package/src/ui/top-left/TopLeftPanel.tsx +0 -220
- package/src/xyflow/FitviewOnDiagramChange.tsx +0 -83
- package/src/xyflow/SelectEdgesOnNodeFocus.tsx +0 -106
- package/src/xyflow/XYFlow.tsx +0 -179
- package/src/xyflow/XYFlowInner.tsx +0 -48
- package/src/xyflow/edges/EdgeLabel.tsx +0 -193
- package/src/xyflow/edges/RelationshipEdge.tsx +0 -547
- package/src/xyflow/edges/edges.css.ts +0 -288
- package/src/xyflow/edges/utils.ts +0 -153
- package/src/xyflow/nodes/AnimateVariants.ts +0 -143
- package/src/xyflow/nodes/Node.css.ts +0 -44
- package/src/xyflow/nodes/compound/CompoundNode.css.ts +0 -258
- package/src/xyflow/nodes/compound/CompoundNode.tsx +0 -227
- package/src/xyflow/nodes/compound/index.ts +0 -1
- package/src/xyflow/nodes/element/ElementLink.css.ts +0 -67
- package/src/xyflow/nodes/element/ElementLink.tsx +0 -97
- package/src/xyflow/nodes/element/ElementNode.tsx +0 -209
- package/src/xyflow/nodes/element/element.css.ts +0 -369
- package/src/xyflow/nodes/element/index.ts +0 -1
- package/src/xyflow/nodes/shared/ElementIcon.tsx +0 -43
- package/src/xyflow/nodes/shared/Toolbar.tsx +0 -496
- package/src/xyflow/types.ts +0 -57
- package/src/xyflow/useXYFlowEvents.ts +0 -315
- /package/dist/{xyflow → base}/const.d.ts +0 -0
- /package/dist/{xyflow → base}/const.js +0 -0
- /package/dist/{ui → context}/EnsureMantine.d.ts +0 -0
- /package/dist/{ui → context}/EnsureMantine.js +0 -0
- /package/dist/{ui → context}/FramerMotionConfig.d.ts +0 -0
- /package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.d.ts +0 -0
- /package/dist/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.d.ts +0 -0
- /package/dist/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.d.ts +0 -0
- /package/dist/{ui/top-left → likec4diagram/ui/controls}/_shared.d.ts +0 -0
- /package/dist/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.css.d.ts +0 -0
- /package/dist/{ui → likec4diagram/ui/diagram-title}/Link.js +0 -0
- /package/dist/{ui → likec4diagram/ui}/notation/NotationPanel.css.d.ts +0 -0
- /package/dist/{ui → likec4diagram/ui}/notation/index.d.ts +0 -0
- /package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.d.ts +0 -0
- /package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.d.ts +0 -0
- /package/src/{ui → context}/EnsureMantine.tsx +0 -0
- /package/src/{ui → likec4diagram/ui}/notation/index.ts +0 -0
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgb(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgb(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}.likec4-diagram-root{overflow:hidden;position:relative;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box;-webkit-font-smoothing:var(--mantine-webkit-font-smoothing);-moz-osx-font-smoothing:var(--mantine-moz-font-smoothing)}:where(.likec4-diagram-root) .mantine-ActionIcon-icon .tabler-icon{width:75%;height:75%}.likec4-diagram-root{--likec4-font-family: var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"');--likec4-background-color: var(--mantine-color-body);--likec4-background-pattern-color: var(--mantine-color-gray-4);--likec4-compound-font-family: var(--likec4-font-family);--likec4-compound-title-color: var(--likec4-element-loContrast);--likec4-element-font-family: var(--likec4-font-family);--likec4-element-fill: #3b82f6;--likec4-element-stroke: #2563eb;--likec4-element-hiContrast: #eff6ff;--likec4-element-loContrast: #bfdbfe;--likec4-relation-lineColor: #64748b;--likec4-relation-labelBg: #0f172a;--likec4-relation-labelColor: #cbd5e1}:where([data-mantine-color-scheme=dark]) .likec4-diagram-root{--likec4-background-pattern-color: var(--mantine-color-dark-5)}:where([data-likec4-color=primary]){--likec4-element-fill: #3b82f6;--likec4-element-stroke: #2563eb;--likec4-element-hiContrast: #eff6ff;--likec4-element-loContrast: #bfdbfe;--likec4-compound-title-color: #bfdbfe;--likec4-relation-lineColor: #3b82f6;--likec4-relation-labelBg: #172554;--likec4-relation-labelColor: #60a5fa}:where([data-likec4-color=primary][data-compound-depth="1"]){--likec4-element-fill: #145ed7;--likec4-element-stroke: #194bb8}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="1"]){--likec4-element-fill: #1a5bc5;--likec4-element-stroke: #1e49a9}:where([data-likec4-color=primary][data-compound-depth="2"]){--likec4-element-fill: #195cc8;--likec4-element-stroke: #1d4aac}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="2"]){--likec4-element-fill: #1e56b1;--likec4-element-stroke: #204698}:where([data-likec4-color=primary][data-compound-depth="3"]){--likec4-element-fill: #1e59ba;--likec4-element-stroke: #2149a0}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="3"]){--likec4-element-fill: #21519f;--likec4-element-stroke: #224289}:where([data-likec4-color=primary][data-compound-depth="4"]){--likec4-element-fill: #2357ad;--likec4-element-stroke: #244795}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="4"]){--likec4-element-fill: #234c8e;--likec4-element-stroke: #243f7a}:where([data-likec4-color=primary][data-compound-depth="5"]){--likec4-element-fill: #2755a0;--likec4-element-stroke: #27468a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="5"]){--likec4-element-fill: #25467d;--likec4-element-stroke: #243b6c}:where([data-likec4-color=primary][data-compound-depth="6"]){--likec4-element-fill: #2a5293;--likec4-element-stroke: #2a447f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="6"]){--likec4-element-fill: #25416d;--likec4-element-stroke: #24365f}:where([data-likec4-color=blue]){--likec4-element-fill: #3b82f6;--likec4-element-stroke: #2563eb;--likec4-element-hiContrast: #eff6ff;--likec4-element-loContrast: #bfdbfe;--likec4-compound-title-color: #bfdbfe;--likec4-relation-lineColor: #3b82f6;--likec4-relation-labelBg: #172554;--likec4-relation-labelColor: #60a5fa}:where([data-likec4-color=blue][data-compound-depth="1"]){--likec4-element-fill: #145ed7;--likec4-element-stroke: #194bb8}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="1"]){--likec4-element-fill: #1a5bc5;--likec4-element-stroke: #1e49a9}:where([data-likec4-color=blue][data-compound-depth="2"]){--likec4-element-fill: #195cc8;--likec4-element-stroke: #1d4aac}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="2"]){--likec4-element-fill: #1e56b1;--likec4-element-stroke: #204698}:where([data-likec4-color=blue][data-compound-depth="3"]){--likec4-element-fill: #1e59ba;--likec4-element-stroke: #2149a0}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="3"]){--likec4-element-fill: #21519f;--likec4-element-stroke: #224289}:where([data-likec4-color=blue][data-compound-depth="4"]){--likec4-element-fill: #2357ad;--likec4-element-stroke: #244795}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="4"]){--likec4-element-fill: #234c8e;--likec4-element-stroke: #243f7a}:where([data-likec4-color=blue][data-compound-depth="5"]){--likec4-element-fill: #2755a0;--likec4-element-stroke: #27468a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="5"]){--likec4-element-fill: #25467d;--likec4-element-stroke: #243b6c}:where([data-likec4-color=blue][data-compound-depth="6"]){--likec4-element-fill: #2a5293;--likec4-element-stroke: #2a447f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="6"]){--likec4-element-fill: #25416d;--likec4-element-stroke: #24365f}:where([data-likec4-color=secondary]){--likec4-element-fill: #0284c7;--likec4-element-stroke: #0369a1;--likec4-element-hiContrast: #f0f9ff;--likec4-element-loContrast: #B6ECF7;--likec4-compound-title-color: #B6ECF7;--likec4-relation-lineColor: #0ea5e9;--likec4-relation-labelBg: #082f49;--likec4-relation-labelColor: #38bdf8}:where([data-likec4-color=secondary][data-compound-depth="1"]){--likec4-element-fill: #086392;--likec4-element-stroke: #084f76}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="1"]){--likec4-element-fill: #0d5d86;--likec4-element-stroke: #0b4a6c}:where([data-likec4-color=secondary][data-compound-depth="2"]){--likec4-element-fill: #0c5e88;--likec4-element-stroke: #0b4b6e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="2"]){--likec4-element-fill: #105579;--likec4-element-stroke: #0e4462}:where([data-likec4-color=secondary][data-compound-depth="3"]){--likec4-element-fill: #10597f;--likec4-element-stroke: #0e4767}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="3"]){--likec4-element-fill: #134e6c;--likec4-element-stroke: #103e57}:where([data-likec4-color=secondary][data-compound-depth="4"]){--likec4-element-fill: #135475;--likec4-element-stroke: #11435f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="4"]){--likec4-element-fill: #154660;--likec4-element-stroke: #11384e}:where([data-likec4-color=secondary][data-compound-depth="5"]){--likec4-element-fill: #164f6c;--likec4-element-stroke: #133f58}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="5"]){--likec4-element-fill: #163f55;--likec4-element-stroke: #123345}:where([data-likec4-color=secondary][data-compound-depth="6"]){--likec4-element-fill: #194a64;--likec4-element-stroke: #153c51}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="6"]){--likec4-element-fill: #17384a;--likec4-element-stroke: #132d3c}:where([data-likec4-color=sky]){--likec4-element-fill: #0284c7;--likec4-element-stroke: #0369a1;--likec4-element-hiContrast: #f0f9ff;--likec4-element-loContrast: #B6ECF7;--likec4-compound-title-color: #B6ECF7;--likec4-relation-lineColor: #0ea5e9;--likec4-relation-labelBg: #082f49;--likec4-relation-labelColor: #38bdf8}:where([data-likec4-color=sky][data-compound-depth="1"]){--likec4-element-fill: #086392;--likec4-element-stroke: #084f76}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="1"]){--likec4-element-fill: #0d5d86;--likec4-element-stroke: #0b4a6c}:where([data-likec4-color=sky][data-compound-depth="2"]){--likec4-element-fill: #0c5e88;--likec4-element-stroke: #0b4b6e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="2"]){--likec4-element-fill: #105579;--likec4-element-stroke: #0e4462}:where([data-likec4-color=sky][data-compound-depth="3"]){--likec4-element-fill: #10597f;--likec4-element-stroke: #0e4767}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="3"]){--likec4-element-fill: #134e6c;--likec4-element-stroke: #103e57}:where([data-likec4-color=sky][data-compound-depth="4"]){--likec4-element-fill: #135475;--likec4-element-stroke: #11435f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="4"]){--likec4-element-fill: #154660;--likec4-element-stroke: #11384e}:where([data-likec4-color=sky][data-compound-depth="5"]){--likec4-element-fill: #164f6c;--likec4-element-stroke: #133f58}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="5"]){--likec4-element-fill: #163f55;--likec4-element-stroke: #123345}:where([data-likec4-color=sky][data-compound-depth="6"]){--likec4-element-fill: #194a64;--likec4-element-stroke: #153c51}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="6"]){--likec4-element-fill: #17384a;--likec4-element-stroke: #132d3c}:where([data-likec4-color=muted]){--likec4-element-fill: #64748b;--likec4-element-stroke: #475569;--likec4-element-hiContrast: #f8fafc;--likec4-element-loContrast: #cbd5e1;--likec4-compound-title-color: #cbd5e1;--likec4-relation-lineColor: #64748b;--likec4-relation-labelBg: #0f172a;--likec4-relation-labelColor: #cbd5e1}:where([data-likec4-color=muted][data-compound-depth="1"]){--likec4-element-fill: #4e5a6a;--likec4-element-stroke: #384250}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="1"]){--likec4-element-fill: #4b5563;--likec4-element-stroke: #363e4b}:where([data-likec4-color=muted][data-compound-depth="2"]){--likec4-element-fill: #4c5665;--likec4-element-stroke: #363f4c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="2"]){--likec4-element-fill: #474f5c;--likec4-element-stroke: #333a45}:where([data-likec4-color=muted][data-compound-depth="3"]){--likec4-element-fill: #4a5360;--likec4-element-stroke: #353d48}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="3"]){--likec4-element-fill: #424a54;--likec4-element-stroke: #30363f}:where([data-likec4-color=muted][data-compound-depth="4"]){--likec4-element-fill: #48505b;--likec4-element-stroke: #333a44}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="4"]){--likec4-element-fill: #3e444d;--likec4-element-stroke: #2d323a}:where([data-likec4-color=muted][data-compound-depth="5"]){--likec4-element-fill: #454c56;--likec4-element-stroke: #323841}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="5"]){--likec4-element-fill: #393e46;--likec4-element-stroke: #292e34}:where([data-likec4-color=muted][data-compound-depth="6"]){--likec4-element-fill: #434951;--likec4-element-stroke: #30353d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="6"]){--likec4-element-fill: #34383e;--likec4-element-stroke: #26292f}:where([data-likec4-color=slate]){--likec4-element-fill: #64748b;--likec4-element-stroke: #475569;--likec4-element-hiContrast: #f8fafc;--likec4-element-loContrast: #cbd5e1;--likec4-compound-title-color: #cbd5e1;--likec4-relation-lineColor: #64748b;--likec4-relation-labelBg: #0f172a;--likec4-relation-labelColor: #cbd5e1}:where([data-likec4-color=slate][data-compound-depth="1"]){--likec4-element-fill: #4e5a6a;--likec4-element-stroke: #384250}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="1"]){--likec4-element-fill: #4b5563;--likec4-element-stroke: #363e4b}:where([data-likec4-color=slate][data-compound-depth="2"]){--likec4-element-fill: #4c5665;--likec4-element-stroke: #363f4c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="2"]){--likec4-element-fill: #474f5c;--likec4-element-stroke: #333a45}:where([data-likec4-color=slate][data-compound-depth="3"]){--likec4-element-fill: #4a5360;--likec4-element-stroke: #353d48}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="3"]){--likec4-element-fill: #424a54;--likec4-element-stroke: #30363f}:where([data-likec4-color=slate][data-compound-depth="4"]){--likec4-element-fill: #48505b;--likec4-element-stroke: #333a44}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="4"]){--likec4-element-fill: #3e444d;--likec4-element-stroke: #2d323a}:where([data-likec4-color=slate][data-compound-depth="5"]){--likec4-element-fill: #454c56;--likec4-element-stroke: #323841}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="5"]){--likec4-element-fill: #393e46;--likec4-element-stroke: #292e34}:where([data-likec4-color=slate][data-compound-depth="6"]){--likec4-element-fill: #434951;--likec4-element-stroke: #30353d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="6"]){--likec4-element-fill: #34383e;--likec4-element-stroke: #26292f}:where([data-likec4-color=gray]){--likec4-element-fill: #737373;--likec4-element-stroke: #525252;--likec4-element-hiContrast: #fafafa;--likec4-element-loContrast: #d4d4d4;--likec4-compound-title-color: #d4d4d4;--likec4-relation-lineColor: #6E6E6E;--likec4-relation-labelBg: #18191b;--likec4-relation-labelColor: #C6C6C6}:where([data-likec4-color=gray][data-compound-depth="1"]){--likec4-element-fill: #595959;--likec4-element-stroke: #3f3f3f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="1"]){--likec4-element-fill: #545454;--likec4-element-stroke: #3c3c3c}:where([data-likec4-color=gray][data-compound-depth="2"]){--likec4-element-fill: #555555;--likec4-element-stroke: #3d3d3d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="2"]){--likec4-element-fill: #4e4e4e;--likec4-element-stroke: #383838}:where([data-likec4-color=gray][data-compound-depth="3"]){--likec4-element-fill: #525252;--likec4-element-stroke: #3a3a3a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="3"]){--likec4-element-fill: #484848;--likec4-element-stroke: #343434}:where([data-likec4-color=gray][data-compound-depth="4"]){--likec4-element-fill: #4e4e4e;--likec4-element-stroke: #383838}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="4"]){--likec4-element-fill: #434343;--likec4-element-stroke: #303030}:where([data-likec4-color=gray][data-compound-depth="5"]){--likec4-element-fill: #4b4b4b;--likec4-element-stroke: #353535}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="5"]){--likec4-element-fill: #3d3d3d;--likec4-element-stroke: #2b2b2b}:where([data-likec4-color=gray][data-compound-depth="6"]){--likec4-element-fill: #474747;--likec4-element-stroke: #333333}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="6"]){--likec4-element-fill: #373737;--likec4-element-stroke: #272727}:where([data-likec4-color=red]){--likec4-element-fill: #AC4D39;--likec4-element-stroke: #853A2D;--likec4-element-hiContrast: #FBD3CB;--likec4-element-loContrast: #f5b2a3;--likec4-compound-title-color: #f5b2a3;--likec4-relation-lineColor: #AC4D39;--likec4-relation-labelBg: #b91c1c;--likec4-relation-labelColor: #f5b2a3}:where([data-likec4-color=red][data-compound-depth="1"]){--likec4-element-fill: #803e30;--likec4-element-stroke: #632f26}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="1"]){--likec4-element-fill: #773d30;--likec4-element-stroke: #5c2e26}:where([data-likec4-color=red][data-compound-depth="2"]){--likec4-element-fill: #793d31;--likec4-element-stroke: #5e2e26}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="2"]){--likec4-element-fill: #6c3a2f;--likec4-element-stroke: #542c25}:where([data-likec4-color=red][data-compound-depth="3"]){--likec4-element-fill: #723c31;--likec4-element-stroke: #582e27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="3"]){--likec4-element-fill: #62372e;--likec4-element-stroke: #4c2a24}:where([data-likec4-color=red][data-compound-depth="4"]){--likec4-element-fill: #6a3b31;--likec4-element-stroke: #522d27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="4"]){--likec4-element-fill: #58342c;--likec4-element-stroke: #442823}:where([data-likec4-color=red][data-compound-depth="5"]){--likec4-element-fill: #633a31;--likec4-element-stroke: #4d2c27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="5"]){--likec4-element-fill: #4f312a;--likec4-element-stroke: #3d2521}:where([data-likec4-color=red][data-compound-depth="6"]){--likec4-element-fill: #5d3931;--likec4-element-stroke: #482b27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="6"]){--likec4-element-fill: #462d28;--likec4-element-stroke: #36231f}:where([data-likec4-color=green]){--likec4-element-fill: #428a4f;--likec4-element-stroke: #2d5d39;--likec4-element-hiContrast: #f8fafc;--likec4-element-loContrast: #c2f0c2;--likec4-compound-title-color: #c2f0c2;--likec4-relation-lineColor: #15803d;--likec4-relation-labelBg: #052e16;--likec4-relation-labelColor: #22c55e}:where([data-likec4-color=green][data-compound-depth="1"]){--likec4-element-fill: #35683e;--likec4-element-stroke: #24462d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="1"]){--likec4-element-fill: #34613c;--likec4-element-stroke: #24412b}:where([data-likec4-color=green][data-compound-depth="2"]){--likec4-element-fill: #35623d;--likec4-element-stroke: #24422c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="2"]){--likec4-element-fill: #325839;--likec4-element-stroke: #223c29}:where([data-likec4-color=green][data-compound-depth="3"]){--likec4-element-fill: #345d3c;--likec4-element-stroke: #243e2a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="3"]){--likec4-element-fill: #305136;--likec4-element-stroke: #213626}:where([data-likec4-color=green][data-compound-depth="4"]){--likec4-element-fill: #33573a;--likec4-element-stroke: #233b29}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="4"]){--likec4-element-fill: #2d4932;--likec4-element-stroke: #1f3123}:where([data-likec4-color=green][data-compound-depth="5"]){--likec4-element-fill: #335238;--likec4-element-stroke: #223728}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="5"]){--likec4-element-fill: #2b422f;--likec4-element-stroke: #1d2c21}:where([data-likec4-color=green][data-compound-depth="6"]){--likec4-element-fill: #324d37;--likec4-element-stroke: #223426}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="6"]){--likec4-element-fill: #283a2b;--likec4-element-stroke: #1b271e}:where([data-likec4-color=amber]){--likec4-element-fill: #A35829;--likec4-element-stroke: #7E451D;--likec4-element-hiContrast: #FFE0C2;--likec4-element-loContrast: #f9b27c;--likec4-compound-title-color: #f9b27c;--likec4-relation-lineColor: #b45309;--likec4-relation-labelBg: #78350f;--likec4-relation-labelColor: #FFE0C2}:where([data-likec4-color=amber][data-compound-depth="1"]){--likec4-element-fill: #794524;--likec4-element-stroke: #5e361a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="1"]){--likec4-element-fill: #704225;--likec4-element-stroke: #56331b}:where([data-likec4-color=amber][data-compound-depth="2"]){--likec4-element-fill: #724325;--likec4-element-stroke: #58341b}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="2"]){--likec4-element-fill: #663e25;--likec4-element-stroke: #4e301b}:where([data-likec4-color=amber][data-compound-depth="3"]){--likec4-element-fill: #6b4126;--likec4-element-stroke: #52321c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="3"]){--likec4-element-fill: #5c3a25;--likec4-element-stroke: #472d1b}:where([data-likec4-color=amber][data-compound-depth="4"]){--likec4-element-fill: #643e27;--likec4-element-stroke: #4d301d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="4"]){--likec4-element-fill: #533624;--likec4-element-stroke: #402a1a}:where([data-likec4-color=amber][data-compound-depth="5"]){--likec4-element-fill: #5d3c28;--likec4-element-stroke: #472f1d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="5"]){--likec4-element-fill: #493223;--likec4-element-stroke: #38261a}:where([data-likec4-color=amber][data-compound-depth="6"]){--likec4-element-fill: #563a28;--likec4-element-stroke: #422d1e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="6"]){--likec4-element-fill: #412d21;--likec4-element-stroke: #322319}:where([data-likec4-color=indigo]){--likec4-element-fill: #6366f1;--likec4-element-stroke: #4f46e5;--likec4-element-hiContrast: #eef2ff;--likec4-element-loContrast: #c7d2fe;--likec4-compound-title-color: #c7d2fe;--likec4-relation-lineColor: #6366f1;--likec4-relation-labelBg: #1e1b4b;--likec4-relation-labelColor: #818cf8}:where([data-likec4-color=indigo][data-compound-depth="1"]){--likec4-element-fill: #2529e1;--likec4-element-stroke: #2d24c2}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="1"]){--likec4-element-fill: #2529d3;--likec4-element-stroke: #3028b2}:where([data-likec4-color=indigo][data-compound-depth="2"]){--likec4-element-fill: #2428d7;--likec4-element-stroke: #3028b5}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="2"]){--likec4-element-fill: #282bbf;--likec4-element-stroke: #312aa1}:where([data-likec4-color=indigo][data-compound-depth="3"]){--likec4-element-fill: #292cc8;--likec4-element-stroke: #322ba9}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="3"]){--likec4-element-fill: #2b2dac;--likec4-element-stroke: #312b91}:where([data-likec4-color=indigo][data-compound-depth="4"]){--likec4-element-fill: #2d30ba;--likec4-element-stroke: #342e9e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="4"]){--likec4-element-fill: #2c2f99;--likec4-element-stroke: #302c82}:where([data-likec4-color=indigo][data-compound-depth="5"]){--likec4-element-fill: #3133ac;--likec4-element-stroke: #363092}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="5"]){--likec4-element-fill: #2d2f87;--likec4-element-stroke: #2f2b73}:where([data-likec4-color=indigo][data-compound-depth="6"]){--likec4-element-fill: #34369f;--likec4-element-stroke: #373287}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="6"]){--likec4-element-fill: #2d2e76;--likec4-element-stroke: #2e2b65}._2h8g8h1{opacity:0}.react-flow._2h8g8h0{--xy-background-color: var(--likec4-background-color);--xy-background-pattern-color: var(--likec4-background-pattern-color)}.react-flow._2h8g8h0._2h8g8h3{--likec4-background-color: transparent !important;--xy-background-color: transparent !important;background-color:transparent!important}:where(._2h8g8h4,._2h8g8h3) .react-flow__attribution{display:none}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){._2h8g8h0{--likec4-safari-animation-hook: }}._16mg60z0{margin-inline-end:4px}:where(._16mg60z0) .tabler-icon{opacity:.8;width:70%;height:70%}@keyframes bexn7q7{0%{stroke-dashoffset:46}to{stroke-dashoffset:10}}.bexn7q1{--bexn7q0: black;--xy-edge-stroke: var(--likec4-relation-lineColor);--xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), var(--bexn7q0) 35%);--xy-edge-label-color: color-mix(in srgb, var(--likec4-relation-labelColor), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 40%);--xy-edge-stroke-width: 3}:where([data-mantine-color-scheme=dark]) .bexn7q1{--bexn7q0: white;--xy-edge-label-color: var(--likec4-relation-labelColor);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 50%)}:where(.react-flow__edge.selected) .bexn7q1{--xy-edge-stroke: var(--xy-edge-stroke-selected);--xy-edge-stroke-width: 3}.bexn7q1:is([data-edge-hovered=true],[data-edge-active=true]){--xy-edge-stroke: var(--xy-edge-stroke-selected);--xy-edge-stroke-width: 3}:where(.react-flow__edge.selected) .bexn7q1[data-edge-hovered=true]{--xy-edge-stroke-width: 4}.likec4-diagram .react-flow__edges>svg{mix-blend-mode:plus-lighter}:where([data-mantine-color-scheme=light]) .likec4-diagram .react-flow__edges>svg{mix-blend-mode:screen}.likec4-diagram .react-flow__edges>svg:has(.bexn7q2){opacity:.6;transition:opacity .6s ease-in-out,filter .6s ease-in-out;transition-delay:.2s;filter:grayscale(.85) var(--likec4-safari-animation-hook, blur(1px));will-change:opacity,filter}.bexn7q3{stroke-opacity:.08;transition-property:stroke-width,stroke-opacity;transition-duration:155ms;transition-timing-function:ease-out}:where(.react-flow__edge.selected,[data-edge-active=true],[data-edge-hovered=true]) .bexn7q3{stroke-width:calc(var(--xy-edge-stroke-width) + 8);stroke-opacity:.15}.bexn7q4{fill:var(--xy-edge-stroke);stroke:var(--xy-edge-stroke)}.bexn7q5{fill:var(--xy-edge-stroke);stroke:var(--xy-edge-stroke);fill-opacity:.75;stroke-width:1;cursor:grab;pointer-events:auto;visibility:hidden}.bexn7q5:hover{stroke:var(--mantine-primary-color-filled-hover);stroke-width:9;transition:stroke .1s ease-out,stroke-width .1s ease-out}:where(.react-flow__edge.selected,[data-edge-hovered=true]) .bexn7q5{visibility:visible;transition:fill-opacity .15s ease-out,stroke .15s ease-out,stroke-width .15s ease-out;transition-delay:50ms;fill-opacity:1;stroke-width:5}.bexn7q6{cursor:grabbing}.bexn7q6 *{cursor:grabbing!important}.bexn7q8{animation-duration:.8s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both;stroke-dashoffset:10}:where([data-edge-hovered=true]) .bexn7q8{animation-name:bexn7q7;animation-delay:.45s;transition:stroke .13s ease-out,stroke-width .13s ease-out}:where(.react-flow__edge.selected,[data-edge-active=true],[data-edge-animated=true]) .bexn7q8{animation-name:bexn7q7;animation-delay:0ms;transition:stroke .13s ease-out,stroke-width .13s ease-out}:where([data-edge-dir=back]) .bexn7q8{animation-direction:reverse}.bexn7q2 .bexn7q8{animation-play-state:paused}.bexn7q9{flex:0 0 auto;font-weight:600;font-size:calc(.875rem * var(--mantine-scale));line-height:1;padding:5px;text-align:center;min-width:22px;border-top-left-radius:2px;border-bottom-left-radius:2px;background-color:color-mix(in srgb,var(--likec4-relation-labelBg),var(--bexn7q0) 5%);font-variant-numeric:tabular-nums}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray]) .bexn7q9{background-color:color-mix(in srgb,var(--likec4-relation-labelBg),var(--bexn7q0) 15%)}:where([data-edge-active=true]) .bexn7q9{background-color:transparent}.bexn7qd{--bexn7qc: translate(var(--bexn7qa, -50%), var(--bexn7qb, -50%));top:0;left:0;padding:2px 4px 4px;font-family:var(--likec4-font-family);display:flex;position:absolute;pointer-events:all;cursor:pointer;width:fit-content;transform-origin:50% 50%;mix-blend-mode:plus-lighter;color:var(--xy-edge-label-color);background-color:var(--xy-edge-label-background-color);border-radius:2px;transform:var(--bexn7qc)}.bexn7qd[data-edge-hovered=true]{transition:all .14s ease-in-out;transform:var(--bexn7qc) scale(1.12)}.bexn7qd:has(.bexn7q9){padding:0;gap:2px}.bexn7qd:is(.bexn7q2){opacity:.3;transition:opacity .6s ease-in-out,filter .6s ease-in-out;transition-delay:.2s;filter:grayscale(.85) var(--likec4-safari-animation-hook, blur(1px));will-change:opacity,filter}.bexn7qe{white-space-collapse:preserve-breaks;font-size:calc(.875rem * var(--mantine-scale));line-height:1.185}.bexn7qf{text-align:center;white-space-collapse:preserve-breaks;font-size:calc(.6875rem * var(--mantine-scale));line-height:1;opacity:.75}.bexn7qd:has(.bexn7q9) .bexn7qe{padding:2px 5px 4px 2px}.bexn7qg{position:absolute;top:4px;right:4px;z-index:9}.bexn7qh{--text-fz: var(--mantine-font-size-sm);-webkit-user-select:all;user-select:all;text-align:left;white-space-collapse:preserve-breaks;text-wrap:pretty;line-height:1.25}.bexn7qi{--ai-bg: var(--likec4-relation-labelBg);--ai-hover: color-mix(in srgb , var(--likec4-relation-labelBg), var(--bexn7q0) 10%);z-index:calc(var(--layer-overlays, 1) + 1);pointer-events:all;color:var(--xy-edge-label-color);cursor:pointer;opacity:1;transition:all .13s cubic-bezier(.5,0,.2,1);background-color:var(--ai-bg)}.bexn7qi:hover{transform:translateY(1px) scale(1.15)}.bexn7qi:active{transform:translateY(-1px) scale(.9)}.bexn7qi .tabler-icon{width:80%;height:80%;stroke-width:2}@media (min-width: 62em){.bexn7qh{--text-fz: var(--mantine-font-size-md)}}.qcv9lq0{min-width:250px;max-width:min(90vw,500px)}.qcv9lq1{gap:4px}.qcv9lq2{display:block;font-size:10px;font-weight:500;white-space:nowrap;padding:2px 5px;border-radius:2px;background:color-mix(in srgb,var(--likec4-element-fill),transparent 45%);line-height:1.1}:where([data-mantine-color-scheme=dark]) .qcv9lq2{color:var(--likec4-element-loContrast)}.qcv9lq3{white-space-collapse:preserve-breaks;font-size:var(--mantine-font-size-sm)}._10w34w70{z-index:100;width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;justify-content:center;pointer-events:none}._1jdst3q0{--ai-bg-idle: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);--ai-bg: var(--ai-bg-idle);--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));--ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));pointer-events:all;color:var(--likec4-element-loContrast);cursor:pointer;background-color:var(--ai-bg)}._1jdst3q0:hover{box-shadow:var(--mantine-shadow-md)}:where([data-mantine-color-scheme=light]) .likec4-compound-transparent ._1jdst3q0{--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill), transparent 20%);--ai-hover: color-mix(in srgb , var(--likec4-element-fill), transparent 10%);--ai-bg: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);color:var(--likec4-element-stroke);opacity:.85}._12hvjem0{position:absolute;left:3px;top:6px}._12hvjem1{position:absolute;top:2px;right:2px}:where([data-likec4-shape=browser]) ._12hvjem1{right:5px}:where([data-likec4-shape=cylinder],[data-likec4-shape=storage]) ._12hvjem1{top:14px}:where([data-likec4-shape=queue]) ._12hvjem1{top:1px;right:12px}._12hvjem2{z-index:100;position:absolute;left:0;width:100%;bottom:2px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;pointer-events:none}:where([data-likec4-shape=browser]) ._12hvjem2{bottom:4px}@keyframes _1b6tkn4{0%{stroke-opacity:.8}to{stroke-opacity:.5}}._1b6tkn1{--_1b6tkn0: color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill));position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:center}._1b6tkn1:after{content:" ";position:absolute;top:100%;left:0;right:0;height:16px;background:transparent;pointer-events:all}:where(.react-flow__node.selected) ._1b6tkn1{will-change:transform}._1b6tkn2{top:50%;left:50%;visibility:hidden}._1b6tkn3{will-change:transform}._1b6tkn6{--_1b6tkn5: var(--likec4-element-loContrast);stroke:var(--_1b6tkn5);fill:none;transform-origin:center center;stroke-width:6;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate;stroke-opacity:.8;visibility:hidden}:where(.react-flow__node.selected) ._1b6tkn6{visibility:visible;animation-name:var(--likec4-safari-animation-hook, _1b6tkn4)}:where(.react-flow__node:focus-visible,._1b6tkn1:focus-visible) ._1b6tkn6{stroke-width:10;stroke:var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));visibility:visible}:where([data-likec4-shape=queue],[data-likec4-shape=cylinder],[data-likec4-shape=storage]) ._1b6tkn6{stroke-width:10}:where([data-mantine-color-scheme=light]) ._1b6tkn6{--_1b6tkn5: color-mix(in srgb, var(--likec4-element-fill) 50%, #3c3c3c)}._1b6tkn7{fill:var(--likec4-element-fill)}._1b6tkn8{fill:var(--likec4-element-stroke)}._1b6tkn9{fill:var(--_1b6tkn0, color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill)))}._1b6tknd{flex:0 0 auto;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;text-align:var(--_1b6tknb);font-weight:500;font-size:19px;line-height:1.15;text-wrap:balance;color:var(--likec4-element-hiContrast);white-space-collapse:preserve-breaks}._1b6tkne{flex:0 1 auto;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:400;font-size:14px;line-height:1.2;text-align:var(--_1b6tknb);text-wrap:pretty;color:var(--likec4-element-loContrast);white-space-collapse:preserve-breaks;text-overflow:ellipsis;overflow:hidden}:where(._1b6tkna) ._1b6tkne{text-wrap:wrap}._1b6tknf{flex:0 0 auto;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:400;font-size:12px;line-height:1.125;text-align:var(--_1b6tknb);text-wrap:balance;opacity:.92;color:var(--likec4-element-loContrast)}._1b6tkn1:hover ._1b6tknf{opacity:1}._1b6tkng{--_1b6tknc: 48px;flex:1;height:fit-content;display:flex;align-items:center;justify-content:center;flex-direction:row;padding:calc(1.5rem * var(--mantine-scale));overflow:hidden;gap:calc(.625rem * var(--mantine-scale))}:where([data-likec4-shape=queue],[data-likec4-shape=mobile]) ._1b6tkng{padding-left:40px;padding-right:20px}:where([data-likec4-shape=cylinder],[data-likec4-shape=storage]) ._1b6tkng{padding-top:30px}:where([data-likec4-shape=browser]) ._1b6tkng{padding-top:32px;padding-bottom:28px}._1b6tkn1:not(:is([data-likec4-shape=queue],[data-likec4-shape=mobile])) ._1b6tkng:is(._1b6tkna){padding-left:24px;padding-right:18px}._1b6tkng:has(._1b6tkne,._1b6tknf){--_1b6tknc: 60px;gap:calc(1rem * var(--mantine-scale))}._1b6tknh{--_1b6tknb: center;height:fit-content;width:max-content;display:flex;flex-direction:column;align-items:stretch;justify-content:center;flex-wrap:nowrap;overflow:hidden;gap:calc(.5rem * var(--mantine-scale))}._1b6tknh:has(._1b6tkne):has(._1b6tknf){gap:calc(.375rem * var(--mantine-scale))}:where(._1b6tkna) ._1b6tknh{--_1b6tknb: left;min-width:calc(100% - 160px);align-items:flex-start}._1b6tkni{flex:0 0 var(--_1b6tknc);height:var(--_1b6tknc);width:var(--_1b6tknc);display:flex;align-items:center;justify-content:center;mix-blend-mode:hard-light;align-self:flex-start}._1b6tkni svg,._1b6tkni img{width:100%;height:auto;max-height:100%;pointer-events:none;filter:drop-shadow(0 0 3px rgb(0 0 0 / 12%)) drop-shadow(0 1px 8px rgb(0 0 0 / 8%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))}._1b6tkni img{object-fit:contain}._1b6tknk{top:0;left:0;position:absolute;pointer-events:none;transform-origin:50% 50%;fill:var(--likec4-element-fill);stroke:none;z-index:-1;transition:opacity .5s ease-out;transform:translate(8px,10px);opacity:.5}:where(.react-flow__node.selected,.react-flow__node:focus-visible,._1b6tkn1:focus-visible) ._1b6tknk{visibility:hidden}:where([data-likec4-shape=cylinder],[data-likec4-shape=storage]) ._1b6tknk{transform:translate(8px,8px)}:where([data-likec4-shape=queue]) ._1b6tknk{transform:translate(-10px,8px)}._1b6tknl{--_1b6tknj: drop-shadow(0 2px 1px rgba(0, 0, 0, .21)) drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-element-stroke) 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, .1)) ;top:0;left:0;position:absolute;width:100%;height:100%;pointer-events:none;fill:var(--likec4-element-fill);stroke:var(--likec4-element-stroke);overflow:visible;filter:var(--_1b6tknj);transition:filter .3s ease-out;transition-delay:0ms;z-index:-1}:where(.react-flow__node.selected,.react-flow__node:focus-visible,._1b6tkn1:focus-visible) ._1b6tknl{--_1b6tknj: none}._1b6tknm{z-index:100;position:absolute;left:0;width:100%;bottom:2px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;justify-content:center;pointer-events:none}:where([data-likec4-shape=browser]) ._1b6tknm{bottom:4px}@keyframes lbtzdoe{0%{opacity:.6}to{opacity:.3}}.lbtzdo0{position:relative;width:100%;height:100%}.lbtzdo2{--lbtzdo1: 18px;width:100%;height:100%;position:relative;padding:0;margin:0}.lbtzdo2:before{content:" ";position:absolute;top:0;left:-16px;width:16px;height:min(100%,80px);pointer-events:all;background:transparent}.lbtzdo3{top:50%;left:50%;visibility:hidden}:where([data-mantine-color-scheme=dark] .likec4-compound-transparent){--_compound-border-color: color-mix(in srgb, var(--likec4-compound-title-color) 25%, var(--likec4-element-stroke))}:where([data-mantine-color-scheme=light] .likec4-compound-transparent){--_compound-title-color: var(--likec4-element-stroke)}.lbtzdo8{--lbtzdo6: 6px;width:100%;height:100%;position:relative;border-radius:var(--lbtzdo6);box-shadow:0 4px 10px .5px #0000001a,0 2px 2px -1px #0006;padding:0;margin:0;transition:all .2s ease-out;cursor:default}.lbtzdo8:before{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;border:1px solid transparent;border-radius:var(--lbtzdo6);transition:background 175ms ease-out,opacity 175ms ease-out;background:var(--likec4-element-fill);background-clip:border-box}:where(.react-flow__node.selected) .lbtzdo8{box-shadow:none}:where(.react-flow__node:focus-visible) .lbtzdo8{transition-duration:0ms;outline:3px solid var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));outline-offset:calc(.09375rem * var(--mantine-scale))}.lbtzdo9{display:flex;align-items:center;gap:6px;padding-left:14px;padding-top:6px;min-height:30px;padding-right:2px}:where(.react-flow__node.draggable) .lbtzdo9{cursor:grab}:where(.likec4-compound-transparent) .lbtzdo9{padding-top:3px}.lbtzdoa{padding-left:32px}.lbtzdoc{--lbtzdo5: var(--_compound-border-color,var(--likec4-element-stroke));--lbtzdob: 0;border-style:dashed;border-width:3px;box-shadow:none;border-color:color-mix(in srgb,var(--lbtzdo5),transparent var(--lbtzdo7, 5%))}.lbtzdoc:before{border-radius:unset;transition-delay:.1s;opacity:calc(var(--lbtzdo4, 1) + var(--lbtzdob))}:where([data-hovered]) .lbtzdoc{--lbtzdob: .08}.lbtzdod{flex:1;font-family:var(--likec4-compound-font-family);font-weight:600;font-size:calc(.9375rem * var(--mantine-scale));text-transform:uppercase;letter-spacing:.2px;color:var(--_compound-title-color,var(--likec4-compound-title-color));mix-blend-mode:screen}.lbtzdoh{--lbtzdof: var(--likec4-element-loContrast);--lbtzdog: 6;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;visibility:hidden}:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdoh{visibility:visible}:where(.react-flow__node:focus-within:not(.selected)) .lbtzdoh{--lbtzdof: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));--lbtzdog: 8}:where([data-mantine-color-scheme=light]) .lbtzdoh{--lbtzdof: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000)}.lbtzdoh rect{stroke:var(--lbtzdof);transform-origin:center center;stroke-width:var(--lbtzdog);animation-duration:.8s;animation-name:lbtzdoe;animation-iteration-count:infinite;animation-direction:alternate;fill:none}.lbtzdo2{--lbtzdoi: var(--likec4-element-loContrast)}:where([data-mantine-color-scheme=light] .likec4-compound-transparent){--lbtzdoi: var(--likec4-element-stroke)}.lbtzdoj{flex:0 0 var(--lbtzdo1);height:var(--lbtzdo1);width:var(--lbtzdo1);display:flex;align-items:center;justify-content:center;mix-blend-mode:luminosity}.lbtzdoj svg,.lbtzdoj img{width:100%;height:auto;max-height:100%;pointer-events:none;filter:drop-shadow(0 0 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 8px rgb(0 0 0 / 8%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))}.lbtzdoj img{object-fit:contain}.hbkbtj0{bottom:0;left:0;padding:8px;margin:0}.hbkbtj1{cursor:default;min-width:200px;max-width:calc(100vw - 16px);background-color:color-mix(in srgb,var(--mantine-color-body),transparent 20%);-webkit-backdrop-filter:var(--likec4-safari-animation-hook, blur(8px));backdrop-filter:var(--likec4-safari-animation-hook, blur(8px))}:where([data-mantine-color-scheme=dark]) .hbkbtj1{background-color:color-mix(in srgb,var(--mantine-color-dark-6),transparent 20%)}.hbkbtj3{white-space-collapse:preserve-breaks;color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .hbkbtj3{color:var(--mantine-color-gray-5)}@media (min-width: 48em){.hbkbtj1{min-width:250px;max-width:90vw}}@media (min-width: 62em){.hbkbtj1{min-width:350px;max-width:70vw}}._2jkb2y0{position:absolute;bottom:.5rem;left:50%;transform:translate(-50%);padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem;align-items:center}._2jkb2y1{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all 175ms ease-in}._2jkb2y1:hover{transition-timing-function:ease-out;transform:scale(1.1)}._2jkb2y1:active{transition-duration:.1s;transform:scale(.98) translateY(3px)}._2jkb2y3{--_2jkb2y2: 35%;--button-bg: color-mix(in srgb, var(--mantine-primary-color-filled), transparent var(--_2jkb2y2));--button-hover: color-mix(in srgb, var(--mantine-primary-color-filled-hover), transparent var(--_2jkb2y2));transition:all 175ms ease-in;background-color:var(--button-bg)}[data-mantine-color-scheme=light] ._2jkb2y3{--_2jkb2y2: 15%}:where(._2jkb2y1,._2jkb2y3) .tabler-icon{width:.85em;height:.85em}._2jkb2y4{position:absolute;margin:0;padding:0;top:0;left:0;width:100%;height:100%;border:2px solid var(--mantine-color-orange-6);pointer-events:none}@media (min-width: 62em){._2jkb2y0{gap:.6rem}._2jkb2y4{border-width:4px}}._1snasyb0{gap:calc(var(--mantine-spacing-xs) / 1.5)}._1snasyb1{top:var(--likec4-navigation-webview-top, 1rem);left:var(--likec4-navigation-webview-left, 1rem);gap:calc(var(--mantine-spacing-xs) / 1.5);margin:0}.likec4-top-left-panel .action-icon{--ai-size: 2rem}.likec4-top-left-panel .action-icon .tabler-icon{width:65%;height:65%}._1snasyb2{box-shadow:var(--mantine-shadow-md)}._1snasyb3 .tabler-icon{width:65%;height:65%}._1snasyb4{flex:1 1 40%;text-align:center;font-weight:500;padding:4px 6px;font-size:calc(.6875rem * var(--mantine-scale));z-index:1}._1snasyb5{background:var(--mantine-color-gray-2);border-radius:var(--mantine-radius-sm);border:1px solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) ._1snasyb5{background:var(--mantine-color-dark-5);border-color:var(--mantine-color-dark-4)}._1snasyb6{position:relative;border-radius:var(--mantine-radius-sm);background:var(--mantine-color-gray-3);box-shadow:inset 1px 1px 3px #00000024}:where([data-mantine-color-scheme=dark]) ._1snasyb6{background:var(--mantine-color-dark-7)}._1snasyb7{position:absolute;width:8px;height:8px;border:2px solid var(--mantine-color-gray-5);border-radius:3px;transform:translate(-50%,-50%)}._1ncdyfa0{bottom:0;right:0;padding:8px;margin:0}._1ncdyfa1{cursor:default;-webkit-user-select:none;user-select:none;min-width:200px;max-width:calc(100vw - 20px);background-color:color-mix(in srgb,var(--mantine-color-body),transparent 20%);-webkit-backdrop-filter:var(--likec4-safari-animation-hook, blur(8px));backdrop-filter:var(--likec4-safari-animation-hook, blur(8px))}:where([data-mantine-color-scheme=dark]) ._1ncdyfa1{background-color:color-mix(in srgb,var(--mantine-color-dark-6),transparent 20%)}._1ncdyfa2{padding:calc(var(--mantine-spacing-xs) / 2)}._1ncdyfa3{--_1b6tkn0: color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill));background-color:transparent;transition:all .1s ease-in}._1ncdyfa3:hover{transition:all .12s ease-out;background-color:color-mix(in srgb,var(--mantine-primary-color-2),transparent 50%)}:where([data-mantine-color-scheme=dark]) ._1ncdyfa3:hover{background-color:color-mix(in srgb,var(--mantine-color-dark-3),transparent 60%)}._1ncdyfa4{fill:var(--likec4-element-fill);stroke:var(--likec4-element-stroke);stroke-width:1;overflow:visible;width:100%;height:auto;filter:drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%))}._1ncdyfa5{--badge-radius: 2px;--badge-fz: 9.5px;--badge-padding-x: 3px;--badge-height: 13.5px;--badge-lh: 1;font-weight:500;letter-spacing:.2px;padding-top:0;padding-bottom:0;text-transform:lowercase;transition:all .15s ease-in-out;cursor:pointer}@media (min-width: 48em){._1ncdyfa1{min-width:300px;max-width:65vw}}@media (min-width: 62em){._1ncdyfa1{max-width:40vw}}._1n45dyn0{display:inline-flex;align-items:center;padding:6px 2px 0}._1n45dyn0 .mantine-Text-root{font-size:var(--mantine-font-size-xs);font-weight:500;line-height:1}._1n45dyn1{padding-left:4px;grid-column:1}._1n45dyn2{grid-column:2}._1n45dyn3{grid-column:3;padding-right:4px}._1n45dyn4{display:grid;grid-column-start:1;grid-column-end:4;border-bottom:1px solid var(--mantine-color-default-border);margin-bottom:0;padding:0 4px 5px}._1n45dyn4 .mantine-Text-root{font-size:var(--mantine-font-size-sm);font-weight:400;color:var(--mantine-color-dimmed)}._1n45dyn5{display:contents}._1n45dyn5:last-child ._1n45dyn4{border-bottom:none;margin-bottom:0}._1n45dyn5>*{transition:all .15s ease-in}._1n45dyn5:is(:hover,[data-selected=true])>*{transition:all .15s ease-out;cursor:pointer;background-color:var(--mantine-color-default-hover)}._1n45dyn6{display:grid;grid-template-columns:1fr 30px 1fr;grid-auto-rows:min-content max-content;gap:0;align-items:stretch}._1n45dyn7{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:min-content max-content;gap:10px 12px;align-items:baseline;justify-items:start}._144zcea0{width:100%;height:100%}._144zcea1{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;gap:6px;padding:16px}._144zcea2{flex:0 0 auto;width:fit-content;text-align:center;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:500;font-size:17px;line-height:1.25;text-wrap:balance;color:var(--likec4-element-hiContrast)}._144zcea3{flex:0 0 auto;width:fit-content;text-align:center;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-size:var(--mantine-font-size-xs);line-height:1.25;text-wrap:balance;color:var(--likec4-element-loContrast)}._144zcea4{width:100%;height:100%;box-shadow:0 4px 10px .5px #0000001a,0 2px 2px -1px #0006;background:color-mix(in srgb,var(--likec4-element-fill),transparent 10%);border-radius:4px}._144zcea5{font-family:var(--likec4-compound-font-family);font-optical-sizing:auto;font-style:normal;font-weight:600;font-size:14px;line-height:1;text-transform:uppercase;padding-top:12px;padding-left:10px;mix-blend-mode:screen;color:var(--likec4-compound-title-color)}._144zcea6{top:0;left:0;position:absolute;pointer-events:none;fill:var(--likec4-element-fill);stroke:var(--likec4-element-stroke);overflow:visible;filter:drop-shadow(0 2px 1px rgba(0,0,0,.21)) drop-shadow(0 1px 1px color-mix(in srgb,var(--likec4-element-stroke) 40%,transparent)) drop-shadow(0 5px 3px rgba(0,0,0,.1));z-index:-1}._144zcea7{z-index:100;position:absolute;left:50%;bottom:2px;transform:translate(-50%);gap:0;transition:all .19s cubic-bezier(.5,0,.4,1)}:where([data-likec4-shape=browser],[data-likec4-shape=mobile]) ._144zcea7{bottom:6px}:where(._144zcea0:hover) ._144zcea7{transition-delay:20ms;gap:8px;transform:translate(-50%,5px)}._144zcea8{--ai-bg: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));--ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));opacity:.7;pointer-events:all;cursor:pointer;transform:scale(.9);transition:all .19s cubic-bezier(.5,0,.4,1)}._144zcea8:hover{transition-delay:0ms;transform:scale(1.25);box-shadow:var(--mantine-shadow-lg)}._144zcea8:active{transform:scale(.975)}:where(._144zcea0:hover) ._144zcea8{--ai-bg: var(--ai-bg-hover);transition-delay:40ms;transition-timing-function:cubic-bezier(0,0,.4,1);opacity:1;transform:scale(1.07);box-shadow:var(--mantine-shadow-md)}._1u47gxi1{--backdrop-blur: 0px;--backdrop-opacity: 0%;--_1u47gxi0: black;position:absolute;top:0;left:0;padding:0;margin:0;box-sizing:border-box;border:0 solid transparent;width:100%;height:100%;z-index:1000;isolation:isolate;-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur));background-color:rgb(200 200 200 / var(--backdrop-opacity))}:where([data-mantine-color-scheme=dark]) ._1u47gxi1{--_1u47gxi0: white;background-color:rgb(36 36 36 / var(--backdrop-opacity))}.react-flow._1u47gxi2{--xy-background-pattern-color: var(--likec4-background-pattern-color)}:where([data-mantine-color-scheme=dark]) .react-flow._1u47gxi2{--xy-edge-label-color: var(--likec4-relation-labelColor);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 50%)}:where(._1u47gxi2) .react-flow__attribution{display:none}:where(._1u47gxi2) .react-flow__edge-text{font-size:16px}._1u47gxi2 .react-flow__edges>svg{mix-blend-mode:plus-lighter}:where([data-mantine-color-scheme=light]) ._1u47gxi2 .react-flow__edges>svg{mix-blend-mode:screen}._5hogu30{--xy-edge-stroke: var(--likec4-relation-lineColor);--xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), var(--_1u47gxi0) 35%);--xy-edge-label-color: color-mix(in srgb, var(--likec4-relation-labelColor), rgba(255 255 255 / .85) 50%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 20%);opacity:1;transition:all .13s cubic-bezier(.5,0,.2,1)}._5hogu30[data-edge-dimmed=true]{opacity:.2;transition-delay:.4s}._5hogu30[data-edge-dimmed=immediate]{opacity:.2}:where([data-mantine-color-scheme=dark]) ._5hogu30{--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 50%)}._5hogu31{padding:2px 5px;font-family:var(--likec4-font-family);position:absolute;cursor:pointer;width:fit-content;color:var(--xy-edge-label-color);background-color:var(--xy-edge-label-background-color);border-radius:4px;pointer-events:all;text-wrap:pretty;white-space:preserve-breaks}._5hogu32{text-align:center;white-space-collapse:preserve-breaks;font-size:var(--mantine-font-size-md);line-height:var(--mantine-line-height-xs)}._5hogu33{text-align:center;white-space-collapse:preserve-breaks;font-size:var(--mantine-font-size-sm);line-height:1}.paikoy2{--backdrop-opacity: 0%;--backdrop-blur: 0px;box-sizing:border-box;margin:0;padding:0;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:100%;max-height:100%;background:transparent;border:0 solid transparent}.paikoy2::backdrop{-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur));background-color:rgb(36 36 36 / var(--backdrop-opacity))}.paikoy3{--paikoy0: var(--mantine-color-body);--paikoy1: linear-gradient(180deg, var(--likec4-element-fill), var(--likec4-element-fill) 4px, transparent 4px);position:absolute;pointer-events:all;gap:var(--mantine-spacing-lg);justify-content:stretch;background-color:var(--paikoy0);background-image:var(--paikoy1);border-top-color:var(--likec4-element-fill)}:where([data-mantine-color-scheme=dark]) .paikoy3{--paikoy0: var(--mantine-color-dark-6);--paikoy1: linear-gradient(180deg, color-mix(in srgb, var(--likec4-element-fill) 15%, transparent), transparent 80px), linear-gradient(180deg, var(--likec4-element-fill), var(--likec4-element-fill) 4px, transparent 4px) }.paikoy4{flex:0;cursor:move}:where(.paikoy3) .react-flow__attribution{display:none}.paikoy5{display:block;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:600;font-size:24px;line-height:var(--mantine-line-height-xs)}.paikoy6{flex:0 0 40px;height:40px;width:40px;display:flex;align-items:center;justify-content:center;align-self:flex-start;cursor:move}:where([data-mantine-color-scheme=dark]) .paikoy6{mix-blend-mode:hard-light}.paikoy6 svg,.paikoy6 img{width:100%;height:auto;max-height:100%;pointer-events:none;filter:drop-shadow(0 0 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 8px rgb(0 0 0 / 5%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))}.paikoy6 img{object-fit:contain}.paikoy9{--paikoy7: var(--mantine-color-dark-1);width:100%;background:var(--mantine-color-body);border-radius:var(--mantine-radius-sm);padding:10px 8px;transition:all .13s cubic-bezier(.5,0,.2,1);border:1px solid var(--mantine-color-default-border)}.paikoy9:hover{--paikoy8: var(--mantine-color-dark-1);--paikoy7: var(--mantine-color-default-color);background:var(--mantine-color-default-hover)}:where([data-mantine-color-scheme=dark]) .paikoy9{background:var(--mantine-color-dark-6)}:where([data-mantine-color-scheme=light]) .paikoy9{--paikoy8: var(--mantine-color-gray-6);--paikoy7: var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=light]) .paikoy9:hover{--paikoy8: var(--mantine-color-gray-7)}.paikoy9 .mantine-ThemeIcon-root{--ti-size: 22px;transition:all .13s cubic-bezier(.5,0,.2,1);color:var(--paikoy8, var(--mantine-color-dark-2))}.paikoy9 .mantine-ThemeIcon-root:hover{color:var(--mantine-color-default-color)}.paikoy9>*{transition:all .13s cubic-bezier(.5,0,.2,1)}.paikoy9:hover>*{transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1.6px)}.paikoya{transition:all .13s cubic-bezier(.5,0,.2,1);color:var(--paikoy7, var(--mantine-color-gray-7));font-size:15px;font-weight:500;line-height:1.4}.paikoyb{flex:1;display:flex;flex-direction:column;justify-content:stretch;overflow:hidden;gap:var(--mantine-spacing-sm)}.paikoyc{background:var(--mantine-color-gray-1);border-radius:var(--mantine-radius-sm);flex-wrap:nowrap;gap:6px;padding:4px}:where([data-mantine-color-scheme=dark]) .paikoyc{background:var(--mantine-color-dark-7)}.paikoyd{font-size:var(--mantine-font-size-xs);font-weight:500;flex-grow:1;padding:6px 8px;transition:all .13s cubic-bezier(.5,0,.2,1);border-radius:var(--mantine-radius-sm);color:var(--mantine-color-gray-7)}.paikoyd:hover{transition-timing-function:cubic-bezier(0,0,.4,1);color:var(--mantine-color-default-color);background:var(--mantine-color-gray-3)}.paikoyd[data-active]{transition:none;background:var(--mantine-color-white);box-shadow:var(--mantine-shadow-xs);color:var(--mantine-color-default-color)}:where([data-mantine-color-scheme=dark]) .paikoyd{color:var(--mantine-color-dark-1)}:where([data-mantine-color-scheme=dark]) .paikoyd:hover{color:var(--mantine-color-white);background:var(--mantine-color-dark-6)}:where([data-mantine-color-scheme=dark]) .paikoyd:is([data-active]){color:var(--mantine-color-white);background:var(--mantine-color-dark-5)}.paikoye{flex:1;overflow:hidden;position:relative}.paikoye:not(:has(.mantine-ScrollArea-root)){padding-left:4px;padding-right:4px}.paikoye .mantine-ScrollArea-root{width:100%;height:100%}.paikoye .mantine-ScrollArea-viewport>div{padding-left:4px;padding-right:4px}.paikoyf{flex:1;display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:min-content max-content;gap:calc(1.25rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));align-items:baseline;justify-items:stretch}.paikoyg{justify-self:end}.paikoyh{transition:all .13s cubic-bezier(.5,0,.2,1);border:1px dashed var(--mantine-color-default-border);border-radius:var(--mantine-radius-sm);min-height:30px;padding:3px 16px 3px 3px;cursor:pointer;color:var(--mantine-color-gray-7)}.paikoyh:hover{transition-timing-function:cubic-bezier(0,0,.4,1);border-style:solid;color:var(--mantine-color-default-color);background:var(--mantine-color-default-hover)}:where([data-mantine-color-scheme=dark]) .paikoyh{color:var(--mantine-color-dark-1)}.paikoyh>*{transition:all .13s cubic-bezier(.5,0,.2,1)}.paikoyh:hover>*{transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}.paikoyi{position:absolute;width:14px;height:14px;border:3.5px solid var(--mantine-color-dark-3);border-top:none;border-left:none;border-radius:2px;bottom:2px;right:2px;transition:all .13s cubic-bezier(.5,0,.2,1);cursor:se-resize}.paikoyi:hover{border-width:4px;border-color:var(--mantine-color-dark-1)}._6nb9wd0[data-level="1"]{margin-bottom:calc(1rem * var(--mantine-scale))}._6nb9wd1{cursor:default;margin-top:0;margin-bottom:0}._6nb9wd2{transition:all .13s cubic-bezier(.5,0,.2,1);color:var(--mantine-color-gray-7)}._6nb9wd2:hover{transition-timing-function:cubic-bezier(0,0,.4,1)}:where([data-mantine-color-scheme=dark]) ._6nb9wd2{color:var(--mantine-color-dark-1)}._6nb9wd2>*{transition:all .13s cubic-bezier(.5,0,.2,1)}._6nb9wd2:hover>:not([data-no-transform]){transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}.mantine-Button-root:hover ._6nb9wd2>:not([data-no-transform]){transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}._6nb9wd4{cursor:pointer;width:100%;justify-content:stretch;flex-wrap:nowrap;height:calc(2.25rem * var(--mantine-scale));padding-inline-start:calc(1rem * var(--mantine-scale));padding-inline-end:calc(.625rem * var(--mantine-scale));border-radius:var(--mantine-radius-sm);align-items:center;color:var(--mantine-color-gray-7)}._6nb9wd4:hover{background:var(--mantine-color-gray-light-hover)}:where([data-mantine-color-scheme=dark]) ._6nb9wd4{color:var(--mantine-color-gray-light-color)}._6nb9wd4 .tabler-icon{transition:all .13s cubic-bezier(.5,0,.2,1);width:90%;opacity:.65}._19duq0h0{position:relative;width:100%;height:100%}._19duq0h1{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;gap:6px;padding:16px}._19duq0h2{flex:0 0 auto;width:fit-content;text-align:center;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:500;font-size:18px;line-height:1.25;text-wrap:balance;color:var(--likec4-element-hiContrast)}._19duq0h3{flex:0 0 auto;width:fit-content;text-align:center;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-size:var(--mantine-font-size-sm);line-height:1.25;text-wrap:balance;color:var(--likec4-element-loContrast)}._19duq0h4{position:relative;width:100%;height:100%;box-shadow:0 4px 10px .5px #0000001a,1px 1px 4px -1px #0000004d;background:var(--likec4-element-fill);border-radius:6px}._19duq0h5{font-family:var(--likec4-compound-font-family);font-weight:600;font-size:15px;line-height:1;text-transform:uppercase;padding-top:14px;padding-left:12px;mix-blend-mode:screen;color:var(--likec4-compound-title-color)}._19duq0h6{top:0;left:0;position:absolute;pointer-events:none;fill:var(--likec4-element-fill);stroke:var(--likec4-element-stroke);overflow:visible;filter:drop-shadow(0 2px 1px rgba(0,0,0,.21)) drop-shadow(0 1px 1px color-mix(in srgb,var(--likec4-element-stroke) 40%,transparent)) drop-shadow(0 5px 3px rgba(0,0,0,.1));z-index:-1}._19duq0h7{--xy-edge-stroke: var(--likec4-relation-lineColor);--xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), var(--_1u47gxi0) 35%);--xy-edge-label-color: color-mix(in srgb, var(--likec4-relation-labelColor), rgba(255 255 255 / .85) 50%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 20%);opacity:1;transition:all .13s cubic-bezier(.5,0,.2,1)}._19duq0h7[data-edge-dimmed=true]{opacity:.2;transition-delay:.4s}._19duq0h7[data-edge-dimmed=immediate]{opacity:.2}:where([data-mantine-color-scheme=dark]) ._19duq0h7{--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 50%)}._19duq0h8{padding:2px 5px;font-family:var(--likec4-font-family);position:absolute;cursor:pointer;width:fit-content;color:var(--xy-edge-label-color);background-color:var(--xy-edge-label-background-color);border-radius:4px;pointer-events:all;text-wrap:pretty;white-space:preserve-breaks}._19duq0h9{text-align:center;white-space-collapse:preserve-breaks;font-size:var(--mantine-font-size-md);line-height:var(--mantine-line-height-xs)}._19duq0ha{text-align:center;white-space-collapse:preserve-breaks;font-size:var(--mantine-font-size-sm);line-height:1}._19duq0hb{width:100%;height:100%;border:3px dashed var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);display:flex;justify-content:center;align-items:center}._19duq0hc{z-index:100;position:absolute;left:50%;bottom:2px;transform:translate(-50%);gap:0;transition:all .19s cubic-bezier(.5,0,.4,1)}:where([data-likec4-shape=browser]) ._19duq0hc{bottom:4px}:where(._19duq0h0:hover) ._19duq0hc{transition-delay:20ms;gap:8px;transform:translate(-50%,5px)}._19duq0hd{--ai-bg: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));--ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));opacity:.7;pointer-events:all;cursor:pointer;transform:scale(.9);transition:all .19s cubic-bezier(.5,0,.4,1)}._19duq0hd:hover{transition-delay:0ms;transform:scale(1.25);box-shadow:var(--mantine-shadow-lg)}._19duq0hd:active{transform:scale(.975)}:where(._19duq0h0:hover) ._19duq0hd{--ai-bg: var(--ai-bg-hover);transition-delay:40ms;transition-timing-function:cubic-bezier(0,0,.4,1);opacity:1;transform:scale(1.07);box-shadow:var(--mantine-shadow-md)}.k4m020{display:inline-block;font-size:var(--mantine-font-size-sm);font-weight:500;white-space:nowrap;padding:3px 6px;border-radius:3px;background:color-mix(in srgb,var(--likec4-element-fill),transparent 25%);line-height:1.2;color:var(--likec4-element-hiContrast)}:where([data-mantine-color-scheme=light]) .k4m021{background:var(--mantine-color-gray-1)}.k4m021[data-missing]{color:var(--mantine-color-orange-4);background:color-mix(in srgb,var(--mantine-color-orange-8) 15%,transparent);border-color:color-mix(in srgb,var(--mantine-color-orange-5) 20%,transparent)}:where([data-mantine-color-scheme=light]) .k4m021[data-missing]{color:var(--mantine-color-orange-8)}.k4m022{flex:1 1 100%;position:relative;width:100%;height:100%;background:var(--mantine-color-body);border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-sm)}:where([data-mantine-color-scheme=light]) .k4m022{border-color:var(--mantine-color-gray-3);background:var(--mantine-color-gray-1)}.k4m023:before{content:"scope:";position:absolute;top:0;left:8px;font-size:9px;font-weight:500;line-height:1;color:var(--mantine-color-dimmed);opacity:.85;transform:translateY(-100%) translateY(-2px)}:where([data-mantine-color-scheme=light]) .k4m023 .mantine-SegmentedControl-root{background:var(--mantine-color-gray-3)}.k4m024{display:inline-block;font-size:var(--mantine-font-size-xl);font-weight:600;padding:1px 5px;min-width:24px;text-align:center;border-radius:var(--mantine-radius-sm);background:var(--mantine-color-dark-7);color:var(--mantine-color-default-color)}:where([data-mantine-color-scheme=light]) .k4m024{background:var(--mantine-color-gray-4);color:var(--mantine-color-dark-6)}.k4m024[data-zero]{color:var(--mantine-color-dimmed)}:where([data-mantine-color-scheme=light]) .k4m024[data-zero]{background:var(--mantine-color-gray-3)}.k4m024[data-missing]{color:var(--mantine-color-orange-4);background:color-mix(in srgb,var(--mantine-color-orange-8) 20%,transparent)}:where([data-mantine-color-scheme=light]) .k4m024[data-missing]{color:var(--mantine-color-orange-8)}._15ijd1w0{margin-top:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-sm)}._15ijd1w1{display:inline-flex;transition:all .13s cubic-bezier(.5,0,.2,1);border:1px dashed var(--mantine-color-default-border);border-radius:var(--mantine-radius-sm);padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);align-items:center;cursor:pointer;color:var(--mantine-color-gray-7)}._15ijd1w1:hover{transition-timing-function:cubic-bezier(0,0,.4,1);border-style:solid;color:var(--mantine-color-default-color);background:var(--mantine-color-default-hover)}:where([data-mantine-color-scheme=dark]) ._15ijd1w1{color:var(--mantine-color-dark-1)}._15ijd1w1>*{transition:all .13s cubic-bezier(.5,0,.2,1)}._15ijd1w1:hover>*{transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}.z1mia80{margin:0}.z1mia81:hover{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .z1mia81:hover{background-color:var(--mantine-color-default-hover);color:var(--mantine-color-white)}
|
|
1
|
+
.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgb(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgb(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}._16mg60z0{margin-inline-end:4px}:where(._16mg60z0) .tabler-icon{opacity:.8;width:70%;height:70%}.likec4-diagram-root{overflow:hidden;position:relative;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box;-webkit-font-smoothing:var(--mantine-webkit-font-smoothing);-moz-osx-font-smoothing:var(--mantine-moz-font-smoothing)}:where(.likec4-diagram-root) .mantine-ActionIcon-icon .tabler-icon{width:75%;height:75%}.likec4-diagram-root{--likec4-font-family: var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"');--likec4-background-color: var(--mantine-color-body);--likec4-background-pattern-color: var(--mantine-color-gray-4);--likec4-compound-font-family: var(--likec4-font-family);--likec4-compound-title-color: var(--likec4-element-loContrast);--likec4-element-font-family: var(--likec4-font-family);--likec4-element-fill: #3b82f6;--likec4-element-stroke: #2563eb;--likec4-element-hiContrast: #eff6ff;--likec4-element-loContrast: #bfdbfe;--likec4-relation-lineColor: #64748b;--likec4-relation-labelBg: #0f172a;--likec4-relation-labelColor: #cbd5e1}:where([data-mantine-color-scheme=dark]) .likec4-diagram-root{--likec4-background-pattern-color: var(--mantine-color-dark-5)}:where([data-likec4-color=primary]){--likec4-element-fill: #3b82f6;--likec4-element-stroke: #2563eb;--likec4-element-hiContrast: #eff6ff;--likec4-element-loContrast: #bfdbfe;--likec4-compound-title-color: #bfdbfe;--likec4-relation-lineColor: #3b82f6;--likec4-relation-labelBg: #172554;--likec4-relation-labelColor: #60a5fa}:where([data-likec4-color=primary][data-compound-depth="1"]){--likec4-element-fill: #145ed7;--likec4-element-stroke: #194bb8}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="1"]){--likec4-element-fill: #1a5bc5;--likec4-element-stroke: #1e49a9}:where([data-likec4-color=primary][data-compound-depth="2"]){--likec4-element-fill: #195cc8;--likec4-element-stroke: #1d4aac}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="2"]){--likec4-element-fill: #1e56b1;--likec4-element-stroke: #204698}:where([data-likec4-color=primary][data-compound-depth="3"]){--likec4-element-fill: #1e59ba;--likec4-element-stroke: #2149a0}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="3"]){--likec4-element-fill: #21519f;--likec4-element-stroke: #224289}:where([data-likec4-color=primary][data-compound-depth="4"]){--likec4-element-fill: #2357ad;--likec4-element-stroke: #244795}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="4"]){--likec4-element-fill: #234c8e;--likec4-element-stroke: #243f7a}:where([data-likec4-color=primary][data-compound-depth="5"]){--likec4-element-fill: #2755a0;--likec4-element-stroke: #27468a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="5"]){--likec4-element-fill: #25467d;--likec4-element-stroke: #243b6c}:where([data-likec4-color=primary][data-compound-depth="6"]){--likec4-element-fill: #2a5293;--likec4-element-stroke: #2a447f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=primary][data-compound-depth="6"]){--likec4-element-fill: #25416d;--likec4-element-stroke: #24365f}:where([data-likec4-color=blue]){--likec4-element-fill: #3b82f6;--likec4-element-stroke: #2563eb;--likec4-element-hiContrast: #eff6ff;--likec4-element-loContrast: #bfdbfe;--likec4-compound-title-color: #bfdbfe;--likec4-relation-lineColor: #3b82f6;--likec4-relation-labelBg: #172554;--likec4-relation-labelColor: #60a5fa}:where([data-likec4-color=blue][data-compound-depth="1"]){--likec4-element-fill: #145ed7;--likec4-element-stroke: #194bb8}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="1"]){--likec4-element-fill: #1a5bc5;--likec4-element-stroke: #1e49a9}:where([data-likec4-color=blue][data-compound-depth="2"]){--likec4-element-fill: #195cc8;--likec4-element-stroke: #1d4aac}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="2"]){--likec4-element-fill: #1e56b1;--likec4-element-stroke: #204698}:where([data-likec4-color=blue][data-compound-depth="3"]){--likec4-element-fill: #1e59ba;--likec4-element-stroke: #2149a0}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="3"]){--likec4-element-fill: #21519f;--likec4-element-stroke: #224289}:where([data-likec4-color=blue][data-compound-depth="4"]){--likec4-element-fill: #2357ad;--likec4-element-stroke: #244795}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="4"]){--likec4-element-fill: #234c8e;--likec4-element-stroke: #243f7a}:where([data-likec4-color=blue][data-compound-depth="5"]){--likec4-element-fill: #2755a0;--likec4-element-stroke: #27468a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="5"]){--likec4-element-fill: #25467d;--likec4-element-stroke: #243b6c}:where([data-likec4-color=blue][data-compound-depth="6"]){--likec4-element-fill: #2a5293;--likec4-element-stroke: #2a447f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=blue][data-compound-depth="6"]){--likec4-element-fill: #25416d;--likec4-element-stroke: #24365f}:where([data-likec4-color=secondary]){--likec4-element-fill: #0284c7;--likec4-element-stroke: #0369a1;--likec4-element-hiContrast: #f0f9ff;--likec4-element-loContrast: #B6ECF7;--likec4-compound-title-color: #B6ECF7;--likec4-relation-lineColor: #0ea5e9;--likec4-relation-labelBg: #082f49;--likec4-relation-labelColor: #38bdf8}:where([data-likec4-color=secondary][data-compound-depth="1"]){--likec4-element-fill: #086392;--likec4-element-stroke: #084f76}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="1"]){--likec4-element-fill: #0d5d86;--likec4-element-stroke: #0b4a6c}:where([data-likec4-color=secondary][data-compound-depth="2"]){--likec4-element-fill: #0c5e88;--likec4-element-stroke: #0b4b6e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="2"]){--likec4-element-fill: #105579;--likec4-element-stroke: #0e4462}:where([data-likec4-color=secondary][data-compound-depth="3"]){--likec4-element-fill: #10597f;--likec4-element-stroke: #0e4767}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="3"]){--likec4-element-fill: #134e6c;--likec4-element-stroke: #103e57}:where([data-likec4-color=secondary][data-compound-depth="4"]){--likec4-element-fill: #135475;--likec4-element-stroke: #11435f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="4"]){--likec4-element-fill: #154660;--likec4-element-stroke: #11384e}:where([data-likec4-color=secondary][data-compound-depth="5"]){--likec4-element-fill: #164f6c;--likec4-element-stroke: #133f58}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="5"]){--likec4-element-fill: #163f55;--likec4-element-stroke: #123345}:where([data-likec4-color=secondary][data-compound-depth="6"]){--likec4-element-fill: #194a64;--likec4-element-stroke: #153c51}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=secondary][data-compound-depth="6"]){--likec4-element-fill: #17384a;--likec4-element-stroke: #132d3c}:where([data-likec4-color=sky]){--likec4-element-fill: #0284c7;--likec4-element-stroke: #0369a1;--likec4-element-hiContrast: #f0f9ff;--likec4-element-loContrast: #B6ECF7;--likec4-compound-title-color: #B6ECF7;--likec4-relation-lineColor: #0ea5e9;--likec4-relation-labelBg: #082f49;--likec4-relation-labelColor: #38bdf8}:where([data-likec4-color=sky][data-compound-depth="1"]){--likec4-element-fill: #086392;--likec4-element-stroke: #084f76}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="1"]){--likec4-element-fill: #0d5d86;--likec4-element-stroke: #0b4a6c}:where([data-likec4-color=sky][data-compound-depth="2"]){--likec4-element-fill: #0c5e88;--likec4-element-stroke: #0b4b6e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="2"]){--likec4-element-fill: #105579;--likec4-element-stroke: #0e4462}:where([data-likec4-color=sky][data-compound-depth="3"]){--likec4-element-fill: #10597f;--likec4-element-stroke: #0e4767}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="3"]){--likec4-element-fill: #134e6c;--likec4-element-stroke: #103e57}:where([data-likec4-color=sky][data-compound-depth="4"]){--likec4-element-fill: #135475;--likec4-element-stroke: #11435f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="4"]){--likec4-element-fill: #154660;--likec4-element-stroke: #11384e}:where([data-likec4-color=sky][data-compound-depth="5"]){--likec4-element-fill: #164f6c;--likec4-element-stroke: #133f58}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="5"]){--likec4-element-fill: #163f55;--likec4-element-stroke: #123345}:where([data-likec4-color=sky][data-compound-depth="6"]){--likec4-element-fill: #194a64;--likec4-element-stroke: #153c51}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=sky][data-compound-depth="6"]){--likec4-element-fill: #17384a;--likec4-element-stroke: #132d3c}:where([data-likec4-color=muted]){--likec4-element-fill: #64748b;--likec4-element-stroke: #475569;--likec4-element-hiContrast: #f8fafc;--likec4-element-loContrast: #cbd5e1;--likec4-compound-title-color: #cbd5e1;--likec4-relation-lineColor: #64748b;--likec4-relation-labelBg: #0f172a;--likec4-relation-labelColor: #cbd5e1}:where([data-likec4-color=muted][data-compound-depth="1"]){--likec4-element-fill: #4e5a6a;--likec4-element-stroke: #384250}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="1"]){--likec4-element-fill: #4b5563;--likec4-element-stroke: #363e4b}:where([data-likec4-color=muted][data-compound-depth="2"]){--likec4-element-fill: #4c5665;--likec4-element-stroke: #363f4c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="2"]){--likec4-element-fill: #474f5c;--likec4-element-stroke: #333a45}:where([data-likec4-color=muted][data-compound-depth="3"]){--likec4-element-fill: #4a5360;--likec4-element-stroke: #353d48}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="3"]){--likec4-element-fill: #424a54;--likec4-element-stroke: #30363f}:where([data-likec4-color=muted][data-compound-depth="4"]){--likec4-element-fill: #48505b;--likec4-element-stroke: #333a44}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="4"]){--likec4-element-fill: #3e444d;--likec4-element-stroke: #2d323a}:where([data-likec4-color=muted][data-compound-depth="5"]){--likec4-element-fill: #454c56;--likec4-element-stroke: #323841}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="5"]){--likec4-element-fill: #393e46;--likec4-element-stroke: #292e34}:where([data-likec4-color=muted][data-compound-depth="6"]){--likec4-element-fill: #434951;--likec4-element-stroke: #30353d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=muted][data-compound-depth="6"]){--likec4-element-fill: #34383e;--likec4-element-stroke: #26292f}:where([data-likec4-color=slate]){--likec4-element-fill: #64748b;--likec4-element-stroke: #475569;--likec4-element-hiContrast: #f8fafc;--likec4-element-loContrast: #cbd5e1;--likec4-compound-title-color: #cbd5e1;--likec4-relation-lineColor: #64748b;--likec4-relation-labelBg: #0f172a;--likec4-relation-labelColor: #cbd5e1}:where([data-likec4-color=slate][data-compound-depth="1"]){--likec4-element-fill: #4e5a6a;--likec4-element-stroke: #384250}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="1"]){--likec4-element-fill: #4b5563;--likec4-element-stroke: #363e4b}:where([data-likec4-color=slate][data-compound-depth="2"]){--likec4-element-fill: #4c5665;--likec4-element-stroke: #363f4c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="2"]){--likec4-element-fill: #474f5c;--likec4-element-stroke: #333a45}:where([data-likec4-color=slate][data-compound-depth="3"]){--likec4-element-fill: #4a5360;--likec4-element-stroke: #353d48}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="3"]){--likec4-element-fill: #424a54;--likec4-element-stroke: #30363f}:where([data-likec4-color=slate][data-compound-depth="4"]){--likec4-element-fill: #48505b;--likec4-element-stroke: #333a44}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="4"]){--likec4-element-fill: #3e444d;--likec4-element-stroke: #2d323a}:where([data-likec4-color=slate][data-compound-depth="5"]){--likec4-element-fill: #454c56;--likec4-element-stroke: #323841}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="5"]){--likec4-element-fill: #393e46;--likec4-element-stroke: #292e34}:where([data-likec4-color=slate][data-compound-depth="6"]){--likec4-element-fill: #434951;--likec4-element-stroke: #30353d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=slate][data-compound-depth="6"]){--likec4-element-fill: #34383e;--likec4-element-stroke: #26292f}:where([data-likec4-color=gray]){--likec4-element-fill: #737373;--likec4-element-stroke: #525252;--likec4-element-hiContrast: #fafafa;--likec4-element-loContrast: #d4d4d4;--likec4-compound-title-color: #d4d4d4;--likec4-relation-lineColor: #6E6E6E;--likec4-relation-labelBg: #18191b;--likec4-relation-labelColor: #C6C6C6}:where([data-likec4-color=gray][data-compound-depth="1"]){--likec4-element-fill: #595959;--likec4-element-stroke: #3f3f3f}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="1"]){--likec4-element-fill: #545454;--likec4-element-stroke: #3c3c3c}:where([data-likec4-color=gray][data-compound-depth="2"]){--likec4-element-fill: #555555;--likec4-element-stroke: #3d3d3d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="2"]){--likec4-element-fill: #4e4e4e;--likec4-element-stroke: #383838}:where([data-likec4-color=gray][data-compound-depth="3"]){--likec4-element-fill: #525252;--likec4-element-stroke: #3a3a3a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="3"]){--likec4-element-fill: #484848;--likec4-element-stroke: #343434}:where([data-likec4-color=gray][data-compound-depth="4"]){--likec4-element-fill: #4e4e4e;--likec4-element-stroke: #383838}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="4"]){--likec4-element-fill: #434343;--likec4-element-stroke: #303030}:where([data-likec4-color=gray][data-compound-depth="5"]){--likec4-element-fill: #4b4b4b;--likec4-element-stroke: #353535}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="5"]){--likec4-element-fill: #3d3d3d;--likec4-element-stroke: #2b2b2b}:where([data-likec4-color=gray][data-compound-depth="6"]){--likec4-element-fill: #474747;--likec4-element-stroke: #333333}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray][data-compound-depth="6"]){--likec4-element-fill: #373737;--likec4-element-stroke: #272727}:where([data-likec4-color=red]){--likec4-element-fill: #AC4D39;--likec4-element-stroke: #853A2D;--likec4-element-hiContrast: #FBD3CB;--likec4-element-loContrast: #f5b2a3;--likec4-compound-title-color: #f5b2a3;--likec4-relation-lineColor: #AC4D39;--likec4-relation-labelBg: #b91c1c;--likec4-relation-labelColor: #f5b2a3}:where([data-likec4-color=red][data-compound-depth="1"]){--likec4-element-fill: #803e30;--likec4-element-stroke: #632f26}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="1"]){--likec4-element-fill: #773d30;--likec4-element-stroke: #5c2e26}:where([data-likec4-color=red][data-compound-depth="2"]){--likec4-element-fill: #793d31;--likec4-element-stroke: #5e2e26}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="2"]){--likec4-element-fill: #6c3a2f;--likec4-element-stroke: #542c25}:where([data-likec4-color=red][data-compound-depth="3"]){--likec4-element-fill: #723c31;--likec4-element-stroke: #582e27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="3"]){--likec4-element-fill: #62372e;--likec4-element-stroke: #4c2a24}:where([data-likec4-color=red][data-compound-depth="4"]){--likec4-element-fill: #6a3b31;--likec4-element-stroke: #522d27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="4"]){--likec4-element-fill: #58342c;--likec4-element-stroke: #442823}:where([data-likec4-color=red][data-compound-depth="5"]){--likec4-element-fill: #633a31;--likec4-element-stroke: #4d2c27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="5"]){--likec4-element-fill: #4f312a;--likec4-element-stroke: #3d2521}:where([data-likec4-color=red][data-compound-depth="6"]){--likec4-element-fill: #5d3931;--likec4-element-stroke: #482b27}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=red][data-compound-depth="6"]){--likec4-element-fill: #462d28;--likec4-element-stroke: #36231f}:where([data-likec4-color=green]){--likec4-element-fill: #428a4f;--likec4-element-stroke: #2d5d39;--likec4-element-hiContrast: #f8fafc;--likec4-element-loContrast: #c2f0c2;--likec4-compound-title-color: #c2f0c2;--likec4-relation-lineColor: #15803d;--likec4-relation-labelBg: #052e16;--likec4-relation-labelColor: #22c55e}:where([data-likec4-color=green][data-compound-depth="1"]){--likec4-element-fill: #35683e;--likec4-element-stroke: #24462d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="1"]){--likec4-element-fill: #34613c;--likec4-element-stroke: #24412b}:where([data-likec4-color=green][data-compound-depth="2"]){--likec4-element-fill: #35623d;--likec4-element-stroke: #24422c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="2"]){--likec4-element-fill: #325839;--likec4-element-stroke: #223c29}:where([data-likec4-color=green][data-compound-depth="3"]){--likec4-element-fill: #345d3c;--likec4-element-stroke: #243e2a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="3"]){--likec4-element-fill: #305136;--likec4-element-stroke: #213626}:where([data-likec4-color=green][data-compound-depth="4"]){--likec4-element-fill: #33573a;--likec4-element-stroke: #233b29}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="4"]){--likec4-element-fill: #2d4932;--likec4-element-stroke: #1f3123}:where([data-likec4-color=green][data-compound-depth="5"]){--likec4-element-fill: #335238;--likec4-element-stroke: #223728}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="5"]){--likec4-element-fill: #2b422f;--likec4-element-stroke: #1d2c21}:where([data-likec4-color=green][data-compound-depth="6"]){--likec4-element-fill: #324d37;--likec4-element-stroke: #223426}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=green][data-compound-depth="6"]){--likec4-element-fill: #283a2b;--likec4-element-stroke: #1b271e}:where([data-likec4-color=amber]){--likec4-element-fill: #A35829;--likec4-element-stroke: #7E451D;--likec4-element-hiContrast: #FFE0C2;--likec4-element-loContrast: #f9b27c;--likec4-compound-title-color: #f9b27c;--likec4-relation-lineColor: #b45309;--likec4-relation-labelBg: #78350f;--likec4-relation-labelColor: #FFE0C2}:where([data-likec4-color=amber][data-compound-depth="1"]){--likec4-element-fill: #794524;--likec4-element-stroke: #5e361a}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="1"]){--likec4-element-fill: #704225;--likec4-element-stroke: #56331b}:where([data-likec4-color=amber][data-compound-depth="2"]){--likec4-element-fill: #724325;--likec4-element-stroke: #58341b}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="2"]){--likec4-element-fill: #663e25;--likec4-element-stroke: #4e301b}:where([data-likec4-color=amber][data-compound-depth="3"]){--likec4-element-fill: #6b4126;--likec4-element-stroke: #52321c}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="3"]){--likec4-element-fill: #5c3a25;--likec4-element-stroke: #472d1b}:where([data-likec4-color=amber][data-compound-depth="4"]){--likec4-element-fill: #643e27;--likec4-element-stroke: #4d301d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="4"]){--likec4-element-fill: #533624;--likec4-element-stroke: #402a1a}:where([data-likec4-color=amber][data-compound-depth="5"]){--likec4-element-fill: #5d3c28;--likec4-element-stroke: #472f1d}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="5"]){--likec4-element-fill: #493223;--likec4-element-stroke: #38261a}:where([data-likec4-color=amber][data-compound-depth="6"]){--likec4-element-fill: #563a28;--likec4-element-stroke: #422d1e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=amber][data-compound-depth="6"]){--likec4-element-fill: #412d21;--likec4-element-stroke: #322319}:where([data-likec4-color=indigo]){--likec4-element-fill: #6366f1;--likec4-element-stroke: #4f46e5;--likec4-element-hiContrast: #eef2ff;--likec4-element-loContrast: #c7d2fe;--likec4-compound-title-color: #c7d2fe;--likec4-relation-lineColor: #6366f1;--likec4-relation-labelBg: #1e1b4b;--likec4-relation-labelColor: #818cf8}:where([data-likec4-color=indigo][data-compound-depth="1"]){--likec4-element-fill: #2529e1;--likec4-element-stroke: #2d24c2}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="1"]){--likec4-element-fill: #2529d3;--likec4-element-stroke: #3028b2}:where([data-likec4-color=indigo][data-compound-depth="2"]){--likec4-element-fill: #2428d7;--likec4-element-stroke: #3028b5}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="2"]){--likec4-element-fill: #282bbf;--likec4-element-stroke: #312aa1}:where([data-likec4-color=indigo][data-compound-depth="3"]){--likec4-element-fill: #292cc8;--likec4-element-stroke: #322ba9}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="3"]){--likec4-element-fill: #2b2dac;--likec4-element-stroke: #312b91}:where([data-likec4-color=indigo][data-compound-depth="4"]){--likec4-element-fill: #2d30ba;--likec4-element-stroke: #342e9e}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="4"]){--likec4-element-fill: #2c2f99;--likec4-element-stroke: #302c82}:where([data-likec4-color=indigo][data-compound-depth="5"]){--likec4-element-fill: #3133ac;--likec4-element-stroke: #363092}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="5"]){--likec4-element-fill: #2d2f87;--likec4-element-stroke: #2f2b73}:where([data-likec4-color=indigo][data-compound-depth="6"]){--likec4-element-fill: #34369f;--likec4-element-stroke: #373287}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=indigo][data-compound-depth="6"]){--likec4-element-fill: #2d2e76;--likec4-element-stroke: #2e2b65}.paikoy2{--backdrop-opacity: 0%;--backdrop-blur: 0px;box-sizing:border-box;margin:0;padding:0;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:100%;max-height:100%;background:transparent;border:0 solid transparent}.paikoy2::backdrop{-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur));background-color:rgb(36 36 36 / var(--backdrop-opacity))}.paikoy3{--paikoy0: var(--mantine-color-body);--paikoy1: linear-gradient(180deg, var(--likec4-element-fill), var(--likec4-element-fill) 4px, transparent 4px);position:absolute;pointer-events:all;gap:var(--mantine-spacing-lg);justify-content:stretch;background-color:var(--paikoy0);background-image:var(--paikoy1);border-top-color:var(--likec4-element-fill)}:where([data-mantine-color-scheme=dark]) .paikoy3{--paikoy0: var(--mantine-color-dark-6);--paikoy1: linear-gradient(180deg, color-mix(in srgb, var(--likec4-element-fill) 15%, transparent), transparent 80px), linear-gradient(180deg, var(--likec4-element-fill), var(--likec4-element-fill) 4px, transparent 4px) }.paikoy4{flex:0;cursor:move}:where(.paikoy3) .react-flow__attribution{display:none}.paikoy5{display:block;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:600;font-size:24px;line-height:var(--mantine-line-height-xs)}.paikoy6{flex:0 0 40px;height:40px;width:40px;display:flex;align-items:center;justify-content:center;align-self:flex-start;cursor:move}:where([data-mantine-color-scheme=dark]) .paikoy6{mix-blend-mode:hard-light}.paikoy6 svg,.paikoy6 img{width:100%;height:auto;max-height:100%;pointer-events:none;filter:drop-shadow(0 0 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 8px rgb(0 0 0 / 5%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))}.paikoy6 img{object-fit:contain}.paikoy9{--paikoy7: var(--mantine-color-dark-1);width:100%;background:var(--mantine-color-body);border-radius:var(--mantine-radius-sm);padding:10px 8px;transition:all .13s cubic-bezier(.5,0,.2,1);border:1px solid var(--mantine-color-default-border)}.paikoy9:hover{--paikoy8: var(--mantine-color-dark-1);--paikoy7: var(--mantine-color-default-color);background:var(--mantine-color-default-hover)}:where([data-mantine-color-scheme=dark]) .paikoy9{background:var(--mantine-color-dark-6)}:where([data-mantine-color-scheme=light]) .paikoy9{--paikoy8: var(--mantine-color-gray-6);--paikoy7: var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=light]) .paikoy9:hover{--paikoy8: var(--mantine-color-gray-7)}.paikoy9 .mantine-ThemeIcon-root{--ti-size: 22px;transition:all .13s cubic-bezier(.5,0,.2,1);color:var(--paikoy8, var(--mantine-color-dark-2))}.paikoy9 .mantine-ThemeIcon-root:hover{color:var(--mantine-color-default-color)}.paikoy9>*{transition:all .13s cubic-bezier(.5,0,.2,1)}.paikoy9:hover>*{transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1.6px)}.paikoya{transition:all .13s cubic-bezier(.5,0,.2,1);color:var(--paikoy7, var(--mantine-color-gray-7));font-size:15px;font-weight:500;line-height:1.4}.paikoyb{flex:1;display:flex;flex-direction:column;justify-content:stretch;overflow:hidden;gap:var(--mantine-spacing-sm)}.paikoyc{background:var(--mantine-color-gray-1);border-radius:var(--mantine-radius-sm);flex-wrap:nowrap;gap:6px;padding:4px}:where([data-mantine-color-scheme=dark]) .paikoyc{background:var(--mantine-color-dark-7)}.paikoyd{font-size:var(--mantine-font-size-xs);font-weight:500;flex-grow:1;padding:6px 8px;transition:all .13s cubic-bezier(.5,0,.2,1);border-radius:var(--mantine-radius-sm);color:var(--mantine-color-gray-7)}.paikoyd:hover{transition-timing-function:cubic-bezier(0,0,.4,1);color:var(--mantine-color-default-color);background:var(--mantine-color-gray-3)}.paikoyd[data-active]{transition:none;background:var(--mantine-color-white);box-shadow:var(--mantine-shadow-xs);color:var(--mantine-color-default-color)}:where([data-mantine-color-scheme=dark]) .paikoyd{color:var(--mantine-color-dark-1)}:where([data-mantine-color-scheme=dark]) .paikoyd:hover{color:var(--mantine-color-white);background:var(--mantine-color-dark-6)}:where([data-mantine-color-scheme=dark]) .paikoyd:is([data-active]){color:var(--mantine-color-white);background:var(--mantine-color-dark-5)}.paikoye{flex:1;overflow:hidden;position:relative}.paikoye:not(:has(.mantine-ScrollArea-root)){padding-left:4px;padding-right:4px}.paikoye .mantine-ScrollArea-root{width:100%;height:100%}.paikoye .mantine-ScrollArea-viewport>div{padding-left:4px;padding-right:4px}.paikoyf{flex:1;display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:min-content max-content;gap:calc(1.25rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));align-items:baseline;justify-items:stretch}.paikoyg{justify-self:end}.paikoyh{transition:all .13s cubic-bezier(.5,0,.2,1);border:1px dashed var(--mantine-color-default-border);border-radius:var(--mantine-radius-sm);min-height:30px;padding:3px 16px 3px 3px;cursor:pointer;color:var(--mantine-color-gray-7)}.paikoyh:hover{transition-timing-function:cubic-bezier(0,0,.4,1);border-style:solid;color:var(--mantine-color-default-color);background:var(--mantine-color-default-hover)}:where([data-mantine-color-scheme=dark]) .paikoyh{color:var(--mantine-color-dark-1)}.paikoyh>*{transition:all .13s cubic-bezier(.5,0,.2,1)}.paikoyh:hover>*{transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}.paikoyi{position:absolute;width:14px;height:14px;border:3.5px solid var(--mantine-color-dark-3);border-top:none;border-left:none;border-radius:2px;bottom:2px;right:2px;transition:all .13s cubic-bezier(.5,0,.2,1);cursor:se-resize}.paikoyi:hover{border-width:4px;border-color:var(--mantine-color-dark-1)}._6nb9wd0[data-level="1"]{margin-bottom:calc(1rem * var(--mantine-scale))}._6nb9wd1{cursor:default;margin-top:0;margin-bottom:0}._6nb9wd2{transition:all .13s cubic-bezier(.5,0,.2,1);color:var(--mantine-color-gray-7)}._6nb9wd2:hover{transition-timing-function:cubic-bezier(0,0,.4,1)}:where([data-mantine-color-scheme=dark]) ._6nb9wd2{color:var(--mantine-color-dark-1)}._6nb9wd2>*{transition:all .13s cubic-bezier(.5,0,.2,1)}._6nb9wd2:hover>:not([data-no-transform]){transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}.mantine-Button-root:hover ._6nb9wd2>:not([data-no-transform]){transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}._6nb9wd4{cursor:pointer;width:100%;justify-content:stretch;flex-wrap:nowrap;height:calc(2.25rem * var(--mantine-scale));padding-inline-start:calc(1rem * var(--mantine-scale));padding-inline-end:calc(.625rem * var(--mantine-scale));border-radius:var(--mantine-radius-sm);align-items:center;color:var(--mantine-color-gray-7)}._6nb9wd4:hover{background:var(--mantine-color-gray-light-hover)}:where([data-mantine-color-scheme=dark]) ._6nb9wd4{color:var(--mantine-color-gray-light-color)}._6nb9wd4 .tabler-icon{transition:all .13s cubic-bezier(.5,0,.2,1);width:90%;opacity:.65}._2h8g8h1,.react-flow.not-initialized{opacity:0}.react-flow._2h8g8h0{--xy-background-color: var(--likec4-background-color);--xy-background-pattern-color: var(--likec4-background-pattern-color)}.react-flow._2h8g8h0 .react-flow__pane{-webkit-user-select:none}.react-flow._2h8g8h0 .xyflow__viewport{will-change:transform}.react-flow._2h8g8h0._2h8g8h3{--likec4-background-color: transparent !important;--xy-background-color: transparent !important;background-color:transparent!important}:where(.react-flow._2h8g8h0,._2h8g8h3) .react-flow__attribution{display:none}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){._2h8g8h0{--likec4-safari-animation-hook: }}@keyframes nrg7w95{0%{stroke-dashoffset:46}to{stroke-dashoffset:10}}.nrg7w91{--nrg7w90: black;--xy-edge-stroke: var(--likec4-relation-lineColor);--xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), var(--nrg7w90) 35%);--xy-edge-label-color: color-mix(in srgb, var(--likec4-relation-labelColor), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 40%);--xy-edge-stroke-width: 3}:where([data-mantine-color-scheme=dark]) .nrg7w91{--nrg7w90: white;--xy-edge-label-color: var(--likec4-relation-labelColor);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 50%)}:where(.react-flow__edge.selected) .nrg7w91{--xy-edge-stroke: var(--xy-edge-stroke-selected);--xy-edge-stroke-width: 3}.nrg7w91:is([data-edge-hovered=true],[data-edge-active=true]){--xy-edge-stroke: var(--xy-edge-stroke-selected);--xy-edge-stroke-width: 3}:where(.react-flow__edge.selected) .nrg7w91[data-edge-hovered=true]{--xy-edge-stroke-width: 4}._2h8g8h0 .react-flow__edges>svg{mix-blend-mode:plus-lighter}:where([data-mantine-color-scheme=light]) ._2h8g8h0 .react-flow__edges>svg{mix-blend-mode:screen}._2h8g8h0 .react-flow__edges>svg:has(.nrg7w92){opacity:.6;transition:opacity .6s ease-in-out,filter .6s ease-in-out;transition-delay:.2s;filter:grayscale(.85) var(--likec4-safari-animation-hook, blur(1px));will-change:opacity,filter}.nrg7w93{stroke-opacity:.08;transition-property:stroke-width,stroke-opacity;transition-duration:155ms;transition-timing-function:ease-out}:where(.react-flow__edge.selected,[data-edge-active=true],[data-edge-hovered=true]) .nrg7w93{stroke-width:calc(var(--xy-edge-stroke-width) + 8);stroke-opacity:.15}.nrg7w94{fill:var(--xy-edge-stroke);stroke:var(--xy-edge-stroke)}.nrg7w96{animation-duration:.8s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both;stroke-dashoffset:10}:where([data-edge-hovered=true]) .nrg7w96{animation-name:nrg7w95;animation-delay:.45s;transition:stroke .13s ease-out,stroke-width .13s ease-out}:where(.react-flow__edge.selected,[data-edge-active=true],[data-edge-animated=true]) .nrg7w96{animation-name:nrg7w95;animation-delay:0ms;transition:stroke .13s ease-out,stroke-width .13s ease-out}:where([data-edge-dir=back]) .nrg7w96{animation-direction:reverse}.nrg7w92 .nrg7w96{animation-play-state:paused}._1fqbh3j0{align-self:stretch;flex:0 0 auto;font-weight:600;font-size:calc(.875rem * var(--mantine-scale));line-height:1;padding:5px;text-align:center;min-width:22px;border-top-left-radius:4px;border-bottom-left-radius:4px;background-color:color-mix(in srgb,var(--likec4-relation-labelBg),var(--nrg7w90) 5%);font-variant-numeric:tabular-nums}:where([data-mantine-color-scheme=dark]) :where([data-likec4-color=gray]) ._1fqbh3j0{background-color:color-mix(in srgb,var(--likec4-relation-labelBg),var(--nrg7w90) 15%)}:where([data-edge-active=true],[data-edge-hovered=true]) ._1fqbh3j0{background-color:transparent}._1fqbh3j4{--_1fqbh3j3: translate(0,0);top:0;left:0;position:absolute;pointer-events:all;cursor:pointer;width:auto;height:auto;background-color:var(--xy-edge-label-background-color);border-radius:4px;border:0px solid transparent;mix-blend-mode:plus-lighter;transform:var(--_1fqbh3j3);transition:all .13s cubic-bezier(.5,0,.2,1)}._1fqbh3j4[data-edge-hovered=true]{mix-blend-mode:normal;transition:all .14s cubic-bezier(.5,0,.2,1);transform:var(--_1fqbh3j3) scale(1.12)}._1fqbh3j4:is([data-edge-dimmed=true]){opacity:.3;transition:opacity .6s ease-in-out,filter .6s ease-in-out;transition-delay:.2s;filter:grayscale(.85) var(--likec4-safari-animation-hook, blur(1px));will-change:opacity,filter}:where([data-mantine-color-scheme=light]) ._1fqbh3j4{mix-blend-mode:screen}._1fqbh3j5{font-family:var(--likec4-font-family);padding:3px 5px 5px;display:flex;flex-direction:column;align-items:center;width:max-content;max-width:100%;gap:calc(.25rem * var(--mantine-scale));color:var(--xy-edge-label-color)}._1fqbh3j5:has(._1fqbh3j0){flex-direction:row;padding:0;gap:0}._1fqbh3j6{display:contents}._1fqbh3j6:empty{display:none!important}._1fqbh3j5:has(._1fqbh3j0) ._1fqbh3j6{flex:1;display:flex;flex-direction:column;align-items:center;padding:1px 5px 5px}._1fqbh3j7{white-space-collapse:preserve-breaks;font-size:calc(.875rem * var(--mantine-scale));line-height:1.185;color:var(--xy-edge-label-color)}._1fqbh3j8{color:var(--xy-edge-label-color);text-align:center;white-space-collapse:preserve-breaks;font-size:calc(.6875rem * var(--mantine-scale));line-height:1;opacity:.75}._1fqbh3j5:has(._1fqbh3j0) ._1fqbh3j7{padding:2px 5px 4px 2px}._1fqbh3j9{position:absolute;top:4px;right:4px;z-index:9}._1fqbh3ja{--text-fz: var(--mantine-font-size-sm);-webkit-user-select:all;user-select:all;text-align:left;white-space-collapse:preserve-breaks;text-wrap:pretty;line-height:1.25}._1fqbh3jb{--ai-bg: var(--likec4-relation-labelBg);--ai-hover: color-mix(in srgb , var(--likec4-relation-labelBg), var(--nrg7w90) 10%);z-index:calc(var(--layer-overlays, 1) + 1);pointer-events:all;color:var(--xy-edge-label-color);cursor:pointer;opacity:.75;transition:all .13s cubic-bezier(.5,0,.2,1);background-color:var(--ai-bg)}._1fqbh3jb:hover{transform:translateY(1px) scale(1.15)}._1fqbh3jb:active{transform:translateY(-1px) scale(.9)}:where([data-edge-hovered=true]) ._1fqbh3jb{opacity:1}._1fqbh3jb .tabler-icon{width:80%;height:80%;stroke-width:2}@media (min-width: 62em){._1fqbh3ja{--text-fz: var(--mantine-font-size-md)}}._14fvrz60{position:absolute;top:calc(100% - 28px);left:0;width:100%;min-height:28px;display:flex;justify-content:center;align-items:center;z-index:10}._14fvrz61{display:flex;justify-content:center;align-items:center}._14fvrz62{--ai-bg-idle: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);--ai-bg-container-hover: color-mix(in srgb , var(--likec4-element-fill), transparent 50%);--ai-bg: var(--ai-bg-idle);--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));--ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));color:var(--likec4-element-loContrast);opacity:.75;transition:all .13s cubic-bezier(.5,0,.2,1);background:var(--ai-bg);box-shadow:1px 1px 3px 0 transparent}:where([data-hovered=true]) ._14fvrz62{--ai-bg: var(--ai-bg-hover);opacity:1;box-shadow:1px 1px 3px #0003}._4fi0ne0{width:100%;height:100%;border:3px dashed var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);display:flex;justify-content:center;align-items:center}._1smoows1{--_1smoows0: color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill));position:relative;width:100%;height:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:center}._1smoows1:after{content:" ";position:absolute;top:100%;left:0;right:0;height:20px;background:transparent;pointer-events:all}.react-flow__node:has(._1smoows2){opacity:.25;transition:opacity .4s ease-in-out,filter .5s ease-in-out;transition-delay:50ms;filter:grayscale(.85) var(--likec4-safari-animation-hook, blur(2px));will-change:opacity,filter}@keyframes _4zok2q0{0%{stroke-opacity:.8}to{stroke-opacity:.5}}._4zok2q2{--_4zok2q1: var(--likec4-element-loContrast);stroke:var(--_4zok2q1);fill:none;transform-origin:center center;stroke-width:6;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate;stroke-opacity:.8;visibility:hidden;pointer-events:none}:where(.react-flow__node.selected) ._4zok2q2{visibility:visible;animation-name:var(--likec4-safari-animation-hook, _4zok2q0)}:where(.react-flow__node:focus-visible,._1smoows1:focus-visible) ._4zok2q2{stroke-width:10;stroke:var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));visibility:visible}:where([data-likec4-shape=queue],[data-likec4-shape=cylinder],[data-likec4-shape=storage]) ._4zok2q2{stroke-width:10}:where([data-mantine-color-scheme=light]) ._4zok2q2{--_4zok2q1: color-mix(in srgb, var(--likec4-element-fill) 50%, #3c3c3c)}._4zok2q3{fill:var(--likec4-element-fill)}._4zok2q4{fill:var(--likec4-element-stroke)}._4zok2q5{fill:var(--_1smoows0, color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill)))}._4zok2q7{top:0;left:0;position:absolute;width:100%;height:100%;pointer-events:none;fill:var(--likec4-element-fill);stroke:var(--likec4-element-stroke);overflow:visible;z-index:-1}._4zok2q8{transform-origin:50% 25%;transform:translate(14px,14px) perspective(300px) translateZ(-8px);filter:brightness(.65) saturate(.8);stroke:none}:where([data-likec4-shape=cylinder],[data-likec4-shape=storage]) ._4zok2q8{transform-origin:50% 100%}:where([data-likec4-shape=queue]) ._4zok2q8{transform-origin:75% 25%}._4zok2q8 ._4zok2q5{fill:var(--likec4-element-fill)}._4zok2q9{--_4zok2q6: drop-shadow(0 2px 1px rgba(0, 0, 0, .21)) drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-element-stroke) 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, .1)) ;filter:var(--_4zok2q6);transition:fill .12s linear,filter .13s cubic-bezier(.5,0,.2,1);transition-delay:0ms}:where([data-hovered=true]) ._4zok2q9{--_4zok2q6: drop-shadow(0 2px 1px rgba(0, 0, 0, .25)) drop-shadow(0 8px 3px rgba(0, 0, 0, .1)) drop-shadow(0 10px 10px rgba(0, 0, 0, .05)) }:where(.react-flow__node.selected,.react-flow__node:focus-visible,._1smoows1:focus-visible) ._4zok2q9{--_4zok2q6: none}.fo05293{flex:0 0 auto;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;text-align:var(--fo05291);font-weight:500;font-size:19px;line-height:1.15;text-wrap:balance;color:var(--likec4-element-hiContrast);white-space-collapse:preserve-breaks}.fo05294{flex:0 1 auto;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:400;font-size:14px;line-height:1.2;text-align:var(--fo05291);text-wrap:pretty;color:var(--likec4-element-loContrast);white-space-collapse:preserve-breaks;text-overflow:ellipsis;overflow:hidden}:where(.fo05290) .fo05294{text-wrap:wrap}.fo05295{flex:0 0 auto;font-family:var(--likec4-element-font-family);font-optical-sizing:auto;font-style:normal;font-weight:400;font-size:12px;line-height:1.125;text-align:var(--fo05291);text-wrap:balance;opacity:.92;color:var(--likec4-element-loContrast)}:where([data-hovered=true]) .fo05295{opacity:1}.fo05296{--fo05292: 48px;flex:1;height:fit-content;display:flex;align-items:center;justify-content:center;flex-direction:row;padding:calc(1.5rem * var(--mantine-scale));overflow:hidden;gap:calc(.625rem * var(--mantine-scale))}:where([data-likec4-shape=queue],[data-likec4-shape=mobile]) .fo05296{padding-left:40px;padding-right:20px}:where([data-likec4-shape=cylinder],[data-likec4-shape=storage]) .fo05296{padding-top:30px}:where([data-likec4-shape=browser]) .fo05296{padding-top:32px;padding-bottom:28px}.likec4-element-node:not(:is([data-likec4-shape=queue],[data-likec4-shape=mobile])) .fo05296:is(.fo05290){padding-left:24px;padding-right:18px}.fo05296:has(.fo05294,.fo05295){--fo05292: 60px;gap:calc(1rem * var(--mantine-scale))}.fo05297{--fo05291: center;height:fit-content;width:max-content;display:flex;flex-direction:column;align-items:stretch;justify-content:center;flex-wrap:nowrap;overflow:hidden;gap:calc(.5rem * var(--mantine-scale))}.fo05297:has(.fo05294):has(.fo05295){gap:calc(.375rem * var(--mantine-scale))}:where(.fo05290) .fo05297{--fo05291: left;min-width:calc(100% - 160px);align-items:flex-start}.fo05298{flex:0 0 var(--fo05292);height:var(--fo05292);width:var(--fo05292);display:flex;align-items:center;justify-content:center;mix-blend-mode:hard-light;align-self:flex-start}.fo05298 svg,.fo05298 img{width:100%;height:auto;max-height:100%;pointer-events:none;filter:drop-shadow(0 0 3px rgb(0 0 0 / 12%)) drop-shadow(0 1px 8px rgb(0 0 0 / 8%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))}.fo05298 img{object-fit:contain}@keyframes _7cmew19{0%{opacity:.6}to{opacity:.3}}.react-flow__node:has(._7cmew15){opacity:.25;transition:opacity .6s ease-in-out,filter .6s ease-in-out;transition-delay:.2s;filter:grayscale(.85) var(--likec4-safari-animation-hook, blur(1px));will-change:opacity,filter}._7cmew16{--_7cmew11: 6px;--_7cmew14: 3px;position:relative;width:100%;height:100%;padding:0;margin:0;border:0px solid transparent}._7cmew17{border-radius:var(--_7cmew11);box-shadow:0 4px 10px .5px #0000001a,0 2px 2px -1px #0006;padding:0;margin:0;transition:all .25s cubic-bezier(.5,0,.2,1);cursor:default;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;border:0px solid transparent;background:var(--likec4-element-fill);background-clip:padding-box}:where(.react-flow__node.dragging) ._7cmew17{box-shadow:none}:where(.react-flow__node:focus-visible) ._7cmew17{transition-duration:0ms;outline:3px solid var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));outline-offset:calc(.09375rem * var(--mantine-scale))}:where([data-compound-transparent=true]) ._7cmew17{opacity:var(--_7cmew10);border-width:calc(var(--_7cmew14) - 1px)}:where([data-compound-transparent=true]:is([data-hovered=true])) ._7cmew17{transition-delay:.15s;transition-duration:.4s}:where([data-mantine-color-scheme=dark] [data-compound-transparent=true]){--_compound-border-color: color-mix(in srgb, var(--likec4-compound-title-color) 25%, var(--likec4-element-stroke))}:where([data-mantine-color-scheme=light] [data-compound-transparent=true]){--_compound-title-color: var(--likec4-element-stroke)}._7cmew18{--_7cmew13: var(--_compound-border-color,var(--likec4-element-stroke));border-radius:var(--_7cmew11);padding:0;margin:0;transition:all .25s cubic-bezier(.5,0,.2,1);cursor:default;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:transparent;border-style:dashed;border-width:var(--_7cmew14);border-color:color-mix(in srgb,var(--_7cmew13),transparent var(--_7cmew12, 5%))}._7cmew1c{--_7cmew1a: var(--likec4-element-loContrast);--_7cmew1b: 6;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;visibility:hidden}:where(.react-flow__node.selected:not(:focus-visible)) ._7cmew1c{visibility:visible}:where(.react-flow__node:focus-within:not(.selected)) ._7cmew1c{--_7cmew1a: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));--_7cmew1b: 8}:where([data-mantine-color-scheme=light]) ._7cmew1c{--_7cmew1a: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000)}._7cmew1c rect{stroke:var(--_7cmew1a);transform-origin:center center;stroke-width:var(--_7cmew1b);animation-duration:.8s;animation-name:_7cmew19;animation-iteration-count:infinite;animation-direction:alternate;fill:none}._1dn4as0{display:flex;align-items:center;gap:6px;padding-left:14px;padding-top:6px;min-height:30px;padding-right:2px}:where(.react-flow__node.draggable) ._1dn4as0{cursor:grab}.likec4-compound-node:has(.compound-action) ._1dn4as0{padding-left:30px}._1dn4as1{flex:1;font-family:var(--likec4-compound-font-family);font-weight:600;font-size:calc(.9375rem * var(--mantine-scale));text-transform:uppercase;letter-spacing:.2px;color:var(--_compound-title-color,var(--likec4-compound-title-color));mix-blend-mode:screen}:where([data-mantine-color-scheme=light]) ._1dn4as1{mix-blend-mode:darken}._9mmte0{margin:0}._9mmte1:hover{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) ._9mmte1:hover{background-color:var(--mantine-color-default-hover);color:var(--mantine-color-white)}._9mmte2{max-height:70vh;max-height:calc(100cqh - 70px)}.k4m020{display:inline-block;font-size:var(--mantine-font-size-sm);font-weight:500;white-space:nowrap;padding:3px 6px;border-radius:3px;background:color-mix(in srgb,var(--likec4-element-fill),transparent 25%);line-height:1.2;color:var(--likec4-element-hiContrast)}:where([data-mantine-color-scheme=light]) .k4m021{background:var(--mantine-color-gray-1)}.k4m021[data-missing]{color:var(--mantine-color-orange-4);background:color-mix(in srgb,var(--mantine-color-orange-8) 15%,transparent);border-color:color-mix(in srgb,var(--mantine-color-orange-5) 20%,transparent)}:where([data-mantine-color-scheme=light]) .k4m021[data-missing]{color:var(--mantine-color-orange-8)}.k4m022{flex:1 1 100%;position:relative;width:100%;height:100%;background:var(--mantine-color-body);border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-sm)}:where([data-mantine-color-scheme=light]) .k4m022{border-color:var(--mantine-color-gray-3);background:var(--mantine-color-gray-1)}.k4m023:before{content:"scope:";position:absolute;top:0;left:8px;font-size:9px;font-weight:500;line-height:1;color:var(--mantine-color-dimmed);opacity:.85;transform:translateY(-100%) translateY(-2px)}:where([data-mantine-color-scheme=light]) .k4m023 .mantine-SegmentedControl-root{background:var(--mantine-color-gray-3)}.k4m024{display:inline-block;font-size:var(--mantine-font-size-xl);font-weight:600;padding:1px 5px;min-width:24px;text-align:center;border-radius:var(--mantine-radius-sm);background:var(--mantine-color-dark-7);color:var(--mantine-color-default-color)}:where([data-mantine-color-scheme=light]) .k4m024{background:var(--mantine-color-gray-4);color:var(--mantine-color-dark-6)}.k4m024[data-zero]{color:var(--mantine-color-dimmed)}:where([data-mantine-color-scheme=light]) .k4m024[data-zero]{background:var(--mantine-color-gray-3)}.k4m024[data-missing]{color:var(--mantine-color-orange-4);background:color-mix(in srgb,var(--mantine-color-orange-8) 20%,transparent)}:where([data-mantine-color-scheme=light]) .k4m024[data-missing]{color:var(--mantine-color-orange-8)}._15ijd1w0{margin-top:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-sm)}._15ijd1w1{display:inline-flex;transition:all .13s cubic-bezier(.5,0,.2,1);border:1px dashed var(--mantine-color-default-border);border-radius:var(--mantine-radius-sm);padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);align-items:center;cursor:pointer;color:var(--mantine-color-gray-7)}._15ijd1w1:hover{transition-timing-function:cubic-bezier(0,0,.4,1);border-style:solid;color:var(--mantine-color-default-color);background:var(--mantine-color-default-hover)}:where([data-mantine-color-scheme=dark]) ._15ijd1w1{color:var(--mantine-color-dark-1)}._15ijd1w1>*{transition:all .13s cubic-bezier(.5,0,.2,1)}._15ijd1w1:hover>*{transition-timing-function:cubic-bezier(0,0,.4,1);transform:translate(1px)}._1njqisf1{--_1njqisf0: 8px;--backdrop-color: 34 34 34;--backdrop-opacity: 0%;--backdrop-blur: 0px;container-name:overlay-dialog;container-type:size;box-sizing:border-box;margin:0;position:fixed;top:5rem;right:4rem;bottom:4rem;left:4rem;display:flex;flex-direction:column;align-items:stretch;width:auto;height:auto;max-width:100%;max-height:100%;background:color-mix(in srgb,var(--mantine-color-default-border),transparent 50%);box-shadow:var(--mantine-shadow-xl);border:0 solid transparent;outline:none;border-radius:var(--_1njqisf0);padding:6px}._1njqisf1::backdrop{cursor:zoom-out;-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur));background-color:rgb(var(--backdrop-color) / var(--backdrop-opacity))}:where([data-mantine-color-scheme=light]) ._1njqisf1{--backdrop-color: 15 15 15}._1njqisf2{border:0 solid transparent;border-radius:calc(var(--_1njqisf0) - 2px);background-color:var(--mantine-color-body);overflow:hidden;flex:1;width:100%;height:100%}@media (max-width: 62em){._1njqisf1{border-radius:var(--mantine-radius-sm);top:2rem;right:2rem;bottom:2rem;left:2rem}}@media (max-width: 48em){._1njqisf1{border:none;top:0;right:0;bottom:0;left:0}}._1cwkcdb0{display:inline-flex;align-items:center;padding:6px 2px 0}._1cwkcdb0 .mantine-Text-root{font-size:var(--mantine-font-size-xs);font-weight:500;line-height:1}._1cwkcdb1{padding-left:4px;grid-column:1}._1cwkcdb2{grid-column:2}._1cwkcdb3{grid-column:3;padding-right:4px}._1cwkcdb4{display:grid;grid-column-start:1;grid-column-end:4;border-bottom:1px solid var(--mantine-color-default-border);margin-bottom:0;padding:0 4px 5px}._1cwkcdb4 .mantine-Text-root{font-size:var(--mantine-font-size-sm);font-weight:400;color:var(--mantine-color-dimmed)}._1cwkcdb5{display:contents}._1cwkcdb5:last-child ._1cwkcdb4{border-bottom:none;margin-bottom:0}._1cwkcdb5>*{transition:all .15s ease-in}._1cwkcdb5:is(:hover,[data-selected=true])>*{transition:all .15s ease-out;cursor:pointer;background-color:var(--mantine-color-default-hover)}._1cwkcdb6{display:grid;grid-template-columns:1fr 30px 1fr;grid-auto-rows:min-content max-content;gap:0;align-items:stretch}._1cwkcdb7{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:min-content max-content;gap:10px 12px;align-items:baseline;justify-items:start}._1cwkcdb8{max-height:70vh;max-height:calc(100cqh - 70px)}.totqfb0{position:absolute;bottom:.5rem;left:50%;transform:translate(-50%);padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem;align-items:center}.totqfb1{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all 175ms ease-in}.totqfb1:hover{transition-timing-function:ease-out;transform:scale(1.1)}.totqfb1:active{transition-duration:.1s;transform:scale(.98) translateY(3px)}.totqfb3{--totqfb2: 35%;--button-bg: color-mix(in srgb, var(--mantine-primary-color-filled), transparent var(--totqfb2));--button-hover: color-mix(in srgb, var(--mantine-primary-color-filled-hover), transparent var(--totqfb2));transition:all 175ms ease-in;background-color:var(--button-bg)}[data-mantine-color-scheme=light] .totqfb3{--totqfb2: 15%}:where(.totqfb1,.totqfb3) .tabler-icon{width:.85em;height:.85em}.totqfb4{position:absolute;margin:0;padding:0;top:0;left:0;width:100%;height:100%;border:2px solid var(--mantine-color-orange-6);pointer-events:none}@media (min-width: 62em){.totqfb0{gap:.6rem}.totqfb4{border-width:4px}}.o1xx0f0{gap:calc(var(--mantine-spacing-xs) / 1.5)}.o1xx0f1{top:var(--likec4-navigation-webview-top, 1rem);left:var(--likec4-navigation-webview-left, 1rem);gap:calc(var(--mantine-spacing-xs) / 1.5);margin:0}.likec4-top-left-panel .action-icon{--ai-size: 2rem}.likec4-top-left-panel .action-icon .tabler-icon{width:65%;height:65%}.o1xx0f2{box-shadow:var(--mantine-shadow-md)}.o1xx0f3 .tabler-icon{width:65%;height:65%}.o1xx0f4{flex:1 1 40%;text-align:center;font-weight:500;padding:4px 6px;font-size:calc(.6875rem * var(--mantine-scale));z-index:1}.o1xx0f5{background:var(--mantine-color-gray-2);border-radius:var(--mantine-radius-sm);border:1px solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .o1xx0f5{background:var(--mantine-color-dark-5);border-color:var(--mantine-color-dark-4)}.o1xx0f6{position:relative;border-radius:var(--mantine-radius-sm);background:var(--mantine-color-gray-3);box-shadow:inset 1px 1px 3px #00000024}:where([data-mantine-color-scheme=dark]) .o1xx0f6{background:var(--mantine-color-dark-7)}.o1xx0f7{position:absolute;width:8px;height:8px;border:2px solid var(--mantine-color-gray-5);border-radius:3px;transform:translate(-50%,-50%)}._1wkb4qe0{bottom:0;left:0;padding:8px;margin:0}._1wkb4qe1{cursor:default;min-width:200px;max-width:calc(100vw - 16px);background-color:color-mix(in srgb,var(--mantine-color-body),transparent 20%);-webkit-backdrop-filter:var(--likec4-safari-animation-hook, blur(8px));backdrop-filter:var(--likec4-safari-animation-hook, blur(8px))}:where([data-mantine-color-scheme=dark]) ._1wkb4qe1{background-color:color-mix(in srgb,var(--mantine-color-dark-6),transparent 20%)}._1wkb4qe3{white-space-collapse:preserve-breaks;color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) ._1wkb4qe3{color:var(--mantine-color-gray-5)}@media (min-width: 48em){._1wkb4qe1{min-width:250px;max-width:90vw}}@media (min-width: 62em){._1wkb4qe1{min-width:350px;max-width:70vw}}.r9c4gg0{bottom:0;right:0;padding:8px;margin:0}.r9c4gg1{cursor:default;-webkit-user-select:none;user-select:none;min-width:200px;max-width:calc(100vw - 20px);background-color:color-mix(in srgb,var(--mantine-color-body),transparent 20%);-webkit-backdrop-filter:var(--likec4-safari-animation-hook, blur(8px));backdrop-filter:var(--likec4-safari-animation-hook, blur(8px))}:where([data-mantine-color-scheme=dark]) .r9c4gg1{background-color:color-mix(in srgb,var(--mantine-color-dark-6),transparent 20%)}.r9c4gg2{padding:calc(var(--mantine-spacing-xs) / 2)}.r9c4gg3{background-color:transparent;transition:all .1s ease-in}.r9c4gg3:hover{transition:all .12s ease-out;background-color:color-mix(in srgb,var(--mantine-primary-color-2),transparent 50%)}:where([data-mantine-color-scheme=dark]) .r9c4gg3:hover{background-color:color-mix(in srgb,var(--mantine-color-dark-3),transparent 60%)}.r9c4gg4{fill:var(--likec4-element-fill);stroke:var(--likec4-element-stroke);stroke-width:1;overflow:visible;width:100%;height:auto;filter:drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%))}.r9c4gg5{--badge-radius: 2px;--badge-fz: 9.5px;--badge-padding-x: 3px;--badge-height: 13.5px;--badge-lh: 1;font-weight:500;letter-spacing:.2px;padding-top:0;padding-bottom:0;text-transform:lowercase;transition:all .15s ease-in-out;cursor:pointer}@media (min-width: 48em){.r9c4gg1{min-width:300px;max-width:65vw}}@media (min-width: 62em){.r9c4gg1{max-width:40vw}}._1fw3wl00{fill:var(--xy-edge-stroke);stroke:var(--xy-edge-stroke);fill-opacity:.75;stroke-width:1;cursor:grab;pointer-events:auto;visibility:hidden}._1fw3wl00:hover{stroke:var(--mantine-primary-color-filled-hover);stroke-width:9;transition:stroke .1s ease-out,stroke-width .1s ease-out}:where(.react-flow__edge.selected,[data-edge-hovered=true]) ._1fw3wl00{visibility:visible;transition:fill-opacity .15s ease-out,stroke .15s ease-out,stroke-width .15s ease-out;transition-delay:50ms;fill-opacity:1;stroke-width:5}._1fw3wl01{cursor:grabbing}._1fw3wl01 *,._1fw3wl01 .react-flow__edge-interaction{cursor:grabbing!important}._1xfux2o0{position:absolute;top:1px;right:1px;z-index:9}._1xfux2o1{--text-fz: var(--mantine-font-size-sm);-webkit-user-select:all;user-select:all;text-align:left;white-space-collapse:preserve-breaks;text-wrap:pretty;line-height:1.25}@media (min-width: 62em){._1xfux2o1{--text-fz: var(--mantine-font-size-md)}}._1g39cqs0{min-width:250px;max-width:min(90vw,500px)}._1g39cqs1{gap:4px}._1g39cqs2{display:block;font-size:10px;font-weight:500;white-space:nowrap;padding:2px 5px;border-radius:2px;background:color-mix(in srgb,var(--likec4-element-fill),transparent 45%);line-height:1.1}:where([data-mantine-color-scheme=dark]) ._1g39cqs2{color:var(--likec4-element-loContrast)}._1g39cqs3{white-space-collapse:preserve-breaks;font-size:var(--mantine-font-size-sm)}.dbuyb70{position:absolute;top:4px;left:2px;z-index:10}.dbuyb71{width:min-content;height:min-content}.dbuyb72{--ai-color-hover: var(--likec4-element-hiContrast);--ai-bg-idle: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);--ai-bg: var(--ai-bg-idle);--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));--ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));opacity:.45;color:var(--_compound-title-color,var(--likec4-element-loContrast));transition:all .13s cubic-bezier(.5,0,.2,1);background:var(--ai-bg);box-shadow:1px 1px 3px 0 transparent}:where([data-mantine-color-scheme=light] [data-compound-transparent=true]) .dbuyb72{--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill), transparent 20%);--ai-hover: color-mix(in srgb , var(--likec4-element-fill), transparent 10%);--ai-bg: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);opacity:.85}:where([data-hovered=true]) .dbuyb72{opacity:1}._1xwo2e70{font-size:calc(.625rem * var(--mantine-scale));font-weight:600;cursor:default;-webkit-user-select:all;user-select:all}.k9mic70{position:absolute;top:2px;right:2px;z-index:10}.k9mic70{--k9mic71: var(--likec4-element-loContrast)}:where([data-mantine-color-scheme=light] [data-compound-transparent=true]) .k9mic70{--k9mic71: var(--likec4-element-stroke)}.k9mic72{--ai-color-hover: var(--likec4-element-hiContrast);--ai-bg-idle: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);--ai-bg: var(--ai-bg-idle);--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));--ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));opacity:.4;pointer-events:all;cursor:pointer;color:var(--_compound-title-color,var(--k9mic71));background-color:var(--ai-bg);box-shadow:1px 1px 3px 0 transparent}.k9mic72:hover{opacity:1;box-shadow:1px 1px 3px #00000026}:where([data-mantine-color-scheme=light] [data-compound-transparent=true]) .k9mic72{--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill), transparent 20%);--ai-hover: color-mix(in srgb , var(--likec4-element-fill), transparent 10%);--ai-bg: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);opacity:.6}.k9mic73{width:min-content;height:min-content}._1jvuy7m0{position:absolute;top:2px;right:2px;z-index:10}:where([data-likec4-shape=browser]) ._1jvuy7m0{right:5px}:where([data-likec4-shape=cylinder],[data-likec4-shape=storage]) ._1jvuy7m0{top:14px}:where([data-likec4-shape=queue]) ._1jvuy7m0{top:1px;right:12px}._1jvuy7m1{width:min-content;height:min-content}._1jvuy7m2{--ai-bg-idle: color-mix(in srgb , var(--likec4-element-fill), transparent 99%);--ai-bg: var(--ai-bg-idle);--ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));--ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));pointer-events:all;color:var(--likec4-element-loContrast);cursor:pointer;background-color:var(--ai-bg);box-shadow:1px 1px 3px 0 transparent}._1jvuy7m2:hover{box-shadow:1px 1px 3px #00000026}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export type { AddEdgeData, AddNodeData } from './types';
|
|
2
|
+
export { vector, VectorImpl } from './vector';
|
|
3
|
+
export type { Vector } from './vector';
|
|
4
|
+
export { bezierControlPoints, bezierPath, centerXYInternalNode, distance, distanceBetweenPoints, isInside, isSamePoint, nodeToRect, stopPropagation, toDomPrecision, } from './xyflow';
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { DiagramEdge, Point } from '@likec4/core';
|
|
1
|
+
import { DiagramEdge, NonEmptyArray, Point } from '@likec4/core';
|
|
2
2
|
import { InternalNode, Rect, XYPosition } from '@xyflow/react';
|
|
3
|
-
import { DiagramFlowTypes } from './types';
|
|
4
3
|
export declare function toDomPrecision(v: number | null): number;
|
|
5
4
|
export declare function distance(a: XYPosition, b: XYPosition): number;
|
|
6
|
-
export declare const nodeToRect: (nd:
|
|
5
|
+
export declare const nodeToRect: (nd: InternalNode) => Rect;
|
|
7
6
|
/**
|
|
8
7
|
* Checks if a rectangle is completely inside another rectangle.
|
|
9
8
|
*
|
|
@@ -12,7 +11,7 @@ export declare const nodeToRect: (nd: DiagramFlowTypes.InternalNode) => Rect;
|
|
|
12
11
|
* @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
|
|
13
12
|
*/
|
|
14
13
|
export declare const isInside: (test: Rect, target: Rect) => boolean;
|
|
15
|
-
export declare function bezierControlPoints(diagramEdge: DiagramEdge): XYPosition[];
|
|
14
|
+
export declare function bezierControlPoints(diagramEdge: Pick<DiagramEdge, 'points'>): XYPosition[];
|
|
16
15
|
export declare function isSamePoint(a: XYPosition | Point, b: XYPosition | Point): boolean;
|
|
17
16
|
export declare function distanceBetweenPoints(a: XYPosition, b: XYPosition): number;
|
|
18
17
|
export declare function stopPropagation(e: React.MouseEvent): void;
|
|
@@ -20,3 +19,4 @@ export declare function centerXYInternalNode<N extends InternalNode>(nd: N): {
|
|
|
20
19
|
x: number;
|
|
21
20
|
y: number;
|
|
22
21
|
};
|
|
22
|
+
export declare function bezierPath(bezierSpline: NonEmptyArray<Point>): string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { invariant, hasAtLeast } from "@likec4/core";
|
|
2
|
-
import
|
|
3
|
-
import { Bezier } from "
|
|
2
|
+
import "@xyflow/system";
|
|
3
|
+
import { Bezier } from "bezier-js";
|
|
4
4
|
import { isArray } from "remeda";
|
|
5
5
|
function toDomPrecision(v) {
|
|
6
6
|
if (v === null) {
|
|
@@ -8,15 +8,6 @@ function toDomPrecision(v) {
|
|
|
8
8
|
}
|
|
9
9
|
return Math.round(v * 100) / 100;
|
|
10
10
|
}
|
|
11
|
-
const nodeToRect = (nd) => ({
|
|
12
|
-
x: nd.internals.positionAbsolute.x,
|
|
13
|
-
y: nd.internals.positionAbsolute.y,
|
|
14
|
-
width: nd.measured.width ?? nd.width ?? nd.data.element.width,
|
|
15
|
-
height: nd.measured.height ?? nd.height ?? nd.data.element.height
|
|
16
|
-
});
|
|
17
|
-
const isInside = (test, target) => {
|
|
18
|
-
return test.x >= target.x && test.y >= target.y && test.x + test.width <= target.x + target.width && test.y + test.height <= target.y + target.height;
|
|
19
|
-
};
|
|
20
11
|
function bezierControlPoints(diagramEdge) {
|
|
21
12
|
let [start, ...bezierPoints] = diagramEdge.points;
|
|
22
13
|
invariant(start, "start should be defined");
|
|
@@ -54,19 +45,22 @@ function isSamePoint(a, b) {
|
|
|
54
45
|
function stopPropagation(e) {
|
|
55
46
|
return e.stopPropagation();
|
|
56
47
|
}
|
|
57
|
-
function
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
48
|
+
function bezierPath(bezierSpline) {
|
|
49
|
+
let [start, ...points] = bezierSpline;
|
|
50
|
+
invariant(start, "start should be defined");
|
|
51
|
+
let path = `M ${start[0]},${start[1]}`;
|
|
52
|
+
while (hasAtLeast(points, 3)) {
|
|
53
|
+
const [cp1, cp2, end, ...rest] = points;
|
|
54
|
+
path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`;
|
|
55
|
+
points = rest;
|
|
56
|
+
}
|
|
57
|
+
invariant(points.length === 0, "all points should be consumed");
|
|
58
|
+
return path;
|
|
63
59
|
}
|
|
64
60
|
export {
|
|
65
61
|
bezierControlPoints,
|
|
66
|
-
|
|
67
|
-
isInside,
|
|
62
|
+
bezierPath,
|
|
68
63
|
isSamePoint,
|
|
69
|
-
nodeToRect,
|
|
70
64
|
stopPropagation,
|
|
71
65
|
toDomPrecision
|
|
72
66
|
};
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@likec4/diagram",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.20.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"bugs": "https://github.com/likec4/likec4/issues",
|
|
6
6
|
"homepage": "https://likec4.dev",
|
|
7
7
|
"author": "Denis Davydkov <denis@davydkov.com>",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
|
-
"url": "https://github.com/likec4/likec4.git",
|
|
10
|
+
"url": "git+https://github.com/likec4/likec4.git",
|
|
11
11
|
"directory": "packages/diagram"
|
|
12
12
|
},
|
|
13
13
|
"files": [
|
|
@@ -39,48 +39,51 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@dagrejs/dagre": "1.1.4",
|
|
42
|
-
"@likec4/core": "1.
|
|
42
|
+
"@likec4/core": "1.20.0",
|
|
43
43
|
"@mantine/vanilla-extract": "7.15.2",
|
|
44
|
-
"@react-hookz/web": "^
|
|
45
|
-
"@tabler/icons-react": "3.
|
|
44
|
+
"@react-hookz/web": "^25.0.1",
|
|
45
|
+
"@tabler/icons-react": "3.29.0",
|
|
46
|
+
"@xstate/react": "^5.0.2",
|
|
47
|
+
"@xstate/store": "^2.6.2",
|
|
46
48
|
"@xyflow/react": "12.3.6",
|
|
47
49
|
"@xyflow/system": "0.0.47",
|
|
50
|
+
"bezier-js": "^6.1.4",
|
|
48
51
|
"clsx": "^2.1.1",
|
|
49
52
|
"d3-shape": "^3.2.0",
|
|
50
53
|
"esm-env": "^1.2.1",
|
|
51
54
|
"fast-equals": "^5.0.1",
|
|
52
|
-
"framer-motion": "^11.
|
|
55
|
+
"framer-motion": "^11.16.0",
|
|
53
56
|
"khroma": "^2.1.0",
|
|
54
57
|
"react-error-boundary": "^4.1.2",
|
|
55
|
-
"remeda": "^2.
|
|
58
|
+
"remeda": "^2.19.0",
|
|
56
59
|
"type-fest": "4.28.1",
|
|
57
|
-
"
|
|
60
|
+
"xstate": "^5.19.2"
|
|
58
61
|
},
|
|
59
62
|
"peerDependencies": {
|
|
60
63
|
"@mantine/core": "^7.15.2",
|
|
61
64
|
"@mantine/hooks": "^7.15.2",
|
|
62
65
|
"@mantine/spotlight": "^7.15.2",
|
|
63
|
-
"react": "^18.
|
|
64
|
-
"react-dom": "^18.
|
|
66
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
67
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
65
68
|
},
|
|
66
69
|
"devDependencies": {
|
|
67
|
-
"@likec4/tsconfig": "1.
|
|
70
|
+
"@likec4/tsconfig": "1.20.0",
|
|
68
71
|
"@mantine/core": "7.15.2",
|
|
69
72
|
"@mantine/hooks": "7.15.2",
|
|
70
73
|
"@mantine/spotlight": "7.15.2",
|
|
74
|
+
"@statelyai/inspect": "^0.4.0",
|
|
71
75
|
"@types/bezier-js": "^4.1.3",
|
|
72
76
|
"@types/d3-shape": "^3.1.6",
|
|
73
|
-
"@types/react": "
|
|
74
|
-
"@types/react-dom": "
|
|
75
|
-
"@vanilla-extract/css": "^1.
|
|
77
|
+
"@types/react": "~19.0.8",
|
|
78
|
+
"@types/react-dom": "~19.0.3",
|
|
79
|
+
"@vanilla-extract/css": "^1.17.0",
|
|
76
80
|
"@vanilla-extract/css-utils": "^0.1.4",
|
|
77
81
|
"@vanilla-extract/dynamic": "^2.1.2",
|
|
78
|
-
"
|
|
79
|
-
"react": "
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"vite": "5.
|
|
83
|
-
"vite-plugin-dts": "^4.4.0",
|
|
82
|
+
"react": "~19.0.0",
|
|
83
|
+
"react-dom": "~19.0.0",
|
|
84
|
+
"typescript": "^5.7.3",
|
|
85
|
+
"vite": "5.4.14",
|
|
86
|
+
"vite-plugin-dts": "^4.5.0",
|
|
84
87
|
"vitest": "^2.1.8"
|
|
85
88
|
}
|
|
86
89
|
}
|
package/src/LikeC4Diagram.css.ts
CHANGED
|
@@ -7,26 +7,33 @@ export const cssReactFlow = style({
|
|
|
7
7
|
'(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
|
|
8
8
|
// TODO: this workaround disables animations in Safari (to improve performance)
|
|
9
9
|
vars: {
|
|
10
|
-
[vars.safariAnimationHook]: ''
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
10
|
+
[vars.safariAnimationHook]: '',
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
14
|
})
|
|
15
15
|
|
|
16
16
|
export const notInitialized = style({
|
|
17
|
-
opacity: 0
|
|
17
|
+
opacity: 0,
|
|
18
|
+
})
|
|
19
|
+
globalStyle(`.react-flow.not-initialized`, {
|
|
20
|
+
opacity: 0,
|
|
18
21
|
})
|
|
19
22
|
|
|
20
23
|
globalStyle(`.react-flow${cssReactFlow}`, {
|
|
21
24
|
vars: {
|
|
22
25
|
[xyvars.background.color]: vars.likec4.background.color,
|
|
23
|
-
[xyvars.background.pattern.color]: vars.likec4.background.pattern.color
|
|
24
|
-
}
|
|
26
|
+
[xyvars.background.pattern.color]: vars.likec4.background.pattern.color,
|
|
27
|
+
},
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
globalStyle(`.react-flow${cssReactFlow} .react-flow__pane`, {
|
|
31
|
+
WebkitUserSelect: 'none',
|
|
25
32
|
})
|
|
26
33
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
globalStyle(`.react-flow${cssReactFlow} .xyflow__viewport`, {
|
|
35
|
+
willChange: 'transform',
|
|
36
|
+
})
|
|
30
37
|
|
|
31
38
|
export const cssDisablePan = style({})
|
|
32
39
|
|
|
@@ -36,11 +43,10 @@ globalStyle(`.react-flow${cssReactFlow}${cssTransparentBg}`, {
|
|
|
36
43
|
backgroundColor: 'transparent !important',
|
|
37
44
|
vars: {
|
|
38
45
|
[vars.likec4.background.color]: 'transparent !important',
|
|
39
|
-
[xyvars.background.color]: 'transparent !important'
|
|
40
|
-
}
|
|
46
|
+
[xyvars.background.color]: 'transparent !important',
|
|
47
|
+
},
|
|
41
48
|
})
|
|
42
49
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
display: 'none'
|
|
50
|
+
globalStyle(`:where(.react-flow${cssReactFlow}, ${cssTransparentBg}) .react-flow__attribution`, {
|
|
51
|
+
display: 'none',
|
|
46
52
|
})
|