@likec4/diagram 1.47.0 → 1.49.0

package/dist/hooks/useCallbackRef.js

@@ -1,13 +1,14 @@
-import { useRef } from 'react';
+import { useRef, useMemo } from 'react';
 
 function useCallbackRef(callback) {
   const ref = useRef(callback);
   ref.current = callback;
-  const callbackRef = useRef(null);
-  if (callbackRef.current == null) {
-    callbackRef.current = ((...args) => ref.current?.(...args));
-  }
-  return callbackRef.current;
+  return useMemo(() => {
+    function callbackRef(...args) {
+      return ref.current?.(...args);
+    }
+    return callbackRef;
+  }, []);
 }
 
 export { useCallbackRef };

package/dist/hooks/useCurrentView.js

@@ -1,17 +1,12 @@
-import { useSelector } from '@xstate/react';
-import { shallowEqual } from 'fast-equals';
-import 'react';
-import { useDiagramActorRef } from './safeContext.js';
+import { useDiagramSnapshot, selectDiagramActor } from './useDiagram.js';
 
-const selectViewId = (s) => s.context.view.id;
+const selectViewId = selectDiagramActor((s) => s.context.view.id);
 function useCurrentViewId() {
-  const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, selectViewId);
+  return useDiagramSnapshot(selectViewId);
 }
-const selectView = (s) => s.context.view;
+const selectView = selectDiagramActor((s) => s.context.view);
 function useCurrentView() {
-  const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, selectView, shallowEqual);
+  return useDiagramSnapshot(selectView);
 }
 
 export { useCurrentView, useCurrentViewId };

package/dist/hooks/useCurrentViewModel.d.ts

@@ -1,4 +1,10 @@
-import { CurrentViewModel } from '../context/LikeC4ModelContext';
+import { CurrentViewModel, useOptionalCurrentViewModel } from '../context/LikeC4ModelContext';
 export type { CurrentViewModel };
-export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
+export { useOptionalCurrentViewModel, };
+/**
+ * Hook to get the current view model from the context.
+ * Throws an error if no view model is found in the context.
+ *
+ * @see useOptionalCurrentViewModel
+ */
 export declare function useCurrentViewModel(): CurrentViewModel;

package/dist/hooks/useCurrentViewModel.js

@@ -1,13 +1,9 @@
-import { useContext } from 'react';
-import { CurrentViewModelContext } from '../context/LikeC4ModelContext.js';
+import { useOptionalCurrentViewModel } from '../context/LikeC4ModelContext.js';
 
-function useOptionalCurrentViewModel() {
-  return useContext(CurrentViewModelContext);
-}
 function useCurrentViewModel() {
-  const vm = useContext(CurrentViewModelContext);
+  const vm = useOptionalCurrentViewModel();
   if (!vm) {
-    throw new Error("No LikeC4ViewModel in context found");
+    throw new Error("No CurrentViewModelContext found");
   }
   return vm;
 }

package/dist/hooks/useDiagram.d.ts

@@ -4,7 +4,15 @@ import { DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../l
 import { useDiagram, useDiagramActorRef } from './safeContext';
 export { useDiagram, useDiagramActorRef };
 export type { DiagramApi, DiagramContext };
-export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+/**
+ * Helper to create a selector for diagram actor snapshot
+ */
+export declare function selectDiagramActor<T = unknown>(selector: (state: DiagramActorSnapshot) => T): (state: DiagramActorSnapshot) => T;
+export declare function useDiagramSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+/**
+ * Helper to create a selector for diagram actor snapshot
+ */
+export declare function selectDiagramActorContext<T = unknown>(selector: (state: DiagramContext) => T): (state: DiagramActorSnapshot) => T;
 /**
  * Read diagram context
  */

package/dist/hooks/useDiagram.js

@@ -5,14 +5,20 @@ import { useDiagramActorRef } from './safeContext.js';
 export { useDiagram } from './safeContext.js';
 import { useCallbackRef } from './useCallbackRef.js';
 
-function useDiagramActorSnapshot(selector, compare = shallowEqual) {
+function selectDiagramActor(selector) {
+  return selector;
+}
+function useDiagramSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, selector, compare);
 }
