@likec4/diagram 1.31.0 → 1.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.31.0",
+  "version": "1.32.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -67,14 +67,14 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/core": "8.0.1",
-    "@mantine/hooks": "8.0.1",
+    "@mantine/core": "8.1.0",
+    "@mantine/hooks": "8.1.0",
     "@nanostores/react": "1.0.0",
     "@react-hookz/web": "^25.1.1",
     "@tabler/icons-react": "3.31.0",
-    "@xstate/react": "^5.0.3",
-    "@xyflow/react": "^12.6.0",
-    "@xyflow/system": "^0.0.57",
+    "@xstate/react": "^5.0.4",
+    "@xyflow/react": "^12.6.4",
+    "@xyflow/system": "^0.0.61",
     "bezier-js": "^6.1.4",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.2.2",
@@ -82,12 +82,12 @@
     "nanostores": "1.0.1",
     "react-error-boundary": "^5.0.0",
     "react-shadow": "^20.6.0",
-    "remeda": "^2.21.3",
-    "type-fest": "^4.40.0",
-    "xstate": "^5.19.2",
-    "@likec4/core": "1.31.0",
-    "@likec4/style-preset": "1.31.0",
-    "@likec4/styles": "1.31.0"
+    "remeda": "^2.23.0",
+    "type-fest": "^4.41.0",
+    "xstate": "^5.19.3",
+    "@likec4/styles": "1.32.1",
+    "@likec4/core": "1.32.1",
+    "@likec4/style-preset": "1.32.1"
   },
   "peerDependencies": {
     "react": "^18.x || ^19.x",
@@ -98,19 +98,19 @@
     "@statelyai/inspect": "^0.4.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.3",
-    "@types/node": "^20.17.30",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
+    "@types/node": "~20.19.0",
     "@vitejs/plugin-react": "^4.5.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.1.2",
+    "vitest": "3.2.3",
     "wireit": "^0.14.12",
-    "@likec4/tsconfig": "1.31.0"
+    "@likec4/tsconfig": "1.32.1"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",
@@ -118,6 +118,7 @@
     "build:bundle": "vite build -m bundle",
     "build": "echo \"use pnpm turbo run build\" || true",
     "pack": "pnpm pack",
-    "test": "vitest run --no-isolate"
+    "test": "vitest run --no-isolate",
+    "clean": "pnpm rimraf dist lib bundle"
   }
 }

package/panda.buildinfo.json

@@ -212,8 +212,10 @@
       "width]___[value:80%]___[cond:& .tabler-icon",
       "height]___[value:80%]___[cond:& .tabler-icon",
       "strokeWidth]___[value:2]___[cond:& .tabler-icon",
-      "top]___[value:calc(100% - 28px)",
-      "minHeight]___[value:28px",
+      "zIndex]___[value:1",
+      "top]___[value:calc(100% - 30px)",
+      "transform]___[value:translateX(-50%)",
+      "left]___[value:50%",
       "top]___[value:2",
       "right]___[value:2",
       "right]___[value:5px]___[cond:_shapeBrowser",
@@ -258,6 +260,31 @@
       "filter]___[value:none]___[cond:_smallZoom",
       "transition]___[value:none]___[cond:_whenPanning",
       "filter]___[value:none]___[cond:_whenPanning",
+      "position]___[value:bottom-start",
+      "mainAxis]___[value:8",
+      "alignItems]___[value:flex-end",
+      "gap]___[value:4",
+      "justifyItems]___[value:stretch",
+      "bottom]___[value:0",
+      "padding]___[value:4",
+      "bottom]___[value:5]___[cond:_shapeCylinder",
+      "bottom]___[value:5]___[cond:_shapeStorage",
+      "bottom]___[value:0]___[cond:_shapeQueue",
+      "paddingLeft]___[value:14]___[cond:_shapeQueue",
+      "layerStyle]___[value:likec4.tag",
+      "maxWidth]___[value:50",
+      "height]___[value:5",
+      "height]___[value:12]___[cond:_whenHovered",
+      "borderRadius]___[value:4]___[cond:_whenHovered",
+      "transitionDelay]___[value:.08s]___[cond:_whenHovered",
+      "border]___[value:none",
+      "userSelect]___[value:none",
+      "fontSize]___[value:lg",
+      "borderRadius]___[value:4",
+      "paddingInline]___[value:6",
+      "flexWrap]___[value:wrap",
+      "paddingBottom]___[value:sm",
+      "gap]___[value:sm",
       "textStyle]___[value:likec4.node.primary",
       "color]___[value:likec4.palette.hiContrast",
       "flex]___[value:0 1 auto",
