@likec4/diagram 1.42.1 → 1.44.0

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.4.1",
+  "schemaVersion": "1.4.3",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -8,29 +8,47 @@
       "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
       "background]___[value:transparent",
       "position]___[value:absolute",
-      "top]___[value:1rem",
-      "right]___[value:1rem",
+      "top]___[value:4",
+      "right]___[value:4",
+      "zIndex]___[value:999",
       "color]___[value:gray",
       "gap]___[value:20",
-      "top]___[value:0",
-      "left]___[value:0",
-      "width]___[value:100%",
-      "height]___[value:100%",
+      "margin]___[value:0",
       "padding]___[value:0",
-      "backdropFilter]___[value:blur(5px)",
-      "backgroundColor]___[value:[rgb(34 34 34 / 10%)]]___[cond:_dark",
-      "backgroundColor]___[value:[rgb(15 15 15/ 20%)]]___[cond:_light",
-      "zIndex]___[value:1000",
-      "color]___[value:red",
+      "position]___[value:fixed",
+      "top]___[value:10",
+      "left]___[value:10",
+      "width]___[value:[calc(100vw - ({spacing.10} * 2))]",
+      "height]___[value:max-content",
+      "maxHeight]___[value:[calc(100vh - ({spacing.10} * 3))]",
+      "background]___[value:likec4.overlay.body",
+      "borderRadius]___[value:sm",
+      "borderWidth]___[value:3",
+      "borderColor]___[value:likec4.overlay.border",
+      "boxShadow]___[value:xl",
+      "outline]___[value:none",
+      "cursor]___[value:zoom-out]___[cond:_backdrop",
+      "backdropFilter]___[value:blur(18px)]___[cond:_backdrop",
+      "background]___[value:[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]]___[cond:_backdrop",
+      "display]___[value:flex",
+      "alignItems]___[value:flex-start",
+      "gap]___[value:lg",
+      "flexDirection]___[value:row",
       "padding]___[value:xl",
-      "gap]___[value:xs",
-      "marginTop]___[value:xl",
+      "flexWrap]___[value:nowrap",
+      "alignItems]___[value:center",
+      "gap]___[value:md",
+      "marginTop]___[value:md",
+      "color]___[value:red",
+      "alignItems]___[value:stretch",
+      "gap]___[value:sm",
+      "flexDirection]___[value:column",
+      "flex]___[value:1",
       "color]___[value:teal",
       "opacity]___[value:1",
       "opacity]___[value:0.45",
       "transition]___[value:fast",
       "opacity]___[value:1]___[cond:_hover",
-      "flexWrap]___[value:nowrap",
       "minHeight]___[value:24",
       "maxWidth]___[value:500",
       "userSelect]___[value:all",
@@ -54,7 +72,6 @@
       "height]___[value:30px",
       "paddingLeft]___[value:sm",
       "paddingRight]___[value:1",
-      "borderRadius]___[value:sm",
       "border]___[value:1px solid",
       "borderColor]___[value:mantine.colors.defaultBorder",
       "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
@@ -64,6 +81,7 @@
       "background]___[value:mantine.colors.white]___[cond:_light",
       "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
       "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
+      "width]___[value:100%",
       "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
       "transition]___[value:none !important]___[cond:_whenPanning",
       "boxShadow]___[value:xs",
@@ -73,7 +91,6 @@
       "fontWeight]___[value:500",
       "paddingRight]___[value:2.5",
       "color]___[value:mantine.colors.placeholder",
-      "flex]___[value:1",
       "paddingRight]___[value:[30px]]___[cond:sm",
       "paddingRight]___[value:[50px]]___[cond:md",
       "fontSize]___[value:11px",
@@ -88,10 +105,11 @@
       "backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
       "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
       "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
+      "gap]___[value:xs",
       "stroke]___[value:2",
-      "alignItems]___[value:flex-start",
       "pointerEvents]___[value:none",
-      "margin]___[value:0",
+      "top]___[value:0",
+      "left]___[value:0",
       "gap]___[value:xxs",
       "maxWidth]___[value:calc(100vw)",
       "maxWidth]___[value:calc(100cqw)]___[cond:xs",
@@ -100,17 +118,10 @@
       "width]___[value:max-content]___[cond:@/sm",
       "maxWidth]___[value:calc(100vw - 2 * {spacing.md})]___[cond:@/sm",
       "maxWidth]___[value:calc(100cqw - 2 * {spacing.md})]___[cond:@/sm<___>xs",
