@likec4/diagram 1.34.2 → 1.36.0

package/panda.buildinfo.json

@@ -5,13 +5,12 @@
       "background]___[value:dots",
       "background]___[value:transparent",
       "gap]___[value:20",
-      "background]___[value:transparent !important",
-      "--xy-background-color]___[value:transparent !important",
-      "--xy-background-color]___[value:{colors.mantine.colors.body}",
-      "--xy-background-pattern-color]___[value:{colors.mantine.colors.dark[5]}]___[cond:_dark",
-      "--xy-background-pattern-color]___[value:{colors.mantine.colors.gray[4]}]___[cond:_light",
       "WebkitUserSelect]___[value:none]___[cond:& .react-flow__pane",
       "display]___[value:none]___[cond:& .react-flow__attribution",
+      "background]___[value:transparent !important",
+      "--xy-background-color]___[value:transparent !important",
+      "--xy-background-color]___[value:{colors.likec4.background}",
+      "--xy-background-pattern-color]___[value:{colors.likec4.background.pattern}",
       "position]___[value:absolute",
       "top]___[value:1rem",
       "right]___[value:1rem",
@@ -29,36 +28,37 @@
       "padding]___[value:xl",
       "gap]___[value:xs",
       "marginTop]___[value:xl",
-      "display]___[value:flex",
-      "overflow]___[value:hidden",
-      "alignItems]___[value:center",
-      "gap]___[value:micro",
-      "justifyContent]___[value:stretch",
-      "transitionProperty]___[value:all",
-      "transitionDuration]___[value:fast",
-      "transitionTimingFunction]___[value:inOut",
-      "border]___[value:1px dashed {colors.mantine.colors.defaultBorder}",
-      "borderRadius]___[value:sm",
-      "color]___[value:mantine.colors.gray[7]",
-      "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
-      "transitionTimingFunction]___[value:out]___[cond:_hover",
-      "color]___[value:mantine.colors.defaultColor]___[cond:_hover",
-      "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
-      "minHeight]___[value:22px",
-      "padding]___[value:2px 8px 2px 2px",
-      "minHeight]___[value:30px",
-      "padding]___[value:3px 16px 3px 3px",
-      "flex]___[value:1 1 100%",
-      "transition]___[value:transform 100ms {easings.inOut}",
-      "transitionTimingFunction]___[value:out]___[cond:_groupHover",
-      "transitionDelay]___[value:50ms]___[cond:_groupHover",
-      "transform]___[value:translateX(1px)]___[cond:_groupHover",
-      "flex]___[value:0",
       "color]___[value:teal",
-      "truncate]___[value:true",
+      "opacity]___[value:1",
+      "opacity]___[value:0.45",
+      "transition]___[value:fast",
+      "opacity]___[value:1]___[cond:_hover",
+      "flexWrap]___[value:nowrap",
+      "minHeight]___[value:24",
+      "maxWidth]___[value:500",
+      "userSelect]___[value:all",
+      "paddingRight]___[value:0",
+      "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\"])",
+      "userSelect]___[value:none]___[cond:&:is([data-position=\"left\"])",
+      "pointerEvents]___[value:none]___[cond:&:is([data-position=\"left\"])",
+      "color]___[value:[inherit]]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
+      "opacity]___[value:0.7]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
+      "color]___[value:[inherit]]___[cond:& > a",
+      "cursor]___[value:pointer]___[cond:& > a",
+      "transition]___[value:fast]___[cond:& > a",
+      "opacity]___[value:0.7]___[cond:& > a",
+      "opacity]___[value:1]___[cond:& > a<___>_hover",
+      "textDecoration]___[value:none]___[cond:& > a",
+      "textDecoration]___[value:underline]___[cond:& > a<___>_hover",
+      "stroke]___[value:2.5",
+      "height]___[value:12",
+      "width]___[value:12",
       "height]___[value:30px",
       "paddingLeft]___[value:sm",
-      "paddingRight]___[value:4px",
+      "paddingRight]___[value:1",
+      "borderRadius]___[value:sm",
       "border]___[value:1px solid",
       "borderColor]___[value:mantine.colors.defaultBorder",
       "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
@@ -67,23 +67,23 @@
       "background]___[value:mantine.colors.default",
       "background]___[value:mantine.colors.white]___[cond:_light",
       "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
+      "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
       "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
-      "transition]___[value:fast",
       "transition]___[value:none !important]___[cond:_whenPanning",
       "boxShadow]___[value:xs",
       "boxShadow]___[value:sm]___[cond:_hover",
       "boxShadow]___[value:none !important]___[cond:_whenPanning",
       "fontSize]___[value:sm",
       "fontWeight]___[value:500",
-      "paddingRight]___[value:10px",
+      "paddingRight]___[value:2.5",
       "color]___[value:mantine.colors.placeholder",
       "flex]___[value:1",
-      "paddingRight]___[value:30px]___[cond:sm",
-      "paddingRight]___[value:50px]___[cond:md",
+      "paddingRight]___[value:[30px]]___[cond:sm",
+      "paddingRight]___[value:[50px]]___[cond:md",
       "fontSize]___[value:11px",
       "fontWeight]___[value:600",
       "lineHeight]___[value:1",
-      "padding]___[value:4px 7px",
+      "padding]___[value:[4px 7px]",
       "color]___[value:mantine.colors.gray[7]]___[cond:_light",
       "borderColor]___[value:mantine.colors.gray[2]]___[cond:_light",
       "color]___[value:mantine.colors.dark[0]]___[cond:_dark",
@@ -93,18 +93,98 @@
       "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
       "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
       "stroke]___[value:2",
