@likec4/diagram 1.47.0 → 1.49.0

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.7.2",
+  "schemaVersion": "1.8.1",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -12,10 +12,36 @@
       "right]___[value:4",
       "zIndex]___[value:999",
       "color]___[value:gray",
+      "position]___[value:fixed",
+      "top]___[value:0",
+      "left]___[value:0",
+      "gap]___[value:1",
+      "bottom]___[value:0",
+      "height]___[value:auto",
+      "overflow]___[value:hidden",
+      "layerStyle]___[value:likec4.panel",
+      "width]___[value:[300px]",
+      "borderRadius]___[value:0",
+      "display]___[value:flex",
+      "alignItems]___[value:stretch",
+      "gap]___[value:sm",
+      "flexDirection]___[value:column",
+      "alignItems]___[value:center",
+      "gap]___[value:4",
+      "flexDirection]___[value:row",
+      "padding]___[value:2",
+      "justifyItems]___[value:stretch",
+      "userSelect]___[value:all",
+      "cursor]___[value:default",
+      "textStyle]___[value:sm",
+      "fontWeight]___[value:medium",
+      "flex]___[value:1",
+      "flex]___[value:1 1 100%",
+      "padding]___[value:4",
+      "textAlign]___[value:center",
       "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))]",
@@ -30,20 +56,13 @@
       "cursor]___[value:zoom-out]___[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",
       "gap]___[value:lg",
-      "flexDirection]___[value:row",
       "padding]___[value:xl",
       "flexWrap]___[value:nowrap",
-      "alignItems]___[value:center",
       "gap]___[value:md",
       "marginTop]___[value:md",
       "color]___[value:red",
-      "alignItems]___[value:stretch",
-      "gap]___[value:sm",
-      "flexDirection]___[value:column",
-      "flex]___[value:1",
       "color]___[value:teal",
       "opacity]___[value:1",
       "opacity]___[value:0.45",
@@ -51,12 +70,11 @@
       "opacity]___[value:1]___[cond:_hover",
       "minHeight]___[value:24",
       "maxWidth]___[value:500",
-      "userSelect]___[value:all",
       "paddingRight]___[value:0",
       "backgroundColor]___[value:transparent",
       "backgroundColor]___[value:mantine.colors.gray[1]]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.dark[5]]___[cond:_hover<___>_dark",
-      "color]___[value:mantine.colors.dimmed]___[cond:&:is([data-position=\"left\"])",
+      "color]___[value:text.dimmed]___[cond:&:is([data-position=\"left\"])",
       "userSelect]___[value:none]___[cond:&:is([data-position=\"left\"])",
       "pointerEvents]___[value:none]___[cond:&:is([data-position=\"left\"])",
       "color]___[value:[var(--badge-color)]]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
@@ -69,36 +87,31 @@
       "width]___[value:12",
       "fill]___[value:[#FCFBF7]",
       "fill]___[value:[#222221]]___[cond:_light",
-      "display]___[value:none",
-      "display]___[value:block]___[cond:@/md",
-      "display]___[value:block",
-      "display]___[value:none]___[cond:@/md",
       "height]___[value:30px",
       "paddingLeft]___[value:sm",
       "paddingRight]___[value:1",
       "border]___[value:1px solid",
-      "borderColor]___[value:mantine.colors.defaultBorder",
+      "borderColor]___[value:default.border",
       "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
       "borderColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
-      "borderColor]___[value:mantine.colors.defaultBorder]___[cond:_hover",
-      "background]___[value:mantine.colors.default",
-      "background]___[value:mantine.colors.white]___[cond:_light",
+      "borderColor]___[value:default.border]___[cond:_hover",
+      "background]___[value:default",
+      "background]___[value:white]___[cond:_light",
       "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
-      "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
+      "background]___[value:default.hover]___[cond:_hover",
       "width]___[value:100%",
-      "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
+      "color]___[value:text]___[cond:& .tabler-icon",
       "transition]___[value:none !important]___[cond:_whenPanning",
       "boxShadow]___[value:xs",
       "boxShadow]___[value:sm]___[cond:_hover",
       "boxShadow]___[value:none !important]___[cond:_whenPanning",
       "fontSize]___[value:sm",
-      "fontWeight]___[value:500",
       "paddingRight]___[value:2.5",
-      "color]___[value:mantine.colors.placeholder",
+      "color]___[value:text.placeholder",
       "paddingRight]___[value:[30px]]___[cond:sm",
       "paddingRight]___[value:[50px]]___[cond:md",
       "fontSize]___[value:11px",
-      "fontWeight]___[value:600",
+      "fontWeight]___[value:bold",
       "lineHeight]___[value:1",
       "padding]___[value:[4px 7px]",
       "color]___[value:mantine.colors.gray[7]]___[cond:_light",
@@ -112,8 +125,6 @@
       "gap]___[value:xs",
       "stroke]___[value:2",
       "pointerEvents]___[value:none",
-      "top]___[value:0",
-      "left]___[value:0",
       "gap]___[value:xxs",
       "maxWidth]___[value:calc(100vw)",
       "maxWidth]___[value:calc(100cqw)]___[cond:xs",
