@likec4/diagram 1.43.0 → 1.45.0

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

@@ -1,7 +1,9 @@
-import { BaseNodeData } from '../../base/types';
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 type ElementActionButtonsProps = {
     selected?: boolean;
-    data: BaseNodeData;
+    data: {
+        hovered?: boolean;
+    };
     buttons: ElementActionButtons.Item[];
 };
 /**
@@ -33,8 +35,8 @@ export declare function ElementActionButtons({ selected, data: { hovered: isHove
 export declare namespace ElementActionButtons {
     type Item = {
         key?: string;
-        icon?: React.ReactNode;
-        onClick: (e: React.MouseEvent) => void;
+        icon?: ReactNode;
+        onClick: (e: ReactMouseEvent) => void;
     };
 }
 export {};

package/dist/base-primitives/element/ElementActionButtons.js

@@ -7,7 +7,7 @@ import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
+import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
 
 const container = hstack({
   position: "absolute",
@@ -58,6 +58,7 @@ function ElementActionButtons({
             scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
             y: isHovered || selected ? 6 : 0
           },
+          layoutDependency: `${isHovered}-${selected}`,
           "data-likec4-hovered": isHovered,
           className: cx("nodrag nopan", actionButtons),
           children: buttons.map((button, index) => /* @__PURE__ */ jsx(
@@ -76,8 +77,7 @@ function ElementActionButtons({
             },
             `${id}-${button.key ?? index}`
           ))
-        },
-        `${id}-action-buttons`
+        }
       )
     }
   );

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