-function useDiagramContext(selector, compare = shallowEqual, deps) {
+function selectDiagramActorContext(selector) {
+  return (state) => selector(state.context);
+}
+function useDiagramContext(selector, compare = shallowEqual, deps = []) {
   const actorRef = useDiagramActorRef();
   const selectorRef = useCallbackRef(selector);
-  const select = useCallback((s) => selectorRef(s.context), deps ?? []);
+  const select = useCallback((s) => selectorRef(s.context), deps);
   return useSelector(actorRef, select, compare);
 }
 function useOnDiagramEvent(event, callback, options) {
@@ -38,4 +44,4 @@ function useOnDiagramEvent(event, callback, options) {
   }, [actorRef, event, once]);
 }
 
-export { useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };
+export { selectDiagramActor, selectDiagramActorContext, useDiagramActorRef, useDiagramContext, useDiagramSnapshot, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -1,24 +1,24 @@
 import { DiagramActorSnapshot } from '../likec4diagram/state/types';
 import type * as t from '@likec4/core/types';
 declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
-    hasEditor: false;
     isEnabled: false;
+    hasEditor: false;
     isEditable: false;
     isActive: false;
-    drifts: never[];
+    drifts: never;
     canApplyLatest: boolean;
     layout: t.LayoutType;
 } | {
-    hasEditor: boolean;
     isEnabled: true;
+    hasEditor: boolean;
     isEditable: boolean;
     isActive: boolean;
-    drifts: t.NonEmptyReadonlyArray<t.LayoutedViewDriftReason>;
+    drifts: readonly [t.LayoutedViewDriftReason, ...t.LayoutedViewDriftReason[]];
     canApplyLatest: boolean;
     layout: t.LayoutType;
 };
