@likec4/diagram 1.42.0 → 1.43.0

package/dist/LikeC4Diagram.d.ts

@@ -8,4 +8,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onInitialized, view, className, readonly, controls, fitView, fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, renderControls, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCustomCompareMemo } from '@react-hookz/web';
 import { ReactFlowProvider } from '@xyflow/react';
+import { deepEqual } from 'fast-equals';
 import { useRef } from 'react';
+import { isPlainObject, mapValues } from 'remeda';
 import { RootContainer } from './components/RootContainer.js';
-import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
-import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
 import { TagStylesProvider } from './context/TagStylesContext.js';
 import { useId } from './hooks/useId.js';
 import { LikeC4DiagramUI } from './likec4diagram/DiagramUI.js';
@@ -11,12 +12,12 @@ import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
 import { getViewBounds } from './utils/get-view-bounds.js';
+import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
 import { IconRendererProvider } from './context/IconRenderer.js';
 import { DiagramFeatures } from './context/DiagramFeatures.js';
 import { DiagramEventHandlers } from './context/DiagramEventHandlers.js';
-import { FitViewPaddings } from './base/const.js';
 
 function LikeC4Diagram({
   onCanvasClick,
@@ -36,7 +37,7 @@ function LikeC4Diagram({
   readonly = true,
   controls = !readonly,
   fitView = true,
-  fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
+  fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
   pannable = true,
   zoomable = true,
   background = "dots",
@@ -47,7 +48,7 @@ function LikeC4Diagram({
   enableRelationshipBrowser = false,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  showNotations = true,
+  enableNotations = false,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
   dynamicViewVariant,
@@ -57,7 +58,6 @@ function LikeC4Diagram({
   experimentalEdgeEditing = !readonly,
   reduceGraphics = "auto",
   renderIcon,
-  renderControls,
   where,
   reactFlowProps,
   renderNodes,
@@ -66,15 +66,23 @@ function LikeC4Diagram({
   const id = useId();
   const initialRef = useRef(null);
   const bounds = getViewBounds(view, dynamicViewVariant);
+  const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
   if (initialRef.current == null) {
     initialRef.current = {
       defaultEdges: [],
       defaultNodes: [],
       initialWidth: initialWidth ?? bounds.width,
-      initialHeight: initialHeight ?? bounds.height
+      initialHeight: initialHeight ?? bounds.height,
+      initialFitViewOptions: {
+        maxZoom: MaxZoom,
+        minZoom: MinZoom,
+        padding: fitViewPadding
+      },
+      initialMaxZoom: MaxZoom,
+      initialMinZoom: MinZoom
     };
   }
-  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (bounds.width ?? 1) * (bounds.height ?? 1) > 6e6 : reduceGraphics;
+  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (bounds.width ?? 1) * (bounds.height ?? 1) > 6e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
   return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
     FramerMotionConfig,
     {
@@ -94,7 +102,7 @@ function LikeC4Diagram({
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
             enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
             enableEdgeEditing: experimentalEdgeEditing,
-            enableNotations: showNotations,
+            enableNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
             enableElementTags
@@ -118,12 +126,12 @@ function LikeC4Diagram({
               },
               children: [
                 /* @__PURE__ */ jsx(LikeC4Styles, { id }),
-                /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
                     fitView,
                     ...initialRef.current,
-                    children: /* @__PURE__ */ jsx(
+                    children: /* @__PURE__ */ jsxs(
                       DiagramActorProvider,
                       {
                         view,
@@ -133,7 +141,7 @@ function LikeC4Diagram({
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
-                        children: /* @__PURE__ */ jsxs(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: [
+                        children: [
                           /* @__PURE__ */ jsx(
                             LikeC4DiagramXYFlow,
                             {
@@ -146,11 +154,11 @@ function LikeC4Diagram({
                             }
                           ),
                           /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
-                        ] })
+                        ]
                       }
                     )
                   }
-                ) }) }) })
+                ) }) })
               ]
             }
           )
@@ -159,5 +167,23 @@ function LikeC4Diagram({
     }
   ) });
 }