-      "display]___[value:flex",
-      "alignItems]___[value:stretch",
-      "gap]___[value:sm",
-      "flexDirection]___[value:column",
       "mainAxis]___[value:4",
       "position]___[value:bottom-start",
-      "alignItems]___[value:center",
-      "flexDirection]___[value:row",
       "layerStyle]___[value:likec4.panel",
       "position]___[value:relative",
-      "paddingRight]___[value:md",
       "pointerEvents]___[value:all",
       "userSelect]___[value:none",
       "maxWidth]___[value:200px",
@@ -162,16 +173,19 @@
       "backgroundColor]___[value:mantine.colors.primary.lightHover!]___[cond:_focus",
       "stroke]___[value:1.5",
       "--thickness]___[value:1px",
+      "height]___[value:100%",
       "borderInlineEndWidth]___[value:var(--thickness)",
       "marginBottom]___[value:1",
       "display]___[value:flex]___[cond:@/md",
       "color]___[value:mantine.colors.gray[5]",
       "color]___[value:mantine.colors.dark[3]]___[cond:_dark",
-      "color]___[value:mantine.colors.text/90",
-      "color]___[value:[var(--mantine-color-bright)]]___[cond:_hover",
+      "backgroundColor]___[value:likec4.panel.action.warning.bg",
+      "backgroundColor]___[value:likec4.panel.action.warning.bg.hover]___[cond:_hover",
+      "color]___[value:likec4.panel.action",
+      "color]___[value:likec4.panel.action.hover]___[cond:_hover",
       "truncate]___[value:true",
-      "color]___[value:mantine.colors.dimmed",
-      "color]___[value:mantine.colors.text]___[cond:_hover",
+      "color]___[value:likec4.panel.text.dimmed",
+      "color]___[value:likec4.panel.action]___[cond:_hover",
       "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity, 95%))]",
       "backgroundColor]___[value:[rgb(250 250 250 / var(--_opacity, 95%))]]___[cond:_light",
       "backdropFilter]___[value:auto",
@@ -180,6 +194,7 @@
       "justifyContent]___[value:stretch",
       "paddingTop]___[value:[20px]",
       "paddingLeft]___[value:md",
+      "paddingRight]___[value:md",
       "paddingBottom]___[value:sm",
       "background]___[value:[transparent]",
       "height]___[value:100cqh]___[cond:xs",
@@ -242,15 +257,18 @@
       "top]___[value:[14px]]___[cond:_shapeStorage",
       "top]___[value:[1px]]___[cond:_shapeQueue",
       "right]___[value:3]___[cond:_shapeQueue",
-      "content]___[value:\" \"]___[cond:_before",
-      "position]___[value:absolute]___[cond:_before",
-      "top]___[value:[calc(100% - 4px)]]___[cond:_before",
-      "left]___[value:0]___[cond:_before",
-      "width]___[value:100%]___[cond:_before",
-      "height]___[value:24px]___[cond:_before",
-      "background]___[value:[transparent]]___[cond:_before",
-      "pointerEvents]___[value:all]___[cond:_before",
+      "width]___[value:full",
+      "height]___[value:full",
       "outline]___[value:none]___[cond:_focusVisible",
+      "pointerEvents]___[value:all]___[cond:_whenSelectable",
+      "content]___[value:\" \"]___[cond:_whenSelectable<___>_before",
+      "position]___[value:absolute]___[cond:_whenSelectable<___>_before",
+      "top]___[value:[calc(100% - 4px)]]___[cond:_whenSelectable<___>_before",
+      "left]___[value:0]___[cond:_whenSelectable<___>_before",
+      "width]___[value:full]___[cond:_whenSelectable<___>_before",
+      "height]___[value:24px]___[cond:_whenSelectable<___>_before",
+      "background]___[value:transparent]___[cond:_whenSelectable<___>_before",
+      "pointerEvents]___[value:all]___[cond:_whenSelectable<___>_before",
       "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
       "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
       "alignItems]___[value:flex-end",
@@ -302,6 +320,7 @@
       "display]___[value:block",
       "fontSize]___[value:xxs",
       "lineHeight]___[value:sm",
+      "color]___[value:mantine.colors.dimmed",
       "whiteSpace]___[value:nowrap",
       "paddingInline]___[value:1",
       "paddingBlock]___[value:0.5",
