@likec4/diagram 1.41.0 → 1.42.0

package/dist/{base/primitives → base-primitives}/element/ElementNodeContainer.d.ts

@@ -1,27 +1,22 @@
 import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
 import { MotionNodeLayoutOptions } from 'motion/react';
-import { CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { NodeProps } from '../../types';
-export type RequiredData = {
+import { CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { BaseNodePropsWithData } from '../../base/types';
+type RequiredData = {
     color: Color;
     shape: ElementShape;
     style?: ElementStyle;
 };
-export type ElementNodeContainerProps = {
-    nodeProps: NodeProps<RequiredData>;
-    children?: ReactNode | undefined;
-    className?: string | undefined;
-    style?: CSSProperties | undefined;
-    [key: `data-${string}`]: string | undefined;
-} & MotionNodeLayoutOptions;
 /**
  * Top-level primitive to compose leaf nodes renderers.
  * This container provides the state via data-* attributes
  */
 export declare const ElementNodeContainer: ForwardRefExoticComponent<{
     [key: `data-${string}`]: string | undefined;
-    nodeProps: NodeProps<RequiredData>;
-    children?: ReactNode | undefined;
+    nodeProps: BaseNodePropsWithData<RequiredData>;
     className?: string | undefined;
     style?: CSSProperties | undefined;
-} & MotionNodeLayoutOptions & RefAttributes<HTMLDivElement>>;
+} & MotionNodeLayoutOptions & {
+    children?: ReactNode | undefined;
+} & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/base-primitives/element/ElementShape.d.ts

@@ -0,0 +1,18 @@
+import { ComputedNodeStyle, ElementShape } from '@likec4/core/types';
+type Data = {
+    shape: ElementShape;
+    width: number;
+    height: number;
+    style?: ComputedNodeStyle;
+};
+type ElementShapeProps = {
+    data: Data;
+    width?: number | undefined;
+    height?: number | undefined;
+    /**
+     * @default true
+     */
+    showSeletionOutline?: boolean | undefined;
+};
+export declare function ElementShape({ data, width, height, showSeletionOutline }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/{base/primitives → base-primitives}/element/ElementShape.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
-import { Box } from '@likec4/styles/jsx';
 import { elementShapeRecipe } from '@likec4/styles/recipes';
-import { roundDpr } from '../../../utils/roundDpr.js';
+import { roundDpr } from '../../utils/roundDpr.js';
 
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2);
@@ -132,25 +131,41 @@ function ShapeSvg({ shape, w, h }) {
         /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
-    case "rectangle": {
-      return /* @__PURE__ */ jsx(
+    default: {
+      return nonexhaustive(shape);
+    }
+  }
+}
+function ShapeSvgOutline({ shape, w, h }) {
+  let svg;
+  switch (shape) {
+    case "queue":
+      svg = /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+      break;
+    case "storage":
+    case "cylinder": {
+      svg = /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+      break;
+    }
+    default: {
+      svg = /* @__PURE__ */ jsx(
         "rect",
         {
-          width: w,
-          height: h,
-          rx: 6,
-          strokeWidth: 0
+          x: -1,
+          y: -1,
+          width: w + 2,
+          height: h + 2,
+          rx: 6
         }
       );
-    }
-    default: {
-      return nonexhaustive(shape);
+      break;
     }
   }
+  return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
 function ShapeHtml({ multiple, withOutLine }) {
   return /* @__PURE__ */ jsxs(
-    Box,
+    "div",
     {
       className: elementShapeRecipe({
         shapetype: "html"
@@ -162,12 +177,12 @@ function ShapeHtml({ multiple, withOutLine }) {
     }
   );
 }
-function ElementShape({ data, width, height, withSelectedIndicator = true }) {
+function ElementShape({ data, width, height, showSeletionOutline = true }) {
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
   const isMultiple = data.style?.multiple ?? false;
   if (data.shape === "rectangle") {
-    return /* @__PURE__ */ jsx(ShapeHtml, { multiple: isMultiple, withOutLine: withSelectedIndicator });
+    return /* @__PURE__ */ jsx(ShapeHtml, { multiple: isMultiple, withOutLine: showSeletionOutline });
   }
   const className = elementShapeRecipe({
     shapetype: "svg"
@@ -175,37 +190,10 @@ function ElementShape({ data, width, height, withSelectedIndicator = true }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h }) }),
     /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
-      withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
+      showSeletionOutline && /* @__PURE__ */ jsx(ShapeSvgOutline, { shape: data.shape, w, h }),
       /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h })
     ] })
   ] });
 }