@@ -125,15 +136,14 @@
       "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:200px",
-      "gap]___[value:1",
+      "display]___[value:none",
+      "display]___[value:block]___[cond:@/md",
       "flexShrink]___[value:1",
       "flexGrow]___[value:1",
-      "overflow]___[value:hidden",
       "gap]___[value:0.5",
       "flexGrow]___[value:0",
       "display]___[value:none]___[cond:_empty",
@@ -151,7 +161,7 @@
       "backgroundColor]___[value:mantine.colors.yellow[5]/80]___[cond:& > mark<___>_dark",
       "backgroundColor]___[value:[transparent]]___[cond:& > mark<___>_groupFocus",
       "color]___[value:[inherit!]]___[cond:& > mark<___>_groupFocus",
-      "color]___[value:mantine.colors.dimmed]___[cond:_groupHover",
+      "color]___[value:text.dimmed]___[cond:_groupHover",
       "opacity]___[value:0.3",
       "opacity]___[value:0.5]___[cond:_groupHover",
       "opacity]___[value:0.5]___[cond:_groupActive",
@@ -168,7 +178,7 @@
       "backgroundColor]___[value:mantine.colors.dark[4]]___[cond:_hover<___>_dark",
       "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_focus",
       "backgroundColor]___[value:mantine.colors.dark[4]]___[cond:_focus<___>_dark",
-      "color]___[value:mantine.colors.dimmed]___[cond:_placeholder",
+      "color]___[value:text.dimmed]___[cond:_placeholder",
       "outline]___[value:none]___[cond:_focus",
       "paddingInline]___[value:xs",
       "paddingBlock]___[value:xxs",
@@ -199,7 +209,6 @@
       "paddingLeft]___[value:md",
       "paddingRight]___[value:md",
       "paddingBottom]___[value:sm",
-      "background]___[value:[transparent]",
       "height]___[value:100cqh]___[cond:xs",
       "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
       "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
@@ -212,19 +221,93 @@
       "gap]___[value:8px",
       "order]___[value:6",
       "paddingRight]___[value:xs",
+      "border]___[value:none",
+      "display]___[value:inline-flex",
+      "justifyContent]___[value:center",
+      "justifySelf]___[value:flex-end",
+      "fontSize]___[value:[8px]",
+      "fontFamily]___[value:mono",
+      "letterSpacing]___[value:[0.5px]",
+      "marginLeft]___[value:2",
+      "paddingBlock]___[value:1",
+      "paddingInline]___[value:1.5",
+      "minWidth]___[value:32",
+      "transition]___[value:normal",
+      "color]___[value:text.bright]___[cond:_hover",
+      "backgroundColor]___[value:grass.6",
+      "color]___[value:text",
+      "backgroundColor]___[value:red.6",
+      "color]___[value:text.dimmed",
+      "backgroundColor]___[value:default.hover/50",
+      "flex]___[value:0",
+      "color]___[value:text]___[cond:_groupHover",
+      "color]___[value:mantine.colors.primary.lightColor!]___[cond:_groupFocusWithin",
+      "color]___[value:mantine.colors.primary.lightColor!]___[cond:_groupFocusVisible",
+      "display]___[value:contents]___[cond:& :where(.likec4-shape-icon, .likec4-element-icon)",
+      "width]___[value:10px]___[cond:& :where(svg, img)",
+      "height]___[value:10px]___[cond:& :where(svg, img)",
+      "width]___[value:14px]___[cond:@/md<___>& :where(svg, img)",
+      "height]___[value:14px]___[cond:@/md<___>& :where(svg, img)",
+      "width]___[value:16px]___[cond:@/lg<___>& :where(svg, img)",
+      "height]___[value:16px]___[cond:@/lg<___>& :where(svg, img)",
+      "opacity]___[value:0.8",
+      "opacity]___[value:1]___[cond:_groupFocusVisible",
+      "opacity]___[value:1]___[cond:_groupHover",
+      "paddingLeft]___[value:[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.1})]",
+      "paddingInline]___[value:1",
+      "marginBottom]___[value:0",
+      "columnGap]___[value:1",
+      "paddingLeft]___[value:[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.2})]]___[cond:@/md",
+      "paddingInline]___[value:2]___[cond:@/md",
+      "paddingBlock]___[value:1.5]___[cond:@/md",
+      "marginBottom]___[value:0.5]___[cond:@/md",
+      "columnGap]___[value:2]___[cond:@/md",
+      "paddingLeft]___[value:[calc((var(--depth, 1) - 1) * {spacing.3} + {spacing.2.5})]]___[cond:@/lg",
+      "paddingBlock]___[value:2.5]___[cond:@/lg",
+      "appearance]___[value:none",
+      "width]___[value:full",
+      "gridTemplateColumns]___[value:auto 1fr auto",
+      "gridTemplateRows]___[value:auto auto",
+      "backgroundColor]___[value:mantine.colors.primary.lightHover!]___[cond:_focusWithin",
+      "backgroundColor]___[value:mantine.colors.primary.lightHover!]___[cond:_focusVisible",
+      "color]___[value:mantine.colors.primary.lightColor!]___[cond:_focusWithin",
+      "color]___[value:mantine.colors.primary.lightColor!]___[cond:_focusVisible",
+      "outline]___[value:none]___[cond:_focusVisible",
+      "--chip-fz]___[value:9px",
+      "--chip-checked-padding]___[value:{spacing.1}",
+      "--chip-padding]___[value:{spacing.1}",
+      "--chip-spacing]___[value:0",
+      "--chip-size]___[value:16px",
+      "transition]___[value:opacity 150ms ease-out",
+      "cursor]___[value:inherit",
+      "color]___[value:inherit",
+      "textStyle]___[value:xxs",
+      "truncate]___[value:ellipsis",
+      "textStyle]___[value:xs]___[cond:@/sm",
+      "textStyle]___[value:sm]___[cond:@/md",
+      "fontWeight]___[value:[450]",
+      "gap]___[value:2",
+      "transition]___[value:transform 150ms ease-out",
+      "width]___[value:12px",
+      "opacity]___[value:0.75",
+      "width]___[value:14px]___[cond:@/md",
+      "transform]___[value:rotate(90deg)]___[cond:_open",
+      "padding]___[value:1",
+      "marginTop]___[value:0",
+      "fontSize]___[value:md",
+      "fontWeight]___[value:normal",
+      "paddingInline]___[value:2",
+      "colorPalette]___[value:teal",
+      "border]___[value:default",
+      "textStyle]___[value:md",
+      "fontSize]___[value:xs",
+      "color]___[value:colorPalette.9",
       "stroke]___[value:1.8",
