@likec4/styles 1.34.2 → 1.35.0

package/preset.mjs

@@ -1,4 +1,4 @@
-import { definePreset, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles, defineUtility } from '@pandacss/dev';
+import { definePreset, defineSlotRecipe, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles, defineUtility } from '@pandacss/dev';
 
 const grayDark = {
     gray1: "#111111",
@@ -3968,6 +3968,7 @@ const radixColors = [
   "grass",
   "lime"
 ];
+const iconSize = "--likec4-icon-size";
 const themeColors = [
   "amber",
   "blue",
@@ -4213,58 +4214,76 @@ const theme$1 = {
         colors: {
           primary: {
             DEFAULT: {
+              description: "Mantine color primaryColors",
               value: "var(--mantine-primary-color-6)"
             },
             filled: {
+              description: "Mantine color primaryColors filled",
               value: "var(--mantine-primary-color-filled)"
             },
             filledHover: {
+              description: "Mantine color primaryColors filled hover",
               value: "var(--mantine-primary-color-filled-hover)"
             },
             light: {
+              description: "Mantine color primaryColors light",
               value: "var(--mantine-primary-color-light)"
             },
             lightHover: {
+              description: "Mantine color primaryColors light hover",
               value: "var(--mantine-primary-color-light-hover)"
             },
             lightColor: {
+              description: "Mantine color primaryColors light color",
               value: "var(--mantine-primary-color-light-color)"
             },
             outline: {
+              description: "Mantine color primaryColors outline",
               value: "var(--mantine-primary-color-outline)"
             },
             outlineHover: {
+              description: "Mantine color primaryColors outline hover",
               value: "var(--mantine-primary-color-outline-hover)"
             }
           },
           "primary[0]": {
+            description: "Mantine color primaryColors.0",
             value: "var(--mantine-primary-color-0)"
           },
           "primary[1]": {
+            description: "Mantine color primaryColors.1",
             value: "var(--mantine-primary-color-1)"
           },
           "primary[2]": {
+            description: "Mantine color primaryColors.2",
             value: "var(--mantine-primary-color-2)"
           },
           "primary[3]": {
+            description: "Mantine color primaryColors.3",
             value: "var(--mantine-primary-color-3)"
           },
           "primary[4]": {
+            description: "Mantine color primaryColors.4",
             value: "var(--mantine-primary-color-4)"
           },
           "primary[5]": {
+            description: "Mantine color primaryColors.5",
             value: "var(--mantine-primary-color-5)"
           },
           "primary[6]": {
+            description: "Mantine color primaryColors.6",
             value: "var(--mantine-primary-color-6)"
           },
           "primary[7]": {
+            description: "Mantine color primaryColors.7",
             value: "var(--mantine-primary-color-7)"
           },
           "primary[8]": {
+            description: "Mantine color primaryColors.8",
             value: "var(--mantine-primary-color-8)"
           },
           "primary[9]": {
+            description: "Mantine color primaryColors.9",
             value: "var(--mantine-primary-color-9)"
           },
           white: {
@@ -4299,394 +4318,520 @@ const theme$1 = {
           },
           gray: {
             DEFAULT: {
+              description: "Mantine color gray",
               value: "var(--mantine-color-gray-6)"
             },
             filled: {
+              description: "Mantine color gray filled",
               value: "var(--mantine-color-gray-filled)"
             },
             filledHover: {
+              description: "Mantine color gray filled hover",
               value: "var(--mantine-color-gray-filled-hover)"
             },
             light: {
+              description: "Mantine color gray light",
               value: "var(--mantine-color-gray-light)"
             },
             lightHover: {
+              description: "Mantine color gray light hover",
               value: "var(--mantine-color-gray-light-hover)"
             },
             lightColor: {
+              description: "Mantine color gray light color",
               value: "var(--mantine-color-gray-light-color)"
             },
             outline: {
+              description: "Mantine color gray outline",
               value: "var(--mantine-color-gray-outline)"
             },
             outlineHover: {
+              description: "Mantine color gray outline hover",
               value: "var(--mantine-color-gray-outline-hover)"
             }
           },
           "gray[0]": {
+            description: "Mantine color gray.0",
             value: "var(--mantine-color-gray-0)"
           },
           "gray[1]": {
+            description: "Mantine color gray.1",
             value: "var(--mantine-color-gray-1)"
           },
           "gray[2]": {
+            description: "Mantine color gray.2",
             value: "var(--mantine-color-gray-2)"
           },
           "gray[3]": {
+            description: "Mantine color gray.3",
             value: "var(--mantine-color-gray-3)"
           },
           "gray[4]": {
+            description: "Mantine color gray.4",
             value: "var(--mantine-color-gray-4)"
           },
           "gray[5]": {
+            description: "Mantine color gray.5",
             value: "var(--mantine-color-gray-5)"
           },
           "gray[6]": {
+            description: "Mantine color gray.6",
             value: "var(--mantine-color-gray-6)"
           },
           "gray[7]": {
+            description: "Mantine color gray.7",
             value: "var(--mantine-color-gray-7)"
           },
           "gray[8]": {
+            description: "Mantine color gray.8",
             value: "var(--mantine-color-gray-8)"
           },
           "gray[9]": {
+            description: "Mantine color gray.9",
             value: "var(--mantine-color-gray-9)"
           },
           dark: {
             DEFAULT: {
+              description: "Mantine color dark",
               value: "var(--mantine-color-dark-6)"
             },
             filled: {
+              description: "Mantine color dark filled",
               value: "var(--mantine-color-dark-filled)"
             },
             filledHover: {
+              description: "Mantine color dark filled hover",
               value: "var(--mantine-color-dark-filled-hover)"
             },
             light: {
+              description: "Mantine color dark light",
               value: "var(--mantine-color-dark-light)"
             },
             lightHover: {
+              description: "Mantine color dark light hover",
               value: "var(--mantine-color-dark-light-hover)"
             },
             lightColor: {
+              description: "Mantine color dark light color",
               value: "var(--mantine-color-dark-light-color)"
             },
             outline: {
+              description: "Mantine color dark outline",
               value: "var(--mantine-color-dark-outline)"
             },
             outlineHover: {
+              description: "Mantine color dark outline hover",
               value: "var(--mantine-color-dark-outline-hover)"
             }
           },
           "dark[0]": {
+            description: "Mantine color dark.0",
             value: "var(--mantine-color-dark-0)"
           },
           "dark[1]": {
+            description: "Mantine color dark.1",
             value: "var(--mantine-color-dark-1)"
           },
           "dark[2]": {
+            description: "Mantine color dark.2",
             value: "var(--mantine-color-dark-2)"
           },
           "dark[3]": {
+            description: "Mantine color dark.3",
             value: "var(--mantine-color-dark-3)"
           },
           "dark[4]": {
+            description: "Mantine color dark.4",
             value: "var(--mantine-color-dark-4)"
           },
           "dark[5]": {
+            description: "Mantine color dark.5",
             value: "var(--mantine-color-dark-5)"
           },
           "dark[6]": {
+            description: "Mantine color dark.6",
             value: "var(--mantine-color-dark-6)"
           },
           "dark[7]": {
+            description: "Mantine color dark.7",
             value: "var(--mantine-color-dark-7)"
           },
           "dark[8]": {
+            description: "Mantine color dark.8",
             value: "var(--mantine-color-dark-8)"
           },
           "dark[9]": {
+            description: "Mantine color dark.9",
             value: "var(--mantine-color-dark-9)"
           },
           orange: {
             DEFAULT: {
+              description: "Mantine color orange",
               value: "var(--mantine-color-orange-6)"
             },
             filled: {
+              description: "Mantine color orange filled",
               value: "var(--mantine-color-orange-filled)"
             },
             filledHover: {
+              description: "Mantine color orange filled hover",
               value: "var(--mantine-color-orange-filled-hover)"
             },
             light: {
+              description: "Mantine color orange light",
               value: "var(--mantine-color-orange-light)"
             },
             lightHover: {
+              description: "Mantine color orange light hover",
               value: "var(--mantine-color-orange-light-hover)"
             },
             lightColor: {
+              description: "Mantine color orange light color",
               value: "var(--mantine-color-orange-light-color)"
             },
             outline: {
+              description: "Mantine color orange outline",
               value: "var(--mantine-color-orange-outline)"
             },
             outlineHover: {
+              description: "Mantine color orange outline hover",
               value: "var(--mantine-color-orange-outline-hover)"
             }
           },
           "orange[0]": {
+            description: "Mantine color orange.0",
             value: "var(--mantine-color-orange-0)"
           },
           "orange[1]": {
+            description: "Mantine color orange.1",
             value: "var(--mantine-color-orange-1)"
           },
           "orange[2]": {
+            description: "Mantine color orange.2",
             value: "var(--mantine-color-orange-2)"
           },
           "orange[3]": {
+            description: "Mantine color orange.3",
             value: "var(--mantine-color-orange-3)"
           },
           "orange[4]": {
+            description: "Mantine color orange.4",
             value: "var(--mantine-color-orange-4)"
           },
           "orange[5]": {
+            description: "Mantine color orange.5",
             value: "var(--mantine-color-orange-5)"
           },
           "orange[6]": {
+            description: "Mantine color orange.6",
             value: "var(--mantine-color-orange-6)"
           },
           "orange[7]": {
+            description: "Mantine color orange.7",
             value: "var(--mantine-color-orange-7)"
           },
           "orange[8]": {
+            description: "Mantine color orange.8",
             value: "var(--mantine-color-orange-8)"
           },
           "orange[9]": {
+            description: "Mantine color orange.9",
             value: "var(--mantine-color-orange-9)"
           },
           teal: {
             DEFAULT: {
+              description: "Mantine color teal",
               value: "var(--mantine-color-teal-6)"
             },
             filled: {
+              description: "Mantine color teal filled",
               value: "var(--mantine-color-teal-filled)"
             },
             filledHover: {
+              description: "Mantine color teal filled hover",
               value: "var(--mantine-color-teal-filled-hover)"
             },
             light: {
+              description: "Mantine color teal light",
               value: "var(--mantine-color-teal-light)"
             },
             lightHover: {
+              description: "Mantine color teal light hover",
               value: "var(--mantine-color-teal-light-hover)"
             },
             lightColor: {
+              description: "Mantine color teal light color",
               value: "var(--mantine-color-teal-light-color)"
             },
             outline: {
+              description: "Mantine color teal outline",
               value: "var(--mantine-color-teal-outline)"
             },
             outlineHover: {
+              description: "Mantine color teal outline hover",
               value: "var(--mantine-color-teal-outline-hover)"
             }
           },
           "teal[0]": {
+            description: "Mantine color teal.0",
             value: "var(--mantine-color-teal-0)"
           },
           "teal[1]": {
+            description: "Mantine color teal.1",
             value: "var(--mantine-color-teal-1)"
           },
           "teal[2]": {
+            description: "Mantine color teal.2",
             value: "var(--mantine-color-teal-2)"
           },
           "teal[3]": {
+            description: "Mantine color teal.3",
             value: "var(--mantine-color-teal-3)"
           },
           "teal[4]": {
+            description: "Mantine color teal.4",
             value: "var(--mantine-color-teal-4)"
           },
           "teal[5]": {
+            description: "Mantine color teal.5",
             value: "var(--mantine-color-teal-5)"
           },
           "teal[6]": {
+            description: "Mantine color teal.6",
             value: "var(--mantine-color-teal-6)"
           },
           "teal[7]": {
+            description: "Mantine color teal.7",
             value: "var(--mantine-color-teal-7)"
           },
           "teal[8]": {
+            description: "Mantine color teal.8",
             value: "var(--mantine-color-teal-8)"
           },
           "teal[9]": {
+            description: "Mantine color teal.9",
             value: "var(--mantine-color-teal-9)"
           },
           red: {
             DEFAULT: {
+              description: "Mantine color red",
               value: "var(--mantine-color-red-6)"
             },
             filled: {
+              description: "Mantine color red filled",
               value: "var(--mantine-color-red-filled)"
             },
             filledHover: {
+              description: "Mantine color red filled hover",
               value: "var(--mantine-color-red-filled-hover)"
             },
             light: {
+              description: "Mantine color red light",
               value: "var(--mantine-color-red-light)"
             },
             lightHover: {
+              description: "Mantine color red light hover",
               value: "var(--mantine-color-red-light-hover)"
             },
             lightColor: {
+              description: "Mantine color red light color",
               value: "var(--mantine-color-red-light-color)"
             },
             outline: {
+              description: "Mantine color red outline",
               value: "var(--mantine-color-red-outline)"
             },
             outlineHover: {
+              description: "Mantine color red outline hover",
               value: "var(--mantine-color-red-outline-hover)"
             }
           },
           "red[0]": {
+            description: "Mantine color red.0",
             value: "var(--mantine-color-red-0)"
           },
           "red[1]": {
+            description: "Mantine color red.1",
             value: "var(--mantine-color-red-1)"
           },
           "red[2]": {
+            description: "Mantine color red.2",
             value: "var(--mantine-color-red-2)"
           },
           "red[3]": {
+            description: "Mantine color red.3",
             value: "var(--mantine-color-red-3)"
           },
           "red[4]": {
+            description: "Mantine color red.4",
             value: "var(--mantine-color-red-4)"
           },
           "red[5]": {
+            description: "Mantine color red.5",
             value: "var(--mantine-color-red-5)"
           },
           "red[6]": {
+            description: "Mantine color red.6",
             value: "var(--mantine-color-red-6)"
           },
           "red[7]": {
+            description: "Mantine color red.7",
             value: "var(--mantine-color-red-7)"
           },
           "red[8]": {
+            description: "Mantine color red.8",
             value: "var(--mantine-color-red-8)"
           },
           "red[9]": {
+            description: "Mantine color red.9",
             value: "var(--mantine-color-red-9)"
           },
           green: {
             DEFAULT: {
+              description: "Mantine color green",
               value: "var(--mantine-color-green-6)"
             },
             filled: {
+              description: "Mantine color green filled",
               value: "var(--mantine-color-green-filled)"
             },
             filledHover: {
+              description: "Mantine color green filled hover",
               value: "var(--mantine-color-green-filled-hover)"
             },
             light: {
+              description: "Mantine color green light",
               value: "var(--mantine-color-green-light)"
             },
             lightHover: {
+              description: "Mantine color green light hover",
               value: "var(--mantine-color-green-light-hover)"
             },
             lightColor: {
+              description: "Mantine color green light color",
               value: "var(--mantine-color-green-light-color)"
             },
             outline: {
+              description: "Mantine color green outline",
               value: "var(--mantine-color-green-outline)"
             },
             outlineHover: {
+              description: "Mantine color green outline hover",
               value: "var(--mantine-color-green-outline-hover)"
             }
           },
           "green[0]": {
+            description: "Mantine color green.0",
             value: "var(--mantine-color-green-0)"
           },
           "green[1]": {
+            description: "Mantine color green.1",
             value: "var(--mantine-color-green-1)"
           },
           "green[2]": {
+            description: "Mantine color green.2",
             value: "var(--mantine-color-green-2)"
           },
           "green[3]": {
+            description: "Mantine color green.3",
             value: "var(--mantine-color-green-3)"
           },
           "green[4]": {
+            description: "Mantine color green.4",
             value: "var(--mantine-color-green-4)"
           },
           "green[5]": {
+            description: "Mantine color green.5",
             value: "var(--mantine-color-green-5)"
           },
           "green[6]": {
+            description: "Mantine color green.6",
             value: "var(--mantine-color-green-6)"
           },
           "green[7]": {
+            description: "Mantine color green.7",
             value: "var(--mantine-color-green-7)"
           },
           "green[8]": {
+            description: "Mantine color green.8",
             value: "var(--mantine-color-green-8)"
           },
           "green[9]": {
+            description: "Mantine color green.9",
             value: "var(--mantine-color-green-9)"
           },
           yellow: {
             DEFAULT: {
+              description: "Mantine color yellow",
               value: "var(--mantine-color-yellow-6)"
             },
             filled: {
+              description: "Mantine color yellow filled",
               value: "var(--mantine-color-yellow-filled)"
             },
             filledHover: {
+              description: "Mantine color yellow filled hover",
               value: "var(--mantine-color-yellow-filled-hover)"
             },
             light: {
+              description: "Mantine color yellow light",
               value: "var(--mantine-color-yellow-light)"
             },
             lightHover: {
+              description: "Mantine color yellow light hover",
               value: "var(--mantine-color-yellow-light-hover)"
             },
             lightColor: {
+              description: "Mantine color yellow light color",
               value: "var(--mantine-color-yellow-light-color)"
             },
             outline: {
+              description: "Mantine color yellow outline",
               value: "var(--mantine-color-yellow-outline)"
             },
             outlineHover: {
+              description: "Mantine color yellow outline hover",
               value: "var(--mantine-color-yellow-outline-hover)"
             }
           },
           "yellow[0]": {
+            description: "Mantine color yellow.0",
             value: "var(--mantine-color-yellow-0)"
           },
           "yellow[1]": {
+            description: "Mantine color yellow.1",
             value: "var(--mantine-color-yellow-1)"
           },
           "yellow[2]": {
+            description: "Mantine color yellow.2",
             value: "var(--mantine-color-yellow-2)"
           },
           "yellow[3]": {
+            description: "Mantine color yellow.3",
             value: "var(--mantine-color-yellow-3)"
           },
           "yellow[4]": {
+            description: "Mantine color yellow.4",
             value: "var(--mantine-color-yellow-4)"
           },
           "yellow[5]": {
+            description: "Mantine color yellow.5",
             value: "var(--mantine-color-yellow-5)"
           },
           "yellow[6]": {
+            description: "Mantine color yellow.6",
             value: "var(--mantine-color-yellow-6)"
           },
           "yellow[7]": {
+            description: "Mantine color yellow.7",
             value: "var(--mantine-color-yellow-7)"
           },
           "yellow[8]": {
+            description: "Mantine color yellow.8",
             value: "var(--mantine-color-yellow-8)"
           },
           "yellow[9]": {
+            description: "Mantine color yellow.9",
             value: "var(--mantine-color-yellow-9)"
           }
         }
@@ -4713,19 +4858,6 @@ const theme$1 = {
   semanticTokens: {
     colors: {
       likec4: {
-        background: {
-          DEFAULT: {
-            description: "Background color",
-            value: "{colors.mantine.colors.body}"
-          },
-          pattern: {
-            description: "Background pattern color",
-            value: {
-              base: "{colors.mantine.colors.dark[5]}",
-              _light: "{colors.mantine.colors.gray[4]}"
-            }
-          }
-        },
         amber: {
           element: {
             fill: {
@@ -6251,6 +6383,7 @@ const conditions = {
   extend: {
     light: '[data-mantine-color-scheme="light"] &',
     dark: '[data-mantine-color-scheme="dark"] &',
+    notDisabled: "&:not(:is(:disabled, [disabled], [data-disabled]))",
     // This is used to hide certain elements when the diagram is in reduced graphics mode (large)
     reduceGraphics: [
       `${root}:is([data-likec4-reduced-graphics])`,
@@ -6298,7 +6431,7 @@ const patterns = {
 };
 const actionBtn = defineRecipe({
   className: "action-btn",
-  description: "The styles for the Action Buttons",
+  description: "Action Button within Diagram Node (Bottom-Center)",
   base: {
     pointerEvents: "all",
     cursor: "pointer",
@@ -6367,7 +6500,7 @@ const actionBtn = defineRecipe({
     size: ["md"],
     radius: ["md"],
     variant: ["*"],
-    conditions: ["whenHovered", "hover", "reducedGraphics"]
+    conditions: ["*"]
   }]
 });
 const likec4tag = defineRecipe({
@@ -6425,6 +6558,7 @@ const likec4tag = defineRecipe({
 const markdownBlock = defineRecipe({
   className: "likec4-markdown-block",
   jsx: ["MarkdownBlock"],
+  description: "Block with Markdown content",
   base: {
     pointerEvents: "all",
     "--text-fz": "1rem",
@@ -6564,7 +6698,7 @@ const markdownBlock = defineRecipe({
     '& :where(ul, ol):not([data-type="taskList"])': {
       marginBottom: "var(--typography-spacing)",
       paddingInlineStart: "var(--typography-spacing)",
-      listStylePosition: "outside"
+      listStylePosition: "inside"
     },
     "& :where(table)": {
       width: "100%",
@@ -6654,15 +6788,341 @@ const markdownBlock = defineRecipe({
     uselikec4palette: false
   },
   staticCss: [{
-    uselikec4palette: ["true"],
-    conditions: ["hover"]
+    uselikec4palette: ["*"],
+    conditions: ["*"]
+  }]
+});
+const navigationPanelActionIcon = defineRecipe({
+  className: "likec4-navigation-panel-icon",
+  jsx: ["PanelActionIcon"],
+  description: "ActionIcon for navigation panel",
+  base: {
+    color: {
+      base: "likec4.panel.action-icon.text",
+      _disabled: "likec4.panel.action-icon.text.disabled",
+      _notDisabled: {
+        _hover: "likec4.panel.action-icon.text.hover"
+      }
+    },
+    _disabled: {
+      opacity: 0.5
+    }
+  },
+  variants: {
+    variant: {
+      "default": {
+        backgroundColor: {
+          base: "[transparent]",
+          _notDisabled: {
+            _hover: "likec4.panel.action-icon.bg.hover"
+          }
+        }
+      },
+      "filled": {
+        backgroundColor: {
+          base: "likec4.panel.action-icon.bg",
+          _notDisabled: {
+            _hover: "likec4.panel.action-icon.bg.hover"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  },
+  staticCss: [{
+    variant: ["*"],
+    conditions: ["*"]
+  }]
+});
+const varIconSize = `var(${iconSize})`;
+const elementNodeIcon = defineRecipe({
+  className: "likec4-element-node-icon",
+  description: "Element Icon displayed in diagram nodes",
+  base: {
+    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"
+    }
+  },
+  staticCss: [{
+    conditions: ["*"]
   }]
 });
 const recipes = {
   __proto__: null,
   actionBtn,
+  elementNodeIcon,
   likec4tag,
-  markdownBlock
+  markdownBlock,
+  navigationPanelActionIcon
+};
+const title = {
+  textStyle: "likec4.node.primary",
+  flex: "0 0 auto",
+  textAlign: "center",
+  color: "likec4.palette.hiContrast"
+};
+const description = {
+  flexGrow: "0",
+  flexShrink: "1",
+  textStyle: "likec4.node.secondary",
+  color: "likec4.palette.loContrast",
+  textAlign: "center",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  _shapeSizeXs: {
+    display: "none"
+  },
+  _smallZoom: {
+    display: "none"
+  }
+};
+const technology = {
+  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: {
+    display: "none"
+  }
+};
+const elementNodeData = defineSlotRecipe({
+  className: "likec4-el-node-data",
+  slots: ["root", "textContainer", "title", "description", "technology", "icon"],
+  base: {
+    root: {
+      position: "relative",
+      flex: "1",
+      height: "fit-content",
+      width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
+      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",
+      pointerEvents: "none",
+      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",
+      maxHeight: "100%",
+      maxWidth: "100%",
+      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% + var(${iconSize}))`,
+          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
+  },
+  staticCss: [{
+    hasIcon: ["*"],
+    hasDescription: ["*"],
+    hasTechnology: ["*"],
+    conditions: ["*"]
+  }]
+});
+const navigationLink = defineSlotRecipe({
+  className: "likec4-navlink",
+  description: "Navigation Link (classes for Mantine NavLink)",
+  jsx: ["NavLink"],
+  slots: ["root", "body", "section", "label", "description"],
+  base: {
+    root: {
+      rounded: "sm",
+      px: "xs",
+      py: "2xs",
+      backgroundColor: {
+        _hover: {
+          "&:not([data-active])": {
+            base: "mantine.colors.gray[1]",
+            _dark: "mantine.colors.dark[5]"
+          }
+        }
+      }
+    },
+    body: {
+      gap: "2",
+      display: "flex",
+      flexDirection: "column"
+    },
+    section: {
+      '&:where([data-position="left"])': {
+        marginInlineEnd: "2xs"
+        // alignSelf: 'flex-start',
+      }
+    },
+    label: {
+      display: "block",
+      fontSize: "sm",
+      fontWeight: "500",
+      lineHeight: 1.2
+    },
+    description: {
+      display: "block",
+      fontSize: "xxs",
+      lineHeight: 1.2
+    }
+  },
+  variants: {
+    truncateLabel: {
+      "true": {
+        label: {
+          width: "100%",
+          truncate: true
+        },
+        description: {
+          width: "100%",
+          truncate: true
+        }
+      },
+      "false": {}
+    }
+  },
+  defaultVariants: {
+    truncateLabel: false
+  },
+  staticCss: [{
+    truncateLabel: ["*"],
+    conditions: ["*"]
+  }]
+});
+const slotRecipes = {
+  __proto__: null,
+  elementNodeData,
+  navigationLink
 };
 const layerStyles = defineLayerStyles({
   likec4: {
@@ -6677,6 +7137,45 @@ const layerStyles = defineLayerStyles({
         border: "none",
         borderRadius: 3
       }
+    },
+    panel: {
+      description: "LikeC4 panel layer",
+      value: {
+        paddingInline: "xs",
+        paddingBlock: "2xs",
+        backgroundColor: {
+          base: "likec4.panel.bg",
+          _whenPanning: "likec4.panel.bg.whenPanning"
+        },
+        boxShadow: "lg",
+        border: "1px solid {colors.likec4.panel.border}",
+        borderRadius: "md",
+        backdropFilter: "blur(10px)",
+        _whenPanning: {
+          boxShadow: "none",
+          borderRadius: 0
+        },
+        smDown: {
+          padding: "4",
+          borderRadius: 0
+        }
+      }
+    },
+    dropdown: {
+      description: "LikeC4 dropdown layer",
+      value: {
+        paddingInline: "2xs",
+        paddingBlock: "2xs",
+        backgroundColor: "likec4.dropdown.bg",
+        border: "1px solid {colors.likec4.dropdown.border}",
+        boxShadow: "lg",
+        borderRadius: "md",
+        _whenPanning: {
+          boxShadow: "none",
+          borderRadius: "0px",
+          borderColor: "transparent"
+        }
+      }
     }
   }
 });
@@ -6691,6 +7190,19 @@ const semanticTokens = defineSemanticTokens({
   },
   colors: {
     likec4: {
+      background: {
+        DEFAULT: {
+          description: "Background color",
+          value: "{colors.mantine.colors.body}"
+        },
+        pattern: {
+          description: "Background pattern color",
+          value: {
+            base: "{colors.mantine.colors.dark[5]}",
+            _light: "{colors.mantine.colors.gray[4]}"
+          }
+        }
+      },
       mixColor: {
         description: "Color to be used in color-mix",
         value: {
@@ -6726,6 +7238,78 @@ const semanticTokens = defineSemanticTokens({
           DEFAULT: { value: "{colors.likec4.gray.relation.label}" },
           bg: { value: "{colors.likec4.gray.relation.label.bg}" }
         }
+      },
+      panel: {
+        bg: {
+          DEFAULT: {
+            description: "LikeC4 panel background color",
+            value: {
+              base: `{colors.mantine.colors.body/90}`,
+              _dark: `{colors.mantine.colors.dark[6]/80}`
+            }
+          },
+          whenPanning: {
+            description: "LikeC4 panel background color when panning",
+            value: {
+              base: `{colors.mantine.colors.body}`,
+              _dark: `{colors.mantine.colors.dark[6]}`
+            }
+          }
+        },
+        border: {
+          description: "LikeC4 panel border color",
+          value: {
+            base: "transparent",
+            _light: `{colors.mantine.colors.defaultBorder/30}`
+          }
+        },
+        "action-icon": {
+          text: {
+            DEFAULT: {
+              description: "LikeC4 action icon text color",
+              value: "{colors.mantine.colors.text/70}"
+            },
+            hover: {
+              description: "LikeC4 action icon text color on hover",
+              value: "{colors.mantine.colors.text}"
+            },
+            disabled: {
+              description: "LikeC4 action icon text color when disabled",
+              value: "{colors.mantine.colors.dimmed}"
+            }
+          },
+          bg: {
+            DEFAULT: {
+              description: "LikeC4 action icon background color",
+              value: {
+                base: "{colors.mantine.colors.gray[1]}",
+                _dark: "{colors.mantine.colors.dark[7]/70}"
+              }
+            },
+            hover: {
+              description: "LikeC4 action icon background color on hover",
+              value: {
+                base: "{colors.mantine.colors.gray[2]}",
+                _dark: "{colors.mantine.colors.dark[8]}"
+              }
+            }
+          }
+        }
+      },
+      dropdown: {
+        bg: {
+          DEFAULT: {
+            description: "LikeC4 dropdown background color",
+            value: {
+              base: `#FFF`,
+              _dark: `{colors.mantine.colors.dark[6]}`
+            }
+          }
+        },
+        border: {
+          description: "LikeC4 dropdown border color",
+          value: "{colors.likec4.panel.border}"
+        }
       }
     }
   }
@@ -6738,7 +7322,7 @@ const textStyles = defineTextStyles({
         value: {
           fontFamily: "var(--likec4-element-font, {fonts.likec4})",
           fontWeight: 500,
-          fontSize: "[var(--likec4-text-size)]",
+          fontSize: "var(--likec4-text-size)",
           lineHeight: 1.15,
           textWrapStyle: "balance",
           whiteSpace: "preserve-breaks"
@@ -6749,7 +7333,7 @@ const textStyles = defineTextStyles({
         value: {
           fontFamily: "var(--likec4-element-font, {fonts.likec4})",
           fontWeight: 400,
-          fontSize: `[var(--likec4-text-size) * 0.74]`,
+          fontSize: `[calc(var(--likec4-text-size) * 0.74)]`,
           lineHeight: 1.3,
           textWrapStyle: "pretty",
           "--text-fz": `[calc(var(--likec4-text-size) * 0.74)]`
@@ -6836,6 +7420,7 @@ const theme = {
     tokens,
     semanticTokens,
     recipes,
+    slotRecipes,
     keyframes: {
       "indicatorStrokeOpacity": {
         "0%": {
@@ -6976,6 +7561,11 @@ const index = definePreset({
         syntax: "<length-percentage>",
         inherits: false
         // initialValue: '1rem',
+      },
+      [iconSize]: {
+        syntax: "<length-percentage>",
+        inherits: false
+        // initialValue: '1rem',
       }
     }
   },
@@ -6990,8 +7580,8 @@ const index = definePreset({
       },
       ".likec4-shadow-root": {
         display: "contents",
-        "--mantine-font-family": "var(--likec4-app-font-default)",
-        "--mantine-font-family-headings": "var(--likec4-app-font-default)"
+        "--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
+        "--mantine-font-family-headings": "var(--likec4-app-font, var(--likec4-app-font-default))"
       },
       [`${root}`]: {
         overflow: "hidden",
@@ -7000,7 +7590,9 @@ const index = definePreset({
         height: "100%",
         padding: "0px",
         margin: "0px",
-        border: "0px solid transparent"
+        border: "0px solid transparent",
+        containerName: "likec4-root",
+        containerType: "size"
       },
       [`${root} .react-flow:is(.not-initialized)`]: {
         opacity: 0