@likec4/diagram 1.55.0 → 1.56.0

package/dist/editor/useEditorActorLogic.js

@@ -1,47 +1,35 @@
-import { useMemo } from 'react';
-import { fromPromise } from 'xstate';
-import { applyChangesToManualLayout } from './applyChangesToManualLayout.js';
-import { editorActorLogic } from './editorActor.states.js';
-import { useOptionalLikeC4Editor } from './LikeC4EditorProvider.js';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-
-const promisify = (fn) => {
-  return Promise.resolve().then(() => fn());
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../hooks/useCallbackRef.js";
+import { useOptionalLikeC4Editor } from "./LikeC4EditorProvider.js";
+import { editorActorLogic } from "./editorActor.states.js";
+import { applyChangesToManualLayout } from "./applyChangesToManualLayout.js";
+import { useMemo } from "react";
+import { fromPromise } from "xstate";
+//#region src/editor/useEditorActorLogic.ts
+var promisify = (fn) => {
+	return Promise.resolve().then(() => fn());
 };
 function useEditorActorLogic() {
-  const port = useOptionalLikeC4Editor();
-  const applyLatest = useCallbackRef(
-    async ({ input: { viewId, current } }) => {
-      if (!port) {
-        console.error("No editor port available for applying latest to manual layout");
-        return Promise.reject(new Error("No editor port"));
-      }
-      const manual = await promisify(() => current ?? port.fetchView(viewId, "manual"));
-      const latest = await promisify(() => port.fetchView(viewId, "auto"));
-      const updated = applyChangesToManualLayout(manual, latest);
-      return {
-        updated
-      };
-    }
-  );
-  const executeChange = useCallbackRef(
-    async ({ input }) => {
-      if (!port) {
-        console.error("No editor port available for executing change");
-        return Promise.reject(new Error("No editor port"));
-      }
-      for (const change of input.changes) {
-        await promisify(() => port.handleChange(input.viewId, change));
-      }
-      return {};
-    }
-  );
-  return useMemo(() => editorActorLogic.provide({
-    actors: {
-      applyLatest: fromPromise(applyLatest),
-      executeChange: fromPromise(executeChange)
-    }
-  }), [applyLatest, executeChange]);
+	const port = useOptionalLikeC4Editor();
+	const applyLatest = useCallbackRef(async ({ input: { viewId, current } }) => {
+		if (!port) {
+			console.error("No editor port available for applying latest to manual layout");
+			return Promise.reject(/* @__PURE__ */ new Error("No editor port"));
+		}
+		return { updated: applyChangesToManualLayout(await promisify(() => current ?? port.fetchView(viewId, "manual")), await promisify(() => port.fetchView(viewId, "auto"))) };
+	});
+	const executeChange = useCallbackRef(async ({ input }) => {
+		if (!port) {
+			console.error("No editor port available for executing change");
+			return Promise.reject(/* @__PURE__ */ new Error("No editor port"));
+		}
+		for (const change of input.changes) await promisify(() => port.handleChange(input.viewId, change));
+		return {};
+	});
+	return useMemo(() => editorActorLogic.provide({ actors: {
+		applyLatest: fromPromise(applyLatest),
+		executeChange: fromPromise(executeChange)
+	} }), [applyLatest, executeChange]);
 }
-
+//#endregion
 export { useEditorActorLogic };

package/dist/hooks/safeContext.js

@@ -1,24 +1,24 @@
-import { useContext, createContext } from 'react';
-
-const DiagramActorSafeContext = createContext(null);
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+//#region src/hooks/safeContext.tsx
+/**
+* To improve experience with HMR, we move context to separate files and use as a boundary for hooks
+*/
+var DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
-const DiagramApiSafeContext = createContext(null);
+var DiagramApiSafeContext = createContext(null);
 DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
-const DiagramActorContextProvider = DiagramActorSafeContext.Provider;
-const DiagramApiContextProvider = DiagramApiSafeContext.Provider;
+var DiagramActorContextProvider = DiagramActorSafeContext.Provider;
+var DiagramApiContextProvider = DiagramApiSafeContext.Provider;
 function useDiagramActorRef() {
-  const ctx = useContext(DiagramActorSafeContext);
-  if (ctx === null) {
-    throw new Error("DiagramActorRef is not provided");
-  }
-  return ctx;
+	const ctx = useContext(DiagramActorSafeContext);
+	if (ctx === null) throw new Error("DiagramActorRef is not provided");
+	return ctx;
 }
 function useDiagram() {
-  const ctx = useContext(DiagramApiSafeContext);
-  if (ctx === null) {
-    throw new Error("DiagramApi is not provided");
-  }
-  return ctx;
+	const ctx = useContext(DiagramApiSafeContext);
+	if (ctx === null) throw new Error("DiagramApi is not provided");
+	return ctx;
 }
-
+//#endregion
 export { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram, useDiagramActorRef };

package/dist/hooks/useCallbackRef.js

@@ -1,14 +1,21 @@
-import { useRef, useMemo } from 'react';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useMemo, useRef } from "react";
+//#region src/hooks/useCallbackRef.ts
+/**
+* Memoizes a callback function so that it will not be recreated on every render.
+* The returned function is guaranteed to be the same reference across renders.
+* @param callback the callback function to memoize
+* @returns the memoized callback function
+*/
 function useCallbackRef(callback) {
-  const ref = useRef(callback);
-  ref.current = callback;
-  return useMemo(() => {
-    function callbackRef(...args) {
-      return ref.current?.(...args);
-    }
-    return callbackRef;
-  }, []);
+	const ref = useRef(callback);
+	ref.current = callback;
+	return useMemo(() => {
+		function callbackRef(...args) {
+			return ref.current?.(...args);
+		}
+		return callbackRef;
+	}, []);
 }