-      "truncate]___[value:end",
       "transitionDuration]___[value:normal",
       "transitionDelay]___[value:0.2s",
       "transitionDelay]___[value:0s]___[cond:_hover",
       "lineClamp]___[value:5",
       "fill]___[value:none",
-      "justifyContent]___[value:center",
-      "zIndex]___[value:1",
-      "display]___[value:none]___[cond:_smallZoom",
-      "gap]___[value:1.5",
-      "lineClamp]___[value:2",
-      "lineClamp]___[value:3",
       "top]___[value:0.5",
       "right]___[value:0.5",
       "right]___[value:[5px]]___[cond:_shapeBrowser",
@@ -232,28 +315,24 @@
       "top]___[value:[14px]]___[cond:_shapeStorage",
       "top]___[value:[1px]]___[cond:_shapeQueue",
       "right]___[value:3]___[cond:_shapeQueue",
+      "display]___[value:none]___[cond:_smallZoom",
       "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",
-      "justifyItems]___[value:stretch",
-      "bottom]___[value:0",
-      "padding]___[value:1",
       "bottom]___[value:[5px]]___[cond:_shapeCylinder",
       "bottom]___[value:[5px]]___[cond:_shapeStorage",
       "bottom]___[value:0]___[cond:_shapeQueue",
       "paddingLeft]___[value:[14px]]___[cond:_shapeQueue",
       "layerStyle]___[value:likec4.tag",
-      "maxWidth]___[value:50",
-      "height]___[value:5",
-      "height]___[value:12]___[cond:_whenHovered",
-      "borderRadius]___[value:4]___[cond:_whenHovered",
+      "maxWidth]___[value:50px",
+      "height]___[value:5px",
+      "height]___[value:12px]___[cond:_whenHovered",
+      "borderRadius]___[value:sm]___[cond:_whenHovered",
       "transitionDelay]___[value:.08s]___[cond:_whenHovered",
       "fontSize]___[value:lg",
-      "borderRadius]___[value:[4px]",
-      "paddingInline]___[value:1.5",
       "alignItems]___[value:baseline",
       "flexWrap]___[value:wrap",
       "translate]___[value:auto",
@@ -261,21 +340,18 @@
       "borderBlockEndWidth]___[value:var(--thickness)",
       "pointerEvents]___[value:none]___[cond:_whenPanning",
       "width]___[value:max-content",
-      "cursor]___[value:default",
       "gap]___[value:3",
-      "padding]___[value:4",
       "paddingTop]___[value:2",
       "marginTop]___[value:2",
-      "marginTop]___[value:0",
       "color]___[value:orange",
+      "textStyle]___[value:xs",
+      "marginTop]___[value:1",
       "--bleed-x]___[value:token(spacing.2, 2)",
       "--bleed-y]___[value:token(spacing.2, 2)",
       "marginInline]___[value:calc(var(--bleed-x, 0) * -1)",
       "marginBlock]___[value:calc(var(--bleed-y, 0) * -1)",
       "paddingBlock]___[value:2.5",
-      "paddingInline]___[value:2",
       "backgroundColor]___[value:mantine.colors.dark[5]/70]___[cond:_hover<___>_dark",
-      "gap]___[value:2",
       "offset]___[value:2",
       "position]___[value:top-start",
       "width]___[value:350",
