@likec4/diagram 1.40.0 → 1.42.0

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

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getSmoothStepPath } from '@xyflow/system';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
-import { EdgePath } from '../../../base/primitives/edge/EdgePath.js';
-import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelContainer.js';
-import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
-import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
+import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';
+import { EdgePath } from '../../../base-primitives/edge/EdgePath.js';
+import { EdgeLabelContainer } from '../../../base-primitives/edge/EdgeLabelContainer.js';
+import { EdgeLabel } from '../../../base-primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton.js';
 
 const LABEL_OFFSET = 16;
 function SequenceStepEdge(props) {

package/dist/likec4diagram/custom/index.d.ts

@@ -0,0 +1,16 @@
+import { SequenceStepEdge } from './edges/SequenceStepEdge';
+import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, SequenceActorNode, SequenceParallelArea, ViewGroupNode } from './nodes';
+import { FunctionComponent } from 'react';
+export declare const BuiltinNodes: {
+    ElementNode: typeof ElementNode;
+    DeploymentNode: typeof DeploymentNode;
+    CompoundElementNode: typeof CompoundElementNode;
+    CompoundDeploymentNode: typeof CompoundDeploymentNode;
+    ViewGroupNode: typeof ViewGroupNode;
+    SequenceActorNode: typeof SequenceActorNode;
+    SequenceParallelArea: typeof SequenceParallelArea;
+};
+export declare const BuiltinEdges: {
+    RelationshipEdge: FunctionComponent<import("../types").Types.EdgeProps<"relationship">>;
+    SequenceStepEdge: typeof SequenceStepEdge;
+};

package/dist/likec4diagram/custom/index.js

@@ -1,20 +1,20 @@
 import { RelationshipEdge } from './edges/RelationshipEdge.js';
 import { SequenceStepEdge } from './edges/SequenceStepEdge.js';
-import { SequenceActorNode } from './nodes/SequenceActorNode.js';
-export { SequenceParallelArea } from './nodes/SequenceActorNode.js';
+import { SequenceParallelArea, SequenceActorNode } from './nodes/SequenceActorNode.js';
 import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from './nodes/nodes.js';
 
 const BuiltinNodes = {
-  element: ElementNode,
-  deployment: DeploymentNode,
-  compoundElement: CompoundElementNode,
-  compoundDeployment: CompoundDeploymentNode,
-  viewGroup: ViewGroupNode,
-  sequenceActor: SequenceActorNode
+  ElementNode,
+  DeploymentNode,
+  CompoundElementNode,
+  CompoundDeploymentNode,
+  ViewGroupNode,
+  SequenceActorNode,
+  SequenceParallelArea
 };
