@likec4/diagram 1.33.0 → 1.34.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.
Files changed (20) hide show
  1. package/README.md +25 -0
  2. package/bundle/{chunk-DyFK-AJ5.js → chunk-Dd7et66b.js} +58 -40
  3. package/bundle/custom.js +2 -2
  4. package/bundle/index.js +157 -160
  5. package/dist/LikeC4Diagram.props.d.ts +1 -1
  6. package/dist/StaticLikeC4Diagram.d.ts +1 -1
  7. package/dist/bundle/LikeC4View.d.ts +1 -1
  8. package/dist/bundle/LikeC4View.props.d.ts +1 -1
  9. package/dist/bundle/ReactLikeC4.d.ts +1 -1
  10. package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts +1 -1
  11. package/dist/styles-min.css +1 -1
  12. package/dist/styles.css +1 -1
  13. package/dist/styles.css2.js +1 -1
  14. package/package.json +12 -12
  15. package/panda.buildinfo.json +821 -821
  16. package/src/LikeC4Diagram.props.ts +1 -1
  17. package/src/StaticLikeC4Diagram.tsx +1 -1
  18. package/src/bundle/LikeC4View.props.ts +1 -1
  19. package/src/bundle/LikeC4View.tsx +1 -1
  20. package/src/bundle/ReactLikeC4.tsx +1 -1
