@likec4/diagram 1.31.0 → 1.32.1

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 { memo } from 'react';
-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 = 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, renderNodes, 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 { useRef } from 'react';
-import { isEmpty } from 'remeda';
 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 = false,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
@@ -58,9 +57,7 @@ function LikeC4Diagram({
   renderNodes,
   children
 }) {
-  const hasLikec4model = !!useLikeC4Model();
   const initialRef = useRef(null);
-  const isDynamicView = view.__ === "dynamic";
   if (initialRef.current == null) {
     initialRef.current = {
       defaultEdges: [],
@@ -87,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,
@@ -112,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,
                   {
@@ -121,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,
                           {

package/dist/LikeC4Diagram.props.d.ts

@@ -1,23 +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';
 import { CustomNodes } from './custom/customNodes';
+import type * as aux from '@likec4/core/types/aux';
 export type { CustomNodes, WhereOperator };
-export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
-    navigateTo: ID;
-};
+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)
  */
@@ -30,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
@@ -72,7 +73,15 @@ export interface LikeC4DiagramProperties {
      * @default false if readonly
      */
     nodesDraggable?: boolean | undefined;
+    /**
+     * Initial width of the diagram
+     * (supposed to be used during SSR)
+     */
     initialWidth?: number | undefined;
+    /**
+     * Initial height of the diagram
+     * (supposed to be used during SSR)
+     */
     initialHeight?: number | undefined;
     /**
      * Background pattern
@@ -90,7 +99,9 @@ export interface LikeC4DiagramProperties {
      */
     showNavigationButtons?: undefined | boolean;
     /**
-     * Display notations of the view
+     * Display notations in the bottom right corner
+     * (Active if only notations are present)
+     *
      * @default true
      */
     showNotations?: boolean | undefined;
@@ -125,6 +136,11 @@ export interface LikeC4DiagramProperties {
      * @default false
      */
     enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Display element tags in the bottom left corner
+     * @default false
+     */
+    enableElementTags?: boolean | undefined;
     /**
      * Experimental feature to enable edge editing
      * @default false
@@ -132,8 +148,9 @@ export interface LikeC4DiagramProperties {
     experimentalEdgeEditing?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+     * Enable it if you have a large or static view
      *
-     * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+     * @default 'auto' - will be `true` if view has more then 3000 * 2000 pixels
      */
     reduceGraphics?: 'auto' | boolean | undefined;
     /**
@@ -152,33 +169,33 @@ export interface LikeC4DiagramProperties {
     /**
      * 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 { AnyAux, LikeC4Model } from '@likec4/core/model';
+import { LikeC4Model } from '@likec4/core/model';
+import { Any, Unknown } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-export type LikeC4ModelProviderProps = PropsWithChildren<{
-    likec4model: LikeC4Model<AnyAux>;
+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/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' | 'renderNodes' | '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

@@ -8,7 +8,7 @@ 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",
@@ -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)
           }]);
         }
       }),

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.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.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/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/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/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",

package/dist/base/primitives/edge/EdgeLabel.d.ts

@@ -1,11 +1,11 @@
-import { DiagramEdge } from '@likec4/core';
+import { DiagramEdge } from '@likec4/core/types';
 import { BoxProps } from '@likec4/styles/jsx';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
 type EdgeLabelProps = PropsWithChildren<BoxProps & {
     edgeProps: EdgeProps<Data>;
 }>;
-export declare function EdgeLabel({ edgeProps: { id, data: { label, technology, }, }, className, style, children, ...rest }: EdgeLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare const EdgeLabel: ForwardRefExoticComponent<Omit<EdgeLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -3,10 +3,11 @@ import { isStepEdgeId, extractStep } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { Text } from '@mantine/core';
+import { forwardRef } from 'react';
 import { isTruthy } from 'remeda';
 import { labelsva } from './EdgeLabel.css.js';
 
-function EdgeLabel({
+const EdgeLabel = forwardRef(({
   edgeProps: {
     id,
     data: {
@@ -18,12 +19,12 @@ function EdgeLabel({
   style,
   children,
   ...rest
-}) {
+}, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
   const classes = labelsva({
     isStepEdge: stepNum !== null
   });
-  return /* @__PURE__ */ jsxs(Box, { className: cx(classes.root, className), ...rest, children: [
+  return /* @__PURE__ */ jsxs(Box, { ref, className: cx(classes.root, className), ...rest, children: [
     stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
     /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
       isTruthy(label) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.labelText, lineClamp: 5, children: label }),
@@ -31,6 +32,7 @@ function EdgeLabel({
       children
     ] })
   ] });
-}
+});
+EdgeLabel.displayName = "EdgeLabel";
 
 export { EdgeLabel };

package/dist/base/primitives/edge/EdgeLabelContainer.d.ts

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

package/dist/base/primitives/edge/EdgeMarkers.d.ts

@@ -1,4 +1,4 @@
-import { RelationshipArrowType } from '@likec4/core';
+import { RelationshipArrowType } from '@likec4/core/types';
 import { SVGProps } from 'react';
 export declare const EdgeMarkers: {
     Arrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/primitives/edge/EdgePath.d.ts

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

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

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { css, cx } 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 { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow.js';
@@ -9,11 +10,12 @@ import { stopPropagation } from '../../../utils/xyflow.js';
 
 const container = css({
   position: "absolute",
-  top: `calc(100% - 28px)`,
-  // transform: 'translateY(-100%)',
-  left: 0,
-  width: "100%",
-  minHeight: "28px",
+  zIndex: 1,
+  top: `calc(100% - 30px)`,
+  transform: "translateX(-50%)",
+  left: `50%`,
+  width: "auto",
+  minHeight: "30px",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -40,14 +42,13 @@ function ElementActionButtons({
     return null;
   }
   return /* @__PURE__ */ jsx(Box, { className: container, children: /* @__PURE__ */ jsx(
-    Box,
+    m.div,
     {
-      component: m.div,
       layoutRoot: true,
       initial: false,
       style: {
         originY: 0,
-        gap: "8px"
+        gap: 6
       },
       animate: {
         opacity: isHovered || selected ? 1 : 0.75,

package/dist/base/primitives/element/ElementDetailsButton.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 { useId } from '@mantine/hooks';
 import { IconId } from '@tabler/icons-react';
 import * as m from 'motion/react-m';

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

@@ -1,4 +1,4 @@
-import { ElementShape, ElementStyle } from '@likec4/core';
+import { ElementShape, ElementStyle } from '@likec4/core/types';
 export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
     path: string;
     ry: number;

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

@@ -0,0 +1,14 @@
+import { BoxProps } from '@likec4/styles/jsx';
+import { NodeProps } from '../../types';
+import { ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
+export type ElementTagProps = {
+    tag: string;
+} & Omit<BoxProps, 'children'>;
+export declare const ElementTag: ForwardRefExoticComponent<Omit<ElementTagProps, "ref"> & RefAttributes<HTMLDivElement>>;
+type Data = {
+    tags: readonly string[] | null | undefined;
+    width: number;
+};
+type ElementTagsProps = NodeProps<Data>;
+export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width } }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};