@likec4/diagram 1.30.0 → 1.32.0

package/dist/LikeC4CustomColors.d.ts

@@ -1,7 +1,2 @@
-import { CustomColorDefinitions } from '@likec4/core';
-import { NamedExoticComponent } from 'react';
-interface LikeC4CustomColorsProperties {
-    customColors: CustomColorDefinitions;
-}
-export declare const LikeC4CustomColors: NamedExoticComponent<LikeC4CustomColorsProperties>;
-export {};
+import { MemoExoticComponent } from 'react';
+export declare const LikeC4CustomColors: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/LikeC4CustomColors.js

@@ -1,9 +1,10 @@
 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 { entries } from 'remeda';
+import { memo, useState } from 'react';
+import { isEmpty, entries } from 'remeda';
+import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
+import { useUpdateEffect } from './hooks/useUpdateEffect.js';
 
 function toStyle(name, colors) {
   const darken = (color) => `color-mix(in srgb, ${color} 80%, black)`;
@@ -24,11 +25,21 @@ function toStyle(name, colors) {
 }
   `;
 }
-const LikeC4CustomColors = reactExports.memo(({ customColors }) => {
-  const styles = entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n");
+function generateCustomColorStyles(customColors) {
+  return entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n").trim();
+}
+const LikeC4CustomColors = memo(() => {
+  const customColors = useLikeC4Specification().customColors ?? {};
+  const [styles, setStyles] = useState(() => generateCustomColorStyles(customColors));
+  useUpdateEffect(() => {
+    setStyles(generateCustomColorStyles(customColors));
+  }, [customColors]);
   const nonce = useMantineStyleNonce()?.();
+  if (isEmpty(customColors)) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });
-}, deepEqual);
+});
 LikeC4CustomColors.displayName = "LikeC4CustomColors";
 
 export { LikeC4CustomColors };

package/dist/LikeC4Diagram.d.ts

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

package/dist/LikeC4Diagram.js

@@ -1,13 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ReactFlowProvider } from '@xyflow/react';
-import { r as reactExports } from './_virtual/index.js';
-import { isEmpty } from 'remeda';
+import { useRef } from 'react';
 import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
 import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
 import { LikeC4CustomColors } from './LikeC4CustomColors.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './state/DiagramActorProvider.js';
-import { useLikeC4Model } from './likec4model/useLikeC4Model.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
 import { IconRendererProvider } from './context/IconRenderer.js';
@@ -35,6 +33,7 @@ function LikeC4Diagram({
   pannable = true,
   zoomable = true,
   background = "dots",
+  enableElementTags = true,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
@@ -55,11 +54,10 @@ function LikeC4Diagram({
   renderControls,
   where,
   reactFlowProps = {},
+  renderNodes,
   children
 }) {
-  const hasLikec4model = !!useLikeC4Model();
-  const initialRef = reactExports.useRef(null);
-  const isDynamicView = view.__ === "dynamic";
+  const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       defaultEdges: [],
@@ -86,13 +84,13 @@ function LikeC4Diagram({
             enableRelationshipBrowser,
             enableSearch,
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-            enableDynamicViewWalkthrough: isDynamicView && enableDynamicViewWalkthrough,
+            enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
             enableEdgeEditing: experimentalEdgeEditing,
             enableNotations: showNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
             enableViewTitle: showDiagramTitle,
-            enableLikeC4Model: hasLikec4model
+            enableElementTags
           },
           children: /* @__PURE__ */ jsx(
             DiagramEventHandlers,
@@ -111,7 +109,7 @@ function LikeC4Diagram({
                 onBurgerMenuClick
               },
               children: /* @__PURE__ */ jsx(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsxs(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: [
-                !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
+                /* @__PURE__ */ jsx(LikeC4CustomColors, {}),
                 /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
@@ -120,13 +118,12 @@ function LikeC4Diagram({
                     children: /* @__PURE__ */ jsx(
                       DiagramActorProvider,
                       {
-                        input: {
-                          view,
-                          pannable,
-                          zoomable,
-                          nodesSelectable,
-                          fitViewPadding
-                        },
+                        view,
+                        zoomable,
+                        pannable,
+                        fitViewPadding,
+                        nodesSelectable,
+                        where: where ?? null,
                         children: /* @__PURE__ */ jsx(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: /* @__PURE__ */ jsx(
                           LikeC4DiagramXYFlow,
                           {
@@ -134,6 +131,7 @@ function LikeC4Diagram({
                             nodesSelectable,
                             background,
                             reactFlowProps,
+                            renderNodes,
                             children
                           }
                         ) })

package/dist/LikeC4Diagram.props.d.ts

@@ -1,22 +1,24 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, ViewChange, ViewId, WhereOperator } from '@likec4/core';
+import { Any, DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps as XYFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { SetRequired } from 'type-fest';
 import { ControlsCustomLayout } from './context/ControlsCustomLayout';
-export type { WhereOperator };
-export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
-    navigateTo: ID;
-};
+import { CustomNodes } from './custom/customNodes';
+import type * as aux from '@likec4/core/types/aux';
+export type { CustomNodes, WhereOperator };
+export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>;
 type ElementIconRendererProps = {
     node: {
         id: string;
         title: string;
         icon?: string | null | undefined;
     };
+    className?: string;
 };
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
-export type OnNavigateTo<ID = ViewId> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
-export type OnNodeClick = (node: DiagramNode, event: ReactMouseEvent) => void;
-export type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
+export type OnNavigateTo<A extends Any> = (to: aux.ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
+export type OnNodeClick<A extends Any> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
+export type OnEdgeClick<A extends Any> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
 /**
  * On pane/canvas click (not on any node or edge)
  */
@@ -29,8 +31,8 @@ export type LikeC4ColorScheme = 'light' | 'dark';
 export type OverrideReactFlowProps = Pick<XYFlowProps, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
 export type PaddingUnit = 'px' | '%';
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
-export interface LikeC4DiagramProperties {
-    view: DiagramView;
+export interface LikeC4DiagramProperties<A extends aux.Any> {
+    view: LayoutedView<A>;
     className?: string | undefined;
     /**
      * Enable/disable panning
@@ -124,6 +126,11 @@ export interface LikeC4DiagramProperties {
      * @default false
      */
     enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Display element tags in the bottom left corner
+     * @default true
+     */
+    enableElementTags?: boolean | undefined;
     /**
      * Experimental feature to enable edge editing
      * @default false
@@ -144,36 +151,40 @@ 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
      */
-    where?: WhereOperator<string, string> | undefined;
+    where?: WhereOperator<A> | undefined;
     /**
      * Override ReactFlow props
      */
     reactFlowProps?: OverrideReactFlowProps | undefined;
 }
-export type OpenSourceParams = {
-    element: Fqn;
+export type OpenSourceParams<A extends aux.Any = aux.Any> = {
+    element: aux.Fqn<A>;
     property?: string;
 } | {
-    relation: RelationId;
+    relation: aux.RelationId;
 } | {
-    deployment: Fqn;
+    deployment: aux.DeploymentFqn<A>;
     property?: string;
 } | {
-    view: ViewId;
+    view: aux.StrictViewId<A>;
 };
-export interface LikeC4DiagramEventHandlers {
+export interface LikeC4DiagramEventHandlers<A extends aux.Any> {
     onChange?: OnChange | null | undefined;
-    onNavigateTo?: OnNavigateTo | null | undefined;
-    onNodeClick?: OnNodeClick | null | undefined;
-    onNodeContextMenu?: OnNodeClick | null | undefined;
+    onNavigateTo?: OnNavigateTo<A> | null | undefined;
+    onNodeClick?: OnNodeClick<A> | null | undefined;
+    onNodeContextMenu?: OnNodeClick<A> | null | undefined;
     onCanvasContextMenu?: OnCanvasClick | null | undefined;
-    onEdgeClick?: OnEdgeClick | null | undefined;
-    onEdgeContextMenu?: OnEdgeClick | null | undefined;
+    onEdgeClick?: OnEdgeClick<A> | null | undefined;
+    onEdgeContextMenu?: OnEdgeClick<A> | null | undefined;
     onCanvasClick?: OnCanvasClick | null | undefined;
     onCanvasDblClick?: OnCanvasClick | null | undefined;
     onBurgerMenuClick?: null | undefined | (() => void);
-    onOpenSource?: null | undefined | ((params: OpenSourceParams) => void);
+    onOpenSource?: null | undefined | ((params: OpenSourceParams<A>) => void);
 }

package/dist/LikeC4ModelProvider.d.ts

@@ -1,9 +1,10 @@
-import { LikeC4Model } from '@likec4/core';
+import { LikeC4Model } from '@likec4/core/model';
+import { Any, Unknown } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-export type LikeC4ModelProviderProps = PropsWithChildren<{
-    likec4model: LikeC4Model;
+export type LikeC4ModelProviderProps<A extends Any> = PropsWithChildren<{
+    likec4model: LikeC4Model<A>;
 }>;
 /**
  * Ensures LikeC4Model context
  */
-export declare function LikeC4ModelProvider({ children, likec4model }: LikeC4ModelProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ModelProvider<A extends Any = Unknown>({ children, likec4model, }: LikeC4ModelProviderProps<A>): 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,4 @@
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
-export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+import type * as aux from '@likec4/core/types/aux';
+export type StaticLikeC4DiagramProps<A extends aux.Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'where'>;
+export declare function StaticLikeC4Diagram<A extends aux.Any = aux.UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/StaticLikeC4Diagram.js

@@ -5,7 +5,6 @@ function StaticLikeC4Diagram({
   view,
   fitView = true,
   fitViewPadding = "8px",
-  enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
   background = "transparent",
@@ -24,7 +23,7 @@ function StaticLikeC4Diagram({
       background,
       showDiagramTitle: false,
       showNotations: false,
-      enableElementDetails,
+      enableElementDetails: false,
       enableRelationshipDetails,
       enableRelationshipBrowser,
       enableDynamicViewWalkthrough: false,
@@ -34,6 +33,7 @@ function StaticLikeC4Diagram({
       enableSearch: false,
       nodesSelectable: false,
       nodesDraggable: false,
+      enableElementTags: false,
       ...rest
     }
   );

package/dist/base/BaseXYFlow.js

@@ -2,13 +2,13 @@ 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';
 import { Background } from './Background.js';
 import { MinZoom, MaxZoom } from './const.js';
-import { Base } from './types.js';
+import { setHovered } from './types.Base.js';
 
 const cssTransparentBg = css({
   background: "transparent !important",
@@ -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,
@@ -121,7 +121,7 @@ const BaseXYFlow = ({
           onNodesChange([{
             id: node.id,
             type: "replace",
-            item: Base.setHovered(node, true)
+            item: setHovered(node, true)
           }]);
         }
       }),
@@ -130,7 +130,7 @@ const BaseXYFlow = ({
           onNodesChange([{
             id: node.id,
             type: "replace",
-            item: Base.setHovered(node, false)
+            item: setHovered(node, false)
           }]);
         }
       }),
@@ -139,7 +139,7 @@ const BaseXYFlow = ({
           onEdgesChange([{
             id: edge.id,
             type: "replace",
-            item: Base.setHovered(edge, true)
+            item: setHovered(edge, true)
           }]);
         }
       }),
@@ -148,7 +148,7 @@ const BaseXYFlow = ({
           onEdgesChange([{
             id: edge.id,
             type: "replace",
-            item: Base.setHovered(edge, false)
+            item: setHovered(edge, false)
           }]);
         }
       }),
@@ -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/const.d.ts

@@ -5,4 +5,4 @@ export declare const ZIndexes: {
     readonly Max: 8;
 };
 export declare const MinZoom = 0.05;
-export declare const MaxZoom = 2;
+export declare const MaxZoom = 3;

package/dist/base/const.js

@@ -5,6 +5,6 @@ const ZIndexes = {
   Max: 8
 };
 const MinZoom = 0.05;
-const MaxZoom = 2;
+const MaxZoom = 3;
 
 export { MaxZoom, MinZoom, ZIndexes };

package/dist/base/index.d.ts

@@ -1,2 +1,3 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
-export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
+export { type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
+export * as Base from './types.Base';

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/CompoundActionButton.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
-import { Box, ActionIcon } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconZoomScan } from '@tabler/icons-react';
 import * as m from 'motion/react-m';

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/CompoundDetailsButton.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
-import { Box, ActionIcon } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconId } from '@tabler/icons-react';
 import * as m from 'motion/react-m';

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/compound/CompoundTitle.d.ts

@@ -1,4 +1,4 @@
-import { DiagramNode } from '@likec4/core';
+import { DiagramNode } from '@likec4/core/types';
 import { NodeProps } from '../../types';
 type Data = Pick<DiagramNode, 'color' | 'title' | 'icon' | 'style'>;
 type CompoundTitleProps = NodeProps<Data>;

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
-import { Box, Text } from '@mantine/core';
+import { Box } from '@likec4/styles/jsx';
+import { Text } from '@mantine/core';
 import { IconRenderer } from '../../../context/IconRenderer.js';
 
 const titleContainer = css({

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.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge } from '@likec4/core';
+import { DiagramEdge } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';

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.css.js

@@ -57,6 +57,7 @@ const labelsva = sva({
   slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
   base: {
     root: {
+      pointerEvents: "all",
       fontFamily: "likec4.relation",
       padding: "3px 5px 5px 5px",
       display: "flex",