-function SelectedIndicator({ shape, w, h }) {
-  let svg;
-  switch (shape) {
-    case "queue":
-      svg = /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
-      break;
-    case "storage":
-    case "cylinder": {
-      svg = /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
-      break;
-    }
-    default: {
-      svg = /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: -1,
-          y: -1,
-          width: w + 2,
-          height: h + 2,
-          rx: 6
-        }
-      );
-      break;
-    }
-  }
-  return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
-}
 
-export { ElementShape, SelectedIndicator, cylinderSVGPath };
+export { ElementShape };

package/dist/{base/primitives → base-primitives}/element/ElementTags.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '@likec4/styles/jsx';
-import { NodeProps } from '../../types';
+import { BaseNodePropsWithData } from '../../base/types';
 import { ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
 export type ElementTagProps = {
     tag: string;
@@ -10,6 +10,6 @@ type Data = {
     tags: readonly string[] | null | undefined;
     width: number;
 };
-type ElementTagsProps = NodeProps<Data>;
+type ElementTagsProps = BaseNodePropsWithData<Data>;
 export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered } }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};

package/dist/{base/primitives → base-primitives}/element/ElementTags.js

@@ -8,10 +8,10 @@ import { useHover, useDebouncedState } from '@mantine/hooks';
 import { NodeToolbar, Position } from '@xyflow/react';
 import { deepEqual } from 'fast-equals';
 import { forwardRef, memo, useEffect, useCallback } from 'react';