@@ -283,31 +359,25 @@
       "offset]___[value:10",
       "background]___[value:white",
       "opacity]___[value:0.65",
-      "display]___[value:inline-flex",
       "paddingLeft]___[value:2.5",
       "paddingBlock]___[value:1.5",
       "borderLeft]___[value:2px dotted",
       "borderLeftColor]___[value:mantine.colors.gray[3]",
       "borderLeftColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
       "opacity]___[value:0.5",
+      "display]___[value:block",
       "fontSize]___[value:xxs",
       "lineHeight]___[value:sm",
-      "color]___[value:mantine.colors.dimmed",
       "whiteSpace]___[value:nowrap",
-      "paddingInline]___[value:1",
       "paddingBlock]___[value:0.5",
-      "borderRadius]___[value:[2px]",
+      "borderRadius]___[value:xs",
       "background]___[value:var(--likec4-palette-fill)/90]___[cond:_light",
       "background]___[value:var(--likec4-palette-fill)/60]___[cond:_dark",
       "color]___[value:var(--likec4-palette-hiContrast)]___[cond:_light",
       "color]___[value:var(--likec4-palette-loContrast)]___[cond:_dark",
       "whiteSpaceCollapse]___[value:preserve-breaks",
-      "width]___[value:full",
       "height]___[value:full",
-      "border]___[value:default",
       "borderWidth]___[value:4",
-      "fontSize]___[value:xs",
-      "fontWeight]___[value:medium",
       "borderBottomLeftRadius]___[value:sm",
       "borderBottomRightRadius]___[value:sm",
       "transform]___[value:translateY(-4px)",
@@ -315,20 +385,34 @@
       "color]___[value:mantine.colors.gray[9]",
       "transform]___[value:translateY(-3px)]___[cond:_active",
       "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",
+      "maxHeight]___[value:calc(100cqh - 180px)",
+      "minWidth]___[value:200px]___[cond:@/md",
+      "marginBottom]___[value:xs",
       "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",
+      "color]___[value:likec4.compare.manual.outline",
+      "paddingInline]___[value:3",
+      "paddingBlock]___[value:2",
+      "backgroundColor]___[value:likec4.compare.manual/10",
+      "border]___[value:1px solid {colors.likec4.compare.manual.outline/20}",
+      "backgroundColor]___[value:likec4.compare.manual/20]___[cond:_hover",
+      "borderColor]___[value:likec4.compare.manual.outline/25]___[cond:_hover",
+      "textStyle]___[value:dimmed.xs",
+      "paddingLeft]___[value:2",
+      "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",
@@ -352,14 +436,13 @@
       "padding]___[value:0.5",
       "width]___[value:[20px]",
       "width]___[value:[64px]]___[cond:@/md",
+      "display]___[value:none]___[cond:@/md",
       "layerStyle]___[value:likec4.panel.action.filled",
       "paddingInline]___[value:xxs",
       "backgroundColor]___[value:none",
       "backgroundColor]___[value:likec4.panel.action.bg.hover]___[cond:_notDisabled<___>_hover",
-      "fontWeight]___[value:400",
       "boxShadow]___[value:md",
       "mainAxis]___[value:2",
-      "height]___[value:auto",
       "lineHeight]___[value:1.1",
       "color]___[value:mantine.colors.gray[9]]___[cond:_light",
       "marginInlineStart]___[value:1]___[cond:&:is([data-position=\"right\"])",
@@ -386,21 +469,20 @@
       "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
       "boxShadow]___[value:none]___[cond:_whenPanning",
       "flex]___[value:1 1 40%",
-      "textAlign]___[value:center",
       "padding]___[value:[4px 6px]",
+      "zIndex]___[value:1",
       "background]___[value:mantine.colors.gray[2]",
       "borderColor]___[value:mantine.colors.gray[4]",
       "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
       "background]___[value:mantine.colors.gray[3]",
       "boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
       "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
-      "width]___[value:8",
-      "height]___[value:8",
+      "width]___[value:8px",
+      "height]___[value:8px",
       "border]___[value:2px solid",
       "borderColor]___[value:mantine.colors.gray[5]",
-      "borderRadius]___[value:3",
       "transform]___[value:translate(-50%, -50%)",
-      "borderColor]___[value:mantine.colors.orange[6]",
+      "borderColor]___[value:likec4.walkthrough.parallelFrame",
       "borderWidth]___[value:4]___[cond:md",
       "marginRight]___[value:sm",
       "flexShrink]___[value:0",
@@ -428,11 +510,8 @@
       "backdropFilter]___[value:auto]___[cond:_backdrop",
       "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
       "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
-      "color]___[value:mantine.colors.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",
@@ -450,19 +529,19 @@
       "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",
-      "background]___[value:mantine.colors.body",
+      "background]___[value:body",
       "padding]___[value:[10px 8px]",
       "border]___[value:1px dashed",
       "--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
       "--icon-color]___[value:{colors.mantine.colors.dark[1]}]___[cond:_hover",
