@likec4/diagram 1.32.2 → 1.34.0

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.53.7",
+  "schemaVersion": "0.54.0",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -13,890 +13,904 @@
       "WebkitUserSelect]___[value:none]___[cond:& .react-flow__pane",
       "display]___[value:none]___[cond:& .react-flow__attribution",
       "position]___[value:absolute",
-      "top]___[value:5px",
-      "left]___[value:4px",
-      "display]___[value:none]___[cond:_smallZoom",
-      "stroke]___[value:2",
-      "top]___[value:[2px]",
-      "right]___[value:[2px]",
-      "opacity]___[value:0.75]___[cond:_whenHovered",
-      "opacity]___[value:1]___[cond:_hover",
-      "stroke]___[value:1.8",
-      "position]___[value:relative",
-      "width]___[value:100%",
-      "height]___[value:100%",
-      "padding]___[value:0",
-      "margin]___[value:0",
-      "border]___[value:transparent",
-      "pointerEvents]___[value:none",
-      "borderRadius]___[value:var(--_border-radius, 4px)]___[cond:_before",
-      "content]___[value:\" \"]___[cond:_before",
-      "position]___[value:absolute]___[cond:_before",
-      "top]___[value:0]___[cond:_before",
-      "left]___[value:0]___[cond:_before",
-      "width]___[value:100%]___[cond:_before",
-      "height]___[value:100%]___[cond:_before",
-      "border]___[value:transparent]___[cond:_before",
-      "background]___[value:likec4.palette.fill]___[cond:_before",
-      "backgroundClip]___[value:padding-box]___[cond:_before",
-      "transitionDelay]___[value:.075ms]___[cond:_before",
-      "transition]___[value:all {durations.slow} {easings.inOut}]___[cond:_noReduceGraphics<___>_before",
-      "transitionDelay]___[value:.2s]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
-      "transitionTimingFunction]___[value:in]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
-      "opacity]___[value:var(--_compound-opacity, 1)]___[cond:&:is([data-compound-transparent])<___>_before",
-      "borderWidth]___[value:calc(var(--_border-width, 2px) - 1px)]___[cond:&:is([data-compound-transparent])<___>_before",
-      "borderRadius]___[value:var(--_border-radius, 4px)",
-      "transition]___[value:all 250ms {easings.inOut}",
-      "cursor]___[value:default",
+      "top]___[value:1rem",
+      "right]___[value:1rem",
+      "color]___[value:gray",
+      "display]___[value:contents",
+      "cursor]___[value:pointer",
+      "--mantine-cursor-pointer]___[value:pointer",
+      "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
+      "position]___[value:fixed",
       "top]___[value:0",
       "left]___[value:0",
