@likec4/diagram 1.43.0 → 1.45.0

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.4.3",
+  "schemaVersion": "1.5.1",
   "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,11 @@
       "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",
+      "display]___[value:none]___[cond:_print",
       "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 +174,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 +195,7 @@
       "justifyContent]___[value:stretch",
       "paddingTop]___[value:[20px]",
       "paddingLeft]___[value:md",
+      "paddingRight]___[value:md",
       "paddingBottom]___[value:sm",
       "background]___[value:[transparent]",
       "height]___[value:100cqh]___[cond:xs",
@@ -201,6 +217,8 @@
       "transitionDelay]___[value:0s]___[cond:_hover",
       "lineClamp]___[value:5",
       "fill]___[value:none",
+      "visibility]___[value:hidden",
+      "offsetDistance]___[value:50%",
       "transition]___[value:none]___[cond:_reduceGraphics",
       "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
       "strokeOpacity]___[value:0.08",
@@ -234,7 +252,6 @@
       "gap]___[value:1.5",
       "lineClamp]___[value:2",
       "lineClamp]___[value:3",
-      "maxHeight]___[value:8rem ",
       "top]___[value:0.5",
       "right]___[value:0.5",
       "right]___[value:[5px]]___[cond:_shapeBrowser",
@@ -242,15 +259,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 +322,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 +332,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 +376,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 +390,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 +400,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 +432,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 +448,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,12 +456,11 @@
       "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",
       "border]___[value:none",
-      "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent), color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px, color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px) ",
+      "backgroundImage]___[value: linear-gradient(180deg, color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent), color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px, color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px) ",
       "display]___[value:none]___[cond:& .react-flow__attribution",
       "flex]___[value:0",
       "cursor]___[value:move",
@@ -576,6 +606,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",
@@ -645,7 +676,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",
@@ -663,13 +693,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",
@@ -742,6 +770,12 @@
       "transform]___[value:translateX(-50%)",
       "zIndex]___[value:903",
       "marginTop]___[value:[32px]]___[cond:& + &",
+      "stroke]___[value:likec4.compare.manual.outline",
+      "mixBlendMode]___[value:plus-lighter",
+      "strokeWidth]___[value:8px",
+      "strokeWidth]___[value:12px]___[cond:_whenHovered",
+      "strokeOpacity]___[value:0.3",
+      "strokeOpacity]___[value:0.5]___[cond:_whenHovered",
       "mixBlendMode]___[value:normal",
       "fill]___[value:var(--likec4-palette-relation-stroke)",
       "stroke]___[value:var(--likec4-palette-relation-stroke)",
@@ -749,23 +783,26 @@
       "strokeWidth]___[value:1",
       "cursor]___[value:grab",
       "pointerEvents]___[value:auto",
-      "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",
+      "--_color]___[value:[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]]___[cond:_dark",
       "borderColor]___[value:[var(--_color)/30]",
       "backgroundColor]___[value:var(--likec4-palette-fill)/15",
       "paddingLeft]___[value:2",
@@ -780,6 +817,11 @@
       "translateX]___[value:-1/2",
       "translateY]___[value:-1/2",
       "top]___[value:1",
+      "outlineColor]___[value:likec4.compare.manual.outline",
+      "outlineWidth]___[value:2px",
+      "outlineWidth]___[value:4px]___[cond:_light",
+      "outlineStyle]___[value:solid",
+      "outlineOffset]___[value:1",
       "right]___[value:0",
       "padding]___[value:2",
       "width]___[value:min-content",
@@ -857,8 +899,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": [
@@ -866,7 +910,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"
       ],
@@ -884,12 +931,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": [