@likec4/diagram 1.42.0 → 1.42.1

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, showNotations, 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",
@@ -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,
     {
@@ -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';
@@ -198,15 +197,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/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/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"

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -6,8 +6,10 @@ import { HStack, VStack, Box } from '@likec4/styles/jsx';
 import { vstack, hstack } from '@likec4/styles/patterns';
 import { PopoverDropdown, createScopedKeydownHandler, ScrollAreaAutosize, Input, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
 import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
+import { useMountEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
 import { deepEqual } from 'fast-equals';
+import { useRef } from 'react';
 import { isEmpty, pipe, sort, isArray } from 'remeda';
 import { NavigationLink } from '../components/NavigationLink.js';
 import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
@@ -17,6 +19,7 @@ import { breadcrumbTitle } from './styles.css.js';
 import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
 import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
@@ -70,7 +73,7 @@ function NavigationPanelDropdown() {
         /* @__PURE__ */ jsx(
           ScrollAreaAutosize,
           {
-            scrollbars: "xy",
+            scrollbars: "x",
             type: "auto",
             offsetScrollbars: "present",
             classNames: {
@@ -81,6 +84,11 @@ function NavigationPanelDropdown() {
                 ]
               })
             },
+            styles: {
+              viewport: {
+                overscrollBehavior: "none"
+              }
+            },
             children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, { searchQuery: normalizeViewPath(searchQuery).toLowerCase() }) : /* @__PURE__ */ jsx(FolderColumns, {})
           }
         )
@@ -123,7 +131,7 @@ function SearchResults({ searchQuery }) {
           "calc(100cqh - 200px)"
         ]
       }),
-      children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: found.map((v) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: found.map((v) => /* @__PURE__ */ jsx(
         FoundedView,
         {
           view: v,
@@ -282,7 +290,7 @@ const ViewTypeIcon = {
     }
   ),
   deployment: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss }),
-  dynamic: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss })
+  dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, { size: 18, className: viewTypeIconCss })
 };
 const ColumnScrollArea = ScrollAreaAutosize.withProps({
   scrollbars: "y",
@@ -332,10 +340,18 @@ function FolderColumns() {
   const columns = useNavigationActorContext(selectColumns, deepEqual);
   return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i) => [
     i > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, "divider" + i),
-    /* @__PURE__ */ jsx(FolderColumn, { data: column }, column.folderPath)
+    /* @__PURE__ */ jsx(
+      FolderColumn,
+      {
+        data: column,
+        isLast: i == columns.length - 1
+      },
+      column.folderPath
+    )
   ]) });
 }
-function FolderColumn({ data }) {
+function FolderColumn({ data, isLast }) {
+  const ref = useRef(null);
   const actor = useNavigationActorRef();
   const onItemClicked = (item) => (e) => {
     e.stopPropagation();
@@ -345,7 +361,15 @@ function FolderColumn({ data }) {
       actor.send({ type: "select.view", viewId: item.viewId });
     }
   };
-  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
+  useMountEffect(() => {
+    if (isLast && ref.current) {
+      ref.current.scrollIntoView({
+        inline: "nearest",
+        behavior: "smooth"
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx(Box, { mb: "1", ref, children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
     FolderColumnItem,
     {
       columnItem: item,

package/dist/navigationpanel/controls/BurgerButton.js

@@ -1,16 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { UnstyledButton } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { Logo, LogoIcon } from '../../components/Logo.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
-import { PanelActionIcon } from '../_common.js';
 import { useNavigationActor } from '../hooks.js';
-import IconMenu2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
 
 const BurgerButton = () => {
   const actor = useNavigationActor();
   const { onBurgerMenuClick } = useDiagramEventHandlers();
-  return /* @__PURE__ */ jsx(
-    PanelActionIcon,
+  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsxs(
+    UnstyledButton,
     {
-      layout: "position",
       onMouseEnter: () => {
         actor.send({ type: "breadcrumbs.mouseEnter.root" });
       },
@@ -26,9 +28,45 @@ const BurgerButton = () => {
         }
         actor.send({ type: "breadcrumbs.click.root" });
       },
-      children: /* @__PURE__ */ jsx(IconMenu2, { style: { width: "80%", height: "80%" } })
+      className: cx(
+        "mantine-active",
+        hstack({
+          padding: "0.5",
+          // _active: {
+          //   transform: 'translateY(1px)',
+          // },
+          width: {
+            base: "[20px]",
+            "@/md": "[64px]"
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Logo,
+          {
+            className: css({
+              display: {
+                base: "none",
+                "@/md": "block"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LogoIcon,
+          {
+            className: css({
+              display: {
+                base: "block",
+                "@/md": "none"
+              }
+            })
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 
 export { BurgerButton };

package/dist/navigationpanel/styles.css.js

@@ -7,7 +7,7 @@ const breadcrumbTitle = cva({
     transition: "fast",
     color: {
       base: "mantine.colors.text/90",
-      _hover: "mantine.colors.text"
+      _hover: "[var(--mantine-color-bright)]"
     }
   },
   variants: {

package/dist/node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z", "key": "svg-0" }]];
+const IconDirectionSignFilled = createReactComponent("filled", "direction-sign-filled", "DirectionSignFilled", __iconNode);
+
+export { __iconNode, IconDirectionSignFilled as default };