@likec4/diagram 1.34.2 → 1.36.0

package/dist/node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.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": "M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", "key": "svg-0" }], ["path", { "d": "M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", "key": "svg-1" }], ["path", { "d": "M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", "key": "svg-2" }], ["path", { "d": "M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3", "key": "svg-3" }], ["path", { "d": "M16.5 8.5l2.5 2.5l2.5 -2.5", "key": "svg-4" }]];
+const IconReorder = createReactComponent("outline", "reorder", "Reorder", __iconNode);
+
+export { __iconNode, IconReorder 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/IconRouteOff.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 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5", "key": "svg-2" }], ["path", { "d": "M3 3l18 18", "key": "svg-3" }]];
+const IconRouteOff = createReactComponent("outline", "route-off", "RouteOff", __iconNode);
+
+export { __iconNode, IconRouteOff 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/IconSearch.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": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", "key": "svg-0" }], ["path", { "d": "M21 21l-6 -6", "key": "svg-1" }]];
+const IconSearch = createReactComponent("outline", "search", "Search", __iconNode);
+
+export { __iconNode, IconSearch 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/IconSelector.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": "M8 9l4 -4l4 4", "key": "svg-0" }], ["path", { "d": "M16 15l-4 4l-4 -4", "key": "svg-1" }]];
+const IconSelector = createReactComponent("outline", "selector", "Selector", __iconNode);
+
+export { __iconNode, IconSelector 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/IconStack2.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": "M12 4l-8 4l8 4l8 -4l-8 -4", "key": "svg-0" }], ["path", { "d": "M4 12l8 4l8 -4", "key": "svg-1" }], ["path", { "d": "M4 16l8 4l8 -4", "key": "svg-2" }]];
+const IconStack2 = createReactComponent("outline", "stack-2", "Stack2", __iconNode);
+
+export { __iconNode, IconStack2 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/IconStarFilled.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": "M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z", "key": "svg-0" }]];
+const IconStarFilled = createReactComponent("filled", "star-filled", "StarFilled", __iconNode);
+
+export { __iconNode, IconStarFilled 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/IconTarget.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": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0", "key": "svg-1" }], ["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-2" }]];
+const IconTarget = createReactComponent("outline", "target", "Target", __iconNode);
+
+export { __iconNode, IconTarget 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/IconTransform.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": "M3 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", "key": "svg-0" }], ["path", { "d": "M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3", "key": "svg-1" }], ["path", { "d": "M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3", "key": "svg-2" }], ["path", { "d": "M15 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", "key": "svg-3" }]];
+const IconTransform = createReactComponent("outline", "transform", "Transform", __iconNode);
+
+export { __iconNode, IconTransform 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/IconUser.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": "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", "key": "svg-0" }], ["path", { "d": "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", "key": "svg-1" }]];
+const IconUser = createReactComponent("outline", "user", "User", __iconNode);
+
+export { __iconNode, IconUser 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/IconX.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": "M18 6l-12 12", "key": "svg-0" }], ["path", { "d": "M6 6l12 12", "key": "svg-1" }]];
+const IconX = createReactComponent("outline", "x", "X", __iconNode);
+
+export { __iconNode, IconX 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/IconZoomScan.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": "M4 8v-2a2 2 0 0 1 2 -2h2", "key": "svg-0" }], ["path", { "d": "M4 16v2a2 2 0 0 0 2 2h2", "key": "svg-1" }], ["path", { "d": "M16 4h2a2 2 0 0 1 2 2v2", "key": "svg-2" }], ["path", { "d": "M16 20h2a2 2 0 0 0 2 -2v-2", "key": "svg-3" }], ["path", { "d": "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", "key": "svg-4" }], ["path", { "d": "M16 16l-2.5 -2.5", "key": "svg-5" }]];
+const IconZoomScan = createReactComponent("outline", "zoom-scan", "ZoomScan", __iconNode);
+
+export { __iconNode, IconZoomScan 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';
@@ -17,12 +18,12 @@ import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 
 const Divider = Divider$1.withProps({
   mb: 8,
@@ -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/TabPanelDeployments.js

@@ -4,10 +4,10 @@ import { memo, useMemo, useEffect } from 'react';
 import { useDiagram } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const DeploymentNodeRenderer = ({
   node

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/element-details/TabPanelRelationships.js

@@ -8,9 +8,9 @@ import { useOverlaysActorRef } from '../../hooks/useOverlaysActor.js';
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
 import { useElementDetailsActorRef } from './actorContext.js';
 import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
 import { useMemo, useEffect } from 'react';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 const ElementLabel = ({
   element

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/RelationshipDetails.js

@@ -17,9 +17,9 @@ import { layoutRelationshipDetails } from './layout.js';
 import { SelectEdge } from './SelectEdge.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,

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/relationship-details/SelectEdge.js

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -3,9 +3,9 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();