-
+//#endregion
 export { useCallbackRef };

package/dist/hooks/useCurrentView.js

@@ -1,12 +1,21 @@
-import { useDiagramSnapshot, selectDiagramActor } from './useDiagram.js';
-
-const selectViewId = selectDiagramActor((s) => s.context.view.id);
+import "../_virtual/_rolldown/runtime.js";
+import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
+//#region src/hooks/useCurrentView.ts
+var selectViewId = selectDiagramActor((s) => s.context.view.id);
+/**
+* Returns current view id
+* Should be used only inside LikeC4Diagram
+*/
 function useCurrentViewId() {
-  return useDiagramSnapshot(selectViewId);
+	return useDiagramSnapshot(selectViewId);
 }
-const selectView = selectDiagramActor((s) => s.context.view);
+var selectView = selectDiagramActor((s) => s.context.view);
+/**
+* Returns current view
+* Should be used only inside LikeC4Diagram
+*/
 function useCurrentView() {
-  return useDiagramSnapshot(selectView);
+	return useDiagramSnapshot(selectView);
 }
-
+//#endregion
 export { useCurrentView, useCurrentViewId };

package/dist/hooks/useCurrentViewModel.js

@@ -1,11 +1,16 @@
-import { useOptionalCurrentViewModel } from '../context/LikeC4ModelContext.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.js";
+//#region src/hooks/useCurrentViewModel.ts
+/**
+* Hook to get the current view model from the context.
+* Throws an error if no view model is found in the context.
+*
+* @see useOptionalCurrentViewModel
+*/
 function useCurrentViewModel() {
-  const vm = useOptionalCurrentViewModel();
-  if (!vm) {
-    throw new Error("No CurrentViewModelContext found");
-  }
-  return vm;
+	const vm = useOptionalCurrentViewModel();
+	if (!vm) throw new Error("No CurrentViewModelContext found");
+	return vm;
 }
-
-export { useCurrentViewModel, useOptionalCurrentViewModel };
+//#endregion
+export { useCurrentViewModel };

package/dist/hooks/useDiagram.js

@@ -1,47 +1,65 @@
-import { useSelector } from '@xstate/react';
-import { shallowEqual } from 'fast-equals';
-import { useCallback, useRef, useEffect } from 'react';
-import { useDiagramActorRef } from './safeContext.js';
-export { useDiagram } from './safeContext.js';
-import { useCallbackRef } from './useCallbackRef.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "./useCallbackRef.js";
+import { useDiagramActorRef } from "./safeContext.js";
+import { useCallback, useEffect, useRef } from "react";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
+//#region src/hooks/useDiagram.ts
+/**
+* Helper to create a selector for diagram actor snapshot
+*/
 function selectDiagramActor(selector) {
-  return selector;
+	return selector;
 }
 function useDiagramSnapshot(selector, compare = shallowEqual) {
-  const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, selector, compare);
+	return useSelector(useDiagramActorRef(), selector, compare);
 }