+      "alignItems]___[value:flex-start",
+      "pointerEvents]___[value:none",
+      "margin]___[value:0",
+      "gap]___[value:xxs",
+      "maxWidth]___[value:calc(100vw)",
+      "maxWidth]___[value:calc(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:flex",
+      "alignItems]___[value:stretch",
+      "gap]___[value:sm",
+      "flexDirection]___[value:column",
+      "mainAxis]___[value:2",
+      "position]___[value:bottom-start",
+      "alignItems]___[value:center",
+      "flexDirection]___[value:row",
+      "layerStyle]___[value:likec4.panel",
+      "position]___[value:relative",
+      "paddingRight]___[value:md",
+      "pointerEvents]___[value:all",
+      "userSelect]___[value:none",
+      "maxWidth]___[value:200px",
+      "display]___[value:none",
+      "display]___[value:block]___[cond:@/md",
+      "gap]___[value:[3px]",
+      "flexShrink]___[value:1",
+      "flexGrow]___[value:1",
+      "overflow]___[value:hidden",
+      "gap]___[value:[1px]",
+      "flexGrow]___[value:0",
+      "display]___[value:none]___[cond:_empty",
+      "layerStyle]___[value:likec4.dropdown",
+      "gap]___[value:[4px]",
+      "maxWidth]___[value:calc(100vw - 50px)",
+      "maxWidth]___[value:calc(100cqw - 50px)]___[cond:xs",
+      "maxWidth]___[value:calc(100vw - 250px)",
+      "maxWidth]___[value:calc(100cqw - 250px)]___[cond:xs",
+      "maxHeight]___[value:calc(100vh - 200px)",
+      "maxHeight]___[value:calc(100cqh - 200px)]___[cond:xs",
+      "color]___[value:[inherit!]]___[cond:_groupFocus",
+      "transition]___[value:none]___[cond:_groupFocus",
+      "backgroundColor]___[value:mantine.colors.yellow[2]/90]___[cond:& > mark",
+      "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",
+      "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.colors.gray[1]",
+      "backgroundColor]___[value:mantine.colors.dark[5]/80]___[cond:_dark",
+      "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_hover",
+      "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",
+      "outline]___[value:none]___[cond:_focus",
+      "paddingInline]___[value:xs",
+      "paddingBlock]___[value:xxs",
+      "color]___[value:mantine.colors.primary.lightColor!]___[cond:_focus",
+      "backgroundColor]___[value:mantine.colors.primary.lightHover!]___[cond:_focus",
+      "stroke]___[value:1.5",
+      "--thickness]___[value:1px",
+      "height]___[value:100%",
+      "borderInlineEndWidth]___[value:var(--thickness)",
+      "marginBottom]___[value:1",
+      "display]___[value:flex]___[cond:@/md",
+      "color]___[value:mantine.colors.gray[5]",
+      "color]___[value:mantine.colors.dark[3]]___[cond:_dark",
+      "color]___[value:mantine.colors.text/90",
+      "color]___[value:mantine.colors.text]___[cond:_hover",
+      "truncate]___[value:true",
+      "color]___[value:mantine.colors.dimmed",
       "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity, 95%))]",
       "backgroundColor]___[value:[rgb(250 250 250 / var(--_opacity, 95%))]]___[cond:_light",
       "backdropFilter]___[value:auto",
       "backdropBlur]___[value:var(--_blur, 10px)",
-      "height]___[value:100%",
       "maxHeight]___[value:100vh",
-      "flexDirection]___[value:column",
-      "gap]___[value:sm",
-      "paddingTop]___[value:20",
-      "paddingLeft]___[value:16",
-      "paddingRight]___[value:16",
-      "paddingBottom]___[value:8",
+      "justifyContent]___[value:stretch",
+      "paddingTop]___[value:[20px]",
+      "paddingLeft]___[value:md",
+      "paddingBottom]___[value:sm",
       "background]___[value:[transparent]",
       "height]___[value:100cqh]___[cond:xs",
       "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
@@ -112,15 +192,106 @@
       "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
       "containerName]___[value:likec4-search-elements",
       "containerType]___[value:size",
-      "flexGrow]___[value:1",
-      "alignItems]___[value:stretch",
       "paddingInline]___[value:sm",
       "display]___[value:grid",
       "gap]___[value:10px",
       "order]___[value:6",
       "paddingRight]___[value:xs",
+      "display]___[value:flex]___[cond:@likec4-root/sm",
+      "color]___[value:likec4.panel.action-icon.text",
+      "color]___[value:likec4.panel.action-icon.text.hover]___[cond:_hover",
+      "backgroundColor]___[value:likec4.panel.action-icon.bg",
+      "backgroundColor]___[value:likec4.panel.action-icon.bg.hover]___[cond:_hover",
+      "opacity]___[value:0.8",
+      "whiteSpace]___[value:nowrap",
+      "gap]___[value:0.5",
+      "paddingInline]___[value:xxs",
+      "position]___[value:bottom-end",
+      "boxShadow]___[value:xl",
+      "display]___[value:flex]___[cond:@/xs",
+      "gap]___[value:2",
+      "alignItems]___[value:baseline",
+      "stroke]___[value:1.8",
+      "marginTop]___[value:1",
+      "flexWrap]___[value:wrap",
+      "fontSize]___[value:xs",
+      "marginBottom]___[value:xxs",
+      "fontSize]___[value:xxs",
+      "gap]___[value:md",
+      "margin]___[value:xs",
+      "padding]___[value:md",
+      "maxWidth]___[value:calc(100cqw - 32px)",
+      "minWidth]___[value:calc(100cqw - 50px)",
+      "maxHeight]___[value:calc(100cqh - 100px)",
+      "width]___[value:max-content",
+      "cursor]___[value:default",
+      "minWidth]___[value:400]___[cond:@/sm",
+      "maxWidth]___[value:550]___[cond:@/sm",
+      "maxWidth]___[value:700]___[cond:@/lg",
+      "marginBlock]___[value:md",
+      "overflow]___[value:visible",
+      "paddingInline]___[value:1",
+      "color]___[value:mantine.colors.gray[8]]___[cond:_light",
+      "opacity]___[value:0.5",
+      "marginInlineEnd]___[value:0.5",
+      "fontWeight]___[value:400",
+      "boxShadow]___[value:md",
+      "height]___[value:auto",
+      "lineHeight]___[value:1.1",
+      "color]___[value:mantine.colors.gray[9]]___[cond:_light",
+      "marginInlineStart]___[value:1]___[cond:&:is([data-position=\"right\"])",
+      "position]___[value:right-start",
+      "boxShadow]___[value:lg",
+      "mainAxis]___[value:10",
+      "opacity]___[value:0.6",
+      "padding]___[value:8",
+      "paddingTop]___[value:6",
+      "marginBottom]___[value:10",
+      "marginBlock]___[value:10",
+      "paddingTop]___[value:100%",
+      "left]___[value:2",
+      "bottom]___[value:2",
+      "padding]___[value:xxs",
+      "color]___[value:orange",
+      "background]___[value:mantine.colors.orange.light",
+      "marginTop]___[value:2",
+      "marginTop]___[value:xs",
+      "position]___[value:top",
+      "width]___[value:70%]___[cond:& > svg",
+      "height]___[value:70%]___[cond:& > svg",
+      "position]___[value:right",
+      "mainAxis]___[value:12",
+      "padding]___[value:1",
+      "top]___[value:md",
+      "left]___[value:md",
+      "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
+      "--ai-size]___[value:2rem]___[cond:& .action-icon",
+      "width]___[value:65%]___[cond:& .tabler-icon",
+      "height]___[value:65%]___[cond:& .tabler-icon",
+      "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
+      "boxShadow]___[value:none]___[cond:_whenPanning",
+      "flex]___[value:1 1 40%",
+      "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",
+      "border]___[value:2px solid",
+      "borderColor]___[value:mantine.colors.gray[5]",
+      "borderRadius]___[value:3",
+      "transform]___[value:translate(-50%, -50%)",
+      "flexShrink]___[value:0",
+      "display]___[value:block",
+      "marginRight]___[value:sm",
+      "borderColor]___[value:mantine.colors.orange[6]",
+      "borderWidth]___[value:4]___[cond:md",
       "boxSizing]___[value:border-box",
-      "margin]___[value:0",
       "inset]___[value:0",
       "width]___[value:100vw",
       "height]___[value:100vh",
@@ -129,14 +300,13 @@
       "backdropFilter]___[value:auto]___[cond:_backdrop",
       "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
       "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
-      "pointerEvents]___[value:all",
       "gap]___[value:lg",
       "backgroundColor]___[value:mantine.colors.body",
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
       "border]___[value:none",