@@ -311,25 +330,34 @@
       "color]___[value:var(--likec4-palette-hiContrast)]___[cond:_light",
       "color]___[value:var(--likec4-palette-loContrast)]___[cond:_dark",
       "whiteSpaceCollapse]___[value:preserve-breaks",
+      "border]___[value:default",
+      "borderWidth]___[value:4",
+      "fontSize]___[value:xs",
+      "fontWeight]___[value:medium",
+      "borderBottomLeftRadius]___[value:sm",
+      "borderBottomRightRadius]___[value:sm",
+      "transform]___[value:translateY(-4px)",
+      "paddingInline]___[value:4",
+      "color]___[value:mantine.colors.gray[9]",
+      "transform]___[value:translateY(-3px)]___[cond:_active",
+      "boxShadow]___[value:lg",
+      "textStyle]___[value:xs",
+      "paddingBlock]___[value:1",
+      "paddingLeft]___[value:3",
+      "color]___[value:likec4.panel.text",
+      "color]___[value:orange",
+      "color]___[value:green",
       "padding]___[value:0.5",
       "width]___[value:[20px]",
       "width]___[value:[64px]]___[cond:@/md",
       "display]___[value:none]___[cond:@/md",
-      "color]___[value:likec4.panel.action-icon.text",
-      "color]___[value:likec4.panel.action-icon.text.hover]___[cond:_hover",
-      "backgroundColor]___[value:likec4.panel.action-icon.bg",
-      "backgroundColor]___[value:likec4.panel.action-icon.bg.hover]___[cond:_hover",
-      "opacity]___[value:0.8",
-      "paddingInline]___[value:xxs",
       "position]___[value:bottom-end",
-      "boxShadow]___[value:xl",
       "display]___[value:flex]___[cond:@/xs",
-      "paddingBlock]___[value:1",
+      "backgroundColor]___[value:likec4.panel.action.bg.hover]___[cond:_hover",
       "gap]___[value:[1px]",
       "marginTop]___[value:1",
-      "fontSize]___[value:xs",
+      "opacity]___[value:0.8",
       "marginBottom]___[value:xxs",
-      "gap]___[value:md",
       "margin]___[value:xs",
       "padding]___[value:md",
       "paddingBottom]___[value:lg",
@@ -346,6 +374,12 @@
       "color]___[value:mantine.colors.gray[8]]___[cond:_light",
       "opacity]___[value:0.5",
       "marginInlineEnd]___[value:0.5",
+      "crossAxis]___[value:-22",
+      "padding]___[value:1.5",
+      "marginTop]___[value:4",
+      "marginTop]___[value:xs",
+      "layerStyle]___[value:likec4.panel.action",
+      "paddingInline]___[value:xxs",
       "fontWeight]___[value:400",
       "boxShadow]___[value:md",
       "mainAxis]___[value:2",
@@ -354,7 +388,6 @@
       "color]___[value:mantine.colors.gray[9]]___[cond:_light",
       "marginInlineStart]___[value:1]___[cond:&:is([data-position=\"right\"])",
       "position]___[value:right-start",
-      "boxShadow]___[value:lg",
       "mainAxis]___[value:10",
       "opacity]___[value:0.6",
       "padding]___[value:8",
@@ -365,9 +398,6 @@
       "left]___[value:2",
       "bottom]___[value:2",
       "padding]___[value:xxs",
-      "color]___[value:orange",
-      "background]___[value:mantine.colors.orange.light",
-      "marginTop]___[value:xs",
       "position]___[value:top",
       "width]___[value:70%]___[cond:& > svg",
       "height]___[value:70%]___[cond:& > svg",
@@ -400,7 +430,7 @@
       "borderWidth]___[value:4]___[cond:md",
       "marginRight]___[value:sm",
       "flexShrink]___[value:0",
-      "display]___[value:[inherit]]___[cond:@/md",
+      "display]___[value:inherit]___[cond:@/md",
       "marginInlineStart]___[value:0",
       "marginInlineStart]___[value:2]___[cond:@/md",
       "height]___[value:26",
@@ -416,7 +446,6 @@
       "maxWidth]___[value:calc(100cqw - 32px)",
       "minWidth]___[value:calc(100cqw - 50px)",
       "boxSizing]___[value:border-box",
-      "position]___[value:fixed",
       "inset]___[value:0",
       "width]___[value:100vw",
       "height]___[value:100vh",