@@ -310,6 +337,11 @@
       "color]___[value:gray",
       "--mantine-cursor-pointer]___[value:pointer",
       "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
+      "position]___[value:fixed",
+      "color]___[value:red",
+      "padding]___[value:xl",
+      "gap]___[value:xs",
+      "marginTop]___[value:xl",
       "gap]___[value:micro",
       "justifyContent]___[value:stretch",
       "transitionProperty]___[value:all",
@@ -362,7 +394,6 @@
       "backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
       "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
       "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
-      "gap]___[value:xs",
       "top]___[value:1",
       "right]___[value:1",
       "zIndex]___[value:9",
@@ -370,12 +401,10 @@
       "padding]___[value:xs",
       "marginInline]___[value:auto",
       "marginTop]___[value:2",
-      "padding]___[value:4",
       "gap]___[value:0",
       "overflowY]___[value:scroll",
       "minWidth]___[value:250px",
       "maxWidth]___[value:min(90vw, 500px)",
-      "gap]___[value:4",
       "display]___[value:block",
       "fontSize]___[value:xxs",
       "whiteSpace]___[value:nowrap",
@@ -387,7 +416,6 @@
       "color]___[value:likec4.palette.loContrast]___[cond:_dark",
       "fontSize]___[value:xs",
       "opacity]___[value:0.65",
-      "position]___[value:bottom-start",
       "top]___[value:5",
       "right]___[value:6",
       "gap]___[value:10px",
@@ -421,7 +449,6 @@
       "borderBlockEndWidth]___[value:var(--thickness)",
       "gap]___[value:2",
       "justifyContent]___[value:flex-start",
-      "flexWrap]___[value:wrap",
       "gap]___[value:6",
       "marginTop]___[value:sm",
       "color]___[value:dark",
@@ -466,7 +493,6 @@
       "boxShadow]___[value:none]___[cond:_whenPanning",
       "flex]___[value:1 1 40%",
       "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",
@@ -497,13 +523,10 @@
       "opacity]___[value:0.7",
       "marginBottom]___[value:sm",
       "maxHeight]___[value:42",
-      "gap]___[value:sm",
       "display]___[value:inline-block",
-      "bottom]___[value:0",
       "right]___[value:0",
       "--ai-radius]___[value:0px",
       "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
-      "userSelect]___[value:none",
       "maxWidth]___[value:calc(100vw - 20px)",
       "minWidth]___[value:300]___[cond:sm",
       "maxWidth]___[value:65vw]___[cond:sm",
@@ -533,126 +556,6 @@
       "flex]___[value:0 0 70px",
       "opacity]___[value:0.25",
       "marginLeft]___[value:2",