+const toLiteralPaddingWithUnit = (value) => {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+};
+function useNormalizedViewPadding(raw) {
+  return useCustomCompareMemo(
+    () => {
+      if (isPlainObject(raw)) {
+        return mapValues(raw, toLiteralPaddingWithUnit);
+      }
+      return toLiteralPaddingWithUnit(raw);
+    },
+    [raw],
+    deepEqual
+  );
+}
 
 export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.ts

@@ -2,7 +2,6 @@ import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, View
 import { ReactFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { CamelCasedProperties, SetRequired } from 'type-fest';
-import { ControlsCustomLayout } from './context/ControlsCustomLayout';
 import { DiagramApi } from './hooks/useDiagram';
 import { XYFlowInstance } from './hooks/useXYFlow';
 import { Types } from './likec4diagram/types';
@@ -40,6 +39,11 @@ export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
  *   bottom: '8px',
  *   left: '8px',
  * }
+ *
+ * {
+ *   x: '16px',
+ *   y: '16px',
+ * }
  */
 export type ViewPadding = PaddingWithUnit | {
     top?: PaddingWithUnit;
@@ -79,8 +83,8 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      */
     fitView?: boolean | undefined;
     /**
-     * Padding around the diagram
-     * @default '8px'
+     * Padding around the diagram (number - pixels)
+     * @default 16 - 16px
      *
      * @see {@link ViewPadding}
      *
@@ -89,15 +93,15 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * <LikeC4Diagram
      *   fitViewPadding={{
      *     x: '16px',
-     *     y: '16px',
+     *     y: 16,
      *   }}
      * />
      *
      * <LikeC4Diagram
      *   fitViewPadding={{
-     *     top: '8px',
+     *     top: 8,
      *     right: '8px',
-     *     bottom: '8px',
+     *     bottom: '1px',
      *     left: '8px',
      *   }}
      * />
@@ -136,9 +140,9 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * Display notations in the bottom right corner
      * (Active if only notations are present)
      *
-     * @default true
+     * @default false
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * Display dropdown with details on relationship's label click
      * @default false
@@ -198,15 +202,6 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * By default, if icon is http:// or https://, it will be rendered as an image
      */
     renderIcon?: ElementIconRenderer | undefined;
-    /**
-     * Customize layout of the controls on the top left
-     *
-     * @note
-     * Ignored if `controls="next"`
-     *
-     * @see {@link controls}
-     */
-    renderControls?: ControlsCustomLayout | undefined;
     /**
      * Override node renderers
      */

package/dist/LikeC4View.d.ts

@@ -56,9 +56,28 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     fitView?: boolean | undefined;
     /**
      * Padding around the diagram
-     * @default '8px'
+     * @default '16px'
      *
      * @see {@link ViewPadding}
+     *
+     * @example
+     * ```tsx
+     * <LikeC4View
+     *   fitViewPadding={{
+     *     x: '16px',
+     *     y: 16,
+     *   }}
+     * />
+     *
+     * <LikeC4View
+     *   fitViewPadding={{
+     *     top: 8,
+     *     right: '8px',
+     *     bottom: '1px',
+     *     left: '8px',
+     *   }}
+     * />
+     * ```
      */
     fitViewPadding?: ViewPadding | undefined;
     /**
@@ -70,7 +89,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * Display notations of the view
      * @default false
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
      * Conflicts with `browser` prop
@@ -210,7 +229,7 @@ export interface LikeC4BrowserProps {
      * Display notations of the view
      * @default true
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -236,4 +255,4 @@ export interface LikeC4BrowserProps {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, showNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4View.js

@@ -33,7 +33,7 @@ function LikeC4View({
   background = "transparent",
   browser = true,
   showNavigationButtons = false,
-  showNotations,
+  enableNotations,
   enableFocusMode = false,
   enableDynamicViewWalkthrough = false,
   enableElementDetails = false,
@@ -68,9 +68,8 @@ function LikeC4View({
     ] });
   }
   const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  showNotations ??= hasNotations;
+  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+  const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
   const isBrowserEnabled = browser !== false;
   const browserProps = isBoolean(browser) ? {} : browser;
   const bounds = getViewBounds(view, props.dynamicViewVariant);
@@ -98,7 +97,7 @@ function LikeC4View({
             background,
             fitView: true,
             fitViewPadding: FitViewPaddings.default,
-            showNotations,
+            enableNotations: hasNotations,
             enableDynamicViewWalkthrough,
             showNavigationButtons,
             experimentalEdgeEditing: false,
@@ -144,11 +143,12 @@ function LikeC4View({
               enableElementTags: true,
               controls: true,
               readonly: true,
+              nodesDraggable: false,
               fitView: true,
               ...props,
               fitViewPadding: FitViewPaddings.withControls,
               ...browserProps,
-              showNotations: browserProps.showNotations ?? showNotations,
+              enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
               renderNodes
             }
           ),

package/dist/ReactLikeC4.d.ts

@@ -36,4 +36,4 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, keepAspectRatio, showNotations, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactLikeC4.js

@@ -11,8 +11,8 @@ function ReactLikeC4({
   className,
   colorScheme,
   injectFontCss = true,
+  enableNotations,
   keepAspectRatio,
-  showNotations,
   style,
   mantineTheme,
   styleNonce,
@@ -33,10 +33,8 @@ function ReactLikeC4({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  showNotations ??= hasNotations;
   const bounds = getViewBounds(view, props.dynamicViewVariant);
+  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
   return /* @__PURE__ */ jsx(
     ShadowRoot,
     {
@@ -54,7 +52,7 @@ function ReactLikeC4({
         LikeC4Diagram,
         {
           view,
-          showNotations,
+          enableNotations: hasNotations,
           ...props
         }
       )

package/dist/StaticLikeC4Diagram.js

@@ -24,7 +24,7 @@ function StaticLikeC4Diagram({
       zoomable: false,
       controls: false,
       background,
-      showNotations: false,
+      enableNotations: false,
       enableElementDetails: false,
       enableRelationshipDetails,
       enableRelationshipBrowser,

package/dist/base/const.d.ts

@@ -9,7 +9,7 @@ export declare const MaxZoom = 3;
 export declare const FitViewPaddings: {
     default: "16px";
     withControls: {
-        top: "50px";
+        top: "58px";
         left: "16px";
         right: "16px";
         bottom: "16px";

package/dist/base/const.js

@@ -10,7 +10,7 @@ const MaxZoom = 3;
 const FitViewPaddings = {
   default: "16px",
   withControls: {
-    top: "50px",
+    top: "58px",
     left: "16px",
     right: "16px",
     bottom: "16px"

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

@@ -1,9 +1,9 @@
 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 { usePanningAtom } from '../context/ReduceGraphics.js';
-import { RootContainerContext } from '../context/RootContainerContext.js';
+import { PanningAtomSafeCtx, ReduceGraphicsModeCtx, RootContainerContext } from '../context/RootContainerContext.js';
 
 function RootContainer({
   id,
@@ -13,17 +13,20 @@ function RootContainer({
 }) {
   const [mounted, setMounted] = useState(false);
   const ref = useRef(null);
-  const $isPanning = usePanningAtom();
+  const $isPanningRef = useRef(null);
+  if (!$isPanningRef.current) {
+    $isPanningRef.current = atom(false);
+  }
   useIsomorphicLayoutEffect(() => {
     setMounted(true);
   }, []);
   useEffect(() => {
-    return $isPanning.listen((isPanning) => {
+    return $isPanningRef.current?.subscribe((isPanning) => {
       ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
     });
-  }, [$isPanning]);
+  }, []);
   const ctx = useMemo(() => ({ id, ref }), [id, ref]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
@@ -34,7 +37,7 @@ function RootContainer({
       },
       children: mounted && !!ctx.ref.current && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
     }
-  );
+  ) }) });
 }
 
 export { RootContainer };

package/dist/context/RootContainerContext.d.ts

@@ -1,3 +1,4 @@
+import { WritableAtom } from 'nanostores';
 import { RefObject, Context } from 'react';
 export declare const RootContainerContext: Context<{
     id: string;
@@ -9,3 +10,13 @@ export declare function useRootContainer(): {
 };
 export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
 export declare function useRootContainerElement(): HTMLDivElement | null;
+export declare const ReduceGraphicsModeCtx: Context<boolean | null>;
+/**
+ * Hook to determine if reduced graphics mode is enabled.
+ */
+export declare function useIsReducedGraphics(): boolean;
+export declare const PanningAtomSafeCtx: ({ children, value }: {
+    value: WritableAtom<boolean>;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, usePanningAtom: () => WritableAtom<boolean>;
+export declare function useIsPanning(): boolean;

package/dist/context/RootContainerContext.js

@@ -1,3 +1,5 @@
+import { createSafeContext } from '@mantine/core';
+import '@nanostores/react';
 import { createContext, useContext } from 'react';
 
 const RootContainerContext = createContext(null);
@@ -14,5 +16,16 @@ function useRootContainerRef() {
 function useRootContainerElement() {
   return useRootContainer().ref.current;
 }
+const ReduceGraphicsModeCtx = createContext(null);
+function useIsReducedGraphics() {
+  const isReduced = useContext(ReduceGraphicsModeCtx);
+  if (isReduced === null) {
+    console.warn("ReduceGraphicsMode is not provided");
+  }
+  return isReduced ?? false;
+}
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
+  "PanningAtomSafeCtx is not provided"
+);
 
-export { RootContainerContext, useRootContainer, useRootContainerElement, useRootContainerRef };
+export { PanningAtomSafeCtx, ReduceGraphicsModeCtx, RootContainerContext, useIsReducedGraphics, usePanningAtom, useRootContainer, useRootContainerElement, useRootContainerRef };

package/dist/hooks/useReducedGraphics.d.ts

@@ -1 +1 @@
-export { useIsPanning, useIsReducedGraphics } from '../context/ReduceGraphics';
+export { useIsPanning, useIsReducedGraphics } from '../context/RootContainerContext';

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout';
 export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
 export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, WhereOperator, } from './LikeC4Diagram.props';

package/dist/likec4diagram/DiagramXYFlow.js

@@ -7,7 +7,7 @@ import { deepEqual, shallowEqual } from 'fast-equals';
 import { isEmpty } from 'remeda';
 import { memoNode } from '../base-primitives/memoNode.js';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
-import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
+import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerContext.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
@@ -174,9 +174,7 @@ function LikeC4DiagramXYFlow({
           diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
         }
       }),
-      ...props.pannable && {
-        onMove
-      },
+      onMove,
       onMoveEnd,
       onInit: useCallbackRef((instance) => {
         diagram.send({ type: "xyflow.init", instance });

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -3,7 +3,7 @@ import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual, deepEqual } from 'fast-equals';
-import { useRef, useMemo, useEffect } from 'react';
+import { useRef, useEffect, useMemo } from 'react';
 import { ErrorBoundary } from '../../components/ErrorFallback.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
@@ -70,12 +70,11 @@ function DiagramActorProvider({
     [features],
     shallowEqual
   );
-  useCustomCompareEffect(
+  useEffect(
     () => {
       actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
     },
-    [zoomable, pannable, fitViewPadding, nodesSelectable],
-    deepEqual
+    [zoomable, pannable, fitViewPadding, nodesSelectable]
   );
   const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant);
   const update = useMemo(

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -112,16 +112,13 @@ const ElementNotation = ({ value }) => {
 };
 const selector = (s) => ({
   id: s.view.id,
-  notations: s.view.notation?.nodes ?? [],
-  isVisible: true
-  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
+  notations: s.view.notation?.nodes ?? []
 });
 const NotationPanel = memo(() => {
   const height = useXYStore((s) => s.height);
   const {
     id,
-    notations,
-    isVisible
+    notations
   } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-webview-collapsed",
@@ -130,7 +127,7 @@ const NotationPanel = memo(() => {
   const hasNotations = notations.length > 0;
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && isVisible && /* @__PURE__ */ jsx(
+    !hasNotations && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -153,7 +150,7 @@ const NotationPanel = memo(() => {
       },
       "empty"
     ),
-    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -177,7 +174,7 @@ const NotationPanel = memo(() => {
       },
       "collapsed"
     ),
-    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: {

package/dist/navigationpanel/NavigationPanelControls.js

@@ -102,7 +102,7 @@ const NavigationPanelControls = () => {
       {
         layout: "position",
         className: hstack({
-          gap: "[3px]",
+          gap: "1",
           flexShrink: 1,
           flexGrow: 1,
           overflow: "hidden"
@@ -119,7 +119,7 @@ const NavigationPanelControls = () => {
       {
         layout: "position",
         className: hstack({
-          gap: "[1px]",
+          gap: "0.5",
           flexGrow: 0,
           _empty: {
             display: "none"