@likec4/diagram 1.34.1 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -67,25 +67,26 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.5",
-    "@mantine/core": "8.1.2",
-    "@mantine/hooks": "8.1.2",
+    "@mantine/core": "8.2.1",
+    "@mantine/hooks": "8.2.1",
     "@nanostores/react": "1.0.0",
     "@react-hookz/web": "^25.1.1",
     "@xstate/react": "^5.0.5",
-    "@xyflow/react": "^12.6.4",
-    "@xyflow/system": "^0.0.61",
+    "@xyflow/react": "12.6.4",
+    "@xyflow/system": "0.0.61",
     "bezier-js": "^6.1.4",
+    "esm-env": "^1.2.2",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.2.2",
-    "motion": "^12.12.2",
+    "motion": "^12.23.11",
     "nanostores": "1.0.1",
     "react-error-boundary": "^6.0.0",
     "react-shadow": "^20.6.0",
     "remeda": "^2.23.1",
     "type-fest": "^4.41.0",
     "xstate": "^5.20.0",
-    "@likec4/core": "1.34.1",
-    "@likec4/styles": "1.34.1"
+    "@likec4/core": "1.35.0",
+    "@likec4/styles": "1.35.0"
   },
   "peerDependencies": {
     "@pandacss/dev": "^0.54.0",
@@ -98,24 +99,24 @@
     }
   },
   "devDependencies": {
-    "@tabler/icons-react": "3.31.0",
     "@pandacss/dev": "^0.54.0",
     "@statelyai/inspect": "^0.4.0",
+    "@tabler/icons-react": "3.34.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
-    "@types/node": "~20.19.1",
+    "@types/node": "~20.19.2",
+    "@types/react": "19.1.9",
+    "@types/react-dom": "19.1.7",
     "@vitejs/plugin-react": "^4.6.0",
     "postcss": "8.5.5",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "typescript": "5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "3.2.4",
     "wireit": "0.14.12",
-    "@likec4/tsconfig": "1.34.1"
+    "@likec4/tsconfig": "1.35.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -93,14 +93,85 @@
       "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
       "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
       "stroke]___[value:2",
+      "gap]___[value:sm",
+      "margin]___[value:sm",
+      "alignItems]___[value:flex-start",
+      "pointerEvents]___[value:none",
+      "maxWidth]___[value:calc(100vw - 2 * {spacing.sm})",
+      "maxWidth]___[value:calc(100cqw - 2 * {spacing.sm})]___[cond:xs",
+      "width]___[value:max-content",
+      "margin]___[value:0]___[cond:smDown",
+      "width]___[value:100%]___[cond:smDown",
+      "gap]___[value:2xs]___[cond:smDown",
+      "maxWidth]___[value:calc(100vw)]___[cond:smDown",
+      "maxWidth]___[value:calc(100cqw)]___[cond:smDown<___>xs",
+      "alignItems]___[value:stretch",
+      "flexDirection]___[value:column",
+      "mainAxis]___[value:4",
+      "boxShadow]___[value:md",
+      "position]___[value:bottom-start",
+      "flexDirection]___[value:row",
+      "layerStyle]___[value:likec4.panel",
+      "position]___[value:relative",
+      "paddingRight]___[value:md",
+      "pointerEvents]___[value:all",
+      "maxWidth]___[value:200px",
+      "gap]___[value:3",
+      "flexShrink]___[value:1",
+      "flexGrow]___[value:1",
+      "marginRight]___[value:md]___[cond:md",
+      "gap]___[value:1",
+      "display]___[value:none]___[cond:_empty",
+      "layerStyle]___[value:likec4.dropdown",
+      "gap]___[value:4",
+      "maxWidth]___[value:calc(100vw - 20px)",
+      "maxWidth]___[value:calc(100cqw - 20px)]___[cond:xs",
+      "maxWidth]___[value:70vw",
+      "maxWidth]___[value:calc(100cqw - 250px)]___[cond:xs",
+      "maxHeight]___[value:70vh",
+      "maxHeight]___[value:calc(100cqh - 250px)]___[cond:xs",
+      "color]___[value:[inherit!]]___[cond:_groupFocus",
+      "transition]___[value:none]___[cond:_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:_dark",
+      "opacity]___[value:0.7]___[cond:_groupHover",
+      "opacity]___[value:0.7]___[cond:_groupActive",
+      "maxHeight]___[value:calc(100vh - 50px)",
+      "maxHeight]___[value:calc(100cqh - 50px)]___[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",
+      "gap]___[value:2xs",
+      "paddingInline]___[value:xs",
+      "paddingBlock]___[value:2xs",
+      "backgroundColor]___[value:mantine.colors.gray[1]]___[cond:_hover",
+      "backgroundColor]___[value:mantine.colors.dark[5]]___[cond:_hover<___>_dark",
+      "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)",
+      "paddingBottom]___[value:4",
+      "color]___[value:mantine.colors.gray[5]",
+      "color]___[value:mantine.colors.dark[3]]___[cond:_dark",
+      "alignSelf]___[value:stretch",
+      "color]___[value:mantine.colors.text/90",
+      "color]___[value:mantine.colors.text]___[cond:_hover",
+      "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",
@@ -112,15 +183,79 @@
       "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",
-      "boxSizing]___[value:border-box",
+      "display]___[value:none]___[cond:mdDown",
+      "userSelect]___[value:none",
+      "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",
+      "display]___[value:none]___[cond:smDown",
+      "stroke]___[value:2.5",
+      "opacity]___[value:0.8",
+      "whiteSpace]___[value:nowrap",
+      "gap]___[value:2",
+      "paddingInline]___[value:2xs",
+      "position]___[value:right-start",
+      "boxShadow]___[value:lg",
+      "mainAxis]___[value:10",
+      "opacity]___[value:0.6",
+      "opacity]___[value:1",
+      "padding]___[value:8",
+      "paddingTop]___[value:6",
+      "marginBottom]___[value:10",
+      "marginBlock]___[value:10",
+      "paddingTop]___[value:100%",
+      "left]___[value:2",
+      "bottom]___[value:2",
+      "flexWrap]___[value:wrap",
+      "padding]___[value:4",
+      "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",
+      "crossAxis]___[value:-2",
+      "padding]___[value:2",
+      "stroke]___[value:1.2",
+      "left]___[value:1rem",
       "margin]___[value:0",
+      "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%)",
+      "marginRight]___[value:sm",
+      "borderColor]___[value:mantine.colors.orange[6]",
+      "borderWidth]___[value:4]___[cond:md",
+      "display]___[value:block",
+      "display]___[value:none",
+      "fontSize]___[value:xxs",
+      "alignItems]___[value:baseline",
+      "boxSizing]___[value:border-box",
       "inset]___[value:0",
       "width]___[value:100vw",
       "height]___[value:100vh",
@@ -129,14 +264,12 @@
       "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) ",
       "cursor]___[value:move",
-      "display]___[value:block",
       "fontFamily]___[value:likec4.element",
       "fontOpticalSizing]___[value:auto",
       "fontStyle]___[value:normal",
@@ -177,7 +310,6 @@
       "flexWrap]___[value:nowrap",
       "gap]___[value:6px",
       "padding]___[value:4px",
-      "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
       "fontSize]___[value:xs",
       "padding]___[value:6px 8px",
       "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
@@ -189,7 +321,6 @@
       "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))",
       "width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
@@ -199,11 +330,9 @@
       "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",
@@ -216,10 +345,8 @@
       "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",
@@ -230,14 +357,10 @@
       "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)",
       "overscrollBehavior]___[value:none",
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
@@ -255,15 +378,11 @@
       "transition]___[value:fast]___[cond:& .tabler-icon",
       "width]___[value:90%]___[cond:& .tabler-icon",
       "opacity]___[value:0.65]___[cond:& .tabler-icon",
-      "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",
       "lineHeight]___[value:1.2",
       "color]___[value:likec4.palette.hiContrast",
@@ -288,7 +407,6 @@
       "fontSize]___[value:xl",
       "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 +414,6 @@
       "alignItems]___[value:flex-end",
       "gap]___[value:8",
       "marginBottom]___[value:4",
-      "marginTop]___[value:xs",
       "top]___[value:12",
       "right]___[value:12",
       "boxShadow]___[value:none",
@@ -307,7 +424,6 @@
       "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",
@@ -368,14 +484,12 @@
       "gap]___[value:0",
       "gap]___[value:10px 12px",
       "justifyItems]___[value:start",
-      "maxHeight]___[value:70vh",
       "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
       "padding]___[value:xs",
       "color]___[value:dark",
       "backgroundColor]___[value: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",
@@ -387,7 +501,6 @@
       "outline]___[value:none !important",
       "gap]___[value:4px",
       "marginTop]___[value:8px",
-      "color]___[value:mantine.colors.dimmed",
       "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)",
@@ -409,9 +522,6 @@
       "order]___[value:2",
       "gap]___[value:md",
       "paddingLeft]___[value:48",
-      "flexDirection]___[value:row",
-      "opacity]___[value:1",
-      "opacity]___[value:0.3",
       "grayscale]___[value:0",
       "grayscale]___[value:0.9",
       "filter]___[value:auto",
@@ -421,8 +531,6 @@
       "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",
@@ -436,7 +544,6 @@
       "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 &",
@@ -499,7 +606,6 @@
       "right]___[value:[2px]",
       "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",
@@ -587,7 +693,6 @@
       "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",
@@ -649,7 +754,6 @@
       "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",
@@ -696,7 +800,6 @@
       "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:0]___[cond:_shapeQueue",
@@ -713,48 +816,6 @@
       "paddingBottom]___[value:sm",
       "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))",
       "lineClamp]___[value:2",
       "lineClamp]___[value:3",
       "maxHeight]___[value:8rem",
@@ -762,11 +823,9 @@
       "right]___[value:1",
       "zIndex]___[value:9",
       "offset]___[value:16",
-      "marginTop]___[value:2",
       "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",
@@ -775,8 +834,6 @@
       "color]___[value: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",
@@ -797,42 +854,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",
@@ -852,7 +874,6 @@
       "right]___[value:0",
       "--ai-radius]___[value:0px",
       "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
-      "maxWidth]___[value:calc(100vw - 20px)",
       "minWidth]___[value:300]___[cond:sm",
       "maxWidth]___[value:65vw]___[cond:sm",
       "maxWidth]___[value:40vw]___[cond:md",
@@ -892,8 +913,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",
@@ -911,6 +930,7 @@
       "paddingTop]___[value:4",
       "paddingInline]___[value:4px",
       "maxWidth]___[value:220px",
+      "textOverflow]___[value:ellipsis",
       "likec4Palette]___[value:amber",
       "likec4Palette]___[value:blue",
       "likec4Palette]___[value:gray",
@@ -988,33 +1008,49 @@
       "likec4RelationPalette]___[value:sky"
     ],
     "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"
       ],
       "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"
       ]
     }
   }