@likec4/diagram 1.42.1 → 1.44.0

package/dist/components/ErrorFallback.js

@@ -1,47 +1,64 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box } from '@likec4/styles/jsx';
-import { Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
+import { css } from '@likec4/styles/css';
+import { HStack, VStack } from '@likec4/styles/jsx';
+import { ThemeIcon, Text, ScrollAreaAutosize, Button } from '@mantine/core';
+import { useRef, useEffect } from 'react';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    dialogRef.current?.showModal();
+  }, []);
   return /* @__PURE__ */ jsx(
-    Box,
+    "dialog",
     {
-      css: {
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%",
+      ref: dialogRef,
+      className: css({
+        margin: "0",
         padding: "0",
-        backdropFilter: `blur(5px)`,
-        backgroundColor: {
-          _dark: `[rgb(34 34 34 / 10%)]`,
-          _light: `[rgb(15 15 15/ 20%)]`
-        },
-        zIndex: 1e3
-      },
-      children: /* @__PURE__ */ jsxs(
-        Notification,
-        {
-          icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
-          styles: {
-            icon: {
-              alignSelf: "flex-start"
-            }
-          },
-          color: "red",
-          title: "Oops, something went wrong",
-          p: "xl",
-          withCloseButton: false,
-          children: [
-            /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: "100%", mah: 400, children: /* @__PURE__ */ jsx(Code, { block: true, children: errorString }) }),
-            /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "xl", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
-          ]
+        position: "fixed",
+        top: "10",
+        left: "10",
+        width: "[calc(100vw - ({spacing.10} * 2))]",
+        height: "max-content",
+        maxHeight: "[calc(100vh - ({spacing.10} * 3))]",
+        background: `likec4.overlay.body`,
+        rounded: "sm",
+        borderWidth: 3,
+        borderColor: `likec4.overlay.border`,
+        shadow: "xl",
+        outline: "none",
+        _backdrop: {
+          cursor: "zoom-out",
+          backdropFilter: `blur(18px)`,
+          bg: "[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]"
+        }
+      }),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+          dialogRef.current?.close();
+          return;
         }
-      )
+      },
+      onClose: (e) => {
+        e.stopPropagation();
+        resetErrorBoundary();
+      },
+      children: /* @__PURE__ */ jsxs(HStack, { p: "xl", gap: "lg", alignItems: "flex-start", flexWrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(ThemeIcon, { size: "md", radius: "xl", color: "red", children: /* @__PURE__ */ jsx(IconX, { style: { width: 20, height: 20 } }) }),
+        /* @__PURE__ */ jsxs(VStack, { flex: "1", children: [
+          /* @__PURE__ */ jsx(Text, { fz: "md", children: "Oops, something went wrong" }),
+          /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: "100%", mah: 400, type: "auto", children: /* @__PURE__ */ jsx(Text, { fz: "md", c: "red", style: { whiteSpace: "pre-wrap", userSelect: "all" }, children: errorString }) }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "md", mt: "md", children: [
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "default", onClick: () => resetErrorBoundary(), children: "Reset" }),
+            /* @__PURE__ */ jsx(Text, { fz: "sm", c: "dimmed", children: "See console for more details and report the issue if it persists." })
+          ] })
+        ] })
+      ] })
     }
   );
 }

package/dist/components/Link.js

