@likec4/diagram 1.60.0 → 1.61.0

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.12.1",
+  "schemaVersion": "1.12.2",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -16,6 +16,10 @@
       "color]___[value:text.dimmed",
       "textTransform]___[value:uppercase",
       "letterSpacing]___[value:caps.sm",
+      "boxShadow]___[value:sm",
+      "boxShadow]___[value:lg]___[cond:_dark",
+      "background]___[value:surface.canvas]___[cond:_dark",
+      "border]___[value:subtle]___[cond:_dark",
       "cursor]___[value:pointer",
       "--mantine-cursor-pointer]___[value:pointer",
       "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
@@ -124,36 +128,13 @@
       "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: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",
-      "display]___[value:none]___[cond:_print",
       "mainAxis]___[value:4",
       "position]___[value:bottom-start",
-      "layerStyle]___[value:likec4.panel",
-      "position]___[value:relative",
-      "pointerEvents]___[value:all",
-      "userSelect]___[value:none",
-      "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:1.5",
       "flexShrink]___[value:0",
       "flexGrow]___[value:0",
       "layerStyle]___[value:likec4.dropdown",
+      "pointerEvents]___[value:all",
       "gap]___[value:[4px]",
       "maxWidth]___[value:[calc(100vw - 50px)]",
       "maxWidth]___[value:[calc(100cqw - 50px)]]___[cond:xs",
@@ -173,10 +154,12 @@
       "opacity]___[value:0.5]___[cond:_groupFocus",
       "maxHeight]___[value:[calc(100vh - 160px)]",
       "maxHeight]___[value:[calc(100cqh - 160px)]]___[cond:xs",
+      "flexGrow]___[value:1",
       "layerStyle]___[value:surface.field",
       "color]___[value:text.dimmed]___[cond:_placeholder",
       "outline]___[value:none]___[cond:_focus",
       "gap]___[value:0.5",
+      "gap]___[value:xxs",
       "paddingInline]___[value:xs",
       "paddingBlock]___[value:xxs",
       "color]___[value:primary.text.light!]___[cond:_focus",
@@ -190,16 +173,12 @@
       "height]___[value:26",
       "backgroundColor]___[value:likec4.panel.action.warning.bg",
       "backgroundColor]___[value:likec4.panel.action.warning.bg.hover]___[cond:_hover",
-      "color]___[value:likec4.panel.action",
-      "color]___[value:likec4.panel.action.hover]___[cond:_hover",
-      "truncate]___[value:true",
-      "color]___[value:likec4.panel.text.dimmed",
-      "color]___[value:likec4.panel.action]___[cond:_hover",
       "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)",
       "maxHeight]___[value:100vh",
+      "overflow]___[value:hidden",
       "justifyContent]___[value:stretch",
       "paddingTop]___[value:[20px]",
       "paddingLeft]___[value:md",
@@ -221,8 +200,8 @@
       "transitionDuration]___[value:medium",
       "transitionDelay]___[value:[0.2s]",
       "transitionDelay]___[value:0]___[cond:_hover",
-      "lineClamp]___[value:5",
       "fill]___[value:none",
+      "display]___[value:none",
       "top]___[value:0.5",
       "right]___[value:0.5",
       "right]___[value:[5px]]___[cond:_shapeBrowser",
@@ -231,14 +210,17 @@
       "top]___[value:[1px]]___[cond:_shapeQueue",
       "right]___[value:3]___[cond:_shapeQueue",
       "display]___[value:none]___[cond:_smallZoom",
+      "display]___[value:none]___[cond:_print",
       "borderStyle]___[value:solid]___[cond:&",
       "borderWidth]___[value:3px]___[cond:&",
       "borderColor]___[value:var(--likec4-palette-stroke)]___[cond:&",
       "--likec4-outline-size]___[value:6px]___[cond:&",
       "borderRadius]___[value:10px]___[cond:& .likec4-shape-outline",
       "alignItems]___[value:flex-end",
+      "gap]___[value:1",
       "justifyItems]___[value:stretch",
       "bottom]___[value:0",
