@likec4/diagram 1.55.1 → 1.57.0

package/dist/hooks/useDiagram.js

@@ -1,47 +1,70 @@
-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) => {
+			if (!once || !wasCalled.current) try {
+				callbackRef(payload);
+			} catch (error) {
+				console.error(error);
+			}
+			wasCalled.current = true;
+			if (once) {
+				subscription?.unsubscribe();
+				subscription = null;
+			}
+		});
+		return () => {
+			subscription?.unsubscribe();
+		};
+	}, [
+		callbackRef,
+		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: "change.latest-to-manual" });
+			if (state.isActive) actorRef.send({
+				type: "toggle.feature",
+				feature: "CompareWithLatest",
+				forceValue: false
+			});
+		})
+	}];
 }
-
+//#endregion
 export { useDiagramCompareLayout };

package/dist/hooks/useEditorActor.d.ts

@@ -0,0 +1,4 @@
+import { EditorActorRef } from '../editor/actor/machine';
+import { EditorActorStateTag } from '../editor/actor/types';
+export declare function useEditorActorRef(): EditorActorRef | null;
+export declare function useEditorActorStateHasTag(tag: EditorActorStateTag): boolean;

package/dist/hooks/useEditorActor.js

@@ -0,0 +1,26 @@
+import "../_virtual/_rolldown/runtime.js";
+import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
+import { useEffect, useState } from "react";
+//#region src/hooks/useEditorActor.ts
+var select = selectDiagramActor((s) => {
+	return s.children.editor ?? null;
+});
+function useEditorActorRef() {
+	return useDiagramSnapshot(select, Object.is);
+}
+function useEditorActorStateHasTag(tag) {
+	const editorActor = useEditorActorRef();
+	const [hasTag, setHasTag] = useState(() => editorActor?.getSnapshot().hasTag(tag) ?? false);
+	useEffect(() => {
+		const subscription = editorActor?.subscribe((snapshot) => {
+			setHasTag(snapshot.hasTag(tag));
+		});
+		return () => {
+			subscription?.unsubscribe();
+			setHasTag(false);
+		};
+	}, [editorActor, tag]);
+	return hasTag;
+}
+//#endregion
+export { useEditorActorStateHasTag };

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.d.ts

@@ -1,8 +1,10 @@
 import { Fqn, ViewId } from '@likec4/core/types';
-interface LikeC4ModelTreeNodeData {
+import { TreeNodeData } from '@mantine/core';
+export interface LikeC4ModelTreeNodeData extends TreeNodeData {
     label: string;
     value: Fqn;
     children: LikeC4ModelTreeNodeData[];
+    hasChildren: boolean;
 }
 export declare const sortByLabel: (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => number;
 /**
@@ -10,4 +12,3 @@ export declare const sortByLabel: (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTre
  * If `viewId` is provided, returns the tree of elements in the view.
  */
 export declare function useLikeC4ElementsTree(viewId?: ViewId): LikeC4ModelTreeNodeData[];
-export {};

package/dist/hooks/useLikeC4ElementsTree.js

@@ -1,25 +1,28 @@
-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)
-  };
+	const children = [...element.children()].map(buildNode).sort(sortByLabel);
+	return {
+		label: element.title || element.id,
+		value: element.id,
+		children,
+		hasChildren: children.length > 0
+	};
 }
+/**
+* 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 };

package/dist/hooks/useLikeC4Project.js

@@ -1,45 +1,56 @@
-import { useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
-import { useOptionalProjectsContext } from '../context/LikeC4ProjectsContext.js';
-
-const emptyProjects = [];
+import "../_virtual/_rolldown/runtime.js";
+import { useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
+import { useOptionalProjectsContext } from "../context/LikeC4ProjectsContext.js";
+//#region src/hooks/useLikeC4Project.ts
+var emptyProjects = [];
 function onProjectChange(id) {
-  console.warn(`Triggered callback to change project to ${id}, but no <LikeC4ProjectsProvider/> found`);
+	console.warn(`Triggered callback to change project to ${id}, but no <LikeC4ProjectsProvider/> found`);
 }
-const emptyContext = {
-  projects: emptyProjects,
-  onProjectChange
+var emptyContext = {
+	projects: emptyProjects,
+	onProjectChange
 };
 function useLikeC4ProjectsContext() {
-  return useOptionalProjectsContext() ?? emptyContext;
+	return useOptionalProjectsContext() ?? emptyContext;
 }
+/**
+* @returns The list of available projects, or empty array if no projects are available.
+*/
 function useLikeC4Projects() {
-  return useLikeC4ProjectsContext().projects;
+	return useLikeC4ProjectsContext().projects;
 }
