@likec4/diagram 1.30.0 → 1.31.0

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

@@ -1,15 +1,15 @@
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
-export declare const RelationshipEdge: NamedExoticComponent<{
+export declare const RelationshipEdge: FunctionComponent<{
     id: string;
     selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
     style?: CSSProperties;
+    animated?: boolean;
     source: string;
     target: string;
-    animated?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;
@@ -28,11 +28,10 @@ export declare const RelationshipEdge: NamedExoticComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: {
+    data: import("../../../base").Base.EdgeData & {
         hovered?: boolean;
         active?: boolean;
         dimmed?: import("../../../base").Base.Dimmed;
-    } & {
         sourceFqn: Fqn;
         targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;
@@ -41,8 +40,5 @@ export declare const RelationshipEdge: NamedExoticComponent<{
         navigateTo: ViewId | null;
         line: RelationshipLineType;
         existsInCurrentView: boolean;
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
     };
 }>;

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

@@ -5,7 +5,7 @@ import { getBezierPath } from '@xyflow/system';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser } from '../hooks.js';
 import { customEdge } from '../../../base/primitives/customEdge.js';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.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';
@@ -14,7 +14,7 @@ import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelConta
 
 const RelationshipEdge = customEdge((props) => {
   const browser = useRelationshipsBrowser();
-  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { enableNavigateTo } = useEnabledFeatures();
   const {
     id,
     data: {

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

@@ -1,15 +1,17 @@
 import { NodeProps } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
-import { NamedExoticComponent } from 'react';
+import { MemoExoticComponent } from 'react';
 import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
-export declare const ElementNode: NamedExoticComponent<NodeProps<{
+export declare const ElementNode: MemoExoticComponent<(props: NodeProps<{
+    hovered?: boolean;
+    dimmed?: import("../../../base").Base.Dimmed;
     width: number;
     height: number;
     style: ElementStyle;
+    color: Color;
     title: string;
     technology: string | null;
     description: string | null;
-    color: Color;
     shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
     navigateTo: ViewId<string> | null | undefined;
     column: RelationshipsBrowserTypes.Column;
@@ -17,13 +19,13 @@ export declare const ElementNode: NamedExoticComponent<NodeProps<{
     icon: string | null;
     ports: RelationshipsBrowserTypes.Ports;
     existsInCurrentView: boolean;
+}, string>) => import("react/jsx-runtime").JSX.Element>;
+export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<{
     hovered?: boolean;
     dimmed?: import("../../../base").Base.Dimmed;
-}>>;
-export declare const CompoundNode: NamedExoticComponent<NodeProps<{
     style: ElementStyle;
-    title: string;
     color: Color;
+    title: string;
     shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
     column: RelationshipsBrowserTypes.Column;
     fqn: Fqn;
@@ -31,14 +33,8 @@ export declare const CompoundNode: NamedExoticComponent<NodeProps<{
     icon: IconUrl;
     ports: RelationshipsBrowserTypes.Ports;
     existsInCurrentView: boolean;
-    hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
-}>>;
-export declare const EmptyNode: NamedExoticComponent<NodeProps<{
-    column: RelationshipsBrowserTypes.Column;
-    hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
-}>>;
+}, string>) => import("react/jsx-runtime").JSX.Element>;
+export declare const EmptyNode: MemoExoticComponent<(props: NodeProps<RelationshipsBrowserTypes.EmptyNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
 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'>>;

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

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
-import * as m from 'motion/react-m';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActions } from './ElementActions.js';
 import { EmptyNode as EmptyNode$1 } from './EmptyNode.js';
@@ -27,7 +26,7 @@ const ElementDetailsButtonWithHandler = (props) => {
   );
 };
 const ElementNode = customNode((props) => {
-  return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
+  return /* @__PURE__ */ jsxs(ElementNodeContainer, { layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),

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

@@ -1,71 +1,14 @@
-import { Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, XYStoreApi, Events } from './actor';
+import { Fqn } from '@likec4/core';
+import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, Context, Events } from './actor';
 import { LayoutRelationshipsViewResult } from './layout';
-import { Context, ReactNode, CSSProperties } from 'react';
-import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { Context } from 'react';
 export declare const RelationshipsBrowserActorContext: Context<RelationshipsBrowserActorRef | null>;
 export declare function useRelationshipsBrowserActor(): RelationshipsBrowserActorRef;
 export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipsBrowserSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
 export declare function useRelationshipsBrowser(): {
     actor: RelationshipsBrowserActorRef;
     readonly rootElementId: string;
-    getState: () => Readonly<{
-        subject: Fqn;
-        viewId: ViewId | null;
-        scope: "global" | "view";
-        closeable: boolean;
-        enableSelectSubject: boolean;
-        enableChangeScope: boolean;
-        xyflow: ( GeneralHelpers<import("./_types").RelationshipsBrowserTypes.Node, {
-            id: string;
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: EdgeMarkerType;
-            markerEnd?: EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: ReactNode;
-            labelStyle?: CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: CSSProperties;
-            className?: string;
-            reconnectable?: boolean | HandleType;
-            focusable?: boolean;
-            type: "relationship";
-            data: {
-                sourceFqn: Fqn;
-                targetFqn: Fqn;
-                relations: NonEmptyArray<RelationId>;
-                color: Color | undefined;
-                label: string | null;
-                navigateTo: ViewId | null;
-                line: RelationshipLineType;
-                existsInCurrentView: boolean;
-                hovered?: boolean;
-                active?: boolean;
-                dimmed?: import("../../base").Base.Dimmed;
-            };
-        }> & ViewportHelperFunctions & {
-            viewportInitialized: boolean;
-        }) | null;
-        xystore: XYStoreApi | null;
-        layouted: LayoutRelationshipsViewResult | null;
-        navigateFromNode: string | null;
-        xynodes: import("./_types").RelationshipsBrowserTypes.Node[];
-        xyedges: import("./_types").RelationshipsBrowserTypes.Edge[];
-    }>;
+    getState: () => Context;
     send: (event: Events) => void;
     updateView: (layouted: LayoutRelationshipsViewResult) => void;
     changeScope: (scope: "global" | "view") => void;

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

@@ -2,11 +2,11 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../../_virtual/index.js';
+import { createContext, useMemo, useContext } from 'react';
 
-const RelationshipsBrowserActorContext = reactExports.createContext(null);
+const RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
-  return nonNullable(reactExports.useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
+  return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
 function useRelationshipsBrowserState(selector, compare = shallowEqual) {
   const actor = useRelationshipsBrowserActor();
@@ -14,7 +14,7 @@ function useRelationshipsBrowserState(selector, compare = shallowEqual) {
 }
 function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor();
-  return reactExports.useMemo(() => ({
+  return useMemo(() => ({
     actor,
     get rootElementId() {
       return `relationships-browser-${actor.sessionId.replaceAll(":", "_")}`;

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

@@ -1,10 +1,9 @@
-import { r as reactExports } from '../../_virtual/index.js';
+import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
+import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
 import { toArray, invariant, ifind, DefaultMap } from '@likec4/core';
 import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, unique, tap, reduce, sortBy } from 'remeda';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
-import { computeRelationshipsView } from '../../packages/core/src/compute-view/relationships-view/compute.js';
-import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
 
 const Sizes = {
   dagre: {
@@ -454,7 +453,7 @@ function layoutRelationshipsView(data, scope) {
 }
 function useRelationshipsView(subject, viewId, scope) {
   const model = useLikeC4Model(true);
-  return reactExports.useMemo(() => {
+  return useMemo(() => {
     const view = viewId ? model.findView(viewId) : null;
     const data = layoutRelationshipsView(
       computeRelationshipsView(subject, model, viewId, scope),

package/dist/state/DiagramActorProvider.js

@@ -3,7 +3,7 @@ import { useDeepCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
+import { useEffect } from 'react';
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
@@ -29,7 +29,7 @@ function DiagramActorProvider({
         "trigger:NavigateTo": (_, { viewId }) => {
           setTimeout(() => {
             handlersRef.current.onNavigateTo?.(viewId);
-          }, 30);
+          }, 50);
         },
         "trigger:OnChange": (_, params) => {
           handlersRef.current.onChange?.(params);
@@ -63,7 +63,7 @@ function DiagramActorProvider({
   useUpdateEffect(() => {
     actorRef.send({ type: "update.inputs", inputs });
   }, [inputs]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     actorRef.send({ type: "update.features", features });
   }, [features]);
   const { xyedges, xynodes } = useViewToNodesEdges({