-      "--view-title-color]___[value:{colors.mantine.colors.defaultColor}]___[cond:_hover",
+      "--view-title-color]___[value:{colors.default.color}]___[cond:_hover",
       "--icon-color]___[value:{colors.mantine.colors.gray[6]}]___[cond:_light",
       "--view-title-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light",
       "--icon-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light<___>_hover",
       "transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
       "color]___[value:[var(--icon-color, {colors.mantine.colors.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
       "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
-      "color]___[value:mantine.colors.defaultColor]___[cond:& .mantine-ThemeIcon-root<___>_hover",
+      "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 > *",
@@ -470,19 +549,20 @@
       "fontSize]___[value:15px",
       "lineHeight]___[value:1.4",
       "background]___[value:mantine.colors.gray[1]",
+      "gap]___[value:1.5",
       "padding]___[value:[6px 8px]",
       "color]___[value:mantine.colors.gray[7]",
       "transitionTimingFunction]___[value:out]___[cond:_hover",
-      "color]___[value:mantine.colors.defaultColor]___[cond:_hover",
+      "color]___[value:default.color]___[cond:_hover",
       "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
       "transition]___[value:none]___[cond:&[data-active]",
-      "background]___[value:mantine.colors.white]___[cond:&[data-active]",
+      "background]___[value:white]___[cond:&[data-active]",
       "boxShadow]___[value:xs]___[cond:&[data-active]",
-      "color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
+      "color]___[value:default.color]___[cond:&[data-active]",
       "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
-      "color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
+      "color]___[value:white]___[cond:_dark<___>_hover",
       "background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
-      "color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
+      "color]___[value:white]___[cond:_dark<___>&:is([data-active])",
       "background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
       "paddingLeft]___[value:1]___[cond:&:not(:has(.mantine-ScrollArea-root))",
       "paddingRight]___[value:1]___[cond:&:not(:has(.mantine-ScrollArea-root))",
@@ -501,7 +581,6 @@
       "borderColor]___[value:mantine.colors.dark[3]",
       "borderTop]___[value:none",
       "borderLeft]___[value:none",
-      "borderRadius]___[value:2px",
       "bottom]___[value:0.5",
       "cursor]___[value:se-resize",
       "borderWidth]___[value:4px]___[cond:_hover",
@@ -510,13 +589,12 @@
       "justifyContent]___[value:space-between",
       "marginBottom]___[value:sm",
       "lineClamp]___[value:1",
-      "gap]___[value:4",
-      "marginTop]___[value:6",
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
       "gap]___[value:6",
       "gridAutoRows]___[value:min-content",
       "gap]___[value:[12px 16px]",
+      "marginTop]___[value:6",
       "width]___[value:300",
       "whiteSpace]___[value:pre-wrap",
       "textOverflow]___[value:unset",
@@ -527,13 +605,12 @@
       "minWidth]___[value:0",
       "minHeight]___[value:32px",
       "padding]___[value:[4px 8px]",
-      "backgroundColor]___[value:mantine.colors.white",
+      "backgroundColor]___[value:white",
       "borderColor]___[value:mantine.colors.gray[3]",
       "maxWidth]___[value:min(200px, 100%)",
       "minWidth]___[value:60px",
       "flex]___[value:0 1 auto",
       "backgroundColor]___[value:mantine.colors.dark[9]]___[cond:_dark",
-      "color]___[value:mantine.colors.text]___[cond:_dark",
       "justifyContent]___[value:flex-end",
       "transition]___[value:all 150ms ease",
       "color]___[value:mantine.colors.primary[6]]___[cond:_hover",
@@ -541,14 +618,12 @@
       "color]___[value:mantine.colors.primary[4]]___[cond:_hover<___>_dark",
       "color]___[value:mantine.colors.gray[6]",
       "padding]___[value:[1px 4px]",
-      "borderRadius]___[value:xs",
       "color]___[value:mantine.colors.dark[2]]___[cond:_dark",
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
-      "fontWeight]___[value:700",
+      "fontWeight]___[value:[700]",
       "justifySelf]___[value:stretch",
       "alignSelf]___[value:start",
       "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])",
@@ -560,7 +635,6 @@
       "transition]___[value:fast]___[cond:& .tabler-icon",
       "width]___[value:90%]___[cond:& .tabler-icon",
       "opacity]___[value:0.65]___[cond:& .tabler-icon",
-      "flex]___[value:1 1 100%",
       "stroke]___[value:1.2",
       "offset]___[value:0",
       "paddingBlock]___[value:4",
@@ -574,25 +648,24 @@
       "background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
       "borderColor]___[value:mantine.colors.orange[5]/20]___[cond:&[data-missing]",
       "color]___[value:mantine.colors.orange[8]]___[cond:&[data-missing]<___>_light",
-      "border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
       "borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
       "content]___[value:\"scope:\"]___[cond:_before",
       "position]___[value:absolute]___[cond:_before",
       "top]___[value:0]___[cond:_before",
       "left]___[value:2]___[cond:_before",
       "fontSize]___[value:xxs]___[cond:_before",
