@likec4/diagram 1.19.2 → 1.20.0

package/dist/hooks/useDiagram.js

@@ -0,0 +1,119 @@
+import { useTransition, useMemo } from "react";
+import { useDiagramActor } from "./useDiagramActor.js";
+import { DiagramContext } from "../likec4diagram/state/machine.js";
+function useDiagram() {
+  const actor = useDiagramActor();
+  const [, startTransition] = useTransition();
+  return useMemo(() => ({
+    send: actor.send,
+    navigateTo: (viewId, fromNode) => {
+      startTransition(() => {
+        actor.send({
+          type: "navigate.to",
+          viewId,
+          ...fromNode && { fromNode }
+        });
+      });
+    },
+    navigate: (direction) => {
+      startTransition(() => {
+        actor.send({ type: `navigate.${direction}` });
+      });
+    },
+    fitDiagram: (duration = 350) => {
+      startTransition(() => {
+        actor.send({ type: "fitDiagram", duration });
+      });
+    },
+    openRelationshipsBrowser: (fqn) => {
+      startTransition(() => {
+        actor.send({ type: "open.relationshipsBrowser", fqn });
+      });
+    },
+    openSource: (params) => {
+      actor.send({ type: "open.source", ...params });
+    },
+    openElementDetails: (fqn, fromNode) => {
+      startTransition(() => {
+        actor.send({ type: "open.elementDetails", fqn, fromNode });
+      });
+    },
+    openRelationshipDetails: (edgeId) => {
+      startTransition(() => {
+        actor.send({ type: "open.relationshipDetails", edgeId });
+      });
+    },
+    closeOverlay: () => {
+      startTransition(() => {
+        actor.send({ type: "close.overlay" });
+      });
+    },
+    updateNodeData: (nodeId, data) => {
+      actor.send({ type: "update.nodeData", nodeId, data });
+    },
+    updateEdgeData: (edgeId, data) => {
+      actor.send({
+        type: "update.edgeData",
+        edgeId,
+        // @ts-expect-error TODO: fix this
+        data
+      });
+    },
+    scheduleSaveManualLayout: () => {
+      actor.send({ type: "saveManualLayout.schedule" });
+    },
+    /**
+     * @returns true if there was pending request to save layout
+     */
+    cancelSaveManualLayout: () => {
+      const syncState = actor.getSnapshot().context.syncLayoutActorRef.getSnapshot().value;
+      actor.send({ type: "saveManualLayout.cancel" });
+      return syncState === "pending" || syncState === "paused";
+    },
+    align: (mode) => {
+      actor.send({ type: "layout.align", mode });
+    },
+    resetEdgeControlPoints: () => {
+      actor.send({ type: "layout.resetEdgeControlPoints" });
+    },
+    focusNode: (nodeId) => {
+      actor.send({ type: "focus.node", nodeId });
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    currentView: () => actor.getSnapshot().context.view,
+    /**
+     * @warning Do not use in render phase
+     */
+    getState: () => actor.getSnapshot(),
+    /**
+     * @warning Do not use in render phase
+     */
+    getContext: () => actor.getSnapshot().context,
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramNode: (xynodeId) => {
+      return DiagramContext.findDiagramNode(actor.getSnapshot().context, xynodeId);
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramEdge: (xyedgeId) => {
+      return DiagramContext.findDiagramEdge(actor.getSnapshot().context, xyedgeId);
+    },
+    startWalkthrough: () => {
+      actor.send({ type: "walkthrough.start" });
+    },
+    walkthroughStep: (direction = "next") => {
+      actor.send({ type: "walkthrough.step", direction });
+    },
+    stopWalkthrough: () => {
+      actor.send({ type: "walkthrough.end" });
+    }
+  }), [actor]);
+}
+export {
+  useDiagram
+};

package/dist/hooks/useDiagramActor.d.ts

@@ -0,0 +1,5 @@
+import { LikeC4ViewActorRef, MachineSnapshot } from '../likec4diagram/state/machine';
+import { SyncLayoutActorSnapshot } from '../likec4diagram/state/syncManualLayoutActor';
+export declare function useDiagramActor(): LikeC4ViewActorRef;
+export declare function useDiagramActorState<T>(selector: (state: MachineSnapshot) => T, compare?: <A, B>(a: A, b: B) => boolean): T;
+export declare function useDiagramSyncLayoutState<T>(selector: (state: SyncLayoutActorSnapshot) => T, compare?: <A, B>(a: A, b: B) => boolean): T;

package/dist/hooks/useDiagramActor.js

@@ -0,0 +1,21 @@
+import { useCallbackRef } from "@mantine/hooks";
+import { useSelector as useSelector$1 } from "@xstate/react";
+import { shallowEqual } from "fast-equals";
+import { useActorRef, useSelector } from "../likec4diagram/state/actorContext.js";
+function useDiagramActor() {
+  return useActorRef();
+}
+function useDiagramActorState(selector, compare = shallowEqual) {
+  const select = useCallbackRef((s) => selector(s));
+  return useSelector(select, compare);
+}
+function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
+  const syncLayoutActorRef = useDiagramActorState((s) => s.context.syncLayoutActorRef);
+  const select = useCallbackRef(selector);
+  return useSelector$1(syncLayoutActorRef, select, compare);
+}
+export {
+  useDiagramActor,
+  useDiagramActorState,
+  useDiagramSyncLayoutState
+};

package/dist/hooks/useDiagramContext.d.ts

@@ -0,0 +1,3 @@
+import { DiagramContext } from '../likec4diagram/state/machine';
+export declare function useDiagramContext<T>(selector: (state: DiagramContext) => T, compare?: <A, B>(a: A, b: B) => boolean): T;
+export { DiagramContext } from '../likec4diagram/state/machine';

package/dist/hooks/useDiagramContext.js

@@ -0,0 +1,10 @@
+import { useCallbackRef } from "@mantine/hooks";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "../likec4diagram/state/actorContext.js";
+function useDiagramContext(selector, compare = shallowEqual) {
+  const select = useCallbackRef((s) => selector(s.context));
+  return useSelector(select, compare);
+}
+export {
+  useDiagramContext
+};

package/dist/hooks/useMantinePortalProps.js

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
-import { useDiagramState } from "./useDiagramState.js";
+import { useRootContainer } from "../context/RootContainer.js";
 function useMantinePortalProps() {
-  const target = useDiagramState((s) => s.getContainer());
+  const target = useRootContainer();
   return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
 }
 export {

package/dist/hooks/useXYFlow.d.ts

@@ -1,10 +1,10 @@
-import { DiagramFlowTypes } from '../xyflow/types';
-import { ReactFlowInstance, InternalNode, ReactFlowState } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
+import { Types } from '../likec4diagram/types';
+import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
-export declare const useXYFlow: () => ReactFlowInstance<DiagramFlowTypes.Node, {
+import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
+export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
-    type: "relationship";
     source: string;
     target: string;
     sourceHandle?: string | null;
@@ -13,7 +13,6 @@ export declare const useXYFlow: () => ReactFlowInstance<DiagramFlowTypes.Node, {
     hidden?: boolean;
     deletable?: boolean;
     selectable?: boolean;
-    data: DiagramFlowTypes.DiagramEdgeData;
     selected?: boolean;
     markerStart?: EdgeMarkerType;
     markerEnd?: EdgeMarkerType;
@@ -30,17 +29,31 @@ export declare const useXYFlow: () => ReactFlowInstance<DiagramFlowTypes.Node, {
     className?: string;
     reconnectable?: boolean | HandleType;
     focusable?: boolean;
+    type: "relationship";
+    data: {
+        id: EdgeId;
+        label: string | null;
+        points: NonEmptyArray<Point>;
+        technology: string | undefined;
+        color: Color | undefined;
+        navigateTo: ViewId<string> | undefined;
+        dir: "forward" | "back" | "both" | undefined;
+        head: RelationshipArrowType | undefined;
+        tail: RelationshipArrowType | undefined;
+        line: RelationshipLineType | undefined;
+        notes: string | undefined;
+        labelBBox: BBox | null | undefined;
+        labelXY: XYPosition | null;
+        controlPoints: XYPosition[] | undefined | null;
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../base").Base.Dimmed;
+    };
 }>;
-export declare const useXYNodesData: {
-    (nodeId: string): Pick<DiagramFlowTypes.Node, "id" | "type" | "data"> | null;
-    (nodeIds: string[]): Pick<DiagramFlowTypes.Node, "id" | "type" | "data">[];
-};
-export declare const useXYInternalNode: (id: string) => InternalNode<DiagramFlowTypes.Node> | undefined;
-export declare function useXYStore<StateSlice = unknown>(selector: (state: DiagramFlowTypes.XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
+export declare function useXYStore<StateSlice = unknown>(selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
-    getState: () => ReactFlowState<DiagramFlowTypes.Node, {
+    getState: () => ReactFlowState<Types.Node, {
         id: string;
-        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -49,7 +62,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -66,10 +78,29 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
     }>;
-    setState: (partial: ReactFlowState<DiagramFlowTypes.Node, {
+    setState: (partial: ReactFlowState<Types.Node, {
         id: string;
-        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -78,7 +109,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -95,9 +125,28 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
-    }> | Partial< ReactFlowState<DiagramFlowTypes.Node, {
-        id: string;
         type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
+    }> | Partial<ReactFlowState<Types.Node, {
+        id: string;
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -106,7 +155,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -123,9 +171,28 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
-    }>> | ((state: ReactFlowState<DiagramFlowTypes.Node, {
-        id: string;
         type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
+    }>> | ((state: ReactFlowState<Types.Node, {
+        id: string;
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -134,7 +201,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -151,9 +217,28 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
-    }>) => ReactFlowState<DiagramFlowTypes.Node, {
-        id: string;
         type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
+    }>) => ReactFlowState<Types.Node, {
+        id: string;
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -162,7 +247,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -179,9 +263,28 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
-    }> | Partial< ReactFlowState<DiagramFlowTypes.Node, {
-        id: string;
         type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
+    }> | Partial<ReactFlowState<Types.Node, {
+        id: string;
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -190,7 +293,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -207,10 +309,29 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
     }>>), replace?: boolean | undefined) => void;
-    subscribe: (listener: (state: ReactFlowState<DiagramFlowTypes.Node, {
+    subscribe: (listener: (state: ReactFlowState<Types.Node, {
         id: string;
-        type: "relationship";
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -219,7 +340,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -236,9 +356,28 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
-    }>, prevState: ReactFlowState<DiagramFlowTypes.Node, {
-        id: string;
         type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
+    }>, prevState: ReactFlowState<Types.Node, {
+        id: string;
         source: string;
         target: string;
         sourceHandle?: string | null;
@@ -247,7 +386,6 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: DiagramFlowTypes.DiagramEdgeData;
         selected?: boolean;
         markerStart?: EdgeMarkerType;
         markerEnd?: EdgeMarkerType;
@@ -264,7 +402,27 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        type: "relationship";
+        data: {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
+        };
     }>) => void) => () => void;
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
-export declare function useXYEdgesData(edgeIds: string[]): Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[];
+export declare const useXYInternalNode: (id: string) => InternalNode<Types.Node> | undefined;

package/dist/hooks/useXYFlow.js

@@ -1,20 +1,18 @@
-import { useReactFlow, useStoreApi, useInternalNode, useStore, useNodesData } from "@xyflow/react";
+import { useCallbackRef } from "@mantine/hooks";
+import { useStore, useStoreApi, useReactFlow, useInternalNode } from "@xyflow/react";
 import { shallowEqual } from "fast-equals";
-import "react";
 const useXYFlow = useReactFlow;
-const useXYNodesData = useNodesData;
-const useXYInternalNode = useInternalNode;
 function useXYStore(selector, equalityFn) {
   return useStore(
-    selector,
+    useCallbackRef(selector),
     shallowEqual
   );
 }
 const useXYStoreApi = useStoreApi;
+const useXYInternalNode = useInternalNode;
 export {
   useXYFlow,
   useXYInternalNode,
-  useXYNodesData,
   useXYStore,
   useXYStoreApi
 };

package/dist/index.d.ts

@@ -1,11 +1,12 @@
+export { FramerMotionConfig } from './context/FramerMotionConfig';
 export { LikeC4Diagram } from './LikeC4Diagram';
 export type { LikeC4DiagramProps } from './LikeC4Diagram';
-export { useLikeC4DiagramView, useLikeC4ElementModel, useLikeC4ElementsTree, useLikeC4Model, useLikeC4View, useLikeC4ViewModel, useLikeC4Views, } from './likec4model';
+export { Overlay } from './overlays/overlay/Overlay';
+export { useLikeC4ElementsTree, useLikeC4Model, } from './likec4model';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider';
 export { useSetState } from './hooks/useSetState';
 export { useUpdateEffect } from './hooks/useUpdateEffect';
 export { vars, xyvars } from './theme-vars';
 export type * from './LikeC4Diagram.props';
-export type * from './xyflow/types';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -1,23 +1,22 @@
 /* empty css                                          */
+import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
 import { LikeC4Diagram } from "./LikeC4Diagram.js";
+import { Overlay } from "./overlays/overlay/Overlay.js";
 import { LikeC4ModelProvider } from "./LikeC4ModelProvider.js";
 import { useSetState } from "./hooks/useSetState.js";
 import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
 import { StaticLikeC4Diagram } from "./StaticLikeC4Diagram.js";
-import { useLikeC4DiagramView, useLikeC4ElementModel, useLikeC4Model, useLikeC4View, useLikeC4ViewModel, useLikeC4Views } from "./likec4model/useLikeC4Model.js";
 import { useLikeC4ElementsTree } from "./likec4model/useLikeC4ElementsTree.js";
+import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
 import { vars, xyvars } from "./theme-vars.css.js";
 export {
+  FramerMotionConfig,
   LikeC4Diagram,
   LikeC4ModelProvider,
+  Overlay,
   StaticLikeC4Diagram,
-  useLikeC4DiagramView,
-  useLikeC4ElementModel,
   useLikeC4ElementsTree,
   useLikeC4Model,
-  useLikeC4View,
-  useLikeC4ViewModel,
-  useLikeC4Views,
   useSetState,
   useUpdateEffect,
   vars,

package/dist/likec4diagram/DiagramActor.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { Input } from './state/machine';
+type ActorContextInput = Omit<Input, 'xystore' | 'features'>;
+export declare function DiagramActor({ input, children }: PropsWithChildren<{
+    input: ActorContextInput;
+}>): import("react/jsx-runtime").JSX.Element;
+export {};