+/**
+* @returns The callback to change current project, or a no-op if no LikeC4ProjectsProvider is found.
+*/
 function useChangeLikeC4Project() {
-  return useLikeC4ProjectsContext().onProjectChange;
+	return useLikeC4ProjectsContext().onProjectChange;
 }
+/**
+* @returns True if there are more than one project available in the context.
+*/
 function useHasProjects() {
-  const ctx = useOptionalProjectsContext();
-  if (!ctx) {
-    return false;
-  }
-  return ctx.projects.length > 1;
+	const ctx = useOptionalProjectsContext();
+	if (!ctx) return false;
+	return ctx.projects.length > 1;
 }
+/**
+* @returns Current project id, as provided by LikeC4Model
+*/
 function useLikeC4ProjectId() {
-  const ctx = useOptionalLikeC4Model();
-  if (!ctx) {
-    throw new Error("No LikeC4ModelProvider found");
-  }
-  return ctx.projectId;
+	const ctx = useOptionalLikeC4Model();
+	if (!ctx) throw new Error("No LikeC4ModelProvider found");
+	return ctx.projectId;
 }
+/**
+* Returns current LikeC4 project.
+* Requires LikeC4ModelProvider in the tree.
+* Falls back to model's project if LikeC4ProjectsProvider is not available.
+*/
 function useLikeC4Project() {
-  const modelCtx = useOptionalLikeC4Model();
-  const projectsCtx = useOptionalProjectsContext();
-  if (!modelCtx) {
-    throw new Error("No LikeC4ModelProvider found");
-  }
-  const project = projectsCtx?.projects.find((p) => p.id === modelCtx.projectId);
-  return project ?? modelCtx.project;
+	const modelCtx = useOptionalLikeC4Model();
+	const projectsCtx = useOptionalProjectsContext();
+	if (!modelCtx) throw new Error("No LikeC4ModelProvider found");
+	return projectsCtx?.projects.find((p) => p.id === modelCtx.projectId) ?? modelCtx.project;
 }
-
+//#endregion
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/hooks/useLikeC4Styles.js

@@ -1,9 +1,9 @@
-import { LikeC4Styles } from '@likec4/core/styles';
-import { useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
+import { LikeC4Styles } from "@likec4/core/styles";
+//#region src/hooks/useLikeC4Styles.ts
 function useLikeC4Styles() {
-  const model = useOptionalLikeC4Model();
-  return model?.$styles ?? LikeC4Styles.DEFAULT;
+	return useOptionalLikeC4Model()?.$styles ?? LikeC4Styles.DEFAULT;
 }
-
+//#endregion
 export { useLikeC4Styles };

package/dist/hooks/useMantinePortalProps.js

@@ -1,9 +1,13 @@
-import { useMemo } from 'react';
-import { useRootContainerElement } from '../context/RootContainerContext.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useRootContainerElement } from "../context/RootContainerContext.js";
+import { useMemo } from "react";
+//#region src/hooks/useMantinePortalProps.ts
 function useMantinePortalProps() {
-  const target = useRootContainerElement();
-  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
+	const target = useRootContainerElement();
+	return useMemo(() => target ? {
+		portalProps: { target },
+		withinPortal: true
+	} : { withinPortal: false }, [target]);
 }
-
+//#endregion
 export { useMantinePortalProps };

package/dist/hooks/useSetState.js

@@ -1,22 +1,24 @@
-import { shallowEqual } from 'fast-equals';
-import { useState, useRef, useCallback } from 'react';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useCallback, useRef, useState } from "react";
+import { shallowEqual } from "fast-equals";
+//#region src/hooks/useSetState.ts
+/**
+* Differs from useState in that:
+* - it uses custom equal function (shallowEqual by default) to determine whether the state has changed.
+* - allows partial updates to the state
+*/
 function useSetState(initialState, equal) {
-  const [state, _setState] = useState(initialState);
-  const equalFn = equal ?? shallowEqual;
-  const equalFnRef = useRef(equalFn);
-  equalFnRef.current = equalFn;
-  const setState = useCallback(
-    (statePartial) => _setState((current) => {
-      const next = {
-        ...current,
-        ...typeof statePartial === "function" ? statePartial(current) : statePartial
-      };
-      return equalFnRef.current(current, next) ? current : next;
-    }),
-    [_setState]
-  );
-  return [state, setState];
+	const [state, _setState] = useState(initialState);
+	const equalFn = equal ?? shallowEqual;
+	const equalFnRef = useRef(equalFn);
+	equalFnRef.current = equalFn;
+	return [state, useCallback((statePartial) => _setState((current) => {
+		const next = {
+			...current,
+			...typeof statePartial === "function" ? statePartial(current) : statePartial
+		};
+		return equalFnRef.current(current, next) ? current : next;
+	}), [_setState])];
 }
-
+//#endregion
 export { useSetState };