@@ -4,8 +4,8 @@ import { styled } from '@likec4/styles/jsx';
 import { Badge, CopyButton, ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
 import { GithubIcon } from './GithubIcon.js';
-import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
+import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
 const GITHUB_PREFIX = "https://github.com/";
 const Link = forwardRef(

package/dist/context/DiagramEventHandlers.js

@@ -15,7 +15,8 @@ const defaultHandlers = {
   onCanvasDblClick: null,
   onBurgerMenuClick: null,
   onOpenSource: null,
-  onInitialized: null
+  onInitialized: null,
+  onLayoutTypeChange: null
 };
 const HandlerNames = keys(defaultHandlers);
 const DiagramEventHandlersReactContext = createContext({

package/dist/context/DiagramFeatures.d.ts

@@ -1,14 +1,11 @@
 import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "FitView", "Vscode", "ElementTags"];
+declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
-type CustomFeatures = {
-    enableControls: 'next' | boolean;
-};
 export type EnabledFeatures = {
-    [P in `enable${FeatureName}`]: P extends keyof CustomFeatures ? CustomFeatures[P] : boolean;
+    [P in `enable${FeatureName}`]: boolean;
 };
-export declare const AllDisabled: EnabledFeatures;
+export declare const DefaultFeatures: EnabledFeatures;
 export declare function DiagramFeatures({ children, features, overrides, }: PropsWithChildren<ExclusiveUnion<{
     features: {
         features: EnabledFeatures;
@@ -21,6 +18,27 @@ export declare namespace DiagramFeatures {
     var Overlays: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 }
 export declare function useEnabledFeatures(): EnabledFeatures;
+export type IfEnabledProps = PropsWithChildren<{
+    feature: FeatureName;
+    /**
+     * Additional AND condition
+     * @default true
+     * @example
+     * <IfEnabled feature="ReadOnly" and={isSomething}>
+     *   ...
+     * </IfEnabled>
+     */
+    and?: boolean;
+}>;
+/**
+ * Renders children only if the specified feature is enabled
+ * @param feature Feature name
+ * @param and Additional AND condition
+ * @example
+ * <IfEnabled feature="ReadOnly" and={isSomething}>
+ *   ...
+ * </IfEnabled>
+ */
 export declare function IfEnabled({ feature, children, and, }: PropsWithChildren<{
     feature: FeatureName;
     and?: boolean;

package/dist/context/DiagramFeatures.js

@@ -1,48 +1,25 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { shallowEqual } from 'fast-equals';
 import { useContext, createContext, useState, useEffect } from 'react';
-import { mapToObj } from 'remeda';
 
-const FeatureNames = [
-  "Controls",
-  "ReadOnly",
-  "FocusMode",
-  "NavigateTo",
-  "ElementDetails",
-  "RelationshipDetails",
-  "RelationshipBrowser",
-  "Search",
-  "NavigationButtons",
-  "Notations",
-  "DynamicViewWalkthrough",
-  "EdgeEditing",
-  "FitView",
-  /**
-   * Running in VSCode
-   */
-  "Vscode",
-  "ElementTags"
-];
-const AllDisabled = mapToObj(
-  FeatureNames,
-  (name) => [`enable${name}`, false]
-);
-const DiagramFeaturesContext = createContext(AllDisabled);
-const validate = (features) => {
-  let {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest
-  } = features;
-  if (enableReadOnly) {
-    enableEdgeEditing = false;
-  }
-  return {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest
-  };
+const DefaultFeatures = {
+  enableReadOnly: true,
+  enableCompareWithLatest: false,
+  enableControls: false,
+  enableDynamicViewWalkthrough: false,
+  enableElementDetails: false,
+  enableFocusMode: false,
+  enableNavigateTo: false,
+  enableNotations: false,
+  enableRelationshipBrowser: false,
+  enableRelationshipDetails: false,
+  enableSearch: false,
+  enableNavigationButtons: false,
+  enableFitView: false,
+  enableVscode: false,
+  enableElementTags: false
 };
+const DiagramFeaturesContext = createContext(DefaultFeatures);
 function DiagramFeatures({
   children,
   features,
@@ -53,11 +30,11 @@ function DiagramFeatures({
   useEffect(
     () => {
       setScope((current) => {
-        const next = validate({
+        const next = {
           ...outerScope,
           ...features,
           ...overrides
-        });
+        };
         return shallowEqual(current, next) ? current : next;
       });
     },
@@ -65,18 +42,13 @@ function DiagramFeatures({
   );
   return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
 }
+const overridesForOverlays = {
+  enableControls: false,
+  enableReadOnly: true,
+  enableCompareWithLatest: false
+};
 DiagramFeatures.Overlays = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    DiagramFeatures,
-    {
-      overrides: {
-        enableControls: false,
-        enableReadOnly: true,
-        enableEdgeEditing: false
-      },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: overridesForOverlays, children });
 };
 function useEnabledFeatures() {
   return useContext(DiagramFeaturesContext);
@@ -94,15 +66,15 @@ function IfNotEnabled({ feature, children }) {
   return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
 function IfReadOnly({ children }) {
-  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
+  const isReadOnly = useEnabledFeatures().enableReadOnly === true;
   return isReadOnly ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
 function IfNotReadOnly({ children }) {
-  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
+  const isReadOnly = useEnabledFeatures().enableReadOnly === true;
   if (isReadOnly) {
     return null;
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };
+export { DefaultFeatures, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };

package/dist/context/IconRenderer.js

@@ -1,12 +1,12 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { createContext, useContext } from 'react';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({

package/dist/context/LikeC4ModelContext.js

@@ -1,14 +1,7 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import 'react/jsx-runtime';
+import { createContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
 const CurrentViewModelContext = createContext(null);
-function EnsureCurrentViewModel({ children }) {
-  const viewmodel = useContext(CurrentViewModelContext);
-  if (!viewmodel) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
 
-export { CurrentViewModelContext, EnsureCurrentViewModel, LikeC4ModelContext };
+export { CurrentViewModelContext, LikeC4ModelContext };

package/dist/context/TagStylesContext.js

@@ -1,29 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isTagColorSpecified } from '@likec4/core';
+import { DefaultTagColors } from '@likec4/core/styles';
 import { useMantineStyleNonce } from '@mantine/core';
 import { createContext, memo, useContext } from 'react';
 import { isEmpty, pipe, entries, flatMap, join } from 'remeda';
 import { useLikeC4Specification } from '../hooks/useLikeC4Model.js';
 
 const TagStylesContext = createContext({});
-const radixColors = [
-  "yellow",
-  "orange",
-  "amber",
-  "tomato",
-  "red",
-  "ruby",
-  "crimson",
-  "pink",
-  "pink",
-  "purple",
-  "violet",
-  "indigo",
-  "blue",
-  "teal",
-  "grass",
-  "lime"
-];
+const radixColors = DefaultTagColors;
 const generateColorVars = (spec) => {
   const color = spec.color;
   if (isTagColorSpecified(spec)) {

package/dist/context/index.d.ts

@@ -1,5 +1,5 @@
 export { DiagramEventHandlers, useDiagramEventHandlers } from './DiagramEventHandlers';
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeatures, } from './DiagramFeatures';
+export { DefaultFeatures, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeatures, } from './DiagramFeatures';
 export type { EnabledFeatures } from './DiagramFeatures';
 export { EnsureMantine } from './EnsureMantine';
 export { FramerMotionConfig } from './FramerMotionConfig';

package/dist/custom/customNodes.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
+import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
 
 function customDiagramNode(Node) {
   return ((props) => {
     const viewId = props.data.viewId;
-    const viewModel = useLikeC4ViewModel(viewId);
+    const likec4 = useLikeC4Model();
+    const viewModel = likec4.findView(viewId);
     if (!viewModel) {
       console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props });
       return null;

package/dist/custom/hooks.d.ts

@@ -1,7 +1,7 @@
 export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../likec4diagram/state/types';
 export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
-export { useCurrentViewId, } from '../hooks/useCurrentViewId';
+export { useCurrentView, useCurrentViewId, } from '../hooks/useCurrentView';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
 export { useCurrentViewModel, } from '../hooks/useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../hooks/useLikeC4Model';

package/dist/custom/index.d.ts

@@ -4,7 +4,7 @@ export * from './hooks';
 export * from './primitives';
 export type { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData, } from '../base/types';
 export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
-export { Base } from '../base/types';
+export { Base } from '../base/Base';
 export type { Types } from '../likec4diagram/types';
 export { type EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { Overlay } from '../overlays/overlay/Overlay';

package/dist/custom/index.js

@@ -1,5 +1,5 @@
 export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from './customNodes.js';
-export { Base } from '../base/types.js';
+export { Base } from '../base/Base.js';
 export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from '../context/DiagramFeatures.js';
 export { Overlay } from '../overlays/overlay/Overlay.js';
 export { PortalToContainer } from '../components/PortalToContainer.js';
@@ -13,9 +13,9 @@ export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custo
 export { SequenceActorNode, SequenceParallelArea } from '../likec4diagram/custom/nodes/SequenceActorNode.js';
 export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useDiagramActorRef } from '../hooks/safeContext.js';
+export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
+export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
+export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
 export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';

package/dist/editor/LikeC4EditorContext.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { OnChange } from '../LikeC4Diagram.props';
+import type * as t from '@likec4/core/types';
+export type LikeC4EditorContextType = {
+    /**
+     * Fetch a view by its ID and layout type.
+     *
+     * @param viewId - The ID of the view to fetch.
+     * @param layout - The layout type to use when fetching the view.
+     */
+    fetchView(viewId: t.ViewId, layout?: t.LayoutType): Promise<t.LayoutedView>;
+    syncManualLayout(viewId: t.ViewId): Promise<void>;
+    /**
+     * Callback invoked when the view changes.
+     */
+    onChange: OnChange;
+};
+export declare function LikeC4EditorContext({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function EnsureEditorContext({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+export declare function useOptionalLikeC4Editor(): LikeC4EditorContextType | null;
+export declare function useLikeC4Editor(): LikeC4EditorContextType;

package/dist/editor/index.d.ts

@@ -0,0 +1,2 @@
+export { EnsureEditorContext, LikeC4EditorContext, useLikeC4Editor, useOptionalLikeC4Editor, } from './LikeC4EditorContext';
+export type { LikeC4EditorContextType } from './LikeC4EditorContext';

package/dist/hooks/index.d.ts

@@ -1,10 +1,11 @@
+export { useCallbackRef } from './useCallbackRef';
 export { useId } from './useId';
 export { useMantinePortalProps } from './useMantinePortalProps';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';
 export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
 export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow';
-export { useCurrentViewId } from './useCurrentViewId';
+export { useCurrentView, useCurrentViewId } from './useCurrentView';
 export { useCurrentViewModel } from './useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './useLikeC4Model';
 export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';

package/dist/hooks/safeContext.d.ts

@@ -1,4 +1,7 @@
-import { DiagramActorRef } from '../likec4diagram/state/types';
+import { DiagramApi } from '../likec4diagram/state/diagram-api';
 import { Provider } from 'react';
-export declare const DiagramActorContextProvider: Provider<DiagramActorRef>;
-export declare const useDiagramActorRef: () => DiagramActorRef;
+import { UnknownLayouted } from '@likec4/core';
+import { DiagramActorRef } from '../custom';
+export declare const DiagramActorContextProvider: Provider<DiagramApi< UnknownLayouted>>;
+export declare function useDiagramActorRef(): DiagramActorRef;
+export declare function useDiagram(): DiagramApi< UnknownLayouted>;

package/dist/hooks/safeContext.js

@@ -3,12 +3,19 @@ import { useContext, createContext } from 'react';
 const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 const DiagramActorContextProvider = DiagramActorSafeContext.Provider;
-const useDiagramActorRef = () => {
+function useDiagramActorRef() {
+  const ctx = useContext(DiagramActorSafeContext);
+  if (ctx === null) {
+    throw new Error("DiagramActorRef is not provided");
+  }
+  return ctx.actor;
+}
+function useDiagram() {
   const ctx = useContext(DiagramActorSafeContext);
   if (ctx === null) {
     throw new Error("DiagramActorRef is not provided");
   }
   return ctx;
-};
+}
 
-export { DiagramActorContextProvider, useDiagramActorRef };
+export { DiagramActorContextProvider, useDiagram, useDiagramActorRef };

package/dist/hooks/useCallbackRef.d.ts

@@ -0,0 +1 @@
+export declare function useCallbackRef<T extends (...args: any[]) => any>(callback: T | null | undefined): T;

package/dist/hooks/useCallbackRef.js

@@ -0,0 +1,13 @@
+import { useRef } 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;
+}
+
+export { useCallbackRef };

package/dist/hooks/useCurrentView.d.ts

@@ -0,0 +1,11 @@
+import { LayoutedView, ViewId } from '@likec4/core/types';
+/**
+ * Returns current view id
+ * Should be used only inside LikeC4Diagram
+ */
+export declare function useCurrentViewId(): ViewId;
+/**
+ * Returns current view
+ * Should be used only inside LikeC4Diagram
+ */
+export declare function useCurrentView(): LayoutedView;

package/dist/hooks/{useCurrentViewId.js → useCurrentView.js}

@@ -1,6 +1,5 @@
 import { useSelector } from '@xstate/react';
-import '@mantine/hooks';
-import 'fast-equals';
+import { shallowEqual } from 'fast-equals';
 import 'react';
 import { useDiagramActorRef } from './safeContext.js';
 
@@ -9,5 +8,10 @@ function useCurrentViewId() {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, selectViewId);
 }
+const selectView = (s) => s.context.view;
+function useCurrentView() {
+  const actorRef = useDiagramActorRef();
+  return useSelector(actorRef, selectView, shallowEqual);
+}
 
-export { useCurrentViewId };
+export { useCurrentView, useCurrentViewId };

package/dist/hooks/useCurrentViewModel.js

@@ -1,6 +1,9 @@
 import { useContext } from 'react';
 import { CurrentViewModelContext } from '../context/LikeC4ModelContext.js';
 
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelContext);
+}
 function useCurrentViewModel() {
   const vm = useContext(CurrentViewModelContext);
   if (!vm) {
@@ -9,4 +12,4 @@ function useCurrentViewModel() {
   return vm;
 }
 
-export { useCurrentViewModel };
+export { useCurrentViewModel, useOptionalCurrentViewModel };