@likec4/diagram 1.36.0 → 1.37.0

package/dist/overlays/overlay/Overlay.css.d.ts

@@ -2,7 +2,7 @@ import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
 export declare const backdropBlur = "--_blur";
 export declare const backdropOpacity = "--_opacity";
 export declare const level = "--_level";
-export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
+export declare const overlay: SlotRecipeRuntimeFn<"dialog" | "body", {
     fullscreen: {
         false: {
             dialog: {

package/dist/overlays/relationship-details/actor.d.ts

@@ -5,7 +5,7 @@ import { Base } from '../../base';
 import { RelationshipDetailsTypes } from './_types';
 import { LayoutResult } from './layout';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
 type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>>;
 export type Input = ExclusiveUnion<{
@@ -619,6 +619,8 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
                             className?: string;
                             reconnectable?: boolean | HandleType;
                             focusable?: boolean;
+                            ariaRole?: AriaRole;
+                            domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                             type: "relationship";
                             data: {
                                 hovered?: boolean;

package/dist/overlays/relationship-details/hooks.d.ts

@@ -1,6 +1,6 @@
 import { EdgeId, Fqn, ViewId, RelationId, Color, RelationshipLineType, RichTextOrEmpty, BBox } from '@likec4/core';
 import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from './actor';
-import { Context, ReactNode, CSSProperties } from 'react';
+import { Context, ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
 import { Dimmed } from '../../base/types.Base';
@@ -47,6 +47,8 @@ export declare function useRelationshipDetails(): {
             className?: string;
             reconnectable?: boolean | HandleType;
             focusable?: boolean;
+            ariaRole?: AriaRole;
+            domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
             type: "relationship";
             data: {
                 hovered?: boolean;
@@ -90,6 +92,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;
@@ -130,6 +134,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;
@@ -169,6 +175,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;
@@ -208,6 +216,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;
@@ -247,6 +257,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;
@@ -286,6 +298,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;
@@ -326,6 +340,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;
@@ -365,6 +381,8 @@ export declare function useRelationshipDetails(): {
                 className?: string;
                 reconnectable?: boolean | HandleType;
                 focusable?: boolean;
+                ariaRole?: AriaRole;
+                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                 type: "relationship";
                 data: {
                     hovered?: boolean;

package/dist/overlays/relationship-details/layout-to-xyflow.js

@@ -121,7 +121,6 @@ function layoutResultToXYFlow(layout) {
       target: ns + target,
       sourceHandle: edge.sourceHandle,
       targetHandle: edge.targetHandle,
-      zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
       deletable: false,

package/dist/overlays/relationship-details/layout.js

@@ -1,7 +1,6 @@
 import { treeFromElements } from '@likec4/core/compute-view/relationships';
 import dagre from '@dagrejs/dagre';
-import { RichText, invariant } from '@likec4/core';
-import { ifind, DefaultMap } from '@likec4/core/utils';
+import { ifind, RichText, DefaultMap, invariant } from '@likec4/core';
 import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
 
 const Sizes = {

package/dist/overlays/relationships-browser/actor.d.ts

@@ -5,7 +5,7 @@ import { Base } from '../../base';
 import { RelationshipsBrowserTypes } from './_types';
 import { LayoutRelationshipsViewResult } from './layout';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
 export type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>>;
 export declare const layouter: PromiseActorLogic<{
@@ -202,6 +202,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                         className?: string;
                         reconnectable?: boolean | HandleType;
                         focusable?: boolean;
+                        ariaRole?: AriaRole;
+                        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                         type: "relationship";
                         data: {
                             hovered?: boolean;
@@ -255,6 +257,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                         className?: string;
                         reconnectable?: boolean | HandleType;
                         focusable?: boolean;
+                        ariaRole?: AriaRole;
+                        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                         type: "relationship";
                         data: {
                             hovered?: boolean;
@@ -315,6 +319,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                         className?: string;
                         reconnectable?: boolean | HandleType;
                         focusable?: boolean;
+                        ariaRole?: AriaRole;
+                        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                         type: "relationship";
                         data: {
                             hovered?: boolean;
@@ -352,7 +358,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
     }) => {
         subject: Fqn;
         viewId: ViewId | null;
-        scope: "view" | "global";
+        scope: "global" | "view";
         closeable: boolean;
         enableSelectSubject: boolean;
         enableChangeScope: boolean;
@@ -800,6 +806,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                 className?: string;
                                 reconnectable?: boolean | HandleType;
                                 focusable?: boolean;
+                                ariaRole?: AriaRole;
+                                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                 type: "relationship";
                                 data: {
                                     hovered?: boolean;
@@ -844,6 +852,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;
@@ -885,6 +895,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;
@@ -925,6 +937,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;
@@ -965,6 +979,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;
@@ -1005,6 +1021,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;
@@ -1045,6 +1063,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;
@@ -1086,6 +1106,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;
@@ -1126,6 +1148,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
                                     className?: string;
                                     reconnectable?: boolean | HandleType;
                                     focusable?: boolean;
+                                    ariaRole?: AriaRole;
+                                    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
                                     type: "relationship";
                                     data: {
                                         hovered?: boolean;

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { NodeProps } from '../../../base';
+import { RelationshipsBrowserTypes } from '../_types';
+type NodeTypes = {
+    element: FC<NodeProps<RelationshipsBrowserTypes.ElementNodeData>>;
+    compound: FC<NodeProps<RelationshipsBrowserTypes.CompoundNodeData>>;
+    empty: FC<NodeProps<RelationshipsBrowserTypes.EmptyNodeData>>;
+};
+export declare const ElementNode: NodeTypes['element'];
+export declare const CompoundNode: NodeTypes['compound'];
+export declare const EmptyNode: NodeTypes['empty'];
+type ElementPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
+export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
+type CompoundPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
+export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -5,9 +5,9 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActions } from './ElementActions.js';
 import { EmptyNode as EmptyNode$1 } from './EmptyNode.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 { 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';
@@ -27,7 +27,7 @@ const ElementDetailsButtonWithHandler = (props) => {
     }
   );
 };
-const ElementNode = customNode((props) => {
+const ElementNode = (props) => {
   const { enableElementTags } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -37,17 +37,27 @@ const ElementNode = customNode((props) => {
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })
   ] }, props.id);
-});
-const CompoundNode = customNode((props) => {
+};
+const CompoundNode = (props) => {
+  const diagram = useDiagram();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { layoutId: props.id, nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(
+      CompoundDetailsButton,
+      {
+        ...props,
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openElementDetails(props.data.fqn);
+        }
+      }
+    ),
     /* @__PURE__ */ jsx(CompoundPorts, { ...props })
   ] }, props.id);
-});
-const EmptyNode = customNode((props) => {
+};
+const EmptyNode = (props) => {
   return /* @__PURE__ */ jsx(EmptyNode$1, { ...props });
-});
+};
 const ElementPorts = ({ data: { ports, height: h } }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ports.in.map((id, i) => /* @__PURE__ */ jsx(

package/dist/overlays/relationships-browser/useViewToNodesEdges.js

@@ -137,7 +137,6 @@ function viewToNodesEdge(view) {
       target: ns + target,
       sourceHandle: edge.sourceHandle,
       targetHandle: edge.targetHandle,
-      zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
       // deletable: false,

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
 import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"root" | "title" | "description" | "icon" | "descriptionColor", SlotRecipeVariantRecord<"root" | "title" | "description" | "icon" | "descriptionColor">>;
+export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;

package/dist/state/DiagramActorProvider.js

@@ -3,12 +3,11 @@ import { useCustomCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual, deepEqual } from 'fast-equals';
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect } 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 { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
 import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
@@ -90,31 +89,14 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { viewId: view.id, children }) }) }) });
 }
 function CurrentViewModelProvider({
-  children
+  children,
+  viewId
 }) {
-  const viewId = useCurrentViewId();
   const likec4model = useLikeC4Model();
-  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId));
-  useEffect(() => {
-    setViewmodel((current) => {
-      const nextviewmodel = likec4model.findView(viewId);
-      if (!nextviewmodel) {
-        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
-          currentViewModel: current,
-          likec4model
-        });
-        return current;
-      }
-      return nextviewmodel;
-    });
-  }, [likec4model, viewId]);
-  if (!viewmodel.isDiagram()) {
-    console.warn(`View "${viewId}" is not diagram.
-Make sure you have LikeC4ModelProvider with layouted model.`);
-  }
+  const viewmodel = likec4model.findView(viewId);
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
 }
 function useActorEventHandlers(actorRef) {

package/dist/state/assign.js

@@ -237,22 +237,36 @@ function navigateForward({ context }) {
 }
 function updateNodeData({ context, event }) {
   assertEvent(event, "update.nodeData");
-  const xynodes = context.xynodes.map(
-    (node) => node.id !== event.nodeId ? node : {
-      ...node,
-      data: mergeDeep(node.data, event.data)
+  const xynodes = context.xynodes.map((node) => {
+    if (node.id !== event.nodeId) {
+      return node;
+    }
+    const data = mergeDeep(node.data, event.data);
+    if (deepEqual(data, node.data)) {
+      return node;
     }
-  );
+    return {
+      ...node,
+      data
+    };
+  });
   return { xynodes };
 }
 function updateEdgeData({ context, event }) {
   assertEvent(event, "update.edgeData");
-  const xyedges = context.xyedges.map(
-    (edge) => edge.id !== event.edgeId ? edge : {
-      ...edge,
-      data: mergeDeep(edge.data, event.data)
+  const xyedges = context.xyedges.map((edge) => {
+    if (edge.id !== event.edgeId) {
+      return edge;
+    }
+    const data = mergeDeep(edge.data, event.data);
+    if (deepEqual(data, edge.data)) {
+      return edge;
     }
-  );
+    return {
+      ...edge,
+      data
+    };
+  });
   return { xyedges };
 }
 function resetEdgeControlPoints({ context }) {