@likec4/diagram 1.41.0 → 1.42.1

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/Logo.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { forwardRef } from 'react';
+
+const Logo = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxs("svg", { ref, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 222 56", ...props, children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#5E98AF",
+          d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: css({
+            fill: "[#FCFBF7]",
+            _light: {
+              fill: "[#222221]"
+            }
+          }),
+          d: "M71.61 12.08c-.06 3.61.3 29.95.23 31.87 0 1.8 0 3.6.06 5.41 0 .3.18.58.47.58 4.1.18 8.13-.17 12.22-.11 1.34.05 2.69 0 3.97 0 1.29-.06 1.4-.59 1.35-1.63-.06-1.63-.06-3.08-.06-4.65-.06-.82-.53-1.11-1.23-1.11-2.4.06-4.8-.06-7.19.06-.4.06-.82.06-1.23.06-.7-.06-.87-.24-.93-1v-.86c-.18-4.83.17-9.83.17-14.66-.06-4.07 0-7.73-.06-11.34 0-1.57 0-3.14-.05-4.65-.06-.93 0-1.92-.24-2.85-.11-.35-.29-.81-.7-.81h-5.5c-.93 0-1.22.64-1.28 1.57v4.12ZM103.81 35c-.17-6.63-.1-13.67-.05-20.24 0-2.04-.12-4.25-.12-6.28 0-2.21-.87-2.1-2.04-2.15-1.7-.06-2.46-.06-4.15-.06-1.11-.06-1.58.23-1.58 1.34 0 5.7-.18 21.8-.12 24.13.06 2.33.3 12.91.18 15.24-.06.81 0 1.62.06 2.44.05.29.23.58.7.58 1.93-.12 3.74-.12 5.67-.17.7-.06 1.28-.24 1.58-1 .05-.4-.12-11.04-.12-13.83Zm13.92 4.47c0-2.03-.3-7.56-.23-8.72 0-.17.11-.4.17-.4.12 0 .35.11.41.17 1.87 2.44 10.64 19.36 11.7 19.42.28.06.58.06.87.06 1.99-.12 3.74 0 5.73 0 2.04 0 .7-1.98.35-2.5-.53-.76-7.48-13.14-7.9-13.9-1.16-1.98-2.16-4.13-3.32-6.05-.12-.23-.24-.58-.18-.81.12-.7.3-1.34.59-1.98a93.18 93.18 0 0 1 4.55-8.14c1.88-2.97 2.93-4.83 4.45-7.5.35-.64.58-1.34.82-2.1.05-.29-.18-.58-.53-.58-1.11-.05-5.15 0-6.43 0-.59 0-1.17.12-1.46.64-.76 1.46-8.6 15.7-9.35 16.98-.06.12-.24.18-.41.18 0 0-.12-.18-.12-.3-.06-3.25.53-13.9.4-16.04-.05-1.28-.28-1.4-1.57-1.46-1.4-.05-3.33-.05-4.73-.05-1.3 0-1.4.7-1.58 1.62-.06.18-.06 5.64-.06 8.09 0 3.54-.3 25.76.11 32.8 0 .7.18 1.1.77 1.1 1.57-.12 3.91 0 5.49 0 1.11 0 1.29-.12 1.29-1.98 0-2.5.23-4.77.23-7.85 0-.23-.06-.46-.06-.7Zm25.66-1.4h-.06c0 1.46-.05 2.97 0 4.49.06 1.86.18 3.72.3 5.58 0 .64.17.81.76.93 1.22.29 2.4.35 3.62.35 3.16-.12 6.31.11 9.47 0 1.29-.06 1.87.06 3.16-.18 1.17-.23 1.58-.87 1.58-2.61-.12-1.1-.06-1.57-.06-2.91 0-1.92-1.35-2.56-2.52-2.5-.81.06-4.73-.06-6.31-.06-2.63.06-2.22.4-2.22-2.33 0-2.2.06-5.05.06-7.32 0-1.22.11-1.63 1.28-1.63h7.31c1.17.17 1.99-.64 1.99-1.86 0-1.22.12-1.28.12-2.5l-.18-1.75c-.12-.99-.47-1.33-1.46-1.33-.64 0-1.29.05-1.93.11-2.52.18-3.68-.17-6.14 0-.82 0-.93-.11-1-.87-.23-2.27 0-4.77.24-7.04.06-.93.3-1.1 1.17-1.16l8.24-.06c1.11-.11 1.46-.06 1.4-1.16-.11-1.69.06-3.43-.11-5.12-.12-.93-.41-1.1-1.46-1.1-1.76.05-2.17.05-3.92.17-1.75.06-8.77.06-10.46.06-2.46 0-2.63-.18-2.7 2.8-.1 2.32-.05 4.7-.05 7.09 0 4.07-.23 18.66-.12 21.92Zm47.76-24.82c.06-1.92 0-3.5 0-5.35 0-2.15-3.92-1.92-5.32-1.86a18.95 18.95 0 0 0-15.08 9.77c-.82 1.57-1.4 3.2-1.81 4.88a34 34 0 0 0-.59 12.15c.41 3.78 1.4 7.56 3.74 10.59 4.04 5.3 11.46 7.15 17.83 6.16.3-.06.59-.11.82-.29.18-.11.35-.35.35-.58l.18-3.31c.06-1.05 0-1 0-2.04 0-1.4-2.93-.35-4.74-.35-1.75 0-3.62-.06-5.2-.87-2.8-1.57-4.38-4.71-5.26-7.68-1-3.2-1.23-6.63-.64-9.88.7-4.25 2.74-9.13 7.25-10.59 2.57-.87 5.31-.58 7.89-.29.35.06.58-.17.58-.46Zm26.77 15.3c.06-2.5 0-14.84 0-18.38.06-.82 0-1.63-.11-2.45-.06-.99-.24-1.28-1.29-1.33h-4.44c-.82 0-1.35.4-1.82 1.27-1.34 3.2-10.75 24.02-12.15 26.58-.53.99-1 1.63-1 2.68v4.24c0 .76-.06 1.28 1.23 1.28l11.1-.06c1.47 0 1.47.3 1.47 1.1 0 .88-.12 4.9-.12 5.3 0 .58.12 1.16 1.23 1.16h5.08c1.23 0 1.23-.7 1.23-2.03.06-1.17-.06-3.5-.06-4.66 0-.93.18-.98 1.76-.98 1.22 0 1.75-.12 1.75-.88.06-1.57 0-2.67 0-4.42 0-1.04-.93-.98-2.92-.98-.65 0-.7-.18-.7-1.05-.12-1.8-.24-4.6-.24-6.4Zm-7.25-5.94c-.05.7-.11 10.82-.11 12.27-.06.81-.24 1.05-1 1.1-1.93.06-3.85.06-5.78.06-.47 0-.65-.4-.41-.87.23-.4 4.85-11.57 6.13-14.48.18-.17.24-.35.41-.52.18-.12.41-.18.59-.23.06 0 .23.29.23.46 0 .76-.06 1.51-.06 2.21Z"
+        }
+      )
+    ] });
+  }
+);
+const LogoIcon = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx("svg", { ref, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 56 56", ...props, children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#5E98AF",
+        d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+      }
+    ) });
+  }
+);
+
+export { Logo, LogoIcon };

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/components/RootContainer.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { useIsomorphicLayoutEffect } from '@react-hookz/web';
+import { atom } from 'nanostores';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { PanningAtomSafeCtx, ReduceGraphicsModeCtx, RootContainerContext } from '../context/RootContainerContext.js';
+
+function RootContainer({
+  id,
+  className,
+  reduceGraphics = false,
+  children
+}) {
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef(null);
+  const $isPanningRef = useRef(null);
+  if (!$isPanningRef.current) {
+    $isPanningRef.current = atom(false);
+  }
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    return $isPanningRef.current?.subscribe((isPanning) => {
+      ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
+    });
+  }, []);
+  const ctx = useMemo(() => ({ id, ref }), [id, ref]);
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: cx("likec4-root", className),
+      ref,
+      ...reduceGraphics && {
+        ["data-likec4-reduced-graphics"]: true
+      },
+      children: mounted && !!ctx.ref.current && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
+    }
+  ) }) });
+}
+
+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: {