@@ -1,5 +1,5 @@
-import { ComputedNodeStyle, NodeId } from '@likec4/core';
-import { Color, RichTextOrEmpty } from '@likec4/core/types';
+import { ComputedNodeStyle, MarkdownOrString, NodeId } from '@likec4/core';
+import { Color } from '@likec4/core/types';
 import { CSSProperties, DetailedHTMLProps, HTMLAttributes } from 'react';
 type RequiredData = {
     id: NodeId;
@@ -7,7 +7,7 @@ type RequiredData = {
     technology?: string | null | undefined;
     color: Color;
     style: ComputedNodeStyle;
-    description?: RichTextOrEmpty;
+    description?: MarkdownOrString | null | undefined;
     icon?: string | null;
 };
 type ElementDataProps = {

package/dist/base-primitives/element/ElementData.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ensureSizes } from '@likec4/core/types';
-import { cx } from '@likec4/styles/css';
+import { ensureSizes, RichText } from '@likec4/core/types';
+import { cx, css } from '@likec4/styles/css';
 import { elementNodeData } from '@likec4/styles/recipes';
 import { Text } from '@mantine/core';
 import { forwardRef } from 'react';
@@ -69,9 +69,10 @@ const Technology = forwardRef(({ data, children, className, ...props }, ref) =>
   ) : null;
 });
 const Description = forwardRef(({ data: { description, style }, className, ...props }, ref) => {
-  if (!description?.nonEmpty) {
+  if (!description) {
     return null;
   }
+  const desc = RichText.from(description);
   const { size } = ensureSizes(style);
   const isSm = size === "sm" || size === "xs";
   return /* @__PURE__ */ jsx(
@@ -80,14 +81,19 @@ const Description = forwardRef(({ data: { description, style }, className, ...pr
       ...props,
       className: cx(
         className,
-        "likec4-element-description"
+        "likec4-element-description",
+        css({
+          lineClamp: isSm ? 3 : 5
+        })
       ),
       "data-likec4-node-description": "",
-      value: description,
+      value: desc,
       uselikec4palette: true,
       hideIfEmpty: true,
-      maxHeight: description.isMarkdown ? "8rem   " : void 0,
-      lineClamp: isSm ? 3 : 5,
+      style: {
+        // Workaround for lineClamp not working with nested TABLE elements (if markdown has tables)
+        maxHeight: desc.isMarkdown ? "8rem" : void 0
+      },
       ref
     }
   );

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

@@ -1,9 +1,10 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { BaseNodeData } from '../../base/types';
 type ElementDetailsButtonProps = {
     selected?: boolean;
     data: BaseNodeData;
-    icon?: React.ReactNode;
-    onClick: (e: React.MouseEvent) => void;
+    icon?: ReactNode;
+    onClick: (e: ReactMouseEvent) => void;
 };
 export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base-primitives/element/ElementDetailsButton.js

@@ -3,10 +3,9 @@ import { cx, css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
-import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",
@@ -28,6 +27,9 @@ const container = css({
   },
   _smallZoom: {
     display: "none"
+  },
+  _print: {
+    display: "none"
   }
 });
 function ElementDetailsButton({
@@ -38,7 +40,6 @@ function ElementDetailsButton({
   icon,
   onClick
 }) {
-  const id = useId();
   return /* @__PURE__ */ jsx(Box, { className: cx(container, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
@@ -64,8 +65,7 @@ function ElementDetailsButton({
       onClick,
       onDoubleClick: stopPropagation,
       children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-    },
-    id
+    }
   ) });
 }
 

package/dist/base-primitives/element/ElementNodeContainer.css.js

@@ -2,42 +2,30 @@ import { css } from '@likec4/styles/css';
 
 const container = css({
   position: "relative",
-  width: "100%",
-  height: "100%",
+  width: "full",
+  height: "full",
   padding: "0",
   margin: "0",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   pointerEvents: "none",
-  _before: {
-    content: '" "',
-    position: "absolute",
-    top: "[calc(100% - 4px)]",
-    left: "0",
-    width: "100%",
-    height: "24px",
-    background: "[transparent]",
-    pointerEvents: "all"
-  },
   _focusVisible: {
     outline: "none"
   },
-  // _whenDimmed: {
-  //   opacity: 0.25,
-  //   transition: `opacity 400ms {easings.inOut}, filter 500ms {easings.inOut}`,
-  //   transitionDelay: '50ms',
-  //   grayscale: 0.85,
-  //   blur: '2px',
-  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  // },
-  // _whenDimmedImmediate: {
-  //   opacity: 0.25,
-  //   grayscale: 0.85,
-  //   blur: '2px',
-  //   // transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
-  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  // },
+  _whenSelectable: {
+    pointerEvents: "all",
+    _before: {
+      content: '" "',
+      position: "absolute",
+      top: "[calc(100% - 4px)]",
+      left: "0",
+      width: "full",
+      height: "24px",
+      background: "transparent",
+      pointerEvents: "all"
+    }
+  },
   _reduceGraphicsOnPan: {
     _before: {
       display: "none"

package/dist/base-primitives/element/ElementShape.js

@@ -151,11 +151,11 @@ function ShapeSvgOutline({ shape, w, h }) {
       svg = /* @__PURE__ */ jsx(
         "rect",
         {
-          x: -1,
-          y: -1,
-          width: w + 2,
-          height: h + 2,
-          rx: 6
+          x: -3,
+          y: -3,
+          width: w + 6,
+          height: h + 6,
+          rx: 8
         }
       );
       break;

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

@@ -1,11 +1,13 @@
-import { BoxProps } from '@likec4/styles/jsx';
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes, MemoExoticComponent } from 'react';
 import { BaseNodePropsWithData } from '../../base/types';
-import { ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
 export type ElementTagProps = {
     tag: string;
     cursor?: 'pointer' | 'default';
-} & Omit<BoxProps, 'children'>;
-export declare const ElementTag: ForwardRefExoticComponent<Omit<ElementTagProps, "ref"> & RefAttributes<HTMLDivElement>>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'color'>;
+export declare const ElementTag: ForwardRefExoticComponent<{
+    tag: string;
+    cursor?: "pointer" | "default";
+} & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "color"> & RefAttributes<HTMLDivElement>>;
 type Data = {
     tags: readonly string[] | null | undefined;
     width: number;

package/dist/base-primitives/element/ElementTags.js

@@ -9,7 +9,8 @@ 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 '@xstate/react';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { useCurrentZoom } from '../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 

package/dist/base-primitives/memoEdge.js

@@ -4,9 +4,11 @@ import { memo } from 'react';
 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);
+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) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && isSame(prev.targetY, next.targetY) && isSame(prev.targetX, next.targetX) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && deepEqual(prev.data, next.data);
 function memoEdge(Edge) {
-  return memo(Edge, edgePropsEqual);
+  const Memo = memo(Edge, edgePropsEqual);
+  Memo.displayName = `MemoEdge(${Edge.displayName || Edge.name})`;
+  return Memo;
 }
 
 export { memoEdge };

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

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

package/dist/base-primitives/memoNode.js

@@ -2,10 +2,10 @@ import { deepEqual } from 'fast-equals';
 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);
+  return prev.id === next.id && deepEqual(prev.type, next.type) && 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);
 }
 const isMemoized = Symbol.for("isMemoized");
-function memoNode(Node) {
+function memoNode(Node, displayName = "Node") {
   if (Node.hasOwnProperty(isMemoized)) {
     return Node;
   }
@@ -13,7 +13,7 @@ function memoNode(Node) {
     Node,
     nodePropsEqual
   );
-  NodeComponent.displayName = "Node";
+  NodeComponent.displayName = displayName;
   Object.defineProperty(NodeComponent, isMemoized, {
     enumerable: false,
     writable: false,

package/dist/components/ErrorFallback.js

@@ -1,47 +1,64 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box } from '@likec4/styles/jsx';
-import { Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
+import { css } from '@likec4/styles/css';
+import { HStack, VStack } from '@likec4/styles/jsx';
+import { ThemeIcon, Text, ScrollAreaAutosize, Button } from '@mantine/core';
+import { useRef, useEffect } from 'react';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-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';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    dialogRef.current?.showModal();
+  }, []);
   return /* @__PURE__ */ jsx(
-    Box,
+    "dialog",
     {
-      css: {
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%",
+      ref: dialogRef,
+      className: css({
+        margin: "0",
         padding: "0",
-        backdropFilter: `blur(5px)`,
-        backgroundColor: {
-          _dark: `[rgb(34 34 34 / 10%)]`,
-          _light: `[rgb(15 15 15/ 20%)]`
-        },
-        zIndex: 1e3
-      },
-      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" }) })
-          ]
+        position: "fixed",
+        top: "10",
+        left: "10",
+        width: "[calc(100vw - ({spacing.10} * 2))]",
+        height: "max-content",
+        maxHeight: "[calc(100vh - ({spacing.10} * 3))]",
+        background: `likec4.overlay.body`,
+        rounded: "sm",
+        borderWidth: 3,
+        borderColor: `likec4.overlay.border`,
+        shadow: "xl",
+        outline: "none",
+        _backdrop: {
+          cursor: "zoom-out",
+          backdropFilter: `blur(18px)`,
+          bg: "[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]"
+        }
+      }),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+          dialogRef.current?.close();
+          return;
         }
-      )
+      },
+      onClose: (e) => {
+        e.stopPropagation();
+        resetErrorBoundary();
+      },
+      children: /* @__PURE__ */ jsxs(HStack, { p: "xl", gap: "lg", alignItems: "flex-start", flexWrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(ThemeIcon, { size: "md", radius: "xl", color: "red", children: /* @__PURE__ */ jsx(IconX, { style: { width: 20, height: 20 } }) }),
+        /* @__PURE__ */ jsxs(VStack, { flex: "1", children: [
+          /* @__PURE__ */ jsx(Text, { fz: "md", children: "Oops, something went wrong" }),
+          /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: "100%", mah: 400, type: "auto", children: /* @__PURE__ */ jsx(Text, { fz: "md", c: "red", style: { whiteSpace: "pre-wrap", userSelect: "all" }, children: errorString }) }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "md", mt: "md", children: [
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "default", onClick: () => resetErrorBoundary(), children: "Reset" }),
+            /* @__PURE__ */ jsx(Text, { fz: "sm", c: "dimmed", children: "See console for more details and report the issue if it persists." })
+          ] })
+        ] })
+      ] })
     }
   );
 }

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

