@likec4/diagram 1.35.0 → 1.36.0

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -21,7 +21,10 @@ const TriggerWalkthroughButton = Button.withProps({
   layoutId: "trigger-dynamic-walkthrough",
   variant: "filled",
   size: "xs",
-  fw: "500"
+  fw: "500",
+  className: css({
+    flexShrink: 0
+  })
 });
 const StartWalkthroughButton = () => {
   const diagram = useDiagram();
@@ -53,10 +56,10 @@ const ParallelFrame = () => {
     {
       css: {
         position: "absolute",
-        margin: 0,
-        padding: 0,
-        top: 0,
-        left: 0,
+        margin: "0",
+        padding: "0",
+        top: "0",
+        left: "0",
         width: "100%",
         height: "100%",
         border: `2px solid`,
@@ -100,7 +103,8 @@ const ActiveWalkthroughControls = () => {
         },
         rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
         children: "Stop"
-      }
+      },
+      "trigger-dynamic-walkthrough"
     ),
     /* @__PURE__ */ jsx(
       PrevNextButton,
@@ -138,7 +142,8 @@ const ActiveWalkthroughControls = () => {
           " / ",
           totalSteps
         ] })
-      }
+      },
+      "step-badge"
     ),
     /* @__PURE__ */ jsx(
       PrevNextButton,

package/dist/node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
+const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode);
+
+export { __iconNode, IconChevronDown as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M9 15l6 -6", "key": "svg-0" }], ["path", { "d": "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464", "key": "svg-1" }], ["path", { "d": "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463", "key": "svg-2" }]];
+const IconLink = createReactComponent("outline", "link", "Link", __iconNode);
+
+export { __iconNode, IconLink as default };

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -4,10 +4,10 @@ const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
 const dialog = css({
   boxSizing: "border-box",
-  margin: 0,
-  padding: 0,
+  margin: "0",
+  padding: "0",
   position: "fixed",
-  inset: 0,
+  inset: "0",
   width: "100vw",
   height: "100vh",
   maxWidth: "100vw",
@@ -33,12 +33,12 @@ const card = css({
   border: `none`,
   backgroundImage: `
     linear-gradient(180deg,
-      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
-      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
-      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      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, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
   `,
   "& .react-flow__attribution": {
     display: "none"
@@ -94,7 +94,7 @@ const viewButton = css({
   width: "100%",
   background: "mantine.colors.body",
   borderRadius: "sm",
-  padding: `10px 8px`,
+  padding: `[10px 8px]`,
   // gap: 6,
   // alignItems: 'flex-start',
   transition: "fast",
@@ -153,8 +153,9 @@ const tabsList = css({
   background: "mantine.colors.gray[1]",
   borderRadius: "sm",
   flexWrap: "nowrap",
-  gap: "6px",
-  padding: "4px",
+  gap: "1.5",
+  // 6px
+  padding: "1",
   _dark: {
     background: "mantine.colors.dark[7]"
   }
@@ -163,7 +164,7 @@ const tabsTab = css({
   fontSize: "xs",
   fontWeight: 500,
   flexGrow: 1,
-  padding: "6px 8px",
+  padding: "[6px 8px]",
   transition: "fast",
   borderRadius: "sm",
   color: "mantine.colors.gray[7]",
@@ -195,15 +196,15 @@ const tabsPanel = css({
   overflow: "hidden",
   position: "relative",
   "&:not(:has(.mantine-ScrollArea-root))": {
-    paddingLeft: "4px",
-    paddingRight: "4px"
+    paddingLeft: "1",
+    paddingRight: "1"
   },
   "& .mantine-ScrollArea-root": {
     width: "100%",
     height: "100%",
     "& > div": {
-      paddingLeft: "4px",
-      paddingRight: "4px"
+      paddingLeft: "1",
+      paddingRight: "1"
     }
   }
 });
@@ -230,8 +231,8 @@ const resizeHandle = css({
   borderTop: "none",
   borderLeft: "none",
   borderRadius: "2px",
-  bottom: "2px",
-  right: "2px",
+  bottom: "0.5",
+  right: "0.5",
   transition: "fast",
   cursor: "se-resize",
   _hover: {

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
+import { HStack } from '@likec4/styles/jsx';
 import { RemoveScroll, Card, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, ScrollAreaAutosize, UnstyledButton, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
@@ -9,7 +10,7 @@ import { pipe, map, partition, only, clamp, isNullish, entries } from 'remeda';
 import { ElementTag } from '../../base/primitives/element/ElementTags.js';
 import { Link } from '../../components/Link.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
-import { elementIcon, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, card, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
+import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
 import { TabPanelDeployments } from './TabPanelDeployments.js';
 import { TabPanelRelationships } from './TabPanelRelationships.js';
 import { TabPanelStructure } from './TabPanelStructure.js';
@@ -195,12 +196,8 @@ function ElementDetailsCard({
           dragElastic: 0,
           dragMomentum: false,
           dragListener: false,
-          className: cx(
-            css({
-              likec4Palette: nodeModel?.color ?? elementModel.color
-            }),
-            card
-          ),
+          "data-likec4-color": nodeModel?.color ?? elementModel.color,
+          className: card,
           initial: {
             top,
             left,
@@ -284,9 +281,7 @@ function ElementDetailsCard({
                       ElementTag,
                       {
                         tag,
-                        css: {
-                          cursor: "pointer"
-                        },
+                        cursor: "pointer",
                         onClick: (e) => {
                           e.stopPropagation();
                           diagram.openSearch(`#${tag}`);
@@ -377,7 +372,7 @@ function ElementDetailsCard({
                     elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, { title: "technology", children: elementModel.technology }),
                     elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "links" }),
-                      /* @__PURE__ */ jsx(Stack, { gap: "xs", align: "flex-start", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i)) })
+                      /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i)) })
                     ] }),
                     elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
                   ] }) }) }),
@@ -494,7 +489,7 @@ function ElementMetata({
           gap: `[4px 4px]`,
           alignItems: "baseline",
           justifyItems: "stretch",
-          paddingRight: "2xs"
+          paddingRight: "xxs"
         }),
         children: entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs(
           "div",
@@ -551,7 +546,7 @@ function ElementMetata({
                         {
                           className: css({
                             fontSize: "sm",
-                            padding: "2xs",
+                            padding: "xxs",
                             whiteSpace: "pre",
                             fontFamily: "[var(--mantine-font-family-monospace)]",
                             userSelect: "all"

package/dist/overlays/element-details/TabPanelDeployments.css.js

@@ -7,8 +7,8 @@ const treeNode = css({
 });
 const treeNodeLabel = css({
   cursor: "default",
-  marginTop: 0,
-  marginBottom: 0
+  marginTop: "0",
+  marginBottom: "0"
 });
 const label = css({
   transition: "fast",
@@ -40,8 +40,9 @@ const instanceLabel = cx(
     justifyContent: "stretch",
     flexWrap: "nowrap",
     height: "36px",
-    paddingInlineStart: "16px",
-    paddingInlineEnd: "10px",
+    paddingInlineStart: "[16px]",
+    paddingInlineEnd: "2.5",
+    // 10px
     borderRadius: "sm",
     alignItems: "center",
     color: "mantine.colors.gray[7]",

package/dist/overlays/element-details/TabPanelRelationships.css.js

@@ -5,11 +5,11 @@ const fqn = css({
   fontSize: "sm",
   fontWeight: 500,
   whiteSpace: "nowrap",
-  padding: "3px 6px",
+  padding: "[3px 6px]",
   borderRadius: 3,
-  background: `likec4.palette.fill/75`,
+  background: `var(--likec4-palette-fill)/75`,
   lineHeight: 1.2,
-  color: "likec4.palette.hiContrast"
+  color: "var(--likec4-palette-hiContrast)"
   // selectors: {
   //   [`${whereDark} &`]: {
   //   }
@@ -52,9 +52,9 @@ css({
   _before: {
     content: '"scope:"',
     position: "absolute",
-    top: 0,
-    left: 8,
-    fontSize: "2xs",
+    top: "0",
+    left: "2",
+    fontSize: "xxs",
     fontWeight: 500,
     lineHeight: "1",
     color: "mantine.colors.dimmed",
@@ -71,7 +71,7 @@ css({
   display: "inline-block",
   fontSize: "xl",
   fontWeight: 600,
-  padding: "1px 5px",
+  padding: "[1px 5px]",
   minWidth: 24,
   textAlign: "center",
   borderRadius: "sm",

package/dist/overlays/overlay/Overlay.css.d.ts

@@ -11,7 +11,7 @@ export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
                     width: "calc(100vw - 2 * var(--_inset))";
                     height: "calc(100vh - var(--_offset) - var(--_inset))";
                     "--_border-radius": "6px";
-                    padding: "6px";
+                    padding: "1.5";
                     "--_offset": "1rem";
                 };
                 md: {
@@ -32,8 +32,8 @@ export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
         };
         true: {
             dialog: {
-                inset: number;
-                padding: number;
+                inset: "0";
+                padding: "0";
             };
         };
     };

package/dist/overlays/overlay/Overlay.css.js

@@ -8,7 +8,7 @@ const inset = "--_inset";
 const borderRadius = "--_border-radius";
 const dialog = css.raw({
   boxSizing: "border-box",
-  margin: 0,
+  margin: "0",
   position: "fixed",
   width: "100vw",
   height: "100vh",
@@ -28,12 +28,12 @@ const dialog = css.raw({
   _backdrop: {
     cursor: "zoom-out"
   },
-  inset: 0,
-  padding: 0
+  inset: "0",
+  padding: "0"
 });
 const body = css.raw({
   position: "relative",
-  containerName: "overlay-dialog",
+  containerName: "likec4-dialog",
   containerType: "size",
   border: `0 solid transparent`,
   overflow: "hidden",
@@ -56,7 +56,8 @@ const overlay = sva({
             width: "calc(100vw - 2 * var(--_inset))",
             height: "calc(100vh - var(--_offset) - var(--_inset))",
             [borderRadius]: "6px",
-            padding: "6px",
+            padding: "1.5",
+            // 6px
             [offset]: "1rem"
           },
           md: {
@@ -77,8 +78,8 @@ const overlay = sva({
       },
       true: {
         dialog: {
-          inset: 0,
-          padding: 0
+          inset: "0",
+          padding: "0"
         }
       }
     },

package/dist/overlays/relationship-details/SelectEdge.css.js

@@ -3,7 +3,7 @@ import { css, cx } from '@likec4/styles/css';
 const edgeEnpoint = css.raw({
   display: "inline-flex",
   alignItems: "center",
-  padding: "6px 2px 0 2px",
+  padding: "[6px 2px 0 2px]",
   "& .mantine-Text-root": {
     color: "mantine.colors.text/90",
     fontSize: "xs",
@@ -12,7 +12,7 @@ const edgeEnpoint = css.raw({
   }
 });
 const edgeSource = css({
-  paddingLeft: 4,
+  paddingLeft: "1",
   gridColumn: 1
 }, edgeEnpoint);
 const edgeArrow = css({
@@ -20,7 +20,7 @@ const edgeArrow = css({
 }, edgeEnpoint);
 const edgeTarget = css({
   gridColumn: 3,
-  paddingRight: 4
+  paddingRight: "1"
 }, edgeEnpoint);
 const edgeLabelclass = "likec4-edge-label";
 const edgeLabel = cx(
@@ -31,8 +31,8 @@ const edgeLabel = cx(
     gridColumnEnd: 4,
     borderBottom: `1px solid`,
     borderBottomColor: "mantine.colors.defaultBorder",
-    marginBottom: "0px",
-    padding: "0 4px 5px 4px",
+    marginBottom: "0",
+    padding: "[0 4px 5px 4px]",
     width: "100%",
     "& .mantine-Text-root": {
       fontSize: "xxs",
@@ -46,7 +46,7 @@ const edgeRow = css({
   display: "contents",
   [`&:last-child .${edgeLabelclass}`]: {
     borderBottom: "none",
-    marginBottom: 0
+    marginBottom: "0"
   },
   "& > *": {
     transition: "all 0.15s ease-in"
@@ -61,14 +61,14 @@ const edgeGrid = css({
   display: "grid",
   gridTemplateColumns: "1fr 30px 1fr",
   gridAutoRows: "min-content max-content",
-  gap: 0,
+  gap: "0",
   alignItems: "stretch"
 });
 css({
   display: "grid",
   gridTemplateColumns: "min-content 1fr",
   gridAutoRows: "min-content max-content",
-  gap: "10px 12px",
+  gap: "[10px 12px]",
   alignItems: "baseline",
   justifyItems: "start"
 });

package/dist/overlays/relationships-browser/SelectElement.css.js

@@ -1,7 +1,7 @@
 import { css } from '@likec4/styles/css';
 
 const node = css({
-  margin: 0
+  margin: "0"
 });
 const label = css({
   _hover: {

package/dist/search/Search.js

@@ -36,8 +36,8 @@ const body = css({
   // containerType: 'size',
   // position: 'fixed',
   // zIndex: 901,
-  // top: 0,
-  // left: 0,
+  // top: '0',
+  // left: '0',
   width: "100%",
   height: "100%",
   maxHeight: "100vh",
@@ -46,10 +46,10 @@ const body = css({
   flexDirection: "column",
   justifyContent: "stretch",
   gap: "sm",
-  paddingTop: 20,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingBottom: 8,
+  paddingTop: "[20px]",
+  paddingLeft: "md",
+  paddingRight: "md",
+  paddingBottom: "sm",
   background: "[transparent]"
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,

package/dist/search/components/ElementsColumn.css.js

@@ -4,7 +4,7 @@ import { container } from '@likec4/styles/patterns';
 const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
 const treeNode = css({
   outline: "none",
-  marginBottom: "8px"
+  marginBottom: "2"
 });
 const treeRoot = css(
   container.raw({
@@ -19,10 +19,10 @@ const treeLabel = css({
   display: "flex",
   alignItems: "baseline",
   outline: "none !important",
-  gap: "4px"
+  gap: "1"
 });
 const treeSubtree = css({
-  marginTop: "8px"
+  marginTop: "2"
 });
 const elementExpandIcon = css({
   color: "mantine.colors.dimmed"
@@ -31,7 +31,7 @@ const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
     flexDirection: "column-reverse",
     alignItems: "flex-start",
-    gap: 2
+    gap: "0.5"
   }
 });
 const elementId = css({
@@ -41,7 +41,7 @@ const elementId = css({
   display: "block",
   fontWeight: 500,
   whiteSpace: "nowrap",
-  padding: "1px 5px",
+  padding: "[1px 5px]",
   borderRadius: "4px",
   background: `mantine.colors.dark[9]/30`,
   _light: {

package/dist/search/components/SearchByTags.js

@@ -29,7 +29,7 @@ function SearchByTags() {
       ref,
       css: {
         gap: "md",
-        paddingLeft: 48,
+        paddingLeft: "[48px]",
         flexWrap: "nowrap"
       },
       children: [
@@ -37,7 +37,8 @@ function SearchByTags() {
           HStack,
           {
             css: {
-              gap: 6,
+              gap: "1.5",
+              // 6px
               flexWrap: "wrap",
               opacity: isFiltered ? 1 : 0.3,
               grayscale: isFiltered ? 0 : 0.9,

package/dist/search/components/ViewsColum.js

@@ -28,7 +28,7 @@ const ViewsColumn = memo(() => {
         if (search.startsWith("#")) {
           return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
         }
-        return (view.title ?? "" + view.$view.description ?? "").toLocaleLowerCase().includes(search);
+        return `${view.title} ${view.$view.description}`.toLocaleLowerCase().includes(search);
       });
     }
   }

package/dist/search/components/ViewsColumn.css.js

@@ -16,7 +16,7 @@ const viewButton = cx(
   _viewBtn
 );
 css({
-  marginTop: "4px",
+  marginTop: "1",
   // transition: transitions.fast,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: "13px",

package/dist/search/components/_shared.css.js

@@ -11,9 +11,9 @@ const button = css.raw({
   width: "100%",
   background: "mantine.colors.body",
   rounded: "sm",
-  padding: `12px 8px 12px 14px`,
+  padding: `[12px 8px 12px 14px]`,
   minHeight: "60px",
-  gap: 8,
+  gap: "2",
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -126,7 +126,7 @@ const descriptionColor = css.raw({
   }
 });
 const description = css.raw(descriptionColor, {
-  marginTop: "4px",
+  marginTop: "1",
   fontSize: "12px",
   lineHeight: "1.4",
   [`:where([data-disabled]) &`]: {

package/dist/search/components/styles.css.js

@@ -16,7 +16,7 @@ const input = css({
 });
 const pickviewBackdrop = css({
   position: "absolute",
-  inset: 0,
+  inset: "0",
   width: "100%",
   height: "100%",
   backgroundColor: "[rgb(34 34 34 / 0.7)]",
@@ -29,8 +29,8 @@ const pickviewBackdrop = css({
 });
 const pickview = css({
   position: "absolute",
-  top: "2rem",
-  left: "50%",
+  top: "[2rem]",
+  left: "[50%]",
   width: "100%",
   maxWidth: "600px",
   minWidth: "200px",
@@ -38,9 +38,9 @@ const pickview = css({
   zIndex: 903
 });
 const pickviewGroup = css({
-  marginTop: "8px",
+  marginTop: "2",
   "& + &": {
-    marginTop: "32px"
+    marginTop: "[32px]"
   }
 });
 css({