@likec4/diagram 1.59.2 → 1.59.4

package/panda.buildinfo.json

@@ -1,8 +1,21 @@
 {
-  "schemaVersion": "1.11.4",
+  "schemaVersion": "1.12.1",
   "styles": {
     "atomic": [
       "background]___[value:dots",
+      "textStyle]___[value:h1",
+      "textStyle]___[value:h2",
+      "textStyle]___[value:h3",
+      "textStyle]___[value:h4",
+      "textStyle]___[value:h5",
+      "textStyle]___[value:h6",
+      "background]___[value:surface.default",
+      "background]___[value:surface.code",
+      "fontSize]___[value:xxs",
+      "fontWeight]___[value:bold",
+      "color]___[value:text.dimmed",
+      "textTransform]___[value:uppercase",
+      "letterSpacing]___[value:caps.sm",
       "cursor]___[value:pointer",
       "--mantine-cursor-pointer]___[value:pointer",
       "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
@@ -10,25 +23,26 @@
       "position]___[value:absolute",
       "top]___[value:4",
       "right]___[value:4",
-      "zIndex]___[value:999",
+      "zIndex]___[value:dropdown",
       "color]___[value:gray",
       "gap]___[value:20",
       "margin]___[value:0",
       "padding]___[value:0",
       "position]___[value:fixed",
-      "top]___[value:10",
-      "left]___[value:10",
-      "width]___[value:[calc(100vw - ({spacing.10} * 2))]",
+      "top]___[value:5",
+      "left]___[value:5",
+      "width]___[value:[calc(100vw - ({spacing.5} * 2))]",
       "height]___[value:max-content",
-      "maxHeight]___[value:[calc(100vh - ({spacing.10} * 3))]",
+      "maxHeight]___[value:[calc(100vh - ({spacing.5} * 3))]",
       "background]___[value:likec4.overlay.body",
       "borderRadius]___[value:sm",
-      "borderWidth]___[value:3",
+      "borderWidth]___[value:extra",
       "borderColor]___[value:likec4.overlay.border",
       "boxShadow]___[value:xl",
       "outline]___[value:none",
+      "zIndex]___[value:toast",
       "cursor]___[value:zoom-out]___[cond:_backdrop",
-      "backdropFilter]___[value:blur(18px)]___[cond:_backdrop",
+      "backdropFilter]___[value:[blur(18px)]]___[cond:_backdrop",
       "background]___[value:[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]]___[cond:_backdrop",
       "display]___[value:flex",
       "alignItems]___[value:flex-start",
@@ -44,13 +58,14 @@
       "gap]___[value:sm",
       "flexDirection]___[value:column",
       "flex]___[value:1",
+      "paddingRight]___[value:1",
       "color]___[value:teal",
       "opacity]___[value:1",
       "opacity]___[value:0.45",
       "transition]___[value:fast",
       "opacity]___[value:1]___[cond:_hover",
-      "minHeight]___[value:24",
-      "maxWidth]___[value:500",
+      "minHeight]___[value:[24px]",
+      "maxWidth]___[value:[500px]",
       "userSelect]___[value:all",
       "paddingRight]___[value:0",
       "backgroundColor]___[value:transparent",
@@ -69,18 +84,14 @@
       "width]___[value:12",
       "fill]___[value:[#FCFBF7]",
       "fill]___[value:[#222221]]___[cond:_light",
-      "height]___[value:30px",
+      "height]___[value:control.sm",
       "paddingLeft]___[value:sm",
-      "paddingRight]___[value:1",
-      "border]___[value:1px solid",
-      "borderColor]___[value:default.border",
+      "border]___[value:default",
+      "borderColor]___[value:border.default",
       "borderColor]___[value:mantine.gray[4]]___[cond:_light",
       "borderColor]___[value:mantine.dark[4]]___[cond:_dark",
-      "borderColor]___[value:default.border]___[cond:_hover",
-      "background]___[value:default",
-      "background]___[value:white]___[cond:_light",
-      "background]___[value:mantine.dark[6]]___[cond:_dark",
-      "background]___[value:default.hover]___[cond:_hover",
+      "borderColor]___[value:border.default]___[cond:_hover",
+      "background]___[value:surface.hover]___[cond:_hover",
       "width]___[value:100%",
       "color]___[value:text]___[cond:& .tabler-icon",
       "transition]___[value:none !important]___[cond:_whenPanning",
@@ -90,12 +101,10 @@
       "fontSize]___[value:sm",
       "fontWeight]___[value:medium",
       "paddingRight]___[value:2.5",
-      "color]___[value:text.placeholder",
+      "color]___[value:text.non-essential",
       "paddingRight]___[value:[30px]]___[cond:sm",
       "paddingRight]___[value:[50px]]___[cond:md",
-      "fontSize]___[value:11px",
-      "fontWeight]___[value:bold",
-      "lineHeight]___[value:1",
+      "lineHeight]___[value:tight",
       "padding]___[value:[4px 7px]",
       "color]___[value:mantine.gray[7]]___[cond:_light",
       "borderColor]___[value:mantine.gray[2]]___[cond:_light",
@@ -107,18 +116,26 @@
       "backgroundColor]___[value:mantine.dark[8]]___[cond:_groupHover<___>_dark",
       "gap]___[value:xs",
       "stroke]___[value:2",
+      "verticalAlign]___[value:middle",
+      "opacity]___[value:0.4",
+      "opacity]___[value:0.5]___[cond:_dark",
+      "opacity]___[value:0.8]___[cond:_groupHover",
+      "opacity]___[value:0.8]___[cond:_groupActive",
+      "opacity]___[value:0.8]___[cond:_groupFocus",
+      "stroke]___[value:1.5",
       "position]___[value:bottom-left",
+      "zIndex]___[value:panel",
       "pointerEvents]___[value:none",
       "top]___[value:0",
       "left]___[value:0",
       "gap]___[value:xxs",
-      "maxWidth]___[value:calc(100vw)",
-      "maxWidth]___[value:calc(100cqw)]___[cond:xs",
+      "maxWidth]___[value:100vw",
+      "maxWidth]___[value:100cqw]___[cond:xs",
       "margin]___[value:xs]___[cond:@/sm",
       "gap]___[value:xs]___[cond:@/sm",
       "width]___[value:max-content]___[cond:@/sm",
-      "maxWidth]___[value:calc(100vw - 2 * {spacing.md})]___[cond:@/sm",
-      "maxWidth]___[value:calc(100cqw - 2 * {spacing.md})]___[cond:@/sm<___>xs",
+      "maxWidth]___[value:[calc(100vw - 2 * {spacing.md})]]___[cond:@/sm",
+      "maxWidth]___[value:[calc(100cqw - 2 * {spacing.md})]]___[cond:@/sm<___>xs",
       "display]___[value:none]___[cond:_print",
       "mainAxis]___[value:4",
       "position]___[value:bottom-start",
@@ -126,16 +143,16 @@
       "position]___[value:relative",
       "pointerEvents]___[value:all",
       "userSelect]___[value:none",
-      "maxWidth]___[value:200px",
+      "maxWidth]___[value:[150px]",
       "display]___[value:none",
       "display]___[value:block]___[cond:@/md",
       "gap]___[value:1",
       "flexShrink]___[value:1",
       "flexGrow]___[value:1",
       "overflow]___[value:hidden",
-      "gap]___[value:0.5",
+      "gap]___[value:1.5",
+      "flexShrink]___[value:0",
       "flexGrow]___[value:0",
-      "display]___[value:none]___[cond:_empty",
       "layerStyle]___[value:likec4.dropdown",
       "gap]___[value:[4px]",
       "maxWidth]___[value:[calc(100vw - 50px)]",
@@ -146,34 +163,24 @@
       "maxHeight]___[value:[calc(100cqh - 200px)]]___[cond:xs",
       "color]___[value:[inherit!]]___[cond:_groupFocus",
       "transition]___[value:none]___[cond:_groupFocus",
-      "backgroundColor]___[value:mantine.yellow[2]/90]___[cond:& > mark",
-      "backgroundColor]___[value:mantine.yellow[5]/80]___[cond:& > mark<___>_dark",
-      "backgroundColor]___[value:[transparent]]___[cond:& > mark<___>_groupFocus",
-      "color]___[value:[inherit!]]___[cond:& > mark<___>_groupFocus",
+      "backgroundColor]___[value:highlight.body/80]___[cond:& > mark",
+      "backgroundColor]___[value:transparent]___[cond:& > mark<___>_groupFocus",
+      "color]___[value:inherit!]___[cond:& > mark<___>_groupFocus",
       "color]___[value:text.dimmed]___[cond:_groupHover",
       "opacity]___[value:0.3",
       "opacity]___[value:0.5]___[cond:_groupHover",
       "opacity]___[value:0.5]___[cond:_groupActive",
       "opacity]___[value:0.5]___[cond:_groupFocus",
-      "opacity]___[value:0.5]___[cond:_dark",
-      "opacity]___[value:0.8]___[cond:_groupHover",
-      "opacity]___[value:0.8]___[cond:_groupActive",
-      "opacity]___[value:0.8]___[cond:_groupFocus",
       "maxHeight]___[value:[calc(100vh - 160px)]",
       "maxHeight]___[value:[calc(100cqh - 160px)]]___[cond:xs",
-      "backgroundColor]___[value:mantine.gray[1]",
-      "backgroundColor]___[value:mantine.dark[5]/80]___[cond:_dark",
-      "backgroundColor]___[value:mantine.gray[2]]___[cond:_hover",
-      "backgroundColor]___[value:mantine.dark[4]]___[cond:_hover<___>_dark",
-      "backgroundColor]___[value:mantine.gray[2]]___[cond:_focus",
-      "backgroundColor]___[value:mantine.dark[4]]___[cond:_focus<___>_dark",
+      "layerStyle]___[value:surface.field",
       "color]___[value:text.dimmed]___[cond:_placeholder",
       "outline]___[value:none]___[cond:_focus",
+      "gap]___[value:0.5",
       "paddingInline]___[value:xs",
       "paddingBlock]___[value:xxs",
-      "color]___[value:mantine.primary.lightColor!]___[cond:_focus",
-      "backgroundColor]___[value:mantine.primary.lightHover!]___[cond:_focus",
-      "stroke]___[value:1.5",
+      "color]___[value:primary.text.light!]___[cond:_focus",
+      "backgroundColor]___[value:primary.body.lightHover!]___[cond:_focus",
       "--thickness]___[value:1px",
       "height]___[value:100%",
       "borderInlineEndWidth]___[value:var(--thickness)",
@@ -181,9 +188,6 @@
       "width]___[value:260",
       "position]___[value:left",
       "height]___[value:26",
-      "display]___[value:flex]___[cond:@/md",
-      "color]___[value:mantine.gray[5]",
-      "color]___[value:mantine.dark[3]]___[cond:_dark",
       "backgroundColor]___[value:likec4.panel.action.warning.bg",
       "backgroundColor]___[value:likec4.panel.action.warning.bg.hover]___[cond:_hover",
       "color]___[value:likec4.panel.action",
@@ -214,9 +218,9 @@
       "order]___[value:6",
       "paddingRight]___[value:xs",
       "stroke]___[value:1.8",
-      "transitionDuration]___[value:normal",
-      "transitionDelay]___[value:0.2s",
-      "transitionDelay]___[value:0s]___[cond:_hover",
+      "transitionDuration]___[value:medium",
+      "transitionDelay]___[value:[0.2s]",
+      "transitionDelay]___[value:0]___[cond:_hover",
       "lineClamp]___[value:5",
       "fill]___[value:none",
       "top]___[value:0.5",
@@ -242,11 +246,11 @@
       "paddingLeft]___[value:[14px]]___[cond:_shapeQueue",
       "layerStyle]___[value:likec4.tag",
       "justifyContent]___[value:center",
-      "maxWidth]___[value:50px",
-      "height]___[value:5px",
-      "height]___[value:12px]___[cond:_whenHovered",
+      "maxWidth]___[value:[50px]",
+      "height]___[value:[5px]",
+      "height]___[value:[12px]]___[cond:_whenHovered",
       "borderRadius]___[value:sm]___[cond:_whenHovered",
-      "transitionDelay]___[value:.08s]___[cond:_whenHovered",
+      "transitionDelay]___[value:fastest]___[cond:_whenHovered",
       "fontSize]___[value:lg",
       "paddingInline]___[value:1.5",
       "alignItems]___[value:baseline",
@@ -254,6 +258,7 @@
       "translate]___[value:auto",
       "translateX]___[value:[-8px]",
       "borderBlockEndWidth]___[value:var(--thickness)",
+      "border]___[value:subtle",
       "pointerEvents]___[value:none]___[cond:_whenPanning",
       "width]___[value:max-content",
       "cursor]___[value:default",
@@ -288,13 +293,10 @@
       "borderLeftColor]___[value:mantine.dark[4]]___[cond:_dark",
       "opacity]___[value:0.5",
       "display]___[value:block",
-      "fontSize]___[value:xxs",
       "lineHeight]___[value:sm",
-      "color]___[value:text.dimmed",
       "textStyle]___[value:xxs",
       "whiteSpace]___[value:nowrap",
       "textOverflow]___[value:ellipsis",
-      "maxWidth]___[value:160px",
       "paddingInline]___[value:1",
       "paddingBlock]___[value:0.5",
       "borderRadius]___[value:xs",
@@ -306,17 +308,21 @@
       "overflowWrap]___[value:anywhere",
       "top]___[value:24",
       "top]___[value:64",
-      "width]___[value:full",
-      "height]___[value:full",
-      "border]___[value:default",
-      "borderWidth]___[value:4",
+      "borderColor]___[value:likec4.compare.manual",
+      "borderColor]___[value:likec4.compare.latest",
+      "backgroundColor]___[value:likec4.compare.manual",
+      "backgroundColor]___[value:likec4.compare.latest",
       "fontSize]___[value:xs",
+      "lineHeight]___[value:1",
       "borderBottomLeftRadius]___[value:sm",
       "borderBottomRightRadius]___[value:sm",
       "transform]___[value:translateY(-4px)",
       "paddingInline]___[value:4",
       "color]___[value:mantine.gray[9]",
       "transform]___[value:translateY(-3px)]___[cond:_active",
+      "width]___[value:full",
+      "height]___[value:full",
+      "borderWidth]___[value:4",
       "boxShadow]___[value:lg",
       "textStyle]___[value:xs",
       "layerStyle]___[value:likec4.panel.action",
@@ -326,52 +332,32 @@
       "paddingLeft]___[value:3",
       "gap]___[value:4",
       "height]___[value:auto",
-      "maxHeight]___[value:calc(100cqh - 180px)",
-      "minWidth]___[value:200px]___[cond:@/md",
-      "flex]___[value:0",
+      "maxHeight]___[value:[calc(100cqh - 180px)]",
+      "minWidth]___[value:[200px]]___[cond:@/md",
+      "flex]___[value:[0]",
       "marginBottom]___[value:xs",
       "color]___[value:orange",
       "color]___[value:likec4.panel.text",
       "marginInline]___[value:[calc({spacing.2} * -1)]",
       "overflow]___[value:scroll",
-      "maxWidth]___[value:160",
-      "maxWidth]___[value:180]___[cond:@/sm",
-      "maxWidth]___[value:250]___[cond:@/md",
+      "maxWidth]___[value:[160px]",
+      "maxWidth]___[value:[180px]]___[cond:@/sm",
+      "maxWidth]___[value:[250px]]___[cond:@/md",
       "textStyle]___[value:md",
-      "color]___[value:likec4.compare.manual.outline",
+      "color]___[value:likec4.compare.outline",
       "paddingInline]___[value:3",
       "paddingBlock]___[value:2",
       "backgroundColor]___[value:likec4.compare.manual/10",
-      "border]___[value:1px solid {colors.likec4.compare.manual.outline/20}",
+      "borderWidth]___[value:default",
+      "borderStyle]___[value:solid",
+      "borderColor]___[value:likec4.compare.outline/20",
       "backgroundColor]___[value:likec4.compare.manual/20]___[cond:_hover",
-      "borderColor]___[value:likec4.compare.manual.outline/25]___[cond:_hover",
+      "borderColor]___[value:likec4.compare.outline/25]___[cond:_hover",
       "textStyle]___[value:dimmed.xs",
       "paddingLeft]___[value:2",
       "color]___[value:text",
       "color]___[value:text.bright]___[cond:_groupHover",
       "color]___[value:green",
-      "position]___[value:bottom-end",
-      "display]___[value:flex]___[cond:@/xs",
-      "backgroundColor]___[value:likec4.panel.action.bg.hover]___[cond:_hover",
-      "gap]___[value:[1px]",
-      "marginTop]___[value:1",
-      "opacity]___[value:0.8",
-      "marginBottom]___[value:xxs",
-      "margin]___[value:xs",
-      "padding]___[value:md",
-      "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",
-      "overflow]___[value:visible",
-      "color]___[value:mantine.gray[4]]___[cond:_dark",
-      "color]___[value:mantine.gray[8]]___[cond:_light",
-      "marginInlineEnd]___[value:0.5",
       "crossAxis]___[value:-22",
       "padding]___[value:1.5",
       "marginTop]___[value:4",
@@ -380,75 +366,97 @@
       "width]___[value:[20px]",
       "width]___[value:[64px]]___[cond:@/md",
       "display]___[value:none]___[cond:@/md",
+      "display]___[value:flex]___[cond:@/md",
       "layerStyle]___[value:likec4.panel.action.filled",
       "paddingInline]___[value:xxs",
-      "backgroundColor]___[value:none",
-      "backgroundColor]___[value:likec4.panel.action.bg.hover]___[cond:_notDisabled<___>_hover",
+      "lineHeight]___[value:snug",
+      "opacity]___[value:0.9",
+      "display]___[value:flex]___[cond:@/xs",
+      "backgroundColor]___[value:primary.body]___[cond:_selected",
+      "backgroundColor]___[value:primary.body.hover]___[cond:_selected<___>_hover",
+      "color]___[value:primary.text]___[cond:_selected",
+      "color]___[value:primary.text]___[cond:_selected<___>_hover",
       "fontWeight]___[value:normal",
       "boxShadow]___[value:md",
-      "mainAxis]___[value:2",
-      "lineHeight]___[value:1.1",
-      "color]___[value:mantine.gray[9]]___[cond:_light",
+      "mainAxis]___[value:3",
+      "maxWidth]___[value:[250px]",
       "marginInlineStart]___[value:1]___[cond:&:is([data-position=\"right\"])",
-      "mainAxis]___[value:10",
-      "opacity]___[value:0.6",
-      "padding]___[value:8",
-      "paddingTop]___[value:6",
+      "mainAxis]___[value:12",
       "marginBottom]___[value:10",
       "marginBlock]___[value:10",
       "paddingTop]___[value:100%",
       "left]___[value:2",
       "bottom]___[value:2",
+      "opacity]___[value:0.6",
+      "padding]___[value:8",
+      "paddingTop]___[value:6",
       "padding]___[value:xxs",
       "position]___[value:top",
-      "width]___[value:70%]___[cond:& > svg",
-      "height]___[value:70%]___[cond:& > svg",
-      "mainAxis]___[value:12",
+      "width]___[value:[70%]]___[cond:& > svg",
+      "height]___[value:[70%]]___[cond:& > svg",
+      "display]___[value:none]___[cond:_empty",
       "top]___[value:md",
       "left]___[value:md",
       "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",
+      "boxSize]___[value:[65%]]___[cond:& .tabler-icon",
       "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
       "boxShadow]___[value:none]___[cond:_whenPanning",
-      "flex]___[value:1 1 40%",
+      "flex]___[value:[1 1 40%]",
       "textAlign]___[value:center",
       "padding]___[value:[4px 6px]",
-      "zIndex]___[value:1",
+      "fontSize]___[value:[11px]",
+      "zIndex]___[value:base",
       "background]___[value:mantine.gray[2]",
       "borderColor]___[value:mantine.gray[4]",
       "background]___[value:mantine.dark[5]]___[cond:_dark",
       "background]___[value:mantine.gray[3]",
       "boxShadow]___[value:[inset 1px 1px 3px 0px #00000024]",
       "background]___[value:mantine.dark[7]]___[cond:_dark",
-      "width]___[value:8px",
-      "height]___[value:8px",
-      "border]___[value:2px solid",
+      "boxSize]___[value:[8px]",
+      "border]___[value:strong",
       "borderColor]___[value:mantine.gray[5]",
       "transform]___[value:translate(-50%, -50%)",
+      "borderWidth]___[value:strong",
       "borderColor]___[value:likec4.walkthrough.parallelFrame",
-      "borderWidth]___[value:4]___[cond:md",
+      "borderWidth]___[value:extra]___[cond:md",
       "marginRight]___[value:sm",
-      "flexShrink]___[value:0",
       "display]___[value:inherit]___[cond:@/md",
       "marginInlineStart]___[value:0",
       "marginInlineStart]___[value:2]___[cond:@/md",
       "top]___[value:[1px]",
       "right]___[value:[1px]",
-      "zIndex]___[value:9",
+      "zIndex]___[value:[9]",
       "textAlign]___[value:left",
-      "textWrap]___[value:pretty",
-      "lineHeight]___[value:1.25",
+      "textWrap]___[value:[pretty]",
+      "lineHeight]___[value:xs",
       "--text-fz]___[value:{fontSizes.sm}",
       "--text-fz]___[value:{fontSizes.md}]___[cond:md",
+      "marginBottom]___[value:xxs",
+      "padding]___[value:md",
       "paddingTop]___[value:xxs",
-      "maxWidth]___[value:300",
+      "maxWidth]___[value:[300px]",
+      "maxHeight]___[value:[calc(100cqh - 100px)]",
+      "minWidth]___[value:[400px]]___[cond:@/sm",
+      "maxWidth]___[value:[550px]]___[cond:@/sm",
+      "maxWidth]___[value:[700px]]___[cond:@/lg",
+      "overscrollBehavior]___[value:contain",
+      "marginTop]___[value:xxs",
+      "margin]___[value:1",
+      "color]___[value:text.bright",
+      "borderColor]___[value:transparent",
+      "cursor]___[value:inherit",
+      "backgroundColor]___[value:surface.field.hover]___[cond:_hover",
+      "outline]___[value:outline]___[cond:_focus",
+      "backgroundColor]___[value:surface.field]___[cond:_focus",
+      "minWidth]___[value:[40px]",
+      "fontWeight]___[value:semibold",
+      "layerStyle]___[value:surface.warning",
+      "stroke]___[value:3",
       "boxSizing]___[value:border-box",
       "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",
@@ -460,50 +468,44 @@
       "fontFamily]___[value:likec4.element",
       "fontOpticalSizing]___[value:auto",
       "fontStyle]___[value:normal",
-      "fontSize]___[value:24px",
-      "lineHeight]___[value:xs",
+      "fontSize]___[value:[24px]",
       "lineClamp]___[value:2",
-      "flex]___[value:0 0 40px",
-      "height]___[value:40px",
-      "width]___[value:40px",
+      "flex]___[value:[0 0 40px]",
+      "boxSize]___[value:[40px]",
       "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)",
+      "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",
-      "background]___[value:body",
       "padding]___[value:[10px 8px]",
-      "border]___[value:1px dashed",
+      "borderStyle]___[value:dashed",
       "--view-title-color]___[value:{colors.mantine.dark[1]}",
       "--icon-color]___[value:{colors.mantine.dark[1]}]___[cond:_hover",
-      "--view-title-color]___[value:{colors.default.color}]___[cond:_hover",
+      "--view-title-color]___[value:{colors.text}]___[cond:_hover",
       "--icon-color]___[value:{colors.mantine.gray[6]}]___[cond:_light",
       "--view-title-color]___[value:{colors.mantine.gray[7]}]___[cond:_light",
       "--icon-color]___[value:{colors.mantine.gray[7]}]___[cond:_light<___>_hover",
       "transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
       "color]___[value:[var(--icon-color, {colors.mantine.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
       "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
-      "color]___[value:default.color]___[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:text]___[cond:& .mantine-ThemeIcon-root<___>_hover",
+      "transition]___[value:[all 130ms {easings.inOut}]]___[cond:& > *",
       "color]___[value:[var(--view-title-color, {colors.mantine.gray[7]})]",
-      "fontSize]___[value:15px",
-      "lineHeight]___[value:1.4",
+      "fontSize]___[value:[15px]",
+      "lineHeight]___[value:[1.4]",
       "background]___[value:mantine.gray[1]",
-      "gap]___[value:1.5",
       "padding]___[value:[6px 8px]",
       "color]___[value:mantine.gray[7]",
       "transitionTimingFunction]___[value:out]___[cond:_hover",
-      "color]___[value:default.color]___[cond:_hover",
+      "color]___[value:text]___[cond:_hover",
       "background]___[value:mantine.gray[3]]___[cond:_hover",
       "transition]___[value:none]___[cond:&[data-active]",
       "background]___[value:white]___[cond:&[data-active]",
       "boxShadow]___[value:xs]___[cond:&[data-active]",
-      "color]___[value:default.color]___[cond:&[data-active]",
+      "color]___[value:text]___[cond:&[data-active]",
       "color]___[value:mantine.dark[1]]___[cond:_dark",
       "color]___[value:white]___[cond:_dark<___>_hover",
       "background]___[value:mantine.dark[6]]___[cond:_dark<___>_hover",
@@ -515,20 +517,18 @@
       "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
       "paddingLeft]___[value:1]___[cond:& .mantine-ScrollArea-root<___>& > div",
       "paddingRight]___[value:1]___[cond:& .mantine-ScrollArea-root<___>& > div",
-      "gridTemplateColumns]___[value:min-content 1fr",
-      "gridAutoRows]___[value:min-content max-content",
+      "gridTemplateColumns]___[value:[min-content 1fr]",
+      "gridAutoRows]___[value:[min-content max-content]",
       "gap]___[value:[24px 20px]",
       "justifySelf]___[value:end",
       "textAlign]___[value:right",
-      "width]___[value:14px",
-      "height]___[value:14px",
-      "border]___[value:3.5px solid",
-      "borderColor]___[value:mantine.dark[3]",
+      "boxSize]___[value:[14px]",
+      "border]___[value:[3.5px solid {colors.mantine.dark[3]}]",
       "borderTop]___[value:none",
       "borderLeft]___[value:none",
       "bottom]___[value:0.5",
-      "cursor]___[value:se-resize",
-      "borderWidth]___[value:4px]___[cond:_hover",
+      "cursor]___[value:[se-resize]",
+      "borderWidth]___[value:[4px]]___[cond:_hover",
       "borderColor]___[value:mantine.dark[1]]___[cond:_hover",
       "alignItems]___[value:start",
       "justifyContent]___[value:space-between",
@@ -537,28 +537,35 @@
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
       "gap]___[value:6",
-      "gridAutoRows]___[value:min-content",
+      "gridTemplateColumns]___[value:min-content 1fr",
+      "gridAutoRows]___[value:[min-content]",
       "gap]___[value:[12px 16px]",
       "marginTop]___[value:6",
       "width]___[value:300",
       "whiteSpace]___[value:pre-wrap",
+      "overflow]___[value:visible",
       "textOverflow]___[value:unset",
       "wordBreak]___[value:normal",
       "padding]___[value:xs",
-      "minHeight]___[value:32px",
+      "lineHeight]___[value:md",
+      "color]___[value:mantine.gray[5]",
+      "color]___[value:mantine.dark[3]]___[cond:_dark",
+      "minHeight]___[value:[32px]",
       "padding]___[value:[4px 8px]",
       "backgroundColor]___[value:white",
       "borderColor]___[value:mantine.gray[3]",
-      "maxWidth]___[value:min(200px, 100%)",
-      "minWidth]___[value:60px",
-      "flex]___[value:0 1 auto",
+      "maxWidth]___[value:[min(200px, 100%)]",
+      "minWidth]___[value:[60px]",
+      "flex]___[value:[0 1 auto]",
       "backgroundColor]___[value:mantine.dark[9]]___[cond:_dark",
       "justifyContent]___[value:flex-end",
-      "transition]___[value:all 150ms ease",
-      "color]___[value:mantine.primary[6]]___[cond:_hover",
+      "transitionProperty]___[value:common",
+      "transition]___[value:medium",
+      "color]___[value:primary.body]___[cond:_hover",
       "backgroundColor]___[value:mantine.dark[7]]___[cond:_hover<___>_dark",
-      "color]___[value:mantine.primary[4]]___[cond:_hover<___>_dark",
+      "color]___[value:primary.body.hover]___[cond:_hover<___>_dark",
       "color]___[value:mantine.gray[6]",
+      "backgroundColor]___[value:mantine.gray[1]",
       "padding]___[value:[1px 4px]",
       "color]___[value:mantine.dark[2]]___[cond:_dark",
       "backgroundColor]___[value:mantine.dark[6]]___[cond:_dark",
@@ -568,31 +575,30 @@
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
       "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",
+      "height]___[value:[36px]",
       "paddingInlineStart]___[value:[16px]",
       "paddingInlineEnd]___[value:2.5",
-      "color]___[value:mantine.gray.lightColor]___[cond:_dark",
-      "background]___[value:mantine.gray.lightHover]___[cond:_hover",
+      "color]___[value:text.default",
       "transition]___[value:fast]___[cond:& .tabler-icon",
-      "width]___[value:90%]___[cond:& .tabler-icon",
-      "opacity]___[value:0.65]___[cond:& .tabler-icon",
+      "boxSize]___[value:[90%]]___[cond:& .tabler-icon",
+      "opacity]___[value:[0.65]]___[cond:& .tabler-icon",
       "flex]___[value:1 1 100%",
+      "flex]___[value:0",
       "stroke]___[value:1.2",
       "offset]___[value:0",
       "paddingBlock]___[value:4",
       "display]___[value:inline-block",
       "padding]___[value:[3px 6px]",
       "background]___[value:var(--likec4-palette-fill)/75",
-      "lineHeight]___[value:1.2",
+      "lineHeight]___[value:[1.2]",
       "color]___[value:var(--likec4-palette-hiContrast)",
       "background]___[value:mantine.gray[1]]___[cond:_light",
       "color]___[value:mantine.orange[4]]___[cond:&[data-missing]",
       "background]___[value:mantine.orange[8]/15]___[cond:&[data-missing]",
       "borderColor]___[value:mantine.orange[5]/20]___[cond:&[data-missing]",
       "color]___[value:mantine.orange[8]]___[cond:&[data-missing]<___>_light",
-      "borderColor]___[value:mantine.gray[3]]___[cond:_light",
+      "flex]___[value:[1 1 100%]",
+      "background]___[value:surface.sunken",
       "content]___[value:\"scope:\"]___[cond:_before",
       "position]___[value:absolute]___[cond:_before",
       "top]___[value:0]___[cond:_before",
@@ -601,14 +607,12 @@
       "fontWeight]___[value:medium]___[cond:_before",
       "lineHeight]___[value:1]___[cond:_before",
       "color]___[value:text.dimmed]___[cond:_before",
-      "opacity]___[value:0.85]___[cond:_before",
+      "opacity]___[value:[0.85]]___[cond:_before",
       "transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
       "background]___[value:mantine.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
       "fontSize]___[value:xl",
       "padding]___[value:[1px 5px]",
-      "minWidth]___[value:24px",
-      "background]___[value:mantine.dark[7]",
-      "color]___[value:default.color",
+      "minWidth]___[value:[24px]",
       "color]___[value:text.dimmed]___[cond:&[data-zero]",
       "background]___[value:mantine.orange[8]/20]___[cond:&[data-missing]",
       "gap]___[value:8",
@@ -620,8 +624,7 @@
       "paddingBlock]___[value:xs",
       "marginTop]___[value:sm",
       "borderStyle]___[value:solid]___[cond:_hover",
-      "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
-      "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
+      "color]___[value:text.default]___[cond:_hover",
       "position]___[value:top-right",
       "position]___[value:top-left",
       "marginLeft]___[value:sm",
@@ -629,42 +632,42 @@
       "color]___[value:text/90]___[cond:& .mantine-Text-root",
       "fontSize]___[value:xs]___[cond:& .mantine-Text-root",
       "fontWeight]___[value:medium]___[cond:& .mantine-Text-root",
-      "lineHeight]___[value:1.2]___[cond:& .mantine-Text-root",
+      "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
       "paddingLeft]___[value:1",
       "gridColumn]___[value:1",
       "gridColumn]___[value:2",
       "gridColumn]___[value:3",
       "gridColumnStart]___[value:1",
       "gridColumnEnd]___[value:4",
-      "borderBottom]___[value:1px solid",
-      "borderBottomColor]___[value:default.border",
+      "borderBottomWidth]___[value:default",
+      "borderBottomStyle]___[value:solid",
+      "borderBottomColor]___[value:border.default",
       "padding]___[value:[0 4px 5px 4px]",
       "fontSize]___[value:xxs]___[cond:& .mantine-Text-root",
       "fontWeight]___[value:normal]___[cond:& .mantine-Text-root",
-      "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
       "color]___[value:text.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]) > *",
+      "transitionProperty]___[value:common]___[cond:& > *",
+      "transition]___[value:medium]___[cond:& > *",
+      "transitionProperty]___[value:common]___[cond:&:is(:hover, [data-selected=true]) > *",
+      "transition]___[value:medium]___[cond:&:is(:hover, [data-selected=true]) > *",
       "cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
-      "backgroundColor]___[value:default.hover]___[cond:&:is(:hover, [data-selected=true]) > *",
+      "backgroundColor]___[value:surface.hover]___[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",
+      "maxHeight]___[value:[70vh]",
+      "maxHeight]___[value:[calc(100cqh - 70px)]]___[cond:xs",
       "color]___[value:dark",
-      "backgroundColor]___[value:mantine.gray[0]]___[cond:_hover",
-      "backgroundColor]___[value:default.hover]___[cond:_hover<___>_dark",
-      "color]___[value:white]___[cond:_hover<___>_dark",
+      "backgroundColor]___[value:surface.hover]___[cond:_hover",
       "paddingBlock]___[value:3",
       "offset]___[value:4",
       "truncate]___[value:end",
       "stroke]___[value:3.5",
       "flex]___[value:1 0 auto",
-      "border]___[value:3px dashed",
+      "border]___[value:[3px dashed]",
       "borderRadius]___[value:md",
       "marginBottom]___[value:2",
       "containerName]___[value:likec4-tree",
@@ -673,12 +676,11 @@
       "flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
       "alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
       "gap]___[value:0.5]___[cond:@container likec4-tree (max-width: 450px)",
-      "fontSize]___[value:10px",
-      "lineHeight]___[value:1.3",
       "background]___[value:mantine.dark[9]/30",
       "background]___[value:mantine.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",
@@ -697,73 +699,67 @@
       "crossAxis]___[value:50",
       "srOnly]___[value:true",
       "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
-      "fontSize]___[value:13px",
+      "marginTop]___[value:1",
       "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
-      "background]___[value:mantine.primary[8]",
-      "borderColor]___[value:mantine.primary[9]",
-      "background]___[value:surface.default",
+      "background]___[value:likec4.accent.8",
+      "borderColor]___[value:likec4.accent.9",
       "padding]___[value:[12px 8px 12px 14px]",
-      "minHeight]___[value:60px",
+      "minHeight]___[value:[60px]",
       "outline]___[value:none]___[cond:_hover",
-      "borderColor]___[value:mantine.primary[9]]___[cond:_hover",
-      "background]___[value:mantine.primary[8]/60]___[cond:_hover",
-      "background]___[value:mantine.primary[8]]___[cond:_focus",
-      "borderColor]___[value:mantine.primary[9]]___[cond:_focus",
+      "borderColor]___[value:likec4.accent.9]___[cond:_hover",
+      "background]___[value:likec4.accent.8/60]___[cond:_hover",
+      "background]___[value:likec4.accent.8]___[cond:_focus",
+      "borderColor]___[value:likec4.accent.9]___[cond:_focus",
       "outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "background]___[value:mantine.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "borderColor]___[value:mantine.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "background]___[value:likec4.accent.8]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "borderColor]___[value:likec4.accent.9]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
       "borderColor]___[value:transparent]___[cond:_dark",
       "background]___[value:mantine.dark[6]/80]___[cond:_dark",
-      "background]___[value:mantine.white/80]___[cond:_light",
-      "borderColor]___[value:mantine.primary[6]]___[cond:_light<___>_hover",
-      "backgroundColor]___[value:mantine.primary[5]]___[cond:_light<___>_hover",
-      "color]___[value:mantine.gray[5]]___[cond:_light",
-      "color]___[value:mantine.primary[0]]___[cond:_groupHover",
-      "color]___[value:mantine.primary[0]]___[cond:_groupFocus",
-      "color]___[value:mantine.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)",
+      "background]___[value:white/80]___[cond:_light",
+      "borderColor]___[value:likec4.accent.6]___[cond:_light<___>_hover",
+      "backgroundColor]___[value:likec4.accent.5]___[cond:_light<___>_hover",
+      "color]___[value:likec4.accent.0]___[cond:_groupHover",
+      "color]___[value:likec4.accent.0]___[cond:_groupFocus",
+      "color]___[value:likec4.accent.0]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "flex]___[value:[0 0 24px]",
+      "boxSize]___[value:[24px]",
+      "--ti-size]___[value: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]) &",
+      "opacity]___[value:[0.4]]___[cond::where([data-disabled]) &",
       "color]___[value:mantine.dark[1]",
-      "color]___[value:mantine.primary[1]]___[cond:_groupHover",
+      "color]___[value:likec4.accent.1]___[cond:_groupHover",
       "color]___[value:white]___[cond:_groupHover<___>_light",
-      "color]___[value:mantine.primary[1]]___[cond:_groupFocus",
+      "color]___[value:likec4.accent.1]___[cond:_groupFocus",
       "color]___[value:white]___[cond:_groupFocus<___>_light",
-      "color]___[value:mantine.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "color]___[value:likec4.accent.1]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
       "color]___[value:white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
-      "color]___[value:mantine.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",
+      "color]___[value:likec4.accent.0]___[cond:_groupHover<___>_light",
+      "opacity]___[value:[0.85]]___[cond::where([data-disabled]) &",
       "background]___[value:mantine.gray[4]/55 !important]___[cond:_focusWithin",
       "background]___[value:mantine.dark[5]/55 !important]___[cond:_focusWithin<___>_dark",
       "background]___[value:mantine.gray[3]/35]___[cond:_groupHover",
       "background]___[value:mantine.dark[5]/35]___[cond:_groupHover<___>_dark",
       "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
-      "zIndex]___[value:902",
+      "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",
+      "maxWidth]___[value:[600px]",
+      "minWidth]___[value:[200px]",
       "transform]___[value:translateX(-50%)",
-      "zIndex]___[value:903",
+      "zIndex]___[value:[903]",
       "marginTop]___[value:[32px]]___[cond:& + &",
-      "stroke]___[value:likec4.compare.manual.outline",
-      "strokeWidth]___[value:8px",
-      "strokeWidth]___[value:12px]___[cond:_whenHovered",
+      "stroke]___[value:likec4.compare.outline",
+      "strokeWidth]___[value:[8px]",
+      "strokeWidth]___[value:[12px]]___[cond:_whenHovered",
       "strokeOpacity]___[value:0.5",
-      "cursor]___[value:copy]___[cond:& .react-flow__edge-interaction",
+      "cursor]___[value:[copy]]___[cond:& .react-flow__edge-interaction",
+      "cursor]___[value:inherit]___[cond:& .react-flow__edge-interaction",
       "mixBlendMode]___[value:screen]___[cond:_dark",
       "mixBlendMode]___[value:multiply]___[cond:_light",
       "zIndex]___[value:[100]",
@@ -772,62 +768,59 @@
       "fill]___[value:[var(--xy-edge-stroke)]",
       "stroke]___[value:transparent",
       "fillOpacity]___[value:0.5",
-      "strokeWidth]___[value:10",
-      "r]___[value:4",
+      "strokeWidth]___[value:[10]",
+      "r]___[value:[4]",
       "cursor]___[value:grab",
       "visibility]___[value:hidden",
-      "transitionDuration]___[value:120ms",
-      "transitionProperty]___[value:visibility, fill, fill-opacity, r",
+      "transitionDuration]___[value:fast",
+      "transitionProperty]___[value:[visibility, fill, fill-opacity, r]",
       "transitionTimingFunction]___[value:inOut",
-      "transitionDelay]___[value:20ms",
+      "transitionDelay]___[value:[20ms]",
       "visibility]___[value:visible]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
       "fillOpacity]___[value:1]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
       "transitionTimingFunction]___[value:out]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
-      "transitionDelay]___[value:0ms]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
-      "r]___[value:6]___[cond::where([data-likec4-selected='true']) &",
-      "r]___[value:8]___[cond::is([data-likec4-hovered='true']) &",
-      "fill]___[value:mantine.primary.filledHover]___[cond:_hover",
-      "r]___[value:10]___[cond:_hover",
-      "transitionDuration]___[value:100ms]___[cond:_hover",
+      "transitionDelay]___[value:0]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
+      "r]___[value:[6]]___[cond::where([data-likec4-selected='true']) &",
+      "r]___[value:[8]]___[cond::is([data-likec4-hovered='true']) &",
+      "fill]___[value:primary.body.hover]___[cond:_hover",
+      "r]___[value:[10]]___[cond:_hover",
+      "transitionDuration]___[value:fastest]___[cond:_hover",
       "cursor]___[value:grabbing]___[cond:_groupActive",
-      "outlineColor]___[value:likec4.compare.manual.outline]___[cond:& + .likec4-element-shape",
-      "outlineWidth]___[value:4px]___[cond:& + .likec4-element-shape",
+      "outlineColor]___[value:likec4.compare.outline]___[cond:& + .likec4-element-shape",
+      "outlineWidth]___[value:[4px]]___[cond:& + .likec4-element-shape",
       "outlineStyle]___[value:dashed]___[cond:& + .likec4-element-shape",
       "outlineOffset]___[value:1.5]___[cond:& + .likec4-element-shape",
-      "zIndex]___[value:300",
+      "zIndex]___[value:[300]",
       "backgroundColor]___[value:likec4.overlay.body",
       "width]___[value:fit-content",
       "height]___[value:fit-content",
-      "maxHeight]___[value:70cqh",
-      "maxWidth]___[value:50cqw",
+      "maxHeight]___[value:[70cqh]",
+      "maxWidth]___[value:[50cqw]",
       "paddingRight]___[value:xxs",
-      "zIndex]___[value:200",
+      "zIndex]___[value:[200]",
       "cursor]___[value:zoom-out",
       "backgroundColor]___[value:var(--likec4-palette-fill)",
       "top]___[value:1",
       "translateX]___[value:-1/2",
-      "zIndex]___[value:z-0",
       "--_color]___[value:var(--likec4-palette-stroke)",
       "--_color]___[value:[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]]___[cond:_dark",
       "borderColor]___[value:[var(--_color)/30]",
       "backgroundColor]___[value:var(--likec4-palette-fill)/15",
       "paddingTop]___[value:0.5",
-      "letterSpacing]___[value:.75px",
+      "letterSpacing]___[value:[0.75px]",
       "color]___[value:[var(--_color)/75]",
       "color]___[value:colorPalette.text",
       "fontSize]___[value:[9px]",
       "letterSpacing]___[value:tight",
-      "textTransform]___[value:uppercase",
-      "border]___[value:{borderWidths.2} solid {colors.colorPalette.border}",
+      "borderColor]___[value:colorPalette.border",
       "background]___[value:colorPalette",
       "background]___[value:colorPalette.hovered]___[cond:&[data-state=\"hovered\"]",
-      "transition]___[value:faster]___[cond:&[data-state=\"hovered\"]",
-      "transitionDelay]___[value:faster]___[cond:&[data-state=\"hovered\"]",
+      "transition]___[value:fastest]___[cond:&[data-state=\"hovered\"]",
+      "transitionDelay]___[value:fastest]___[cond:&[data-state=\"hovered\"]",
       "transitionTimingFunction]___[value:out]___[cond:&[data-state=\"hovered\"]",
       "transitionProperty]___[value:background]___[cond:&[data-state=\"hovered\"]",
       "background]___[value:colorPalette.label]___[cond:&[data-state=\"collapsed\"]",
       "color]___[value:[oklch(from {colors.colorPalette.text} l calc(c - 0.15) h)]",
-      "lineHeight]___[value:xxs",
       "alignSelf]___[value:stretch",
       "background]___[value:colorPalette.label",
       "borderTopLeftRadius]___[value:sm",
@@ -843,7 +836,6 @@
       "paddingRight]___[value:2",
       "marginBlock]___[value:2",
       "marginInlineStart]___[value:2",
-      "minWidth]___[value:[40px]",
       "width]___[value:min-content",
       "content]___[value:\" \"]___[cond:_before",
       "background]___[value:currentColor]___[cond:_before",
@@ -863,8 +855,8 @@
       "colorPalette]___[value:subflow.break",
       "colorPalette]___[value:subflow.alt",
       "colorPalette]___[value:subflow.try",
-      "outlineColor]___[value:likec4.compare.manual.outline",
-      "outlineWidth]___[value:4px",
+      "outlineColor]___[value:likec4.compare.outline",
+      "outlineWidth]___[value:extra",
       "outlineStyle]___[value:dashed",
       "outlineOffset]___[value:1.5",
       "right]___[value:0",
@@ -872,25 +864,21 @@
       "height]___[value:min-content",
       "--ai-radius]___[value:0px",
       "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
-      "minWidth]___[value:200",
-      "maxWidth]___[value:calc(100vw - 20px)",
+      "maxWidth]___[value:[calc(100vw - 20px)]",
       "backgroundColor]___[value:surface.default/80",
-      "minWidth]___[value:300]___[cond:sm",
-      "maxWidth]___[value:65vw]___[cond:sm",
-      "maxWidth]___[value:40vw]___[cond:md",
-      "backgroundColor]___[value:mantine.dark[6]/80]___[cond:_dark",
-      "transition]___[value:all 100ms ease-in",
-      "transition]___[value:all 120ms ease-out]___[cond:_hover",
-      "backgroundColor]___[value:mantine.primary[2]/50]___[cond:_hover",
-      "backgroundColor]___[value:mantine.dark[3]/40]___[cond:_dark<___>_hover",
+      "minWidth]___[value:[300px]]___[cond:sm",
+      "maxWidth]___[value:[65vw]]___[cond:sm",
+      "maxWidth]___[value:[40vw]]___[cond:md",
+      "transition]___[value:[all 100ms ease-in]",
+      "transition]___[value:[all 120ms ease-out]]___[cond:_hover",
       "fill]___[value:var(--likec4-palette-fill)",
       "stroke]___[value:var(--likec4-palette-stroke)",
-      "strokeWidth]___[value:1",
-      "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
+      "strokeWidth]___[value:[1px]",
+      "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",
+      "transition]___[value:[all 150ms ease-in-out]",
       "--badge-radius]___[value:2px",
       "--badge-fz]___[value:9.5px",
       "--badge-padding-x]___[value:3px",
@@ -903,53 +891,103 @@
       "flex]___[value:0 0 70px",
       "opacity]___[value:0.25",
       "marginLeft]___[value:2",
-      "minHeight]___[value:0",
-      "paddingBottom]___[value:3",
-      "transition]___[value:background-color 120ms ease",
-      "background]___[value:surface.sunken/60]___[cond:_hover",
-      "background]___[value:mantine.primary.light]___[cond:&[data-selected=\"true\"]",
-      "color]___[value:mantine.primary.lightColor]___[cond:&[data-selected=\"true\"]",
+      "marginBottom]___[value:1.5",
+      "paddingInline]___[value:2.5",
+      "background]___[value:likec4.panel.bg",
+      "borderBottom]___[value:panel",
+      "textStyle]___[value:dimmed.xxs",
+      "flex]___[value:none]___[cond:& svg",
+      "opacity]___[value:[0.5]]___[cond:& svg",
+      "appearance]___[value:none",
+      "font]___[value:inherit",
+      "letterSpacing]___[value:[inherit]",
+      "textTransform]___[value:inherit",
+      "transitionProperty]___[value:colors",
+      "maxWidth]___[value:[200px]",
+      "cursor]___[value:default]___[cond:_disabled",
+      "outline]___[value:[2px solid {colors.primary.border}]]___[cond:_focusVisible",
+      "outlineOffset]___[value:[2px]]___[cond:_focusVisible",
+      "fontWeight]___[value:extrabold",
+      "color]___[value:inherit",
       "flex]___[value:none",
-      "height]___[value:18px",
-      "background]___[value:surface.sunken",
-      "border]___[value:1px solid {colors.surface.sunken.border}",
-      "marginBlockStart]___[value:1",
-      "marginBlockEnd]___[value:2",
-      "transition]___[value:transform 150ms ease",
-      "transform]___[value:rotate(90deg)]___[cond:&[data-expanded=\"true\"]",
-      "fontWeight]___[value:semibold",
-      "letterSpacing]___[value:wider",
-      "minWidth]___[value:22px",
-      "fontSize]___[value:[10px]",
+      "marginBottom]___[value:0.5",
+      "paddingBottom]___[value:1",
+      "minHeight]___[value:0",
+      "paddingBottom]___[value:4",
+      "transitionProperty]___[value:background",
+      "transition]___[value:slow",
+      "gap]___[value:2.5",
+      "boxSize]___[value:[20px]",
+      "height]___[value:[2px]",
+      "marginTop]___[value:1.5",
+      "background]___[value:border.subtle",
+      "marginTop]___[value:0.5",
       "fontVariantNumeric]___[value:tabular-nums",
-      "lineHeight]___[value:18px",
-      "whiteSpace]___[value:pre-line",
-      "maxWidth]___[value:85cqw",
+      "background]___[value:primary.body",
+      "transitionProperty]___[value:[width]",
+      "maxHeight]___[value:16",
+      "maxWidth]___[value:[85cqw]",
       "height]___[value:100cqh",
       "maxHeight]___[value:100cqh",
-      "gap]___[value:2.5",
-      "paddingInline]___[value:2.5",
-      "borderBottom]___[value:1px solid {colors.likec4.panel.border}",
-      "paddingBottom]___[value:1",
-      "minHeight]___[value:18px",
-      "boxSize]___[value:20px",
-      "textStyle]___[value:dimmed.xxs",
-      "maxHeight]___[value:16",
-      "borderWidth]___[value:3px",
-      "borderStyle]___[value:dashed",
+      "minWidth]___[value:[20px]",
+      "height]___[value:[18px]",
+      "fontSize]___[value:[10px]",
+      "minWidth]___[value:[22px]",
+      "height]___[value:[20px]",
+      "background]___[value:[linear-gradient(var(--seq-badge-bg), var(--seq-badge-bg)), {colors.likec4.panel.bg}]",
+      "color]___[value:[var(--seq-badge-fg)]",
+      "boxSize]___[value:[5px]",
+      "marginTop]___[value:[7px]",
+      "borderRadius]___[value:pill",
+      "background]___[value:text.dimmed",
+      "background]___[value:[var(--colors-color-palette-hovered, {colors.surface.sunken})]]___[cond:_hover",
+      "lineHeight]___[value:[18px]",
+      "whiteSpace]___[value:pre-line",
+      "fontSize]___[value:md",
+      "lineHeight]___[value:[20px]",
+      "textWrap]___[value:balance",
+      "background]___[value:[var(--colors-color-palette-label, {colors.surface.sunken})]",
+      "scrollMarginTop]___[value:10",
+      "scrollMarginBottom]___[value:16",
+      "marginLeft]___[value:[30px]",
+      "fontSize]___[value:[8px]",
+      "color]___[value:[color-mix(in srgb, {colors.text}, transparent 20%)]",
+      "display]___[value:inline",
+      "verticalAlign]___[value:[-0.15em]",
+      "marginInline]___[value:1",
+      "marginTop]___[value:2.5",
+      "paddingTop]___[value:2.5",
+      "paddingBottom]___[value:2",
+      "borderTop]___[value:subtle",
+      "background]___[value:[color-mix(in srgb, {colors.likec4.panel.bg}, #000 calc(var(--seq-r, 0) * 4.55%))]",
+      "opacity]___[value:[calc(1 - var(--seq-r, 0) * 0.26)]",
+      "filter]___[value:[saturate(calc(1 - var(--seq-r, 0) * 0.286))]",
+      "filter]___[value:[none]]___[cond:_hover",
+      "marginInline]___[value:-2",
+      "marginBlock]___[value:0.5",
+      "marginInline]___[value:0",
+      "paddingInline]___[value:0",
+      "borderLeft]___[value:default",
+      "borderLeftColor]___[value:colorPalette.border",
+      "background]___[value:[linear-gradient(var(--seq-frame-bg), var(--seq-frame-bg)), {colors.likec4.panel.bg}]",
+      "marginBlock]___[value:0",
+      "inset]___[value:[0 10px 0 4px]",
+      "border]___[value:[1px solid {colors.colorPalette.border}]",
+      "border]___[value:[3px dashed {colors.border.default}]",
+      "textStyle]___[value:dimmed",
       "strokeWidth]___[value:5",
       "paddingInline]___[value:6",
       "height]___[value:xs",
       "justifyContent]___[value:flex-start",
-      "maxWidth]___[value:120px",
-      "maxWidth]___[value:110px",
+      "maxWidth]___[value:[120px]",
+      "maxWidth]___[value:[110px]",
       "position]___[value:left-start",
       "offset]___[value:20",
       "paddingLeft]___[value:8",
       "paddingInline]___[value:5",
       "paddingBottom]___[value:8",
       "paddingTop]___[value:4",
-      "maxWidth]___[value:220px"
+      "maxWidth]___[value:[220px]"
     ],
     "recipes": {
       "edgeLabel": [
@@ -970,6 +1008,7 @@
         "value]___[value:plaintext]___[recipe:markdownBlock",
         "uselikec4palette]___[value:true]___[recipe:markdownBlock"
       ],
+      "floatingWindow": [],
       "navigationLink": [
         "truncateLabel]___[value:false]___[recipe:navigationLink",
         "truncateLabel]___[value:true]___[recipe:navigationLink"
@@ -978,6 +1017,9 @@
         "size]___[value:md]___[recipe:navigationPanel",
         "panelPosition]___[value:left]___[recipe:navigationPanel"
       ],
+      "emptyBox": [
+        "fullsize]___[value:true]___[recipe:emptyBox"
+      ],
       "navigationPanelActionIcon": [
         "variant]___[value:default]___[recipe:navigationPanelActionIcon",
         "type]___[value:default]___[recipe:navigationPanelActionIcon",
@@ -1002,7 +1044,8 @@
       "actionButtons": [],
       "elementNodeData": [
         "iconPosition]___[value:left]___[recipe:elementNodeData",
-        "withIconColor]___[value:false]___[recipe:elementNodeData"
+        "withIconColor]___[value:false]___[recipe:elementNodeData",
+        "withIconBlend]___[value:false]___[recipe:elementNodeData"
       ],
       "elementNode": [],
       "elementShapeRecipe": [