-const edgeTypes = {
-  relationship: RelationshipEdge,
-  "seq-step": SequenceStepEdge
+const BuiltinEdges = {
+  RelationshipEdge,
+  SequenceStepEdge
 };
 
-export { BuiltinNodes, edgeTypes };
+export { BuiltinEdges, BuiltinNodes };

package/dist/likec4diagram/custom/nodes/CompoundActions.d.ts

@@ -1,5 +1,4 @@
-import { NodeProps } from '../../../base/types';
 import { Types } from '../../types';
-type CompoundActionsProps = NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>;
+type CompoundActionsProps = Types.NodeProps<'compound-deployment' | 'compound-element'>;
 export declare const CompoundActions: (props: CompoundActionsProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import { CompoundActionButton } from '../../../base/primitives/compound/CompoundActionButton.js';
+import { CompoundActionButton } from '../../../base-primitives/compound/CompoundActionButton.js';
 
 const CompoundActions = (props) => {
   const { enableNavigateTo } = useEnabledFeatures();

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -1,7 +1,7 @@
-import { ElementActionButtons } from '../../../base/primitives';
-import { NodeProps } from '../../../base/types';
+import { SimplifyDeep } from 'type-fest';
+import { ElementActionButtons } from '../../../base-primitives';
+import { BaseNodeData } from '../../../base/types';
 import { Types } from '../../types';
-type RequiredData = Pick<Types.ElementNodeData, 'modelFqn' | 'navigateTo'>;
 type WithExtraButtons = {
     /**
      * Add extra action buttons
@@ -24,8 +24,64 @@ type WithExtraButtons = {
      */
     extraButtons?: ElementActionButtons.Item[];
 };
-export type ElementActionsProps = NodeProps<RequiredData> & WithExtraButtons;
+export type ElementActionsProps = SimplifyDeep<{
+    selected?: boolean;
+    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+}> & WithExtraButtons;
+/**
+ * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+ * Intended to be used with model elements.
+ *
+ * Use generic {@link ElementActionButtons} for custom action buttons.
+ *
+ * @param extraButtons - Add extra action buttons
+ *
+ * @example
+ * ```tsx
+ * <ElementActions
+ *   extraButtons={[
+ *     {
+ *       key: 'extra',
+ *       icon: <IconZoomScan />,
+ *       onClick: (e) => {
+ *         e.stopPropagation()
+ *         console.log('extra action clicked')
+ *       },
+ *       },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
 export declare const ElementActions: ({ extraButtons, ...props }: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
-export type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData> & WithExtraButtons;
+export type DeploymentElementActionsProps = SimplifyDeep<{
+    selected?: boolean;
+    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+}> & WithExtraButtons;
+/**
+ * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+ * Intended to be used with deployment elements.
+ *
+ * Use generic {@link ElementActionButtons} for custom action buttons.
+ *
+ * @param extraButtons - Add extra action buttons
+ *
+ * @example
+ * ```tsx
+ * <DeploymentElementActions
+ *   extraButtons={[
+ *     {
+ *       key: 'extra',
+ *       icon: <IconZoomScan />,
+ *       onClick: (e) => {
+ *         e.stopPropagation()
+ *         console.log('extra action clicked')
+ *       },
+ *       },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
 export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,9 +3,9 @@ import { useMemo } from 'react';
 import { hasAtLeast } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const ElementActions = ({
   extraButtons,
@@ -22,7 +22,7 @@ const ElementActions = ({
         icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
         onClick: (e) => {
           e.stopPropagation();
-          diagram.navigateTo(navigateTo, props.id);
+          diagram.navigateTo(navigateTo, props.data.id);
         }
       });
     }
@@ -37,7 +37,7 @@ const ElementActions = ({
       });
     }
     return buttons2;
-  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.data.id]);
   if (extraButtons && hasAtLeast(extraButtons, 1)) {
     buttons = [...buttons, ...extraButtons];
   }
@@ -49,7 +49,7 @@ const DeploymentElementActions = ({
 }) => {
   const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
-  const { navigateTo, modelFqn } = props.data;
+  const { id, navigateTo, modelFqn } = props.data;
   let buttons = useMemo(() => {
     const buttons2 = [];
     if (navigateTo && enableNavigateTo) {
@@ -58,7 +58,7 @@ const DeploymentElementActions = ({
         icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
         onClick: (e) => {
           e.stopPropagation();
-          diagram.navigateTo(navigateTo, props.id);
+          diagram.navigateTo(navigateTo, id);
         }
       });
     }
@@ -73,7 +73,7 @@ const DeploymentElementActions = ({
       });
     }
     return buttons2;
-  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, id]);
   if (extraButtons && hasAtLeast(extraButtons, 1)) {
     buttons = [...buttons, ...extraButtons];
   }

package/dist/likec4diagram/custom/nodes/SequenceActorNode.d.ts

@@ -1,4 +1,3 @@
-import { NodeProps } from '@xyflow/react';
 import { Types } from '../../types';
-export declare function SequenceActorNode(props: NodeProps<Types.SequenceActorNode>): import("react/jsx-runtime").JSX.Element;
-export declare function SequenceParallelArea(props: NodeProps<Types.SequenceActorNode>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,13 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { defaultTheme } from '@likec4/core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { Handle } from '@xyflow/react';
-import { Position } from '@xyflow/system';
+import { Handle, Position } from '@xyflow/react';
+import { isTruthy } from 'remeda';
 import { ElementActions } from './ElementActions.js';
 import { ElementDetailsButtonWithHandler } from './nodes.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 { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
+import { ElementData } from '../../../base-primitives/element/ElementData.js';
 
 const positionMap = {
   left: Position.Left,
@@ -34,20 +33,15 @@ const ActorStepPort = ({
             _whenHovered: "7px",
             _whenSelected: "7px"
           },
-          // pointerEvents: 'none',
           transition: "fast",
           translateX: "-1/2",
           translateY: "-1/2",
           translate: "auto"
-          // transform: 'translate',
         }),
         style: {
           top: p.cy,
           left: p.cx,
           height: p.height
-          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
-          // transform: 'translate(-50%, -50%)',
-          // zIndex: p.type === 'source' ? 1 : 0,
         }
       }
     ),
@@ -71,6 +65,7 @@ const ActorStepPort = ({
     )
   ] });
 };
+const hasModelFqn = (data) => isTruthy(data.modelFqn);
 function SequenceActorNode(props) {
   const data = props.data;
   const {
@@ -85,6 +80,7 @@ function SequenceActorNode(props) {
     /* @__PURE__ */ jsx(
       Box,
       {
+        "data-likec4-color": "gray",
         className: css({
           position: "absolute",
           rounded: "xs",
@@ -93,30 +89,22 @@ function SequenceActorNode(props) {
           transition: "fast",
           translateX: "-1/2",
           translate: "auto"
-          // transform: 'translate',
         }),
         style: {
-          // position: 'absolute',
-          backgroundColor: defaultTheme.elements.gray.fill,
-          opacity: isHovered ? 0.5 : 0.4,
+          backgroundColor: "var(--likec4-palette-stroke)",
+          opacity: isHovered ? 0.6 : 0.4,
           left: "50%",
           width: isHovered ? 3 : 2,
           height: viewHeight - positionAbsoluteY,
           zIndex: -1,
           pointerEvents: "none"
-          // top: p.y,
-          // left: p.width / 2,
-          // height: p.type === 'source' ? 48 : 32,
-          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
-          // transform: 'translate(-50%, -50%)',
-          // zIndex: p.type === 'source' ? 1 : 0,
         }
       }
     ),
     /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
-      /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-      data.modelFqn && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ElementData, { ...props }),
+      hasModelFqn(data) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ElementActions, { ...props, data }),
         /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props, data })
       ] })

