@likec4/diagram 1.41.0 → 1.42.1

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

@@ -1,31 +1,17 @@
-import { DeploymentFqn, Fqn, ThemeColor, ViewChange, ColorLiteral } from '@likec4/core';
+import { DeploymentFqn, Fqn, ThemeColor, ViewChange } from '@likec4/core';
 import { MergeExclusive } from 'type-fest';
-import { NodeProps } from '../../../../base';
 import { Types } from '../../../types';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { TooltipProps } from '@mantine/core';
 export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void;
-export declare const themedColors: ({
-    key: "primary";
-    value: ColorLiteral;
-} | {
-    key: "secondary";
-    value: ColorLiteral;
-} | {
-    key: "muted";
-    value: ColorLiteral;
-})[];
-export declare const colors: {
-    key: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "red" | "sky";
-    value: ColorLiteral;
-}[];
-export type ThemeColorKey = typeof themedColors[0]['key'];
-export type ColorKey = typeof colors[0]['key'];
+export declare const SemanticColors: readonly ["primary", "secondary", "muted"];
+export type ThemeColorKey = typeof SemanticColors[number];
+export type ColorKey = Exclude<ThemeColor, ThemeColorKey>;
 export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
-export declare function useHandlers(target: Fqn | DeploymentFqn, props: NodeProps<Types.NodeData>): {
+export declare function useHandlers(target: Fqn | DeploymentFqn, props: Types.NodeProps): {
     elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: OnStyleChange;

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

@@ -1,29 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
-import { invariant, defaultTheme } from '@likec4/core';
+import { invariant } from '@likec4/core';
 import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useState } from 'react';
-import { keys } from 'remeda';
 import { useDiagram } from '../../../../hooks/useDiagram.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.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 IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.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';
 
-const {
-  primary,
-  secondary,
-  muted,
-  ...otherColors
-} = defaultTheme.elements;
-const themedColors = [
-  { key: "primary", value: primary.fill },
-  { key: "secondary", value: secondary.fill },
-  { key: "muted", value: muted.fill }
+const SemanticColors = [
+  "primary",
+  "secondary",
+  "muted"
 ];
-const colors = keys(otherColors).map((key) => ({
-  key,
-  value: defaultTheme.elements[key].fill
-}));
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",
@@ -42,13 +31,13 @@ function useHandlers(target, props) {
     if (color === null) {
       invariant(originalColor, "originalColor is null");
       setOriginalColor(null);
-      diagram.updateNodeData(props.id, {
+      diagram.updateNodeData(props.data.id, {
         color: originalColor
       });
       return;
     }
     setOriginalColor((value) => value ?? props.data.color);
-    diagram.updateNodeData(props.id, {
+    diagram.updateNodeData(props.data.id, {
       color
     });
   });
@@ -61,7 +50,7 @@ function useHandlers(target, props) {
       }
     });
     const { shape, color, ...style } = change;
-    diagram.updateNodeData(props.id, {
+    diagram.updateNodeData(props.data.id, {
       ...shape && { shape },
       ...color && { color },
       style
@@ -124,4 +113,4 @@ function GoToSourceButton(props) {
   ) });
 }
 
-export { BrowseRelationshipsButton, GoToSourceButton, Tooltip, colors, themedColors, useHandlers };
+export { BrowseRelationshipsButton, GoToSourceButton, SemanticColors, Tooltip, useHandlers };

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -1,28 +1,29 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { autoUpdate, computePosition, offset, autoPlacement, size, hide } from '@floating-ui/dom';
 import { nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { VStack, styled, HStack, Box } from '@likec4/styles/jsx';
 import { bleed } from '@likec4/styles/patterns';
-import { Portal, ScrollAreaAutosize, Button, Divider, TooltipGroup, Tooltip as Tooltip$1, Text, ActionIcon } from '@mantine/core';
+import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, Text, ActionIcon } from '@mantine/core';
 import { useActorRef, useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { memo, useEffect, useCallback, useRef, useState, Fragment as Fragment$1, forwardRef } from 'react';
+import { memo, useEffect, useCallback, useRef, useState, useLayoutEffect, Fragment, forwardRef } from 'react';
 import { isEmpty, pipe, map, filter, isTruthy, partition, clamp } from 'remeda';
 import { Link } from '../../components/Link.js';
+import { PortalToContainer } from '../../components/PortalToContainer.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
 import { useDiagram, useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-import { findDiagramEdge, findDiagramNode } from '../../state/utils.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
+import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { RelationshipPopoverActorLogic } from './actor.js';
 import { endpoint, title } from './styles.css.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useRootContainerRef } from '../../context/RootContainerContext.js';
 import { roundDpr } from '../../utils/roundDpr.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
   let selected = null;
@@ -129,7 +130,7 @@ const RelationshipPopover = memo(() => {
     });
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(
     RelationshipPopoverInternal,
     {
       viewId,
@@ -141,7 +142,7 @@ const RelationshipPopover = memo(() => {
       onMouseEnter,
       onMouseLeave
     }
-  );
+  ) });
 });
 const getEdgeLabelElement = (edgeId, container) => {
   return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null;
@@ -160,10 +161,10 @@ const RelationshipPopoverInternal = ({
   const ref = useRef(null);
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();
   const { onOpenSource } = useDiagramEventHandlers();
-  const { portalProps } = useMantinePortalProps();
+  const containerRef = useRootContainerRef();
   const [referenceEl, setReferenceEl] = useState(null);
-  useEffect(() => {
-    setReferenceEl(getEdgeLabelElement(diagramEdge.id, portalProps?.target));
+  useLayoutEffect(() => {
+    setReferenceEl(getEdgeLabelElement(diagramEdge.id, containerRef.current));
   }, [diagramEdge]);
   useEffect(() => {
     const reference = referenceEl;
@@ -173,20 +174,18 @@ const RelationshipPopoverInternal = ({
     }
     let wasCanceled = false;
     const update = () => {
-      computePosition(reference, popper, {
+      void computePosition(reference, popper, {
         placement: "bottom-start",
         middleware: [
-          offset(2),
+          offset(4),
           autoPlacement({
+            crossAxis: true,
             padding: POPOVER_PADDING,
             allowedPlacements: [
               "bottom-start",
-              "bottom-end",
               "top-start",
-              "top-end",
               "right-start",
               "right-end",
-              "left-start",
               "left-end"
             ]
           }),
@@ -224,27 +223,28 @@ const RelationshipPopoverInternal = ({
     };
   }, [referenceEl]);
   const diagram = useDiagram();
-  const navigateTo = enableNavigateTo ? (viewId2) => {
-    diagram.navigateTo(viewId2);
-  } : void 0;
-  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    index > 0 && /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(
-      Relationship,
-      {
-        viewId,
-        relationship,
-        sourceNode,
-        targetNode,
-        edge: diagramEdge,
-        onNavigateTo: navigateTo,
-        ...onOpenSource && enableVscode && {
-          onOpenSource: () => onOpenSource({ relation: relationship.id })
+  const renderRelationship = useCallback(
+    (relationship, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(
+        Relationship,
+        {
+          viewId,
+          relationship,
+          sourceNode,
+          targetNode,
+          onNavigateTo: enableNavigateTo ? (viewId2) => {
+            diagram.navigateTo(viewId2);
+          } : void 0,
+          ...onOpenSource && enableVscode && {
+            onOpenSource: () => onOpenSource({ relation: relationship.id })
+          }
         }
-      }
-    )
-  ] }, relationship.id);
-  return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+      )
+    ] }, relationship.id),
+    [viewId, sourceNode, targetNode, diagram, enableNavigateTo, onOpenSource, enableVscode]
+  );
+  return /* @__PURE__ */ jsx(
     ScrollAreaAutosize,
     {
       ref,
@@ -260,11 +260,13 @@ const RelationshipPopoverInternal = ({
         }
       },
       className: cx(
-        "react-flow__panel nowheel nopan nodrag",
         css({
           layerStyle: "likec4.dropdown",
           p: "0",
-          pointerEvents: "all",
+          pointerEvents: {
+            base: "all",
+            _whenPanning: "none"
+          },
           position: "absolute",
           top: "0",
           left: "0",
@@ -299,11 +301,11 @@ const RelationshipPopoverInternal = ({
                 children: "browse relationships"
               }
             ),
-            direct.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            direct.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
               /* @__PURE__ */ jsx(Label, { children: "DIRECT RELATIONSHIPS" }),
               direct.map(renderRelationship)
             ] }),
-            nested.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            nested.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
               /* @__PURE__ */ jsx(
                 Label,
                 {
@@ -319,12 +321,11 @@ const RelationshipPopoverInternal = ({
         }
       )
     }
-  ) });
+  );
 };
 const Relationship = forwardRef(({
   viewId,
   relationship: r,
-  edge,
   sourceNode,
   targetNode,
   onNavigateTo,
@@ -398,7 +399,7 @@ const Relationship = forwardRef(({
           /* @__PURE__ */ jsx(Label, { children: "technology" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.technology })
         ] }),
-        r.description.nonEmpty && /* @__PURE__ */ jsxs(Fragment, { children: [
+        r.description.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(Label, { children: "description" }),
           /* @__PURE__ */ jsx(
             Box,
@@ -412,11 +413,11 @@ const Relationship = forwardRef(({
                   _dark: "mantine.colors.dark[4]"
                 }
               },
-              children: /* @__PURE__ */ jsx(MarkdownBlock, { value: r.description, fontSize: "sm" })
+              children: /* @__PURE__ */ jsx(Markdown, { value: r.description, fontSize: "sm" })
             }
           )
         ] }),
-        links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(Label, { children: "links" }),
           /* @__PURE__ */ jsx(HStack, { gap: "1", flexWrap: "wrap", children: links.map((link) => /* @__PURE__ */ jsx(Link, { size: "sm", value: link }, link.url)) })
         ] })

package/dist/likec4diagram/relationship-popover/actor.d.ts

@@ -57,7 +57,7 @@ declare const _actorLogic: StateMachine<RelationshipPopoverActorContext, Relatio
         params: unknown;
     };
 }>, "open timeout" | "close timeout" | "long idle", "idle" | "opening" | {
-    active: "hovered" | "opened" | "closing";
+    active: "opened" | "hovered" | "closing";
 }, "opened", NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
     readonly id: "breadcrumbs";
     readonly context: () => {

package/dist/{state → likec4diagram/state}/DiagramActorProvider.d.ts

@@ -1,6 +1,6 @@
 import { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { ViewPadding } from '../LikeC4Diagram.props';
+import { ViewPadding } from '../../LikeC4Diagram.props';
 export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
     view: DiagramView;
     zoomable: boolean;

package/dist/{state → likec4diagram/state}/DiagramActorProvider.js

@@ -3,17 +3,18 @@ import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual, deepEqual } from 'fast-equals';
-import { useRef, useMemo } from 'react';
-import { ErrorBoundary } from '../components/ErrorFallback.js';
-import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
-import { DiagramActorContextProvider } from '../hooks/safeContext.js';
-import { convertToXYFlow } from '../likec4diagram/convert-to-xyflow.js';
-import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
-import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { useRef, useEffect, useMemo } from 'react';
+import { ErrorBoundary } from '../../components/ErrorFallback.js';
+import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
+import { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
+import { CurrentViewModelContext } from '../../context/LikeC4ModelContext.js';
+import { DiagramActorContextProvider } from '../../hooks/safeContext.js';
+import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
+import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
+import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
-import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 
 const selectDynamicViewVariant = (state) => {
   return state.context.dynamicViewVariant;
@@ -69,12 +70,11 @@ function DiagramActorProvider({
     [features],
     shallowEqual
   );
-  useCustomCompareEffect(
+  useEffect(
     () => {
       actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
     },
-    [zoomable, pannable, fitViewPadding, nodesSelectable],
-    deepEqual
+    [zoomable, pannable, fitViewPadding, nodesSelectable]
   );
   const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant);
   const update = useMemo(
@@ -87,6 +87,10 @@ function DiagramActorProvider({
       ...update
     });
   }, [actorRef, update]);
+  useUpdateEffect(() => {
+    if (!_defaultVariant) return;
+    actorRef.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
+  }, [_defaultVariant]);
   return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
     /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children }) }),
     /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
@@ -114,12 +118,34 @@ function CurrentViewModelProvider({ children, actorRef }) {
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
 function DiagramActorEventListener({ actorRef }) {
+  const diagram = useDiagram();
   const {
     onNavigateTo,
-    onOpenSource
+    onOpenSource,
+    handlersRef
   } = useDiagramEventHandlers();
   useOnDiagramEvent("openSource", ({ params }) => onOpenSource?.(params));
   useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo?.(viewId));
+  const wasEmitted = useRef(false);
+  useEffect(() => {
+    if (wasEmitted.current) return;
+    let subscription = actorRef.on(
+      "initialized",
+      ({ instance: xyflow }) => {
+        try {
+          handlersRef.current.onInitialized?.({ diagram, xyflow });
+        } catch (error) {
+          console.error(error);
+        }
+        wasEmitted.current = true;
+        subscription?.unsubscribe();
+        subscription = null;
+      }
+    );
+    return () => {
+      subscription?.unsubscribe();
+    };
+  }, [actorRef, diagram]);
   return null;
 }
 

package/dist/{state → likec4diagram/state}/assign.d.ts

@@ -1,4 +1,4 @@
-import { Types } from '../likec4diagram/types';
+import { Types } from '../types';
 import { ActionArg, Context as DiagramContext } from './diagram-machine';
 export declare function lastClickedNode(params: {
     context: DiagramContext;

package/dist/{state → likec4diagram/state}/assign.js

@@ -3,9 +3,9 @@ import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
 import { omit, mergeDeep, isEmpty } from 'remeda';
 import { assertEvent } from 'xstate';
-import { Base } from '../base/types.js';
-import { SeqParallelAreaColor } from '../likec4diagram/xyflow-sequence/const.js';
-import { VectorImpl, vector } from '../utils/vector.js';
+import { Base } from '../../base/types.js';
+import { VectorImpl, vector } from '../../utils/vector.js';
+import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
 
 function lastClickedNode(params) {
   const { lastClickedNode: lastClickedNode2 } = params.context;
@@ -120,7 +120,6 @@ function focusNodesEdges(params) {
 function updateNavigationHistory({ context, event }) {
   assertEvent(event, "update.view");
   let {
-    view,
     navigationHistory: {
       currentIndex,
       history