@likec4/diagram 1.36.1 → 1.37.0

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { vector, VectorImpl } from './vector';
 export type { Vector } from './vector';
-export { bezierControlPoints, bezierPath, centerXYInternalNode, distance, distanceBetweenPoints, isInside, isSamePoint, nodeToRect, stopPropagation, toDomPrecision, } from './xyflow';
+export { bezierControlPoints, bezierPath, centerXYInternalNode, distance, distanceBetweenPoints, isInside, isSamePoint, nodeToRect, stopPropagation, } from './xyflow';
+export { roundDpr } from './roundDpr';

package/dist/utils/roundDpr.d.ts

@@ -0,0 +1 @@
+export declare function roundDpr(v: number): number;

package/dist/utils/roundDpr.js

@@ -0,0 +1,20 @@
+import { clamp } from 'remeda';
+
+function getDevicePixelRatio() {
+  const hasDprProp = typeof window !== "undefined" && typeof window.devicePixelRatio === "number";
+  const dpr = hasDprProp ? window.devicePixelRatio : 1;
+  return clamp(Math.floor(dpr), {
+    min: 1,
+    max: 4
+  });
+}
+let knownDpr;
+function roundDpr(v) {
+  knownDpr ??= getDevicePixelRatio();
+  if (knownDpr < 2) {
+    return Math.round(v);
+  }
+  return Math.round(v * knownDpr) / knownDpr;
+}
+
+export { roundDpr };

package/dist/utils/xyflow.d.ts

@@ -1,6 +1,5 @@
 import { DiagramEdge, NonEmptyArray, Point } from '@likec4/core';
 import { InternalNode, Rect, XYPosition } from '@xyflow/react';
