@likec4/diagram 1.36.1 → 1.37.0

package/dist/base/primitives/compound/actionbtns.css.js

@@ -2,19 +2,7 @@ import { cva } from '@likec4/styles/css';
 
 const compoundActionBtn = cva({
   base: {
-    transitionDuration: "normal",
-    "[data-compound-title-inverse] &": {
-      _dark: {
-        "--actionbtn-color": "color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))"
-      },
-      _light: {
-        "--actionbtn-color": "var(--likec4-palette-stroke)",
-        "--actionbtn-color-hovered": "var(--likec4-palette-stroke)",
-        "--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
-        "--actionbtn-bg-hovered": `var(--likec4-palette-fill)/50`,
-        "--actionbtn-bg-hovered-btn": `var(--likec4-palette-fill)`
-      }
-    }
+    transitionDuration: "normal"
   },
   variants: {
     delay: {

package/dist/base/primitives/customEdge.d.ts

@@ -1,4 +1,4 @@
 import { FunctionComponent } from 'react';
 import { Base, EdgeProps } from '../types';
 export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
-export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;
+export declare function customEdge<P extends Record<string, unknown> = Base.EdgeData>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;

package/dist/base/primitives/customNode.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, MemoExoticComponent } from 'react';
-import { Base, NodeProps } from '../types';
-export declare const nodePropsEqual: <P extends Record<string, unknown> = Base.NodeData>(prev: NodeProps<P>, next: NodeProps<P>) => boolean;
-export declare function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(Node: FunctionComponent<NodeProps<P, NodeType>>): MemoExoticComponent<(props: NodeProps<P, NodeType>) => import("react/jsx-runtime").JSX.Element>;
+import { FunctionComponent } from 'react';
+import { NodeProps } from '../types';
+export declare function nodePropsEqual<P extends NodeProps<any, any>>(prev: P, next: P): boolean;
+export declare function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(Node: FunctionComponent<NodeProps<P, NodeType>>): FunctionComponent<NodeProps<P, NodeType>>;

package/dist/base/primitives/customNode.js

@@ -1,14 +1,14 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { deepEqual } from 'fast-equals';
 import { memo } from 'react';
-import { DefaultHandles } from './NodeHandles.js';
 
-const nodePropsEqual = (prev, next) => 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);
+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);
+}
 function customNode(Node) {
-  const NodeComponent = memo((props) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Node, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] }), nodePropsEqual);
+  const NodeComponent = memo(
+    Node,
+    (prev, next) => nodePropsEqual(prev, next)
+  );
   NodeComponent.displayName = "Node";
   return NodeComponent;
 }

package/dist/base/primitives/edge/EdgeLabel.d.ts

@@ -1,11 +1,12 @@
 import { DiagramEdge } from '@likec4/core/types';
-import { BoxProps } from '@likec4/styles/jsx';
-import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLMotionProps } from 'motion/react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
-type EdgeLabelProps = PropsWithChildren<BoxProps & {
+type EdgeLabelProps = HTMLMotionProps<'div'> & {
+    children?: React.ReactNode;
     edgeProps: EdgeProps<Data>;
-}>;
+};
 export declare const EdgeLabel: ForwardRefExoticComponent<Omit<EdgeLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -3,6 +3,7 @@ import { isStepEdgeId, extractStep } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { edgeLabel } from '@likec4/styles/recipes';
+import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
 import { isTruthy } from 'remeda';
 
