@likec4/diagram 1.30.0 → 1.31.0

package/dist/LikeC4CustomColors.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import '@likec4/core';
 import { useMantineStyleNonce } from '@mantine/core';
 import { deepEqual } from 'fast-equals';
-import { r as reactExports } from './_virtual/index.js';
+import { memo } from 'react';
 import { entries } from 'remeda';
 
 function toStyle(name, colors) {
@@ -24,7 +24,7 @@ function toStyle(name, colors) {
 }
   `;
 }
-const LikeC4CustomColors = reactExports.memo(({ customColors }) => {
+const LikeC4CustomColors = memo(({ customColors }) => {
   const styles = entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n");
   const nonce = useMantineStyleNonce()?.();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });

package/dist/LikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>;
-export declare function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, view, className, fitView, fitViewPadding, readonly, pannable, zoomable, background, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, controls, showDiagramTitle, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, renderControls, where, reactFlowProps, children, }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, view, className, fitView, fitViewPadding, readonly, pannable, zoomable, background, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, controls, showDiagramTitle, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, renderControls, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ReactFlowProvider } from '@xyflow/react';
-import { r as reactExports } from './_virtual/index.js';
+import { useRef } from 'react';
 import { isEmpty } from 'remeda';
 import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
 import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
@@ -55,10 +55,11 @@ function LikeC4Diagram({
   renderControls,
   where,
   reactFlowProps = {},
+  renderNodes,
   children
 }) {
   const hasLikec4model = !!useLikeC4Model();
-  const initialRef = reactExports.useRef(null);
+  const initialRef = useRef(null);
   const isDynamicView = view.__ === "dynamic";
   if (initialRef.current == null) {
     initialRef.current = {
@@ -134,6 +135,7 @@ function LikeC4Diagram({
                             nodesSelectable,
                             background,
                             reactFlowProps,
+                            renderNodes,
                             children
                           }
                         ) })

package/dist/LikeC4Diagram.props.d.ts

@@ -2,7 +2,8 @@ import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, ViewChange, Vie
 import { ReactFlowProps as XYFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { ControlsCustomLayout } from './context/ControlsCustomLayout';
-export type { WhereOperator };
+import { CustomNodes } from './custom/customNodes';
+export type { CustomNodes, WhereOperator };
 export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
     navigateTo: ID;
 };
@@ -144,6 +145,10 @@ export interface LikeC4DiagramProperties {
      * Customize layout of the controls on the top left
      */
     renderControls?: ControlsCustomLayout | undefined;
+    /**
+     * Override node renderers
+     */
+    renderNodes?: CustomNodes | undefined;
     /**
      * Dynamic filter, applies both to nodes and edges
      */

package/dist/LikeC4ModelProvider.d.ts

@@ -1,9 +1,9 @@
-import { LikeC4Model } from '@likec4/core';
+import { AnyAux, LikeC4Model } from '@likec4/core/model';
 import { PropsWithChildren } from 'react';
 export type LikeC4ModelProviderProps = PropsWithChildren<{
-    likec4model: LikeC4Model;
+    likec4model: LikeC4Model<AnyAux>;
 }>;
 /**
  * Ensures LikeC4Model context
  */
-export declare function LikeC4ModelProvider({ children, likec4model }: LikeC4ModelProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ModelProvider({ children, likec4model, }: LikeC4ModelProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4ModelProvider.js

@@ -1,5 +1,4 @@
 import { jsx } from 'react/jsx-runtime';
-import './_virtual/index.js';
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext.js';
 
 function LikeC4ModelProvider({

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,3 +1,3 @@
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
+export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'where'>;
 export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
-import { r as reactExports } from '../_virtual/index.js';
+import { useMemo, Fragment } from 'react';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
 import { stopPropagation } from '../utils/xyflow.js';
@@ -82,7 +82,7 @@ const BaseXYFlow = ({
       maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
-      fitViewOptions: reactExports.useMemo(() => ({
+      fitViewOptions: useMemo(() => ({
         minZoom: MinZoom,
         maxZoom: 1,
         padding: fitViewPadding,
@@ -156,7 +156,7 @@ const BaseXYFlow = ({
       onEdgeDoubleClick: stopPropagation,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs(reactExports.Fragment, { children: [
+        /* @__PURE__ */ jsxs(Fragment, { children: [
           isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
           onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize })
         ] }, "_internals"),

package/dist/base/primitives/compound/CompoundActionButton.d.ts

@@ -1,7 +1,8 @@
+import { Simplify } from 'type-fest';
 import { NodeProps } from '../../types';
-type CompoundActionButtonProps = NodeProps & {
+type CompoundActionButtonProps = Simplify<NodeProps<{}> & {
     icon?: React.ReactNode;
     onClick: (e: React.MouseEvent) => void;
-};
+}>;
 export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base/primitives/compound/CompoundDetailsButton.d.ts

@@ -1,7 +1,8 @@
+import { Simplify } from 'type-fest';
 import { NodeProps } from '../../types';
-type CompoundDetailsButtonProps = NodeProps & {
+type CompoundDetailsButtonProps = Simplify<NodeProps<{}> & {
     icon?: React.ReactNode;
     onClick: (e: React.MouseEvent) => void;
-};
+}>;
 export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base/primitives/compound/CompoundNodeContainer.d.ts

@@ -1,10 +1,14 @@
-import { DiagramNode } from '@likec4/core';
+import { Color, ElementStyle } from '@likec4/core/types';
 import { HTMLMotionProps } from 'motion/react';
 import { PropsWithChildren } from 'react';
 import { NodeProps } from '../../types';
-type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'style'>;
+export type RequiredData = {
+    color: Color;
+    depth: number;
+    style: ElementStyle;
+};
 type CompoundNodeContainerProps = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>;
 }>;
-export declare function CompoundNodeContainer({ nodeProps: { selected: isSelected, data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundNodeContainer({ nodeProps: { selected: isSelected, data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { m } from 'motion/react';
-import '../../../_virtual/index.js';
 import { isNumber, clamp } from 'remeda';
 import { compound, borderOpacityPercent, borderRadius, borderWidth, compoundOpacity } from './CompoundNodeContainer.css.js';
 import { useIsReducedGraphics } from '../../../context/ReduceGraphics.js';
@@ -15,6 +14,7 @@ function CompoundNodeContainer({
       ...data
     }
   },
+  className,
   children,
   style,
   ...rest
@@ -48,7 +48,8 @@ function CompoundNodeContainer({
           likec4Palette: `${data.color}.${depth}`
         }),
         classes.root,
-        "likec4-compound-node"
+        "likec4-compound-node",
+        className
       ),
       initial: false,
       "data-likec4-hovered": isHovered,

package/dist/base/primitives/customEdge.d.ts

@@ -1,37 +1,4 @@
-import { FunctionComponent, NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent } from 'react';
 import { Base, EdgeProps } from '../types';
-import { Position } from '@xyflow/system';
 export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
-export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): NamedExoticComponent<{
-    id: string;
-    selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
-    style?: CSSProperties;
-    source: string;
-    target: string;
-    animated?: boolean;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
-    sourcePosition: Position;
-    targetPosition: Position;
-    label?: ReactNode;
-    labelStyle?: CSSProperties;
-    labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
-    labelBgPadding?: [number, number];
-    labelBgBorderRadius?: number;
-    sourceHandleId?: string | null;
-    targetHandleId?: string | null;
-    markerStart?: string;
-    markerEnd?: string;
-    pathOptions?: any;
-    interactionWidth?: number;
-    data: {
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: Base.Dimmed;
-    } & P;
-}>;
+export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;

package/dist/base/primitives/customEdge.js

@@ -1,12 +1,12 @@
 import { deepEqual } from 'fast-equals';
-import { r as reactExports } from '../../_virtual/index.js';
+import { memo } from 'react';
 
 const isSame = (a, b) => {
   return Math.abs(a - b) < 2.5;
 };
 const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
 function customEdge(Edge) {
-  return reactExports.memo(Edge, edgePropsEqual);
+  return memo(Edge, edgePropsEqual);
 }
 
 export { customEdge, edgePropsEqual };

package/dist/base/primitives/customNode.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, NamedExoticComponent } from 'react';
+import { FunctionComponent, MemoExoticComponent } from 'react';
 import { Base, NodeProps } from '../types';
 export declare const nodePropsEqual: <P extends Record<string, unknown> = Base.NodeData>(prev: NodeProps<P>, next: NodeProps<P>) => boolean;
-export declare function customNode<P extends Record<string, unknown> = Base.NodeData>(Node: FunctionComponent<NodeProps<P>>): NamedExoticComponent<NodeProps<P>>;
+export declare function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(Node: FunctionComponent<NodeProps<P, NodeType>>): MemoExoticComponent<(props: NodeProps<P, NodeType>) => import("react/jsx-runtime").JSX.Element>;

package/dist/base/primitives/customNode.js

@@ -1,9 +1,16 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { deepEqual } from 'fast-equals';
-import { r as reactExports } from '../../_virtual/index.js';
+import { memo } from 'react';
+import { DefaultHandles } from './NodeHandles.js';
 
 const nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 function customNode(Node) {
-  return reactExports.memo(Node, nodePropsEqual);
+  const NodeComponent = memo((props) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Node, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] }), nodePropsEqual);
+  NodeComponent.displayName = "Node";
+  return NodeComponent;
 }
 
 export { customNode, nodePropsEqual };

package/dist/base/primitives/edge/EdgeContainer.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { invariant } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import '../../../_virtual/index.js';
 import { edgeVars, edgeContainer } from './edge.css.js';
 
 function EdgeContainer({

package/dist/base/primitives/edge/EdgeLabel.js

@@ -3,7 +3,6 @@ import { isStepEdgeId, extractStep } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { Text } from '@mantine/core';
-import '../../../_virtual/index.js';
 import { isTruthy } from 'remeda';
 import { labelsva } from './EdgeLabel.css.js';
 

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -1,8 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import '../../../_virtual/index.js';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
 import { edgeVars } from './edge.css.js';

package/dist/base/primitives/edge/EdgePath.js

@@ -1,10 +1,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { forwardRef } from 'react';
 import { hideOnReducedGraphics, markerContext, edgePathBg, cssEdgePath } from './edge.css.js';
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers.js';
 
-const EdgePath = reactExports.forwardRef(({
+const EdgePath = forwardRef(({
   edgeProps: {
     id,
     data: {

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -1,31 +1,33 @@
-import { DiagramNode, ElementStyle, ShapeSize, SpacingSize, TextSize } from '@likec4/core';
-import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
-import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
+import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
+import { LayoutProps } from 'motion/react';
+import { CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { NodeProps } from '../../types';
-type RequiredData = Pick<DiagramNode, 'color' | 'shape' | 'style'>;
-type ElementNodeContainerProps = BoxProps & PropsWithChildren<{
+import { ShapeSize, SpacingSize, TextSize } from '@likec4/core';
+export type RequiredData = {
+    color: Color;
+    shape: ElementShape;
+    style?: ElementStyle;
+};
+export type ElementNodeContainerProps = {
     nodeProps: NodeProps<RequiredData>;
-}>;
+    children?: ReactNode | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    [key: `data-${string}`]: string | undefined;
+} & LayoutProps;
 export declare function nodeSizes({ size, padding, textSize, }: ElementStyle): {
     size: ShapeSize;
     padding: SpacingSize;
     textSize: TextSize;
 };
-export declare const ElementNodeContainer: (<C = "div">(props: PolymorphicComponentProps<C, ElementNodeContainerProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
-    nodeProps: NodeProps<RequiredData>;
-} & {
-    children?: ReactNode | undefined;
-} & {
-    component?: any;
-} & Omit<Omit<any, "ref">, "children" | keyof BoxProps | "nodeProps" | "component"> & {
-    ref?: any;
-    renderRoot?: (props: any) => any;
-}) | (BoxProps & {
+/**
+ * Top-level primitive to compose leaf nodes renderers.
+ * This container provides the state via data-* attributes
+ */
+export declare const ElementNodeContainer: ForwardRefExoticComponent<{
+    [key: `data-${string}`]: string | undefined;
     nodeProps: NodeProps<RequiredData>;
-} & {
     children?: ReactNode | undefined;
-} & {
-    component: React.ElementType;
-    renderRoot?: (props: Record<string, any>) => any;
-})>, never> & Record<string, never>;
-export {};
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+} & LayoutProps & RefAttributes<HTMLDivElement>>;

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core';
+import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core/types';
 import { cx, css } from '@likec4/styles/css';
-import { createPolymorphicComponent, Box } from '@mantine/core';
 import * as m from 'motion/react-m';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { forwardRef } from 'react';
 import { container } from './ElementNodeContainer.css.js';
 
 function nodeSizes({
@@ -29,73 +28,72 @@ function nodeSizes({
     textSize
   };
 }
-const ElementNodeContainer = createPolymorphicComponent(
-  reactExports.forwardRef(({
-    nodeProps: {
-      selected = false,
-      selectable = false,
-      data: {
-        hovered: isHovered = false,
-        dimmed: isDimmed = false,
-        ...data
-      }
-    },
-    style,
-    children,
-    ...rest
-  }, ref) => {
-    let scale = 1;
-    switch (true) {
-      case isHovered:
-        scale = 1.05;
-        break;
-      case selected:
-        scale = 1.02;
-        break;
+const ElementNodeContainer = forwardRef(({
+  nodeProps: {
+    selected = false,
+    selectable = false,
+    data: {
+      hovered: isHovered = false,
+      dimmed: isDimmed = false,
+      ...data
     }
-    const {
-      size,
-      padding,
-      textSize
-    } = nodeSizes(data.style);
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: m.div,
-        ref,
-        className: cx(
-          css({
-            likec4Palette: data.color
-          }),
-          container,
-          "group",
-          "likec4-element-node"
-        ),
-        initial: false,
-        ...selectable && {
-          animate: {
-            scale
-          },
-          whileTap: { scale: 0.98 }
-        },
-        "data-likec4-hovered": isHovered,
-        "data-likec4-color": data.color,
-        "data-likec4-shape": data.shape,
-        "data-likec4-shape-size": size,
-        "data-likec4-spacing": padding,
-        "data-likec4-text-size": textSize,
-        ...isDimmed !== false && {
-          "data-likec4-dimmed": isDimmed
-        },
-        style: {
-          ...style
+  },
+  className,
+  style,
+  children,
+  ...rest
+}, ref) => {
+  let scale = 1;
+  switch (true) {
+    case isHovered:
+      scale = 1.05;
+      break;
+    case selected:
+      scale = 1.02;
+      break;
+  }
+  const {
+    size,
+    padding,
+    textSize
+  } = nodeSizes(data.style ?? {});
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      ref,
+      className: cx(
+        css({
+          likec4Palette: data.color
+        }),
+        container,
+        "group",
+        "likec4-element-node",
+        className
+      ),
+      initial: false,
+      ...selectable && {
+        animate: {
+          scale
         },
-        ...rest,
-        children
-      }
-    );
-  })
-);
+        whileTap: { scale: 0.98 }
+      },
+      "data-likec4-hovered": isHovered,
+      "data-likec4-color": data.color,
+      "data-likec4-shape": data.shape,
+      "data-likec4-shape-size": size,
+      "data-likec4-spacing": padding,
+      "data-likec4-text-size": textSize,
+      ...isDimmed !== false && {
+        "data-likec4-dimmed": isDimmed
+      },
+      style: {
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
 ElementNodeContainer.displayName = "ElementNodeContainer";
 
 export { ElementNodeContainer, nodeSizes };

package/dist/base/primitives/element/ElementShape.d.ts

@@ -1,4 +1,4 @@
-import { DiagramNode, ElementShape } from '@likec4/core';
+import { ElementShape, ElementStyle } from '@likec4/core';
 export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
     path: string;
     ry: number;
@@ -9,18 +9,22 @@ type ElementShapeProps = {
     w: number;
     h: number;
 };
-type Data = Pick<DiagramNode, 'shape' | 'width' | 'height'>;
+type Data = {
+    shape: ElementShape;
+    width: number;
+    height: number;
+    style?: ElementStyle;
+};
 type ElementShapePrimitiveProps = {
     data: Data;
     width?: number;
     height?: number;
-    isMultiple?: boolean | undefined;
     /**
      * @default true
      */
     withSelectedIndicator?: boolean | undefined;
 };
-export declare function ElementShape({ data, width, height, isMultiple, withSelectedIndicator }: ElementShapePrimitiveProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementShape({ data, width, height, withSelectedIndicator }: ElementShapePrimitiveProps): import("react/jsx-runtime").JSX.Element;
 /**
  * When element is selected, this component is used to render the indicator
  */

package/dist/base/primitives/element/ElementShape.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
-import clsx from 'clsx';
+import { cx } from '@likec4/styles/css';
 import { toDomPrecision } from '../../../utils/xyflow.js';
 import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from './ElementShape.css.js';
 
@@ -148,11 +148,12 @@ function ElementShapeSvg({ shape, w, h }) {
     }
   }
 }
-function ElementShape({ data, width, height, isMultiple = false, withSelectedIndicator = true }) {
+function ElementShape({ data, width, height, withSelectedIndicator = true }) {
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
+  const isMultiple = data.style?.multiple ?? false;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className: clsx(shapeSvgMultiple), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
+    isMultiple && /* @__PURE__ */ jsx("svg", { className: cx(shapeSvgMultiple), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
     /* @__PURE__ */ jsxs("svg", { className: shapeSvg, viewBox: `0 0 ${w} ${h}`, children: [
       withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
       /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h })

package/dist/base/primitives/element/ElementTitle.css.d.ts

@@ -1,7 +1,7 @@
 import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
 export declare const iconSize = "--icon-size";
 export declare const elementIcon: string;
-export declare const elementTitle: SlotRecipeRuntimeFn<"title" | "technology" | "description" | "root" | "textContainer", {
+export declare const elementTitle: SlotRecipeRuntimeFn<"root" | "title" | "technology" | "description" | "textContainer", {
     hasIcon: {
         false: {};
         true: {

package/dist/base/primitives/element/ElementTitle.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { Box, Text } from '@mantine/core';
 import { isTruthy, isEmpty, isNumber } from 'remeda';