-export declare function toDomPrecision(v: number | null): number;
 export declare function distance(a: XYPosition, b: XYPosition): number;
 export declare const nodeToRect: (nd: InternalNode) => Rect;
 /**

package/dist/utils/xyflow.js

@@ -3,12 +3,6 @@ import { getNodeDimensions } from '@xyflow/system';
 import { Bezier } from 'bezier-js';
 import { isArray } from 'remeda';
 
-function toDomPrecision(v) {
-  if (v === null) {
-    return 0.01;
-  }
-  return Math.round(v * 100) / 100;
-}
 function bezierControlPoints(diagramEdge) {
   let [start, ...bezierPoints] = diagramEdge.points;
   invariant(start, "start should be defined");
@@ -66,4 +60,4 @@ function bezierPath(bezierSpline) {
   return path;
 }
 
-export { bezierControlPoints, bezierPath, centerXYInternalNode, isSamePoint, stopPropagation, toDomPrecision };
+export { bezierControlPoints, bezierPath, centerXYInternalNode, isSamePoint, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.36.1",
+  "version": "1.37.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -68,27 +68,28 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.5",
+    "@floating-ui/dom": "^1.7.3",
     "@mantine/core": "8.2.2",
     "@mantine/hooks": "8.2.2",
     "@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",
-    "khroma": "2.1.0",
+    "@xyflow/react": "12.8.3",
+    "@xyflow/system": "0.0.67",
     "bezier-js": "^6.1.4",
-    "esm-env": "^1.2.2",
     "d3-shape": "^3.2.0",
+    "esm-env": "^1.2.2",
     "fast-equals": "^5.2.2",
-    "motion": "^12.23.11",
+    "khroma": "2.1.0",
+    "motion": "^12.23.12",
     "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.1",
-    "@likec4/core": "1.36.1",
-    "@likec4/styles": "1.36.1"
+    "xstate": "^5.20.2",
+    "@likec4/core": "1.37.0",
+    "@likec4/styles": "1.37.0"
   },
   "peerDependencies": {
     "@pandacss/dev": "^0.54.0",
@@ -118,7 +119,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "3.2.4",
     "wireit": "0.14.12",
-    "@likec4/tsconfig": "1.36.1"
+    "@likec4/tsconfig": "1.37.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -5,12 +5,6 @@
       "background]___[value:dots",
       "background]___[value:transparent",
       "gap]___[value:20",
-      "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",
@@ -38,6 +32,7 @@
       "maxWidth]___[value:500",
       "userSelect]___[value:all",
       "paddingRight]___[value:0",
+      "backgroundColor]___[value:transparent",
       "backgroundColor]___[value:mantine.colors.gray[1]]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.dark[5]]___[cond:_hover<___>_dark",
       "color]___[value:mantine.colors.dimmed]___[cond:&:is([data-position=\"left\"])",
@@ -197,34 +192,64 @@
       "gap]___[value:10px",
       "order]___[value:6",
       "paddingRight]___[value:xs",
-      "display]___[value:flex]___[cond:@likec4-root/sm",
+      "borderBlockEndWidth]___[value:var(--thickness)",
+      "width]___[value:max-content",
+      "cursor]___[value:default",
+      "gap]___[value:3.5",
+      "padding]___[value:4",
+      "paddingTop]___[value:2.5",
+      "--bleed-x]___[value:token(spacing.2, 2)",
+      "--bleed-y]___[value:token(spacing.2, 2)",
+      "marginInline]___[value:calc(var(--bleed-x, 0) * -1)",
+      "marginBlock]___[value:calc(var(--bleed-y, 0) * -1)",
+      "paddingBlock]___[value:2",
+      "paddingInline]___[value:2",
+      "gap]___[value:1",
+      "backgroundColor]___[value:mantine.colors.dark[5]/70]___[cond:_hover<___>_dark",
+      "gap]___[value:0.5",
+      "gap]___[value:2",
+      "flexWrap]___[value:wrap",
+      "opacity]___[value:0.65",
+      "paddingLeft]___[value:2.5",
+      "paddingBlock]___[value:1.5",
+      "borderLeft]___[value:2px dotted",
+      "borderLeftColor]___[value:mantine.colors.gray[3]",
+      "borderLeftColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
+      "display]___[value:inline-block",
+      "fontSize]___[value:xxs",
+      "lineHeight]___[value:[1.11]",
+      "display]___[value:block",
+      "whiteSpace]___[value:nowrap",
+      "padding]___[value:[2px 4px]",
+      "borderRadius]___[value:[2px]",
+      "background]___[value:var(--likec4-palette-fill)/30",
+      "mixBlendMode]___[value:hard-light",
+      "color]___[value:[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]]___[cond:_light",
+      "color]___[value:var(--likec4-palette-loContrast)]___[cond:_dark",
+      "whiteSpaceCollapse]___[value:preserve-breaks",
+      "lineHeight]___[value: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",
+      "overflow]___[value:auto",
+      "overscrollBehavior]___[value:contain",
       "minWidth]___[value:400]___[cond:@/sm",
       "maxWidth]___[value:550]___[cond:@/sm",
       "maxWidth]___[value:700]___[cond:@/lg",
@@ -287,7 +312,6 @@
       "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",
@@ -305,6 +329,7 @@
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
       "border]___[value:none",
       "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) ",
+      "display]___[value:none]___[cond:& .react-flow__attribution",
       "flex]___[value:0",
       "cursor]___[value:move",
       "fontFamily]___[value:likec4.element",
@@ -390,7 +415,6 @@
       "marginTop]___[value:6",
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
-      "borderBlockEndWidth]___[value:var(--thickness)",
       "gap]___[value:[4px 4px]",
       "paddingRight]___[value:xxs",
       "transitionProperty]___[value:all",
@@ -421,8 +445,6 @@
       "stroke]___[value:1.2",
       "offset]___[value:0",
       "paddingBlock]___[value:4",
-      "opacity]___[value:0.65",
-      "display]___[value:inline-block",
       "padding]___[value:[3px 6px]",
       "background]___[value:var(--likec4-palette-fill)/75",
       "lineHeight]___[value:1.2",
@@ -538,7 +560,6 @@
       "containerName]___[value:likec4-tree",
       "containerType]___[value:inline-size",
       "outline]___[value:none !important",
-      "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:0.5]___[cond:@container likec4-tree (max-width: 450px)",
@@ -633,98 +654,20 @@
       "transform]___[value:translateX(-50%)",
       "zIndex]___[value:903",
       "marginTop]___[value:[32px]]___[cond:& + &",
-      "top]___[value:[5px]",
-      "left]___[value:[4px]",
-      "display]___[value:none]___[cond:_smallZoom",
-      "top]___[value:0.5",
-      "opacity]___[value:0.75]___[cond:_whenHovered",
-      "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: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",
-      "transitionDelay]___[value:.2s]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
-      "transitionTimingFunction]___[value:in]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
-      "opacity]___[value:var(--_compound-opacity, 1)]___[cond:&:is([data-compound-transparent])<___>_before",
-      "borderWidth]___[value:calc(var(--_border-width, 2px) - 1px)]___[cond:&:is([data-compound-transparent])<___>_before",
-      "borderRadius]___[value:var(--_border-radius, 4px)",
-      "transition]___[value:all 250ms {easings.inOut}",
-      "borderStyle]___[value:dashed",
-      "borderWidth]___[value:[var(--_border-width, 2px)]",
-      "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, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))]",
-      "strokeWidth]___[value:4",
-      "fill]___[value:[none]",
-      "animationStyle]___[value:indicator",
-      "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]",
-      "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) &",
-      "fontFamily]___[value:likec4.compound",
-      "textTransform]___[value:uppercase",
-      "letterSpacing]___[value:0.2px",
-      "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",
-      "mixBlendMode]___[value:hard-light",
-      "mixBlendMode]___[value:normal]___[cond:_reduceGraphicsOnPan",
-      "filter]___[value:drop-shadow(0 0 3px rgb(0 0 0 / 12%))]___[cond:& svg, & img",
-      "filter]___[value:drop-shadow(0 1px 8px rgb(0 0 0 / 8%))]___[cond:& svg, & img<___>xs",
-      "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, 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",
-      "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",
-      "background]___[value:[var(--xy-edge-label-background-color)]",
-      "color]___[value:[var(--xy-edge-label-color)]",
-      "border]___[value:0px solid transparent",
-      "transform]___[value:var(--edge-translate)",
-      "transition]___[value:all 190ms {easings.inOut}]___[cond:&:is([data-likec4-hovered='true'])",
-      "transform]___[value:var(--edge-translate, translate(0px, 0px)) scale(1.12)]___[cond:&:is([data-likec4-hovered='true'])",
-      "transitionDelay]___[value:100ms]___[cond:&:is([data-likec4-hovered='true'])",
-      "mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
-      "mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
-      "display]___[value:none]___[cond:_reduceGraphicsOnPan",
       "lineClamp]___[value:5",
+      "display]___[value:none]___[cond:_reduceGraphicsOnPan",
+      "display]___[value:none]___[cond:_smallZoom",
+      "fill]___[value:[none]",
       "strokeOpacity]___[value:0",
       "transition]___[value:none]___[cond:_reduceGraphics",
       "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
       "strokeOpacity]___[value:0.08",
-      "transitionProperty]___[value:stroke-width, stroke-opacity",
+      "transitionProperty]___[value:stroke-width, stroke-opacity]___[cond:_noReduceGraphics",
+      "transitionDuration]___[value:fast]___[cond:_noReduceGraphics",
+      "transitionTimingFunction]___[value:inOut]___[cond:_noReduceGraphics",
       "transitionTimingFunction]___[value:out]___[cond:_whenHovered",
       "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
       "strokeOpacity]___[value:0.2]___[cond:_whenHovered",
@@ -735,59 +678,37 @@
       "stroke]___[value:[var(--xy-edge-stroke)]",
       "fill]___[value:[none!]",
       "strokeDashoffset]___[value:10",
+      "animationStyle]___[value:xyedgeAnimated]___[cond:_noReduceGraphics",
+      "animationPlayState]___[value:paused]___[cond:_noReduceGraphics",
       "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
-      "animationStyle]___[value:xyedgeAnimated]___[cond:_whenHovered",
-      "animationDelay]___[value:450ms]___[cond:_whenHovered",
-      "animationStyle]___[value:xyedgeAnimated]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
-      "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
       "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
+      "animationPlayState]___[value:running]___[cond:_whenHovered<___>_noReduceGraphics",
+      "animationDelay]___[value:450ms]___[cond:_whenHovered<___>_noReduceGraphics",
+      "animationPlayState]___[value:running]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
+      "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &<___>_noReduceGraphics",
       "animationPlayState]___[value:paused]___[cond:_whenDimmed",
       "animationName]___[value:none]___[cond:_smallZoom",
       "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
-      "animationName]___[value:none]___[cond:_whenPanning",
+      "animationPlayState]___[value:paused]___[cond:_whenPanning",
       "top]___[value:[calc(100% - 30px)]",
+      "width]___[value:auto",
+      "minHeight]___[value:30px",
+      "top]___[value:0.5",
       "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",
+      "content]___[value:\" \"]___[cond:_before",
       "top]___[value:[calc(100% - 4px)]]___[cond:_before",
+      "left]___[value:0]___[cond:_before",
+      "width]___[value:100%]___[cond:_before",
       "height]___[value:24px]___[cond:_before",
       "background]___[value:[transparent]]___[cond:_before",
       "pointerEvents]___[value:all]___[cond:_before",
       "outline]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
       "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
-      "visibility]___[value:hidden]___[cond:_smallZoom",
-      "stroke]___[value:var(--likec4-palette-loContrast)",
-      "strokeWidth]___[value:8",
-      "strokeOpacity]___[value:0.8",
-      "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: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",
-      "transformOrigin]___[value:50% 100%]___[cond:_shapeStorage",
-      "transform]___[value:translate(14px, 14px) perspective(300px) translateZ(-8px)",
-      "filter]___[value:brightness(0.65) saturate(0.8)",
-      "stroke]___[value:[none]",
-      "display]___[value:none]___[cond:_whenSelected",
-      "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, 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",
-      "filter]___[value:none]___[cond:_smallZoom",
-      "transition]___[value:none]___[cond:_whenPanning",
-      "filter]___[value:none]___[cond:_whenPanning",
       "bottom]___[value:0",
       "bottom]___[value:[5px]]___[cond:_shapeCylinder",
       "bottom]___[value:[5px]]___[cond:_shapeStorage",
@@ -811,21 +732,12 @@
       "top]___[value:[1px]",
       "right]___[value:[1px]",
       "zIndex]___[value:9",
+      "textAlign]___[value:left",
+      "textWrap]___[value:pretty",
+      "lineHeight]___[value:1.25",
+      "--text-fz]___[value:{fontSizes.sm}",
+      "--text-fz]___[value:{fontSizes.md}]___[cond:md",
       "offset]___[value:16",
-      "padding]___[value:4",
-      "overflowY]___[value:scroll",
-      "minWidth]___[value:250px",
-      "maxWidth]___[value:min(90vw, 500px)",
-      "padding]___[value:[2px 4px]",
-      "borderRadius]___[value:[2px]",
-      "background]___[value:var(--likec4-palette-fill)/30",
-      "lineHeight]___[value:[1.11]",
-      "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",
-      "width]___[value:xs",
       "mixBlendMode]___[value:normal",
       "fill]___[value:var(--likec4-palette-relation-stroke)",
       "stroke]___[value:var(--likec4-palette-relation-stroke)",
@@ -833,6 +745,7 @@
       "strokeWidth]___[value:1",
       "cursor]___[value:grab",
       "pointerEvents]___[value:auto",
+      "visibility]___[value:hidden",
       "fillOpacity]___[value:1]___[cond:_hover",
       "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
       "strokeWidth]___[value:10]___[cond:_hover",
@@ -859,7 +772,6 @@
       "padding]___[value:sm",
       "marginBottom]___[value:xs",
       "height]___[value:sm",
-      "paddingBlock]___[value:2",
       "opacity]___[value:0.7",
       "flex]___[value:0 0 auto",
       "maxHeight]___[value:60",
@@ -871,12 +783,14 @@
       "minWidth]___[value:300]___[cond:sm",
       "maxWidth]___[value:65vw]___[cond:sm",
       "maxWidth]___[value:40vw]___[cond:md",
-      "backgroundColor]___[value:transparent",
       "transition]___[value:all 100ms ease-in",
       "transition]___[value:all 120ms ease-out]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
+      "fill]___[value:var(--likec4-palette-fill)",
+      "stroke]___[value:var(--likec4-palette-stroke)",
       "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
+      "letterSpacing]___[value:0.2px",
       "paddingTop]___[value:0",
       "paddingBottom]___[value:0",
       "textTransform]___[value:lowercase",
@@ -912,6 +826,7 @@
       "paddingLeft]___[value:lg",
       "paddingRight]___[value:lg",
       "borderWidth]___[value:3px",
+      "borderStyle]___[value:dashed",
       "strokeWidth]___[value:5",
       "border]___[value:3px dashed",
       "position]___[value:right-end",
@@ -950,19 +865,39 @@
       "actionBtn": [
         "size]___[value:md]___[recipe:actionBtn",
         "radius]___[value:md]___[recipe:actionBtn",
-        "variant]___[value:filled]___[recipe:actionBtn",
         "variant]___[value:transparent]___[recipe:actionBtn",
+        "variant]___[value:filled]___[recipe:actionBtn",
         "*]___[value:md]___[recipe:actionBtn",
         "*]___[value:transparent]___[recipe:actionBtn",
         "*]___[value:filled]___[recipe:actionBtn"
       ],
+      "compoundNode": [
+        "isTransparent]___[value:99]___[recipe:compoundNode",
+        "inverseColor]___[value:60]___[recipe:compoundNode",
+        "borderStyle]___[value:dashed]___[recipe:compoundNode",
+        "borderStyle]___[value:none]___[recipe:compoundNode",
+        "isTransparent]___[value:false]___[recipe:compoundNode",
+        "isTransparent]___[value:true]___[recipe:compoundNode",
+        "inverseColor]___[value:true]___[recipe:compoundNode",
+        "inverseColor]___[value:false]___[recipe:compoundNode",
+        "borderStyle]___[value:solid]___[recipe:compoundNode",
+        "borderStyle]___[value:dotted]___[recipe:compoundNode"
+      ],
       "edgeActionBtn": [],
       "edgeLabel": [
         "isStepEdge]___[value:false]___[recipe:edgeLabel",
+        "cursor]___[value:pointer]___[recipe:edgeLabel",
+        "cursor]___[value:default]___[recipe:edgeLabel",
         "*]___[value:false]___[recipe:edgeLabel",
         "isStepEdge]___[value:true]___[recipe:edgeLabel",
         "*]___[value:true]___[recipe:edgeLabel"
       ],
+      "elementShapeRecipe": [
+        "shapetype]___[value:html]___[recipe:elementShapeRecipe",
+        "shapetype]___[value:svg]___[recipe:elementShapeRecipe",
+        "*]___[value:html]___[recipe:elementShapeRecipe",
+        "*]___[value:svg]___[recipe:elementShapeRecipe"
+      ],
       "likec4tag": [
         "autoTextColor]___[value:false]___[recipe:likec4tag",
         "autoTextColor]___[value:true]___[recipe:likec4tag",

package/src/LikeC4Diagram.props.ts

@@ -17,7 +17,7 @@ export type { CustomNodes, WhereOperator }
 
 export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>
 
-type ElementIconRendererProps = {
+export type ElementIconRendererProps = {
   node: {
     id: string
     title: string
@@ -28,19 +28,19 @@ type ElementIconRendererProps = {
 
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode
 
-export type OnNavigateTo<A extends Any> = (
+export type OnNavigateTo<A extends Any = Any> = (
   to: aux.ViewId<A>,
   // These fields present if navigateTo triggered by a node click
   event?: ReactMouseEvent,
   element?: DiagramNodeWithNavigate<A>,
 ) => void
 
-export type OnNodeClick<A extends Any> = (
+export type OnNodeClick<A extends Any = Any> = (
   node: DiagramNode<A>,
   event: ReactMouseEvent,
 ) => void
 
-export type OnEdgeClick<A extends Any> = (
+export type OnEdgeClick<A extends Any = Any> = (
   edge: DiagramEdge<A>,
   event: ReactMouseEvent,
 ) => void
@@ -106,7 +106,7 @@ export type ViewPadding = PaddingWithUnit | {
   y?: PaddingWithUnit
 }
 
-export interface LikeC4DiagramProperties<A extends aux.Any> {
+export interface LikeC4DiagramProperties<A extends Any = Any> {
   view: LayoutedView<A>
 
   className?: string | undefined

package/src/LikeC4Styles.tsx

@@ -6,6 +6,7 @@ import {
 } from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
 import { mix, scale, toHex, toRgba } from 'khroma'
+import { memo } from 'react'
 import { entries, join, map, pipe, range } from 'remeda'
 import globalsCss from './globals.css?inline'
 import { useLikeC4Specification } from './likec4model'
@@ -88,20 +89,27 @@ function generateCustomColorStyles(customColors: CustomColorDefinitions) {
 export function LikeC4Styles() {
   const nonce = useMantineStyleNonce()?.()
 
-  const customColors = useLikeC4Specification().customColors
+  const { customColors } = useLikeC4Specification()
   const customColorsStyles = customColors ? generateCustomColorStyles(customColors) : ''
 
-  return (
-    <>
-      <style type="text/css" data-likec4-global dangerouslySetInnerHTML={{ __html: globalsCss }} nonce={nonce} />
-      <style type="text/css" data-likec4-colors dangerouslySetInnerHTML={{ __html: builtInColors }} nonce={nonce} />
-      {customColorsStyles && (
-        <style
-          type="text/css"
-          data-likec4-custom-colors
-          dangerouslySetInnerHTML={{ __html: customColorsStyles }}
-          nonce={nonce} />
-      )}
-    </>
-  )
+  return <MemoizedStyles nonce={nonce} customColorsStyles={customColorsStyles} builtInColors={builtInColors} />
 }
+
+/**
+ * @internal This gives a performance boost during development
+ */
+const MemoizedStyles = memo<{ nonce: string | undefined; customColorsStyles: string; builtInColors: string }>((
+  { nonce, customColorsStyles, builtInColors },
+) => (
+  <>
+    <style type="text/css" data-likec4-global dangerouslySetInnerHTML={{ __html: globalsCss }} nonce={nonce} />
+    <style type="text/css" data-likec4-colors dangerouslySetInnerHTML={{ __html: builtInColors }} nonce={nonce} />
+    {customColorsStyles && (
+      <style
+        type="text/css"
+        data-likec4-custom-colors
+        dangerouslySetInnerHTML={{ __html: customColorsStyles }}
+        nonce={nonce} />
+    )}
+  </>
+))

package/src/StaticLikeC4Diagram.tsx

@@ -1,4 +1,5 @@
 import type { Any, UnknownLayouted } from '@likec4/core/types'
+import { cx } from '@likec4/styles/css'
 import { LikeC4Diagram } from './LikeC4Diagram'
 import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
 
@@ -28,12 +29,14 @@ export function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
   background = 'transparent',
+  className,
   ...rest
 }: StaticLikeC4DiagramProps<A>) {
   return (
     <LikeC4Diagram
       view={view}
       readonly
+      className={cx(className, 'likec4-static-view')}
       fitView={fitView}
       fitViewPadding={fitViewPadding}
       pannable={false}