-      "outline]___[value:none",
-      "marginBottom]___[value:8px",
-      "containerName]___[value:likec4-tree",
-      "containerType]___[value:inline-size",
-      "alignItems]___[value:baseline",
-      "outline]___[value:none !important",
-      "marginTop]___[value:8px",
-      "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)",
-      "lineHeight]___[value:1.3",
-      "padding]___[value:1px 5px",
-      "background]___[value:mantine.colors.dark[9]/30",
-      "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",
-      "paddingInline]___[value:4",
-      "paddingInline]___[value:6]___[cond:md",
-      "paddingInline]___[value:8]___[cond:lg",
-      "stroke]___[value:3.5",
-      "lineClamp]___[value:1",
-      "position]___[value:fixed",
-      "zIndex]___[value:900",
-      "inset]___[value:0px",
-      "backgroundColor]___[value:[rgb(34 34 34 / 0.95)]",
-      "backdropFilter]___[value:auto",
-      "backdropBlur]___[value:10px",
-      "backgroundColor]___[value:[rgb(255 255 255 / 0.92 )]]___[cond:_light",
-      "containerName]___[value:likec4-search",
-      "containerType]___[value:size",
-      "zIndex]___[value:901",
-      "maxHeight]___[value:100vh",
-      "gap]___[value:md",
-      "paddingTop]___[value:32px",
-      "paddingLeft]___[value:16px",
-      "paddingRight]___[value:16px",
-      "background]___[value:mantine.colors.gray[3]/55]___[cond:_focusWithin",
-      "background]___[value:mantine.colors.dark[4]/55]___[cond:_focusWithin<___>_dark",
-      "inset]___[value:0",
-      "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
-      "zIndex]___[value:902",
-      "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
-      "top]___[value:2rem",
-      "left]___[value:50%",
-      "maxWidth]___[value:600px",
-      "minWidth]___[value:200px",
-      "transform]___[value:translateX(-50%)",
-      "zIndex]___[value:903",
-      "marginTop]___[value:32px]___[cond:& + &",
-      "height]___[value:100cqh]___[cond:xs",
-      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
-      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
-      "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
-      "paddingInline]___[value:sm",
-      "paddingBlock]___[value:md",
-      "display]___[value:grid",
-      "order]___[value:6",
-      "order]___[value:2",
-      "containerName]___[value:likec4-search-elements",
-      "flexGrow]___[value:1",
-      "paddingRight]___[value:xs",
-      "opacity]___[value:0.5",
-      "marginRight]___[value:4",
-      "marginRight]___[value:1",
-      "mainAxis]___[value:4",
-      "crossAxis]___[value:50",
-      "gap]___[value:8",
-      "srOnly]___[value:true",
-      "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
-      "marginTop]___[value:4px",
-      "fontSize]___[value:13px",
-      "lineHeight]___[value:1.4",
-      "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
-      "background]___[value:mantine.colors.primary[8]",
-      "borderColor]___[value:mantine.colors.primary[9]",
-      "background]___[value:mantine.colors.body",
-      "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 &",
-      "background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "borderColor]___[value:transparent]___[cond:_dark",
-      "background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
-      "background]___[value:mantine.colors.white/80]___[cond:_light",
-      "borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
-      "backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
-      "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
-      "color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
-      "color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "color]___[value:mantine.colors.gray[6]]___[cond:_light",
-      "color]___[value:mantine.colors.primary[3]]___[cond:_light<___>_groupHover",
-      "color]___[value:mantine.colors.primary[3]]___[cond:_light<___>_groupFocus",
-      "color]___[value:mantine.colors.primary[3]]___[cond:_light<___>.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "flex]___[value:0 0 var(--likec4-icon-size, 24px)",
-      "height]___[value:var(--likec4-icon-size, 24px)",
-      "width]___[value:var(--likec4-icon-size, 24px)",
-      "--ti-size]___[value:var(--likec4-icon-size, 24px)",
-      "strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
-      "fontSize]___[value:16px",
-      "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.primary[1]]___[cond:_groupFocus",
-      "color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
-      "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
-      "fontSize]___[value:12px",
-      "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
-      "border]___[value:2px dashed",
-      "borderRadius]___[value:md",
-      "fontSize]___[value:md",
-      "paddingBlock]___[value:xl",
       "bottom]___[value:0.5rem",
       "gap]___[value:0.4rem",
       "gap]___[value:0.6rem]___[cond:md",
@@ -673,13 +576,12 @@
       "paddingLeft]___[value:lg",
       "paddingInline]___[value:md",
       "paddingRight]___[value:lg",
-      "color]___[value:red",
-      "padding]___[value:xl",
-      "marginTop]___[value:xl",
       "boxSizing]___[value:border-box",
+      "inset]___[value:0",
       "width]___[value:100vw",
       "height]___[value:100vh",
       "maxWidth]___[value:100vw",
+      "maxHeight]___[value:100vh",
       "background]___[value:[transparent]",
       "backdropFilter]___[value:auto]___[cond:_backdrop",
       "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
@@ -687,7 +589,6 @@
       "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) ",
       "cursor]___[value:move",
       "fontFamily]___[value:likec4.element",
@@ -704,6 +605,7 @@
       "maxHeight]___[value:100%]___[cond:& :where(svg, img)",
       "pointerEvents]___[value:none]___[cond:& :where(svg, img)",
       "filter]___[value: drop-shadow(0 0 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 8px rgb(0 0 0 / 5%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 2%)) ]___[cond:& :where(svg, img)",
+      "background]___[value:mantine.colors.body",
       "padding]___[value:10px 8px",
       "border]___[value:1px dashed",
       "--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
@@ -720,8 +622,10 @@
       "transitionTimingFunction]___[value:out]___[cond:&:hover > *",
       "transform]___[value:translateX(1.6px)]___[cond:&:hover > *",
       "color]___[value:[var(--view-title-color, {colors.mantine.colors.gray[7]})]",
+      "lineHeight]___[value:1.4",
       "background]___[value:mantine.colors.gray[1]",
       "padding]___[value:4px",
+      "flexGrow]___[value:1",
       "padding]___[value:6px 8px",
       "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
       "transition]___[value:none]___[cond:&[data-active]",
@@ -738,10 +642,11 @@
       "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
       "paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
       "paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
+      "display]___[value:grid",
       "gridTemplateColumns]___[value:min-content 1fr",
       "gridAutoRows]___[value:min-content max-content",
       "gap]___[value:[20px 16px]",
-      "justifyItems]___[value:stretch",
+      "alignItems]___[value:baseline",
       "justifySelf]___[value:end",
       "width]___[value:14px",
       "height]___[value:14px",
@@ -755,6 +660,7 @@
       "cursor]___[value:se-resize",
       "borderWidth]___[value:4px]___[cond:_hover",
       "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
+      "lineClamp]___[value:1",
       "marginTop]___[value:6",
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
@@ -795,12 +701,13 @@
       "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",
       "background]___[value:mantine.colors.dark[7]",
       "color]___[value:mantine.colors.defaultColor",
       "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
       "background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
-      "alignItems]___[value:flex-end",
+      "gap]___[value:8",
       "marginBottom]___[value:4",
       "top]___[value:12",
       "right]___[value:12",
@@ -810,22 +717,18 @@
       "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
       "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
       "background]___[value:mantine.colors.defaultBorder/50",
+      "outline]___[value:none",
       "borderRadius]___[value:var(--_border-radius)",
       "--_blur]___[value:0px",
       "--_level]___[value:0",
       "--_offset]___[value:0px",
       "--_inset]___[value:calc((1 + var(--_level) * 0.75) * var(--_offset))",
       "--_opacity]___[value:0%",
+      "--_border-radius]___[value:0px",
       "cursor]___[value:zoom-out]___[cond:_backdrop",
-      "backdropFilter]___[value:blur(var(--_blur))]___[cond:_backdrop",
-      "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity))]]___[cond:_backdrop<___>_dark",
-      "backgroundColor]___[value:[rgb(15 15 15/ var(--_opacity))]]___[cond:_backdrop<___>_light",
-      "--_border-radius]___[value:0px]___[cond:smDown",
-      "border]___[value:none]___[cond:smDown",
-      "inset]___[value:0]___[cond:smDown",
-      "padding]___[value:0]___[cond:smDown",
-      "width]___[value:100vw]___[cond:smDown",
-      "height]___[value:100vh]___[cond:smDown",
+      "containerName]___[value:overlay-dialog",
+      "containerType]___[value:size",
+      "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",
@@ -835,8 +738,10 @@
       "--_offset]___[value:1rem]___[cond:md",
       "--_offset]___[value:2rem]___[cond:lg",
       "--_offset]___[value:4rem]___[cond:xl",
-      "containerName]___[value:overlay-dialog",
-      "border]___[value:0 solid transparent",
+      "display]___[value:none]___[cond:_backdrop",
+      "backdropFilter]___[value:blur(var(--_blur))]___[cond:_backdrop",
+      "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity))]]___[cond:_backdrop<___>_dark",
+      "backgroundColor]___[value:[rgb(15 15 15/ var(--_opacity))]]___[cond:_backdrop<___>_light",
       "borderRadius]___[value:calc(var(--_border-radius) - 2px)]___[cond:sm",
       "position]___[value:top-right",
       "position]___[value:top-left",
@@ -873,13 +778,125 @@
       "maxHeight]___[value:70vh",
       "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
       "borderWidth]___[value:3px",
+      "borderRadius]___[value:md",
       "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
       "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
       "paddingBlock]___[value:3",
+      "stroke]___[value:3.5",
       "flex]___[value:1 0 auto",
       "strokeWidth]___[value:5",
       "border]___[value:3px dashed",
+      "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)",
+      "paddingTop]___[value:20",
+      "paddingLeft]___[value:16",
+      "paddingRight]___[value:16",
+      "height]___[value:100cqh]___[cond:xs",
+      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
+      "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
+      "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
+      "containerName]___[value:likec4-search-elements",
+      "paddingInline]___[value:sm",
+      "order]___[value:6",
+      "paddingRight]___[value:xs",
+      "marginBottom]___[value:8px",
+      "containerName]___[value:likec4-tree",
+      "containerType]___[value:inline-size",
+      "outline]___[value:none !important",
+      "marginTop]___[value:8px",
+      "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)",
+      "lineHeight]___[value:1.3",
+      "background]___[value:mantine.colors.dark[9]/30",
+      "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",
+      "paddingInline]___[value:4",
+      "paddingInline]___[value:6]___[cond:md",
+      "paddingInline]___[value:8]___[cond:lg",
+      "paddingBlock]___[value:md",
+      "order]___[value:2",
+      "gap]___[value:md",
+      "paddingLeft]___[value:48",
+      "opacity]___[value:0.3",
+      "grayscale]___[value:0",
+      "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",
+      "opacity]___[value:0.5",
+      "marginRight]___[value:1",
+      "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",
+      "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 &",
+      "background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "borderColor]___[value:transparent]___[cond:_dark",
+      "background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
+      "background]___[value:mantine.colors.white/80]___[cond:_light",
+      "borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
+      "backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
+      "color]___[value:mantine.colors.gray[5]]___[cond:_light",
+      "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
+      "color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
+      "color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
+      "flex]___[value:0 0 var(--likec4-icon-size, 24px)",
+      "height]___[value:var(--likec4-icon-size, 24px)",
+      "width]___[value:var(--likec4-icon-size, 24px)",
+      "--ti-size]___[value:var(--likec4-icon-size, 24px)",
+      "strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
+      "fontSize]___[value:16px",
+      "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:mantine.colors.primary[1]]___[cond:_groupFocus",
+      "color]___[value:mantine.colors.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: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",
+      "background]___[value:mantine.colors.gray[3]/35]___[cond:_groupHover",
+      "background]___[value:mantine.colors.dark[5]/35]___[cond:_groupHover<___>_dark",
+      "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
+      "zIndex]___[value:902",
+      "backdropBlur]___[value:10px",
+      "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
+      "top]___[value:2rem",
+      "maxWidth]___[value:600px",
+      "minWidth]___[value:200px",
+      "zIndex]___[value:903",
+      "marginTop]___[value:32px]___[cond:& + &",
       "likec4Palette]___[value:amber",
       "likec4Palette]___[value:blue",
       "likec4Palette]___[value:gray",
@@ -973,6 +990,12 @@
         "variant]___[value:filled]___[cond:_whenHovered]___[recipe:actionBtn",
         "variant]___[value:filled]___[cond:_hover]___[recipe:actionBtn",
         "reducedGraphics]___[value:filled]___[recipe:actionBtn"
+      ],
+      "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"
       ]
     }
   }

