@likec4/diagram 1.45.0 → 1.46.2

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, onLayoutTypeChange, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesDraggable, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -12,6 +12,7 @@ import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
 import { pickViewBounds } from './utils/view-bounds.js';
+import { useOptionalLikeC4EditorPort } from './editor/LikeC4EditorProvider.js';
 import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
@@ -24,7 +25,6 @@ function LikeC4Diagram({
   onCanvasContextMenu,
   onCanvasDblClick,
   onEdgeClick,
-  onChange,
   onEdgeContextMenu,
   onNavigateTo,
   onNodeClick,
@@ -35,8 +35,7 @@ function LikeC4Diagram({
   onInitialized,
   view,
   className,
-  readonly = true,
-  controls = !readonly,
+  controls = true,
   fitView = true,
   fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
   pannable = true,
@@ -48,8 +47,7 @@ function LikeC4Diagram({
   enableRelationshipDetails = false,
   enableRelationshipBrowser = false,
   enableCompareWithLatest = !!onLayoutTypeChange,
-  nodesDraggable = !readonly,
-  nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
+  nodesSelectable,
   enableNotations = false,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
@@ -66,6 +64,9 @@ function LikeC4Diagram({
 }) {
   const id = useId();
   const initialRef = useRef(null);
+  const hasEditor = !!useOptionalLikeC4EditorPort();
+  const readonly = !hasEditor;
+  nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
   const bounds = pickViewBounds(view, dynamicViewVariant);
   const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
   if (initialRef.current == null) {
@@ -93,6 +94,7 @@ function LikeC4Diagram({
         {
           features: {
             enableFitView: fitView,
+            enableEditor: hasEditor,
             enableReadOnly: readonly,
             enableFocusMode,
             enableNavigateTo: !!onNavigateTo,
@@ -116,7 +118,6 @@ function LikeC4Diagram({
                 onCanvasContextMenu,
                 onCanvasDblClick,
                 onEdgeClick,
-                onChange,
                 onEdgeContextMenu,
                 onNavigateTo,
                 onNodeClick,
@@ -140,7 +141,7 @@ function LikeC4Diagram({
                         zoomable,
                         pannable,
                         fitViewPadding,
-                        nodesDraggable,
+                        nodesDraggable: hasEditor,
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,

package/dist/LikeC4Diagram.props.d.ts

@@ -67,15 +67,10 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default true
      */
     zoomable?: boolean | undefined;
-    /**
-     * Disable any editing (dragging still can be enabled with `nodesDraggable`)
-     * @default true
-     */
-    readonly?: boolean | undefined;
     /**
      * Show/hide panel with top left controls
      *
-     * @default true if not readonly
+     * @default true
      */
     controls?: boolean | undefined;
     /**
@@ -110,13 +105,11 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      */
     fitViewPadding?: ViewPadding | undefined;
     /**
-     * @default false if readonly
+     * If not readonly, or `enableFocusMode`, `onNavigateTo` or  `onNodeClick` are set - nodes will be selectable
+     *
+     * @default false
      */
     nodesSelectable?: boolean | undefined;
-    /**
-     * @default false if readonly
-     */
-    nodesDraggable?: boolean | undefined;
     /**
      * Initial width of the diagram
      * (supposed to be used during SSR)
@@ -252,7 +245,6 @@ export type OnInitialized = (params: {
 }) => void;
 export type OnLayoutTypeChange = (layoutType: LayoutType) => void;
 export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
-    onChange?: OnChange | null | undefined;
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;
     onNodeContextMenu?: OnNodeClick<A> | null | undefined;

package/dist/LikeC4ProjectsProvider.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCustomCompareMemo } from '@react-hookz/web';
-import { shallowEqual } from 'fast-equals';
-import { useContext } from 'react';
+import { deepEqual } from 'fast-equals';
+import { useContext, useState, useEffect } from 'react';
 import { LikeC4ProjectsContext } from './context/LikeC4ProjectsContext.js';
 import { useCallbackRef } from './hooks/useCallbackRef.js';
 
@@ -15,7 +14,12 @@ function LikeC4ProjectsProvider({
     console.warn("LikeC4ProjectsProvider should not be nested inside another one");
   }
   const onProjectChange = useCallbackRef(_onProjectChange);
-  const value = useCustomCompareMemo(() => ({ projects, onProjectChange }), [projects, onProjectChange], shallowEqual);
+  const [value, setValue] = useState(() => ({ projects, onProjectChange }));
+  useEffect(() => {
+    setValue((current) => {
+      return deepEqual(current.projects, projects) ? current : { projects, onProjectChange };
+    });
+  }, [projects]);
   return /* @__PURE__ */ jsx(LikeC4ProjectsContext.Provider, { value, children });
 }
 

package/dist/LikeC4View.js

@@ -14,7 +14,7 @@ import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { Overlay } from './overlays/overlay/Overlay.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
 import { pickViewBounds } from './utils/view-bounds.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';
+import IconX from './node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const cssInteractive = css({
   cursor: "pointer",
@@ -104,7 +104,6 @@ function LikeC4View({
           LikeC4Diagram,
           {
             view,
-            readonly: true,
             pannable,
             zoomable,
             background,
@@ -120,7 +119,6 @@ function LikeC4View({
             enableRelationshipBrowser,
             enableElementTags: false,
             controls,
-            nodesDraggable: false,
             reduceGraphics,
             className: cx(
               "likec4-static-view",
@@ -156,8 +154,6 @@ function LikeC4View({
               enableElementTags: true,
               enableCompareWithLatest: true,
               controls: true,
-              readonly: true,
-              nodesDraggable: false,
               fitView: true,
               ...props,
               fitViewPadding: FitViewPaddings.withControls,

package/dist/ReactLikeC4.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Except } from 'type-fest';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
@@ -27,9 +26,7 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
     children?: ReactNode | undefined;
-} & Except<LikeC4DiagramProperties<A>, 'view', {
-    requireExactProps: true;
-}> & LikeC4DiagramEventHandlers<A>;
+} & Omit<LikeC4DiagramProperties<A>, 'view'> & LikeC4DiagramEventHandlers<A>;
 /**
  * Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
  * But provides more control over the diagram

package/dist/StaticLikeC4Diagram.js

@@ -16,7 +16,6 @@ function StaticLikeC4Diagram({
     LikeC4Diagram,
     {
       view,
-      readonly: true,
       className: cx(className, "likec4-static-view"),
       fitView,
       fitViewPadding,
@@ -34,7 +33,6 @@ function StaticLikeC4Diagram({
       enableFocusMode: false,
       enableSearch: false,
       nodesSelectable: false,
-      nodesDraggable: false,
       enableElementTags: false,
       ...rest
     }

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

@@ -1,4 +1,5 @@
+import { MemoExoticComponent } from 'react';
 /**
  * XYFlow requires handles to be defined on nodes.
  */
-export declare const DefaultHandles: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultHandles: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/base-primitives/NodeHandles.js

@@ -1,21 +1,25 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Handle, Position } from '@xyflow/react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Position, Handle } from '@xyflow/react';
+import { memo, Fragment as Fragment$1 } from 'react';
 
-const style = {
-  top: "50%",
-  left: "50%",
-  right: "unset",
-  bottom: "unset",
-  visibility: "hidden",
-  width: 5,
-  height: 5,
-  transform: "translate(-50%, -50%)"
-};
-const DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
-] });
+const positions = [Position.Top, Position.Right, Position.Bottom, Position.Left];
+const DefaultHandles = memo(() => /* @__PURE__ */ jsx(Fragment, { children: positions.map((position) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  /* @__PURE__ */ jsx(
+    Handle,
+    {
+      type: "source",
+      position,
+      className: "likec4-node-handle-center"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Handle,
+    {
+      type: "target",
+      position,
+      className: "likec4-node-handle-center"
+    }
+  )
+] }, position)) }));
 
 export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function CompoundActionButton({
   data: {

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.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';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

package/dist/base-primitives/edge/EdgeContainer.d.ts

@@ -7,5 +7,5 @@ type EdgeContainerProps = PropsWithChildren<BaseEdgePropsWithData<Data> & {
     component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;
-export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, style, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeContainer.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { invariant } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { edgeContainer } from './edge.css.js';
 
 function EdgeContainer({
   className,
@@ -15,13 +14,13 @@ function EdgeContainer({
     dimmed: isDimmed = false,
     ...data
   },
+  animated,
   children,
   style
 }) {
   const props = {
     className: cx(
       className,
-      edgeContainer,
       "likec4-edge-container",
       selected && "selected",
       selectable && "selectable"
@@ -29,7 +28,7 @@ function EdgeContainer({
     "data-likec4-color": color,
     "data-edge-dir": data.dir ?? "forward",
     "data-edge-active": isActive,
-    "data-edge-animated": isActive,
+    "data-edge-animated": animated || isActive,
     "data-likec4-hovered": isHovered,
     ...selected && {
       "data-likec4-selected": selected

package/dist/base-primitives/edge/EdgeLabel.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isStepEdgeId, extractStep } from '@likec4/core';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { edgeLabel } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
@@ -26,38 +26,38 @@ const EdgeLabel = forwardRef(({
   ...rest
 }, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
-  const classes = edgeLabel({
-    pointerEvents,
-    isStepEdge: stepNum !== null,
-    cursor: selectable || stepNum !== null ? "pointer" : "default"
-  });
   const hasLabel = isTruthy(label) || isTruthy(technology);
   return /* @__PURE__ */ jsxs(
     m.div,
     {
       ref,
-      className: cx(classes.root, "likec4-edge-label", className),
+      className: cx(
+        // This class is queried by RelationshipPopover to position near the edge label
+        "likec4-edge-label",
+        edgeLabel({
+          pointerEvents,
+          isStepEdge: stepNum !== null,
+          cursor: selectable || stepNum !== null ? "pointer" : "default"
+        }),
+        className
+      ),
       "data-edge-id": id,
       animate: {
         scale: isHovered && !selected ? 1.06 : 1
       },
       ...rest,
       children: [
-        stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
-        hasLabel && /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
+        stepNum !== null && /* @__PURE__ */ jsx(Box, { className: "likec4-edge-label__step-number", children: stepNum }),
+        hasLabel && /* @__PURE__ */ jsxs(Box, { className: "likec4-edge-label__contents", children: [
           isTruthy(label) && /* @__PURE__ */ jsx(
             Box,
             {
-              className: cx(
-                classes.labelText,
-                css({
-                  lineClamp: 5
-                })
-              ),
+              lineClamp: 5,
+              className: "likec4-edge-label__text",
               children: label
             }
           ),
-          isTruthy(technology) && /* @__PURE__ */ jsx(Box, { className: classes.labelTechnology, children: "[ " + technology + " ]" }),
+          isTruthy(technology) && /* @__PURE__ */ jsx(Box, { className: "likec4-edge-label__technology", children: "[ " + technology + " ]" }),
           children
         ] })
       ]

package/dist/base-primitives/edge/EdgeLabelContainer.d.ts

@@ -14,5 +14,5 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     } | undefined;
     edgeProps: BaseEdgePropsWithData<Data>;
 };
-export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, }, labelPosition: labelXY, className, style, children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style, children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/base-primitives/edge/EdgeLabelContainer.js

@@ -20,7 +20,8 @@ function EdgeLabelContainer({
       dimmed: isDimmed = false,
       labelBBox,
       color = "gray"
-    }
+    },
+    animated
   },
   labelPosition: labelXY,
   className,
@@ -40,7 +41,7 @@ function EdgeLabelContainer({
   if (labelX === void 0 || labelY === void 0) {
     return null;
   }
-  const translate = labelXY?.translate;
+  const translate = labelXY?.translate ?? "";
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -53,7 +54,7 @@ function EdgeLabelContainer({
       "data-likec4-hovered": isHovered,
       "data-likec4-color": color,
       "data-edge-active": isActive,
-      "data-edge-animated": isActive,
+      "data-edge-animated": animated || isActive,
       ...selected !== false && {
         "data-likec4-selected": selected
       },
@@ -66,7 +67,7 @@ function EdgeLabelContainer({
         },
         zIndex,
         ...style,
-        transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate || ""}`
+        transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate}`
       },
       children
     },

package/dist/base-primitives/edge/EdgePath.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
+import { edgePath } from '@likec4/styles/recipes';
 import { forwardRef } from 'react';
-import { markerContext, edgePathBg, cssEdgePath } from './edge.css.js';
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers.js';
 
 const EdgePath = forwardRef(({
@@ -38,6 +38,7 @@ const EdgePath = forwardRef(({
   } else if (isDashed) {
     strokeDasharray = "8,10";
   }
+  const classes = edgePath();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     selectable && /* @__PURE__ */ jsx(
       "path",
@@ -62,21 +63,17 @@ const EdgePath = forwardRef(({
       "circle",
       {
         className: cx(
-          "edge-center-point",
-          css({
-            visibility: "hidden",
-            offsetDistance: "50%"
-          })
+          // This class is queried by RelationshipPopover to position in the middle of the edge
+          "likec4-edge-middle-point",
+          classes.middlePoint
         ),
+        "data-edge-id": id,
         style: {
           offsetPath: `path("${svgPath}")`
-        },
-        cx: 0,
-        cy: 0,
-        r: 2
+        }
       }
     ),
-    /* @__PURE__ */ jsxs("g", { className: markerContext, onPointerDown: onEdgePointerDown, children: [
+    /* @__PURE__ */ jsxs("g", { className: classes.markersCtx, onPointerDown: onEdgePointerDown, children: [
       /* @__PURE__ */ jsxs("defs", { children: [
         MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
         MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
@@ -87,14 +84,13 @@ const EdgePath = forwardRef(({
           className: cx(
             "react-flow__edge-path",
             "hide-on-reduced-graphics",
-            edgePathBg,
+            classes.pathBg,
             isDragging && css({ display: "none" })
           ),
           d: svgPath,
           style,
           strokeLinecap: "round"
-        },
-        "edge-path-bg"
+        }
       ),
       /* @__PURE__ */ jsx(
         "path",
@@ -102,8 +98,8 @@ const EdgePath = forwardRef(({
           ref: svgPathRef,
           className: cx(
             "react-flow__edge-path",
-            selectable && "react-flow__edge-interaction",
-            cssEdgePath
+            classes.path,
+            selectable && "react-flow__edge-interaction"
           ),
           d: svgPath,
           style,
@@ -112,8 +108,7 @@ const EdgePath = forwardRef(({
           strokeDasharray,
           markerStart: MarkerStart ? `url(#start${id})` : void 0,
           markerEnd: MarkerEnd ? `url(#end${id})` : void 0
-        },
-        "edge-path"
+        }
       )
     ] })
   ] });

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.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
+import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
 
 const container = hstack({
   position: "absolute",

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

@@ -5,7 +5,7 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 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.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",

package/dist/base-primitives/memoNode.js

@@ -4,7 +4,7 @@ import { memo } from 'react';
 function nodePropsEqual(prev, next) {
   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");
+const isMemoized = /* @__PURE__ */ Symbol.for("isMemoized");
 function memoNode(Node, displayName = "Node") {
   if (Node.hasOwnProperty(isMemoized)) {
     return Node;

package/dist/components/ErrorFallback.js

@@ -4,7 +4,7 @@ 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.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";

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

package/dist/context/DiagramEventHandlers.js

@@ -4,7 +4,6 @@ import { useContext, createContext, useMemo } from 'react';
 import { keys, isFunction, mapToObj } from 'remeda';
 
 const defaultHandlers = {
-  onChange: null,
   onNavigateTo: null,
   onNodeClick: null,
   onNodeContextMenu: null,

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", "FitView", "CompareWithLatest", "Vscode", "ElementTags"];
+declare const FeatureNames: readonly ["Controls", "Editor", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
 export type EnabledFeatures = {

package/dist/context/DiagramFeatures.js

@@ -3,6 +3,7 @@ import { shallowEqual } from 'fast-equals';
 import { useContext, createContext, useState, useEffect } from 'react';
 
 const DefaultFeatures = {
+  enableEditor: false,
   enableReadOnly: true,
   enableCompareWithLatest: false,
   enableControls: false,

package/dist/context/EnsureMantine.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { MantineContext, MantineProvider } from '@mantine/core';
 import { useContext, useEffect } from 'react';
+import { DefaultTheme } from '../shadowroot/styles.css.js';
 
 function EnsureMantine({ children }) {
   const mantineCtx = useContext(MantineContext);
@@ -10,7 +11,7 @@ function EnsureMantine({ children }) {
     }
   }, []);
   if (!mantineCtx) {
-    return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", children });
+    return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", theme: DefaultTheme, children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }