@likec4/diagram 1.5.0 → 1.6.1

package/dist/state/DiagramContext.d.ts

@@ -14,10 +14,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
     nodesDraggable: boolean;
     nodesSelectable: boolean;
     experimentalEdgeEditing: boolean;
+    renderIcon: import('..').ElementIconRenderer | null;
     getContainer: () => HTMLDivElement | null;
     viewSyncDebounceTimeout: number | null;
     xyflow: import('..').XYFlowInstance;
-    xystore: import('../xyflow/hooks').XYStoreApi;
+    xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
     initialized: boolean;
     xyflowSynced: boolean;
     activeDynamicViewStep: number | null;
@@ -75,10 +76,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: import('..').ElementIconRenderer | null;
             getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: import('..').XYFlowInstance;
-            xystore: import('../xyflow/hooks').XYStoreApi;
+            xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
             initialized: boolean;
             xyflowSynced: boolean;
             activeDynamicViewStep: number | null;
@@ -134,10 +136,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: import('..').ElementIconRenderer | null;
             getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: import('..').XYFlowInstance;
-            xystore: import('../xyflow/hooks').XYStoreApi;
+            xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
             initialized: boolean;
             xyflowSynced: boolean;
             activeDynamicViewStep: number | null;
@@ -194,10 +197,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: import('..').ElementIconRenderer | null;
             getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: import('..').XYFlowInstance;
-            xystore: import('../xyflow/hooks').XYStoreApi;
+            xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
             initialized: boolean;
             xyflowSynced: boolean;
             activeDynamicViewStep: number | null;
@@ -261,10 +265,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: import('..').ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: import('..').XYFlowInstance;
-        xystore: import('../xyflow/hooks').XYStoreApi;
+        xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -320,10 +325,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: import('..').ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: import('..').XYFlowInstance;
-        xystore: import('../xyflow/hooks').XYStoreApi;
+        xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -379,10 +385,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: import('..').ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: import('..').XYFlowInstance;
-        xystore: import('../xyflow/hooks').XYStoreApi;
+        xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -438,10 +445,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: import('..').ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: import('..').XYFlowInstance;
-        xystore: import('../xyflow/hooks').XYStoreApi;
+        xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;
@@ -497,10 +505,11 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: import('..').ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: import('..').XYFlowInstance;
-        xystore: import('../xyflow/hooks').XYStoreApi;
+        xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
         initialized: boolean;
         xyflowSynced: boolean;
         activeDynamicViewStep: number | null;

package/dist/state/diagramStore.d.ts