-      "borderStyle]___[value:dashed",
-      "borderWidth]___[value:[var(--_border-width, 2px)]",
-      "borderColor]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} var(--_border-opacity-percent, 100%), transparent)]",
-      "overflow]___[value:visible",
-      "visibility]___[value:hidden",
-      "visibility]___[value:visible]___[cond:_whenFocused",
-      "visibility]___[value:visible]___[cond:_whenSelected",
-      "display]___[value:none]___[cond:_whenPanning",
-      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]",
-      "strokeWidth]___[value:4",
-      "fill]___[value:[none]",
-      "animationStyle]___[value:indicator",
-      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]]___[cond:_light",
-      "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",
-      "boxShadow]___[value:none]___[cond:_before<___>_whenSelected",
-      "boxShadow]___[value:none !important]___[cond:_before<___>_whenPanning",
+      "width]___[value:100%",
+      "padding]___[value:0",
+      "color]___[value:red",
+      "padding]___[value:xl",
+      "gap]___[value:xs",
+      "marginTop]___[value:xl",
       "display]___[value:flex",
+      "overflow]___[value:hidden",
       "alignItems]___[value:center",
-      "gap]___[value:6px",
-      "left]___[value:14px",
-      "top]___[value:4px",
-      "right]___[value:30px",
-      "width]___[value:auto",
+      "gap]___[value:micro",
+      "justifyContent]___[value:stretch",
+      "transitionProperty]___[value:all",
+      "transitionDuration]___[value:fast",
+      "transitionTimingFunction]___[value:inOut",
+      "border]___[value:1px dashed {colors.mantine.colors.defaultBorder}",
+      "borderRadius]___[value:sm",
+      "color]___[value:mantine.colors.gray[7]",
+      "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
+      "transitionTimingFunction]___[value:out]___[cond:_hover",
+      "color]___[value:mantine.colors.defaultColor]___[cond:_hover",
+      "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
+      "minHeight]___[value:22px",
+      "padding]___[value:2px 8px 2px 2px",
       "minHeight]___[value:30px",
-      "pointerEvents]___[value:all]___[cond::where(.react-flow__node.draggable) &",
-      "cursor]___[value:grab]___[cond::where(.react-flow__node.draggable) &",
-      "paddingLeft]___[value:22px]___[cond:.likec4-compound-node:has(.compound-action) &",
+      "padding]___[value:3px 16px 3px 3px",
+      "flex]___[value:1 1 100%",
+      "transition]___[value:transform 100ms {easings.inOut}",
+      "transitionTimingFunction]___[value:out]___[cond:_groupHover",
+      "transitionDelay]___[value:50ms]___[cond:_groupHover",
+      "transform]___[value:translateX(1px)]___[cond:_groupHover",
+      "flex]___[value:0",
+      "color]___[value:teal",
+      "truncate]___[value:true",
+      "height]___[value:30px",
+      "paddingLeft]___[value:sm",
+      "paddingRight]___[value:4px",
+      "border]___[value:1px solid",
+      "borderColor]___[value:mantine.colors.defaultBorder",
+      "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
+      "borderColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
+      "borderColor]___[value:mantine.colors.defaultBorder]___[cond:_hover",
+      "background]___[value:mantine.colors.default",
+      "background]___[value:mantine.colors.white]___[cond:_light",
+      "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
+      "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
+      "transition]___[value:fast",
+      "transition]___[value:none !important]___[cond:_whenPanning",
+      "boxShadow]___[value:xs",
+      "boxShadow]___[value:sm]___[cond:_hover",
+      "boxShadow]___[value:none !important]___[cond:_whenPanning",
+      "fontSize]___[value:sm",
+      "fontWeight]___[value:500",
+      "paddingRight]___[value:10px",
+      "color]___[value:mantine.colors.placeholder",
       "flex]___[value:1",
-      "fontFamily]___[value:likec4.compound",
+      "paddingRight]___[value:30px]___[cond:sm",
+      "paddingRight]___[value:50px]___[cond:md",
+      "fontSize]___[value:11px",
       "fontWeight]___[value:600",
-      "fontSize]___[value:15px",
-      "textTransform]___[value:uppercase",
-      "letterSpacing]___[value:0.2px",
-      "color]___[value:likec4.palette.loContrast",
-      "color]___[value:[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]]___[cond:[data-compound-title-inverse] &",
-      "color]___[value:likec4.palette.stroke]___[cond:[data-compound-title-inverse] &<___>_light",
-      "flex]___[value:0 0 20px",
-      "height]___[value:20px",
-      "width]___[value:20px",
+      "lineHeight]___[value:1",
+      "padding]___[value:4px 7px",
+      "color]___[value:mantine.colors.gray[7]]___[cond:_light",
+      "borderColor]___[value:mantine.colors.gray[2]]___[cond:_light",
+      "color]___[value:mantine.colors.dark[0]]___[cond:_dark",
+      "borderColor]___[value:mantine.colors.dark[7]]___[cond:_dark",
+      "backgroundColor]___[value:mantine.colors.gray[2]/70]___[cond:_light",
+      "backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
+      "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
+      "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
+      "stroke]___[value:2",
+      "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity, 95%))]",
+      "backgroundColor]___[value:[rgb(250 250 250 / var(--_opacity, 95%))]]___[cond:_light",
+      "backdropFilter]___[value:auto",
+      "backdropBlur]___[value:var(--_blur, 10px)",
+      "height]___[value:100%",
+      "maxHeight]___[value:100vh",
+      "flexDirection]___[value:column",
+      "gap]___[value:sm",
+      "paddingTop]___[value:20",
+      "paddingLeft]___[value:16",
+      "paddingRight]___[value:16",
+      "paddingBottom]___[value:8",
+      "background]___[value:[transparent]",
+      "height]___[value:100cqh]___[cond:xs",
+      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
+      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
+      "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
+      "containerName]___[value:likec4-search-elements",
+      "containerType]___[value:size",
+      "flexGrow]___[value:1",
+      "alignItems]___[value:stretch",
+      "paddingInline]___[value:sm",
+      "display]___[value:grid",
+      "gap]___[value:10px",
+      "order]___[value:6",
+      "paddingRight]___[value:xs",
+      "boxSizing]___[value:border-box",
+      "margin]___[value:0",
+      "inset]___[value:0",
+      "width]___[value:100vw",
+      "height]___[value:100vh",
+      "maxWidth]___[value:100vw",
+      "border]___[value:transparent",
+      "backdropFilter]___[value:auto]___[cond:_backdrop",
+      "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
+      "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
+      "pointerEvents]___[value:all",
+      "gap]___[value:lg",
+      "backgroundColor]___[value:mantine.colors.body",
+      "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
+      "border]___[value:none",
+      "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) ",
+      "cursor]___[value:move",
+      "display]___[value:block",
+      "fontFamily]___[value:likec4.element",
+      "fontOpticalSizing]___[value:auto",
+      "fontStyle]___[value:normal",
+      "fontSize]___[value:24px",
+      "lineHeight]___[value:xs",
+      "flex]___[value:0 0 40px",
+      "height]___[value:40px",
+      "width]___[value:40px",
       "justifyContent]___[value:center",
-      "mixBlendMode]___[value:hard-light",
-      "mixBlendMode]___[value:normal]___[cond:_reduceGraphicsOnPan",
-      "width]___[value:100%]___[cond:& svg, & img",
-      "height]___[value:auto]___[cond:& svg, & img",
-      "maxHeight]___[value:100%]___[cond:& svg, & img",
-      "pointerEvents]___[value:none]___[cond:& svg, & img",
-      "filter]___[value:drop-shadow(0 0 3px rgb(0 0 0 / 12%))]___[cond:& svg, & img",
-      "filter]___[value:drop-shadow(0 1px 8px rgb(0 0 0 / 8%))]___[cond:& svg, & img<___>xs",
-      "filter]___[value:drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))]___[cond:& svg, & img<___>sm",
-      "filter]___[value:none]___[cond:& svg, & img<___>_reduceGraphicsOnPan",
+      "alignSelf]___[value:flex-start",
+      "mixBlendMode]___[value:hard-light]___[cond:_dark",
+      "width]___[value:100%]___[cond:& :where(svg, img)",
+      "height]___[value:auto]___[cond:& :where(svg, img)",
+      "maxHeight]___[value:100%]___[cond:& :where(svg, img)",
+      "pointerEvents]___[value:none]___[cond:& :where(svg, img)",
+      "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)",
       "objectFit]___[value:contain]___[cond:& img",
-      "truncate]___[value:end",
-      "transitionDuration]___[value:normal",
-      "--actionbtn-color]___[value:color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]___[cond:[data-compound-title-inverse] &<___>_dark",
-      "--actionbtn-color]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-color-hovered]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-color-hovered-btn]___[value:{colors.likec4.palette.hiContrast}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-bg-hovered]___[value:{colors.likec4.palette.fill/50}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-bg-hovered-btn]___[value:{colors.likec4.palette.fill}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "transitionDelay]___[value:0.2s",
-      "transitionDelay]___[value:0s]___[cond:_hover",
-      "likec4RelationPalette]___[value:gray",
-      "top]___[value:4",
-      "right]___[value:4",
-      "userSelect]___[value:all",
-      "textAlign]___[value:left",
-      "whiteSpaceCollapse]___[value:preserve-breaks",
-      "textWrap]___[value:pretty",
-      "lineHeight]___[value:1.25",
-      "--text-fz]___[value:{fontSizes.sm}",
-      "--text-fz]___[value:{fontSizes.md}]___[cond:md",
-      "pointerEvents]___[value:all",
-      "cursor]___[value:pointer",
-      "height]___[value:auto",
-      "background]___[value:[var(--xy-edge-label-background-color)]",
-      "color]___[value:[var(--xy-edge-label-color)]",
-      "border]___[value:0px solid transparent",
-      "borderRadius]___[value:4px",
-      "transform]___[value:var(--edge-translate)",
-      "transition]___[value:fast",
-      "transition]___[value:all 190ms {easings.inOut}]___[cond:&:is([data-likec4-hovered='true'])",
-      "transform]___[value:var(--edge-translate, translate(0px, 0px)) scale(1.12)]___[cond:&:is([data-likec4-hovered='true'])",
-      "transitionDelay]___[value:100ms]___[cond:&:is([data-likec4-hovered='true'])",
-      "mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
-      "mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
-      "display]___[value:none]___[cond:_reduceGraphicsOnPan",
-      "fontFamily]___[value:likec4.relation",
-      "padding]___[value:3px 5px 5px 5px",
-      "flexDirection]___[value:column",
-      "width]___[value:max-content",
-      "maxWidth]___[value:100%",
-      "gap]___[value:4px",
-      "flexDirection]___[value:row",
-      "padding]___[value:0px",
-      "alignSelf]___[value:stretch",
-      "flex]___[value:0 0 auto",
-      "fontSize]___[value:14px",
-      "lineHeight]___[value:1",
-      "padding]___[value:5px 5px",
-      "textAlign]___[value:center",
-      "minWidth]___[value:22px",
-      "borderTopLeftRadius]___[value:4px",
-      "borderBottomLeftRadius]___[value:4px",
-      "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]",
-      "fontVariantNumeric]___[value:tabular-nums",
-      "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]]___[cond::where([data-likec4-color=\"gray\"]) &<___>_dark",
-      "display]___[value:contents",
-      "display]___[value:none !important]___[cond:_empty",
-      "padding]___[value:2px 5px 4px 0px",
-      "lineHeight]___[value:1.185",
-      "padding]___[value:2px 6px 4px 0px",
-      "fontSize]___[value:11px",
-      "opacity]___[value:0.75",
-      "lineClamp]___[value:5",
-      "strokeOpacity]___[value:0",
-      "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke}",
-      "--xy-edge-stroke-selected]___[value:{colors.likec4.relation.stroke.selected}",
-      "--xy-edge-label-color]___[value:{colors.likec4.relation.label}",
-      "--xy-edge-label-color]___[value:color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)]___[cond:_light",
-      "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/60}]___[cond:_light",
-      "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/50}]___[cond:_dark",
-      "--xy-edge-stroke-width]___[value:3",
-      "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke.selected}]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])",
-      "--xy-edge-stroke-width]___[value:4]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])<___>_whenSelected",
-      "transition]___[value:none]___[cond:_reduceGraphics",
-      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
-      "strokeOpacity]___[value:0.08",
-      "transitionProperty]___[value:stroke-width, stroke-opacity",
-      "transitionDuration]___[value:fast",
-      "transitionTimingFunction]___[value:inOut",
-      "transitionTimingFunction]___[value:out]___[cond:_whenHovered",
-      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
-      "strokeOpacity]___[value:0.2]___[cond:_whenHovered",
-      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 6)]___[cond:_whenSelected",
-      "strokeOpacity]___[value:0.25]___[cond:_whenSelected",
-      "strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
-      "fill]___[value:[var(--xy-edge-stroke)]",
-      "stroke]___[value:[var(--xy-edge-stroke)]",
-      "fill]___[value:[none!]",
-      "strokeDashoffset]___[value:10",
-      "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
-      "animationStyle]___[value:xyedgeAnimated]___[cond:_whenHovered",
-      "animationDelay]___[value:450ms]___[cond:_whenHovered",
-      "animationStyle]___[value:xyedgeAnimated]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
-      "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
-      "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
-      "animationPlayState]___[value:paused]___[cond:_whenDimmed",
-      "animationName]___[value:none]___[cond:_smallZoom",
-      "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
-      "animationName]___[value:none]___[cond:_whenPanning",
-      "--ai-bg]___[value:var(--xy-edge-label-background-color)",
-      "--ai-hover]___[value:color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)",
-      "--ai-size]___[value:var(--ai-size-sm)",
-      "--ai-radius]___[value:var(--mantine-radius-sm)",
-      "translateY]___[value:1px]___[cond:_hover",
-      "scale]___[value:1.15]___[cond:_hover",
-      "translateY]___[value:-1px]___[cond:_active",
-      "scale]___[value:0.9]___[cond:_active",
-      "opacity]___[value:1]___[cond:_whenHovered",
-      "width]___[value:80%]___[cond:& .tabler-icon",
-      "height]___[value:80%]___[cond:& .tabler-icon",
-      "strokeWidth]___[value:2]___[cond:& .tabler-icon",
-      "zIndex]___[value:1",
-      "top]___[value:calc(100% - 30px)",
-      "transform]___[value:translateX(-50%)",
-      "left]___[value:50%",
-      "top]___[value:2",
-      "right]___[value:2",
-      "right]___[value:5px]___[cond:_shapeBrowser",
-      "top]___[value:14px]___[cond:_shapeCylinder",
-      "top]___[value:14px]___[cond:_shapeStorage",
-      "top]___[value:1px]___[cond:_shapeQueue",
-      "right]___[value:12px]___[cond:_shapeQueue",
-      "top]___[value:calc(100% - 4px)]___[cond:_before",
-      "height]___[value:24px]___[cond:_before",
-      "background]___[value:[transparent]]___[cond:_before",
-      "pointerEvents]___[value:all]___[cond:_before",
-      "outline]___[value:none]___[cond:_focusVisible",
-      "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
-      "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
-      "visibility]___[value:hidden]___[cond:_smallZoom",
-      "stroke]___[value:likec4.palette.loContrast",
-      "strokeWidth]___[value:8",
-      "strokeOpacity]___[value:0.8",
-      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]]___[cond:_light",
-      "visibility]___[value:visible]___[cond:_groupFocusVisible",
-      "animationStyle]___[value:indicator]___[cond:_whenSelected",
-      "fill]___[value:likec4.palette.fill",
-      "fill]___[value:likec4.palette.stroke",
-      "fill]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
-      "fill]___[value:likec4.palette.fill]___[cond:.shape-svg-multiple &",
-      "stroke]___[value:likec4.palette.stroke",
-      "transformOrigin]___[value:50% 50%",
-      "transformOrigin]___[value:75% 25%]___[cond:_shapeQueue",
-      "transformOrigin]___[value:50% 100%]___[cond:_shapeCylinder",
-      "transformOrigin]___[value:50% 100%]___[cond:_shapeStorage",
-      "transform]___[value:translate(14px, 14px) perspective(300px) translateZ(-8px)",
-      "filter]___[value:brightness(0.65) saturate(0.8)",
-      "stroke]___[value:[none]",
-      "display]___[value:none]___[cond:_whenSelected",
-      "display]___[value:none]___[cond:_whenFocused",
-      "transition]___[value:fill 120ms linear, filter 130ms {easings.inOut}",
-      "transitionDelay]___[value:0ms",
-      "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)) ",
-      "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",
-      "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']) &",
-      "filter]___[value:none]___[cond:_whenSelected",
-      "filter]___[value:none]___[cond:_smallZoom",
-      "transition]___[value:none]___[cond:_whenPanning",
-      "filter]___[value:none]___[cond:_whenPanning",
-      "position]___[value:bottom-start",
-      "mainAxis]___[value:8",
-      "alignItems]___[value:flex-end",
-      "gap]___[value:4",
+      "background]___[value:mantine.colors.body",
+      "padding]___[value:10px 8px",
+      "border]___[value:1px dashed",
+      "--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
+      "--icon-color]___[value:{colors.mantine.colors.dark[1]}]___[cond:_hover",
+      "--view-title-color]___[value:{colors.mantine.colors.defaultColor}]___[cond:_hover",
+      "--icon-color]___[value:{colors.mantine.colors.gray[6]}]___[cond:_light",
+      "--view-title-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light",
+      "--icon-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light<___>_hover",
+      "transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
+      "color]___[value:[var(--icon-color, {colors.mantine.colors.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
+      "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
+      "color]___[value:mantine.colors.defaultColor]___[cond:& .mantine-ThemeIcon-root<___>_hover",
+      "transition]___[value:all 130ms {easings.inOut}]___[cond:& > *",
+      "transitionTimingFunction]___[value:out]___[cond:&:hover > *",
+      "transform]___[value:translateX(1.6px)]___[cond:&:hover > *",
+      "color]___[value:[var(--view-title-color, {colors.mantine.colors.gray[7]})]",
+      "fontSize]___[value:15px",
+      "lineHeight]___[value:1.4",
+      "background]___[value:mantine.colors.gray[1]",
+      "flexWrap]___[value:nowrap",
+      "gap]___[value:6px",
+      "padding]___[value:4px",
+      "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
+      "fontSize]___[value:xs",
+      "padding]___[value:6px 8px",
+      "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
+      "transition]___[value:none]___[cond:&[data-active]",
+      "background]___[value:mantine.colors.white]___[cond:&[data-active]",
+      "boxShadow]___[value:xs]___[cond:&[data-active]",
+      "color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
+      "color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
+      "background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
+      "color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
+      "background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
+      "position]___[value:relative",
+      "paddingLeft]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
+      "paddingRight]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
+      "width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
+      "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
+      "paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
+      "paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
+      "gridTemplateColumns]___[value:min-content 1fr",
+      "gridAutoRows]___[value:min-content max-content",
+      "gap]___[value:[24px 20px]",
+      "alignItems]___[value:baseline",
       "justifyItems]___[value:stretch",
-      "bottom]___[value:0",
-      "padding]___[value:4",
-      "bottom]___[value:5]___[cond:_shapeCylinder",
-      "bottom]___[value:5]___[cond:_shapeStorage",
-      "bottom]___[value:0]___[cond:_shapeQueue",
-      "paddingLeft]___[value:14]___[cond:_shapeQueue",
-      "layerStyle]___[value:likec4.tag",
-      "maxWidth]___[value:50",
-      "height]___[value:5",
-      "height]___[value:12]___[cond:_whenHovered",
-      "borderRadius]___[value:4]___[cond:_whenHovered",
-      "transitionDelay]___[value:.08s]___[cond:_whenHovered",
-      "border]___[value:none",
+      "justifySelf]___[value:end",
+      "textAlign]___[value:right",
       "userSelect]___[value:none",
-      "fontSize]___[value:lg",
-      "borderRadius]___[value:4",
-      "paddingInline]___[value:6",
+      "width]___[value:14px",
+      "height]___[value:14px",
+      "border]___[value:3.5px solid",
+      "borderColor]___[value:mantine.colors.dark[3]",
+      "borderTop]___[value:none",
+      "borderLeft]___[value:none",
+      "borderRadius]___[value:2px",
+      "bottom]___[value:2px",
+      "right]___[value:2px",
+      "cursor]___[value:se-resize",
+      "borderWidth]___[value:4px]___[cond:_hover",
+      "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
+      "boxShadow]___[value:md",
+      "gap]___[value:[4px 4px]",
+      "paddingRight]___[value:2xs",
+      "whiteSpace]___[value:nowrap",
+      "color]___[value:mantine.colors.gray[8]",
+      "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
+      "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
+      "padding]___[value:2xs",
+      "whiteSpace]___[value:pre",
+      "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
+      "userSelect]___[value:all",
+      "marginBottom]___[value:sm",
+      "gap]___[value:6",
+      "lineClamp]___[value:1",
       "flexWrap]___[value:wrap",
-      "paddingBottom]___[value:sm",
-      "gap]___[value:sm",
-      "textStyle]___[value:likec4.node.primary",
-      "color]___[value:likec4.palette.hiContrast",
-      "flex]___[value:0 1 auto",
-      "textStyle]___[value:likec4.node.secondary",
-      "textOverflow]___[value:ellipsis",
-      "overflow]___[value:hidden",
-      "display]___[value:none]___[cond:_shapeSizeXs",
-      "fontSize]___[value:calc(var(--likec4-text-size) * 0.635)",
-      "lineHeight]___[value:1.125",
-      "textWrap]___[value:balance",
-      "opacity]___[value:0.92",
-      "display]___[value:none]___[cond:_shapeSizeSm",
-      "flex]___[value:0 0 var(--icon-size)",
-      "height]___[value:var(--icon-size)",
-      "width]___[value:var(--icon-size)",
-      "alignSelf]___[value:flex-start",
-      "height]___[value:fit-content",
-      "width]___[value:fit-content",
-      "margin]___[value:0 auto",
-      "paddingTop]___[value:var(--likec4-spacing)",
-      "paddingBottom]___[value:var(--likec4-spacing)",
-      "paddingLeft]___[value:calc(var(--likec4-spacing) + 8px)",
-      "paddingRight]___[value:calc(var(--likec4-spacing) + 8px)",
-      "gap]___[value:12px",
-      "paddingLeft]___[value:46px]___[cond:_shapeQueue",
-      "paddingRight]___[value:16px]___[cond:_shapeQueue",
-      "paddingLeft]___[value:46px]___[cond:_shapeMobile",
-      "paddingRight]___[value:16px]___[cond:_shapeMobile",
-      "paddingTop]___[value:30px]___[cond:_shapeCylinder",
-      "paddingTop]___[value:30px]___[cond:_shapeStorage",
-      "paddingTop]___[value:32px]___[cond:_shapeBrowser",
-      "paddingBottom]___[value:28px]___[cond:_shapeBrowser",
-      "--icon-size]___[value:24px]___[cond:_shapeSizeXs",
-      "--icon-size]___[value:36px]___[cond:_shapeSizeSm",
-      "--icon-size]___[value:60px]___[cond:_shapeSizeMd",
-      "--icon-size]___[value:82px]___[cond:_shapeSizeLg",
-      "gap]___[value:16px]___[cond:_shapeSizeLg",
-      "--icon-size]___[value:90px]___[cond:_shapeSizeXl",
-      "gap]___[value:16px]___[cond:_shapeSizeXl",
-      "gap]___[value:16px",
-      "alignItems]___[value:stretch",
-      "flexWrap]___[value:nowrap",
-      "gap]___[value:8px",
-      "minWidth]___[value:calc(50% + var(--icon-size))",
+      "gap]___[value:4",
+      "marginTop]___[value:6",
+      "stroke]___[value:1.6",
+      "stroke]___[value:1.8",
+      "paddingTop]___[value:xs",
       "alignItems]___[value:flex-start",
-      "lineClamp]___[value:2",
-      "lineClamp]___[value:3",
-      "top]___[value:1rem",
-      "right]___[value:1rem",
-      "color]___[value:gray",
-      "--mantine-cursor-pointer]___[value:pointer",
-      "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
-      "position]___[value:fixed",
-      "color]___[value:red",
-      "padding]___[value:xl",
-      "gap]___[value:xs",
-      "marginTop]___[value:xl",
-      "gap]___[value:micro",
-      "justifyContent]___[value:stretch",
-      "transitionProperty]___[value:all",
-      "border]___[value:1px dashed {colors.mantine.colors.defaultBorder}",
-      "borderRadius]___[value:sm",
-      "color]___[value:mantine.colors.gray[7]",
-      "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
-      "transitionTimingFunction]___[value:out]___[cond:_hover",
-      "color]___[value:mantine.colors.defaultColor]___[cond:_hover",
-      "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
-      "minHeight]___[value:22px",
-      "padding]___[value:2px 8px 2px 2px",
-      "padding]___[value:3px 16px 3px 3px",
-      "flex]___[value:1 1 100%",
-      "transition]___[value:transform 100ms {easings.inOut}",
-      "transitionTimingFunction]___[value:out]___[cond:_groupHover",
-      "transitionDelay]___[value:50ms]___[cond:_groupHover",
-      "transform]___[value:translateX(1px)]___[cond:_groupHover",
-      "flex]___[value:0",
-      "color]___[value:teal",
-      "truncate]___[value:true",
-      "height]___[value:30px",
-      "paddingLeft]___[value:sm",
-      "paddingRight]___[value:4px",
-      "border]___[value:1px solid",
-      "borderColor]___[value:mantine.colors.defaultBorder",
-      "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
-      "borderColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
-      "borderColor]___[value:mantine.colors.defaultBorder]___[cond:_hover",
-      "background]___[value:mantine.colors.default",
-      "background]___[value:mantine.colors.white]___[cond:_light",
-      "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
-      "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
-      "transition]___[value:none !important]___[cond:_whenPanning",
-      "boxShadow]___[value:xs",
-      "boxShadow]___[value:sm]___[cond:_hover",
-      "boxShadow]___[value:none !important]___[cond:_whenPanning",
-      "fontSize]___[value:sm",
-      "fontWeight]___[value:500",
-      "paddingRight]___[value:10px",
-      "color]___[value:mantine.colors.placeholder",
-      "paddingRight]___[value:30px]___[cond:sm",
-      "paddingRight]___[value:50px]___[cond:md",
-      "padding]___[value:4px 7px",
-      "color]___[value:mantine.colors.gray[7]]___[cond:_light",
-      "borderColor]___[value:mantine.colors.gray[2]]___[cond:_light",
-      "color]___[value:mantine.colors.dark[0]]___[cond:_dark",
-      "borderColor]___[value:mantine.colors.dark[7]]___[cond:_dark",
-      "backgroundColor]___[value:mantine.colors.gray[2]/70]___[cond:_light",
-      "backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
-      "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
-      "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
-      "top]___[value:1",
-      "right]___[value:1",
-      "zIndex]___[value:9",
-      "offset]___[value:16",
-      "padding]___[value:xs",
-      "marginInline]___[value:auto",
-      "marginTop]___[value:2",
-      "gap]___[value:0",
-      "overflowY]___[value:scroll",
-      "minWidth]___[value:250px",
-      "maxWidth]___[value:min(90vw, 500px)",
-      "display]___[value:block",
-      "fontSize]___[value:xxs",
-      "whiteSpace]___[value:nowrap",
-      "padding]___[value:2px 4px",
-      "borderRadius]___[value:2",
-      "background]___[value:likec4.palette.fill/30",
-      "lineHeight]___[value:[1.11]",
-      "color]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]]___[cond:_light",
-      "color]___[value:likec4.palette.loContrast]___[cond:_dark",
-      "fontSize]___[value:xs",
-      "opacity]___[value:0.65",
-      "top]___[value:5",
-      "right]___[value:6",
-      "gap]___[value:10px",
-      "gap]___[value:3",
-      "stroke]___[value:2.5",
-      "width]___[value:xs",
-      "mixBlendMode]___[value:normal",
-      "fill]___[value:likec4.relation.stroke",
-      "stroke]___[value:likec4.relation.stroke",
-      "fillOpacity]___[value:0.75",
-      "strokeWidth]___[value:1",
-      "cursor]___[value:grab",
-      "pointerEvents]___[value:auto",
-      "fillOpacity]___[value:1]___[cond:_hover",
-      "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
-      "strokeWidth]___[value:10]___[cond:_hover",
-      "transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
-      "visibility]___[value:visible]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "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']) &",
-      "transitionDelay]___[value:50ms]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "fillOpacity]___[value:1]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "strokeWidth]___[value:5]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "cursor]___[value:grabbing",
-      "cursor]___[value:grabbing !important]___[cond:& *",
-      "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
-      "position]___[value:right-end",
-      "offset]___[value:2",
-      "paddingInline]___[value:3",
-      "height]___[value:xs",
       "--thickness]___[value:1px",
       "borderBlockEndWidth]___[value:var(--thickness)",
-      "gap]___[value:2",
-      "justifyContent]___[value:flex-start",
-      "gap]___[value:6",
+      "overscrollBehavior]___[value:none",
+      "marginBottom]___[value:sm]___[cond:&[data-level='1']",
+      "cursor]___[value:default",
+      "marginTop]___[value:0",
+      "marginBottom]___[value:0",
+      "transition]___[value:fast]___[cond:& > *",
+      "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > :not([data-no-transform])",
+      "transform]___[value:translateX(1px)]___[cond:_hover<___>& > :not([data-no-transform])",
+      "height]___[value:36px",
+      "paddingInlineStart]___[value:16px",
+      "paddingInlineEnd]___[value:10px",
+      "color]___[value:mantine.colors.gray.lightColor]___[cond:_dark",
+      "background]___[value:mantine.colors.gray.lightHover]___[cond:_hover",
+      "transition]___[value:fast]___[cond:& .tabler-icon",
+      "width]___[value:90%]___[cond:& .tabler-icon",
+      "opacity]___[value:0.65]___[cond:& .tabler-icon",
+      "stroke]___[value:1.2",
+      "position]___[value:bottom-start",
+      "offset]___[value:0",
+      "paddingInline]___[value:xs",
+      "paddingBlock]___[value:4",
+      "opacity]___[value:0.65",
+      "display]___[value:inline-block",
+      "padding]___[value:3px 6px",
+      "borderRadius]___[value:3",
+      "background]___[value:likec4.palette.fill/75",
+      "lineHeight]___[value:1.2",
+      "color]___[value:likec4.palette.hiContrast",
+      "background]___[value:mantine.colors.gray[1]]___[cond:_light",
+      "color]___[value:mantine.colors.orange[4]]___[cond:&[data-missing]",
+      "background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
+      "borderColor]___[value:mantine.colors.orange[5]/20]___[cond:&[data-missing]",
+      "color]___[value:mantine.colors.orange[8]]___[cond:&[data-missing]<___>_light",
+      "border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
+      "borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
+      "content]___[value:\"scope:\"]___[cond:_before",
+      "position]___[value:absolute]___[cond:_before",
+      "top]___[value:0]___[cond:_before",
+      "left]___[value:8]___[cond:_before",
+      "fontSize]___[value:2xs]___[cond:_before",
+      "fontWeight]___[value:500]___[cond:_before",
+      "lineHeight]___[value:1]___[cond:_before",
+      "color]___[value:mantine.colors.dimmed]___[cond:_before",
+      "opacity]___[value:0.85]___[cond:_before",
+      "transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
+      "background]___[value:mantine.colors.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
+      "fontSize]___[value:xl",
+      "padding]___[value:1px 5px",
+      "minWidth]___[value:24",
+      "textAlign]___[value:center",
+      "background]___[value:mantine.colors.dark[7]",
+      "color]___[value:mantine.colors.defaultColor",
+      "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
+      "background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
+      "alignItems]___[value:flex-end",
+      "gap]___[value:8",
+      "marginBottom]___[value:4",
+      "marginTop]___[value:xs",
+      "top]___[value:12",
+      "right]___[value:12",
+      "boxShadow]___[value:none",
+      "paddingInline]___[value:md",
+      "paddingBlock]___[value:xs",
       "marginTop]___[value:sm",
+      "display]___[value:inline-flex",
+      "borderStyle]___[value:solid]___[cond:_hover",
+      "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
+      "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
+      "color]___[value:orange",
+      "background]___[value:mantine.colors.defaultBorder/50",
+      "boxShadow]___[value:xl",
+      "outline]___[value:none",
+      "borderRadius]___[value:var(--_border-radius)",
+      "--_blur]___[value:0px",
+      "--_level]___[value:0",
+      "--_offset]___[value:0px",
+      "--_inset]___[value:calc((1 + var(--_level) * 0.75) * var(--_offset))",
+      "--_opacity]___[value:0%",
+      "--_border-radius]___[value:0px",
+      "cursor]___[value:zoom-out]___[cond:_backdrop",
+      "containerName]___[value:overlay-dialog",
+      "border]___[value:0 solid transparent",
+      "inset]___[value:[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]]___[cond:sm",
+      "width]___[value:calc(100vw - 2 * var(--_inset))]___[cond:sm",
+      "height]___[value:calc(100vh - var(--_offset) - var(--_inset))]___[cond:sm",
+      "--_border-radius]___[value:6px]___[cond:sm",
+      "padding]___[value:6px]___[cond:sm",
+      "--_offset]___[value:1rem]___[cond:sm",
+      "--_offset]___[value:1rem]___[cond:md",
+      "--_offset]___[value:2rem]___[cond:lg",
+      "--_offset]___[value:4rem]___[cond:xl",
+      "display]___[value:none]___[cond:_backdrop",
+      "backdropFilter]___[value:blur(var(--_blur))]___[cond:_backdrop",
+      "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity))]]___[cond:_backdrop<___>_dark",
+      "backgroundColor]___[value:[rgb(15 15 15/ var(--_opacity))]]___[cond:_backdrop<___>_light",
+      "borderRadius]___[value:calc(var(--_border-radius) - 2px)]___[cond:sm",
+      "position]___[value:top-right",
+      "position]___[value:top-left",
+      "marginLeft]___[value:sm",
+      "padding]___[value:6px 2px 0 2px",
+      "color]___[value:mantine.colors.text/90]___[cond:& .mantine-Text-root",
+      "fontSize]___[value:xs]___[cond:& .mantine-Text-root",
+      "fontWeight]___[value:500]___[cond:& .mantine-Text-root",
+      "lineHeight]___[value:1.2]___[cond:& .mantine-Text-root",
+      "paddingLeft]___[value:4",
+      "gridColumn]___[value:1",
+      "gridColumn]___[value:2",
+      "gridColumn]___[value:3",
+      "paddingRight]___[value:4",
+      "gridColumnStart]___[value:1",
+      "gridColumnEnd]___[value:4",
+      "borderBottom]___[value:1px solid",
+      "borderBottomColor]___[value:mantine.colors.defaultBorder",
+      "marginBottom]___[value:0px",
+      "padding]___[value:0 4px 5px 4px",
+      "fontSize]___[value:xxs]___[cond:& .mantine-Text-root",
+      "fontWeight]___[value:400]___[cond:& .mantine-Text-root",
+      "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
+      "color]___[value:mantine.colors.dimmed]___[cond:& .mantine-Text-root",
+      "borderBottom]___[value:none]___[cond:&:last-child .likec4-edge-label",
+      "marginBottom]___[value:0]___[cond:&:last-child .likec4-edge-label",
+      "transition]___[value:all 0.15s ease-in]___[cond:& > *",
+      "transition]___[value:all 0.15s ease-out]___[cond:&:is(:hover, [data-selected=true]) > *",
+      "cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
+      "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:&:is(:hover, [data-selected=true]) > *",
+      "gridTemplateColumns]___[value:1fr 30px 1fr",
+      "gap]___[value:0",
+      "gap]___[value:10px 12px",
+      "justifyItems]___[value:start",
+      "maxHeight]___[value:70vh",
+      "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
+      "padding]___[value:xs",
       "color]___[value:dark",
-      "position]___[value:left-start",
-      "position]___[value:top-start",
+      "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
+      "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
+      "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
+      "gap]___[value:2",
+      "paddingBlock]___[value:3",
       "offset]___[value:4",
-      "paddingInline]___[value:5",
-      "paddingBottom]___[value:8",
-      "paddingTop]___[value:4",
-      "boxShadow]___[value:xl",
-      "paddingInline]___[value:4px",
-      "color]___[value:mantine.colors.dimmed",
-      "fontSize]___[value:10px",
-      "maxWidth]___[value:220px",
-      "position]___[value:right-start",
-      "boxShadow]___[value:lg",
-      "mainAxis]___[value:10",
-      "opacity]___[value:0.6",
+      "truncate]___[value:end",
+      "stroke]___[value:3.5",
+      "flex]___[value:1 0 auto",
+      "marginBottom]___[value:8px",
+      "containerName]___[value:likec4-tree",
+      "containerType]___[value:inline-size",
+      "outline]___[value:none !important",
+      "gap]___[value:4px",
+      "marginTop]___[value:8px",
+      "color]___[value:mantine.colors.dimmed",
+      "flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
+      "alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
+      "gap]___[value:2]___[cond:@container likec4-tree (max-width: 450px)",
+      "fontSize]___[value:10px",
+      "lineHeight]___[value:1.3",
+      "borderRadius]___[value:4px",
+      "background]___[value:mantine.colors.dark[9]/30",
+      "background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
+      "--likec4-icon-size]___[value:24px",
+      "--likec4-icon-size]___[value:18px]___[cond:@container likec4-tree (max-width: 450px)",
+      "lineHeight]___[value:1.1",
+      "display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
+      "maxWidth]___[value:8xl",
+      "marginInline]___[value:auto",
+      "paddingInline]___[value:4",
+      "paddingInline]___[value:6]___[cond:md",
+      "paddingInline]___[value:8]___[cond:lg",
+      "paddingBlock]___[value:md",
+      "order]___[value:2",
+      "gap]___[value:md",
+      "paddingLeft]___[value:48",
+      "flexDirection]___[value:row",
       "opacity]___[value:1",
-      "padding]___[value:8",
-      "paddingTop]___[value:6",
-      "marginBottom]___[value:10",
-      "marginBlock]___[value:10",
-      "paddingTop]___[value:100%",
-      "left]___[value:2",
-      "bottom]___[value:2",
-      "stroke]___[value:1.5",
-      "color]___[value:pink",
-      "color]___[value:orange",
-      "background]___[value:mantine.colors.orange.light",
-      "marginTop]___[value:xs",
-      "position]___[value:top",
-      "position]___[value:top-end",
-      "display]___[value:none]___[cond:_empty",
-      "left]___[value:1rem",
-      "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
-      "--ai-size]___[value:2rem]___[cond:& .action-icon",
-      "width]___[value:65%]___[cond:& .tabler-icon",
-      "height]___[value:65%]___[cond:& .tabler-icon",
-      "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
-      "boxShadow]___[value:md",
-      "boxShadow]___[value:none]___[cond:_whenPanning",
-      "flex]___[value:1 1 40%",
-      "padding]___[value:4px 6px",
-      "background]___[value:mantine.colors.gray[2]",
-      "borderColor]___[value:mantine.colors.gray[4]",
-      "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
-      "background]___[value:mantine.colors.gray[3]",
-      "boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
-      "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
-      "width]___[value:8",
-      "height]___[value:8",
-      "border]___[value:2px solid",
-      "borderColor]___[value:mantine.colors.gray[5]",
-      "borderRadius]___[value:3",
-      "transform]___[value:translate(-50%, -50%)",
-      "minWidth]___[value:200",
-      "maxWidth]___[value:calc(100vw - 16px)",
-      "minWidth]___[value:250]___[cond:sm",
-      "maxWidth]___[value:90vw]___[cond:sm",
-      "minWidth]___[value:350]___[cond:md",
-      "maxWidth]___[value:70vw]___[cond:md",
-      "backgroundColor]___[value:mantine.colors.body/80",
-      "backgroundColor]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
-      "backgroundColor]___[value:mantine.colors.body]___[cond:_whenPanning",
-      "color]___[value:mantine.colors.gray[5]]___[cond:_dark",
-      "padding]___[value:sm",
+      "opacity]___[value:0.3",
+      "grayscale]___[value:0",
+      "grayscale]___[value:0.9",
+      "filter]___[value:auto",
+      "opacity]___[value:1]___[cond:_groupHover",
+      "grayscale]___[value:0]___[cond:_groupHover",
+      "opacity]___[value:1]___[cond:_groupFocusWithin",
+      "grayscale]___[value:0]___[cond:_groupFocusWithin",
+      "opacity]___[value:0.5",
+      "marginRight]___[value:1",
+      "width]___[value:max-content",
+      "mainAxis]___[value:4",
+      "crossAxis]___[value:50",
+      "srOnly]___[value:true",
+      "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
+      "marginTop]___[value:4px",
+      "fontSize]___[value:13px",
+      "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
+      "background]___[value:mantine.colors.primary[8]",
+      "borderColor]___[value:mantine.colors.primary[9]",
+      "padding]___[value:12px 8px 12px 14px",
+      "minHeight]___[value:60px",
+      "outline]___[value:none]___[cond:_hover",
+      "borderColor]___[value:mantine.colors.primary[9]]___[cond:_hover",
+      "background]___[value:mantine.colors.primary[8]/60]___[cond:_hover",
+      "outline]___[value:none]___[cond:_focus",
+      "background]___[value:mantine.colors.primary[8]]___[cond:_focus",
+      "borderColor]___[value:mantine.colors.primary[9]]___[cond:_focus",
+      "outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "borderColor]___[value:transparent]___[cond:_dark",
+      "background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
+      "background]___[value:mantine.colors.white/80]___[cond:_light",
+      "borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
+      "backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
+      "color]___[value:mantine.colors.gray[5]]___[cond:_light",
+      "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
+      "color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
+      "color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "flex]___[value:0 0 var(--likec4-icon-size, 24px)",
+      "height]___[value:var(--likec4-icon-size, 24px)",
+      "width]___[value:var(--likec4-icon-size, 24px)",
+      "--ti-size]___[value:var(--likec4-icon-size, 24px)",
+      "width]___[value:100%]___[cond:& svg, & img",
+      "height]___[value:auto]___[cond:& svg, & img",
+      "maxHeight]___[value:100%]___[cond:& svg, & img",
+      "pointerEvents]___[value:none]___[cond:& svg, & img",
+      "strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
+      "fontSize]___[value:16px",
+      "opacity]___[value:0.4]___[cond::where([data-disabled]) &",
+      "color]___[value:mantine.colors.dark[1]",
+      "color]___[value:mantine.colors.primary[1]]___[cond:_groupHover",
+      "color]___[value:mantine.colors.white]___[cond:_groupHover<___>_light",
+      "color]___[value:mantine.colors.primary[1]]___[cond:_groupFocus",
+      "color]___[value:mantine.colors.white]___[cond:_groupFocus<___>_light",
+      "color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "color]___[value:mantine.colors.white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
+      "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
+      "fontSize]___[value:12px",
+      "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
+      "border]___[value:2px dashed",
+      "borderRadius]___[value:md",
+      "fontSize]___[value:md",
       "padding]___[value:md",
-      "marginBottom]___[value:xs",
-      "height]___[value:sm",
-      "paddingBlock]___[value:2",
-      "opacity]___[value:0.7",
-      "marginBottom]___[value:sm",
-      "maxHeight]___[value:42",
-      "display]___[value:inline-block",
-      "right]___[value:0",
-      "--ai-radius]___[value:0px",
-      "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
-      "maxWidth]___[value:calc(100vw - 20px)",
-      "minWidth]___[value:300]___[cond:sm",
-      "maxWidth]___[value:65vw]___[cond:sm",
-      "maxWidth]___[value:40vw]___[cond:md",
-      "padding]___[value:2xs",
-      "backgroundColor]___[value:transparent",
-      "transition]___[value:all 100ms ease-in",
-      "transition]___[value:all 120ms ease-out]___[cond:_hover",
-      "backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
-      "backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
-      "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
-      "paddingTop]___[value:0",
-      "paddingBottom]___[value:0",
-      "textTransform]___[value:lowercase",
-      "transition]___[value:all 150ms ease-in-out",
-      "--badge-radius]___[value:2px",
-      "--badge-fz]___[value:9.5px",
-      "--badge-padding-x]___[value:3px",
-      "--badge-height]___[value:13.5px",
-      "--badge-lh]___[value:1",
-      "--badge-bg]___[value:{colors.likec4.palette.fill}",
-      "--badge-color]___[value:{colors.likec4.palette.hiContrast}",
-      "boxShadow]___[value:none",
-      "paddingInline]___[value:xs",
-      "paddingBlock]___[value:sm",
-      "likec4Palette]___[value:primary",
-      "flex]___[value:0 0 70px",
-      "opacity]___[value:0.25",
-      "marginLeft]___[value:2",
-      "bottom]___[value:0.5rem",
-      "gap]___[value:0.4rem",
-      "gap]___[value:0.6rem]___[cond:md",
-      "backdropFilter]___[value:blur(8px)",
-      "transition]___[value:all 175ms ease-in",
-      "transform]___[value:scale(1.1)]___[cond:_hover",
-      "transitionDuration]___[value:100ms]___[cond:_active",
-      "transform]___[value:scale(0.98) translateY(3px)]___[cond:_active",
-      "width]___[value:0.85em]___[cond:& .tabler-icon",
-      "height]___[value:0.85em]___[cond:& .tabler-icon",
-      "background]___[value:mantine.colors.primary.filled/65",
-      "background]___[value:mantine.colors.primary.filledHover/65]___[cond:_hover",
-      "background]___[value:mantine.colors.primary.filled/85]___[cond:_light",
-      "background]___[value:mantine.colors.primary.filledHover/85]___[cond:_light<___>_hover",
-      "borderColor]___[value:mantine.colors.orange[6]",
-      "borderWidth]___[value:4]___[cond:md",
-      "paddingInline]___[value:xl",
-      "paddingLeft]___[value:lg",
-      "paddingInline]___[value:md",
-      "paddingRight]___[value:lg",
-      "boxSizing]___[value:border-box",
-      "inset]___[value:0",
-      "width]___[value:100vw",
-      "height]___[value:100vh",
-      "maxWidth]___[value:100vw",
-      "maxHeight]___[value:100vh",
-      "background]___[value:[transparent]",
-      "backdropFilter]___[value:auto]___[cond:_backdrop",
-      "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
-      "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
-      "gap]___[value:lg",
-      "backgroundColor]___[value:mantine.colors.body",
-      "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
-      "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) ",
-      "cursor]___[value:move",
-      "fontFamily]___[value:likec4.element",
-      "fontOpticalSizing]___[value:auto",
-      "fontStyle]___[value:normal",
-      "fontSize]___[value:24px",
-      "lineHeight]___[value:xs",
-      "flex]___[value:0 0 40px",
-      "height]___[value:40px",
-      "width]___[value:40px",
-      "mixBlendMode]___[value:hard-light]___[cond:_dark",
-      "width]___[value:100%]___[cond:& :where(svg, img)",
-      "height]___[value:auto]___[cond:& :where(svg, img)",
-      "maxHeight]___[value:100%]___[cond:& :where(svg, img)",
-      "pointerEvents]___[value:none]___[cond:& :where(svg, img)",
-      "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)",
-      "background]___[value:mantine.colors.body",
-      "padding]___[value:10px 8px",
-      "border]___[value:1px dashed",
-      "--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
-      "--icon-color]___[value:{colors.mantine.colors.dark[1]}]___[cond:_hover",
-      "--view-title-color]___[value:{colors.mantine.colors.defaultColor}]___[cond:_hover",
-      "--icon-color]___[value:{colors.mantine.colors.gray[6]}]___[cond:_light",
-      "--view-title-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light",
-      "--icon-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light<___>_hover",
-      "transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
-      "color]___[value:[var(--icon-color, {colors.mantine.colors.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
-      "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
-      "color]___[value:mantine.colors.defaultColor]___[cond:& .mantine-ThemeIcon-root<___>_hover",
-      "transition]___[value:all 130ms {easings.inOut}]___[cond:& > *",
-      "transitionTimingFunction]___[value:out]___[cond:&:hover > *",
-      "transform]___[value:translateX(1.6px)]___[cond:&:hover > *",
-      "color]___[value:[var(--view-title-color, {colors.mantine.colors.gray[7]})]",
-      "lineHeight]___[value:1.4",
-      "background]___[value:mantine.colors.gray[1]",
-      "padding]___[value:4px",
-      "flexGrow]___[value:1",
-      "padding]___[value:6px 8px",
-      "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
-      "transition]___[value:none]___[cond:&[data-active]",
-      "background]___[value:mantine.colors.white]___[cond:&[data-active]",
-      "boxShadow]___[value:xs]___[cond:&[data-active]",
-      "color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
-      "color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
-      "background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
-      "color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
-      "background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
-      "paddingLeft]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
-      "paddingRight]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
-      "width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
-      "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
-      "paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
-      "paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
-      "display]___[value:grid",
-      "gridTemplateColumns]___[value:min-content 1fr",
-      "gridAutoRows]___[value:min-content max-content",
-      "gap]___[value:[20px 16px]",
-      "alignItems]___[value:baseline",
-      "justifySelf]___[value:end",
-      "width]___[value:14px",
-      "height]___[value:14px",
-      "border]___[value:3.5px solid",
-      "borderColor]___[value:mantine.colors.dark[3]",
-      "borderTop]___[value:none",
-      "borderLeft]___[value:none",
-      "borderRadius]___[value:2px",
-      "bottom]___[value:2px",
-      "right]___[value:2px",
-      "cursor]___[value:se-resize",
-      "borderWidth]___[value:4px]___[cond:_hover",
-      "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
-      "lineClamp]___[value:1",
-      "marginTop]___[value:6",
-      "stroke]___[value:1.6",
-      "paddingTop]___[value:xs",
-      "marginBottom]___[value:sm]___[cond:&[data-level='1']",
-      "marginTop]___[value:0",
-      "marginBottom]___[value:0",
-      "transition]___[value:fast]___[cond:& > *",
-      "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > :not([data-no-transform])",
-      "transform]___[value:translateX(1px)]___[cond:_hover<___>& > :not([data-no-transform])",
-      "height]___[value:36px",
-      "paddingInlineStart]___[value:16px",
-      "paddingInlineEnd]___[value:10px",
-      "color]___[value:mantine.colors.gray.lightColor]___[cond:_dark",
-      "background]___[value:mantine.colors.gray.lightHover]___[cond:_hover",
-      "transition]___[value:fast]___[cond:& .tabler-icon",
-      "width]___[value:90%]___[cond:& .tabler-icon",
-      "opacity]___[value:0.65]___[cond:& .tabler-icon",
-      "stroke]___[value:1.2",
-      "offset]___[value:0",
-      "paddingBlock]___[value:4",
-      "padding]___[value:3px 6px",
-      "background]___[value:likec4.palette.fill/75",
-      "lineHeight]___[value:1.2",
-      "background]___[value:mantine.colors.gray[1]]___[cond:_light",
-      "color]___[value:mantine.colors.orange[4]]___[cond:&[data-missing]",
-      "background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
-      "borderColor]___[value:mantine.colors.orange[5]/20]___[cond:&[data-missing]",
-      "color]___[value:mantine.colors.orange[8]]___[cond:&[data-missing]<___>_light",
-      "border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
-      "borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
-      "content]___[value:\"scope:\"]___[cond:_before",
-      "left]___[value:8]___[cond:_before",
-      "fontSize]___[value:2xs]___[cond:_before",
-      "fontWeight]___[value:500]___[cond:_before",
-      "lineHeight]___[value:1]___[cond:_before",
-      "color]___[value:mantine.colors.dimmed]___[cond:_before",
-      "opacity]___[value:0.85]___[cond:_before",
-      "transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
-      "background]___[value:mantine.colors.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
-      "fontSize]___[value:xl",
-      "padding]___[value:1px 5px",
-      "minWidth]___[value:24",
-      "background]___[value:mantine.colors.dark[7]",
-      "color]___[value:mantine.colors.defaultColor",
-      "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
-      "background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
-      "gap]___[value:8",
-      "marginBottom]___[value:4",
-      "top]___[value:12",
-      "right]___[value:12",
-      "paddingBlock]___[value:xs",
-      "display]___[value:inline-flex",
-      "borderStyle]___[value:solid]___[cond:_hover",
-      "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
-      "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
-      "background]___[value:mantine.colors.defaultBorder/50",
-      "outline]___[value:none",
-      "borderRadius]___[value:var(--_border-radius)",
-      "--_blur]___[value:0px",
-      "--_level]___[value:0",
-      "--_offset]___[value:0px",
-      "--_inset]___[value:calc((1 + var(--_level) * 0.75) * var(--_offset))",
-      "--_opacity]___[value:0%",
-      "--_border-radius]___[value:0px",
-      "cursor]___[value:zoom-out]___[cond:_backdrop",
-      "containerName]___[value:overlay-dialog",
-      "containerType]___[value:size",
-      "border]___[value:0 solid transparent",
-      "inset]___[value:[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]]___[cond:sm",
-      "width]___[value:calc(100vw - 2 * var(--_inset))]___[cond:sm",
-      "height]___[value:calc(100vh - var(--_offset) - var(--_inset))]___[cond:sm",
-      "--_border-radius]___[value:6px]___[cond:sm",
-      "padding]___[value:6px]___[cond:sm",
-      "--_offset]___[value:1rem]___[cond:sm",
-      "--_offset]___[value:1rem]___[cond:md",
-      "--_offset]___[value:2rem]___[cond:lg",
-      "--_offset]___[value:4rem]___[cond:xl",
-      "display]___[value:none]___[cond:_backdrop",
-      "backdropFilter]___[value:blur(var(--_blur))]___[cond:_backdrop",
-      "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity))]]___[cond:_backdrop<___>_dark",
-      "backgroundColor]___[value:[rgb(15 15 15/ var(--_opacity))]]___[cond:_backdrop<___>_light",
-      "borderRadius]___[value:calc(var(--_border-radius) - 2px)]___[cond:sm",
-      "position]___[value:top-right",
-      "position]___[value:top-left",
-      "marginLeft]___[value:sm",
-      "padding]___[value:6px 2px 0 2px",
-      "color]___[value:mantine.colors.text/90]___[cond:& .mantine-Text-root",
-      "fontSize]___[value:xs]___[cond:& .mantine-Text-root",
-      "fontWeight]___[value:500]___[cond:& .mantine-Text-root",
-      "lineHeight]___[value:1.2]___[cond:& .mantine-Text-root",
-      "paddingLeft]___[value:4",
-      "gridColumn]___[value:1",
-      "gridColumn]___[value:2",
-      "gridColumn]___[value:3",
-      "paddingRight]___[value:4",
-      "gridColumnStart]___[value:1",
-      "gridColumnEnd]___[value:4",
-      "borderBottom]___[value:1px solid",
-      "borderBottomColor]___[value:mantine.colors.defaultBorder",
-      "marginBottom]___[value:0px",
-      "padding]___[value:0 4px 5px 4px",
-      "fontSize]___[value:xxs]___[cond:& .mantine-Text-root",
-      "fontWeight]___[value:400]___[cond:& .mantine-Text-root",
-      "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
-      "color]___[value:mantine.colors.dimmed]___[cond:& .mantine-Text-root",
-      "borderBottom]___[value:none]___[cond:&:last-child .likec4-edge-label",
-      "marginBottom]___[value:0]___[cond:&:last-child .likec4-edge-label",
-      "transition]___[value:all 0.15s ease-in]___[cond:& > *",
-      "transition]___[value:all 0.15s ease-out]___[cond:&:is(:hover, [data-selected=true]) > *",
-      "cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
-      "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:&:is(:hover, [data-selected=true]) > *",
-      "gridTemplateColumns]___[value:1fr 30px 1fr",
-      "gap]___[value:10px 12px",
-      "justifyItems]___[value:start",
-      "maxHeight]___[value:70vh",
-      "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
+      "paddingBlock]___[value:xl",
+      "background]___[value:mantine.colors.gray[4]/55 !important]___[cond:_focusWithin",
+      "background]___[value:mantine.colors.dark[5]/55 !important]___[cond:_focusWithin<___>_dark",
+      "background]___[value:mantine.colors.gray[3]/35]___[cond:_groupHover",
+      "background]___[value:mantine.colors.dark[5]/35]___[cond:_groupHover<___>_dark",
+      "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
+      "zIndex]___[value:902",
+      "backdropBlur]___[value:10px",
+      "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
+      "top]___[value:2rem",
+      "left]___[value:50%",
+      "maxWidth]___[value:600px",
+      "minWidth]___[value:200px",
+      "transform]___[value:translateX(-50%)",
+      "zIndex]___[value:903",
+      "marginTop]___[value:32px]___[cond:& + &",
+      "top]___[value:5px",
+      "left]___[value:4px",
+      "display]___[value:none]___[cond:_smallZoom",
+      "top]___[value:[2px]",
+      "right]___[value:[2px]",
+      "opacity]___[value:0.75]___[cond:_whenHovered",
+      "opacity]___[value:1]___[cond:_hover",
+      "pointerEvents]___[value:none",
+      "borderRadius]___[value:var(--_border-radius, 4px)]___[cond:_before",
+      "content]___[value:\" \"]___[cond:_before",
+      "left]___[value:0]___[cond:_before",
+      "width]___[value:100%]___[cond:_before",
+      "height]___[value:100%]___[cond:_before",
+      "border]___[value:transparent]___[cond:_before",
+      "background]___[value:likec4.palette.fill]___[cond:_before",
+      "backgroundClip]___[value:padding-box]___[cond:_before",
+      "transitionDelay]___[value:.075ms]___[cond:_before",
+      "transition]___[value:all {durations.slow} {easings.inOut}]___[cond:_noReduceGraphics<___>_before",
+      "transitionDelay]___[value:.2s]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
+      "transitionTimingFunction]___[value:in]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
+      "opacity]___[value:var(--_compound-opacity, 1)]___[cond:&:is([data-compound-transparent])<___>_before",
+      "borderWidth]___[value:calc(var(--_border-width, 2px) - 1px)]___[cond:&:is([data-compound-transparent])<___>_before",
+      "borderRadius]___[value:var(--_border-radius, 4px)",
+      "transition]___[value:all 250ms {easings.inOut}",
+      "borderStyle]___[value:dashed",
+      "borderWidth]___[value:[var(--_border-width, 2px)]",
+      "borderColor]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} var(--_border-opacity-percent, 100%), transparent)]",
+      "overflow]___[value:visible",
+      "visibility]___[value:hidden",
+      "visibility]___[value:visible]___[cond:_whenFocused",
+      "visibility]___[value:visible]___[cond:_whenSelected",
+      "display]___[value:none]___[cond:_whenPanning",
+      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]",
+      "strokeWidth]___[value:4",
+      "fill]___[value:[none]",
+      "animationStyle]___[value:indicator",
+      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]]___[cond:_light",
+      "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",
+      "boxShadow]___[value:none]___[cond:_before<___>_whenSelected",
+      "boxShadow]___[value:none !important]___[cond:_before<___>_whenPanning",
+      "left]___[value:14px",
+      "top]___[value:4px",
+      "right]___[value:30px",
+      "width]___[value:auto",
+      "pointerEvents]___[value:all]___[cond::where(.react-flow__node.draggable) &",
+      "cursor]___[value:grab]___[cond::where(.react-flow__node.draggable) &",
+      "paddingLeft]___[value:22px]___[cond:.likec4-compound-node:has(.compound-action) &",
+      "fontFamily]___[value:likec4.compound",
+      "textTransform]___[value:uppercase",
+      "letterSpacing]___[value:0.2px",
+      "color]___[value:likec4.palette.loContrast",
+      "color]___[value:[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]]___[cond:[data-compound-title-inverse] &",
+      "color]___[value:likec4.palette.stroke]___[cond:[data-compound-title-inverse] &<___>_light",
+      "flex]___[value:0 0 20px",
+      "height]___[value:20px",
+      "width]___[value:20px",
+      "mixBlendMode]___[value:hard-light",
+      "mixBlendMode]___[value:normal]___[cond:_reduceGraphicsOnPan",
+      "filter]___[value:drop-shadow(0 0 3px rgb(0 0 0 / 12%))]___[cond:& svg, & img",
+      "filter]___[value:drop-shadow(0 1px 8px rgb(0 0 0 / 8%))]___[cond:& svg, & img<___>xs",
+      "filter]___[value:drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))]___[cond:& svg, & img<___>sm",
+      "filter]___[value:none]___[cond:& svg, & img<___>_reduceGraphicsOnPan",
+      "transitionDuration]___[value:normal",
+      "--actionbtn-color]___[value:color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]___[cond:[data-compound-title-inverse] &<___>_dark",
+      "--actionbtn-color]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-color-hovered]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-color-hovered-btn]___[value:{colors.likec4.palette.hiContrast}]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-bg-hovered]___[value:{colors.likec4.palette.fill/50}]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-bg-hovered-btn]___[value:{colors.likec4.palette.fill}]___[cond:[data-compound-title-inverse] &<___>_light",
+      "transitionDelay]___[value:0.2s",
+      "transitionDelay]___[value:0s]___[cond:_hover",
+      "likec4RelationPalette]___[value:gray",
+      "top]___[value:4",
+      "right]___[value:4",
+      "textAlign]___[value:left",
+      "whiteSpaceCollapse]___[value:preserve-breaks",
+      "textWrap]___[value:pretty",
+      "lineHeight]___[value:1.25",
+      "--text-fz]___[value:{fontSizes.sm}",
+      "--text-fz]___[value:{fontSizes.md}]___[cond:md",
+      "height]___[value:auto",
+      "background]___[value:[var(--xy-edge-label-background-color)]",
+      "color]___[value:[var(--xy-edge-label-color)]",
+      "border]___[value:0px solid transparent",
+      "transform]___[value:var(--edge-translate)",
+      "transition]___[value:all 190ms {easings.inOut}]___[cond:&:is([data-likec4-hovered='true'])",
+      "transform]___[value:var(--edge-translate, translate(0px, 0px)) scale(1.12)]___[cond:&:is([data-likec4-hovered='true'])",
+      "transitionDelay]___[value:100ms]___[cond:&:is([data-likec4-hovered='true'])",
+      "mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
+      "mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
+      "display]___[value:none]___[cond:_reduceGraphicsOnPan",
+      "fontFamily]___[value:likec4.relation",
+      "padding]___[value:3px 5px 5px 5px",
+      "maxWidth]___[value:100%",
+      "padding]___[value:0px",
+      "alignSelf]___[value:stretch",
+      "flex]___[value:0 0 auto",
+      "fontSize]___[value:14px",
+      "padding]___[value:5px 5px",
+      "minWidth]___[value:22px",
+      "borderTopLeftRadius]___[value:4px",
+      "borderBottomLeftRadius]___[value:4px",
+      "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]",
+      "fontVariantNumeric]___[value:tabular-nums",
+      "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]]___[cond::where([data-likec4-color=\"gray\"]) &<___>_dark",
+      "display]___[value:none !important]___[cond:_empty",
+      "padding]___[value:2px 5px 4px 0px",
+      "lineHeight]___[value:1.185",
+      "padding]___[value:2px 6px 4px 0px",
+      "opacity]___[value:0.75",
+      "lineClamp]___[value:5",
+      "strokeOpacity]___[value:0",
+      "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke}",
+      "--xy-edge-stroke-selected]___[value:{colors.likec4.relation.stroke.selected}",
+      "--xy-edge-label-color]___[value:{colors.likec4.relation.label}",
+      "--xy-edge-label-color]___[value:color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)]___[cond:_light",
+      "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/60}]___[cond:_light",
+      "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/50}]___[cond:_dark",
+      "--xy-edge-stroke-width]___[value:3",
+      "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke.selected}]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])",
+      "--xy-edge-stroke-width]___[value:4]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])<___>_whenSelected",
+      "transition]___[value:none]___[cond:_reduceGraphics",
+      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
+      "strokeOpacity]___[value:0.08",
+      "transitionProperty]___[value:stroke-width, stroke-opacity",
+      "transitionTimingFunction]___[value:out]___[cond:_whenHovered",
+      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
+      "strokeOpacity]___[value:0.2]___[cond:_whenHovered",
+      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 6)]___[cond:_whenSelected",
+      "strokeOpacity]___[value:0.25]___[cond:_whenSelected",
+      "strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
+      "fill]___[value:[var(--xy-edge-stroke)]",
+      "stroke]___[value:[var(--xy-edge-stroke)]",
+      "fill]___[value:[none!]",
+      "strokeDashoffset]___[value:10",
+      "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
+      "animationStyle]___[value:xyedgeAnimated]___[cond:_whenHovered",
+      "animationDelay]___[value:450ms]___[cond:_whenHovered",
+      "animationStyle]___[value:xyedgeAnimated]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
+      "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
+      "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
+      "animationPlayState]___[value:paused]___[cond:_whenDimmed",
+      "animationName]___[value:none]___[cond:_smallZoom",
+      "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
+      "animationName]___[value:none]___[cond:_whenPanning",
+      "--ai-bg]___[value:var(--xy-edge-label-background-color)",
+      "--ai-hover]___[value:color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)",
+      "--ai-size]___[value:var(--ai-size-sm)",
+      "--ai-radius]___[value:var(--mantine-radius-sm)",
+      "translateY]___[value:1px]___[cond:_hover",
+      "scale]___[value:1.15]___[cond:_hover",
+      "translateY]___[value:-1px]___[cond:_active",
+      "scale]___[value:0.9]___[cond:_active",
+      "opacity]___[value:1]___[cond:_whenHovered",
+      "width]___[value:80%]___[cond:& .tabler-icon",
+      "height]___[value:80%]___[cond:& .tabler-icon",
+      "strokeWidth]___[value:2]___[cond:& .tabler-icon",
+      "zIndex]___[value:1",
+      "top]___[value:calc(100% - 30px)",
+      "top]___[value:2",
+      "right]___[value:2",
+      "right]___[value:5px]___[cond:_shapeBrowser",
+      "top]___[value:14px]___[cond:_shapeCylinder",
+      "top]___[value:14px]___[cond:_shapeStorage",
+      "top]___[value:1px]___[cond:_shapeQueue",
+      "right]___[value:12px]___[cond:_shapeQueue",
+      "top]___[value:calc(100% - 4px)]___[cond:_before",
+      "height]___[value:24px]___[cond:_before",
+      "background]___[value:[transparent]]___[cond:_before",
+      "pointerEvents]___[value:all]___[cond:_before",
+      "outline]___[value:none]___[cond:_focusVisible",
+      "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
+      "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
+      "visibility]___[value:hidden]___[cond:_smallZoom",
+      "stroke]___[value:likec4.palette.loContrast",
+      "strokeWidth]___[value:8",
+      "strokeOpacity]___[value:0.8",
+      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]]___[cond:_light",
+      "visibility]___[value:visible]___[cond:_groupFocusVisible",
+      "animationStyle]___[value:indicator]___[cond:_whenSelected",
+      "fill]___[value:likec4.palette.fill",
+      "fill]___[value:likec4.palette.stroke",
+      "fill]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
+      "fill]___[value:likec4.palette.fill]___[cond:.shape-svg-multiple &",
+      "stroke]___[value:likec4.palette.stroke",
+      "transformOrigin]___[value:50% 50%",
+      "transformOrigin]___[value:75% 25%]___[cond:_shapeQueue",
+      "transformOrigin]___[value:50% 100%]___[cond:_shapeCylinder",
+      "transformOrigin]___[value:50% 100%]___[cond:_shapeStorage",
+      "transform]___[value:translate(14px, 14px) perspective(300px) translateZ(-8px)",
+      "filter]___[value:brightness(0.65) saturate(0.8)",
+      "stroke]___[value:[none]",
+      "display]___[value:none]___[cond:_whenSelected",
+      "display]___[value:none]___[cond:_whenFocused",
+      "transition]___[value:fill 120ms linear, filter 130ms {easings.inOut}",
+      "transitionDelay]___[value:0ms",
+      "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)) ",
+      "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",
+      "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']) &",
+      "filter]___[value:none]___[cond:_whenSelected",
+      "filter]___[value:none]___[cond:_smallZoom",
+      "transition]___[value:none]___[cond:_whenPanning",
+      "filter]___[value:none]___[cond:_whenPanning",
+      "bottom]___[value:0",
+      "padding]___[value:4",
+      "bottom]___[value:5]___[cond:_shapeCylinder",
+      "bottom]___[value:5]___[cond:_shapeStorage",
+      "bottom]___[value:0]___[cond:_shapeQueue",
+      "paddingLeft]___[value:14]___[cond:_shapeQueue",
+      "layerStyle]___[value:likec4.tag",
+      "maxWidth]___[value:50",
+      "height]___[value:5",
+      "height]___[value:12]___[cond:_whenHovered",
+      "borderRadius]___[value:4]___[cond:_whenHovered",
+      "transitionDelay]___[value:.08s]___[cond:_whenHovered",
+      "fontSize]___[value:lg",
+      "borderRadius]___[value:4",
+      "paddingInline]___[value:6",
+      "paddingBottom]___[value:sm",
+      "translate]___[value:auto",
+      "translateX]___[value:-8",
+      "textStyle]___[value:likec4.node.primary",
+      "flexGrow]___[value:0",
+      "flexShrink]___[value:1",
+      "textStyle]___[value:likec4.node.secondary",
+      "textOverflow]___[value:ellipsis",
+      "display]___[value:none]___[cond:_shapeSizeXs",
+      "fontSize]___[value:calc(var(--likec4-text-size) * 0.635)",
+      "lineHeight]___[value:1.125",
+      "textWrap]___[value:balance",
+      "opacity]___[value:0.92",
+      "display]___[value:none]___[cond:_shapeSizeSm",
+      "flex]___[value:0 0 var(--icon-size)",
+      "height]___[value:var(--icon-size)",
+      "width]___[value:var(--icon-size)",
+      "height]___[value:fit-content",
+      "width]___[value:fit-content",
+      "maxHeight]___[value:100%",
+      "margin]___[value:0 auto",
+      "paddingTop]___[value:var(--likec4-spacing)",
+      "paddingBottom]___[value:var(--likec4-spacing)",
+      "paddingLeft]___[value:calc(var(--likec4-spacing) + 8px)",
+      "paddingRight]___[value:calc(var(--likec4-spacing) + 8px)",
+      "gap]___[value:12px",
+      "paddingLeft]___[value:46px]___[cond:_shapeQueue",
+      "paddingRight]___[value:16px]___[cond:_shapeQueue",
+      "paddingLeft]___[value:46px]___[cond:_shapeMobile",
+      "paddingRight]___[value:16px]___[cond:_shapeMobile",
+      "paddingTop]___[value:30px]___[cond:_shapeCylinder",
+      "paddingTop]___[value:30px]___[cond:_shapeStorage",
+      "paddingTop]___[value:32px]___[cond:_shapeBrowser",
+      "paddingBottom]___[value:28px]___[cond:_shapeBrowser",
+      "--icon-size]___[value:24px]___[cond:_shapeSizeXs",
+      "--icon-size]___[value:36px]___[cond:_shapeSizeSm",
+      "--icon-size]___[value:60px]___[cond:_shapeSizeMd",
+      "--icon-size]___[value:82px]___[cond:_shapeSizeLg",
+      "gap]___[value:16px]___[cond:_shapeSizeLg",
+      "--icon-size]___[value:90px]___[cond:_shapeSizeXl",
+      "gap]___[value:16px]___[cond:_shapeSizeXl",
+      "gap]___[value:16px",
+      "flex]___[value:0 1 auto",
+      "gap]___[value:8px",
+      "minWidth]___[value:calc(50% + var(--icon-size))",
+      "lineClamp]___[value:2",
+      "lineClamp]___[value:3",
+      "maxHeight]___[value:8rem",
+      "top]___[value:1",
+      "right]___[value:1",
+      "zIndex]___[value:9",
+      "offset]___[value:16",
+      "marginTop]___[value:2",
+      "overflowY]___[value:scroll",
+      "minWidth]___[value:250px",
+      "maxWidth]___[value:min(90vw, 500px)",
+      "fontSize]___[value:xxs",
+      "padding]___[value:2px 4px",
+      "borderRadius]___[value:2",
+      "background]___[value:likec4.palette.fill/30",
+      "lineHeight]___[value:[1.11]",
+      "color]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]]___[cond:_light",
+      "color]___[value:likec4.palette.loContrast]___[cond:_dark",
+      "top]___[value:5",
+      "right]___[value:6",
+      "gap]___[value:3",
+      "stroke]___[value:2.5",
+      "width]___[value:xs",
+      "mixBlendMode]___[value:normal",
+      "fill]___[value:likec4.relation.stroke",
+      "stroke]___[value:likec4.relation.stroke",
+      "fillOpacity]___[value:0.75",
+      "strokeWidth]___[value:1",
+      "cursor]___[value:grab",
+      "pointerEvents]___[value:auto",
+      "fillOpacity]___[value:1]___[cond:_hover",
+      "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
+      "strokeWidth]___[value:10]___[cond:_hover",
+      "transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
+      "visibility]___[value:visible]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
+      "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']) &",
+      "transitionDelay]___[value:50ms]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
+      "fillOpacity]___[value:1]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
+      "strokeWidth]___[value:5]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
+      "cursor]___[value:grabbing",
+      "cursor]___[value:grabbing !important]___[cond:& *",
+      "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
+      "position]___[value:right-start",
+      "boxShadow]___[value:lg",
+      "mainAxis]___[value:10",
+      "opacity]___[value:0.6",
+      "padding]___[value:8",
+      "paddingTop]___[value:6",
+      "marginBottom]___[value:10",
+      "marginBlock]___[value:10",
+      "paddingTop]___[value:100%",
+      "left]___[value:2",
+      "bottom]___[value:2",
+      "stroke]___[value:1.5",
+      "color]___[value:pink",
+      "background]___[value:mantine.colors.orange.light",
+      "position]___[value:top",
+      "position]___[value:top-end",
+      "display]___[value:none]___[cond:_empty",
+      "left]___[value:1rem",
+      "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
+      "--ai-size]___[value:2rem]___[cond:& .action-icon",
+      "width]___[value:65%]___[cond:& .tabler-icon",
+      "height]___[value:65%]___[cond:& .tabler-icon",
+      "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
+      "boxShadow]___[value:none]___[cond:_whenPanning",
+      "flex]___[value:1 1 40%",
+      "padding]___[value:4px 6px",
+      "background]___[value:mantine.colors.gray[2]",
+      "borderColor]___[value:mantine.colors.gray[4]",
+      "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
+      "background]___[value:mantine.colors.gray[3]",
+      "boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
+      "width]___[value:8",
+      "height]___[value:8",
+      "border]___[value:2px solid",
+      "borderColor]___[value:mantine.colors.gray[5]",
+      "transform]___[value:translate(-50%, -50%)",
+      "minWidth]___[value:200",
+      "maxWidth]___[value:calc(100vw - 16px)",
+      "minWidth]___[value:250]___[cond:sm",
+      "maxWidth]___[value:90vw]___[cond:sm",
+      "minWidth]___[value:350]___[cond:md",
+      "maxWidth]___[value:70vw]___[cond:md",
+      "backgroundColor]___[value:mantine.colors.body/80",
+      "backgroundColor]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
+      "backgroundColor]___[value:mantine.colors.body]___[cond:_whenPanning",
+      "color]___[value:mantine.colors.gray[5]]___[cond:_dark",
+      "padding]___[value:sm",
+      "marginBottom]___[value:xs",
+      "height]___[value:sm",
+      "paddingBlock]___[value:2",
+      "opacity]___[value:0.7",
+      "maxHeight]___[value:60",
+      "right]___[value:0",
+      "--ai-radius]___[value:0px",
+      "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
+      "maxWidth]___[value:calc(100vw - 20px)",
+      "minWidth]___[value:300]___[cond:sm",
+      "maxWidth]___[value:65vw]___[cond:sm",
+      "maxWidth]___[value:40vw]___[cond:md",
+      "backgroundColor]___[value:transparent",
+      "transition]___[value:all 100ms ease-in",
+      "transition]___[value:all 120ms ease-out]___[cond:_hover",
+      "backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
+      "backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
+      "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
+      "paddingTop]___[value:0",
+      "paddingBottom]___[value:0",
+      "textTransform]___[value:lowercase",
+      "transition]___[value:all 150ms ease-in-out",
+      "--badge-radius]___[value:2px",
+      "--badge-fz]___[value:9.5px",
+      "--badge-padding-x]___[value:3px",
+      "--badge-height]___[value:13.5px",
+      "--badge-lh]___[value:1",
+      "--badge-bg]___[value:{colors.likec4.palette.fill}",
+      "--badge-color]___[value:{colors.likec4.palette.hiContrast}",
+      "paddingBlock]___[value:sm",
+      "likec4Palette]___[value:primary",
+      "flex]___[value:0 0 70px",
+      "opacity]___[value:0.25",
+      "marginLeft]___[value:2",
+      "bottom]___[value:0.5rem",
+      "gap]___[value:0.4rem",
+      "gap]___[value:0.6rem]___[cond:md",
+      "backdropFilter]___[value:blur(8px)",
+      "transition]___[value:all 175ms ease-in",
+      "transform]___[value:scale(1.1)]___[cond:_hover",
+      "transitionDuration]___[value:100ms]___[cond:_active",
+      "transform]___[value:scale(0.98) translateY(3px)]___[cond:_active",
+      "width]___[value:0.85em]___[cond:& .tabler-icon",
+      "height]___[value:0.85em]___[cond:& .tabler-icon",
+      "background]___[value:mantine.colors.primary.filled/65",
+      "background]___[value:mantine.colors.primary.filledHover/65]___[cond:_hover",
+      "background]___[value:mantine.colors.primary.filled/85]___[cond:_light",
+      "background]___[value:mantine.colors.primary.filledHover/85]___[cond:_light<___>_hover",
+      "borderColor]___[value:mantine.colors.orange[6]",
+      "borderWidth]___[value:4]___[cond:md",
+      "paddingInline]___[value:xl",
+      "paddingLeft]___[value:lg",
+      "paddingRight]___[value:lg",
       "borderWidth]___[value:3px",
-      "borderRadius]___[value:md",
-      "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
-      "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
-      "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
-      "paddingBlock]___[value:3",
-      "stroke]___[value:3.5",
-      "flex]___[value:1 0 auto",
       "strokeWidth]___[value:5",
       "border]___[value:3px dashed",
-      "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity, 95%))]",
-      "backgroundColor]___[value:[rgb(250 250 250 / var(--_opacity, 95%))]]___[cond:_light",
-      "backdropFilter]___[value:auto",
-      "backdropBlur]___[value:var(--_blur, 10px)",
-      "paddingTop]___[value:20",
-      "paddingLeft]___[value:16",
-      "paddingRight]___[value:16",
-      "height]___[value:100cqh]___[cond:xs",
-      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
-      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
-      "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
-      "containerName]___[value:likec4-search-elements",
-      "paddingInline]___[value:sm",
-      "order]___[value:6",
-      "paddingRight]___[value:xs",
-      "marginBottom]___[value:8px",
-      "containerName]___[value:likec4-tree",
-      "containerType]___[value:inline-size",
-      "outline]___[value:none !important",
-      "marginTop]___[value:8px",
-      "flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
-      "alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
-      "gap]___[value:2]___[cond:@container likec4-tree (max-width: 450px)",
-      "lineHeight]___[value:1.3",
-      "background]___[value:mantine.colors.dark[9]/30",
-      "background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
-      "--likec4-icon-size]___[value:24px",
-      "--likec4-icon-size]___[value:18px]___[cond:@container likec4-tree (max-width: 450px)",
-      "lineHeight]___[value:1.1",
-      "display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
-      "maxWidth]___[value:8xl",
-      "paddingInline]___[value:4",
-      "paddingInline]___[value:6]___[cond:md",
-      "paddingInline]___[value:8]___[cond:lg",
-      "paddingBlock]___[value:md",
-      "order]___[value:2",
-      "gap]___[value:md",
-      "paddingLeft]___[value:48",
-      "opacity]___[value:0.3",
-      "grayscale]___[value:0",
-      "grayscale]___[value:0.9",
-      "filter]___[value:auto",
-      "opacity]___[value:1]___[cond:_groupHover",
-      "grayscale]___[value:0]___[cond:_groupHover",
-      "opacity]___[value:1]___[cond:_groupFocusWithin",
-      "grayscale]___[value:0]___[cond:_groupFocusWithin",
-      "opacity]___[value:0.5",
-      "marginRight]___[value:1",
-      "mainAxis]___[value:4",
-      "crossAxis]___[value:50",
-      "srOnly]___[value:true",
-      "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
-      "marginTop]___[value:4px",
-      "fontSize]___[value:13px",
-      "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
-      "background]___[value:mantine.colors.primary[8]",
-      "borderColor]___[value:mantine.colors.primary[9]",
-      "padding]___[value:12px 8px 12px 14px",
-      "minHeight]___[value:60px",
-      "outline]___[value:none]___[cond:_hover",
-      "borderColor]___[value:mantine.colors.primary[9]]___[cond:_hover",
-      "background]___[value:mantine.colors.primary[8]/60]___[cond:_hover",
-      "outline]___[value:none]___[cond:_focus",
-      "background]___[value:mantine.colors.primary[8]]___[cond:_focus",
-      "borderColor]___[value:mantine.colors.primary[9]]___[cond:_focus",
-      "outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "borderColor]___[value:transparent]___[cond:_dark",
-      "background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
-      "background]___[value:mantine.colors.white/80]___[cond:_light",
-      "borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
-      "backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
-      "color]___[value:mantine.colors.gray[5]]___[cond:_light",
-      "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
-      "color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
-      "color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "flex]___[value:0 0 var(--likec4-icon-size, 24px)",
-      "height]___[value:var(--likec4-icon-size, 24px)",
-      "width]___[value:var(--likec4-icon-size, 24px)",
-      "--ti-size]___[value:var(--likec4-icon-size, 24px)",
-      "strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
-      "fontSize]___[value:16px",
-      "opacity]___[value:0.4]___[cond::where([data-disabled]) &",
-      "color]___[value:mantine.colors.dark[1]",
-      "color]___[value:mantine.colors.primary[1]]___[cond:_groupHover",
-      "color]___[value:mantine.colors.white]___[cond:_groupHover<___>_light",
-      "color]___[value:mantine.colors.primary[1]]___[cond:_groupFocus",
-      "color]___[value:mantine.colors.white]___[cond:_groupFocus<___>_light",
-      "color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "color]___[value:mantine.colors.white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
-      "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
-      "fontSize]___[value:12px",
-      "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
-      "border]___[value:2px dashed",
-      "fontSize]___[value:md",
-      "paddingBlock]___[value:xl",
-      "background]___[value:mantine.colors.gray[4]/55 !important]___[cond:_focusWithin",
-      "background]___[value:mantine.colors.dark[5]/55 !important]___[cond:_focusWithin<___>_dark",
-      "background]___[value:mantine.colors.gray[3]/35]___[cond:_groupHover",
-      "background]___[value:mantine.colors.dark[5]/35]___[cond:_groupHover<___>_dark",
-      "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
-      "zIndex]___[value:902",
-      "backdropBlur]___[value:10px",
-      "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
-      "top]___[value:2rem",
-      "maxWidth]___[value:600px",
-      "minWidth]___[value:200px",
-      "zIndex]___[value:903",
-      "marginTop]___[value:32px]___[cond:& + &",
+      "position]___[value:right-end",
+      "offset]___[value:2",
+      "paddingInline]___[value:3",
+      "height]___[value:xs",
+      "justifyContent]___[value:flex-start",
+      "position]___[value:left-start",
+      "position]___[value:top-start",
+      "paddingInline]___[value:5",
+      "paddingTop]___[value:4",
+      "paddingInline]___[value:4px",
+      "maxWidth]___[value:220px",
       "likec4Palette]___[value:amber",
       "likec4Palette]___[value:blue",
       "likec4Palette]___[value:gray",
@@ -974,6 +988,11 @@
       "likec4RelationPalette]___[value:sky"
     ],
     "recipes": {
+      "markdownBlock": [
+        "uselikec4palette]___[value:false]___[recipe:markdownBlock",
+        "uselikec4palette]___[value:true]___[recipe:markdownBlock",
+        "uselikec4palette]___[value:true]___[cond:_hover]___[recipe:markdownBlock"
+      ],
       "actionBtn": [
         "size]___[value:md]___[recipe:actionBtn",
         "radius]___[value:md]___[recipe:actionBtn",