+      "left]___[value:0",
       "padding]___[value:1",
       "bottom]___[value:[5px]]___[cond:_shapeCylinder",
       "bottom]___[value:[5px]]___[cond:_shapeStorage",
@@ -251,19 +233,50 @@
       "height]___[value:[12px]]___[cond:_whenHovered",
       "borderRadius]___[value:sm]___[cond:_whenHovered",
       "transitionDelay]___[value:fastest]___[cond:_whenHovered",
+      "userSelect]___[value:none",
       "fontSize]___[value:lg",
       "paddingInline]___[value:1.5",
       "alignItems]___[value:baseline",
       "flexWrap]___[value:wrap",
       "translate]___[value:auto",
       "translateX]___[value:[-8px]",
+      "cursor]___[value:pointer]___[cond:& :where([data-likec4-ref-state=\"link\"])",
+      "outline]___[value:[2px solid var(--mantine-primary-color-filled)]]___[cond:& :where([data-likec4-ref-state=\"link\"])<___>_focusVisible",
+      "outlineOffset]___[value:[1px]]___[cond:& :where([data-likec4-ref-state=\"link\"])<___>_focusVisible",
+      "borderRadius]___[value:xs]___[cond:& :where([data-likec4-ref-state=\"link\"])<___>_focusVisible",
+      "opacity]___[value:0.6]___[cond:& :where([data-likec4-ref-state=\"missing\"])",
+      "textDecorationLine]___[value:underline]___[cond:& :where([data-likec4-ref-state=\"missing\"])",
+      "textDecorationStyle]___[value:dotted]___[cond:& :where([data-likec4-ref-state=\"missing\"])",
+      "textUnderlineOffset]___[value:2px]___[cond:& :where([data-likec4-ref-state=\"missing\"])",
+      "maxWidth]___[value:[320px]",
+      "paddingInline]___[value:3",
+      "paddingBlock]___[value:2",
+      "gap]___[value:2",
+      "flex]___[value:[0 0 20px]",
+      "boxSize]___[value:[20px]",
+      "marginTop]___[value:[1px]",
+      "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)",
+      "objectFit]___[value:contain]___[cond:& img",
+      "marginTop]___[value:1.5",
+      "lineClamp]___[value:4",
+      "marginBottom]___[value:0]___[cond:& :where(p:last-child)",
+      "offset]___[value:6",
+      "boxShadow]___[value:md",
+      "zIndex]___[value:var(--z-index-tooltip)",
+      "minWidth]___[value:0",
+      "cursor]___[value:default",
+      "textStyle]___[value:dimmed.xxs",
+      "marginTop]___[value:1",
+      "marginTop]___[value:xs",
       "borderBlockEndWidth]___[value:var(--thickness)",
       "border]___[value:subtle",
       "pointerEvents]___[value:none]___[cond:_whenPanning",
+      "top]___[value:0",
       "width]___[value:max-content",
-      "cursor]___[value:default",
       "wordBreak]___[value:break-word",
-      "minWidth]___[value:0",
       "gap]___[value:3",
       "padding]___[value:4",
       "paddingTop]___[value:2",
@@ -276,7 +289,6 @@
       "paddingBlock]___[value:2.5",
       "paddingInline]___[value:2",
       "backgroundColor]___[value:mantine.dark[5]/70]___[cond:_hover<___>_dark",
-      "gap]___[value:2",
       "offset]___[value:2",
       "position]___[value:top-start",
       "width]___[value:350",
@@ -297,6 +309,7 @@
       "textStyle]___[value:xxs",
       "whiteSpace]___[value:nowrap",
       "textOverflow]___[value:ellipsis",
+      "truncate]___[value:true",
       "paddingInline]___[value:1",
       "paddingBlock]___[value:0.5",
       "borderRadius]___[value:xs",
@@ -308,67 +321,78 @@
       "overflowWrap]___[value:anywhere",
       "top]___[value:24",
       "top]___[value:64",
