@likec4/diagram 1.26.1 → 1.27.0

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

@@ -1,10 +1,11 @@
-import { jsx } from "react/jsx-runtime";
-import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from "@likec4/core";
-import { createPolymorphicComponent, Box } from "@mantine/core";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { forwardRef } from "react";
-import { container } from "./ElementNodeContainer.css.js";
+import { jsx } from 'react/jsx-runtime';
+import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { createPolymorphicComponent, Box } from '@mantine/core';
+import { m } from 'framer-motion';
+import { forwardRef } from 'react';
+import { container } from './ElementNodeContainer.css.js';
+
 function nodeSizes({
   size,
   padding,
@@ -19,9 +20,9 @@ function nodeSizes({
   if (!padding && !!size) {
     padding = size;
   }
-  size ?? (size = DefaultShapeSize);
-  textSize ?? (textSize = DefaultTextSize);
-  padding ?? (padding = DefaultPaddingSize);
+  size ??= DefaultShapeSize;
+  textSize ??= DefaultTextSize;
+  padding ??= DefaultPaddingSize;
   return {
     size,
     padding,
@@ -39,6 +40,7 @@ const ElementNodeContainer = createPolymorphicComponent(
         ...data
       }
     },
+    style,
     children,
     ...rest
   }, ref) => {
@@ -61,10 +63,14 @@ const ElementNodeContainer = createPolymorphicComponent(
       {
         component: m.div,
         ref,
-        className: clsx([
+        className: cx(
+          css({
+            likec4Palette: data.color
+          }),
           container,
+          "group",
           "likec4-element-node"
-        ]),
+        ),
         initial: false,
         ...selectable && {
           animate: {
@@ -72,13 +78,18 @@ const ElementNodeContainer = createPolymorphicComponent(
           },
           whileTap: { scale: 0.98 }
         },
-        "data-hovered": isHovered,
+        "data-likec4-hovered": isHovered,
         "data-likec4-color": data.color,
         "data-likec4-shape": data.shape,
         "data-likec4-shape-size": size,
-        "data-likec4-padding": padding,
+        "data-likec4-spacing": padding,
         "data-likec4-text-size": textSize,
-        "data-likec4-dimmed": isDimmed,
+        ...isDimmed !== false && {
+          "data-likec4-dimmed": isDimmed
+        },
+        style: {
+          ...style
+        },
         ...rest,
         children
       }
@@ -86,7 +97,5 @@ const ElementNodeContainer = createPolymorphicComponent(
   })
 );
 ElementNodeContainer.displayName = "ElementNodeContainer";
-export {
-  ElementNodeContainer,
-  nodeSizes
-};
+
+export { ElementNodeContainer, nodeSizes };

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

@@ -1,15 +1,118 @@
-/* empty css                                        */
-/* empty css                                        */
-/* empty css                                */
-var indicator = "_4zok2q2 _2h8g8h4";
-var fillElementFill = "_4zok2q3";
-var fillMixStroke = "_4zok2q5";
-var shapeSvgMultiple = "_4zok2q8 _4zok2q7 _2h8g8h4";
-var shapeSvg = "_4zok2q9 _4zok2q7";
-export {
-  fillElementFill,
-  fillMixStroke,
-  indicator,
-  shapeSvg,
-  shapeSvgMultiple
-};
+import { cx, css } from '@likec4/styles/css';
+
+const indicator = css({
+  _smallZoom: {
+    visibility: "hidden"
+  },
+  stroke: "likec4.palette.loContrast",
+  fill: "[none]",
+  strokeWidth: 6,
+  strokeOpacity: 0.8,
+  visibility: "hidden",
+  pointerEvents: "none",
+  _light: {
+    stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`
+  },
+  _whenFocused: {
+    strokeWidth: 12,
+    visibility: "visible"
+  },
+  _groupFocusVisible: {
+    strokeWidth: 12,
+    visibility: "visible"
+  },
+  _whenSelected: {
+    animationStyle: "indicator",
+    visibility: "visible"
+  },
+  _shapeQueue: {
+    strokeWidth: 8
+  },
+  _shapeCylinder: {
+    strokeWidth: 8
+  },
+  _shapeStorage: {
+    strokeWidth: 8
+  }
+});
+const fillElementFill = css({
+  fill: "likec4.palette.fill"
+});
+css({
+  fill: "likec4.palette.stroke"
+});
+const fillMixStroke = css({
+  fill: "[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
+  ".shape-svg-multiple &": {
+    fill: "likec4.palette.fill"
+  }
+});
+const shapeBase = css.raw({
+  top: 0,
+  left: 0,
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+  fill: "likec4.palette.fill",
+  stroke: "likec4.palette.stroke",
+  overflow: "visible"
+  // zIndex is removed to improve rendering performance
+  // this forces to keep shape in the same layer as the node
+  // zIndex: -1,
+});
+const shapeSvgMultiple = cx(
+  "shape-svg-multiple",
+  css(shapeBase, {
+    transformOrigin: {
+      base: "50% 50%",
+      _shapeQueue: "75% 25%",
+      _shapeCylinder: "50% 100%",
+      _shapeStorage: "50% 100%"
+    },
+    transform: "translate(14px, 14px) perspective(300px) translateZ(-8px)",
+    filter: "brightness(0.65) saturate(0.8)",
+    stroke: "[none]",
+    display: {
+      _smallZoom: "none",
+      _reduceGraphicsOnPan: "none",
+      _whenSelected: "none",
+      _whenFocused: "none"
+    }
+  })
+);
+const shapeSvg = css(shapeBase, {
+  transition: `fill 120ms linear, filter 130ms {easings.inOut}`,
+  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 5px 3px rgba(0, 0, 0, 0.1))
+    `,
+  _whenHovered: {
+    filter: `
+        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
+        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
+        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
+        `
+  },
+  [`:where([data-likec4-level='true']) &`]: {
+    filter: `
+        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
+        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
+        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
+        `
+  },
+  _whenSelected: {
+    filter: "none"
+  },
+  _smallZoom: {
+    filter: "none"
+  },
+  _whenPanning: {
+    transition: "none",
+    filter: "none"
+  }
+});
+
+export { fillElementFill, fillMixStroke, indicator, shapeSvg, shapeSvgMultiple };

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

@@ -1,8 +1,9 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { nonexhaustive } from "@likec4/core";
-import clsx from "clsx";
-import { toDomPrecision } from "../../../utils/xyflow.js";
-import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from "./ElementShape.css.js";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { nonexhaustive } from '@likec4/core';
+import clsx from 'clsx';
+import { toDomPrecision } from '../../../utils/xyflow.js';
+import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from './ElementShape.css.js';
+
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2);
   const rx = radius;
@@ -185,8 +186,5 @@ function SelectedIndicator({ shape, w, h }) {
   }
   return /* @__PURE__ */ jsx("g", { className: indicator, children: svg });
 }
-export {
-  ElementShape,
-  SelectedIndicator,
-  cylinderSVGPath
-};
+
+export { ElementShape, SelectedIndicator, cylinderSVGPath };

package/dist/base/primitives/element/ElementTitle.css.d.ts

@@ -1,9 +1,34 @@
-import { iconSize, paddingSize, textSize } from './vars.css';
-export declare const hasIcon: string;
-export { iconSize, paddingSize, textSize };
-export declare const title: string;
-export declare const description: string;
-export declare const technology: string;
-export declare const elementDataContainer: string;
-export declare const elementTextData: string;
+import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
+export declare const iconSize = "--icon-size";
 export declare const elementIcon: string;
+export declare const elementTitle: SlotRecipeRuntimeFn<"title" | "technology" | "description" | "root" | "textContainer", {
+    hasIcon: {
+        false: {};
+        true: {
+            root: {
+                gap: "16px";
+            };
+            textContainer: {
+                minWidth: "calc(50% + var(--icon-size))";
+                alignItems: "flex-start";
+            };
+            title: {
+                textAlign: "left";
+            };
+            description: {
+                textAlign: "left";
+            };
+            technology: {
+                textAlign: "left";
+            };
+        };
+    };
+    hasDescription: {
+        false: {};
+        true: {};
+    };
+    hasTechnology: {
+        false: {};
+        true: {};
+    };
+}>;

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

@@ -1,20 +1,195 @@
-import "./vars.css.ts.vanilla.css.js";
-/* empty css                                */
-var hasIcon = "fo05290";
-var iconSize = "var(--likec4-icon-size)";
-var title = "fo05292";
-var description = "fo05293";
-var technology = "fo05294";
-var elementDataContainer = "fo05295";
-var elementTextData = "fo05296";
-var elementIcon = "fo05297";
-export {
-  description,
-  elementDataContainer,
-  elementIcon,
-  elementTextData,
-  hasIcon,
-  iconSize,
-  technology,
-  title
-};
+import { sva, css } from '@likec4/styles/css';
+
+const iconSize = "--icon-size";
+const title = css.raw({
+  textStyle: "likec4.node.primary",
+  flex: "0 0 auto",
+  textAlign: "center",
+  color: "likec4.palette.hiContrast"
+});
+const description = css.raw({
+  flex: "0 1 auto",
+  textStyle: "likec4.node.secondary",
+  color: "likec4.palette.loContrast",
+  textAlign: "center",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  _shapeSizeXs: {
+    display: "none"
+  },
+  _smallZoom: {
+    visibility: "hidden"
+  }
+});
+const technology = css.raw({
+  flex: "0 0 auto",
+  textStyle: "likec4.node.secondary",
+  color: "likec4.palette.loContrast",
+  fontSize: `calc(var(--likec4-text-size) * 0.635)`,
+  lineHeight: 1.125,
+  textAlign: "center",
+  textWrap: "balance",
+  opacity: 0.92,
+  _whenHovered: {
+    opacity: 1
+  },
+  _shapeSizeXs: {
+    display: "none"
+  },
+  _shapeSizeSm: {
+    display: "none"
+  },
+  _smallZoom: {
+    visibility: "hidden"
+  }
+});
+const varIconSize = `var(${iconSize})`;
+const elementIcon = css({
+  flex: `0 0 ${varIconSize}`,
+  height: varIconSize,
+  width: varIconSize,
+  display: "flex",
+  alignSelf: "flex-start",
+  alignItems: "center",
+  justifyContent: "center",
+  mixBlendMode: {
+    base: "hard-light",
+    _reduceGraphicsOnPan: "normal"
+  },
+  [`& svg, & img`]: {
+    width: "100%",
+    height: "auto",
+    maxHeight: "100%",
+    pointerEvents: "none",
+    filter: {
+      base: [
+        "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
+        "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
+        "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
+      ],
+      _reduceGraphicsOnPan: "none"
+    }
+  },
+  [`& img`]: {
+    objectFit: "contain"
+  }
+});
+const elementTitle = sva({
+  slots: ["root", "textContainer", "title", "description", "technology"],
+  base: {
+    root: {
+      position: "relative",
+      flex: "1",
+      height: "fit-content",
+      width: "fit-content",
+      margin: "0 auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexDirection: "row",
+      paddingTop: "var(--likec4-spacing)",
+      paddingBottom: "var(--likec4-spacing)",
+      paddingLeft: "calc(var(--likec4-spacing) + 8px)",
+      paddingRight: "calc(var(--likec4-spacing) + 8px)",
+      overflow: "hidden",
+      gap: "12px",
+      _shapeQueue: {
+        paddingLeft: "46px",
+        paddingRight: "16px"
+      },
+      _shapeMobile: {
+        paddingLeft: "46px",
+        paddingRight: "16px"
+      },
+      _shapeCylinder: {
+        paddingTop: "30px"
+      },
+      _shapeStorage: {
+        paddingTop: "30px"
+      },
+      _shapeBrowser: {
+        paddingTop: "32px",
+        paddingBottom: "28px"
+      },
+      _shapeSizeXs: {
+        [iconSize]: "24px"
+      },
+      _shapeSizeSm: {
+        [iconSize]: "36px"
+      },
+      _shapeSizeMd: {
+        [iconSize]: "60px"
+      },
+      _shapeSizeLg: {
+        [iconSize]: "82px",
+        gap: "16px"
+      },
+      _shapeSizeXl: {
+        [iconSize]: "90px",
+        gap: "16px"
+      }
+    },
+    textContainer: {
+      height: "fit-content",
+      width: "fit-content",
+      flex: "0 1 auto",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "center",
+      flexWrap: "nowrap",
+      overflow: "hidden",
+      gap: "8px"
+    },
+    title,
+    description,
+    technology
+  },
+  variants: {
+    hasIcon: {
+      false: {},
+      true: {
+        root: {
+          gap: "16px"
+        },
+        textContainer: {
+          minWidth: `calc(50% + ${varIconSize})`,
+          alignItems: "flex-start"
+        },
+        title: {
+          textAlign: "left"
+        },
+        description: {
+          textAlign: "left"
+        },
+        technology: {
+          textAlign: "left"
+        }
+      }
+    },
+    hasDescription: {
+      false: {},
+      true: {}
+    },
+    hasTechnology: {
+      false: {},
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      hasDescription: true,
+      hasTechnology: true,
+      css: {
+        textContainer: {
+          gap: "6px"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    hasIcon: false
+  }
+});
+
+export { elementIcon, elementTitle, iconSize };

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

@@ -1,15 +1,13 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "@likec4/core";
-import { Box, Text } from "@mantine/core";
-import clsx from "clsx";
-import { isNumber, isTruthy } from "remeda";
-import { IconRenderer } from "../../../context/IconRenderer.js";
-import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
-import { getVarName } from "../../../utils/css.js";
-import { nodeSizes } from "./ElementNodeContainer.js";
-import { title, technology, description, elementTextData, elementDataContainer, hasIcon, elementIcon, iconSize } from "./ElementTitle.css.js";
-const varIconSize = getVarName(iconSize);
-function ElementTitle({ id, data, iconSize: iconSize2 }) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@likec4/core';
+import { cx } from '@likec4/styles/css';
+import { Box, Text } from '@mantine/core';
+import { isTruthy, isEmpty, isNumber } from 'remeda';
+import { IconRenderer } from '../../../context/IconRenderer.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({
     element: {
       id,
@@ -18,30 +16,34 @@ function ElementTitle({ id, data, iconSize: iconSize2 }) {
     },
     className: elementIcon
   });
+  const classes = elementTitle({
+    hasIcon: isTruthy(elementIcon$1),
+    hasDescription: !isEmpty(data.description ?? ""),
+    hasTechnology: !isEmpty(data.technology ?? "")
+  });
   const size = nodeSizes(data.style).size;
   const isSm = size === "sm";
   const isSmOrXs = isSm || size === "xs";
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: clsx(
-        elementDataContainer,
-        isTruthy(elementIcon$1) && hasIcon,
+      className: cx(
+        classes.root,
         "likec4-element"
       ),
       style: {
-        ...isNumber(iconSize2) && {
-          [varIconSize]: `${iconSize2}px`
+        ...isNumber(iconSize$1) && {
+          [iconSize]: `${iconSize$1}px`
         }
       },
       children: [
         elementIcon$1,
-        /* @__PURE__ */ jsxs(Box, { className: clsx(elementTextData, "likec4-element-main-props"), children: [
+        /* @__PURE__ */ jsxs(Box, { className: cx(classes.textContainer, "likec4-element-main-props"), children: [
           /* @__PURE__ */ jsx(
             Text,
             {
               component: "h3",
-              className: clsx(title, "likec4-element-title"),
+              className: cx(classes.title, "likec4-element-title"),
               lineClamp: isSmOrXs ? 2 : 3,
               children: data.title
             }
@@ -50,7 +52,7 @@ function ElementTitle({ id, data, iconSize: iconSize2 }) {
             Text,
             {
               component: "div",
-              className: clsx(technology, hiddenIfZoomTooSmall, "likec4-element-technology"),
+              className: cx(classes.technology, "likec4-element-technology"),
               children: data.technology
             }
           ),
@@ -58,7 +60,7 @@ function ElementTitle({ id, data, iconSize: iconSize2 }) {
             Text,
             {
               component: "div",
-              className: clsx(description, "likec4-element-description"),
+              className: cx(classes.description, "likec4-element-description"),
               lineClamp: isSmOrXs ? 3 : 5,
               children: data.description
             }
@@ -68,6 +70,5 @@ function ElementTitle({ id, data, iconSize: iconSize2 }) {
     }
   );
 }
-export {
-  ElementTitle
-};
+
+export { ElementTitle };

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

@@ -7,6 +7,7 @@ export { customNode } from './customNode';
 export { EdgeActionButton } from './edge/EdgeActionButton';
 export { EdgeContainer } from './edge/EdgeContainer';
 export { EdgeLabel } from './edge/EdgeLabel';
+export { EdgeLabelContainer } from './edge/EdgeLabelContainer';
 export { arrowTypeToMarker, EdgeMarkers, type EdgeMarkerType } from './edge/EdgeMarkers';
 export { EdgePath } from './edge/EdgePath';
 export { ElementActionButtons } from './element/ElementActionButtons';

package/dist/base/types.js

@@ -1,4 +1,5 @@
-import { hasSubObject } from "remeda";
+import { hasSubObject } from 'remeda';
+
 var Base;
 ((Base2) => {
   const _setDimmed = (v, dimmed) => v.data.dimmed === dimmed ? v : {
@@ -49,6 +50,5 @@ var Base;
   }
   Base2.setData = setData;
 })(Base || (Base = {}));
-export {
-  Base
-};
+
+export { Base };

package/dist/base/updateEdges.js

@@ -1,5 +1,6 @@
-import { deepEqual } from "fast-equals";
-import { isDefined, omit } from "remeda";
+import { deepEqual } from 'fast-equals';
+import { isDefined, omit } from 'remeda';
+
 function _update(current, update) {
   return update.map((next) => {
     const existing = current.find((n) => n.id === next.id);
@@ -26,6 +27,5 @@ function updateEdges(current, update) {
   update = current;
   return (current2) => _update(current2, update);
 }
-export {
-  updateEdges
-};
+
+export { updateEdges };

package/dist/base/updateNodes.js

@@ -1,6 +1,7 @@
-import { getNodeDimensions } from "@xyflow/system";
-import { deepEqual } from "fast-equals";
-import { isDefined, omit } from "remeda";
+import { getNodeDimensions } from '@xyflow/system';
+import { deepEqual } from 'fast-equals';
+import { isDefined, omit } from 'remeda';
+
 function _update(current, updated) {
   return updated.map((update) => {
     const existing = current.find((n) => n.id === update.id);
@@ -31,6 +32,5 @@ function updateNodes(current, update) {
   update = current;
   return (current2) => _update(current2, update);
 }
-export {
-  updateNodes
-};
+
+export { updateNodes };

package/dist/bundle/LikeC4ModelProvider.d.ts

@@ -0,0 +1,9 @@
+import { JSX, PropsWithChildren } from 'react';
+export type LikeC4ModelProviderProps = PropsWithChildren<{
+    /**
+     * The LikeC4 model to be provided to the context.
+     * TODO: refer to 'likec4/model'
+     */
+    likec4model: any;
+}>;
+export declare const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX.Element;

package/dist/bundle/LikeC4ModelProvider.js

@@ -0,0 +1,5 @@
+import { LikeC4ModelProvider as LikeC4ModelProvider$1 } from '../LikeC4ModelProvider.js';
+
+const LikeC4ModelProvider = LikeC4ModelProvider$1;
+
+export { LikeC4ModelProvider };