package/src/LikeC4CustomColors.tsx

@@ -6,9 +6,10 @@ import {
   nonexhaustive,
 } from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
-import { deepEqual } from 'fast-equals'
-import { memo } from 'react'
-import { entries } from 'remeda'
+import { memo, useState } from 'react'
+import { entries, isEmpty } from 'remeda'
+import { useUpdateEffect } from './hooks'
+import { useLikeC4Specification } from './likec4model/useLikeC4Model'
 
 interface LikeC4CustomColorsProperties {
   customColors: CustomColorDefinitions
@@ -54,17 +55,31 @@ function toStyle(name: String, colors: ThemeColorValues): String {
   `
 }
 
-export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
-  const styles = entries(customColors)
+function generateCustomColorStyles(customColors: CustomColorDefinitions) {
+  return entries(customColors)
     .map(([name, color]) => toStyle(name, color))
     .join('\n')
+    .trim()
+}
+
+export const LikeC4CustomColors = memo(() => {
+  const customColors = useLikeC4Specification().customColors ?? {}
+  const [styles, setStyles] = useState(() => generateCustomColorStyles(customColors))
+
+  useUpdateEffect(() => {
+    setStyles(generateCustomColorStyles(customColors))
+  }, [customColors])
 
   const nonce = useMantineStyleNonce()?.()
 
+  if (isEmpty(customColors)) {
+    return null
+  }
+
   return (
     <>
       <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} nonce={nonce} />
     </>
   )
-}, deepEqual)
+})
 LikeC4CustomColors.displayName = 'LikeC4CustomColors'