@likec4/diagram 1.20.3 → 1.21.0

package/README.md

@@ -1,6 +1,6 @@
 # `@likec4/diagram`
 
-[docs](https://likec4.dev/docs/tools/react/) | [demo](https://template.likec4.dev/view/cloud)
+[docs](https://likec4.dev/docs/tools/react/) | [demo](https://template.likec4.dev/view/index/)
 
 React components to render diagrams.
 Although you can use them directly, it is recommended to use [likec4](../likec4/) CLI to generate components from LikeC4 sources.
@@ -13,4 +13,4 @@ npm add @likec4/diagram
 
 ### Local Development
 
-Use [examples/diagrams-dev](../../examples/diagrams-dev/) workspace
+Use [packages/likec4](../likec4/) workspace

package/dist/base/BaseXYFlow.js

@@ -7,7 +7,7 @@ import { useIsZoomTooSmall } from "../hooks/useXYFlow.js";
 import { cssReactFlow, cssDisablePan, cssTransparentBg } from "../LikeC4Diagram.css.js";
 import { stopPropagation } from "../utils/xyflow.js";
 import { Background } from "./Background.js";
-import { MaxZoom, MinZoom } from "./const.js";
+import { MinZoom, MaxZoom } from "./const.js";
 import { Base } from "./types.js";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 const BaseXYFlow = ({

package/dist/base/example/_types.d.ts

@@ -1,14 +1,14 @@
-import { Color, DiagramNode, Fqn } from '@likec4/core';
+import { Color, DiagramNode, Fqn, IconUrl } from '@likec4/core';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../types';
 export declare namespace ExampleTypes {
-    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo'>> & {
+    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'navigateTo'>> & {
         fqn: Fqn;
         icon: string | null;
     }>;
     type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
         fqn: Fqn;
         depth: number;
-        icon: string | null;
+        icon: IconUrl;
     }>;
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
     type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;

package/dist/base/example/custom.d.ts

@@ -1,9 +1,10 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { NodeProps } from '..';
-import { Color, ViewId, Fqn, ElementStyle } from '@likec4/core';
+import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
 import { Position } from '@xyflow/system';
 export declare const nodeTypes: {
     element: NamedExoticComponent<NodeProps<{
+        style: ElementStyle;
         title: string;
         description: string | null;
         width: number;
@@ -24,7 +25,7 @@ export declare const nodeTypes: {
         color: Color;
         fqn: Fqn;
         depth: number;
-        icon: string | null;
+        icon: IconUrl;
         hovered?: boolean;
         dimmed?: import("..").Base.Dimmed;
     }>>;

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionButton, actionIcon } from "./CompoundActionButton.css.js";
+import { actionIcon, actionButton, container } from "./CompoundActionButton.css.js";
 function CompoundActionButton({
   data: {
     hovered: isHovered = false

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionIconWrapper, actionIcon } from "./CompoundDetailsButton.css.js";
+import { actionIcon, actionIconWrapper, container } from "./CompoundDetailsButton.css.js";
 function CompoundDetailsButton({
   data: {
     hovered: isHovered = false

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { isNumber, clamp } from "remeda";
-import { container, varCompoundOpacity, varBorderTransparency, indicator, compoundBg, compoundBorder } from "./CompoundNodeContainer.css.js";
+import { indicator, compoundBg, compoundBorder, varCompoundOpacity, container, varBorderTransparency } from "./CompoundNodeContainer.css.js";
 const CompoundNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {

package/dist/base/primitives/compound/CompoundTitle.css.d.ts

@@ -1,2 +1,3 @@
 export declare const compoundTitle: string;
 export declare const title: string;
+export declare const icon: string;

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

@@ -1,7 +1,9 @@
 /* empty css                                 */
 var compoundTitle = "_1dn4as0";
 var title = "_1dn4as1";
+var icon = "_1dn4as2";
 export {
   compoundTitle,
+  icon,
   title
 };

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

@@ -1,6 +1,6 @@
 import { DiagramNode } from '@likec4/core';
 import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'color' | 'title'>;
+type Data = Pick<DiagramNode, 'color' | 'title' | 'icon'>;
 type CompoundTitleProps = NodeProps<Data>;
-export declare function CompoundTitle({ data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundTitle({ id, data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,17 +1,28 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Box, Text } from "@mantine/core";
 import clsx from "clsx";
-import { compoundTitle, title } from "./CompoundTitle.css.js";
-function CompoundTitle({ data }) {
-  data.hovered ?? false;
-  return /* @__PURE__ */ jsx(
+import { icon, title, compoundTitle } from "./CompoundTitle.css.js";
+import { IconRenderer } from "../../../context/IconRenderer.js";
+function CompoundTitle({ id, data }) {
+  const elementIcon = IconRenderer({
+    element: {
+      id,
+      title: data.title,
+      icon: data.icon
+    },
+    className: icon
+  });
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       className: clsx(
         compoundTitle,
         "likec4-compound-title"
       ),
-      children: /* @__PURE__ */ jsx(Text, { className: title, truncate: "end", children: data.title })
+      children: [
+        elementIcon,
+        /* @__PURE__ */ jsx(Text, { className: title, truncate: "end", children: data.title })
+      ]
     }
   );
 }

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

@@ -8,7 +8,7 @@ import { forwardRef } from "react";
 import { isTruthy, isNumber } from "remeda";
 import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
 import { ZIndexes } from "../../const.js";
-import { edgeVars, edgeLabelContainer, dimmed, edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate } from "./EdgeLabel.css.js";
+import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, edgeVars, edgeLabelContainer, dimmed, varTranslate } from "./EdgeLabel.css.js";
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
   return isNumber(value) ? `${value}px` : value;

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

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionButtons, actionIcon } from "./ElementActionButtons.css.js";
+import { actionIcon, actionButtons, container } from "./ElementActionButtons.css.js";
 function ElementActionButtons({
   id,
   selected = false,

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionIconWrapper, actionIcon } from "./ElementDetailsButton.css.js";
+import { actionIcon, actionIconWrapper, container } from "./ElementDetailsButton.css.js";
 function ElementDetailsButton({
   selected = false,
   data: {

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

@@ -2,7 +2,7 @@ import { DiagramNode } from '@likec4/core';
 import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
 import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
 import { NodeProps } from '../../types';
-type RequiredData = Pick<DiagramNode, 'color' | 'shape'>;
+type RequiredData = Pick<DiagramNode, 'color' | 'shape' | 'style'>;
 type ElementNodeContainerProps = BoxProps & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>;
 }>;

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

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { DefaultTextSize, DefaultPaddingSize, DefaultShapeSize } from "@likec4/core";
 import { createPolymorphicComponent, Box } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
@@ -27,6 +28,17 @@ const ElementNodeContainer = createPolymorphicComponent(
         scale = 1.02;
         break;
     }
+    let {
+      size,
+      padding,
+      textSize
+    } = data.style;
+    if (!size && !!textSize) {
+      size = textSize;
+    }
+    if (!textSize && !!size) {
+      textSize = size;
+    }
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -46,6 +58,9 @@ const ElementNodeContainer = createPolymorphicComponent(
         "data-hovered": isHovered,
         "data-likec4-color": data.color,
         "data-likec4-shape": data.shape,
+        "data-likec4-shape-size": size ?? DefaultShapeSize,
+        "data-likec4-padding": padding ?? DefaultPaddingSize,
+        "data-likec4-text-size": textSize ?? DefaultTextSize,
         "data-likec4-dimmed": isDimmed,
         ...rest,
         children

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

@@ -3,7 +3,7 @@ import { nonexhaustive } from "@likec4/core";
 import clsx from "clsx";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { toDomPrecision } from "../../../utils/xyflow.js";
-import { shapeSvgMultiple, shapeSvg, indicator, fillMixStroke, fillElementFill } from "./ElementShape.css.js";
+import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from "./ElementShape.css.js";
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2);
   const rx = radius;

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

@@ -1,5 +1,4 @@
 export declare const hasIcon: string;
-export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const title: string;
 export declare const description: string;
 export declare const technology: string;

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

@@ -1,19 +1,19 @@
+/* empty css                                        */
+/* empty css                          */
 /* empty css                                */
 var hasIcon = "fo05290";
-var iconSize = "var(--fo05292)";
-var title = "fo05293";
-var description = "fo05294";
-var technology = "fo05295";
-var elementDataContainer = "fo05296";
-var elementTextData = "fo05297";
-var elementIcon = "fo05298";
+var title = "fo05292";
+var description = "fo05293";
+var technology = "fo05294";
+var elementDataContainer = "fo05295";
+var elementTextData = "fo05296";
+var elementIcon = "fo05297";
 export {
   description,
   elementDataContainer,
   elementIcon,
   elementTextData,
   hasIcon,
-  iconSize,
   technology,
   title
 };

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

@@ -1,6 +1,6 @@
 import { DiagramNode } from '@likec4/core';
 import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color'> & {
+type Data = Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'style'> & {
     icon?: string | null;
 };
 type ElementTitleProps = NodeProps<Data> & {

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

@@ -1,11 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import "@likec4/core";
 import { Box, Text } from "@mantine/core";
 import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
 import clsx from "clsx";
-import { isTruthy, isNumber } from "remeda";
+import { isNumber, isTruthy } from "remeda";
 import { IconRenderer } from "../../../context/IconRenderer.js";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
-import { elementIcon, elementDataContainer, hasIcon, elementTextData, title, technology, description, iconSize } from "./ElementTitle.css.js";
+import { elementIcon, title, technology, description, elementTextData, elementDataContainer, hasIcon } from "./ElementTitle.css.js";
+import { iconSize } from "./styles.css.js";
 function ElementTitle({ id, data, iconSize: iconSize$1 }) {
   const elementIcon$1 = IconRenderer({
     element: {

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

@@ -0,0 +1,3 @@
+export declare const textSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const paddingSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/base/primitives/element/styles.css.js

@@ -0,0 +1,6 @@
+/* empty css                                        */
+/* empty css                          */
+var iconSize = "var(--v7x5jk2)";
+export {
+  iconSize
+};

package/dist/context/DiagramEventHandlers.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useSyncedRef } from "@react-hookz/web";
 import { createContext, useMemo, useContext } from "react";
-import { mapToObj, isFunction } from "remeda";
+import { isFunction, mapToObj } from "remeda";
 const HandlerNames = [
   "onBurgerMenuClick",
   "onNavigateTo",

package/dist/context/DiagramFeatures.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useCustomCompareEffect } from "@react-hookz/web";
-import { createContext, useContext, useState } from "react";
+import { useContext, createContext, useState } from "react";
 import { mapToObj, pick, map } from "remeda";
 import { depsShallowEqual } from "../hooks/useUpdateEffect.js";
 const FeatureNames = [

package/dist/context/RootContainer.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Box } from "@mantine/core";
 import clsx from "clsx";
-import { createContext, createRef, useRef, useContext } from "react";
+import { useRef, createContext, createRef, useContext } from "react";
 import { rootClassName } from "../globals.css.js";
 const RootContainerContext = createContext(createRef());
 function RootContainer({

package/dist/hooks/useDiagram.d.ts

@@ -2,9 +2,8 @@ import { EdgeId, Fqn, NodeId, ViewId, DiagramView, ViewChange, RelationId, Color
 import { PartialDeep } from 'type-fest';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { AlignmentMode } from '../likec4diagram/state/aligners';
+import { DiagramContext, Events, Input, ActionArg } from '../likec4diagram/state/machine';
 import { Types } from '../likec4diagram/types';
-import { DiagramContext } from './useDiagramContext';
-import { Events, Input, ActionArg } from '../likec4diagram/state/machine';
 import { MachineSnapshot, ActorRefFromLogic, CallbackActorLogic, AnyEventObject, NonReducibleUnknown, StateMachine, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, AnyActorRef, StateValue, ActionFunction, ActorLogic, RequiredActorOptions, GetConcreteByKey, Values, StopAction, CancelAction } from 'xstate';
 import { HotKeyEvent } from '../likec4diagram/state/hotkeyActor';
 import { Input, Events } from '../likec4diagram/state/syncManualLayoutActor';

package/dist/hooks/useXYFlow.js

@@ -1,5 +1,5 @@
 import { useCallbackRef } from "@mantine/hooks";
-import { useStore, useStoreApi, useReactFlow, useInternalNode } from "@xyflow/react";
+import { useStoreApi, useStore, useReactFlow, useInternalNode } from "@xyflow/react";
 import { shallowEqual } from "fast-equals";
 const useXYFlow = useReactFlow;
 function useXYStore(selector, equalityFn) {

package/dist/likec4diagram/DiagramUI.d.ts

@@ -1,2 +1 @@
-import { MemoExoticComponent } from 'react';
-export declare const DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare function DiagramUI(): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/DiagramUI.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import "react";
 import { LikeC4Search } from "../LikeC4Search.js";
 import { Overlays } from "../overlays/Overlays.js";
 import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
@@ -7,7 +7,7 @@ import { Controls } from "./ui/controls/Controls.js";
 import { IfEnabled } from "../context/DiagramFeatures.js";
 import { DiagramTitlePanel } from "./ui/diagram-title/DiagramTitlePanel.js";
 import { NotationPanel } from "./ui/notation/NotationPanel.js";
-const DiagramUI = memo(() => {
+function DiagramUI() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     /* @__PURE__ */ jsx(Overlays, {}),
@@ -16,7 +16,7 @@ const DiagramUI = memo(() => {
     /* @__PURE__ */ jsx(IfEnabled, { feature: "Notations", children: /* @__PURE__ */ jsx(NotationPanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "DynamicViewWalkthrough", children: /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}) })
   ] });
-});
+}
 export {
   DiagramUI
 };

package/dist/likec4diagram/XYFlow.js

@@ -3,12 +3,12 @@ import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
+import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useDiagram } from "../hooks/useDiagram.js";
 import { useDiagramContext } from "../hooks/useDiagramContext.js";
 import { edgeTypes } from "./custom/index.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { nodeTypes } from "./custom/nodes/nodeTypes.js";
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized,

package/dist/likec4diagram/custom/edges/NotePopover.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from "@mantine/core";
 import { useDebouncedEffect } from "@react-hookz/web";
 import { useState } from "react";
-import { isNonNull, isTruthy } from "remeda";
+import { isTruthy, isNonNull } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { edgeNoteText, edgeNoteCloseButton } from "./NotePopover.css.js";

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -8,7 +8,7 @@ import { isTruthy, first, last } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { VectorImpl, vector } from "../../../utils/vector.js";
 import { isSamePoint, bezierControlPoints, bezierPath } from "../../../utils/xyflow.js";
-import { controlDragging, controlPoint } from "./edges.css.js";
+import { controlPoint, controlDragging } from "./edges.css.js";
 import { NotePopover } from "./NotePopover.js";
 import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
 import { getNodeIntersectionFromCenterToPoint } from "./utils.js";

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -1,19 +1,19 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { DiagramNode, nameFromFqn } from "@likec4/core";
-import { Tooltip as Tooltip$1, Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, Stack, Group, Text, TooltipGroup, Space, MenuItem } from "@mantine/core";
+import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from "@mantine/core";
 import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from "@tabler/icons-react";
 import clsx from "clsx";
-import { useCallback, forwardRef, Fragment as Fragment$1 } from "react";
+import { useCallback, Fragment as Fragment$1, forwardRef } from "react";
 import { pipe, map, filter, isTruthy, partition } from "remeda";
+import { Link } from "../../../base/Link.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { menuDropdown, menuItemRelationship, endpoint, title } from "./RelationshipsDropdownMenu.css.js";
 import { DiagramContext } from "../../state/machine.js";
+import { menuDropdown, endpoint, title, menuItemRelationship } from "./RelationshipsDropdownMenu.css.js";
 import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { useEnabledFeature, IfEnabled } from "../../../context/DiagramFeatures.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
-import { Link } from "../../../base/Link.js";
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({
   color: "gray",

package/dist/likec4diagram/custom/nodes/nodeTypes.js

@@ -2,18 +2,18 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import "@likec4/core";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { CompoundActions } from "./CompoundActions.js";
-import { ElementActions, DeploymentElementActions } from "./ElementActions.js";
-import { CompoundElementToolbar, CompoundDeploymentToolbar } from "./toolbar/CompoundToolbar.js";
-import { ElementToolbar, DeploymentElementToolbar } from "./toolbar/ElementToolbar.js";
+import { DeploymentElementActions, ElementActions } from "./ElementActions.js";
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from "./toolbar/CompoundToolbar.js";
+import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolbar.js";
 import { customNode } from "../../../base/primitives/customNode.js";
-import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
-import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
-import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
 import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
+import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
+import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
 import { CompoundDetailsButton } from "../../../base/primitives/compound/CompoundDetailsButton.js";
+import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
+import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
 import { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
 const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
   const { enableElementDetails } = useEnabledFeature("ElementDetails");

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { defaultTheme, invariant } from "@likec4/core";
+import { invariant, defaultTheme } from "@likec4/core";
 import { Tooltip as Tooltip$1, ActionIcon } from "@mantine/core";
 import { useCallbackRef } from "@mantine/hooks";
-import { IconTransform, IconFileSymlink } from "@tabler/icons-react";
+import { IconFileSymlink, IconTransform } from "@tabler/icons-react";
 import { useState } from "react";
 import { keys } from "remeda";
 import { useDiagram } from "../../../../hooks/useDiagram.js";

package/dist/likec4diagram/state/assign.js

@@ -1,7 +1,7 @@
 import { nonNullable, invariant } from "@likec4/core";
 import { getNodeDimensions } from "@xyflow/system";
 import { deepEqual } from "fast-equals";
-import { omit, mergeDeep, isEmpty } from "remeda";
+import { isEmpty, mergeDeep, omit } from "remeda";
 import { assertEvent } from "xstate";
 import { VectorImpl, vector } from "../../utils/vector.js";
 import { Base } from "../../base/types.js";

package/dist/likec4diagram/state/machine.js

@@ -1,15 +1,15 @@
-import { nonexhaustive, invariant, nonNullable, getBBoxCenter, getParallelStepsPrefix, DiagramNode } from "@likec4/core";
-import { getViewportForBounds, applyNodeChanges, applyEdgeChanges } from "@xyflow/react";
+import { nonNullable, invariant, nonexhaustive, getBBoxCenter, getParallelStepsPrefix, DiagramNode } from "@likec4/core";
+import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { nodeToRect } from "@xyflow/system";
-import { hasAtLeast, first, clamp, prop } from "remeda";
-import { setup, assertEvent, enqueueActions, and, or, assign, sendTo, spawnChild, stopChild, raise, cancel } from "xstate";
+import { hasAtLeast, prop, clamp, first } from "remeda";
+import { setup, assertEvent, stopChild, assign, cancel, raise, enqueueActions, spawnChild, sendTo, and, or } from "xstate";
 import { MinZoom } from "../../base/const.js";
 import { AllDisabled } from "../../context/DiagramFeatures.js";
 import { relationshipDetailsActor } from "../../overlays/relationship-details/actor.js";
 import { relationshipsBrowserActor } from "../../overlays/relationships-browser/actor.js";
 import { createLayoutConstraints } from "../useLayoutConstraints.js";
 import { getAligner, toNodeRect } from "./aligners.js";
-import { lastClickedNode, focusNodesEdges, unfocusNodesEdges, updateNavigationHistory, mergeXYNodesEdges, updateActiveWalkthrough, navigateBack, navigateForward, updateNodeData, updateEdgeData, resetEdgeControlPoints } from "./assign.js";
+import { resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges, lastClickedNode } from "./assign.js";
 import { hotkeyActor } from "./hotkeyActor.js";
 import { syncManualLayoutActor } from "./syncManualLayoutActor.js";
 import { focusedBounds } from "./utils.js";

package/dist/likec4diagram/types.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, Fqn, ViewId } from '@likec4/core';
+import { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core';
 import { XYPosition } from '@xyflow/system';
 import { OptionalKeysOf, Simplify } from 'type-fest';
 import { Base } from '../base';
@@ -34,7 +34,7 @@ export declare namespace Types {
     };
     type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'position'>> & {
         depth: number;
-        icon: string | null;
+        icon?: IconUrl;
     }>;
     type CompoundElementNodeData = CompoundNodeData & {
         modelFqn: Fqn;

package/dist/likec4diagram/ui/controls/Controls.js

@@ -12,7 +12,7 @@ import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
 import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
 import { NavigationButtons } from "./NavigationButtons.js";
-import { panel, actionIconGroup } from "./styles.css.js";
+import { actionIconGroup, panel } from "./styles.css.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -5,7 +5,7 @@ import { IconMenu } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { container, card, title, description } from "./DiagramTitlePanel.css.js";
+import { card, title, description, container } from "./DiagramTitlePanel.css.js";
 import { Link } from "../../../base/Link.js";
 const selector = (s) => ({
   id: s.view.id,

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -3,10 +3,10 @@ import { Box, Button, Badge, ButtonGroup } from "@mantine/core";
 import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
-import { isNonNull, isTruthy } from "remeda";
+import { isTruthy, isNonNull } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { parallelStateFrame, container, buttons, btn } from "./DynamicViewWalkthrough.css.js";
+import { parallelStateFrame, btn, buttons, container } from "./DynamicViewWalkthrough.css.js";
 import { useXYStore } from "../../../hooks/useXYFlow.js";
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s) => s.width <= 750);

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -80,7 +80,7 @@ function viewToNodesEdge(opts) {
       shape: node.shape,
       style: node.style,
       depth: node.depth ?? 0,
-      icon: node.icon ?? null,
+      icon: node.icon ?? "none",
       position: node.position
     };
     const leafNodeData = {