+      "pointerEvents]___[value:none",
+      "position]___[value:right-start",
+      "stroke]___[value:1.7",
+      "textStyle]___[value:xs",
+      "layerStyle]___[value:likec4.panel",
+      "position]___[value:relative",
+      "paddingInline]___[value:0",
+      "paddingBlock]___[value:0",
+      "height]___[value:auto",
+      "maxHeight]___[value:[calc(100cqh - 180px)]",
+      "minWidth]___[value:[200px]]___[cond:@/md",
+      "maxWidth]___[value:[200px]",
+      "maxWidth]___[value:[250px]]___[cond:@/sm",
+      "maxWidth]___[value:[300px]]___[cond:@/md",
+      "paddingLeft]___[value:3",
+      "paddingRight]___[value:2",
+      "textStyle]___[value:sm",
+      "gap]___[value:0",
+      "overflow]___[value:scroll",
+      "marginBlock]___[value:3",
+      "flex]___[value:auto",
+      "textStyle]___[value:md",
+      "fontSize]___[value:xs",
+      "width]___[value:full",
+      "rowGap]___[value:2",
+      "paddingBottom]___[value:3",
+      "backgroundColor]___[value:surface.hover]___[cond:_hover",
+      "borderTop]___[value:none]___[cond:& + &",
+      "textStyle]___[value:fieldLabel",
+      "backgroundColor]___[value:surface.sunken",
+      "paddingBlock]___[value:1",
+      "borderTop]___[value:subtle",
+      "fontSize]___[value:[8px]",
+      "fontFamily]___[value:mono",
+      "color]___[value:likec4.diff.removed",
+      "backgroundColor]___[value:likec4.diff.removed/5",
+      "borderColor]___[value:likec4.diff.removed/40",
+      "backgroundColor]___[value:likec4.diff.removed/10]___[cond:_groupHover",
+      "color]___[value:likec4.diff.added",
+      "backgroundColor]___[value:likec4.diff.added/5",
+      "borderColor]___[value:likec4.diff.added/40",
+      "backgroundColor]___[value:likec4.diff.added/15]___[cond:_groupHover",
+      "color]___[value:likec4.diff.modified",
+      "backgroundColor]___[value:likec4.diff.modified/5",
+      "borderColor]___[value:likec4.diff.modified/40",
+      "backgroundColor]___[value:likec4.diff.modified/15]___[cond:_groupHover",
       "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]",
+      "transition]___[value:[transform 100ms ease-out]",
       "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",
-      "position]___[value:right-start",
-      "stroke]___[value:1.7",
-      "paddingBlock]___[value:1",
-      "paddingLeft]___[value:3",
-      "gap]___[value:4",
-      "height]___[value:auto",
-      "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:[160px]",
-      "maxWidth]___[value:[180px]]___[cond:@/sm",
-      "maxWidth]___[value:[250px]]___[cond:@/md",
-      "textStyle]___[value:md",
-      "color]___[value:likec4.compare.outline",
-      "paddingInline]___[value:3",
-      "paddingBlock]___[value:2",
-      "backgroundColor]___[value:likec4.compare.manual/10",
-      "borderWidth]___[value:default",
-      "borderStyle]___[value:solid",
-      "borderColor]___[value:likec4.compare.outline/20",
-      "backgroundColor]___[value:likec4.compare.manual/20]___[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",
       "crossAxis]___[value:-22",
       "padding]___[value:1.5",
       "marginTop]___[value:4",
-      "marginTop]___[value:xs",
-      "padding]___[value:0.5",
-      "width]___[value:[20px]",
-      "width]___[value:[64px]]___[cond:@/md",
-      "display]___[value:none]___[cond:@/md",
+      "maxWidth]___[value:[150px]",
+      "display]___[value:block]___[cond:@/md",
+      "flexShrink]___[value:1",
       "display]___[value:flex]___[cond:@/md",
       "layerStyle]___[value:likec4.panel.action.filled",
       "paddingInline]___[value:xxs",
+      "layerStyle]___[value:likec4.panel.action",
       "lineHeight]___[value:snug",
       "opacity]___[value:0.9",
       "display]___[value:flex]___[cond:@/xs",