@@ -425,7 +454,6 @@
       "backdropFilter]___[value:auto]___[cond:_backdrop",
       "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
       "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
-      "gap]___[value:lg",
       "color]___[value:mantine.colors.text",
       "backgroundColor]___[value:mantine.colors.body",
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
@@ -515,18 +543,37 @@
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
       "gap]___[value:6",
-      "gap]___[value:[4px 4px]",
-      "paddingRight]___[value:xxs",
-      "transitionProperty]___[value:all",
-      "transitionDuration]___[value:fast",
-      "transitionTimingFunction]___[value:inOut",
-      "color]___[value:mantine.colors.gray[8]",
-      "transitionTimingFunction]___[value:out]___[cond:_groupHover",
-      "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
-      "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
-      "overscrollBehavior]___[value:none",
-      "whiteSpace]___[value:pre",
-      "fontFamily]___[value:mono",
+      "gridAutoRows]___[value:min-content",
+      "gap]___[value:[12px 16px]",
+      "width]___[value:300",
+      "whiteSpace]___[value:pre-wrap",
+      "textOverflow]___[value:unset",
+      "textOverflow]___[value:ellipsis",
+      "wordBreak]___[value:break-word",
+      "wordBreak]___[value:normal",
+      "padding]___[value:xs",
+      "minWidth]___[value:0",
+      "minHeight]___[value:32px",
+      "padding]___[value:[4px 8px]",
+      "backgroundColor]___[value:mantine.colors.white",
+      "borderColor]___[value:mantine.colors.gray[3]",
+      "maxWidth]___[value:min(200px, 100%)",
+      "minWidth]___[value:60px",
+      "flex]___[value:0 1 auto",
+      "backgroundColor]___[value:mantine.colors.dark[9]]___[cond:_dark",
+      "color]___[value:mantine.colors.text]___[cond:_dark",
+      "justifyContent]___[value:flex-end",
+      "transition]___[value:all 150ms ease",
+      "color]___[value:mantine.colors.primary[6]]___[cond:_hover",
+      "backgroundColor]___[value:mantine.colors.dark[7]]___[cond:_hover<___>_dark",
+      "color]___[value:mantine.colors.primary[4]]___[cond:_hover<___>_dark",
+      "color]___[value:mantine.colors.gray[6]",
+      "padding]___[value:[1px 4px]",
+      "borderRadius]___[value:xs",
+      "color]___[value:mantine.colors.dark[2]]___[cond:_dark",
+      "fontWeight]___[value:700",
+      "justifySelf]___[value:stretch",
+      "alignSelf]___[value:start",
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
       "marginBottom]___[value:0",
       "transition]___[value:fast]___[cond:& > *",
@@ -557,6 +604,7 @@
       "border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
       "borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
       "content]___[value:\"scope:\"]___[cond:_before",
+      "position]___[value:absolute]___[cond:_before",
       "top]___[value:0]___[cond:_before",
       "left]___[value:2]___[cond:_before",
       "fontSize]___[value:xxs]___[cond:_before",
@@ -618,7 +666,6 @@
       "justifyItems]___[value:start",
       "maxHeight]___[value:70vh",
       "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
-      "padding]___[value:xs",
       "color]___[value:dark",
       "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
       "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
@@ -627,7 +674,6 @@
       "offset]___[value:4",
       "stroke]___[value:3.5",
       "flex]___[value:1 0 auto",
-      "outline]___[value:none",
       "marginBottom]___[value:2",
       "containerName]___[value:likec4-tree",
       "containerType]___[value:inline-size",
@@ -645,13 +691,11 @@
       "display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
       "maxWidth]___[value:8xl",
       "marginInline]___[value:auto",
-      "paddingInline]___[value:4",
       "paddingInline]___[value:6]___[cond:md",
       "paddingInline]___[value:8]___[cond:lg",
       "paddingBlock]___[value:md",
       "order]___[value:2",
       "paddingLeft]___[value:[48px]",
-      "grayscale]___[value:0",
       "grayscale]___[value:0.9",
       "filter]___[value:auto",
       "opacity]___[value:1]___[cond:_groupHover",
@@ -734,17 +778,21 @@
       "visibility]___[value:hidden",
       "fillOpacity]___[value:1]___[cond:_hover",
       "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
-      "strokeWidth]___[value:10]___[cond:_hover",
+      "strokeWidth]___[value:18]___[cond:_hover",
       "transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
