@likec4/diagram 1.30.0 → 1.32.0

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

@@ -1,68 +1,82 @@
 import { jsx } from 'react/jsx-runtime';
+import { hasAtLeast } from '@likec4/core';
 import { IconZoomScan, IconTransform } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
-const ElementActions = (props) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "NavigateTo");
+const ElementActions = ({
+  extraButtons,
+  ...props
+}) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
-  const buttons = [];
   const { navigateTo, modelFqn } = props.data;
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: "navigate",
-      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.navigateTo(navigateTo, props.id);
-      }
-    });
-  }
-  if (enableRelationshipBrowser) {
-    buttons.push({
-      key: "relationships",
-      icon: /* @__PURE__ */ jsx(IconTransform, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openRelationshipsBrowser(modelFqn);
-      }
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    ElementActionButtons,
-    {
-      buttons,
-      ...props
+  let buttons = useMemo(() => {
+    const buttons2 = [];
+    if (navigateTo && enableNavigateTo) {
+      buttons2.push({
+        key: "navigate",
+        icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigateTo(navigateTo, props.id);
+        }
+      });
     }
-  );
+    if (enableRelationshipBrowser) {
+      buttons2.push({
+        key: "relationships",
+        icon: /* @__PURE__ */ jsx(IconTransform, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openRelationshipsBrowser(modelFqn);
+        }
+      });
+    }
+    return buttons2;
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons];
+  }
+  return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
 };
-const DeploymentElementActions = (props) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature("NavigateTo", "RelationshipBrowser");
+const DeploymentElementActions = ({
+  extraButtons,
+  ...props
+}) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
-  const buttons = [];
   const { navigateTo, modelFqn } = props.data;
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: "navigate",
-      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.navigateTo(navigateTo, props.id);
-      }
-    });
-  }
-  if (enableRelationshipBrowser && !!modelFqn) {
-    buttons.push({
-      key: "relationships",
-      icon: /* @__PURE__ */ jsx(IconTransform, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openRelationshipsBrowser(modelFqn);
-      }
-    });
+  let buttons = useMemo(() => {
+    const buttons2 = [];
+    if (navigateTo && enableNavigateTo) {
+      buttons2.push({
+        key: "navigate",
+        icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigateTo(navigateTo, props.id);
+        }
+      });
+    }
+    if (enableRelationshipBrowser && !!modelFqn) {
+      buttons2.push({
+        key: "relationships",
+        icon: /* @__PURE__ */ jsx(IconTransform, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openRelationshipsBrowser(modelFqn);
+        }
+      });
+    }
+    return buttons2;
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons];
   }
-  return /* @__PURE__ */ jsx(ElementActionButtons, { buttons, ...props });
+  return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
 };
 
 export { DeploymentElementActions, ElementActions };

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

@@ -0,0 +1,8 @@
+export { CompoundActions } from './CompoundActions';
+export { DeploymentElementActions, ElementActions } from './ElementActions';
+export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
+export * from './CompoundActions';
+export * from './ElementActions';
+export * from './toolbar/CompoundToolbar';
+export * from './toolbar/ElementToolbar';
+export * from './toolbar/Toolbar';

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

@@ -0,0 +1,10 @@
+import { NodeProps } from '../../../base';
+import { Types } from '../../types';
+import { MemoExoticComponent } from 'react';
+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: MemoExoticComponent<(props: NodeProps<Types.ElementNodeData, "element">) => import("react/jsx-runtime").JSX.Element>;
+export declare const DeploymentNode: MemoExoticComponent<(props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CompoundElementNode: MemoExoticComponent<(props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CompoundDeploymentNode: MemoExoticComponent<(props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => import("react/jsx-runtime").JSX.Element>;
+export declare const ViewGroupNode: MemoExoticComponent<(props: NodeProps<Types.ViewGroupNodeData, "view-group">) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+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 { customNode } from '../../../base/primitives/customNode.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 { 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 { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.js';
+import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
+
+function ElementDetailsButtonWithHandler(props) {
+  const { enableElementDetails } = useEnabledFeatures();
+  const diagram = useDiagram();
+  const fqn = props.data.modelFqn;
+  if (!enableElementDetails || !fqn) return null;
+  return /* @__PURE__ */ jsx(
+    ElementDetailsButton,
+    {
+      ...props,
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openElementDetails(fqn, props.id);
+      }
+    }
+  );
+}
+function CompoundDetailsButtonWithHandler(props) {
+  const { enableElementDetails } = useEnabledFeatures();
+  const diagram = useDiagram();
+  const fqn = props.data.modelFqn;
+  if (!enableElementDetails || !fqn) return null;
+  return /* @__PURE__ */ jsx(
+    CompoundDetailsButton,
+    {
+      ...props,
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openElementDetails(fqn, props.id);
+      }
+    }
+  );
+}
+const ElementNode = customNode((props) => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...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 = customNode((props) => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...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 = customNode((props) => {
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+    !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] });
+});
+CompoundElementNode.displayName = "CompoundElementNode";
+const CompoundDeploymentNode = customNode((props) => {
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+    !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] });
+});
+CompoundDeploymentNode.displayName = "CompoundDeploymentNode";
+const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+ViewGroupNode.displayName = "ViewGroupNode";
+
+export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

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