+/**
+* Helper to create a selector for diagram actor snapshot
+*/
 function selectDiagramActorContext(selector) {
-  return (state) => selector(state.context);
+	return (state) => selector(state.context);
 }
+/**
+* Read diagram context
+*/
 function useDiagramContext(selector, compare = shallowEqual, deps = []) {
-  const actorRef = useDiagramActorRef();
-  const selectorRef = useCallbackRef(selector);
-  const select = useCallback((s) => selectorRef(s.context), deps);
-  return useSelector(actorRef, select, compare);
+	const actorRef = useDiagramActorRef();
+	const selectorRef = useCallbackRef(selector);
+	return useSelector(actorRef, useCallback((s) => selectorRef(s.context), deps), compare);
 }
+/**
+* Subscribe to diagram emitted events
+* @example
+* ```tsx
+* useOnDiagramEvent('navigateTo', ({viewId}) => {
+*   console.log('Navigating to view', viewId)
+* })
+* ```
+*/
 function useOnDiagramEvent(event, callback, options) {
-  const actorRef = useDiagramActorRef();
-  const callbackRef = useCallbackRef(callback);
-  const wasCalled = useRef(false);
-  const once = options?.once ?? false;
-  useEffect(() => {
-    if (once && wasCalled.current) {
-      return;
-    }
-    let subscription = actorRef.on(event, (payload) => {
-      callbackRef(payload);
-      wasCalled.current = true;
-      if (once) {
-        subscription?.unsubscribe();
-        subscription = null;
-      }
-    });
-    return () => {
-      subscription?.unsubscribe();
-    };
-  }, [actorRef, event, once]);
+	const actorRef = useDiagramActorRef();
+	const callbackRef = useCallbackRef(callback);
+	const wasCalled = useRef(false);
+	const once = options?.once ?? false;
+	useEffect(() => {
+		if (once && wasCalled.current) return;
+		let subscription = actorRef.on(event, (payload) => {
+			callbackRef(payload);
+			wasCalled.current = true;
+			if (once) {
+				subscription?.unsubscribe();
+				subscription = null;
+			}
+		});
+		return () => {
+			subscription?.unsubscribe();
+		};
+	}, [
+		actorRef,
+		event,
+		once
+	]);
 }