package/panda.buildinfo.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "schemaVersion": "0.53.7",
2
+ "schemaVersion": "0.54.0",
3
3
  "styles": {
4
4
  "atomic": [
5
5
  "background]___[value:dots",
@@ -13,724 +13,303 @@
13
13
  "WebkitUserSelect]___[value:none]___[cond:& .react-flow__pane",
14
14
  "display]___[value:none]___[cond:& .react-flow__attribution",
15
15
  "position]___[value:absolute",
16
- "top]___[value:5px",
17
- "left]___[value:4px",
18
- "display]___[value:none]___[cond:_smallZoom",
19
- "stroke]___[value:2",
20
- "top]___[value:[2px]",
21
- "right]___[value:[2px]",
22
- "opacity]___[value:0.75]___[cond:_whenHovered",
23
- "opacity]___[value:1]___[cond:_hover",
24
- "stroke]___[value:1.8",
25
- "position]___[value:relative",
26
- "width]___[value:100%",
27
- "height]___[value:100%",
28
- "padding]___[value:0",
29
- "margin]___[value:0",
30
- "border]___[value:transparent",
31
- "pointerEvents]___[value:none",
32
- "borderRadius]___[value:var(--_border-radius, 4px)]___[cond:_before",
33
- "content]___[value:\" \"]___[cond:_before",
34
- "position]___[value:absolute]___[cond:_before",
35
- "top]___[value:0]___[cond:_before",
36
- "left]___[value:0]___[cond:_before",
37
- "width]___[value:100%]___[cond:_before",
38
- "height]___[value:100%]___[cond:_before",
39
- "border]___[value:transparent]___[cond:_before",
40
- "background]___[value:likec4.palette.fill]___[cond:_before",
41
- "backgroundClip]___[value:padding-box]___[cond:_before",
42
- "transitionDelay]___[value:.075ms]___[cond:_before",
43
- "transition]___[value:all {durations.slow} {easings.inOut}]___[cond:_noReduceGraphics<___>_before",
44
- "transitionDelay]___[value:.2s]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
45
- "transitionTimingFunction]___[value:in]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
46
- "opacity]___[value:var(--_compound-opacity, 1)]___[cond:&:is([data-compound-transparent])<___>_before",
47
- "borderWidth]___[value:calc(var(--_border-width, 2px) - 1px)]___[cond:&:is([data-compound-transparent])<___>_before",
48
- "borderRadius]___[value:var(--_border-radius, 4px)",
49
- "transition]___[value:all 250ms {easings.inOut}",
50
- "cursor]___[value:default",
16
+ "top]___[value:1rem",
17
+ "right]___[value:1rem",
18
+ "color]___[value:gray",
19
+ "display]___[value:contents",
20
+ "cursor]___[value:pointer",
21
+ "--mantine-cursor-pointer]___[value:pointer",
22
+ "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
23
+ "position]___[value:fixed",
51
24
  "top]___[value:0",
52
25
  "left]___[value:0",
53
- "borderStyle]___[value:dashed",
54
- "borderWidth]___[value:[var(--_border-width, 2px)]",
55
- "borderColor]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} var(--_border-opacity-percent, 100%), transparent)]",
56
- "overflow]___[value:visible",
57
- "visibility]___[value:hidden",
58
- "visibility]___[value:visible]___[cond:_whenFocused",
59
- "visibility]___[value:visible]___[cond:_whenSelected",
60
- "display]___[value:none]___[cond:_whenPanning",
61
- "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]",
62
- "strokeWidth]___[value:4",
63
- "fill]___[value:[none]",
64
- "animationStyle]___[value:indicator",
65
- "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]]___[cond:_light",
66
- "boxShadow]___[value:0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)]___[cond:_before<___>_noReduceGraphics",
67
- "boxShadow]___[value:none]___[cond:_before<___>_whenSelected",
68
- "boxShadow]___[value:none !important]___[cond:_before<___>_whenPanning",
26
+ "width]___[value:100%",
27
+ "padding]___[value:0",
28
+ "color]___[value:red",
29
+ "padding]___[value:xl",
30
+ "gap]___[value:xs",
31
+ "marginTop]___[value:xl",
69
32
  "display]___[value:flex",
33
+ "overflow]___[value:hidden",
70
34
  "alignItems]___[value:center",
71
- "gap]___[value:6px",
72
- "left]___[value:14px",
73
- "top]___[value:4px",
74
- "right]___[value:30px",
75
- "width]___[value:auto",
35
+ "gap]___[value:micro",
36
+ "justifyContent]___[value:stretch",
37
+ "transitionProperty]___[value:all",
38
+ "transitionDuration]___[value:fast",
39
+ "transitionTimingFunction]___[value:inOut",
40
+ "border]___[value:1px dashed {colors.mantine.colors.defaultBorder}",
41
+ "borderRadius]___[value:sm",
42
+ "color]___[value:mantine.colors.gray[7]",
43
+ "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
44
+ "transitionTimingFunction]___[value:out]___[cond:_hover",
45
+ "color]___[value:mantine.colors.defaultColor]___[cond:_hover",
46
+ "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
47
+ "minHeight]___[value:22px",
48
+ "padding]___[value:2px 8px 2px 2px",
76
49
  "minHeight]___[value:30px",
77
- "pointerEvents]___[value:all]___[cond::where(.react-flow__node.draggable) &",
78
- "cursor]___[value:grab]___[cond::where(.react-flow__node.draggable) &",
79
- "paddingLeft]___[value:22px]___[cond:.likec4-compound-node:has(.compound-action) &",
50
+ "padding]___[value:3px 16px 3px 3px",
51
+ "flex]___[value:1 1 100%",
52
+ "transition]___[value:transform 100ms {easings.inOut}",
53
+ "transitionTimingFunction]___[value:out]___[cond:_groupHover",
54
+ "transitionDelay]___[value:50ms]___[cond:_groupHover",
55
+ "transform]___[value:translateX(1px)]___[cond:_groupHover",
56
+ "flex]___[value:0",
57
+ "color]___[value:teal",
58
+ "truncate]___[value:true",
59
+ "height]___[value:30px",
60
+ "paddingLeft]___[value:sm",
61
+ "paddingRight]___[value:4px",
62
+ "border]___[value:1px solid",
63
+ "borderColor]___[value:mantine.colors.defaultBorder",
64
+ "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
65
+ "borderColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
66
+ "borderColor]___[value:mantine.colors.defaultBorder]___[cond:_hover",
67
+ "background]___[value:mantine.colors.default",
68
+ "background]___[value:mantine.colors.white]___[cond:_light",
69
+ "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
70
+ "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
71
+ "transition]___[value:fast",
72
+ "transition]___[value:none !important]___[cond:_whenPanning",
73
+ "boxShadow]___[value:xs",
74
+ "boxShadow]___[value:sm]___[cond:_hover",
75
+ "boxShadow]___[value:none !important]___[cond:_whenPanning",
76
+ "fontSize]___[value:sm",
77
+ "fontWeight]___[value:500",
78
+ "paddingRight]___[value:10px",
79
+ "color]___[value:mantine.colors.placeholder",
80
80
  "flex]___[value:1",
81
- "fontFamily]___[value:likec4.compound",
81
+ "paddingRight]___[value:30px]___[cond:sm",
82
+ "paddingRight]___[value:50px]___[cond:md",
83
+ "fontSize]___[value:11px",
82
84
  "fontWeight]___[value:600",
83
- "fontSize]___[value:15px",
84
- "textTransform]___[value:uppercase",
85
- "letterSpacing]___[value:0.2px",
86
- "color]___[value:likec4.palette.loContrast",
87
- "color]___[value:[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]]___[cond:[data-compound-title-inverse] &",
88
- "color]___[value:likec4.palette.stroke]___[cond:[data-compound-title-inverse] &<___>_light",
89
- "flex]___[value:0 0 20px",
90
- "height]___[value:20px",
91
- "width]___[value:20px",
85
+ "lineHeight]___[value:1",
86
+ "padding]___[value:4px 7px",
87
+ "color]___[value:mantine.colors.gray[7]]___[cond:_light",
88
+ "borderColor]___[value:mantine.colors.gray[2]]___[cond:_light",
89
+ "color]___[value:mantine.colors.dark[0]]___[cond:_dark",
90
+ "borderColor]___[value:mantine.colors.dark[7]]___[cond:_dark",
91
+ "backgroundColor]___[value:mantine.colors.gray[2]/70]___[cond:_light",
92
+ "backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
93
+ "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
94
+ "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
95
+ "stroke]___[value:2",
96
+ "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity, 95%))]",
97
+ "backgroundColor]___[value:[rgb(250 250 250 / var(--_opacity, 95%))]]___[cond:_light",
98
+ "backdropFilter]___[value:auto",
99
+ "backdropBlur]___[value:var(--_blur, 10px)",
100
+ "height]___[value:100%",
101
+ "maxHeight]___[value:100vh",
102
+ "flexDirection]___[value:column",
103
+ "gap]___[value:sm",
104
+ "paddingTop]___[value:20",
105
+ "paddingLeft]___[value:16",
106
+ "paddingRight]___[value:16",
107
+ "paddingBottom]___[value:8",
108
+ "background]___[value:[transparent]",
109
+ "height]___[value:100cqh]___[cond:xs",
110
+ "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
111
+ "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
112
+ "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
113
+ "containerName]___[value:likec4-search-elements",
114
+ "containerType]___[value:size",
115
+ "flexGrow]___[value:1",
116
+ "alignItems]___[value:stretch",
117
+ "paddingInline]___[value:sm",
118
+ "display]___[value:grid",
119
+ "gap]___[value:10px",
120
+ "order]___[value:6",
121
+ "paddingRight]___[value:xs",
122
+ "boxSizing]___[value:border-box",
123
+ "margin]___[value:0",
124
+ "inset]___[value:0",
125
+ "width]___[value:100vw",
126
+ "height]___[value:100vh",
127
+ "maxWidth]___[value:100vw",
128
+ "border]___[value:transparent",
129
+ "backdropFilter]___[value:auto]___[cond:_backdrop",
130
+ "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
131
+ "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
132
+ "pointerEvents]___[value:all",
133
+ "gap]___[value:lg",
134
+ "backgroundColor]___[value:mantine.colors.body",
135
+ "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
136
+ "border]___[value:none",
137
+ "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent), color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px, color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px) ",
138
+ "cursor]___[value:move",
139
+ "display]___[value:block",
140
+ "fontFamily]___[value:likec4.element",
141
+ "fontOpticalSizing]___[value:auto",
142
+ "fontStyle]___[value:normal",
143
+ "fontSize]___[value:24px",
144
+ "lineHeight]___[value:xs",
145
+ "flex]___[value:0 0 40px",
146
+ "height]___[value:40px",
147
+ "width]___[value:40px",
92
148
  "justifyContent]___[value:center",
93
- "mixBlendMode]___[value:hard-light",
94
- "mixBlendMode]___[value:normal]___[cond:_reduceGraphicsOnPan",
95
- "width]___[value:100%]___[cond:& svg, & img",
96
- "height]___[value:auto]___[cond:& svg, & img",
97
- "maxHeight]___[value:100%]___[cond:& svg, & img",
98
- "pointerEvents]___[value:none]___[cond:& svg, & img",
99
- "filter]___[value:drop-shadow(0 0 3px rgb(0 0 0 / 12%))]___[cond:& svg, & img",
100
- "filter]___[value:drop-shadow(0 1px 8px rgb(0 0 0 / 8%))]___[cond:& svg, & img<___>xs",
101
- "filter]___[value:drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))]___[cond:& svg, & img<___>sm",
102
- "filter]___[value:none]___[cond:& svg, & img<___>_reduceGraphicsOnPan",
149
+ "alignSelf]___[value:flex-start",
150
+ "mixBlendMode]___[value:hard-light]___[cond:_dark",
151
+ "width]___[value:100%]___[cond:& :where(svg, img)",
152
+ "height]___[value:auto]___[cond:& :where(svg, img)",
153
+ "maxHeight]___[value:100%]___[cond:& :where(svg, img)",
154
+ "pointerEvents]___[value:none]___[cond:& :where(svg, img)",
155
+ "filter]___[value: 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%)) ]___[cond:& :where(svg, img)",
103
156
  "objectFit]___[value:contain]___[cond:& img",
104
- "truncate]___[value:end",
105
- "transitionDuration]___[value:normal",
106
- "--actionbtn-color]___[value:color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]___[cond:[data-compound-title-inverse] &<___>_dark",
107
- "--actionbtn-color]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
108
- "--actionbtn-color-hovered]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
109
- "--actionbtn-color-hovered-btn]___[value:{colors.likec4.palette.hiContrast}]___[cond:[data-compound-title-inverse] &<___>_light",
110
- "--actionbtn-bg-hovered]___[value:{colors.likec4.palette.fill/50}]___[cond:[data-compound-title-inverse] &<___>_light",
111
- "--actionbtn-bg-hovered-btn]___[value:{colors.likec4.palette.fill}]___[cond:[data-compound-title-inverse] &<___>_light",
112
- "transitionDelay]___[value:0.2s",
113
- "transitionDelay]___[value:0s]___[cond:_hover",
114
- "likec4RelationPalette]___[value:gray",
115
- "top]___[value:4",
116
- "right]___[value:4",
117
- "userSelect]___[value:all",
118
- "textAlign]___[value:left",
119
- "whiteSpaceCollapse]___[value:preserve-breaks",
120
- "textWrap]___[value:pretty",
121
- "lineHeight]___[value:1.25",
122
- "--text-fz]___[value:{fontSizes.sm}",
123
- "--text-fz]___[value:{fontSizes.md}]___[cond:md",
124
- "pointerEvents]___[value:all",
125
- "cursor]___[value:pointer",
126
- "height]___[value:auto",
127
- "background]___[value:[var(--xy-edge-label-background-color)]",
128
- "color]___[value:[var(--xy-edge-label-color)]",
129
- "border]___[value:0px solid transparent",
130
- "borderRadius]___[value:4px",
131
- "transform]___[value:var(--edge-translate)",
132
- "transition]___[value:fast",
133
- "transition]___[value:all 190ms {easings.inOut}]___[cond:&:is([data-likec4-hovered='true'])",
134
- "transform]___[value:var(--edge-translate, translate(0px, 0px)) scale(1.12)]___[cond:&:is([data-likec4-hovered='true'])",
135
- "transitionDelay]___[value:100ms]___[cond:&:is([data-likec4-hovered='true'])",
136
- "mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
137
- "mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
138
- "display]___[value:none]___[cond:_reduceGraphicsOnPan",
139
- "fontFamily]___[value:likec4.relation",
140
- "padding]___[value:3px 5px 5px 5px",
141
- "flexDirection]___[value:column",
142
- "width]___[value:max-content",
143
- "maxWidth]___[value:100%",
144
- "gap]___[value:4px",
145
- "flexDirection]___[value:row",
146
- "padding]___[value:0px",
147
- "alignSelf]___[value:stretch",
148
- "flex]___[value:0 0 auto",
149
- "fontSize]___[value:14px",
150
- "lineHeight]___[value:1",
151
- "padding]___[value:5px 5px",
152
- "textAlign]___[value:center",
153
- "minWidth]___[value:22px",
154
- "borderTopLeftRadius]___[value:4px",
155
- "borderBottomLeftRadius]___[value:4px",
156
- "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]",
157
- "fontVariantNumeric]___[value:tabular-nums",
158
- "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]]___[cond::where([data-likec4-color=\"gray\"]) &<___>_dark",
159
- "display]___[value:contents",
160
- "display]___[value:none !important]___[cond:_empty",
161
- "padding]___[value:2px 5px 4px 0px",
162
- "lineHeight]___[value:1.185",
163
- "padding]___[value:2px 6px 4px 0px",
164
- "fontSize]___[value:11px",
165
- "opacity]___[value:0.75",
166
- "lineClamp]___[value:5",
167
- "strokeOpacity]___[value:0",
168
- "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke}",
169
- "--xy-edge-stroke-selected]___[value:{colors.likec4.relation.stroke.selected}",
170
- "--xy-edge-label-color]___[value:{colors.likec4.relation.label}",
171
- "--xy-edge-label-color]___[value:color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)]___[cond:_light",
172
- "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/60}]___[cond:_light",
173
- "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/50}]___[cond:_dark",
174
- "--xy-edge-stroke-width]___[value:3",
175
- "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke.selected}]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])",
176
- "--xy-edge-stroke-width]___[value:4]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])<___>_whenSelected",
177
- "transition]___[value:none]___[cond:_reduceGraphics",
178
- "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
179
- "strokeOpacity]___[value:0.08",
180
- "transitionProperty]___[value:stroke-width, stroke-opacity",
181
- "transitionDuration]___[value:fast",
182
- "transitionTimingFunction]___[value:inOut",
183
- "transitionTimingFunction]___[value:out]___[cond:_whenHovered",
184
- "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
185
- "strokeOpacity]___[value:0.2]___[cond:_whenHovered",
186
- "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 6)]___[cond:_whenSelected",
187
- "strokeOpacity]___[value:0.25]___[cond:_whenSelected",
188
- "strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
189
- "fill]___[value:[var(--xy-edge-stroke)]",
190
- "stroke]___[value:[var(--xy-edge-stroke)]",
191
- "fill]___[value:[none!]",
192
- "strokeDashoffset]___[value:10",
193
- "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
194
- "animationStyle]___[value:xyedgeAnimated]___[cond:_whenHovered",
195
- "animationDelay]___[value:450ms]___[cond:_whenHovered",
196
- "animationStyle]___[value:xyedgeAnimated]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
197
- "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
198
- "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
199
- "animationPlayState]___[value:paused]___[cond:_whenDimmed",
200
- "animationName]___[value:none]___[cond:_smallZoom",
201
- "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
202
- "animationName]___[value:none]___[cond:_whenPanning",
203
- "--ai-bg]___[value:var(--xy-edge-label-background-color)",
204
- "--ai-hover]___[value:color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)",
205
- "--ai-size]___[value:var(--ai-size-sm)",
206
- "--ai-radius]___[value:var(--mantine-radius-sm)",
207
- "translateY]___[value:1px]___[cond:_hover",
208
- "scale]___[value:1.15]___[cond:_hover",
209
- "translateY]___[value:-1px]___[cond:_active",
210
- "scale]___[value:0.9]___[cond:_active",
211
- "opacity]___[value:1]___[cond:_whenHovered",
212
- "width]___[value:80%]___[cond:& .tabler-icon",
213
- "height]___[value:80%]___[cond:& .tabler-icon",
214
- "strokeWidth]___[value:2]___[cond:& .tabler-icon",
215
- "zIndex]___[value:1",
216
- "top]___[value:calc(100% - 30px)",
217
- "transform]___[value:translateX(-50%)",
218
- "left]___[value:50%",
219
- "top]___[value:2",
220
- "right]___[value:2",
221
- "right]___[value:5px]___[cond:_shapeBrowser",
222
- "top]___[value:14px]___[cond:_shapeCylinder",
223
- "top]___[value:14px]___[cond:_shapeStorage",
224
- "top]___[value:1px]___[cond:_shapeQueue",
225
- "right]___[value:12px]___[cond:_shapeQueue",
226
- "top]___[value:calc(100% - 4px)]___[cond:_before",
227
- "height]___[value:24px]___[cond:_before",
228
- "background]___[value:[transparent]]___[cond:_before",
229
- "pointerEvents]___[value:all]___[cond:_before",
230
- "outline]___[value:none]___[cond:_focusVisible",
231
- "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
232
- "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
233
- "visibility]___[value:hidden]___[cond:_smallZoom",
234
- "stroke]___[value:likec4.palette.loContrast",
235
- "strokeWidth]___[value:8",
236
- "strokeOpacity]___[value:0.8",
237
- "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]]___[cond:_light",
238
- "visibility]___[value:visible]___[cond:_groupFocusVisible",
239
- "animationStyle]___[value:indicator]___[cond:_whenSelected",
240
- "fill]___[value:likec4.palette.fill",
241
- "fill]___[value:likec4.palette.stroke",
242
- "fill]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
243
- "fill]___[value:likec4.palette.fill]___[cond:.shape-svg-multiple &",
244
- "stroke]___[value:likec4.palette.stroke",
245
- "transformOrigin]___[value:50% 50%",
246
- "transformOrigin]___[value:75% 25%]___[cond:_shapeQueue",
247
- "transformOrigin]___[value:50% 100%]___[cond:_shapeCylinder",
248
- "transformOrigin]___[value:50% 100%]___[cond:_shapeStorage",
249
- "transform]___[value:translate(14px, 14px) perspective(300px) translateZ(-8px)",
250
- "filter]___[value:brightness(0.65) saturate(0.8)",
251
- "stroke]___[value:[none]",
252
- "display]___[value:none]___[cond:_whenSelected",
253
- "display]___[value:none]___[cond:_whenFocused",
254
- "transition]___[value:fill 120ms linear, filter 130ms {easings.inOut}",
255
- "transitionDelay]___[value:0ms",
256
- "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21)) drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1)) ",
257
- "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond:_whenHovered",
258
- "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond::where([data-likec4-level='true']) &",
259
- "filter]___[value:none]___[cond:_whenSelected",
260
- "filter]___[value:none]___[cond:_smallZoom",
261
- "transition]___[value:none]___[cond:_whenPanning",
262
- "filter]___[value:none]___[cond:_whenPanning",
263
- "alignItems]___[value:flex-end",
264
- "gap]___[value:4",
157
+ "background]___[value:mantine.colors.body",
158
+ "padding]___[value:10px 8px",
159
+ "border]___[value:1px dashed",
160
+ "--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
161
+ "--icon-color]___[value:{colors.mantine.colors.dark[1]}]___[cond:_hover",
162
+ "--view-title-color]___[value:{colors.mantine.colors.defaultColor}]___[cond:_hover",
163
+ "--icon-color]___[value:{colors.mantine.colors.gray[6]}]___[cond:_light",
164
+ "--view-title-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light",
165
+ "--icon-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light<___>_hover",
166
+ "transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
167
+ "color]___[value:[var(--icon-color, {colors.mantine.colors.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
168
+ "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
169
+ "color]___[value:mantine.colors.defaultColor]___[cond:& .mantine-ThemeIcon-root<___>_hover",
170
+ "transition]___[value:all 130ms {easings.inOut}]___[cond:& > *",
171
+ "transitionTimingFunction]___[value:out]___[cond:&:hover > *",
172
+ "transform]___[value:translateX(1.6px)]___[cond:&:hover > *",
173
+ "color]___[value:[var(--view-title-color, {colors.mantine.colors.gray[7]})]",
174
+ "fontSize]___[value:15px",
175
+ "lineHeight]___[value:1.4",
176
+ "background]___[value:mantine.colors.gray[1]",
177
+ "flexWrap]___[value:nowrap",
178
+ "gap]___[value:6px",
179
+ "padding]___[value:4px",
180
+ "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
181
+ "fontSize]___[value:xs",
182
+ "padding]___[value:6px 8px",
183
+ "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
184
+ "transition]___[value:none]___[cond:&[data-active]",
185
+ "background]___[value:mantine.colors.white]___[cond:&[data-active]",
186
+ "boxShadow]___[value:xs]___[cond:&[data-active]",
187
+ "color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
188
+ "color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
189
+ "background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
190
+ "color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
191
+ "background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
192
+ "position]___[value:relative",
193
+ "paddingLeft]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
194
+ "paddingRight]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
195
+ "width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
196
+ "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
197
+ "paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
198
+ "paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
199
+ "gridTemplateColumns]___[value:min-content 1fr",
200
+ "gridAutoRows]___[value:min-content max-content",
201
+ "gap]___[value:[24px 20px]",
202
+ "alignItems]___[value:baseline",
265
203
  "justifyItems]___[value:stretch",
266
- "bottom]___[value:0",
267
- "padding]___[value:4",
268
- "bottom]___[value:5]___[cond:_shapeCylinder",
269
- "bottom]___[value:5]___[cond:_shapeStorage",
270
- "bottom]___[value:0]___[cond:_shapeQueue",
271
- "paddingLeft]___[value:14]___[cond:_shapeQueue",
272
- "layerStyle]___[value:likec4.tag",
273
- "maxWidth]___[value:50",
274
- "height]___[value:5",
275
- "height]___[value:12]___[cond:_whenHovered",
276
- "borderRadius]___[value:4]___[cond:_whenHovered",
277
- "transitionDelay]___[value:.08s]___[cond:_whenHovered",
204
+ "justifySelf]___[value:end",
205
+ "textAlign]___[value:right",
278
206
  "userSelect]___[value:none",
279
- "fontSize]___[value:lg",
280
- "borderRadius]___[value:4",
281
- "paddingInline]___[value:6",
207
+ "width]___[value:14px",
208
+ "height]___[value:14px",
209
+ "border]___[value:3.5px solid",
210
+ "borderColor]___[value:mantine.colors.dark[3]",
211
+ "borderTop]___[value:none",
212
+ "borderLeft]___[value:none",
213
+ "borderRadius]___[value:2px",
214
+ "bottom]___[value:2px",
215
+ "right]___[value:2px",
216
+ "cursor]___[value:se-resize",
217
+ "borderWidth]___[value:4px]___[cond:_hover",
218
+ "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
219
+ "boxShadow]___[value:md",
220
+ "gap]___[value:[4px 4px]",
221
+ "paddingRight]___[value:2xs",
222
+ "whiteSpace]___[value:nowrap",
223
+ "color]___[value:mantine.colors.gray[8]",
224
+ "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
225
+ "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
226
+ "padding]___[value:2xs",
227
+ "whiteSpace]___[value:pre",
228
+ "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
229
+ "userSelect]___[value:all",
230
+ "marginBottom]___[value:sm",
231
+ "gap]___[value:6",
232
+ "lineClamp]___[value:1",
282
233
  "flexWrap]___[value:wrap",
283
- "paddingBottom]___[value:sm",
284
- "translate]___[value:auto",
285
- "translateX]___[value:-8",
286
- "gap]___[value:sm",
287
- "textStyle]___[value:likec4.node.primary",
234
+ "gap]___[value:4",
235
+ "marginTop]___[value:6",
236
+ "stroke]___[value:1.6",
237
+ "stroke]___[value:1.8",
238
+ "paddingTop]___[value:xs",
239
+ "alignItems]___[value:flex-start",
240
+ "--thickness]___[value:1px",
241
+ "borderBlockEndWidth]___[value:var(--thickness)",
242
+ "overscrollBehavior]___[value:none",
243
+ "marginBottom]___[value:sm]___[cond:&[data-level='1']",
244
+ "cursor]___[value:default",
245
+ "marginTop]___[value:0",
246
+ "marginBottom]___[value:0",
247
+ "transition]___[value:fast]___[cond:& > *",
248
+ "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > :not([data-no-transform])",
249
+ "transform]___[value:translateX(1px)]___[cond:_hover<___>& > :not([data-no-transform])",
250
+ "height]___[value:36px",
251
+ "paddingInlineStart]___[value:16px",
252
+ "paddingInlineEnd]___[value:10px",
253
+ "color]___[value:mantine.colors.gray.lightColor]___[cond:_dark",
254
+ "background]___[value:mantine.colors.gray.lightHover]___[cond:_hover",
255
+ "transition]___[value:fast]___[cond:& .tabler-icon",
256
+ "width]___[value:90%]___[cond:& .tabler-icon",
257
+ "opacity]___[value:0.65]___[cond:& .tabler-icon",
258
+ "stroke]___[value:1.2",
259
+ "position]___[value:bottom-start",
260
+ "offset]___[value:0",
261
+ "paddingInline]___[value:xs",
262
+ "paddingBlock]___[value:4",
263
+ "opacity]___[value:0.65",
264
+ "display]___[value:inline-block",
265
+ "padding]___[value:3px 6px",
266
+ "borderRadius]___[value:3",
267
+ "background]___[value:likec4.palette.fill/75",
268
+ "lineHeight]___[value:1.2",
288
269
  "color]___[value:likec4.palette.hiContrast",
289
- "flexGrow]___[value:0",
290
- "flexShrink]___[value:1",
291
- "textStyle]___[value:likec4.node.secondary",
292
- "textOverflow]___[value:ellipsis",
293
- "overflow]___[value:hidden",
294
- "display]___[value:none]___[cond:_shapeSizeXs",
295
- "fontSize]___[value:calc(var(--likec4-text-size) * 0.635)",
296
- "lineHeight]___[value:1.125",
297
- "textWrap]___[value:balance",
298
- "opacity]___[value:0.92",
299
- "display]___[value:none]___[cond:_shapeSizeSm",
300
- "flex]___[value:0 0 var(--icon-size)",
301
- "height]___[value:var(--icon-size)",
302
- "width]___[value:var(--icon-size)",
303
- "alignSelf]___[value:flex-start",
304
- "height]___[value:fit-content",
305
- "width]___[value:fit-content",
306
- "maxHeight]___[value:100%",
307
- "margin]___[value:0 auto",
308
- "paddingTop]___[value:var(--likec4-spacing)",
309
- "paddingBottom]___[value:var(--likec4-spacing)",
310
- "paddingLeft]___[value:calc(var(--likec4-spacing) + 8px)",
311
- "paddingRight]___[value:calc(var(--likec4-spacing) + 8px)",
312
- "gap]___[value:12px",
313
- "paddingLeft]___[value:46px]___[cond:_shapeQueue",
314
- "paddingRight]___[value:16px]___[cond:_shapeQueue",
315
- "paddingLeft]___[value:46px]___[cond:_shapeMobile",
316
- "paddingRight]___[value:16px]___[cond:_shapeMobile",
317
- "paddingTop]___[value:30px]___[cond:_shapeCylinder",
318
- "paddingTop]___[value:30px]___[cond:_shapeStorage",
319
- "paddingTop]___[value:32px]___[cond:_shapeBrowser",
320
- "paddingBottom]___[value:28px]___[cond:_shapeBrowser",
321
- "--icon-size]___[value:24px]___[cond:_shapeSizeXs",
322
- "--icon-size]___[value:36px]___[cond:_shapeSizeSm",
323
- "--icon-size]___[value:60px]___[cond:_shapeSizeMd",
324
- "--icon-size]___[value:82px]___[cond:_shapeSizeLg",
325
- "gap]___[value:16px]___[cond:_shapeSizeLg",
326
- "--icon-size]___[value:90px]___[cond:_shapeSizeXl",
327
- "gap]___[value:16px]___[cond:_shapeSizeXl",
328
- "gap]___[value:16px",
329
- "flex]___[value:0 1 auto",
330
- "alignItems]___[value:stretch",
331
- "flexWrap]___[value:nowrap",
332
- "gap]___[value:8px",
333
- "minWidth]___[value:calc(50% + var(--icon-size))",
334
- "alignItems]___[value:flex-start",
335
- "lineClamp]___[value:2",
336
- "lineClamp]___[value:3",
337
- "maxHeight]___[value:8rem",
338
- "top]___[value:1rem",
339
- "right]___[value:1rem",
340
- "color]___[value:gray",
341
- "--mantine-cursor-pointer]___[value:pointer",
342
- "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
343
- "position]___[value:fixed",
344
- "color]___[value:red",
345
- "padding]___[value:xl",
346
- "gap]___[value:xs",
347
- "marginTop]___[value:xl",
348
- "gap]___[value:micro",
349
- "justifyContent]___[value:stretch",
350
- "transitionProperty]___[value:all",
351
- "border]___[value:1px dashed {colors.mantine.colors.defaultBorder}",
352
- "borderRadius]___[value:sm",
353
- "color]___[value:mantine.colors.gray[7]",
354
- "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
355
- "transitionTimingFunction]___[value:out]___[cond:_hover",
356
- "color]___[value:mantine.colors.defaultColor]___[cond:_hover",
357
- "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
358
- "minHeight]___[value:22px",
359
- "padding]___[value:2px 8px 2px 2px",
360
- "padding]___[value:3px 16px 3px 3px",
361
- "flex]___[value:1 1 100%",
362
- "transition]___[value:transform 100ms {easings.inOut}",
363
- "transitionTimingFunction]___[value:out]___[cond:_groupHover",
364
- "transitionDelay]___[value:50ms]___[cond:_groupHover",
365
- "transform]___[value:translateX(1px)]___[cond:_groupHover",
366
- "flex]___[value:0",
367
- "color]___[value:teal",
368
- "truncate]___[value:true",
369
- "height]___[value:30px",
370
- "paddingLeft]___[value:sm",
371
- "paddingRight]___[value:4px",
372
- "border]___[value:1px solid",
373
- "borderColor]___[value:mantine.colors.defaultBorder",
374
- "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
375
- "borderColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
376
- "borderColor]___[value:mantine.colors.defaultBorder]___[cond:_hover",
377
- "background]___[value:mantine.colors.default",
378
- "background]___[value:mantine.colors.white]___[cond:_light",
379
- "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
380
- "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
381
- "transition]___[value:none !important]___[cond:_whenPanning",
382
- "boxShadow]___[value:xs",
383
- "boxShadow]___[value:sm]___[cond:_hover",
384
- "boxShadow]___[value:none !important]___[cond:_whenPanning",
385
- "fontSize]___[value:sm",
386
- "fontWeight]___[value:500",
387
- "paddingRight]___[value:10px",
388
- "color]___[value:mantine.colors.placeholder",
389
- "paddingRight]___[value:30px]___[cond:sm",
390
- "paddingRight]___[value:50px]___[cond:md",
391
- "padding]___[value:4px 7px",
392
- "color]___[value:mantine.colors.gray[7]]___[cond:_light",
393
- "borderColor]___[value:mantine.colors.gray[2]]___[cond:_light",
394
- "color]___[value:mantine.colors.dark[0]]___[cond:_dark",
395
- "borderColor]___[value:mantine.colors.dark[7]]___[cond:_dark",
396
- "backgroundColor]___[value:mantine.colors.gray[2]/70]___[cond:_light",
397
- "backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
398
- "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
399
- "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
400
- "top]___[value:1",
401
- "right]___[value:1",
402
- "zIndex]___[value:9",
403
- "offset]___[value:16",
404
- "padding]___[value:xs",
405
- "marginInline]___[value:auto",
406
- "marginTop]___[value:2",
407
- "gap]___[value:0",
408
- "overflowY]___[value:scroll",
409
- "minWidth]___[value:250px",
410
- "maxWidth]___[value:min(90vw, 500px)",
411
- "display]___[value:block",
412
- "fontSize]___[value:xxs",
413
- "whiteSpace]___[value:nowrap",
414
- "padding]___[value:2px 4px",
415
- "borderRadius]___[value:2",
416
- "background]___[value:likec4.palette.fill/30",
417
- "lineHeight]___[value:[1.11]",
418
- "color]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]]___[cond:_light",
419
- "color]___[value:likec4.palette.loContrast]___[cond:_dark",
420
- "fontSize]___[value:xs",
421
- "opacity]___[value:0.65",
422
- "position]___[value:bottom-start",
423
- "top]___[value:5",
424
- "right]___[value:6",
425
- "gap]___[value:10px",
426
- "gap]___[value:3",
427
- "stroke]___[value:2.5",
428
- "width]___[value:xs",
429
- "mixBlendMode]___[value:normal",
430
- "fill]___[value:likec4.relation.stroke",
431
- "stroke]___[value:likec4.relation.stroke",
432
- "fillOpacity]___[value:0.75",
433
- "strokeWidth]___[value:1",
434
- "cursor]___[value:grab",
435
- "pointerEvents]___[value:auto",
436
- "fillOpacity]___[value:1]___[cond:_hover",
437
- "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
438
- "strokeWidth]___[value:10]___[cond:_hover",
439
- "transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
440
- "visibility]___[value:visible]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
441
- "transition]___[value:fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
442
- "transitionDelay]___[value:50ms]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
443
- "fillOpacity]___[value:1]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
444
- "strokeWidth]___[value:5]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
445
- "cursor]___[value:grabbing",
446
- "cursor]___[value:grabbing !important]___[cond:& *",
447
- "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
448
- "position]___[value:right-end",
449
- "offset]___[value:2",
450
- "paddingInline]___[value:3",
451
- "height]___[value:xs",
452
- "--thickness]___[value:1px",
453
- "borderBlockEndWidth]___[value:var(--thickness)",
454
- "gap]___[value:2",
455
- "justifyContent]___[value:flex-start",
456
- "gap]___[value:6",
270
+ "background]___[value:mantine.colors.gray[1]]___[cond:_light",
271
+ "color]___[value:mantine.colors.orange[4]]___[cond:&[data-missing]",
272
+ "background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
273
+ "borderColor]___[value:mantine.colors.orange[5]/20]___[cond:&[data-missing]",
274
+ "color]___[value:mantine.colors.orange[8]]___[cond:&[data-missing]<___>_light",
275
+ "border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
276
+ "borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
277
+ "content]___[value:\"scope:\"]___[cond:_before",
278
+ "position]___[value:absolute]___[cond:_before",
279
+ "top]___[value:0]___[cond:_before",
280
+ "left]___[value:8]___[cond:_before",
281
+ "fontSize]___[value:2xs]___[cond:_before",
282
+ "fontWeight]___[value:500]___[cond:_before",
283
+ "lineHeight]___[value:1]___[cond:_before",
284
+ "color]___[value:mantine.colors.dimmed]___[cond:_before",
285
+ "opacity]___[value:0.85]___[cond:_before",
286
+ "transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
287
+ "background]___[value:mantine.colors.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
288
+ "fontSize]___[value:xl",
289
+ "padding]___[value:1px 5px",
290
+ "minWidth]___[value:24",
291
+ "textAlign]___[value:center",
292
+ "background]___[value:mantine.colors.dark[7]",
293
+ "color]___[value:mantine.colors.defaultColor",
294
+ "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
295
+ "background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
296
+ "alignItems]___[value:flex-end",
297
+ "gap]___[value:8",
298
+ "marginBottom]___[value:4",
299
+ "marginTop]___[value:xs",
300
+ "top]___[value:12",
301
+ "right]___[value:12",
302
+ "boxShadow]___[value:none",
303
+ "paddingInline]___[value:md",
304
+ "paddingBlock]___[value:xs",
457
305
  "marginTop]___[value:sm",
458
- "color]___[value:dark",
459
- "position]___[value:left-start",
460
- "position]___[value:top-start",
461
- "offset]___[value:4",
462
- "paddingInline]___[value:5",
463
- "paddingBottom]___[value:8",
464
- "paddingTop]___[value:4",
465
- "boxShadow]___[value:xl",
466
- "paddingInline]___[value:4px",
467
- "color]___[value:mantine.colors.dimmed",
468
- "fontSize]___[value:10px",
469
- "maxWidth]___[value:220px",
470
- "position]___[value:right-start",
471
- "boxShadow]___[value:lg",
472
- "mainAxis]___[value:10",
473
- "opacity]___[value:0.6",
474
- "opacity]___[value:1",
475
- "padding]___[value:8",
476
- "paddingTop]___[value:6",
477
- "marginBottom]___[value:10",
478
- "marginBlock]___[value:10",
479
- "paddingTop]___[value:100%",
480
- "left]___[value:2",
481
- "bottom]___[value:2",
482
- "stroke]___[value:1.5",
483
- "color]___[value:pink",
306
+ "display]___[value:inline-flex",
307
+ "borderStyle]___[value:solid]___[cond:_hover",
308
+ "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
309
+ "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
484
310
  "color]___[value:orange",
485
- "background]___[value:mantine.colors.orange.light",
486
- "marginTop]___[value:xs",
487
- "position]___[value:top",
488
- "position]___[value:top-end",
489
- "display]___[value:none]___[cond:_empty",
490
- "left]___[value:1rem",
491
- "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
492
- "--ai-size]___[value:2rem]___[cond:& .action-icon",
493
- "width]___[value:65%]___[cond:& .tabler-icon",
494
- "height]___[value:65%]___[cond:& .tabler-icon",
495
- "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
496
- "boxShadow]___[value:md",
497
- "boxShadow]___[value:none]___[cond:_whenPanning",
498
- "flex]___[value:1 1 40%",
499
- "padding]___[value:4px 6px",
500
- "background]___[value:mantine.colors.gray[2]",
501
- "borderColor]___[value:mantine.colors.gray[4]",
502
- "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
503
- "background]___[value:mantine.colors.gray[3]",
504
- "boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
505
- "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
506
- "width]___[value:8",
507
- "height]___[value:8",
508
- "border]___[value:2px solid",
509
- "borderColor]___[value:mantine.colors.gray[5]",
510
- "borderRadius]___[value:3",
511
- "transform]___[value:translate(-50%, -50%)",
512
- "minWidth]___[value:200",
513
- "maxWidth]___[value:calc(100vw - 16px)",
514
- "minWidth]___[value:250]___[cond:sm",
515
- "maxWidth]___[value:90vw]___[cond:sm",
516
- "minWidth]___[value:350]___[cond:md",
517
- "maxWidth]___[value:70vw]___[cond:md",
518
- "backgroundColor]___[value:mantine.colors.body/80",
519
- "backgroundColor]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
520
- "backgroundColor]___[value:mantine.colors.body]___[cond:_whenPanning",
521
- "color]___[value:mantine.colors.gray[5]]___[cond:_dark",
522
- "padding]___[value:sm",
523
- "padding]___[value:md",
524
- "marginBottom]___[value:xs",
525
- "height]___[value:sm",
526
- "paddingBlock]___[value:2",
527
- "opacity]___[value:0.7",
528
- "marginBottom]___[value:sm",
529
- "maxHeight]___[value:60",
530
- "display]___[value:inline-block",
531
- "right]___[value:0",
532
- "--ai-radius]___[value:0px",
533
- "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
534
- "maxWidth]___[value:calc(100vw - 20px)",
535
- "minWidth]___[value:300]___[cond:sm",
536
- "maxWidth]___[value:65vw]___[cond:sm",
537
- "maxWidth]___[value:40vw]___[cond:md",
538
- "padding]___[value:2xs",
539
- "backgroundColor]___[value:transparent",
540
- "transition]___[value:all 100ms ease-in",
541
- "transition]___[value:all 120ms ease-out]___[cond:_hover",
542
- "backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
543
- "backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
544
- "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
545
- "paddingTop]___[value:0",
546
- "paddingBottom]___[value:0",
547
- "textTransform]___[value:lowercase",
548
- "transition]___[value:all 150ms ease-in-out",
549
- "--badge-radius]___[value:2px",
550
- "--badge-fz]___[value:9.5px",
551
- "--badge-padding-x]___[value:3px",
552
- "--badge-height]___[value:13.5px",
553
- "--badge-lh]___[value:1",
554
- "--badge-bg]___[value:{colors.likec4.palette.fill}",
555
- "--badge-color]___[value:{colors.likec4.palette.hiContrast}",
556
- "boxShadow]___[value:none",
557
- "paddingInline]___[value:xs",
558
- "paddingBlock]___[value:sm",
559
- "likec4Palette]___[value:primary",
560
- "flex]___[value:0 0 70px",
561
- "opacity]___[value:0.25",
562
- "marginLeft]___[value:2",
563
- "bottom]___[value:0.5rem",
564
- "gap]___[value:0.4rem",
565
- "gap]___[value:0.6rem]___[cond:md",
566
- "backdropFilter]___[value:blur(8px)",
567
- "transition]___[value:all 175ms ease-in",
568
- "transform]___[value:scale(1.1)]___[cond:_hover",
569
- "transitionDuration]___[value:100ms]___[cond:_active",
570
- "transform]___[value:scale(0.98) translateY(3px)]___[cond:_active",
571
- "width]___[value:0.85em]___[cond:& .tabler-icon",
572
- "height]___[value:0.85em]___[cond:& .tabler-icon",
573
- "background]___[value:mantine.colors.primary.filled/65",
574
- "background]___[value:mantine.colors.primary.filledHover/65]___[cond:_hover",
575
- "background]___[value:mantine.colors.primary.filled/85]___[cond:_light",
576
- "background]___[value:mantine.colors.primary.filledHover/85]___[cond:_light<___>_hover",
577
- "borderColor]___[value:mantine.colors.orange[6]",
578
- "borderWidth]___[value:4]___[cond:md",
579
- "paddingInline]___[value:xl",
580
- "paddingLeft]___[value:lg",
581
- "paddingInline]___[value:md",
582
- "paddingRight]___[value:lg",
583
- "boxSizing]___[value:border-box",
584
- "inset]___[value:0",
585
- "width]___[value:100vw",
586
- "height]___[value:100vh",
587
- "maxWidth]___[value:100vw",
588
- "maxHeight]___[value:100vh",
589
- "background]___[value:[transparent]",
590
- "backdropFilter]___[value:auto]___[cond:_backdrop",
591
- "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
592
- "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
593
- "gap]___[value:lg",
594
- "backgroundColor]___[value:mantine.colors.body",
595
- "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
596
- "border]___[value:none",
597
- "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent), color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px, color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px) ",
598
- "cursor]___[value:move",
599
- "fontFamily]___[value:likec4.element",
600
- "fontOpticalSizing]___[value:auto",
601
- "fontStyle]___[value:normal",
602
- "fontSize]___[value:24px",
603
- "lineHeight]___[value:xs",
604
- "flex]___[value:0 0 40px",
605
- "height]___[value:40px",
606
- "width]___[value:40px",
607
- "mixBlendMode]___[value:hard-light]___[cond:_dark",
608
- "width]___[value:100%]___[cond:& :where(svg, img)",
609
- "height]___[value:auto]___[cond:& :where(svg, img)",
610
- "maxHeight]___[value:100%]___[cond:& :where(svg, img)",
611
- "pointerEvents]___[value:none]___[cond:& :where(svg, img)",
612
- "filter]___[value: 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%)) ]___[cond:& :where(svg, img)",
613
- "background]___[value:mantine.colors.body",
614
- "padding]___[value:10px 8px",
615
- "border]___[value:1px dashed",
616
- "--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
617
- "--icon-color]___[value:{colors.mantine.colors.dark[1]}]___[cond:_hover",
618
- "--view-title-color]___[value:{colors.mantine.colors.defaultColor}]___[cond:_hover",
619
- "--icon-color]___[value:{colors.mantine.colors.gray[6]}]___[cond:_light",
620
- "--view-title-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light",
621
- "--icon-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light<___>_hover",
622
- "transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
623
- "color]___[value:[var(--icon-color, {colors.mantine.colors.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
624
- "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
625
- "color]___[value:mantine.colors.defaultColor]___[cond:& .mantine-ThemeIcon-root<___>_hover",
626
- "transition]___[value:all 130ms {easings.inOut}]___[cond:& > *",
627
- "transitionTimingFunction]___[value:out]___[cond:&:hover > *",
628
- "transform]___[value:translateX(1.6px)]___[cond:&:hover > *",
629
- "color]___[value:[var(--view-title-color, {colors.mantine.colors.gray[7]})]",
630
- "lineHeight]___[value:1.4",
631
- "background]___[value:mantine.colors.gray[1]",
632
- "padding]___[value:4px",
633
- "flexGrow]___[value:1",
634
- "padding]___[value:6px 8px",
635
- "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
636
- "transition]___[value:none]___[cond:&[data-active]",
637
- "background]___[value:mantine.colors.white]___[cond:&[data-active]",
638
- "boxShadow]___[value:xs]___[cond:&[data-active]",
639
- "color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
640
- "color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
641
- "background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
642
- "color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
643
- "background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
644
- "paddingLeft]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
645
- "paddingRight]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
646
- "width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
647
- "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
648
- "paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
649
- "paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
650
- "display]___[value:grid",
651
- "gridTemplateColumns]___[value:min-content 1fr",
652
- "gridAutoRows]___[value:min-content max-content",
653
- "gap]___[value:[24px 20px]",
654
- "alignItems]___[value:baseline",
655
- "justifySelf]___[value:end",
656
- "textAlign]___[value:right",
657
- "width]___[value:14px",
658
- "height]___[value:14px",
659
- "border]___[value:3.5px solid",
660
- "borderColor]___[value:mantine.colors.dark[3]",
661
- "borderTop]___[value:none",
662
- "borderLeft]___[value:none",
663
- "borderRadius]___[value:2px",
664
- "bottom]___[value:2px",
665
- "right]___[value:2px",
666
- "cursor]___[value:se-resize",
667
- "borderWidth]___[value:4px]___[cond:_hover",
668
- "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
669
- "gap]___[value:[4px 4px]",
670
- "paddingRight]___[value:2xs",
671
- "color]___[value:mantine.colors.gray[8]",
672
- "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
673
- "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
674
- "whiteSpace]___[value:pre",
675
- "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
676
- "lineClamp]___[value:1",
677
- "marginTop]___[value:6",
678
- "stroke]___[value:1.6",
679
- "paddingTop]___[value:xs",
680
- "overscrollBehavior]___[value:none",
681
- "marginBottom]___[value:sm]___[cond:&[data-level='1']",
682
- "marginTop]___[value:0",
683
- "marginBottom]___[value:0",
684
- "transition]___[value:fast]___[cond:& > *",
685
- "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > :not([data-no-transform])",
686
- "transform]___[value:translateX(1px)]___[cond:_hover<___>& > :not([data-no-transform])",
687
- "height]___[value:36px",
688
- "paddingInlineStart]___[value:16px",
689
- "paddingInlineEnd]___[value:10px",
690
- "color]___[value:mantine.colors.gray.lightColor]___[cond:_dark",
691
- "background]___[value:mantine.colors.gray.lightHover]___[cond:_hover",
692
- "transition]___[value:fast]___[cond:& .tabler-icon",
693
- "width]___[value:90%]___[cond:& .tabler-icon",
694
- "opacity]___[value:0.65]___[cond:& .tabler-icon",
695
- "stroke]___[value:1.2",
696
- "offset]___[value:0",
697
- "paddingBlock]___[value:4",
698
- "padding]___[value:3px 6px",
699
- "background]___[value:likec4.palette.fill/75",
700
- "lineHeight]___[value:1.2",
701
- "background]___[value:mantine.colors.gray[1]]___[cond:_light",
702
- "color]___[value:mantine.colors.orange[4]]___[cond:&[data-missing]",
703
- "background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
704
- "borderColor]___[value:mantine.colors.orange[5]/20]___[cond:&[data-missing]",
705
- "color]___[value:mantine.colors.orange[8]]___[cond:&[data-missing]<___>_light",
706
- "border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
707
- "borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
708
- "content]___[value:\"scope:\"]___[cond:_before",
709
- "left]___[value:8]___[cond:_before",
710
- "fontSize]___[value:2xs]___[cond:_before",
711
- "fontWeight]___[value:500]___[cond:_before",
712
- "lineHeight]___[value:1]___[cond:_before",
713
- "color]___[value:mantine.colors.dimmed]___[cond:_before",
714
- "opacity]___[value:0.85]___[cond:_before",
715
- "transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
716
- "background]___[value:mantine.colors.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
717
- "fontSize]___[value:xl",
718
- "padding]___[value:1px 5px",
719
- "minWidth]___[value:24",
720
- "background]___[value:mantine.colors.dark[7]",
721
- "color]___[value:mantine.colors.defaultColor",
722
- "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
723
- "background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
724
- "gap]___[value:8",
725
- "marginBottom]___[value:4",
726
- "top]___[value:12",
727
- "right]___[value:12",
728
- "paddingBlock]___[value:xs",
729
- "display]___[value:inline-flex",
730
- "borderStyle]___[value:solid]___[cond:_hover",
731
- "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
732
- "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
733
311
  "background]___[value:mantine.colors.defaultBorder/50",
312
+ "boxShadow]___[value:xl",
734
313
  "outline]___[value:none",
735
314
  "borderRadius]___[value:var(--_border-radius)",
736
315
  "--_blur]___[value:0px",
@@ -741,7 +320,6 @@
741
320
  "--_border-radius]___[value:0px",
742
321
  "cursor]___[value:zoom-out]___[cond:_backdrop",
743
322
  "containerName]___[value:overlay-dialog",
744
- "containerType]___[value:size",
745
323
  "border]___[value:0 solid transparent",
746
324
  "inset]___[value:[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]]___[cond:sm",
747
325
  "width]___[value:calc(100vw - 2 * var(--_inset))]___[cond:sm",
@@ -787,130 +365,552 @@
787
365
  "cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
788
366
  "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:&:is(:hover, [data-selected=true]) > *",
789
367
  "gridTemplateColumns]___[value:1fr 30px 1fr",
368
+ "gap]___[value:0",
790
369
  "gap]___[value:10px 12px",
791
370
  "justifyItems]___[value:start",
792
371
  "maxHeight]___[value:70vh",
793
372
  "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
373
+ "padding]___[value:xs",
374
+ "color]___[value:dark",
375
+ "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
376
+ "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
377
+ "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
378
+ "gap]___[value:2",
379
+ "paddingBlock]___[value:3",
380
+ "offset]___[value:4",
381
+ "truncate]___[value:end",
382
+ "stroke]___[value:3.5",
383
+ "flex]___[value:1 0 auto",
384
+ "marginBottom]___[value:8px",
385
+ "containerName]___[value:likec4-tree",
386
+ "containerType]___[value:inline-size",
387
+ "outline]___[value:none !important",
388
+ "gap]___[value:4px",
389
+ "marginTop]___[value:8px",
390
+ "color]___[value:mantine.colors.dimmed",
391
+ "flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
392
+ "alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
393
+ "gap]___[value:2]___[cond:@container likec4-tree (max-width: 450px)",
394
+ "fontSize]___[value:10px",
395
+ "lineHeight]___[value:1.3",
396
+ "borderRadius]___[value:4px",
397
+ "background]___[value:mantine.colors.dark[9]/30",
398
+ "background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
399
+ "--likec4-icon-size]___[value:24px",
400
+ "--likec4-icon-size]___[value:18px]___[cond:@container likec4-tree (max-width: 450px)",
401
+ "lineHeight]___[value:1.1",
402
+ "display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
403
+ "maxWidth]___[value:8xl",
404
+ "marginInline]___[value:auto",
405
+ "paddingInline]___[value:4",
406
+ "paddingInline]___[value:6]___[cond:md",
407
+ "paddingInline]___[value:8]___[cond:lg",
408
+ "paddingBlock]___[value:md",
409
+ "order]___[value:2",
410
+ "gap]___[value:md",
411
+ "paddingLeft]___[value:48",
412
+ "flexDirection]___[value:row",
413
+ "opacity]___[value:1",
414
+ "opacity]___[value:0.3",
415
+ "grayscale]___[value:0",
416
+ "grayscale]___[value:0.9",
417
+ "filter]___[value:auto",
418
+ "opacity]___[value:1]___[cond:_groupHover",
419
+ "grayscale]___[value:0]___[cond:_groupHover",
420
+ "opacity]___[value:1]___[cond:_groupFocusWithin",
421
+ "grayscale]___[value:0]___[cond:_groupFocusWithin",
422
+ "opacity]___[value:0.5",
423
+ "marginRight]___[value:1",
424
+ "width]___[value:max-content",
425
+ "mainAxis]___[value:4",
426
+ "crossAxis]___[value:50",
427
+ "srOnly]___[value:true",
428
+ "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
429
+ "marginTop]___[value:4px",
430
+ "fontSize]___[value:13px",
431
+ "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
432
+ "background]___[value:mantine.colors.primary[8]",
433
+ "borderColor]___[value:mantine.colors.primary[9]",
434
+ "padding]___[value:12px 8px 12px 14px",
435
+ "minHeight]___[value:60px",
436
+ "outline]___[value:none]___[cond:_hover",
437
+ "borderColor]___[value:mantine.colors.primary[9]]___[cond:_hover",
438
+ "background]___[value:mantine.colors.primary[8]/60]___[cond:_hover",
439
+ "outline]___[value:none]___[cond:_focus",
440
+ "background]___[value:mantine.colors.primary[8]]___[cond:_focus",
441
+ "borderColor]___[value:mantine.colors.primary[9]]___[cond:_focus",
442
+ "outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
443
+ "background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
444
+ "borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
445
+ "borderColor]___[value:transparent]___[cond:_dark",
446
+ "background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
447
+ "background]___[value:mantine.colors.white/80]___[cond:_light",
448
+ "borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
449
+ "backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
450
+ "color]___[value:mantine.colors.gray[5]]___[cond:_light",
451
+ "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
452
+ "color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
453
+ "color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
454
+ "flex]___[value:0 0 var(--likec4-icon-size, 24px)",
455
+ "height]___[value:var(--likec4-icon-size, 24px)",
456
+ "width]___[value:var(--likec4-icon-size, 24px)",
457
+ "--ti-size]___[value:var(--likec4-icon-size, 24px)",
458
+ "width]___[value:100%]___[cond:& svg, & img",
459
+ "height]___[value:auto]___[cond:& svg, & img",
460
+ "maxHeight]___[value:100%]___[cond:& svg, & img",
461
+ "pointerEvents]___[value:none]___[cond:& svg, & img",
462
+ "strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
463
+ "fontSize]___[value:16px",
464
+ "opacity]___[value:0.4]___[cond::where([data-disabled]) &",
465
+ "color]___[value:mantine.colors.dark[1]",
466
+ "color]___[value:mantine.colors.primary[1]]___[cond:_groupHover",
467
+ "color]___[value:mantine.colors.white]___[cond:_groupHover<___>_light",
468
+ "color]___[value:mantine.colors.primary[1]]___[cond:_groupFocus",
469
+ "color]___[value:mantine.colors.white]___[cond:_groupFocus<___>_light",
470
+ "color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
471
+ "color]___[value:mantine.colors.white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
472
+ "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
473
+ "fontSize]___[value:12px",
474
+ "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
475
+ "border]___[value:2px dashed",
476
+ "borderRadius]___[value:md",
477
+ "fontSize]___[value:md",
478
+ "padding]___[value:md",
479
+ "paddingBlock]___[value:xl",
480
+ "background]___[value:mantine.colors.gray[4]/55 !important]___[cond:_focusWithin",
481
+ "background]___[value:mantine.colors.dark[5]/55 !important]___[cond:_focusWithin<___>_dark",
482
+ "background]___[value:mantine.colors.gray[3]/35]___[cond:_groupHover",
483
+ "background]___[value:mantine.colors.dark[5]/35]___[cond:_groupHover<___>_dark",
484
+ "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
485
+ "zIndex]___[value:902",
486
+ "backdropBlur]___[value:10px",
487
+ "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
488
+ "top]___[value:2rem",
489
+ "left]___[value:50%",
490
+ "maxWidth]___[value:600px",
491
+ "minWidth]___[value:200px",
492
+ "transform]___[value:translateX(-50%)",
493
+ "zIndex]___[value:903",
494
+ "marginTop]___[value:32px]___[cond:& + &",
495
+ "top]___[value:5px",
496
+ "left]___[value:4px",
497
+ "display]___[value:none]___[cond:_smallZoom",
498
+ "top]___[value:[2px]",
499
+ "right]___[value:[2px]",
500
+ "opacity]___[value:0.75]___[cond:_whenHovered",
501
+ "opacity]___[value:1]___[cond:_hover",
502
+ "pointerEvents]___[value:none",
503
+ "borderRadius]___[value:var(--_border-radius, 4px)]___[cond:_before",
504
+ "content]___[value:\" \"]___[cond:_before",
505
+ "left]___[value:0]___[cond:_before",
506
+ "width]___[value:100%]___[cond:_before",
507
+ "height]___[value:100%]___[cond:_before",
508
+ "border]___[value:transparent]___[cond:_before",
509
+ "background]___[value:likec4.palette.fill]___[cond:_before",
510
+ "backgroundClip]___[value:padding-box]___[cond:_before",
511
+ "transitionDelay]___[value:.075ms]___[cond:_before",
512
+ "transition]___[value:all {durations.slow} {easings.inOut}]___[cond:_noReduceGraphics<___>_before",
513
+ "transitionDelay]___[value:.2s]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
514
+ "transitionTimingFunction]___[value:in]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
515
+ "opacity]___[value:var(--_compound-opacity, 1)]___[cond:&:is([data-compound-transparent])<___>_before",
516
+ "borderWidth]___[value:calc(var(--_border-width, 2px) - 1px)]___[cond:&:is([data-compound-transparent])<___>_before",
517
+ "borderRadius]___[value:var(--_border-radius, 4px)",
518
+ "transition]___[value:all 250ms {easings.inOut}",
519
+ "borderStyle]___[value:dashed",
520
+ "borderWidth]___[value:[var(--_border-width, 2px)]",
521
+ "borderColor]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} var(--_border-opacity-percent, 100%), transparent)]",
522
+ "overflow]___[value:visible",
523
+ "visibility]___[value:hidden",
524
+ "visibility]___[value:visible]___[cond:_whenFocused",
525
+ "visibility]___[value:visible]___[cond:_whenSelected",
526
+ "display]___[value:none]___[cond:_whenPanning",
527
+ "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]",
528
+ "strokeWidth]___[value:4",
529
+ "fill]___[value:[none]",
530
+ "animationStyle]___[value:indicator",
531
+ "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]]___[cond:_light",
532
+ "boxShadow]___[value:0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)]___[cond:_before<___>_noReduceGraphics",
533
+ "boxShadow]___[value:none]___[cond:_before<___>_whenSelected",
534
+ "boxShadow]___[value:none !important]___[cond:_before<___>_whenPanning",
535
+ "left]___[value:14px",
536
+ "top]___[value:4px",
537
+ "right]___[value:30px",
538
+ "width]___[value:auto",
539
+ "pointerEvents]___[value:all]___[cond::where(.react-flow__node.draggable) &",
540
+ "cursor]___[value:grab]___[cond::where(.react-flow__node.draggable) &",
541
+ "paddingLeft]___[value:22px]___[cond:.likec4-compound-node:has(.compound-action) &",
542
+ "fontFamily]___[value:likec4.compound",
543
+ "textTransform]___[value:uppercase",
544
+ "letterSpacing]___[value:0.2px",
545
+ "color]___[value:likec4.palette.loContrast",
546
+ "color]___[value:[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]]___[cond:[data-compound-title-inverse] &",
547
+ "color]___[value:likec4.palette.stroke]___[cond:[data-compound-title-inverse] &<___>_light",
548
+ "flex]___[value:0 0 20px",
549
+ "height]___[value:20px",
550
+ "width]___[value:20px",
551
+ "mixBlendMode]___[value:hard-light",
552
+ "mixBlendMode]___[value:normal]___[cond:_reduceGraphicsOnPan",
553
+ "filter]___[value:drop-shadow(0 0 3px rgb(0 0 0 / 12%))]___[cond:& svg, & img",
554
+ "filter]___[value:drop-shadow(0 1px 8px rgb(0 0 0 / 8%))]___[cond:& svg, & img<___>xs",
555
+ "filter]___[value:drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))]___[cond:& svg, & img<___>sm",
556
+ "filter]___[value:none]___[cond:& svg, & img<___>_reduceGraphicsOnPan",
557
+ "transitionDuration]___[value:normal",
558
+ "--actionbtn-color]___[value:color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]___[cond:[data-compound-title-inverse] &<___>_dark",
559
+ "--actionbtn-color]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
560
+ "--actionbtn-color-hovered]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
561
+ "--actionbtn-color-hovered-btn]___[value:{colors.likec4.palette.hiContrast}]___[cond:[data-compound-title-inverse] &<___>_light",
562
+ "--actionbtn-bg-hovered]___[value:{colors.likec4.palette.fill/50}]___[cond:[data-compound-title-inverse] &<___>_light",
563
+ "--actionbtn-bg-hovered-btn]___[value:{colors.likec4.palette.fill}]___[cond:[data-compound-title-inverse] &<___>_light",
564
+ "transitionDelay]___[value:0.2s",
565
+ "transitionDelay]___[value:0s]___[cond:_hover",
566
+ "likec4RelationPalette]___[value:gray",
567
+ "top]___[value:4",
568
+ "right]___[value:4",
569
+ "textAlign]___[value:left",
570
+ "whiteSpaceCollapse]___[value:preserve-breaks",
571
+ "textWrap]___[value:pretty",
572
+ "lineHeight]___[value:1.25",
573
+ "--text-fz]___[value:{fontSizes.sm}",
574
+ "--text-fz]___[value:{fontSizes.md}]___[cond:md",
575
+ "height]___[value:auto",
576
+ "background]___[value:[var(--xy-edge-label-background-color)]",
577
+ "color]___[value:[var(--xy-edge-label-color)]",
578
+ "border]___[value:0px solid transparent",
579
+ "transform]___[value:var(--edge-translate)",
580
+ "transition]___[value:all 190ms {easings.inOut}]___[cond:&:is([data-likec4-hovered='true'])",
581
+ "transform]___[value:var(--edge-translate, translate(0px, 0px)) scale(1.12)]___[cond:&:is([data-likec4-hovered='true'])",
582
+ "transitionDelay]___[value:100ms]___[cond:&:is([data-likec4-hovered='true'])",
583
+ "mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
584
+ "mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
585
+ "display]___[value:none]___[cond:_reduceGraphicsOnPan",
586
+ "fontFamily]___[value:likec4.relation",
587
+ "padding]___[value:3px 5px 5px 5px",
588
+ "maxWidth]___[value:100%",
589
+ "padding]___[value:0px",
590
+ "alignSelf]___[value:stretch",
591
+ "flex]___[value:0 0 auto",
592
+ "fontSize]___[value:14px",
593
+ "padding]___[value:5px 5px",
594
+ "minWidth]___[value:22px",
595
+ "borderTopLeftRadius]___[value:4px",
596
+ "borderBottomLeftRadius]___[value:4px",
597
+ "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]",
598
+ "fontVariantNumeric]___[value:tabular-nums",
599
+ "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]]___[cond::where([data-likec4-color=\"gray\"]) &<___>_dark",
600
+ "display]___[value:none !important]___[cond:_empty",
601
+ "padding]___[value:2px 5px 4px 0px",
602
+ "lineHeight]___[value:1.185",
603
+ "padding]___[value:2px 6px 4px 0px",
604
+ "opacity]___[value:0.75",
605
+ "lineClamp]___[value:5",
606
+ "strokeOpacity]___[value:0",
607
+ "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke}",
608
+ "--xy-edge-stroke-selected]___[value:{colors.likec4.relation.stroke.selected}",
609
+ "--xy-edge-label-color]___[value:{colors.likec4.relation.label}",
610
+ "--xy-edge-label-color]___[value:color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)]___[cond:_light",
611
+ "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/60}]___[cond:_light",
612
+ "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/50}]___[cond:_dark",
613
+ "--xy-edge-stroke-width]___[value:3",
614
+ "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke.selected}]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])",
615
+ "--xy-edge-stroke-width]___[value:4]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])<___>_whenSelected",
616
+ "transition]___[value:none]___[cond:_reduceGraphics",
617
+ "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
618
+ "strokeOpacity]___[value:0.08",
619
+ "transitionProperty]___[value:stroke-width, stroke-opacity",
620
+ "transitionTimingFunction]___[value:out]___[cond:_whenHovered",
621
+ "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
622
+ "strokeOpacity]___[value:0.2]___[cond:_whenHovered",
623
+ "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 6)]___[cond:_whenSelected",
624
+ "strokeOpacity]___[value:0.25]___[cond:_whenSelected",
625
+ "strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
626
+ "fill]___[value:[var(--xy-edge-stroke)]",
627
+ "stroke]___[value:[var(--xy-edge-stroke)]",
628
+ "fill]___[value:[none!]",
629
+ "strokeDashoffset]___[value:10",
630
+ "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
631
+ "animationStyle]___[value:xyedgeAnimated]___[cond:_whenHovered",
632
+ "animationDelay]___[value:450ms]___[cond:_whenHovered",
633
+ "animationStyle]___[value:xyedgeAnimated]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
634
+ "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
635
+ "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
636
+ "animationPlayState]___[value:paused]___[cond:_whenDimmed",
637
+ "animationName]___[value:none]___[cond:_smallZoom",
638
+ "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
639
+ "animationName]___[value:none]___[cond:_whenPanning",
640
+ "--ai-bg]___[value:var(--xy-edge-label-background-color)",
641
+ "--ai-hover]___[value:color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)",
642
+ "--ai-size]___[value:var(--ai-size-sm)",
643
+ "--ai-radius]___[value:var(--mantine-radius-sm)",
644
+ "translateY]___[value:1px]___[cond:_hover",
645
+ "scale]___[value:1.15]___[cond:_hover",
646
+ "translateY]___[value:-1px]___[cond:_active",
647
+ "scale]___[value:0.9]___[cond:_active",
648
+ "opacity]___[value:1]___[cond:_whenHovered",
649
+ "width]___[value:80%]___[cond:& .tabler-icon",
650
+ "height]___[value:80%]___[cond:& .tabler-icon",
651
+ "strokeWidth]___[value:2]___[cond:& .tabler-icon",
652
+ "zIndex]___[value:1",
653
+ "top]___[value:calc(100% - 30px)",
654
+ "top]___[value:2",
655
+ "right]___[value:2",
656
+ "right]___[value:5px]___[cond:_shapeBrowser",
657
+ "top]___[value:14px]___[cond:_shapeCylinder",
658
+ "top]___[value:14px]___[cond:_shapeStorage",
659
+ "top]___[value:1px]___[cond:_shapeQueue",
660
+ "right]___[value:12px]___[cond:_shapeQueue",
661
+ "top]___[value:calc(100% - 4px)]___[cond:_before",
662
+ "height]___[value:24px]___[cond:_before",
663
+ "background]___[value:[transparent]]___[cond:_before",
664
+ "pointerEvents]___[value:all]___[cond:_before",
665
+ "outline]___[value:none]___[cond:_focusVisible",
666
+ "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
667
+ "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
668
+ "visibility]___[value:hidden]___[cond:_smallZoom",
669
+ "stroke]___[value:likec4.palette.loContrast",
670
+ "strokeWidth]___[value:8",
671
+ "strokeOpacity]___[value:0.8",
672
+ "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]]___[cond:_light",
673
+ "visibility]___[value:visible]___[cond:_groupFocusVisible",
674
+ "animationStyle]___[value:indicator]___[cond:_whenSelected",
675
+ "fill]___[value:likec4.palette.fill",
676
+ "fill]___[value:likec4.palette.stroke",
677
+ "fill]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
678
+ "fill]___[value:likec4.palette.fill]___[cond:.shape-svg-multiple &",
679
+ "stroke]___[value:likec4.palette.stroke",
680
+ "transformOrigin]___[value:50% 50%",
681
+ "transformOrigin]___[value:75% 25%]___[cond:_shapeQueue",
682
+ "transformOrigin]___[value:50% 100%]___[cond:_shapeCylinder",
683
+ "transformOrigin]___[value:50% 100%]___[cond:_shapeStorage",
684
+ "transform]___[value:translate(14px, 14px) perspective(300px) translateZ(-8px)",
685
+ "filter]___[value:brightness(0.65) saturate(0.8)",
686
+ "stroke]___[value:[none]",
687
+ "display]___[value:none]___[cond:_whenSelected",
688
+ "display]___[value:none]___[cond:_whenFocused",
689
+ "transition]___[value:fill 120ms linear, filter 130ms {easings.inOut}",
690
+ "transitionDelay]___[value:0ms",
691
+ "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21)) drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1)) ",
692
+ "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond:_whenHovered",
693
+ "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond::where([data-likec4-level='true']) &",
694
+ "filter]___[value:none]___[cond:_whenSelected",
695
+ "filter]___[value:none]___[cond:_smallZoom",
696
+ "transition]___[value:none]___[cond:_whenPanning",
697
+ "filter]___[value:none]___[cond:_whenPanning",
698
+ "bottom]___[value:0",
699
+ "padding]___[value:4",
700
+ "bottom]___[value:5]___[cond:_shapeCylinder",
701
+ "bottom]___[value:5]___[cond:_shapeStorage",
702
+ "bottom]___[value:0]___[cond:_shapeQueue",
703
+ "paddingLeft]___[value:14]___[cond:_shapeQueue",
704
+ "layerStyle]___[value:likec4.tag",
705
+ "maxWidth]___[value:50",
706
+ "height]___[value:5",
707
+ "height]___[value:12]___[cond:_whenHovered",
708
+ "borderRadius]___[value:4]___[cond:_whenHovered",
709
+ "transitionDelay]___[value:.08s]___[cond:_whenHovered",
710
+ "fontSize]___[value:lg",
711
+ "borderRadius]___[value:4",
712
+ "paddingInline]___[value:6",
713
+ "paddingBottom]___[value:sm",
714
+ "translate]___[value:auto",
715
+ "translateX]___[value:-8",
716
+ "textStyle]___[value:likec4.node.primary",
717
+ "flexGrow]___[value:0",
718
+ "flexShrink]___[value:1",
719
+ "textStyle]___[value:likec4.node.secondary",
720
+ "textOverflow]___[value:ellipsis",
721
+ "display]___[value:none]___[cond:_shapeSizeXs",
722
+ "fontSize]___[value:calc(var(--likec4-text-size) * 0.635)",
723
+ "lineHeight]___[value:1.125",
724
+ "textWrap]___[value:balance",
725
+ "opacity]___[value:0.92",
726
+ "display]___[value:none]___[cond:_shapeSizeSm",
727
+ "flex]___[value:0 0 var(--icon-size)",
728
+ "height]___[value:var(--icon-size)",
729
+ "width]___[value:var(--icon-size)",
730
+ "height]___[value:fit-content",
731
+ "width]___[value:fit-content",
732
+ "maxHeight]___[value:100%",
733
+ "margin]___[value:0 auto",
734
+ "paddingTop]___[value:var(--likec4-spacing)",
735
+ "paddingBottom]___[value:var(--likec4-spacing)",
736
+ "paddingLeft]___[value:calc(var(--likec4-spacing) + 8px)",
737
+ "paddingRight]___[value:calc(var(--likec4-spacing) + 8px)",
738
+ "gap]___[value:12px",
739
+ "paddingLeft]___[value:46px]___[cond:_shapeQueue",
740
+ "paddingRight]___[value:16px]___[cond:_shapeQueue",
741
+ "paddingLeft]___[value:46px]___[cond:_shapeMobile",
742
+ "paddingRight]___[value:16px]___[cond:_shapeMobile",
743
+ "paddingTop]___[value:30px]___[cond:_shapeCylinder",
744
+ "paddingTop]___[value:30px]___[cond:_shapeStorage",
745
+ "paddingTop]___[value:32px]___[cond:_shapeBrowser",
746
+ "paddingBottom]___[value:28px]___[cond:_shapeBrowser",
747
+ "--icon-size]___[value:24px]___[cond:_shapeSizeXs",
748
+ "--icon-size]___[value:36px]___[cond:_shapeSizeSm",
749
+ "--icon-size]___[value:60px]___[cond:_shapeSizeMd",
750
+ "--icon-size]___[value:82px]___[cond:_shapeSizeLg",
751
+ "gap]___[value:16px]___[cond:_shapeSizeLg",
752
+ "--icon-size]___[value:90px]___[cond:_shapeSizeXl",
753
+ "gap]___[value:16px]___[cond:_shapeSizeXl",
754
+ "gap]___[value:16px",
755
+ "flex]___[value:0 1 auto",
756
+ "gap]___[value:8px",
757
+ "minWidth]___[value:calc(50% + var(--icon-size))",
758
+ "lineClamp]___[value:2",
759
+ "lineClamp]___[value:3",
760
+ "maxHeight]___[value:8rem",
761
+ "top]___[value:1",
762
+ "right]___[value:1",
763
+ "zIndex]___[value:9",
764
+ "offset]___[value:16",
765
+ "marginTop]___[value:2",
766
+ "overflowY]___[value:scroll",
767
+ "minWidth]___[value:250px",
768
+ "maxWidth]___[value:min(90vw, 500px)",
769
+ "fontSize]___[value:xxs",
770
+ "padding]___[value:2px 4px",
771
+ "borderRadius]___[value:2",
772
+ "background]___[value:likec4.palette.fill/30",
773
+ "lineHeight]___[value:[1.11]",
774
+ "color]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]]___[cond:_light",
775
+ "color]___[value:likec4.palette.loContrast]___[cond:_dark",
776
+ "top]___[value:5",
777
+ "right]___[value:6",
778
+ "gap]___[value:3",
779
+ "stroke]___[value:2.5",
780
+ "width]___[value:xs",
781
+ "mixBlendMode]___[value:normal",
782
+ "fill]___[value:likec4.relation.stroke",
783
+ "stroke]___[value:likec4.relation.stroke",
784
+ "fillOpacity]___[value:0.75",
785
+ "strokeWidth]___[value:1",
786
+ "cursor]___[value:grab",
787
+ "pointerEvents]___[value:auto",
788
+ "fillOpacity]___[value:1]___[cond:_hover",
789
+ "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
790
+ "strokeWidth]___[value:10]___[cond:_hover",
791
+ "transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
792
+ "visibility]___[value:visible]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
793
+ "transition]___[value:fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
794
+ "transitionDelay]___[value:50ms]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
795
+ "fillOpacity]___[value:1]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
796
+ "strokeWidth]___[value:5]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
797
+ "cursor]___[value:grabbing",
798
+ "cursor]___[value:grabbing !important]___[cond:& *",
799
+ "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
800
+ "position]___[value:right-start",
801
+ "boxShadow]___[value:lg",
802
+ "mainAxis]___[value:10",
803
+ "opacity]___[value:0.6",
804
+ "padding]___[value:8",
805
+ "paddingTop]___[value:6",
806
+ "marginBottom]___[value:10",
807
+ "marginBlock]___[value:10",
808
+ "paddingTop]___[value:100%",
809
+ "left]___[value:2",
810
+ "bottom]___[value:2",
811
+ "stroke]___[value:1.5",
812
+ "color]___[value:pink",
813
+ "background]___[value:mantine.colors.orange.light",
814
+ "position]___[value:top",
815
+ "position]___[value:top-end",
816
+ "display]___[value:none]___[cond:_empty",
817
+ "left]___[value:1rem",
818
+ "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
819
+ "--ai-size]___[value:2rem]___[cond:& .action-icon",
820
+ "width]___[value:65%]___[cond:& .tabler-icon",
821
+ "height]___[value:65%]___[cond:& .tabler-icon",
822
+ "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
823
+ "boxShadow]___[value:none]___[cond:_whenPanning",
824
+ "flex]___[value:1 1 40%",
825
+ "padding]___[value:4px 6px",
826
+ "background]___[value:mantine.colors.gray[2]",
827
+ "borderColor]___[value:mantine.colors.gray[4]",
828
+ "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
829
+ "background]___[value:mantine.colors.gray[3]",
830
+ "boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
831
+ "width]___[value:8",
832
+ "height]___[value:8",
833
+ "border]___[value:2px solid",
834
+ "borderColor]___[value:mantine.colors.gray[5]",
835
+ "transform]___[value:translate(-50%, -50%)",
836
+ "minWidth]___[value:200",
837
+ "maxWidth]___[value:calc(100vw - 16px)",
838
+ "minWidth]___[value:250]___[cond:sm",
839
+ "maxWidth]___[value:90vw]___[cond:sm",
840
+ "minWidth]___[value:350]___[cond:md",
841
+ "maxWidth]___[value:70vw]___[cond:md",
842
+ "backgroundColor]___[value:mantine.colors.body/80",
843
+ "backgroundColor]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
844
+ "backgroundColor]___[value:mantine.colors.body]___[cond:_whenPanning",
845
+ "color]___[value:mantine.colors.gray[5]]___[cond:_dark",
846
+ "padding]___[value:sm",
847
+ "marginBottom]___[value:xs",
848
+ "height]___[value:sm",
849
+ "paddingBlock]___[value:2",
850
+ "opacity]___[value:0.7",
851
+ "maxHeight]___[value:60",
852
+ "right]___[value:0",
853
+ "--ai-radius]___[value:0px",
854
+ "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
855
+ "maxWidth]___[value:calc(100vw - 20px)",
856
+ "minWidth]___[value:300]___[cond:sm",
857
+ "maxWidth]___[value:65vw]___[cond:sm",
858
+ "maxWidth]___[value:40vw]___[cond:md",
859
+ "backgroundColor]___[value:transparent",
860
+ "transition]___[value:all 100ms ease-in",
861
+ "transition]___[value:all 120ms ease-out]___[cond:_hover",
862
+ "backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
863
+ "backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
864
+ "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
865
+ "paddingTop]___[value:0",
866
+ "paddingBottom]___[value:0",
867
+ "textTransform]___[value:lowercase",
868
+ "transition]___[value:all 150ms ease-in-out",
869
+ "--badge-radius]___[value:2px",
870
+ "--badge-fz]___[value:9.5px",
871
+ "--badge-padding-x]___[value:3px",
872
+ "--badge-height]___[value:13.5px",
873
+ "--badge-lh]___[value:1",
874
+ "--badge-bg]___[value:{colors.likec4.palette.fill}",
875
+ "--badge-color]___[value:{colors.likec4.palette.hiContrast}",
876
+ "paddingBlock]___[value:sm",
877
+ "likec4Palette]___[value:primary",
878
+ "flex]___[value:0 0 70px",
879
+ "opacity]___[value:0.25",
880
+ "marginLeft]___[value:2",
881
+ "bottom]___[value:0.5rem",
882
+ "gap]___[value:0.4rem",
883
+ "gap]___[value:0.6rem]___[cond:md",
884
+ "backdropFilter]___[value:blur(8px)",
885
+ "transition]___[value:all 175ms ease-in",
886
+ "transform]___[value:scale(1.1)]___[cond:_hover",
887
+ "transitionDuration]___[value:100ms]___[cond:_active",
888
+ "transform]___[value:scale(0.98) translateY(3px)]___[cond:_active",
889
+ "width]___[value:0.85em]___[cond:& .tabler-icon",
890
+ "height]___[value:0.85em]___[cond:& .tabler-icon",
891
+ "background]___[value:mantine.colors.primary.filled/65",
892
+ "background]___[value:mantine.colors.primary.filledHover/65]___[cond:_hover",
893
+ "background]___[value:mantine.colors.primary.filled/85]___[cond:_light",
894
+ "background]___[value:mantine.colors.primary.filledHover/85]___[cond:_light<___>_hover",
895
+ "borderColor]___[value:mantine.colors.orange[6]",
896
+ "borderWidth]___[value:4]___[cond:md",
897
+ "paddingInline]___[value:xl",
898
+ "paddingLeft]___[value:lg",
899
+ "paddingRight]___[value:lg",
794
900
  "borderWidth]___[value:3px",
795
- "borderRadius]___[value:md",
796
- "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
797
- "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
798
- "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
799
- "paddingBlock]___[value:3",
800
- "stroke]___[value:3.5",
801
- "flex]___[value:1 0 auto",
802
901
  "strokeWidth]___[value:5",
803
902
  "border]___[value:3px dashed",
804
- "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity, 95%))]",
805
- "backgroundColor]___[value:[rgb(250 250 250 / var(--_opacity, 95%))]]___[cond:_light",
806
- "backdropFilter]___[value:auto",
807
- "backdropBlur]___[value:var(--_blur, 10px)",
808
- "paddingTop]___[value:20",
809
- "paddingLeft]___[value:16",
810
- "paddingRight]___[value:16",
811
- "height]___[value:100cqh]___[cond:xs",
812
- "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
813
- "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
814
- "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
815
- "containerName]___[value:likec4-search-elements",
816
- "paddingInline]___[value:sm",
817
- "order]___[value:6",
818
- "paddingRight]___[value:xs",
819
- "marginBottom]___[value:8px",
820
- "containerName]___[value:likec4-tree",
821
- "containerType]___[value:inline-size",
822
- "outline]___[value:none !important",
823
- "marginTop]___[value:8px",
824
- "flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
825
- "alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
826
- "gap]___[value:2]___[cond:@container likec4-tree (max-width: 450px)",
827
- "lineHeight]___[value:1.3",
828
- "background]___[value:mantine.colors.dark[9]/30",
829
- "background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
830
- "--likec4-icon-size]___[value:24px",
831
- "--likec4-icon-size]___[value:18px]___[cond:@container likec4-tree (max-width: 450px)",
832
- "lineHeight]___[value:1.1",
833
- "display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
834
- "maxWidth]___[value:8xl",
835
- "paddingInline]___[value:4",
836
- "paddingInline]___[value:6]___[cond:md",
837
- "paddingInline]___[value:8]___[cond:lg",
838
- "paddingBlock]___[value:md",
839
- "order]___[value:2",
840
- "gap]___[value:md",
841
- "paddingLeft]___[value:48",
842
- "opacity]___[value:0.3",
843
- "grayscale]___[value:0",
844
- "grayscale]___[value:0.9",
845
- "filter]___[value:auto",
846
- "opacity]___[value:1]___[cond:_groupHover",
847
- "grayscale]___[value:0]___[cond:_groupHover",
848
- "opacity]___[value:1]___[cond:_groupFocusWithin",
849
- "grayscale]___[value:0]___[cond:_groupFocusWithin",
850
- "opacity]___[value:0.5",
851
- "marginRight]___[value:1",
852
- "mainAxis]___[value:4",
853
- "crossAxis]___[value:50",
854
- "srOnly]___[value:true",
855
- "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
856
- "marginTop]___[value:4px",
857
- "fontSize]___[value:13px",
858
- "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
859
- "background]___[value:mantine.colors.primary[8]",
860
- "borderColor]___[value:mantine.colors.primary[9]",
861
- "padding]___[value:12px 8px 12px 14px",
862
- "minHeight]___[value:60px",
863
- "outline]___[value:none]___[cond:_hover",
864
- "borderColor]___[value:mantine.colors.primary[9]]___[cond:_hover",
865
- "background]___[value:mantine.colors.primary[8]/60]___[cond:_hover",
866
- "outline]___[value:none]___[cond:_focus",
867
- "background]___[value:mantine.colors.primary[8]]___[cond:_focus",
868
- "borderColor]___[value:mantine.colors.primary[9]]___[cond:_focus",
869
- "outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
870
- "background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
871
- "borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
872
- "borderColor]___[value:transparent]___[cond:_dark",
873
- "background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
874
- "background]___[value:mantine.colors.white/80]___[cond:_light",
875
- "borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
876
- "backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
877
- "color]___[value:mantine.colors.gray[5]]___[cond:_light",
878
- "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
879
- "color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
880
- "color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
881
- "flex]___[value:0 0 var(--likec4-icon-size, 24px)",
882
- "height]___[value:var(--likec4-icon-size, 24px)",
883
- "width]___[value:var(--likec4-icon-size, 24px)",
884
- "--ti-size]___[value:var(--likec4-icon-size, 24px)",
885
- "strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
886
- "fontSize]___[value:16px",
887
- "opacity]___[value:0.4]___[cond::where([data-disabled]) &",
888
- "color]___[value:mantine.colors.dark[1]",
889
- "color]___[value:mantine.colors.primary[1]]___[cond:_groupHover",
890
- "color]___[value:mantine.colors.white]___[cond:_groupHover<___>_light",
891
- "color]___[value:mantine.colors.primary[1]]___[cond:_groupFocus",
892
- "color]___[value:mantine.colors.white]___[cond:_groupFocus<___>_light",
893
- "color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
894
- "color]___[value:mantine.colors.white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
895
- "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
896
- "fontSize]___[value:12px",
897
- "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
898
- "border]___[value:2px dashed",
899
- "fontSize]___[value:md",
900
- "paddingBlock]___[value:xl",
901
- "background]___[value:mantine.colors.gray[4]/55 !important]___[cond:_focusWithin",
902
- "background]___[value:mantine.colors.dark[5]/55 !important]___[cond:_focusWithin<___>_dark",
903
- "background]___[value:mantine.colors.gray[3]/35]___[cond:_groupHover",
904
- "background]___[value:mantine.colors.dark[5]/35]___[cond:_groupHover<___>_dark",
905
- "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
906
- "zIndex]___[value:902",
907
- "backdropBlur]___[value:10px",
908
- "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
909
- "top]___[value:2rem",
910
- "maxWidth]___[value:600px",
911
- "minWidth]___[value:200px",
912
- "zIndex]___[value:903",
913
- "marginTop]___[value:32px]___[cond:& + &",
903
+ "position]___[value:right-end",
904
+ "offset]___[value:2",
905
+ "paddingInline]___[value:3",
906
+ "height]___[value:xs",
907
+ "justifyContent]___[value:flex-start",
908
+ "position]___[value:left-start",
909
+ "position]___[value:top-start",
910
+ "paddingInline]___[value:5",
911
+ "paddingTop]___[value:4",
912
+ "paddingInline]___[value:4px",
913
+ "maxWidth]___[value:220px",
914
914
  "likec4Palette]___[value:amber",
915
915
  "likec4Palette]___[value:blue",
916
916
  "likec4Palette]___[value:gray",