@@ -2,7 +2,7 @@ import { DiagramNode, DiagramView, Fqn, ViewID } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { Exact, Simplify } from 'type-fest';
-import { Changes, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
+import { Changes, ElementIconRenderer, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 import { XYStoreApi } from '../xyflow/hooks';
 import { XYFlowInstance } from '../xyflow/types';
 
@@ -18,6 +18,7 @@ export type DiagramStore = {
     nodesDraggable: boolean;
     nodesSelectable: boolean;
     experimentalEdgeEditing: boolean;
+    renderIcon: ElementIconRenderer | null;
     getContainer: () => HTMLDivElement | null;
     viewSyncDebounceTimeout: number | null;
     xyflow: XYFlowInstance;
@@ -41,7 +42,7 @@ export type DiagramStore = {
     };
     viewportChanged: boolean;
 } & Required<LikeC4DiagramEventHandlers>;
-export type DiagramInitialState = Pick<DiagramStore, 'view' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable' | 'experimentalEdgeEditing'> & LikeC4DiagramEventHandlers;
+export type DiagramInitialState = Pick<DiagramStore, 'view' | 'renderIcon' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable' | 'experimentalEdgeEditing'> & LikeC4DiagramEventHandlers;
 interface DiagramStoreActions {
     isDynamicView: () => boolean;
     updateView: (view: DiagramView) => void;
@@ -74,6 +75,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
     nodesDraggable: boolean;
     nodesSelectable: boolean;
     experimentalEdgeEditing: boolean;
+    renderIcon: ElementIconRenderer | null;
     getContainer: () => HTMLDivElement | null;
     viewSyncDebounceTimeout: number | null;
     xyflow: XYFlowInstance;
@@ -135,6 +137,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: ElementIconRenderer | null;
             getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: XYFlowInstance;
@@ -194,6 +197,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: ElementIconRenderer | null;
             getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: XYFlowInstance;
@@ -254,6 +258,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
             nodesDraggable: boolean;
             nodesSelectable: boolean;
             experimentalEdgeEditing: boolean;
+            renderIcon: ElementIconRenderer | null;
             getContainer: () => HTMLDivElement | null;
             viewSyncDebounceTimeout: number | null;
             xyflow: XYFlowInstance;
@@ -321,6 +326,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
@@ -380,6 +386,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
@@ -439,6 +446,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
@@ -498,6 +506,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;
@@ -557,6 +566,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
         nodesDraggable: boolean;
         nodesSelectable: boolean;
         experimentalEdgeEditing: boolean;
+        renderIcon: ElementIconRenderer | null;
         getContainer: () => HTMLDivElement | null;
         viewSyncDebounceTimeout: number | null;
         xyflow: XYFlowInstance;

package/dist/style.css

@@ -1152,8 +1152,8 @@ svg.react-flow__connectionline {
   --likec4-element-fill: #A35829;
   --likec4-element-stroke: #7E451D;
   --likec4-element-hiContrast: #FFE0C2;
-  --likec4-element-loContrast: #FFA057;
-  --likec4-compound-title-color: #FFA057;
+  --likec4-element-loContrast: #f9b27c;
+  --likec4-compound-title-color: #f9b27c;
   --likec4-relation-lineColor: #b45309;
   --likec4-relation-labelBg: #78350f;
   --likec4-relation-labelColor: #FFE0C2;
@@ -1312,10 +1312,10 @@ svg.react-flow__connectionline {
   --xy-edge-stroke-width: 4;
 }
 .react-flow__edges > svg {
-  mix-blend-mode: screen;
+  mix-blend-mode: plus-lighter;
 }
 .react-flow__edges > svg:has(.bexn7q2) {
-  opacity: 0.8;
+  opacity: 0.6;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
@@ -1357,10 +1357,10 @@ svg.react-flow__connectionline {
   stroke-width: 5;
 }
 .bexn7q6 {
-  cursor: grabbing;
+  cursor: grab;
 }
 .bexn7q6 * {
-  cursor: grabbing;
+  cursor: grab;
 }
 .bexn7q8 {
   animation-duration: 800ms;
@@ -1396,7 +1396,7 @@ svg.react-flow__connectionline {
   cursor: pointer;
   width: fit-content;
   transform-origin: 50% 50%;
-  mix-blend-mode: screen;
+  mix-blend-mode: plus-lighter;
   color: var(--xy-edge-label-color);
   background-color: var(--xy-edge-label-background-color);
   border-radius: 3px;
@@ -1407,7 +1407,7 @@ svg.react-flow__connectionline {
   transform: var(--bexn7qb) scale(1.12);
 }
 .bexn7qc:is(.bexn7q2) {
-  opacity: 0.6;
+  opacity: 0.3;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
@@ -1620,193 +1620,257 @@ svg.react-flow__connectionline {
   width: 75%;
   height: 75%;
   stroke-width: 1.5;
-}@keyframes _1b6tkn6 {
+}@keyframes _1b6tkn5 {
   from {
-    opacity: 0.6;
+    stroke-opacity: 0.8;
   }
   to {
-    opacity: 0.4;
+    stroke-opacity: 0.5;
   }
 }
-._1b6tkn2 {
+._1b6tkn1 {
   --_1b6tkn0: color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill));
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
+  flex: 1;
   display: flex;
-  align-items: stretch;
+  align-items: center;
+  justify-content: center;
 }
-:where(.react-flow__node.selected) ._1b6tkn2 {
+:where(.react-flow__node.selected) ._1b6tkn1 {
   will-change: transform;
 }
-._1b6tkn2[data-hovered="true"] {
+._1b6tkn1[data-hovered="true"] {
   will-change: transform;
 }
-._1b6tkn3 {
+._1b6tkn2 {
   top: 50%;
   left: 50%;
   visibility: hidden;
 }
-._1b6tkn4 {
+._1b6tkn3 {
   will-change: transform;
 }
-.react-flow__node-element:has(._1b6tkn5) {
+.react-flow__node-element:has(._1b6tkn4) {
   opacity: 0.25;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(2px));
   will-change: opacity, filter;
 }
-._1b6tkn8 {
-  --_1b6tkn7: var(--likec4-element-loContrast);
-  stroke: var(--_1b6tkn7);
+._1b6tkn7 {
+  --_1b6tkn6: var(--likec4-element-loContrast);
+  stroke: var(--_1b6tkn6);
   fill: none;
   transform-origin: center center;
   stroke-width: 6;
-  animation-duration: 800ms;
+  animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
-  opacity: 0.6;
+  stroke-opacity: 0.8;
   visibility: hidden;
 }
-:where(.react-flow__node.selected) ._1b6tkn8 {
+:where(.react-flow__node.selected) ._1b6tkn7 {
   visibility: visible;
-  animation-name: var(--likec4-safari-animation-hook, _1b6tkn6);
+  animation-name: var(--likec4-safari-animation-hook, _1b6tkn5);
 }
-:where(.react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkn8 {
+:where(.react-flow__node:focus-visible, ._1b6tkn1:focus-visible) ._1b6tkn7 {
   stroke-width: 10;
   stroke: var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));
   visibility: visible;
 }
-:where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn8 {
+:where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn7 {
   stroke-width: 10;
 }
-:where([data-mantine-color-scheme='light']) ._1b6tkn8 {
-  --_1b6tkn7: color-mix(in srgb, var(--likec4-element-fill) 60%, var(--likec4-element-loContrast));
+:where([data-mantine-color-scheme='light']) ._1b6tkn7 {
+  --_1b6tkn6: color-mix(in srgb, var(--likec4-element-fill) 50%, #3c3c3c);
 }
-._1b6tkn5 ._1b6tkn8 {
+._1b6tkn4 ._1b6tkn7 {
   visibility: hidden;
   display: none;
 }
-._1b6tkn9 {
+._1b6tkn8 {
   fill: var(--likec4-element-fill);
 }
-._1b6tkna {
+._1b6tkn9 {
   fill: var(--likec4-element-stroke);
 }
-._1b6tknb {
+._1b6tkna {
   fill: var(--_1b6tkn0);
 }
-._1b6tknc {
+._1b6tkne {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
   font-style: normal;
-  text-align: center;
+  text-align: var(--_1b6tknc);
   font-weight: 500;
-  font-size: calc(1.21875rem * var(--mantine-scale));
-  line-height: 1.2;
+  font-size: 19px;
+  line-height: 1.15;
   text-wrap: balance;
   color: var(--likec4-element-hiContrast);
 }
-._1b6tknd {
+._1b6tknf {
   flex: 0 1 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
   font-style: normal;
   font-weight: 400;
-  font-size: calc(0.875rem * var(--mantine-scale));
-  line-height: 1.25;
-  text-align: center;
+  font-size: 14px;
+  line-height: 1.2;
+  text-align: var(--_1b6tknc);
   text-wrap: pretty;
   color: var(--likec4-element-loContrast);
   white-space-collapse: preserve-breaks;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._1b6tkne {
+:where(._1b6tknb) ._1b6tknf {
+  text-wrap: wrap;
+}
+._1b6tkng {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
   font-style: normal;
   font-weight: 400;
-  font-size: calc(0.75rem * var(--mantine-scale));
+  font-size: 12px;
   line-height: 1.125;
-  text-align: center;
+  text-align: var(--_1b6tknc);
   text-wrap: balance;
   opacity: 0.92;
   color: var(--likec4-element-loContrast);
 }
-._1b6tkn2:hover ._1b6tkne {
+._1b6tkn1:hover ._1b6tkng {
   opacity: 1;
 }
-._1b6tknf {
-  --_1b6tkn1: calc(1.5rem * var(--mantine-scale));
+._1b6tknh {
+  --_1b6tknd: 48px;
   flex: 1;
-  padding: var(--_1b6tkn1);
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  padding: calc(1.5rem * var(--mantine-scale));
+  overflow: hidden;
+  gap: calc(0.625rem * var(--mantine-scale));
+}
+:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknh {
+  padding-left: 40px;
+  padding-right: 20px;
+}
+:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknh {
+  padding-top: 30px;
+}
+:where([data-likec4-shape="browser"]) ._1b6tknh {
+  padding-top: 32px;
+  padding-bottom: 28px;
+}
+._1b6tknh:is(._1b6tknb) {
+  padding-right: 20px;
+}
+._1b6tkn1:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) ._1b6tknh:is(._1b6tknb) {
+  padding-left: 20px;
+}
+._1b6tknh:has(._1b6tknf, ._1b6tkng) {
+  --_1b6tknd: 60px;
+  align-items: flex-start;
+  gap: calc(1rem * var(--mantine-scale));
+}
+._1b6tkni {
+  --_1b6tknc: center;
+  height: fit-content;
+  width: max-content;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
+  flex-wrap: nowrap;
   overflow: hidden;
   gap: calc(0.5rem * var(--mantine-scale));
 }
-._1b6tknf:has(._1b6tknd):has(._1b6tkne) {
+._1b6tkni:has(._1b6tknf):has(._1b6tkng) {
   gap: calc(0.375rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknf {
-  padding-left: calc(2.5rem * var(--mantine-scale));
-  padding-right: calc(1.25rem * var(--mantine-scale));
-}
-:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknf {
-  padding-top: calc(2.125rem * var(--mantine-scale));
-}
-:where([data-likec4-shape="browser"]) ._1b6tknf {
-  padding-top: calc(2rem * var(--mantine-scale));
-  padding-bottom: calc(1.75rem * var(--mantine-scale));
+:where(._1b6tknb) ._1b6tkni {
+  --_1b6tknc: left;
+  min-width: calc(100% - 160px);
+  align-items: flex-start;
 }
-._1b6tkni {
-  --_1b6tknh: calc(var(--_1b6tkng) - 12px);
-  flex: 0 1 var(--_1b6tknh);
-  max-height: var(--_1b6tknh);
-  position: relative;
-  user-select: none;
-  pointer-events: none;
-  overflow: visible;
+._1b6tknj {
+  flex: 0 0 var(--_1b6tknd);
+  height: var(--_1b6tknd);
+  width: var(--_1b6tknd);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   mix-blend-mode: hard-light;
 }
-._1b6tkni img {
-  position: absolute;
-  left: 0;
-  bottom: 4px;
+._1b6tknj svg, ._1b6tknj img {
   width: 100%;
   height: auto;
+  max-height: 100%;
+  pointer-events: none;
+  filter: 
+drop-shadow(0 0 3px rgb(0 0 0 / 12%))
+drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
+drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
+;
+}
+._1b6tknj img {
   object-fit: contain;
-  max-height: var(--_1b6tkng);
 }
-._1b6tknk {
-  --_1b6tknj: 
+._1b6tknl {
+  top: 0;
+  left: 0;
+  position: absolute;
+  pointer-events: none;
+  transform-origin: 50% 50%;
+  fill: var(--likec4-element-fill);
+  stroke: none;
+  z-index: -1;
+  transition: opacity 500ms ease-out;
+  transform: translate(8px,10px);
+  opacity: 0.5;
+}
+:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn1:focus-visible) ._1b6tknl {
+  visibility: hidden;
+}
+:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknl {
+  transform: translate(8px,8px);
+}
+:where([data-likec4-shape="queue"]) ._1b6tknl {
+  transform: translate(-10px,8px);
+}
+:where([data-hovered="true"]) ._1b6tknl {
+  transition: opacity 300ms ease-in;
+  opacity: 0.2;
+}
+._1b6tknm {
+  --_1b6tknk: 
   drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
   drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-element-stroke) 40%, transparent))
   drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
 ;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   position: absolute;
   pointer-events: none;
   fill: var(--likec4-element-fill);
   stroke: var(--likec4-element-stroke);
   overflow: visible;
-  filter: var(--_1b6tknj);
+  filter: var(--_1b6tknk);
   transition: filter 300ms ease-out;
   transition-delay: 0ms;
   z-index: -1;
 }
-:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tknk {
-  --_1b6tknj: none;
+:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn1:focus-visible) ._1b6tknm {
+  --_1b6tknk: none;
 }
-._1b6tknl {
+._1b6tknn {
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));
@@ -1824,28 +1888,28 @@ svg.react-flow__connectionline {
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-._1b6tknl:hover {
+._1b6tknn:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: translate(-50%, 0) scale(1.35);
   opacity: 1;
   transition-delay: 0;
 }
-._1b6tknl:active {
+._1b6tknn:active {
   transform: translate(-50%, 0) scale(1.02);
   opacity: 1;
   transition-delay: 0;
 }
-:where([data-likec4-shape='browser']) ._1b6tknl {
+:where([data-likec4-shape='browser']) ._1b6tknn {
   bottom: 3px;
 }
-:where(.react-flow__node:not(.dragging) ._1b6tkn2:hover) ._1b6tknl:not(:hover) {
+:where(.react-flow__node:not(.dragging) ._1b6tkn1:hover) ._1b6tknn:not(:hover) {
   --ai-bg: var(--ai-bg-hover);
   box-shadow: var(--mantine-shadow-lg);
   transform: translate(-50%, 0) scale(1.185);
   opacity: 1;
   transition-delay: 250ms;
 }
-._1b6tknl svg.icon {
+._1b6tknn svg.icon {
   width: 65%;
   height: 65%;
   stroke-width: 1.5;

package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts

@@ -1,5 +1,10 @@
 import { ElementShape } from '@likec4/core';
 
+export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
+    path: string;
+    ry: number;
+    rx: number;
+};
 type ElementShapeSvgProps = {
     shape: ElementShape;
     w: number;

package/dist/xyflow/nodes/element/element.css.d.ts

@@ -7,11 +7,13 @@ export declare const indicator: string;
 export declare const fillElementFill: string;
 export declare const fillElementStroke: string;
 export declare const fillMixStroke: string;
+export declare const hasIcon: string;
 export declare const title: string;
 export declare const description: string;
 export declare const technology: string;
-export declare const element: string;
-export declare const iconOffsetY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const elementDataContainer: string;
+export declare const elementTextData: string;
 export declare const elementIcon: string;
+export declare const cssShapeSvgMultiple: string;
 export declare const cssShapeSvg: string;
 export declare const cssNavigateBtn: string;