-
-export { selectDiagramActor, selectDiagramActorContext, useDiagramActorRef, useDiagramContext, useDiagramSnapshot, useOnDiagramEvent };
+//#endregion
+export { selectDiagramActor, selectDiagramActorContext, useDiagramContext, useDiagramSnapshot, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.js

@@ -1,85 +1,81 @@
-import { nonNullable } from '@likec4/core';
-import { useSelector } from '@xstate/react';
-import { shallowEqual } from 'fast-equals';
-import { deriveToggledFeatures } from '../likec4diagram/state/machine.setup.js';
-import { useDiagramActorRef } from './safeContext.js';
-import { useCallbackRef } from './useCallbackRef.js';
-
-const selectCompareLayoutState = ({ context }) => {
-  const drifts = context.view.drifts ?? null;
-  if (!context.features.enableCompareWithLatest || !drifts || drifts.length === 0) {
-    return {
-      hasEditor: false,
-      isEnabled: false,
-      isEditable: false,
-      isActive: false,
-      drifts: null,
-      canApplyLatest: false,
-      layout: context.view._layout ?? "auto"
-    };
-  }
-  const {
-    enableCompareWithLatest,
-    enableReadOnly
-  } = deriveToggledFeatures(context);
-  return {
-    hasEditor: context.features.enableEditor,
-    isEnabled: true,
-    isEditable: !enableReadOnly,
-    isActive: enableCompareWithLatest === true,
-    drifts,
-    canApplyLatest: !drifts.includes("type-changed"),
-    layout: context.view._layout ?? "auto"
-  };
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "./useCallbackRef.js";
+import { useDiagramActorRef } from "./safeContext.js";
+import { deriveToggledFeatures } from "../likec4diagram/state/machine.setup.js";
+import { shallowEqual } from "fast-equals";
+import { nonNullable } from "@likec4/core";
+import { useSelector } from "@xstate/react";
+//#region src/hooks/useDiagramCompareLayout.ts
+var selectCompareLayoutState = ({ context }) => {
+	const drifts = context.view.drifts ?? null;
+	if (!context.features.enableCompareWithLatest || !drifts || drifts.length === 0) return {
+		hasEditor: false,
+		isEnabled: false,
+		isEditable: false,
+		isActive: false,
+		drifts: null,
+		canApplyLatest: false,
+		layout: context.view._layout ?? "auto"
+	};
+	const { enableCompareWithLatest, enableReadOnly } = deriveToggledFeatures(context);
+	return {
+		hasEditor: context.features.enableEditor,
+		isEnabled: true,
+		isEditable: !enableReadOnly,
+		isActive: enableCompareWithLatest === true,
+		drifts,
+		canApplyLatest: !drifts.includes("type-changed"),
+		layout: context.view._layout ?? "auto"
+	};
 };
 function useDiagramCompareLayout() {
-  const actorRef = useDiagramActorRef();
-  const state = useSelector(actorRef, selectCompareLayoutState, shallowEqual);
-  const switchLayout = useCallbackRef((layoutType) => {
-    if (!state.isEnabled) {
-      console.warn("Compare with latest feature is not enabled");
-      return;
-    }
-    actorRef.send({ type: "emit.onLayoutTypeChange", layoutType });
-  });
-  const toggleCompare = useCallbackRef((force) => {
-    if (!state.isEnabled) {
-      console.warn("Compare with latest feature is not enabled");
-      return;
-    }
-    const nextIsActive = force ? force === "on" : !state.isActive;
-    if (state.isActive && !nextIsActive && state.layout === "auto") {
-      switchLayout("manual");
-    }
-    actorRef.send({
-      type: "toggle.feature",
-      feature: "CompareWithLatest",
-      forceValue: nextIsActive
-    });
-  });
-  const resetManualLayout = useCallbackRef(() => {
-    if (!state.isEnabled) {
-      console.warn("Compare with latest feature is not enabled");
-      return;
-    }
-    actorRef.send({ type: "layout.resetManualLayout" });
-  });
-  const applyLatestToManual = useCallbackRef(() => {
-    if (!state.isEnabled) {
-      console.warn("Compare with latest feature is not enabled");
-      return;
-    }
-    const editor = nonNullable(actorRef.system?.get("editor"), "editor actor not found");
-    editor.send({ type: "applyLatestToManual" });
-    if (state.isActive) {
-      actorRef.send({
-        type: "toggle.feature",
-        feature: "CompareWithLatest",
-        forceValue: false
-      });
-    }
-  });
-  return [state, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }];
+	const actorRef = useDiagramActorRef();
+	const state = useSelector(actorRef, selectCompareLayoutState, shallowEqual);
+	const switchLayout = useCallbackRef((layoutType) => {
+		if (!state.isEnabled) {
+			console.warn("Compare with latest feature is not enabled");
+			return;
+		}
+		actorRef.send({
+			type: "emit.onLayoutTypeChange",
+			layoutType
+		});
+	});
+	return [state, {
+		toggleCompare: useCallbackRef((force) => {
+			if (!state.isEnabled) {
+				console.warn("Compare with latest feature is not enabled");
+				return;
+			}
+			const nextIsActive = force ? force === "on" : !state.isActive;
+			if (state.isActive && !nextIsActive && state.layout === "auto") switchLayout("manual");
+			actorRef.send({
+				type: "toggle.feature",
+				feature: "CompareWithLatest",
+				forceValue: nextIsActive
+			});
+		}),
+		switchLayout,
+		resetManualLayout: useCallbackRef(() => {
+			if (!state.isEnabled) {
+				console.warn("Compare with latest feature is not enabled");
+				return;
+			}
+			actorRef.send({ type: "layout.resetManualLayout" });
+		}),
+		applyLatestToManual: useCallbackRef(() => {
+			if (!state.isEnabled) {
+				console.warn("Compare with latest feature is not enabled");
+				return;
+			}
+			nonNullable(actorRef.system?.get("editor"), "editor actor not found").send({ type: "applyLatestToManual" });
+			if (state.isActive) actorRef.send({
+				type: "toggle.feature",
+				feature: "CompareWithLatest",
+				forceValue: false
+			});
+		})
+	}];
 }
-
+//#endregion
 export { useDiagramCompareLayout };

package/dist/hooks/useId.js

@@ -1,7 +1,9 @@
-import { useId as useId$1 } from '@mantine/hooks';
-
-function useId() {
-  return useId$1().replace("mantine-", "likec4-");
+import { __name } from "../_virtual/_rolldown/runtime.js";
+import { useId } from "@mantine/hooks";
+//#region src/hooks/useId.ts
+function useId$1() {
+	return useId().replace("mantine-", "likec4-");
 }
-
-export { useId };
+__name(useId$1, "useId");
+//#endregion
+export { useId$1 as useId };

package/dist/hooks/useLikeC4ElementsTree.js

@@ -1,25 +1,26 @@
-import { compareNatural } from '@likec4/core/utils';
-import { useMemo } from 'react';
-import { useLikeC4Model } from './useLikeC4Model.js';
-
-const sortByLabel = (a, b) => compareNatural(a.label, b.label);
+import "../_virtual/_rolldown/runtime.js";
+import { useLikeC4Model } from "./useLikeC4Model.js";
+import { useMemo } from "react";
+import { compareNatural } from "@likec4/core/utils";
+//#region src/hooks/useLikeC4ElementsTree.ts
+var sortByLabel = (a, b) => compareNatural(a.label, b.label);
 function buildNode(element) {
-  return {
-    label: element.title || element.id,
-    value: element.id,
-    children: [...element.children()].map(buildNode).sort(sortByLabel)
-  };
+	return {
+		label: element.title || element.id,
+		value: element.id,
+		children: [...element.children()].map(buildNode).sort(sortByLabel)
+	};
 }
+/**
+* Returns a tree of elements in the model.
+* If `viewId` is provided, returns the tree of elements in the view.
+*/
 function useLikeC4ElementsTree(viewId) {
-  const model = useLikeC4Model();
-  return useMemo(() => {
-    if (viewId) {
-      const view = model.view(viewId);
-      return [...view.roots()].map(buildNode).sort(sortByLabel);
-    } else {
-      return [...model.roots()].map(buildNode).sort(sortByLabel);
-    }
-  }, [model, viewId]);
+	const model = useLikeC4Model();
+	return useMemo(() => {
+		if (viewId) return [...model.view(viewId).roots()].map(buildNode).sort(sortByLabel);
+		else return [...model.roots()].map(buildNode).sort(sortByLabel);
+	}, [model, viewId]);
 }
-
-export { sortByLabel, useLikeC4ElementsTree };
+//#endregion
+export { useLikeC4ElementsTree };

package/dist/hooks/useLikeC4Model.js

@@ -1,26 +1,27 @@
-import { deepEqual } from 'fast-equals';
-import { useState, useEffect } from 'react';
-import { useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
+import { useEffect, useState } from "react";
+import { deepEqual } from "fast-equals";
+//#region src/hooks/useLikeC4Model.ts
+/**
+* @returns The LikeC4Model from context.
+* @throws If no LikeC4ModelProvider is found.
+*/
 function useLikeC4Model() {
-  const model = useOptionalLikeC4Model();
-  if (!model) {
-    throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
-  }
-  return model;
+	const model = useOptionalLikeC4Model();
+	if (!model) throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
+	return model;
 }
 function useLikeC4ViewModel(viewId) {
-  const model = useLikeC4Model();
-  return model.view(viewId);
+	return useLikeC4Model().view(viewId);
 }
 function useLikeC4Specification() {
-  const model = useLikeC4Model();
-  const _specification = model.specification;
-  const [specification, setSpecification] = useState(_specification);
-  useEffect(() => {
-    setSpecification((current) => deepEqual(current, _specification) ? current : _specification);
-  }, [_specification]);
-  return specification;
+	const _specification = useLikeC4Model().specification;
+	const [specification, setSpecification] = useState(_specification);
+	useEffect(() => {
+		setSpecification((current) => deepEqual(current, _specification) ? current : _specification);
+	}, [_specification]);
+	return specification;
 }
-
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model };
+//#endregion
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel };