@likec4/styles 1.36.1 → 1.37.0

package/preset.mjs

@@ -1,4 +1,4 @@
-import { definePreset, defineSlotRecipe, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles } from '@pandacss/dev';
+import { definePreset, defineSlotRecipe, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles, defineParts } from '@pandacss/dev';
 
 const grayDark = {
     gray1: "#111111",
@@ -3966,7 +3966,7 @@ const radixColors = [
   "grass",
   "lime"
 ];
-const iconSize = "--likec4-icon-size";
+const iconSize$1 = "--likec4-icon-size";
 const breakpoints = {
   xs: "36em",
   sm: "48em",
@@ -4758,7 +4758,7 @@ const conditions = {
     reduceGraphicsOnPan: [
       `${root}:is(`,
       "[data-likec4-reduced-graphics]",
-      "[data-likec4-diagram-panning]",
+      '[data-likec4-diagram-panning="true"]',
       ") &"
     ].join(""),
     noReduceGraphics: [
@@ -4766,13 +4766,13 @@ const conditions = {
       "[data-likec4-reduced-graphics]",
       ") &"
     ].join(""),
-    whenPanning: `:is(${root}[data-likec4-diagram-panning]) &`,
-    smallZoom: ":where([data-likec4-zoom-small]) &",
+    whenPanning: `${root}:is([data-likec4-diagram-panning="true"]) &`,
+    smallZoom: ':where([data-likec4-zoom-small="true"]) &',
     compoundTransparent: ":where([data-compound-transparent]) &",
     edgeActive: ':where([data-likec4-edge-active="true"]) &',
-    whenHovered: ':where([data-likec4-hovered="true"]) &',
+    whenHovered: ':where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) &',
     whenSelected: ":where(.react-flow__node.selected, .react-flow__edge.selected) &",
-    whenDimmed: ":where([data-likec4-dimmed]) &",
+    whenDimmed: ":where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &",
     whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &"
     // likec4Color: ':where([data-likec4-color]) &',
   }
@@ -4797,6 +4797,7 @@ const globalCss = {
 const globalVars = {
   extend: {
     ...paletteGlobalVars,
+    "--likec4-palette-outline": "var(--likec4-palette-loContrast)",
     "--likec4-text-size": {
       syntax: "<length> | <percentage>",
       inherits: false
@@ -4809,7 +4810,7 @@ const globalVars = {
       syntax: "<length> | <percentage>",
       inherits: false
     },
-    [iconSize]: {
+    [iconSize$1]: {
       syntax: "<length> | <percentage>",
       inherits: false
     }
@@ -4837,7 +4838,7 @@ const layerStyles = defineLayerStyles({
         borderRadius: "0",
         backgroundColor: {
           base: "likec4.panel.bg",
-          _whenPanning: "likec4.panel.bg.whenPanning"
+          _reduceGraphicsOnPan: "likec4.panel.bg.whenPanning"
         },
         border: "1px solid {colors.likec4.panel.border}",
         "@/sm": {
@@ -4856,8 +4857,7 @@ const layerStyles = defineLayerStyles({
     dropdown: {
       description: "LikeC4 dropdown layer",
       value: {
-        paddingInline: "2xs",
-        paddingBlock: "2xs",
+        padding: "xxs",
         backgroundColor: "likec4.dropdown.bg",
         border: "1px solid {colors.likec4.dropdown.border}",
         boxShadow: "lg",
@@ -4883,6 +4883,9 @@ const patterns = {
       defaultValues: {
         gap: "sm"
       }
+    },
+    box: {
+      jsx: ["Box", "MarkdownBlock"]
     }
   }
 };
@@ -4960,6 +4963,260 @@ const actionBtn = defineRecipe({
     conditions: ["*"]
   }]
 });
+const borderWidth = {
+  var: "--_border-width",
+  ref: "var(--_border-width)"
+};
+const borderRadius = {
+  var: "--_border-radius",
+  ref: "var(--_border-radius)"
+};
+const compoundTransparency = {
+  var: "--_compound-transparency",
+  ref: "var(--_compound-transparency)"
+};
+const borderTransparency = {
+  var: "--_border-transparency",
+  ref: "var(--_border-transparency)"
+};
+const indicatorSpacing = {
+  var: "--_indicator-spacing",
+  ref: "var(--_indicator-spacing)"
+};
+const compoundColor = {
+  var: "--_compound-color",
+  ref: "var(--_compound-color)"
+};
+const parts$1 = defineParts({
+  root: { selector: "&" },
+  titleContainer: { selector: "& .likec4-compound-title-container" },
+  title: { selector: "& .likec4-compound-title" },
+  icon: { selector: "& .likec4-compound-icon" },
+  navigationBtn: { selector: "& .likec4-compound-navigation" },
+  detailsBtn: { selector: "& .likec4-compound-details" },
+  actionBtn: { selector: "& .action-btn" }
+});
+const iconSize = "20px";
+const compoundNode = defineRecipe({
+  className: "likec4-compound-node",
+  base: parts$1({
+    root: {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      padding: "0",
+      margin: "0",
+      pointerEvents: "none",
+      backgroundClip: "padding-box",
+      borderStyle: "solid",
+      borderWidth: borderWidth.ref,
+      borderRadius: borderRadius.ref,
+      boxSizing: "border-box",
+      ["--likec4-palette-outline"]: {
+        _light: "color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))",
+        _dark: "color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))"
+      },
+      [borderWidth.var]: "3px",
+      [borderRadius.var]: "6px",
+      [compoundTransparency.var]: "100%",
+      [borderTransparency.var]: "100%",
+      [indicatorSpacing.var]: `calc(${borderWidth.ref} + 2px)`,
+      [compoundColor.var]: "var(--likec4-palette-loContrast)",
+      color: compoundColor.ref,
+      _after: {
+        position: "absolute",
+        content: '" "',
+        top: `[calc(-1 * ${indicatorSpacing.ref})]`,
+        left: `[calc(-1 * ${indicatorSpacing.ref})]`,
+        width: `[calc(100% + 2 * ${indicatorSpacing.ref})]`,
+        height: `[calc(100% + 2 * ${indicatorSpacing.ref})]`,
+        borderStyle: "solid",
+        borderWidth: `calc(${borderWidth.ref} + 1px)`,
+        borderRadius: `calc(${borderRadius.ref} + 4px)`,
+        borderColor: "var(--likec4-palette-outline)",
+        pointerEvents: "none",
+        display: {
+          base: "none",
+          _whenFocused: "block",
+          _whenSelected: "block"
+        },
+        animationStyle: "indicatorOpacity",
+        animationPlayState: {
+          base: "paused",
+          _whenFocused: "running",
+          _whenSelected: "running",
+          _whenPanning: "paused"
+        }
+      },
+      [`&:has(.likec4-compound-navigation) .likec4-compound-title-container`]: {
+        paddingLeft: "[24px]"
+      }
+    },
+    titleContainer: {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      gap: "1.5",
+      // 6px
+      left: "2.5",
+      top: "0.5",
+      right: "[30px]",
+      width: "auto",
+      minHeight: "30px",
+      [`:where(.react-flow__node.draggable) &`]: {
+        pointerEvents: "all",
+        cursor: "grab"
+      }
+    },
+    title: {
+      flex: "1",
+      fontFamily: "likec4.compound",
+      fontWeight: 600,
+      fontSize: "15px",
+      textTransform: "uppercase",
+      letterSpacing: "0.25px",
+      lineHeight: "1",
+      color: compoundColor.ref
+    },
+    icon: {
+      flex: `0 0 ${iconSize}`,
+      height: `${iconSize}`,
+      width: `${iconSize}`,
+      display: "flex",
+      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%))"
+          ].join("\n"),
+          _reduceGraphicsOnPan: "none"
+        }
+      },
+      [`& img`]: {
+        objectFit: "contain"
+      }
+    },
+    actionBtn: {
+      "--actionbtn-color": compoundColor.ref,
+      "--actionbtn-color-hovered": compoundColor.ref,
+      "--actionbtn-color-hovered-btn": `color-mix(in srgb, ${compoundColor.ref} 80%, #fff)`,
+      opacity: {
+        base: 0.6,
+        _whenHovered: 0.75,
+        _whenSelected: 0.75,
+        _hover: 1
+      },
+      _noReduceGraphics: {
+        transition: "fast"
+      }
+    },
+    navigationBtn: {
+      position: "absolute",
+      top: "1",
+      left: "0.5",
+      _smallZoom: {
+        display: "none"
+      }
+    },
+    detailsBtn: {
+      position: "absolute",
+      top: "0.5",
+      right: "0.5",
+      _smallZoom: {
+        display: "none"
+      }
+    }
+  }),
+  variants: {
+    isTransparent: {
+      false: parts$1({
+        root: {
+          boxShadow: {
+            _noReduceGraphics: "0 4px 10px 0.5px rgb(0 0 0/10%) , 0 2px 2px -1px rgb(0 0 0/40%)",
+            _whenSelected: "none",
+            _whenPanning: "none !important"
+          },
+          backgroundColor: "var(--likec4-palette-fill)",
+          borderColor: "var(--likec4-palette-stroke)"
+        }
+      }),
+      true: parts$1({
+        root: {
+          backgroundColor: `[color-mix(in srgb, var(--likec4-palette-fill) ${compoundTransparency.ref}, transparent)]`,
+          borderColor: `[color-mix(in srgb, var(--likec4-palette-stroke) ${borderTransparency.ref}, transparent)]`
+        }
+      })
+    },
+    // When the compound node is too transparent, the text color should be inverted
+    inverseColor: {
+      true: parts$1({
+        root: {
+          [compoundColor.var]: {
+            base: "var(--likec4-palette-stroke)",
+            _dark: "[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]"
+          }
+        },
+        actionBtn: {
+          _dark: {
+            "--actionbtn-color-hovered-btn": "var(--likec4-palette-loContrast)"
+          },
+          _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)`
+          }
+        }
+      }),
+      false: {}
+    },
+    borderStyle: {
+      solid: parts$1({
+        root: {
+          borderStyle: "solid"
+        }
+      }),
+      dashed: parts$1({
+        root: {
+          borderStyle: "dashed"
+        }
+      }),
+      dotted: parts$1({
+        root: {
+          borderStyle: "dotted"
+        }
+      }),
+      none: parts$1({
+        root: {
+          // We still need to have a border for consistent internal coordinates
+          // So we use a transparent border and extend background
+          borderColor: "transparent!",
+          backgroundClip: "border-box!",
+          [indicatorSpacing.var]: `calc(${borderWidth.ref} * 2)`
+        }
+      })
+    }
+  },
+  staticCss: [
+    {
+      isTransparent: ["*"],
+      inverseColor: ["*"],
+      borderStyle: ["*"]
+    }
+  ]
+});
 const edgeActionBtn = defineRecipe({
   className: "likec4-edge-action-btn",
   description: "Action Button within Diagram Edge Label",
@@ -5000,7 +5257,7 @@ const edgeActionBtn = defineRecipe({
     conditions: ["*"]
   }]
 });
-const varIconSize = `var(${iconSize})`;
+const varIconSize = `var(${iconSize$1})`;
 const elementNodeIcon = defineRecipe({
   className: "likec4-element-node-icon",
   description: "Element Icon displayed in diagram nodes",
@@ -5038,6 +5295,174 @@ const elementNodeIcon = defineRecipe({
     conditions: ["*"]
   }]
 });
+const parts = defineParts({
+  root: { selector: "&" },
+  outline: { selector: "& .likec4-shape-outline" },
+  multipleHtml: { selector: "& .likec4-shape-multiple" },
+  multipleSvg: { selector: '&:is([data-likec4-shape-multiple="true"])' }
+});
+const elementShapeRecipe = defineRecipe({
+  description: "Recipe for Diagram node shape",
+  className: "likec4-element-shape",
+  base: parts({
+    root: {
+      top: "0",
+      left: "0",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      overflow: "visible",
+      ["--likec4-palette-outline"]: {
+        _light: "color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))",
+        _dark: "color-mix(in srgb, var(--likec4-palette-stroke) 30%, var(--likec4-palette-loContrast))"
+      }
+    },
+    outline: {
+      visibility: {
+        base: "hidden",
+        _smallZoom: "hidden",
+        _whenSelected: "visible",
+        _whenFocused: "visible",
+        _groupFocusVisible: "visible"
+      },
+      animationPlayState: {
+        base: "paused",
+        _whenSelected: "running",
+        _whenFocused: "running",
+        _groupFocusVisible: "running",
+        _whenPanning: "paused"
+      },
+      pointerEvents: "none"
+    }
+  }),
+  variants: {
+    shapetype: {
+      html: parts({
+        root: {
+          backgroundColor: "var(--likec4-palette-fill)",
+          borderRadius: "[6px]",
+          boxShadow: {
+            base: [
+              "0 2px 1px 0 rgb(0 0 0 / 21%)",
+              "0 1px 1px 0 color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent)",
+              "0 5px 3px 0 rgb(0 0 0 / 10%)"
+            ].join(","),
+            _whenHovered: [
+              "0 2px 1px 0 rgb(0 0 0 / 25%)",
+              "0 8px 3px 0 rgb(0 0 0 / 10%)",
+              "0 10px 10px 0 rgb(0 0 0 / 8%)"
+            ].join(","),
+            _whenSelected: "none",
+            _smallZoom: "none",
+            _whenPanning: "none"
+          },
+          transition: {
+            base: "background-color 120ms linear, box-shadow 130ms {easings.inOut}",
+            _reduceGraphicsOnPan: "none"
+          },
+          transitionDelay: "0ms",
+          ["--likec4-outline-size"]: `4px`
+        },
+        multipleHtml: {
+          position: "absolute",
+          content: '" "',
+          top: "[14px]",
+          left: "[14px]",
+          width: "[calc(100% - 6px)]",
+          height: "[calc(100% - 6px)]",
+          backgroundColor: "var(--likec4-palette-fill)",
+          borderRadius: "[6px]",
+          zIndex: -1,
+          filter: "brightness(0.65)",
+          visibility: {
+            base: "visible",
+            _smallZoom: "hidden",
+            _whenSelected: "hidden",
+            _whenFocused: "hidden",
+            _reduceGraphicsOnPan: "hidden"
+          }
+        },
+        outline: {
+          position: "absolute",
+          content: '" "',
+          top: `[calc(-1 * var(--likec4-outline-size))]`,
+          left: `[calc(-1 * var(--likec4-outline-size))]`,
+          width: `[calc(100% + 2 * var(--likec4-outline-size))]`,
+          height: `[calc(100% + 2 * var(--likec4-outline-size))]`,
+          borderStyle: "solid",
+          borderWidth: "var(--likec4-outline-size)",
+          borderRadius: "[10px]",
+          borderColor: "var(--likec4-palette-outline)",
+          animationStyle: "indicatorOpacity"
+        }
+      }),
+      svg: parts({
+        root: {
+          fill: "var(--likec4-palette-fill)",
+          stroke: "var(--likec4-palette-stroke)",
+          transition: `fill 120ms linear, filter 130ms {easings.inOut}`,
+          transitionDelay: "0ms",
+          filter: {
+            base: [
+              "drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))",
+              "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))"
+            ].join("\n"),
+            _whenHovered: [
+              "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))"
+            ].join("\n"),
+            _whenSelected: "none",
+            _smallZoom: "none",
+            _whenPanning: "none"
+          },
+          '& [data-likec4-fill="fill"]': {
+            fill: "var(--likec4-palette-fill)"
+          },
+          '& [data-likec4-fill="stroke"]': {
+            fill: "var(--likec4-palette-stroke)"
+          },
+          '& [data-likec4-fill="mix-stroke"]': {
+            fill: "[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]"
+          }
+        },
+        multipleSvg: {
+          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)",
+          stroke: "[none]",
+          display: {
+            _smallZoom: "none",
+            _reduceGraphicsOnPan: "none",
+            _whenSelected: "none",
+            _whenFocused: "none"
+          },
+          '& [data-likec4-fill="mix-stroke"]': {
+            fill: "var(--likec4-palette-fill)"
+          }
+        },
+        outline: {
+          stroke: "var(--likec4-palette-outline)",
+          fill: "[none]",
+          strokeWidth: 8,
+          strokeOpacity: 0.8,
+          animationStyle: "indicator"
+        }
+      })
+    }
+  },
+  staticCss: [{
+    shapetype: ["*"],
+    conditions: ["*"]
+  }]
+});
 const likec4tag = defineRecipe({
   className: "likec4-tag",
   base: {
@@ -5092,14 +5517,21 @@ const markdownBlock = defineRecipe({
   jsx: ["MarkdownBlock"],
   description: "Block with Markdown content",
   base: {
-    pointerEvents: "all",
     "--text-fz": "1rem",
-    "--typography-spacing": "calc(0.75 * var(--text-fz) * var(--mantine-scale, 1))",
     "--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale, 1) / 1.125)",
     "--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale, 1))",
+    "--typography-spacing": "calc(0.75 * var(--text-fz-md))",
     "--text-fw-headings": "600",
-    paddingBottom: "calc(.5 * var(--typography-spacing) + 1px)",
+    "--code-background": {
+      _light: "var(--mantine-color-gray-2)",
+      _dark: "var(--mantine-color-dark-8)"
+    },
+    "--code-color": {
+      _light: "var(--mantine-color-black)",
+      _dark: "var(--mantine-color-white)"
+    },
     fontSize: "var(--text-fz-md)",
+    lineHeight: "var(--mantine-line-height)",
     "& :first-child": {
       marginTop: "0"
     },
@@ -5116,31 +5548,31 @@ const markdownBlock = defineRecipe({
       marginTop: "var(--typography-spacing)"
     },
     "& :is(h1)": {
-      fontSize: "calc(1.476 * var(--text-fz) * var(--mantine-scale, 1))",
+      fontSize: "calc(1.476 * var(--text-fz-md))",
       fontWeight: "var(--text-fw-headings)"
     },
     "& :is(h2)": {
-      fontSize: "calc(1.383 * var(--text-fz) * var(--mantine-scale, 1))",
+      fontSize: "calc(1.383 * var(--text-fz-md))",
       // lineHeight: 'var(--mantine-h2-line-height)',
       fontWeight: "var(--text-fw-headings)"
     },
     "& :is(h3)": {
-      fontSize: "calc(1.296 * var(--text-fz) * var(--mantine-scale, 1))",
+      fontSize: "calc(1.296 * var(--text-fz-md))",
       // lineHeight: 'var(--mantine-h3-line-height)',
       fontWeight: "var(--text-fw-headings)"
     },
     "& :is(h4)": {
-      fontSize: "calc(1.215 * var(--text-fz) * var(--mantine-scale, 1))",
+      fontSize: "calc(1.215 * var(--text-fz-md))",
       // lineHeight: 'var(--mantine-h4-line-height)',
       fontWeight: "var(--text-fw-headings)"
     },
     "& :is(h5)": {
-      fontSize: "calc(1.138 * var(--text-fz) * var(--mantine-scale, 1))",
+      fontSize: "calc(1.138 * var(--text-fz-md))",
       // lineHeight: 'var(--mantine-h4-line-height)',
       fontWeight: "var(--text-fw-headings)"
     },
     "& :is(h6)": {
-      fontSize: "calc(1.067 * var(--text-fz) * var(--mantine-scale, 1))",
+      fontSize: "calc(1.067 * var(--text-fz-md))",
       // lineHeight: 'var(--mantine-h4-line-height)',
       fontWeight: "var(--text-fw-headings)"
     },
@@ -5151,8 +5583,7 @@ const markdownBlock = defineRecipe({
     "& :where(p)": {
       fontSize: "var(--text-fz-md)",
       marginTop: "0",
-      marginBottom: "var(--typography-spacing)",
-      whiteSpace: "preserve-breaks"
+      marginBottom: "var(--typography-spacing)"
     },
     "& :where(strong)": {
       fontWeight: "500"
@@ -5178,54 +5609,44 @@ const markdownBlock = defineRecipe({
       }
     },
     "& :where(hr)": {
-      margin: "var(--typography-spacing)",
+      marginTop: "calc(var(--typography-spacing) / 2)",
+      marginBottom: "calc(var(--typography-spacing) / 2)",
       border: "none",
       borderBottom: "1px solid",
-      _light: {
-        borderColor: "mantine.colors.gray[3]"
-      },
-      _dark: {
-        borderColor: "mantine.colors.dark[3]"
+      borderColor: {
+        _light: "mantine.colors.gray[3]",
+        _dark: "mantine.colors.dark[3]"
       }
     },
     "& :where(pre)": {
-      padding: "var(--mantine-spacing-xs)",
-      lineHeight: "var(--mantine-line-height)",
+      px: "3",
+      py: "2",
+      lineHeight: "var(--mantine-line-height-xs)",
       margin: "0",
-      marginTop: "var(--mantine-spacing-md)",
-      marginBottom: "var(--mantine-spacing-md)",
+      marginTop: "var(--typography-spacing)",
+      marginBottom: "var(--typography-spacing)",
       overflowX: "auto",
       fontFamily: "var(--mantine-font-family-monospace)",
       fontSize: "var(--text-fz-sm)",
-      borderRadius: "var(--mantine-radius-xs)",
-      _light: {
-        backgroundColor: "mantine.colors.gray[0]"
-      },
-      _dark: {
-        backgroundColor: "mantine.colors.dark[8]"
-      },
-      "& :where(code)": {
-        backgroundColor: "transparent",
-        padding: "0",
-        borderRadius: "0",
-        color: "inherit",
-        border: "0"
-      }
+      borderRadius: "sm",
+      backgroundColor: "var(--code-background)",
+      color: "var(--code-color)"
     },
     "& :where(code)": {
       lineHeight: "1",
       padding: "1px 4px",
-      borderRadius: "2px",
+      borderRadius: "xs",
       fontFamily: "var(--mantine-font-family-monospace)",
       fontSize: "var(--text-fz-sm)",
-      _light: {
-        backgroundColor: "mantine.colors.gray[0]",
-        color: "mantine.colors.black"
-      },
-      _dark: {
-        backgroundColor: "mantine.colors.dark[5]",
-        color: "mantine.colors.white"
-      }
+      backgroundColor: "var(--code-background)",
+      color: "var(--code-color)"
+    },
+    "& :where(pre code)": {
+      backgroundColor: "transparent",
+      padding: "0",
+      borderRadius: "0",
+      color: "inherit",
+      border: "0"
     },
     '& :where(ul, ol):not([data-type="taskList"])': {
       marginBottom: "var(--typography-spacing)",
@@ -5236,7 +5657,7 @@ const markdownBlock = defineRecipe({
       width: "100%",
       borderCollapse: "collapse",
       captionSide: "bottom",
-      marginBottom: "var(--mantine-spacing-md)",
+      marginBottom: "var(--typography-spacing)",
       _light: {
         ["--table-border-color"]: "var(--mantine-color-gray-3)"
       },
@@ -5244,7 +5665,7 @@ const markdownBlock = defineRecipe({
         ["--table-border-color"]: "var(--mantine-color-dark-4)"
       },
       "& :where(caption)": {
-        marginTop: "var(--mantine-spacing-xs)",
+        marginTop: "calc(.5 * var(--typography-spacing) + 1px)",
         fontSize: "var(--text-fz-sm)",
         color: "var(--mantine-color-dimmed)"
       },
@@ -5252,7 +5673,7 @@ const markdownBlock = defineRecipe({
         textAlign: "left",
         fontWeight: "bold",
         fontSize: "var(--text-fz-sm)",
-        padding: "var(--mantine-spacing-xs) var(--mantine-spacing-xs)"
+        padding: "var(--typography-spacing)"
       },
       "& :where(thead th)": {
         borderBottom: "1px solid",
@@ -5263,7 +5684,7 @@ const markdownBlock = defineRecipe({
         borderColor: "var(--table-border-color)"
       },
       "& :where(td)": {
-        padding: "var(--mantine-spacing-xs) var(--mantine-spacing-xs)",
+        padding: "var(--typography-spacing)",
         borderBottom: "1px solid",
         borderColor: "var(--table-border-color)",
         fontSize: "var(--text-fz-sm)"
@@ -5274,15 +5695,12 @@ const markdownBlock = defineRecipe({
     },
     "& :where(blockquote)": {
       fontSize: "var(--text-fz-md)",
-      lineHeight: "var(--mantine-line-height)",
       margin: "0",
       borderRadius: "var(--mantine-radius-sm)",
       padding: "xs",
-      _light: {
-        backgroundColor: "mantine.colors.gray[1]"
-      },
-      _dark: {
-        backgroundColor: "mantine.colors.dark[5]"
+      backgroundColor: {
+        _light: "var(--mantine-color-gray-1)",
+        _dark: "var(--mantine-color-dark-5)"
       },
       "&:not(:first-child)": {
         marginTop: "var(--typography-spacing)"
@@ -5295,22 +5713,22 @@ const markdownBlock = defineRecipe({
      */
     uselikec4palette: {
       true: {
-        "--typography-spacing": "calc(0.25rem * var(--mantine-scale, 1))",
+        "--code-background": "color-mix(in srgb , var(--likec4-palette-stroke) 70%, transparent)",
+        "--code-color": "var(--likec4-palette-loContrast)",
+        "--typography-spacing": "calc(0.5 * var(--text-fz-md))",
         "& :where(a)": {
           color: "var(--likec4-palette-fill)/45",
           mixBlendMode: "difference"
         },
-        "& :where(code)": {
-          borderColor: "var(--likec4-palette-stroke)/85",
-          color: "var(--likec4-palette-loContrast)",
-          backgroundColor: "var(--likec4-palette-stroke)/70"
-        },
         "& :where(strong)": {
           color: `color-mix(in srgb , var(--likec4-palette-hiContrast) 50%,  var(--likec4-palette-loContrast))`
         },
         "& :where(blockquote)": {
-          padding: "2xs",
+          padding: "xxs",
           backgroundColor: "var(--likec4-palette-stroke)/65"
+        },
+        "& :where(hr)": {
+          borderColor: "var(--likec4-palette-stroke)/85"
         }
       },
       false: {}
@@ -5371,8 +5789,10 @@ const navigationPanelActionIcon = defineRecipe({
 const recipes = {
   __proto__: null,
   actionBtn,
+  compoundNode,
   edgeActionBtn,
   elementNodeIcon,
+  elementShapeRecipe,
   likec4tag,
   markdownBlock,
   navigationPanelActionIcon
@@ -5511,7 +5931,10 @@ const edgeLabel = defineSlotRecipe({
       lineHeight: "[1.2]",
       maxWidth: "100%",
       gap: "0.5",
-      color: "var(--xy-edge-label-color)"
+      color: "var(--xy-edge-label-color)",
+      background: "var(--xy-edge-label-background-color)",
+      border: "0px solid transparent",
+      borderRadius: "4px"
     },
     stepNumber: {
       alignSelf: "stretch",
@@ -5552,6 +5975,18 @@ const edgeLabel = defineSlotRecipe({
     }
   },
   variants: {
+    cursor: {
+      pointer: {
+        root: {
+          cursor: "pointer"
+        }
+      },
+      default: {
+        root: {
+          cursor: "default"
+        }
+      }
+    },
     isStepEdge: {
       false: {},
       true: {
@@ -5577,7 +6012,8 @@ const edgeLabel = defineSlotRecipe({
     }
   },
   defaultVariants: {
-    isStepEdge: false
+    isStepEdge: false,
+    cursor: "default"
   },
   staticCss: [{
     conditions: ["*"],
@@ -5603,6 +6039,12 @@ const description = {
   },
   _smallZoom: {
     display: "none"
+  },
+  "&:not(.likec4-markdown-block)": {
+    whiteSpace: "preserve-breaks"
+  },
+  "& a": {
+    pointerEvents: "all"
   }
 };
 const technology = {
@@ -5669,20 +6111,20 @@ const elementNodeData = defineSlotRecipe({
         paddingBottom: "[28px]"
       },
       _shapeSizeXs: {
-        [iconSize]: "24px"
+        [iconSize$1]: "24px"
       },
       _shapeSizeSm: {
-        [iconSize]: "36px"
+        [iconSize$1]: "36px"
       },
       _shapeSizeMd: {
-        [iconSize]: "60px"
+        [iconSize$1]: "60px"
       },
       _shapeSizeLg: {
-        [iconSize]: "82px",
+        [iconSize$1]: "82px",
         gap: "4"
       },
       _shapeSizeXl: {
-        [iconSize]: "90px",
+        [iconSize$1]: "90px",
         gap: "4"
       }
     },
@@ -5712,7 +6154,7 @@ const elementNodeData = defineSlotRecipe({
           gap: "16px"
         },
         textContainer: {
-          minWidth: `calc(50% + var(${iconSize}))`,
+          minWidth: `calc(50% + var(${iconSize$1}))`,
           alignItems: "flex-start"
         },
         title: {
@@ -6063,19 +6505,19 @@ const tokens = defineTokens({
   shadows: {
     none: { value: "none" },
     xs: {
-      value: "0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)"
+      value: "0 1px 3px rgb(0 0 0/5%), 0 1px 2px rgb(0 0 0/10%)"
     },
     sm: {
-      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px"
+      value: "0 1px 3px rgb(0 0 0/5%), 0 10px 15px -5px rgb(0 0 0/5%), 0 7px 7px -5px rgb(0 0 0/4%)"
     },
     md: {
-      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px"
+      value: "0 1px 3px rgb(0 0 0/5%), 0 20px 25px -5px rgb(0 0 0/5%), 0 10px 10px -5px rgb(0 0 0/4%)"
     },
     lg: {
-      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px"
+      value: "0 1px 3px rgb(0 0 0/5%), 0 28px 23px -7px rgb(0 0 0/5%), 0 12px 12px -7px rgb(0 0 0/4%)"
     },
     xl: {
-      value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px"
+      value: "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)"
     }
   }
 });
@@ -6128,6 +6570,14 @@ const theme = {
     lg: "1024px"
   },
   keyframes: {
+    "indicatorOpacity": {
+      "0%": {
+        opacity: 0.9
+      },
+      "100%": {
+        opacity: 0.6
+      }
+    },
     "indicatorStrokeOpacity": {
       "0%": {
         strokeOpacity: 0.8
@@ -6154,6 +6604,14 @@ const theme = {
         animationName: "indicatorStrokeOpacity"
       }
     },
+    "indicatorOpacity": {
+      value: {
+        animationDuration: "1s",
+        animationIterationCount: "infinite",
+        animationDirection: "alternate",
+        animationName: "indicatorOpacity"
+      }
+    },
     "xyedgeAnimated": {
       value: {
         animationDuration: "800ms",