-      "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent), color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px, color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px) ",
+      "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent), color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px, color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px) ",
+      "flex]___[value:0",
       "cursor]___[value:move",
-      "display]___[value:block",
       "fontFamily]___[value:likec4.element",
       "fontOpticalSizing]___[value:auto",
       "fontStyle]___[value:normal",
@@ -155,7 +325,7 @@
       "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",
-      "padding]___[value:10px 8px",
+      "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",
@@ -174,36 +344,33 @@
       "fontSize]___[value:15px",
       "lineHeight]___[value:1.4",
       "background]___[value:mantine.colors.gray[1]",
-      "flexWrap]___[value:nowrap",
-      "gap]___[value:6px",
-      "padding]___[value:4px",
-      "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
-      "fontSize]___[value:xs",
-      "padding]___[value:6px 8px",
+      "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",
       "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
       "transition]___[value:none]___[cond:&[data-active]",
       "background]___[value:mantine.colors.white]___[cond:&[data-active]",
       "boxShadow]___[value:xs]___[cond:&[data-active]",
       "color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
+      "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
       "color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
       "background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
       "color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
       "background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
-      "position]___[value:relative",
-      "paddingLeft]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
-      "paddingRight]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
+      "paddingLeft]___[value:1]___[cond:&:not(:has(.mantine-ScrollArea-root))",
+      "paddingRight]___[value:1]___[cond:&:not(:has(.mantine-ScrollArea-root))",
       "width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
       "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
-      "paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
-      "paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
+      "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]",
-      "alignItems]___[value:baseline",
       "justifyItems]___[value:stretch",
       "justifySelf]___[value:end",
       "textAlign]___[value:right",
-      "userSelect]___[value:none",
       "width]___[value:14px",
       "height]___[value:14px",
       "border]___[value:3.5px solid",
@@ -211,62 +378,55 @@
       "borderTop]___[value:none",
       "borderLeft]___[value:none",
       "borderRadius]___[value:2px",
-      "bottom]___[value:2px",
-      "right]___[value:2px",
+      "bottom]___[value:0.5",
+      "right]___[value:0.5",
       "cursor]___[value:se-resize",
       "borderWidth]___[value:4px]___[cond:_hover",
       "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
-      "boxShadow]___[value:md",
-      "gap]___[value:[4px 4px]",
-      "paddingRight]___[value:2xs",
-      "whiteSpace]___[value:nowrap",
-      "color]___[value:mantine.colors.gray[8]",
-      "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
-      "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
-      "padding]___[value:2xs",
-      "whiteSpace]___[value:pre",
-      "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
-      "userSelect]___[value:all",
       "marginBottom]___[value:sm",
       "gap]___[value:6",
       "lineClamp]___[value:1",
-      "flexWrap]___[value:wrap",
       "gap]___[value:4",
       "marginTop]___[value:6",
       "stroke]___[value:1.6",
-      "stroke]___[value:1.8",
       "paddingTop]___[value:xs",
-      "alignItems]___[value:flex-start",
-      "--thickness]___[value:1px",
       "borderBlockEndWidth]___[value:var(--thickness)",
+      "gap]___[value:[4px 4px]",
+      "paddingRight]___[value:xxs",
+      "transitionProperty]___[value:all",
+      "transitionDuration]___[value:fast",
+      "transitionTimingFunction]___[value:inOut",
+      "color]___[value:mantine.colors.gray[8]",
+      "transitionTimingFunction]___[value:out]___[cond:_groupHover",
+      "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
+      "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
+      "whiteSpace]___[value:pre",
+      "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
       "overscrollBehavior]___[value:none",
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
-      "cursor]___[value:default",
       "marginTop]___[value:0",
       "marginBottom]___[value:0",
       "transition]___[value:fast]___[cond:& > *",
       "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > :not([data-no-transform])",
       "transform]___[value:translateX(1px)]___[cond:_hover<___>& > :not([data-no-transform])",
       "height]___[value:36px",
-      "paddingInlineStart]___[value:16px",
-      "paddingInlineEnd]___[value:10px",
+      "paddingInlineStart]___[value:[16px]",
+      "paddingInlineEnd]___[value:2.5",
       "color]___[value:mantine.colors.gray.lightColor]___[cond:_dark",
       "background]___[value:mantine.colors.gray.lightHover]___[cond:_hover",
       "transition]___[value:fast]___[cond:& .tabler-icon",
       "width]___[value:90%]___[cond:& .tabler-icon",
       "opacity]___[value:0.65]___[cond:& .tabler-icon",
+      "flex]___[value:1 1 100%",
       "stroke]___[value:1.2",
-      "position]___[value:bottom-start",
       "offset]___[value:0",
-      "paddingInline]___[value:xs",
       "paddingBlock]___[value:4",
       "opacity]___[value:0.65",
       "display]___[value:inline-block",
-      "padding]___[value:3px 6px",
-      "borderRadius]___[value:3",
-      "background]___[value:likec4.palette.fill/75",
+      "padding]___[value:[3px 6px]",
+      "background]___[value:var(--likec4-palette-fill)/75",
       "lineHeight]___[value:1.2",
-      "color]___[value:likec4.palette.hiContrast",
+      "color]___[value:var(--likec4-palette-hiContrast)",
       "background]___[value:mantine.colors.gray[1]]___[cond:_light",
       "color]___[value:mantine.colors.orange[4]]___[cond:&[data-missing]",
       "background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
@@ -277,8 +437,8 @@
       "content]___[value:\"scope:\"]___[cond:_before",
       "position]___[value:absolute]___[cond:_before",
       "top]___[value:0]___[cond:_before",
-      "left]___[value:8]___[cond:_before",
-      "fontSize]___[value:2xs]___[cond:_before",
+      "left]___[value:2]___[cond:_before",
+      "fontSize]___[value:xxs]___[cond:_before",
       "fontWeight]___[value:500]___[cond:_before",
       "lineHeight]___[value:1]___[cond:_before",
       "color]___[value:mantine.colors.dimmed]___[cond:_before",
@@ -286,9 +446,8 @@
       "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",
+      "padding]___[value:[1px 5px]",
       "minWidth]___[value:24",
-      "textAlign]___[value:center",
       "background]___[value:mantine.colors.dark[7]",
       "color]___[value:mantine.colors.defaultColor",
       "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
@@ -296,7 +455,6 @@
       "alignItems]___[value:flex-end",
       "gap]___[value:8",
       "marginBottom]___[value:4",
-      "marginTop]___[value:xs",
       "top]___[value:12",
       "right]___[value:12",
       "boxShadow]___[value:none",
@@ -307,9 +465,7 @@
       "borderStyle]___[value:solid]___[cond:_hover",
       "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
       "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
-      "color]___[value:orange",
       "background]___[value:mantine.colors.defaultBorder/50",
-      "boxShadow]___[value:xl",
       "outline]___[value:none",
       "borderRadius]___[value:var(--_border-radius)",
       "--_blur]___[value:0px",
@@ -319,13 +475,13 @@
       "--_opacity]___[value:0%",
       "--_border-radius]___[value:0px",
       "cursor]___[value:zoom-out]___[cond:_backdrop",
