@likec4/diagram 1.44.0 → 1.46.0

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.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function CompoundActionButton({
   data: {

package/dist/base-primitives/compound/CompoundDetailsButton.d.ts

@@ -1,8 +1,9 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseNodeProps } from '../../base/types';
 type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
-    icon?: React.ReactNode;
-    onClick: (e: React.MouseEvent) => void;
+    icon?: ReactNode;
+    onClick: (e: ReactMouseEvent) => void;
 }>;
 export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {

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

@@ -1,6 +1,7 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 type EdgeActionBtnProps = {
-    icon?: React.ReactNode;
-    onClick: (e: React.MouseEvent) => void;
+    icon?: ReactNode;
+    onClick: (e: ReactMouseEvent) => void;
 };
 export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react/jsx-runtime").JSX.Element;
 export {};

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.35.0_react@19.2.1/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, 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,11 +1,11 @@
 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,
   component = "g",
+  selectable = false,
   selected = false,
   data: {
     color = "gray",
@@ -14,19 +14,21 @@ function EdgeContainer({
     dimmed: isDimmed = false,
     ...data
   },
+  animated,
   children,
   style
 }) {
   const props = {
     className: cx(
       className,
-      edgeContainer,
-      "likec4-edge-container"
+      "likec4-edge-container",
+      selected && "selected",
+      selectable && "selectable"
     ),
     "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.d.ts

@@ -1,11 +1,11 @@
 import { DiagramEdge } from '@likec4/core/types';
 import { HTMLMotionProps } from 'motion/react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { BaseEdgePropsWithData } from '../../base/types';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
 type EdgeLabelProps = HTMLMotionProps<'div'> & {
-    children?: React.ReactNode;
+    children?: ReactNode;
     edgeProps: BaseEdgePropsWithData<Data>;
     pointerEvents?: 'all' | 'none';
 };

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,8 +38,9 @@ const EdgePath = forwardRef(({
   } else if (isDashed) {
     strokeDasharray = "8,10";
   }
+  const classes = edgePath();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectable && !isDragging && /* @__PURE__ */ jsx(
+    selectable && /* @__PURE__ */ jsx(
       "path",
       {
         className: cx(
@@ -53,28 +54,43 @@ const EdgePath = forwardRef(({
         style: {
           strokeWidth: interactionWidth ?? 10,
           stroke: "currentcolor",
-          strokeOpacity: 0
+          strokeOpacity: 0,
+          ...isDragging ? { display: "none" } : {}
         }
       }
     ),
-    /* @__PURE__ */ jsxs("g", { className: markerContext, onPointerDown: onEdgePointerDown, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: cx(
+          // 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}")`
+        }
+      }
+    ),
+    /* @__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 })
       ] }),
-      !isDragging && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         "path",
         {
           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",
@@ -82,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,
@@ -92,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.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 type ElementActionButtonsProps = {
     selected?: boolean;
     data: {
@@ -34,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.2.0/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.1/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

@@ -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.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",
@@ -27,6 +27,9 @@ const container = css({
   },
   _smallZoom: {
     display: "none"
+  },
+  _print: {
+    display: "none"
   }
 });
 function ElementDetailsButton({

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/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.35.0_react@19.2.1/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.35.0_react@19.2.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.2.1/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,7 +1,8 @@
 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 = {
     [P in `enable${FeatureName}`]: boolean;
 };

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 });
 }

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.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';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.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.2.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.2.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.2.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.2.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.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({

package/dist/context/TagStylesContext.js

@@ -13,7 +13,7 @@ const generateColorVars = (spec) => {
   if (isTagColorSpecified(spec)) {
     return `
       --colors-likec4-tag-bg: ${color};
-      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color}, var(--colors-likec4-mix-color) 20%);
+      --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
     `;
   }
   if (!radixColors.includes(color)) {

package/dist/custom/hooks.d.ts

@@ -1,11 +1,11 @@
-export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../likec4diagram/state/types';
+export type { DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents, DiagramEvents, } from '../likec4diagram/state/types';
 export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { useCurrentView, useCurrentViewId, } from '../hooks/useCurrentView';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
 export { useCurrentViewModel, } from '../hooks/useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../hooks/useLikeC4Model';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
 export { useLikeC4Styles, } from '../hooks/useLikeC4Styles';
 export { useSetState } from '../hooks/useSetState';
 export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/custom/index.js

@@ -18,7 +18,7 @@ export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
 export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
 export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';