@likec4/diagram 1.47.0 → 1.49.0

package/dist/context/DiagramFeatures.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { shallowEqual } from 'fast-equals';
-import { useContext, createContext, useState, useEffect } from 'react';
+import { useContext, createContext } from 'react';
+import { useSetState } from '../hooks/useSetState.js';
+import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 
 const DefaultFeatures = {
   enableEditor: false,
@@ -18,7 +19,8 @@ const DefaultFeatures = {
   enableNavigationButtons: false,
   enableFitView: false,
   enableVscode: false,
-  enableElementTags: false
+  enableElementTags: false,
+  enableNotes: false
 };
 const DiagramFeaturesContext = createContext(DefaultFeatures);
 function DiagramFeatures({
@@ -27,19 +29,20 @@ function DiagramFeatures({
   overrides
 }) {
   const outerScope = useContext(DiagramFeaturesContext);
-  const [scope, setScope] = useState(outerScope);
-  useEffect(
+  const [scope, setScope] = useSetState(() => ({
+    ...outerScope,
+    ...features,
+    ...overrides
+  }));
+  useUpdateEffect(
     () => {
-      setScope((current) => {
-        const next = {
-          ...outerScope,
-          ...features,
-          ...overrides
-        };
-        return shallowEqual(current, next) ? current : next;
+      setScope({
+        ...outerScope,
+        ...features,
+        ...overrides
       });
     },
-    [outerScope, features, overrides]
+    [outerScope, features, overrides, setScope]
   );
   return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
 }

package/dist/context/EnsureMantine.d.ts

@@ -1,7 +1,4 @@
 import { PropsWithChildren } from 'react';
 type EnsureMantineProps = PropsWithChildren<{}>;
 export declare function EnsureMantine({ children }: EnsureMantineProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace EnsureMantine {
-    var displayName: string;
-}
 export {};

package/dist/context/EnsureMantine.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { MantineContext, MantineProvider } from '@mantine/core';
+import { MantineContext } from '@mantine/core';
 import { useContext, useEffect } from 'react';
-import { DefaultTheme } from '../shadowroot/styles.css.js';
+import { DefaultMantineProvider } from './DefaultMantineProvider.js';
 
 function EnsureMantine({ children }) {
   const mantineCtx = useContext(MantineContext);
@@ -11,10 +11,9 @@ function EnsureMantine({ children }) {
     }
   }, []);
   if (!mantineCtx) {
-    return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", theme: DefaultTheme, children });
+    return /* @__PURE__ */ jsx(DefaultMantineProvider, { children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
-EnsureMantine.displayName = "EnsureMantine";
 
 export { EnsureMantine };

package/dist/context/FramerMotionConfig.d.ts

@@ -3,8 +3,6 @@ export declare const FramerMotionConfig: ({ reducedMotion, children, }: PropsWit
     /**
      * If true, will respect the device prefersReducedMotion setting by switching
      * transform animations off.
-     *
-     * @public
      */
-    reducedMotion?: "always" | "never" | "user";
+    reducedMotion?: "always" | "never" | "user" | undefined;
 }>) => import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.d.ts

@@ -1,6 +1,20 @@
 import { ElementShape } from '@likec4/core';
-import { CSSProperties, PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
+/**
+ * Provider for custom element icon renderers
+ *
+ * @example
+ * ```tsx
+ * const MyIconRenderer: ElementIconRenderer = ({ node }) => {
+ *   return <div>{node.title}</div>
+ * }
+ *
+ * <IconRendererProvider value={MyIconRenderer}>
+ *   <LikeC4Diagram />
+ * </IconRendererProvider>
+ * ```
+ */
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
 }>): import("react/jsx-runtime").JSX.Element;
@@ -12,13 +26,14 @@ export declare function IconRenderer({ element, className, style, }: {
     };
     className?: string | undefined;
     style?: CSSProperties | undefined;
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare function IconOrShapeRenderer({ element, className, }: {
+}): ReactNode;
+export declare function IconOrShapeRenderer({ element, className, style, }: {
     element: {
         id: string;
         title: string;
         shape: ElementShape;
         icon?: string | null | undefined;
     };
-    className: string;
+    className?: string;
+    style?: CSSProperties | undefined;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,13 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { createContext, useContext } from 'react';
-import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({
@@ -20,6 +20,26 @@ function IconRendererProvider({
   }
   return /* @__PURE__ */ jsx(IconRendererContext.Provider, { value, children });
 }
+function decodeSvgDataUrl(dataUrl) {
+  if (!dataUrl.startsWith("data:image/svg+xml")) {
+    return null;
+  }
+  try {
+    if (dataUrl.includes(";base64,")) {
+      const base64Content = dataUrl.split(";base64,")[1];
+      if (base64Content) {
+        return atob(base64Content);
+      }
+    } else {
+      const encodedContent = dataUrl.split(",")[1];
+      if (encodedContent) {
+        return decodeURIComponent(encodedContent);
+      }
+    }
+  } catch {
+  }
+  return null;
+}
 function IconRenderer({
   element,
   className,
@@ -30,8 +50,13 @@ function IconRenderer({
     return null;
   }
   let icon;
-  if (element.icon.startsWith("http://") || element.icon.startsWith("https://")) {
-    icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
+  if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
+    const svgContent = element.icon.startsWith("data:image/svg+xml") ? decodeSvgDataUrl(element.icon) : null;
+    if (svgContent) {
+      icon = /* @__PURE__ */ jsx("span", { style: { display: "contents" }, dangerouslySetInnerHTML: { __html: svgContent } });
+    } else {
+      icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
+    }
   } else if (RenderIcon) {
     icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
   }
@@ -60,27 +85,29 @@ const ShapeIcons = {
   rectangle: IconRectangularPrism,
   storage: IconCylinder,
   bucket: IconCylinder,
-  document: IconFileText
+  document: IconFileText,
+  component: IconRectangularPrism
 };
 function IconOrShapeRenderer({
   element,
-  className
+  className,
+  style
 }) {
-  const icon = /* @__PURE__ */ jsx(IconRenderer, { element, className });
-  if (icon) {
-    return icon;
+  if (!element.icon || element.icon === "none") {
+    const ShapeIcon = ShapeIcons[element.shape];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          className,
+          "likec4-shape-icon"
+        ),
+        style,
+        children: /* @__PURE__ */ jsx(ShapeIcon, {})
+      }
+    );
   }
-  const ShapeIcon = ShapeIcons[element.shape];
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        className,
-        "likec4-shape-icon"
-      ),
-      children: /* @__PURE__ */ jsx(ShapeIcon, {})
-    }
-  );
+  return /* @__PURE__ */ jsx(IconRenderer, { element, className, style });
 }
 
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.d.ts

@@ -1,10 +1,15 @@
 import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
-import { DiagramView } from '@likec4/core/types';
-import { PropsWithChildren, Context } from 'react';
+import { LayoutedView } from '@likec4/core/types';
+import { PropsWithChildren, Provider } from 'react';
 import type * as t from '@likec4/core/types';
 type UnknownLayouted = t.aux.UnknownLayouted;
-export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;
-export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, DiagramView<UnknownLayouted>>;
-export declare const CurrentViewModelContext: Context<CurrentViewModel | null>;
+export declare const LikeC4ModelContextProvider: Provider<LikeC4Model<any> | null>;
+export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, LayoutedView<UnknownLayouted>>;
+export declare const CurrentViewModelContext: Provider<CurrentViewModel | null>;
 export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
+ */
+export declare function useOptionalLikeC4Model<A extends t.aux.Any = UnknownLayouted>(): LikeC4Model<A> | null;
+export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
 export {};

package/dist/context/LikeC4ModelContext.js

@@ -1,7 +1,15 @@
 import 'react/jsx-runtime';
-import { createContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
-const CurrentViewModelContext = createContext(null);
+const LikeC4ModelContextProvider = LikeC4ModelContext.Provider;
+const CurrentViewModelCtx = createContext(null);
+const CurrentViewModelContext = CurrentViewModelCtx.Provider;
+function useOptionalLikeC4Model() {
+  return useContext(LikeC4ModelContext);
+}
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelCtx);
+}
 
-export { CurrentViewModelContext, LikeC4ModelContext };
+export { CurrentViewModelContext, LikeC4ModelContextProvider, useOptionalCurrentViewModel, useOptionalLikeC4Model };

package/dist/context/LikeC4ProjectsContext.d.ts

@@ -1,7 +1,8 @@
 import { LikeC4Project, ProjectId } from '@likec4/core/types';
-import { Context } from 'react';
+import { Provider } from 'react';
 export type LikeC4ProjectsContext = {
     projects: ReadonlyArray<LikeC4Project>;
     onProjectChange: (id: ProjectId) => void;
 };
-export declare const LikeC4ProjectsContext: Context<LikeC4ProjectsContext | null>;
+export declare const LikeC4ProjectsContextProvider: Provider<LikeC4ProjectsContext | null>;
+export declare function useOptionalProjectsContext(): LikeC4ProjectsContext | null;

package/dist/context/LikeC4ProjectsContext.js

@@ -1,5 +1,9 @@
-import { createContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const LikeC4ProjectsContext = createContext(null);
+const LikeC4ProjectsContextProvider = LikeC4ProjectsContext.Provider;
+function useOptionalProjectsContext() {
+  return useContext(LikeC4ProjectsContext);
+}
 
-export { LikeC4ProjectsContext };
+export { LikeC4ProjectsContextProvider, useOptionalProjectsContext };

package/dist/context/RootContainerContext.d.ts

@@ -1,16 +1,23 @@
 import { WritableAtom } from 'nanostores';
-import { RefObject, Context } from 'react';
-export declare const RootContainerContext: Context<{
+import { RefObject, Provider } from 'react';
+export declare const RootContainerContextProvider: Provider<{
     id: string;
+    selector: string;
     ref: RefObject<HTMLDivElement | null>;
 } | null>;
+export declare function useRootContainerContext(): {
+    id: string;
+    selector: string;
+    ref: RefObject<HTMLDivElement | null>;
+} | null;
 export declare function useRootContainer(): {
     id: string;
+    selector: string;
     ref: RefObject<HTMLDivElement | null>;
 };
 export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
 export declare function useRootContainerElement(): HTMLDivElement | null;
-export declare const ReduceGraphicsModeCtx: Context<boolean | null>;
+export declare const ReduceGraphicsModeProvider: Provider<boolean | null>;
 /**
  * Hook to determine if reduced graphics mode is enabled.
  */

package/dist/context/RootContainerContext.js

@@ -1,10 +1,14 @@
 import { createSafeContext } from '@mantine/core';
 import '@nanostores/react';
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const RootContainerContext = createContext(null);
+const RootContainerContextProvider = RootContainerContext.Provider;
+function useRootContainerContext() {
+  return useContext(RootContainerContext);
+}
 function useRootContainer() {
-  const ctx = useContext(RootContainerContext);
+  const ctx = useRootContainerContext();
   if (!ctx) {
     throw new Error("useRootContainer must be used within a RootContainer");
   }
@@ -17,6 +21,7 @@ function useRootContainerElement() {
   return useRootContainer().ref.current;
 }
 const ReduceGraphicsModeCtx = createContext(null);
+const ReduceGraphicsModeProvider = ReduceGraphicsModeCtx.Provider;
 function useIsReducedGraphics() {
   const isReduced = useContext(ReduceGraphicsModeCtx);
   if (isReduced === null) {
@@ -28,4 +33,4 @@ const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
   "PanningAtomSafeCtx is not provided"
 );
 
-export { PanningAtomSafeCtx, ReduceGraphicsModeCtx, RootContainerContext, useIsReducedGraphics, usePanningAtom, useRootContainer, useRootContainerElement, useRootContainerRef };
+export { PanningAtomSafeCtx, ReduceGraphicsModeProvider, RootContainerContextProvider, useIsReducedGraphics, usePanningAtom, useRootContainer, useRootContainerContext, useRootContainerElement, useRootContainerRef };

package/dist/context/TagStylesContext.js

@@ -2,7 +2,7 @@ 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 { useContext, createContext, memo } from 'react';
 import { isEmpty, pipe, entries, flatMap, join } from 'remeda';
 import { useLikeC4Specification } from '../hooks/useLikeC4Model.js';
 
@@ -46,15 +46,23 @@ function generateStylesheet(tags, rootSelector) {
 }
 function TagStylesProvider({ children, rootSelector }) {
   const tags = useLikeC4Specification().tags;
+  const nonce = useMantineStyleNonce()?.();
   const stylesheet = generateStylesheet(tags, rootSelector);
   return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: tags, children: [
-    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
+    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { nonce, stylesheet }),
     children
   ] });
 }
-const TagStylesheet = memo(({ stylesheet }) => {
-  const nonce = useMantineStyleNonce()?.();
-  return /* @__PURE__ */ jsx("style", { "data-likec4-tags": true, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
+const TagStylesheet = memo(({ stylesheet, nonce }) => {
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      "data-likec4-tags": true,
+      type: "text/css",
+      dangerouslySetInnerHTML: { __html: stylesheet },
+      nonce
+    }
+  );
 });
 function useTagSpecification(tag) {
   const specs = useContext(TagStylesContext);

package/dist/custom/hooks.d.ts

@@ -3,8 +3,8 @@ export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 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';
+export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from '../hooks/useCurrentViewModel';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model, } from '../hooks/useLikeC4Model';
 export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
 export { useLikeC4Styles, } from '../hooks/useLikeC4Styles';
 export { useSetState } from '../hooks/useSetState';

package/dist/custom/index.d.ts

@@ -3,7 +3,7 @@ export * from './customNodes';
 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 type { DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
 export { Base } from '../base/Base';
 export type { Types } from '../likec4diagram/types';
 export { type EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures, } from '../context/DiagramFeatures';

package/dist/custom/index.js

@@ -5,28 +5,16 @@ export { Overlay } from '../overlays/overlay/Overlay.js';
 export { PortalToContainer } from '../components/PortalToContainer.js';
 export { ShadowRoot } from '../shadowroot/ShadowRoot.js';
 export { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
 export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';
 export { CompoundDeploymentToolbar, CompoundElementToolbar } from '../likec4diagram/custom/nodes/toolbar/CompoundToolbar.js';
-export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
-export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
-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 { 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, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
-export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
-export { useSetState } from '../hooks/useSetState.js';
-export { useUpdateEffect } from '../hooks/useUpdateEffect.js';
-export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
 export { CompoundDetailsButton } from '../base-primitives/compound/CompoundDetailsButton.js';
 export { CompoundNodeContainer } from '../base-primitives/compound/CompoundNodeContainer.js';
 export { CompoundTitle } from '../base-primitives/compound/CompoundTitle.js';
 export { DefaultHandles } from '../base-primitives/NodeHandles.js';
+export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
+export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
 export { ElementActionButtons } from '../base-primitives/element/ElementActionButtons.js';
 export { ElementData } from '../base-primitives/element/ElementData.js';
 export { ElementDetailsButton } from '../base-primitives/element/ElementDetailsButton.js';
@@ -34,5 +22,18 @@ export { ElementNodeContainer } from '../base-primitives/element/ElementNodeCont
 export { ElementShape } from '../base-primitives/element/ElementShape.js';
 export { ElementTag, ElementTags } from '../base-primitives/element/ElementTags.js';
 export { Markdown } from '../base-primitives/Markdown.js';
+export { SequenceActorNode, SequenceParallelArea } from '../likec4diagram/custom/nodes/SequenceActorNode.js';
+export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
 export { memoEdge } from '../base-primitives/memoEdge.js';
 export { memoNode } from '../base-primitives/memoNode.js';
+export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
+export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
+export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
+export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
+export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
+export { useOptionalCurrentViewModel, useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
+export { useSetState } from '../hooks/useSetState.js';
+export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/editor/LikeC4EditorCallbacks.d.ts

@@ -0,0 +1,18 @@
+import type * as t from '@likec4/core/types';
+/**
+ * Callbacks from LikeC4 Editor.
+ */
+export interface LikeC4EditorCallbacks {
+    /**
+     * 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): t.LayoutedView | Promise<t.LayoutedView>;
+    /**
+     * Callback invoked when the view changes.
+     */
+    handleChange(viewId: t.ViewId, change: t.ViewChange): void | Promise<void>;
+}
+export declare function createLikeC4Editor(callbacks: LikeC4EditorCallbacks): LikeC4EditorCallbacks;

package/dist/editor/LikeC4EditorCallbacks.js

@@ -0,0 +1,5 @@
+function createLikeC4Editor(callbacks) {
+  return callbacks;
+}
+
+export { createLikeC4Editor };

package/dist/editor/LikeC4EditorProvider.d.ts

@@ -1,22 +1,34 @@
-import { PropsWithChildren, Context } from 'react';
-import type * as t from '@likec4/core/types';
-export type LikeC4EditorPort = {
-    /**
-     * 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): t.LayoutedView | Promise<t.LayoutedView>;
-    /**
-     * Callback invoked when the view changes.
-     */
-    handleChange(viewId: t.ViewId, change: t.ViewChange): void | Promise<void>;
-};
+import { PropsWithChildren } from 'react';
+import { LikeC4EditorCallbacks } from './LikeC4EditorCallbacks';
 export type LikeC4EditorProviderProps = PropsWithChildren<{
-    editor: LikeC4EditorPort;
+    editor: LikeC4EditorCallbacks;
 }>;
-export declare const LikeC4EditorReactContext: Context<LikeC4EditorPort | null>;
+/**
+ * Provider for the LikeC4 Editor.
+ * @example
+ * ```tsx
+ *
+ * // Not required to use memo for editor callbacks
+ * const editor = createLikeC4Editor({
+ *   fetchView: async (viewId, layout) => {
+ *     // fetch view logic
+ *   },
+ *   handleChange: (viewId, change) => {
+ *     // handle change logic
+ *   }
+ * })
+ *
+ * <LikeC4EditorProvider
+ *  editor={editor}>
+ *   <App />
+ * </LikeC4EditorProvider>
+ * ```
+ */
 export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Component that ensures the editor context is available.
+ *
+ * @param children - The children to render.
+ */
 export declare function EnsureEditorContext({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
-export declare function useOptionalLikeC4EditorPort(): LikeC4EditorPort | null;
+export declare function useOptionalLikeC4Editor(): LikeC4EditorCallbacks | null;

package/dist/editor/LikeC4EditorProvider.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const LikeC4EditorReactContext = createContext(null);
 function LikeC4EditorProvider({ children, editor }) {
   return /* @__PURE__ */ jsx(LikeC4EditorReactContext.Provider, { value: editor, children });
 }
-function useOptionalLikeC4EditorPort() {
+function useOptionalLikeC4Editor() {
   return useContext(LikeC4EditorReactContext);
 }
 
-export { LikeC4EditorProvider, LikeC4EditorReactContext, useOptionalLikeC4EditorPort };
+export { LikeC4EditorProvider, useOptionalLikeC4Editor };

package/dist/editor/applyChangesToManualLayout.js

@@ -1,7 +1,7 @@
 import { invariant, nonNullable } from '@likec4/core';
-import { BBox, vector } from '@likec4/core/geometry';
+import { BBox, convertPoint, vector } from '@likec4/core/geometry';
 import { setAutoFreeze, produce, castDraft } from 'immer';
-import { isNullish } from 'remeda';
+import { map, isNullish } from 'remeda';
 
 function applyChangesToManualLayout(manualView, latestView) {
   try {
@@ -144,6 +144,7 @@ function makeAsStraightLine(edge, sourceNode, targetNode) {
   const controlPoints = edgeControlPoints(sourceNode, targetNode);
   const labelPos = controlPoints[0];
   return produce(edge, (draft) => {
+    draft.points = castDraft(map(controlPoints, convertPoint));
     draft.controlPoints = controlPoints;
     if (edge.labelBBox) {
       draft.labelBBox.x = labelPos.x;
@@ -165,8 +166,8 @@ function edgeControlPoints(source, target) {
     const loopSize = 80;
     const centerOfTopBoundary = vector(0, source.height || 0).multiply(-0.5).add(sourceCenter);
     return [
-      centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)).round().toObject(),
-      centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize)).round().toObject()
+      centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)).trunc().toObject(),
+      centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize)).trunc().toObject()
     ];
   }
   const sourceToTargetVector = targetCenter.subtract(sourceCenter);
@@ -174,8 +175,8 @@ function edgeControlPoints(source, target) {
   const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.multiply(-1));
   const sourceToTarget = targetBorderPoint.subtract(sourceBorderPoint);
   return [
-    sourceBorderPoint.add(sourceToTarget.multiply(0.4)).round().toObject(),
-    sourceBorderPoint.add(sourceToTarget.multiply(0.6)).round().toObject()
+    sourceBorderPoint.add(sourceToTarget.multiply(0.4)).trunc().toObject(),
+    sourceBorderPoint.add(sourceToTarget.multiply(0.6)).trunc().toObject()
   ];
 }