package/dist/context/DiagramEventHandlers.js

@@ -15,7 +15,8 @@ const defaultHandlers = {
   onCanvasDblClick: null,
   onBurgerMenuClick: null,
   onOpenSource: null,
-  onInitialized: null
+  onInitialized: null,
+  onLayoutTypeChange: null
 };
 const HandlerNames = keys(defaultHandlers);
 const DiagramEventHandlersReactContext = createContext({

package/dist/context/DiagramFeatures.d.ts

@@ -1,14 +1,12 @@
 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", "FitView", "Vscode", "ElementTags"];
+declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
-type CustomFeatures = {
-    enableControls: 'next' | boolean;
-};
+export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
 export type EnabledFeatures = {
-    [P in `enable${FeatureName}`]: P extends keyof CustomFeatures ? CustomFeatures[P] : boolean;
+    [P in `enable${FeatureName}`]: boolean;
 };
-export declare const AllDisabled: EnabledFeatures;
+export declare const DefaultFeatures: EnabledFeatures;
 export declare function DiagramFeatures({ children, features, overrides, }: PropsWithChildren<ExclusiveUnion<{
     features: {
         features: EnabledFeatures;
@@ -21,6 +19,27 @@ export declare namespace DiagramFeatures {
     var Overlays: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 }
 export declare function useEnabledFeatures(): EnabledFeatures;
+export type IfEnabledProps = PropsWithChildren<{
+    feature: FeatureName;
+    /**
+     * Additional AND condition
+     * @default true
+     * @example
+     * <IfEnabled feature="ReadOnly" and={isSomething}>
+     *   ...
+     * </IfEnabled>
+     */
+    and?: boolean;
+}>;
+/**
+ * Renders children only if the specified feature is enabled
+ * @param feature Feature name
+ * @param and Additional AND condition
+ * @example
+ * <IfEnabled feature="ReadOnly" and={isSomething}>
+ *   ...
+ * </IfEnabled>
+ */
 export declare function IfEnabled({ feature, children, and, }: PropsWithChildren<{
     feature: FeatureName;
     and?: boolean;

package/dist/context/DiagramFeatures.js

@@ -1,48 +1,25 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { shallowEqual } from 'fast-equals';
 import { useContext, createContext, useState, useEffect } from 'react';
-import { mapToObj } from 'remeda';
 
-const FeatureNames = [
-  "Controls",
-  "ReadOnly",
-  "FocusMode",
-  "NavigateTo",
-  "ElementDetails",
-  "RelationshipDetails",
-  "RelationshipBrowser",
-  "Search",
-  "NavigationButtons",
-  "Notations",
-  "DynamicViewWalkthrough",
-  "EdgeEditing",
-  "FitView",
-  /**
-   * Running in VSCode
-   */
-  "Vscode",
-  "ElementTags"
-];
-const AllDisabled = mapToObj(
-  FeatureNames,
-  (name) => [`enable${name}`, false]
-);
-const DiagramFeaturesContext = createContext(AllDisabled);
-const validate = (features) => {
-  let {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest
-  } = features;
-  if (enableReadOnly) {
-    enableEdgeEditing = false;
-  }
-  return {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest
-  };
+const DefaultFeatures = {
+  enableReadOnly: true,
+  enableCompareWithLatest: false,
+  enableControls: false,
+  enableDynamicViewWalkthrough: false,
+  enableElementDetails: false,
+  enableFocusMode: false,
+  enableNavigateTo: false,
+  enableNotations: false,
+  enableRelationshipBrowser: false,
+  enableRelationshipDetails: false,
+  enableSearch: false,
+  enableNavigationButtons: false,
+  enableFitView: false,
+  enableVscode: false,
+  enableElementTags: false
 };
+const DiagramFeaturesContext = createContext(DefaultFeatures);
 function DiagramFeatures({
   children,
   features,
@@ -53,11 +30,11 @@ function DiagramFeatures({
   useEffect(
     () => {
       setScope((current) => {
-        const next = validate({
+        const next = {
           ...outerScope,
           ...features,
           ...overrides
-        });
+        };
         return shallowEqual(current, next) ? current : next;
       });
     },
@@ -65,18 +42,13 @@ function DiagramFeatures({
   );
   return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
 }
+const overridesForOverlays = {
+  enableControls: false,
+  enableReadOnly: true,
+  enableCompareWithLatest: false
+};
 DiagramFeatures.Overlays = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    DiagramFeatures,
-    {
-      overrides: {
-        enableControls: false,
-        enableReadOnly: true,
-        enableEdgeEditing: false
-      },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: overridesForOverlays, children });
 };
 function useEnabledFeatures() {
   return useContext(DiagramFeaturesContext);
@@ -94,15 +66,15 @@ function IfNotEnabled({ feature, children }) {
   return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
 function IfReadOnly({ children }) {
-  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
+  const isReadOnly = useEnabledFeatures().enableReadOnly === true;
   return isReadOnly ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
 function IfNotReadOnly({ children }) {
-  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
+  const isReadOnly = useEnabledFeatures().enableReadOnly === true;
   if (isReadOnly) {
     return null;
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };
+export { DefaultFeatures, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };

package/dist/context/IconRenderer.js

@@ -1,12 +1,12 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 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';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({