@@ -377,10 +401,10 @@
       "color]___[value:primary.text]___[cond:_selected",
       "color]___[value:primary.text]___[cond:_selected<___>_hover",
       "fontWeight]___[value:normal",
-      "boxShadow]___[value:md",
+      "width]___[value:300",
       "mainAxis]___[value:3",
-      "maxWidth]___[value:[250px]",
       "marginInlineStart]___[value:1]___[cond:&:is([data-position=\"right\"])",
+      "marginBottom]___[value:4",
       "mainAxis]___[value:12",
       "marginBottom]___[value:10",
       "marginBlock]___[value:10",
@@ -419,6 +443,7 @@
       "borderColor]___[value:mantine.gray[5]",
       "transform]___[value:translate(-50%, -50%)",
       "borderWidth]___[value:strong",
+      "borderStyle]___[value:solid",
       "borderColor]___[value:likec4.walkthrough.parallelFrame",
       "borderWidth]___[value:extra]___[cond:md",
       "marginRight]___[value:sm",
@@ -442,8 +467,6 @@
       "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",
@@ -453,34 +476,49 @@
       "minWidth]___[value:[40px]",
       "fontWeight]___[value:semibold",
       "layerStyle]___[value:surface.warning",
+      "gap]___[value:4",
+      "marginTop]___[value:xxs",
+      "marginBottom]___[value:xs",
+      "marginLeft]___[value:sm",
       "stroke]___[value:3",
-      "boxSizing]___[value:border-box",
-      "inset]___[value:0",
-      "width]___[value:100vw",
-      "height]___[value:100vh",
-      "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",
+      "color]___[value:text",
       "border]___[value:none",
       "background]___[value:[ linear-gradient(180deg, color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent), color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px, color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px), {colors.likec4.overlay.body} ]",
       "display]___[value:none]___[cond:& .react-flow__attribution",
+      "flex]___[value:[0]",
       "cursor]___[value:move",
-      "fontFamily]___[value:likec4.element",
-      "fontOpticalSizing]___[value:auto",
-      "fontStyle]___[value:normal",
-      "fontSize]___[value:[24px]",
-      "lineClamp]___[value:2",
       "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)",
-      "objectFit]___[value:contain]___[cond:& img",
+      "paddingLeft]___[value:0!]___[cond:& > .mantine-ScrollArea-viewport",
+      "borderRadius]___[value:md",
+      "padding]___[value:3!]___[cond:& > .mantine-ScrollArea-viewport",
+      "gap]___[value:6",
+      "marginBottom]___[value:2",
+      "fontSize]___[value:md",
+      "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",
+      "borderColor]___[value:mantine.dark[1]]___[cond:_hover",
+      "fontFamily]___[value:likec4.element",
+      "fontOpticalSizing]___[value:auto",
+      "fontStyle]___[value:normal",
+      "fontSize]___[value:h2",
+      "lineClamp]___[value:2",
+      "color]___[value:[var(--view-title-color, {colors.mantine.gray[7]})]",
+      "fontSize]___[value:[15px]",
+      "lineHeight]___[value:[1.4]",
+      "lineClamp]___[value:1",
+      "columnGap]___[value:lg",
+      "rowGap]___[value:xs",
+      "marginTop]___[value:[-8px]",
+      "paddingTop]___[value:xs",
       "padding]___[value:[10px 8px]",
       "borderStyle]___[value:dashed",
       "--view-title-color]___[value:{colors.mantine.dark[1]}",
@@ -494,10 +532,7 @@
       "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
       "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]",
-      "background]___[value:mantine.gray[1]",
+      "background]___[value:surface.sunken",
       "padding]___[value:[6px 8px]",
       "color]___[value:mantine.gray[7]",
       "transitionTimingFunction]___[value:out]___[cond:_hover",
@@ -518,61 +553,67 @@
       "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]",