-import { useTagSpecification } from '../../../context/TagStylesContext.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
-import { useCurrentZoom } from '../../../hooks/useXYFlow.js';
-import { stopPropagation } from '../../../utils/xyflow.js';
+import { useTagSpecification } from '../../context/TagStylesContext.js';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { useCurrentZoom } from '../../hooks/useXYFlow.js';
+import { stopPropagation } from '../../utils/xyflow.js';
 
 const ElementTag = forwardRef(
   ({ tag, cursor, className, style, ...props }, ref) => {

package/dist/{base/primitives → base-primitives}/index.d.ts

@@ -2,8 +2,6 @@ export { CompoundActionButton } from './compound/CompoundActionButton';
 export { CompoundDetailsButton } from './compound/CompoundDetailsButton';
 export { CompoundNodeContainer } from './compound/CompoundNodeContainer';
 export { CompoundTitle } from './compound/CompoundTitle';
-export { customEdge } from './customEdge';
-export { customNode } from './customNode';
 export { EdgeActionButton } from './edge/EdgeActionButton';
 export { EdgeContainer } from './edge/EdgeContainer';
 export { EdgeLabel } from './edge/EdgeLabel';
@@ -11,10 +9,12 @@ export { EdgeLabelContainer } from './edge/EdgeLabelContainer';
 export { arrowTypeToMarker, EdgeMarkers, type EdgeMarkerType } from './edge/EdgeMarkers';
 export { EdgePath } from './edge/EdgePath';
 export { ElementActionButtons } from './element/ElementActionButtons';
+export { ElementData } from './element/ElementData';
 export { ElementDetailsButton } from './element/ElementDetailsButton';
 export { ElementNodeContainer } from './element/ElementNodeContainer';
 export { ElementShape } from './element/ElementShape';
 export { ElementTag, ElementTags } from './element/ElementTags';
-export { ElementTitle } from './element/ElementTitle';
-export { MarkdownBlock } from './MarkdownBlock';
+export { Markdown } from './Markdown';
+export { memoEdge } from './memoEdge';
+export { memoNode } from './memoNode';
 export { DefaultHandles } from './NodeHandles';

package/dist/base-primitives/memoEdge.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { BaseEdgeProps } from '../base/types';
+export declare function memoEdge<P extends BaseEdgeProps>(Edge: FunctionComponent<P>): FunctionComponent<P>;

package/dist/{base/primitives/customEdge.js → base-primitives/memoEdge.js}

@@ -5,8 +5,8 @@ const isSame = (a, b) => {
   return Math.abs(a - b) < 2.5;
 };
 const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
-function customEdge(Edge) {
+function memoEdge(Edge) {
   return memo(Edge, edgePropsEqual);
 }
 
-export { customEdge, edgePropsEqual };
+export { memoEdge };

package/dist/base-primitives/memoNode.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { BaseNodeProps } from '../base/types';
+export declare function memoNode<P extends BaseNodeProps>(Node: FunctionComponent<P>): FunctionComponent<P>;

package/dist/{base/primitives/customNode.js → base-primitives/memoNode.js}

@@ -4,13 +4,22 @@ import { memo } from 'react';
 function nodePropsEqual(prev, next) {
   return prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 }
-function customNode(Node) {
+const isMemoized = Symbol.for("isMemoized");
+function memoNode(Node) {
+  if (Node.hasOwnProperty(isMemoized)) {
+    return Node;
+  }
   const NodeComponent = memo(
     Node,
-    (prev, next) => nodePropsEqual(prev, next)
+    nodePropsEqual
   );
   NodeComponent.displayName = "Node";
+  Object.defineProperty(NodeComponent, isMemoized, {
+    enumerable: false,
+    writable: false,
+    value: true
+  });
   return NodeComponent;
 }
 
-export { customNode, nodePropsEqual };
+export { memoNode };

package/dist/bundle/index.d.ts

@@ -1,8 +1 @@
-export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from '../LikeC4Diagram.props';
-export { LikeC4View } from './LikeC4View';
-export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props';
-export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
-export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps } from '../LikeC4ProjectsProvider';
-export { LikeC4ModelProvider, type LikeC4ModelProviderProps } from './LikeC4ModelProvider';
-export { ViewNotFound } from './ViewNotFound';
-export * from '../custom/hooks';
+export * from '../index';

package/dist/components/ErrorFallback.js

@@ -2,29 +2,48 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box } from '@likec4/styles/jsx';
 import { Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_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.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
-  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: "0", left: "0", w: "100%", p: "0", style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
-    Notification,
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
-      styles: {
-        icon: {
-          alignSelf: "flex-start"
-        }
+      css: {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        padding: "0",
+        backdropFilter: `blur(5px)`,
+        backgroundColor: {
+          _dark: `[rgb(34 34 34 / 10%)]`,
+          _light: `[rgb(15 15 15/ 20%)]`
+        },
+        zIndex: 1e3
       },
-      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" }) })
-      ]
+      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" }) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 function ErrorBoundary(props) {
   return /* @__PURE__ */ jsx(

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.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_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.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';
 
 const GITHUB_PREFIX = "https://github.com/";
 const Link = forwardRef(

package/dist/components/Logo.d.ts

@@ -0,0 +1,5 @@
+import { SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+type LogoProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'>;
+export declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export declare const LogoIcon: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/PortalToContainer.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+/**
+ * PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
+ * It is used internally by the library.
+ */
+export declare function PortalToContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/components/PortalToContainer.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { Portal } from '@mantine/core';
+import { useContext } from 'react';
+import { RootContainerContext } from '../context/RootContainerContext.js';
+
+function PortalToContainer({ children }) {
+  const ctx = useContext(RootContainerContext);
+  if (!ctx) {
+    throw new Error("PortalToContainer must be used within RootContainer");
+  }
+  return /* @__PURE__ */ jsx(Portal, { target: ctx.ref.current ?? `#${ctx.id}`, children });
+}
+
+export { PortalToContainer };

package/dist/{context → components}/RootContainer.d.ts

@@ -1,11 +1,6 @@
-import { PropsWithChildren, RefObject } from 'react';
+import { PropsWithChildren } from 'react';
 export declare function RootContainer({ id, className, reduceGraphics, children, }: PropsWithChildren<{
     id: string;
     className?: string | undefined;
     reduceGraphics?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
-/**
- * NOTE: Non-reactive
- */
-export declare function useRootContainer(): HTMLDivElement | null;

package/dist/{context → components}/RootContainer.js

@@ -1,26 +1,30 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { useRef, useEffect, createContext, useContext, createRef } from 'react';
-import { usePanningAtom } from './ReduceGraphics.js';
-import { TagStylesProvider } from './TagStylesContext.js';
+import { useIsomorphicLayoutEffect } from '@react-hookz/web';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { usePanningAtom } from '../context/ReduceGraphics.js';
+import { RootContainerContext } from '../context/RootContainerContext.js';
 
-const RootContainerContext = createContext(createRef());
 function RootContainer({
   id,
   className,
   reduceGraphics = false,
   children
 }) {
+  const [mounted, setMounted] = useState(false);
   const ref = useRef(null);
   const $isPanning = usePanningAtom();
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true);
+  }, []);
   useEffect(() => {
     return $isPanning.listen((isPanning) => {
       ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
     });
   }, [$isPanning]);
+  const ctx = useMemo(() => ({ id, ref }), [id, ref]);
   return /* @__PURE__ */ jsx(
-    Box,
+    "div",
     {
       id,
       className: cx("likec4-root", className),
@@ -28,12 +32,9 @@ function RootContainer({
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
       },
-      children: /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children }) })
+      children: mounted && !!ctx.ref.current && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
     }
   );
 }
-function useRootContainer() {
-  return useContext(RootContainerContext).current;
-}
 
-export { RootContainer, useRootContainer };
+export { RootContainer };

package/dist/{bundle → components}/ViewNotFound.js

@@ -1,10 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const ErrorMessage = ({ children }) => /* @__PURE__ */ jsx(
   "div",
   {
     style: {
-      margin: "[1rem 0]"
+      margin: "1rem 0"
     },
     children: /* @__PURE__ */ jsx(
       "div",

package/dist/context/DiagramEventHandlers.d.ts

@@ -4,11 +4,11 @@ import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 type RequiredOrNull<T> = {
     [P in keyof T]-?: NonNullable<T[P]> | null;
 };
-export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers<aux.Any>> & {
-    handlersRef: RefObject<LikeC4DiagramEventHandlers<aux.Any>>;
+export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers> & {
+    handlersRef: RefObject<Required<LikeC4DiagramEventHandlers>>;
 };
 export declare function DiagramEventHandlers<A extends aux.Any>({ handlers, children, }: PropsWithChildren<{
-    handlers: LikeC4DiagramEventHandlers<A>;
+    handlers: Required<LikeC4DiagramEventHandlers<A>>;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
 export declare function useDiagramEventHandlersRef<A extends aux.Any = aux.Any>(): RefObject<LikeC4DiagramEventHandlers<A>>;

package/dist/context/DiagramEventHandlers.js

@@ -1,32 +1,36 @@
 import { jsx } from 'react/jsx-runtime';
 import { useSyncedRef } from '@react-hookz/web';
 import { useContext, createContext, useMemo } from 'react';
-import { isFunction, mapToObj } from 'remeda';
+import { keys, isFunction, mapToObj } from 'remeda';
 
-const HandlerNames = [
-  "onBurgerMenuClick",
-  "onNavigateTo",
-  "onOpenSource",
-  "onCanvasClick",
-  "onCanvasContextMenu",
-  "onEdgeClick",
-  "onEdgeContextMenu",
-  "onNodeClick",
-  "onNodeContextMenu",
-  "onChange",
-  "onCanvasDblClick"
-];
+const defaultHandlers = {
+  onChange: null,
+  onNavigateTo: null,
+  onNodeClick: null,
+  onNodeContextMenu: null,
+  onCanvasContextMenu: null,
+  onEdgeClick: null,
+  onEdgeContextMenu: null,
+  onCanvasClick: null,
+  onCanvasDblClick: null,
+  onBurgerMenuClick: null,
+  onOpenSource: null,
+  onInitialized: null
+};
+const HandlerNames = keys(defaultHandlers);
 const DiagramEventHandlersReactContext = createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
-    current: {}
+    current: defaultHandlers
   }
 });
 function DiagramEventHandlers({
   handlers,
   children
 }) {
-  const handlersRef = useSyncedRef(handlers);
+  const handlersRef = useSyncedRef(
+    handlers
+  );
   const deps = HandlerNames.map((name) => isFunction(handlers[name]));
   const value = useMemo(() => ({
     ...mapToObj(HandlerNames, (name) => {

package/dist/context/DiagramFeatures.d.ts

@@ -1,6 +1,6 @@
 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", "ViewTitle", "FitView", "Vscode", "ElementTags"];
+declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "FitView", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 type CustomFeatures = {
     enableControls: 'next' | boolean;

package/dist/context/DiagramFeatures.js

@@ -16,7 +16,6 @@ const FeatureNames = [
   "Notations",
   "DynamicViewWalkthrough",
   "EdgeEditing",
-  "ViewTitle",
   "FitView",
   /**
    * Running in VSCode

package/dist/context/IconRenderer.d.ts

@@ -1,16 +1,17 @@
 import { ElementShape } from '@likec4/core';
-import { PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren } from 'react';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function IconRenderer({ element, className, }: {
+export declare function IconRenderer({ element, className, style, }: {
     element?: {
         id: string;
         title: string;
         icon?: string | null | undefined;
     };
-    className: string;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
 export declare function IconOrShapeRenderer({ element, className, }: {
     element: {

package/dist/context/IconRenderer.js

@@ -1,12 +1,12 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { useContext, createContext } from 'react';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+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';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({
@@ -21,7 +21,8 @@ function IconRendererProvider({
 }
 function IconRenderer({
   element,
-  className
+  className,
+  style
 }) {
   const RenderIcon = useContext(IconRendererContext);
   if (!element || !element.icon || element.icon === "none") {
@@ -44,6 +45,7 @@ function IconRenderer({
         "likec4-element-icon"
       ),
       "data-likec4-icon": element.icon,
+      style,
       children: icon
     }
   );