@likec4/diagram 1.34.2 → 1.36.0

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { invariant } from '@likec4/core';
-import { cx, css } from '@likec4/styles/css';
-import { edgeVars, edgeContainer } from './edge.css.js';
+import { cx } from '@likec4/styles/css';
+import { edgeContainer } from './edge.css.js';
 
 function EdgeContainer({
   className,
@@ -18,12 +18,9 @@ function EdgeContainer({
 }) {
   const props = {
     className: cx(
-      css({
-        likec4RelationPalette: color
-      }),
-      edgeVars,
+      className,
       edgeContainer,
-      className
+      "likec4-edge-container"
     ),
     "data-likec4-color": color,
     "data-edge-dir": data.dir ?? "forward",

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

@@ -1,4 +1,3 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
 export declare const edgeNoteCloseButton: string;
 export declare const edgeNoteText: string;
 export declare const translate: {
@@ -6,24 +5,3 @@ export declare const translate: {
     readonly ref: "var(--edge-translate)";
 };
 export declare const edgeLabelContainer: string;
-export declare const labelsva: SlotRecipeRuntimeFn<"root" | "stepNumber" | "labelContents" | "labelText" | "labelTechnology", {
-    isStepEdge: {
-        false: {};
-        true: {
-            root: {
-                flexDirection: "row";
-                gap: "4px";
-                padding: "0px";
-            };
-            labelContents: {
-                display: "flex";
-                flexDirection: "column";
-                alignItems: "center";
-                padding: "2px 5px 4px 0px";
-            };
-            labelText: {
-                padding: "2px 6px 4px 0px";
-            };
-        };
-    };
-}>;

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

@@ -1,10 +1,10 @@
-import { css, sva } from '@likec4/styles/css';
+import { css } from '@likec4/styles/css';
 
 const labelBorderRadius = "4px";
 css({
   position: "absolute",
-  top: 4,
-  right: 4
+  top: "1",
+  right: "1"
 });
 css({
   userSelect: "all",
@@ -22,8 +22,8 @@ const translate = {
   ref: `var(--edge-translate)`
 };
 const edgeLabelContainer = css({
-  top: 0,
-  left: 0,
+  top: "0",
+  left: "0",
   position: "absolute",
   pointerEvents: "all",
   cursor: "pointer",
@@ -53,83 +53,5 @@ const edgeLabelContainer = css({
     display: "none"
   }
 });
-const labelsva = sva({
-  slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
-  base: {
-    root: {
-      pointerEvents: "all",
-      fontFamily: "likec4.relation",
-      padding: "3px 5px 5px 5px",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "max-content",
-      maxWidth: "100%",
-      gap: "4px"
-    },
-    stepNumber: {
-      alignSelf: "stretch",
-      flex: "0 0 auto",
-      fontWeight: 600,
-      fontSize: "14px",
-      lineHeight: "1",
-      padding: "5px 5px",
-      textAlign: "center",
-      minWidth: "22px",
-      borderTopLeftRadius: labelBorderRadius,
-      borderBottomLeftRadius: labelBorderRadius,
-      background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]`,
-      fontVariantNumeric: "tabular-nums",
-      // _dark: {
-      [':where([data-likec4-color="gray"]) &']: {
-        _dark: {
-          background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]`
-        }
-      }
-    },
-    labelContents: {
-      display: "contents",
-      _empty: {
-        display: "none !important"
-      }
-    },
-    labelText: {
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "14px",
-      lineHeight: "1.185"
-    },
-    labelTechnology: {
-      textAlign: "center",
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "11px",
-      lineHeight: "1",
-      opacity: 0.75
-    }
-  },
-  variants: {
-    isStepEdge: {
-      false: {},
-      true: {
-        root: {
-          flexDirection: "row",
-          gap: "4px",
-          padding: "0px"
-        },
-        labelContents: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          padding: "2px 5px 4px 0px"
-        },
-        labelText: {
-          padding: "2px 6px 4px 0px"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    isStepEdge: false
-  }
-});
 
-export { edgeLabelContainer, labelsva, translate };
+export { edgeLabelContainer, translate };

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

@@ -1,11 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isStepEdgeId, extractStep } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
+import { cx, css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { Text } from '@mantine/core';
+import { edgeLabel } from '@likec4/styles/recipes';
 import { forwardRef } from 'react';
 import { isTruthy } from 'remeda';
-import { labelsva } from './EdgeLabel.css.js';
 
 const EdgeLabel = forwardRef(({
   edgeProps: {
@@ -21,14 +20,25 @@ const EdgeLabel = forwardRef(({
   ...rest
 }, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
-  const classes = labelsva({
+  const classes = edgeLabel({
     isStepEdge: stepNum !== null
   });
   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(Text, { component: "div", className: classes.labelText, lineClamp: 5, children: label }),
-      isTruthy(technology) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.labelTechnology, children: "[ " + technology + " ]" }),
+      isTruthy(label) && /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: cx(
+            classes.labelText,
+            css({
+              lineClamp: 5
+            })
+          ),
+          children: label
+        }
+      ),
+      isTruthy(technology) && /* @__PURE__ */ jsx(Box, { className: classes.labelTechnology, children: "[ " + technology + " ]" }),
       children
     ] })
   ] });

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

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
-import { edgeVars } from './edge.css.js';
 import { translate, edgeLabelContainer } from './EdgeLabel.css.js';
 
 const toCssVarValue = (value) => {
@@ -40,10 +39,6 @@ function EdgeLabelContainer({
     "div",
     {
       className: cx(
-        css({
-          likec4RelationPalette: color
-        }),
-        edgeVars,
         edgeLabelContainer,
         "nodrag nopan",
         "likec4-edge-label-container",

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

@@ -83,7 +83,7 @@ const OArrow = (props) => /* @__PURE__ */ jsx(
       {
         d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
         stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
+        fill: "context-stroke",
         strokeWidth: 1.25,
         strokeLinejoin: "miter",
         strokeLinecap: "square"
@@ -129,7 +129,7 @@ const ODiamond = (props) => /* @__PURE__ */ jsx(
       {
         d: "M5,0 L10,4 L5,8 L0,4 Z",
         stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
+        fill: "context-stroke",
         strokeWidth: 1.25,
         strokeLinecap: "round"
       }
@@ -171,7 +171,7 @@ const ODot = (props) => /* @__PURE__ */ jsx(
       {
         strokeWidth: 1.25,
         stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
+        fill: "context-stroke",
         cx: 4,
         cy: 4,
         r: 3

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

@@ -1,7 +1,5 @@
-export declare const edgeVars: string;
 export declare const edgeContainer: string;
 export declare const hideOnReducedGraphics: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const cssEdgePath: string;
-export declare const actionBtn: string;

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

@@ -1,29 +1,6 @@
 import { css } from '@likec4/styles/css';
 
 const isSelected = ".react-flow__edge.selected";
-const edgeStroke = "--xy-edge-stroke";
-const edgeStrokeSelected = "--xy-edge-stroke-selected";
-const labelColor = "--xy-edge-label-color";
-const labelBg = "--xy-edge-label-background-color";
-const edgeVars = css({
-  [edgeStroke]: "{colors.likec4.relation.stroke}",
-  [edgeStrokeSelected]: "{colors.likec4.relation.stroke.selected}",
-  [labelColor]: {
-    base: "{colors.likec4.relation.label}",
-    _light: `color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)`
-  },
-  [labelBg]: {
-    _light: `{colors.likec4.relation.label.bg/60}`,
-    _dark: `{colors.likec4.relation.label.bg/50}`
-  },
-  ["--xy-edge-stroke-width"]: "3",
-  "&:is([data-likec4-hovered='true'],[data-edge-active='true'])": {
-    [edgeStroke]: "{colors.likec4.relation.stroke.selected}",
-    _whenSelected: {
-      ["--xy-edge-stroke-width"]: "4"
-    }
-  }
-});
 const edgeContainer = css({
   _reduceGraphics: {
     transition: "none"
@@ -90,36 +67,5 @@ const cssEdgePath = css({
     animationName: "none"
   }
 });
-const aiBg = {
-  var: "--ai-bg"};
-const actionBtn = css({
-  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  pointerEvents: "all",
-  // color: `xyedge.label`,
-  cursor: "pointer",
-  opacity: 0.75,
-  transition: "fast",
-  // backgroundColor: aiBg.ref,
-  [aiBg.var]: "var(--xy-edge-label-background-color)",
-  "--ai-hover": `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
-  "--ai-size": `var(--ai-size-sm)`,
-  "--ai-radius": `var(--mantine-radius-sm)`,
-  _hover: {
-    translateY: "1px",
-    scale: 1.15
-  },
-  _active: {
-    translateY: "-1px",
-    scale: "0.9"
-  },
-  _whenHovered: {
-    opacity: 1
-  },
-  "& .tabler-icon": {
-    width: "80%",
-    height: "80%",
-    strokeWidth: "2"
-  }
-});
 
-export { actionBtn, cssEdgePath, edgeContainer, edgePathBg, edgeVars, hideOnReducedGraphics, markerContext };
+export { cssEdgePath, edgeContainer, edgePathBg, hideOnReducedGraphics, markerContext };

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

@@ -11,9 +11,9 @@ import { stopPropagation } from '../../../utils/xyflow.js';
 const container = css({
   position: "absolute",
   zIndex: 1,
-  top: `calc(100% - 30px)`,
+  top: `[calc(100% - 30px)]`,
   transform: "translateX(-50%)",
-  left: `50%`,
+  left: `[50%]`,
   width: "auto",
   minHeight: "30px",
   display: "flex",

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

@@ -6,24 +6,25 @@ 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.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",
-  top: 2,
-  right: 2,
+  top: "0.5",
+  right: "0.5",
   _shapeBrowser: {
-    right: "5px"
+    right: "[5px]"
   },
   _shapeCylinder: {
-    top: "14px"
+    top: "[14px]"
   },
   _shapeStorage: {
-    top: "14px"
+    top: "[14px]"
   },
   _shapeQueue: {
-    top: "1px",
-    right: "12px"
+    top: "[1px]",
+    right: "3"
+    // 12px
   },
   _smallZoom: {
     display: "none"

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

@@ -4,8 +4,8 @@ const container = css({
   position: "relative",
   width: "100%",
   height: "100%",
-  padding: 0,
-  margin: 0,
+  padding: "0",
+  margin: "0",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -13,8 +13,8 @@ const container = css({
   _before: {
     content: '" "',
     position: "absolute",
-    top: "calc(100% - 4px)",
-    left: 0,
+    top: "[calc(100% - 4px)]",
+    left: "0",
     width: "100%",
     height: "24px",
     background: "[transparent]",

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -1,5 +1,5 @@
 import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
-import { LayoutProps } from 'motion/react';
+import { MotionNodeLayoutOptions } from 'motion/react';
 import { CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { NodeProps } from '../../types';
 import { ShapeSize, SpacingSize, TextSize } from '@likec4/core';
@@ -14,7 +14,7 @@ export type ElementNodeContainerProps = {
     className?: string | undefined;
     style?: CSSProperties | undefined;
     [key: `data-${string}`]: string | undefined;
-} & LayoutProps;
+} & MotionNodeLayoutOptions;
 export declare function nodeSizes({ size, padding, textSize, }: ElementStyle): {
     size: ShapeSize;
     padding: SpacingSize;
@@ -30,4 +30,4 @@ export declare const ElementNodeContainer: ForwardRefExoticComponent<{
     children?: ReactNode | undefined;
     className?: string | undefined;
     style?: CSSProperties | undefined;
-} & LayoutProps & RefAttributes<HTMLDivElement>>;
+} & MotionNodeLayoutOptions & RefAttributes<HTMLDivElement>>;

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core/types';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
 import { container } from './ElementNodeContainer.css.js';
@@ -62,9 +62,6 @@ const ElementNodeContainer = forwardRef(({
     {
       ref,
       className: cx(
-        css({
-          likec4Palette: data.color
-        }),
         container,
         "group",
         "likec4-element-node",

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

@@ -4,14 +4,14 @@ const indicator = css({
   _smallZoom: {
     visibility: "hidden"
   },
-  stroke: "likec4.palette.loContrast",
+  stroke: "var(--likec4-palette-loContrast)",
   fill: "[none]",
   strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: "hidden",
   pointerEvents: "none",
   _light: {
-    stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`
+    stroke: `[color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121))]`
   },
   _whenFocused: {
     visibility: "visible"
@@ -25,26 +25,26 @@ const indicator = css({
   }
 });
 const fillElementFill = css({
-  fill: "likec4.palette.fill"
+  fill: "var(--likec4-palette-fill)"
 });
 css({
-  fill: "likec4.palette.stroke"
+  fill: "var(--likec4-palette-stroke)"
 });
 const fillMixStroke = css({
-  fill: "[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
+  fill: "[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]",
   ".shape-svg-multiple &": {
-    fill: "likec4.palette.fill"
+    fill: "var(--likec4-palette-fill)"
   }
 });
 const shapeBase = css.raw({
-  top: 0,
-  left: 0,
+  top: "0",
+  left: "0",
   position: "absolute",
   width: "100%",
   height: "100%",
   pointerEvents: "none",
-  fill: "likec4.palette.fill",
-  stroke: "likec4.palette.stroke",
+  fill: "var(--likec4-palette-fill)",
+  stroke: "var(--likec4-palette-stroke)",
   overflow: "visible"
   // zIndex is removed to improve rendering performance
   // this forces to keep shape in the same layer as the node
@@ -75,7 +75,7 @@ const shapeSvg = css(shapeBase, {
   transitionDelay: "0ms",
   filter: `
       drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent))
+      drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))
       drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
     `,
   _whenHovered: {

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

@@ -3,6 +3,7 @@ import { NodeProps } from '../../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>>;
 type Data = {

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, className, ...props }, ref) => {
+  ({ tag, cursor = "default", className, ...props }, ref) => {
     const spec = useTagSpecification(tag);
     return /* @__PURE__ */ jsxs(
       Box,
@@ -28,8 +28,9 @@ const ElementTag = forwardRef(
           className
         ),
         ...props,
+        style: { cursor },
         children: [
-          /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, fontSize: "1.05em" }, children: "#" }),
+          /* @__PURE__ */ jsx("span", { children: "#" }),
           /* @__PURE__ */ jsx("span", { children: tag })
         ]
       }
@@ -79,23 +80,23 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
           "likec4-element-tags",
           hstack({
             pointerEvents: "all",
-            gap: 4,
+            gap: "1",
             alignItems: "flex-end",
             justifyItems: "stretch",
             position: "absolute",
             width: "100%",
-            bottom: 0,
-            left: 0,
-            padding: 4,
+            bottom: "0",
+            left: "0",
+            padding: "1",
             _shapeCylinder: {
-              bottom: 5
+              bottom: "[5px]"
             },
             _shapeStorage: {
-              bottom: 5
+              bottom: "[5px]"
             },
             _shapeQueue: {
-              bottom: 0,
-              paddingLeft: 14
+              bottom: "0",
+              paddingLeft: "[14px]"
             }
           })
         ),
@@ -129,11 +130,12 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
       {
         ref: tagsToolbarRef,
         css: {
-          gap: 4,
+          gap: "0.5",
+          alignItems: "baseline",
           flexWrap: "wrap",
           pb: "sm",
           translate: "auto",
-          x: -8,
+          x: "[-8px]",
           maxWidth
         },
         children: tags.map((tag) => /* @__PURE__ */ jsx(
@@ -145,8 +147,9 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
               cursor: "pointer",
               ...zoomIsLargeEnough && {
                 fontSize: "lg",
-                borderRadius: 4,
-                px: 6
+                borderRadius: "[4px]",
+                px: "1.5"
+                // 6px
               }
             }),
             onClick: (e) => {

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

@@ -1,24 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
+import { elementNodeIcon, elementNodeData } from '@likec4/styles/recipes';
 import { Text } from '@mantine/core';
 import { isTruthy, isEmpty, isNumber } from 'remeda';
 import { IconRenderer } from '../../../context/IconRenderer.js';
 import { MarkdownBlock } from '../MarkdownBlock.js';
 import { nodeSizes } from './ElementNodeContainer.js';
-import { elementTitle, iconSize, elementIcon } from './ElementTitle.css.js';
 
-function ElementTitle({ id, data, iconSize: iconSize$1 }) {
-  const elementIcon$1 = IconRenderer({
+function ElementTitle({ id, data, iconSize }) {
+  const elementIcon = IconRenderer({
     element: {
       id,
       title: data.title,
       icon: data.icon
     },
-    className: elementIcon
+    className: elementNodeIcon()
   });
-  const classes = elementTitle({
-    hasIcon: isTruthy(elementIcon$1),
+  const classes = elementNodeData({
+    hasIcon: isTruthy(elementIcon),
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? "")
   });
@@ -32,12 +32,12 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
         classes.root,
         "likec4-element"
       ),
-      style: isNumber(iconSize$1) ? {
+      style: isNumber(iconSize) ? {
         // @ts-ignore
-        [iconSize]: `${iconSize$1}px`
+        ["--likec4-icon-size"]: `${iconSize}px`
       } : void 0,
       children: [
-        elementIcon$1,
+        elementIcon,
         /* @__PURE__ */ jsxs(Box, { className: cx(classes.textContainer, "likec4-element-main-props"), children: [
           /* @__PURE__ */ jsx(
             Text,

package/dist/bundle/LikeC4View.d.ts

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