@likec4/diagram 1.40.0 → 1.42.0

package/panda.buildinfo.json

@@ -1,22 +1,26 @@
 {
-  "schemaVersion": "1.3.0",
+  "schemaVersion": "1.4.1",
   "styles": {
     "atomic": [
       "background]___[value:dots",
+      "cursor]___[value:pointer",
+      "--mantine-cursor-pointer]___[value:pointer",
+      "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
       "background]___[value:transparent",
-      "gap]___[value:20",
       "position]___[value:absolute",
       "top]___[value:1rem",
       "right]___[value:1rem",
       "color]___[value:gray",
-      "cursor]___[value:pointer",
-      "--mantine-cursor-pointer]___[value:pointer",
-      "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
-      "position]___[value:fixed",
+      "gap]___[value:20",
       "top]___[value:0",
       "left]___[value:0",
       "width]___[value:100%",
+      "height]___[value:100%",
       "padding]___[value:0",
+      "backdropFilter]___[value:blur(5px)",
+      "backgroundColor]___[value:[rgb(34 34 34 / 10%)]]___[cond:_dark",
+      "backgroundColor]___[value:[rgb(15 15 15/ 20%)]]___[cond:_light",
+      "zIndex]___[value:1000",
       "color]___[value:red",
       "padding]___[value:xl",
       "gap]___[value:xs",
@@ -37,18 +41,16 @@
       "color]___[value:mantine.colors.dimmed]___[cond:&:is([data-position=\"left\"])",
       "userSelect]___[value:none]___[cond:&:is([data-position=\"left\"])",
       "pointerEvents]___[value:none]___[cond:&:is([data-position=\"left\"])",
-      "color]___[value:[inherit]]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
+      "color]___[value:[var(--badge-color)]]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
       "opacity]___[value:0.7]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
-      "color]___[value:[inherit]]___[cond:& > a",
-      "cursor]___[value:pointer]___[cond:& > a",
-      "transition]___[value:fast]___[cond:& > a",
-      "opacity]___[value:0.7]___[cond:& > a",
-      "opacity]___[value:1]___[cond:& > a<___>_hover",
-      "textDecoration]___[value:none]___[cond:& > a",
-      "textDecoration]___[value:underline]___[cond:& > a<___>_hover",
       "stroke]___[value:2.5",
+      "opacity]___[value:0.7",
+      "textDecoration]___[value:none",
+      "textDecoration]___[value:underline]___[cond:_hover",
       "height]___[value:12",
       "width]___[value:12",
+      "fill]___[value:[#FCFBF7]",
+      "fill]___[value:[#222221]]___[cond:_light",
       "height]___[value:30px",
       "paddingLeft]___[value:sm",
       "paddingRight]___[value:1",
@@ -160,7 +162,6 @@
       "backgroundColor]___[value:mantine.colors.primary.lightHover!]___[cond:_focus",
       "stroke]___[value:1.5",
       "--thickness]___[value:1px",
-      "height]___[value:100%",
       "borderInlineEndWidth]___[value:var(--thickness)",
       "marginBottom]___[value:1",
       "display]___[value:flex]___[cond:@/md",
@@ -189,10 +190,93 @@
       "display]___[value:contents",
       "paddingInline]___[value:sm",
       "display]___[value:grid",
-      "gap]___[value:10px",
+      "gap]___[value:8px",
       "order]___[value:6",
       "paddingRight]___[value:xs",
+      "stroke]___[value:1.8",
+      "truncate]___[value:end",
+      "transitionDuration]___[value:normal",
+      "transitionDelay]___[value:0.2s",
+      "transitionDelay]___[value:0s]___[cond:_hover",
+      "lineClamp]___[value:5",
+      "fill]___[value:none",
+      "transition]___[value:none]___[cond:_reduceGraphics",
+      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
+      "strokeOpacity]___[value:0.08",
+      "transitionProperty]___[value:stroke-width, stroke-opacity]___[cond:_noReduceGraphics",
+      "transitionDuration]___[value:fast]___[cond:_noReduceGraphics",
+      "transitionTimingFunction]___[value:inOut]___[cond:_noReduceGraphics",
+      "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)]",
+      "strokeDashoffset]___[value:0",
+      "animationStyle]___[value:xyedgeAnimated]___[cond:_noReduceGraphics",
+      "animationPlayState]___[value:paused]___[cond:_noReduceGraphics",
+      "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
+      "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
+      "animationPlayState]___[value:running]___[cond:_whenHovered<___>_noReduceGraphics",
+      "animationDelay]___[value:450ms]___[cond:_whenHovered<___>_noReduceGraphics",
+      "animationPlayState]___[value:running]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
+      "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
+      "animationPlayState]___[value:paused]___[cond:_whenDimmed",
+      "animationName]___[value:none]___[cond:_smallZoom",
+      "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
+      "animationPlayState]___[value:paused]___[cond:_whenPanning",
+      "justifyContent]___[value:center",
+      "zIndex]___[value:1",
+      "display]___[value:none]___[cond:_smallZoom",
+      "gap]___[value:1.5",
+      "lineClamp]___[value:2",
+      "lineClamp]___[value:3",
+      "maxHeight]___[value:8rem ",
+      "top]___[value:0.5",
+      "right]___[value:0.5",
+      "right]___[value:[5px]]___[cond:_shapeBrowser",
+      "top]___[value:[14px]]___[cond:_shapeCylinder",
+      "top]___[value:[14px]]___[cond:_shapeStorage",
+      "top]___[value:[1px]]___[cond:_shapeQueue",
+      "right]___[value:3]___[cond:_shapeQueue",
+      "content]___[value:\" \"]___[cond:_before",
+      "position]___[value:absolute]___[cond:_before",
+      "top]___[value:[calc(100% - 4px)]]___[cond:_before",
+      "left]___[value:0]___[cond:_before",
+      "width]___[value:100%]___[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)) &",
+      "alignItems]___[value:flex-end",
+      "gap]___[value:1",
+      "justifyItems]___[value:stretch",
+      "bottom]___[value:0",
+      "padding]___[value:1",
+      "bottom]___[value:[5px]]___[cond:_shapeCylinder",
+      "bottom]___[value:[5px]]___[cond:_shapeStorage",
+      "bottom]___[value:0]___[cond:_shapeQueue",
+      "paddingLeft]___[value:[14px]]___[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:[4px]",
+      "paddingInline]___[value:1.5",
+      "gap]___[value:0.5",
+      "alignItems]___[value:baseline",
+      "flexWrap]___[value:wrap",
+      "translate]___[value:auto",
+      "translateX]___[value:[-8px]",
       "borderBlockEndWidth]___[value:var(--thickness)",
+      "pointerEvents]___[value:none]___[cond:_whenPanning",
       "width]___[value:max-content",
       "cursor]___[value:default",
       "gap]___[value:3",
@@ -206,11 +290,8 @@
       "marginBlock]___[value:calc(var(--bleed-y, 0) * -1)",
       "paddingBlock]___[value:2.5",
       "paddingInline]___[value:2",
-      "gap]___[value:1",
       "backgroundColor]___[value:mantine.colors.dark[5]/70]___[cond:_hover<___>_dark",
-      "gap]___[value:0.5",
       "gap]___[value:2",
-      "flexWrap]___[value:wrap",
       "offset]___[value:2",
       "position]___[value:top-start",
       "opacity]___[value:0.65",
@@ -241,24 +322,23 @@
       "boxShadow]___[value:xl",
       "display]___[value:flex]___[cond:@/xs",
       "paddingBlock]___[value:1",
-      "alignItems]___[value:baseline",
-      "stroke]___[value:1.8",
       "marginTop]___[value:1",
       "fontSize]___[value:xs",
       "marginBottom]___[value:xxs",
       "gap]___[value:md",
       "margin]___[value:xs",
       "padding]___[value:md",
-      "maxWidth]___[value:calc(100cqw - 32px)",
-      "minWidth]___[value:calc(100cqw - 50px)",
+      "paddingBottom]___[value:lg",
+      "maxWidth]___[value:calc(100cqw - 52px)",
+      "minWidth]___[value:200px",
       "maxHeight]___[value:calc(100cqh - 100px)",
       "overflow]___[value:auto",
       "overscrollBehavior]___[value:contain",
       "minWidth]___[value:400]___[cond:@/sm",
       "maxWidth]___[value:550]___[cond:@/sm",
       "maxWidth]___[value:700]___[cond:@/lg",
-      "marginBlock]___[value:md",
       "overflow]___[value:visible",
+      "color]___[value:mantine.colors.gray[4]]___[cond:_dark",
       "color]___[value:mantine.colors.gray[8]]___[cond:_light",
       "opacity]___[value:0.5",
       "marginInlineEnd]___[value:0.5",
@@ -289,7 +369,6 @@
       "height]___[value:70%]___[cond:& > svg",
       "position]___[value:right",
       "mainAxis]___[value:12",
-      "padding]___[value:1",
       "top]___[value:md",
       "left]___[value:md",
       "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
@@ -301,7 +380,6 @@
       "flex]___[value:1 1 40%",
       "textAlign]___[value:center",
       "padding]___[value:[4px 6px]",
-      "zIndex]___[value:1",
       "background]___[value:mantine.colors.gray[2]",
       "borderColor]___[value:mantine.colors.gray[4]",
       "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
@@ -331,7 +409,10 @@
       "--text-fz]___[value:{fontSizes.sm}",
       "--text-fz]___[value:{fontSizes.md}]___[cond:md",
       "paddingTop]___[value:xxs",
+      "maxWidth]___[value:calc(100cqw - 32px)",
+      "minWidth]___[value:calc(100cqw - 50px)",
       "boxSizing]___[value:border-box",
+      "position]___[value:fixed",
       "inset]___[value:0",
       "width]___[value:100vw",
       "height]___[value:100vh",
@@ -341,6 +422,7 @@
       "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
       "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
       "gap]___[value:lg",
+      "color]___[value:mantine.colors.text",
       "backgroundColor]___[value:mantine.colors.body",
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
       "border]___[value:none",
@@ -356,7 +438,6 @@
       "flex]___[value:0 0 40px",
       "height]___[value:40px",
       "width]___[value:40px",
-      "justifyContent]___[value:center",
       "alignSelf]___[value:flex-start",
       "mixBlendMode]___[value:hard-light]___[cond:_dark",
       "width]___[value:100%]___[cond:& :where(svg, img)",
@@ -385,7 +466,6 @@
       "fontSize]___[value:15px",
       "lineHeight]___[value:1.4",
       "background]___[value:mantine.colors.gray[1]",
-      "gap]___[value:1.5",
       "padding]___[value:[6px 8px]",
       "color]___[value:mantine.colors.gray[7]",
       "transitionTimingFunction]___[value:out]___[cond:_hover",
@@ -409,7 +489,6 @@
       "gridTemplateColumns]___[value:min-content 1fr",
       "gridAutoRows]___[value:min-content max-content",
       "gap]___[value:[24px 20px]",
-      "justifyItems]___[value:stretch",
       "justifySelf]___[value:end",
       "textAlign]___[value:right",
       "width]___[value:14px",
@@ -420,17 +499,18 @@
       "borderLeft]___[value:none",
       "borderRadius]___[value:2px",
       "bottom]___[value:0.5",
-      "right]___[value:0.5",
       "cursor]___[value:se-resize",
       "borderWidth]___[value:4px]___[cond:_hover",
       "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
+      "alignItems]___[value:start",
+      "justifyContent]___[value:space-between",
       "marginBottom]___[value:sm",
-      "gap]___[value:6",
       "lineClamp]___[value:1",
       "gap]___[value:4",
       "marginTop]___[value:6",
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
+      "gap]___[value:6",
       "gap]___[value:[4px 4px]",
       "paddingRight]___[value:xxs",
       "transitionProperty]___[value:all",
@@ -440,9 +520,9 @@
       "transitionTimingFunction]___[value:out]___[cond:_groupHover",
       "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
       "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
-      "whiteSpace]___[value:pre",
-      "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
       "overscrollBehavior]___[value:none",
+      "whiteSpace]___[value:pre",
+      "fontFamily]___[value:mono",
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
       "marginBottom]___[value:0",
       "transition]___[value:fast]___[cond:& > *",
@@ -473,7 +553,6 @@
       "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:2]___[cond:_before",
       "fontSize]___[value:xxs]___[cond:_before",
@@ -490,7 +569,6 @@
       "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",
       "top]___[value:12",
@@ -503,32 +581,6 @@
       "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:likec4-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:1.5]___[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",
@@ -569,9 +621,9 @@
       "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
       "paddingBlock]___[value:3",
       "offset]___[value:4",
-      "truncate]___[value:end",
       "stroke]___[value:3.5",
       "flex]___[value:1 0 auto",
+      "outline]___[value:none",
       "marginBottom]___[value:2",
       "containerName]___[value:likec4-tree",
       "containerType]___[value:inline-size",
@@ -665,82 +717,9 @@
       "top]___[value:[2rem]",
       "left]___[value:[50%]",
       "maxWidth]___[value:600px",
-      "minWidth]___[value:200px",
       "transform]___[value:translateX(-50%)",
       "zIndex]___[value:903",
       "marginTop]___[value:[32px]]___[cond:& + &",
-      "transitionDuration]___[value:normal",
-      "transitionDelay]___[value:0.2s",
-      "transitionDelay]___[value:0s]___[cond:_hover",
-      "lineClamp]___[value:5",
-      "fill]___[value:none",
-      "transition]___[value:none]___[cond:_reduceGraphics",
-      "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
-      "strokeOpacity]___[value:0.08",
-      "transitionProperty]___[value:stroke-width, stroke-opacity]___[cond:_noReduceGraphics",
-      "transitionDuration]___[value:fast]___[cond:_noReduceGraphics",
-      "transitionTimingFunction]___[value:inOut]___[cond:_noReduceGraphics",
-      "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)]",
-      "strokeDashoffset]___[value:0",
-      "animationStyle]___[value:xyedgeAnimated]___[cond:_noReduceGraphics",
-      "animationPlayState]___[value:paused]___[cond:_noReduceGraphics",
-      "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
-      "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
-      "animationPlayState]___[value:running]___[cond:_whenHovered<___>_noReduceGraphics",
-      "animationDelay]___[value:450ms]___[cond:_whenHovered<___>_noReduceGraphics",
-      "animationPlayState]___[value:running]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
-      "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
-      "animationPlayState]___[value:paused]___[cond:_whenDimmed",
-      "animationName]___[value:none]___[cond:_smallZoom",
-      "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
-      "animationPlayState]___[value:paused]___[cond:_whenPanning",
-      "top]___[value:[calc(100% - 30px)]",
-      "width]___[value:auto",
-      "minHeight]___[value:30px",
-      "display]___[value:none]___[cond:_smallZoom",
-      "top]___[value:0.5",
-      "right]___[value:[5px]]___[cond:_shapeBrowser",
-      "top]___[value:[14px]]___[cond:_shapeCylinder",
-      "top]___[value:[14px]]___[cond:_shapeStorage",
-      "top]___[value:[1px]]___[cond:_shapeQueue",
-      "right]___[value:3]___[cond:_shapeQueue",
-      "content]___[value:\" \"]___[cond:_before",
-      "top]___[value:[calc(100% - 4px)]]___[cond:_before",
-      "left]___[value:0]___[cond:_before",
-      "width]___[value:100%]___[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)) &",
-      "bottom]___[value:0",
-      "bottom]___[value:[5px]]___[cond:_shapeCylinder",
-      "bottom]___[value:[5px]]___[cond:_shapeStorage",
-      "bottom]___[value:0]___[cond:_shapeQueue",
-      "paddingLeft]___[value:[14px]]___[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:[4px]",
-      "paddingInline]___[value:1.5",
-      "translate]___[value:auto",
-      "translateX]___[value:[-8px]",
-      "gap]___[value:6px",
-      "lineClamp]___[value:2",
-      "lineClamp]___[value:3",
-      "maxHeight]___[value:8rem",
       "mixBlendMode]___[value:normal",
       "fill]___[value:var(--likec4-palette-relation-stroke)",
       "stroke]___[value:var(--likec4-palette-relation-stroke)",
@@ -780,32 +759,19 @@
       "translateX]___[value:-1/2",
       "translateY]___[value:-1/2",
       "top]___[value:1",
-      "position]___[value:top-end",
-      "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",
-      "flex]___[value:0 0 auto",
-      "maxHeight]___[value:60",
       "right]___[value:0",
       "padding]___[value:2",
+      "width]___[value:min-content",
+      "height]___[value:min-content",
       "--ai-radius]___[value:0px",
       "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
+      "minWidth]___[value:200",
       "maxWidth]___[value:calc(100vw - 20px)",
+      "backgroundColor]___[value:mantine.colors.body/80",
       "minWidth]___[value:300]___[cond:sm",
       "maxWidth]___[value:65vw]___[cond:sm",
       "maxWidth]___[value:40vw]___[cond:md",
+      "backgroundColor]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
       "transition]___[value:all 100ms ease-in",
       "transition]___[value:all 120ms ease-out]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
@@ -826,28 +792,10 @@
       "--badge-bg]___[value:var(--likec4-palette-fill)",
       "--badge-color]___[value:var(--likec4-palette-hiContrast)",
       "paddingBlock]___[value:sm",
+      "flex]___[value:0 0 auto",
       "flex]___[value:0 0 70px",
       "opacity]___[value:0.25",
       "marginLeft]___[value:2",
-      "bottom]___[value:xxs",
-      "padding]___[value:[0px]",
-      "margin]___[value:[0px]",
-      "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",
-      "paddingInline]___[value:xl",
-      "paddingLeft]___[value:lg",
-      "paddingRight]___[value:lg",
       "borderWidth]___[value:3px",
       "borderStyle]___[value:dashed",
       "strokeWidth]___[value:5",
@@ -860,11 +808,27 @@
       "paddingInline]___[value:5",
       "paddingBottom]___[value:8",
       "paddingTop]___[value:4",
+      "gap]___[value:6px",
       "paddingInline]___[value:4px",
       "maxWidth]___[value:220px",
       "textOverflow]___[value:ellipsis"
     ],
     "recipes": {
+      "overlay": [
+        "fullscreen]___[value:false]___[recipe:overlay",
+        "withBackdrop]___[value:true]___[recipe:overlay",
+        "fullscreen]___[value:true]___[recipe:overlay",
+        "withBackdrop]___[value:false]___[recipe:overlay"
+      ],
+      "markdownBlock": [
+        "uselikec4palette]___[value:false]___[recipe:markdownBlock",
+        "value]___[value:markdown]___[recipe:markdownBlock",
+        "value]___[value:plaintext]___[recipe:markdownBlock",
+        "uselikec4palette]___[value:true]___[recipe:markdownBlock",
+        "*]___[value:true]___[recipe:markdownBlock",
+        "*]___[value:false]___[recipe:markdownBlock",
+        "*]___[value:plaintext]___[recipe:markdownBlock"
+      ],
       "navigationLink": [
         "truncateLabel]___[value:false]___[recipe:navigationLink",
         "truncateLabel]___[value:true]___[recipe:navigationLink",
@@ -877,15 +841,6 @@
         "variant]___[value:filled]___[recipe:navigationPanelActionIcon",
         "*]___[value:filled]___[recipe:navigationPanelActionIcon"
       ],
-      "markdownBlock": [
-        "uselikec4palette]___[value:false]___[recipe:markdownBlock",
-        "value]___[value:markdown]___[recipe:markdownBlock",
-        "value]___[value:plaintext]___[recipe:markdownBlock",
-        "uselikec4palette]___[value:true]___[recipe:markdownBlock",
-        "*]___[value:true]___[recipe:markdownBlock",
-        "*]___[value:false]___[recipe:markdownBlock",
-        "*]___[value:plaintext]___[recipe:markdownBlock"
-      ],
       "actionBtn": [
         "size]___[value:md]___[recipe:actionBtn",
         "radius]___[value:md]___[recipe:actionBtn",
@@ -916,6 +871,7 @@
         "isStepEdge]___[value:true]___[recipe:edgeLabel",
         "*]___[value:true]___[recipe:edgeLabel"
       ],
+      "elementNodeData": [],
       "elementShapeRecipe": [
         "shapetype]___[value:html]___[recipe:elementShapeRecipe",
         "shapetype]___[value:svg]___[recipe:elementShapeRecipe",
@@ -927,17 +883,6 @@
         "autoTextColor]___[value:true]___[recipe:likec4tag",
         "autoTextColor]___[value:true]___[cond:_hover]___[recipe:likec4tag",
         "autoTextColor]___[value:false]___[cond:_hover]___[recipe:likec4tag"
-      ],
-      "elementNodeIcon": [],
-      "elementNodeData": [
-        "hasIcon]___[value:false]___[recipe:elementNodeData",
-        "*]___[value:false]___[recipe:elementNodeData",
-        "hasIcon]___[value:true]___[recipe:elementNodeData",
-        "*]___[value:true]___[recipe:elementNodeData",
-        "hasDescription]___[value:false]___[recipe:elementNodeData",
-        "hasDescription]___[value:true]___[recipe:elementNodeData",
-        "hasTechnology]___[value:false]___[recipe:elementNodeData",
-        "hasTechnology]___[value:true]___[recipe:elementNodeData"
       ]
     }
   }