-      "containerName]___[value:overlay-dialog",
+      "containerName]___[value:likec4-dialog",
       "border]___[value:0 solid transparent",
       "inset]___[value:[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]]___[cond:sm",
       "width]___[value:calc(100vw - 2 * var(--_inset))]___[cond:sm",
       "height]___[value:calc(100vh - var(--_offset) - var(--_inset))]___[cond:sm",
       "--_border-radius]___[value:6px]___[cond:sm",
-      "padding]___[value:6px]___[cond:sm",
+      "padding]___[value:1.5]___[cond:sm",
       "--_offset]___[value:1rem]___[cond:sm",
       "--_offset]___[value:1rem]___[cond:md",
       "--_offset]___[value:2rem]___[cond:lg",
@@ -338,22 +494,20 @@
       "position]___[value:top-right",
       "position]___[value:top-left",
       "marginLeft]___[value:sm",
-      "padding]___[value:6px 2px 0 2px",
+      "padding]___[value:[6px 2px 0 2px]",
       "color]___[value:mantine.colors.text/90]___[cond:& .mantine-Text-root",
       "fontSize]___[value:xs]___[cond:& .mantine-Text-root",
       "fontWeight]___[value:500]___[cond:& .mantine-Text-root",
       "lineHeight]___[value:1.2]___[cond:& .mantine-Text-root",
-      "paddingLeft]___[value:4",
+      "paddingLeft]___[value:1",
       "gridColumn]___[value:1",
       "gridColumn]___[value:2",
       "gridColumn]___[value:3",
-      "paddingRight]___[value:4",
       "gridColumnStart]___[value:1",
       "gridColumnEnd]___[value:4",
       "borderBottom]___[value:1px solid",
       "borderBottomColor]___[value:mantine.colors.defaultBorder",
-      "marginBottom]___[value:0px",
-      "padding]___[value:0 4px 5px 4px",
+      "padding]___[value:[0 4px 5px 4px]",
       "fontSize]___[value:xxs]___[cond:& .mantine-Text-root",
       "fontWeight]___[value:400]___[cond:& .mantine-Text-root",
       "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
@@ -366,7 +520,7 @@
       "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:&:is(:hover, [data-selected=true]) > *",
       "gridTemplateColumns]___[value:1fr 30px 1fr",
       "gap]___[value:0",
-      "gap]___[value:10px 12px",
+      "gap]___[value:[10px 12px]",
       "justifyItems]___[value:start",
       "maxHeight]___[value:70vh",
       "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
@@ -375,22 +529,19 @@
       "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
       "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
-      "gap]___[value:2",
       "paddingBlock]___[value:3",
       "offset]___[value:4",
       "truncate]___[value:end",
       "stroke]___[value:3.5",
       "flex]___[value:1 0 auto",
-      "marginBottom]___[value:8px",
+      "marginBottom]___[value:2",
       "containerName]___[value:likec4-tree",
       "containerType]___[value:inline-size",
       "outline]___[value:none !important",
-      "gap]___[value:4px",
-      "marginTop]___[value:8px",
-      "color]___[value:mantine.colors.dimmed",
+      "gap]___[value:1",
       "flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
       "alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
-      "gap]___[value:2]___[cond:@container likec4-tree (max-width: 450px)",
+      "gap]___[value:0.5]___[cond:@container likec4-tree (max-width: 450px)",
       "fontSize]___[value:10px",
       "lineHeight]___[value:1.3",
       "borderRadius]___[value:4px",
@@ -398,7 +549,6 @@
       "background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
       "--likec4-icon-size]___[value:24px",
       "--likec4-icon-size]___[value:18px]___[cond:@container likec4-tree (max-width: 450px)",
-      "lineHeight]___[value:1.1",
       "display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
       "maxWidth]___[value:8xl",
       "marginInline]___[value:auto",
@@ -407,11 +557,7 @@
       "paddingInline]___[value:8]___[cond:lg",
       "paddingBlock]___[value:md",
       "order]___[value:2",
-      "gap]___[value:md",
-      "paddingLeft]___[value:48",
-      "flexDirection]___[value:row",
-      "opacity]___[value:1",
-      "opacity]___[value:0.3",
+      "paddingLeft]___[value:[48px]",
       "grayscale]___[value:0",
       "grayscale]___[value:0.9",
       "filter]___[value:auto",
@@ -419,24 +565,20 @@
       "grayscale]___[value:0]___[cond:_groupHover",
       "opacity]___[value:1]___[cond:_groupFocusWithin",
       "grayscale]___[value:0]___[cond:_groupFocusWithin",
-      "opacity]___[value:0.5",
       "marginRight]___[value:1",
-      "width]___[value:max-content",
       "mainAxis]___[value:4",
       "crossAxis]___[value:50",
       "srOnly]___[value:true",
       "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
-      "marginTop]___[value:4px",
       "fontSize]___[value:13px",
       "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
       "background]___[value:mantine.colors.primary[8]",
       "borderColor]___[value:mantine.colors.primary[9]",
-      "padding]___[value:12px 8px 12px 14px",
+      "padding]___[value:[12px 8px 12px 14px]",
       "minHeight]___[value:60px",
       "outline]___[value:none]___[cond:_hover",
       "borderColor]___[value:mantine.colors.primary[9]]___[cond:_hover",
       "background]___[value:mantine.colors.primary[8]/60]___[cond:_hover",
-      "outline]___[value:none]___[cond:_focus",
       "background]___[value:mantine.colors.primary[8]]___[cond:_focus",
       "borderColor]___[value:mantine.colors.primary[9]]___[cond:_focus",
       "outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
@@ -475,7 +617,6 @@
       "border]___[value:2px dashed",
       "borderRadius]___[value:md",
       "fontSize]___[value:md",
-      "padding]___[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",
@@ -485,28 +626,25 @@
       "zIndex]___[value:902",
       "backdropBlur]___[value:10px",
       "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
-      "top]___[value:2rem",
-      "left]___[value:50%",
+      "top]___[value:[2rem]",
+      "left]___[value:[50%]",
       "maxWidth]___[value:600px",
       "minWidth]___[value:200px",
       "transform]___[value:translateX(-50%)",
       "zIndex]___[value:903",
-      "marginTop]___[value:32px]___[cond:& + &",
-      "top]___[value:5px",
-      "left]___[value:4px",
+      "marginTop]___[value:[32px]]___[cond:& + &",
+      "top]___[value:[5px]",
+      "left]___[value:[4px]",
       "display]___[value:none]___[cond:_smallZoom",
-      "top]___[value:[2px]",
-      "right]___[value:[2px]",
+      "top]___[value:0.5",
       "opacity]___[value:0.75]___[cond:_whenHovered",
-      "opacity]___[value:1]___[cond:_hover",
-      "pointerEvents]___[value:none",
       "borderRadius]___[value:var(--_border-radius, 4px)]___[cond:_before",
       "content]___[value:\" \"]___[cond:_before",
       "left]___[value:0]___[cond:_before",
       "width]___[value:100%]___[cond:_before",
       "height]___[value:100%]___[cond:_before",
       "border]___[value:transparent]___[cond:_before",