-      "fontWeight]___[value:500]___[cond:_before",
+      "fontWeight]___[value:medium]___[cond:_before",
       "lineHeight]___[value:1]___[cond:_before",
-      "color]___[value:mantine.colors.dimmed]___[cond:_before",
+      "color]___[value:text.dimmed]___[cond:_before",
       "opacity]___[value:0.85]___[cond:_before",
       "transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
       "background]___[value:mantine.colors.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
       "fontSize]___[value:xl",
       "padding]___[value:[1px 5px]",
-      "minWidth]___[value:24",
+      "minWidth]___[value:24px",
       "background]___[value:mantine.colors.dark[7]",
-      "color]___[value:mantine.colors.defaultColor",
-      "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
+      "color]___[value:default.color",
+      "color]___[value:text.dimmed]___[cond:&[data-zero]",
       "background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
       "gap]___[value:8",
       "marginBottom]___[value:4",
@@ -609,9 +682,9 @@
       "position]___[value:top-left",
       "marginLeft]___[value:sm",
       "padding]___[value:[6px 2px 0 2px]",
-      "color]___[value:mantine.colors.text/90]___[cond:& .mantine-Text-root",
+      "color]___[value:text/90]___[cond:& .mantine-Text-root",
       "fontSize]___[value:xs]___[cond:& .mantine-Text-root",
-      "fontWeight]___[value:500]___[cond:& .mantine-Text-root",
+      "fontWeight]___[value:medium]___[cond:& .mantine-Text-root",
       "lineHeight]___[value:1.2]___[cond:& .mantine-Text-root",
       "paddingLeft]___[value:1",
       "gridColumn]___[value:1",
@@ -620,18 +693,18 @@
       "gridColumnStart]___[value:1",
       "gridColumnEnd]___[value:4",
       "borderBottom]___[value:1px solid",
-      "borderBottomColor]___[value:mantine.colors.defaultBorder",
+      "borderBottomColor]___[value:default.border",
       "padding]___[value:[0 4px 5px 4px]",
       "fontSize]___[value:xxs]___[cond:& .mantine-Text-root",
-      "fontWeight]___[value:400]___[cond:& .mantine-Text-root",
+      "fontWeight]___[value:normal]___[cond:& .mantine-Text-root",
       "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
-      "color]___[value:mantine.colors.dimmed]___[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]) > *",
       "cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
-      "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:&:is(:hover, [data-selected=true]) > *",
+      "backgroundColor]___[value:default.hover]___[cond:&:is(:hover, [data-selected=true]) > *",
       "gridTemplateColumns]___[value:1fr 30px 1fr",
       "gap]___[value:0",
       "gap]___[value:[10px 12px]",
@@ -640,10 +713,11 @@
       "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
       "color]___[value:dark",
       "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
-      "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
-      "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
+      "backgroundColor]___[value:default.hover]___[cond:_hover<___>_dark",
+      "color]___[value:white]___[cond:_hover<___>_dark",
       "paddingBlock]___[value:3",
       "offset]___[value:4",
+      "truncate]___[value:end",
       "stroke]___[value:3.5",
       "flex]___[value:1 0 auto",
       "border]___[value:3px dashed",
@@ -657,7 +731,6 @@
       "gap]___[value:0.5]___[cond:@container likec4-tree (max-width: 450px)",
       "fontSize]___[value:10px",
       "lineHeight]___[value:1.3",
-      "borderRadius]___[value:4px",
       "background]___[value:mantine.colors.dark[9]/30",
       "background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
       "--likec4-icon-size]___[value:24px",
@@ -672,7 +745,6 @@
       "paddingLeft]___[value:[48px]",
       "grayscale]___[value:0.9",
       "filter]___[value:auto",
-      "opacity]___[value:1]___[cond:_groupHover",
       "grayscale]___[value:0]___[cond:_groupHover",
       "opacity]___[value:1]___[cond:_groupFocusWithin",
       "grayscale]___[value:0]___[cond:_groupFocusWithin",
@@ -716,16 +788,15 @@
       "opacity]___[value:0.4]___[cond::where([data-disabled]) &",
       "color]___[value:mantine.colors.dark[1]",
       "color]___[value:mantine.colors.primary[1]]___[cond:_groupHover",
-      "color]___[value:mantine.colors.white]___[cond:_groupHover<___>_light",
+      "color]___[value:white]___[cond:_groupHover<___>_light",
       "color]___[value:mantine.colors.primary[1]]___[cond:_groupFocus",