@@ -11,8 +12,11 @@ const EdgeLabel = forwardRef(({
     id,
     data: {
       label,
-      technology
-    }
+      technology,
+      hovered: isHovered = false
+    },
+    selected = false,
+    selectable = false
   },
   className,
   style,
@@ -21,27 +25,41 @@ const EdgeLabel = forwardRef(({
 }, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
   const classes = edgeLabel({
-    isStepEdge: stepNum !== null
+    isStepEdge: stepNum !== null,
+    cursor: selectable || stepNum !== null ? "pointer" : "default"
   });
-  return /* @__PURE__ */ jsxs(Box, { ref, className: cx(classes.root, className), ...rest, children: [
-    stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
-    /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
-      isTruthy(label) && /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: cx(
-            classes.labelText,
-            css({
-              lineClamp: 5
-            })
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      ref,
+      className: cx(classes.root, "likec4-edge-label", className),
+      "data-edge-id": id,
+      animate: {
+        originY: 0.25,
+        scale: isHovered && !selected ? 1.08 : 1
+      },
+      ...rest,
+      children: [
+        stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
+        /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
+          isTruthy(label) && /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cx(
+                classes.labelText,
+                css({
+                  lineClamp: 5
+                })
+              ),
+              children: label
+            }
           ),
-          children: label
-        }
-      ),
-      isTruthy(technology) && /* @__PURE__ */ jsx(Box, { className: classes.labelTechnology, children: "[ " + technology + " ]" }),
-      children
-    ] })
-  ] });
+          isTruthy(technology) && /* @__PURE__ */ jsx(Box, { className: classes.labelTechnology, children: "[ " + technology + " ]" }),
+          children
+        ] })
+      ]
+    }
+  );
 });
 EdgeLabel.displayName = "EdgeLabel";
 

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

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
+import { cx, css } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
-import { translate, edgeLabelContainer } from './EdgeLabel.css.js';
 
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
@@ -34,12 +33,17 @@ function EdgeLabelContainer({
   if (labelX === void 0 || labelY === void 0) {
     return null;
   }
-  const translate$1 = labelXY?.translate;
+  const translate = labelXY?.translate;
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     "div",
     {
       className: cx(
-        edgeLabelContainer,
+        css({
+          display: {
+            _reduceGraphicsOnPan: "none",
+            _smallZoom: "none"
+          }
+        }),
         "nodrag nopan",
         "likec4-edge-label-container",
         className
@@ -52,31 +56,15 @@ function EdgeLabelContainer({
         "data-likec4-dimmed": isDimmed
       },
       style: {
-        top: toCssVarValue(labelY),
-        left: toCssVarValue(labelX),
-        ...translate$1 && {
-          [translate.var]: translate$1
-        },
         ...labelBBox && {
           maxWidth: labelBBox.width + 18
         },
         zIndex,
-        ...style
+        ...style,
+        transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate || ""}`
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            display: "contents"
-          },
-          // Work around to keep same global selector data-likec4-dimmed
-          ...isDimmed !== false && {
-            "data-likec4-dimmed": isDimmed
-          },
-          children
-        }
-      )
+      children
     },
     id
   ) }, id);

package/dist/base/primitives/edge/edge.css.js

@@ -19,9 +19,11 @@ const edgePathBg = css(_hideOnReducedGraphics, {
   fill: "[none]",
   strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
   strokeOpacity: 0.08,
-  transitionProperty: "stroke-width, stroke-opacity",
-  transitionDuration: "fast",
-  transitionTimingFunction: "inOut",
+  _noReduceGraphics: {
+    transitionProperty: "stroke-width, stroke-opacity",
+    transitionDuration: "fast",
+    transitionTimingFunction: "inOut"
+  },
   _whenHovered: {
     transitionTimingFunction: "out",
     strokeWidth: "calc(var(--xy-edge-stroke-width) + 4)",
@@ -43,18 +45,24 @@ const cssEdgePath = css({
   fill: "[none!]",
   strokeDashoffset: 10,
   _noReduceGraphics: {
+    animationStyle: "xyedgeAnimated",
+    animationPlayState: "paused",
     transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
   },
+  [`:where([data-edge-dir='back']) &`]: {
+    animationDirection: "reverse"
+  },
   _whenHovered: {
-    animationStyle: "xyedgeAnimated",
-    animationDelay: "450ms"
+    _noReduceGraphics: {
+      animationPlayState: "running",
+      animationDelay: "450ms"
+    }
   },
   [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
-    animationStyle: "xyedgeAnimated",
-    animationDelay: "0ms"
-  },
-  [`:where([data-edge-dir='back']) &`]: {
-    animationDirection: "reverse"
+    _noReduceGraphics: {
+      animationPlayState: "running",
+      animationDelay: "0ms"
+    }
   },
   _whenDimmed: {
     animationPlayState: "paused"
@@ -64,7 +72,7 @@ const cssEdgePath = css({
   },
   _whenPanning: {
     strokeDasharray: "none !important",
-    animationName: "none"
+    animationPlayState: "paused"
   }
 });
 

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

@@ -1,13 +1,13 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
-import { toDomPrecision } from '../../../utils/xyflow.js';
-import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from './ElementShape.css.js';
+import { Box } from '@likec4/styles/jsx';
+import { elementShapeRecipe } from '@likec4/styles/recipes';
+import { roundDpr } from '../../../utils/roundDpr.js';
 
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2);
   const rx = radius;
-  const ry = toDomPrecision(tilt * radius);
+  const ry = roundDpr(tilt * radius);
   const tiltAdjustedHeight = height - 2 * ry;
   const path = `  M ${diameter},${ry}
         a ${rx},${ry} 0,0,0 ${-diameter} 0
@@ -26,7 +26,7 @@ function queueSVGPath(width, height, tilt = 0.185) {
   const diameter = height;
   const radius = Math.round(diameter / 2);
   const ry = radius;
-  const rx = toDomPrecision(diameter / 2 * tilt);
+  const rx = roundDpr(diameter / 2 * tilt);
   const tiltAdjustedWidth = width - 2 * rx;
   const path = `
     M ${rx},0
@@ -45,7 +45,7 @@ const PersonIcon = {
   height: 120,
   path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
 };
-function ElementShapeSvg({ shape, w, h }) {
+function ShapeSvg({ shape, w, h }) {
   switch (shape) {
     case "mobile": {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -55,11 +55,11 @@ function ElementShapeSvg({ shape, w, h }) {
             width: w,
             height: h,
             rx: 6,
-            className: fillMixStroke,
+            "data-likec4-fill": "mix-stroke",
             strokeWidth: 0
           }
         ),
-        /* @__PURE__ */ jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
+        /* @__PURE__ */ jsxs("g", { "data-likec4-fill": "fill", strokeWidth: 0, children: [
           /* @__PURE__ */ jsx("circle", { cx: 17, cy: h / 2, r: 12 }),
           /* @__PURE__ */ jsx("rect", { x: 33, y: 12, width: w - 44, height: h - 24, rx: 5 })
         ] })
@@ -73,11 +73,11 @@ function ElementShapeSvg({ shape, w, h }) {
             width: w,
             height: h,
             rx: 6,
-            className: fillMixStroke,
+            "data-likec4-fill": "mix-stroke",
             strokeWidth: 0
           }
         ),
-        /* @__PURE__ */ jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
+        /* @__PURE__ */ jsxs("g", { "data-likec4-fill": "fill", strokeWidth: 0, children: [
           /* @__PURE__ */ jsx("circle", { cx: 16, cy: 17, r: 7 }),
           /* @__PURE__ */ jsx("circle", { cx: 36, cy: 17, r: 7 }),
           /* @__PURE__ */ jsx("circle", { cx: 56, cy: 17, r: 7 }),
@@ -105,7 +105,7 @@ function ElementShapeSvg({ shape, w, h }) {
             width: PersonIcon.width,
             height: PersonIcon.height,
             viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
-            className: fillMixStroke,
+            "data-likec4-fill": "mix-stroke",
             children: /* @__PURE__ */ jsx(
               "path",
               {
@@ -121,7 +121,7 @@ function ElementShapeSvg({ shape, w, h }) {
       const { path, rx, ry } = queueSVGPath(w, h);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, className: fillMixStroke, strokeWidth: 2 })
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
     case "storage":
@@ -129,7 +129,7 @@ function ElementShapeSvg({ shape, w, h }) {
       const { path, rx, ry } = cylinderSVGPath(w, h);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, className: fillMixStroke, strokeWidth: 2 })
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
     case "rectangle": {
@@ -148,15 +148,35 @@ function ElementShapeSvg({ shape, w, h }) {
     }
   }
 }
+function ShapeHtml({ multiple, withOutLine }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: elementShapeRecipe({
+        shapetype: "html"
+      }),
+      children: [
+        multiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
+        withOutLine && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
+      ]
+    }
+  );
+}
 function ElementShape({ data, width, height, withSelectedIndicator = true }) {
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
   const isMultiple = data.style?.multiple ?? false;
+  if (data.shape === "rectangle") {
+    return /* @__PURE__ */ jsx(ShapeHtml, { multiple: isMultiple, withOutLine: withSelectedIndicator });
+  }
+  const className = elementShapeRecipe({
+    shapetype: "svg"
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className: cx(shapeSvgMultiple), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
-    /* @__PURE__ */ jsxs("svg", { className: shapeSvg, viewBox: `0 0 ${w} ${h}`, children: [
+    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h }) }),
+    /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
       withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
-      /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h })
+      /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h })
     ] })
   ] });
 }
@@ -185,7 +205,7 @@ function SelectedIndicator({ shape, w, h }) {
       break;
     }
   }
-  return /* @__PURE__ */ jsx("g", { className: indicator, children: svg });
+  return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
 
 export { ElementShape, SelectedIndicator, cylinderSVGPath };

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

@@ -14,7 +14,7 @@ import { useCurrentZoom } from '../../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
 const ElementTag = forwardRef(
-  ({ tag, cursor = "default", className, ...props }, ref) => {
+  ({ tag, cursor, className, style, ...props }, ref) => {
     const spec = useTagSpecification(tag);
     return /* @__PURE__ */ jsxs(
       Box,
@@ -28,7 +28,10 @@ const ElementTag = forwardRef(
           className
         ),
         ...props,
-        style: { cursor },
+        style: {
+          cursor,
+          ...style
+        },
         children: [
           /* @__PURE__ */ jsx("span", { children: "#" }),
           /* @__PURE__ */ jsx("span", { children: tag })
@@ -107,7 +110,7 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
             "data-likec4-tag": tag,
             className: css({
               layerStyle: "likec4.tag",
-              flex: 1,
+              flex: "1",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -142,9 +145,9 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
           ElementTag,
           {
             tag,
+            cursor: "pointer",
             className: css({
               userSelect: "none",
-              cursor: "pointer",
               ...zoomIsLargeEnough && {
                 fontSize: "lg",
                 borderRadius: "[4px]",

package/dist/base/primitives/element/ElementTitle.js

@@ -56,7 +56,7 @@ function ElementTitle({ id, data, iconSize }) {
               children: data.technology
             }
           ),
-          data.description && /* @__PURE__ */ jsx(
+          data.description?.nonEmpty && (data.description.isMarkdown ? /* @__PURE__ */ jsx(
             MarkdownBlock,
             {
               className: cx(classes.description, "likec4-element-description"),
@@ -66,7 +66,15 @@ function ElementTitle({ id, data, iconSize }) {
               maxHeight: data.description.isMarkdown ? "8rem" : void 0,
               lineClamp: isSmOrXs ? 3 : 5
             }
-          )
+          ) : /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "div",
+              className: cx(classes.description, "likec4-element-description"),
+              lineClamp: isSmOrXs ? 3 : 5,
+              children: data.description.text
+            }
+          ))
         ] })
       ]
     }

package/dist/base/types.d.ts

@@ -2,25 +2,21 @@ import { Edge as RFEdge, EdgeProps as ReactFlowEdgeProps, Node as RFNode, NodePr
 import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
 import * as Base from './types.Base';
 /**
-
-To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
-
-@example
-```
-interface User {
-    name: string;
-    surname?: string;
-    luckyNumber?: number;
-}
-
-type NonOptionalUser = NonOptional<User>
-
-// NonOptionalUser = {
-//   name: string
-//   surname: string | undefined
-//   luckyNumber: number | undefined
-// }
-```
+ * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
+ *
+ * @example
+ * interface User {
+ * 	name: string;
+ * 	surname?: string;
+ * 	luckyNumber?: number;
+ * }
+ *
+ * type NonOptionalUser = NonOptional<User>
+ * // NonOptionalUser = {
+ * //   name: string
+ * //   surname: string | undefined
+ * //   luckyNumber: number | undefined
+ * // }
  */
 export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<{
     [P in Exclude<keyof T, Keys>]: T[P];
@@ -30,11 +26,11 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = ReactFlowNodeProps<RFNode<Base.NodeData & T, NodeType>>;
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<ReactFlowNodeProps<RFNode<Base.NodeData & T, NodeType>>>;
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
-export type EdgeProps<T extends Record<string, unknown> = {}> = SetRequired<ReactFlowEdgeProps<RFEdge<Base.EdgeData & T, any>>, 'data'>;
+export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<Simplify<ReactFlowEdgeProps<RFEdge<Base.EdgeData & T, EdgeType>>>, 'data'>;
 export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<RFNode<Data, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
 export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
 export * as Base from './types.Base';

package/dist/bundle/LikeC4View.d.ts

@@ -1,3 +1,3 @@
-import { aux } from '@likec4/core/types';
+import { Any, UnknownLayouted } from '@likec4/core/types';
 import { LikeC4ViewProps } from './LikeC4View.props';
-export declare function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4View<A extends Any = UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/bundle/LikeC4View.js

@@ -129,7 +129,10 @@ const LikeC4ViewInner = memo(({
               controls,
               nodesDraggable: false,
               reduceGraphics,
-              className: cx(isBrowserEnabled && cssInteractive),
+              className: cx(
+                "likec4-static-view",
+                isBrowserEnabled && cssInteractive
+              ),
               enableSearch: false,
               ...isBrowserEnabled && {
                 onNavigateTo,

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,7 +1,7 @@
-import { aux, WhereOperator } from '@likec4/core/types';
+import { Any, aux, WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
-export interface LikeC4ViewProps<A extends aux.Any> {
+export interface LikeC4ViewProps<A extends Any> {
     /**
      * View to display.
      */

package/dist/bundle/ReactLikeC4.d.ts

@@ -1,7 +1,7 @@
-import { aux } from '@likec4/core/types';
+import { Any, aux, UnknownLayouted } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { LikeC4DiagramProps } from '../LikeC4Diagram';
-export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+export type ReactLikeC4Props<A extends Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
     viewId: aux.ViewId<A>;
     /**
      * Keep aspect ratio of the diagram
@@ -27,7 +27,7 @@ export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'v
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
 };
-export declare function ReactLikeC4<A extends aux.Any = aux.UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends Any = UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ReactLikeC4 {
     var displayName: string;
 }

package/dist/bundle/custom.js

@@ -22,11 +22,12 @@ export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures
 export { Overlay } from '../overlays/overlay/Overlay.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useDiagramActorRef } from '../hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
 export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../likec4model/useLikeC4Project.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/bundle/index.js

@@ -6,11 +6,12 @@ export { ViewNotFound } from './ViewNotFound.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 export { useEnabledFeatures } from '../context/DiagramFeatures.js';
 export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useDiagramActorRef } from '../hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
 export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../likec4model/useLikeC4Project.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/components/Link.js

@@ -52,8 +52,9 @@ const Link = forwardRef(
             maxWidth: 500,
             userSelect: "all",
             pr: "0",
-            _hover: {
-              backgroundColor: {
+            backgroundColor: {
+              base: "transparent",
+              _hover: {
                 base: "mantine.colors.gray[1]",
                 _dark: "mantine.colors.dark[5]"
               }