-      "gap]___[value:[24px 20px]",
-      "justifySelf]___[value:end",
-      "textAlign]___[value:right",
-      "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",
-      "borderColor]___[value:mantine.dark[1]]___[cond:_hover",
+      "fontFamily]___[value:body",
+      "paddingTop]___[value:0.5",
+      "paddingBottom]___[value:1.5",
+      "marginLeft]___[value:-1]___[cond:& + &",
+      "paddingLeft]___[value:0]___[cond:& + &",
+      "color]___[value:text.bright]___[cond:&[data-hovered=\"true\"]",
+      "backgroundColor]___[value:surface.sunken]___[cond:&[data-hovered=\"true\"]",
+      "fontFamily]___[value:[inherit]",
+      "background]___[value:none",
       "alignItems]___[value:start",
       "justifyContent]___[value:space-between",
-      "marginBottom]___[value:sm",
-      "lineClamp]___[value:1",
+      "textStyle]___[value:dimmed.sm",
+      "layerStyle]___[value:surface.sunken",
       "stroke]___[value:1.6",
-      "paddingTop]___[value:xs",
-      "gap]___[value:6",
-      "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",
-      "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]",
-      "backgroundColor]___[value:mantine.dark[9]]___[cond:_dark",
-      "justifyContent]___[value:flex-end",
-      "transitionProperty]___[value:common",
-      "transition]___[value:medium",
-      "color]___[value:primary.body]___[cond:_hover",
-      "backgroundColor]___[value:mantine.dark[7]]___[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",
-      "fontWeight]___[value:[700]",
-      "justifySelf]___[value:stretch",
-      "alignSelf]___[value:start",
+      "alignSelf]___[value:center",
+      "marginLeft]___[value:1",
+      "opacity]___[value:0",
+      "opacity]___[value:1]___[cond:&[data-copied=\"true\"]",
+      "color]___[value:[var(--mantine-color-teal-text)]]___[cond:&[data-copied=\"true\"]",
+      "paddingLeft]___[value:4",
+      "marginBlock]___[value:2",
+      "content]___[value:\"\"]___[cond:_before",
+      "position]___[value:absolute]___[cond:_before",
+      "left]___[value:1]___[cond:_before",
+      "top]___[value:0]___[cond:_before",
+      "width]___[value:[2px]]___[cond:_before",
+      "height]___[value:100%]___[cond:_before",
+      "backgroundColor]___[value:border.focus]___[cond:_before",
+      "paddingLeft]___[value:1",
+      "gap]___[value:2.5",
+      "columnGap]___[value:2",
+      "rowGap]___[value:1",
+      "maxWidth]___[value:[160px]",
+      "color]___[value:text/55",
+      "color]___[value:text.link]___[cond:_hover",
+      "maxWidth]___[value:100%",
+      "fontSize]___[value:[inherit]",
+      "fontWeight]___[value:[inherit]",
+      "lineHeight]___[value:[inherit]",
+      "color]___[value:[var(--badge-color)]",
+      "minHeight]___[value:0",
+      "width]___[value:[16px]",
+      "bottom]___[value:0]___[cond:_before",
+      "left]___[value:[7.5px]]___[cond:_before",
+      "width]___[value:[1px]]___[cond:_before",
+      "backgroundColor]___[value:transparent]___[cond:_before",
+      "transition]___[value:fast]___[cond:_before",
+      "backgroundColor]___[value:border.default]___[cond:&:is([data-separator=\"hover\"], :focus-visible)<___>_before",
+      "left]___[value:[7px]]___[cond:&[data-separator=\"active\"]<___>_before",
+      "width]___[value:[2px]]___[cond:&[data-separator=\"active\"]<___>_before",
+      "backgroundColor]___[value:primary.border]___[cond:&[data-separator=\"active\"]<___>_before",
+      "top]___[value:1",
+      "height]___[value:icon.xl",
+      "transitionDelay]___[value:fast]___[cond::where([data-separator=\"active\"]) &",
+      "visibility]___[value:hidden]___[cond::where([data-separator=\"active\"]) &",
+      "left]___[value:[50%]]___[cond:_expanded",
+      "width]___[value:icon.xl]___[cond:_expanded",
+      "transform]___[value:translateX(-50%)]___[cond:_expanded",
+      "right]___[value:0]___[cond:&:is([aria-expanded=\"false\"])",
+      "gap]___[value:1]___[cond:&:is([aria-expanded=\"false\"])",
+      "paddingInline]___[value:1]___[cond:&:is([aria-expanded=\"false\"])",
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
       "marginBottom]___[value:0",
       "transition]___[value:fast]___[cond:& > *",