-      "background]___[value:likec4.palette.fill]___[cond:_before",
+      "background]___[value:var(--likec4-palette-fill)]___[cond:_before",
       "backgroundClip]___[value:padding-box]___[cond:_before",
       "transitionDelay]___[value:.075ms]___[cond:_before",
       "transition]___[value:all {durations.slow} {easings.inOut}]___[cond:_noReduceGraphics<___>_before",
@@ -518,33 +656,33 @@
       "transition]___[value:all 250ms {easings.inOut}",
       "borderStyle]___[value:dashed",
       "borderWidth]___[value:[var(--_border-width, 2px)]",
-      "borderColor]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} var(--_border-opacity-percent, 100%), transparent)]",
-      "overflow]___[value:visible",
+      "borderColor]___[value:[color-mix(in srgb, var(--likec4-palette-stroke) var(--_border-opacity-percent, 100%), transparent)]",
       "visibility]___[value:hidden",
       "visibility]___[value:visible]___[cond:_whenFocused",
       "visibility]___[value:visible]___[cond:_whenSelected",
       "display]___[value:none]___[cond:_whenPanning",
-      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]",
+      "stroke]___[value:[color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))]",
       "strokeWidth]___[value:4",
       "fill]___[value:[none]",
       "animationStyle]___[value:indicator",