package/dist/likec4diagram/custom/nodes/nodes.d.ts

@@ -1,11 +1,11 @@
-import { NodeProps } from '../../../base';
-import { CustomNodes as CustomNodesType } from '../../../custom/customNodes';
 import { Types } from '../../types';
-export type CustomNodes = Required<CustomNodesType>;
-export declare function ElementDetailsButtonWithHandler(props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>): import("react/jsx-runtime").JSX.Element | null;
-export declare function CompoundDetailsButtonWithHandler(props: NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>): import("react/jsx-runtime").JSX.Element | null;
-export declare const ElementNode: CustomNodes['element'];
-export declare const DeploymentNode: CustomNodes['deployment'];
-export declare const CompoundElementNode: CustomNodes['compoundElement'];
-export declare const CompoundDeploymentNode: CustomNodes['compoundDeployment'];
-export declare const ViewGroupNode: CustomNodes['viewGroup'];
+export declare function ElementDetailsButtonWithHandler(props: Pick<Types.NodeProps<'element' | 'deployment'>, 'id' | 'data'>): import("react/jsx-runtime").JSX.Element | null;
+export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders an element node.
+ */
+export declare function ElementNode(props: Types.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
+export declare function DeploymentNode(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundElementNode(props: Types.NodeProps<'compound-element'>): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundDeploymentNode(props: Types.NodeProps<'compound-deployment'>): import("react/jsx-runtime").JSX.Element;
+export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react/jsx-runtime").JSX.Element;

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

@@ -5,15 +5,15 @@ import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.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 { 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 { ElementTags } from '../../../base/primitives/element/ElementTags.js';
-import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.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 { CompoundDetailsButton } from '../../../base-primitives/compound/CompoundDetailsButton.js';
+import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
+import { ElementData } from '../../../base-primitives/element/ElementData.js';
+import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
+import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
 
 function ElementDetailsButtonWithHandler(props) {
   const { enableElementDetails } = useEnabledFeatures();
@@ -47,33 +47,31 @@ function CompoundDetailsButtonWithHandler(props) {
     }
   );
 }
-const ElementNode = (props) => {
+function ElementNode(props) {
   const { enableElementTags, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-};
-ElementNode.displayName = "ElementNode";
-const DeploymentNode = (props) => {
+}
+function DeploymentNode(props) {
   const { enableElementTags, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-};
-DeploymentNode.displayName = "DeploymentNode";
-const CompoundElementNode = (props) => {
+}
+function CompoundElementNode(props) {
   const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
@@ -82,9 +80,8 @@ const CompoundElementNode = (props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-};
-CompoundElementNode.displayName = "CompoundElementNode";
-const CompoundDeploymentNode = (props) => {
+}
+function CompoundDeploymentNode(props) {
   const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
@@ -93,12 +90,12 @@ const CompoundDeploymentNode = (props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-};
-CompoundDeploymentNode.displayName = "CompoundDeploymentNode";
-const ViewGroupNode = (props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-  /* @__PURE__ */ jsx(DefaultHandles, {})
-] });
-ViewGroupNode.displayName = "ViewGroupNode";
+}
+function ViewGroupNode(props) {
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] });
+}
 
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.d.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '@likec4/core';
+import { LikeC4Theme, ThemeColor } from '@likec4/core';
 import { PopoverProps } from '@mantine/core';
 import { OnStyleChange } from './_shared';
 type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
@@ -9,7 +9,8 @@ type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
     onChange: OnStyleChange;
 };
 export declare function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable, onChange, ...props }: ColorButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function ColorSwatches({ elementColor, onColorPreview, onChange, }: {
+export declare function ColorSwatches({ theme, elementColor, onColorPreview, onChange, }: {
+    theme: LikeC4Theme;
     elementColor: ThemeColor;
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: (color: ThemeColor) => void;

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

@@ -1,9 +1,10 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { defaultTheme } from '@likec4/core';
 import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
 import { useUpdateEffect } from '@react-hookz/web';
 import { useState } from 'react';
-import { themedColors, colors } from './_shared.js';
+import { keys } from 'remeda';
+import { useLikeC4Styles } from '../../../../hooks/useLikeC4Styles.js';
+import { SemanticColors } from './_shared.js';
 
 function ColorButton({
   elementColor,
@@ -13,6 +14,7 @@ function ColorButton({
   onChange,
   ...props
 }) {
+  const { theme } = useLikeC4Styles();
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -25,7 +27,7 @@ function ColorButton({
         /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "compact-xs", px: 3, children: /* @__PURE__ */ jsx(
           ColorSwatch,
           {
-            color: defaultTheme.elements[elementColor]?.fill,
+            color: theme.colors[elementColor].elements.fill,
             size: 14,
             withShadow: true,
             style: { color: "#fff", cursor: "pointer" }
@@ -35,6 +37,7 @@ function ColorButton({
           /* @__PURE__ */ jsx(
             ColorSwatches,
             {
+              theme,
               elementColor,
               onColorPreview,
               onChange: (color) => onChange({ color })
@@ -60,6 +63,7 @@ function ColorButton({
   );
 }
 function ColorSwatches({
+  theme,
   elementColor,
   onColorPreview,
   onChange
@@ -72,11 +76,12 @@ function ColorSwatches({
     }
     onChange(color);
   };
+  const otherColors = keys(theme.colors).filter((color) => !SemanticColors.includes(color));
   return /* @__PURE__ */ jsx(Stack, { gap: 2, onMouseLeave: () => onColorPreview(null), children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 1e3, closeDelay: 300, children: [
-    /* @__PURE__ */ jsx(Flex, { maw: 120, gap: "6", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Flex, { maw: 120, gap: "6", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
       Tooltip,
       {
-        label: key,
+        label: color,
         fz: "xs",
         color: "dark",
         offset: 2,
@@ -85,17 +90,17 @@ function ColorSwatches({
         children: /* @__PURE__ */ jsx(
           ColorSwatch,
           {
-            color: value,
+            color: theme.colors[color].elements.fill,
             size: 18,
             withShadow: true,
-            onMouseEnter: () => onColorPreview(key),
-            onClick: changeColor(key),
+            onMouseEnter: () => onColorPreview(color),
+            onClick: changeColor(color),
             style: { color: "#fff", cursor: "pointer" },
-            children: elementColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
+            children: elementColor === color && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
           }
         )
       },
-      key
+      color
     )) }),
     /* @__PURE__ */ jsx(
       Flex,
@@ -107,7 +112,7 @@ function ColorSwatches({
         align: "flex-start",
         direction: "row",
         wrap: "wrap",
-        children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
+        children: otherColors.map((key) => /* @__PURE__ */ jsx(
           Tooltip,
           {
             label: key,
@@ -118,7 +123,7 @@ function ColorSwatches({
             children: /* @__PURE__ */ jsx(
               ColorSwatch,
               {
-                color: value,
+                color: theme.colors[key].elements.fill,
                 size: 18,
                 onMouseEnter: () => onColorPreview(key),
                 onClick: changeColor(key),

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.ts

@@ -1,7 +1,3 @@
-import { NodeProps } from '../../../../base/types';
 import { Types } from '../../../types';
-type CompoundElementToolbarProps = NodeProps<Types.CompoundElementNodeData>;
-export declare function CompoundElementToolbar(props: CompoundElementToolbarProps): import("react/jsx-runtime").JSX.Element;
-type CompoundDeploymentToolbarProps = NodeProps<Types.CompoundDeploymentNodeData>;
-export declare function CompoundDeploymentToolbar(props: CompoundDeploymentToolbarProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function CompoundElementToolbar(props: Types.NodeProps<'compound-element'>): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts

@@ -1,7 +1,3 @@
-import { NodeProps } from '../../../../base/types';
 import { Types } from '../../../types';
-type ElementToolbarProps = NodeProps<Types.ElementNodeData>;
-export declare function ElementToolbar(props: ElementToolbarProps): import("react/jsx-runtime").JSX.Element;
-type DeploymentElementToolbarProps = NodeProps<Types.DeploymentElementNodeData>;
-export declare function DeploymentElementToolbar(props: DeploymentElementToolbarProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ElementToolbar(props: Types.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
+export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ElementShapes } from '@likec4/core';
+import { ElementShapes } from '@likec4/core/styles';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts

@@ -1,9 +1,8 @@
 import { NodeToolbarProps } from '@xyflow/react';
 import { ReactNode } from 'react';
-import { NodeProps } from '../../../../base/types';
-import { Types } from '../../../types';
+import { BaseNodeProps } from '../../../../base/types';
 export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
-    nodeProps: NodeProps<Types.NodeData>;
+    nodeProps: BaseNodeProps;
     title: ReactNode;
 };
 export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element | null;