@@ -599,10 +640,7 @@
       "borderColor]___[value:mantine.orange[5]/20]___[cond:&[data-missing]",
       "color]___[value:mantine.orange[8]]___[cond:&[data-missing]<___>_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",
       "left]___[value:2]___[cond:_before",
       "fontSize]___[value:xxs]___[cond:_before",
       "fontWeight]___[value:medium]___[cond:_before",
@@ -617,24 +655,22 @@
       "color]___[value:text.dimmed]___[cond:&[data-zero]",
       "background]___[value:mantine.orange[8]/20]___[cond:&[data-missing]",
       "gap]___[value:8",
-      "marginBottom]___[value:4",
       "top]___[value:12",
       "right]___[value:12",
       "boxShadow]___[value:none",
       "paddingInline]___[value:md",
       "paddingBlock]___[value:xs",
       "marginTop]___[value:sm",
+      "marginBottom]___[value:sm",
       "borderStyle]___[value:solid]___[cond:_hover",
       "color]___[value:text.default]___[cond:_hover",
       "position]___[value:top-right",
       "position]___[value:top-left",
-      "marginLeft]___[value:sm",
       "padding]___[value:[6px 2px 0 2px]",
       "color]___[value:text/90]___[cond:& .mantine-Text-root",
       "fontSize]___[value:xs]___[cond:& .mantine-Text-root",
       "fontWeight]___[value:medium]___[cond:& .mantine-Text-root",
       "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
-      "paddingLeft]___[value:1",
       "gridColumn]___[value:1",
       "gridColumn]___[value:2",
       "gridColumn]___[value:3",
@@ -656,21 +692,20 @@
       "cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
       "backgroundColor]___[value:surface.hover]___[cond:&:is(:hover, [data-selected=true]) > *",
       "gridTemplateColumns]___[value:1fr 30px 1fr",
-      "gap]___[value:0",
+      "gridAutoRows]___[value:[min-content max-content]",
+      "gridTemplateColumns]___[value:min-content 1fr",
       "gap]___[value:[10px 12px]",
       "justifyItems]___[value:start",
       "maxHeight]___[value:[70vh]",
       "maxHeight]___[value:[calc(100cqh - 70px)]]___[cond:xs",
+      "padding]___[value:xs",
       "color]___[value: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]",
-      "borderRadius]___[value:md",
-      "marginBottom]___[value:2",
       "containerName]___[value:likec4-tree",
       "containerType]___[value:inline-size",
       "outline]___[value:none !important",
@@ -700,7 +735,7 @@
       "crossAxis]___[value:50",
       "srOnly]___[value:true",
       "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
-      "marginTop]___[value:1",
+      "lineHeight]___[value:md",
       "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
       "background]___[value:likec4.accent.8",
       "borderColor]___[value:likec4.accent.9",
@@ -740,10 +775,12 @@
       "color]___[value:white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
       "color]___[value:likec4.accent.0]___[cond:_groupHover<___>_light",
       "opacity]___[value:[0.85]]___[cond::where([data-disabled]) &",
+      "border]___[value:transparent",
       "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",
+      "inset]___[value:0",
       "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
       "zIndex]___[value:[902]",
       "backdropBlur]___[value:10px",
@@ -759,34 +796,10 @@
       "strokeWidth]___[value:[8px]",
       "strokeWidth]___[value:[12px]]___[cond:_whenHovered",
       "strokeOpacity]___[value:0.5",
-      "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]",
       "cursor]___[value:grab!",
       "cursor]___[value:grabbing!]___[cond:_active",