-type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
-type DiagramCompareLayoutOps = {
+export type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
+export type DiagramCompareLayoutOps = {
     /**
      * Toggles the compare mode on or off.
      */

package/dist/hooks/useDiagramCompareLayout.js

@@ -13,7 +13,7 @@ const selectCompareLayoutState = ({ context }) => {
       isEnabled: false,
       isEditable: false,
       isActive: false,
-      drifts: [],
+      drifts: null,
       canApplyLatest: false,
       layout: context.view._layout ?? "auto"
     };

package/dist/hooks/useLikeC4ElementsTree.d.ts

@@ -4,7 +4,7 @@ interface LikeC4ModelTreeNodeData {
     value: Fqn;
     children: LikeC4ModelTreeNodeData[];
 }
-export declare const sortByLabel: (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => 0 | 1 | -1;
+export declare const sortByLabel: (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => number;
 /**
  * Returns a tree of elements in the model.
  * If `viewId` is provided, returns the tree of elements in the view.

package/dist/hooks/useLikeC4ElementsTree.js

@@ -5,7 +5,7 @@ import { useLikeC4Model } from './useLikeC4Model.js';
 const sortByLabel = (a, b) => compareNatural(a.label, b.label);
 function buildNode(element) {
   return {
-    label: element.title,
+    label: element.title || element.id,
     value: element.id,
     children: [...element.children()].map(buildNode).sort(sortByLabel)
   };
@@ -19,7 +19,7 @@ function useLikeC4ElementsTree(viewId) {
     } else {
       return [...model.roots()].map(buildNode).sort(sortByLabel);
     }
-  }, [model, viewId ?? null]);
+  }, [model, viewId]);
 }
 
 export { sortByLabel, useLikeC4ElementsTree };

package/dist/hooks/useLikeC4Model.d.ts

@@ -1,8 +1,12 @@
 import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
+import { useOptionalLikeC4Model } from '../context/LikeC4ModelContext';
 import type * as t from '@likec4/core/types';
 type Any = t.aux.Any;
-export declare function useOptionalLikeC4Model<A extends Any = t.aux.UnknownLayouted>(): LikeC4Model<A> | null;
+export { useOptionalLikeC4Model, };
+/**
+ * @returns The LikeC4Model from context.
+ * @throws If no LikeC4ModelProvider is found.
+ */
 export declare function useLikeC4Model<A extends Any = t.aux.UnknownLayouted>(): LikeC4Model<A>;
 export declare function useLikeC4ViewModel<A extends Any = t.aux.UnknownLayouted>(viewId: t.aux.ViewId<A>): LikeC4ViewModel<A>;
 export declare function useLikeC4Specification(): t.Specification<t.aux.UnknownLayouted>;
-export {};

package/dist/hooks/useLikeC4Model.js

@@ -1,12 +1,9 @@
 import { deepEqual } from 'fast-equals';
-import { useContext, useState, useEffect } from 'react';
-import { LikeC4ModelContext } from '../context/LikeC4ModelContext.js';
+import { useState, useEffect } from 'react';
+import { useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
 
-function useOptionalLikeC4Model() {
-  return useContext(LikeC4ModelContext);
-}
 function useLikeC4Model() {
-  const model = useContext(LikeC4ModelContext);
+  const model = useOptionalLikeC4Model();
   if (!model) {
     throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
   }
@@ -18,10 +15,11 @@ function useLikeC4ViewModel(viewId) {
 }
 function useLikeC4Specification() {
   const model = useLikeC4Model();
-  const [specification, setSpecification] = useState(model.$data.specification);
+  const _specification = model.specification;
+  const [specification, setSpecification] = useState(_specification);
   useEffect(() => {
-    setSpecification((current) => deepEqual(current, model.$data.specification) ? current : model.$data.specification);
-  }, [model]);
+    setSpecification((current) => deepEqual(current, _specification) ? current : _specification);
+  }, [_specification]);
   return specification;
 }
 

package/dist/hooks/useLikeC4Project.d.ts

@@ -1,17 +1,14 @@
 import { LikeC4Project, ProjectId } from '@likec4/core/types';
 import { LikeC4ProjectsContext } from '../context/LikeC4ProjectsContext';
+export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
 /**
  * @returns The list of available projects, or empty array if no projects are available.
  */
 export declare function useLikeC4Projects(): ReadonlyArray<LikeC4Project>;
 /**
- * @returns The callback to change current project.
+ * @returns The callback to change current project, or a no-op if no LikeC4ProjectsProvider is found.
  */
 export declare function useChangeLikeC4Project(): (id: ProjectId) => void;
-/**
- * @returns The callback to change current project.
- */
-export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
 /**
  * @returns True if there are more than one project available in the context.
  */
@@ -22,6 +19,7 @@ export declare function useHasProjects(): boolean;
 export declare function useLikeC4ProjectId(): ProjectId;
 /**
  * Returns current LikeC4 project.
- * Requires both LikeC4ModelProvider and LikeC4ProjectsProvider in the tree.*
+ * Requires LikeC4ModelProvider in the tree.
+ * Falls back to model's project if LikeC4ProjectsProvider is not available.
  */
 export declare function useLikeC4Project(): LikeC4Project;

package/dist/hooks/useLikeC4Project.js

@@ -1,57 +1,45 @@
-import { useContext } from 'react';
-import { LikeC4ModelContext } from '../context/LikeC4ModelContext.js';
-import { LikeC4ProjectsContext } from '../context/LikeC4ProjectsContext.js';
+import { useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
+import { useOptionalProjectsContext } from '../context/LikeC4ProjectsContext.js';
 
 const emptyProjects = [];
-function useLikeC4Projects() {
-  const ctx = useContext(LikeC4ProjectsContext);
-  if (!ctx) {
-    return emptyProjects;
-  }
-  return ctx.projects;
-}
-const emptyOnProjectChange = (id) => {
+function onProjectChange(id) {
   console.warn(`Triggered callback to change project to ${id}, but no <LikeC4ProjectsProvider/> found`);
-};
-function useChangeLikeC4Project() {
-  const ctx = useContext(LikeC4ProjectsContext);
-  if (!ctx) {
-    return emptyOnProjectChange;
-  }
-  return ctx.onProjectChange;
 }
 const emptyContext = {
   projects: emptyProjects,
-  onProjectChange: emptyOnProjectChange
+  onProjectChange
 };
 function useLikeC4ProjectsContext() {
-  return useContext(LikeC4ProjectsContext) ?? emptyContext;
+  return useOptionalProjectsContext() ?? emptyContext;
+}
+function useLikeC4Projects() {
+  return useLikeC4ProjectsContext().projects;
+}
+function useChangeLikeC4Project() {
+  return useLikeC4ProjectsContext().onProjectChange;
 }
 function useHasProjects() {
-  const ctx = useContext(LikeC4ProjectsContext);
+  const ctx = useOptionalProjectsContext();
   if (!ctx) {
     return false;
   }
   return ctx.projects.length > 1;
 }
 function useLikeC4ProjectId() {
-  const ctx = useContext(LikeC4ModelContext);
+  const ctx = useOptionalLikeC4Model();
   if (!ctx) {
     throw new Error("No LikeC4ModelProvider found");
   }
   return ctx.projectId;
 }
 function useLikeC4Project() {
-  const projectId = useLikeC4ProjectId();
-  const projectsCtx = useContext(LikeC4ProjectsContext);
-  if (!projectsCtx) {
-    throw new Error("No LikeC4ProjectsProvider found");
-  }
-  const project = projectsCtx.projects.find((p) => p.id === projectId);
-  if (!project) {
-    throw new Error(`Project with id '${projectId}' not found in LikeC4ProjectsProvider`);
+  const modelCtx = useOptionalLikeC4Model();
+  const projectsCtx = useOptionalProjectsContext();
+  if (!modelCtx) {
+    throw new Error("No LikeC4ModelProvider found");
   }
-  return project;
+  const project = projectsCtx?.projects.find((p) => p.id === modelCtx.projectId);
+  return project ?? modelCtx.project;
 }
 
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/hooks/useLikeC4Styles.js

@@ -1,15 +1,9 @@
 import { LikeC4Styles } from '@likec4/core/styles';
-import { useContext, useState, useEffect } from 'react';
-import { LikeC4ModelContext } from '../context/LikeC4ModelContext.js';
+import { useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
 
 function useLikeC4Styles() {
-  const model = useContext(LikeC4ModelContext);
-  const $styles = model?.$styles ?? LikeC4Styles.DEFAULT;
-  const [styles, setStyles] = useState($styles);
-  useEffect(() => {
-    setStyles((current) => current.equals($styles) ? current : $styles);
-  }, [$styles]);
-  return styles;
+  const model = useOptionalLikeC4Model();
+  return model?.$styles ?? LikeC4Styles.DEFAULT;
 }
 
 export { useLikeC4Styles };

package/dist/hooks/useMantinePortalProps.d.ts

@@ -1,8 +1,8 @@
 export declare function useMantinePortalProps(): {
+    withinPortal: true;
     portalProps: {
         target: HTMLDivElement;
     };
-    withinPortal: true;
 } | {
     withinPortal: false;
     portalProps?: never;

package/dist/hooks/useMediaPrint.d.ts

@@ -1,5 +1,3 @@
-import { ReadableAtom } from 'nanostores';
-export declare const $isPrint: ReadableAtom<boolean>;
 /**
  * Hook to determine if the current media is print.
  */

package/dist/hooks/useOverlaysActor.js

@@ -1,10 +1,10 @@
-import { useDiagramActorSnapshot } from './useDiagram.js';
+import { useDiagramSnapshot, selectDiagramActor } from './useDiagram.js';
 
-const select = (s) => {
+const select = selectDiagramActor((s) => {
   return s.children.overlays;
-};
+});
 function useOverlaysActorRef() {
-  return useDiagramActorSnapshot(select, Object.is);
+  return useDiagramSnapshot(select, Object.is);
 }
 
 export { useOverlaysActorRef };

package/dist/hooks/useSearchActor.js

@@ -1,10 +1,10 @@
-import { useDiagramActorSnapshot } from './useDiagram.js';
+import { useDiagramSnapshot, selectDiagramActor } from './useDiagram.js';
 
-const select = (s) => {
+const select = selectDiagramActor((s) => {
   return s.children.search ?? null;
-};
+});
 function useSearchActorRef() {
-  return useDiagramActorSnapshot(select, Object.is);
+  return useDiagramSnapshot(select, Object.is);
 }
 
 export { useSearchActorRef };

package/dist/hooks/useSetState.d.ts

@@ -1,2 +1,7 @@
 import { NonEmptyObject } from 'type-fest';
-export declare function useSetState<T extends object>(initialState: T | (() => T)): readonly [T, (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) => void];
+/**
+ * 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
+ */
+export declare function useSetState<T extends object>(initialState: T | (() => T), equal?: (a: T, b: T) => boolean): readonly [T, (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) => void];

package/dist/hooks/useSetState.js

@@ -1,17 +1,20 @@
 import { shallowEqual } from 'fast-equals';
-import { useState, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
-function useSetState(initialState) {
+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 shallowEqual(current, next) ? current : next;
+      return equalFnRef.current(current, next) ? current : next;
     }),
-    []
+    [_setState]
   );
   return [state, setState];
 }

package/dist/hooks/useXYFlow.d.ts

@@ -12,5 +12,11 @@ export type XYStoreApi = {
 };
 export type XYInternalNode = InternalNode<Types.AnyNode>;
 export declare function useXYInternalNode(id: string): XYInternalNode | undefined;
-export declare function useCurrentZoom(): number;
+/**
+ * Returns the current zoom level of the flow.
+ * @param precision The number of decimal places to round to, defaults to 2 (i.e. 1.23)
+ * @returns The current zoom level of the flow.
+ */
+export declare function useCurrentZoom(precision?: number): number;
+export declare function useCurrentZoomAtLeast(minZoom: number): boolean;
 export declare function useIsZoomTooSmall(): boolean;

package/dist/hooks/useXYFlow.js

@@ -1,5 +1,6 @@
 import { useStore, useStoreApi, useReactFlow } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
+import { useCallback } from 'react';
 import { useCallbackRef } from './useCallbackRef.js';
 
 function useXYFlow() {
@@ -14,13 +15,12 @@ function useXYStore(selector, equalityFn) {
 function useXYStoreApi() {
   return useStoreApi();
 }
-const selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
-function useCurrentZoom() {
-  return useStore(selectCurrentZoom);
+function useCurrentZoomAtLeast(minZoom) {
+  return useStore(useCallback((state) => state.transform[2] >= minZoom, [minZoom]));
 }
 const selectZoom = (state) => state.transform[2] < 0.2;
 function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }
 
-export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };
+export { useCurrentZoomAtLeast, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
-export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, WhereOperator, } from './LikeC4Diagram.props';
+export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, ViewPaddings, WhereOperator, } from './LikeC4Diagram.props';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
-export { type LikeC4EditorPort, LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
+export { LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
+export { createLikeC4Editor, type LikeC4EditorCallbacks, } from './editor/LikeC4EditorCallbacks';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export { type DiagramApi, type DiagramContext, useDiagram, useDiagramContext, useOnDiagramEvent, } from './hooks/useDiagram';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
-export { useCurrentViewModel } from './hooks/useCurrentViewModel';
+export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from './hooks/useCurrentViewModel';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';
 export { useLikeC4Styles } from './hooks/useLikeC4Styles';
 export { useUpdateEffect } from './hooks/useUpdateEffect';
@@ -15,6 +16,6 @@ export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export { LikeC4View } from './LikeC4View';
 export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
-export { useCurrentViewId } from './hooks/useCurrentView';
+export { useCurrentView, useCurrentViewId, } from './hooks/useCurrentView';
 export { pickViewBounds } from './utils/view-bounds';
 export { LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, } from './LikeC4ProjectsOverview';

package/dist/index.js

@@ -2,6 +2,7 @@ export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { LikeC4EditorProvider } from './editor/LikeC4EditorProvider.js';
+export { createLikeC4Editor } from './editor/LikeC4EditorCallbacks.js';
 export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
 export { useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';
@@ -12,7 +13,8 @@ export { useUpdateEffect } from './hooks/useUpdateEffect.js';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
 export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
-export { useCurrentViewId } from './hooks/useCurrentView.js';
+export { useCurrentView, useCurrentViewId } from './hooks/useCurrentView.js';
 export { pickViewBounds } from './utils/view-bounds.js';
 export { LikeC4ProjectsOverview } from './LikeC4ProjectsOverview.js';
 export { useDiagram } from './hooks/safeContext.js';
+export { useOptionalCurrentViewModel } from './context/LikeC4ModelContext.js';

package/dist/likec4diagram/DiagramUI.js

@@ -4,7 +4,6 @@ import { memo, useCallback } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
-import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { RelationshipPopover } from './relationship-popover/RelationshipPopover.js';
@@ -23,7 +22,6 @@ const LikeC4DiagramUI = memo(() => {
   } = useEnabledFeatures();
   const rerender = useRerender();
   const overlaysActorRef = useOverlaysActorRef();
-  const searchActorRef = useSearchActorRef();
   const handleReset = useCallback(() => {
     console.warn("DiagramUI: resetting error boundary and rerendering...");
     rerender();
@@ -32,7 +30,7 @@ const LikeC4DiagramUI = memo(() => {
     enableControls && /* @__PURE__ */ jsx(NavigationPanel, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef }),
+    enableSearch && /* @__PURE__ */ jsx(Search, {}),
     enableRelationshipDetails && enableReadOnly && /* @__PURE__ */ jsx(RelationshipPopover, {}),
     enableCompareWithLatest && /* @__PURE__ */ jsx(LayoutDriftFrame, {})
   ] });

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { Simplify } from 'type-fest';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
 export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'reactFlowProps' | 'renderNodes'>>>;
-export declare function LikeC4DiagramXYFlow({ background, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4DiagramXYFlow({ background, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): JSX.Element;