-      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]]___[cond:_light",
+      "stroke]___[value:[color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))]]___[cond:_light",
       "boxShadow]___[value:0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)]___[cond:_before<___>_noReduceGraphics",
       "boxShadow]___[value:none]___[cond:_before<___>_whenSelected",
       "boxShadow]___[value:none !important]___[cond:_before<___>_whenPanning",
-      "left]___[value:14px",
-      "top]___[value:4px",
-      "right]___[value:30px",
+      "left]___[value:[14px]",
+      "top]___[value:[4px]",
+      "right]___[value:[30px]",
       "width]___[value:auto",
+      "minHeight]___[value:30px",
       "pointerEvents]___[value:all]___[cond::where(.react-flow__node.draggable) &",
       "cursor]___[value:grab]___[cond::where(.react-flow__node.draggable) &",
-      "paddingLeft]___[value:22px]___[cond:.likec4-compound-node:has(.compound-action) &",
+      "paddingLeft]___[value:[22px]]___[cond:.likec4-compound-node:has(.compound-action) &",
       "fontFamily]___[value:likec4.compound",
       "textTransform]___[value:uppercase",
       "letterSpacing]___[value:0.2px",
-      "color]___[value:likec4.palette.loContrast",
-      "color]___[value:[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]]___[cond:[data-compound-title-inverse] &",
-      "color]___[value:likec4.palette.stroke]___[cond:[data-compound-title-inverse] &<___>_light",
+      "color]___[value:var(--likec4-palette-loContrast)",
+      "color]___[value:[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]]___[cond:[data-compound-title-inverse] &",
+      "color]___[value:var(--likec4-palette-stroke)]___[cond:[data-compound-title-inverse] &<___>_light",
       "flex]___[value:0 0 20px",
       "height]___[value:20px",
       "width]___[value:20px",
@@ -555,24 +693,22 @@
       "filter]___[value:drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))]___[cond:& svg, & img<___>sm",
       "filter]___[value:none]___[cond:& svg, & img<___>_reduceGraphicsOnPan",
       "transitionDuration]___[value:normal",
-      "--actionbtn-color]___[value:color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]___[cond:[data-compound-title-inverse] &<___>_dark",
-      "--actionbtn-color]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-color-hovered]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-color-hovered-btn]___[value:{colors.likec4.palette.hiContrast}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-bg-hovered]___[value:{colors.likec4.palette.fill/50}]___[cond:[data-compound-title-inverse] &<___>_light",
-      "--actionbtn-bg-hovered-btn]___[value:{colors.likec4.palette.fill}]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-color]___[value:color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]___[cond:[data-compound-title-inverse] &<___>_dark",
+      "--actionbtn-color]___[value:var(--likec4-palette-stroke)]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-color-hovered]___[value:var(--likec4-palette-stroke)]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-color-hovered-btn]___[value:var(--likec4-palette-hiContrast)]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-bg-hovered]___[value:var(--likec4-palette-fill)/50]___[cond:[data-compound-title-inverse] &<___>_light",
+      "--actionbtn-bg-hovered-btn]___[value:var(--likec4-palette-fill)]___[cond:[data-compound-title-inverse] &<___>_light",
       "transitionDelay]___[value:0.2s",
       "transitionDelay]___[value:0s]___[cond:_hover",
-      "likec4RelationPalette]___[value:gray",
-      "top]___[value:4",
-      "right]___[value:4",
+      "top]___[value:1",
+      "right]___[value:1",
       "textAlign]___[value:left",
       "whiteSpaceCollapse]___[value:preserve-breaks",
       "textWrap]___[value:pretty",
       "lineHeight]___[value:1.25",
       "--text-fz]___[value:{fontSizes.sm}",
       "--text-fz]___[value:{fontSizes.md}]___[cond:md",
-      "height]___[value:auto",
       "background]___[value:[var(--xy-edge-label-background-color)]",
       "color]___[value:[var(--xy-edge-label-color)]",
       "border]___[value:0px solid transparent",
@@ -583,36 +719,8 @@
       "mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
       "mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
       "display]___[value:none]___[cond:_reduceGraphicsOnPan",
-      "fontFamily]___[value:likec4.relation",
-      "padding]___[value:3px 5px 5px 5px",
-      "maxWidth]___[value:100%",
-      "padding]___[value:0px",
-      "alignSelf]___[value:stretch",
-      "flex]___[value:0 0 auto",
-      "fontSize]___[value:14px",
-      "padding]___[value:5px 5px",
-      "minWidth]___[value:22px",
-      "borderTopLeftRadius]___[value:4px",
-      "borderBottomLeftRadius]___[value:4px",
-      "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]",
-      "fontVariantNumeric]___[value:tabular-nums",
-      "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]]___[cond::where([data-likec4-color=\"gray\"]) &<___>_dark",
-      "display]___[value:none !important]___[cond:_empty",
-      "padding]___[value:2px 5px 4px 0px",
-      "lineHeight]___[value:1.185",
-      "padding]___[value:2px 6px 4px 0px",
-      "opacity]___[value:0.75",
       "lineClamp]___[value:5",
       "strokeOpacity]___[value:0",
-      "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke}",
-      "--xy-edge-stroke-selected]___[value:{colors.likec4.relation.stroke.selected}",
-      "--xy-edge-label-color]___[value:{colors.likec4.relation.label}",
-      "--xy-edge-label-color]___[value:color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)]___[cond:_light",
-      "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/60}]___[cond:_light",
-      "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/50}]___[cond:_dark",
-      "--xy-edge-stroke-width]___[value:3",
-      "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke.selected}]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])",
-      "--xy-edge-stroke-width]___[value:4]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])<___>_whenSelected",
       "transition]___[value:none]___[cond:_reduceGraphics",
       "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
       "strokeOpacity]___[value:0.08",
@@ -637,28 +745,13 @@
       "animationName]___[value:none]___[cond:_smallZoom",
       "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
       "animationName]___[value:none]___[cond:_whenPanning",
-      "--ai-bg]___[value:var(--xy-edge-label-background-color)",
-      "--ai-hover]___[value:color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)",
-      "--ai-size]___[value:var(--ai-size-sm)",
-      "--ai-radius]___[value:var(--mantine-radius-sm)",
-      "translateY]___[value:1px]___[cond:_hover",
-      "scale]___[value:1.15]___[cond:_hover",
-      "translateY]___[value:-1px]___[cond:_active",
-      "scale]___[value:0.9]___[cond:_active",
-      "opacity]___[value:1]___[cond:_whenHovered",
-      "width]___[value:80%]___[cond:& .tabler-icon",
-      "height]___[value:80%]___[cond:& .tabler-icon",
-      "strokeWidth]___[value:2]___[cond:& .tabler-icon",
-      "zIndex]___[value:1",
-      "top]___[value:calc(100% - 30px)",
-      "top]___[value:2",
-      "right]___[value:2",
-      "right]___[value:5px]___[cond:_shapeBrowser",
-      "top]___[value:14px]___[cond:_shapeCylinder",
-      "top]___[value:14px]___[cond:_shapeStorage",
-      "top]___[value:1px]___[cond:_shapeQueue",
-      "right]___[value:12px]___[cond:_shapeQueue",
-      "top]___[value:calc(100% - 4px)]___[cond:_before",
+      "top]___[value:[calc(100% - 30px)]",
+      "right]___[value:[5px]]___[cond:_shapeBrowser",
+      "top]___[value:[14px]]___[cond:_shapeCylinder",
+      "top]___[value:[14px]]___[cond:_shapeStorage",
+      "top]___[value:[1px]]___[cond:_shapeQueue",
+      "right]___[value:3]___[cond:_shapeQueue",
+      "top]___[value:[calc(100% - 4px)]]___[cond:_before",
       "height]___[value:24px]___[cond:_before",
       "background]___[value:[transparent]]___[cond:_before",
       "pointerEvents]___[value:all]___[cond:_before",
@@ -666,17 +759,17 @@
       "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
       "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
       "visibility]___[value:hidden]___[cond:_smallZoom",
-      "stroke]___[value:likec4.palette.loContrast",
+      "stroke]___[value:var(--likec4-palette-loContrast)",
       "strokeWidth]___[value:8",
       "strokeOpacity]___[value:0.8",
-      "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]]___[cond:_light",
+      "stroke]___[value:[color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121))]]___[cond:_light",
       "visibility]___[value:visible]___[cond:_groupFocusVisible",
       "animationStyle]___[value:indicator]___[cond:_whenSelected",
-      "fill]___[value:likec4.palette.fill",
-      "fill]___[value:likec4.palette.stroke",
-      "fill]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
-      "fill]___[value:likec4.palette.fill]___[cond:.shape-svg-multiple &",
-      "stroke]___[value:likec4.palette.stroke",
+      "fill]___[value:var(--likec4-palette-fill)",
+      "fill]___[value:var(--likec4-palette-stroke)",
+      "fill]___[value:[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]",
+      "fill]___[value:var(--likec4-palette-fill)]___[cond:.shape-svg-multiple &",
+      "stroke]___[value:var(--likec4-palette-stroke)",
       "transformOrigin]___[value:50% 50%",
       "transformOrigin]___[value:75% 25%]___[cond:_shapeQueue",
       "transformOrigin]___[value:50% 100%]___[cond:_shapeCylinder",
@@ -688,7 +781,7 @@
       "display]___[value:none]___[cond:_whenFocused",
       "transition]___[value:fill 120ms linear, filter 130ms {easings.inOut}",
       "transitionDelay]___[value:0ms",
-      "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21)) drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1)) ",
+      "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21)) drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1)) ",
       "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond:_whenHovered",
       "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond::where([data-likec4-level='true']) &",
       "filter]___[value:none]___[cond:_whenSelected",
@@ -696,11 +789,10 @@
       "transition]___[value:none]___[cond:_whenPanning",
       "filter]___[value:none]___[cond:_whenPanning",
       "bottom]___[value:0",
-      "padding]___[value:4",
-      "bottom]___[value:5]___[cond:_shapeCylinder",
-      "bottom]___[value:5]___[cond:_shapeStorage",
+      "bottom]___[value:[5px]]___[cond:_shapeCylinder",
+      "bottom]___[value:[5px]]___[cond:_shapeStorage",
       "bottom]___[value:0]___[cond:_shapeQueue",
-      "paddingLeft]___[value:14]___[cond:_shapeQueue",
+      "paddingLeft]___[value:[14px]]___[cond:_shapeQueue",
       "layerStyle]___[value:likec4.tag",
       "maxWidth]___[value:50",
       "height]___[value:5",
@@ -708,79 +800,35 @@
       "borderRadius]___[value:4]___[cond:_whenHovered",
       "transitionDelay]___[value:.08s]___[cond:_whenHovered",
       "fontSize]___[value:lg",
-      "borderRadius]___[value:4",
-      "paddingInline]___[value:6",
-      "paddingBottom]___[value:sm",
+      "borderRadius]___[value:[4px]",
+      "paddingInline]___[value:1.5",
       "translate]___[value:auto",
-      "translateX]___[value:-8",
-      "textStyle]___[value:likec4.node.primary",
-      "flexGrow]___[value:0",
-      "flexShrink]___[value:1",
-      "textStyle]___[value:likec4.node.secondary",
-      "textOverflow]___[value:ellipsis",
-      "display]___[value:none]___[cond:_shapeSizeXs",
-      "fontSize]___[value:calc(var(--likec4-text-size) * 0.635)",
-      "lineHeight]___[value:1.125",
-      "textWrap]___[value:balance",
-      "opacity]___[value:0.92",
-      "display]___[value:none]___[cond:_shapeSizeSm",
-      "flex]___[value:0 0 var(--icon-size)",
-      "height]___[value:var(--icon-size)",
-      "width]___[value:var(--icon-size)",
-      "height]___[value:fit-content",
-      "width]___[value:fit-content",
-      "maxHeight]___[value:100%",
-      "margin]___[value:0 auto",
-      "paddingTop]___[value:var(--likec4-spacing)",
-      "paddingBottom]___[value:var(--likec4-spacing)",
-      "paddingLeft]___[value:calc(var(--likec4-spacing) + 8px)",
-      "paddingRight]___[value:calc(var(--likec4-spacing) + 8px)",
-      "gap]___[value:12px",
-      "paddingLeft]___[value:46px]___[cond:_shapeQueue",
-      "paddingRight]___[value:16px]___[cond:_shapeQueue",
-      "paddingLeft]___[value:46px]___[cond:_shapeMobile",
-      "paddingRight]___[value:16px]___[cond:_shapeMobile",
-      "paddingTop]___[value:30px]___[cond:_shapeCylinder",
-      "paddingTop]___[value:30px]___[cond:_shapeStorage",
-      "paddingTop]___[value:32px]___[cond:_shapeBrowser",
-      "paddingBottom]___[value:28px]___[cond:_shapeBrowser",
-      "--icon-size]___[value:24px]___[cond:_shapeSizeXs",
-      "--icon-size]___[value:36px]___[cond:_shapeSizeSm",
-      "--icon-size]___[value:60px]___[cond:_shapeSizeMd",
-      "--icon-size]___[value:82px]___[cond:_shapeSizeLg",
-      "gap]___[value:16px]___[cond:_shapeSizeLg",
-      "--icon-size]___[value:90px]___[cond:_shapeSizeXl",
-      "gap]___[value:16px]___[cond:_shapeSizeXl",
-      "gap]___[value:16px",
-      "flex]___[value:0 1 auto",
-      "gap]___[value:8px",
-      "minWidth]___[value:calc(50% + var(--icon-size))",
+      "translateX]___[value:[-8px]",
+      "gap]___[value:6px",
       "lineClamp]___[value:2",
       "lineClamp]___[value:3",
       "maxHeight]___[value:8rem",
-      "top]___[value:1",
-      "right]___[value:1",
+      "top]___[value:[1px]",
+      "right]___[value:[1px]",
       "zIndex]___[value:9",
       "offset]___[value:16",
-      "marginTop]___[value:2",
+      "padding]___[value:4",
       "overflowY]___[value:scroll",
       "minWidth]___[value:250px",
       "maxWidth]___[value:min(90vw, 500px)",
-      "fontSize]___[value:xxs",
-      "padding]___[value:2px 4px",
-      "borderRadius]___[value:2",
-      "background]___[value:likec4.palette.fill/30",
+      "padding]___[value:[2px 4px]",
+      "borderRadius]___[value:[2px]",
+      "background]___[value:var(--likec4-palette-fill)/30",
       "lineHeight]___[value:[1.11]",
-      "color]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]]___[cond:_light",
-      "color]___[value:likec4.palette.loContrast]___[cond:_dark",
+      "color]___[value:[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]]___[cond:_light",
+      "color]___[value:var(--likec4-palette-loContrast)]___[cond:_dark",
       "top]___[value:5",
       "right]___[value:6",
       "gap]___[value:3",
-      "stroke]___[value:2.5",
       "width]___[value:xs",
       "mixBlendMode]___[value:normal",
-      "fill]___[value:likec4.relation.stroke",
-      "stroke]___[value:likec4.relation.stroke",
+      "fill]___[value:var(--likec4-palette-relation-stroke)",
+      "stroke]___[value:var(--likec4-palette-relation-stroke)",
       "fillOpacity]___[value:0.75",
       "strokeWidth]___[value:1",
       "cursor]___[value:grab",
@@ -797,42 +845,7 @@
       "cursor]___[value:grabbing",
       "cursor]___[value:grabbing !important]___[cond:& *",
       "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
-      "position]___[value:right-start",
-      "boxShadow]___[value:lg",
-      "mainAxis]___[value:10",
-      "opacity]___[value:0.6",
-      "padding]___[value:8",
-      "paddingTop]___[value:6",
-      "marginBottom]___[value:10",
-      "marginBlock]___[value:10",
-      "paddingTop]___[value:100%",
-      "left]___[value:2",
-      "bottom]___[value:2",
-      "stroke]___[value:1.5",
-      "color]___[value:pink",
-      "background]___[value:mantine.colors.orange.light",
-      "position]___[value:top",
       "position]___[value:top-end",
-      "display]___[value:none]___[cond:_empty",
-      "left]___[value:1rem",
-      "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
-      "--ai-size]___[value:2rem]___[cond:& .action-icon",
-      "width]___[value:65%]___[cond:& .tabler-icon",
-      "height]___[value:65%]___[cond:& .tabler-icon",
-      "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
-      "boxShadow]___[value:none]___[cond:_whenPanning",
-      "flex]___[value:1 1 40%",
-      "padding]___[value:4px 6px",
-      "background]___[value:mantine.colors.gray[2]",
-      "borderColor]___[value:mantine.colors.gray[4]",
-      "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
-      "background]___[value:mantine.colors.gray[3]",
-      "boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
-      "width]___[value:8",
-      "height]___[value:8",
-      "border]___[value:2px solid",
-      "borderColor]___[value:mantine.colors.gray[5]",
-      "transform]___[value:translate(-50%, -50%)",
       "minWidth]___[value:200",
       "maxWidth]___[value:calc(100vw - 16px)",
       "minWidth]___[value:250]___[cond:sm",
@@ -848,8 +861,10 @@
       "height]___[value:sm",
       "paddingBlock]___[value:2",
       "opacity]___[value:0.7",
+      "flex]___[value:0 0 auto",
       "maxHeight]___[value:60",
       "right]___[value:0",
+      "padding]___[value:2",
       "--ai-radius]___[value:0px",
       "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
       "maxWidth]___[value:calc(100vw - 20px)",
@@ -871,16 +886,17 @@
       "--badge-padding-x]___[value:3px",
       "--badge-height]___[value:13.5px",
       "--badge-lh]___[value:1",
-      "--badge-bg]___[value:{colors.likec4.palette.fill}",
-      "--badge-color]___[value:{colors.likec4.palette.hiContrast}",
+      "--badge-bg]___[value:var(--likec4-palette-fill)",
+      "--badge-color]___[value:var(--likec4-palette-hiContrast)",
       "paddingBlock]___[value:sm",
-      "likec4Palette]___[value:primary",
       "flex]___[value:0 0 70px",
       "opacity]___[value:0.25",
       "marginLeft]___[value:2",
-      "bottom]___[value:0.5rem",
-      "gap]___[value:0.4rem",
-      "gap]___[value:0.6rem]___[cond:md",
+      "bottom]___[value:xxs",
+      "padding]___[value:[0px]",
+      "margin]___[value:[0px]",
+      "gap]___[value:[0.4rem]",
+      "gap]___[value:[0.6rem]]___[cond:md",
       "backdropFilter]___[value:blur(8px)",
       "transition]___[value:all 175ms ease-in",
       "transform]___[value:scale(1.1)]___[cond:_hover",
@@ -892,8 +908,6 @@
       "background]___[value:mantine.colors.primary.filledHover/65]___[cond:_hover",
       "background]___[value:mantine.colors.primary.filled/85]___[cond:_light",
       "background]___[value:mantine.colors.primary.filledHover/85]___[cond:_light<___>_hover",
-      "borderColor]___[value:mantine.colors.orange[6]",
-      "borderWidth]___[value:4]___[cond:md",
       "paddingInline]___[value:xl",
       "paddingLeft]___[value:lg",
       "paddingRight]___[value:lg",
@@ -908,113 +922,63 @@
       "position]___[value:left-start",
       "position]___[value:top-start",
       "paddingInline]___[value:5",
+      "paddingBottom]___[value:8",
       "paddingTop]___[value:4",
       "paddingInline]___[value:4px",
       "maxWidth]___[value:220px",
-      "likec4Palette]___[value:amber",
-      "likec4Palette]___[value:blue",
-      "likec4Palette]___[value:gray",
-      "likec4Palette]___[value:slate",
-      "likec4Palette]___[value:green",
-      "likec4Palette]___[value:indigo",
-      "likec4Palette]___[value:muted",
-      "likec4Palette]___[value:red",
-      "likec4Palette]___[value:secondary",
-      "likec4Palette]___[value:sky",
-      "likec4Palette]___[value:amber.1",
-      "likec4Palette]___[value:amber.2",
-      "likec4Palette]___[value:amber.3",
-      "likec4Palette]___[value:amber.4",
-      "likec4Palette]___[value:amber.5",
-      "likec4Palette]___[value:blue.1",
-      "likec4Palette]___[value:blue.2",
-      "likec4Palette]___[value:blue.3",
-      "likec4Palette]___[value:blue.4",
-      "likec4Palette]___[value:blue.5",
-      "likec4Palette]___[value:gray.1",
-      "likec4Palette]___[value:gray.2",
-      "likec4Palette]___[value:gray.3",
-      "likec4Palette]___[value:gray.4",
-      "likec4Palette]___[value:gray.5",
-      "likec4Palette]___[value:slate.1",
-      "likec4Palette]___[value:slate.2",
-      "likec4Palette]___[value:slate.3",
-      "likec4Palette]___[value:slate.4",
-      "likec4Palette]___[value:slate.5",
-      "likec4Palette]___[value:green.1",
-      "likec4Palette]___[value:green.2",
-      "likec4Palette]___[value:green.3",
-      "likec4Palette]___[value:green.4",
-      "likec4Palette]___[value:green.5",
-      "likec4Palette]___[value:indigo.1",
-      "likec4Palette]___[value:indigo.2",
-      "likec4Palette]___[value:indigo.3",
-      "likec4Palette]___[value:indigo.4",
-      "likec4Palette]___[value:indigo.5",
-      "likec4Palette]___[value:muted.1",
-      "likec4Palette]___[value:muted.2",
-      "likec4Palette]___[value:muted.3",
-      "likec4Palette]___[value:muted.4",
-      "likec4Palette]___[value:muted.5",
-      "likec4Palette]___[value:primary.1",
-      "likec4Palette]___[value:primary.2",
-      "likec4Palette]___[value:primary.3",
-      "likec4Palette]___[value:primary.4",
-      "likec4Palette]___[value:primary.5",
-      "likec4Palette]___[value:red.1",
-      "likec4Palette]___[value:red.2",
-      "likec4Palette]___[value:red.3",
-      "likec4Palette]___[value:red.4",
-      "likec4Palette]___[value:red.5",
-      "likec4Palette]___[value:secondary.1",
-      "likec4Palette]___[value:secondary.2",
-      "likec4Palette]___[value:secondary.3",
-      "likec4Palette]___[value:secondary.4",
-      "likec4Palette]___[value:secondary.5",
-      "likec4Palette]___[value:sky.1",
-      "likec4Palette]___[value:sky.2",
-      "likec4Palette]___[value:sky.3",
-      "likec4Palette]___[value:sky.4",
-      "likec4Palette]___[value:sky.5",
-      "likec4RelationPalette]___[value:amber",
-      "likec4RelationPalette]___[value:blue",
-      "likec4RelationPalette]___[value:slate",
-      "likec4RelationPalette]___[value:green",
-      "likec4RelationPalette]___[value:indigo",
-      "likec4RelationPalette]___[value:muted",
-      "likec4RelationPalette]___[value:primary",
-      "likec4RelationPalette]___[value:red",
-      "likec4RelationPalette]___[value:secondary",
-      "likec4RelationPalette]___[value:sky"
+      "textOverflow]___[value:ellipsis"
     ],
     "recipes": {
+      "navigationLink": [
+        "truncateLabel]___[value:false]___[recipe:navigationLink",
+        "truncateLabel]___[value:true]___[recipe:navigationLink",
+        "*]___[value:true]___[recipe:navigationLink",
+        "*]___[value:false]___[recipe:navigationLink"
+      ],
+      "navigationPanelActionIcon": [
+        "variant]___[value:default]___[recipe:navigationPanelActionIcon",
+        "*]___[value:default]___[recipe:navigationPanelActionIcon",
+        "variant]___[value:filled]___[recipe:navigationPanelActionIcon",
+        "*]___[value:filled]___[recipe:navigationPanelActionIcon"
+      ],
       "markdownBlock": [
         "uselikec4palette]___[value:false]___[recipe:markdownBlock",
         "uselikec4palette]___[value:true]___[recipe:markdownBlock",
-        "uselikec4palette]___[value:true]___[cond:_hover]___[recipe:markdownBlock"
+        "*]___[value:true]___[recipe:markdownBlock",
+        "*]___[value:false]___[recipe:markdownBlock"
       ],
       "actionBtn": [
         "size]___[value:md]___[recipe:actionBtn",
         "radius]___[value:md]___[recipe:actionBtn",
         "variant]___[value:filled]___[recipe:actionBtn",
         "variant]___[value:transparent]___[recipe:actionBtn",
-        "size]___[value:md]___[cond:_whenHovered]___[recipe:actionBtn",
-        "size]___[value:md]___[cond:_hover]___[recipe:actionBtn",
-        "reducedGraphics]___[value:md]___[recipe:actionBtn",
-        "radius]___[value:md]___[cond:_whenHovered]___[recipe:actionBtn",
-        "radius]___[value:md]___[cond:_hover]___[recipe:actionBtn",
-        "variant]___[value:transparent]___[cond:_whenHovered]___[recipe:actionBtn",
-        "variant]___[value:transparent]___[cond:_hover]___[recipe:actionBtn",
-        "reducedGraphics]___[value:transparent]___[recipe:actionBtn",
-        "variant]___[value:filled]___[cond:_whenHovered]___[recipe:actionBtn",
-        "variant]___[value:filled]___[cond:_hover]___[recipe:actionBtn",
-        "reducedGraphics]___[value:filled]___[recipe:actionBtn"
+        "*]___[value:md]___[recipe:actionBtn",
+        "*]___[value:transparent]___[recipe:actionBtn",
+        "*]___[value:filled]___[recipe:actionBtn"
+      ],
+      "edgeActionBtn": [],
+      "edgeLabel": [
+        "isStepEdge]___[value:false]___[recipe:edgeLabel",
+        "*]___[value:false]___[recipe:edgeLabel",
+        "isStepEdge]___[value:true]___[recipe:edgeLabel",
+        "*]___[value:true]___[recipe:edgeLabel"
       ],
       "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"
+      ],
+      "elementNodeIcon": [],
+      "elementNodeData": [
+        "hasIcon]___[value:false]___[recipe:elementNodeData",
+        "*]___[value:false]___[recipe:elementNodeData",
+        "hasIcon]___[value:true]___[recipe:elementNodeData",
+        "*]___[value:true]___[recipe:elementNodeData",
+        "hasDescription]___[value:false]___[recipe:elementNodeData",
+        "hasDescription]___[value:true]___[recipe:elementNodeData",
+        "hasTechnology]___[value:false]___[recipe:elementNodeData",
+        "hasTechnology]___[value:true]___[recipe:elementNodeData"
       ]
     }
   }