-      "color]___[value:mantine.colors.white]___[cond:_groupFocus<___>_light",
+      "color]___[value:white]___[cond:_groupFocus<___>_light",
       "color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "color]___[value:mantine.colors.white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
+      "color]___[value:white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
       "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
       "fontSize]___[value:12px",
       "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
       "border]___[value:2px dashed",
-      "fontSize]___[value:md",
       "paddingBlock]___[value:xl",
       "background]___[value:mantine.colors.gray[4]/55 !important]___[cond:_focusWithin",
       "background]___[value:mantine.colors.dark[5]/55 !important]___[cond:_focusWithin<___>_dark",
@@ -746,9 +817,9 @@
       "strokeWidth]___[value:12px]___[cond:_whenHovered",
       "strokeOpacity]___[value:0.5",
       "cursor]___[value:copy]___[cond:& .react-flow__edge-interaction",
-      "zIndex]___[value:9999",
       "mixBlendMode]___[value:screen]___[cond:_dark",
       "mixBlendMode]___[value:multiply]___[cond:_light",
+      "zIndex]___[value:[100]",
       "fill]___[value:[var(--xy-edge-stroke)]",
       "stroke]___[value:transparent",
       "fillOpacity]___[value:0.5",
@@ -774,14 +845,21 @@
       "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",
+      "backgroundColor]___[value:likec4.overlay.body",
+      "width]___[value:fit-content",
+      "height]___[value:fit-content",
+      "maxHeight]___[value:70cqh",
+      "maxWidth]___[value:50cqw",
+      "paddingRight]___[value:xxs",
+      "zIndex]___[value:200",
+      "cursor]___[value:zoom-out",
       "borderWidth]___[value:1",
       "--_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",
-      "paddingLeft]___[value:2",
       "paddingTop]___[value:0.5",
-      "fontWeight]___[value:bold",
       "letterSpacing]___[value:.75px",
       "color]___[value:[var(--_color)/75]",
       "backgroundColor]___[value:var(--likec4-palette-fill)",
@@ -796,14 +874,13 @@
       "outlineStyle]___[value:dashed",
       "outlineOffset]___[value:1.5",
       "right]___[value:0",
-      "padding]___[value:2",
       "width]___[value:min-content",
       "height]___[value:min-content",
       "--ai-radius]___[value:0px",
       "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
       "minWidth]___[value:200",
       "maxWidth]___[value:calc(100vw - 20px)",
-      "backgroundColor]___[value:mantine.colors.body/80",
+      "backgroundColor]___[value:body/80",
       "minWidth]___[value:300]___[cond:sm",
       "maxWidth]___[value:65vw]___[cond:sm",
       "maxWidth]___[value:40vw]___[cond:md",
@@ -832,15 +909,17 @@
       "flex]___[value:0 0 auto",
       "flex]___[value:0 0 70px",
       "opacity]___[value:0.25",
-      "marginLeft]___[value:2",
       "borderWidth]___[value:3px",
       "borderStyle]___[value:dashed",
       "strokeWidth]___[value:5",
       "paddingInline]___[value:6",
       "height]___[value:xs",
       "justifyContent]___[value:flex-start",
+      "maxWidth]___[value:120px",
+      "maxWidth]___[value:110px",
       "position]___[value:left-start",
-      "paddingInline]___[value:8",
+      "offset]___[value:20",
+      "paddingLeft]___[value:8",
       "paddingInline]___[value:5",
       "paddingBottom]___[value:8",
       "paddingTop]___[value:4",
@@ -884,19 +963,9 @@
       ],
       "navigationPanel": [
         "size]___[value:md]___[recipe:navigationPanel",
+        "panelPosition]___[value:left]___[recipe:navigationPanel",
         "size]___[value:lg]___[recipe:navigationPanel",
-        "*]___[value:md]___[recipe:navigationPanel",
-        "*]___[value:md]___[cond:xs]___[recipe:navigationPanel",
-        "*]___[value:md]___[cond:sm]___[recipe:navigationPanel",
-        "*]___[value:md]___[cond:md]___[recipe:navigationPanel",
-        "*]___[value:md]___[cond:lg]___[recipe:navigationPanel",
-        "*]___[value:md]___[cond:xl]___[recipe:navigationPanel",
-        "*]___[value:lg]___[recipe:navigationPanel",
-        "*]___[value:lg]___[cond:xs]___[recipe:navigationPanel",
-        "*]___[value:lg]___[cond:sm]___[recipe:navigationPanel",
-        "*]___[value:lg]___[cond:md]___[recipe:navigationPanel",
-        "*]___[value:lg]___[cond:lg]___[recipe:navigationPanel",
-        "*]___[value:lg]___[cond:xl]___[recipe:navigationPanel"
+        "panelPosition]___[value:right]___[recipe:navigationPanel"
       ],
       "navigationPanelActionIcon": [
         "variant]___[value:default]___[recipe:navigationPanelActionIcon",
@@ -906,6 +975,20 @@
         "*]___[value:default]___[recipe:navigationPanelActionIcon",
         "*]___[value:filled]___[recipe:navigationPanelActionIcon"
       ],