-      "fill]___[value:[var(--xy-edge-stroke)]",
-      "stroke]___[value:transparent",
-      "fillOpacity]___[value:0.5",
-      "strokeWidth]___[value:[10]",
-      "r]___[value:[4]",
-      "cursor]___[value:grab",
-      "visibility]___[value:hidden",
-      "transitionDuration]___[value:fast",
-      "transitionProperty]___[value:[visibility, fill, fill-opacity, r]",
-      "transitionTimingFunction]___[value:inOut",
-      "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: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",
+      "cursor]___[value:[copy]]___[cond:& .react-flow__edge-interaction",
+      "cursor]___[value:inherit]___[cond:& .react-flow__edge-interaction",
       "width]___[value:[100%]",
       "height]___[value:[100%]",
       "borderRadius]___[value:[50%]",
@@ -795,7 +808,6 @@
       "left]___[value:[calc(100% + 6px)]",
       "top]___[value:[50%]",
       "translateY]___[value:-1/2",
-      "color]___[value:[var(--likec4-palette-hiContrast)]",
       "opacity]___[value:[0.7]",
       "outlineColor]___[value:likec4.compare.outline]___[cond:& + .likec4-element-shape",
       "outlineWidth]___[value:[4px]]___[cond:& + .likec4-element-shape",
@@ -810,13 +822,12 @@
       "paddingRight]___[value:xxs",
       "zIndex]___[value:[200]",
       "cursor]___[value:zoom-out",
-      "top]___[value:1",
       "translateX]___[value:-1/2",
       "--_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",
+      "paddingLeft]___[value:2",
       "letterSpacing]___[value:[0.75px]",
       "color]___[value:[var(--_color)/75]",
       "color]___[value:colorPalette.text",
@@ -843,8 +854,6 @@
       "borderBottomWidth]___[value:1]___[cond:&:not([data-is-last=\"true\"])",
       "background]___[value:colorPalette.header]___[cond:&[data-state=\"collapsed\"]",
       "paddingLeft]___[value:4.5",
-      "paddingRight]___[value:2",
-      "marginBlock]___[value:2",
       "marginInlineStart]___[value:2",
       "width]___[value:min-content",
       "content]___[value:\" \"]___[cond:_before",
@@ -865,10 +874,10 @@
       "colorPalette]___[value:subflow.break",
       "colorPalette]___[value:subflow.alt",
       "colorPalette]___[value:subflow.try",
-      "outlineColor]___[value:likec4.compare.outline",
-      "outlineWidth]___[value:extra",
-      "outlineStyle]___[value:dashed",
-      "outlineOffset]___[value:1.5",
+      "outlineColor]___[value:likec4.compare.outline]___[cond:&:has(.likec4-node-drifts)",
+      "outlineWidth]___[value:extra]___[cond:&:has(.likec4-node-drifts)",
+      "outlineStyle]___[value:dashed]___[cond:&:has(.likec4-node-drifts)",
+      "outlineOffset]___[value:1.5]___[cond:&:has(.likec4-node-drifts)",
       "right]___[value:0",
       "padding]___[value:2",
       "height]___[value:min-content",
@@ -884,6 +893,7 @@
       "fill]___[value:var(--likec4-palette-fill)",
       "stroke]___[value:var(--likec4-palette-stroke)",
       "strokeWidth]___[value:[1px]",
+      "overflow]___[value:visible",
       "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",
@@ -901,11 +911,11 @@
       "flex]___[value:0 0 70px",
       "opacity]___[value:0.25",
       "marginLeft]___[value:2",
+      "boxShadow]___[value:lg",
       "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",
@@ -913,7 +923,6 @@
       "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",
@@ -922,14 +931,11 @@
       "flex]___[value:none",
       "marginBottom]___[value:0.5",
       "paddingBottom]___[value:1",
-      "minHeight]___[value:0",
+      "textStyle]___[value:dimmed.xs",
       "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",
@@ -953,14 +959,12 @@
       "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]",
@@ -968,7 +972,6 @@
       "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))]",
@@ -976,7 +979,6 @@
       "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}]",
@@ -1068,6 +1070,7 @@
         "shapetype]___[value:svg]___[recipe:elementShapeRecipe"
       ],
       "likec4tag": [],
+      "edgeControlPoints": [],
       "nodeNotes": [
         "opened]___[value:false]___[recipe:nodeNotes"
       ]