-      "visibility]___[value:visible]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "transition]___[value:fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "transitionDelay]___[value:50ms]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "fillOpacity]___[value:1]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
-      "strokeWidth]___[value:5]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
+      "visibility]___[value:visible]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
+      "transition]___[value:fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
+      "transitionDelay]___[value:50ms]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
+      "fillOpacity]___[value:1]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
+      "strokeWidth]___[value:12]___[cond::where([data-likec4-selected='true'], [data-likec4-hovered='true']) &",
       "cursor]___[value:grabbing",
       "cursor]___[value:grabbing !important]___[cond:& *",
       "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
-      "border]___[value:default",
+      "outlineColor]___[value:likec4.compare.manual.outline]___[cond:& + .likec4-element-shape",
+      "outlineWidth]___[value:2px]___[cond:& + .likec4-element-shape",
+      "outlineWidth]___[value:4px]___[cond:& + .likec4-element-shape<___>_light",
+      "outlineStyle]___[value:solid]___[cond:& + .likec4-element-shape",
+      "outlineOffset]___[value:1]___[cond:& + .likec4-element-shape",
       "borderWidth]___[value:1",
       "--_color]___[value:var(--likec4-palette-stroke)",
       "--_color]___[value:[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]]___[cond:_dark",
@@ -756,7 +804,6 @@
       "letterSpacing]___[value:.75px",
       "color]___[value:[var(--_color)/75]",
       "backgroundColor]___[value:var(--likec4-palette-fill)",
-      "borderRadius]___[value:xs",
       "width]___[value:5px",
       "width]___[value:7px]___[cond:_whenHovered",
       "width]___[value:7px]___[cond:_whenSelected",
@@ -814,8 +861,7 @@
       "paddingTop]___[value:4",
       "gap]___[value:6px",
       "paddingInline]___[value:4px",
-      "maxWidth]___[value:220px",
-      "textOverflow]___[value:ellipsis"
+      "maxWidth]___[value:220px"
     ],
     "recipes": {
       "overlay": [
@@ -841,8 +887,10 @@
       ],
       "navigationPanelActionIcon": [
         "variant]___[value:default]___[recipe:navigationPanelActionIcon",
-        "*]___[value:default]___[recipe:navigationPanelActionIcon",
+        "type]___[value:default]___[recipe:navigationPanelActionIcon",
         "variant]___[value:filled]___[recipe:navigationPanelActionIcon",
+        "type]___[value:warning]___[recipe:navigationPanelActionIcon",
+        "*]___[value:default]___[recipe:navigationPanelActionIcon",
         "*]___[value:filled]___[recipe:navigationPanelActionIcon"
       ],
       "actionBtn": [
@@ -850,7 +898,10 @@
         "radius]___[value:md]___[recipe:actionBtn",
         "variant]___[value:transparent]___[recipe:actionBtn",
         "variant]___[value:filled]___[recipe:actionBtn",
+        "size]___[value:sm]___[recipe:actionBtn",
+        "*]___[value:sm]___[recipe:actionBtn",
         "*]___[value:md]___[recipe:actionBtn",
+        "radius]___[value:sm]___[recipe:actionBtn",
         "*]___[value:transparent]___[recipe:actionBtn",
         "*]___[value:filled]___[recipe:actionBtn"
       ],
@@ -868,12 +919,18 @@
       ],
       "edgeActionBtn": [],
       "edgeLabel": [
+        "pointerEvents]___[value:all]___[recipe:edgeLabel",
         "isStepEdge]___[value:false]___[recipe:edgeLabel",
         "cursor]___[value:pointer]___[recipe:edgeLabel",
         "cursor]___[value:default]___[recipe:edgeLabel",
+        "pointerEvents]___[value:none]___[recipe:edgeLabel",
         "*]___[value:false]___[recipe:edgeLabel",
         "isStepEdge]___[value:true]___[recipe:edgeLabel",
-        "*]___[value:true]___[recipe:edgeLabel"
+        "*]___[value:true]___[recipe:edgeLabel",
+        "*]___[value:pointer]___[recipe:edgeLabel",
+        "*]___[value:default]___[recipe:edgeLabel",
+        "*]___[value:none]___[recipe:edgeLabel",
+        "*]___[value:all]___[recipe:edgeLabel"
       ],
       "elementNodeData": [],
       "elementShapeRecipe": [