+      "elementNodeData": [
+        "iconPosition]___[value:left]___[recipe:elementNodeData",
+        "withIconColor]___[value:false]___[recipe:elementNodeData",
+        "withIconColor]___[value:true]___[recipe:elementNodeData",
+        "*]___[value:true]___[recipe:elementNodeData",
+        "*]___[value:false]___[recipe:elementNodeData",
+        "*]___[value:left]___[recipe:elementNodeData",
+        "iconPosition]___[value:right]___[recipe:elementNodeData",
+        "*]___[value:right]___[recipe:elementNodeData",
+        "iconPosition]___[value:top]___[recipe:elementNodeData",
+        "*]___[value:top]___[recipe:elementNodeData",
+        "iconPosition]___[value:bottom]___[recipe:elementNodeData",
+        "*]___[value:bottom]___[recipe:elementNodeData"
+      ],
       "actionBtn": [
         "size]___[value:md]___[recipe:actionBtn",
         "radius]___[value:md]___[recipe:actionBtn",
@@ -919,57 +1002,39 @@
         "*]___[value:filled]___[recipe:actionBtn"
       ],
       "compoundNode": [
-        "isTransparent]___[value:99]___[recipe:compoundNode",
-        "inverseColor]___[value:60]___[recipe:compoundNode",
-        "borderStyle]___[value:dashed]___[recipe:compoundNode",
+        "isTransparent]___[value:98]___[recipe:compoundNode",
+        "inverseColor]___[value:false]___[recipe:compoundNode",
         "borderStyle]___[value:none]___[recipe:compoundNode",
         "isTransparent]___[value:false]___[recipe:compoundNode",
+        "inverseColor]___[value:70]___[recipe:compoundNode",
         "isTransparent]___[value:true]___[recipe:compoundNode",
         "inverseColor]___[value:true]___[recipe:compoundNode",
-        "inverseColor]___[value:false]___[recipe:compoundNode",
         "borderStyle]___[value:solid]___[recipe:compoundNode",
+        "borderStyle]___[value:dashed]___[recipe:compoundNode",
         "borderStyle]___[value:dotted]___[recipe:compoundNode"
       ],
       "edgeActionBtn": [],
       "edgePath": [],
-      "elementNodeData": [],
+      "actionButtons": [],
       "elementNode": [],
       "elementShapeRecipe": [
         "withBorder]___[value:none]___[recipe:elementShapeRecipe",
+        "withOutline]___[value:false]___[recipe:elementShapeRecipe",
         "withBorder]___[value:false]___[recipe:elementShapeRecipe",
+        "withOutline]___[value:true]___[recipe:elementShapeRecipe",
         "shapetype]___[value:html]___[recipe:elementShapeRecipe",
         "shapetype]___[value:svg]___[recipe:elementShapeRecipe",
-        "*]___[value:html]___[recipe:elementShapeRecipe",
-        "*]___[value:html]___[cond:xs]___[recipe:elementShapeRecipe",
-        "*]___[value:html]___[cond:sm]___[recipe:elementShapeRecipe",
-        "*]___[value:html]___[cond:md]___[recipe:elementShapeRecipe",
-        "*]___[value:html]___[cond:lg]___[recipe:elementShapeRecipe",
-        "*]___[value:html]___[cond:xl]___[recipe:elementShapeRecipe",
-        "*]___[value:svg]___[recipe:elementShapeRecipe",
-        "*]___[value:svg]___[cond:xs]___[recipe:elementShapeRecipe",
-        "*]___[value:svg]___[cond:sm]___[recipe:elementShapeRecipe",
-        "*]___[value:svg]___[cond:md]___[recipe:elementShapeRecipe",
-        "*]___[value:svg]___[cond:lg]___[recipe:elementShapeRecipe",
-        "*]___[value:svg]___[cond:xl]___[recipe:elementShapeRecipe",
-        "withBorder]___[value:true]___[recipe:elementShapeRecipe",
-        "*]___[value:true]___[recipe:elementShapeRecipe",
-        "*]___[value:true]___[cond:xs]___[recipe:elementShapeRecipe",
-        "*]___[value:true]___[cond:sm]___[recipe:elementShapeRecipe",
-        "*]___[value:true]___[cond:md]___[recipe:elementShapeRecipe",
-        "*]___[value:true]___[cond:lg]___[recipe:elementShapeRecipe",
-        "*]___[value:true]___[cond:xl]___[recipe:elementShapeRecipe",
-        "*]___[value:false]___[recipe:elementShapeRecipe",
-        "*]___[value:false]___[cond:xs]___[recipe:elementShapeRecipe",
-        "*]___[value:false]___[cond:sm]___[recipe:elementShapeRecipe",
-        "*]___[value:false]___[cond:md]___[recipe:elementShapeRecipe",
-        "*]___[value:false]___[cond:lg]___[recipe:elementShapeRecipe",
-        "*]___[value:false]___[cond:xl]___[recipe:elementShapeRecipe"
+        "withBorder]___[value:true]___[recipe:elementShapeRecipe"
       ],
       "likec4tag": [
         "autoTextColor]___[value:false]___[recipe:likec4tag",
         "autoTextColor]___[value:true]___[recipe:likec4tag",
         "autoTextColor]___[value:true]___[cond:_hover]___[recipe:likec4tag",
         "autoTextColor]___[value:false]___[cond:_hover]___[recipe:likec4tag"
+      ],
+      "nodeNotes": [
+        "opened]___[value:false]___[recipe:nodeNotes",
+        "opened]___[value:true]___[recipe:nodeNotes"
       ]
     }
   }