@@ -2,7 +2,7 @@ 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 { r as reactExports } from '../../../../_virtual/index.js';
+import { useState } from 'react';
 import { themedColors, colors } from './_shared.js';
 
 function ColorButton({
@@ -137,7 +137,7 @@ function OpacityOption({
   elementOpacity = 100,
   onOpacityChange
 }) {
-  const [value, setValue] = reactExports.useState(elementOpacity);
+  const [value, setValue] = useState(elementOpacity);
   useUpdateEffect(() => {
     setValue(elementOpacity);
   }, [elementOpacity]);

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

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { Box, SegmentedControl } from '@mantine/core';
-import { r as reactExports } from '../../../../_virtual/index.js';
+import { useState, useEffect } from 'react';
+import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
-import { useEnabledFeature } from '../../../../context/DiagramFeatures.js';
 
 function CompoundElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       style,
@@ -48,7 +47,7 @@ function CompoundElementToolbar(props) {
   );
 }
 function CompoundDeploymentToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       deploymentFqn,
@@ -92,8 +91,8 @@ function BorderStyleOption({
   elementBorderStyle = "dashed",
   onChange
 }) {
-  const [value, setValue] = reactExports.useState(elementBorderStyle);
-  reactExports.useEffect(() => {
+  const [value, setValue] = useState(elementBorderStyle);
+  useEffect(() => {
     setValue(elementBorderStyle);
   }, [elementBorderStyle]);
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(

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

@@ -2,14 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ElementShapes } from '@likec4/core';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
 import { IconSelector, IconCheck } from '@tabler/icons-react';
+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 { useEnabledFeature } from '../../../../context/DiagramFeatures.js';
 
 function ElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       shape,
@@ -47,7 +47,7 @@ function ElementToolbar(props) {
   );
 }
 function DeploymentElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       shape,

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

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

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { Paper, Stack, Box, Text, Group } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { NodeToolbar } from '@xyflow/react';
-import clsx from 'clsx';
 import { useDiagramContext } from '../../../../hooks/useDiagram.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
 import { toolbarTitle } from './styles.css.js';
@@ -45,7 +45,7 @@ function Toolbar({ title, children, nodeProps, ...props }) {
       children: /* @__PURE__ */ jsx(
         Paper,
         {
-          className: clsx("nodrag", "nopan"),
+          className: cx("nodrag", "nopan"),
           px: 5,
           pb: 8,
           pt: 4,

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

@@ -1,4 +1,4 @@
-import { Fqn, ThemeColor, ViewChange } from '@likec4/core';
+import { DeploymentFqn, Fqn, ThemeColor, ViewChange } from '@likec4/core';
 import { MergeExclusive } from 'type-fest';
 import { NodeProps } from '../../../../base';
 import { Types } from '../../../types';
@@ -16,7 +16,7 @@ export declare const themedColors: ({
     value: `#${string}`;
 })[];
 export declare const colors: {
-    key: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "red" | "sky";
+    key: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "sky";
     value: `#${string}`;
 }[];
 export type ThemeColorKey = typeof themedColors[0]['key'];
@@ -25,8 +25,8 @@ export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttri
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
-export declare function useHandlers(target: Fqn, props: NodeProps<Types.NodeData>): {
-    elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
+export declare function useHandlers(target: Fqn | DeploymentFqn, props: NodeProps<Types.NodeData>): {
+    elementColor: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "muted" | "primary" | "secondary" | "sky";
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: OnStyleChange;
 };
@@ -36,5 +36,5 @@ export declare function BrowseRelationshipsButton({ fqn }: {
 export declare function GoToSourceButton(props: MergeExclusive<{
     elementId: Fqn;
 }, {
-    deploymentId: Fqn;
+    deploymentId: DeploymentFqn;
 }>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -3,7 +3,7 @@ import { invariant, defaultTheme } from '@likec4/core';
 import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { IconFileSymlink, IconTransform } from '@tabler/icons-react';
-import { r as reactExports } from '../../../../_virtual/index.js';
+import { useState } from 'react';
 import { keys } from 'remeda';
 import { useDiagram } from '../../../../hooks/useDiagram.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
@@ -36,7 +36,7 @@ const Tooltip = Tooltip$1.withProps({
 function useHandlers(target, props) {
   const { onChange: triggerOnChange } = useDiagramEventHandlers();
   const diagram = useDiagram();
-  const [originalColor, setOriginalColor] = reactExports.useState(null);
+  const [originalColor, setOriginalColor] = useState(null);
   const onColorPreview = useCallbackRef((color) => {
     if (color === null) {
       invariant(originalColor, "originalColor is null");

package/dist/likec4diagram/types.d.ts

@@ -1,18 +1,21 @@
-import { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core';
+import { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { OptionalKeysOf, Simplify } from 'type-fest';
-import { Base } from '../base';
-import { ReactFlowEdge, ReactFlowNode } from '../base/types';
+import { Base, ReactFlowEdge, ReactFlowNode } from '../base/types';
 type NonOptional<T extends object> = Simplify<{
     [P in Exclude<keyof T, OptionalKeysOf<T>>]: T[P];
 } & {
     [P in OptionalKeysOf<T>]-?: T[P] | undefined;
 }>;
 export declare namespace Types {
-    type LeafNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'position'>> & {
+    type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'position'>> & {
+        /**
+         * View this node belongs to
+         */
+        viewId: ViewId;
         isMultiple?: boolean | undefined;
         icon: string | null;
-    }>;
+    };
     /**
      * Represents element from logical model
      */
@@ -29,13 +32,17 @@ export declare namespace Types {
      */
     type DeploymentElementNodeData = LeafNodeData & {
         navigateTo: ViewId | null;
-        deploymentFqn: Fqn;
+        deploymentFqn: DeploymentFqn;
         modelFqn: Fqn | null;
     };
-    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'position'>> & {
+    type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'position'>> & {
+        /**
+         * View this node belongs to
+         */
+        viewId: ViewId;
         depth: number;
         icon?: IconUrl;
-    }>;
+    };
     type CompoundElementNodeData = CompoundNodeData & {
         modelFqn: Fqn;
         deploymentFqn?: never;
@@ -45,7 +52,7 @@ export declare namespace Types {
         navigateTo: ViewId | null;
     };
     type CompoundDeploymentNodeData = CompoundNodeData & {
-        deploymentFqn: Fqn;
+        deploymentFqn: DeploymentFqn;
         /**
          * If set - this node refers to a model element
          */
@@ -65,11 +72,12 @@ export declare namespace Types {
     type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>;
     type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode;
     type NodeData = Node['data'];
-    type RelationshipEdgeData = Base.EdgeData<NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'notes'>> & {
+    type RelationshipEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'notes'>> & {
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     }>;
     type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>;
     type Edge = RelationshipEdge;
+    type EdgeData = RelationshipEdgeData;
 }
 export {};

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

@@ -3,7 +3,7 @@ import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text,
 import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
 import { useDebouncedCallback } from '@react-hookz/web';
 import { IconLayoutDashboard } from '@tabler/icons-react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useState, forwardRef } from 'react';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
@@ -18,8 +18,8 @@ const ChangeAutoLayoutButton = (props) => {
     onChange
   } = useDiagramEventHandlers();
   const diagram = useDiagram();
-  const [rootRef, setRootRef] = reactExports.useState(null);
-  const [controlsRefs, setControlsRefs] = reactExports.useState({});
+  const [rootRef, setRootRef] = useState(null);
+  const [controlsRefs, setControlsRefs] = useState({});
   const {
     autoLayout,
     viewId
@@ -103,7 +103,7 @@ const ChangeAutoLayoutButton = (props) => {
   );
 };
 const MAX_SPACING = 400;
-const SpacingSliders = reactExports.forwardRef(({
+const SpacingSliders = forwardRef(({
   isVertical,
   nodeSep,
   rankSep,

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

@@ -3,10 +3,10 @@ import { cx } from '@likec4/styles/css';
 import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core';
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react';
 import { m, LayoutGroup } from 'motion/react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { memo } from 'react';
+import { SearchControl } from '../../../components/SearchControl.js';
 import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
 import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from '../../../hooks/useDiagram.js';
-import { LikeC4Search } from '../search/LikeC4Search.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
 import { LayoutDriftNotification } from './LayoutDriftNotification.js';
@@ -70,9 +70,8 @@ const ControlsDefaultLayout = ({
     ]
   }
 );
-const Controls = reactExports.memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
-    viewId: c.view.id,
+const Controls = memo(() => {
+  const { hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
     viewportChanged: c.viewportChangedManually,
     isNotActiveWalkthrough: c.activeWalkthrough === null
@@ -106,7 +105,15 @@ const Controls = reactExports.memo(() => {
         }
       ),
       navigationButtons: enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
-      search: enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
+      search: enableSearch && /* @__PURE__ */ jsx(
+        SearchControl,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            diagram.openSearch();
+          }
+        }
+      ),
       syncInProgressBadge: /* @__PURE__ */ jsx(SyncLayoutBadge, {}),
       actionsGroup: /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
         enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
@@ -114,6 +121,7 @@ const Controls = reactExports.memo(() => {
           {
             onClick: (e) => {
               e.stopPropagation();
+              const viewId = diagram.currentView.id;
               onOpenSource?.({ view: viewId });
             },
             children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { IconMenu } from '@tabler/icons-react';
-import clsx from 'clsx';
 import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
@@ -30,7 +30,7 @@ function DiagramTitlePanel() {
         opacity: 0.05,
         scale: 0.6
       },
-      className: clsx("react-flow__panel", "left", "bottom"),
+      className: cx("react-flow__panel", "left", "bottom"),
       style: {
         transformOrigin: "left center"
       },